/* Theme system for the public stats page. Each theme is a class on . * Themes set --bg/--fg/--muted/--accent and a few decorative effects. The page * markup itself is theme-agnostic; it uses `.theme-surface`, `.theme-muted`, etc. */ /* Shared surface utilities — every theme defines the variables, these classes consume them. */ .theme-surface { background: var(--bg); color: var(--fg); font-family: var(--font-body, ui-monospace, monospace); } .theme-muted { color: var(--muted); } .theme-accent { color: var(--accent); } .theme-panel { background: var(--panel, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.12)); border-radius: 6px; padding: 1rem; } .theme-heading { font-family: var(--font-heading, 'VT323', ui-monospace, monospace); letter-spacing: 0.02em; } /* ── CRT green terminal ──────────────────────────────────────────── */ body.theme-crt_green { --bg: #0a0e0a; --fg: #39ff66; --muted: rgba(57,255,102,0.55); --accent: #b3ffc4; --panel: rgba(57,255,102,0.06); --border: rgba(57,255,102,0.25); --font-body: 'VT323', ui-monospace, monospace; --font-heading: 'VT323', ui-monospace, monospace; } body.theme-crt_green::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px); } /* ── Amber terminal ──────────────────────────────────────────────── */ body.theme-amber_terminal { --bg: #0d0805; --fg: #ffb347; --muted: rgba(255,179,71,0.55); --accent: #ffd58c; --panel: rgba(255,179,71,0.07); --border: rgba(255,179,71,0.25); --font-body: 'VT323', ui-monospace, monospace; --font-heading: 'VT323', ui-monospace, monospace; } /* ── Windows 95 beige ────────────────────────────────────────────── */ body.theme-win95 { --bg: #008080; /* the teal! */ --fg: #000; --muted: #555; --accent: #000080; --panel: #c0c0c0; --border: #000; --font-body: 'Pixelify Sans', 'Tahoma', ui-sans-serif; --font-heading: 'Pixelify Sans', 'Tahoma', ui-sans-serif; } body.theme-win95 .theme-panel { border: none; box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf; } /* ── Dark mode (modern, but tasteful) ────────────────────────────── */ body.theme-dark { --bg: #0b0d11; --fg: #e7e9ee; --muted: rgba(231,233,238,0.55); --accent: #7dd3fc; --panel: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.10); --font-body: ui-sans-serif, system-ui; --font-heading: ui-sans-serif, system-ui; } /* ── Geocities glitter ───────────────────────────────────────────── */ body.theme-glitter { --bg: #000; --fg: #f0f; --muted: #ff0; --accent: #0ff; --panel: rgba(255,0,255,0.10); --border: #ff0; --font-body: 'Comic Sans MS', 'Comic Sans', cursive; --font-heading: 'Comic Sans MS', 'Comic Sans', cursive; } body.theme-glitter::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(2px 2px at 10% 20%, #ff0, transparent), radial-gradient(1px 1px at 30% 40%, #0ff, transparent), radial-gradient(2px 2px at 60% 70%, #f0f, transparent), radial-gradient(1px 1px at 80% 30%, #fff, transparent), radial-gradient(2px 2px at 90% 90%, #ff0, transparent); animation: glitter 2s infinite alternate; } @keyframes glitter { from { opacity: 0.4; } to { opacity: 1; } } /* ── Plain modern (default for users who want stats without kitsch) ── */ body.theme-modern { --bg: #fff; --fg: #111; --muted: #666; --accent: #0a6; --panel: #f6f6f6; --border: #e3e3e3; --font-body: ui-sans-serif, system-ui; --font-heading: ui-sans-serif, system-ui; } /* Bring in the retro pixel fonts. CDN OK for public-facing stats. */ @import url('https://fonts.googleapis.com/css2?family=VT323&family=Pixelify+Sans&display=swap');