/* ═══════════════════════════════════════════════════ * Fleet Core Theme System * CSS custom properties for dark and light themes. * Set data-theme="dark" or data-theme="light" on . * Anti-flash script in each page's handles this. * ═══════════════════════════════════════════════════ */ /* ─── Shared / theme-invariant tokens ─── */ :root { --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Monaco', monospace; } /* ─── Dark Theme ─── */ [data-theme="dark"] { /* Backgrounds */ --bg-base: #0a0f1a; --bg-base-gradient: linear-gradient(45deg, #0a0f1a, #0f172a, #1e293b); --bg-surface: rgba(15, 23, 42, 0.95); --bg-surface-hover: rgba(255, 255, 255, 0.06); --bg-elevated: rgba(13, 20, 35, 0.95); --bg-inset: rgba(0, 0, 0, 0.2); --bg-inset-deep: rgba(0, 0, 0, 0.3); --bg-overlay: rgba(0, 0, 0, 0.6); --bg-overlay-light: rgba(0, 0, 0, 0.4); --bg-hover: rgba(255, 255, 255, 0.06); --bg-input: rgba(0, 0, 0, 0.3); /* Glass */ --glass-surface: rgba(15, 23, 42, 0.95); --glass-surface-85: rgba(15, 23, 42, 0.85); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-subtle: rgba(255, 255, 255, 0.04); --glass-blur: 12px; --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Semantic border aliases */ --border-default: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.04); --border-strong: rgba(255, 255, 255, 0.20); /* Text */ --text-primary: rgba(248, 250, 252, 0.95); --text-primary-solid: #f1f5f9; --text-secondary: rgba(148, 163, 184, 0.8); --text-secondary-solid: #94a3b8; --text-muted: rgba(100, 116, 139, 0.6); --text-muted-solid: #64748b; --text-inverse: #0f172a; /* Accents */ --accent-cyan: #22d3ee; --accent-green: #10b981; --accent-emerald: #34d399; --accent-orange: #f59e0b; --accent-red: #ef4444; --accent-slate: #568289; --accent-gold: #fbbf24; --accent-purple: #a78bfa; /* Semantic accent aliases */ --accent-primary: #22d3ee; --accent-primary-rgb: 34, 211, 238; --accent-hover: #06b6d4; --accent-muted: rgba(34, 211, 238, 0.12); /* Accent alpha variants (cyan) */ --accent-cyan-a06: rgba(34, 211, 238, 0.06); --accent-cyan-a10: rgba(34, 211, 238, 0.10); --accent-cyan-a12: rgba(34, 211, 238, 0.12); --accent-cyan-a15: rgba(34, 211, 238, 0.15); --accent-cyan-a20: rgba(34, 211, 238, 0.20); --accent-cyan-a30: rgba(34, 211, 238, 0.30); --accent-cyan-a40: rgba(34, 211, 238, 0.40); /* Status colors */ --status-running: #22c55e; --status-stopped: #ef4444; --status-offline: #6b7280; --status-last-known: #f59e0b; --status-unprov: #64748b; /* Severity colors */ --severity-critical: #ef4444; --severity-urgent: #f97316; --severity-warning: #f59e0b; --severity-info: #22d3ee; /* Status badge backgrounds */ --status-green-bg: rgba(16, 185, 129, 0.12); --status-green-border: rgba(16, 185, 129, 0.25); --status-orange-bg: rgba(245, 158, 11, 0.12); --status-orange-border: rgba(245, 158, 11, 0.25); --status-red-bg: rgba(239, 68, 68, 0.12); --status-red-border: rgba(239, 68, 68, 0.25); --status-cyan-bg: rgba(34, 211, 238, 0.12); --status-cyan-border: rgba(34, 211, 238, 0.25); /* Tags */ --tag-bg: rgba(255, 255, 255, 0.18); --tag-text: var(--text-primary); --tag-border: rgba(255, 255, 255, 0.12); /* Nav pills */ --nav-pill-bg: rgba(15, 23, 42, 0.85); --nav-pill-border: #22d3ee; --nav-pill-text: #f1f5f9; --nav-pill-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 12px rgba(34, 211, 238, 0.15); --nav-hover-bg: rgba(34, 211, 238, 0.2); --nav-hover-shadow: 0 4px 20px rgba(34, 211, 238, 0.4); --nav-dropup-bg: rgba(13, 20, 35, 0.95); --nav-dropup-border: rgba(255, 255, 255, 0.08); --nav-dropup-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); --nav-link-text: rgba(248, 250, 252, 0.85); --nav-link-icon: #64748b; --nav-active-bg: rgba(34, 211, 238, 0.12); --nav-swoosh-gradient: linear-gradient(90deg, rgba(34, 211, 238, 0.12) 0%, transparent 100%); /* Background effects (body::before, body::after) */ --bg-gradient-1: rgba(34, 211, 238, 0.06); --bg-gradient-2: rgba(99, 102, 241, 0.04); --bg-gradient-3: rgba(34, 211, 238, 0.03); --bg-dot-color: rgba(255, 255, 255, 0.03); --bg-dot-grid: radial-gradient(circle, rgba(34, 211, 238, 0.1) 1px, transparent 1px); --watermark-opacity: 0.03; /* Forms */ --input-bg: rgba(0, 0, 0, 0.3); --input-border: rgba(255, 255, 255, 0.08); --input-focus-border: rgba(34, 211, 238, 0.3); --input-focus-bg: rgba(0, 0, 0, 0.5); --input-focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.1); --select-option-bg: #1e293b; /* Scrollbar */ --scrollbar-thumb: rgba(255, 255, 255, 0.1); --scrollbar-track: transparent; /* Overlay */ --overlay-bg: rgba(0, 0, 0, 0.6); --overlay-blur: 4px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5); /* Dividers */ --divider: rgba(255, 255, 255, 0.06); /* Misc */ --toggle-track: rgba(255, 255, 255, 0.1); --toggle-border: rgba(255, 255, 255, 0.08); --badge-bg: rgba(100, 116, 139, 0.2); --logo-filter: brightness(1.1); --logo-hover-filter: brightness(1.3); --mobile-panel-bg: rgba(13, 20, 35, 0.97); --mobile-panel-border: rgba(255, 255, 255, 0.08); } /* ─── Light Theme — cool blue-gray ─── */ [data-theme="light"] { /* Backgrounds — cool blue-gray */ --bg-base: #eef1f5; --bg-base-gradient: linear-gradient(45deg, #eef1f5, #e4e8ee, #f3f5f8); --bg-surface: rgba(248, 249, 251, 0.95); --bg-surface-hover: rgba(14, 116, 144, 0.04); --bg-elevated: rgba(248, 249, 251, 0.97); --bg-inset: rgba(15, 23, 42, 0.05); --bg-inset-deep: rgba(15, 23, 42, 0.07); --bg-overlay: rgba(15, 23, 42, 0.35); --bg-overlay-light: rgba(15, 23, 42, 0.18); --bg-hover: rgba(14, 116, 144, 0.04); --bg-input: rgba(15, 23, 42, 0.06); /* Glass — cool tint */ --glass-surface: rgba(248, 249, 251, 0.94); --glass-surface-85: rgba(248, 249, 251, 0.88); --glass-border: rgba(15, 23, 42, 0.10); --glass-border-subtle: rgba(15, 23, 42, 0.06); --glass-blur: 12px; --glass-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); /* Semantic border aliases */ --border-default: rgba(15, 23, 42, 0.10); --border-subtle: rgba(15, 23, 42, 0.06); --border-strong: rgba(15, 23, 42, 0.20); /* Text — slate palette (cool gray) */ --text-primary: rgba(15, 23, 42, 0.95); --text-primary-solid: #0f172a; --text-secondary: rgba(71, 85, 105, 0.85); --text-secondary-solid: #475569; --text-muted: rgba(148, 163, 184, 0.7); --text-muted-solid: #94a3b8; --text-inverse: #f8fafc; /* Accents — darkened for legibility on cool backgrounds */ --accent-cyan: #0891b2; --accent-green: #059669; --accent-emerald: #10b981; --accent-orange: #d97706; --accent-red: #dc2626; --accent-slate: #4a7a82; --accent-gold: #b45309; --accent-purple: #7c3aed; /* Semantic accent aliases */ --accent-primary: #0891b2; --accent-primary-rgb: 8, 145, 178; --accent-hover: #0e7490; --accent-muted: rgba(8, 145, 178, 0.10); /* Accent alpha variants (cyan) */ --accent-cyan-a06: rgba(8, 145, 178, 0.06); --accent-cyan-a10: rgba(8, 145, 178, 0.10); --accent-cyan-a12: rgba(8, 145, 178, 0.12); --accent-cyan-a15: rgba(8, 145, 178, 0.15); --accent-cyan-a20: rgba(8, 145, 178, 0.20); --accent-cyan-a30: rgba(8, 145, 178, 0.30); --accent-cyan-a40: rgba(8, 145, 178, 0.40); /* Status colors */ --status-running: #16a34a; --status-stopped: #dc2626; --status-offline: #6b7280; --status-last-known: #d97706; --status-unprov: #94a3b8; /* Severity colors */ --severity-critical: #dc2626; --severity-urgent: #ea580c; --severity-warning: #d97706; --severity-info: #0891b2; /* Status badge backgrounds */ --status-green-bg: rgba(5, 150, 105, 0.10); --status-green-border: rgba(5, 150, 105, 0.25); --status-orange-bg: rgba(217, 119, 6, 0.10); --status-orange-border: rgba(217, 119, 6, 0.25); --status-red-bg: rgba(220, 38, 38, 0.10); --status-red-border: rgba(220, 38, 38, 0.25); --status-cyan-bg: rgba(8, 145, 178, 0.10); --status-cyan-border: rgba(8, 145, 178, 0.25); /* Tags */ --tag-bg: rgba(15, 23, 42, 0.08); --tag-text: var(--text-primary); --tag-border: rgba(15, 23, 42, 0.10); /* Nav pills — solid white chips with soft elevation (no border) */ --nav-pill-bg: #ffffff; --nav-pill-border: transparent; --nav-pill-text: #0f172a; --nav-pill-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --nav-hover-bg: rgba(8, 145, 178, 0.10); --nav-hover-shadow: 0 4px 16px rgba(8, 145, 178, 0.2); --nav-dropup-bg: rgba(248, 249, 251, 0.98); --nav-dropup-border: rgba(15, 23, 42, 0.10); --nav-dropup-shadow: 0 8px 32px rgba(15, 23, 42, 0.14); --nav-link-text: rgba(15, 23, 42, 0.85); --nav-link-icon: #94a3b8; --nav-active-bg: rgba(8, 145, 178, 0.10); --nav-swoosh-gradient: linear-gradient(90deg, rgba(8, 145, 178, 0.10) 0%, transparent 100%); /* Background effects (body::before, body::after) */ --bg-gradient-1: rgba(8, 145, 178, 0.04); --bg-gradient-2: rgba(99, 102, 241, 0.03); --bg-gradient-3: rgba(8, 145, 178, 0.02); --bg-dot-color: rgba(15, 23, 42, 0.05); --bg-dot-grid: radial-gradient(circle, rgba(8, 145, 178, 0.07) 1px, transparent 1px); --watermark-opacity: 0.08; /* Forms — slate-keyed recessed inputs */ --input-bg: rgba(15, 23, 42, 0.06); --input-border: rgba(15, 23, 42, 0.12); --input-focus-border: rgba(8, 145, 178, 0.4); --input-focus-bg: #f8f9fb; --input-focus-ring: 0 0 0 3px rgba(8, 145, 178, 0.12); --select-option-bg: #f8f9fb; /* Scrollbar */ --scrollbar-thumb: rgba(15, 23, 42, 0.14); --scrollbar-track: transparent; /* Overlay */ --overlay-bg: rgba(15, 23, 42, 0.35); --overlay-blur: 4px; /* Shadows */ --shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.08); --shadow-md: 0 4px 20px rgba(15, 23, 42, 0.10); --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.14); /* Dividers */ --divider: rgba(15, 23, 42, 0.08); /* Misc */ --toggle-track: rgba(15, 23, 42, 0.10); --toggle-border: rgba(15, 23, 42, 0.12); --badge-bg: rgba(148, 163, 184, 0.14); --logo-filter: brightness(0.15); --logo-hover-filter: brightness(0.08); --mobile-panel-bg: rgba(248, 249, 251, 0.98); --mobile-panel-border: rgba(15, 23, 42, 0.10); } /* ─── Watermark light-mode fix ─── */ [data-theme="light"] .eqg-watermark img, [data-theme="light"] .eqg-watermark svg { filter: brightness(0) opacity(0.5); } /* ================================================================ FILTER PILLS — Reusable across all list pages ================================================================ */ .filter-pills { display: flex; gap: 8px; padding: 12px 16px; flex-wrap: wrap; } .filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s ease; user-select: none; font-family: 'Inter', sans-serif; } .filter-pill:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } .filter-pill.active { background: var(--accent-muted); color: var(--accent-primary); border-color: var(--accent-primary); font-weight: 600; } .filter-pill .pill-count { font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .filter-pill .pill-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ─── Filter pill bar (sticky bottom position) ─── */ .filter-bar { position: sticky; bottom: 70px; z-index: 50; background: var(--glass-surface); backdrop-filter: blur(var(--glass-blur)); border-top: 1px solid var(--border-subtle); border-radius: 16px 16px 0 0; padding: 10px 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ─── Tag filter input ─── */ .tag-filter-input { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border-default); background: var(--bg-input); color: var(--text-primary); font-size: 13px; font-family: 'Inter', sans-serif; outline: none; min-width: 140px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .tag-filter-input::placeholder { color: var(--text-muted); } .tag-filter-input:focus { border-color: var(--accent-primary); box-shadow: var(--input-focus-ring); }