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

Merge branch 'track-card-flash-fix' into dev

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-05 16:15:31 -04:00
parent c10d315a7b 1986aed902
commit eed99df0dd
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 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 { .deepdrft-track-card-container {
width: 250px; width: 250px;
height: 250px; height: 250px;
min-width: 250px; min-width: 250px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: transparent !important;
} }
/* Dark: glass edge to match NowPlayingCard vocabulary */ /* Dark: glass edge to match NowPlayingCard vocabulary */
@@ -253,41 +256,42 @@ body, p, span, div,
rgba(13, 27, 42, 0.00) 100%); 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 { .deepdrft-track-card-fallback {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 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 { .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); border: 1px solid rgba(250, 250, 248, 0.12);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
/* Fallback panel — light theme: subtle navy tint on off-white */ /* Fallback panel — light theme: subtle navy tint on off-white */
.deepdrft-theme-light .deepdrft-track-card-fallback { .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); border: 1px solid var(--deepdrft-border);
} }
/* Card text — dark theme (Reading 2: NowPlayingCard hierarchy) */ /* Card text — unconditional dark defaults (glass-language colors).
/* Title: off-white (NowPlayingCard .np-title) */ These fire even if the theme wrapper class is absent during WASM hydration,
.deepdrft-theme-dark .deepdrft-track-title { preventing a "blue text" flash. Light-mode overrides below correct legibility. */
color: var(--deepdrft-white); .deepdrft-track-title { color: var(--deepdrft-white, #FAFAF8); }
} .deepdrft-track-artist { color: var(--deepdrft-green-accent, #3D7A68); }
/* Artist: moss-green (NowPlayingCard .np-label accent) */ .deepdrft-track-meta { color: rgba(250, 250, 248, 0.55); }
.deepdrft-theme-dark .deepdrft-track-artist {
color: var(--deepdrft-green-accent); /* Light-mode text overrides — legible on the near-white light fallback */
} .deepdrft-theme-light .deepdrft-track-title { color: var(--deepdrft-navy, #0D1B2A); }
/* Meta (album, year): muted off-white (NowPlayingCard .np-sub) */ .deepdrft-theme-light .deepdrft-track-artist { color: var(--deepdrft-green, #1A3C34); }
.deepdrft-theme-dark .deepdrft-track-meta { .deepdrft-theme-light .deepdrft-track-meta { color: var(--deepdrft-muted, #8A9BB0); }
color: rgba(250, 250, 248, 0.55);
}
.deepdrft-track-info-middle { margin: 8px 0; } .deepdrft-track-info-middle { margin: 8px 0; }