daniel-c-harvey
c28a2b1cf5
Glyph rule is (0,3,0) > (0,1,0) — beats .mud-secondary-text on specificity, not source order. ReleaseHeroOverlay spinner comment now distinguishes dead glyph clauses from the live spinner clause that produced the intentional light delta.
178 lines
4.9 KiB
CSS
178 lines
4.9 KiB
CSS
/* Background-image hero with the release detail overlaid directly on top, themed to match the
|
|
NowPlaying glassmorphic family. The overlay shell (.release-hero, shim, top/bottom rows) is
|
|
plain <div>s; per-page aspect/sizing variance rides an extra class (e.g. .mix-hero) layered on
|
|
.release-hero. The default aspect here is Sessions' wide hero. */
|
|
|
|
/* Positioning context for every overlay. A tall, dominant frame rather than the 16:9 strip. */
|
|
.release-hero {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
max-height: 70vh;
|
|
min-height: 420px;
|
|
margin-top: 1rem;
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-shadow: 0 12px 40px color-mix(in srgb, var(--mud-palette-text-secondary) 22%, transparent);
|
|
}
|
|
|
|
/* The background-image surface and placeholder are plain <div>s, so no ::deep is needed here. */
|
|
.release-hero-img {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.release-hero-placeholder {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--mud-palette-surface);
|
|
}
|
|
|
|
::deep .release-hero-placeholder .mud-icon-root {
|
|
font-size: 120px;
|
|
}
|
|
|
|
/* Darkening gradient shim: stronger at the bottom (under the title/play row) and lighter toward
|
|
the middle, with a top darken so the genre/share overlay stays legible too. */
|
|
.release-hero-shim {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background:
|
|
linear-gradient(to bottom,
|
|
rgba(0, 0, 0, 0.55) 0%,
|
|
rgba(0, 0, 0, 0.15) 28%,
|
|
rgba(0, 0, 0, 0.15) 55%,
|
|
rgba(0, 0, 0, 0.75) 100%);
|
|
}
|
|
|
|
/* --- Top overlay: genre / date / share --- */
|
|
.release-hero-top {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 1.25rem 1.5rem;
|
|
}
|
|
|
|
.release-overlay-date {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.1rem;
|
|
}
|
|
|
|
.release-overlay-label {
|
|
font-family: var(--deepdrft-font-mono);
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.25em;
|
|
text-transform: uppercase;
|
|
color: var(--deepdrft-green-accent);
|
|
}
|
|
|
|
.release-overlay-value {
|
|
font-family: var(--deepdrft-font-body);
|
|
font-size: 0.8rem;
|
|
color: var(--deepdrft-white);
|
|
}
|
|
|
|
/* Genre chip themed to the glassmorphic NowPlaying surface. The class lands on MudChip's native
|
|
.mud-chip output, so ::deep is required to reach it. */
|
|
::deep .release-overlay-chip.mud-chip {
|
|
background: rgba(250, 250, 248, 0.06);
|
|
border: 1px solid rgba(250, 250, 248, 0.12);
|
|
backdrop-filter: blur(8px);
|
|
color: var(--deepdrft-white);
|
|
font-family: var(--deepdrft-font-mono);
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
/* --- Bottom overlay: cover thumb / title / play --- */
|
|
.release-hero-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.release-cover-thumb {
|
|
flex: 0 0 auto;
|
|
width: 96px;
|
|
height: 96px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(250, 250, 248, 0.12);
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
/* The cover-thumb art surface is a plain <div>, so no ::deep is needed. */
|
|
.release-cover-thumb .deepdrft-track-detail-cover-art {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.release-hero-titles {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.release-overlay-title {
|
|
font-family: var(--deepdrft-font-display);
|
|
font-size: clamp(1.75rem, 4vw, 2.75rem);
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
color: var(--deepdrft-white);
|
|
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.release-overlay-artist {
|
|
font-family: var(--deepdrft-font-body);
|
|
font-size: 0.85rem;
|
|
letter-spacing: 0.08em;
|
|
color: rgba(250, 250, 248, 0.7);
|
|
margin-top: 0.35rem;
|
|
}
|
|
|
|
.release-hero-play {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* The play/share glyphs are coloured by the shared .dd-accent-icon treatment (green-accent in
|
|
both themes) applied on .release-hero-play / .release-hero-share in ReleaseHeroOverlay.razor —
|
|
see deepdrft-styles.css. No co-located colour rule here: the former white override was removed
|
|
because its glyph clauses (.mud-icon-button .mud-icon-root) could not reach the
|
|
.mud-secondary-text !important glyph at wrapper specificity, and its spinner clause
|
|
(.mud-progress-circular) was live but is now correctly covered by .dd-accent-icon —
|
|
making the spinner green-accent (was white) in light mode, the one intentional light delta. */
|
|
|
|
@media (max-width: 599.98px) {
|
|
.release-hero {
|
|
aspect-ratio: 3 / 4;
|
|
min-height: 380px;
|
|
}
|
|
|
|
/* release-hero-bottom-row rides on MudStack's native output div, so ::deep is required. */
|
|
::deep .release-hero-bottom-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.release-cover-thumb {
|
|
width: 72px;
|
|
height: 72px;
|
|
}
|
|
}
|