/* Media Manager - style.css (shell + sidebar + cards + modal) - Keep CSS in /css/style.css */ /* ---------- Tokens ---------- */ :root { /* Video Games accent (library-level) */ --games-accent: #5eead4; --games-accent-muted: #2dd4bf; /* Media family accents (icon-only usage) */ --media-video: #7db9e8; /* cool ink blue */ --media-print: #d4b37a; /* parchment / ochre */ --media-audio: #9a94db; /* soft indigo */ color-scheme: dark; /* Theme tokens - Change ONLY these values to recolor the entire UI. - Downstream CSS should consume semantic tokens (not raw hex/rgba). */ /* Base neutrals (cool midnight) */ --c-bg: #0f1220; --c-surface-1: #141a2b; --c-surface-2: #1a2237; --c-text: #eef1ff; --c-muted: #aab2cf; /* Borders + shadows */ --c-border-subtle: var(--border-subtle); --c-border: var(--border); --c-shadow: 0 18px 46px rgba(0, 0, 0, .40); /* Accents (soft neon) */ --c-accent: #6fd4ff; --c-accent2: #7c88ff; /* Semantic aliases (legacy-safe) */ --bg: var(--c-bg); --panel: var(--c-surface-1); --panel2: var(--c-surface-2); --text: var(--c-text); --muted: var(--c-muted); --line: var(--c-border-subtle); --accent: var(--c-accent); --accent2: var(--c-accent2); --shadow: var(--c-shadow); --radius: 14px; --ease: cubic-bezier(.2, .8, .2, 1); --sidebar-w: 280px; /* Fonts (load via Google Fonts in index.html) */ --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --font-head: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; /* Glass / translucency */ --glass: rgba(255, 255, 255, .045); --glass2: rgba(255, 255, 255, .020); --glass-border: var(--c-border); /* Aurora / mist (used by body background + scrollbars) Keep these as rgba so you can tune glow intensity separately from accent hex. */ --mist-1: rgba(111, 212, 255, .08); --mist-2: rgba(124, 136, 255, .07); --mist-3: rgba(111, 212, 255, .05); --aurora-1: rgba(124, 136, 255, .07); --aurora-2: rgba(111, 212, 255, .06); --aurora-3: rgba(99, 102, 241, .05); /* Scrollbar aurora tint */ --scroll-thumb-1: rgba(111, 212, 255, .28); --scroll-thumb-2: rgba(124, 136, 255, .22); --scroll-thumb-1-hover: rgba(111, 212, 255, .40); --scroll-thumb-2-hover: rgba(124, 136, 255, .30); --scroll-thumb-1-active: rgba(111, 212, 255, .52); --scroll-thumb-2-active: rgba(124, 136, 255, .40); /* Surface recipes */ --surface-sidebar: rgba(20, 26, 43, .84); --surface-header: rgba(15, 18, 32, .76); --surface-card: rgba(255, 255, 255, .045); --surface-card-2: rgba(255, 255, 255, .030); /* Interactive states */ --hover-bg: var(--surface-card); --active-bg: rgba(111, 212, 255, .10); --active-border: rgba(111, 212, 255, .28); --active-shadow: 0 10px 26px rgba(0, 0, 0, .28); /* Brand dot glow */ --glow-1: rgba(111, 212, 255, .12); --glow-2: rgba(111, 212, 255, .20); --border-subtle: var(--c-border-subtle); --border: var(--c-border); /* Additional border weights */ --border-soft: var(--border-soft); --border-strong: rgba(255, 255, 255, .16); /* Focus rings */ --focus-outline: rgba(111, 212, 255, .55); --focus-ring: rgba(111, 212, 255, .10); /* ========================================================= Aurora controls (preset-ready) How to use: - Default is Drift (subtle motion). - To make it Static, add class on : class="aurora--static" - To make it Extra Calm, add: class="aurora--calm" ========================================================= */ /* Intensity (alpha scaling) */ --aurora-mist-strength: 1; /* 0.0–1.5 */ --aurora-glow-strength: 1; /* 0.0–1.5 */ /* Blur & saturation */ --aurora-mist-blur: 10px; --aurora-glow-blur: 22px; --aurora-mist-sat: 1.02; --aurora-glow-sat: 1.02; /* Motion (Drift preset) */ --aurora-mist-duration: 30s; /* slower = calmer */ --aurora-glow-duration: 46s; --aurora-mist-shift: 1.2%; /* max translate amplitude */ --aurora-glow-shift: 1.0%; --aurora-mist-scale-from: 1.02; --aurora-mist-scale-to: 1.04; --aurora-glow-scale-from: 1.03; --aurora-glow-scale-to: 1.05; } [hidden] { display: none !important; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; overflow-x: hidden; } /* Subtle animated “mist” background (C1) */ /* Subtle “mist” background (preset-controlled) */ body::before { content: ""; position: fixed; inset: -30%; z-index: -3; pointer-events: none; background: radial-gradient(900px 520px at 18% 12%, rgba(111, 212, 255, calc(.08 * var(--aurora-mist-strength))), transparent 62%), radial-gradient(820px 520px at 86% 18%, rgba(124, 136, 255, calc(.07 * var(--aurora-mist-strength))), transparent 64%), radial-gradient(980px 620px at 48% 110%, rgba(111, 212, 255, calc(.05 * var(--aurora-mist-strength))), transparent 62%); filter: blur(var(--aurora-mist-blur)) saturate(var(--aurora-mist-sat)); transform: translate3d(0, 0, 0); animation: bgDrift var(--aurora-mist-duration) var(--ease) infinite alternate; } /* Deeper, slower aurora layer (C1) */ /* Deeper aurora layer (preset-controlled) */ body::after { content: ""; position: fixed; inset: -35%; z-index: -4; pointer-events: none; background: radial-gradient(1100px 680px at 20% 25%, rgba(124, 136, 255, calc(.07 * var(--aurora-glow-strength))), transparent 64%), radial-gradient(1050px 720px at 85% 20%, rgba(111, 212, 255, calc(.06 * var(--aurora-glow-strength))), transparent 66%), radial-gradient(1200px 780px at 55% 110%, rgba(99, 102, 241, calc(.05 * var(--aurora-glow-strength))), transparent 64%); filter: blur(var(--aurora-glow-blur)) saturate(var(--aurora-glow-sat)); transform: translate3d(0, 0, 0); animation: auroraDrift var(--aurora-glow-duration) var(--ease) infinite alternate; } /* Fine grain overlay (very subtle) Keep BEHIND UI to avoid washing out small accents (like 10px dots) */ html::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2; opacity: .06; background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .14) 1px, transparent 1.6px); background-size: 6px 6px; mix-blend-mode: overlay; } @keyframes bgDrift { from { transform: translate3d(calc(-1 * var(--aurora-mist-shift)), calc(-.8 * var(--aurora-mist-shift)), 0) scale(var(--aurora-mist-scale-from)); } to { transform: translate3d(var(--aurora-mist-shift), calc(.9 * var(--aurora-mist-shift)), 0) scale(var(--aurora-mist-scale-to)); } } @keyframes auroraDrift { from { transform: translate3d(var(--aurora-glow-shift), calc(.8 * var(--aurora-glow-shift)), 0) scale(var(--aurora-glow-scale-from)); } to { transform: translate3d(calc(-1 * var(--aurora-glow-shift)), calc(-.9 * var(--aurora-glow-shift)), 0) scale(var(--aurora-glow-scale-to)); } } code { color: #d7d7d7; }