Subtle facelift for menus

src/app.css

@@ -1810,13 +1810,14 @@ body > .szh-menu-container {
     env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 .szh-menu {
-  padding: 8px 0;
+  padding: 4px 0;
   margin: 0;
   font-size: var(--text-size);
   background-color: var(--bg-color);
-  border: 1px solid var(--outline-color);
+  border: 1px solid var(--outline-stronger-color);
   border-radius: 8px;
-  box-shadow: 0 3px 16px -3px var(--drop-shadow-color);
+  box-shadow: 0 3px 8px var(--drop-shadow-color),
+    0 6px 32px -6px var(--drop-shadow-color);
   text-align: start;
   /* animation: appear-smooth 0.15s ease-in-out; */
   min-width: 16em;
@@ -1881,6 +1882,9 @@ body > .szh-menu-container {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  --menu-item-bg-inset: 0 4px;
+  --menu-item-bg-color: var(--button-bg-color);
 }
 .szh-menu .szh-menu__item--focusable {
   background-color: transparent;
@@ -1917,9 +1921,30 @@ body > .szh-menu-container {
   .szh-menu__item:not(.szh-menu__item--disabled, .szh-menu__item--hover) {
   color: var(--text-color);
 }
+.szh-menu .szh-menu__item:not(.menu-field) {
+  position: relative;
+  & > * {
+    /* z-index: 1; */
+  }
+
+  &:before {
+    content: '';
+    background-color: var(--menu-item-bg-color);
+    position: absolute;
+    inset: var(--menu-item-bg-inset);
+    border-radius: 4px;
+    z-index: -1;
+    opacity: 0;
+  }
+}
 .szh-menu .szh-menu__item--hover:not(.menu-field) {
   color: var(--button-text-color);
-  background-color: var(--button-bg-color);
+  /* background-color: var(--button-bg-color); */
+  background-color: transparent;
+
+  &:before {
+    opacity: 1;
+  }
 }
 .szh-menu__divider {
   background-color: var(--divider-color);
@@ -1995,10 +2020,12 @@ body > .szh-menu-container {
 }
 .szh-menu
   .szh-menu__item.danger:not(.szh-menu__item--disabled).szh-menu__item--hover {
-  background-color: var(--red-text-color);
+  /* background-color: var(--red-text-color); */
+  --menu-item-bg-color: var(--red-text-color);
 
   @media (prefers-color-scheme: dark) {
-    background-color: var(--red-color);
+    /* background-color: var(--red-color); */
+    --menu-item-bg-color: var(--red-color);
   }
 }
 .szh-menu
@@ -2038,12 +2065,20 @@ body > .szh-menu-container {
           );
         }
       }
+
+      &:before {
+        content: '';
+      }
+    }
+
+    .szh-menu__item--hover {
+      background-color: var(--menu-item-bg-color);
     }
   }
 
   .menu-control-group-horizontal:first-child,
   li[role='none'] + .menu-control-group-horizontal {
-    margin-top: -8px;
+    margin-top: -4px;
     margin-bottom: -4px;
 
     .szh-menu__item {
@@ -2094,11 +2129,10 @@ body > .szh-menu-container {
   background-color: var(--bg-blur-color);
   backdrop-filter: blur(8px) saturate(3);
   border: var(--hairline-width) solid var(--bg-color);
-  box-shadow: 0 3px 8px -1px var(--drop-shadow-color);
   text-shadow: 0 var(--hairline-width) var(--bg-color), 0 0 8px var(--bg-color);
 }
 .glass-menu .szh-menu__item--hover {
-  background-color: var(--button-bg-blur-color);
+  /* background-color: var(--button-bg-blur-color); */
   text-shadow: none;
 }
 

src/components/nav-menu.css

@@ -22,7 +22,7 @@
     margin-bottom: -8px;
   }
   .nav-menu section {
-    padding: 8px 0;
+    padding: 4px 0;
     /* width: 50%; */
   }
   @keyframes phanpying {

src/index.css

@@ -84,6 +84,7 @@
     var(--text-color) 60%
   );
   --outline-color: rgba(128, 128, 128, 0.2);
+  --outline-stronger-color: rgba(128, 128, 128, 0.4);
   --outline-hover-color: rgba(128, 128, 128, 0.7);
   --divider-color: rgba(0, 0, 0, 0.1);
   --backdrop-color: rgba(0, 0, 0, 0.1);