itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(themes): community Theme Store + semantic-token refactor (#1009)

Browse Source 
* feat(themes): add semantic tokens for the theme-store contract (B0 P1)

Additive: define --highlight, --accent-2, --bg-deep, --bg-elevated and
--text-on-accent on the :root base as --ctp-* mappings. They resolve
per-theme automatically and nothing consumes them yet (zero behaviour
change) — groundwork for replacing direct --ctp-* use in components.

* refactor(themes): components consume semantic tokens, not --ctp-* (B0 P2)

Replace every direct --ctp-* reference in component/layout/track CSS and
TSX inline styles with the readable semantic token (--bg-app, --accent,
--highlight, --text-on-accent, …). --ctp-* now survives only as the
Catppuccin palette layer the base maps from, and as the deliberate
categorical rainbow in Composers/Genres/artistsHelpers (left untouched).

This is the readable contract surface for the community theme store.
Divergences (theme set a semantic var != its --ctp- source) are
corrections — the element now uses the theme's real semantic colour.

* feat(themes): add player-bar title/artist color tokens

New optional --player-title / --player-artist, defaulting to --text-primary / --text-secondary so nothing changes unless a theme overrides them. Lets a theme give the now-playing readout its own colour as a plain token.

* refactor(themes): token-only theme library (flatten, whitelist, one file per theme)

Turn every built-in theme into a single self-contained [data-theme] var block of semantic whitelist tokens (plus the internal --ctp-* palette layer):

- Flatten all themes: drop structural override rules, @keyframes, and global-token overrides (radius / shadow-elevation / transition / spacing / font / focus-ring). Signature player-bar readout colours are preserved via the new --player-title / --player-artist tokens.

- Normalize the var blocks to the semantic whitelist: drop the alternate token vocabulary (nav-active / scrollbar / bg-input / success / border-default / ...); rename --success -> --positive and --border-default -> --border where no whitelist equivalent was set. Migrate the few components that read those tokens to the whitelist equivalents.

- Split multi-theme files so each theme ships as its own file, making the built-in set 1:1 with the per-theme store packaging.

Kept as-is (built-in, not flattened): the two colour-blind-safe accessibility themes, plus the two curated core skins.

* chore(themes): remove seven themes retired after the token refactor

These themes leaned on heavy structural overrides and were dropped rather than flattened. Full removal each: the CSS file(s), the index.css import, the Theme type union, and the ThemePicker entry.

* feat(themes): granular tokens — track lists

Wire track rows to per-region tokens: row hover (--row-hover), the now-playing
row + indicator (--row-playing-bg / --row-playing-text), track title/artist/
number/duration text, column-header text, row dividers, and the resize-handle
active colour. Covers the desktop tracklist, the shared song-row (Tracks hub /
search), and the mobile tracklist. Drop a baked border fallback. Visual no-op.

* feat(themes): granular tokens — cards

Wire album and artist cards to per-region tokens (--card-hover-border,
--card-title, --card-subtitle, --card-placeholder-bg). Visual no-op.

* fix(themes): drop undefined/baked colour aliases

Replace the undefined --bg-surface (resolved to nothing — broken placeholder
backgrounds and filter input) with --card-placeholder-bg / --input-bg, and the
baked-hex aliases --color-error / --color-warning with --danger / --warning so
themes can actually recolour them.

* feat(themes): Spectrum demo theme + trim unused cascade tokens

Add a loud built-in demo theme that gives each region its own hue (sidebar
green, player pink, lists cyan, cards gold, menus red, controls blue) so the
per-region granularity is obvious when you switch to it. Drop two unused
cascade tokens (--sidebar-text-active, --row-active-bg) and the unused
on-media block (those media surfaces stay static by design).

* style(themes): make Spectrum demo brutally loud

Full-saturation neon per region (toxic green sidebar, magenta player, cyan
lists, acid-yellow cards, blood-red menus, electric-blue controls, purple
scrollbar) so the per-region separation is unmistakable. The earlier soft
tints were too subtle to read.

* feat(themes): name the granular demo theme Braindead

* feat(themes): granular per-region tokens — cascade layer + sidebar

Add an optional per-region token layer (semantic-cascade.css) so a theme can
recolour individual regions — sidebar hover, player controls, list rows,
menus, inputs, on-media surfaces — independently of the global tokens. Every
token defaults to its base token (or a media-safe literal), so this is a
visual no-op until a theme overrides one; it only adds control points.

Wire the sidebar region as the first consumer and drop the baked grey
fallbacks (--bg-tertiary, etc.) that no theme could reach.

* feat(themes): granular tokens — controls, menus, scrollbar

Wire inputs, buttons, sliders, the custom-select, context menus, submenus and
modals to per-region tokens, and tokenise the scrollbar. Complete B0 by
dropping the last direct --ctp-* references in the input/button/progress/
scrollbar utility CSS.

Fix three undefined-token bugs that fell back to nothing (so no theme could
reach them): --surface-2 (context-menu hover had no highlight), --bg-surface
(submenu create-input had no background), and the baked grey fallbacks in the
custom-select. Every other new token defaults to today's value — a visual
no-op that only adds override points.

* feat(themes): granular tokens — player bar

Wire the desktop player bar's transport controls, time toggle, and overflow
menu to per-region tokens (--player-control, --player-time-toggle-*, etc.).
Fix the undefined --surface-hover/--surface-active grey fallbacks on the time
toggle. Visual no-op; defaults match today's values.

* chore(themes): remove empty theme stub files

Six theme CSS files were reduced to comment-only stubs by the flatten
sweep but their files and @import lines remained. Five are empty
structural companions of now-flattened themes (morpheus, p-dvd,
aero-glass, luna-teal) and two are orphans of cut themes
(order-of-the-phoenix, pandora). Removed the files and their imports.

* feat(themes): runtime injection foundation for the theme store

Plumbing for installed community themes ahead of the in-app store UI,
nothing user-visible yet:

- installedThemesStore: persisted (localStorage) record of installed
  community themes incl. their CSS text, so an active community theme is
  available synchronously at startup (no flash, fully offline).
- themeInjection: reconcile <head> <style data-installed-theme> elements
  with the store; lightweight defense-in-depth sanitize on top of CI.
- themeRegistry: jsDelivr registry client with a 12h localStorage cache
  and stale-on-error fallback.
- App: inject installed themes before applying data-theme, in both webviews.
- themeStore: widen the Theme type to accept dynamic installed ids.

* feat(themes): dedicated Themes settings tab

Move theme selection and the day/night scheduler out of Appearance into
a new dedicated Themes tab — the future home of the community Theme Store.
Appearance keeps grid columns, visual options, UI scale, font and seekbar.

- ThemesTab: theme picker + scheduler (relocated verbatim).
- AppearanceTab: drop the two relocated sections + now-unused imports.
- Register the tab in settingsTabs (Tab union, resolveTab, search index)
  and Settings (tab bar, render, label map).
- i18n: settings.tabThemes in all 9 locales.

* feat(themes): community Theme Store browse + install

Add the Theme Store section to the Themes tab:

- Fetch the jsDelivr registry (12h cache, stale-on-error fallback).
- Search by name/author/description + filter by light/dark + refresh.
- Per-row CDN thumbnail, name, author, description and actions:
  Install / Apply / Update / Uninstall. Installing fetches the CSS,
  persists it (localStorage) and the runtime injection applies it;
  uninstalling the active theme falls back to the matching core.
- Rating slot left reserved (deferred).
- i18n: themeStore* keys in all 9 locales.

* feat(themes): slim bundle to fixed cores + flat Themes tab

Remove the 86 store palettes (incl. braindead) from the app bundle — the
CSS files, their index.css imports, the Theme union and the picker data —
leaving only the six fixed cores (Catppuccin Mocha/Latte, Kanagawa Wave,
Stark HUD, Vision Dark/Navy). Everything else installs from the store.

Themes tab is rebuilt flat (no collapsible accordions):
- "Your Themes": one card grid of the fixed cores + installed community
  themes; click to apply, uninstall on community ones (active theme falls
  back to the matching core). Catppuccin prefix on Mocha/Latte; a CVD-safe
  pill on the colour-blind-safe Vision themes.
- Scheduler day/night options include installed themes.
- Theme Store: alphabetical order, thumbnail lightbox, and a submit hint
  above the search linking to the themes repository.
- Nav order: Servers, Library, Audio, Themes, Appearance, Lyrics, …
- ThemePicker accordion removed; fixed-theme data moved to fixedThemes.ts.
- i18n for all new strings across 9 locales.

* feat(themes): reset removed-from-bundle themes to a bundled fallback

After slimming the bundle to the six fixed core themes, a profile upgraded
from an older build may have an active or scheduler theme that is now
store-only and not installed — it has no [data-theme] block and would render
as unstyled :root. Reset any theme/themeDay/themeNight that is neither bundled
nor installed to a bundled fallback: Mocha for the main + night slots, Latte
for the day slot. Runs synchronously in runPreReactBootstrap, rewriting the
persisted selection in localStorage before React mounts (no flash; Zustand
rehydrates after first paint). No auto-install and no network — the fallback
is always a bundled theme, so it works offline.

* feat(themes): floating back-to-top button on the Themes tab

The Themes tab can get long (theme grid + scheduler + full store list), so
add a floating back-to-top affordance that appears once the page is scrolled
and smooth-scrolls to the top. It is portalled into the route host and
positioned absolute against it — the main scroll viewport sets contain: paint,
which would otherwise make position: fixed resolve against the scrolling box
and drift with the content. Reusable component (scroll viewport id + threshold
props); i18n common.backToTop added in all nine locales.

* feat(themes): accessibility + state polish for the Theme Store

- Reuse the shared CoverLightbox for the thumbnail preview instead of a
  second inline dialog — gains a visible close button and a focus-managed,
  portalled dialog, and drops duplicated markup.
- Theme cards expose aria-pressed so assistive tech announces the selected
  theme, not just the visual check.
- Transient store messages get live-region roles (loading/empty/install
  failure = status, fetch error = alert).
- Thumbnails degrade gracefully when offline/missing (hide the broken-image
  glyph; the thumbnail button no longer stretches with the row, so its
  background can't show as letterbox bars).

* feat(themes): larger store-row thumbnails (120x75 -> 200x125)

The list previews were too small to make a theme out; bump the display size
(same 1.6 aspect). Thumbnails are now served at 720x450, so the larger
display stays crisp.

* fix(themes): bust thumbnail cache on registry change

jsDelivr serves theme thumbnails with a 7-day max-age, so when a thumbnail
is updated the webview keeps showing its cached old image (the path is
unchanged). Append the registry's generatedAt as a cache-busting query to
the thumbnail URLs (list + lightbox); it changes on every themes push, so a
registry refresh makes the webview re-fetch and reflect the current CDN
image instead of a stale one.

* docs(themes): changelog + credits for the Theme Store

Add the 1.48.0 "Themes — community Theme Store" changelog entry (PR #1009)
and the matching line in the Psychotoxical credits.

* fix(themes): address PR review (uninstall hygiene, validation, polish)

Uninstall/scheduler & validation:
- uninstallTheme() repairs every selection slot (active + day + night), not
  just the manual one, and is shared by both uninstall buttons (dedup).
- Validate theme CSS at install time and skip persisting CSS that won't inject
  (no more "installed/active but renders nothing" with no feedback).
- Harden the runtime validator: exactly one rule, scoped exactly to the
  theme's [data-theme='<id>'] selector (no unscoped/foreign selectors), no
  at-rules, url() only data:, no expression()/javascript:, size-capped.

Tokens & polish:
- Fix three dangling undefined tokens (--surface-2 x2, --bg-surface).
- Finish the warning/success token sweep (--warning / --positive, themeable).
- Apply the active theme synchronously before React mounts (no first-frame
  flash) and inject installed themes up front.
- One-time, dismissible notice when the slim-bundle migration reset a theme.
- Update badge uses semver, not string inequality.
- Offline/stale indicator in the store; cross-window theme sync; drop the now
  dead REMOVED_THEME_REMAP and Card.mode field.

Tests: themeInjection (validator + sync), themeRegistry (cache/force/stale/
malformed), uninstallTheme (slot repair), migration notice. i18n in all nine
locales. Full suite green (1755 tests).

* test(bootstrap): cover startup theme apply + cross-window sync

The review fixes added applyThemeAtStartup / installCrossWindowThemeSync to
bootstrap.ts (a hot-path file) without tests, dropping its coverage to 68.3%
and failing the frontend hot-path coverage gate (>=70%). Add unit tests for
both (and the no-op / malformed-storage paths); bootstrap.ts is back to ~98%.
This commit is contained in:
Psychotoxical
2026-06-07 02:47:33 +02:00
committed by GitHub
parent 03a1ba9582
commit f9df918c72
221 changed files with 2470 additions and 15759 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components/album-card.css
+2 -2
View File
@@ -11,14 +11,14 @@
}
.album-card:hover {
box-shadow: inset 0 0 0 1px var(--border), var(--shadow-md);
box-shadow: inset 0 0 0 1px var(--card-hover-border), var(--shadow-md);
}
.album-card-cover {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--bg-hover);
background: var(--card-placeholder-bg);
contain: paint;
isolation: isolate;
transform: translateZ(0);
src/styles/components/album-row-container.css
+5 -5
View File
@@ -177,7 +177,7 @@
}
.album-card-more:hover {
background: var(--ctp-surface0);
background: var(--bg-card);
color: var(--text-primary);
border-color: var(--accent);
box-shadow: var(--shadow-sm);
@@ -199,7 +199,7 @@
.album-card-offline-badge {
flex-shrink: 0;
background: color-mix(in srgb, var(--accent) 85%, transparent);
color: var(--ctp-crust);
color: var(--text-on-accent);
border-radius: var(--radius-sm);
padding: 3px 4px;
display: flex;
@@ -210,7 +210,7 @@
.album-card-new-badge {
flex-shrink: 0;
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
border-radius: var(--radius-sm);
padding: 3px 6px;
@@ -243,7 +243,7 @@
.album-card-details-btn {
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
border: none;
padding: 8px 20px;
border-radius: var(--radius-full);
@@ -386,6 +386,6 @@
.album-card-select-check--on {
background: var(--accent);
border-color: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
}
src/styles/components/album-tracklist-mobile.css
+6 -6
View File
@@ -9,7 +9,7 @@
justify-content: space-between;
gap: var(--space-3);
padding: 12px 0;
border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
border-bottom: 1px solid var(--row-divider);
cursor: pointer;
transition: background var(--transition-fast);
border-radius: 6px;
@@ -20,11 +20,11 @@
}
.tracklist-mobile-row.active .tracklist-mobile-title {
color: var(--accent);
color: var(--row-playing-text);
}
.tracklist-mobile-row.context-active {
background: var(--bg-hover);
background: var(--row-hover);
}
.tracklist-mobile-main {
@@ -37,7 +37,7 @@
.tracklist-mobile-num {
font-size: 12px;
color: var(--text-muted);
color: var(--row-text-muted);
min-width: 18px;
text-align: right;
flex-shrink: 0;
@@ -54,7 +54,7 @@
.tracklist-mobile-title {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
color: var(--row-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -62,7 +62,7 @@
.tracklist-mobile-duration {
font-size: 13px;
color: var(--text-muted);
color: var(--row-text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
src/styles/components/alphabet-filter-bar.css
+1 -1
View File
@@ -19,5 +19,5 @@
transition: color 0.12s, background 0.12s;
}
.alphabet-filter-btn:hover { background: var(--bg-hover); }
.alphabet-filter-btn.active { background: var(--accent); color: var(--ctp-crust); }
.alphabet-filter-btn.active { background: var(--accent); color: var(--text-on-accent); }
src/styles/components/artist-card-grid-view.css
+4 -4
View File
@@ -13,14 +13,14 @@
.artist-card:hover {
box-shadow: var(--shadow-md);
border-color: var(--border);
border-color: var(--card-hover-border);
}
.artist-card-avatar {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--bg-hover);
background: var(--card-placeholder-bg);
display: flex;
align-items: center;
justify-content: center;
@@ -78,7 +78,7 @@
.artist-card-name {
font-weight: 600;
font-size: 13px;
color: var(--text-primary);
color: var(--card-title);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -86,6 +86,6 @@
.artist-card-meta {
font-size: 12px;
color: var(--text-secondary);
color: var(--card-subtitle);
}
src/styles/components/artist-card-selection-checkbox.css
+1 -1
View File
@@ -22,7 +22,7 @@
.artist-card-select-check--on {
background: var(--accent);
border-color: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
}
.artist-card--selectable {
src/styles/components/artists-page-alphabet-bar.css
+2 -2
View File
@@ -10,13 +10,13 @@
}
.artists-alpha-btn:not(.artists-alpha-btn--active):hover {
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.artists-alpha-btn--active {
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
border-color: var(--accent);
}
.alphabet-filter-btn.empty { opacity: 0.28; pointer-events: none; }
src/styles/components/back-to-top.css
+45
View File
@@ -0,0 +1,45 @@
/* ─── Back to top button ─── */
@keyframes back-to-top-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Pinned to the bottom-right of the content area (its portal host
`.app-shell-route-host` spans the region between sidebar/queue and above the
player bar). Absolute against that host so it never drifts with the scrolling
content — the scroll viewport's `contain: paint` rules out `position: fixed`
here. */
.back-to-top-btn {
position: absolute;
bottom: 16px;
right: 20px;
z-index: 50;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
background: var(--bg-elevated);
color: var(--accent);
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
animation: back-to-top-in 0.25s ease both;
transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.back-to-top-btn:hover {
background: var(--bg-hover);
border-color: var(--accent);
transform: translateY(-2px);
}
.back-to-top-btn:active {
transform: translateY(0);
}
.back-to-top-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
src/styles/components/context-menu-submenu.css
+5 -5
View File
@@ -5,14 +5,14 @@
.context-menu-item--submenu.active,
.context-menu-item--submenu:hover {
background: var(--surface-2);
color: var(--accent);
background: var(--menu-item-hover);
color: var(--menu-item-active-text);
}
.context-submenu {
position: absolute;
top: -4px;
background: var(--bg-card);
background: var(--menu-bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-1) 0;
@@ -45,7 +45,7 @@
.context-submenu-input {
flex: 1;
min-width: 0;
background: var(--bg-surface);
background: var(--input-bg);
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
color: var(--text-primary);
@@ -63,7 +63,7 @@
background: var(--accent);
border: none;
border-radius: var(--radius-sm);
color: var(--ctp-crust);
color: var(--text-on-accent);
padding: 4px 6px;
cursor: pointer;
display: flex;
src/styles/components/context-menu.css
+7 -7
View File
@@ -2,7 +2,7 @@
.context-menu {
position: fixed;
z-index: 10000;
background: var(--bg-card);
background: var(--menu-bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-1) 0;
@@ -24,14 +24,14 @@
}
.context-menu-item:hover {
background: var(--surface-2);
color: var(--accent);
background: var(--menu-item-hover);
color: var(--menu-item-active-text);
}
.context-menu-item.context-menu-keyboard-active,
.context-menu-rating-row.context-menu-keyboard-active {
background: var(--surface-2);
color: var(--accent);
background: var(--menu-item-hover);
color: var(--menu-item-active-text);
}
.context-menu-item.context-menu-keyboard-active {
@@ -39,7 +39,7 @@
}
.context-menu-rating-row.context-menu-keyboard-active {
background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
background: color-mix(in srgb, var(--accent) 18%, var(--menu-item-hover));
box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
@@ -50,7 +50,7 @@
.context-menu-divider {
height: 1px;
background: var(--border-subtle);
background: var(--menu-divider);
margin: var(--space-1) 0;
}
src/styles/components/cover-lightbox.css
+3 -3
View File
@@ -201,7 +201,7 @@
.album-detail-badge {
margin-bottom: 0.5rem;
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
/* Konsistenz mit `.album-card-new-badge`: eckig, nicht pill. */
border-radius: var(--radius-sm);
}
@@ -281,14 +281,14 @@
.download-progress-bar {
flex: 1;
height: 4px;
background: var(--surface-2);
background: var(--bg-elevated, var(--bg-card));
border-radius: 2px;
overflow: hidden;
}
.download-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--ctp-mauve), var(--ctp-blue));
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: 2px;
transition: width 0.2s ease;
}
src/styles/components/custom-select.css
+9 -9
View File
@@ -6,8 +6,8 @@
gap: 0.5rem;
width: 100%;
padding: 0.5rem 0.75rem;
background: var(--bg-input);
border: 1px solid var(--border-dropdown, var(--border));
background: var(--bg-card);
border: 1px solid var(--border-dropdown);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 0.875rem;
@@ -17,7 +17,7 @@
}
.custom-select-trigger:hover {
border-color: var(--accent);
background: var(--bg-hover);
background: var(--button-hover);
}
.custom-select-label {
flex: 1;
@@ -34,10 +34,10 @@
transform: rotate(180deg);
}
.custom-select-dropdown {
background: var(--bg-card);
border: 1px solid var(--border-dropdown, var(--border));
background: var(--menu-bg);
border: 1px solid var(--border-dropdown);
border-radius: var(--radius-md);
box-shadow: 0 8px 32px var(--shadow-dropdown, rgba(0, 0, 0, 0.4));
box-shadow: 0 8px 32px var(--shadow-dropdown);
overflow-y: auto;
overscroll-behavior: contain;
}
@@ -49,10 +49,10 @@
transition: background 0.1s;
}
.custom-select-option:hover {
background: var(--bg-hover);
background: var(--menu-item-hover);
}
.custom-select-option.selected {
color: var(--accent);
color: var(--menu-item-active-text);
font-weight: 600;
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
@@ -67,7 +67,7 @@
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
border-top: 1px solid var(--border-subtle);
border-top: 1px solid var(--menu-divider);
margin-top: 0.25rem;
}
.custom-select-group-label:first-child {
src/styles/components/device-sync.css
+11 -11
View File
@@ -177,7 +177,7 @@
overflow: hidden;
text-overflow: ellipsis;
padding: 5px 8px;
background: var(--bg-input);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
@@ -262,14 +262,14 @@
font-size: 0.78rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-input);
background: var(--bg-card);
color: var(--text-secondary);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.device-sync-template-preset-btn:hover {
background: var(--ctp-surface0);
background: var(--bg-card);
color: var(--text-primary);
}
@@ -331,7 +331,7 @@
font-family: monospace;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--ctp-surface0);
background: var(--bg-card);
color: var(--text-secondary);
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
@@ -339,7 +339,7 @@
}
.device-sync-template-token:hover {
background: color-mix(in srgb, var(--accent) 15%, var(--ctp-surface0));
background: color-mix(in srgb, var(--accent) 15%, var(--bg-card));
border-color: var(--accent);
color: var(--accent);
}
@@ -531,8 +531,8 @@
}
.device-sync-badge.synced {
background: color-mix(in srgb, var(--success, #4ade80) 15%, transparent);
color: var(--success, #4ade80);
background: color-mix(in srgb, var(--positive, #4ade80) 15%, transparent);
color: var(--positive, #4ade80);
}
.device-sync-badge.pending {
@@ -573,7 +573,7 @@
flex-shrink: 0;
}
.device-sync-status-icon.synced { color: var(--success, #4ade80); }
.device-sync-status-icon.synced { color: var(--positive, #4ade80); }
.device-sync-status-icon.pending { color: var(--warning, #f59e0b); }
.device-sync-status-icon.deletion { color: var(--danger, #f38ba8); }
@@ -659,12 +659,12 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
background: color-mix(in srgb, var(--success, #4ade80) 4%, transparent);
background: color-mix(in srgb, var(--positive, #4ade80) 4%, transparent);
}
.device-sync-bg-progress-bar-wrap {
height: 3px;
background: var(--bg-input);
background: var(--bg-card);
border-radius: 2px;
overflow: hidden;
}
@@ -685,7 +685,7 @@
}
.device-sync-stat-error { color: var(--danger); display: flex; align-items: center; gap: 3px; }
.color-success { color: var(--success, #4ade80); }
.color-success { color: var(--positive, #4ade80); }
/* ── Browser panel ── */
src/styles/components/download-folder-modal.css
+1 -1
View File
@@ -6,7 +6,7 @@
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-input, var(--bg-sidebar));
background: var(--bg-card, var(--bg-sidebar));
margin-bottom: 12px;
}
src/styles/components/filter-quick-clear.css
+1 -1
View File
@@ -17,5 +17,5 @@
}
.filter-quick-clear--on-active-chip:hover {
background: color-mix(in srgb, var(--ctp-crust) 22%, transparent);
background: color-mix(in srgb, var(--bg-deep) 22%, transparent);
}
src/styles/components/genre-filter-bar.css
+2 -2
View File
@@ -9,7 +9,7 @@
margin-left: 0.35rem;
border-radius: 9px;
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
@@ -99,7 +99,7 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--ctp-crust);
color: var(--text-on-accent);
background: transparent;
}
src/styles/components/help-page.css
+2 -2
View File
@@ -15,8 +15,8 @@
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--ctp-base);
border: 1px solid var(--ctp-overlay0);
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: var(--radius-md);
width: 280px;
max-width: 100%;
src/styles/components/hero.css
+2 -2
View File
@@ -10,7 +10,7 @@
.hero-placeholder {
width: 100%;
height: 360px;
background: linear-gradient(135deg, var(--ctp-surface0), var(--ctp-mantle));
background: linear-gradient(135deg, var(--bg-card), var(--bg-sidebar));
flex-shrink: 0;
}
@@ -164,7 +164,7 @@
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
src/styles/components/index.css
+1
View File
@@ -89,3 +89,4 @@
@import './_banner.css';
@import './np-dash.css';
@import './orbit-session-top-strip.css';
@import './back-to-top.css';
src/styles/components/live-search.css
+3 -3
View File
@@ -93,8 +93,8 @@
align-items: center;
flex: 1;
min-width: 0;
background: var(--ctp-base);
border: 1px solid var(--ctp-overlay0);
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
@@ -190,7 +190,7 @@
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--ctp-surface0);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
src/styles/components/login-page.css
+2 -2
View File
@@ -20,7 +20,7 @@
.login-card {
width: 100%;
max-width: 520px;
background: var(--ctp-mantle);
background: var(--bg-sidebar);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: var(--space-8);
@@ -67,7 +67,7 @@
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
background: linear-gradient(135deg, var(--ctp-mauve), var(--ctp-blue));
background: linear-gradient(135deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
src/styles/components/mini-player-window.css
+8 -8
View File
@@ -79,7 +79,7 @@
}
.mini-player__titlebar-btn--close:hover {
background: var(--danger);
color: var(--ctp-base);
color: var(--bg-app);
}
.mini-player {
@@ -213,7 +213,7 @@
position: relative;
width: 5px;
height: 110px;
background: var(--ctp-surface1);
background: var(--bg-hover);
border-radius: 3px;
overflow: hidden;
cursor: pointer;
@@ -271,7 +271,7 @@
width: 36px;
height: 36px;
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
}
.mini-player__btn--primary:hover {
background: var(--accent);
@@ -293,7 +293,7 @@
flex: 1;
height: 3px;
border-radius: 2px;
background: var(--ctp-surface1);
background: var(--bg-hover);
overflow: hidden;
}
.mini-player__progress-fill {
@@ -416,11 +416,11 @@
cursor: default;
}
.mini-player__tool--active {
color: var(--ctp-base);
color: var(--bg-app);
background: var(--accent);
}
.mini-player__tool--active:hover:not(:disabled) {
color: var(--ctp-base);
color: var(--bg-app);
background: var(--accent);
}
@@ -553,7 +553,7 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
.np-info-section {
display: block;
padding: 18px 0;
border-bottom: 1px solid color-mix(in srgb, var(--border-subtle, var(--ctp-surface0)) 70%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--border-subtle, var(--bg-card)) 70%, transparent);
}
.np-info-section > * + * { margin-top: 12px; }
.np-info-section:last-child {
@@ -819,7 +819,7 @@ html[data-perf-disable-home-artwork-clip="true"] .home-lite-artwork .song-card-c
background: var(--accent);
border: none;
border-radius: 999px;
color: var(--ctp-base, #1e1e2e);
color: var(--bg-app, #1e1e2e);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
src/styles/components/modal.css
+17 -17
View File
@@ -2,7 +2,7 @@
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(17, 17, 27, 0.85);
background: var(--modal-scrim);
backdrop-filter: blur(8px);
display: flex;
align-items: flex-start;
@@ -21,7 +21,7 @@
}
.modal-content {
background: var(--ctp-surface0);
background: var(--modal-bg);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
@@ -99,7 +99,7 @@
margin: 12px 0 10px;
padding: 4px;
border-radius: 12px;
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 88%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 88%, transparent);
border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
}
@@ -122,12 +122,12 @@
.sidebar-perf-modal__tab:hover {
color: var(--text-primary);
background: color-mix(in srgb, var(--bg-hover, var(--ctp-surface1)) 70%, transparent);
background: color-mix(in srgb, var(--bg-hover, var(--bg-hover)) 70%, transparent);
}
.sidebar-perf-modal__tab--active {
color: var(--text-primary);
background: color-mix(in srgb, var(--accent) 16%, var(--bg-card, var(--ctp-base)));
background: color-mix(in srgb, var(--accent) 16%, var(--bg-card, var(--bg-app)));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
@@ -287,7 +287,7 @@
padding: 10px 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 82%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 82%, transparent);
}
.perf-live-poll__title {
@@ -365,7 +365,7 @@
margin-bottom: 10px;
border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 82%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 82%, transparent);
overflow: hidden;
}
@@ -417,7 +417,7 @@
padding: 10px 10px 9px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent);
background: color-mix(in srgb, var(--ctp-mantle, var(--ctp-base)) 72%, transparent);
background: color-mix(in srgb, var(--bg-sidebar, var(--bg-app)) 72%, transparent);
min-height: 84px;
display: flex;
flex-direction: column;
@@ -540,7 +540,7 @@
.perf-tree-group {
border: 1px solid color-mix(in srgb, var(--text-muted) 16%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 78%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 78%, transparent);
overflow: hidden;
}
@@ -634,7 +634,7 @@
padding: 10px 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 82%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 82%, transparent);
}
.perf-overlay-mode__title {
@@ -656,7 +656,7 @@
padding: 6px 8px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 70%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 70%, transparent);
color: var(--text-muted);
font-size: 11px;
line-height: 1.2;
@@ -670,7 +670,7 @@
.perf-overlay-mode__segment--active {
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
background: color-mix(in srgb, var(--accent) 14%, var(--bg-card, var(--ctp-base)));
background: color-mix(in srgb, var(--accent) 14%, var(--bg-card, var(--bg-app)));
color: var(--text-primary);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
@@ -687,7 +687,7 @@
padding: 10px 12px;
border-radius: 12px;
border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 82%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 82%, transparent);
}
.perf-overlay-appearance__title {
@@ -734,7 +734,7 @@
height: 36px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
background: color-mix(in srgb, var(--ctp-mantle, var(--ctp-base)) 70%, transparent);
background: color-mix(in srgb, var(--bg-sidebar, var(--bg-app)) 70%, transparent);
cursor: pointer;
padding: 0;
}
@@ -815,14 +815,14 @@
border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
border-radius: 10px;
padding: 8px 10px 10px;
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 78%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 78%, transparent);
}
.sidebar-perf-modal__phase--nested {
margin-left: 10px;
margin-right: 2px;
padding-top: 6px;
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 68%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 68%, transparent);
}
.sidebar-perf-modal__phase-title {
@@ -843,7 +843,7 @@
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--text-muted) 22%, transparent);
border-radius: 10px;
background: color-mix(in srgb, var(--bg-card, var(--ctp-base)) 80%, transparent);
background: color-mix(in srgb, var(--bg-card, var(--bg-app)) 80%, transparent);
}
.sidebar-perf-modal__cpu-title {
src/styles/components/most-played-page.css
+2 -2
View File
@@ -119,7 +119,7 @@
}
.mp-artist-avatar--placeholder {
background: var(--bg-surface);
background: var(--card-placeholder-bg);
}
.mp-artist-info {
@@ -226,7 +226,7 @@
}
.mp-album-cover--placeholder {
background: var(--bg-surface);
background: var(--card-placeholder-bg);
}
.mp-album-meta {
src/styles/components/now-playing-page-2.css
+3 -3
View File
@@ -8,7 +8,7 @@
container-type: inline-size;
background:
radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 10%, var(--bg-main)) 0%, transparent 60%),
radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--ctp-blue) 8%, var(--bg-main)) 0%, transparent 60%),
radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--accent-2) 8%, var(--bg-main)) 0%, transparent 60%),
var(--bg-main);
}
@@ -209,7 +209,7 @@
max-height: 300px;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--ctp-teal) transparent;
scrollbar-color: var(--accent-2) transparent;
}
.np-bio-text.expanded::-webkit-scrollbar {
@@ -221,7 +221,7 @@
}
.np-bio-text.expanded::-webkit-scrollbar-thumb {
background: var(--ctp-teal);
background: var(--accent-2);
border-radius: 2px;
}
src/styles/components/np-dash.css
+4 -4
View File
@@ -73,8 +73,8 @@
}
.np-badge-hires {
background: color-mix(in srgb, var(--ctp-yellow) 30%, transparent);
color: var(--ctp-yellow);
background: color-mix(in srgb, var(--highlight) 30%, transparent);
color: var(--highlight);
font-weight: 700;
letter-spacing: 0.05em;
}
@@ -200,7 +200,7 @@
}
.np-dash-toolbar-badge {
background: var(--accent);
color: var(--ctp-base, #1e1e2e);
color: var(--bg-app, #1e1e2e);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
@@ -214,7 +214,7 @@
top: calc(100% + 4px);
right: 0;
min-width: 220px;
background: var(--ctp-base, #1e1e2e);
background: var(--bg-app, #1e1e2e);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius-md);
padding: 6px;
src/styles/components/offline-library.css
+2 -2
View File
@@ -190,7 +190,7 @@
}
.offline-library-delete:hover {
color: var(--color-error, #e05050);
color: var(--danger);
}
.offline-library-delete--spacer {
@@ -226,7 +226,7 @@
.offline-filter-tab.active {
background: var(--accent);
color: var(--ctp-base);
color: var(--bg-app);
border-color: var(--accent);
font-weight: 600;
}
src/styles/components/orbit-session-top-strip.css
+47 -47
View File
@@ -187,8 +187,8 @@
transition: color 150ms ease, background 150ms ease, transform 180ms ease;
}
.orbit-bar__exit:hover {
color: var(--ctp-red, #f38ba8);
background: color-mix(in srgb, var(--ctp-red, #f38ba8) 12%, transparent);
color: var(--danger, #f38ba8);
background: color-mix(in srgb, var(--danger, #f38ba8) 12%, transparent);
transform: rotate(90deg);
}
@@ -217,7 +217,7 @@
min-width: 280px;
max-width: 380px;
padding: 6px;
background: var(--ctp-base, #1e1e2e);
background: var(--bg-app, #1e1e2e);
border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.1));
border-radius: var(--radius-md);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
@@ -228,7 +228,7 @@
min-width: 320px;
max-width: 380px;
padding: 12px 14px 14px;
background: var(--ctp-base, #1e1e2e);
background: var(--bg-app, #1e1e2e);
border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.1));
border-radius: var(--radius-md);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
@@ -356,19 +356,19 @@
transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.orbit-participants-pop__kick:hover {
color: var(--ctp-yellow, #f9e2af);
background: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 12%, transparent);
border-color: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 35%, transparent);
color: var(--highlight, #f9e2af);
background: color-mix(in srgb, var(--highlight, #f9e2af) 12%, transparent);
border-color: color-mix(in srgb, var(--highlight, #f9e2af) 35%, transparent);
}
.orbit-participants-pop__kick--ban:hover {
color: var(--ctp-red, #f38ba8);
background: color-mix(in srgb, var(--ctp-red, #f38ba8) 12%, transparent);
border-color: color-mix(in srgb, var(--ctp-red, #f38ba8) 35%, transparent);
color: var(--danger, #f38ba8);
background: color-mix(in srgb, var(--danger, #f38ba8) 12%, transparent);
border-color: color-mix(in srgb, var(--danger, #f38ba8) 35%, transparent);
}
.orbit-participants-pop__kick.is-active {
color: var(--ctp-peach, #fab387);
background: color-mix(in srgb, var(--ctp-peach, #fab387) 16%, transparent);
border-color: color-mix(in srgb, var(--ctp-peach, #fab387) 45%, transparent);
color: var(--accent-2, #fab387);
background: color-mix(in srgb, var(--accent-2, #fab387) 16%, transparent);
border-color: color-mix(in srgb, var(--accent-2, #fab387) 45%, transparent);
}
/* ── Exit modal ────────────────────────────────────────────────────── */
@@ -405,7 +405,7 @@
/* ── Topbar "start Orbit" trigger — same form as Live, accent-tinted ── */
.orbit-start-trigger {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 45%, var(--ctp-surface1));
border-color: color-mix(in srgb, var(--accent) 45%, var(--bg-hover));
transition: color 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 200ms ease;
}
.orbit-start-trigger__spin { transition: transform 260ms ease; }
@@ -520,15 +520,15 @@
gap: 4px;
margin-top: 10px;
padding: 10px 12px;
background: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--ctp-yellow, #f9e2af) 40%, transparent);
background: color-mix(in srgb, var(--highlight, #f9e2af) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--highlight, #f9e2af) 40%, transparent);
border-radius: var(--radius-sm);
font-size: 12px;
line-height: 1.5;
color: var(--text-primary);
}
.orbit-help-modal__warn strong {
color: var(--ctp-yellow, #f9e2af);
color: var(--highlight, #f9e2af);
font-weight: 700;
}
@@ -696,15 +696,15 @@
font-weight: 600;
}
.orbit-start-modal__tip--warn {
background: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 14%, transparent);
border-color: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 45%, transparent);
background: color-mix(in srgb, var(--highlight, #f9e2af) 14%, transparent);
border-color: color-mix(in srgb, var(--highlight, #f9e2af) 45%, transparent);
color: var(--text-primary);
}
.orbit-start-modal__tip--warn svg {
color: var(--ctp-yellow, #f9e2af);
color: var(--highlight, #f9e2af);
}
.orbit-start-modal__tip--warn strong {
color: var(--ctp-yellow, #f9e2af);
color: var(--highlight, #f9e2af);
}
.orbit-start-modal__field {
@@ -810,7 +810,7 @@
flex: 1;
min-width: 0;
padding: 9px 12px;
background: var(--ctp-base);
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
@@ -848,7 +848,7 @@
min-width: 320px;
max-width: 380px;
padding: 14px;
background: var(--ctp-base, #1e1e2e);
background: var(--bg-app, #1e1e2e);
border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.1));
border-radius: var(--radius-md);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
@@ -919,7 +919,7 @@
gap: 4px;
padding: 3px 8px;
font-size: 11px;
background: var(--bg-input);
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-primary);
@@ -927,7 +927,7 @@
transition: background 120ms ease, border-color 120ms ease;
}
.orbit-diag-pop__btn:hover {
background: var(--bg-hover, var(--bg-input));
background: var(--bg-hover, var(--bg-card));
border-color: var(--accent);
}
.orbit-diag-pop__log {
@@ -937,7 +937,7 @@
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 10.5px;
line-height: 1.45;
background: var(--bg-input);
background: var(--bg-card);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
@@ -1121,20 +1121,20 @@
border-style: solid;
}
.orbit-queue-head__presence--online {
color: var(--ctp-green, #a6e3a1);
background: color-mix(in srgb, var(--ctp-green, #a6e3a1) 14%, transparent);
border-color: color-mix(in srgb, var(--ctp-green, #a6e3a1) 40%, transparent);
color: var(--positive, #a6e3a1);
background: color-mix(in srgb, var(--positive, #a6e3a1) 14%, transparent);
border-color: color-mix(in srgb, var(--positive, #a6e3a1) 40%, transparent);
}
.orbit-queue-head__presence--online svg {
color: var(--ctp-green, #a6e3a1);
color: var(--positive, #a6e3a1);
}
.orbit-queue-head__presence--away {
color: var(--ctp-yellow, #f9e2af);
background: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 14%, transparent);
border-color: color-mix(in srgb, var(--ctp-yellow, #f9e2af) 40%, transparent);
color: var(--highlight, #f9e2af);
background: color-mix(in srgb, var(--highlight, #f9e2af) 14%, transparent);
border-color: color-mix(in srgb, var(--highlight, #f9e2af) 40%, transparent);
}
.orbit-queue-head__presence--away svg {
color: var(--ctp-yellow, #f9e2af);
color: var(--highlight, #f9e2af);
}
.orbit-queue-head__meta {
display: flex;
@@ -1173,7 +1173,7 @@
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ctp-crust, #11111b);
color: var(--text-on-accent, #11111b);
background: var(--accent);
border-radius: var(--radius-sm);
}
@@ -1384,9 +1384,9 @@
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.host-approval__btn--approve:hover {
background: color-mix(in srgb, var(--ctp-green, #a6e3a1) 28%, transparent);
border-color: var(--ctp-green, #a6e3a1);
color: var(--ctp-green, #a6e3a1);
background: color-mix(in srgb, var(--positive, #a6e3a1) 28%, transparent);
border-color: var(--positive, #a6e3a1);
color: var(--positive, #a6e3a1);
}
.host-approval__btn--decline:hover {
background: color-mix(in srgb, var(--danger, #f38ba8) 28%, transparent);
@@ -1404,10 +1404,10 @@
padding-bottom: 6px;
}
.orbit-guest-queue__section-head--pending {
color: var(--ctp-yellow, #f9e2af);
color: var(--highlight, #f9e2af);
}
.orbit-guest-queue__section-head--pending svg {
color: var(--ctp-yellow, #f9e2af);
color: var(--highlight, #f9e2af);
}
.orbit-guest-queue__item--pending {
opacity: 0.85;
@@ -1456,9 +1456,9 @@
padding: 8px 10px;
font-size: 12px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--ctp-red, #f38ba8) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--ctp-red, #f38ba8) 35%, transparent);
color: var(--ctp-red, #f38ba8);
background: color-mix(in srgb, var(--danger, #f38ba8) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--danger, #f38ba8) 35%, transparent);
color: var(--danger, #f38ba8);
}
.orbit-start-modal__actions {
@@ -1474,7 +1474,7 @@
gap: 8px;
margin-bottom: 18px;
padding: 10px 12px;
background: var(--ctp-base);
background: var(--bg-app);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-mono, ui-monospace, 'Courier New', monospace);
@@ -1522,7 +1522,7 @@
--fps-overlay-opacity: 0.82;
background: color-mix(
in srgb,
var(--ctp-crust, #111) calc(var(--fps-overlay-opacity) * 100%),
var(--text-on-accent, #111) calc(var(--fps-overlay-opacity) * 100%),
transparent
);
border: 1px solid color-mix(
@@ -1743,7 +1743,7 @@
height: 160px;
border-radius: 6px;
overflow: hidden;
background: var(--bg-input, rgba(0, 0, 0, 0.15));
background: var(--bg-card, rgba(0, 0, 0, 0.15));
}
.because-card-cover {
width: 100%;
@@ -1768,7 +1768,7 @@
.because-card--skeleton .because-card-cover-placeholder {
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--text-primary) 14%, var(--bg-input, rgba(0, 0, 0, 0.15)));
background: color-mix(in srgb, var(--text-primary) 14%, var(--bg-card, rgba(0, 0, 0, 0.15)));
animation: because-cover-pulse 1.1s ease-in-out infinite;
}
.because-card-skeleton-line {
src/styles/components/playback-delay-sleep-delayed-start-modal.css
+11 -11
View File
@@ -68,9 +68,9 @@
transform: rotate(90deg) scale(0.94);
}
.playback-delay-modal--pause { --pd-accent: var(--ctp-lavender, #b4befe); }
.playback-delay-modal--start { --pd-accent: var(--ctp-peach, #fab387); }
.playback-delay-modal--idle { --pd-accent: var(--ctp-overlay1, #7f849c); }
.playback-delay-modal--pause { --pd-accent: var(--accent-2, #b4befe); }
.playback-delay-modal--start { --pd-accent: var(--accent-2, #fab387); }
.playback-delay-modal--idle { --pd-accent: var(--border-subtle, #7f849c); }
.playback-delay-modal__head {
display: flex;
@@ -127,7 +127,7 @@
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ctp-crust);
color: var(--text-on-accent);
background: var(--accent);
padding: 1px 6px;
border-radius: 4px;
@@ -165,7 +165,7 @@
.player-btn-preview-ring-track {
fill: none;
stroke: var(--ctp-overlay0);
stroke: var(--border);
stroke-width: 4;
}
@@ -279,7 +279,7 @@
button carries the mode distinction, so the ring stays consistent with
the rest of the app. */
.playback-schedule-ring__grad-a { stop-color: var(--accent); }
.playback-schedule-ring__grad-b { stop-color: var(--ctp-lavender, #b4befe); }
.playback-schedule-ring__grad-b { stop-color: var(--accent-2, #b4befe); }
/* Replaces the Play/Pause icon while a schedule timer is armed. Two-line
stack: mode icon (Moon for sleep, Sunrise for delayed-start) above the
@@ -358,7 +358,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
background: color-mix(in srgb, var(--ctp-base) 40%, transparent);
background: color-mix(in srgb, var(--bg-app) 40%, transparent);
}
.playback-delay-section--disabled {
@@ -406,7 +406,7 @@
padding: 7px 12px;
font-size: 0.82rem;
font-weight: 500;
background: var(--ctp-surface1);
background: var(--bg-hover);
color: var(--text-primary);
cursor: pointer;
transition:
@@ -419,7 +419,7 @@
.playback-delay-chip:hover {
border-color: color-mix(in srgb, var(--pd-accent, var(--accent)) 55%, var(--border));
background: color-mix(in srgb, var(--pd-accent, var(--accent)) 14%, var(--ctp-surface1));
background: color-mix(in srgb, var(--pd-accent, var(--accent)) 14%, var(--bg-hover));
color: var(--pd-accent, var(--accent));
transform: translateY(-1px);
box-shadow: 0 3px 10px color-mix(in srgb, var(--pd-accent, var(--accent)) 22%, transparent);
@@ -429,7 +429,7 @@
.playback-delay-chip--on {
border-color: var(--pd-accent, var(--accent));
background: color-mix(in srgb, var(--pd-accent, var(--accent)) 22%, var(--ctp-surface1));
background: color-mix(in srgb, var(--pd-accent, var(--accent)) 22%, var(--bg-hover));
color: var(--pd-accent, var(--accent));
}
@@ -462,7 +462,7 @@
border-radius: var(--radius-sm);
padding: 8px 10px;
font-size: 0.9rem;
background: var(--ctp-base);
background: var(--bg-app);
color: var(--text-primary);
}
src/styles/components/playlist-edit-modal.css
+3 -3
View File
@@ -90,7 +90,7 @@
}
.playlist-edit-cover-menu-item--danger {
color: var(--ctp-red, #f38ba8);
color: var(--danger, #f38ba8);
}
/* Right side fields */
@@ -216,7 +216,7 @@
padding: 5px 12px;
border-radius: var(--radius-sm);
background: var(--bg-card);
border: 1px solid var(--ctp-surface1);
border: 1px solid var(--bg-hover);
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
@@ -227,7 +227,7 @@
.artist-ext-link:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: var(--ctp-overlay0);
border-color: var(--border);
}
/* Bio section */
src/styles/components/playlist-search-panel.css
+2 -2
View File
@@ -1,6 +1,6 @@
/* ─ Playlist Search Panel ─ */
.playlist-search-panel {
background: var(--surface-2);
background: var(--bg-elevated, var(--bg-card));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-3) var(--space-2);
@@ -123,7 +123,7 @@
.playlist-search-add-btn:hover {
background: var(--accent);
color: var(--ctp-base);
color: var(--bg-app);
}
.playlist-suggestions {
src/styles/components/playlists-page.css
+4 -4
View File
@@ -12,7 +12,7 @@
}
.playlist-filter-input {
background: var(--bg-surface);
background: var(--input-bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary);
@@ -89,7 +89,7 @@
height: 28px;
border-radius: 50%;
background: var(--accent);
color: var(--ctp-base);
color: var(--bg-app);
border: none;
cursor: pointer;
opacity: 0;
@@ -119,7 +119,7 @@
.playlist-delete-btn {
opacity: 0;
color: var(--ctp-red) !important;
color: var(--danger) !important;
padding: 4px;
height: auto;
min-height: unset;
@@ -146,7 +146,7 @@
}
.fav-remove-btn:hover {
color: var(--ctp-red);
color: var(--danger);
}
.track-row:hover .fav-remove-btn,
src/styles/components/radio-card-edit-chip.css
+2 -2
View File
@@ -5,7 +5,7 @@
padding: 2px 8px;
border-radius: var(--radius-sm);
background: var(--text-secondary);
color: var(--ctp-surface1);
color: var(--bg-hover);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
@@ -14,7 +14,7 @@
}
.radio-card-chip:hover {
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
}
/* Radio card: buttons row always pinned to bottom */
src/styles/components/radio-nowplaying-section.css
+1 -1
View File
@@ -258,7 +258,7 @@
}
.np-queue-remove:hover {
color: var(--ctp-red);
color: var(--danger);
background: var(--bg-hover);
}
src/styles/components/radio-toolbar.css
+2 -2
View File
@@ -23,13 +23,13 @@
font-weight: 500;
background: var(--bg-card);
color: var(--text-secondary);
border: 1px solid var(--ctp-surface1);
border: 1px solid var(--bg-hover);
white-space: nowrap;
flex-shrink: 0;
transition: all 0.15s;
}
.radio-filter-chip:hover { background: var(--bg-hover); color: var(--text-primary); }
.radio-filter-chip.active { background: var(--accent); color: var(--ctp-crust); border-color: var(--accent); }
.radio-filter-chip.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.radio-card-drop-before {
src/styles/components/random-landing.css
+1 -1
View File
@@ -26,7 +26,7 @@
min-height: clamp(200px, 22vh, 320px);
padding: var(--space-6);
border-radius: 16px;
background: var(--ctp-surface0);
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
text-align: left;
src/styles/components/settings.css
+3 -3
View File
@@ -460,13 +460,13 @@
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent);
background: color-mix(in srgb, var(--warning) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
color: var(--text-primary);
}
.settings-privacy-notice-icon {
color: var(--color-warning, #f59e0b);
color: var(--warning);
flex-shrink: 0;
margin-top: 2px;
}
src/styles/components/sidebar-customizer.css
+3 -3
View File
@@ -10,7 +10,7 @@
}
.sidebar-customizer-row:hover {
background: var(--bg-hover);
background: var(--sidebar-item-hover);
}
.sidebar-customizer-row.drag-over {
@@ -245,7 +245,7 @@
.toggle-track {
position: absolute;
inset: 0;
background: var(--ctp-surface2);
background: var(--bg-elevated);
border-radius: var(--radius-full);
transition: background var(--transition-base);
}
@@ -264,7 +264,7 @@
}
.toggle-switch:hover .toggle-track {
background: var(--ctp-overlay0);
background: var(--border);
}
.toggle-switch input:checked+.toggle-track {
src/styles/components/tracklist.css
+23 -23
View File
@@ -24,8 +24,8 @@
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle);
color: var(--col-header-text);
border-bottom: 1px solid var(--row-divider);
margin-bottom: var(--space-2);
}
@@ -45,7 +45,7 @@
.tracklist-total {
display: grid;
align-items: center;
border-top: 1px solid var(--border-subtle);
border-top: 1px solid var(--row-divider);
padding: var(--space-2) var(--space-3);
margin-top: var(--space-1);
}
@@ -53,7 +53,7 @@
.tracklist-total-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
color: var(--row-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: right;
@@ -62,7 +62,7 @@
.tracklist-total-value {
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
color: var(--row-text-secondary);
font-variant-numeric: tabular-nums;
text-align: center;
}
@@ -89,13 +89,13 @@
bottom: 20%;
width: 1px;
border-radius: 1px;
background: var(--ctp-surface1);
background: var(--bg-hover);
transition: background 0.15s;
}
.col-resize-handle:hover::after,
.col-resize-handle:active::after {
background: var(--accent);
background: var(--col-resize-active);
}
/* ── Column visibility picker ── */
@@ -130,7 +130,7 @@
.tracklist-col-picker-btn:hover {
opacity: 1;
background: var(--ctp-surface0);
background: var(--bg-card);
color: var(--text-primary);
}
@@ -138,7 +138,7 @@
/* Positioned inline (fixed) and portalled to <body> so no ancestor overflow
can clip it; see TracklistColumnPicker. */
background: var(--bg-card);
border: 1px solid var(--ctp-surface1);
border: 1px solid var(--bg-hover);
border-radius: var(--radius-md);
padding: 6px;
min-width: 160px;
@@ -173,7 +173,7 @@
}
.tracklist-col-picker-item:hover {
background: var(--ctp-surface0);
background: var(--bg-card);
color: var(--text-primary);
}
@@ -192,7 +192,7 @@
.tracklist-col-picker-divider {
height: 1px;
background: var(--ctp-surface1);
background: var(--bg-hover);
margin: 4px 0;
}
@@ -213,7 +213,7 @@
}
.tracklist-col-picker-reset:hover {
background: var(--ctp-surface0);
background: var(--bg-card);
color: var(--text-primary);
}
@@ -271,7 +271,7 @@
border: none;
border-radius: 50%;
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
cursor: pointer;
display: inline-flex;
align-items: center;
@@ -347,7 +347,7 @@
.playlist-suggestion-preview-ring-track {
fill: none;
stroke: var(--ctp-overlay0);
stroke: var(--border);
stroke-width: 1.5;
}
@@ -424,15 +424,15 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
.track-row:hover,
.track-row.context-active {
background: var(--bg-hover);
background: var(--row-hover);
}
.track-row.active {
background: var(--accent-dim);
background: var(--row-playing-bg);
}
.track-row.active:hover {
background: var(--accent-dim);
background: var(--row-playing-bg);
}
.track-row>* {
@@ -465,7 +465,7 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
/* Default: show track number */
.track-num-number {
font-size: 13px;
color: var(--text-muted);
color: var(--row-text-muted);
font-variant-numeric: tabular-nums;
text-align: center;
}
@@ -490,7 +490,7 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
/* ── Active (currently playing): hide number, show eq-bars ── */
.track-num.track-num-active .track-num-number { display: none; }
.track-num.track-num-active .track-num-number { color: var(--accent); } /* kept for when visible */
.track-num.track-num-active .track-num-number { color: var(--row-playing-text); } /* kept for when visible */
/* ── Active + hover: hide eq-bars, show play icon ── */
.track-row:hover .track-num.track-num-active .track-num-eq { display: none; }
@@ -525,7 +525,7 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
* compositing (NVIDIA proprietary + WEBKIT_DISABLE_COMPOSITING_MODE=1) and
* pegged the WebProcess at ~80% CPU on AlbumDetail with a long tracklist. */
.eq-bars {
color: var(--accent);
color: var(--row-playing-text);
display: block;
}
@@ -574,7 +574,7 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
.track-title {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
color: var(--row-text);
overflow-wrap: break-word;
word-break: break-word;
}
@@ -587,7 +587,7 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
.track-artist {
font-size: 12px;
color: var(--text-secondary);
color: var(--row-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -626,7 +626,7 @@ html[data-track-previews-randommix="off"] [data-preview-loc="randomMix"] .pl
justify-content: center;
align-items: center;
font-size: 12px;
color: var(--text-muted);
color: var(--row-text-muted);
font-variant-numeric: tabular-nums;
}
src/styles/layout/player-bar.css
+13 -13
View File
@@ -6,7 +6,7 @@
gap: var(--space-6);
padding: 0 var(--space-5);
background: var(--bg-player);
border-top: 1px solid var(--border-subtle);
border-top: 1px solid var(--player-border);
height: var(--player-height);
position: relative;
z-index: 100;
@@ -160,12 +160,12 @@ html[data-platform="windows"] .player-bar.floating {
.player-track-name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
color: var(--player-title);
}
.player-track-artist {
font-size: 12px;
color: var(--text-secondary);
color: var(--player-artist);
margin-top: 2px;
}
@@ -227,14 +227,14 @@ html[data-platform="windows"] .player-bar.floating {
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--text-muted);
color: var(--player-control);
transition: all var(--transition-fast);
flex-shrink: 0;
}
.player-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
background: var(--player-control-hover-bg);
color: var(--player-control-hover);
transform: scale(1.12);
}
@@ -246,7 +246,7 @@ html[data-platform="windows"] .player-bar.floating {
/* Star + Last.fm heart — visually separated from track title */
.player-star-btn {
margin: var(--space-1);
color: var(--text-muted);
color: var(--player-control);
transition: color var(--transition-fast);
}
@@ -259,7 +259,7 @@ html[data-platform="windows"] .player-bar.floating {
width: 46px;
height: 46px;
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
border-radius: 50%;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
flex-shrink: 0;
@@ -267,7 +267,7 @@ html[data-platform="windows"] .player-bar.floating {
.player-btn-primary:hover {
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
transform: scale(1.06);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), var(--shadow-glow);
filter: brightness(1.12);
@@ -337,12 +337,12 @@ html[data-platform="windows"] .player-bar.floating {
}
.player-time-toggle:hover {
background-color: var(--surface-hover, rgba(128, 128, 128, 0.2));
background-color: var(--player-time-toggle-hover);
color: var(--text-primary);
}
.player-time-toggle:active {
background-color: var(--surface-active, rgba(128, 128, 128, 0.3));
background-color: var(--player-time-toggle-active);
}
/* Volume section */
@@ -384,7 +384,7 @@ html[data-platform="windows"] .player-bar.floating {
}
.player-eq-btn {
color: var(--text-muted);
color: var(--player-control);
flex-shrink: 0;
transition: color 0.15s;
}
@@ -406,7 +406,7 @@ html[data-platform="windows"] .player-bar.floating {
padding: 10px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--bg-card);
background: var(--menu-bg);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
z-index: 240;
display: flex;
src/styles/layout/queue-panel.css
+3 -3
View File
@@ -160,7 +160,7 @@
cursor: default;
}
.queue-round-btn.active {
color: var(--ctp-base);
color: var(--bg-app);
background: var(--accent);
}
@@ -185,7 +185,7 @@
flex-shrink: 0;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-surface);
background: var(--card-placeholder-bg);
display: flex;
align-items: center;
justify-content: center;
@@ -248,7 +248,7 @@
font-size: 9px;
font-family: monospace;
letter-spacing: 0.05em;
background: var(--ctp-surface1);
background: var(--bg-hover);
color: var(--accent);
padding: 3px var(--space-4);
white-space: nowrap;
src/styles/layout/scrubber.css
+1 -1
View File
@@ -19,7 +19,7 @@
right: 0;
height: 4px;
border-radius: 2px;
background: var(--ctp-surface2, rgba(255,255,255,0.12));
background: var(--bg-elevated, rgba(255,255,255,0.12));
}
.mp-scrubber-fill {
src/styles/layout/sidebar-device-sync-queue.css
+3 -3
View File
@@ -1,8 +1,8 @@
/* ─── Sidebar device-sync queue ─── */
.sidebar-sync-queue {
background: color-mix(in srgb, var(--success, #4ade80) 10%, var(--bg-sidebar));
border-color: color-mix(in srgb, var(--success, #4ade80) 25%, transparent);
color: var(--success, #4ade80);
background: color-mix(in srgb, var(--positive, #4ade80) 10%, var(--bg-sidebar));
border-color: color-mix(in srgb, var(--positive, #4ade80) 25%, transparent);
color: var(--positive, #4ade80);
}
@keyframes spin-slow {
src/styles/layout/sidebar-expandable-playlists-section.css
+10 -10
View File
@@ -33,13 +33,13 @@
}
.sidebar-playlists-toggle:hover {
background: var(--bg-hover);
background: var(--sidebar-item-hover);
color: var(--text-primary);
}
.sidebar-playlists-toggle.expanded {
transform: rotate(90deg);
color: var(--accent);
color: var(--sidebar-item-active-text);
}
.sidebar-playlists-section {
@@ -54,7 +54,7 @@
width: 100%;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: var(--text-secondary);
color: var(--sidebar-text);
font-size: 14px;
font-weight: 500;
transition: background var(--transition-fast), color var(--transition-fast);
@@ -65,13 +65,13 @@
}
.sidebar-playlists-header:hover {
background: var(--bg-hover);
background: var(--sidebar-item-hover);
color: var(--text-primary);
}
.sidebar-playlists-header.active {
background: var(--accent-dim);
color: var(--accent);
background: var(--sidebar-item-active-bg);
color: var(--sidebar-item-active-text);
}
.sidebar-playlists-chevron {
@@ -99,7 +99,7 @@
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
color: var(--text-secondary);
color: var(--sidebar-text);
font-size: 13px;
font-weight: 400;
transition: background var(--transition-fast), color var(--transition-fast);
@@ -115,13 +115,13 @@
}
.sidebar-playlist-item:hover {
background: var(--bg-hover);
background: var(--sidebar-item-hover);
color: var(--text-primary);
}
.sidebar-playlist-item.active {
background: var(--accent-dim);
color: var(--accent);
background: var(--sidebar-item-active-bg);
color: var(--sidebar-item-active-text);
}
.sidebar-playlists-loading {
src/styles/layout/sidebar.css
+32 -32
View File
@@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
background: var(--bg-sidebar);
border-right: 1px solid var(--border-subtle);
border-right: 1px solid var(--sidebar-border);
position: relative;
z-index: 2;
min-height: 0; /* allow 1fr row to shrink freely */
@@ -17,7 +17,7 @@
padding: 0 var(--space-5);
height: 64px;
box-sizing: border-box;
border-bottom: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand .logo-icon {
@@ -31,7 +31,7 @@
font-size: 20px;
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--accent), var(--ctp-blue));
background: linear-gradient(135deg, var(--accent), var(--accent-2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -65,19 +65,19 @@
width: calc(100% - 2 * var(--space-3));
margin: var(--space-3) var(--space-3) var(--space-2);
padding: var(--space-2) var(--space-2);
border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
border: 1px solid var(--sidebar-border);
border-radius: var(--radius-md);
background: var(--bg-tertiary, rgba(0, 0, 0, 0.2));
color: var(--text-secondary);
background: var(--sidebar-trigger-bg);
color: var(--sidebar-text);
cursor: pointer;
text-align: left;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.nav-library-scope-trigger:hover {
background: var(--bg-hover);
background: var(--sidebar-item-hover);
color: var(--text-primary);
border-color: var(--border-default, rgba(255, 255, 255, 0.12));
border-color: var(--border);
}
/* «Все библиотеки»: как секция навигации, без рамки и подложки */
@@ -96,12 +96,12 @@
}
.nav-library-scope-trigger--open:not(.nav-library-scope-trigger--plain) {
border-color: var(--accent, var(--border-default));
border-color: var(--accent, var(--border));
}
.nav-library-scope-trigger--open.nav-library-scope-trigger--plain {
border-color: var(--border-subtle, rgba(255, 255, 255, 0.08));
background: var(--bg-tertiary, rgba(0, 0, 0, 0.2));
border-color: var(--sidebar-border);
background: var(--sidebar-trigger-bg);
}
.nav-library-scope-icon {
@@ -153,9 +153,9 @@
flex-direction: column;
padding: var(--space-1);
border-radius: var(--radius-md);
border: 1px solid var(--border-dropdown, rgba(255, 255, 255, 0.12));
background: var(--bg-card);
box-shadow: 0 8px 24px var(--shadow-dropdown, rgba(0, 0, 0, 0.45));
border: 1px solid var(--border-dropdown);
background: var(--menu-bg);
box-shadow: 0 8px 24px var(--shadow-dropdown);
box-sizing: border-box;
overflow-y: visible;
}
@@ -190,11 +190,11 @@
}
.nav-library-dropdown-item:hover {
background: var(--bg-hover);
background: var(--menu-item-hover);
}
.nav-library-dropdown-item--selected {
color: var(--accent);
color: var(--menu-item-active-text);
}
.nav-library-dropdown-item-label {
@@ -266,9 +266,9 @@
border-radius: 50%;
pointer-events: none;
z-index: 100002;
color: var(--danger, #e05555);
background: color-mix(in srgb, var(--danger, #e05555) 18%, var(--bg-card, #1e1e2e));
border: 1px solid color-mix(in srgb, var(--danger, #e05555) 45%, transparent);
color: var(--danger);
background: color-mix(in srgb, var(--danger) 18%, var(--bg-card));
border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
@@ -278,7 +278,7 @@
gap: var(--space-3);
padding: var(--space-3) var(--space-3);
border-radius: var(--radius-md);
color: var(--text-secondary);
color: var(--sidebar-text);
font-size: 14px;
font-weight: 500;
transition: background var(--transition-fast), color var(--transition-fast);
@@ -288,13 +288,13 @@
}
.nav-link:hover {
background: var(--bg-hover);
background: var(--sidebar-item-hover);
color: var(--text-primary);
}
.nav-link.active {
background: var(--accent-dim);
color: var(--accent);
background: var(--sidebar-item-active-bg);
color: var(--sidebar-item-active-text);
}
.nav-link.active::before {
@@ -305,7 +305,7 @@
transform: translateY(-50%);
width: 3px;
height: 60%;
background: var(--accent);
background: var(--sidebar-item-active-text);
border-radius: 0 var(--radius-full) var(--radius-full) 0;
}
@@ -323,16 +323,16 @@
/* Now Playing nav link — subtly accented but not permanently "active"-looking */
.nav-link-nowplaying {
color: var(--accent);
color: var(--sidebar-item-active-text);
font-weight: 600;
}
.nav-link-nowplaying:hover {
background: var(--bg-hover);
color: var(--accent);
background: var(--sidebar-item-hover);
color: var(--sidebar-item-active-text);
}
.nav-link-nowplaying.active {
background: var(--accent-dim);
color: var(--accent);
background: var(--sidebar-item-active-bg);
color: var(--sidebar-item-active-text);
}
.nav-link-nowplaying svg {
opacity: 1;
@@ -366,7 +366,7 @@
padding: 0 5px;
border-radius: 999px;
background: var(--accent);
color: var(--ctp-crust, #11111b);
color: var(--text-on-accent);
font-size: 10px;
font-weight: 700;
line-height: 18px;
@@ -406,7 +406,7 @@
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--border-subtle);
border: 1px solid var(--sidebar-border);
background: var(--bg-card);
color: var(--text-muted);
cursor: pointer;
@@ -418,7 +418,7 @@
}
.collapse-btn:hover {
background: var(--bg-hover);
background: var(--sidebar-item-hover);
color: var(--text-primary);
box-shadow: var(--shadow-md);
}
src/styles/layout/transport-controls.css
+2 -2
View File
@@ -37,12 +37,12 @@
width: 64px;
height: 64px;
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.mp-ctrl-play:hover {
color: var(--ctp-crust);
color: var(--text-on-accent);
filter: brightness(1.1);
transform: scale(1.06);
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4), var(--shadow-glow);
src/styles/themes/1984-cyberpunk-juanmnl-vs-1984-mint-green-variant.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/1984-juanmnl-vs-1984-default-dark-deep-blue-cyberpunk.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/1984-light-juanmnl-vs-1984-bluish-white.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/1984-orwell-juanmnl-vs-1984-sepia-dystopian-variant.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/a-theme-of-ice-and-fire-game-of-thrones.css
-254
View File
@@ -1,254 +0,0 @@
/* ─── 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;
}
src/styles/themes/amoled-black-pure.css
-68
View File
@@ -1,68 +0,0 @@
/* ─── 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;
}
src/styles/themes/atom-one-dark-th3whit3wolf-one-nvim-dark-variant.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/atom-one-light-th3whit3wolf-one-nvim-light-variant.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/back-to-the-future-hill-valley-85.css
-954
View File
@@ -1,954 +0,0 @@
/* ─── 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;
}
src/styles/themes/blade-cinematic-industrial.css
-342
View File
@@ -1,342 +0,0 @@
/* ─────────────────────────────────────────────────────────────
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;
}
src/styles/themes/button-variants.css
+5 -5
View File
@@ -14,7 +14,7 @@
.btn-primary {
background: var(--accent);
color: var(--ctp-crust);
color: var(--text-on-accent);
font-weight: 600;
/* Match .btn-surface border box so toggling primary/surface does not shift layout. */
border: 1px solid transparent;
@@ -38,19 +38,19 @@
}
.btn-ghost:hover {
background: var(--bg-hover);
background: var(--button-hover);
color: var(--text-primary);
}
.btn-surface {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--ctp-surface1);
border: 1px solid var(--border);
}
.btn-surface:hover {
background: var(--bg-hover);
border-color: var(--ctp-overlay0);
background: var(--button-hover);
border-color: var(--border);
}
.btn-danger {
src/styles/themes/carbon-grey.css
-68
View File
@@ -1,68 +0,0 @@
/* ─── 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;
}
src/styles/themes/carbonfox.css
-53
View File
@@ -1,53 +0,0 @@
/* ─── 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;
}
src/styles/themes/catppuccin-frapp-variables.css
-50
View File
@@ -1,50 +0,0 @@
/* ─── 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);
}
src/styles/themes/catppuccin-macchiato-variables.css
-50
View File
@@ -1,50 +0,0 @@
/* ─── 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);
}
src/styles/themes/catppuccin-mocha-variables.css
+16
View File
@@ -48,5 +48,21 @@
--positive: var(--ctp-green);
--warning: var(--ctp-yellow);
--danger: var(--ctp-red);
/* Semantic tokens added for the theme-store contract (B0): readable names that
replace direct --ctp-* use in components. Defined here on :root so they
resolve per-theme automatically (every theme sets --ctp-*); a theme can
override any of them directly. See workdocs theme-store/b0-semantic-refactor. */
--highlight: var(--ctp-yellow);
--accent-2: var(--ctp-blue);
--bg-deep: var(--ctp-crust);
--bg-elevated: var(--ctp-surface2);
--text-on-accent: var(--ctp-crust);
/* Player readout colours — optional. Default to the standard text tones so
nothing changes unless a theme overrides them (e.g. a coloured LCD-style
track name). */
--player-title: var(--text-primary);
--player-artist: var(--text-secondary);
}
src/styles/themes/classic-winamp-winamp-2-x-base-skin.css
-67
View File
@@ -1,67 +0,0 @@
/* ─── 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;
}
src/styles/themes/community-themes.css
-2
View File
@@ -1,2 +0,0 @@
/* ─── COMMUNITY THEMES ─── */
src/styles/themes/copper-oxide.css
-68
View File
@@ -1,68 +0,0 @@
/* ─── 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;
}
src/styles/themes/cupertino-beats.css
-97
View File
@@ -1,97 +0,0 @@
/* ─── 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;
}
src/styles/themes/cyberlink-powerdvd.css
-259
View File
@@ -1,259 +0,0 @@
/* ─── 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;
}
src/styles/themes/d-oh-matic.css
-81
View File
@@ -1,81 +0,0 @@
/* ─── 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;
}
src/styles/themes/dark-side-of-the-moon-inspired-pink-floyd.css
-286
View File
@@ -1,286 +0,0 @@
/* ─── 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;
}
src/styles/themes/data-theme-aqua-quartz.css
-265
View File
@@ -1,265 +0,0 @@
/* ─────────────────────────────────────────── */
[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);
}
src/styles/themes/dawnfox.css
-53
View File
@@ -1,53 +0,0 @@
/* ─── 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;
}
src/styles/themes/dayfox.css
-53
View File
@@ -1,53 +0,0 @@
/* ─── 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;
}
src/styles/themes/deep-forest.css
-66
View File
@@ -1,66 +0,0 @@
/* ─── 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;
}
src/styles/themes/dracula-component-level-overrides.css
-24
View File
@@ -1,24 +0,0 @@
/* ─── 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 only tunes the colour; width/offset/placement come from
the shared :focus-visible rule and card focus ring (all var-driven). */
[data-theme='dracula'] {
--focus-ring-color: #bd93f9;
}
/* 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;
}
src/styles/themes/dracula.css
-70
View File
@@ -1,70 +0,0 @@
/* ─── 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;
}
src/styles/themes/dune-arrakis.css
-1079
View File
File diff suppressed because it is too large Load Diff
src/styles/themes/duskfox.css
-53
View File
@@ -1,53 +0,0 @@
/* ─── 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;
}
src/styles/themes/dzr0.css
-104
View File
@@ -1,104 +0,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;
}
src/styles/themes/grand-theft-audio-gta-v-los-santos-at-night.css
-225
View File
@@ -1,225 +0,0 @@
/* ─── 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;
}
src/styles/themes/gruvbox-dark-hard.css
-53
View File
@@ -1,53 +0,0 @@
/* ─── 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;
}
src/styles/themes/gruvbox-dark-medium.css
-53
View File
@@ -1,53 +0,0 @@
/* ─── 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;
}
src/styles/themes/gruvbox-dark-soft.css
-53
View File
@@ -1,53 +0,0 @@
/* ─── 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;
}
src/styles/themes/gruvbox-light-hard.css
-51
View File
@@ -1,51 +0,0 @@
/* ─── 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;
}
src/styles/themes/gruvbox-light-medium.css
-51
View File
@@ -1,51 +0,0 @@
/* ─── 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;
}
src/styles/themes/gruvbox-light-soft.css
-66
View File
@@ -1,66 +0,0 @@
/* ─── 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;
}
src/styles/themes/guild-wars-1-tyria.css
-206
View File
@@ -1,206 +0,0 @@
/* ─── 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;
}
src/styles/themes/heisenberg-breaking-bad.css
-209
View File
@@ -1,209 +0,0 @@
/* ─── 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;
}
src/styles/themes/index.css
+1 -92
View File
@@ -1,38 +1,9 @@
@import './_intro.css';
@import './catppuccin-mocha-variables.css';
@import './catppuccin-macchiato-variables.css';
@import './catppuccin-frapp-variables.css';
@import './semantic-cascade.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';
@@ -51,72 +22,10 @@
@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';
src/styles/themes/input.css
+3 -3
View File
@@ -2,8 +2,8 @@
.input {
width: 100%;
padding: var(--space-3) var(--space-4);
background: var(--ctp-base);
border: 1px solid var(--ctp-overlay0);
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-sans);
@@ -17,7 +17,7 @@
}
.input:focus {
border-color: var(--accent);
border-color: var(--input-focus-border);
box-shadow: 0 0 0 3px var(--accent-dim);
}
src/styles/themes/kanagawa-dragon-rebelot-kanagawa-nvim-high-contrast-dark.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/kanagawa-lotus-rebelot-kanagawa-nvim-light.css
-56
View File
@@ -1,56 +0,0 @@
/* ─── 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;
}
src/styles/themes/lambda-17-half-life-city-17.css
-236
View File
@@ -1,236 +0,0 @@
/* ─── 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;
}
src/styles/themes/macos-ventura-dark.css
-122
View File
@@ -1,122 +0,0 @@
/* ─── 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;
}
src/styles/themes/macos-ventura-light.css
-149
View File
@@ -1,149 +0,0 @@
/* ─── 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;
}
src/styles/themes/middle-earth-epic-fantasy-cinematic.css
-4
View File
@@ -1,4 +0,0 @@
/* ─────────────────────────────────────────────────────────────
Middle Earth — Epic Fantasy / Cinematic
───────────────────────────────────────────────────────────── */
src/styles/themes/middle-earth-red-book-of-westmarch.css
-589
View File
@@ -1,589 +0,0 @@
/* ─── 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;
}
src/styles/themes/middle-earth-the-one-ring-inscription-glow.css
-25
View File
@@ -1,25 +0,0 @@
/* ─────────────────────────────────────────────────────────────
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);
}
}
src/styles/themes/midnight-blue.css
-68
View File
@@ -1,68 +0,0 @@
/* ─── 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;
}
src/styles/themes/morpheus-matrix-style.css
-4
View File
@@ -1,4 +0,0 @@
/* ─────────────────────────────────────────────────────────────
Morpheus — Matrix Style
───────────────────────────────────────────────────────────── */
src/styles/themes/ms-dos.css
-284
View File
@@ -1,284 +0,0 @@
/* ─── 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;
}

Some files were not shown because too many files have changed in this diff Show More