From 41ce39be2a2c6cbfe4b9e45be2be0525b02e601a Mon Sep 17 00:00:00 2001
From: KOWX712 <leecc0503@gmail.com>
Date: Thu, 27 Feb 2025 19:10:13 +0800
Subject: [PATCH] opt: styling

---
 module/webui/index.html                | 77 +++++++++++++-------------
 module/webui/scripts/security_patch.js |  7 +--
 module/webui/styles/security_patch.css |  7 +--
 module/webui/styles/system_app.css     | 14 ++---
 4 files changed, 48 insertions(+), 57 deletions(-)

diff --git a/module/webui/index.html b/module/webui/index.html
index 5b38320..70f06c0 100644
--- a/module/webui/index.html
+++ b/module/webui/index.html
@@ -286,49 +286,50 @@
     </div>
 
     <!-- Security Patch Overlay -->
-    <div id="security-patch-overlay" class="security-patch-overlay"></div>
-    <div id="security-patch-card" class="security-patch-card">
-        <div class="security-patch-header" data-i18n="security_patch.title"></div>
-        <div class="security-patch-content">
-            <div id="normal-mode-inputs" class="normal-mode-inputs">
-                <div class="input-group">
-                    <label id="security_patch-all">All</label>
-                    <input type="text" id="all-patch" placeholder="20250101" maxlength="8" autocapitalize="none">
+    <div id="security-patch-overlay" class="security-patch-overlay">
+        <div id="security-patch-card" class="security-patch-card">
+            <div class="security-patch-header" data-i18n="security_patch.title"></div>
+            <div class="security-patch-content">
+                <div id="normal-mode-inputs" class="normal-mode-inputs">
+                    <div class="input-group">
+                        <label id="security_patch-all">All</label>
+                        <input type="text" id="all-patch" placeholder="20250101" maxlength="8" autocapitalize="none">
+                    </div>
                 </div>
-            </div>
 
-            <div id="advanced-mode-inputs" class="advanced-mode-inputs hidden">
-                <div class="input-group">
-                    <label id="security_patch-system">System</label>
-                    <input type="text" id="system-patch" placeholder="202501" maxlength="6" autocapitalize="none">
+                <div id="advanced-mode-inputs" class="advanced-mode-inputs hidden">
+                    <div class="input-group">
+                        <label id="security_patch-system">System</label>
+                        <input type="text" id="system-patch" placeholder="202501" maxlength="6" autocapitalize="none">
+                    </div>
+                    <div class="input-group">
+                        <label id="security_patch-boot">Boot</label>
+                        <input type="text" id="boot-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'boot')" maxlength="10">
+                    </div>
+                    <div class="input-group">
+                        <label id="security_patch-vendor">Vendor</label>
+                        <input type="text" id="vendor-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'vendor')" maxlength="10">
+                    </div>
                 </div>
-                <div class="input-group">
-                    <label id="security_patch-boot">Boot</label>
-                    <input type="text" id="boot-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'boot')" maxlength="10">
-                </div>
-                <div class="input-group">
-                    <label id="security_patch-vendor">Vendor</label>
-                    <input type="text" id="vendor-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'vendor')" maxlength="10">
-                </div>
-            </div>
 
-            <div class="advanced-toggle">
-                <input type="checkbox" class="checkbox" id="advanced-mode" />
-                <label for="advanced-mode" class="custom-checkbox">
-                    <span class="tick-symbol">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 26 26" width="16px" height="16px" fill="#fff">
-                            <path d="M 22.566406 4.730469 L 20.773438 3.511719 C 20.277344 3.175781 19.597656 3.304688 19.265625 3.796875 L 10.476563 16.757813 L 6.4375 12.71875 C 6.015625 12.296875 5.328125 12.296875 4.90625 12.71875 L 3.371094 14.253906 C 2.949219 14.675781 2.949219 15.363281 3.371094 15.789063 L 9.582031 22 C 9.929688 22.347656 10.476563 22.613281 10.96875 22.613281 C 11.460938 22.613281 11.957031 22.304688 12.277344 21.839844 L 22.855469 6.234375 C 23.191406 5.742188 23.0625 5.066406 22.566406 4.730469 Z"/>
-                        </svg>
-                    </span>
-                </label>
-                <label for="advanced-mode" data-i18n="security_patch.advanced_mode"></label>
-            </div>
+                <div class="advanced-toggle">
+                    <input type="checkbox" class="checkbox" id="advanced-mode" />
+                    <label for="advanced-mode" class="custom-checkbox">
+                        <span class="tick-symbol">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 26 26" width="16px" height="16px" fill="#fff">
+                                <path d="M 22.566406 4.730469 L 20.773438 3.511719 C 20.277344 3.175781 19.597656 3.304688 19.265625 3.796875 L 10.476563 16.757813 L 6.4375 12.71875 C 6.015625 12.296875 5.328125 12.296875 4.90625 12.71875 L 3.371094 14.253906 C 2.949219 14.675781 2.949219 15.363281 3.371094 15.789063 L 9.582031 22 C 9.929688 22.347656 10.476563 22.613281 10.96875 22.613281 C 11.460938 22.613281 11.957031 22.304688 12.277344 21.839844 L 22.855469 6.234375 C 23.191406 5.742188 23.0625 5.066406 22.566406 4.730469 Z"/>
+                            </svg>
+                        </span>
+                    </label>
+                    <label for="advanced-mode" data-i18n="security_patch.advanced_mode"></label>
+                </div>
 
