opt: styling

This commit is contained in:
KOWX712
2025-02-27 19:10:13 +08:00
parent 56ca7ec7a1
commit 41ce39be2a
4 changed files with 48 additions and 57 deletions

View File

@@ -286,49 +286,50 @@
</div> </div>
<!-- Security Patch Overlay --> <!-- Security Patch Overlay -->
<div id="security-patch-overlay" class="security-patch-overlay"></div> <div id="security-patch-overlay" class="security-patch-overlay">
<div id="security-patch-card" class="security-patch-card"> <div id="security-patch-card" class="security-patch-card">
<div class="security-patch-header" data-i18n="security_patch.title"></div> <div class="security-patch-header" data-i18n="security_patch.title"></div>
<div class="security-patch-content"> <div class="security-patch-content">
<div id="normal-mode-inputs" class="normal-mode-inputs"> <div id="normal-mode-inputs" class="normal-mode-inputs">
<div class="input-group"> <div class="input-group">
<label id="security_patch-all">All</label> <label id="security_patch-all">All</label>
<input type="text" id="all-patch" placeholder="20250101" maxlength="8" autocapitalize="none"> <input type="text" id="all-patch" placeholder="20250101" maxlength="8" autocapitalize="none">
</div>
</div> </div>
</div>
<div id="advanced-mode-inputs" class="advanced-mode-inputs hidden"> <div id="advanced-mode-inputs" class="advanced-mode-inputs hidden">
<div class="input-group"> <div class="input-group">
<label id="security_patch-system">System</label> <label id="security_patch-system">System</label>
<input type="text" id="system-patch" placeholder="202501" maxlength="6" autocapitalize="none"> <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>
<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"> <div class="advanced-toggle">
<input type="checkbox" class="checkbox" id="advanced-mode" /> <input type="checkbox" class="checkbox" id="advanced-mode" />
<label for="advanced-mode" class="custom-checkbox"> <label for="advanced-mode" class="custom-checkbox">
<span class="tick-symbol"> <span class="tick-symbol">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 26 26" width="16px" height="16px" fill="#fff"> <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"/> <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> </svg>
</span> </span>
</label> </label>
<label for="advanced-mode" data-i18n="security_patch.advanced_mode"></label> <label for="advanced-mode" data-i18n="security_patch.advanced_mode"></label>
</div> </div>
<div> <div>
<button id="get-patch" class="get-button ripple-element" data-i18n="security_patch.get_date"></button> <button id="get-patch" class="get-button ripple-element" data-i18n="security_patch.get_date"></button>
<div class="button-container"> <div class="button-container">
<button id="auto-config" class="auto-button ripple-element" data-i18n="security_patch.auto"></button> <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> <button id="save-patch" class="save-button ripple-element" data-i18n="security_patch.save"></button>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -1,7 +1,6 @@
import { basePath, execCommand, showPrompt } from './main.js'; import { basePath, execCommand, showPrompt } from './main.js';
const overlay = document.getElementById('security-patch-overlay'); const overlay = document.getElementById('security-patch-overlay');
const card = document.getElementById('security-patch-card');
const advancedToggle = document.getElementById('advanced-mode'); const advancedToggle = document.getElementById('advanced-mode');
const normalInputs = document.getElementById('normal-mode-inputs'); const normalInputs = document.getElementById('normal-mode-inputs');
const advancedInputs = document.getElementById('advanced-mode-inputs'); const advancedInputs = document.getElementById('advanced-mode-inputs');
@@ -16,11 +15,9 @@ const saveButton = document.getElementById('save-patch');
// Show security patch dialog // Show security patch dialog
function showSecurityPatchDialog() { function showSecurityPatchDialog() {
document.body.classList.add("no-scroll"); document.body.classList.add("no-scroll");
overlay.style.display = 'block'; overlay.style.display = 'flex';
card.style.display = 'block';
setTimeout(() => { setTimeout(() => {
overlay.style.opacity = '1'; overlay.style.opacity = '1';
card.style.opacity = '1';
loadCurrentConfig(); loadCurrentConfig();
}, 10); }, 10);
} }
@@ -29,10 +26,8 @@ function showSecurityPatchDialog() {
function hideSecurityPatchDialog() { function hideSecurityPatchDialog() {
document.body.classList.remove("no-scroll"); document.body.classList.remove("no-scroll");
overlay.style.opacity = '0'; overlay.style.opacity = '0';
card.style.opacity = '0';
setTimeout(() => { setTimeout(() => {
overlay.style.display = 'none'; overlay.style.display = 'none';
card.style.display = 'none';
}, 200); }, 200);
} }

View File

@@ -1,6 +1,7 @@
.security-patch-overlay { .security-patch-overlay {
display: none; display: none;
position: fixed; position: fixed;
justify-content: center;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@@ -12,11 +13,9 @@
} }
.security-patch-card { .security-patch-card {
display: none; display: block;
position: fixed; position: fixed;
top: 10%; top: 10%;
left: 50%;
transform: translateX(-50%);
background-color: white; background-color: white;
padding: 30px; padding: 30px;
border-radius: 15px; border-radius: 15px;
@@ -26,8 +25,6 @@
max-width: 300px; max-width: 300px;
max-height: calc(80% - 60px); max-height: calc(80% - 60px);
overflow-y: auto; overflow-y: auto;
transition: opacity 0.2s ease;
opacity: 0;
} }
.security-patch-content { .security-patch-content {

View File

@@ -2,7 +2,6 @@
display: none; display: none;
position: fixed; position: fixed;
justify-content: center; justify-content: center;
align-items: flex-start;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
@@ -16,12 +15,13 @@
.add-system-app-card { .add-system-app-card {
position: fixed; position: fixed;
display: flex; display: flex;
margin-top: 15%; top: 10%;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
width: calc(90vw - 60px); width: calc(90vw - 60px);
max-width: 400px; max-width: 400px;
max-height: calc(80vh - 60px);
overflow-y: scroll;
padding: 30px; padding: 30px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
@@ -29,9 +29,9 @@
} }
.add-system-app-title { .add-system-app-title {
font-size: 24px; font-size: 26px;
font-weight: 600; user-select: none;
margin-bottom: 16px; margin-bottom: 20px;
} }
.add-system-app-content { .add-system-app-content {
@@ -77,8 +77,6 @@
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 100%; width: 100%;
max-height: 40vh;
overflow-y: scroll;
} }
.system-app-item { .system-app-item {