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

refactor(css): consolidate track-view layout and card text color rules; switch genre chip to Outlined variant

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-05 16:58:07 -04:00
parent 9854d51940
commit b3473aa37e
5 changed files with 23 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+15 -9
View File
@@ -211,8 +211,8 @@ body, p, span, div,
8. TRACK CARDS
============================================================================= */
/* Container — transparent so no background competes
with the absolute-positioned fallback panel or album art. */
/* Container — transparent so the absolute-positioned fallback panel or album art
controls the card's background. No MudBlazor surface component background to fight. */
.deepdrft-track-card-container {
width: 250px;
height: 250px;
@@ -281,14 +281,20 @@ body, p, span, div,
border: 1px solid var(--deepdrft-border);
}
/* 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); }
/* Card text — theme-neutral base for the WASM hydration window (no wrapper class yet).
Inherits body text so no jarring flash in either theme direction. */
.deepdrft-track-title,
.deepdrft-track-artist,
.deepdrft-track-meta { color: inherit; }
/* Light-mode text overrides — legible on the near-white light fallback */
/* Dark theme text — wins on specificity (0,2,0), not load order.
Title: off-white. Artist: muted off-white (hierarchy above meta, below title).
Meta: more muted. Green is reserved for the FAB (action) and chip border (tag only). */
.deepdrft-theme-dark .deepdrft-track-title { color: var(--deepdrft-white, #FAFAF8); }
.deepdrft-theme-dark .deepdrft-track-artist { color: rgba(250, 250, 248, 0.65); }
.deepdrft-theme-dark .deepdrft-track-meta { color: rgba(250, 250, 248, 0.45); }
/* Light theme text — wins on specificity (0,2,0) */
.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); }