add animation

This commit is contained in:
KOWX712
2025-02-11 16:59:06 +08:00
parent 83469179e6
commit 1a50c322d9
3 changed files with 18 additions and 5 deletions

View File

@@ -13,15 +13,24 @@ const autoButton = document.getElementById('auto-config');
const saveButton = document.getElementById('save-patch'); const saveButton = document.getElementById('save-patch');
export function showSecurityPatchDialog() { export function showSecurityPatchDialog() {
overlay.style.display = 'block'; overlay.style.display = 'block';
card.style.display = 'block'; card.style.display = 'block';
loadCurrentConfig(); setTimeout(() => {
overlay.style.opacity = '1';
card.style.opacity = '1';
loadCurrentConfig();
}, 10);
} }
// Hide security patch dialog // Hide security patch dialog
function hideSecurityPatchDialog() { function hideSecurityPatchDialog() {
overlay.style.display = 'none'; overlay.style.opacity = '0';
card.style.display = 'none'; card.style.opacity = '0';
setTimeout(() => {
overlay.style.display = 'none';
card.style.display = 'none';
}, 200);
} }
// Load current configuration // Load current configuration

View File

@@ -47,7 +47,7 @@ body {
color: white; color: white;
font-size: 15px; font-size: 15px;
padding: 5px 10px; padding: 5px 10px;
z-index: 2000; z-index: 2050;
width: auto; width: auto;
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
transform: translateY(100%); transform: translateY(100%);

View File

@@ -7,6 +7,8 @@
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 2000; z-index: 2000;
transition: opacity 0.2s ease;
opacity: 0;
} }
.security-patch-card { .security-patch-card {
@@ -22,6 +24,8 @@
z-index: 2001; z-index: 2001;
width: calc(90% - 40px); width: calc(90% - 40px);
max-width: 400px; max-width: 400px;
transition: opacity 0.2s ease;
opacity: 0;
} }
.security-patch-content { .security-patch-content {
@@ -102,7 +106,7 @@
} }
.input-group input { .input-group input {
background-color: #343434; background-color: #232323;
color: #fff; color: #fff;
border: 1px solid #6E6E6E; border: 1px solid #6E6E6E;
} }