:root { --bg: #131722; --bg-elevated: #1a1f2e; --surface: #1e2436; --surface-alt: #262d43; --surface-hover: #2c3450; --border: #3a4460; --border-light: #4a5578; --text: #f1f3fa; --text-muted: #aab2cc; --text-faint: #757fa0; --accent: #6366f1; --accent-2: #818cf8; --accent-3: #22d3ee; --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #22d3ee 130%); --accent-glow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 4px 20px rgba(99, 102, 241, 0.25); /* Sidebar gradient stops -- broken out as variables (previously hardcoded directly in `.sidebar`'s background, see below) purely so the theme system's [data-theme="..."] rules further down can swap them per theme. These 3 defaults are identical to what `.sidebar` used to hardcode, so leaving the data-theme attribute absent (or setting it to "constellation") stays pixel-identical. */ --side-1: #171c2c; --side-2: #1b2136; --side-3: #201c38; --danger: #fb7185; --danger-strong: #f43f5e; --danger-bg: rgba(244, 63, 94, 0.14); --danger-text: #fda4af; --success: #34d399; --success-strong: #10b981; --success-bg: rgba(16, 185, 129, 0.14); --success-text: #6ee7b7; --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.14); --warning-text: #fcd34d; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.28); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); } /* --------------------------------------------------------------------- Theme palettes -- driven by a `data-theme=""` attribute set on in base.html/login.html (see app_settings.py's active_theme() Jinja global). Only the accent/brand palette and sidebar gradient change per theme -- functional/status colors (--danger/--success/ --warning, status pills, chart colors) are deliberately untouched by every one of these blocks. "constellation" is spelled out explicitly (rather than just relying on the attribute being absent) so an admin who's explicitly pinned it in Settings gets byte-identical values to the :root defaults above -- a true no-op either way, per the approved design. Values are the exact 6 palettes approved in the theme preview; each theme's accent-glow rgba is that theme's own `accent` hex translated to rgb(), same construction as the default glow above (#6366f1 -> 99,102,241). Each theme ALSO now tints its own --bg/--surface*/--border* neutrals toward its accent hue (previously only the accent/sidebar-gradient varied and every theme shared the exact same navy chrome underneath -- which is why 6 "distinct" themes read as one theme with 6 different link colors). Still deliberately dark across the board (this is a working admin UI, not a showcase) and --text/--text-muted/--text-faint and every status color (--danger/--success/--warning) stay constant per this file's own long-standing rule above -- only the neutral backdrop shifts, so contrast/legibility is unaffected, just its hue. */ :root, [data-theme="constellation"] { --bg: #131722; --bg-elevated: #1a1f2e; --surface: #1e2436; --surface-alt: #262d43; --surface-hover: #2c3450; --border: #3a4460; --border-light: #4a5578; --accent: #6366f1; --accent-2: #818cf8; --accent-3: #22d3ee; --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #22d3ee 130%); --accent-glow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 4px 20px rgba(99, 102, 241, 0.25); --side-1: #171c2c; --side-2: #1b2136; --side-3: #201c38; } [data-theme="contour"] { --bg: #0c1a1e; --bg-elevated: #112329; --surface: #142d33; --surface-alt: #1a373e; --surface-hover: #1f4149; --border: #2c4d54; --border-light: #3c636b; --accent: #0ea5e9; --accent-2: #14b8a6; --accent-3: #5eead4; --accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 55%, #5eead4 130%); --accent-glow: 0 0 0 1px rgba(14, 165, 233, 0.4), 0 4px 20px rgba(14, 165, 233, 0.25); --side-1: #0c181d; --side-2: #0d2026; --side-3: #0b211d; } [data-theme="ingress"] { --bg: #04060d; --bg-elevated: #080c17; --surface: #0c1220; --surface-alt: #101a2c; --surface-hover: #142236; --border: #202e4a; --border-light: #2d3f61; --accent: #1d4ed8; --accent-2: #0ea5e9; --accent-3: #67e8f9; --accent-gradient: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 55%, #67e8f9 130%); --accent-glow: 0 0 0 1px rgba(29, 78, 216, 0.4), 0 4px 20px rgba(29, 78, 216, 0.25); --side-1: #060911; --side-2: #070d18; --side-3: #061021; } [data-theme="cipher"] { --bg: #08120e; --bg-elevated: #0d1a15; --surface: #12211b; --surface-alt: #182a22; --surface-hover: #1d3329; --border: #2a473c; --border-light: #395a4c; --accent: #059669; --accent-2: #10b981; --accent-3: #34d399; --accent-gradient: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 130%); --accent-glow: 0 0 0 1px rgba(5, 150, 105, 0.4), 0 4px 20px rgba(5, 150, 105, 0.25); --side-1: #08130f; --side-2: #0a1a14; --side-3: #071a12; } [data-theme="perimeter"] { --bg: #180f06; --bg-elevated: #21160a; --surface: #2b1e0e; --surface-alt: #352713; --surface-hover: #403018; --border: #573f1c; --border-light: #6e5227; --accent: #d97706; --accent-2: #f59e0b; --accent-3: #fbbf24; --accent-gradient: linear-gradient(135deg, #d97706 0%, #f59e0b 55%, #fbbf24 130%); --accent-glow: 0 0 0 1px rgba(217, 119, 6, 0.4), 0 4px 20px rgba(217, 119, 6, 0.25); --side-1: #170f07; --side-2: #1d1407; --side-3: #180f05; } [data-theme="horizon"] { --bg: #140a1c; --bg-elevated: #1c1027; --surface: #251533; --surface-alt: #2e1a3f; --surface-hover: #38204c; --border: #4a2c62; --border-light: #5f3b7c; --accent: #7c3aed; --accent-2: #db2777; --accent-3: #f472b6; --accent-gradient: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #f472b6 130%); --accent-glow: 0 0 0 1px rgba(124, 58, 237, 0.4), 0 4px 20px rgba(124, 58, 237, 0.25); --side-1: #130b1c; --side-2: #170d22; --side-3: #140a1e; } * { box-sizing: border-box; } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--accent-2); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } /* --- Loading indicator: a clockwise-spinning ring, centered on the ------ viewport. Non-blocking (no backdrop, pointer-events off) since it also fires for background refreshes, not just full-page loads. */ #page-progress { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #page-progress.active { opacity: 1; } #page-progress .ring { display: block; width: 100%; height: 100%; border-radius: 50%; border: 4px solid var(--border-light); border-top-color: var(--accent-2); border-right-color: var(--accent-3); box-shadow: var(--shadow-lg); animation: page-progress-spin 0.7s linear infinite; } @keyframes page-progress-spin { to { transform: rotate(360deg); } } /* --- Sidebar ------------------------------------------------------------ */ body.has-sidebar { display: flex; align-items: stretch; min-height: 100vh; } .sidebar { width: 252px; flex: 0 0 252px; display: flex; flex-direction: column; background: linear-gradient(190deg, var(--side-1) 0%, var(--side-2) 60%, var(--side-3) 140%); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; padding: 22px 16px; } .sidebar .brand { font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; color: #fff; display: flex; align-items: center; gap: 10px; padding: 4px 10px 26px; text-decoration: none; } .sidebar .brand:hover { color: #fff; text-decoration: none; opacity: 0.88; } .sidebar .brand-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 32px; height: 32px; padding: 6px; border-radius: 10px; background: var(--accent-gradient); box-shadow: var(--accent-glow); } .sidebar .brand-icon svg { display: block; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar nav a { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-weight: 600; font-size: 0.92rem; padding: 10px 14px; border-radius: 9px; transition: background 0.15s ease, color 0.15s ease; } .sidebar nav a .nav-icon { font-size: 1rem; width: 18px; text-align: center; opacity: 0.8; } .sidebar nav a:hover { text-decoration: none; color: var(--text); background: var(--surface); } .sidebar nav a.active { color: #fff; background: linear-gradient(90deg, rgba(99,102,241,0.22), rgba(99,102,241,0.04)); box-shadow: inset 2px 0 0 var(--accent-2); } /* --- Content header --------------------------------------------------- Sits above every logged-in page's own content (see base.html) -- holds the admin-only quick theme switcher plus the "who"/logout controls that used to live in .sidebar-footer. Themed automatically: every color used below is one of the --accent* / --side-* custom properties the [data-theme="..."] rules above already override. -------------------- */ .content-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--border); } .content-header-right { display: flex; align-items: center; gap: 18px; } .content-header .who { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-muted); } .content-header a.who-name { font-weight: 700; color: var(--text); text-decoration: none; } .content-header a.who-name:hover { color: var(--accent-2); text-decoration: underline; } .content-header .link-button { color: var(--text-muted); font-size: 0.85rem; } .content-header .link-button:hover { color: var(--text); } /* Notification bell -- same anchored-panel shape as .theme-quick-switch below (relative wrapper, absolutely-positioned panel toggled via JS' plain display:block/none, closed on outside click), not a centered -- a bell dropdown is anchored to its trigger, not modal. */ .notif-bell { position: relative; } .notif-bell-toggle { position: relative; display: inline-flex; align-items: center; } .notif-bell-badge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--danger-strong); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 17px; text-align: center; } .notif-bell-panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; width: 340px; max-height: 420px; overflow-y: auto; background: var(--surface); border: 1.5px solid var(--border-light); border-radius: 9px; box-shadow: var(--shadow-lg); } .notif-bell-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-light); font-weight: 700; font-size: 0.85rem; position: sticky; top: 0; background: var(--surface); } .notif-item { padding: 12px 14px; border-bottom: 1px solid var(--border-light); font-size: 0.85rem; } .notif-item:last-child { border-bottom: none; } .notif-item.unread { background: var(--surface-alt); } .notif-item-level { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 5px; margin-bottom: 5px; } .notif-item-level.warning { background: var(--warning-bg); color: var(--warning-text); } .notif-item-level.critical { background: var(--danger-bg); color: var(--danger-text); } .notif-item-time { color: var(--text-muted); font-size: 0.75rem; margin-top: 4px; } .theme-quick-switch { position: relative; } #theme-quick-toggle { display: inline-flex; align-items: center; gap: 8px; } /* A small colored dot -- on the toggle button itself this deliberately has NO theme-specific class, so it just inherits var(--accent) off the live the page is actually rendering in, and always matches at a glance with zero JS color logic. Inside the panel, each option gets its own hardcoded per-theme class below (the panel itself isn't under that theme's [data-theme] scope, so it can't inherit the real value) -- same hex pairs as style.css's own [data-theme="..."] blocks' --accent/--accent-2, so the swatch always matches what selecting it will actually look like. */ .theme-swatch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 6px 1px rgba(0,0,0,0.25); } .theme-swatch-auto { background: conic-gradient(#6366f1, #0ea5e9, #059669, #d97706, #7c3aed, #6366f1); } .theme-swatch-constellation { background: linear-gradient(135deg, #6366f1, #22d3ee); } .theme-swatch-contour { background: linear-gradient(135deg, #0ea5e9, #5eead4); } .theme-swatch-ingress { background: linear-gradient(135deg, #1d4ed8, #67e8f9); } .theme-swatch-cipher { background: linear-gradient(135deg, #059669, #34d399); } .theme-swatch-perimeter { background: linear-gradient(135deg, #d97706, #fbbf24); } .theme-swatch-horizon { background: linear-gradient(135deg, #7c3aed, #f472b6); } .theme-quick-panel { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 210px; background: var(--surface); border: 1.5px solid var(--border-light); border-radius: 9px; box-shadow: var(--shadow-lg); padding: 6px; } .theme-quick-option { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; box-shadow: none; color: var(--text); font-weight: 600; font-size: 0.85rem; padding: 8px 10px; border-radius: 7px; margin: 0; } .theme-quick-option:hover { background: var(--surface-hover); transform: none; } .theme-quick-check { margin-left: auto; opacity: 0; color: var(--accent); font-weight: 700; } /* .active = the currently-SAVED setting (not necessarily what's resolved on screen right now -- "auto" itself is marked active even though the theme actually showing is only one of the 6 it rotates through, see app.js's initThemeQuickSwitch docstring). */ .theme-quick-option.active { background: var(--surface-alt); } .theme-quick-option.active .theme-quick-check { opacity: 1; } /* --- Info tooltip ------------------------------------------------------- Shared app-wide "(i)" affordance for explaining a label/setting/column that isn't self-evident, without permanently taking up space the way .field-hint's always-visible caption does. CSS-only show/hide via :hover/:focus-visible (the trigger is a real