/** * Admin Color Schemes * =================== * 5 custom color themes for the admin panel (desktop & mobile). * Each theme is applied via data-admin-theme attribute on . * * THEMES: * 1. ember-steel - Cool blue metallic overlay * 2. ember-core - Warm orange extending the ember background * 3. night-ops - Tactical green, high-contrast * 4. smoke-ice - Cool icy blues, fireline neutral * 5. burnt-earth - Muted warm earth tones * * USAGE: * - Set data-admin-theme="ember-core" on * - Theme persists via Firestore user preferences * * HOW TO ADJUST: * - Each theme defines the same CSS variables * - Change hex values to adjust colors * - Glow values use rgba for transparency */ /* ======================================== THEME 1: EMBER STEEL (Default) Cool blue metallic overlay on ember edge ======================================== */ :root, [data-admin-theme="ember-steel"] { --admin-accent: #47A8FF; --admin-accent-glow: rgba(71, 168, 255, 0.22); --admin-accent-hover: #5fb8ff; --admin-bg: #0a0a0a; --admin-panel: #0D1014; --admin-card: #13161B; --admin-input: #11141A; --admin-line: rgba(255, 255, 255, 0.08); --admin-line-strong: rgba(255, 255, 255, 0.12); --admin-text: #E6F2FF; --admin-text-secondary: #c8ddf5; --admin-text-muted: rgba(230, 242, 255, 0.45); /* Status colors stay consistent */ --admin-success: #22c55e; --admin-warning: #f59e0b; --admin-danger: #ef4444; --admin-info: #3b82f6; /* Shadows */ --admin-glow: 0 0 0 1px rgba(71, 168, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4); --admin-glow-accent: 0 0 0 1px rgba(71, 168, 255, 0.2), 0 12px 32px rgba(71, 168, 255, 0.15); /* Mobile-specific aliases */ --mobile-accent: var(--admin-accent); --mobile-bg: var(--admin-bg); --mobile-card: var(--admin-card); --mobile-input: var(--admin-input); --mobile-line: var(--admin-line); --mobile-text: var(--admin-text); --mobile-text-muted: var(--admin-text-muted); } /* ======================================== THEME 2: EMBER CORE Warm orange extending the ember background ======================================== */ [data-admin-theme="ember-core"] { --admin-accent: #FF6A1A; --admin-accent-glow: rgba(255, 106, 26, 0.28); --admin-accent-hover: #ff8040; --admin-bg: #0a0a0a; --admin-panel: #0E0B0A; --admin-card: #17110F; --admin-input: #14100E; --admin-line: rgba(255, 136, 60, 0.15); --admin-line-strong: rgba(255, 136, 60, 0.22); --admin-text: #F0E4DA; --admin-text-secondary: #e0d4ca; --admin-text-muted: rgba(240, 228, 218, 0.52); --admin-glow: 0 0 0 1px rgba(255, 106, 26, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4); --admin-glow-accent: 0 0 0 1px rgba(255, 106, 26, 0.2), 0 12px 32px rgba(255, 106, 26, 0.2); --mobile-accent: var(--admin-accent); --mobile-bg: var(--admin-bg); --mobile-card: var(--admin-card); --mobile-input: var(--admin-input); --mobile-line: var(--admin-line); --mobile-text: var(--admin-text); --mobile-text-muted: var(--admin-text-muted); } /* ======================================== THEME 3: NIGHT OPS Tactical green, high-contrast fireline friendly ======================================== */ [data-admin-theme="night-ops"] { --admin-accent: #7CFF4F; --admin-accent-glow: rgba(124, 255, 79, 0.22); --admin-accent-hover: #90ff6a; --admin-bg: #0a0a0a; --admin-panel: #0B0E0C; --admin-card: #141914; --admin-input: #101410; --admin-line: rgba(124, 255, 79, 0.08); --admin-line-strong: rgba(124, 255, 79, 0.14); --admin-text: #E6FFE6; --admin-text-secondary: #c8f5c8; --admin-text-muted: rgba(230, 255, 230, 0.55); --admin-glow: 0 0 0 1px rgba(124, 255, 79, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4); --admin-glow-accent: 0 0 0 1px rgba(124, 255, 79, 0.2), 0 12px 32px rgba(124, 255, 79, 0.15); --mobile-accent: var(--admin-accent); --mobile-bg: var(--admin-bg); --mobile-card: var(--admin-card); --mobile-input: var(--admin-input); --mobile-line: var(--admin-line); --mobile-text: var(--admin-text); --mobile-text-muted: var(--admin-text-muted); } /* ======================================== THEME 4: SMOKE & ICE Cool icy blues, fireline neutral ======================================== */ [data-admin-theme="smoke-ice"] { --admin-accent: #55DAFF; --admin-accent-glow: rgba(85, 218, 255, 0.2); --admin-accent-hover: #70e2ff; --admin-bg: #0a0a0a; --admin-panel: #0C1113; --admin-card: #151B1E; --admin-input: #11181B; --admin-line: rgba(255, 255, 255, 0.06); --admin-line-strong: rgba(255, 255, 255, 0.1); --admin-text: #E8F9FF; --admin-text-secondary: #c8e8f5; --admin-text-muted: rgba(232, 249, 255, 0.45); --admin-glow: 0 0 0 1px rgba(85, 218, 255, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4); --admin-glow-accent: 0 0 0 1px rgba(85, 218, 255, 0.2), 0 12px 32px rgba(85, 218, 255, 0.15); --mobile-accent: var(--admin-accent); --mobile-bg: var(--admin-bg); --mobile-card: var(--admin-card); --mobile-input: var(--admin-input); --mobile-line: var(--admin-line); --mobile-text: var(--admin-text); --mobile-text-muted: var(--admin-text-muted); } /* ======================================== THEME 5: BURNT EARTH Muted warm earth tones, ember-blended ======================================== */ [data-admin-theme="burnt-earth"] { --admin-accent: #D8733B; --admin-accent-glow: rgba(216, 115, 59, 0.25); --admin-accent-hover: #e08550; --admin-bg: #0a0a0a; --admin-panel: #0D0B09; --admin-card: #17130F; --admin-input: #13100D; --admin-line: rgba(216, 115, 59, 0.12); --admin-line-strong: rgba(216, 115, 59, 0.18); --admin-text: #F2E5D2; --admin-text-secondary: #e0d4c2; --admin-text-muted: rgba(242, 229, 210, 0.52); --admin-glow: 0 0 0 1px rgba(216, 115, 59, 0.1), 0 8px 24px rgba(0, 0, 0, 0.4); --admin-glow-accent: 0 0 0 1px rgba(216, 115, 59, 0.2), 0 12px 32px rgba(216, 115, 59, 0.18); --mobile-accent: var(--admin-accent); --mobile-bg: var(--admin-bg); --mobile-card: var(--admin-card); --mobile-input: var(--admin-input); --mobile-line: var(--admin-line); --mobile-text: var(--admin-text); --mobile-text-muted: var(--admin-text-muted); } /* ======================================== THEME PICKER UI STYLES ======================================== */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; } .theme-option { position: relative; display: flex; flex-direction: column; align-items: center; padding: 16px 12px; background: var(--admin-card); border: 2px solid var(--admin-line); border-radius: 12px; cursor: pointer; transition: all 0.2s ease; } .theme-option:hover { border-color: var(--admin-line-strong); transform: translateY(-2px); } .theme-option.active { border-color: var(--admin-accent); box-shadow: var(--admin-glow-accent); } .theme-option.active::after { content: ''; position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: var(--admin-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .theme-option.active::before { content: '✓'; position: absolute; top: 10px; right: 14px; font-size: 12px; font-weight: bold; color: var(--admin-bg); z-index: 1; } .theme-preview { display: flex; gap: 4px; margin-bottom: 10px; } .theme-swatch { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); } .theme-name { font-size: 13px; font-weight: 600; color: var(--admin-text); text-align: center; margin-bottom: 4px; } .theme-desc { font-size: 11px; color: var(--admin-text-muted); text-align: center; line-height: 1.3; } /* Mobile-specific theme picker */ .mobile-theme-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; } .mobile-theme-option { display: flex; flex-direction: column; align-items: center; padding: 14px 10px; background: var(--mobile-card); border: 2px solid var(--mobile-line); border-radius: 12px; cursor: pointer; transition: all 0.2s ease; } .mobile-theme-option:active { transform: scale(0.97); } .mobile-theme-option.active { border-color: var(--mobile-accent); box-shadow: 0 0 0 1px var(--mobile-accent), 0 4px 12px rgba(0, 0, 0, 0.3); } .mobile-theme-option.active .mobile-theme-check { display: flex; } .mobile-theme-check { display: none; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; background: var(--mobile-accent); border-radius: 50%; align-items: center; justify-content: center; font-size: 10px; color: #000; } .mobile-theme-swatches { display: flex; gap: 4px; margin-bottom: 8px; } .mobile-theme-swatch { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); } .mobile-theme-name { font-size: 12px; font-weight: 600; color: var(--mobile-text); text-align: center; }