daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

fix(css): eliminate track card flash — transparent container, stable fallback base color, unconditional text defaults

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-05 16:15:27 -04:00
parent c10d315a7b
commit 1986aed902
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+21 -17
View File
@@ -211,12 +211,15 @@ body, p, span, div,
8. TRACK CARDS
============================================================================= */
/* Container — always transparent so MudCard's paper background never competes
with the absolute-positioned fallback panel or album art. */
.deepdrft-track-card-container {
width: 250px;
height: 250px;
min-width: 250px;
position: relative;
overflow: hidden;
background: transparent !important;
}
/* Dark: glass edge to match NowPlayingCard vocabulary */
@@ -253,41 +256,42 @@ body, p, span, div,
rgba(13, 27, 42, 0.00) 100%);
}
/* Fallback panel — layout (theme-agnostic) */
/* Fallback panel — layout + stable dark default.
Base rule sets navy-mid so the card never flashes grey/surface-teal even
if the theme wrapper class is absent during WASM hydration. */
.deepdrft-track-card-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--deepdrft-navy-mid, #162437) !important;
}
/* Fallback panel — navy-glass, dark theme only. Mirrors NowPlayingCard's .now-playing glass. */
/* Fallback panel — navy-glass, dark theme. Mirrors NowPlayingCard's .now-playing glass. */
.deepdrft-theme-dark .deepdrft-track-card-fallback {
background: color-mix(in srgb, var(--deepdrft-navy) 55%, transparent);
background: color-mix(in srgb, var(--deepdrft-navy) 55%, transparent) !important;
border: 1px solid rgba(250, 250, 248, 0.12);
backdrop-filter: blur(8px);
}
/* Fallback panel — light theme: subtle navy tint on off-white */
.deepdrft-theme-light .deepdrft-track-card-fallback {
background: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white));
background: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)) !important;
border: 1px solid var(--deepdrft-border);
}
/* Card text — dark theme (Reading 2: NowPlayingCard hierarchy) */
/* Title: off-white (NowPlayingCard .np-title) */
.deepdrft-theme-dark .deepdrft-track-title {
color: var(--deepdrft-white);
}
/* Artist: moss-green (NowPlayingCard .np-label accent) */
.deepdrft-theme-dark .deepdrft-track-artist {
color: var(--deepdrft-green-accent);
}
/* Meta (album, year): muted off-white (NowPlayingCard .np-sub) */
.deepdrft-theme-dark .deepdrft-track-meta {
color: rgba(250, 250, 248, 0.55);
}
/* Card text — unconditional dark defaults (glass-language colors).
These fire even if the theme wrapper class is absent during WASM hydration,
preventing a "blue text" flash. Light-mode overrides below correct legibility. */
.deepdrft-track-title { color: var(--deepdrft-white, #FAFAF8); }
.deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
.deepdrft-track-meta { color: rgba(250, 250, 248, 0.55); }
/* Light-mode text overrides — legible on the near-white light fallback */
.deepdrft-theme-light .deepdrft-track-title { color: var(--deepdrft-navy, #0D1B2A); }
.deepdrft-theme-light .deepdrft-track-artist { color: var(--deepdrft-green, #1A3C34); }
.deepdrft-theme-light .deepdrft-track-meta { color: var(--deepdrft-muted, #8A9BB0); }
.deepdrft-track-info-middle { margin: 8px 0; }