diff --git a/serverStatus/templates/serverStatus/litespeedStatus.html b/serverStatus/templates/serverStatus/litespeedStatus.html index 29a0be212..d95f80f67 100644 --- a/serverStatus/templates/serverStatus/litespeedStatus.html +++ b/serverStatus/templates/serverStatus/litespeedStatus.html @@ -68,6 +68,59 @@ --console-bg: #1e293b; --console-text: #10b981; } + + [data-theme="dark"] { + /* Dark mode overrides */ + --ls-gradient-start: #7c7ff3; + --ls-gradient-end: #9b5de5; + + --text-primary: #e4e4e7; + --text-secondary: #9ca3af; + --text-muted: #6b7280; + --text-on-gradient: rgba(255, 255, 255, 0.9); + + --bg-primary: #1a1a3e; + --bg-secondary: #1e1e42; + --bg-light: #252550; + --bg-hover: #252550; + --bg-gradient: linear-gradient(135deg, var(--ls-gradient-start) 0%, var(--ls-gradient-end) 100%); + + --border-color: #2a2a5e; + --border-light: #374151; + + --accent-color: #7c7ff3; + --accent-hover: #9b5de5; + --accent-bg: #3730a3; + --accent-focus: rgba(124, 127, 243, 0.1); + --accent-shadow: rgba(124, 127, 243, 0.3); + + --success-bg: #064e3b; + --success-color: #34d399; + --success-border: #065f46; + --success-accent: #10b981; + --success-dark: #34d399; + + --danger-bg: #7f1d1d; + --danger-color: #fca5a5; + --danger-border: #991b1b; + --danger-accent: #ef4444; + --danger-hover: #dc2626; + + --warning-bg: #78350f; + --warning-color: #fbbf24; + --warning-border: #92400e; + + --info-bg: #1e3a8a; + --info-color: #93c5fd; + --info-border: #1e40af; + + --shadow-light: rgba(0,0,0,0.3); + --shadow-medium: rgba(0,0,0,0.4); + --shadow-color: rgba(0,0,0,0.5); + + --console-bg: #0f0f23; + --console-text: #4ade80; + } .modern-container { max-width: 1200px; margin: 0 auto; @@ -275,7 +328,7 @@ } .btn-primary { - background: #667eea; + background: var(--accent-color); color: white; } @@ -336,7 +389,7 @@ } .module-item:hover { - background: #667eea; + background: var(--accent-color); color: white; border-color: var(--accent-color); } @@ -367,7 +420,6 @@ .alert-message { font-size: 0.875rem; - color: var(--text-secondary); } .alert-success { @@ -463,6 +515,7 @@ font-size: 0.875rem; transition: all 0.3s ease; background: var(--bg-primary); + color: var(--text-primary); } .form-control:focus { @@ -474,7 +527,7 @@ .loading-spinner { width: 20px; height: 20px; - border: 2px solid #f3f3f3; + border: 2px solid var(--border-color); border-top: 2px solid var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; @@ -805,7 +858,7 @@ {% trans "Switch to Enterprise" %} - diff --git a/serverStatus/templates/serverStatus/topProcesses.html b/serverStatus/templates/serverStatus/topProcesses.html index d10890e67..f0fe81585 100644 --- a/serverStatus/templates/serverStatus/topProcesses.html +++ b/serverStatus/templates/serverStatus/topProcesses.html @@ -63,6 +63,63 @@ /* Console colors */ --console-bg: #1e293b; --console-text: #10b981; + + /* Table specific */ + --table-header-bg: #f8f9ff; + --command-bg: #f3f4f6; + } + + [data-theme="dark"] { + /* Dark mode overrides */ + --text-primary: #e4e4e7; + --text-secondary: #9ca3af; + --text-muted: #6b7280; + --text-on-gradient: rgba(255, 255, 255, 0.9); + + --bg-primary: #1a1a3e; + --bg-secondary: #1e1e42; + --bg-light: #252550; + --bg-hover: #252550; + --bg-gradient: linear-gradient(135deg, #7c7ff3 0%, #9b5de5 100%); + + --border-color: #2a2a5e; + --border-light: #374151; + + --accent-color: #7c7ff3; + --accent-hover: #9b5de5; + --accent-bg: #3730a3; + --accent-focus: rgba(124, 127, 243, 0.1); + --accent-shadow: rgba(124, 127, 243, 0.3); + + --success-bg: #064e3b; + --success-color: #34d399; + --success-border: #065f46; + --success-accent: #10b981; + --success-dark: #34d399; + + --danger-bg: #7f1d1d; + --danger-color: #fca5a5; + --danger-border: #991b1b; + --danger-accent: #ef4444; + --danger-hover: #dc2626; + + --warning-bg: #78350f; + --warning-color: #fbbf24; + --warning-border: #92400e; + + --info-bg: #1e3a8a; + --info-color: #93c5fd; + --info-border: #1e40af; + + --shadow-light: rgba(0,0,0,0.3); + --shadow-medium: rgba(0,0,0,0.4); + --shadow-color: rgba(0,0,0,0.5); + + --console-bg: #0f0f23; + --console-text: #4ade80; + + --table-header-bg: #252550; + --command-bg: #16162e; } .modern-container { max-width: 1400px; @@ -228,7 +285,7 @@ .stat-label { font-size: 0.75rem; - color: #94a3b8; + color: var(--text-muted); } .processes-panel { @@ -306,7 +363,7 @@ .modern-table thead { position: sticky; top: 0; - background: var(--bg-hover); + background: var(--table-header-bg); z-index: 10; } @@ -407,7 +464,7 @@ .command-text { font-family: 'Monaco', 'Consolas', monospace; font-size: 0.75rem; - background: #f3f4f6; + background: var(--command-bg); padding: 0.25rem 0.5rem; border-radius: 4px; max-width: 300px; @@ -443,7 +500,8 @@ left: 0; right: 0; bottom: 0; - background: rgba(255, 255, 255, 0.9); + background: var(--bg-primary); + opacity: 0.9; display: flex; align-items: center; justify-content: center; @@ -453,7 +511,7 @@ .loading-spinner { width: 40px; height: 40px; - border: 3px solid #f3f3f3; + border: 3px solid var(--border-color); border-top: 3px solid var(--accent-color); border-radius: 50%; animation: spin 1s linear infinite; @@ -463,7 +521,7 @@ display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; - background: #f3f4f6; + background: var(--bg-light); border-radius: 4px; font-size: 0.75rem; gap: 0.25rem;