Ver código fonte

fix: improve menu style

Sv443 1 ano atrás
pai
commit
e996d164ec
2 arquivos alterados com 17 adições e 8 exclusões
  1. 15 4
      src/features/menu/menu_old.css
  2. 2 4
      src/features/menu/menu_old.ts

+ 15 - 4
src/features/menu/menu_old.css

@@ -67,28 +67,39 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-top: 10px;
+  z-index: 100;
   padding: 32px 20px 8px 20px;
   position: sticky;
   bottom: 0;
   background: var(--bytm-menu-bg);
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bytm-menu-bg) 25%, var(--bytm-menu-bg) 100%);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bytm-menu-bg) 30%, var(--bytm-menu-bg) 100%);
+  pointer-events: none;
+}
+
+#bytm-menu-footer, .bytm-cfg-reset {
+  pointer-events: initial;
 }
 
 #bytm-menu-scroll-indicator {
+  --bytm-scroll-indicator-padding: 5px;
   position: sticky;
   bottom: 60px;
   left: 50%;
+  margin-top: calc(-32px + var(--bytm-scroll-indicator-padding) * 2);
+  padding: var(--bytm-scroll-indicator-padding);
   transform: translateX(-50%);
   width: 32px;
   height: 32px;
-  padding: 5px;
-  z-index: 1000;
+  z-index: 101;
   background-color: var(--bytm-menu-bg-highlight);
   border-radius: 50%;
   cursor: pointer;
 }
 
+.bytm-hidden {
+  visibility: hidden;
+}
+
 .bytm-ftconf-category-header {
   font-size: 18px;
   margin-top: 32px;

+ 2 - 4
src/features/menu/menu_old.ts

@@ -280,14 +280,12 @@ export async function addMenu() {
 
     if(scrollPos > 10 && scrollIndicatorShown) {
       scrollIndicatorShown = false;
-      scrollIndicator.classList.add("hidden");
+      scrollIndicator.classList.add("bytm-hidden");
       await pauseFor(200);
-      scrollIndicator.style.visibility = "hidden";
     }
     else if(scrollPos <= 10 && !scrollIndicatorShown) {
       scrollIndicatorShown = true;
-      scrollIndicator.style.visibility = "initial";
-      scrollIndicator.classList.remove("hidden");
+      scrollIndicator.classList.remove("bytm-hidden");
     }
   });