From f641f388ad674229626a92c8d78d860b01ba9094 Mon Sep 17 00:00:00 2001
From: KOWX712 <leecc0503@gmail.com>
Date: Wed, 1 Jan 2025 22:36:31 +0800
Subject: [PATCH] opt menu touch effect

---
 module/webui/scripts/language.js    |  4 +++-
 module/webui/scripts/update.js      |  4 ++--
 module/webui/styles/header.css      | 37 ++++++++++++++++++++---------
 module/webui/styles/search_menu.css | 31 +++++++++++++++++++-----
 4 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/module/webui/scripts/language.js b/module/webui/scripts/language.js
index 4c586ca..2904aa5 100644
--- a/module/webui/scripts/language.js
+++ b/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");
diff --git a/module/webui/scripts/update.js b/module/webui/scripts/update.js
index 232ca6d..e2eb953 100644
--- a/module/webui/scripts/update.js
+++ b/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>
-                    ${lines.slice(1).map(line => `<li>${line}</li>`).join('')}
+                <li class="changelog-title">${lines[0]}</li>
+                ${lines.slice(1).map(line => `<li>${line}</li>`).join('')}
             `;
             releaseNotes.innerHTML = formattedChangelog;
             openUpdateMenu();
diff --git a/module/webui/styles/header.css b/module/webui/styles/header.css
index 313a689..d2b9c8f 100644
--- a/module/webui/styles/header.css
+++ b/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);
+    transform: translateY(0) scale(1);
 }
 
 .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 {
-        border-bottom: 1px solid #6E6E6E;
+    .language-option::after {
+        background-color: #6E6E6E;
     }
 }
\ No newline at end of file
diff --git a/module/webui/styles/search_menu.css b/module/webui/styles/search_menu.css
index 08038b7..db29331 100644
--- a/module/webui/styles/search_menu.css
+++ b/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 4px;
+    padding: 12px 15px;
     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
     }
 }
\ No newline at end of file