Sfoglia il codice sorgente

Tweak context menu style (#320)

- Move the context menu right next to the mouse so it's not so far away. But 1px out so that nothing is selected until you move your mouse
- Change the colors to be closer to the macos one. Unfortunately, macos has a 0.5px border that I'm not able to reproduce without some annoying hacks, 1px it'll be.
Christopher Chedeau 5 anni fa
parent
commit
1bf18fe4ed
1 ha cambiato i file con 12 aggiunte e 10 eliminazioni
  1. 12 10
      src/components/ContextMenu.css

+ 12 - 10
src/components/ContextMenu.css

@@ -5,6 +5,10 @@
   padding: 0;
   list-style: none;
   user-select: none;
+  margin: -4px 0 0 1px;
+  padding: 4px 0;
+  background-color: #f2f2f2;
+  border: 1px solid #bcbcbc;
 }
 
 .context-menu__option {
@@ -17,18 +21,16 @@
   margin: 0;
   text-align: left;
   border-radius: 0;
+  padding-left: 20px;
+  background-color: #f2f2f2;
+  border: none;
 }
 
-.context-menu-option:focus {
-  z-index: 1;
-}
-
-.context-menu__option:first-child .context-menu-option {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+.context-menu-option:hover {
+  color: white;
+  background-color: #4e95f5;
 }
 
-.context-menu__option:last-child .context-menu-option {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+.context-menu-option:focus {
+  z-index: 1;
 }