Files
deepdrft/DeepDrftPublic.Client/Pages/SessionDetail.razor.css
T

25 lines
843 B
CSS

/* Hero-dominant: a wide 16:9 image rather than the square cover used on track detail. */
.session-detail-hero {
margin: 0 auto 2rem;
overflow: hidden;
}
/* session-detail-hero-img rides on MudPaper (child Razor component); ::deep pierces its output. */
::deep .session-detail-hero-img {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Secondary medium square cover sitting below the hero — same 220px frame as mix detail,
smaller than the cut cover so the hero stays dominant. The cover-art MudPaper fills it. */
.session-detail-cover {
aspect-ratio: 1 / 1;
max-width: 220px;
margin: 0 auto 2rem;
overflow: hidden;
box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
}