/* ============================================================================ TrackNautic Admin — Design Tokens (Theme) ============================================================================ SINGLE SOURCE OF TRUTH for all admin panel design tokens. Every component, every page, and every module MUST reference these tokens. DO NOT hardcode color values outside of this file. Loaded BEFORE admin.css in the base layout. THEMES ------ - Default (:root) → Dark theme. - [data-theme="high-contrast"] → Day / High Contrast theme (light), mirroring the mobile app "dayHighContrast" GPS theme. The active theme is set as data-theme on and persisted in localStorage under "admin-theme" (see admin/layout/base.html.twig). ============================================================================ */ :root { color-scheme: dark; /* ========================================================================== COLOR PALETTE ========================================================================== */ /* Primary */ --color-primary: #0070cc; --color-primary-hover: #005fa3; --color-primary-active: #004d85; --color-primary-light: rgba(0, 112, 204, 0.15); --color-primary-subtle: rgba(0, 112, 204, 0.05); --color-primary-rgb: 0, 112, 204; --color-primary-text: #60a5fa; --color-primary-text-hover: #93bbfd; /* Secondary (Accent) */ --color-secondary: #00d9a0; --color-secondary-hover: #00c28e; --color-secondary-light: rgba(0, 217, 160, 0.15); --color-secondary-rgb: 0, 217, 160; --color-secondary-text: #34d399; /* Tertiary (Danger/Alert) */ --color-tertiary: #e63946; --color-tertiary-hover: #d32f3c; --color-tertiary-light: rgba(230, 57, 70, 0.15); --color-tertiary-rgb: 230, 57, 70; /* ========================================================================== SEMANTIC / STATUS COLORS ========================================================================== */ --color-success: #22c55e; --color-success-light: rgba(34, 197, 94, 0.15); --color-success-text: #4ade80; --color-success-dark: #16a34a; --color-warning: #f59e0b; --color-warning-light: rgba(245, 158, 11, 0.15); --color-warning-text: #fbbf24; --color-warning-dark: #d97706; --color-danger: #ef4444; --color-danger-light: rgba(239, 68, 68, 0.10); --color-danger-dark: #dc2626; --color-danger-text: #f87171; --color-danger-text-soft: #fca5a5; --color-info: #06b6d4; --color-info-light: rgba(6, 182, 212, 0.15); --color-info-text: #22d3ee; --color-info-dark: #0891b2; --color-purple: #8b5cf6; --color-purple-light: rgba(139, 92, 246, 0.15); --color-purple-text: #a78bfa; --color-purple-text-hover: #c4b5fd; /* ========================================================================== BACKGROUNDS ========================================================================== */ --color-dark-bg: #0f172a; --color-bg: #0f172a; --color-bg-light: #1a2235; --color-surface: #1a2235; --color-surface-elevated: #263347; --color-card-bg: #1e293b; --color-card: #1e293b; --color-card-hover: #253347; --color-map-bg: #0d1117; --color-tooltip-bg: #0f172a; --color-tooltip-text: #ffffff; --color-switch-track: #334155; --color-card-translucent: rgba(30, 41, 59, 0.5); --color-card-translucent-hover: rgba(30, 41, 59, 0.8); --color-glass-bg: rgba(30, 41, 59, 0.6); --color-thead-bg: rgba(15, 23, 42, 0.4); --color-loading-overlay: rgba(15, 23, 42, 0.6); --color-hover-tint: rgba(255, 255, 255, 0.04); /* RGB channel for subtle tints/borders that must contrast with the bg (white-based on dark, slate-based on high contrast) */ --tint-rgb: 255, 255, 255; /* ========================================================================== TEXT ========================================================================== */ --color-text: #e2e8f0; --color-text-primary: #f8fafc; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-dim: #475569; --color-text-inverse: #0f172a; --color-text-link: var(--color-primary); --color-text-link-hover: var(--color-primary-hover); /* ========================================================================== BORDERS ========================================================================== */ --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.12); --color-border-strong: rgba(255, 255, 255, 0.15); --color-border-focus: var(--color-primary); /* ========================================================================== INPUTS & FORMS ========================================================================== */ --color-input-bg: #334155; --color-input-bg-focus: rgba(255, 255, 255, 0.05); --color-input-border: var(--color-border-light); --color-input-border-focus: var(--color-primary); --color-input-text: var(--color-text-primary); --color-input-placeholder: var(--color-text-muted); /* ========================================================================== LAYOUT DIMENSIONS ========================================================================== */ --sidebar-width: 260px; --sidebar-collapsed-width: 68px; --header-height: 60px; /* ========================================================================== SIDEBAR ========================================================================== */ --sidebar-bg: var(--color-surface); --sidebar-item-hover: rgba(255, 255, 255, 0.04); --sidebar-item-active: rgba(0, 112, 204, 0.10); --sidebar-divider: var(--color-border); /* ========================================================================== HEADER ========================================================================== */ --header-bg: var(--color-dark-bg); --header-border: var(--color-border); /* ========================================================================== TYPOGRAPHY ========================================================================== */ --font-family-base: 'Inter', system-ui, -apple-system, sans-serif; --font-family-mono: 'SF Mono', 'Consolas', 'Monaco', monospace; /* ========================================================================== SPACING ========================================================================== */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* ========================================================================== BORDER RADIUS ========================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ========================================================================== SHADOWS ========================================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-primary: 0 4px 14px rgba(0, 112, 204, 0.25); --shadow-danger: 0 4px 14px rgba(239, 68, 68, 0.25); /* ========================================================================== ANIMATIONS & TRANSITIONS ========================================================================== */ --transition-speed: 0.25s; --transition-fast: 0.15s; --transition-slow: 0.35s; /* ========================================================================== Z-INDEX SCALE ========================================================================== */ --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300; --z-header: 400; --z-modal-backdrop: 500; --z-modal: 600; --z-toast: 700; } /* ============================================================================ DAY / HIGH CONTRAST THEME ============================================================================ Light theme with high-contrast text and borders, mirroring the mobile app "dayHighContrast" GPS theme (light slate backgrounds, white cards, dark slate text, deep sea-blue accent). ============================================================================ */ [data-theme="high-contrast"] { color-scheme: light; /* ========================================================================== COLOR PALETTE ========================================================================== */ /* Primary */ --color-primary: #0369a1; --color-primary-hover: #075985; --color-primary-active: #0c4a6e; --color-primary-light: rgba(3, 105, 161, 0.12); --color-primary-subtle: rgba(3, 105, 161, 0.05); --color-primary-rgb: 3, 105, 161; --color-primary-text: #0369a1; --color-primary-text-hover: #075985; /* Secondary (Accent) */ --color-secondary: #047857; --color-secondary-hover: #065f46; --color-secondary-light: rgba(4, 120, 87, 0.12); --color-secondary-rgb: 4, 120, 87; --color-secondary-text: #047857; /* Tertiary (Danger/Alert) */ --color-tertiary: #b91c1c; --color-tertiary-hover: #991b1b; --color-tertiary-light: rgba(185, 28, 28, 0.12); --color-tertiary-rgb: 185, 28, 28; /* ========================================================================== SEMANTIC / STATUS COLORS ========================================================================== */ --color-success: #15803d; --color-success-light: rgba(21, 128, 61, 0.12); --color-success-text: #15803d; --color-success-dark: #166534; --color-warning: #b45309; --color-warning-light: rgba(180, 83, 9, 0.12); --color-warning-text: #92400e; --color-warning-dark: #78350f; --color-danger: #dc2626; --color-danger-light: rgba(220, 38, 38, 0.08); --color-danger-dark: #b91c1c; --color-danger-text: #b91c1c; --color-danger-text-soft: #dc2626; --color-info: #0e7490; --color-info-light: rgba(14, 116, 144, 0.12); --color-info-text: #0e7490; --color-info-dark: #155e75; --color-purple: #7c3aed; --color-purple-light: rgba(124, 58, 237, 0.12); --color-purple-text: #6d28d9; --color-purple-text-hover: #5b21b6; /* ========================================================================== BACKGROUNDS ========================================================================== */ --color-dark-bg: #f0f4f8; --color-bg: #f0f4f8; --color-bg-light: #ffffff; --color-surface: #ffffff; --color-surface-elevated: #f1f5f9; --color-card-bg: #ffffff; --color-card: #ffffff; --color-card-hover: #f1f5f9; --color-map-bg: #dbe4ee; --color-tooltip-bg: #0f172a; --color-tooltip-text: #ffffff; --color-switch-track: #94a3b8; --color-card-translucent: #ffffff; --color-card-translucent-hover: #f1f5f9; --color-glass-bg: rgba(255, 255, 255, 0.85); --color-thead-bg: rgba(15, 23, 42, 0.05); --color-loading-overlay: rgba(240, 244, 248, 0.7); --color-hover-tint: rgba(15, 23, 42, 0.05); --tint-rgb: 15, 23, 42; /* ========================================================================== TEXT ========================================================================== */ --color-text: #1e293b; --color-text-primary: #0f172a; --color-text-secondary: #334155; --color-text-muted: #475569; --color-text-dim: #64748b; --color-text-inverse: #ffffff; /* ========================================================================== BORDERS ========================================================================== */ --color-border: rgba(15, 23, 42, 0.15); --color-border-light: rgba(15, 23, 42, 0.22); --color-border-strong: rgba(15, 23, 42, 0.35); /* ========================================================================== INPUTS & FORMS ========================================================================== */ --color-input-bg: #ffffff; --color-input-bg-focus: #ffffff; /* ========================================================================== SIDEBAR ========================================================================== */ --sidebar-item-hover: rgba(15, 23, 42, 0.05); --sidebar-item-active: rgba(3, 105, 161, 0.10); /* ========================================================================== SHADOWS ========================================================================== */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12); --shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.15); --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.18); --shadow-primary: 0 4px 14px rgba(3, 105, 161, 0.25); --shadow-danger: 0 4px 14px rgba(220, 38, 38, 0.25); } [x-cloak] { display: none !important; }