-            <div>
-                <button id="get-patch" class="get-button ripple-element" data-i18n="security_patch.get_date"></button>
-                <div class="button-container">
-                    <button id="auto-config" class="auto-button ripple-element" data-i18n="security_patch.auto"></button>
-                    <button id="save-patch" class="save-button ripple-element" data-i18n="security_patch.save"></button>
+                <div>
+                    <button id="get-patch" class="get-button ripple-element" data-i18n="security_patch.get_date"></button>
+                    <div class="button-container">
+                        <button id="auto-config" class="auto-button ripple-element" data-i18n="security_patch.auto"></button>
+                        <button id="save-patch" class="save-button ripple-element" data-i18n="security_patch.save"></button>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/module/webui/scripts/security_patch.js b/module/webui/scripts/security_patch.js
index 2878c4e..5cabf8e 100644
--- a/module/webui/scripts/security_patch.js
+++ b/module/webui/scripts/security_patch.js
@@ -1,7 +1,6 @@
 import { basePath, execCommand, showPrompt } from './main.js';
 
 const overlay = document.getElementById('security-patch-overlay');
-const card = document.getElementById('security-patch-card');
 const advancedToggle = document.getElementById('advanced-mode');
 const normalInputs = document.getElementById('normal-mode-inputs');
 const advancedInputs = document.getElementById('advanced-mode-inputs');
@@ -16,11 +15,9 @@ const saveButton = document.getElementById('save-patch');
 // Show security patch dialog
 function showSecurityPatchDialog() {
     document.body.classList.add("no-scroll");
-    overlay.style.display = 'block';
-    card.style.display = 'block';
+    overlay.style.display = 'flex';
     setTimeout(() => {
         overlay.style.opacity = '1';
-        card.style.opacity = '1';
         loadCurrentConfig();
     }, 10);
 }
@@ -29,10 +26,8 @@ function showSecurityPatchDialog() {
 function hideSecurityPatchDialog() {
     document.body.classList.remove("no-scroll");
     overlay.style.opacity = '0';
-    card.style.opacity = '0';
     setTimeout(() => {
         overlay.style.display = 'none';
-        card.style.display = 'none';
     }, 200);
 }
 
diff --git a/module/webui/styles/security_patch.css b/module/webui/styles/security_patch.css
index 1765a98..0352191 100644
--- a/module/webui/styles/security_patch.css
+++ b/module/webui/styles/security_patch.css
@@ -1,6 +1,7 @@
 .security-patch-overlay {
     display: none;
     position: fixed;
+    justify-content: center;
     top: 0;
     left: 0;
     width: 100%;
@@ -12,11 +13,9 @@
 }
 
 .security-patch-card {
-    display: none;
+    display: block;
     position: fixed;
     top: 10%;
-    left: 50%;
-    transform: translateX(-50%);
     background-color: white;
     padding: 30px;
     border-radius: 15px;
@@ -26,8 +25,6 @@
     max-width: 300px;
     max-height: calc(80% - 60px);
     overflow-y: auto;
-    transition: opacity 0.2s ease;
-    opacity: 0;
 }
 
 .security-patch-content {
diff --git a/module/webui/styles/system_app.css b/module/webui/styles/system_app.css
index 63c362d..0eeb9e7 100644
--- a/module/webui/styles/system_app.css
+++ b/module/webui/styles/system_app.css
@@ -2,7 +2,6 @@
     display: none;
     position: fixed;
     justify-content: center;
-    align-items: flex-start;
     top: 0;
     left: 0;
     width: 100%;
@@ -16,12 +15,13 @@
 .add-system-app-card {
     position: fixed;
     display: flex;
-    margin-top: 15%;
+    top: 10%;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     width: calc(90vw - 60px);
     max-width: 400px;
+    max-height: calc(80vh - 60px);
+    overflow-y: scroll;
     padding: 30px;
     background-color: #fff;
     border-radius: 10px;
@@ -29,9 +29,9 @@
 }
 
 .add-system-app-title {
-    font-size: 24px;
-    font-weight: 600;
-    margin-bottom: 16px;
+    font-size: 26px;
+    user-select: none;
+    margin-bottom: 20px;
 }
 
 .add-system-app-content {
@@ -77,8 +77,6 @@
     align-items: center;
     justify-content: flex-start;
     width: 100%;
-    max-height: 40vh;
-    overflow-y: scroll;
 }
 
 .system-app-item {