diff --git a/src/main.tsx b/src/main.tsx index 1454ab96..ff61e0b9 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client'; import App from './App'; import { runPreReactBootstrap } from './app/bootstrap'; import './i18n'; -import './styles/theme.css'; +import './styles/themes/index.css'; import './styles/layout.css'; import './styles/components.css'; import './styles/tracks.css'; diff --git a/src/styles/theme.css b/src/styles/theme.css deleted file mode 100644 index e6ddb11b..00000000 --- a/src/styles/theme.css +++ /dev/null @@ -1,16138 +0,0 @@ -/* ───────────────────────────────────────────────────────────── - 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'; - -/* ─── Catppuccin Mocha Variables ─── */ -:root, -[data-theme='mocha'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23bac2de%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - --ctp-rosewater: #f5e0dc; - --ctp-flamingo: #f2cdcd; - --ctp-pink: #f5c2e7; - --ctp-mauve: #cba6f7; - --ctp-red: #f38ba8; - --ctp-maroon: #eba0ac; - --ctp-peach: #fab387; - --ctp-yellow: #f9e2af; - --ctp-green: #a6e3a1; - --ctp-teal: #94e2d5; - --ctp-sky: #89dceb; - --ctp-sapphire: #74c7ec; - --ctp-blue: #89b4fa; - --ctp-lavender: #b4befe; - --ctp-text: #cdd6f4; - --ctp-subtext1: #bac2de; - --ctp-subtext0: #a6adc8; - --ctp-overlay2: #9399b2; - --ctp-overlay1: #7f849c; - --ctp-overlay0: #6c7086; - --ctp-surface2: #585b70; - --ctp-surface1: #45475a; - --ctp-surface0: #313244; - --ctp-base: #1e1e2e; - --ctp-mantle: #181825; - --ctp-crust: #11111b; - - /* Semantic tokens */ - --bg-app: var(--ctp-base); - --bg-sidebar: var(--ctp-mantle); - --bg-card: var(--ctp-surface0); - --bg-hover: var(--ctp-surface1); - --bg-player: var(--ctp-crust); - --bg-glass: rgba(30, 30, 46, 0.75); - --accent: var(--ctp-mauve); - --accent-dim: rgba(203, 166, 247, 0.15); - --accent-glow: rgba(203, 166, 247, 0.3); - --text-primary: var(--ctp-text); - --text-secondary: var(--ctp-subtext1); - --text-muted: var(--ctp-subtext0); - --border: var(--ctp-surface1); - --border-subtle: var(--ctp-surface0); - --positive: var(--ctp-green); - --warning: var(--ctp-yellow); - --danger: var(--ctp-red); -} - -/* ─── Catppuccin Macchiato Variables ─── */ -[data-theme='macchiato'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b8c0e0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - --ctp-rosewater: #f4dbd6; - --ctp-flamingo: #f0c6c6; - --ctp-pink: #f5bde6; - --ctp-mauve: #c6a0f6; - --ctp-red: #ed8796; - --ctp-maroon: #ee99a0; - --ctp-peach: #f5a97f; - --ctp-yellow: #eed49f; - --ctp-green: #a6da95; - --ctp-teal: #8bd5ca; - --ctp-sky: #91d7e3; - --ctp-sapphire: #7dc4e4; - --ctp-blue: #8aadf4; - --ctp-lavender: #b7bdf8; - --ctp-text: #cad3f5; - --ctp-subtext1: #b8c0e0; - --ctp-subtext0: #a5adcb; - --ctp-overlay2: #939ab7; - --ctp-overlay1: #8087a2; - --ctp-overlay0: #6e738d; - --ctp-surface2: #5b6078; - --ctp-surface1: #494d64; - --ctp-surface0: #363a4f; - --ctp-base: #24273a; - --ctp-mantle: #1e2030; - --ctp-crust: #181926; - - --bg-app: var(--ctp-base); - --bg-sidebar: var(--ctp-mantle); - --bg-card: var(--ctp-surface0); - --bg-hover: var(--ctp-surface1); - --bg-player: var(--ctp-crust); - --bg-glass: rgba(36, 39, 58, 0.75); - --accent: var(--ctp-mauve); - --accent-dim: rgba(198, 160, 246, 0.15); - --accent-glow: rgba(198, 160, 246, 0.3); - --text-primary: var(--ctp-text); - --text-secondary: var(--ctp-subtext1); - --text-muted: var(--ctp-subtext0); - --border: var(--ctp-surface1); - --border-subtle: var(--ctp-surface0); - --positive: var(--ctp-green); - --warning: var(--ctp-yellow); - --danger: var(--ctp-red); -} - -/* ─── Catppuccin Frappé Variables ─── */ -[data-theme='frappe'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b5bfe2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - --ctp-rosewater: #f2d5cf; - --ctp-flamingo: #eebebe; - --ctp-pink: #f4b8e4; - --ctp-mauve: #ca9ee6; - --ctp-red: #e78284; - --ctp-maroon: #ea999c; - --ctp-peach: #ef9f76; - --ctp-yellow: #e5c890; - --ctp-green: #a6d189; - --ctp-teal: #81c8be; - --ctp-sky: #99d1db; - --ctp-sapphire: #85c1dc; - --ctp-blue: #8caaee; - --ctp-lavender: #babbf1; - --ctp-text: #c6d0f5; - --ctp-subtext1: #b5bfe2; - --ctp-subtext0: #a5adce; - --ctp-overlay2: #949cbb; - --ctp-overlay1: #838ba7; - --ctp-overlay0: #737994; - --ctp-surface2: #626880; - --ctp-surface1: #51576d; - --ctp-surface0: #414559; - --ctp-base: #303446; - --ctp-mantle: #292c3c; - --ctp-crust: #232634; - - --bg-app: var(--ctp-base); - --bg-sidebar: var(--ctp-mantle); - --bg-card: var(--ctp-surface0); - --bg-hover: var(--ctp-surface1); - --bg-player: var(--ctp-crust); - --bg-glass: rgba(48, 52, 70, 0.75); - --accent: var(--ctp-mauve); - --accent-dim: rgba(202, 158, 230, 0.15); - --accent-glow: rgba(202, 158, 230, 0.3); - --text-primary: var(--ctp-text); - --text-secondary: var(--ctp-subtext1); - --text-muted: var(--ctp-subtext0); - --border: var(--ctp-surface1); - --border-subtle: var(--ctp-surface0); - --positive: var(--ctp-green); - --warning: var(--ctp-yellow); - --danger: var(--ctp-red); -} - -/* ─── Catppuccin Latte Variables (Light Theme) ─── */ -[data-theme='latte'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235c5f77%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - --ctp-rosewater: #dc8a78; - --ctp-flamingo: #dd7878; - --ctp-pink: #ea76cb; - --ctp-mauve: #8839ef; - --ctp-red: #d20f39; - --ctp-maroon: #e64553; - --ctp-peach: #fe640b; - --ctp-yellow: #df8e1d; - --ctp-green: #40a02b; - --ctp-teal: #179299; - --ctp-sky: #04a5e5; - --ctp-sapphire: #209fb5; - --ctp-blue: #1e66f5; - --ctp-lavender: #7287fd; - --ctp-text: #4c4f69; - --ctp-subtext1: #5c5f77; - --ctp-subtext0: #6c6f85; - --ctp-overlay2: #7c7f93; - --ctp-overlay1: #8c8fa1; - --ctp-overlay0: #9ca0b0; - --ctp-surface2: #acb0be; - --ctp-surface1: #bcc0cc; - --ctp-surface0: #ccd0da; - --ctp-base: #eff1f5; - --ctp-mantle: #e6e9ef; - --ctp-crust: #dce0e8; - - /* Semantic tokens */ - --bg-app: var(--ctp-base); - --bg-sidebar: var(--ctp-mantle); - --bg-card: var(--ctp-surface0); - --bg-hover: var(--ctp-surface1); - --bg-player: var(--ctp-crust); - --bg-glass: rgba(239, 241, 245, 0.75); - --accent: var(--ctp-mauve); - --accent-dim: rgba(136, 57, 239, 0.15); - --accent-glow: rgba(136, 57, 239, 0.3); - --text-primary: var(--ctp-text); - --text-secondary: var(--ctp-subtext1); - --text-muted: var(--ctp-subtext0); - --border: var(--ctp-surface1); - --border-subtle: var(--ctp-surface0); - --positive: var(--ctp-green); - --warning: var(--ctp-yellow); - --danger: var(--ctp-red); -} - -/* ─── 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); } - -/* ─── Nord – Polar Night (Dark) ─── */ -[data-theme='nord'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - /* Polar Night */ - --ctp-crust: #2e3440; - --ctp-mantle: #2e3440; - --ctp-base: #3b4252; - --ctp-surface0: #434c5e; - --ctp-surface1: #4c566a; - --ctp-surface2: #576070; - --ctp-overlay0: #7a8898; - --ctp-overlay1: #8894a4; - --ctp-overlay2: #96a2b0; - /* Snow Storm as text */ - --ctp-text: #eceff4; - --ctp-subtext1: #e5e9f0; - --ctp-subtext0: #d8dee9; - /* Frost */ - --ctp-teal: #8fbcbb; - --ctp-sky: #88c0d0; - --ctp-sapphire: #81a1c1; - --ctp-blue: #5e81ac; - --ctp-lavender: #81a1c1; - --ctp-mauve: #88c0d0; - /* Aurora */ - --ctp-red: #bf616a; - --ctp-maroon: #d08770; - --ctp-peach: #d08770; - --ctp-yellow: #ebcb8b; - --ctp-green: #a3be8c; - --ctp-pink: #b48ead; - --ctp-flamingo: #bf616a; - --ctp-rosewater: #d08770; - - --bg-app: #3b4252; - --bg-sidebar: #2e3440; - --bg-card: #434c5e; - --bg-hover: #4c566a; - --bg-player: #2e3440; - --bg-glass: rgba(59, 66, 82, 0.75); - --accent: #88c0d0; - --accent-dim: rgba(136, 192, 208, 0.15); - --accent-glow: rgba(136, 192, 208, 0.3); - --text-primary: #eceff4; - --text-secondary: #e5e9f0; - --text-muted: #a0aab8; - --border: #434c5e; - --border-subtle: #3b4252; - --border-dropdown: #576070; - --shadow-dropdown: rgba(0, 0, 0, 0.55); - --positive: #a3be8c; - --warning: #ebcb8b; - --danger: #bf616a; -} - -/* ─── Nord – Snow Storm (Light) ─── */ -[data-theme='nord-snowstorm'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%233b4252%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - /* Snow Storm as backgrounds */ - --ctp-crust: #d8dee9; - --ctp-mantle: #e5e9f0; - --ctp-base: #eceff4; - --ctp-surface0: #d8dee9; - --ctp-surface1: #c8d0de; - --ctp-surface2: #b8c2d0; - --ctp-overlay0: #7a8898; - --ctp-overlay1: #636e7e; - --ctp-overlay2: #4c566a; - /* Polar Night as text */ - --ctp-text: #2e3440; - --ctp-subtext1: #3b4252; - --ctp-subtext0: #434c5e; - /* Frost */ - --ctp-teal: #8fbcbb; - --ctp-sky: #88c0d0; - --ctp-sapphire: #81a1c1; - --ctp-blue: #5e81ac; - --ctp-lavender: #81a1c1; - --ctp-mauve: #5e81ac; - /* Aurora */ - --ctp-red: #bf616a; - --ctp-maroon: #d08770; - --ctp-peach: #d08770; - --ctp-yellow: #9a7200; - --ctp-green: #4e7c3f; - --ctp-pink: #7e5d8c; - --ctp-flamingo: #bf616a; - --ctp-rosewater: #d08770; - - --bg-app: #eceff4; - --bg-sidebar: #e5e9f0; - --bg-card: #d8dee9; - --bg-hover: #c8d0de; - --bg-player: #e5e9f0; - --bg-glass: rgba(236, 239, 244, 0.80); - --accent: #5e81ac; - --accent-dim: rgba(94, 129, 172, 0.15); - --accent-glow: rgba(94, 129, 172, 0.3); - --text-primary: #2e3440; - --text-secondary: #3b4252; - --text-muted: #636e7e; - --border: #c8d0de; - --border-subtle: #d8dee9; - --positive: #4e7c3f; - --warning: #9a7200; - --danger: #bf616a; -} - -/* ─── Nord – Frost (Deep Ocean Blue) ─── */ -[data-theme='nord-frost'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - /* Deep ocean blue – Frost-inspired dark backgrounds */ - --ctp-crust: #1a2535; - --ctp-mantle: #1d2b3a; - --ctp-base: #253545; - --ctp-surface0: #2d3f52; - --ctp-surface1: #354a60; - --ctp-surface2: #3d546e; - --ctp-overlay0: #6888a4; - --ctp-overlay1: #7898b4; - --ctp-overlay2: #88a8c4; - /* Snow Storm as text */ - --ctp-text: #eceff4; - --ctp-subtext1: #e5e9f0; - --ctp-subtext0: #d8dee9; - /* Frost accent */ - --ctp-teal: #8fbcbb; - --ctp-sky: #88c0d0; - --ctp-sapphire: #81a1c1; - --ctp-blue: #5e81ac; - --ctp-lavender: #8fbcbb; - --ctp-mauve: #88c0d0; - /* Aurora */ - --ctp-red: #bf616a; - --ctp-maroon: #d08770; - --ctp-peach: #d08770; - --ctp-yellow: #ebcb8b; - --ctp-green: #a3be8c; - --ctp-pink: #b48ead; - --ctp-flamingo: #bf616a; - --ctp-rosewater: #d08770; - - --bg-app: #253545; - --bg-sidebar: #1d2b3a; - --bg-card: #2d3f52; - --bg-hover: #354a60; - --bg-player: #1a2535; - --bg-glass: rgba(37, 53, 69, 0.75); - --accent: #88c0d0; - --accent-dim: rgba(136, 192, 208, 0.15); - --accent-glow: rgba(136, 192, 208, 0.35); - --text-primary: #eceff4; - --text-secondary: #e5e9f0; - --text-muted: #7898b4; - --border: #2d3f52; - --border-subtle: #253545; - --border-dropdown: #3d546e; - --shadow-dropdown: rgba(0, 0, 0, 0.6); - --positive: #a3be8c; - --warning: #ebcb8b; - --danger: #bf616a; -} - -/* ─── Nord – Aurora (Dark + Aurora Purple) ─── */ -[data-theme='nord-aurora'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23e5e9f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - /* Polar Night base */ - --ctp-crust: #2e3440; - --ctp-mantle: #2e3440; - --ctp-base: #3b4252; - --ctp-surface0: #434c5e; - --ctp-surface1: #4c566a; - --ctp-surface2: #576070; - --ctp-overlay0: #7a8898; - --ctp-overlay1: #8894a4; - --ctp-overlay2: #96a2b0; - /* Snow Storm as text */ - --ctp-text: #eceff4; - --ctp-subtext1: #e5e9f0; - --ctp-subtext0: #d8dee9; - /* Aurora accents — purple as mauve/lavender for button gradients */ - --ctp-mauve: #b48ead; - --ctp-lavender: #a3be8c; - --ctp-pink: #b48ead; - --ctp-teal: #8fbcbb; - --ctp-sky: #88c0d0; - --ctp-sapphire: #81a1c1; - --ctp-blue: #5e81ac; - --ctp-red: #bf616a; - --ctp-maroon: #d08770; - --ctp-peach: #d08770; - --ctp-yellow: #ebcb8b; - --ctp-green: #a3be8c; - --ctp-flamingo: #bf616a; - --ctp-rosewater: #d08770; - - --bg-app: #3b4252; - --bg-sidebar: #2e3440; - --bg-card: #434c5e; - --bg-hover: #4c566a; - --bg-player: #2e3440; - --bg-glass: rgba(59, 66, 82, 0.75); - --accent: #b48ead; - --accent-dim: rgba(180, 142, 173, 0.15); - --accent-glow: rgba(180, 142, 173, 0.3); - --text-primary: #eceff4; - --text-secondary: #e5e9f0; - --text-muted: #a0aab8; - --border: #434c5e; - --border-subtle: #3b4252; - --border-dropdown: #576070; - --shadow-dropdown: rgba(0, 0, 0, 0.55); - --positive: #a3be8c; - --warning: #ebcb8b; - --danger: #bf616a; -} - -/* ─── Poison ─── */ -[data-theme='poison'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231bd655%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette — charcoal grays + phosphor green ── */ - --ctp-crust: #0e0e0e; - --ctp-mantle: #161616; - --ctp-base: #1f1f1f; - --ctp-surface0: #282828; - --ctp-surface1: #323232; - --ctp-surface2: #3e3e3e; - --ctp-overlay0: #525252; - --ctp-overlay1: #686868; - --ctp-overlay2: #848484; - --ctp-text: #d0d0cc; - --ctp-subtext1: #a8a8a4; - --ctp-subtext0: #787874; - /* Phosphor green accent — the Winamp LED display color */ - --ctp-mauve: #1bd655; - --ctp-lavender: #28e860; - --ctp-green: #1bd655; - --ctp-teal: #1ab8a8; - --ctp-sky: #58a8e0; - --ctp-blue: #4888d0; - --ctp-sapphire: #3870b8; - --ctp-pink: #c86888; - --ctp-flamingo: #b85858; - --ctp-rosewater: #c88080; - --ctp-yellow: #c8a830; - --ctp-peach: #c07838; - --ctp-maroon: #a03030; - --ctp-red: #c03030; - - /* ── Semantic tokens ── */ - --bg-app: #1f1f1f; - --bg-sidebar: #161616; - --bg-card: #282828; - --bg-hover: #323232; - --bg-player: #0e0e0e; - --bg-glass: rgba(22, 22, 22, 0.90); - --accent: #1bd655; - --accent-dim: rgba(27, 214, 85, 0.12); - --accent-glow: rgba(27, 214, 85, 0.35); - --text-primary: #d0d0cc; - --text-secondary: #a8a8a4; - --text-muted: #909090; - --border: #3a3a38; - --border-subtle: #282826; - --positive: #1bd655; - --warning: #c8a830; - --danger: #c03030; -} - -/* ── Winamp: LED display glow + tactile buttons ── */ -[data-theme='poison'] .player-track-name { - text-shadow: 0 0 8px rgba(27, 214, 85, 0.7), 0 0 2px rgba(27, 214, 85, 0.4); - color: #1bd655; -} - -[data-theme='poison'] .player-track-artist { - color: #1bd655; - opacity: 0.7; -} - -[data-theme='poison'] .btn { - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -[data-theme='poison'] .player-btn, -[data-theme='poison'] .player-btn-primary { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.3); -} - -/* ─── Classic Winamp — Winamp 2.x Base Skin ─── */ -[data-theme='wnamp'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%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; -} - -/* ─── wnamp — component-level overrides ──────────────────────────────── */ - -/* Column resize grip — was surface1 on bg-card = 1.19:1 (invisible) */ -[data-theme='wnamp'] .col-resize-handle::after { - background: var(--ctp-overlay1); /* #8a8a96 → 3.4:1 on bg-card */ - width: 2px; -} - -/* Focus ring — keyboard navigation, accent gold for visibility */ -[data-theme='wnamp'] *:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -/* Scrollbar thumb — explicit contrast */ -[data-theme='wnamp'] ::-webkit-scrollbar-thumb { - background: var(--ctp-overlay0); -} -[data-theme='wnamp'] *:hover::-webkit-scrollbar-thumb, -[data-theme='wnamp'] .is-scrolling::-webkit-scrollbar-thumb { - background: var(--ctp-overlay2); -} - -/* ── Classic Winamp: LCD display + bevel buttons ── */ -[data-theme='wnamp'] .connection-type { - color: var(--text-primary); -} - -[data-theme='wnamp'] .connection-server { - color: var(--text-secondary); -} - -[data-theme='wnamp'] .player-track-name { - color: #00ff00; - text-shadow: 0 0 6px rgba(0, 255, 0, 0.65), 0 0 2px rgba(0, 255, 0, 0.4); - font-family: 'Courier New', 'Lucida Console', monospace; - letter-spacing: 0.04em; -} - -[data-theme='wnamp'] .player-track-artist { - color: #00cc00; - font-family: 'Courier New', 'Lucida Console', monospace; - opacity: 0.85; -} - -[data-theme='wnamp'] .btn { - box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4); -} - -[data-theme='wnamp'] .player-btn, -[data-theme='wnamp'] .player-btn-primary { - box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.5); -} - -/* ─── Nucleo — Classic HiFi / Winamp Brass ─── */ -[data-theme='nucleo'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%238c7356%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #c8a458; - --ctp-mantle: #dfc08f; - --ctp-base: #e9d3ac; - --ctp-surface0: #eedbb8; - --ctp-surface1: #f5e4c3; - --ctp-surface2: #f9ecd4; - --ctp-overlay0: #b09060; - --ctp-overlay1: #987848; - --ctp-overlay2: #805c30; - --ctp-text: #2c1e10; - --ctp-subtext1: #5a3e20; - --ctp-subtext0: #8c7356; - /* Accents — burnished brass + warm tones */ - --ctp-mauve: #7a5218; - /* dark burnished brass — primary accent */ - --ctp-lavender: #9a6a28; - /* mid brass — hover/lighter variant */ - --ctp-pink: #c06880; - --ctp-flamingo: #c06050; - --ctp-rosewater: #d08070; - --ctp-blue: #5878a8; - /* muted steel blue */ - --ctp-sapphire: #4868a0; - --ctp-sky: #6898b8; - --ctp-teal: #487878; - --ctp-green: #587838; - /* muted olive */ - --ctp-yellow: #a88020; - /* dark burnished gold */ - --ctp-peach: #b87040; - --ctp-maroon: #903030; - --ctp-red: #a03828; - - /* ── Semantic tokens ── */ - --bg-app: #f5e4c3; - --bg-sidebar: #e9d3ac; - --bg-card: #eedbb8; - --bg-hover: #e3cc9e; - --bg-player: #dfc08f; - --bg-glass: rgba(245, 228, 195, 0.90); - --accent: #7a5218; - --accent-dim: rgba(122, 82, 24, 0.15); - --accent-glow: rgba(122, 82, 24, 0.30); - --text-primary: #2c1e10; - --text-secondary: #5a3e20; - --text-muted: #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; -} - -/* ─── Psychowave — Synthwave / Retrowave ─── */ -[data-theme='psychowave'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23b09ee0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #0d0c1a; - --ctp-mantle: #110f22; - --ctp-base: #161428; - --ctp-surface0: #1f1c38; - --ctp-surface1: #2a2750; - --ctp-surface2: #383468; - --ctp-overlay0: #4a4580; - --ctp-overlay1: #6460a8; - --ctp-overlay2: #8078c8; - /* Text */ - --ctp-text: #e6e0f6; - --ctp-subtext1: #b09ee0; - --ctp-subtext0: #8878c0; - /* Accents — muted synthwave palette */ - --ctp-mauve: #a06ae0; - /* soft violet — primary accent */ - --ctp-lavender: #7878d8; - /* muted indigo — gradient end */ - --ctp-pink: #c060a8; - /* dusty rose */ - --ctp-flamingo: #c07090; - --ctp-rosewater: #c89090; - --ctp-blue: #58a8e8; - /* steel blue */ - --ctp-sapphire: #4880c8; - --ctp-sky: #60c0d8; - --ctp-teal: #40a8a8; - --ctp-green: #58c878; - /* soft mint green */ - --ctp-yellow: #c8a848; - /* muted gold */ - --ctp-peach: #c87848; - --ctp-maroon: #c05868; - --ctp-red: #b04060; - - /* ── Semantic tokens ── */ - --bg-app: #161428; - --bg-sidebar: #110f22; - --bg-card: #1f1c38; - --bg-hover: #2a2750; - --bg-player: #0d0c1a; - --bg-glass: rgba(22, 20, 40, 0.85); - --accent: #a06ae0; - --accent-dim: rgba(160, 106, 224, 0.12); - --accent-glow: rgba(160, 106, 224, 0.30); - --text-primary: #e6e0f6; - --text-secondary: #b09ee0; - --text-muted: #706898; - --border: #383468; - --border-subtle: #1f1c38; - --positive: #58c878; - --warning: #c8a848; - --danger: #b04060; -} - -/* ─── Gruvbox Dark Hard ─── */ -[data-theme='gruvbox-dark-hard'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #1d2021; - --ctp-mantle: #1d2021; - --ctp-base: #282828; - --ctp-surface0: #3c3836; - --ctp-surface1: #504945; - --ctp-surface2: #665c54; - --ctp-overlay0: #7c6f64; - --ctp-overlay1: #928374; - --ctp-overlay2: #a89984; - --ctp-text: #ebdbb2; - --ctp-subtext1: #d5c4a1; - --ctp-subtext0: #bdae93; - --ctp-mauve: #d3869b; - --ctp-lavender: #d3869b; - --ctp-pink: #d3869b; - --ctp-flamingo: #fb4934; - --ctp-rosewater: #fb4934; - --ctp-blue: #83a598; - --ctp-sapphire: #83a598; - --ctp-sky: #8ec07c; - --ctp-teal: #8ec07c; - --ctp-green: #b8bb26; - --ctp-yellow: #fabd2f; - --ctp-peach: #fe8019; - --ctp-maroon: #fb4934; - --ctp-red: #cc241d; - - --bg-app: #1d2021; - --bg-sidebar: #141617; - --bg-card: #3c3836; - --bg-hover: #504945; - --bg-player: #1d2021; - --bg-glass: rgba(29, 32, 33, 0.82); - --accent: #fabd2f; - --accent-dim: rgba(250, 189, 47, 0.15); - --accent-glow: rgba(250, 189, 47, 0.3); - --text-primary: #ebdbb2; - --text-secondary: #d5c4a1; - --text-muted: #928374; - --border: #504945; - --border-subtle: #3c3836; - --border-dropdown: #665c54; - --shadow-dropdown: rgba(0, 0, 0, 0.6); - --positive: #b8bb26; - --warning: #fabd2f; - --danger: #fb4934; -} - -/* ─── Gruvbox Dark Medium ─── */ -[data-theme='gruvbox-dark-medium'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #1d2021; - --ctp-mantle: #1d2021; - --ctp-base: #282828; - --ctp-surface0: #3c3836; - --ctp-surface1: #504945; - --ctp-surface2: #665c54; - --ctp-overlay0: #7c6f64; - --ctp-overlay1: #928374; - --ctp-overlay2: #a89984; - --ctp-text: #ebdbb2; - --ctp-subtext1: #d5c4a1; - --ctp-subtext0: #bdae93; - --ctp-mauve: #d3869b; - --ctp-lavender: #d3869b; - --ctp-pink: #d3869b; - --ctp-flamingo: #fb4934; - --ctp-rosewater: #fb4934; - --ctp-blue: #83a598; - --ctp-sapphire: #83a598; - --ctp-sky: #8ec07c; - --ctp-teal: #8ec07c; - --ctp-green: #b8bb26; - --ctp-yellow: #fabd2f; - --ctp-peach: #fe8019; - --ctp-maroon: #fb4934; - --ctp-red: #cc241d; - - --bg-app: #282828; - --bg-sidebar: #1d2021; - --bg-card: #3c3836; - --bg-hover: #504945; - --bg-player: #1d2021; - --bg-glass: rgba(40, 40, 40, 0.82); - --accent: #fabd2f; - --accent-dim: rgba(250, 189, 47, 0.15); - --accent-glow: rgba(250, 189, 47, 0.3); - --text-primary: #ebdbb2; - --text-secondary: #d5c4a1; - --text-muted: #928374; - --border: #504945; - --border-subtle: #3c3836; - --border-dropdown: #665c54; - --shadow-dropdown: rgba(0, 0, 0, 0.55); - --positive: #b8bb26; - --warning: #fabd2f; - --danger: #fb4934; -} - -/* ─── Gruvbox Dark Soft ─── */ -[data-theme='gruvbox-dark-soft'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ebdbb2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #1d2021; - --ctp-mantle: #282828; - --ctp-base: #32302f; - --ctp-surface0: #3c3836; - --ctp-surface1: #504945; - --ctp-surface2: #665c54; - --ctp-overlay0: #7c6f64; - --ctp-overlay1: #928374; - --ctp-overlay2: #a89984; - --ctp-text: #ebdbb2; - --ctp-subtext1: #d5c4a1; - --ctp-subtext0: #bdae93; - --ctp-mauve: #d3869b; - --ctp-lavender: #d3869b; - --ctp-pink: #d3869b; - --ctp-flamingo: #fb4934; - --ctp-rosewater: #fb4934; - --ctp-blue: #83a598; - --ctp-sapphire: #83a598; - --ctp-sky: #8ec07c; - --ctp-teal: #8ec07c; - --ctp-green: #b8bb26; - --ctp-yellow: #fabd2f; - --ctp-peach: #fe8019; - --ctp-maroon: #fb4934; - --ctp-red: #cc241d; - - --bg-app: #32302f; - --bg-sidebar: #282828; - --bg-card: #45403d; - --bg-hover: #504945; - --bg-player: #282828; - --bg-glass: rgba(50, 48, 47, 0.82); - --accent: #fabd2f; - --accent-dim: rgba(250, 189, 47, 0.15); - --accent-glow: rgba(250, 189, 47, 0.3); - --text-primary: #ebdbb2; - --text-secondary: #d5c4a1; - --text-muted: #928374; - --border: #504945; - --border-subtle: #3c3836; - --border-dropdown: #665c54; - --shadow-dropdown: rgba(0, 0, 0, 0.5); - --positive: #b8bb26; - --warning: #fabd2f; - --danger: #fb4934; -} - -/* ─── Gruvbox Light Hard ─── */ -[data-theme='gruvbox-light-hard'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #ebdbb2; - --ctp-mantle: #f2e5bc; - --ctp-base: #f9f5d7; - --ctp-surface0: #f2e5bc; - --ctp-surface1: #ebdbb2; - --ctp-surface2: #d5c4a1; - --ctp-overlay0: #bdae93; - --ctp-overlay1: #a89984; - --ctp-overlay2: #928374; - --ctp-text: #3c3836; - --ctp-subtext1: #504945; - --ctp-subtext0: #665c54; - --ctp-mauve: #8f3f71; - --ctp-lavender: #8f3f71; - --ctp-pink: #8f3f71; - --ctp-flamingo: #9d0006; - --ctp-rosewater: #cc241d; - --ctp-blue: #076678; - --ctp-sapphire: #076678; - --ctp-sky: #427b58; - --ctp-teal: #427b58; - --ctp-green: #79740e; - --ctp-yellow: #b57614; - --ctp-peach: #af3a03; - --ctp-maroon: #9d0006; - --ctp-red: #cc241d; - - --bg-app: #f9f5d7; - --bg-sidebar: #f2e5bc; - --bg-card: #f2e5bc; - --bg-hover: #ebdbb2; - --bg-player: #f2e5bc; - --bg-glass: rgba(249, 245, 215, 0.9); - --accent: #b57614; - --accent-dim: rgba(181, 118, 20, 0.15); - --accent-glow: rgba(181, 118, 20, 0.25); - --text-primary: #3c3836; - --text-secondary: #504945; - --text-muted: #7c6f64; - --border: #d5c4a1; - --border-subtle: #ebdbb2; - --positive: #79740e; - --warning: #b57614; - --danger: #9d0006; -} - -/* ─── Gruvbox Light Medium ─── */ -[data-theme='gruvbox-light-medium'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #ebdbb2; - --ctp-mantle: #f2e5bc; - --ctp-base: #fbf1c7; - --ctp-surface0: #f2e5bc; - --ctp-surface1: #ebdbb2; - --ctp-surface2: #d5c4a1; - --ctp-overlay0: #bdae93; - --ctp-overlay1: #a89984; - --ctp-overlay2: #928374; - --ctp-text: #3c3836; - --ctp-subtext1: #504945; - --ctp-subtext0: #665c54; - --ctp-mauve: #8f3f71; - --ctp-lavender: #8f3f71; - --ctp-pink: #8f3f71; - --ctp-flamingo: #9d0006; - --ctp-rosewater: #cc241d; - --ctp-blue: #076678; - --ctp-sapphire: #076678; - --ctp-sky: #427b58; - --ctp-teal: #427b58; - --ctp-green: #79740e; - --ctp-yellow: #b57614; - --ctp-peach: #af3a03; - --ctp-maroon: #9d0006; - --ctp-red: #cc241d; - - --bg-app: #fbf1c7; - --bg-sidebar: #f2e5bc; - --bg-card: #f2e5bc; - --bg-hover: #ebdbb2; - --bg-player: #f2e5bc; - --bg-glass: rgba(251, 241, 199, 0.9); - --accent: #b57614; - --accent-dim: rgba(181, 118, 20, 0.15); - --accent-glow: rgba(181, 118, 20, 0.25); - --text-primary: #3c3836; - --text-secondary: #504945; - --text-muted: #7c6f64; - --border: #d5c4a1; - --border-subtle: #ebdbb2; - --positive: #79740e; - --warning: #b57614; - --danger: #9d0006; -} - -/* ─── Gruvbox Light Soft ─── */ -[data-theme='gruvbox-light-soft'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23504945%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #ebdbb2; - --ctp-mantle: #f2e5bc; - --ctp-base: #f2e5bc; - --ctp-surface0: #ebdbb2; - --ctp-surface1: #d5c4a1; - --ctp-surface2: #bdae93; - --ctp-overlay0: #a89984; - --ctp-overlay1: #928374; - --ctp-overlay2: #7c6f64; - --ctp-text: #3c3836; - --ctp-subtext1: #504945; - --ctp-subtext0: #665c54; - --ctp-mauve: #8f3f71; - --ctp-lavender: #8f3f71; - --ctp-pink: #8f3f71; - --ctp-flamingo: #9d0006; - --ctp-rosewater: #cc241d; - --ctp-blue: #076678; - --ctp-sapphire: #076678; - --ctp-sky: #427b58; - --ctp-teal: #427b58; - --ctp-green: #79740e; - --ctp-yellow: #b57614; - --ctp-peach: #af3a03; - --ctp-maroon: #9d0006; - --ctp-red: #cc241d; - - --bg-app: #f2e5bc; - --bg-sidebar: #ebdbb2; - --bg-card: #ebdbb2; - --bg-hover: #d5c4a1; - --bg-player: #ebdbb2; - --bg-glass: rgba(242, 229, 188, 0.9); - --accent: #b57614; - --accent-dim: rgba(181, 118, 20, 0.15); - --accent-glow: rgba(181, 118, 20, 0.25); - --text-primary: #3c3836; - --text-secondary: #504945; - --text-muted: #7c6f64; - --border: #d5c4a1; - --border-subtle: #ebdbb2; - --positive: #79740e; - --warning: #b57614; - --danger: #9d0006; -} - -/* ── 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; -} - -/* ─── Lambda 17 — Half-Life / City 17 ─── */ -/* HEV orange + Combine Overwatch teal + City 17 concrete */ -[data-theme='lambda-17'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff9d00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* City 17 — warm concrete dark, not pure black */ - --ctp-crust: #0c0d0e; - --ctp-mantle: #111315; - --ctp-base: #171a1c; - --ctp-surface0: #1f2326; - --ctp-surface1: #282d30; - --ctp-surface2: #33393d; - --ctp-overlay0: #4e5660; - --ctp-overlay1: #718090; - --ctp-overlay2: #96a8b4; - --ctp-text: #e4ddd0; - /* concrete dust off-white */ - --ctp-subtext1: #c8c0b0; - --ctp-subtext0: #96a8b4; - - /* Half-Life palette */ - --ctp-peach: #ff9d00; - /* HEV suit orange */ - --ctp-mauve: #ff9d00; - --ctp-lavender: #ffb84d; - --ctp-flamingo: #ffb84d; - --ctp-rosewater: #ffd080; - --ctp-teal: #00c8c0; - /* Combine Overwatch scanner teal */ - --ctp-sky: #00c8c0; - --ctp-sapphire: #0090a0; - --ctp-blue: #0060a0; - /* G-Man suit navy */ - --ctp-green: #78c800; - /* Headcrab / barnacle green */ - --ctp-yellow: #f0d000; - /* radiation warning yellow */ - --ctp-red: #e03020; - /* danger / health critical */ - --ctp-maroon: #b82010; - --ctp-pink: #cc44aa; - /* Xen alien purple-pink */ - - --bg-app: #171a1c; - /* City 17 corridor concrete */ - --bg-sidebar: #111315; - /* Combine facility wall */ - --bg-card: #1f2326; - --bg-hover: rgba(255, 157, 0, 0.08); - --bg-player: #0c0d0e; - /* HEV suit display dark */ - --bg-glass: rgba(17, 19, 21, 0.95); - - --accent: #ff9d00; - /* HEV orange */ - --accent-dim: rgba(255, 157, 0, 0.13); - --accent-glow: rgba(255, 157, 0, 0.45); - --volume-accent: #00c8c0; - /* Combine teal for volume */ - - --text-primary: #e4ddd0; - /* concrete dust off-white */ - --text-secondary: #00c8c0; - /* Combine Overwatch teal */ - --text-muted: #4e5660; - --border: #2a3035; - --border-subtle: #1f2326; - --shadow-dropdown: rgba(0, 0, 0, 0.85); - - --positive: #78c800; - --warning: #ff9d00; - --danger: #e03020; - - --radius-sm: 0px; - --radius-md: 1px; - --radius-lg: 2px; - --radius-xl: 3px; -} - -/* Sidebar = Combine control panel: horizontal panel lines */ -[data-theme='lambda-17'] .sidebar { - border-right: 2px solid #ff9d00; - box-shadow: 2px 0 12px rgba(255, 157, 0, 0.08); - background-image: repeating-linear-gradient(0deg, - transparent, - transparent 28px, - rgba(0, 200, 192, 0.04) 28px, - rgba(0, 200, 192, 0.04) 29px); -} - -/* Player bar = HEV suit monitor: orange top + teal secondary */ -[data-theme='lambda-17'] .player-bar { - border-top: 2px solid #ff9d00; - box-shadow: - 0 -1px 0 rgba(0, 200, 192, 0.3), - 0 -6px 24px rgba(255, 157, 0, 0.07); -} - -/* Track name = HEV announcement style */ -[data-theme='lambda-17'] .player-track-name { - color: #ff9d00; - text-shadow: 0 0 10px rgba(255, 157, 0, 0.65), 0 0 24px rgba(255, 157, 0, 0.25); - text-transform: uppercase; - font-weight: 700; - letter-spacing: 0.06em; -} - -/* Artist = Combine Overwatch voice color */ -[data-theme='lambda-17'] .player-track-artist { - color: #00c8c0; -} - -/* Queue album = Xen purple */ -[data-theme='lambda-17'] .queue-meta-album { - color: #cc44aa; -} - -/* Active nav: HEV orange gradient */ -[data-theme='lambda-17'] .nav-link.active { - background: linear-gradient(90deg, rgba(255, 157, 0, 0.16) 0%, transparent 100%); - color: #ff9d00; -} - -[data-theme='lambda-17'] .nav-link.active::before { - width: 3px; - box-shadow: 2px 0 10px rgba(255, 157, 0, 0.6); -} - -/* Buttons */ -[data-theme='lambda-17'] .btn-primary { - background: #ff9d00; - color: #0c0d0e; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.06em; - border: none; - border-radius: 1px; -} - -[data-theme='lambda-17'] .btn-primary:hover { - background: #ffb030; -} - -/* Queue active = HEV orange lambda bar */ -[data-theme='lambda-17'] .queue-item.active { - background: rgba(255, 157, 0, 0.08); - box-shadow: inset 3px 0 0 #ff9d00; -} - -[data-theme='lambda-17'] .np-queue-item.active { - background: rgba(255, 157, 0, 0.07); -} - -[data-theme='lambda-17'] .np-queue-item-active { - color: #ff9d00; - text-shadow: 0 0 8px rgba(255, 157, 0, 0.55); -} - -/* Now-playing active track = Combine teal */ -[data-theme='lambda-17'] .np-album-track.active .np-album-track-title, -[data-theme='lambda-17'] .np-album-track.active .np-album-track-num { - color: #00c8c0; - text-shadow: 0 0 8px rgba(0, 200, 192, 0.5); -} - -/* Hover rows */ -[data-theme='lambda-17'] .track-row:hover, -[data-theme='lambda-17'] .track-row.context-active { - background: rgba(255, 157, 0, 0.07) !important; - box-shadow: inset 3px 0 0 #ff9d00; -} - -[data-theme='lambda-17'] .queue-item:hover, -[data-theme='lambda-17'] .queue-item.context-active { - background: rgba(255, 157, 0, 0.07) !important; - box-shadow: inset 3px 0 0 #ff9d00; -} - -[data-theme='lambda-17'] .np-queue-item:hover, -[data-theme='lambda-17'] .np-queue-item.context-active { - background: rgba(255, 157, 0, 0.07); - box-shadow: inset 2px 0 0 #ff9d00; -} - -[data-theme='lambda-17'] .artist-row:hover { - background: rgba(255, 157, 0, 0.06); - box-shadow: inset 3px 0 0 #ff9d00; -} - -[data-theme='lambda-17'] .playlist-row:hover { - background: rgba(255, 157, 0, 0.06); - box-shadow: inset 3px 0 0 #ff9d00; -} - -/* Settings tabs: Combine teal when active */ -[data-theme='lambda-17'] .settings-tab:hover { - background: rgba(255, 157, 0, 0.07); - color: #ff9d00; -} - -[data-theme='lambda-17'] .settings-tab.active { - background: rgba(0, 200, 192, 0.08); - color: #00c8c0; - box-shadow: inset 3px 0 0 #00c8c0; -} - -/* Queue tabs */ -[data-theme='lambda-17'] .queue-tab-btn:hover { - background: rgba(255, 157, 0, 0.07); - color: #ff9d00; -} - -/* Dropdowns */ -[data-theme='lambda-17'] .custom-select-trigger:hover { - background: rgba(255, 157, 0, 0.07); -} - -[data-theme='lambda-17'] .custom-select-option:hover { - background: rgba(255, 157, 0, 0.1) !important; - color: #ff9d00 !important; -} - -/* Artist pills = headcrab green */ -[data-theme='lambda-17'] .artist-ext-link:hover { - background: rgba(120, 200, 0, 0.1); - color: #78c800 !important; - border-color: rgba(120, 200, 0, 0.4) !important; -} - -/* Connection indicators */ -[data-theme='lambda-17'] .connection-type, -[data-theme='lambda-17'] .connection-server { - color: #00c8c0; -} - -/* ─── Guild Wars 1 — Tyria ─── */ -[data-theme='gw1'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c8960c%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Palette — aged Tyrian stone, ornate gold, Searing crimson */ - --ctp-crust: #060402; - --ctp-mantle: #0a0806; - --ctp-base: #0e0b08; - --ctp-surface0: #1a1208; - --ctp-surface1: #261b0c; - --ctp-surface2: #342510; - --ctp-overlay0: #5a4830; - --ctp-overlay1: #7a6448; - --ctp-overlay2: #9a8060; - --ctp-text: #f0e4c4; - --ctp-subtext1: #d4c49a; - --ctp-subtext0: #b0a07a; - --ctp-mauve: #c8960c; - --ctp-lavender: #e8b820; - --ctp-pink: #c0321a; - --ctp-flamingo: #d4780c; - --ctp-rosewater: #f0e4c4; - --ctp-green: #5a8030; - --ctp-teal: #3a6858; - --ctp-sky: #7aaccc; - --ctp-blue: #3a6898; - --ctp-sapphire: #3a6898; - --ctp-yellow: #e8c840; - --ctp-peach: #d4780c; - --ctp-maroon: #8b1515; - --ctp-red: #c0321a; - - --bg-app: #0e0b08; - --bg-sidebar: #0a0806; - --bg-card: #1a1208; - --bg-hover: #261b0c; - --bg-player: #060402; - --bg-glass: rgba(14, 11, 8, 0.88); - --accent: #c8960c; - --accent-dim: rgba(200, 150, 12, 0.15); - --accent-glow: rgba(200, 150, 12, 0.35); - --text-primary: #f0e4c4; - --text-secondary: #9a8060; - --text-muted: #a08858; - --border: rgba(200, 150, 12, 0.28); - --border-subtle: rgba(200, 150, 12, 0.10); - --border-dropdown: rgba(200, 150, 12, 0.35); - --shadow-dropdown: rgba(0, 0, 0, 0.85); - --positive: #5a8030; - --warning: #d4780c; - --danger: #c0321a; - --radius-sm: 2px; - --radius-md: 3px; - --radius-lg: 4px; -} - -/* App shell — solid dark stone base (grid moved to sidebar-only for perf) */ - -/* Sidebar — worn leather with faint horizontal stone lines */ -[data-theme='gw1'] .sidebar { - border-right: 1px solid rgba(200, 150, 12, 0.35); - background: linear-gradient(180deg, #0c0906 0%, #080604 100%); - background-image: repeating-linear-gradient(0deg, - rgba(200, 150, 12, 0.04) 0px, - transparent 1px, - transparent 48px, - rgba(200, 150, 12, 0.04) 49px); -} - -/* Player bar — the GW1 skill bar: deepest black, gold top border */ -[data-theme='gw1'] .player-bar { - background: #060402; - border-top: 2px solid #c8960c; - box-shadow: 0 -6px 28px rgba(200, 150, 12, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.9); -} - -/* Track name — Tyrian item-name gold glow, Cinzel serif */ -[data-theme='gw1'] .player-track-name { - color: #e8b820; - text-shadow: 0 0 10px rgba(232, 184, 32, 0.55), 0 0 22px rgba(200, 150, 12, 0.25); - font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif; - letter-spacing: 0.03em; -} - -/* Artist name — faded parchment, not competing with gold */ -[data-theme='gw1'] .player-artist-name { - color: #9a8060; -} - -/* Nav active — left gold bar like GW1 menu selection */ -[data-theme='gw1'] .nav-link.active { - background: linear-gradient(90deg, rgba(200, 150, 12, 0.20) 0%, transparent 100%); - border-left: 3px solid #c8960c; - color: #e8b820; -} - -[data-theme='gw1'] .nav-link:hover:not(.active) { - background: linear-gradient(90deg, rgba(200, 150, 12, 0.09) 0%, transparent 100%); - border-left: 3px solid rgba(200, 150, 12, 0.35); -} - -/* Content header — ornate double gold rule */ -[data-theme='gw1'] .content-header { - border-bottom: 1px solid rgba(200, 150, 12, 0.22); - position: relative; -} - -[data-theme='gw1'] .content-header::after { - content: ''; - position: absolute; - bottom: -3px; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, transparent 0%, rgba(200, 150, 12, 0.7) 20%, rgba(232, 184, 32, 0.9) 50%, rgba(200, 150, 12, 0.7) 80%, transparent 100%); -} - -/* Cards — dark leather panels with subtle gold frame */ -[data-theme='gw1'] .album-card, -[data-theme='gw1'] .artist-card { - box-shadow: inset 0 0 0 1px rgba(200, 150, 12, 0.18); -} - -[data-theme='gw1'] .album-card:hover, -[data-theme='gw1'] .artist-card:hover { - box-shadow: inset 0 0 0 1px rgba(200, 150, 12, 0.55), 0 4px 20px rgba(200, 150, 12, 0.18); -} - -/* Queue / track rows — gold left accent bar on hover */ -[data-theme='gw1'] .track-row:hover, -[data-theme='gw1'] .queue-item:hover { - box-shadow: inset 2px 0 0 #c8960c; - background: rgba(200, 150, 12, 0.08); -} - -/* Primary play button — hammered gold like GW1 UI buttons */ -[data-theme='gw1'] .player-btn-primary { - background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%); - color: #060402; - box-shadow: 0 0 14px rgba(200, 150, 12, 0.45); - border: 1px solid #906606; -} - -[data-theme='gw1'] .player-btn-primary:hover { - background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%); - box-shadow: 0 0 22px rgba(200, 150, 12, 0.65); -} - -/* btn-primary (play album, etc.) */ -[data-theme='gw1'] .btn-primary { - background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%); - color: #060402; - border: 1px solid #906606; -} - -[data-theme='gw1'] .btn-primary:hover { - background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%); -} - -/* Hero play button — Cinzel font, gold, no flash on hover */ -[data-theme='gw1'] .hero-play-btn { - background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%); - color: #060402; - border: 1px solid #906606; - box-shadow: 0 2px 14px rgba(200, 150, 12, 0.45); - font-family: 'Cinzel', Georgia, serif; - letter-spacing: 0.05em; - transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); -} - -[data-theme='gw1'] .hero-play-btn:hover { - background: linear-gradient(180deg, #f0c830 0%, #d8a818 50%, #b88818 100%); - box-shadow: 0 4px 22px rgba(200, 150, 12, 0.65); - transform: scale(1.02); -} - -/* Album card overlay play button */ -[data-theme='gw1'] .album-card-details-btn { - background: linear-gradient(180deg, #e8b820 0%, #c8960c 50%, #a87808 100%); - color: #060402; - border: 1px solid #906606; - box-shadow: 0 2px 10px rgba(200, 150, 12, 0.5); -} - -/* Scrollbar — dark stone with gold thumb */ -[data-theme='gw1'] ::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -[data-theme='gw1'] ::-webkit-scrollbar-track { - background: #0a0806; - border-left: 1px solid rgba(200, 150, 12, 0.08); -} - -[data-theme='gw1'] ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, #c8960c, #a87808); - border-radius: 3px; -} - -[data-theme='gw1'] ::-webkit-scrollbar-thumb:hover { - background: #e8b820; -} - - -/* ─── Grand Theft Audio — GTA V / Los Santos at Night ─── */ -/* Money green + Wanted-level gold + LS asphalt dark */ -[data-theme='grand-theft-audio'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2357b05a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* LS asphalt — almost black with a warm urban undertone */ - --ctp-crust: #030303; - --ctp-mantle: #080808; - --ctp-base: #0e0e0e; - --ctp-surface0: #161616; - --ctp-surface1: #202020; - --ctp-surface2: #2c2c2c; - --ctp-overlay0: #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; -} - -/* ─── V-Tactical ─── */ -[data-theme='v-tactical'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23708599%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #090c0e; - --ctp-mantle: #0d1114; - --ctp-base: #161c22; - --ctp-surface0: #1f2830; - --ctp-surface1: #2a3640; - --ctp-surface2: #3a4a58; - --ctp-overlay0: #526371; - --ctp-overlay1: #708599; - --ctp-overlay2: #8da4b8; - --ctp-text: #e1e9ef; - --ctp-subtext1: #b0c1d1; - --ctp-subtext0: #8da4b8; - --ctp-mauve: #ff8a00; - --ctp-lavender: #ffaa45; - --ctp-pink: #bf616a; - --ctp-flamingo: #d08770; - --ctp-rosewater: #e1e9ef; - --ctp-green: #a3be8c; - --ctp-teal: #88c0d0; - --ctp-sky: #81a1c1; - --ctp-blue: #5e81ac; - --ctp-sapphire: #5e81ac; - --ctp-yellow: #ebcb8b; - --ctp-peach: #d08770; - --ctp-maroon: #bf616a; - --ctp-red: #bf616a; - - --bg-app: #161c22; - --bg-sidebar: #0d1114; - --bg-card: #1f2830; - --bg-hover: rgba(255, 138, 0, 0.1); - --bg-player: #090c0e; - --bg-glass: rgba(13, 17, 20, 0.85); - --accent: #ff8a00; - --accent-dim: rgba(255, 138, 0, 0.15); - --accent-glow: rgba(255, 138, 0, 0.4); - --text-primary: #e1e9ef; - --text-secondary: #b0c1d1; - --text-muted: #708599; - --border: #3a4a58; - --border-subtle: #1f2830; - --border-dropdown: #3a4a58; - --shadow-dropdown: rgba(0, 0, 0, 0.7); - --positive: #a3be8c; - --warning: #ebcb8b; - --danger: #bf616a; - --radius-sm: 1px; - --radius-md: 2px; - --radius-lg: 4px; -} - -[data-theme='v-tactical'] .sidebar { - border-right: 1px solid var(--border); -} - -[data-theme='v-tactical'] .player-bar { - border-top: 2px solid var(--accent); - background: linear-gradient(180deg, #0d1114 0%, #090c0e 100%); -} - -[data-theme='v-tactical'] .player-track-name { - text-transform: uppercase; - letter-spacing: 1px; - font-weight: 700; - color: var(--accent); - text-shadow: 0 0 10px var(--accent-glow); -} - -[data-theme='v-tactical'] .nav-link.active { - background: linear-gradient(90deg, rgba(255, 138, 0, 0.15) 0%, transparent 100%); - border-left: 3px solid var(--accent); -} - -[data-theme='v-tactical'] .btn-primary { - text-transform: uppercase; - font-weight: 800; - letter-spacing: 0.5px; -} - -/* ─── NightCity 2077 — Cyberpunk 2077 ─── */ -/* V yellow + Netrunner cyan + Gang magenta + Johnny Silverhand glitch */ -@keyframes glitch-2077 { - - 0%, - 85%, - 100% { - text-shadow: - 0 0 8px rgba(252, 238, 10, 0.75), - 0 0 22px rgba(252, 238, 10, 0.35), - 0 0 48px rgba(252, 238, 10, 0.12); - transform: none; - } - - 86% { - text-shadow: - -3px 0 rgba(0, 245, 255, 0.65), - 3px 0 rgba(255, 45, 155, 0.65), - 0 0 8px rgba(252, 238, 10, 0.75); - transform: translateX(-2px); - } - - 87% { - text-shadow: - 3px 0 rgba(0, 245, 255, 0.65), - -3px 0 rgba(255, 45, 155, 0.65), - 0 0 8px rgba(252, 238, 10, 0.75); - transform: translateX(2px) skewX(-2deg); - } - - 88% { - text-shadow: - 0 0 8px rgba(252, 238, 10, 0.75), - 0 0 22px rgba(252, 238, 10, 0.35); - transform: none; - } - - 89% { - text-shadow: - -1px 0 rgba(0, 245, 255, 0.4), - 1px 0 rgba(255, 45, 155, 0.4), - 0 0 10px rgba(252, 238, 10, 0.8); - transform: translateX(1px); - } - - 90% { - text-shadow: - 0 0 8px rgba(252, 238, 10, 0.75), - 0 0 22px rgba(252, 238, 10, 0.35), - 0 0 48px rgba(252, 238, 10, 0.12); - transform: none; - } -} - -[data-theme='nightcity-2077'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FCEE0A%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Night City asphalt — dark with cold blue-black undertone */ - --ctp-crust: #000003; - --ctp-mantle: #020208; - --ctp-base: #06060f; - --ctp-surface0: #0d0d1a; - --ctp-surface1: #141428; - --ctp-surface2: #1e1e38; - --ctp-overlay0: #50508a; - --ctp-overlay1: #7878b8; - --ctp-overlay2: #a0a0d8; - --ctp-text: #f0f0ff; - --ctp-subtext1: #d0d0f8; - --ctp-subtext0: #a0a0d8; - - /* Cyberpunk palette */ - --ctp-yellow: #FCEE0A; - /* V / Johnny — primary yellow */ - --ctp-mauve: #FCEE0A; - --ctp-lavender: #ffe84d; - --ctp-teal: #00f5ff; - /* Netrunner cyan */ - --ctp-sky: #00f5ff; - --ctp-sapphire: #00c8e0; - --ctp-blue: #0088ff; - /* NCPD/corpo blue */ - --ctp-pink: #ff2d9b; - /* Gang magenta — Maelstrom/Valentinos neon */ - --ctp-flamingo: #ff2d9b; - --ctp-rosewater: #ff80c8; - --ctp-green: #00ff9f; - /* Netrunner green — Quickhack */ - --ctp-red: #ff1a1a; - /* Combat critical / Arasaka red */ - --ctp-maroon: #cc0000; - --ctp-peach: #ff8800; - /* Trauma Team orange */ - - --bg-app: #06060f; - --bg-sidebar: #020208; - /* deeper — like the Night City backdrop */ - --bg-card: #0d0d1a; - --bg-hover: rgba(252, 238, 10, 0.07); - --bg-player: #000003; - --bg-glass: rgba(6, 6, 15, 0.96); - - --accent: #FCEE0A; - /* V yellow */ - --accent-dim: rgba(252, 238, 10, 0.12); - --accent-glow: rgba(252, 238, 10, 0.5); - --volume-accent: #00f5ff; - /* Netrunner cyan for volume */ - - --text-primary: #f0f0ff; - --text-secondary: #00f5ff; - /* Netrunner cyan — the key differentiator */ - --text-muted: #6868a8; - --border: #1e1e38; - --border-subtle: #0d0d1a; - --shadow-dropdown: rgba(0, 0, 0, 0.95); - - --positive: #00ff9f; - --warning: #FCEE0A; - --danger: #ff1a1a; - - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 2px; - --radius-xl: 2px; -} - -/* Sidebar = tech/netrunner panel: cyan border + scan-line texture */ -[data-theme='nightcity-2077'] .sidebar { - border-right: 2px solid #00f5ff; - box-shadow: 2px 0 16px rgba(0, 245, 255, 0.1); - background-image: repeating-linear-gradient(0deg, - transparent, - transparent 3px, - rgba(0, 245, 255, 0.012) 3px, - rgba(0, 245, 255, 0.012) 4px); -} - -/* Player bar = HUD: V yellow top + cyan secondary strip */ -[data-theme='nightcity-2077'] .player-bar { - border-top: 2px solid #FCEE0A; - box-shadow: - 0 -1px 0 rgba(0, 245, 255, 0.35), - 0 -8px 32px rgba(252, 238, 10, 0.08), - 0 -2px 16px rgba(0, 245, 255, 0.06); -} - -/* Track name = V's yellow + Johnny Silverhand glitch */ -[data-theme='nightcity-2077'] .player-track-name { - color: #FCEE0A; - text-transform: uppercase; - font-weight: 800; - letter-spacing: 0.08em; - animation: glitch-2077 9s infinite; -} - -/* Artist = Netrunner cyan */ -[data-theme='nightcity-2077'] .player-track-artist { - color: #00f5ff; -} - -/* Queue album = gang magenta */ -[data-theme='nightcity-2077'] .queue-meta-album { - color: #ff2d9b; -} - -/* Active nav: yellow gradient + chamfered feel */ -[data-theme='nightcity-2077'] .nav-link.active { - background: linear-gradient(90deg, rgba(252, 238, 10, 0.15) 0%, transparent 100%); - color: #FCEE0A; -} - -[data-theme='nightcity-2077'] .nav-link.active::before { - width: 3px; - background: #FCEE0A; - box-shadow: 2px 0 14px rgba(252, 238, 10, 0.7); -} - -/* Buttons: angular chamfered corner — iconic CP2077 UI shape */ -[data-theme='nightcity-2077'] .btn-primary { - background: #FCEE0A; - color: #000000; - font-weight: 800; - text-transform: uppercase; - letter-spacing: 0.08em; - border: none; - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); -} - -[data-theme='nightcity-2077'] .btn-primary:hover { - background: #ffe84d; - box-shadow: 0 0 20px rgba(252, 238, 10, 0.5); -} - -[data-theme='nightcity-2077'] .btn-surface { - border-radius: 0; - clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%); -} - -/* Queue active = cyan netrunner bar */ -[data-theme='nightcity-2077'] .queue-item.active { - background: rgba(0, 245, 255, 0.07); - box-shadow: inset 3px 0 0 #00f5ff; -} - -[data-theme='nightcity-2077'] .np-queue-item.active { - background: rgba(0, 245, 255, 0.06); -} - -[data-theme='nightcity-2077'] .np-queue-item-active { - color: #FCEE0A; - text-shadow: 0 0 8px rgba(252, 238, 10, 0.6); -} - -/* Now-playing active track = magenta gang glow */ -[data-theme='nightcity-2077'] .np-album-track.active .np-album-track-title, -[data-theme='nightcity-2077'] .np-album-track.active .np-album-track-num { - color: #ff2d9b; - text-shadow: 0 0 10px rgba(255, 45, 155, 0.55); -} - -/* Hover rows: yellow left bar */ -[data-theme='nightcity-2077'] .track-row:hover, -[data-theme='nightcity-2077'] .track-row.context-active { - background: rgba(252, 238, 10, 0.06) !important; - box-shadow: inset 3px 0 0 #FCEE0A; -} - -[data-theme='nightcity-2077'] .queue-item:hover, -[data-theme='nightcity-2077'] .queue-item.context-active { - background: rgba(0, 245, 255, 0.06) !important; - box-shadow: inset 3px 0 0 #00f5ff; -} - -[data-theme='nightcity-2077'] .np-queue-item:hover, -[data-theme='nightcity-2077'] .np-queue-item.context-active { - background: rgba(0, 245, 255, 0.06); - box-shadow: inset 2px 0 0 #00f5ff; -} - -[data-theme='nightcity-2077'] .artist-row:hover { - background: rgba(252, 238, 10, 0.05); - box-shadow: inset 3px 0 0 #FCEE0A; -} - -[data-theme='nightcity-2077'] .playlist-row:hover { - background: rgba(252, 238, 10, 0.05); - box-shadow: inset 3px 0 0 #FCEE0A; -} - -/* Settings tabs: active = magenta Valentinos style */ -[data-theme='nightcity-2077'] .settings-tab:hover { - background: rgba(252, 238, 10, 0.06); - color: #FCEE0A; -} - -[data-theme='nightcity-2077'] .settings-tab.active { - background: rgba(255, 45, 155, 0.08); - color: #ff2d9b; - box-shadow: inset 3px 0 0 #ff2d9b; -} - -/* Queue tabs */ -[data-theme='nightcity-2077'] .queue-tab-btn:hover { - background: rgba(0, 245, 255, 0.07); - color: #00f5ff; -} - -/* Dropdowns */ -[data-theme='nightcity-2077'] .custom-select-trigger:hover { - background: rgba(252, 238, 10, 0.07); -} - -[data-theme='nightcity-2077'] .custom-select-option:hover { - background: rgba(252, 238, 10, 0.1) !important; - color: #FCEE0A !important; -} - -/* Artist pills = Trauma Team orange */ -[data-theme='nightcity-2077'] .artist-ext-link:hover { - background: rgba(255, 136, 0, 0.1); - color: #ff8800 !important; - border-color: rgba(255, 136, 0, 0.4) !important; -} - -/* Cards: dark glass with cyan edge-glow */ -[data-theme='nightcity-2077'] .glass { - border: 1px solid rgba(0, 245, 255, 0.12) !important; - box-shadow: 0 0 0 1px rgba(252, 238, 10, 0.04), inset 0 0 20px rgba(0, 245, 255, 0.02) !important; -} - -/* Connection indicators */ -[data-theme='nightcity-2077'] .connection-type, -[data-theme='nightcity-2077'] .connection-server { - color: #00f5ff; -} - -/* ─── Heisenberg — Breaking Bad ─── */ -@keyframes crystal-pulse { - - 0%, - 100% { - text-shadow: - 0 0 6px rgba(78, 223, 47, 0.60), - 0 0 18px rgba(78, 223, 47, 0.32), - 0 0 40px rgba(78, 223, 47, 0.14); - } - - 50% { - text-shadow: - 0 0 10px rgba(78, 223, 47, 0.80), - 0 0 28px rgba(78, 223, 47, 0.48), - 0 0 60px rgba(78, 223, 47, 0.22); - } -} - -[data-theme='heisenberg'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2335d4f8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Breaking Bad palette — crystal blue, BB logo green, hazmat yellow */ - --ctp-crust: #050709; - --ctp-mantle: #080b0e; - --ctp-base: #0b0e12; - --ctp-surface0: #141a22; - --ctp-surface1: #1e2830; - --ctp-surface2: #283440; - --ctp-overlay0: #3a4e60; - --ctp-overlay1: #5a7288; - --ctp-overlay2: #7a96a8; - --ctp-text: #e4f0f8; - --ctp-subtext1: #c0d8e8; - --ctp-subtext0: #8ab0c8; - --ctp-mauve: #35d4f8; - --ctp-lavender: #70e8ff; - --ctp-pink: #f05080; - --ctp-flamingo: #e84060; - --ctp-rosewater: #e4f0f8; - --ctp-green: #4edf2f; - --ctp-teal: #20c8b0; - --ctp-sky: #55ddff; - --ctp-blue: #35d4f8; - --ctp-sapphire: #1ab8e0; - --ctp-yellow: #f0c020; - --ctp-peach: #e88040; - --ctp-maroon: #a01820; - --ctp-red: #e03030; - - --bg-app: #0b0e12; - --bg-sidebar: #060a0e; - --bg-card: #141a22; - --bg-hover: #1e2830; - --bg-player: #060809; - --bg-glass: rgba(8, 11, 14, 0.92); - --accent: #35d4f8; - --accent-dim: rgba(53, 212, 248, 0.12); - --accent-glow: rgba(53, 212, 248, 0.35); - --text-primary: #e4f0f8; - --text-secondary: #7a96a8; - --text-muted: #7aaabe; - --border: rgba(53, 212, 248, 0.14); - --border-subtle: rgba(53, 212, 248, 0.06); - --border-dropdown: rgba(53, 212, 248, 0.25); - --shadow-dropdown: rgba(0, 0, 0, 0.92); - --positive: #4edf2f; - --warning: #f0c020; - --danger: #e03030; - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 6px; -} - -/* App shell — periodic table grid (BB opening credits) */ -[data-theme='heisenberg'] .app-shell { - background-image: - linear-gradient(rgba(53, 212, 248, 0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(53, 212, 248, 0.04) 1px, transparent 1px); - background-size: 60px 60px; -} - -/* Sidebar — darker lab space, hazmat tape diagonal (very subtle) */ -[data-theme='heisenberg'] .sidebar { - background: #060a0e; - border-right: 1px solid rgba(53, 212, 248, 0.14); - background-image: - repeating-linear-gradient(45deg, - transparent 0px, - transparent 20px, - rgba(240, 192, 32, 0.028) 20px, - rgba(240, 192, 32, 0.028) 22px); -} - -/* Player bar — lab fluorescent: crystal blue top glow */ -[data-theme='heisenberg'] .player-bar { - background: #060809; - border-top: 2px solid #35d4f8; - box-shadow: 0 -8px 32px rgba(53, 212, 248, 0.14), 0 -1px 0 rgba(0, 0, 0, 0.9); -} - -/* Track name — BB logo green glow (the Br/Ba element box color) */ -[data-theme='heisenberg'] .player-track-name { - color: #4edf2f; - animation: crystal-pulse 3s ease-in-out infinite; -} - -/* Artist name — hazmat suit yellow */ -[data-theme='heisenberg'] .player-artist-name { - color: #f0c020; -} - -/* Nav active — BB green left bar */ -[data-theme='heisenberg'] .nav-link.active { - background: linear-gradient(90deg, rgba(78, 223, 47, 0.12) 0%, transparent 100%); - border-left: 3px solid #4edf2f; - color: #4edf2f; -} - -[data-theme='heisenberg'] .nav-link:hover:not(.active) { - background: linear-gradient(90deg, rgba(53, 212, 248, 0.06) 0%, transparent 100%); - border-left: 3px solid rgba(53, 212, 248, 0.28); -} - -/* Content header */ -[data-theme='heisenberg'] .content-header { - border-bottom: 1px solid rgba(53, 212, 248, 0.10); -} - -/* Cards — blue crystal border on hover */ -[data-theme='heisenberg'] .album-card:hover, -[data-theme='heisenberg'] .artist-card:hover { - box-shadow: 0 0 0 1px rgba(53, 212, 248, 0.50), 0 4px 20px rgba(53, 212, 248, 0.14); -} - -/* Track / queue rows */ -[data-theme='heisenberg'] .track-row:hover, -[data-theme='heisenberg'] .queue-item:hover { - box-shadow: inset 2px 0 0 #35d4f8; - background: rgba(53, 212, 248, 0.05); -} - -/* Primary play button — crystal blue gradient */ -[data-theme='heisenberg'] .player-btn-primary { - background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%); - color: #060809; - box-shadow: 0 0 16px rgba(53, 212, 248, 0.45); - border: 1px solid #14a8d0; -} - -[data-theme='heisenberg'] .player-btn-primary:hover { - background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%); - box-shadow: 0 0 26px rgba(53, 212, 248, 0.70); -} - -/* btn-primary */ -[data-theme='heisenberg'] .btn-primary { - background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%); - color: #060809; - border: 1px solid #14a8d0; -} - -[data-theme='heisenberg'] .btn-primary:hover { - background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%); -} - -/* Hero play button */ -[data-theme='heisenberg'] .hero-play-btn { - background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%); - color: #060809; - border: 1px solid #14a8d0; - box-shadow: 0 2px 16px rgba(53, 212, 248, 0.45); - transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); -} - -[data-theme='heisenberg'] .hero-play-btn:hover { - background: linear-gradient(180deg, #7aecff 0%, #50deff 50%, #28caf0 100%); - box-shadow: 0 4px 26px rgba(53, 212, 248, 0.68); - transform: scale(1.02); -} - -/* Album card overlay button */ -[data-theme='heisenberg'] .album-card-details-btn { - background: linear-gradient(180deg, #60e4ff 0%, #35d4f8 50%, #18b8e0 100%); - color: #060809; - border: 1px solid #14a8d0; - box-shadow: 0 2px 12px rgba(53, 212, 248, 0.40); -} - -/* Scrollbar — thin blue crystal */ -[data-theme='heisenberg'] ::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -[data-theme='heisenberg'] ::-webkit-scrollbar-track { - background: #080b0e; -} - -[data-theme='heisenberg'] ::-webkit-scrollbar-thumb { - background: rgba(53, 212, 248, 0.35); - border-radius: 3px; -} - -[data-theme='heisenberg'] ::-webkit-scrollbar-thumb:hover { - background: #35d4f8; -} - -/* ─── A Theme of Ice and Fire — Game of Thrones ─── */ -/* Concept: FIRE (volcanic Dragonstone, main area) vs ICE (Castle Black, sidebar) */ -@keyframes fire-flicker { - 0% { - text-shadow: 0 0 8px rgba(200, 30, 20, 0.65), 0 0 20px rgba(200, 60, 10, 0.30); - } - - 20% { - text-shadow: 0 0 12px rgba(220, 55, 15, 0.75), 0 0 28px rgba(210, 40, 10, 0.38); - } - - 40% { - text-shadow: 0 0 6px rgba(180, 20, 10, 0.55), 0 0 14px rgba(190, 30, 10, 0.22); - } - - 65% { - text-shadow: 0 0 14px rgba(215, 50, 12, 0.80), 0 0 32px rgba(200, 70, 15, 0.40); - } - - 85% { - text-shadow: 0 0 9px rgba(195, 25, 15, 0.60), 0 0 22px rgba(200, 40, 10, 0.28); - } - - 100% { - text-shadow: 0 0 8px rgba(200, 30, 20, 0.65), 0 0 20px rgba(200, 60, 10, 0.30); - } -} - -[data-theme='ice-and-fire'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c41e1e%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Palette — Targaryen blood red, dragon gold, volcanic black, Wall ice */ - --ctp-crust: #060402; - --ctp-mantle: #0a0806; - --ctp-base: #100c08; - --ctp-surface0: #1c1410; - --ctp-surface1: #281c14; - --ctp-surface2: #38261c; - --ctp-overlay0: #5a3e2e; - --ctp-overlay1: #7a5840; - --ctp-overlay2: #9a7858; - --ctp-text: #ecdcc8; - --ctp-subtext1: #d0b898; - --ctp-subtext0: #a89070; - --ctp-mauve: #c41e1e; - --ctp-lavender: #e03030; - --ctp-pink: #e03030; - --ctp-flamingo: #c83010; - --ctp-rosewater: #ecdcc8; - --ctp-green: #5a8a3a; - --ctp-teal: #5090a0; - /* Wall ice teal */ - --ctp-sky: #80b8d0; - /* Northern sky */ - --ctp-blue: #3a6898; - --ctp-sapphire: #3a6898; - --ctp-yellow: #c8880a; - /* Lannister / dragon gold */ - --ctp-peach: #c83010; - --ctp-maroon: #8b0808; - --ctp-red: #c41e1e; - - --bg-app: #100c08; - /* volcanic black — warm dark */ - --bg-sidebar: #090c10; - /* Castle Black — cold blue-grey stone */ - --bg-card: #1c1410; - --bg-hover: #281c14; - --bg-player: #060402; - /* obsidian black */ - --bg-glass: rgba(10, 8, 6, 0.92); - --accent: #c41e1e; - /* Targaryen blood red */ - --accent-dim: rgba(196, 30, 30, 0.14); - --accent-glow: rgba(196, 30, 30, 0.38); - --text-primary: #ecdcc8; - /* warm stone parchment */ - --text-secondary: #9a7858; - --text-muted: #b08860; - --border: rgba(196, 30, 30, 0.20); - --border-subtle: rgba(196, 30, 30, 0.08); - --border-dropdown: rgba(196, 30, 30, 0.32); - --shadow-dropdown: rgba(0, 0, 0, 0.92); - --positive: #5a8a3a; - --warning: #c8880a; - --danger: #c41e1e; - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 6px; -} - -/* App shell — scattered torch-light: warm pools of fire at corners */ -[data-theme='ice-and-fire'] .app-shell { - background-image: - radial-gradient(ellipse at 15% 85%, rgba(200, 80, 10, 0.07) 0%, transparent 55%), - radial-gradient(ellipse at 85% 15%, rgba(180, 20, 10, 0.06) 0%, transparent 55%), - radial-gradient(ellipse at 85% 85%, rgba(200, 100, 15, 0.05) 0%, transparent 45%); -} - -/* Sidebar — THE NORTH: cold Castle Black stone, masonry pattern */ -[data-theme='ice-and-fire'] .sidebar { - background: #090c10; - border-right: 1px solid rgba(196, 30, 30, 0.20); - background-image: - repeating-linear-gradient(0deg, - rgba(80, 110, 140, 0.04) 0px, transparent 1px, transparent 56px, - rgba(80, 110, 140, 0.04) 57px), - repeating-linear-gradient(90deg, - rgba(80, 110, 140, 0.025) 0px, transparent 1px, transparent 112px, - rgba(80, 110, 140, 0.025) 113px); -} - -/* Player bar — Dragonstone forge: fire glow rising from below */ -[data-theme='ice-and-fire'] .player-bar { - background: #060402; - border-top: 2px solid #c41e1e; - background-image: - radial-gradient(ellipse at 50% 130%, rgba(200, 80, 15, 0.22) 0%, rgba(180, 20, 10, 0.12) 45%, transparent 70%); - box-shadow: 0 -8px 36px rgba(180, 20, 10, 0.22), 0 -1px 0 rgba(0, 0, 0, 0.9); -} - -/* Track name — Targaryen red, fire flicker (irregular like real flame) */ -[data-theme='ice-and-fire'] .player-track-name { - color: #d42020; - animation: fire-flicker 5s ease-in-out infinite; -} - -/* Artist name — Lannister/dragon gold */ -[data-theme='ice-and-fire'] .player-artist-name { - color: #c8880a; -} - -/* Nav active — blood red left bar */ -[data-theme='ice-and-fire'] .nav-link.active { - background: linear-gradient(90deg, rgba(196, 30, 30, 0.18) 0%, transparent 100%); - border-left: 3px solid #c41e1e; - color: #d42020; -} - -[data-theme='ice-and-fire'] .nav-link:hover:not(.active) { - background: linear-gradient(90deg, rgba(196, 30, 30, 0.08) 0%, transparent 100%); - border-left: 3px solid rgba(196, 30, 30, 0.32); -} - -/* Content header — red-to-gold ornate rule: Fire and Blood / Hear Me Roar */ -[data-theme='ice-and-fire'] .content-header { - border-bottom: 1px solid rgba(196, 30, 30, 0.16); - position: relative; -} - -[data-theme='ice-and-fire'] .content-header::after { - content: ''; - position: absolute; - bottom: -3px; - left: 0; - right: 0; - height: 1px; - background: linear-gradient(90deg, - transparent 0%, - rgba(196, 30, 30, 0.70) 25%, - rgba(200, 136, 10, 0.90) 50%, - rgba(196, 30, 30, 0.70) 75%, - transparent 100%); -} - -/* Cards — volcanic panel, fire-gold border on hover */ -[data-theme='ice-and-fire'] .album-card:hover, -[data-theme='ice-and-fire'] .artist-card:hover { - box-shadow: - 0 0 0 1px rgba(196, 30, 30, 0.50), - 0 0 0 2px rgba(200, 136, 10, 0.14), - 0 4px 24px rgba(180, 20, 10, 0.18); -} - -/* Track / queue rows */ -[data-theme='ice-and-fire'] .track-row:hover, -[data-theme='ice-and-fire'] .queue-item:hover { - box-shadow: inset 2px 0 0 #c41e1e; - background: rgba(196, 30, 30, 0.07); -} - -/* Primary play button — Targaryen red gradient */ -[data-theme='ice-and-fire'] .player-btn-primary { - background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%); - color: #ecdcc8; - box-shadow: 0 0 16px rgba(196, 30, 30, 0.48); - border: 1px solid #880808; -} - -[data-theme='ice-and-fire'] .player-btn-primary:hover { - background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%); - box-shadow: 0 0 26px rgba(196, 30, 30, 0.70); -} - -/* btn-primary */ -[data-theme='ice-and-fire'] .btn-primary { - background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%); - color: #ecdcc8; - border: 1px solid #880808; -} - -[data-theme='ice-and-fire'] .btn-primary:hover { - background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%); -} - -/* Hero play button */ -[data-theme='ice-and-fire'] .hero-play-btn { - background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%); - color: #ecdcc8; - border: 1px solid #880808; - box-shadow: 0 2px 16px rgba(196, 30, 30, 0.48); - transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); -} - -[data-theme='ice-and-fire'] .hero-play-btn:hover { - background: linear-gradient(180deg, #f04040 0%, #d42828 50%, #ac1818 100%); - box-shadow: 0 4px 26px rgba(196, 30, 30, 0.70); - transform: scale(1.02); -} - -/* Album card overlay button */ -[data-theme='ice-and-fire'] .album-card-details-btn { - background: linear-gradient(180deg, #e03030 0%, #c41e1e 50%, #9c1010 100%); - color: #ecdcc8; - border: 1px solid #880808; - box-shadow: 0 2px 12px rgba(196, 30, 30, 0.45); -} - -/* Scrollbar — obsidian dark, blood-red thumb transitioning to gold */ -[data-theme='ice-and-fire'] ::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -[data-theme='ice-and-fire'] ::-webkit-scrollbar-track { - background: #090c10; -} - -[data-theme='ice-and-fire'] ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, #c41e1e, #883010); - border-radius: 3px; -} - -[data-theme='ice-and-fire'] ::-webkit-scrollbar-thumb:hover { - background: #c8880a; -} - -/* Connection indicators */ -[data-theme='ice-and-fire'] .connection-type, -[data-theme='ice-and-fire'] .connection-server { - color: #9a7858; -} - -/* ─── D'oh-matic ─── */ -[data-theme='doh-matic'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #FFD90F; - --ctp-mantle: #BAE1FF; - --ctp-base: #FFFDF0; - --ctp-surface0: #F0F8FF; - --ctp-surface1: #E0EFFF; - --ctp-surface2: #D0E5FF; - --ctp-overlay0: #999999; - --ctp-overlay1: #777777; - --ctp-overlay2: #555555; - --ctp-text: #222222; - --ctp-subtext1: #444444; - --ctp-subtext0: #666666; - --ctp-mauve: #1F75FE; - --ctp-lavender: #4D91FF; - --ctp-pink: #F14E96; - --ctp-flamingo: #F14E96; - --ctp-rosewater: #FFD90F; - --ctp-green: #4AC948; - --ctp-teal: #00BFAF; - --ctp-sky: #4D91FF; - --ctp-blue: #1F75FE; - --ctp-sapphire: #1F75FE; - --ctp-yellow: #FFD90F; - --ctp-peach: #F26522; - --ctp-maroon: #CC0000; - --ctp-red: #ED1C24; - - --bg-app: #FFFDF0; - --bg-sidebar: #BAE1FF; - --bg-card: #FFFFFF; - --bg-hover: rgba(31, 117, 254, 0.1); - --bg-player: #FFD90F; - --bg-glass: rgba(255, 253, 240, 0.8); - --accent: #1F75FE; - --accent-dim: rgba(31, 117, 254, 0.15); - --accent-glow: rgba(31, 117, 254, 0.3); - --text-primary: #222222; - --text-secondary: #444444; - --text-muted: #555555; - --border: #222222; - --border-subtle: rgba(0, 0, 0, 0.1); - --border-dropdown: #cccccc; - --shadow-dropdown: rgba(0, 0, 0, 0.15); - --positive: #4AC948; - --warning: #F26522; - --danger: #ED1C24; - --radius-md: 12px; -} - -[data-theme='doh-matic'] .sidebar { - border-right: 2px solid #222222; -} - -[data-theme='doh-matic'] .player-bar { - border-top: 3px solid #222222; -} - -[data-theme='doh-matic'] .player-track-name, -[data-theme='doh-matic'] .player-track-artist, -[data-theme='doh-matic'] .player-time { - color: #222222 !important; -} - -[data-theme='doh-matic'] .player-btn { - color: #222222; -} - -[data-theme='doh-matic'] .btn-primary:hover { - background-color: var(--ctp-pink); - border-color: #222222; -} - -[data-theme='doh-matic'] .btn-surface:hover { - background: #D0E5FF; -} - -/* ─── Order of the Phoenix ─── */ -/* ─── W98 ─── */ -[data-theme='w98'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Authentische W98 Palette ── - Contrast audit: - text-primary on bg-card 13.84:1 AAA ✓ - text-primary on bg-app 4.42:1 AA ✓ (album-detail page lives here) - positive on bg-card 5.24:1 AA ✓ (deepened from #008000 at 2.62:1 ❌) - warning on bg-card 5.61:1 AA ✓ (deep amber, was #808000 at 2.61:1 ❌) - danger on bg-card 4.61:1 AA ✓ (deepened from #ff0000 at 2.62:1 ❌) - accent (navy) on bg-card 9.97:1 AAA ✓ - Border-subtle was #d4d0c8 (1.0:1, invisible) → #a0a0a0. - The brand --ctp-* palette is preserved verbatim as the canonical W98 - system colour set; only the semantic tokens are lifted. - text-secondary/muted are intentionally kept at #000000: pages such as - AlbumDetail render text on bg-app teal (#008080) where any lift below - pure black drops below AA. W98 historically used bold/italic, not - colour value, for text hierarchy. - */ - --ctp-crust: #808080; - --ctp-mantle: #a0a0a0; - --ctp-base: #d4d0c8; - /* Echtes W98 Button Face */ - --ctp-surface0: #ffffff; - --ctp-surface1: #ececec; - --ctp-surface2: #d4d0c8; - --ctp-overlay0: #808080; - --ctp-overlay1: #404040; - --ctp-overlay2: #000000; - --ctp-text: #000000; - --ctp-subtext1: #000000; - --ctp-subtext0: #404040; - - --ctp-mauve: #000080; - --ctp-lavender: #0000cc; - --ctp-green: #008000; - --ctp-teal: #008080; - --ctp-sky: #0000ff; - --ctp-blue: #0000ff; - --ctp-sapphire: #000080; - --ctp-pink: #ff00ff; - --ctp-flamingo: #ff00ff; - --ctp-rosewater: #d4d0c8; - --ctp-yellow: #808000; - --ctp-peach: #ff8000; - --ctp-maroon: #800000; - --ctp-red: #ff0000; - - --bg-app: #008080; - /* Teal Desktop */ - --bg-sidebar: #d4d0c8; - --bg-card: #d4d0c8; - --bg-hover: #000080; - --bg-player: #d4d0c8; - --bg-glass: rgba(212, 208, 200, 0.95); - - --accent: #000080; - --accent-dim: rgba(0, 0, 128, 0.12); - --accent-glow: transparent; - --volume-accent: #000080; - - --text-primary: #000000; - --text-secondary: #000000; /* W98 uses bold/italic for hierarchy, not lighter colour — - lifting fails on bg-app teal (#008080) where any non-black - tone drops below AA (e.g. #404040 = 2.09:1). */ - --text-muted: #000000; - - --border: #808080; - --border-subtle: #a0a0a0; /* 1.73:1 perceptible, was #d4d0c8 (1.0:1 invisible) */ - --border-dropdown: #000000; - --shadow-dropdown: rgba(0, 0, 0, 0.4); - - --positive: #005000; /* 5.24:1 AA ✓, deepened from #008000 (2.62:1 ❌) */ - --warning: #5a4500; /* 5.61:1 AA ✓, deep amber, was #808000 (2.61:1 ❌) */ - --danger: #b00000; /* 4.61:1 AA ✓, deepened from #ff0000 (2.62:1 ❌) */ - - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 0px; - --radius-xl: 0px; - --radius-full: 0px; -} - -/* Teal Desktop (nur der äußere Shell-Rahmen) */ -[data-theme='w98'] .app-shell { - background-color: #008080; -} - -/* Column resize grip — default --ctp-surface1 (#ececec) on bg-card (#d4d0c8) - is 1.23:1 (invisible). Use the W98 dialog border grey for a chunky 2 px - grip that matches the rest of the W98 furniture. */ -[data-theme='w98'] .col-resize-handle::after { - background: #808080; - width: 2px; -} - - -/* ── 3D Bevel: Raised ── */ -[data-theme='w98'] .sidebar, -[data-theme='w98'] .player-bar, -[data-theme='w98'] .card { - background: #d4d0c8; - border: 1px solid #000000; - box-shadow: - inset 1px 1px #ffffff, - inset -1px -1px #808080, - inset 2px 2px #dfdfdf, - inset -2px -2px #404040; -} - -[data-theme='w98'] .sidebar { - border-right: 2px solid #000000; -} - -/* Player Bar Titelbalken: ikonischer W98 Gradient für den Song-Titel */ -[data-theme='w98'] .player-track-name { - background: linear-gradient(to right, #09246d, #a6c4e8); - color: #ffffff !important; - padding: 1px 6px; - font-weight: bold; -} - -[data-theme='w98'] .player-track-artist, -[data-theme='w98'] .player-time { - color: #000000 !important; -} - -/* Nav */ -[data-theme='w98'] .nav-link.active { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w98'] .nav-link.active svg { - color: #ffffff !important; -} - -[data-theme='w98'] .nav-link:hover:not(.active) { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w98'] .nav-link:hover:not(.active) svg { - color: #ffffff !important; -} - -/* Alle Buttons: 3D Raised Bevel */ -[data-theme='w98'] .btn, -[data-theme='w98'] .btn-primary, -[data-theme='w98'] .btn-surface, -[data-theme='w98'] .btn-ghost, -[data-theme='w98'] .hero-play-btn, -[data-theme='w98'] .queue-round-btn, -[data-theme='w98'] .player-btn, -[data-theme='w98'] .album-card-details-btn { - background: #d4d0c8 !important; - color: #000000 !important; - border: 1px solid #000000 !important; - border-radius: 0 !important; - box-shadow: - inset 1px 1px #ffffff, - inset -1px -1px #808080, - inset 2px 2px #dfdfdf, - inset -2px -2px #404040 !important; - text-shadow: none !important; - filter: none !important; - transform: none !important; -} - -/* Gedrückt: Bevel umkehren */ -[data-theme='w98'] .btn:active, -[data-theme='w98'] .btn-primary:active, -[data-theme='w98'] .btn-surface:active, -[data-theme='w98'] .btn-ghost:active, -[data-theme='w98'] .hero-play-btn:active, -[data-theme='w98'] .queue-round-btn:active, -[data-theme='w98'] .player-btn:active, -[data-theme='w98'] .album-card-details-btn:active { - box-shadow: - inset 1px 1px #808080, - inset -1px -1px #ffffff, - inset 2px 2px #404040, - inset -2px -2px #dfdfdf !important; -} - -/* Hover: heller */ -[data-theme='w98'] .btn:hover, -[data-theme='w98'] .btn-primary:hover, -[data-theme='w98'] .btn-surface:hover, -[data-theme='w98'] .btn-ghost:hover, -[data-theme='w98'] .hero-play-btn:hover, -[data-theme='w98'] .album-card-details-btn:hover { - background: #e4e0d8 !important; - color: #000000 !important; -} - -/* Aktive Queue-Buttons: navy, sunken */ -[data-theme='w98'] .queue-round-btn.active { - background: #000080 !important; - color: #ffffff !important; - box-shadow: - inset 1px 1px #808080, - inset -1px -1px #ffffff, - inset 2px 2px #404040, - inset -2px -2px #dfdfdf !important; -} - -[data-theme='w98'] .queue-round-btn:hover:not(:disabled):not(.active) { - background: #e4e0d8 !important; - color: #000000 !important; -} - -/* Progress Bar: eingesunkene Rille, navy Fill */ -[data-theme='w98'] .progress-bar-track { - background: #ffffff; - box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; - border-radius: 0; -} - -[data-theme='w98'] .progress-bar-fill { - background: #000080; - border-radius: 0; - box-shadow: none; -} - -/* Scrollbar */ -[data-theme='w98'] ::-webkit-scrollbar { - width: 16px; - height: 16px; -} - -[data-theme='w98'] ::-webkit-scrollbar-track { - background: #d4d0c8; -} - -[data-theme='w98'] ::-webkit-scrollbar-thumb { - background: #d4d0c8; - border: 1px solid #000000; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; -} - -[data-theme='w98'] ::-webkit-scrollbar-button { - background: #d4d0c8; - border: 1px solid #000000; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; -} - -/* Queue Tab */ -[data-theme='w98'] .queue-tab-btn:hover { - background: #e4e0d8; - color: #000000; -} - -/* Hero */ -[data-theme='w98'] .hero-eyebrow { - color: rgba(255, 255, 255, 0.9); -} - -[data-theme='w98'] .hero-meta .badge { - background: rgba(255, 255, 255, 0.15); -} - -/* Settings */ -[data-theme='w98'] .settings-tab:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .theme-accordion-header:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .theme-accordion-open .theme-accordion-header { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .theme-accordion-open .theme-accordion-chevron { - color: #ffffff; -} - -/* Dropdowns */ -[data-theme='w98'] .custom-select-trigger:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .custom-select-option:hover { - background: #000080 !important; - color: #ffffff !important; -} - -/* Various hovers → navy + white */ -[data-theme='w98'] .artist-ext-link:hover { - background: #000080; - color: #ffffff !important; -} - -[data-theme='w98'] .changelog-summary:hover { - color: #000080; -} - -[data-theme='w98'] .changelog-code { - background: #ffffff; - color: #000080; - border: 1px solid #808080; -} - -[data-theme='w98'] .keybind-badge { - background: #d4d0c8 !important; - color: #000000 !important; - border: 1px solid #808080 !important; -} - -[data-theme='w98'] .eq-ctrl-btn { - background: #d4d0c8; - color: #000000; - border: 1px solid #808080; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; -} - -[data-theme='w98'] .eq-ctrl-btn:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .genre-keyword-badge { - background: #d4d0c8 !important; - color: #000000 !important; - border: 1px solid #808080 !important; -} - -[data-theme='w98'] .toggle-track::before { - background: #d4d0c8; - border: 1px solid #808080; -} - -[data-theme='w98'] .np-title { - color: #000080 !important; -} - -[data-theme='w98'] .np-action-btn:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .np-queue-item:hover, -[data-theme='w98'] .np-queue-item.context-active { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .track-row:hover, -[data-theme='w98'] .track-row.context-active { - background: #000080 !important; -} - -[data-theme='w98'] .track-row:hover *, -[data-theme='w98'] .track-row.context-active * { - color: #ffffff !important; -} - -[data-theme='w98'] .artist-row:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .year-toggle:hover { - color: #000080; -} - -[data-theme='w98'] .playlist-row:hover { - background: #000080; -} - -[data-theme='w98'] .playlist-row:hover, -[data-theme='w98'] .playlist-row:hover * { - color: #ffffff; -} - -[data-theme='w98'] .help-question:hover { - color: #000080; -} - -[data-theme='w98'] .help-item-open .help-question { - color: #000080; - font-weight: bold; -} - -[data-theme='w98'] .help-item-open .help-chevron { - color: #000080; -} - -[data-theme='w98'] .queue-item:hover, -[data-theme='w98'] .queue-item.context-active { - background: #000080 !important; -} - -[data-theme='w98'] .queue-item:hover .queue-item-title, -[data-theme='w98'] .queue-item:hover .queue-item-artist, -[data-theme='w98'] .queue-item:hover .queue-item-duration, -[data-theme='w98'] .queue-item.context-active .queue-item-title, -[data-theme='w98'] .queue-item.context-active .queue-item-artist, -[data-theme='w98'] .queue-item.context-active .queue-item-duration { - color: #ffffff; -} - -[data-theme='w98'] .player-btn:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w98'] .player-btn-primary { - background: #d4d0c8 !important; - color: #000000 !important; -} - -[data-theme='w98'] .player-btn-primary:hover { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w98'] .search-result-item:hover, -[data-theme='w98'] .search-result-item.active { - background: #000080; -} - -[data-theme='w98'] .search-result-item:hover .search-result-name, -[data-theme='w98'] .search-result-item:hover .search-result-sub, -[data-theme='w98'] .search-result-item.active .search-result-name, -[data-theme='w98'] .search-result-item.active .search-result-sub { - color: #ffffff; -} - -[data-theme='w98'] .collapse-btn { - border-color: #808080 !important; -} - -[data-theme='w98'] .collapse-btn:hover { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w98'] .album-row-nav .nav-btn:hover:not(.disabled) { - background: #000080; - color: #ffffff; -} - -/* Live-Dropdown: kein backdrop-blur (saugt teal durch), solider W98-Hintergrund */ -[data-theme='w98'] .glass { - background: #d4d0c8 !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - border: 1px solid #000000; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 2px 2px 4px rgba(0, 0, 0, 0.3); - color: #000000; -} - -/* Stream-Einträge: --bg-hover ist navy → Override auf W98-Grau mit Bevel */ -[data-theme='w98'] .glass [style*="var(--bg-hover)"] { - background: #ece8e0 !important; - border: 1px solid #808080; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; - border-radius: 0 !important; -} - -/* Inline-color-Overrides für Text in Stream-Einträgen */ -[data-theme='w98'] .glass [style*="var(--text-primary)"], -[data-theme='w98'] .glass [style*="var(--text-secondary)"], -[data-theme='w98'] .glass [style*="var(--text-muted)"] { - color: #000000 !important; -} - -/* ─── Global Base Settings ─── */ -:root { - /* Typography */ - --font-sans: 'Inter 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; -} - -/* ─── Spotless ─── */ -[data-theme='spotless'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23B3B3B3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #000000; - --ctp-mantle: #121212; - --ctp-base: #181818; - --ctp-surface0: #282828; - --ctp-surface1: #3E3E3E; - --ctp-surface2: #535353; - --ctp-overlay0: #727272; - --ctp-overlay1: #A7A7A7; - --ctp-overlay2: #B3B3B3; - --ctp-text: #FFFFFF; - --ctp-subtext1: #EBEBEB; - --ctp-subtext0: #D6D6D6; - - --ctp-mauve: #1ED760; - --ctp-lavender: #1FDF64; - --ctp-green: #1ED760; - --ctp-teal: #1DF2A4; - --ctp-sky: #3D91F4; - --ctp-blue: #2E77D0; - --ctp-sapphire: #1C5599; - --ctp-pink: #E55C5C; - --ctp-flamingo: #E55C5C; - --ctp-rosewater: #FFC8C8; - --ctp-yellow: #FFA42B; - --ctp-peach: #FF7A00; - --ctp-maroon: #B22A2A; - --ctp-red: #E22134; - - --bg-app: #121212; - --bg-sidebar: #000000; - --bg-card: #181818; - --bg-hover: #282828; - --bg-player: #181818; - --bg-glass: rgba(18, 18, 18, 0.85); - - --accent: #1ED760; - --accent-dim: rgba(30, 215, 96, 0.15); - --accent-glow: rgba(30, 215, 96, 0.35); - --volume-accent: #FFFFFF; - - --text-primary: #FFFFFF; - --text-secondary: #B3B3B3; - --text-muted: #A7A7A7; - - --border: #282828; - --border-subtle: rgba(255, 255, 255, 0.1); - - --positive: #1ED760; - --warning: #FFA42B; - --danger: #E22134; - - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 16px; - --radius-xl: 24px; - --radius-full: 9999px; - - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7); - - --transition-fast: 150ms ease; - --transition-med: 250ms ease; - --transition-slow: 350ms ease; - - --sidebar-width: 220px; - --player-height: 88px; -} - -[data-theme='spotless'] .sidebar { - border-right: none; -} - -[data-theme='spotless'] .player-bar { - border-top: 1px solid var(--border-subtle); -} - -[data-theme='spotless'] .nav-link:hover { - color: var(--text-primary); - background-color: transparent; -} - -[data-theme='spotless'] .nav-link.active { - background-color: var(--bg-hover); - color: var(--text-primary); - border-radius: var(--radius-sm); -} - -[data-theme='spotless'] .nav-link.active::before { - display: none; -} - -[data-theme='spotless'] .btn-primary { - color: var(--ctp-crust); - border-radius: var(--radius-full); - font-weight: 700; -} - -[data-theme='spotless'] .player-btn-primary { - color: var(--ctp-crust); - background-color: var(--text-primary); - border-radius: var(--radius-full); -} - -[data-theme='spotless'] .player-btn-primary:hover { - background-color: var(--accent); - transform: scale(1.05); -} - -[data-theme='spotless'] .queue-item:hover, -[data-theme='spotless'] .track-row:hover { - background-color: var(--bg-hover); - border-radius: var(--radius-sm); -} - -/* ─── Cupertino Beats ─── */ -[data-theme='cupertino-beats'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1a1%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #000000; - --ctp-mantle: #121212; - --ctp-base: #1c1c1e; - --ctp-surface0: #2c2c2e; - --ctp-surface1: #3a3a3c; - --ctp-surface2: #48484a; - --ctp-overlay0: #636366; - --ctp-overlay1: #8e8e93; - --ctp-overlay2: #aeaeb2; - --ctp-text: #ffffff; - --ctp-subtext1: #ebebf599; - --ctp-subtext0: #ebebf560; - - --ctp-mauve: #fa243c; - --ctp-lavender: #ff5e71; - --ctp-green: #34c759; - --ctp-teal: #30b0c7; - --ctp-sky: #5ac8fa; - --ctp-blue: #007aff; - --ctp-sapphire: #0051d5; - --ctp-pink: #ff2d55; - --ctp-flamingo: #ff3b30; - --ctp-rosewater: #ff9f0a; - --ctp-yellow: #ffcc00; - --ctp-peach: #ff9500; - --ctp-maroon: #af52de; - --ctp-red: #ff3b30; - - --bg-app: #1c1c1e; - --bg-sidebar: rgba(18, 18, 18, 0.75); - --bg-card: #2c2c2e; - --bg-hover: rgba(255, 255, 255, 0.08); - --bg-player: rgba(0, 0, 0, 0.85); - --bg-glass: rgba(28, 28, 30, 0.6); - - --accent: #fa243c; - --accent-dim: rgba(250, 36, 60, 0.15); - --accent-glow: rgba(250, 36, 60, 0.3); - --volume-accent: #fa243c; - - --text-primary: #ffffff; - --text-secondary: rgba(235, 235, 245, 0.6); - --text-muted: rgba(235, 235, 245, 0.3); - - --border: rgba(255, 255, 255, 0.1); - --border-subtle: rgba(255, 255, 255, 0.05); - - --positive: #34c759; - --warning: #ffcc00; - --danger: #ff3b30; - - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 20px; - --radius-xl: 28px; - --radius-full: 9999px; - - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); - --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); - - --transition-fast: 150ms ease; - --transition-med: 250ms ease; - --transition-slow: 350ms ease; - - --sidebar-width: 220px; - --player-height: 88px; -} - -[data-theme='cupertino-beats'] .sidebar { - backdrop-filter: blur(40px) saturate(180%); - -webkit-backdrop-filter: blur(40px) saturate(180%); - border-right: 1px solid var(--border); -} - -[data-theme='cupertino-beats'] .player-bar { - backdrop-filter: blur(30px) saturate(150%); - -webkit-backdrop-filter: blur(30px) saturate(150%); - border-top: 1px solid var(--border); -} - -[data-theme='cupertino-beats'] .nav-link.active { - background: var(--accent-dim); - color: var(--accent); - font-weight: 600; -} - -[data-theme='cupertino-beats'] .nav-link.active::before { - width: 4px; - border-radius: 0 4px 4px 0; -} - -/* ─── Dzr0 ─── */ -[data-theme='dzr0'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A238FF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #E5E5E9; - --ctp-mantle: #F5F5F7; - --ctp-base: #FFFFFF; - --ctp-surface0: #F0F0F3; - --ctp-surface1: #E8E8EC; - --ctp-surface2: #D8D8DF; - --ctp-overlay0: #9E9EAF; - --ctp-overlay1: #7C7C8F; - --ctp-overlay2: #5D5D70; - --ctp-text: #121216; - --ctp-subtext1: #4A4A5A; - --ctp-subtext0: #6A6A7A; - - --ctp-mauve: #A238FF; - --ctp-lavender: #B86BFF; - --ctp-green: #00C171; - --ctp-teal: #00C171; - --ctp-sky: #3D91F4; - --ctp-blue: #2E77D0; - --ctp-sapphire: #1C5599; - --ctp-pink: #EF3B5D; - --ctp-flamingo: #EF3B5D; - --ctp-rosewater: #FFC8C8; - --ctp-yellow: #FFCC00; - --ctp-peach: #FF7A00; - --ctp-maroon: #B22A2A; - --ctp-red: #EF3B5D; - - --bg-app: #FFFFFF; - --bg-sidebar: #F5F5F7; - --bg-card: #FBFBFC; - --bg-hover: #F0F0F3; - --bg-player: #FFFFFF; - --bg-glass: rgba(255, 255, 255, 0.85); - - --accent: #A238FF; - --accent-dim: rgba(162, 56, 255, 0.12); - --accent-glow: rgba(162, 56, 255, 0.25); - --volume-accent: #A238FF; - - --text-primary: #121216; - --text-secondary: #4A4A5A; - --text-muted: #6B6B7A; - - --border: #E2E2E9; - --border-subtle: #F0F0F5; - - --positive: #00C171; - --warning: #FFCC00; - --danger: #EF3B5D; - - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 20px; - --radius-xl: 28px; - --radius-full: 9999px; - - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); - --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); - - --transition-fast: 150ms ease; - --transition-med: 250ms ease; - --transition-slow: 350ms ease; - - --sidebar-width: 220px; - --player-height: 88px; -} - -[data-theme='dzr0'] .player-bar { - border-top: 1px solid var(--border-subtle); - box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03); -} - -[data-theme='dzr0'] .player-track-name, -[data-theme='dzr0'] .player-time, -[data-theme='dzr0'] .player-track-artist { - color: var(--text-primary) !important; -} - -[data-theme='dzr0'] .sidebar { - border-right: 1px solid var(--border-subtle); -} - -[data-theme='dzr0'] .nav-link:hover { - background-color: var(--bg-hover); - color: var(--accent); -} - -[data-theme='dzr0'] .nav-link.active { - background-color: var(--accent-dim); - color: var(--accent); - font-weight: 600; -} - -[data-theme='dzr0'] .btn-primary { - color: #FFFFFF !important; -} - -/* ─── Reset ─── */ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -html, -body, -#root { - height: 100%; - /* min-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; -} - -/* ─── Scrollbars ─── */ -::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -::-webkit-scrollbar-track { - background: transparent; -} - -::-webkit-scrollbar-thumb { - background: transparent; - border-radius: var(--radius-full); - transition: background 0.3s ease; -} - -*:hover::-webkit-scrollbar-thumb { - background: var(--ctp-surface2); -} - -.is-scrolling::-webkit-scrollbar-thumb { - background: var(--ctp-surface2); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--ctp-overlay0); -} - -/* ─── Focus ─── */ -:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - border-radius: var(--radius-sm); -} - -/* ─── Global Dragging State ─── */ -body.is-dragging, -body.is-dragging * { - user-select: none !important; - cursor: col-resize !important; -} - -/* 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; -} - -/* ─── 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; -} - -/* ─── Utility Classes ─── */ -.glass { - background: var(--bg-glass, rgba(30, 30, 46, 0.75)); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid var(--border-subtle); -} - -.gradient-text { - background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); -} - -/* ─── Button Variants ─── */ -.btn { - display: inline-flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-2) var(--space-4); - border-radius: var(--radius-md); - font-size: 14px; - font-weight: 500; - transition: all var(--transition-fast); - white-space: nowrap; -} - -.btn-primary { - background: var(--accent); - color: var(--ctp-crust); - font-weight: 600; -} - -.btn-primary:hover { - background: var(--accent); - filter: brightness(1.1); - transform: translateY(-1px); - box-shadow: var(--shadow-glow); -} - -.btn-primary:active { - transform: translateY(0); -} - -.btn-ghost { - background: transparent; - color: var(--text-secondary); -} - -.btn-ghost:hover { - background: var(--bg-hover); - color: var(--text-primary); -} - -.btn-surface { - background: var(--bg-card); - color: var(--text-primary); - 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); -} - -/* ─── 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 */ -} - -/* ─── 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); -} - -/* ─── 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); -} - -/* ─── Album Grid ─── */ -.album-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); - gap: var(--space-4); -} - -/* ─── Scrollable area ─── */ -.scroll-area { - overflow-y: auto; - overflow-x: hidden; - flex: 1; -} - -/* ─── Divider ─── */ -.divider { - height: 1px; - background: var(--border-subtle); - margin: var(--space-4) 0; -} - -/* ─── Badge ─── */ -.badge { - display: inline-flex; - align-items: center; - padding: 2px var(--space-2); - border-radius: var(--radius-full); - font-size: 11px; - font-weight: 600; - letter-spacing: 0.03em; - background: var(--accent-dim); - color: var(--accent); -} - -/* ─── Star Rating ─── */ -.star-rating { - display: flex; - gap: 2px; - color: var(--ctp-overlay1); - justify-content: center; - width: 100%; -} - -.star-rating .star.filled { - color: var(--ctp-yellow); -} - -.star-rating .star:hover { - color: var(--ctp-yellow); - cursor: pointer; -} - -/* 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; - } -} - -/* ─── 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; -} - -/* ─── Progress / Range ─── */ -input[type="range"] { - -webkit-appearance: none; - appearance: none; - height: 4px; - border-radius: var(--radius-full); - background: var(--ctp-surface2); - outline: none; - cursor: pointer; - transition: all var(--transition-fast); -} - -input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - width: 14px; - height: 14px; - border-radius: 50%; - background: var(--text-primary); - cursor: pointer; - transition: transform var(--transition-fast), background var(--transition-fast); - box-shadow: var(--shadow-sm); -} - -input[type="range"]:hover::-webkit-slider-thumb { - transform: scale(1.2); - background: var(--accent); -} - -/* ─── Loading Spinner ─── */ -.spinner { - width: 24px; - height: 24px; - border: 2px solid var(--border); - border-top-color: var(--accent); - border-radius: 50%; - animation: spin 0.7s linear infinite; -} - -/* ─── Musicmatch Jukebox — Y2K Metallic Silver / Blue Display ─── */ -[data-theme='muma-jukebox'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234a4a4a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #001358; - /* deep blue — LCD display */ - --ctp-mantle: #b5babc; - /* dark silver — panels, sidebar */ - --ctp-base: #d4d8db; - /* metallic silver — main body */ - --ctp-surface0: #c8ccce; - --ctp-surface1: #bec2c4; - --ctp-surface2: #8a9094; - /* border gray */ - --ctp-overlay0: #6a7074; - --ctp-overlay1: #505458; - --ctp-overlay2: #3a3e42; - --ctp-text: #1a1a1a; - --ctp-subtext1: #3a3a3a; - --ctp-subtext0: #4a4a4a; - /* Cyan accent + Musicmatch orange */ - --ctp-mauve: #00d0ff; - /* cyan — primary accent */ - --ctp-lavender: #40e0ff; - --ctp-sky: #00c0e8; - --ctp-sapphire: #0088c8; - --ctp-blue: #0058b8; - --ctp-teal: #009898; - --ctp-green: #008840; - --ctp-yellow: #cc8800; - --ctp-peach: #ff6600; - /* Musicmatch orange — secondary accent */ - --ctp-pink: #d04060; - --ctp-flamingo: #c05040; - --ctp-rosewater: #c87060; - --ctp-maroon: #b02828; - --ctp-red: #c82020; - - /* ── Semantic tokens ── */ - --bg-app: #d4d8db; - --bg-sidebar: #b5babc; - --bg-card: #c8ccce; - --bg-hover: #bec2c4; - --bg-player: #001358; - /* LCD display — deep blue */ - --bg-glass: rgba(212, 216, 219, 0.92); - --accent: #00d0ff; - --accent-dim: rgba(0, 208, 255, 0.15); - --accent-glow: rgba(0, 208, 255, 0.35); - --volume-accent: #ff6600; - /* Musicmatch orange for volume */ - --text-primary: #1a1a1a; - --text-secondary: #4a4a4a; - --text-muted: #909090; - --border: #8a9094; - --border-subtle: #c0c4c6; - --positive: #008840; - --warning: #cc8800; - --danger: #c82020; -} - -/* ── Musicmatch: contrast fixes ── */ -[data-theme='muma-jukebox'] .queue-round-btn.active { - color: #001358; -} - -/* Accent-coloured text on silver body needs to be darker */ -[data-theme='muma-jukebox'] { - --accent: #0070a0; - --accent-dim: rgba(0, 112, 160, 0.15); - --accent-glow: rgba(0, 112, 160, 0.35); -} - -/* Player bar keeps the bright cyan since it's on dark blue bg */ -[data-theme='muma-jukebox'] .player-bar { - --accent: #00d0ff; -} - -/* ── Metallic bevel buttons ── */ -[data-theme='muma-jukebox'] .btn { - background: linear-gradient(180deg, #e4e8eb 0%, #c0c4c7 100%); - color: #1a1a1a; - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.9), - inset -1px -1px 0 rgba(0, 0, 0, 0.28), - 0 1px 3px rgba(0, 0, 0, 0.2); - border-radius: 4px; -} - -[data-theme='muma-jukebox'] .btn:hover { - background: linear-gradient(180deg, #eceef0 0%, #cacdd0 100%); -} - -[data-theme='muma-jukebox'] .btn-primary { - background: linear-gradient(180deg, #40e0ff 0%, #00a8d8 100%); - color: #001358; - font-weight: 600; - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.6), - inset -1px -1px 0 rgba(0, 60, 120, 0.4), - 0 1px 4px rgba(0, 0, 0, 0.25); - border-radius: 4px; -} - -[data-theme='muma-jukebox'] .btn-primary:hover { - background: linear-gradient(180deg, #60e8ff 0%, #20c0f0 100%); -} - -/* ── Player bar: blue LCD display area ── */ -[data-theme='muma-jukebox'] .player-bar { - background: #001358; - border-top: 3px solid #8a9094; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.08), - inset 0 2px 12px rgba(0, 0, 0, 0.4); -} - -[data-theme='muma-jukebox'] .player-track-name { - color: #ffffff; - text-shadow: 0 0 8px rgba(0, 208, 255, 0.75), 0 0 2px rgba(0, 208, 255, 0.4); - letter-spacing: 0.02em; -} - -[data-theme='muma-jukebox'] .player-track-artist { - color: #00d0ff; - opacity: 0.9; -} - -[data-theme='muma-jukebox'] .player-btn, -[data-theme='muma-jukebox'] .player-btn-primary { - background: linear-gradient(180deg, #1a2880 0%, #000e40 100%); - color: #00d0ff; - box-shadow: - inset 1px 1px 0 rgba(0, 208, 255, 0.25), - inset -1px -1px 0 rgba(0, 0, 0, 0.5), - 0 2px 5px rgba(0, 0, 0, 0.4); - border-radius: 50%; -} - -[data-theme='muma-jukebox'] .player-btn:hover, -[data-theme='muma-jukebox'] .player-btn-primary:hover { - background: linear-gradient(180deg, #2030a0 0%, #001060 100%); - color: #40e8ff; -} - -/* ── Sidebar: brushed-metal panel ── */ -[data-theme='muma-jukebox'] .sidebar { - background: linear-gradient(180deg, #c8ccce 0%, #b0b4b7 100%); - border-right: 2px solid #7a8084; - box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.5), 2px 0 4px rgba(0, 0, 0, 0.15); -} - -/* Nav links on silver: look like Windows panel items */ -[data-theme='muma-jukebox'] .nav-link { - color: #1a1a2a; - border-radius: 3px; - margin: 1px 4px; -} - -[data-theme='muma-jukebox'] .nav-link:hover { - background: linear-gradient(180deg, #dde2e5 0%, #c8ccce 100%); - box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8), inset -1px -1px 0 rgba(0, 0, 0, 0.15); - color: #0070a0; -} - -[data-theme='muma-jukebox'] .nav-link.active { - background: linear-gradient(180deg, #b8c8e0 0%, #9ab0d0 100%); - box-shadow: - inset 1px 1px 0 rgba(0, 0, 0, 0.15), - inset -1px -1px 0 rgba(255, 255, 255, 0.5); - color: #001358; - font-weight: 600; -} - -[data-theme='muma-jukebox'] .nav-link.active::before { - display: none; -} - -/* ── Cards / panels: inset bevel ── */ -[data-theme='muma-jukebox'] .glass, -[data-theme='muma-jukebox'] .card { - background: #d4d8db; - box-shadow: - inset 1px 1px 0 rgba(255, 255, 255, 0.85), - inset -1px -1px 0 rgba(0, 0, 0, 0.15), - 0 2px 6px rgba(0, 0, 0, 0.1); - border: 1px solid #9a9ea0 !important; -} - -/* ── Track rows: Windows XP list selection ── */ -[data-theme='muma-jukebox'] .track-row:hover, -[data-theme='muma-jukebox'] .track-row.context-active { - background: #316AC5 !important; - color: #ffffff !important; - box-shadow: none; -} - -[data-theme='muma-jukebox'] .track-row:hover .track-title, -[data-theme='muma-jukebox'] .track-row:hover .track-artist, -[data-theme='muma-jukebox'] .track-row:hover .track-duration, -[data-theme='muma-jukebox'] .track-row:hover .track-num, -[data-theme='muma-jukebox'] .track-row.context-active .track-title, -[data-theme='muma-jukebox'] .track-row.context-active .track-artist { - color: #ffffff !important; -} - -/* ── Queue items ── */ -[data-theme='muma-jukebox'] .queue-item:hover, -[data-theme='muma-jukebox'] .queue-item.context-active { - background: #316AC5 !important; -} - -[data-theme='muma-jukebox'] .queue-item:hover .queue-item-title, -[data-theme='muma-jukebox'] .queue-item:hover .queue-item-artist, -[data-theme='muma-jukebox'] .queue-item:hover .queue-item-duration, -[data-theme='muma-jukebox'] .queue-item.context-active .queue-item-title, -[data-theme='muma-jukebox'] .queue-item.context-active .queue-item-artist { - color: #ffffff !important; -} - -[data-theme='muma-jukebox'] .queue-item.active { - background: rgba(0, 112, 160, 0.14); - box-shadow: inset 3px 0 0 #0070a0; -} - -[data-theme='muma-jukebox'] .np-queue-item:hover, -[data-theme='muma-jukebox'] .np-queue-item.context-active { - background: #316AC5; -} - -[data-theme='muma-jukebox'] .np-queue-item-active { - color: #001358; - font-weight: 600; -} - -[data-theme='muma-jukebox'] .np-queue-item.active { - background: rgba(49, 106, 197, 0.18); -} - -/* ── Artist / playlist rows ── */ -[data-theme='muma-jukebox'] .artist-row:hover, -[data-theme='muma-jukebox'] .playlist-row:hover { - background: #316AC5; - color: #ffffff; -} - -/* ── Settings tabs: XP tab strip ── */ -[data-theme='muma-jukebox'] .settings-tab { - background: linear-gradient(180deg, #d4d8db 0%, #c0c4c7 100%); - border: 1px solid #9a9ea0; - color: #1a1a1a; - border-radius: 3px 3px 0 0; - margin-right: 2px; -} - -[data-theme='muma-jukebox'] .settings-tab:hover { - background: linear-gradient(180deg, #dde2e5 0%, #cacdd0 100%); - color: #0070a0; -} - -[data-theme='muma-jukebox'] .settings-tab.active { - background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%); - color: #001358; - font-weight: 600; - box-shadow: inset 0 2px 0 #0070a0; - border-bottom-color: transparent; -} - -/* ── Queue tab buttons ── */ -[data-theme='muma-jukebox'] .queue-tab-btn:hover { - color: #0070a0; -} - -/* ── Now-playing active ── */ -[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-title, -[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-num { - color: #0070a0; - font-weight: 600; -} - -/* ── Scrollbar: XP silver ── */ -[data-theme='muma-jukebox'] ::-webkit-scrollbar { - width: 16px; - height: 16px; -} - -[data-theme='muma-jukebox'] ::-webkit-scrollbar-track { - background: linear-gradient(90deg, #c0c4c7 0%, #d4d8db 100%); - border: 1px solid #9a9ea0; -} - -[data-theme='muma-jukebox'] ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, #dde2e5 0%, #b8bcbf 100%); - border: 1px solid #9a9ea0; - box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7), inset -1px -1px 0 rgba(0, 0, 0, 0.15); -} - -[data-theme='muma-jukebox'] ::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, #e8ecf0 0%, #c8ccce 100%); -} - -[data-theme='muma-jukebox'] ::-webkit-scrollbar-button { - background: linear-gradient(180deg, #dde2e5 0%, #b8bcbf 100%); - border: 1px solid #9a9ea0; - height: 16px; -} - -/* ── Dropdowns ── */ -[data-theme='muma-jukebox'] .custom-select-trigger { - background: linear-gradient(180deg, #e4e8eb 0%, #d4d8db 100%); - border: 1px solid #9a9ea0; - box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.7); -} - -[data-theme='muma-jukebox'] .custom-select-option:hover { - background: #316AC5 !important; - color: #ffffff !important; -} - -/* ── Connection indicators ── */ -[data-theme='muma-jukebox'] .connection-type, -[data-theme='muma-jukebox'] .connection-server { - color: #0070a0; -} - -/* ── Orange: volume knob + active/playing states ── */ -/* Knob is var(--text-primary) by default = near-black on silver → fix to orange */ -[data-theme='muma-jukebox'] input[type="range"]::-webkit-slider-thumb { - background: #ff6600; - box-shadow: inset 1px 1px 0 rgba(255, 180, 80, 0.7), inset -1px -1px 0 rgba(160, 40, 0, 0.4); -} - -[data-theme='muma-jukebox'] input[type="range"]:hover::-webkit-slider-thumb { - background: #ff8020; -} - -/* Active queue item: orange left bar instead of blue */ -[data-theme='muma-jukebox'] .queue-item.active { - background: rgba(255, 102, 0, 0.1); - box-shadow: inset 3px 0 0 #ff6600; -} - -[data-theme='muma-jukebox'] .np-queue-item-active { - color: #cc4400; - font-weight: 600; -} - -[data-theme='muma-jukebox'] .np-queue-item.active { - background: rgba(255, 102, 0, 0.1); -} - -/* Now-playing active track = orange brand color */ -[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-title, -[data-theme='muma-jukebox'] .np-album-track.active .np-album-track-num { - color: #cc4400; - font-weight: 600; -} - -/* Active nav link: orange accent text */ -[data-theme='muma-jukebox'] .nav-link.active { - color: #cc4400; -} - -/* Settings tab active: orange top border */ -[data-theme='muma-jukebox'] .settings-tab.active { - box-shadow: inset 0 2px 0 #ff6600; - color: #cc4400; -} - -/* Track row playing indicator (now-playing track-num shown in orange) */ -[data-theme='muma-jukebox'] .track-row.playing .track-num { - color: #ff6600; -} - -/* Player bar artist: keep cyan, but LCD progress/waveform in orange */ -[data-theme='muma-jukebox'] .player-bar input[type="range"]::-webkit-slider-thumb { - background: #ff6600; -} - -/* Waveform: orange played, cyan buffered, dim unplayed */ -[data-theme='muma-jukebox'] { - --waveform-played: #ff6600; - --waveform-buffered: #00d0ff; - --waveform-unplayed: #3a5080; -} - -/* ── Hero readability on silver background ── */ -[data-theme='muma-jukebox'] .album-detail-badge { - background: #0070a0; - color: #ffffff; -} - -[data-theme='muma-jukebox'] .album-detail-info { - color: #4a4a4a; -} - -/* ─── WMP8 Classic — Windows Media Player 8 / XP Luna ─── */ -[data-theme='winmedplayer'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c2d4f2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #000000; - /* black — LCD display / playlist */ - --ctp-mantle: #1a3060; - /* darkest blue — sidebar */ - --ctp-base: #3a62a5; - /* Luna blue — main body (dark enough for white text) */ - --ctp-surface0: #4a72b8; - --ctp-surface1: #5480cc; - --ctp-surface2: #6090d8; - --ctp-overlay0: #7090c0; - --ctp-overlay1: #8aaad8; - --ctp-overlay2: #a0c0e8; - --ctp-text: #ffffff; - --ctp-subtext1: #dce8ff; - --ctp-subtext0: #b8d0f8; - /* WMP green + XP blue-cool palette */ - --ctp-mauve: #45ff00; - /* WMP poison green — primary accent */ - --ctp-lavender: #70ff40; - --ctp-green: #30dd00; - --ctp-teal: #00cc88; - --ctp-sky: #88ccff; - --ctp-blue: #5599ee; - --ctp-sapphire: #3378cc; - --ctp-pink: #ff88cc; - --ctp-flamingo: #ff7788; - --ctp-rosewater: #ffaabb; - --ctp-yellow: #ffdd44; - --ctp-peach: #ff9944; - --ctp-maroon: #dd4455; - --ctp-red: #ee3344; - - /* ── Semantic tokens ── */ - --bg-app: #3a62a5; - /* ~12% luminance → white contrast 6:1 */ - --bg-sidebar: #1a3060; - --bg-card: #4a72b8; - --bg-hover: #5480cc; - --bg-player: #000000; - --bg-glass: rgba(30, 58, 110, 0.88); - --accent: #45ff00; - --accent-dim: rgba(69, 255, 0, 0.15); - --accent-glow: rgba(69, 255, 0, 0.45); - --text-primary: #ffffff; - --text-secondary: #dce8ff; - --text-muted: #e8f0ff; - /* lifted from #b8d0f8 — clears AA on Luna-blue bg-app and dark sidebar */ - --border: #071027; - /* darkened from #2a5090 to meet 3:1 UI threshold on all main surfaces */ - --border-subtle: #4a72b8; - --positive: #30dd00; - --warning: #ffdd44; - --danger: #ee3344; -} - -/* ── WMP8: Luna-style gradients + skeuomorphic detail ── */ - -/* Sidebar: deep WMP task-pane blue */ -[data-theme='winmedplayer'] .sidebar { - background: linear-gradient(180deg, #244080 0%, #1a3060 60%, #0e2048 100%); - border-right: 2px solid #0e2048; - box-shadow: inset -1px 0 0 rgba(120, 160, 220, 0.2); -} - -/* Main body: Luna blue */ -[data-theme='winmedplayer'] .app-shell { - background: linear-gradient(160deg, #4a72b8 0%, #3a62a5 40%, #2e5498 100%); -} - -/* Player bar: black LCD display with green glow ambience */ -[data-theme='winmedplayer'] .player-bar { - background: #000000; - border-top: 2px solid #1a3060; - box-shadow: inset 0 1px 0 rgba(69, 255, 0, 0.06), 0 -2px 12px rgba(0, 0, 0, 0.6); -} - -/* Track name: WMP green glow */ -[data-theme='winmedplayer'] .player-track-name { - color: #45ff00; - text-shadow: - 0 0 8px rgba(69, 255, 0, 0.80), - 0 0 16px rgba(69, 255, 0, 0.40), - 0 0 2px rgba(69, 255, 0, 0.60); - letter-spacing: 0.03em; -} - -[data-theme='winmedplayer'] .player-track-artist { - color: #30dd00; - opacity: 0.85; - text-shadow: 0 0 4px rgba(69, 255, 0, 0.4); -} - -/* Transport buttons: round, radial metallic gradient, drop shadow */ -[data-theme='winmedplayer'] .player-btn, -[data-theme='winmedplayer'] .player-btn-primary { - background: radial-gradient(circle at 38% 32%, #c8dcf8 0%, #8aacdc 40%, #4870b8 100%); - color: #ffffff; - border-radius: 50%; - box-shadow: - 0 3px 8px rgba(0, 0, 0, 0.55), - 0 1px 2px rgba(0, 0, 0, 0.35), - inset 0 1px 0 rgba(255, 255, 255, 0.55), - inset 0 -1px 0 rgba(0, 0, 50, 0.3); - border: 1px solid #2a5090; -} - -[data-theme='winmedplayer'] .player-btn:hover, -[data-theme='winmedplayer'] .player-btn-primary:hover { - background: radial-gradient(circle at 38% 32%, #d8ecff 0%, #a0c0ee 40%, #5888d0 100%); - box-shadow: - 0 4px 10px rgba(0, 0, 0, 0.55), - 0 1px 2px rgba(0, 0, 0, 0.35), - inset 0 1px 0 rgba(255, 255, 255, 0.6), - inset 0 -1px 0 rgba(0, 0, 50, 0.3); -} - -/* Regular buttons: Luna soft rounded pill */ -[data-theme='winmedplayer'] .btn { - background: linear-gradient(180deg, #b8d0f0 0%, #7898d8 55%, #5878c0 100%); - color: #ffffff; - border-radius: 12px; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(0, 0, 80, 0.25), - 0 2px 4px rgba(0, 0, 0, 0.3); - border: 1px solid #3a60b0; -} - -[data-theme='winmedplayer'] .btn:hover { - background: linear-gradient(180deg, #cce0ff 0%, #90aaee 55%, #6888d0 100%); -} - -[data-theme='winmedplayer'] .btn-primary { - background: linear-gradient(180deg, #70ff40 0%, #38cc00 55%, #28aa00 100%); - color: #003300; - border: 1px solid #208800; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(0, 60, 0, 0.25), - 0 2px 6px rgba(0, 0, 0, 0.3), - 0 0 8px rgba(69, 255, 0, 0.25); -} - -/* Active queue round buttons: green bg, dark text */ -[data-theme='winmedplayer'] .queue-round-btn.active { - color: #003300; -} - -/* Cards / glass panels: slightly elevated with border */ -[data-theme='winmedplayer'] .glass, -[data-theme='winmedplayer'] .card { - background: rgba(90, 128, 190, 0.55); - border: 1px solid rgba(160, 190, 230, 0.5); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.25), - 0 2px 6px rgba(0, 0, 0, 0.2); -} - -/* Content header: slightly darker Luna band */ -[data-theme='winmedplayer'] .content-header { - background: linear-gradient(180deg, rgba(58, 98, 165, 0.55) 0%, rgba(58, 98, 165, 0.2) 100%); - border-bottom: 1px solid #6888c2; -} - -/* ─── PowerDVD Classic — Virtual HiFi Receiver / VFD Display ─── */ -/* ─── CyberLink PowerDVD ─── */ -/* Midnight navy-blue darkness — not flat black, but that specific cinema-hall depth */ -[data-theme='p-dvd'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235a7090%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette — midnight navy spectrum ── */ - --ctp-crust: #020306; - /* cinema blackout */ - --ctp-mantle: #060810; - /* control deck depth */ - --ctp-base: #0a0d18; - /* main chassis — navy-black */ - --ctp-surface0: #10141f; - --ctp-surface1: #171c2a; - --ctp-surface2: #1f2535; - --ctp-overlay0: #2c3548; - --ctp-overlay1: #3c4860; - --ctp-overlay2: #506078; - --ctp-text: #a8b8d0; - /* blue-tinted label silver */ - --ctp-subtext1: #7890b0; - --ctp-subtext0: #506080; - /* PowerDVD blue spectrum */ - --ctp-mauve: #0088e8; - /* PowerDVD blue — primary */ - --ctp-lavender: #00a8ff; - --ctp-sky: #00ccff; - /* glow highlight */ - --ctp-teal: #00b8cc; - --ctp-blue: #0070cc; - --ctp-sapphire: #0055aa; - --ctp-green: #00cc66; - --ctp-yellow: #ccaa00; - --ctp-peach: #e07040; - --ctp-pink: #cc5588; - --ctp-flamingo: #bb4466; - --ctp-rosewater: #cc6666; - --ctp-maroon: #aa3333; - --ctp-red: #cc2222; - - /* ── Semantic tokens ── */ - --bg-app: #0a0d18; - --bg-sidebar: #060810; - --bg-card: #10141f; - --bg-hover: #171c2a; - --bg-player: #020306; - --bg-glass: rgba(10, 13, 24, 0.96); - --accent: #0088e8; - --accent-dim: rgba(0, 136, 232, 0.14); - --accent-glow: rgba(0, 136, 232, 0.40); - --text-primary: #a8b8d0; - --text-secondary: #6880a8; - --text-muted: #506080; - --border: #1a2030; - --border-subtle: #10141e; - --positive: #00cc66; - --warning: #ccaa00; - --danger: #cc2222; -} - -/* ── App shell: very subtle navy depth gradient ── */ -[data-theme='p-dvd'] .app-shell { - background: linear-gradient(160deg, #0c1020 0%, #080c18 50%, #060910 100%); -} - -/* ── Sidebar: darkest navy — control panel behind the disc tray ── */ -[data-theme='p-dvd'] .sidebar { - background: linear-gradient(180deg, #07091280 0%, #060810 40%, #050710 100%); - border-right: 1px solid #141824; - box-shadow: inset -1px 0 0 rgba(0, 136, 232, 0.08), 2px 0 12px rgba(0, 0, 0, 0.7); -} - -/* Active nav: PowerDVD blue LED strip */ -[data-theme='p-dvd'] .nav-link.active { - color: #00a8ff; -} - -[data-theme='p-dvd'] .nav-link.active::before { - background: #0088e8; - box-shadow: 0 0 8px rgba(0, 136, 232, 0.7); -} - -/* ── Player bar: cinema control deck — pure black + blue accent top border ── */ -[data-theme='p-dvd'] .player-bar { - background: linear-gradient(180deg, #050710 0%, #020306 100%); - border-top: 1px solid #0a1828; - box-shadow: - inset 0 2px 0 rgba(0, 136, 232, 0.18), - inset 0 1px 0 rgba(0, 200, 255, 0.08), - 0 -4px 24px rgba(0, 0, 0, 0.9); -} - -/* Track name: PowerDVD blue LED display glow */ -[data-theme='p-dvd'] .player-track-name { - color: #00ccff; - text-shadow: - 0 0 5px rgba(0, 204, 255, 0.95), - 0 0 12px rgba(0, 136, 232, 0.70), - 0 0 24px rgba(0, 100, 200, 0.35); - letter-spacing: 0.03em; -} - -[data-theme='p-dvd'] .player-track-artist { - color: #0088e8; - text-shadow: 0 0 6px rgba(0, 136, 232, 0.60); - opacity: 1; -} - -[data-theme='p-dvd'] .player-time { - color: #0088e8; - text-shadow: 0 0 5px rgba(0, 136, 232, 0.65); -} - -/* ── Chrome transport buttons: silver against navy — the iconic contrast ── */ -[data-theme='p-dvd'] .player-btn, -[data-theme='p-dvd'] .player-btn-primary { - background: linear-gradient(170deg, #e8e8e8 0%, #ffffff 30%, #c0c0c0 70%, #989898 100%); - color: #1a1a1a; - border: 1px solid #707070; - box-shadow: - 0 3px 8px rgba(0, 0, 0, 0.8), - 0 1px 2px rgba(0, 0, 0, 0.6), - inset 0 1px 0 rgba(255, 255, 255, 0.9), - inset 0 -1px 0 rgba(0, 0, 0, 0.2); -} - -[data-theme='p-dvd'] .player-btn:hover, -[data-theme='p-dvd'] .player-btn-primary:hover { - background: linear-gradient(170deg, #f5f5f5 0%, #ffffff 30%, #d0d0d0 70%, #aaaaaa 100%); - box-shadow: - 0 4px 10px rgba(0, 0, 0, 0.8), - 0 1px 3px rgba(0, 0, 0, 0.6), - inset 0 1px 0 rgba(255, 255, 255, 1), - inset 0 -1px 0 rgba(0, 0, 0, 0.2), - 0 0 10px rgba(0, 136, 232, 0.20); -} - -/* ── Regular buttons: navy panel style ── */ -[data-theme='p-dvd'] .btn { - background: linear-gradient(180deg, #171c2a 0%, #10141f 100%); - color: #a8b8d0; - border: 1px solid #1f2a3e; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.6); -} - -[data-theme='p-dvd'] .btn:hover { - background: linear-gradient(180deg, #1f2535 0%, #171c2a 100%); - border-color: #2a3850; -} - -[data-theme='p-dvd'] .btn-primary { - background: linear-gradient(180deg, #00a8ff 0%, #0070cc 100%); - color: #ffffff; - border: 1px solid #0055aa; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.25), - 0 1px 4px rgba(0, 0, 0, 0.5), - 0 0 10px rgba(0, 136, 232, 0.35); -} - -/* Active queue round buttons: white on blue */ -[data-theme='p-dvd'] .queue-round-btn.active { - color: #ffffff; -} - -/* ── Cards / panels: navy inset ── */ -[data-theme='p-dvd'] .glass, -[data-theme='p-dvd'] .card { - background: rgba(16, 20, 31, 0.90); - border: 1px solid #1a2030; - box-shadow: inset 0 1px 0 rgba(0, 136, 232, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5); -} - -/* ── Content header: dark navy band ── */ -[data-theme='p-dvd'] .content-header { - background: linear-gradient(180deg, rgba(16, 20, 31, 0.80) 0%, rgba(10, 13, 24, 0.30) 100%); - border-bottom: 1px solid #1a2030; -} - -/* ── Hover / active states: blue LED glow ── */ -[data-theme='p-dvd'] .track-row:hover, -[data-theme='p-dvd'] .track-row.context-active { - background: rgba(0, 136, 232, 0.07); - box-shadow: inset 3px 0 0 #0088e8; -} - -[data-theme='p-dvd'] .queue-item:hover, -[data-theme='p-dvd'] .queue-item.context-active { - background: rgba(0, 136, 232, 0.07); -} - -[data-theme='p-dvd'] .queue-item.active { - background: rgba(0, 136, 232, 0.12); - border-left: 2px solid #0088e8; -} - -[data-theme='p-dvd'] .np-queue-item.active { - background: rgba(0, 136, 232, 0.08); -} - -[data-theme='p-dvd'] .np-queue-item-active { - color: #00a8ff; -} - -[data-theme='p-dvd'] .np-queue-item:hover, -[data-theme='p-dvd'] .np-queue-item.context-active { - background: rgba(0, 136, 232, 0.06); -} - -[data-theme='p-dvd'] .np-album-track.active .np-album-track-title, -[data-theme='p-dvd'] .np-album-track.active .np-album-track-num { - color: #00a8ff; -} - -[data-theme='p-dvd'] .artist-row:hover { - background: rgba(0, 136, 232, 0.06); - box-shadow: inset 3px 0 0 #0088e8; -} - -[data-theme='p-dvd'] .playlist-row:hover { - background: rgba(0, 136, 232, 0.06); - box-shadow: inset 3px 0 0 #0088e8; -} - -[data-theme='p-dvd'] .settings-tab:hover { - background: rgba(0, 136, 232, 0.08); - color: #00a8ff; -} - -[data-theme='p-dvd'] .settings-tab.active { - background: rgba(0, 136, 232, 0.14); - color: #00a8ff; - border-color: #0088e8; -} - -[data-theme='p-dvd'] .queue-tab-btn:hover { - background: rgba(0, 136, 232, 0.08); - color: #00a8ff; -} - -[data-theme='p-dvd'] .custom-select-trigger:hover { - background: rgba(0, 136, 232, 0.08); -} - -[data-theme='p-dvd'] .custom-select-option:hover { - background: rgba(0, 136, 232, 0.12); -} - -[data-theme='p-dvd'] .artist-ext-link:hover { - background: rgba(0, 136, 232, 0.10); - border-color: #0088e8; -} - -[data-theme='p-dvd'] .connection-type, -[data-theme='p-dvd'] .connection-server { - color: #4880b8; -} - -/* ─── Vintage Tube Radio — 1950s Bakelite & Vacuum Tube ─── */ -[data-theme='vintage-tube-radio'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23BCAAA4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #1E110A; - /* deep warm black-brown — dial background */ - --ctp-mantle: #5D4037; - /* speaker cloth brown — sidebar */ - --ctp-base: #3E2723; - /* polished bakelite — chassis */ - --ctp-surface0: #4E342E; - --ctp-surface1: #5D4037; - --ctp-surface2: #6D4C41; - --ctp-overlay0: #795548; - --ctp-overlay1: #8D6E63; - --ctp-overlay2: #A1887F; - --ctp-text: #FFECB3; - /* ivory/cream — dial lettering */ - --ctp-subtext1: #D7CCC8; - --ctp-subtext0: #BCAAA4; - /* aged ivory — secondary labels */ - /* Tube glow + tarnished brass accents */ - --ctp-mauve: #FF6F00; - /* vacuum tube orange — primary accent */ - --ctp-lavender: #FF8F00; - --ctp-yellow: #FFC107; - /* warm dial backlight */ - --ctp-peach: #FFB300; - --ctp-green: #558B2F; - --ctp-teal: #00695C; - --ctp-sky: #B08D57; - /* tarnished brass */ - --ctp-blue: #5C6BC0; - --ctp-sapphire: #3949AB; - --ctp-pink: #C2185B; - --ctp-flamingo: #AD1457; - --ctp-rosewater: #E91E63; - --ctp-maroon: #B71C1C; - --ctp-red: #C62828; - - /* ── Semantic tokens ── */ - --bg-app: #3E2723; - --bg-sidebar: #5D4037; - --bg-card: #4E342E; - --bg-hover: #5D4037; - --bg-player: #1E110A; - --bg-glass: rgba(62, 39, 35, 0.92); - --accent: #FF6F00; - --accent-dim: rgba(255, 111, 0, 0.15); - --accent-glow: rgba(255, 111, 0, 0.40); - --text-primary: #FFECB3; - --text-secondary: #BCAAA4; - --text-muted: #b09880; - --border: #B08D57; - /* tarnished brass */ - --border-subtle: #4E342E; - --positive: #558B2F; - --warning: #FFC107; - --danger: #C62828; -} - -/* ── Tube Radio: polished bakelite chassis texture ── */ -[data-theme='vintage-tube-radio'] .app-shell { - background: - radial-gradient(ellipse at 30% 20%, rgba(255, 111, 0, 0.04) 0%, transparent 60%), - radial-gradient(ellipse at 80% 80%, rgba(255, 193, 7, 0.03) 0%, transparent 50%), - #3E2723; -} - -/* Sidebar: speaker cloth — soft radial texture */ -[data-theme='vintage-tube-radio'] .sidebar { - background: - repeating-linear-gradient(0deg, - rgba(0, 0, 0, 0.12) 0px, - rgba(0, 0, 0, 0.12) 1px, - transparent 1px, - transparent 4px), - repeating-linear-gradient(90deg, - rgba(0, 0, 0, 0.08) 0px, - rgba(0, 0, 0, 0.08) 1px, - transparent 1px, - transparent 4px), - #5D4037; - border-right: 2px solid #B08D57; - box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.4); -} - -/* ── Frequency dial (Player Bar) ── */ -[data-theme='vintage-tube-radio'] .player-bar { - background: #1E110A; - border-top: 2px solid #B08D57; - box-shadow: - inset 0 1px 0 rgba(255, 193, 7, 0.08), - 0 -3px 20px rgba(0, 0, 0, 0.7); -} - -/* Track name: warm tube-glow */ -[data-theme='vintage-tube-radio'] .player-track-name { - color: #FFC107; - text-shadow: - 0 0 6px rgba(255, 193, 7, 0.90), - 0 0 14px rgba(255, 111, 0, 0.60), - 0 0 28px rgba(255, 111, 0, 0.30); - letter-spacing: 0.04em; -} - -[data-theme='vintage-tube-radio'] .player-track-artist { - color: #FF8F00; - text-shadow: 0 0 6px rgba(255, 111, 0, 0.50); - opacity: 1; -} - -[data-theme='vintage-tube-radio'] .player-time { - color: #FF8F00; - text-shadow: 0 0 5px rgba(255, 111, 0, 0.55); -} - -/* ── Transport buttons: turned brass knobs ── */ -[data-theme='vintage-tube-radio'] .player-btn, -[data-theme='vintage-tube-radio'] .player-btn-primary { - background: radial-gradient(circle at 38% 32%, #d4a843 0%, #b08d57 45%, #7a5e2a 100%); - color: #1E110A; - border: 1px solid #7a5e2a; - box-shadow: - 0 3px 7px rgba(0, 0, 0, 0.7), - 0 1px 2px rgba(0, 0, 0, 0.5), - inset 0 1px 0 rgba(255, 220, 120, 0.55), - inset 0 -1px 0 rgba(0, 0, 0, 0.3); -} - -[data-theme='vintage-tube-radio'] .player-btn:hover, -[data-theme='vintage-tube-radio'] .player-btn-primary:hover { - background: radial-gradient(circle at 38% 32%, #e8bc55 0%, #c09a65 45%, #8a6e38 100%); - box-shadow: - 0 4px 10px rgba(0, 0, 0, 0.7), - 0 1px 2px rgba(0, 0, 0, 0.5), - inset 0 1px 0 rgba(255, 230, 140, 0.65), - inset 0 -1px 0 rgba(0, 0, 0, 0.3); -} - -/* ── Regular buttons: bakelite style ── */ -[data-theme='vintage-tube-radio'] .btn { - background: linear-gradient(180deg, #4E342E 0%, #3E2723 100%); - color: #FFECB3; - border: 1px solid #B08D57; - box-shadow: - inset 0 1px 0 rgba(255, 220, 150, 0.10), - 0 1px 4px rgba(0, 0, 0, 0.5); -} - -[data-theme='vintage-tube-radio'] .btn:hover { - background: linear-gradient(180deg, #5D4037 0%, #4E342E 100%); -} - -[data-theme='vintage-tube-radio'] .btn-primary { - background: linear-gradient(180deg, #FF8F00 0%, #E65100 100%); - color: #1E110A; - border: 1px solid #BF360C; - box-shadow: - inset 0 1px 0 rgba(255, 220, 120, 0.35), - 0 1px 4px rgba(0, 0, 0, 0.4), - 0 0 10px rgba(255, 111, 0, 0.30); -} - -/* Active queue buttons: dark text on orange */ -[data-theme='vintage-tube-radio'] .queue-round-btn.active { - color: #1E110A; -} - -/* Cards / panels: inset bakelite */ -[data-theme='vintage-tube-radio'] .glass, -[data-theme='vintage-tube-radio'] .card { - background: rgba(78, 52, 46, 0.80); - border: 1px solid #B08D57; - box-shadow: - inset 0 1px 0 rgba(255, 220, 150, 0.06), - 0 2px 8px rgba(0, 0, 0, 0.4); -} - -/* Content header: warm band */ -[data-theme='vintage-tube-radio'] .content-header { - background: linear-gradient(180deg, rgba(93, 64, 55, 0.60) 0%, rgba(62, 39, 35, 0.20) 100%); - border-bottom: 1px solid #B08D57; -} - -/* ─── Windows 7 Aero — Aero Glass & Frutiger Aero ─── */ -/* ─── Windows 7 Aero Glass ─── */ -[data-theme='aero-glass'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234c607a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #05080f; - --ctp-mantle: #0d1a2e; - --ctp-base: #b8cfe8; - --ctp-surface0: #ccdaea; - --ctp-surface1: #d8e6f2; - --ctp-surface2: #e4f0f8; - --ctp-overlay0: #a0bcd8; - --ctp-overlay1: #7aa0c0; - --ctp-overlay2: #5a84a8; - --ctp-text: #0d1a2e; - --ctp-subtext1: #1e3250; - --ctp-subtext0: #3a5070; - --ctp-mauve: #1878e8; - --ctp-lavender: #3399ff; - --ctp-sky: #5bb3ff; - --ctp-blue: #1d4268; - --ctp-sapphire: #1366c8; - --ctp-teal: #0099aa; - --ctp-green: #107c10; - --ctp-yellow: #f7c948; - --ctp-peach: #e8890c; - --ctp-pink: #e3008c; - --ctp-flamingo: #c50f1f; - --ctp-rosewater: #da3b01; - --ctp-maroon: #a4262c; - --ctp-red: #c42b1c; - - /* ── Semantic tokens ── */ - --bg-app: #b8cfe8; - --bg-sidebar: rgba(210, 228, 248, 0.55); - --bg-card: rgba(225, 238, 252, 0.65); - --bg-hover: rgba(24, 120, 232, 0.85); - --bg-player: #05080f; - --bg-glass: rgba(210, 228, 248, 0.82); - --accent: #1878e8; - --accent-dim: rgba(24, 120, 232, 0.14); - --accent-glow: rgba(24, 120, 232, 0.40); - --volume-accent: #1878e8; - --text-primary: #0d1a2e; - --text-secondary: #1e3250; - --text-muted: #7090b8; - --border: rgba(130, 175, 220, 0.65); - --border-subtle: rgba(160, 200, 240, 0.45); - --positive: #107c10; - --warning: #c87400; - --danger: #c42b1c; - --radius-sm: 4px; - --radius-md: 6px; - --radius-lg: 8px; -} - -/* ── Background: W7 sky with depth ── */ -[data-theme='aero-glass'] .app-shell { - background: linear-gradient(160deg, #c8e2f5 0%, #b5cfe4 45%, #9fc0db 100%); -} - -/* ── Sidebar: Aero glass panel — frosted translucent ── */ -[data-theme='aero-glass'] .sidebar { - background: rgba(210, 232, 252, 0.52); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-right: 1px solid rgba(150, 190, 230, 0.55); - box-shadow: - inset -1px 0 0 rgba(255, 255, 255, 0.75), - inset 1px 0 0 rgba(255, 255, 255, 0.25), - 2px 0 8px rgba(0, 0, 0, 0.12); -} - -/* ── Player bar: authentic W7 taskbar — near-black glass ── */ -[data-theme='aero-glass'] .player-bar { - background: linear-gradient(180deg, - rgba(12, 18, 32, 0.96) 0%, - rgba(6, 10, 20, 0.99) 100%); - backdrop-filter: blur(22px); - -webkit-backdrop-filter: blur(22px); - border-top: 1px solid rgba(80, 155, 235, 0.60); - box-shadow: - inset 0 1px 0 rgba(100, 180, 255, 0.28), - inset 0 2px 0 rgba(255, 255, 255, 0.06), - 0 -2px 16px rgba(0, 0, 0, 0.55); -} - -/* Track info: white on near-black, blue glow */ -[data-theme='aero-glass'] .player-track-name { - color: #ffffff; - text-shadow: 0 0 12px rgba(80, 160, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.60); - font-weight: 600; -} - -[data-theme='aero-glass'] .player-track-artist { - color: #88b8e0; - opacity: 1; -} - -[data-theme='aero-glass'] .player-time { - color: #88b8e0; -} - -/* ── Transport buttons: Aero glass gel circles ── */ -[data-theme='aero-glass'] .player-btn, -[data-theme='aero-glass'] .player-btn-primary { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.80) 0%, - rgba(195, 228, 255, 0.82) 48%, - rgba(80, 160, 235, 0.92) 50%, - rgba(30, 110, 205, 0.96) 100%); - color: #ffffff; - border: 1px solid rgba(20, 75, 180, 0.55); - border-radius: 50%; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.90), - 0 2px 6px rgba(0, 0, 0, 0.40), - 0 0 0 1px rgba(80, 150, 230, 0.25); -} - -[data-theme='aero-glass'] .player-btn:hover, -[data-theme='aero-glass'] .player-btn-primary:hover { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.92) 0%, - rgba(215, 240, 255, 0.90) 48%, - rgba(105, 178, 248, 0.95) 50%, - rgba(50, 130, 220, 0.99) 100%); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.95), - 0 3px 10px rgba(0, 0, 0, 0.40), - 0 0 12px rgba(51, 153, 255, 0.45); -} - -/* ── Regular buttons: Aero frosted glass ── */ -[data-theme='aero-glass'] .btn, -[data-theme='aero-glass'] .btn-surface, -[data-theme='aero-glass'] .btn-ghost { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.85) 0%, - rgba(255, 255, 255, 0.85) 48%, - rgba(190, 220, 248, 0.90) 50%, - rgba(155, 198, 240, 0.94) 100%); - color: #0d1a2e; - border: 1px solid rgba(120, 170, 220, 0.65); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.95), - inset 0 1px 0 rgba(255, 255, 255, 0.50), - 0 1px 3px rgba(0, 0, 0, 0.18); - border-radius: 5px; -} - -[data-theme='aero-glass'] .btn:hover, -[data-theme='aero-glass'] .btn-surface:hover, -[data-theme='aero-glass'] .btn-ghost:hover { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.96) 0%, - rgba(255, 255, 255, 0.96) 48%, - rgba(210, 235, 255, 0.95) 50%, - rgba(175, 215, 252, 0.98) 100%); - border-color: rgba(24, 120, 232, 0.70); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 1), - 0 1px 4px rgba(0, 0, 0, 0.20), - 0 0 8px rgba(24, 120, 232, 0.22); -} - -/* ── Primary button: Aero blue gel ── */ -[data-theme='aero-glass'] .btn-primary { - background: linear-gradient(180deg, - rgba(110, 185, 255, 0.92) 0%, - rgba(70, 155, 245, 0.92) 48%, - rgba(24, 100, 205, 0.96) 50%, - rgba(12, 72, 175, 0.99) 100%); - color: #ffffff; - border: 1px solid rgba(12, 60, 155, 0.70); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.58), - 0 1px 4px rgba(0, 0, 0, 0.30), - 0 0 10px rgba(24, 120, 232, 0.38); - border-radius: 5px; -} - -[data-theme='aero-glass'] .btn-primary:hover { - background: linear-gradient(180deg, - rgba(140, 200, 255, 0.95) 0%, - rgba(90, 170, 255, 0.95) 48%, - rgba(40, 120, 225, 0.98) 50%, - rgba(24, 95, 195, 1) 100%); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.65), - 0 1px 5px rgba(0, 0, 0, 0.30), - 0 0 14px rgba(24, 120, 232, 0.50); -} - -/* ── Hero / album-card buttons: frosted glass ── */ -[data-theme='aero-glass'] .hero-play-btn, -[data-theme='aero-glass'] .album-card-details-btn { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.82) 0%, - rgba(190, 220, 248, 0.88) 48%, - rgba(140, 190, 235, 0.92) 50%, - rgba(100, 160, 220, 0.95) 100%); - color: #0d1a2e; - border: 1px solid rgba(100, 160, 220, 0.60); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 3px rgba(0, 0, 0, 0.20); -} - -[data-theme='aero-glass'] .hero-play-btn:hover, -[data-theme='aero-glass'] .album-card-details-btn:hover { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(215, 238, 255, 0.95) 50%, - rgba(165, 210, 250, 0.98) 100%); - border-color: rgba(24, 120, 232, 0.70); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 8px rgba(24, 120, 232, 0.25); -} - -/* ── Queue toolbar round buttons: Aero glass ── */ -[data-theme='aero-glass'] .queue-round-btn { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.80) 0%, - rgba(185, 218, 248, 0.88) 50%, - rgba(140, 190, 235, 0.92) 100%); - color: #1e3250; - border: 1px solid rgba(110, 165, 220, 0.60); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(0, 0, 0, 0.18); -} - -[data-theme='aero-glass'] .queue-round-btn:hover:not(:disabled):not(.active) { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(210, 235, 255, 0.95) 50%, - rgba(165, 208, 250, 0.98) 100%); - border-color: rgba(24, 120, 232, 0.65); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 8px rgba(24, 120, 232, 0.25); - color: #0d1a2e; -} - -[data-theme='aero-glass'] .queue-round-btn.active { - background: linear-gradient(180deg, - rgba(110, 180, 255, 0.90) 0%, - rgba(24, 100, 210, 0.96) 100%); - color: #ffffff; - border-color: rgba(12, 60, 155, 0.70); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 8px rgba(24, 120, 232, 0.50); -} - -/* ── Cards: frosted glass panels ── */ -[data-theme='aero-glass'] .card { - background: rgba(225, 240, 255, 0.62); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border: 1px solid rgba(160, 200, 240, 0.60); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.80), - 0 2px 8px rgba(0, 0, 0, 0.12); - border-radius: 6px; -} - -/* ── Content header: Aero chrome strip ── */ -[data-theme='aero-glass'] .content-header { - background: rgba(210, 232, 252, 0.58); - backdrop-filter: blur(14px); - -webkit-backdrop-filter: blur(14px); - border-bottom: 1px solid rgba(150, 195, 240, 0.55); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.70), - inset 0 -1px 0 rgba(255, 255, 255, 0.35), - 0 2px 6px rgba(0, 0, 0, 0.10); -} - -/* Connection indicators: dark navy, readable on glass */ -[data-theme='aero-glass'] .connection-type, -[data-theme='aero-glass'] .connection-server { - color: #0d1a2e; -} - -/* ── Theme accordion: glass hover ── */ -[data-theme='aero-glass'] .theme-accordion-header:hover { - background: rgba(24, 120, 232, 0.18); - color: #0d1a2e; -} - -[data-theme='aero-glass'] .theme-accordion-open .theme-accordion-header { - background: rgba(24, 120, 232, 0.22); - color: #0d1a2e; -} - -/* ── Progress bar: Aero blue ── */ -[data-theme='aero-glass'] .progress-bar-track { - background: rgba(150, 195, 235, 0.45); - border-radius: 3px; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); -} - -[data-theme='aero-glass'] .progress-bar-fill { - background: linear-gradient(180deg, - rgba(110, 185, 255, 0.95) 0%, - rgba(24, 120, 232, 0.98) 50%, - rgba(12, 90, 200, 1) 100%); - border-radius: 3px; - box-shadow: 0 0 6px rgba(24, 120, 232, 0.50); -} - -/* ── Scrollbar: W7 thin glass style ── */ -[data-theme='aero-glass'] ::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -[data-theme='aero-glass'] ::-webkit-scrollbar-track { - background: rgba(175, 210, 245, 0.25); - border-radius: 5px; -} - -[data-theme='aero-glass'] ::-webkit-scrollbar-thumb { - background: rgba(110, 168, 225, 0.60); - border: 1px solid rgba(80, 140, 200, 0.45); - border-radius: 5px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); -} - -[data-theme='aero-glass'] ::-webkit-scrollbar-thumb:hover { - background: rgba(24, 120, 232, 0.72); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 0 4px rgba(24, 120, 232, 0.30); -} - -/* ── Glass / dropdowns: frosted glass panel ── */ -[data-theme='aero-glass'] .glass { - background: rgba(218, 236, 255, 0.88) !important; - backdrop-filter: blur(18px) !important; - -webkit-backdrop-filter: blur(18px) !important; - border: 1px solid rgba(150, 195, 240, 0.65) !important; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.75), - 2px 2px 12px rgba(0, 0, 0, 0.18) !important; - border-radius: 8px !important; -} - -[data-theme='aero-glass'] .glass [style*="var(--bg-hover)"] { - background: rgba(24, 120, 232, 0.20) !important; - border-radius: 4px !important; -} - -[data-theme='aero-glass'] .glass [style*="var(--text-primary)"] { - color: #0d1a2e !important; -} - -[data-theme='aero-glass'] .glass [style*="var(--text-secondary)"] { - color: #1e3250 !important; -} - -[data-theme='aero-glass'] .glass [style*="var(--text-muted)"] { - color: #3a5070 !important; -} - -/* ── Hover / selection: Aero blue glass ── */ -[data-theme='aero-glass'] .queue-tab-btn:hover { - background: rgba(24, 120, 232, 0.18); - color: #0d1a2e; -} - -[data-theme='aero-glass'] .settings-tab:hover { - background: rgba(24, 120, 232, 0.18); - color: #0d1a2e; -} - -[data-theme='aero-glass'] .settings-tab.active { - background: rgba(24, 120, 232, 0.85); - color: #ffffff; -} - -[data-theme='aero-glass'] .custom-select-trigger:hover { - background: rgba(24, 120, 232, 0.15); -} - -[data-theme='aero-glass'] .custom-select-option:hover { - background: rgba(24, 120, 232, 0.85) !important; - color: #ffffff !important; -} - -[data-theme='aero-glass'] .artist-ext-link:hover { - background: rgba(24, 120, 232, 0.85); - color: #ffffff !important; -} - -[data-theme='aero-glass'] .np-action-btn:hover { - background: rgba(24, 120, 232, 0.18); -} - -[data-theme='aero-glass'] .np-queue-item:hover, -[data-theme='aero-glass'] .np-queue-item.context-active { - background: rgba(24, 120, 232, 0.85); - color: #ffffff; -} - -[data-theme='aero-glass'] .track-row:hover, -[data-theme='aero-glass'] .track-row.context-active { - background: rgba(24, 120, 232, 0.85) !important; -} - -[data-theme='aero-glass'] .track-row:hover *, -[data-theme='aero-glass'] .track-row.context-active * { - color: #ffffff !important; -} - -[data-theme='aero-glass'] .artist-row:hover { - background: rgba(24, 120, 232, 0.85); - color: #ffffff; -} - -[data-theme='aero-glass'] .playlist-row:hover { - background: rgba(24, 120, 232, 0.85); -} - -[data-theme='aero-glass'] .playlist-row:hover, -[data-theme='aero-glass'] .playlist-row:hover * { - color: #ffffff; -} - -[data-theme='aero-glass'] .queue-item:hover, -[data-theme='aero-glass'] .queue-item.context-active { - background: rgba(24, 120, 232, 0.85) !important; -} - -[data-theme='aero-glass'] .queue-item:hover .queue-item-title, -[data-theme='aero-glass'] .queue-item:hover .queue-item-artist, -[data-theme='aero-glass'] .queue-item:hover .queue-item-duration, -[data-theme='aero-glass'] .queue-item.context-active .queue-item-title, -[data-theme='aero-glass'] .queue-item.context-active .queue-item-artist, -[data-theme='aero-glass'] .queue-item.context-active .queue-item-duration { - color: #ffffff; -} - -/* ── Active queue / now-playing items ── */ -[data-theme='aero-glass'] .queue-item.active { - background: rgba(24, 120, 232, 0.14); - color: #1366c8; -} - -[data-theme='aero-glass'] .queue-item.active .queue-item-artist, -[data-theme='aero-glass'] .queue-item.active .queue-item-duration { - color: #1878e8; - opacity: 0.85; -} - -[data-theme='aero-glass'] .np-queue-item-active { - color: #1366c8; -} - -[data-theme='aero-glass'] .np-queue-item.active { - background: rgba(24, 120, 232, 0.10); -} - -[data-theme='aero-glass'] .np-album-track.active .np-album-track-title, -[data-theme='aero-glass'] .np-album-track.active .np-album-track-num { - color: #1366c8; -} - -/* ─── Windows XP Luna — Classic 2001 ─── */ -/* ─── Windows XP Luna Teal ─── */ -[data-theme='luna-teal'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #0041b8; - --ctp-mantle: #0055e5; - --ctp-base: #ece9d8; - --ctp-surface0: #ffffff; - --ctp-surface1: #f5f3ec; - --ctp-surface2: #ece9d8; - --ctp-overlay0: #c0bba8; - --ctp-overlay1: #8a8675; - --ctp-overlay2: #5e5a4c; - --ctp-text: #000000; - --ctp-subtext1: #1a1a1a; - --ctp-subtext0: #444444; - --ctp-mauve: #3c9d29; - --ctp-lavender: #52b83c; - --ctp-green: #3c9d29; - --ctp-teal: #007c8a; - --ctp-sky: #316ac5; - --ctp-blue: #0055e5; - --ctp-sapphire: #0041b8; - --ctp-pink: #cc2288; - --ctp-flamingo: #cc2020; - --ctp-rosewater: #dd4400; - --ctp-yellow: #b87800; - --ctp-peach: #cc6600; - --ctp-maroon: #aa1111; - --ctp-red: #cc1111; - - /* ── Semantic tokens ── */ - --bg-app: #ece9d8; - --bg-sidebar: #c8daf5; - --bg-card: #ffffff; - --bg-hover: #316ac5; - --bg-player: #1248b8; - --bg-glass: rgba(255, 255, 255, 0.97); - --accent: #3c9d29; - --accent-dim: rgba(60, 157, 41, 0.14); - --accent-glow: rgba(60, 157, 41, 0.35); - --volume-accent: #3c9d29; - --text-primary: #000000; - --text-secondary: #333333; - --text-muted: #555555; - --border: #003399; - --border-subtle: #aca899; - --positive: #3c9d29; - --warning: #b87800; - --danger: #cc1111; - --radius-sm: 3px; - --radius-md: 4px; - --radius-lg: 6px; -} - -/* ── App shell: XP sandy desktop ── */ -[data-theme='luna-teal'] .app-shell { - background: #ece9d8; -} - -/* ── Sidebar: XP Explorer task pane / Folders panel ── */ -[data-theme='luna-teal'] .sidebar { - background: linear-gradient(180deg, #d8e8fa 0%, #c0d4f5 40%, #b0c8f0 100%); - border-right: 1px solid #7090c0; - box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.60), 2px 0 4px rgba(0, 0, 0, 0.14); -} - -/* Sidebar text: dark navy on ice blue — with white text-shadow for legibility */ -[data-theme='luna-teal'] .sidebar-link, -[data-theme='luna-teal'] .sidebar-section-title, -[data-theme='luna-teal'] .sidebar-logo-text, -[data-theme='luna-teal'] .nav-section-label, -[data-theme='luna-teal'] .brand-name { - color: #002060; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); - font-weight: 700; -} - -/* Nav links */ -[data-theme='luna-teal'] .nav-link { - color: #001850; -} - -[data-theme='luna-teal'] .nav-link:hover { - background: rgba(255, 255, 255, 0.45); - color: #000000; - border-radius: 3px; -} - -[data-theme='luna-teal'] .nav-link.active { - background: #316ac5; - color: #ffffff; - border-radius: 3px; - text-shadow: none; -} - -[data-theme='luna-teal'] .nav-link.active::before { - background: #ffffff; -} - -[data-theme='luna-teal'] .nav-link.active svg, -[data-theme='luna-teal'] .nav-link:hover svg { - opacity: 1; -} - -/* Now Playing nav link */ -[data-theme='luna-teal'] .nav-link-nowplaying { - background: rgba(0, 0, 80, 0.10); - color: #001850; -} - -[data-theme='luna-teal'] .nav-link-nowplaying:hover { - background: rgba(255, 255, 255, 0.45); - color: #000000; -} - -[data-theme='luna-teal'] .nav-link-nowplaying.active { - background: #316ac5; - color: #ffffff; -} - -/* ── Player bar: authentic XP Luna taskbar blue ── */ -[data-theme='luna-teal'] .player-bar { - background: linear-gradient(180deg, - #4b8ee8 0%, - #2568d4 8%, - #1a56c4 30%, - #1248b8 70%, - #0e3da8 85%, - #1248b8 100%); - border-top: 1px solid #7aaaff; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.55), - inset 0 2px 0 rgba(255, 255, 255, 0.18), - 0 -2px 8px rgba(0, 0, 0, 0.30); -} - -/* Track name: white with XP glow */ -[data-theme='luna-teal'] .player-track-name { - color: #ffffff; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60), 0 0 10px rgba(120, 180, 255, 0.40); - font-weight: 700; -} - -[data-theme='luna-teal'] .player-track-artist { - color: #b8d4ff; - opacity: 1; -} - -[data-theme='luna-teal'] .player-time { - color: #b8d4ff; -} - -/* ── Transport buttons: XP Luna gel circles ── */ -[data-theme='luna-teal'] .player-btn, -[data-theme='luna-teal'] .player-btn-primary { - background: linear-gradient(180deg, - #80aaff 0%, - #4477ee 45%, - #1a50dd 50%, - #0c3bb8 100%); - color: #ffffff; - border: 1px solid #002288; - border-radius: 50%; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.65), - 0 2px 5px rgba(0, 0, 0, 0.45); -} - -[data-theme='luna-teal'] .player-btn:hover, -[data-theme='luna-teal'] .player-btn-primary:hover { - background: linear-gradient(180deg, - #99bbff 0%, - #5588ff 45%, - #2264ee 50%, - #1a52d0 100%); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.75), - 0 3px 8px rgba(0, 0, 0, 0.40), - 0 0 10px rgba(80, 140, 255, 0.40); -} - -/* ── Regular buttons: XP bevel style ── */ -[data-theme='luna-teal'] .btn, -[data-theme='luna-teal'] .btn-surface, -[data-theme='luna-teal'] .btn-ghost { - background: linear-gradient(180deg, #f5f3ec 0%, #ece9d8 48%, #ddd9c8 50%, #d0cdb8 100%); - color: #000000; - border: 1px solid #888480; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.95), - inset 1px 0 0 rgba(255, 255, 255, 0.70), - 0 1px 2px rgba(0, 0, 0, 0.20); - border-radius: 3px; -} - -[data-theme='luna-teal'] .btn:hover, -[data-theme='luna-teal'] .btn-surface:hover, -[data-theme='luna-teal'] .btn-ghost:hover { - background: linear-gradient(180deg, #ffffff 0%, #f0ede0 48%, #e4e0d0 50%, #d8d4c4 100%); - border-color: #0055e5; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 1), - 0 1px 3px rgba(0, 0, 0, 0.18); -} - -/* ── Primary button: XP green gel ── */ -[data-theme='luna-teal'] .btn-primary { - background: linear-gradient(180deg, - #66dd50 0%, - #3c9d29 45%, - #2e8020 50%, - #1e6015 100%); - color: #ffffff; - border: 1px solid #1a5010; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.55), - 0 1px 3px rgba(0, 0, 0, 0.30); - border-radius: 4px; -} - -[data-theme='luna-teal'] .btn-primary:hover { - background: linear-gradient(180deg, - #80ee68 0%, - #4db035 45%, - #3a9028 50%, - #2e8020 100%); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.60), - 0 1px 4px rgba(0, 0, 0, 0.30), - 0 0 8px rgba(60, 157, 41, 0.40); -} - -/* ── Hero / album-card play buttons ── */ -[data-theme='luna-teal'] .hero-play-btn, -[data-theme='luna-teal'] .album-card-details-btn { - background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%); - color: #000000; - border: 1px solid #888480; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.20); -} - -[data-theme='luna-teal'] .hero-play-btn:hover, -[data-theme='luna-teal'] .album-card-details-btn:hover { - background: linear-gradient(180deg, #ffffff 0%, #ddd9c8 100%); - border-color: #0055e5; -} - -/* ── Queue toolbar round buttons ── */ -[data-theme='luna-teal'] .queue-round-btn { - background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%); - color: #333333; - border: 1px solid #888480; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(0, 0, 0, 0.18); -} - -[data-theme='luna-teal'] .queue-round-btn:hover:not(:disabled):not(.active) { - background: linear-gradient(180deg, #ffffff 0%, #e0ddd0 100%); - border-color: #0055e5; - color: #000000; -} - -[data-theme='luna-teal'] .queue-round-btn.active { - background: #316ac5; - color: #ffffff; - border-color: #0033aa; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.15); -} - -/* ── Cards: XP white window interior ── */ -[data-theme='luna-teal'] .card { - background: #ffffff; - border: 1px solid #aca899; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 3px rgba(0, 0, 0, 0.15); - border-radius: 4px; -} - -/* ── Content header: XP title bar gradient ── */ -[data-theme='luna-teal'] .content-header { - background: linear-gradient(180deg, - #5a9aee 0%, - #2a6ad4 25%, - #1a56c4 50%, - #0e48b8 75%, - #0a3aaa 100%); - border-bottom: 1px solid #0033aa; - color: #ffffff; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 2px 4px rgba(0, 0, 0, 0.18); -} - -/* Connection indicators: white on blue header */ -[data-theme='luna-teal'] .connection-type, -[data-theme='luna-teal'] .connection-server { - color: #ffffff; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50); -} - -/* ── Theme accordion: XP selection blue ── */ -[data-theme='luna-teal'] .theme-accordion-header:hover { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-header { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-chevron { - color: #ffffff; -} - -/* ── Progress bar: XP green ── */ -[data-theme='luna-teal'] .progress-bar-track { - background: #aca899; - border-radius: 2px; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); -} - -[data-theme='luna-teal'] .progress-bar-fill { - background: linear-gradient(180deg, #52cc3c 0%, #3c9d29 50%, #2e8020 100%); - border-radius: 2px; -} - -/* ── Scrollbar: XP 16px system style ── */ -[data-theme='luna-teal'] ::-webkit-scrollbar { - width: 16px; - height: 16px; -} - -[data-theme='luna-teal'] ::-webkit-scrollbar-track { - background: #ece9d8; - border-left: 1px solid #aca899; -} - -[data-theme='luna-teal'] ::-webkit-scrollbar-thumb { - background: linear-gradient(to right, #c8c4b8 0%, #e0ddd0 40%, #c0bbb4 100%); - border: 1px solid #888480; - box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480; - border-radius: 2px; -} - -[data-theme='luna-teal'] ::-webkit-scrollbar-button { - background: linear-gradient(180deg, #f0ede0 0%, #d8d4c4 100%); - border: 1px solid #888480; - box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480; -} - -/* ── Glass / dropdowns: solid XP dialog style ── */ -[data-theme='luna-teal'] .glass { - background: #ffffff !important; - backdrop-filter: none !important; - border: 1px solid #aca899 !important; - box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.28) !important; - border-radius: 4px !important; -} - -[data-theme='luna-teal'] .glass [style*="var(--bg-hover)"] { - background: #316ac5 !important; - border-radius: 0 !important; - color: #ffffff !important; -} - -[data-theme='luna-teal'] .glass [style*="var(--text-primary)"] { - color: #000000 !important; -} - -[data-theme='luna-teal'] .glass [style*="var(--text-secondary)"] { - color: #333333 !important; -} - -[data-theme='luna-teal'] .glass [style*="var(--text-muted)"] { - color: #555555 !important; -} - -/* ── Hover / selection: XP classic blue ── */ -[data-theme='luna-teal'] .queue-tab-btn:hover { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .settings-tab:hover { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .settings-tab.active { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .custom-select-trigger:hover { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .custom-select-option:hover { - background: #316ac5 !important; - color: #ffffff !important; -} - -[data-theme='luna-teal'] .artist-ext-link:hover { - background: #316ac5; - color: #ffffff !important; -} - -[data-theme='luna-teal'] .np-action-btn:hover { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .np-queue-item:hover, -[data-theme='luna-teal'] .np-queue-item.context-active { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .track-row:hover, -[data-theme='luna-teal'] .track-row.context-active { - background: #316ac5 !important; -} - -[data-theme='luna-teal'] .track-row:hover *, -[data-theme='luna-teal'] .track-row.context-active * { - color: #ffffff !important; -} - -[data-theme='luna-teal'] .artist-row:hover { - background: #316ac5; - color: #ffffff; -} - -[data-theme='luna-teal'] .playlist-row:hover { - background: #316ac5; -} - -[data-theme='luna-teal'] .playlist-row:hover, -[data-theme='luna-teal'] .playlist-row:hover * { - color: #ffffff; -} - -[data-theme='luna-teal'] .queue-item:hover, -[data-theme='luna-teal'] .queue-item.context-active { - background: #316ac5 !important; -} - -[data-theme='luna-teal'] .queue-item:hover .queue-item-title, -[data-theme='luna-teal'] .queue-item:hover .queue-item-artist, -[data-theme='luna-teal'] .queue-item:hover .queue-item-duration, -[data-theme='luna-teal'] .queue-item.context-active .queue-item-title, -[data-theme='luna-teal'] .queue-item.context-active .queue-item-artist, -[data-theme='luna-teal'] .queue-item.context-active .queue-item-duration { - color: #ffffff; -} - -/* ── Active queue / now-playing items ── */ -[data-theme='luna-teal'] .queue-item.active { - background: rgba(49, 106, 197, 0.12); - color: #0041b8; -} - -[data-theme='luna-teal'] .queue-item.active .queue-item-artist, -[data-theme='luna-teal'] .queue-item.active .queue-item-duration { - color: #0055e5; - opacity: 0.85; -} - -[data-theme='luna-teal'] .np-queue-item-active { - color: #0041b8; -} - -[data-theme='luna-teal'] .np-queue-item.active { - background: rgba(49, 106, 197, 0.10); -} - -[data-theme='luna-teal'] .np-album-track.active .np-album-track-title, -[data-theme='luna-teal'] .np-album-track.active .np-album-track-num { - color: #0041b8; -} - -/* ─── macOS Ventura Light ─── */ -[data-theme='cupertino-light'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23636366%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Palette */ - --ctp-crust: #f5f5f7; - --ctp-mantle: #e8e8ed; - --ctp-base: #ffffff; - --ctp-surface0: #f2f2f7; - --ctp-surface1: #e5e5ea; - --ctp-surface2: #d1d1d6; - --ctp-overlay0: #8e8e93; - --ctp-overlay1: #6c6c70; - --ctp-overlay2: #48484a; - --ctp-text: #1c1c1e; - --ctp-subtext1: #3a3a3c; - --ctp-subtext0: #636366; - --ctp-mauve: #0071e3; - --ctp-lavender: #2c9af0; - --ctp-green: #34c759; - --ctp-teal: #5ac8fa; - --ctp-sky: #32ade6; - --ctp-blue: #0071e3; - --ctp-sapphire: #0051a8; - --ctp-pink: #ff2d55; - --ctp-flamingo: #ff6b81; - --ctp-rosewater: #ffd6d6; - --ctp-yellow: #ffd60a; - --ctp-peach: #ff9f0a; - --ctp-maroon: #c0392b; - --ctp-red: #ff3b30; - - /* Semantic tokens */ - --bg-app: #ffffff; - --bg-sidebar: #f2f2f7; - --bg-card: #ffffff; - --bg-hover: #f2f2f7; - --bg-player: rgba(255, 255, 255, 0.85); - --bg-glass: rgba(255, 255, 255, 0.72); - --accent: #0071e3; - --accent-dim: rgba(0, 113, 227, 0.12); - --accent-glow: rgba(0, 113, 227, 0.30); - --text-primary: #1c1c1e; - --text-secondary: #3a3a3c; - --text-muted: #6d6d72; - --border: #d1d1d6; - --border-subtle: #e5e5ea; - --positive: #34c759; - --warning: #ff9f0a; - --danger: #ff3b30; - - --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08); -} - -[data-theme='cupertino-light'] .app-shell { - background: #f2f2f7; -} - -[data-theme='cupertino-light'] .sidebar { - background: rgba(242, 242, 247, 0.85); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-right: 1px solid rgba(0, 0, 0, 0.08); -} - -[data-theme='cupertino-light'] .player-bar { - background: rgba(255, 255, 255, 0.85); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border-top: 1px solid rgba(0, 0, 0, 0.10); - box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06); -} - -/* Player text: dark on light bar */ -[data-theme='cupertino-light'] .player-track-name { - color: #1c1c1e; -} - -[data-theme='cupertino-light'] .player-track-artist { - color: #636366; -} - -[data-theme='cupertino-light'] .player-time { - color: #636366; -} - -[data-theme='cupertino-light'] .player-btn { - color: #1c1c1e; -} - -[data-theme='cupertino-light'] .player-btn:hover { - color: #0071e3; - background: rgba(0, 113, 227, 0.10); -} - -[data-theme='cupertino-light'] .player-btn-primary { - color: #ffffff; - background: #0071e3; - box-shadow: 0 2px 8px rgba(0, 113, 227, 0.35); -} - -[data-theme='cupertino-light'] .player-btn-primary:hover { - background: #0077ed; - box-shadow: 0 4px 12px rgba(0, 113, 227, 0.45); -} - -/* Nav links */ -[data-theme='cupertino-light'] .nav-link { - color: #3a3a3c; -} - -[data-theme='cupertino-light'] .nav-link:hover { - background: rgba(0, 0, 0, 0.06); - color: #1c1c1e; -} - -[data-theme='cupertino-light'] .nav-link.active { - background: #0071e3; - color: #ffffff; - border-left-color: transparent; - border-radius: 8px; -} - -[data-theme='cupertino-light'] .nav-link.active::before { - display: none; -} - -[data-theme='cupertino-light'] .nav-link-nowplaying { - color: #0071e3; - font-weight: 600; -} - -/* Queue active */ -[data-theme='cupertino-light'] .queue-item.active { - background: rgba(0, 113, 227, 0.10); - color: #0071e3; -} - -/* NowPlaying overrides */ -[data-theme='cupertino-light'] .np-queue-item-active { - color: #0071e3; -} - -[data-theme='cupertino-light'] .np-album-track.active .np-album-track-title, -[data-theme='cupertino-light'] .np-album-track.active .np-album-track-num { - color: #0071e3; -} - -/* ─── macOS Ventura Dark ─── */ -[data-theme='cupertino-dark'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2398989d%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Palette */ - --ctp-crust: #0d0d0e; - --ctp-mantle: #161617; - --ctp-base: #1e1e1f; - --ctp-surface0: #2d2d2f; - --ctp-surface1: #3a3a3c; - --ctp-surface2: #48484a; - --ctp-overlay0: #636366; - --ctp-overlay1: #8e8e93; - --ctp-overlay2: #aeaeb2; - --ctp-text: #f5f5f7; - --ctp-subtext1: #e5e5ea; - --ctp-subtext0: #c7c7cc; - --ctp-mauve: #007aff; - --ctp-lavender: #409cff; - --ctp-green: #30d158; - --ctp-teal: #5ac8fa; - --ctp-sky: #32ade6; - --ctp-blue: #007aff; - --ctp-sapphire: #0a84ff; - --ctp-pink: #ff375f; - --ctp-flamingo: #ff6b81; - --ctp-rosewater: #ffd6d6; - --ctp-yellow: #ffd60a; - --ctp-peach: #ff9f0a; - --ctp-maroon: #c0392b; - --ctp-red: #ff453a; - - /* Semantic tokens */ - --bg-app: #1e1e1f; - --bg-sidebar: #161617; - --bg-card: #2d2d2f; - --bg-hover: #3a3a3c; - --bg-player: rgba(16, 16, 17, 0.90); - --bg-glass: rgba(30, 30, 31, 0.80); - --accent: #007aff; - --accent-dim: rgba(0, 122, 255, 0.15); - --accent-glow: rgba(0, 122, 255, 0.35); - --text-primary: #f5f5f7; - --text-secondary: #c7c7cc; - --text-muted: #8e8e93; - --border: #3a3a3c; - --border-subtle: #2d2d2f; - --positive: #30d158; - --warning: #ff9f0a; - --danger: #ff453a; - - --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.30); -} - -[data-theme='cupertino-dark'] .app-shell { - background: #1e1e1f; -} - -[data-theme='cupertino-dark'] .sidebar { - background: rgba(22, 22, 23, 0.90); - backdrop-filter: blur(25px); - -webkit-backdrop-filter: blur(25px); - border-right: 1px solid rgba(255, 255, 255, 0.06); -} - -[data-theme='cupertino-dark'] .player-bar { - background: rgba(16, 16, 17, 0.90); - backdrop-filter: blur(25px); - -webkit-backdrop-filter: blur(25px); - border-top: 1px solid rgba(255, 255, 255, 0.06); -} - -[data-theme='cupertino-dark'] .player-btn:hover { - color: #007aff; - background: rgba(0, 122, 255, 0.12); -} - -[data-theme='cupertino-dark'] .player-btn-primary { - color: #ffffff; - background: #007aff; - box-shadow: 0 2px 8px rgba(0, 122, 255, 0.40); -} - -[data-theme='cupertino-dark'] .player-btn-primary:hover { - background: #0a84ff; - box-shadow: 0 4px 14px rgba(0, 122, 255, 0.50); -} - -/* Nav links */ -[data-theme='cupertino-dark'] .nav-link.active { - background: #007aff; - color: #ffffff; - border-left-color: transparent; - border-radius: 8px; -} - -[data-theme='cupertino-dark'] .nav-link.active::before { - display: none; -} - -[data-theme='cupertino-dark'] .nav-link-nowplaying { - color: #409cff; - font-weight: 600; -} - -/* Queue active */ -[data-theme='cupertino-dark'] .queue-item.active { - background: rgba(0, 122, 255, 0.15); - color: #007aff; -} - -/* NowPlaying overrides */ -[data-theme='cupertino-dark'] .np-queue-item-active { - color: #007aff; -} - -[data-theme='cupertino-dark'] .np-album-track.active .np-album-track-title, -[data-theme='cupertino-dark'] .np-album-track.active .np-album-track-num { - color: #007aff; -} - -/* ─── Neon Drift ─── */ -[data-theme='neon-drift'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #080916; - --ctp-mantle: #0d0e21; - --ctp-base: #12132c; - --ctp-surface0: #1a1b3b; - --ctp-surface1: #242650; - --ctp-surface2: #2f3166; - --ctp-overlay0: #51548a; - --ctp-overlay1: #7277ad; - --ctp-overlay2: #9299cf; - --ctp-text: #e0e2ff; - --ctp-subtext1: #aeb3e0; - --ctp-subtext0: #8b91c4; - --ctp-mauve: #00f2ff; - --ctp-lavender: #7000ff; - --ctp-green: #00ffa3; - --ctp-teal: #00d4cc; - --ctp-sky: #00c8ff; - --ctp-blue: #0077ff; - --ctp-sapphire: #0055cc; - --ctp-pink: #ff00cc; - --ctp-flamingo: #ff44aa; - --ctp-rosewater: #ffaadd; - --ctp-yellow: #ffe600; - --ctp-peach: #ff9900; - --ctp-maroon: #cc2244; - --ctp-red: #ff2d55; - - --bg-app: #12132c; - --bg-sidebar: #0d0e21; - --bg-card: #1a1b3b; - --bg-hover: #242650; - --bg-player: #080916; - --bg-glass: rgba(13, 14, 33, 0.85); - --accent: #00f2ff; - --accent-dim: rgba(0, 242, 255, 0.12); - --accent-glow: rgba(0, 242, 255, 0.40); - --text-primary: #e0e2ff; - --text-secondary: #aeb3e0; - --text-muted: #7277ad; - --border: #2f3166; - --border-subtle: #242650; - --positive: #00ffa3; - --warning: #ffe600; - --danger: #ff2d55; - - --radius-md: 8px; - --radius-lg: 12px; -} - -[data-theme='neon-drift'] .player-bar { - border-top: 1px solid rgba(0, 242, 255, 0.20); - box-shadow: 0 -10px 30px -15px rgba(0, 242, 255, 0.15); -} - -[data-theme='neon-drift'] .player-track-name { - color: #00f2ff; - text-shadow: 0 0 12px rgba(0, 242, 255, 0.30); - font-weight: 600; -} - -[data-theme='neon-drift'] .nav-link.active { - color: #00f2ff; - text-shadow: 0 0 8px rgba(0, 242, 255, 0.50); -} - -[data-theme='neon-drift'] .nav-link.active::before { - box-shadow: 0 0 10px #00f2ff; -} - -[data-theme='neon-drift'] .btn-primary { - background: linear-gradient(135deg, #00f2ff, #0077ff); - border: none; - color: #080916 !important; - box-shadow: 0 4px 15px rgba(0, 242, 255, 0.30); -} - -[data-theme='neon-drift'] input[type="range"]::-webkit-slider-thumb { - background: white; - box-shadow: 0 0 10px #00f2ff; -} - -/* ─── Font overrides ─── */ -[data-font='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; -} - -/* ───────────────────────────────────────────────────────────── - Middle Earth — Epic Fantasy / Cinematic - ───────────────────────────────────────────────────────────── */ - -/* ───────────────────────────────────────────────────────────── - Middle-Earth — The One Ring Inscription Glow - ───────────────────────────────────────────────────────────── */ - -/* Breathing glow of the Ring — applied to player-track-name. - Like the inscription heating up in Bag End's fireplace. */ -@keyframes ring-inscription-glow { - - 0%, - 100% { - text-shadow: - 0 0 8px rgba(240, 200, 60, 0.70), - 0 0 18px rgba(200, 140, 20, 0.38), - 0 0 36px rgba(160, 100, 10, 0.15); - } - - 50% { - text-shadow: - 0 0 12px rgba(240, 200, 60, 0.95), - 0 0 28px rgba(200, 140, 20, 0.65), - 0 0 52px rgba(160, 100, 10, 0.32), - 0 0 80px rgba(100, 60, 5, 0.14); - } -} - -/* ─── Middle-Earth — Red Book of Westmarch ─── */ -[data-theme='middle-earth'] { - color-scheme: light; - --color-star-active: #8c6800; - --color-star-inactive: #b8985a; - - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234a3728%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - /* Warm — Shire, Rohan, Dwarvish gold */ - --ctp-crust: #1a1008; - --ctp-mantle: #281808; - --ctp-base: #f0e0b0; - --ctp-surface0: #e8d498; - --ctp-surface1: #dcc482; - --ctp-surface2: #ccb06e; - --ctp-overlay0: #8a7250; - --ctp-overlay1: #6a5438; - --ctp-overlay2: #4a3828; - --ctp-text: #1e1408; - --ctp-subtext1: #3e2c1a; - --ctp-subtext0: #5e4a30; - /* Gold of the One Ring */ - --ctp-mauve: #d4a820; - --ctp-lavender: #f0d060; - --ctp-yellow: #f8e880; - --ctp-peach: #b88010; - /* Shire green, Rivendell silver, Elvish blue */ - --ctp-green: #4a7038; - --ctp-teal: #3a6858; - --ctp-sky: #7898b8; - --ctp-blue: #486888; - --ctp-sapphire: #2a4868; - /* Mordor / danger */ - --ctp-red: #8a2820; - --ctp-maroon: #5a1818; - --ctp-flamingo: #b05838; - --ctp-pink: #904868; - --ctp-rosewater: #e8c8a8; - - /* ── Semantic tokens ── */ - --bg-app: #f0e0b0; - --bg-sidebar: #241a0e; - /* Bag End — old oak wood, hearthlit */ - --bg-card: #f4e8c0; - --bg-hover: rgba(180, 130, 20, 0.12); - --bg-player: #1a1008; - /* Orodruin / the forge-dark */ - --bg-glass: rgba(244, 232, 192, 0.92); - --accent: #d4a820; - --accent-dim: rgba(212, 168, 32, 0.16); - --accent-glow: rgba(212, 168, 32, 0.45); - --volume-accent: #d4a820; - --text-primary: #1e1408; - --text-secondary: #3e2c1a; - --text-muted: #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; -} - -/* ───────────────────────────────────────────────────────────── - Morpheus — Matrix Style - ───────────────────────────────────────────────────────────── */ - -/* ─── The Matrix — Morpheus ─── */ -[data-theme='morpheus'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300ff41%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #000000; - --ctp-mantle: #020502; - --ctp-base: #050905; - --ctp-surface0: #0a120a; - --ctp-surface1: #0f1c0f; - --ctp-surface2: #162416; - --ctp-overlay0: #003b00; - --ctp-overlay1: #008f11; - --ctp-overlay2: #00cc33; - --ctp-text: #00ff41; - --ctp-subtext1: #00cc33; - --ctp-subtext0: #008f11; - --ctp-mauve: #00ff41; - --ctp-lavender: #adff2f; - --ctp-green: #00ff41; - --ctp-teal: #20c20e; - --ctp-sky: #00ff41; - --ctp-blue: #00ff41; - --ctp-sapphire: #008f11; - --ctp-pink: #003b00; - --ctp-flamingo: #003b00; - --ctp-rosewater: #d2ff00; - --ctp-yellow: #adff2f; - --ctp-peach: #00ff41; - --ctp-maroon: #003b00; - --ctp-red: #ff0033; - - /* ── Semantic tokens ── */ - --bg-app: #050905; - --bg-sidebar: #000000; - --bg-card: #0a120a; - --bg-hover: rgba(0, 255, 65, 0.10); - --bg-player: #000000; - --bg-glass: rgba(0, 8, 0, 0.96); - --accent: #00ff41; - --accent-dim: rgba(0, 255, 65, 0.12); - --accent-glow: rgba(0, 255, 65, 0.45); - --volume-accent: #00ff41; - --text-primary: #00ff41; - --text-secondary: #00cc33; - --text-muted: #22cc44; - --border: #003b00; - --border-subtle: #001a00; - --positive: #00ff41; - --warning: #adff2f; - --danger: #ff0033; - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 2px; -} - -/* ── App shell: solid dark base (scanlines moved to sidebar for perf) ── */ -[data-theme='morpheus'] .app-shell { - background-color: #050905; -} - -/* ── Sidebar: black with code-column ghost pattern ── */ -[data-theme='morpheus'] .sidebar { - background-color: #000000; - background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 19px, - rgba(0, 255, 65, 0.03) 19px, rgba(0, 255, 65, 0.03) 20px); - border-right: 1px solid #003b00; -} - -/* Nav links */ -[data-theme='morpheus'] .nav-link { - color: #00cc33; -} - -[data-theme='morpheus'] .nav-link:hover { - background: rgba(0, 255, 65, 0.08); - color: #00ff41; - text-shadow: 0 0 8px rgba(0, 255, 65, 0.50); -} - -[data-theme='morpheus'] .nav-link.active { - background: rgba(0, 255, 65, 0.10); - color: #00ff41; - text-shadow: 0 0 6px rgba(0, 255, 65, 0.45); -} - -[data-theme='morpheus'] .nav-link.active::before { - background: #00ff41; - box-shadow: 0 0 8px rgba(0, 255, 65, 0.70); -} - -[data-theme='morpheus'] .nav-section-label { - color: #003b00; -} - -/* ── Player bar: black glass with phosphor glow ── */ -[data-theme='morpheus'] .player-bar { - background: #000000; - border-top: 1px solid rgba(0, 255, 65, 0.35); - box-shadow: - inset 0 1px 0 rgba(0, 255, 65, 0.12), - 0 -4px 24px rgba(0, 255, 65, 0.06); -} - -/* Track info: phosphor CRT glow */ -[data-theme='morpheus'] .player-track-name { - font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; - color: #00ff41; - text-shadow: 0 0 10px rgba(0, 255, 65, 0.70), 0 0 20px rgba(0, 255, 65, 0.30); - letter-spacing: 0.04em; -} - -[data-theme='morpheus'] .player-track-artist, -[data-theme='morpheus'] .player-time { - font-family: 'JetBrains Mono', 'Courier New', monospace; - color: #00cc33; - opacity: 0.85; -} - -/* ── Transport buttons: terminal command style ── */ -[data-theme='morpheus'] .player-btn, -[data-theme='morpheus'] .player-btn-primary { - background: #000000; - color: #00ff41; - border: 1px solid #003b00; - border-radius: 2px; - box-shadow: inset 0 0 6px rgba(0, 255, 65, 0.05); -} - -[data-theme='morpheus'] .player-btn:hover, -[data-theme='morpheus'] .player-btn-primary:hover { - background: rgba(0, 255, 65, 0.08); - border-color: #00ff41; - box-shadow: - 0 0 12px rgba(0, 255, 65, 0.35), - inset 0 0 8px rgba(0, 255, 65, 0.08); - color: #00ff41; -} - -/* ── All buttons: terminal style ── */ -[data-theme='morpheus'] .btn, -[data-theme='morpheus'] .btn-surface, -[data-theme='morpheus'] .btn-ghost, -[data-theme='morpheus'] .btn-primary, -[data-theme='morpheus'] .hero-play-btn, -[data-theme='morpheus'] .album-card-details-btn, -[data-theme='morpheus'] .queue-round-btn { - background: #000000; - color: #00ff41; - border: 1px solid #003b00; - border-radius: 0; - font-family: 'JetBrains Mono', 'Courier New', monospace; - box-shadow: none; -} - -[data-theme='morpheus'] .btn:hover, -[data-theme='morpheus'] .btn-surface:hover, -[data-theme='morpheus'] .btn-ghost:hover, -[data-theme='morpheus'] .btn-primary:hover, -[data-theme='morpheus'] .hero-play-btn:hover, -[data-theme='morpheus'] .album-card-details-btn:hover { - background: rgba(0, 255, 65, 0.08); - border-color: #00ff41; - color: #00ff41; - box-shadow: 0 0 10px rgba(0, 255, 65, 0.28), inset 0 0 8px rgba(0, 255, 65, 0.05); -} - -[data-theme='morpheus'] .btn-primary { - border-color: #00cc33; - box-shadow: 0 0 8px rgba(0, 255, 65, 0.20); -} - -[data-theme='morpheus'] .btn-primary:hover { - border-color: #00ff41; - box-shadow: 0 0 16px rgba(0, 255, 65, 0.45), inset 0 0 10px rgba(0, 255, 65, 0.08); -} - -/* Queue round button active: bright green */ -[data-theme='morpheus'] .queue-round-btn:hover:not(:disabled):not(.active) { - background: rgba(0, 255, 65, 0.08); - border-color: #00ff41; - color: #00ff41; - box-shadow: 0 0 10px rgba(0, 255, 65, 0.28); -} - -[data-theme='morpheus'] .queue-round-btn.active { - background: rgba(0, 255, 65, 0.15); - border-color: #00ff41; - color: #00ff41; - box-shadow: 0 0 12px rgba(0, 255, 65, 0.40), inset 0 0 8px rgba(0, 255, 65, 0.08); -} - -/* ── Cards: dark terminal panels ── */ -[data-theme='morpheus'] .card { - background: #0a120a; - border: 1px solid #003b00; - border-radius: 0; - box-shadow: inset 0 0 24px rgba(0, 255, 65, 0.02), 0 0 12px rgba(0, 0, 0, 0.60); -} - -/* ── Content header: terminal prompt bar ── */ -[data-theme='morpheus'] .content-header { - background: #000000; - border-bottom: 1px solid rgba(0, 255, 65, 0.25); - box-shadow: 0 2px 16px rgba(0, 255, 65, 0.04); -} - -/* ── Theme accordion: terminal hover ── */ -[data-theme='morpheus'] .theme-accordion-header:hover { - background: rgba(0, 255, 65, 0.08); - color: #00ff41; - text-shadow: 0 0 6px rgba(0, 255, 65, 0.40); -} - -[data-theme='morpheus'] .theme-accordion-open .theme-accordion-header { - background: rgba(0, 255, 65, 0.10); - color: #00ff41; -} - -[data-theme='morpheus'] .theme-accordion-open .theme-accordion-chevron { - color: #00ff41; -} - -/* ── Progress bar: terminal loading bar ── */ -[data-theme='morpheus'] .progress-bar-track { - background: #001a00; - border: 1px solid #003b00; - border-radius: 0; -} - -[data-theme='morpheus'] .progress-bar-fill { - background: #00ff41; - border-radius: 0; - box-shadow: 0 0 8px rgba(0, 255, 65, 0.60), 0 0 2px rgba(0, 255, 65, 1); -} - -/* ── Scrollbar: CRT terminal style ── */ -[data-theme='morpheus'] ::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -[data-theme='morpheus'] ::-webkit-scrollbar-track { - background: #000000; -} - -[data-theme='morpheus'] ::-webkit-scrollbar-thumb { - background: #003b00; - border: 1px solid rgba(0, 255, 65, 0.30); -} - -[data-theme='morpheus'] ::-webkit-scrollbar-thumb:hover { - background: rgba(0, 255, 65, 0.25); - box-shadow: 0 0 6px rgba(0, 255, 65, 0.40); -} - -/* ── Glass / dropdowns: black terminal window ── */ -[data-theme='morpheus'] .glass { - background: rgba(0, 8, 0, 0.97) !important; - backdrop-filter: none !important; - border: 1px solid rgba(0, 255, 65, 0.28) !important; - box-shadow: - 0 0 20px rgba(0, 255, 65, 0.08), - inset 0 0 16px rgba(0, 255, 65, 0.02) !important; - border-radius: 0 !important; -} - -[data-theme='morpheus'] .glass [style*="var(--bg-hover)"] { - background: rgba(0, 255, 65, 0.10) !important; - border-radius: 0 !important; -} - -[data-theme='morpheus'] .glass [style*="var(--text-primary)"] { - color: #00ff41 !important; -} - -[data-theme='morpheus'] .glass [style*="var(--text-secondary)"] { - color: #00cc33 !important; -} - -[data-theme='morpheus'] .glass [style*="var(--text-muted)"] { - color: #006b10 !important; -} - -/* ── Hover / selection: phosphor glow highlight ── */ -[data-theme='morpheus'] .queue-tab-btn:hover { - background: rgba(0, 255, 65, 0.08); - color: #00ff41; - text-shadow: 0 0 6px rgba(0, 255, 65, 0.40); -} - -[data-theme='morpheus'] .settings-tab:hover { - background: rgba(0, 255, 65, 0.08); - color: #00ff41; -} - -[data-theme='morpheus'] .settings-tab.active { - background: rgba(0, 255, 65, 0.12); - color: #00ff41; - box-shadow: inset 2px 0 0 #00ff41; -} - -[data-theme='morpheus'] .custom-select-trigger:hover { - background: rgba(0, 255, 65, 0.08); -} - -[data-theme='morpheus'] .custom-select-option:hover { - background: rgba(0, 255, 65, 0.12) !important; - color: #00ff41 !important; - text-shadow: 0 0 6px rgba(0, 255, 65, 0.40) !important; -} - -[data-theme='morpheus'] .artist-ext-link:hover { - background: rgba(0, 255, 65, 0.10); - color: #00ff41 !important; - border-color: #00ff41 !important; - text-shadow: 0 0 6px rgba(0, 255, 65, 0.40); -} - -[data-theme='morpheus'] .np-action-btn:hover { - background: rgba(0, 255, 65, 0.08); -} - -[data-theme='morpheus'] .np-queue-item:hover, -[data-theme='morpheus'] .np-queue-item.context-active { - background: rgba(0, 255, 65, 0.10); - box-shadow: inset 2px 0 0 #00ff41; -} - -[data-theme='morpheus'] .track-row:hover, -[data-theme='morpheus'] .track-row.context-active { - background: rgba(0, 255, 65, 0.08) !important; - box-shadow: inset 2px 0 0 #00ff41; -} - -[data-theme='morpheus'] .artist-row:hover { - background: rgba(0, 255, 65, 0.08); - box-shadow: inset 2px 0 0 #00ff41; -} - -[data-theme='morpheus'] .playlist-row:hover { - background: rgba(0, 255, 65, 0.08); - box-shadow: inset 2px 0 0 #00ff41; -} - -[data-theme='morpheus'] .queue-item:hover, -[data-theme='morpheus'] .queue-item.context-active { - background: rgba(0, 255, 65, 0.10) !important; - box-shadow: inset 2px 0 0 #00ff41; -} - -/* ── Active queue item: glowing green ── */ -[data-theme='morpheus'] .queue-item.active { - background: rgba(0, 255, 65, 0.08); - box-shadow: inset 2px 0 0 #00ff41, 0 0 8px rgba(0, 255, 65, 0.06); -} - -[data-theme='morpheus'] .np-queue-item-active { - text-shadow: 0 0 8px rgba(0, 255, 65, 0.60); -} - -[data-theme='morpheus'] .np-queue-item.active { - background: rgba(0, 255, 65, 0.08); -} - -[data-theme='morpheus'] .np-album-track.active .np-album-track-title, -[data-theme='morpheus'] .np-album-track.active .np-album-track-num { - text-shadow: 0 0 8px rgba(0, 255, 65, 0.60); -} - -/* ───────────────────────────────────────────────────────────── - Pandora — Bioluminescent Sci-Fi - ───────────────────────────────────────────────────────────── */ - -/* ───────────────────────────────────────────────────────────── - Stark HUD — Iron Man / Arc Reactor - ───────────────────────────────────────────────────────────── */ - -[data-theme='stark-hud'] { - color-scheme: dark; - - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── 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; -} - -/* ───────────────────────────────────────────────────────────── - Blade — Cinematic Industrial - ───────────────────────────────────────────────────────────── */ - -[data-theme='blade'] { - color-scheme: dark; - - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #050505; - --ctp-mantle: #0a0a0a; - --ctp-base: #121212; - --ctp-surface0: #1a1a1a; - --ctp-surface1: #252525; - --ctp-surface2: #333333; - --ctp-overlay0: #4a4a4a; - --ctp-overlay1: #707070; - --ctp-overlay2: #909090; - --ctp-text: #e0e0e0; - --ctp-subtext1: #b0b0b0; - --ctp-subtext0: #888888; - --ctp-mauve: #b30000; - --ctp-lavender: #ff1a1a; - --ctp-green: #00ff66; - --ctp-teal: #1abc9c; - --ctp-sky: #3498db; - --ctp-blue: #2980b9; - --ctp-sapphire: #1f618d; - --ctp-pink: #e91e63; - --ctp-flamingo: #f06292; - --ctp-rosewater: #f8bbd0; - --ctp-yellow: #f1c40f; - --ctp-peach: #e67e22; - --ctp-maroon: #800000; - --ctp-red: #ff0000; - - --bg-app: #121212; - --bg-sidebar: #0a0a0a; - --bg-card: #1a1a1a; - --bg-hover: rgba(179, 0, 0, 0.1); - --bg-player: #050505; - --bg-glass: rgba(10, 10, 10, 0.85); - - --accent: #b30000; - --accent-dim: rgba(179, 0, 0, 0.15); - --accent-glow: rgba(179, 0, 0, 0.4); - - --text-primary: #e0e0e0; - --text-secondary: #b0b0b0; - --text-muted: #888888; - - --border: #2a2a2a; - --border-subtle: #1a1a1a; - - --positive: #00ff66; - --warning: #f1c40f; - --danger: #ff0000; - - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 6px; -} - -[data-theme='blade'] .player-bar { - border-top: 1px solid #222; - background: linear-gradient(to bottom, #0a0a0a 0%, #050505 100%); - box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8); -} - -[data-theme='blade'] .sidebar { - border-right: 1px solid #1a1a1a; -} - -[data-theme='blade'] .nav-link.active { - background: linear-gradient(90deg, rgba(179, 0, 0, 0.2) 0%, transparent 100%); - color: #fff; -} - -[data-theme='blade'] .nav-link.active::before { - box-shadow: 0 0 8px rgba(179, 0, 0, 0.5); -} - -[data-theme='blade'] .player-track-name { - text-transform: uppercase; - letter-spacing: 1px; - font-weight: 700; - color: #fff; - text-shadow: 0 0 10px rgba(179, 0, 0, 0.3); -} - -[data-theme='blade'] .btn-primary { - background: linear-gradient(135deg, #b30000 0%, #800000 100%); - border: 1px solid rgba(255, 26, 26, 0.2); - color: #fff; -} - -/* ── T-800 — Terminator 2: Judgment Day ─────────────────────── */ -/* Endoskeleton HUD red + machine data green + industrial dark */ -[data-theme='t-800'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff2000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Industrial dark — machine oil, scorched steel, warm black */ - --ctp-crust: #080606; - --ctp-mantle: #0e0a0a; - --ctp-base: #140e0e; - --ctp-surface0: #1e1414; - --ctp-surface1: #281c1c; - --ctp-surface2: #342424; - --ctp-overlay0: #584040; - --ctp-overlay1: #806060; - --ctp-overlay2: #a88888; - --ctp-text: #e8d8c8; - /* CRT terminal warm white */ - --ctp-subtext1: #c8b8a0; - --ctp-subtext0: #a08888; - - /* T2 palette */ - --ctp-red: #ff2000; - /* T-800 eye / HUD targeting red */ - --ctp-maroon: #cc1800; - --ctp-flamingo: #ff4020; - --ctp-mauve: #ff2000; - --ctp-lavender: #ff5040; - --ctp-pink: #ff4020; - --ctp-rosewater: #ff8060; - --ctp-green: #00e040; - /* machine data readout green */ - --ctp-teal: #00b830; - --ctp-sky: #40ff80; - --ctp-yellow: #f0a000; - /* Judgment Day fire / nuclear orange */ - --ctp-peach: #ff6000; - /* napalm / explosion */ - --ctp-blue: #2040c0; - /* future war laser / Skynet */ - --ctp-sapphire: #1830a0; - - --bg-app: #140e0e; - /* scorched industrial dark */ - --bg-sidebar: #0e0a0a; - /* machine interior */ - --bg-card: #1e1414; - --bg-hover: rgba(255, 32, 0, 0.08); - --bg-player: #080606; - /* endoskeleton chassis */ - --bg-glass: rgba(14, 10, 10, 0.96); - - --accent: #ff2000; - /* T-800 eye red */ - --accent-dim: rgba(255, 32, 0, 0.12); - --accent-glow: rgba(255, 32, 0, 0.5); - --volume-accent: #00e040; - /* data-green for volume */ - - --text-primary: #e8d8c8; - /* warm terminal white */ - --text-secondary: #00e040; - /* machine data green */ - --text-muted: #584040; - --border: #2a1a1a; - --border-subtle: #1e1414; - --shadow-dropdown: rgba(0, 0, 0, 0.9); - - --positive: #00e040; - --warning: #f0a000; - --danger: #ff2000; - - --radius-sm: 0px; - --radius-md: 1px; - --radius-lg: 2px; - --radius-xl: 2px; -} - -/* Sidebar = endoskeleton interior: scan-line texture + red glow */ -[data-theme='t-800'] .sidebar { - border-right: 2px solid #ff2000; - box-shadow: 2px 0 16px rgba(255, 32, 0, 0.1); - background-image: repeating-linear-gradient(0deg, - transparent, - transparent 3px, - rgba(255, 32, 0, 0.025) 3px, - rgba(255, 32, 0, 0.025) 4px); -} - -/* Player bar = HUD targeting display */ -[data-theme='t-800'] .player-bar { - border-top: 2px solid #ff2000; - box-shadow: - 0 -1px 0 rgba(0, 224, 64, 0.2), - 0 -8px 28px rgba(255, 32, 0, 0.1); -} - -/* Track name = TARGET ACQUIRED — red HUD uppercase */ -[data-theme='t-800'] .player-track-name { - color: #ff2000; - text-shadow: 0 0 10px rgba(255, 32, 0, 0.75), 0 0 28px rgba(255, 32, 0, 0.3); - text-transform: uppercase; - font-weight: 700; - letter-spacing: 0.08em; -} - -/* Artist = machine data readout green */ -[data-theme='t-800'] .player-track-artist { - color: #00e040; -} - -/* Queue album = Judgment Day orange */ -[data-theme='t-800'] .queue-meta-album { - color: #f0a000; -} - -/* Active nav: red HUD left bar */ -[data-theme='t-800'] .nav-link.active { - background: linear-gradient(90deg, rgba(255, 32, 0, 0.15) 0%, transparent 100%); - color: #ff2000; -} - -[data-theme='t-800'] .nav-link.active::before { - width: 3px; - box-shadow: 2px 0 12px rgba(255, 32, 0, 0.65); -} - -/* Buttons: dark steel with red */ -[data-theme='t-800'] .btn-primary { - background: #ff2000; - color: #080606; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.07em; - border: none; - border-radius: 1px; -} - -[data-theme='t-800'] .btn-primary:hover { - background: #ff4020; - box-shadow: 0 0 18px rgba(255, 32, 0, 0.5); -} - -/* Play button = T-800 eye glow */ -[data-theme='t-800'] .player-btn-primary { - background: #ff2000; - box-shadow: 0 0 16px rgba(255, 32, 0, 0.5); - color: #080606; -} - -[data-theme='t-800'] .player-btn-primary:hover { - box-shadow: 0 0 26px rgba(255, 32, 0, 0.7); -} - -/* Queue active = targeting lock — red left bar */ -[data-theme='t-800'] .queue-item.active { - background: rgba(255, 32, 0, 0.08); - box-shadow: inset 3px 0 0 #ff2000; -} - -[data-theme='t-800'] .np-queue-item.active { - background: rgba(255, 32, 0, 0.07); -} - -[data-theme='t-800'] .np-queue-item-active { - color: #ff2000; - text-shadow: 0 0 8px rgba(255, 32, 0, 0.6); -} - -/* Now-playing active track = data green */ -[data-theme='t-800'] .np-album-track.active .np-album-track-title, -[data-theme='t-800'] .np-album-track.active .np-album-track-num { - color: #00e040; - text-shadow: 0 0 8px rgba(0, 224, 64, 0.5); -} - -/* Hover rows */ -[data-theme='t-800'] .track-row:hover, -[data-theme='t-800'] .track-row.context-active { - background: rgba(255, 32, 0, 0.07) !important; - box-shadow: inset 3px 0 0 #ff2000; -} - -[data-theme='t-800'] .queue-item:hover, -[data-theme='t-800'] .queue-item.context-active { - background: rgba(255, 32, 0, 0.07) !important; - box-shadow: inset 3px 0 0 #ff2000; -} - -[data-theme='t-800'] .np-queue-item:hover, -[data-theme='t-800'] .np-queue-item.context-active { - background: rgba(255, 32, 0, 0.07); - box-shadow: inset 2px 0 0 #ff2000; -} - -[data-theme='t-800'] .artist-row:hover { - background: rgba(255, 32, 0, 0.06); - box-shadow: inset 3px 0 0 #ff2000; -} - -[data-theme='t-800'] .playlist-row:hover { - background: rgba(255, 32, 0, 0.06); - box-shadow: inset 3px 0 0 #ff2000; -} - -/* Settings tabs: data-green active = SYSTEM ONLINE */ -[data-theme='t-800'] .settings-tab:hover { - background: rgba(255, 32, 0, 0.07); - color: #ff2000; -} - -[data-theme='t-800'] .settings-tab.active { - background: rgba(0, 224, 64, 0.07); - color: #00e040; - box-shadow: inset 3px 0 0 #00e040; -} - -/* Queue tabs */ -[data-theme='t-800'] .queue-tab-btn:hover { - background: rgba(255, 32, 0, 0.07); - color: #ff2000; -} - -/* Dropdowns */ -[data-theme='t-800'] .custom-select-trigger:hover { - background: rgba(255, 32, 0, 0.07); -} - -[data-theme='t-800'] .custom-select-option:hover { - background: rgba(255, 32, 0, 0.1) !important; - color: #ff2000 !important; -} - -/* Artist pills = Skynet blue */ -[data-theme='t-800'] .artist-ext-link:hover { - background: rgba(32, 64, 192, 0.15); - color: #4060e0 !important; - border-color: rgba(32, 64, 192, 0.4) !important; -} - -/* Connection indicators */ -[data-theme='t-800'] .connection-type, -[data-theme='t-800'] .connection-server { - color: #00e040; -} - -/* ─── Dune — Arrakis ─── */ -[data-theme='dune'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c8780a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette — two-temperature Arrakis ── */ - /* Warm: spice / sand / desert sun */ - --ctp-crust: #0a0804; - --ctp-mantle: #120e06; - --ctp-base: #1c1408; - --ctp-surface0: #2e1e0a; - --ctp-surface1: #3e2a0e; - --ctp-surface2: #503614; - /* Cool: sietch / rock shadow / Fremen darkness */ - --ctp-overlay0: #2a2440; - --ctp-overlay1: #4a4268; - --ctp-overlay2: #6a6090; - /* Text: aged parchment, scrolls of the Bene Gesserit */ - --ctp-text: #f0deb0; - --ctp-subtext1: #d8c090; - --ctp-subtext0: #b09060; - /* Accent palette */ - --ctp-mauve: #c8780a; - /* spice melange — cinnamon rust */ - --ctp-lavender: #e8a020; - /* spice shimmer — bright amber */ - --ctp-yellow: #f5cc50; - /* spice flare */ - --ctp-peach: #aa5a08; - /* deep spice shadow */ - --ctp-green: #7a8c40; - /* Caladan seagrass (far memory) */ - --ctp-teal: #1a80c0; - /* Fremen eye blue — spice prescience */ - --ctp-sky: #2090d0; - /* Guild Navigator blue */ - --ctp-blue: #1468a8; - /* sietch pool depth */ - --ctp-sapphire: #0e4a80; - /* deep cave water */ - --ctp-pink: #c84060; - --ctp-flamingo: #e06080; - --ctp-rosewater: #f0c0a0; - --ctp-red: #cc2800; - --ctp-maroon: #8c1c00; - - /* ── Semantic tokens ── */ - --bg-app: #1c1408; - --bg-sidebar: #0e0c1a; - /* sietch interior — cool rock */ - --bg-card: #2e1e0a; - --bg-hover: rgba(200, 120, 10, 0.14); - --bg-player: #0e0a04; - --bg-glass: rgba(10, 8, 4, 0.96); - --accent: #c8780a; - --accent-dim: rgba(200, 120, 10, 0.12); - --accent-glow: rgba(200, 120, 10, 0.40); - --volume-accent: #c8780a; - --text-primary: #f0deb0; - --text-secondary: #d8c090; - --text-muted: #a89870; - --border: rgba(200, 120, 10, 0.22); - --border-subtle: rgba(200, 120, 10, 0.10); - --positive: #7a8c40; - --warning: #f5cc50; - --danger: #cc2800; - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 6px; -} - -/* ── App shell: Arrakis desert horizon at dusk ── */ -/* Sky (cool/dark at top) fading into burning sand (warm at bottom) */ -[data-theme='dune'] .app-shell { - background: linear-gradient(180deg, - #12101c 0%, - #1a1408 30%, - #201608 60%, - #281e0a 100%); -} - -/* ── Sidebar: sietch interior — cold carved rock ── */ -/* The Fremen lived in caves cut from rock — cool, dark, shadows of blue and purple */ -[data-theme='dune'] .sidebar { - background: linear-gradient(180deg, #141228 0%, #0e0c1c 40%, #0c0a16 100%); - border-right: 1px solid rgba(200, 120, 10, 0.22); - box-shadow: - inset -3px 0 10px rgba(200, 100, 8, 0.07), - 2px 0 8px rgba(0, 0, 0, 0.50); -} - -/* Nav text: parchment on cool rock */ -[data-theme='dune'] .nav-link { - color: #b09060; -} - -[data-theme='dune'] .nav-link:hover { - background: rgba(200, 120, 10, 0.10); - color: #d8c090; -} - -[data-theme='dune'] .nav-link.active { - background: linear-gradient(90deg, rgba(200, 120, 10, 0.20) 0%, transparent 100%); - color: #e8a020; - border-left: 2px solid #c8780a; - box-shadow: inset 4px 0 14px rgba(200, 120, 10, 0.10); -} - -[data-theme='dune'] .nav-link.active::before { - background: #c8780a; - box-shadow: 0 0 10px rgba(200, 120, 10, 0.70); -} - -[data-theme='dune'] .nav-link.active svg { - color: #c8780a; -} - -[data-theme='dune'] .nav-section-label { - color: #4a4268; - letter-spacing: 0.08em; - text-transform: uppercase; - font-size: 0.70em; -} - -/* ── Player bar: spice harvester console — deep amber warmth ── */ -[data-theme='dune'] .player-bar { - background: linear-gradient(180deg, #140e04 0%, #0a0802 100%); - border-top: 2px solid rgba(200, 120, 10, 0.50); - box-shadow: - inset 0 1px 0 rgba(240, 180, 40, 0.16), - 0 -8px 40px rgba(180, 100, 8, 0.16), - 0 -2px 80px rgba(20, 100, 160, 0.04); -} - -/* Track name: the spice calls — amber prophetic glow */ -[data-theme='dune'] .player-track-name { - color: #e8a020; - text-shadow: - 0 0 8px rgba(232, 160, 32, 0.75), - 0 0 20px rgba(200, 120, 10, 0.40), - 0 0 40px rgba(200, 120, 10, 0.15); - letter-spacing: 0.04em; -} - -/* Artist: deeper spice cinnamon */ -[data-theme='dune'] .player-track-artist { - color: #aa7030; - opacity: 1; - text-shadow: 0 0 8px rgba(170, 112, 48, 0.45); -} - -[data-theme='dune'] .player-time { - color: #7a5020; -} - -/* ── Transport buttons: Fremen tech — minimal, earth-worn ── */ -[data-theme='dune'] .player-btn, -[data-theme='dune'] .player-btn-primary { - background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%); - color: #c8780a; - border: 1px solid rgba(200, 120, 10, 0.38); - border-radius: 50%; - box-shadow: inset 0 1px 0 rgba(240, 180, 40, 0.08), 0 2px 6px rgba(0, 0, 0, 0.50); -} - -[data-theme='dune'] .player-btn:hover, -[data-theme='dune'] .player-btn-primary:hover { - background: rgba(200, 120, 10, 0.14); - border-color: #c8780a; - color: #e8a020; - box-shadow: - 0 0 14px rgba(200, 120, 10, 0.42), - inset 0 0 8px rgba(200, 100, 8, 0.08); -} - -/* ── Regular buttons: desert stone / carved bone ── */ -[data-theme='dune'] .btn, -[data-theme='dune'] .btn-surface, -[data-theme='dune'] .btn-ghost { - background: linear-gradient(180deg, #2e1e0a 0%, #221608 100%); - color: #d8c090; - border: 1px solid rgba(200, 120, 10, 0.30); - box-shadow: inset 0 1px 0 rgba(240, 200, 80, 0.06), 0 1px 4px rgba(0, 0, 0, 0.40); - border-radius: 3px; -} - -[data-theme='dune'] .btn:hover, -[data-theme='dune'] .btn-surface:hover, -[data-theme='dune'] .btn-ghost:hover { - background: rgba(200, 120, 10, 0.12); - border-color: rgba(200, 120, 10, 0.65); - color: #f0deb0; - box-shadow: 0 0 10px rgba(200, 120, 10, 0.24), inset 0 0 6px rgba(200, 100, 8, 0.05); -} - -/* ── Primary button: spice melange — the most precious thing ── */ -[data-theme='dune'] .btn-primary { - background: linear-gradient(180deg, #b86808 0%, #884e04 100%); - color: #ffe8a0; - border: 1px solid #d08010; - box-shadow: 0 0 14px rgba(200, 120, 10, 0.35), inset 0 1px 0 rgba(255, 220, 80, 0.20); - border-radius: 3px; - font-weight: 600; -} - -[data-theme='dune'] .btn-primary:hover { - background: linear-gradient(180deg, #d07a10 0%, #a05e06 100%); - box-shadow: 0 0 22px rgba(200, 120, 10, 0.55), inset 0 1px 0 rgba(255, 220, 80, 0.25); -} - -/* ── Hero / album buttons ── */ -[data-theme='dune'] .hero-play-btn, -[data-theme='dune'] .album-card-details-btn { - background: rgba(200, 120, 10, 0.12); - color: #c8780a; - border: 1px solid rgba(200, 120, 10, 0.36); - box-shadow: inset 0 1px 0 rgba(240, 180, 40, 0.06); -} - -[data-theme='dune'] .hero-play-btn:hover, -[data-theme='dune'] .album-card-details-btn:hover { - background: rgba(200, 120, 10, 0.20); - border-color: #c8780a; - box-shadow: 0 0 12px rgba(200, 120, 10, 0.38); -} - -/* ── Queue round buttons ── */ -[data-theme='dune'] .queue-round-btn { - background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%); - color: #8a6030; - border: 1px solid rgba(200, 120, 10, 0.24); -} - -[data-theme='dune'] .queue-round-btn:hover:not(:disabled):not(.active) { - background: rgba(200, 120, 10, 0.10); - border-color: rgba(200, 120, 10, 0.55); - color: #c8780a; - box-shadow: 0 0 10px rgba(200, 120, 10, 0.22); -} - -[data-theme='dune'] .queue-round-btn.active { - background: rgba(200, 120, 10, 0.20); - border-color: #c8780a; - color: #e8a020; - box-shadow: 0 0 12px rgba(200, 120, 10, 0.42), inset 0 0 6px rgba(200, 100, 8, 0.08); -} - -/* ── Cards: ancient stone / sand-worn rock ── */ -[data-theme='dune'] .card { - background: linear-gradient(180deg, #2e1e0a 0%, #281808 100%); - border: 1px solid rgba(200, 120, 10, 0.16); - border-radius: 4px; - box-shadow: - inset 0 1px 0 rgba(240, 200, 80, 0.04), - inset 0 0 24px rgba(200, 100, 8, 0.03), - 0 2px 10px rgba(0, 0, 0, 0.50); -} - -/* ── Content header: sietch entrance — cool rock above warm desert ── */ -/* The contrast between the cold header and warm body is intentional — Arrakis duality */ -[data-theme='dune'] .content-header { - background: linear-gradient(180deg, #151228 0%, #12101e 100%); - border-bottom: 1px solid rgba(200, 120, 10, 0.24); - box-shadow: 0 3px 16px rgba(200, 100, 8, 0.06); -} - -/* Text on cool header: light but warm */ -[data-theme='dune'] .content-header .page-title, -[data-theme='dune'] .content-header h1, -[data-theme='dune'] .content-header h2 { - color: #d8c090; -} - -/* ── Connection indicators: parchment legible ── */ -[data-theme='dune'] .connection-type, -[data-theme='dune'] .connection-server { - color: #b09060; -} - -/* ── Theme accordion ── */ -[data-theme='dune'] .theme-accordion-header:hover { - background: rgba(200, 120, 10, 0.10); - color: #e8a020; -} - -[data-theme='dune'] .theme-accordion-open .theme-accordion-header { - background: rgba(200, 120, 10, 0.14); - color: #e8a020; -} - -[data-theme='dune'] .theme-accordion-open .theme-accordion-chevron { - color: #c8780a; -} - -/* ── Progress bar: spice flowing — from deep rust to bright amber ── */ -[data-theme='dune'] .progress-bar-track { - background: #1a1006; - border: 1px solid rgba(200, 120, 10, 0.22); - border-radius: 2px; -} - -[data-theme='dune'] .progress-bar-fill { - background: linear-gradient(90deg, - #6a3604 0%, - #a85a08 30%, - #c8780a 65%, - #e8a020 85%, - #f5cc50 100%); - border-radius: 2px; - box-shadow: 0 0 10px rgba(200, 120, 10, 0.55), 0 0 3px rgba(240, 200, 60, 0.40); -} - -/* ── Scrollbar: sand grain — thin, warm, minimal ── */ -[data-theme='dune'] ::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -[data-theme='dune'] ::-webkit-scrollbar-track { - background: #0a0804; -} - -[data-theme='dune'] ::-webkit-scrollbar-thumb { - background: rgba(200, 120, 10, 0.30); - border-radius: 2px; - border: 1px solid rgba(200, 120, 10, 0.16); -} - -[data-theme='dune'] ::-webkit-scrollbar-thumb:hover { - background: rgba(200, 120, 10, 0.55); - box-shadow: 0 0 5px rgba(200, 120, 10, 0.40); -} - -/* ── Glass / dropdowns: deep sand shelter ── */ -[data-theme='dune'] .glass { - background: rgba(10, 8, 4, 0.97) !important; - backdrop-filter: none !important; - border: 1px solid rgba(200, 120, 10, 0.30) !important; - box-shadow: - 0 0 20px rgba(180, 100, 8, 0.10), - inset 0 0 16px rgba(200, 100, 8, 0.02) !important; - border-radius: 4px !important; -} - -[data-theme='dune'] .glass [style*="var(--bg-hover)"] { - background: rgba(200, 120, 10, 0.12) !important; - border-radius: 2px !important; -} - -[data-theme='dune'] .glass [style*="var(--text-primary)"] { - color: #f0deb0 !important; -} - -[data-theme='dune'] .glass [style*="var(--text-secondary)"] { - color: #d8c090 !important; -} - -[data-theme='dune'] .glass [style*="var(--text-muted)"] { - color: #6a5830 !important; -} - -/* ── Hover / selection: spice glow — warm amber indicator bar ── */ -[data-theme='dune'] .queue-tab-btn:hover { - background: rgba(200, 120, 10, 0.10); - color: #c8780a; -} - -[data-theme='dune'] .settings-tab:hover { - background: rgba(200, 120, 10, 0.10); - color: #c8780a; -} - -[data-theme='dune'] .settings-tab.active { - background: rgba(200, 120, 10, 0.16); - color: #e8a020; - box-shadow: inset 2px 0 0 #c8780a; -} - -[data-theme='dune'] .custom-select-trigger:hover { - background: rgba(200, 120, 10, 0.10); -} - -[data-theme='dune'] .custom-select-option:hover { - background: rgba(200, 120, 10, 0.14) !important; - color: #e8a020 !important; -} - -[data-theme='dune'] .artist-ext-link:hover { - background: rgba(200, 120, 10, 0.10); - color: #c8780a !important; - border-color: rgba(200, 120, 10, 0.45) !important; -} - -[data-theme='dune'] .np-action-btn:hover { - background: rgba(200, 120, 10, 0.10); -} - -[data-theme='dune'] .np-queue-item:hover, -[data-theme='dune'] .np-queue-item.context-active { - background: rgba(200, 120, 10, 0.12); - box-shadow: inset 2px 0 0 #c8780a; -} - -[data-theme='dune'] .track-row:hover, -[data-theme='dune'] .track-row.context-active { - background: rgba(200, 120, 10, 0.09) !important; - box-shadow: inset 2px 0 0 #c8780a; -} - -[data-theme='dune'] .artist-row:hover { - background: rgba(200, 120, 10, 0.09); - box-shadow: inset 2px 0 0 #c8780a; -} - -[data-theme='dune'] .playlist-row:hover { - background: rgba(200, 120, 10, 0.09); - box-shadow: inset 2px 0 0 #c8780a; -} - -[data-theme='dune'] .queue-item:hover, -[data-theme='dune'] .queue-item.context-active { - background: rgba(200, 120, 10, 0.10) !important; - box-shadow: inset 2px 0 0 #c8780a; -} - -[data-theme='dune'] .queue-item:hover .queue-item-title, -[data-theme='dune'] .queue-item:hover .queue-item-artist, -[data-theme='dune'] .queue-item:hover .queue-item-duration, -[data-theme='dune'] .queue-item.context-active .queue-item-title, -[data-theme='dune'] .queue-item.context-active .queue-item-artist, -[data-theme='dune'] .queue-item.context-active .queue-item-duration { - color: #c8780a; -} - -/* ── Active queue / now-playing: the worm has come ── */ -[data-theme='dune'] .queue-item.active { - background: rgba(200, 120, 10, 0.08); - box-shadow: inset 2px 0 0 #c8780a; -} - -[data-theme='dune'] .np-queue-item-active { - color: #c8780a; - text-shadow: 0 0 8px rgba(200, 120, 10, 0.55); -} - -[data-theme='dune'] .np-queue-item.active { - background: rgba(200, 120, 10, 0.08); -} - -[data-theme='dune'] .np-album-track.active .np-album-track-title, -[data-theme='dune'] .np-album-track.active .np-album-track-num { - color: #c8780a; - text-shadow: 0 0 8px rgba(200, 120, 10, 0.50); -} - -/* ── TetraStack (Games) — 7-tetromino NES Tetris ─────────────── */ -/* I=cyan O=yellow T=purple S=green Z=red J=blue L=orange */ -[data-theme='tetrastack'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f0f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Dark navy — NES Tetris backdrop, not pure black */ - --ctp-crust: #000008; - --ctp-mantle: #00000e; - --ctp-base: #060614; - --ctp-surface0: #0d0d22; - --ctp-surface1: #141432; - --ctp-surface2: #1e1e48; - --ctp-overlay0: #3a3a6a; - --ctp-overlay1: #6060a8; - --ctp-overlay2: #9090cc; - --ctp-text: #ffffff; - --ctp-subtext1: #d0d0ff; - --ctp-subtext0: #9090cc; - - /* 7 Tetromino colours mapped to palette slots */ - --ctp-sky: #00f0f0; - /* I-piece — cyan */ - --ctp-teal: #00f0f0; - --ctp-yellow: #f0d000; - /* O-piece — yellow */ - --ctp-mauve: #c070ff; - /* T-piece — purple */ - --ctp-lavender: #c070ff; - --ctp-pink: #c070ff; - --ctp-green: #00d000; - /* S-piece — green */ - --ctp-red: #f02000; - /* Z-piece — red */ - --ctp-flamingo: #f02000; - --ctp-maroon: #f02000; - --ctp-blue: #4090ff; - /* J-piece — blue */ - --ctp-sapphire: #4090ff; - --ctp-peach: #f07800; - /* L-piece — orange */ - --ctp-rosewater: #f07800; - - --bg-app: #060614; - --bg-sidebar: #00000e; - --bg-card: #0d0d22; - --bg-hover: rgba(0, 240, 240, 0.07); - --bg-player: #000008; - --bg-glass: rgba(6, 6, 20, 0.96); - - --accent: #00f0f0; - /* I-piece cyan */ - --accent-dim: rgba(0, 240, 240, 0.12); - --accent-glow: rgba(0, 240, 240, 0.5); - --volume-accent: #f0d000; - /* O-piece yellow — classic score-panel feel */ - - --text-primary: #ffffff; - --text-secondary: #f0d000; - /* O-piece yellow — like the score readout */ - --text-muted: #7878b8; - --border: #1e1e48; - --border-subtle: #0d0d22; - - /* All corners square — every element is a block */ - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 0px; - --radius-xl: 0px; -} - -/* 30 px grid — Tetris block scale */ -[data-theme='tetrastack'] .app-shell { - background-image: - linear-gradient(rgba(0, 240, 240, 0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(0, 240, 240, 0.04) 1px, transparent 1px); - background-size: 30px 30px; -} - -/* Sidebar = the score/next-piece panel */ -[data-theme='tetrastack'] .sidebar { - border-right: 3px solid #00f0f0; -} - -/* Player bar = bottom of the well */ -[data-theme='tetrastack'] .player-bar { - border-top: 3px solid #00f0f0; - box-shadow: - 0 -2px 0 #c070ff, - 0 -8px 24px rgba(0, 240, 240, 0.12); -} - -/* NES block shading on cards — lighter top-left, darker bottom-right */ -[data-theme='tetrastack'] .card, -[data-theme='tetrastack'] .glass, -[data-theme='tetrastack'] .settings-card { - border: 1px solid #1e1e48 !important; - border-radius: 0 !important; - box-shadow: - inset -3px -3px 0 rgba(0, 0, 0, 0.55), - inset 3px 3px 0 rgba(255, 255, 255, 0.05) !important; -} - -/* Buttons: block-shaped, NES-style press effect */ -[data-theme='tetrastack'] .btn-primary { - background: #00f0f0; - color: #000000; - border: none; - border-radius: 0; - box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.5), inset 3px 3px 0 rgba(255, 255, 255, 0.35); - text-transform: uppercase; - font-weight: 800; - letter-spacing: 0.08em; -} - -[data-theme='tetrastack'] .btn-primary:hover { - background: #30ffff; - box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.4), inset 3px 3px 0 rgba(255, 255, 255, 0.45); -} - -[data-theme='tetrastack'] .btn-surface { - border-radius: 0; - box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 0 rgba(255, 255, 255, 0.06); -} - -/* Track name = I-piece glow */ -[data-theme='tetrastack'] .player-track-name { - color: #00f0f0; - text-shadow: 0 0 8px rgba(0, 240, 240, 0.7), 0 0 20px rgba(0, 240, 240, 0.3); - text-transform: uppercase; - letter-spacing: 0.04em; -} - -/* Artist name = L-piece orange */ -[data-theme='tetrastack'] .player-track-artist { - color: #f07800; -} - -/* Album title in queue = T-piece purple */ -[data-theme='tetrastack'] .queue-meta-album { - color: #c070ff; -} - -/* Active queue item = I-piece left border */ -[data-theme='tetrastack'] .queue-item.active { - background: rgba(0, 240, 240, 0.07); - box-shadow: inset 3px 0 0 #00f0f0; -} - -[data-theme='tetrastack'] .np-queue-item-active { - color: #00f0f0; - text-shadow: 0 0 8px rgba(0, 240, 240, 0.6); -} - -[data-theme='tetrastack'] .np-queue-item.active { - background: rgba(0, 240, 240, 0.07); -} - -/* Hover rows: subtle block highlight */ -[data-theme='tetrastack'] .track-row:hover, -[data-theme='tetrastack'] .track-row.context-active { - background: rgba(0, 240, 240, 0.06) !important; - box-shadow: inset 3px 0 0 #00f0f0; -} - -[data-theme='tetrastack'] .queue-item:hover, -[data-theme='tetrastack'] .queue-item.context-active { - background: rgba(0, 240, 240, 0.07) !important; - box-shadow: inset 3px 0 0 #00f0f0; -} - -[data-theme='tetrastack'] .np-queue-item:hover, -[data-theme='tetrastack'] .np-queue-item.context-active { - background: rgba(0, 240, 240, 0.07); - box-shadow: inset 2px 0 0 #00f0f0; -} - -[data-theme='tetrastack'] .artist-row:hover { - background: rgba(0, 240, 240, 0.06); - box-shadow: inset 3px 0 0 #00f0f0; -} - -[data-theme='tetrastack'] .playlist-row:hover { - background: rgba(0, 240, 240, 0.06); - box-shadow: inset 3px 0 0 #00f0f0; -} - -/* Settings tabs: active = S-piece green left border */ -[data-theme='tetrastack'] .settings-tab:hover { - background: rgba(0, 240, 240, 0.06); - color: #00f0f0; -} - -[data-theme='tetrastack'] .settings-tab.active { - background: rgba(0, 208, 0, 0.08); - color: #00d000; - box-shadow: inset 3px 0 0 #00d000; -} - -/* Queue tabs */ -[data-theme='tetrastack'] .queue-tab-btn:hover { - background: rgba(0, 240, 240, 0.06); - color: #00f0f0; -} - -/* Dropdowns / selects */ -[data-theme='tetrastack'] .custom-select-trigger:hover { - background: rgba(0, 240, 240, 0.06); -} - -[data-theme='tetrastack'] .custom-select-option:hover { - background: rgba(0, 240, 240, 0.1) !important; - color: #00f0f0 !important; -} - -/* Artist pill links = J-piece blue */ -[data-theme='tetrastack'] .artist-ext-link:hover { - background: rgba(0, 96, 240, 0.1); - color: #4090ff !important; - border-color: rgba(64, 144, 255, 0.4) !important; -} - -/* Now playing active track = Z-piece red accent */ -[data-theme='tetrastack'] .np-album-track.active .np-album-track-title, -[data-theme='tetrastack'] .np-album-track.active .np-album-track-num { - color: #f02000; - text-shadow: 0 0 8px rgba(240, 32, 0, 0.5); -} - -/* Connection indicators */ -[data-theme='tetrastack'] .connection-type, -[data-theme='tetrastack'] .connection-server { - color: #f0d000; -} - -/* Sidebar section labels */ -[data-theme='tetrastack'] .nav-section-label { - color: rgba(0, 240, 240, 0.45); -} - -/* Queue tab buttons (Lyrics / Warteschlange) — inactive */ -[data-theme='tetrastack'] .queue-tab-btn { - color: #6060a8; -} - -/* Queue: inactive song artist */ -[data-theme='tetrastack'] .queue-item-artist { - color: #6060a8; -} - -/* Queue: "Nächste Titel" divider */ -[data-theme='tetrastack'] .queue-divider span { - color: #6060a8 !important; -} - -/* ── The Book (Social Media) ────────────────────────────────── */ -[data-theme='the-book'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2365676B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #FFFFFF; - --ctp-mantle: #FFFFFF; - --ctp-base: #F0F2F5; - --ctp-surface0: #E4E6EB; - --ctp-surface1: #D8DADF; - --ctp-surface2: #CED0D4; - --ctp-overlay0: #B0B3B8; - --ctp-overlay1: #4B4C4F; - --ctp-overlay2: #3A3B3D; - --ctp-text: #050505; - --ctp-subtext1: #44464A; - --ctp-subtext0: #65676B; - - --ctp-mauve: #1877F2; - --ctp-lavender: #2D88FF; - --ctp-green: #42B72A; - --ctp-yellow: #F7B125; - --ctp-red: #FA383E; - --ctp-blue: #1877F2; - --ctp-teal: #00A400; - --ctp-sky: #45BD62; - --ctp-sapphire: #0064D1; - --ctp-pink: #F33E58; - --ctp-flamingo: #F33E58; - --ctp-rosewater: #F0F2F5; - --ctp-maroon: #B12425; - --ctp-peach: #F7B125; - - --bg-app: #F0F2F5; - --bg-sidebar: #1877F2; - --bg-card: #FFFFFF; - --bg-hover: #F2F2F2; - --bg-player: #FFFFFF; - --bg-glass: rgba(255, 255, 255, 0.9); - - --accent: #1877F2; - --accent-dim: rgba(24, 119, 242, 0.1); - --accent-glow: rgba(24, 119, 242, 0.2); - --volume-accent: #1877F2; - - --text-primary: #050505; - --text-secondary: #44464A; - --text-muted: #65676B; - --border: #CED0D4; - --border-subtle: #E4E6EB; - - --positive: #42B72A; - --warning: #F7B125; - --danger: #FA383E; - - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - - --shadow-dropdown: 0 12px 28px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1); -} - -[data-theme='the-book'] .player-bar { - border-top: 1px solid var(--border-subtle); - box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03); -} - -[data-theme='the-book'] .sidebar { - border-right: none; -} - -[data-theme='the-book'] .sidebar .nav-link { - color: rgba(255, 255, 255, 0.85); -} - -[data-theme='the-book'] .sidebar .nav-link:hover { - background: rgba(255, 255, 255, 0.15); - color: #ffffff; -} - -[data-theme='the-book'] .sidebar .nav-link.active { - background: rgba(255, 255, 255, 0.2); - color: #ffffff; - font-weight: 600; -} - -[data-theme='the-book'] .sidebar .nav-section-label { - color: rgba(255, 255, 255, 0.55); -} - -[data-theme='the-book'] .sidebar-brand .brand-name { - -webkit-text-fill-color: #ffffff; - color: #ffffff; -} - -[data-theme='the-book'] .sidebar { - --accent: #ffffff; - --ctp-blue: #ffffff; -} - -/* Queue panel — white text on blue background */ -[data-theme='the-book'] .queue-item-title { - color: rgba(255, 255, 255, 0.9); -} - -[data-theme='the-book'] .queue-item-artist, -[data-theme='the-book'] .queue-item-duration { - color: rgba(255, 255, 255, 0.55); -} - -[data-theme='the-book'] .queue-item:hover .queue-item-title, -[data-theme='the-book'] .queue-item.context-active .queue-item-title { - color: #ffffff; -} - -[data-theme='the-book'] .queue-item.active .queue-item-title { - color: #ffffff; -} - -[data-theme='the-book'] .queue-item.active .queue-item-artist, -[data-theme='the-book'] .queue-item.active .queue-item-duration { - color: rgba(255, 255, 255, 0.7); -} - -[data-theme='the-book'] .queue-item:hover, -[data-theme='the-book'] .queue-item.context-active { - background: rgba(255, 255, 255, 0.1); -} - -[data-theme='the-book'] .queue-header, -[data-theme='the-book'] .queue-header h2 { - color: var(--text-primary); -} - -[data-theme='the-book'] .queue-current-info h3 { - color: rgba(255, 255, 255, 0.9); -} - -[data-theme='the-book'] .queue-current-sub { - color: rgba(255, 255, 255, 0.65); -} - -[data-theme='the-book'] .collapse-btn { - background: rgba(255, 255, 255, 0.15); - border-color: rgba(255, 255, 255, 0.3); - color: #ffffff; -} - -[data-theme='the-book'] .player-track-name, -[data-theme='the-book'] .player-track-artist, -[data-theme='the-book'] .player-time { - color: var(--text-primary) !important; -} - - -[data-theme='the-book'] .card { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); - border: 1px solid var(--border-subtle); -} - -/* Album chip — opaque Facebook blue pill */ -[data-theme='the-book'] .badge, -[data-theme='the-book'] .album-detail-badge { - background: #1877F2; - color: #ffffff; -} - -/* Back button — opaque Facebook-style pill */ -[data-theme='the-book'] .album-detail-back { - background: #E7F3FF; - color: #1877F2; -} -[data-theme='the-book'] .album-detail-back:hover { - background: #D8EAFD; - color: #0d6ae0; -} - -/* Queue/Lyrics tab bar — white text on blue sidebar */ -[data-theme='the-book'] .queue-tab-btn { - color: rgba(255, 255, 255, 0.65); -} -[data-theme='the-book'] .queue-tab-btn:hover { - color: #ffffff; - background: rgba(255, 255, 255, 0.1); -} -[data-theme='the-book'] .queue-tab-btn.active { - color: #ffffff; -} - -/* ── ReadIt (Social Media) ──────────────────────────────────── */ -[data-theme='readit'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF4500%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #030303; - --ctp-mantle: #1A1A1B; - --ctp-base: #030303; - --ctp-surface0: #1A1A1B; - --ctp-surface1: #272729; - --ctp-surface2: #343536; - --ctp-overlay0: #818384; - --ctp-overlay1: #D7DADC; - --ctp-overlay2: #FFFFFF; - --ctp-text: #D7DADC; - --ctp-subtext1: #D7DADC; - --ctp-subtext0: #818384; - - --ctp-mauve: #FF4500; - --ctp-lavender: #FF581A; - --ctp-green: #46D160; - --ctp-yellow: #FFD635; - --ctp-red: #FF4500; - --ctp-blue: #0079D3; - --ctp-teal: #00AD96; - --ctp-sky: #7193FF; - --ctp-sapphire: #3E5EB3; - --ctp-pink: #FF66AC; - --ctp-flamingo: #FF8280; - --ctp-rosewater: #FFB3A6; - --ctp-maroon: #EA0027; - --ctp-peach: #FFB000; - - --bg-app: #030303; - --bg-sidebar: #1A1A1B; - --bg-card: #1A1A1B; - --bg-hover: #272729; - --bg-player: #1A1A1B; - --bg-glass: rgba(26, 26, 27, 0.9); - - --accent: #FF4500; - --accent-dim: rgba(255, 69, 0, 0.1); - --accent-glow: rgba(255, 69, 0, 0.3); - --volume-accent: #FF4500; - - --text-primary: #D7DADC; - --text-secondary: #D7DADC; - --text-muted: #818384; - --border: #343536; - --border-subtle: #272729; - - --radius-sm: 4px; - --radius-md: 4px; - --radius-lg: 8px; - --radius-xl: 12px; -} - -[data-theme='readit'] .player-bar { - border-top: 1px solid var(--border); - background: var(--bg-sidebar); -} - -[data-theme='readit'] .sidebar { - border-right: 1px solid var(--border); -} - -[data-theme='readit'] .nav-link.active { - background: transparent; - color: var(--accent); -} - -[data-theme='readit'] .nav-link.active::before { - background: var(--accent) !important; - width: 2px; - border-radius: 0 2px 2px 0; -} - -[data-theme='readit'] .btn-primary { - background: var(--accent); - color: white; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.5px; - font-size: 11px; -} - -[data-theme='readit'] .btn-primary:hover { - background: var(--ctp-lavender); -} - -[data-theme='readit'] .card { - border: 1px solid var(--border); -} - -[data-theme='readit'] .queue-item.active { - border-left: 2px solid var(--accent); - background: var(--accent-dim); -} - -/* ── Insta (Social Media) ───────────────────────────────────── */ -[data-theme='insta'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #000000; - --ctp-mantle: #000000; - --ctp-base: #121212; - --ctp-surface0: #1A1A1A; - --ctp-surface1: #262626; - --ctp-surface2: #363636; - --ctp-overlay0: #737373; - --ctp-overlay1: #A8A8A8; - --ctp-overlay2: #C7C7C7; - --ctp-text: #F5F5F5; - --ctp-subtext1: #DBDBDB; - --ctp-subtext0: #8E8E8E; - - --ctp-mauve: #E1306C; - --ctp-lavender: #C13584; - --ctp-green: #0095F6; - --ctp-yellow: #FFD600; - --ctp-red: #ED4956; - --ctp-peach: #F56040; - --ctp-flamingo: #FD1D1D; - --ctp-blue: #0095F6; - --ctp-teal: #0095F6; - --ctp-sky: #C13584; - --ctp-sapphire: #833ab4; - --ctp-pink: #E1306C; - --ctp-rosewater: #fcb045; - --ctp-maroon: #ED4956; - - --bg-app: #121212; - --bg-sidebar: #000000; - --bg-card: #1A1A1A; - --bg-hover: #262626; - --bg-player: #000000; - --bg-glass: rgba(0, 0, 0, 0.85); - - --accent: #E1306C; - --accent-dim: rgba(225, 48, 108, 0.15); - --accent-glow: rgba(225, 48, 108, 0.35); - --volume-accent: #E1306C; - - --text-primary: #F5F5F5; - --text-secondary: #A8A8A8; - --text-muted: #737373; - --border: #262626; - --border-subtle: #1A1A1A; - - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 22px; -} - -[data-theme='insta'] .progress-bar-fill { - background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; -} - -[data-theme='insta'] .nav-link.active::before { - background: linear-gradient(to bottom, #833ab4, #fd1d1d, #fcb045) !important; - width: 3px; -} - -[data-theme='insta'] .player-bar { - border-top: 1px solid var(--border); -} - -[data-theme='insta'] .btn-primary:hover { - background: linear-gradient(45deg, #f09433, #dc2743, #bc1888) !important; - border-color: transparent; -} - -[data-theme='insta'] .sidebar { - border-right: 1px solid var(--border); -} - -/* ── Hill Valley 85 (Movies) ────────────────────────────────── */ -/* ─── Back to the Future — Hill Valley '85 ─── */ -[data-theme='hill-valley-85'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ff8c00%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #020106; - --ctp-mantle: #07060f; - --ctp-base: #0d0b18; - --ctp-surface0: #151220; - --ctp-surface1: #1e1a2c; - --ctp-surface2: #272338; - --ctp-overlay0: #3d3455; - --ctp-overlay1: #5a4e70; - --ctp-overlay2: #7a6e90; - --ctp-text: #ede0c8; - --ctp-subtext1: #c8b898; - --ctp-subtext0: #a09070; - /* BTTF palette: flame orange, DeLorean red, lightning blue, flux yellow */ - --ctp-mauve: #ff8c00; - --ctp-lavender: #ffaa33; - --ctp-red: #ff2200; - --ctp-blue: #3d88ff; - --ctp-sapphire: #1a5ccc; - --ctp-sky: #66aaff; - --ctp-teal: #00ccff; - --ctp-green: #44dd00; - --ctp-yellow: #ffe033; - --ctp-peach: #ff6600; - --ctp-pink: #ff44aa; - --ctp-flamingo: #ff2266; - --ctp-rosewater: #ffd0b0; - --ctp-maroon: #cc1100; - - /* ── Semantic tokens ── */ - --bg-app: #0d0b18; - --bg-sidebar: #08060f; - --bg-card: #141120; - --bg-hover: rgba(255, 140, 0, 0.12); - --bg-player: #040209; - --bg-glass: rgba(6, 4, 12, 0.96); - --accent: #ff8c00; - --accent-dim: rgba(255, 140, 0, 0.12); - --accent-glow: rgba(255, 140, 0, 0.40); - --volume-accent: #ff8c00; - --text-primary: #ede0c8; - --text-secondary: #c8b898; - --text-muted: #b0a0c8; - --border: rgba(255, 140, 0, 0.20); - --border-subtle: rgba(255, 140, 0, 0.10); - --positive: #44dd00; - --warning: #ffe033; - --danger: #ff2200; - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 6px; -} - -/* ── App shell: Hill Valley night sky — orange fire & blue lightning ── */ -[data-theme='hill-valley-85'] .app-shell { - background: - radial-gradient(ellipse at 15% 80%, rgba(255, 110, 0, 0.07) 0%, transparent 55%), - radial-gradient(ellipse at 85% 15%, rgba(60, 130, 255, 0.06) 0%, transparent 50%), - #0d0b18; -} - -/* ── Sidebar: DeLorean stainless steel panels ── */ -[data-theme='hill-valley-85'] .sidebar { - background-color: #08060f; - background-image: repeating-linear-gradient(90deg, - rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, - transparent 1px, transparent 10px); - border-right: 1px solid rgba(255, 140, 0, 0.22); - box-shadow: inset -2px 0 8px rgba(255, 100, 0, 0.05), 2px 0 6px rgba(0, 0, 0, 0.40); -} - -/* Nav links */ -[data-theme='hill-valley-85'] .nav-link { - color: #c8b898; -} - -[data-theme='hill-valley-85'] .nav-link:hover { - background: rgba(255, 140, 0, 0.10); - color: #ede0c8; -} - -[data-theme='hill-valley-85'] .nav-link.active { - background: linear-gradient(90deg, rgba(255, 140, 0, 0.18) 0%, transparent 100%); - color: #ff8c00; - border-left: 2px solid #ff8c00; - box-shadow: inset 4px 0 12px rgba(255, 140, 0, 0.10); -} - -[data-theme='hill-valley-85'] .nav-link.active::before { - background: #ff8c00; - box-shadow: 0 0 8px rgba(255, 140, 0, 0.70); -} - -[data-theme='hill-valley-85'] .nav-link.active svg { - color: #ff8c00; -} - -/* ── Player bar: DeLorean time circuit console ── */ -[data-theme='hill-valley-85'] .player-bar { - background: linear-gradient(180deg, #060410 0%, #030208 100%); - border-top: 2px solid rgba(255, 140, 0, 0.45); - box-shadow: - inset 0 1px 0 rgba(255, 140, 0, 0.18), - 0 -6px 30px rgba(255, 100, 0, 0.12), - 0 -2px 60px rgba(60, 130, 255, 0.04); -} - -/* Track name: DeLorean time circuit red LED display */ -[data-theme='hill-valley-85'] .player-track-name { - color: #ff2200; - font-family: 'Courier New', 'Courier', monospace; - text-shadow: - 0 0 8px rgba(255, 34, 0, 0.90), - 0 0 18px rgba(255, 34, 0, 0.50), - 0 0 30px rgba(255, 34, 0, 0.20); - letter-spacing: 1.5px; - text-transform: uppercase; - font-weight: 700; -} - -/* Artist name: amber LED — second row of the time display */ -[data-theme='hill-valley-85'] .player-track-artist { - color: #ff8c00; - font-family: 'Courier New', monospace; - text-shadow: 0 0 8px rgba(255, 140, 0, 0.65); - letter-spacing: 0.5px; - opacity: 1; -} - -/* Time readout: amber LCD */ -[data-theme='hill-valley-85'] .player-time { - color: #cc6a00; - font-family: 'Courier New', monospace; - text-shadow: 0 0 6px rgba(255, 140, 0, 0.40); -} - -/* ── Transport buttons: illuminated 80s switches ── */ -[data-theme='hill-valley-85'] .player-btn, -[data-theme='hill-valley-85'] .player-btn-primary { - background: linear-gradient(180deg, #100d1c 0%, #0a0815 100%); - color: #ff8c00; - border: 1px solid rgba(255, 140, 0, 0.35); - border-radius: 50%; - box-shadow: inset 0 0 6px rgba(255, 100, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.50); -} - -[data-theme='hill-valley-85'] .player-btn:hover, -[data-theme='hill-valley-85'] .player-btn-primary:hover { - background: rgba(255, 140, 0, 0.12); - border-color: #ff8c00; - color: #ffaa33; - box-shadow: - 0 0 14px rgba(255, 140, 0, 0.40), - inset 0 0 8px rgba(255, 100, 0, 0.08); -} - -/* ── Regular buttons: DeLorean console switches ── */ -[data-theme='hill-valley-85'] .btn, -[data-theme='hill-valley-85'] .btn-surface, -[data-theme='hill-valley-85'] .btn-ghost { - background: linear-gradient(180deg, #141120 0%, #0e0c1a 100%); - color: #c8b898; - border: 1px solid rgba(255, 140, 0, 0.28); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 3px rgba(0, 0, 0, 0.40); - border-radius: 4px; -} - -[data-theme='hill-valley-85'] .btn:hover, -[data-theme='hill-valley-85'] .btn-surface:hover, -[data-theme='hill-valley-85'] .btn-ghost:hover { - background: rgba(255, 140, 0, 0.10); - border-color: rgba(255, 140, 0, 0.60); - color: #ede0c8; - box-shadow: 0 0 10px rgba(255, 140, 0, 0.22), inset 0 0 6px rgba(255, 100, 0, 0.05); -} - -/* ── Primary button: fire orange ── */ -[data-theme='hill-valley-85'] .btn-primary { - background: linear-gradient(180deg, #cc5500 0%, #993d00 100%); - color: #ffffff; - border: 1px solid #ff6600; - box-shadow: 0 0 12px rgba(255, 140, 0, 0.30), inset 0 1px 0 rgba(255, 180, 0, 0.25); - border-radius: 4px; -} - -[data-theme='hill-valley-85'] .btn-primary:hover { - background: linear-gradient(180deg, #e86000 0%, #b04800 100%); - box-shadow: 0 0 18px rgba(255, 140, 0, 0.50), inset 0 1px 0 rgba(255, 200, 0, 0.25); -} - -/* ── Hero / album-card buttons ── */ -[data-theme='hill-valley-85'] .hero-play-btn, -[data-theme='hill-valley-85'] .album-card-details-btn { - background: rgba(255, 140, 0, 0.10); - color: #ff8c00; - border: 1px solid rgba(255, 140, 0, 0.35); - box-shadow: inset 0 1px 0 rgba(255, 180, 0, 0.08); -} - -[data-theme='hill-valley-85'] .hero-play-btn:hover, -[data-theme='hill-valley-85'] .album-card-details-btn:hover { - background: rgba(255, 140, 0, 0.18); - border-color: #ff8c00; - box-shadow: 0 0 12px rgba(255, 140, 0, 0.35); -} - -/* ── Queue toolbar round buttons ── */ -[data-theme='hill-valley-85'] .queue-round-btn { - background: linear-gradient(180deg, #141120 0%, #0e0c1a 100%); - color: #a09070; - border: 1px solid rgba(255, 140, 0, 0.22); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); -} - -[data-theme='hill-valley-85'] .queue-round-btn:hover:not(:disabled):not(.active) { - background: rgba(255, 140, 0, 0.10); - border-color: rgba(255, 140, 0, 0.55); - color: #ff8c00; - box-shadow: 0 0 10px rgba(255, 140, 0, 0.22); -} - -[data-theme='hill-valley-85'] .queue-round-btn.active { - background: rgba(255, 140, 0, 0.18); - border-color: #ff8c00; - color: #ff8c00; - box-shadow: 0 0 12px rgba(255, 140, 0, 0.40), inset 0 0 6px rgba(255, 100, 0, 0.08); -} - -/* ── Cards: dark interior panels ── */ -[data-theme='hill-valley-85'] .card { - background: #141120; - border: 1px solid rgba(255, 140, 0, 0.14); - box-shadow: inset 0 0 20px rgba(255, 100, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.40); -} - -/* ── Content header: console panel strip ── */ -[data-theme='hill-valley-85'] .content-header { - background: linear-gradient(180deg, #100d1c 0%, #0d0b18 100%); - border-bottom: 1px solid rgba(255, 140, 0, 0.22); - box-shadow: 0 2px 12px rgba(255, 100, 0, 0.05); -} - -/* ── Theme accordion ── */ -[data-theme='hill-valley-85'] .theme-accordion-header:hover { - background: rgba(255, 140, 0, 0.10); - color: #ff8c00; -} - -[data-theme='hill-valley-85'] .theme-accordion-open .theme-accordion-header { - background: rgba(255, 140, 0, 0.12); - color: #ff8c00; -} - -[data-theme='hill-valley-85'] .theme-accordion-open .theme-accordion-chevron { - color: #ff8c00; -} - -/* ── Progress bar: speedometer reaching 88 mph ── */ -[data-theme='hill-valley-85'] .progress-bar-track { - background: #0a0815; - border: 1px solid rgba(255, 140, 0, 0.20); - border-radius: 2px; -} - -[data-theme='hill-valley-85'] .progress-bar-fill { - background: linear-gradient(90deg, #993d00 0%, #cc5500 40%, #ff8c00 80%, #ffaa33 100%); - border-radius: 2px; - box-shadow: 0 0 10px rgba(255, 140, 0, 0.55), 0 0 3px rgba(255, 200, 0, 0.40); -} - -/* ── Scrollbar: fire trail minimal ── */ -[data-theme='hill-valley-85'] ::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -[data-theme='hill-valley-85'] ::-webkit-scrollbar-track { - background: #07060e; -} - -[data-theme='hill-valley-85'] ::-webkit-scrollbar-thumb { - background: rgba(255, 140, 0, 0.28); - border: 1px solid rgba(255, 140, 0, 0.18); - border-radius: 3px; -} - -[data-theme='hill-valley-85'] ::-webkit-scrollbar-thumb:hover { - background: rgba(255, 140, 0, 0.55); - box-shadow: 0 0 6px rgba(255, 140, 0, 0.40); -} - -/* ── Glass / dropdowns: dark DeLorean interior ── */ -[data-theme='hill-valley-85'] .glass { - background: rgba(6, 4, 12, 0.97) !important; - backdrop-filter: none !important; - border: 1px solid rgba(255, 140, 0, 0.28) !important; - box-shadow: - 0 0 20px rgba(255, 100, 0, 0.08), - inset 0 0 16px rgba(255, 100, 0, 0.02) !important; - border-radius: 4px !important; -} - -[data-theme='hill-valley-85'] .glass [style*="var(--bg-hover)"] { - background: rgba(255, 140, 0, 0.10) !important; - border-radius: 2px !important; -} - -[data-theme='hill-valley-85'] .glass [style*="var(--text-primary)"] { - color: #ede0c8 !important; -} - -[data-theme='hill-valley-85'] .glass [style*="var(--text-secondary)"] { - color: #c8b898 !important; -} - -[data-theme='hill-valley-85'] .glass [style*="var(--text-muted)"] { - color: #5a4e70 !important; -} - -/* ── Hover / selection: fire orange glow ── */ -[data-theme='hill-valley-85'] .queue-tab-btn:hover { - background: rgba(255, 140, 0, 0.10); - color: #ff8c00; -} - -[data-theme='hill-valley-85'] .settings-tab:hover { - background: rgba(255, 140, 0, 0.10); - color: #ff8c00; -} - -[data-theme='hill-valley-85'] .settings-tab.active { - background: rgba(255, 140, 0, 0.15); - color: #ff8c00; - box-shadow: inset 2px 0 0 #ff8c00; -} - -[data-theme='hill-valley-85'] .custom-select-trigger:hover { - background: rgba(255, 140, 0, 0.10); -} - -[data-theme='hill-valley-85'] .custom-select-option:hover { - background: rgba(255, 140, 0, 0.14) !important; - color: #ffaa33 !important; -} - -[data-theme='hill-valley-85'] .artist-ext-link:hover { - background: rgba(255, 140, 0, 0.10); - color: #ff8c00 !important; - border-color: rgba(255, 140, 0, 0.50) !important; -} - -[data-theme='hill-valley-85'] .np-action-btn:hover { - background: rgba(255, 140, 0, 0.10); -} - -[data-theme='hill-valley-85'] .np-queue-item:hover, -[data-theme='hill-valley-85'] .np-queue-item.context-active { - background: rgba(255, 140, 0, 0.12); - box-shadow: inset 2px 0 0 #ff8c00; -} - -[data-theme='hill-valley-85'] .track-row:hover, -[data-theme='hill-valley-85'] .track-row.context-active { - background: rgba(255, 140, 0, 0.08) !important; - box-shadow: inset 2px 0 0 #ff8c00; -} - -[data-theme='hill-valley-85'] .artist-row:hover { - background: rgba(255, 140, 0, 0.08); - box-shadow: inset 2px 0 0 #ff8c00; -} - -[data-theme='hill-valley-85'] .playlist-row:hover { - background: rgba(255, 140, 0, 0.08); - box-shadow: inset 2px 0 0 #ff8c00; -} - -[data-theme='hill-valley-85'] .queue-item:hover, -[data-theme='hill-valley-85'] .queue-item.context-active { - background: rgba(255, 140, 0, 0.10) !important; - box-shadow: inset 2px 0 0 #ff8c00; -} - -[data-theme='hill-valley-85'] .queue-item:hover .queue-item-title, -[data-theme='hill-valley-85'] .queue-item:hover .queue-item-artist, -[data-theme='hill-valley-85'] .queue-item:hover .queue-item-duration, -[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-title, -[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-artist, -[data-theme='hill-valley-85'] .queue-item.context-active .queue-item-duration { - color: #ff8c00; -} - -/* ── Active queue item: glowing orange ── */ -[data-theme='hill-valley-85'] .queue-item.active { - background: rgba(255, 140, 0, 0.08); - box-shadow: inset 2px 0 0 #ff8c00; -} - -[data-theme='hill-valley-85'] .np-queue-item-active { - color: #ff8c00; - text-shadow: 0 0 8px rgba(255, 140, 0, 0.55); -} - -[data-theme='hill-valley-85'] .np-queue-item.active { - background: rgba(255, 140, 0, 0.08); -} - -[data-theme='hill-valley-85'] .np-album-track.active .np-album-track-title, -[data-theme='hill-valley-85'] .np-album-track.active .np-album-track-num { - color: #ff8c00; - text-shadow: 0 0 8px rgba(255, 140, 0, 0.50); -} - -[data-theme='turtle-power'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2333cc33%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #0a0a0a; - --ctp-mantle: #121212; - --ctp-base: #1a1a1a; - --ctp-surface0: #2a2a2a; - --ctp-surface1: #353535; - --ctp-surface2: #404040; - --ctp-overlay0: #556655; - --ctp-overlay1: #778877; - --ctp-overlay2: #99aa99; - --ctp-text: #e0e0e0; - --ctp-subtext1: #a0b0a0; - --ctp-subtext0: #809080; - - --ctp-mauve: #33cc33; - --ctp-lavender: #44ee44; - --ctp-red: #ff0000; - --ctp-blue: #00aaff; - --ctp-peach: #ff8c00; - --ctp-yellow: #ffcc00; - --ctp-maroon: #a020f0; - --ctp-green: #33cc33; - --ctp-teal: #44ee44; - --ctp-sky: #00aaff; - --ctp-sapphire: #0077cc; - --ctp-pink: #ff66aa; - --ctp-flamingo: #ff4488; - --ctp-rosewater: #ffaacc; - - --bg-app: #1a1a1a; - --bg-sidebar: #121212; - --bg-card: #242424; - --bg-hover: rgba(51, 204, 51, 0.1); - --bg-player: #0a0a0a; - --bg-glass: rgba(10, 10, 10, 0.85); - - --accent: #33cc33; - --accent-dim: rgba(51, 204, 51, 0.15); - --accent-glow: rgba(51, 204, 51, 0.4); - --volume-accent: #33cc33; - - --text-primary: #e0e0e0; - --text-secondary: #a0b0a0; - --text-muted: #667766; - --border: #333333; - --border-subtle: #222222; - - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 8px; -} - -[data-theme='turtle-power'] .sidebar { - background-image: - linear-gradient(335deg, #161616 5px, transparent 5px), - linear-gradient(155deg, #161616 5px, transparent 5px), - linear-gradient(335deg, #161616 5px, transparent 5px), - linear-gradient(155deg, #161616 5px, transparent 5px); - background-size: 20px 20px; - background-position: 0 0, 10px 10px, 10px 10px, 0 0; - border-right: 2px solid #222; -} - -[data-theme='turtle-power'] .player-bar { - background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); - border-top: 2px solid #333; - box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.5); -} - -[data-theme='turtle-power'] .player-track-name { - color: #44ee44; - text-shadow: 0 0 8px rgba(68, 238, 68, 0.6); - font-weight: bold; -} - -[data-theme='turtle-power'] .btn-primary, -[data-theme='turtle-power'] .player-btn-primary { - background: linear-gradient(145deg, #33cc33, #28a428); - border: 1px solid #1e7a1e; - box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.3), 2px 2px 5px rgba(0, 0, 0, 0.5); - color: #000 !important; -} - -[data-theme='turtle-power'] .nav-link.active { - background: var(--accent-dim); - border-left: 4px solid var(--accent); - color: var(--accent) !important; - text-shadow: 0 0 5px rgba(51, 204, 51, 0.3); -} - -[data-theme='turtle-power'] .queue-item.active { - border-left: 3px solid var(--accent); - background: rgba(51, 204, 51, 0.05); -} - -/* ── W3.1 (Operating Systems) ───────────────────────────────── */ -[data-theme='w3-1'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Authentische W3.1 Palette ── */ - --ctp-crust: #808080; - --ctp-mantle: #a0a0a0; - --ctp-base: #c0c0c0; - /* Reines W3.1 Grau */ - --ctp-surface0: #ffffff; - --ctp-surface1: #e0e0e0; - --ctp-surface2: #c0c0c0; - --ctp-overlay0: #808080; - --ctp-overlay1: #404040; - --ctp-overlay2: #000000; - --ctp-text: #000000; - --ctp-subtext1: #000000; - --ctp-subtext0: #000000; - - --ctp-mauve: #000080; - --ctp-lavender: #0000a0; - --ctp-green: #008000; - --ctp-teal: #008080; - --ctp-sky: #0000ff; - --ctp-blue: #000080; - --ctp-sapphire: #000080; - --ctp-pink: #ff00ff; - --ctp-flamingo: #ff00ff; - --ctp-rosewater: #ffffff; - --ctp-yellow: #ffff00; - --ctp-peach: #ff8000; - --ctp-maroon: #800000; - --ctp-red: #ff0000; - - --bg-app: #008080; - /* Teal Desktop */ - --bg-sidebar: #c0c0c0; - --bg-card: #ffffff; - --bg-hover: #000080; - --bg-player: #c0c0c0; - --bg-glass: #c0c0c0; - - --accent: #000080; - --accent-dim: rgba(0, 0, 128, 0.12); - --accent-glow: transparent; - --volume-accent: #000080; - - --text-primary: #000000; - --text-secondary: #000000; - --text-muted: #000000; - - --border: #000000; - --border-subtle: #808080; - --border-dropdown: #000000; - --shadow-dropdown: rgba(0, 0, 0, 0.4); - - --positive: #008000; - --warning: #808000; - --danger: #ff0000; - - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 0px; - --radius-xl: 0px; - --radius-full: 0px; -} - -/* Teal Desktop */ -[data-theme='w3-1'] .app-shell { - background: #008080; -} - -/* ── W3.1 Bevel (2-Layer, schlichter als W98) ── */ -[data-theme='w3-1'] .sidebar, -[data-theme='w3-1'] .player-bar, -[data-theme='w3-1'] .card { - background: #c0c0c0; - border: 2px solid #000000; - box-shadow: - inset 1px 1px #ffffff, - inset -1px -1px #808080; -} - -[data-theme='w3-1'] .sidebar { - border-right: 2px solid #000000; -} - -/* Titelbalken-Stil: solides Navy — der Kern-Unterschied zu W98 */ -[data-theme='w3-1'] .player-bar { - border-top: 2px solid #000000; -} - -[data-theme='w3-1'] .player-track-name { - background: #000080; - color: #ffffff !important; - padding: 2px 6px; - font-weight: bold; - text-align: center; - letter-spacing: 0.03em; -} - -[data-theme='w3-1'] .player-track-artist, -[data-theme='w3-1'] .player-time { - color: #000000 !important; -} - -/* Nav */ -[data-theme='w3-1'] .nav-link.active { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w3-1'] .nav-link.active svg { - color: #ffffff !important; -} - -[data-theme='w3-1'] .nav-link:hover:not(.active) { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w3-1'] .nav-link:hover:not(.active) svg { - color: #ffffff !important; -} - -/* Accordion (Settings Theme Picker) */ -[data-theme='w3-1'] .nav-section-label { - color: #000000 !important; -} - -[data-theme='w3-1'] .theme-accordion-header:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .theme-accordion-open .theme-accordion-header { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .theme-accordion-open .theme-accordion-chevron { - color: #ffffff; -} - -/* Alle Buttons: W3.1 Bevel (einfach, ohne doppelte Inset-Schicht) */ -[data-theme='w3-1'] .btn, -[data-theme='w3-1'] .btn-primary, -[data-theme='w3-1'] .btn-surface, -[data-theme='w3-1'] .btn-ghost, -[data-theme='w3-1'] .hero-play-btn, -[data-theme='w3-1'] .queue-round-btn, -[data-theme='w3-1'] .player-btn, -[data-theme='w3-1'] .album-card-details-btn { - background: #c0c0c0 !important; - color: #000000 !important; - border: 1px solid #000000 !important; - border-radius: 0 !important; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080 !important; - text-shadow: none !important; - filter: none !important; - transform: none !important; -} - -/* Gedrückt */ -[data-theme='w3-1'] .btn:active, -[data-theme='w3-1'] .btn-primary:active, -[data-theme='w3-1'] .btn-surface:active, -[data-theme='w3-1'] .btn-ghost:active, -[data-theme='w3-1'] .hero-play-btn:active, -[data-theme='w3-1'] .queue-round-btn:active, -[data-theme='w3-1'] .player-btn:active, -[data-theme='w3-1'] .album-card-details-btn:active { - box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080 !important; -} - -/* Hover */ -[data-theme='w3-1'] .btn:hover, -[data-theme='w3-1'] .btn-primary:hover, -[data-theme='w3-1'] .btn-surface:hover, -[data-theme='w3-1'] .btn-ghost:hover, -[data-theme='w3-1'] .hero-play-btn:hover, -[data-theme='w3-1'] .album-card-details-btn:hover { - background: #d0d0d0 !important; - color: #000000 !important; -} - -/* Aktive Queue-Buttons */ -[data-theme='w3-1'] .queue-round-btn.active { - background: #000080 !important; - color: #ffffff !important; - box-shadow: inset -1px -1px #ffffff, inset 1px 1px #808080 !important; -} - -[data-theme='w3-1'] .queue-round-btn:hover:not(:disabled):not(.active) { - background: #d0d0d0 !important; - color: #000000 !important; -} - -/* Progress Bar */ -[data-theme='w3-1'] .progress-bar-track { - background: #ffffff; - box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; - border-radius: 0; -} - -[data-theme='w3-1'] .progress-bar-fill { - background: #000080; - border-radius: 0; - box-shadow: none; -} - -/* Scrollbar */ -[data-theme='w3-1'] ::-webkit-scrollbar { - width: 16px; - height: 16px; -} - -[data-theme='w3-1'] ::-webkit-scrollbar-track { - background: #c0c0c0; -} - -[data-theme='w3-1'] ::-webkit-scrollbar-thumb { - background: #c0c0c0; - border: 1px solid #000000; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; -} - -/* Cards */ -[data-theme='w3-1'] .card { - background: #ffffff; - border: 2px solid #000000; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; -} - -/* Glass (Live Dropdown etc.) */ -[data-theme='w3-1'] .glass { - background: #c0c0c0 !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - border: 2px solid #000000; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; - color: #000000; -} - -[data-theme='w3-1'] .glass [style*="var(--bg-hover)"] { - background: #d8d8d8 !important; - border: 1px solid #808080; - border-radius: 0 !important; -} - -[data-theme='w3-1'] .glass [style*="var(--text-primary)"], -[data-theme='w3-1'] .glass [style*="var(--text-secondary)"], -[data-theme='w3-1'] .glass [style*="var(--text-muted)"] { - color: #000000 !important; -} - -/* Universelle Hover-Zustände → navy + weiß */ -[data-theme='w3-1'] .queue-tab-btn:hover { - background: #d0d0d0; - color: #000000; -} - -[data-theme='w3-1'] .settings-tab:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .custom-select-trigger:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .custom-select-option:hover { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w3-1'] .artist-ext-link:hover { - background: #000080; - color: #ffffff !important; -} - -[data-theme='w3-1'] .np-action-btn:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .np-queue-item:hover, -[data-theme='w3-1'] .np-queue-item.context-active { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .track-row:hover, -[data-theme='w3-1'] .track-row.context-active { - background: #000080 !important; -} - -[data-theme='w3-1'] .track-row:hover *, -[data-theme='w3-1'] .track-row.context-active * { - color: #ffffff !important; -} - -[data-theme='w3-1'] .artist-row:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .playlist-row:hover { - background: #000080; -} - -[data-theme='w3-1'] .playlist-row:hover, -[data-theme='w3-1'] .playlist-row:hover * { - color: #ffffff; -} - -[data-theme='w3-1'] .queue-item:hover, -[data-theme='w3-1'] .queue-item.context-active { - background: #000080 !important; -} - -[data-theme='w3-1'] .queue-item:hover .queue-item-title, -[data-theme='w3-1'] .queue-item:hover .queue-item-artist, -[data-theme='w3-1'] .queue-item:hover .queue-item-duration, -[data-theme='w3-1'] .queue-item.context-active .queue-item-title, -[data-theme='w3-1'] .queue-item.context-active .queue-item-artist, -[data-theme='w3-1'] .queue-item.context-active .queue-item-duration { - color: #ffffff; -} - -[data-theme='w3-1'] .player-btn:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .player-btn-primary { - background: #c0c0c0 !important; - color: #000000 !important; -} - -[data-theme='w3-1'] .player-btn-primary:hover { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w3-1'] .search-result-item:hover, -[data-theme='w3-1'] .search-result-item.active { - background: #000080; -} - -[data-theme='w3-1'] .search-result-item:hover .search-result-name, -[data-theme='w3-1'] .search-result-item:hover .search-result-sub, -[data-theme='w3-1'] .search-result-item.active .search-result-name, -[data-theme='w3-1'] .search-result-item.active .search-result-sub { - color: #ffffff; -} - -[data-theme='w3-1'] .np-title { - color: #000080 !important; -} - -[data-theme='w3-1'] .changelog-code { - background: #ffffff; - color: #000080; - border: 1px solid #808080; -} - -[data-theme='w3-1'] .keybind-badge { - background: #c0c0c0 !important; - color: #000000 !important; - border: 1px solid #808080 !important; -} - -[data-theme='w3-1'] .genre-keyword-badge { - background: #c0c0c0 !important; - color: #000000 !important; - border: 1px solid #808080 !important; -} - -[data-theme='w3-1'] .eq-ctrl-btn { - background: #c0c0c0; - color: #000000; - border: 1px solid #808080; - box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; -} - -[data-theme='w3-1'] .eq-ctrl-btn:hover { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .toggle-track::before { - background: #c0c0c0; - border: 1px solid #808080; -} - -[data-theme='w3-1'] .hero-eyebrow { - color: rgba(255, 255, 255, 0.9); -} - -[data-theme='w3-1'] .hero-meta .badge { - background: rgba(255, 255, 255, 0.15); -} - -[data-theme='w3-1'] .connection-type, -[data-theme='w3-1'] .connection-server { - color: #000000; -} - -[data-theme='w3-1'] .collapse-btn { - border-color: #808080 !important; -} - -[data-theme='w3-1'] .collapse-btn:hover { - background: #000080 !important; - color: #ffffff !important; -} - -[data-theme='w3-1'] .album-row-nav .nav-btn:hover:not(.disabled) { - background: #000080; - color: #ffffff; -} - -[data-theme='w3-1'] .help-question:hover { - color: #000080; -} - -[data-theme='w3-1'] .help-item-open .help-question { - color: #000080; - font-weight: bold; -} - -[data-theme='w3-1'] .year-toggle:hover { - color: #000080; -} - -/* ─── Ubuntu — Unity Ambiance (Classic Light) ─── */ -/* Warm human desktop: aubergine launcher + orange accent + warm off-white content */ -[data-theme='ubuntu-ambiance'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%237d6e68%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette — warm human spectrum ── */ - --ctp-crust: #1a000f; - /* panel blackout aubergine */ - --ctp-mantle: #2c001e; - /* Ubuntu top/bottom panel */ - --ctp-base: #f4efea; - /* Ambiance window warm off-white */ - --ctp-surface0: #ede8e2; - --ctp-surface1: #e4dfd8; - --ctp-surface2: #d8d0c8; - --ctp-overlay0: #c0b0a0; - --ctp-overlay1: #a89080; - --ctp-overlay2: #907870; - --ctp-text: #3d2b2b; - /* warm dark brown — human, not pure black */ - --ctp-subtext1: #5d4e48; - --ctp-subtext0: #7d6e68; - /* Ubuntu color spectrum */ - --ctp-mauve: #e95420; - /* Ubuntu Orange — the soul of Ubuntu */ - --ctp-lavender: #f06030; - --ctp-sky: #f07050; - --ctp-peach: #e95420; - --ctp-teal: #06989a; - --ctp-blue: #3465a4; - --ctp-sapphire: #204a87; - --ctp-green: #4e9a06; - /* Ubuntu success green */ - --ctp-yellow: #c4a000; - --ctp-pink: #cc1e4a; - --ctp-flamingo: #a52828; - --ctp-maroon: #800000; - --ctp-red: #cc0000; - --ctp-rosewater: #cc4444; - - /* ── Semantic tokens ── - Contrast audit (vs. --bg-app #f4efea, L≈0.868): - text-primary 11.7:1 AAA ✓ - text-secondary 7.0:1 AAA ✓ - text-muted 5.4:1 AA ✓ (raised from 4.4:1 — was below AA) - positive 4.7:1 AA ✓ (raised from 3.1:1) - warning 5.4:1 AA ✓ (raised from 2.2:1 — was below all thresholds) - danger 5.2:1 AA ✓ - accent (orange) 3.2:1 UI ✓ (Ubuntu brand, text-on-orange needs dark fg) - */ - --bg-app: #f4efea; - /* warm Ambiance window */ - --bg-sidebar: #3d1f3d; - /* Unity Launcher — dark aubergine */ - --bg-card: #ede8e2; - --bg-hover: #e4ddd5; - --bg-player: #2c001e; - /* Ubuntu panel — blackest aubergine */ - --bg-glass: rgba(244, 239, 234, 0.94); - --accent: #e95420; - /* Ubuntu Orange — brand identity, 3.2:1 UI-pass (prefer dark fg on orange) */ - --accent-dim: rgba(233, 84, 32, 0.12); - --accent-glow: rgba(233, 84, 32, 0.30); - --text-primary: #3d2b2b; - --text-secondary: #5d4e48; - --text-muted: #6a5a53; /* 5.4:1 AA ✓, was #7d6e68 at 4.4:1 (below AA) */ - --border: #a89080; /* 2.5:1, consistent with Ubuntu Warm Grey */ - --border-subtle: #c8bbac; /* ~1.7:1 structural but perceptible */ - --positive: #2e7a00; /* 4.7:1 AA ✓, darkened from #4e9a06 (3.1:1) */ - --warning: #855900; /* 5.4:1 AA ✓, warm amber matching palette, was #c4a000 (2.2:1) */ - --danger: #cc0000; /* 5.2:1 AA ✓ */ - --waveform-played: #e95420; - --waveform-buffered: #a89080; - --waveform-unplayed: #d8d0c8; -} - -/* ─── Ubuntu Ambiance — component-level overrides ─────────────────────── */ - -/* Column resize grip — was #e4dfd8 on #ede8e2 = 1.08:1 (invisible) - Use the warm grey overlay tone, 2.5:1 — works for a light theme grip. */ -[data-theme='ubuntu-ambiance'] .col-resize-handle::after { - background: #a89080; - width: 2px; -} - -/* Focus ring — keyboard navigation, Ubuntu Orange at AAA against light bg - for the outline itself (not text, so 3:1 UI threshold applies). */ -[data-theme='ubuntu-ambiance'] *:focus-visible { - outline: 2px solid #e95420; - outline-offset: 2px; -} - -/* Scrollbar thumb — visible against warm off-white */ -[data-theme='ubuntu-ambiance'] ::-webkit-scrollbar-thumb { - background: #a89080; -} -[data-theme='ubuntu-ambiance'] *:hover::-webkit-scrollbar-thumb, -[data-theme='ubuntu-ambiance'] .is-scrolling::-webkit-scrollbar-thumb { - background: #7d6e68; -} - -/* ── App shell: warm Ambiance off-white ── */ -[data-theme='ubuntu-ambiance'] .app-shell { - background: #f4efea; -} - -/* ── Sidebar: Unity Launcher dark aubergine ── */ -[data-theme='ubuntu-ambiance'] .sidebar { - background: linear-gradient(180deg, #3d1f3d 0%, #2e162e 100%); - border-right: 1px solid #1a0a1a; - box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35); -} - -/* Sidebar text: light on dark aubergine */ -[data-theme='ubuntu-ambiance'] .sidebar-logo-text, -[data-theme='ubuntu-ambiance'] .nav-link, -[data-theme='ubuntu-ambiance'] .sidebar-bottom a, -[data-theme='ubuntu-ambiance'] .sidebar-bottom button { - color: rgba(255, 255, 255, 0.72); -} - -[data-theme='ubuntu-ambiance'] .nav-link:hover { - background: rgba(255, 255, 255, 0.09); - color: #ffffff; -} - -[data-theme='ubuntu-ambiance'] .nav-link.active { - background: rgba(233, 84, 32, 0.22); - color: #ffffff; -} - -[data-theme='ubuntu-ambiance'] .nav-link.active::before { - background: #e95420; - box-shadow: 0 0 8px rgba(233, 84, 32, 0.60); -} - -[data-theme='ubuntu-ambiance'] { - --logo-color-start: #ffffff; - --logo-color-end: #ffb090; -} - -[data-theme='ubuntu-ambiance'] .sidebar-logo-icon { - color: #e95420; -} - -/* Sidebar version / muted labels */ -[data-theme='ubuntu-ambiance'] .sidebar-version, -[data-theme='ubuntu-ambiance'] .update-toast { - color: rgba(255, 255, 255, 0.40); -} - -/* ── Player bar: Ubuntu panel — darkest aubergine ── */ -[data-theme='ubuntu-ambiance'] .player-bar { - background: linear-gradient(180deg, #2c001e 0%, #1a000f 100%); - border-top: 1px solid #3d0828; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.06), - 0 -3px 16px rgba(0, 0, 0, 0.50); -} - -/* Player text: light on dark panel */ -[data-theme='ubuntu-ambiance'] .player-track-name { - color: #ffffff; - text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -} - -[data-theme='ubuntu-ambiance'] .player-track-artist { - color: rgba(255, 255, 255, 0.60); - opacity: 1; -} - -[data-theme='ubuntu-ambiance'] .player-time { - color: rgba(255, 255, 255, 0.65); -} - -/* Transport buttons: Ubuntu Orange on dark panel */ -[data-theme='ubuntu-ambiance'] .player-btn, -[data-theme='ubuntu-ambiance'] .player-btn-primary { - background: linear-gradient(180deg, #f06030 0%, #e95420 50%, #d44418 100%); - color: #ffffff; - border: 1px solid #b83010; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.50), - inset 0 1px 0 rgba(255, 255, 255, 0.25), - inset 0 -1px 0 rgba(0, 0, 0, 0.20); -} - -[data-theme='ubuntu-ambiance'] .player-btn:hover, -[data-theme='ubuntu-ambiance'] .player-btn-primary:hover { - background: linear-gradient(180deg, #f87040 0%, #f06030 50%, #e04828 100%); - box-shadow: - 0 3px 8px rgba(0, 0, 0, 0.50), - inset 0 1px 0 rgba(255, 255, 255, 0.30), - inset 0 -1px 0 rgba(0, 0, 0, 0.15); -} - -/* ── Content area buttons: Ambiance GTK style ── */ -[data-theme='ubuntu-ambiance'] .btn { - background: linear-gradient(180deg, #f0ebe5 0%, #e4dfd8 100%); - color: #3d2b2b; - border: 1px solid #b8a898; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 1px 2px rgba(0, 0, 0, 0.15); -} - -[data-theme='ubuntu-ambiance'] .btn:hover { - background: linear-gradient(180deg, #f8f3ed 0%, #ede8e2 100%); - border-color: #a89888; -} - -[data-theme='ubuntu-ambiance'] .btn-primary { - background: linear-gradient(180deg, #f06030 0%, #e95420 100%); - color: #ffffff; - border: 1px solid #b83010; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.22), - 0 1px 3px rgba(0, 0, 0, 0.25), - 0 0 0 0px rgba(233, 84, 32, 0); -} - -[data-theme='ubuntu-ambiance'] .btn-primary:hover { - background: linear-gradient(180deg, #f87040 0%, #f06030 100%); -} - -/* ── Content header: warm Ambiance title band ── */ -[data-theme='ubuntu-ambiance'] .content-header { - background: linear-gradient(180deg, rgba(244, 239, 234, 1) 0%, rgba(237, 232, 226, 0.60) 100%); - border-bottom: 1px solid #c8b8a8; -} - -/* ── Cards / panels ── */ -[data-theme='ubuntu-ambiance'] .glass, -[data-theme='ubuntu-ambiance'] .card { - background: rgba(237, 232, 226, 0.88); - border: 1px solid #c8b8a8; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 4px rgba(0, 0, 0, 0.10); -} - -/* ── Hover / active states: orange accent ── */ -[data-theme='ubuntu-ambiance'] .track-row:hover, -[data-theme='ubuntu-ambiance'] .track-row.context-active { - background: rgba(233, 84, 32, 0.07); - box-shadow: inset 3px 0 0 #e95420; -} - -[data-theme='ubuntu-ambiance'] .queue-item:hover, -[data-theme='ubuntu-ambiance'] .queue-item.context-active { - background: rgba(233, 84, 32, 0.07); -} - -[data-theme='ubuntu-ambiance'] .queue-item.active { - background: rgba(233, 84, 32, 0.12); - border-left: 2px solid #e95420; -} - -[data-theme='ubuntu-ambiance'] .np-queue-item.active { - background: rgba(233, 84, 32, 0.08); -} - -[data-theme='ubuntu-ambiance'] .np-queue-item-active { - color: #e95420; -} - -[data-theme='ubuntu-ambiance'] .np-queue-item:hover, -[data-theme='ubuntu-ambiance'] .np-queue-item.context-active { - background: rgba(233, 84, 32, 0.06); -} - -[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-title, -[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-num { - color: #e95420; -} - -[data-theme='ubuntu-ambiance'] .artist-row:hover { - background: rgba(233, 84, 32, 0.06); - box-shadow: inset 3px 0 0 #e95420; -} - -[data-theme='ubuntu-ambiance'] .playlist-row:hover { - background: rgba(233, 84, 32, 0.06); - box-shadow: inset 3px 0 0 #e95420; -} - -[data-theme='ubuntu-ambiance'] .settings-tab:hover { - background: rgba(233, 84, 32, 0.08); - color: #e95420; -} - -[data-theme='ubuntu-ambiance'] .settings-tab.active { - background: rgba(233, 84, 32, 0.14); - color: #e95420; - border-color: #e95420; -} - -[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover { - background: rgba(233, 84, 32, 0.08); - color: #e95420; -} - -[data-theme='ubuntu-ambiance'] .custom-select-trigger:hover { - background: rgba(233, 84, 32, 0.07); -} - -[data-theme='ubuntu-ambiance'] .custom-select-option:hover { - background: rgba(233, 84, 32, 0.10); -} - -[data-theme='ubuntu-ambiance'] .artist-ext-link:hover { - background: rgba(233, 84, 32, 0.09); - border-color: #e95420; -} - -/* Queue panel on dark player area */ -[data-theme='ubuntu-ambiance'] .queue-round-btn.active { - color: #ffffff; -} - -/* Connection indicators: warm muted on light bg */ -[data-theme='ubuntu-ambiance'] .connection-type, -[data-theme='ubuntu-ambiance'] .connection-server { - color: #907860; -} - -/* ── Album chip: opaque orange pill so it reads on both dark hero and light bg ── */ -[data-theme='ubuntu-ambiance'] .badge, -[data-theme='ubuntu-ambiance'] .album-detail-badge { - background: #e95420; - color: #ffffff; -} - -/* ── Queue panel: on dark aubergine bg — all text must be light ── */ -/* Header + toolbar sit on --bg-app (light) — fine as-is */ -/* List, meta box, divider sit on --bg-sidebar (dark aubergine) */ - -[data-theme='ubuntu-ambiance'] .queue-item-title { - color: rgba(255, 255, 255, 0.88); -} - -[data-theme='ubuntu-ambiance'] .queue-item-artist, -[data-theme='ubuntu-ambiance'] .queue-item-duration { - color: rgba(255, 255, 255, 0.52); -} - -[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-artist, -[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-duration { - color: rgba(255, 255, 255, 0.72); -} - -[data-theme='ubuntu-ambiance'] .queue-divider span { - color: rgba(255, 255, 255, 0.40) !important; -} - -/* Meta box (current track info) on dark aubergine */ -[data-theme='ubuntu-ambiance'] .queue-current-info h3 { - color: rgba(255, 255, 255, 0.92); -} - -[data-theme='ubuntu-ambiance'] .queue-current-sub { - color: rgba(255, 255, 255, 0.55); -} - -[data-theme='ubuntu-ambiance'] .queue-current-cover .fallback { - color: rgba(255, 255, 255, 0.35); -} - -/* Tabs sit on dark bg too */ -[data-theme='ubuntu-ambiance'] .queue-tab-btn { - color: rgba(255, 255, 255, 0.60); -} - -[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover { - background: rgba(255, 255, 255, 0.08); - color: rgba(255, 255, 255, 0.90); -} - -[data-theme='ubuntu-ambiance'] .queue-tab-btn.active { - color: #e95420; -} - -/* Action buttons in header (on light --bg-app) */ -[data-theme='ubuntu-ambiance'] .queue-action-btn { - color: #7d6e68; -} - -[data-theme='ubuntu-ambiance'] .queue-action-btn:hover:not(:disabled) { - color: #3d2b2b; -} - -/* ─────────────────────────────────────────── */ - -/* ─── Windows 10 — Fluent Design Light ─── */ -/* Clean flat white + the iconic near-black taskbar + Windows blue #0078D4 */ -[data-theme='w10'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette — Windows 10 neutral + Fluent blue ── */ - --ctp-crust: #1c1c1c; - /* taskbar near-black */ - --ctp-mantle: #2b2b2b; - --ctp-base: #ffffff; - /* window white */ - --ctp-surface0: #f3f3f3; - /* nav pane / secondary bg */ - --ctp-surface1: #ebebeb; - --ctp-surface2: #d6d6d6; - /* borders, dividers */ - --ctp-overlay0: #767676; - /* muted / disabled */ - --ctp-overlay1: #4a4a4a; - --ctp-overlay2: #2b2b2b; - --ctp-text: #000000; - /* primary text — true black */ - --ctp-subtext1: #1b1b1b; - --ctp-subtext0: #5d5d5d; - /* Windows Fluent blue spectrum */ - --ctp-mauve: #0078d4; - /* Windows blue — THE accent */ - --ctp-lavender: #2e95d3; - --ctp-sky: #cce4f7; - /* selection highlight */ - --ctp-teal: #008272; - --ctp-blue: #0063b1; - --ctp-sapphire: #003e92; - --ctp-green: #107c10; - --ctp-yellow: #ffb900; - --ctp-peach: #d83b01; - --ctp-pink: #e3008c; - --ctp-flamingo: #c239b3; - --ctp-rosewater: #ef6950; - --ctp-maroon: #a80000; - --ctp-red: #d13438; - - /* ── Semantic tokens ── */ - --bg-app: #ffffff; - --bg-sidebar: #f3f3f3; - --bg-card: #ffffff; - --bg-hover: #e8e8e8; - --bg-player: #1c1c1c; - /* taskbar */ - --bg-glass: rgba(255, 255, 255, 0.90); - --accent: #0078d4; - --accent-dim: rgba(0, 120, 212, 0.10); - --accent-glow: rgba(0, 120, 212, 0.28); - --text-primary: #000000; - --text-secondary: #1b1b1b; - --text-muted: #767676; - --border: #d6d6d6; - --border-subtle: #ebebeb; - --positive: #107c10; - --warning: #ffb900; - --danger: #d13438; - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 6px; - /* Waveform: Windows blue progress */ - --waveform-played: #0078d4; - --waveform-buffered: #80bbea; - --waveform-unplayed: #d6d6d6; -} - -/* ── App shell: W10 desktop — clean off-white ── */ -[data-theme='w10'] .app-shell { - background: #f3f3f3; -} - -/* ── Sidebar: W10 Navigation Pane — flat light gray ── */ -[data-theme='w10'] .sidebar { - background: #f3f3f3; - border-right: 1px solid #d6d6d6; - box-shadow: none; -} - -/* Nav links: dark on light pane */ -[data-theme='w10'] .nav-link { - color: #1b1b1b; -} - -[data-theme='w10'] .nav-link:hover { - background: rgba(0, 0, 0, 0.06); - color: #000000; -} - -[data-theme='w10'] .nav-link.active { - background: rgba(0, 120, 212, 0.10); - color: #0078d4; -} - -[data-theme='w10'] .nav-link.active::before { - background: #0078d4; - box-shadow: none; -} - -/* ── Player bar: W10 Taskbar — near-black flat + accent stripe ── */ -[data-theme='w10'] .player-bar { - background: #1c1c1c; - border-top: 2px solid #0078d4; - box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.50); -} - -/* Player text: white on dark taskbar */ -[data-theme='w10'] .player-track-name { - color: #ffffff; - font-weight: 500; -} - -[data-theme='w10'] .player-track-artist { - color: rgba(255, 255, 255, 0.65); - opacity: 1; -} - -[data-theme='w10'] .player-time { - color: rgba(255, 255, 255, 0.60); -} - -/* Transport: flat ghosted icons on dark bar */ -[data-theme='w10'] .player-btn { - color: rgba(255, 255, 255, 0.82); - background: transparent; - border: none; - box-shadow: none; -} - -[data-theme='w10'] .player-btn:hover { - color: #ffffff; - background: rgba(255, 255, 255, 0.12); - box-shadow: none; -} - -[data-theme='w10'] .player-btn-primary { - background: #0078d4; - color: #ffffff; - border: none; - box-shadow: none; -} - -[data-theme='w10'] .player-btn-primary:hover { - background: #1684d8; - box-shadow: none; -} - -/* ── Content-area buttons: W10 flat button style ── */ -[data-theme='w10'] .btn { - background: #ffffff; - color: #1b1b1b; - border: 1px solid #d6d6d6; - border-radius: 4px; - box-shadow: none; -} - -[data-theme='w10'] .btn:hover { - background: #f3f3f3; - border-color: #767676; - box-shadow: none; -} - -[data-theme='w10'] .btn-primary { - background: #0078d4; - color: #ffffff; - border: 1px solid transparent; - box-shadow: none; -} - -[data-theme='w10'] .btn-primary:hover { - background: #006cbd; - box-shadow: none; -} - -[data-theme='w10'] .btn-ghost { - background: transparent; - border-color: transparent; - color: #1b1b1b; -} - -[data-theme='w10'] .btn-ghost:hover { - background: rgba(0, 0, 0, 0.06); - border-color: transparent; -} - -[data-theme='w10'] .btn-surface { - background: #ffffff; - color: #1b1b1b; - border: 1px solid #d6d6d6; -} - -[data-theme='w10'] .btn-surface:hover { - background: #f3f3f3; - border-color: #767676; -} - -/* Cards: white, flat border, very subtle lift */ -[data-theme='w10'] .glass, -[data-theme='w10'] .card { - background: #ffffff; - border: 1px solid #d6d6d6; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); -} - -/* Content header */ -[data-theme='w10'] .content-header { - background: rgba(255, 255, 255, 0.92); - border-bottom: 1px solid #d6d6d6; -} - -/* Album badge: Windows blue */ -[data-theme='w10'] .badge, -[data-theme='w10'] .album-detail-badge { - background: #0078d4; - color: #ffffff; -} - -/* ── Hover / active states ── */ -[data-theme='w10'] .track-row:hover, -[data-theme='w10'] .track-row.context-active { - background: rgba(0, 120, 212, 0.06); - box-shadow: inset 3px 0 0 #0078d4; -} - -[data-theme='w10'] .queue-item:hover, -[data-theme='w10'] .queue-item.context-active { - background: rgba(0, 120, 212, 0.07); -} - -[data-theme='w10'] .queue-item.active { - background: rgba(0, 120, 212, 0.10); - border-left: 2px solid #0078d4; -} - -[data-theme='w10'] .np-queue-item.active { - background: rgba(0, 120, 212, 0.08); -} - -[data-theme='w10'] .np-queue-item-active { - color: #0078d4; -} - -[data-theme='w10'] .np-queue-item:hover, -[data-theme='w10'] .np-queue-item.context-active { - background: rgba(0, 120, 212, 0.05); -} - -[data-theme='w10'] .np-album-track.active .np-album-track-title, -[data-theme='w10'] .np-album-track.active .np-album-track-num { - color: #0078d4; -} - -[data-theme='w10'] .artist-row:hover { - background: rgba(0, 120, 212, 0.06); - box-shadow: inset 3px 0 0 #0078d4; -} - -[data-theme='w10'] .playlist-row:hover { - background: rgba(0, 120, 212, 0.06); - box-shadow: inset 3px 0 0 #0078d4; -} - -[data-theme='w10'] .settings-tab:hover { - background: rgba(0, 0, 0, 0.05); - color: #0078d4; -} - -[data-theme='w10'] .settings-tab.active { - background: rgba(0, 120, 212, 0.10); - color: #0078d4; - border-color: #0078d4; -} - -[data-theme='w10'] .queue-tab-btn:hover { - background: rgba(0, 0, 0, 0.05); - color: #0078d4; -} - -[data-theme='w10'] .custom-select-trigger:hover { - background: rgba(0, 0, 0, 0.05); -} - -[data-theme='w10'] .custom-select-option:hover { - background: rgba(0, 120, 212, 0.08); -} - -[data-theme='w10'] .artist-ext-link:hover { - background: rgba(0, 120, 212, 0.08); - border-color: #0078d4; -} - -/* Connection info: readable on light sidebar */ -[data-theme='w10'] .connection-type, -[data-theme='w10'] .connection-server { - color: #5d5d5d; -} - -/* ─────────────────────────────────────────── */ - -/* ─── Windows Vista — Aero Glass ─── */ -/* Pure CSS glass illusion: layered gradients + strategic box-shadows, no backdrop-filter */ -[data-theme='wista'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234870a8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Palette ── */ - --ctp-crust: #010308; - --ctp-mantle: #050b1a; - --ctp-base: #eef3fc; - /* Vista window interior — ice blue-white */ - --ctp-surface0: #e2ecf8; - --ctp-surface1: #d5e4f5; - --ctp-surface2: #c5d8f0; - --ctp-overlay0: #a8c4e0; - --ctp-overlay1: #88a8cc; - --ctp-overlay2: #6888b0; - --ctp-text: #0d1d3c; - /* deep navy — readable on ice bg */ - --ctp-subtext1: #2a4878; - --ctp-subtext0: #4870a8; - /* Vista Aero blue spectrum */ - --ctp-mauve: #1565c8; - /* Vista Aero blue — THE accent */ - --ctp-lavender: #2880e0; - --ctp-sky: #5aaaf8; - /* selection/highlight blue */ - --ctp-teal: #1890b8; - --ctp-blue: #0e50a8; - --ctp-sapphire: #0848a0; - --ctp-green: #1a8020; - --ctp-yellow: #c8980c; - --ctp-peach: #d06818; - --ctp-pink: #c03878; - --ctp-flamingo: #a82860; - --ctp-rosewater: #c04848; - --ctp-maroon: #903030; - --ctp-red: #c02020; - - /* ── Semantic tokens ── */ - --bg-app: #eef3fc; - --bg-sidebar: #0e1e3e; - /* deep navy glass — Vista nav pane in dark mode */ - --bg-card: #e2ecf8; - --bg-hover: rgba(21, 101, 200, 0.09); - --bg-player: #050810; - /* Vista taskbar — black glass */ - --bg-glass: rgba(238, 243, 252, 0.94); - --accent: #1565c8; - --accent-dim: rgba(21, 101, 200, 0.12); - --accent-glow: rgba(21, 101, 200, 0.40); - --text-primary: #0d1d3c; - --text-secondary: #2a4878; - --text-muted: #3f6aa0; - /* slight lift from #4870a8 to clear AA on bg-card (4.23 → 4.65) */ - --border: rgba(100, 160, 220, 0.45); - --border-subtle: rgba(140, 190, 240, 0.30); - --positive: #1a8020; - --warning: #735a00; - /* deeper Vista gold — #c8980c was 2.37:1 on bg-app, now 5.91:1 */ - --danger: #c02020; - --radius-sm: 3px; - --radius-md: 6px; - --radius-lg: 10px; - /* Waveform: Vista blue progress bar */ - --waveform-played: #1565c8; - --waveform-buffered: #5aaaf8; - --waveform-unplayed: #c5d8f0; -} - -/* ── App shell: Vista desktop — soft blue gradient ── */ -[data-theme='wista'] .app-shell { - background: linear-gradient(160deg, #dce8f8 0%, #e5eefa 50%, #eef3fc 100%); -} - -/* ── Sidebar: Aero glass nav pane ── - Three layers: 1) top specular reflection, 2) deep navy base, 3) edge highlight via box-shadow */ -[data-theme='wista'] .sidebar { - background: - linear-gradient(180deg, - rgba(255, 255, 255, 0.22) 0%, - rgba(255, 255, 255, 0.08) 20%, - rgba(255, 255, 255, 0.00) 55%, - rgba(0, 20, 60, 0.12) 100%), - linear-gradient(180deg, #1a3368 0%, #0e1e3e 45%, #0a1830 100%); - border-right: 1px solid rgba(120, 180, 255, 0.55); - box-shadow: - inset -1px 0 0 rgba(255, 255, 255, 0.28), - inset 1px 0 0 rgba(255, 255, 255, 0.10), - 2px 0 18px rgba(0, 0, 0, 0.40); -} - -/* Sidebar text: light on dark glass */ -[data-theme='wista'] .nav-link { - color: rgba(210, 228, 255, 0.72); -} - -[data-theme='wista'] .nav-link:hover { - background: rgba(255, 255, 255, 0.11); - color: #ffffff; -} - -[data-theme='wista'] .nav-link.active { - background: rgba(21, 101, 200, 0.38); - color: #ffffff; -} - -[data-theme='wista'] .nav-link.active::before { - background: #5aaaf8; - box-shadow: 0 0 10px rgba(90, 170, 248, 0.85); -} - -[data-theme='wista'] .sidebar-logo-text, -[data-theme='wista'] .sidebar-bottom a, -[data-theme='wista'] .sidebar-bottom button { - color: rgba(210, 228, 255, 0.70); -} - -[data-theme='wista'] { - --logo-color-start: #ffffff; - --logo-color-end: #a8ccff; -} - -[data-theme='wista'] .sidebar-version { - color: rgba(210, 228, 255, 0.35); -} - -/* ── Player bar: Vista Aero taskbar ── - Black glass + intense blue glow on top border — the most iconic Vista element */ -[data-theme='wista'] .player-bar { - background: - linear-gradient(180deg, - rgba(255, 255, 255, 0.07) 0%, - rgba(255, 255, 255, 0.00) 18%, - rgba(0, 0, 0, 0.00) 82%, - rgba(0, 0, 0, 0.18) 100%), - linear-gradient(180deg, #0c1828 0%, #050810 100%); - border-top: 1px solid rgba(80, 155, 255, 0.70); - box-shadow: - inset 0 1px 0 rgba(140, 200, 255, 0.55), - inset 0 2px 0 rgba(255, 255, 255, 0.14), - 0 -4px 24px rgba(0, 0, 0, 0.70); -} - -/* Player text: white on black glass */ -[data-theme='wista'] .player-track-name { - color: #ffffff; - text-shadow: 0 0 12px rgba(100, 170, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.60); - font-weight: 600; -} - -[data-theme='wista'] .player-track-artist { - color: #88b8e8; - opacity: 1; -} - -[data-theme='wista'] .player-time { - color: #88b8e8; -} - -/* ── Transport buttons: Vista glass orbs ── - Top half: white → ice-blue reflection | Bottom half: royal blue deep — the iconic split */ -[data-theme='wista'] .player-btn, -[data-theme='wista'] .player-btn-primary { - background: linear-gradient(180deg, - #daeeff 0%, - #b8d8ff 44%, - #3a91f8 50%, - #0f58d7 100%); - color: #ffffff; - border: 1px solid rgba(10, 65, 180, 0.70); - border-radius: 50%; - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.75), - 0 2px 8px rgba(0, 0, 0, 0.50), - 0 0 0 1px rgba(80, 140, 255, 0.20); -} - -[data-theme='wista'] .player-btn:hover, -[data-theme='wista'] .player-btn-primary:hover { - background: linear-gradient(180deg, - #e8f4ff 0%, - #c8e4ff 44%, - #58a8ff 50%, - #2070e8 100%); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.80), - 0 3px 12px rgba(0, 0, 0, 0.50), - 0 0 16px rgba(80, 150, 255, 0.35); -} - -/* ── Content-area buttons: Vista dialog glass ── */ -[data-theme='wista'] .btn { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.98) 0%, - rgba(238, 248, 255, 0.95) 44%, - rgba(195, 222, 248, 0.90) 50%, - rgba(168, 205, 240, 0.85) 100%); - color: #0d1d3c; - border: 1px solid rgba(100, 160, 220, 0.68); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.90), - 0 1px 3px rgba(0, 0, 0, 0.18); -} - -[data-theme='wista'] .btn:hover { - background: linear-gradient(180deg, - rgba(255, 255, 255, 1.00) 0%, - rgba(245, 252, 255, 0.98) 44%, - rgba(210, 233, 255, 0.95) 50%, - rgba(180, 220, 252, 0.92) 100%); - border-color: rgba(80, 140, 220, 0.80); -} - -[data-theme='wista'] .btn-primary { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.95) 0%, - rgba(190, 222, 255, 0.92) 44%, - rgba(48, 130, 240, 0.96) 50%, - rgba(15, 78, 210, 0.99) 100%); - color: #ffffff; - border: 1px solid rgba(10, 60, 180, 0.72); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.88), - 0 1px 4px rgba(0, 0, 0, 0.28), - 0 0 8px rgba(21, 101, 200, 0.22); -} - -[data-theme='wista'] .btn-primary:hover { - background: linear-gradient(180deg, - rgba(255, 255, 255, 1.00) 0%, - rgba(210, 235, 255, 0.95) 44%, - rgba(68, 148, 255, 0.97) 50%, - rgba(30, 95, 225, 1.00) 100%); -} - -/* ── Cards/panels: Vista frosted glass panel ── */ -[data-theme='wista'] .glass, -[data-theme='wista'] .card { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.88) 0%, - rgba(225, 240, 255, 0.82) 100%); - border: 1px solid rgba(130, 182, 232, 0.60); - box-shadow: - inset 0 1px 0 rgba(255, 255, 255, 0.92), - 0 2px 8px rgba(21, 101, 200, 0.10); -} - -/* ── Content header: Vista titlebar / toolbar band ── */ -[data-theme='wista'] .content-header { - background: linear-gradient(180deg, - rgba(255, 255, 255, 0.92) 0%, - rgba(232, 245, 255, 0.72) 100%); - border-bottom: 1px solid rgba(150, 198, 238, 0.65); - box-shadow: 0 1px 4px rgba(21, 101, 200, 0.10); -} - -/* ── Album badge: Vista blue pill ── */ -[data-theme='wista'] .badge, -[data-theme='wista'] .album-detail-badge { - background: #1565c8; - color: #ffffff; -} - -/* ── Scrollbar: Vista light-blue style ── */ -[data-theme='wista'] ::-webkit-scrollbar-track { - background: #d5e4f5; -} - -[data-theme='wista'] ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, #90b8e0 0%, #6898c8 100%); - border-radius: 4px; -} - -[data-theme='wista'] ::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, #a8ccf0 0%, #80a8e0 100%); -} - -/* ── Hover / active states: Vista selection blue ── */ -[data-theme='wista'] .track-row:hover, -[data-theme='wista'] .track-row.context-active { - background: rgba(21, 101, 200, 0.08); - box-shadow: inset 3px 0 0 #1565c8; -} - -[data-theme='wista'] .queue-item:hover, -[data-theme='wista'] .queue-item.context-active { - background: rgba(90, 170, 248, 0.18); -} - -[data-theme='wista'] .queue-item.active { - background: rgba(21, 101, 200, 0.28); - border-left: 2px solid #5aaaf8; -} - -[data-theme='wista'] .np-queue-item.active { - background: rgba(21, 101, 200, 0.10); -} - -[data-theme='wista'] .np-queue-item-active { - color: #1565c8; -} - -[data-theme='wista'] .np-queue-item:hover, -[data-theme='wista'] .np-queue-item.context-active { - background: rgba(21, 101, 200, 0.07); -} - -[data-theme='wista'] .np-album-track.active .np-album-track-title, -[data-theme='wista'] .np-album-track.active .np-album-track-num { - color: #1565c8; -} - -[data-theme='wista'] .artist-row:hover { - background: rgba(21, 101, 200, 0.07); - box-shadow: inset 3px 0 0 #1565c8; -} - -[data-theme='wista'] .playlist-row:hover { - background: rgba(21, 101, 200, 0.07); - box-shadow: inset 3px 0 0 #1565c8; -} - -[data-theme='wista'] .settings-tab:hover { - background: rgba(21, 101, 200, 0.08); - color: #1565c8; -} - -[data-theme='wista'] .settings-tab.active { - background: rgba(21, 101, 200, 0.14); - color: #1565c8; - border-color: #1565c8; -} - -[data-theme='wista'] .queue-tab-btn:hover { - background: rgba(21, 101, 200, 0.08); - color: #1565c8; -} - -[data-theme='wista'] .custom-select-trigger:hover { - background: rgba(21, 101, 200, 0.08); -} - -[data-theme='wista'] .custom-select-option:hover { - background: rgba(21, 101, 200, 0.12); -} - -[data-theme='wista'] .artist-ext-link:hover { - background: rgba(21, 101, 200, 0.10); - border-color: #1565c8; -} - -/* ── Queue: dark glass sidebar → light text ── */ -[data-theme='wista'] .queue-item-title { - color: rgba(210, 228, 255, 0.90); -} - -[data-theme='wista'] .queue-item-artist, -[data-theme='wista'] .queue-item-duration { - color: rgba(170, 205, 250, 0.55); -} - -[data-theme='wista'] .queue-item.active .queue-item-artist, -[data-theme='wista'] .queue-item.active .queue-item-duration { - color: rgba(190, 218, 255, 0.75); -} - -[data-theme='wista'] .queue-divider span { - color: rgba(180, 210, 255, 0.38) !important; -} - -[data-theme='wista'] .queue-current-info h3 { - color: rgba(220, 235, 255, 0.92); -} - -[data-theme='wista'] .queue-current-sub { - color: rgba(180, 210, 252, 0.58); -} - -[data-theme='wista'] .queue-tab-btn { - color: rgba(200, 220, 255, 0.62); -} - -[data-theme='wista'] .queue-tab-btn.active { - color: #5aaaf8; -} - -[data-theme='wista'] .queue-round-btn.active { - color: #050810; -} - -/* Connection indicators: muted Vista blue on light bg */ -[data-theme='wista'] .connection-type, -[data-theme='wista'] .connection-server { - color: #6090b8; -} - -/* Lyrics pane sits inside the queue panel (bg-sidebar = #0e1e3e deep navy). - Default --text-primary / --text-muted are near-navy and invisible there — - explicit light tokens get the pane back to AA+. */ -[data-theme='wista'] .lyrics-line, -[data-theme='wista'] .lyrics-status, -[data-theme='wista'] .lyrics-word-synced .lyrics-line { - color: #aac8f0; -} -[data-theme='wista'] .lyrics-line.active, -[data-theme='wista'] .lyrics-word-synced .lyrics-line.active { - color: #ffffff; -} -[data-theme='wista'] .lyrics-line.completed { - color: #aac8f0; -} - -/* ─────────────────────────────────────────── */ - -[data-theme='aqua-quartz'] { - color-scheme: light; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23666666%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - --ctp-crust: #b0b8c8; - --ctp-mantle: #c8d0e0; - --ctp-base: #e8e8e8; - --ctp-surface0: #f4f4f4; - --ctp-surface1: #ececec; - --ctp-surface2: #e0e0e0; - --ctp-overlay0: #888888; - --ctp-overlay1: #666666; - --ctp-overlay2: #444444; - --ctp-text: #111111; - --ctp-subtext1: #333333; - --ctp-subtext0: #555555; - - --ctp-mauve: #3165c4; - --ctp-lavender: #6699dd; - --ctp-green: #28c941; - --ctp-teal: #17a2b8; - --ctp-sky: #5ac8fa; - --ctp-blue: #2060c0; - --ctp-sapphire: #1a4fa0; - --ctp-pink: #ff2d55; - --ctp-flamingo: #ff3b30; - --ctp-rosewater: #ffcc00; - --ctp-yellow: #ffcc00; - --ctp-peach: #ff9500; - --ctp-maroon: #af52de; - --ctp-red: #ff3b30; - - /* Aluminium app bg, blue sidebar token (overridden below) */ - --bg-app: #e8e8e8; - --bg-sidebar: #5a7ab8; - --bg-card: #f4f4f4; - --bg-hover: rgba(49, 101, 196, 0.12); - --bg-player: #c0c0c0; - --bg-glass: rgba(232, 232, 232, 0.85); - - --accent: #3165c4; - --accent-dim: rgba(49, 101, 196, 0.15); - --accent-glow: rgba(49, 101, 196, 0.45); - --volume-accent: #3165c4; - - --text-primary: #111111; - --text-secondary: #333333; - --text-muted: #777777; - - --border: #a0a0a0; - --border-subtle: #cccccc; - - --radius-sm: 4px; - --radius-md: 10px; - --radius-lg: 16px; - --radius-xl: 20px; - --radius-full: 999px; -} - -/* Aluminium pinstripe background */ -[data-theme='aqua-quartz'] .app-shell { - background: #e8e8e8; -} - -/* Iconic Aqua blue Source List sidebar */ -[data-theme='aqua-quartz'] .sidebar { - background: linear-gradient(to bottom, #7090c8 0%, #5a78b8 35%, #4a68a8 70%, #4060a0 100%); - border-right: 1px solid #3a5590; -} - -/* White text/icons in sidebar */ -[data-theme='aqua-quartz'] .sidebar, -[data-theme='aqua-quartz'] .nav-link, -[data-theme='aqua-quartz'] .sidebar-logo-text, -[data-theme='aqua-quartz'] .sidebar-section-label, -[data-theme='aqua-quartz'] .nav-section-label { - color: rgba(255, 255, 255, 0.9) !important; -} - -[data-theme='aqua-quartz'] .nav-link { - color: rgba(255, 255, 255, 0.85) !important; -} - -[data-theme='aqua-quartz'] .nav-link:hover { - background: rgba(255, 255, 255, 0.15) !important; - color: #ffffff !important; -} - -/* Active nav: white pill with blue-tinted text */ -[data-theme='aqua-quartz'] .nav-link.active { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(240, 245, 255, 0.9)) !important; - color: #1a4a9c !important; - border-radius: var(--radius-full) !important; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.9); -} - -[data-theme='aqua-quartz'] .nav-link.active svg { - color: #1a4a9c !important; -} - -/* Brushed aluminum player bar */ -[data-theme='aqua-quartz'] .player-bar { - background: linear-gradient(to bottom, - #d8d8d8 0%, - #d0d0d0 15%, - #c0c0c0 50%, - #b4b4b4 85%, - #acacac 100%); - border-top: 1px solid #909090; - box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6) inset; -} - -[data-theme='aqua-quartz'] .player-track-name, -[data-theme='aqua-quartz'] .player-track-artist, -[data-theme='aqua-quartz'] .player-time { - color: #111111 !important; -} - -/* All buttons get rounded pill shape */ -[data-theme='aqua-quartz'] .btn { - border-radius: var(--radius-full) !important; -} - -/* Aluminium jelly — secondary/surface/ghost buttons */ -[data-theme='aqua-quartz'] .btn-surface, -[data-theme='aqua-quartz'] .btn-ghost { - background: linear-gradient(to bottom, - rgba(255, 255, 255, 0.95) 0%, - #ececec 20%, - #d4d4d4 48%, - #c4c4c4 52%, - #d0d0d0 80%, - #e0e0e0 100%) !important; - border: 1px solid #909090 !important; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85); - color: #111111 !important; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); -} - -[data-theme='aqua-quartz'] .btn-surface:hover, -[data-theme='aqua-quartz'] .btn-ghost:hover { - filter: brightness(1.05); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85); - background: linear-gradient(to bottom, - rgba(255, 255, 255, 0.95) 0%, - #f0f0f0 20%, - #dadada 48%, - #cacaca 52%, - #d6d6d6 80%, - #e4e4e4 100%) !important; -} - -/* Authentic Aqua blue jelly — primary buttons */ -[data-theme='aqua-quartz'] .btn-primary, -[data-theme='aqua-quartz'] .player-btn-primary { - background: linear-gradient(to bottom, - rgba(255, 255, 255, 0.95) 0%, - rgba(160, 195, 255, 0.9) 20%, - #3165c4 48%, - #1a4aaa 52%, - #2555bb 75%, - #4a7ad4 100%) !important; - border: 1px solid #1040a0 !important; - border-radius: var(--radius-full) !important; - box-shadow: 0 2px 8px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7); - color: white !important; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); -} - -[data-theme='aqua-quartz'] .btn-primary:hover, -[data-theme='aqua-quartz'] .player-btn-primary:hover { - filter: brightness(1.08); - box-shadow: 0 3px 12px rgba(49, 101, 196, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7); -} - -/* Aqua progress/seek track + fill */ -[data-theme='aqua-quartz'] .progress-bar-track { - background: linear-gradient(to bottom, #b0b0b0, #d0d0d0); - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); -} - -[data-theme='aqua-quartz'] .progress-bar-fill { - background: linear-gradient(to bottom, - rgba(255, 255, 255, 0.85) 0%, - #6699ee 25%, - #3165c4 55%, - #1a4aaa 56%, - #4070cc 100%); - box-shadow: 0 0 6px rgba(49, 101, 196, 0.5); - border-radius: 999px; -} - -/* Cards with subtle aluminium feel */ -[data-theme='aqua-quartz'] .card { - background: #f4f4f4; - border: 1px solid #c0c0c0; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); -} - -/* Queue / panels on light aluminium bg */ -[data-theme='aqua-quartz'] .queue-panel, -[data-theme='aqua-quartz'] .queue-header { - background: #e8e8e8; - color: #111111; -} - -[data-theme='aqua-quartz'] .queue-item { - color: #111111; -} - -[data-theme='aqua-quartz'] .queue-item-artist, -[data-theme='aqua-quartz'] .queue-item-sub { - color: #555555; -} - -/* Queue round toolbar buttons — aluminium jelly */ -[data-theme='aqua-quartz'] .queue-round-btn { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, #ececec 20%, #d4d4d4 48%, #c4c4c4 52%, #d0d0d0 100%); - border: 1px solid #909090; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85); - color: #333333; -} - -[data-theme='aqua-quartz'] .queue-round-btn:hover:not(:disabled) { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, #f0f0f0 20%, #dadada 48%, #cacaca 52%, #d6d6d6 100%); - color: #111111; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.85); -} - -[data-theme='aqua-quartz'] .queue-round-btn.active { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(160, 195, 255, 0.9) 20%, #3165c4 48%, #1a4aaa 52%, #4a7ad4 100%); - border: 1px solid #1040a0; - color: #ffffff; - box-shadow: 0 2px 8px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7); -} - -/* Hero play button — blue jelly */ -[data-theme='aqua-quartz'] .hero-play-btn { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(160, 195, 255, 0.9) 20%, #3165c4 48%, #1a4aaa 52%, #2555bb 75%, #4a7ad4 100%); - border: 1px solid #1040a0; - border-radius: var(--radius-full); - box-shadow: 0 2px 8px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7); - color: white; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); - transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); -} - -[data-theme='aqua-quartz'] .hero-play-btn:hover { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98) 0%, rgba(185, 215, 255, 0.95) 20%, #3a72d8 48%, #2058c0 52%, #2d62cc 75%, #5585e0 100%); - filter: brightness(1.08); - box-shadow: 0 3px 12px rgba(49, 101, 196, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7); - transform: scale(1.02); -} - -/* Album card hover play button — blue jelly */ -[data-theme='aqua-quartz'] .album-card-details-btn { - background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(160, 195, 255, 0.9) 20%, #3165c4 48%, #1a4aaa 52%, #4a7ad4 100%); - border: 1px solid #1040a0; - box-shadow: 0 3px 10px rgba(49, 101, 196, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7); - color: white; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); -} - -/* ─── Spider-Tech — Spider-Man ─── */ -[data-theme='spider-tech'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E62429%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Palette — suit red, night-sky navy, web black */ - --ctp-crust: #060408; - --ctp-mantle: #0a0610; - --ctp-base: #0e0c18; - --ctp-surface0: #181428; - --ctp-surface1: #241e3a; - --ctp-surface2: #302848; - --ctp-overlay0: #4a3e68; - --ctp-overlay1: #6a5888; - --ctp-overlay2: #9080a8; - --ctp-text: #f0ecf8; - --ctp-subtext1: #d0c8e0; - --ctp-subtext0: #a898c0; - --ctp-mauve: #E62429; - --ctp-lavender: #ff4a50; - --ctp-pink: #ff4a50; - --ctp-flamingo: #cc1a1f; - --ctp-rosewater: #f0ecf8; - --ctp-green: #4adf80; - --ctp-teal: #3ab8d0; - --ctp-sky: #4a88ff; - --ctp-blue: #1e52c8; - --ctp-sapphire: #1e52c8; - --ctp-yellow: #f0c030; - --ctp-peach: #E62429; - --ctp-maroon: #8b0010; - --ctp-red: #E62429; - - --bg-app: #0e0c18; - --bg-sidebar: #0a0610; - --bg-card: #181428; - --bg-hover: #241e3a; - --bg-player: #060408; - --bg-glass: rgba(10, 6, 16, 0.92); - --accent: #E62429; - --accent-dim: rgba(230, 36, 41, 0.14); - --accent-glow: rgba(230, 36, 41, 0.38); - --text-primary: #f0ecf8; - --text-secondary: #9080a8; - --text-muted: #a898c0; - --border: rgba(230, 36, 41, 0.18); - --border-subtle: rgba(230, 36, 41, 0.08); - --border-dropdown: rgba(230, 36, 41, 0.30); - --shadow-dropdown: rgba(0, 0, 0, 0.92); - --positive: #4adf80; - --warning: #f0c030; - --danger: #E62429; - --radius-sm: 2px; - --radius-md: 4px; - --radius-lg: 6px; -} - -/* App shell — Into the Spider-Verse comic halftone dots */ -[data-theme='spider-tech'] .app-shell { - background-image: radial-gradient(circle, - rgba(230, 36, 41, 0.055) 1px, - transparent 1px); - background-size: 14px 14px; -} - -/* Sidebar — CSS spider web radiating from top-left corner */ -[data-theme='spider-tech'] .sidebar { - background: #080510; - border-right: 1px solid rgba(230, 36, 41, 0.22); - background-image: - repeating-radial-gradient(circle at 0% 0%, - transparent 0px, - transparent 38px, - rgba(230, 36, 41, 0.10) 39px, - rgba(230, 36, 41, 0.10) 40px), - repeating-conic-gradient(from 0deg at 0% 0%, - transparent 0deg, - transparent 19deg, - rgba(230, 36, 41, 0.07) 19deg, - rgba(230, 36, 41, 0.07) 20deg); -} - -/* Player bar — deep black with red suit border + glow */ -[data-theme='spider-tech'] .player-bar { - background: #060408; - border-top: 2px solid #E62429; - box-shadow: 0 -6px 28px rgba(230, 36, 41, 0.20), 0 -1px 0 rgba(0, 0, 0, 0.9); -} - -/* Track name — Spider-Man red, bold */ -[data-theme='spider-tech'] .player-track-name { - color: #E62429; - font-weight: 700; - text-shadow: 0 0 10px rgba(230, 36, 41, 0.45), 0 0 24px rgba(230, 36, 41, 0.20); -} - -/* Artist name — Spider suit blue */ -[data-theme='spider-tech'] .player-artist-name { - color: #4a88ff; -} - -/* Nav active — red left bar */ -[data-theme='spider-tech'] .nav-link.active { - background: linear-gradient(90deg, rgba(230, 36, 41, 0.18) 0%, transparent 100%); - border-left: 3px solid #E62429; - color: #E62429; -} - -[data-theme='spider-tech'] .nav-link:hover:not(.active) { - background: linear-gradient(90deg, rgba(230, 36, 41, 0.08) 0%, transparent 100%); - border-left: 3px solid rgba(230, 36, 41, 0.35); -} - -/* Content header */ -[data-theme='spider-tech'] .content-header { - border-bottom: 1px solid rgba(230, 36, 41, 0.14); -} - -/* Cards — red border glow on hover */ -[data-theme='spider-tech'] .album-card:hover, -[data-theme='spider-tech'] .artist-card:hover { - box-shadow: 0 0 0 1px rgba(230, 36, 41, 0.55), 0 4px 20px rgba(230, 36, 41, 0.16); -} - -/* Track / queue rows */ -[data-theme='spider-tech'] .track-row:hover, -[data-theme='spider-tech'] .queue-item:hover { - box-shadow: inset 2px 0 0 #E62429; - background: rgba(230, 36, 41, 0.06); -} - -/* Primary play button — suit red */ -[data-theme='spider-tech'] .player-btn-primary { - background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%); - color: #ffffff; - box-shadow: 0 0 16px rgba(230, 36, 41, 0.50); - border: 1px solid #9c1018; -} - -[data-theme='spider-tech'] .player-btn-primary:hover { - background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%); - box-shadow: 0 0 26px rgba(230, 36, 41, 0.72); -} - -/* btn-primary */ -[data-theme='spider-tech'] .btn-primary { - background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%); - color: #ffffff; - border: 1px solid #9c1018; -} - -[data-theme='spider-tech'] .btn-primary:hover { - background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%); -} - -/* Hero play button */ -[data-theme='spider-tech'] .hero-play-btn { - background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%); - color: #ffffff; - border: 1px solid #9c1018; - box-shadow: 0 2px 16px rgba(230, 36, 41, 0.50); - transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); -} - -[data-theme='spider-tech'] .hero-play-btn:hover { - background: linear-gradient(180deg, #ff6065 0%, #f03035 50%, #cc2025 100%); - box-shadow: 0 4px 26px rgba(230, 36, 41, 0.72); - transform: scale(1.02); -} - -/* Album card overlay button */ -[data-theme='spider-tech'] .album-card-details-btn { - background: linear-gradient(180deg, #ff4a50 0%, #E62429 50%, #b81820 100%); - color: #ffffff; - border: 1px solid #9c1018; - box-shadow: 0 2px 12px rgba(230, 36, 41, 0.45); -} - -/* Scrollbar — dark with red thumb */ -[data-theme='spider-tech'] ::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -[data-theme='spider-tech'] ::-webkit-scrollbar-track { - background: #0a0610; -} - -[data-theme='spider-tech'] ::-webkit-scrollbar-thumb { - background: rgba(230, 36, 41, 0.40); - border-radius: 3px; -} - -[data-theme='spider-tech'] ::-webkit-scrollbar-thumb:hover { - background: #E62429; -} - -/* ── Jayfin (Mediaplayer) ─────────────────────────────────────── */ -[data-theme='jayfin'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23AA5CC3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ── Jellyfin Palette ── */ - --ctp-crust: #050505; - --ctp-mantle: #0c0c0c; - --ctp-base: #141414; - --ctp-surface0: #1e1e1e; - --ctp-surface1: #282828; - --ctp-surface2: #333333; - --ctp-overlay0: #505050; - --ctp-overlay1: #787878; - --ctp-overlay2: #a8a8a8; - --ctp-text: #ffffff; - --ctp-subtext1: #e8e8e8; - --ctp-subtext0: #c0c0c0; - - /* Jellyfin Lila als Hauptakzent, Cyan als Sekundärfarbe */ - --ctp-mauve: #AA5CC3; - --ctp-lavender: #bf7ed4; - --ctp-green: #2ed573; - --ctp-teal: #00c8dc; - --ctp-sky: #00A4DC; - --ctp-blue: #0088cc; - --ctp-sapphire: #0060a0; - --ctp-pink: #c070d8; - --ctp-flamingo: #d488e8; - --ctp-rosewater: #e8b8f8; - --ctp-yellow: #ffd060; - --ctp-peach: #ff9500; - --ctp-maroon: #cc3355; - --ctp-red: #ff4444; - - /* ── Semantische Tokens ── */ - --bg-app: #141414; - --bg-sidebar: #0c0c0c; - --bg-card: #1e1e1e; - --bg-hover: rgba(170, 92, 195, 0.1); - --bg-player: #050505; - --bg-glass: rgba(14, 14, 14, 0.88); - - --accent: #AA5CC3; - --accent-dim: rgba(170, 92, 195, 0.15); - --accent-glow: rgba(170, 92, 195, 0.4); - --volume-accent: #AA5CC3; - - --text-primary: #ffffff; - --text-secondary: #c8c8c8; - --text-muted: #888888; - - --border: #2a2a2a; - --border-subtle: #1e1e1e; - - --positive: #2ed573; - --warning: #ffd060; - --danger: #ff4444; - - --radius-sm: 4px; - --radius-md: 6px; - --radius-lg: 10px; - --radius-xl: 14px; - --radius-full: 999px; -} - -/* Sidebar mit dezenter Tiefe */ -[data-theme='jayfin'] .sidebar { - background: #0c0c0c; - border-right: 1px solid #1e1e1e; -} - -/* Aktiver Nav-Link: 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; -} - -/* ─── MS-DOS ─── */ -@keyframes dos-blink { - - 0%, - 49% { - opacity: 1; - } - - 50%, - 100% { - opacity: 0; - } -} - -[data-theme='dos'] { - color-scheme: dark; - font-family: 'Courier New', Courier, 'Lucida Console', monospace; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23AAAAAA%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Pure ANSI color palette */ - --ctp-crust: #000000; - --ctp-mantle: #000080; - --ctp-base: #0000AA; - --ctp-surface0: #000080; - --ctp-surface1: #0000AA; - --ctp-surface2: #0000CC; - --ctp-overlay0: #8888AA; - --ctp-overlay1: #BBBBCC; - --ctp-overlay2: #E8E8E8; - --ctp-text: #E8E8E8; - --ctp-subtext1: #BBBBCC; - --ctp-subtext0: #8888AA; - --ctp-mauve: #FF55FF; - --ctp-lavender: #FF55FF; - --ctp-pink: #FF55FF; - --ctp-flamingo: #FF5555; - --ctp-rosewater: #FFFFFF; - --ctp-green: #55FF55; - --ctp-teal: #55FFFF; - --ctp-sky: #55FFFF; - --ctp-blue: #5555FF; - --ctp-sapphire: #5555FF; - --ctp-yellow: #FFFF55; - --ctp-peach: #FF5555; - --ctp-maroon: #AA0000; - --ctp-red: #FF5555; - - --bg-app: #0000AA; - --bg-sidebar: #000080; - --bg-card: #000080; - --bg-hover: rgba(170, 170, 170, 0.15); - --bg-player: #000000; - --bg-glass: rgba(0, 0, 128, 0.95); - --accent: #FFFF55; - --accent-dim: rgba(255, 255, 85, 0.15); - --accent-glow: rgba(255, 255, 85, 0.3); - --text-primary: #E8E8E8; - --text-secondary: #BBBBCC; - --text-muted: #8888AA; - --border: #AAAAAA; - --border-subtle: #4444AA; - --border-dropdown: #AAAAAA; - --shadow-dropdown: rgba(0, 0, 0, 0.95); - --positive: #55FF55; - --warning: #FFFF55; - --danger: #FF5555; - /* Square everything — no rounded corners in DOS */ - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 0px; - --radius-full: 0px; -} - -/* Monospace override — html inherits to most elements; form controls need explicit override */ -[data-theme='dos'] button, -[data-theme='dos'] input, -[data-theme='dos'] textarea, -[data-theme='dos'] select { - font-family: 'Courier New', Courier, 'Lucida Console', monospace; -} - -/* Sidebar — dark navy with CRT scanlines, thick grey right border like a DOS panel edge */ -[data-theme='dos'] .sidebar { - background-color: #000080; - background-image: repeating-linear-gradient(0deg, - rgba(0, 0, 0, 0.20) 0px, - rgba(0, 0, 0, 0.20) 1px, - transparent 1px, - transparent 3px); - border-right: 2px solid #AAAAAA; -} - -/* Active nav — classic DOS inverted selection */ -[data-theme='dos'] .nav-link.active { - background: #AAAAAA; - color: #000080; - border-left: none; - font-weight: 700; -} - -[data-theme='dos'] .nav-link:hover:not(.active) { - background: rgba(170, 170, 170, 0.18); - color: #FFFF55; -} - -/* Player bar — pure black, the C:\> command prompt */ -[data-theme='dos'] .player-bar { - background-color: #000000; - background-image: repeating-linear-gradient(0deg, - rgba(0, 0, 0, 0.20) 0px, - rgba(0, 0, 0, 0.20) 1px, - transparent 1px, - transparent 3px); - border-top: 2px solid #AAAAAA; - box-shadow: none; -} - -/* Track name — bright yellow with blinking block cursor */ -[data-theme='dos'] .player-track-name { - color: #FFFF55; - text-shadow: none; -} - -[data-theme='dos'] .player-track-name::after { - content: '\258B'; - animation: dos-blink 1s step-end infinite; - margin-left: 3px; - font-size: 0.8em; - vertical-align: baseline; -} - -/* Artist name — bright cyan (ANSI 11) */ -[data-theme='dos'] .player-artist-name { - color: #55FFFF; -} - -/* Content header — simple grey border, no ornate gradient */ -[data-theme='dos'] .content-header { - border-bottom: 1px solid #AAAAAA; -} - -/* Album/artist cards — flat navy panels with grey border */ -[data-theme='dos'] .album-card, -[data-theme='dos'] .artist-card { - background: #000080; - border: 1px solid #AAAAAA; - box-shadow: none; -} - -[data-theme='dos'] .album-card:hover, -[data-theme='dos'] .artist-card:hover { - background: #0000AA; - border-color: #FFFFFF; - box-shadow: none; -} - -/* Track / queue row hover — inverted DOS selection */ -[data-theme='dos'] .track-row:hover, -[data-theme='dos'] .queue-item:hover { - background: #AAAAAA !important; - color: #000080; - box-shadow: none; -} - -/* Primary play button — flat grey, sharp, DOS dialog style */ -[data-theme='dos'] .player-btn-primary { - background: #AAAAAA; - color: #000000; - border: 2px solid #FFFFFF; - box-shadow: none; -} - -[data-theme='dos'] .player-btn-primary:hover { - background: #FFFFFF; - color: #000000; - box-shadow: none; - transform: none; -} - -/* btn-primary — uppercase DOS dialog button */ -[data-theme='dos'] .btn-primary { - background: #AAAAAA; - color: #000000; - border: 1px solid #FFFFFF; - text-transform: uppercase; - letter-spacing: 0.06em; - box-shadow: none; -} - -[data-theme='dos'] .btn-primary:hover { - background: #FFFFFF; - color: #000000; - box-shadow: none; -} - -/* btn-surface */ -[data-theme='dos'] .btn-surface, -[data-theme='dos'] .btn { - border: 1px solid #AAAAAA; - box-shadow: none; -} - -/* Hero play button */ -[data-theme='dos'] .hero-play-btn { - background: #AAAAAA; - color: #000000; - border: 2px solid #FFFFFF; - text-transform: uppercase; - letter-spacing: 0.08em; - box-shadow: none; - transition: background var(--transition-fast), color var(--transition-fast); -} - -[data-theme='dos'] .hero-play-btn:hover { - background: #FFFFFF; - color: #000000; - transform: none; - filter: none; - box-shadow: none; -} - -/* Album card overlay play button */ -[data-theme='dos'] .album-card-details-btn { - background: #AAAAAA; - color: #000000; - border: 2px solid #FFFFFF; - box-shadow: none; -} - -[data-theme='dos'] .album-card-details-btn:hover { - background: #FFFFFF; - color: #000000; -} - -/* Queue round buttons — square in DOS */ -[data-theme='dos'] .queue-round-btn { - border: 1px solid #AAAAAA; - box-shadow: none; -} - -[data-theme='dos'] .queue-round-btn.active { - background: #AAAAAA; - color: #000000; - border-color: #FFFFFF; - box-shadow: none; -} - -/* Input fields */ -[data-theme='dos'] input, -[data-theme='dos'] textarea { - background: #000080; - border: 1px solid #AAAAAA; - border-radius: 0; -} - -[data-theme='dos'] input:focus, -[data-theme='dos'] textarea:focus { - border-color: #FFFF55; - outline: none; - box-shadow: none; -} - -/* Scrollbar — wide 16px DOS style with sharp thumb */ -[data-theme='dos'] ::-webkit-scrollbar { - width: 16px; - height: 16px; -} - -[data-theme='dos'] ::-webkit-scrollbar-track { - background: #000080; - border-left: 1px solid #AAAAAA; -} - -[data-theme='dos'] ::-webkit-scrollbar-thumb { - background: #AAAAAA; - border-radius: 0; - border: 1px solid #FFFFFF; -} - -[data-theme='dos'] ::-webkit-scrollbar-thumb:hover { - background: #FFFFFF; -} - - -/* ─── Unix Shell ─── */ -@keyframes unix-cursor-blink { - - 0%, - 49% { - opacity: 1; - } - - 50%, - 100% { - opacity: 0; - } -} - -[data-theme='unix'] { - color-scheme: dark; - font-family: 'Courier New', Courier, 'Lucida Console', monospace; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2322C55E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* ANSI colors mapped to semantic palette */ - --ctp-crust: #000000; - --ctp-mantle: #0a0a0a; - --ctp-base: #111111; - --ctp-surface0: #1a1a1a; - --ctp-surface1: #222222; - --ctp-surface2: #2e2e2e; - --ctp-overlay0: #666666; - --ctp-overlay1: #888888; - --ctp-overlay2: #AAAAAA; - --ctp-text: #C8C8C8; - --ctp-subtext1: #AAAAAA; - --ctp-subtext0: #888888; - --ctp-mauve: #C678DD; - --ctp-lavender: #5588FF; - --ctp-pink: #E06C75; - --ctp-flamingo: #FF6B6B; - --ctp-rosewater: #FFFFFF; - --ctp-green: #22C55E; - --ctp-teal: #55FFFF; - --ctp-sky: #55FFFF; - --ctp-blue: #5588FF; - --ctp-sapphire: #5588FF; - --ctp-yellow: #E5C07B; - --ctp-peach: #E06C75; - --ctp-maroon: #AA0000; - --ctp-red: #E06C75; - - --bg-app: #000000; - --bg-sidebar: #0a0a0a; - --bg-card: #111111; - --bg-hover: #1a1a1a; - --bg-player: #000000; - --bg-glass: rgba(0, 0, 0, 0.92); - --accent: #22C55E; - --accent-dim: rgba(34, 197, 94, 0.10); - --accent-glow: rgba(34, 197, 94, 0.25); - --text-primary: #C8C8C8; - --text-secondary: #999999; - --text-muted: #666666; - --border: #222222; - --border-subtle: #1a1a1a; - --border-dropdown: #333333; - --shadow-dropdown: rgba(0, 0, 0, 0.95); - --positive: #22C55E; - --warning: #E5C07B; - --danger: #E06C75; - --radius-sm: 0px; - --radius-md: 0px; - --radius-lg: 0px; - --radius-full: 0px; -} - -/* Monospace override — html inherits to most elements; form controls need explicit override */ -[data-theme='unix'] button, -[data-theme='unix'] input, -[data-theme='unix'] textarea, -[data-theme='unix'] select { - font-family: 'Courier New', Courier, 'Lucida Console', monospace; -} - -/* Sidebar — slightly off-black, thin separator */ -[data-theme='unix'] .sidebar { - background: #0a0a0a; - border-right: 1px solid #222222; -} - -/* Nav active — green left bar */ -[data-theme='unix'] .nav-link.active { - background: rgba(34, 197, 94, 0.10); - border-left: 2px solid #22C55E; - color: #22C55E; -} - -[data-theme='unix'] .nav-link:hover:not(.active) { - background: rgba(34, 197, 94, 0.05); - color: #C8C8C8; -} - -/* Player bar — pure black, thin grey separator */ -[data-theme='unix'] .player-bar { - background-color: #000000; - background-image: repeating-linear-gradient(0deg, - rgba(0, 0, 0, 0.10) 0px, - rgba(0, 0, 0, 0.10) 1px, - transparent 1px, - transparent 2px); - border-top: 1px solid #222222; - box-shadow: none; -} - -/* Track name — white text, green $ prompt prefix, blinking _ cursor */ -[data-theme='unix'] .player-track-name { - color: #FFFFFF; - text-shadow: none; -} - -[data-theme='unix'] .player-track-name::before { - content: '$ '; - color: #22C55E; - font-weight: 700; -} - -[data-theme='unix'] .player-track-name::after { - content: '_'; - animation: unix-cursor-blink 1s step-end infinite; - color: #C8C8C8; - margin-left: 1px; -} - -/* Artist name — ANSI bright blue (ls directory color) */ -[data-theme='unix'] .player-artist-name { - color: #5588FF; -} - -/* Content header — minimal grey rule */ -[data-theme='unix'] .content-header { - border-bottom: 1px solid #1e1e1e; -} - -/* Album/artist cards — dark panel, fine border */ -[data-theme='unix'] .album-card, -[data-theme='unix'] .artist-card { - background: #111111; - border: 1px solid #1e1e1e; - box-shadow: none; -} - -[data-theme='unix'] .album-card:hover, -[data-theme='unix'] .artist-card:hover { - background: #1a1a1a; - border-color: #22C55E; - box-shadow: none; -} - -/* Track / queue row hover — green left accent */ -[data-theme='unix'] .track-row:hover, -[data-theme='unix'] .queue-item:hover { - background: rgba(34, 197, 94, 0.06); - box-shadow: inset 2px 0 0 #22C55E; -} - -/* Primary play button — solid green */ -[data-theme='unix'] .player-btn-primary { - background: #22C55E; - color: #000000; - border: none; - box-shadow: none; -} - -[data-theme='unix'] .player-btn-primary:hover { - background: #16A34A; - box-shadow: none; - transform: none; -} - -/* btn-primary */ -[data-theme='unix'] .btn-primary { - background: #22C55E; - color: #000000; - border: none; - box-shadow: none; -} - -[data-theme='unix'] .btn-primary:hover { - background: #16A34A; - box-shadow: none; -} - -/* Hero play button */ -[data-theme='unix'] .hero-play-btn { - background: #22C55E; - color: #000000; - border: none; - text-transform: lowercase; - letter-spacing: 0.02em; - box-shadow: none; - transition: background var(--transition-fast), transform var(--transition-fast); -} - -[data-theme='unix'] .hero-play-btn:hover { - background: #16A34A; - transform: scale(1.02); - filter: none; - box-shadow: none; -} - -/* Album card overlay button */ -[data-theme='unix'] .album-card-details-btn { - background: #22C55E; - color: #000000; - border: none; - box-shadow: none; -} - -[data-theme='unix'] .album-card-details-btn:hover { - background: #16A34A; -} - -/* Queue round buttons */ -[data-theme='unix'] .queue-round-btn { - border: 1px solid #222222; - box-shadow: none; -} - -[data-theme='unix'] .queue-round-btn.active { - background: #22C55E; - color: #000000; - border-color: #22C55E; - box-shadow: none; -} - -/* Input fields */ -[data-theme='unix'] input, -[data-theme='unix'] textarea { - background: #0a0a0a; - border: 1px solid #222222; - border-radius: 0; -} - -[data-theme='unix'] input:focus, -[data-theme='unix'] textarea:focus { - border-color: #22C55E; - outline: none; - box-shadow: none; -} - -/* Scrollbar — thin 6px, modern terminal style */ -[data-theme='unix'] ::-webkit-scrollbar { - width: 6px; - height: 6px; -} - -[data-theme='unix'] ::-webkit-scrollbar-track { - background: #0a0a0a; -} - -[data-theme='unix'] ::-webkit-scrollbar-thumb { - background: #333333; - border-radius: 0; -} - -[data-theme='unix'] ::-webkit-scrollbar-thumb:hover { - background: #22C55E; -} - -/* Connection indicator — server name and Last.fm username */ -[data-theme='unix'] .connection-type, -[data-theme='unix'] .connection-server { - color: #888888; -} - -/* Connection indicators + Now Playing username */ -[data-theme='spider-tech'] .connection-type, -[data-theme='spider-tech'] .connection-server { - color: #9080a8; -} - -/* Connection indicators */ -[data-theme='dos'] .connection-type, -[data-theme='dos'] .connection-server { - color: #AAAAAA; -} - -/* Track row hover — all child text to navy so nothing drowns on grey */ -[data-theme='dos'] .track-row:hover .track-title, -[data-theme='dos'] .track-row:hover .track-num, -[data-theme='dos'] .track-row:hover .track-artist, -[data-theme='dos'] .track-row:hover .track-duration, -[data-theme='dos'] .track-row:hover .track-codec, -[data-theme='dos'] .track-row:hover button, -[data-theme='dos'] .track-row.context-active .track-title, -[data-theme='dos'] .track-row.context-active .track-num, -[data-theme='dos'] .track-row.context-active .track-artist, -[data-theme='dos'] .track-row.context-active .track-duration, -[data-theme='dos'] .track-row.context-active .track-codec, -[data-theme='dos'] .track-row.context-active button { - color: #000080 !important; - background: transparent !important; -} - -/* ═══════════════════════════════════════════════════════════════════ - HORDE — World of Warcraft, Durotar blood-red earth, forge-fire - ═══════════════════════════════════════════════════════════════════ */ -[data-theme='horde'] { - /* Catppuccin-compatible palette — dark blood-iron */ - --ctp-base: #1a0500; - --ctp-mantle: #140300; - --ctp-crust: #0e0200; - --ctp-surface0: #2e0a02; - --ctp-surface1: #3e1104; - --ctp-surface2: #521806; - --ctp-overlay0: #8a5030; - --ctp-overlay1: #a06038; - --ctp-overlay2: #b87048; - --ctp-subtext0: #c88850; - --ctp-subtext1: #d89860; - --ctp-text: #e8d4b8; - --ctp-lavender: #cc4422; - --ctp-blue: #cc2200; - --ctp-sapphire: #aa1800; - --ctp-sky: #dd3300; - --ctp-teal: #cc5500; - --ctp-green: #887722; - --ctp-yellow: #ffd890; - --ctp-peach: #ff8844; - --ctp-maroon: #991100; - --ctp-red: #cc2200; - --ctp-mauve: #cc4422; - --ctp-pink: #dd5533; - --ctp-flamingo: #ee6644; - --ctp-rosewater: #ffaa66; - - /* Semantic tokens */ - --bg-app: #1a0500; - --bg-sidebar: #110300; - --bg-player: #120400; - --bg-card: #2e0a02; - --bg-card-hover: #3e1104; - --bg-input: #2e0a02; - --bg-overlay: rgba(26, 5, 0, 0.92); - --bg-selection: rgba(204, 34, 0, 0.25); - --border-subtle: rgba(140, 60, 20, 0.30); - --border-default: rgba(180, 80, 30, 0.35); - --border-strong: rgba(220, 120, 50, 0.50); - --text-primary: #e8d4b8; - --text-secondary: #c09070; - --text-muted: #a07848; - --text-disabled: #5a3820; - --accent: #cc2200; - --accent-hover: #e02800; - --accent-glow: rgba(204, 34, 0, 0.35); - --accent-subtle: rgba(204, 34, 0, 0.15); - --danger: #ff4422; - --success: #887722; - --warning: #ff8844; - --nav-active-bg: rgba(204, 34, 0, 0.22); - --nav-active-text: #ffd890; - --scrollbar-thumb: rgba(140, 50, 10, 0.60); - --scrollbar-track: transparent; - --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.70); - --shadow-player: 0 -4px 20px rgba(150, 30, 0, 0.25); - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --space-1: 4px; - --space-2: 8px; - --space-3: 12px; - --space-4: 16px; - --space-5: 20px; - --space-6: 24px; -} - -/* Track name — blood-gold glow, as if lit by forge-fire */ -[data-theme='horde'] .player-track-name, -[data-theme='horde'] .queue-track-title { - color: #ffd890; - text-shadow: 0 0 16px rgba(220, 80, 0, 0.55), 0 0 4px rgba(220, 80, 0, 0.25); -} - -/* Sidebar — iron plate lines + subtle red glow on active */ -[data-theme='horde'] .sidebar { - background-color: #110300; - border-right: 1px solid rgba(140, 40, 10, 0.35); -} - -/* Nav active — ember glow */ -[data-theme='horde'] .sidebar-nav-item.active { - background: rgba(204, 34, 0, 0.20); - border-left: 3px solid #cc2200; - box-shadow: inset 0 0 12px rgba(204, 34, 0, 0.10); -} - -/* Player bar — forge-fire glow from below */ -[data-theme='horde'] .player-bar { - background-color: #120400; - background-image: linear-gradient(to bottom, rgba(80, 10, 0, 0.35), transparent); - border-top: 1px solid rgba(180, 60, 20, 0.40); - box-shadow: 0 -4px 24px rgba(150, 30, 0, 0.30); -} - -/* App-shell — safe single-pass radial, no repeating */ -[data-theme='horde'] .app-shell { - background: radial-gradient(ellipse at 65% 110%, rgba(160, 25, 0, 0.18) 0%, transparent 55%); -} - -/* Cards — iron-tinted hover */ -[data-theme='horde'] .album-card:hover, -[data-theme='horde'] .artist-card:hover { - box-shadow: 0 4px 18px rgba(180, 40, 0, 0.30); - border-color: rgba(200, 60, 10, 0.50); -} - -/* Connection indicators */ -[data-theme='horde'] .connection-type, -[data-theme='horde'] .connection-server { - color: #a07848; -} - - -/* ═══════════════════════════════════════════════════════════════════ - ALLIANCE — World of Warcraft, Stormwind navy, cathedral stone & gold - ═══════════════════════════════════════════════════════════════════ */ -[data-theme='alliance'] { - /* Catppuccin-compatible palette — deep navy / cathedral stone */ - --ctp-base: #06101e; - --ctp-mantle: #040c18; - --ctp-crust: #020810; - --ctp-surface0: #0c1e34; - --ctp-surface1: #122440; - --ctp-surface2: #1a2e50; - --ctp-overlay0: #506888; - --ctp-overlay1: #607898; - --ctp-overlay2: #7088a8; - --ctp-subtext0: #8098b8; - --ctp-subtext1: #90a8c8; - --ctp-text: #d8e8f8; - --ctp-lavender: #5588cc; - --ctp-blue: #3388cc; - --ctp-sapphire: #2266aa; - --ctp-sky: #44aadd; - --ctp-teal: #3399cc; - --ctp-green: #88bb44; - --ctp-yellow: #f0c840; - --ctp-peach: #dd9944; - --ctp-maroon: #aa3322; - --ctp-red: #cc4433; - --ctp-mauve: #7766cc; - --ctp-pink: #997acc; - --ctp-flamingo: #aa88cc; - --ctp-rosewater: #bbaacc; - - /* Semantic tokens */ - --bg-app: #06101e; - --bg-sidebar: #040c18; - --bg-player: #050e1a; - --bg-card: #0c1e34; - --bg-card-hover: #122440; - --bg-input: #0c1e34; - --bg-overlay: rgba(6, 16, 30, 0.92); - --bg-selection: rgba(51, 136, 204, 0.25); - --border-subtle: rgba(60, 100, 160, 0.28); - --border-default: rgba(80, 120, 180, 0.35); - --border-strong: rgba(120, 160, 210, 0.50); - --text-primary: #d8e8f8; - --text-secondary: #8098b8; - --text-muted: #6880a0; - --text-disabled: #2a3e58; - --accent: #3388cc; - --accent-hover: #4499dd; - --accent-glow: rgba(51, 136, 204, 0.35); - --accent-subtle: rgba(51, 136, 204, 0.15); - --danger: #cc4433; - --success: #88bb44; - --warning: #dd9944; - --nav-active-bg: rgba(51, 136, 204, 0.20); - --nav-active-text: #e8f4ff; - --scrollbar-thumb: rgba(60, 110, 180, 0.55); - --scrollbar-track: transparent; - --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.60); - --shadow-player: 0 -4px 20px rgba(20, 70, 160, 0.22); - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --space-1: 4px; - --space-2: 8px; - --space-3: 12px; - --space-4: 16px; - --space-5: 20px; - --space-6: 24px; -} - -/* Track name — paladin holy-light glow */ -[data-theme='alliance'] .player-track-name, -[data-theme='alliance'] .queue-track-title { - color: #e8f4ff; - text-shadow: 0 0 14px rgba(80, 160, 220, 0.50), 0 0 4px rgba(80, 160, 220, 0.20); -} - -/* Sidebar — cathedral stone columns with gold right-border */ -[data-theme='alliance'] .sidebar { - background-color: #040c18; - border-right: 2px solid rgba(200, 170, 50, 0.30); -} - -/* Nav active — royal blue with gold left accent */ -[data-theme='alliance'] .sidebar-nav-item.active { - background: rgba(51, 136, 204, 0.20); - border-left: 3px solid #f0c840; - box-shadow: inset 0 0 12px rgba(51, 136, 204, 0.10); -} - -/* Player bar — paladin aura glow */ -[data-theme='alliance'] .player-bar { - background-color: #050e1a; - background-image: linear-gradient(to bottom, rgba(20, 60, 130, 0.30), transparent); - border-top: 1px solid rgba(100, 140, 200, 0.35); - box-shadow: 0 -4px 22px rgba(30, 80, 180, 0.22); -} - -/* App-shell — safe single-pass radial, no repeating */ -[data-theme='alliance'] .app-shell { - background: radial-gradient(ellipse at 38% 110%, rgba(25, 70, 170, 0.15) 0%, transparent 55%); -} - -/* Cards — blue-glow hover */ -[data-theme='alliance'] .album-card:hover, -[data-theme='alliance'] .artist-card:hover { - box-shadow: 0 4px 18px rgba(40, 100, 200, 0.28); - border-color: rgba(80, 140, 210, 0.50); -} - -/* Connection indicators */ -[data-theme='alliance'] .connection-type, -[data-theme='alliance'] .connection-server { - color: #6880a0; -} - -/* ═══════════════════════════════════════════════════════════════════ - W11 — Windows 11 Fluent Design, dark mode, Mica material - ═══════════════════════════════════════════════════════════════════ */ -[data-theme='w11'] { - /* Catppuccin-compatible palette — Fluent v2 dark neutrals - Values aligned with Microsoft's actual Windows 11 Dark Mode tokens: - text primary #ffffff (was #f3f3f3 — now matches W11 true white) - text secondary #cfcfcf (was #9a9a9a — W11 Text Secondary Dark, 9.6:1) - text tertiary #a0a0a0 (was #797979 — W11 Text Tertiary Dark, 6.3:1) - control strong rgba(255,255,255,0.40) (was 0.18 — perceptible structural borders) - accent fill #0078d4 kept (for buttons with white text, 4.3:1 AA) - accent text via .w11-link helper → #60cdff (Fluent Accent Text Dark) - danger dark #ff99a4 (Fluent Critical Foreground Dark, 8:1 AAA) */ - --ctp-base: #202020; - --ctp-mantle: #1c1c1c; - --ctp-crust: #181818; - --ctp-surface0: #2c2c2c; - --ctp-surface1: #3b3b3b; /* raised from #363636 for grip/border perceptibility */ - --ctp-surface2: #454545; - --ctp-overlay0: #868686; /* raised from #797979 */ - --ctp-overlay1: #a0a0a0; - --ctp-overlay2: #b4b4b4; - --ctp-subtext0: #cfcfcf; - --ctp-subtext1: #e4e4e4; - --ctp-text: #ffffff; - --ctp-lavender: #6ccbf8; - --ctp-blue: #0078d4; - --ctp-sapphire: #0067c0; - --ctp-sky: #4cc2ff; - --ctp-teal: #00b7c3; - --ctp-green: #6ccb5f; - --ctp-yellow: #f9f1a5; - --ctp-peach: #f7630c; - --ctp-maroon: #ff99a4; /* Fluent Critical Foreground Dark */ - --ctp-red: #ff99a4; - --ctp-mauve: #8764b8; - --ctp-pink: #b146c2; - --ctp-flamingo: #e3008c; - --ctp-rosewater: #f5e1ff; - - /* Semantic tokens */ - --bg-app: #202020; - --bg-sidebar: #2b2b2b; - --bg-player: #1c1c1c; - --bg-card: #2c2c2c; - --bg-card-hover: #3b3b3b; - --bg-input: #2c2c2c; - --bg-overlay: rgba(32, 32, 32, 0.92); - --bg-selection: rgba(0, 120, 212, 0.30); - /* Borders — raised to match Fluent v2 Stroke Control tokens */ - --bg-glass: rgba(32, 32, 32, 0.92); - --border-subtle: rgba(255, 255, 255, 0.08); /* Stroke Divider Dark */ - --border-default: rgba(255, 255, 255, 0.18); /* Stroke Control Default Dark */ - --border-strong: rgba(255, 255, 255, 0.40); /* Stroke Control Strong Dark */ - --border: rgba(255, 255, 255, 0.18); - --text-primary: #ffffff; /* 15.9:1 — AAA ✓ (W11 true white) */ - --text-secondary: #cfcfcf; /* 9.6:1 — AAA ✓ (raised from 5.8:1) */ - --text-muted: #a0a0a0; /* 6.3:1 — AAA near-miss (raised from 4.0:1 below AA) */ - --text-disabled: #5a5a5a; - --accent: #0078d4; /* W11 brand blue — kept for button fills (white text 4.3:1 AA) */ - --accent-hover: #1086e0; - --accent-text: #60cdff; /* Fluent Accent Text Dark — 7.2:1 AAA ✓ for link/text usage */ - --accent-glow: rgba(0, 120, 212, 0.30); - --accent-subtle: rgba(0, 120, 212, 0.15); - --accent-dim: rgba(0, 120, 212, 0.18); - --danger: #ff99a4; /* Fluent Critical Foreground Dark — 8.0:1 AAA ✓ */ - --positive: #6ccb5f; /* W11 Success — 7.8:1 AAA ✓ */ - --success: #6ccb5f; - --warning: #fce100; /* W11 Caution Dark (brighter yellow) — 13.2:1 AAA ✓ */ - --volume-accent: #0078d4; - --nav-active-bg: rgba(0, 120, 212, 0.22); - --nav-active-text: #ffffff; - --scrollbar-thumb: rgba(255, 255, 255, 0.28); - --scrollbar-track: transparent; - --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.50); - --shadow-player: 0 -1px 0 rgba(255, 255, 255, 0.08); - --radius-sm: 6px; - --radius-md: 8px; - --radius-lg: 12px; - --space-1: 4px; - --space-2: 8px; - --space-3: 12px; - --space-4: 16px; - --space-5: 20px; - --space-6: 24px; - --waveform-played: #60cdff; /* Accent Text Dark — visible on dark bg */ - --waveform-buffered: #868686; - --waveform-unplayed: #3b3b3b; -} - -/* ─── Windows 11 Dark — component overrides ───────────────────────────── - Raise column grip + structural borders to perceptible contrasts that - match Fluent v2 Stroke tokens, and hand-tune a handful of elements - that hardcode the old accent. */ - -/* Column resize grip — was #363636 on #2c2c2c = 1.16:1 (invisible) */ -[data-theme='w11'] .col-resize-handle::after { - background: var(--ctp-overlay1); /* #a0a0a0 → 6.3:1 on bg-card */ - width: 2px; -} - -/* Focus ring — Fluent keyboard focus indicator */ -[data-theme='w11'] *:focus-visible { - outline: 2px solid var(--accent-text); /* #60cdff — high contrast */ - outline-offset: 2px; -} - -/* Scrollbar thumb — Fluent neutral, perceptible against dark surfaces */ -[data-theme='w11'] ::-webkit-scrollbar-thumb { - background: var(--ctp-overlay0); -} -[data-theme='w11'] *:hover::-webkit-scrollbar-thumb, -[data-theme='w11'] .is-scrolling::-webkit-scrollbar-thumb { - background: var(--ctp-overlay2); -} - -/* Connection indicators inherit secondary colour (readability improved via - raised --text-secondary). No background box (they're inline spans). */ -[data-theme='w11'] .connection-type { - color: var(--text-primary); -} -[data-theme='w11'] .connection-server { - color: var(--text-secondary); -} - -/* Track name — pure white (Fluent is minimal, uses true white not off-white) */ -[data-theme='w11'] .player-track-name, -[data-theme='w11'] .queue-track-title { - color: #ffffff; -} - -/* Sidebar — Mica-like: very slightly lighter than app bg, Fluent Divider Dark */ -[data-theme='w11'] .sidebar { - background-color: #2b2b2b; - border-right: 1px solid rgba(255, 255, 255, 0.12); -} - -/* Nav active — Fluent accent fill, rounded */ -[data-theme='w11'] .sidebar-nav-item.active { - background: rgba(0, 120, 212, 0.22); - border-left: 3px solid #0078d4; -} - -/* Player bar — taskbar-inspired: very dark, Fluent Divider Dark */ -[data-theme='w11'] .player-bar { - background-color: #1c1c1c; - border-top: 1px solid rgba(255, 255, 255, 0.12); - box-shadow: none; -} - -/* App-shell — flat, no gradient (Fluent dark is clean/minimal) */ -[data-theme='w11'] .app-shell { - background: none; -} - -/* Cards — Fluent hover: slight elevation via border brightening */ -[data-theme='w11'] .album-card:hover, -[data-theme='w11'] .artist-card:hover { - box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); - border-color: rgba(255, 255, 255, 0.28); -} - - -/* ── Barb & Ken (Games) ─────────────────────────────────────── */ -[data-theme='barb-and-ken'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF1B8D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Barbieland palette */ - --ctp-crust: #07000b; - --ctp-mantle: #110009; - --ctp-base: #1a000f; - --ctp-surface0: #2e0019; - --ctp-surface1: #450026; - --ctp-surface2: #5c0032; - --ctp-overlay0: #8c1455; - --ctp-overlay1: #b82070; - --ctp-overlay2: #d93d8a; - --ctp-text: #ffe6f3; - --ctp-subtext1: #ffb8da; - --ctp-subtext0: #ff80be; - - /* Barbie Pink spectrum */ - --ctp-mauve: #FF1B8D; - --ctp-pink: #FF69B4; - --ctp-flamingo: #FF1493; - --ctp-rosewater: #FFD6EC; - --ctp-lavender: #FFB3D9; - --ctp-maroon: #c4005e; - --ctp-red: #FF4466; - - /* Ken — powder blue as accent-2 */ - --ctp-blue: #89CFF0; - --ctp-sapphire: #5BC8F5; - --ctp-sky: #AAE8FF; - --ctp-teal: #70d8f2; - - --ctp-green: #a6e3a1; - --ctp-yellow: #FFE4A8; - --ctp-peach: #FFB8D0; - - --bg-app: #1a000f; - --bg-sidebar: #110009; - --bg-card: #2e0019; - --bg-hover: rgba(255, 27, 141, 0.12); - --bg-player: #07000b; - --bg-glass: rgba(26, 0, 15, 0.88); - - --accent: #FF1B8D; - --accent-dim: rgba(255, 27, 141, 0.15); - --accent-glow: rgba(255, 27, 141, 0.45); - --volume-accent: #89CFF0; - - --text-primary: #ffe6f3; - --text-secondary: #ffb8da; - --text-muted: #7a3055; - --border: rgba(255, 27, 141, 0.28); - --border-subtle: rgba(255, 27, 141, 0.12); - --border-dropdown: rgba(255, 27, 141, 0.3); - --shadow-dropdown: rgba(7, 0, 11, 0.9); - - --positive: #a6e3a1; - --warning: #FFE4A8; - --danger: #FF4466; - - /* Bubbly, soft rounding — very Barbie */ - --radius-sm: 10px; - --radius-md: 14px; - --radius-lg: 20px; -} - -/* Polka-dot sidebar — Barbie's dreamhouse wallpaper */ -[data-theme='barb-and-ken'] .sidebar { - background: - radial-gradient(circle, rgba(255, 27, 141, 0.18) 2px, transparent 2px), - radial-gradient(circle, rgba(137, 207, 240, 0.10) 2px, transparent 2px), - linear-gradient(180deg, #110009 0%, #1a000f 100%); - background-size: 22px 22px, 22px 22px, 100% 100%; - background-position: 0 0, 11px 11px, 0 0; - border-right: 1px solid rgba(255, 27, 141, 0.35); -} - -/* Player bar — deep magenta gradient, hot pink top border */ -[data-theme='barb-and-ken'] .player-bar { - background: linear-gradient(180deg, #1a000f 0%, #07000b 100%); - border-top: 2px solid #FF1B8D; - box-shadow: 0 -6px 24px rgba(255, 27, 141, 0.18); -} - -/* Track name — glitter shimmer */ -@keyframes barbie-shimmer { - 0% { - background-position: -200% center; - } - - 100% { - background-position: 200% center; - } -} - -[data-theme='barb-and-ken'] .player-track-name { - background: linear-gradient(90deg, - #FF1B8D 0%, - #FF69B4 25%, - #ffffff 50%, - #FF69B4 75%, - #FF1B8D 100%); - background-size: 200% auto; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - animation: barbie-shimmer 4s linear infinite; - font-weight: 700; -} - -/* Artist name — Ken blue */ -[data-theme='barb-and-ken'] .player-artist-name { - color: #89CFF0; -} - -/* Active nav — pink left border glow */ -[data-theme='barb-and-ken'] .nav-link.active { - background: linear-gradient(90deg, rgba(255, 27, 141, 0.22) 0%, transparent 100%); - color: #FF69B4 !important; - border-left: 3px solid #FF1B8D; - text-shadow: 0 0 8px rgba(255, 27, 141, 0.4); -} - -[data-theme='barb-and-ken'] .nav-link:hover:not(.active) { - background: rgba(255, 27, 141, 0.08); -} - -/* Content header — subtle pink rule */ -[data-theme='barb-and-ken'] .content-header { - border-bottom: 1px solid rgba(255, 27, 141, 0.2); - background: rgba(26, 0, 15, 0.6); - backdrop-filter: blur(12px); -} - -/* Primary buttons — hot pink gradient */ -[data-theme='barb-and-ken'] .btn-primary, -[data-theme='barb-and-ken'] .player-btn-primary, -[data-theme='barb-and-ken'] .hero-play-btn { - background: linear-gradient(135deg, #FF1B8D 0%, #FF69B4 100%); - box-shadow: 0 4px 16px rgba(255, 27, 141, 0.45); - color: #fff !important; - border: none; -} - -[data-theme='barb-and-ken'] .btn-primary:hover, -[data-theme='barb-and-ken'] .player-btn-primary:hover, -[data-theme='barb-and-ken'] .hero-play-btn:hover { - background: linear-gradient(135deg, #e5007a 0%, #FF1B8D 100%); - box-shadow: 0 6px 22px rgba(255, 27, 141, 0.60); -} - -/* Cards — pink border glow on hover */ -[data-theme='barb-and-ken'] .album-card, -[data-theme='barb-and-ken'] .artist-card, -[data-theme='barb-and-ken'] .card, -[data-theme='barb-and-ken'] .settings-card { - border: 1px solid rgba(255, 27, 141, 0.18); -} - -[data-theme='barb-and-ken'] .album-card:hover, -[data-theme='barb-and-ken'] .artist-card:hover { - border-color: rgba(255, 27, 141, 0.50); - box-shadow: 0 4px 20px rgba(255, 27, 141, 0.20); -} - -/* Queue active item */ -[data-theme='barb-and-ken'] .queue-item.active { - background: rgba(255, 27, 141, 0.08); - border-left: 3px solid #FF1B8D; -} - -[data-theme='barb-and-ken'] .queue-item.active .queue-item-title { - color: #FF69B4; -} - -[data-theme='barb-and-ken'] .queue-item.active .queue-item-artist, -[data-theme='barb-and-ken'] .queue-item.active .queue-item-duration { - color: #89CFF0; -} - -/* Track rows */ -[data-theme='barb-and-ken'] .track-row:hover, -[data-theme='barb-and-ken'] .queue-item:hover { - background: rgba(255, 27, 141, 0.07); -} - -/* Album detail header cover button — Ken blue glow on hover */ -[data-theme='barb-and-ken'] .album-detail-cover-btn:hover { - box-shadow: 0 0 24px rgba(137, 207, 240, 0.35); -} - -/* Star (favorite) icon — gold kept, but override to hot pink */ -[data-theme='barb-and-ken'] .color-star-active { - --color-star-active: #FF69B4; -} - -/* Scrollbar — thin hot pink */ -[data-theme='barb-and-ken'] ::-webkit-scrollbar { - width: 5px; -} - -[data-theme='barb-and-ken'] ::-webkit-scrollbar-track { - background: #07000b; -} - -[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb { - background: #FF1B8D; - border-radius: 3px; -} - -[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb:hover { - background: #FF69B4; -} - -/* Connection indicators */ -[data-theme='barb-and-ken'] .connection-type, -[data-theme='barb-and-ken'] .connection-server { - color: #7a3055; -} - -/* ── Toy Tale (Movies) ──────────────────────────────────────── */ -[data-theme='toy-tale'] { - color-scheme: dark; - --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFD600%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); - - /* Warm toy-box palette */ - --ctp-crust: #080603; - --ctp-mantle: #100d08; - --ctp-base: #1a1208; - --ctp-surface0: #2a1c10; - --ctp-surface1: #3a2818; - --ctp-surface2: #4a3422; - --ctp-overlay0: #7a5a35; - --ctp-overlay1: #9a7848; - --ctp-overlay2: #b89060; - --ctp-text: #f0e8d8; - --ctp-subtext1: #d8c8a8; - --ctp-subtext0: #c0a880; - - /* Woody gold */ - --ctp-mauve: #FFD600; - --ctp-yellow: #FFD600; - --ctp-peach: #FFA000; - --ctp-rosewater: #FFE0A0; - - /* Buzz Lightyear purple + green */ - --ctp-lavender: #9B72D6; - --ctp-blue: #7B4FD6; - --ctp-sapphire: #5c35a0; - --ctp-sky: #4FC3F7; - --ctp-teal: #4CAF50; - --ctp-green: #4CAF50; - - --ctp-pink: #FF6B9D; - --ctp-flamingo: #FF4488; - --ctp-maroon: #b71c1c; - --ctp-red: #e53935; - - --bg-app: #1a1208; - --bg-sidebar: #1e3a5f; - /* Andy's sky-blue wallpaper */ - --bg-card: #2a1c10; - --bg-hover: rgba(255, 214, 0, 0.10); - --bg-player: #0d0a06; - --bg-glass: rgba(26, 18, 8, 0.90); - - --accent: #FFD600; - --accent-dim: rgba(255, 214, 0, 0.15); - --accent-glow: rgba(255, 214, 0, 0.40); - --volume-accent: #7B4FD6; - /* Buzz purple */ - - --text-primary: #f0e8d8; - --text-secondary: #c8a878; - --text-muted: #6a5030; - --border: rgba(255, 214, 0, 0.22); - --border-subtle: rgba(255, 214, 0, 0.10); - --border-dropdown: rgba(255, 214, 0, 0.25); - --shadow-dropdown: rgba(8, 6, 3, 0.92); - - --positive: #4CAF50; - --warning: #FFA000; - --danger: #e53935; - - --radius-sm: 6px; - --radius-md: 10px; - --radius-lg: 14px; -} - -/* Sidebar — Andy's iconic cloud wallpaper in sky blue */ -[data-theme='toy-tale'] .sidebar { - background: - radial-gradient(ellipse 70px 42px at 18% 12%, rgba(255, 255, 255, 0.14) 0%, transparent 100%), - radial-gradient(ellipse 45px 28px at 38% 18%, rgba(255, 255, 255, 0.09) 0%, transparent 100%), - radial-gradient(ellipse 80px 50px at 72% 10%, rgba(255, 255, 255, 0.12) 0%, transparent 100%), - radial-gradient(ellipse 55px 32px at 85% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 100%), - radial-gradient(ellipse 65px 40px at 12% 55%, rgba(255, 255, 255, 0.10) 0%, transparent 100%), - radial-gradient(ellipse 48px 30px at 55% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 100%), - radial-gradient(ellipse 72px 44px at 80% 75%, rgba(255, 255, 255, 0.11) 0%, transparent 100%), - linear-gradient(180deg, #1e3a5f 0%, #274d78 100%); - border-right: 1px solid rgba(255, 214, 0, 0.20); -} - -/* Nav links need lighter text on blue sidebar */ -[data-theme='toy-tale'] .nav-link { - color: rgba(255, 255, 255, 0.75); -} - -[data-theme='toy-tale'] .nav-link:hover:not(.active) { - background: rgba(255, 255, 255, 0.10); - color: #fff; -} - -[data-theme='toy-tale'] .nav-link.active { - background: rgba(255, 214, 0, 0.20); - border-left: 3px solid #FFD600; - color: #FFD600 !important; - text-shadow: 0 0 8px rgba(255, 214, 0, 0.4); -} - -[data-theme='toy-tale'] .sidebar-logo, -[data-theme='toy-tale'] .sidebar-title { - color: #fff; -} - -/* Player bar — dark toy-chest wood */ -[data-theme='toy-tale'] .player-bar { - background: linear-gradient(180deg, #1a1208 0%, #0d0a06 100%); - border-top: 2px solid #FFD600; - box-shadow: 0 -6px 20px rgba(255, 214, 0, 0.10); -} - -/* Track name — Woody sheriff star gold */ -[data-theme='toy-tale'] .player-track-name { - color: #FFD600; - text-shadow: 0 0 10px rgba(255, 214, 0, 0.45); - font-weight: 700; -} - -/* Artist name — warm cowboy tan */ -[data-theme='toy-tale'] .player-artist-name { - color: #c8a060; -} - -/* Content header */ -[data-theme='toy-tale'] .content-header { - border-bottom: 1px solid rgba(255, 214, 0, 0.18); -} - -/* Primary buttons — Woody yellow */ -[data-theme='toy-tale'] .btn-primary, -[data-theme='toy-tale'] .player-btn-primary, -[data-theme='toy-tale'] .hero-play-btn { - background: linear-gradient(135deg, #FFD600 0%, #FFA000 100%); - color: #1a1208 !important; - font-weight: 700; - box-shadow: 0 4px 14px rgba(255, 214, 0, 0.35); - border: none; -} - -[data-theme='toy-tale'] .btn-primary:hover, -[data-theme='toy-tale'] .player-btn-primary:hover, -[data-theme='toy-tale'] .hero-play-btn:hover { - background: linear-gradient(135deg, #ffe033 0%, #FFD600 100%); - box-shadow: 0 6px 20px rgba(255, 214, 0, 0.50); -} - -/* Cards */ -[data-theme='toy-tale'] .album-card, -[data-theme='toy-tale'] .artist-card, -[data-theme='toy-tale'] .card, -[data-theme='toy-tale'] .settings-card { - border: 1px solid rgba(255, 214, 0, 0.16); -} - -[data-theme='toy-tale'] .album-card:hover, -[data-theme='toy-tale'] .artist-card:hover { - border-color: rgba(255, 214, 0, 0.42); - box-shadow: 0 4px 18px rgba(255, 214, 0, 0.14); -} - -/* Track rows */ -[data-theme='toy-tale'] .track-row:hover, -[data-theme='toy-tale'] .queue-item:hover { - background: rgba(255, 214, 0, 0.06); -} - -/* Queue active item — Buzz purple accent */ -[data-theme='toy-tale'] .queue-item.active { - background: rgba(123, 79, 214, 0.12); - border-left: 3px solid #7B4FD6; -} - -[data-theme='toy-tale'] .queue-item.active .queue-item-title { - color: #FFD600; -} - -[data-theme='toy-tale'] .queue-item.active .queue-item-artist, -[data-theme='toy-tale'] .queue-item.active .queue-item-duration { - color: #9B72D6; -} - -/* Scrollbar — Woody brown */ -[data-theme='toy-tale'] ::-webkit-scrollbar { - width: 6px; -} - -[data-theme='toy-tale'] ::-webkit-scrollbar-track { - background: #0d0a06; -} - -[data-theme='toy-tale'] ::-webkit-scrollbar-thumb { - background: #7a5a35; - border-radius: 3px; -} - -[data-theme='toy-tale'] ::-webkit-scrollbar-thumb:hover { - background: #FFD600; -} - -/* Connection indicators */ -[data-theme='toy-tale'] .connection-type, -[data-theme='toy-tale'] .connection-server { - color: #6a5030; -} - -/* Sidebar section labels (sky-blue bg needs light text) */ -[data-theme='toy-tale'] .nav-section-label { - color: rgba(200, 230, 255, 0.55); -} - -/* Queue tab buttons (Lyrics / Warteschlange) — inactive */ -[data-theme='toy-tale'] .queue-tab-btn { - color: #b89060; -} - -[data-theme='toy-tale'] .queue-tab-btn:hover { - color: #f0e8d8; -} - -/* Queue: inactive song artist */ -[data-theme='toy-tale'] .queue-item-artist { - color: #9a7848; -} - -/* Queue: "Nächste Titel" divider */ -[data-theme='toy-tale'] .queue-divider span { - color: #b89060 !important; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── Vision Dark — Purple & Gold, colorblind-safe (Deuteranopia / Protanopia / Tritanopia) ─── */ -/* Gold #FFD700 on #0D0B12 → contrast ~14.7:1 (WCAG AAA) */ -[data-theme='vision-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%23D8D4E4%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"); - - /* ── Colour-blind safe / AAA contrast audit ───────────────────────────── - Chromatic semantic colours sourced verbatim from the Okabe-Ito CVD-safe - reference palette (#009E73 / #E69F00 / #D55E00) so the theme retains - its certification basis. Neutral tokens tuned so every interactive / - readable surface clears WCAG thresholds against `--bg-app` (L≈0.004): - • text-primary 17.3:1 (AAA ✓) - • text-secondary 13.5:1 (AAA ✓, raised) - • text-muted 7.9:1 (AAA ✓, raised from 4.9:1) - • accent (gold) 14.0:1 (AAA ✓) - • warning 8.7:1 (AAA ✓) - • positive 5.8:1 (AA — Okabe-Ito reference, kept verbatim) - • danger 5.0:1 (AA — Okabe-Ito reference, kept verbatim) - • overlay0 3.4:1 (UI ✓, raised from 2.5:1) - • border 3.0:1 (UI ✓, raised from 1.1:1) - • waveform-unplayed perceptible at 2.0:1 (raised from 1.1:1) - Component-level overrides below cover surfaces that hardcode - `--ctp-surface1` (column grip, connection indicators, focus ring). - */ - - --ctp-crust: #030210; - --ctp-mantle: #06050e; - --ctp-base: #0d0b12; - --ctp-surface0: #16131e; - --ctp-surface1: #2c2838; /* raised from #201c2c so borders/grips are perceptible */ - --ctp-surface2: #3e3850; - --ctp-overlay0: #6a6382; /* raised from #544e6a → 3.4:1 UI ✓ */ - --ctp-overlay1: #8a84a0; - --ctp-overlay2: #a8a2bc; - --ctp-text: #f2eef8; - --ctp-subtext1: #d8d4e4; /* raised from #c8c4d4 → slightly brighter */ - --ctp-subtext0: #a6a2b8; - --ctp-mauve: #a07af8; - --ctp-lavender: #b89af8; - --ctp-blue: #60a5fa; - --ctp-sapphire: #38bdf8; - --ctp-sky: #38bdf8; - --ctp-teal: #2dd4bf; - --ctp-green: #009e73; /* Okabe-Ito Bluish Green (CVD reference) */ - --ctp-yellow: #ffd700; /* Gold */ - --ctp-peach: #e69f00; /* Okabe-Ito Orange (CVD reference) */ - --ctp-maroon: #d55e00; /* Okabe-Ito Vermillion — danger (CVD reference) */ - --ctp-red: #d55e00; - --ctp-flamingo: #f472b6; - --ctp-pink: #e879f9; - --ctp-rosewater: #f0abfc; - - --bg-app: #0d0b12; - --bg-sidebar: #08060e; - --bg-card: #16131e; - --bg-hover: #2c2838; /* raised → 2.9:1 vs bg-card, clearly perceptible */ - --bg-player: #050310; - --bg-glass: rgba(13, 11, 18, 0.88); - --accent: #ffd700; - --accent-dim: rgba(255, 215, 0, 0.18); - --accent-glow: rgba(255, 215, 0, 0.40); - --text-primary: #f2eef8; - --text-secondary: #d8d4e4; /* 13.5:1 vs bg-app — AAA ✓ */ - --text-muted: #a6a2b8; /* 7.9:1 vs bg-app — AAA ✓, was 4.9:1 */ - --border: #6a6182; /* 3.0:1 vs bg-card — UI ✓, was 1.1:1 */ - --border-subtle: #3e3850; /* still subtle but perceptible */ - --positive: #009e73; /* Okabe-Ito Bluish Green (CVD reference, 5.8:1 AA) */ - --warning: #e69f00; /* Okabe-Ito Orange (8.7:1 AAA ✓) */ - --danger: #d55e00; /* Okabe-Ito Vermillion (5.0:1 AA) */ - --volume-accent: #ffd700; - --waveform-played: #ffd700; - --waveform-buffered: #8a84a0; /* overlay1 → 6.1:1 vs bg-app */ - --waveform-unplayed: #3e3850; /* still dim but perceptible */ -} - -/* ─── Vision Dark — component-level overrides ───────────────────────────── - Selectors whose default colour (`--ctp-surface1` or `--ctp-surface0`) - collided with the theme's card background at <1.2:1 — raised here to - clear the 3:1 UI threshold required for colour-blind-safe AAA. */ - -/* Column resize grip (tracklist) — was #201c2c on #16131e = 1.1:1 */ -[data-theme='vision-dark'] .col-resize-handle::after { - background: var(--ctp-overlay1); /* #8a84a0 → 5.9:1 on bg-card */ - width: 2px; /* doubled for colour-blind visibility */ -} - -/* Badges — opaque background per theme feedback */ -[data-theme='vision-dark'] .badge, -[data-theme='vision-dark'] .album-detail-badge { - background: var(--ctp-surface2); - color: var(--accent); - border: 1px solid var(--ctp-overlay0); -} - -/* Queue items on the very dark sidebar (#08060e) — force light text */ -[data-theme='vision-dark'] .queue-item-title, -[data-theme='vision-dark'] .queue-current-info h3 { - color: var(--text-primary); -} -[data-theme='vision-dark'] .queue-item-artist, -[data-theme='vision-dark'] .queue-item-duration, -[data-theme='vision-dark'] .queue-current-sub, -[data-theme='vision-dark'] .queue-tab-btn { - color: var(--text-secondary); -} - -/* Focus ring — keyboard navigation indicator with AAA contrast */ -[data-theme='vision-dark'] *:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -/* Scrollbar thumb — explicit contrast (auto-hide still applies) */ -[data-theme='vision-dark'] ::-webkit-scrollbar-thumb { - background: var(--ctp-overlay0); -} -[data-theme='vision-dark'] *:hover::-webkit-scrollbar-thumb, -[data-theme='vision-dark'] .is-scrolling::-webkit-scrollbar-thumb { - background: var(--ctp-overlay2); -} - -/* ─── Vision Navy — Purple & Gold, colorblind-safe (Deuteranopia / Protanopia / Tritanopia) ─── */ -[data-theme='vision-navy'] { - 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%23C8D4E4%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"); - - /* ── Colour-blind safe / AAA contrast audit (companion to Vision Dark) ─── - Chromatic semantic colours sourced verbatim from the Okabe-Ito CVD-safe - reference palette. Neutral tokens tuned so every interactive / readable - surface clears WCAG thresholds against `--bg-app` (#0a1628, L≈0.009): - • text-primary 16.4:1 (AAA ✓) - • text-secondary 12.1:1 (AAA ✓, raised from 10.8:1) - • text-muted 7.7:1 (AAA ✓, raised from 3.5:1 — was below AA!) - • accent (gold) 14.5:1 (AAA ✓) - • warning 8.6:1 (AAA ✓) - • positive 5.7:1 (AA — Okabe-Ito reference, kept verbatim) - • danger 4.9:1 (AA — Okabe-Ito reference, kept verbatim) - • overlay0 3.4:1 (UI ✓, raised from 2.9:1) - • border 3.7:1 (UI ✓, raised from 1.2:1) - • waveform-unplayed perceptible at ~2.0:1 (raised from 1.2:1) - Component-level overrides below cover the column grip, badges, focus - ring and queue item text on the very dark sidebar (#060e1c). - */ - - --ctp-crust: #030a14; - --ctp-mantle: #060e1c; - --ctp-base: #0a1628; - --ctp-surface0: #112038; - --ctp-surface1: #243c58; /* raised from #1a2e48 so borders/grips are perceptible */ - --ctp-surface2: #304c6c; - --ctp-overlay0: #5a7694; /* raised from #486480 → 3.4:1 UI ✓ */ - --ctp-overlay1: #7e96b4; - --ctp-overlay2: #9aafcc; - --ctp-text: #eef2f8; - --ctp-subtext1: #c8d4e4; /* raised slightly from #c0c8d8 */ - --ctp-subtext0: #9caac2; - --ctp-mauve: #a07af8; - --ctp-lavender: #b89af8; - --ctp-blue: #3b82f6; - --ctp-sapphire: #38bdf8; - --ctp-sky: #7dd3fc; - --ctp-teal: #2dd4bf; - --ctp-green: #009e73; /* Okabe-Ito Bluish Green (CVD reference) */ - --ctp-yellow: #ffd700; /* Gold */ - --ctp-peach: #e69f00; /* Okabe-Ito Orange (CVD reference) */ - --ctp-maroon: #d55e00; /* Okabe-Ito Vermillion (CVD reference) */ - --ctp-red: #d55e00; - --ctp-flamingo: #f472b6; - --ctp-pink: #e879f9; - --ctp-rosewater: #f0abfc; - - --bg-app: #0a1628; - --bg-sidebar: #060e1c; - --bg-card: #112038; - --bg-hover: #243c58; /* raised → 2.9:1 vs bg-card, clearly perceptible */ - --bg-player: #040c18; - --bg-glass: rgba(10, 22, 40, 0.88); - --accent: #ffd700; - --accent-dim: rgba(255, 215, 0, 0.18); - --accent-glow: rgba(255, 215, 0, 0.40); - --text-primary: #eef2f8; - --text-secondary: #c8d4e4; /* 12.1:1 vs bg-app — AAA ✓ */ - --text-muted: #9caac2; /* 7.7:1 vs bg-app — AAA ✓, was 3.5:1 (below AA!) */ - --border: #607d9a; /* 3.7:1 vs bg-card — UI ✓, was 1.2:1 */ - --border-subtle: #304c6c; /* still subtle but perceptible */ - --positive: #009e73; /* Okabe-Ito Bluish Green (CVD reference, 5.7:1 AA) */ - --warning: #e69f00; /* Okabe-Ito Orange (8.6:1 AAA ✓) */ - --danger: #d55e00; /* Okabe-Ito Vermillion (4.9:1 AA) */ - --volume-accent: #ffd700; - --waveform-played: #ffd700; - --waveform-buffered: #7e96b4; /* overlay1 → 5.7:1 vs bg-app */ - --waveform-unplayed: #304c6c; /* still dim but perceptible */ -} - -/* ─── Vision Navy — component-level overrides ──────────────────────────── */ - -/* Column resize grip (tracklist) — was #1a2e48 on #112038 = 1.2:1 */ -[data-theme='vision-navy'] .col-resize-handle::after { - background: var(--ctp-overlay1); /* #7e96b4 → 5.2:1 on bg-card */ - width: 2px; -} - -/* Badges — opaque background per theme feedback */ -[data-theme='vision-navy'] .badge, -[data-theme='vision-navy'] .album-detail-badge { - background: var(--ctp-surface2); - color: var(--accent); - border: 1px solid var(--ctp-overlay0); -} - -/* Queue items on the very dark sidebar (#060e1c) — force light text */ -[data-theme='vision-navy'] .queue-item-title, -[data-theme='vision-navy'] .queue-current-info h3 { - color: var(--text-primary); -} -[data-theme='vision-navy'] .queue-item-artist, -[data-theme='vision-navy'] .queue-item-duration, -[data-theme='vision-navy'] .queue-current-sub, -[data-theme='vision-navy'] .queue-tab-btn { - color: var(--text-secondary); -} - -/* Focus ring — keyboard navigation indicator with AAA contrast */ -[data-theme='vision-navy'] *:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; -} - -/* Scrollbar thumb — explicit contrast (auto-hide still applies) */ -[data-theme='vision-navy'] ::-webkit-scrollbar-thumb { - background: var(--ctp-overlay0); -} -[data-theme='vision-navy'] *:hover::-webkit-scrollbar-thumb, -[data-theme='vision-navy'] .is-scrolling::-webkit-scrollbar-thumb { - background: var(--ctp-overlay2); -} - -/* ─── COMMUNITY THEMES ─── */ - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── Volcanic Dark ─── */ -[data-theme='volcanic-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='%23c97a56' 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: #100c0a; - --ctp-mantle: #15100d; - --ctp-base: #1b1512; - --ctp-surface0: #231b17; - --ctp-surface1: #2d231d; - --ctp-surface2: #392d26; - - /* Overlays */ - --ctp-overlay0: #6a4b3e; - --ctp-overlay1: #886050; - --ctp-overlay2: #a27462; - - /* Text */ - --ctp-text: #f2e5de; - --ctp-subtext1: #d0b2a5; - --ctp-subtext0: #aa8475; - - /* Burnt orange accent */ - --ctp-teal: #c97a56; - --ctp-sky: #c97a56; - --ctp-sapphire: #b06242; - --ctp-blue: #8f4d33; - --ctp-lavender: #d49272; - --ctp-mauve: #b06242; - --ctp-pink: #8f4d33; - --ctp-flamingo: #d49272; - --ctp-rosewater: #b06242; - - --ctp-red: #e06a6a; - --ctp-maroon: #d58a58; - --ctp-peach: #d58a58; - --ctp-yellow: #d0b15a; - --ctp-green: #67c587; - - --bg-app: #1b1512; - --bg-sidebar: #15100d; - --bg-card: #231b17; - --bg-hover: #2d231d; - --bg-player: #15100d; - --bg-glass: rgba(27,21,18,0.82); - - --accent: #c97a56; - --accent-dim: rgba(201,122,86,0.05); - --accent-glow: rgba(201,122,86,0.09); - - --text-primary: #f2e5de; - --text-secondary: #aa8475; - --text-muted: #6a4b3e; - - --border: #392d26; - --border-subtle: #2d231d; - --border-dropdown: #47372f; - --shadow-dropdown: rgba(0,0,0,0.72); - - --positive: #67c587; - --warning: #d0b15a; - --danger: #e06a6a; -} - -/* ─── 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; -} - -/* ─── Violet Haze ─── */ -[data-theme='violet-haze'] { - 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='%23b4a0ff' 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: #09070f; - --ctp-mantle: #0d0a16; - --ctp-base: #100d1a; - --ctp-surface0: #171425; - --ctp-surface1: #1d1930; - --ctp-surface2: #26203d; - - /* Overlays */ - --ctp-overlay0: #4c4270; - --ctp-overlay1: #65558f; - --ctp-overlay2: #7d69aa; - - /* Text */ - --ctp-text: #f3efff; - --ctp-subtext1: #d2c7f5; - --ctp-subtext0: #a696d6; - - /* Softer violet accent */ - --ctp-teal: #b8a7ff; - --ctp-sky: #b8a7ff; - --ctp-sapphire: #9c89e8; - --ctp-blue: #7f6ac8; - --ctp-lavender: #c4b5fd; - --ctp-mauve: #9c89e8; - --ctp-pink: #7f6ac8; - --ctp-flamingo: #c4b5fd; - --ctp-rosewater: #9c89e8; - - /* Semantic */ - --ctp-red: #ff6b6b; - --ctp-maroon: #ff9f68; - --ctp-peach: #ff9f68; - --ctp-yellow: #ffd166; - --ctp-green: #4ade80; - - /* UI */ - --bg-app: #12101d; - --bg-sidebar: #0d0a16; - --bg-card: #171425; - --bg-hover: #211c35; - --bg-player: #0d0a16; - --bg-glass: rgba(18,16,29,0.78); - - --accent: #b4a0ff; - --accent-dim: rgba(184,167,255,0.06); - --accent-glow: rgba(184,167,255,0.10); - - --text-primary: #f3efff; - --text-secondary: #a696d6; - --text-muted: #65558f; - - --border: #26203d; - --border-subtle: #1d1930; - --border-dropdown: #31284c; - --shadow-dropdown: rgba(0,0,0,0.88); - - --positive: #4ade80; - --warning: #ffd166; - --danger: #ff6b6b; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} - -/* ─── 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; -} diff --git a/src/styles/themes/1984-cyberpunk-juanmnl-vs-1984-mint-green-variant.css b/src/styles/themes/1984-cyberpunk-juanmnl-vs-1984-mint-green-variant.css new file mode 100644 index 00000000..7c80130e --- /dev/null +++ b/src/styles/themes/1984-cyberpunk-juanmnl-vs-1984-mint-green-variant.css @@ -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; +} + diff --git a/src/styles/themes/1984-juanmnl-vs-1984-default-dark-deep-blue-cyberpunk.css b/src/styles/themes/1984-juanmnl-vs-1984-default-dark-deep-blue-cyberpunk.css new file mode 100644 index 00000000..e8e638dc --- /dev/null +++ b/src/styles/themes/1984-juanmnl-vs-1984-default-dark-deep-blue-cyberpunk.css @@ -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; +} + diff --git a/src/styles/themes/1984-light-juanmnl-vs-1984-bluish-white.css b/src/styles/themes/1984-light-juanmnl-vs-1984-bluish-white.css new file mode 100644 index 00000000..0a85d209 --- /dev/null +++ b/src/styles/themes/1984-light-juanmnl-vs-1984-bluish-white.css @@ -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; +} + diff --git a/src/styles/themes/1984-orwell-juanmnl-vs-1984-sepia-dystopian-variant.css b/src/styles/themes/1984-orwell-juanmnl-vs-1984-sepia-dystopian-variant.css new file mode 100644 index 00000000..461a61b5 --- /dev/null +++ b/src/styles/themes/1984-orwell-juanmnl-vs-1984-sepia-dystopian-variant.css @@ -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; +} + diff --git a/src/styles/themes/_intro.css b/src/styles/themes/_intro.css new file mode 100644 index 00000000..00a88bd2 --- /dev/null +++ b/src/styles/themes/_intro.css @@ -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'; + diff --git a/src/styles/themes/a-theme-of-ice-and-fire-game-of-thrones.css b/src/styles/themes/a-theme-of-ice-and-fire-game-of-thrones.css new file mode 100644 index 00000000..5c8348d2 --- /dev/null +++ b/src/styles/themes/a-theme-of-ice-and-fire-game-of-thrones.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; +} + diff --git a/src/styles/themes/album-grid.css b/src/styles/themes/album-grid.css new file mode 100644 index 00000000..d2c7fee5 --- /dev/null +++ b/src/styles/themes/album-grid.css @@ -0,0 +1,7 @@ +/* ─── Album Grid ─── */ +.album-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + gap: var(--space-4); +} + diff --git a/src/styles/themes/amoled-black-pure.css b/src/styles/themes/amoled-black-pure.css new file mode 100644 index 00000000..546a18ad --- /dev/null +++ b/src/styles/themes/amoled-black-pure.css @@ -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; +} + diff --git a/src/styles/themes/animations.css b/src/styles/themes/animations.css new file mode 100644 index 00000000..a940488f --- /dev/null +++ b/src/styles/themes/animations.css @@ -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; +} + diff --git a/src/styles/themes/atom-one-dark-th3whit3wolf-one-nvim-dark-variant.css b/src/styles/themes/atom-one-dark-th3whit3wolf-one-nvim-dark-variant.css new file mode 100644 index 00000000..e6b38a30 --- /dev/null +++ b/src/styles/themes/atom-one-dark-th3whit3wolf-one-nvim-dark-variant.css @@ -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; +} + diff --git a/src/styles/themes/atom-one-light-th3whit3wolf-one-nvim-light-variant.css b/src/styles/themes/atom-one-light-th3whit3wolf-one-nvim-light-variant.css new file mode 100644 index 00000000..c84a40d4 --- /dev/null +++ b/src/styles/themes/atom-one-light-th3whit3wolf-one-nvim-light-variant.css @@ -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; +} + diff --git a/src/styles/themes/back-to-the-future-hill-valley-85.css b/src/styles/themes/back-to-the-future-hill-valley-85.css new file mode 100644 index 00000000..4ea13bab --- /dev/null +++ b/src/styles/themes/back-to-the-future-hill-valley-85.css @@ -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; +} + diff --git a/src/styles/themes/badge.css b/src/styles/themes/badge.css new file mode 100644 index 00000000..0b754b82 --- /dev/null +++ b/src/styles/themes/badge.css @@ -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); +} + diff --git a/src/styles/themes/blade-cinematic-industrial.css b/src/styles/themes/blade-cinematic-industrial.css new file mode 100644 index 00000000..7b03e3d2 --- /dev/null +++ b/src/styles/themes/blade-cinematic-industrial.css @@ -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; +} + diff --git a/src/styles/themes/button-variants.css b/src/styles/themes/button-variants.css new file mode 100644 index 00000000..fd90f15e --- /dev/null +++ b/src/styles/themes/button-variants.css @@ -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); +} + diff --git a/src/styles/themes/carbon-grey.css b/src/styles/themes/carbon-grey.css new file mode 100644 index 00000000..58b946cd --- /dev/null +++ b/src/styles/themes/carbon-grey.css @@ -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; +} + diff --git a/src/styles/themes/carbonfox.css b/src/styles/themes/carbonfox.css new file mode 100644 index 00000000..a5b4bb20 --- /dev/null +++ b/src/styles/themes/carbonfox.css @@ -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; +} + diff --git a/src/styles/themes/card.css b/src/styles/themes/card.css new file mode 100644 index 00000000..6002270b --- /dev/null +++ b/src/styles/themes/card.css @@ -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); +} + diff --git a/src/styles/themes/catppuccin-frapp-variables.css b/src/styles/themes/catppuccin-frapp-variables.css new file mode 100644 index 00000000..0871a94b --- /dev/null +++ b/src/styles/themes/catppuccin-frapp-variables.css @@ -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); +} + diff --git a/src/styles/themes/catppuccin-latte-variables-light-theme.css b/src/styles/themes/catppuccin-latte-variables-light-theme.css new file mode 100644 index 00000000..757bbc17 --- /dev/null +++ b/src/styles/themes/catppuccin-latte-variables-light-theme.css @@ -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); +} + diff --git a/src/styles/themes/catppuccin-macchiato-variables.css b/src/styles/themes/catppuccin-macchiato-variables.css new file mode 100644 index 00000000..e97724f3 --- /dev/null +++ b/src/styles/themes/catppuccin-macchiato-variables.css @@ -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); +} + diff --git a/src/styles/themes/catppuccin-mocha-variables.css b/src/styles/themes/catppuccin-mocha-variables.css new file mode 100644 index 00000000..7b2ffdf4 --- /dev/null +++ b/src/styles/themes/catppuccin-mocha-variables.css @@ -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); +} + diff --git a/src/styles/themes/classic-winamp-winamp-2-x-base-skin.css b/src/styles/themes/classic-winamp-winamp-2-x-base-skin.css new file mode 100644 index 00000000..6bab221d --- /dev/null +++ b/src/styles/themes/classic-winamp-winamp-2-x-base-skin.css @@ -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; +} + diff --git a/src/styles/themes/community-themes.css b/src/styles/themes/community-themes.css new file mode 100644 index 00000000..260b1ae5 --- /dev/null +++ b/src/styles/themes/community-themes.css @@ -0,0 +1,2 @@ +/* ─── COMMUNITY THEMES ─── */ + diff --git a/src/styles/themes/copper-oxide.css b/src/styles/themes/copper-oxide.css new file mode 100644 index 00000000..57e88b62 --- /dev/null +++ b/src/styles/themes/copper-oxide.css @@ -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; +} + diff --git a/src/styles/themes/cupertino-beats.css b/src/styles/themes/cupertino-beats.css new file mode 100644 index 00000000..bba45a89 --- /dev/null +++ b/src/styles/themes/cupertino-beats.css @@ -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; +} + diff --git a/src/styles/themes/cyberlink-powerdvd.css b/src/styles/themes/cyberlink-powerdvd.css new file mode 100644 index 00000000..00ec5bce --- /dev/null +++ b/src/styles/themes/cyberlink-powerdvd.css @@ -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; +} + diff --git a/src/styles/themes/d-oh-matic.css b/src/styles/themes/d-oh-matic.css new file mode 100644 index 00000000..bfad8c7c --- /dev/null +++ b/src/styles/themes/d-oh-matic.css @@ -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; +} + diff --git a/src/styles/themes/dark-side-of-the-moon-inspired-pink-floyd.css b/src/styles/themes/dark-side-of-the-moon-inspired-pink-floyd.css new file mode 100644 index 00000000..fc14960b --- /dev/null +++ b/src/styles/themes/dark-side-of-the-moon-inspired-pink-floyd.css @@ -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; +} + diff --git a/src/styles/themes/data-theme-aqua-quartz.css b/src/styles/themes/data-theme-aqua-quartz.css new file mode 100644 index 00000000..a25e1ddd --- /dev/null +++ b/src/styles/themes/data-theme-aqua-quartz.css @@ -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); +} + diff --git a/src/styles/themes/dawnfox.css b/src/styles/themes/dawnfox.css new file mode 100644 index 00000000..8cf236db --- /dev/null +++ b/src/styles/themes/dawnfox.css @@ -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; +} + diff --git a/src/styles/themes/dayfox.css b/src/styles/themes/dayfox.css new file mode 100644 index 00000000..ffaca27f --- /dev/null +++ b/src/styles/themes/dayfox.css @@ -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; +} + diff --git a/src/styles/themes/deep-forest.css b/src/styles/themes/deep-forest.css new file mode 100644 index 00000000..396c920a --- /dev/null +++ b/src/styles/themes/deep-forest.css @@ -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; +} + diff --git a/src/styles/themes/divider.css b/src/styles/themes/divider.css new file mode 100644 index 00000000..96ba975b --- /dev/null +++ b/src/styles/themes/divider.css @@ -0,0 +1,7 @@ +/* ─── Divider ─── */ +.divider { + height: 1px; + background: var(--border-subtle); + margin: var(--space-4) 0; +} + diff --git a/src/styles/themes/dracula-component-level-overrides.css b/src/styles/themes/dracula-component-level-overrides.css new file mode 100644 index 00000000..b6a263c7 --- /dev/null +++ b/src/styles/themes/dracula-component-level-overrides.css @@ -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; +} + diff --git a/src/styles/themes/dracula.css b/src/styles/themes/dracula.css new file mode 100644 index 00000000..f05d51e8 --- /dev/null +++ b/src/styles/themes/dracula.css @@ -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; +} + diff --git a/src/styles/themes/dune-arrakis.css b/src/styles/themes/dune-arrakis.css new file mode 100644 index 00000000..c55bd9dc --- /dev/null +++ b/src/styles/themes/dune-arrakis.css @@ -0,0 +1,1079 @@ +/* ─── Dune — Arrakis ─── */ +[data-theme='dune'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c8780a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette — two-temperature Arrakis ── */ + /* Warm: spice / sand / desert sun */ + --ctp-crust: #0a0804; + --ctp-mantle: #120e06; + --ctp-base: #1c1408; + --ctp-surface0: #2e1e0a; + --ctp-surface1: #3e2a0e; + --ctp-surface2: #503614; + /* Cool: sietch / rock shadow / Fremen darkness */ + --ctp-overlay0: #2a2440; + --ctp-overlay1: #4a4268; + --ctp-overlay2: #6a6090; + /* Text: aged parchment, scrolls of the Bene Gesserit */ + --ctp-text: #f0deb0; + --ctp-subtext1: #d8c090; + --ctp-subtext0: #b09060; + /* Accent palette */ + --ctp-mauve: #c8780a; + /* spice melange — cinnamon rust */ + --ctp-lavender: #e8a020; + /* spice shimmer — bright amber */ + --ctp-yellow: #f5cc50; + /* spice flare */ + --ctp-peach: #aa5a08; + /* deep spice shadow */ + --ctp-green: #7a8c40; + /* Caladan seagrass (far memory) */ + --ctp-teal: #1a80c0; + /* Fremen eye blue — spice prescience */ + --ctp-sky: #2090d0; + /* Guild Navigator blue */ + --ctp-blue: #1468a8; + /* sietch pool depth */ + --ctp-sapphire: #0e4a80; + /* deep cave water */ + --ctp-pink: #c84060; + --ctp-flamingo: #e06080; + --ctp-rosewater: #f0c0a0; + --ctp-red: #cc2800; + --ctp-maroon: #8c1c00; + + /* ── Semantic tokens ── */ + --bg-app: #1c1408; + --bg-sidebar: #0e0c1a; + /* sietch interior — cool rock */ + --bg-card: #2e1e0a; + --bg-hover: rgba(200, 120, 10, 0.14); + --bg-player: #0e0a04; + --bg-glass: rgba(10, 8, 4, 0.96); + --accent: #c8780a; + --accent-dim: rgba(200, 120, 10, 0.12); + --accent-glow: rgba(200, 120, 10, 0.40); + --volume-accent: #c8780a; + --text-primary: #f0deb0; + --text-secondary: #d8c090; + --text-muted: #a89870; + --border: rgba(200, 120, 10, 0.22); + --border-subtle: rgba(200, 120, 10, 0.10); + --positive: #7a8c40; + --warning: #f5cc50; + --danger: #cc2800; + --radius-sm: 2px; + --radius-md: 4px; + --radius-lg: 6px; +} + +/* ── App shell: Arrakis desert horizon at dusk ── */ +/* Sky (cool/dark at top) fading into burning sand (warm at bottom) */ +[data-theme='dune'] .app-shell { + background: linear-gradient(180deg, + #12101c 0%, + #1a1408 30%, + #201608 60%, + #281e0a 100%); +} + +/* ── Sidebar: sietch interior — cold carved rock ── */ +/* The Fremen lived in caves cut from rock — cool, dark, shadows of blue and purple */ +[data-theme='dune'] .sidebar { + background: linear-gradient(180deg, #141228 0%, #0e0c1c 40%, #0c0a16 100%); + border-right: 1px solid rgba(200, 120, 10, 0.22); + box-shadow: + inset -3px 0 10px rgba(200, 100, 8, 0.07), + 2px 0 8px rgba(0, 0, 0, 0.50); +} + +/* Nav text: parchment on cool rock */ +[data-theme='dune'] .nav-link { + color: #b09060; +} + +[data-theme='dune'] .nav-link:hover { + background: rgba(200, 120, 10, 0.10); + color: #d8c090; +} + +[data-theme='dune'] .nav-link.active { + background: linear-gradient(90deg, rgba(200, 120, 10, 0.20) 0%, transparent 100%); + color: #e8a020; + border-left: 2px solid #c8780a; + box-shadow: inset 4px 0 14px rgba(200, 120, 10, 0.10); +} + +[data-theme='dune'] .nav-link.active::before { + background: #c8780a; + box-shadow: 0 0 10px rgba(200, 120, 10, 0.70); +} + +[data-theme='dune'] .nav-link.active svg { + color: #c8780a; +} + +[data-theme='dune'] .nav-section-label { + color: #4a4268; + letter-spacing: 0.08em; + text-transform: uppercase; + font-size: 0.70em; +} + +/* ── Player bar: spice harvester console — deep amber warmth ── */ +[data-theme='dune'] .player-bar { + background: linear-gradient(180deg, #140e04 0%, #0a0802 100%); + border-top: 2px solid rgba(200, 120, 10, 0.50); + box-shadow: + inset 0 1px 0 rgba(240, 180, 40, 0.16), + 0 -8px 40px rgba(180, 100, 8, 0.16), + 0 -2px 80px rgba(20, 100, 160, 0.04); +} + +/* Track name: the spice calls — amber prophetic glow */ +[data-theme='dune'] .player-track-name { + color: #e8a020; + text-shadow: + 0 0 8px rgba(232, 160, 32, 0.75), + 0 0 20px rgba(200, 120, 10, 0.40), + 0 0 40px rgba(200, 120, 10, 0.15); + letter-spacing: 0.04em; +} + +/* Artist: deeper spice cinnamon */ +[data-theme='dune'] .player-track-artist { + color: #aa7030; + opacity: 1; + text-shadow: 0 0 8px rgba(170, 112, 48, 0.45); +} + +[data-theme='dune'] .player-time { + color: #7a5020; +} + +/* ── Transport buttons: Fremen tech — minimal, earth-worn ── */ +[data-theme='dune'] .player-btn, +[data-theme='dune'] .player-btn-primary { + background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%); + color: #c8780a; + border: 1px solid rgba(200, 120, 10, 0.38); + border-radius: 50%; + box-shadow: inset 0 1px 0 rgba(240, 180, 40, 0.08), 0 2px 6px rgba(0, 0, 0, 0.50); +} + +[data-theme='dune'] .player-btn:hover, +[data-theme='dune'] .player-btn-primary:hover { + background: rgba(200, 120, 10, 0.14); + border-color: #c8780a; + color: #e8a020; + box-shadow: + 0 0 14px rgba(200, 120, 10, 0.42), + inset 0 0 8px rgba(200, 100, 8, 0.08); +} + +/* ── Regular buttons: desert stone / carved bone ── */ +[data-theme='dune'] .btn, +[data-theme='dune'] .btn-surface, +[data-theme='dune'] .btn-ghost { + background: linear-gradient(180deg, #2e1e0a 0%, #221608 100%); + color: #d8c090; + border: 1px solid rgba(200, 120, 10, 0.30); + box-shadow: inset 0 1px 0 rgba(240, 200, 80, 0.06), 0 1px 4px rgba(0, 0, 0, 0.40); + border-radius: 3px; +} + +[data-theme='dune'] .btn:hover, +[data-theme='dune'] .btn-surface:hover, +[data-theme='dune'] .btn-ghost:hover { + background: rgba(200, 120, 10, 0.12); + border-color: rgba(200, 120, 10, 0.65); + color: #f0deb0; + box-shadow: 0 0 10px rgba(200, 120, 10, 0.24), inset 0 0 6px rgba(200, 100, 8, 0.05); +} + +/* ── Primary button: spice melange — the most precious thing ── */ +[data-theme='dune'] .btn-primary { + background: linear-gradient(180deg, #b86808 0%, #884e04 100%); + color: #ffe8a0; + border: 1px solid #d08010; + box-shadow: 0 0 14px rgba(200, 120, 10, 0.35), inset 0 1px 0 rgba(255, 220, 80, 0.20); + border-radius: 3px; + font-weight: 600; +} + +[data-theme='dune'] .btn-primary:hover { + background: linear-gradient(180deg, #d07a10 0%, #a05e06 100%); + box-shadow: 0 0 22px rgba(200, 120, 10, 0.55), inset 0 1px 0 rgba(255, 220, 80, 0.25); +} + +/* ── Hero / album buttons ── */ +[data-theme='dune'] .hero-play-btn, +[data-theme='dune'] .album-card-details-btn { + background: rgba(200, 120, 10, 0.12); + color: #c8780a; + border: 1px solid rgba(200, 120, 10, 0.36); + box-shadow: inset 0 1px 0 rgba(240, 180, 40, 0.06); +} + +[data-theme='dune'] .hero-play-btn:hover, +[data-theme='dune'] .album-card-details-btn:hover { + background: rgba(200, 120, 10, 0.20); + border-color: #c8780a; + box-shadow: 0 0 12px rgba(200, 120, 10, 0.38); +} + +/* ── Queue round buttons ── */ +[data-theme='dune'] .queue-round-btn { + background: linear-gradient(180deg, #2e1e0a 0%, #1e1406 100%); + color: #8a6030; + border: 1px solid rgba(200, 120, 10, 0.24); +} + +[data-theme='dune'] .queue-round-btn:hover:not(:disabled):not(.active) { + background: rgba(200, 120, 10, 0.10); + border-color: rgba(200, 120, 10, 0.55); + color: #c8780a; + box-shadow: 0 0 10px rgba(200, 120, 10, 0.22); +} + +[data-theme='dune'] .queue-round-btn.active { + background: rgba(200, 120, 10, 0.20); + border-color: #c8780a; + color: #e8a020; + box-shadow: 0 0 12px rgba(200, 120, 10, 0.42), inset 0 0 6px rgba(200, 100, 8, 0.08); +} + +/* ── Cards: ancient stone / sand-worn rock ── */ +[data-theme='dune'] .card { + background: linear-gradient(180deg, #2e1e0a 0%, #281808 100%); + border: 1px solid rgba(200, 120, 10, 0.16); + border-radius: 4px; + box-shadow: + inset 0 1px 0 rgba(240, 200, 80, 0.04), + inset 0 0 24px rgba(200, 100, 8, 0.03), + 0 2px 10px rgba(0, 0, 0, 0.50); +} + +/* ── Content header: sietch entrance — cool rock above warm desert ── */ +/* The contrast between the cold header and warm body is intentional — Arrakis duality */ +[data-theme='dune'] .content-header { + background: linear-gradient(180deg, #151228 0%, #12101e 100%); + border-bottom: 1px solid rgba(200, 120, 10, 0.24); + box-shadow: 0 3px 16px rgba(200, 100, 8, 0.06); +} + +/* Text on cool header: light but warm */ +[data-theme='dune'] .content-header .page-title, +[data-theme='dune'] .content-header h1, +[data-theme='dune'] .content-header h2 { + color: #d8c090; +} + +/* ── Connection indicators: parchment legible ── */ +[data-theme='dune'] .connection-type, +[data-theme='dune'] .connection-server { + color: #b09060; +} + +/* ── Theme accordion ── */ +[data-theme='dune'] .theme-accordion-header:hover { + background: rgba(200, 120, 10, 0.10); + color: #e8a020; +} + +[data-theme='dune'] .theme-accordion-open .theme-accordion-header { + background: rgba(200, 120, 10, 0.14); + color: #e8a020; +} + +[data-theme='dune'] .theme-accordion-open .theme-accordion-chevron { + color: #c8780a; +} + +/* ── Progress bar: spice flowing — from deep rust to bright amber ── */ +[data-theme='dune'] .progress-bar-track { + background: #1a1006; + border: 1px solid rgba(200, 120, 10, 0.22); + border-radius: 2px; +} + +[data-theme='dune'] .progress-bar-fill { + background: linear-gradient(90deg, + #6a3604 0%, + #a85a08 30%, + #c8780a 65%, + #e8a020 85%, + #f5cc50 100%); + border-radius: 2px; + box-shadow: 0 0 10px rgba(200, 120, 10, 0.55), 0 0 3px rgba(240, 200, 60, 0.40); +} + +/* ── Scrollbar: sand grain — thin, warm, minimal ── */ +[data-theme='dune'] ::-webkit-scrollbar { + width: 5px; + height: 5px; +} + +[data-theme='dune'] ::-webkit-scrollbar-track { + background: #0a0804; +} + +[data-theme='dune'] ::-webkit-scrollbar-thumb { + background: rgba(200, 120, 10, 0.30); + border-radius: 2px; + border: 1px solid rgba(200, 120, 10, 0.16); +} + +[data-theme='dune'] ::-webkit-scrollbar-thumb:hover { + background: rgba(200, 120, 10, 0.55); + box-shadow: 0 0 5px rgba(200, 120, 10, 0.40); +} + +/* ── Glass / dropdowns: deep sand shelter ── */ +[data-theme='dune'] .glass { + background: rgba(10, 8, 4, 0.97) !important; + backdrop-filter: none !important; + border: 1px solid rgba(200, 120, 10, 0.30) !important; + box-shadow: + 0 0 20px rgba(180, 100, 8, 0.10), + inset 0 0 16px rgba(200, 100, 8, 0.02) !important; + border-radius: 4px !important; +} + +[data-theme='dune'] .glass [style*="var(--bg-hover)"] { + background: rgba(200, 120, 10, 0.12) !important; + border-radius: 2px !important; +} + +[data-theme='dune'] .glass [style*="var(--text-primary)"] { + color: #f0deb0 !important; +} + +[data-theme='dune'] .glass [style*="var(--text-secondary)"] { + color: #d8c090 !important; +} + +[data-theme='dune'] .glass [style*="var(--text-muted)"] { + color: #6a5830 !important; +} + +/* ── Hover / selection: spice glow — warm amber indicator bar ── */ +[data-theme='dune'] .queue-tab-btn:hover { + background: rgba(200, 120, 10, 0.10); + color: #c8780a; +} + +[data-theme='dune'] .settings-tab:hover { + background: rgba(200, 120, 10, 0.10); + color: #c8780a; +} + +[data-theme='dune'] .settings-tab.active { + background: rgba(200, 120, 10, 0.16); + color: #e8a020; + box-shadow: inset 2px 0 0 #c8780a; +} + +[data-theme='dune'] .custom-select-trigger:hover { + background: rgba(200, 120, 10, 0.10); +} + +[data-theme='dune'] .custom-select-option:hover { + background: rgba(200, 120, 10, 0.14) !important; + color: #e8a020 !important; +} + +[data-theme='dune'] .artist-ext-link:hover { + background: rgba(200, 120, 10, 0.10); + color: #c8780a !important; + border-color: rgba(200, 120, 10, 0.45) !important; +} + +[data-theme='dune'] .np-action-btn:hover { + background: rgba(200, 120, 10, 0.10); +} + +[data-theme='dune'] .np-queue-item:hover, +[data-theme='dune'] .np-queue-item.context-active { + background: rgba(200, 120, 10, 0.12); + box-shadow: inset 2px 0 0 #c8780a; +} + +[data-theme='dune'] .track-row:hover, +[data-theme='dune'] .track-row.context-active { + background: rgba(200, 120, 10, 0.09) !important; + box-shadow: inset 2px 0 0 #c8780a; +} + +[data-theme='dune'] .artist-row:hover { + background: rgba(200, 120, 10, 0.09); + box-shadow: inset 2px 0 0 #c8780a; +} + +[data-theme='dune'] .playlist-row:hover { + background: rgba(200, 120, 10, 0.09); + box-shadow: inset 2px 0 0 #c8780a; +} + +[data-theme='dune'] .queue-item:hover, +[data-theme='dune'] .queue-item.context-active { + background: rgba(200, 120, 10, 0.10) !important; + box-shadow: inset 2px 0 0 #c8780a; +} + +[data-theme='dune'] .queue-item:hover .queue-item-title, +[data-theme='dune'] .queue-item:hover .queue-item-artist, +[data-theme='dune'] .queue-item:hover .queue-item-duration, +[data-theme='dune'] .queue-item.context-active .queue-item-title, +[data-theme='dune'] .queue-item.context-active .queue-item-artist, +[data-theme='dune'] .queue-item.context-active .queue-item-duration { + color: #c8780a; +} + +/* ── Active queue / now-playing: the worm has come ── */ +[data-theme='dune'] .queue-item.active { + background: rgba(200, 120, 10, 0.08); + box-shadow: inset 2px 0 0 #c8780a; +} + +[data-theme='dune'] .np-queue-item-active { + color: #c8780a; + text-shadow: 0 0 8px rgba(200, 120, 10, 0.55); +} + +[data-theme='dune'] .np-queue-item.active { + background: rgba(200, 120, 10, 0.08); +} + +[data-theme='dune'] .np-album-track.active .np-album-track-title, +[data-theme='dune'] .np-album-track.active .np-album-track-num { + color: #c8780a; + text-shadow: 0 0 8px rgba(200, 120, 10, 0.50); +} + +/* ── TetraStack (Games) — 7-tetromino NES Tetris ─────────────── */ +/* I=cyan O=yellow T=purple S=green Z=red J=blue L=orange */ +[data-theme='tetrastack'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f0f0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* Dark navy — NES Tetris backdrop, not pure black */ + --ctp-crust: #000008; + --ctp-mantle: #00000e; + --ctp-base: #060614; + --ctp-surface0: #0d0d22; + --ctp-surface1: #141432; + --ctp-surface2: #1e1e48; + --ctp-overlay0: #3a3a6a; + --ctp-overlay1: #6060a8; + --ctp-overlay2: #9090cc; + --ctp-text: #ffffff; + --ctp-subtext1: #d0d0ff; + --ctp-subtext0: #9090cc; + + /* 7 Tetromino colours mapped to palette slots */ + --ctp-sky: #00f0f0; + /* I-piece — cyan */ + --ctp-teal: #00f0f0; + --ctp-yellow: #f0d000; + /* O-piece — yellow */ + --ctp-mauve: #c070ff; + /* T-piece — purple */ + --ctp-lavender: #c070ff; + --ctp-pink: #c070ff; + --ctp-green: #00d000; + /* S-piece — green */ + --ctp-red: #f02000; + /* Z-piece — red */ + --ctp-flamingo: #f02000; + --ctp-maroon: #f02000; + --ctp-blue: #4090ff; + /* J-piece — blue */ + --ctp-sapphire: #4090ff; + --ctp-peach: #f07800; + /* L-piece — orange */ + --ctp-rosewater: #f07800; + + --bg-app: #060614; + --bg-sidebar: #00000e; + --bg-card: #0d0d22; + --bg-hover: rgba(0, 240, 240, 0.07); + --bg-player: #000008; + --bg-glass: rgba(6, 6, 20, 0.96); + + --accent: #00f0f0; + /* I-piece cyan */ + --accent-dim: rgba(0, 240, 240, 0.12); + --accent-glow: rgba(0, 240, 240, 0.5); + --volume-accent: #f0d000; + /* O-piece yellow — classic score-panel feel */ + + --text-primary: #ffffff; + --text-secondary: #f0d000; + /* O-piece yellow — like the score readout */ + --text-muted: #7878b8; + --border: #1e1e48; + --border-subtle: #0d0d22; + + /* All corners square — every element is a block */ + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + --radius-xl: 0px; +} + +/* 30 px grid — Tetris block scale */ +[data-theme='tetrastack'] .app-shell { + background-image: + linear-gradient(rgba(0, 240, 240, 0.04) 1px, transparent 1px), + linear-gradient(90deg, rgba(0, 240, 240, 0.04) 1px, transparent 1px); + background-size: 30px 30px; +} + +/* Sidebar = the score/next-piece panel */ +[data-theme='tetrastack'] .sidebar { + border-right: 3px solid #00f0f0; +} + +/* Player bar = bottom of the well */ +[data-theme='tetrastack'] .player-bar { + border-top: 3px solid #00f0f0; + box-shadow: + 0 -2px 0 #c070ff, + 0 -8px 24px rgba(0, 240, 240, 0.12); +} + +/* NES block shading on cards — lighter top-left, darker bottom-right */ +[data-theme='tetrastack'] .card, +[data-theme='tetrastack'] .glass, +[data-theme='tetrastack'] .settings-card { + border: 1px solid #1e1e48 !important; + border-radius: 0 !important; + box-shadow: + inset -3px -3px 0 rgba(0, 0, 0, 0.55), + inset 3px 3px 0 rgba(255, 255, 255, 0.05) !important; +} + +/* Buttons: block-shaped, NES-style press effect */ +[data-theme='tetrastack'] .btn-primary { + background: #00f0f0; + color: #000000; + border: none; + border-radius: 0; + box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.5), inset 3px 3px 0 rgba(255, 255, 255, 0.35); + text-transform: uppercase; + font-weight: 800; + letter-spacing: 0.08em; +} + +[data-theme='tetrastack'] .btn-primary:hover { + background: #30ffff; + box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.4), inset 3px 3px 0 rgba(255, 255, 255, 0.45); +} + +[data-theme='tetrastack'] .btn-surface { + border-radius: 0; + box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.5), inset 2px 2px 0 rgba(255, 255, 255, 0.06); +} + +/* Track name = I-piece glow */ +[data-theme='tetrastack'] .player-track-name { + color: #00f0f0; + text-shadow: 0 0 8px rgba(0, 240, 240, 0.7), 0 0 20px rgba(0, 240, 240, 0.3); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +/* Artist name = L-piece orange */ +[data-theme='tetrastack'] .player-track-artist { + color: #f07800; +} + +/* Album title in queue = T-piece purple */ +[data-theme='tetrastack'] .queue-meta-album { + color: #c070ff; +} + +/* Active queue item = I-piece left border */ +[data-theme='tetrastack'] .queue-item.active { + background: rgba(0, 240, 240, 0.07); + box-shadow: inset 3px 0 0 #00f0f0; +} + +[data-theme='tetrastack'] .np-queue-item-active { + color: #00f0f0; + text-shadow: 0 0 8px rgba(0, 240, 240, 0.6); +} + +[data-theme='tetrastack'] .np-queue-item.active { + background: rgba(0, 240, 240, 0.07); +} + +/* Hover rows: subtle block highlight */ +[data-theme='tetrastack'] .track-row:hover, +[data-theme='tetrastack'] .track-row.context-active { + background: rgba(0, 240, 240, 0.06) !important; + box-shadow: inset 3px 0 0 #00f0f0; +} + +[data-theme='tetrastack'] .queue-item:hover, +[data-theme='tetrastack'] .queue-item.context-active { + background: rgba(0, 240, 240, 0.07) !important; + box-shadow: inset 3px 0 0 #00f0f0; +} + +[data-theme='tetrastack'] .np-queue-item:hover, +[data-theme='tetrastack'] .np-queue-item.context-active { + background: rgba(0, 240, 240, 0.07); + box-shadow: inset 2px 0 0 #00f0f0; +} + +[data-theme='tetrastack'] .artist-row:hover { + background: rgba(0, 240, 240, 0.06); + box-shadow: inset 3px 0 0 #00f0f0; +} + +[data-theme='tetrastack'] .playlist-row:hover { + background: rgba(0, 240, 240, 0.06); + box-shadow: inset 3px 0 0 #00f0f0; +} + +/* Settings tabs: active = S-piece green left border */ +[data-theme='tetrastack'] .settings-tab:hover { + background: rgba(0, 240, 240, 0.06); + color: #00f0f0; +} + +[data-theme='tetrastack'] .settings-tab.active { + background: rgba(0, 208, 0, 0.08); + color: #00d000; + box-shadow: inset 3px 0 0 #00d000; +} + +/* Queue tabs */ +[data-theme='tetrastack'] .queue-tab-btn:hover { + background: rgba(0, 240, 240, 0.06); + color: #00f0f0; +} + +/* Dropdowns / selects */ +[data-theme='tetrastack'] .custom-select-trigger:hover { + background: rgba(0, 240, 240, 0.06); +} + +[data-theme='tetrastack'] .custom-select-option:hover { + background: rgba(0, 240, 240, 0.1) !important; + color: #00f0f0 !important; +} + +/* Artist pill links = J-piece blue */ +[data-theme='tetrastack'] .artist-ext-link:hover { + background: rgba(0, 96, 240, 0.1); + color: #4090ff !important; + border-color: rgba(64, 144, 255, 0.4) !important; +} + +/* Now playing active track = Z-piece red accent */ +[data-theme='tetrastack'] .np-album-track.active .np-album-track-title, +[data-theme='tetrastack'] .np-album-track.active .np-album-track-num { + color: #f02000; + text-shadow: 0 0 8px rgba(240, 32, 0, 0.5); +} + +/* Connection indicators */ +[data-theme='tetrastack'] .connection-type, +[data-theme='tetrastack'] .connection-server { + color: #f0d000; +} + +/* Sidebar section labels */ +[data-theme='tetrastack'] .nav-section-label { + color: rgba(0, 240, 240, 0.45); +} + +/* Queue tab buttons (Lyrics / Warteschlange) — inactive */ +[data-theme='tetrastack'] .queue-tab-btn { + color: #6060a8; +} + +/* Queue: inactive song artist */ +[data-theme='tetrastack'] .queue-item-artist { + color: #6060a8; +} + +/* Queue: "Nächste Titel" divider */ +[data-theme='tetrastack'] .queue-divider span { + color: #6060a8 !important; +} + +/* ── The Book (Social Media) ────────────────────────────────── */ +[data-theme='the-book'] { + color-scheme: light; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2365676B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + --ctp-crust: #FFFFFF; + --ctp-mantle: #FFFFFF; + --ctp-base: #F0F2F5; + --ctp-surface0: #E4E6EB; + --ctp-surface1: #D8DADF; + --ctp-surface2: #CED0D4; + --ctp-overlay0: #B0B3B8; + --ctp-overlay1: #4B4C4F; + --ctp-overlay2: #3A3B3D; + --ctp-text: #050505; + --ctp-subtext1: #44464A; + --ctp-subtext0: #65676B; + + --ctp-mauve: #1877F2; + --ctp-lavender: #2D88FF; + --ctp-green: #42B72A; + --ctp-yellow: #F7B125; + --ctp-red: #FA383E; + --ctp-blue: #1877F2; + --ctp-teal: #00A400; + --ctp-sky: #45BD62; + --ctp-sapphire: #0064D1; + --ctp-pink: #F33E58; + --ctp-flamingo: #F33E58; + --ctp-rosewater: #F0F2F5; + --ctp-maroon: #B12425; + --ctp-peach: #F7B125; + + --bg-app: #F0F2F5; + --bg-sidebar: #1877F2; + --bg-card: #FFFFFF; + --bg-hover: #F2F2F2; + --bg-player: #FFFFFF; + --bg-glass: rgba(255, 255, 255, 0.9); + + --accent: #1877F2; + --accent-dim: rgba(24, 119, 242, 0.1); + --accent-glow: rgba(24, 119, 242, 0.2); + --volume-accent: #1877F2; + + --text-primary: #050505; + --text-secondary: #44464A; + --text-muted: #65676B; + --border: #CED0D4; + --border-subtle: #E4E6EB; + + --positive: #42B72A; + --warning: #F7B125; + --danger: #FA383E; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + + --shadow-dropdown: 0 12px 28px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1); +} + +[data-theme='the-book'] .player-bar { + border-top: 1px solid var(--border-subtle); + box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03); +} + +[data-theme='the-book'] .sidebar { + border-right: none; +} + +[data-theme='the-book'] .sidebar .nav-link { + color: rgba(255, 255, 255, 0.85); +} + +[data-theme='the-book'] .sidebar .nav-link:hover { + background: rgba(255, 255, 255, 0.15); + color: #ffffff; +} + +[data-theme='the-book'] .sidebar .nav-link.active { + background: rgba(255, 255, 255, 0.2); + color: #ffffff; + font-weight: 600; +} + +[data-theme='the-book'] .sidebar .nav-section-label { + color: rgba(255, 255, 255, 0.55); +} + +[data-theme='the-book'] .sidebar-brand .brand-name { + -webkit-text-fill-color: #ffffff; + color: #ffffff; +} + +[data-theme='the-book'] .sidebar { + --accent: #ffffff; + --ctp-blue: #ffffff; +} + +/* Queue panel — white text on blue background */ +[data-theme='the-book'] .queue-item-title { + color: rgba(255, 255, 255, 0.9); +} + +[data-theme='the-book'] .queue-item-artist, +[data-theme='the-book'] .queue-item-duration { + color: rgba(255, 255, 255, 0.55); +} + +[data-theme='the-book'] .queue-item:hover .queue-item-title, +[data-theme='the-book'] .queue-item.context-active .queue-item-title { + color: #ffffff; +} + +[data-theme='the-book'] .queue-item.active .queue-item-title { + color: #ffffff; +} + +[data-theme='the-book'] .queue-item.active .queue-item-artist, +[data-theme='the-book'] .queue-item.active .queue-item-duration { + color: rgba(255, 255, 255, 0.7); +} + +[data-theme='the-book'] .queue-item:hover, +[data-theme='the-book'] .queue-item.context-active { + background: rgba(255, 255, 255, 0.1); +} + +[data-theme='the-book'] .queue-header, +[data-theme='the-book'] .queue-header h2 { + color: var(--text-primary); +} + +[data-theme='the-book'] .queue-current-info h3 { + color: rgba(255, 255, 255, 0.9); +} + +[data-theme='the-book'] .queue-current-sub { + color: rgba(255, 255, 255, 0.65); +} + +[data-theme='the-book'] .collapse-btn { + background: rgba(255, 255, 255, 0.15); + border-color: rgba(255, 255, 255, 0.3); + color: #ffffff; +} + +[data-theme='the-book'] .player-track-name, +[data-theme='the-book'] .player-track-artist, +[data-theme='the-book'] .player-time { + color: var(--text-primary) !important; +} + + +[data-theme='the-book'] .card { + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + border: 1px solid var(--border-subtle); +} + +/* Album chip — opaque Facebook blue pill */ +[data-theme='the-book'] .badge, +[data-theme='the-book'] .album-detail-badge { + background: #1877F2; + color: #ffffff; +} + +/* Back button — opaque Facebook-style pill */ +[data-theme='the-book'] .album-detail-back { + background: #E7F3FF; + color: #1877F2; +} +[data-theme='the-book'] .album-detail-back:hover { + background: #D8EAFD; + color: #0d6ae0; +} + +/* Queue/Lyrics tab bar — white text on blue sidebar */ +[data-theme='the-book'] .queue-tab-btn { + color: rgba(255, 255, 255, 0.65); +} +[data-theme='the-book'] .queue-tab-btn:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.1); +} +[data-theme='the-book'] .queue-tab-btn.active { + color: #ffffff; +} + +/* ── ReadIt (Social Media) ──────────────────────────────────── */ +[data-theme='readit'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF4500%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + --ctp-crust: #030303; + --ctp-mantle: #1A1A1B; + --ctp-base: #030303; + --ctp-surface0: #1A1A1B; + --ctp-surface1: #272729; + --ctp-surface2: #343536; + --ctp-overlay0: #818384; + --ctp-overlay1: #D7DADC; + --ctp-overlay2: #FFFFFF; + --ctp-text: #D7DADC; + --ctp-subtext1: #D7DADC; + --ctp-subtext0: #818384; + + --ctp-mauve: #FF4500; + --ctp-lavender: #FF581A; + --ctp-green: #46D160; + --ctp-yellow: #FFD635; + --ctp-red: #FF4500; + --ctp-blue: #0079D3; + --ctp-teal: #00AD96; + --ctp-sky: #7193FF; + --ctp-sapphire: #3E5EB3; + --ctp-pink: #FF66AC; + --ctp-flamingo: #FF8280; + --ctp-rosewater: #FFB3A6; + --ctp-maroon: #EA0027; + --ctp-peach: #FFB000; + + --bg-app: #030303; + --bg-sidebar: #1A1A1B; + --bg-card: #1A1A1B; + --bg-hover: #272729; + --bg-player: #1A1A1B; + --bg-glass: rgba(26, 26, 27, 0.9); + + --accent: #FF4500; + --accent-dim: rgba(255, 69, 0, 0.1); + --accent-glow: rgba(255, 69, 0, 0.3); + --volume-accent: #FF4500; + + --text-primary: #D7DADC; + --text-secondary: #D7DADC; + --text-muted: #818384; + --border: #343536; + --border-subtle: #272729; + + --radius-sm: 4px; + --radius-md: 4px; + --radius-lg: 8px; + --radius-xl: 12px; +} + +[data-theme='readit'] .player-bar { + border-top: 1px solid var(--border); + background: var(--bg-sidebar); +} + +[data-theme='readit'] .sidebar { + border-right: 1px solid var(--border); +} + +[data-theme='readit'] .nav-link.active { + background: transparent; + color: var(--accent); +} + +[data-theme='readit'] .nav-link.active::before { + background: var(--accent) !important; + width: 2px; + border-radius: 0 2px 2px 0; +} + +[data-theme='readit'] .btn-primary { + background: var(--accent); + color: white; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + font-size: 11px; +} + +[data-theme='readit'] .btn-primary:hover { + background: var(--ctp-lavender); +} + +[data-theme='readit'] .card { + border: 1px solid var(--border); +} + +[data-theme='readit'] .queue-item.active { + border-left: 2px solid var(--accent); + background: var(--accent-dim); +} + +/* ── Insta (Social Media) ───────────────────────────────────── */ +[data-theme='insta'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + --ctp-crust: #000000; + --ctp-mantle: #000000; + --ctp-base: #121212; + --ctp-surface0: #1A1A1A; + --ctp-surface1: #262626; + --ctp-surface2: #363636; + --ctp-overlay0: #737373; + --ctp-overlay1: #A8A8A8; + --ctp-overlay2: #C7C7C7; + --ctp-text: #F5F5F5; + --ctp-subtext1: #DBDBDB; + --ctp-subtext0: #8E8E8E; + + --ctp-mauve: #E1306C; + --ctp-lavender: #C13584; + --ctp-green: #0095F6; + --ctp-yellow: #FFD600; + --ctp-red: #ED4956; + --ctp-peach: #F56040; + --ctp-flamingo: #FD1D1D; + --ctp-blue: #0095F6; + --ctp-teal: #0095F6; + --ctp-sky: #C13584; + --ctp-sapphire: #833ab4; + --ctp-pink: #E1306C; + --ctp-rosewater: #fcb045; + --ctp-maroon: #ED4956; + + --bg-app: #121212; + --bg-sidebar: #000000; + --bg-card: #1A1A1A; + --bg-hover: #262626; + --bg-player: #000000; + --bg-glass: rgba(0, 0, 0, 0.85); + + --accent: #E1306C; + --accent-dim: rgba(225, 48, 108, 0.15); + --accent-glow: rgba(225, 48, 108, 0.35); + --volume-accent: #E1306C; + + --text-primary: #F5F5F5; + --text-secondary: #A8A8A8; + --text-muted: #737373; + --border: #262626; + --border-subtle: #1A1A1A; + + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 22px; +} + +[data-theme='insta'] .progress-bar-fill { + background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; +} + +[data-theme='insta'] .nav-link.active::before { + background: linear-gradient(to bottom, #833ab4, #fd1d1d, #fcb045) !important; + width: 3px; +} + +[data-theme='insta'] .player-bar { + border-top: 1px solid var(--border); +} + +[data-theme='insta'] .btn-primary:hover { + background: linear-gradient(45deg, #f09433, #dc2743, #bc1888) !important; + border-color: transparent; +} + +[data-theme='insta'] .sidebar { + border-right: 1px solid var(--border); +} + +/* ── Hill Valley 85 (Movies) ────────────────────────────────── */ diff --git a/src/styles/themes/duskfox.css b/src/styles/themes/duskfox.css new file mode 100644 index 00000000..a78634e2 --- /dev/null +++ b/src/styles/themes/duskfox.css @@ -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; +} + diff --git a/src/styles/themes/dzr0.css b/src/styles/themes/dzr0.css new file mode 100644 index 00000000..34251a18 --- /dev/null +++ b/src/styles/themes/dzr0.css @@ -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; +} + diff --git a/src/styles/themes/focus.css b/src/styles/themes/focus.css new file mode 100644 index 00000000..752adada --- /dev/null +++ b/src/styles/themes/focus.css @@ -0,0 +1,7 @@ +/* ─── Focus ─── */ +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + border-radius: var(--radius-sm); +} + diff --git a/src/styles/themes/font-overrides.css b/src/styles/themes/font-overrides.css new file mode 100644 index 00000000..de501dc1 --- /dev/null +++ b/src/styles/themes/font-overrides.css @@ -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; +} + diff --git a/src/styles/themes/global-base-settings.css b/src/styles/themes/global-base-settings.css new file mode 100644 index 00000000..917781d9 --- /dev/null +++ b/src/styles/themes/global-base-settings.css @@ -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; +} + diff --git a/src/styles/themes/global-dragging-state.css b/src/styles/themes/global-dragging-state.css new file mode 100644 index 00000000..ca3fbd12 --- /dev/null +++ b/src/styles/themes/global-dragging-state.css @@ -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; +} + diff --git a/src/styles/themes/grand-theft-audio-gta-v-los-santos-at-night.css b/src/styles/themes/grand-theft-audio-gta-v-los-santos-at-night.css new file mode 100644 index 00000000..aeaa2ae4 --- /dev/null +++ b/src/styles/themes/grand-theft-audio-gta-v-los-santos-at-night.css @@ -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; +} + diff --git a/src/styles/themes/gruvbox-dark-hard.css b/src/styles/themes/gruvbox-dark-hard.css new file mode 100644 index 00000000..fe5145c6 --- /dev/null +++ b/src/styles/themes/gruvbox-dark-hard.css @@ -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; +} + diff --git a/src/styles/themes/gruvbox-dark-medium.css b/src/styles/themes/gruvbox-dark-medium.css new file mode 100644 index 00000000..f6b016ae --- /dev/null +++ b/src/styles/themes/gruvbox-dark-medium.css @@ -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; +} + diff --git a/src/styles/themes/gruvbox-dark-soft.css b/src/styles/themes/gruvbox-dark-soft.css new file mode 100644 index 00000000..d643a7b2 --- /dev/null +++ b/src/styles/themes/gruvbox-dark-soft.css @@ -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; +} + diff --git a/src/styles/themes/gruvbox-light-hard.css b/src/styles/themes/gruvbox-light-hard.css new file mode 100644 index 00000000..6e5289a8 --- /dev/null +++ b/src/styles/themes/gruvbox-light-hard.css @@ -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; +} + diff --git a/src/styles/themes/gruvbox-light-medium.css b/src/styles/themes/gruvbox-light-medium.css new file mode 100644 index 00000000..d7e39fa5 --- /dev/null +++ b/src/styles/themes/gruvbox-light-medium.css @@ -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; +} + diff --git a/src/styles/themes/gruvbox-light-soft.css b/src/styles/themes/gruvbox-light-soft.css new file mode 100644 index 00000000..ae98c5e8 --- /dev/null +++ b/src/styles/themes/gruvbox-light-soft.css @@ -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; +} + diff --git a/src/styles/themes/guild-wars-1-tyria.css b/src/styles/themes/guild-wars-1-tyria.css new file mode 100644 index 00000000..6c66abe4 --- /dev/null +++ b/src/styles/themes/guild-wars-1-tyria.css @@ -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; +} + + diff --git a/src/styles/themes/heisenberg-breaking-bad.css b/src/styles/themes/heisenberg-breaking-bad.css new file mode 100644 index 00000000..1124c5f3 --- /dev/null +++ b/src/styles/themes/heisenberg-breaking-bad.css @@ -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; +} + diff --git a/src/styles/themes/index.css b/src/styles/themes/index.css new file mode 100644 index 00000000..1147c5a3 --- /dev/null +++ b/src/styles/themes/index.css @@ -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'; diff --git a/src/styles/themes/input-search.css b/src/styles/themes/input-search.css new file mode 100644 index 00000000..e3086dc4 --- /dev/null +++ b/src/styles/themes/input-search.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); +} + diff --git a/src/styles/themes/input.css b/src/styles/themes/input.css new file mode 100644 index 00000000..49197bc7 --- /dev/null +++ b/src/styles/themes/input.css @@ -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 */ +} + diff --git a/src/styles/themes/kanagawa-dragon-rebelot-kanagawa-nvim-high-contrast-dark.css b/src/styles/themes/kanagawa-dragon-rebelot-kanagawa-nvim-high-contrast-dark.css new file mode 100644 index 00000000..dfbb11a0 --- /dev/null +++ b/src/styles/themes/kanagawa-dragon-rebelot-kanagawa-nvim-high-contrast-dark.css @@ -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; +} + diff --git a/src/styles/themes/kanagawa-lotus-rebelot-kanagawa-nvim-light.css b/src/styles/themes/kanagawa-lotus-rebelot-kanagawa-nvim-light.css new file mode 100644 index 00000000..cb1f26c6 --- /dev/null +++ b/src/styles/themes/kanagawa-lotus-rebelot-kanagawa-nvim-light.css @@ -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; +} + diff --git a/src/styles/themes/kanagawa-wave-rebelot-kanagawa-nvim-default-dark.css b/src/styles/themes/kanagawa-wave-rebelot-kanagawa-nvim-default-dark.css new file mode 100644 index 00000000..470a9aa2 --- /dev/null +++ b/src/styles/themes/kanagawa-wave-rebelot-kanagawa-nvim-default-dark.css @@ -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; +} + diff --git a/src/styles/themes/lambda-17-half-life-city-17.css b/src/styles/themes/lambda-17-half-life-city-17.css new file mode 100644 index 00000000..33995b0d --- /dev/null +++ b/src/styles/themes/lambda-17-half-life-city-17.css @@ -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; +} + diff --git a/src/styles/themes/latte-light-theme-component-overrides.css b/src/styles/themes/latte-light-theme-component-overrides.css new file mode 100644 index 00000000..cf7c3210 --- /dev/null +++ b/src/styles/themes/latte-light-theme-component-overrides.css @@ -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); } + diff --git a/src/styles/themes/loading-spinner.css b/src/styles/themes/loading-spinner.css new file mode 100644 index 00000000..8d33e36c --- /dev/null +++ b/src/styles/themes/loading-spinner.css @@ -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; +} + diff --git a/src/styles/themes/macos-ventura-dark.css b/src/styles/themes/macos-ventura-dark.css new file mode 100644 index 00000000..7bcac607 --- /dev/null +++ b/src/styles/themes/macos-ventura-dark.css @@ -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; +} + diff --git a/src/styles/themes/macos-ventura-light.css b/src/styles/themes/macos-ventura-light.css new file mode 100644 index 00000000..ebfc5985 --- /dev/null +++ b/src/styles/themes/macos-ventura-light.css @@ -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; +} + diff --git a/src/styles/themes/middle-earth-epic-fantasy-cinematic.css b/src/styles/themes/middle-earth-epic-fantasy-cinematic.css new file mode 100644 index 00000000..e81c5d27 --- /dev/null +++ b/src/styles/themes/middle-earth-epic-fantasy-cinematic.css @@ -0,0 +1,4 @@ +/* ───────────────────────────────────────────────────────────── + Middle Earth — Epic Fantasy / Cinematic + ───────────────────────────────────────────────────────────── */ + diff --git a/src/styles/themes/middle-earth-red-book-of-westmarch.css b/src/styles/themes/middle-earth-red-book-of-westmarch.css new file mode 100644 index 00000000..80da7615 --- /dev/null +++ b/src/styles/themes/middle-earth-red-book-of-westmarch.css @@ -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; +} + diff --git a/src/styles/themes/middle-earth-the-one-ring-inscription-glow.css b/src/styles/themes/middle-earth-the-one-ring-inscription-glow.css new file mode 100644 index 00000000..003469e1 --- /dev/null +++ b/src/styles/themes/middle-earth-the-one-ring-inscription-glow.css @@ -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); + } +} + diff --git a/src/styles/themes/midnight-blue.css b/src/styles/themes/midnight-blue.css new file mode 100644 index 00000000..80d1bf66 --- /dev/null +++ b/src/styles/themes/midnight-blue.css @@ -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; +} + diff --git a/src/styles/themes/morpheus-matrix-style.css b/src/styles/themes/morpheus-matrix-style.css new file mode 100644 index 00000000..d0cecef3 --- /dev/null +++ b/src/styles/themes/morpheus-matrix-style.css @@ -0,0 +1,4 @@ +/* ───────────────────────────────────────────────────────────── + Morpheus — Matrix Style + ───────────────────────────────────────────────────────────── */ + diff --git a/src/styles/themes/mouse-event-dnd-cursor-psy-dragging.css b/src/styles/themes/mouse-event-dnd-cursor-psy-dragging.css new file mode 100644 index 00000000..24f9c731 --- /dev/null +++ b/src/styles/themes/mouse-event-dnd-cursor-psy-dragging.css @@ -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; +} + diff --git a/src/styles/themes/ms-dos.css b/src/styles/themes/ms-dos.css new file mode 100644 index 00000000..4a7d06b4 --- /dev/null +++ b/src/styles/themes/ms-dos.css @@ -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; +} + + diff --git a/src/styles/themes/musicmatch-jukebox-y2k-metallic-silver-blue-display.css b/src/styles/themes/musicmatch-jukebox-y2k-metallic-silver-blue-display.css new file mode 100644 index 00000000..31e9d8d2 --- /dev/null +++ b/src/styles/themes/musicmatch-jukebox-y2k-metallic-silver-blue-display.css @@ -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; +} + diff --git a/src/styles/themes/neon-drift.css b/src/styles/themes/neon-drift.css new file mode 100644 index 00000000..58a08580 --- /dev/null +++ b/src/styles/themes/neon-drift.css @@ -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; +} + diff --git a/src/styles/themes/nightcity-2077-cyberpunk-2077.css b/src/styles/themes/nightcity-2077-cyberpunk-2077.css new file mode 100644 index 00000000..7c31825a --- /dev/null +++ b/src/styles/themes/nightcity-2077-cyberpunk-2077.css @@ -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; +} + diff --git a/src/styles/themes/nightfox.css b/src/styles/themes/nightfox.css new file mode 100644 index 00000000..1a5654ee --- /dev/null +++ b/src/styles/themes/nightfox.css @@ -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; +} + diff --git a/src/styles/themes/nord-aurora-dark-aurora-purple.css b/src/styles/themes/nord-aurora-dark-aurora-purple.css new file mode 100644 index 00000000..27a1d5ad --- /dev/null +++ b/src/styles/themes/nord-aurora-dark-aurora-purple.css @@ -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; +} + diff --git a/src/styles/themes/nord-frost-deep-ocean-blue.css b/src/styles/themes/nord-frost-deep-ocean-blue.css new file mode 100644 index 00000000..a6e5a3e0 --- /dev/null +++ b/src/styles/themes/nord-frost-deep-ocean-blue.css @@ -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; +} + diff --git a/src/styles/themes/nord-polar-night-dark.css b/src/styles/themes/nord-polar-night-dark.css new file mode 100644 index 00000000..d561697b --- /dev/null +++ b/src/styles/themes/nord-polar-night-dark.css @@ -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; +} + diff --git a/src/styles/themes/nord-snow-storm-light.css b/src/styles/themes/nord-snow-storm-light.css new file mode 100644 index 00000000..00a1eff8 --- /dev/null +++ b/src/styles/themes/nord-snow-storm-light.css @@ -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; +} + diff --git a/src/styles/themes/nordfox.css b/src/styles/themes/nordfox.css new file mode 100644 index 00000000..d1d1499d --- /dev/null +++ b/src/styles/themes/nordfox.css @@ -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; +} + diff --git a/src/styles/themes/north-park-south-park.css b/src/styles/themes/north-park-south-park.css new file mode 100644 index 00000000..c8d13700 --- /dev/null +++ b/src/styles/themes/north-park-south-park.css @@ -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; +} + diff --git a/src/styles/themes/nucleo-classic-hifi-winamp-brass.css b/src/styles/themes/nucleo-classic-hifi-winamp-brass.css new file mode 100644 index 00000000..0d889d12 --- /dev/null +++ b/src/styles/themes/nucleo-classic-hifi-winamp-brass.css @@ -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; +} + diff --git a/src/styles/themes/obsidian-black.css b/src/styles/themes/obsidian-black.css new file mode 100644 index 00000000..0e285570 --- /dev/null +++ b/src/styles/themes/obsidian-black.css @@ -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; +} + diff --git a/src/styles/themes/obsidian-gold.css b/src/styles/themes/obsidian-gold.css new file mode 100644 index 00000000..c524cd5a --- /dev/null +++ b/src/styles/themes/obsidian-gold.css @@ -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; +} + diff --git a/src/styles/themes/order-of-the-phoenix.css b/src/styles/themes/order-of-the-phoenix.css new file mode 100644 index 00000000..5540ced3 --- /dev/null +++ b/src/styles/themes/order-of-the-phoenix.css @@ -0,0 +1 @@ +/* ─── Order of the Phoenix ─── */ diff --git a/src/styles/themes/pandora-bioluminescent-sci-fi.css b/src/styles/themes/pandora-bioluminescent-sci-fi.css new file mode 100644 index 00000000..448dd344 --- /dev/null +++ b/src/styles/themes/pandora-bioluminescent-sci-fi.css @@ -0,0 +1,4 @@ +/* ───────────────────────────────────────────────────────────── + Pandora — Bioluminescent Sci-Fi + ───────────────────────────────────────────────────────────── */ + diff --git a/src/styles/themes/poison.css b/src/styles/themes/poison.css new file mode 100644 index 00000000..b74d7d79 --- /dev/null +++ b/src/styles/themes/poison.css @@ -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); +} + diff --git a/src/styles/themes/powerdvd-classic-virtual-hifi-receiver-vfd-display.css b/src/styles/themes/powerdvd-classic-virtual-hifi-receiver-vfd-display.css new file mode 100644 index 00000000..b0ef4823 --- /dev/null +++ b/src/styles/themes/powerdvd-classic-virtual-hifi-receiver-vfd-display.css @@ -0,0 +1 @@ +/* ─── PowerDVD Classic — Virtual HiFi Receiver / VFD Display ─── */ diff --git a/src/styles/themes/powerslave-inspired-iron-maiden.css b/src/styles/themes/powerslave-inspired-iron-maiden.css new file mode 100644 index 00000000..15f44713 --- /dev/null +++ b/src/styles/themes/powerslave-inspired-iron-maiden.css @@ -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; +} + diff --git a/src/styles/themes/progress-range.css b/src/styles/themes/progress-range.css new file mode 100644 index 00000000..b1e38765 --- /dev/null +++ b/src/styles/themes/progress-range.css @@ -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); +} + diff --git a/src/styles/themes/psychowave-synthwave-retrowave.css b/src/styles/themes/psychowave-synthwave-retrowave.css new file mode 100644 index 00000000..66aa7395 --- /dev/null +++ b/src/styles/themes/psychowave-synthwave-retrowave.css @@ -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; +} + diff --git a/src/styles/themes/reset.css b/src/styles/themes/reset.css new file mode 100644 index 00000000..fcf214a0 --- /dev/null +++ b/src/styles/themes/reset.css @@ -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; +} + diff --git a/src/styles/themes/sakura-night.css b/src/styles/themes/sakura-night.css new file mode 100644 index 00000000..9931fc23 --- /dev/null +++ b/src/styles/themes/sakura-night.css @@ -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; +} + diff --git a/src/styles/themes/scrollable-area.css b/src/styles/themes/scrollable-area.css new file mode 100644 index 00000000..bce07c71 --- /dev/null +++ b/src/styles/themes/scrollable-area.css @@ -0,0 +1,7 @@ +/* ─── Scrollable area ─── */ +.scroll-area { + overflow-y: auto; + overflow-x: hidden; + flex: 1; +} + diff --git a/src/styles/themes/scrollbars.css b/src/styles/themes/scrollbars.css new file mode 100644 index 00000000..619fa67a --- /dev/null +++ b/src/styles/themes/scrollbars.css @@ -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); +} + diff --git a/src/styles/themes/sepia-dark.css b/src/styles/themes/sepia-dark.css new file mode 100644 index 00000000..b115e1f9 --- /dev/null +++ b/src/styles/themes/sepia-dark.css @@ -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; +} + diff --git a/src/styles/themes/spider-tech-spider-man.css b/src/styles/themes/spider-tech-spider-man.css new file mode 100644 index 00000000..9fe335a3 --- /dev/null +++ b/src/styles/themes/spider-tech-spider-man.css @@ -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; +} + diff --git a/src/styles/themes/spotless.css b/src/styles/themes/spotless.css new file mode 100644 index 00000000..53290b95 --- /dev/null +++ b/src/styles/themes/spotless.css @@ -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); +} + diff --git a/src/styles/themes/star-rating.css b/src/styles/themes/star-rating.css new file mode 100644 index 00000000..49eb15d0 --- /dev/null +++ b/src/styles/themes/star-rating.css @@ -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; + } +} + diff --git a/src/styles/themes/stark-hud-iron-man-arc-reactor.css b/src/styles/themes/stark-hud-iron-man-arc-reactor.css new file mode 100644 index 00000000..ced2ed92 --- /dev/null +++ b/src/styles/themes/stark-hud-iron-man-arc-reactor.css @@ -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; +} + diff --git a/src/styles/themes/terafox.css b/src/styles/themes/terafox.css new file mode 100644 index 00000000..7145f6ae --- /dev/null +++ b/src/styles/themes/terafox.css @@ -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; +} + diff --git a/src/styles/themes/the-matrix-morpheus.css b/src/styles/themes/the-matrix-morpheus.css new file mode 100644 index 00000000..1ee13fc2 --- /dev/null +++ b/src/styles/themes/the-matrix-morpheus.css @@ -0,0 +1,371 @@ +/* ─── The Matrix — Morpheus ─── */ +[data-theme='morpheus'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300ff41%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette ── */ + --ctp-crust: #000000; + --ctp-mantle: #020502; + --ctp-base: #050905; + --ctp-surface0: #0a120a; + --ctp-surface1: #0f1c0f; + --ctp-surface2: #162416; + --ctp-overlay0: #003b00; + --ctp-overlay1: #008f11; + --ctp-overlay2: #00cc33; + --ctp-text: #00ff41; + --ctp-subtext1: #00cc33; + --ctp-subtext0: #008f11; + --ctp-mauve: #00ff41; + --ctp-lavender: #adff2f; + --ctp-green: #00ff41; + --ctp-teal: #20c20e; + --ctp-sky: #00ff41; + --ctp-blue: #00ff41; + --ctp-sapphire: #008f11; + --ctp-pink: #003b00; + --ctp-flamingo: #003b00; + --ctp-rosewater: #d2ff00; + --ctp-yellow: #adff2f; + --ctp-peach: #00ff41; + --ctp-maroon: #003b00; + --ctp-red: #ff0033; + + /* ── Semantic tokens ── */ + --bg-app: #050905; + --bg-sidebar: #000000; + --bg-card: #0a120a; + --bg-hover: rgba(0, 255, 65, 0.10); + --bg-player: #000000; + --bg-glass: rgba(0, 8, 0, 0.96); + --accent: #00ff41; + --accent-dim: rgba(0, 255, 65, 0.12); + --accent-glow: rgba(0, 255, 65, 0.45); + --volume-accent: #00ff41; + --text-primary: #00ff41; + --text-secondary: #00cc33; + --text-muted: #22cc44; + --border: #003b00; + --border-subtle: #001a00; + --positive: #00ff41; + --warning: #adff2f; + --danger: #ff0033; + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 2px; +} + +/* ── App shell: solid dark base (scanlines moved to sidebar for perf) ── */ +[data-theme='morpheus'] .app-shell { + background-color: #050905; +} + +/* ── Sidebar: black with code-column ghost pattern ── */ +[data-theme='morpheus'] .sidebar { + background-color: #000000; + background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 19px, + rgba(0, 255, 65, 0.03) 19px, rgba(0, 255, 65, 0.03) 20px); + border-right: 1px solid #003b00; +} + +/* Nav links */ +[data-theme='morpheus'] .nav-link { + color: #00cc33; +} + +[data-theme='morpheus'] .nav-link:hover { + background: rgba(0, 255, 65, 0.08); + color: #00ff41; + text-shadow: 0 0 8px rgba(0, 255, 65, 0.50); +} + +[data-theme='morpheus'] .nav-link.active { + background: rgba(0, 255, 65, 0.10); + color: #00ff41; + text-shadow: 0 0 6px rgba(0, 255, 65, 0.45); +} + +[data-theme='morpheus'] .nav-link.active::before { + background: #00ff41; + box-shadow: 0 0 8px rgba(0, 255, 65, 0.70); +} + +[data-theme='morpheus'] .nav-section-label { + color: #003b00; +} + +/* ── Player bar: black glass with phosphor glow ── */ +[data-theme='morpheus'] .player-bar { + background: #000000; + border-top: 1px solid rgba(0, 255, 65, 0.35); + box-shadow: + inset 0 1px 0 rgba(0, 255, 65, 0.12), + 0 -4px 24px rgba(0, 255, 65, 0.06); +} + +/* Track info: phosphor CRT glow */ +[data-theme='morpheus'] .player-track-name { + font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; + color: #00ff41; + text-shadow: 0 0 10px rgba(0, 255, 65, 0.70), 0 0 20px rgba(0, 255, 65, 0.30); + letter-spacing: 0.04em; +} + +[data-theme='morpheus'] .player-track-artist, +[data-theme='morpheus'] .player-time { + font-family: 'JetBrains Mono', 'Courier New', monospace; + color: #00cc33; + opacity: 0.85; +} + +/* ── Transport buttons: terminal command style ── */ +[data-theme='morpheus'] .player-btn, +[data-theme='morpheus'] .player-btn-primary { + background: #000000; + color: #00ff41; + border: 1px solid #003b00; + border-radius: 2px; + box-shadow: inset 0 0 6px rgba(0, 255, 65, 0.05); +} + +[data-theme='morpheus'] .player-btn:hover, +[data-theme='morpheus'] .player-btn-primary:hover { + background: rgba(0, 255, 65, 0.08); + border-color: #00ff41; + box-shadow: + 0 0 12px rgba(0, 255, 65, 0.35), + inset 0 0 8px rgba(0, 255, 65, 0.08); + color: #00ff41; +} + +/* ── All buttons: terminal style ── */ +[data-theme='morpheus'] .btn, +[data-theme='morpheus'] .btn-surface, +[data-theme='morpheus'] .btn-ghost, +[data-theme='morpheus'] .btn-primary, +[data-theme='morpheus'] .hero-play-btn, +[data-theme='morpheus'] .album-card-details-btn, +[data-theme='morpheus'] .queue-round-btn { + background: #000000; + color: #00ff41; + border: 1px solid #003b00; + border-radius: 0; + font-family: 'JetBrains Mono', 'Courier New', monospace; + box-shadow: none; +} + +[data-theme='morpheus'] .btn:hover, +[data-theme='morpheus'] .btn-surface:hover, +[data-theme='morpheus'] .btn-ghost:hover, +[data-theme='morpheus'] .btn-primary:hover, +[data-theme='morpheus'] .hero-play-btn:hover, +[data-theme='morpheus'] .album-card-details-btn:hover { + background: rgba(0, 255, 65, 0.08); + border-color: #00ff41; + color: #00ff41; + box-shadow: 0 0 10px rgba(0, 255, 65, 0.28), inset 0 0 8px rgba(0, 255, 65, 0.05); +} + +[data-theme='morpheus'] .btn-primary { + border-color: #00cc33; + box-shadow: 0 0 8px rgba(0, 255, 65, 0.20); +} + +[data-theme='morpheus'] .btn-primary:hover { + border-color: #00ff41; + box-shadow: 0 0 16px rgba(0, 255, 65, 0.45), inset 0 0 10px rgba(0, 255, 65, 0.08); +} + +/* Queue round button active: bright green */ +[data-theme='morpheus'] .queue-round-btn:hover:not(:disabled):not(.active) { + background: rgba(0, 255, 65, 0.08); + border-color: #00ff41; + color: #00ff41; + box-shadow: 0 0 10px rgba(0, 255, 65, 0.28); +} + +[data-theme='morpheus'] .queue-round-btn.active { + background: rgba(0, 255, 65, 0.15); + border-color: #00ff41; + color: #00ff41; + box-shadow: 0 0 12px rgba(0, 255, 65, 0.40), inset 0 0 8px rgba(0, 255, 65, 0.08); +} + +/* ── Cards: dark terminal panels ── */ +[data-theme='morpheus'] .card { + background: #0a120a; + border: 1px solid #003b00; + border-radius: 0; + box-shadow: inset 0 0 24px rgba(0, 255, 65, 0.02), 0 0 12px rgba(0, 0, 0, 0.60); +} + +/* ── Content header: terminal prompt bar ── */ +[data-theme='morpheus'] .content-header { + background: #000000; + border-bottom: 1px solid rgba(0, 255, 65, 0.25); + box-shadow: 0 2px 16px rgba(0, 255, 65, 0.04); +} + +/* ── Theme accordion: terminal hover ── */ +[data-theme='morpheus'] .theme-accordion-header:hover { + background: rgba(0, 255, 65, 0.08); + color: #00ff41; + text-shadow: 0 0 6px rgba(0, 255, 65, 0.40); +} + +[data-theme='morpheus'] .theme-accordion-open .theme-accordion-header { + background: rgba(0, 255, 65, 0.10); + color: #00ff41; +} + +[data-theme='morpheus'] .theme-accordion-open .theme-accordion-chevron { + color: #00ff41; +} + +/* ── Progress bar: terminal loading bar ── */ +[data-theme='morpheus'] .progress-bar-track { + background: #001a00; + border: 1px solid #003b00; + border-radius: 0; +} + +[data-theme='morpheus'] .progress-bar-fill { + background: #00ff41; + border-radius: 0; + box-shadow: 0 0 8px rgba(0, 255, 65, 0.60), 0 0 2px rgba(0, 255, 65, 1); +} + +/* ── Scrollbar: CRT terminal style ── */ +[data-theme='morpheus'] ::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +[data-theme='morpheus'] ::-webkit-scrollbar-track { + background: #000000; +} + +[data-theme='morpheus'] ::-webkit-scrollbar-thumb { + background: #003b00; + border: 1px solid rgba(0, 255, 65, 0.30); +} + +[data-theme='morpheus'] ::-webkit-scrollbar-thumb:hover { + background: rgba(0, 255, 65, 0.25); + box-shadow: 0 0 6px rgba(0, 255, 65, 0.40); +} + +/* ── Glass / dropdowns: black terminal window ── */ +[data-theme='morpheus'] .glass { + background: rgba(0, 8, 0, 0.97) !important; + backdrop-filter: none !important; + border: 1px solid rgba(0, 255, 65, 0.28) !important; + box-shadow: + 0 0 20px rgba(0, 255, 65, 0.08), + inset 0 0 16px rgba(0, 255, 65, 0.02) !important; + border-radius: 0 !important; +} + +[data-theme='morpheus'] .glass [style*="var(--bg-hover)"] { + background: rgba(0, 255, 65, 0.10) !important; + border-radius: 0 !important; +} + +[data-theme='morpheus'] .glass [style*="var(--text-primary)"] { + color: #00ff41 !important; +} + +[data-theme='morpheus'] .glass [style*="var(--text-secondary)"] { + color: #00cc33 !important; +} + +[data-theme='morpheus'] .glass [style*="var(--text-muted)"] { + color: #006b10 !important; +} + +/* ── Hover / selection: phosphor glow highlight ── */ +[data-theme='morpheus'] .queue-tab-btn:hover { + background: rgba(0, 255, 65, 0.08); + color: #00ff41; + text-shadow: 0 0 6px rgba(0, 255, 65, 0.40); +} + +[data-theme='morpheus'] .settings-tab:hover { + background: rgba(0, 255, 65, 0.08); + color: #00ff41; +} + +[data-theme='morpheus'] .settings-tab.active { + background: rgba(0, 255, 65, 0.12); + color: #00ff41; + box-shadow: inset 2px 0 0 #00ff41; +} + +[data-theme='morpheus'] .custom-select-trigger:hover { + background: rgba(0, 255, 65, 0.08); +} + +[data-theme='morpheus'] .custom-select-option:hover { + background: rgba(0, 255, 65, 0.12) !important; + color: #00ff41 !important; + text-shadow: 0 0 6px rgba(0, 255, 65, 0.40) !important; +} + +[data-theme='morpheus'] .artist-ext-link:hover { + background: rgba(0, 255, 65, 0.10); + color: #00ff41 !important; + border-color: #00ff41 !important; + text-shadow: 0 0 6px rgba(0, 255, 65, 0.40); +} + +[data-theme='morpheus'] .np-action-btn:hover { + background: rgba(0, 255, 65, 0.08); +} + +[data-theme='morpheus'] .np-queue-item:hover, +[data-theme='morpheus'] .np-queue-item.context-active { + background: rgba(0, 255, 65, 0.10); + box-shadow: inset 2px 0 0 #00ff41; +} + +[data-theme='morpheus'] .track-row:hover, +[data-theme='morpheus'] .track-row.context-active { + background: rgba(0, 255, 65, 0.08) !important; + box-shadow: inset 2px 0 0 #00ff41; +} + +[data-theme='morpheus'] .artist-row:hover { + background: rgba(0, 255, 65, 0.08); + box-shadow: inset 2px 0 0 #00ff41; +} + +[data-theme='morpheus'] .playlist-row:hover { + background: rgba(0, 255, 65, 0.08); + box-shadow: inset 2px 0 0 #00ff41; +} + +[data-theme='morpheus'] .queue-item:hover, +[data-theme='morpheus'] .queue-item.context-active { + background: rgba(0, 255, 65, 0.10) !important; + box-shadow: inset 2px 0 0 #00ff41; +} + +/* ── Active queue item: glowing green ── */ +[data-theme='morpheus'] .queue-item.active { + background: rgba(0, 255, 65, 0.08); + box-shadow: inset 2px 0 0 #00ff41, 0 0 8px rgba(0, 255, 65, 0.06); +} + +[data-theme='morpheus'] .np-queue-item-active { + text-shadow: 0 0 8px rgba(0, 255, 65, 0.60); +} + +[data-theme='morpheus'] .np-queue-item.active { + background: rgba(0, 255, 65, 0.08); +} + +[data-theme='morpheus'] .np-album-track.active .np-album-track-title, +[data-theme='morpheus'] .np-album-track.active .np-album-track-num { + text-shadow: 0 0 8px rgba(0, 255, 65, 0.60); +} + diff --git a/src/styles/themes/ubuntu-ambiance-component-level-overrides.css b/src/styles/themes/ubuntu-ambiance-component-level-overrides.css new file mode 100644 index 00000000..54d93644 --- /dev/null +++ b/src/styles/themes/ubuntu-ambiance-component-level-overrides.css @@ -0,0 +1,313 @@ +/* ─── Ubuntu Ambiance — component-level overrides ─────────────────────── */ + +/* Column resize grip — was #e4dfd8 on #ede8e2 = 1.08:1 (invisible) + Use the warm grey overlay tone, 2.5:1 — works for a light theme grip. */ +[data-theme='ubuntu-ambiance'] .col-resize-handle::after { + background: #a89080; + width: 2px; +} + +/* Focus ring — keyboard navigation, Ubuntu Orange at AAA against light bg + for the outline itself (not text, so 3:1 UI threshold applies). */ +[data-theme='ubuntu-ambiance'] *:focus-visible { + outline: 2px solid #e95420; + outline-offset: 2px; +} + +/* Scrollbar thumb — visible against warm off-white */ +[data-theme='ubuntu-ambiance'] ::-webkit-scrollbar-thumb { + background: #a89080; +} +[data-theme='ubuntu-ambiance'] *:hover::-webkit-scrollbar-thumb, +[data-theme='ubuntu-ambiance'] .is-scrolling::-webkit-scrollbar-thumb { + background: #7d6e68; +} + +/* ── App shell: warm Ambiance off-white ── */ +[data-theme='ubuntu-ambiance'] .app-shell { + background: #f4efea; +} + +/* ── Sidebar: Unity Launcher dark aubergine ── */ +[data-theme='ubuntu-ambiance'] .sidebar { + background: linear-gradient(180deg, #3d1f3d 0%, #2e162e 100%); + border-right: 1px solid #1a0a1a; + box-shadow: 2px 0 10px rgba(0, 0, 0, 0.35); +} + +/* Sidebar text: light on dark aubergine */ +[data-theme='ubuntu-ambiance'] .sidebar-logo-text, +[data-theme='ubuntu-ambiance'] .nav-link, +[data-theme='ubuntu-ambiance'] .sidebar-bottom a, +[data-theme='ubuntu-ambiance'] .sidebar-bottom button { + color: rgba(255, 255, 255, 0.72); +} + +[data-theme='ubuntu-ambiance'] .nav-link:hover { + background: rgba(255, 255, 255, 0.09); + color: #ffffff; +} + +[data-theme='ubuntu-ambiance'] .nav-link.active { + background: rgba(233, 84, 32, 0.22); + color: #ffffff; +} + +[data-theme='ubuntu-ambiance'] .nav-link.active::before { + background: #e95420; + box-shadow: 0 0 8px rgba(233, 84, 32, 0.60); +} + +[data-theme='ubuntu-ambiance'] { + --logo-color-start: #ffffff; + --logo-color-end: #ffb090; +} + +[data-theme='ubuntu-ambiance'] .sidebar-logo-icon { + color: #e95420; +} + +/* Sidebar version / muted labels */ +[data-theme='ubuntu-ambiance'] .sidebar-version, +[data-theme='ubuntu-ambiance'] .update-toast { + color: rgba(255, 255, 255, 0.40); +} + +/* ── Player bar: Ubuntu panel — darkest aubergine ── */ +[data-theme='ubuntu-ambiance'] .player-bar { + background: linear-gradient(180deg, #2c001e 0%, #1a000f 100%); + border-top: 1px solid #3d0828; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.06), + 0 -3px 16px rgba(0, 0, 0, 0.50); +} + +/* Player text: light on dark panel */ +[data-theme='ubuntu-ambiance'] .player-track-name { + color: #ffffff; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); +} + +[data-theme='ubuntu-ambiance'] .player-track-artist { + color: rgba(255, 255, 255, 0.60); + opacity: 1; +} + +[data-theme='ubuntu-ambiance'] .player-time { + color: rgba(255, 255, 255, 0.65); +} + +/* Transport buttons: Ubuntu Orange on dark panel */ +[data-theme='ubuntu-ambiance'] .player-btn, +[data-theme='ubuntu-ambiance'] .player-btn-primary { + background: linear-gradient(180deg, #f06030 0%, #e95420 50%, #d44418 100%); + color: #ffffff; + border: 1px solid #b83010; + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.50), + inset 0 1px 0 rgba(255, 255, 255, 0.25), + inset 0 -1px 0 rgba(0, 0, 0, 0.20); +} + +[data-theme='ubuntu-ambiance'] .player-btn:hover, +[data-theme='ubuntu-ambiance'] .player-btn-primary:hover { + background: linear-gradient(180deg, #f87040 0%, #f06030 50%, #e04828 100%); + box-shadow: + 0 3px 8px rgba(0, 0, 0, 0.50), + inset 0 1px 0 rgba(255, 255, 255, 0.30), + inset 0 -1px 0 rgba(0, 0, 0, 0.15); +} + +/* ── Content area buttons: Ambiance GTK style ── */ +[data-theme='ubuntu-ambiance'] .btn { + background: linear-gradient(180deg, #f0ebe5 0%, #e4dfd8 100%); + color: #3d2b2b; + border: 1px solid #b8a898; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70), 0 1px 2px rgba(0, 0, 0, 0.15); +} + +[data-theme='ubuntu-ambiance'] .btn:hover { + background: linear-gradient(180deg, #f8f3ed 0%, #ede8e2 100%); + border-color: #a89888; +} + +[data-theme='ubuntu-ambiance'] .btn-primary { + background: linear-gradient(180deg, #f06030 0%, #e95420 100%); + color: #ffffff; + border: 1px solid #b83010; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.22), + 0 1px 3px rgba(0, 0, 0, 0.25), + 0 0 0 0px rgba(233, 84, 32, 0); +} + +[data-theme='ubuntu-ambiance'] .btn-primary:hover { + background: linear-gradient(180deg, #f87040 0%, #f06030 100%); +} + +/* ── Content header: warm Ambiance title band ── */ +[data-theme='ubuntu-ambiance'] .content-header { + background: linear-gradient(180deg, rgba(244, 239, 234, 1) 0%, rgba(237, 232, 226, 0.60) 100%); + border-bottom: 1px solid #c8b8a8; +} + +/* ── Cards / panels ── */ +[data-theme='ubuntu-ambiance'] .glass, +[data-theme='ubuntu-ambiance'] .card { + background: rgba(237, 232, 226, 0.88); + border: 1px solid #c8b8a8; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 1px 4px rgba(0, 0, 0, 0.10); +} + +/* ── Hover / active states: orange accent ── */ +[data-theme='ubuntu-ambiance'] .track-row:hover, +[data-theme='ubuntu-ambiance'] .track-row.context-active { + background: rgba(233, 84, 32, 0.07); + box-shadow: inset 3px 0 0 #e95420; +} + +[data-theme='ubuntu-ambiance'] .queue-item:hover, +[data-theme='ubuntu-ambiance'] .queue-item.context-active { + background: rgba(233, 84, 32, 0.07); +} + +[data-theme='ubuntu-ambiance'] .queue-item.active { + background: rgba(233, 84, 32, 0.12); + border-left: 2px solid #e95420; +} + +[data-theme='ubuntu-ambiance'] .np-queue-item.active { + background: rgba(233, 84, 32, 0.08); +} + +[data-theme='ubuntu-ambiance'] .np-queue-item-active { + color: #e95420; +} + +[data-theme='ubuntu-ambiance'] .np-queue-item:hover, +[data-theme='ubuntu-ambiance'] .np-queue-item.context-active { + background: rgba(233, 84, 32, 0.06); +} + +[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-title, +[data-theme='ubuntu-ambiance'] .np-album-track.active .np-album-track-num { + color: #e95420; +} + +[data-theme='ubuntu-ambiance'] .artist-row:hover { + background: rgba(233, 84, 32, 0.06); + box-shadow: inset 3px 0 0 #e95420; +} + +[data-theme='ubuntu-ambiance'] .playlist-row:hover { + background: rgba(233, 84, 32, 0.06); + box-shadow: inset 3px 0 0 #e95420; +} + +[data-theme='ubuntu-ambiance'] .settings-tab:hover { + background: rgba(233, 84, 32, 0.08); + color: #e95420; +} + +[data-theme='ubuntu-ambiance'] .settings-tab.active { + background: rgba(233, 84, 32, 0.14); + color: #e95420; + border-color: #e95420; +} + +[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover { + background: rgba(233, 84, 32, 0.08); + color: #e95420; +} + +[data-theme='ubuntu-ambiance'] .custom-select-trigger:hover { + background: rgba(233, 84, 32, 0.07); +} + +[data-theme='ubuntu-ambiance'] .custom-select-option:hover { + background: rgba(233, 84, 32, 0.10); +} + +[data-theme='ubuntu-ambiance'] .artist-ext-link:hover { + background: rgba(233, 84, 32, 0.09); + border-color: #e95420; +} + +/* Queue panel on dark player area */ +[data-theme='ubuntu-ambiance'] .queue-round-btn.active { + color: #ffffff; +} + +/* Connection indicators: warm muted on light bg */ +[data-theme='ubuntu-ambiance'] .connection-type, +[data-theme='ubuntu-ambiance'] .connection-server { + color: #907860; +} + +/* ── Album chip: opaque orange pill so it reads on both dark hero and light bg ── */ +[data-theme='ubuntu-ambiance'] .badge, +[data-theme='ubuntu-ambiance'] .album-detail-badge { + background: #e95420; + color: #ffffff; +} + +/* ── Queue panel: on dark aubergine bg — all text must be light ── */ +/* Header + toolbar sit on --bg-app (light) — fine as-is */ +/* List, meta box, divider sit on --bg-sidebar (dark aubergine) */ + +[data-theme='ubuntu-ambiance'] .queue-item-title { + color: rgba(255, 255, 255, 0.88); +} + +[data-theme='ubuntu-ambiance'] .queue-item-artist, +[data-theme='ubuntu-ambiance'] .queue-item-duration { + color: rgba(255, 255, 255, 0.52); +} + +[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-artist, +[data-theme='ubuntu-ambiance'] .queue-item.active .queue-item-duration { + color: rgba(255, 255, 255, 0.72); +} + +[data-theme='ubuntu-ambiance'] .queue-divider span { + color: rgba(255, 255, 255, 0.40) !important; +} + +/* Meta box (current track info) on dark aubergine */ +[data-theme='ubuntu-ambiance'] .queue-current-info h3 { + color: rgba(255, 255, 255, 0.92); +} + +[data-theme='ubuntu-ambiance'] .queue-current-sub { + color: rgba(255, 255, 255, 0.55); +} + +[data-theme='ubuntu-ambiance'] .queue-current-cover .fallback { + color: rgba(255, 255, 255, 0.35); +} + +/* Tabs sit on dark bg too */ +[data-theme='ubuntu-ambiance'] .queue-tab-btn { + color: rgba(255, 255, 255, 0.60); +} + +[data-theme='ubuntu-ambiance'] .queue-tab-btn:hover { + background: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.90); +} + +[data-theme='ubuntu-ambiance'] .queue-tab-btn.active { + color: #e95420; +} + +/* Action buttons in header (on light --bg-app) */ +[data-theme='ubuntu-ambiance'] .queue-action-btn { + color: #7d6e68; +} + +[data-theme='ubuntu-ambiance'] .queue-action-btn:hover:not(:disabled) { + color: #3d2b2b; +} + +/* ─────────────────────────────────────────── */ + diff --git a/src/styles/themes/ubuntu-unity-ambiance-classic-light.css b/src/styles/themes/ubuntu-unity-ambiance-classic-light.css new file mode 100644 index 00000000..1aaf2ab9 --- /dev/null +++ b/src/styles/themes/ubuntu-unity-ambiance-classic-light.css @@ -0,0 +1,77 @@ +/* ─── Ubuntu — Unity Ambiance (Classic Light) ─── */ +/* Warm human desktop: aubergine launcher + orange accent + warm off-white content */ +[data-theme='ubuntu-ambiance'] { + color-scheme: light; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%237d6e68%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette — warm human spectrum ── */ + --ctp-crust: #1a000f; + /* panel blackout aubergine */ + --ctp-mantle: #2c001e; + /* Ubuntu top/bottom panel */ + --ctp-base: #f4efea; + /* Ambiance window warm off-white */ + --ctp-surface0: #ede8e2; + --ctp-surface1: #e4dfd8; + --ctp-surface2: #d8d0c8; + --ctp-overlay0: #c0b0a0; + --ctp-overlay1: #a89080; + --ctp-overlay2: #907870; + --ctp-text: #3d2b2b; + /* warm dark brown — human, not pure black */ + --ctp-subtext1: #5d4e48; + --ctp-subtext0: #7d6e68; + /* Ubuntu color spectrum */ + --ctp-mauve: #e95420; + /* Ubuntu Orange — the soul of Ubuntu */ + --ctp-lavender: #f06030; + --ctp-sky: #f07050; + --ctp-peach: #e95420; + --ctp-teal: #06989a; + --ctp-blue: #3465a4; + --ctp-sapphire: #204a87; + --ctp-green: #4e9a06; + /* Ubuntu success green */ + --ctp-yellow: #c4a000; + --ctp-pink: #cc1e4a; + --ctp-flamingo: #a52828; + --ctp-maroon: #800000; + --ctp-red: #cc0000; + --ctp-rosewater: #cc4444; + + /* ── Semantic tokens ── + Contrast audit (vs. --bg-app #f4efea, L≈0.868): + text-primary 11.7:1 AAA ✓ + text-secondary 7.0:1 AAA ✓ + text-muted 5.4:1 AA ✓ (raised from 4.4:1 — was below AA) + positive 4.7:1 AA ✓ (raised from 3.1:1) + warning 5.4:1 AA ✓ (raised from 2.2:1 — was below all thresholds) + danger 5.2:1 AA ✓ + accent (orange) 3.2:1 UI ✓ (Ubuntu brand, text-on-orange needs dark fg) + */ + --bg-app: #f4efea; + /* warm Ambiance window */ + --bg-sidebar: #3d1f3d; + /* Unity Launcher — dark aubergine */ + --bg-card: #ede8e2; + --bg-hover: #e4ddd5; + --bg-player: #2c001e; + /* Ubuntu panel — blackest aubergine */ + --bg-glass: rgba(244, 239, 234, 0.94); + --accent: #e95420; + /* Ubuntu Orange — brand identity, 3.2:1 UI-pass (prefer dark fg on orange) */ + --accent-dim: rgba(233, 84, 32, 0.12); + --accent-glow: rgba(233, 84, 32, 0.30); + --text-primary: #3d2b2b; + --text-secondary: #5d4e48; + --text-muted: #6a5a53; /* 5.4:1 AA ✓, was #7d6e68 at 4.4:1 (below AA) */ + --border: #a89080; /* 2.5:1, consistent with Ubuntu Warm Grey */ + --border-subtle: #c8bbac; /* ~1.7:1 structural but perceptible */ + --positive: #2e7a00; /* 4.7:1 AA ✓, darkened from #4e9a06 (3.1:1) */ + --warning: #855900; /* 5.4:1 AA ✓, warm amber matching palette, was #c4a000 (2.2:1) */ + --danger: #cc0000; /* 5.2:1 AA ✓ */ + --waveform-played: #e95420; + --waveform-buffered: #a89080; + --waveform-unplayed: #d8d0c8; +} + diff --git a/src/styles/themes/unix-shell.css b/src/styles/themes/unix-shell.css new file mode 100644 index 00000000..f6caf036 --- /dev/null +++ b/src/styles/themes/unix-shell.css @@ -0,0 +1,627 @@ +/* ─── Unix Shell ─── */ +@keyframes unix-cursor-blink { + + 0%, + 49% { + opacity: 1; + } + + 50%, + 100% { + opacity: 0; + } +} + +[data-theme='unix'] { + color-scheme: dark; + font-family: 'Courier New', Courier, 'Lucida Console', monospace; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2322C55E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ANSI colors mapped to semantic palette */ + --ctp-crust: #000000; + --ctp-mantle: #0a0a0a; + --ctp-base: #111111; + --ctp-surface0: #1a1a1a; + --ctp-surface1: #222222; + --ctp-surface2: #2e2e2e; + --ctp-overlay0: #666666; + --ctp-overlay1: #888888; + --ctp-overlay2: #AAAAAA; + --ctp-text: #C8C8C8; + --ctp-subtext1: #AAAAAA; + --ctp-subtext0: #888888; + --ctp-mauve: #C678DD; + --ctp-lavender: #5588FF; + --ctp-pink: #E06C75; + --ctp-flamingo: #FF6B6B; + --ctp-rosewater: #FFFFFF; + --ctp-green: #22C55E; + --ctp-teal: #55FFFF; + --ctp-sky: #55FFFF; + --ctp-blue: #5588FF; + --ctp-sapphire: #5588FF; + --ctp-yellow: #E5C07B; + --ctp-peach: #E06C75; + --ctp-maroon: #AA0000; + --ctp-red: #E06C75; + + --bg-app: #000000; + --bg-sidebar: #0a0a0a; + --bg-card: #111111; + --bg-hover: #1a1a1a; + --bg-player: #000000; + --bg-glass: rgba(0, 0, 0, 0.92); + --accent: #22C55E; + --accent-dim: rgba(34, 197, 94, 0.10); + --accent-glow: rgba(34, 197, 94, 0.25); + --text-primary: #C8C8C8; + --text-secondary: #999999; + --text-muted: #666666; + --border: #222222; + --border-subtle: #1a1a1a; + --border-dropdown: #333333; + --shadow-dropdown: rgba(0, 0, 0, 0.95); + --positive: #22C55E; + --warning: #E5C07B; + --danger: #E06C75; + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + --radius-full: 0px; +} + +/* Monospace override — html inherits to most elements; form controls need explicit override */ +[data-theme='unix'] button, +[data-theme='unix'] input, +[data-theme='unix'] textarea, +[data-theme='unix'] select { + font-family: 'Courier New', Courier, 'Lucida Console', monospace; +} + +/* Sidebar — slightly off-black, thin separator */ +[data-theme='unix'] .sidebar { + background: #0a0a0a; + border-right: 1px solid #222222; +} + +/* Nav active — green left bar */ +[data-theme='unix'] .nav-link.active { + background: rgba(34, 197, 94, 0.10); + border-left: 2px solid #22C55E; + color: #22C55E; +} + +[data-theme='unix'] .nav-link:hover:not(.active) { + background: rgba(34, 197, 94, 0.05); + color: #C8C8C8; +} + +/* Player bar — pure black, thin grey separator */ +[data-theme='unix'] .player-bar { + background-color: #000000; + background-image: repeating-linear-gradient(0deg, + rgba(0, 0, 0, 0.10) 0px, + rgba(0, 0, 0, 0.10) 1px, + transparent 1px, + transparent 2px); + border-top: 1px solid #222222; + box-shadow: none; +} + +/* Track name — white text, green $ prompt prefix, blinking _ cursor */ +[data-theme='unix'] .player-track-name { + color: #FFFFFF; + text-shadow: none; +} + +[data-theme='unix'] .player-track-name::before { + content: '$ '; + color: #22C55E; + font-weight: 700; +} + +[data-theme='unix'] .player-track-name::after { + content: '_'; + animation: unix-cursor-blink 1s step-end infinite; + color: #C8C8C8; + margin-left: 1px; +} + +/* Artist name — ANSI bright blue (ls directory color) */ +[data-theme='unix'] .player-artist-name { + color: #5588FF; +} + +/* Content header — minimal grey rule */ +[data-theme='unix'] .content-header { + border-bottom: 1px solid #1e1e1e; +} + +/* Album/artist cards — dark panel, fine border */ +[data-theme='unix'] .album-card, +[data-theme='unix'] .artist-card { + background: #111111; + border: 1px solid #1e1e1e; + box-shadow: none; +} + +[data-theme='unix'] .album-card:hover, +[data-theme='unix'] .artist-card:hover { + background: #1a1a1a; + border-color: #22C55E; + box-shadow: none; +} + +/* Track / queue row hover — green left accent */ +[data-theme='unix'] .track-row:hover, +[data-theme='unix'] .queue-item:hover { + background: rgba(34, 197, 94, 0.06); + box-shadow: inset 2px 0 0 #22C55E; +} + +/* Primary play button — solid green */ +[data-theme='unix'] .player-btn-primary { + background: #22C55E; + color: #000000; + border: none; + box-shadow: none; +} + +[data-theme='unix'] .player-btn-primary:hover { + background: #16A34A; + box-shadow: none; + transform: none; +} + +/* btn-primary */ +[data-theme='unix'] .btn-primary { + background: #22C55E; + color: #000000; + border: none; + box-shadow: none; +} + +[data-theme='unix'] .btn-primary:hover { + background: #16A34A; + box-shadow: none; +} + +/* Hero play button */ +[data-theme='unix'] .hero-play-btn { + background: #22C55E; + color: #000000; + border: none; + text-transform: lowercase; + letter-spacing: 0.02em; + box-shadow: none; + transition: background var(--transition-fast), transform var(--transition-fast); +} + +[data-theme='unix'] .hero-play-btn:hover { + background: #16A34A; + transform: scale(1.02); + filter: none; + box-shadow: none; +} + +/* Album card overlay button */ +[data-theme='unix'] .album-card-details-btn { + background: #22C55E; + color: #000000; + border: none; + box-shadow: none; +} + +[data-theme='unix'] .album-card-details-btn:hover { + background: #16A34A; +} + +/* Queue round buttons */ +[data-theme='unix'] .queue-round-btn { + border: 1px solid #222222; + box-shadow: none; +} + +[data-theme='unix'] .queue-round-btn.active { + background: #22C55E; + color: #000000; + border-color: #22C55E; + box-shadow: none; +} + +/* Input fields */ +[data-theme='unix'] input, +[data-theme='unix'] textarea { + background: #0a0a0a; + border: 1px solid #222222; + border-radius: 0; +} + +[data-theme='unix'] input:focus, +[data-theme='unix'] textarea:focus { + border-color: #22C55E; + outline: none; + box-shadow: none; +} + +/* Scrollbar — thin 6px, modern terminal style */ +[data-theme='unix'] ::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +[data-theme='unix'] ::-webkit-scrollbar-track { + background: #0a0a0a; +} + +[data-theme='unix'] ::-webkit-scrollbar-thumb { + background: #333333; + border-radius: 0; +} + +[data-theme='unix'] ::-webkit-scrollbar-thumb:hover { + background: #22C55E; +} + +/* Connection indicator — server name and Last.fm username */ +[data-theme='unix'] .connection-type, +[data-theme='unix'] .connection-server { + color: #888888; +} + +/* Connection indicators + Now Playing username */ +[data-theme='spider-tech'] .connection-type, +[data-theme='spider-tech'] .connection-server { + color: #9080a8; +} + +/* Connection indicators */ +[data-theme='dos'] .connection-type, +[data-theme='dos'] .connection-server { + color: #AAAAAA; +} + +/* Track row hover — all child text to navy so nothing drowns on grey */ +[data-theme='dos'] .track-row:hover .track-title, +[data-theme='dos'] .track-row:hover .track-num, +[data-theme='dos'] .track-row:hover .track-artist, +[data-theme='dos'] .track-row:hover .track-duration, +[data-theme='dos'] .track-row:hover .track-codec, +[data-theme='dos'] .track-row:hover button, +[data-theme='dos'] .track-row.context-active .track-title, +[data-theme='dos'] .track-row.context-active .track-num, +[data-theme='dos'] .track-row.context-active .track-artist, +[data-theme='dos'] .track-row.context-active .track-duration, +[data-theme='dos'] .track-row.context-active .track-codec, +[data-theme='dos'] .track-row.context-active button { + color: #000080 !important; + background: transparent !important; +} + +/* ═══════════════════════════════════════════════════════════════════ + HORDE — World of Warcraft, Durotar blood-red earth, forge-fire + ═══════════════════════════════════════════════════════════════════ */ +[data-theme='horde'] { + /* Catppuccin-compatible palette — dark blood-iron */ + --ctp-base: #1a0500; + --ctp-mantle: #140300; + --ctp-crust: #0e0200; + --ctp-surface0: #2e0a02; + --ctp-surface1: #3e1104; + --ctp-surface2: #521806; + --ctp-overlay0: #8a5030; + --ctp-overlay1: #a06038; + --ctp-overlay2: #b87048; + --ctp-subtext0: #c88850; + --ctp-subtext1: #d89860; + --ctp-text: #e8d4b8; + --ctp-lavender: #cc4422; + --ctp-blue: #cc2200; + --ctp-sapphire: #aa1800; + --ctp-sky: #dd3300; + --ctp-teal: #cc5500; + --ctp-green: #887722; + --ctp-yellow: #ffd890; + --ctp-peach: #ff8844; + --ctp-maroon: #991100; + --ctp-red: #cc2200; + --ctp-mauve: #cc4422; + --ctp-pink: #dd5533; + --ctp-flamingo: #ee6644; + --ctp-rosewater: #ffaa66; + + /* Semantic tokens */ + --bg-app: #1a0500; + --bg-sidebar: #110300; + --bg-player: #120400; + --bg-card: #2e0a02; + --bg-card-hover: #3e1104; + --bg-input: #2e0a02; + --bg-overlay: rgba(26, 5, 0, 0.92); + --bg-selection: rgba(204, 34, 0, 0.25); + --border-subtle: rgba(140, 60, 20, 0.30); + --border-default: rgba(180, 80, 30, 0.35); + --border-strong: rgba(220, 120, 50, 0.50); + --text-primary: #e8d4b8; + --text-secondary: #c09070; + --text-muted: #a07848; + --text-disabled: #5a3820; + --accent: #cc2200; + --accent-hover: #e02800; + --accent-glow: rgba(204, 34, 0, 0.35); + --accent-subtle: rgba(204, 34, 0, 0.15); + --danger: #ff4422; + --success: #887722; + --warning: #ff8844; + --nav-active-bg: rgba(204, 34, 0, 0.22); + --nav-active-text: #ffd890; + --scrollbar-thumb: rgba(140, 50, 10, 0.60); + --scrollbar-track: transparent; + --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.70); + --shadow-player: 0 -4px 20px rgba(150, 30, 0, 0.25); + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; +} + +/* Track name — blood-gold glow, as if lit by forge-fire */ +[data-theme='horde'] .player-track-name, +[data-theme='horde'] .queue-track-title { + color: #ffd890; + text-shadow: 0 0 16px rgba(220, 80, 0, 0.55), 0 0 4px rgba(220, 80, 0, 0.25); +} + +/* Sidebar — iron plate lines + subtle red glow on active */ +[data-theme='horde'] .sidebar { + background-color: #110300; + border-right: 1px solid rgba(140, 40, 10, 0.35); +} + +/* Nav active — ember glow */ +[data-theme='horde'] .sidebar-nav-item.active { + background: rgba(204, 34, 0, 0.20); + border-left: 3px solid #cc2200; + box-shadow: inset 0 0 12px rgba(204, 34, 0, 0.10); +} + +/* Player bar — forge-fire glow from below */ +[data-theme='horde'] .player-bar { + background-color: #120400; + background-image: linear-gradient(to bottom, rgba(80, 10, 0, 0.35), transparent); + border-top: 1px solid rgba(180, 60, 20, 0.40); + box-shadow: 0 -4px 24px rgba(150, 30, 0, 0.30); +} + +/* App-shell — safe single-pass radial, no repeating */ +[data-theme='horde'] .app-shell { + background: radial-gradient(ellipse at 65% 110%, rgba(160, 25, 0, 0.18) 0%, transparent 55%); +} + +/* Cards — iron-tinted hover */ +[data-theme='horde'] .album-card:hover, +[data-theme='horde'] .artist-card:hover { + box-shadow: 0 4px 18px rgba(180, 40, 0, 0.30); + border-color: rgba(200, 60, 10, 0.50); +} + +/* Connection indicators */ +[data-theme='horde'] .connection-type, +[data-theme='horde'] .connection-server { + color: #a07848; +} + + +/* ═══════════════════════════════════════════════════════════════════ + ALLIANCE — World of Warcraft, Stormwind navy, cathedral stone & gold + ═══════════════════════════════════════════════════════════════════ */ +[data-theme='alliance'] { + /* Catppuccin-compatible palette — deep navy / cathedral stone */ + --ctp-base: #06101e; + --ctp-mantle: #040c18; + --ctp-crust: #020810; + --ctp-surface0: #0c1e34; + --ctp-surface1: #122440; + --ctp-surface2: #1a2e50; + --ctp-overlay0: #506888; + --ctp-overlay1: #607898; + --ctp-overlay2: #7088a8; + --ctp-subtext0: #8098b8; + --ctp-subtext1: #90a8c8; + --ctp-text: #d8e8f8; + --ctp-lavender: #5588cc; + --ctp-blue: #3388cc; + --ctp-sapphire: #2266aa; + --ctp-sky: #44aadd; + --ctp-teal: #3399cc; + --ctp-green: #88bb44; + --ctp-yellow: #f0c840; + --ctp-peach: #dd9944; + --ctp-maroon: #aa3322; + --ctp-red: #cc4433; + --ctp-mauve: #7766cc; + --ctp-pink: #997acc; + --ctp-flamingo: #aa88cc; + --ctp-rosewater: #bbaacc; + + /* Semantic tokens */ + --bg-app: #06101e; + --bg-sidebar: #040c18; + --bg-player: #050e1a; + --bg-card: #0c1e34; + --bg-card-hover: #122440; + --bg-input: #0c1e34; + --bg-overlay: rgba(6, 16, 30, 0.92); + --bg-selection: rgba(51, 136, 204, 0.25); + --border-subtle: rgba(60, 100, 160, 0.28); + --border-default: rgba(80, 120, 180, 0.35); + --border-strong: rgba(120, 160, 210, 0.50); + --text-primary: #d8e8f8; + --text-secondary: #8098b8; + --text-muted: #6880a0; + --text-disabled: #2a3e58; + --accent: #3388cc; + --accent-hover: #4499dd; + --accent-glow: rgba(51, 136, 204, 0.35); + --accent-subtle: rgba(51, 136, 204, 0.15); + --danger: #cc4433; + --success: #88bb44; + --warning: #dd9944; + --nav-active-bg: rgba(51, 136, 204, 0.20); + --nav-active-text: #e8f4ff; + --scrollbar-thumb: rgba(60, 110, 180, 0.55); + --scrollbar-track: transparent; + --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.60); + --shadow-player: 0 -4px 20px rgba(20, 70, 160, 0.22); + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; +} + +/* Track name — paladin holy-light glow */ +[data-theme='alliance'] .player-track-name, +[data-theme='alliance'] .queue-track-title { + color: #e8f4ff; + text-shadow: 0 0 14px rgba(80, 160, 220, 0.50), 0 0 4px rgba(80, 160, 220, 0.20); +} + +/* Sidebar — cathedral stone columns with gold right-border */ +[data-theme='alliance'] .sidebar { + background-color: #040c18; + border-right: 2px solid rgba(200, 170, 50, 0.30); +} + +/* Nav active — royal blue with gold left accent */ +[data-theme='alliance'] .sidebar-nav-item.active { + background: rgba(51, 136, 204, 0.20); + border-left: 3px solid #f0c840; + box-shadow: inset 0 0 12px rgba(51, 136, 204, 0.10); +} + +/* Player bar — paladin aura glow */ +[data-theme='alliance'] .player-bar { + background-color: #050e1a; + background-image: linear-gradient(to bottom, rgba(20, 60, 130, 0.30), transparent); + border-top: 1px solid rgba(100, 140, 200, 0.35); + box-shadow: 0 -4px 22px rgba(30, 80, 180, 0.22); +} + +/* App-shell — safe single-pass radial, no repeating */ +[data-theme='alliance'] .app-shell { + background: radial-gradient(ellipse at 38% 110%, rgba(25, 70, 170, 0.15) 0%, transparent 55%); +} + +/* Cards — blue-glow hover */ +[data-theme='alliance'] .album-card:hover, +[data-theme='alliance'] .artist-card:hover { + box-shadow: 0 4px 18px rgba(40, 100, 200, 0.28); + border-color: rgba(80, 140, 210, 0.50); +} + +/* Connection indicators */ +[data-theme='alliance'] .connection-type, +[data-theme='alliance'] .connection-server { + color: #6880a0; +} + +/* ═══════════════════════════════════════════════════════════════════ + W11 — Windows 11 Fluent Design, dark mode, Mica material + ═══════════════════════════════════════════════════════════════════ */ +[data-theme='w11'] { + /* Catppuccin-compatible palette — Fluent v2 dark neutrals + Values aligned with Microsoft's actual Windows 11 Dark Mode tokens: + text primary #ffffff (was #f3f3f3 — now matches W11 true white) + text secondary #cfcfcf (was #9a9a9a — W11 Text Secondary Dark, 9.6:1) + text tertiary #a0a0a0 (was #797979 — W11 Text Tertiary Dark, 6.3:1) + control strong rgba(255,255,255,0.40) (was 0.18 — perceptible structural borders) + accent fill #0078d4 kept (for buttons with white text, 4.3:1 AA) + accent text via .w11-link helper → #60cdff (Fluent Accent Text Dark) + danger dark #ff99a4 (Fluent Critical Foreground Dark, 8:1 AAA) */ + --ctp-base: #202020; + --ctp-mantle: #1c1c1c; + --ctp-crust: #181818; + --ctp-surface0: #2c2c2c; + --ctp-surface1: #3b3b3b; /* raised from #363636 for grip/border perceptibility */ + --ctp-surface2: #454545; + --ctp-overlay0: #868686; /* raised from #797979 */ + --ctp-overlay1: #a0a0a0; + --ctp-overlay2: #b4b4b4; + --ctp-subtext0: #cfcfcf; + --ctp-subtext1: #e4e4e4; + --ctp-text: #ffffff; + --ctp-lavender: #6ccbf8; + --ctp-blue: #0078d4; + --ctp-sapphire: #0067c0; + --ctp-sky: #4cc2ff; + --ctp-teal: #00b7c3; + --ctp-green: #6ccb5f; + --ctp-yellow: #f9f1a5; + --ctp-peach: #f7630c; + --ctp-maroon: #ff99a4; /* Fluent Critical Foreground Dark */ + --ctp-red: #ff99a4; + --ctp-mauve: #8764b8; + --ctp-pink: #b146c2; + --ctp-flamingo: #e3008c; + --ctp-rosewater: #f5e1ff; + + /* Semantic tokens */ + --bg-app: #202020; + --bg-sidebar: #2b2b2b; + --bg-player: #1c1c1c; + --bg-card: #2c2c2c; + --bg-card-hover: #3b3b3b; + --bg-input: #2c2c2c; + --bg-overlay: rgba(32, 32, 32, 0.92); + --bg-selection: rgba(0, 120, 212, 0.30); + /* Borders — raised to match Fluent v2 Stroke Control tokens */ + --bg-glass: rgba(32, 32, 32, 0.92); + --border-subtle: rgba(255, 255, 255, 0.08); /* Stroke Divider Dark */ + --border-default: rgba(255, 255, 255, 0.18); /* Stroke Control Default Dark */ + --border-strong: rgba(255, 255, 255, 0.40); /* Stroke Control Strong Dark */ + --border: rgba(255, 255, 255, 0.18); + --text-primary: #ffffff; /* 15.9:1 — AAA ✓ (W11 true white) */ + --text-secondary: #cfcfcf; /* 9.6:1 — AAA ✓ (raised from 5.8:1) */ + --text-muted: #a0a0a0; /* 6.3:1 — AAA near-miss (raised from 4.0:1 below AA) */ + --text-disabled: #5a5a5a; + --accent: #0078d4; /* W11 brand blue — kept for button fills (white text 4.3:1 AA) */ + --accent-hover: #1086e0; + --accent-text: #60cdff; /* Fluent Accent Text Dark — 7.2:1 AAA ✓ for link/text usage */ + --accent-glow: rgba(0, 120, 212, 0.30); + --accent-subtle: rgba(0, 120, 212, 0.15); + --accent-dim: rgba(0, 120, 212, 0.18); + --danger: #ff99a4; /* Fluent Critical Foreground Dark — 8.0:1 AAA ✓ */ + --positive: #6ccb5f; /* W11 Success — 7.8:1 AAA ✓ */ + --success: #6ccb5f; + --warning: #fce100; /* W11 Caution Dark (brighter yellow) — 13.2:1 AAA ✓ */ + --volume-accent: #0078d4; + --nav-active-bg: rgba(0, 120, 212, 0.22); + --nav-active-text: #ffffff; + --scrollbar-thumb: rgba(255, 255, 255, 0.28); + --scrollbar-track: transparent; + --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.50); + --shadow-player: 0 -1px 0 rgba(255, 255, 255, 0.08); + --radius-sm: 6px; + --radius-md: 8px; + --radius-lg: 12px; + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --waveform-played: #60cdff; /* Accent Text Dark — visible on dark bg */ + --waveform-buffered: #868686; + --waveform-unplayed: #3b3b3b; +} + diff --git a/src/styles/themes/utility-classes.css b/src/styles/themes/utility-classes.css new file mode 100644 index 00000000..10ea62da --- /dev/null +++ b/src/styles/themes/utility-classes.css @@ -0,0 +1,29 @@ +/* ─── Utility Classes ─── */ +.glass { + background: var(--bg-glass, rgba(30, 30, 46, 0.75)); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--border-subtle); +} + +.gradient-text { + background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); +} + diff --git a/src/styles/themes/v-tactical.css b/src/styles/themes/v-tactical.css new file mode 100644 index 00000000..9d5f5c72 --- /dev/null +++ b/src/styles/themes/v-tactical.css @@ -0,0 +1,84 @@ +/* ─── V-Tactical ─── */ +[data-theme='v-tactical'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23708599%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + --ctp-crust: #090c0e; + --ctp-mantle: #0d1114; + --ctp-base: #161c22; + --ctp-surface0: #1f2830; + --ctp-surface1: #2a3640; + --ctp-surface2: #3a4a58; + --ctp-overlay0: #526371; + --ctp-overlay1: #708599; + --ctp-overlay2: #8da4b8; + --ctp-text: #e1e9ef; + --ctp-subtext1: #b0c1d1; + --ctp-subtext0: #8da4b8; + --ctp-mauve: #ff8a00; + --ctp-lavender: #ffaa45; + --ctp-pink: #bf616a; + --ctp-flamingo: #d08770; + --ctp-rosewater: #e1e9ef; + --ctp-green: #a3be8c; + --ctp-teal: #88c0d0; + --ctp-sky: #81a1c1; + --ctp-blue: #5e81ac; + --ctp-sapphire: #5e81ac; + --ctp-yellow: #ebcb8b; + --ctp-peach: #d08770; + --ctp-maroon: #bf616a; + --ctp-red: #bf616a; + + --bg-app: #161c22; + --bg-sidebar: #0d1114; + --bg-card: #1f2830; + --bg-hover: rgba(255, 138, 0, 0.1); + --bg-player: #090c0e; + --bg-glass: rgba(13, 17, 20, 0.85); + --accent: #ff8a00; + --accent-dim: rgba(255, 138, 0, 0.15); + --accent-glow: rgba(255, 138, 0, 0.4); + --text-primary: #e1e9ef; + --text-secondary: #b0c1d1; + --text-muted: #708599; + --border: #3a4a58; + --border-subtle: #1f2830; + --border-dropdown: #3a4a58; + --shadow-dropdown: rgba(0, 0, 0, 0.7); + --positive: #a3be8c; + --warning: #ebcb8b; + --danger: #bf616a; + --radius-sm: 1px; + --radius-md: 2px; + --radius-lg: 4px; +} + +[data-theme='v-tactical'] .sidebar { + border-right: 1px solid var(--border); +} + +[data-theme='v-tactical'] .player-bar { + border-top: 2px solid var(--accent); + background: linear-gradient(180deg, #0d1114 0%, #090c0e 100%); +} + +[data-theme='v-tactical'] .player-track-name { + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 700; + color: var(--accent); + text-shadow: 0 0 10px var(--accent-glow); +} + +[data-theme='v-tactical'] .nav-link.active { + background: linear-gradient(90deg, rgba(255, 138, 0, 0.15) 0%, transparent 100%); + border-left: 3px solid var(--accent); +} + +[data-theme='v-tactical'] .btn-primary { + text-transform: uppercase; + font-weight: 800; + letter-spacing: 0.5px; +} + diff --git a/src/styles/themes/vintage-tube-radio-1950s-bakelite-vacuum-tube.css b/src/styles/themes/vintage-tube-radio-1950s-bakelite-vacuum-tube.css new file mode 100644 index 00000000..fd52a032 --- /dev/null +++ b/src/styles/themes/vintage-tube-radio-1950s-bakelite-vacuum-tube.css @@ -0,0 +1,187 @@ +/* ─── Vintage Tube Radio — 1950s Bakelite & Vacuum Tube ─── */ +[data-theme='vintage-tube-radio'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23BCAAA4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette ── */ + --ctp-crust: #1E110A; + /* deep warm black-brown — dial background */ + --ctp-mantle: #5D4037; + /* speaker cloth brown — sidebar */ + --ctp-base: #3E2723; + /* polished bakelite — chassis */ + --ctp-surface0: #4E342E; + --ctp-surface1: #5D4037; + --ctp-surface2: #6D4C41; + --ctp-overlay0: #795548; + --ctp-overlay1: #8D6E63; + --ctp-overlay2: #A1887F; + --ctp-text: #FFECB3; + /* ivory/cream — dial lettering */ + --ctp-subtext1: #D7CCC8; + --ctp-subtext0: #BCAAA4; + /* aged ivory — secondary labels */ + /* Tube glow + tarnished brass accents */ + --ctp-mauve: #FF6F00; + /* vacuum tube orange — primary accent */ + --ctp-lavender: #FF8F00; + --ctp-yellow: #FFC107; + /* warm dial backlight */ + --ctp-peach: #FFB300; + --ctp-green: #558B2F; + --ctp-teal: #00695C; + --ctp-sky: #B08D57; + /* tarnished brass */ + --ctp-blue: #5C6BC0; + --ctp-sapphire: #3949AB; + --ctp-pink: #C2185B; + --ctp-flamingo: #AD1457; + --ctp-rosewater: #E91E63; + --ctp-maroon: #B71C1C; + --ctp-red: #C62828; + + /* ── Semantic tokens ── */ + --bg-app: #3E2723; + --bg-sidebar: #5D4037; + --bg-card: #4E342E; + --bg-hover: #5D4037; + --bg-player: #1E110A; + --bg-glass: rgba(62, 39, 35, 0.92); + --accent: #FF6F00; + --accent-dim: rgba(255, 111, 0, 0.15); + --accent-glow: rgba(255, 111, 0, 0.40); + --text-primary: #FFECB3; + --text-secondary: #BCAAA4; + --text-muted: #b09880; + --border: #B08D57; + /* tarnished brass */ + --border-subtle: #4E342E; + --positive: #558B2F; + --warning: #FFC107; + --danger: #C62828; +} + +/* ── Tube Radio: polished bakelite chassis texture ── */ +[data-theme='vintage-tube-radio'] .app-shell { + background: + radial-gradient(ellipse at 30% 20%, rgba(255, 111, 0, 0.04) 0%, transparent 60%), + radial-gradient(ellipse at 80% 80%, rgba(255, 193, 7, 0.03) 0%, transparent 50%), + #3E2723; +} + +/* Sidebar: speaker cloth — soft radial texture */ +[data-theme='vintage-tube-radio'] .sidebar { + background: + repeating-linear-gradient(0deg, + rgba(0, 0, 0, 0.12) 0px, + rgba(0, 0, 0, 0.12) 1px, + transparent 1px, + transparent 4px), + repeating-linear-gradient(90deg, + rgba(0, 0, 0, 0.08) 0px, + rgba(0, 0, 0, 0.08) 1px, + transparent 1px, + transparent 4px), + #5D4037; + border-right: 2px solid #B08D57; + box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.4); +} + +/* ── Frequency dial (Player Bar) ── */ +[data-theme='vintage-tube-radio'] .player-bar { + background: #1E110A; + border-top: 2px solid #B08D57; + box-shadow: + inset 0 1px 0 rgba(255, 193, 7, 0.08), + 0 -3px 20px rgba(0, 0, 0, 0.7); +} + +/* Track name: warm tube-glow */ +[data-theme='vintage-tube-radio'] .player-track-name { + color: #FFC107; + text-shadow: + 0 0 6px rgba(255, 193, 7, 0.90), + 0 0 14px rgba(255, 111, 0, 0.60), + 0 0 28px rgba(255, 111, 0, 0.30); + letter-spacing: 0.04em; +} + +[data-theme='vintage-tube-radio'] .player-track-artist { + color: #FF8F00; + text-shadow: 0 0 6px rgba(255, 111, 0, 0.50); + opacity: 1; +} + +[data-theme='vintage-tube-radio'] .player-time { + color: #FF8F00; + text-shadow: 0 0 5px rgba(255, 111, 0, 0.55); +} + +/* ── Transport buttons: turned brass knobs ── */ +[data-theme='vintage-tube-radio'] .player-btn, +[data-theme='vintage-tube-radio'] .player-btn-primary { + background: radial-gradient(circle at 38% 32%, #d4a843 0%, #b08d57 45%, #7a5e2a 100%); + color: #1E110A; + border: 1px solid #7a5e2a; + box-shadow: + 0 3px 7px rgba(0, 0, 0, 0.7), + 0 1px 2px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(255, 220, 120, 0.55), + inset 0 -1px 0 rgba(0, 0, 0, 0.3); +} + +[data-theme='vintage-tube-radio'] .player-btn:hover, +[data-theme='vintage-tube-radio'] .player-btn-primary:hover { + background: radial-gradient(circle at 38% 32%, #e8bc55 0%, #c09a65 45%, #8a6e38 100%); + box-shadow: + 0 4px 10px rgba(0, 0, 0, 0.7), + 0 1px 2px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(255, 230, 140, 0.65), + inset 0 -1px 0 rgba(0, 0, 0, 0.3); +} + +/* ── Regular buttons: bakelite style ── */ +[data-theme='vintage-tube-radio'] .btn { + background: linear-gradient(180deg, #4E342E 0%, #3E2723 100%); + color: #FFECB3; + border: 1px solid #B08D57; + box-shadow: + inset 0 1px 0 rgba(255, 220, 150, 0.10), + 0 1px 4px rgba(0, 0, 0, 0.5); +} + +[data-theme='vintage-tube-radio'] .btn:hover { + background: linear-gradient(180deg, #5D4037 0%, #4E342E 100%); +} + +[data-theme='vintage-tube-radio'] .btn-primary { + background: linear-gradient(180deg, #FF8F00 0%, #E65100 100%); + color: #1E110A; + border: 1px solid #BF360C; + box-shadow: + inset 0 1px 0 rgba(255, 220, 120, 0.35), + 0 1px 4px rgba(0, 0, 0, 0.4), + 0 0 10px rgba(255, 111, 0, 0.30); +} + +/* Active queue buttons: dark text on orange */ +[data-theme='vintage-tube-radio'] .queue-round-btn.active { + color: #1E110A; +} + +/* Cards / panels: inset bakelite */ +[data-theme='vintage-tube-radio'] .glass, +[data-theme='vintage-tube-radio'] .card { + background: rgba(78, 52, 46, 0.80); + border: 1px solid #B08D57; + box-shadow: + inset 0 1px 0 rgba(255, 220, 150, 0.06), + 0 2px 8px rgba(0, 0, 0, 0.4); +} + +/* Content header: warm band */ +[data-theme='vintage-tube-radio'] .content-header { + background: linear-gradient(180deg, rgba(93, 64, 55, 0.60) 0%, rgba(62, 39, 35, 0.20) 100%); + border-bottom: 1px solid #B08D57; +} + diff --git a/src/styles/themes/violet-haze.css b/src/styles/themes/violet-haze.css new file mode 100644 index 00000000..11db418e --- /dev/null +++ b/src/styles/themes/violet-haze.css @@ -0,0 +1,68 @@ +/* ─── Violet Haze ─── */ +[data-theme='violet-haze'] { + 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='%23b4a0ff' 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: #09070f; + --ctp-mantle: #0d0a16; + --ctp-base: #100d1a; + --ctp-surface0: #171425; + --ctp-surface1: #1d1930; + --ctp-surface2: #26203d; + + /* Overlays */ + --ctp-overlay0: #4c4270; + --ctp-overlay1: #65558f; + --ctp-overlay2: #7d69aa; + + /* Text */ + --ctp-text: #f3efff; + --ctp-subtext1: #d2c7f5; + --ctp-subtext0: #a696d6; + + /* Softer violet accent */ + --ctp-teal: #b8a7ff; + --ctp-sky: #b8a7ff; + --ctp-sapphire: #9c89e8; + --ctp-blue: #7f6ac8; + --ctp-lavender: #c4b5fd; + --ctp-mauve: #9c89e8; + --ctp-pink: #7f6ac8; + --ctp-flamingo: #c4b5fd; + --ctp-rosewater: #9c89e8; + + /* Semantic */ + --ctp-red: #ff6b6b; + --ctp-maroon: #ff9f68; + --ctp-peach: #ff9f68; + --ctp-yellow: #ffd166; + --ctp-green: #4ade80; + + /* UI */ + --bg-app: #12101d; + --bg-sidebar: #0d0a16; + --bg-card: #171425; + --bg-hover: #211c35; + --bg-player: #0d0a16; + --bg-glass: rgba(18,16,29,0.78); + + --accent: #b4a0ff; + --accent-dim: rgba(184,167,255,0.06); + --accent-glow: rgba(184,167,255,0.10); + + --text-primary: #f3efff; + --text-secondary: #a696d6; + --text-muted: #65558f; + + --border: #26203d; + --border-subtle: #1d1930; + --border-dropdown: #31284c; + --shadow-dropdown: rgba(0,0,0,0.88); + + --positive: #4ade80; + --warning: #ffd166; + --danger: #ff6b6b; +} + diff --git a/src/styles/themes/vision-dark-component-level-overrides.css b/src/styles/themes/vision-dark-component-level-overrides.css new file mode 100644 index 00000000..cf7c79d4 --- /dev/null +++ b/src/styles/themes/vision-dark-component-level-overrides.css @@ -0,0 +1,46 @@ +/* ─── Vision Dark — component-level overrides ───────────────────────────── + Selectors whose default colour (`--ctp-surface1` or `--ctp-surface0`) + collided with the theme's card background at <1.2:1 — raised here to + clear the 3:1 UI threshold required for colour-blind-safe AAA. */ + +/* Column resize grip (tracklist) — was #201c2c on #16131e = 1.1:1 */ +[data-theme='vision-dark'] .col-resize-handle::after { + background: var(--ctp-overlay1); /* #8a84a0 → 5.9:1 on bg-card */ + width: 2px; /* doubled for colour-blind visibility */ +} + +/* Badges — opaque background per theme feedback */ +[data-theme='vision-dark'] .badge, +[data-theme='vision-dark'] .album-detail-badge { + background: var(--ctp-surface2); + color: var(--accent); + border: 1px solid var(--ctp-overlay0); +} + +/* Queue items on the very dark sidebar (#08060e) — force light text */ +[data-theme='vision-dark'] .queue-item-title, +[data-theme='vision-dark'] .queue-current-info h3 { + color: var(--text-primary); +} +[data-theme='vision-dark'] .queue-item-artist, +[data-theme='vision-dark'] .queue-item-duration, +[data-theme='vision-dark'] .queue-current-sub, +[data-theme='vision-dark'] .queue-tab-btn { + color: var(--text-secondary); +} + +/* Focus ring — keyboard navigation indicator with AAA contrast */ +[data-theme='vision-dark'] *:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* Scrollbar thumb — explicit contrast (auto-hide still applies) */ +[data-theme='vision-dark'] ::-webkit-scrollbar-thumb { + background: var(--ctp-overlay0); +} +[data-theme='vision-dark'] *:hover::-webkit-scrollbar-thumb, +[data-theme='vision-dark'] .is-scrolling::-webkit-scrollbar-thumb { + background: var(--ctp-overlay2); +} + diff --git a/src/styles/themes/vision-dark-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css b/src/styles/themes/vision-dark-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css new file mode 100644 index 00000000..1c76646e --- /dev/null +++ b/src/styles/themes/vision-dark-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css @@ -0,0 +1,75 @@ +/* ─── Vision Dark — Purple & Gold, colorblind-safe (Deuteranopia / Protanopia / Tritanopia) ─── */ +/* Gold #FFD700 on #0D0B12 → contrast ~14.7:1 (WCAG AAA) */ +[data-theme='vision-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%23D8D4E4%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"); + + /* ── Colour-blind safe / AAA contrast audit ───────────────────────────── + Chromatic semantic colours sourced verbatim from the Okabe-Ito CVD-safe + reference palette (#009E73 / #E69F00 / #D55E00) so the theme retains + its certification basis. Neutral tokens tuned so every interactive / + readable surface clears WCAG thresholds against `--bg-app` (L≈0.004): + • text-primary 17.3:1 (AAA ✓) + • text-secondary 13.5:1 (AAA ✓, raised) + • text-muted 7.9:1 (AAA ✓, raised from 4.9:1) + • accent (gold) 14.0:1 (AAA ✓) + • warning 8.7:1 (AAA ✓) + • positive 5.8:1 (AA — Okabe-Ito reference, kept verbatim) + • danger 5.0:1 (AA — Okabe-Ito reference, kept verbatim) + • overlay0 3.4:1 (UI ✓, raised from 2.5:1) + • border 3.0:1 (UI ✓, raised from 1.1:1) + • waveform-unplayed perceptible at 2.0:1 (raised from 1.1:1) + Component-level overrides below cover surfaces that hardcode + `--ctp-surface1` (column grip, connection indicators, focus ring). + */ + + --ctp-crust: #030210; + --ctp-mantle: #06050e; + --ctp-base: #0d0b12; + --ctp-surface0: #16131e; + --ctp-surface1: #2c2838; /* raised from #201c2c so borders/grips are perceptible */ + --ctp-surface2: #3e3850; + --ctp-overlay0: #6a6382; /* raised from #544e6a → 3.4:1 UI ✓ */ + --ctp-overlay1: #8a84a0; + --ctp-overlay2: #a8a2bc; + --ctp-text: #f2eef8; + --ctp-subtext1: #d8d4e4; /* raised from #c8c4d4 → slightly brighter */ + --ctp-subtext0: #a6a2b8; + --ctp-mauve: #a07af8; + --ctp-lavender: #b89af8; + --ctp-blue: #60a5fa; + --ctp-sapphire: #38bdf8; + --ctp-sky: #38bdf8; + --ctp-teal: #2dd4bf; + --ctp-green: #009e73; /* Okabe-Ito Bluish Green (CVD reference) */ + --ctp-yellow: #ffd700; /* Gold */ + --ctp-peach: #e69f00; /* Okabe-Ito Orange (CVD reference) */ + --ctp-maroon: #d55e00; /* Okabe-Ito Vermillion — danger (CVD reference) */ + --ctp-red: #d55e00; + --ctp-flamingo: #f472b6; + --ctp-pink: #e879f9; + --ctp-rosewater: #f0abfc; + + --bg-app: #0d0b12; + --bg-sidebar: #08060e; + --bg-card: #16131e; + --bg-hover: #2c2838; /* raised → 2.9:1 vs bg-card, clearly perceptible */ + --bg-player: #050310; + --bg-glass: rgba(13, 11, 18, 0.88); + --accent: #ffd700; + --accent-dim: rgba(255, 215, 0, 0.18); + --accent-glow: rgba(255, 215, 0, 0.40); + --text-primary: #f2eef8; + --text-secondary: #d8d4e4; /* 13.5:1 vs bg-app — AAA ✓ */ + --text-muted: #a6a2b8; /* 7.9:1 vs bg-app — AAA ✓, was 4.9:1 */ + --border: #6a6182; /* 3.0:1 vs bg-card — UI ✓, was 1.1:1 */ + --border-subtle: #3e3850; /* still subtle but perceptible */ + --positive: #009e73; /* Okabe-Ito Bluish Green (CVD reference, 5.8:1 AA) */ + --warning: #e69f00; /* Okabe-Ito Orange (8.7:1 AAA ✓) */ + --danger: #d55e00; /* Okabe-Ito Vermillion (5.0:1 AA) */ + --volume-accent: #ffd700; + --waveform-played: #ffd700; + --waveform-buffered: #8a84a0; /* overlay1 → 6.1:1 vs bg-app */ + --waveform-unplayed: #3e3850; /* still dim but perceptible */ +} + diff --git a/src/styles/themes/vision-navy-component-level-overrides.css b/src/styles/themes/vision-navy-component-level-overrides.css new file mode 100644 index 00000000..bb22a54e --- /dev/null +++ b/src/styles/themes/vision-navy-component-level-overrides.css @@ -0,0 +1,43 @@ +/* ─── Vision Navy — component-level overrides ──────────────────────────── */ + +/* Column resize grip (tracklist) — was #1a2e48 on #112038 = 1.2:1 */ +[data-theme='vision-navy'] .col-resize-handle::after { + background: var(--ctp-overlay1); /* #7e96b4 → 5.2:1 on bg-card */ + width: 2px; +} + +/* Badges — opaque background per theme feedback */ +[data-theme='vision-navy'] .badge, +[data-theme='vision-navy'] .album-detail-badge { + background: var(--ctp-surface2); + color: var(--accent); + border: 1px solid var(--ctp-overlay0); +} + +/* Queue items on the very dark sidebar (#060e1c) — force light text */ +[data-theme='vision-navy'] .queue-item-title, +[data-theme='vision-navy'] .queue-current-info h3 { + color: var(--text-primary); +} +[data-theme='vision-navy'] .queue-item-artist, +[data-theme='vision-navy'] .queue-item-duration, +[data-theme='vision-navy'] .queue-current-sub, +[data-theme='vision-navy'] .queue-tab-btn { + color: var(--text-secondary); +} + +/* Focus ring — keyboard navigation indicator with AAA contrast */ +[data-theme='vision-navy'] *:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* Scrollbar thumb — explicit contrast (auto-hide still applies) */ +[data-theme='vision-navy'] ::-webkit-scrollbar-thumb { + background: var(--ctp-overlay0); +} +[data-theme='vision-navy'] *:hover::-webkit-scrollbar-thumb, +[data-theme='vision-navy'] .is-scrolling::-webkit-scrollbar-thumb { + background: var(--ctp-overlay2); +} + diff --git a/src/styles/themes/vision-navy-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css b/src/styles/themes/vision-navy-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css new file mode 100644 index 00000000..cf6ac28a --- /dev/null +++ b/src/styles/themes/vision-navy-purple-gold-colorblind-safe-deuteranopia-protanopia-tritanopia.css @@ -0,0 +1,73 @@ +/* ─── Vision Navy — Purple & Gold, colorblind-safe (Deuteranopia / Protanopia / Tritanopia) ─── */ +[data-theme='vision-navy'] { + 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%23C8D4E4%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"); + + /* ── Colour-blind safe / AAA contrast audit (companion to Vision Dark) ─── + Chromatic semantic colours sourced verbatim from the Okabe-Ito CVD-safe + reference palette. Neutral tokens tuned so every interactive / readable + surface clears WCAG thresholds against `--bg-app` (#0a1628, L≈0.009): + • text-primary 16.4:1 (AAA ✓) + • text-secondary 12.1:1 (AAA ✓, raised from 10.8:1) + • text-muted 7.7:1 (AAA ✓, raised from 3.5:1 — was below AA!) + • accent (gold) 14.5:1 (AAA ✓) + • warning 8.6:1 (AAA ✓) + • positive 5.7:1 (AA — Okabe-Ito reference, kept verbatim) + • danger 4.9:1 (AA — Okabe-Ito reference, kept verbatim) + • overlay0 3.4:1 (UI ✓, raised from 2.9:1) + • border 3.7:1 (UI ✓, raised from 1.2:1) + • waveform-unplayed perceptible at ~2.0:1 (raised from 1.2:1) + Component-level overrides below cover the column grip, badges, focus + ring and queue item text on the very dark sidebar (#060e1c). + */ + + --ctp-crust: #030a14; + --ctp-mantle: #060e1c; + --ctp-base: #0a1628; + --ctp-surface0: #112038; + --ctp-surface1: #243c58; /* raised from #1a2e48 so borders/grips are perceptible */ + --ctp-surface2: #304c6c; + --ctp-overlay0: #5a7694; /* raised from #486480 → 3.4:1 UI ✓ */ + --ctp-overlay1: #7e96b4; + --ctp-overlay2: #9aafcc; + --ctp-text: #eef2f8; + --ctp-subtext1: #c8d4e4; /* raised slightly from #c0c8d8 */ + --ctp-subtext0: #9caac2; + --ctp-mauve: #a07af8; + --ctp-lavender: #b89af8; + --ctp-blue: #3b82f6; + --ctp-sapphire: #38bdf8; + --ctp-sky: #7dd3fc; + --ctp-teal: #2dd4bf; + --ctp-green: #009e73; /* Okabe-Ito Bluish Green (CVD reference) */ + --ctp-yellow: #ffd700; /* Gold */ + --ctp-peach: #e69f00; /* Okabe-Ito Orange (CVD reference) */ + --ctp-maroon: #d55e00; /* Okabe-Ito Vermillion (CVD reference) */ + --ctp-red: #d55e00; + --ctp-flamingo: #f472b6; + --ctp-pink: #e879f9; + --ctp-rosewater: #f0abfc; + + --bg-app: #0a1628; + --bg-sidebar: #060e1c; + --bg-card: #112038; + --bg-hover: #243c58; /* raised → 2.9:1 vs bg-card, clearly perceptible */ + --bg-player: #040c18; + --bg-glass: rgba(10, 22, 40, 0.88); + --accent: #ffd700; + --accent-dim: rgba(255, 215, 0, 0.18); + --accent-glow: rgba(255, 215, 0, 0.40); + --text-primary: #eef2f8; + --text-secondary: #c8d4e4; /* 12.1:1 vs bg-app — AAA ✓ */ + --text-muted: #9caac2; /* 7.7:1 vs bg-app — AAA ✓, was 3.5:1 (below AA!) */ + --border: #607d9a; /* 3.7:1 vs bg-card — UI ✓, was 1.2:1 */ + --border-subtle: #304c6c; /* still subtle but perceptible */ + --positive: #009e73; /* Okabe-Ito Bluish Green (CVD reference, 5.7:1 AA) */ + --warning: #e69f00; /* Okabe-Ito Orange (8.6:1 AAA ✓) */ + --danger: #d55e00; /* Okabe-Ito Vermillion (4.9:1 AA) */ + --volume-accent: #ffd700; + --waveform-played: #ffd700; + --waveform-buffered: #7e96b4; /* overlay1 → 5.7:1 vs bg-app */ + --waveform-unplayed: #304c6c; /* still dim but perceptible */ +} + diff --git a/src/styles/themes/volcanic-dark.css b/src/styles/themes/volcanic-dark.css new file mode 100644 index 00000000..8ebf19c9 --- /dev/null +++ b/src/styles/themes/volcanic-dark.css @@ -0,0 +1,66 @@ +/* ─── Volcanic Dark ─── */ +[data-theme='volcanic-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='%23c97a56' 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: #100c0a; + --ctp-mantle: #15100d; + --ctp-base: #1b1512; + --ctp-surface0: #231b17; + --ctp-surface1: #2d231d; + --ctp-surface2: #392d26; + + /* Overlays */ + --ctp-overlay0: #6a4b3e; + --ctp-overlay1: #886050; + --ctp-overlay2: #a27462; + + /* Text */ + --ctp-text: #f2e5de; + --ctp-subtext1: #d0b2a5; + --ctp-subtext0: #aa8475; + + /* Burnt orange accent */ + --ctp-teal: #c97a56; + --ctp-sky: #c97a56; + --ctp-sapphire: #b06242; + --ctp-blue: #8f4d33; + --ctp-lavender: #d49272; + --ctp-mauve: #b06242; + --ctp-pink: #8f4d33; + --ctp-flamingo: #d49272; + --ctp-rosewater: #b06242; + + --ctp-red: #e06a6a; + --ctp-maroon: #d58a58; + --ctp-peach: #d58a58; + --ctp-yellow: #d0b15a; + --ctp-green: #67c587; + + --bg-app: #1b1512; + --bg-sidebar: #15100d; + --bg-card: #231b17; + --bg-hover: #2d231d; + --bg-player: #15100d; + --bg-glass: rgba(27,21,18,0.82); + + --accent: #c97a56; + --accent-dim: rgba(201,122,86,0.05); + --accent-glow: rgba(201,122,86,0.09); + + --text-primary: #f2e5de; + --text-secondary: #aa8475; + --text-muted: #6a4b3e; + + --border: #392d26; + --border-subtle: #2d231d; + --border-dropdown: #47372f; + --shadow-dropdown: rgba(0,0,0,0.72); + + --positive: #67c587; + --warning: #d0b15a; + --danger: #e06a6a; +} + diff --git a/src/styles/themes/w98.css b/src/styles/themes/w98.css new file mode 100644 index 00000000..d2726fb3 --- /dev/null +++ b/src/styles/themes/w98.css @@ -0,0 +1,476 @@ +/* ─── W98 ─── */ +[data-theme='w98'] { + color-scheme: light; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Authentische W98 Palette ── + Contrast audit: + text-primary on bg-card 13.84:1 AAA ✓ + text-primary on bg-app 4.42:1 AA ✓ (album-detail page lives here) + positive on bg-card 5.24:1 AA ✓ (deepened from #008000 at 2.62:1 ❌) + warning on bg-card 5.61:1 AA ✓ (deep amber, was #808000 at 2.61:1 ❌) + danger on bg-card 4.61:1 AA ✓ (deepened from #ff0000 at 2.62:1 ❌) + accent (navy) on bg-card 9.97:1 AAA ✓ + Border-subtle was #d4d0c8 (1.0:1, invisible) → #a0a0a0. + The brand --ctp-* palette is preserved verbatim as the canonical W98 + system colour set; only the semantic tokens are lifted. + text-secondary/muted are intentionally kept at #000000: pages such as + AlbumDetail render text on bg-app teal (#008080) where any lift below + pure black drops below AA. W98 historically used bold/italic, not + colour value, for text hierarchy. + */ + --ctp-crust: #808080; + --ctp-mantle: #a0a0a0; + --ctp-base: #d4d0c8; + /* Echtes W98 Button Face */ + --ctp-surface0: #ffffff; + --ctp-surface1: #ececec; + --ctp-surface2: #d4d0c8; + --ctp-overlay0: #808080; + --ctp-overlay1: #404040; + --ctp-overlay2: #000000; + --ctp-text: #000000; + --ctp-subtext1: #000000; + --ctp-subtext0: #404040; + + --ctp-mauve: #000080; + --ctp-lavender: #0000cc; + --ctp-green: #008000; + --ctp-teal: #008080; + --ctp-sky: #0000ff; + --ctp-blue: #0000ff; + --ctp-sapphire: #000080; + --ctp-pink: #ff00ff; + --ctp-flamingo: #ff00ff; + --ctp-rosewater: #d4d0c8; + --ctp-yellow: #808000; + --ctp-peach: #ff8000; + --ctp-maroon: #800000; + --ctp-red: #ff0000; + + --bg-app: #008080; + /* Teal Desktop */ + --bg-sidebar: #d4d0c8; + --bg-card: #d4d0c8; + --bg-hover: #000080; + --bg-player: #d4d0c8; + --bg-glass: rgba(212, 208, 200, 0.95); + + --accent: #000080; + --accent-dim: rgba(0, 0, 128, 0.12); + --accent-glow: transparent; + --volume-accent: #000080; + + --text-primary: #000000; + --text-secondary: #000000; /* W98 uses bold/italic for hierarchy, not lighter colour — + lifting fails on bg-app teal (#008080) where any non-black + tone drops below AA (e.g. #404040 = 2.09:1). */ + --text-muted: #000000; + + --border: #808080; + --border-subtle: #a0a0a0; /* 1.73:1 perceptible, was #d4d0c8 (1.0:1 invisible) */ + --border-dropdown: #000000; + --shadow-dropdown: rgba(0, 0, 0, 0.4); + + --positive: #005000; /* 5.24:1 AA ✓, deepened from #008000 (2.62:1 ❌) */ + --warning: #5a4500; /* 5.61:1 AA ✓, deep amber, was #808000 (2.61:1 ❌) */ + --danger: #b00000; /* 4.61:1 AA ✓, deepened from #ff0000 (2.62:1 ❌) */ + + --radius-sm: 0px; + --radius-md: 0px; + --radius-lg: 0px; + --radius-xl: 0px; + --radius-full: 0px; +} + +/* Teal Desktop (nur der äußere Shell-Rahmen) */ +[data-theme='w98'] .app-shell { + background-color: #008080; +} + +/* Column resize grip — default --ctp-surface1 (#ececec) on bg-card (#d4d0c8) + is 1.23:1 (invisible). Use the W98 dialog border grey for a chunky 2 px + grip that matches the rest of the W98 furniture. */ +[data-theme='w98'] .col-resize-handle::after { + background: #808080; + width: 2px; +} + + +/* ── 3D Bevel: Raised ── */ +[data-theme='w98'] .sidebar, +[data-theme='w98'] .player-bar, +[data-theme='w98'] .card { + background: #d4d0c8; + border: 1px solid #000000; + box-shadow: + inset 1px 1px #ffffff, + inset -1px -1px #808080, + inset 2px 2px #dfdfdf, + inset -2px -2px #404040; +} + +[data-theme='w98'] .sidebar { + border-right: 2px solid #000000; +} + +/* Player Bar Titelbalken: ikonischer W98 Gradient für den Song-Titel */ +[data-theme='w98'] .player-track-name { + background: linear-gradient(to right, #09246d, #a6c4e8); + color: #ffffff !important; + padding: 1px 6px; + font-weight: bold; +} + +[data-theme='w98'] .player-track-artist, +[data-theme='w98'] .player-time { + color: #000000 !important; +} + +/* Nav */ +[data-theme='w98'] .nav-link.active { + background: #000080 !important; + color: #ffffff !important; +} + +[data-theme='w98'] .nav-link.active svg { + color: #ffffff !important; +} + +[data-theme='w98'] .nav-link:hover:not(.active) { + background: #000080 !important; + color: #ffffff !important; +} + +[data-theme='w98'] .nav-link:hover:not(.active) svg { + color: #ffffff !important; +} + +/* Alle Buttons: 3D Raised Bevel */ +[data-theme='w98'] .btn, +[data-theme='w98'] .btn-primary, +[data-theme='w98'] .btn-surface, +[data-theme='w98'] .btn-ghost, +[data-theme='w98'] .hero-play-btn, +[data-theme='w98'] .queue-round-btn, +[data-theme='w98'] .player-btn, +[data-theme='w98'] .album-card-details-btn { + background: #d4d0c8 !important; + color: #000000 !important; + border: 1px solid #000000 !important; + border-radius: 0 !important; + box-shadow: + inset 1px 1px #ffffff, + inset -1px -1px #808080, + inset 2px 2px #dfdfdf, + inset -2px -2px #404040 !important; + text-shadow: none !important; + filter: none !important; + transform: none !important; +} + +/* Gedrückt: Bevel umkehren */ +[data-theme='w98'] .btn:active, +[data-theme='w98'] .btn-primary:active, +[data-theme='w98'] .btn-surface:active, +[data-theme='w98'] .btn-ghost:active, +[data-theme='w98'] .hero-play-btn:active, +[data-theme='w98'] .queue-round-btn:active, +[data-theme='w98'] .player-btn:active, +[data-theme='w98'] .album-card-details-btn:active { + box-shadow: + inset 1px 1px #808080, + inset -1px -1px #ffffff, + inset 2px 2px #404040, + inset -2px -2px #dfdfdf !important; +} + +/* Hover: heller */ +[data-theme='w98'] .btn:hover, +[data-theme='w98'] .btn-primary:hover, +[data-theme='w98'] .btn-surface:hover, +[data-theme='w98'] .btn-ghost:hover, +[data-theme='w98'] .hero-play-btn:hover, +[data-theme='w98'] .album-card-details-btn:hover { + background: #e4e0d8 !important; + color: #000000 !important; +} + +/* Aktive Queue-Buttons: navy, sunken */ +[data-theme='w98'] .queue-round-btn.active { + background: #000080 !important; + color: #ffffff !important; + box-shadow: + inset 1px 1px #808080, + inset -1px -1px #ffffff, + inset 2px 2px #404040, + inset -2px -2px #dfdfdf !important; +} + +[data-theme='w98'] .queue-round-btn:hover:not(:disabled):not(.active) { + background: #e4e0d8 !important; + color: #000000 !important; +} + +/* Progress Bar: eingesunkene Rille, navy Fill */ +[data-theme='w98'] .progress-bar-track { + background: #ffffff; + box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff; + border-radius: 0; +} + +[data-theme='w98'] .progress-bar-fill { + background: #000080; + border-radius: 0; + box-shadow: none; +} + +/* Scrollbar */ +[data-theme='w98'] ::-webkit-scrollbar { + width: 16px; + height: 16px; +} + +[data-theme='w98'] ::-webkit-scrollbar-track { + background: #d4d0c8; +} + +[data-theme='w98'] ::-webkit-scrollbar-thumb { + background: #d4d0c8; + border: 1px solid #000000; + box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; +} + +[data-theme='w98'] ::-webkit-scrollbar-button { + background: #d4d0c8; + border: 1px solid #000000; + box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; +} + +/* Queue Tab */ +[data-theme='w98'] .queue-tab-btn:hover { + background: #e4e0d8; + color: #000000; +} + +/* Hero */ +[data-theme='w98'] .hero-eyebrow { + color: rgba(255, 255, 255, 0.9); +} + +[data-theme='w98'] .hero-meta .badge { + background: rgba(255, 255, 255, 0.15); +} + +/* Settings */ +[data-theme='w98'] .settings-tab:hover { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .theme-accordion-header:hover { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .theme-accordion-open .theme-accordion-header { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .theme-accordion-open .theme-accordion-chevron { + color: #ffffff; +} + +/* Dropdowns */ +[data-theme='w98'] .custom-select-trigger:hover { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .custom-select-option:hover { + background: #000080 !important; + color: #ffffff !important; +} + +/* Various hovers → navy + white */ +[data-theme='w98'] .artist-ext-link:hover { + background: #000080; + color: #ffffff !important; +} + +[data-theme='w98'] .changelog-summary:hover { + color: #000080; +} + +[data-theme='w98'] .changelog-code { + background: #ffffff; + color: #000080; + border: 1px solid #808080; +} + +[data-theme='w98'] .keybind-badge { + background: #d4d0c8 !important; + color: #000000 !important; + border: 1px solid #808080 !important; +} + +[data-theme='w98'] .eq-ctrl-btn { + background: #d4d0c8; + color: #000000; + border: 1px solid #808080; + box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; +} + +[data-theme='w98'] .eq-ctrl-btn:hover { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .genre-keyword-badge { + background: #d4d0c8 !important; + color: #000000 !important; + border: 1px solid #808080 !important; +} + +[data-theme='w98'] .toggle-track::before { + background: #d4d0c8; + border: 1px solid #808080; +} + +[data-theme='w98'] .np-title { + color: #000080 !important; +} + +[data-theme='w98'] .np-action-btn:hover { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .np-queue-item:hover, +[data-theme='w98'] .np-queue-item.context-active { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .track-row:hover, +[data-theme='w98'] .track-row.context-active { + background: #000080 !important; +} + +[data-theme='w98'] .track-row:hover *, +[data-theme='w98'] .track-row.context-active * { + color: #ffffff !important; +} + +[data-theme='w98'] .artist-row:hover { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .year-toggle:hover { + color: #000080; +} + +[data-theme='w98'] .playlist-row:hover { + background: #000080; +} + +[data-theme='w98'] .playlist-row:hover, +[data-theme='w98'] .playlist-row:hover * { + color: #ffffff; +} + +[data-theme='w98'] .help-question:hover { + color: #000080; +} + +[data-theme='w98'] .help-item-open .help-question { + color: #000080; + font-weight: bold; +} + +[data-theme='w98'] .help-item-open .help-chevron { + color: #000080; +} + +[data-theme='w98'] .queue-item:hover, +[data-theme='w98'] .queue-item.context-active { + background: #000080 !important; +} + +[data-theme='w98'] .queue-item:hover .queue-item-title, +[data-theme='w98'] .queue-item:hover .queue-item-artist, +[data-theme='w98'] .queue-item:hover .queue-item-duration, +[data-theme='w98'] .queue-item.context-active .queue-item-title, +[data-theme='w98'] .queue-item.context-active .queue-item-artist, +[data-theme='w98'] .queue-item.context-active .queue-item-duration { + color: #ffffff; +} + +[data-theme='w98'] .player-btn:hover { + background: #000080; + color: #ffffff; +} + +[data-theme='w98'] .player-btn-primary { + background: #d4d0c8 !important; + color: #000000 !important; +} + +[data-theme='w98'] .player-btn-primary:hover { + background: #000080 !important; + color: #ffffff !important; +} + +[data-theme='w98'] .search-result-item:hover, +[data-theme='w98'] .search-result-item.active { + background: #000080; +} + +[data-theme='w98'] .search-result-item:hover .search-result-name, +[data-theme='w98'] .search-result-item:hover .search-result-sub, +[data-theme='w98'] .search-result-item.active .search-result-name, +[data-theme='w98'] .search-result-item.active .search-result-sub { + color: #ffffff; +} + +[data-theme='w98'] .collapse-btn { + border-color: #808080 !important; +} + +[data-theme='w98'] .collapse-btn:hover { + background: #000080 !important; + color: #ffffff !important; +} + +[data-theme='w98'] .album-row-nav .nav-btn:hover:not(.disabled) { + background: #000080; + color: #ffffff; +} + +/* Live-Dropdown: kein backdrop-blur (saugt teal durch), solider W98-Hintergrund */ +[data-theme='w98'] .glass { + background: #d4d0c8 !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + border: 1px solid #000000; + box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080, 2px 2px 4px rgba(0, 0, 0, 0.3); + color: #000000; +} + +/* Stream-Einträge: --bg-hover ist navy → Override auf W98-Grau mit Bevel */ +[data-theme='w98'] .glass [style*="var(--bg-hover)"] { + background: #ece8e0 !important; + border: 1px solid #808080; + box-shadow: inset 1px 1px #ffffff, inset -1px -1px #808080; + border-radius: 0 !important; +} + +/* Inline-color-Overrides für Text in Stream-Einträgen */ +[data-theme='w98'] .glass [style*="var(--text-primary)"], +[data-theme='w98'] .glass [style*="var(--text-secondary)"], +[data-theme='w98'] .glass [style*="var(--text-muted)"] { + color: #000000 !important; +} + diff --git a/src/styles/themes/windows-10-fluent-design-light.css b/src/styles/themes/windows-10-fluent-design-light.css new file mode 100644 index 00000000..136c00d2 --- /dev/null +++ b/src/styles/themes/windows-10-fluent-design-light.css @@ -0,0 +1,303 @@ +/* ─── Windows 10 — Fluent Design Light ─── */ +/* Clean flat white + the iconic near-black taskbar + Windows blue #0078D4 */ +[data-theme='w10'] { + color-scheme: light; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23767676%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette — Windows 10 neutral + Fluent blue ── */ + --ctp-crust: #1c1c1c; + /* taskbar near-black */ + --ctp-mantle: #2b2b2b; + --ctp-base: #ffffff; + /* window white */ + --ctp-surface0: #f3f3f3; + /* nav pane / secondary bg */ + --ctp-surface1: #ebebeb; + --ctp-surface2: #d6d6d6; + /* borders, dividers */ + --ctp-overlay0: #767676; + /* muted / disabled */ + --ctp-overlay1: #4a4a4a; + --ctp-overlay2: #2b2b2b; + --ctp-text: #000000; + /* primary text — true black */ + --ctp-subtext1: #1b1b1b; + --ctp-subtext0: #5d5d5d; + /* Windows Fluent blue spectrum */ + --ctp-mauve: #0078d4; + /* Windows blue — THE accent */ + --ctp-lavender: #2e95d3; + --ctp-sky: #cce4f7; + /* selection highlight */ + --ctp-teal: #008272; + --ctp-blue: #0063b1; + --ctp-sapphire: #003e92; + --ctp-green: #107c10; + --ctp-yellow: #ffb900; + --ctp-peach: #d83b01; + --ctp-pink: #e3008c; + --ctp-flamingo: #c239b3; + --ctp-rosewater: #ef6950; + --ctp-maroon: #a80000; + --ctp-red: #d13438; + + /* ── Semantic tokens ── */ + --bg-app: #ffffff; + --bg-sidebar: #f3f3f3; + --bg-card: #ffffff; + --bg-hover: #e8e8e8; + --bg-player: #1c1c1c; + /* taskbar */ + --bg-glass: rgba(255, 255, 255, 0.90); + --accent: #0078d4; + --accent-dim: rgba(0, 120, 212, 0.10); + --accent-glow: rgba(0, 120, 212, 0.28); + --text-primary: #000000; + --text-secondary: #1b1b1b; + --text-muted: #767676; + --border: #d6d6d6; + --border-subtle: #ebebeb; + --positive: #107c10; + --warning: #ffb900; + --danger: #d13438; + --radius-sm: 2px; + --radius-md: 4px; + --radius-lg: 6px; + /* Waveform: Windows blue progress */ + --waveform-played: #0078d4; + --waveform-buffered: #80bbea; + --waveform-unplayed: #d6d6d6; +} + +/* ── App shell: W10 desktop — clean off-white ── */ +[data-theme='w10'] .app-shell { + background: #f3f3f3; +} + +/* ── Sidebar: W10 Navigation Pane — flat light gray ── */ +[data-theme='w10'] .sidebar { + background: #f3f3f3; + border-right: 1px solid #d6d6d6; + box-shadow: none; +} + +/* Nav links: dark on light pane */ +[data-theme='w10'] .nav-link { + color: #1b1b1b; +} + +[data-theme='w10'] .nav-link:hover { + background: rgba(0, 0, 0, 0.06); + color: #000000; +} + +[data-theme='w10'] .nav-link.active { + background: rgba(0, 120, 212, 0.10); + color: #0078d4; +} + +[data-theme='w10'] .nav-link.active::before { + background: #0078d4; + box-shadow: none; +} + +/* ── Player bar: W10 Taskbar — near-black flat + accent stripe ── */ +[data-theme='w10'] .player-bar { + background: #1c1c1c; + border-top: 2px solid #0078d4; + box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.50); +} + +/* Player text: white on dark taskbar */ +[data-theme='w10'] .player-track-name { + color: #ffffff; + font-weight: 500; +} + +[data-theme='w10'] .player-track-artist { + color: rgba(255, 255, 255, 0.65); + opacity: 1; +} + +[data-theme='w10'] .player-time { + color: rgba(255, 255, 255, 0.60); +} + +/* Transport: flat ghosted icons on dark bar */ +[data-theme='w10'] .player-btn { + color: rgba(255, 255, 255, 0.82); + background: transparent; + border: none; + box-shadow: none; +} + +[data-theme='w10'] .player-btn:hover { + color: #ffffff; + background: rgba(255, 255, 255, 0.12); + box-shadow: none; +} + +[data-theme='w10'] .player-btn-primary { + background: #0078d4; + color: #ffffff; + border: none; + box-shadow: none; +} + +[data-theme='w10'] .player-btn-primary:hover { + background: #1684d8; + box-shadow: none; +} + +/* ── Content-area buttons: W10 flat button style ── */ +[data-theme='w10'] .btn { + background: #ffffff; + color: #1b1b1b; + border: 1px solid #d6d6d6; + border-radius: 4px; + box-shadow: none; +} + +[data-theme='w10'] .btn:hover { + background: #f3f3f3; + border-color: #767676; + box-shadow: none; +} + +[data-theme='w10'] .btn-primary { + background: #0078d4; + color: #ffffff; + border: 1px solid transparent; + box-shadow: none; +} + +[data-theme='w10'] .btn-primary:hover { + background: #006cbd; + box-shadow: none; +} + +[data-theme='w10'] .btn-ghost { + background: transparent; + border-color: transparent; + color: #1b1b1b; +} + +[data-theme='w10'] .btn-ghost:hover { + background: rgba(0, 0, 0, 0.06); + border-color: transparent; +} + +[data-theme='w10'] .btn-surface { + background: #ffffff; + color: #1b1b1b; + border: 1px solid #d6d6d6; +} + +[data-theme='w10'] .btn-surface:hover { + background: #f3f3f3; + border-color: #767676; +} + +/* Cards: white, flat border, very subtle lift */ +[data-theme='w10'] .glass, +[data-theme='w10'] .card { + background: #ffffff; + border: 1px solid #d6d6d6; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); +} + +/* Content header */ +[data-theme='w10'] .content-header { + background: rgba(255, 255, 255, 0.92); + border-bottom: 1px solid #d6d6d6; +} + +/* Album badge: Windows blue */ +[data-theme='w10'] .badge, +[data-theme='w10'] .album-detail-badge { + background: #0078d4; + color: #ffffff; +} + +/* ── Hover / active states ── */ +[data-theme='w10'] .track-row:hover, +[data-theme='w10'] .track-row.context-active { + background: rgba(0, 120, 212, 0.06); + box-shadow: inset 3px 0 0 #0078d4; +} + +[data-theme='w10'] .queue-item:hover, +[data-theme='w10'] .queue-item.context-active { + background: rgba(0, 120, 212, 0.07); +} + +[data-theme='w10'] .queue-item.active { + background: rgba(0, 120, 212, 0.10); + border-left: 2px solid #0078d4; +} + +[data-theme='w10'] .np-queue-item.active { + background: rgba(0, 120, 212, 0.08); +} + +[data-theme='w10'] .np-queue-item-active { + color: #0078d4; +} + +[data-theme='w10'] .np-queue-item:hover, +[data-theme='w10'] .np-queue-item.context-active { + background: rgba(0, 120, 212, 0.05); +} + +[data-theme='w10'] .np-album-track.active .np-album-track-title, +[data-theme='w10'] .np-album-track.active .np-album-track-num { + color: #0078d4; +} + +[data-theme='w10'] .artist-row:hover { + background: rgba(0, 120, 212, 0.06); + box-shadow: inset 3px 0 0 #0078d4; +} + +[data-theme='w10'] .playlist-row:hover { + background: rgba(0, 120, 212, 0.06); + box-shadow: inset 3px 0 0 #0078d4; +} + +[data-theme='w10'] .settings-tab:hover { + background: rgba(0, 0, 0, 0.05); + color: #0078d4; +} + +[data-theme='w10'] .settings-tab.active { + background: rgba(0, 120, 212, 0.10); + color: #0078d4; + border-color: #0078d4; +} + +[data-theme='w10'] .queue-tab-btn:hover { + background: rgba(0, 0, 0, 0.05); + color: #0078d4; +} + +[data-theme='w10'] .custom-select-trigger:hover { + background: rgba(0, 0, 0, 0.05); +} + +[data-theme='w10'] .custom-select-option:hover { + background: rgba(0, 120, 212, 0.08); +} + +[data-theme='w10'] .artist-ext-link:hover { + background: rgba(0, 120, 212, 0.08); + border-color: #0078d4; +} + +/* Connection info: readable on light sidebar */ +[data-theme='w10'] .connection-type, +[data-theme='w10'] .connection-server { + color: #5d5d5d; +} + +/* ─────────────────────────────────────────── */ + diff --git a/src/styles/themes/windows-11-dark-component-overrides.css b/src/styles/themes/windows-11-dark-component-overrides.css new file mode 100644 index 00000000..32a1f705 --- /dev/null +++ b/src/styles/themes/windows-11-dark-component-overrides.css @@ -0,0 +1,525 @@ +/* ─── Windows 11 Dark — component overrides ───────────────────────────── + Raise column grip + structural borders to perceptible contrasts that + match Fluent v2 Stroke tokens, and hand-tune a handful of elements + that hardcode the old accent. */ + +/* Column resize grip — was #363636 on #2c2c2c = 1.16:1 (invisible) */ +[data-theme='w11'] .col-resize-handle::after { + background: var(--ctp-overlay1); /* #a0a0a0 → 6.3:1 on bg-card */ + width: 2px; +} + +/* Focus ring — Fluent keyboard focus indicator */ +[data-theme='w11'] *:focus-visible { + outline: 2px solid var(--accent-text); /* #60cdff — high contrast */ + outline-offset: 2px; +} + +/* Scrollbar thumb — Fluent neutral, perceptible against dark surfaces */ +[data-theme='w11'] ::-webkit-scrollbar-thumb { + background: var(--ctp-overlay0); +} +[data-theme='w11'] *:hover::-webkit-scrollbar-thumb, +[data-theme='w11'] .is-scrolling::-webkit-scrollbar-thumb { + background: var(--ctp-overlay2); +} + +/* Connection indicators inherit secondary colour (readability improved via + raised --text-secondary). No background box (they're inline spans). */ +[data-theme='w11'] .connection-type { + color: var(--text-primary); +} +[data-theme='w11'] .connection-server { + color: var(--text-secondary); +} + +/* Track name — pure white (Fluent is minimal, uses true white not off-white) */ +[data-theme='w11'] .player-track-name, +[data-theme='w11'] .queue-track-title { + color: #ffffff; +} + +/* Sidebar — Mica-like: very slightly lighter than app bg, Fluent Divider Dark */ +[data-theme='w11'] .sidebar { + background-color: #2b2b2b; + border-right: 1px solid rgba(255, 255, 255, 0.12); +} + +/* Nav active — Fluent accent fill, rounded */ +[data-theme='w11'] .sidebar-nav-item.active { + background: rgba(0, 120, 212, 0.22); + border-left: 3px solid #0078d4; +} + +/* Player bar — taskbar-inspired: very dark, Fluent Divider Dark */ +[data-theme='w11'] .player-bar { + background-color: #1c1c1c; + border-top: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: none; +} + +/* App-shell — flat, no gradient (Fluent dark is clean/minimal) */ +[data-theme='w11'] .app-shell { + background: none; +} + +/* Cards — Fluent hover: slight elevation via border brightening */ +[data-theme='w11'] .album-card:hover, +[data-theme='w11'] .artist-card:hover { + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); + border-color: rgba(255, 255, 255, 0.28); +} + + +/* ── Barb & Ken (Games) ─────────────────────────────────────── */ +[data-theme='barb-and-ken'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FF1B8D%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* Barbieland palette */ + --ctp-crust: #07000b; + --ctp-mantle: #110009; + --ctp-base: #1a000f; + --ctp-surface0: #2e0019; + --ctp-surface1: #450026; + --ctp-surface2: #5c0032; + --ctp-overlay0: #8c1455; + --ctp-overlay1: #b82070; + --ctp-overlay2: #d93d8a; + --ctp-text: #ffe6f3; + --ctp-subtext1: #ffb8da; + --ctp-subtext0: #ff80be; + + /* Barbie Pink spectrum */ + --ctp-mauve: #FF1B8D; + --ctp-pink: #FF69B4; + --ctp-flamingo: #FF1493; + --ctp-rosewater: #FFD6EC; + --ctp-lavender: #FFB3D9; + --ctp-maroon: #c4005e; + --ctp-red: #FF4466; + + /* Ken — powder blue as accent-2 */ + --ctp-blue: #89CFF0; + --ctp-sapphire: #5BC8F5; + --ctp-sky: #AAE8FF; + --ctp-teal: #70d8f2; + + --ctp-green: #a6e3a1; + --ctp-yellow: #FFE4A8; + --ctp-peach: #FFB8D0; + + --bg-app: #1a000f; + --bg-sidebar: #110009; + --bg-card: #2e0019; + --bg-hover: rgba(255, 27, 141, 0.12); + --bg-player: #07000b; + --bg-glass: rgba(26, 0, 15, 0.88); + + --accent: #FF1B8D; + --accent-dim: rgba(255, 27, 141, 0.15); + --accent-glow: rgba(255, 27, 141, 0.45); + --volume-accent: #89CFF0; + + --text-primary: #ffe6f3; + --text-secondary: #ffb8da; + --text-muted: #7a3055; + --border: rgba(255, 27, 141, 0.28); + --border-subtle: rgba(255, 27, 141, 0.12); + --border-dropdown: rgba(255, 27, 141, 0.3); + --shadow-dropdown: rgba(7, 0, 11, 0.9); + + --positive: #a6e3a1; + --warning: #FFE4A8; + --danger: #FF4466; + + /* Bubbly, soft rounding — very Barbie */ + --radius-sm: 10px; + --radius-md: 14px; + --radius-lg: 20px; +} + +/* Polka-dot sidebar — Barbie's dreamhouse wallpaper */ +[data-theme='barb-and-ken'] .sidebar { + background: + radial-gradient(circle, rgba(255, 27, 141, 0.18) 2px, transparent 2px), + radial-gradient(circle, rgba(137, 207, 240, 0.10) 2px, transparent 2px), + linear-gradient(180deg, #110009 0%, #1a000f 100%); + background-size: 22px 22px, 22px 22px, 100% 100%; + background-position: 0 0, 11px 11px, 0 0; + border-right: 1px solid rgba(255, 27, 141, 0.35); +} + +/* Player bar — deep magenta gradient, hot pink top border */ +[data-theme='barb-and-ken'] .player-bar { + background: linear-gradient(180deg, #1a000f 0%, #07000b 100%); + border-top: 2px solid #FF1B8D; + box-shadow: 0 -6px 24px rgba(255, 27, 141, 0.18); +} + +/* Track name — glitter shimmer */ +@keyframes barbie-shimmer { + 0% { + background-position: -200% center; + } + + 100% { + background-position: 200% center; + } +} + +[data-theme='barb-and-ken'] .player-track-name { + background: linear-gradient(90deg, + #FF1B8D 0%, + #FF69B4 25%, + #ffffff 50%, + #FF69B4 75%, + #FF1B8D 100%); + background-size: 200% auto; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: barbie-shimmer 4s linear infinite; + font-weight: 700; +} + +/* Artist name — Ken blue */ +[data-theme='barb-and-ken'] .player-artist-name { + color: #89CFF0; +} + +/* Active nav — pink left border glow */ +[data-theme='barb-and-ken'] .nav-link.active { + background: linear-gradient(90deg, rgba(255, 27, 141, 0.22) 0%, transparent 100%); + color: #FF69B4 !important; + border-left: 3px solid #FF1B8D; + text-shadow: 0 0 8px rgba(255, 27, 141, 0.4); +} + +[data-theme='barb-and-ken'] .nav-link:hover:not(.active) { + background: rgba(255, 27, 141, 0.08); +} + +/* Content header — subtle pink rule */ +[data-theme='barb-and-ken'] .content-header { + border-bottom: 1px solid rgba(255, 27, 141, 0.2); + background: rgba(26, 0, 15, 0.6); + backdrop-filter: blur(12px); +} + +/* Primary buttons — hot pink gradient */ +[data-theme='barb-and-ken'] .btn-primary, +[data-theme='barb-and-ken'] .player-btn-primary, +[data-theme='barb-and-ken'] .hero-play-btn { + background: linear-gradient(135deg, #FF1B8D 0%, #FF69B4 100%); + box-shadow: 0 4px 16px rgba(255, 27, 141, 0.45); + color: #fff !important; + border: none; +} + +[data-theme='barb-and-ken'] .btn-primary:hover, +[data-theme='barb-and-ken'] .player-btn-primary:hover, +[data-theme='barb-and-ken'] .hero-play-btn:hover { + background: linear-gradient(135deg, #e5007a 0%, #FF1B8D 100%); + box-shadow: 0 6px 22px rgba(255, 27, 141, 0.60); +} + +/* Cards — pink border glow on hover */ +[data-theme='barb-and-ken'] .album-card, +[data-theme='barb-and-ken'] .artist-card, +[data-theme='barb-and-ken'] .card, +[data-theme='barb-and-ken'] .settings-card { + border: 1px solid rgba(255, 27, 141, 0.18); +} + +[data-theme='barb-and-ken'] .album-card:hover, +[data-theme='barb-and-ken'] .artist-card:hover { + border-color: rgba(255, 27, 141, 0.50); + box-shadow: 0 4px 20px rgba(255, 27, 141, 0.20); +} + +/* Queue active item */ +[data-theme='barb-and-ken'] .queue-item.active { + background: rgba(255, 27, 141, 0.08); + border-left: 3px solid #FF1B8D; +} + +[data-theme='barb-and-ken'] .queue-item.active .queue-item-title { + color: #FF69B4; +} + +[data-theme='barb-and-ken'] .queue-item.active .queue-item-artist, +[data-theme='barb-and-ken'] .queue-item.active .queue-item-duration { + color: #89CFF0; +} + +/* Track rows */ +[data-theme='barb-and-ken'] .track-row:hover, +[data-theme='barb-and-ken'] .queue-item:hover { + background: rgba(255, 27, 141, 0.07); +} + +/* Album detail header cover button — Ken blue glow on hover */ +[data-theme='barb-and-ken'] .album-detail-cover-btn:hover { + box-shadow: 0 0 24px rgba(137, 207, 240, 0.35); +} + +/* Star (favorite) icon — gold kept, but override to hot pink */ +[data-theme='barb-and-ken'] .color-star-active { + --color-star-active: #FF69B4; +} + +/* Scrollbar — thin hot pink */ +[data-theme='barb-and-ken'] ::-webkit-scrollbar { + width: 5px; +} + +[data-theme='barb-and-ken'] ::-webkit-scrollbar-track { + background: #07000b; +} + +[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb { + background: #FF1B8D; + border-radius: 3px; +} + +[data-theme='barb-and-ken'] ::-webkit-scrollbar-thumb:hover { + background: #FF69B4; +} + +/* Connection indicators */ +[data-theme='barb-and-ken'] .connection-type, +[data-theme='barb-and-ken'] .connection-server { + color: #7a3055; +} + +/* ── Toy Tale (Movies) ──────────────────────────────────────── */ +[data-theme='toy-tale'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FFD600%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* Warm toy-box palette */ + --ctp-crust: #080603; + --ctp-mantle: #100d08; + --ctp-base: #1a1208; + --ctp-surface0: #2a1c10; + --ctp-surface1: #3a2818; + --ctp-surface2: #4a3422; + --ctp-overlay0: #7a5a35; + --ctp-overlay1: #9a7848; + --ctp-overlay2: #b89060; + --ctp-text: #f0e8d8; + --ctp-subtext1: #d8c8a8; + --ctp-subtext0: #c0a880; + + /* Woody gold */ + --ctp-mauve: #FFD600; + --ctp-yellow: #FFD600; + --ctp-peach: #FFA000; + --ctp-rosewater: #FFE0A0; + + /* Buzz Lightyear purple + green */ + --ctp-lavender: #9B72D6; + --ctp-blue: #7B4FD6; + --ctp-sapphire: #5c35a0; + --ctp-sky: #4FC3F7; + --ctp-teal: #4CAF50; + --ctp-green: #4CAF50; + + --ctp-pink: #FF6B9D; + --ctp-flamingo: #FF4488; + --ctp-maroon: #b71c1c; + --ctp-red: #e53935; + + --bg-app: #1a1208; + --bg-sidebar: #1e3a5f; + /* Andy's sky-blue wallpaper */ + --bg-card: #2a1c10; + --bg-hover: rgba(255, 214, 0, 0.10); + --bg-player: #0d0a06; + --bg-glass: rgba(26, 18, 8, 0.90); + + --accent: #FFD600; + --accent-dim: rgba(255, 214, 0, 0.15); + --accent-glow: rgba(255, 214, 0, 0.40); + --volume-accent: #7B4FD6; + /* Buzz purple */ + + --text-primary: #f0e8d8; + --text-secondary: #c8a878; + --text-muted: #6a5030; + --border: rgba(255, 214, 0, 0.22); + --border-subtle: rgba(255, 214, 0, 0.10); + --border-dropdown: rgba(255, 214, 0, 0.25); + --shadow-dropdown: rgba(8, 6, 3, 0.92); + + --positive: #4CAF50; + --warning: #FFA000; + --danger: #e53935; + + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 14px; +} + +/* Sidebar — Andy's iconic cloud wallpaper in sky blue */ +[data-theme='toy-tale'] .sidebar { + background: + radial-gradient(ellipse 70px 42px at 18% 12%, rgba(255, 255, 255, 0.14) 0%, transparent 100%), + radial-gradient(ellipse 45px 28px at 38% 18%, rgba(255, 255, 255, 0.09) 0%, transparent 100%), + radial-gradient(ellipse 80px 50px at 72% 10%, rgba(255, 255, 255, 0.12) 0%, transparent 100%), + radial-gradient(ellipse 55px 32px at 85% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 100%), + radial-gradient(ellipse 65px 40px at 12% 55%, rgba(255, 255, 255, 0.10) 0%, transparent 100%), + radial-gradient(ellipse 48px 30px at 55% 68%, rgba(255, 255, 255, 0.08) 0%, transparent 100%), + radial-gradient(ellipse 72px 44px at 80% 75%, rgba(255, 255, 255, 0.11) 0%, transparent 100%), + linear-gradient(180deg, #1e3a5f 0%, #274d78 100%); + border-right: 1px solid rgba(255, 214, 0, 0.20); +} + +/* Nav links need lighter text on blue sidebar */ +[data-theme='toy-tale'] .nav-link { + color: rgba(255, 255, 255, 0.75); +} + +[data-theme='toy-tale'] .nav-link:hover:not(.active) { + background: rgba(255, 255, 255, 0.10); + color: #fff; +} + +[data-theme='toy-tale'] .nav-link.active { + background: rgba(255, 214, 0, 0.20); + border-left: 3px solid #FFD600; + color: #FFD600 !important; + text-shadow: 0 0 8px rgba(255, 214, 0, 0.4); +} + +[data-theme='toy-tale'] .sidebar-logo, +[data-theme='toy-tale'] .sidebar-title { + color: #fff; +} + +/* Player bar — dark toy-chest wood */ +[data-theme='toy-tale'] .player-bar { + background: linear-gradient(180deg, #1a1208 0%, #0d0a06 100%); + border-top: 2px solid #FFD600; + box-shadow: 0 -6px 20px rgba(255, 214, 0, 0.10); +} + +/* Track name — Woody sheriff star gold */ +[data-theme='toy-tale'] .player-track-name { + color: #FFD600; + text-shadow: 0 0 10px rgba(255, 214, 0, 0.45); + font-weight: 700; +} + +/* Artist name — warm cowboy tan */ +[data-theme='toy-tale'] .player-artist-name { + color: #c8a060; +} + +/* Content header */ +[data-theme='toy-tale'] .content-header { + border-bottom: 1px solid rgba(255, 214, 0, 0.18); +} + +/* Primary buttons — Woody yellow */ +[data-theme='toy-tale'] .btn-primary, +[data-theme='toy-tale'] .player-btn-primary, +[data-theme='toy-tale'] .hero-play-btn { + background: linear-gradient(135deg, #FFD600 0%, #FFA000 100%); + color: #1a1208 !important; + font-weight: 700; + box-shadow: 0 4px 14px rgba(255, 214, 0, 0.35); + border: none; +} + +[data-theme='toy-tale'] .btn-primary:hover, +[data-theme='toy-tale'] .player-btn-primary:hover, +[data-theme='toy-tale'] .hero-play-btn:hover { + background: linear-gradient(135deg, #ffe033 0%, #FFD600 100%); + box-shadow: 0 6px 20px rgba(255, 214, 0, 0.50); +} + +/* Cards */ +[data-theme='toy-tale'] .album-card, +[data-theme='toy-tale'] .artist-card, +[data-theme='toy-tale'] .card, +[data-theme='toy-tale'] .settings-card { + border: 1px solid rgba(255, 214, 0, 0.16); +} + +[data-theme='toy-tale'] .album-card:hover, +[data-theme='toy-tale'] .artist-card:hover { + border-color: rgba(255, 214, 0, 0.42); + box-shadow: 0 4px 18px rgba(255, 214, 0, 0.14); +} + +/* Track rows */ +[data-theme='toy-tale'] .track-row:hover, +[data-theme='toy-tale'] .queue-item:hover { + background: rgba(255, 214, 0, 0.06); +} + +/* Queue active item — Buzz purple accent */ +[data-theme='toy-tale'] .queue-item.active { + background: rgba(123, 79, 214, 0.12); + border-left: 3px solid #7B4FD6; +} + +[data-theme='toy-tale'] .queue-item.active .queue-item-title { + color: #FFD600; +} + +[data-theme='toy-tale'] .queue-item.active .queue-item-artist, +[data-theme='toy-tale'] .queue-item.active .queue-item-duration { + color: #9B72D6; +} + +/* Scrollbar — Woody brown */ +[data-theme='toy-tale'] ::-webkit-scrollbar { + width: 6px; +} + +[data-theme='toy-tale'] ::-webkit-scrollbar-track { + background: #0d0a06; +} + +[data-theme='toy-tale'] ::-webkit-scrollbar-thumb { + background: #7a5a35; + border-radius: 3px; +} + +[data-theme='toy-tale'] ::-webkit-scrollbar-thumb:hover { + background: #FFD600; +} + +/* Connection indicators */ +[data-theme='toy-tale'] .connection-type, +[data-theme='toy-tale'] .connection-server { + color: #6a5030; +} + +/* Sidebar section labels (sky-blue bg needs light text) */ +[data-theme='toy-tale'] .nav-section-label { + color: rgba(200, 230, 255, 0.55); +} + +/* Queue tab buttons (Lyrics / Warteschlange) — inactive */ +[data-theme='toy-tale'] .queue-tab-btn { + color: #b89060; +} + +[data-theme='toy-tale'] .queue-tab-btn:hover { + color: #f0e8d8; +} + +/* Queue: inactive song artist */ +[data-theme='toy-tale'] .queue-item-artist { + color: #9a7848; +} + +/* Queue: "Nächste Titel" divider */ +[data-theme='toy-tale'] .queue-divider span { + color: #b89060 !important; +} + diff --git a/src/styles/themes/windows-7-aero-aero-glass-frutiger-aero.css b/src/styles/themes/windows-7-aero-aero-glass-frutiger-aero.css new file mode 100644 index 00000000..ad4f2587 --- /dev/null +++ b/src/styles/themes/windows-7-aero-aero-glass-frutiger-aero.css @@ -0,0 +1 @@ +/* ─── Windows 7 Aero — Aero Glass & Frutiger Aero ─── */ diff --git a/src/styles/themes/windows-7-aero-glass.css b/src/styles/themes/windows-7-aero-glass.css new file mode 100644 index 00000000..1c9214cc --- /dev/null +++ b/src/styles/themes/windows-7-aero-glass.css @@ -0,0 +1,460 @@ +/* ─── Windows 7 Aero Glass ─── */ +[data-theme='aero-glass'] { + color-scheme: light; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234c607a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette ── */ + --ctp-crust: #05080f; + --ctp-mantle: #0d1a2e; + --ctp-base: #b8cfe8; + --ctp-surface0: #ccdaea; + --ctp-surface1: #d8e6f2; + --ctp-surface2: #e4f0f8; + --ctp-overlay0: #a0bcd8; + --ctp-overlay1: #7aa0c0; + --ctp-overlay2: #5a84a8; + --ctp-text: #0d1a2e; + --ctp-subtext1: #1e3250; + --ctp-subtext0: #3a5070; + --ctp-mauve: #1878e8; + --ctp-lavender: #3399ff; + --ctp-sky: #5bb3ff; + --ctp-blue: #1d4268; + --ctp-sapphire: #1366c8; + --ctp-teal: #0099aa; + --ctp-green: #107c10; + --ctp-yellow: #f7c948; + --ctp-peach: #e8890c; + --ctp-pink: #e3008c; + --ctp-flamingo: #c50f1f; + --ctp-rosewater: #da3b01; + --ctp-maroon: #a4262c; + --ctp-red: #c42b1c; + + /* ── Semantic tokens ── */ + --bg-app: #b8cfe8; + --bg-sidebar: rgba(210, 228, 248, 0.55); + --bg-card: rgba(225, 238, 252, 0.65); + --bg-hover: rgba(24, 120, 232, 0.85); + --bg-player: #05080f; + --bg-glass: rgba(210, 228, 248, 0.82); + --accent: #1878e8; + --accent-dim: rgba(24, 120, 232, 0.14); + --accent-glow: rgba(24, 120, 232, 0.40); + --volume-accent: #1878e8; + --text-primary: #0d1a2e; + --text-secondary: #1e3250; + --text-muted: #7090b8; + --border: rgba(130, 175, 220, 0.65); + --border-subtle: rgba(160, 200, 240, 0.45); + --positive: #107c10; + --warning: #c87400; + --danger: #c42b1c; + --radius-sm: 4px; + --radius-md: 6px; + --radius-lg: 8px; +} + +/* ── Background: W7 sky with depth ── */ +[data-theme='aero-glass'] .app-shell { + background: linear-gradient(160deg, #c8e2f5 0%, #b5cfe4 45%, #9fc0db 100%); +} + +/* ── Sidebar: Aero glass panel — frosted translucent ── */ +[data-theme='aero-glass'] .sidebar { + background: rgba(210, 232, 252, 0.52); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-right: 1px solid rgba(150, 190, 230, 0.55); + box-shadow: + inset -1px 0 0 rgba(255, 255, 255, 0.75), + inset 1px 0 0 rgba(255, 255, 255, 0.25), + 2px 0 8px rgba(0, 0, 0, 0.12); +} + +/* ── Player bar: authentic W7 taskbar — near-black glass ── */ +[data-theme='aero-glass'] .player-bar { + background: linear-gradient(180deg, + rgba(12, 18, 32, 0.96) 0%, + rgba(6, 10, 20, 0.99) 100%); + backdrop-filter: blur(22px); + -webkit-backdrop-filter: blur(22px); + border-top: 1px solid rgba(80, 155, 235, 0.60); + box-shadow: + inset 0 1px 0 rgba(100, 180, 255, 0.28), + inset 0 2px 0 rgba(255, 255, 255, 0.06), + 0 -2px 16px rgba(0, 0, 0, 0.55); +} + +/* Track info: white on near-black, blue glow */ +[data-theme='aero-glass'] .player-track-name { + color: #ffffff; + text-shadow: 0 0 12px rgba(80, 160, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.60); + font-weight: 600; +} + +[data-theme='aero-glass'] .player-track-artist { + color: #88b8e0; + opacity: 1; +} + +[data-theme='aero-glass'] .player-time { + color: #88b8e0; +} + +/* ── Transport buttons: Aero glass gel circles ── */ +[data-theme='aero-glass'] .player-btn, +[data-theme='aero-glass'] .player-btn-primary { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.80) 0%, + rgba(195, 228, 255, 0.82) 48%, + rgba(80, 160, 235, 0.92) 50%, + rgba(30, 110, 205, 0.96) 100%); + color: #ffffff; + border: 1px solid rgba(20, 75, 180, 0.55); + border-radius: 50%; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.90), + 0 2px 6px rgba(0, 0, 0, 0.40), + 0 0 0 1px rgba(80, 150, 230, 0.25); +} + +[data-theme='aero-glass'] .player-btn:hover, +[data-theme='aero-glass'] .player-btn-primary:hover { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.92) 0%, + rgba(215, 240, 255, 0.90) 48%, + rgba(105, 178, 248, 0.95) 50%, + rgba(50, 130, 220, 0.99) 100%); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.95), + 0 3px 10px rgba(0, 0, 0, 0.40), + 0 0 12px rgba(51, 153, 255, 0.45); +} + +/* ── Regular buttons: Aero frosted glass ── */ +[data-theme='aero-glass'] .btn, +[data-theme='aero-glass'] .btn-surface, +[data-theme='aero-glass'] .btn-ghost { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.85) 0%, + rgba(255, 255, 255, 0.85) 48%, + rgba(190, 220, 248, 0.90) 50%, + rgba(155, 198, 240, 0.94) 100%); + color: #0d1a2e; + border: 1px solid rgba(120, 170, 220, 0.65); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.95), + inset 0 1px 0 rgba(255, 255, 255, 0.50), + 0 1px 3px rgba(0, 0, 0, 0.18); + border-radius: 5px; +} + +[data-theme='aero-glass'] .btn:hover, +[data-theme='aero-glass'] .btn-surface:hover, +[data-theme='aero-glass'] .btn-ghost:hover { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.96) 0%, + rgba(255, 255, 255, 0.96) 48%, + rgba(210, 235, 255, 0.95) 50%, + rgba(175, 215, 252, 0.98) 100%); + border-color: rgba(24, 120, 232, 0.70); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 1), + 0 1px 4px rgba(0, 0, 0, 0.20), + 0 0 8px rgba(24, 120, 232, 0.22); +} + +/* ── Primary button: Aero blue gel ── */ +[data-theme='aero-glass'] .btn-primary { + background: linear-gradient(180deg, + rgba(110, 185, 255, 0.92) 0%, + rgba(70, 155, 245, 0.92) 48%, + rgba(24, 100, 205, 0.96) 50%, + rgba(12, 72, 175, 0.99) 100%); + color: #ffffff; + border: 1px solid rgba(12, 60, 155, 0.70); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.58), + 0 1px 4px rgba(0, 0, 0, 0.30), + 0 0 10px rgba(24, 120, 232, 0.38); + border-radius: 5px; +} + +[data-theme='aero-glass'] .btn-primary:hover { + background: linear-gradient(180deg, + rgba(140, 200, 255, 0.95) 0%, + rgba(90, 170, 255, 0.95) 48%, + rgba(40, 120, 225, 0.98) 50%, + rgba(24, 95, 195, 1) 100%); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.65), + 0 1px 5px rgba(0, 0, 0, 0.30), + 0 0 14px rgba(24, 120, 232, 0.50); +} + +/* ── Hero / album-card buttons: frosted glass ── */ +[data-theme='aero-glass'] .hero-play-btn, +[data-theme='aero-glass'] .album-card-details-btn { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.82) 0%, + rgba(190, 220, 248, 0.88) 48%, + rgba(140, 190, 235, 0.92) 50%, + rgba(100, 160, 220, 0.95) 100%); + color: #0d1a2e; + border: 1px solid rgba(100, 160, 220, 0.60); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 3px rgba(0, 0, 0, 0.20); +} + +[data-theme='aero-glass'] .hero-play-btn:hover, +[data-theme='aero-glass'] .album-card-details-btn:hover { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(215, 238, 255, 0.95) 50%, + rgba(165, 210, 250, 0.98) 100%); + border-color: rgba(24, 120, 232, 0.70); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 8px rgba(24, 120, 232, 0.25); +} + +/* ── Queue toolbar round buttons: Aero glass ── */ +[data-theme='aero-glass'] .queue-round-btn { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.80) 0%, + rgba(185, 218, 248, 0.88) 50%, + rgba(140, 190, 235, 0.92) 100%); + color: #1e3250; + border: 1px solid rgba(110, 165, 220, 0.60); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(0, 0, 0, 0.18); +} + +[data-theme='aero-glass'] .queue-round-btn:hover:not(:disabled):not(.active) { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(210, 235, 255, 0.95) 50%, + rgba(165, 208, 250, 0.98) 100%); + border-color: rgba(24, 120, 232, 0.65); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 8px rgba(24, 120, 232, 0.25); + color: #0d1a2e; +} + +[data-theme='aero-glass'] .queue-round-btn.active { + background: linear-gradient(180deg, + rgba(110, 180, 255, 0.90) 0%, + rgba(24, 100, 210, 0.96) 100%); + color: #ffffff; + border-color: rgba(12, 60, 155, 0.70); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 8px rgba(24, 120, 232, 0.50); +} + +/* ── Cards: frosted glass panels ── */ +[data-theme='aero-glass'] .card { + background: rgba(225, 240, 255, 0.62); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border: 1px solid rgba(160, 200, 240, 0.60); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.80), + 0 2px 8px rgba(0, 0, 0, 0.12); + border-radius: 6px; +} + +/* ── Content header: Aero chrome strip ── */ +[data-theme='aero-glass'] .content-header { + background: rgba(210, 232, 252, 0.58); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + border-bottom: 1px solid rgba(150, 195, 240, 0.55); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.70), + inset 0 -1px 0 rgba(255, 255, 255, 0.35), + 0 2px 6px rgba(0, 0, 0, 0.10); +} + +/* Connection indicators: dark navy, readable on glass */ +[data-theme='aero-glass'] .connection-type, +[data-theme='aero-glass'] .connection-server { + color: #0d1a2e; +} + +/* ── Theme accordion: glass hover ── */ +[data-theme='aero-glass'] .theme-accordion-header:hover { + background: rgba(24, 120, 232, 0.18); + color: #0d1a2e; +} + +[data-theme='aero-glass'] .theme-accordion-open .theme-accordion-header { + background: rgba(24, 120, 232, 0.22); + color: #0d1a2e; +} + +/* ── Progress bar: Aero blue ── */ +[data-theme='aero-glass'] .progress-bar-track { + background: rgba(150, 195, 235, 0.45); + border-radius: 3px; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); +} + +[data-theme='aero-glass'] .progress-bar-fill { + background: linear-gradient(180deg, + rgba(110, 185, 255, 0.95) 0%, + rgba(24, 120, 232, 0.98) 50%, + rgba(12, 90, 200, 1) 100%); + border-radius: 3px; + box-shadow: 0 0 6px rgba(24, 120, 232, 0.50); +} + +/* ── Scrollbar: W7 thin glass style ── */ +[data-theme='aero-glass'] ::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +[data-theme='aero-glass'] ::-webkit-scrollbar-track { + background: rgba(175, 210, 245, 0.25); + border-radius: 5px; +} + +[data-theme='aero-glass'] ::-webkit-scrollbar-thumb { + background: rgba(110, 168, 225, 0.60); + border: 1px solid rgba(80, 140, 200, 0.45); + border-radius: 5px; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); +} + +[data-theme='aero-glass'] ::-webkit-scrollbar-thumb:hover { + background: rgba(24, 120, 232, 0.72); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 0 4px rgba(24, 120, 232, 0.30); +} + +/* ── Glass / dropdowns: frosted glass panel ── */ +[data-theme='aero-glass'] .glass { + background: rgba(218, 236, 255, 0.88) !important; + backdrop-filter: blur(18px) !important; + -webkit-backdrop-filter: blur(18px) !important; + border: 1px solid rgba(150, 195, 240, 0.65) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.75), + 2px 2px 12px rgba(0, 0, 0, 0.18) !important; + border-radius: 8px !important; +} + +[data-theme='aero-glass'] .glass [style*="var(--bg-hover)"] { + background: rgba(24, 120, 232, 0.20) !important; + border-radius: 4px !important; +} + +[data-theme='aero-glass'] .glass [style*="var(--text-primary)"] { + color: #0d1a2e !important; +} + +[data-theme='aero-glass'] .glass [style*="var(--text-secondary)"] { + color: #1e3250 !important; +} + +[data-theme='aero-glass'] .glass [style*="var(--text-muted)"] { + color: #3a5070 !important; +} + +/* ── Hover / selection: Aero blue glass ── */ +[data-theme='aero-glass'] .queue-tab-btn:hover { + background: rgba(24, 120, 232, 0.18); + color: #0d1a2e; +} + +[data-theme='aero-glass'] .settings-tab:hover { + background: rgba(24, 120, 232, 0.18); + color: #0d1a2e; +} + +[data-theme='aero-glass'] .settings-tab.active { + background: rgba(24, 120, 232, 0.85); + color: #ffffff; +} + +[data-theme='aero-glass'] .custom-select-trigger:hover { + background: rgba(24, 120, 232, 0.15); +} + +[data-theme='aero-glass'] .custom-select-option:hover { + background: rgba(24, 120, 232, 0.85) !important; + color: #ffffff !important; +} + +[data-theme='aero-glass'] .artist-ext-link:hover { + background: rgba(24, 120, 232, 0.85); + color: #ffffff !important; +} + +[data-theme='aero-glass'] .np-action-btn:hover { + background: rgba(24, 120, 232, 0.18); +} + +[data-theme='aero-glass'] .np-queue-item:hover, +[data-theme='aero-glass'] .np-queue-item.context-active { + background: rgba(24, 120, 232, 0.85); + color: #ffffff; +} + +[data-theme='aero-glass'] .track-row:hover, +[data-theme='aero-glass'] .track-row.context-active { + background: rgba(24, 120, 232, 0.85) !important; +} + +[data-theme='aero-glass'] .track-row:hover *, +[data-theme='aero-glass'] .track-row.context-active * { + color: #ffffff !important; +} + +[data-theme='aero-glass'] .artist-row:hover { + background: rgba(24, 120, 232, 0.85); + color: #ffffff; +} + +[data-theme='aero-glass'] .playlist-row:hover { + background: rgba(24, 120, 232, 0.85); +} + +[data-theme='aero-glass'] .playlist-row:hover, +[data-theme='aero-glass'] .playlist-row:hover * { + color: #ffffff; +} + +[data-theme='aero-glass'] .queue-item:hover, +[data-theme='aero-glass'] .queue-item.context-active { + background: rgba(24, 120, 232, 0.85) !important; +} + +[data-theme='aero-glass'] .queue-item:hover .queue-item-title, +[data-theme='aero-glass'] .queue-item:hover .queue-item-artist, +[data-theme='aero-glass'] .queue-item:hover .queue-item-duration, +[data-theme='aero-glass'] .queue-item.context-active .queue-item-title, +[data-theme='aero-glass'] .queue-item.context-active .queue-item-artist, +[data-theme='aero-glass'] .queue-item.context-active .queue-item-duration { + color: #ffffff; +} + +/* ── Active queue / now-playing items ── */ +[data-theme='aero-glass'] .queue-item.active { + background: rgba(24, 120, 232, 0.14); + color: #1366c8; +} + +[data-theme='aero-glass'] .queue-item.active .queue-item-artist, +[data-theme='aero-glass'] .queue-item.active .queue-item-duration { + color: #1878e8; + opacity: 0.85; +} + +[data-theme='aero-glass'] .np-queue-item-active { + color: #1366c8; +} + +[data-theme='aero-glass'] .np-queue-item.active { + background: rgba(24, 120, 232, 0.10); +} + +[data-theme='aero-glass'] .np-album-track.active .np-album-track-title, +[data-theme='aero-glass'] .np-album-track.active .np-album-track-num { + color: #1366c8; +} + diff --git a/src/styles/themes/windows-vista-aero-glass.css b/src/styles/themes/windows-vista-aero-glass.css new file mode 100644 index 00000000..1dfd5fa0 --- /dev/null +++ b/src/styles/themes/windows-vista-aero-glass.css @@ -0,0 +1,413 @@ +/* ─── Windows Vista — Aero Glass ─── */ +/* Pure CSS glass illusion: layered gradients + strategic box-shadows, no backdrop-filter */ +[data-theme='wista'] { + color-scheme: light; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234870a8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette ── */ + --ctp-crust: #010308; + --ctp-mantle: #050b1a; + --ctp-base: #eef3fc; + /* Vista window interior — ice blue-white */ + --ctp-surface0: #e2ecf8; + --ctp-surface1: #d5e4f5; + --ctp-surface2: #c5d8f0; + --ctp-overlay0: #a8c4e0; + --ctp-overlay1: #88a8cc; + --ctp-overlay2: #6888b0; + --ctp-text: #0d1d3c; + /* deep navy — readable on ice bg */ + --ctp-subtext1: #2a4878; + --ctp-subtext0: #4870a8; + /* Vista Aero blue spectrum */ + --ctp-mauve: #1565c8; + /* Vista Aero blue — THE accent */ + --ctp-lavender: #2880e0; + --ctp-sky: #5aaaf8; + /* selection/highlight blue */ + --ctp-teal: #1890b8; + --ctp-blue: #0e50a8; + --ctp-sapphire: #0848a0; + --ctp-green: #1a8020; + --ctp-yellow: #c8980c; + --ctp-peach: #d06818; + --ctp-pink: #c03878; + --ctp-flamingo: #a82860; + --ctp-rosewater: #c04848; + --ctp-maroon: #903030; + --ctp-red: #c02020; + + /* ── Semantic tokens ── */ + --bg-app: #eef3fc; + --bg-sidebar: #0e1e3e; + /* deep navy glass — Vista nav pane in dark mode */ + --bg-card: #e2ecf8; + --bg-hover: rgba(21, 101, 200, 0.09); + --bg-player: #050810; + /* Vista taskbar — black glass */ + --bg-glass: rgba(238, 243, 252, 0.94); + --accent: #1565c8; + --accent-dim: rgba(21, 101, 200, 0.12); + --accent-glow: rgba(21, 101, 200, 0.40); + --text-primary: #0d1d3c; + --text-secondary: #2a4878; + --text-muted: #3f6aa0; + /* slight lift from #4870a8 to clear AA on bg-card (4.23 → 4.65) */ + --border: rgba(100, 160, 220, 0.45); + --border-subtle: rgba(140, 190, 240, 0.30); + --positive: #1a8020; + --warning: #735a00; + /* deeper Vista gold — #c8980c was 2.37:1 on bg-app, now 5.91:1 */ + --danger: #c02020; + --radius-sm: 3px; + --radius-md: 6px; + --radius-lg: 10px; + /* Waveform: Vista blue progress bar */ + --waveform-played: #1565c8; + --waveform-buffered: #5aaaf8; + --waveform-unplayed: #c5d8f0; +} + +/* ── App shell: Vista desktop — soft blue gradient ── */ +[data-theme='wista'] .app-shell { + background: linear-gradient(160deg, #dce8f8 0%, #e5eefa 50%, #eef3fc 100%); +} + +/* ── Sidebar: Aero glass nav pane ── + Three layers: 1) top specular reflection, 2) deep navy base, 3) edge highlight via box-shadow */ +[data-theme='wista'] .sidebar { + background: + linear-gradient(180deg, + rgba(255, 255, 255, 0.22) 0%, + rgba(255, 255, 255, 0.08) 20%, + rgba(255, 255, 255, 0.00) 55%, + rgba(0, 20, 60, 0.12) 100%), + linear-gradient(180deg, #1a3368 0%, #0e1e3e 45%, #0a1830 100%); + border-right: 1px solid rgba(120, 180, 255, 0.55); + box-shadow: + inset -1px 0 0 rgba(255, 255, 255, 0.28), + inset 1px 0 0 rgba(255, 255, 255, 0.10), + 2px 0 18px rgba(0, 0, 0, 0.40); +} + +/* Sidebar text: light on dark glass */ +[data-theme='wista'] .nav-link { + color: rgba(210, 228, 255, 0.72); +} + +[data-theme='wista'] .nav-link:hover { + background: rgba(255, 255, 255, 0.11); + color: #ffffff; +} + +[data-theme='wista'] .nav-link.active { + background: rgba(21, 101, 200, 0.38); + color: #ffffff; +} + +[data-theme='wista'] .nav-link.active::before { + background: #5aaaf8; + box-shadow: 0 0 10px rgba(90, 170, 248, 0.85); +} + +[data-theme='wista'] .sidebar-logo-text, +[data-theme='wista'] .sidebar-bottom a, +[data-theme='wista'] .sidebar-bottom button { + color: rgba(210, 228, 255, 0.70); +} + +[data-theme='wista'] { + --logo-color-start: #ffffff; + --logo-color-end: #a8ccff; +} + +[data-theme='wista'] .sidebar-version { + color: rgba(210, 228, 255, 0.35); +} + +/* ── Player bar: Vista Aero taskbar ── + Black glass + intense blue glow on top border — the most iconic Vista element */ +[data-theme='wista'] .player-bar { + background: + linear-gradient(180deg, + rgba(255, 255, 255, 0.07) 0%, + rgba(255, 255, 255, 0.00) 18%, + rgba(0, 0, 0, 0.00) 82%, + rgba(0, 0, 0, 0.18) 100%), + linear-gradient(180deg, #0c1828 0%, #050810 100%); + border-top: 1px solid rgba(80, 155, 255, 0.70); + box-shadow: + inset 0 1px 0 rgba(140, 200, 255, 0.55), + inset 0 2px 0 rgba(255, 255, 255, 0.14), + 0 -4px 24px rgba(0, 0, 0, 0.70); +} + +/* Player text: white on black glass */ +[data-theme='wista'] .player-track-name { + color: #ffffff; + text-shadow: 0 0 12px rgba(100, 170, 255, 0.65), 0 1px 2px rgba(0, 0, 0, 0.60); + font-weight: 600; +} + +[data-theme='wista'] .player-track-artist { + color: #88b8e8; + opacity: 1; +} + +[data-theme='wista'] .player-time { + color: #88b8e8; +} + +/* ── Transport buttons: Vista glass orbs ── + Top half: white → ice-blue reflection | Bottom half: royal blue deep — the iconic split */ +[data-theme='wista'] .player-btn, +[data-theme='wista'] .player-btn-primary { + background: linear-gradient(180deg, + #daeeff 0%, + #b8d8ff 44%, + #3a91f8 50%, + #0f58d7 100%); + color: #ffffff; + border: 1px solid rgba(10, 65, 180, 0.70); + border-radius: 50%; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.75), + 0 2px 8px rgba(0, 0, 0, 0.50), + 0 0 0 1px rgba(80, 140, 255, 0.20); +} + +[data-theme='wista'] .player-btn:hover, +[data-theme='wista'] .player-btn-primary:hover { + background: linear-gradient(180deg, + #e8f4ff 0%, + #c8e4ff 44%, + #58a8ff 50%, + #2070e8 100%); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.80), + 0 3px 12px rgba(0, 0, 0, 0.50), + 0 0 16px rgba(80, 150, 255, 0.35); +} + +/* ── Content-area buttons: Vista dialog glass ── */ +[data-theme='wista'] .btn { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.98) 0%, + rgba(238, 248, 255, 0.95) 44%, + rgba(195, 222, 248, 0.90) 50%, + rgba(168, 205, 240, 0.85) 100%); + color: #0d1d3c; + border: 1px solid rgba(100, 160, 220, 0.68); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.90), + 0 1px 3px rgba(0, 0, 0, 0.18); +} + +[data-theme='wista'] .btn:hover { + background: linear-gradient(180deg, + rgba(255, 255, 255, 1.00) 0%, + rgba(245, 252, 255, 0.98) 44%, + rgba(210, 233, 255, 0.95) 50%, + rgba(180, 220, 252, 0.92) 100%); + border-color: rgba(80, 140, 220, 0.80); +} + +[data-theme='wista'] .btn-primary { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(190, 222, 255, 0.92) 44%, + rgba(48, 130, 240, 0.96) 50%, + rgba(15, 78, 210, 0.99) 100%); + color: #ffffff; + border: 1px solid rgba(10, 60, 180, 0.72); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.88), + 0 1px 4px rgba(0, 0, 0, 0.28), + 0 0 8px rgba(21, 101, 200, 0.22); +} + +[data-theme='wista'] .btn-primary:hover { + background: linear-gradient(180deg, + rgba(255, 255, 255, 1.00) 0%, + rgba(210, 235, 255, 0.95) 44%, + rgba(68, 148, 255, 0.97) 50%, + rgba(30, 95, 225, 1.00) 100%); +} + +/* ── Cards/panels: Vista frosted glass panel ── */ +[data-theme='wista'] .glass, +[data-theme='wista'] .card { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.88) 0%, + rgba(225, 240, 255, 0.82) 100%); + border: 1px solid rgba(130, 182, 232, 0.60); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.92), + 0 2px 8px rgba(21, 101, 200, 0.10); +} + +/* ── Content header: Vista titlebar / toolbar band ── */ +[data-theme='wista'] .content-header { + background: linear-gradient(180deg, + rgba(255, 255, 255, 0.92) 0%, + rgba(232, 245, 255, 0.72) 100%); + border-bottom: 1px solid rgba(150, 198, 238, 0.65); + box-shadow: 0 1px 4px rgba(21, 101, 200, 0.10); +} + +/* ── Album badge: Vista blue pill ── */ +[data-theme='wista'] .badge, +[data-theme='wista'] .album-detail-badge { + background: #1565c8; + color: #ffffff; +} + +/* ── Scrollbar: Vista light-blue style ── */ +[data-theme='wista'] ::-webkit-scrollbar-track { + background: #d5e4f5; +} + +[data-theme='wista'] ::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, #90b8e0 0%, #6898c8 100%); + border-radius: 4px; +} + +[data-theme='wista'] ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, #a8ccf0 0%, #80a8e0 100%); +} + +/* ── Hover / active states: Vista selection blue ── */ +[data-theme='wista'] .track-row:hover, +[data-theme='wista'] .track-row.context-active { + background: rgba(21, 101, 200, 0.08); + box-shadow: inset 3px 0 0 #1565c8; +} + +[data-theme='wista'] .queue-item:hover, +[data-theme='wista'] .queue-item.context-active { + background: rgba(90, 170, 248, 0.18); +} + +[data-theme='wista'] .queue-item.active { + background: rgba(21, 101, 200, 0.28); + border-left: 2px solid #5aaaf8; +} + +[data-theme='wista'] .np-queue-item.active { + background: rgba(21, 101, 200, 0.10); +} + +[data-theme='wista'] .np-queue-item-active { + color: #1565c8; +} + +[data-theme='wista'] .np-queue-item:hover, +[data-theme='wista'] .np-queue-item.context-active { + background: rgba(21, 101, 200, 0.07); +} + +[data-theme='wista'] .np-album-track.active .np-album-track-title, +[data-theme='wista'] .np-album-track.active .np-album-track-num { + color: #1565c8; +} + +[data-theme='wista'] .artist-row:hover { + background: rgba(21, 101, 200, 0.07); + box-shadow: inset 3px 0 0 #1565c8; +} + +[data-theme='wista'] .playlist-row:hover { + background: rgba(21, 101, 200, 0.07); + box-shadow: inset 3px 0 0 #1565c8; +} + +[data-theme='wista'] .settings-tab:hover { + background: rgba(21, 101, 200, 0.08); + color: #1565c8; +} + +[data-theme='wista'] .settings-tab.active { + background: rgba(21, 101, 200, 0.14); + color: #1565c8; + border-color: #1565c8; +} + +[data-theme='wista'] .queue-tab-btn:hover { + background: rgba(21, 101, 200, 0.08); + color: #1565c8; +} + +[data-theme='wista'] .custom-select-trigger:hover { + background: rgba(21, 101, 200, 0.08); +} + +[data-theme='wista'] .custom-select-option:hover { + background: rgba(21, 101, 200, 0.12); +} + +[data-theme='wista'] .artist-ext-link:hover { + background: rgba(21, 101, 200, 0.10); + border-color: #1565c8; +} + +/* ── Queue: dark glass sidebar → light text ── */ +[data-theme='wista'] .queue-item-title { + color: rgba(210, 228, 255, 0.90); +} + +[data-theme='wista'] .queue-item-artist, +[data-theme='wista'] .queue-item-duration { + color: rgba(170, 205, 250, 0.55); +} + +[data-theme='wista'] .queue-item.active .queue-item-artist, +[data-theme='wista'] .queue-item.active .queue-item-duration { + color: rgba(190, 218, 255, 0.75); +} + +[data-theme='wista'] .queue-divider span { + color: rgba(180, 210, 255, 0.38) !important; +} + +[data-theme='wista'] .queue-current-info h3 { + color: rgba(220, 235, 255, 0.92); +} + +[data-theme='wista'] .queue-current-sub { + color: rgba(180, 210, 252, 0.58); +} + +[data-theme='wista'] .queue-tab-btn { + color: rgba(200, 220, 255, 0.62); +} + +[data-theme='wista'] .queue-tab-btn.active { + color: #5aaaf8; +} + +[data-theme='wista'] .queue-round-btn.active { + color: #050810; +} + +/* Connection indicators: muted Vista blue on light bg */ +[data-theme='wista'] .connection-type, +[data-theme='wista'] .connection-server { + color: #6090b8; +} + +/* Lyrics pane sits inside the queue panel (bg-sidebar = #0e1e3e deep navy). + Default --text-primary / --text-muted are near-navy and invisible there — + explicit light tokens get the pane back to AA+. */ +[data-theme='wista'] .lyrics-line, +[data-theme='wista'] .lyrics-status, +[data-theme='wista'] .lyrics-word-synced .lyrics-line { + color: #aac8f0; +} +[data-theme='wista'] .lyrics-line.active, +[data-theme='wista'] .lyrics-word-synced .lyrics-line.active { + color: #ffffff; +} +[data-theme='wista'] .lyrics-line.completed { + color: #aac8f0; +} + diff --git a/src/styles/themes/windows-xp-luna-classic-2001.css b/src/styles/themes/windows-xp-luna-classic-2001.css new file mode 100644 index 00000000..4ad2bb31 --- /dev/null +++ b/src/styles/themes/windows-xp-luna-classic-2001.css @@ -0,0 +1 @@ +/* ─── Windows XP Luna — Classic 2001 ─── */ diff --git a/src/styles/themes/windows-xp-luna-teal.css b/src/styles/themes/windows-xp-luna-teal.css new file mode 100644 index 00000000..4df83c68 --- /dev/null +++ b/src/styles/themes/windows-xp-luna-teal.css @@ -0,0 +1,482 @@ +/* ─── Windows XP Luna Teal ─── */ +[data-theme='luna-teal'] { + color-scheme: light; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23444444%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette ── */ + --ctp-crust: #0041b8; + --ctp-mantle: #0055e5; + --ctp-base: #ece9d8; + --ctp-surface0: #ffffff; + --ctp-surface1: #f5f3ec; + --ctp-surface2: #ece9d8; + --ctp-overlay0: #c0bba8; + --ctp-overlay1: #8a8675; + --ctp-overlay2: #5e5a4c; + --ctp-text: #000000; + --ctp-subtext1: #1a1a1a; + --ctp-subtext0: #444444; + --ctp-mauve: #3c9d29; + --ctp-lavender: #52b83c; + --ctp-green: #3c9d29; + --ctp-teal: #007c8a; + --ctp-sky: #316ac5; + --ctp-blue: #0055e5; + --ctp-sapphire: #0041b8; + --ctp-pink: #cc2288; + --ctp-flamingo: #cc2020; + --ctp-rosewater: #dd4400; + --ctp-yellow: #b87800; + --ctp-peach: #cc6600; + --ctp-maroon: #aa1111; + --ctp-red: #cc1111; + + /* ── Semantic tokens ── */ + --bg-app: #ece9d8; + --bg-sidebar: #c8daf5; + --bg-card: #ffffff; + --bg-hover: #316ac5; + --bg-player: #1248b8; + --bg-glass: rgba(255, 255, 255, 0.97); + --accent: #3c9d29; + --accent-dim: rgba(60, 157, 41, 0.14); + --accent-glow: rgba(60, 157, 41, 0.35); + --volume-accent: #3c9d29; + --text-primary: #000000; + --text-secondary: #333333; + --text-muted: #555555; + --border: #003399; + --border-subtle: #aca899; + --positive: #3c9d29; + --warning: #b87800; + --danger: #cc1111; + --radius-sm: 3px; + --radius-md: 4px; + --radius-lg: 6px; +} + +/* ── App shell: XP sandy desktop ── */ +[data-theme='luna-teal'] .app-shell { + background: #ece9d8; +} + +/* ── Sidebar: XP Explorer task pane / Folders panel ── */ +[data-theme='luna-teal'] .sidebar { + background: linear-gradient(180deg, #d8e8fa 0%, #c0d4f5 40%, #b0c8f0 100%); + border-right: 1px solid #7090c0; + box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.60), 2px 0 4px rgba(0, 0, 0, 0.14); +} + +/* Sidebar text: dark navy on ice blue — with white text-shadow for legibility */ +[data-theme='luna-teal'] .sidebar-link, +[data-theme='luna-teal'] .sidebar-section-title, +[data-theme='luna-teal'] .sidebar-logo-text, +[data-theme='luna-teal'] .nav-section-label, +[data-theme='luna-teal'] .brand-name { + color: #002060; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); + font-weight: 700; +} + +/* Nav links */ +[data-theme='luna-teal'] .nav-link { + color: #001850; +} + +[data-theme='luna-teal'] .nav-link:hover { + background: rgba(255, 255, 255, 0.45); + color: #000000; + border-radius: 3px; +} + +[data-theme='luna-teal'] .nav-link.active { + background: #316ac5; + color: #ffffff; + border-radius: 3px; + text-shadow: none; +} + +[data-theme='luna-teal'] .nav-link.active::before { + background: #ffffff; +} + +[data-theme='luna-teal'] .nav-link.active svg, +[data-theme='luna-teal'] .nav-link:hover svg { + opacity: 1; +} + +/* Now Playing nav link */ +[data-theme='luna-teal'] .nav-link-nowplaying { + background: rgba(0, 0, 80, 0.10); + color: #001850; +} + +[data-theme='luna-teal'] .nav-link-nowplaying:hover { + background: rgba(255, 255, 255, 0.45); + color: #000000; +} + +[data-theme='luna-teal'] .nav-link-nowplaying.active { + background: #316ac5; + color: #ffffff; +} + +/* ── Player bar: authentic XP Luna taskbar blue ── */ +[data-theme='luna-teal'] .player-bar { + background: linear-gradient(180deg, + #4b8ee8 0%, + #2568d4 8%, + #1a56c4 30%, + #1248b8 70%, + #0e3da8 85%, + #1248b8 100%); + border-top: 1px solid #7aaaff; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.55), + inset 0 2px 0 rgba(255, 255, 255, 0.18), + 0 -2px 8px rgba(0, 0, 0, 0.30); +} + +/* Track name: white with XP glow */ +[data-theme='luna-teal'] .player-track-name { + color: #ffffff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60), 0 0 10px rgba(120, 180, 255, 0.40); + font-weight: 700; +} + +[data-theme='luna-teal'] .player-track-artist { + color: #b8d4ff; + opacity: 1; +} + +[data-theme='luna-teal'] .player-time { + color: #b8d4ff; +} + +/* ── Transport buttons: XP Luna gel circles ── */ +[data-theme='luna-teal'] .player-btn, +[data-theme='luna-teal'] .player-btn-primary { + background: linear-gradient(180deg, + #80aaff 0%, + #4477ee 45%, + #1a50dd 50%, + #0c3bb8 100%); + color: #ffffff; + border: 1px solid #002288; + border-radius: 50%; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.65), + 0 2px 5px rgba(0, 0, 0, 0.45); +} + +[data-theme='luna-teal'] .player-btn:hover, +[data-theme='luna-teal'] .player-btn-primary:hover { + background: linear-gradient(180deg, + #99bbff 0%, + #5588ff 45%, + #2264ee 50%, + #1a52d0 100%); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.75), + 0 3px 8px rgba(0, 0, 0, 0.40), + 0 0 10px rgba(80, 140, 255, 0.40); +} + +/* ── Regular buttons: XP bevel style ── */ +[data-theme='luna-teal'] .btn, +[data-theme='luna-teal'] .btn-surface, +[data-theme='luna-teal'] .btn-ghost { + background: linear-gradient(180deg, #f5f3ec 0%, #ece9d8 48%, #ddd9c8 50%, #d0cdb8 100%); + color: #000000; + border: 1px solid #888480; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.95), + inset 1px 0 0 rgba(255, 255, 255, 0.70), + 0 1px 2px rgba(0, 0, 0, 0.20); + border-radius: 3px; +} + +[data-theme='luna-teal'] .btn:hover, +[data-theme='luna-teal'] .btn-surface:hover, +[data-theme='luna-teal'] .btn-ghost:hover { + background: linear-gradient(180deg, #ffffff 0%, #f0ede0 48%, #e4e0d0 50%, #d8d4c4 100%); + border-color: #0055e5; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 1), + 0 1px 3px rgba(0, 0, 0, 0.18); +} + +/* ── Primary button: XP green gel ── */ +[data-theme='luna-teal'] .btn-primary { + background: linear-gradient(180deg, + #66dd50 0%, + #3c9d29 45%, + #2e8020 50%, + #1e6015 100%); + color: #ffffff; + border: 1px solid #1a5010; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.55), + 0 1px 3px rgba(0, 0, 0, 0.30); + border-radius: 4px; +} + +[data-theme='luna-teal'] .btn-primary:hover { + background: linear-gradient(180deg, + #80ee68 0%, + #4db035 45%, + #3a9028 50%, + #2e8020 100%); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.60), + 0 1px 4px rgba(0, 0, 0, 0.30), + 0 0 8px rgba(60, 157, 41, 0.40); +} + +/* ── Hero / album-card play buttons ── */ +[data-theme='luna-teal'] .hero-play-btn, +[data-theme='luna-teal'] .album-card-details-btn { + background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%); + color: #000000; + border: 1px solid #888480; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.20); +} + +[data-theme='luna-teal'] .hero-play-btn:hover, +[data-theme='luna-teal'] .album-card-details-btn:hover { + background: linear-gradient(180deg, #ffffff 0%, #ddd9c8 100%); + border-color: #0055e5; +} + +/* ── Queue toolbar round buttons ── */ +[data-theme='luna-teal'] .queue-round-btn { + background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%); + color: #333333; + border: 1px solid #888480; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(0, 0, 0, 0.18); +} + +[data-theme='luna-teal'] .queue-round-btn:hover:not(:disabled):not(.active) { + background: linear-gradient(180deg, #ffffff 0%, #e0ddd0 100%); + border-color: #0055e5; + color: #000000; +} + +[data-theme='luna-teal'] .queue-round-btn.active { + background: #316ac5; + color: #ffffff; + border-color: #0033aa; + box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.15); +} + +/* ── Cards: XP white window interior ── */ +[data-theme='luna-teal'] .card { + background: #ffffff; + border: 1px solid #aca899; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 3px rgba(0, 0, 0, 0.15); + border-radius: 4px; +} + +/* ── Content header: XP title bar gradient ── */ +[data-theme='luna-teal'] .content-header { + background: linear-gradient(180deg, + #5a9aee 0%, + #2a6ad4 25%, + #1a56c4 50%, + #0e48b8 75%, + #0a3aaa 100%); + border-bottom: 1px solid #0033aa; + color: #ffffff; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 2px 4px rgba(0, 0, 0, 0.18); +} + +/* Connection indicators: white on blue header */ +[data-theme='luna-teal'] .connection-type, +[data-theme='luna-teal'] .connection-server { + color: #ffffff; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50); +} + +/* ── Theme accordion: XP selection blue ── */ +[data-theme='luna-teal'] .theme-accordion-header:hover { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-header { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-chevron { + color: #ffffff; +} + +/* ── Progress bar: XP green ── */ +[data-theme='luna-teal'] .progress-bar-track { + background: #aca899; + border-radius: 2px; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); +} + +[data-theme='luna-teal'] .progress-bar-fill { + background: linear-gradient(180deg, #52cc3c 0%, #3c9d29 50%, #2e8020 100%); + border-radius: 2px; +} + +/* ── Scrollbar: XP 16px system style ── */ +[data-theme='luna-teal'] ::-webkit-scrollbar { + width: 16px; + height: 16px; +} + +[data-theme='luna-teal'] ::-webkit-scrollbar-track { + background: #ece9d8; + border-left: 1px solid #aca899; +} + +[data-theme='luna-teal'] ::-webkit-scrollbar-thumb { + background: linear-gradient(to right, #c8c4b8 0%, #e0ddd0 40%, #c0bbb4 100%); + border: 1px solid #888480; + box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480; + border-radius: 2px; +} + +[data-theme='luna-teal'] ::-webkit-scrollbar-button { + background: linear-gradient(180deg, #f0ede0 0%, #d8d4c4 100%); + border: 1px solid #888480; + box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480; +} + +/* ── Glass / dropdowns: solid XP dialog style ── */ +[data-theme='luna-teal'] .glass { + background: #ffffff !important; + backdrop-filter: none !important; + border: 1px solid #aca899 !important; + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.28) !important; + border-radius: 4px !important; +} + +[data-theme='luna-teal'] .glass [style*="var(--bg-hover)"] { + background: #316ac5 !important; + border-radius: 0 !important; + color: #ffffff !important; +} + +[data-theme='luna-teal'] .glass [style*="var(--text-primary)"] { + color: #000000 !important; +} + +[data-theme='luna-teal'] .glass [style*="var(--text-secondary)"] { + color: #333333 !important; +} + +[data-theme='luna-teal'] .glass [style*="var(--text-muted)"] { + color: #555555 !important; +} + +/* ── Hover / selection: XP classic blue ── */ +[data-theme='luna-teal'] .queue-tab-btn:hover { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .settings-tab:hover { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .settings-tab.active { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .custom-select-trigger:hover { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .custom-select-option:hover { + background: #316ac5 !important; + color: #ffffff !important; +} + +[data-theme='luna-teal'] .artist-ext-link:hover { + background: #316ac5; + color: #ffffff !important; +} + +[data-theme='luna-teal'] .np-action-btn:hover { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .np-queue-item:hover, +[data-theme='luna-teal'] .np-queue-item.context-active { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .track-row:hover, +[data-theme='luna-teal'] .track-row.context-active { + background: #316ac5 !important; +} + +[data-theme='luna-teal'] .track-row:hover *, +[data-theme='luna-teal'] .track-row.context-active * { + color: #ffffff !important; +} + +[data-theme='luna-teal'] .artist-row:hover { + background: #316ac5; + color: #ffffff; +} + +[data-theme='luna-teal'] .playlist-row:hover { + background: #316ac5; +} + +[data-theme='luna-teal'] .playlist-row:hover, +[data-theme='luna-teal'] .playlist-row:hover * { + color: #ffffff; +} + +[data-theme='luna-teal'] .queue-item:hover, +[data-theme='luna-teal'] .queue-item.context-active { + background: #316ac5 !important; +} + +[data-theme='luna-teal'] .queue-item:hover .queue-item-title, +[data-theme='luna-teal'] .queue-item:hover .queue-item-artist, +[data-theme='luna-teal'] .queue-item:hover .queue-item-duration, +[data-theme='luna-teal'] .queue-item.context-active .queue-item-title, +[data-theme='luna-teal'] .queue-item.context-active .queue-item-artist, +[data-theme='luna-teal'] .queue-item.context-active .queue-item-duration { + color: #ffffff; +} + +/* ── Active queue / now-playing items ── */ +[data-theme='luna-teal'] .queue-item.active { + background: rgba(49, 106, 197, 0.12); + color: #0041b8; +} + +[data-theme='luna-teal'] .queue-item.active .queue-item-artist, +[data-theme='luna-teal'] .queue-item.active .queue-item-duration { + color: #0055e5; + opacity: 0.85; +} + +[data-theme='luna-teal'] .np-queue-item-active { + color: #0041b8; +} + +[data-theme='luna-teal'] .np-queue-item.active { + background: rgba(49, 106, 197, 0.10); +} + +[data-theme='luna-teal'] .np-album-track.active .np-album-track-title, +[data-theme='luna-teal'] .np-album-track.active .np-album-track-num { + color: #0041b8; +} + diff --git a/src/styles/themes/wmp8-classic-windows-media-player-8-xp-luna.css b/src/styles/themes/wmp8-classic-windows-media-player-8-xp-luna.css new file mode 100644 index 00000000..b46c5656 --- /dev/null +++ b/src/styles/themes/wmp8-classic-windows-media-player-8-xp-luna.css @@ -0,0 +1,170 @@ +/* ─── WMP8 Classic — Windows Media Player 8 / XP Luna ─── */ +[data-theme='winmedplayer'] { + color-scheme: dark; + --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23c2d4f2%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E"); + + /* ── Palette ── */ + --ctp-crust: #000000; + /* black — LCD display / playlist */ + --ctp-mantle: #1a3060; + /* darkest blue — sidebar */ + --ctp-base: #3a62a5; + /* Luna blue — main body (dark enough for white text) */ + --ctp-surface0: #4a72b8; + --ctp-surface1: #5480cc; + --ctp-surface2: #6090d8; + --ctp-overlay0: #7090c0; + --ctp-overlay1: #8aaad8; + --ctp-overlay2: #a0c0e8; + --ctp-text: #ffffff; + --ctp-subtext1: #dce8ff; + --ctp-subtext0: #b8d0f8; + /* WMP green + XP blue-cool palette */ + --ctp-mauve: #45ff00; + /* WMP poison green — primary accent */ + --ctp-lavender: #70ff40; + --ctp-green: #30dd00; + --ctp-teal: #00cc88; + --ctp-sky: #88ccff; + --ctp-blue: #5599ee; + --ctp-sapphire: #3378cc; + --ctp-pink: #ff88cc; + --ctp-flamingo: #ff7788; + --ctp-rosewater: #ffaabb; + --ctp-yellow: #ffdd44; + --ctp-peach: #ff9944; + --ctp-maroon: #dd4455; + --ctp-red: #ee3344; + + /* ── Semantic tokens ── */ + --bg-app: #3a62a5; + /* ~12% luminance → white contrast 6:1 */ + --bg-sidebar: #1a3060; + --bg-card: #4a72b8; + --bg-hover: #5480cc; + --bg-player: #000000; + --bg-glass: rgba(30, 58, 110, 0.88); + --accent: #45ff00; + --accent-dim: rgba(69, 255, 0, 0.15); + --accent-glow: rgba(69, 255, 0, 0.45); + --text-primary: #ffffff; + --text-secondary: #dce8ff; + --text-muted: #e8f0ff; + /* lifted from #b8d0f8 — clears AA on Luna-blue bg-app and dark sidebar */ + --border: #071027; + /* darkened from #2a5090 to meet 3:1 UI threshold on all main surfaces */ + --border-subtle: #4a72b8; + --positive: #30dd00; + --warning: #ffdd44; + --danger: #ee3344; +} + +/* ── WMP8: Luna-style gradients + skeuomorphic detail ── */ + +/* Sidebar: deep WMP task-pane blue */ +[data-theme='winmedplayer'] .sidebar { + background: linear-gradient(180deg, #244080 0%, #1a3060 60%, #0e2048 100%); + border-right: 2px solid #0e2048; + box-shadow: inset -1px 0 0 rgba(120, 160, 220, 0.2); +} + +/* Main body: Luna blue */ +[data-theme='winmedplayer'] .app-shell { + background: linear-gradient(160deg, #4a72b8 0%, #3a62a5 40%, #2e5498 100%); +} + +/* Player bar: black LCD display with green glow ambience */ +[data-theme='winmedplayer'] .player-bar { + background: #000000; + border-top: 2px solid #1a3060; + box-shadow: inset 0 1px 0 rgba(69, 255, 0, 0.06), 0 -2px 12px rgba(0, 0, 0, 0.6); +} + +/* Track name: WMP green glow */ +[data-theme='winmedplayer'] .player-track-name { + color: #45ff00; + text-shadow: + 0 0 8px rgba(69, 255, 0, 0.80), + 0 0 16px rgba(69, 255, 0, 0.40), + 0 0 2px rgba(69, 255, 0, 0.60); + letter-spacing: 0.03em; +} + +[data-theme='winmedplayer'] .player-track-artist { + color: #30dd00; + opacity: 0.85; + text-shadow: 0 0 4px rgba(69, 255, 0, 0.4); +} + +/* Transport buttons: round, radial metallic gradient, drop shadow */ +[data-theme='winmedplayer'] .player-btn, +[data-theme='winmedplayer'] .player-btn-primary { + background: radial-gradient(circle at 38% 32%, #c8dcf8 0%, #8aacdc 40%, #4870b8 100%); + color: #ffffff; + border-radius: 50%; + box-shadow: + 0 3px 8px rgba(0, 0, 0, 0.55), + 0 1px 2px rgba(0, 0, 0, 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.55), + inset 0 -1px 0 rgba(0, 0, 50, 0.3); + border: 1px solid #2a5090; +} + +[data-theme='winmedplayer'] .player-btn:hover, +[data-theme='winmedplayer'] .player-btn-primary:hover { + background: radial-gradient(circle at 38% 32%, #d8ecff 0%, #a0c0ee 40%, #5888d0 100%); + box-shadow: + 0 4px 10px rgba(0, 0, 0, 0.55), + 0 1px 2px rgba(0, 0, 0, 0.35), + inset 0 1px 0 rgba(255, 255, 255, 0.6), + inset 0 -1px 0 rgba(0, 0, 50, 0.3); +} + +/* Regular buttons: Luna soft rounded pill */ +[data-theme='winmedplayer'] .btn { + background: linear-gradient(180deg, #b8d0f0 0%, #7898d8 55%, #5878c0 100%); + color: #ffffff; + border-radius: 12px; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.5), + inset 0 -1px 0 rgba(0, 0, 80, 0.25), + 0 2px 4px rgba(0, 0, 0, 0.3); + border: 1px solid #3a60b0; +} + +[data-theme='winmedplayer'] .btn:hover { + background: linear-gradient(180deg, #cce0ff 0%, #90aaee 55%, #6888d0 100%); +} + +[data-theme='winmedplayer'] .btn-primary { + background: linear-gradient(180deg, #70ff40 0%, #38cc00 55%, #28aa00 100%); + color: #003300; + border: 1px solid #208800; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.5), + inset 0 -1px 0 rgba(0, 60, 0, 0.25), + 0 2px 6px rgba(0, 0, 0, 0.3), + 0 0 8px rgba(69, 255, 0, 0.25); +} + +/* Active queue round buttons: green bg, dark text */ +[data-theme='winmedplayer'] .queue-round-btn.active { + color: #003300; +} + +/* Cards / glass panels: slightly elevated with border */ +[data-theme='winmedplayer'] .glass, +[data-theme='winmedplayer'] .card { + background: rgba(90, 128, 190, 0.55); + border: 1px solid rgba(160, 190, 230, 0.5); + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.25), + 0 2px 6px rgba(0, 0, 0, 0.2); +} + +/* Content header: slightly darker Luna band */ +[data-theme='winmedplayer'] .content-header { + background: linear-gradient(180deg, rgba(58, 98, 165, 0.55) 0%, rgba(58, 98, 165, 0.2) 100%); + border-bottom: 1px solid #6888c2; +} + diff --git a/src/styles/themes/wnamp-component-level-overrides.css b/src/styles/themes/wnamp-component-level-overrides.css new file mode 100644 index 00000000..e1ac4b74 --- /dev/null +++ b/src/styles/themes/wnamp-component-level-overrides.css @@ -0,0 +1,54 @@ +/* ─── wnamp — component-level overrides ──────────────────────────────── */ + +/* Column resize grip — was surface1 on bg-card = 1.19:1 (invisible) */ +[data-theme='wnamp'] .col-resize-handle::after { + background: var(--ctp-overlay1); /* #8a8a96 → 3.4:1 on bg-card */ + width: 2px; +} + +/* Focus ring — keyboard navigation, accent gold for visibility */ +[data-theme='wnamp'] *:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; +} + +/* Scrollbar thumb — explicit contrast */ +[data-theme='wnamp'] ::-webkit-scrollbar-thumb { + background: var(--ctp-overlay0); +} +[data-theme='wnamp'] *:hover::-webkit-scrollbar-thumb, +[data-theme='wnamp'] .is-scrolling::-webkit-scrollbar-thumb { + background: var(--ctp-overlay2); +} + +/* ── Classic Winamp: LCD display + bevel buttons ── */ +[data-theme='wnamp'] .connection-type { + color: var(--text-primary); +} + +[data-theme='wnamp'] .connection-server { + color: var(--text-secondary); +} + +[data-theme='wnamp'] .player-track-name { + color: #00ff00; + text-shadow: 0 0 6px rgba(0, 255, 0, 0.65), 0 0 2px rgba(0, 255, 0, 0.4); + font-family: 'Courier New', 'Lucida Console', monospace; + letter-spacing: 0.04em; +} + +[data-theme='wnamp'] .player-track-artist { + color: #00cc00; + font-family: 'Courier New', 'Lucida Console', monospace; + opacity: 0.85; +} + +[data-theme='wnamp'] .btn { + box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4); +} + +[data-theme='wnamp'] .player-btn, +[data-theme='wnamp'] .player-btn-primary { + box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.18), inset -1px -1px 0 rgba(0, 0, 0, 0.55), 0 2px 5px rgba(0, 0, 0, 0.5); +} +