itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-21 22:15:40 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
d927ef2082e1151637386c644c8349156dee1231
psysonic/src/styles/theme.css
T
Psychotoxical d927ef2082 feat: v1.12.0 — Lyrics, 15 new themes, Last.fm stable, Crossfade stable 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-22 13:10:06 +01:00

4716 lines
148 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ─────────────────────────────────────────────────────────────
Psysonic – Design System
Catppuccin Mocha Color Palette + Inter Typography
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Nunito:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..700;1,300..700&family=Figtree:ital,wght@0,300..800;1,300..800&family=Manrope:wght@300..800&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Lexend:wght@300..700&display=swap');
/* ─── Catppuccin Mocha Variables ─── */
:root, [data-theme='mocha'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23bac2de%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-rosewater: #f5e0dc;
--ctp-flamingo: #f2cdcd;
--ctp-pink: #f5c2e7;
--ctp-mauve: #cba6f7;
--ctp-red: #f38ba8;
--ctp-maroon: #eba0ac;
--ctp-peach: #fab387;
--ctp-yellow: #f9e2af;
--ctp-green: #a6e3a1;
--ctp-teal: #94e2d5;
--ctp-sky: #89dceb;
--ctp-sapphire: #74c7ec;
--ctp-blue: #89b4fa;
--ctp-lavender: #b4befe;
--ctp-text: #cdd6f4;
--ctp-subtext1: #bac2de;
--ctp-subtext0: #a6adc8;
--ctp-overlay2: #9399b2;
--ctp-overlay1: #7f849c;
--ctp-overlay0: #6c7086;
--ctp-surface2: #585b70;
--ctp-surface1: #45475a;
--ctp-surface0: #313244;
--ctp-base: #1e1e2e;
--ctp-mantle: #181825;
--ctp-crust: #11111b;
/* Semantic tokens */
--bg-app: var(--ctp-base);
--bg-sidebar: var(--ctp-mantle);
--bg-card: var(--ctp-surface0);
--bg-hover: var(--ctp-surface1);
--bg-player: var(--ctp-crust);
--bg-glass: rgba(30, 30, 46, 0.75);
--accent: var(--ctp-mauve);
--accent-dim: rgba(203, 166, 247, 0.15);
--accent-glow: rgba(203, 166, 247, 0.3);
--text-primary: var(--ctp-text);
--text-secondary:var(--ctp-subtext1);
--text-muted: var(--ctp-overlay1);
--border: var(--ctp-surface1);
--border-subtle: var(--ctp-surface0);
--positive: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
}
/* ─── Catppuccin Macchiato Variables ─── */
[data-theme='macchiato'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b8c0e0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-rosewater: #f4dbd6;
--ctp-flamingo: #f0c6c6;
--ctp-pink: #f5bde6;
--ctp-mauve: #c6a0f6;
--ctp-red: #ed8796;
--ctp-maroon: #ee99a0;
--ctp-peach: #f5a97f;
--ctp-yellow: #eed49f;
--ctp-green: #a6da95;
--ctp-teal: #8bd5ca;
--ctp-sky: #91d7e3;
--ctp-sapphire: #7dc4e4;
--ctp-blue: #8aadf4;
--ctp-lavender: #b7bdf8;
--ctp-text: #cad3f5;
--ctp-subtext1: #b8c0e0;
--ctp-subtext0: #a5adcb;
--ctp-overlay2: #939ab7;
--ctp-overlay1: #8087a2;
--ctp-overlay0: #6e738d;
--ctp-surface2: #5b6078;
--ctp-surface1: #494d64;
--ctp-surface0: #363a4f;
--ctp-base: #24273a;
--ctp-mantle: #1e2030;
--ctp-crust: #181926;
--bg-app: var(--ctp-base);
--bg-sidebar: var(--ctp-mantle);
--bg-card: var(--ctp-surface0);
--bg-hover: var(--ctp-surface1);
--bg-player: var(--ctp-crust);
--bg-glass: rgba(36, 39, 58, 0.75);
--accent: var(--ctp-mauve);
--accent-dim: rgba(198, 160, 246, 0.15);
--accent-glow: rgba(198, 160, 246, 0.3);
--text-primary: var(--ctp-text);
--text-secondary:var(--ctp-subtext1);
--text-muted: var(--ctp-overlay1);
--border: var(--ctp-surface1);
--border-subtle: var(--ctp-surface0);
--positive: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
}
/* ─── Catppuccin Frappé Variables ─── */
[data-theme='frappe'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b5bfe2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-rosewater: #f2d5cf;
--ctp-flamingo: #eebebe;
--ctp-pink: #f4b8e4;
--ctp-mauve: #ca9ee6;
--ctp-red: #e78284;
--ctp-maroon: #ea999c;
--ctp-peach: #ef9f76;
--ctp-yellow: #e5c890;
--ctp-green: #a6d189;
--ctp-teal: #81c8be;
--ctp-sky: #99d1db;
--ctp-sapphire: #85c1dc;
--ctp-blue: #8caaee;
--ctp-lavender: #babbf1;
--ctp-text: #c6d0f5;
--ctp-subtext1: #b5bfe2;
--ctp-subtext0: #a5adce;
--ctp-overlay2: #949cbb;
--ctp-overlay1: #838ba7;
--ctp-overlay0: #737994;
--ctp-surface2: #626880;
--ctp-surface1: #51576d;
--ctp-surface0: #414559;
--ctp-base: #303446;
--ctp-mantle: #292c3c;
--ctp-crust: #232634;
--bg-app: var(--ctp-base);
--bg-sidebar: var(--ctp-mantle);
--bg-card: var(--ctp-surface0);
--bg-hover: var(--ctp-surface1);
--bg-player: var(--ctp-crust);
--bg-glass: rgba(48, 52, 70, 0.75);
--accent: var(--ctp-mauve);
--accent-dim: rgba(202, 158, 230, 0.15);
--accent-glow: rgba(202, 158, 230, 0.3);
--text-primary: var(--ctp-text);
--text-secondary:var(--ctp-subtext1);
--text-muted: var(--ctp-overlay1);
--border: var(--ctp-surface1);
--border-subtle: var(--ctp-surface0);
--positive: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
}
/* ─── Catppuccin Latte Variables (Light Theme) ─── */
[data-theme='latte'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235c5f77%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-rosewater: #dc8a78;
--ctp-flamingo: #dd7878;
--ctp-pink: #ea76cb;
--ctp-mauve: #8839ef;
--ctp-red: #d20f39;
--ctp-maroon: #e64553;
--ctp-peach: #fe640b;
--ctp-yellow: #df8e1d;
--ctp-green: #40a02b;
--ctp-teal: #179299;
--ctp-sky: #04a5e5;
--ctp-sapphire: #209fb5;
--ctp-blue: #1e66f5;
--ctp-lavender: #7287fd;
--ctp-text: #4c4f69;
--ctp-subtext1: #5c5f77;
--ctp-subtext0: #6c6f85;
--ctp-overlay2: #7c7f93;
--ctp-overlay1: #8c8fa1;
--ctp-overlay0: #9ca0b0;
--ctp-surface2: #acb0be;
--ctp-surface1: #bcc0cc;
--ctp-surface0: #ccd0da;
--ctp-base: #eff1f5;
--ctp-mantle: #e6e9ef;
--ctp-crust: #dce0e8;
/* Semantic tokens */
--bg-app: var(--ctp-base);
--bg-sidebar: var(--ctp-mantle);
--bg-card: var(--ctp-surface0);
--bg-hover: var(--ctp-surface1);
--bg-player: var(--ctp-crust);
--bg-glass: rgba(239, 241, 245, 0.75);
--accent: var(--ctp-mauve);
--accent-dim: rgba(136, 57, 239, 0.15);
--accent-glow: rgba(136, 57, 239, 0.3);
--text-primary: var(--ctp-text);
--text-secondary:var(--ctp-subtext1);
--text-muted: var(--ctp-overlay1);
--border: var(--ctp-surface1);
--border-subtle: var(--ctp-surface0);
--positive: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
}
/* ─── Nord – Polar Night (Dark) ─── */
[data-theme='nord'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* Polar Night */
--ctp-crust: #2e3440;
--ctp-mantle: #2e3440;
--ctp-base: #3b4252;
--ctp-surface0: #434c5e;
--ctp-surface1: #4c566a;
--ctp-surface2: #576070;
--ctp-overlay0: #7a8898;
--ctp-overlay1: #8894a4;
--ctp-overlay2: #96a2b0;
/* Snow Storm as text */
--ctp-text: #eceff4;
--ctp-subtext1: #e5e9f0;
--ctp-subtext0: #d8dee9;
/* Frost */
--ctp-teal: #8fbcbb;
--ctp-sky: #88c0d0;
--ctp-sapphire: #81a1c1;
--ctp-blue: #5e81ac;
--ctp-lavender: #81a1c1;
--ctp-mauve: #88c0d0;
/* Aurora */
--ctp-red: #bf616a;
--ctp-maroon: #d08770;
--ctp-peach: #d08770;
--ctp-yellow: #ebcb8b;
--ctp-green: #a3be8c;
--ctp-pink: #b48ead;
--ctp-flamingo: #bf616a;
--ctp-rosewater: #d08770;
--bg-app: #3b4252;
--bg-sidebar: #2e3440;
--bg-card: #434c5e;
--bg-hover: #4c566a;
--bg-player: #2e3440;
--bg-glass: rgba(59, 66, 82, 0.75);
--accent: #88c0d0;
--accent-dim: rgba(136, 192, 208, 0.15);
--accent-glow: rgba(136, 192, 208, 0.3);
--text-primary: #eceff4;
--text-secondary:#e5e9f0;
--text-muted: #8894a4;
--border: #434c5e;
--border-subtle: #3b4252;
--border-dropdown: #576070;
--shadow-dropdown: rgba(0, 0, 0, 0.55);
--positive: #a3be8c;
--warning: #ebcb8b;
--danger: #bf616a;
}
/* ─── Nord – Snow Storm (Light) ─── */
[data-theme='nord-snowstorm'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233b4252%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* Snow Storm as backgrounds */
--ctp-crust: #d8dee9;
--ctp-mantle: #e5e9f0;
--ctp-base: #eceff4;
--ctp-surface0: #d8dee9;
--ctp-surface1: #c8d0de;
--ctp-surface2: #b8c2d0;
--ctp-overlay0: #7a8898;
--ctp-overlay1: #636e7e;
--ctp-overlay2: #4c566a;
/* Polar Night as text */
--ctp-text: #2e3440;
--ctp-subtext1: #3b4252;
--ctp-subtext0: #434c5e;
/* Frost */
--ctp-teal: #8fbcbb;
--ctp-sky: #88c0d0;
--ctp-sapphire: #81a1c1;
--ctp-blue: #5e81ac;
--ctp-lavender: #81a1c1;
--ctp-mauve: #5e81ac;
/* Aurora */
--ctp-red: #bf616a;
--ctp-maroon: #d08770;
--ctp-peach: #d08770;
--ctp-yellow: #9a7200;
--ctp-green: #4e7c3f;
--ctp-pink: #7e5d8c;
--ctp-flamingo: #bf616a;
--ctp-rosewater: #d08770;
--bg-app: #eceff4;
--bg-sidebar: #e5e9f0;
--bg-card: #d8dee9;
--bg-hover: #c8d0de;
--bg-player: #e5e9f0;
--bg-glass: rgba(236, 239, 244, 0.80);
--accent: #5e81ac;
--accent-dim: rgba(94, 129, 172, 0.15);
--accent-glow: rgba(94, 129, 172, 0.3);
--text-primary: #2e3440;
--text-secondary:#3b4252;
--text-muted: #636e7e;
--border: #c8d0de;
--border-subtle: #d8dee9;
--positive: #4e7c3f;
--warning: #9a7200;
--danger: #bf616a;
}
/* ─── Nord – Frost (Deep Ocean Blue) ─── */
[data-theme='nord-frost'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* Deep ocean blue – Frost-inspired dark backgrounds */
--ctp-crust: #1a2535;
--ctp-mantle: #1d2b3a;
--ctp-base: #253545;
--ctp-surface0: #2d3f52;
--ctp-surface1: #354a60;
--ctp-surface2: #3d546e;
--ctp-overlay0: #6888a4;
--ctp-overlay1: #7898b4;
--ctp-overlay2: #88a8c4;
/* Snow Storm as text */
--ctp-text: #eceff4;
--ctp-subtext1: #e5e9f0;
--ctp-subtext0: #d8dee9;
/* Frost accent */
--ctp-teal: #8fbcbb;
--ctp-sky: #88c0d0;
--ctp-sapphire: #81a1c1;
--ctp-blue: #5e81ac;
--ctp-lavender: #8fbcbb;
--ctp-mauve: #88c0d0;
/* Aurora */
--ctp-red: #bf616a;
--ctp-maroon: #d08770;
--ctp-peach: #d08770;
--ctp-yellow: #ebcb8b;
--ctp-green: #a3be8c;
--ctp-pink: #b48ead;
--ctp-flamingo: #bf616a;
--ctp-rosewater: #d08770;
--bg-app: #253545;
--bg-sidebar: #1d2b3a;
--bg-card: #2d3f52;
--bg-hover: #354a60;
--bg-player: #1a2535;
--bg-glass: rgba(37, 53, 69, 0.75);
--accent: #88c0d0;
--accent-dim: rgba(136, 192, 208, 0.15);
--accent-glow: rgba(136, 192, 208, 0.35);
--text-primary: #eceff4;
--text-secondary:#e5e9f0;
--text-muted: #7898b4;
--border: #2d3f52;
--border-subtle: #253545;
--border-dropdown: #3d546e;
--shadow-dropdown: rgba(0, 0, 0, 0.6);
--positive: #a3be8c;
--warning: #ebcb8b;
--danger: #bf616a;
}
/* ─── Nord – Aurora (Dark + Aurora Purple) ─── */
[data-theme='nord-aurora'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* Polar Night base */
--ctp-crust: #2e3440;
--ctp-mantle: #2e3440;
--ctp-base: #3b4252;
--ctp-surface0: #434c5e;
--ctp-surface1: #4c566a;
--ctp-surface2: #576070;
--ctp-overlay0: #7a8898;
--ctp-overlay1: #8894a4;
--ctp-overlay2: #96a2b0;
/* Snow Storm as text */
--ctp-text: #eceff4;
--ctp-subtext1: #e5e9f0;
--ctp-subtext0: #d8dee9;
/* Aurora accents — purple as mauve/lavender for button gradients */
--ctp-mauve: #b48ead;
--ctp-lavender: #a3be8c;
--ctp-pink: #b48ead;
--ctp-teal: #8fbcbb;
--ctp-sky: #88c0d0;
--ctp-sapphire: #81a1c1;
--ctp-blue: #5e81ac;
--ctp-red: #bf616a;
--ctp-maroon: #d08770;
--ctp-peach: #d08770;
--ctp-yellow: #ebcb8b;
--ctp-green: #a3be8c;
--ctp-flamingo: #bf616a;
--ctp-rosewater: #d08770;
--bg-app: #3b4252;
--bg-sidebar: #2e3440;
--bg-card: #434c5e;
--bg-hover: #4c566a;
--bg-player: #2e3440;
--bg-glass: rgba(59, 66, 82, 0.75);
--accent: #b48ead;
--accent-dim: rgba(180, 142, 173, 0.15);
--accent-glow: rgba(180, 142, 173, 0.3);
--text-primary: #eceff4;
--text-secondary:#e5e9f0;
--text-muted: #8894a4;
--border: #434c5e;
--border-subtle: #3b4252;
--border-dropdown: #576070;
--shadow-dropdown: rgba(0, 0, 0, 0.55);
--positive: #a3be8c;
--warning: #ebcb8b;
--danger: #bf616a;
}
/* ─── Poison ─── */
[data-theme='poison'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231bd655%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette — charcoal grays + phosphor green ── */
--ctp-crust: #0e0e0e;
--ctp-mantle: #161616;
--ctp-base: #1f1f1f;
--ctp-surface0: #282828;
--ctp-surface1: #323232;
--ctp-surface2: #3e3e3e;
--ctp-overlay0: #525252;
--ctp-overlay1: #686868;
--ctp-overlay2: #848484;
--ctp-text: #d0d0cc;
--ctp-subtext1: #a8a8a4;
--ctp-subtext0: #787874;
/* Phosphor green accent — the Winamp LED display color */
--ctp-mauve: #1bd655;
--ctp-lavender: #28e860;
--ctp-green: #1bd655;
--ctp-teal: #1ab8a8;
--ctp-sky: #58a8e0;
--ctp-blue: #4888d0;
--ctp-sapphire: #3870b8;
--ctp-pink: #c86888;
--ctp-flamingo: #b85858;
--ctp-rosewater: #c88080;
--ctp-yellow: #c8a830;
--ctp-peach: #c07838;
--ctp-maroon: #a03030;
--ctp-red: #c03030;
/* ── Semantic tokens ── */
--bg-app: #1f1f1f;
--bg-sidebar: #161616;
--bg-card: #282828;
--bg-hover: #323232;
--bg-player: #0e0e0e;
--bg-glass: rgba(22, 22, 22, 0.90);
--accent: #1bd655;
--accent-dim: rgba(27, 214, 85, 0.12);
--accent-glow: rgba(27, 214, 85, 0.35);
--text-primary: #d0d0cc;
--text-secondary:#a8a8a4;
--text-muted: #686866;
--border: #3a3a38;
--border-subtle: #282826;
--positive: #1bd655;
--warning: #c8a830;
--danger: #c03030;
}
/* ── Winamp: LED display glow + tactile buttons ── */
[data-theme='poison'] .player-track-name {
text-shadow: 0 0 8px rgba(27, 214, 85, 0.7), 0 0 2px rgba(27, 214, 85, 0.4);
color: #1bd655;
}
[data-theme='poison'] .player-track-artist {
color: #1bd655;
opacity: 0.7;
}
[data-theme='poison'] .btn {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme='poison'] .player-btn,
[data-theme='poison'] .player-btn-primary {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* ─── Classic Winamp — Winamp 2.x Base Skin ─── */
[data-theme='wnamp'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c8c8d0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #000000;
--ctp-mantle: #1e1e28;
--ctp-base: #2b2b3a;
--ctp-surface0: #353545;
--ctp-surface1: #404055;
--ctp-surface2: #4e4e65;
--ctp-overlay0: #5a5a75;
--ctp-overlay1: #6e6e88;
--ctp-overlay2: #8a8a96;
--ctp-text: #c8c8d0;
--ctp-subtext1: #a0a0ac;
--ctp-subtext0: #8a8a96;
/* Winamp orange accent + iconic green glow */
--ctp-mauve: #d4cc46;
--ctp-lavender: #e0d860;
--ctp-green: #00ff00;
--ctp-teal: #00cc88;
--ctp-sky: #5ab8e0;
--ctp-blue: #4898d0;
--ctp-sapphire: #3878b8;
--ctp-pink: #c06888;
--ctp-flamingo: #b85858;
--ctp-rosewater: #c88080;
--ctp-yellow: #e8c050;
--ctp-peach: #d08840;
--ctp-maroon: #a03030;
--ctp-red: #c03030;
/* ── Semantic tokens ── */
--bg-app: #2b2b3a;
--bg-sidebar: #1e1e28;
--bg-card: #353545;
--bg-hover: #404055;
--bg-player: #000000;
--bg-glass: rgba(43, 43, 58, 0.90);
--accent: #d4cc46;
--accent-dim: rgba(212, 204, 70, 0.15);
--accent-glow: rgba(212, 204, 70, 0.35);
--volume-accent: #de9b35;
--text-primary: #c8c8d0;
--text-secondary:#a0a0ac;
--text-muted: #6e6e88;
--border: #5a5a75;
--border-subtle: #353545;
--positive: #00cc66;
--warning: #d4cc46;
--danger: #c03030;
}
/* ── Classic Winamp: LCD display + bevel buttons ── */
[data-theme='wnamp'] .connection-type {
color: var(--text-primary);
}
[data-theme='wnamp'] .connection-server {
color: var(--text-secondary);
}
[data-theme='wnamp'] .player-track-name {
color: #00ff00;
text-shadow: 0 0 6px rgba(0, 255, 0, 0.65), 0 0 2px rgba(0, 255, 0, 0.4);
font-family: 'Courier New', 'Lucida Console', monospace;
letter-spacing: 0.04em;
}
[data-theme='wnamp'] .player-track-artist {
color: #00cc00;
font-family: 'Courier New', 'Lucida Console', monospace;
opacity: 0.85;
}
[data-theme='wnamp'] .btn {
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme='wnamp'] .player-btn,
[data-theme='wnamp'] .player-btn-primary {
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(0,0,0,0.55), 0 2px 5px rgba(0,0,0,0.5);
}
/* ─── Nucleo — Classic HiFi / Winamp Brass ─── */
[data-theme='nucleo'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238c7356%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #c8a458;
--ctp-mantle: #dfc08f;
--ctp-base: #e9d3ac;
--ctp-surface0: #eedbb8;
--ctp-surface1: #f5e4c3;
--ctp-surface2: #f9ecd4;
--ctp-overlay0: #b09060;
--ctp-overlay1: #987848;
--ctp-overlay2: #805c30;
--ctp-text: #2c1e10;
--ctp-subtext1: #5a3e20;
--ctp-subtext0: #8c7356;
/* Accents — burnished brass + warm tones */
--ctp-mauve: #7a5218; /* dark burnished brass — primary accent */
--ctp-lavender: #9a6a28; /* mid brass — hover/lighter variant */
--ctp-pink: #c06880;
--ctp-flamingo: #c06050;
--ctp-rosewater: #d08070;
--ctp-blue: #5878a8; /* muted steel blue */
--ctp-sapphire: #4868a0;
--ctp-sky: #6898b8;
--ctp-teal: #487878;
--ctp-green: #587838; /* muted olive */
--ctp-yellow: #a88020; /* dark burnished gold */
--ctp-peach: #b87040;
--ctp-maroon: #903030;
--ctp-red: #a03828;
/* ── Semantic tokens ── */
--bg-app: #f5e4c3;
--bg-sidebar: #e9d3ac;
--bg-card: #eedbb8;
--bg-hover: #e3cc9e;
--bg-player: #dfc08f;
--bg-glass: rgba(245, 228, 195, 0.90);
--accent: #7a5218;
--accent-dim: rgba(122, 82, 24, 0.15);
--accent-glow: rgba(122, 82, 24, 0.30);
--text-primary: #2c1e10;
--text-secondary:#5a3e20;
--text-muted: #8c7356;
--border: #b89a69;
--border-subtle: #dfc08f;
--positive: #587838;
--warning: #a88020;
--danger: #a03828;
}
/* ── Nucleo: skeuomorphic detail layer ── */
[data-theme='nucleo'] .sidebar {
background-image: repeating-linear-gradient(
90deg,
rgba(255,255,255,0.06) 0px,
rgba(255,255,255,0.06) 1px,
transparent 1px,
transparent 5px
);
}
[data-theme='nucleo'] .player-bar {
background-image: repeating-linear-gradient(
90deg,
rgba(255,255,255,0.05) 0px,
rgba(255,255,255,0.05) 1px,
transparent 1px,
transparent 5px
);
}
[data-theme='nucleo'] .player-track-name {
text-shadow: 0 0 10px rgba(255, 244, 219, 0.75), 0 0 2px rgba(255, 244, 219, 0.4);
}
[data-theme='nucleo'] .btn {
box-shadow: 0 2px 4px rgba(44, 30, 16, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
[data-theme='nucleo'] .btn-surface {
background: #c8a860;
color: #2c1e10;
}
[data-theme='nucleo'] .btn-surface:hover { background: #b89448; }
[data-theme='nucleo'] .btn-ghost:hover {
background: #c8a860;
color: #2c1e10;
}
[data-theme='nucleo'] .player-btn,
[data-theme='nucleo'] .player-btn-primary {
box-shadow: 0 2px 5px rgba(44, 30, 16, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* ─── Psychowave — Synthwave / Retrowave ─── */
[data-theme='psychowave'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b09ee0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #0d0c1a;
--ctp-mantle: #110f22;
--ctp-base: #161428;
--ctp-surface0: #1f1c38;
--ctp-surface1: #2a2750;
--ctp-surface2: #383468;
--ctp-overlay0: #4a4580;
--ctp-overlay1: #6460a8;
--ctp-overlay2: #8078c8;
/* Text */
--ctp-text: #e6e0f6;
--ctp-subtext1: #b09ee0;
--ctp-subtext0: #8878c0;
/* Accents — muted synthwave palette */
--ctp-mauve: #a06ae0; /* soft violet — primary accent */
--ctp-lavender: #7878d8; /* muted indigo — gradient end */
--ctp-pink: #c060a8; /* dusty rose */
--ctp-flamingo: #c07090;
--ctp-rosewater: #c89090;
--ctp-blue: #58a8e8; /* steel blue */
--ctp-sapphire: #4880c8;
--ctp-sky: #60c0d8;
--ctp-teal: #40a8a8;
--ctp-green: #58c878; /* soft mint green */
--ctp-yellow: #c8a848; /* muted gold */
--ctp-peach: #c87848;
--ctp-maroon: #c05868;
--ctp-red: #b04060;
/* ── Semantic tokens ── */
--bg-app: #161428;
--bg-sidebar: #110f22;
--bg-card: #1f1c38;
--bg-hover: #2a2750;
--bg-player: #0d0c1a;
--bg-glass: rgba(22, 20, 40, 0.85);
--accent: #a06ae0;
--accent-dim: rgba(160, 106, 224, 0.12);
--accent-glow: rgba(160, 106, 224, 0.30);
--text-primary: #e6e0f6;
--text-secondary:#b09ee0;
--text-muted: #706898;
--border: #383468;
--border-subtle: #1f1c38;
--positive: #58c878;
--warning: #c8a848;
--danger: #b04060;
}
/* ─── Gruvbox Dark Hard ─── */
[data-theme='gruvbox-dark-hard'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #1d2021;
--ctp-mantle: #1d2021;
--ctp-base: #282828;
--ctp-surface0: #3c3836;
--ctp-surface1: #504945;
--ctp-surface2: #665c54;
--ctp-overlay0: #7c6f64;
--ctp-overlay1: #928374;
--ctp-overlay2: #a89984;
--ctp-text: #ebdbb2;
--ctp-subtext1: #d5c4a1;
--ctp-subtext0: #bdae93;
--ctp-mauve: #d3869b;
--ctp-lavender: #d3869b;
--ctp-pink: #d3869b;
--ctp-flamingo: #fb4934;
--ctp-rosewater: #fb4934;
--ctp-blue: #83a598;
--ctp-sapphire: #83a598;
--ctp-sky: #8ec07c;
--ctp-teal: #8ec07c;
--ctp-green: #b8bb26;
--ctp-yellow: #fabd2f;
--ctp-peach: #fe8019;
--ctp-maroon: #fb4934;
--ctp-red: #cc241d;
--bg-app: #1d2021;
--bg-sidebar: #141617;
--bg-card: #3c3836;
--bg-hover: #504945;
--bg-player: #1d2021;
--bg-glass: rgba(29, 32, 33, 0.82);
--accent: #fabd2f;
--accent-dim: rgba(250, 189, 47, 0.15);
--accent-glow: rgba(250, 189, 47, 0.3);
--text-primary: #ebdbb2;
--text-secondary:#d5c4a1;
--text-muted: #928374;
--border: #504945;
--border-subtle: #3c3836;
--border-dropdown: #665c54;
--shadow-dropdown: rgba(0, 0, 0, 0.6);
--positive: #b8bb26;
--warning: #fabd2f;
--danger: #fb4934;
}
/* ─── Gruvbox Dark Medium ─── */
[data-theme='gruvbox-dark-medium'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #1d2021;
--ctp-mantle: #1d2021;
--ctp-base: #282828;
--ctp-surface0: #3c3836;
--ctp-surface1: #504945;
--ctp-surface2: #665c54;
--ctp-overlay0: #7c6f64;
--ctp-overlay1: #928374;
--ctp-overlay2: #a89984;
--ctp-text: #ebdbb2;
--ctp-subtext1: #d5c4a1;
--ctp-subtext0: #bdae93;
--ctp-mauve: #d3869b;
--ctp-lavender: #d3869b;
--ctp-pink: #d3869b;
--ctp-flamingo: #fb4934;
--ctp-rosewater: #fb4934;
--ctp-blue: #83a598;
--ctp-sapphire: #83a598;
--ctp-sky: #8ec07c;
--ctp-teal: #8ec07c;
--ctp-green: #b8bb26;
--ctp-yellow: #fabd2f;
--ctp-peach: #fe8019;
--ctp-maroon: #fb4934;
--ctp-red: #cc241d;
--bg-app: #282828;
--bg-sidebar: #1d2021;
--bg-card: #3c3836;
--bg-hover: #504945;
--bg-player: #1d2021;
--bg-glass: rgba(40, 40, 40, 0.82);
--accent: #fabd2f;
--accent-dim: rgba(250, 189, 47, 0.15);
--accent-glow: rgba(250, 189, 47, 0.3);
--text-primary: #ebdbb2;
--text-secondary:#d5c4a1;
--text-muted: #928374;
--border: #504945;
--border-subtle: #3c3836;
--border-dropdown: #665c54;
--shadow-dropdown: rgba(0, 0, 0, 0.55);
--positive: #b8bb26;
--warning: #fabd2f;
--danger: #fb4934;
}
/* ─── Gruvbox Dark Soft ─── */
[data-theme='gruvbox-dark-soft'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #1d2021;
--ctp-mantle: #282828;
--ctp-base: #32302f;
--ctp-surface0: #3c3836;
--ctp-surface1: #504945;
--ctp-surface2: #665c54;
--ctp-overlay0: #7c6f64;
--ctp-overlay1: #928374;
--ctp-overlay2: #a89984;
--ctp-text: #ebdbb2;
--ctp-subtext1: #d5c4a1;
--ctp-subtext0: #bdae93;
--ctp-mauve: #d3869b;
--ctp-lavender: #d3869b;
--ctp-pink: #d3869b;
--ctp-flamingo: #fb4934;
--ctp-rosewater: #fb4934;
--ctp-blue: #83a598;
--ctp-sapphire: #83a598;
--ctp-sky: #8ec07c;
--ctp-teal: #8ec07c;
--ctp-green: #b8bb26;
--ctp-yellow: #fabd2f;
--ctp-peach: #fe8019;
--ctp-maroon: #fb4934;
--ctp-red: #cc241d;
--bg-app: #32302f;
--bg-sidebar: #282828;
--bg-card: #45403d;
--bg-hover: #504945;
--bg-player: #282828;
--bg-glass: rgba(50, 48, 47, 0.82);
--accent: #fabd2f;
--accent-dim: rgba(250, 189, 47, 0.15);
--accent-glow: rgba(250, 189, 47, 0.3);
--text-primary: #ebdbb2;
--text-secondary:#d5c4a1;
--text-muted: #928374;
--border: #504945;
--border-subtle: #3c3836;
--border-dropdown: #665c54;
--shadow-dropdown: rgba(0, 0, 0, 0.5);
--positive: #b8bb26;
--warning: #fabd2f;
--danger: #fb4934;
}
/* ─── Gruvbox Light Hard ─── */
[data-theme='gruvbox-light-hard'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #ebdbb2;
--ctp-mantle: #f2e5bc;
--ctp-base: #f9f5d7;
--ctp-surface0: #f2e5bc;
--ctp-surface1: #ebdbb2;
--ctp-surface2: #d5c4a1;
--ctp-overlay0: #bdae93;
--ctp-overlay1: #a89984;
--ctp-overlay2: #928374;
--ctp-text: #3c3836;
--ctp-subtext1: #504945;
--ctp-subtext0: #665c54;
--ctp-mauve: #8f3f71;
--ctp-lavender: #8f3f71;
--ctp-pink: #8f3f71;
--ctp-flamingo: #9d0006;
--ctp-rosewater: #cc241d;
--ctp-blue: #076678;
--ctp-sapphire: #076678;
--ctp-sky: #427b58;
--ctp-teal: #427b58;
--ctp-green: #79740e;
--ctp-yellow: #b57614;
--ctp-peach: #af3a03;
--ctp-maroon: #9d0006;
--ctp-red: #cc241d;
--bg-app: #f9f5d7;
--bg-sidebar: #f2e5bc;
--bg-card: #f2e5bc;
--bg-hover: #ebdbb2;
--bg-player: #f2e5bc;
--bg-glass: rgba(249, 245, 215, 0.9);
--accent: #b57614;
--accent-dim: rgba(181, 118, 20, 0.15);
--accent-glow: rgba(181, 118, 20, 0.25);
--text-primary: #3c3836;
--text-secondary:#504945;
--text-muted: #7c6f64;
--border: #d5c4a1;
--border-subtle: #ebdbb2;
--positive: #79740e;
--warning: #b57614;
--danger: #9d0006;
}
/* ─── Gruvbox Light Medium ─── */
[data-theme='gruvbox-light-medium'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #ebdbb2;
--ctp-mantle: #f2e5bc;
--ctp-base: #fbf1c7;
--ctp-surface0: #f2e5bc;
--ctp-surface1: #ebdbb2;
--ctp-surface2: #d5c4a1;
--ctp-overlay0: #bdae93;
--ctp-overlay1: #a89984;
--ctp-overlay2: #928374;
--ctp-text: #3c3836;
--ctp-subtext1: #504945;
--ctp-subtext0: #665c54;
--ctp-mauve: #8f3f71;
--ctp-lavender: #8f3f71;
--ctp-pink: #8f3f71;
--ctp-flamingo: #9d0006;
--ctp-rosewater: #cc241d;
--ctp-blue: #076678;
--ctp-sapphire: #076678;
--ctp-sky: #427b58;
--ctp-teal: #427b58;
--ctp-green: #79740e;
--ctp-yellow: #b57614;
--ctp-peach: #af3a03;
--ctp-maroon: #9d0006;
--ctp-red: #cc241d;
--bg-app: #fbf1c7;
--bg-sidebar: #f2e5bc;
--bg-card: #f2e5bc;
--bg-hover: #ebdbb2;
--bg-player: #f2e5bc;
--bg-glass: rgba(251, 241, 199, 0.9);
--accent: #b57614;
--accent-dim: rgba(181, 118, 20, 0.15);
--accent-glow: rgba(181, 118, 20, 0.25);
--text-primary: #3c3836;
--text-secondary:#504945;
--text-muted: #7c6f64;
--border: #d5c4a1;
--border-subtle: #ebdbb2;
--positive: #79740e;
--warning: #b57614;
--danger: #9d0006;
}
/* ─── Gruvbox Light Soft ─── */
[data-theme='gruvbox-light-soft'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #ebdbb2;
--ctp-mantle: #f2e5bc;
--ctp-base: #f2e5bc;
--ctp-surface0: #ebdbb2;
--ctp-surface1: #d5c4a1;
--ctp-surface2: #bdae93;
--ctp-overlay0: #a89984;
--ctp-overlay1: #928374;
--ctp-overlay2: #7c6f64;
--ctp-text: #3c3836;
--ctp-subtext1: #504945;
--ctp-subtext0: #665c54;
--ctp-mauve: #8f3f71;
--ctp-lavender: #8f3f71;
--ctp-pink: #8f3f71;
--ctp-flamingo: #9d0006;
--ctp-rosewater: #cc241d;
--ctp-blue: #076678;
--ctp-sapphire: #076678;
--ctp-sky: #427b58;
--ctp-teal: #427b58;
--ctp-green: #79740e;
--ctp-yellow: #b57614;
--ctp-peach: #af3a03;
--ctp-maroon: #9d0006;
--ctp-red: #cc241d;
--bg-app: #f2e5bc;
--bg-sidebar: #ebdbb2;
--bg-card: #ebdbb2;
--bg-hover: #d5c4a1;
--bg-player: #ebdbb2;
--bg-glass: rgba(242, 229, 188, 0.9);
--accent: #b57614;
--accent-dim: rgba(181, 118, 20, 0.15);
--accent-glow: rgba(181, 118, 20, 0.25);
--text-primary: #3c3836;
--text-secondary:#504945;
--text-muted: #7c6f64;
--border: #d5c4a1;
--border-subtle: #ebdbb2;
--positive: #79740e;
--warning: #b57614;
--danger: #9d0006;
}
/* ─── Lambda 17 ─── */
[data-theme='lambda-17'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff9d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #0a0b0c;
--ctp-mantle: #101214;
--ctp-base: #14171a;
--ctp-surface0: #1c1f22;
--ctp-surface1: #25292d;
--ctp-surface2: #2d3237;
--ctp-overlay0: #4a4f54;
--ctp-overlay1: #6b7279;
--ctp-overlay2: #8c959d;
--ctp-text: #ffb000;
--ctp-subtext1: #e09000;
--ctp-subtext0: #a0a5a9;
--ctp-mauve: #ff9d00;
--ctp-lavender: #ffb84d;
--ctp-pink: #ff5555;
--ctp-flamingo: #ff6e6e;
--ctp-rosewater:#ffb000;
--ctp-green: #50fa7b;
--ctp-teal: #33cccc;
--ctp-sky: #8be9fd;
--ctp-blue: #33cccc;
--ctp-sapphire: #33cccc;
--ctp-yellow: #f1fa8c;
--ctp-peach: #ffb000;
--ctp-maroon: #ff5555;
--ctp-red: #ff5555;
--bg-app: #14171a;
--bg-sidebar: #101214;
--bg-card: #1c1f22;
--bg-hover: rgba(255, 157, 0, 0.1);
--bg-player: #0a0b0c;
--bg-glass: rgba(20, 23, 26, 0.85);
--accent: #ff9d00;
--accent-dim: rgba(255, 157, 0, 0.15);
--accent-glow: rgba(255, 157, 0, 0.4);
--text-primary: #ffb000;
--text-secondary:#e09000;
--text-muted: #6b7279;
--border: #2d3237;
--border-subtle: #1c1f22;
--border-dropdown: #2d3237;
--shadow-dropdown: rgba(0, 0, 0, 0.7);
--positive: #50fa7b;
--warning: #f1fa8c;
--danger: #ff5555;
--radius-sm: 0px;
--radius-md: 2px;
--radius-lg: 4px;
}
[data-theme='lambda-17'] .app-shell {
background-image:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%),
radial-gradient(rgba(255, 157, 0, 0.05) 0%, transparent 80%);
background-size: 100% 4px, 100% 100%;
}
[data-theme='lambda-17'] .sidebar {
border-right: 1px solid var(--accent);
box-shadow: inset -10px 0 20px -15px var(--accent-glow);
}
[data-theme='lambda-17'] .player-bar {
border-top: 2px solid var(--accent);
}
[data-theme='lambda-17'] .player-track-name {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
text-shadow: 0 0 8px var(--accent-glow);
letter-spacing: 0.5px;
}
[data-theme='lambda-17'] .nav-link.active {
background: var(--accent-dim);
border-left: 3px solid var(--accent);
color: var(--accent);
}
/* ─── Azerothian Gold ─── */
[data-theme='azerothian-gold'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c19e67%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #0a0a0a;
--ctp-mantle: #121212;
--ctp-base: #1a1a1a;
--ctp-surface0: #25221e;
--ctp-surface1: #363028;
--ctp-surface2: #4d4538;
--ctp-overlay0: #6b6254;
--ctp-overlay1: #8c8170;
--ctp-overlay2: #a69884;
--ctp-text: #e6dbcc;
--ctp-subtext1: #c19e67;
--ctp-subtext0: #a68a56;
--ctp-mauve: #f5d45c;
--ctp-lavender: #ffe485;
--ctp-pink: #e74c3c;
--ctp-flamingo: #e74c3c;
--ctp-rosewater:#e6dbcc;
--ctp-green: #2ecc71;
--ctp-teal: #3498db;
--ctp-sky: #3498db;
--ctp-blue: #3498db;
--ctp-sapphire: #3498db;
--ctp-yellow: #f1c40f;
--ctp-peach: #c19e67;
--ctp-maroon: #e74c3c;
--ctp-red: #e74c3c;
--bg-app: #1a1a1a;
--bg-sidebar: #121212;
--bg-card: #25221e;
--bg-hover: rgba(193, 158, 103, 0.1);
--bg-player: #0a0a0a;
--bg-glass: rgba(18, 18, 18, 0.85);
--accent: #c19e67;
--accent-dim: rgba(193, 158, 103, 0.15);
--accent-glow: rgba(193, 158, 103, 0.4);
--text-primary: #e6dbcc;
--text-secondary:#c19e67;
--text-muted: #8c8170;
--border: #4d4538;
--border-subtle: #363028;
--border-dropdown: #4d4538;
--shadow-dropdown: rgba(0, 0, 0, 0.7);
--positive: #2ecc71;
--warning: #f1c40f;
--danger: #e74c3c;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
[data-theme='azerothian-gold'] .sidebar {
border-right: 2px solid var(--border);
background: linear-gradient(180deg, #161616 0%, #0d0d0d 100%);
}
[data-theme='azerothian-gold'] .player-bar {
border-top: 2px solid var(--border);
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
}
[data-theme='azerothian-gold'] .nav-link.active {
background: linear-gradient(90deg, rgba(193, 158, 103, 0.15) 0%, transparent 100%);
color: var(--ctp-mauve) !important;
text-shadow: 0 0 8px rgba(245, 212, 92, 0.4);
}
[data-theme='azerothian-gold'] .nav-link.active::before {
background-color: var(--ctp-mauve);
box-shadow: 0 0 10px var(--ctp-mauve);
}
[data-theme='azerothian-gold'] .player-track-name {
color: var(--ctp-mauve);
font-weight: 700;
}
/* ─── Ascalon ─── */
[data-theme='ascalon'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a68d5d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #0f0d0b;
--ctp-mantle: #151310;
--ctp-base: #1c1a17;
--ctp-surface0: #2a2722;
--ctp-surface1: #38342d;
--ctp-surface2: #4a453c;
--ctp-overlay0: #6b6355;
--ctp-overlay1: #8a7f6d;
--ctp-overlay2: #a69882;
--ctp-text: #f0ead6;
--ctp-subtext1: #d4cbb3;
--ctp-subtext0: #b8af98;
--ctp-mauve: #d4af37;
--ctp-lavender: #e5c158;
--ctp-pink: #b22222;
--ctp-flamingo: #cd853f;
--ctp-rosewater:#f0ead6;
--ctp-green: #6b8e23;
--ctp-teal: #4d5d53;
--ctp-sky: #87ceeb;
--ctp-blue: #4682b4;
--ctp-sapphire: #4682b4;
--ctp-yellow: #ffcc00;
--ctp-peach: #cd853f;
--ctp-maroon: #800000;
--ctp-red: #b22222;
--bg-app: #1c1a17;
--bg-sidebar: #151310;
--bg-card: #2a2722;
--bg-hover: #38342d;
--bg-player: #0f0d0b;
--bg-glass: rgba(28, 26, 23, 0.85);
--accent: #d4af37;
--accent-dim: rgba(212, 175, 55, 0.15);
--accent-glow: rgba(212, 175, 55, 0.3);
--text-primary: #f0ead6;
--text-secondary:#a69882;
--text-muted: #6b6355;
--border: #4a453c;
--border-subtle: #2a2722;
--border-dropdown: #4a453c;
--shadow-dropdown: rgba(0, 0, 0, 0.7);
--positive: #6b8e23;
--warning: #cd853f;
--danger: #b22222;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
[data-theme='ascalon'] .sidebar {
border-right: 1px solid var(--border);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 100% 4px;
}
[data-theme='ascalon'] .player-bar {
border-top: 2px solid var(--accent);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
[data-theme='ascalon'] .player-track-name {
color: var(--accent);
text-shadow: 0 0 8px var(--accent-glow);
font-family: 'Cinzel', serif, system-ui;
}
[data-theme='ascalon'] .nav-link.active {
background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 100%);
border-left: 3px solid var(--accent);
color: var(--accent);
}
[data-theme='ascalon'] .player-btn-primary {
background: var(--accent);
color: var(--ctp-crust);
box-shadow: 0 0 15px var(--accent-glow);
}
[data-theme='ascalon'] .player-btn-primary:hover {
transform: scale(1.05);
background: var(--ctp-lavender);
}
/* ─── Grand Theft Audio ─── */
[data-theme='grand-theft-audio'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357b05a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #0a0a0a;
--ctp-mantle: #0f0f0f;
--ctp-base: #141414;
--ctp-surface0: #1e1e1e;
--ctp-surface1: #282828;
--ctp-surface2: #323232;
--ctp-overlay0: #555555;
--ctp-overlay1: #888888;
--ctp-overlay2: #aaaaaa;
--ctp-text: #ffffff;
--ctp-subtext1: #cccccc;
--ctp-subtext0: #999999;
--ctp-mauve: #57b05a;
--ctp-lavender: #76d379;
--ctp-pink: #ec4899;
--ctp-flamingo: #f43f5e;
--ctp-rosewater:#fda4af;
--ctp-green: #57b05a;
--ctp-teal: #4d9e50;
--ctp-sky: #60a5fa;
--ctp-blue: #3b82f6;
--ctp-sapphire: #2563eb;
--ctp-yellow: #fbbf24;
--ctp-peach: #f59e0b;
--ctp-maroon: #b91c1c;
--ctp-red: #ef4444;
--bg-app: #141414;
--bg-sidebar: #0f0f0f;
--bg-card: #1e1e1e;
--bg-hover: rgba(87, 176, 90, 0.1);
--bg-player: #0a0a0a;
--bg-glass: rgba(15, 15, 15, 0.85);
--accent: #57b05a;
--accent-dim: rgba(87, 176, 90, 0.15);
--accent-glow: rgba(87, 176, 90, 0.4);
--text-primary: #ffffff;
--text-secondary:#999999;
--text-muted: #666666;
--border: #333333;
--border-subtle: #1e1e1e;
--border-dropdown: #333333;
--shadow-dropdown: rgba(0, 0, 0, 0.8);
--positive: #57b05a;
--warning: #fbbf24;
--danger: #ef4444;
--radius-sm: 0px;
--radius-md: 2px;
--radius-lg: 4px;
}
[data-theme='grand-theft-audio'] .sidebar {
border-right: 2px solid var(--accent);
}
[data-theme='grand-theft-audio'] .player-bar {
border-top: 1px solid var(--border);
}
[data-theme='grand-theft-audio'] .player-track-name {
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.5px;
}
[data-theme='grand-theft-audio'] .nav-link.active {
background: linear-gradient(90deg, rgba(87, 176, 90, 0.2) 0%, transparent 100%);
color: var(--accent);
}
[data-theme='grand-theft-audio'] .nav-link.active::before {
width: 4px;
box-shadow: 2px 0 10px var(--accent-glow);
}
[data-theme='grand-theft-audio'] .btn-primary {
text-transform: uppercase;
font-weight: bold;
}
/* ─── V-Tactical ─── */
[data-theme='v-tactical'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23708599%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #090c0e;
--ctp-mantle: #0d1114;
--ctp-base: #161c22;
--ctp-surface0: #1f2830;
--ctp-surface1: #2a3640;
--ctp-surface2: #3a4a58;
--ctp-overlay0: #526371;
--ctp-overlay1: #708599;
--ctp-overlay2: #8da4b8;
--ctp-text: #e1e9ef;
--ctp-subtext1: #b0c1d1;
--ctp-subtext0: #8da4b8;
--ctp-mauve: #ff8a00;
--ctp-lavender: #ffaa45;
--ctp-pink: #bf616a;
--ctp-flamingo: #d08770;
--ctp-rosewater:#e1e9ef;
--ctp-green: #a3be8c;
--ctp-teal: #88c0d0;
--ctp-sky: #81a1c1;
--ctp-blue: #5e81ac;
--ctp-sapphire: #5e81ac;
--ctp-yellow: #ebcb8b;
--ctp-peach: #d08770;
--ctp-maroon: #bf616a;
--ctp-red: #bf616a;
--bg-app: #161c22;
--bg-sidebar: #0d1114;
--bg-card: #1f2830;
--bg-hover: rgba(255, 138, 0, 0.1);
--bg-player: #090c0e;
--bg-glass: rgba(13, 17, 20, 0.85);
--accent: #ff8a00;
--accent-dim: rgba(255, 138, 0, 0.15);
--accent-glow: rgba(255, 138, 0, 0.4);
--text-primary: #e1e9ef;
--text-secondary:#b0c1d1;
--text-muted: #708599;
--border: #3a4a58;
--border-subtle: #1f2830;
--border-dropdown: #3a4a58;
--shadow-dropdown: rgba(0, 0, 0, 0.7);
--positive: #a3be8c;
--warning: #ebcb8b;
--danger: #bf616a;
--radius-sm: 1px;
--radius-md: 2px;
--radius-lg: 4px;
}
[data-theme='v-tactical'] .sidebar {
border-right: 1px solid var(--border);
}
[data-theme='v-tactical'] .player-bar {
border-top: 2px solid var(--accent);
background: linear-gradient(180deg, #0d1114 0%, #090c0e 100%);
}
[data-theme='v-tactical'] .player-track-name {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: var(--accent);
text-shadow: 0 0 10px var(--accent-glow);
}
[data-theme='v-tactical'] .nav-link.active {
background: linear-gradient(90deg, rgba(255, 138, 0, 0.15) 0%, transparent 100%);
border-left: 3px solid var(--accent);
}
[data-theme='v-tactical'] .btn-primary {
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.5px;
}
/* ─── NightCity 2077 ─── */
[data-theme='nightcity-2077'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FCEE0A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #000000;
--ctp-mantle: #0a0a0a;
--ctp-base: #050505;
--ctp-surface0: #151515;
--ctp-surface1: #202020;
--ctp-surface2: #2a2a2a;
--ctp-overlay0: #444444;
--ctp-overlay1: #666666;
--ctp-overlay2: #888888;
--ctp-text: #f0f0f0;
--ctp-subtext1: #cccccc;
--ctp-subtext0: #aaaaaa;
--ctp-mauve: #FCEE0A;
--ctp-lavender: #fff34d;
--ctp-pink: #ff00ff;
--ctp-flamingo: #FF003C;
--ctp-rosewater:#ffcccc;
--ctp-green: #00ff9f;
--ctp-teal: #00f0ff;
--ctp-sky: #00f0ff;
--ctp-blue: #3e59ff;
--ctp-sapphire: #2233aa;
--ctp-yellow: #FCEE0A;
--ctp-peach: #ffb800;
--ctp-maroon: #880000;
--ctp-red: #FF003C;
--bg-app: #050505;
--bg-sidebar: #0a0a0a;
--bg-card: #151515;
--bg-hover: rgba(252, 238, 10, 0.1);
--bg-player: #000000;
--bg-glass: rgba(5, 5, 5, 0.85);
--accent: #FCEE0A;
--accent-dim: rgba(252, 238, 10, 0.15);
--accent-glow: rgba(252, 238, 10, 0.4);
--text-primary: #f0f0f0;
--text-secondary:#cccccc;
--text-muted: #666666;
--border: #FCEE0A;
--border-subtle: #2a2a2a;
--border-dropdown: #2a2a2a;
--shadow-dropdown: rgba(0, 0, 0, 0.9);
--positive: #00ff9f;
--warning: #ffb800;
--danger: #FF003C;
--radius-sm: 0px;
--radius-md: 2px;
--radius-lg: 4px;
}
[data-theme='nightcity-2077'] .sidebar {
border-right: 1px solid var(--accent);
box-shadow: 2px 0 10px rgba(252, 238, 10, 0.1);
}
[data-theme='nightcity-2077'] .player-bar {
border-top: 2px solid var(--accent);
background: linear-gradient(to bottom, #111, #000);
}
[data-theme='nightcity-2077'] .player-track-name {
color: var(--accent);
text-transform: uppercase;
font-weight: 800;
letter-spacing: 1px;
text-shadow: 0 0 5px rgba(252, 238, 10, 0.5);
}
[data-theme='nightcity-2077'] .nav-link.active {
background: linear-gradient(90deg, rgba(252, 238, 10, 0.2) 0%, transparent 100%);
color: var(--accent);
border-left: 3px solid var(--accent);
}
[data-theme='nightcity-2077'] .nav-link.active::before {
display: none;
}
[data-theme='nightcity-2077'] .btn-primary {
background-color: var(--accent);
color: #000;
font-weight: bold;
text-transform: uppercase;
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 90% 100%, 0% 100%);
}
/* ─── Imperial Sith ─── */
[data-theme='imperial-sith'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e60000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #050505;
--ctp-mantle: #0a0a0c;
--ctp-base: #0f0f11;
--ctp-surface0: #1a1a1d;
--ctp-surface1: #252529;
--ctp-surface2: #303035;
--ctp-overlay0: #4a4a4f;
--ctp-overlay1: #6e6e75;
--ctp-overlay2: #929299;
--ctp-text: #f0f0f0;
--ctp-subtext1: #c2c2c9;
--ctp-subtext0: #9e9ea5;
--ctp-mauve: #e60000;
--ctp-lavender: #ff3333;
--ctp-pink: #ff0000;
--ctp-flamingo: #ff3333;
--ctp-rosewater:#f0f0f0;
--ctp-green: #2ecc71;
--ctp-teal: #1abc9c;
--ctp-sky: #3498db;
--ctp-blue: #3498db;
--ctp-sapphire: #2980b9;
--ctp-yellow: #ffcc00;
--ctp-peach: #e67e22;
--ctp-maroon: #c0392b;
--ctp-red: #ff0000;
--bg-app: #0f0f11;
--bg-sidebar: #0a0a0c;
--bg-card: #1a1a1d;
--bg-hover: #252529;
--bg-player: #050505;
--bg-glass: rgba(15, 15, 17, 0.85);
--accent: #e60000;
--accent-dim: rgba(230, 0, 0, 0.15);
--accent-glow: rgba(230, 0, 0, 0.45);
--text-primary: #f0f0f0;
--text-secondary:#c2c2c9;
--text-muted: #6e6e75;
--border: #252529;
--border-subtle: #1a1a1d;
--border-dropdown: #252529;
--shadow-dropdown: rgba(0, 0, 0, 0.85);
--positive: #2ecc71;
--warning: #ffcc00;
--danger: #ff0000;
--radius-sm: 0px;
--radius-md: 2px;
--radius-lg: 4px;
}
[data-theme='imperial-sith'] .sidebar {
border-right: 1px solid #1a1a1d;
background: linear-gradient(180deg, #0a0a0c 0%, #050505 100%);
}
[data-theme='imperial-sith'] .player-bar {
border-top: 1px solid #e6000033;
box-shadow: 0 -4px 20px rgba(230, 0, 0, 0.1);
}
[data-theme='imperial-sith'] .player-track-name {
color: #f0f0f0;
text-shadow: 0 0 10px rgba(230, 0, 0, 0.6);
font-family: 'JetBrains Mono', monospace;
}
[data-theme='imperial-sith'] .nav-link.active {
background: linear-gradient(90deg, rgba(230, 0, 0, 0.1) 0%, transparent 100%);
}
[data-theme='imperial-sith'] .nav-link.active::before {
box-shadow: 0 0 10px #e60000;
}
[data-theme='imperial-sith'] .btn-primary {
box-shadow: 0 0 15px rgba(230, 0, 0, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ─── Heisenberg ─── */
[data-theme='heisenberg'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233fe0ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #0a0c0a;
--ctp-mantle: #121512;
--ctp-base: #1a1d1a;
--ctp-surface0: #242824;
--ctp-surface1: #2e332e;
--ctp-surface2: #383d38;
--ctp-overlay0: #5c635c;
--ctp-overlay1: #7f897f;
--ctp-overlay2: #a2b0a2;
--ctp-text: #e0e7e0;
--ctp-subtext1: #b0b8b0;
--ctp-subtext0: #8a928a;
--ctp-mauve: #3fe0ff;
--ctp-lavender: #87f0ff;
--ctp-pink: #ff79c6;
--ctp-flamingo: #ffb86c;
--ctp-rosewater:#f8f8f2;
--ctp-green: #47d08a;
--ctp-teal: #2bbbad;
--ctp-sky: #3fe0ff;
--ctp-blue: #3498db;
--ctp-sapphire: #2980b9;
--ctp-yellow: #f1c40f;
--ctp-peach: #e67e22;
--ctp-maroon: #c0392b;
--ctp-red: #ff4b2b;
--bg-app: #1a1d1a;
--bg-sidebar: #121512;
--bg-card: #242824;
--bg-hover: rgba(63, 224, 255, 0.1);
--bg-player: #0a0c0a;
--bg-glass: rgba(26, 29, 26, 0.85);
--accent: #3fe0ff;
--accent-dim: rgba(63, 224, 255, 0.15);
--accent-glow: rgba(63, 224, 255, 0.4);
--text-primary: #e0e7e0;
--text-secondary:#b0b8b0;
--text-muted: #5c635c;
--border: #383d38;
--border-subtle: #242824;
--border-dropdown: #383d38;
--shadow-dropdown: rgba(0, 0, 0, 0.8);
--positive: #47d08a;
--warning: #f1c40f;
--danger: #ff4b2b;
}
[data-theme='heisenberg'] .player-track-name {
color: var(--accent);
text-shadow: 0 0 10px var(--accent-glow);
font-family: 'JetBrains Mono', 'Fira Code', monospace;
}
[data-theme='heisenberg'] .sidebar {
border-right: 1px solid var(--accent-dim);
}
[data-theme='heisenberg'] .nav-link.active {
background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 100%);
}
[data-theme='heisenberg'] .player-bar {
border-top: 1px solid var(--accent-dim);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
/* ─── A Theme of Ice and Fire ─── */
[data-theme='ice-and-fire'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2370a1ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #05070a;
--ctp-mantle: #0d1117;
--ctp-base: #121820;
--ctp-surface0: #1c2533;
--ctp-surface1: #2a374a;
--ctp-surface2: #384961;
--ctp-overlay0: #5c6a7e;
--ctp-overlay1: #7d8da3;
--ctp-overlay2: #a0b1c7;
--ctp-text: #f0f4f8;
--ctp-subtext1: #cbd5e0;
--ctp-subtext0: #a0aec0;
--ctp-mauve: #70a1ff;
--ctp-lavender: #a4b0be;
--ctp-pink: #ff4757;
--ctp-flamingo: #ff6b81;
--ctp-rosewater:#f0f4f8;
--ctp-green: #2ed573;
--ctp-teal: #1e90ff;
--ctp-sky: #70a1ff;
--ctp-blue: #1e90ff;
--ctp-sapphire: #1e90ff;
--ctp-yellow: #ffa502;
--ctp-peach: #ffa502;
--ctp-maroon: #c0392b;
--ctp-red: #ff4757;
--bg-app: #121820;
--bg-sidebar: #0d1117;
--bg-card: #1c2533;
--bg-hover: rgba(112, 161, 255, 0.1);
--bg-player: #05070a;
--bg-glass: rgba(13, 17, 23, 0.85);
--accent: #70a1ff;
--accent-dim: rgba(112, 161, 255, 0.15);
--accent-glow: rgba(112, 161, 255, 0.25);
--volume-accent: #ffa502;
--text-primary: #f0f4f8;
--text-secondary:#cbd5e0;
--text-muted: #5c6a7e;
--border: #2a374a;
--border-subtle: #1c2533;
--border-dropdown: #2a374a;
--shadow-dropdown: rgba(0, 0, 0, 0.8);
--positive: #2ed573;
--warning: #ffa502;
--danger: #ff4757;
--radius-sm: 1px;
--radius-md: 2px;
--radius-lg: 4px;
}
[data-theme='ice-and-fire'] .app-shell {
background: radial-gradient(circle at top right, #1a2a3a, #121820);
}
[data-theme='ice-and-fire'] .sidebar {
border-right: 1px solid #1c2533;
background: linear-gradient(to bottom, #0d1117, #05070a);
}
[data-theme='ice-and-fire'] .player-bar {
border-top: 2px solid #ffa502;
box-shadow: 0 -4px 30px rgba(255, 165, 2, 0.1);
background: #05070a;
}
[data-theme='ice-and-fire'] .nav-link.active {
background: linear-gradient(90deg, rgba(112, 161, 255, 0.15) 0%, transparent 100%);
color: #70a1ff;
font-weight: 600;
text-shadow: 0 0 10px rgba(112, 161, 255, 0.4);
}
[data-theme='ice-and-fire'] .slider-track-fill {
background: linear-gradient(90deg, #70a1ff, #ffa502) !important;
}
[data-theme='ice-and-fire'] .player-track-name {
color: #f0f4f8;
text-shadow: 0 0 12px rgba(112, 161, 255, 0.6);
}
[data-theme='ice-and-fire'] .btn {
border: 1px solid var(--border);
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.1em;
}
/* ─── D'oh-matic ─── */
[data-theme='doh-matic'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #FFD90F;
--ctp-mantle: #BAE1FF;
--ctp-base: #FFFDF0;
--ctp-surface0: #F0F8FF;
--ctp-surface1: #E0EFFF;
--ctp-surface2: #D0E5FF;
--ctp-overlay0: #999999;
--ctp-overlay1: #777777;
--ctp-overlay2: #555555;
--ctp-text: #222222;
--ctp-subtext1: #444444;
--ctp-subtext0: #666666;
--ctp-mauve: #1F75FE;
--ctp-lavender: #4D91FF;
--ctp-pink: #F14E96;
--ctp-flamingo: #F14E96;
--ctp-rosewater:#FFD90F;
--ctp-green: #4AC948;
--ctp-teal: #00BFAF;
--ctp-sky: #4D91FF;
--ctp-blue: #1F75FE;
--ctp-sapphire: #1F75FE;
--ctp-yellow: #FFD90F;
--ctp-peach: #F26522;
--ctp-maroon: #CC0000;
--ctp-red: #ED1C24;
--bg-app: #FFFDF0;
--bg-sidebar: #BAE1FF;
--bg-card: #FFFFFF;
--bg-hover: rgba(31, 117, 254, 0.1);
--bg-player: #FFD90F;
--bg-glass: rgba(255, 253, 240, 0.8);
--accent: #1F75FE;
--accent-dim: rgba(31, 117, 254, 0.15);
--accent-glow: rgba(31, 117, 254, 0.3);
--text-primary: #222222;
--text-secondary:#444444;
--text-muted: #777777;
--border: #222222;
--border-subtle: rgba(0, 0, 0, 0.1);
--border-dropdown: #cccccc;
--shadow-dropdown: rgba(0, 0, 0, 0.15);
--positive: #4AC948;
--warning: #F26522;
--danger: #ED1C24;
--radius-md: 12px;
}
[data-theme='doh-matic'] .sidebar {
border-right: 2px solid #222222;
}
[data-theme='doh-matic'] .player-bar {
border-top: 3px solid #222222;
}
[data-theme='doh-matic'] .player-track-name,
[data-theme='doh-matic'] .player-track-artist,
[data-theme='doh-matic'] .player-time {
color: #222222 !important;
}
[data-theme='doh-matic'] .player-btn {
color: #222222;
}
[data-theme='doh-matic'] .btn-primary:hover {
background-color: var(--ctp-pink);
border-color: #222222;
}
/* ─── Order of the Phoenix ─── */
[data-theme='order-of-the-phoenix'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff6b00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #0a0a0a;
--ctp-mantle: #121212;
--ctp-base: #181818;
--ctp-surface0: #222222;
--ctp-surface1: #2a2a2a;
--ctp-surface2: #333333;
--ctp-overlay0: #555555;
--ctp-overlay1: #888888;
--ctp-overlay2: #aaaaaa;
--ctp-text: #f5f5f5;
--ctp-subtext1: #d1d1d1;
--ctp-subtext0: #b0b0b0;
--ctp-mauve: #e63900;
--ctp-lavender: #ff6b00;
--ctp-pink: #ff0000;
--ctp-flamingo: #ff4500;
--ctp-rosewater:#f5f5f5;
--ctp-green: #228b22;
--ctp-teal: #008080;
--ctp-sky: #87ceeb;
--ctp-blue: #1e90ff;
--ctp-sapphire: #1e90ff;
--ctp-yellow: #ffd700;
--ctp-peach: #ff6b00;
--ctp-maroon: #8b0000;
--ctp-red: #ff0000;
--bg-app: #181818;
--bg-sidebar: #121212;
--bg-card: #222222;
--bg-hover: rgba(230, 57, 0, 0.1);
--bg-player: #0a0a0a;
--bg-glass: rgba(24, 24, 24, 0.85);
--accent: #e63900;
--accent-dim: rgba(230, 57, 0, 0.15);
--accent-glow: rgba(230, 57, 0, 0.4);
--text-primary: #f5f5f5;
--text-secondary:#b0b0b0;
--text-muted: #666666;
--border: #333333;
--border-subtle: #222222;
--border-dropdown: #333333;
--shadow-dropdown: rgba(0, 0, 0, 0.8);
--positive: #228b22;
--warning: #ffd700;
--danger: #ff0000;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
}
[data-theme='order-of-the-phoenix'] .sidebar {
border-right: 1px solid rgba(230, 57, 0, 0.2);
background-image: linear-gradient(to bottom, rgba(230, 57, 0, 0.05), transparent);
}
[data-theme='order-of-the-phoenix'] .player-bar {
border-top: 1px solid rgba(230, 57, 0, 0.3);
box-shadow: 0 -4px 25px rgba(230, 57, 0, 0.15);
}
[data-theme='order-of-the-phoenix'] .player-track-name {
color: var(--ctp-lavender);
text-shadow: 0 0 12px rgba(255, 107, 0, 0.5);
font-weight: 600;
}
[data-theme='order-of-the-phoenix'] .nav-link.active {
background: linear-gradient(90deg, rgba(230, 57, 0, 0.15) 0%, transparent 100%);
color: var(--ctp-lavender);
}
[data-theme='order-of-the-phoenix'] .nav-link.active::before {
box-shadow: 0 0 15px var(--accent);
background-color: var(--accent);
}
[data-theme='order-of-the-phoenix'] .btn-primary {
background: linear-gradient(135deg, #e63900, #ff6b00);
border: none;
box-shadow: 0 0 15px rgba(230, 57, 0, 0.4);
}
/* ─── W98 ─── */
[data-theme='w98'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #808080;
--ctp-mantle: #a0a0a0;
--ctp-base: #c0c0c0;
--ctp-surface0: #dfdfdf;
--ctp-surface1: #ffffff;
--ctp-surface2: #000080;
--ctp-overlay0: #808080;
--ctp-overlay1: #404040;
--ctp-overlay2: #202020;
--ctp-text: #000000;
--ctp-subtext1: #222222;
--ctp-subtext0: #444444;
--ctp-mauve: #000080;
--ctp-lavender: #0000af;
--ctp-pink: #ff0000;
--ctp-flamingo: #ff0000;
--ctp-rosewater:#c0c0c0;
--ctp-green: #008000;
--ctp-teal: #008080;
--ctp-sky: #0000ff;
--ctp-blue: #0000ff;
--ctp-sapphire: #000080;
--ctp-yellow: #ffff00;
--ctp-peach: #ff8000;
--ctp-maroon: #800000;
--ctp-red: #ff0000;
--bg-app: #008080;
--bg-sidebar: #c0c0c0;
--bg-card: #c0c0c0;
--bg-hover: #000080;
--bg-player: #c0c0c0;
--bg-glass: rgba(192, 192, 192, 0.9);
--accent: #000080;
--accent-dim: rgba(0, 0, 128, 0.1);
--accent-glow: rgba(0, 0, 128, 0.2);
--text-primary: #000000;
--text-secondary:#000000;
--text-muted: #404040;
--border: #808080;
--border-subtle: #a0a0a0;
--border-dropdown: #808080;
--shadow-dropdown: rgba(0, 0, 0, 0.3);
--positive: #008000;
--warning: #808000;
--danger: #ff0000;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
}
[data-theme='w98'] .app-shell {
background-color: var(--bg-app);
}
[data-theme='w98'] .card,
[data-theme='w98'] .sidebar,
[data-theme='w98'] .player-bar,
[data-theme='w98'] .btn-surface {
border: 1px solid #ffffff !important;
border-right-color: #808080 !important;
border-bottom-color: #808080 !important;
box-shadow: 1px 1px 0 0 #000, inset 1px 1px 0 0 #dfdfdf !important;
}
[data-theme='w98'] .nav-link.active {
background-color: #000080 !important;
color: #ffffff !important;
}
[data-theme='w98'] .nav-link:hover:not(.active) {
outline: 1px dotted #000;
background-color: transparent !important;
}
[data-theme='w98'] .player-track-name,
[data-theme='w98'] .player-track-artist,
[data-theme='w98'] .player-time {
color: #000000 !important;
}
[data-theme='w98'] ::-webkit-scrollbar {
width: 16px;
background: #dfdfdf;
}
[data-theme='w98'] ::-webkit-scrollbar-thumb {
background: #c0c0c0;
border: 1px solid #ffffff;
border-right-color: #808080;
border-bottom-color: #808080;
box-shadow: 1px 1px 0 0 #000;
}
/* ─── Global Base Settings ─── */
:root {
/* Typography */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Space Grotesk', 'Inter', sans-serif;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
/* Radii */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
--shadow-glow: 0 0 24px var(--accent-glow);
/* Transitions */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-slow: 350ms ease;
/* Layout */
--sidebar-width: 220px;
--player-height: 88px;
}
/* ─── Spotless ─── */
[data-theme='spotless'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B3B3B3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #000000;
--ctp-mantle: #121212;
--ctp-base: #181818;
--ctp-surface0: #282828;
--ctp-surface1: #3E3E3E;
--ctp-surface2: #535353;
--ctp-overlay0: #727272;
--ctp-overlay1: #A7A7A7;
--ctp-overlay2: #B3B3B3;
--ctp-text: #FFFFFF;
--ctp-subtext1: #EBEBEB;
--ctp-subtext0: #D6D6D6;
--ctp-mauve: #1ED760;
--ctp-lavender: #1FDF64;
--ctp-green: #1ED760;
--ctp-teal: #1DF2A4;
--ctp-sky: #3D91F4;
--ctp-blue: #2E77D0;
--ctp-sapphire: #1C5599;
--ctp-pink: #E55C5C;
--ctp-flamingo: #E55C5C;
--ctp-rosewater:#FFC8C8;
--ctp-yellow: #FFA42B;
--ctp-peach: #FF7A00;
--ctp-maroon: #B22A2A;
--ctp-red: #E22134;
--bg-app: #121212;
--bg-sidebar: #000000;
--bg-card: #181818;
--bg-hover: #282828;
--bg-player: #181818;
--bg-glass: rgba(18, 18, 18, 0.85);
--accent: #1ED760;
--accent-dim: rgba(30, 215, 96, 0.15);
--accent-glow: rgba(30, 215, 96, 0.35);
--volume-accent: #FFFFFF;
--text-primary: #FFFFFF;
--text-secondary:#B3B3B3;
--text-muted: #A7A7A7;
--border: #282828;
--border-subtle: rgba(255, 255, 255, 0.1);
--positive: #1ED760;
--warning: #FFA42B;
--danger: #E22134;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
--shadow-md: 0 4px 16px rgba(0,0,0,0.6);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
--transition-fast: 150ms ease;
--transition-med: 250ms ease;
--transition-slow: 350ms ease;
--sidebar-width: 220px;
--player-height: 88px;
}
[data-theme='spotless'] .sidebar {
border-right: none;
}
[data-theme='spotless'] .player-bar {
border-top: 1px solid var(--border-subtle);
}
[data-theme='spotless'] .nav-link:hover {
color: var(--text-primary);
background-color: transparent;
}
[data-theme='spotless'] .nav-link.active {
background-color: var(--bg-hover);
color: var(--text-primary);
border-radius: var(--radius-sm);
}
[data-theme='spotless'] .nav-link.active::before {
display: none;
}
[data-theme='spotless'] .btn-primary {
color: var(--ctp-crust);
border-radius: var(--radius-full);
font-weight: 700;
}
[data-theme='spotless'] .player-btn-primary {
color: var(--ctp-crust);
background-color: var(--text-primary);
border-radius: var(--radius-full);
}
[data-theme='spotless'] .player-btn-primary:hover {
background-color: var(--accent);
transform: scale(1.05);
}
[data-theme='spotless'] .queue-item:hover,
[data-theme='spotless'] .track-row:hover {
background-color: var(--bg-hover);
border-radius: var(--radius-sm);
}
/* ─── Cupertino Beats ─── */
[data-theme='cupertino-beats'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1a1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #000000;
--ctp-mantle: #121212;
--ctp-base: #1c1c1e;
--ctp-surface0: #2c2c2e;
--ctp-surface1: #3a3a3c;
--ctp-surface2: #48484a;
--ctp-overlay0: #636366;
--ctp-overlay1: #8e8e93;
--ctp-overlay2: #aeaeb2;
--ctp-text: #ffffff;
--ctp-subtext1: #ebebf599;
--ctp-subtext0: #ebebf560;
--ctp-mauve: #fa243c;
--ctp-lavender: #ff5e71;
--ctp-green: #34c759;
--ctp-teal: #30b0c7;
--ctp-sky: #5ac8fa;
--ctp-blue: #007aff;
--ctp-sapphire: #0051d5;
--ctp-pink: #ff2d55;
--ctp-flamingo: #ff3b30;
--ctp-rosewater:#ff9f0a;
--ctp-yellow: #ffcc00;
--ctp-peach: #ff9500;
--ctp-maroon: #af52de;
--ctp-red: #ff3b30;
--bg-app: #1c1c1e;
--bg-sidebar: rgba(18, 18, 18, 0.75);
--bg-card: #2c2c2e;
--bg-hover: rgba(255, 255, 255, 0.08);
--bg-player: rgba(0, 0, 0, 0.85);
--bg-glass: rgba(28, 28, 30, 0.6);
--accent: #fa243c;
--accent-dim: rgba(250, 36, 60, 0.15);
--accent-glow: rgba(250, 36, 60, 0.3);
--volume-accent: #fa243c;
--text-primary: #ffffff;
--text-secondary:rgba(235, 235, 245, 0.6);
--text-muted: rgba(235, 235, 245, 0.3);
--border: rgba(255, 255, 255, 0.1);
--border-subtle: rgba(255, 255, 255, 0.05);
--positive: #34c759;
--warning: #ffcc00;
--danger: #ff3b30;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
--shadow-md: 0 4px 20px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
--transition-fast: 150ms ease;
--transition-med: 250ms ease;
--transition-slow: 350ms ease;
--sidebar-width: 220px;
--player-height: 88px;
}
[data-theme='cupertino-beats'] .sidebar {
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border-right: 1px solid var(--border);
}
[data-theme='cupertino-beats'] .player-bar {
backdrop-filter: blur(30px) saturate(150%);
-webkit-backdrop-filter: blur(30px) saturate(150%);
border-top: 1px solid var(--border);
}
[data-theme='cupertino-beats'] .nav-link.active {
background: var(--accent-dim);
color: var(--accent);
font-weight: 600;
}
[data-theme='cupertino-beats'] .nav-link.active::before {
width: 4px;
border-radius: 0 4px 4px 0;
}
/* ─── Dzr0 ─── */
[data-theme='dzr0'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A238FF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #E5E5E9;
--ctp-mantle: #F5F5F7;
--ctp-base: #FFFFFF;
--ctp-surface0: #F0F0F3;
--ctp-surface1: #E8E8EC;
--ctp-surface2: #D8D8DF;
--ctp-overlay0: #9E9EAF;
--ctp-overlay1: #7C7C8F;
--ctp-overlay2: #5D5D70;
--ctp-text: #121216;
--ctp-subtext1: #4A4A5A;
--ctp-subtext0: #6A6A7A;
--ctp-mauve: #A238FF;
--ctp-lavender: #B86BFF;
--ctp-green: #00C171;
--ctp-teal: #00C171;
--ctp-sky: #3D91F4;
--ctp-blue: #2E77D0;
--ctp-sapphire: #1C5599;
--ctp-pink: #EF3B5D;
--ctp-flamingo: #EF3B5D;
--ctp-rosewater:#FFC8C8;
--ctp-yellow: #FFCC00;
--ctp-peach: #FF7A00;
--ctp-maroon: #B22A2A;
--ctp-red: #EF3B5D;
--bg-app: #FFFFFF;
--bg-sidebar: #F5F5F7;
--bg-card: #FBFBFC;
--bg-hover: #F0F0F3;
--bg-player: #FFFFFF;
--bg-glass: rgba(255, 255, 255, 0.85);
--accent: #A238FF;
--accent-dim: rgba(162, 56, 255, 0.12);
--accent-glow: rgba(162, 56, 255, 0.25);
--volume-accent: #A238FF;
--text-primary: #121216;
--text-secondary:#4A4A5A;
--text-muted: #8E8E9F;
--border: #E2E2E9;
--border-subtle: #F0F0F5;
--positive: #00C171;
--warning: #FFCC00;
--danger: #EF3B5D;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.10);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
--transition-fast: 150ms ease;
--transition-med: 250ms ease;
--transition-slow: 350ms ease;
--sidebar-width: 220px;
--player-height: 88px;
}
[data-theme='dzr0'] .player-bar {
border-top: 1px solid var(--border-subtle);
box-shadow: 0 -4px 12px rgba(0,0,0,0.03);
}
[data-theme='dzr0'] .player-track-name,
[data-theme='dzr0'] .player-time,
[data-theme='dzr0'] .player-track-artist {
color: var(--text-primary) !important;
}
[data-theme='dzr0'] .sidebar {
border-right: 1px solid var(--border-subtle);
}
[data-theme='dzr0'] .nav-link:hover {
background-color: var(--bg-hover);
color: var(--accent);
}
[data-theme='dzr0'] .nav-link.active {
background-color: var(--accent-dim);
color: var(--accent);
font-weight: 600;
}
[data-theme='dzr0'] .btn-primary {
color: #FFFFFF !important;
}
/* ─── Reset ─── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body, #root {
height: 100%;
min-width: 1280px;
min-height: 720px;
overflow: hidden;
}
body {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.5;
color: var(--text-primary);
user-select: none;
background: var(--bg-app);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
user-select: none;
}
/* Allow text selection in specific areas */
input, textarea, [data-selectable] {
user-select: text;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
/* ─── Scrollbars ─── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ctp-surface2); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ctp-overlay0); }
/* ─── Focus ─── */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ─── Global Dragging State ─── */
body.is-dragging,
body.is-dragging * {
user-select: none !important;
cursor: col-resize !important;
}
/* ─── Utility Classes ─── */
.glass {
background: var(--bg-glass, rgba(30, 30, 46, 0.75));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-subtle);
}
.gradient-text {
background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
}
/* ─── Button Variants ─── */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 500;
transition: all var(--transition-fast);
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: var(--ctp-crust);
font-weight: 600;
}
.btn-primary:hover { background: var(--accent); filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: transparent;
color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-surface {
background: var(--bg-card);
color: var(--text-primary);
}
.btn-surface:hover { background: var(--bg-hover); }
/* ─── Input ─── */
.input {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--ctp-base);
border: 1px solid var(--ctp-overlay0);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
outline: none;
}
.input::placeholder { color: var(--text-muted); }
.input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
select.input {
appearance: none;
-webkit-appearance: none;
background-image: var(--select-arrow);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
cursor: pointer;
}
select.input.input:focus {
background-image: var(--select-arrow); /* Keep arrow on focus */
}
/* ─── Card ─── */
.card {
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
overflow: hidden;
transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ─── Album Grid ─── */
.album-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-4);
}
/* ─── Scrollable area ─── */
.scroll-area {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
/* ─── Divider ─── */
.divider {
height: 1px;
background: var(--border-subtle);
margin: var(--space-4) 0;
}
/* ─── Badge ─── */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.03em;
background: var(--accent-dim);
color: var(--accent);
}
/* ─── Star Rating ─── */
.star-rating {
display: flex;
gap: 2px;
color: var(--ctp-overlay1);
justify-content: center;
width: 100%;
}
.star-rating .star.filled { color: var(--ctp-yellow); }
.star-rating .star:hover { color: var(--ctp-yellow); cursor: pointer; }
/* ─── Animations ─── */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes wave {
0%, 100% { transform: scaleY(0.4); }
50% { transform: scaleY(1); }
}
.animate-fade-in { animation: fadeIn var(--transition-slow) both; }
.animate-slide-in { animation: slideIn var(--transition-slow) both; }
.animate-pulse { animation: pulse 1.5s ease infinite; }
.animate-spin { animation: spin 1s linear infinite; }
/* ─── Progress / Range ─── */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 4px;
border-radius: var(--radius-full);
background: var(--ctp-surface2);
outline: none;
cursor: pointer;
transition: all var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--text-primary);
cursor: pointer;
transition: transform var(--transition-fast), background var(--transition-fast);
box-shadow: var(--shadow-sm);
}
input[type="range"]:hover::-webkit-slider-thumb {
transform: scale(1.2);
background: var(--accent);
}
/* ─── Loading Spinner ─── */
.spinner {
width: 24px;
height: 24px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* ─── Musicmatch Jukebox — Y2K Metallic Silver / Blue Display ─── */
[data-theme='navy-jukebox'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234a4a4a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #001358; /* deep blue — LCD display */
--ctp-mantle: #b5babc; /* dark silver — panels, sidebar */
--ctp-base: #d4d8db; /* metallic silver — main body */
--ctp-surface0: #c8ccce;
--ctp-surface1: #bec2c4;
--ctp-surface2: #8a9094; /* border gray */
--ctp-overlay0: #6a7074;
--ctp-overlay1: #505458;
--ctp-overlay2: #3a3e42;
--ctp-text: #1a1a1a;
--ctp-subtext1: #3a3a3a;
--ctp-subtext0: #4a4a4a;
/* Cyan accent + Musicmatch orange */
--ctp-mauve: #00d0ff; /* cyan — primary accent */
--ctp-lavender: #40e0ff;
--ctp-sky: #00c0e8;
--ctp-sapphire: #0088c8;
--ctp-blue: #0058b8;
--ctp-teal: #009898;
--ctp-green: #008840;
--ctp-yellow: #cc8800;
--ctp-peach: #ff6600; /* Musicmatch orange — secondary accent */
--ctp-pink: #d04060;
--ctp-flamingo: #c05040;
--ctp-rosewater: #c87060;
--ctp-maroon: #b02828;
--ctp-red: #c82020;
/* ── Semantic tokens ── */
--bg-app: #d4d8db;
--bg-sidebar: #b5babc;
--bg-card: #c8ccce;
--bg-hover: #bec2c4;
--bg-player: #001358; /* LCD display — deep blue */
--bg-glass: rgba(212, 216, 219, 0.92);
--accent: #00d0ff;
--accent-dim: rgba(0, 208, 255, 0.15);
--accent-glow: rgba(0, 208, 255, 0.35);
--volume-accent: #ff6600; /* Musicmatch orange for volume */
--text-primary: #1a1a1a;
--text-secondary:#4a4a4a;
--text-muted: #6a7074;
--border: #8a9094;
--border-subtle: #c0c4c6;
--positive: #008840;
--warning: #cc8800;
--danger: #c82020;
}
/* ── Musicmatch: contrast fixes ── */
/* Active elements: navy text on cyan bg — high contrast, on-brand */
[data-theme='navy-jukebox'] .queue-round-btn.active {
color: #001358;
}
/* Accent-coloured text on silver body needs to be darker */
[data-theme='navy-jukebox'] {
--accent: #0070a0; /* darker cyan — readable as text on silver */
--accent-dim: rgba(0, 112, 160, 0.15);
--accent-glow: rgba(0, 112, 160, 0.35);
}
/* Player bar keeps the bright cyan since it's on dark blue bg */
[data-theme='navy-jukebox'] .player-bar {
--accent: #00d0ff;
}
/* ── Musicmatch: metallic bevel buttons ── */
[data-theme='navy-jukebox'] .btn {
background: linear-gradient(180deg, #e4e8eb 0%, #c0c4c7 100%);
color: #1a1a1a;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.9),
inset -1px -1px 0 rgba(0, 0, 0, 0.28),
0 1px 3px rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
[data-theme='navy-jukebox'] .btn:hover {
background: linear-gradient(180deg, #eceef0 0%, #cacdd0 100%);
}
[data-theme='navy-jukebox'] .btn-primary {
background: linear-gradient(180deg, #40e0ff 0%, #00a8d8 100%);
color: #001358;
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.6),
inset -1px -1px 0 rgba(0, 60, 120, 0.4),
0 1px 4px rgba(0, 0, 0, 0.25);
}
/* ── Player bar: blue LCD display area ── */
[data-theme='navy-jukebox'] .player-bar {
background: #001358;
border-top: 2px solid #8a9094;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme='navy-jukebox'] .player-track-name {
color: #ffffff;
text-shadow: 0 0 8px rgba(0, 208, 255, 0.75), 0 0 2px rgba(0, 208, 255, 0.4);
letter-spacing: 0.02em;
}
[data-theme='navy-jukebox'] .player-track-artist {
color: #00d0ff;
opacity: 0.85;
}
[data-theme='navy-jukebox'] .player-btn,
[data-theme='navy-jukebox'] .player-btn-primary {
background: linear-gradient(180deg, #1a2880 0%, #000e40 100%);
color: #00d0ff;
box-shadow:
inset 1px 1px 0 rgba(0, 208, 255, 0.25),
inset -1px -1px 0 rgba(0, 0, 0, 0.5),
0 2px 5px rgba(0, 0, 0, 0.4);
border-radius: 50%;
}
[data-theme='navy-jukebox'] .player-btn:hover,
[data-theme='navy-jukebox'] .player-btn-primary:hover {
background: linear-gradient(180deg, #2030a0 0%, #001060 100%);
color: #40e8ff;
}
/* ── Sidebar: brushed-metal look ── */
[data-theme='navy-jukebox'] .sidebar {
background: linear-gradient(180deg, #c8ccce 0%, #b0b4b7 100%);
border-right: 2px solid #8a9094;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.4);
}
/* ── Cards / panels: inset bevel ── */
[data-theme='navy-jukebox'] .glass,
[data-theme='navy-jukebox'] .card {
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.8),
inset -1px -1px 0 rgba(0, 0, 0, 0.15),
0 2px 6px rgba(0, 0, 0, 0.12);
}
/* ─── WMP8 Classic — Windows Media Player 8 / XP Luna ─── */
[data-theme='cobalt-media'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c2d4f2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #000000; /* black — LCD display / playlist */
--ctp-mantle: #1a3060; /* darkest blue — sidebar */
--ctp-base: #3a62a5; /* Luna blue — main body (dark enough for white text) */
--ctp-surface0: #4a72b8;
--ctp-surface1: #5480cc;
--ctp-surface2: #6090d8;
--ctp-overlay0: #7090c0;
--ctp-overlay1: #8aaad8;
--ctp-overlay2: #a0c0e8;
--ctp-text: #ffffff;
--ctp-subtext1: #dce8ff;
--ctp-subtext0: #b8d0f8;
/* WMP green + XP blue-cool palette */
--ctp-mauve: #45ff00; /* WMP poison green — primary accent */
--ctp-lavender: #70ff40;
--ctp-green: #30dd00;
--ctp-teal: #00cc88;
--ctp-sky: #88ccff;
--ctp-blue: #5599ee;
--ctp-sapphire: #3378cc;
--ctp-pink: #ff88cc;
--ctp-flamingo: #ff7788;
--ctp-rosewater: #ffaabb;
--ctp-yellow: #ffdd44;
--ctp-peach: #ff9944;
--ctp-maroon: #dd4455;
--ctp-red: #ee3344;
/* ── Semantic tokens ── */
--bg-app: #3a62a5; /* ~12% luminance → white contrast 6:1 */
--bg-sidebar: #1a3060;
--bg-card: #4a72b8;
--bg-hover: #5480cc;
--bg-player: #000000;
--bg-glass: rgba(30, 58, 110, 0.88);
--accent: #45ff00;
--accent-dim: rgba(69, 255, 0, 0.15);
--accent-glow: rgba(69, 255, 0, 0.45);
--text-primary: #ffffff;
--text-secondary:#dce8ff;
--text-muted: #b8d0f8; /* lighter so readable on #3a62a5 */
--border: #2a5090;
--border-subtle: #4a72b8;
--positive: #30dd00;
--warning: #ffdd44;
--danger: #ee3344;
}
/* ── WMP8: Luna-style gradients + skeuomorphic detail ── */
/* Sidebar: deep WMP task-pane blue */
[data-theme='cobalt-media'] .sidebar {
background: linear-gradient(180deg, #244080 0%, #1a3060 60%, #0e2048 100%);
border-right: 2px solid #0e2048;
box-shadow: inset -1px 0 0 rgba(120, 160, 220, 0.2);
}
/* Main body: Luna blue */
[data-theme='cobalt-media'] .app-shell {
background: linear-gradient(160deg, #4a72b8 0%, #3a62a5 40%, #2e5498 100%);
}
/* Player bar: black LCD display with green glow ambience */
[data-theme='cobalt-media'] .player-bar {
background: #000000;
border-top: 2px solid #1a3060;
box-shadow: inset 0 1px 0 rgba(69, 255, 0, 0.06), 0 -2px 12px rgba(0, 0, 0, 0.6);
}
/* Track name: WMP green glow */
[data-theme='cobalt-media'] .player-track-name {
color: #45ff00;
text-shadow:
0 0 8px rgba(69, 255, 0, 0.80),
0 0 16px rgba(69, 255, 0, 0.40),
0 0 2px rgba(69, 255, 0, 0.60);
letter-spacing: 0.03em;
}
[data-theme='cobalt-media'] .player-track-artist {
color: #30dd00;
opacity: 0.85;
text-shadow: 0 0 4px rgba(69, 255, 0, 0.4);
}
/* Transport buttons: round, radial metallic gradient, drop shadow */
[data-theme='cobalt-media'] .player-btn,
[data-theme='cobalt-media'] .player-btn-primary {
background: radial-gradient(circle at 38% 32%, #c8dcf8 0%, #8aacdc 40%, #4870b8 100%);
color: #ffffff;
border-radius: 50%;
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.55),
0 1px 2px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(0, 0, 50, 0.3);
border: 1px solid #2a5090;
}
[data-theme='cobalt-media'] .player-btn:hover,
[data-theme='cobalt-media'] .player-btn-primary:hover {
background: radial-gradient(circle at 38% 32%, #d8ecff 0%, #a0c0ee 40%, #5888d0 100%);
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.55),
0 1px 2px rgba(0, 0, 0, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(0, 0, 50, 0.3);
}
/* Regular buttons: Luna soft rounded pill */
[data-theme='cobalt-media'] .btn {
background: linear-gradient(180deg, #b8d0f0 0%, #7898d8 55%, #5878c0 100%);
color: #ffffff;
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(0, 0, 80, 0.25),
0 2px 4px rgba(0, 0, 0, 0.3);
border: 1px solid #3a60b0;
}
[data-theme='cobalt-media'] .btn:hover {
background: linear-gradient(180deg, #cce0ff 0%, #90aaee 55%, #6888d0 100%);
}
[data-theme='cobalt-media'] .btn-primary {
background: linear-gradient(180deg, #70ff40 0%, #38cc00 55%, #28aa00 100%);
color: #003300;
border: 1px solid #208800;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(0, 60, 0, 0.25),
0 2px 6px rgba(0, 0, 0, 0.3),
0 0 8px rgba(69, 255, 0, 0.25);
}
/* Active queue round buttons: green bg, dark text */
[data-theme='cobalt-media'] .queue-round-btn.active {
color: #003300;
}
/* Cards / glass panels: slightly elevated with border */
[data-theme='cobalt-media'] .glass,
[data-theme='cobalt-media'] .card {
background: rgba(90, 128, 190, 0.55);
border: 1px solid rgba(160, 190, 230, 0.5);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Content header: slightly darker Luna band */
[data-theme='cobalt-media'] .content-header {
background: linear-gradient(180deg, rgba(58, 98, 165, 0.55) 0%, rgba(58, 98, 165, 0.2) 100%);
border-bottom: 1px solid #6888c2;
}
/* ─── PowerDVD Classic — Virtual HiFi Receiver / VFD Display ─── */
[data-theme='onyx-cinema'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #000000; /* pure black — VFD glass */
--ctp-mantle: #0a0a0a; /* drive bay depth */
--ctp-base: #141414; /* brushed aluminium chassis */
--ctp-surface0: #1c1c1c;
--ctp-surface1: #242424;
--ctp-surface2: #2e2e2e;
--ctp-overlay0: #3a3a3a;
--ctp-overlay1: #4a4a4a;
--ctp-overlay2: #5a5a5a;
--ctp-text: #b3b3b3; /* matte metal label */
--ctp-subtext1: #888888;
--ctp-subtext0: #666666;
/* VFD blue + chrome accents */
--ctp-mauve: #00aaff; /* VFD blue — primary accent */
--ctp-lavender: #00c8ff;
--ctp-sky: #00e5ff; /* glow/highlight cyan */
--ctp-teal: #00cccc;
--ctp-blue: #0080e0;
--ctp-sapphire: #0060c0;
--ctp-green: #00cc66;
--ctp-yellow: #ccaa00;
--ctp-peach: #e07040;
--ctp-pink: #cc5588;
--ctp-flamingo: #bb4466;
--ctp-rosewater: #cc6666;
--ctp-maroon: #aa3333;
--ctp-red: #cc2222;
/* ── Semantic tokens ── */
--bg-app: #141414;
--bg-sidebar: #0a0a0a;
--bg-card: #1c1c1c;
--bg-hover: #242424;
--bg-player: #000000;
--bg-glass: rgba(20, 20, 20, 0.94);
--accent: #00aaff;
--accent-dim: rgba(0, 170, 255, 0.12);
--accent-glow: rgba(0, 170, 255, 0.35);
--text-primary: #b3b3b3;
--text-secondary:#888888;
--text-muted: #555555;
--border: #2a2a2a;
--border-subtle: #1c1c1c;
--positive: #00cc66;
--warning: #ccaa00;
--danger: #cc2222;
}
/* ── PowerDVD: Brushed aluminium chassis texture ── */
[data-theme='onyx-cinema'] .app-shell,
[data-theme='onyx-cinema'] .sidebar {
background-image: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.018) 0px,
rgba(255, 255, 255, 0.018) 1px,
transparent 1px,
transparent 3px
);
}
/* Sidebar: darker than chassis, drive-bay feel */
[data-theme='onyx-cinema'] .sidebar {
background-color: #0a0a0a;
border-right: 1px solid #1e1e1e;
box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.6);
}
/* ── VFD Display (Player Bar) ── */
[data-theme='onyx-cinema'] .player-bar {
background: #000000;
border-top: 2px solid #1a1a1a;
box-shadow:
inset 0 1px 0 rgba(0, 170, 255, 0.06),
0 -3px 20px rgba(0, 0, 0, 0.8);
}
/* Track name: VFD blue glow — the key effect */
[data-theme='onyx-cinema'] .player-track-name {
color: #00e5ff;
text-shadow:
0 0 6px rgba(0, 229, 255, 0.90),
0 0 14px rgba(0, 170, 255, 0.60),
0 0 28px rgba(0, 170, 255, 0.30);
letter-spacing: 0.04em;
}
[data-theme='onyx-cinema'] .player-track-artist {
color: #00aaff;
text-shadow: 0 0 6px rgba(0, 170, 255, 0.55);
opacity: 1;
}
/* Time display: VFD blue, tabular */
[data-theme='onyx-cinema'] .player-time {
color: #00aaff;
text-shadow: 0 0 5px rgba(0, 170, 255, 0.60);
}
/* ── Chrome transport buttons: silver metallic ── */
[data-theme='onyx-cinema'] .player-btn,
[data-theme='onyx-cinema'] .player-btn-primary {
background: linear-gradient(170deg, #e8e8e8 0%, #ffffff 30%, #c0c0c0 70%, #989898 100%);
color: #1a1a1a;
border: 1px solid #707070;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
[data-theme='onyx-cinema'] .player-btn:hover,
[data-theme='onyx-cinema'] .player-btn-primary:hover {
background: linear-gradient(170deg, #f2f2f2 0%, #ffffff 30%, #d0d0d0 70%, #aaaaaa 100%);
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
/* ── Regular buttons: dark matte chassis style ── */
[data-theme='onyx-cinema'] .btn {
background: linear-gradient(180deg, #2a2a2a 0%, #1c1c1c 100%);
color: #b3b3b3;
border: 1px solid #383838;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme='onyx-cinema'] .btn:hover {
background: linear-gradient(180deg, #333333 0%, #242424 100%);
}
[data-theme='onyx-cinema'] .btn-primary {
background: linear-gradient(180deg, #00bbff 0%, #0088dd 100%);
color: #000000;
border: 1px solid #0060bb;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 1px 4px rgba(0, 0, 0, 0.4),
0 0 8px rgba(0, 170, 255, 0.3);
}
/* Active queue round buttons: dark text on VFD blue */
[data-theme='onyx-cinema'] .queue-round-btn.active {
color: #000000;
}
/* Cards / glass panels: chassis inset */
[data-theme='onyx-cinema'] .glass,
[data-theme='onyx-cinema'] .card {
background: rgba(28, 28, 28, 0.85);
border: 1px solid #2a2a2a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* ─── Vintage Tube Radio — 1950s Bakelite & Vacuum Tube ─── */
[data-theme='vintage-tube-radio'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23BCAAA4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #1E110A; /* deep warm black-brown — dial background */
--ctp-mantle: #5D4037; /* speaker cloth brown — sidebar */
--ctp-base: #3E2723; /* polished bakelite — chassis */
--ctp-surface0: #4E342E;
--ctp-surface1: #5D4037;
--ctp-surface2: #6D4C41;
--ctp-overlay0: #795548;
--ctp-overlay1: #8D6E63;
--ctp-overlay2: #A1887F;
--ctp-text: #FFECB3; /* ivory/cream — dial lettering */
--ctp-subtext1: #D7CCC8;
--ctp-subtext0: #BCAAA4; /* aged ivory — secondary labels */
/* Tube glow + tarnished brass accents */
--ctp-mauve: #FF6F00; /* vacuum tube orange — primary accent */
--ctp-lavender: #FF8F00;
--ctp-yellow: #FFC107; /* warm dial backlight */
--ctp-peach: #FFB300;
--ctp-green: #558B2F;
--ctp-teal: #00695C;
--ctp-sky: #B08D57; /* tarnished brass */
--ctp-blue: #5C6BC0;
--ctp-sapphire: #3949AB;
--ctp-pink: #C2185B;
--ctp-flamingo: #AD1457;
--ctp-rosewater: #E91E63;
--ctp-maroon: #B71C1C;
--ctp-red: #C62828;
/* ── Semantic tokens ── */
--bg-app: #3E2723;
--bg-sidebar: #5D4037;
--bg-card: #4E342E;
--bg-hover: #5D4037;
--bg-player: #1E110A;
--bg-glass: rgba(62, 39, 35, 0.92);
--accent: #FF6F00;
--accent-dim: rgba(255, 111, 0, 0.15);
--accent-glow: rgba(255, 111, 0, 0.40);
--text-primary: #FFECB3;
--text-secondary:#BCAAA4;
--text-muted: #8D6E63;
--border: #B08D57; /* tarnished brass */
--border-subtle: #4E342E;
--positive: #558B2F;
--warning: #FFC107;
--danger: #C62828;
}
/* ── Tube Radio: polished bakelite chassis texture ── */
[data-theme='vintage-tube-radio'] .app-shell {
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 111, 0, 0.04) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(255, 193, 7, 0.03) 0%, transparent 50%),
#3E2723;
}
/* Sidebar: speaker cloth — soft radial texture */
[data-theme='vintage-tube-radio'] .sidebar {
background:
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.12) 0px,
rgba(0, 0, 0, 0.12) 1px,
transparent 1px,
transparent 4px
),
repeating-linear-gradient(
90deg,
rgba(0, 0, 0, 0.08) 0px,
rgba(0, 0, 0, 0.08) 1px,
transparent 1px,
transparent 4px
),
#5D4037;
border-right: 2px solid #B08D57;
box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.4);
}
/* ── Frequency dial (Player Bar) ── */
[data-theme='vintage-tube-radio'] .player-bar {
background: #1E110A;
border-top: 2px solid #B08D57;
box-shadow:
inset 0 1px 0 rgba(255, 193, 7, 0.08),
0 -3px 20px rgba(0, 0, 0, 0.7);
}
/* Track name: warm tube-glow */
[data-theme='vintage-tube-radio'] .player-track-name {
color: #FFC107;
text-shadow:
0 0 6px rgba(255, 193, 7, 0.90),
0 0 14px rgba(255, 111, 0, 0.60),
0 0 28px rgba(255, 111, 0, 0.30);
letter-spacing: 0.04em;
}
[data-theme='vintage-tube-radio'] .player-track-artist {
color: #FF8F00;
text-shadow: 0 0 6px rgba(255, 111, 0, 0.50);
opacity: 1;
}
[data-theme='vintage-tube-radio'] .player-time {
color: #FF8F00;
text-shadow: 0 0 5px rgba(255, 111, 0, 0.55);
}
/* ── Transport buttons: turned brass knobs ── */
[data-theme='vintage-tube-radio'] .player-btn,
[data-theme='vintage-tube-radio'] .player-btn-primary {
background: radial-gradient(circle at 38% 32%, #d4a843 0%, #b08d57 45%, #7a5e2a 100%);
color: #1E110A;
border: 1px solid #7a5e2a;
box-shadow:
0 3px 7px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 220, 120, 0.55),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
[data-theme='vintage-tube-radio'] .player-btn:hover,
[data-theme='vintage-tube-radio'] .player-btn-primary:hover {
background: radial-gradient(circle at 38% 32%, #e8bc55 0%, #c09a65 45%, #8a6e38 100%);
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.7),
0 1px 2px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 230, 140, 0.65),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* ── Regular buttons: bakelite style ── */
[data-theme='vintage-tube-radio'] .btn {
background: linear-gradient(180deg, #4E342E 0%, #3E2723 100%);
color: #FFECB3;
border: 1px solid #B08D57;
box-shadow:
inset 0 1px 0 rgba(255, 220, 150, 0.10),
0 1px 4px rgba(0, 0, 0, 0.5);
}
[data-theme='vintage-tube-radio'] .btn:hover {
background: linear-gradient(180deg, #5D4037 0%, #4E342E 100%);
}
[data-theme='vintage-tube-radio'] .btn-primary {
background: linear-gradient(180deg, #FF8F00 0%, #E65100 100%);
color: #1E110A;
border: 1px solid #BF360C;
box-shadow:
inset 0 1px 0 rgba(255, 220, 120, 0.35),
0 1px 4px rgba(0, 0, 0, 0.4),
0 0 10px rgba(255, 111, 0, 0.30);
}
/* Active queue buttons: dark text on orange */
[data-theme='vintage-tube-radio'] .queue-round-btn.active {
color: #1E110A;
}
/* Cards / panels: inset bakelite */
[data-theme='vintage-tube-radio'] .glass,
[data-theme='vintage-tube-radio'] .card {
background: rgba(78, 52, 46, 0.80);
border: 1px solid #B08D57;
box-shadow:
inset 0 1px 0 rgba(255, 220, 150, 0.06),
0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Content header: warm band */
[data-theme='vintage-tube-radio'] .content-header {
background: linear-gradient(180deg, rgba(93, 64, 55, 0.60) 0%, rgba(62, 39, 35, 0.20) 100%);
border-bottom: 1px solid #B08D57;
}
/* ─── Windows 7 Aero — Aero Glass & Frutiger Aero ─── */
[data-theme='aero-glass'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234c607a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #1d4268; /* Aero taskbar navy */
--ctp-mantle: #e6f0fa; /* inner glass panel */
--ctp-base: #cddbed; /* window glass blue-gray */
--ctp-surface0: #d8e6f2;
--ctp-surface1: #e0ecf5;
--ctp-surface2: #e8f2f8;
--ctp-overlay0: #a9c4eb;
--ctp-overlay1: #8ab0de;
--ctp-overlay2: #6a9cd0;
--ctp-text: #1a1a1a;
--ctp-subtext1: #2e4260;
--ctp-subtext0: #4c607a;
/* Aero blue highlight palette */
--ctp-mauve: #1878e8; /* Windows highlight blue */
--ctp-lavender: #3399ff;
--ctp-sky: #5bb3ff;
--ctp-blue: #1d4268;
--ctp-sapphire: #1366c8;
--ctp-teal: #0099aa;
--ctp-green: #107c10;
--ctp-yellow: #f7c948;
--ctp-peach: #e8890c;
--ctp-pink: #e3008c;
--ctp-flamingo: #c50f1f;
--ctp-rosewater: #da3b01;
--ctp-maroon: #a4262c;
--ctp-red: #c42b1c;
/* ── Semantic tokens ── */
--bg-app: #cddbed;
--bg-sidebar: #e6f0fa;
--bg-card: #d8e6f2;
--bg-hover: #c0d8ef;
--bg-player: #1d4268;
--bg-glass: rgba(205, 219, 237, 0.70);
--accent: #1878e8; /* 4.0:1 on #cddbed ✓ */
--accent-dim: rgba(24, 120, 232, 0.12);
--accent-glow: rgba(24, 120, 232, 0.35);
--text-primary: #1a1a1a;
--text-secondary:#2e4260;
--text-muted: #4c607a;
--border: #a9c4eb;
--border-subtle: #d0e3f5;
--positive: #107c10;
--warning: #c87400;
--danger: #c42b1c;
}
/* ── Aero: background — soft sky gradient ── */
[data-theme='aero-glass'] .app-shell {
background: linear-gradient(160deg, #daeaf8 0%, #cddbed 45%, #b8d0e8 100%);
}
/* ── Sidebar: Aero glass panel with backdrop blur ── */
[data-theme='aero-glass'] .sidebar {
background: rgba(230, 240, 250, 0.62);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-right: 1px solid rgba(169, 196, 235, 0.75);
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6);
}
/* ── Player bar: Aero taskbar — deep glass navy ── */
[data-theme='aero-glass'] .player-bar {
background: rgba(29, 66, 104, 0.90);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(100, 160, 220, 0.45);
box-shadow: inset 0 1px 0 rgba(120, 180, 255, 0.15), 0 -2px 12px rgba(0, 0, 0, 0.3);
}
/* Track name: white on dark taskbar, subtle blue glow */
[data-theme='aero-glass'] .player-track-name {
color: #ffffff;
text-shadow: 0 0 8px rgba(51, 153, 255, 0.60), 0 1px 2px rgba(0, 0, 0, 0.4);
}
[data-theme='aero-glass'] .player-track-artist {
color: #a9c8f0;
opacity: 1;
}
[data-theme='aero-glass'] .player-time {
color: #a9c8f0;
}
/* ── Transport buttons: glossy Aero pill ── */
[data-theme='aero-glass'] .player-btn,
[data-theme='aero-glass'] .player-btn-primary {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.75) 0%,
rgba(200, 228, 255, 0.80) 48%,
rgba(90, 160, 230, 0.90) 50%,
rgba(40, 120, 200, 0.95) 100%
);
color: #ffffff;
border: 1px solid rgba(24, 80, 180, 0.55);
border-radius: 50%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 2px 6px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(100, 160, 220, 0.3);
}
[data-theme='aero-glass'] .player-btn:hover,
[data-theme='aero-glass'] .player-btn-primary:hover {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.85) 0%,
rgba(215, 238, 255, 0.88) 48%,
rgba(110, 175, 245, 0.93) 50%,
rgba(55, 135, 215, 0.98) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 3px 8px rgba(0, 0, 0, 0.35),
0 0 8px rgba(51, 153, 255, 0.40);
}
/* ── Regular buttons: glossy Aero style ── */
[data-theme='aero-glass'] .btn {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.82) 0%,
rgba(255, 255, 255, 0.82) 48%,
rgba(195, 220, 245, 0.92) 50%,
rgba(160, 200, 240, 0.95) 100%
);
color: #1a1a1a;
border: 1px solid rgba(130, 175, 220, 0.70);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.90),
0 1px 3px rgba(0, 0, 0, 0.18);
border-radius: 4px;
}
[data-theme='aero-glass'] .btn:hover {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.92) 0%,
rgba(255, 255, 255, 0.92) 48%,
rgba(210, 232, 252, 0.95) 50%,
rgba(175, 212, 248, 0.98) 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 1px 4px rgba(0, 0, 0, 0.20),
0 0 6px rgba(51, 153, 255, 0.25);
}
[data-theme='aero-glass'] .btn-primary {
background: linear-gradient(180deg,
rgba(110, 180, 255, 0.90) 0%,
rgba(80, 155, 240, 0.90) 48%,
rgba(24, 100, 200, 0.95) 50%,
rgba(15, 75, 170, 0.98) 100%
);
color: #ffffff;
border: 1px solid rgba(15, 60, 150, 0.70);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 1px 4px rgba(0, 0, 0, 0.3),
0 0 8px rgba(51, 153, 255, 0.35);
}
/* Active queue buttons: white text on blue */
[data-theme='aero-glass'] .queue-round-btn.active {
color: #ffffff;
box-shadow: 0 0 6px rgba(51, 153, 255, 0.50);
}
/* Cards / panels: frosted glass */
[data-theme='aero-glass'] .glass,
[data-theme='aero-glass'] .card {
background: rgba(230, 240, 250, 0.60);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(169, 196, 235, 0.65);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 2px 8px rgba(0, 0, 0, 0.12);
}
/* Content header: glassy strip */
[data-theme='aero-glass'] .content-header {
background: rgba(210, 230, 248, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(169, 196, 235, 0.60);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}
/* ─── Windows XP Luna — Classic 2001 ─── */
[data-theme='luna-teal'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* ── Palette ── */
--ctp-crust: #0041b8;
--ctp-mantle: #0055e5;
--ctp-base: #ece9d8;
--ctp-surface0: #f5f3ec;
--ctp-surface1: #faf9f6;
--ctp-surface2: #ffffff;
--ctp-overlay0: #c0bba8;
--ctp-overlay1: #8a8675;
--ctp-overlay2: #5e5a4c;
--ctp-text: #000000;
--ctp-subtext1: #1a1a1a;
--ctp-subtext0: #444444;
/* XP green + Luna blue family */
--ctp-mauve: #3c9d29;
--ctp-lavender: #52b83c;
--ctp-green: #3c9d29;
--ctp-teal: #007c8a;
--ctp-sky: #8fa8f4;
--ctp-blue: #0055e5;
--ctp-sapphire: #0041b8;
--ctp-pink: #cc2288;
--ctp-flamingo: #cc2020;
--ctp-rosewater: #dd4400;
--ctp-yellow: #b87800;
--ctp-peach: #cc6600;
--ctp-maroon: #aa1111;
--ctp-red: #cc1111;
/* ── Semantic tokens ── */
--bg-app: #ece9d8;
--bg-sidebar: #8fa8f4;
--bg-card: #f5f3ec;
--bg-hover: #dddac8;
--bg-player: #0055e5;
--bg-glass: rgba(236, 233, 216, 0.92);
--accent: #3c9d29;
--accent-dim: rgba(60, 157, 41, 0.14);
--accent-glow: rgba(60, 157, 41, 0.35);
--volume-accent: #3c9d29;
--text-primary: #000000;
--text-secondary:#333333;
--text-muted: #666666;
--border: #003399;
--border-subtle: #ccc8b4;
--positive: #3c9d29;
--warning: #b87800;
--danger: #cc1111;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
}
/* ── Luna: Explorer window background ── */
[data-theme='luna-teal'] .app-shell {
background: #ece9d8;
}
/* ── Sidebar: Luna Explorer task pane ── */
[data-theme='luna-teal'] .sidebar {
background: linear-gradient(180deg, #a8bef8 0%, #8fa8f4 30%, #7a96ee 100%);
border-right: 2px solid #003399;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.35), 2px 0 6px rgba(0, 0, 0, 0.18);
}
/* Sidebar text: dark on medium blue */
[data-theme='luna-teal'] .sidebar-link,
[data-theme='luna-teal'] .sidebar-section-title,
[data-theme='luna-teal'] .sidebar-logo-text,
[data-theme='luna-teal'] .nav-section-label,
[data-theme='luna-teal'] .brand-name {
color: #000e40;
}
/* Nav links: override accent-based active state */
[data-theme='luna-teal'] .nav-link {
color: #000e40;
}
[data-theme='luna-teal'] .nav-link:hover {
background: rgba(255, 255, 255, 0.30);
color: #000000;
}
[data-theme='luna-teal'] .nav-link.active {
background: rgba(0, 0, 80, 0.18);
color: #ffffff;
}
[data-theme='luna-teal'] .nav-link.active::before {
background: #ffffff;
}
[data-theme='luna-teal'] .nav-link.active svg,
[data-theme='luna-teal'] .nav-link:hover svg {
opacity: 1;
}
/* Now Playing nav link: same treatment */
[data-theme='luna-teal'] .nav-link-nowplaying {
background: rgba(0, 0, 80, 0.14);
color: #000e40;
}
[data-theme='luna-teal'] .nav-link-nowplaying:hover {
background: rgba(255, 255, 255, 0.30);
color: #000000;
}
[data-theme='luna-teal'] .nav-link-nowplaying.active {
background: rgba(0, 0, 80, 0.22);
color: #ffffff;
}
/* ── Player bar: Luna taskbar — glossy blue ── */
[data-theme='luna-teal'] .player-bar {
background: linear-gradient(180deg,
#4488ff 0%,
#0055e5 40%,
#0044cc 70%,
#0038b0 100%
);
border-top: 2px solid #6699ff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
inset 0 2px 0 rgba(255, 255, 255, 0.18),
0 -2px 8px rgba(0, 0, 0, 0.30);
}
/* Track name: white with XP title-bar glow */
[data-theme='luna-teal'] .player-track-name {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 8px rgba(100, 160, 255, 0.50);
font-weight: 700;
}
[data-theme='luna-teal'] .player-track-artist {
color: #b8d0ff;
opacity: 1;
}
[data-theme='luna-teal'] .player-time {
color: #b8d0ff;
}
/* ── Transport buttons: Luna plastic/gel ── */
[data-theme='luna-teal'] .player-btn,
[data-theme='luna-teal'] .player-btn-primary {
background: linear-gradient(180deg,
#6699ff 0%,
#3366ee 45%,
#0044cc 50%,
#0033aa 100%
);
color: #ffffff;
border: 1px solid #002288;
border-radius: 50%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.60),
0 2px 5px rgba(0, 0, 0, 0.40);
}
[data-theme='luna-teal'] .player-btn:hover,
[data-theme='luna-teal'] .player-btn-primary:hover {
background: linear-gradient(180deg,
#88aaff 0%,
#4477ff 45%,
#1155dd 50%,
#0044bb 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 3px 8px rgba(0, 0, 0, 0.40),
0 0 10px rgba(100, 160, 255, 0.40);
}
/* ── Regular buttons: XP 3D bevel ── */
[data-theme='luna-teal'] .btn {
background: linear-gradient(180deg, #f5f3ec 0%, #f5f3ec 48%, #e0ddd0 50%, #d4d0c0 100%);
color: #000000;
border: 1px solid #888480;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.90),
inset 1px 0 0 rgba(255, 255, 255, 0.70),
0 1px 2px rgba(0, 0, 0, 0.22);
border-radius: 4px;
}
[data-theme='luna-teal'] .btn:hover {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 48%, #e8e5d8 50%, #dcd8c8 100%);
border-color: #0055e5;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 1),
0 1px 3px rgba(0, 0, 0, 0.20);
}
[data-theme='luna-teal'] .btn-primary {
background: linear-gradient(180deg,
#52cc3c 0%,
#3c9d29 45%,
#2e8020 50%,
#236618 100%
);
color: #ffffff;
border: 1px solid #1a5010;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.50),
0 1px 3px rgba(0, 0, 0, 0.30);
border-radius: 6px;
}
[data-theme='luna-teal'] .btn-primary:hover {
background: linear-gradient(180deg,
#66dd50 0%,
#4db035 45%,
#3c9d29 50%,
#2e8020 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
0 1px 4px rgba(0, 0, 0, 0.30),
0 0 8px rgba(60, 157, 41, 0.40);
}
[data-theme='luna-teal'] .btn-surface {
background: linear-gradient(180deg, #f5f3ec 0%, #e0ddd0 100%);
color: #000000;
border: 1px solid #888480;
}
/* ── Cards: XP dialog/panel style ── */
[data-theme='luna-teal'] .card {
background: #f5f3ec;
border: 1px solid #c0bba8;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
0 1px 4px rgba(0, 0, 0, 0.12);
border-radius: 6px;
}
/* ── Content header: Luna title bar strip ── */
[data-theme='luna-teal'] .content-header {
background: linear-gradient(180deg, #b8c8f8 0%, #8fa8f4 100%);
border-bottom: 2px solid #003399;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 2px 4px rgba(0, 0, 0, 0.12);
}
/* Connection indicators: dark text on blue header */
[data-theme='luna-teal'] .connection-type,
[data-theme='luna-teal'] .connection-server {
color: #000e40;
}
/* Active queue item: deep XP blue instead of green */
[data-theme='luna-teal'] .queue-item.active {
background: rgba(0, 55, 180, 0.10);
color: #0041b8;
}
[data-theme='luna-teal'] .queue-item.active .queue-item-artist,
[data-theme='luna-teal'] .queue-item.active .queue-item-duration {
color: #0055e5;
opacity: 0.8;
}
/* NowPlaying page active track title */
[data-theme='luna-teal'] .np-queue-item-active {
color: #0041b8;
}
[data-theme='luna-teal'] .np-queue-item.active {
background: rgba(0, 55, 180, 0.08);
}
/* NowPlaying album tracklist active */
[data-theme='luna-teal'] .np-album-track.active .np-album-track-title,
[data-theme='luna-teal'] .np-album-track.active .np-album-track-num {
color: #0041b8;
}
/* ─── macOS Ventura Light ─── */
[data-theme='cupertino-light'] {
color-scheme: light;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23636366%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* Palette */
--ctp-crust: #f5f5f7;
--ctp-mantle: #e8e8ed;
--ctp-base: #ffffff;
--ctp-surface0: #f2f2f7;
--ctp-surface1: #e5e5ea;
--ctp-surface2: #d1d1d6;
--ctp-overlay0: #8e8e93;
--ctp-overlay1: #6c6c70;
--ctp-overlay2: #48484a;
--ctp-text: #1c1c1e;
--ctp-subtext1: #3a3a3c;
--ctp-subtext0: #636366;
--ctp-mauve: #0071e3;
--ctp-lavender: #2c9af0;
--ctp-green: #34c759;
--ctp-teal: #5ac8fa;
--ctp-sky: #32ade6;
--ctp-blue: #0071e3;
--ctp-sapphire: #0051a8;
--ctp-pink: #ff2d55;
--ctp-flamingo: #ff6b81;
--ctp-rosewater:#ffd6d6;
--ctp-yellow: #ffd60a;
--ctp-peach: #ff9f0a;
--ctp-maroon: #c0392b;
--ctp-red: #ff3b30;
/* Semantic tokens */
--bg-app: #ffffff;
--bg-sidebar: #f2f2f7;
--bg-card: #ffffff;
--bg-hover: #f2f2f7;
--bg-player: rgba(255, 255, 255, 0.85);
--bg-glass: rgba(255, 255, 255, 0.72);
--accent: #0071e3;
--accent-dim: rgba(0, 113, 227, 0.12);
--accent-glow: rgba(0, 113, 227, 0.30);
--text-primary: #1c1c1e;
--text-secondary:#3a3a3c;
--text-muted: #8e8e93;
--border: #d1d1d6;
--border-subtle: #e5e5ea;
--positive: #34c759;
--warning: #ff9f0a;
--danger: #ff3b30;
--shadow-dropdown: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme='cupertino-light'] .app-shell {
background: #f2f2f7;
}
[data-theme='cupertino-light'] .sidebar {
background: rgba(242, 242, 247, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid rgba(0,0,0,0.08);
}
[data-theme='cupertino-light'] .player-bar {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid rgba(0,0,0,0.10);
box-shadow: 0 -1px 0 rgba(0,0,0,0.06);
}
/* Player text: dark on light bar */
[data-theme='cupertino-light'] .player-track-name {
color: #1c1c1e;
}
[data-theme='cupertino-light'] .player-track-artist {
color: #636366;
}
[data-theme='cupertino-light'] .player-time {
color: #636366;
}
[data-theme='cupertino-light'] .player-btn {
color: #1c1c1e;
}
[data-theme='cupertino-light'] .player-btn:hover {
color: #0071e3;
background: rgba(0, 113, 227, 0.10);
}
[data-theme='cupertino-light'] .player-btn-primary {
color: #ffffff;
background: #0071e3;
box-shadow: 0 2px 8px rgba(0, 113, 227, 0.35);
}
[data-theme='cupertino-light'] .player-btn-primary:hover {
background: #0077ed;
box-shadow: 0 4px 12px rgba(0, 113, 227, 0.45);
}
/* Nav links */
[data-theme='cupertino-light'] .nav-link {
color: #3a3a3c;
}
[data-theme='cupertino-light'] .nav-link:hover {
background: rgba(0,0,0,0.06);
color: #1c1c1e;
}
[data-theme='cupertino-light'] .nav-link.active {
background: #0071e3;
color: #ffffff;
border-left-color: transparent;
border-radius: 8px;
}
[data-theme='cupertino-light'] .nav-link.active::before {
display: none;
}
[data-theme='cupertino-light'] .nav-link-nowplaying {
color: #0071e3;
font-weight: 600;
}
/* Queue active */
[data-theme='cupertino-light'] .queue-item.active {
background: rgba(0, 113, 227, 0.10);
color: #0071e3;
}
/* NowPlaying overrides */
[data-theme='cupertino-light'] .np-queue-item-active {
color: #0071e3;
}
[data-theme='cupertino-light'] .np-album-track.active .np-album-track-title,
[data-theme='cupertino-light'] .np-album-track.active .np-album-track-num {
color: #0071e3;
}
/* ─── macOS Ventura Dark ─── */
[data-theme='cupertino-dark'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2398989d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
/* Palette */
--ctp-crust: #0d0d0e;
--ctp-mantle: #161617;
--ctp-base: #1e1e1f;
--ctp-surface0: #2d2d2f;
--ctp-surface1: #3a3a3c;
--ctp-surface2: #48484a;
--ctp-overlay0: #636366;
--ctp-overlay1: #8e8e93;
--ctp-overlay2: #aeaeb2;
--ctp-text: #f5f5f7;
--ctp-subtext1: #e5e5ea;
--ctp-subtext0: #c7c7cc;
--ctp-mauve: #007aff;
--ctp-lavender: #409cff;
--ctp-green: #30d158;
--ctp-teal: #5ac8fa;
--ctp-sky: #32ade6;
--ctp-blue: #007aff;
--ctp-sapphire: #0a84ff;
--ctp-pink: #ff375f;
--ctp-flamingo: #ff6b81;
--ctp-rosewater:#ffd6d6;
--ctp-yellow: #ffd60a;
--ctp-peach: #ff9f0a;
--ctp-maroon: #c0392b;
--ctp-red: #ff453a;
/* Semantic tokens */
--bg-app: #1e1e1f;
--bg-sidebar: #161617;
--bg-card: #2d2d2f;
--bg-hover: #3a3a3c;
--bg-player: rgba(16, 16, 17, 0.90);
--bg-glass: rgba(30, 30, 31, 0.80);
--accent: #007aff;
--accent-dim: rgba(0, 122, 255, 0.15);
--accent-glow: rgba(0, 122, 255, 0.35);
--text-primary: #f5f5f7;
--text-secondary:#c7c7cc;
--text-muted: #8e8e93;
--border: #3a3a3c;
--border-subtle: #2d2d2f;
--positive: #30d158;
--warning: #ff9f0a;
--danger: #ff453a;
--shadow-dropdown: 0 8px 30px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.30);
}
[data-theme='cupertino-dark'] .app-shell {
background: #1e1e1f;
}
[data-theme='cupertino-dark'] .sidebar {
background: rgba(22, 22, 23, 0.90);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-right: 1px solid rgba(255,255,255,0.06);
}
[data-theme='cupertino-dark'] .player-bar {
background: rgba(16, 16, 17, 0.90);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border-top: 1px solid rgba(255,255,255,0.06);
}
[data-theme='cupertino-dark'] .player-btn:hover {
color: #007aff;
background: rgba(0, 122, 255, 0.12);
}
[data-theme='cupertino-dark'] .player-btn-primary {
color: #ffffff;
background: #007aff;
box-shadow: 0 2px 8px rgba(0, 122, 255, 0.40);
}
[data-theme='cupertino-dark'] .player-btn-primary:hover {
background: #0a84ff;
box-shadow: 0 4px 14px rgba(0, 122, 255, 0.50);
}
/* Nav links */
[data-theme='cupertino-dark'] .nav-link.active {
background: #007aff;
color: #ffffff;
border-left-color: transparent;
border-radius: 8px;
}
[data-theme='cupertino-dark'] .nav-link.active::before {
display: none;
}
[data-theme='cupertino-dark'] .nav-link-nowplaying {
color: #409cff;
font-weight: 600;
}
/* Queue active */
[data-theme='cupertino-dark'] .queue-item.active {
background: rgba(0, 122, 255, 0.15);
color: #007aff;
}
/* NowPlaying overrides */
[data-theme='cupertino-dark'] .np-queue-item-active {
color: #007aff;
}
[data-theme='cupertino-dark'] .np-album-track.active .np-album-track-title,
[data-theme='cupertino-dark'] .np-album-track.active .np-album-track-num {
color: #007aff;
}
/* ─── Neon Drift ─── */
[data-theme='neon-drift'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #080916;
--ctp-mantle: #0d0e21;
--ctp-base: #12132c;
--ctp-surface0: #1a1b3b;
--ctp-surface1: #242650;
--ctp-surface2: #2f3166;
--ctp-overlay0: #51548a;
--ctp-overlay1: #7277ad;
--ctp-overlay2: #9299cf;
--ctp-text: #e0e2ff;
--ctp-subtext1: #aeb3e0;
--ctp-subtext0: #8b91c4;
--ctp-mauve: #00f2ff;
--ctp-lavender: #7000ff;
--ctp-green: #00ffa3;
--ctp-teal: #00d4cc;
--ctp-sky: #00c8ff;
--ctp-blue: #0077ff;
--ctp-sapphire: #0055cc;
--ctp-pink: #ff00cc;
--ctp-flamingo: #ff44aa;
--ctp-rosewater:#ffaadd;
--ctp-yellow: #ffe600;
--ctp-peach: #ff9900;
--ctp-maroon: #cc2244;
--ctp-red: #ff2d55;
--bg-app: #12132c;
--bg-sidebar: #0d0e21;
--bg-card: #1a1b3b;
--bg-hover: #242650;
--bg-player: #080916;
--bg-glass: rgba(13, 14, 33, 0.85);
--accent: #00f2ff;
--accent-dim: rgba(0, 242, 255, 0.12);
--accent-glow: rgba(0, 242, 255, 0.40);
--text-primary: #e0e2ff;
--text-secondary:#aeb3e0;
--text-muted: #7277ad;
--border: #2f3166;
--border-subtle: #242650;
--positive: #00ffa3;
--warning: #ffe600;
--danger: #ff2d55;
--radius-md: 8px;
--radius-lg: 12px;
}
[data-theme='neon-drift'] .player-bar {
border-top: 1px solid rgba(0, 242, 255, 0.20);
box-shadow: 0 -10px 30px -15px rgba(0, 242, 255, 0.15);
}
[data-theme='neon-drift'] .player-track-name {
color: #00f2ff;
text-shadow: 0 0 12px rgba(0, 242, 255, 0.30);
font-weight: 600;
}
[data-theme='neon-drift'] .nav-link.active {
color: #00f2ff;
text-shadow: 0 0 8px rgba(0, 242, 255, 0.50);
}
[data-theme='neon-drift'] .nav-link.active::before {
box-shadow: 0 0 10px #00f2ff;
}
[data-theme='neon-drift'] .btn-primary {
background: linear-gradient(135deg, #00f2ff, #0077ff);
border: none;
color: #080916 !important;
box-shadow: 0 4px 15px rgba(0, 242, 255, 0.30);
}
[data-theme='neon-drift'] input[type="range"]::-webkit-slider-thumb {
background: white;
box-shadow: 0 0 10px #00f2ff;
}
/* ─── Font overrides ─── */
[data-font='outfit'] {
--font-sans: 'Outfit', system-ui, sans-serif;
--font-display: 'Outfit', sans-serif;
}
[data-font='dm-sans'] {
--font-sans: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Sans', sans-serif;
}
[data-font='nunito'] {
--font-sans: 'Nunito', system-ui, sans-serif;
--font-display: 'Nunito', sans-serif;
}
[data-font='rubik'] {
--font-sans: 'Rubik', system-ui, sans-serif;
--font-display: 'Rubik', sans-serif;
}
[data-font='space-grotesk'] {
--font-sans: 'Space Grotesk', system-ui, sans-serif;
--font-display: 'Space Grotesk', sans-serif;
}
[data-font='figtree'] {
--font-sans: 'Figtree', system-ui, sans-serif;
--font-display: 'Figtree', sans-serif;
}
[data-font='manrope'] {
--font-sans: 'Manrope', system-ui, sans-serif;
--font-display: 'Manrope', sans-serif;
}
[data-font='plus-jakarta-sans'] {
--font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-display: 'Plus Jakarta Sans', sans-serif;
}
[data-font='lexend'] {
--font-sans: 'Lexend', system-ui, sans-serif;
--font-display: 'Lexend', sans-serif;
}
/* ─── Equalizer bars animation ─── */
.eq-bar {
display: inline-block;
width: 3px;
background: var(--accent);
border-radius: 2px;
transform-origin: bottom;
}
.eq-bar:nth-child(1) { animation: wave 0.8s ease-in-out 0.0s infinite; }
.eq-bar:nth-child(2) { animation: wave 0.8s ease-in-out 0.15s infinite; }
.eq-bar:nth-child(3) { animation: wave 0.8s ease-in-out 0.3s infinite; }
.eq-bar:nth-child(4) { animation: wave 0.8s ease-in-out 0.45s infinite; }
/* ─────────────────────────────────────────────────────────────
Middle Earth — Epic Fantasy / Cinematic
───────────────────────────────────────────────────────────── */
[data-theme='middle-earth'] {
color-scheme: light;
--color-star-active: #4a3728;
--color-star-inactive: #6e5a42;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234a3728%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #2a1d15;
--ctp-mantle: #3b2a1e;
--ctp-base: #f4e4bc;
--ctp-surface0: #ebd5a3;
--ctp-surface1: #dec48d;
--ctp-surface2: #cbb07c;
--ctp-overlay0: #8c7356;
--ctp-overlay1: #6e5a42;
--ctp-overlay2: #4a3728;
--ctp-text: #2a1d15;
--ctp-subtext1: #4a3728;
--ctp-subtext0: #6e5a42;
--ctp-mauve: #d4af37;
--ctp-lavender: #e5c158;
--ctp-green: #4a7040;
--ctp-teal: #3e5a5a;
--ctp-sky: #78a2c0;
--ctp-blue: #4a6b8a;
--ctp-sapphire: #2a4b6a;
--ctp-pink: #b05a7e;
--ctp-flamingo: #c07a7a;
--ctp-rosewater:#e5caca;
--ctp-yellow: #d4af37;
--ctp-peach: #c08a4a;
--ctp-maroon: #6a2a2a;
--ctp-red: #8a2a2a;
--bg-app: #f4e4bc;
--bg-sidebar: #3b2a1e;
--bg-card: #ebd5a3;
--bg-hover: rgba(74, 55, 40, 0.1);
--bg-player: #2a1d15;
--bg-glass: rgba(244, 228, 188, 0.85);
--accent: #d4af37;
--accent-dim: rgba(212, 175, 55, 0.2);
--accent-glow: rgba(212, 175, 55, 0.4);
--text-primary: #2a1d15;
--text-secondary:#4a3728;
--text-muted: #8c7356;
--border: #cbb07c;
--border-subtle: #dec48d;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}
[data-theme='middle-earth'] .player-track-name {
color: #f4e4bc;
font-family: Georgia, 'Times New Roman', serif;
letter-spacing: 0.5px;
}
[data-theme='middle-earth'] .player-track-artist { color: #d4af37; }
[data-theme='middle-earth'] .player-time { color: #dec48d; }
[data-theme='middle-earth'] .sidebar {
border-right: 1px solid rgba(212, 175, 55, 0.3);
}
[data-theme='middle-earth'] .nav-link { color: #dec48d; }
[data-theme='middle-earth'] .nav-link:hover { background: rgba(212, 175, 55, 0.1); color: #f4e4bc; }
[data-theme='middle-earth'] .nav-link.active { color: #d4af37; background: rgba(212, 175, 55, 0.15); }
[data-theme='middle-earth'] .nav-link.active::before { background-color: #d4af37; box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
[data-theme='middle-earth'] .btn-primary {
background: #d4af37;
color: #2a1d15;
font-weight: 700;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
[data-theme='middle-earth'] .player-btn { color: #dec48d; }
[data-theme='middle-earth'] .player-btn:hover { color: #d4af37; }
[data-theme='middle-earth'] .player-btn-primary { color: #2a1d15; }
[data-theme='middle-earth'] .player-btn-primary:hover { color: #2a1d15; }
/* Queue + Lyrics laufen auf dunklem Sidebar-Hintergrund — helle Textfarben nötig */
[data-theme='middle-earth'] .queue-current-info h3 { color: #f4e4bc; }
[data-theme='middle-earth'] .queue-current-sub { color: #d4af37; }
[data-theme='middle-earth'] .queue-item-title { color: #f4e4bc; }
[data-theme='middle-earth'] .queue-item-artist { color: #cbb07c; }
[data-theme='middle-earth'] .queue-tab-btn { color: #cbb07c; }
[data-theme='middle-earth'] .queue-tab-btn:hover { color: #f4e4bc; background: rgba(212, 175, 55, 0.1); }
[data-theme='middle-earth'] .queue-tab-btn.active { color: #d4af37; }
[data-theme='middle-earth'] .lyrics-line { color: #8c7356; }
[data-theme='middle-earth'] .lyrics-line.active { color: #f4e4bc; }
[data-theme='middle-earth'] .lyrics-plain-line { color: #cbb07c; }
[data-theme='middle-earth'] .lyrics-status { color: #8c7356; }
/* Dezentes Pergament-Noise über der App */
[data-theme='middle-earth'] .app-shell::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px 200px;
}
/* ─────────────────────────────────────────────────────────────
Morpheus — Matrix Style
───────────────────────────────────────────────────────────── */
[data-theme='morpheus'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300ff41%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #000000;
--ctp-mantle: #050505;
--ctp-base: #0a0a0a;
--ctp-surface0: #0d1a0d;
--ctp-surface1: #1a2e1a;
--ctp-surface2: #243d24;
--ctp-overlay0: #003b00;
--ctp-overlay1: #008f11;
--ctp-overlay2: #00ff41;
--ctp-text: #00ff41;
--ctp-subtext1: #00cc33;
--ctp-subtext0: #008f11;
--ctp-mauve: #00ff41;
--ctp-lavender: #adff2f;
--ctp-green: #00ff41;
--ctp-teal: #20c20e;
--ctp-sky: #00ff41;
--ctp-blue: #00ff41;
--ctp-sapphire: #008f11;
--ctp-pink: #003b00;
--ctp-flamingo: #003b00;
--ctp-rosewater:#d2ff00;
--ctp-yellow: #adff2f;
--ctp-peach: #00ff41;
--ctp-maroon: #003b00;
--ctp-red: #ff0000;
--bg-app: #0a0a0a;
--bg-sidebar: #000000;
--bg-card: #0d1a0d;
--bg-hover: rgba(0, 255, 65, 0.1);
--bg-player: #000000;
--bg-glass: rgba(0, 0, 0, 0.85);
--accent: #00ff41;
--accent-dim: rgba(0, 255, 65, 0.15);
--accent-glow: rgba(0, 255, 65, 0.4);
--text-primary: #00ff41;
--text-secondary:#00cc33;
--text-muted: #1a7a2a;
--border: #003b00;
--border-subtle: #001a00;
--positive: #00ff41;
--warning: #adff2f;
--danger: #ff0033;
--radius-sm: 0px;
--radius-md: 2px;
--radius-lg: 4px;
}
[data-theme='morpheus'] .player-track-name {
font-family: 'JetBrains Mono', 'Fira Code', monospace;
text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
letter-spacing: 0.05em;
}
[data-theme='morpheus'] .player-track-artist,
[data-theme='morpheus'] .player-time {
font-family: 'JetBrains Mono', monospace;
opacity: 0.8;
}
[data-theme='morpheus'] .nav-link.active {
background: linear-gradient(90deg, rgba(0, 255, 65, 0.1) 0%, transparent 100%);
text-shadow: 0 0 5px rgba(0, 255, 65, 0.4);
}
[data-theme='morpheus'] .nav-link.active::before {
box-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}
[data-theme='morpheus'] .player-bar {
box-shadow: 0 -5px 15px rgba(0, 255, 65, 0.05);
}
[data-theme='morpheus'] .sidebar {
border-right: 1px solid #003b00;
}
/* ─────────────────────────────────────────────────────────────
Pandora — Bioluminescent Sci-Fi
───────────────────────────────────────────────────────────── */
[data-theme='pandora'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #040a0e;
--ctp-mantle: #08141a;
--ctp-base: #0c1b22;
--ctp-surface0: #142b35;
--ctp-surface1: #1a3844;
--ctp-surface2: #244b5a;
--ctp-overlay0: #4a6d7c;
--ctp-overlay1: #6a8fa0;
--ctp-overlay2: #8ab1c4;
--ctp-text: #e0f7fa;
--ctp-subtext1: #b2ebf2;
--ctp-subtext0: #80deea;
--ctp-mauve: #00f2ff;
--ctp-lavender: #80f9ff;
--ctp-green: #4ade80;
--ctp-teal: #2dd4bf;
--ctp-sky: #38bdf8;
--ctp-blue: #60a5fa;
--ctp-sapphire: #2563eb;
--ctp-pink: #f472b6;
--ctp-flamingo: #fb7185;
--ctp-rosewater:#ffe4e6;
--ctp-yellow: #fbbf24;
--ctp-peach: #fb923c;
--ctp-maroon: #e11d48;
--ctp-red: #f87171;
--bg-app: #0c1b22;
--bg-sidebar: #08141a;
--bg-card: rgba(20, 43, 53, 0.6);
--bg-hover: rgba(26, 56, 68, 0.4);
--bg-player: #040a0e;
--bg-glass: rgba(12, 27, 34, 0.7);
--accent: #00f2ff;
--accent-dim: rgba(0, 242, 255, 0.15);
--accent-glow: rgba(0, 242, 255, 0.4);
--text-primary: #e0f7fa;
--text-secondary:#b2ebf2;
--text-muted: #6a8fa0;
--border: #1a3844;
--border-subtle: #0f242d;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
}
[data-theme='pandora'] .sidebar {
backdrop-filter: blur(12px);
border-right: 1px solid rgba(0, 242, 255, 0.1);
}
[data-theme='pandora'] .player-bar {
border-top: 1px solid rgba(0, 242, 255, 0.2);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}
[data-theme='pandora'] .player-track-name {
color: #00f2ff;
text-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
font-weight: 600;
}
[data-theme='pandora'] .btn-primary {
background: linear-gradient(135deg, #00f2ff, #0088cc);
box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
color: #040a0e;
}
[data-theme='pandora'] .nav-link.active {
background: linear-gradient(90deg, rgba(0, 242, 255, 0.15), transparent);
color: #00f2ff;
text-shadow: 0 0 5px rgba(0, 242, 255, 0.4);
}
[data-theme='pandora'] .card:hover {
border: 1px solid rgba(0, 242, 255, 0.3);
box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
}
/* ─────────────────────────────────────────────────────────────
Stark HUD — Iron Man / Arc Reactor
───────────────────────────────────────────────────────────── */
[data-theme='stark-hud'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #05070a;
--ctp-mantle: #080c12;
--ctp-base: #0b0f15;
--ctp-surface0: #141b24;
--ctp-surface1: #1c2531;
--ctp-surface2: #253141;
--ctp-overlay0: #4a5d75;
--ctp-overlay1: #6a8099;
--ctp-overlay2: #8ba2bd;
--ctp-text: #e0f7fa;
--ctp-subtext1: #a3ced4;
--ctp-subtext0: #7da5aa;
--ctp-mauve: #00f2ff;
--ctp-lavender: #7df9ff;
--ctp-green: #00ff9d;
--ctp-teal: #00d4cc;
--ctp-sky: #00f2ff;
--ctp-blue: #00f2ff;
--ctp-sapphire: #0088cc;
--ctp-pink: #ff3399;
--ctp-flamingo: #ff6680;
--ctp-rosewater:#ffe0e6;
--ctp-yellow: #ffcc00;
--ctp-peach: #ff8800;
--ctp-maroon: #cc0022;
--ctp-red: #ff3333;
--bg-app: #0b0f15;
--bg-sidebar: #080c12;
--bg-card: #141b24;
--bg-hover: rgba(0, 242, 255, 0.08);
--bg-player: #05070a;
--bg-glass: rgba(11, 15, 21, 0.85);
--accent: #00f2ff;
--accent-dim: rgba(0, 242, 255, 0.12);
--accent-glow: rgba(0, 242, 255, 0.4);
--text-primary: #e0f7fa;
--text-secondary:#a3ced4;
--text-muted: #5a718a;
--border: #1e2a3a;
--border-subtle: #141b24;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
[data-theme='stark-hud'] .app-shell {
background: radial-gradient(circle at 50% 50%, #0e1621 0%, #05070a 100%);
}
[data-theme='stark-hud'] .sidebar {
border-right: 1px solid rgba(0, 242, 255, 0.15);
}
[data-theme='stark-hud'] .player-bar {
border-top: 1px solid rgba(0, 242, 255, 0.2);
box-shadow: 0 -10px 30px rgba(0, 242, 255, 0.05);
}
[data-theme='stark-hud'] .player-track-name {
color: #00f2ff;
text-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.5px;
}
[data-theme='stark-hud'] .nav-link.active {
background: linear-gradient(90deg, rgba(0, 242, 255, 0.1) 0%, transparent 100%);
box-shadow: -5px 0 15px rgba(0, 242, 255, 0.2);
}
[data-theme='stark-hud'] .nav-link.active::before {
box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}
[data-theme='stark-hud'] .btn-primary {
background: #00f2ff;
color: #05070a;
font-weight: 700;
box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ─────────────────────────────────────────────────────────────
Blade — Cinematic Industrial
───────────────────────────────────────────────────────────── */
[data-theme='blade'] {
color-scheme: dark;
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
--ctp-crust: #050505;
--ctp-mantle: #0a0a0a;
--ctp-base: #121212;
--ctp-surface0: #1a1a1a;
--ctp-surface1: #252525;
--ctp-surface2: #333333;
--ctp-overlay0: #4a4a4a;
--ctp-overlay1: #707070;
--ctp-overlay2: #909090;
--ctp-text: #e0e0e0;
--ctp-subtext1: #b0b0b0;
--ctp-subtext0: #888888;
--ctp-mauve: #b30000;
--ctp-lavender: #ff1a1a;
--ctp-green: #00ff66;
--ctp-teal: #1abc9c;
--ctp-sky: #3498db;
--ctp-blue: #2980b9;
--ctp-sapphire: #1f618d;
--ctp-pink: #e91e63;
--ctp-flamingo: #f06292;
--ctp-rosewater:#f8bbd0;
--ctp-yellow: #f1c40f;
--ctp-peach: #e67e22;
--ctp-maroon: #800000;
--ctp-red: #ff0000;
--bg-app: #121212;
--bg-sidebar: #0a0a0a;
--bg-card: #1a1a1a;
--bg-hover: rgba(179, 0, 0, 0.1);
--bg-player: #050505;
--bg-glass: rgba(10, 10, 10, 0.85);
--accent: #b30000;
--accent-dim: rgba(179, 0, 0, 0.15);
--accent-glow: rgba(179, 0, 0, 0.4);
--text-primary: #e0e0e0;
--text-secondary:#b0b0b0;
--text-muted: #666666;
--border: #2a2a2a;
--border-subtle: #1a1a1a;
--positive: #00ff66;
--warning: #f1c40f;
--danger: #ff0000;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
[data-theme='blade'] .player-bar {
border-top: 1px solid #222;
background: linear-gradient(to bottom, #0a0a0a 0%, #050505 100%);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8);
}
[data-theme='blade'] .sidebar {
border-right: 1px solid #1a1a1a;
}
[data-theme='blade'] .nav-link.active {
background: linear-gradient(90deg, rgba(179, 0, 0, 0.2) 0%, transparent 100%);
color: #fff;
}
[data-theme='blade'] .nav-link.active::before {
box-shadow: 0 0 8px rgba(179, 0, 0, 0.5);
}
[data-theme='blade'] .player-track-name {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: #fff;
text-shadow: 0 0 10px rgba(179, 0, 0, 0.3);
}
[data-theme='blade'] .btn-primary {
background: linear-gradient(135deg, #b30000 0%, #800000 100%);
border: 1px solid rgba(255, 26, 26, 0.2);
color: #fff;
}
Reference in New Issue View Git Blame Copy Permalink