1 files changed, 93 insertions, 20 deletions

diff --git a/extension/src/index.css b/extension/src/index.css
index f240f82..72f29db 100644
--- a/extension/src/index.css
+++ b/extension/src/index.css
@@ -79,8 +79,9 @@ body > .folderBody {
 
 /* Bookmark */
 .bookmark {
-  padding: 10px;
+  margin: 10px;
   position: relative;
+  border-radius: 10px;
 }
 
 .bookmark > a {
@@ -89,7 +90,6 @@ body > .folderBody {
   width: 125px;
   padding: 10px;
   user-select: none;
-  border-radius: 10px;
 }
 
 .icon-box {
@@ -141,7 +141,7 @@ body > .folderBody {
   font-size: 12px;
 }
 
-.bookmark > a:hover {
+.bookmark:hover {
   background-color: rgba(0, 0, 0, 0.3);
 }
 
@@ -162,6 +162,8 @@ a {
   z-index: 2;
 }
 
+
+
 #action-area {
   position: absolute;
   top: 0;
@@ -172,22 +174,22 @@ a {
   display: flex;
   flex-direction: row;
 
-  button {
-    border-style: none;
-    background: none;
-    color: white;
-  }
-
   > * {
     padding: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
   }
+}
 
-  button:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-  }
+button:not(.default) {
+  border-style: none;
+  background: none;
+  color: white;
+}
+
+button:hover:not(.default) {
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 /* Drop targets */
@@ -208,12 +210,13 @@ a {
 
 .drop-targets > .left {
   position: absolute;
-  left: -2px;
+  left: -12px;
   height: 100%;
   width: 30px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  /*background-color: rgba(0, 255, 255, 0.5);*/
 
   > div {
     background-color: white;
@@ -224,12 +227,13 @@ a {
 
 .drop-targets > .right {
   position: absolute;
-  right: -2px;
+  right: -12px;
   height: 100%;
   width: 30px;
   display: flex;
   justify-content: flex-end;
   align-items: center;
+  /*background-color: rgba(0, 255, 255, 0.5);*/
 
   > div {
     background-color: white;
@@ -242,11 +246,12 @@ a {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 30px;
-  right: 30px;
+  left:  20px;
+  right: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
+  /*background-color: rgba(255, 0, 106, 0.5);*/
 
   > span {
     /*color: aqua;*/
@@ -258,13 +263,13 @@ a {
   }
 
   > svg {
-    background-color: #FFF;
-    width: 50px;
-    height: 50px;
+    background-color: rgba(0, 0, 0, 0.5);
+    width: 75px;
+    height: 75px;
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 14px;
-    fill: black;
+    fill: #ffffff;
   }
 }
 
@@ -273,4 +278,72 @@ a {
   fill: black;
 }
 
+.overflow {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  display: none;
+
+  > button {
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    padding: 2px;
+    display: flex;
+    /*aspect-ratio: 1 / 1;*/
+  }
+}
+
+.bookmark:hover .overflow, .overflow:hover, .overflow:has(.context-menu) {
+  display: flex;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0 }
+}
+
+.context-menu {
+  display: flex;
+  flex-direction: column;
+  background-color: black;
+  color: white;
+  fill: white;
+  position: absolute;
+  top: 30px;
+  left: -30px;
+  right: -30px;
+  /* width: 50px; */
+  border-radius: 5px;
+  animation: fadeIn;
+  animation-duration: 0.2s;
+  padding: 5px 0;
+  gap: 2px;
+
+  button {
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    padding: 7px;
+    align-items: center;
+    gap: 2px;
+    justify-content: flex-start;
+    font-size: 15px;
+  }
+
+  svg {
+    max-height: 100%;
+  }
+
+  button:hover {
+    background-color: #242424;
+  }
+
+  .del {
+    color: #d00000;
+    fill: #d00000;
+  }
+}
+
+
+