gandalf/secubox-openwrt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(luci-app-secubox-admin): Convert admin CSS to KissTheme dark mode

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
CyberMind-FR 2026-03-13 07:33:56 +01:00
parent a8f6408e58
commit 019e181890
2 changed files with 56 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/admin.css
View File

@ -1,31 +1,31 @@
/* SecuBox Admin - Enhanced SecuBox Theme */ /* SecuBox Admin - Enhanced SecuBox Theme */
:root { :root {
/* SecuBox Brand Colors */ /* SecuBox Brand Colors - Use KissTheme variables */
--sb-primary: #6366f1; --sb-primary: var(--kiss-purple, #6366f1);
--sb-primary-light: #818cf8; --sb-primary-light: #818cf8;
--sb-primary-dark: #4f46e5; --sb-primary-dark: #4f46e5;
--sb-secondary: #8b5cf6; --sb-secondary: #8b5cf6;
--sb-secondary-light: #a78bfa; --sb-secondary-light: #a78bfa;
--sb-accent: #3b82f6; --sb-accent: #3b82f6;
--sb-accent-cyan: #06b6d4; --sb-accent-cyan: var(--kiss-cyan, #06b6d4);
--sb-success: #10b981; --sb-success: var(--kiss-green, #10b981);
--sb-warning: #f59e0b; --sb-warning: #f59e0b;
--sb-danger: #ef4444; --sb-danger: var(--kiss-red, #ef4444);
/* Backgrounds */ /* Backgrounds - Dark theme using KissTheme */
--sb-bg: #f9fafb; --sb-bg: var(--kiss-bg, #0f0f23);
--sb-bg-secondary: #ffffff; --sb-bg-secondary: var(--kiss-bg, #0f0f23);
--sb-bg-tertiary: #f3f4f6; --sb-bg-tertiary: color-mix(in srgb, var(--kiss-bg, #0f0f23) 90%, white 10%);
/* Text */ /* Text - Light on dark using KissTheme */
--sb-text: #1f2937; --sb-text: var(--kiss-text, #e5e7eb);
--sb-text-secondary: #6b7280; --sb-text-secondary: var(--kiss-muted, #9ca3af);
--sb-text-dim: #9ca3af; --sb-text-dim: var(--kiss-muted, #9ca3af);
/* Borders */ /* Borders - Using KissTheme line color */
--sb-border: #e5e7eb; --sb-border: var(--kiss-line, rgba(99, 102, 241, 0.2));
--sb-border-light: #f3f4f6; --sb-border-light: var(--kiss-line, rgba(99, 102, 241, 0.15));
/* Gradients */ /* Gradients */
--sb-gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6); --sb-gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);

78
package/secubox/luci-app-secubox-admin/htdocs/luci-static/resources/secubox-admin/common.css
View File

