style(track-card): glass theming — remove MudBlazor color overrides, add theme-scoped CSS for title/artist/meta hierarchy and navy-glass fallback panel

This commit is contained in:
daniel-c-harvey
2026-06-05 15:18:56 -04:00
parent a86ccae432
commit b22b57069d
2 changed files with 47 additions and 9 deletions
@@ -219,6 +219,11 @@ body, p, span, div,
overflow: hidden;
}
/* Dark: glass edge to match NowPlayingCard vocabulary */
.deepdrft-theme-dark .deepdrft-track-card-container {
border: 1px solid rgba(250, 250, 248, 0.12);
}
.deepdrft-track-card-bg {
position: absolute;
top: 0;
@@ -240,6 +245,15 @@ body, p, span, div,
padding: 16px;
}
/* Scrim behind text — guarantees legibility over album art and fallback glass */
.deepdrft-theme-dark .deepdrft-track-card-content {
background: linear-gradient(to top,
rgba(13, 27, 42, 0.75) 0%,
rgba(13, 27, 42, 0.35) 45%,
rgba(13, 27, 42, 0.00) 100%);
}
/* Fallback panel — layout (theme-agnostic) */
.deepdrft-track-card-fallback {
position: absolute;
top: 0;
@@ -248,6 +262,33 @@ body, p, span, div,
height: 100%;
}
/* Fallback panel — navy-glass, dark theme only. Mirrors NowPlayingCard's .now-playing glass. */
.deepdrft-theme-dark .deepdrft-track-card-fallback {
background: color-mix(in srgb, var(--deepdrft-navy) 55%, transparent);
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));
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);
}
.deepdrft-track-info-middle { margin: 8px 0; }
.deepdrft-track-info-bottom {