/* vrc.dj Liveset page (/livesets/{id}) - the deck beside the set. * * Column (default): a sticky deck on the left - the video (or the cover), the * track playing now, the scrubber, the transport, the next tracks - and the * set reading beside it. Cinema (video sets, , * owned by layout.php's head script): the video on a stage as wide as the * page, the deck folded into a strip under it that pins below the nav, and * the set underneath - the title and tracklist on the left, the description * and the artist's other sets (.lsd-side) beside them. Phones: the video * sticks under the nav with the controls beneath it; turning the phone * sideways is Cinema. * * The video in [data-player-dock] is the playback bar's own player, placed * over the slot by playback-bar.js (body.pb-docked) - never moved into it - * so the slot only reserves the 16:9 box and shows the poster until then. */ .lsd { /* The screen's outline: the slot's in Column, the stage's in Cinema. */ --lsd-ring: 0 0 0 1px rgba(255,255,255,.08), var(--shadow-lg); position: relative; width: min(1240px, 100% - 2rem); margin: 0 auto; padding: 1.5rem 0 1rem; } /* ── Layout ─────────────────────────────────────────────────────────── */ .lsd-grid { display: grid; grid-template-columns: 460px minmax(0, 1fr); column-gap: 48px; align-items: start; } .lsd-deck { position: sticky; top: calc(var(--nav-h, 72px) + 1.25rem); align-self: start; display: flex; flex-direction: column; min-width: 0; } .lsd-main { min-width: 0; } /* ── Media: the video slot, or the cover ────────────────────────────── */ .lsd-media { position: relative; } .lsd-dock { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--lsd-ring); } .lsd-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; } .lsd-poster img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s var(--ease), transform .35s var(--ease); } .lsd-poster:hover img, .lsd-poster:focus-visible img { opacity: 1; transform: scale(1.02); } .lsd-poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .lsd-poster__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--scope-color-liveset); color: #111827; font-size: 2.1rem; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 6px color-mix(in srgb, var(--scope-color-liveset) 22%, transparent); transition: transform .15s var(--ease); } .lsd-poster:hover .lsd-poster__play { transform: scale(1.05); } /* While the player sits over the slot the poster has nothing to do. */ body.pb-docked .lsd-poster { visibility: hidden; } .lsd .ls-halo { width: 100%; height: auto; aspect-ratio: 1; } .lsd .ls-halo .ls-cover { width: 100%; height: 100%; max-width: none; } .lsd .ls-halo .ls-cover img { border-radius: inherit; } /* ── Controls ───────────────────────────────────────────────────────── */ .lsd-ctl { display: flex; flex-direction: column; min-width: 0; } .lsd-src { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-top: 12px; } .lsd-srclink { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--text-dim); text-decoration: none; white-space: nowrap; } .lsd-srclink:hover, .lsd-srclink:focus-visible { color: var(--white); } .lsd-srclink__icon { display: inline-flex; color: var(--plat, var(--text-dim)); font-size: 1rem; line-height: 1; } .lsd-srclink__icon svg { width: 16px; height: 16px; } .lsd-srclink .bi-arrow-up-right { font-size: .7rem; color: var(--text-muted); } .lsd-mode { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .4rem; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--text-dim); cursor: pointer; white-space: nowrap; } .lsd-mode:hover, .lsd-mode:focus-visible { color: var(--white); background: var(--bg-card-hover); } .lsd-mode > span { display: inline-flex; align-items: center; gap: .4rem; } .lsd-mode kbd { font: 600 .62rem/1 ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace; padding: 3px 5px; border-radius: 4px; border: 1px solid var(--border-bright); background: transparent; color: var(--text-muted); } .lsd-mode__to-column { display: none !important; } .lsd-now { margin-top: 18px; min-width: 0; } .lsd-now__lab { display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--scope-color-liveset); } .lsd-now__n { color: var(--text-muted); letter-spacing: .02em; } .lsd-now__t { margin-top: .35rem; font-size: 1.35rem; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--white); overflow-wrap: anywhere; } .lsd-now__a { font-size: .9rem; color: var(--text-dim); overflow-wrap: anywhere; } .lsd-now__a:empty { display: none; } /* EQ bars: the playing track's marker, here and in the tracklist. */ .lsd-eq { display: none; align-items: flex-end; gap: 2px; height: 11px; } .lsd-eq i { display: block; width: 3px; height: 40%; border-radius: 1px; background: var(--scope-color-liveset); animation: lsd-eq .9s ease-in-out infinite alternate; } .lsd-eq i:nth-child(2) { animation-delay: -.35s; } .lsd-eq i:nth-child(3) { animation-delay: -.6s; } .lsd-eq i:nth-child(4) { animation-delay: -.15s; } @keyframes lsd-eq { from { height: 25%; } to { height: 100%; } } .lsd:not(.is-playing) .lsd-eq i { animation-play-state: paused; } :root[data-motion="reduce"] .lsd-eq i { animation: none; height: 70%; } .lsd.is-current .lsd-now .lsd-eq { display: inline-flex; } /* Scrubber: a thin line cut where each track starts. */ .lsd-scrub { position: relative; display: flex; align-items: center; height: 22px; margin-top: 12px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; } .lsd-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .lsd-scrub__track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); } .lsd-scrub__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--scope-color-liveset); } .lsd-scrub__segs { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .lsd-scrub__segs i { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--bg-base); } /* A long list (dozens of tracks) gets hairline cuts, not a barcode. */ .lsd-scrub__segs.is-dense i { width: 1px; margin-left: -.5px; opacity: .7; } .lsd-scrub__knob { position: absolute; top: 50%; left: 0; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--scope-color-liveset) 32%, transparent), 0 2px 6px rgba(0,0,0,.5); transform: scale(0); transition: transform .15s var(--ease); } .lsd.is-current .lsd-scrub__knob, .lsd-scrub:hover .lsd-scrub__knob, .lsd-scrub:focus-visible .lsd-scrub__knob, .lsd-scrub.is-scrubbing .lsd-scrub__knob { transform: scale(1); } .lsd-times { display: flex; justify-content: space-between; margin-top: 2px; font: .72rem/1.3 ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--text-secondary); } .lsd-times [data-lsd-cur] { color: var(--text); } .lsd-trans { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 6px; } .lsd-trans__side { display: flex; align-items: center; gap: 4px; min-width: 0; } .lsd-trans__side--end { justify-content: flex-end; } .lsd-trans__mid { display: flex; align-items: center; gap: 14px; } .lsd-tb { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 10px; background: none; color: var(--text-soft); font-size: 1.15rem; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); } .lsd-tb:hover, .lsd-tb:focus-visible { background: var(--bg-card-hover); color: var(--white); } .lsd-tb:disabled { opacity: .35; cursor: default; background: none; } .lsd-tb[aria-expanded="true"] { background: var(--bg-card-hover); color: var(--white); } .lsd-play { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; flex: none; border: 0; border-radius: 50%; background: var(--scope-color-liveset); color: #111827; font-size: 1.75rem; cursor: pointer; box-shadow: 0 8px 26px color-mix(in srgb, var(--scope-color-liveset) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .lsd-play:hover { transform: translateY(-1px); } .lsd-play:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } .lsd-play .pb-morph { width: 28px; height: 28px; } .lsd-vol { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 4px; color: var(--text-dim); cursor: pointer; } .lsd-vol input { width: 72px; accent-color: var(--scope-color-liveset); cursor: pointer; } .lsd .ls-share-menu { right: 0; left: auto; } /* The next tracks in the set, three at a time (liveset-deck.js unhides them). */ .lsd-next { margin-top: 18px; } .lsd-next__h { margin-bottom: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .lsd-next__list { list-style: none; margin: 0; padding: 0; } .lsd-next__list .lsd-tr { grid-template-columns: 56px minmax(0, 1fr); min-height: 32px; padding: 4px 0; font-size: .82rem; } .lsd-next__list .lsd-tr__n { display: none; } .lsd-next__list .lsd-tr__t { color: var(--text-muted); } .lsd-next__list .lsd-tr__x { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lsd-next__list .lsd-tr[hidden] { display: none; } /* ── The set: title, credits, sections ──────────────────────────────── */ /* Nothing sits above the page: the viewer's role rides on the Edit pill, a collab invite opens the header, and a hidden set says so after its title with its row's badge (render_liveset_vis_badge(), listing.css). A title too long to share its line sends the badge to the next one. */ .lsd-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .lsd-titlebar .lsd-title { flex: 0 1 auto; min-width: 0; } .lsd-title { margin: 0; font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; color: var(--white); overflow-wrap: anywhere; } .lsd-title--long { font-size: clamp(1.5rem, 2.4vw, 2rem); } .lsd-cred { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: .88rem; } .lsd-cred__w { color: var(--text-secondary); } .lsd-cred .mention--artist-wrap { display: inline-flex; align-items: center; gap: 6px; } .lsd-cred__date { color: var(--text-secondary); } .lsd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; } .lsd-tags { display: flex; flex-wrap: wrap; gap: 6px; } /* As tall as the credit pills above them, not the roomier default chip. */ .lsd-tags .tag-chip { padding: .25rem .65rem; line-height: 1.35; } .lsd-tabs { position: sticky; top: var(--nav-h, 72px); z-index: 3; display: flex; gap: 28px; margin-top: 26px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; transition: background-color .15s var(--ease); } /* A plate only once it pins under the nav (liveset-deck.js), so the rows scrolling beneath it do not show through. */ .lsd-tabs.is-stuck { background: color-mix(in srgb, var(--bg-base) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* The first tab already names the tracklist right above it. */ .lsd-tabs + .lsd-sec--tracklist { margin-top: 10px; } .lsd-tabs + .lsd-sec--tracklist .lsd-h { display: none; } .lsd-tabs::-webkit-scrollbar { display: none; } .lsd-tab { display: inline-flex; align-items: baseline; gap: 5px; padding: 12px 0 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .9rem; font-weight: 600; color: var(--text-dim); text-decoration: none; white-space: nowrap; } .lsd-tab span { font-size: .75rem; color: var(--text-muted); } .lsd-tab:hover { color: var(--white); } .lsd-tab.is-on { color: var(--white); border-bottom-color: var(--scope-color-liveset); } .lsd-sec { margin-top: 28px; scroll-margin-top: calc(var(--nav-h, 72px) + 60px); } .lsd-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); font-size: 1rem; font-weight: 700; color: var(--white); } .lsd-h small { font-size: .75rem; font-weight: 600; color: var(--text-muted); } .lsd-about { font-size: .95rem; line-height: 1.65; color: var(--text-soft); overflow-wrap: anywhere; padding-top: 6px; } .lsd .ls-related__body { margin-top: 10px; } .lsd .ls-report-row { margin-top: 1.5rem; text-align: center; } /* Tracklist rows (views/liveset_tracklist.php) */ /* Folded: a window of rows fading out below (and above, once it has moved down the list to follow the playing track). */ .lsd-tl.is-collapsed .lsd-tr.is-out { display: none; } .lsd-tl.is-collapsed { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 72px), transparent); } .lsd-tl.is-collapsed.is-mid { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 44px, #000 calc(100% - 72px), transparent); } .lsd-tl-more { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-top: -6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); font: inherit; font-size: .85rem; font-weight: 600; color: var(--text-soft); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .lsd-tl-more:hover, .lsd-tl-more:focus-visible { background: var(--bg-card-hover); border-color: var(--border-bright); color: var(--white); } .lsd-tl-more .bi { font-size: .8rem; transition: transform .2s var(--ease); } .lsd-tl-more[aria-expanded="true"] { margin-top: 12px; } .lsd-tl-more[aria-expanded="true"] .bi { transform: rotate(180deg); } :root[data-motion="reduce"] .lsd-tl-more .bi { transition: none; } .lsd-tl { list-style: none; margin: 0; padding: 0; } .lsd-tr { display: grid; grid-template-columns: 28px 74px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 42px; padding: 6px 8px; border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-secondary); } .lsd-tr:first-child { border-top: 0; } .lsd-tl:not(.lsd-tl--timed) .lsd-tr { grid-template-columns: auto minmax(0, 1fr); } .lsd-tl:not(.lsd-tl--timed) .lsd-tr__n { display: none; } /* A list with no times at all keeps no empty time column to indent its text. */ .lsd-tl:not(:has(button.lsd-tr__t)) .lsd-tr { grid-template-columns: minmax(0, 1fr); } .lsd-tl:not(:has(button.lsd-tr__t)) .lsd-tr__t { display: none; } .lsd-tr__n { display: flex; justify-content: flex-end; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--text-muted); } .lsd-tr__t { justify-self: start; padding: 2px 4px; margin-left: -4px; border: 0; border-radius: 4px; background: none; font: 500 .78rem/1.2 ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--scope-color-liveset); cursor: pointer; } button.lsd-tr__t:hover, button.lsd-tr__t:focus-visible { background: color-mix(in srgb, var(--scope-color-liveset) 16%, transparent); color: var(--white); } .lsd-tr__t--none { cursor: default; } .lsd-tr__x { min-width: 0; color: var(--text); line-height: 1.4; overflow-wrap: anywhere; } .lsd-tr--note .lsd-tr__x { color: var(--text-secondary); } .lsd-tr.is-past .lsd-tr__x { color: var(--text-dim); } .lsd-tr.is-past .lsd-tr__t { color: var(--text-muted); } .lsd-tr.is-now { border-radius: 8px; border-top-color: transparent; background: linear-gradient(90deg, color-mix(in srgb, var(--scope-color-liveset) 20%, transparent), transparent 75%); box-shadow: inset 3px 0 0 var(--scope-color-liveset); } .lsd-tr.is-now + .lsd-tr { border-top-color: transparent; } .lsd-tr.is-now .lsd-tr__x { color: var(--white); font-weight: 600; } .lsd-tr.is-now .lsd-tr__num { display: none; } .lsd-tr.is-now .lsd-eq { display: inline-flex; } /* ── Cinema: the video at full width (video sets, wide screens) ─────── */ /* Outside Cinema the side column draws no box: its sections read in the page's one column, in source order. */ .lsd-side { display: contents; } @media (min-width: 901px) { :root[data-ls-view="cinema"] .lsd--video .lsd-mode__to-cinema { display: none !important; } :root[data-ls-view="cinema"] .lsd--video .lsd-mode__to-column { display: inline-flex !important; } :root[data-ls-view="cinema"] .lsd--video .lsd-grid { grid-template-columns: minmax(0, 1fr); } :root[data-ls-view="cinema"] .lsd--video .lsd-deck { display: contents; } /* The stage: black and as wide as the page, so the strip and the set line up with it. The slot in it stays 16:9 - the player is drawn over exactly that box - and as wide as the stage unless that would push the strip below the fold; then it takes the height that fits, centred. */ :root[data-ls-view="cinema"] .lsd--video .lsd-media { display: flex; justify-content: center; border-radius: var(--radius); background: #000; box-shadow: var(--lsd-ring); } :root[data-ls-view="cinema"] .lsd--video .lsd-dock { width: min(100%, calc((100vh - var(--nav-h, 72px) - 200px) * 16 / 9)); box-shadow: none; } :root[data-ls-view="cinema"] .lsd--video .lsd-ctl { position: sticky; top: var(--nav-h, 72px); z-index: 4; flex-direction: row; align-items: center; gap: 14px; margin-top: 10px; padding: 8px 0; transition: background-color .15s var(--ease); } /* A plate only once it pins under the nav, like the tab row. */ :root[data-ls-view="cinema"] .lsd--video .lsd-ctl.is-stuck { background: color-mix(in srgb, var(--bg-base) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border), 0 0 0 100vmax color-mix(in srgb, var(--bg-base) 94%, transparent); clip-path: inset(0 -100vmax); } :root[data-ls-view="cinema"] .lsd--video .lsd-trans, :root[data-ls-view="cinema"] .lsd--video .lsd-times { display: contents; } /* One row that never overflows: the scrubber takes what is left and the track playing now gives way before it; nothing else shrinks. */ :root[data-ls-view="cinema"] .lsd--video .lsd-ctl > *, :root[data-ls-view="cinema"] .lsd--video .lsd-trans > *, :root[data-ls-view="cinema"] .lsd--video .lsd-times > * { flex: none; } :root[data-ls-view="cinema"] .lsd--video .lsd-trans__mid { order: 1; } :root[data-ls-view="cinema"] .lsd--video .lsd-now { order: 2; margin-top: 0; flex: 0 1 220px; min-width: 0; } :root[data-ls-view="cinema"] .lsd--video [data-lsd-cur] { order: 3; } :root[data-ls-view="cinema"] .lsd--video .lsd-scrub { order: 4; flex: 1 1 0; margin-top: 0; min-width: 120px; } :root[data-ls-view="cinema"] .lsd--video [data-lsd-rem] { order: 5; color: var(--text-secondary); } :root[data-ls-view="cinema"] .lsd--video .lsd-trans__side { order: 6; } :root[data-ls-view="cinema"] .lsd--video .lsd-trans__side--end { order: 7; } :root[data-ls-view="cinema"] .lsd--video .lsd-src { order: 8; margin-top: 0; gap: 14px; } :root[data-ls-view="cinema"] .lsd--video [data-lsd-cur], :root[data-ls-view="cinema"] .lsd--video [data-lsd-rem] { font: .75rem/1 ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } :root[data-ls-view="cinema"] .lsd--video .lsd-now__lab { display: none; } :root[data-ls-view="cinema"] .lsd--video .lsd-now__t { margin-top: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-ls-view="cinema"] .lsd--video .lsd-now__a { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-ls-view="cinema"] .lsd--video .lsd-play { width: 48px; height: 48px; font-size: 1.4rem; } /* The heart at the strip's control size, not a second play button. */ :root[data-ls-view="cinema"] .lsd--video .lsd-ctl .like-btn { --like-s: 40px; --like-fs: 11px; } :root[data-ls-view="cinema"] .lsd--video .lsd-next { display: none; } /* The set under the strip. With the tab row gone the tracklist names itself again; one column is plain flow, like Column's reading side. */ :root[data-ls-view="cinema"] .lsd--video .lsd-main { margin-top: 22px; } :root[data-ls-view="cinema"] .lsd--video .lsd-tabs { display: none; } :root[data-ls-view="cinema"] .lsd--video .lsd-sec--tracklist { margin-top: 28px; } :root[data-ls-view="cinema"] .lsd--video .lsd-sec--tracklist .lsd-h { display: flex; } :root[data-ls-view="cinema"] .lsd--video .lsd-about { max-width: 78ch; } } /* Cinema, wide enough for two columns and with something for each: the set's own text on the left (the title, then the tracklist - or the description when there is no tracklist) and the side beside it from the top, the way a theatre-mode page reads; the report entry across the foot. */ @media (min-width: 1024px) { :root[data-ls-view="cinema"] .lsd--video .lsd-main:has(> .lsd-sec):has(> .lsd-side) { display: grid; /* The side grows a little with the page, so "You might like" keeps its titles. */ grid-template-columns: minmax(0, 1fr) clamp(400px, 36%, 460px); grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; } :root[data-ls-view="cinema"] .lsd--video .lsd-main:has(> .lsd-sec):has(> .lsd-side) > * { grid-column: 1; } :root[data-ls-view="cinema"] .lsd--video .lsd-main:has(> .lsd-sec):has(> .lsd-side) > .lsd-side { display: block; grid-column: 2; grid-row: 1 / 3; } :root[data-ls-view="cinema"] .lsd--video .lsd-main:has(> .lsd-sec):has(> .lsd-side) > .lsd-side > .lsd-sec:first-child { margin-top: 0; } :root[data-ls-view="cinema"] .lsd--video .lsd-main:has(> .lsd-sec):has(> .lsd-side) > .ls-report-row { grid-column: 1 / -1; } } /* ── Narrower screens ───────────────────────────────────────────────── */ @media (max-width: 1180px) and (min-width: 901px) { .lsd-grid { grid-template-columns: 380px minmax(0, 1fr); column-gap: 32px; } /* Cinema's strip keeps its scrubber: the volume and the platform's name (its logo stays, and names it on hover) step out. */ :root[data-ls-view="cinema"] .lsd--video .lsd-vol, :root[data-ls-view="cinema"] .lsd--video .lsd-srclink__label { display: none; } } /* Phones and small tablets: one column. A video sticks under the nav with its controls; everything else scrolls beneath it. */ @media (max-width: 900px) { .lsd { width: 100%; padding-top: 0; } .lsd-grid { grid-template-columns: minmax(0, 1fr); } .lsd-deck { position: static; padding: 16px 16px 0; } .lsd-main { padding: 18px 16px 0; } .lsd-next { display: none; } .lsd-vol { display: none; } .lsd-mode { display: none; } .lsd--audio .lsd-media { width: min(280px, 72vw); margin: 0 auto; } .lsd--video .lsd-deck { position: sticky; top: var(--nav-h, 56px); z-index: 5; padding: 0 0 6px; background: color-mix(in srgb, var(--bg-base) 96%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--border); } .lsd--video .lsd-dock { border-radius: 0; box-shadow: none; } .lsd--video .lsd-ctl { padding: 0 16px; } .lsd--video .lsd-src { display: none; } .lsd--video .lsd-now { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; min-width: 0; } .lsd--video .lsd-now__lab { display: none; } .lsd--video .lsd-now__t { margin: 0; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; } .lsd--video .lsd-now__a { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; } .lsd--video .lsd-scrub { margin-top: 4px; } .lsd--video .lsd-trans { margin-top: 0; } .lsd--video .lsd-play { width: 48px; height: 48px; font-size: 1.4rem; } .lsd-tabs { top: calc(var(--nav-h, 56px)); gap: 22px; } .lsd--video .lsd-tabs { position: static; } .lsd-tr { grid-template-columns: 22px 64px minmax(0, 1fr); column-gap: 10px; padding: 6px 4px; } } /* Phone turned sideways: the video takes the height, the controls sit beside it. */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { .lsd--video .lsd-deck { position: relative; top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 0 12px 0 0; } .lsd--video .lsd-dock { height: calc(100vh - var(--nav-h, 56px)); width: auto; } .lsd--video .lsd-ctl { padding: 0; } .lsd--video .lsd-now { flex-direction: column; gap: 0; } .lsd--video .lsd-trans { grid-template-columns: auto auto; justify-content: space-between; } .lsd--video .lsd-trans__side:first-child { display: none; } } /* ── Light theme ────────────────────────────────────────────────────── */ [data-theme="light"] .lsd-now__lab, [data-theme="light"] .lsd-tr__t { color: color-mix(in srgb, var(--scope-color-liveset) 55%, #1e293b); } [data-theme="light"] button.lsd-tr__t:hover, [data-theme="light"] button.lsd-tr__t:focus-visible { color: #0f172a; } [data-theme="light"] .lsd-scrub__track { background: rgba(15,23,42,.14); } [data-theme="light"] .lsd-scrub__knob { background: #0f172a; } [data-theme="light"] .lsd { --lsd-ring: 0 0 0 1px rgba(15,23,42,.1), var(--shadow); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lsd-now__lab, :root:not([data-theme="dark"]) .lsd-tr__t { color: color-mix(in srgb, var(--scope-color-liveset) 55%, #1e293b); } :root:not([data-theme="dark"]) .lsd-scrub__track { background: rgba(15,23,42,.14); } :root:not([data-theme="dark"]) .lsd-scrub__knob { background: #0f172a; } :root:not([data-theme="dark"]) .lsd { --lsd-ring: 0 0 0 1px rgba(15,23,42,.1), var(--shadow); } } :root[data-motion="reduce"] .lsd-poster img, :root[data-motion="reduce"] .lsd-poster__play, :root[data-motion="reduce"] .lsd-play { transition: none; }