78 lines
2.5 KiB
CSS
78 lines
2.5 KiB
CSS
/* ============================================================
|
|
ChicoryTV — Alternate color schemes (theme scopes)
|
|
Applied via [data-theme="…"] on <html>. Each scope overrides the base
|
|
--ctv-* values; semantic aliases (--surface-app, --status-live…) follow.
|
|
|
|
Default (:root, no attribute) = PRIMARY · warm chicory (see tokens/colors.css).
|
|
============================================================ */
|
|
|
|
/* ---- Alternate · Cool periwinkle ------------------------------------
|
|
The original cool, focused scheme — one periwinkle-blue accent. */
|
|
[data-theme="cool"] {
|
|
--ctv-bg: #0F1115;
|
|
--ctv-bg-sunken: #0B0D11;
|
|
--ctv-surface: #171A21;
|
|
--ctv-surface-2: #1C2029;
|
|
--ctv-surface-3: #222732;
|
|
|
|
--ctv-border: #262B36;
|
|
--ctv-border-strong: #333A48;
|
|
|
|
--ctv-text: #E6E9EF;
|
|
--ctv-text-muted: #9AA4B2;
|
|
--ctv-text-faint: #626B7A;
|
|
|
|
--ctv-accent: #5B7CFA;
|
|
--ctv-accent-hover: #6E8BFB;
|
|
--ctv-accent-press: #4C6BE8;
|
|
--ctv-accent-soft: rgba(91, 124, 250, 0.14);
|
|
--ctv-accent-ring: rgba(91, 124, 250, 0.45);
|
|
|
|
--ctv-secondary: #5B7CFA;
|
|
--ctv-secondary-soft: rgba(91, 124, 250, 0.14);
|
|
|
|
--ctv-live: #5B7CFA;
|
|
--ctv-live-soft: rgba(91, 124, 250, 0.16);
|
|
|
|
--text-on-accent: #FFFFFF;
|
|
}
|
|
|
|
/* ---- Alternate · Dual accent ----------------------------------------
|
|
Cool periwinkle app, but live/on-air gets its own warm focal hue so the
|
|
EPG and "now" states stand out. */
|
|
[data-theme="dual"] {
|
|
--ctv-bg: #0F1115;
|
|
--ctv-bg-sunken: #0B0D11;
|
|
--ctv-surface: #171A21;
|
|
--ctv-surface-2: #1C2029;
|
|
--ctv-surface-3: #222732;
|
|
|
|
--ctv-border: #262B36;
|
|
--ctv-border-strong: #333A48;
|
|
|
|
--ctv-text: #E6E9EF;
|
|
--ctv-text-muted: #9AA4B2;
|
|
--ctv-text-faint: #626B7A;
|
|
|
|
--ctv-accent: #5B7CFA;
|
|
--ctv-accent-hover: #6E8BFB;
|
|
--ctv-accent-press: #4C6BE8;
|
|
--ctv-accent-soft: rgba(91, 124, 250, 0.14);
|
|
--ctv-accent-ring: rgba(91, 124, 250, 0.45);
|
|
|
|
--ctv-secondary: #5B7CFA;
|
|
--ctv-secondary-soft: rgba(91, 124, 250, 0.14);
|
|
|
|
--ctv-live: #F0663F;
|
|
--ctv-live-soft: rgba(240, 102, 63, 0.16);
|
|
|
|
/* Dual promotes the focal warm hue to the primary/attention color (primary
|
|
buttons, active nav, selection) so both accents read distinctly; cool
|
|
periwinkle stays the app-chrome accent (soft fills, focus ring). */
|
|
--action-primary: var(--ctv-live);
|
|
--action-primary-hover: #F47A57;
|
|
--action-primary-press: #E0562F;
|
|
|
|
--text-on-accent: #FFFFFF;
|
|
}
|