itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-21 23:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
29a4363dcade4f2c051dd5dbbdec3e3d74c9f93f
Psychotoxical-psysonic/src/styles/theme.css
T
Psychotoxical 29a4363dca feat: v1.21.0 — What's New Modal, 3 New Themes (Beta), Artist Column, Powerslave Blue 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-29 21:48:40 +02:00

11674 lines
391 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-subtext0);
--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-subtext0);
--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-subtext0);
--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-subtext0);
--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: #a0aab8;
--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: #a0aab8;
--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: #909090;
--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: #a0a0bc;
--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 — Half-Life / City 17 ─── */
/* HEV orange + Combine Overwatch teal + City 17 concrete */
[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");
/* City 17 — warm concrete dark, not pure black */
--ctp-crust: #0c0d0e;
--ctp-mantle: #111315;
--ctp-base: #171a1c;
--ctp-surface0: #1f2326;
--ctp-surface1: #282d30;
--ctp-surface2: #33393d;
--ctp-overlay0: #4e5660;
--ctp-overlay1: #718090;
--ctp-overlay2: #96a8b4;
--ctp-text: #e4ddd0; /* concrete dust off-white */
--ctp-subtext1: #c8c0b0;
--ctp-subtext0: #96a8b4;
/* Half-Life palette */
--ctp-peach: #ff9d00; /* HEV suit orange */
--ctp-mauve: #ff9d00;
--ctp-lavender: #ffb84d;
--ctp-flamingo: #ffb84d;
--ctp-rosewater:#ffd080;
--ctp-teal: #00c8c0; /* Combine Overwatch scanner teal */
--ctp-sky: #00c8c0;
--ctp-sapphire: #0090a0;
--ctp-blue: #0060a0; /* G-Man suit navy */
--ctp-green: #78c800; /* Headcrab / barnacle green */
--ctp-yellow: #f0d000; /* radiation warning yellow */
--ctp-red: #e03020; /* danger / health critical */
--ctp-maroon: #b82010;
--ctp-pink: #cc44aa; /* Xen alien purple-pink */
--bg-app: #171a1c; /* City 17 corridor concrete */
--bg-sidebar: #111315; /* Combine facility wall */
--bg-card: #1f2326;
--bg-hover: rgba(255, 157, 0, 0.08);
--bg-player: #0c0d0e; /* HEV suit display dark */
--bg-glass: rgba(17, 19, 21, 0.95);
--accent: #ff9d00; /* HEV orange */
--accent-dim: rgba(255, 157, 0, 0.13);
--accent-glow: rgba(255, 157, 0, 0.45);
--volume-accent:#00c8c0; /* Combine teal for volume */
--text-primary: #e4ddd0; /* concrete dust off-white */
--text-secondary:#00c8c0; /* Combine Overwatch teal */
--text-muted: #4e5660;
--border: #2a3035;
--border-subtle: #1f2326;
--shadow-dropdown: rgba(0, 0, 0, 0.85);
--positive: #78c800;
--warning: #ff9d00;
--danger: #e03020;
--radius-sm: 0px;
--radius-md: 1px;
--radius-lg: 2px;
--radius-xl: 3px;
}
/* Sidebar = Combine control panel: horizontal panel lines */
[data-theme='lambda-17'] .sidebar {
border-right: 2px solid #ff9d00;
box-shadow: 2px 0 12px rgba(255, 157, 0, 0.08);
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 28px,
rgba(0, 200, 192, 0.04) 28px,
rgba(0, 200, 192, 0.04) 29px
);
}
/* Player bar = HEV suit monitor: orange top + teal secondary */
[data-theme='lambda-17'] .player-bar {
border-top: 2px solid #ff9d00;
box-shadow:
0 -1px 0 rgba(0, 200, 192, 0.3),
0 -6px 24px rgba(255, 157, 0, 0.07);
}
/* Track name = HEV announcement style */
[data-theme='lambda-17'] .player-track-name {
color: #ff9d00;
text-shadow: 0 0 10px rgba(255, 157, 0, 0.65), 0 0 24px rgba(255, 157, 0, 0.25);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.06em;
}
/* Artist = Combine Overwatch voice color */
[data-theme='lambda-17'] .player-track-artist { color: #00c8c0; }
/* Queue album = Xen purple */
[data-theme='lambda-17'] .queue-meta-album { color: #cc44aa; }
/* Active nav: HEV orange gradient */
[data-theme='lambda-17'] .nav-link.active {
background: linear-gradient(90deg, rgba(255,157,0,0.16) 0%, transparent 100%);
color: #ff9d00;
}
[data-theme='lambda-17'] .nav-link.active::before {
width: 3px;
box-shadow: 2px 0 10px rgba(255,157,0,0.6);
}
/* Buttons */
[data-theme='lambda-17'] .btn-primary {
background: #ff9d00;
color: #0c0d0e;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
border-radius: 1px;
}
[data-theme='lambda-17'] .btn-primary:hover { background: #ffb030; }
/* Queue active = HEV orange lambda bar */
[data-theme='lambda-17'] .queue-item.active {
background: rgba(255, 157, 0, 0.08);
box-shadow: inset 3px 0 0 #ff9d00;
}
[data-theme='lambda-17'] .np-queue-item.active { background: rgba(255,157,0,0.07); }
[data-theme='lambda-17'] .np-queue-item-active {
color: #ff9d00;
text-shadow: 0 0 8px rgba(255,157,0,0.55);
}
/* Now-playing active track = Combine teal */
[data-theme='lambda-17'] .np-album-track.active .np-album-track-title,
[data-theme='lambda-17'] .np-album-track.active .np-album-track-num {
color: #00c8c0;
text-shadow: 0 0 8px rgba(0,200,192,0.5);
}
/* Hover rows */
[data-theme='lambda-17'] .track-row:hover,
[data-theme='lambda-17'] .track-row.context-active {
background: rgba(255,157,0,0.07) !important;
box-shadow: inset 3px 0 0 #ff9d00;
}
[data-theme='lambda-17'] .queue-item:hover,
[data-theme='lambda-17'] .queue-item.context-active {
background: rgba(255,157,0,0.07) !important;
box-shadow: inset 3px 0 0 #ff9d00;
}
[data-theme='lambda-17'] .np-queue-item:hover,
[data-theme='lambda-17'] .np-queue-item.context-active {
background: rgba(255,157,0,0.07);
box-shadow: inset 2px 0 0 #ff9d00;
}
[data-theme='lambda-17'] .artist-row:hover { background: rgba(255,157,0,0.06); box-shadow: inset 3px 0 0 #ff9d00; }
[data-theme='lambda-17'] .playlist-row:hover { background: rgba(255,157,0,0.06); box-shadow: inset 3px 0 0 #ff9d00; }
/* Settings tabs: Combine teal when active */
[data-theme='lambda-17'] .settings-tab:hover { background: rgba(255,157,0,0.07); color: #ff9d00; }
[data-theme='lambda-17'] .settings-tab.active {
background: rgba(0, 200, 192, 0.08);
color: #00c8c0;
box-shadow: inset 3px 0 0 #00c8c0;
}
/* Queue tabs */
[data-theme='lambda-17'] .queue-tab-btn:hover { background: rgba(255,157,0,0.07); color: #ff9d00; }
/* Dropdowns */
[data-theme='lambda-17'] .custom-select-trigger:hover { background: rgba(255,157,0,0.07); }
[data-theme='lambda-17'] .custom-select-option:hover {
background: rgba(255,157,0,0.1) !important;
color: #ff9d00 !important;
}
/* Artist pills = headcrab green */
[data-theme='lambda-17'] .artist-ext-link:hover {
background: rgba(120,200,0,0.1);
color: #78c800 !important;
border-color: rgba(120,200,0,0.4) !important;
}
/* Connection indicators */
[data-theme='lambda-17'] .connection-type,
[data-theme='lambda-17'] .connection-server { color: #00c8c0; }
/* ─── Guild Wars 1 — Tyria ─── */
[data-theme='gw1'] {
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%23c8960c%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 — aged Tyrian stone, ornate gold, Searing crimson */
--ctp-crust: #060402;
--ctp-mantle: #0a0806;
--ctp-base: #0e0b08;
--ctp-surface0: #1a1208;
--ctp-surface1: #261b0c;
--ctp-surface2: #342510;
--ctp-overlay0: #5a4830;
--ctp-overlay1: #7a6448;
--ctp-overlay2: #9a8060;
--ctp-text: #f0e4c4;
--ctp-subtext1: #d4c49a;
--ctp-subtext0: #b0a07a;
--ctp-mauve: #c8960c;
--ctp-lavender: #e8b820;
--ctp-pink: #c0321a;
--ctp-flamingo: #d4780c;
--ctp-rosewater:#f0e4c4;
--ctp-green: #5a8030;
--ctp-teal: #3a6858;
--ctp-sky: #7aaccc;
--ctp-blue: #3a6898;
--ctp-sapphire: #3a6898;
--ctp-yellow: #e8c840;
--ctp-peach: #d4780c;
--ctp-maroon: #8b1515;
--ctp-red: #c0321a;
--bg-app: #0e0b08;
--bg-sidebar: #0a0806;
--bg-card: #1a1208;
--bg-hover: #261b0c;
--bg-player: #060402;
--bg-glass: rgba(14, 11, 8, 0.88);
--accent: #c8960c;
--accent-dim: rgba(200, 150, 12, 0.15);
--accent-glow: rgba(200, 150, 12, 0.35);
--text-primary: #f0e4c4;
--text-secondary:#9a8060;
--text-muted: #a08858;
--border: rgba(200, 150, 12, 0.28);
--border-subtle: rgba(200, 150, 12, 0.10);
--border-dropdown: rgba(200, 150, 12, 0.35);
--shadow-dropdown: rgba(0, 0, 0, 0.85);
--positive: #5a8030;
--warning: #d4780c;
--danger: #c0321a;
--radius-sm: 2px;
--radius-md: 3px;
--radius-lg: 4px;
}
/* App shell — solid dark stone base (grid moved to sidebar-only for perf) */
/* Sidebar — worn leather with faint horizontal stone lines */
[data-theme='gw1'] .sidebar {
border-right: 1px solid rgba(200,150,12,0.35);
background: linear-gradient(180deg, #0c0906 0%, #080604 100%);
background-image: repeating-linear-gradient(
0deg,
rgba(200,150,12,0.04) 0px,
transparent 1px,
transparent 48px,
rgba(200,150,12,0.04) 49px
);
}
/* Player bar — the GW1 skill bar: deepest black, gold top border */
[data-theme='gw1'] .player-bar {
background: #060402;
border-top: 2px solid #c8960c;
box-shadow: 0 -6px 28px rgba(200,150,12,0.14), 0 -1px 0 rgba(0,0,0,0.9);
}
/* Track name — Tyrian item-name gold glow, Cinzel serif */
[data-theme='gw1'] .player-track-name {
color: #e8b820;
text-shadow: 0 0 10px rgba(232,184,32,0.55), 0 0 22px rgba(200,150,12,0.25);
font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
letter-spacing: 0.03em;
}
/* Artist name — faded parchment, not competing with gold */
[data-theme='gw1'] .player-artist-name {
color: #9a8060;
}
/* Nav active — left gold bar like GW1 menu selection */
[data-theme='gw1'] .nav-link.active {
background: linear-gradient(90deg, rgba(200,150,12,0.20) 0%, transparent 100%);
border-left: 3px solid #c8960c;
color: #e8b820;
}
[data-theme='gw1'] .nav-link:hover:not(.active) {
background: linear-gradient(90deg, rgba(200,150,12,0.09) 0%, transparent 100%);
border-left: 3px solid rgba(200,150,12,0.35);
}
/* Content header — ornate double gold rule */
[data-theme='gw1'] .content-header {
border-bottom: 1px solid rgba(200,150,12,0.22);
position: relative;
}
[data-theme='gw1'] .content-header::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(200,150,12,0.7) 20%, rgba(232,184,32,0.9) 50%, rgba(200,150,12,0.7) 80%, transparent 100%);
}
/* Cards — dark leather panels with subtle gold frame */
[data-theme='gw1'] .album-card,
[data-theme='gw1'] .artist-card {
box-shadow: inset 0 0 0 1px rgba(200,150,12,0.18);
}
[data-theme='gw1'] .album-card:hover,
[data-theme='gw1'] .artist-card:hover {
box-shadow: inset 0 0 0 1px rgba(200,150,12,0.55), 0 4px 20px rgba(200,150,12,0.18);
}
/* Queue / track rows — gold left accent bar on hover */
[data-theme='gw1'] .track-row:hover,
[data-theme='gw1'] .queue-item:hover {
box-shadow: inset 2px 0 0 #c8960c;
background: rgba(200,150,12,0.08);
}
/* Primary play button — hammered gold like GW1 UI buttons */
[data-theme='gw1'] .player-btn-primary {
background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
color: #060402;
box-shadow: 0 0 14px rgba(200,150,12,0.45);
border: 1px solid #906606;
}
[data-theme='gw1'] .player-btn-primary:hover {
background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%);
box-shadow: 0 0 22px rgba(200,150,12,0.65);
}
/* btn-primary (play album, etc.) */
[data-theme='gw1'] .btn-primary {
background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
color: #060402;
border: 1px solid #906606;
}
[data-theme='gw1'] .btn-primary:hover {
background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%);
}
/* Hero play button — Cinzel font, gold, no flash on hover */
[data-theme='gw1'] .hero-play-btn {
background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
color: #060402;
border: 1px solid #906606;
box-shadow: 0 2px 14px rgba(200,150,12,0.45);
font-family: 'Cinzel', Georgia, serif;
letter-spacing: 0.05em;
transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
[data-theme='gw1'] .hero-play-btn:hover {
background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%);
box-shadow: 0 4px 22px rgba(200,150,12,0.65);
transform: scale(1.02);
}
/* Album card overlay play button */
[data-theme='gw1'] .album-card-details-btn {
background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%);
color: #060402;
border: 1px solid #906606;
box-shadow: 0 2px 10px rgba(200,150,12,0.5);
}
/* Scrollbar — dark stone with gold thumb */
[data-theme='gw1'] ::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[data-theme='gw1'] ::-webkit-scrollbar-track {
background: #0a0806;
border-left: 1px solid rgba(200,150,12,0.08);
}
[data-theme='gw1'] ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #c8960c, #a87808);
border-radius: 3px;
}
[data-theme='gw1'] ::-webkit-scrollbar-thumb:hover {
background: #e8b820;
}
/* ─── Grand Theft Audio — GTA V / Los Santos at Night ─── */
/* Money green + Wanted-level gold + LS asphalt dark */
[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");
/* LS asphalt — almost black with a warm urban undertone */
--ctp-crust: #030303;
--ctp-mantle: #080808;
--ctp-base: #0e0e0e;
--ctp-surface0: #161616;
--ctp-surface1: #202020;
--ctp-surface2: #2c2c2c;
--ctp-overlay0: #484848;
--ctp-overlay1: #707070;
--ctp-overlay2: #989898;
--ctp-text: #e8e8e8;
--ctp-subtext1: #c0c0c0;
--ctp-subtext0: #888888;
/* GTA palette */
--ctp-green: #57b05a; /* money green — health bar */
--ctp-mauve: #57b05a;
--ctp-teal: #3d9e40;
--ctp-yellow: #ffd700; /* wanted stars — 5-star gold */
--ctp-peach: #ffb800; /* Los Santos Customs orange */
--ctp-flamingo: #ffb800;
--ctp-rosewater:#ffb800;
--ctp-red: #e02020; /* wasted / busted red */
--ctp-maroon: #c01818;
--ctp-blue: #4a9fd4; /* armor bar blue */
--ctp-sapphire: #3a8fc4;
--ctp-sky: #4a9fd4;
--ctp-lavender: #57b05a;
--ctp-pink: #e02020;
--bg-app: #0e0e0e;
--bg-sidebar: #080808; /* minimap dark */
--bg-card: #161616;
--bg-hover: rgba(87, 176, 90, 0.08);
--bg-player: #030303; /* HUD strip */
--bg-glass: rgba(8, 8, 8, 0.95);
--accent: #57b05a; /* money green */
--accent-dim: rgba(87, 176, 90, 0.14);
--accent-glow: rgba(87, 176, 90, 0.45);
--volume-accent:#ffd700; /* wanted-gold for volume knob */
--text-primary: #e8e8e8;
--text-secondary:#ffd700; /* wanted-level gold — the key differentiator */
--text-muted: #484848;
--border: #242424;
--border-subtle: #161616;
--shadow-dropdown: rgba(0, 0, 0, 0.9);
--radius-sm: 0px;
--radius-md: 2px;
--radius-lg: 3px;
--radius-xl: 4px;
}
/* Sidebar = minimap panel: dark border + subtle city-grid stripe */
[data-theme='grand-theft-audio'] .sidebar {
border-right: 2px solid #57b05a;
background-image: repeating-linear-gradient(
135deg,
transparent,
transparent 40px,
rgba(87, 176, 90, 0.018) 40px,
rgba(87, 176, 90, 0.018) 41px
);
}
/* Player bar = GTA HUD strip: green health line + gold secondary */
[data-theme='grand-theft-audio'] .player-bar {
border-top: 2px solid #57b05a;
box-shadow:
0 -1px 0 rgba(255, 215, 0, 0.25),
0 -8px 30px rgba(87, 176, 90, 0.08);
}
/* Track name = money counter — green + uppercase */
[data-theme='grand-theft-audio'] .player-track-name {
color: #57b05a;
text-shadow: 0 0 10px rgba(87, 176, 90, 0.6), 0 0 24px rgba(87, 176, 90, 0.25);
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.06em;
}
/* Artist = wanted-gold, like the bounty/level display */
[data-theme='grand-theft-audio'] .player-track-artist { color: #ffd700; }
/* Active nav link: money-green gradient + glow bar */
[data-theme='grand-theft-audio'] .nav-link.active {
background: linear-gradient(90deg, rgba(87, 176, 90, 0.18) 0%, transparent 100%);
color: #57b05a;
}
[data-theme='grand-theft-audio'] .nav-link.active::before {
width: 3px;
box-shadow: 2px 0 12px rgba(87, 176, 90, 0.6);
}
/* Buttons: blocky GTA UI style */
[data-theme='grand-theft-audio'] .btn-primary {
background: #57b05a;
color: #030303;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.06em;
border: none;
}
[data-theme='grand-theft-audio'] .btn-primary:hover { background: #6abf6e; }
/* Queue active = health-bar green left strip */
[data-theme='grand-theft-audio'] .queue-item.active {
background: rgba(87, 176, 90, 0.08);
box-shadow: inset 3px 0 0 #57b05a;
}
[data-theme='grand-theft-audio'] .np-queue-item.active { background: rgba(87, 176, 90, 0.07); }
[data-theme='grand-theft-audio'] .np-queue-item-active {
color: #57b05a;
text-shadow: 0 0 8px rgba(87, 176, 90, 0.55);
}
/* Now-playing active track = gold (5-star wanted) */
[data-theme='grand-theft-audio'] .np-album-track.active .np-album-track-title,
[data-theme='grand-theft-audio'] .np-album-track.active .np-album-track-num {
color: #ffd700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
/* Hover rows */
[data-theme='grand-theft-audio'] .track-row:hover,
[data-theme='grand-theft-audio'] .track-row.context-active {
background: rgba(87, 176, 90, 0.07) !important;
box-shadow: inset 3px 0 0 #57b05a;
}
[data-theme='grand-theft-audio'] .queue-item:hover,
[data-theme='grand-theft-audio'] .queue-item.context-active {
background: rgba(87, 176, 90, 0.08) !important;
box-shadow: inset 3px 0 0 #57b05a;
}
[data-theme='grand-theft-audio'] .np-queue-item:hover,
[data-theme='grand-theft-audio'] .np-queue-item.context-active {
background: rgba(87, 176, 90, 0.07);
box-shadow: inset 2px 0 0 #57b05a;
}
[data-theme='grand-theft-audio'] .artist-row:hover { background: rgba(87,176,90,0.07); box-shadow: inset 3px 0 0 #57b05a; }
[data-theme='grand-theft-audio'] .playlist-row:hover { background: rgba(87,176,90,0.07); box-shadow: inset 3px 0 0 #57b05a; }
/* Settings tabs: gold active = 5-star screen */
[data-theme='grand-theft-audio'] .settings-tab:hover { background: rgba(87,176,90,0.07); color: #57b05a; }
[data-theme='grand-theft-audio'] .settings-tab.active {
background: rgba(255, 215, 0, 0.07);
color: #ffd700;
box-shadow: inset 3px 0 0 #ffd700;
}
/* Queue tab */
[data-theme='grand-theft-audio'] .queue-tab-btn:hover { background: rgba(87,176,90,0.07); color: #57b05a; }
/* Dropdowns */
[data-theme='grand-theft-audio'] .custom-select-trigger:hover { background: rgba(87,176,90,0.07); }
[data-theme='grand-theft-audio'] .custom-select-option:hover {
background: rgba(87, 176, 90, 0.1) !important;
color: #57b05a !important;
}
/* Artist pills = LS Customs orange */
[data-theme='grand-theft-audio'] .artist-ext-link:hover {
background: rgba(255, 184, 0, 0.1);
color: #ffb800 !important;
border-color: rgba(255, 184, 0, 0.4) !important;
}
/* Queue album title = gold */
[data-theme='grand-theft-audio'] .queue-meta-album { color: #ffd700; }
/* Connection indicators */
[data-theme='grand-theft-audio'] .connection-type,
[data-theme='grand-theft-audio'] .connection-server { color: #ffd700; }
/* ─── 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 — Cyberpunk 2077 ─── */
/* V yellow + Netrunner cyan + Gang magenta + Johnny Silverhand glitch */
@keyframes glitch-2077 {
0%, 85%, 100% {
text-shadow:
0 0 8px rgba(252,238,10,0.75),
0 0 22px rgba(252,238,10,0.35),
0 0 48px rgba(252,238,10,0.12);
transform: none;
}
86% {
text-shadow:
-3px 0 rgba(0,245,255,0.65),
3px 0 rgba(255,45,155,0.65),
0 0 8px rgba(252,238,10,0.75);
transform: translateX(-2px);
}
87% {
text-shadow:
3px 0 rgba(0,245,255,0.65),
-3px 0 rgba(255,45,155,0.65),
0 0 8px rgba(252,238,10,0.75);
transform: translateX(2px) skewX(-2deg);
}
88% {
text-shadow:
0 0 8px rgba(252,238,10,0.75),
0 0 22px rgba(252,238,10,0.35);
transform: none;
}
89% {
text-shadow:
-1px 0 rgba(0,245,255,0.4),
1px 0 rgba(255,45,155,0.4),
0 0 10px rgba(252,238,10,0.8);
transform: translateX(1px);
}
90% {
text-shadow:
0 0 8px rgba(252,238,10,0.75),
0 0 22px rgba(252,238,10,0.35),
0 0 48px rgba(252,238,10,0.12);
transform: none;
}
}
[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");
/* Night City asphalt — dark with cold blue-black undertone */
--ctp-crust: #000003;
--ctp-mantle: #020208;
--ctp-base: #06060f;
--ctp-surface0: #0d0d1a;
--ctp-surface1: #141428;
--ctp-surface2: #1e1e38;
--ctp-overlay0: #50508a;
--ctp-overlay1: #7878b8;
--ctp-overlay2: #a0a0d8;
--ctp-text: #f0f0ff;
--ctp-subtext1: #d0d0f8;
--ctp-subtext0: #a0a0d8;
/* Cyberpunk palette */
--ctp-yellow: #FCEE0A; /* V / Johnny — primary yellow */
--ctp-mauve: #FCEE0A;
--ctp-lavender: #ffe84d;
--ctp-teal: #00f5ff; /* Netrunner cyan */
--ctp-sky: #00f5ff;
--ctp-sapphire: #00c8e0;
--ctp-blue: #0088ff; /* NCPD/corpo blue */
--ctp-pink: #ff2d9b; /* Gang magenta — Maelstrom/Valentinos neon */
--ctp-flamingo: #ff2d9b;
--ctp-rosewater:#ff80c8;
--ctp-green: #00ff9f; /* Netrunner green — Quickhack */
--ctp-red: #ff1a1a; /* Combat critical / Arasaka red */
--ctp-maroon: #cc0000;
--ctp-peach: #ff8800; /* Trauma Team orange */
--bg-app: #06060f;
--bg-sidebar: #020208; /* deeper — like the Night City backdrop */
--bg-card: #0d0d1a;
--bg-hover: rgba(252, 238, 10, 0.07);
--bg-player: #000003;
--bg-glass: rgba(6, 6, 15, 0.96);
--accent: #FCEE0A; /* V yellow */
--accent-dim: rgba(252, 238, 10, 0.12);
--accent-glow: rgba(252, 238, 10, 0.5);
--volume-accent:#00f5ff; /* Netrunner cyan for volume */
--text-primary: #f0f0ff;
--text-secondary:#00f5ff; /* Netrunner cyan — the key differentiator */
--text-muted: #6868a8;
--border: #1e1e38;
--border-subtle: #0d0d1a;
--shadow-dropdown: rgba(0, 0, 0, 0.95);
--positive: #00ff9f;
--warning: #FCEE0A;
--danger: #ff1a1a;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 2px;
--radius-xl: 2px;
}
/* Sidebar = tech/netrunner panel: cyan border + scan-line texture */
[data-theme='nightcity-2077'] .sidebar {
border-right: 2px solid #00f5ff;
box-shadow: 2px 0 16px rgba(0, 245, 255, 0.1);
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(0, 245, 255, 0.012) 3px,
rgba(0, 245, 255, 0.012) 4px
);
}
/* Player bar = HUD: V yellow top + cyan secondary strip */
[data-theme='nightcity-2077'] .player-bar {
border-top: 2px solid #FCEE0A;
box-shadow:
0 -1px 0 rgba(0, 245, 255, 0.35),
0 -8px 32px rgba(252, 238, 10, 0.08),
0 -2px 16px rgba(0, 245, 255, 0.06);
}
/* Track name = V's yellow + Johnny Silverhand glitch */
[data-theme='nightcity-2077'] .player-track-name {
color: #FCEE0A;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.08em;
animation: glitch-2077 9s infinite;
}
/* Artist = Netrunner cyan */
[data-theme='nightcity-2077'] .player-track-artist { color: #00f5ff; }
/* Queue album = gang magenta */
[data-theme='nightcity-2077'] .queue-meta-album { color: #ff2d9b; }
/* Active nav: yellow gradient + chamfered feel */
[data-theme='nightcity-2077'] .nav-link.active {
background: linear-gradient(90deg, rgba(252,238,10,0.15) 0%, transparent 100%);
color: #FCEE0A;
}
[data-theme='nightcity-2077'] .nav-link.active::before {
width: 3px;
background: #FCEE0A;
box-shadow: 2px 0 14px rgba(252,238,10,0.7);
}
/* Buttons: angular chamfered corner — iconic CP2077 UI shape */
[data-theme='nightcity-2077'] .btn-primary {
background: #FCEE0A;
color: #000000;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
border: none;
border-radius: 0;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
[data-theme='nightcity-2077'] .btn-primary:hover {
background: #ffe84d;
box-shadow: 0 0 20px rgba(252,238,10,0.5);
}
[data-theme='nightcity-2077'] .btn-surface {
border-radius: 0;
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
/* Queue active = cyan netrunner bar */
[data-theme='nightcity-2077'] .queue-item.active {
background: rgba(0, 245, 255, 0.07);
box-shadow: inset 3px 0 0 #00f5ff;
}
[data-theme='nightcity-2077'] .np-queue-item.active { background: rgba(0,245,255,0.06); }
[data-theme='nightcity-2077'] .np-queue-item-active {
color: #FCEE0A;
text-shadow: 0 0 8px rgba(252,238,10,0.6);
}
/* Now-playing active track = magenta gang glow */
[data-theme='nightcity-2077'] .np-album-track.active .np-album-track-title,
[data-theme='nightcity-2077'] .np-album-track.active .np-album-track-num {
color: #ff2d9b;
text-shadow: 0 0 10px rgba(255,45,155,0.55);
}
/* Hover rows: yellow left bar */
[data-theme='nightcity-2077'] .track-row:hover,
[data-theme='nightcity-2077'] .track-row.context-active {
background: rgba(252,238,10,0.06) !important;
box-shadow: inset 3px 0 0 #FCEE0A;
}
[data-theme='nightcity-2077'] .queue-item:hover,
[data-theme='nightcity-2077'] .queue-item.context-active {
background: rgba(0,245,255,0.06) !important;
box-shadow: inset 3px 0 0 #00f5ff;
}
[data-theme='nightcity-2077'] .np-queue-item:hover,
[data-theme='nightcity-2077'] .np-queue-item.context-active {
background: rgba(0,245,255,0.06);
box-shadow: inset 2px 0 0 #00f5ff;
}
[data-theme='nightcity-2077'] .artist-row:hover { background: rgba(252,238,10,0.05); box-shadow: inset 3px 0 0 #FCEE0A; }
[data-theme='nightcity-2077'] .playlist-row:hover { background: rgba(252,238,10,0.05); box-shadow: inset 3px 0 0 #FCEE0A; }
/* Settings tabs: active = magenta Valentinos style */
[data-theme='nightcity-2077'] .settings-tab:hover { background: rgba(252,238,10,0.06); color: #FCEE0A; }
[data-theme='nightcity-2077'] .settings-tab.active {
background: rgba(255,45,155,0.08);
color: #ff2d9b;
box-shadow: inset 3px 0 0 #ff2d9b;
}
/* Queue tabs */
[data-theme='nightcity-2077'] .queue-tab-btn:hover { background: rgba(0,245,255,0.07); color: #00f5ff; }
/* Dropdowns */
[data-theme='nightcity-2077'] .custom-select-trigger:hover { background: rgba(252,238,10,0.07); }
[data-theme='nightcity-2077'] .custom-select-option:hover {
background: rgba(252,238,10,0.1) !important;
color: #FCEE0A !important;
}
/* Artist pills = Trauma Team orange */
[data-theme='nightcity-2077'] .artist-ext-link:hover {
background: rgba(255,136,0,0.1);
color: #ff8800 !important;
border-color: rgba(255,136,0,0.4) !important;
}
/* Cards: dark glass with cyan edge-glow */
[data-theme='nightcity-2077'] .glass {
border: 1px solid rgba(0, 245, 255, 0.12) !important;
box-shadow: 0 0 0 1px rgba(252,238,10,0.04), inset 0 0 20px rgba(0,245,255,0.02) !important;
}
/* Connection indicators */
[data-theme='nightcity-2077'] .connection-type,
[data-theme='nightcity-2077'] .connection-server { color: #00f5ff; }
/* ─── Heisenberg — Breaking Bad ─── */
@keyframes crystal-pulse {
0%, 100% {
text-shadow:
0 0 6px rgba(78,223,47,0.60),
0 0 18px rgba(78,223,47,0.32),
0 0 40px rgba(78,223,47,0.14);
}
50% {
text-shadow:
0 0 10px rgba(78,223,47,0.80),
0 0 28px rgba(78,223,47,0.48),
0 0 60px rgba(78,223,47,0.22);
}
}
[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%2335d4f8%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");
/* Breaking Bad palette — crystal blue, BB logo green, hazmat yellow */
--ctp-crust: #050709;
--ctp-mantle: #080b0e;
--ctp-base: #0b0e12;
--ctp-surface0: #141a22;
--ctp-surface1: #1e2830;
--ctp-surface2: #283440;
--ctp-overlay0: #3a4e60;
--ctp-overlay1: #5a7288;
--ctp-overlay2: #7a96a8;
--ctp-text: #e4f0f8;
--ctp-subtext1: #c0d8e8;
--ctp-subtext0: #8ab0c8;
--ctp-mauve: #35d4f8;
--ctp-lavender: #70e8ff;
--ctp-pink: #f05080;
--ctp-flamingo: #e84060;
--ctp-rosewater:#e4f0f8;
--ctp-green: #4edf2f;
--ctp-teal: #20c8b0;
--ctp-sky: #55ddff;
--ctp-blue: #35d4f8;
--ctp-sapphire: #1ab8e0;
--ctp-yellow: #f0c020;
--ctp-peach: #e88040;
--ctp-maroon: #a01820;
--ctp-red: #e03030;
--bg-app: #0b0e12;
--bg-sidebar: #060a0e;
--bg-card: #141a22;
--bg-hover: #1e2830;
--bg-player: #060809;
--bg-glass: rgba(8, 11, 14, 0.92);
--accent: #35d4f8;
--accent-dim: rgba(53, 212, 248, 0.12);
--accent-glow: rgba(53, 212, 248, 0.35);
--text-primary: #e4f0f8;
--text-secondary:#7a96a8;
--text-muted: #7aaabe;
--border: rgba(53, 212, 248, 0.14);
--border-subtle: rgba(53, 212, 248, 0.06);
--border-dropdown: rgba(53, 212, 248, 0.25);
--shadow-dropdown: rgba(0, 0, 0, 0.92);
--positive: #4edf2f;
--warning: #f0c020;
--danger: #e03030;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
/* App shell — periodic table grid (BB opening credits) */
[data-theme='heisenberg'] .app-shell {
background-image:
linear-gradient(rgba(53,212,248,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(53,212,248,0.04) 1px, transparent 1px);
background-size: 60px 60px;
}
/* Sidebar — darker lab space, hazmat tape diagonal (very subtle) */
[data-theme='heisenberg'] .sidebar {
background: #060a0e;
border-right: 1px solid rgba(53,212,248,0.14);
background-image:
repeating-linear-gradient(
45deg,
transparent 0px,
transparent 20px,
rgba(240,192,32,0.028) 20px,
rgba(240,192,32,0.028) 22px
);
}
/* Player bar — lab fluorescent: crystal blue top glow */
[data-theme='heisenberg'] .player-bar {
background: #060809;
border-top: 2px solid #35d4f8;
box-shadow: 0 -8px 32px rgba(53,212,248,0.14), 0 -1px 0 rgba(0,0,0,0.9);
}
/* Track name — BB logo green glow (the Br/Ba element box color) */
[data-theme='heisenberg'] .player-track-name {
color: #4edf2f;
animation: crystal-pulse 3s ease-in-out infinite;
}
/* Artist name — hazmat suit yellow */
[data-theme='heisenberg'] .player-artist-name {
color: #f0c020;
}
/* Nav active — BB green left bar */
[data-theme='heisenberg'] .nav-link.active {
background: linear-gradient(90deg, rgba(78,223,47,0.12) 0%, transparent 100%);
border-left: 3px solid #4edf2f;
color: #4edf2f;
}
[data-theme='heisenberg'] .nav-link:hover:not(.active) {
background: linear-gradient(90deg, rgba(53,212,248,0.06) 0%, transparent 100%);
border-left: 3px solid rgba(53,212,248,0.28);
}
/* Content header */
[data-theme='heisenberg'] .content-header {
border-bottom: 1px solid rgba(53,212,248,0.10);
}
/* Cards — blue crystal border on hover */
[data-theme='heisenberg'] .album-card:hover,
[data-theme='heisenberg'] .artist-card:hover {
box-shadow: 0 0 0 1px rgba(53,212,248,0.50), 0 4px 20px rgba(53,212,248,0.14);
}
/* Track / queue rows */
[data-theme='heisenberg'] .track-row:hover,
[data-theme='heisenberg'] .queue-item:hover {
box-shadow: inset 2px 0 0 #35d4f8;
background: rgba(53,212,248,0.05);
}
/* Primary play button — crystal blue gradient */
[data-theme='heisenberg'] .player-btn-primary {
background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
color: #060809;
box-shadow: 0 0 16px rgba(53,212,248,0.45);
border: 1px solid #14a8d0;
}
[data-theme='heisenberg'] .player-btn-primary:hover {
background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%);
box-shadow: 0 0 26px rgba(53,212,248,0.70);
}
/* btn-primary */
[data-theme='heisenberg'] .btn-primary {
background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
color: #060809;
border: 1px solid #14a8d0;
}
[data-theme='heisenberg'] .btn-primary:hover {
background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%);
}
/* Hero play button */
[data-theme='heisenberg'] .hero-play-btn {
background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
color: #060809;
border: 1px solid #14a8d0;
box-shadow: 0 2px 16px rgba(53,212,248,0.45);
transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
[data-theme='heisenberg'] .hero-play-btn:hover {
background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%);
box-shadow: 0 4px 26px rgba(53,212,248,0.68);
transform: scale(1.02);
}
/* Album card overlay button */
[data-theme='heisenberg'] .album-card-details-btn {
background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%);
color: #060809;
border: 1px solid #14a8d0;
box-shadow: 0 2px 12px rgba(53,212,248,0.40);
}
/* Scrollbar — thin blue crystal */
[data-theme='heisenberg'] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme='heisenberg'] ::-webkit-scrollbar-track {
background: #080b0e;
}
[data-theme='heisenberg'] ::-webkit-scrollbar-thumb {
background: rgba(53,212,248,0.35);
border-radius: 3px;
}
[data-theme='heisenberg'] ::-webkit-scrollbar-thumb:hover {
background: #35d4f8;
}
/* ─── A Theme of Ice and Fire — Game of Thrones ─── */
/* Concept: FIRE (volcanic Dragonstone, main area) vs ICE (Castle Black, sidebar) */
@keyframes fire-flicker {
0% { text-shadow: 0 0 8px rgba(200,30,20,0.65), 0 0 20px rgba(200,60,10,0.30); }
20% { text-shadow: 0 0 12px rgba(220,55,15,0.75), 0 0 28px rgba(210,40,10,0.38); }
40% { text-shadow: 0 0 6px rgba(180,20,10,0.55), 0 0 14px rgba(190,30,10,0.22); }
65% { text-shadow: 0 0 14px rgba(215,50,12,0.80), 0 0 32px rgba(200,70,15,0.40); }
85% { text-shadow: 0 0 9px rgba(195,25,15,0.60), 0 0 22px rgba(200,40,10,0.28); }
100% { text-shadow: 0 0 8px rgba(200,30,20,0.65), 0 0 20px rgba(200,60,10,0.30); }
}
[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%23c41e1e%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 — Targaryen blood red, dragon gold, volcanic black, Wall ice */
--ctp-crust: #060402;
--ctp-mantle: #0a0806;
--ctp-base: #100c08;
--ctp-surface0: #1c1410;
--ctp-surface1: #281c14;
--ctp-surface2: #38261c;
--ctp-overlay0: #5a3e2e;
--ctp-overlay1: #7a5840;
--ctp-overlay2: #9a7858;
--ctp-text: #ecdcc8;
--ctp-subtext1: #d0b898;
--ctp-subtext0: #a89070;
--ctp-mauve: #c41e1e;
--ctp-lavender: #e03030;
--ctp-pink: #e03030;
--ctp-flamingo: #c83010;
--ctp-rosewater:#ecdcc8;
--ctp-green: #5a8a3a;
--ctp-teal: #5090a0; /* Wall ice teal */
--ctp-sky: #80b8d0; /* Northern sky */
--ctp-blue: #3a6898;
--ctp-sapphire: #3a6898;
--ctp-yellow: #c8880a; /* Lannister / dragon gold */
--ctp-peach: #c83010;
--ctp-maroon: #8b0808;
--ctp-red: #c41e1e;
--bg-app: #100c08; /* volcanic black — warm dark */
--bg-sidebar: #090c10; /* Castle Black — cold blue-grey stone */
--bg-card: #1c1410;
--bg-hover: #281c14;
--bg-player: #060402; /* obsidian black */
--bg-glass: rgba(10, 8, 6, 0.92);
--accent: #c41e1e; /* Targaryen blood red */
--accent-dim: rgba(196, 30, 30, 0.14);
--accent-glow: rgba(196, 30, 30, 0.38);
--text-primary: #ecdcc8; /* warm stone parchment */
--text-secondary:#9a7858;
--text-muted: #b08860;
--border: rgba(196, 30, 30, 0.20);
--border-subtle: rgba(196, 30, 30, 0.08);
--border-dropdown: rgba(196, 30, 30, 0.32);
--shadow-dropdown: rgba(0, 0, 0, 0.92);
--positive: #5a8a3a;
--warning: #c8880a;
--danger: #c41e1e;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
/* App shell — scattered torch-light: warm pools of fire at corners */
[data-theme='ice-and-fire'] .app-shell {
background-image:
radial-gradient(ellipse at 15% 85%, rgba(200, 80, 10, 0.07) 0%, transparent 55%),
radial-gradient(ellipse at 85% 15%, rgba(180, 20, 10, 0.06) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(200, 100, 15, 0.05) 0%, transparent 45%);
}
/* Sidebar — THE NORTH: cold Castle Black stone, masonry pattern */
[data-theme='ice-and-fire'] .sidebar {
background: #090c10;
border-right: 1px solid rgba(196, 30, 30, 0.20);
background-image:
repeating-linear-gradient(
0deg,
rgba(80, 110, 140, 0.04) 0px, transparent 1px, transparent 56px,
rgba(80, 110, 140, 0.04) 57px
),
repeating-linear-gradient(
90deg,
rgba(80, 110, 140, 0.025) 0px, transparent 1px, transparent 112px,
rgba(80, 110, 140, 0.025) 113px
);
}
/* Player bar — Dragonstone forge: fire glow rising from below */
[data-theme='ice-and-fire'] .player-bar {
background: #060402;
border-top: 2px solid #c41e1e;
background-image:
radial-gradient(ellipse at 50% 130%, rgba(200, 80, 15, 0.22) 0%, rgba(180, 20, 10, 0.12) 45%, transparent 70%);
box-shadow: 0 -8px 36px rgba(180, 20, 10, 0.22), 0 -1px 0 rgba(0,0,0,0.9);
}
/* Track name — Targaryen red, fire flicker (irregular like real flame) */
[data-theme='ice-and-fire'] .player-track-name {
color: #d42020;
animation: fire-flicker 5s ease-in-out infinite;
}
/* Artist name — Lannister/dragon gold */
[data-theme='ice-and-fire'] .player-artist-name {
color: #c8880a;
}
/* Nav active — blood red left bar */
[data-theme='ice-and-fire'] .nav-link.active {
background: linear-gradient(90deg, rgba(196,30,30,0.18) 0%, transparent 100%);
border-left: 3px solid #c41e1e;
color: #d42020;
}
[data-theme='ice-and-fire'] .nav-link:hover:not(.active) {
background: linear-gradient(90deg, rgba(196,30,30,0.08) 0%, transparent 100%);
border-left: 3px solid rgba(196,30,30,0.32);
}
/* Content header — red-to-gold ornate rule: Fire and Blood / Hear Me Roar */
[data-theme='ice-and-fire'] .content-header {
border-bottom: 1px solid rgba(196,30,30,0.16);
position: relative;
}
[data-theme='ice-and-fire'] .content-header::after {
content: '';
position: absolute;
bottom: -3px;
left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(196,30,30,0.70) 25%,
rgba(200,136,10,0.90) 50%,
rgba(196,30,30,0.70) 75%,
transparent 100%
);
}
/* Cards — volcanic panel, fire-gold border on hover */
[data-theme='ice-and-fire'] .album-card:hover,
[data-theme='ice-and-fire'] .artist-card:hover {
box-shadow:
0 0 0 1px rgba(196,30,30,0.50),
0 0 0 2px rgba(200,136,10,0.14),
0 4px 24px rgba(180,20,10,0.18);
}
/* Track / queue rows */
[data-theme='ice-and-fire'] .track-row:hover,
[data-theme='ice-and-fire'] .queue-item:hover {
box-shadow: inset 2px 0 0 #c41e1e;
background: rgba(196,30,30,0.07);
}
/* Primary play button — Targaryen red gradient */
[data-theme='ice-and-fire'] .player-btn-primary {
background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
color: #ecdcc8;
box-shadow: 0 0 16px rgba(196,30,30,0.48);
border: 1px solid #880808;
}
[data-theme='ice-and-fire'] .player-btn-primary:hover {
background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%);
box-shadow: 0 0 26px rgba(196,30,30,0.70);
}
/* btn-primary */
[data-theme='ice-and-fire'] .btn-primary {
background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
color: #ecdcc8;
border: 1px solid #880808;
}
[data-theme='ice-and-fire'] .btn-primary:hover {
background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%);
}
/* Hero play button */
[data-theme='ice-and-fire'] .hero-play-btn {
background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
color: #ecdcc8;
border: 1px solid #880808;
box-shadow: 0 2px 16px rgba(196,30,30,0.48);
transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
[data-theme='ice-and-fire'] .hero-play-btn:hover {
background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%);
box-shadow: 0 4px 26px rgba(196,30,30,0.70);
transform: scale(1.02);
}
/* Album card overlay button */
[data-theme='ice-and-fire'] .album-card-details-btn {
background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%);
color: #ecdcc8;
border: 1px solid #880808;
box-shadow: 0 2px 12px rgba(196,30,30,0.45);
}
/* Scrollbar — obsidian dark, blood-red thumb transitioning to gold */
[data-theme='ice-and-fire'] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme='ice-and-fire'] ::-webkit-scrollbar-track {
background: #090c10;
}
[data-theme='ice-and-fire'] ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #c41e1e, #883010);
border-radius: 3px;
}
[data-theme='ice-and-fire'] ::-webkit-scrollbar-thumb:hover {
background: #c8880a;
}
/* Connection indicators */
[data-theme='ice-and-fire'] .connection-type,
[data-theme='ice-and-fire'] .connection-server { color: #9a7858; }
/* ─── 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: #555555;
--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;
}
[data-theme='doh-matic'] .btn-surface:hover {
background: #D0E5FF;
}
/* ─── Order of the Phoenix ─── */
/* ─── 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");
/* ── Authentische W98 Palette ── */
--ctp-crust: #808080;
--ctp-mantle: #a0a0a0;
--ctp-base: #d4d0c8; /* Echtes W98 Button Face */
--ctp-surface0: #ffffff;
--ctp-surface1: #ececec;
--ctp-surface2: #d4d0c8;
--ctp-overlay0: #808080;
--ctp-overlay1: #404040;
--ctp-overlay2: #000000;
--ctp-text: #000000;
--ctp-subtext1: #000000;
--ctp-subtext0: #404040;
--ctp-mauve: #000080;
--ctp-lavender: #0000cc;
--ctp-green: #008000;
--ctp-teal: #008080;
--ctp-sky: #0000ff;
--ctp-blue: #0000ff;
--ctp-sapphire: #000080;
--ctp-pink: #ff00ff;
--ctp-flamingo: #ff00ff;
--ctp-rosewater:#d4d0c8;
--ctp-yellow: #808000;
--ctp-peach: #ff8000;
--ctp-maroon: #800000;
--ctp-red: #ff0000;
--bg-app: #008080; /* Teal Desktop */
--bg-sidebar: #d4d0c8;
--bg-card: #d4d0c8;
--bg-hover: #000080;
--bg-player: #d4d0c8;
--bg-glass: rgba(212, 208, 200, 0.95);
--accent: #000080;
--accent-dim: rgba(0, 0, 128, 0.12);
--accent-glow: transparent;
--volume-accent: #000080;
--text-primary: #000000;
--text-secondary:#000000;
--text-muted: #000000;
--border: #808080;
--border-subtle: #d4d0c8;
--border-dropdown: #000000;
--shadow-dropdown: rgba(0, 0, 0, 0.4);
--positive: #008000;
--warning: #808000;
--danger: #ff0000;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
--radius-full: 0px;
}
/* Teal Desktop (nur der äußere Shell-Rahmen) */
[data-theme='w98'] .app-shell {
background-color: #008080;
}
/* ── 3D Bevel: Raised ── */
[data-theme='w98'] .sidebar,
[data-theme='w98'] .player-bar,
[data-theme='w98'] .card {
background: #d4d0c8;
border: 1px solid #000000;
box-shadow:
inset 1px 1px #ffffff,
inset -1px -1px #808080,
inset 2px 2px #dfdfdf,
inset -2px -2px #404040;
}
[data-theme='w98'] .sidebar {
border-right: 2px solid #000000;
}
/* Player Bar Titelbalken: ikonischer W98 Gradient für den Song-Titel */
[data-theme='w98'] .player-track-name {
background: linear-gradient(to right, #09246d, #a6c4e8);
color: #ffffff !important;
padding: 1px 6px;
font-weight: bold;
}
[data-theme='w98'] .player-track-artist,
[data-theme='w98'] .player-time {
color: #000000 !important;
}
/* Nav */
[data-theme='w98'] .nav-link.active {
background: #000080 !important;
color: #ffffff !important;
}
[data-theme='w98'] .nav-link.active svg { color: #ffffff !important; }
[data-theme='w98'] .nav-link:hover:not(.active) {
background: #000080 !important;
color: #ffffff !important;
}
[data-theme='w98'] .nav-link:hover:not(.active) svg { color: #ffffff !important; }
/* Alle Buttons: 3D Raised Bevel */
[data-theme='w98'] .btn,
[data-theme='w98'] .btn-primary,
[data-theme='w98'] .btn-surface,
[data-theme='w98'] .btn-ghost,
[data-theme='w98'] .hero-play-btn,
[data-theme='w98'] .queue-round-btn,
[data-theme='w98'] .player-btn,
[data-theme='w98'] .album-card-details-btn {
background: #d4d0c8 !important;
color: #000000 !important;
border: 1px solid #000000 !important;
border-radius: 0 !important;
box-shadow:
inset 1px 1px #ffffff,
inset -1px -1px #808080,
inset 2px 2px #dfdfdf,
inset -2px -2px #404040 !important;
text-shadow: none !important;
filter: none !important;
transform: none !important;
}
/* Gedrückt: Bevel umkehren */
[data-theme='w98'] .btn:active,
[data-theme='w98'] .btn-primary:active,
[data-theme='w98'] .btn-surface:active,
[data-theme='w98'] .btn-ghost:active,
[data-theme='w98'] .hero-play-btn:active,
[data-theme='w98'] .queue-round-btn:active,
[data-theme='w98'] .player-btn:active,
[data-theme='w98'] .album-card-details-btn:active {
box-shadow:
inset 1px 1px #808080,
inset -1px -1px #ffffff,
inset 2px 2px #404040,
inset -2px -2px #dfdfdf !important;
}
/* Hover: heller */
[data-theme='w98'] .btn:hover,
[data-theme='w98'] .btn-primary:hover,
[data-theme='w98'] .btn-surface:hover,
[data-theme='w98'] .btn-ghost:hover,
[data-theme='w98'] .hero-play-btn:hover,
[data-theme='w98'] .album-card-details-btn:hover {
background: #e4e0d8 !important;
color: #000000 !important;
}
/* Aktive Queue-Buttons: navy, sunken */
[data-theme='w98'] .queue-round-btn.active {
background: #000080 !important;
color: #ffffff !important;
box-shadow:
inset 1px 1px #808080,
inset -1px -1px #ffffff,
inset 2px 2px #404040,
inset -2px -2px #dfdfdf !important;
}
[data-theme='w98'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: #e4e0d8 !important;
color: #000000 !important;
}
/* Progress Bar: eingesunkene Rille, navy Fill */
[data-theme='w98'] .progress-bar-track {
background: #ffffff;
box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff;
border-radius: 0;
}
[data-theme='w98'] .progress-bar-fill {
background: #000080;
border-radius: 0;
box-shadow: none;
}
/* Scrollbar */
[data-theme='w98'] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme='w98'] ::-webkit-scrollbar-track { background: #d4d0c8; }
[data-theme='w98'] ::-webkit-scrollbar-thumb {
background: #d4d0c8;
border: 1px solid #000000;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}
[data-theme='w98'] ::-webkit-scrollbar-button {
background: #d4d0c8;
border: 1px solid #000000;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}
/* Queue Tab */
[data-theme='w98'] .queue-tab-btn:hover { background: #e4e0d8; color: #000000; }
/* Hero */
[data-theme='w98'] .hero-eyebrow { color: rgba(255,255,255,0.9); }
[data-theme='w98'] .hero-meta .badge { background: rgba(255,255,255,0.15); }
/* Settings */
[data-theme='w98'] .settings-tab:hover { background: #000080; color: #ffffff; }
[data-theme='w98'] .theme-accordion-header:hover { background: #000080; color: #ffffff; }
[data-theme='w98'] .theme-accordion-open .theme-accordion-header { background: #000080; color: #ffffff; }
[data-theme='w98'] .theme-accordion-open .theme-accordion-chevron { color: #ffffff; }
/* Dropdowns */
[data-theme='w98'] .custom-select-trigger:hover { background: #000080; color: #ffffff; }
[data-theme='w98'] .custom-select-option:hover { background: #000080 !important; color: #ffffff !important; }
/* Various hovers → navy + white */
[data-theme='w98'] .artist-ext-link:hover { background: #000080; color: #ffffff !important; }
[data-theme='w98'] .changelog-summary:hover { color: #000080; }
[data-theme='w98'] .changelog-code { background: #ffffff; color: #000080; border: 1px solid #808080; }
[data-theme='w98'] .keybind-badge { background: #d4d0c8 !important; color: #000000 !important; border: 1px solid #808080 !important; }
[data-theme='w98'] .eq-ctrl-btn { background: #d4d0c8; color: #000000; border: 1px solid #808080; box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; }
[data-theme='w98'] .eq-ctrl-btn:hover { background: #000080; color: #ffffff; }
[data-theme='w98'] .genre-keyword-badge { background: #d4d0c8 !important; color: #000000 !important; border: 1px solid #808080 !important; }
[data-theme='w98'] .toggle-track::before { background: #d4d0c8; border: 1px solid #808080; }
[data-theme='w98'] .np-title { color: #000080 !important; }
[data-theme='w98'] .np-action-btn:hover { background: #000080; color: #ffffff; }
[data-theme='w98'] .np-queue-item:hover,
[data-theme='w98'] .np-queue-item.context-active { background: #000080; color: #ffffff; }
[data-theme='w98'] .track-row:hover,
[data-theme='w98'] .track-row.context-active { background: #000080 !important; }
[data-theme='w98'] .track-row:hover *,
[data-theme='w98'] .track-row.context-active * { color: #ffffff !important; }
[data-theme='w98'] .artist-row:hover { background: #000080; color: #ffffff; }
[data-theme='w98'] .year-toggle:hover { color: #000080; }
[data-theme='w98'] .playlist-row:hover { background: #000080; }
[data-theme='w98'] .playlist-row:hover,
[data-theme='w98'] .playlist-row:hover * { color: #ffffff; }
[data-theme='w98'] .help-question:hover { color: #000080; }
[data-theme='w98'] .help-item-open .help-question { color: #000080; font-weight: bold; }
[data-theme='w98'] .help-item-open .help-chevron { color: #000080; }
[data-theme='w98'] .queue-item:hover,
[data-theme='w98'] .queue-item.context-active { background: #000080 !important; }
[data-theme='w98'] .queue-item:hover .queue-item-title,
[data-theme='w98'] .queue-item:hover .queue-item-artist,
[data-theme='w98'] .queue-item:hover .queue-item-duration,
[data-theme='w98'] .queue-item.context-active .queue-item-title,
[data-theme='w98'] .queue-item.context-active .queue-item-artist,
[data-theme='w98'] .queue-item.context-active .queue-item-duration { color: #ffffff; }
[data-theme='w98'] .player-btn:hover { background: #000080; color: #ffffff; }
[data-theme='w98'] .player-btn-primary { background: #d4d0c8 !important; color: #000000 !important; }
[data-theme='w98'] .player-btn-primary:hover { background: #000080 !important; color: #ffffff !important; }
[data-theme='w98'] .search-result-item:hover,
[data-theme='w98'] .search-result-item.active { background: #000080; }
[data-theme='w98'] .search-result-item:hover .search-result-name,
[data-theme='w98'] .search-result-item:hover .search-result-sub,
[data-theme='w98'] .search-result-item.active .search-result-name,
[data-theme='w98'] .search-result-item.active .search-result-sub { color: #ffffff; }
[data-theme='w98'] .collapse-btn { border-color: #808080 !important; }
[data-theme='w98'] .collapse-btn:hover { background: #000080 !important; color: #ffffff !important; }
[data-theme='w98'] .album-row-nav .nav-btn:hover:not(.disabled) { background: #000080; color: #ffffff; }
/* Live-Dropdown: kein backdrop-blur (saugt teal durch), solider W98-Hintergrund */
[data-theme='w98'] .glass {
background: #d4d0c8 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid #000000;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 2px 2px 4px rgba(0,0,0,0.3);
color: #000000;
}
/* Stream-Einträge: --bg-hover ist navy → Override auf W98-Grau mit Bevel */
[data-theme='w98'] .glass [style*="var(--bg-hover)"] {
background: #ece8e0 !important;
border: 1px solid #808080;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
border-radius: 0 !important;
}
/* Inline-color-Overrides für Text in Stream-Einträgen */
[data-theme='w98'] .glass [style*="var(--text-primary)"],
[data-theme='w98'] .glass [style*="var(--text-secondary)"],
[data-theme='w98'] .glass [style*="var(--text-muted)"] {
color: #000000 !important;
}
/* ─── 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: #6B6B7A;
--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: transparent;
border-radius: var(--radius-full);
transition: background 0.3s ease;
}
*:hover::-webkit-scrollbar-thumb { background: var(--ctp-surface2); }
.is-scrolling::-webkit-scrollbar-thumb { background: var(--ctp-surface2); }
::-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='muma-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: #909090;
--border: #8a9094;
--border-subtle: #c0c4c6;
--positive: #008840;
--warning: #cc8800;
--danger: #c82020;
}
/* ── Musicmatch: contrast fixes ── */
[data-theme='muma-jukebox'] .queue-round-btn.active { color: #001358; }
/* Accent-coloured text on silver body needs to be darker */
[data-theme='muma-jukebox'] {
--accent: #0070a0;
--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='muma-jukebox'] .player-bar { --accent: #00d0ff; }
/* ── Metallic bevel buttons ── */
[data-theme='muma-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: 4px;
}
[data-theme='muma-jukebox'] .btn:hover {
background: linear-gradient(180deg, #eceef0 0%, #cacdd0 100%);
}
[data-theme='muma-jukebox'] .btn-primary {
background: linear-gradient(180deg, #40e0ff 0%, #00a8d8 100%);
color: #001358;
font-weight: 600;
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);
border-radius: 4px;
}
[data-theme='muma-jukebox'] .btn-primary:hover {
background: linear-gradient(180deg, #60e8ff 0%, #20c0f0 100%);
}
/* ── Player bar: blue LCD display area ── */
[data-theme='muma-jukebox'] .player-bar {
background: #001358;
border-top: 3px solid #8a9094;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.08),
inset 0 2px 12px rgba(0,0,0,0.4);
}
[data-theme='muma-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='muma-jukebox'] .player-track-artist {
color: #00d0ff;
opacity: 0.9;
}
[data-theme='muma-jukebox'] .player-btn,
[data-theme='muma-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='muma-jukebox'] .player-btn:hover,
[data-theme='muma-jukebox'] .player-btn-primary:hover {
background: linear-gradient(180deg, #2030a0 0%, #001060 100%);
color: #40e8ff;
}
/* ── Sidebar: brushed-metal panel ── */
[data-theme='muma-jukebox'] .sidebar {
background: linear-gradient(180deg, #c8ccce 0%, #b0b4b7 100%);
border-right: 2px solid #7a8084;
box-shadow: inset -2px 0 0 rgba(255,255,255,0.5), 2px 0 4px rgba(0,0,0,0.15);
}
/* Nav links on silver: look like Windows panel items */
[data-theme='muma-jukebox'] .nav-link {
color: #1a1a2a;
border-radius: 3px;
margin: 1px 4px;
}
[data-theme='muma-jukebox'] .nav-link:hover {
background: linear-gradient(180deg, #dde2e5 0%, #c8ccce 100%);
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.15);
color: #0070a0;
}
[data-theme='muma-jukebox'] .nav-link.active {
background: linear-gradient(180deg, #b8c8e0 0%, #9ab0d0 100%);
box-shadow:
inset 1px 1px 0 rgba(0,0,0,0.15),
inset -1px -1px 0 rgba(255,255,255,0.5);
color: #001358;
font-weight: 600;
}
[data-theme='muma-jukebox'] .nav-link.active::before { display: none; }
/* ── Cards / panels: inset bevel ── */
[data-theme='muma-jukebox'] .glass,
[data-theme='muma-jukebox'] .card {
background: #d4d8db;
box-shadow:
inset 1px 1px 0 rgba(255,255,255,0.85),
inset -1px -1px 0 rgba(0,0,0,0.15),
0 2px 6px rgba(0,0,0,0.1);
border: 1px solid #9a9ea0 !important;
}
/* ── Track rows: Windows XP list selection ── */
[data-theme='muma-jukebox'] .track-row:hover,
[data-theme='muma-jukebox'] .track-row.context-active {
background: #316AC5 !important;
color: #ffffff !important;
box-shadow: none;
}
[data-theme='muma-jukebox'] .track-row:hover .track-title,
[data-theme='muma-jukebox'] .track-row:hover .track-artist,
[data-theme='muma-jukebox'] .track-row:hover .track-duration,
[data-theme='muma-jukebox'] .track-row:hover .track-num,
[data-theme='muma-jukebox'] .track-row.context-active .track-title,
[data-theme='muma-jukebox'] .track-row.context-active .track-artist { color: #ffffff !important; }
/* ── Queue items ── */
[data-theme='muma-jukebox'] .queue-item:hover,
[data-theme='muma-jukebox'] .queue-item.context-active {
background: #316AC5 !important;
}
[data-theme='muma-jukebox'] .queue-item:hover .queue-item-title,
[data-theme='muma-jukebox'] .queue-item:hover .queue-item-artist,
[data-theme='muma-jukebox'] .queue-item:hover .queue-item-duration,
[data-theme='muma-jukebox'] .queue-item.context-active .queue-item-title,
[data-theme='muma-jukebox'] .queue-item.context-active .queue-item-artist { color: #ffffff !important; }
[data-theme='muma-jukebox'] .queue-item.active {
background: rgba(0, 112, 160, 0.14);
box-shadow: inset 3px 0 0 #0070a0;
}
[data-theme='muma-jukebox'] .np-queue-item:hover,
[data-theme='muma-jukebox'] .np-queue-item.context-active {
background: #316AC5;
}
[data-theme='muma-jukebox'] .np-queue-item-active { color: #001358; font-weight: 600; }
[data-theme='muma-jukebox'] .np-queue-item.active { background: rgba(49,106,197,0.18); }
/* ── Artist / playlist rows ── */
[data-theme='muma-jukebox'] .artist-row:hover,
[data-theme='muma-jukebox'] .playlist-row:hover {
background: #316AC5;
color: #ffffff;
}
/* ── Settings tabs: XP tab strip ── */
[data-theme='muma-jukebox'] .settings-tab {
background: linear-gradient(180deg, #d4d8db 0%, #c0c4c7 100%);
border: 1px solid #9a9ea0;
color: #1a1a1a;
border-radius: 3px 3px 0 0;
margin-right: 2px;
}
[data-theme='muma-jukebox'] .settings-tab:hover {
background: linear-gradient(180deg, #dde2e5 0%, #cacdd0 100%);
color: #0070a0;
}
[data-theme='muma-jukebox'] .settings-tab.active {
background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
color: #001358;
font-weight: 600;
box-shadow: inset 0 2px 0 #0070a0;
border-bottom-color: transparent;
}
/* ── Queue tab buttons ── */
[data-theme='muma-jukebox'] .queue-tab-btn:hover { color: #0070a0; }
/* ── Now-playing active ── */
[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-title,
[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-num {
color: #0070a0;
font-weight: 600;
}
/* ── Scrollbar: XP silver ── */
[data-theme='muma-jukebox'] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme='muma-jukebox'] ::-webkit-scrollbar-track {
background: linear-gradient(90deg, #c0c4c7 0%, #d4d8db 100%);
border: 1px solid #9a9ea0;
}
[data-theme='muma-jukebox'] ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #dde2e5 0%, #b8bcbf 100%);
border: 1px solid #9a9ea0;
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(0,0,0,0.15);
}
[data-theme='muma-jukebox'] ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #e8ecf0 0%, #c8ccce 100%);
}
[data-theme='muma-jukebox'] ::-webkit-scrollbar-button {
background: linear-gradient(180deg, #dde2e5 0%, #b8bcbf 100%);
border: 1px solid #9a9ea0;
height: 16px;
}
/* ── Dropdowns ── */
[data-theme='muma-jukebox'] .custom-select-trigger {
background: linear-gradient(180deg, #e4e8eb 0%, #d4d8db 100%);
border: 1px solid #9a9ea0;
box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
}
[data-theme='muma-jukebox'] .custom-select-option:hover {
background: #316AC5 !important;
color: #ffffff !important;
}
/* ── Connection indicators ── */
[data-theme='muma-jukebox'] .connection-type,
[data-theme='muma-jukebox'] .connection-server { color: #0070a0; }
/* ── Orange: volume knob + active/playing states ── */
/* Knob is var(--text-primary) by default = near-black on silver → fix to orange */
[data-theme='muma-jukebox'] input[type="range"]::-webkit-slider-thumb {
background: #ff6600;
box-shadow: inset 1px 1px 0 rgba(255,180,80,0.7), inset -1px -1px 0 rgba(160,40,0,0.4);
}
[data-theme='muma-jukebox'] input[type="range"]:hover::-webkit-slider-thumb {
background: #ff8020;
}
/* Active queue item: orange left bar instead of blue */
[data-theme='muma-jukebox'] .queue-item.active {
background: rgba(255, 102, 0, 0.1);
box-shadow: inset 3px 0 0 #ff6600;
}
[data-theme='muma-jukebox'] .np-queue-item-active {
color: #cc4400;
font-weight: 600;
}
[data-theme='muma-jukebox'] .np-queue-item.active {
background: rgba(255, 102, 0, 0.1);
}
/* Now-playing active track = orange brand color */
[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-title,
[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-num {
color: #cc4400;
font-weight: 600;
}
/* Active nav link: orange accent text */
[data-theme='muma-jukebox'] .nav-link.active { color: #cc4400; }
/* Settings tab active: orange top border */
[data-theme='muma-jukebox'] .settings-tab.active {
box-shadow: inset 0 2px 0 #ff6600;
color: #cc4400;
}
/* Track row playing indicator (now-playing track-num shown in orange) */
[data-theme='muma-jukebox'] .track-row.playing .track-num { color: #ff6600; }
/* Player bar artist: keep cyan, but LCD progress/waveform in orange */
[data-theme='muma-jukebox'] .player-bar input[type="range"]::-webkit-slider-thumb {
background: #ff6600;
}
/* Waveform: orange played, cyan buffered, dim unplayed */
[data-theme='muma-jukebox'] {
--waveform-played: #ff6600;
--waveform-buffered: #00d0ff;
--waveform-unplayed: #3a5080;
}
/* ── Hero readability on silver background ── */
[data-theme='muma-jukebox'] .album-detail-badge {
background: #0070a0;
color: #ffffff;
}
[data-theme='muma-jukebox'] .album-detail-info {
color: #4a4a4a;
}
/* ─── WMP8 Classic — Windows Media Player 8 / XP Luna ─── */
[data-theme='winmedplayer'] {
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='winmedplayer'] .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='winmedplayer'] .app-shell {
background: linear-gradient(160deg, #4a72b8 0%, #3a62a5 40%, #2e5498 100%);
}
/* Player bar: black LCD display with green glow ambience */
[data-theme='winmedplayer'] .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='winmedplayer'] .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='winmedplayer'] .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='winmedplayer'] .player-btn,
[data-theme='winmedplayer'] .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='winmedplayer'] .player-btn:hover,
[data-theme='winmedplayer'] .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='winmedplayer'] .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='winmedplayer'] .btn:hover {
background: linear-gradient(180deg, #cce0ff 0%, #90aaee 55%, #6888d0 100%);
}
[data-theme='winmedplayer'] .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='winmedplayer'] .queue-round-btn.active {
color: #003300;
}
/* Cards / glass panels: slightly elevated with border */
[data-theme='winmedplayer'] .glass,
[data-theme='winmedplayer'] .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='winmedplayer'] .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 ─── */
/* ─── CyberLink PowerDVD ─── */
/* Midnight navy-blue darkness — not flat black, but that specific cinema-hall depth */
[data-theme='p-dvd'] {
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%235a7090%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 — midnight navy spectrum ── */
--ctp-crust: #020306; /* cinema blackout */
--ctp-mantle: #060810; /* control deck depth */
--ctp-base: #0a0d18; /* main chassis — navy-black */
--ctp-surface0: #10141f;
--ctp-surface1: #171c2a;
--ctp-surface2: #1f2535;
--ctp-overlay0: #2c3548;
--ctp-overlay1: #3c4860;
--ctp-overlay2: #506078;
--ctp-text: #a8b8d0; /* blue-tinted label silver */
--ctp-subtext1: #7890b0;
--ctp-subtext0: #506080;
/* PowerDVD blue spectrum */
--ctp-mauve: #0088e8; /* PowerDVD blue — primary */
--ctp-lavender: #00a8ff;
--ctp-sky: #00ccff; /* glow highlight */
--ctp-teal: #00b8cc;
--ctp-blue: #0070cc;
--ctp-sapphire: #0055aa;
--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: #0a0d18;
--bg-sidebar: #060810;
--bg-card: #10141f;
--bg-hover: #171c2a;
--bg-player: #020306;
--bg-glass: rgba(10, 13, 24, 0.96);
--accent: #0088e8;
--accent-dim: rgba(0, 136, 232, 0.14);
--accent-glow: rgba(0, 136, 232, 0.40);
--text-primary: #a8b8d0;
--text-secondary:#6880a8;
--text-muted: #506080;
--border: #1a2030;
--border-subtle: #10141e;
--positive: #00cc66;
--warning: #ccaa00;
--danger: #cc2222;
}
/* ── App shell: very subtle navy depth gradient ── */
[data-theme='p-dvd'] .app-shell {
background: linear-gradient(160deg, #0c1020 0%, #080c18 50%, #060910 100%);
}
/* ── Sidebar: darkest navy — control panel behind the disc tray ── */
[data-theme='p-dvd'] .sidebar {
background: linear-gradient(180deg, #07091280 0%, #060810 40%, #050710 100%);
border-right: 1px solid #141824;
box-shadow: inset -1px 0 0 rgba(0, 136, 232, 0.08), 2px 0 12px rgba(0, 0, 0, 0.7);
}
/* Active nav: PowerDVD blue LED strip */
[data-theme='p-dvd'] .nav-link.active {
color: #00a8ff;
}
[data-theme='p-dvd'] .nav-link.active::before {
background: #0088e8;
box-shadow: 0 0 8px rgba(0, 136, 232, 0.7);
}
/* ── Player bar: cinema control deck — pure black + blue accent top border ── */
[data-theme='p-dvd'] .player-bar {
background: linear-gradient(180deg, #050710 0%, #020306 100%);
border-top: 1px solid #0a1828;
box-shadow:
inset 0 2px 0 rgba(0, 136, 232, 0.18),
inset 0 1px 0 rgba(0, 200, 255, 0.08),
0 -4px 24px rgba(0, 0, 0, 0.9);
}
/* Track name: PowerDVD blue LED display glow */
[data-theme='p-dvd'] .player-track-name {
color: #00ccff;
text-shadow:
0 0 5px rgba(0, 204, 255, 0.95),
0 0 12px rgba(0, 136, 232, 0.70),
0 0 24px rgba(0, 100, 200, 0.35);
letter-spacing: 0.03em;
}
[data-theme='p-dvd'] .player-track-artist {
color: #0088e8;
text-shadow: 0 0 6px rgba(0, 136, 232, 0.60);
opacity: 1;
}
[data-theme='p-dvd'] .player-time {
color: #0088e8;
text-shadow: 0 0 5px rgba(0, 136, 232, 0.65);
}
/* ── Chrome transport buttons: silver against navy — the iconic contrast ── */
[data-theme='p-dvd'] .player-btn,
[data-theme='p-dvd'] .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 8px rgba(0, 0, 0, 0.8),
0 1px 2px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
[data-theme='p-dvd'] .player-btn:hover,
[data-theme='p-dvd'] .player-btn-primary:hover {
background: linear-gradient(170deg, #f5f5f5 0%, #ffffff 30%, #d0d0d0 70%, #aaaaaa 100%);
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.8),
0 1px 3px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 1),
inset 0 -1px 0 rgba(0, 0, 0, 0.2),
0 0 10px rgba(0, 136, 232, 0.20);
}
/* ── Regular buttons: navy panel style ── */
[data-theme='p-dvd'] .btn {
background: linear-gradient(180deg, #171c2a 0%, #10141f 100%);
color: #a8b8d0;
border: 1px solid #1f2a3e;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.6);
}
[data-theme='p-dvd'] .btn:hover {
background: linear-gradient(180deg, #1f2535 0%, #171c2a 100%);
border-color: #2a3850;
}
[data-theme='p-dvd'] .btn-primary {
background: linear-gradient(180deg, #00a8ff 0%, #0070cc 100%);
color: #ffffff;
border: 1px solid #0055aa;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 4px rgba(0, 0, 0, 0.5),
0 0 10px rgba(0, 136, 232, 0.35);
}
/* Active queue round buttons: white on blue */
[data-theme='p-dvd'] .queue-round-btn.active {
color: #ffffff;
}
/* ── Cards / panels: navy inset ── */
[data-theme='p-dvd'] .glass,
[data-theme='p-dvd'] .card {
background: rgba(16, 20, 31, 0.90);
border: 1px solid #1a2030;
box-shadow: inset 0 1px 0 rgba(0, 136, 232, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5);
}
/* ── Content header: dark navy band ── */
[data-theme='p-dvd'] .content-header {
background: linear-gradient(180deg, rgba(16, 20, 31, 0.80) 0%, rgba(10, 13, 24, 0.30) 100%);
border-bottom: 1px solid #1a2030;
}
/* ── Hover / active states: blue LED glow ── */
[data-theme='p-dvd'] .track-row:hover,
[data-theme='p-dvd'] .track-row.context-active {
background: rgba(0, 136, 232, 0.07);
box-shadow: inset 3px 0 0 #0088e8;
}
[data-theme='p-dvd'] .queue-item:hover,
[data-theme='p-dvd'] .queue-item.context-active {
background: rgba(0, 136, 232, 0.07);
}
[data-theme='p-dvd'] .queue-item.active {
background: rgba(0, 136, 232, 0.12);
border-left: 2px solid #0088e8;
}
[data-theme='p-dvd'] .np-queue-item.active { background: rgba(0, 136, 232, 0.08); }
[data-theme='p-dvd'] .np-queue-item-active { color: #00a8ff; }
[data-theme='p-dvd'] .np-queue-item:hover,
[data-theme='p-dvd'] .np-queue-item.context-active { background: rgba(0, 136, 232, 0.06); }
[data-theme='p-dvd'] .np-album-track.active .np-album-track-title,
[data-theme='p-dvd'] .np-album-track.active .np-album-track-num { color: #00a8ff; }
[data-theme='p-dvd'] .artist-row:hover { background: rgba(0, 136, 232, 0.06); box-shadow: inset 3px 0 0 #0088e8; }
[data-theme='p-dvd'] .playlist-row:hover { background: rgba(0, 136, 232, 0.06); box-shadow: inset 3px 0 0 #0088e8; }
[data-theme='p-dvd'] .settings-tab:hover { background: rgba(0, 136, 232, 0.08); color: #00a8ff; }
[data-theme='p-dvd'] .settings-tab.active { background: rgba(0, 136, 232, 0.14); color: #00a8ff; border-color: #0088e8; }
[data-theme='p-dvd'] .queue-tab-btn:hover { background: rgba(0, 136, 232, 0.08); color: #00a8ff; }
[data-theme='p-dvd'] .custom-select-trigger:hover { background: rgba(0, 136, 232, 0.08); }
[data-theme='p-dvd'] .custom-select-option:hover { background: rgba(0, 136, 232, 0.12); }
[data-theme='p-dvd'] .artist-ext-link:hover { background: rgba(0, 136, 232, 0.10); border-color: #0088e8; }
[data-theme='p-dvd'] .connection-type,
[data-theme='p-dvd'] .connection-server { color: #4880b8; }
/* ─── 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: #b09880;
--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 ─── */
/* ─── Windows 7 Aero Glass ─── */
[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: #05080f;
--ctp-mantle: #0d1a2e;
--ctp-base: #b8cfe8;
--ctp-surface0: #ccdaea;
--ctp-surface1: #d8e6f2;
--ctp-surface2: #e4f0f8;
--ctp-overlay0: #a0bcd8;
--ctp-overlay1: #7aa0c0;
--ctp-overlay2: #5a84a8;
--ctp-text: #0d1a2e;
--ctp-subtext1: #1e3250;
--ctp-subtext0: #3a5070;
--ctp-mauve: #1878e8;
--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: #b8cfe8;
--bg-sidebar: rgba(210, 228, 248, 0.55);
--bg-card: rgba(225, 238, 252, 0.65);
--bg-hover: rgba(24, 120, 232, 0.85);
--bg-player: #05080f;
--bg-glass: rgba(210, 228, 248, 0.82);
--accent: #1878e8;
--accent-dim: rgba(24, 120, 232, 0.14);
--accent-glow: rgba(24, 120, 232, 0.40);
--volume-accent: #1878e8;
--text-primary: #0d1a2e;
--text-secondary:#1e3250;
--text-muted: #7090b8;
--border: rgba(130, 175, 220, 0.65);
--border-subtle: rgba(160, 200, 240, 0.45);
--positive: #107c10;
--warning: #c87400;
--danger: #c42b1c;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
}
/* ── Background: W7 sky with depth ── */
[data-theme='aero-glass'] .app-shell {
background: linear-gradient(160deg, #c8e2f5 0%, #b5cfe4 45%, #9fc0db 100%);
}
/* ── Sidebar: Aero glass panel — frosted translucent ── */
[data-theme='aero-glass'] .sidebar {
background: rgba(210, 232, 252, 0.52);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-right: 1px solid rgba(150, 190, 230, 0.55);
box-shadow:
inset -1px 0 0 rgba(255,255,255,0.75),
inset 1px 0 0 rgba(255,255,255,0.25),
2px 0 8px rgba(0,0,0,0.12);
}
/* ── Player bar: authentic W7 taskbar — near-black glass ── */
[data-theme='aero-glass'] .player-bar {
background: linear-gradient(180deg,
rgba(12, 18, 32, 0.96) 0%,
rgba(6, 10, 20, 0.99) 100%
);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border-top: 1px solid rgba(80, 155, 235, 0.60);
box-shadow:
inset 0 1px 0 rgba(100, 180, 255, 0.28),
inset 0 2px 0 rgba(255,255,255,0.06),
0 -2px 16px rgba(0,0,0,0.55);
}
/* Track info: white on near-black, blue glow */
[data-theme='aero-glass'] .player-track-name {
color: #ffffff;
text-shadow: 0 0 12px rgba(80, 160, 255, 0.65), 0 1px 2px rgba(0,0,0,0.60);
font-weight: 600;
}
[data-theme='aero-glass'] .player-track-artist { color: #88b8e0; opacity: 1; }
[data-theme='aero-glass'] .player-time { color: #88b8e0; }
/* ── Transport buttons: Aero glass gel circles ── */
[data-theme='aero-glass'] .player-btn,
[data-theme='aero-glass'] .player-btn-primary {
background: linear-gradient(180deg,
rgba(255,255,255,0.80) 0%,
rgba(195,228,255,0.82) 48%,
rgba(80,160,235,0.92) 50%,
rgba(30,110,205,0.96) 100%
);
color: #ffffff;
border: 1px solid rgba(20, 75, 180, 0.55);
border-radius: 50%;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.90),
0 2px 6px rgba(0,0,0,0.40),
0 0 0 1px rgba(80,150,230,0.25);
}
[data-theme='aero-glass'] .player-btn:hover,
[data-theme='aero-glass'] .player-btn-primary:hover {
background: linear-gradient(180deg,
rgba(255,255,255,0.92) 0%,
rgba(215,240,255,0.90) 48%,
rgba(105,178,248,0.95) 50%,
rgba(50,130,220,0.99) 100%
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
0 3px 10px rgba(0,0,0,0.40),
0 0 12px rgba(51,153,255,0.45);
}
/* ── Regular buttons: Aero frosted glass ── */
[data-theme='aero-glass'] .btn,
[data-theme='aero-glass'] .btn-surface,
[data-theme='aero-glass'] .btn-ghost {
background: linear-gradient(180deg,
rgba(255,255,255,0.85) 0%,
rgba(255,255,255,0.85) 48%,
rgba(190,220,248,0.90) 50%,
rgba(155,198,240,0.94) 100%
);
color: #0d1a2e;
border: 1px solid rgba(120, 170, 220, 0.65);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 0 1px 0 rgba(255,255,255,0.50),
0 1px 3px rgba(0,0,0,0.18);
border-radius: 5px;
}
[data-theme='aero-glass'] .btn:hover,
[data-theme='aero-glass'] .btn-surface:hover,
[data-theme='aero-glass'] .btn-ghost:hover {
background: linear-gradient(180deg,
rgba(255,255,255,0.96) 0%,
rgba(255,255,255,0.96) 48%,
rgba(210,235,255,0.95) 50%,
rgba(175,215,252,0.98) 100%
);
border-color: rgba(24, 120, 232, 0.70);
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 4px rgba(0,0,0,0.20),
0 0 8px rgba(24,120,232,0.22);
}
/* ── Primary button: Aero blue gel ── */
[data-theme='aero-glass'] .btn-primary {
background: linear-gradient(180deg,
rgba(110,185,255,0.92) 0%,
rgba(70,155,245,0.92) 48%,
rgba(24,100,205,0.96) 50%,
rgba(12,72,175,0.99) 100%
);
color: #ffffff;
border: 1px solid rgba(12, 60, 155, 0.70);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.58),
0 1px 4px rgba(0,0,0,0.30),
0 0 10px rgba(24,120,232,0.38);
border-radius: 5px;
}
[data-theme='aero-glass'] .btn-primary:hover {
background: linear-gradient(180deg,
rgba(140,200,255,0.95) 0%,
rgba(90,170,255,0.95) 48%,
rgba(40,120,225,0.98) 50%,
rgba(24,95,195,1) 100%
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.65),
0 1px 5px rgba(0,0,0,0.30),
0 0 14px rgba(24,120,232,0.50);
}
/* ── Hero / album-card buttons: frosted glass ── */
[data-theme='aero-glass'] .hero-play-btn,
[data-theme='aero-glass'] .album-card-details-btn {
background: linear-gradient(180deg,
rgba(255,255,255,0.82) 0%,
rgba(190,220,248,0.88) 48%,
rgba(140,190,235,0.92) 50%,
rgba(100,160,220,0.95) 100%
);
color: #0d1a2e;
border: 1px solid rgba(100,160,220,0.60);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 3px rgba(0,0,0,0.20);
}
[data-theme='aero-glass'] .hero-play-btn:hover,
[data-theme='aero-glass'] .album-card-details-btn:hover {
background: linear-gradient(180deg,
rgba(255,255,255,0.95) 0%,
rgba(215,238,255,0.95) 50%,
rgba(165,210,250,0.98) 100%
);
border-color: rgba(24,120,232,0.70);
box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 8px rgba(24,120,232,0.25);
}
/* ── Queue toolbar round buttons: Aero glass ── */
[data-theme='aero-glass'] .queue-round-btn {
background: linear-gradient(180deg,
rgba(255,255,255,0.80) 0%,
rgba(185,218,248,0.88) 50%,
rgba(140,190,235,0.92) 100%
);
color: #1e3250;
border: 1px solid rgba(110,165,220,0.60);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 2px rgba(0,0,0,0.18);
}
[data-theme='aero-glass'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: linear-gradient(180deg,
rgba(255,255,255,0.95) 0%,
rgba(210,235,255,0.95) 50%,
rgba(165,208,250,0.98) 100%
);
border-color: rgba(24,120,232,0.65);
box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 8px rgba(24,120,232,0.25);
color: #0d1a2e;
}
[data-theme='aero-glass'] .queue-round-btn.active {
background: linear-gradient(180deg,
rgba(110,180,255,0.90) 0%,
rgba(24,100,210,0.96) 100%
);
color: #ffffff;
border-color: rgba(12,60,155,0.70);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 0 8px rgba(24,120,232,0.50);
}
/* ── Cards: frosted glass panels ── */
[data-theme='aero-glass'] .card {
background: rgba(225, 240, 255, 0.62);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(160, 200, 240, 0.60);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.80),
0 2px 8px rgba(0,0,0,0.12);
border-radius: 6px;
}
/* ── Content header: Aero chrome strip ── */
[data-theme='aero-glass'] .content-header {
background: rgba(210, 232, 252, 0.58);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(150, 195, 240, 0.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.70),
inset 0 -1px 0 rgba(255,255,255,0.35),
0 2px 6px rgba(0,0,0,0.10);
}
/* Connection indicators: dark navy, readable on glass */
[data-theme='aero-glass'] .connection-type,
[data-theme='aero-glass'] .connection-server {
color: #0d1a2e;
}
/* ── Theme accordion: glass hover ── */
[data-theme='aero-glass'] .theme-accordion-header:hover {
background: rgba(24,120,232,0.18);
color: #0d1a2e;
}
[data-theme='aero-glass'] .theme-accordion-open .theme-accordion-header {
background: rgba(24,120,232,0.22);
color: #0d1a2e;
}
/* ── Progress bar: Aero blue ── */
[data-theme='aero-glass'] .progress-bar-track {
background: rgba(150, 195, 235, 0.45);
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.15);
}
[data-theme='aero-glass'] .progress-bar-fill {
background: linear-gradient(180deg,
rgba(110,185,255,0.95) 0%,
rgba(24,120,232,0.98) 50%,
rgba(12,90,200,1) 100%
);
border-radius: 3px;
box-shadow: 0 0 6px rgba(24,120,232,0.50);
}
/* ── Scrollbar: W7 thin glass style ── */
[data-theme='aero-glass'] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme='aero-glass'] ::-webkit-scrollbar-track {
background: rgba(175, 210, 245, 0.25);
border-radius: 5px;
}
[data-theme='aero-glass'] ::-webkit-scrollbar-thumb {
background: rgba(110, 168, 225, 0.60);
border: 1px solid rgba(80, 140, 200, 0.45);
border-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
[data-theme='aero-glass'] ::-webkit-scrollbar-thumb:hover {
background: rgba(24, 120, 232, 0.72);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.50), 0 0 4px rgba(24,120,232,0.30);
}
/* ── Glass / dropdowns: frosted glass panel ── */
[data-theme='aero-glass'] .glass {
background: rgba(218, 236, 255, 0.88) !important;
backdrop-filter: blur(18px) !important;
-webkit-backdrop-filter: blur(18px) !important;
border: 1px solid rgba(150, 195, 240, 0.65) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.75),
2px 2px 12px rgba(0,0,0,0.18) !important;
border-radius: 8px !important;
}
[data-theme='aero-glass'] .glass [style*="var(--bg-hover)"] {
background: rgba(24,120,232,0.20) !important;
border-radius: 4px !important;
}
[data-theme='aero-glass'] .glass [style*="var(--text-primary)"] { color: #0d1a2e !important; }
[data-theme='aero-glass'] .glass [style*="var(--text-secondary)"] { color: #1e3250 !important; }
[data-theme='aero-glass'] .glass [style*="var(--text-muted)"] { color: #3a5070 !important; }
/* ── Hover / selection: Aero blue glass ── */
[data-theme='aero-glass'] .queue-tab-btn:hover { background: rgba(24,120,232,0.18); color: #0d1a2e; }
[data-theme='aero-glass'] .settings-tab:hover { background: rgba(24,120,232,0.18); color: #0d1a2e; }
[data-theme='aero-glass'] .settings-tab.active {
background: rgba(24,120,232,0.85);
color: #ffffff;
}
[data-theme='aero-glass'] .custom-select-trigger:hover { background: rgba(24,120,232,0.15); }
[data-theme='aero-glass'] .custom-select-option:hover {
background: rgba(24,120,232,0.85) !important;
color: #ffffff !important;
}
[data-theme='aero-glass'] .artist-ext-link:hover {
background: rgba(24,120,232,0.85);
color: #ffffff !important;
}
[data-theme='aero-glass'] .np-action-btn:hover { background: rgba(24,120,232,0.18); }
[data-theme='aero-glass'] .np-queue-item:hover,
[data-theme='aero-glass'] .np-queue-item.context-active {
background: rgba(24,120,232,0.85);
color: #ffffff;
}
[data-theme='aero-glass'] .track-row:hover,
[data-theme='aero-glass'] .track-row.context-active {
background: rgba(24,120,232,0.85) !important;
}
[data-theme='aero-glass'] .track-row:hover *,
[data-theme='aero-glass'] .track-row.context-active * { color: #ffffff !important; }
[data-theme='aero-glass'] .artist-row:hover { background: rgba(24,120,232,0.85); color: #ffffff; }
[data-theme='aero-glass'] .playlist-row:hover { background: rgba(24,120,232,0.85); }
[data-theme='aero-glass'] .playlist-row:hover,
[data-theme='aero-glass'] .playlist-row:hover * { color: #ffffff; }
[data-theme='aero-glass'] .queue-item:hover,
[data-theme='aero-glass'] .queue-item.context-active {
background: rgba(24,120,232,0.85) !important;
}
[data-theme='aero-glass'] .queue-item:hover .queue-item-title,
[data-theme='aero-glass'] .queue-item:hover .queue-item-artist,
[data-theme='aero-glass'] .queue-item:hover .queue-item-duration,
[data-theme='aero-glass'] .queue-item.context-active .queue-item-title,
[data-theme='aero-glass'] .queue-item.context-active .queue-item-artist,
[data-theme='aero-glass'] .queue-item.context-active .queue-item-duration { color: #ffffff; }
/* ── Active queue / now-playing items ── */
[data-theme='aero-glass'] .queue-item.active {
background: rgba(24, 120, 232, 0.14);
color: #1366c8;
}
[data-theme='aero-glass'] .queue-item.active .queue-item-artist,
[data-theme='aero-glass'] .queue-item.active .queue-item-duration {
color: #1878e8;
opacity: 0.85;
}
[data-theme='aero-glass'] .np-queue-item-active { color: #1366c8; }
[data-theme='aero-glass'] .np-queue-item.active { background: rgba(24, 120, 232, 0.10); }
[data-theme='aero-glass'] .np-album-track.active .np-album-track-title,
[data-theme='aero-glass'] .np-album-track.active .np-album-track-num { color: #1366c8; }
/* ─── Windows XP Luna — Classic 2001 ─── */
/* ─── Windows XP Luna Teal ─── */
[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: #ffffff;
--ctp-surface1: #f5f3ec;
--ctp-surface2: #ece9d8;
--ctp-overlay0: #c0bba8;
--ctp-overlay1: #8a8675;
--ctp-overlay2: #5e5a4c;
--ctp-text: #000000;
--ctp-subtext1: #1a1a1a;
--ctp-subtext0: #444444;
--ctp-mauve: #3c9d29;
--ctp-lavender: #52b83c;
--ctp-green: #3c9d29;
--ctp-teal: #007c8a;
--ctp-sky: #316ac5;
--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: #c8daf5;
--bg-card: #ffffff;
--bg-hover: #316ac5;
--bg-player: #1248b8;
--bg-glass: rgba(255, 255, 255, 0.97);
--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: #555555;
--border: #003399;
--border-subtle: #aca899;
--positive: #3c9d29;
--warning: #b87800;
--danger: #cc1111;
--radius-sm: 3px;
--radius-md: 4px;
--radius-lg: 6px;
}
/* ── App shell: XP sandy desktop ── */
[data-theme='luna-teal'] .app-shell {
background: #ece9d8;
}
/* ── Sidebar: XP Explorer task pane / Folders panel ── */
[data-theme='luna-teal'] .sidebar {
background: linear-gradient(180deg, #d8e8fa 0%, #c0d4f5 40%, #b0c8f0 100%);
border-right: 1px solid #7090c0;
box-shadow: inset -1px 0 0 rgba(255,255,255,0.60), 2px 0 4px rgba(0,0,0,0.14);
}
/* Sidebar text: dark navy on ice blue — with white text-shadow for legibility */
[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: #002060;
text-shadow: 0 1px 0 rgba(255,255,255,0.55);
font-weight: 700;
}
/* Nav links */
[data-theme='luna-teal'] .nav-link { color: #001850; }
[data-theme='luna-teal'] .nav-link:hover {
background: rgba(255,255,255,0.45);
color: #000000;
border-radius: 3px;
}
[data-theme='luna-teal'] .nav-link.active {
background: #316ac5;
color: #ffffff;
border-radius: 3px;
text-shadow: none;
}
[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 */
[data-theme='luna-teal'] .nav-link-nowplaying { background: rgba(0,0,80,0.10); color: #001850; }
[data-theme='luna-teal'] .nav-link-nowplaying:hover { background: rgba(255,255,255,0.45); color: #000000; }
[data-theme='luna-teal'] .nav-link-nowplaying.active { background: #316ac5; color: #ffffff; }
/* ── Player bar: authentic XP Luna taskbar blue ── */
[data-theme='luna-teal'] .player-bar {
background: linear-gradient(180deg,
#4b8ee8 0%,
#2568d4 8%,
#1a56c4 30%,
#1248b8 70%,
#0e3da8 85%,
#1248b8 100%
);
border-top: 1px solid #7aaaff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 2px 0 rgba(255,255,255,0.18),
0 -2px 8px rgba(0,0,0,0.30);
}
/* Track name: white with XP glow */
[data-theme='luna-teal'] .player-track-name {
color: #ffffff;
text-shadow: 0 1px 2px rgba(0,0,0,0.60), 0 0 10px rgba(120,180,255,0.40);
font-weight: 700;
}
[data-theme='luna-teal'] .player-track-artist { color: #b8d4ff; opacity: 1; }
[data-theme='luna-teal'] .player-time { color: #b8d4ff; }
/* ── Transport buttons: XP Luna gel circles ── */
[data-theme='luna-teal'] .player-btn,
[data-theme='luna-teal'] .player-btn-primary {
background: linear-gradient(180deg,
#80aaff 0%,
#4477ee 45%,
#1a50dd 50%,
#0c3bb8 100%
);
color: #ffffff;
border: 1px solid #002288;
border-radius: 50%;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.65),
0 2px 5px rgba(0,0,0,0.45);
}
[data-theme='luna-teal'] .player-btn:hover,
[data-theme='luna-teal'] .player-btn-primary:hover {
background: linear-gradient(180deg,
#99bbff 0%,
#5588ff 45%,
#2264ee 50%,
#1a52d0 100%
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.75),
0 3px 8px rgba(0,0,0,0.40),
0 0 10px rgba(80,140,255,0.40);
}
/* ── Regular buttons: XP bevel style ── */
[data-theme='luna-teal'] .btn,
[data-theme='luna-teal'] .btn-surface,
[data-theme='luna-teal'] .btn-ghost {
background: linear-gradient(180deg, #f5f3ec 0%, #ece9d8 48%, #ddd9c8 50%, #d0cdb8 100%);
color: #000000;
border: 1px solid #888480;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.95),
inset 1px 0 0 rgba(255,255,255,0.70),
0 1px 2px rgba(0,0,0,0.20);
border-radius: 3px;
}
[data-theme='luna-teal'] .btn:hover,
[data-theme='luna-teal'] .btn-surface:hover,
[data-theme='luna-teal'] .btn-ghost:hover {
background: linear-gradient(180deg, #ffffff 0%, #f0ede0 48%, #e4e0d0 50%, #d8d4c4 100%);
border-color: #0055e5;
box-shadow:
inset 0 1px 0 rgba(255,255,255,1),
0 1px 3px rgba(0,0,0,0.18);
}
/* ── Primary button: XP green gel ── */
[data-theme='luna-teal'] .btn-primary {
background: linear-gradient(180deg,
#66dd50 0%,
#3c9d29 45%,
#2e8020 50%,
#1e6015 100%
);
color: #ffffff;
border: 1px solid #1a5010;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55),
0 1px 3px rgba(0,0,0,0.30);
border-radius: 4px;
}
[data-theme='luna-teal'] .btn-primary:hover {
background: linear-gradient(180deg,
#80ee68 0%,
#4db035 45%,
#3a9028 50%,
#2e8020 100%
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.60),
0 1px 4px rgba(0,0,0,0.30),
0 0 8px rgba(60,157,41,0.40);
}
/* ── Hero / album-card play buttons ── */
[data-theme='luna-teal'] .hero-play-btn,
[data-theme='luna-teal'] .album-card-details-btn {
background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%);
color: #000000;
border: 1px solid #888480;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 2px rgba(0,0,0,0.20);
}
[data-theme='luna-teal'] .hero-play-btn:hover,
[data-theme='luna-teal'] .album-card-details-btn:hover {
background: linear-gradient(180deg, #ffffff 0%, #ddd9c8 100%);
border-color: #0055e5;
}
/* ── Queue toolbar round buttons ── */
[data-theme='luna-teal'] .queue-round-btn {
background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%);
color: #333333;
border: 1px solid #888480;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 1px 2px rgba(0,0,0,0.18);
}
[data-theme='luna-teal'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: linear-gradient(180deg, #ffffff 0%, #e0ddd0 100%);
border-color: #0055e5;
color: #000000;
}
[data-theme='luna-teal'] .queue-round-btn.active {
background: #316ac5;
color: #ffffff;
border-color: #0033aa;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.15);
}
/* ── Cards: XP white window interior ── */
[data-theme='luna-teal'] .card {
background: #ffffff;
border: 1px solid #aca899;
box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 3px rgba(0,0,0,0.15);
border-radius: 4px;
}
/* ── Content header: XP title bar gradient ── */
[data-theme='luna-teal'] .content-header {
background: linear-gradient(180deg,
#5a9aee 0%,
#2a6ad4 25%,
#1a56c4 50%,
#0e48b8 75%,
#0a3aaa 100%
);
border-bottom: 1px solid #0033aa;
color: #ffffff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 2px 4px rgba(0,0,0,0.18);
}
/* Connection indicators: white on blue header */
[data-theme='luna-teal'] .connection-type,
[data-theme='luna-teal'] .connection-server {
color: #ffffff;
text-shadow: 0 1px 2px rgba(0,0,0,0.50);
}
/* ── Theme accordion: XP selection blue ── */
[data-theme='luna-teal'] .theme-accordion-header:hover { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-header { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-chevron { color: #ffffff; }
/* ── Progress bar: XP green ── */
[data-theme='luna-teal'] .progress-bar-track {
background: #aca899;
border-radius: 2px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
[data-theme='luna-teal'] .progress-bar-fill {
background: linear-gradient(180deg, #52cc3c 0%, #3c9d29 50%, #2e8020 100%);
border-radius: 2px;
}
/* ── Scrollbar: XP 16px system style ── */
[data-theme='luna-teal'] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme='luna-teal'] ::-webkit-scrollbar-track { background: #ece9d8; border-left: 1px solid #aca899; }
[data-theme='luna-teal'] ::-webkit-scrollbar-thumb {
background: linear-gradient(to right, #c8c4b8 0%, #e0ddd0 40%, #c0bbb4 100%);
border: 1px solid #888480;
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480;
border-radius: 2px;
}
[data-theme='luna-teal'] ::-webkit-scrollbar-button {
background: linear-gradient(180deg, #f0ede0 0%, #d8d4c4 100%);
border: 1px solid #888480;
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480;
}
/* ── Glass / dropdowns: solid XP dialog style ── */
[data-theme='luna-teal'] .glass {
background: #ffffff !important;
backdrop-filter: none !important;
border: 1px solid #aca899 !important;
box-shadow: 2px 2px 8px rgba(0,0,0,0.28) !important;
border-radius: 4px !important;
}
[data-theme='luna-teal'] .glass [style*="var(--bg-hover)"] {
background: #316ac5 !important;
border-radius: 0 !important;
color: #ffffff !important;
}
[data-theme='luna-teal'] .glass [style*="var(--text-primary)"] { color: #000000 !important; }
[data-theme='luna-teal'] .glass [style*="var(--text-secondary)"] { color: #333333 !important; }
[data-theme='luna-teal'] .glass [style*="var(--text-muted)"] { color: #555555 !important; }
/* ── Hover / selection: XP classic blue ── */
[data-theme='luna-teal'] .queue-tab-btn:hover { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .settings-tab:hover { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .settings-tab.active { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .custom-select-trigger:hover { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .custom-select-option:hover { background: #316ac5 !important; color: #ffffff !important; }
[data-theme='luna-teal'] .artist-ext-link:hover { background: #316ac5; color: #ffffff !important; }
[data-theme='luna-teal'] .np-action-btn:hover { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .np-queue-item:hover,
[data-theme='luna-teal'] .np-queue-item.context-active { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .track-row:hover,
[data-theme='luna-teal'] .track-row.context-active { background: #316ac5 !important; }
[data-theme='luna-teal'] .track-row:hover *,
[data-theme='luna-teal'] .track-row.context-active * { color: #ffffff !important; }
[data-theme='luna-teal'] .artist-row:hover { background: #316ac5; color: #ffffff; }
[data-theme='luna-teal'] .playlist-row:hover { background: #316ac5; }
[data-theme='luna-teal'] .playlist-row:hover,
[data-theme='luna-teal'] .playlist-row:hover * { color: #ffffff; }
[data-theme='luna-teal'] .queue-item:hover,
[data-theme='luna-teal'] .queue-item.context-active { background: #316ac5 !important; }
[data-theme='luna-teal'] .queue-item:hover .queue-item-title,
[data-theme='luna-teal'] .queue-item:hover .queue-item-artist,
[data-theme='luna-teal'] .queue-item:hover .queue-item-duration,
[data-theme='luna-teal'] .queue-item.context-active .queue-item-title,
[data-theme='luna-teal'] .queue-item.context-active .queue-item-artist,
[data-theme='luna-teal'] .queue-item.context-active .queue-item-duration { color: #ffffff; }
/* ── Active queue / now-playing items ── */
[data-theme='luna-teal'] .queue-item.active {
background: rgba(49, 106, 197, 0.12);
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.85;
}
[data-theme='luna-teal'] .np-queue-item-active { color: #0041b8; }
[data-theme='luna-teal'] .np-queue-item.active { background: rgba(49, 106, 197, 0.10); }
[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: #6d6d72;
--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
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
Middle-Earth — The One Ring Inscription Glow
───────────────────────────────────────────────────────────── */
/* Breathing glow of the Ring — applied to player-track-name.
Like the inscription heating up in Bag End's fireplace. */
@keyframes ring-inscription-glow {
0%, 100% {
text-shadow:
0 0 8px rgba(240, 200, 60, 0.70),
0 0 18px rgba(200, 140, 20, 0.38),
0 0 36px rgba(160, 100, 10, 0.15);
}
50% {
text-shadow:
0 0 12px rgba(240, 200, 60, 0.95),
0 0 28px rgba(200, 140, 20, 0.65),
0 0 52px rgba(160, 100, 10, 0.32),
0 0 80px rgba(100, 60, 5, 0.14);
}
}
/* ─── Middle-Earth — Red Book of Westmarch ─── */
[data-theme='middle-earth'] {
color-scheme: light;
--color-star-active: #8c6800;
--color-star-inactive: #b8985a;
--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");
/* ── Palette ── */
/* Warm — Shire, Rohan, Dwarvish gold */
--ctp-crust: #1a1008;
--ctp-mantle: #281808;
--ctp-base: #f0e0b0;
--ctp-surface0: #e8d498;
--ctp-surface1: #dcc482;
--ctp-surface2: #ccb06e;
--ctp-overlay0: #8a7250;
--ctp-overlay1: #6a5438;
--ctp-overlay2: #4a3828;
--ctp-text: #1e1408;
--ctp-subtext1: #3e2c1a;
--ctp-subtext0: #5e4a30;
/* Gold of the One Ring */
--ctp-mauve: #d4a820;
--ctp-lavender: #f0d060;
--ctp-yellow: #f8e880;
--ctp-peach: #b88010;
/* Shire green, Rivendell silver, Elvish blue */
--ctp-green: #4a7038;
--ctp-teal: #3a6858;
--ctp-sky: #7898b8;
--ctp-blue: #486888;
--ctp-sapphire: #2a4868;
/* Mordor / danger */
--ctp-red: #8a2820;
--ctp-maroon: #5a1818;
--ctp-flamingo: #b05838;
--ctp-pink: #904868;
--ctp-rosewater: #e8c8a8;
/* ── Semantic tokens ── */
--bg-app: #f0e0b0;
--bg-sidebar: #241a0e; /* Bag End — old oak wood, hearthlit */
--bg-card: #f4e8c0;
--bg-hover: rgba(180, 130, 20, 0.12);
--bg-player: #1a1008; /* Orodruin / the forge-dark */
--bg-glass: rgba(244, 232, 192, 0.92);
--accent: #d4a820;
--accent-dim: rgba(212, 168, 32, 0.16);
--accent-glow: rgba(212, 168, 32, 0.45);
--volume-accent: #d4a820;
--text-primary: #1e1408;
--text-secondary:#3e2c1a;
--text-muted: #6a5230;
--border: rgba(180, 140, 50, 0.38);
--border-subtle: rgba(180, 140, 50, 0.18);
--positive: #4a7038;
--warning: #c88a10;
--danger: #8a2820;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
}
/* ── App shell: parchment map of Middle-Earth ── */
/* Three-layer: warm gold illumination top-right (candlelight),
ember glow bottom-left (hearth), radial vignette darkening corners */
[data-theme='middle-earth'] .app-shell {
background:
radial-gradient(ellipse at center, transparent 50%, rgba(60, 38, 18, 0.12) 100%),
radial-gradient(ellipse at 78% 18%, rgba(220, 180, 60, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 15% 88%, rgba(180, 110, 20, 0.07) 0%, transparent 45%),
linear-gradient(155deg, #f4e8c0 0%, #eed8a0 50%, #e8d098 100%);
}
/* Parchment grain overlay — the texture of the Red Book's pages */
[data-theme='middle-earth'] .app-shell::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.045;
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.75' 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;
}
/* ── Sidebar: Bag End oak paneling ── */
/* Old Shire craftsmanship — vertical wood grain, warm hearthlight from right edge */
[data-theme='middle-earth'] .sidebar {
background-color: #221608;
background-image:
repeating-linear-gradient(
90deg,
rgba(255, 220, 120, 0.04) 0px, rgba(255, 220, 120, 0.04) 1px,
transparent 1px, transparent 14px
),
linear-gradient(180deg, #261a0a 0%, #1e1408 55%, #241c0e 100%);
border-right: 2px solid rgba(200, 160, 40, 0.28);
box-shadow:
inset -3px 0 12px rgba(200, 140, 30, 0.10),
2px 0 8px rgba(0, 0, 0, 0.50);
}
/* Sidebar text: warm candlelight on dark oak */
[data-theme='middle-earth'] .nav-link { color: #c8a060; }
[data-theme='middle-earth'] .nav-link:hover {
background: rgba(212, 168, 32, 0.12);
color: #f0d880;
}
[data-theme='middle-earth'] .nav-link.active {
background: linear-gradient(90deg, rgba(212,168,32,0.22) 0%, transparent 100%);
color: #f0d060;
border-left: 2px solid #d4a820;
box-shadow: inset 4px 0 18px rgba(212,168,32,0.12);
}
[data-theme='middle-earth'] .nav-link.active::before {
background: #d4a820;
box-shadow: 0 0 10px rgba(212,168,32,0.80), 0 0 20px rgba(212,168,32,0.40);
}
[data-theme='middle-earth'] .nav-link.active svg { color: #d4a820; }
[data-theme='middle-earth'] .nav-section-label {
color: #6a5030;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.67em;
font-family: Georgia, 'Book Antiqua', serif;
}
/* ── Player bar: Sammath Naur — the fires of Orodruin ── */
/* Near-black volcanic dark, sealed with the gold of the Ring */
[data-theme='middle-earth'] .player-bar {
background: linear-gradient(180deg, #1c1208 0%, #100c04 100%);
border-top: 2px solid rgba(212, 168, 32, 0.58);
box-shadow:
inset 0 1px 0 rgba(240, 200, 60, 0.22),
0 -8px 40px rgba(180, 120, 20, 0.20),
0 -20px 70px rgba(160, 100, 15, 0.09);
}
/* Track name: THE ONE RING INSCRIPTION — breathing gold fire */
[data-theme='middle-earth'] .player-track-name {
color: #f0d060;
font-family: Georgia, 'Book Antiqua', 'Palatino Linotype', Palatino, serif;
letter-spacing: 0.06em;
font-weight: 600;
animation: ring-inscription-glow 5s ease-in-out infinite;
}
/* Artist: Elvish silver on the dark forge */
[data-theme='middle-earth'] .player-track-artist {
color: #b8985a;
font-family: Georgia, 'Book Antiqua', serif;
letter-spacing: 0.03em;
opacity: 1;
}
[data-theme='middle-earth'] .player-time { color: #7a5c30; }
/* ── Transport buttons: Mithril-crafted, hearthlit ── */
[data-theme='middle-earth'] .player-btn,
[data-theme='middle-earth'] .player-btn-primary {
background: linear-gradient(180deg, #2e2010 0%, #1e1408 100%);
color: #d4a820;
border: 1px solid rgba(212, 168, 32, 0.38);
border-radius: 50%;
box-shadow: inset 0 1px 0 rgba(240,200,60,0.10), 0 2px 6px rgba(0,0,0,0.60);
}
[data-theme='middle-earth'] .player-btn:hover,
[data-theme='middle-earth'] .player-btn-primary:hover {
background: rgba(212, 168, 32, 0.14);
border-color: #d4a820;
color: #f0d060;
box-shadow:
0 0 16px rgba(212, 168, 32, 0.48),
inset 0 0 8px rgba(200, 140, 20, 0.10);
}
/* ── Regular buttons: parchment scroll / carved Shire wood ── */
[data-theme='middle-earth'] .btn,
[data-theme='middle-earth'] .btn-surface,
[data-theme='middle-earth'] .btn-ghost {
background: linear-gradient(180deg, #f8f0d0 0%, #e8d898 50%, #dece88 100%);
color: #2a1c0e;
border: 1px solid rgba(160, 120, 40, 0.48);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.65),
inset 1px 0 0 rgba(255, 255, 255, 0.45),
0 1px 3px rgba(80, 50, 10, 0.22);
border-radius: 6px;
font-family: Georgia, 'Book Antiqua', serif;
}
[data-theme='middle-earth'] .btn:hover,
[data-theme='middle-earth'] .btn-surface:hover,
[data-theme='middle-earth'] .btn-ghost:hover {
background: linear-gradient(180deg, #fffff0 0%, #f0e8a8 50%, #e8d890 100%);
border-color: rgba(180, 140, 40, 0.70);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.80),
0 1px 4px rgba(80,50,10,0.20),
0 0 8px rgba(212,168,32,0.18);
}
/* ── Primary button: One Ring gold — the most precious craftsmanship ── */
[data-theme='middle-earth'] .btn-primary {
background: linear-gradient(180deg, #e8bc28 0%, #c8940c 50%, #aa7808 100%);
color: #1a1008;
border: 1px solid #c89818;
box-shadow:
inset 0 1px 0 rgba(255, 240, 100, 0.45),
0 0 16px rgba(212, 168, 32, 0.42),
0 2px 4px rgba(80, 50, 0, 0.30);
border-radius: 6px;
font-weight: 700;
font-family: Georgia, 'Book Antiqua', serif;
}
[data-theme='middle-earth'] .btn-primary:hover {
background: linear-gradient(180deg, #f8cc38 0%, #d8a018 50%, #bc8810 100%);
box-shadow:
inset 0 1px 0 rgba(255, 240, 100, 0.55),
0 0 24px rgba(212, 168, 32, 0.60),
0 2px 6px rgba(80, 50, 0, 0.28);
}
/* ── Hero / album-card play buttons: solid One Ring gold ── */
/* These appear on dark album-art overlays — must be fully opaque and prominent */
[data-theme='middle-earth'] .hero-play-btn,
[data-theme='middle-earth'] .album-card-details-btn {
background: linear-gradient(180deg, #e8bc28 0%, #c8940c 50%, #aa7808 100%);
color: #1a1008;
border: 1px solid #c89818;
font-family: Georgia, 'Book Antiqua', serif;
font-weight: 700;
box-shadow:
inset 0 1px 0 rgba(255, 240, 100, 0.45),
0 0 14px rgba(212, 168, 32, 0.38),
0 2px 6px rgba(0, 0, 0, 0.40);
}
[data-theme='middle-earth'] .hero-play-btn:hover,
[data-theme='middle-earth'] .album-card-details-btn:hover {
background: linear-gradient(180deg, #f8cc38 0%, #d8a018 50%, #bc8810 100%);
box-shadow:
inset 0 1px 0 rgba(255, 240, 100, 0.55),
0 0 22px rgba(212, 168, 32, 0.58),
0 2px 8px rgba(0, 0, 0, 0.35);
filter: none;
}
/* ── Queue round buttons ── */
[data-theme='middle-earth'] .queue-round-btn {
background: linear-gradient(180deg, #f0e4b0 0%, #dece88 100%);
color: #4a3828;
border: 1px solid rgba(150, 112, 38, 0.40);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(80,50,10,0.18);
}
[data-theme='middle-earth'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: linear-gradient(180deg, #fffff0 0%, #f0e4a0 100%);
border-color: rgba(180,140,40,0.60);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.70), 0 0 8px rgba(212,168,32,0.22);
color: #2a1c0e;
}
[data-theme='middle-earth'] .queue-round-btn.active {
background: linear-gradient(180deg, #e8bc28 0%, #c8940c 100%);
color: #1a1008;
border-color: #c89818;
box-shadow: 0 0 14px rgba(212,168,32,0.45), inset 0 1px 0 rgba(255,240,100,0.35);
}
/* ── Cards: leaves of the Red Book — layered parchment ── */
[data-theme='middle-earth'] .card {
background: linear-gradient(180deg, #f8f0d0 0%, #f0e4b8 100%);
border: 1px solid rgba(168, 130, 48, 0.32);
border-radius: 10px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.70),
0 2px 8px rgba(80, 50, 10, 0.16),
0 4px 16px rgba(60, 38, 10, 0.08);
}
/* ── Content header: illuminated manuscript chapter heading ── */
/* The gold ruled border at the bottom is the decorative line
that separates the chapter title from the body of the text */
[data-theme='middle-earth'] .content-header {
position: relative;
background: linear-gradient(180deg, #f8f0d0 0%, #f0e4b8 100%);
border-bottom: 2px solid rgba(200, 158, 38, 0.45);
box-shadow: 0 3px 14px rgba(120, 80, 15, 0.12);
}
/* The gold rule — fades at edges like gold leaf on vellum */
[data-theme='middle-earth'] .content-header::after {
content: '';
position: absolute;
bottom: -3px;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(
90deg, transparent 0%, rgba(212,168,32,0.65) 20%,
rgba(240,210,60,0.85) 50%, rgba(212,168,32,0.65) 80%, transparent 100%
);
pointer-events: none;
}
/* Connection indicators */
[data-theme='middle-earth'] .connection-type,
[data-theme='middle-earth'] .connection-server { color: #5a4828; }
/* ── Theme accordion: old book binding ── */
[data-theme='middle-earth'] .theme-accordion-header:hover {
background: rgba(212, 168, 32, 0.12);
color: #6a4820;
}
[data-theme='middle-earth'] .theme-accordion-open .theme-accordion-header {
background: rgba(212, 168, 32, 0.16);
color: #5a3818;
}
[data-theme='middle-earth'] .theme-accordion-open .theme-accordion-chevron { color: #c89818; }
/* ── Progress bar: THE ROAD GOES EVER ON ── */
/* From darkness into gold light — the long journey from the Shire to Mount Doom */
[data-theme='middle-earth'] .progress-bar-track {
background: #d8c880;
border: 1px solid rgba(160, 120, 38, 0.40);
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(80,50,10,0.20);
}
[data-theme='middle-earth'] .progress-bar-fill {
background: linear-gradient(90deg,
#5a3802 0%,
#9a6808 25%,
#c89018 55%,
#d4a820 75%,
#f0d060 90%,
#fff0a0 100%
);
border-radius: 4px;
box-shadow: 0 0 10px rgba(212,168,32,0.65), 0 0 3px rgba(255,230,100,0.55);
}
/* ── Scrollbar: aged oak library shelves ── */
[data-theme='middle-earth'] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme='middle-earth'] ::-webkit-scrollbar-track {
background: #dcc880;
border-radius: 4px;
}
[data-theme='middle-earth'] ::-webkit-scrollbar-thumb {
background: linear-gradient(to right, #6e4a28 0%, #9a7040 40%, #6a4420 100%);
border: 1px solid rgba(180, 130, 40, 0.45);
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,220,100,0.25);
}
[data-theme='middle-earth'] ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to right, #8a6038 0%, #b88a50 40%, #8a5a30 100%);
box-shadow: inset 0 1px 0 rgba(255,220,100,0.35), 0 0 5px rgba(212,168,32,0.28);
}
/* ── Glass / dropdowns: a scroll held to the light ── */
[data-theme='middle-earth'] .glass {
background: rgba(248, 238, 198, 0.96) !important;
backdrop-filter: none !important;
border: 1px solid rgba(180, 140, 48, 0.45) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.70),
0 4px 20px rgba(80, 50, 10, 0.20),
0 8px 30px rgba(60, 38, 10, 0.10) !important;
border-radius: 10px !important;
}
[data-theme='middle-earth'] .glass [style*="var(--bg-hover)"] {
background: rgba(212, 168, 32, 0.12) !important;
border-radius: 6px !important;
}
[data-theme='middle-earth'] .glass [style*="var(--text-primary)"] { color: #1e1408 !important; }
[data-theme='middle-earth'] .glass [style*="var(--text-secondary)"] { color: #3e2c1a !important; }
[data-theme='middle-earth'] .glass [style*="var(--text-muted)"] { color: #8a7250 !important; }
/* ── Hover / selection: candlelight — warm gold glow ── */
[data-theme='middle-earth'] .settings-tab:hover { background: rgba(212,168,32,0.12); color: #2a1c0e; }
[data-theme='middle-earth'] .settings-tab.active {
background: rgba(212,168,32,0.18);
color: #2a1c0e;
box-shadow: inset 2px 0 0 #d4a820;
}
[data-theme='middle-earth'] .custom-select-trigger:hover { background: rgba(212,168,32,0.10); }
[data-theme='middle-earth'] .custom-select-option:hover {
background: rgba(212,168,32,0.15) !important;
color: #1e1408 !important;
}
[data-theme='middle-earth'] .artist-ext-link:hover {
background: rgba(212,168,32,0.12);
color: #2a1c0e !important;
border-color: rgba(180,140,40,0.55) !important;
}
[data-theme='middle-earth'] .np-action-btn:hover { background: rgba(212,168,32,0.10); }
[data-theme='middle-earth'] .np-queue-item:hover,
[data-theme='middle-earth'] .np-queue-item.context-active {
background: rgba(212,168,32,0.13);
box-shadow: inset 2px 0 0 #d4a820;
}
[data-theme='middle-earth'] .track-row:hover,
[data-theme='middle-earth'] .track-row.context-active {
background: rgba(212,168,32,0.10) !important;
box-shadow: inset 2px 0 0 #d4a820;
}
[data-theme='middle-earth'] .artist-row:hover {
background: rgba(212,168,32,0.10);
box-shadow: inset 2px 0 0 #d4a820;
}
[data-theme='middle-earth'] .playlist-row:hover {
background: rgba(212,168,32,0.10);
box-shadow: inset 2px 0 0 #d4a820;
}
[data-theme='middle-earth'] .queue-item:hover,
[data-theme='middle-earth'] .queue-item.context-active {
background: rgba(212,168,32,0.12) !important;
box-shadow: inset 2px 0 0 #d4a820;
}
/* ── Active queue / now-playing: the bearer of the Ring ── */
[data-theme='middle-earth'] .queue-item.active {
background: rgba(212, 168, 32, 0.14);
box-shadow: inset 2px 0 0 #d4a820;
}
[data-theme='middle-earth'] .queue-item.active .queue-item-title { color: #f8e060; }
[data-theme='middle-earth'] .queue-item.active .queue-item-artist,
[data-theme='middle-earth'] .queue-item.active .queue-item-duration { color: #c8a060; }
[data-theme='middle-earth'] .np-queue-item-active {
color: #2a1c0e;
text-shadow: 0 0 6px rgba(212,168,32,0.40);
}
[data-theme='middle-earth'] .np-queue-item.active { background: rgba(212,168,32,0.10); }
[data-theme='middle-earth'] .np-album-track.active .np-album-track-title,
[data-theme='middle-earth'] .np-album-track.active .np-album-track-num {
color: #2a1c0e;
text-shadow: 0 0 6px rgba(212,168,32,0.38);
}
/* ── Queue tech bar: dark text on light parchment ── */
[data-theme='middle-earth'] .queue-current-tech {
color: #3e2808;
}
/* ── Queue + Lyrics on dark sidebar ── */
[data-theme='middle-earth'] .queue-current-info h3 { color: #f0d880; }
[data-theme='middle-earth'] .queue-current-sub { color: #d4a820; }
[data-theme='middle-earth'] .queue-item-title { color: #f0d880; }
[data-theme='middle-earth'] .queue-item-artist { color: #c8a060; }
[data-theme='middle-earth'] .queue-item-duration { color: #8a6838; }
[data-theme='middle-earth'] .queue-tab-btn { color: #c8a060; font-family: Georgia, serif; }
[data-theme='middle-earth'] .queue-tab-btn:hover { color: #f0d880; background: rgba(212,168,32,0.10); }
[data-theme='middle-earth'] .queue-tab-btn.active { color: #d4a820; }
[data-theme='middle-earth'] .lyrics-line { color: #8a6840; }
[data-theme='middle-earth'] .lyrics-line.active { color: #f0d880; text-shadow: 0 0 6px rgba(212,168,32,0.35); }
[data-theme='middle-earth'] .lyrics-plain-line { color: #c8a060; }
[data-theme='middle-earth'] .lyrics-status { color: #7a5a30; }
/* ─────────────────────────────────────────────────────────────
Morpheus — Matrix Style
───────────────────────────────────────────────────────────── */
/* ─── The Matrix — Morpheus ─── */
[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");
/* ── Palette ── */
--ctp-crust: #000000;
--ctp-mantle: #020502;
--ctp-base: #050905;
--ctp-surface0: #0a120a;
--ctp-surface1: #0f1c0f;
--ctp-surface2: #162416;
--ctp-overlay0: #003b00;
--ctp-overlay1: #008f11;
--ctp-overlay2: #00cc33;
--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: #ff0033;
/* ── Semantic tokens ── */
--bg-app: #050905;
--bg-sidebar: #000000;
--bg-card: #0a120a;
--bg-hover: rgba(0, 255, 65, 0.10);
--bg-player: #000000;
--bg-glass: rgba(0, 8, 0, 0.96);
--accent: #00ff41;
--accent-dim: rgba(0, 255, 65, 0.12);
--accent-glow: rgba(0, 255, 65, 0.45);
--volume-accent: #00ff41;
--text-primary: #00ff41;
--text-secondary:#00cc33;
--text-muted: #22cc44;
--border: #003b00;
--border-subtle: #001a00;
--positive: #00ff41;
--warning: #adff2f;
--danger: #ff0033;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 2px;
}
/* ── App shell: solid dark base (scanlines moved to sidebar for perf) ── */
[data-theme='morpheus'] .app-shell {
background-color: #050905;
}
/* ── Sidebar: black with code-column ghost pattern ── */
[data-theme='morpheus'] .sidebar {
background-color: #000000;
background-image: repeating-linear-gradient(
90deg, transparent 0px, transparent 19px,
rgba(0, 255, 65, 0.03) 19px, rgba(0, 255, 65, 0.03) 20px
);
border-right: 1px solid #003b00;
}
/* Nav links */
[data-theme='morpheus'] .nav-link { color: #00cc33; }
[data-theme='morpheus'] .nav-link:hover {
background: rgba(0, 255, 65, 0.08);
color: #00ff41;
text-shadow: 0 0 8px rgba(0, 255, 65, 0.50);
}
[data-theme='morpheus'] .nav-link.active {
background: rgba(0, 255, 65, 0.10);
color: #00ff41;
text-shadow: 0 0 6px rgba(0, 255, 65, 0.45);
}
[data-theme='morpheus'] .nav-link.active::before {
background: #00ff41;
box-shadow: 0 0 8px rgba(0, 255, 65, 0.70);
}
[data-theme='morpheus'] .nav-section-label { color: #003b00; }
/* ── Player bar: black glass with phosphor glow ── */
[data-theme='morpheus'] .player-bar {
background: #000000;
border-top: 1px solid rgba(0, 255, 65, 0.35);
box-shadow:
inset 0 1px 0 rgba(0, 255, 65, 0.12),
0 -4px 24px rgba(0, 255, 65, 0.06);
}
/* Track info: phosphor CRT glow */
[data-theme='morpheus'] .player-track-name {
font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
color: #00ff41;
text-shadow: 0 0 10px rgba(0, 255, 65, 0.70), 0 0 20px rgba(0, 255, 65, 0.30);
letter-spacing: 0.04em;
}
[data-theme='morpheus'] .player-track-artist,
[data-theme='morpheus'] .player-time {
font-family: 'JetBrains Mono', 'Courier New', monospace;
color: #00cc33;
opacity: 0.85;
}
/* ── Transport buttons: terminal command style ── */
[data-theme='morpheus'] .player-btn,
[data-theme='morpheus'] .player-btn-primary {
background: #000000;
color: #00ff41;
border: 1px solid #003b00;
border-radius: 2px;
box-shadow: inset 0 0 6px rgba(0, 255, 65, 0.05);
}
[data-theme='morpheus'] .player-btn:hover,
[data-theme='morpheus'] .player-btn-primary:hover {
background: rgba(0, 255, 65, 0.08);
border-color: #00ff41;
box-shadow:
0 0 12px rgba(0, 255, 65, 0.35),
inset 0 0 8px rgba(0, 255, 65, 0.08);
color: #00ff41;
}
/* ── All buttons: terminal style ── */
[data-theme='morpheus'] .btn,
[data-theme='morpheus'] .btn-surface,
[data-theme='morpheus'] .btn-ghost,
[data-theme='morpheus'] .btn-primary,
[data-theme='morpheus'] .hero-play-btn,
[data-theme='morpheus'] .album-card-details-btn,
[data-theme='morpheus'] .queue-round-btn {
background: #000000;
color: #00ff41;
border: 1px solid #003b00;
border-radius: 0;
font-family: 'JetBrains Mono', 'Courier New', monospace;
box-shadow: none;
}
[data-theme='morpheus'] .btn:hover,
[data-theme='morpheus'] .btn-surface:hover,
[data-theme='morpheus'] .btn-ghost:hover,
[data-theme='morpheus'] .btn-primary:hover,
[data-theme='morpheus'] .hero-play-btn:hover,
[data-theme='morpheus'] .album-card-details-btn:hover {
background: rgba(0, 255, 65, 0.08);
border-color: #00ff41;
color: #00ff41;
box-shadow: 0 0 10px rgba(0, 255, 65, 0.28), inset 0 0 8px rgba(0, 255, 65, 0.05);
}
[data-theme='morpheus'] .btn-primary {
border-color: #00cc33;
box-shadow: 0 0 8px rgba(0, 255, 65, 0.20);
}
[data-theme='morpheus'] .btn-primary:hover {
border-color: #00ff41;
box-shadow: 0 0 16px rgba(0, 255, 65, 0.45), inset 0 0 10px rgba(0, 255, 65, 0.08);
}
/* Queue round button active: bright green */
[data-theme='morpheus'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: rgba(0, 255, 65, 0.08);
border-color: #00ff41;
color: #00ff41;
box-shadow: 0 0 10px rgba(0, 255, 65, 0.28);
}
[data-theme='morpheus'] .queue-round-btn.active {
background: rgba(0, 255, 65, 0.15);
border-color: #00ff41;
color: #00ff41;
box-shadow: 0 0 12px rgba(0, 255, 65, 0.40), inset 0 0 8px rgba(0, 255, 65, 0.08);
}
/* ── Cards: dark terminal panels ── */
[data-theme='morpheus'] .card {
background: #0a120a;
border: 1px solid #003b00;
border-radius: 0;
box-shadow: inset 0 0 24px rgba(0, 255, 65, 0.02), 0 0 12px rgba(0, 0, 0, 0.60);
}
/* ── Content header: terminal prompt bar ── */
[data-theme='morpheus'] .content-header {
background: #000000;
border-bottom: 1px solid rgba(0, 255, 65, 0.25);
box-shadow: 0 2px 16px rgba(0, 255, 65, 0.04);
}
/* ── Theme accordion: terminal hover ── */
[data-theme='morpheus'] .theme-accordion-header:hover {
background: rgba(0, 255, 65, 0.08);
color: #00ff41;
text-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}
[data-theme='morpheus'] .theme-accordion-open .theme-accordion-header {
background: rgba(0, 255, 65, 0.10);
color: #00ff41;
}
[data-theme='morpheus'] .theme-accordion-open .theme-accordion-chevron { color: #00ff41; }
/* ── Progress bar: terminal loading bar ── */
[data-theme='morpheus'] .progress-bar-track {
background: #001a00;
border: 1px solid #003b00;
border-radius: 0;
}
[data-theme='morpheus'] .progress-bar-fill {
background: #00ff41;
border-radius: 0;
box-shadow: 0 0 8px rgba(0, 255, 65, 0.60), 0 0 2px rgba(0, 255, 65, 1);
}
/* ── Scrollbar: CRT terminal style ── */
[data-theme='morpheus'] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme='morpheus'] ::-webkit-scrollbar-track { background: #000000; }
[data-theme='morpheus'] ::-webkit-scrollbar-thumb {
background: #003b00;
border: 1px solid rgba(0, 255, 65, 0.30);
}
[data-theme='morpheus'] ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 255, 65, 0.25);
box-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}
/* ── Glass / dropdowns: black terminal window ── */
[data-theme='morpheus'] .glass {
background: rgba(0, 8, 0, 0.97) !important;
backdrop-filter: none !important;
border: 1px solid rgba(0, 255, 65, 0.28) !important;
box-shadow:
0 0 20px rgba(0, 255, 65, 0.08),
inset 0 0 16px rgba(0, 255, 65, 0.02) !important;
border-radius: 0 !important;
}
[data-theme='morpheus'] .glass [style*="var(--bg-hover)"] {
background: rgba(0, 255, 65, 0.10) !important;
border-radius: 0 !important;
}
[data-theme='morpheus'] .glass [style*="var(--text-primary)"] { color: #00ff41 !important; }
[data-theme='morpheus'] .glass [style*="var(--text-secondary)"] { color: #00cc33 !important; }
[data-theme='morpheus'] .glass [style*="var(--text-muted)"] { color: #006b10 !important; }
/* ── Hover / selection: phosphor glow highlight ── */
[data-theme='morpheus'] .queue-tab-btn:hover {
background: rgba(0, 255, 65, 0.08);
color: #00ff41;
text-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}
[data-theme='morpheus'] .settings-tab:hover { background: rgba(0, 255, 65, 0.08); color: #00ff41; }
[data-theme='morpheus'] .settings-tab.active {
background: rgba(0, 255, 65, 0.12);
color: #00ff41;
box-shadow: inset 2px 0 0 #00ff41;
}
[data-theme='morpheus'] .custom-select-trigger:hover { background: rgba(0, 255, 65, 0.08); }
[data-theme='morpheus'] .custom-select-option:hover {
background: rgba(0, 255, 65, 0.12) !important;
color: #00ff41 !important;
text-shadow: 0 0 6px rgba(0, 255, 65, 0.40) !important;
}
[data-theme='morpheus'] .artist-ext-link:hover {
background: rgba(0, 255, 65, 0.10);
color: #00ff41 !important;
border-color: #00ff41 !important;
text-shadow: 0 0 6px rgba(0, 255, 65, 0.40);
}
[data-theme='morpheus'] .np-action-btn:hover { background: rgba(0, 255, 65, 0.08); }
[data-theme='morpheus'] .np-queue-item:hover,
[data-theme='morpheus'] .np-queue-item.context-active {
background: rgba(0, 255, 65, 0.10);
box-shadow: inset 2px 0 0 #00ff41;
}
[data-theme='morpheus'] .track-row:hover,
[data-theme='morpheus'] .track-row.context-active {
background: rgba(0, 255, 65, 0.08) !important;
box-shadow: inset 2px 0 0 #00ff41;
}
[data-theme='morpheus'] .artist-row:hover {
background: rgba(0, 255, 65, 0.08);
box-shadow: inset 2px 0 0 #00ff41;
}
[data-theme='morpheus'] .playlist-row:hover {
background: rgba(0, 255, 65, 0.08);
box-shadow: inset 2px 0 0 #00ff41;
}
[data-theme='morpheus'] .queue-item:hover,
[data-theme='morpheus'] .queue-item.context-active {
background: rgba(0, 255, 65, 0.10) !important;
box-shadow: inset 2px 0 0 #00ff41;
}
/* ── Active queue item: glowing green ── */
[data-theme='morpheus'] .queue-item.active {
background: rgba(0, 255, 65, 0.08);
box-shadow: inset 2px 0 0 #00ff41, 0 0 8px rgba(0, 255, 65, 0.06);
}
[data-theme='morpheus'] .np-queue-item-active { text-shadow: 0 0 8px rgba(0, 255, 65, 0.60); }
[data-theme='morpheus'] .np-queue-item.active { background: rgba(0, 255, 65, 0.08); }
[data-theme='morpheus'] .np-album-track.active .np-album-track-title,
[data-theme='morpheus'] .np-album-track.active .np-album-track-num {
text-shadow: 0 0 8px rgba(0, 255, 65, 0.60);
}
/* ─────────────────────────────────────────────────────────────
Pandora — Bioluminescent Sci-Fi
───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
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: #888888;
--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;
}
/* ── T-800 — Terminator 2: Judgment Day ─────────────────────── */
/* Endoskeleton HUD red + machine data green + industrial dark */
[data-theme='t-800'] {
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%23ff2000%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");
/* Industrial dark — machine oil, scorched steel, warm black */
--ctp-crust: #080606;
--ctp-mantle: #0e0a0a;
--ctp-base: #140e0e;
--ctp-surface0: #1e1414;
--ctp-surface1: #281c1c;
--ctp-surface2: #342424;
--ctp-overlay0: #584040;
--ctp-overlay1: #806060;
--ctp-overlay2: #a88888;
--ctp-text: #e8d8c8; /* CRT terminal warm white */
--ctp-subtext1: #c8b8a0;
--ctp-subtext0: #a08888;
/* T2 palette */
--ctp-red: #ff2000; /* T-800 eye / HUD targeting red */
--ctp-maroon: #cc1800;
--ctp-flamingo: #ff4020;
--ctp-mauve: #ff2000;
--ctp-lavender: #ff5040;
--ctp-pink: #ff4020;
--ctp-rosewater:#ff8060;
--ctp-green: #00e040; /* machine data readout green */
--ctp-teal: #00b830;
--ctp-sky: #40ff80;
--ctp-yellow: #f0a000; /* Judgment Day fire / nuclear orange */
--ctp-peach: #ff6000; /* napalm / explosion */
--ctp-blue: #2040c0; /* future war laser / Skynet */
--ctp-sapphire: #1830a0;
--bg-app: #140e0e; /* scorched industrial dark */
--bg-sidebar: #0e0a0a; /* machine interior */
--bg-card: #1e1414;
--bg-hover: rgba(255, 32, 0, 0.08);
--bg-player: #080606; /* endoskeleton chassis */
--bg-glass: rgba(14, 10, 10, 0.96);
--accent: #ff2000; /* T-800 eye red */
--accent-dim: rgba(255, 32, 0, 0.12);
--accent-glow: rgba(255, 32, 0, 0.5);
--volume-accent:#00e040; /* data-green for volume */
--text-primary: #e8d8c8; /* warm terminal white */
--text-secondary:#00e040; /* machine data green */
--text-muted: #584040;
--border: #2a1a1a;
--border-subtle: #1e1414;
--shadow-dropdown: rgba(0, 0, 0, 0.9);
--positive: #00e040;
--warning: #f0a000;
--danger: #ff2000;
--radius-sm: 0px;
--radius-md: 1px;
--radius-lg: 2px;
--radius-xl: 2px;
}
/* Sidebar = endoskeleton interior: scan-line texture + red glow */
[data-theme='t-800'] .sidebar {
border-right: 2px solid #ff2000;
box-shadow: 2px 0 16px rgba(255, 32, 0, 0.1);
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 3px,
rgba(255, 32, 0, 0.025) 3px,
rgba(255, 32, 0, 0.025) 4px
);
}
/* Player bar = HUD targeting display */
[data-theme='t-800'] .player-bar {
border-top: 2px solid #ff2000;
box-shadow:
0 -1px 0 rgba(0, 224, 64, 0.2),
0 -8px 28px rgba(255, 32, 0, 0.1);
}
/* Track name = TARGET ACQUIRED — red HUD uppercase */
[data-theme='t-800'] .player-track-name {
color: #ff2000;
text-shadow: 0 0 10px rgba(255, 32, 0, 0.75), 0 0 28px rgba(255, 32, 0, 0.3);
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.08em;
}
/* Artist = machine data readout green */
[data-theme='t-800'] .player-track-artist { color: #00e040; }
/* Queue album = Judgment Day orange */
[data-theme='t-800'] .queue-meta-album { color: #f0a000; }
/* Active nav: red HUD left bar */
[data-theme='t-800'] .nav-link.active {
background: linear-gradient(90deg, rgba(255,32,0,0.15) 0%, transparent 100%);
color: #ff2000;
}
[data-theme='t-800'] .nav-link.active::before {
width: 3px;
box-shadow: 2px 0 12px rgba(255,32,0,0.65);
}
/* Buttons: dark steel with red */
[data-theme='t-800'] .btn-primary {
background: #ff2000;
color: #080606;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
border: none;
border-radius: 1px;
}
[data-theme='t-800'] .btn-primary:hover {
background: #ff4020;
box-shadow: 0 0 18px rgba(255,32,0,0.5);
}
/* Play button = T-800 eye glow */
[data-theme='t-800'] .player-btn-primary {
background: #ff2000;
box-shadow: 0 0 16px rgba(255,32,0,0.5);
color: #080606;
}
[data-theme='t-800'] .player-btn-primary:hover {
box-shadow: 0 0 26px rgba(255,32,0,0.7);
}
/* Queue active = targeting lock — red left bar */
[data-theme='t-800'] .queue-item.active {
background: rgba(255, 32, 0, 0.08);
box-shadow: inset 3px 0 0 #ff2000;
}
[data-theme='t-800'] .np-queue-item.active { background: rgba(255,32,0,0.07); }
[data-theme='t-800'] .np-queue-item-active {
color: #ff2000;
text-shadow: 0 0 8px rgba(255,32,0,0.6);
}
/* Now-playing active track = data green */
[data-theme='t-800'] .np-album-track.active .np-album-track-title,
[data-theme='t-800'] .np-album-track.active .np-album-track-num {
color: #00e040;
text-shadow: 0 0 8px rgba(0,224,64,0.5);
}
/* Hover rows */
[data-theme='t-800'] .track-row:hover,
[data-theme='t-800'] .track-row.context-active {
background: rgba(255,32,0,0.07) !important;
box-shadow: inset 3px 0 0 #ff2000;
}
[data-theme='t-800'] .queue-item:hover,
[data-theme='t-800'] .queue-item.context-active {
background: rgba(255,32,0,0.07) !important;
box-shadow: inset 3px 0 0 #ff2000;
}
[data-theme='t-800'] .np-queue-item:hover,
[data-theme='t-800'] .np-queue-item.context-active {
background: rgba(255,32,0,0.07);
box-shadow: inset 2px 0 0 #ff2000;
}
[data-theme='t-800'] .artist-row:hover { background: rgba(255,32,0,0.06); box-shadow: inset 3px 0 0 #ff2000; }
[data-theme='t-800'] .playlist-row:hover { background: rgba(255,32,0,0.06); box-shadow: inset 3px 0 0 #ff2000; }
/* Settings tabs: data-green active = SYSTEM ONLINE */
[data-theme='t-800'] .settings-tab:hover { background: rgba(255,32,0,0.07); color: #ff2000; }
[data-theme='t-800'] .settings-tab.active {
background: rgba(0, 224, 64, 0.07);
color: #00e040;
box-shadow: inset 3px 0 0 #00e040;
}
/* Queue tabs */
[data-theme='t-800'] .queue-tab-btn:hover { background: rgba(255,32,0,0.07); color: #ff2000; }
/* Dropdowns */
[data-theme='t-800'] .custom-select-trigger:hover { background: rgba(255,32,0,0.07); }
[data-theme='t-800'] .custom-select-option:hover {
background: rgba(255, 32, 0, 0.1) !important;
color: #ff2000 !important;
}
/* Artist pills = Skynet blue */
[data-theme='t-800'] .artist-ext-link:hover {
background: rgba(32, 64, 192, 0.15);
color: #4060e0 !important;
border-color: rgba(32, 64, 192, 0.4) !important;
}
/* Connection indicators */
[data-theme='t-800'] .connection-type,
[data-theme='t-800'] .connection-server { color: #00e040; }
/* ─── Dune — Arrakis ─── */
[data-theme='dune'] {
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%23c8780a%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 — two-temperature Arrakis ── */
/* Warm: spice / sand / desert sun */
--ctp-crust: #0a0804;
--ctp-mantle: #120e06;
--ctp-base: #1c1408;
--ctp-surface0: #2e1e0a;
--ctp-surface1: #3e2a0e;
--ctp-surface2: #503614;
/* Cool: sietch / rock shadow / Fremen darkness */
--ctp-overlay0: #2a2440;
--ctp-overlay1: #4a4268;
--ctp-overlay2: #6a6090;
/* Text: aged parchment, scrolls of the Bene Gesserit */
--ctp-text: #f0deb0;
--ctp-subtext1: #d8c090;
--ctp-subtext0: #b09060;
/* Accent palette */
--ctp-mauve: #c8780a; /* spice melange — cinnamon rust */
--ctp-lavender: #e8a020; /* spice shimmer — bright amber */
--ctp-yellow: #f5cc50; /* spice flare */
--ctp-peach: #aa5a08; /* deep spice shadow */
--ctp-green: #7a8c40; /* Caladan seagrass (far memory) */
--ctp-teal: #1a80c0; /* Fremen eye blue — spice prescience */
--ctp-sky: #2090d0; /* Guild Navigator blue */
--ctp-blue: #1468a8; /* sietch pool depth */
--ctp-sapphire: #0e4a80; /* deep cave water */
--ctp-pink: #c84060;
--ctp-flamingo: #e06080;
--ctp-rosewater: #f0c0a0;
--ctp-red: #cc2800;
--ctp-maroon: #8c1c00;
/* ── Semantic tokens ── */
--bg-app: #1c1408;
--bg-sidebar: #0e0c1a; /* sietch interior — cool rock */
--bg-card: #2e1e0a;
--bg-hover: rgba(200, 120, 10, 0.14);
--bg-player: #0e0a04;
--bg-glass: rgba(10, 8, 4, 0.96);
--accent: #c8780a;
--accent-dim: rgba(200, 120, 10, 0.12);
--accent-glow: rgba(200, 120, 10, 0.40);
--volume-accent: #c8780a;
--text-primary: #f0deb0;
--text-secondary:#d8c090;
--text-muted: #a89870;
--border: rgba(200, 120, 10, 0.22);
--border-subtle: rgba(200, 120, 10, 0.10);
--positive: #7a8c40;
--warning: #f5cc50;
--danger: #cc2800;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
/* ── App shell: Arrakis desert horizon at dusk ── */
/* Sky (cool/dark at top) fading into burning sand (warm at bottom) */
[data-theme='dune'] .app-shell {
background: linear-gradient(180deg,
#12101c 0%,
#1a1408 30%,
#201608 60%,
#281e0a 100%
);
}
/* ── Sidebar: sietch interior — cold carved rock ── */
/* The Fremen lived in caves cut from rock — cool, dark, shadows of blue and purple */
[data-theme='dune'] .sidebar {
background: linear-gradient(180deg, #141228 0%, #0e0c1c 40%, #0c0a16 100%);
border-right: 1px solid rgba(200, 120, 10, 0.22);
box-shadow:
inset -3px 0 10px rgba(200, 100, 8, 0.07),
2px 0 8px rgba(0, 0, 0, 0.50);
}
/* Nav text: parchment on cool rock */
[data-theme='dune'] .nav-link { color: #b09060; }
[data-theme='dune'] .nav-link:hover {
background: rgba(200, 120, 10, 0.10);
color: #d8c090;
}
[data-theme='dune'] .nav-link.active {
background: linear-gradient(90deg, rgba(200,120,10,0.20) 0%, transparent 100%);
color: #e8a020;
border-left: 2px solid #c8780a;
box-shadow: inset 4px 0 14px rgba(200,120,10,0.10);
}
[data-theme='dune'] .nav-link.active::before {
background: #c8780a;
box-shadow: 0 0 10px rgba(200,120,10,0.70);
}
[data-theme='dune'] .nav-link.active svg { color: #c8780a; }
[data-theme='dune'] .nav-section-label {
color: #4a4268;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.70em;
}
/* ── Player bar: spice harvester console — deep amber warmth ── */
[data-theme='dune'] .player-bar {
background: linear-gradient(180deg, #140e04 0%, #0a0802 100%);
border-top: 2px solid rgba(200, 120, 10, 0.50);
box-shadow:
inset 0 1px 0 rgba(240, 180, 40, 0.16),
0 -8px 40px rgba(180, 100, 8, 0.16),
0 -2px 80px rgba(20, 100, 160, 0.04);
}
/* Track name: the spice calls — amber prophetic glow */
[data-theme='dune'] .player-track-name {
color: #e8a020;
text-shadow:
0 0 8px rgba(232, 160, 32, 0.75),
0 0 20px rgba(200, 120, 10, 0.40),
0 0 40px rgba(200, 120, 10, 0.15);
letter-spacing: 0.04em;
}
/* Artist: deeper spice cinnamon */
[data-theme='dune'] .player-track-artist {
color: #aa7030;
opacity: 1;
text-shadow: 0 0 8px rgba(170, 112, 48, 0.45);
}
[data-theme='dune'] .player-time { color: #7a5020; }
/* ── Transport buttons: Fremen tech — minimal, earth-worn ── */
[data-theme='dune'] .player-btn,
[data-theme='dune'] .player-btn-primary {
background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%);
color: #c8780a;
border: 1px solid rgba(200, 120, 10, 0.38);
border-radius: 50%;
box-shadow: inset 0 1px 0 rgba(240,180,40,0.08), 0 2px 6px rgba(0,0,0,0.50);
}
[data-theme='dune'] .player-btn:hover,
[data-theme='dune'] .player-btn-primary:hover {
background: rgba(200, 120, 10, 0.14);
border-color: #c8780a;
color: #e8a020;
box-shadow:
0 0 14px rgba(200, 120, 10, 0.42),
inset 0 0 8px rgba(200, 100, 8, 0.08);
}
/* ── Regular buttons: desert stone / carved bone ── */
[data-theme='dune'] .btn,
[data-theme='dune'] .btn-surface,
[data-theme='dune'] .btn-ghost {
background: linear-gradient(180deg, #2e1e0a 0%, #221608 100%);
color: #d8c090;
border: 1px solid rgba(200, 120, 10, 0.30);
box-shadow: inset 0 1px 0 rgba(240,200,80,0.06), 0 1px 4px rgba(0,0,0,0.40);
border-radius: 3px;
}
[data-theme='dune'] .btn:hover,
[data-theme='dune'] .btn-surface:hover,
[data-theme='dune'] .btn-ghost:hover {
background: rgba(200, 120, 10, 0.12);
border-color: rgba(200, 120, 10, 0.65);
color: #f0deb0;
box-shadow: 0 0 10px rgba(200, 120, 10, 0.24), inset 0 0 6px rgba(200,100,8,0.05);
}
/* ── Primary button: spice melange — the most precious thing ── */
[data-theme='dune'] .btn-primary {
background: linear-gradient(180deg, #b86808 0%, #884e04 100%);
color: #ffe8a0;
border: 1px solid #d08010;
box-shadow: 0 0 14px rgba(200, 120, 10, 0.35), inset 0 1px 0 rgba(255,220,80,0.20);
border-radius: 3px;
font-weight: 600;
}
[data-theme='dune'] .btn-primary:hover {
background: linear-gradient(180deg, #d07a10 0%, #a05e06 100%);
box-shadow: 0 0 22px rgba(200, 120, 10, 0.55), inset 0 1px 0 rgba(255,220,80,0.25);
}
/* ── Hero / album buttons ── */
[data-theme='dune'] .hero-play-btn,
[data-theme='dune'] .album-card-details-btn {
background: rgba(200, 120, 10, 0.12);
color: #c8780a;
border: 1px solid rgba(200, 120, 10, 0.36);
box-shadow: inset 0 1px 0 rgba(240,180,40,0.06);
}
[data-theme='dune'] .hero-play-btn:hover,
[data-theme='dune'] .album-card-details-btn:hover {
background: rgba(200, 120, 10, 0.20);
border-color: #c8780a;
box-shadow: 0 0 12px rgba(200, 120, 10, 0.38);
}
/* ── Queue round buttons ── */
[data-theme='dune'] .queue-round-btn {
background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%);
color: #8a6030;
border: 1px solid rgba(200, 120, 10, 0.24);
}
[data-theme='dune'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: rgba(200, 120, 10, 0.10);
border-color: rgba(200, 120, 10, 0.55);
color: #c8780a;
box-shadow: 0 0 10px rgba(200, 120, 10, 0.22);
}
[data-theme='dune'] .queue-round-btn.active {
background: rgba(200, 120, 10, 0.20);
border-color: #c8780a;
color: #e8a020;
box-shadow: 0 0 12px rgba(200, 120, 10, 0.42), inset 0 0 6px rgba(200,100,8,0.08);
}
/* ── Cards: ancient stone / sand-worn rock ── */
[data-theme='dune'] .card {
background: linear-gradient(180deg, #2e1e0a 0%, #281808 100%);
border: 1px solid rgba(200, 120, 10, 0.16);
border-radius: 4px;
box-shadow:
inset 0 1px 0 rgba(240,200,80,0.04),
inset 0 0 24px rgba(200,100,8,0.03),
0 2px 10px rgba(0,0,0,0.50);
}
/* ── Content header: sietch entrance — cool rock above warm desert ── */
/* The contrast between the cold header and warm body is intentional — Arrakis duality */
[data-theme='dune'] .content-header {
background: linear-gradient(180deg, #151228 0%, #12101e 100%);
border-bottom: 1px solid rgba(200, 120, 10, 0.24);
box-shadow: 0 3px 16px rgba(200, 100, 8, 0.06);
}
/* Text on cool header: light but warm */
[data-theme='dune'] .content-header .page-title,
[data-theme='dune'] .content-header h1,
[data-theme='dune'] .content-header h2 { color: #d8c090; }
/* ── Connection indicators: parchment legible ── */
[data-theme='dune'] .connection-type,
[data-theme='dune'] .connection-server { color: #b09060; }
/* ── Theme accordion ── */
[data-theme='dune'] .theme-accordion-header:hover {
background: rgba(200, 120, 10, 0.10);
color: #e8a020;
}
[data-theme='dune'] .theme-accordion-open .theme-accordion-header {
background: rgba(200, 120, 10, 0.14);
color: #e8a020;
}
[data-theme='dune'] .theme-accordion-open .theme-accordion-chevron { color: #c8780a; }
/* ── Progress bar: spice flowing — from deep rust to bright amber ── */
[data-theme='dune'] .progress-bar-track {
background: #1a1006;
border: 1px solid rgba(200, 120, 10, 0.22);
border-radius: 2px;
}
[data-theme='dune'] .progress-bar-fill {
background: linear-gradient(90deg,
#6a3604 0%,
#a85a08 30%,
#c8780a 65%,
#e8a020 85%,
#f5cc50 100%
);
border-radius: 2px;
box-shadow: 0 0 10px rgba(200, 120, 10, 0.55), 0 0 3px rgba(240,200,60,0.40);
}
/* ── Scrollbar: sand grain — thin, warm, minimal ── */
[data-theme='dune'] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme='dune'] ::-webkit-scrollbar-track { background: #0a0804; }
[data-theme='dune'] ::-webkit-scrollbar-thumb {
background: rgba(200, 120, 10, 0.30);
border-radius: 2px;
border: 1px solid rgba(200, 120, 10, 0.16);
}
[data-theme='dune'] ::-webkit-scrollbar-thumb:hover {
background: rgba(200, 120, 10, 0.55);
box-shadow: 0 0 5px rgba(200, 120, 10, 0.40);
}
/* ── Glass / dropdowns: deep sand shelter ── */
[data-theme='dune'] .glass {
background: rgba(10, 8, 4, 0.97) !important;
backdrop-filter: none !important;
border: 1px solid rgba(200, 120, 10, 0.30) !important;
box-shadow:
0 0 20px rgba(180, 100, 8, 0.10),
inset 0 0 16px rgba(200, 100, 8, 0.02) !important;
border-radius: 4px !important;
}
[data-theme='dune'] .glass [style*="var(--bg-hover)"] {
background: rgba(200, 120, 10, 0.12) !important;
border-radius: 2px !important;
}
[data-theme='dune'] .glass [style*="var(--text-primary)"] { color: #f0deb0 !important; }
[data-theme='dune'] .glass [style*="var(--text-secondary)"] { color: #d8c090 !important; }
[data-theme='dune'] .glass [style*="var(--text-muted)"] { color: #6a5830 !important; }
/* ── Hover / selection: spice glow — warm amber indicator bar ── */
[data-theme='dune'] .queue-tab-btn:hover { background: rgba(200,120,10,0.10); color: #c8780a; }
[data-theme='dune'] .settings-tab:hover { background: rgba(200,120,10,0.10); color: #c8780a; }
[data-theme='dune'] .settings-tab.active {
background: rgba(200,120,10,0.16);
color: #e8a020;
box-shadow: inset 2px 0 0 #c8780a;
}
[data-theme='dune'] .custom-select-trigger:hover { background: rgba(200,120,10,0.10); }
[data-theme='dune'] .custom-select-option:hover {
background: rgba(200,120,10,0.14) !important;
color: #e8a020 !important;
}
[data-theme='dune'] .artist-ext-link:hover {
background: rgba(200,120,10,0.10);
color: #c8780a !important;
border-color: rgba(200,120,10,0.45) !important;
}
[data-theme='dune'] .np-action-btn:hover { background: rgba(200,120,10,0.10); }
[data-theme='dune'] .np-queue-item:hover,
[data-theme='dune'] .np-queue-item.context-active {
background: rgba(200,120,10,0.12);
box-shadow: inset 2px 0 0 #c8780a;
}
[data-theme='dune'] .track-row:hover,
[data-theme='dune'] .track-row.context-active {
background: rgba(200,120,10,0.09) !important;
box-shadow: inset 2px 0 0 #c8780a;
}
[data-theme='dune'] .artist-row:hover {
background: rgba(200,120,10,0.09);
box-shadow: inset 2px 0 0 #c8780a;
}
[data-theme='dune'] .playlist-row:hover {
background: rgba(200,120,10,0.09);
box-shadow: inset 2px 0 0 #c8780a;
}
[data-theme='dune'] .queue-item:hover,
[data-theme='dune'] .queue-item.context-active {
background: rgba(200,120,10,0.10) !important;
box-shadow: inset 2px 0 0 #c8780a;
}
[data-theme='dune'] .queue-item:hover .queue-item-title,
[data-theme='dune'] .queue-item:hover .queue-item-artist,
[data-theme='dune'] .queue-item:hover .queue-item-duration,
[data-theme='dune'] .queue-item.context-active .queue-item-title,
[data-theme='dune'] .queue-item.context-active .queue-item-artist,
[data-theme='dune'] .queue-item.context-active .queue-item-duration { color: #c8780a; }
/* ── Active queue / now-playing: the worm has come ── */
[data-theme='dune'] .queue-item.active {
background: rgba(200, 120, 10, 0.08);
box-shadow: inset 2px 0 0 #c8780a;
}
[data-theme='dune'] .np-queue-item-active { color: #c8780a; text-shadow: 0 0 8px rgba(200,120,10,0.55); }
[data-theme='dune'] .np-queue-item.active { background: rgba(200,120,10,0.08); }
[data-theme='dune'] .np-album-track.active .np-album-track-title,
[data-theme='dune'] .np-album-track.active .np-album-track-num {
color: #c8780a;
text-shadow: 0 0 8px rgba(200,120,10,0.50);
}
/* ── TetraStack (Games) — 7-tetromino NES Tetris ─────────────── */
/* I=cyan O=yellow T=purple S=green Z=red J=blue L=orange */
[data-theme='tetrastack'] {
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%2300f0f0%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");
/* Dark navy — NES Tetris backdrop, not pure black */
--ctp-crust: #000008;
--ctp-mantle: #00000e;
--ctp-base: #060614;
--ctp-surface0: #0d0d22;
--ctp-surface1: #141432;
--ctp-surface2: #1e1e48;
--ctp-overlay0: #3a3a6a;
--ctp-overlay1: #6060a8;
--ctp-overlay2: #9090cc;
--ctp-text: #ffffff;
--ctp-subtext1: #d0d0ff;
--ctp-subtext0: #9090cc;
/* 7 Tetromino colours mapped to palette slots */
--ctp-sky: #00f0f0; /* I-piece — cyan */
--ctp-teal: #00f0f0;
--ctp-yellow: #f0d000; /* O-piece — yellow */
--ctp-mauve: #a020f0; /* T-piece — purple */
--ctp-lavender: #a020f0;
--ctp-pink: #a020f0;
--ctp-green: #00d000; /* S-piece — green */
--ctp-red: #f02000; /* Z-piece — red */
--ctp-flamingo: #f02000;
--ctp-maroon: #f02000;
--ctp-blue: #0060f0; /* J-piece — blue */
--ctp-sapphire: #0060f0;
--ctp-peach: #f07800; /* L-piece — orange */
--ctp-rosewater:#f07800;
--bg-app: #060614;
--bg-sidebar: #00000e;
--bg-card: #0d0d22;
--bg-hover: rgba(0, 240, 240, 0.07);
--bg-player: #000008;
--bg-glass: rgba(6, 6, 20, 0.96);
--accent: #00f0f0; /* I-piece cyan */
--accent-dim: rgba(0, 240, 240, 0.12);
--accent-glow: rgba(0, 240, 240, 0.5);
--volume-accent:#f0d000; /* O-piece yellow — classic score-panel feel */
--text-primary: #ffffff;
--text-secondary:#f0d000; /* O-piece yellow — like the score readout */
--text-muted: #3a3a6a;
--border: #1e1e48;
--border-subtle: #0d0d22;
/* All corners square — every element is a block */
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
}
/* 30 px grid — Tetris block scale */
[data-theme='tetrastack'] .app-shell {
background-image:
linear-gradient(rgba(0, 240, 240, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 240, 240, 0.04) 1px, transparent 1px);
background-size: 30px 30px;
}
/* Sidebar = the score/next-piece panel */
[data-theme='tetrastack'] .sidebar {
border-right: 3px solid #00f0f0;
}
/* Player bar = bottom of the well */
[data-theme='tetrastack'] .player-bar {
border-top: 3px solid #00f0f0;
box-shadow:
0 -2px 0 #a020f0,
0 -8px 24px rgba(0, 240, 240, 0.12);
}
/* NES block shading on cards — lighter top-left, darker bottom-right */
[data-theme='tetrastack'] .card,
[data-theme='tetrastack'] .glass,
[data-theme='tetrastack'] .settings-card {
border: 1px solid #1e1e48 !important;
border-radius: 0 !important;
box-shadow:
inset -3px -3px 0 rgba(0, 0, 0, 0.55),
inset 3px 3px 0 rgba(255, 255, 255, 0.05) !important;
}
/* Buttons: block-shaped, NES-style press effect */
[data-theme='tetrastack'] .btn-primary {
background: #00f0f0;
color: #000000;
border: none;
border-radius: 0;
box-shadow: inset -3px -3px 0 rgba(0,0,0,0.5), inset 3px 3px 0 rgba(255,255,255,0.35);
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.08em;
}
[data-theme='tetrastack'] .btn-primary:hover {
background: #30ffff;
box-shadow: inset -3px -3px 0 rgba(0,0,0,0.4), inset 3px 3px 0 rgba(255,255,255,0.45);
}
[data-theme='tetrastack'] .btn-surface {
border-radius: 0;
box-shadow: inset -2px -2px 0 rgba(0,0,0,0.5), inset 2px 2px 0 rgba(255,255,255,0.06);
}
/* Track name = I-piece glow */
[data-theme='tetrastack'] .player-track-name {
color: #00f0f0;
text-shadow: 0 0 8px rgba(0,240,240,0.7), 0 0 20px rgba(0,240,240,0.3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Artist name = L-piece orange */
[data-theme='tetrastack'] .player-track-artist { color: #f07800; }
/* Album title in queue = T-piece purple */
[data-theme='tetrastack'] .queue-meta-album { color: #a020f0; }
/* Active queue item = I-piece left border */
[data-theme='tetrastack'] .queue-item.active {
background: rgba(0, 240, 240, 0.07);
box-shadow: inset 3px 0 0 #00f0f0;
}
[data-theme='tetrastack'] .np-queue-item-active {
color: #00f0f0;
text-shadow: 0 0 8px rgba(0,240,240,0.6);
}
[data-theme='tetrastack'] .np-queue-item.active { background: rgba(0,240,240,0.07); }
/* Hover rows: subtle block highlight */
[data-theme='tetrastack'] .track-row:hover,
[data-theme='tetrastack'] .track-row.context-active {
background: rgba(0, 240, 240, 0.06) !important;
box-shadow: inset 3px 0 0 #00f0f0;
}
[data-theme='tetrastack'] .queue-item:hover,
[data-theme='tetrastack'] .queue-item.context-active {
background: rgba(0, 240, 240, 0.07) !important;
box-shadow: inset 3px 0 0 #00f0f0;
}
[data-theme='tetrastack'] .np-queue-item:hover,
[data-theme='tetrastack'] .np-queue-item.context-active {
background: rgba(0, 240, 240, 0.07);
box-shadow: inset 2px 0 0 #00f0f0;
}
[data-theme='tetrastack'] .artist-row:hover { background: rgba(0,240,240,0.06); box-shadow: inset 3px 0 0 #00f0f0; }
[data-theme='tetrastack'] .playlist-row:hover { background: rgba(0,240,240,0.06); box-shadow: inset 3px 0 0 #00f0f0; }
/* Settings tabs: active = S-piece green left border */
[data-theme='tetrastack'] .settings-tab:hover { background: rgba(0,240,240,0.06); color: #00f0f0; }
[data-theme='tetrastack'] .settings-tab.active {
background: rgba(0, 208, 0, 0.08);
color: #00d000;
box-shadow: inset 3px 0 0 #00d000;
}
/* Queue tabs */
[data-theme='tetrastack'] .queue-tab-btn:hover { background: rgba(0,240,240,0.06); color: #00f0f0; }
/* Dropdowns / selects */
[data-theme='tetrastack'] .custom-select-trigger:hover { background: rgba(0,240,240,0.06); }
[data-theme='tetrastack'] .custom-select-option:hover {
background: rgba(0, 240, 240, 0.1) !important;
color: #00f0f0 !important;
}
/* Artist pill links = J-piece blue */
[data-theme='tetrastack'] .artist-ext-link:hover {
background: rgba(0, 96, 240, 0.1);
color: #0060f0 !important;
border-color: rgba(0, 96, 240, 0.4) !important;
}
/* Now playing active track = Z-piece red accent */
[data-theme='tetrastack'] .np-album-track.active .np-album-track-title,
[data-theme='tetrastack'] .np-album-track.active .np-album-track-num {
color: #f02000;
text-shadow: 0 0 8px rgba(240, 32, 0, 0.5);
}
/* Connection indicators */
[data-theme='tetrastack'] .connection-type,
[data-theme='tetrastack'] .connection-server { color: #f0d000; }
/* ── The Book (Social Media) ────────────────────────────────── */
[data-theme='the-book'] {
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%2365676B%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: #FFFFFF;
--ctp-mantle: #FFFFFF;
--ctp-base: #F0F2F5;
--ctp-surface0: #E4E6EB;
--ctp-surface1: #D8DADF;
--ctp-surface2: #CED0D4;
--ctp-overlay0: #B0B3B8;
--ctp-overlay1: #65676B;
--ctp-overlay2: #4B4C4F;
--ctp-text: #050505;
--ctp-subtext1: #65676B;
--ctp-subtext0: #8A8D91;
--ctp-mauve: #1877F2;
--ctp-lavender: #2D88FF;
--ctp-green: #42B72A;
--ctp-yellow: #F7B125;
--ctp-red: #FA383E;
--ctp-blue: #1877F2;
--ctp-teal: #00A400;
--ctp-sky: #45BD62;
--ctp-sapphire: #0064D1;
--ctp-pink: #F33E58;
--ctp-flamingo: #F33E58;
--ctp-rosewater:#F0F2F5;
--ctp-maroon: #B12425;
--ctp-peach: #F7B125;
--bg-app: #F0F2F5;
--bg-sidebar: #1877F2;
--bg-card: #FFFFFF;
--bg-hover: #F2F2F2;
--bg-player: #FFFFFF;
--bg-glass: rgba(255, 255, 255, 0.9);
--accent: #1877F2;
--accent-dim: rgba(24, 119, 242, 0.1);
--accent-glow: rgba(24, 119, 242, 0.2);
--volume-accent:#1877F2;
--text-primary: #050505;
--text-secondary:#65676B;
--text-muted: #606369;
--border: #CED0D4;
--border-subtle: #E4E6EB;
--positive: #42B72A;
--warning: #F7B125;
--danger: #FA383E;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--shadow-dropdown: 0 12px 28px 0 rgba(0,0,0,0.1), 0 2px 4px 0 rgba(0,0,0,0.1);
}
[data-theme='the-book'] .player-bar {
border-top: 1px solid var(--border-subtle);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}
[data-theme='the-book'] .sidebar {
border-right: none;
}
[data-theme='the-book'] .sidebar .nav-link {
color: rgba(255, 255, 255, 0.85);
}
[data-theme='the-book'] .sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
[data-theme='the-book'] .sidebar .nav-link.active {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-weight: 600;
}
[data-theme='the-book'] .sidebar .nav-section-label {
color: rgba(255, 255, 255, 0.55);
}
[data-theme='the-book'] .sidebar-brand .brand-name {
-webkit-text-fill-color: #ffffff;
color: #ffffff;
}
[data-theme='the-book'] .sidebar {
--accent: #ffffff;
--ctp-blue: #ffffff;
}
/* Queue panel — white text on blue background */
[data-theme='the-book'] .queue-item-title {
color: rgba(255, 255, 255, 0.9);
}
[data-theme='the-book'] .queue-item-artist,
[data-theme='the-book'] .queue-item-duration {
color: rgba(255, 255, 255, 0.55);
}
[data-theme='the-book'] .queue-item:hover .queue-item-title,
[data-theme='the-book'] .queue-item.context-active .queue-item-title {
color: #ffffff;
}
[data-theme='the-book'] .queue-item.active .queue-item-title {
color: #ffffff;
}
[data-theme='the-book'] .queue-item.active .queue-item-artist,
[data-theme='the-book'] .queue-item.active .queue-item-duration {
color: rgba(255, 255, 255, 0.7);
}
[data-theme='the-book'] .queue-item:hover,
[data-theme='the-book'] .queue-item.context-active {
background: rgba(255, 255, 255, 0.1);
}
[data-theme='the-book'] .queue-header,
[data-theme='the-book'] .queue-header h2 {
color: var(--text-primary);
}
[data-theme='the-book'] .queue-current-info h3 {
color: rgba(255, 255, 255, 0.9);
}
[data-theme='the-book'] .queue-current-sub {
color: rgba(255, 255, 255, 0.65);
}
[data-theme='the-book'] .collapse-btn {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
}
[data-theme='the-book'] .player-track-name,
[data-theme='the-book'] .player-track-artist,
[data-theme='the-book'] .player-time {
color: var(--text-primary) !important;
}
[data-theme='the-book'] .card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border: 1px solid var(--border-subtle);
}
/* ── ReadIt (Social Media) ──────────────────────────────────── */
[data-theme='readit'] {
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%23FF4500%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: #030303;
--ctp-mantle: #1A1A1B;
--ctp-base: #030303;
--ctp-surface0: #1A1A1B;
--ctp-surface1: #272729;
--ctp-surface2: #343536;
--ctp-overlay0: #818384;
--ctp-overlay1: #D7DADC;
--ctp-overlay2: #FFFFFF;
--ctp-text: #D7DADC;
--ctp-subtext1: #D7DADC;
--ctp-subtext0: #818384;
--ctp-mauve: #FF4500;
--ctp-lavender: #FF581A;
--ctp-green: #46D160;
--ctp-yellow: #FFD635;
--ctp-red: #FF4500;
--ctp-blue: #0079D3;
--ctp-teal: #00AD96;
--ctp-sky: #7193FF;
--ctp-sapphire: #3E5EB3;
--ctp-pink: #FF66AC;
--ctp-flamingo: #FF8280;
--ctp-rosewater:#FFB3A6;
--ctp-maroon: #EA0027;
--ctp-peach: #FFB000;
--bg-app: #030303;
--bg-sidebar: #1A1A1B;
--bg-card: #1A1A1B;
--bg-hover: #272729;
--bg-player: #1A1A1B;
--bg-glass: rgba(26, 26, 27, 0.9);
--accent: #FF4500;
--accent-dim: rgba(255, 69, 0, 0.1);
--accent-glow: rgba(255, 69, 0, 0.3);
--volume-accent:#FF4500;
--text-primary: #D7DADC;
--text-secondary:#D7DADC;
--text-muted: #818384;
--border: #343536;
--border-subtle: #272729;
--radius-sm: 4px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
}
[data-theme='readit'] .player-bar {
border-top: 1px solid var(--border);
background: var(--bg-sidebar);
}
[data-theme='readit'] .sidebar {
border-right: 1px solid var(--border);
}
[data-theme='readit'] .nav-link.active {
background: transparent;
color: var(--accent);
}
[data-theme='readit'] .nav-link.active::before {
background: var(--accent) !important;
width: 2px;
border-radius: 0 2px 2px 0;
}
[data-theme='readit'] .btn-primary {
background: var(--accent);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 11px;
}
[data-theme='readit'] .btn-primary:hover {
background: var(--ctp-lavender);
}
[data-theme='readit'] .card {
border: 1px solid var(--border);
}
[data-theme='readit'] .queue-item.active {
border-left: 2px solid var(--accent);
background: var(--accent-dim);
}
/* ── Insta (Social Media) ───────────────────────────────────── */
[data-theme='insta'] {
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%23FFFFFF%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: #000000;
--ctp-base: #121212;
--ctp-surface0: #1A1A1A;
--ctp-surface1: #262626;
--ctp-surface2: #363636;
--ctp-overlay0: #737373;
--ctp-overlay1: #A8A8A8;
--ctp-overlay2: #C7C7C7;
--ctp-text: #F5F5F5;
--ctp-subtext1: #DBDBDB;
--ctp-subtext0: #8E8E8E;
--ctp-mauve: #E1306C;
--ctp-lavender: #C13584;
--ctp-green: #0095F6;
--ctp-yellow: #FFD600;
--ctp-red: #ED4956;
--ctp-peach: #F56040;
--ctp-flamingo: #FD1D1D;
--ctp-blue: #0095F6;
--ctp-teal: #0095F6;
--ctp-sky: #C13584;
--ctp-sapphire: #833ab4;
--ctp-pink: #E1306C;
--ctp-rosewater:#fcb045;
--ctp-maroon: #ED4956;
--bg-app: #121212;
--bg-sidebar: #000000;
--bg-card: #1A1A1A;
--bg-hover: #262626;
--bg-player: #000000;
--bg-glass: rgba(0, 0, 0, 0.85);
--accent: #E1306C;
--accent-dim: rgba(225, 48, 108, 0.15);
--accent-glow: rgba(225, 48, 108, 0.35);
--volume-accent:#E1306C;
--text-primary: #F5F5F5;
--text-secondary:#A8A8A8;
--text-muted: #737373;
--border: #262626;
--border-subtle: #1A1A1A;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 22px;
}
[data-theme='insta'] .progress-bar-fill {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
[data-theme='insta'] .nav-link.active::before {
background: linear-gradient(to bottom, #833ab4, #fd1d1d, #fcb045) !important;
width: 3px;
}
[data-theme='insta'] .player-bar {
border-top: 1px solid var(--border);
}
[data-theme='insta'] .btn-primary:hover {
background: linear-gradient(45deg, #f09433, #dc2743, #bc1888) !important;
border-color: transparent;
}
[data-theme='insta'] .sidebar {
border-right: 1px solid var(--border);
}
/* ── Hill Valley 85 (Movies) ────────────────────────────────── */
/* ─── Back to the Future — Hill Valley '85 ─── */
[data-theme='hill-valley-85'] {
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%23ff8c00%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: #020106;
--ctp-mantle: #07060f;
--ctp-base: #0d0b18;
--ctp-surface0: #151220;
--ctp-surface1: #1e1a2c;
--ctp-surface2: #272338;
--ctp-overlay0: #3d3455;
--ctp-overlay1: #5a4e70;
--ctp-overlay2: #7a6e90;
--ctp-text: #ede0c8;
--ctp-subtext1: #c8b898;
--ctp-subtext0: #a09070;
/* BTTF palette: flame orange, DeLorean red, lightning blue, flux yellow */
--ctp-mauve: #ff8c00;
--ctp-lavender: #ffaa33;
--ctp-red: #ff2200;
--ctp-blue: #3d88ff;
--ctp-sapphire: #1a5ccc;
--ctp-sky: #66aaff;
--ctp-teal: #00ccff;
--ctp-green: #44dd00;
--ctp-yellow: #ffe033;
--ctp-peach: #ff6600;
--ctp-pink: #ff44aa;
--ctp-flamingo: #ff2266;
--ctp-rosewater: #ffd0b0;
--ctp-maroon: #cc1100;
/* ── Semantic tokens ── */
--bg-app: #0d0b18;
--bg-sidebar: #08060f;
--bg-card: #141120;
--bg-hover: rgba(255, 140, 0, 0.12);
--bg-player: #040209;
--bg-glass: rgba(6, 4, 12, 0.96);
--accent: #ff8c00;
--accent-dim: rgba(255, 140, 0, 0.12);
--accent-glow: rgba(255, 140, 0, 0.40);
--volume-accent: #ff8c00;
--text-primary: #ede0c8;
--text-secondary:#c8b898;
--text-muted: #b0a0c8;
--border: rgba(255, 140, 0, 0.20);
--border-subtle: rgba(255, 140, 0, 0.10);
--positive: #44dd00;
--warning: #ffe033;
--danger: #ff2200;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
/* ── App shell: Hill Valley night sky — orange fire & blue lightning ── */
[data-theme='hill-valley-85'] .app-shell {
background:
radial-gradient(ellipse at 15% 80%, rgba(255, 110, 0, 0.07) 0%, transparent 55%),
radial-gradient(ellipse at 85% 15%, rgba(60, 130, 255, 0.06) 0%, transparent 50%),
#0d0b18;
}
/* ── Sidebar: DeLorean stainless steel panels ── */
[data-theme='hill-valley-85'] .sidebar {
background-color: #08060f;
background-image: repeating-linear-gradient(
90deg,
rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
transparent 1px, transparent 10px
);
border-right: 1px solid rgba(255, 140, 0, 0.22);
box-shadow: inset -2px 0 8px rgba(255, 100, 0, 0.05), 2px 0 6px rgba(0,0,0,0.40);
}
/* Nav links */
[data-theme='hill-valley-85'] .nav-link { color: #c8b898; }
[data-theme='hill-valley-85'] .nav-link:hover {
background: rgba(255, 140, 0, 0.10);
color: #ede0c8;
}
[data-theme='hill-valley-85'] .nav-link.active {
background: linear-gradient(90deg, rgba(255,140,0,0.18) 0%, transparent 100%);
color: #ff8c00;
border-left: 2px solid #ff8c00;
box-shadow: inset 4px 0 12px rgba(255,140,0,0.10);
}
[data-theme='hill-valley-85'] .nav-link.active::before {
background: #ff8c00;
box-shadow: 0 0 8px rgba(255,140,0,0.70);
}
[data-theme='hill-valley-85'] .nav-link.active svg { color: #ff8c00; }
/* ── Player bar: DeLorean time circuit console ── */
[data-theme='hill-valley-85'] .player-bar {
background: linear-gradient(180deg, #060410 0%, #030208 100%);
border-top: 2px solid rgba(255, 140, 0, 0.45);
box-shadow:
inset 0 1px 0 rgba(255, 140, 0, 0.18),
0 -6px 30px rgba(255, 100, 0, 0.12),
0 -2px 60px rgba(60, 130, 255, 0.04);
}
/* Track name: DeLorean time circuit red LED display */
[data-theme='hill-valley-85'] .player-track-name {
color: #ff2200;
font-family: 'Courier New', 'Courier', monospace;
text-shadow:
0 0 8px rgba(255, 34, 0, 0.90),
0 0 18px rgba(255, 34, 0, 0.50),
0 0 30px rgba(255, 34, 0, 0.20);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
}
/* Artist name: amber LED — second row of the time display */
[data-theme='hill-valley-85'] .player-track-artist {
color: #ff8c00;
font-family: 'Courier New', monospace;
text-shadow: 0 0 8px rgba(255, 140, 0, 0.65);
letter-spacing: 0.5px;
opacity: 1;
}
/* Time readout: amber LCD */
[data-theme='hill-valley-85'] .player-time {
color: #cc6a00;
font-family: 'Courier New', monospace;
text-shadow: 0 0 6px rgba(255, 140, 0, 0.40);
}
/* ── Transport buttons: illuminated 80s switches ── */
[data-theme='hill-valley-85'] .player-btn,
[data-theme='hill-valley-85'] .player-btn-primary {
background: linear-gradient(180deg, #100d1c 0%, #0a0815 100%);
color: #ff8c00;
border: 1px solid rgba(255, 140, 0, 0.35);
border-radius: 50%;
box-shadow: inset 0 0 6px rgba(255,100,0,0.06), 0 1px 3px rgba(0,0,0,0.50);
}
[data-theme='hill-valley-85'] .player-btn:hover,
[data-theme='hill-valley-85'] .player-btn-primary:hover {
background: rgba(255, 140, 0, 0.12);
border-color: #ff8c00;
color: #ffaa33;
box-shadow:
0 0 14px rgba(255, 140, 0, 0.40),
inset 0 0 8px rgba(255, 100, 0, 0.08);
}
/* ── Regular buttons: DeLorean console switches ── */
[data-theme='hill-valley-85'] .btn,
[data-theme='hill-valley-85'] .btn-surface,
[data-theme='hill-valley-85'] .btn-ghost {
background: linear-gradient(180deg, #141120 0%, #0e0c1a 100%);
color: #c8b898;
border: 1px solid rgba(255, 140, 0, 0.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 3px rgba(0,0,0,0.40);
border-radius: 4px;
}
[data-theme='hill-valley-85'] .btn:hover,
[data-theme='hill-valley-85'] .btn-surface:hover,
[data-theme='hill-valley-85'] .btn-ghost:hover {
background: rgba(255, 140, 0, 0.10);
border-color: rgba(255, 140, 0, 0.60);
color: #ede0c8;
box-shadow: 0 0 10px rgba(255, 140, 0, 0.22), inset 0 0 6px rgba(255,100,0,0.05);
}
/* ── Primary button: fire orange ── */
[data-theme='hill-valley-85'] .btn-primary {
background: linear-gradient(180deg, #cc5500 0%, #993d00 100%);
color: #ffffff;
border: 1px solid #ff6600;
box-shadow: 0 0 12px rgba(255, 140, 0, 0.30), inset 0 1px 0 rgba(255,180,0,0.25);
border-radius: 4px;
}
[data-theme='hill-valley-85'] .btn-primary:hover {
background: linear-gradient(180deg, #e86000 0%, #b04800 100%);
box-shadow: 0 0 18px rgba(255, 140, 0, 0.50), inset 0 1px 0 rgba(255,200,0,0.25);
}
/* ── Hero / album-card buttons ── */
[data-theme='hill-valley-85'] .hero-play-btn,
[data-theme='hill-valley-85'] .album-card-details-btn {
background: rgba(255, 140, 0, 0.10);
color: #ff8c00;
border: 1px solid rgba(255, 140, 0, 0.35);
box-shadow: inset 0 1px 0 rgba(255,180,0,0.08);
}
[data-theme='hill-valley-85'] .hero-play-btn:hover,
[data-theme='hill-valley-85'] .album-card-details-btn:hover {
background: rgba(255, 140, 0, 0.18);
border-color: #ff8c00;
box-shadow: 0 0 12px rgba(255, 140, 0, 0.35);
}
/* ── Queue toolbar round buttons ── */
[data-theme='hill-valley-85'] .queue-round-btn {
background: linear-gradient(180deg, #141120 0%, #0e0c1a 100%);
color: #a09070;
border: 1px solid rgba(255, 140, 0, 0.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
[data-theme='hill-valley-85'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: rgba(255, 140, 0, 0.10);
border-color: rgba(255, 140, 0, 0.55);
color: #ff8c00;
box-shadow: 0 0 10px rgba(255, 140, 0, 0.22);
}
[data-theme='hill-valley-85'] .queue-round-btn.active {
background: rgba(255, 140, 0, 0.18);
border-color: #ff8c00;
color: #ff8c00;
box-shadow: 0 0 12px rgba(255, 140, 0, 0.40), inset 0 0 6px rgba(255,100,0,0.08);
}
/* ── Cards: dark interior panels ── */
[data-theme='hill-valley-85'] .card {
background: #141120;
border: 1px solid rgba(255, 140, 0, 0.14);
box-shadow: inset 0 0 20px rgba(255, 100, 0, 0.03), 0 2px 8px rgba(0,0,0,0.40);
}
/* ── Content header: console panel strip ── */
[data-theme='hill-valley-85'] .content-header {
background: linear-gradient(180deg, #100d1c 0%, #0d0b18 100%);
border-bottom: 1px solid rgba(255, 140, 0, 0.22);
box-shadow: 0 2px 12px rgba(255, 100, 0, 0.05);
}
/* ── Theme accordion ── */
[data-theme='hill-valley-85'] .theme-accordion-header:hover {
background: rgba(255, 140, 0, 0.10);
color: #ff8c00;
}
[data-theme='hill-valley-85'] .theme-accordion-open .theme-accordion-header {
background: rgba(255, 140, 0, 0.12);
color: #ff8c00;
}
[data-theme='hill-valley-85'] .theme-accordion-open .theme-accordion-chevron { color: #ff8c00; }
/* ── Progress bar: speedometer reaching 88 mph ── */
[data-theme='hill-valley-85'] .progress-bar-track {
background: #0a0815;
border: 1px solid rgba(255, 140, 0, 0.20);
border-radius: 2px;
}
[data-theme='hill-valley-85'] .progress-bar-fill {
background: linear-gradient(90deg, #993d00 0%, #cc5500 40%, #ff8c00 80%, #ffaa33 100%);
border-radius: 2px;
box-shadow: 0 0 10px rgba(255, 140, 0, 0.55), 0 0 3px rgba(255, 200, 0, 0.40);
}
/* ── Scrollbar: fire trail minimal ── */
[data-theme='hill-valley-85'] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme='hill-valley-85'] ::-webkit-scrollbar-track { background: #07060e; }
[data-theme='hill-valley-85'] ::-webkit-scrollbar-thumb {
background: rgba(255, 140, 0, 0.28);
border: 1px solid rgba(255, 140, 0, 0.18);
border-radius: 3px;
}
[data-theme='hill-valley-85'] ::-webkit-scrollbar-thumb:hover {
background: rgba(255, 140, 0, 0.55);
box-shadow: 0 0 6px rgba(255, 140, 0, 0.40);
}
/* ── Glass / dropdowns: dark DeLorean interior ── */
[data-theme='hill-valley-85'] .glass {
background: rgba(6, 4, 12, 0.97) !important;
backdrop-filter: none !important;
border: 1px solid rgba(255, 140, 0, 0.28) !important;
box-shadow:
0 0 20px rgba(255, 100, 0, 0.08),
inset 0 0 16px rgba(255, 100, 0, 0.02) !important;
border-radius: 4px !important;
}
[data-theme='hill-valley-85'] .glass [style*="var(--bg-hover)"] {
background: rgba(255, 140, 0, 0.10) !important;
border-radius: 2px !important;
}
[data-theme='hill-valley-85'] .glass [style*="var(--text-primary)"] { color: #ede0c8 !important; }
[data-theme='hill-valley-85'] .glass [style*="var(--text-secondary)"] { color: #c8b898 !important; }
[data-theme='hill-valley-85'] .glass [style*="var(--text-muted)"] { color: #5a4e70 !important; }
/* ── Hover / selection: fire orange glow ── */
[data-theme='hill-valley-85'] .queue-tab-btn:hover { background: rgba(255,140,0,0.10); color: #ff8c00; }
[data-theme='hill-valley-85'] .settings-tab:hover { background: rgba(255,140,0,0.10); color: #ff8c00; }
[data-theme='hill-valley-85'] .settings-tab.active {
background: rgba(255,140,0,0.15);
color: #ff8c00;
box-shadow: inset 2px 0 0 #ff8c00;
}
[data-theme='hill-valley-85'] .custom-select-trigger:hover { background: rgba(255,140,0,0.10); }
[data-theme='hill-valley-85'] .custom-select-option:hover {
background: rgba(255,140,0,0.14) !important;
color: #ffaa33 !important;
}
[data-theme='hill-valley-85'] .artist-ext-link:hover {
background: rgba(255,140,0,0.10);
color: #ff8c00 !important;
border-color: rgba(255,140,0,0.50) !important;
}
[data-theme='hill-valley-85'] .np-action-btn:hover { background: rgba(255,140,0,0.10); }
[data-theme='hill-valley-85'] .np-queue-item:hover,
[data-theme='hill-valley-85'] .np-queue-item.context-active {
background: rgba(255,140,0,0.12);
box-shadow: inset 2px 0 0 #ff8c00;
}
[data-theme='hill-valley-85'] .track-row:hover,
[data-theme='hill-valley-85'] .track-row.context-active {
background: rgba(255,140,0,0.08) !important;
box-shadow: inset 2px 0 0 #ff8c00;
}
[data-theme='hill-valley-85'] .artist-row:hover {
background: rgba(255,140,0,0.08);
box-shadow: inset 2px 0 0 #ff8c00;
}
[data-theme='hill-valley-85'] .playlist-row:hover {
background: rgba(255,140,0,0.08);
box-shadow: inset 2px 0 0 #ff8c00;
}
[data-theme='hill-valley-85'] .queue-item:hover,
[data-theme='hill-valley-85'] .queue-item.context-active {
background: rgba(255,140,0,0.10) !important;
box-shadow: inset 2px 0 0 #ff8c00;
}
[data-theme='hill-valley-85'] .queue-item:hover .queue-item-title,
[data-theme='hill-valley-85'] .queue-item:hover .queue-item-artist,
[data-theme='hill-valley-85'] .queue-item:hover .queue-item-duration,
[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-title,
[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-artist,
[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-duration { color: #ff8c00; }
/* ── Active queue item: glowing orange ── */
[data-theme='hill-valley-85'] .queue-item.active {
background: rgba(255, 140, 0, 0.08);
box-shadow: inset 2px 0 0 #ff8c00;
}
[data-theme='hill-valley-85'] .np-queue-item-active { color: #ff8c00; text-shadow: 0 0 8px rgba(255,140,0,0.55); }
[data-theme='hill-valley-85'] .np-queue-item.active { background: rgba(255,140,0,0.08); }
[data-theme='hill-valley-85'] .np-album-track.active .np-album-track-title,
[data-theme='hill-valley-85'] .np-album-track.active .np-album-track-num {
color: #ff8c00;
text-shadow: 0 0 8px rgba(255,140,0,0.50);
}
[data-theme='turtle-power'] {
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%2333cc33%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: #2a2a2a;
--ctp-surface1: #353535;
--ctp-surface2: #404040;
--ctp-overlay0: #556655;
--ctp-overlay1: #778877;
--ctp-overlay2: #99aa99;
--ctp-text: #e0e0e0;
--ctp-subtext1: #a0b0a0;
--ctp-subtext0: #809080;
--ctp-mauve: #33cc33;
--ctp-lavender: #44ee44;
--ctp-red: #ff0000;
--ctp-blue: #00aaff;
--ctp-peach: #ff8c00;
--ctp-yellow: #ffcc00;
--ctp-maroon: #a020f0;
--ctp-green: #33cc33;
--ctp-teal: #44ee44;
--ctp-sky: #00aaff;
--ctp-sapphire: #0077cc;
--ctp-pink: #ff66aa;
--ctp-flamingo: #ff4488;
--ctp-rosewater:#ffaacc;
--bg-app: #1a1a1a;
--bg-sidebar: #121212;
--bg-card: #242424;
--bg-hover: rgba(51, 204, 51, 0.1);
--bg-player: #0a0a0a;
--bg-glass: rgba(10, 10, 10, 0.85);
--accent: #33cc33;
--accent-dim: rgba(51, 204, 51, 0.15);
--accent-glow: rgba(51, 204, 51, 0.4);
--volume-accent:#33cc33;
--text-primary: #e0e0e0;
--text-secondary:#a0b0a0;
--text-muted: #667766;
--border: #333333;
--border-subtle: #222222;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
}
[data-theme='turtle-power'] .sidebar {
background-image:
linear-gradient(335deg, #161616 5px, transparent 5px),
linear-gradient(155deg, #161616 5px, transparent 5px),
linear-gradient(335deg, #161616 5px, transparent 5px),
linear-gradient(155deg, #161616 5px, transparent 5px);
background-size: 20px 20px;
background-position: 0 0, 10px 10px, 10px 10px, 0 0;
border-right: 2px solid #222;
}
[data-theme='turtle-power'] .player-bar {
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
border-top: 2px solid #333;
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5);
}
[data-theme='turtle-power'] .player-track-name {
color: #44ee44;
text-shadow: 0 0 8px rgba(68, 238, 68, 0.6);
font-weight: bold;
}
[data-theme='turtle-power'] .btn-primary,
[data-theme='turtle-power'] .player-btn-primary {
background: linear-gradient(145deg, #33cc33, #28a428);
border: 1px solid #1e7a1e;
box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 2px 2px 5px rgba(0,0,0,0.5);
color: #000 !important;
}
[data-theme='turtle-power'] .nav-link.active {
background: var(--accent-dim);
border-left: 4px solid var(--accent);
color: var(--accent) !important;
text-shadow: 0 0 5px rgba(51, 204, 51, 0.3);
}
[data-theme='turtle-power'] .queue-item.active {
border-left: 3px solid var(--accent);
background: rgba(51, 204, 51, 0.05);
}
/* ── W3.1 (Operating Systems) ───────────────────────────────── */
[data-theme='w3-1'] {
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");
/* ── Authentische W3.1 Palette ── */
--ctp-crust: #808080;
--ctp-mantle: #a0a0a0;
--ctp-base: #c0c0c0; /* Reines W3.1 Grau */
--ctp-surface0: #ffffff;
--ctp-surface1: #e0e0e0;
--ctp-surface2: #c0c0c0;
--ctp-overlay0: #808080;
--ctp-overlay1: #404040;
--ctp-overlay2: #000000;
--ctp-text: #000000;
--ctp-subtext1: #000000;
--ctp-subtext0: #000000;
--ctp-mauve: #000080;
--ctp-lavender: #0000a0;
--ctp-green: #008000;
--ctp-teal: #008080;
--ctp-sky: #0000ff;
--ctp-blue: #000080;
--ctp-sapphire: #000080;
--ctp-pink: #ff00ff;
--ctp-flamingo: #ff00ff;
--ctp-rosewater:#ffffff;
--ctp-yellow: #ffff00;
--ctp-peach: #ff8000;
--ctp-maroon: #800000;
--ctp-red: #ff0000;
--bg-app: #008080; /* Teal Desktop */
--bg-sidebar: #c0c0c0;
--bg-card: #ffffff;
--bg-hover: #000080;
--bg-player: #c0c0c0;
--bg-glass: #c0c0c0;
--accent: #000080;
--accent-dim: rgba(0, 0, 128, 0.12);
--accent-glow: transparent;
--volume-accent: #000080;
--text-primary: #000000;
--text-secondary:#000000;
--text-muted: #000000;
--border: #000000;
--border-subtle: #808080;
--border-dropdown: #000000;
--shadow-dropdown: rgba(0, 0, 0, 0.4);
--positive: #008000;
--warning: #808000;
--danger: #ff0000;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
--radius-full: 0px;
}
/* Teal Desktop */
[data-theme='w3-1'] .app-shell {
background: #008080;
}
/* ── W3.1 Bevel (2-Layer, schlichter als W98) ── */
[data-theme='w3-1'] .sidebar,
[data-theme='w3-1'] .player-bar,
[data-theme='w3-1'] .card {
background: #c0c0c0;
border: 2px solid #000000;
box-shadow:
inset 1px 1px #ffffff,
inset -1px -1px #808080;
}
[data-theme='w3-1'] .sidebar {
border-right: 2px solid #000000;
}
/* Titelbalken-Stil: solides Navy — der Kern-Unterschied zu W98 */
[data-theme='w3-1'] .player-bar {
border-top: 2px solid #000000;
}
[data-theme='w3-1'] .player-track-name {
background: #000080;
color: #ffffff !important;
padding: 2px 6px;
font-weight: bold;
text-align: center;
letter-spacing: 0.03em;
}
[data-theme='w3-1'] .player-track-artist,
[data-theme='w3-1'] .player-time {
color: #000000 !important;
}
/* Nav */
[data-theme='w3-1'] .nav-link.active {
background: #000080 !important;
color: #ffffff !important;
}
[data-theme='w3-1'] .nav-link.active svg { color: #ffffff !important; }
[data-theme='w3-1'] .nav-link:hover:not(.active) {
background: #000080 !important;
color: #ffffff !important;
}
[data-theme='w3-1'] .nav-link:hover:not(.active) svg { color: #ffffff !important; }
/* Accordion (Settings Theme Picker) */
[data-theme='w3-1'] .nav-section-label { color: #000000 !important; }
[data-theme='w3-1'] .theme-accordion-header:hover { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .theme-accordion-open .theme-accordion-header { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .theme-accordion-open .theme-accordion-chevron { color: #ffffff; }
/* Alle Buttons: W3.1 Bevel (einfach, ohne doppelte Inset-Schicht) */
[data-theme='w3-1'] .btn,
[data-theme='w3-1'] .btn-primary,
[data-theme='w3-1'] .btn-surface,
[data-theme='w3-1'] .btn-ghost,
[data-theme='w3-1'] .hero-play-btn,
[data-theme='w3-1'] .queue-round-btn,
[data-theme='w3-1'] .player-btn,
[data-theme='w3-1'] .album-card-details-btn {
background: #c0c0c0 !important;
color: #000000 !important;
border: 1px solid #000000 !important;
border-radius: 0 !important;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080 !important;
text-shadow: none !important;
filter: none !important;
transform: none !important;
}
/* Gedrückt */
[data-theme='w3-1'] .btn:active,
[data-theme='w3-1'] .btn-primary:active,
[data-theme='w3-1'] .btn-surface:active,
[data-theme='w3-1'] .btn-ghost:active,
[data-theme='w3-1'] .hero-play-btn:active,
[data-theme='w3-1'] .queue-round-btn:active,
[data-theme='w3-1'] .player-btn:active,
[data-theme='w3-1'] .album-card-details-btn:active {
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080 !important;
}
/* Hover */
[data-theme='w3-1'] .btn:hover,
[data-theme='w3-1'] .btn-primary:hover,
[data-theme='w3-1'] .btn-surface:hover,
[data-theme='w3-1'] .btn-ghost:hover,
[data-theme='w3-1'] .hero-play-btn:hover,
[data-theme='w3-1'] .album-card-details-btn:hover {
background: #d0d0d0 !important;
color: #000000 !important;
}
/* Aktive Queue-Buttons */
[data-theme='w3-1'] .queue-round-btn.active {
background: #000080 !important;
color: #ffffff !important;
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080 !important;
}
[data-theme='w3-1'] .queue-round-btn:hover:not(:disabled):not(.active) {
background: #d0d0d0 !important;
color: #000000 !important;
}
/* Progress Bar */
[data-theme='w3-1'] .progress-bar-track {
background: #ffffff;
box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff;
border-radius: 0;
}
[data-theme='w3-1'] .progress-bar-fill {
background: #000080;
border-radius: 0;
box-shadow: none;
}
/* Scrollbar */
[data-theme='w3-1'] ::-webkit-scrollbar { width: 16px; height: 16px; }
[data-theme='w3-1'] ::-webkit-scrollbar-track { background: #c0c0c0; }
[data-theme='w3-1'] ::-webkit-scrollbar-thumb {
background: #c0c0c0;
border: 1px solid #000000;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}
/* Cards */
[data-theme='w3-1'] .card {
background: #ffffff;
border: 2px solid #000000;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
}
/* Glass (Live Dropdown etc.) */
[data-theme='w3-1'] .glass {
background: #c0c0c0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 2px solid #000000;
box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080;
color: #000000;
}
[data-theme='w3-1'] .glass [style*="var(--bg-hover)"] {
background: #d8d8d8 !important;
border: 1px solid #808080;
border-radius: 0 !important;
}
[data-theme='w3-1'] .glass [style*="var(--text-primary)"],
[data-theme='w3-1'] .glass [style*="var(--text-secondary)"],
[data-theme='w3-1'] .glass [style*="var(--text-muted)"] { color: #000000 !important; }
/* Universelle Hover-Zustände → navy + weiß */
[data-theme='w3-1'] .queue-tab-btn:hover { background: #d0d0d0; color: #000000; }
[data-theme='w3-1'] .settings-tab:hover { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .custom-select-trigger:hover { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .custom-select-option:hover { background: #000080 !important; color: #ffffff !important; }
[data-theme='w3-1'] .artist-ext-link:hover { background: #000080; color: #ffffff !important; }
[data-theme='w3-1'] .np-action-btn:hover { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .np-queue-item:hover,
[data-theme='w3-1'] .np-queue-item.context-active { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .track-row:hover,
[data-theme='w3-1'] .track-row.context-active { background: #000080 !important; }
[data-theme='w3-1'] .track-row:hover *,
[data-theme='w3-1'] .track-row.context-active * { color: #ffffff !important; }
[data-theme='w3-1'] .artist-row:hover { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .playlist-row:hover { background: #000080; }
[data-theme='w3-1'] .playlist-row:hover,
[data-theme='w3-1'] .playlist-row:hover * { color: #ffffff; }
[data-theme='w3-1'] .queue-item:hover,
[data-theme='w3-1'] .queue-item.context-active { background: #000080 !important; }
[data-theme='w3-1'] .queue-item:hover .queue-item-title,
[data-theme='w3-1'] .queue-item:hover .queue-item-artist,
[data-theme='w3-1'] .queue-item:hover .queue-item-duration,
[data-theme='w3-1'] .queue-item.context-active .queue-item-title,
[data-theme='w3-1'] .queue-item.context-active .queue-item-artist,
[data-theme='w3-1'] .queue-item.context-active .queue-item-duration { color: #ffffff; }
[data-theme='w3-1'] .player-btn:hover { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .player-btn-primary { background: #c0c0c0 !important; color: #000000 !important; }
[data-theme='w3-1'] .player-btn-primary:hover { background: #000080 !important; color: #ffffff !important; }
[data-theme='w3-1'] .search-result-item:hover,
[data-theme='w3-1'] .search-result-item.active { background: #000080; }
[data-theme='w3-1'] .search-result-item:hover .search-result-name,
[data-theme='w3-1'] .search-result-item:hover .search-result-sub,
[data-theme='w3-1'] .search-result-item.active .search-result-name,
[data-theme='w3-1'] .search-result-item.active .search-result-sub { color: #ffffff; }
[data-theme='w3-1'] .np-title { color: #000080 !important; }
[data-theme='w3-1'] .changelog-code { background: #ffffff; color: #000080; border: 1px solid #808080; }
[data-theme='w3-1'] .keybind-badge { background: #c0c0c0 !important; color: #000000 !important; border: 1px solid #808080 !important; }
[data-theme='w3-1'] .genre-keyword-badge { background: #c0c0c0 !important; color: #000000 !important; border: 1px solid #808080 !important; }
[data-theme='w3-1'] .eq-ctrl-btn { background: #c0c0c0; color: #000000; border: 1px solid #808080; box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; }
[data-theme='w3-1'] .eq-ctrl-btn:hover { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .toggle-track::before { background: #c0c0c0; border: 1px solid #808080; }
[data-theme='w3-1'] .hero-eyebrow { color: rgba(255,255,255,0.9); }
[data-theme='w3-1'] .hero-meta .badge { background: rgba(255,255,255,0.15); }
[data-theme='w3-1'] .connection-type,
[data-theme='w3-1'] .connection-server { color: #000000; }
[data-theme='w3-1'] .collapse-btn { border-color: #808080 !important; }
[data-theme='w3-1'] .collapse-btn:hover { background: #000080 !important; color: #ffffff !important; }
[data-theme='w3-1'] .album-row-nav .nav-btn:hover:not(.disabled) { background: #000080; color: #ffffff; }
[data-theme='w3-1'] .help-question:hover { color: #000080; }
[data-theme='w3-1'] .help-item-open .help-question { color: #000080; font-weight: bold; }
[data-theme='w3-1'] .year-toggle:hover { color: #000080; }
/* ─── Ubuntu — Unity Ambiance (Classic Light) ─── */
/* Warm human desktop: aubergine launcher + orange accent + warm off-white content */
[data-theme='ubuntu-ambiance'] {
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%237d6e68%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 — warm human spectrum ── */
--ctp-crust: #1a000f; /* panel blackout aubergine */
--ctp-mantle: #2c001e; /* Ubuntu top/bottom panel */
--ctp-base: #f4efea; /* Ambiance window warm off-white */
--ctp-surface0: #ede8e2;
--ctp-surface1: #e4dfd8;
--ctp-surface2: #d8d0c8;
--ctp-overlay0: #c0b0a0;
--ctp-overlay1: #a89080;
--ctp-overlay2: #907870;
--ctp-text: #3d2b2b; /* warm dark brown — human, not pure black */
--ctp-subtext1: #5d4e48;
--ctp-subtext0: #7d6e68;
/* Ubuntu color spectrum */
--ctp-mauve: #e95420; /* Ubuntu Orange — the soul of Ubuntu */
--ctp-lavender: #f06030;
--ctp-sky: #f07050;
--ctp-peach: #e95420;
--ctp-teal: #06989a;
--ctp-blue: #3465a4;
--ctp-sapphire: #204a87;
--ctp-green: #4e9a06; /* Ubuntu success green */
--ctp-yellow: #c4a000;
--ctp-pink: #cc1e4a;
--ctp-flamingo: #a52828;
--ctp-maroon: #800000;
--ctp-red: #cc0000;
--ctp-rosewater: #cc4444;
/* ── Semantic tokens ── */
--bg-app: #f4efea; /* warm Ambiance window */
--bg-sidebar: #3d1f3d; /* Unity Launcher — dark aubergine */
--bg-card: #ede8e2;
--bg-hover: #e4ddd5;
--bg-player: #2c001e; /* Ubuntu panel — blackest aubergine */
--bg-glass: rgba(244, 239, 234, 0.94);
--accent: #e95420; /* Ubuntu Orange */
--accent-dim: rgba(233, 84, 32, 0.12);
--accent-glow: rgba(233, 84, 32, 0.30);
--text-primary: #3d2b2b;
--text-secondary:#5d4e48;
--text-muted: #7d6e68;
--border: #c8b8a8;
--border-subtle: #ddd5cc;
--positive: #4e9a06;
--warning: #c4a000;
--danger: #cc0000;
}
/* ── App shell: warm Ambiance off-white ── */
[data-theme='ubuntu-ambiance'] .app-shell {
background: #f4efea;
}
/* ── Sidebar: Unity Launcher dark aubergine ── */
[data-theme='ubuntu-ambiance'] .sidebar {
background: linear-gradient(180deg, #3d1f3d 0%, #2e162e 100%);
border-right: 1px solid #1a0a1a;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35);
}
/* Sidebar text: light on dark aubergine */
[data-theme='ubuntu-ambiance'] .sidebar-logo-text,
[data-theme='ubuntu-ambiance'] .nav-link,
[data-theme='ubuntu-ambiance'] .sidebar-bottom a,
[data-theme='ubuntu-ambiance'] .sidebar-bottom button { color: rgba(255, 255, 255, 0.72); }
[data-theme='ubuntu-ambiance'] .nav-link:hover {
background: rgba(255, 255, 255, 0.09);
color: #ffffff;
}
[data-theme='ubuntu-ambiance'] .nav-link.active {
background: rgba(233, 84, 32, 0.22);
color: #ffffff;
}
[data-theme='ubuntu-ambiance'] .nav-link.active::before {
background: #e95420;
box-shadow: 0 0 8px rgba(233, 84, 32, 0.60);
}
[data-theme='ubuntu-ambiance'] { --logo-color-start: #ffffff; --logo-color-end: #ffb090; }
[data-theme='ubuntu-ambiance'] .sidebar-logo-icon { color: #e95420; }
/* Sidebar version / muted labels */
[data-theme='ubuntu-ambiance'] .sidebar-version,
[data-theme='ubuntu-ambiance'] .update-toast { color: rgba(255, 255, 255, 0.40); }
/* ── Player bar: Ubuntu panel — darkest aubergine ── */
[data-theme='ubuntu-ambiance'] .player-bar {
background: linear-gradient(180deg, #2c001e 0%, #1a000f 100%);
border-top: 1px solid #3d0828;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 -3px 16px rgba(0, 0, 0, 0.50);
}
/* Player text: light on dark panel */
[data-theme='ubuntu-ambiance'] .player-track-name {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme='ubuntu-ambiance'] .player-track-artist {
color: rgba(255, 255, 255, 0.60);
opacity: 1;
}
[data-theme='ubuntu-ambiance'] .player-time { color: rgba(255, 255, 255, 0.65); }
/* Transport buttons: Ubuntu Orange on dark panel */
[data-theme='ubuntu-ambiance'] .player-btn,
[data-theme='ubuntu-ambiance'] .player-btn-primary {
background: linear-gradient(180deg, #f06030 0%, #e95420 50%, #d44418 100%);
color: #ffffff;
border: 1px solid #b83010;
box-shadow:
0 2px 6px rgba(0, 0, 0, 0.50),
inset 0 1px 0 rgba(255, 255, 255, 0.25),
inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
[data-theme='ubuntu-ambiance'] .player-btn:hover,
[data-theme='ubuntu-ambiance'] .player-btn-primary:hover {
background: linear-gradient(180deg, #f87040 0%, #f06030 50%, #e04828 100%);
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.50),
inset 0 1px 0 rgba(255, 255, 255, 0.30),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
/* ── Content area buttons: Ambiance GTK style ── */
[data-theme='ubuntu-ambiance'] .btn {
background: linear-gradient(180deg, #f0ebe5 0%, #e4dfd8 100%);
color: #3d2b2b;
border: 1px solid #b8a898;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 1px 2px rgba(0, 0, 0, 0.15);
}
[data-theme='ubuntu-ambiance'] .btn:hover {
background: linear-gradient(180deg, #f8f3ed 0%, #ede8e2 100%);
border-color: #a89888;
}
[data-theme='ubuntu-ambiance'] .btn-primary {
background: linear-gradient(180deg, #f06030 0%, #e95420 100%);
color: #ffffff;
border: 1px solid #b83010;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 1px 3px rgba(0, 0, 0, 0.25),
0 0 0 0px rgba(233, 84, 32, 0);
}
[data-theme='ubuntu-ambiance'] .btn-primary:hover {
background: linear-gradient(180deg, #f87040 0%, #f06030 100%);
}
/* ── Content header: warm Ambiance title band ── */
[data-theme='ubuntu-ambiance'] .content-header {
background: linear-gradient(180deg, rgba(244, 239, 234, 1) 0%, rgba(237, 232, 226, 0.60) 100%);
border-bottom: 1px solid #c8b8a8;
}
/* ── Cards / panels ── */
[data-theme='ubuntu-ambiance'] .glass,
[data-theme='ubuntu-ambiance'] .card {
background: rgba(237, 232, 226, 0.88);
border: 1px solid #c8b8a8;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 4px rgba(0, 0, 0, 0.10);
}
/* ── Hover / active states: orange accent ── */
[data-theme='ubuntu-ambiance'] .track-row:hover,
[data-theme='ubuntu-ambiance'] .track-row.context-active {
background: rgba(233, 84, 32, 0.07);
box-shadow: inset 3px 0 0 #e95420;
}
[data-theme='ubuntu-ambiance'] .queue-item:hover,
[data-theme='ubuntu-ambiance'] .queue-item.context-active {
background: rgba(233, 84, 32, 0.07);
}
[data-theme='ubuntu-ambiance'] .queue-item.active {
background: rgba(233, 84, 32, 0.12);
border-left: 2px solid #e95420;
}
[data-theme='ubuntu-ambiance'] .np-queue-item.active { background: rgba(233, 84, 32, 0.08); }
[data-theme='ubuntu-ambiance'] .np-queue-item-active { color: #e95420; }
[data-theme='ubuntu-ambiance'] .np-queue-item:hover,
[data-theme='ubuntu-ambiance'] .np-queue-item.context-active { background: rgba(233, 84, 32, 0.06); }
[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-title,
[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-num { color: #e95420; }
[data-theme='ubuntu-ambiance'] .artist-row:hover { background: rgba(233, 84, 32, 0.06); box-shadow: inset 3px 0 0 #e95420; }
[data-theme='ubuntu-ambiance'] .playlist-row:hover { background: rgba(233, 84, 32, 0.06); box-shadow: inset 3px 0 0 #e95420; }
[data-theme='ubuntu-ambiance'] .settings-tab:hover { background: rgba(233, 84, 32, 0.08); color: #e95420; }
[data-theme='ubuntu-ambiance'] .settings-tab.active { background: rgba(233, 84, 32, 0.14); color: #e95420; border-color: #e95420; }
[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover { background: rgba(233, 84, 32, 0.08); color: #e95420; }
[data-theme='ubuntu-ambiance'] .custom-select-trigger:hover { background: rgba(233, 84, 32, 0.07); }
[data-theme='ubuntu-ambiance'] .custom-select-option:hover { background: rgba(233, 84, 32, 0.10); }
[data-theme='ubuntu-ambiance'] .artist-ext-link:hover { background: rgba(233, 84, 32, 0.09); border-color: #e95420; }
/* Queue panel on dark player area */
[data-theme='ubuntu-ambiance'] .queue-round-btn.active { color: #ffffff; }
/* Connection indicators: warm muted on light bg */
[data-theme='ubuntu-ambiance'] .connection-type,
[data-theme='ubuntu-ambiance'] .connection-server { color: #907860; }
/* ── Album chip: opaque orange pill so it reads on both dark hero and light bg ── */
[data-theme='ubuntu-ambiance'] .badge,
[data-theme='ubuntu-ambiance'] .album-detail-badge {
background: #e95420;
color: #ffffff;
}
/* ── Queue panel: on dark aubergine bg — all text must be light ── */
/* Header + toolbar sit on --bg-app (light) — fine as-is */
/* List, meta box, divider sit on --bg-sidebar (dark aubergine) */
[data-theme='ubuntu-ambiance'] .queue-item-title { color: rgba(255, 255, 255, 0.88); }
[data-theme='ubuntu-ambiance'] .queue-item-artist,
[data-theme='ubuntu-ambiance'] .queue-item-duration { color: rgba(255, 255, 255, 0.52); }
[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-artist,
[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-duration { color: rgba(255, 255, 255, 0.72); }
[data-theme='ubuntu-ambiance'] .queue-divider span { color: rgba(255, 255, 255, 0.40) !important; }
/* Meta box (current track info) on dark aubergine */
[data-theme='ubuntu-ambiance'] .queue-current-info h3 { color: rgba(255, 255, 255, 0.92); }
[data-theme='ubuntu-ambiance'] .queue-current-sub { color: rgba(255, 255, 255, 0.55); }
[data-theme='ubuntu-ambiance'] .queue-current-cover .fallback { color: rgba(255, 255, 255, 0.35); }
/* Tabs sit on dark bg too */
[data-theme='ubuntu-ambiance'] .queue-tab-btn { color: rgba(255, 255, 255, 0.60); }
[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.90); }
[data-theme='ubuntu-ambiance'] .queue-tab-btn.active { color: #e95420; }
/* Action buttons in header (on light --bg-app) */
[data-theme='ubuntu-ambiance'] .queue-action-btn { color: #7d6e68; }
[data-theme='ubuntu-ambiance'] .queue-action-btn:hover:not(:disabled) { color: #3d2b2b; }
/* ─────────────────────────────────────────── */
/* ─── Windows 10 — Fluent Design Light ─── */
/* Clean flat white + the iconic near-black taskbar + Windows blue #0078D4 */
[data-theme='w10'] {
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%23767676%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 — Windows 10 neutral + Fluent blue ── */
--ctp-crust: #1c1c1c; /* taskbar near-black */
--ctp-mantle: #2b2b2b;
--ctp-base: #ffffff; /* window white */
--ctp-surface0: #f3f3f3; /* nav pane / secondary bg */
--ctp-surface1: #ebebeb;
--ctp-surface2: #d6d6d6; /* borders, dividers */
--ctp-overlay0: #767676; /* muted / disabled */
--ctp-overlay1: #4a4a4a;
--ctp-overlay2: #2b2b2b;
--ctp-text: #000000; /* primary text — true black */
--ctp-subtext1: #1b1b1b;
--ctp-subtext0: #5d5d5d;
/* Windows Fluent blue spectrum */
--ctp-mauve: #0078d4; /* Windows blue — THE accent */
--ctp-lavender: #2e95d3;
--ctp-sky: #cce4f7; /* selection highlight */
--ctp-teal: #008272;
--ctp-blue: #0063b1;
--ctp-sapphire: #003e92;
--ctp-green: #107c10;
--ctp-yellow: #ffb900;
--ctp-peach: #d83b01;
--ctp-pink: #e3008c;
--ctp-flamingo: #c239b3;
--ctp-rosewater: #ef6950;
--ctp-maroon: #a80000;
--ctp-red: #d13438;
/* ── Semantic tokens ── */
--bg-app: #ffffff;
--bg-sidebar: #f3f3f3;
--bg-card: #ffffff;
--bg-hover: #e8e8e8;
--bg-player: #1c1c1c; /* taskbar */
--bg-glass: rgba(255, 255, 255, 0.90);
--accent: #0078d4;
--accent-dim: rgba(0, 120, 212, 0.10);
--accent-glow: rgba(0, 120, 212, 0.28);
--text-primary: #000000;
--text-secondary:#1b1b1b;
--text-muted: #767676;
--border: #d6d6d6;
--border-subtle: #ebebeb;
--positive: #107c10;
--warning: #ffb900;
--danger: #d13438;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
/* Waveform: Windows blue progress */
--waveform-played: #0078d4;
--waveform-buffered: #80bbea;
--waveform-unplayed: #d6d6d6;
}
/* ── App shell: W10 desktop — clean off-white ── */
[data-theme='w10'] .app-shell {
background: #f3f3f3;
}
/* ── Sidebar: W10 Navigation Pane — flat light gray ── */
[data-theme='w10'] .sidebar {
background: #f3f3f3;
border-right: 1px solid #d6d6d6;
box-shadow: none;
}
/* Nav links: dark on light pane */
[data-theme='w10'] .nav-link { color: #1b1b1b; }
[data-theme='w10'] .nav-link:hover {
background: rgba(0, 0, 0, 0.06);
color: #000000;
}
[data-theme='w10'] .nav-link.active {
background: rgba(0, 120, 212, 0.10);
color: #0078d4;
}
[data-theme='w10'] .nav-link.active::before {
background: #0078d4;
box-shadow: none;
}
/* ── Player bar: W10 Taskbar — near-black flat + accent stripe ── */
[data-theme='w10'] .player-bar {
background: #1c1c1c;
border-top: 2px solid #0078d4;
box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.50);
}
/* Player text: white on dark taskbar */
[data-theme='w10'] .player-track-name { color: #ffffff; font-weight: 500; }
[data-theme='w10'] .player-track-artist { color: rgba(255, 255, 255, 0.65); opacity: 1; }
[data-theme='w10'] .player-time { color: rgba(255, 255, 255, 0.60); }
/* Transport: flat ghosted icons on dark bar */
[data-theme='w10'] .player-btn {
color: rgba(255, 255, 255, 0.82);
background: transparent;
border: none;
box-shadow: none;
}
[data-theme='w10'] .player-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
box-shadow: none;
}
[data-theme='w10'] .player-btn-primary {
background: #0078d4;
color: #ffffff;
border: none;
box-shadow: none;
}
[data-theme='w10'] .player-btn-primary:hover {
background: #1684d8;
box-shadow: none;
}
/* ── Content-area buttons: W10 flat button style ── */
[data-theme='w10'] .btn {
background: #ffffff;
color: #1b1b1b;
border: 1px solid #d6d6d6;
border-radius: 4px;
box-shadow: none;
}
[data-theme='w10'] .btn:hover {
background: #f3f3f3;
border-color: #767676;
box-shadow: none;
}
[data-theme='w10'] .btn-primary {
background: #0078d4;
color: #ffffff;
border: 1px solid transparent;
box-shadow: none;
}
[data-theme='w10'] .btn-primary:hover {
background: #006cbd;
box-shadow: none;
}
[data-theme='w10'] .btn-ghost {
background: transparent;
border-color: transparent;
color: #1b1b1b;
}
[data-theme='w10'] .btn-ghost:hover {
background: rgba(0, 0, 0, 0.06);
border-color: transparent;
}
[data-theme='w10'] .btn-surface {
background: #ffffff;
color: #1b1b1b;
border: 1px solid #d6d6d6;
}
[data-theme='w10'] .btn-surface:hover {
background: #f3f3f3;
border-color: #767676;
}
/* Cards: white, flat border, very subtle lift */
[data-theme='w10'] .glass,
[data-theme='w10'] .card {
background: #ffffff;
border: 1px solid #d6d6d6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Content header */
[data-theme='w10'] .content-header {
background: rgba(255, 255, 255, 0.92);
border-bottom: 1px solid #d6d6d6;
}
/* Album badge: Windows blue */
[data-theme='w10'] .badge,
[data-theme='w10'] .album-detail-badge {
background: #0078d4;
color: #ffffff;
}
/* ── Hover / active states ── */
[data-theme='w10'] .track-row:hover,
[data-theme='w10'] .track-row.context-active {
background: rgba(0, 120, 212, 0.06);
box-shadow: inset 3px 0 0 #0078d4;
}
[data-theme='w10'] .queue-item:hover,
[data-theme='w10'] .queue-item.context-active { background: rgba(0, 120, 212, 0.07); }
[data-theme='w10'] .queue-item.active {
background: rgba(0, 120, 212, 0.10);
border-left: 2px solid #0078d4;
}
[data-theme='w10'] .np-queue-item.active { background: rgba(0, 120, 212, 0.08); }
[data-theme='w10'] .np-queue-item-active { color: #0078d4; }
[data-theme='w10'] .np-queue-item:hover,
[data-theme='w10'] .np-queue-item.context-active { background: rgba(0, 120, 212, 0.05); }
[data-theme='w10'] .np-album-track.active .np-album-track-title,
[data-theme='w10'] .np-album-track.active .np-album-track-num { color: #0078d4; }
[data-theme='w10'] .artist-row:hover { background: rgba(0, 120, 212, 0.06); box-shadow: inset 3px 0 0 #0078d4; }
[data-theme='w10'] .playlist-row:hover { background: rgba(0, 120, 212, 0.06); box-shadow: inset 3px 0 0 #0078d4; }
[data-theme='w10'] .settings-tab:hover { background: rgba(0, 0, 0, 0.05); color: #0078d4; }
[data-theme='w10'] .settings-tab.active { background: rgba(0, 120, 212, 0.10); color: #0078d4; border-color: #0078d4; }
[data-theme='w10'] .queue-tab-btn:hover { background: rgba(0, 0, 0, 0.05); color: #0078d4; }
[data-theme='w10'] .custom-select-trigger:hover { background: rgba(0, 0, 0, 0.05); }
[data-theme='w10'] .custom-select-option:hover { background: rgba(0, 120, 212, 0.08); }
[data-theme='w10'] .artist-ext-link:hover { background: rgba(0, 120, 212, 0.08); border-color: #0078d4; }
/* Connection info: readable on light sidebar */
[data-theme='w10'] .connection-type,
[data-theme='w10'] .connection-server { color: #5d5d5d; }
/* ─────────────────────────────────────────── */
/* ─── Windows Vista — Aero Glass ─── */
/* Pure CSS glass illusion: layered gradients + strategic box-shadows, no backdrop-filter */
[data-theme='wista'] {
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%234870a8%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: #010308;
--ctp-mantle: #050b1a;
--ctp-base: #eef3fc; /* Vista window interior — ice blue-white */
--ctp-surface0: #e2ecf8;
--ctp-surface1: #d5e4f5;
--ctp-surface2: #c5d8f0;
--ctp-overlay0: #a8c4e0;
--ctp-overlay1: #88a8cc;
--ctp-overlay2: #6888b0;
--ctp-text: #0d1d3c; /* deep navy — readable on ice bg */
--ctp-subtext1: #2a4878;
--ctp-subtext0: #4870a8;
/* Vista Aero blue spectrum */
--ctp-mauve: #1565c8; /* Vista Aero blue — THE accent */
--ctp-lavender: #2880e0;
--ctp-sky: #5aaaf8; /* selection/highlight blue */
--ctp-teal: #1890b8;
--ctp-blue: #0e50a8;
--ctp-sapphire: #0848a0;
--ctp-green: #1a8020;
--ctp-yellow: #c8980c;
--ctp-peach: #d06818;
--ctp-pink: #c03878;
--ctp-flamingo: #a82860;
--ctp-rosewater: #c04848;
--ctp-maroon: #903030;
--ctp-red: #c02020;
/* ── Semantic tokens ── */
--bg-app: #eef3fc;
--bg-sidebar: #0e1e3e; /* deep navy glass — Vista nav pane in dark mode */
--bg-card: #e2ecf8;
--bg-hover: rgba(21, 101, 200, 0.09);
--bg-player: #050810; /* Vista taskbar — black glass */
--bg-glass: rgba(238, 243, 252, 0.94);
--accent: #1565c8;
--accent-dim: rgba(21, 101, 200, 0.12);
--accent-glow: rgba(21, 101, 200, 0.40);
--text-primary: #0d1d3c;
--text-secondary:#2a4878;
--text-muted: #4870a8;
--border: rgba(100, 160, 220, 0.45);
--border-subtle: rgba(140, 190, 240, 0.30);
--positive: #1a8020;
--warning: #c8980c;
--danger: #c02020;
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 10px;
/* Waveform: Vista blue progress bar */
--waveform-played: #1565c8;
--waveform-buffered: #5aaaf8;
--waveform-unplayed: #c5d8f0;
}
/* ── App shell: Vista desktop — soft blue gradient ── */
[data-theme='wista'] .app-shell {
background: linear-gradient(160deg, #dce8f8 0%, #e5eefa 50%, #eef3fc 100%);
}
/* ── Sidebar: Aero glass nav pane ──
Three layers: 1) top specular reflection, 2) deep navy base, 3) edge highlight via box-shadow */
[data-theme='wista'] .sidebar {
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.22) 0%,
rgba(255, 255, 255, 0.08) 20%,
rgba(255, 255, 255, 0.00) 55%,
rgba(0, 20, 60, 0.12) 100%
),
linear-gradient(180deg, #1a3368 0%, #0e1e3e 45%, #0a1830 100%);
border-right: 1px solid rgba(120, 180, 255, 0.55);
box-shadow:
inset -1px 0 0 rgba(255, 255, 255, 0.28),
inset 1px 0 0 rgba(255, 255, 255, 0.10),
2px 0 18px rgba(0, 0, 0, 0.40);
}
/* Sidebar text: light on dark glass */
[data-theme='wista'] .nav-link { color: rgba(210, 228, 255, 0.72); }
[data-theme='wista'] .nav-link:hover {
background: rgba(255, 255, 255, 0.11);
color: #ffffff;
}
[data-theme='wista'] .nav-link.active {
background: rgba(21, 101, 200, 0.38);
color: #ffffff;
}
[data-theme='wista'] .nav-link.active::before {
background: #5aaaf8;
box-shadow: 0 0 10px rgba(90, 170, 248, 0.85);
}
[data-theme='wista'] .sidebar-logo-text,
[data-theme='wista'] .sidebar-bottom a,
[data-theme='wista'] .sidebar-bottom button { color: rgba(210, 228, 255, 0.70); }
[data-theme='wista'] { --logo-color-start: #ffffff; --logo-color-end: #a8ccff; }
[data-theme='wista'] .sidebar-version { color: rgba(210, 228, 255, 0.35); }
/* ── Player bar: Vista Aero taskbar ──
Black glass + intense blue glow on top border — the most iconic Vista element */
[data-theme='wista'] .player-bar {
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.07) 0%,
rgba(255, 255, 255, 0.00) 18%,
rgba(0, 0, 0, 0.00) 82%,
rgba(0, 0, 0, 0.18) 100%
),
linear-gradient(180deg, #0c1828 0%, #050810 100%);
border-top: 1px solid rgba(80, 155, 255, 0.70);
box-shadow:
inset 0 1px 0 rgba(140, 200, 255, 0.55),
inset 0 2px 0 rgba(255, 255, 255, 0.14),
0 -4px 24px rgba(0, 0, 0, 0.70);
}
/* Player text: white on black glass */
[data-theme='wista'] .player-track-name {
color: #ffffff;
text-shadow: 0 0 12px rgba(100, 170, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.60);
font-weight: 600;
}
[data-theme='wista'] .player-track-artist { color: #88b8e8; opacity: 1; }
[data-theme='wista'] .player-time { color: #88b8e8; }
/* ── Transport buttons: Vista glass orbs ──
Top half: white → ice-blue reflection | Bottom half: royal blue deep — the iconic split */
[data-theme='wista'] .player-btn,
[data-theme='wista'] .player-btn-primary {
background: linear-gradient(180deg,
#daeeff 0%,
#b8d8ff 44%,
#3a91f8 50%,
#0f58d7 100%
);
color: #ffffff;
border: 1px solid rgba(10, 65, 180, 0.70);
border-radius: 50%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 2px 8px rgba(0, 0, 0, 0.50),
0 0 0 1px rgba(80, 140, 255, 0.20);
}
[data-theme='wista'] .player-btn:hover,
[data-theme='wista'] .player-btn-primary:hover {
background: linear-gradient(180deg,
#e8f4ff 0%,
#c8e4ff 44%,
#58a8ff 50%,
#2070e8 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.80),
0 3px 12px rgba(0, 0, 0, 0.50),
0 0 16px rgba(80, 150, 255, 0.35);
}
/* ── Content-area buttons: Vista dialog glass ── */
[data-theme='wista'] .btn {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(238, 248, 255, 0.95) 44%,
rgba(195, 222, 248, 0.90) 50%,
rgba(168, 205, 240, 0.85) 100%
);
color: #0d1d3c;
border: 1px solid rgba(100, 160, 220, 0.68);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.90),
0 1px 3px rgba(0, 0, 0, 0.18);
}
[data-theme='wista'] .btn:hover {
background: linear-gradient(180deg,
rgba(255, 255, 255, 1.00) 0%,
rgba(245, 252, 255, 0.98) 44%,
rgba(210, 233, 255, 0.95) 50%,
rgba(180, 220, 252, 0.92) 100%
);
border-color: rgba(80, 140, 220, 0.80);
}
[data-theme='wista'] .btn-primary {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(190, 222, 255, 0.92) 44%,
rgba(48, 130, 240, 0.96) 50%,
rgba(15, 78, 210, 0.99) 100%
);
color: #ffffff;
border: 1px solid rgba(10, 60, 180, 0.72);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.88),
0 1px 4px rgba(0, 0, 0, 0.28),
0 0 8px rgba(21, 101, 200, 0.22);
}
[data-theme='wista'] .btn-primary:hover {
background: linear-gradient(180deg,
rgba(255, 255, 255, 1.00) 0%,
rgba(210, 235, 255, 0.95) 44%,
rgba(68, 148, 255, 0.97) 50%,
rgba(30, 95, 225, 1.00) 100%
);
}
/* ── Cards/panels: Vista frosted glass panel ── */
[data-theme='wista'] .glass,
[data-theme='wista'] .card {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.88) 0%,
rgba(225, 240, 255, 0.82) 100%
);
border: 1px solid rgba(130, 182, 232, 0.60);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
0 2px 8px rgba(21, 101, 200, 0.10);
}
/* ── Content header: Vista titlebar / toolbar band ── */
[data-theme='wista'] .content-header {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.92) 0%,
rgba(232, 245, 255, 0.72) 100%
);
border-bottom: 1px solid rgba(150, 198, 238, 0.65);
box-shadow: 0 1px 4px rgba(21, 101, 200, 0.10);
}
/* ── Album badge: Vista blue pill ── */
[data-theme='wista'] .badge,
[data-theme='wista'] .album-detail-badge {
background: #1565c8;
color: #ffffff;
}
/* ── Scrollbar: Vista light-blue style ── */
[data-theme='wista'] ::-webkit-scrollbar-track { background: #d5e4f5; }
[data-theme='wista'] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #90b8e0 0%, #6898c8 100%); border-radius: 4px; }
[data-theme='wista'] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a8ccf0 0%, #80a8e0 100%); }
/* ── Hover / active states: Vista selection blue ── */
[data-theme='wista'] .track-row:hover,
[data-theme='wista'] .track-row.context-active {
background: rgba(21, 101, 200, 0.08);
box-shadow: inset 3px 0 0 #1565c8;
}
[data-theme='wista'] .queue-item:hover,
[data-theme='wista'] .queue-item.context-active { background: rgba(90, 170, 248, 0.18); }
[data-theme='wista'] .queue-item.active {
background: rgba(21, 101, 200, 0.28);
border-left: 2px solid #5aaaf8;
}
[data-theme='wista'] .np-queue-item.active { background: rgba(21, 101, 200, 0.10); }
[data-theme='wista'] .np-queue-item-active { color: #1565c8; }
[data-theme='wista'] .np-queue-item:hover,
[data-theme='wista'] .np-queue-item.context-active { background: rgba(21, 101, 200, 0.07); }
[data-theme='wista'] .np-album-track.active .np-album-track-title,
[data-theme='wista'] .np-album-track.active .np-album-track-num { color: #1565c8; }
[data-theme='wista'] .artist-row:hover { background: rgba(21, 101, 200, 0.07); box-shadow: inset 3px 0 0 #1565c8; }
[data-theme='wista'] .playlist-row:hover { background: rgba(21, 101, 200, 0.07); box-shadow: inset 3px 0 0 #1565c8; }
[data-theme='wista'] .settings-tab:hover { background: rgba(21, 101, 200, 0.08); color: #1565c8; }
[data-theme='wista'] .settings-tab.active { background: rgba(21, 101, 200, 0.14); color: #1565c8; border-color: #1565c8; }
[data-theme='wista'] .queue-tab-btn:hover { background: rgba(21, 101, 200, 0.08); color: #1565c8; }
[data-theme='wista'] .custom-select-trigger:hover { background: rgba(21, 101, 200, 0.08); }
[data-theme='wista'] .custom-select-option:hover { background: rgba(21, 101, 200, 0.12); }
[data-theme='wista'] .artist-ext-link:hover { background: rgba(21, 101, 200, 0.10); border-color: #1565c8; }
/* ── Queue: dark glass sidebar → light text ── */
[data-theme='wista'] .queue-item-title { color: rgba(210, 228, 255, 0.90); }
[data-theme='wista'] .queue-item-artist,
[data-theme='wista'] .queue-item-duration { color: rgba(170, 205, 250, 0.55); }
[data-theme='wista'] .queue-item.active .queue-item-artist,
[data-theme='wista'] .queue-item.active .queue-item-duration { color: rgba(190, 218, 255, 0.75); }
[data-theme='wista'] .queue-divider span { color: rgba(180, 210, 255, 0.38) !important; }
[data-theme='wista'] .queue-current-info h3 { color: rgba(220, 235, 255, 0.92); }
[data-theme='wista'] .queue-current-sub { color: rgba(180, 210, 252, 0.58); }
[data-theme='wista'] .queue-tab-btn { color: rgba(200, 220, 255, 0.62); }
[data-theme='wista'] .queue-tab-btn.active { color: #5aaaf8; }
[data-theme='wista'] .queue-round-btn.active { color: #050810; }
/* Connection indicators: muted Vista blue on light bg */
[data-theme='wista'] .connection-type,
[data-theme='wista'] .connection-server { color: #6090b8; }
/* ─────────────────────────────────────────── */
[data-theme='aqua-quartz'] {
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%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");
--ctp-crust: #b0b8c8;
--ctp-mantle: #c8d0e0;
--ctp-base: #e8e8e8;
--ctp-surface0: #f4f4f4;
--ctp-surface1: #ececec;
--ctp-surface2: #e0e0e0;
--ctp-overlay0: #888888;
--ctp-overlay1: #666666;
--ctp-overlay2: #444444;
--ctp-text: #111111;
--ctp-subtext1: #333333;
--ctp-subtext0: #555555;
--ctp-mauve: #3165c4;
--ctp-lavender: #6699dd;
--ctp-green: #28c941;
--ctp-teal: #17a2b8;
--ctp-sky: #5ac8fa;
--ctp-blue: #2060c0;
--ctp-sapphire: #1a4fa0;
--ctp-pink: #ff2d55;
--ctp-flamingo: #ff3b30;
--ctp-rosewater:#ffcc00;
--ctp-yellow: #ffcc00;
--ctp-peach: #ff9500;
--ctp-maroon: #af52de;
--ctp-red: #ff3b30;
/* Aluminium app bg, blue sidebar token (overridden below) */
--bg-app: #e8e8e8;
--bg-sidebar: #5a7ab8;
--bg-card: #f4f4f4;
--bg-hover: rgba(49, 101, 196, 0.12);
--bg-player: #c0c0c0;
--bg-glass: rgba(232, 232, 232, 0.85);
--accent: #3165c4;
--accent-dim: rgba(49, 101, 196, 0.15);
--accent-glow: rgba(49, 101, 196, 0.45);
--volume-accent: #3165c4;
--text-primary: #111111;
--text-secondary:#333333;
--text-muted: #777777;
--border: #a0a0a0;
--border-subtle: #cccccc;
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 999px;
}
/* Aluminium pinstripe background */
[data-theme='aqua-quartz'] .app-shell {
background: #e8e8e8;
}
/* Iconic Aqua blue Source List sidebar */
[data-theme='aqua-quartz'] .sidebar {
background: linear-gradient(to bottom, #7090c8 0%, #5a78b8 35%, #4a68a8 70%, #4060a0 100%);
border-right: 1px solid #3a5590;
}
/* White text/icons in sidebar */
[data-theme='aqua-quartz'] .sidebar,
[data-theme='aqua-quartz'] .nav-link,
[data-theme='aqua-quartz'] .sidebar-logo-text,
[data-theme='aqua-quartz'] .sidebar-section-label,
[data-theme='aqua-quartz'] .nav-section-label {
color: rgba(255, 255, 255, 0.9) !important;
}
[data-theme='aqua-quartz'] .nav-link {
color: rgba(255, 255, 255, 0.85) !important;
}
[data-theme='aqua-quartz'] .nav-link:hover {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
}
/* Active nav: white pill with blue-tinted text */
[data-theme='aqua-quartz'] .nav-link.active {
background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(240,245,255,0.9)) !important;
color: #1a4a9c !important;
border-radius: var(--radius-full) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.9);
}
[data-theme='aqua-quartz'] .nav-link.active svg {
color: #1a4a9c !important;
}
/* Brushed aluminum player bar */
[data-theme='aqua-quartz'] .player-bar {
background: linear-gradient(
to bottom,
#d8d8d8 0%,
#d0d0d0 15%,
#c0c0c0 50%,
#b4b4b4 85%,
#acacac 100%
);
border-top: 1px solid #909090;
box-shadow: 0 -1px 0 rgba(255,255,255,0.6) inset;
}
[data-theme='aqua-quartz'] .player-track-name,
[data-theme='aqua-quartz'] .player-track-artist,
[data-theme='aqua-quartz'] .player-time {
color: #111111 !important;
}
/* All buttons get rounded pill shape */
[data-theme='aqua-quartz'] .btn {
border-radius: var(--radius-full) !important;
}
/* Aluminium jelly — secondary/surface/ghost buttons */
[data-theme='aqua-quartz'] .btn-surface,
[data-theme='aqua-quartz'] .btn-ghost {
background: linear-gradient(
to bottom,
rgba(255,255,255,0.95) 0%,
#ececec 20%,
#d4d4d4 48%,
#c4c4c4 52%,
#d0d0d0 80%,
#e0e0e0 100%
) !important;
border: 1px solid #909090 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
color: #111111 !important;
text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme='aqua-quartz'] .btn-surface:hover,
[data-theme='aqua-quartz'] .btn-ghost:hover {
filter: brightness(1.05);
box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.85);
background: linear-gradient(
to bottom,
rgba(255,255,255,0.95) 0%,
#f0f0f0 20%,
#dadada 48%,
#cacaca 52%,
#d6d6d6 80%,
#e4e4e4 100%
) !important;
}
/* Authentic Aqua blue jelly — primary buttons */
[data-theme='aqua-quartz'] .btn-primary,
[data-theme='aqua-quartz'] .player-btn-primary {
background: linear-gradient(
to bottom,
rgba(255,255,255,0.95) 0%,
rgba(160,195,255,0.9) 20%,
#3165c4 48%,
#1a4aaa 52%,
#2555bb 75%,
#4a7ad4 100%
) !important;
border: 1px solid #1040a0 !important;
border-radius: var(--radius-full) !important;
box-shadow: 0 2px 8px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255,255,255,0.7);
color: white !important;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
[data-theme='aqua-quartz'] .btn-primary:hover,
[data-theme='aqua-quartz'] .player-btn-primary:hover {
filter: brightness(1.08);
box-shadow: 0 3px 12px rgba(49, 101, 196, 0.6), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Aqua progress/seek track + fill */
[data-theme='aqua-quartz'] .progress-bar-track {
background: linear-gradient(to bottom, #b0b0b0, #d0d0d0);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
[data-theme='aqua-quartz'] .progress-bar-fill {
background: linear-gradient(
to bottom,
rgba(255,255,255,0.85) 0%,
#6699ee 25%,
#3165c4 55%,
#1a4aaa 56%,
#4070cc 100%
);
box-shadow: 0 0 6px rgba(49, 101, 196, 0.5);
border-radius: 999px;
}
/* Cards with subtle aluminium feel */
[data-theme='aqua-quartz'] .card {
background: #f4f4f4;
border: 1px solid #c0c0c0;
box-shadow: 0 1px 4px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
}
/* Queue / panels on light aluminium bg */
[data-theme='aqua-quartz'] .queue-panel,
[data-theme='aqua-quartz'] .queue-header {
background: #e8e8e8;
color: #111111;
}
[data-theme='aqua-quartz'] .queue-item {
color: #111111;
}
[data-theme='aqua-quartz'] .queue-item-artist,
[data-theme='aqua-quartz'] .queue-item-sub {
color: #555555;
}
/* Queue round toolbar buttons — aluminium jelly */
[data-theme='aqua-quartz'] .queue-round-btn {
background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, #ececec 20%, #d4d4d4 48%, #c4c4c4 52%, #d0d0d0 100%);
border: 1px solid #909090;
box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.85);
color: #333333;
}
[data-theme='aqua-quartz'] .queue-round-btn:hover:not(:disabled) {
background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, #f0f0f0 20%, #dadada 48%, #cacaca 52%, #d6d6d6 100%);
color: #111111;
box-shadow: 0 2px 6px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.85);
}
[data-theme='aqua-quartz'] .queue-round-btn.active {
background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(160,195,255,0.9) 20%, #3165c4 48%, #1a4aaa 52%, #4a7ad4 100%);
border: 1px solid #1040a0;
color: #ffffff;
box-shadow: 0 2px 8px rgba(49,101,196,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Hero play button — blue jelly */
[data-theme='aqua-quartz'] .hero-play-btn {
background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(160,195,255,0.9) 20%, #3165c4 48%, #1a4aaa 52%, #2555bb 75%, #4a7ad4 100%);
border: 1px solid #1040a0;
border-radius: var(--radius-full);
box-shadow: 0 2px 8px rgba(49,101,196,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
color: white;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
[data-theme='aqua-quartz'] .hero-play-btn:hover {
background: linear-gradient(to bottom, rgba(255,255,255,0.98) 0%, rgba(185,215,255,0.95) 20%, #3a72d8 48%, #2058c0 52%, #2d62cc 75%, #5585e0 100%);
filter: brightness(1.08);
box-shadow: 0 3px 12px rgba(49,101,196,0.6), inset 0 1px 0 rgba(255,255,255,0.7);
transform: scale(1.02);
}
/* Album card hover play button — blue jelly */
[data-theme='aqua-quartz'] .album-card-details-btn {
background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(160,195,255,0.9) 20%, #3165c4 48%, #1a4aaa 52%, #4a7ad4 100%);
border: 1px solid #1040a0;
box-shadow: 0 3px 10px rgba(49,101,196,0.5), inset 0 1px 0 rgba(255,255,255,0.7);
color: white;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
/* ─── Spider-Tech — Spider-Man ─── */
[data-theme='spider-tech'] {
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%23E62429%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 — suit red, night-sky navy, web black */
--ctp-crust: #060408;
--ctp-mantle: #0a0610;
--ctp-base: #0e0c18;
--ctp-surface0: #181428;
--ctp-surface1: #241e3a;
--ctp-surface2: #302848;
--ctp-overlay0: #4a3e68;
--ctp-overlay1: #6a5888;
--ctp-overlay2: #9080a8;
--ctp-text: #f0ecf8;
--ctp-subtext1: #d0c8e0;
--ctp-subtext0: #a898c0;
--ctp-mauve: #E62429;
--ctp-lavender: #ff4a50;
--ctp-pink: #ff4a50;
--ctp-flamingo: #cc1a1f;
--ctp-rosewater:#f0ecf8;
--ctp-green: #4adf80;
--ctp-teal: #3ab8d0;
--ctp-sky: #4a88ff;
--ctp-blue: #1e52c8;
--ctp-sapphire: #1e52c8;
--ctp-yellow: #f0c030;
--ctp-peach: #E62429;
--ctp-maroon: #8b0010;
--ctp-red: #E62429;
--bg-app: #0e0c18;
--bg-sidebar: #0a0610;
--bg-card: #181428;
--bg-hover: #241e3a;
--bg-player: #060408;
--bg-glass: rgba(10, 6, 16, 0.92);
--accent: #E62429;
--accent-dim: rgba(230, 36, 41, 0.14);
--accent-glow: rgba(230, 36, 41, 0.38);
--text-primary: #f0ecf8;
--text-secondary:#9080a8;
--text-muted: #a898c0;
--border: rgba(230, 36, 41, 0.18);
--border-subtle: rgba(230, 36, 41, 0.08);
--border-dropdown: rgba(230, 36, 41, 0.30);
--shadow-dropdown: rgba(0, 0, 0, 0.92);
--positive: #4adf80;
--warning: #f0c030;
--danger: #E62429;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
}
/* App shell — Into the Spider-Verse comic halftone dots */
[data-theme='spider-tech'] .app-shell {
background-image: radial-gradient(
circle,
rgba(230, 36, 41, 0.055) 1px,
transparent 1px
);
background-size: 14px 14px;
}
/* Sidebar — CSS spider web radiating from top-left corner */
[data-theme='spider-tech'] .sidebar {
background: #080510;
border-right: 1px solid rgba(230, 36, 41, 0.22);
background-image:
repeating-radial-gradient(
circle at 0% 0%,
transparent 0px,
transparent 38px,
rgba(230, 36, 41, 0.10) 39px,
rgba(230, 36, 41, 0.10) 40px
),
repeating-conic-gradient(
from 0deg at 0% 0%,
transparent 0deg,
transparent 19deg,
rgba(230, 36, 41, 0.07) 19deg,
rgba(230, 36, 41, 0.07) 20deg
);
}
/* Player bar — deep black with red suit border + glow */
[data-theme='spider-tech'] .player-bar {
background: #060408;
border-top: 2px solid #E62429;
box-shadow: 0 -6px 28px rgba(230, 36, 41, 0.20), 0 -1px 0 rgba(0,0,0,0.9);
}
/* Track name — Spider-Man red, bold */
[data-theme='spider-tech'] .player-track-name {
color: #E62429;
font-weight: 700;
text-shadow: 0 0 10px rgba(230,36,41,0.45), 0 0 24px rgba(230,36,41,0.20);
}
/* Artist name — Spider suit blue */
[data-theme='spider-tech'] .player-artist-name {
color: #4a88ff;
}
/* Nav active — red left bar */
[data-theme='spider-tech'] .nav-link.active {
background: linear-gradient(90deg, rgba(230,36,41,0.18) 0%, transparent 100%);
border-left: 3px solid #E62429;
color: #E62429;
}
[data-theme='spider-tech'] .nav-link:hover:not(.active) {
background: linear-gradient(90deg, rgba(230,36,41,0.08) 0%, transparent 100%);
border-left: 3px solid rgba(230,36,41,0.35);
}
/* Content header */
[data-theme='spider-tech'] .content-header {
border-bottom: 1px solid rgba(230,36,41,0.14);
}
/* Cards — red border glow on hover */
[data-theme='spider-tech'] .album-card:hover,
[data-theme='spider-tech'] .artist-card:hover {
box-shadow: 0 0 0 1px rgba(230,36,41,0.55), 0 4px 20px rgba(230,36,41,0.16);
}
/* Track / queue rows */
[data-theme='spider-tech'] .track-row:hover,
[data-theme='spider-tech'] .queue-item:hover {
box-shadow: inset 2px 0 0 #E62429;
background: rgba(230,36,41,0.06);
}
/* Primary play button — suit red */
[data-theme='spider-tech'] .player-btn-primary {
background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
color: #ffffff;
box-shadow: 0 0 16px rgba(230,36,41,0.50);
border: 1px solid #9c1018;
}
[data-theme='spider-tech'] .player-btn-primary:hover {
background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%);
box-shadow: 0 0 26px rgba(230,36,41,0.72);
}
/* btn-primary */
[data-theme='spider-tech'] .btn-primary {
background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
color: #ffffff;
border: 1px solid #9c1018;
}
[data-theme='spider-tech'] .btn-primary:hover {
background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%);
}
/* Hero play button */
[data-theme='spider-tech'] .hero-play-btn {
background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
color: #ffffff;
border: 1px solid #9c1018;
box-shadow: 0 2px 16px rgba(230,36,41,0.50);
transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
[data-theme='spider-tech'] .hero-play-btn:hover {
background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%);
box-shadow: 0 4px 26px rgba(230,36,41,0.72);
transform: scale(1.02);
}
/* Album card overlay button */
[data-theme='spider-tech'] .album-card-details-btn {
background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%);
color: #ffffff;
border: 1px solid #9c1018;
box-shadow: 0 2px 12px rgba(230,36,41,0.45);
}
/* Scrollbar — dark with red thumb */
[data-theme='spider-tech'] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme='spider-tech'] ::-webkit-scrollbar-track {
background: #0a0610;
}
[data-theme='spider-tech'] ::-webkit-scrollbar-thumb {
background: rgba(230,36,41,0.40);
border-radius: 3px;
}
[data-theme='spider-tech'] ::-webkit-scrollbar-thumb:hover {
background: #E62429;
}
/* ── Jayfin (Mediaplayer) ─────────────────────────────────────── */
[data-theme='jayfin'] {
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%23AA5CC3%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");
/* ── Jellyfin Palette ── */
--ctp-crust: #050505;
--ctp-mantle: #0c0c0c;
--ctp-base: #141414;
--ctp-surface0: #1e1e1e;
--ctp-surface1: #282828;
--ctp-surface2: #333333;
--ctp-overlay0: #505050;
--ctp-overlay1: #787878;
--ctp-overlay2: #a8a8a8;
--ctp-text: #ffffff;
--ctp-subtext1: #e8e8e8;
--ctp-subtext0: #c0c0c0;
/* Jellyfin Lila als Hauptakzent, Cyan als Sekundärfarbe */
--ctp-mauve: #AA5CC3;
--ctp-lavender: #bf7ed4;
--ctp-green: #2ed573;
--ctp-teal: #00c8dc;
--ctp-sky: #00A4DC;
--ctp-blue: #0088cc;
--ctp-sapphire: #0060a0;
--ctp-pink: #c070d8;
--ctp-flamingo: #d488e8;
--ctp-rosewater:#e8b8f8;
--ctp-yellow: #ffd060;
--ctp-peach: #ff9500;
--ctp-maroon: #cc3355;
--ctp-red: #ff4444;
/* ── Semantische Tokens ── */
--bg-app: #141414;
--bg-sidebar: #0c0c0c;
--bg-card: #1e1e1e;
--bg-hover: rgba(170, 92, 195, 0.1);
--bg-player: #050505;
--bg-glass: rgba(14, 14, 14, 0.88);
--accent: #AA5CC3;
--accent-dim: rgba(170, 92, 195, 0.15);
--accent-glow: rgba(170, 92, 195, 0.4);
--volume-accent: #AA5CC3;
--text-primary: #ffffff;
--text-secondary:#c8c8c8;
--text-muted: #888888;
--border: #2a2a2a;
--border-subtle: #1e1e1e;
--positive: #2ed573;
--warning: #ffd060;
--danger: #ff4444;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 14px;
--radius-full: 999px;
}
/* Sidebar mit dezenter Tiefe */
[data-theme='jayfin'] .sidebar {
background: #0c0c0c;
border-right: 1px solid #1e1e1e;
}
/* Aktiver Nav-Link: Lila-Akzent mit linkem Balken */
[data-theme='jayfin'] .nav-link.active {
background: rgba(170, 92, 195, 0.12);
color: #AA5CC3;
border-left: 3px solid #AA5CC3;
}
[data-theme='jayfin'] .nav-link.active svg {
color: #AA5CC3;
}
/* Player Bar: tiefes Schwarz mit Jellyfin-Brand-Gradient als Oberkante */
[data-theme='jayfin'] .player-bar {
background: #050505;
border-top: 2px solid transparent;
border-image: linear-gradient(to right, #00A4DC, #AA5CC3) 1;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
}
/* Progress fill: Gradient Cyan → Lila */
[data-theme='jayfin'] .progress-bar-fill {
background: linear-gradient(to right, #00A4DC 0%, #AA5CC3 100%);
box-shadow: 0 0 8px rgba(170, 92, 195, 0.5);
}
/* Cards */
[data-theme='jayfin'] .card {
background: #1e1e1e;
border: 1px solid #2a2a2a;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Btn-primary: Jellyfin Lila */
[data-theme='jayfin'] .btn-primary,
[data-theme='jayfin'] .player-btn-primary,
[data-theme='jayfin'] .hero-play-btn {
background: #AA5CC3;
color: #ffffff;
border: none;
box-shadow: 0 2px 12px rgba(170, 92, 195, 0.35);
}
[data-theme='jayfin'] .btn-primary:hover,
[data-theme='jayfin'] .player-btn-primary:hover,
[data-theme='jayfin'] .hero-play-btn:hover {
background: #be70d8;
box-shadow: 0 4px 18px rgba(170, 92, 195, 0.5);
filter: none;
}
/* Album card hover play button */
[data-theme='jayfin'] .album-card-details-btn {
background: #AA5CC3;
color: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
[data-theme='jayfin'] .album-card-details-btn:hover {
background: #be70d8;
}
/* Queue round buttons */
[data-theme='jayfin'] .queue-round-btn.active {
background: #AA5CC3;
color: #ffffff;
box-shadow: 0 0 10px rgba(170, 92, 195, 0.4);
}
/* Connection indicators: schwarz auf warmem Grau */
[data-theme='w98'] .connection-type,
[data-theme='w98'] .connection-server { color: #000000; }
/* ─── MS-DOS ─── */
@keyframes dos-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
[data-theme='dos'] {
color-scheme: dark;
font-family: 'Courier New', Courier, 'Lucida Console', monospace;
--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%23AAAAAA%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");
/* Pure ANSI color palette */
--ctp-crust: #000000;
--ctp-mantle: #000080;
--ctp-base: #0000AA;
--ctp-surface0: #000080;
--ctp-surface1: #0000AA;
--ctp-surface2: #0000CC;
--ctp-overlay0: #8888AA;
--ctp-overlay1: #BBBBCC;
--ctp-overlay2: #E8E8E8;
--ctp-text: #E8E8E8;
--ctp-subtext1: #BBBBCC;
--ctp-subtext0: #8888AA;
--ctp-mauve: #FF55FF;
--ctp-lavender: #FF55FF;
--ctp-pink: #FF55FF;
--ctp-flamingo: #FF5555;
--ctp-rosewater:#FFFFFF;
--ctp-green: #55FF55;
--ctp-teal: #55FFFF;
--ctp-sky: #55FFFF;
--ctp-blue: #5555FF;
--ctp-sapphire: #5555FF;
--ctp-yellow: #FFFF55;
--ctp-peach: #FF5555;
--ctp-maroon: #AA0000;
--ctp-red: #FF5555;
--bg-app: #0000AA;
--bg-sidebar: #000080;
--bg-card: #000080;
--bg-hover: rgba(170, 170, 170, 0.15);
--bg-player: #000000;
--bg-glass: rgba(0, 0, 128, 0.95);
--accent: #FFFF55;
--accent-dim: rgba(255, 255, 85, 0.15);
--accent-glow: rgba(255, 255, 85, 0.3);
--text-primary: #E8E8E8;
--text-secondary:#BBBBCC;
--text-muted: #8888AA;
--border: #AAAAAA;
--border-subtle: #4444AA;
--border-dropdown: #AAAAAA;
--shadow-dropdown: rgba(0, 0, 0, 0.95);
--positive: #55FF55;
--warning: #FFFF55;
--danger: #FF5555;
/* Square everything — no rounded corners in DOS */
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-full: 0px;
}
/* Monospace override — html inherits to most elements; form controls need explicit override */
[data-theme='dos'] button,
[data-theme='dos'] input,
[data-theme='dos'] textarea,
[data-theme='dos'] select {
font-family: 'Courier New', Courier, 'Lucida Console', monospace;
}
/* Sidebar — dark navy with CRT scanlines, thick grey right border like a DOS panel edge */
[data-theme='dos'] .sidebar {
background-color: #000080;
background-image: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.20) 0px,
rgba(0, 0, 0, 0.20) 1px,
transparent 1px,
transparent 3px
);
border-right: 2px solid #AAAAAA;
}
/* Active nav — classic DOS inverted selection */
[data-theme='dos'] .nav-link.active {
background: #AAAAAA;
color: #000080;
border-left: none;
font-weight: 700;
}
[data-theme='dos'] .nav-link:hover:not(.active) {
background: rgba(170, 170, 170, 0.18);
color: #FFFF55;
}
/* Player bar — pure black, the C:\> command prompt */
[data-theme='dos'] .player-bar {
background-color: #000000;
background-image: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.20) 0px,
rgba(0, 0, 0, 0.20) 1px,
transparent 1px,
transparent 3px
);
border-top: 2px solid #AAAAAA;
box-shadow: none;
}
/* Track name — bright yellow with blinking block cursor */
[data-theme='dos'] .player-track-name {
color: #FFFF55;
text-shadow: none;
}
[data-theme='dos'] .player-track-name::after {
content: '\258B';
animation: dos-blink 1s step-end infinite;
margin-left: 3px;
font-size: 0.8em;
vertical-align: baseline;
}
/* Artist name — bright cyan (ANSI 11) */
[data-theme='dos'] .player-artist-name {
color: #55FFFF;
}
/* Content header — simple grey border, no ornate gradient */
[data-theme='dos'] .content-header {
border-bottom: 1px solid #AAAAAA;
}
/* Album/artist cards — flat navy panels with grey border */
[data-theme='dos'] .album-card,
[data-theme='dos'] .artist-card {
background: #000080;
border: 1px solid #AAAAAA;
box-shadow: none;
}
[data-theme='dos'] .album-card:hover,
[data-theme='dos'] .artist-card:hover {
background: #0000AA;
border-color: #FFFFFF;
box-shadow: none;
}
/* Track / queue row hover — inverted DOS selection */
[data-theme='dos'] .track-row:hover,
[data-theme='dos'] .queue-item:hover {
background: #AAAAAA !important;
color: #000080;
box-shadow: none;
}
/* Primary play button — flat grey, sharp, DOS dialog style */
[data-theme='dos'] .player-btn-primary {
background: #AAAAAA;
color: #000000;
border: 2px solid #FFFFFF;
box-shadow: none;
}
[data-theme='dos'] .player-btn-primary:hover {
background: #FFFFFF;
color: #000000;
box-shadow: none;
transform: none;
}
/* btn-primary — uppercase DOS dialog button */
[data-theme='dos'] .btn-primary {
background: #AAAAAA;
color: #000000;
border: 1px solid #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.06em;
box-shadow: none;
}
[data-theme='dos'] .btn-primary:hover {
background: #FFFFFF;
color: #000000;
box-shadow: none;
}
/* btn-surface */
[data-theme='dos'] .btn-surface,
[data-theme='dos'] .btn {
border: 1px solid #AAAAAA;
box-shadow: none;
}
/* Hero play button */
[data-theme='dos'] .hero-play-btn {
background: #AAAAAA;
color: #000000;
border: 2px solid #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.08em;
box-shadow: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
[data-theme='dos'] .hero-play-btn:hover {
background: #FFFFFF;
color: #000000;
transform: none;
filter: none;
box-shadow: none;
}
/* Album card overlay play button */
[data-theme='dos'] .album-card-details-btn {
background: #AAAAAA;
color: #000000;
border: 2px solid #FFFFFF;
box-shadow: none;
}
[data-theme='dos'] .album-card-details-btn:hover {
background: #FFFFFF;
color: #000000;
}
/* Queue round buttons — square in DOS */
[data-theme='dos'] .queue-round-btn {
border: 1px solid #AAAAAA;
box-shadow: none;
}
[data-theme='dos'] .queue-round-btn.active {
background: #AAAAAA;
color: #000000;
border-color: #FFFFFF;
box-shadow: none;
}
/* Input fields */
[data-theme='dos'] input,
[data-theme='dos'] textarea {
background: #000080;
border: 1px solid #AAAAAA;
border-radius: 0;
}
[data-theme='dos'] input:focus,
[data-theme='dos'] textarea:focus {
border-color: #FFFF55;
outline: none;
box-shadow: none;
}
/* Scrollbar — wide 16px DOS style with sharp thumb */
[data-theme='dos'] ::-webkit-scrollbar {
width: 16px;
height: 16px;
}
[data-theme='dos'] ::-webkit-scrollbar-track {
background: #000080;
border-left: 1px solid #AAAAAA;
}
[data-theme='dos'] ::-webkit-scrollbar-thumb {
background: #AAAAAA;
border-radius: 0;
border: 1px solid #FFFFFF;
}
[data-theme='dos'] ::-webkit-scrollbar-thumb:hover {
background: #FFFFFF;
}
/* ─── Unix Shell ─── */
@keyframes unix-cursor-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
[data-theme='unix'] {
color-scheme: dark;
font-family: 'Courier New', Courier, 'Lucida Console', monospace;
--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%2322C55E%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");
/* ANSI colors mapped to semantic palette */
--ctp-crust: #000000;
--ctp-mantle: #0a0a0a;
--ctp-base: #111111;
--ctp-surface0: #1a1a1a;
--ctp-surface1: #222222;
--ctp-surface2: #2e2e2e;
--ctp-overlay0: #666666;
--ctp-overlay1: #888888;
--ctp-overlay2: #AAAAAA;
--ctp-text: #C8C8C8;
--ctp-subtext1: #AAAAAA;
--ctp-subtext0: #888888;
--ctp-mauve: #C678DD;
--ctp-lavender: #5588FF;
--ctp-pink: #E06C75;
--ctp-flamingo: #FF6B6B;
--ctp-rosewater:#FFFFFF;
--ctp-green: #22C55E;
--ctp-teal: #55FFFF;
--ctp-sky: #55FFFF;
--ctp-blue: #5588FF;
--ctp-sapphire: #5588FF;
--ctp-yellow: #E5C07B;
--ctp-peach: #E06C75;
--ctp-maroon: #AA0000;
--ctp-red: #E06C75;
--bg-app: #000000;
--bg-sidebar: #0a0a0a;
--bg-card: #111111;
--bg-hover: #1a1a1a;
--bg-player: #000000;
--bg-glass: rgba(0, 0, 0, 0.92);
--accent: #22C55E;
--accent-dim: rgba(34, 197, 94, 0.10);
--accent-glow: rgba(34, 197, 94, 0.25);
--text-primary: #C8C8C8;
--text-secondary:#999999;
--text-muted: #666666;
--border: #222222;
--border-subtle: #1a1a1a;
--border-dropdown: #333333;
--shadow-dropdown: rgba(0, 0, 0, 0.95);
--positive: #22C55E;
--warning: #E5C07B;
--danger: #E06C75;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-full: 0px;
}
/* Monospace override — html inherits to most elements; form controls need explicit override */
[data-theme='unix'] button,
[data-theme='unix'] input,
[data-theme='unix'] textarea,
[data-theme='unix'] select {
font-family: 'Courier New', Courier, 'Lucida Console', monospace;
}
/* Sidebar — slightly off-black, thin separator */
[data-theme='unix'] .sidebar {
background: #0a0a0a;
border-right: 1px solid #222222;
}
/* Nav active — green left bar */
[data-theme='unix'] .nav-link.active {
background: rgba(34, 197, 94, 0.10);
border-left: 2px solid #22C55E;
color: #22C55E;
}
[data-theme='unix'] .nav-link:hover:not(.active) {
background: rgba(34, 197, 94, 0.05);
color: #C8C8C8;
}
/* Player bar — pure black, thin grey separator */
[data-theme='unix'] .player-bar {
background-color: #000000;
background-image: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.10) 0px,
rgba(0, 0, 0, 0.10) 1px,
transparent 1px,
transparent 2px
);
border-top: 1px solid #222222;
box-shadow: none;
}
/* Track name — white text, green $ prompt prefix, blinking _ cursor */
[data-theme='unix'] .player-track-name {
color: #FFFFFF;
text-shadow: none;
}
[data-theme='unix'] .player-track-name::before {
content: '$ ';
color: #22C55E;
font-weight: 700;
}
[data-theme='unix'] .player-track-name::after {
content: '_';
animation: unix-cursor-blink 1s step-end infinite;
color: #C8C8C8;
margin-left: 1px;
}
/* Artist name — ANSI bright blue (ls directory color) */
[data-theme='unix'] .player-artist-name {
color: #5588FF;
}
/* Content header — minimal grey rule */
[data-theme='unix'] .content-header {
border-bottom: 1px solid #1e1e1e;
}
/* Album/artist cards — dark panel, fine border */
[data-theme='unix'] .album-card,
[data-theme='unix'] .artist-card {
background: #111111;
border: 1px solid #1e1e1e;
box-shadow: none;
}
[data-theme='unix'] .album-card:hover,
[data-theme='unix'] .artist-card:hover {
background: #1a1a1a;
border-color: #22C55E;
box-shadow: none;
}
/* Track / queue row hover — green left accent */
[data-theme='unix'] .track-row:hover,
[data-theme='unix'] .queue-item:hover {
background: rgba(34, 197, 94, 0.06);
box-shadow: inset 2px 0 0 #22C55E;
}
/* Primary play button — solid green */
[data-theme='unix'] .player-btn-primary {
background: #22C55E;
color: #000000;
border: none;
box-shadow: none;
}
[data-theme='unix'] .player-btn-primary:hover {
background: #16A34A;
box-shadow: none;
transform: none;
}
/* btn-primary */
[data-theme='unix'] .btn-primary {
background: #22C55E;
color: #000000;
border: none;
box-shadow: none;
}
[data-theme='unix'] .btn-primary:hover {
background: #16A34A;
box-shadow: none;
}
/* Hero play button */
[data-theme='unix'] .hero-play-btn {
background: #22C55E;
color: #000000;
border: none;
text-transform: lowercase;
letter-spacing: 0.02em;
box-shadow: none;
transition: background var(--transition-fast), transform var(--transition-fast);
}
[data-theme='unix'] .hero-play-btn:hover {
background: #16A34A;
transform: scale(1.02);
filter: none;
box-shadow: none;
}
/* Album card overlay button */
[data-theme='unix'] .album-card-details-btn {
background: #22C55E;
color: #000000;
border: none;
box-shadow: none;
}
[data-theme='unix'] .album-card-details-btn:hover {
background: #16A34A;
}
/* Queue round buttons */
[data-theme='unix'] .queue-round-btn {
border: 1px solid #222222;
box-shadow: none;
}
[data-theme='unix'] .queue-round-btn.active {
background: #22C55E;
color: #000000;
border-color: #22C55E;
box-shadow: none;
}
/* Input fields */
[data-theme='unix'] input,
[data-theme='unix'] textarea {
background: #0a0a0a;
border: 1px solid #222222;
border-radius: 0;
}
[data-theme='unix'] input:focus,
[data-theme='unix'] textarea:focus {
border-color: #22C55E;
outline: none;
box-shadow: none;
}
/* Scrollbar — thin 6px, modern terminal style */
[data-theme='unix'] ::-webkit-scrollbar {
width: 6px;
height: 6px;
}
[data-theme='unix'] ::-webkit-scrollbar-track {
background: #0a0a0a;
}
[data-theme='unix'] ::-webkit-scrollbar-thumb {
background: #333333;
border-radius: 0;
}
[data-theme='unix'] ::-webkit-scrollbar-thumb:hover {
background: #22C55E;
}
/* Connection indicator — server name and Last.fm username */
[data-theme='unix'] .connection-type,
[data-theme='unix'] .connection-server { color: #888888; }
/* Connection indicators + Now Playing username */
[data-theme='spider-tech'] .connection-type,
[data-theme='spider-tech'] .connection-server { color: #9080a8; }
/* Connection indicators */
[data-theme='dos'] .connection-type,
[data-theme='dos'] .connection-server { color: #AAAAAA; }
/* Track row hover — all child text to navy so nothing drowns on grey */
[data-theme='dos'] .track-row:hover .track-title,
[data-theme='dos'] .track-row:hover .track-num,
[data-theme='dos'] .track-row:hover .track-artist,
[data-theme='dos'] .track-row:hover .track-duration,
[data-theme='dos'] .track-row:hover .track-codec,
[data-theme='dos'] .track-row:hover button,
[data-theme='dos'] .track-row.context-active .track-title,
[data-theme='dos'] .track-row.context-active .track-num,
[data-theme='dos'] .track-row.context-active .track-artist,
[data-theme='dos'] .track-row.context-active .track-duration,
[data-theme='dos'] .track-row.context-active .track-codec,
[data-theme='dos'] .track-row.context-active button { color: #000080 !important; background: transparent !important; }
/* ═══════════════════════════════════════════════════════════════════
HORDE — World of Warcraft, Durotar blood-red earth, forge-fire
═══════════════════════════════════════════════════════════════════ */
[data-theme='horde'] {
/* Catppuccin-compatible palette — dark blood-iron */
--ctp-base: #1a0500;
--ctp-mantle: #140300;
--ctp-crust: #0e0200;
--ctp-surface0: #2e0a02;
--ctp-surface1: #3e1104;
--ctp-surface2: #521806;
--ctp-overlay0: #8a5030;
--ctp-overlay1: #a06038;
--ctp-overlay2: #b87048;
--ctp-subtext0: #c88850;
--ctp-subtext1: #d89860;
--ctp-text: #e8d4b8;
--ctp-lavender: #cc4422;
--ctp-blue: #cc2200;
--ctp-sapphire: #aa1800;
--ctp-sky: #dd3300;
--ctp-teal: #cc5500;
--ctp-green: #887722;
--ctp-yellow: #ffd890;
--ctp-peach: #ff8844;
--ctp-maroon: #991100;
--ctp-red: #cc2200;
--ctp-mauve: #cc4422;
--ctp-pink: #dd5533;
--ctp-flamingo: #ee6644;
--ctp-rosewater: #ffaa66;
/* Semantic tokens */
--bg-app: #1a0500;
--bg-sidebar: #110300;
--bg-player: #120400;
--bg-card: #2e0a02;
--bg-card-hover: #3e1104;
--bg-input: #2e0a02;
--bg-overlay: rgba(26,5,0,0.92);
--bg-selection: rgba(204,34,0,0.25);
--border-subtle: rgba(140,60,20,0.30);
--border-default: rgba(180,80,30,0.35);
--border-strong: rgba(220,120,50,0.50);
--text-primary: #e8d4b8;
--text-secondary: #c09070;
--text-muted: #a07848;
--text-disabled: #5a3820;
--accent: #cc2200;
--accent-hover: #e02800;
--accent-glow: rgba(204,34,0,0.35);
--accent-subtle: rgba(204,34,0,0.15);
--danger: #ff4422;
--success: #887722;
--warning: #ff8844;
--nav-active-bg: rgba(204,34,0,0.22);
--nav-active-text: #ffd890;
--scrollbar-thumb: rgba(140,50,10,0.60);
--scrollbar-track: transparent;
--shadow-card: 0 2px 10px rgba(0,0,0,0.70);
--shadow-player: 0 -4px 20px rgba(150,30,0,0.25);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
}
/* Track name — blood-gold glow, as if lit by forge-fire */
[data-theme='horde'] .player-track-name,
[data-theme='horde'] .queue-track-title {
color: #ffd890;
text-shadow: 0 0 16px rgba(220,80,0,0.55), 0 0 4px rgba(220,80,0,0.25);
}
/* Sidebar — iron plate lines + subtle red glow on active */
[data-theme='horde'] .sidebar {
background-color: #110300;
background-image: repeating-linear-gradient(
180deg,
transparent 0px,
transparent 39px,
rgba(100,20,0,0.18) 39px,
rgba(100,20,0,0.18) 40px
);
border-right: 1px solid rgba(140,40,10,0.35);
}
/* Nav active — ember glow */
[data-theme='horde'] .sidebar-nav-item.active {
background: rgba(204,34,0,0.20);
border-left: 3px solid #cc2200;
box-shadow: inset 0 0 12px rgba(204,34,0,0.10);
}
/* Player bar — forge-fire glow from below */
[data-theme='horde'] .player-bar {
background-color: #120400;
background-image: linear-gradient(to bottom, rgba(80,10,0,0.35), transparent);
border-top: 1px solid rgba(180,60,20,0.40);
box-shadow: 0 -4px 24px rgba(150,30,0,0.30);
}
/* App-shell — safe single-pass radial, no repeating */
[data-theme='horde'] .app-shell {
background: radial-gradient(ellipse at 65% 110%, rgba(160,25,0,0.18) 0%, transparent 55%);
}
/* Cards — iron-tinted hover */
[data-theme='horde'] .album-card:hover,
[data-theme='horde'] .artist-card:hover {
box-shadow: 0 4px 18px rgba(180,40,0,0.30);
border-color: rgba(200,60,10,0.50);
}
/* Connection indicators */
[data-theme='horde'] .connection-type,
[data-theme='horde'] .connection-server { color: #a07848; }
/* ═══════════════════════════════════════════════════════════════════
ALLIANCE — World of Warcraft, Stormwind navy, cathedral stone & gold
═══════════════════════════════════════════════════════════════════ */
[data-theme='alliance'] {
/* Catppuccin-compatible palette — deep navy / cathedral stone */
--ctp-base: #06101e;
--ctp-mantle: #040c18;
--ctp-crust: #020810;
--ctp-surface0: #0c1e34;
--ctp-surface1: #122440;
--ctp-surface2: #1a2e50;
--ctp-overlay0: #506888;
--ctp-overlay1: #607898;
--ctp-overlay2: #7088a8;
--ctp-subtext0: #8098b8;
--ctp-subtext1: #90a8c8;
--ctp-text: #d8e8f8;
--ctp-lavender: #5588cc;
--ctp-blue: #3388cc;
--ctp-sapphire: #2266aa;
--ctp-sky: #44aadd;
--ctp-teal: #3399cc;
--ctp-green: #88bb44;
--ctp-yellow: #f0c840;
--ctp-peach: #dd9944;
--ctp-maroon: #aa3322;
--ctp-red: #cc4433;
--ctp-mauve: #7766cc;
--ctp-pink: #997acc;
--ctp-flamingo: #aa88cc;
--ctp-rosewater: #bbaacc;
/* Semantic tokens */
--bg-app: #06101e;
--bg-sidebar: #040c18;
--bg-player: #050e1a;
--bg-card: #0c1e34;
--bg-card-hover: #122440;
--bg-input: #0c1e34;
--bg-overlay: rgba(6,16,30,0.92);
--bg-selection: rgba(51,136,204,0.25);
--border-subtle: rgba(60,100,160,0.28);
--border-default: rgba(80,120,180,0.35);
--border-strong: rgba(120,160,210,0.50);
--text-primary: #d8e8f8;
--text-secondary: #8098b8;
--text-muted: #6880a0;
--text-disabled: #2a3e58;
--accent: #3388cc;
--accent-hover: #4499dd;
--accent-glow: rgba(51,136,204,0.35);
--accent-subtle: rgba(51,136,204,0.15);
--danger: #cc4433;
--success: #88bb44;
--warning: #dd9944;
--nav-active-bg: rgba(51,136,204,0.20);
--nav-active-text: #e8f4ff;
--scrollbar-thumb: rgba(60,110,180,0.55);
--scrollbar-track: transparent;
--shadow-card: 0 2px 10px rgba(0,0,0,0.60);
--shadow-player: 0 -4px 20px rgba(20,70,160,0.22);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
}
/* Track name — paladin holy-light glow */
[data-theme='alliance'] .player-track-name,
[data-theme='alliance'] .queue-track-title {
color: #e8f4ff;
text-shadow: 0 0 14px rgba(80,160,220,0.50), 0 0 4px rgba(80,160,220,0.20);
}
/* Sidebar — cathedral stone columns with gold right-border */
[data-theme='alliance'] .sidebar {
background-color: #040c18;
background-image: repeating-linear-gradient(
180deg,
transparent 0px,
transparent 47px,
rgba(60,100,180,0.14) 47px,
rgba(60,100,180,0.14) 48px
);
border-right: 2px solid rgba(200,170,50,0.30);
}
/* Nav active — royal blue with gold left accent */
[data-theme='alliance'] .sidebar-nav-item.active {
background: rgba(51,136,204,0.20);
border-left: 3px solid #f0c840;
box-shadow: inset 0 0 12px rgba(51,136,204,0.10);
}
/* Player bar — paladin aura glow */
[data-theme='alliance'] .player-bar {
background-color: #050e1a;
background-image: linear-gradient(to bottom, rgba(20,60,130,0.30), transparent);
border-top: 1px solid rgba(100,140,200,0.35);
box-shadow: 0 -4px 22px rgba(30,80,180,0.22);
}
/* App-shell — safe single-pass radial, no repeating */
[data-theme='alliance'] .app-shell {
background: radial-gradient(ellipse at 38% 110%, rgba(25,70,170,0.15) 0%, transparent 55%);
}
/* Cards — blue-glow hover */
[data-theme='alliance'] .album-card:hover,
[data-theme='alliance'] .artist-card:hover {
box-shadow: 0 4px 18px rgba(40,100,200,0.28);
border-color: rgba(80,140,210,0.50);
}
/* Connection indicators */
[data-theme='alliance'] .connection-type,
[data-theme='alliance'] .connection-server { color: #6880a0; }
/* ═══════════════════════════════════════════════════════════════════
W11 — Windows 11 Fluent Design, dark mode, Mica material
═══════════════════════════════════════════════════════════════════ */
[data-theme='w11'] {
/* Catppuccin-compatible palette — Fluent dark neutrals */
--ctp-base: #202020;
--ctp-mantle: #1c1c1c;
--ctp-crust: #181818;
--ctp-surface0: #2c2c2c;
--ctp-surface1: #363636;
--ctp-surface2: #404040;
--ctp-overlay0: #797979;
--ctp-overlay1: #8a8a8a;
--ctp-overlay2: #9a9a9a;
--ctp-subtext0: #ababab;
--ctp-subtext1: #bebebe;
--ctp-text: #f3f3f3;
--ctp-lavender: #6ccbf8;
--ctp-blue: #0078d4;
--ctp-sapphire: #0067c0;
--ctp-sky: #4cc2ff;
--ctp-teal: #00b7c3;
--ctp-green: #6ccb5f;
--ctp-yellow: #f9f1a5;
--ctp-peach: #f7630c;
--ctp-maroon: #e81123;
--ctp-red: #e81123;
--ctp-mauve: #8764b8;
--ctp-pink: #b146c2;
--ctp-flamingo: #e3008c;
--ctp-rosewater: #f5e1ff;
/* Semantic tokens */
--bg-app: #202020;
--bg-sidebar: #2b2b2b;
--bg-player: #1c1c1c;
--bg-card: #2c2c2c;
--bg-card-hover: #363636;
--bg-input: #2c2c2c;
--bg-overlay: rgba(32,32,32,0.92);
--bg-selection: rgba(0,120,212,0.25);
--border-subtle: rgba(255,255,255,0.06);
--border-default: rgba(255,255,255,0.10);
--border-strong: rgba(255,255,255,0.18);
--text-primary: #f3f3f3;
--text-secondary: #9a9a9a;
--text-muted: #797979;
--text-disabled: #4a4a4a;
--accent: #0078d4;
--accent-hover: #1086e0;
--accent-glow: rgba(0,120,212,0.30);
--accent-subtle: rgba(0,120,212,0.15);
--danger: #e81123;
--success: #6ccb5f;
--warning: #f7630c;
--nav-active-bg: rgba(0,120,212,0.18);
--nav-active-text: #f3f3f3;
--scrollbar-thumb: rgba(255,255,255,0.18);
--scrollbar-track: transparent;
--shadow-card: 0 2px 8px rgba(0,0,0,0.50);
--shadow-player: 0 -1px 0 rgba(255,255,255,0.06);
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 20px; --space-6: 24px;
}
/* Track name — clean white, no glow (Fluent is minimal) */
[data-theme='w11'] .player-track-name,
[data-theme='w11'] .queue-track-title {
color: #f3f3f3;
}
/* Sidebar — Mica-like: very slightly lighter than app bg, clean border */
[data-theme='w11'] .sidebar {
background-color: #2b2b2b;
border-right: 1px solid rgba(255,255,255,0.08);
}
/* Nav active — Fluent accent fill, rounded */
[data-theme='w11'] .sidebar-nav-item.active {
background: rgba(0,120,212,0.20);
border-left: 3px solid #0078d4;
}
/* Player bar — taskbar-inspired: very dark, hairline top border */
[data-theme='w11'] .player-bar {
background-color: #1c1c1c;
border-top: 1px solid rgba(255,255,255,0.08);
box-shadow: none;
}
/* App-shell — flat, no gradient (Fluent dark is clean/minimal) */
[data-theme='w11'] .app-shell {
background: none;
}
/* Cards — Fluent hover: slight elevation via border brightening */
[data-theme='w11'] .album-card:hover,
[data-theme='w11'] .artist-card:hover {
box-shadow: 0 4px 14px rgba(0,0,0,0.45);
border-color: rgba(255,255,255,0.16);
}
/* Connection indicators */
[data-theme='w11'] .connection-type,
[data-theme='w11'] .connection-server { color: #797979; }
/* ── Barb & Ken (Games) ─────────────────────────────────────── */
[data-theme='barb-and-ken'] {
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%23FF1B8D%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");
/* Barbieland palette */
--ctp-crust: #07000b;
--ctp-mantle: #110009;
--ctp-base: #1a000f;
--ctp-surface0: #2e0019;
--ctp-surface1: #450026;
--ctp-surface2: #5c0032;
--ctp-overlay0: #8c1455;
--ctp-overlay1: #b82070;
--ctp-overlay2: #d93d8a;
--ctp-text: #ffe6f3;
--ctp-subtext1: #ffb8da;
--ctp-subtext0: #ff80be;
/* Barbie Pink spectrum */
--ctp-mauve: #FF1B8D;
--ctp-pink: #FF69B4;
--ctp-flamingo: #FF1493;
--ctp-rosewater:#FFD6EC;
--ctp-lavender: #FFB3D9;
--ctp-maroon: #c4005e;
--ctp-red: #FF4466;
/* Ken — powder blue as accent-2 */
--ctp-blue: #89CFF0;
--ctp-sapphire: #5BC8F5;
--ctp-sky: #AAE8FF;
--ctp-teal: #70d8f2;
--ctp-green: #a6e3a1;
--ctp-yellow: #FFE4A8;
--ctp-peach: #FFB8D0;
--bg-app: #1a000f;
--bg-sidebar: #110009;
--bg-card: #2e0019;
--bg-hover: rgba(255, 27, 141, 0.12);
--bg-player: #07000b;
--bg-glass: rgba(26, 0, 15, 0.88);
--accent: #FF1B8D;
--accent-dim: rgba(255, 27, 141, 0.15);
--accent-glow: rgba(255, 27, 141, 0.45);
--volume-accent: #89CFF0;
--text-primary: #ffe6f3;
--text-secondary:#ffb8da;
--text-muted: #7a3055;
--border: rgba(255, 27, 141, 0.28);
--border-subtle: rgba(255, 27, 141, 0.12);
--border-dropdown: rgba(255, 27, 141, 0.3);
--shadow-dropdown: rgba(7, 0, 11, 0.9);
--positive: #a6e3a1;
--warning: #FFE4A8;
--danger: #FF4466;
/* Bubbly, soft rounding — very Barbie */
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
}
/* Polka-dot sidebar — Barbie's dreamhouse wallpaper */
[data-theme='barb-and-ken'] .sidebar {
background:
radial-gradient(circle, rgba(255, 27, 141, 0.18) 2px, transparent 2px),
radial-gradient(circle, rgba(137, 207, 240, 0.10) 2px, transparent 2px),
linear-gradient(180deg, #110009 0%, #1a000f 100%);
background-size: 22px 22px, 22px 22px, 100% 100%;
background-position: 0 0, 11px 11px, 0 0;
border-right: 1px solid rgba(255, 27, 141, 0.35);
}
/* Player bar — deep magenta gradient, hot pink top border */
[data-theme='barb-and-ken'] .player-bar {
background: linear-gradient(180deg, #1a000f 0%, #07000b 100%);
border-top: 2px solid #FF1B8D;
box-shadow: 0 -6px 24px rgba(255, 27, 141, 0.18);
}
/* Track name — glitter shimmer */
@keyframes barbie-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
[data-theme='barb-and-ken'] .player-track-name {
background: linear-gradient(
90deg,
#FF1B8D 0%,
#FF69B4 25%,
#ffffff 50%,
#FF69B4 75%,
#FF1B8D 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: barbie-shimmer 4s linear infinite;
font-weight: 700;
}
/* Artist name — Ken blue */
[data-theme='barb-and-ken'] .player-artist-name {
color: #89CFF0;
}
/* Active nav — pink left border glow */
[data-theme='barb-and-ken'] .nav-link.active {
background: linear-gradient(90deg, rgba(255, 27, 141, 0.22) 0%, transparent 100%);
color: #FF69B4 !important;
border-left: 3px solid #FF1B8D;
text-shadow: 0 0 8px rgba(255, 27, 141, 0.4);
}
[data-theme='barb-and-ken'] .nav-link:hover:not(.active) {
background: rgba(255, 27, 141, 0.08);
}
/* Content header — subtle pink rule */
[data-theme='barb-and-ken'] .content-header {
border-bottom: 1px solid rgba(255, 27, 141, 0.2);
background: rgba(26, 0, 15, 0.6);
backdrop-filter: blur(12px);
}
/* Primary buttons — hot pink gradient */
[data-theme='barb-and-ken'] .btn-primary,
[data-theme='barb-and-ken'] .player-btn-primary,
[data-theme='barb-and-ken'] .hero-play-btn {
background: linear-gradient(135deg, #FF1B8D 0%, #FF69B4 100%);
box-shadow: 0 4px 16px rgba(255, 27, 141, 0.45);
color: #fff !important;
border: none;
}
[data-theme='barb-and-ken'] .btn-primary:hover,
[data-theme='barb-and-ken'] .player-btn-primary:hover,
[data-theme='barb-and-ken'] .hero-play-btn:hover {
background: linear-gradient(135deg, #e5007a 0%, #FF1B8D 100%);
box-shadow: 0 6px 22px rgba(255, 27, 141, 0.60);
}
/* Cards — pink border glow on hover */
[data-theme='barb-and-ken'] .album-card,
[data-theme='barb-and-ken'] .artist-card,
[data-theme='barb-and-ken'] .card,
[data-theme='barb-and-ken'] .settings-card {
border: 1px solid rgba(255, 27, 141, 0.18);
}
[data-theme='barb-and-ken'] .album-card:hover,
[data-theme='barb-and-ken'] .artist-card:hover {
border-color: rgba(255, 27, 141, 0.50);
box-shadow: 0 4px 20px rgba(255, 27, 141, 0.20);
}
/* Queue active item */
[data-theme='barb-and-ken'] .queue-item.active {
background: rgba(255, 27, 141, 0.08);
border-left: 3px solid #FF1B8D;
}
[data-theme='barb-and-ken'] .queue-item.active .queue-item-title {
color: #FF69B4;
}
[data-theme='barb-and-ken'] .queue-item.active .queue-item-artist,
[data-theme='barb-and-ken'] .queue-item.active .queue-item-duration {
color: #89CFF0;
}
/* Track rows */
[data-theme='barb-and-ken'] .track-row:hover,
[data-theme='barb-and-ken'] .queue-item:hover {
background: rgba(255, 27, 141, 0.07);
}
/* Album detail header cover button — Ken blue glow on hover */
[data-theme='barb-and-ken'] .album-detail-cover-btn:hover {
box-shadow: 0 0 24px rgba(137, 207, 240, 0.35);
}
/* Star (favorite) icon — gold kept, but override to hot pink */
[data-theme='barb-and-ken'] .color-star-active {
--color-star-active: #FF69B4;
}
/* Scrollbar — thin hot pink */
[data-theme='barb-and-ken'] ::-webkit-scrollbar { width: 5px; }
[data-theme='barb-and-ken'] ::-webkit-scrollbar-track { background: #07000b; }
[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb {
background: #FF1B8D;
border-radius: 3px;
}
[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb:hover {
background: #FF69B4;
}
/* Connection indicators */
[data-theme='barb-and-ken'] .connection-type,
[data-theme='barb-and-ken'] .connection-server { color: #7a3055; }
/* ── Toy Tale (Movies) ──────────────────────────────────────── */
[data-theme='toy-tale'] {
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%23FFD600%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");
/* Warm toy-box palette */
--ctp-crust: #080603;
--ctp-mantle: #100d08;
--ctp-base: #1a1208;
--ctp-surface0: #2a1c10;
--ctp-surface1: #3a2818;
--ctp-surface2: #4a3422;
--ctp-overlay0: #7a5a35;
--ctp-overlay1: #9a7848;
--ctp-overlay2: #b89060;
--ctp-text: #f0e8d8;
--ctp-subtext1: #d8c8a8;
--ctp-subtext0: #c0a880;
/* Woody gold */
--ctp-mauve: #FFD600;
--ctp-yellow: #FFD600;
--ctp-peach: #FFA000;
--ctp-rosewater:#FFE0A0;
/* Buzz Lightyear purple + green */
--ctp-lavender: #9B72D6;
--ctp-blue: #7B4FD6;
--ctp-sapphire: #5c35a0;
--ctp-sky: #4FC3F7;
--ctp-teal: #4CAF50;
--ctp-green: #4CAF50;
--ctp-pink: #FF6B9D;
--ctp-flamingo: #FF4488;
--ctp-maroon: #b71c1c;
--ctp-red: #e53935;
--bg-app: #1a1208;
--bg-sidebar: #1e3a5f; /* Andy's sky-blue wallpaper */
--bg-card: #2a1c10;
--bg-hover: rgba(255, 214, 0, 0.10);
--bg-player: #0d0a06;
--bg-glass: rgba(26, 18, 8, 0.90);
--accent: #FFD600;
--accent-dim: rgba(255, 214, 0, 0.15);
--accent-glow: rgba(255, 214, 0, 0.40);
--volume-accent: #7B4FD6; /* Buzz purple */
--text-primary: #f0e8d8;
--text-secondary:#c8a878;
--text-muted: #6a5030;
--border: rgba(255, 214, 0, 0.22);
--border-subtle: rgba(255, 214, 0, 0.10);
--border-dropdown: rgba(255, 214, 0, 0.25);
--shadow-dropdown: rgba(8, 6, 3, 0.92);
--positive: #4CAF50;
--warning: #FFA000;
--danger: #e53935;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
}
/* Sidebar — Andy's iconic cloud wallpaper in sky blue */
[data-theme='toy-tale'] .sidebar {
background:
radial-gradient(ellipse 70px 42px at 18% 12%, rgba(255,255,255,0.14) 0%, transparent 100%),
radial-gradient(ellipse 45px 28px at 38% 18%, rgba(255,255,255,0.09) 0%, transparent 100%),
radial-gradient(ellipse 80px 50px at 72% 10%, rgba(255,255,255,0.12) 0%, transparent 100%),
radial-gradient(ellipse 55px 32px at 85% 20%, rgba(255,255,255,0.08) 0%, transparent 100%),
radial-gradient(ellipse 65px 40px at 12% 55%, rgba(255,255,255,0.10) 0%, transparent 100%),
radial-gradient(ellipse 48px 30px at 55% 68%, rgba(255,255,255,0.08) 0%, transparent 100%),
radial-gradient(ellipse 72px 44px at 80% 75%, rgba(255,255,255,0.11) 0%, transparent 100%),
linear-gradient(180deg, #1e3a5f 0%, #274d78 100%);
border-right: 1px solid rgba(255, 214, 0, 0.20);
}
/* Nav links need lighter text on blue sidebar */
[data-theme='toy-tale'] .nav-link {
color: rgba(255, 255, 255, 0.75);
}
[data-theme='toy-tale'] .nav-link:hover:not(.active) {
background: rgba(255, 255, 255, 0.10);
color: #fff;
}
[data-theme='toy-tale'] .nav-link.active {
background: rgba(255, 214, 0, 0.20);
border-left: 3px solid #FFD600;
color: #FFD600 !important;
text-shadow: 0 0 8px rgba(255, 214, 0, 0.4);
}
[data-theme='toy-tale'] .sidebar-logo,
[data-theme='toy-tale'] .sidebar-title {
color: #fff;
}
/* Player bar — dark toy-chest wood */
[data-theme='toy-tale'] .player-bar {
background: linear-gradient(180deg, #1a1208 0%, #0d0a06 100%);
border-top: 2px solid #FFD600;
box-shadow: 0 -6px 20px rgba(255, 214, 0, 0.10);
}
/* Track name — Woody sheriff star gold */
[data-theme='toy-tale'] .player-track-name {
color: #FFD600;
text-shadow: 0 0 10px rgba(255, 214, 0, 0.45);
font-weight: 700;
}
/* Artist name — warm cowboy tan */
[data-theme='toy-tale'] .player-artist-name {
color: #c8a060;
}
/* Content header */
[data-theme='toy-tale'] .content-header {
border-bottom: 1px solid rgba(255, 214, 0, 0.18);
}
/* Primary buttons — Woody yellow */
[data-theme='toy-tale'] .btn-primary,
[data-theme='toy-tale'] .player-btn-primary,
[data-theme='toy-tale'] .hero-play-btn {
background: linear-gradient(135deg, #FFD600 0%, #FFA000 100%);
color: #1a1208 !important;
font-weight: 700;
box-shadow: 0 4px 14px rgba(255, 214, 0, 0.35);
border: none;
}
[data-theme='toy-tale'] .btn-primary:hover,
[data-theme='toy-tale'] .player-btn-primary:hover,
[data-theme='toy-tale'] .hero-play-btn:hover {
background: linear-gradient(135deg, #ffe033 0%, #FFD600 100%);
box-shadow: 0 6px 20px rgba(255, 214, 0, 0.50);
}
/* Cards */
[data-theme='toy-tale'] .album-card,
[data-theme='toy-tale'] .artist-card,
[data-theme='toy-tale'] .card,
[data-theme='toy-tale'] .settings-card {
border: 1px solid rgba(255, 214, 0, 0.16);
}
[data-theme='toy-tale'] .album-card:hover,
[data-theme='toy-tale'] .artist-card:hover {
border-color: rgba(255, 214, 0, 0.42);
box-shadow: 0 4px 18px rgba(255, 214, 0, 0.14);
}
/* Track rows */
[data-theme='toy-tale'] .track-row:hover,
[data-theme='toy-tale'] .queue-item:hover {
background: rgba(255, 214, 0, 0.06);
}
/* Queue active item — Buzz purple accent */
[data-theme='toy-tale'] .queue-item.active {
background: rgba(123, 79, 214, 0.12);
border-left: 3px solid #7B4FD6;
}
[data-theme='toy-tale'] .queue-item.active .queue-item-title {
color: #FFD600;
}
[data-theme='toy-tale'] .queue-item.active .queue-item-artist,
[data-theme='toy-tale'] .queue-item.active .queue-item-duration {
color: #9B72D6;
}
/* Scrollbar — Woody brown */
[data-theme='toy-tale'] ::-webkit-scrollbar { width: 6px; }
[data-theme='toy-tale'] ::-webkit-scrollbar-track { background: #0d0a06; }
[data-theme='toy-tale'] ::-webkit-scrollbar-thumb {
background: #7a5a35;
border-radius: 3px;
}
[data-theme='toy-tale'] ::-webkit-scrollbar-thumb:hover {
background: #FFD600;
}
/* Connection indicators */
[data-theme='toy-tale'] .connection-type,
[data-theme='toy-tale'] .connection-server { color: #6a5030; }
/* ─── North Park — South Park ─── */
/* Construction paper flat aesthetic — paper-cream main, Colorado mountain-blue sidebar,
Kenny orange accent, South Park sky blue player accents. Light, no dark mode. */
[data-theme='north-park'] {
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%23FF8C00%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 — Kenny orange, South Park sky, Colorado Rockies ── */
--ctp-crust: #0D2040;
--ctp-mantle: #142D50;
--ctp-base: #F5F1E8; /* construction paper cream */
--ctp-surface0: #EDE9DE;
--ctp-surface1: #E5E0D2;
--ctp-surface2: #D8D2C0;
--ctp-overlay0: #8090A8;
--ctp-overlay1: #5A6A80;
--ctp-overlay2: #4A526A;
--ctp-text: #1A1A2E;
--ctp-subtext1: #3A3A5A;
--ctp-subtext0: #4A526A;
--ctp-mauve: #FF8C00; /* Kenny orange */
--ctp-lavender: #FFB030;
--ctp-pink: #FF6A00;
--ctp-flamingo: #FF5500;
--ctp-rosewater:#FFD080;
--ctp-green: #3D9A2A; /* Kyle's green hat */
--ctp-teal: #2080A0;
--ctp-sky: #87CEEB; /* South Park sky */
--ctp-blue: #1E4080;
--ctp-sapphire: #1B3D6E;
--ctp-yellow: #FFD700;
--ctp-peach: #FF8C00;
--ctp-maroon: #CC4400;
--ctp-red: #CC2200; /* Cartman red */
--bg-app: #F5F1E8; /* construction paper cream */
--bg-sidebar: #1B3D6E; /* Colorado Rockies night blue */
--bg-card: #FFFFFF;
--bg-hover: #EDE9DE;
--bg-player: #102A50; /* deeper mountain blue */
--bg-glass: rgba(245, 241, 232, 0.94);
--accent: #FF8C00; /* Kenny orange */
--accent-dim: rgba(255, 140, 0, 0.13);
--accent-glow: rgba(255, 140, 0, 0.30);
--text-primary: #1A1A2E;
--text-secondary:#4A526A;
--text-muted: #8090A8;
--border: rgba(27, 61, 110, 0.14);
--border-subtle: rgba(27, 61, 110, 0.08);
--border-dropdown: rgba(255, 140, 0, 0.28);
--shadow-dropdown: rgba(0, 20, 60, 0.18);
--positive: #3D9A2A;
--warning: #E8A000;
--danger: #CC2200;
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 10px;
/* Logo: Kenny orange → South Park yellow */
--logo-color-start: #FF8C00;
--logo-color-end: #FFD700;
}
/* Sidebar — Colorado mountain blue, orange nav accents */
[data-theme='north-park'] .sidebar {
background: #1B3D6E;
border-right: none;
}
/* Nav links: default text light on dark sidebar */
[data-theme='north-park'] .nav-link { color: rgba(255, 255, 255, 0.72); }
[data-theme='north-park'] .nav-link.active {
background: rgba(255, 140, 0, 0.18);
border-left: 3px solid #FF8C00;
color: #FF8C00;
}
[data-theme='north-park'] .nav-link:hover:not(.active) {
background: rgba(255, 255, 255, 0.09);
border-left: 3px solid rgba(255, 140, 0, 0.45);
color: rgba(255, 255, 255, 0.95);
}
/* Player bar — deep mountain blue, Kenny orange top stripe */
[data-theme='north-park'] .player-bar {
background: #102A50;
border-top: 3px solid #FF8C00;
box-shadow: 0 -2px 20px rgba(0, 20, 60, 0.30);
}
/* Track name — Kenny orange */
[data-theme='north-park'] .player-track-name { color: #FF8C00; }
/* Artist name — South Park sky blue */
[data-theme='north-park'] .player-artist-name { color: #87CEEB; }
/* Content header — warm paper border */
[data-theme='north-park'] .content-header {
border-bottom: 1px solid rgba(27, 61, 110, 0.12);
}
/* Cards — clean white cutouts with paper shadow */
[data-theme='north-park'] .album-card,
[data-theme='north-park'] .artist-card {
background: #FFFFFF;
box-shadow: 0 1px 4px rgba(0, 20, 60, 0.08);
}
[data-theme='north-park'] .album-card:hover,
[data-theme='north-park'] .artist-card:hover {
box-shadow: 0 0 0 2px #FF8C00, 0 4px 16px rgba(0, 20, 60, 0.12);
}
/* Track rows (light main area) */
[data-theme='north-park'] .track-row:hover {
background: #EDE9DE;
box-shadow: inset 2px 0 0 #FF8C00;
}
/* Queue items (dark blue sidebar — keep bg dark, text stays white) */
[data-theme='north-park'] .queue-item:hover {
background: rgba(255, 255, 255, 0.09);
box-shadow: inset 2px 0 0 #FF8C00;
}
/* Flat primary button — orange, no gradient */
[data-theme='north-park'] .player-btn-primary {
background: #FF8C00;
color: #FFFFFF;
box-shadow: none;
border: none;
}
[data-theme='north-park'] .player-btn-primary:hover {
background: #E07800;
box-shadow: 0 0 14px rgba(255, 140, 0, 0.40);
}
[data-theme='north-park'] .btn-primary {
background: #FF8C00;
color: #FFFFFF;
border: none;
}
[data-theme='north-park'] .btn-primary:hover { background: #E07800; }
[data-theme='north-park'] .hero-play-btn {
background: #FF8C00;
color: #FFFFFF;
border: none;
box-shadow: 0 2px 14px rgba(255, 140, 0, 0.35);
}
[data-theme='north-park'] .hero-play-btn:hover {
background: #E07800;
box-shadow: 0 4px 22px rgba(255, 140, 0, 0.55);
transform: scale(1.02);
}
[data-theme='north-park'] .album-card-details-btn {
background: #FF8C00;
color: #FFFFFF;
border: none;
box-shadow: 0 2px 10px rgba(255, 140, 0, 0.30);
}
/* Badge — orange pill */
[data-theme='north-park'] .badge,
[data-theme='north-park'] .album-detail-badge {
background: #FF8C00;
color: #FFFFFF;
}
/* Settings tabs */
[data-theme='north-park'] .settings-tab:hover { background: rgba(255, 140, 0, 0.08); color: #FF8C00; }
[data-theme='north-park'] .settings-tab.active { background: rgba(255, 140, 0, 0.13); color: #FF8C00; border-color: #FF8C00; }
[data-theme='north-park'] .queue-tab-btn:hover { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.90); }
/* Misc interactive */
[data-theme='north-park'] .custom-select-trigger:hover { background: #EDE9DE; }
[data-theme='north-park'] .custom-select-option:hover { background: rgba(255, 140, 0, 0.10); }
[data-theme='north-park'] .artist-row:hover { background: rgba(255, 140, 0, 0.07); box-shadow: inset 3px 0 0 #FF8C00; }
[data-theme='north-park'] .playlist-row:hover { background: rgba(255, 140, 0, 0.07); box-shadow: inset 3px 0 0 #FF8C00; }
/* Connection indicators — muted on light bg */
[data-theme='north-park'] .connection-type,
[data-theme='north-park'] .connection-server { color: #7A8A9A; }
/* Queue panel — dark sidebar, light text overrides */
[data-theme='north-park'] .queue-panel { background: #1B3D6E; }
[data-theme='north-park'] .queue-item-title { color: rgba(255, 255, 255, 0.90); }
[data-theme='north-park'] .queue-item-artist,
[data-theme='north-park'] .queue-item-duration { color: rgba(255, 255, 255, 0.52); }
[data-theme='north-park'] .queue-item.active .queue-item-artist,
[data-theme='north-park'] .queue-item.active .queue-item-duration { color: rgba(255, 255, 255, 0.72); }
[data-theme='north-park'] .queue-divider span { color: rgba(255, 255, 255, 0.38) !important; }
[data-theme='north-park'] .queue-current-info h3 { color: rgba(255, 255, 255, 0.92); }
[data-theme='north-park'] .queue-current-sub { color: rgba(255, 255, 255, 0.55); }
[data-theme='north-park'] .queue-current-cover .fallback { color: rgba(255, 255, 255, 0.32); }
[data-theme='north-park'] .queue-tab-btn { color: rgba(255, 255, 255, 0.58); }
[data-theme='north-park'] .queue-tab-btn.active { color: #FF8C00; }
[data-theme='north-park'] .queue-round-btn.active { color: #FFFFFF; }
[data-theme='north-park'] .queue-action-btn { color: rgba(255, 255, 255, 0.60); }
[data-theme='north-park'] .queue-action-btn:hover:not(:disabled) { color: rgba(255, 255, 255, 0.92); }
/* Hero album meta (year, genre etc.) — needs high contrast on dark overlay */
[data-theme='north-park'] .album-detail-info { color: rgba(255, 255, 255, 0.80); }
/* Artist name in hero — soften the orange to a warm amber, less glaring */
[data-theme='north-park'] .album-detail-artist,
[data-theme='north-park'] .album-detail-artist-link { color: #FFAB40; }
[data-theme='north-park'] .album-detail-artist-link:hover { color: #FFD080; }
/* np-album-track (Now Playing page) */
[data-theme='north-park'] .np-album-track.active .np-album-track-title,
[data-theme='north-park'] .np-album-track.active .np-album-track-num { color: #FF8C00; }
/* Scrollbar — thin, orange thumb */
[data-theme='north-park'] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme='north-park'] ::-webkit-scrollbar-track { background: #EDE9DE; }
[data-theme='north-park'] ::-webkit-scrollbar-thumb { background: rgba(255, 140, 0, 0.35); border-radius: 3px; }
[data-theme='north-park'] ::-webkit-scrollbar-thumb:hover { background: #FF8C00; }
/* ─── Dark Side of the Moon (inspired) — Pink Floyd ─── */
/* Pure void-black + prism spectrum. No colour except the rainbow.
Accent: spectrum cyan. Spectrum gradient as player-bar top border.
Track name: white (the input light beam). Performance: no patterns, no animations. */
[data-theme='dark-side-of-the-moon'] {
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%239B30FF%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 — void black + prism spectrum ── */
--ctp-crust: #000000;
--ctp-mantle: #010101;
--ctp-base: #050505;
--ctp-surface0: #0A0A0A;
--ctp-surface1: #111111;
--ctp-surface2: #1A1A1A;
--ctp-overlay0: #333333;
--ctp-overlay1: #4A4A4A;
--ctp-overlay2: #686868;
--ctp-text: #F0F0F0;
--ctp-subtext1: #C8C8C8;
--ctp-subtext0: #A0A0A0;
--ctp-mauve: #9B30FF; /* spectrum violet — primary accent */
--ctp-lavender: #7B00FF; /* spectrum violet */
--ctp-pink: #FF2400; /* spectrum red */
--ctp-flamingo: #FF7700; /* spectrum orange */
--ctp-rosewater:#FFFFFF; /* the input light beam */
--ctp-green: #72FF00; /* spectrum green */
--ctp-teal: #00C8FF;
--ctp-sky: #9B30FF;
--ctp-blue: #0040FF; /* spectrum blue */
--ctp-sapphire: #0060DD;
--ctp-yellow: #FFE600; /* spectrum yellow */
--ctp-peach: #FF7700;
--ctp-maroon: #CC1800;
--ctp-red: #FF2400;
--bg-app: #050505;
--bg-sidebar: #020202;
--bg-card: #0D0D0D;
--bg-hover: #141414;
--bg-player: #010101;
--bg-glass: rgba(5, 5, 5, 0.96);
--accent: #9B30FF; /* spectrum violet */
--accent-dim: rgba(155, 48, 255, 0.10);
--accent-glow: rgba(155, 48, 255, 0.28);
--text-primary: #F0F0F0;
--text-secondary:#A0A0A0;
--text-muted: #555555;
--border: rgba(255, 255, 255, 0.07);
--border-subtle: rgba(255, 255, 255, 0.04);
--border-dropdown: rgba(155, 48, 255, 0.22);
--shadow-dropdown: rgba(0, 0, 0, 0.99);
--positive: #72FF00;
--warning: #FFE600;
--danger: #FF2400;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
/* Waveform — cyan played, dark unplayed */
--waveform-played: #9B30FF;
--waveform-buffered: rgba(255, 255, 255, 0.07);
--waveform-unplayed: rgba(255, 255, 255, 0.04);
/* Logo — orange → cyan (the spectrum itself) */
--logo-color-start: #FF7700;
--logo-color-end: #9B30FF;
}
/* Player bar — void black, spectrum rainbow top border via ::before */
[data-theme='dark-side-of-the-moon'] .player-bar {
background: #010101;
border-top: none;
position: relative;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04);
}
[data-theme='dark-side-of-the-moon'] .player-bar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
#FF2400 0%,
#FF7700 17%,
#FFE600 33%,
#72FF00 50%,
#00C8FF 67%,
#0040FF 83%,
#7B00FF 100%
);
}
/* Track name — the white input light beam */
[data-theme='dark-side-of-the-moon'] .player-track-name {
color: #FFFFFF;
}
/* Artist name — neutral dim */
[data-theme='dark-side-of-the-moon'] .player-artist-name {
color: #888888;
}
/* Sidebar — pure void */
[data-theme='dark-side-of-the-moon'] .sidebar {
background: #020202;
border-right: 1px solid rgba(255, 255, 255, 0.04);
}
[data-theme='dark-side-of-the-moon'] .nav-link.active {
background: rgba(0, 229, 255, 0.08);
border-left: 3px solid #00E5FF;
color: #00E5FF;
}
[data-theme='dark-side-of-the-moon'] .nav-link:hover:not(.active) {
background: rgba(255, 255, 255, 0.04);
border-left: 3px solid rgba(0, 229, 255, 0.30);
color: #F0F0F0;
}
/* Cards */
[data-theme='dark-side-of-the-moon'] .album-card,
[data-theme='dark-side-of-the-moon'] .artist-card {
background: #0D0D0D;
}
[data-theme='dark-side-of-the-moon'] .album-card:hover,
[data-theme='dark-side-of-the-moon'] .artist-card:hover {
box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.40), 0 4px 20px rgba(0, 229, 255, 0.08);
}
/* Track / queue rows */
[data-theme='dark-side-of-the-moon'] .track-row:hover,
[data-theme='dark-side-of-the-moon'] .queue-item:hover {
background: #141414;
box-shadow: inset 2px 0 0 #00E5FF;
}
/* Buttons — flat cyan, no gradient */
[data-theme='dark-side-of-the-moon'] .player-btn-primary {
background: #00E5FF;
color: #010101;
box-shadow: none;
border: none;
}
[data-theme='dark-side-of-the-moon'] .player-btn-primary:hover {
background: #33EEFF;
box-shadow: 0 0 16px rgba(0, 229, 255, 0.40);
}
[data-theme='dark-side-of-the-moon'] .btn-primary {
background: #00E5FF;
color: #010101;
border: none;
}
[data-theme='dark-side-of-the-moon'] .btn-primary:hover { background: #33EEFF; }
[data-theme='dark-side-of-the-moon'] .hero-play-btn {
background: #00E5FF;
color: #010101;
border: none;
box-shadow: 0 2px 16px rgba(0, 229, 255, 0.30);
}
[data-theme='dark-side-of-the-moon'] .hero-play-btn:hover {
background: #33EEFF;
box-shadow: 0 4px 26px rgba(0, 229, 255, 0.50);
transform: scale(1.02);
}
[data-theme='dark-side-of-the-moon'] .album-card-details-btn {
background: #00E5FF;
color: #010101;
border: none;
box-shadow: 0 2px 10px rgba(0, 229, 255, 0.25);
}
/* Badge */
[data-theme='dark-side-of-the-moon'] .badge,
[data-theme='dark-side-of-the-moon'] .album-detail-badge {
background: #00E5FF;
color: #010101;
}
/* Settings + queue tabs */
[data-theme='dark-side-of-the-moon'] .settings-tab:hover { background: rgba(155, 48, 255, 0.07); color: #9B30FF; }
[data-theme='dark-side-of-the-moon'] .settings-tab.active { background: rgba(155, 48, 255, 0.12); color: #9B30FF; border-color: #9B30FF; }
[data-theme='dark-side-of-the-moon'] .queue-tab-btn:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme='dark-side-of-the-moon'] .queue-tab-btn.active { color: #9B30FF; }
[data-theme='dark-side-of-the-moon'] .queue-round-btn.active { color: #010101; }
/* Misc interactive */
[data-theme='dark-side-of-the-moon'] .custom-select-trigger:hover { background: #141414; }
[data-theme='dark-side-of-the-moon'] .custom-select-option:hover { background: rgba(155, 48, 255, 0.08); }
[data-theme='dark-side-of-the-moon'] .artist-row:hover { background: rgba(155, 48, 255, 0.05); box-shadow: inset 3px 0 0 #9B30FF; }
[data-theme='dark-side-of-the-moon'] .playlist-row:hover { background: rgba(155, 48, 255, 0.05); box-shadow: inset 3px 0 0 #9B30FF; }
[data-theme='dark-side-of-the-moon'] .artist-ext-link:hover { background: rgba(155, 48, 255, 0.07); border-color: #9B30FF; }
/* np-album-track */
[data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-title,
[data-theme='dark-side-of-the-moon'] .np-album-track.active .np-album-track-num { color: #9B30FF; }
/* Scrollbar — minimal, cyan thumb */
[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar { width: 4px; height: 4px; }
[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-track { background: #020202; }
[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-thumb { background: rgba(155, 48, 255, 0.25); border-radius: 2px; }
[data-theme='dark-side-of-the-moon'] ::-webkit-scrollbar-thumb:hover { background: #9B30FF; }
/* Connection indicators */
[data-theme='dark-side-of-the-moon'] .connection-type,
[data-theme='dark-side-of-the-moon'] .connection-server { color: #555555; }
/* ─── Powerslave (inspired) — Iron Maiden ─── */
/* Blazing Egyptian sun — warm sandstone main, Nile-sky deep-blue sidebar,
pharaoh gold accent, gold+blue duality. Light, no dark mode.
Sidebar: deep Nile blue with subtle hieroglyph grid. Player bar: navy + gold cornice. */
[data-theme='powerslave'] {
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%23C8800A%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 — sandstone, pharaoh gold, temple shadows ── */
--ctp-crust: #180E04;
--ctp-mantle: #2A1808;
--ctp-base: #F0DFB0; /* warm sandstone */
--ctp-surface0: #E8D49A;
--ctp-surface1: #DEC880;
--ctp-surface2: #D0B860;
--ctp-overlay0: #A07830;
--ctp-overlay1: #806020;
--ctp-overlay2: #604810;
--ctp-text: #2A1808; /* warm dark brown */
--ctp-subtext1: #4A2C10;
--ctp-subtext0: #6A4018;
--ctp-mauve: #C8800A; /* pharaoh gold */
--ctp-lavender: #D49020;
--ctp-pink: #B04000;
--ctp-flamingo: #CC4800;
--ctp-rosewater:#F8EDD0;
--ctp-green: #507820;
--ctp-teal: #207870; /* Egyptian turquoise */
--ctp-sky: #3080A0;
--ctp-blue: #1A5080;
--ctp-sapphire: #204870;
--ctp-yellow: #C8800A;
--ctp-peach: #C05010;
--ctp-maroon: #801808;
--ctp-red: #A82000;
--bg-app: #F0DFB0; /* sun-bleached sandstone */
--bg-sidebar: #0A2035; /* Nile sky — deep lapis blue */
--bg-card: #F8EDD0;
--bg-hover: #E8D49A;
--bg-player: #06101C; /* deep night Nile */
--bg-glass: rgba(240, 223, 176, 0.94);
--accent: #C8960C; /* pharaoh gold */
--accent-dim: rgba(200, 150, 12, 0.13);
--accent-glow: rgba(200, 150, 12, 0.30);
--text-primary: #2A1808;
--text-secondary:#6A4018;
--text-muted: #A07830;
--border: rgba(42, 24, 8, 0.14);
--border-subtle: rgba(42, 24, 8, 0.08);
--border-dropdown: rgba(200, 128, 10, 0.28);
--shadow-dropdown: rgba(24, 14, 4, 0.22);
--positive: #507820;
--warning: #C05010;
--danger: #A82000;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--waveform-played: #2E7BB8; /* Nile azure — the sky */
--waveform-buffered: rgba(46, 123, 184, 0.20);
--waveform-unplayed: rgba(42, 24, 8, 0.10);
/* Logo — Nile blue → pharaoh gold */
--logo-color-start: #2E7BB8;
--logo-color-end: #C8960C;
}
/* Sidebar — Nile-sky deep blue, subtle hieroglyph grid */
[data-theme='powerslave'] .sidebar {
background: #0A2035;
border-right: none;
background-image:
repeating-linear-gradient(
0deg,
rgba(46, 123, 184, 0.08) 0px, transparent 1px, transparent 48px,
rgba(46, 123, 184, 0.08) 49px
),
repeating-linear-gradient(
90deg,
rgba(46, 123, 184, 0.05) 0px, transparent 1px, transparent 96px,
rgba(46, 123, 184, 0.05) 97px
);
}
[data-theme='powerslave'] .nav-link { color: rgba(200, 224, 248, 0.65); }
[data-theme='powerslave'] .nav-link.active {
background: linear-gradient(90deg, rgba(200, 150, 12, 0.22) 0%, transparent 100%);
border-left: 3px solid #C8960C;
color: #D49828;
}
[data-theme='powerslave'] .nav-link:hover:not(.active) {
background: rgba(46, 123, 184, 0.12);
border-left: 3px solid rgba(46, 123, 184, 0.50);
color: rgba(200, 224, 248, 0.92);
}
/* Player bar — deep Nile night, gold cornice */
[data-theme='powerslave'] .player-bar {
background: #06101C;
border-top: 2px solid #C8960C;
box-shadow: 0 -4px 24px rgba(46, 123, 184, 0.10), 0 -1px 0 rgba(200, 150, 12, 0.20);
}
/* Track name — warm gold glow */
[data-theme='powerslave'] .player-track-name {
color: #D49828;
text-shadow: 0 0 12px rgba(200, 150, 12, 0.40);
}
/* Artist name — Nile azure */
[data-theme='powerslave'] .player-artist-name { color: #6AAED8; }
/* Content header */
[data-theme='powerslave'] .content-header {
border-bottom: 1px solid rgba(42, 24, 8, 0.12);
}
/* Cards — parchment on sandstone */
[data-theme='powerslave'] .album-card,
[data-theme='powerslave'] .artist-card {
background: #F8EDD0;
box-shadow: 0 1px 4px rgba(42, 24, 8, 0.10);
}
[data-theme='powerslave'] .album-card:hover,
[data-theme='powerslave'] .artist-card:hover {
box-shadow: 0 0 0 2px #C8800A, 0 4px 16px rgba(42, 24, 8, 0.12);
}
/* Track / queue rows */
[data-theme='powerslave'] .track-row:hover {
background: #E8D49A;
box-shadow: inset 2px 0 0 #C8800A;
}
[data-theme='powerslave'] .queue-item:hover {
background: rgba(46, 123, 184, 0.12);
box-shadow: inset 2px 0 0 #2E7BB8;
}
/* Buttons — gold gradient */
[data-theme='powerslave'] .player-btn-primary {
background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
color: #180E04;
border: 1px solid #806006;
box-shadow: 0 0 12px rgba(200, 128, 10, 0.28);
}
[data-theme='powerslave'] .player-btn-primary:hover {
background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
box-shadow: 0 0 22px rgba(200, 128, 10, 0.48);
}
[data-theme='powerslave'] .btn-primary {
background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
color: #180E04;
border: 1px solid #806006;
}
[data-theme='powerslave'] .btn-primary:hover {
background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
}
[data-theme='powerslave'] .hero-play-btn {
background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
color: #180E04;
border: 1px solid #806006;
box-shadow: 0 2px 16px rgba(200, 128, 10, 0.28);
}
[data-theme='powerslave'] .hero-play-btn:hover {
background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
box-shadow: 0 4px 26px rgba(200, 128, 10, 0.48);
transform: scale(1.02);
}
[data-theme='powerslave'] .album-card-details-btn {
background: linear-gradient(180deg, #D49020 0%, #C8800A 50%, #A06008 100%);
color: #180E04;
border: 1px solid #806006;
}
/* Badge — gold pill */
[data-theme='powerslave'] .badge,
[data-theme='powerslave'] .album-detail-badge {
background: #C8800A;
color: #F8EDD0;
}
/* Settings + queue */
[data-theme='powerslave'] .settings-tab:hover { background: rgba(200, 150, 12, 0.08); color: #C8960C; }
[data-theme='powerslave'] .settings-tab.active { background: rgba(200, 150, 12, 0.14); color: #C8960C; border-color: #C8960C; }
[data-theme='powerslave'] .queue-tab-btn:hover { background: rgba(46, 123, 184, 0.12); color: rgba(200, 224, 248, 0.92); }
[data-theme='powerslave'] .queue-tab-btn.active { color: #C8960C; }
[data-theme='powerslave'] .queue-round-btn.active { color: #06101C; }
/* Queue panel text — Nile-blue sidebar */
[data-theme='powerslave'] .queue-panel { background: #0A2035; }
[data-theme='powerslave'] .queue-item-title { color: rgba(220, 235, 248, 0.90); }
[data-theme='powerslave'] .queue-item-artist,
[data-theme='powerslave'] .queue-item-duration { color: rgba(140, 190, 230, 0.55); }
[data-theme='powerslave'] .queue-item.active .queue-item-artist,
[data-theme='powerslave'] .queue-item.active .queue-item-duration { color: rgba(140, 190, 230, 0.75); }
[data-theme='powerslave'] .queue-divider span { color: rgba(140, 190, 230, 0.38) !important; }
[data-theme='powerslave'] .queue-current-info h3 { color: rgba(220, 235, 248, 0.92); }
[data-theme='powerslave'] .queue-current-sub { color: rgba(140, 190, 230, 0.58); }
[data-theme='powerslave'] .queue-current-cover .fallback { color: rgba(140, 190, 230, 0.30); }
[data-theme='powerslave'] .queue-action-btn { color: rgba(140, 190, 230, 0.65); }
[data-theme='powerslave'] .queue-action-btn:hover:not(:disabled) { color: rgba(220, 235, 248, 0.95); }
/* Misc interactive */
[data-theme='powerslave'] .custom-select-trigger:hover { background: #E8D49A; }
[data-theme='powerslave'] .custom-select-option:hover { background: rgba(200, 128, 10, 0.10); }
[data-theme='powerslave'] .artist-row:hover { background: rgba(200, 128, 10, 0.07); box-shadow: inset 3px 0 0 #C8800A; }
[data-theme='powerslave'] .playlist-row:hover { background: rgba(200, 128, 10, 0.07); box-shadow: inset 3px 0 0 #C8800A; }
[data-theme='powerslave'] .artist-ext-link:hover { background: rgba(200, 128, 10, 0.08); border-color: #C8800A; }
/* Connection indicators */
[data-theme='powerslave'] .connection-type,
[data-theme='powerslave'] .connection-server { color: rgba(140, 190, 230, 0.70); }
/* Album detail hero meta */
[data-theme='powerslave'] .album-detail-info { color: rgba(255, 255, 255, 0.80); }
[data-theme='powerslave'] .album-detail-artist,
[data-theme='powerslave'] .album-detail-artist-link { color: #D49828; }
[data-theme='powerslave'] .album-detail-artist-link:hover { color: #E8B040; }
/* np-album-track */
[data-theme='powerslave'] .np-album-track.active .np-album-track-title,
[data-theme='powerslave'] .np-album-track.active .np-album-track-num { color: #C8960C; }
/* Scrollbar — warm, gold thumb */
[data-theme='powerslave'] ::-webkit-scrollbar { width: 5px; height: 5px; }
[data-theme='powerslave'] ::-webkit-scrollbar-track { background: #E8D49A; }
[data-theme='powerslave'] ::-webkit-scrollbar-thumb { background: rgba(200, 128, 10, 0.35); border-radius: 3px; }
[data-theme='powerslave'] ::-webkit-scrollbar-thumb:hover { background: #C8800A; }
Reference in New Issue View Git Blame Copy Permalink