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

fix(css): solid navy fallback, force green FAB+chip on dark card

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-05 18:31:56 -04:00
parent 59dbfb8aab
commit 3dc9fc2446
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftShared.Client/Components/TrackCard.razor.css
+20 -8
View File
@@ -35,17 +35,13 @@
rgba(13, 27, 42, 0.00) 100%);
}
/* Fallback panel — navy-glass, mirrors NowPlayingCard's .now-playing glass.
Stable base fallback so the card never flashes grey during WASM hydration. */
/* Fallback panel — solid navy, opaque so the card reads correctly on both
light and dark page backgrounds. Semi-transparent + blur washes out on white. */
.deepdrft-track-card-fallback {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: color-mix(in srgb, var(--deepdrft-navy, #0D1B2A) 55%, transparent);
top: 0; left: 0; width: 100%; height: 100%;
background: var(--deepdrft-navy-mid, #162437);
border: 1px solid rgba(250, 250, 248, 0.12);
backdrop-filter: blur(8px);
}
/* Title: off-white — matches .np-title.
@@ -59,6 +55,22 @@
/* Meta: muted off-white — matches .np-sub. ::deep for same reason. */
::deep .deepdrft-track-meta { color: rgba(250, 250, 248, 0.45); }
/* FAB always green-accent — card is always dark glass regardless of page theme.
.mud-button-filled-primary specificity (0,1,0) in MudBlazor; our (0,1,1) wins. */
::deep .mud-button-filled-primary {
background-color: var(--deepdrft-green-accent, #3D7A68);
color: var(--deepdrft-white, #FAFAF8);
}
/* Genre chip always green-accent outline/text on the dark glass card. */
::deep .deepdrft-genre-chip.mud-chip-outlined {
border-color: var(--deepdrft-green-accent, #3D7A68);
color: var(--deepdrft-green-accent, #3D7A68);
}
::deep .deepdrft-genre-chip.mud-chip-color-primary {
color: var(--deepdrft-green-accent, #3D7A68);
}
.deepdrft-track-info-middle { margin: 8px 0; }
.deepdrft-track-info-bottom {