mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 07:15:47 +00:00
Frank Stellmacher
45a6a18849
theme.css (16138 LOC) → 122 per-section files in src/styles/themes/ +
an index.css that imports them in original cascade order.
Concatenating all files via index.css reproduces the original byte stream
(+1 trailing newline, cosmetic).
Each top-level section header in theme.css (matching /^\/\* ─{3,}/)
becomes its own file, slugged from the header text (or the [data-theme]
selector found in the body when the header was a banner). Pure-separator
headers fold into the previous section so they don't create empty files.
Generated via /tmp/split-theme-css.mjs.
628 lines
19 KiB
CSS
628 lines
19 KiB
CSS
/* ─── 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;
|
|
}
|
|
|