[design] restore menu transparency when edge is shown

Author: zombieFox

src/css/menu.css

@@ -6,9 +6,9 @@
   width: 100%;
   height: 80vh;
   transform: translateY(calc(-100% - 2em));
-  transition: transform var(--layout-timing-extra-fast);
   z-index: var(--z-index-menu);
   pointer-events: none;
+  transition: transform var(--layout-timing-extra-fast);
 }
 
 .menu:focus {
@@ -22,14 +22,18 @@
 .menu-area {
   background-color: rgb(var(--theme-gray-01));
   border-radius: var(--theme-radius);
-  box-shadow: var(--layout-shadow-large);
   width: 100%;
   max-height: 100%;
   overflow-y: auto;
+  box-shadow: var(--layout-shadow-large);
   pointer-events: all;
   transition: background-color var(--layout-timing-extra-fast);
 }
 
+.is-edge .menu-area {
+  background-color: rgba(var(--theme-gray-01), 0.8);
+}
+
 .menu-nav {
   display: flex;
   flex-direction: row;