add animation

module/webui/scripts/security_patch.js

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

module/webui/styles/global.css

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

module/webui/styles/security-patch.css

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