/* ============================================================ music.css — the music app ------------------------------------------------------------ The app is the design system's panorama-app template, put on the alignment lattice. That means two things, and this file does nothing else: 1. It uses the system's own components — .metro-np, , , .metro-grid / .metro-cell, .metro-empty. It no longer keeps hand-made copies of them. 2. Every size it sets is a count of the two pitches, a and b, from metro.tokens.css. The ladder --u1 … --u13 is that count: --un is n wide bands with the n-1 narrow gutters between them. --p1 and --p2 are one and two full periods. --u2 43 a list row's index, art and buttons --u6 155 s2 — one album cover --u12 323 s3 — one column, and the now playing art --p2 56 a list row, and the play button Nothing here invents a colour, a duration or a curve. Where a number is not on the lattice it is because it is chrome the lattice does not govern — a 1px rule, a 3px seek line. ============================================================ */ /* ============================================================ 1. the page as fixed bands ------------------------------------------------------------ progress 3px fixed (shell, painted over the title) status bar 26px hidden (kept for its label, read by tests) app name 146px fixed (the panorama's own title band) content 1fr what is left 146 is --grid-top plus two periods, so the sections below start on a lattice line rather than near one. Only the content row flexes, so nothing reflows when the window changes size. There is no bottom bar. The transport lives in the now playing panel, under the track it is controlling. ============================================================ */ .music-page{ /* Every shell row, not just the main one. The app name band therefore starts at y=0 and the progress bar and status bar float over it, rather than pushing it down. */ grid-row:1 / -1; grid-column:1; display:grid; grid-template-rows:minmax(0, 1fr); height:100%; min-width:0; min-height:0; overflow:hidden; } /* The progress bar sits on top of the title, not above it. Transparent, so the app name reads through; the shell paints it --chrome otherwise. */ metro-shell:has(.music-page){ position:relative } metro-shell:has(.music-page) > metro-progress{ position:absolute; top:0; left:0; right:0; background:transparent; } /* The status bar stays hidden in this app. It is kept in the markup rather than deleted because its label is still set from script and is how the tests read whether the live catalogue or the baked slice is in use. */ metro-shell:has(.music-page) > metro-status-bar{ display:none } /* ============================================================ 2. the panorama, on the lattice ------------------------------------------------------------ A section is one start-menu column wide. That is the whole idea: the music app and the start screen are measured in the same unit, so a cover here is the same square as a tile there. section box --col-pitch 336 = col-w + b section content --col-w 323 = u12 = one s3 tile a wide section two of those 672 content 659 = 2 cols + b The b of padding on the right is the gutter between columns, so consecutive sections land on 0, 336, 672 — exactly the pitch the tile grid uses. ============================================================ */ .music-page metro-panorama{ /* the title band, ending on a lattice line */ --pano-title-h:calc(var(--grid-top) + var(--p2)); /* 146 */ /* the title starts on the same left margin as the sections under it */ --pano-title-margin:var(--grid-left); /* phone: how much of the next section shows. 2a + b. */ --pano-peek:var(--u2); /* 43 */ min-height:0; height:100%; } @media (min-width:760px){ .music-page metro-panorama{ /* a whole column, not a round 420 */ --pano-section-w:var(--col-pitch); /* 336 */ --pano-peek:var(--p1); /* 28 */ } } /* The lattice's left margin is put on the section's `left`, not as padding on anything above it. A section is absolutely positioned, and an absolutely positioned box is laid out against its ancestor's PADDING box — so padding on .pano-viewport moves nothing. Shifting `left` moves every section by the same 20px instead, which keeps the pitch at --col-pitch and lands the first section's content on the first grid line. Padding is right-side only, and it is the b gutter between columns. That leaves the content box at exactly --col-w. */ .music-page metro-panorama-section{ left:var(--grid-left); padding:0 var(--b) var(--space-8) 0; } /* ============================================================ 3. now playing ------------------------------------------------------------ .metro-np from metro.transport.css, with the art set to one column. Since the section's content box is also one column, the art is a full-width s3 square and everything below it lines up with its edges. ============================================================ */ .music-page .metro-np{ --np-art:var(--u12); /* 323 — s3 */ gap:var(--b); } /* The art is filled with a background-image, the way the template does it, so there is no to size. This keeps the glyph centred when there is no cover to show. */ .music-page .metro-np .np-art{ width:100%; max-width:var(--np-art) } /* `hidden` is a UA display:none, and metro.base.css gives metro-icon an explicit display:inline-flex — which wins. Without this, the glyph stays on top of the cover it is standing in for. */ .music-page .metro-np .np-art > metro-icon[hidden]{ display:none } /* idle: nothing playing. With a track on, the invitation to start one is out of the way. With none, so is everything that would be describing a track that is not there — the title block, the scrub line, the two times, the volume. The five buttons stay. They are drawn disabled, which is the phone's behaviour and is also what tells you the panel is a player at all. */ .music-page .metro-np:not([data-idle]) .np-idle-note, .music-page .metro-np:not([data-idle]) .np-idle-only{ display:none } .music-page .metro-np[data-idle] .np-text, .music-page .metro-np[data-idle] .tp-scrub, .music-page .metro-np[data-idle] .tp-times, .music-page .metro-np[data-idle] .tp-vol{ display:none } /* with the scrub gone, the button row has nothing to sit under */ .music-page .metro-np[data-idle] .tp-row{ margin-top:0 } .music-page .np-idle-note{ color:var(--fg-dim); font-size:var(--t-normal); max-width:32ch; margin:0; } /* ============================================================ 4. the transport ------------------------------------------------------------ owns no audio: it emits what was pressed and music.js drives the