/** * themes.css — VideoPapi color schemes. * Ported from dev.thepigfarmer.net pattern. 8 themes total; default is 'pokepapi' * (the original purple/pink). Each theme overrides BOTH the editor.css variable * names and the tts inline variable names so a single picker re-skins both pages. * * Selector: . theme.js applies it from localStorage. */ /* === DEFAULT: pokepapi (purple + pink — the original) === */ :root, :root[data-theme="pokepapi"] { /* editor.css variable set */ --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-tertiary: #1a1a2e; --bg-card: #16162a; --bg-hover: #1e1e3a; --text-primary: #f0f0f5; --text-secondary: #a0a0c0; --text-muted: #6a6a8a; --accent-primary: #8b5cf6; --accent-secondary: #a78bfa; --accent-gradient: linear-gradient(135deg, #8b5cf6, #ec4899); --accent-glow: 0 0 20px rgba(139, 92, 246, 0.3); --success: #10b981; /* tts inline variable set (aliases) */ --bg: #0a0a0f; --surface: #12121a; --card: #16213e; --border: #334155; --primary: #8b5cf6; --accent: #ec4899; --text: #e2e8f0; --muted: #94a3b8; --danger: #ef4444; } /* === OBSIDIAN: cool deep blue === */ :root[data-theme="obsidian"] { --bg-primary: #06080f; --bg-secondary: #0c1320; --bg-tertiary: #131e35; --bg-card: #182238; --bg-hover: #1f2c45; --text-primary: #eaf0fa; --text-secondary: #b7c4dc; --text-muted: #7287a8; --accent-primary: #5b9eff; --accent-secondary: #8c5bff; --accent-gradient: linear-gradient(135deg, #5b9eff, #8c5bff); --accent-glow: 0 0 20px rgba(91, 158, 255, 0.32); --bg: #06080f; --surface: #0c1320; --card: #182238; --border: #2a3650; --primary: #5b9eff; --accent: #8c5bff; --text: #eaf0fa; --muted: #7287a8; } /* === EMERALD: forest green === */ :root[data-theme="emerald"] { --bg-primary: #07120d; --bg-secondary: #0b1e16; --bg-tertiary: #102b1f; --bg-card: #133a2a; --bg-hover: #18482f; --text-primary: #e6f4ec; --text-secondary: #b7d7c8; --text-muted: #6a917f; --accent-primary: #34d399; --accent-secondary: #10b981; --accent-gradient: linear-gradient(135deg, #34d399, #d5b05b); --accent-glow: 0 0 20px rgba(52, 211, 153, 0.32); --bg: #07120d; --surface: #0b1e16; --card: #133a2a; --border: #1f4f3b; --primary: #34d399; --accent: #d5b05b; --text: #e6f4ec; --muted: #6a917f; } /* === ROYAL: deep purple → magenta === */ :root[data-theme="royal"] { --bg-primary: #0e0816; --bg-secondary: #170d22; --bg-tertiary: #211131; --bg-card: #2a1740; --bg-hover: #321c4d; --text-primary: #f4eaff; --text-secondary: #d5c2e8; --text-muted: #8a719c; --accent-primary: #c99cff; --accent-secondary: #ff8bd1; --accent-gradient: linear-gradient(135deg, #c99cff, #ff8bd1); --accent-glow: 0 0 20px rgba(201, 156, 255, 0.32); --bg: #0e0816; --surface: #170d22; --card: #2a1740; --border: #3a2358; --primary: #c99cff; --accent: #ff8bd1; --text: #f4eaff; --muted: #8a719c; } /* === PACIFIC: cyan + teal === */ :root[data-theme="pacific"] { --bg-primary: #051219; --bg-secondary: #082030; --bg-tertiary: #0c2f44; --bg-card: #0e3b54; --bg-hover: #134866; --text-primary: #e6f4fb; --text-secondary: #b4d3df; --text-muted: #6a8a9c; --accent-primary: #5bd6ff; --accent-secondary: #47e0b0; --accent-gradient: linear-gradient(135deg, #5bd6ff, #47e0b0); --accent-glow: 0 0 20px rgba(91, 214, 255, 0.32); --bg: #051219; --surface: #082030; --card: #0e3b54; --border: #1a4d6b; --primary: #5bd6ff; --accent: #47e0b0; --text: #e6f4fb; --muted: #6a8a9c; } /* === CRIMSON: warm red === */ :root[data-theme="crimson"] { --bg-primary: #150607; --bg-secondary: #220a0c; --bg-tertiary: #321113; --bg-card: #3f1518; --bg-hover: #4d1a1d; --text-primary: #fbe9eb; --text-secondary: #e0b8b8; --text-muted: #9c6a6e; --accent-primary: #ff8a65; --accent-secondary: #ff3d6e; --accent-gradient: linear-gradient(135deg, #ff8a65, #ff3d6e); --accent-glow: 0 0 20px rgba(255, 138, 101, 0.32); --bg: #150607; --surface: #220a0c; --card: #3f1518; --border: #4d1f24; --primary: #ff8a65; --accent: #ff3d6e; --text: #fbe9eb; --muted: #9c6a6e; } /* === SLATE: monochrome === */ :root[data-theme="slate"] { --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1f252e; --bg-card: #21262d; --bg-hover: #2a313a; --text-primary: #e6edf3; --text-secondary: #b8c0cc; --text-muted: #7d8590; --accent-primary: #d0d7de; --accent-secondary: #7d8590; --accent-gradient: linear-gradient(135deg, #d0d7de, #7d8590); --accent-glow: 0 0 20px rgba(208, 215, 222, 0.22); --bg: #0d1117; --surface: #161b22; --card: #21262d; --border: #30363d; --primary: #d0d7de; --accent: #7d8590; --text: #e6edf3; --muted: #7d8590; } /* === HARVEST: warm orange (pigfarmer original) === */ :root[data-theme="harvest"] { --bg-primary: #130b08; --bg-secondary: #1f130e; --bg-tertiary: #2b1c15; --bg-card: #38241a; --bg-hover: #432d22; --text-primary: #fff8ed; --text-secondary: #f6ead5; --text-muted: #b09a7e; --accent-primary: #f2b35f; --accent-secondary: #d65f2d; --accent-gradient: linear-gradient(135deg, #f2b35f, #d65f2d); --accent-glow: 0 0 20px rgba(242, 179, 95, 0.32); --bg: #130b08; --surface: #1f130e; --card: #38241a; --border: #4a3326; --primary: #f2b35f; --accent: #d65f2d; --text: #fff8ed; --muted: #b09a7e; } /* === Picker UI (header dropdown) === */ .pp-theme-wrap { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-card, #16162a); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; padding: 6px 10px; color: var(--text-secondary, #a0a0c0); font-size: 0.85rem; } .pp-theme-wrap [data-lucide] { width: 1em; height: 1em; } .pp-theme-wrap select { background: transparent; color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 14px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 6px) center, calc(100% - 2px) center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .pp-theme-wrap select:focus { outline: 2px solid color-mix(in srgb, var(--accent-primary, #8b5cf6) 60%, transparent); outline-offset: 1px; } .pp-theme-wrap select option { background: var(--bg-card, #16162a); color: var(--text-primary, #f0f0f5); }