misc: move out file selector styling code from js

module/webui/index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="styles/about.css" type="text/css">
     <link rel="stylesheet" href="styles/applist.css" type="text/css">
     <link rel="stylesheet" href="styles/boot_hash.css" type="text/css">
+    <link rel="stylesheet" href="styles/file_selector.css" type="text/css">
     <link rel="stylesheet" href="styles/header.css" type="text/css">
     <link rel="stylesheet" href="styles/search_menu.css" type="text/css">
     <link rel="stylesheet" href="styles/security_patch.css" type="text/css">
@@ -285,6 +286,20 @@
         </div>
     </div>
 
+    <!-- File Selector Overlay -->
+    <div class="file-selector-overlay">
+        <div class="file-selector">
+            <div class="file-selector-header">
+                <button class="back-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="22px" viewBox="40 -1000 900 960" width="22px"><path d="M400-93.85 13.85-480 400-866.15l56.77 56.77L127.38-480l329.39 329.38L400-93.85Z"/></svg>
+                </button>
+                <div class="current-path">/storage/emulated/0/Download</div>
+                <button class="close-selector">&#x2715;</button>
+            </div>
+            <div class="file-list"></div>
+        </div>
+    </div>
+
     <!-- Security Patch Overlay -->
     <div id="security-patch-overlay" class="security-patch-overlay">
         <div id="security-patch-card" class="security-patch-card">

module/webui/scripts/menu_option.js

@@ -234,43 +234,7 @@ document.getElementById("validkb").addEventListener("click", async () => {
     });
 });
 
