From 019e181890735275725779d0ecae76900e70c8ba Mon Sep 17 00:00:00 2001 From: CyberMind-FR Date: Fri, 13 Mar 2026 07:33:56 +0100 Subject: [PATCH] refactor(luci-app-secubox-admin): Convert admin CSS to KissTheme dark mode - Replace hardcoded #fff backgrounds with var(--kiss-bg) dark theme - Convert all text colors to var(--kiss-text) and var(--kiss-muted) - Update borders to var(--kiss-line) for consistent styling - Use color-mix() for transparent accent backgrounds - Map --sb-* variables to --kiss-* for unified theming Fixes white background issue on admin dashboard. Co-Authored-By: Claude Opus 4.5 --- .../resources/secubox-admin/admin.css | 32 ++++---- .../resources/secubox-admin/common.css | 78 ++++++++++--------- 2 files changed, 56 insertions(+), 54 deletions(-) diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/admin.css b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/admin.css index ae65ce51..30bb5eee 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/admin.css +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/admin.css @@ -1,31 +1,31 @@ /* SecuBox Admin - Enhanced SecuBox Theme */ :root { - /* SecuBox Brand Colors */ - --sb-primary: #6366f1; + /* SecuBox Brand Colors - Use KissTheme variables */ + --sb-primary: var(--kiss-purple, #6366f1); --sb-primary-light: #818cf8; --sb-primary-dark: #4f46e5; --sb-secondary: #8b5cf6; --sb-secondary-light: #a78bfa; --sb-accent: #3b82f6; - --sb-accent-cyan: #06b6d4; - --sb-success: #10b981; + --sb-accent-cyan: var(--kiss-cyan, #06b6d4); + --sb-success: var(--kiss-green, #10b981); --sb-warning: #f59e0b; - --sb-danger: #ef4444; + --sb-danger: var(--kiss-red, #ef4444); - /* Backgrounds */ - --sb-bg: #f9fafb; - --sb-bg-secondary: #ffffff; - --sb-bg-tertiary: #f3f4f6; + /* Backgrounds - Dark theme using KissTheme */ + --sb-bg: var(--kiss-bg, #0f0f23); + --sb-bg-secondary: var(--kiss-bg, #0f0f23); + --sb-bg-tertiary: color-mix(in srgb, var(--kiss-bg, #0f0f23) 90%, white 10%); - /* Text */ - --sb-text: #1f2937; - --sb-text-secondary: #6b7280; - --sb-text-dim: #9ca3af; + /* Text - Light on dark using KissTheme */ + --sb-text: var(--kiss-text, #e5e7eb); + --sb-text-secondary: var(--kiss-muted, #9ca3af); + --sb-text-dim: var(--kiss-muted, #9ca3af); - /* Borders */ - --sb-border: #e5e7eb; - --sb-border-light: #f3f4f6; + /* Borders - Using KissTheme line color */ + --sb-border: var(--kiss-line, rgba(99, 102, 241, 0.2)); + --sb-border-light: var(--kiss-line, rgba(99, 102, 241, 0.15)); /* Gradients */ --sb-gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6); diff --git a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/common.css b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/common.css index 485446c6..648a1354 100644 --- a/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/common.css +++ b/package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/common.css @@ -4,8 +4,8 @@ .stat-card { padding: 1.75rem; border-radius: 12px; - background: #fff; - border: 1px solid rgba(99, 102, 241, 0.15); + background: var(--kiss-bg, #0f0f23); + border: 1px solid var(--kiss-line, rgba(99, 102, 241, 0.2)); text-align: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; @@ -61,7 +61,7 @@ .stat-label { font-size: 0.875rem; - color: #6b7280; + color: var(--kiss-muted, #9ca3af); margin-top: 0.75rem; display: block; font-weight: 600; @@ -82,33 +82,33 @@ } .badge-primary { - background: rgba(99, 102, 241, 0.1); - color: #6366f1; - border: 1px solid rgba(99, 102, 241, 0.3); + background: color-mix(in srgb, var(--kiss-purple, #6366f1) 15%, transparent); + color: var(--kiss-purple, #6366f1); + border: 1px solid color-mix(in srgb, var(--kiss-purple, #6366f1) 30%, transparent); } .badge-success { - background: rgba(16, 185, 129, 0.1); - color: #10b981; - border: 1px solid rgba(16, 185, 129, 0.3); + background: color-mix(in srgb, var(--kiss-green, #10b981) 15%, transparent); + color: var(--kiss-green, #10b981); + border: 1px solid color-mix(in srgb, var(--kiss-green, #10b981) 30%, transparent); } .badge-warning { - background: rgba(245, 158, 11, 0.1); + background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .badge-danger { - background: rgba(239, 68, 68, 0.1); - color: #ef4444; - border: 1px solid rgba(239, 68, 68, 0.3); + background: color-mix(in srgb, var(--kiss-red, #ef4444) 15%, transparent); + color: var(--kiss-red, #ef4444); + border: 1px solid color-mix(in srgb, var(--kiss-red, #ef4444) 30%, transparent); } .badge-secondary { - background: rgba(107, 114, 128, 0.1); - color: #6b7280; - border: 1px solid rgba(107, 114, 128, 0.3); + background: color-mix(in srgb, var(--kiss-muted, #9ca3af) 15%, transparent); + color: var(--kiss-muted, #9ca3af); + border: 1px solid color-mix(in srgb, var(--kiss-muted, #9ca3af) 30%, transparent); } /* Progress Bars */ @@ -163,8 +163,8 @@ /* Cards */ .card { - background: #fff; - border: 1px solid rgba(99, 102, 241, 0.15); + background: var(--kiss-bg, #0f0f23); + border: 1px solid var(--kiss-line, rgba(99, 102, 241, 0.2)); border-radius: 12px; padding: 1.75rem; margin-bottom: 1.25rem; @@ -180,7 +180,7 @@ margin-top: 0; margin-bottom: 1rem; font-size: 1.25rem; - color: #1f2937; + color: var(--kiss-text, #e5e7eb); font-weight: 700; } @@ -272,9 +272,10 @@ padding: 0.75rem 1.5rem; font-size: 0.875rem; font-weight: 600; - border: 1px solid transparent; + border: 1px solid var(--kiss-line, rgba(99, 102, 241, 0.2)); border-radius: 8px; - background: #fff; + background: var(--kiss-bg, #0f0f23); + color: var(--kiss-text, #e5e7eb); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; @@ -297,9 +298,9 @@ } .btn-secondary { - background: rgba(99, 102, 241, 0.1); - border-color: rgba(99, 102, 241, 0.3); - color: #6366f1; + background: color-mix(in srgb, var(--kiss-purple, #6366f1) 10%, transparent); + border-color: color-mix(in srgb, var(--kiss-purple, #6366f1) 30%, transparent); + color: var(--kiss-purple, #6366f1); } .btn-secondary:hover { @@ -352,15 +353,15 @@ /* Utility Classes */ .text-muted { - color: #9ca3af; + color: var(--kiss-muted, #9ca3af); } .text-primary { - color: #6366f1; + color: var(--kiss-purple, #6366f1); } .text-success { - color: #10b981; + color: var(--kiss-green, #10b981); } .text-warning { @@ -368,7 +369,7 @@ } .text-danger { - color: #ef4444; + color: var(--kiss-red, #ef4444); } .right { @@ -380,7 +381,7 @@ } .view-all-link { - color: #6366f1; + color: var(--kiss-purple, #6366f1); text-decoration: none; font-size: 0.875rem; font-weight: 600; @@ -388,7 +389,7 @@ } .view-all-link:hover { - color: #8b5cf6; + color: var(--kiss-cyan, #06b6d4); text-decoration: underline; } @@ -396,7 +397,7 @@ .empty-state { text-align: center; padding: 3rem; - color: #9ca3af; + color: var(--kiss-muted, #9ca3af); } .empty-state-icon { @@ -408,36 +409,37 @@ .empty-state-title { font-size: 1.25rem; font-weight: 600; - color: #6b7280; + color: var(--kiss-muted, #9ca3af); margin-bottom: 0.5rem; } .empty-state-text { font-size: 0.875rem; - color: #9ca3af; + color: var(--kiss-muted, #9ca3af); } /* Tables */ .table { width: 100%; border-collapse: collapse; - background: #fff; + background: var(--kiss-bg, #0f0f23); border-radius: 12px; overflow: hidden; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .table th, .table td { padding: 1rem; text-align: left; - border-bottom: 1px solid #e5e7eb; + border-bottom: 1px solid var(--kiss-line, rgba(99, 102, 241, 0.2)); + color: var(--kiss-text, #e5e7eb); } .table th { - background: rgba(99, 102, 241, 0.08); + background: color-mix(in srgb, var(--kiss-purple, #6366f1) 10%, transparent); font-weight: 600; - color: #1f2937; + color: var(--kiss-text, #e5e7eb); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px;