Change style of bookmark editor button (#145)

Author: int128

src/Bookmarks/component.css

@@ -91,15 +91,22 @@
   text-align: center;
 }
 
-.BookmarkEditButton:hover {
-  color: var(--palette-01);
-  background-color: var(--palette-1);
+.BookmarkEditButton {
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.25s linear;
 }
 
-.Bookmark .BookmarkEditButton {
-  display: none;
+.Bookmark:hover .BookmarkEditButton,
+.Bookmark > a:focus + .BookmarkEditButton {
+  visibility: visible;
+  opacity: 1;
 }
 
-.Bookmark:hover .BookmarkEditButton {
-  display: block;
+.BookmarkEditButton:hover,
+.BookmarkEditButton:focus-visible {
+  visibility: visible;
+  opacity: 1;
+  background-color: var(--palette-2);
+  box-shadow: 0 0 calc(var(--size-folder-item-gap) * 3) var(--palette-01);
 }

src/Bookmarks/component.tsx

@@ -137,12 +137,13 @@ const BookmarkComponent: FC<BookmarkComponentProps> = ({ bookmark, shortcutMap }
       </Link>
       <a
         href="#Edit"
+        className="BookmarkEditButton"
         onClick={(e) => {
           setEditingBookmark(new EditingBookmark(bookmark, shortcutKey))
           e.preventDefault()
         }}
       >
-        <div className="BookmarkEditButton">&hellip;</div>
+        &hellip;
       </a>
       <BookmarkEditorComponent
         editingBookmark={editingBookmark}