/* ══════════════════════════════════════════════════════════════════════════════ Monitorr Theme System Two-tier architecture: Palette Tokens (raw colors) + Semantic Tokens (roles) To create a new theme, duplicate the [data-theme="indigo"] block, rename, and adjust values. Switch themes by setting data-theme on . ══════════════════════════════════════════════════════════════════════════════ */ /* ── Tier 1: Palette Tokens ───────────────────────────────────────────────── */ [data-theme="indigo"] { --md-primary: #3f51b5; --md-primary-dark: #303f9f; --md-primary-light: #c5cae9; --md-primary-rgb: 63, 81, 181; --md-accent: #03a9f4; --md-accent-light: #4fc3f7; --md-accent-dark: #0288d1; --md-accent-rgb: 3, 169, 244; --md-text-on-primary: #FFFFFF; --md-text-primary: #212121; --md-text-secondary: #757575; --md-divider: #BDBDBD; --md-error: #ef5350; --md-error-rgb: 239, 83, 80; --md-success: #4caf50; --md-success-rgb: 76, 175, 80; --md-warning: #ff9800; --md-warning-rgb: 255, 152, 0; --md-info: #29b6f6; --md-info-rgb: 41, 182, 246; } /* ── Tier 2: Semantic Tokens ──────────────────────────────────────────────── */ [data-theme="indigo"] { /* Surfaces */ --surface-base: #0d1117; --surface-base-alt: #111827; --surface-card: rgba(var(--md-primary-rgb), 0.08); --surface-card-hover: rgba(var(--md-primary-rgb), 0.14); --surface-elevated: rgba(var(--md-primary-rgb), 0.12); --surface-overlay: rgba(0, 0, 0, 0.7); --surface-modal: #161b2e; --surface-sidebar: rgba(13, 17, 23, 0.95); --surface-topbar: rgba(17, 24, 39, 0.8); --surface-input: rgba(var(--md-primary-rgb), 0.06); --surface-player: rgba(13, 17, 23, 0.97); /* Background gradient */ --bg-gradient: linear-gradient(135deg, #0a0e1a 0%, #0d1117 40%, #111827 100%); /* Borders */ --border-subtle: rgba(197, 202, 233, 0.06); --border-medium: rgba(197, 202, 233, 0.12); --border-strong: rgba(197, 202, 233, 0.2); /* Text */ --on-surface: #ecedf0; --on-surface-medium: #a0a3b1; --on-surface-muted: #6b6f80; --on-surface-faint: rgba(255, 255, 255, 0.3); /* Interactive */ --interactive-primary: var(--md-primary); --interactive-primary-hover: var(--md-primary-light); --interactive-primary-rgb: var(--md-primary-rgb); --interactive-accent: var(--md-accent); --interactive-accent-hover: var(--md-accent-light); --interactive-accent-rgb: var(--md-accent-rgb); /* Status / Semantic */ --status-success: var(--md-success); --status-success-rgb: var(--md-success-rgb); --status-error: var(--md-error); --status-error-rgb: var(--md-error-rgb); --status-warning: var(--md-warning); --status-warning-rgb: var(--md-warning-rgb); --status-info: var(--md-info); --status-info-rgb: var(--md-info-rgb); /* Media type badges */ --badge-movie: #f0c040; --badge-show: #4fc3f7; --badge-episode: #66bb6a; --badge-season: #ce93d8; /* Slider / Seek / Volume (Material dark: 200 tone) */ --slider-active: var(--md-accent); --slider-inactive: rgba(197, 202, 233, 0.25); --slider-thumb: var(--md-accent); --slider-buffered: rgba(197, 202, 233, 0.35); /* Spinner */ --spinner-track: rgba(197, 202, 233, 0.1); --spinner-accent: var(--md-accent); /* Shadows */ --shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-elevation-3: 0 8px 32px rgba(0, 0, 0, 0.6); /* Content widths */ --content-width-narrow: 900px; --content-width-default: 1200px; --content-width-wide: 1500px; /* Glass */ --glass-blur: 12px; /* Radii (Material: 4, 8, 12, 16, 28) */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 28px; /* Transitions (Material motion) */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --duration-short: 150ms; --duration-medium: 250ms; --duration-long: 350ms; } /* ── Tier 3: Library Layout Tokens ────────────────────────────────────────── Override these in any theme to restyle the entire library. TV mode bumps sizes via [data-tv-mode="true"]. ──────────────────────────────────────────────────────────────────────────── */ [data-theme="indigo"] { --lib-hero-height: 55vh; --lib-card-radius: var(--radius-sm); --lib-card-gap: 0.75rem; --lib-poster-ratio: 2 / 3; --lib-landscape-ratio: 16 / 9; --lib-landscape-width: 300px; --lib-hub-card-width: 175px; --lib-grid-min-width: 140px; --lib-wall-min-width: 280px; --lib-stage-card-height: 200px; --lib-stage-poster-width: 100px; --lib-stage-gap: 0.75rem; --lib-stage-snap: proximity; --lib-focus-ring-width: 2px; --lib-focus-ring-color: var(--interactive-accent); --lib-focus-scale: 1; --lib-focus-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --lib-card-bg: var(--surface-card); --lib-card-hover-bg: var(--surface-card-hover); --lib-card-border: 1px solid transparent; --lib-card-hover-border: 1px solid var(--border-strong); --lib-progress-height: 3px; --lib-progress-bg: rgba(255, 255, 255, 0.2); --lib-progress-fill: var(--interactive-accent); --lib-transition-speed: 0.2s; --lib-billboard-transition: 0.8s; --lib-billboard-interval: 8000; --lib-backdrop-opacity: 0.18; --lib-gradient-from: rgba(10, 15, 30, 0.95); --lib-gradient-to: rgba(10, 15, 30, 0.4); } /* ── TV / 10-foot mode ─────────────────────────────────────────────────────── */ [data-tv-mode="true"] { --lib-hero-height: 65vh; --lib-hub-card-width: 200px; --lib-grid-min-width: 200px; --lib-landscape-width: 420px; --lib-wall-min-width: 360px; --lib-stage-card-height: 260px; --lib-stage-poster-width: 140px; --lib-focus-ring-width: 3px; --lib-focus-scale: 1; --lib-focus-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); --lib-card-gap: 1rem; --lib-progress-height: 5px; --sidebar-width: 0px; } [data-tv-mode="true"] .sidebar { width: 60px; overflow: hidden; transition: width .3s var(--ease-standard); } [data-tv-mode="true"] .sidebar:hover { width: 220px; } [data-tv-mode="true"] .sidebar .nav-link span:not(.bi), [data-tv-mode="true"] .sidebar .section-label, [data-tv-mode="true"] .sidebar .monitorr-brand-name { opacity: 0; transition: opacity .2s; } [data-tv-mode="true"] .sidebar:hover .nav-link span:not(.bi), [data-tv-mode="true"] .sidebar:hover .section-label, [data-tv-mode="true"] .sidebar:hover .monitorr-brand-name { opacity: 1; } /* ── Extra-large screens ──────────────────────────────────────────────────── */ @media (min-width: 2560px) { [data-theme="indigo"] { --lib-grid-min-width: 200px; --lib-hub-card-width: 195px; --lib-landscape-width: 380px; --lib-wall-min-width: 400px; --lib-stage-card-height: 280px; --lib-stage-poster-width: 130px; } } /* ── Fallback: duplicate to :root so nothing breaks before data-theme loads ─ */ :root { --md-primary: #3f51b5; --md-primary-dark: #303f9f; --md-primary-light: #c5cae9; --md-primary-rgb: 63, 81, 181; --md-accent: #03a9f4; --md-accent-light: #4fc3f7; --md-accent-dark: #0288d1; --md-accent-rgb: 3, 169, 244; --md-text-on-primary: #FFFFFF; --md-text-primary: #212121; --md-text-secondary: #757575; --md-divider: #BDBDBD; --md-error: #ef5350; --md-error-rgb: 239, 83, 80; --md-success: #4caf50; --md-success-rgb: 76, 175, 80; --md-warning: #ff9800; --md-warning-rgb: 255, 152, 0; --md-info: #29b6f6; --md-info-rgb: 41, 182, 246; --surface-base: #0d1117; --surface-base-alt: #111827; --surface-card: rgba(63, 81, 181, 0.08); --surface-card-hover: rgba(63, 81, 181, 0.14); --surface-elevated: rgba(63, 81, 181, 0.12); --surface-overlay: rgba(0, 0, 0, 0.7); --surface-modal: #161b2e; --surface-sidebar: rgba(13, 17, 23, 0.95); --surface-topbar: rgba(17, 24, 39, 0.8); --surface-input: rgba(63, 81, 181, 0.06); --surface-player: rgba(13, 17, 23, 0.97); --bg-gradient: linear-gradient(135deg, #0a0e1a 0%, #0d1117 40%, #111827 100%); --border-subtle: rgba(197, 202, 233, 0.06); --border-medium: rgba(197, 202, 233, 0.12); --border-strong: rgba(197, 202, 233, 0.2); --on-surface: #ecedf0; --on-surface-medium: #a0a3b1; --on-surface-muted: #6b6f80; --on-surface-faint: rgba(255, 255, 255, 0.3); --interactive-primary: #3f51b5; --interactive-primary-hover: #c5cae9; --interactive-primary-rgb: 63, 81, 181; --interactive-accent: #03a9f4; --interactive-accent-hover: #4fc3f7; --interactive-accent-rgb: 3, 169, 244; --status-success: #4caf50; --status-success-rgb: 76, 175, 80; --status-error: #ef5350; --status-error-rgb: 239, 83, 80; --status-warning: #ff9800; --status-warning-rgb: 255, 152, 0; --status-info: #29b6f6; --status-info-rgb: 41, 182, 246; --badge-movie: #f0c040; --badge-show: #4fc3f7; --badge-episode: #66bb6a; --badge-season: #ce93d8; --slider-active: #03a9f4; --slider-inactive: rgba(197, 202, 233, 0.25); --slider-thumb: #03a9f4; --slider-buffered: rgba(197, 202, 233, 0.35); --spinner-track: rgba(197, 202, 233, 0.1); --spinner-accent: #03a9f4; --shadow-elevation-1: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-elevation-2: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-elevation-3: 0 8px 32px rgba(0, 0, 0, 0.6); --glass-blur: 12px; --content-width-narrow: 900px; --content-width-default: 1200px; --content-width-wide: 1500px; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-full: 28px; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --duration-short: 150ms; --duration-medium: 250ms; --duration-long: 350ms; --lib-hero-height: 55vh; --lib-card-radius: 8px; --lib-card-gap: 0.75rem; --lib-poster-ratio: 2 / 3; --lib-landscape-ratio: 16 / 9; --lib-landscape-width: 300px; --lib-hub-card-width: 175px; --lib-grid-min-width: 140px; --lib-wall-min-width: 280px; --lib-stage-card-height: 200px; --lib-stage-poster-width: 100px; --lib-stage-gap: 0.75rem; --lib-stage-snap: proximity; --lib-focus-ring-width: 2px; --lib-focus-ring-color: #03a9f4; --lib-focus-scale: 1; --lib-focus-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); --lib-card-bg: rgba(63, 81, 181, 0.08); --lib-card-hover-bg: rgba(63, 81, 181, 0.14); --lib-card-border: 1px solid transparent; --lib-card-hover-border: 1px solid rgba(197, 202, 233, 0.2); --lib-progress-height: 3px; --lib-progress-bg: rgba(255, 255, 255, 0.2); --lib-progress-fill: #03a9f4; --lib-transition-speed: 0.2s; --lib-billboard-transition: 0.8s; --lib-billboard-interval: 8000; --lib-backdrop-opacity: 0.18; --lib-gradient-from: rgba(10, 15, 30, 0.95); --lib-gradient-to: rgba(10, 15, 30, 0.4); }