/** * LAYOUT ONLY, for demo/player/index.html. * * Not part of the package. Every surface, colour and edge comes from the kit; * this file decides where the boxes sit. If a rule here starts describing what * something LOOKS like, the token it wanted is missing and that is worth * reporting rather than patching around. * * ── The arrangement is Winamp 2's, block for block ─────────────────────── * Three stacked windows: the player, the equaliser, the playlist. Inside the * player, reading down: a small analyser beside the time, the bitrate column * to its right, the title on its own line, then the transport with the volume * and balance beside it, then the seek bar across the bottom. * * What is NOT Winamp's is the scale. Its main window was 275x116 with 23x18 * transport buttons, and this kit's floor is a 32px target because WCAG 2.5.8 * says so and a contract test holds it. So this is the same composition at * roughly twice the size. demo/player/classic.html is the literal one, and it * says plainly what it gives up to be literal. */ body { margin: 0; min-height: 100vh; display: grid; place-items: center; background-color: var(--pw-color-base-100); font-family: var(--pw-font-ui); color: var(--pw-color-base-content); } /* The page's inset lives here, not on : react-remove-scroll zeroes body's paddings and margins while a popup is open, and on overlay scrollbars every value computes to zero, so the whole page jumps. test/css.test.mjs lints for it. */ #root { padding: var(--pw-space-xl); display: grid; place-items: center; } /* 620 rather than a round 600, and the number is measured. Ten bands plus the preamp need 492px of fader at this density, the preamp column takes 60 and the gap 12, so the window has to hand the band strip at least 564 before its own padding. Anything tighter and the 16k band falls off the right edge into .pw-eq's overflow, which is correct behaviour and a bad look. */ .stack { width: min(620px, 100%); display: grid; gap: var(--pw-space-sm); } /* ── The player window ──────────────────────────────────────────────────── */ .deck { display: grid; gap: var(--pw-space-sm); } /* Analyser, time, bitrate. Winamp's top strip. */ .deck-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--pw-space-sm); align-items: center; } /* 102, so twenty bands come out whole pixels: 20 x 3 plus 19 gaps and 2 padding of 2px each. At 92 every band was 2.5px and every other bar edge was grey at 1x. */ .deck-top .pw-visualiser { width: 102px; min-height: 62px; height: 100%; } .deck-meta { display: grid; gap: 2px; justify-items: start; font-size: var(--pw-text-micro); font-family: var(--pw-font-mono); line-height: 1.2; opacity: 0.85; } /* The title, full width, on its own line. minmax(0, 1fr) rather than a bare grid: an auto track's width depends on its content, so the readout's own `width: min(22rem, 100%)` had a percentage with nothing definite to resolve against and fell back to shrink-to-fit. It sized to the title and was clipped by the window around it, which also meant it never measured as overflowing and so never scrolled, which is the whole point of a marquee. A definite track gives the percentage something to answer. */ .deck-title { display: grid; grid-template-columns: minmax(0, 1fr); } /* Transport on the left, volume and balance stacked on the right. */ .deck-controls { display: grid; grid-template-columns: auto minmax(220px, 1fr); gap: var(--pw-space-md); align-items: center; } /* Label, control, value, per row. Fixed label and value columns, so the sliders are the same length under every skin's type. */ .deck-pots, .deck-seek { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 6.5rem; column-gap: var(--pw-space-sm); row-gap: var(--pw-space-2xs); align-items: center; } .deck-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* The two window toggles, bottom right, the way Winamp sits EQ and PL. */ .deck-windows { display: flex; gap: var(--pw-space-2xs); justify-content: flex-end; } /* ── The equaliser window ───────────────────────────────────────────────── */ .eq-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pw-space-md); align-items: start; } .eq-preamp { display: grid; gap: var(--pw-space-2xs); justify-items: center; } .eq-switches { display: flex; gap: var(--pw-space-2xs); align-items: center; flex-wrap: wrap; margin-bottom: var(--pw-space-sm); } /* ── Page chrome, which is not part of any window ───────────────────────── */ .page-chrome { display: flex; gap: var(--pw-space-sm); align-items: center; justify-content: center; flex-wrap: wrap; font-size: var(--pw-text-micro); } .page-hint { margin: 0; max-width: 62ch; text-align: center; font-size: var(--pw-text-micro); line-height: var(--pw-leading-body); opacity: 0.8; } /* ?bare=1, which is what the showcase iframe loads: the page chrome goes and the ground goes transparent, so the comp's backdrop shows through instead of a slab of --pw-color-base-100 sitting on top of it. */ html:has(body[data-bare]), body[data-bare] { background-color: transparent; background-image: none; } body[data-bare] { min-height: 0; } /* Centred in the frame, so a skin whose windows run shorter sits in the middle of it rather than at the top: the four skins measure 522 to 576 tall in the same frame. Not by place-items, which centred 535.69 at 32.16 and blended the top edge into the ground. The page writes --bare-top as a whole pixel instead. */ [data-bare] > #root { padding: var(--bare-top, 0) 0 0; min-height: 100vh; place-items: start center; } body[data-bare] .page-chrome, body[data-bare] .page-hint { display: none; } /* ?lock: every skin at the same geometry, so a clip that cuts between skins changes the styling and nothing else. These are the sizing tokens that differ between skins, measured, pinned to chrome's values. Fonts still differ in width, so the controls sized by their label get fixed widths. Everything a skin paints (colour, face, bevel, clip, texture) is left to the skin. */ body[data-lock] { --pw-panel-pad: 1.5rem; --pw-control-gap: 0.5rem; --pw-control-pad-x: 0.75rem; --pw-control-text: 0.9375rem; --pw-badge-h: 1.5rem; --pw-text-ui: 0.9375rem; --pw-text-micro: 0.75rem; --pw-leading-ui: 1.2; --pw-tracking-ui: 0; --pw-eq-label-space: calc(0.25rem + 0.75rem); } body[data-lock] .deck-windows .pw-toggle { width: 4.5rem; } body[data-lock] .eq-switches :is(.pw-toggle, .pw-button) { width: 4.5rem; } body[data-lock] .pw-list-secondary { flex: 0 0 3.5rem; text-align: right; } /* ?layout=columns */ body[data-layout="columns"] .stack { width: auto; } body[data-layout="columns"] .stack .stack { grid-template-columns: repeat(2, 620px); align-items: stretch; } body[data-layout="columns"] .stack .stack > :nth-child(3) { grid-column: 1 / -1; } @media (max-width: 620px) { .deck-top { grid-template-columns: minmax(0, 1fr); } .deck-controls { grid-template-columns: minmax(0, 1fr); } .eq-body { grid-template-columns: minmax(0, 1fr); } } /* The title readout is what set this page's own floor, and the floor was 482px: a marquee is 22rem wide by token, and with #root's inset that left a phone scrolling the page sideways. The readout was already willing to shrink (lcd.css sizes it min(22rem, 100%)) and the marquee already scrolls copy longer than its box. What stopped it was the grid: an item's automatic minimum is its content, so every box above it held the full 22rem open. This is the page saying it will take the width it is given. */ .deck, .deck-title { min-width: 0; }