/* ============================================================ SGEN Admin — Theme Engine (gradient + glass design tokens) ============================================================ Loaded AFTER theme.css, so it extends the existing shadcn token set with the primitives needed for the "gradient / glassy / glow" aesthetic — and adds a swap-the-seeds theming layer. ── How it is layered ────────────────────────────────────── TIER 1 SEED KNOBS --tk-* ~18 numbers that define a theme. Stored as raw HSL channels so they can be recomposed with alpha / calc. TIER 2 EFFECT TOKENS --glass-* --gradient-* --glow-* --surface-* Derived ONCE from the knobs. They are declared a single time on :root and automatically recompute whenever a theme overrides the knobs. TIER 3 STYLE + SWATCH Two independent axes (defined in the block below): • data-admin-theme="glassy" — the dark glass STYLE (absent = flat light default). • data-admin-swatch="" — the accent COLOUR, applied to flat AND glassy. Each colour's seed block lives in its OWN file, not here: assets/admin/themes//swatch.css ── Add a colour ─────────────────────────────────────────── Create assets/admin/themes//swatch.css containing a html[data-admin-swatch=""] block (copy an existing colour), then add to the whitelists in general.php, header.php, admin.js and Admin_Settings_Actions.php. header.php ships the ACTIVE swatch; admin.js lazy-loads the others when they're previewed in the picker. ── Activate ─────────────────────────────────────────────── Driven by the "Admin Theme" (colour) + "Style" settings (Settings → General), echoed by header.php onto : With neither attribute the admin keeps its default flat crimson look; the effect tokens + utility classes stay available everywhere. ============================================================ */ /* ============================================================ TIER 1 — SEED KNOBS (default = current light admin) TIER 2 — EFFECT TOKENS (derived from the knobs, declared once) ============================================================ */ :root { /* ---- seed knobs : surfaces ---- */ --tk-bg-h: 220; --tk-bg-s: 15%; --tk-bg-l: 95%; /* page background */ --tk-surface-h: 0; --tk-surface-s: 0%; --tk-surface-l: 100%; /* cards/panels */ --tk-text-h: 222; --tk-text-s: 47%; --tk-text-l: 11%; /* body text */ /* ---- seed knobs : accent (drives gradients + glows) ---- */ --tk-accent-h: 356; --tk-accent-s: 82%; --tk-accent-l: 46%; --tk-accent2-h: 352; --tk-accent2-s: 80%; --tk-accent2-l: 50%; /* ---- seed knobs : glass / glow tuning ---- */ --tk-glass-alpha: 0.72; /* surface translucency for .glass */ --tk-blur: 12px; /* backdrop blur radius */ --tk-border-alpha: 0.55; /* glass hairline border strength */ --tk-glow-alpha: 0.22; /* coloured-shadow / glow intensity */ --tk-elev-h: 220; /* hue used for ambient (non-coloured) shadows */ /* ---- TIER 2 : elevation surfaces (opaque) ---- */ --surface-0: hsl(var(--tk-bg-h) var(--tk-bg-s) var(--tk-bg-l)); --surface-1: hsl(var(--tk-surface-h) var(--tk-surface-s) var(--tk-surface-l)); --surface-2: hsl(var(--tk-surface-h) var(--tk-surface-s) calc(var(--tk-surface-l) + 4%)); --surface-3: hsl(var(--tk-surface-h) var(--tk-surface-s) calc(var(--tk-surface-l) + 8%)); /* ---- TIER 2 : glass ---- */ --glass-bg: hsl(var(--tk-surface-h) var(--tk-surface-s) var(--tk-surface-l) / var(--tk-glass-alpha)); --glass-bg-strong: hsl(var(--tk-surface-h) var(--tk-surface-s) var(--tk-surface-l) / calc(var(--tk-glass-alpha) + 0.18)); --glass-border: hsl(0 0% 100% / var(--tk-border-alpha)); --glass-blur: blur(var(--tk-blur)); --glass-highlight: inset 0 1px 0 0 hsl(0 0% 100% / calc(var(--tk-border-alpha) * 0.6)); /* ---- TIER 2 : gradients ---- */ --gradient-accent: linear-gradient(135deg, hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l)) 0%, hsl(var(--tk-accent2-h) var(--tk-accent2-s) var(--tk-accent2-l)) 100%); --gradient-accent-soft: linear-gradient(135deg, hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / 0.16) 0%, hsl(var(--tk-accent2-h) var(--tk-accent2-s) var(--tk-accent2-l) / 0.04) 100%); --gradient-surface: linear-gradient(180deg, hsl(var(--tk-surface-h) var(--tk-surface-s) calc(var(--tk-surface-l) + 3%) / var(--tk-glass-alpha)) 0%, hsl(var(--tk-surface-h) var(--tk-surface-s) var(--tk-surface-l) / var(--tk-glass-alpha)) 100%); --gradient-text: linear-gradient(90deg, hsl(var(--tk-accent-h) var(--tk-accent-s) calc(var(--tk-accent-l) + 8%)) 0%, hsl(var(--tk-accent2-h) var(--tk-accent2-s) calc(var(--tk-accent2-l) + 12%)) 100%); /* full-bleed page backdrops */ --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -10%, hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / 0.22), transparent 60%), linear-gradient(180deg, var(--surface-0), hsl(var(--tk-bg-h) var(--tk-bg-s) calc(var(--tk-bg-l) - 3%))); --gradient-mesh: radial-gradient(at 0% 0%, hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / 0.16), transparent 42%), radial-gradient(at 100% 0%, hsl(var(--tk-accent2-h) var(--tk-accent2-s) var(--tk-accent2-l) / 0.12), transparent 46%), radial-gradient(at 50% 110%, hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / 0.10), transparent 50%); /* ---- TIER 2 : glows + ambient shadows ---- */ --glow-sm: 0 0 12px hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / calc(var(--tk-glow-alpha) * 0.7)); --glow-accent: 0 8px 30px -8px hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / var(--tk-glow-alpha)); --glow-lg: 0 24px 60px -12px hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / calc(var(--tk-glow-alpha) + 0.1)); --shadow-soft: 0 4px 16px hsl(var(--tk-elev-h) 24% 6% / 0.16); --shadow-glass: 0 8px 32px hsl(var(--tk-elev-h) 30% 4% / 0.32); --ring-glow: 0 0 0 3px hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / 0.30); } /* Keep the built-in shadcn dark mode (.dark / [data-theme=dark]) consistent with the engine: align the knobs to that palette so glass/glow read right. */ [data-theme="dark"], .dark { --tk-bg-h: 220; --tk-bg-s: 26%; --tk-bg-l: 14%; --tk-surface-h: 220; --tk-surface-s: 26%; --tk-surface-l: 18%; --tk-text-h: 0; --tk-text-s: 0%; --tk-text-l: 98%; --tk-accent-h: 17; --tk-accent-s: 88%; --tk-accent-l: 55%; --tk-accent2-h: 25; --tk-accent2-s: 90%; --tk-accent2-l: 58%; --tk-glass-alpha: 0.55; --tk-blur: 16px; --tk-border-alpha: 0.10; --tk-glow-alpha: 0.40; --tk-elev-h: 220; } /* ============================================================ TIER 3 — STYLES (two axes, kept independent) AXIS 1 · STYLE → data-admin-theme (absent) = "flat" — the default light admin (theme.css :root). No glass/gradient chrome. Fully tokenized. "glassy" — dark glassmorphism: gradient surfaces, blur, accent glow. Crimson by default. AXIS 2 · COLOR SWATCH → data-admin-swatch (applies to flat AND glassy) (absent) = crimson — the default, baked into .glassy and theme.css. "indigo" / "teal" / … = override ONLY the colour seeds. Each colour's block lives in its own file (assets/admin/themes//swatch.css), not here; the shared flat-accent rule for them is below. Selectors are qualified with `html` (specificity 0,1,1) so the style's semantic-token overrides ALWAYS beat theme.css `:root` (0,1,0) and the built-in `.dark` block, regardless of stylesheet load order. ============================================================ */ /* ---- STYLE "glassy" : near-black + crimson glass (the reference look) ---- */ html[data-admin-theme="glassy"] { color-scheme: dark; /* — SWATCH seeds (colour identity — what a data-admin-swatch overrides) — */ --tk-bg-h: 0; --tk-bg-s: 0%; --tk-bg-l: 4%; /* base hue: neutral */ --tk-surface-h: 0; --tk-surface-s: 8%; --tk-surface-l: 9%; --tk-accent-h: 356; --tk-accent-s: 85%; --tk-accent-l: 53%; /* crimson */ --tk-accent2-h: 348; --tk-accent2-s: 90%; --tk-accent2-l: 45%; --tk-text-h: 0; --tk-text-s: 0%; --tk-text-l: 96%; --tk-elev-h: 0; /* — GLASS-structure seeds (the "glassy" feel — shared by every swatch) — */ --tk-glass-alpha: 0.5; --tk-blur: 18px; --tk-border-alpha: 0.08; --tk-glow-alpha: 0.45; /* remap shadcn semantic tokens so existing components adopt the theme */ /* Brand gradient follows the accent so swatch-driven chrome (active nav, menu toggle, badges, etc.) recolours instead of staying crimson. */ --gradient-brand: var(--gradient-accent); --background: var(--surface-0); --foreground: hsl(var(--tk-text-h) var(--tk-text-s) var(--tk-text-l)); --card: var(--surface-1); --card-foreground: var(--foreground); --popover: var(--surface-2); --popover-border: hsl(0 0% 100% / 0.08); --popover-foreground: var(--foreground); --primary: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l)); --primary-rgb: 233, 49, 71; --primary-foreground: hsl(0 0% 100%); --primary-hover: hsl(var(--tk-accent-h) var(--tk-accent-s) calc(var(--tk-accent-l) - 7%)); --primary-light: hsl(var(--tk-accent-h) 40% 18%); --secondary: var(--surface-2); --secondary-foreground: var(--foreground); --secondary-rgb: 28, 26, 27; --secondary-hover: var(--surface-3); --secondary-light: var(--surface-1); --muted: var(--surface-2); --muted-foreground: hsl(0 0% 64%); --muted-rgb: 28, 26, 27; --muted-hover: var(--surface-3); --muted-light: var(--surface-1); --accent: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l)); --accent-foreground: hsl(0 0% 100%); --accent-rgb: 233, 49, 71; --accent-hover: var(--primary-hover); --accent-light: hsl(var(--tk-accent-h) 40% 18%); /* Status colours — dark variants so badges/pills/alerts read on dark glass. Independent of the accent, so every colour swatch inherits these. */ --success: hsl(142 65% 48%); --success-foreground: hsl(0 0% 100%); --success-rgb: 33, 191, 99; --success-hover: hsl(142 65% 54%); --success-light: hsl(142 32% 20%); --warning: hsl(38 92% 55%); --warning-foreground: hsl(40 60% 8%); --warning-rgb: 246, 168, 35; --warning-hover: hsl(38 92% 62%); --warning-light: hsl(38 42% 20%); --danger: hsl(0 72% 57%); --danger-foreground: hsl(0 0% 100%); --danger-rgb: 235, 76, 76; --danger-hover: hsl(0 72% 63%); --danger-light: hsl(0 48% 22%); --destructive: hsl(0 72% 57%); --destructive-foreground: hsl(0 0% 100%); --destructive-rgb: 235, 76, 76; --destructive-hover: hsl(0 72% 63%); --destructive-light: hsl(0 48% 22%); --info: hsl(200 80% 56%); --info-foreground: hsl(0 0% 100%); --info-rgb: 49, 171, 232; --info-hover: hsl(200 80% 62%); --info-light: hsl(200 42% 20%); --border: hsl(0 0% 100% / 0.08); --input: hsl(0 0% 100% / 0.1); --ring: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l)); --secondary-accent: var(--surface-2); --secondary-accent-foreground: var(--foreground); --secondary-accent-rgb: 28, 26, 27; --stat-icon-bg: hsl(var(--tk-accent-h) 60% 14%); --stat-icon-color: hsl(var(--tk-accent-h) var(--tk-accent-s) calc(var(--tk-accent-l) + 8%)); /* sidebar */ --sidebar-background: hsl(0 0% 3%); --sidebar-foreground: hsl(0 0% 70%); --sidebar-primary: var(--primary); --sidebar-primary-foreground: hsl(0 0% 100%); --sidebar-accent: hsl(0 0% 8%); --sidebar-accent-foreground: hsl(0 0% 98%); --sidebar-border: hsl(0 0% 100% / 0.06); --sidebar-ring: var(--primary); --sidebar-muted: hsl(0 0% 45%); } /* ============================================================ COLOR SWATCHES (the "Admin Theme" colour axis) Driven by data-admin-swatch — applies to BOTH Flat and Glassy. ⚠ The per-colour seed blocks live in their OWN folders, not here: assets/admin/themes//swatch.css Each only sets colour (surface tint hue/sat, accent pair, text/shadow hue, the two -rgb values, sidebar tint). Structure (surface lightness, glass, glow, status colours) comes from the engine + active style. header.php auto-loads every per-colour swatch.css. To add a colour: make a folder + swatch.css, then add it to the picker whitelist. The one shared rule below stays here because it is generic (it reads whatever --tk-accent the active swatch set): FLAT + colour — on Flat the accent semantic tokens otherwise come from theme.css :root (fixed crimson) which wins the cascade tie. Re-map them at specificity (0,2,1) so they beat :root, scoped to Flat via :not so Glassy (its own dark remap) is untouched. ============================================================ */ html[data-admin-swatch]:not([data-admin-theme]) { --primary: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l)); --primary-hover: hsl(var(--tk-accent-h) var(--tk-accent-s) calc(var(--tk-accent-l) - 6%)); --primary-light: hsl(var(--tk-accent-h) 82% 92%); --accent: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l)); --accent-hover: hsl(var(--tk-accent-h) var(--tk-accent-s) calc(var(--tk-accent-l) - 6%)); --accent-light: hsl(var(--tk-accent-h) 82% 92%); --ring: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l)); --gradient-brand: var(--gradient-accent); /* keep Flat's light surfaces — do NOT tint the sidebar dark here */ --sidebar-background: hsl(var(--tk-accent-h) 6% 12%); --sidebar-accent: hsl(var(--tk-accent-h) 8% 18%); } /* ============================================================ UTILITY CLASSES — opt-in glass / gradient / glow primitives Use these on any admin element. They read the TIER 2 tokens, so they re-skin themselves under every theme automatically. ============================================================ */ /* ---- Glass surfaces ---- */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass), var(--glass-highlight); } .glass-strong { background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass), var(--glass-highlight); } .glass-card { background: var(--gradient-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: calc(var(--radius) * 2); box-shadow: var(--shadow-glass), var(--glass-highlight); } /* Progressive enhancement: only go translucent where blur is supported, otherwise fall back to the opaque elevation surface for legibility. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-strong, .glass-card { background: var(--surface-1); } } /* ---- Gradient fills ---- */ .bg-gradient-accent { background-image: var(--gradient-accent); } .bg-gradient-accent-soft { background-image: var(--gradient-accent-soft); } .bg-gradient-surface { background-image: var(--gradient-surface); } .bg-hero { background: var(--gradient-hero); } .bg-mesh { background-color: var(--surface-0); background-image: var(--gradient-mesh); } /* Gradient-clipped text (headlines / KPI numbers) */ .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* 1px gradient border via mask (keeps a transparent/glass interior) */ .gradient-border { position: relative; border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--gradient-accent) border-box; } /* ---- Glow / elevation helpers ---- */ .u-glow { box-shadow: var(--glow-accent); } .u-glow-sm { box-shadow: var(--glow-sm); } .u-glow-lg { box-shadow: var(--glow-lg); } .u-shadow-soft { box-shadow: var(--shadow-soft); } /* Hover lift + glow, for clickable cards/tiles */ .glow-hover { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .glow-hover:hover { transform: translateY(-2px); box-shadow: var(--glow-lg); border-color: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / 0.4); } /* Focus ring that matches the accent glow */ .ring-glow:focus, .ring-glow:focus-visible { outline: none; box-shadow: var(--ring-glow); } @media (prefers-reduced-motion: reduce) { .glow-hover { transition: none; } .glow-hover:hover { transform: none; } } /* ============================================================ THEMED COMPONENT TREATMENTS Scoped to [data-admin-theme] so the DEFAULT light admin is never touched — only a named dark theme turns on glass chrome, gradient buttons, mesh backdrops and accent glows. ============================================================ */ /* ---- Page backdrop: dark base + soft accent mesh ---- */ [data-admin-theme] body { background-color: var(--surface-0); background-image: var(--gradient-mesh); background-attachment: fixed; background-repeat: no-repeat; } /* ---- Header: faint accent glow down the inner edge (matches the sidebar) ---- */ [data-admin-theme] .admin-header { background: transparent; } [data-admin-theme] .admin-header .admin-header-inner { background: color-mix(in srgb, var(--sidebar-background) 82%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 -1px 0 0 var(--glass-border), var(--shadow-soft), var(--glass-highlight); } [data-admin-theme] .admin-header .admin-search-input { background: hsl(0 0% 100% / 0.04); border-color: var(--glass-border); } /* ---- Sidebar: subtle frosted glass, matched to the header bar ---- */ /* The blur lives on a ::before layer, NOT on .admin-sidebar itself: an element * with backdrop-filter becomes the containing block for its position:fixed * descendants, which would re-anchor the floating submenu flyout (positioned in * viewport coords by admin.js) to the sidebar and throw it off. Keeping the * filter on the pseudo-element preserves the frosted look without that side * effect. The sidebar is position:fixed/z-index:1040, so ::before anchors to it. */ [data-admin-theme] .admin-sidebar, [data-admin-theme] #adminSidebar { background: color-mix(in srgb, var(--sidebar-background) 82%, transparent); box-shadow: inset -1px 0 0 0 var(--glass-border), var(--shadow-soft), var(--glass-highlight); } [data-admin-theme] .admin-sidebar::before, [data-admin-theme] #adminSidebar::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); pointer-events: none; } /* ---- Cards / panels: translucent glass + lift-on-hover ---- */ [data-admin-theme] .stat-card, [data-admin-theme] .option-card, [data-admin-theme] .export-wrapper .export-card, [data-admin-theme] .card { background: var(--gradient-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass), var(--glass-highlight); } /* ---- Modals: frosted glass panel floating over the dimmed backdrop ---- */ [data-admin-theme] .modal-content { background: var(--gradient-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-glass), var(--glass-highlight); } [data-admin-theme] .modal-header, [data-admin-theme] .modal-footer { border-color: var(--glass-border); } /* ---- Offcanvas: same frosted-glass panel as modals ---- */ [data-admin-theme] .offcanvas, [data-admin-theme] .offcanvas-lg, [data-admin-theme] .offcanvas-md, [data-admin-theme] .offcanvas-sm, [data-admin-theme] .offcanvas-xl, [data-admin-theme] .offcanvas-xxl { background: var(--gradient-surface); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-border); box-shadow: var(--shadow-glass), var(--glass-highlight); } [data-admin-theme] .offcanvas .offcanvas-header { border-color: var(--glass-border); } /* Interactive cards get the accent lift + glow */ [data-admin-theme] .stat-card, [data-admin-theme] .option-card, [data-admin-theme] .export-wrapper .export-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } [data-admin-theme] .stat-card:hover, [data-admin-theme] .option-card:hover, [data-admin-theme] .export-wrapper .export-card:hover { transform: translateY(-2px); box-shadow: var(--glow-lg), var(--glass-highlight); border-color: hsl(var(--tk-accent-h) var(--tk-accent-s) var(--tk-accent-l) / 0.4); } /* Stat icon chip picks up the accent gradient */ [data-admin-theme] .stat-card .stat-icon, [data-admin-theme] .sg-reporting-stats > div .stat-icon { background: var(--gradient-accent-soft); color: var(--stat-icon-color); box-shadow: var(--glow-sm); } /* ---- Primary buttons: gradient fill + accent glow ---- */ [data-admin-theme] .btn.btn-primary { background: var(--gradient-accent); border: none; box-shadow: var(--glow-accent); } [data-admin-theme] .btn.btn-primary:hover { background: var(--gradient-accent); filter: brightness(1.08); box-shadow: var(--glow-lg); } [data-admin-theme] .btn.btn-primary:focus, [data-admin-theme] .btn.btn-primary:focus-visible { box-shadow: var(--ring-glow); } /* Bootstrap .btn-close is a black SVG — invert it on the dark theme so the × stays visible on dark modal / offcanvas / toast headers. */ [data-admin-theme] .btn-close, [data-theme="dark"] .btn-close, .dark .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } /* Reduced-motion: keep the glass, drop the movement */ @media (prefers-reduced-motion: reduce) { [data-admin-theme] .stat-card, [data-admin-theme] .option-card, [data-admin-theme] .export-wrapper .export-card { transition: none; } [data-admin-theme] .stat-card:hover, [data-admin-theme] .option-card:hover, [data-admin-theme] .export-wrapper .export-card:hover { transform: none; } }