/* * Mediante — a browser player and editor for OctaMED and MED SoundStudio modules. * Copyright (C) 2026 Philip Kaulfuss * * This program is free software; you can redistribute it and/or modify it under * the terms of the GNU General Public License as published by the Free Software * Foundation; either version 2 of the License, or (at your option) any later * version. * * This program is distributed in the hope that it will be useful, but WITHOUT * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. * * You should have received a copy of the GNU General Public License along with * this program; if not, see or the * LICENSE file in the project root. */ @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Oswald:wght@400;600&display=swap'); :root { /* THE FONT ROLES. js/fonts.js swaps these for a chosen font, sized with size-adjust and ascent/descent overrides to take exactly the space these defaults take -- so no rule here may name a font directly. Titles are every Oswald rule; text is everything else; pattern is the grid (#pat-rows and js/canvas-grid.js). The same three strings are REF[role].stack in js/fonts.js, and stuff/regression/fonts.js holds the two in step. */ --font-text: 'Share Tech Mono', monospace; --font-title: 'Oswald', sans-serif; --font-pattern: 'Share Tech Mono', 'Consolas', monospace; --marker-slot: 8px; /* the unused-instrument bullet's own column */ --bg: #1c1c1c; --bg-mid: #252525; --bg-panel: #2a2a2a; --bg-inset: #161616; /* THE PATTERN WELL, split from --bg-inset 2026-08-22. --bg-inset means "a sunken surface in the chrome" -- the transport group, the VU well, dialog panes, scrollbar tracks, 20 sites. The pattern grid is not one of those: a tracker's pattern view is a DARK field even when the chrome around it is light, which is what OctaMED Pro, ProTracker and Ultimate Soundtracker all do. With one token the light tributes had to choose, and choosing dark put black text on a black transport group. var() of --bg-inset, so every existing theme is unchanged. */ --bg-pattern: var(--bg-inset); /* ── SITES THAT A THEME COULD NOT REACH ─────────────────────────────────── Each of these was a literal, or a token borrowed from a surface it does not sit on. All are defined as var() of what they used to resolve to, so this block moves no colour; the tributes override them below. --grid-row the row-number gutter. It took --text-dim, which in a LIGHT-chrome theme is a dark ink generated for the panel -- painted onto a black pattern well it measured 1.66:1 (Professional) and 1.39:1 (Nonplusultra). --grid-row-play the same number on the play row. --scrollbar-* the last two untokenised literals in the file. Left as literals by work order D because they are SURFACES and pointing them at --border/--border-hi would have been semantically wrong; these are the surface tokens it asked for. --menubar-ink the menu-bar item ink, so a theme can make that bar a different colour from its panels. --play-lit the transport button while playing, and --rec-lit while recording -- the latter was an inline style written from js/app.js, which no stylesheet can reach. */ --grid-row: var(--text-dim); --grid-row-play: var(--accent-hi); --scrollbar-track: var(--bg-inset); --scrollbar-thumb: #3a3a3a; --scrollbar-thumb-hover: #555555; --menubar-ink: var(--text); /* AND ITS DIM RUNG. #menu-title took --text-dim, which is derived for the PANEL -- fine while the menu bar matches the panel, wrong the moment a theme gives the bar a colour of its own. Measured: 1.66:1 on Professional (a panel-grey dim on a BLACK bar) and 1.62:1 on Blorange (a pale-blue dim on a WHITE one). Phil, 2026-08-23: 'The "mediante" text at the top right corner is feint and hard to read on Blorange and Professional.' */ --menubar-ink-dim: var(--text-dim); /* The menu highlight, as a PAIR so a theme can choose its mechanism. The default is the accent wash the app has always used. The Amiga tributes override it to INVERSE VIDEO -- Phil, 2026-08-22: "those should use inverse video for selections", and his own definition of it: "black on grey becomes grey on black". */ --menu-hi-bg: var(--accent-a16); --menu-hi-ink: var(--accent-hi); --menu-hi-key: var(--accent-ink); --status-ink: var(--text-dim); /* Phil, 2026-08-22: "Colours used only for those buttons. I would prefer if they fit in with the theme." So neither is a one-off any more: play lights up in the LED colour, REC fills with the accent -- and every theme already defines both. --green stays for the VU and success states, which are semantics, not chrome. */ --play-lit: var(--seg-on); --rec-lit: var(--accent-fill); --rec-ink: var(--on-accent); /* The button's LIT (top-left) bevel edge, so a theme can raise a plate properly: light top-left, dark bottom-right. --border-control draws all four sides and is pinned across 23 controls, so it cannot be the light one on its own. Per-side border COLOURS are explicitly exempt from control-uniformity.js's rule (its BEVEL check), which is how .btn already sets its bottom-right. */ --btn-edge-hi: var(--border-control); /* A LIT BUTTON'S OWN FILL, split from --accent-fill. The pattern cursor (.pc .cs) and the lit button (.btn.on) were the same token, so a theme could not have a PINK cursor and INVERSE-VIDEO buttons at once -- which is exactly what OctaMED does and what was asked for. */ --btn-on-bg: var(--accent-fill); --btn-on-bg-hi: var(--accent-fill-hi); --btn-on-ink: var(--on-accent); --bg-header: linear-gradient(180deg, #383028 0%, #2a2018 100%); /* THE INK ON THAT HEADER, split from --accent-ink 2026-08-22. A tribute whose title bars are BLUE needs white text on them -- and white is 2.0:1 on the same theme's grey panel, where --accent-ink also has to read. One token cannot do both, and MagicWB's title bars really are blue. var() of --accent-ink, so every existing theme is unchanged and only a theme that colours its header differently has to say so. */ --header-ink: var(--accent-ink); --border: #3a3a3a; --border-hi: #555; /* EVERY CONTROL'S EDGE AND CORNER, from one place. Phil 2026-08-09, deciding the toolbar inventory: "unify the greys and radius". There were FOUR greys for the same visual job — #555 on .btn, #333 on the entry flags, #383838 on the bar dropdowns, #3a3a3a on the waveform toggle — written at four different times, with nothing distinguishing the cases. Anything new points at these; stuff/regression/control-uniformity.js fails if it does not. */ --border-control: #3a3a3a; --radius-control: 2px; /* ...and a ROUND control's: a radio is a circle by definition, not a corner style (Convert to Mix Mode brought the first one, 2026-09-28). */ --radius-round: 50%; --accent-ink: #d4890a; /* THE FILTER CURVE'S FOUR COLOURS. They live HERE, not on .fx-curve, and that is the entire fix of 2026-08-23. Declared on the canvas element they were more specific than :root[data-theme=...], so they SHADOWED every theme's own values -- which the two generators had been emitting correctly all along. Measured before the move: Magique declared --fxc-hot #000000 (9.57:1 on its own ground) and the canvas drew var(--accent-ink) #FFA997 instead, at 1.19:1. The curve was invisible on that theme and the generator had never once reached the screen. LITERAL HEXES, NOT var() ALIASES, for three measured reasons. An alias re-creates the same bug one scope up: --accent-ink is hand-overridden away from its generated value on three of the four tributes, so a tenth theme that tuned its accent and forgot one --fxc- line would silently inherit the wrong colour again. derive() skips any value with no hex, so an alias could never be seen by the ramp. And the unthemed :root is a REAL state (see js/theme.js: "the fallback if the attribute is missing or unknown"), as is data-theme="custom" before any pen is stored -- in both, this quad is what a user actually sees. These four are not hand-picked either: they are fxcRungs() over this palette's own tokens, the same function both generators call, run against --bg-inset #161616. 6.36 / 5.82 / 3.22 / 2.20, ordering 1.97x and 1.46x. stuff/regression/fx-curve-contrast.js holds all nine themes and this base to the rule. */ --fxc-ink: #9a9184; --fxc-line: #534e48; --fxc-hot: #d4890a; --fxc-ghost: #8d5e0f; /* THE ACCENT'S FILL ROLE, split from its ink role 2026-08-22. One token cannot be both: as INK it must clear 4.5:1 against the app's grounds, as a FILL it must clear 4.5:1 against the ink laid ON it and 3:1 against the ground it sits in. Amber satisfied all three by luck -- it sits near the luminance peak of the hue circle. A tribute does not get that luck: Workbench 1.3's orange is 3.05:1 as ink on its own blue and 8.77:1 as a fill under black, so a readable variant has to lift the INK and leave the fill exactly as it shipped. That is impossible while one token does both. DEFINED AS var() OF THE INK RUNGS, not as copies of their values. That is what makes this split cost nothing: every existing theme sets only the ink rungs, and its fills follow automatically instead of being left behind at the base accent -- which for the tributes would have meant an AMBER edit cursor inside a monochrome MED theme. A theme whose two roles genuinely differ overrides the fill; that is the whole point, and nothing else has to change. */ --accent-fill: var(--accent-ink); --accent-fill-hi: var(--accent-hi); /* BACK-COMPAT ALIASES, deprecated 2026-08-22. `plugins/README.md` has published --amber/--amber-hi/--amber-dim as part of the plugin styling contract since the WAM host shipped, and a plugin GUI is mounted into the light DOM where it reads these directly. Renaming without aliases would not error -- every third-party `var(--amber, #e8a33d)` would silently take its FALLBACK and render a fixed amber under every theme, which is exactly the failure the plugin token audit already found once with --border-color / --panel-bg / --panel-fg. Aliases, not copies: they cannot drift. Our own plugins have been moved to the new names; these exist only for code we do not ship. */ --amber: var(--accent-ink); --amber-hi: var(--accent-hi); --amber-dim: var(--accent-dim); --accent-dim: #8a5a07; /* THE HALO'S VALUE. js/ink-halo.js decides WHERE it goes; this is only what it draws when it fires. It began as a static `text-shadow` on every rule that inked text with the accent, and that could not work: text-shadow INHERITS, so a row that set it handed it to children carrying their own, darker inks -- measured, .seq-row passing a 1px black shadow down to a .seq-num whose colour is rgb(51,51,51). Phil, 2026-08-23: 'The blocks/sequence numbers get drop shadows even though the text is black, but not on the instruments list... I still think a dynamic system is worth trying.' He is right on both halves: the static version was arbitrary in its coverage AND wrong where it landed. A theme can set this to `none` to opt out entirely. */ --ink-halo: 1px 1px 0 #000000; /* THE EDIT CURSOR'S OUTLINE. Split from --accent-dim (which 29 other rules also read) so a theme can colour the cursor without moving every dim edge with it. Professional asks for exactly that: OctaMED Pro 4's cursor is red -- #FF0000/#FF8888/#FFAAAA are measurable in octamedpro4xx.png -- while its dim edge is the blue-grey #666677. Read by BOTH the DOM renderer and js/canvas-grid.js, which is the pairing that has silently diverged twice. */ --cursor-line: var(--accent-dim); --accent-hi: #f0a820; --green: #4cad52; --green-dim: #2a5c2e; /* THE VU GRADIENT'S FLOOR, split from --green-dim 2026-08-23. That token was doing two jobs on two different grounds -- the meter's 0% stop (on --vu-track) and the Render button's border (on the dialog panel) -- so neither could be fitted without breaking the other. The classic overloaded token; this is the fifth one this appearance work has had to split. */ --vu-floor: var(--green-dim); --text: #c8c0aa; /* Was #686058, which measured 2.33:1 against --bg-panel — below even WCAG's 3.0 threshold for UI text, and reported as hard to read (Phil 2026-08-06). #9a9184 measures 4.62 on panel and 5.82 on inset, so it passes AA for body text on both, while staying clearly dimmer than --text at 7.91 — the hierarchy that makes a disabled menu row read as disabled survives. */ --text-dim: #9a9184; --text-hi: #e8e0c8; /* ── THE PAN KNOB (task #11) ────────────────────────────────────────────── Phil, 2026-08-25: "we could use a different colour or shade for the pan knobs". A volume knob takes --accent-ink; pan needs to read APART from it at a glance, on a strip where the two controls sit one above the other. --accent-dim was the obvious candidate and is WRONG: it is a GREY in the themes that matter (professional #666677, magique #7B7B7B), so "the same hue, quieter" would give grey knobs in exactly the themes that separate their accents. The solo chips carry a real second hue, but those MEAN solo and borrowing them would blur that. So: a token of its own, defaulting to the theme's PRIMARY INK -- which is light on the dark themes and BLACK on the light ones (professional, magique, nonplusultra all set --text-hi: #000000). That is the point rather than an accident: the knob is whatever reads hardest against that theme's chrome, and it is always a NEUTRAL beside the accent-coloured volume knob. Checked against the rail each one sits on rather than assumed: professional knob #000000 on --bg-rail #9999AA magique knob #000000 on #959595 nonplusultra knob #000000 on #997755 blorange knob #FFFFFF on #0055AA and the volume knob keeps its hue in all four, so the two never collide. Pan is a POSITION, not a level, which is what the neutral says. A theme that wants a distinct pan hue overrides this one line. */ --pan-ink: var(--text-hi); --btn-face: #3c3c3c; --btn-hi: #4a4a4a; /* The button gradient's BOTTOM stop, separate from the flat face so a theme can set how deep the bevel runs without darkening the two flat consumers of --btn-face (the colour swatch and the wave-height chip). Phil, 2026-08-22, on Professional: "the gradients on buttons and title bars are too bright, they should be a darker grey (the mid-grey should be the middle of the gradient)" -- which is a statement about this stop. */ --btn-lo: var(--btn-face); --btn-press: #1e1e1e; /* THE UNLIT READOUT GROUND, and nothing else since 2026-08-22. It was also serving as the INK on `.btn.on` and `.fr-f.sel`'s accent fills, which is --on-accent's whole job. The overload made a light theme impossible to express: Magique needs a DARK readout so the .seg glow reads, and WHITE ink on its blue fill, and one token cannot be both. Re-pointing those three sites moved #1a1008 -> #000000 on them: OKLab dE 18.5, below this project's own confusability floor of 25, and the contrast on the amber fill IMPROVES from 6.58:1 to 7.38:1. */ --seg-off: #1a1008; --seg-on: #f0a820; --panel-w-l: 130px; --panel-w-r: 238px; /* THE UI SCALE, as a unitless ratio. Consumed by `zoom` on body AND by a calc() division on every vw/vh below — viewport units resolve against the UNZOOMED viewport and are then multiplied by the zoom, so an undivided 100vh becomes 150vh of content at 1.5. js/ui-scale.js owns the value. */ --ui-scale: 1; --menubar-h: 21px; --transport-h: 46px; --status-h: 19px; /* ── DENSITY-OWNED SPACING ──────────────────────────────────────────────── Every value a Compact flip is allowed to touch, and nothing else. They are SPACING ONLY -- no font size, no hit target, no border width -- because density and scale are orthogonal axes and shrinking type is what scale already does better. The tight values live in the [data-spacing="tight"] block near the themes; keeping the pair adjacent in the vocabulary but apart in the file is what lets the gate assert one is componentwise smaller than the other. */ --d-transport-pad: 3px 10px; --d-edbar-pad: 2px 10px; --d-edbar-gap: 5px; --d-dlgtitle-pad: 4px 12px; --d-set-pad: 10px 14px; --d-set-gap: 12px; --d-set-rowgap: 6px; --d-sechead-gap: 14px; --d-panelhead-pad: 1px 7px; /* THE MENUS. Phil, 2026-08-22: "In compact UI mode, the menus (top menu bar, right click menus) could be a lot denser. Lots of padding in them." A ten-row dropdown gets about 40px shorter from the row padding alone. */ --d-menubar-item-pad: 0 7px; --d-menu-pad: 2px; --d-menuitem-pad: 2px 6px; --d-menu-gutter: 7px; /* the tick column left of every label */ --d-menu-keygap: 14px; /* label-to-shortcut gap */ --d-ctx-minw: 150px; --d-drop-minw: 170px; /* SECOND ROUND OF DENSITY TOKENS, 2026-08-24. Phil: "there's still a lot of padding around the UI that could be trimmed just a little more in compact mode. The transport bar, the edges of windows etc." These were the fixed values those two things were actually made of -- none of them was under density control at all, so Compact could not reach them however far the existing tokens were pushed. Declared here at exactly what they already were, so Normal does not move by a pixel. */ --d-dlgbody-pad: 12px; /* .sd-body -- the window edges */ --d-dlgfoot-pad: 10px 12px; /* .sd-foot */ --d-dlgfoot-gap: 10px; --d-transport-gap: 8px 8px; /* between the transport's own groups */ --d-tright-gap: 4px; --d-panes-gap: 12px; /* between a dialog's side-by-side panes */ --d-infogrid-pad: 5px 7px; /* MODULE INFO and the other key/value grids */ --d-set-dialog-h: 620px; /* the tallest Settings tab; see .set-dialog */ /* ZERO IN BOTH DENSITIES (Phil, 2026-08-26: "can we remove all of the padding around the pattern view?"). The token stays because the density system owns this gap and a future density may want it back -- but the grid is the thing people look at, and 8px of dead pane on each side is 16px of width and height it never got. The 1px border stays: it is the focus indicator (its colour changes on .ed-focus), not decoration. */ --d-pattern-margin: 0px; /* the gap around the pattern pane itself */ --d-frrow-gap: 8px; /* label-to-control inside a dialog row */ --d-frrow-mb: 9px; /* and between those rows */ /* The Mixer window's rail (task #11 part 3). A strip here is NARROW and fixed -- the whole point of undocking is seeing the faders "closer together, without having to line up with the channels in the pattern" -- so its width is a density decision rather than --pc-w. */ /* WIDER SINCE ROUND 3 (Phil, 2026-09-12: "The channel names are now truncated in the mixer window", and "'no send target' is truncated and the caret overlaps it"). 76 px was chosen when a strip held a fader, a meter and two buttons; round 2 added a name, a send picker with its own caret, an output footer and a peak readout, and at 76 px every one of those ellipsised. The rail scrolls and, since the CONTENTS of a strip outside it are skipped entirely (content-visibility on `.mixs > *` — see the long note at .mixs), width no longer costs layout on strips nobody is looking at. */ /* A DOCKED STRIP WITH NO PATTERN COLUMN UNDER IT (round 5): every bus, and the master. Narrow because there is nothing to line up with — the channel columns are --pc-w so their headers sit over their cells, and these sit over the hatched area past the last track. */ --d-phbus-w: 26px; --d-mixstrip-w: 96px; --d-mixstrip-gap: 4px; --d-mixstrip-pad: 6px; /* THE STRIP'S SIX FIXED ROWS (round 4 · the rail rewrite). Every strip declares the SAME template from these, which is what makes the rows line up without the rail sizing them — see the long note at .mixs. Each is the row's own content height, measured across all 36 strips of bastardo2 with content-visibility skipping forced OFF so nothing under-reported. They are px rather than em because `zoom` carries the scale axis (body { zoom: var(--ui-scale) }), so a px here already scales; density is the axis that needs its own values, and does not currently want different ones. */ --d-mixs-r-head: 13px; --d-mixs-r-ins: 14px; --d-mixs-r-sends: 14px; /* the FLOOR; js/mixer-window.js raises it */ --d-mixs-r-pan: 11px; --d-mixs-r-ms: 13px; --d-mixs-r-out: 14px; /* ── THE METER COLUMN'S WIDTH, SAID ONCE (round 5 · U5) ──────────────── Phil: "clip indicator at the top is too wide". It was 88px over a 29px meter — the lamp is a full-width flex child and the meter is not, so the lamp reported a channel by spanning the whole strip while the thing it reports on sat in the middle of it. The meter's width is not a number anyone chose: it is two bars, the fader's box between them, less the grab the bars are pulled back over, plus its own border. Written out here so the lamp can be exactly as wide as the meter BY DERIVATION rather than by a 29 that would drift the first time a bar changed width. --vu-grab falls back to 6px for the same reason .mixs-meter > i does: it is declared on #pat-hdr, and this window is not inside it. */ --d-mixs-bar-w: 11px; --d-mixs-scale-w: 16px; --d-mixs-meter-w: calc(3 * var(--d-mixs-bar-w) - var(--vu-grab, 6px) + 2px); /* ── A NESTED GROUP BLOCK'S COLOUR (round 3 · P1) ──────────────────────── Phil: "The colour coding is what really makes this work ... Ableton uses the same colour for group members". The colour is the MODULE's — every group has one from OPS.fxGroupColor and every track already carries its group's — so js/mixer-window.js writes these five onto each block inline (blockVars()). A stylesheet cannot enumerate a palette whose length it does not know, which is why they are custom properties and not a class per hue. What is declared here is what a block with NO colour falls back to, and it is deliberately the accent dressing round 2's box already had. */ --mixg-colour: var(--accent-ground-soft); /* the bar, and the down stroke */ --mixg-ink: var(--accent-hi); /* ink chosen FOR that colour */ --mixg-edge: var(--accent-dim); /* the block's frame */ --mixg-strong: transparent; /* wash on the group's own strip */ --mixg-soft: transparent; /* ...and on its members */ /* Repeated colour values, given names by the WO-29 sweep (2026-08-21). Each value is exactly what shipped before — the sweep relocates the literals, it moves no colour; colour-tokens.js pins that. */ --bg-hover: #333333; --seam: #111111; --seam-soft: #222222; --seam-dark: #0a0a0a; --bg-rail: #1a1a1a; --accent-wash: #2a2010; --bevel-hi: #444444; --on-accent: #000000; --ok-hi: #6fe07a; --bg-hover-warm: #383028; --bg-rail-hover: #2a2620; --bg-grid-head: #1c1a14; --seam-row: #202020; --alert: #a33; --stripe-beat: rgba(255,255,255,0.014); --stripe-bar: rgba(255,255,255,0.028); --scrim: rgba(0,0,0,.6); --scrim-soft: rgba(0,0,0,0.55); --shadow-strong: rgba(0,0,0,0.9); --shadow-mid: rgba(0,0,0,0.7); --shadow-deep: rgba(0,0,0,0.8); /* THE ACCENT AS BARE CHANNELS. Every alpha of the accent -- here, and in js/canvas-grid.js -- resolves from these two, so a theme sets the colour ONCE instead of needing a token per alpha. rgb(r g b / a) is CSS Color 4 and canonicalises to exactly the rgba() these replaced, which is why this substitution moves no colour. */ --accent-rgb: 212 137 10; --accent-hi-rgb: 240 168 32; --accent-a16: rgb(var(--accent-rgb) / 0.16); /* The play-row tints. Named because the canvas grid draws the SAME two colours as `.pr.cur` and `.pr.cur .prn` below, and kept its own literal copies of them until the theme engine landed. */ --play-row: rgb(var(--accent-rgb) / 0.11); --play-row-gutter: rgb(var(--accent-rgb) / 0.14); /* The looped region behind an instrument's waveform preview. It was a literal rgba(212,137,10,0.10) in js/instrument-waveforms.js -- the BASE amber, so it did not follow the theme, and once it did, 10% of a violet or a navy is far less visible than 10% of amber was: amber sits near the luminance peak of the hue circle and the colours that replaced it do not. 0.18 restores the visibility the amber had rather than the number it had. A token, not a constant in the canvas, so a theme whose accent needs more or less can say so. */ --wave-loop: rgb(var(--accent-rgb) / 0.18); /* WO-30 semantic families (2026-08-21). One token per meaning, so a theme sets a FAMILY rather than a value. Values are exactly what shipped before; colour-tokens.js pins CHANGED:0 for this pass. */ --grid-note: #6cc; --grid-instr: #c8a060; --grid-cmd: #c080c0; --grid-level1: #b8a080; --grid-level2: #8e7d62; --grid-vol: #80b880; --mute-bg: #5a1a1a; --mute-edge: #8a2a2a; --mute-ink: #ff8080; --solo-bg: #5a4a1a; --solo-edge: #aa8a2a; --solo-ink: #ffd070; --vu-track: #0e1a0e; --vu-track-edge: #1a2a1a; --vu-safe: #6cd46c; --vu-warn: #e0e040; --vu-clip: #e04040; --accent-ground: #3a2a10; --accent-ground-soft: #2a2415; --accent-ground-deep: #1c1a10; --stripe-bar-gutter: #211f1a; --stripe-beat-gutter: #1b1a17; --sel-fill: rgba(120,170,255,0.20); --sel-edge: rgba(150,190,255,0.85); --sel-fill-soft: rgba(120,170,255,0.12); --sel-edge-soft: rgba(150,190,255,0.9); /* THE STEM DIALOG'S SELECTION BAR, re-pointed at the theme 2026-08-23. These were a fixed cool blue -- #202830 / #2f3b48 / #7fbce8 -- and no theme overrode any of them, so the bar stayed the same slab of navy in all ten. In a violet or amber app it simply looked foreign; on the two LIGHT tributes it was worse than that, because the ink on it is the theme's dark body text and the ground stayed dark navy: 1.41:1, measured, in both Magique and Professional. Phil, 2026-08-23: the stem dialog "still has a few inconsistencies with the design and colour schemes compared to most of the rest of the app". Expressed as var() of tokens every theme already sets, so it follows all ten with no per-theme work and cannot go stale again. */ --selbar-bg: var(--accent-wash); --selbar-edge: var(--border-hi); --selbar-ink: var(--accent-ink); --row-hover-cool: #20242a; --bg-bar: #151515; --bg-status: #181818; --bg-float: #1d1d1d; /* THE DROPDOWN MENUS' OWN GROUND AND INKS, split out 2026-08-23. Phil: "can we make the drop down menu backgrounds in blorange and magique white?" -- which is right for both, since a Workbench menu is white and Blorange's own menu BAR is already blue-on-white. They cannot simply take --bg-float: that token also grounds `select option`, and Blorange's --text is WHITE, so pointing the shared token at white would have made the native option list white-on-white wherever it is honoured. And the item ink cannot stay --text for the same reason. So the menus get their own small family, every member defined as var() of what it resolves to today -- no theme that does not restate them changes at all. */ --bg-menu: var(--bg-float); --menu-ink: var(--text); --menu-ink-dim: var(--text-dim); --menu-ink-off: var(--ink-off); --menu-tick: var(--accent-ink); --bg-menubar-hi: #2e2e2e; --btn-hover-hi: #545454; --btn-hover-lo: #424242; --ink-off: #767065; --alert-hi: #d45a3a; --ok-ground: #1d241d; --accent-bright: #ffc44d; --sep: #333333; --bevel-lo: #333333; --bg-menubar-lo: #222222; --bg-chip-hover: #222222; --shadow-cursor: #000000; --scrim-modal: rgba(0,0,0,0.55); } * { box-sizing: border-box; margin: 0; padding: 0; } body { /* The built-in UI scale. `zoom` reflows (unlike transform:scale, which also detaches every position:fixed dialog — measured) and keeps rects and pointer coordinates in one space, so hit testing needs no change. stuff/ui-scale-probe-2026-08-21.md has the measurements. */ zoom: var(--ui-scale); background: var(--bg); color: var(--text); font-family: var(--font-text); font-size: 12px; user-select: none; height: calc(100vh / var(--ui-scale)); display: flex; flex-direction: column; overflow: hidden; } /* ── MENU BAR ───────────────────────────────────────────── */ #menubar { height: var(--menubar-h); background: linear-gradient(180deg, var(--bg-menubar-hi) 0%, var(--bg-menubar-lo) 100%); border-bottom: 1px solid var(--seam); display: flex; align-items: stretch; flex-shrink: 0; } .menu-item { padding: var(--d-menubar-item-pad); display: flex; align-items: center; color: var(--menubar-ink); cursor: pointer; white-space: nowrap; border-right: 1px solid var(--bg-panel); font-size: 12px; } .menu-item:hover { background: var(--menu-hi-bg); color: var(--menu-hi-ink); } #menu-title { margin-left: auto; padding: 0 12px; color: var(--menubar-ink-dim); font-size: 10px; display: flex; align-items: center; letter-spacing: 1px; border-left: 1px solid var(--bg-panel); } /* ── TRANSPORT ──────────────────────────────────────────── */ /* The toolbar WRAPS rather than clipping its controls when the window is narrow (Phil 2026-07-27) — so height is a minimum, not a fixed size. */ #transport { min-height: var(--transport-h); background: var(--bg-mid); border-bottom: 2px solid var(--accent-dim); padding: var(--d-transport-pad); display: flex; align-items: center; flex-wrap: wrap; gap: var(--d-transport-gap); flex-shrink: 0; /* A CONTAINER, so the rule below can ask how much room this bar actually has. See the @container note under .t-right. Nothing here is captured by the containment: the only absolutely-positioned descendant is #ed-dirty, inside .t-right, and #btn-save is already position:relative, so it was never this element's to contain — the same reasoning the #i-list container query records for .inr-wave. (An earlier draft of this comment named .vu-bar. That conclusion held but the example did not: .vu-bar carries no position property at all.) */ container-type: inline-size; } /* The right-hand utility group stops being pinned right once the bar wraps, otherwise it strands itself on a line of its own. */ #transport > .t-right { display:flex; gap:var(--d-tright-gap); align-items:center; margin-left:auto; } /* A CONTAINER QUERY, NOT A MEDIA QUERY, and the difference is the whole point. What this rule is really asking is "has the bar wrapped?" — 1100px was only ever a proxy for that, because #transport is flex-wrap:wrap and a wrapped .t-right strands itself on a line of its own, pushed right by the auto margin. As a MEDIA query it asked the wrong question once a UI scale existed. Media queries are zoom-blind — measured: a 622px viewport at zoom 1.5, i.e. 405 layout px of actual room, still reported (max-width:500px) as false. So at 150% on a 1600px window the bar has 1067 layout px and genuinely may wrap, while the media query still sees 1600 and never fires. calc() cannot help: a media feature cannot read a custom property. A container query asks the element how wide it IS, in layout px, which is the space the 1100 was written in and which shrinks correctly as the scale rises. It needs no JavaScript, no listener, and no re-arming when the scale changes — and it keeps working on a plain window resize exactly as before. Same pattern as the [data-list] container query further down. */ /* 1120, NOT 1100, and both corrections are measured. (a) A container-query length is measured against the container's CONTENT box while the old media query measured the VIEWPORT, and #transport has padding:6px 10px — so 1100 content px is 1120 viewport px, i.e. the rule fired 20px later than the media query it replaced. (b) A sweep of the bar's content width in 2px steps found a 16px band — content 1102 to 1116 — where the bar has ALREADY wrapped (.t-right's offsetTop jumps 34 → 76) but the rule had not yet fired, leaving the auto margin to strand .t-right ~890px right of its own line. Firing early is free: at content 1140 and 1118, both unwrapped, the USED value of margin-left:auto is already 0px, because #song-name-box { flex:1 1 0 } has consumed the free space on that line. So raising the threshold cannot change any unwrapped layout. (Since 2026-09-28 the box stops at its title's width, so above the threshold the auto margin takes what is left; between the wrap point and 1120 there are at most ~20px free and the box still takes them.) */ @container (max-width: 1120px) { #transport > .t-right { margin-left:0; } } .tg { display: flex; align-items: center; gap: 2px; background: var(--bg-inset); border: 1px solid var(--border); padding: 3px 4px; } .btn { background: linear-gradient(180deg, var(--btn-hi) 0%, var(--btn-lo) 100%); border: 1px solid var(--border-control); border-radius: var(--radius-control); /* The bevel stays: it is what says MOMENTARY. Phil kept the distinction between a button you press and a flag that shows state, and the raised edge plus the gradient is the whole of it. */ border-top-color: var(--btn-edge-hi); border-left-color: var(--btn-edge-hi); border-bottom-color: var(--btn-press); border-right-color: var(--btn-press); color: var(--text); cursor: pointer; font-family: var(--font-text); font-size: 12px; padding: 4px 10px; min-width: 32px; text-align: center; outline: none; line-height: 1; } /* A fixed-width slot for a state glyph that comes and goes (REC's ◯ / ●). Reserving the space when empty keeps the button's width — and the position of everything to its right — constant across state changes. Width is in PX and measured against the widest glyph actually used: at 12px Share Tech Mono, ◯ is 13.00px and ● is 6.61px. The first attempt used 0.95em (11.39px), so ◯ overflowed the slot and collided with the "REC" text while ● sat visibly off-centre (Phil 2026-07-28). overflow:hidden is a backstop if a future glyph is wider still. */ .btn-glyph { display:inline-block; width:14px; text-align:center; overflow:hidden; white-space:nowrap; /* Fixed HEIGHT too, not just width. An empty inline-block is 0px tall but 12px once it holds a glyph, and that taller line box grew the button from 22px to 24px — shifting the whole transport row down 2px when arming REC (Phil 2026-07-28). Pinning height + line-height + vertical-align makes the box identical whether or not there is a glyph in it. */ height:12px; line-height:12px; vertical-align:top; /* Centre the glyph between the button's left edge and its label. The slot used to butt straight up against the text: with 10px padding + 1px border the ◯ sat at 18.3px while the label started at 25.3px, so it looked crowded to the right. A right margin equal to that 11px left inset puts the glyph's centre at the midpoint of the two (Phil 2026-07-28). The margin is unconditional, so an EMPTY slot reserves the same space and the button width still doesn't change between idle, armed and recording. */ margin-right:11px; } /* Transport buttons whose GLYPH changes must not resize with it: ▶ is 10.34px and ⏸ is 12px, so play/pause alone shifted the whole row by ~1.7px. Sized to the widest glyph + padding + border so every state lands on the same width. */ /* One width for all five transport buttons so the row is even and nothing shifts: the labels are now static (PLAY no longer swaps to a pause glyph), but a shared min-width also keeps ▶ / ▶❘ / ■ optically aligned. */ #btn-play, #btn-continue, #btn-play-block, #btn-cont-block, #btn-stop { min-width:38px; } #btn-rec { min-width:56px; } /* Digits in a changing label must not reflow either — tabular figures keep "9" and "11" the same width. */ .btn { font-variant-numeric: tabular-nums; } .btn:hover:not(:disabled) { background: linear-gradient(180deg,var(--btn-hover-hi) 0%,var(--btn-hover-lo) 100%); color: var(--text-hi); } /* Pressed = the bevel INVERTED. All four sides are named per-side rather than set with a `border-color` shorthand so the resting edge (the token) and the bevel (the momentary signal) never share one declaration. */ .btn:active:not(:disabled) { background: var(--btn-press); border-top-color:var(--seam); border-left-color:var(--seam); border-bottom-color:var(--bevel-hi); border-right-color:var(--bevel-hi); } .btn:disabled { opacity: .3; cursor: default; } /* `.btn.amber` MARKS A DIALOG'S PRIMARY ACTION, and five buttons still use it: wc-open, fr-replace, echo-go, slide-go, cfm-ok. (unsaved-save was the sixth until 2026-09-12; its dialog merged into cfm-ok's — mixer round 2, C3 — and js/confirm-dialog.js now takes the amber OFF cfm-ok while the save is impossible, so the greyed button is not also the highlighted one.) What it no longer marks is anything in the TOOLBAR — Phil dropped it from OPEN on 2026-08-09 ("the open button should not have the amber styling"), where one amber button among nine grey ones read as an accident rather than a hierarchy. In a dialog it is a hierarchy, so it stays. */ .btn.amber { color: var(--accent-ink); border-color: var(--accent-dim); } .btn.amber:hover:not(:disabled) { color: var(--accent-hi); } .btn.playing { color: var(--play-lit); text-shadow: 0 0 8px var(--play-lit); } /* Recording: a filled state, like .btn.on but in the record colour. Both the fill and its ink come from tokens so every theme can restate them -- the old inline '#a02020' from js/app.js could never carry an ink at all. */ .btn.recording { background: var(--rec-lit); color: var(--rec-ink); border-color: var(--rec-lit); font-weight: bold; } /* The button that STARTED playback is usually also the one we disable (it has nothing left to do while it's already doing it), and .btn:disabled's opacity:.3 was dimming the green "this is what's playing" cue right along with it — the one button you most want to pick out was the faintest on the bar (Phil 2026-07-28). Which button is live is the more useful signal, so keep it at full strength and let the disabled state read only as a non-responsive cursor. Specificity: 2 classes + a pseudo-class beats .btn:disabled's 1 + 1, so this wins without !important. */ .btn.playing:disabled { opacity: 1; cursor: default; } .tsep { width: 1px; height: 36px; background: var(--border); margin: 0 2px; } /* Divider INSIDE a .tg group (e.g. transport buttons | REC). */ .tg-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 3px; } /* Group captions inside the transport (SONG / BLOCK) — they name what the two buttons after them act on, which is what removes the ambiguity. */ .tg-lbl { font-size:8px; letter-spacing:1px; color:var(--text-dim); padding:0 3px 0 1px; align-self:center; user-select:none; } /* THE ONE ELASTIC ITEM IN THE TRANSPORT. It used to sit before the readouts with `max-width:260px`, which ellipsed most real module names. Now that it is after the meters it can take the leftover width instead: flex:1 with a min- width small enough that the fixed clusters never get squeezed first, so a long name shows in full whenever the window allows. min-width on a flex child defaults to auto, which refuses to shrink below the content — hence the explicit 0, or a long title would push .t-right off the bar. ONLY AS WIDE AS IT NEEDS TO BE (Phil, 2026-09-28: the box "became scalable to fill the entire available width, so that part of the UI turns into a big button"). max-width:max-content stops the growing at the title's own width; the width left over goes to .t-right's auto margin, which is empty bar, not button. The basis stays 0, so where the bar wraps is unchanged: a flex item's BASIS is what line-breaking measures, and a long title still shrinks and ellipses rather than pushing .t-right onto a line of its own. */ #song-name-box { display:flex; flex-direction:column; justify-content:center; gap:2px; flex:1 1 0; min-width:0; max-width:max-content; cursor:pointer; padding:2px 4px; border:1px solid transparent; } #song-name-box:hover { border-color:var(--border); background:var(--bg-inset); } #song-name-box:focus-visible { outline:1px solid var(--accent-ink); outline-offset:1px; } #song-title { color:var(--accent-ink); font-size:12px; letter-spacing:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Elapsed / total. Tabular figures so the seconds ticking over do not shuffle the title above them left and right once a second. */ #song-time { color:var(--text-dim); font-size:10px; letter-spacing:1px; white-space:nowrap; font-variant-numeric:tabular-nums; } #song-elapsed { color:var(--text); } /* (#fmt-badge removed 2026-07-28 — the side panel's INFO shows the format.) */ /* Readout clusters. `.sgrp` is the atomic unit: it never wraps internally, so ORDER/BLOCK/LINE and BPM/TICKS each stay whole. #readouts may still wrap BETWEEN the two clusters on a very narrow window rather than overflowing. */ #readouts { display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .sgrp { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; flex:none; } /* The transparent border is in the BASE rule on purpose, so:hover only changes its colour. Adding a border on hover instead would grow the box by 2px and shove the whole cluster sideways every time the pointer crossed it — the same reason #song-name-box declares one. Only the readouts that open something carry .sw-hot; LINE has no window, so it stays inert and unstyled. */ .sw { display:flex; flex-direction:column; align-items:center; gap:1px; flex:none; border:1px solid transparent; } .sw[role="button"] { cursor:pointer; } .sw[role="button"]:hover { border-color:var(--border); } .sw[role="button"]:focus-visible { outline:1px solid var(--accent-ink); outline-offset:1px; } /* Fixed box height + nowrap: the BPM/TICKS readouts used to grow taller when their text changed (e.g. the "---" placeholder while stopped vs "125.00"), because the glyphs could wrap inside a shrunk box (Phil 2026-07-27). */ .seg { background: var(--seg-off); border: 1px solid var(--seam-dark); border-bottom-color: var(--bevel-lo); border-right-color: var(--bevel-lo); padding: 0 6px; /* Both follow the font-size axis (--font-room, js/fonts.js): the box is fixed for the reason above, but fixed AT THE CURRENT TYPE SIZE -- at 140% the readout's own digits were being trimmed by it. 1 at 100%. */ height: calc(26px * var(--font-room, 1)); line-height: calc(24px * var(--font-room, 1)); box-sizing: border-box; white-space: nowrap; overflow: hidden; font-size: 18px; letter-spacing: 2px; color: var(--seg-on); /* AN LED GLOWS ITS OWN COLOUR. This was --accent-ink, which matches --seg-on by coincidence in the amber scheme and stops matching the moment a theme sets them apart -- Magique ended up with a BLUE glow around a salmon readout. OKLab dE from the old value in the base theme is 9.2, on a 5px blur rather than an edge, so nothing perceptible moves here. */ text-shadow: 0 0 5px var(--seg-on), 0 0 12px rgb(var(--accent-hi-rgb) / 0.2); font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: right; } /* LINE is the readout whose digit count actually changes in normal use — a module with blocks either side of 100 lines made the box jump 37.45px -> 49.17px and nudged the whole cluster (Phil 2026-07-28). Give it a floor wide enough for three digits so it never resizes. The inherited 2.2ch min-width is inert here: it lands below the 14px of padding+border alone, so width was entirely content-driven. Constant = 3 letter-spacings (6px) + 2x padding (12px) + 2x border (2px); recompute it if any of those change above. */ /* +21 not +20: at exactly 3ch the floor and the content width tie, and sub-pixel rounding still flickered the box by 0.01px. One extra pixel keeps the floor strictly above the widest content, so the width is constant. */ #d-row { min-width: calc(3ch + 21px); } /* SEQ and BLOCK get the SAME floor, but only when the module can actually reach three digits — Phil, 2026-08-12: "can we pre-size the seq and block counters in the top bar if the module contains more than 99? Like we did for lines". LINE carries its floor unconditionally because every module has rows; most modules have neither 100 sequence positions nor 100 blocks, and widening their cluster for a case that cannot arise is a permanent cost for nothing. js/app.js sets .wide3 from the parsed counts on load and on every structural edit. Same constant, same derivation as #d-row above — these three share a font-size, so the `3ch` means the same thing in all of them. */ .seg.wide3 { min-width: calc(3ch + 21px); } .sl { font-size: 8px; color: var(--text-dim); letter-spacing: 1px; } /* Block audition: the ORDER readout and the song-list position are pinned on purpose while a single block loops, so they are dimmed to say "parked", not "stuck". BLOCK / LINE keep their full brightness — those are still live. MUST stay scoped to the SEQUENCE list: the BLOCK list rows carry the SAME .seq-row class (js/app.js builds both lists with it), so an unscoped `.seq-row.playing` dimmed the block-list marker too — measured at 0.45 on both lists. That marker denotes the block you are HEARING, which is the one thing that is definitely live. Phil 2026-08-06. Scoped by ROLE (`[data-list="song"]`) rather than by `#song-list`, so it still applies when the sequence is rendered into a floating window. The id version was a silent failure waiting to happen: the dimming would simply stop, with no error and no visual clue, and the marker would look live while playback was parked — the exact confusion the rule exists to prevent. */ body.block-audition #d-ord { opacity:0.32; text-shadow:none; } body.block-audition #d-ord + .sl { opacity:0.5; } body.block-audition [data-list="song"] .seq-row.playing { opacity:0.45; } #vu { display:flex; align-items:center; gap:6px; background:var(--bg-inset); border:1px solid var(--border); padding:5px 6px; height:36px; } /* Stacked L over R (Phil, 2026-08-25). Two 8px tracks plus a 3px gap is 19px inside the 24px of content height 36px leaves, so this fits without touching the transport's height — which everything else in the row is aligned to. */ .vu-rows { display:flex; flex-direction:column; gap:3px; } .vu-row { display:flex; align-items:center; gap:3px; } /* Fixed width so the two tracks start at the same x. They are both one character today and would line up by luck; this stops that being luck. */ .vu-label { font-size:9px; color:var(--text-dim); width:7px; flex:0 0 auto; } /* The numeric readout the stacking paid for. Tabular figures so the digits do not jitter as the value changes — a readout that shifts around is harder to read than no readout. */ .vu-read { min-width:40px; text-align:right; font-size:10px; line-height:1; color:var(--text-dim); font-variant-numeric:tabular-nums; user-select:none; white-space:nowrap; } .vu-read.over { color:var(--vu-clip); } .vu-read.hidden { display:none; } .vu-track { width:80px; height:8px; background:var(--vu-track); border:1px solid var(--vu-track-edge); position:relative; overflow:hidden; } /* The master bar reveals its gradient too, and for the same reason as the strips above — it had the identical bug: `width:50%` painted the whole gradient into half the track, so a quiet mix drew a short RED-tipped bar. */ .vu-bar { height:100%; width:100%; clip-path:inset(0 100% 0 0); background:linear-gradient(90deg,var(--vu-floor) 0%,var(--vu-safe) 70%,var(--vu-warn) 88%,var(--vu-clip) 100%); transition:clip-path 0.04s; } /* The CLIP LED (task #11), drawn INSIDE the meter it belongs to. The first cut was a badge appended to the #vu flex row, which shifted the whole transport every time it appeared. Phil asked for no shift AND no reserved gap, which rules out display:none and visibility:hidden both — so it is absolutely positioned inside .vu-track (already position:relative for the bar) and costs no layout at all. It also lands where a hardware meter puts its clip LED: the top of the scale. 3px, full track height, hard against the right edge. It draws OVER the bar, which is correct — when this is lit the bar is pinned there anyway. */ .vu-led { position:absolute; top:0; right:0; bottom:0; width:5px; box-sizing:border-box; background:transparent; pointer-events:none; } /* THE SEPARATOR IS NOT DECORATION. The bar's own gradient ends in --vu-clip at 100%, so a lamp in that colour would blend into a pinned bar — invisible at exactly the moment it lights. A hairline of the track's own background keeps it a discrete lamp at any bar width, in every theme, without inventing a colour outside the token set. box-sizing keeps the 5px total, so lighting it still moves nothing. */ .vu-led.lit { background:var(--vu-clip); border-left:1px solid var(--vu-track); } /* Only offer the pointer when there is something to reset — a permanently clickable meter implies an action that usually does nothing. */ #vu.clipped { cursor:pointer; } /* ── WORKSPACE ──────────────────────────────────────────── */ #workspace { flex:1; display:flex; overflow:hidden; } /* ── LEFT PANEL ─────────────────────────────────────────── */ #left-panel { width: var(--panel-w-l); flex-shrink: 0; border-right: 1px solid var(--border); background: var(--bg-panel); display: flex; flex-direction: column; overflow: hidden; } .panel-header { background: var(--bg-header); color: var(--header-ink); font-size: 9px; letter-spacing: 2px; padding: var(--d-panelhead-pad); border-bottom: 1px solid var(--border); border-top: 1px solid var(--seam); flex-shrink: 0; } .panel-body { padding: 4px 6px; overflow-y: auto; } /* ── PANEL COLLAPSE RAILS ─────────────────────────────────── Thin always-visible strips beside each side panel: click to fold the panel away for more pattern room, click again to restore (Phil 2026-07-23). Collapsing sets width:0 on the panel and hides its splitter, so nothing else in the flex row needs to know. */ .panel-collapse { flex: 0 0 11px; width: 11px; align-self: stretch; background: var(--bg-header); color: var(--header-ink); border: none; border-left: 1px solid var(--seam); border-right: 1px solid var(--seam); font-size: 10px; line-height: 1; cursor: pointer; padding: 0; font-family: inherit; } .panel-collapse:hover { background: var(--accent-ground-soft); color: var(--accent-hi); } #left-panel.collapsed, #right-panel.collapsed { width: 0; border-width: 0; } #left-panel.collapsed + #left-collapse, #right-panel.collapsed { /* keep the rail itself visible */ } .splitter-v.hidden { display: none; } .panel-section { border-bottom: 1px solid var(--border); display:flex; flex-direction:column; } /* Song and block lists share the vertical space, with a draggable splitter between them. Default split: 35% / 65% via flex-basis on #song-list. The splitter's mousedown handler in app.js adjusts #song-list's height in pixels (overriding flex-basis) — the #block-list stays flex:1 to fill remaining space. */ /* THE HOST CONTRACT. Anything a list needs in order to WORK — scrolling, no inherited panel padding, a floor height, and the container context the narrow -panel rule queries — belongs to the role class, so a floating window gets it by wearing the same class. Only the docked LAYOUT basis stays on the ids: flex:0 1 35% is meaningful solely inside #left-panel's column and would fight whatever layout a window uses. */ /* NO scrollbar-gutter. It was added on 2026-08-12 to stop the content width stepping by a scrollbar mid-animation, and REVERTED the same day: Phil, "I don't like the permanent gutter. Let's revert that until we can find something better." Reserving 11px on every list left row borders, hover fills and waveforms stopping short of the panel edge on every module that never scrolls, which is most of them. The jitter it fixed is real and is still open — see the note on ::-webkit-scrollbar for why it bites here. */ .med-list { overflow-y:auto; padding:0; min-height:24px; } #song-list { flex:0 1 35%; } #block-list { flex:1 1 0; } /* Horizontal splitter — 5px tall draggable bar between two stacked panels. Hover gives a subtle amber tint to advertise interactivity. */ .splitter-h { height: 5px; background: var(--bg-rail); border-top: 1px solid var(--seam-dark); border-bottom: 1px solid var(--seam-dark); cursor: ns-resize; flex-shrink: 0; user-select: none; } .splitter-h:hover { background: var(--bg-rail-hover); } .splitter-h.dragging { background: var(--accent-dim); } /* Vertical splitter — 5px wide draggable bar between side-by-side panels (left↔centre and centre↔right). */ .splitter-v { width: 5px; background: var(--bg-rail); border-left: 1px solid var(--seam-dark); border-right: 1px solid var(--seam-dark); cursor: ew-resize; flex-shrink: 0; user-select: none; } .splitter-v:hover { background: var(--bg-rail-hover); } .splitter-v.dragging { background: var(--accent-dim); } .seq-row { display:flex; align-items:center; gap:5px; padding:2px 7px 2px 3px; border-bottom:1px solid var(--seam-soft); cursor:default; font-size:11px; } .seq-row:hover { background:var(--bg-hover); } .seq-row.playing { background:rgb(var(--accent-rgb) / 0.12); color:var(--accent-ink); font-weight:600; } /* THE INDEX NEVER CHANGES WEIGHT. `.playing` and `.sel` bold the whole row to emphasise its NAME, and the number inherited that — measured identical in size, width and position, differing only 400 → 600, which at 10px on a mono face whose bold is synthesised reads as the number shrinking (Phil 2026-08-09). The index is chrome: it says which row this is, not what state it is in. */ .seq-num { color:var(--text-dim); min-width:2ch; text-align:right; font-size:10px; font-weight:400; } .seq-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Right-aligned secondary info — block index in the sequence list, row count in the block list. Same visual treatment as the instrument- list type tag. */ .seq-tag { color:var(--text-dim); font-size:9px; letter-spacing:0.5px; flex-shrink:0; } /* NARROW PANEL: the NAME wins. Phil 2026-08-08 — "when the panel is scaled small enough, we could remove the right aligned block numbers from sequence list, and the row counts from block list, to leave more space for the names." A CONTAINER query, not a media query, and that is the point: the side panel is drag-resizable and its width has nothing to do with the viewport's. This reacts to the splitter itself, with no JS and no resize listener — the same reason the character-count tooltip threshold it replaces had to go. A fixed number cannot answer a question whose answer the user is dragging. 150px is where the tag stops being worth its ~30px: below that a name has under 110px and starts losing whole words rather than a character or two. Nothing becomes unreachable — the tag returns on widening, and the full name is on hover either way. One number to change. THE INSTRUMENT LIST IS IN TOO, at the same 150px (Phil 2026-08-09), but it needs its own selector because it shares none of this markup: its rows are `.inr` with `.inn` / `.inname` / `.intype`, so the thing to hide is `.intype` rather than `.seq-tag`. 150px is not a coincidence there — it is MIN_PANEL_W in js/instrument-waveforms.js, the width below which that file already drops the waveform backdrops. Phil asked for the type tag to go "at the same time as the waveform", and the same number is what makes that true rather than approximately true. If one moves, move both. The containment this declares on #i-list does NOT disturb the waveforms: the `.inr-wave` overlays are `inset:0` inside `.inr`, which is position:relative and is therefore already their containing block. */ [data-list="song"], [data-list="block"], [data-list="instr"] { container-type:inline-size; } @container (max-width: 150px) { .seq-tag { display:none; } .intype { display:none; } /* THE SIZE CHIP TOO, at the same width. It is `flex: none` and so cannot ellipsise; below this it was the item squeezing the name to nothing. Same threshold as the tag and the waveform on purpose — one width at which the row sheds its extras, rather than three. */ .insize { display:none; } } /* A BLOCK THE PLAYING SEQUENCE NEVER REACHES. Quiet on purpose — unused blocks are normal while you are working (sketches, alternate takes, a chorus you have not placed yet), so this is information rather than a warning. The dot sits in the number column; only the NUMBER dims, because dimming the name would make an unused block harder to read at exactly the moment you are looking for it. */ /* ONE RULE FOR BOTH LISTS. The instrument rows already carried .unused — the code that adds it is a deliberate sibling of the block one — but nothing styled it, so only blocks got the amber number (Phil, 2026-08-12: "can we make the styling for unused instruments match that of blocks"). */ /* --accent-ink, not --accent-dim: "can we use the slightly brighter amber as it's too hard to see against the dark grey" (Phil, 2026-08-12). An EMPTY slot joins them — it is unused in the plain sense, and a full-brightness number on the one row with nothing in it was the loudest thing in the list. No dot for those: the bullet means "the song never plays this", which for an empty slot is noise rather than news. */ .seq-row.unused .seq-num, .inr.unused .inn, .inr.islot-empty .inn { color:var(--accent-ink); } /* THE DOT IS A PSEUDO-ELEMENT, not a character spliced into the number text. Both lists used to prefix a '·' into textContent, so it inherited the number's 10px and its colour and could not be sized or brightened on its own — "basically a 1 pixel dot, almost invisible". As ::before it takes its own size and colour, and the digits keep their tabular right-alignment because the marker is no longer part of the string being aligned. A BULLET rather than a middle dot: at this size a middle dot is a couple of pixels of antialiasing. Brighter than the number beside it (--accent-ink against --accent-dim) so the marker reads first and the digits stay the label. line-height:0 stops the taller glyph growing the row. */ /* A RESERVED SLOT FOR THE MARKER, on every row whether or not it has one, so the digits never move — and INSIDE the number's own box rather than hanging off its left edge. Hanging outside put the bullet almost on top of the selected row's amber bar in the docked panel, and in the TABLE it fell outside the grid cell entirely, which is why it looked "very small and strangely positioned" there (Phil, 2026-08-12). */ /* THE MARKER SLOT, as a token. It is added to the ROW's own left padding, not instead of it, so a hardcoded 10px here pushed the digits to 17px from the edge — Phil: "a lot of padding to the left". The row now gives up most of its own left padding to pay for it, and .inplay below is positioned from the same token so the audition glyph lands ON the number instead of well to its left. The bullet measures 7.03px, so 8 is enough. */ .seq-row .seq-num, .inr .inn { position: relative; padding-left: var(--marker-slot); } .seq-row.unused .seq-num::before, .inr.unused .inn::before { content: '\2022'; color: var(--accent-hi); font-size: 13px; line-height: 0; /* OUT OF FLOW, so the DIGITS STAY PUT. In flow the bullet pushed the number right, so unused rows sat out of line with every other row — "can we find a way to make unused instrument numbers aligned with the rest of them while also keeping the dot?". Hanging it to the left of the number's box costs the digits nothing, and the row's padding is where it lands. */ position: absolute; left: 0; top: 50%; transform: translateY(-50%); vertical-align: middle; } /* THE PICKED ROW. Distinct from `.playing` on purpose, and both can be on one row at once: `.playing` is where playback or the pattern view IS, `.sel` is what you have PICKED and what the +/-/reorder buttons will act on. One click picks, two go there (Phil 2026-08-09, matching Windows MED). A LEFT BAR rather than a fill, so it reads as different in kind from the amber `.playing` tint rather than competing with it — and so a row that is both still shows both. `.sel` is used elsewhere in this file for the find-replace field and menu rows, hence the .seq-row scope. */ .seq-row.sel { box-shadow:inset 2px 0 0 var(--accent-ink); } /* BRIGHT AMBER AND BOLD, not white. The first cut used --text-hi, so picking a row turned its name white and un-picking it turned it back to amber — a colour SWAP, which reads as "different thing" rather than "same thing, emphasised" (Phil 2026-08-09: "it would be better and more readable if the text goes bold bright amber"). Weight is the signal; the amber stays put. */ .seq-row.sel .seq-name { color:var(--accent-hi); font-weight:600; } /* THE LEAD of a multi-row pick. With several rows selected, one of them is still the one an INSERT or a MOVE will use, and a pick that could not say which would be guessing. Only drawn when the pick is bigger than one — a single picked row is trivially its own lead and a second marker on it would be noise. */ .seq-row.sel.lead, .inr.sel.lead { box-shadow:inset 3px 0 0 var(--accent-hi); } /* THE THREE LISTS AGREE. Phil 2026-08-09: "Selections on the instrument list look different to selections on block/sequence list — instruments get amber background colour. Everything should be consistent." So the instrument list drops its background fill and takes the same treatment as the other two: a left bar for the pick, bold bright amber for the name. `.inr.selected` — the list's own older class, still written by markInstrSelection — is neutralised here rather than removed, because it is what markInstrSelection still writes and what the preview path keys off, so it keeps its amber TEXT and loses only the fill. Its own rule further down the file is where that happens — a neutraliser here lost to it, same specificity, later wins. */ .inr.sel { box-shadow:inset 2px 0 0 var(--accent-ink); } /* The detail line follows the NAME, not the row. On a picked row the name is lifted to --accent-hi by this rule while everything else inherits the row's --accent-ink, so without the second selector the two lines sat a shade apart — which is the thing Phil asked to be equal. Not the font-weight: bolding a line of numbers reads as emphasis it has not earned. */ .inr.sel .inname { color:var(--accent-hi); font-weight:600; } .inr.sel .indet { color:var(--accent-hi); } /* THE GHOST ROW — "+ position" / "+ new block" at the end of each list. Dashed and dim so it reads as an invitation rather than an entry: it must not be mistaken for the last block at a glance, which is the whole risk of putting a control inside a list. It brightens on hover like any other row, because it IS clickable. No .seq-num and no .seq-tag — the columns beside a real row's name are its NUMBER and its size, and the ghost has neither. Leaving them empty would line the text up under the names above it and make it look like one of them. */ .seq-row.seq-add { border-bottom:none; border-top:1px dashed var(--border); color:var(--text-dim); font-style:italic; cursor:pointer; opacity:0.7; } .seq-row.seq-add:hover { opacity:1; color:var(--accent-ink); background:var(--accent-wash); } /* ── DRAGGING A ROW (task #28) ─────────────────────────────────────────── The insertion line is one FIXED element in the body, not a child of the list: the lists are rebuilt on every model change and scroll independently, so a child would have to be re-created after each rebuild and would be clipped by the scroller at exactly the two places it matters most — the top and bottom edges, where you drop to move something to an end. `.no` is the same line in the refusal colour, used when the drop would break a ceiling. It is drawn rather than hidden on purpose: a line that vanishes reads as "the app lost the drag", and a red one reads as "not there". */ #lst-drop { position: fixed; z-index: 1200; height: 2px; display: none; pointer-events: none; background: var(--accent-fill); box-shadow:0 0 4px var(--accent-fill); } #lst-drop.no { background: var(--alert); box-shadow: 0 0 4px var(--alert); } /* The rows being carried stay legible but clearly lifted. Dimming the SOURCE rather than drawing a floating copy of them keeps this to two CSS rules and no per-frame layout: the insertion line already says where they will land, which is the thing you actually need to see. */ .seq-row.dragging, .inr.dragging { opacity: 0.4; } /* While a drag runs, nothing in a list should look clickable or select. */ body.lst-dragging { cursor: grabbing; } body.lst-dragging .med-list { user-select: none; } body.lst-dragging .seq-row:hover, body.lst-dragging .inr:hover { background: none; } /* FULL — the list has hit its ceiling (63 instruments, 255 sequence positions, the parser's cell budget for blocks). Greyed and inert, with the reason as its tooltip, and the hover rule turned back off: a row that lights up under the pointer and then does nothing is worse than one that never invited the click. `cursor:default`, not `not-allowed` — nothing is being refused here, there is simply nothing left to add. */ .seq-row.seq-add.full, .seq-row.seq-add.full:hover { opacity:0.32; color:var(--text-dim); background:none; cursor:default; } /* The per-row audition control. Small and quiet: the row's JOB is now selection, and this is the secondary action beside it. Kept to a glyph because the docked row is ~118px wide and there is no room for a word. */ /* BIGGER AND BRIGHTER THAN "small and quiet". Being the secondary action is a reason to be visually subordinate to the NAME, not a reason to be unreadable — and it sits over a waveform, where --text-dim at 10px disappeared entirely (Phil, 2026-08-12). Still smaller and cooler than the name; just legible. */ .inplay { margin-left:auto; flex-shrink:0; padding:0 3px; cursor:pointer; color:var(--text); font-size:13px; line-height:1; position:relative; z-index:1; } .inplay:hover { color:var(--accent-hi); } /* IN THE DOCKED PANEL IT SITS ON THE NUMBER, and only while the pointer is on the row (Phil, 2026-08-12: "move the audition button to where the instrument number is. In the docked view, this would appear as you hover over it"). That buys back its whole column in the narrowest host, where it was competing with the name. POSITIONED, NOT REORDERED IN FLOW: swapping the two would resize the row's first item on hover and shove the name sideways. Same left offset and the same 2ch box as .inn, so it lands exactly on it. Scoped away from the table, where the two have a column each. */ .med-list[data-list="instr"]:not(.itable) .inplay { position:absolute; left:calc(3px + var(--marker-slot)); top:2px; margin-left:0; min-width:2ch; padding:0; text-align:center; opacity:0; pointer-events:none; transition:opacity .1s ease; } .med-list[data-list="instr"]:not(.itable) .inn { transition:opacity .1s ease; } .med-list[data-list="instr"]:not(.itable) .inr:hover .inplay { opacity:1; pointer-events:auto; } /* While an audition sounds on the row the glyph is a stop square, and it stays visible without the hover (js/instrument-playheads.js marks the row). */ .med-list[data-list="instr"]:not(.itable) .inr.sounding .inplay { opacity:1; pointer-events:auto; color:var(--play-lit); } .med-list[data-list="instr"]:not(.itable) .inr.sounding .inn { color:transparent; text-shadow:none; } .itable .inr.sounding .inplay { color:var(--play-lit); } /* Hover swaps the NUMBER for the ▸, but it was fading the bullet out too — so an unused instrument stopped being marked exactly while you pointed at it. The digits go; the marker stays. */ /* ...and the SHADOW has to go with the colour. A text-shadow is painted from the glyph's alpha INDEPENDENTLY of `color`, so `color:transparent` hides the digits and leaves their shadow behind -- a smudge under the play triangle. Invisible in the dark themes, where the shadow is black on a dark row; obvious in a light one, where it is white. Phil found it in Magique. The bullet is a ::before on the same element and keeps its own shadow, because that one really is lifting a marker off the waveform behind it. */ .med-list[data-list="instr"]:not(.itable) .inr:hover .inn { color:transparent; text-shadow:none; } .med-list[data-list="instr"]:not(.itable) .inr:hover .inn::before { text-shadow:0 1px 2px var(--shadow-strong), 0 0 3px var(--shadow-mid); } .med-list[data-list="instr"]:not(.itable) .inr.unused:hover .inn::before, .med-list[data-list="instr"]:not(.itable) .inr.islot-empty:hover .inn::before { color:var(--accent-hi); } /* ── LIST WINDOWS + THEIR CONTROL STRIPS (task #6) ─────────────── Phil 2026-08-08: "compact strip docked, full float". The strip is the same component in both places; what differs is what sits NEXT to it — a rename field in the window, nothing in the panel, because at 118px there is no room for one. So the strip itself needs no docked/floating variant beyond size. */ .lw-strip { display:flex; gap:3px; padding:3px 4px; border-top:1px solid var(--border); background:var(--bg-inset); flex-shrink:0; } .lw-strip .btn { padding:2px 0; flex:1 1 0; min-width:0; font-size:11px; line-height:1.4; } /* DOCKED: four buttons across ~118px, so they share the width evenly and carry no text beyond the glyph. flex-shrink:0 above matters here — the strip sits in #left-panel's column flex beside two scrolling lists, and without it the lists would push it to zero height rather than give up a row of their own. */ .lw-strip-docked { padding:2px 3px; } .lw-strip-docked .btn { font-size:10px; } /* FLOATING: the window is sized to be worked in rather than glanced at. The list is the part that grows; the strip and the name row keep their height. */ /* the width lives with the other per-dialog widths — see .sd-dialog.lw-dialog */ .lw-body { display:flex; flex-direction:column; gap:0; padding:0; } /* A FIXED HEIGHT, not a range. With `flex:1 1 auto; min-height:180px; max-height:52vh` the list grew and shrank with its CONTENT, so adding or deleting a row resized the whole window and the controls beneath it jumped under the pointer (Phil 2026-08-09). A list is the one thing in a window that should absorb a change in row count by SCROLLING; everything below it should never move. min() rather than a bare px so a short screen still gets a usable window. */ .lw-list { flex:0 0 auto; height:min(360px, calc(52vh / var(--ui-scale))); border-bottom:1px solid var(--border); } .lw-name { padding:5px 6px; border-top:1px solid var(--border); gap:5px; } .lw-name input { flex:1 1 auto; min-width:0; } .lw-body .set-hint { padding:4px 6px; } /* ── CENTRE ─────────────────────────────────────────────── */ #centre { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; } /* ── RIGHT PANEL ────────────────────────────────────────── */ #right-panel { width: var(--panel-w-r); flex-shrink: 0; border-left: 1px solid var(--border); background: var(--bg-panel); display: flex; flex-direction: column; overflow: hidden; } /* --d-infogrid-pad, NOT --d-panelbody-pad. The first attempt tokenised .panel-body, which was dead on arrival: `.med-list { padding:0 }` comes later and wins for the three lists that rule was aimed at, so the token changed nothing anywhere. Measured before believing it. This is the panel inset that actually paints. */ .info-grid { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; font-size:11px; padding:var(--d-infogrid-pad); } .ik { color:var(--text-dim); white-space:nowrap; } .iv { color:var(--accent-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ── Instrument Properties (task #23) ───────────────────────────────────── A READOUT sitting beside its field: the hex volume next to the volume box, and the frequency the default pitch works out to next to the note. Both are readouts in BOTH reference programs — Windows MED draws "Hex: 7F" and "Default Freq.: B-2 | 15360", Amiga packs the same pair into its slider — and neither accepts typing. Dimmed and tabular so it reads as a fact rather than as an empty box someone should fill in. */ .ipr-ro { color:var(--text-dim); font-size:11px; letter-spacing:0.5px; font-variant-numeric:tabular-nums; white-space:nowrap; } /* A row whose field THIS module's format cannot store — Bank and Output port on an Amiga-flavour module, which js/writer.js emits only in the 24-byte instrExt entry. js/instrument-props.js has already disabled the input; this dims the label with it, so the row reads as unavailable at a glance rather than as an empty field somebody forgot to fill in. */ .ipr-na { opacity:0.55; } /* ── The instrument library ── A TREE now, not a flat list. The comment here used to argue the opposite — "a flat list, because a pool is browsed by what a sound IS rather than by where it sits" — and that was right for a few hundred files and wrong for Phil's 23,000, where the folder a sample sits in IS most of what is known about it. Search covers the by-what-it-is case and flattens the tree while it is live. THE LIST IS VIRTUALISED (js/library-ui.js): a fixed pool of absolutely positioned rows inside #lib-rows, recycled as the window scrolls, so the document holds ~(viewport + 24) rows however large the library is. Two things below are load-bearing for that: · #lib-rows must be the positioning parent. `.lib-list` is position: static, so an absolutely positioned row would otherwise resolve against `.sd-overlay` — which is position:fixed — and land relative to the VIEWPORT rather than the list. · EVERY ROW MUST BE THE SAME HEIGHT, including folder rows. Row height is not declared anywhere; it comes from `.lib-kind`, whose 9px text plus 1px padding and 1px border is taller than every sibling. So the folder chevron reuses `.lib-kind` and only hides its border with a transparent colour — removing the border would make folder rows shorter than file rows and put the whole window out of step. */ .lib-bar { display:flex; align-items:center; gap:6px; margin-bottom:8px; min-width:0; } /* The bar's buttons keep their one-line width. Without this the Category select added on 2026-09-04 took its room out of Add Folder… / Add Files…, which broke onto two lines at the window's default width; the search box is the one thing meant to give way (see .lib-search below). */ .lib-bar .btn { flex:0 0 auto; white-space:nowrap; } .lib-spacer { flex:1 1 auto; } .lib-filter-lbl { color:var(--text-dim); font-size:10px; letter-spacing:1px; text-transform:uppercase; } /* Narrower and taller than the default dialog (Phil, 2026-09-05): a list of files wants rows, not width. */ .sd-dialog.lib-dialog { width:640px; } .lib-list { height:400px; overflow-y:auto; overflow-x:hidden; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); } .lib-empty { padding:14px; color:var(--text-dim); font-size:11px; } /* fold · name · waveform · folder (search only) · meta · format tag. THE TAG IS ON THE RIGHT (Phil, 2026-09-06: "the file format label in the library should be positioned to the right, it causes too much visual clutter on the left"), and a 14px fold column took its place. NOT ONE `auto` TRACK. The meta column used to be `auto`, so its CONTENT decided the width of the two 1fr tracks beside it — which meant a row carrying "in this project (slots 03, 06)" put its waveform somewhere else than the row above (Phil: "The position of the waveform preview should be aligned, it moves around depending on what info is being shown"). Every track here resolves from the CONTAINER, so every row has identical geometry and the waveform column is a straight line down the list. Overflow is ellipsis inside the cell, which is what minmax(0,…) makes possible. EVERY COLUMN IS NAMED EXPLICITLY below rather than auto-placed, because the play glyph is a seventh child that has to land ON the waveform. */ .lib-row { display:grid; grid-template-columns:14px minmax(0,1.4fr) 64px minmax(0,0.8fr) minmax(0,1.5fr) 48px; gap:6px; align-items:center; padding:3px 8px; cursor:default; font-size:11px; } .lib-row > .lib-fold { grid-area:1/1; } .lib-row > .lib-name { grid-area:1/2; } .lib-row > .lib-wave { grid-area:1/3; } .lib-row > .lib-dir { grid-area:1/4; } .lib-row > .lib-meta { grid-area:1/5; } .lib-row > .lib-kind { grid-area:1/6; } .lib-row > .lib-play { grid-area:1/3; } .lib-wave { width:64px; height:14px; display:block; } /* THE FOLD GLYPH: + and −, never a triangle. Phil, 2026-09-06: "The carets used for folder heirarchy are too similar to the audition play button". It keeps a fixed box so a row with no fold is exactly as tall. */ .lib-fold { font-size:11px; line-height:10px; min-height:10px; text-align:center; color:var(--text-dim); cursor:pointer; font-variant-numeric:tabular-nums; } .lib-row:hover .lib-fold { color:var(--text-hi); } .lib-row.lib-modrow .lib-name { color:var(--text-hi); } .lib-searchbar .lib-search { flex:1 1 auto; } /* The module view keeps the search row and hides the two the index needs. */ #lib-local-pane.lib-moduleview .lib-bar:not(.lib-searchbar), #lib-local-pane.lib-moduleview .lib-banners { display:none; } /* THE SLICE READOUT TAKES A LINE OF ITS OWN, and that is what stops it moving the controls beside it. Phil, 2026-09-06: "The 3 dropdowns (bit depth, mono/stereo, clip) still get reflowed by the slice readout." #ipr-play-row is a flex line; the span was sized to its content, and its text swings between "no slice - the whole sample plays" and "slice: 2000 of 45678 frames", so every set or clear pushed the three selects along. flex-basis 100% forces the line break after the controls (the span is last in the row now), which fixes their positions whatever the text says and keeps the sentence whole - the alternative, a fixed width with an ellipsis, would have had to cut it at about half. */ /* AN ID IN THE SELECTOR, and that is not decoration: .ipr-dialog .ipr-ro (0,2,0) and .ipr-dialog .ipr-grid .ipr-ro (0,3,0) both set flex on this element and both sit LATER in this file, so a bare .ipr-play-note lost to them and the span went back to being sized by its text. Measured with it: the note was 195px wide and only left the controls alone because it happened not to fit beside them at that dialog width. */ .ipr-dialog #ipr-play-row .ipr-play-note { flex:0 0 100%; } .ipr-play-note { color:var(--text-dim); font-size:10px; align-self:center; } .ipr-inline { margin-left:6px; font-size:10px; white-space:nowrap; } .ipr-rate-note { margin-left:8px; } /* The Library strip's chosen region (Shift-drag): the part a Load takes. */ .lib-aud-wave.lib-aud-hasregion { outline:1px solid var(--sel-edge); outline-offset:-1px; } /* The scroll content: full height for an exact scrollbar, and the positioning parent for the pooled rows. See the header for why this element has to exist rather than the rows being positioned against .lib-list itself. */ #lib-rows { position: relative; width: 100%; } /* Pooled rows are placed by an inline `top`. `right:0` rather than a width so the row still spans the list at any scrollbar width. */ .lib-list .lib-row { position: absolute; left: 0; right: 0; } /* A pool slot with no row to show. Parked off-screen rather than display:none so its box never has to be re-created. */ .lib-list .lib-row.lib-spare { visibility: hidden; } /* A FOLDER ROW LOOKS LIKE A FOLDER (Phil, 2026-09-06: "it should be easier to tell folders and files apart"). Its name is bolder and brighter, and the column where a file names its format says FOLDER or SOURCE instead — a dashed, dimmer box, so the eye can sort the list at a glance without any row changing height. */ .lib-treerow .lib-name { color: var(--text-hi); font-weight:600; } .lib-treerow.lib-srcfolder .lib-name { color: var(--accent-ink); letter-spacing:0.3px; } .lib-kind-folder { border-style:dashed; opacity:0.75; } .lib-treerow:hover .lib-kind-folder { opacity:1; } /* The banners strip above the scroller. It has no height of its own — it is empty most of the time — and only its children carry styling. */ .lib-banners:empty { display: none; } .lib-banners { border: 1px solid var(--border-control); border-bottom: 0; border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--bg-inset); } .lib-row:hover { background:var(--bg-hover); } /* THE ROW'S PLAY GLYPH SITS ON THE WAVEFORM. Phil, 2026-09-06: "if we generated waveform previews for every file on scanning like I asked for, we could put the play button there". It shares the waveform's grid cell rather than being positioned by hand, so it is centred on the picture at any width and cannot drift out of it. The canvas under it answers the same click, so a row whose envelope has not been read yet still has a target of the same size in the same place. */ /* THE GLYPH NEVER TAKES THE CLICK — the CANVAS UNDER IT DOES. It is 15px wide and sits in the middle of a 64px cell, so with `pointer-events:auto` the centre of the waveform behaved differently from its edges: measured 2026-09-06, a press dead-centre landed on the ROW (selecting) while one 20px to the left played. One target, the whole cell, and the glyph is decoration over it. */ .lib-row .lib-play { justify-self:center; align-self:center; z-index:1; color:var(--text); font-size:12px; line-height:10px; min-height:10px; text-shadow:0 0 3px var(--bg-inset), 0 0 3px var(--bg-inset); opacity:0; pointer-events:none; transition:opacity .1s ease; } .lib-row.lib-auditionable:hover .lib-play { opacity:1; } .lib-row.lib-auditionable:hover .lib-wave { opacity:0.45; cursor:pointer; } .lib-row.lib-auditionable .lib-wave:hover ~ .lib-play { color:var(--accent-hi); } /* THE AUDITION STRIP. Phil, 2026-09-06: "the audition waveform in the library is tiny now that the load & load new buttons are there" — measured at 37px of picture in a 640px dialog, because Load, Load new, the timer, the NOTE label, the slider and the note readout were all taking their room out of the one flexible thing on the row. The buttons moved to a COLUMN OF THEIR OWN at the strip's end, stacked, so they cost 70px of width instead of 120 and no height at all; the NOTE label went (the readout says the note, and the slider carries the tooltip); and the timer and readout were trimmed. The strip keeps ONE height in every mode — two stacked buttons are shorter than the waveform beside them. */ .lib-audition { display:flex; align-items:center; gap:6px; margin:6px 0 4px; height:36px; } .lib-aud-play { flex:0 0 auto; min-width:40px; } /* Load / Load new / Open share one fixed place and show or hide in it. */ .lib-aud-actions { flex:0 0 78px; display:flex; flex-direction:column; justify-content:center; gap:2px; height:100%; } .lib-aud-actions .btn { width:100%; padding-top:0; padding-bottom:0; min-height:15px; line-height:14px; } .lib-open-btn { display:none; } .lib-audition.lib-aud-module .lib-open-btn { display:block; } .lib-audition.lib-aud-module .lib-load-btn, .lib-audition.lib-aud-none .lib-load-btn { display:none; } .lib-audition.lib-aud-module .lib-aud-play, .lib-audition.lib-aud-none .lib-aud-play { visibility:hidden; } .lib-aud-info { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); font-size:11px; } .lib-aud-info[hidden] { display:none; } /* The picked file's own line: its date, size and path, one line high whether or not anything is picked (js/library-ui.js fileLine). */ .lib-aud-file { height:14px; line-height:14px; margin:-2px 0 4px; font-size:10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* WHERE IT CAME FROM: the attribution line under the strip, only for a file with a provenance record. Two rows - the facts, then the tags - in the dim text the strip's info line uses; the licence badge is the one the Online pane's rows wear (.lib-lic-badge, shared). */ .lib-attr { display:flex; flex-direction:column; gap:3px; margin:0 0 4px; font-size:11px; color:var(--text-dim); } .lib-attr[hidden] { display:none; } .lib-attr-line { display:flex; align-items:center; gap:6px; min-width:0; white-space:nowrap; overflow:hidden; } .lib-attr-line > span, .lib-attr-line > a { overflow:hidden; text-overflow:ellipsis; } .lib-attr-line a { color:inherit; } .lib-attr-line .btn { flex:0 0 auto; } .lib-attr-state.edited { color:var(--accent-hi); } .lib-attr-tags { display:flex; flex-wrap:wrap; align-items:center; gap:4px; } .lib-tag { display:inline-flex; align-items:center; gap:3px; font-size:10px; padding:1px 5px; border-radius:2px; background:var(--bg-inset); color:var(--text-dim); } .lib-tag.src { opacity:.7; } .lib-tag button { all:unset; cursor:pointer; padding:0 1px; line-height:1; } .lib-attr-input { width:8em; font-size:10px; } .lib-aud-time { flex:0 0 auto; min-width:7em; text-align:right; color:var(--text-dim); font-size:10px; font-variant-numeric:tabular-nums; } /* WHAT KEEPS ITS PLACE IS THE TWO ENDS. The play button on the left and the actions column on the right never move — those are the controls a hand goes to. The note slider, its readout and the timer belong to a sample and are taken OUT of the flow for a module or for nothing picked, so the line about the module gets the 260px they were holding empty: it used to be cut off at "abreed3d - MMD3 · 15 instr · 4 ch…", which is the description Phil asked the strip to show (2026-09-06). The play button is only hidden, not removed, because removing it WOULD move the left edge. */ .lib-audition.lib-aud-module .lib-aud-note, .lib-audition.lib-aud-module .lib-aud-notename, .lib-audition.lib-aud-module .lib-aud-time, .lib-audition.lib-aud-none .lib-aud-note, .lib-audition.lib-aud-none .lib-aud-notename, .lib-audition.lib-aud-none .lib-aud-time { display:none; } .lib-audition.lib-aud-module .lib-aud-wave, .lib-audition.lib-aud-none .lib-aud-wave { display:none; } /* A PLUGIN ROW takes the module layout's INFO LINE — it has no waveform to draw and no position to time either — but keeps the play button, the note slider and its readout, which is the whole difference: you choose the pitch you want to hear it at, exactly as you do for a sample. It keeps Load too, because a plugin row loads into a slot like any other; only Open is meaningless, so only Open is hidden. */ .lib-audition.lib-aud-wam .lib-aud-wave, .lib-audition.lib-aud-wam .lib-aud-time, .lib-audition.lib-aud-wam .lib-open-btn { display:none; } .lib-audition.lib-aud-wam .lib-load-btn { display:block; } .lib-audition.lib-aud-wam .lib-aud-play { visibility:visible; } .lib-audition.lib-aud-wam .lib-aud-note, .lib-audition.lib-aud-wam .lib-aud-notename { display:inline-block; } .lib-aud-wave { flex:1 1 auto; min-width:0; height:34px; background:var(--bg-inset); cursor:text; border:1px solid var(--border-control); border-radius:var(--radius-control); } /* WIDTH AS WELL AS THE FLEX BASIS: a range input carries a UA width that wins over `flex-basis` alone, and it was 129px where 96 was asked for — a third of the waveform, given away silently. */ .lib-aud-note { flex:0 0 90px; width:90px; min-width:0; } .lib-aud-notename { flex:0 0 8em; color:var(--accent-hi); font-size:11px; white-space:nowrap; overflow:hidden; } /* THE PICKED ROW, the way the sequence, block and instrument lists draw it (see .seq-row.sel): a left bar and a bold bright-amber name, not a fill. Phil, 2026-09-05: "hover/selection highlighting doesn't follow the same styling as the rest of the app". */ .lib-row.sel { box-shadow:inset 2px 0 0 var(--accent-ink); } /* The kind tag doubles as the "not yet" signal: a kind that cannot be loaded is dimmed and carries its reason in the tooltip, rather than the file being hidden. A pool that omits files the user can see in the folder is worse than one that explains them. */ /* line-height AND min-height, both explicit: `.lib-kind` is what sets the height of every row in a uniform-pitch virtualised list, and since 2026-09-06 a folder row's tag can be EMPTY. A box with no line box in it is zero-high, which would have made folder rows shorter than file rows and put the scroll window permanently out of step. */ .lib-kind { font-size:9px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-dim); border:1px solid var(--border-control); border-radius:2px; padding:1px 4px; text-align:center; white-space:nowrap; line-height:10px; min-height:10px; overflow:hidden; text-overflow:ellipsis; min-width:0; } .lib-kind-soon { opacity:0.5; border-style:dashed; } .lib-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-hi); } .lib-row.sel .lib-name { color:var(--accent-hi); font-weight:600; } .lib-dir { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); font-size:10px; direction:rtl; text-align:left; } .lib-meta { color:var(--text-dim); font-size:10px; white-space:nowrap; font-variant-numeric:tabular-nums; } .lib-row.sel .lib-meta, .lib-row.sel .lib-dir { color:var(--text-dim); } /* --alert, the token this project already uses for a refusal, and NOT an invented name with a fallback: `var(--unknown, var(--text-dim))` renders the fallback forever and nothing ever says so. Two gates catch that — colour-tokens and control-uniformity — and both caught this one. */ .lib-bad { color:var(--alert); } /* THE META COLUMN NOW CARRIES SENTENCES, not just "44100 Hz". It sits in the `auto` track opposite two minmax(0,1fr) tracks, so without these three it would push the name and folder columns out rather than being clipped — the one text column that was missing them. */ .lib-meta { overflow:hidden; text-overflow:ellipsis; } /* ── Folder sources ─────────────────────────────────────────────────────── A remembered folder comes back needing permission, and the browser will only re-grant it during a click — so the ask is a ROW WITH A BUTTON at the top of the list, not a prompt at load. It sits above the entries because "the pool is empty" would be a lie when the truth is that it is full and locked. */ .lib-srcbar { margin-top:-4px; } .lib-srcnote { color:var(--text-dim); font-size:10px; } /* THE DESCRIBE PASS'S PROGRESS LINE (Phil, 2026-09-06). It lives in the source bar between Show and the source note, and it is HIDDEN when idle rather than moved: Pause and Stop keep their place and grey out, which is the same rule Rescan and Forget follow. Fixed width, so a count going from 9 to 1,204 cannot reflow the bar. */ .lib-progress { display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0; } /* The search box gives way to it rather than the other way round: the box is already the widest thing in the row and the line is at most a sentence. MIN-WIDTH 0, NOT 120px (2026-09-12). A flex item's default min-width:auto is its CONTENT's width, and for an that is its size attribute, not its text - measured at 404px here, which laid the row out 92px wider than the dialog: a horizontal scrollbar, Stop clipped off the right, and the box truncated. 0 is what lets it actually give way, and it is what the rule below (.lib-bar .lib-search) already said before this one overrode it. */ .lib-bar.lib-searchbar .lib-search { min-width:0; } .lib-progress-track { width:70px; height:5px; flex:none; background:var(--bg-inset); border:1px solid var(--seam); border-radius:3px; overflow:hidden; } .lib-progress-fill { display:block; height:100%; width:0; background:var(--accent-hi); transition:width .2s linear; } .lib-progress-text { color:var(--text-dim); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* 60ch is wider than this dialog: cap it against the ROW instead, so a long path ellipses rather than widening the bar (2026-09-12). */ max-width:min(60ch, 28vw); min-width:0; } /* Paused reads as paused: the bar stops being the accent colour. */ .lib-progress-paused .lib-progress-fill { background:var(--text-dim); transition:none; } /* The same line in the app status bar. It shares .status-right's row, so it is clamped rather than allowed to push the keys hint off the end. */ #status-lib { color:var(--accent-ink); max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lib-srcrow { display:flex; align-items:center; gap:8px; padding:5px 8px; font-size:11px; background:var(--bg-hover); border-bottom:1px solid var(--border-control); } .lib-srcrow .lib-name { flex:0 1 auto; } .lib-srcrow .lib-meta { flex:1 1 auto; white-space:normal; } /* Locked and missing are DIFFERENT things and must not read the same. A locked row is intact and one click from working, so it only dims. A missing row is a file that is not there, so it also strikes through — the distinction the whole permission-versus-reachability split exists to preserve. */ .lib-row.lib-locked .lib-name { opacity:0.65; } .lib-row.lib-gone .lib-name { opacity:0.65; text-decoration:line-through; } /* ── The HighLife body ──────────────────────────────────────────────────── READ-ONLY by design: js/writer.js carries a HighLife instrument byte-for-byte rather than re-encoding it, so this panel shows and does not offer. The zone list is a five-column grid because "which keys does this cover" is the first question and a keyboard map answers it more prettily but less directly. */ .hl-facts { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:baseline; } .hl-zonehead, .hl-zone { display:grid; grid-template-columns:minmax(0,1fr) 92px 52px 92px 76px; gap:8px; align-items:center; padding:2px 8px; font-size:11px; } .hl-zonehead { color:var(--text-dim); font-size:10px; letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid var(--border-control); } /* 118px shows five zones and scrolls the rest. The panel is the tallest of the four and the dialog is tabbed BECAUSE of height (the head plus every body stacked measured 887 px against a 415 px viewport), so the zone list is the part that gives — a bank can have dozens of zones and no height would ever be "enough". */ .hl-zones { max-height:118px; overflow-y:auto; overflow-x:hidden; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); } .hl-zone { cursor:default; } .hl-zone:hover { background:var(--bg-hover); } .hl-zone.sel { background:var(--accent-fill); color:var(--on-accent); } .hl-zname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-hi); } .hl-zone.sel .hl-zname { color:var(--on-accent); } .hl-zkeys, .hl-zroot, .hl-zrate, .hl-zloop { color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; } .hl-zone.sel .hl-zkeys, .hl-zone.sel .hl-zroot, .hl-zone.sel .hl-zrate, .hl-zone.sel .hl-zloop { color:var(--on-accent); opacity:0.85; } .hl-canvas { display:block; width:100%; height:70px; margin-top:8px; background:var(--bg-inset); border:1px solid var(--border-control); } /* ── The synth body ─────────────────────────────────────────────────────── Two sequences side by side, because a MED synth IS two programs running against each other — showing them apart would hide the only relationship that matters (and JWS / JVS jump between them). */ .syn-speeds { display:flex; align-items:center; gap:6px; margin-bottom:8px; } .syn-speeds label { color:var(--text-dim); font-size:10px; letter-spacing:1px; text-transform:uppercase; } .syn-speeds input[type="number"] { width:52px; } .syn-spacer { flex:1 1 auto; } .syn-seqs { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .syn-seq-head { color:var(--text-dim); font-size:10px; letter-spacing:1px; text-transform:uppercase; margin-bottom:3px; } .syn-rows { height:150px; overflow-y:auto; overflow-x:hidden; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); outline:none; } .syn-rows:focus-visible { border-color:var(--accent-dim); } .syn-row { display:grid; grid-template-columns:30px 24px 1fr; gap:6px; padding:1px 6px; font-size:11px; font-variant-numeric:tabular-nums; cursor:default; } .syn-row:hover { background:var(--bg-hover); } .syn-ln { color:var(--text-dim); } .syn-by { color:var(--text-hi); } /* WHAT THE WALK SAYS EACH BYTE IS — not what it looks like on its own. A command's argument is dimmed toward the value colour because it is data, and an undefined opcode is alerted because MED would run it as an end. */ .syn-cmd .syn-tx { color:var(--accent-ink); } .syn-arg .syn-tx, .syn-arg .syn-by { color:var(--text-dim); } .syn-bad .syn-tx, .syn-bad .syn-by { color:var(--alert); } /* Everything after END or HLT is unreachable. MED draws those bytes exactly like any other, which is why "my sequence stops halfway" has no visible cause there; here the tail simply recedes. */ .syn-unreached { opacity:0.35; } .syn-row.sel { background:var(--accent-fill); } .syn-row.sel .syn-ln, .syn-row.sel .syn-by, .syn-row.sel .syn-tx { color:var(--on-accent); } /* The live program counter while Preview runs. Deliberately a different channel from selection — you are watching one row and pointing at another. */ .syn-row.running { box-shadow:inset 2px 0 0 var(--accent-hi); } .syn-row.running .syn-ln { color:var(--accent-hi); } .syn-entry { margin-top:8px; } .syn-entry input[type="text"] { width:46px; text-transform:uppercase; } .syn-waves { margin-top:8px; } .syn-wave-info { display:flex; align-items:center; gap:6px; margin-bottom:4px; } .syn-wave-info label { color:var(--text-dim); font-size:10px; letter-spacing:1px; text-transform:uppercase; } .syn-canvas { display:block; width:100%; height:78px; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:crosshair; touch-action:none; } .syn-ops { display:flex; align-items:center; gap:4px; margin-top:6px; } /* ── The sample editor ──────────────────────────────────────────────────── One canvas, because a sample is 64 kB of numbers and the only way to see it is as a shape — and the only way to say "this part" is to drag across it. */ .smp-editor { margin-top:10px; padding-top:8px; border-top:1px solid var(--border-control); } /* IT WRAPS RATHER THAN CLIPS. Phil, 2026-08-30: "it would be helpful if selections and ranges were visible in hex and decimal, as that can be used for commands like sample offset." Both bases plus the cmd 19 hint is a long line - 354px of text in 283px of row at --ui-scale 0.75 - and an ellipsis falls on the END, which is exactly where the hex and the hint are. So the two readouts sit side by side while they fit and drop to a second line when they do not, instead of quietly truncating the numbers they exist to show. */ /* ONE LINE, ALWAYS - Phil, 2026-09-02: "the info row above the waveform view can wrap and cause the UI height to shift." The left readout keeps its width; the right one takes what is left and ellipsises at its END, where the hex and the cmd-19 hint are - and both are repeated in its tooltip, so nothing is lost, only moved off the line. The bar reserves its height. */ .smp-bar { display:flex; align-items:center; gap:6px; margin-bottom:4px; flex-wrap:nowrap; min-height:14px; } /* The left readout may ellipsise too (its full text is in its tooltip): Phil, 2026-09-05, "the info text truncates at small window sizes" - it was being cut by the bar rather than shortened. */ /* AND THE ROW MUST NOT RE-LAY ITSELF OUT WHEN THE LEFT READOUT GROWS. Phil, 2026-09-06, on setting a slice: "if a play region is selected, the readout can make the UI shift around". It could: the info span was sized to its CONTENT (flex:0 1 auto), so adding "· slice 1000-3000 (2000)" to it ate the spacer and dragged the right-hand readout left. The info span takes the free space instead (flex:1 1 0) and ellipsises inside it, so text arriving or leaving moves nothing at all; the selection readout keeps its own place at the right. The spacer between them is then only a gap. */ .smp-bar #ipr-smp-info { flex:1 1 0; min-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .smp-bar .syn-spacer { flex:0 0 6px; } .smp-bar #ipr-smp-sel { flex:0 0 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; } .smp-canvas { display:block; width:100%; height:112px; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:text; touch-action:none; } /* THE WAVEFORM TAKES FOCUS, so it must show that it has it. Its keyboard bindings (+/-, Home/End, Shift+E, the arrows) are scoped to this element precisely so they cannot collide with the pattern editor or a text field - which makes "is the waveform focused" a question the user has to be able to answer by looking. :focus-visible rather than :focus so an ordinary mouse click does not paint a ring nobody asked for. */ .smp-canvas:focus { outline:none; } .smp-canvas:focus-visible { outline:2px solid var(--accent-ink); outline-offset:-1px; } /* THE PLAYHEAD OVERLAY. The canvas is not touched: a head is a DOM sliver moved with transform, exactly as the instrument-list heads work (js/instrument-playheads.js). Drawing it on the canvas would mean redrawing the envelope underneath it ~47 times a second — and that envelope is built by walking every frame of the sample, so a 64KB sample would cost 65,536 reads per head movement. inset:1px keeps the sliver inside the canvas's own 1px border rather than straddling it. */ .smp-wave { position:relative; } .smp-heads { position:absolute; inset:1px; overflow:hidden; pointer-events:none; } .smp-head { position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--accent-hi); will-change:transform; } /* ── spectral (package D): the spectrogram canvas ─────────────────────────── .spg-on is put on .smp-editor by js/sample-body.js whenever ui.smpSpectral is split or only. IT IS THE SAME BOX AS THE WAVEFORM CANVAS, deliberately: `inset:1px` puts it exactly inside the waveform canvas's own 1px border, which is where .smp-heads already sits, so all three surfaces share one coordinate space and a frame is at the same x on every one of them. Nothing here maps frames to pixels; the one xOf() in js/sample-body.js does, for all of them. BEHIND, VIA z-index, not by DOM order. An absolutely positioned element paints above a static sibling whatever the order, so the waveform canvas has to be lifted rather than the spectrogram pushed back — and lifting it would put it above .smp-heads too, which is why the heads take a z-index of their own. Three explicit rungs beat two implicit ones. AND THE WAVEFORM CANVAS GOES TRANSPARENT while this is on, because its background is --bg-inset and would otherwise hide the whole picture. The spectrogram takes that background instead, so the panel is the same colour it always was: the ramp's own bottom entry IS --bg-inset, so silence in the spectrogram and the ground behind it are one colour by construction. left/top ONLY, with the SIZE SET INLINE by paintSpectral. `inset:1px` — what .smp-heads uses — measures .smp-wave, and the waveform canvas is not 100% of .smp-wave: render() pins its width to a whole number of DEVICE pixels, which under box-sizing:border-box leaves its CONTENT box two px narrower again. Measured in the running app: .smp-wave 736, canvas border box 734, canvas content box 732 — so an inset:1px spectrogram is 734 px wide over the waveform's 732 and drifts 2 px from it by the right edge. The two must agree about x for the same frame or the whole design gives way, so the size comes from the waveform canvas rather than from a second guess at the layout. */ .smp-spec { position:absolute; left:1px; top:1px; display:none; z-index:0; pointer-events:none; background:var(--bg-inset); border-radius:var(--radius-control); } .smp-editor.spg-on .smp-spec { display:block; } .smp-editor.spg-on .smp-canvas { position:relative; z-index:1; background:transparent; } .smp-editor.spg-on .smp-heads { z-index:2; } /* TALLER WHEN THE VIEW IS SPLIT, so the waveform keeps the 112px it had rather than being halved to make room. `only` does not grow: nothing was displaced. The expanded window overrides both with height:100% further down, and this must not fight it — hence the plain .smp-canvas selector, which .ipr-expanded .smp-canvas beats on specificity. */ .smp-editor.spg-split .smp-canvas { height:224px; } /* …and the expanded window still wins, which needs saying explicitly: the rule above is three classes and `.ipr-expanded .smp-canvas` is two, so without this the pinned 224px would beat height:100% and expanding with the split view on would leave the canvas at 224px inside a full-screen dialog. */ .ipr-expanded .smp-editor.spg-split .smp-canvas { height:100%; } .smp-ops { display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap; } .smp-ops input[type="number"] { width:58px; } /* A GLYPH BUTTON IS STILL A BUTTON, and must stay hittable. NOT .btn-glyph: that class is a fixed 14x12 SLOT for a glyph sitting inside a labelled transport button, and its height:12px is load-bearing (it is what stopped the transport row shifting 2px when arming REC). These are standalone buttons whose whole content is the glyph, so they get their own class and their own box. min-width rather than width so a wide glyph is not clipped, and the same height as their worded neighbours so the row reads as one row. */ .smp-glyph { min-width:26px; padding-left:6px; padding-right:6px; font-size:12px; line-height:1; text-align:center; } /* A RULE, NOT A GAP. Transport and zoom are different jobs; four pixels of whitespace does not say so, and a divider costs nothing. */ .smp-sep { width:1px; align-self:stretch; margin:2px 4px; background:var(--border-control); } /* A GROUP LABEL, not a control. It names the two glyphs beside it so they are not mistaken for the time-zoom pair using the same two symbols. */ .smp-lbl { color:var(--text-dim); font-size:10px; letter-spacing:0.5px; padding:0 1px 0 2px; user-select:none; } /* ── THE OVERVIEW BAR ─────────────────────────────────────────────────────── The trough is the whole sample; the thumb is the window on screen above it. IT EXISTS BECAUSE THE ZOOM GOES DEEP. At the 32 px/sample ceiling the canvas shows about eighteen frames out of a hundred thousand, and without an overview nothing on screen says where those eighteen are. CURSORS CARRY THE AFFORDANCE and no label is needed: the middle of the thumb scrolls (grab), the two grips zoom (ew-resize), the trough pages. That is the one convention every surveyed editor shares. */ .smp-scroll { position:relative; height:12px; margin-top:4px; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); touch-action:none; cursor:pointer; overflow:hidden; } .smp-scroll-thumb { position:absolute; top:0; bottom:0; left:0; width:100%; /* 0.28 measured as too faint to find against --bg-inset on the dark theme - the bar was there, 424x12 with a 26px thumb, and still read as an empty gap in a screenshot. A scrollbar nobody can see is not a scrollbar. */ background:var(--accent-ink); opacity:0.5; border-radius:calc(var(--radius-control) - 1px); cursor:grab; will-change:left, width; } .smp-scroll-thumb:hover { opacity:0.68; } .smp-scroll-thumb:active { cursor:grabbing; opacity:0.78; } /* A WHOLE-SAMPLE VIEW IS NOT A SCROLLBAR. When the thumb fills the trough there is nothing to scroll, and a full-width grabbable bar invites a drag that cannot do anything. */ .smp-scroll.at-full .smp-scroll-thumb { opacity:0.14; cursor:default; } .smp-scroll.at-full .smp-scroll-grip { display:none; } /* THE GRIPS ARE WIDER THAN THEY LOOK is the intent, but width alone cannot do it inside overflow:hidden, so they are simply drawn at a size that survives --ui-scale 0.75 - the scale at which Windows MED's icon strip stops being readable, and the one this whole panel is checked against. */ .smp-scroll-grip { position:absolute; top:0; bottom:0; width:7px; cursor:ew-resize; background:var(--accent-hi); opacity:0.85; } .smp-scroll-grip[data-grip="a"] { left:0; border-radius:2px 0 0 2px; } .smp-scroll-grip[data-grip="b"] { right:0; border-radius:0 2px 2px 0; } /* THE MESSAGE LINE RESERVES ITS SPACE. Phil, 2026-08-30: "Messages at the bottom, like 'already at full scale' cause the UI to shift." The cause is `.fr-help:empty { display:none }` further down this file: with no message the line is not laid out at all, and the first refusal makes a whole row of layout appear under the buttons - which moves every button the user was aiming at. Reserving one line's height always is the same answer the readouts above the waveform already got. THE 112px INDENT GOES TOO. It belongs to Find & Replace, whose help text lines up under a 112px label column; there is no such column here, and it was pushing every message a third of the way across the panel. */ #ipr-smp-note { display:block; /* beats .fr-help:empty, on ID specificity */ margin:4px 0 0 0; min-height:1.6em; /* exactly the line-height .fr-help sets */ /* ONE LINE, ALWAYS. The reserve above is a single line box, so a message long enough to wrap would put the jolt straight back — and the longest reachable one is 81 characters ("Instrument N holds M octaves in one buffer - editing one would desync the others"), which does not fit. The full text is still in the status bar, which every op writes to as well. */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ═══ FULL-WINDOW WAVEFORM ═══════════════════════════════════════════════ The expanded state fills the viewport and hands every spare pixel to the canvas. Written in the DIALOG's units, not the viewport's: the dialog sits inside a body scaled by --ui-scale, so 100vw here would be scaled a second time and overhang by a third at scale 0.75. SCOPED ENTIRELY UNDER .ipr-expanded, so the ordinary docked-panel layout above cannot be touched by any of it - the normal path keeps its fixed 112px canvas and its block body, and none of these rules apply until the button is pressed. */ .sd-overlay.floating > .sd-dialog.ipr-expanded { left:0 !important; top:0 !important; width:calc(100vw / var(--ui-scale)); height:calc(100vh / var(--ui-scale)); max-width:none; max-height:none; display:flex; flex-direction:column; } /* The chain from the dialog down to the canvas has to be flexible at every link, or the growth stops at the first block element and the canvas keeps its 112px inside a very tall window. */ .ipr-expanded .sd-body { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } .ipr-expanded #ipr-panel-sample { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } .ipr-expanded .smp-editor { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; } .ipr-expanded .smp-wave { flex:1 1 auto; min-height:120px; } /* height:100% against the flexed .smp-wave, so the canvas tracks the space its parent was given rather than the 112px the base rule pins. */ .ipr-expanded .smp-canvas { height:100%; } /* align-items IS flex-start IN BOTH VIEWS, and that is the fix for a real glitch: "the top instrument jumps down slightly, the others move with it, then they animate back to compact" (Phil, 2026-08-12). Expanded pinned the content to the top; compact centred it. align-items is NOT an animatable property, so collapsing flipped it back to `center` on frame 0 while the row was still 40px tall — measured, the name dropped from 3px to 13px below the row top instantly — and the height animation then carried it back up. The jump was the alignment, not the height. Holding flex-start throughout removes it. It only looks identical to `center` in compact because the children below are given a shared line-height; without that the 10px number and the 13px glyph would top-align against the 12px name instead of sharing its centre line. */ /* flex-wrap + a SEPARATE row-gap, so the detail line below the name costs nothing when it is collapsed. `gap:5px` would have applied 5px BETWEEN the two flex lines as well as between the items, so a zero-height second line still grew every compact row by 5px. column-gap alone keeps the horizontal spacing and makes the wrapped line free. */ /* NOWRAP, AND THE DETAIL LINE IS OUT OF FLOW. This was `flex-wrap: wrap`, because the second line needed a way to exist — .indet took `flex: 0 0 100%` and forced its own line. The cost was that line ONE could wrap too: a flex container breaks lines on each item's HYPOTHETICAL size, before any shrinking is considered, so an auto-width name or a `flex: none` size chip pushed itself onto a new line rather than ellipsising. Measured on a 238px panel dragged narrower — at 210px the type tag and size dropped to a second line (row 20px → 35px) and by 175px the name followed it (→ 50px), which is Phil's report on 2026-08-12: "the text starts wrapping to a new line instead of being truncated or removed". No amount of min-width:0 fixes that; the break happens first. So .indet is absolutely positioned now, like .inst2 beside it, and the row never wraps at all. overflow:hidden is the backstop for the two chips that genuinely cannot shrink. */ .inr { position:relative; display:flex; flex-wrap:nowrap; align-items:flex-start; overflow:hidden; column-gap:5px; row-gap:0; padding:2px 7px 2px 3px; border-bottom:1px solid var(--seam-soft); cursor:default; } .inr:hover { background:var(--bg-hover); } /* NO FILL. The block and sequence lists mark a pick with a left bar and bold bright amber text; this used a filled amber background instead, which is the inconsistency Phil reported on 2026-08-09. The bar and the text now come from `.inr.sel` above, shared with the other two lists, and this rule keeps only the amber text that says "current instrument" to everything else reading it. */ .inr.selected { color:var(--accent-ink); } /* EVERY FOREGROUND ITEM IN THE ROW SITS OVER A WAVEFORM, so all of them need contrast and a shadow — not just the name, and not only when expanded. Phil, 2026-08-12: "it's quite hard to make out the instrument number, bit depth and audition button at either height". They were the three dimmest things in the app: the number and the ▸ at --text-dim (#9a9184) 10px, and the type tag at --accent-dim (#8a5a07) NINE px, over a moving backdrop. The shadow is on the shared rule below so it applies at BOTH heights; the expanded-only rule that used to carry it for .inname alone is gone. */ /* min-width covers the slot as well as the digits, and it must not SHRINK: a two-digit index has nothing to give, so on a narrow panel the number was being squeezed against the name. .inname already carries min-width:0 and an ellipsis, so it is the one that should absorb it. */ .inn { color:var(--text); min-width:calc(2ch + var(--marker-slot)); flex-shrink:0; text-align:right; font-size:10px; } .inname { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* The bit-depth tag. Moved out of an inline style in js/app.js buildInstrList, which no stylesheet rule could have overridden. Brighter and a size up. */ .intype { color:var(--accent-ink); font-size:10px; flex-shrink:0; } /* Provenance on a chain row whose plugin is not installed: where the module expects it from. Dimmed because it is a fact about the file, not an action — the url is never a load target (js/wam-host.js resolveLoadUrl). */ .wam-prov { color:var(--text-dim); font-size:10px; margin-left:6px; opacity:.75; } /* ── Instrument-list waveform backdrop (instrument-waveforms.js) ───────── Per-slot canvas painted BEHIND the name text (compact) / filling a taller slot (expanded). Text spans get a stacking context above it. */ /* .inplay joins the list: the audition glyph is foreground too, and it was stacking correctly only because it set its own z-index. The shadow is what makes any of this readable over a waveform, so it belongs here rather than on the expanded-only rule. */ .inr > .inn, .inr > .inname, .inr > .intype, .inr > .inplay, .inr > .indet, .inr > .insize, .inr > .inst2 { position:relative; z-index:1; text-shadow:0 1px 2px var(--shadow-strong), 0 0 3px var(--shadow-mid); /* ONE LINE-HEIGHT FOR ALL FOUR, so they are the same BOX height despite spanning 10px to 13px of font. That is what lets the row hold align-items:flex-start in both views (see .inr above): with equal boxes, top-aligning and centring are the same picture, and the text inside each box is centred by its own line-height. Without it, dropping `center` would have top-aligned the number and the glyph against the taller name. */ /* Scaled by the font-size axis so the four boxes stay equal AND stay big enough for the type: at 120% the name's descenders were trimmed here. */ line-height: calc(15px * var(--font-room, 1)); } /* THE DETAIL LINE, under the name in the expanded view (task #44). Its own flex line via flex-basis:100%, NOT a switch of .inr to a column — the four items above share one line-height precisely so compact and expanded can hold one alignment, and changing that caused a measured collapse-animation jump. Injected by js/instrument-detail.js. HEIGHT-DRIVEN, both ends explicit, because the row's own min-height animates and anything sized by its content would snap while the row grew. 15px matches the shared line-height above, so the collapsed state is a true zero and the expanded state is exactly one line. It rides --row-delay like the height and the waveform, so a row's name, its backdrop and its detail all move together rather than the list rolling down in three passes. */ /* `.inr > .indet`, NOT `.indet` — exactly the trap documented on .inst2 above, walked into a second time. The shared foreground rule at .inr > .inn, … matches at (0,2,0) and sets position:relative, so a bare `.indet { position:absolute }` at (0,1,0) LOSES and the detail line stays in the flex line: measured position "relative", sitting at top:1 left:170 — the right end of line ONE, which is what Phil saw. Same specificity, later in the file, wins. (It also made the wrap fix look right for the wrong reason: no row grew a second line, because the second line's content had been squeezed onto the first.) */ .inr > .indet { /* OUT OF FLOW, so line one cannot be pushed around by it and cannot wrap. It kept `flex: 0 0 100%` while the row wrapped; pinning it to the row's bottom edge is the same result without a second flex line. The height transition still drives the reveal — an absolutely positioned box animates height exactly as an in-flow one does. */ position: absolute; left: 7px; right: 7px; bottom: 2px; height: 0; overflow: hidden; opacity: 0; font-size: 10px; line-height: 15px; letter-spacing: .5px; /* NO COLOUR OF ITS OWN — it inherits from .inr exactly as .inname does, so the two lines are the same brightness and the selected-row amber reaches both. It was --text-dim, which is the same mistake the row's number and audition glyph had: dim text over a waveform is unreadable (Phil, 2026-08-12: "it should be the same brightness as the the first line"). */ white-space: nowrap; text-overflow: ellipsis; transition: height .18s ease, opacity .14s ease; transition-delay: var(--row-delay, 0ms); } .med-list[data-list="instr"].inwave-expanded .indet { height: 15px; opacity: 1; } /* Empty text still means no line, whatever the view. */ .indet:empty { height: 0 !important; opacity: 0 !important; } /* ROOM FOR THE STEREO FLAG when there is one, and none when there is not. .inst2 is pinned to the same bottom-right corner, so without this the detail text would run underneath it on a wide row. */ .inr:has(.inst2:not(:empty)) .indet { padding-right: 34px; } /* LINE ONE GAINS THE SIZE, beside the name — "put the file size next to the instrument name on that same line? Just spreads it around a little". DOM order cannot place it (js/instrument-detail.js appends everything), so the row is ordered explicitly: number, name, size, type tag, then the detail line on its own row. .inname is flex:1, so the size is pushed hard against the tag and the name still ellipsises first. */ /* NAME then SIZE, both hard LEFT — "I wanted the file size to be on the left next to the instrument name, separated with a bullet". The name was flex:1, which meant it ATE the free space and shoved the size across to the tag, so the two never read as a pair. It sizes to content now (still ellipsising via min-width:0), the size follows it immediately, and the TAG takes the margin-left:auto that pushes it right. */ .inr > .inn { order: 0; } .inr > .inname { order: 0; flex: 0 1 auto; min-width: 0; } .inr > .insize { order: 1; } .inr > .intype { order: 2; margin-left: auto; } /* .indet has no `order`: it is out of flow (see .inr > .indet above). */ .insize { flex:none; font-size:9px; opacity:.75; white-space:nowrap; } .insize:empty { display:none; } /* The same bullet the attribute run uses, so one separator means one thing throughout the row. */ .insize::before { content:'·'; margin:0 4px 0 1px; opacity:.7; } /* In the table the name has a column and the size has its own, so neither the content-sizing nor the separator belongs there. */ .itable .inname { flex:initial; } /* STEREO SITS UNDER THE BIT-DEPTH TAG — "maybe we could also put the stereo flag under the bit depth?" — so the two format facts read as a little column on the right. Absolutely positioned rather than made a flex item: as a sibling of .indet it would have wrapped onto a THIRD line, and the row's height is animated, so a third line would have fought the transition. It follows the detail line's visibility exactly. */ /* `.inr > .inst2`, not `.inst2` — the shared foreground rule below matches at (0,2,0) and sets position:relative, so a bare `.inst2 { position:absolute }` lost to it and the flag stayed in the flow, landing to the LEFT of the size instead of under the tag. Same specificity, later in the file, wins. */ .inr > .inst2 { position:absolute; right:7px; bottom:2px; font-size:9px; line-height:15px; opacity:0; white-space:nowrap; transition:opacity .14s ease; transition-delay:var(--row-delay, 0ms); pointer-events:none; } .med-list[data-list="instr"].inwave-expanded .inst2 { opacity:.75; } .med-list[data-list="instr"].inwave-off .inst2 { opacity:0; } .inst2:empty { opacity:0 !important; } /* The table has real columns for both, so neither belongs there. */ .itable .insize, .itable .inst2 { display:none; } /* ── THE FLOATING WINDOW'S TABLE (.itable) ─────────────────────────────── ONE grid-template, shared by the heading row and every instrument row, so a column width is changed in exactly one place. The cells are placed by explicit grid-column rather than by source order, because .inn/.inname come from buildInstrList, .inplay from a wrapper in app.js and the .idc cells from js/instrument-detail.js — three writers whose DOM order is not a contract. The waveform canvas does not participate: it is position:absolute, inset:0, so it still spans the whole row behind the columns exactly as in the panel. */ /* THE AUDITION GLYPH HAS ITS OWN COLUMN, second: "we have space for both next to each other" (Phil, 2026-08-12). In the docked panel it appears over the NUMBER on hover instead — see the :not(.itable) rules below. */ /* Column 1 is 32px, not 24: the number now reserves a 10px slot at its left for the unused marker, so the digits need the room back. */ /* The name column: 96px truncated most modules' names in the undocked window (Phil, 2026-09-05); 140px holds a 20-character name at the list's size. */ :root { --itable-cols: 32px 18px minmax(140px,1fr) 54px 62px 34px 30px 62px 60px 44px 38px 46px; } .itable-head { display: grid; grid-template-columns: var(--itable-cols); column-gap: 6px; padding: 3px 7px; border-bottom: 1px solid var(--border); font-size: 8px; letter-spacing: 1px; color: var(--text-dim); text-transform: uppercase; white-space: nowrap; } .itable .inr { display: grid; grid-template-columns: var(--itable-cols); column-gap: 6px; align-items: center; } /* EVERY CELL ON GRID ROW 1. Without this the row silently became TWO rows of 15px: the cells carry an explicit grid-column but auto-placement also assigns a ROW, and because .inplay sat at the far column BEFORE them in DOM order the cursor had already passed it, so every .idc wrapped onto a second line. That is why the window's compact row measured 35px against the docked 20px, and why the columns read as out of step with their headings. */ .itable .inr > * { grid-row: 1; } .itable .inn { grid-column: 1; } .itable .inplay { grid-column: 2; margin-left: 0; text-align: center; } .itable .inname { grid-column: 3; } /* COLUMN ORDER (Phil, 2026-08-12): what an instrument IS comes before what it does — Mem Use, Format, Vol, then the loop group, then the tuning group. Windows MED's own order put Loop Start / Loop Len third and fourth, which pushed Format and Vol past the middle of a wide window; these are the two you scan for, and the loop numbers are blank on most rows anyway. */ .itable .idc-size { grid-column: 4; } .itable .idc-fmt { grid-column: 5; } .itable .idc-vol { grid-column: 6; } .itable .idc-loop { grid-column: 7; } .itable .idc-lstart { grid-column: 8; } .itable .idc-llen { grid-column: 9; } .itable .idc-tr { grid-column: 10; } .itable .idc-fine { grid-column: 11; } .itable .idc-env { grid-column: 12; } /* The type tag is redundant beside a Format column, and .indet is the DOCKED presentation of the same facts — neither belongs in the table. */ .itable .intype, .itable .indet { display: none; } .itable .idc { position: relative; z-index: 1; font-size: 10px; line-height: 15px; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px var(--shadow-strong), 0 0 3px var(--shadow-mid); } /* Numbers right-align so digits line up down the column, as both MEDs do; Format and Env are word-ish and stay left. */ .itable .idc-size, .itable .idc-lstart, .itable .idc-llen, .itable .idc-tr, .itable .idc-fine, .itable .idc-vol { text-align: right; } .itable .idc-loop { text-align: center; } /* THE HEADINGS MUST MATCH THEIR CELLS' ALIGNMENT, or a right-aligned number under a left-aligned title reads as a misaligned column even when the grid is exact. Indices follow the column order above. */ /* The numeric columns: Mem Use, Vol, Loop Start, Loop Len, Transp, Fine. PAIRED with the .idc rules above — a column moves, both move. */ .itable-head span:nth-child(4), .itable-head span:nth-child(6), .itable-head span:nth-child(8), .itable-head span:nth-child(9), .itable-head span:nth-child(10), .itable-head span:nth-child(11) { text-align: right; } .itable-head span:nth-child(7) { text-align: center; } /* And column 1: .inn is right-aligned like the other numerics (both MEDs line their digits up), so its heading is too — it was the last one still reading as offset. */ .itable-head span:nth-child(1) { text-align: right; } /* AND NOTHING WHEN THE PANEL IS TOO NARROW TO READ IT. Phil, 2026-08-12: "I'm actually not sure if we need the right click menu, as I think everything could fit in a fairly narrow sized panel view. we could just not show it when the panel is too narrow." .inwave-off is exactly that threshold already — js/instrument-waveforms.js sets it per host below MIN_PANEL_W, the same 150px cutoff that hides the waveform and the type tag — so the detail line rides a measurement that exists rather than inventing a second one. */ .med-list[data-list="instr"].inwave-off .indet { height: 0; opacity: 0; } /* OPACITY LIVES HERE NOW, not in the canvas pixels. drawSlot used to bake two fillStyles — 0.26 compact against 0.5 expanded — and repaint every canvas the instant the view changed, while the row heights rolled down over ~380ms. That mismatch is what popped. .52 against 1 reproduces those two alphas exactly, and shares the --row-delay ladder with the height so the two stay in step. */ /* DIMMER IN BOTH VIEWS AND AT BOTH SIZES (Phil, 2026-08-12) — .52/1 became .34/.62. The waveform is a BACKDROP: it has to be readable as a shape while the text sitting on top of it stays the thing you read first, and the row's foreground was brightened earlier the same day, which shifted that balance. */ .inr-wave { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.34; transition:opacity .18s ease; transition-delay:var(--row-delay, 0ms); } /* SCOPED BY data-list, NOT BY #i-list — this rule and the four below it. inject() has always stamped these classes on EVERY [data-list="instr"] host, but every rule reacting to them was keyed to the DOCKED list's id. So the floating window received .inwave-expanded and nothing styled it: the class landed and the rows did not move. That is why the view toggle could not simply be duplicated into the window — the button would have looked broken rather than absent. The selector now follows the same host set the JS does; a hard-coded #lwi-list twin would only be a second place to forget. */ .med-list[data-list="instr"].inwave-expanded .inr-wave { opacity:.62; } /* FADE, NOT display:none — display cannot animate in either direction, so the previews vanished and reappeared outright when the panel crossed the narrow threshold (Phil, 2026-08-12). Keeping the layout box costs nothing: the canvas is already absolute, inset:0 and pointer-events:none. It also stops drawSlot's `clientWidth <= 0` early-bail firing on the hidden state. */ .med-list[data-list="instr"].inwave-off .inr-wave { opacity:0; } /* ── Phase C: live playheads (js/instrument-playheads.js) ───────────────── A sliver per sounding voice, sitting between the waveform canvas and the row text. `transform` is the ONLY thing the script writes per report, so a moving head is a compositor job — no layout, no repaint of the envelope underneath it. `contain` keeps that promise even if a head is ever given a box that could reflow its neighbours. The head is a gradient rather than a flat line so it reads at 20px as well as 40: a hard 1px rule against the envelope's own hard edges is hard to pick out, where a bloom around it is not. Width is 3px with the colour concentrated in the middle pixel, which is also what stops it shimmering as it crosses the pixel grid at sub-pixel steps. */ .inr-heads { position:absolute; inset:0; z-index:0; pointer-events:none; contain:layout style; overflow:hidden; } .inr-head { position:absolute; top:0; bottom:0; left:-1px; width:3px; display:none; background:linear-gradient(90deg, rgba(255,196,64,0) 0%, rgba(255,208,96,.85) 50%, rgba(255,196,64,0) 100%); will-change:transform; } /* Compact rows are short enough that a full-height head is a heavy mark; inset it slightly so it reads as a cursor over the wave rather than a divider between rows. Expanded rows have the height to carry the lot. */ .med-list[data-list="instr"]:not(.inwave-expanded) .inr-head { top:2px; bottom:2px; } /* No previews, no playheads — same threshold, same fade, one signal. */ .med-list[data-list="instr"].inwave-off .inr-heads { opacity:0; } /* Expanded: taller slots, name pinned to the top so the waveform reads below it (and leaves room for the Phase-C playhead). */ /* align-items is NOT restated here — the row holds flex-start in both views on purpose. Switching it was the collapse glitch; see .inr. */ .med-list[data-list="instr"].inwave-expanded .inr { min-height:40px; padding-top:3px; } /* (The expanded-only text-shadow on .inname moved to the shared foreground rule above — the waveform is behind the text at BOTH heights, so the shadow was missing in exactly the mode where the row is tightest.) */ /* Panel-header inline toggle (e.g. the instrument waveform view switch). */ .ph-btn { background:none; border:1px solid var(--border-control); color:var(--text-dim); font-size:11px; line-height:1; padding:1px 6px; border-radius:var(--radius-control); cursor:pointer; } .ph-btn:hover { color:var(--accent-hi); border-color:var(--accent-dim); } .ph-btn.on { color:var(--accent-hi); border-color:var(--accent-dim); background:var(--accent-wash); } /* (The SETUP SCREEN styles were removed 2026-07-14 along with the libopenmpt onboarding screen — the native MED engine needs no external library, so the app boots straight to the drop zone.) */ /* ── DROP ZONE ──────────────────────────────────────────── */ /* No cursor:pointer — the zone is a DROP target, not a click target (the click-to-open shortcut was removed 2026-07-28; OPEN is the click target). */ #dropzone { flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; margin:10px; border:2px dashed var(--border); color:var(--text-dim); transition:border-color .2s,color .2s; } #dropzone.show { display:flex; } #dropzone.hover { border-color:var(--accent-ink); color:var(--accent-ink); background:rgb(var(--accent-rgb) / 0.03); } #dropzone .di { font-size:48px; opacity:.18; } #dropzone .dh { font-size:11px; color:var(--text-dim); } /* ── PATTERN EDITOR ─────────────────────────────────────── */ #pattern-area { display: none; flex: 1; overflow: auto; background: var(--bg-pattern); /* THE PANE'S OWN GAP, density-controlled since 2026-08-24. Phil: "the module pattern's padding border is still unchanged, that could be trimmed." It was a fixed 8px on every side, and with the 2px border that is 10px of chrome per side -- 20px of height and 20px of width the grid never got. The border stays 2px in both densities: it is the focus indicator (the colour changes on .ed-focus), and thinning the one cue that says "typing goes here" to buy two pixels is a bad trade. */ margin: var(--d-pattern-margin); border: 1px solid var(--border); } #pattern-area.show { display: block; } #pat-hdr { position: sticky; top:0; /* #ed-bar moved out to the top region (2026-07-27) */ display: flex; background: var(--bg-grid-head); border-bottom: 1px solid var(--accent-dim); z-index: 10; font-size: 10px; color: var(--accent-ink); /* Natural content width, matching the rows (which are now the natural track width, not viewport-stretched). NO min-width:100% — tying the header width to the pane made every panel-resize frame re-lay-out all N column headers (the "resizing is jerky" report, Phil 2026-07-24). max-content is content-driven, so a pane resize no longer touches it. */ width: max-content; } /* Row-number column, header + rows — FROZEN at the left edge so the row numbers stay visible when the pattern is scrolled sideways (Phil 2026-07-24, the "split so it's visible at all times" request). Opaque bg so scrolled-under track cells don't bleed through; sits above the cells (z within the row) but below the sticky header bar. */ /* z-index ABOVE #pat-hdr-splitter's 12 (task #11 step 7). position:sticky makes this a STACKING CONTEXT, so the fold button's own z-index is scoped inside it and could never beat the splitter from here -- measured with elementFromPoint at the button's centre, which returned pat-hdr-splitter. The cost is deliberate and small: the splitter spans left:0 to right:0 at bottom:0, so its leftmost 38px -- the gutter's width -- stops being a drag zone. That corner is the fold control's now, and because the dead zone IS this sticky element, it stays aligned with the gutter at any horizontal scroll. */ .phrow { position:sticky; left:0; z-index:12; background:var(--bg-grid-head); min-width:38px; padding:3px 6px 3px 0; /* Same divider token as the channels and the pattern cells, so the master strip is separated from channel 1 the way the channels are separated from each other (Phil, 2026-08-26: "there's no line separating master and channel 1"). */ border-right:1px solid var(--btn-press); text-align:right; flex-shrink:0; } /* Channel header column. Fixed width — must match `.pc` below to keep header labels aligned over their data cells. Previously used `flex:1` which stretched each column to fill the pattern-area width and could diverge subtly from `.pc`'s min-width on many-channel mods (e.g. TheStomper.med, 8+ tracks), breaking alignment. Phil 2026-05-22. If you change this, update `.pc` below to the same value. Width tightened to 132px (was 158) — the cell content `nn ii vv cc p1 p2` takes ~115px of monospace 11px, leaving comfortable padding. Compacter layout lets more channels fit before horizontal scroll. */ /* Track column width. --pc-w is set per block by renderPattern from the measured content: blocks with a param2 (cmdExt) column need more room than those without. Header and data cell MUST use the same var or the columns drift apart. (Phil 2026-07-23: the fixed 132px left ~30-45px of dead space per track once the vestigial volume column was removed.) */ /* 16px of bottom padding: the 11px fold bar plus the 5px splitter under it. Reserved on the CELL rather than on #pat-hdr, because the header is a flex row and padding there would not push the sticky gutter's contents up too. */ /* line-height follows the font-size axis (--font-room): a unitless one is relative to font-size, which that axis does not change, so at 115% the track names inside were trimmed by their own line-clamp box. */ .phch { flex:0 0 var(--pc-w, 115px); padding:3px 4px 16px; text-align:center; border-right:1px solid var(--btn-press); font-size:9px; letter-spacing:1px; line-height:calc(1.2 * var(--font-room, 1)); display:flex; flex-direction:column; align-items:stretch; gap:2px; overflow:hidden; min-width:0; } /* ── THE STRIP'S TWO COLUMNS (task #11, re-laid out 2026-08-25) ───────────── Phil's layout: buttons down the left, the vertical fader and meters beside them, the readout at the top of that column, pan under everything. The BODY is what grows. The name row and the pan row keep their own heights, so every pixel the strip gains goes into the meters -- which is the whole point of a vertical meter and the reason the old horizontal one was welded to the cell's bottom edge instead. NO SHOW/HIDE BUTTONS ANYWHERE. Renoise puts a toggle on each of these rows and the result is dense and busy; here the strip's HEIGHT decides what fits and the tier classes do the rest, so there is nothing to configure. */ .phch-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:row; align-items:stretch; gap:3px; } /* FULL HEIGHT, always. align-self:stretch is what makes the meter monotonic in the strip height: it starts at the top and ends at the bottom at every tier, so no row appearing beside it can move or shrink it. */ .phch-body > .phch-meter { align-self:stretch; } /* ROW at tier 1, COLUMN once there is height for it. The buttons never move to a different part of the strip — the container reflows, which is the one kind of change feedback_ui_fixed_places allows: same place, same order, different axis. Stacked, they leave the width to the right of them for the meters, which is what Phil's layout asks for. */ /* ── AS WIDE AS THE NAME ABOVE THEM, AND ALL ONE HEIGHT ──────────────────── Phil, 2026-08-26: "make the mute, solo & group buttons slightly bigger to match the width of the channel name, and make sure they are the same height also". They were content-sized and centred, so the row was a short huddle under a full-width field and the three buttons were three different widths. align-items:STRETCH is what makes them one height: the group button carries a colour dot and the other two carry text, so left to themselves they size to different content. At flex-end they were merely bottom-ALIGNED, which looks the same until one of them is a pixel taller. */ .phch-btns { flex:0 0 auto; display:flex; flex-direction:row; gap:2px; align-items:stretch; flex-wrap:nowrap; } /* The right-hand column: readout pinned to the TOP, meter taking the rest. */ /* align-items:center so the METER HUGS ITS CONTENTS instead of stretching. A vertical well stretched across the column is a big dark box with a thin meter lost in the middle of it -- the bars are a few px each and the lane 11px, so ~30px is the whole object. The readout still spans, because a centred number wants the width. */ /* ── THE LEFT COLUMN ──────────────────────────────────────────────────────── Everything textual and clickable; the meter is its sibling and gets the whole strip height beside it (Phil, 2026-08-26: "the channel name should be to the left of the meter/fader so that the meter/fader can use the full height"). Name and readout are pinned to the TOP, buttons and pan to the BOTTOM, and the slack sits between them -- so every row is measured from one edge or the other and NOTHING MOVES as the strip grows. The old layout stacked the readout above the meter, which is exactly why the meter jumped: measured, its top went 15 -> 17 -> 30px and its height DROPPED 32 -> 31 the moment the pan row appeared. */ .phch-lcol { flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:2px; } .phch-read { flex:0 0 auto; align-self:stretch; } /* ── NOTHING MOVES WHEN A ROW APPEARS ─────────────────────────────────────── Phil, 2026-08-26: "there's still too much shifting about when resizing the channel headers: when the faders appear, when the pan controls appear." Two groups, anchored to opposite edges, with the slack between them: TOP name, buttons — pinned to the top, never move ~slack~ BOTTOM readout, pan — pinned to the BOTTOM, grow UPWARD The order inside the bottom group is what makes it work. Pan arrives first (tier 78) and the readout later (93), and the readout sits ABOVE pan -- so when the readout appears the group grows upward into the slack and PAN DOES NOT MOVE. Had they been the other way round, the later arrival would have pushed the earlier one up, which is the shifting this replaces. The rule generalises: within a bottom-anchored group, whatever appears LATER must sit HIGHER. */ .phch-read { margin-top:auto; } /* Moved below the .strip-pan rule -- see there. It sets `margin:1px 0 0`, a SHORTHAND at equal specificity and later in the file, so an auto margin declared up here lost silently and the pan sat under the buttons instead of on the bottom edge: measured 32.2px off the bottom at the pan tier against 16 at the readout tier. */ /* Win MED accepts very long track names (measured: an 80-char name wrapped to 5 lines and pushed the whole header from 36px to 78px, since flex stretches every column to the tallest). Clamp to 2 lines; app.js sets a title= with the full text. `break-all` because a name can be one unbroken token. */ .phname { color:var(--text-dim); font-size:8px; letter-spacing:0; text-transform:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; word-break:break-all; max-width:100%; } /* A LITTLE LARGER ONCE THERE IS ROOM (Phil, 2026-08-25: "the channel names could become a little larger and be editable"). 8px is a tier-1 compromise -- the header is song-width, so every pixel there is paid on all 28 tracks of a 28-track module. Once the strip has been dragged open the room exists, so the name takes it and the third line clears too. The tier-1 size is UNTOUCHED, deliberately: that header was measured full to the pixel and growing the name there would push the meter off the bottom. */ /* ONE SIZE AT EVERY TIER. This used to grow 8px -> 10px when the fader tier arrived, which pushed the button row under it down by 2.4px -- a shift at exactly the threshold Phil named ("when the faders appear"). The larger size was the point of the earlier change, so it is now the ONLY size: the name has a full-width row of its own at the top and can afford it, and STRIP_NATURAL carries the extra 2px so the collapsed strip still fits. */ .phname { font-size:10px; } #pat-hdr.strip-fader .phname { -webkit-line-clamp:3; } /* The name is a rename target, so it says so on hover rather than only in the tooltip. Not a permanent field: see beginRenameTrack in js/app.js. */ /* THE TOP BLOCK DOES NOT MOVE (Phil, 2026-08-25: "when you resize the fader panel, the mute/solo etc buttons jerk around. They shouldn't get pushed up by the faders appearing"). The name was flex:1, so it absorbed every pixel of slack and the M/S row rode on top of it. Measured across a height sweep, M/S sat 13.2px from the cell top at h=40 and 52.9px at h=140 -- and it moved BACKWARDS at each tier, 29.7 -> 23.7 when the pan row appeared and again when the readout did, because a new row takes its space out of the flexible one. That reversal is the jerk: the thing you are pointing at moves the opposite way to the drag. flex:0 0 auto pins the name to its own height, so name and M/S sit at the top and stay there; the slack collects below them, and the optional rows hang off the bottom with the meter (see margin-top:auto). */ /* ── THE NAME IS A FIELD (Phil, 2026-08-26: "can we make the channel names match the usual styling for text fields and just make it a single click to edit?") ───────────────────────────────────────────────────────────────── The BOX belongs to this div, not to the input, so renaming changes nothing about the layout: the same bordered box is there before, during and after, and the input simply fills it. That is what the old markup was reaching for with "a mode change, not a layout change" -- but the input carried its OWN 1px border and the label had none, so opening a rename grew the row by 2px every time. One box, two contents. Tokens are the app's field family (--bg-inset ground, --border-control at rest, --accent-ink on focus), the same three .sd-dialog input[type=text] uses, so a channel name reads as the same kind of object as every other text field in the app. */ .phch-name { /* 0 1 auto -- IT MAY NOT GROW, BUT IT MUST BE ABLE TO YIELD. flex:0 0 auto was half a rule. The no-GROW half is load-bearing and stays: as flex:1 the name ate every pixel of slack and the button row rode up and down on it, which is the jerk the two-column layout was built to end. But 0 0 also means it can never SHRINK, and a long track name wraps to two or three lines -- so the name simply pushed the bottom group off the bottom of the cell. Measured with a 33-character name: 20.1px of pan and readout hanging past the fold bar at every tier below 110. Shrinking clips lines off a name that was already ellipsised; not shrinking hides a CONTROL. .phname is a -webkit-box with overflow:hidden, so the clipping is the same clamp it already does, one line lower. */ flex:0 1 auto; min-height:0; overflow:hidden; /* CENTRED, so the squeeze is shared. The name's line box is taller than this box when the strip is collapsed, and top-aligned it put all of the overflow at the BOTTOM -- where descenders live -- while 2-3px sat unused above the letters. Measured collapsed, "Gypsy lead": 2.8px of its tails cut at 100% with the shipped font, 1.8px at 135% with a proportional local font, and 2-3px spare above in both. */ display:flex; align-items:center; cursor:text; box-sizing:border-box; min-width:0; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); padding:0 2px; } .phch-name:hover { border-color:var(--border-hi); } /* focus-WITHIN, because the focused thing is the input inside it. */ .phch-name:focus-within { border-color:var(--accent-ink); } /* THE INPUT TAKES THE LABEL'S OWN BOX, which is what makes this a mode change rather than a layout change — nothing around it moves when the field appears. Sized in em so it follows the tier that just enlarged the name. */ /* THE INPUT IS BARE. Its box is .phch-name's above -- background, border, radius and focus colour all live there -- so the field does not gain a second border inside the first when the rename opens. */ .phch-rename { width:100%; box-sizing:border-box; margin:0; padding:0; font-family:inherit; font-size:10px; line-height:1.2; text-align:center; text-transform:none; letter-spacing:0; appearance:none; -webkit-appearance:none; background:transparent; color:var(--text); border:none; outline:none; min-width:0; } /* ── A STRIP WITH NO COLUMN UNDER IT (round 5) ───────────────────────────── Phil: "they show no pattern data (yet), so they can just be thinner strips. The master channel should also be drawn like this, at the farthest right." It is still a `.phch` — the docked meter host finds it with the selectors it already has, and `data-src` says which bus it is — so all this changes is the width and what is inside. No name field, no mute/solo, no pan: a bus has all of those in the Mixer window, and at 26px none of them would be legible. Meter, fader, readout and a tag. THE MASTER IS ONE OF THESE NOW rather than a pinned gutter. It was position:absolute inside .phrow, which is what made it the odd one out; here it is simply the last strip, and .phrow goes back to being the row numbers. */ .phch-thin { flex:0 0 var(--d-phbus-w); min-width:0; padding:3px 2px 16px; display:flex; flex-direction:column; align-items:stretch; gap:2px; } .phch-thin .phch-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:2px; } /* The tag sits where a channel's pan does, so the tops of every fader and every readout in the row line up — the same argument that moved MST to the bottom of the master strip (Phil, 2026-08-26). */ .phch-thin .phch-thin-lbl { flex:0 0 auto; font-size:8px; letter-spacing:1px; color:var(--text-dim); text-align:center; overflow:hidden; white-space:nowrap; } .phch-thin.phch-return .phch-thin-lbl { color:var(--accent-ink); } /* THE FADER IS THE METER'S MIDDLE LANE, exactly as it is on a channel strip and on the master — one gesture, three strips, and no second control to align. */ .phbus-fader { -webkit-appearance:none; appearance:none; background:transparent; writing-mode:vertical-lr; direction:rtl; flex:0 0 auto; width:var(--vu-lane, 9px); min-height:0; margin:0; align-self:stretch; cursor:ns-resize; } /* THE MASTER, ONCE IT IS IN THE ROW. Its children keep their .phmst-* classes (the meter host and the fader wiring look for them) — only the box changes from an absolutely-positioned fill of .phrow to a flow item like its neighbours. */ #pat-hdr > .phmst { position:static; flex:0 0 var(--d-phbus-w); min-width:0; padding:3px 2px 16px; margin:0; /* THE SAME HEIGHT AS EVERY OTHER STRIP. --strip-h is what the splitter drags and what .phch reads; the master used to fill .phrow instead, which is why it needs saying here rather than inheriting it. */ height:var(--strip-h, auto); align-self:flex-start; } /* …and the gutter it used to live in is the row numbers again. */ .phch:last-child { border-right:none; } /* ── THE MASTER STRIP (task #11 step 4) ───────────────────────────────────── In the gutter, absolutely positioned so the header's flex row is untouched and its columns still line up with the data cells. Hidden until the faders appear: at tier 1 the transport VU already is the master meter, always visible, and a second one would be clutter for no new information. VERTICAL, because the gutter is 38px wide and tens of pixels tall — the opposite proportions to a docked channel strip, which is why those are horizontal. It is also a preview of the vertical mode the channel strips get at large heights (step 5). */ /* ── THE FOLD BAR (task #11) ──────────────────────────────────────────────── Phil, 2026-08-25: "I want to change the expand/collapse arrow to a full bar like the left and right panels." It borrows .panel-collapse's tokens exactly, so the three folds in the app are visibly one control in three orientations. It sits ABOVE the splitter rather than at the very edge: the bottom 5px stay the drag zone, because grabbing the boundary to resize is the more frequent gesture and it belongs on the boundary. Clicking the bar folds; dragging the last few pixels resizes. The header can be far wider than the viewport, so a centred glyph would scroll away. The bar spans the header (it has to, or it would not be a full bar) and the GLYPH is sticky inside it. */ #pat-hdr-fold { position:absolute; left:0; right:0; bottom:5px; height:11px; z-index:13; padding:0; margin:0; cursor:pointer; display:flex; align-items:center; background:var(--bg-header); color:var(--header-ink); border:none; border-top:1px solid var(--seam); border-bottom:1px solid var(--seam); /* 10px, .panel-collapse's size — the caret is that control's glyph and was being drawn three sizes smaller than it. */ font-family:inherit; font-size:10px; line-height:1; } /* ── THE CARET (Phil, 2026-08-26: "change the style of the caret on the collapse/expand bar to match the side panels, and also centre it on the bar (don't make it scroll with the rest of the pattern view)") ─────────────── IT WAS NOT STICKY AT ALL. The rule here was `#pat-hdr-fold > span`, and syncMixerFoldBtn set `btn.textContent`, which DESTROYS the span the markup ships and leaves a bare text node -- so from the first sync onward this selector matched nothing and the glyph scrolled away with the header, which is exactly what was reported. It writes into the caret element now. TWO ELEMENTS, because they do two different jobs and one cannot do both: .phfold-rail sticky, spans the VISIBLE pane width, centres its content .phfold-caret inline-block, carries the rotation The rail has to be a block as wide as the viewport for `text-align:center` to centre anything, and a transform on a full-width block would rotate the whole bar. --pat-view-w is the pane's clientWidth, published by the ResizeObserver in js/app.js; the 100% fallback keeps it centred on the header until the first measurement lands. */ #pat-hdr-fold > .phfold-rail { position:sticky; left:0; display:block; width:var(--pat-view-w, 100%); text-align:center; padding:0; } /* ── DRAWN, NOT TYPED ────────────────────────────────────────────────────── This was U+2039, the side rails' own glyph, rotated a quarter turn -- on the reasoning that reusing the glyph is the surest way to match its weight. It is, and it still looked wrong: Phil, 2026-08-26, "it doesn't look like an arrow. It's just a curve." He is right, and the reason is the typeface. Share Tech Mono draws U+2039 as a ROUNDED chevron. Sideways the eye reads it as an arrow because it sits on a vertical rail beside the thing it folds and the context supplies the meaning; turned on its end, with nothing beside it, there is no context left and what is on screen is a curve. Rendered every candidate at 34px and looked at them: the arrowhead codepoints (U+2304, U+02C5, U+2228) come out of the fallback font as lopsided ticks -- the left stroke shorter than the right -- so they read as check marks. The solid triangle U+25BC reads correctly but is much heavier than anything else in the chrome. A pair of borders on a rotated box is the only one that is a clean symmetric arrowhead, and it has the further virtue of being drawn at whatever weight is asked for rather than whatever weight a font happens to have. currentColor, so it inherits the bar's --header-ink and its --accent-hi hover without naming either. */ .phfold-caret { display:inline-block; width:4px; height:4px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; /* The ink sits on the box's bottom-right corner, so a rotated arrowhead hangs off the box's centre; the translate puts it back on the bar's midline and flips sign with the rotation. */ transform:translateY(1px) rotate(225deg); /* points UP — the EXPANDED state */ } /* ── THE DIRECTION THE EDGE WILL TRAVEL ──────────────────────────────────── The side rails' actual convention, read off wireCollapse rather than assumed: the LEFT panel shows a left arrow while OPEN (clicking moves its edge left, closing it) and a right arrow while COLLAPSED (clicking moves it right, back out). The glyph points where the boundary goes. THIS BAR HAD IT BACKWARDS — expanded showed DOWN and collapsed UP, the opposite of both side rails. Phil, 2026-08-26: "the arrow direction on the channel header collapse/expand bar is the opposite to the side bars." It predates the drawn caret (the original was `open ? '▼' : '▲'`) and survived the glyph change because that change preserved the behaviour faithfully — including a comment claiming it followed the side rails, which it did not. The strip grows DOWNWARD from a bar at the header's bottom edge, so: expanded -> clicking collapses -> the edge travels UP -> point UP collapsed -> clicking expands -> the edge travels DOWN -> point DOWN Driven off aria-expanded so the glyph and the accessible state cannot disagree — one source for which way this control goes. */ #pat-hdr-fold[aria-expanded="false"] .phfold-caret { transform:translateY(-1px) rotate(45deg); /* points DOWN — the COLLAPSED state */ } #pat-hdr-fold:hover { background:var(--accent-ground-soft); color:var(--accent-hi); } /* AT EVERY TIER, like the channel strips beside it (Phil, 2026-08-26: "the master meters should be visible at the collapsed size to match the other channels"). It used to be gated on .strip-fader, on the reasoning that the transport VU is already a master meter -- but the transport VU is across the window, and the thing this sits in a row with is four channel meters that ARE drawn at that height. A gutter that goes blank while its row keeps metering reads as a bug, not as economy. The fader inside it stays gated on the tier exactly as the channel faders do (see .phmst-fader below), so what appears at tier 1 is a METER, not a control too small to use. */ .phmst { display:flex; flex-direction:column; align-items:center; gap:2px; /* top:2px now that the "ROW" label is gone (Phil, 2026-08-26). That word was costing the master strip the top 16px of the only column that survives horizontal scroll, which is why it would not fit at the smallest panel height. bottom still clears the fold bar (11px) and the splitter (5px). */ /* top:3px, not 2px, so the master's well starts on the SAME line as the channel meters: .phch's padding-top is 3px and the meter is the first thing under it. Measured at 2px the master sat one pixel proud of the row. */ position:absolute; left:0; right:4px; top:3px; bottom:16px; text-align:center; pointer-events:auto; } /* LAST, in the row the channels give to pan (Phil, 2026-08-26: "can we move the 'MST' label to the bottom, taking the space where the pan controls are on other channels? That way the tops of faders and the peak readout all line up"). It was FIRST, so it pushed the master's well down by its own height plus the gap -- measured 10px -- and the master fader started 10px below every channel fader it is read against. `order` rather than moving it in the markup: the label is what a screen reader meets first when it enters the strip, and that is the right reading order for a thing whose name is MST. Source order stays; only the painting moves. */ .phmst-lbl { font-size:8px; letter-spacing:1px; color:var(--text-dim); flex:0 0 auto; order:9; } /* THE MASTER'S FADER IS ITS METER'S MIDDLE LANE TOO (Phil, 2026-08-25: "And I also wanted it on the master fader"). Same idea rotated: the master meter is VERTICAL, so its two bars are side by side and the lane is a vertical strip between them. No gap and no second control -- .phmst-body is now just the well's box. */ .phmst-body { flex:1 1 auto; display:flex; align-items:stretch; justify-content:center; min-height:0; width:100%; } /* writing-mode is the modern vertical range; the WebKit-only appearance keyword was removed from the platform, so this is the one that survives. */ /* writing-mode is the modern vertical range; the WebKit-only appearance keyword was removed from the platform, so this is the one that survives. direction:rtl makes it run bottom-to-top, which is what a fader means. */ .phmst-fader { --vu-knob: calc(var(--vu-lane, 1px) + var(--vu-grab)); writing-mode:vertical-lr; direction:rtl; /* Same grab margin as the channel faders, rotated: a 5px-wide hit target is not one, so the input's box is lane + grab and the bars overlap the surplus. position/z-index for the same reason too — the knob belongs over the meter, and the second bar is painted after the input. */ flex:0 0 calc(var(--vu-lane, 1px) + var(--vu-grab)); width:calc(var(--vu-lane, 1px) + var(--vu-grab)); position:relative; z-index:2; margin:0; padding:0; /* Fades with its tier, like the channel faders — see .phch-fader. */ visibility:hidden; pointer-events:none; opacity:0; transition:opacity .14s ease, visibility .14s; accent-color:var(--accent-fill); -webkit-appearance:none; appearance:none; background:transparent; } #pat-hdr.strip-fader .phmst-fader { visibility:visible; pointer-events:auto; cursor:pointer; opacity:1; } /* No track of its own: the well IS the track, exactly as on a channel strip. */ /* THE CHANNELS' RAIL, EXACTLY (Phil, 2026-08-26: "the master volume fader doesn't have the same line width in between the two meters ... the same as the other channels I mean"). It was a bare 1px line of --border-control against the channels' 3px groove inside a 1px border -- a different object, in a row with four of the other kind. Same declarations as .phch-fader's rail below. */ .phmst-fader::-webkit-slider-runnable-track { width:3px; background:var(--bg-rail); border:1px solid var(--border-control); border-radius:var(--radius-control); } .phmst-fader::-moz-range-track { width:3px; background:var(--bg-rail); border:1px solid var(--border-control); border-radius:var(--radius-control); } /* And the knob overlaps both bars by the same 2px. Rotated, so the width is the cross-axis and the height is the travel axis. */ .phmst-fader::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:var(--vu-knob); height:7px; margin-left:calc((var(--vu-knob) - 1px) / -2); background:var(--accent-ink); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:pointer; box-sizing:border-box; } .phmst-fader::-moz-range-thumb { width:var(--vu-knob); height:7px; box-sizing:border-box; background:var(--accent-ink); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:pointer; } /* Two 3px columns, L then R, matching the strips' L-over-R order read top-to-bottom as left-to-right. Revealed from the BOTTOM, which is what a vertical meter means — inset() hides from the top. */ /* Bar, lane, bar -- read left to right, the same order the channel strips read top to bottom. The bars take what the lane leaves, so one variable sizes all three here as well. */ /* THE SAME WELL THE CHANNELS HAVE (Phil, 2026-08-26: "we don't draw a box around them like we do for the other channels"). .phch-meter has carried `border:1px solid var(--vu-track-edge)` since the strips went vertical and this did not, so the master was the one meter in the row without an edge -- it read as a stripe painted on the gutter rather than as a meter in a well. box-sizing:border-box so the border comes out of the width it already had. */ /* SAME WIDTH AS A CHANNEL WELL (Phil, 2026-08-26: "the master meters should be the same width as the other channels"). It was `--vu-lane + 8`, a formula of its own that came out at 13px against the channels' 21 -- so the master read as a thinner, lesser meter in a row of four identical ones. flex:0 0 auto and let it size to its contents, exactly as .phch-meter does: two bars, the fader box between them, less the grab each bar overlaps. Making the CONSTRUCTION the same is what keeps them the same, rather than two formulas that have to be kept in step by hand. */ .phmst-meter { flex:0 0 auto; display:flex; align-items:stretch; justify-content:center; background:var(--vu-track); overflow:hidden; position:relative; box-sizing:border-box; border:1px solid var(--vu-track-edge); } .phmst-meter > i:first-child { margin-right:calc(var(--vu-grab, 0px) / -2); } .phmst-meter > i:last-child { margin-left:calc(var(--vu-grab, 0px) / -2); } .phmst-meter > i { /* 7px, the channel bars' width -- see .phmst-meter above. */ display:block; flex:0 0 7px; height:100%; min-width:0; clip-path:inset(100% 0 0 0); background:linear-gradient(0deg,var(--vu-floor) 0%,var(--vu-safe) 70%,var(--vu-warn) 88%,var(--vu-clip) 100%); } /* CENTRED, unlike the channel readouts (Phil: "just keep it centred for the master channel"). The reason the channel readout is flush right is that it shares a column with a full-width pan control and had to stop reading as part of it. The master strip has no pan row -- MST sits there instead -- and the gutter is 38px wide with the well centred in it, so centred is what lines the number up with the thing it measures. */ /* The same box as the channel readouts — it is the same control, and it resets the same latch. line-height 7 inside a 9px row for the same reason theirs is 9 inside 11: the height is stated by the tier rule and the border comes out of it, so nothing moves when the box appears. */ .phmst-read { flex:0 0 auto; font-size:8px; line-height:7px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; align-self:center; text-align:center; box-sizing:border-box; padding:0 2px; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); } /* ── PER-TRACK LEVEL METER (task #11, the Mixer) ─────────────────────────── Phil, 2026-08-25: "the docked strip rail could be the channel headers themselves. We should be able to squeeze small level meters into the current view?" — so the header IS the mixer strip rather than a second rail above it, and the meter has to cost NO HEIGHT, because the cell had none to give. Measured before building: a 98px-wide cell is 38px tall and its contents (3px pad + 17px name + 2px gap + 13px M/S + 3px pad) come to exactly 38. So it is ABSOLUTELY POSITIONED on the bottom edge — the same trick, and for the same reason, as .vu-led in the transport meters: out of flow, zero layout, and clipped by the cell's existing overflow:hidden. Full cell width rather than the ~27px spare in the M/S row, because width IS the resolution here and --pc-w varies per block (98px measured, 115px default, more with a cmdExt column) — an inline meter would be squeezed to nothing on a narrow one. The FILL is scaled, not resized: transform:scaleX stays on the compositor, where a width change would relayout every header cell 60 times a second. */ /* EXACT HEIGHT, NOT A MINIMUM. As a min-height the strip snapped: crossing a tier adds a row, the CONTENT then exceeded the minimum, and the cell jumped ahead of the pointer before tracking smoothly again. Measured at both thresholds — dragging 64->68 moved the strip 64->74.5, and 76->80 moved it 76.5->89.4. Phil: "sometimes it will pull out gradually, other times it snaps and then moves smoothly." Worse, it fed back: the meter grows with the strip and sits in the flow via padding-bottom, so a taller strip made taller content which made a taller strip. An exact height breaks the loop — the cell is what was dragged, and overflow:hidden (already set) handles anything that does not fit. */ /* ── THE FOLD ANIMATES (Phil, 2026-08-26: "the channel header split doesn't animate smoothly when you collapse/expand like the side panels do") ─────── Exactly what #left-panel/#right-panel do one rule below, on the axis this control folds: they transition `width .18s ease`, this transitions height. --strip-h is a custom property and cannot be transitioned without registering it, but it does not need to be -- the property that actually changes is this `height`, and animating that carries the gutter, the master strip (absolutely positioned against these cells' box) and the pattern rows below with it. NOT DURING A DRAG -- see body.lay-dragging further down. A height transition on a splitter drag makes the header lag the pointer by the whole duration, which reads as broken rather than smooth. The strip splitter goes through _wireSplitter, so it already sets that class. */ .phch { position:relative; height:var(--strip-h, auto); transition:height .18s ease; } /* ── THE TRACK FADER (task #11, tier 2) ───────────────────────────────────── Present in the markup at every tier and revealed by a class on #pat-hdr — never inserted and removed. Things have a fixed place: a control that appears somewhere different depending on height is exactly what that rule prevents. HORIZONTAL, against mixer convention, because the geometry here is not a mixer's. A docked strip is ~100px wide and tens of pixels tall, so a vertical fader would get the short axis and the wide axis would go to waste. The undocked window (compact, tall strips) is where vertical earns its keep, and that is a different host with its own layout. accent-color + is the same fader idiom as the WAM mix row (#wam-gui-mix-row .wam-gui-fader) — one slider in the app, and keyboard and screen-reader support for free rather than reimplemented. */ /* ── PANNING (task #11) ───────────────────────────────────────────────────── Its own tier ABOVE the readout: a second control crammed beside the fader is how a strip stops being readable, which is the same reason the readout got a row of its own. Hidden until #pat-hdr says otherwise, like every other tier — present in the markup at all heights so it never appears in a different place. */ /* ── APPEARING IS AN ANIMATION, NOT A CUT ────────────────────────────────── Phil, 2026-08-26: "can we also make them fade in smoothly like we do for elements in the instrument list panel". Same idiom as .indet / .inst2 there: an opacity transition on the element itself, driven by a class on an ancestor. `display` IS IN THE TRANSITION LIST, with transition-behavior:allow-discrete. These rows are display:none until their tier arrives, and without that keyword the browser applies the display flip instantly and the opacity transition never gets a chance to run -- the row would still appear as a cut, just a cut into an already-opaque element. With it, showing flips display at the START (so the row takes its space immediately and the layout is exactly what it was before this change) and fades the ink in; hiding fades out and flips display at the END. @starting-style supplies the opacity to animate FROM. A transition needs an old value, and an element that was display:none has no old value to offer -- without this block the row would jump straight to opacity 1. Both are supported in this app's targets (verified in-page: CSS.supports 'transition-behavior: allow-discrete' and CSSStartingStyleRule both true). Where they are not, the row simply appears the way it does today. */ /* ── APPEARING AND DISAPPEARING BOTH ANIMATE ─────────────────────────────── Phil, 2026-08-26: "make the volume faders and peak readout fade in and out like the panning controls. I'm not sure the fade out is there yet." It was not, deliberately, and the reason it was left out is worth keeping because it says why THIS version is built the way it is. The first attempt faded opacity while `display` rode the transition (allow-discrete) to keep the row rendered -- so on the way out the row went on taking its full space for 140ms after its tier was gone. Measured: dragging back down past the pan tier left an 11px control and its 2px gap in a column with no room for them, and the track name above squeezed by up to 13px and sprang back. So I shipped the exit as a cut. That was solving the wrong half. The problem is not that the row is still THERE, it is that its space vanishes DISCONTINUOUSLY -- and the fix is to animate the space too, which is exactly what the instrument list Phil pointed at does: `.indet` transitions `height` AND `opacity` together (0 -> 15px), and nothing jumps because nothing is ever asked to move instantly. So there is no `display` here at all. The rows are always in the flow; their HEIGHT is what the tier changes, from 0 to the row's own, alongside opacity. The name above them takes up the slack continuously instead of being squeezed and released. `visibility` is in the list for the part opacity cannot do: a 0-height input at opacity 0 is still focusable and still a tab stop. visibility transitions with special timing that suits this exactly -- it flips to `visible` at the START of a transition INTO view and holds `visible` until the END of one out of it -- so the control is reachable precisely while it can be seen, with no discrete-transition keyword needed. */ .phch-pan, .phch-read, .phmst-read { /* NO margin-top HERE, AND NONE IN THE TRANSITION. It had both, and that broke the bottom anchoring: the whole bottom group hangs off `.phch-read { margin-top:auto }`, and a `margin-top:0` in this rule sits LATER in the file at equal specificity, so it silently won and the group floated up under the buttons. Phil, 2026-08-26: "the panning controls are no longer aligned to the bottom like they used to be." The 1px gap above the pan control is stated in its tier rule and does not animate. One pixel appearing in one frame is not worth a property that fights the anchor for the same declaration. */ display:block; opacity:0; visibility:hidden; height:0; overflow:hidden; transition:opacity .14s ease, height .18s ease, visibility .18s; } #pat-hdr.strip-pan .phch-pan, #pat-hdr.strip-read .phch-read, #pat-hdr.strip-read .phmst-read { opacity:1; visibility:visible; } /* ── AND THE MASTER READOUT'S HEIGHT, WHICH IS ITS OWN RULE ──────────────── The base rule above collapses all three optional rows to height:0 -- that is what lets them animate -- and each needs a height to come back to. The channel rows already had one, in tier rules that existed before the fade (11px each). The master readout never did: it was display:none below its tier and its NATURAL height the rest of the time, so collapsing it left nothing to return to and it vanished outright. Phil, 2026-08-26: "where has the peak readout on the master channel gone?" 9px is its own line-height, one line of an 8px face. A RULE OF ITS OWN, not a fourth line on the selector list above: a comment inside a selector list is still inside the list, so writing it there gave the height to the two channel rows as well and quietly shortened them from 11px. Different value, different rule. */ #pat-hdr.strip-read .phmst-read { height:9px; } /* THE BOTTOM GROUP IS BOTTOM-ANCHORED. `margin-top:auto` in a flex column eats the free space, so pan/readout/meter stack upward from the cell's bottom edge while the name and M/S stay put at the top. Growth goes into the gap between the two groups, which is the only part of the strip that has nothing in it. On the FIRST VISIBLE optional row only: two auto margins would split the slack between them and push the rows apart. The readout takes it when there is no pan row -- which the tier heights make unreachable today (pan arrives 15px below the readout), but the rule states the intent rather than relying on that ordering holding. */ /* The bottom group is anchored by .phch-btns above; pan simply follows it, so the two stay together at the bottom edge instead of drifting apart. */ #pat-hdr.strip-pan .phch-pan { /* LAST IN THE STRIP, under everything, spanning its full width — the one control here that is not about level, and the width buys the travel a -16..+16 range wants. flex:0 0 auto — A CONTROL MUST NOT BE COMPRESSIBLE, measured once already on the volume fader, which flex squashed to 6.5px at its tier threshold. */ flex:0 0 auto; order:9; /* margin-top, not the `margin` shorthand: the shorthand would also reset the bottom-anchor's auto margin on every tier change. */ display:block; width:100%; height:11px; margin-top:1px; padding:0; min-width:0; cursor:pointer; } /* ── THE APPEARANCE RESET BELONGS TO THE CONTROL, NOT TO ITS TIER ────────── `-webkit-appearance:none` and the transparent ground were declared in the tier rule above. That was invisible while the row was display:none below its tier -- but the row FADES now, so for 140ms on the way out it was a visible, unstyled, platform-default range input. Phil, 2026-08-26: "when they fade out their styling changes to the chrome default." What a control looks like is not a function of how tall the strip is. */ .phch-pan { -webkit-appearance:none; appearance:none; background:transparent; } /* ── THE READOUT CARRIES THE ANCHOR AT EVERY TIER NOW ────────────────────── This used to hand the auto margin to PAN whenever the readout was not visible, because the readout was display:none below its tier and an absent element cannot anchor anything. Since the rows fade, they are never absent: the readout is in the flow at height 0, and `margin-top:auto` works on a zero-height item exactly as well as on a tall one. So the readout holds the anchor at all times and this rule became actively harmful -- two auto margins split the slack between them and push the pair apart, which is the failure its own comment warned about. */ /* A CENTRE-DETENT RAIL. The track carries a tick at the middle, because dead centre is the one position on a pan control anybody looks for and a plain groove gives no way to see it. Drawn on the TRACK rather than as an element: the rail is a pseudo-element already and 28 strips do not need another node. */ .phch-pan::-webkit-slider-runnable-track { height:3px; border-radius:var(--radius-control); background:linear-gradient(90deg, var(--bg-rail) 0, var(--bg-rail) calc(50% - 1px), var(--border-control) calc(50% - 1px), var(--border-control) calc(50% + 1px), var(--bg-rail) calc(50% + 1px), var(--bg-rail) 100%); border:1px solid var(--border-control); } .phch-pan::-moz-range-track { height:3px; border-radius:var(--radius-control); background:linear-gradient(90deg, var(--bg-rail) 0, var(--bg-rail) calc(50% - 1px), var(--border-control) calc(50% - 1px), var(--border-control) calc(50% + 1px), var(--bg-rail) calc(50% + 1px), var(--bg-rail) 100%); border:1px solid var(--border-control); } /* NARROWER AND TALLER than the volume knob, and in a different ink. Two knobs on one strip have to be told apart at a glance, and shape carries that as well as colour does — a pan knob is a pointer, a volume knob is a grip. */ .phch-pan::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:5px; height:11px; margin-top:-5px; box-sizing:border-box; background:var(--pan-ink); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:pointer; } .phch-pan::-moz-range-thumb { width:5px; height:11px; box-sizing:border-box; background:var(--pan-ink); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:pointer; } /* Off the mixer path the engine never reads trackPan, so the control is inert and says so — greyed rather than gone, because absent would read as "this app cannot pan" instead of "not on this module". */ .phch-pan:disabled { cursor:not-allowed; opacity:0.3; } /* ── THE PER-TRACK READOUT (task #11 step 3) ──────────────────────────────── Phil, 2026-08-25: "Could we show the peak/current level for each channel independently?" — on the SHARED ui.vuReadout setting, so a strip and the master cannot disagree about whether they are showing peak or current. Its own tier, above the fader's: the row is genuinely optional (ui.vuReadout 'off' removes it) and a number crammed in beside a control it does not belong to is how a strip stops being readable. Tabular figures for the same reason the master's readout has them — a value that shifts sideways as it changes is harder to read than no value. */ /* THE HEIGHT THE FADE ANIMATES TO. It was already stated here; what changed is that the base rule is now 0 rather than display:none, so this is one end of a transition instead of a fixed size. */ /* ── WHAT IT LOOKS LIKE IS NOT A FUNCTION OF THE STRIP'S HEIGHT ──────────── All of this used to live in the .strip-read tier rule, which was harmless while the row was display:none below its tier -- but the row FADES now, so on the way out it lost every one of these declarations and spent 140ms visibly reverting. text-align was the one that showed: it fell back to the `center` inherited from .phch and the number slid across the strip as it faded. Phil, 2026-08-26: "when the peak readout fades, it moves to the centre." Only the SIZE belongs to the tier, because the size is what the fade animates. RIGHT-ALIGNED, IN THE COLUMN TO THE LEFT OF THE FADERS. Phil, correcting the first reading of this: "I meant the number should be aligned right, but to the left of the faders." Two facts, and they are not the same one. WHERE it sits is the left column, which is what separates it from the meter; HOW it sits is flush right, so the digits end against the fader they describe and a value that gains a character grows away from it rather than drifting across the strip. Centred it read as a pair with the centred pan control below. */ .phch-read { width:100%; text-align:right; font-size:9px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; /* ── BOXED, SO IT LOOKS LIKE SOMETHING YOU CAN CLICK ────────────────────── Phil, 2026-08-26: "perhaps the readout should be boxed so it's more obvious it can be clicked?" It has cleared the peak and the clip latch since the last change, and nothing said so — a bare number reads as output, not as a control. Same field family as the channel name (--bg-inset ground, --border-control at rest), so the two clickable things in the strip look like the same kind of object. box-sizing:border-box and line-height 9, NOT 11. The row's height is stated as 11px by the tier rule and that number is load-bearing: it is one end of the fade's height transition and it is what the tier thresholds were measured against. Taking the border out of the 11 rather than adding to it keeps every one of those measurements true — the box appears and NOTHING moves. */ box-sizing:border-box; line-height:9px; padding:0 2px; background:var(--bg-inset); border:1px solid var(--border-control); border-radius:var(--radius-control); } .phch-read:hover, .phmst-read:hover { border-color:var(--border-hi); } /* ── RED WHEN THIS TRACK HAS CLIPPED ────────────────────────────────────── Phil: "also make it red when it has clipped". The lamp says it at the meter; the readout says it where the NUMBER is, which is where you look to find out how far over it went. --vu-clip is the same token the lamp and #vu's LED use, so all three say it in one colour. The border goes with it: at 9px the digits alone are a small target for a colour change, and the box is the part of this that carries at a glance. */ .phch.clipped .phch-read, .phmst.clipped .phmst-read { color:var(--vu-clip); border-color:var(--vu-clip); } #pat-hdr.strip-read .phch-read { /* Not compressible, so the meter beside it takes every remaining pixel. */ flex:0 0 auto; height:11px; } /* THE FADER IS THE METER WELL'S MIDDLE LANE (Phil, 2026-08-25: "could we also try drawing the volume fader in the middle of the channel meter? It would use the space more efficiently"). It is the SAME element at both tiers, and at tier 1 it is the 1px divider between the two bars — hidden, unfocusable, and exactly one pixel tall. That is why --vu-lane exists rather than a margin on the first bar: one variable moves the lane from a hairline to a control, and the bars' calc follows it without knowing which tier it is. The well is overflow:hidden, so the thumb has to FIT the lane rather than overhang it. It does not need to overhang: ::before draws the ceiling mark across both bars, which is the cross-lane reading an overhanging thumb would have been for. flex:0 0 — A CONTROL MUST NOT BE COMPRESSIBLE. With the strip sized by an exact height, flex was shrinking the old standalone fader to fit: measured 6.5px tall at the tier threshold, which clipped the thumb. */ /* --vu-lane is now THE VISIBLE RAIL, 5px (a 3px groove inside its border), and the bars butt straight up against it — "with the meters flush against it". --vu-grab is the invisible margin either side that keeps the control GRABBABLE: a 5px hit target is not one, so the input's box is lane + grab and the bars are pulled back over that surplus with a negative margin. The input is transparent outside its rail, so what you see is 5px of groove between two flush bars, and what you can grab is 11px. */ .phch-fader { /* VERTICAL. writing-mode is the modern vertical range (the WebKit-only appearance keyword was removed from the platform); direction:rtl makes it run bottom-to-top, which is what a fader means. The lane and grab are the same tokens as before, applied across the WIDTH now. */ writing-mode:vertical-lr; direction:rtl; --vu-knob: calc(var(--vu-lane, 1px) + var(--vu-grab)); flex:0 0 calc(var(--vu-lane, 1px) + var(--vu-grab)); width:calc(var(--vu-lane, 1px) + var(--vu-grab)); /* NOT height:100%. In a row flex container the default align-items:stretch already gives this its height, and `100%` against an indefinite parent resolves to the input's own INTRINSIC height instead -- which for a vertical range is enormous (measured 620px, the height of the viewport). That is what made a collapsed strip 654px tall. Belt and braces with the definite height applyStripHeight now writes: either alone fixes the symptom, and the pair stops it coming back through a different auto-height ancestor. */ display:block; height:auto; min-height:0; margin:0; padding:0; /* FADES WITH ITS TIER (Phil, 2026-08-26: "make the volume faders ... fade in and out like the panning controls"). No height to animate here -- the lane is a constant width at every tier, which is what stops the meter moving -- so this is opacity alone, with visibility carrying the focusability the way it does for the rows above. */ visibility:hidden; pointer-events:none; opacity:0; transition:opacity .14s ease, visibility .14s; accent-color:var(--accent-fill); -webkit-appearance:none; appearance:none; background:transparent; /* THE KNOB GOES OVER THE METERS, NOT UNDER (Phil: "they overlap the fader knob instead of the other way round"). The second bar is painted after the input in DOM order, so without a stacking position it covered the knob. */ position:relative; z-index:2; } /* At tier 1 the fader IS the 1px divider between the bars: no grab margin, no hit area, nothing to see. The grab only exists once it is a control. */ #pat-hdr.strip-fader .phch-fader { visibility:visible; pointer-events:auto; cursor:pointer; opacity:1; } /* THE SAME RAIL THE PAN CONTROL USES (Phil, 2026-08-25: "I wanted the middle line for the volume fader to be the same style as the one the pan controls use, with the meters flush against it"). A 3px groove inside a 1px border, so the two controls on a strip read as the same kind of object. WITHOUT the pan rail's centre tick, and that is the one deliberate difference: the tick marks a DETENT, and dead centre means something on a pan control and nothing on a volume fader — a mark at 32 would invent a landmark that is not there. Same treatment, minus the part that carries pan-specific meaning. */ .phch-fader::-webkit-slider-runnable-track { width:3px; background:var(--bg-rail); border:1px solid var(--border-control); border-radius:var(--radius-control); } .phch-fader::-moz-range-track { width:3px; background:var(--bg-rail); border:1px solid var(--border-control); border-radius:var(--radius-control); } /* 12px of thumb inside 16px of box leaves 2px of clearance top and bottom, so nothing is cut off at any zoom the appearance system offers. THE KNOB IS AN INK OBJECT, NOT A FILL ONE, and getting that backwards is invisible in most themes: the base sets `--accent-fill: var(--accent-ink)`, so the two are the SAME colour and a knob drawn in one and outlined in the other looks fine. Four themes separate them, and there the pair is a SURFACE and the FOREGROUND that sits on it: magique fill #3B67A2 (blue) ink #FFA997 (peach) professional fill #FF8888 (pink) ink #0000AA (blue) nonplusultra fill #553311 (dark brown) ink #FFDD88 (light gold) A small solid control is a foreground object, so it takes the INK. Reported by Phil, 2026-08-25: in Magique the knob came out "blue with a pink outline", which is the surface colour filled and the foreground colour used as a rim — exactly inside out. The outline is --border-control, the same token every other control in the app outlines with, rather than a second accent. */ /* THE KNOB OVERLAPS THE BARS (Phil, 2026-08-25: "I actually wanted the fader knob to overlap the meters slightly"). --vu-knob is the lane plus 2px at each end, so the knob reaches into both bars by a constant 2px however tall they are: at tier 2 that is half of a 4px bar, and at a dragged-out 38px well it is a quarter of a 13px one. Tying it to the LANE rather than the well keeps the overlap the same at every height, which is what "slightly" has to mean. NO overflow CHANGE IS NEEDED, and that was worth checking rather than assuming: the well is overflow:hidden, but a 2px reach never leaves it. The knob is centred on the lane, the lane is centred in the well, and the bars are at least 2px at every tier -- measured at the tier-2 threshold, knob top 2px inside a 20px well. */ .phch-fader::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:var(--vu-knob); height:7px; margin-left:calc((var(--vu-knob) - 1px) / -2); background:var(--accent-ink); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:pointer; box-sizing:border-box; } .phch-fader::-moz-range-thumb { width:var(--vu-knob); height:7px; box-sizing:border-box; background:var(--accent-ink); border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:pointer; } .phch-fader:disabled { cursor:not-allowed; opacity:0.35; } /* ── NO FOCUS BOX AROUND THE METER ────────────────────────────────────────── Phil, 2026-08-26: "it also draws a box around the meters, not sure what that's for." That was the browser's focus ring. runOp keeps focus ON the fader while you drag it (keepFocus), and pressing Shift is a KEY event -- which flips Chrome's focus-visible heuristic from "pointer user" to "keyboard user" and paints the ring. The fader fills its well, so the ring drew a box around the whole meter, and only ever appeared when you reached for fine adjust. The ring is not thrown away: it moves to the KNOB, which is the part that actually responds to the arrow keys, and stays legible without boxing the meter it sits in. */ .phch-fader:focus, .phch-fader:focus-visible, .phmst-fader:focus, .phmst-fader:focus-visible { outline:none; } .phch-fader:focus-visible::-webkit-slider-thumb, .phmst-fader:focus-visible::-webkit-slider-thumb { border-color:var(--accent-hi); } .phch-fader:focus-visible::-moz-range-thumb, .phmst-fader:focus-visible::-moz-range-thumb { border-color:var(--accent-hi); } /* Pan too — same ring, same reason, and it is the same gesture. */ .phch-pan:focus, .phch-pan:focus-visible { outline:none; } .phch-pan:focus-visible::-webkit-slider-thumb { border-color:var(--accent-hi); } .phch-pan:focus-visible::-moz-range-thumb { border-color:var(--accent-hi); } /* ── THE HOVERING VALUE ───────────────────────────────────────────────────── position:fixed on , not inside the strip: #pat-hdr is overflow-clipped and the strip is ~115px wide, so a tip parented there would be cut off on both counts. A FIXED WIDTH, and that is load-bearing rather than tidy — centring on the thumb otherwise needs offsetWidth, which forces layout inside an input stream running at pointer rate. Tabular figures keep the number from shifting sideways as it counts, the same reason the readouts have them. */ #fader-tip { position:fixed; display:none; z-index:1400; pointer-events:none; width:76px; height:17px; box-sizing:border-box; /* HARD LEFT AND HARD RIGHT (Phil, 2026-08-26: "the positioning of the numbers on the floating readout shift around as they change. can we keep them aligned left and right?"). The two halves are separate spans and the box holds them apart, so the dB value changing width cannot move the hex -- and neither of them moves at all, since both are pinned to an edge of a box whose width is fixed. A centred single string moved both every time either changed length. `display` is set to flex by showFaderTip when it shows the tip; it stays `none` here so the box is not laid out before it is ever used. */ padding:1px 5px; align-items:baseline; justify-content:space-between; text-align:left; gap:4px; font-size:10px; line-height:13px; font-variant-numeric:tabular-nums; /* THE MENU'S OWN TOKENS, not invented ones. The first draft reached for --bg-panel/--text-normal/--border-panel; two of those three are defined NOWHERE, so the tip would have drawn with no border and whatever colour it inherited. Caught by colour-tokens.js, which is exactly what it is for. A floating box over the UI is the same object #ctx-menu is, so it takes the same three tokens and follows every theme for free. */ background:var(--bg-menu); color:var(--menu-ink); border:1px solid var(--border); border-radius:var(--radius-control); box-shadow:0 6px 20px var(--scrim-soft); } /* A SINGLE VALUE HAS NOTHING TO SIT OPPOSITE. The pan sliders pass one label ("L12"/"C"/"R4"), so it takes the whole box and stays centred rather than being flung against the left edge on its own. */ #fader-tip.one { justify-content:center; } /* The strip grows from the TOP of the name, so the fader lands under the M/S row and the meter stays welded to the bottom edge. */ #pat-hdr.strip-fader .phch { justify-content:flex-start; } /* ── THE STRIP SPLITTER ───────────────────────────────────────────────────── Drag the header's bottom edge to grow the strip. Absolutely positioned and straddling the existing 1px border, so it costs the header NO height — the cell was measured full to the pixel before the meter went in, and there is still nothing spare. It overlaps ~3px of the first pattern row, which is what every DAW's boundary handle does. */ /* ENTIRELY INSIDE THE HEADER. It used to sit at `bottom:-3px`, straddling the border and reaching 3px into the first pattern row — which made it a full-width invisible strip over the top of row 0, and Phil found what that costs: "I think it's conflicting with area selections on the pattern view too". A drag-select begun near the top of row 0 grabbed the splitter instead. Pulled fully inside, it can only ever cover the meter, which is pointer-events:none and has nothing to conflict with. */ #pat-hdr-splitter { position:absolute; left:0; right:0; bottom:0; height:5px; cursor:ns-resize; z-index:12; background:transparent; } #pat-hdr-splitter:hover, #pat-hdr-splitter.dragging { background:var(--accent-dim); } /* ── --vu-grab LIVES ON THE HEADER, NOT ON THE FADER ──────────────────────── A custom property inherits from the PARENT, never from a sibling. Declared on .phch-fader it was invisible to .phch-meter > i, whose negative margin then resolved to its 0px fallback — so the bars sat against the input's HIT AREA instead of against its rail and left a 3px gap either side. Measured exactly that: gapAboveRail 3, gapBelowRail 3, on a fix that looked applied. On #pat-hdr both the fader and the bars inherit the same number, which is the only way the two can agree about where the rail is. */ /* ONE declaration, both tiers, and the arithmetic works out at each. At tier 1 the lane is 1px: the fader's box is 1 + 6 = 7px, the bars overlap 3px each, and what is left between them is 1px of well — exactly the hairline divider it has always been, with the fader invisible on top of it. At tier 2 the lane is 5px and the same sum leaves the 5px rail. A second, tier-specific value would also make this the only token in the stylesheet defined twice with different values, which colour-tokens.js rightly objects to. */ #pat-hdr { --vu-grab: 6px; } .phch-meter { /* VERTICAL, and in the FLOW. It used to be absolutely positioned on the cell's bottom edge, which is what let a horizontal bar cost no height; a vertical meter wants the opposite -- all the height it can get -- so it is a flex child of the right-hand column and simply fills it. A ROW, because rotating the strip's own idiom is what makes it vertical: bar, fader lane, bar, read left-to-right instead of top-to-bottom. Same three parts, same --vu-lane sizing them, same knob overlapping both bars. */ /* NO align-self:stretch. It overrode the column's align-items:center and the well spanned the whole 74px of the strip's right column -- a big dark box with a ~30px meter lost inside it. Hugging its contents is what makes it read as a meter. */ /* flex:0 0 auto -- A CONSTANT WIDTH. .phch-body is a ROW, so `flex` here sizes the meter's WIDTH, not its height (the height comes from align-self:stretch). At 1 1 auto it shared the row with the left column, so the moment the pan row appeared and widened that column the meter NARROWED: measured 27px -> 15px as the strip crossed the pan tier. Its width is now whatever its own contents need -- two 7px bars, an 11px fader box, less the 6px of grab they overlap -- and nothing outside it can change that. */ flex:0 0 auto; min-height:0; display:flex; flex-direction:row; justify-content:center; background:var(--vu-track); overflow:hidden; box-sizing:border-box; border:1px solid var(--vu-track-edge); /* POSITIONED, so the clip lamp below has THIS to sit in. It had no `position` of its own, and the lamp is absolutely positioned -- so its containing block was .phch, the whole cell, and the lamp drew as a red bar down the right-hand edge of the channel header. Phil, 2026-08-26. The stale comment on the lamp even said the meter was "already position:relative-by-absolute", which had been true when the meter WAS absolutely positioned and stopped being true the moment it became a flex child. */ position:relative; /* CLICKABLE, so the lamp can be dismissed by clicking it -- the idiom every hardware meter uses, and the one #vu already offers for the master. It was pointer-events:none, which is why "clicking it or the readouts doesn't reset it": the click never landed on anything that was listening. Nothing is blocked by this. The fader inside keeps its own hit area and stops its clicks propagating, and a click on the well still bubbles to the strip, so selecting the track by clicking its header is unchanged. */ pointer-events:auto; } /* THE CLIP LATCH, drawn as a stripe at the right end of the well — the same idiom and the same token as the master's .vu-led, because it is the same news about a different bus. Latched until the next play-from-start or a click on the master meters: a single over is gone in 10 ms, and finding out it happened is the whole point. ::after rather than an element: one CSS rule instead of 28 more DOM nodes, and the meter is already position:relative-by-absolute inside .phch. */ /* ACROSS THE TOP OF THE WELL, in the empty space above the bars (Phil, 2026-08-26: "it should just be a bar in the empty space above the meters"). It was a vertical stripe down the right-hand EDGE -- the right shape for the horizontal meter this was written for, and the wrong one twice over once the meters went vertical: wrong axis, and drawn against the cell rather than the well (see position:relative above). The top is where a vertical meter has room: the bars fill from the bottom, so the space above them is empty exactly when the signal is not near clipping, and covered by the bar itself when it is -- which is the moment the lamp should be unmissable. Same token as .vu-led, because it is the same news about a different bus, and the same hairline of track colour under it so a lit lamp stays a discrete object against a bar pinned at full scale. */ /* `.phch.clipped .phch-meter`, not `.phch-meter.clipped`: the latch class moved up to the CELL so the readout can turn red on the same news (see .phch-read below). The lamp is unchanged — it is still drawn inside the well, which is still its containing block. */ .phch.clipped .phch-meter::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--vu-clip); border-bottom:1px solid var(--vu-track); } /* ── ALL FOUR OFFER THE POINTER, UNLIKE #vu ──────────────────────────────── #vu.clipped is conditional, on the reasoning that a permanently clickable meter implies an action that usually does nothing. That is right THERE and wrong here: this gesture clears the per-track PEAK HOLD as well as the clip latch, and the readouts are in "Peak since reset" mode by default -- so there is always something to dismiss, whether or not a lamp is lit. Making it conditional would also leave the master well with no affordance at all, since nothing lights a lamp on it. */ .phch-meter, .phmst-meter, .phch-read, .phmst-read { cursor:pointer; } /* STEREO (Phil, 2026-08-25): two bars, L above R. EXPLICIT 2px HEIGHTS, not flex. `flex:1 1 0` inside 5px with a 1px divider splits the remainder as 1.5px + 1.5px — measured in the browser, and 1.5px is sub-pixel at 1x, which is exactly the unreadable meter this was supposed to avoid. Stated heights leave no arithmetic to get wrong: 2 + 1 + 2 = 5. The cost is 2px of header (the mono bar was 3px); .phch's bottom padding carries it. Paid deliberately — a stereo meter you cannot read is not worth having, and the header's height already varies by more than this with track names present. */ /* THE BARS SPLIT WHATEVER THE WELL HAS, minus the 1px divider. Stated with calc rather than flex: `flex:1 1 0` inside 5px measured 1.5px per side, which is sub-pixel at 1x — the unreadable meter this was meant to avoid, arrived at by arithmetic nobody performed. calc says the split out loud. */ /* THE GRADIENT IS FIXED TO THE WELL, AND REVEALED — not scaled with the bar (Phil, 2026-08-25: "rather than the gradient scaling with the size of the meter, it should only reveal more of the gradient as it grows longer"). This is a correctness fix, not a cosmetic one. `transform:scaleX(v)` squeezes the WHOLE gradient into the bar, so the tip is always the --vu-clip end: a track sitting at -30 dB drew a short bar that was RED at its point. The colour carried no information at all, which is the opposite of what a gradient on a meter is for. clip-path rather than width, for the same reason scaleX was chosen over width in the first place: it stays on the compositor and costs no layout, and 28 strips repainting at 60 Hz is exactly where that matters. */ .phch-meter > i { /* Each bar takes a fixed WIDTH now and the full height; the lane between them is the fader, exactly as in the horizontal version. Revealed from the bottom by the draw loop's inset(). */ display:block; flex:0 0 7px; height:100%; min-width:0; clip-path:inset(100% 0 0 0); background:linear-gradient(0deg,var(--vu-floor) 0%,var(--vu-safe) 70%,var(--vu-warn) 88%,var(--vu-clip) 100%); } /* A hairline of well between the two, so a track sitting at the same level on both sides still reads as two bars rather than one solid block. */ /* The bars overlap the fader's grab margin so they sit flush against its rail — horizontally now, since the well is a row. */ .phch-meter > i:first-child { margin-right:calc(var(--vu-grab, 0px) / -2); } .phch-meter > i:last-child { margin-left:calc(var(--vu-grab, 0px) / -2); } /* MONO — off the mixer path, where Paula's panning is fixed hardware LRRL and every track is hard left or hard right. One bar spanning the full height, and the second is not drawn at all rather than drawn empty. */ .phch-meter.mono > i:first-child { flex:0 0 11px; } .phch-meter.mono > i:last-child { display:none; } /* A track the current block does not have still METERS — mute/solo and audio are song-level, so the bar is honest there and reads 0 by itself when the track is silent. Only the well recedes with the rest of the dead cell. */ .phch.phch-dead .phch-meter { opacity:0.5; } /* Ctrl+click-marked track (paste-to-tracks target) — cool-blue top bar + tint, matching the range-selection colour. */ .phch-tsel { background:var(--sel-fill-soft); box-shadow:inset 0 2px 0 var(--sel-edge-soft); } /* A track column the CURRENT block does not have (the grid is laid out at the song's width — js/app.js songTrackWidth). Only the label recedes: the M and S buttons keep their normal contrast because mute and solo are SONG-level and genuinely apply to a track this block happens not to use. Toggled per block by a class, never by rebuilding the header. */ .phch.phch-dead { background:rgba(0,0,0,0.28); } /* ABOVE THE AUDIO BUDGET — a different state from .phch-dead, and deliberately. .phch-dead means "the block you are looking at has no such track", which is a property of the BLOCK and changes as you move around. This means "no player will ever sound this track", which is a property of the SONG: OctaMED stops at the mixing-channel budget, so the meter is permanently empty and the fader permanently inaudible. Phil read that silence as a bug, which is fair — it looked identical to a track that simply had not played yet. Hatched rather than merely dimmed, so it does not read as "quiet". */ .phch.phch-nobudget { background:repeating-linear-gradient(135deg, rgba(0,0,0,0.30) 0 6px, rgba(0,0,0,0.16) 6px 12px); } .phch.phch-nobudget > :not(.phch-ms) { opacity:0.40; } .phch.phch-nobudget .phch-meter { opacity:0.35; } .phch.phch-nobudget .phch-fader { pointer-events:none; } .phch.phch-dead > :not(.phch-ms):not(.phch-meter) { opacity:0.35; } /* `flex:1` was here, and it is the rule that made the M/S row wander -- see the .phch-name block above, which now pins it to flex:0 0 auto. Removed rather than edited in place so there is ONE declaration of this property: as the later rule it silently won, which is how a fix applied above could look applied and do nothing. */ .phch-ms { display:flex; gap:3px; margin-top:1px; } .phch-btn { background:var(--bg-rail); color:var(--text-dim); border:1px solid var(--border-control); border-radius:var(--radius-control); font-family:inherit; font-size:9px; letter-spacing:0.5px; padding:1px 5px; cursor:pointer; user-select:none; min-width:18px; line-height:1.2; } /* THE STRIP'S OWN BUTTONS SHARE THE ROW EQUALLY. `flex:1 1 0` with min-width:0 overrides the content-derived min-widths above, so three buttons come out the same size and together span the name field's width. Scoped to .phch-btns so the same .phch-btn class keeps its content width wherever else it is used. */ .phch-btns > .phch-btn { flex:1 1 0; min-width:0; padding:1px 2px; display:flex; align-items:center; justify-content:center; } /* :not(:disabled) since mixer round 2 · U8 — the Mixer window's bus M/S buttons share this class and CAN be disabled (their op is a sibling branch), and a greyed control that still lights under the pointer is a control that claims it can be pressed. No docked strip has ever had a disabled one, which is why the guard was not needed until now. */ .phch-btn:hover:not(:disabled) { background:var(--bg-chip-hover); color:var(--text-hi); } /* THE .medz MARK (signal routing phase 5, U5). A track past trackVolCapacity has a working fader whose value the .med cannot hold, so the strip says where the number goes. It sits at the BOTTOM of the top group, so it eats the column's slack and the readout and pan below it do not move -- pan is a comparison control and its row has to line up across the whole header. flex:0 0 auto so it never stretches; --accent-ink because the fader works and the value is kept, which is a fact about WHERE and not a refusal. */ .phch-medz { flex:0 0 auto; font-size:8px; letter-spacing:.5px; line-height:1.2; color:var(--accent-ink); text-align:center; cursor:help; } /* ── THE CHANNEL ACTIVATION BUTTON (task #11, 2026-08-25) ────────────────── Phil: the mute button becomes a channel ACTIVATION button carrying the channel number -- "when they're on they're illuminated, when muted, they go red or an appropriate theme colour". PROVENANCE: this is AMIGA OCTAMED'S numbered channel button, not a DAW's. Phil corrected that while it was being built, and it matters -- OctaMED is the original this app reimplements, so copying it is the point. THE SENSE IS INVERTED FROM WHAT THE CLASS SAYS, deliberately and only here. `.on` still means MUTED, because that is what trackMute[] means and what refreshTrackButtonStyles sets; what changed is which state looks lit. Renaming the class would have touched the toggle, the solo logic and the gates for a purely visual decision, so the flip lives in these two rules and nowhere else. ILLUMINATED = the channel plays. This is the RESTING state of nearly every button on screen, so it is deliberately quiet: an accent ground rather than a filled accent, which at 28 channels would be a wall of colour. */ .phch-btn.phch-mute { background:var(--accent-ground-soft); border-color:var(--accent-dim); color:var(--accent-hi); min-width:20px; } /* SILENCED. --mute-* is the existing family, already contrast-fitted per theme, so "red or an appropriate theme colour" is a token that already exists rather than a hex picked here. */ .phch-btn.on.phch-mute { background:var(--mute-bg); border-color:var(--mute-edge); color:var(--mute-ink); } .phch-btn.on.phch-solo { background:var(--solo-bg); border-color:var(--solo-edge); color:var(--solo-ink); } /* Row: extend background to the FULL pattern width (not just the visible viewport) so the 4n+1 / 16n+1 stripes and the cur-row amber highlight paint across all columns even when horizontally scrolled. `width:max-content` makes .pr size to the natural sum-of- children width; `min-width:100%` ensures the highlight still fills the viewport even when total pattern width is less than viewport. Without this, the highlights only painted to viewport width and the stripes/cur-row cut off mid-scroll. Phil 2026-05-22. */ /* MPT-fallback flow rows (non-MED formats): normal flow, nth-child stripes. */ #pat-rows { font-family: var(--font-pattern); } .pr { display:flex; border-bottom:1px solid var(--bg-rail); width:max-content; min-width:100%; } .pr:not(.prv):nth-child(4n+1) { background:var(--stripe-beat); } .pr:not(.prv):nth-child(16n+1) { background:var(--stripe-bar); } /* Virtualized rows (native MED path, app.js patView): a fixed pool of absolutely-positioned rows recycled as the window scrolls. `top` is set inline per row; total DOM stays ~120 rows regardless of block size. Stripe classes replace nth-child (slot order shuffles on recycle). */ .pr.prv { position:absolute; left:0; top:0; width:var(--pr-w, 2000px); height:var(--pr-h, 17px); box-sizing:border-box; /* Skip layout/paint for the overscan rows above/below the viewport — combined with virtualization, each reflow lays out only the ~visible rows, not the whole pool. Explicit height is the skipped-size, so scroll geometry stays exact. */ content-visibility:auto; contain-intrinsic-size:var(--pr-w, 2000px) var(--pr-h, 17px); } .pr.prv.s4 { background:var(--stripe-beat); } .pr.prv.s16 { background:var(--stripe-bar); } /* Rows the composer marked by hand (MED's hlmask) — a bar down the row-number gutter's left edge, the DOM twin of the canvas path's markBar. `inset` box-shadow rather than a border so it costs no layout and cannot shift a column. Amber, matching the main controls; the play-row tint it sits over is only 11-14% alpha. Unrelated to .s4/.s16, which are arithmetic from lines-per-beat. */ .pr.prv.hl .prn { box-shadow: inset 3px 0 0 var(--accent-hi); } /* The row number is the toggle for its own mark, so it has to look clickable. */ .pr.prv .prn { cursor:pointer; } /* Canvas grid active: the canvas draws the whole pattern, so the DOM pool rows are hidden behind it. display:none removes them from layout+paint entirely, so scrolling only moves the canvas layer (no per-row content-visibility work under the canvas — the source of the residual scroll jitter, Phil 2026-07-24). Scoped to .pr.prv (the pooled rows), NOT the bare .pr geometry probe, so the slow-path row measurement still works while canvas is on. */ #pat-rows.cg-on .pr.prv { display:none; } .pr.cur { background:var(--play-row) !important; } .pr.cur .prn { color:var(--grid-row-play); } /* Marked range (Phase 2) — DOM-mode overlay only; in canvas mode the overlay canvas draws the rectangle. Positioned in #pat-rows content coords by editor js/paintDomSel. z above the pooled rows, click-through. */ #pat-sel { position:absolute; z-index:3; pointer-events:none; box-sizing:border-box; background:var(--sel-fill); border:1px solid var(--sel-edge); } /* Marching ants on the last copied/cut range (Excel/Sheets convention). A CSS border cannot animate its dashes, so the outline is four gradient strips whose background-position is animated instead. Sits BELOW #pat-sel so a live selection still reads as the primary mark. */ #pat-clip { position:absolute; z-index:2; pointer-events:none; box-sizing:border-box; background: repeating-linear-gradient(90deg, var(--accent-fill) 0 5px, transparent 5px 10px) left top/100% 1px, repeating-linear-gradient(90deg, var(--accent-fill) 0 5px, transparent 5px 10px) left bottom/100% 1px, repeating-linear-gradient(0deg, var(--accent-fill) 0 5px, transparent 5px 10px) left top/1px 100%, repeating-linear-gradient(0deg, var(--accent-fill) 0 5px, transparent 5px 10px) right top/1px 100%; background-repeat:no-repeat; animation:pat-ants 0.6s linear infinite; } @keyframes pat-ants { to { background-position: 10px top, -10px bottom, left -10px, right 10px; } } /* Still legible, just still. */ @media (prefers-reduced-motion: reduce) { #pat-clip { animation:none; } } .prn { position:sticky; left:0; z-index:4; background:var(--bg-pattern); min-width:38px; padding:1px 6px 1px 0; text-align:right; color:var(--grid-row); border-right:1px solid var(--seam-soft); font-size:11px; flex-shrink:0; } /* Cur-row + stripe tints must reach the frozen gutter too, or it reads as a dead column. The gutter bg is opaque (to occlude scrolled cells), so paint the tint ONTO it rather than relying on the row bg showing through. */ .pr.prv.s4 .prn { background:var(--stripe-beat-gutter); } .pr.prv.s16 .prn { background:var(--stripe-bar-gutter); } .pr.cur .prn { background:var(--play-row-gutter); } /* Pattern data cell. Width must match `.phch` above (132px). With fixed width, horizontal scrolling kicks in when channel count exceeds the viewport — better than stretching cells to oddly different widths and misaligning over the header. */ .pc { flex:0 0 var(--pc-w, 115px); padding:1px 5px; border-right:1px solid var(--btn-press); white-space:nowrap; overflow:hidden; font-size:11px; letter-spacing:0.3px; } .pc:last-child { border-right:none; } /* Cell colour coding. Per-digit spans (i1/i2 etc.) carry the editor's cursor stops — same palette as the old whole-column spans. */ .nn { color:var(--grid-note); } .ni, .i1, .i2 { color:var(--grid-instr); } .nv { color:var(--grid-vol); } .nc, .c1, .c2 { color:var(--grid-cmd); } .np, .a1, .a2 { color:var(--grid-level1); } .b1, .b2 { color:var(--grid-level2); } /* level-2 byte (cmdExt) — dimmer than np so the extension byte is visually distinct from the primary level-1 param */ .ne { color:var(--text-dim); opacity:.2; } /* Level-2 column on a block with NO cmdExt storage. Drawn anyway so the track columns keep a fixed width from block to block (they used to jump as the song moved between blocks), but dimmer than an empty cell and never a cursor stop — see stopsFor(). Must beat .ne, which also matches. */ .nx, .nx.ne { color:var(--text-dim); opacity:.08; } /* ── PATTERN EDITOR (editor.js) ─────────────────────────── */ /* Focus ring: editor keys are captured only while the pane has focus — make that state unmistakable (Phil 2026-07-23: "should be more obvious when the pattern area is in focus and keyboard is enabled"). Focused = solid amber ring + lit bar; unfocused = KEYS OFF hint in the bar. */ /* :focus drives the visuals directly off document.activeElement (no JS events involved); the .ed-focus class is kept as belt-and-braces. PERF: the focus ring MUST NOT be an inset box-shadow — an inset shadow on a SCROLL CONTAINER forces the browser to repaint the whole scrollport on every scroll frame (Phil 2026-07-23: "jerky when the pattern is in focus, better when it's not"). A border colour change is free: painted once, no per-scroll repaint, and no layout shift because the width never changes. */ #pattern-area { outline:none; border-width:2px; } #pattern-area.ed-focus, #pattern-area:focus { border-color: var(--accent-ink); } /* #ed-bar moved OUT of #pattern-area (2026-07-27), so the bar's focus styling can no longer be a descendant selector off the pane — editor.js mirrors the focus state onto the bar itself as .ed-focus. (The old `#pattern-area.ed-focus #ed-bar` form silently stopped matching, which left "KEYS OFF — CLICK PATTERN" stuck on permanently.) */ #ed-bar.ed-focus { background:var(--accent-ground-deep); border-bottom-color:var(--accent-dim); } /* THE KEYS HINT LIVES IN THE STATUS BAR NOW, hard right (Phil, 2026-08-12: "it quite frequently causes the UI to shift if the window is a certain size"). In the edit toolbar it was an item in a WRAPPING flex row, so showing and hiding it re-flowed everything around it at the widths where the row was close to wrapping. FADED, NOT display:none — the space stays reserved whether or not the hint is showing, so nothing moves at all. That is the whole point of the change; a `display` toggle down here would just have relocated the shift. The status bar has room to spare for it. AND THE HIDE RULE IS NO LONGER A DESCENDANT OF #ed-bar. It used to be `#ed-bar.ed-focus #ed-keys-hint`, which stops matching the moment the element moves — the comment above records that exact failure happening once before, leaving the hint stuck on permanently. :has() asks the question directly instead: is the pattern pane focused, by either the real :focus or the class editor.js mirrors. */ /* A TRANSLUCENT WASH, NOT AN OPAQUE TINT. --accent-ground is mixed from the PANEL, and this chip does not sit on the panel -- it sits on the status bar, which several themes colour differently. Measured against each theme's own bar before the change: 8.25:1 on Professional, whose status bar is BLACK and whose chip was therefore a bright pink-grey slab, and 1.55:1 on Das Nonplusultra, against 1.22-1.31 in the themes where the bar does match the panel and the effect was the intended faint tint. Phil, 2026-08-23: '"keys off - click pattern" is a different shade from the rest of the UI... in several themes.' An alpha composites over whatever is actually behind it, so it cannot get this wrong again in a theme nobody has written yet -- the same reason the play row is an alpha rather than a colour. --accent-a16 already exists and is the accent at 16%. THE INK COMES FROM THE STATUS BAR TOO, for the same reason. It was --accent-hi, and on Professional that is #0000AA on a near-black bar: 1.56:1, unreadable, and no halo can rescue it because a black shadow under a nearly black ink draws nothing. --status-ink is the bar's own ink and reads on it by construction in every theme; the accent identity is carried by the wash behind, which is what a chip is for. */ #ed-keys-hint { color:var(--status-ink); background:var(--accent-a16); padding:1px 8px; border-radius:2px; letter-spacing:1px; white-space:nowrap; transition:opacity .12s ease; } body:has(#pattern-area:focus) #ed-keys-hint, body:has(#ed-bar.ed-focus) #ed-keys-hint { opacity:0; } /* Groups the hint with the existing right-hand readout so #statusbar's space-between does not spread the two apart. */ .status-right { display:flex; align-items:center; gap:10px; flex:none; } /* Unsaved-changes dialog — narrow, three explicit outcomes. */ .unsaved-dialog { max-width: 520px; } .unsaved-dialog .sd-body p { margin: 0 0 14px; line-height: 1.5; } .unsaved-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .unsaved-btns .btn { flex: 1 1 auto; min-width: 120px; padding: 7px 10px; } /* OLDER ABANDONED AUTO-SAVES in the resume prompt: one row each, name and time, and the same two buttons as the main offer, smaller. */ .resume-others { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; border-top:1px solid var(--border); padding-top:8px; } .resume-row { display:flex; align-items:center; gap:8px; font-size:11px; } .resume-row-name { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .resume-row-when { color:var(--text-dim); flex:0 0 auto; } .resume-row .btn { flex:0 0 auto; padding:3px 8px; font-size:10px; } /* "Already open in another tab" on the welcome screen. */ .wc-elsewhere { width:min(560px, 100%); font-size:11px; color:var(--text-dim); border:1px solid var(--border); background:var(--bg-inset); padding:6px 10px; } /* Generic confirm dialog (js/confirm-dialog.js). Borrows the unsaved dialog's paragraph rhythm — the counts a structural op reports ARE the content, and they only read as separate facts if they are separate lines. Prefixed with .cfm-dialog rather than left at .sd-dialog specificity: the shared .fr-btns and .set-hint rules below would otherwise win or lose on source order alone, which has bitten this file twice. */ .cfm-dialog { max-width: 480px; } .cfm-dialog .sd-body p { margin: 0 0 12px; line-height: 1.5; } .cfm-dialog .sd-body p:last-child { margin-bottom: 0; } /* .fr-btns is right-aligned, so CONFIRM lands in the corner and CANCEL sits inboard of it. Same button height as everywhere else — extra padding here would make this dialog look heavier than the panels it interrupts. */ .cfm-dialog .cfm-btns { margin-top: 16px; } .cfm-dialog .cfm-btns .btn { min-width: 92px; padding: 6px 14px; } .cfm-dialog .gen-warn { margin-top: 10px; } .cfm-dialog .set-hint { margin-top: 12px; } /* Cursor: cell outline + inverse-video active stop (MED-style). */ .pc.cur-cell { outline:1px solid var(--cursor-line); outline-offset:-1px; position:relative; } /* Edit-cursor flash (DOM mode; the canvas grid does its own timed repaint). Only the inverse-video stop pulses — the .cur-cell outline stays put, so the cursor never disappears. editor.js adds .cur-blink while EDIT is on AND the pane has focus. `steps(1)` = a hard on/off, matching the canvas blink. */ @keyframes edCursorBlink { 0%,49% { opacity:1 } 50%,100% { opacity:0 } } #pat-rows.cur-blink .pc.cur-cell .cs { animation: edCursorBlink 0.9s steps(1, end) infinite; } .pc .cs { background:var(--accent-fill); color:var(--on-accent) !important; opacity:1; border-radius:1px; } /* Advance preview arrow: where the cursor goes after entry (editor.js sets adv-d / adv-r on the cursor cell when edit mode is on). */ .pc.cur-cell.adv-d::after, .pc.cur-cell.adv-r::after { position:absolute; font-size:8px; line-height:1; color:var(--accent-hi); pointer-events:none; text-shadow:0 0 2px var(--shadow-cursor); } .pc.cur-cell.adv-d::after { content:'▼'; bottom:-1px; left:50%; transform:translateX(-50%); } .pc.cur-cell.adv-r::after { content:'▶'; right:0; top:50%; transform:translateY(-50%); } /* Editor status bar. Fixed 22px height; #pat-hdr's sticky top offset below MUST match so the two bars stack instead of overlapping. */ /* Editor control bar — now a top-region row beside the transport (was a sticky strip inside #pattern-area). Wraps instead of clipping; grouped into labelled clusters (.edg). Phil 2026-07-27. */ #ed-bar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--d-edbar-gap); padding:var(--d-edbar-pad); background:var(--bg-bar); border-bottom:1px solid var(--seam-soft); font-size:10px; letter-spacing:1px; color:var(--text-dim); user-select:none; flex-shrink:0; } #ed-bar.hidden { display:none; } /* One cluster: a labelled inset group, same visual family as .tg */ .edg { display:flex; align-items:center; gap:4px; background:var(--bg-inset); border:1px solid var(--border); padding:3px 6px; } .edg-l { font-size:8px; color:var(--ink-off); letter-spacing:1px; margin-right:2px; } /* NO BOX. .edg paints a background, border and padding for a GROUP OF CONTROLS; this one holds a single status dot that is visibility:hidden when the module is clean, so it rendered as an empty square — the more so since the keys hint moved out of it to the status bar on 2026-08-12. */ /* .edg-file is gone: the dot it held now sits on the SAVE button. */ .ed-flag { padding:1px 6px; border:1px solid var(--border-control); border-radius:var(--radius-control); cursor:pointer; color:var(--ink-off); } /* A lit flag IS a selected button, so it takes the lit-button pair -- under Professional that is OctaMED's inverse video (black fill, grey ink), and it must not borrow --accent-fill, which is that theme's pink CURSOR. */ .ed-flag.on { color:var(--btn-on-ink); background:var(--btn-on-bg); border-color:var(--btn-on-bg); } /* Hold cell (note tied from an earlier row) — dimmed. Class, not an inline style, so single-cell re-renders can turn it on and off. */ .pc.pc-hold { opacity:0.6; } /* A track column this BLOCK does not have, drawn so the grid stays the song's width instead of resizing per block. Reads as "outside the block" rather than "an empty cell you could type into": recessed rather than dimmed, because .pc-hold already owns dimming and .nx (the inert level-2 digits) already owns near-invisible. Nothing inside it — no data-t, so it cannot take the cursor. */ .pc.pc-dead { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,0.22) 6px 12px); box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.30); pointer-events: none; } /* ADV-down suppressed: FOLLOW is stepping the cursor for us while playing, so the flag is on but inert. Hollow it out instead of lying about it. */ .ed-flag.on.sup { background:transparent; color:var(--accent-ink); border-style:dashed; } .ed-ind { color:var(--text-dim); } /* Bar dropdowns (octave / instrument / page / spacing). */ .ed-sel { color:var(--text-dim); display:inline-flex; align-items:center; gap:3px; } /* --bg-inset, not a literal #222. This was the last field family OUTSIDE the dialogs still carrying its own background, and it is what made the text-field-vs-drop-down mismatch app-wide rather than dialog-wide. */ .ed-sel select { background:var(--bg-inset); color:var(--accent-hi); border:1px solid var(--border-control); border-radius:var(--radius-control); font:inherit; font-size:10px; padding:0 2px; height:16px; cursor:pointer; max-width:150px; } .ed-sel select:hover { border-color:var(--accent-dim); } /* THE INSTRUMENT DROPDOWN IS THE ONE WITH A NAME IN IT, so it is the one that needs room. Phil, 2026-09-06: "instrument name in the pattern editor bar needs to be a little wider to not cut off names." 264px is measured, not guessed: the bar font is 10px Share Tech Mono at 5.43px per character, so the widest option a module can produce -- "NN " plus MED's 40-character name limit -- is 234px of text, and the select's own border, padding and arrow measure 26px on top of that (a 40-character name measures 259px in the shipping bar). At 1280px the four bar groups end at x=1014 with 266px of slack, so the extra 114px here still leaves the row unwrapped with room to spare (measured). A select is sized by its widest OPTION, so this is a cap and not a width: a module of short names keeps a short box, and the bar does not grow for songs that do not need it. text-overflow covers the case the cap does bite -- a name longer than MED's own limit, arriving from a file we did not write -- so it ends in an ellipsis rather than mid-word. */ #ed-inst-sel { max-width:264px; text-overflow:ellipsis; } .ed-sel select:disabled { opacity:.4; cursor:default; } /* THE UNSAVED-EDITS DOT, on the button that acts on it. Absolutely positioned in the button's top-right corner so it cannot change the button's width — SAVE sits in a fixed toolbar row, and a marker that reflowed its neighbours every time you typed a note would be worse than no marker. `visibility` rather than `display` because js/editor.js toggles that property by name. */ #btn-save { position:relative; } #ed-dirty { position:absolute; top:1px; right:2px; font-size:9px; line-height:1; color:var(--accent-hi); visibility:hidden; pointer-events:none; text-shadow:0 0 3px var(--shadow-strong); } /* A disabled SAVE is greyed, and the dot must not be: it is the reason you would want the button, so it stays legible even when the button is not currently actionable. */ #btn-save:disabled #ed-dirty { color:var(--accent-hi); opacity:1; } #ed-bar .btn { font-size:9px; padding:1px 8px; } /* ── RIGHT PANEL: collapsible module-info + message ──────── */ #modinfo-header { cursor:pointer; display:flex; align-items:center; gap:5px; } #modinfo-header:hover { color:var(--accent-ink); } /* .mi-caret STAYS: MODULE INFO no longer uses it, but Settings ▸ Module compatibility still does (index.html:1355, and the rotate at #compat-section .collapsed below). */ .mi-caret { font-size:8px; display:inline-block; transition:transform .12s; } /* DEAD RULES REMOVED 2026-08-12: `#modinfo-section.collapsed .mi-caret` and `#modinfo-section.collapsed #modinfo-body { display:none }`. Nothing adds `.collapsed` to that section any more — the dockable-sections work moved MODULE INFO onto .sec-collapsed / .sec-folded like the other three, and its header carries .sec-caret. Left alone the second one was a loaded gun: display is not animatable, so the day anything re-added that class the fold would snap, which is the exact symptom this area has been chasing. */ .mi-sub { font-size:8px; letter-spacing:2px; color:var(--ink-off); padding:3px 7px 0; } /* Module annotation. max-height + scroll already handled long PROSE, but a 30,000-char message with no spaces (Win MED allows both a short and a long annotation, each up to 30k) is one unbroken token, which overflowed the panel sideways instead of wrapping — hence overflow-wrap/word-break. */ #i-msg, #i-long { font-size:11px; color:var(--text-dim); white-space:pre-wrap; max-height:80px; overflow-y:auto; overflow-x:hidden; overflow-wrap:anywhere; word-break:break-word; } /* ── WELCOME SCREEN ─────────────────────────────────────── */ #welcome { display:flex; flex-direction:column; align-items:center; gap:16px; max-width:660px; padding:22px; color:var(--text-dim); } .wc-brand { text-align:center; } /* Logo mark (inline SVG so these variables reach it). THE THEMING PASS THIS COMMENT USED TO DEFER HAPPENED (2026-08-21). The mark no longer sits outside the app's scheme: every theme block at the end of this file sets --logo-ink to its own brand ink, and the theme HUE is derived FROM that ink, so chrome and mark cannot drift apart. The values below are the amber theme's, which is the scheme the app shipped with. window.logoColour() in js/app.js still previews an ink on its own; it predates themes and does not change the chrome. */ :root { --logo-bg: #0C111E; /* near-black rounded tile, from the source artwork */ --logo-ink: #FF7A00; /* Workbench orange, the amber theme's mark. The other five are set by their own theme blocks below. */ --logo-glow: 0 0 22px rgba(255,122,0,.30); } /* Hero scale (Phil 2026-07-28: "at least 2x"). clamp() keeps it a hero on a wide window without swamping a narrow one — 64→140px logo, 23→48px wordmark. */ .wc-logo { width:clamp(96px, calc(11vw / var(--ui-scale)), 140px); height:clamp(96px, calc(11vw / var(--ui-scale)), 140px); display:block; margin:0 auto; filter:drop-shadow(var(--logo-glow)); } .wc-name { font-size:clamp(34px, calc(4.4vw / var(--ui-scale)), 48px); letter-spacing:.16em; color:var(--accent-hi); margin-top:18px; line-height:1; } .wc-tag { font-size:clamp(13px, calc(1.5vw / var(--ui-scale)), 16px); letter-spacing:1.5px; margin-top:12px; color:var(--text-hi); } /* (.wc-tag2 — the explanatory second line — was dropped 2026-07-28: clutter on a welcome screen. That copy belongs in the documentation.) */ .wc-drop { display:flex; align-items:center; gap:9px; font-size:12px; border:1px dashed var(--border); padding:9px 16px; } .wc-drop-i { font-size:16px; color:var(--accent-ink); } .wc-recent { width:min(560px, 100%); border:1px solid var(--border); background:var(--bg-inset); } .wc-recent-h { background:var(--bg-header); color:var(--header-ink); font-size:9px; letter-spacing:2px; padding:3px 8px; border-bottom:1px solid var(--border); } .wc-recent-empty { padding:8px 10px; font-size:11px; color:var(--text-dim); } .wc-recent-row { display:flex; justify-content:space-between; gap:12px; width:100%; background:none; border:0; border-bottom:1px solid var(--border-control); color:var(--text); font:inherit; font-size:11px; padding:5px 10px; text-align:left; cursor:pointer; } .wc-recent-row:hover { background:var(--bg-header); } /* Columns: the name takes the slack; format/size, source and date are fixed widths so they line up down the list. */ .wc-recent-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; } .wc-recent-meta { color:var(--text-dim); flex:0 0 118px; font-size:10px; letter-spacing:.5px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .wc-recent-when { color:var(--text-dim); flex:0 0 74px; text-align:right; } .wc-recent-src { color:var(--text-dim); flex:0 0 46px; font-size:10px; letter-spacing:1px; text-transform:uppercase; text-align:left; } .wc-recent-foot { padding:6px 10px; text-align:right; } .wc-cols { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; } .wc-card { flex:1 1 260px; min-width:230px; background:var(--bg-inset); border:1px solid var(--border); } .wc-h { background:var(--bg-header); color:var(--header-ink); font-size:9px; letter-spacing:2px; padding:3px 8px; border-bottom:1px solid var(--border); } .wc-b { padding:8px 10px; font-size:11px; line-height:1.65; color:var(--text-dim); } .wc-b b { color:var(--text); font-weight:normal; } .wc-foot { font-size:10px; opacity:.5; } /* The welcome box owns its own layout — the dropzone is just its frame. */ #dropzone.show { display:flex; align-items:center; justify-content:center; } /* ── STATUS BAR ─────────────────────────────────────────── */ #statusbar { height:var(--status-h); background:var(--bg-status); border-top:1px solid var(--seam); padding:0 10px; font-size:11px; color:var(--status-ink); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; } /* setStatus() interpolates the song name and the loaded filename, both of which can be 30,000 chars from a Win MED file. The bar is a fixed-height flex row, so an unclamped child distorts it; min-width:0 is required for a flex item to be allowed to shrink below its content width. */ #status-msg { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ── LOADING ────────────────────────────────────────────── */ /* Top of everything: a blocking loader must cover the menus (1000) too. */ #loading { display:none; position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:2000; align-items:center; justify-content:center; flex-direction:column; gap:14px; color:var(--accent-ink); font-size:13px; letter-spacing:2px; } #loading.show { display:flex; } .spin { width:28px; height:28px; border:3px solid var(--accent-dim); border-top-color:var(--accent-hi); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* ── SCROLLBARS ─────────────────────────────────────────── */ ::-webkit-scrollbar { width:11px; height:11px; } ::-webkit-scrollbar-track { background:var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:6px; border:2px solid var(--bg-inset); } ::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-thumb-hover); } /* The box where the H and V scrollbars meet — unstyled it renders as a stark white square. Match the track so it disappears into the chrome. */ ::-webkit-scrollbar-corner { background:var(--scrollbar-track); } /* Right-click context menu (pattern editor ops + their key chords). */ #ctx-menu { position:fixed; z-index:1000; min-width:var(--d-ctx-minw); padding:var(--d-menu-pad); background:var(--bg-menu); border:1px solid var(--border); border-radius:5px; box-shadow:0 6px 20px var(--scrim-soft); font-size:11px; user-select:none; } .ctx-item { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:var(--d-menuitem-pad); border-radius:3px; cursor:pointer; color:var(--menu-ink); white-space:nowrap; } .ctx-item:not(.disabled):hover { background:var(--menu-hi-bg); color:var(--menu-hi-ink); } .ctx-key { color:var(--menu-ink-dim); font-size:10px; letter-spacing:0.3px; } .ctx-item:not(.disabled):hover .ctx-key { color:var(--menu-hi-key); } /* Unavailable commands stay visible and greyed, reason in the tooltip — same rule as the menu bar. */ .ctx-item.disabled { color:var(--menu-ink-dim); cursor:default; } .ctx-item.disabled .ctx-key { color:var(--menu-ink-off); } .ctx-sep { height:1px; background:var(--sep); margin:4px 6px; } /* THE FLYOUT is the same box as its parent, appended to so it can escape the parent's bounds, and one z-index above it. Everything inside is a .ctx-item already, so it inherits every row rule above without repeating one of them. */ /* ═══ SAMPLE-OPERATION PARAMETER DIALOG ═══════════════════════════════ A short form, so it is sized by its content rather than pinned to the wide default .sd-dialog width. The label column is fixed so four rows of different label lengths still line their controls up. */ .sd-dialog.sop-dialog { width:min(340px, calc(94vw / var(--ui-scale))); } /* THE NOTE FITS THE WINDOW. Phil, 2026-08-31: "can the explanatory text fit the width of the window?" It could not: MEASURED computed margin on #sop-note was 2px 0 12px 112px - the shared .fr-help default leaking in, the SAME failure this file already documents for #ipr-loopnote a few hundred lines down. 112px of indent inside a 253px body left the sentence 141px to live in, so it stacked up three lines deep against the left edge of nothing. The dialog is a column of label/control pairs, not an indented form, so the note belongs at the same left edge as everything else in it. */ .sop-dialog .fr-help { margin-left:0; } /* THE RESPONSE CURVE inside a sample-operation dialog. Full width, no label column: the picture is the label, and a 96px gutter beside a graph is just a graph that is 96px too narrow. The height is fixed so the dialog does not resize as parameters change - things have a fixed place. */ /* .sop-row.sop-curverow, not .sop-curverow: the bare class lost to .sop-row's display:flex below at equal specificity, so the canvas and its caption sat SIDE BY SIDE and the caption was ellipsised to whatever width the canvas left - Phil, 2026-09-02: "text about the tap count to the right of the graph which is mostly truncated". Under the graph is where it was meant to be. */ .sop-row.sop-curverow { display:block; margin:2px 0 10px; } .sop-curve { display:block; width:100%; height:76px; border:1px solid var(--border); background:var(--bg-inset); border-radius:var(--radius-control); } /* Two lines reserved, so a long caption (the echo ladder's) wraps rather than being cut, and the dialog keeps one height whatever it says. */ .sop-curvecap { font-size:10px; color:var(--text-dim); margin-top:3px; white-space:normal; overflow:hidden; min-height:2.5em; max-height:2.5em; line-height:1.25em; } .sop-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; } /* A HIDDEN ROW KEEPS ITS PLACE. The builder hides a field that does not apply (the Filter's upper frequency for a low or high pass) with the `hidden` attribute; the flex rule above would beat the attribute's display:none, and display:none would let the rows below jump up - the dialog resizing as a type changes, which is the thing a fixed place forbids. Invisible, in situ. */ .sop-row[hidden] { display:flex; visibility:hidden; } /* The preview strip under the fields: a play/stop button, a loop box and a one-line status, in the dialog's own dim text. */ .sop-preview { display:flex; align-items:center; gap:10px; margin:4px 0 8px; } .sop-pv-loop { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text-dim); } .sop-pv-status { font-size:10px; color:var(--text-dim); } .sop-lbl { flex:0 0 148px; color:var(--text-dim); font-size:11px; letter-spacing:0.5px; } .sop-in { flex:0 1 auto; width:84px; } .sop-in[type="checkbox"] { width:auto; } select.sop-in { width:auto; max-width:150px; } /* The unit sits with the value, not with the label — "300 ms" reads as one thing, and these are ported numbers where the unit is the whole story. */ .sop-unit { color:var(--text-dim); font-size:10px; letter-spacing:0.5px; } /* The dialog's text and preset-button rows (Change pitch, Time stretch). */ .sop-text { font-size:10px; color:var(--text-dim); letter-spacing:.3px; } /* A button row wraps as a whole: the label takes only its width and the buttons flow after it, onto a second line when five will not fit 340px. */ .sop-row.sop-btnrow { flex-wrap:wrap; } .sop-btnrow .sop-lbl { flex:0 0 auto; } .sop-btnrow .sop-lbl:empty { display:none; } .sop-btns { display:contents; } .sop-btns .btn { padding:1px 7px; font-size:10px; min-width:0; } .sop-say { font-size:10px; color:var(--text-dim); margin-left:6px; } .sd-dialog.swe-dialog { width:min(430px, calc(94vw / var(--ui-scale))); } /* 100px, not 72 (2026-09-27). Three dialogs share this column -- WAM Sample Effect, CDP Sample Effect and Generate with CDP -- and at 72 their longest labels broke in two at the SHIPPED font and size: "Processing rate" wants 97.2px, "Output tuning" 84.2, "Duration (s)" 77.8. 100 clears all three, and matches .voc-dialog's 96px next door. The control beside it is flex:1, so it gives up the 28px. */ /* FIRST label only: it is the row's field name and wants the column. A row can carry more label+control pairs inline (Rate / Depth / Channels), and giving those the column too pushed that row 11px past its width. They keep their text width. */ .swe-dialog .fr-row > label:first-child { width:100px; flex:0 0 100px; } .swe-dialog input[type="range"] { flex:1; } .swe-dialog select { flex:1; min-width:0; } .swe-dialog .fr-help { margin-left:0; } .swe-dialog #swe-plugin-info { margin-bottom:12px; } .swe-dialog #swe-note { min-height:18px; } .swe-chain { min-height:32px; max-height:150px; overflow:auto; margin:8px 0 12px; border:1px solid var(--border-control); padding:4px; } .swe-chain-row { display:flex; align-items:center; gap:6px; padding:4px; border-bottom:1px solid var(--sep); cursor:grab; } .swe-chain-row:last-child { border-bottom:0; } .swe-chain-row.bypassed { opacity:.55; } .swe-chain-name { flex:1; } .swe-gui { max-height:180px; overflow:auto; margin:8px 0; } /* The freeform '$DATA' block five generators take (a chord's notes, a click track's times, an additive spectrum). Monospace because every one of them is whitespace-delimited numbers the user is lining up by eye. */ .cgn-text-row { align-items:flex-start; } .cgn-text-row textarea { flex:1; min-width:0; resize:vertical; font-family:var(--font-text); font-size:11px; } /* [hidden] IS NOT ENOUGH ON ITS OWN, for the reason .set-panel[hidden] gives further down: the UA's `display:none` for [hidden] loses to any class rule that sets a display, and .fr-row sets `display:flex`. Eleven of the sixteen generators take no $DATA, and without these two rules every one of them showed an empty Data box (measured 2026-09-07). */ .cgn-text-row[hidden] { display:none; } #cgn-text-help[hidden] { display:none; } .swe-wave-wrap { position:relative; width:100%; } .swe-wave { display:block; width:100%; height:90px; background:var(--bg-inset); border:1px solid var(--border-control); margin:8px 0; } .swe-wave-head { position:absolute; top:1px; bottom:1px; left:0; width:2px; background:var(--accent-hi); box-shadow:0 0 5px var(--accent-hi); pointer-events:none; display:none; } /* ── Vocoder window ──────────────────────────────────────────────────── The sample-effect shell above, with a wider label column. .swe-dialog names its rows after plugin parameters and 72px is plenty for those; this window names them after what they DO ("Modulator", "Tuning"), and at 72px the longest of those clipped. Wider dialog for the same reason — it carries two source pickers, three pitch rows and a destination. ONLY label[for] TAKES THE COLUMN. The Normalise checkbox sits inside its own