CyberMind-FR
31be5e0797
Add theme manager with selectable themes and profiles: - classic: Professional SOC-style dark theme (default) - cards: Modern card-based UI with gradients - cyberpunk: Neon glow effects with terminal aesthetics Profiles extend themes with custom options: - default, soc, modern, hacker Theme selection available in Settings > Appearance with live preview. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
121 lines
3.0 KiB
CSS
121 lines
3.0 KiB
CSS
/* CrowdSec Dashboard - Base Theme Variables */
|
|
/* Shared foundation for all themes */
|
|
|
|
:root {
|
|
/* Base colors - can be overridden by theme */
|
|
--cs-bg-primary: #0d1117;
|
|
--cs-bg-secondary: #161b22;
|
|
--cs-bg-tertiary: #21262d;
|
|
--cs-border: #30363d;
|
|
--cs-text: #c9d1d9;
|
|
--cs-text-muted: #8b949e;
|
|
--cs-text-heading: #ffffff;
|
|
|
|
/* Accent colors */
|
|
--cs-accent: #58a6ff;
|
|
--cs-success: #3fb950;
|
|
--cs-warning: #d29922;
|
|
--cs-danger: #f85149;
|
|
--cs-info: #79c0ff;
|
|
|
|
/* Spacing */
|
|
--cs-space-xs: 4px;
|
|
--cs-space-sm: 8px;
|
|
--cs-space-md: 16px;
|
|
--cs-space-lg: 24px;
|
|
--cs-space-xl: 32px;
|
|
|
|
/* Border radius */
|
|
--cs-radius-sm: 4px;
|
|
--cs-radius-md: 6px;
|
|
--cs-radius-lg: 8px;
|
|
--cs-radius-xl: 12px;
|
|
|
|
/* Typography */
|
|
--cs-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--cs-font-mono: 'JetBrains Mono', Consolas, monospace;
|
|
--cs-font-size-xs: 10px;
|
|
--cs-font-size-sm: 12px;
|
|
--cs-font-size-md: 14px;
|
|
--cs-font-size-lg: 16px;
|
|
--cs-font-size-xl: 20px;
|
|
--cs-font-size-2xl: 28px;
|
|
|
|
/* Shadows */
|
|
--cs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--cs-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
--cs-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
|
|
|
|
/* Transitions */
|
|
--cs-transition-fast: 0.15s ease;
|
|
--cs-transition-normal: 0.25s ease;
|
|
}
|
|
|
|
/* Base resets */
|
|
.cs-dashboard {
|
|
min-height: 100vh;
|
|
font-family: var(--cs-font-sans);
|
|
color: var(--cs-text);
|
|
background: var(--cs-bg-primary);
|
|
}
|
|
|
|
.cs-dashboard * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Hide LuCI sidebar for full-width view */
|
|
body.cs-fullwidth #maincontainer > .pull-left,
|
|
body.cs-fullwidth #mainmenu { display: none !important; }
|
|
body.cs-fullwidth #maincontent { margin: 0 !important; width: 100% !important; }
|
|
|
|
/* Common utility classes */
|
|
.cs-text-muted { color: var(--cs-text-muted); }
|
|
.cs-text-success { color: var(--cs-success); }
|
|
.cs-text-warning { color: var(--cs-warning); }
|
|
.cs-text-danger { color: var(--cs-danger); }
|
|
.cs-text-accent { color: var(--cs-accent); }
|
|
|
|
.cs-mono { font-family: var(--cs-font-mono); }
|
|
.cs-uppercase { text-transform: uppercase; letter-spacing: 0.5px; }
|
|
|
|
/* Loading spinner */
|
|
.cs-spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--cs-border);
|
|
border-top-color: var(--cs-accent);
|
|
border-radius: 50%;
|
|
animation: cs-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes cs-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* Pulse animation */
|
|
@keyframes cs-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* Toast notifications */
|
|
.cs-toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: var(--cs-bg-secondary);
|
|
border: 1px solid var(--cs-border);
|
|
padding: 12px 20px;
|
|
border-radius: var(--cs-radius-md);
|
|
font-size: var(--cs-font-size-sm);
|
|
z-index: 9999;
|
|
animation: cs-slideIn 0.3s ease;
|
|
}
|
|
|
|
.cs-toast.success { border-left: 3px solid var(--cs-success); }
|
|
.cs-toast.error { border-left: 3px solid var(--cs-danger); }
|
|
.cs-toast.warning { border-left: 3px solid var(--cs-warning); }
|
|
|
|
@keyframes cs-slideIn {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|