mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
refactor(styles): split theme.css into per-theme files (#656)
theme.css (16138 LOC) → 122 per-section files in src/styles/themes/ +
an index.css that imports them in original cascade order.
Concatenating all files via index.css reproduces the original byte stream
(+1 trailing newline, cosmetic).
Each top-level section header in theme.css (matching /^\/\* ─{3,}/)
becomes its own file, slugged from the header text (or the [data-theme]
selector found in the body when the header was a banner). Pure-separator
headers fold into the previous section so they don't create empty files.
Generated via /tmp/split-theme-css.mjs.
This commit is contained in:
Frank Stellmacher
committed by
GitHub
GitHub
parent
40dd0bd100
commit
45a6a18849
@@ -0,0 +1,56 @@
|
||||
/* ─── 1984 Cyberpunk (juanmnl/vs-1984 — mint-green variant) ─── */
|
||||
[data-theme='vs-1984-cyberpunk'] {
|
||||
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%23f5f5f5%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: #0e0f15;
|
||||
--ctp-mantle: #15171d; /* sideBar.background */
|
||||
--ctp-base: #1C1E27; /* editor.background */
|
||||
--ctp-surface0: #232631;
|
||||
--ctp-surface1: #2c2f3c;
|
||||
--ctp-surface2: #383b4a;
|
||||
--ctp-overlay0: #525863;
|
||||
--ctp-overlay1: #78A8D6; /* language variable */
|
||||
--ctp-overlay2: #b8bfd1;
|
||||
--ctp-text: #f5f5f5;
|
||||
--ctp-subtext1: #d4d8e3;
|
||||
--ctp-subtext0: #78A8D6;
|
||||
--ctp-mauve: #85EEA7;
|
||||
--ctp-lavender: #78A8D6;
|
||||
--ctp-pink: #FF16B0;
|
||||
--ctp-flamingo: #7ADAD1;
|
||||
--ctp-rosewater:#7ADAD1;
|
||||
--ctp-blue: #78A8D6;
|
||||
--ctp-sapphire: #7ADAD1;
|
||||
--ctp-sky: #7ADAD1;
|
||||
--ctp-teal: #7ADAD1;
|
||||
--ctp-green: #85EEA7;
|
||||
--ctp-yellow: #7ADAD1;
|
||||
--ctp-peach: #85EEA7;
|
||||
--ctp-maroon: #FF16B0;
|
||||
--ctp-red: #FF16B0;
|
||||
|
||||
--bg-app: #1C1E27;
|
||||
--bg-sidebar: #15171d;
|
||||
--bg-card: #232631;
|
||||
--bg-hover: #2c2f3c;
|
||||
--bg-player: #15171d;
|
||||
--bg-glass: rgba(28, 30, 39, 0.82);
|
||||
--accent: #85EEA7; /* signature mint-green */
|
||||
--accent-dim: rgba(133, 238, 167, 0.16);
|
||||
--accent-glow: rgba(133, 238, 167, 0.32);
|
||||
--text-primary: #f5f5f5;
|
||||
--text-secondary: #78A8D6;
|
||||
--text-muted: #525863;
|
||||
--border: #2c2f3c;
|
||||
--border-subtle: #232631;
|
||||
--border-dropdown: #383b4a;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.7);
|
||||
--positive: #85EEA7;
|
||||
--warning: #7ADAD1;
|
||||
--danger: #FF16B0;
|
||||
--waveform-played: #85EEA7;
|
||||
--waveform-buffered: #383b4a;
|
||||
--waveform-unplayed: #232631;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── 1984 (juanmnl/vs-1984 — default dark, deep-blue cyberpunk) ─── */
|
||||
[data-theme='vs-1984'] {
|
||||
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%23f1f1f1%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: #050620;
|
||||
--ctp-mantle: #070825; /* sideBar.background */
|
||||
--ctp-base: #0d0f31; /* editor.background */
|
||||
--ctp-surface0: #161a4a; /* card elevation */
|
||||
--ctp-surface1: #1f2560;
|
||||
--ctp-surface2: #2a3275;
|
||||
--ctp-overlay0: #3B4D66; /* lineNumber */
|
||||
--ctp-overlay1: #525863; /* comment */
|
||||
--ctp-overlay2: #96A1FF; /* variable */
|
||||
--ctp-text: #f1f1f1;
|
||||
--ctp-subtext1: #d6d8ff;
|
||||
--ctp-subtext0: #96A1FF;
|
||||
--ctp-mauve: #FF16B0; /* keyword pink */
|
||||
--ctp-lavender: #96A1FF; /* variable */
|
||||
--ctp-pink: #FF16B0;
|
||||
--ctp-flamingo: #DF81FC; /* string */
|
||||
--ctp-rosewater:#DF81FC;
|
||||
--ctp-blue: #46BDFF; /* focusBorder / accent */
|
||||
--ctp-sapphire: #46BDFF;
|
||||
--ctp-sky: #46BDFF;
|
||||
--ctp-teal: #46BDFF;
|
||||
--ctp-green: #B3F361; /* cursor green */
|
||||
--ctp-yellow: #DF81FC;
|
||||
--ctp-peach: #FF16B0;
|
||||
--ctp-maroon: #FF16B0;
|
||||
--ctp-red: #FF16B0;
|
||||
|
||||
--bg-app: #0d0f31;
|
||||
--bg-sidebar: #070825;
|
||||
--bg-card: #161a4a;
|
||||
--bg-hover: #1f2560;
|
||||
--bg-player: #070825;
|
||||
--bg-glass: rgba(13, 15, 49, 0.82);
|
||||
--accent: #46BDFF; /* signature 1984 cyan-blue */
|
||||
--accent-dim: rgba(70, 189, 255, 0.16);
|
||||
--accent-glow: rgba(70, 189, 255, 0.32);
|
||||
--text-primary: #f1f1f1;
|
||||
--text-secondary: #96A1FF;
|
||||
--text-muted: #525863; /* comment */
|
||||
--border: #1f2560;
|
||||
--border-subtle: #161a4a;
|
||||
--border-dropdown: #2a3275;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.7);
|
||||
--positive: #B3F361; /* cursor green */
|
||||
--warning: #DF81FC; /* string magenta */
|
||||
--danger: #FF16B0; /* keyword pink */
|
||||
--waveform-played: #46BDFF;
|
||||
--waveform-buffered: #3B4D66;
|
||||
--waveform-unplayed: #161a4a;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── 1984 Light (juanmnl/vs-1984 — bluish-white) ─── */
|
||||
[data-theme='vs-1984-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%2319152c%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: #d4d6e7;
|
||||
--ctp-mantle: #dfe0f0; /* sideBar.background */
|
||||
--ctp-base: #e4e5f5; /* editor.background */
|
||||
--ctp-surface0: #d4d6e7;
|
||||
--ctp-surface1: #cccdde;
|
||||
--ctp-surface2: #b9bad0;
|
||||
--ctp-overlay0: #9793b9; /* comment */
|
||||
--ctp-overlay1: #7f8a99; /* lineNumber */
|
||||
--ctp-overlay2: #585d74;
|
||||
--ctp-text: #19152c;
|
||||
--ctp-subtext1: #3f374b;
|
||||
--ctp-subtext0: #585d74; /* sideBar.foreground */
|
||||
--ctp-mauve: #a626a4;
|
||||
--ctp-lavender: #4d5eff;
|
||||
--ctp-pink: #FF16B0;
|
||||
--ctp-flamingo: #c300ff;
|
||||
--ctp-rosewater:#1930fd;
|
||||
--ctp-blue: #4d5eff;
|
||||
--ctp-sapphire: #46BDFF;
|
||||
--ctp-sky: #46BDFF;
|
||||
--ctp-teal: #1930fd;
|
||||
--ctp-green: #1d7848;
|
||||
--ctp-yellow: #b88600;
|
||||
--ctp-peach: #FF16B0;
|
||||
--ctp-maroon: #FF16B0;
|
||||
--ctp-red: #FF16B0;
|
||||
|
||||
--bg-app: #e4e5f5;
|
||||
--bg-sidebar: #dfe0f0;
|
||||
--bg-card: #d4d6e7;
|
||||
--bg-hover: #cccdde;
|
||||
--bg-player: #dfe0f0;
|
||||
--bg-glass: rgba(228, 229, 245, 0.92);
|
||||
--accent: #4d5eff; /* variable blue — readable on bluish-white */
|
||||
--accent-dim: rgba(77, 94, 255, 0.12);
|
||||
--accent-glow: rgba(77, 94, 255, 0.24);
|
||||
--text-primary: #19152c;
|
||||
--text-secondary: #585d74; /* sideBar.foreground */
|
||||
--text-muted: #9793b9; /* comment */
|
||||
--border: #cccdde;
|
||||
--border-subtle: #d4d6e7;
|
||||
--border-dropdown: #b9bad0;
|
||||
--shadow-dropdown: rgba(25, 21, 44, 0.18);
|
||||
--positive: #1d7848;
|
||||
--warning: #b88600;
|
||||
--danger: #FF16B0; /* signature 1984 hot-pink button */
|
||||
--waveform-played: #4d5eff;
|
||||
--waveform-buffered: #9793b9;
|
||||
--waveform-unplayed: #d4d6e7;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── 1984 Orwell (juanmnl/vs-1984 — sepia / dystopian variant) ─── */
|
||||
[data-theme='vs-1984-orwell'] {
|
||||
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%23f1f1f1%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: #1f1c18;
|
||||
--ctp-mantle: #292521; /* sideBar.background */
|
||||
--ctp-base: #2e2923; /* editor.background */
|
||||
--ctp-surface0: #3a342c;
|
||||
--ctp-surface1: #463e34;
|
||||
--ctp-surface2: #574d40;
|
||||
--ctp-overlay0: #7a6a52;
|
||||
--ctp-overlay1: #b39773;
|
||||
--ctp-overlay2: #d8c39c;
|
||||
--ctp-text: #f1f1f1;
|
||||
--ctp-subtext1: #fcd395;
|
||||
--ctp-subtext0: #fcbe95;
|
||||
--ctp-mauve: #fcd395;
|
||||
--ctp-lavender: #fcbe95;
|
||||
--ctp-pink: #e74946;
|
||||
--ctp-flamingo: #e74946;
|
||||
--ctp-rosewater:#fcbe95;
|
||||
--ctp-blue: #fcd395;
|
||||
--ctp-sapphire: #fcbe95;
|
||||
--ctp-sky: #F7D88B;
|
||||
--ctp-teal: #fcd395;
|
||||
--ctp-green: #fcd395;
|
||||
--ctp-yellow: #F7D88B;
|
||||
--ctp-peach: #fcbe95;
|
||||
--ctp-maroon: #e74946;
|
||||
--ctp-red: #e74946;
|
||||
|
||||
--bg-app: #2e2923;
|
||||
--bg-sidebar: #292521;
|
||||
--bg-card: #3a342c;
|
||||
--bg-hover: #463e34;
|
||||
--bg-player: #292521;
|
||||
--bg-glass: rgba(46, 41, 35, 0.82);
|
||||
--accent: #fcd395; /* cream-gold */
|
||||
--accent-dim: rgba(252, 211, 149, 0.16);
|
||||
--accent-glow: rgba(252, 211, 149, 0.32);
|
||||
--text-primary: #f1f1f1;
|
||||
--text-secondary: #fcd395;
|
||||
--text-muted: #b39773;
|
||||
--border: #463e34;
|
||||
--border-subtle: #3a342c;
|
||||
--border-dropdown: #574d40;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.7);
|
||||
--positive: #F7D88B;
|
||||
--warning: #fcbe95;
|
||||
--danger: #e74946;
|
||||
--waveform-played: #fcd395;
|
||||
--waveform-buffered: #7a6a52;
|
||||
--waveform-unplayed: #3a342c;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Psysonic – Design System
|
||||
Catppuccin Mocha Color Palette + Inter Typography
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
@import '@fontsource-variable/inter';
|
||||
@import '@fontsource-variable/inter/wght-italic.css';
|
||||
@import '@fontsource-variable/space-grotesk';
|
||||
@import '@fontsource-variable/outfit';
|
||||
@import '@fontsource-variable/dm-sans';
|
||||
@import '@fontsource-variable/dm-sans/wght-italic.css';
|
||||
@import '@fontsource-variable/nunito';
|
||||
@import '@fontsource-variable/nunito/wght-italic.css';
|
||||
@import '@fontsource-variable/rubik';
|
||||
@import '@fontsource-variable/rubik/wght-italic.css';
|
||||
@import '@fontsource-variable/figtree';
|
||||
@import '@fontsource-variable/figtree/wght-italic.css';
|
||||
@import '@fontsource-variable/manrope';
|
||||
@import '@fontsource-variable/plus-jakarta-sans';
|
||||
@import '@fontsource-variable/plus-jakarta-sans/wght-italic.css';
|
||||
@import '@fontsource-variable/lexend';
|
||||
@import '@fontsource-variable/geist';
|
||||
@import '@fontsource-variable/jetbrains-mono';
|
||||
@import '@fontsource-variable/jetbrains-mono/wght-italic.css';
|
||||
@import '@fontsource-variable/golos-text';
|
||||
@import '@fontsource-variable/unbounded';
|
||||
/* OpenDyslexic — non-variable font with discrete weights/styles. Latin only,
|
||||
no Cyrillic / no CJK. Selected via Settings as a dyslexia-friendly option. */
|
||||
@import '@fontsource/opendyslexic/400.css';
|
||||
@import '@fontsource/opendyslexic/700.css';
|
||||
@import '@fontsource/opendyslexic/400-italic.css';
|
||||
@import '@fontsource/opendyslexic/700-italic.css';
|
||||
|
||||
@@ -0,0 +1,254 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
/* ─── Album Grid ─── */
|
||||
.album-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─── Amoled Black Pure ─── */
|
||||
[data-theme='amoled-black-pure'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #000000;
|
||||
--ctp-mantle: #000000;
|
||||
--ctp-base: #000000;
|
||||
--ctp-surface0: #050505;
|
||||
--ctp-surface1: #0a0a0a;
|
||||
--ctp-surface2: #121212;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #5a5a5a;
|
||||
--ctp-overlay1: #7a7a7a;
|
||||
--ctp-overlay2: #9a9a9a;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #ffffff;
|
||||
--ctp-subtext1: #d6d6d6;
|
||||
--ctp-subtext0: #a8a8a8;
|
||||
|
||||
/* White accent */
|
||||
--ctp-teal: #ffffff;
|
||||
--ctp-sky: #e6e6e6;
|
||||
--ctp-sapphire: #cfcfcf;
|
||||
--ctp-blue: #a8a8a8;
|
||||
--ctp-lavender: #ffffff;
|
||||
--ctp-mauve: #cfcfcf;
|
||||
--ctp-pink: #a8a8a8;
|
||||
--ctp-flamingo: #ffffff;
|
||||
--ctp-rosewater: #cfcfcf;
|
||||
|
||||
/* Semantic */
|
||||
--ctp-red: #f87171;
|
||||
--ctp-maroon: #fb923c;
|
||||
--ctp-peach: #fb923c;
|
||||
--ctp-yellow: #fbbf24;
|
||||
--ctp-green: #4ade80;
|
||||
|
||||
/* UI tokens */
|
||||
--bg-app: #000000;
|
||||
--bg-sidebar: #000000;
|
||||
--bg-card: #050505;
|
||||
--bg-hover: #0a0a0a;
|
||||
--bg-player: #000000;
|
||||
--bg-glass: rgba(0, 0, 0, 0.92);
|
||||
|
||||
--accent: #ffffff;
|
||||
--accent-dim: rgba(255, 255, 255, 0.12);
|
||||
--accent-glow: rgba(255, 255, 255, 0.18);
|
||||
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #bdbdbd;
|
||||
--text-muted: #7a7a7a;
|
||||
|
||||
--border: #121212;
|
||||
--border-subtle: #0a0a0a;
|
||||
--border-dropdown: #1f1f1f;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.98);
|
||||
|
||||
--positive: #4ade80;
|
||||
--warning: #fbbf24;
|
||||
--danger: #f87171;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
/* ─── Animations ─── */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── Atom One Dark (Th3Whit3Wolf/one-nvim — dark variant) ─── */
|
||||
[data-theme='one-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%23abb2bf%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: #181a1f; /* vertsplit */
|
||||
--ctp-mantle: #21252b; /* sidebar tone (Atom IDE convention) */
|
||||
--ctp-base: #282c34; /* syntax_bg */
|
||||
--ctp-surface0: #2c323c; /* syntax_cursor */
|
||||
--ctp-surface1: #333841; /* pmenu */
|
||||
--ctp-surface2: #3e4452; /* visual_grey */
|
||||
--ctp-overlay0: #4b5263; /* mono_4 */
|
||||
--ctp-overlay1: #5c6370; /* mono_3 */
|
||||
--ctp-overlay2: #828997; /* mono_2 */
|
||||
--ctp-text: #abb2bf; /* mono_1 */
|
||||
--ctp-subtext1: #828997;
|
||||
--ctp-subtext0: #636d83; /* syntax_gutter */
|
||||
--ctp-mauve: #c678dd; /* hue_3 */
|
||||
--ctp-lavender: #528bff; /* syntax_accent */
|
||||
--ctp-pink: #d291e4;
|
||||
--ctp-flamingo: #e06c75; /* hue_5 */
|
||||
--ctp-rosewater:#d19a66; /* hue_6 */
|
||||
--ctp-blue: #61afef; /* hue_2 */
|
||||
--ctp-sapphire: #56b6c2; /* hue_1 */
|
||||
--ctp-sky: #56b6c2;
|
||||
--ctp-teal: #56b6c2;
|
||||
--ctp-green: #98c379; /* hue_4 */
|
||||
--ctp-yellow: #e5c07b; /* hue_6_2 */
|
||||
--ctp-peach: #d19a66;
|
||||
--ctp-maroon: #be5046; /* hue_5_2 */
|
||||
--ctp-red: #e06c75;
|
||||
|
||||
--bg-app: #282c34;
|
||||
--bg-sidebar: #21252b;
|
||||
--bg-card: #2c323c;
|
||||
--bg-hover: #3e4452;
|
||||
--bg-player: #21252b;
|
||||
--bg-glass: rgba(40, 44, 52, 0.78);
|
||||
--accent: #61afef; /* hue_2 — signature One Dark blue */
|
||||
--accent-dim: rgba(97, 175, 239, 0.16);
|
||||
--accent-glow: rgba(97, 175, 239, 0.32);
|
||||
--text-primary: #abb2bf; /* mono_1 */
|
||||
--text-secondary: #828997; /* mono_2 */
|
||||
--text-muted: #5c6370; /* mono_3 */
|
||||
--border: #3e4452;
|
||||
--border-subtle: #2c323c;
|
||||
--border-dropdown: #4b5263;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.6);
|
||||
--positive: #98c379; /* hue_4 */
|
||||
--warning: #e5c07b; /* hue_6_2 */
|
||||
--danger: #e06c75; /* hue_5 */
|
||||
--waveform-played: #61afef;
|
||||
--waveform-buffered: #4b5263;
|
||||
--waveform-unplayed: #2c323c;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── Atom One Light (Th3Whit3Wolf/one-nvim — light variant) ─── */
|
||||
[data-theme='one-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%23383A42%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: #e7e9e1; /* vertsplit */
|
||||
--ctp-mantle: #eaeaeb;
|
||||
--ctp-base: #fafafa; /* syntax_bg */
|
||||
--ctp-surface0: #ececed;
|
||||
--ctp-surface1: #dfdfdf; /* pmenu */
|
||||
--ctp-surface2: #d3d3d3; /* special_grey */
|
||||
--ctp-overlay0: #c2c2c3; /* mono_4 */
|
||||
--ctp-overlay1: #a0a1a7; /* mono_3 */
|
||||
--ctp-overlay2: #696c77; /* mono_2 */
|
||||
--ctp-text: #383A42; /* mono_1 */
|
||||
--ctp-subtext1: #4f525e; /* term_8 */
|
||||
--ctp-subtext0: #696c77;
|
||||
--ctp-mauve: #a626a4; /* hue_3 */
|
||||
--ctp-lavender: #526fff; /* syntax_accent */
|
||||
--ctp-pink: #d291e4;
|
||||
--ctp-flamingo: #ca1243; /* hue_5_2 */
|
||||
--ctp-rosewater:#986801; /* hue_6 */
|
||||
--ctp-blue: #4078f2; /* hue_2 */
|
||||
--ctp-sapphire: #0184bc; /* hue_1 */
|
||||
--ctp-sky: #0184bc;
|
||||
--ctp-teal: #0184bc;
|
||||
--ctp-green: #50a14f; /* hue_4 */
|
||||
--ctp-yellow: #c18401; /* hue_6_2 */
|
||||
--ctp-peach: #986801;
|
||||
--ctp-maroon: #ca1243;
|
||||
--ctp-red: #e45649; /* hue_5 */
|
||||
|
||||
--bg-app: #fafafa;
|
||||
--bg-sidebar: #eaeaeb;
|
||||
--bg-card: #ececed;
|
||||
--bg-hover: #dfdfdf;
|
||||
--bg-player: #eaeaeb;
|
||||
--bg-glass: rgba(250, 250, 250, 0.92);
|
||||
--accent: #4078f2; /* hue_2 — signature One Light blue */
|
||||
--accent-dim: rgba(64, 120, 242, 0.12);
|
||||
--accent-glow: rgba(64, 120, 242, 0.24);
|
||||
--text-primary: #383A42; /* mono_1 */
|
||||
--text-secondary: #696c77; /* mono_2 */
|
||||
--text-muted: #a0a1a7; /* mono_3 */
|
||||
--border: #dfdfdf;
|
||||
--border-subtle: #ececed;
|
||||
--border-dropdown: #c2c2c3;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.16);
|
||||
--positive: #50a14f; /* hue_4 */
|
||||
--warning: #c18401; /* hue_6_2 */
|
||||
--danger: #e45649; /* hue_5 */
|
||||
--waveform-played: #4078f2;
|
||||
--waveform-buffered: #a0a1a7;
|
||||
--waveform-unplayed: #dfdfdf;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,954 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,342 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
/* ─── 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);
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
}
|
||||
|
||||
.btn-surface:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--ctp-overlay0);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: transparent;
|
||||
color: var(--danger);
|
||||
border: 1px solid var(--danger);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 35%, transparent);
|
||||
}
|
||||
|
||||
.btn-danger:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 3px 8px;
|
||||
font-size: 12px;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─── Carbon Grey ─── */
|
||||
[data-theme='carbon-grey'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b4bcc8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #0f0f10;
|
||||
--ctp-mantle: #141416;
|
||||
--ctp-base: #18181b;
|
||||
--ctp-surface0: #1f1f23;
|
||||
--ctp-surface1: #26262b;
|
||||
--ctp-surface2: #2e2e34;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #3f3f46;
|
||||
--ctp-overlay1: #52525b;
|
||||
--ctp-overlay2: #71717a;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #e5e7eb;
|
||||
--ctp-subtext1: #9ca3af;
|
||||
--ctp-subtext0: #6b7280;
|
||||
|
||||
/* Grey accent */
|
||||
--ctp-teal: #9ca3af;
|
||||
--ctp-sky: #9ca3af;
|
||||
--ctp-sapphire: #6b7280;
|
||||
--ctp-blue: #52525b;
|
||||
--ctp-lavender: #9ca3af;
|
||||
--ctp-mauve: #6b7280;
|
||||
--ctp-pink: #52525b;
|
||||
--ctp-flamingo: #9ca3af;
|
||||
--ctp-rosewater: #6b7280;
|
||||
|
||||
/* Semantic */
|
||||
--ctp-red: #ef4444;
|
||||
--ctp-maroon: #f97316;
|
||||
--ctp-peach: #f97316;
|
||||
--ctp-yellow: #eab308;
|
||||
--ctp-green: #22c55e;
|
||||
|
||||
/* UI tokens */
|
||||
--bg-app: #0f0f10;
|
||||
--bg-sidebar: #141416;
|
||||
--bg-card: #18181b;
|
||||
--bg-hover: #26262b;
|
||||
--bg-player: #141416;
|
||||
--bg-glass: rgba(15,15,16,0.95);
|
||||
|
||||
--accent: #b4bcc8;
|
||||
--accent-dim: rgba(156,163,175,0.08);
|
||||
--accent-glow: rgba(156,163,175,0.15);
|
||||
|
||||
--text-primary: #e5e7eb;
|
||||
--text-secondary: #9ca3af;
|
||||
--text-muted: #52525b;
|
||||
|
||||
--border: #26262b;
|
||||
--border-subtle: #18181b;
|
||||
--border-dropdown: #2e2e34;
|
||||
--shadow-dropdown: rgba(0,0,0,0.9);
|
||||
|
||||
--positive: #22c55e;
|
||||
--warning: #eab308;
|
||||
--danger: #ef4444;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── Carbonfox ─── */
|
||||
[data-theme='carbonfox'] {
|
||||
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%23f2f4f8%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: #121212;
|
||||
--ctp-mantle: #121212;
|
||||
--ctp-base: #161616;
|
||||
--ctp-surface0: #1c1c1c;
|
||||
--ctp-surface1: #222222;
|
||||
--ctp-surface2: #2e2e2e;
|
||||
--ctp-overlay0: #525253;
|
||||
--ctp-overlay1: #525253;
|
||||
--ctp-overlay2: #c1c7cd;
|
||||
--ctp-text: #f2f4f8;
|
||||
--ctp-subtext1: #dde1e6;
|
||||
--ctp-subtext0: #c1c7cd;
|
||||
--ctp-mauve: #be95ff;
|
||||
--ctp-lavender: #78a9ff;
|
||||
--ctp-pink: #ff7eb6;
|
||||
--ctp-flamingo: #ee5396;
|
||||
--ctp-rosewater: #ff7eb6;
|
||||
--ctp-blue: #78a9ff;
|
||||
--ctp-sapphire: #33b1ff;
|
||||
--ctp-sky: #33b1ff;
|
||||
--ctp-teal: #3ddbd9;
|
||||
--ctp-green: #25be6a;
|
||||
--ctp-yellow: #08bdba;
|
||||
--ctp-peach: #3ddbd9;
|
||||
--ctp-maroon: #ee5396;
|
||||
--ctp-red: #ee5396;
|
||||
|
||||
--bg-app: #161616;
|
||||
--bg-sidebar: #121212;
|
||||
--bg-card: #1c1c1c;
|
||||
--bg-hover: #222222;
|
||||
--bg-player: #121212;
|
||||
--bg-glass: rgba(22, 22, 22, 0.82);
|
||||
--accent: #be95ff;
|
||||
--accent-dim: rgba(190, 149, 255, 0.15);
|
||||
--accent-glow: rgba(190, 149, 255, 0.3);
|
||||
--text-primary: #f2f4f8;
|
||||
--text-secondary: #dde1e6;
|
||||
--text-muted: #878d96;
|
||||
--border: #222222;
|
||||
--border-subtle: #1c1c1c;
|
||||
--border-dropdown: #2e2e2e;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.7);
|
||||
--positive: #25be6a;
|
||||
--warning: #08bdba;
|
||||
--danger: #ee5396;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
/* ─── Card ─── */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 0 0 1px var(--border-subtle);
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
/* ─── 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%23d4d4dc%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 ──
|
||||
Contrast audit (vs. --bg-app #2b2b3a, L≈0.025):
|
||||
text-primary 9.6:1 AAA ✓ (raised from 8.5:1)
|
||||
text-secondary 5.5:1 AA ✓
|
||||
text-muted 4.7:1 AA ✓ (was 5.6:1 but BRIGHTER than secondary — hierarchy fixed)
|
||||
accent (gold) 8.4:1 AAA ✓
|
||||
positive 6.6:1 AA+ ✓
|
||||
danger 4.9:1 AA ✓ (raised from 2.46:1 — was below AA)
|
||||
Column grip + border-subtle raised from 1.0:1 / 1.19:1 — see overrides.
|
||||
*/
|
||||
--ctp-crust: #000000;
|
||||
--ctp-mantle: #1e1e28;
|
||||
--ctp-base: #2b2b3a;
|
||||
--ctp-surface0: #353545;
|
||||
--ctp-surface1: #4a4a60; /* raised from #404055 for visible borders/grips */
|
||||
--ctp-surface2: #5a5a78;
|
||||
--ctp-overlay0: #7676a0; /* raised from #5a5a75 */
|
||||
--ctp-overlay1: #8a8a96;
|
||||
--ctp-overlay2: #a4a4b4;
|
||||
--ctp-text: #d4d4dc; /* raised from #c8c8d0 for 9.6:1 */
|
||||
--ctp-subtext1: #b4b4c0;
|
||||
--ctp-subtext0: #8a8a96;
|
||||
/* Winamp iconic LCD green + gold accent */
|
||||
--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: #ff6b6b; /* raised from #a03030 — AA compliant */
|
||||
--ctp-red: #ff6b6b; /* raised from #c03030 — 4.9:1 AA ✓ */
|
||||
|
||||
/* ── Semantic tokens ── */
|
||||
--bg-app: #2b2b3a;
|
||||
--bg-sidebar: #1e1e28;
|
||||
--bg-card: #353545;
|
||||
--bg-hover: #484860; /* raised from #404055 — 1.6:1 vs card, spürbarer Hover */
|
||||
--bg-player: #000000;
|
||||
--bg-glass: rgba(43, 43, 58, 0.92);
|
||||
--accent: #d4cc46;
|
||||
--accent-dim: rgba(212, 204, 70, 0.18);
|
||||
--accent-glow: rgba(212, 204, 70, 0.40);
|
||||
--volume-accent: #de9b35;
|
||||
--text-primary: #d4d4dc;
|
||||
--text-secondary: #b4b4c0; /* raised from #a0a0ac for better AA margin */
|
||||
--text-muted: #949ab0; /* 4.7:1 AA ✓, now DIMMER than secondary (hierarchy fixed) */
|
||||
--border: #7676a0; /* 2.7:1 vs bg-card — visible (was 1.79:1) */
|
||||
--border-subtle: #484860; /* 1.5:1 — was #353545 identical with bg-card (1.0:1!) */
|
||||
--positive: #00cc66;
|
||||
--warning: #d4cc46;
|
||||
--danger: #ff6b6b; /* 4.9:1 AA ✓, was #c03030 (2.46:1 FAIL) */
|
||||
--waveform-played: #d4cc46;
|
||||
--waveform-buffered: #8a8a96;
|
||||
--waveform-unplayed: #4a4a60;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
/* ─── COMMUNITY THEMES ─── */
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─── Copper Oxide ─── */
|
||||
[data-theme='copper-oxide'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2345b8b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #080f0e;
|
||||
--ctp-mantle: #0c1614;
|
||||
--ctp-base: #101a18;
|
||||
--ctp-surface0: #131f1c;
|
||||
--ctp-surface1: #1a2e2b;
|
||||
--ctp-surface2: #203c38;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #256860;
|
||||
--ctp-overlay1: #358880;
|
||||
--ctp-overlay2: #45a89a;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #d8f0ee;
|
||||
--ctp-subtext1: #a0d8d4;
|
||||
--ctp-subtext0: #68b8b0;
|
||||
|
||||
/* Teal accent */
|
||||
--ctp-teal: #4ecdc4;
|
||||
--ctp-sky: #4ecdc4;
|
||||
--ctp-sapphire: #35a09a;
|
||||
--ctp-blue: #207870;
|
||||
--ctp-lavender: #4ecdc4;
|
||||
--ctp-mauve: #35a09a;
|
||||
--ctp-pink: #207870;
|
||||
--ctp-flamingo: #4ecdc4;
|
||||
--ctp-rosewater: #35a09a;
|
||||
|
||||
/* Semantic */
|
||||
--ctp-red: #ff4444;
|
||||
--ctp-maroon: #ff8844;
|
||||
--ctp-peach: #ff8844;
|
||||
--ctp-yellow: #ffcc44;
|
||||
--ctp-green: #44ff88;
|
||||
|
||||
/* UI tokens */
|
||||
--bg-app: #101a18;
|
||||
--bg-sidebar: #0c1614;
|
||||
--bg-card: #131f1c;
|
||||
--bg-hover: #1a2e2b;
|
||||
--bg-player: #0c1614;
|
||||
--bg-glass: rgba(16, 26, 24, 0.95);
|
||||
|
||||
--accent: #45b8b0;
|
||||
--accent-dim: rgba(78, 205, 196, 0.07);
|
||||
--accent-glow: rgba(78, 205, 196, 0.14);
|
||||
|
||||
--text-primary: #d8f0ee;
|
||||
--text-secondary: #68b8b0;
|
||||
--text-muted: #256860;
|
||||
|
||||
--border: #1a2e2b;
|
||||
--border-subtle: #131f1c;
|
||||
--border-dropdown: #203c38;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.90);
|
||||
|
||||
--positive: #44ff88;
|
||||
--warning: #ffcc44;
|
||||
--danger: #ff4444;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,259 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,286 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
/* Album detail header — year/genre/info too dark on near-black bg, brighten */
|
||||
[data-theme='dark-side-of-the-moon'] .album-detail-info {
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
[data-theme='dark-side-of-the-moon'] .connection-server {
|
||||
color: #777777;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,265 @@
|
||||
/* ─────────────────────────────────────────── */
|
||||
|
||||
[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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── Dawnfox ─── */
|
||||
[data-theme='dawnfox'] {
|
||||
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%23575279%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: #ebe5df;
|
||||
--ctp-mantle: #ebe5df;
|
||||
--ctp-base: #faf4ed;
|
||||
--ctp-surface0: #ebe0df;
|
||||
--ctp-surface1: #ebdfe4;
|
||||
--ctp-surface2: #bdbfc9;
|
||||
--ctp-overlay0: #9893a5;
|
||||
--ctp-overlay1: #a8a3b3;
|
||||
--ctp-overlay2: #625c87;
|
||||
--ctp-text: #575279;
|
||||
--ctp-subtext1: #4c4769;
|
||||
--ctp-subtext0: #625c87;
|
||||
--ctp-mauve: #907aa9;
|
||||
--ctp-lavender: #575279;
|
||||
--ctp-pink: #d685af;
|
||||
--ctp-flamingo: #d7827e;
|
||||
--ctp-rosewater: #d7827e;
|
||||
--ctp-blue: #286983;
|
||||
--ctp-sapphire: #286983;
|
||||
--ctp-sky: #56949f;
|
||||
--ctp-teal: #56949f;
|
||||
--ctp-green: #618774;
|
||||
--ctp-yellow: #ea9d34;
|
||||
--ctp-peach: #d7827e;
|
||||
--ctp-maroon: #b4637a;
|
||||
--ctp-red: #b4637a;
|
||||
|
||||
--bg-app: #faf4ed;
|
||||
--bg-sidebar: #ebe5df;
|
||||
--bg-card: #ebe0df;
|
||||
--bg-hover: #ebdfe4;
|
||||
--bg-player: #ebe5df;
|
||||
--bg-glass: rgba(250, 244, 237, 0.92);
|
||||
--accent: #907aa9;
|
||||
--accent-dim: rgba(144, 122, 169, 0.12);
|
||||
--accent-glow: rgba(144, 122, 169, 0.25);
|
||||
--text-primary: #575279;
|
||||
--text-secondary: #625c87;
|
||||
--text-muted: #9893a5;
|
||||
--border: #ebdfe4;
|
||||
--border-subtle: #ebe0df;
|
||||
--border-dropdown: #bdbfc9;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.15);
|
||||
--positive: #618774;
|
||||
--warning: #ea9d34;
|
||||
--danger: #b4637a;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── Dayfox ─── */
|
||||
[data-theme='dayfox'] {
|
||||
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%233d2b5a%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: #e4dcd4;
|
||||
--ctp-mantle: #e4dcd4;
|
||||
--ctp-base: #f6f2ee;
|
||||
--ctp-surface0: #dbd1dd;
|
||||
--ctp-surface1: #d3c7bb;
|
||||
--ctp-surface2: #aab0ad;
|
||||
--ctp-overlay0: #837a72;
|
||||
--ctp-overlay1: #643f61;
|
||||
--ctp-overlay2: #3d2b5a;
|
||||
--ctp-text: #3d2b5a;
|
||||
--ctp-subtext1: #302b5d;
|
||||
--ctp-subtext0: #643f61;
|
||||
--ctp-mauve: #6e33ce;
|
||||
--ctp-lavender: #2848a9;
|
||||
--ctp-pink: #a440b5;
|
||||
--ctp-flamingo: #a5222f;
|
||||
--ctp-rosewater: #955f61;
|
||||
--ctp-blue: #2848a9;
|
||||
--ctp-sapphire: #287980;
|
||||
--ctp-sky: #287980;
|
||||
--ctp-teal: #287980;
|
||||
--ctp-green: #396847;
|
||||
--ctp-yellow: #ac5402;
|
||||
--ctp-peach: #955f61;
|
||||
--ctp-maroon: #a5222f;
|
||||
--ctp-red: #a5222f;
|
||||
|
||||
--bg-app: #f6f2ee;
|
||||
--bg-sidebar: #e4dcd4;
|
||||
--bg-card: #dbd1dd;
|
||||
--bg-hover: #d3c7bb;
|
||||
--bg-player: #e4dcd4;
|
||||
--bg-glass: rgba(246, 242, 238, 0.92);
|
||||
--accent: #2848a9;
|
||||
--accent-dim: rgba(40, 72, 169, 0.12);
|
||||
--accent-glow: rgba(40, 72, 169, 0.25);
|
||||
--text-primary: #3d2b5a;
|
||||
--text-secondary: #643f61;
|
||||
--text-muted: #837a72;
|
||||
--border: #d3c7bb;
|
||||
--border-subtle: #dbd1dd;
|
||||
--border-dropdown: #aab0ad;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.18);
|
||||
--positive: #396847;
|
||||
--warning: #ac5402;
|
||||
--danger: #a5222f;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
/* ─── Deep Forest ─── */
|
||||
[data-theme='deep-forest'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236aa37c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #0a0f0b;
|
||||
--ctp-mantle: #0f1511;
|
||||
--ctp-base: #141c17;
|
||||
--ctp-surface0: #19231d;
|
||||
--ctp-surface1: #223027;
|
||||
--ctp-surface2: #2c3d31;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #41634f;
|
||||
--ctp-overlay1: #547c64;
|
||||
--ctp-overlay2: #689578;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #e0efe5;
|
||||
--ctp-subtext1: #b3d1bd;
|
||||
--ctp-subtext0: #84a791;
|
||||
|
||||
/* Forest green accent */
|
||||
--ctp-teal: #6aa37c;
|
||||
--ctp-sky: #6aa37c;
|
||||
--ctp-sapphire: #56896a;
|
||||
--ctp-blue: #456f57;
|
||||
--ctp-lavender: #81ba92;
|
||||
--ctp-mauve: #56896a;
|
||||
--ctp-pink: #456f57;
|
||||
--ctp-flamingo: #81ba92;
|
||||
--ctp-rosewater: #56896a;
|
||||
|
||||
--ctp-red: #d97777;
|
||||
--ctp-maroon: #d39a63;
|
||||
--ctp-peach: #d39a63;
|
||||
--ctp-yellow: #c9b76a;
|
||||
--ctp-green: #6aa37c;
|
||||
|
||||
--bg-app: #141c17;
|
||||
--bg-sidebar: #0f1511;
|
||||
--bg-card: #19231d;
|
||||
--bg-hover: #223027;
|
||||
--bg-player: #0f1511;
|
||||
--bg-glass: rgba(20,28,23,0.82);
|
||||
|
||||
--accent: #6aa37c;
|
||||
--accent-dim: rgba(106,163,124,0.05);
|
||||
--accent-glow: rgba(106,163,124,0.09);
|
||||
|
||||
--text-primary: #e0efe5;
|
||||
--text-secondary: #84a791;
|
||||
--text-muted: #547c64;
|
||||
|
||||
--border: #2c3d31;
|
||||
--border-subtle: #223027;
|
||||
--border-dropdown: #36493b;
|
||||
--shadow-dropdown: rgba(0,0,0,0.72);
|
||||
|
||||
--positive: #6aa37c;
|
||||
--warning: #c9b76a;
|
||||
--danger: #d97777;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
/* ─── Divider ─── */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border-subtle);
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
/* ─── Dracula — component-level overrides ─────────────────────────────── */
|
||||
|
||||
/* Column resize grip — was surface1 on bg-card = 1:1 (identical, invisible).
|
||||
Use the Comment-lifted tone for strong legibility. */
|
||||
[data-theme='dracula'] .col-resize-handle::after {
|
||||
background: #c0bfcc; /* 5.5:1 on bg-card — visible */
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
/* Focus ring — Dracula Purple for keyboard nav */
|
||||
[data-theme='dracula'] *:focus-visible {
|
||||
outline: 2px solid #bd93f9;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Scrollbar thumb — Comment colour (Dracula-authentic) */
|
||||
[data-theme='dracula'] ::-webkit-scrollbar-thumb {
|
||||
background: #6272a4;
|
||||
}
|
||||
[data-theme='dracula'] *:hover::-webkit-scrollbar-thumb,
|
||||
[data-theme='dracula'] .is-scrolling::-webkit-scrollbar-thumb {
|
||||
background: #8b95c0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
/* ─── Dracula ─── */
|
||||
[data-theme='dracula'] {
|
||||
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%23f8f8f2%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: official Dracula (draculatheme.com) preserved verbatim.
|
||||
Contrast audit (vs. --bg-app #282a36, L≈0.024):
|
||||
text-primary 13.4:1 AAA ✓ (official Foreground)
|
||||
text-secondary 10.8:1 AAA ✓
|
||||
text-muted 4.9:1 AA ✓ (lifted from Comment #6272a4 at 2.99:1 — below all thresholds)
|
||||
accent 5.9:1 AA ✓ (Purple)
|
||||
positive 10.4:1 AAA ✓ (Green)
|
||||
warning 8.4:1 AAA ✓ (Orange)
|
||||
danger 4.5:1 AA ✓ (Red)
|
||||
Border/hover separation fixed: Dracula's "Current Line" (#44475a)
|
||||
was doing triple duty as card bg + border + hover, producing zero
|
||||
visible structure. Borders now use the official Comment #6272a4
|
||||
(1.9:1 — Dracula-authentic), hover lifts to Selection #565869.
|
||||
*/
|
||||
--ctp-crust: #191a21;
|
||||
--ctp-mantle: #21222c;
|
||||
--ctp-base: #282a36;
|
||||
--ctp-surface0: #3a3c4e;
|
||||
--ctp-surface1: #44475a; /* official "Current Line" */
|
||||
--ctp-surface2: #565869; /* official "Selection" */
|
||||
--ctp-overlay0: #6272a4; /* official "Comment" */
|
||||
--ctp-overlay1: #8b95c0; /* lifted Comment for UI use */
|
||||
--ctp-overlay2: #c0bfcc;
|
||||
--ctp-text: #f8f8f2;
|
||||
--ctp-subtext1: #e0dfe6;
|
||||
--ctp-subtext0: #c0bfcc;
|
||||
--ctp-mauve: #bd93f9;
|
||||
--ctp-lavender: #bd93f9;
|
||||
--ctp-pink: #ff79c6;
|
||||
--ctp-flamingo: #ff79c6;
|
||||
--ctp-rosewater:#ffb86c;
|
||||
--ctp-blue: #6272a4;
|
||||
--ctp-sapphire: #8be9fd;
|
||||
--ctp-sky: #8be9fd;
|
||||
--ctp-teal: #8be9fd;
|
||||
--ctp-green: #50fa7b;
|
||||
--ctp-yellow: #f1fa8c;
|
||||
--ctp-peach: #ffb86c;
|
||||
--ctp-maroon: #ff5555;
|
||||
--ctp-red: #ff5555;
|
||||
|
||||
--bg-app: #282a36;
|
||||
--bg-sidebar: #21222c;
|
||||
--bg-card: #44475a;
|
||||
--bg-hover: #565869; /* official Selection — 1.4:1 vs card, perceptible (was identical to card) */
|
||||
--bg-player: #21222c;
|
||||
--bg-glass: rgba(40, 42, 54, 0.88);
|
||||
--accent: #bd93f9;
|
||||
--accent-dim: rgba(189, 147, 249, 0.18);
|
||||
--accent-glow: rgba(189, 147, 249, 0.35);
|
||||
--text-primary: #f8f8f2;
|
||||
--text-secondary: #e0dfe6;
|
||||
--text-muted: #8b95c0; /* 4.9:1 AA ✓, lifted Comment — was #6272a4 (2.99:1 below AA) */
|
||||
--border: #6272a4; /* official Comment — 1.9:1, visible (was #44475a = invisible on card) */
|
||||
--border-subtle: #4e5167; /* 1.2:1 subtle but perceptible */
|
||||
--border-dropdown: #6272a4;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.6);
|
||||
--positive: #50fa7b;
|
||||
--warning: #ffb86c;
|
||||
--danger: #ff5555;
|
||||
--waveform-played: #bd93f9;
|
||||
--waveform-buffered: #6272a4;
|
||||
--waveform-unplayed: #3a3c4e;
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,53 @@
|
||||
/* ─── Duskfox ─── */
|
||||
[data-theme='duskfox'] {
|
||||
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%23e0def4%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: #191726;
|
||||
--ctp-mantle: #191726;
|
||||
--ctp-base: #232136;
|
||||
--ctp-surface0: #2d2a45;
|
||||
--ctp-surface1: #373354;
|
||||
--ctp-surface2: #4b4673;
|
||||
--ctp-overlay0: #817c9c;
|
||||
--ctp-overlay1: #6e6a86;
|
||||
--ctp-overlay2: #cdcbe0;
|
||||
--ctp-text: #e0def4;
|
||||
--ctp-subtext1: #cdcbe0;
|
||||
--ctp-subtext0: #817c9c;
|
||||
--ctp-mauve: #c4a7e7;
|
||||
--ctp-lavender: #c4a7e7;
|
||||
--ctp-pink: #eb98c3;
|
||||
--ctp-flamingo: #eb6f92;
|
||||
--ctp-rosewater: #ea9a97;
|
||||
--ctp-blue: #569fba;
|
||||
--ctp-sapphire: #569fba;
|
||||
--ctp-sky: #9ccfd8;
|
||||
--ctp-teal: #9ccfd8;
|
||||
--ctp-green: #a3be8c;
|
||||
--ctp-yellow: #f6c177;
|
||||
--ctp-peach: #ea9a97;
|
||||
--ctp-maroon: #eb6f92;
|
||||
--ctp-red: #eb6f92;
|
||||
|
||||
--bg-app: #232136;
|
||||
--bg-sidebar: #191726;
|
||||
--bg-card: #2d2a45;
|
||||
--bg-hover: #373354;
|
||||
--bg-player: #191726;
|
||||
--bg-glass: rgba(35, 33, 54, 0.75);
|
||||
--accent: #c4a7e7;
|
||||
--accent-dim: rgba(196, 167, 231, 0.15);
|
||||
--accent-glow: rgba(196, 167, 231, 0.3);
|
||||
--text-primary: #e0def4;
|
||||
--text-secondary: #cdcbe0;
|
||||
--text-muted: #817c9c;
|
||||
--border: #373354;
|
||||
--border-subtle: #2d2a45;
|
||||
--border-dropdown: #4b4673;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.6);
|
||||
--positive: #a3be8c;
|
||||
--warning: #f6c177;
|
||||
--danger: #eb6f92;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
/* ─── Focus ─── */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
/* ─── Font overrides ─── */
|
||||
[data-font='inter'] {
|
||||
--font-sans: 'Inter Variable', system-ui, -apple-system, sans-serif;
|
||||
--font-display: 'Inter Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='outfit'] {
|
||||
--font-sans: 'Outfit Variable', system-ui, sans-serif;
|
||||
--font-display: 'Outfit Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='dm-sans'] {
|
||||
--font-sans: 'DM Sans Variable', system-ui, sans-serif;
|
||||
--font-display: 'DM Sans Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='nunito'] {
|
||||
--font-sans: 'Nunito Variable', system-ui, sans-serif;
|
||||
--font-display: 'Nunito Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='rubik'] {
|
||||
--font-sans: 'Rubik Variable', system-ui, sans-serif;
|
||||
--font-display: 'Rubik Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='space-grotesk'] {
|
||||
--font-sans: 'Space Grotesk Variable', system-ui, sans-serif;
|
||||
--font-display: 'Space Grotesk Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='figtree'] {
|
||||
--font-sans: 'Figtree Variable', system-ui, sans-serif;
|
||||
--font-display: 'Figtree Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='manrope'] {
|
||||
--font-sans: 'Manrope Variable', system-ui, sans-serif;
|
||||
--font-display: 'Manrope Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='plus-jakarta-sans'] {
|
||||
--font-sans: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
|
||||
--font-display: 'Plus Jakarta Sans Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='lexend'] {
|
||||
--font-sans: 'Lexend Variable', system-ui, sans-serif;
|
||||
--font-display: 'Lexend Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='geist'] {
|
||||
--font-sans: 'Geist Variable', system-ui, sans-serif;
|
||||
--font-display: 'Geist Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='jetbrains-mono'] {
|
||||
--font-sans: 'JetBrains Mono Variable', monospace;
|
||||
--font-display: 'JetBrains Mono Variable', monospace;
|
||||
}
|
||||
|
||||
[data-font='golos-text'] {
|
||||
--font-sans: 'Golos Text Variable', system-ui, sans-serif;
|
||||
--font-display: 'Golos Text Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='unbounded'] {
|
||||
--font-sans: 'Unbounded Variable', system-ui, sans-serif;
|
||||
--font-display: 'Unbounded Variable', sans-serif;
|
||||
}
|
||||
|
||||
[data-font='opendyslexic'] {
|
||||
--font-sans: 'OpenDyslexic', system-ui, sans-serif;
|
||||
--font-display: 'OpenDyslexic', sans-serif;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
/* ─── Global Base Settings ─── */
|
||||
:root {
|
||||
/* Typography */
|
||||
--font-sans: 'Inter Variable', system-ui, -apple-system, sans-serif;
|
||||
--font-display: 'Space Grotesk Variable', 'Inter Variable', 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
/* ─── Global Dragging State ─── */
|
||||
body.is-dragging,
|
||||
body.is-dragging * {
|
||||
user-select: none !important;
|
||||
cursor: col-resize !important;
|
||||
}
|
||||
|
||||
/* Overlay scrollbar thumb drag — override queue resizer cursor (z-index). */
|
||||
body.is-overlay-scrollbar-thumb-drag,
|
||||
body.is-overlay-scrollbar-thumb-drag * {
|
||||
user-select: none !important;
|
||||
cursor: grabbing !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
/* ─── 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: #707070;
|
||||
--ctp-overlay1: #909090;
|
||||
--ctp-overlay2: #b0b0b0;
|
||||
--ctp-text: #d8d8d8;
|
||||
--ctp-subtext1: #b8b8b8;
|
||||
--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: #d8d8d8;
|
||||
--text-secondary: #ffd700;
|
||||
/* wanted-level gold — the key differentiator */
|
||||
--text-muted: #707070;
|
||||
--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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
/* ── Gruvbox Light Soft overrides ── */
|
||||
[data-theme='gruvbox-light-soft'] .album-detail-back {
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
[data-theme='gruvbox-light-soft'] .album-detail-back:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme='gruvbox-light-soft'] .album-detail-badge {
|
||||
background: var(--accent);
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,206 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,209 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
@import './_intro.css';
|
||||
@import './catppuccin-mocha-variables.css';
|
||||
@import './catppuccin-macchiato-variables.css';
|
||||
@import './catppuccin-frapp-variables.css';
|
||||
@import './catppuccin-latte-variables-light-theme.css';
|
||||
@import './latte-light-theme-component-overrides.css';
|
||||
@import './nord-polar-night-dark.css';
|
||||
@import './nord-snow-storm-light.css';
|
||||
@import './nord-frost-deep-ocean-blue.css';
|
||||
@import './nord-aurora-dark-aurora-purple.css';
|
||||
@import './poison.css';
|
||||
@import './classic-winamp-winamp-2-x-base-skin.css';
|
||||
@import './wnamp-component-level-overrides.css';
|
||||
@import './nucleo-classic-hifi-winamp-brass.css';
|
||||
@import './psychowave-synthwave-retrowave.css';
|
||||
@import './gruvbox-dark-hard.css';
|
||||
@import './gruvbox-dark-medium.css';
|
||||
@import './gruvbox-dark-soft.css';
|
||||
@import './gruvbox-light-hard.css';
|
||||
@import './gruvbox-light-medium.css';
|
||||
@import './gruvbox-light-soft.css';
|
||||
@import './lambda-17-half-life-city-17.css';
|
||||
@import './guild-wars-1-tyria.css';
|
||||
@import './grand-theft-audio-gta-v-los-santos-at-night.css';
|
||||
@import './v-tactical.css';
|
||||
@import './nightcity-2077-cyberpunk-2077.css';
|
||||
@import './heisenberg-breaking-bad.css';
|
||||
@import './a-theme-of-ice-and-fire-game-of-thrones.css';
|
||||
@import './d-oh-matic.css';
|
||||
@import './order-of-the-phoenix.css';
|
||||
@import './w98.css';
|
||||
@import './global-base-settings.css';
|
||||
@import './spotless.css';
|
||||
@import './cupertino-beats.css';
|
||||
@import './dzr0.css';
|
||||
@import './reset.css';
|
||||
@import './scrollbars.css';
|
||||
@import './focus.css';
|
||||
@import './global-dragging-state.css';
|
||||
@import './mouse-event-dnd-cursor-psy-dragging.css';
|
||||
@import './utility-classes.css';
|
||||
@import './button-variants.css';
|
||||
@import './input.css';
|
||||
@import './input-search.css';
|
||||
@import './card.css';
|
||||
@import './album-grid.css';
|
||||
@import './scrollable-area.css';
|
||||
@import './divider.css';
|
||||
@import './badge.css';
|
||||
@import './star-rating.css';
|
||||
@import './animations.css';
|
||||
@import './progress-range.css';
|
||||
@import './loading-spinner.css';
|
||||
@import './musicmatch-jukebox-y2k-metallic-silver-blue-display.css';
|
||||
@import './wmp8-classic-windows-media-player-8-xp-luna.css';
|
||||
@import './powerdvd-classic-virtual-hifi-receiver-vfd-display.css';
|
||||
@import './cyberlink-powerdvd.css';
|
||||
@import './vintage-tube-radio-1950s-bakelite-vacuum-tube.css';
|
||||
@import './windows-7-aero-aero-glass-frutiger-aero.css';
|
||||
@import './windows-7-aero-glass.css';
|
||||
@import './windows-xp-luna-classic-2001.css';
|
||||
@import './windows-xp-luna-teal.css';
|
||||
@import './macos-ventura-light.css';
|
||||
@import './macos-ventura-dark.css';
|
||||
@import './neon-drift.css';
|
||||
@import './font-overrides.css';
|
||||
@import './middle-earth-epic-fantasy-cinematic.css';
|
||||
@import './middle-earth-the-one-ring-inscription-glow.css';
|
||||
@import './middle-earth-red-book-of-westmarch.css';
|
||||
@import './morpheus-matrix-style.css';
|
||||
@import './the-matrix-morpheus.css';
|
||||
@import './pandora-bioluminescent-sci-fi.css';
|
||||
@import './stark-hud-iron-man-arc-reactor.css';
|
||||
@import './blade-cinematic-industrial.css';
|
||||
@import './dune-arrakis.css';
|
||||
@import './back-to-the-future-hill-valley-85.css';
|
||||
@import './ubuntu-unity-ambiance-classic-light.css';
|
||||
@import './ubuntu-ambiance-component-level-overrides.css';
|
||||
@import './windows-10-fluent-design-light.css';
|
||||
@import './windows-vista-aero-glass.css';
|
||||
@import './data-theme-aqua-quartz.css';
|
||||
@import './spider-tech-spider-man.css';
|
||||
@import './ms-dos.css';
|
||||
@import './unix-shell.css';
|
||||
@import './windows-11-dark-component-overrides.css';
|
||||
@import './north-park-south-park.css';
|
||||
@import './dark-side-of-the-moon-inspired-pink-floyd.css';
|
||||
@import './powerslave-inspired-iron-maiden.css';
|
||||
@import './nightfox.css';
|
||||
@import './dayfox.css';
|
||||
@import './dawnfox.css';
|
||||
@import './duskfox.css';
|
||||
@import './nordfox.css';
|
||||
@import './terafox.css';
|
||||
@import './carbonfox.css';
|
||||
@import './dracula.css';
|
||||
@import './dracula-component-level-overrides.css';
|
||||
@import './kanagawa-wave-rebelot-kanagawa-nvim-default-dark.css';
|
||||
@import './kanagawa-dragon-rebelot-kanagawa-nvim-high-contrast-dark.css';
|
||||
@import './kanagawa-lotus-rebelot-kanagawa-nvim-light.css';
|
||||
@import './atom-one-dark-th3whit3wolf-one-nvim-dark-variant.css';
|
||||
@import './atom-one-light-th3whit3wolf-one-nvim-light-variant.css';
|
||||
@import './1984-juanmnl-vs-1984-default-dark-deep-blue-cyberpunk.css';
|
||||
@import './1984-cyberpunk-juanmnl-vs-1984-mint-green-variant.css';
|
||||
@import './1984-light-juanmnl-vs-1984-bluish-white.css';
|
||||
@import './1984-orwell-juanmnl-vs-1984-sepia-dystopian-variant.css';
|
||||
@import './vision-dark-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css';
|
||||
@import './vision-dark-component-level-overrides.css';
|
||||
@import './vision-navy-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css';
|
||||
@import './vision-navy-component-level-overrides.css';
|
||||
@import './community-themes.css';
|
||||
@import './amoled-black-pure.css';
|
||||
@import './midnight-blue.css';
|
||||
@import './sepia-dark.css';
|
||||
@import './volcanic-dark.css';
|
||||
@import './deep-forest.css';
|
||||
@import './violet-haze.css';
|
||||
@import './copper-oxide.css';
|
||||
@import './sakura-night.css';
|
||||
@import './obsidian-gold.css';
|
||||
@import './obsidian-black.css';
|
||||
@import './carbon-grey.css';
|
||||
@@ -0,0 +1,24 @@
|
||||
/* ─── Input Search ─── */
|
||||
.input-search {
|
||||
width: 100%;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
padding-left: 36px;
|
||||
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: 13px;
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-search::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.input-search:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-dim);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
/* ─── 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 */
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── Kanagawa Dragon (rebelot/kanagawa.nvim — high-contrast dark) ─── */
|
||||
[data-theme='kanagawa-dragon'] {
|
||||
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%23c5c9c5%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: #0d0c0c; /* dragonBlack0 */
|
||||
--ctp-mantle: #12120f; /* dragonBlack1 */
|
||||
--ctp-base: #181616; /* dragonBlack3 — main bg */
|
||||
--ctp-surface0: #282727; /* dragonBlack4 */
|
||||
--ctp-surface1: #393836; /* dragonBlack5 */
|
||||
--ctp-surface2: #625e5a; /* dragonBlack6 */
|
||||
--ctp-overlay0: #737c73; /* dragonAsh */
|
||||
--ctp-overlay1: #9e9b93; /* dragonGray2 */
|
||||
--ctp-overlay2: #a6a69c; /* dragonGray */
|
||||
--ctp-text: #c5c9c5; /* dragonWhite */
|
||||
--ctp-subtext1: #C8C093; /* oldWhite */
|
||||
--ctp-subtext0: #a6a69c;
|
||||
--ctp-mauve: #8992a7; /* dragonViolet */
|
||||
--ctp-lavender: #949fb5; /* dragonTeal */
|
||||
--ctp-pink: #a292a3; /* dragonPink */
|
||||
--ctp-flamingo: #c4746e; /* dragonRed */
|
||||
--ctp-rosewater:#b6927b; /* dragonOrange */
|
||||
--ctp-blue: #8ba4b0; /* dragonBlue2 */
|
||||
--ctp-sapphire: #8ba4b0;
|
||||
--ctp-sky: #8ea4a2; /* dragonAqua */
|
||||
--ctp-teal: #8ea4a2;
|
||||
--ctp-green: #8a9a7b; /* dragonGreen2 */
|
||||
--ctp-yellow: #c4b28a; /* dragonYellow */
|
||||
--ctp-peach: #b98d7b; /* dragonOrange2 */
|
||||
--ctp-maroon: #c4746e;
|
||||
--ctp-red: #c4746e;
|
||||
|
||||
--bg-app: #181616;
|
||||
--bg-sidebar: #12120f;
|
||||
--bg-card: #282727;
|
||||
--bg-hover: #393836;
|
||||
--bg-player: #12120f;
|
||||
--bg-glass: rgba(24, 22, 22, 0.82);
|
||||
--accent: #8ba4b0; /* dragonBlue2 */
|
||||
--accent-dim: rgba(139, 164, 176, 0.16);
|
||||
--accent-glow: rgba(139, 164, 176, 0.32);
|
||||
--text-primary: #c5c9c5; /* dragonWhite */
|
||||
--text-secondary: #a6a69c; /* dragonGray */
|
||||
--text-muted: #737c73; /* dragonAsh */
|
||||
--border: #393836;
|
||||
--border-subtle: #282727;
|
||||
--border-dropdown: #625e5a;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.7);
|
||||
--positive: #8a9a7b; /* dragonGreen2 */
|
||||
--warning: #c4b28a; /* dragonYellow */
|
||||
--danger: #c4746e; /* dragonRed */
|
||||
--waveform-played: #8ba4b0;
|
||||
--waveform-buffered: #625e5a;
|
||||
--waveform-unplayed: #282727;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── Kanagawa Lotus (rebelot/kanagawa.nvim — light) ─── */
|
||||
[data-theme='kanagawa-lotus'] {
|
||||
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%23545464%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: #d5cea3; /* lotusWhite0 */
|
||||
--ctp-mantle: #dcd5ac; /* lotusWhite1 */
|
||||
--ctp-base: #f2ecbc; /* lotusWhite3 — main bg */
|
||||
--ctp-surface0: #e5ddb0; /* lotusWhite2 */
|
||||
--ctp-surface1: #e7dba0; /* lotusWhite4 */
|
||||
--ctp-surface2: #e4d794; /* lotusWhite5 */
|
||||
--ctp-overlay0: #8a8980; /* lotusGray3 */
|
||||
--ctp-overlay1: #716e61; /* lotusGray2 */
|
||||
--ctp-overlay2: #545464; /* lotusInk1 */
|
||||
--ctp-text: #545464; /* lotusInk1 */
|
||||
--ctp-subtext1: #43436c; /* lotusInk2 */
|
||||
--ctp-subtext0: #716e61;
|
||||
--ctp-mauve: #624c83; /* lotusViolet4 */
|
||||
--ctp-lavender: #766b90; /* lotusViolet2 */
|
||||
--ctp-pink: #b35b79; /* lotusPink */
|
||||
--ctp-flamingo: #c84053; /* lotusRed */
|
||||
--ctp-rosewater:#cc6d00; /* lotusOrange */
|
||||
--ctp-blue: #4d699b; /* lotusBlue4 */
|
||||
--ctp-sapphire: #4e8ca2; /* lotusTeal1 */
|
||||
--ctp-sky: #6693bf; /* lotusTeal2 */
|
||||
--ctp-teal: #597b75; /* lotusAqua */
|
||||
--ctp-green: #6f894e; /* lotusGreen */
|
||||
--ctp-yellow: #836f4a; /* lotusYellow2 */
|
||||
--ctp-peach: #cc6d00;
|
||||
--ctp-maroon: #c84053;
|
||||
--ctp-red: #c84053;
|
||||
|
||||
--bg-app: #f2ecbc;
|
||||
--bg-sidebar: #dcd5ac;
|
||||
--bg-card: #d5cea3;
|
||||
--bg-hover: #e7dba0;
|
||||
--bg-player: #dcd5ac;
|
||||
--bg-glass: rgba(242, 236, 188, 0.92);
|
||||
--accent: #4d699b; /* lotusBlue4 */
|
||||
--accent-dim: rgba(77, 105, 155, 0.14);
|
||||
--accent-glow: rgba(77, 105, 155, 0.26);
|
||||
--text-primary: #545464; /* lotusInk1 */
|
||||
--text-secondary: #43436c; /* lotusInk2 */
|
||||
--text-muted: #8a8980; /* lotusGray3 */
|
||||
--border: #e7dba0;
|
||||
--border-subtle: #d5cea3;
|
||||
--border-dropdown: #716e61;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.18);
|
||||
--positive: #6f894e; /* lotusGreen */
|
||||
--warning: #cc6d00; /* lotusOrange */
|
||||
--danger: #c84053; /* lotusRed */
|
||||
--waveform-played: #4d699b;
|
||||
--waveform-buffered: #8a8980;
|
||||
--waveform-unplayed: #d5cea3;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── Kanagawa Wave (rebelot/kanagawa.nvim — default dark) ─── */
|
||||
[data-theme='kanagawa-wave'] {
|
||||
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%23DCD7BA%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: #16161D; /* sumiInk0 */
|
||||
--ctp-mantle: #181820; /* sumiInk1 */
|
||||
--ctp-base: #1F1F28; /* sumiInk3 — main bg */
|
||||
--ctp-surface0: #2A2A37; /* sumiInk4 */
|
||||
--ctp-surface1: #363646; /* sumiInk5 */
|
||||
--ctp-surface2: #54546D; /* sumiInk6 */
|
||||
--ctp-overlay0: #727169; /* fujiGray */
|
||||
--ctp-overlay1: #938AA9; /* springViolet1 */
|
||||
--ctp-overlay2: #C8C093; /* oldWhite */
|
||||
--ctp-text: #DCD7BA; /* fujiWhite */
|
||||
--ctp-subtext1: #C8C093; /* oldWhite */
|
||||
--ctp-subtext0: #9CABCA; /* springViolet2 */
|
||||
--ctp-mauve: #957FB8; /* oniViolet */
|
||||
--ctp-lavender: #b8b4d0; /* oniViolet2 */
|
||||
--ctp-pink: #D27E99; /* sakuraPink */
|
||||
--ctp-flamingo: #E46876; /* waveRed */
|
||||
--ctp-rosewater:#FFA066; /* surimiOrange */
|
||||
--ctp-blue: #7E9CD8; /* crystalBlue */
|
||||
--ctp-sapphire: #7FB4CA; /* springBlue */
|
||||
--ctp-sky: #A3D4D5; /* lightBlue */
|
||||
--ctp-teal: #7AA89F; /* waveAqua2 */
|
||||
--ctp-green: #98BB6C; /* springGreen */
|
||||
--ctp-yellow: #E6C384; /* carpYellow */
|
||||
--ctp-peach: #FFA066; /* surimiOrange */
|
||||
--ctp-maroon: #FF5D62; /* peachRed */
|
||||
--ctp-red: #E46876; /* waveRed */
|
||||
|
||||
--bg-app: #1F1F28;
|
||||
--bg-sidebar: #181820;
|
||||
--bg-card: #2A2A37;
|
||||
--bg-hover: #363646;
|
||||
--bg-player: #181820;
|
||||
--bg-glass: rgba(31, 31, 40, 0.78);
|
||||
--accent: #7E9CD8; /* crystalBlue — signature Kanagawa accent */
|
||||
--accent-dim: rgba(126, 156, 216, 0.16);
|
||||
--accent-glow: rgba(126, 156, 216, 0.32);
|
||||
--text-primary: #DCD7BA; /* fujiWhite */
|
||||
--text-secondary: #C8C093; /* oldWhite */
|
||||
--text-muted: #727169; /* fujiGray */
|
||||
--border: #363646;
|
||||
--border-subtle: #2A2A37;
|
||||
--border-dropdown: #54546D;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.6);
|
||||
--positive: #98BB6C; /* springGreen */
|
||||
--warning: #E6C384; /* carpYellow */
|
||||
--danger: #E46876; /* waveRed */
|
||||
--waveform-played: #7E9CD8;
|
||||
--waveform-buffered: #54546D;
|
||||
--waveform-unplayed: #2A2A37;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,236 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
/* ─── Latte light-theme component overrides ─── */
|
||||
[data-theme='latte'] {
|
||||
--border-dropdown: var(--border);
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
[data-theme='latte'] .album-detail-back {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
[data-theme='latte'] .album-detail-back:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme='latte'] .np-artist-album { color: var(--text-secondary); }
|
||||
[data-theme='latte'] .np-badge { background: var(--bg-hover); color: var(--text-primary); }
|
||||
[data-theme='latte'] .np-star-btn { color: var(--text-muted); }
|
||||
[data-theme='latte'] .np-tag-cloud-header { color: var(--text-muted); }
|
||||
[data-theme='latte'] .np-tag { background: var(--bg-hover); color: var(--text-secondary); }
|
||||
[data-theme='latte'] .np-album-track:hover { background: var(--bg-hover); }
|
||||
[data-theme='latte'] .np-album-track.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
|
||||
[data-theme='latte'] .np-album-track-num { color: var(--text-muted); }
|
||||
[data-theme='latte'] .np-album-track-title { color: var(--text-primary); }
|
||||
[data-theme='latte'] .np-album-track.active .np-album-track-title { color: var(--accent); }
|
||||
[data-theme='latte'] .np-album-track-dur { color: var(--text-muted); }
|
||||
[data-theme='latte'] .np-link:hover { color: var(--accent); }
|
||||
[data-theme='latte'] .np-radio-time { color: var(--text-muted); }
|
||||
[data-theme='latte'] .np-bio-text { color: var(--text-secondary); }
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Middle Earth — Epic Fantasy / Cinematic
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
@@ -0,0 +1,589 @@
|
||||
/* ─── 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: #5a4428;
|
||||
--border: rgba(122, 92, 24, 0.85);
|
||||
--border-subtle: rgba(180, 140, 50, 0.18);
|
||||
--positive: #4a7038;
|
||||
--warning: #805408;
|
||||
--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: 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: #b88a50;
|
||||
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: #a88048;
|
||||
}
|
||||
|
||||
/* ── 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 — sidebar is dark, need light text */
|
||||
[data-theme='middle-earth'] .connection-type,
|
||||
[data-theme='middle-earth'] .connection-server {
|
||||
color: #b88a50;
|
||||
}
|
||||
|
||||
/* ── 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: #5e4828 !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: #b08858;
|
||||
}
|
||||
|
||||
[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: #b08858;
|
||||
}
|
||||
|
||||
[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: #a88048;
|
||||
}
|
||||
|
||||
/* Queue: "Nächste Titel" divider label */
|
||||
[data-theme='middle-earth'] .queue-divider span {
|
||||
color: #b8905a !important;
|
||||
}
|
||||
|
||||
/* Queue: artist text visible on hover for inactive items */
|
||||
[data-theme='middle-earth'] .queue-item:hover .queue-item-artist,
|
||||
[data-theme='middle-earth'] .queue-item.context-active .queue-item-artist {
|
||||
color: #e8c878;
|
||||
}
|
||||
|
||||
/* AlbumDetail header: artist name readable */
|
||||
[data-theme='middle-earth'] .album-detail-artist,
|
||||
[data-theme='middle-earth'] .album-detail-artist-link {
|
||||
color: #e8c878;
|
||||
}
|
||||
|
||||
[data-theme='middle-earth'] .album-detail-artist-link:hover {
|
||||
color: #f8e060;
|
||||
}
|
||||
|
||||
/* ArtistDetail About: heading, bio text + "Mehr lesen" readable */
|
||||
[data-theme='middle-earth'] .np-card-title {
|
||||
color: #6b4e2a;
|
||||
}
|
||||
|
||||
[data-theme='middle-earth'] .np-bio-text {
|
||||
color: #5a3e20;
|
||||
}
|
||||
|
||||
[data-theme='middle-earth'] .np-bio-toggle {
|
||||
color: #7a5228;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─── Midnight Blue ─── */
|
||||
[data-theme='midnight-blue'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #07090f;
|
||||
--ctp-mantle: #090c14;
|
||||
--ctp-base: #0d1420;
|
||||
--ctp-surface0: #111a28;
|
||||
--ctp-surface1: #162030;
|
||||
--ctp-surface2: #1c2838;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #2a3d5a;
|
||||
--ctp-overlay1: #3a507a;
|
||||
--ctp-overlay2: #4a659a;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #ccd8f0;
|
||||
--ctp-subtext1: #9ab0d8;
|
||||
--ctp-subtext0: #6888b0;
|
||||
|
||||
/* Light blue accent */
|
||||
--ctp-teal: #60a5fa;
|
||||
--ctp-sky: #60a5fa;
|
||||
--ctp-sapphire: #4a90e8;
|
||||
--ctp-blue: #3878d0;
|
||||
--ctp-lavender: #60a5fa;
|
||||
--ctp-mauve: #4a90e8;
|
||||
--ctp-pink: #3878d0;
|
||||
--ctp-flamingo: #60a5fa;
|
||||
--ctp-rosewater: #4a90e8;
|
||||
|
||||
/* Semantic */
|
||||
--ctp-red: #e07070;
|
||||
--ctp-maroon: #d09050;
|
||||
--ctp-peach: #d09050;
|
||||
--ctp-yellow: #c8b850;
|
||||
--ctp-green: #60c880;
|
||||
|
||||
/* UI tokens */
|
||||
--bg-app: #0d1420;
|
||||
--bg-sidebar: #090c14;
|
||||
--bg-card: #111a28;
|
||||
--bg-hover: #162030;
|
||||
--bg-player: #090c14;
|
||||
--bg-glass: rgba(13, 20, 32, 0.95);
|
||||
|
||||
--accent: #60a5fa;
|
||||
--accent-dim: rgba(96, 165, 250, 0.07);
|
||||
--accent-glow: rgba(96, 165, 250, 0.14);
|
||||
|
||||
--text-primary: #ccd8f0;
|
||||
--text-secondary: #6888b0;
|
||||
--text-muted: #50627e;
|
||||
|
||||
--border: #1c2838;
|
||||
--border-subtle: #111a28;
|
||||
--border-dropdown: #223040;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.90);
|
||||
|
||||
--positive: #60c880;
|
||||
--warning: #c8b850;
|
||||
--danger: #e07070;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Morpheus — Matrix Style
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
/* ─── Mouse-event DnD cursor (psy-dragging) ──────────────────────
|
||||
Applied by DragDropProvider while a mouse-based drag is active.
|
||||
Overrides cursor globally to "grabbing" and prevents text-
|
||||
selection / stray pointer events on child elements. ─────────── */
|
||||
body.psy-dragging,
|
||||
body.psy-dragging * {
|
||||
cursor: grabbing !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,398 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,299 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── Nightfox ─── */
|
||||
[data-theme='nightfox'] {
|
||||
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%23cdcecf%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: #131a24;
|
||||
--ctp-mantle: #131a24;
|
||||
--ctp-base: #192330;
|
||||
--ctp-surface0: #212e3f;
|
||||
--ctp-surface1: #29394f;
|
||||
--ctp-surface2: #39506d;
|
||||
--ctp-overlay0: #71839b;
|
||||
--ctp-overlay1: #71839b;
|
||||
--ctp-overlay2: #aeafb0;
|
||||
--ctp-text: #cdcecf;
|
||||
--ctp-subtext1: #aeafb0;
|
||||
--ctp-subtext0: #71839b;
|
||||
--ctp-mauve: #9d79d6;
|
||||
--ctp-lavender: #719cd6;
|
||||
--ctp-pink: #d67ad2;
|
||||
--ctp-flamingo: #d67ad2;
|
||||
--ctp-rosewater: #d67ad2;
|
||||
--ctp-blue: #719cd6;
|
||||
--ctp-sapphire: #9d79d6;
|
||||
--ctp-sky: #63cdcf;
|
||||
--ctp-teal: #63cdcf;
|
||||
--ctp-green: #81b29a;
|
||||
--ctp-yellow: #dbc074;
|
||||
--ctp-peach: #f4a261;
|
||||
--ctp-maroon: #c94f6d;
|
||||
--ctp-red: #c94f6d;
|
||||
|
||||
--bg-app: #192330;
|
||||
--bg-sidebar: #131a24;
|
||||
--bg-card: #212e3f;
|
||||
--bg-hover: #29394f;
|
||||
--bg-player: #131a24;
|
||||
--bg-glass: rgba(25, 35, 48, 0.75);
|
||||
--accent: #719cd6;
|
||||
--accent-dim: rgba(113, 156, 214, 0.15);
|
||||
--accent-glow: rgba(113, 156, 214, 0.3);
|
||||
--text-primary: #cdcecf;
|
||||
--text-secondary: #aeafb0;
|
||||
--text-muted: #738091;
|
||||
--border: #29394f;
|
||||
--border-subtle: #212e3f;
|
||||
--border-dropdown: #39506d;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.6);
|
||||
--positive: #81b29a;
|
||||
--warning: #dbc074;
|
||||
--danger: #c94f6d;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── Nordfox ─── */
|
||||
[data-theme='nordfox'] {
|
||||
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%23cdcecf%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: #232831;
|
||||
--ctp-mantle: #232831;
|
||||
--ctp-base: #2e3440;
|
||||
--ctp-surface0: #39404f;
|
||||
--ctp-surface1: #444c5e;
|
||||
--ctp-surface2: #5a657d;
|
||||
--ctp-overlay0: #60728a;
|
||||
--ctp-overlay1: #7e8188;
|
||||
--ctp-overlay2: #abb1bb;
|
||||
--ctp-text: #cdcecf;
|
||||
--ctp-subtext1: #c7cdd9;
|
||||
--ctp-subtext0: #abb1bb;
|
||||
--ctp-mauve: #b48ead;
|
||||
--ctp-lavender: #81a1c1;
|
||||
--ctp-pink: #bf88bc;
|
||||
--ctp-flamingo: #bf616a;
|
||||
--ctp-rosewater: #c9826b;
|
||||
--ctp-blue: #81a1c1;
|
||||
--ctp-sapphire: #81a1c1;
|
||||
--ctp-sky: #88c0d0;
|
||||
--ctp-teal: #88c0d0;
|
||||
--ctp-green: #a3be8c;
|
||||
--ctp-yellow: #ebcb8b;
|
||||
--ctp-peach: #c9826b;
|
||||
--ctp-maroon: #bf616a;
|
||||
--ctp-red: #bf616a;
|
||||
|
||||
--bg-app: #2e3440;
|
||||
--bg-sidebar: #232831;
|
||||
--bg-card: #39404f;
|
||||
--bg-hover: #444c5e;
|
||||
--bg-player: #232831;
|
||||
--bg-glass: rgba(46, 52, 64, 0.75);
|
||||
--accent: #81a1c1;
|
||||
--accent-dim: rgba(129, 161, 193, 0.15);
|
||||
--accent-glow: rgba(129, 161, 193, 0.3);
|
||||
--text-primary: #cdcecf;
|
||||
--text-secondary: #abb1bb;
|
||||
--text-muted: #60728a;
|
||||
--border: #444c5e;
|
||||
--border-subtle: #39404f;
|
||||
--border-dropdown: #5a657d;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.6);
|
||||
--positive: #a3be8c;
|
||||
--warning: #ebcb8b;
|
||||
--danger: #bf616a;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,337 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
/* Back button + hero text — needs high contrast on dark overlay at top of album header */
|
||||
[data-theme='north-park'] .album-detail-back {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
[data-theme='north-park'] .album-detail-back:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
/* ─── 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: #6b5636;
|
||||
--border: #765a38;
|
||||
--border-subtle: #dfc08f;
|
||||
--positive: #3e5820;
|
||||
--warning: #7a5b0e;
|
||||
--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);
|
||||
}
|
||||
|
||||
/* Column resize grip — default --ctp-surface1 (#f5e4c3) on bg-card (#eedbb8)
|
||||
is 1.08:1 (invisible on this warm cream palette). Use --border (#765a38,
|
||||
4.70:1) to get a perceptible bronze grip that matches the brass accents. */
|
||||
[data-theme='nucleo'] .col-resize-handle::after {
|
||||
background: var(--border);
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
/* ─── Obsidian Black ─── */
|
||||
[data-theme='obsidian-black'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dfddd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #000000;
|
||||
--ctp-mantle: #040404;
|
||||
--ctp-base: #090908;
|
||||
--ctp-surface0: #11110f;
|
||||
--ctp-surface1: #171714;
|
||||
--ctp-surface2: #20201c;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #30302b;
|
||||
--ctp-overlay1: #474740;
|
||||
--ctp-overlay2: #5e5e54;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #f5f3ee;
|
||||
--ctp-subtext1: #d2cec4;
|
||||
--ctp-subtext0: #9f998d;
|
||||
|
||||
/* Obsidian Accent */
|
||||
--ctp-teal: #d8d6d2;
|
||||
--ctp-sky: #c6c3bc;
|
||||
--ctp-sapphire: #a6a297;
|
||||
--ctp-blue: #7f7a70;
|
||||
--ctp-lavender: #ebe7de;
|
||||
--ctp-mauve: #a6a297;
|
||||
--ctp-pink: #7f7a70;
|
||||
--ctp-flamingo: #ebe7de;
|
||||
--ctp-rosewater: #b8b3a8;
|
||||
|
||||
/* Semantic */
|
||||
--ctp-red: #ff5f57;
|
||||
--ctp-maroon: #ff9f43;
|
||||
--ctp-peach: #ff9f43;
|
||||
--ctp-yellow: #ffd166;
|
||||
--ctp-green: #57d98c;
|
||||
|
||||
/* UI */
|
||||
--bg-app: #070706;
|
||||
--bg-sidebar: #0a0a09;
|
||||
--bg-card: #11110f;
|
||||
--bg-hover: #191916;
|
||||
--bg-player: #090908;
|
||||
--bg-glass: rgba(10,10,9,0.80);
|
||||
|
||||
/* Accent */
|
||||
--accent: #dfddd8;
|
||||
--accent-dim: rgba(223,221,216,0.05);
|
||||
--accent-glow: rgba(223,221,216,0.10);
|
||||
|
||||
/* Text UI */
|
||||
--text-primary: #f5f3ee;
|
||||
--text-secondary: #b6b0a5;
|
||||
--text-muted: #767066;
|
||||
|
||||
/* Borders */
|
||||
--border: #272722;
|
||||
--border-subtle: #1a1a16;
|
||||
--border-dropdown: #32322c;
|
||||
--shadow-dropdown: rgba(0,0,0,0.92);
|
||||
|
||||
/* Status */
|
||||
--positive: #57d98c;
|
||||
--warning: #ffd166;
|
||||
--danger: #ff5f57;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
/* ─── Obsidian Gold ─── */
|
||||
[data-theme='obsidian-gold'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #050505;
|
||||
--ctp-mantle: #0a0907;
|
||||
--ctp-base: #0f0d09;
|
||||
--ctp-surface0: #15120d;
|
||||
--ctp-surface1: #1d1811;
|
||||
--ctp-surface2: #262016;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #4f4218;
|
||||
--ctp-overlay1: #635223;
|
||||
--ctp-overlay2: #6f5a1c;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #f8f4e8;
|
||||
--ctp-subtext1: #dbc98d;
|
||||
--ctp-subtext0: #b89f56;
|
||||
|
||||
/* Gold Accent */
|
||||
--ctp-teal: #c9a227;
|
||||
--ctp-sky: #d4af37;
|
||||
--ctp-sapphire: #b8922d;
|
||||
--ctp-blue: #8f6e22;
|
||||
--ctp-lavender: #e0b84f;
|
||||
--ctp-mauve: #b8922d;
|
||||
--ctp-pink: #8f6e22;
|
||||
--ctp-flamingo: #e0b84f;
|
||||
--ctp-rosewater: #b8922d;
|
||||
|
||||
/* Semantic */
|
||||
--ctp-red: #ff5c5c;
|
||||
--ctp-maroon: #ff9b57;
|
||||
--ctp-peach: #ff9b57;
|
||||
--ctp-yellow: #e0b84f;
|
||||
--ctp-green: #57d98c;
|
||||
|
||||
/* UI Tokens */
|
||||
--bg-app: #0f0d09;
|
||||
--bg-sidebar: #0a0907;
|
||||
--bg-card: #15120d;
|
||||
--bg-hover: #1d1811;
|
||||
--bg-player: #0a0907;
|
||||
--bg-glass: rgba(15, 13, 9, 0.82);
|
||||
|
||||
/* Accent */
|
||||
--accent: #c9a227;
|
||||
--accent-dim: rgba(201, 162, 39, 0.06);
|
||||
--accent-glow: rgba(201, 162, 39, 0.12);
|
||||
|
||||
/* Text UI */
|
||||
--text-primary: #f8f4e8;
|
||||
--text-secondary: #b89f56;
|
||||
--text-muted: #7a6830;
|
||||
|
||||
/* Borders */
|
||||
--border: #262016;
|
||||
--border-subtle: #1d1811;
|
||||
--border-dropdown: #31281a;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.92);
|
||||
|
||||
/* Status */
|
||||
--positive: #57d98c;
|
||||
--warning: #e0b84f;
|
||||
--danger: #ff5c5c;
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
/* ─── Order of the Phoenix ─── */
|
||||
@@ -0,0 +1,4 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Pandora — Bioluminescent Sci-Fi
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
/* ─── PowerDVD Classic — Virtual HiFi Receiver / VFD Display ─── */
|
||||
@@ -0,0 +1,384 @@
|
||||
/* ─── 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;
|
||||
|
||||
/* ── Semantic tokens ──
|
||||
Contrast audit (vs. --bg-app #F0DFB0, L≈0.746):
|
||||
text-primary 12.9:1 AAA ✓
|
||||
text-secondary 6.7:1 AA+ ✓
|
||||
text-muted 4.6:1 AA ✓ (was 3.05:1 — below AA)
|
||||
positive 5.5:1 AA ✓ (was 3.97:1)
|
||||
warning 5.8:1 AA ✓ (was 3.62:1 — was below AA)
|
||||
danger 5.5:1 AA ✓
|
||||
accent (gold) 1.98:1 UI (Pharaoh brand, never as body text)
|
||||
*/
|
||||
--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 — brand identity, 1.98:1 UI-pass only (never as body text) */
|
||||
--accent-dim: rgba(200, 150, 12, 0.16);
|
||||
--accent-glow: rgba(200, 150, 12, 0.35);
|
||||
--text-primary: #2A1808;
|
||||
--text-secondary: #6A4018;
|
||||
--text-muted: #805810; /* 4.6:1 AA ✓, deepened from #A07830 (3.05:1 below AA) */
|
||||
--border: rgba(42, 24, 8, 0.38); /* ~2.3:1 visible structural line (was 1.33:1) */
|
||||
--border-subtle: rgba(42, 24, 8, 0.20); /* ~1.5:1 subtle but perceptible (was 1.19:1) */
|
||||
--border-dropdown: rgba(200, 128, 10, 0.40);
|
||||
--shadow-dropdown: rgba(24, 14, 4, 0.22);
|
||||
--positive: #3E6018; /* 5.5:1 AA ✓, deeper olive (was #507820 at 3.97:1) */
|
||||
--warning: #A04008; /* 5.8:1 AA ✓, deeper burnt-orange (was #C05010 at 3.62:1) */
|
||||
--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.32);
|
||||
--waveform-unplayed: rgba(42, 24, 8, 0.22);
|
||||
|
||||
/* Logo — Nile blue → pharaoh gold */
|
||||
--logo-color-start: #2E7BB8;
|
||||
--logo-color-end: #C8960C;
|
||||
}
|
||||
|
||||
/* Sidebar — Nile-sky deep blue, drifting cloud wisps */
|
||||
[data-theme='powerslave'] .sidebar {
|
||||
background: #0A2035;
|
||||
border-right: none;
|
||||
background-image:
|
||||
radial-gradient(ellipse 130% 30% at 50% 6%, rgba(140, 190, 235, 0.07) 0%, transparent 65%),
|
||||
radial-gradient(ellipse 90% 25% at 18% 22%, rgba(100, 155, 205, 0.05) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 115% 28% at 78% 38%, rgba(120, 170, 225, 0.05) 0%, transparent 65%),
|
||||
radial-gradient(ellipse 100% 26% at 38% 58%, rgba(90, 145, 195, 0.04) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 120% 30% at 68% 75%, rgba(110, 165, 218, 0.05) 0%, transparent 65%),
|
||||
radial-gradient(ellipse 85% 24% at 22% 92%, rgba(130, 180, 232, 0.04) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
[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;
|
||||
}
|
||||
|
||||
[data-theme='powerslave'] .album-card-details-btn:hover {
|
||||
background: linear-gradient(180deg, #E0A028 0%, #D48818 50%, #B07010 100%);
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
color: #050E19;
|
||||
}
|
||||
|
||||
[data-theme='powerslave'] .connection-server {
|
||||
color: #050E19;
|
||||
}
|
||||
|
||||
/* Back button needs light color — sits on dark overlay above sandstone content */
|
||||
[data-theme='powerslave'] .album-detail-back {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
[data-theme='powerslave'] .album-detail-back:hover {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Tech strip — default ctp-surface1 (#DEC880) is too bright on dark blue queue panel */
|
||||
[data-theme='powerslave'] .queue-current-tech {
|
||||
background: rgba(6, 16, 28, 0.88);
|
||||
color: rgba(140, 190, 230, 0.72);
|
||||
}
|
||||
|
||||
/* 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: #050E19;
|
||||
}
|
||||
|
||||
[data-theme='powerslave'] .album-detail-artist-link:hover {
|
||||
color: #0A2035;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Column resize grip — was surface1 (#DEC880) on bg-card = 1.41:1 (invisible)
|
||||
Use the deeper temple-shadow overlay1 tone for strong legibility. */
|
||||
[data-theme='powerslave'] .col-resize-handle::after {
|
||||
background: #806020; /* 5.0:1 on bg-card — visible dark grip */
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
/* Focus ring — pharaoh gold accent with strong outline for keyboard nav */
|
||||
[data-theme='powerslave'] *:focus-visible {
|
||||
outline: 2px solid #C8800A;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
/* ─── Reset ─── */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
height: 100%;
|
||||
/* min-height removed: Tauri enforces the real window minimum (minHeight: 480).
|
||||
A CSS min-height larger than the effective CSS viewport (which shrinks at
|
||||
zoom > 1) pushes html taller than the window, clipping the player bar. */
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
/* ─── Sakura Night ─── */
|
||||
[data-theme='sakura-night'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d8a6bc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #10090c;
|
||||
--ctp-mantle: #160d12;
|
||||
--ctp-base: #1c1218;
|
||||
--ctp-surface0: #241821;
|
||||
--ctp-surface1: #2f202b;
|
||||
--ctp-surface2: #3c2937;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #6f4d5d;
|
||||
--ctp-overlay1: #8d6476;
|
||||
--ctp-overlay2: #ab7c8f;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #fff0f5;
|
||||
--ctp-subtext1: #e3c5d0;
|
||||
--ctp-subtext0: #bc93a4;
|
||||
|
||||
/* Cherry blossom accent */
|
||||
--ctp-teal: #d8a6bc;
|
||||
--ctp-sky: #d8a6bc;
|
||||
--ctp-sapphire: #b98399;
|
||||
--ctp-blue: #99687d;
|
||||
--ctp-lavender: #e3b8cb;
|
||||
--ctp-mauve: #b98399;
|
||||
--ctp-pink: #99687d;
|
||||
--ctp-flamingo: #e3b8cb;
|
||||
--ctp-rosewater: #b98399;
|
||||
|
||||
--ctp-red: #e27b7b;
|
||||
--ctp-maroon: #d49a73;
|
||||
--ctp-peach: #d49a73;
|
||||
--ctp-yellow: #d8bf73;
|
||||
--ctp-green: #74b68a;
|
||||
|
||||
--bg-app: #1c1218;
|
||||
--bg-sidebar: #160d12;
|
||||
--bg-card: #241821;
|
||||
--bg-hover: #2f202b;
|
||||
--bg-player: #160d12;
|
||||
--bg-glass: rgba(28,18,24,0.82);
|
||||
|
||||
--accent: #d8a6bc;
|
||||
--accent-dim: rgba(216,166,188,0.05);
|
||||
--accent-glow: rgba(216,166,188,0.08);
|
||||
|
||||
--text-primary: #fff0f5;
|
||||
--text-secondary: #bc93a4;
|
||||
--text-muted: #6f4d5d;
|
||||
|
||||
--border: #3c2937;
|
||||
--border-subtle: #2f202b;
|
||||
--border-dropdown: #493341;
|
||||
--shadow-dropdown: rgba(0,0,0,0.72);
|
||||
|
||||
--positive: #74b68a;
|
||||
--warning: #d8bf73;
|
||||
--danger: #e27b7b;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
/* ─── Scrollable area ─── */
|
||||
.scroll-area {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
/* ─── Sepia Dark ─── */
|
||||
[data-theme='sepia-dark'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c8b89a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||
|
||||
/* Backgrounds */
|
||||
--ctp-crust: #0e0c09;
|
||||
--ctp-mantle: #13100c;
|
||||
--ctp-base: #1e1a14;
|
||||
--ctp-surface0: #252018;
|
||||
--ctp-surface1: #2e281e;
|
||||
--ctp-surface2: #373025;
|
||||
|
||||
/* Overlays */
|
||||
--ctp-overlay0: #605545;
|
||||
--ctp-overlay1: #806e5a;
|
||||
--ctp-overlay2: #9a8870;
|
||||
|
||||
/* Text */
|
||||
--ctp-text: #ede0cc;
|
||||
--ctp-subtext1: #d0c0a8;
|
||||
--ctp-subtext0: #b0a080;
|
||||
|
||||
/* Cream accent */
|
||||
--ctp-teal: #c8b89a;
|
||||
--ctp-sky: #c8b89a;
|
||||
--ctp-sapphire: #b8a080;
|
||||
--ctp-blue: #a08868;
|
||||
--ctp-lavender: #c8b89a;
|
||||
--ctp-mauve: #b8a080;
|
||||
--ctp-pink: #a08868;
|
||||
--ctp-flamingo: #c8b89a;
|
||||
--ctp-rosewater: #b8a080;
|
||||
|
||||
/* Semantic */
|
||||
--ctp-red: #c87060;
|
||||
--ctp-maroon: #c08050;
|
||||
--ctp-peach: #c08050;
|
||||
--ctp-yellow: #b8a050;
|
||||
--ctp-green: #80a870;
|
||||
|
||||
/* UI tokens */
|
||||
--bg-app: #1e1a14;
|
||||
--bg-sidebar: #13100c;
|
||||
--bg-card: #252018;
|
||||
--bg-hover: #2e281e;
|
||||
--bg-player: #13100c;
|
||||
--bg-glass: rgba(30, 26, 20, 0.95);
|
||||
|
||||
--accent: #c8b89a;
|
||||
--accent-dim: rgba(200, 184, 154, 0.07);
|
||||
--accent-glow: rgba(200, 184, 154, 0.13);
|
||||
|
||||
--text-primary: #ede0cc;
|
||||
--text-secondary: #b0a080;
|
||||
--text-muted: #80705c;
|
||||
|
||||
--border: #2e281e;
|
||||
--border-subtle: #252018;
|
||||
--border-dropdown: #3a3025;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.88);
|
||||
|
||||
--positive: #80a870;
|
||||
--warning: #b8a050;
|
||||
--danger: #c87060;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,350 @@
|
||||
/* ─── 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: gefüllte Lila-Fläche mit weißer Schrift (WCAG AA) + linker Balken
|
||||
Vorher: color #AA5CC3 auf 12 % accent über bg-sidebar → ~3.30:1 (Fail AA small text).
|
||||
Jetzt: weißer Text auf 22 % accent → >10:1, Brand-Identity bleibt durch den Balken. */
|
||||
[data-theme='jayfin'] .nav-link.active {
|
||||
background: rgba(170, 92, 195, 0.22);
|
||||
color: #ffffff;
|
||||
border-left: 3px solid #AA5CC3;
|
||||
}
|
||||
|
||||
[data-theme='jayfin'] .nav-link.active svg {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 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
|
||||
font-weight 700 nötig, weil weiß auf #AA5CC3 nur 4.08:1 erreicht —
|
||||
bold verdichtet die Glyph-Fläche und hebt die Lesbarkeit über die AA-Schwelle. */
|
||||
[data-theme='jayfin'] .btn-primary,
|
||||
[data-theme='jayfin'] .player-btn-primary,
|
||||
[data-theme='jayfin'] .hero-play-btn {
|
||||
background: #AA5CC3;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
font-weight: 700;
|
||||
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;
|
||||
font-weight: 700;
|
||||
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;
|
||||
font-weight: 700;
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
/* ─── 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);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
/* ─── 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;
|
||||
}
|
||||
|
||||
/* While clearing: no yellow hover until pointer leaves or next click */
|
||||
.star-rating--suppress-hover .star:hover {
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.star-rating--disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.star-rating--disabled .star:hover {
|
||||
color: inherit;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.star-rating .star {
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.star-rating .star.star--locked {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.star-rating .star.star--locked:hover {
|
||||
color: var(--ctp-overlay1);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@keyframes star-rating-star-pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: scale(1.3);
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.star-rating .star.star--pulse {
|
||||
animation: star-rating-star-pulse 0.38s ease-out;
|
||||
}
|
||||
|
||||
@keyframes star-rating-star-clear-shrink {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
55% {
|
||||
transform: scale(0.58);
|
||||
opacity: 0.28;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.star-rating .star.star--clear-shrink {
|
||||
animation: star-rating-star-clear-shrink 0.44s ease-out;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.star-rating .star.star--pulse,
|
||||
.star-rating .star.star--clear-shrink {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
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");
|
||||
|
||||
/* ── Contrast audit (vs. --bg-app #0b0f15, L ≈ 0.0044):
|
||||
text-primary 17.09:1 AAA ✓
|
||||
text-secondary 11.47:1 AAA ✓
|
||||
accent (cyan) 14.04:1 AAA ✓ — signature, keep
|
||||
text-muted 6.10:1 AA+ ✓ (lifted from 3.64:1 — was below AA)
|
||||
chromatic --ctp-* (cyan, neon green, gold, peach, pink, red): all ≥ 4.5:1
|
||||
Border-subtle was identical to --bg-card (1.0:1, invisible); raised
|
||||
to a perceptible structural line. Component override below covers the
|
||||
column resize grip whose default --ctp-surface1 collides with bg-card.
|
||||
Cyan glow shadows and all chromatic tokens are intentionally untouched. */
|
||||
|
||||
--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: #7d92a8; /* 5.73:1 AA+ on bg-card, was #5a718a (3.34:1 ❌) — slate-blue family preserved */
|
||||
|
||||
--border: #1e2a3a;
|
||||
--border-subtle: #243246; /* 1.39:1 perceptible, was #141b24 (identical to bg-card) */
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
/* Column resize grip — default --ctp-surface1 (#1c2531) on bg-card (#141b24)
|
||||
is 1.09:1 (invisible). Use overlay1 for a neutral slate grip without
|
||||
stealing visual weight from the cyan accent borders. */
|
||||
[data-theme='stark-hud'] .col-resize-handle::after {
|
||||
background: var(--ctp-overlay1); /* #6a8099 → 4.48:1 on bg-card */
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
/* ─── Terafox ─── */
|
||||
[data-theme='terafox'] {
|
||||
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%23e6eaea%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: #0f1c1e;
|
||||
--ctp-mantle: #0f1c1e;
|
||||
--ctp-base: #152528;
|
||||
--ctp-surface0: #1d3337;
|
||||
--ctp-surface1: #254147;
|
||||
--ctp-surface2: #2d4f56;
|
||||
--ctp-overlay0: #6d7f8b;
|
||||
--ctp-overlay1: #587b7b;
|
||||
--ctp-overlay2: #cbd9d8;
|
||||
--ctp-text: #e6eaea;
|
||||
--ctp-subtext1: #eaeeee;
|
||||
--ctp-subtext0: #cbd9d8;
|
||||
--ctp-mauve: #ad5c7c;
|
||||
--ctp-lavender: #5a93aa;
|
||||
--ctp-pink: #cb7985;
|
||||
--ctp-flamingo: #e85c51;
|
||||
--ctp-rosewater: #ea9a97;
|
||||
--ctp-blue: #5a93aa;
|
||||
--ctp-sapphire: #5a93aa;
|
||||
--ctp-sky: #a1cdd8;
|
||||
--ctp-teal: #7aa4a1;
|
||||
--ctp-green: #7aa4a1;
|
||||
--ctp-yellow: #fda47f;
|
||||
--ctp-peach: #ff8349;
|
||||
--ctp-maroon: #e85c51;
|
||||
--ctp-red: #e85c51;
|
||||
|
||||
--bg-app: #152528;
|
||||
--bg-sidebar: #0f1c1e;
|
||||
--bg-card: #1d3337;
|
||||
--bg-hover: #254147;
|
||||
--bg-player: #0f1c1e;
|
||||
--bg-glass: rgba(21, 37, 40, 0.75);
|
||||
--accent: #a1cdd8;
|
||||
--accent-dim: rgba(161, 205, 216, 0.15);
|
||||
--accent-glow: rgba(161, 205, 216, 0.3);
|
||||
--text-primary: #e6eaea;
|
||||
--text-secondary: #cbd9d8;
|
||||
--text-muted: #6d7f8b;
|
||||
--border: #254147;
|
||||
--border-subtle: #1d3337;
|
||||
--border-dropdown: #2d4f56;
|
||||
--shadow-dropdown: rgba(0, 0, 0, 0.6);
|
||||
--positive: #7aa4a1;
|
||||
--warning: #fda47f;
|
||||
--danger: #e85c51;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user