diff --git a/module/webui/scripts/security_patch.js b/module/webui/scripts/security_patch.js index 535262b..6d6921f 100644 --- a/module/webui/scripts/security_patch.js +++ b/module/webui/scripts/security_patch.js @@ -12,7 +12,9 @@ const vendorPatchInput = document.getElementById('vendor-patch'); const autoButton = document.getElementById('auto-config'); const saveButton = document.getElementById('save-patch'); -export function showSecurityPatchDialog() { +// Show security patch dialog +function showSecurityPatchDialog() { + document.body.classList.add("no-scroll"); overlay.style.display = 'block'; card.style.display = 'block'; setTimeout(() => { @@ -24,6 +26,7 @@ export function showSecurityPatchDialog() { // Hide security patch dialog function hideSecurityPatchDialog() { + document.body.classList.remove("no-scroll"); overlay.style.opacity = '0'; card.style.opacity = '0'; setTimeout(() => { diff --git a/module/webui/styles/security-patch.css b/module/webui/styles/security-patch.css index 806a7d9..fcdb55d 100644 --- a/module/webui/styles/security-patch.css +++ b/module/webui/styles/security-patch.css @@ -14,16 +14,18 @@ .security-patch-card { display: none; position: fixed; - top: 50%; + top: 10%; left: 50%; - transform: translate(-50%, -50%); + transform: translateX(-50%); background-color: white; - padding: 20px; + padding: 30px; border-radius: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 2001; - width: calc(90% - 40px); - max-width: 400px; + width: calc(90% - 60px); + max-width: 300px; + max-height: 90%; + overflow-y: auto; transition: opacity 0.2s ease; opacity: 0; } @@ -61,14 +63,14 @@ } .button-container { - display: flex; + width: 100%; gap: 10px; - justify-content: flex-end; margin-top: 10px; } .auto-button, .save-button { - padding: 10px 20px; + width: 100%; + padding: 10px; border: none; border-radius: 12px; font-size: 18px; @@ -78,8 +80,7 @@ } .auto-button { - background-color: #6E6E6E; - color: white; + background-color: #ddd; } .save-button { @@ -110,4 +111,9 @@ color: #fff; border: 1px solid #6E6E6E; } + + .auto-button { + background-color: #6E6E6E; + color: white; + } }