-// Add file selector dialog elements dynamically
-const fileSelector = document.createElement('div');
-fileSelector.className = 'file-selector-overlay';
-fileSelector.innerHTML = `
-    <div class="file-selector">
-        <div class="file-selector-header">
-            <button class="back-button">
-                <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M400-80 0-480l400-400 56 57-343 343 343 343-56 57Z"/></svg>
-            </button>
-            <div class="current-path">/storage/emulated/0/Download</div>
-            <button class="close-selector">&#x2715;</button>
-        </div>
-        <div class="file-list"></div>
-    </div>
-`;
-document.body.appendChild(fileSelector);
-
-// Add styles for animations
-const style = document.createElement('style');
-style.textContent = `
-    .file-selector-overlay {
-        transition: opacity 0.3s ease;
-        opacity: 0;
-    }
-    .file-selector-overlay.visible {
-        opacity: 1;
-    }
-    .file-list {
-        transition: transform 0.3s ease, opacity 0.3s ease;
-    }
-    .file-list.switching {
-        transform: scale(0.95);
-        opacity: 0;
-    }
-`;
-document.head.appendChild(style);
-
+const fileSelector = document.querySelector('.file-selector-overlay');
 let currentPath = '/storage/emulated/0/Download';
 
 function updateCurrentPath() {
@@ -309,7 +273,7 @@ async function listFiles(path, skipAnimation = false) {
         // Add back button item if not in root directory
         if (currentPath !== '/storage/emulated/0') {
             const backItem = document.createElement('div');
-            backItem.className = 'file-item';
+            backItem.className = 'file-item ripple-element';
             backItem.innerHTML = `
                 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                     <path d="M141-160q-24 0-42-18.5T81-220v-520q0-23 18-41.5t42-18.5h280l60 60h340q23 0 41.5 18.5T881-680v460q0 23-18.5 41.5T821-160H141Z"/>
@@ -333,7 +297,7 @@ async function listFiles(path, skipAnimation = false) {
         items.forEach(item => {
             if (item.path === path) return;
             const itemElement = document.createElement('div');
-            itemElement.className = 'file-item';
+            itemElement.className = 'file-item ripple-element';
             itemElement.innerHTML = `
                 <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24">
                     ${item.isDirectory ? 
@@ -420,7 +384,7 @@ document.querySelector('.back-button').addEventListener('click', async () => {
 
 // Close custom keybox selector
 document.querySelector('.close-selector').addEventListener('click', () => {
-    fileSelector.classList.remove('visible');
+    fileSelector.style.opacity = '0';
     document.body.classList.remove("no-scroll");
     setTimeout(() => {
         fileSelector.style.display = 'none';
@@ -428,7 +392,7 @@ document.querySelector('.close-selector').addEventListener('click', () => {
 });
 fileSelector.addEventListener('click', (event) => {
     if (event.target === fileSelector) {
-        fileSelector.classList.remove('visible');
+        fileSelector.style.opacity = '0';
         document.body.classList.remove("no-scroll");
         setTimeout(() => {
             fileSelector.style.display = 'none';
@@ -441,7 +405,7 @@ document.getElementById('customkb').addEventListener('click', async () => {
     fileSelector.style.display = 'flex';
     document.body.classList.add("no-scroll");
     fileSelector.offsetHeight;
-    fileSelector.classList.add('visible');
+    fileSelector.style.opacity = '1';
     currentPath = '/storage/emulated/0/Download';
     const currentPathElement = document.querySelector('.current-path');
     currentPathElement.innerHTML = currentPath.split('/').filter(Boolean).join('<span class="separator">›</span>');

module/webui/styles/file_selector.css

@@ -0,0 +1,121 @@
+.file-selector-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    transition: opacity 0.3s ease;
+    opacity: 0;
+    z-index: 2000;
+    justify-content: center;
+    align-items: center;
+}
+
+.file-selector {
+    width: 90%;
+    max-width: 600px;
+    height: 80vh;
+    background-color: #fff;
+    border-radius: 15px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.file-selector-header {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 2px solid #ccc;
+}
+
+.current-path .separator {
+    color: #6E6E6E;
+    padding: 0 4px;
+}
+
+.back-button {
+    background: none;
+    border: none;
+    fill: #6E6E6E;
+    user-select: none;
+}
+
+.current-path {
+    flex-grow: 1;
+    font-size: 16px;
+    overflow: scroll;
+    white-space: nowrap;
+}
+
+.close-selector {
+    background: none;
+    border: none;
+    font-size: 20px;
+    color: #ccc;
+    padding: 5px;
+}
+
+.file-list {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 10px;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.file-list.switching {
+    transform: scale(0.95);
+    opacity: 0;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 8px;
+    background-color: #fff;
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+}
+
+.file-item svg {
+    margin-right: 10px;
+    fill: #6E6E6E;
+}
+
+.file-item span {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+    .file-selector {
+        background-color: #343434;
+        color: #fff;
+    }
+
+    .file-selector-header {
+        border-bottom: 2px solid #232323;
+    }
+
+    .file-item {
+        background-color: #343434;
+    }
+
+    .current-path .separator {
+        color: #C2C2C2;
+    }
+
+    .back-button {
+        fill: #C2C2C2;
+    }
+
+    .file-item svg {
+        fill: #C2C2C2;
+    }
+}

module/webui/styles/global.css

@@ -105,95 +105,6 @@ body {
     display: none;
 }
 
-.file-selector-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2000;
-    justify-content: center;
-    align-items: center;
-}
-
-.file-selector {
-    width: 90%;
-    max-width: 600px;
-    height: 80vh;
-    background-color: #fff;
-    border-radius: 15px;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.file-selector-header {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid #ccc;
-}
-
-.current-path .separator {
-    color: #6E6E6E;
-    padding: 0 4px;
-}
-
-.back-button {
-    background: none;
-    border: none;
-    padding: 5px;
-    margin-right: 10px;
-    fill: #6E6E6E;
-    user-select: none;
-}
-
-.current-path {
-    flex-grow: 1;
-    font-size: 16px;
-    overflow: scroll;
-    white-space: nowrap;
-}
-
-.close-selector {
-    background: none;
-    border: none;
-    font-size: 20px;
-    color: #ccc;
-    padding: 5px;
-}
-
-.file-list {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 10px;
-}
-
-.file-item {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    border-radius: 8px;
-    background-color: #fff;
-    position: relative;
-    overflow: hidden;
-    user-select: none;
-}
-
-.file-item svg {
-    margin-right: 10px;
-    fill: #6E6E6E;
-}
-
-.file-item span {
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
 .permission-popup {
     position: fixed;
     top: 0;
@@ -272,31 +183,6 @@ body {
         background-color: #121212;
     }
 
-    .file-selector {
-        background-color: #343434;
-        color: #fff;
-    }
-
-    .file-selector-header {
-        border-bottom: 1px solid #6E6E6E;
-    }
-
-    .file-item {
-        background-color: #343434;
-    }
-
-    .current-path .separator {
-        color: #C2C2C2;
-    }
-
-    .back-button {
-        fill: #C2C2C2;
-    }
-
-    .file-item svg {
-        fill: #C2C2C2;
-    }
-
     .permission-content {
         background-color: #343434;
     }