@ -4,8 +4,8 @@
.stat-card { .stat-card {
padding: 1.75rem; padding: 1.75rem;
border-radius: 12px; border-radius: 12px;
background: #fff; background: var(--kiss-bg, #0f0f23);
border: 1px solid rgba(99, 102, 241, 0.15); border: 1px solid var(--kiss-line, rgba(99, 102, 241, 0.2));
text-align: center; text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative; position: relative;
@ -61,7 +61,7 @@
.stat-label { .stat-label {
font-size: 0.875rem; font-size: 0.875rem;
color: #6b7280; color: var(--kiss-muted, #9ca3af);
margin-top: 0.75rem; margin-top: 0.75rem;
display: block; display: block;
font-weight: 600; font-weight: 600;
@ -82,33 +82,33 @@
} }
.badge-primary { .badge-primary {
background: rgba(99, 102, 241, 0.1); background: color-mix(in srgb, var(--kiss-purple, #6366f1) 15%, transparent);
color: #6366f1; color: var(--kiss-purple, #6366f1);
border: 1px solid rgba(99, 102, 241, 0.3); border: 1px solid color-mix(in srgb, var(--kiss-purple, #6366f1) 30%, transparent);
} }
.badge-success { .badge-success {
background: rgba(16, 185, 129, 0.1); background: color-mix(in srgb, var(--kiss-green, #10b981) 15%, transparent);
color: #10b981; color: var(--kiss-green, #10b981);
border: 1px solid rgba(16, 185, 129, 0.3); border: 1px solid color-mix(in srgb, var(--kiss-green, #10b981) 30%, transparent);
} }
.badge-warning { .badge-warning {
background: rgba(245, 158, 11, 0.1); background: rgba(245, 158, 11, 0.15);
color: #f59e0b; color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.3); border: 1px solid rgba(245, 158, 11, 0.3);
} }
.badge-danger { .badge-danger {
background: rgba(239, 68, 68, 0.1); background: color-mix(in srgb, var(--kiss-red, #ef4444) 15%, transparent);
color: #ef4444; color: var(--kiss-red, #ef4444);
border: 1px solid rgba(239, 68, 68, 0.3); border: 1px solid color-mix(in srgb, var(--kiss-red, #ef4444) 30%, transparent);
} }
.badge-secondary { .badge-secondary {
background: rgba(107, 114, 128, 0.1); background: color-mix(in srgb, var(--kiss-muted, #9ca3af) 15%, transparent);
color: #6b7280; color: var(--kiss-muted, #9ca3af);
border: 1px solid rgba(107, 114, 128, 0.3); border: 1px solid color-mix(in srgb, var(--kiss-muted, #9ca3af) 30%, transparent);
} }
/* Progress Bars */ /* Progress Bars */
@ -163,8 +163,8 @@
/* Cards */ /* Cards */
.card { .card {
background: #fff; background: var(--kiss-bg, #0f0f23);
border: 1px solid rgba(99, 102, 241, 0.15); border: 1px solid var(--kiss-line, rgba(99, 102, 241, 0.2));
border-radius: 12px; border-radius: 12px;
padding: 1.75rem; padding: 1.75rem;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
@ -180,7 +180,7 @@
margin-top: 0; margin-top: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1.25rem; font-size: 1.25rem;
color: #1f2937; color: var(--kiss-text, #e5e7eb);
font-weight: 700; font-weight: 700;
} }
@ -272,9 +272,10 @@
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
border: 1px solid transparent; border: 1px solid var(--kiss-line, rgba(99, 102, 241, 0.2));
border-radius: 8px; border-radius: 8px;
background: #fff; background: var(--kiss-bg, #0f0f23);
color: var(--kiss-text, #e5e7eb);
cursor: pointer; cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-transform: uppercase; text-transform: uppercase;
@ -297,9 +298,9 @@
} }
.btn-secondary { .btn-secondary {
background: rgba(99, 102, 241, 0.1); background: color-mix(in srgb, var(--kiss-purple, #6366f1) 10%, transparent);
border-color: rgba(99, 102, 241, 0.3); border-color: color-mix(in srgb, var(--kiss-purple, #6366f1) 30%, transparent);
color: #6366f1; color: var(--kiss-purple, #6366f1);
} }
.btn-secondary:hover { .btn-secondary:hover {
@ -352,15 +353,15 @@
/* Utility Classes */ /* Utility Classes */
.text-muted { .text-muted {
color: #9ca3af; color: var(--kiss-muted, #9ca3af);
} }
.text-primary { .text-primary {
color: #6366f1; color: var(--kiss-purple, #6366f1);
} }
.text-success { .text-success {
color: #10b981; color: var(--kiss-green, #10b981);
} }
.text-warning { .text-warning {
@ -368,7 +369,7 @@
} }
.text-danger { .text-danger {
color: #ef4444; color: var(--kiss-red, #ef4444);
} }
.right { .right {
@ -380,7 +381,7 @@
} }
.view-all-link { .view-all-link {
color: #6366f1; color: var(--kiss-purple, #6366f1);
text-decoration: none; text-decoration: none;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
@ -388,7 +389,7 @@
} }
.view-all-link:hover { .view-all-link:hover {
color: #8b5cf6; color: var(--kiss-cyan, #06b6d4);
text-decoration: underline; text-decoration: underline;
} }
@ -396,7 +397,7 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 3rem; padding: 3rem;
color: #9ca3af; color: var(--kiss-muted, #9ca3af);
} }
.empty-state-icon { .empty-state-icon {
@ -408,36 +409,37 @@
.empty-state-title { .empty-state-title {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: #6b7280; color: var(--kiss-muted, #9ca3af);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.empty-state-text { .empty-state-text {
font-size: 0.875rem; font-size: 0.875rem;
color: #9ca3af; color: var(--kiss-muted, #9ca3af);
} }
/* Tables */ /* Tables */
.table { .table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
background: #fff; background: var(--kiss-bg, #0f0f23);
border-radius: 12px; border-radius: 12px;
overflow: hidden; 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 th,
.table td { .table td {
padding: 1rem; padding: 1rem;
text-align: left; 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 { .table th {
background: rgba(99, 102, 241, 0.08); background: color-mix(in srgb, var(--kiss-purple, #6366f1) 10%, transparent);
font-weight: 600; font-weight: 600;
color: #1f2937; color: var(--kiss-text, #e5e7eb);
text-transform: uppercase; text-transform: uppercase;
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 0.5px; letter-spacing: 0.5px;