/* ===================================================================== * MODELS — the panel, and the readout * ===================================================================== * * The chrome is Keyboard Designer's, token for token: the same palette, the * same rail and drawer, the same fieldsets, segmented buttons, scopes and * checkboxes. The two apps share a synth and a notation engine, and a control * that looks different in each would suggest it does something different. * * What is Models' own is everything under "the readout" at the foot of this * file — the notation panel, which has no counterpart there. * ------------------------------------------------------------------ */ :root { /* Night mode is the Notation app's chrome, token for token: neutral greys rather than the blue-black the panel used to be drawn in, and the one #007bff blue that app uses for "this is the one that is true". The three apps sit side by side, and a panel that is tinted in one and not the others reads as a different panel. The VIEW's own ground (--bg) is not part of the chrome and is left as it was. */ --bg:#15161a; --panel:#1a1a1a; --panel2:#2a2a2a; --panel-bright:#343434; --line:#555; --text:#fff; --dim:#9a9aa4; --accent:#007bff; --warn:#ffb454; --ok:#79d18b; --scope-bg:#12161c; } /* ---------- day mode ---------- Keyboard Designer's own arrangement, token for token: when the VIEW is drawn on white, the rail and the drawer go light with it. A dark panel against a white viewport is a bezel with a lamp behind it — the eye adapts to the larger surface, and the panel then reads as a hole. Everything in the chrome reads off these custom properties, so overriding them in scope recolours the whole subtree without a second stylesheet. The class is put on by applyBrightMode in ui-handlers.js, which asks the THEME what ground it is drawn on — one switch at the foot of the rail, rather than a property of whichever colour ramp happens to be picked. */ body.bright #panel, body.bright #loading-overlay{ --bg:#e9e9ec; --panel:#f2f2f4; --panel2:#e4e5e9; --panel-bright:#d8d9de; --line:#c9cad0; --text:#1b1c20; --dim:#5c5d66; --accent:#1f6feb; --scope-bg:#dcdde2; } /* The two lit states are drawn against a light panel now, so the dark-mode fills that carried them would read as ink blots. The segmented buttons are NOT in this list. Day mode used to give a lit segment a white fill, which lifted it above its neighbours — the opposite of what the same control does in Keyboard Designer, where --panel-bright is DARKER than --panel2 and the lit segment is the recessed one. It now reads the token like everything else, so the lit segment presses in on both grounds rather than popping out on one and in on the other. */ body.bright #playButton.play-button-active, body.bright button.latched, body.bright button.primary{background:#dbe7f7;border-color:#9dbde6;color:#12325e} body.bright button.primary:hover{border-color:var(--accent);color:#0b2a52} /* The readout floats over the VIEW rather than living in the panel, so it follows the view's ground rather than the panel's. */ body.bright #notation-display{background:rgba(255,255,255,.92); border-color:#c9cad0;color:#1b1c20} *{box-sizing:border-box} /* Same Inter the Notation app is set in, so the three apps read as one. */ @font-face{font-family:"Inter";src:url("fonts/inter.ttf") format("opentype")} html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text); font:13px/1.45 "Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif} button,input,select,textarea{font-family:inherit} /* ---------- fonts ---------- The same five faces Keyboard Designer loads, and for the same reason: a name spelled by the shared engines is drawn from the glyphs those engines were written against. */ @font-face{font-family:"HEJI2";src:url("fonts/HEJI2.otf") format("opentype")} @font-face{font-family:"HEJIExtensions2022";src:url("fonts/HEJIExtensions2025-Text.ttf") format("opentype")} @font-face{font-family:"Bravura";src:url("fonts/Bravura.woff2") format("woff2");font-display:block} @font-face{font-family:"EdoAccidentals";src:url("fonts/notes.otf") format("opentype")} #app{display:flex;height:100%;min-height:0} /* ---------- side rail + drawer ---------- */ #panel{display:flex;overflow:hidden;background:var(--panel); border-right:1px solid var(--line); width:61px;min-width:61px;flex:0 0 auto;transition:width .14s ease,min-width .14s ease} #panel.open{width:340px;min-width:340px} .rail{width:60px;flex:0 0 auto;border-right:1px solid var(--line); padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:8px} .rail-btn{position:relative;width:42px;height:42px;padding:0;display:grid; place-items:center;color:var(--dim);border-radius:9px;cursor:pointer; background:transparent;border:1px solid transparent} .rail-btn>*{pointer-events:none} .rail-btn:hover{color:var(--text);background:var(--panel2)} .rail-btn[aria-expanded="true"]{color:var(--text);background:transparent; box-shadow:inset 0 0 0 1px var(--accent)} .rail-icon{width:24px;height:24px} .rail-icon.rail-icon-diagonal{transform:rotate(-45deg)} /* The info link sits at the foot of the rail rather than in the run of modes: it is not a mode, and it leaves the app. The theme toggle sits under it for the mirror reason — it is not a mode either, and it is about the whole window rather than about anything in a drawer. */ #info-link{margin-top:auto;text-decoration:none} /* ---- the night/day toggle ---- Both glyphs are in the markup and one is shown at a time, rather than one glyph being swapped by script: no icon flashes in on first paint, and the rule that decides which is showing lives beside the rule that draws them. The icon shows the STATE, not the action — a crescent while the app is dark, a sun while it is light. That is the reading every phone uses, and the opposite convention (show what you will GET) is only legible if you already know which convention you are looking at. */ #theme-toggle .theme-icon{grid-area:1/1} #theme-toggle .light-icon{display:none} html[data-theme="light"] #theme-toggle .dark-icon{display:none} html[data-theme="light"] #theme-toggle .light-icon{display:block} .panel-body{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0} .drawers{flex:1;min-height:0;overflow-y:auto} .drawer{padding:14px 16px 20px} .drawer.hidden{display:none} /* ---------- the two presses under every drawer ---------- */ .panel-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:10px 16px; display:grid;grid-template-columns:1fr 1fr;gap:7px;background:var(--panel)} /* With Play gone in the two gestural modes, the readout takes the whole width rather than sitting in half of a two-column grid with a gap where a button used to be. */ body[data-mode="triads"] .panel-foot, body[data-mode="dyads"] .panel-foot{grid-template-columns:1fr} /* ---------- which app you are in ---------- Pinned above the drawers and given the panel's own ground, so it reads as part of the frame rather than as the first control of whichever drawer happens to be open. It is not a setting of anything below it: it decides what all four drawers are about. Three across the panel's width now rather than two, so the padding comes down a little; the weight stays, because this row has to outrank every seg in the drawers under it. */ .mode-switch{flex:0 0 auto;padding:11px 16px 0;background:var(--panel)} .mode-switch .seg{margin-bottom:11px} .mode-switch .seg button{padding:6px 4px;font-size:12px;font-weight:600} /* Anything belonging to the mode you are not in. Marked rather than removed, so a control keeps its value across a switch and comes back set the way you left it. */ .mode-off{display:none !important} /* And the same again one level down: a control that belongs to this mode but has nothing to act on under the setting currently chosen. Separate from mode-off so the two can be true at once without either clearing the other — Dyads' Curve fieldset is hidden by this when the measure has no curve, and by mode-off whenever another mode is up. */ .no-curve{display:none !important} /* ---------- the stage ---------- Four panes and one attribute deciding which are up. Laid out rather than swapped, so "Both" is the same two panes at half the width and not another arrangement that has to be kept working separately. */ #main{flex:1;position:relative;min-width:0;display:flex;flex-direction:column} /* No gap: the 1px of stage background that used to show between the panes drew a rule down the middle of "Both", and the two panes read better butted together — the flat triangle and the lifted one are the same surface twice, not two documents. The background stays for the moment before either pane has painted. */ #stage{flex:1;min-height:0;display:flex;gap:0;background:var(--line)} #stage > *{display:none;min-width:0;position:relative;overflow:hidden} #stage[data-view="tetra"] #container{display:block;flex:1} #stage[data-view="dyad"] #dyad-pane{display:block;flex:1} #stage[data-view="topo"] #triad-topo-pane{display:block;flex:1} #stage[data-view="3d"] #triad-3d-pane{display:block;flex:1} #stage[data-view="both"] #triad-topo-pane, #stage[data-view="both"] #triad-3d-pane{display:block;flex:1 1 50%} /* ---------- the stage on a phone held upright ---------- Side by side is a landscape arrangement: two panes across a 390px screen are two strips, and neither is worth looking at. Upright they stack instead, and the order is thumb-first — the flat triangle, which is the one you PLAY by touching, takes the bottom half where the thumbs already are, and the lifted surface, which you read rather than touch, takes the top. Turned on its side the phone is a small desktop and the rule lapses: panes go back to a row with the 3D on the right, as they are everywhere else. Bounded by width as well as orientation so a tall desktop window, which is not a phone and has room for both, keeps the row. */ @media (max-width: 820px) and (orientation: portrait){ #stage{flex-direction:column} #stage > *{min-height:0} #stage[data-view="both"] #triad-3d-pane{order:1} #stage[data-view="both"] #triad-topo-pane{order:2} } #container canvas,#dyad-canvas,#triad-canvas,#triad-3d-pane canvas{display:block} #dyad-canvas,#triad-canvas{width:100%;height:100%;cursor:crosshair} #triad-3d-pane{cursor:crosshair} /* ---------- the foot's readout ---------- What took Update's place. The one thing in the panel that reports rather than sets, so it is dimmed and italic and never looks pressable — and it goes amber while the page is actually busy, which is the only moment a self-applying panel owes the user an explanation. */ #panel-status{display:flex;align-items:center;justify-content:flex-end; color:var(--dim);font-size:11px;font-style:italic; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #panel-status.busy{color:var(--warn);font-style:normal} /* Alone in the foot when Play is gone, it reads better from the left. */ body[data-mode="triads"] #panel-status{justify-content:flex-start} #loading-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85); display:flex;justify-content:center;align-items:center; font-family:monospace;font-size:1.6em;z-index:100} /* ---------- panel furniture ---------- */ h1{font-size:15px;margin:2px 0 12px;color:var(--text);font-weight:600} h1 small{color:var(--dim);font-weight:400} fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 12px;padding:9px 11px} legend{color:var(--dim);font-size:10.5px;font-weight:400;letter-spacing:.03em;padding:0 6px} label{display:block;color:var(--dim);font-size:11px;margin:7px 0 3px} select,input[type=number],input[type=text]{width:100%;background:var(--panel2);color:var(--text); border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12.5px} select:focus,input:focus{outline:1px solid var(--accent);outline-offset:-1px} button{background:var(--panel2);color:var(--text);border:1px solid var(--line); border-radius:6px;padding:6px 8px;font-size:11.5px;cursor:pointer} button:hover{border-color:var(--accent);color:var(--accent)} button.primary{background:#24405c;border-color:#35608a;color:#cfe6ff;font-weight:600} button.primary:hover{border-color:var(--accent);color:#fff} /* Latched on: the same lit state a segmented button gets, because it is the same fact — this is the thing that is currently true. Play and Rotate Continuously are both switches that stay down, so they look alike. */ #playButton.play-button-active, button.latched{background:#24405c;border-color:var(--accent);color:#cfe6ff} #autoRotate{width:100%;margin-top:8px} .hint{color:var(--dim);font-size:10.5px;margin-top:6px} .symbol{font-family:Arial,sans-serif} .tune-h{display:block;color:var(--text);font-weight:600;font-size:11.5px;margin:10px 0 5px} .tune-h:first-child{margin-top:0} /* ---------- segmented buttons ---------- Keyboard Designer's, rule for rule. The two apps share this whole chrome, and a control that looks different in each would suggest it does something different — which is the argument that put the palette, the rail and the drawer here in the first place, and it applies hardest to the one control that appears in every drawer of both. WHICH ONE IS ON IS SAID TWICE, BY THE STRIP AND BY A LINE UNDER IT. The lit segment is lifted to --panel-bright and carries a 2px accent rule along its bottom edge. It used to be ringed instead — an inset accent border on all four sides — which drew a box INSIDE a box: the group already has an outline of its own, so a second one a pixel in read as a rendering fault rather than as a state. An underline has no such competition, and it sits where a tab's indicator sits, which is the thing this control most nearly is. THE UNLIT SEGMENTS ARE NOT DIMMED. They used to be --dim, on the reasoning that off should be quieter than on. But these are all live choices, equally available and equally readable, and greying them made a four-way switch look like one live button beside three disabled ones. The lift and the underline are already the whole of the difference; taking the labels down as well was a third statement of it, and the one that cost legibility to make. */ .seg{display:flex;gap:0;margin:0 0 9px;flex-wrap:wrap} .seg button{flex:1 1 0;min-width:0;border-radius:0;padding:4px 6px;font-size:11px; border-left-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .seg button:first-child{border-radius:6px 0 0 6px;border-left-width:1px} .seg button:last-child{border-radius:0 6px 6px 0} .seg button.on{background:var(--panel-bright);color:var(--text); box-shadow:inset 0 -2px 0 var(--accent)} .seg button:hover{color:var(--accent)} /* Six readouts do not fit one row legibly, so this one is allowed to wrap and every button keeps its own corners rather than pretending to be a strip. */ .seg.wrap button{flex:1 1 30%;border-left-width:1px;border-radius:6px;margin:0 3px 3px 0} /* ---------- stacked action buttons ---------- The reference app's Export idiom: a grid of full-width presses, each one saying what it saves and in what. */ .btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px} .btns .wide{grid-column:1/-1;padding:8px} /* A shortcut, said beside the control it belongs to rather than only in the README — these were key commands before they were buttons. */ .key-hint{float:right;color:var(--dim);font-weight:400;font-size:10px; font-family:Arial,sans-serif;letter-spacing:.04em} /* ---------- the colour layouts ---------- Six chips in two columns, filled row by row: five perceptually uniform ramps and then Constant, which is not a ramp. The grid used to run DOWN one column before starting the next, because the two columns were the two GROUNDS — a dark set and a bright set, twelve chips for what is really two decisions. The ground is the theme now, one switch at the foot of the rail, so there is nothing for a column to mean and the ordinary reading order is the right one. A chip is still drawn on the ground the scene is drawn on, because a ramp read against black and the same ramp read against paper are genuinely different pictures — and on paper the ramps are sampled backwards, which the chip shows rather than describes. */ .maps{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 9px} /* align-items and an explicit width because this is a