opt menu touch effect

module/webui/scripts/language.js

@@ -93,8 +93,10 @@ export function setupLanguageMenu() {
         }
     });
     function openLanguageMenu() {
-        languageMenu.classList.add("show");
         languageOverlay.style.display = 'flex';
+        setTimeout(() => {
+            languageMenu.classList.add("show");
+        }, 10);
     }
     function closeLanguageMenu() {
         languageMenu.classList.remove("show");

module/webui/scripts/update.js

@@ -60,8 +60,8 @@ function setupUpdateMenu() {
                 .filter(line => line.trim() !== '')
                 .map(line => line.startsWith('- ') ? line.slice(2) : line);
             const formattedChangelog = `
-                    <li class="changelog-title">${lines[0]}</li>
+                <li class="changelog-title">${lines[0]}</li>
-                    ${lines.slice(1).map(line => `<li>${line}</li>`).join('')}
+                ${lines.slice(1).map(line => `<li>${line}</li>`).join('')}
             `;
             releaseNotes.innerHTML = formattedChangelog;
             openUpdateMenu();

module/webui/styles/header.css

@@ -61,7 +61,6 @@
 
 .language-menu {
     display: flex;
-    padding: 3px 10px;
     flex-direction: column;
     position: absolute;
     right: 0;
@@ -70,23 +69,22 @@
     z-index: 1800;
     border: 1px solid #ccc;
     border-radius: 8px;
+    box-sizing: border-box;
     opacity: 0;
-    visibility: hidden;
     max-height: calc(100vh - 50px);
     overflow-y: auto;
-    transform: translateY(-10px);
+    transform: translateY(-30px) scale(0);
+    transform-origin: top right;
     transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .language-menu.show {
-    display: block;
     opacity: 1;
-    visibility: visible;
+    transform: translateY(0) scale(1);
-    transform: translateY(0);
 }
 
 .language-option {
-    padding: 8px 5px;
+    padding: 8px 10px;
     text-align: left;
     color: #333;
     background-color: white;
@@ -94,14 +92,31 @@
     font-size: 16px;
     width: 100%;
     white-space: nowrap;
-    border-bottom: 1px solid #ccc;
     position: relative;
     overflow: hidden;
     user-select: none;
 }
 
+.language-option::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+    width: calc(100% - 20px);
+    height: 1px;
+    background-color: #ccc;
+}
+
+.language-option:last-child::after {
+    content: none;
+}
+
+.language-option:first-child {
+    padding-top: 10px;
+}
+
 .language-option:last-child {
-    border-bottom: none;
+    padding-bottom: 10px;
 }
 
 .language-overlay {
@@ -228,7 +243,7 @@
         border: 1px solid #6E6E6E;
     }
 
-    .language-option {
+    .language-option::after {
-        border-bottom: 1px solid #6E6E6E;
+        background-color: #6E6E6E;
     }
 }

module/webui/styles/search_menu.css

@@ -98,9 +98,9 @@
     border: 1px solid #ccc;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
     display: flex;
     position: absolute;
-    padding: 5px 12px;
     top: 110%;
     right: 0;
     z-index: 1200;
@@ -131,17 +131,33 @@
 }
 
 .menu-options li {
-    cursor: default;
+    padding: 12px 15px;
-    padding: 12px 4px;
     text-align: left;
     background-color: white;
-    border-bottom: 1px solid #ccc;
     position: relative;
     overflow: hidden;
 }
 
+.menu-options li::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 15px;
+    width: calc(100% - 30px);
+    height: 1px;
+    background-color: #ccc;
+}
+
+.menu-options li:last-child::after {
+    content: none;
+}
+
+.menu-options li:first-child {
+    padding-top: 16px;
+}
+
 .menu-options li:last-child {
-    border-bottom: none;
+    padding-bottom: 16px;
 }
 
 .menu-overlay {
@@ -181,6 +197,9 @@
 
     .menu-options li {
         background-color: #343434;
-        border-bottom: 1px solid #6E6E6E;
+    }
+
+    .menu-options li::after {
+        background-color: #6E6E6E
     }
 }