/* ===================================================================================================================== PATRICK plugin layout (docs/plugin-layout-plan.md, sections b, c, d and h). Loaded after app.css; EVERY rule is scoped under html.host-plugin (js/host.js sets it from window.__PLUGIN__ or ?plugin=1 before any CSS applies), so the web page without the flag is untouched. Fixed logical 1440x810 frame (the host zooms it by width / 1440). Header 48 | stage 720 | deck 42. THE GRID (h.a): stage inner 1412 x 704 (padding 8 / 14). 6 columns of 227, 17 row units of 32, gaps 10. A cell of n units is 42n - 10 tall: S 4u 158, M 6u 242, L 8u 326, XL 10u 410, XXL 12u 494, Column 16u 662 (under a head row) / 17u 704; one Hero cell per column takes the remainder. The sub-tab row (VOICES, MOD) and the FX signal-path line are exactly one unit. Every cell is placed by grid-column / grid-row on the same 6 x 17 tracks: nothing free-form, nothing scrolls but the Library's patch grid and the Help body. KNOBS (h.c): K1 40 / K2 48 / K3 56 / HERO 72 in 60 / 68 / 76 / 92 px grab cells; row = dial + 34 (label 14 + value box 20: the value box is where the knob-fix type-in field opens). A short row spreads its controls (space-between). ANATOMY (h.d): border 2, padding 4 / 8, head 20, rule 2 px at 4 px under the head, then --head-gap 12 clear: the first control sits 42 px under the cell's top edge in every cell (54 in an FX card, whose rack head is 32). SLOTS (h.e): every cell animation is a canvas in a slot of fixed height at full inner width: meter 16, strip 40, panel 96, banner 148, hero (the rest of the cell). ui.js redraws each at round(css x DPR x s) (CV); nothing is stretched. Design rules: OLED black, square, no shadow / blur / glow, coin palette (tokens only), mask fades only, the zoo shows through transparent plates. Text floor 11 px, hit floor 32 px. ===================================================================================================================== */ /* ---------- 0. tokens ---------- */ html.host-plugin #frame { --hit: 32px; --cell-pad: 8px; --cell-gap: 10px; --ctl-gap: 6px; --page-gutter: 14px; --tab-h: 36px; --led: 8px; --knob: 56px; --knob-lg: 72px; --t-label: 11px; --t-value: 12px; --t-h3: 13px; --col-gap: 10px; --u: 32px; --gap: 10px; --col: 227px; --head-gap: 12px; --k1: 40px; --k2: 48px; --k3: 56px; --khero: 72px; --valbox: 20px; --slot-meter: 16px; --slot-strip: 40px; --slot-panel: 96px; --slot-banner: 148px; } html.host-plugin #frame > * { --cell-pad: 8px; --cell-gap: 10px; --knob: 56px; --knob-lg: 72px; --hit: 32px; } /* (over the frame bands' #frame > * values) */ /* ---------- 2. the stage and the grid ---------- */ html.host-plugin #pages { padding: 8px 14px; overflow: hidden; --fade-b: 0px; --fade-t: 0px; } html.host-plugin #pages.pf { -webkit-mask-image: none; mask-image: none; } html.host-plugin .stage-fade { display: none; } html.host-plugin #pages > .page.on, html.host-plugin #pages.pin-lib > .page.patrick.on { display: grid; grid-template-columns: repeat(6, var(--col)); grid-template-rows: repeat(17, var(--u)); gap: var(--gap); height: 704px; min-height: 0; align-content: start; grid-template-areas: none; grid-auto-rows: var(--u); padding: 0; } html.host-plugin #pages > .page.on > .plate { min-width: 0; min-height: 0; grid-area: auto; height: auto; width: auto; margin: 0; } html.host-plugin #pages .subtabs { grid-column: 1 / -1; grid-row: 1; display: flex; gap: 4px; flex-wrap: nowrap; min-height: 0; height: var(--u); margin: 0; } /* the head row: exactly one unit */ html.host-plugin #pages .subtabs .tab { height: var(--u); min-height: 0; min-width: 0; padding: 0 10px; font-size: 11px; } /* plate paragraphs and the two diagrams: Help has them (plan g.8) */ html.host-plugin #pages :is(.plate-note, .life-note, .xdiag) { display: none; } /* ---------- 3. cells: the common anatomy (h.d) ---------- */ html.host-plugin #pages .plate { padding: 4px 8px; overflow: hidden; } html.host-plugin #pages .plate-head { margin-bottom: 16px; min-height: 20px; gap: 4px 8px; } /* 4 to the rule + 2 rule + 12 head gap */ html.host-plugin #pages .plate-head::after { bottom: -4px; } html.host-plugin #pages .plate-head .mark { width: 16px; height: 16px; } html.host-plugin #pages .plate-head h2 .ttl { font-size: 13px; } html.host-plugin #pages .plate-body { gap: 6px; justify-content: flex-start; overflow: visible; } html.host-plugin #pages .row { row-gap: 6px; column-gap: 6px; justify-content: space-between; align-items: flex-start; } html.host-plugin #pages .row > div:empty:not([class]) { display: none; } /* ui.js's gap() spacers: the spread does the spacing */ html.host-plugin #pages .rowlabel { width: 16px; font-size: 14px; padding-top: calc(var(--dial, var(--k3)) / 2 - 8px); } /* a packed cell: its DOM rows flow as one wrapped row, so 10 controls pack as 5 + 5 and a seg joins a knob line */ html.host-plugin #pages .plate.packed > .plate-body { flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: space-between; gap: 6px; } html.host-plugin #pages .plate.packed > .plate-body > .row { display: contents; } html.host-plugin #pages .plate.packed > .plate-body > .row.keep { display: flex; flex: 1 0 100%; } html.host-plugin #pages .plate.packed > .plate-body > :is(canvas, .segctl.wide) { flex: 1 0 100%; } /* knobs (h.c): K3 by default, K2 / K1 per cell (the class on the plate, set by ui.js PLUG), HERO once; labels 11 px on one line, the value box 20 px as wide as the grab cell */ html.host-plugin #pages :is(.ctl, .sw), html.host-plugin #pages :is(.ctl, .sw):is(.s, .xs, .huge) { --dial: var(--k3); width: calc(var(--dial) + 20px); } html.host-plugin #pages .plate.k2 :is(.ctl, .sw), html.host-plugin #pages .plate.k2 :is(.ctl, .sw):is(.s, .xs, .huge) { --dial: var(--k2); } html.host-plugin #pages .plate.k1 :is(.ctl, .sw), html.host-plugin #pages .plate.k1 :is(.ctl, .sw):is(.s, .xs, .huge) { --dial: var(--k1); } html.host-plugin #pages .plate.khero :is(.ctl, .sw), html.host-plugin #pages .plate.khero :is(.ctl, .sw):is(.s, .xs, .huge) { --dial: var(--khero); } html.host-plugin #pages :is(.ctl, .sw) .lab { font-size: 11px; line-height: 12px; margin-top: 2px; letter-spacing: 0; white-space: nowrap; max-width: none; } /* one line: the row is dial + 34 in every preset */ html.host-plugin #pages :is(.ctl, .sw) .val { font-size: 12px; line-height: var(--valbox); min-height: var(--valbox); height: var(--valbox); } html.host-plugin #pages .plate.khero .ctl .val { font-size: 13px; } html.host-plugin #pages .dial .disc { stroke-width: 1.3; } html.host-plugin #pages .dial :is(.ptr, .arc, .trk) { stroke-width: 2.1; } /* the type-in field (knob-fix, main 047a014): it opens in the value box without moving the dial; in the plugin it is a 32 px target (the hit floor) over the label and the value box, 12 px text, never outside the grab cell's row */ html.host-plugin #pages :is(.ctl, .fader) { position: relative; } html.host-plugin #pages .ctl.editing .val-in { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 32px; font-size: 12px; line-height: 30px; z-index: 2; } html.host-plugin #pages .ctl.editing .lab { visibility: hidden; } html.host-plugin #pages .ctl.editing .val { display: block; visibility: hidden; } /* (the value box keeps its 20 px: the dial never moves) */ /* pictos, segments, pills, selects: 32 px, 11 px caps */ html.host-plugin #pages .picto { gap: 2px; } html.host-plugin #pages .picto button { padding: 3px; } html.host-plugin #pages .picto.n7 { grid-template-columns: repeat(4, var(--hit)); } html.host-plugin #pages .pictoctl { padding-top: 0; } html.host-plugin #pages .pictoctl .lab { margin-top: 3px; font-size: 11px; } html.host-plugin #pages .segctl { gap: 2px; } html.host-plugin #pages .segctl .lab { font-size: 11px; line-height: 12px; } html.host-plugin #pages .seg button { padding: 0 7px; min-width: 32px; height: 32px; min-height: 32px; } html.host-plugin #pages .pill { padding: 0 8px; min-height: 32px; } html.host-plugin #pages select.sel { min-height: var(--hit); padding: 0 20px 0 7px; } /* ---------- slots (h.e): every cell animation is a canvas at full inner width and a fixed height (ui.js PLUG takes the web's inline sizes off them; CV draws each at round(css x DPR x s), never stretched) ---------- */ html.host-plugin #pages canvas[data-slot] { display: block; width: 100%; min-width: 0; max-width: none; max-height: none; height: var(--slot-h, var(--slot-strip)); margin: 0; aspect-ratio: auto; flex: none; } html.host-plugin #pages canvas[data-slot="meter"] { --slot-h: var(--slot-meter); } html.host-plugin #pages canvas[data-slot="strip"] { --slot-h: var(--slot-strip); } html.host-plugin #pages canvas[data-slot="panel"] { --slot-h: var(--slot-panel); } html.host-plugin #pages canvas[data-slot="banner"] { --slot-h: var(--slot-banner); } html.host-plugin #pages canvas[data-slot="none"] { display: none; } /* (a scene with no room on its cell: Help keeps it) */ html.host-plugin #pages .plate-body > canvas[data-slot="banner"], html.host-plugin #pages .plate-body > canvas[data-slot="panel"] { order: -1; } /* the scene at the top of the cell, right under the head gap */ /* ---------- 1. header (P1): one 36 px row, 48 tall; the coin hugs the left (its edge on the stage's 14 px margin, Benjamin 13:41); the full-screen button is hidden inside the editor (the host owns the window), shown on the PC web page; "MIDI: host" (ui.js) ---------- */ html.host-plugin #bar { --hit: 36px; padding: 6px 14px; gap: 4px; min-height: 0; height: 48px; flex-wrap: nowrap; box-sizing: border-box; } html.host-plugin #bar .brand { gap: 6px; margin: 0; padding: 0; flex: none; } html.host-plugin #bar .logo { width: 36px; height: 36px; margin: 0; } html.host-plugin #bar #tabs { gap: 4px; flex-wrap: nowrap; margin-left: 6px; } html.host-plugin #bar .tab { height: 36px; min-height: 0; min-width: 36px; padding: 0 9px; } html.host-plugin #bar .tab .ttl { font-size: 12px; } html.host-plugin #bar .ticker { height: 36px; flex: 0 1 var(--name-w, 200px); padding: 0 10px; } html.host-plugin #bar .minispec { height: 36px; min-width: 120px; } html.host-plugin #bar #stat-midi { height: 36px; padding: 0 8px; } html.host-plugin #bar .hbtn.icon { height: 36px; width: 36px; } html.host-plugin.host-real #bar #btn-full { display: none; } /* (inside the VST editor only: the PC web page, ?plugin=1 in a browser, keeps it: a browser window can go full screen) */ html.host-plugin .lbl { display: inline-block; } /* (a tab / chip / rig label: a box of its own so ui.js can nudge it by its ink, see inkNudge) */ /* ---------- 4. the deck (P1): the 32 px perf row only, 42 tall; KEYS opens the mini keyboard as a drawer over the stage's bottom 84 px (the stage does not re-flow, so nothing scrolls); the stage under it fades out by its own mask ---------- */ html.host-plugin #deck { --play-h: 84px; padding: 4px 14px 6px; height: 42px; box-sizing: border-box; } html.host-plugin #deck .deck-row { gap: 6px; height: 32px; } html.host-plugin #deck .perf { gap: 4px; } html.host-plugin #deck .ribbon { height: 32px; min-height: 32px; flex-basis: clamp(90px, 20vw, 220px); } /* UPGRADE */ html.host-plugin #deck :is(.perf button, .hbtn) { min-height: 32px; height: 32px; } html.host-plugin #deck .pkb { padding: 0 8px 0 22px; } html.host-plugin #deck .pkb .lamp { left: 7px; width: 8px; height: 8px; margin-top: -4px; } html.host-plugin #deck .octro { padding: 0 8px; gap: 4px; } html.host-plugin #deck .oct-ro { font-size: 12px; } html.host-plugin #deck .hbtn { padding: 0 9px; } html.host-plugin #deck .deck-play { position: absolute; left: 14px; right: 14px; bottom: calc(100% + 4px); height: var(--play-h); margin: 0; gap: 8px; z-index: 5; transition: none; } html.host-plugin #deck.keys-off .deck-play { height: var(--play-h); visibility: hidden; pointer-events: none; } html.host-plugin #deck .wheel { width: 36px; gap: 2px; } html.host-plugin #deck .wheel .thumb { height: 10px; left: 2px; right: 2px; } html.host-plugin #deck .wheel span { display: none; } /* (84 px: the wheels' captions would take a quarter of it; Help names them) */ html.host-plugin #board:has(#deck:not(.keys-off)) #pages { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 128px), transparent calc(100% - 92px)); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 128px), transparent calc(100% - 92px)); } html.host-plugin #deck #keys .klab { pointer-events: none; } /* (the C labels sit inside the keys at 84 px: a press on one is the key's) */ /* ---------- 6. per-view placement on the 6 x 17 tracks (h.f). Under a head row (sub-tabs, the FX line) cells start on track 2 ---------- */ /* VOICES / ANALOG (P2): A Oscillators XL (K1) + Mixer M | B Filter XXL (banner) + Cross-mod S | C Contours XXL (banner) + Life 1c S + Glide 1c S. Pulse width and Shape env are on SUPER in the plugin (ui.js VIEW_AREAS) */ html.host-plugin #pages .page.analog > .plate[data-area="osc"] { grid-column: 1 / 3; grid-row: 2 / span 10; } html.host-plugin #pages .page.analog > .plate[data-area="mix"] { grid-column: 1 / 3; grid-row: 12 / span 6; } html.host-plugin #pages .page.analog > .plate[data-area="flt"] { grid-column: 3 / 5; grid-row: 2 / span 12; } html.host-plugin #pages .page.analog > .plate[data-area="xm"] { grid-column: 3 / 5; grid-row: 14 / span 4; } html.host-plugin #pages .page.analog > .plate[data-area="env"] { grid-column: 5 / 7; grid-row: 2 / span 12; } html.host-plugin #pages .page.analog > .plate[data-area="life"] { grid-column: 5 / 6; grid-row: 14 / span 4; } html.host-plugin #pages .page.analog > .plate[data-area="gld"] { grid-column: 6 / 7; grid-row: 14 / span 4; } /* Oscillators: the three oscillator rows on one column grid (label | Range | wave | PW | Tune/Detune | Vintage/Follows keys), so 1, 2 and 3 line up whatever each row has; UNI sits under the wave pictos; ui.js's gap() spacers go (the grid does the spacing) */ html.host-plugin #pages .plate[data-area="osc"] > .plate-body { justify-content: space-between; } html.host-plugin #pages .plate[data-area="osc"] .row > div:empty:not([class]) { display: none; } html.host-plugin #pages .plate[data-area="osc"] .row:not(:nth-child(2)) { display: grid; grid-template-columns: 16px 60px 136px 60px 64px minmax(0, 1fr); column-gap: 4px; justify-items: center; align-items: start; } html.host-plugin #pages .plate[data-area="osc"] .row:not(:nth-child(2)) > .rowlabel { justify-self: start; align-self: center; padding-top: 0; } html.host-plugin #pages .plate[data-area="osc"] .row:nth-child(2) { justify-content: flex-start; padding-left: 84px; align-items: flex-start !important; } /* Mixer: OSC 1-3 + NOISE spread; FEEDBACK DRIVE VOLUME + NOISE COLOUR + the VOICE LEVEL meter (inline) */ html.host-plugin #pages .plate[data-area="mix"] .row > div:not([class]) { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 120px; align-self: center; } html.host-plugin #pages .plate[data-area="mix"] .row:last-child { align-items: center !important; } /* Filter: the dunes banner, then CUTOFF EMPHASIS ENV AMT KEY TRACK VEL FILTER VEL AMP SOFT CLIP OVERSAMPLE as one wrapped spread, then HPF + TYPE on their own line */ html.host-plugin #pages .plate[data-area="flt"] > .plate-body { align-content: space-between; } /* Contours: the volcano banner, the F and A rows, VOICES + RELEASE VAR */ html.host-plugin #pages .plate[data-area="env"] > .plate-body { justify-content: space-between; } html.host-plugin #pages .plate[data-area="env"] .row .cap { display: none; } html.host-plugin #pages .plate[data-area="env"] .row:last-child { margin-top: 0 !important; justify-content: space-between; } html.host-plugin #pages .plate[data-area="env"] .polyvoices .seg { flex-wrap: nowrap; } /* Cross-mod: HARD SYNC, SWEEP, RING, FM, FOLD spread */ html.host-plugin #pages .plate[data-area="xm"] .row { width: 100%; } /* Life: the knob + the drift readout beside it (the drift scope: Help has it) */ html.host-plugin #pages .plate[data-area="life"] .life-row { gap: 8px; flex-wrap: nowrap; align-items: flex-start; } html.host-plugin #pages .plate[data-area="life"] .life-side { flex: 1 1 auto; min-width: 0; } html.host-plugin #pages .plate[data-area="life"] :is(.life-side .cap, .life-read) { white-space: normal; overflow-wrap: anywhere; font-size: 11px; line-height: 1.25; } html.host-plugin #pages .plate[data-area="life"] .life-read { min-height: 0; margin-top: 3px; } html.host-plugin #pages .plate[data-area="life"] canvas { display: none; } /* Glide: GLIDE + GLIDES spread */ html.host-plugin #pages .plate[data-area="gld"] .row { width: 100%; } /* VOICES / SUPER (P2): Star oscillator 3c S over the Star scope 3c Hero 12u | Shape env 3c XL (banner) over Pulse width 3c M */ html.host-plugin #pages .page.super > .plate[data-area="star"] { grid-column: 1 / 4; grid-row: 2 / span 6; } /* (M: the six-mode row + seven knobs; the plan's S forgot the mode row) */ html.host-plugin #pages .page.super > .plate[data-area="sco"] { grid-column: 1 / 4; grid-row: 8 / span 10; } html.host-plugin #pages .page.super > .plate[data-area="jenv"] { grid-column: 4 / 7; grid-row: 2 / span 10; } html.host-plugin #pages .page.super > .plate[data-area="pwm"] { grid-column: 4 / 7; grid-row: 12 / span 6; } html.host-plugin #pages .plate[data-area="star"] > .plate-body { align-content: space-between; } html.host-plugin #pages .plate[data-area="star"] > .plate-body > .row.keep { margin: 0 !important; } html.host-plugin #pages .plate[data-area="star"] .starmodes { flex: 1; } html.host-plugin #pages .plate[data-area="star"] .starmodes .seg { display: flex; width: 100%; } html.host-plugin #pages .plate[data-area="star"] .starmodes .seg button { flex: 1; } html.host-plugin #pages .plate[data-area="sco"] canvas[data-slot="hero"] { flex: 1 1 0; min-height: 0; height: auto; } html.host-plugin #pages .plate[data-area="jenv"] > .plate-body { justify-content: space-between; } html.host-plugin #pages .plate[data-area="jenv"] .row { align-items: flex-end; } html.host-plugin #pages .plate[data-area="pwm"] > .plate-body { justify-content: space-between; } /* MOD, sub-tab MOD (P3): A Macros M + LFO XL | B Modulation M + Mod wheel XL | C LFO 2 L + Joystick L. Sub-tab MATRIX (.sub-matrix): Matrix 4c XL + Trapezoid 4c M | Velocity 2c M + MPE (with Bend range's knob) 2c XL */ html.host-plugin #pages .page.mod > .plate { display: none; } html.host-plugin #pages .page.mod:not(.sub-matrix):not(.sub-gch) > .plate:is([data-area="mac"], [data-area="lfo"], [data-area="mod"], [data-area="wh"], [data-area="lfo2"], [data-area="joy"]), html.host-plugin #pages .page.mod.sub-gch > .plate[data-area^="gc"], html.host-plugin #pages .page.mod.sub-matrix > .plate:is([data-area="mtx"], [data-area="cyc"], [data-area="mvel"], [data-area="mmpe"]) { display: flex; } html.host-plugin #pages .page.mod > .plate[data-area="mac"] { grid-column: 1 / 3; grid-row: 2 / span 6; } html.host-plugin #pages .page.mod > .plate[data-area="lfo"] { grid-column: 1 / 3; grid-row: 8 / span 10; } html.host-plugin #pages .page.mod > .plate[data-area="mod"] { grid-column: 3 / 5; grid-row: 2 / span 6; } html.host-plugin #pages .page.mod > .plate[data-area="wh"] { grid-column: 3 / 5; grid-row: 8 / span 10; } html.host-plugin #pages .page.mod > .plate[data-area="lfo2"] { grid-column: 5 / 7; grid-row: 2 / span 8; } html.host-plugin #pages .page.mod > .plate[data-area="joy"] { grid-column: 5 / 7; grid-row: 10 / span 8; } html.host-plugin #pages .page.mod > .plate[data-area="mtx"] { grid-column: 1 / 5; grid-row: 2 / span 10; } html.host-plugin #pages .page.mod > .plate[data-area="cyc"] { grid-column: 1 / 5; grid-row: 12 / span 6; } html.host-plugin #pages .page.mod > .plate[data-area="mvel"] { grid-column: 5 / 7; grid-row: 2 / span 6; } html.host-plugin #pages .page.mod > .plate[data-area="mmpe"] { grid-column: 5 / 7; grid-row: 8 / span 10; } /* GOLDCHAIN (.sub-gch): the PEEK CONTROLLER 2c L+ and the BLING ENVELOPE 2c L+ over STEP-A-LOT 3c and the PEEK-A-BOO DETECTOR 1c (7u each), CHAINED a 2c column on the right (16u) */ html.host-plugin #pages .page.mod > .plate[data-area="gch"] { grid-column: 1 / 3; grid-row: 2 / span 9; } html.host-plugin #pages .page.mod > .plate[data-area="gce"] { grid-column: 3 / 5; grid-row: 2 / span 9; } html.host-plugin #pages .page.mod > .plate[data-area="gcs"] { grid-column: 1 / 4; grid-row: 11 / span 7; } html.host-plugin #pages .page.mod > .plate[data-area="gcd"] { grid-column: 4 / 5; grid-row: 11 / span 7; } html.host-plugin #pages .page.mod > .plate[data-area="gct"] { grid-column: 5 / 7; grid-row: 2 / span 16; } html.host-plugin #pages .plate[data-area^="gc"] > .plate-body { justify-content: space-between; gap: 6px; } html.host-plugin #pages .plate[data-area^="gc"] .row { gap: 6px; justify-content: space-between; margin: 0; } html.host-plugin #pages .plate[data-area="gcs"] canvas.gc-steps, html.host-plugin #pages .plate[data-area="gce"] canvas.gc-env { height: var(--slot-panel); } html.host-plugin #pages .plate[data-area="gcd"] canvas.gc-meter { height: var(--slot-strip); } html.host-plugin #pages .plate[data-area="gct"] .gc-rows { gap: 2px; flex: 1; justify-content: space-between; } html.host-plugin #pages .plate[data-area="gct"] .gc-row { min-height: 0; height: 69px; grid-template-columns: 14px minmax(0, 1fr) auto auto auto 32px; gap: 4px; align-items: start; } html.host-plugin #pages .plate[data-area="gct"] .gc-row .sw .stamp { width: 32px; height: 32px; } html.host-plugin #pages .plate[data-area="gct"] .gc-name { min-height: 32px; } html.host-plugin #pages .plate[data-area="gct"] .gc-who { gap: 0; } html.host-plugin #pages .plate[data-area="gct"] .gc-row .x { width: 32px; padding: 0; } html.host-plugin #pages .plate[data-area="gcs"] .pill.gc-pat, html.host-plugin #pages .plate[data-area="gcs"] .pill.gc-gatelane { height: 32px; min-height: 32px; padding: 0 8px; font-size: 11px; } html.host-plugin #pages .plate[data-area="gcs"] .gc-seqrow { flex-wrap: nowrap; gap: 4px; } html.host-plugin #pages .plate[data-area="gcs"] .gc-seqrow .seg button { padding: 0 6px; font-size: 11px; } html.host-plugin #pages .plate[data-area="gcd"] .plate-head h2, html.host-plugin #pages .plate[data-area="gcd"] .plate-head h2 .ttl { font-size: 11px; letter-spacing: 0; white-space: nowrap; } html.host-plugin #pages .plate[data-area="gcd"] .plate-head .mark { display: none; } html.host-plugin #pages .plate[data-area="gct"] .gc-row :is(.ctl, .sw) .lab { display: none; } html.host-plugin #pages .plate[data-area="gct"] .gc-row .sw .val { display: none; } html.host-plugin #pages .plate[data-area="gch"] .gc-linkcol { flex-direction: row; align-items: center; } /* Macros: the four columns spread over the full width; knob K3 over the 32 px name button and the 32 px LANES pill */ html.host-plugin #pages .plate[data-area="mac"] .mac-row { justify-content: space-between; width: 100%; gap: 0; flex: 1; align-items: stretch; } html.host-plugin #pages .plate[data-area="mac"] .mac-col { justify-content: space-between; gap: 2px; align-items: center; } html.host-plugin #pages .plate[data-area="mac"] .mac-name { min-height: 32px; width: 76px; font-size: 11px; padding: 0 4px; } html.host-plugin #pages .plate[data-area="mac"] .mac-col .pill.mac-lanes { min-height: 32px; width: 76px; font-size: 11px; padding: 0 6px; margin-top: 2px; } /* LFO: the island banner at the top (full width), then SHAPE + RATE SYNC DELAY, then the six others on one line (K2) */ html.host-plugin #pages .plate[data-area="lfo"] > .plate-body { align-content: space-between; } /* Modulation: ten controls as 5 + 5 (84 px grab cells: 5 x 84 + 4 x 6 = 444) */ html.host-plugin #pages .plate[data-area="mod"] :is(.ctl, .sw) { width: 84px; } html.host-plugin #pages .plate[data-area="mod"] > .plate-body { align-content: space-between; } /* Mod wheel: the wheel 46 x the inner height (vertical slot, box-sized), the two routes spaced over it */ html.host-plugin #pages .plate[data-area="wh"] .wheel-wrap { display: flex; gap: 12px; align-items: stretch; width: 100%; flex: 1; min-height: 0; } html.host-plugin #pages .plate[data-area="wh"] .bigwheel { width: 46px; height: auto; flex: none; position: relative; } html.host-plugin #pages .plate[data-area="wh"] .bigwheel canvas[data-slot] { position: absolute; inset: 0; width: 100%; height: 100%; } html.host-plugin #pages .plate[data-area="wh"] .wheel-wrap > div:not(.bigwheel) { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } html.host-plugin #pages .plate[data-area="wh"] .routes { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 10px; } html.host-plugin #pages .plate[data-area="wh"] .route { justify-content: flex-start; gap: 8px; align-items: center; flex-wrap: nowrap; } html.host-plugin #pages .plate[data-area="wh"] .route .rowlabel { padding-top: 0; } html.host-plugin #pages .plate[data-area="wh"] .rcol { padding-left: 4px; gap: 8px; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } html.host-plugin #pages .plate[data-area="wh"] .rsay { font-size: 11px; line-height: 1.3; white-space: normal; } html.host-plugin #pages .plate[data-area="wh"] .rmeter { width: 100%; } html.host-plugin #pages .plate[data-area="wh"] .also { font-size: 11px; line-height: 1.3; min-height: 0; } /* LFO 2: SHAPE + RATE + SYNC; MODE + DELAY FADE PHASE; PITCH FILTER PWM TREMOLO (K2), its MODE buttons at their text width */ html.host-plugin #pages .plate[data-area="lfo2"] > .plate-body { align-content: space-between; } html.host-plugin #pages .plate[data-area="lfo2"] .segctl { flex: none; } html.host-plugin #pages .plate[data-area="lfo2"] .segctl .seg { display: inline-flex; width: auto; } html.host-plugin #pages .plate[data-area="lfo2"] .segctl .seg button { flex: none; width: auto; min-width: 44px; padding: 0 8px; white-space: nowrap; } /* Joystick: the pad the inner height (276), the X / Y rows and SPRINGY spread beside it */ html.host-plugin #pages .plate[data-area="joy"] > .plate-body > .row { flex-wrap: nowrap; gap: 10px !important; align-items: stretch !important; flex: 1; min-height: 0; } html.host-plugin #pages .plate[data-area="joy"] .joypad { width: calc(100% - 190px); height: auto; aspect-ratio: 1; flex: none; align-self: center; } /* (254: the X / Y rows, label + two K3, take the rest) */ html.host-plugin #pages .plate[data-area="joy"] > .plate-body > .row > div:not(.joypad) { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; } html.host-plugin #pages .plate[data-area="joy"] .row .row { justify-content: flex-start; gap: 6px; flex-wrap: nowrap; } /* Matrix: eight routes as two a line, four lines */ html.host-plugin #pages .plate[data-area="mtx"] .mtx-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; padding: 0; width: 100%; align-content: space-between; flex: 1; } html.host-plugin #pages .plate[data-area="mtx"] .mtx-row { gap: 6px; justify-content: space-between; align-items: flex-start; } html.host-plugin #pages .plate[data-area="mtx"] :is(.mtx-ctls, .mtx-pair) { gap: 6px; } /* Trapezoid: the mesa panel, then its seven controls spread (K1) */ html.host-plugin #pages .plate[data-area="cyc"] > .plate-body { align-content: space-between; } /* Velocity: four a line, twice, and the velocity-in meter */ html.host-plugin #pages .plate[data-area="mvel"] .ctl { width: 105px; } html.host-plugin #pages .plate[data-area="mvel"] > .plate-body > .segctl { display: none; } html.host-plugin #pages .plate[data-area="mvel"] > .plate-body { align-content: space-between; } /* MPE (with Bend range): the voice lanes box-sized (hero), the knob row, the keys pill row */ html.host-plugin #pages .plate[data-area="mmpe"] canvas[data-slot="hero"] { order: -1; flex: 1 1 0; min-height: 0; height: auto; } html.host-plugin #pages .plate[data-area="mmpe"] .row .cap { font-size: 11px; } html.host-plugin #pages .plate[data-area="mmpe"] .row { margin: 0 !important; } /* the Macro lanes popover: over the stage's bottom, the stage fading out under it by its own mask */ html.host-plugin .plug-pop { position: absolute; left: 14px; right: 14px; bottom: 50px; max-height: 662px; overflow: hidden auto; z-index: 6; padding: 8px 10px; border: var(--lw) solid var(--cell-mac, var(--pc)); background: transparent; display: flex; flex-direction: column; gap: 6px; } html.host-plugin .plug-pop:not(:has(.mac-drawer:not([hidden]))) { display: none; } html.host-plugin .plug-pop .plug-pop-close { position: absolute; right: 10px; top: 8px; min-height: 32px; z-index: 1; } html.host-plugin .plug-pop .mac-drawer .plate-note { display: none; } html.host-plugin #board:has(.plug-pop .mac-drawer:not([hidden])) #pages { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--pop-top, 220px), transparent calc(var(--pop-top, 220px) + 36px)); mask-image: linear-gradient(to bottom, #000 0, #000 var(--pop-top, 220px), transparent calc(var(--pop-top, 220px) + 36px)); } /* FX (P4): the signal-path line is the head row (the three chips, the path, ALL FX OFF); app.css's rack rules are `#pages .page.fx ...`, so these carry #pages too. PEDALS: the rack is a 3 x 3 grid of 2c cards in rows M, M, S (ui.js the chain order, three to a row, nine equal 2c x M cells: a Delay / Chorus / Phaser now has a second line (Character, Voicing, Stages) and needs a whole M cell, three M rows are 746 px against the 662 under the head row, so the PEDALS rack is itself the scroll box (the one place besides the Library's grid and Help where the stage scrolls), a fade at its foot while there is more; the head row (chips, path, ALL FX OFF) stays put) */ html.host-plugin #pages > .page.fx.on { grid-template-columns: repeat(6, var(--col)); grid-template-rows: repeat(17, var(--u)); grid-template-areas: none; } html.host-plugin #pages .page.fx > .rack-head { grid-column: 1 / -1; grid-row: 1; flex-direction: row; align-items: center; gap: 10px; height: var(--u); min-height: 0; margin: 0; padding: 0; border: 0; } html.host-plugin #pages .page.fx > .rack { display: contents; } html.host-plugin #pages .page.fx .rack-headrow { display: contents; } html.host-plugin #pages .page.fx .fx-chips { order: 0; display: flex; gap: 4px; flex: none; } html.host-plugin #pages .page.fx .fx-chips .tab { height: 32px; min-height: 0; padding: 0 12px; font-size: 11px; min-width: 0; white-space: nowrap; } html.host-plugin #pages .page.fx .rack-headrow .cap { order: 1; white-space: nowrap; } html.host-plugin #pages .page.fx .rack-read { order: 2; flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; line-height: 1.2; } html.host-plugin #pages .page.fx .rack-all { order: 4; min-height: 32px; height: 32px; padding: 0 10px; } html.host-plugin #pages .page.fx .rack-more { --pc: var(--tab-fx); order: 3; flex: none; min-height: 32px; height: 32px; min-width: 64px; padding: 0 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--pc); } /* (fxfix: the scroll hint / fallback; hidden unless the PEDALS rack scrolls) */ html.host-plugin #pages .page.fx .rack-more[hidden] { display: none; } html.host-plugin #pages .page.fx .rack > .rack-arrow { display: none; } html.host-plugin #pages .page.fx .rack > .plate { grid-area: auto; grid-row: var(--rk-row, auto); grid-column: var(--rk-col, auto); min-width: 0; min-height: 0; width: auto; height: auto; flex: none; margin: 0; } html.host-plugin #pages .page.fx:not(.sub-magic):not(.sub-master) > .rack { display: grid; grid-column: 1 / -1; grid-row: 2 / -1; align-self: stretch; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc(6 * var(--u) + 5 * var(--gap)); align-content: start; align-items: stretch; gap: var(--gap); margin: -4px; padding: 4px 4px 16px; scroll-padding-bottom: 16px; overflow: hidden auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; } /* (the 4 px: room for a lifted card's outline and its 1.02 scale inside the clip; e18: 16 px under the last row, so at the rack's end nothing touches its foot) */ html.host-plugin #pages .page.fx > .rack::-webkit-scrollbar { display: none; } html.host-plugin #pages .page.fx:not(.sub-magic):not(.sub-master) > .rack.more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent); } html.host-plugin #pages .page.fx > .rack.dragging { -webkit-mask-image: none; mask-image: none; } html.host-plugin #pages .page.fx .rack > :is(.plate[data-area="mg"], .plate[data-area="mgs"], .plate[data-area="mo"]), html.host-plugin #pages .page.fx > .plate[data-area="rig"] { display: none; } html.host-plugin #pages .page.fx .rack-hd { min-height: 32px; margin-bottom: 16px; gap: 4px 8px; flex-wrap: nowrap; } /* the card's head is 32: the first control at 54 */ html.host-plugin #pages .page.fx .rack-hd::after { bottom: -4px; } html.host-plugin #pages .page.fx .rack-grip { width: 24px; height: 32px; margin: 0 -2px 0 -8px; font-size: 18px; } html.host-plugin #pages .page.fx .rack-hd h2 { flex: none; } html.host-plugin #pages .page.fx .rack-ctl { margin-left: auto; display: flex; gap: 4px; flex: none; } html.host-plugin #pages .page.fx .rack-mv { font-size: 12px; min-width: 32px; min-height: 32px; height: 32px; } html.host-plugin #pages .page.fx .footsw { min-width: 64px; min-height: 32px; height: 32px; padding: 0 8px; font-size: 11px; gap: 6px; } html.host-plugin #pages .page.fx .rack-hd .rack-note { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html.host-plugin #pages .page.fx :is(.rack-note, .rack-tag) { font-size: 11px; white-space: nowrap; } html.host-plugin #pages .page.fx .rack > .plate > .plate-body { align-content: space-between; } html.host-plugin #pages .page.fx .rack > .plate:not(.packed) > .plate-body { justify-content: space-between; } html.host-plugin #pages .page.fx .rack > .plate .ens-own { display: none; } /* Synth Wah: the envelope ladder strip, the eight types as 4 x 2, WAH + four knobs */ html.host-plugin #pages .page.fx .plate[data-area="sw"] .swtypes { flex: 1 0 100%; order: 1; } html.host-plugin #pages .page.fx .plate[data-area="sw"] .swtypes .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } html.host-plugin #pages .page.fx .plate[data-area="sw"] .swtypes .seg button { min-width: 0; height: 32px; padding: 0 4px; font-size: 11px; letter-spacing: 0; } html.host-plugin #pages .page.fx .plate[data-area="sw"] .swtypes .lab { display: none; } html.host-plugin #pages .page.fx .plate[data-area="sw"] > .plate-body { row-gap: 4px; } html.host-plugin #pages .page.fx .plate[data-area="sw"] > .plate-body > div:has(> canvas) { flex: 1 0 100%; order: 0; margin: 0 !important; } html.host-plugin #pages .page.fx .plate[data-area="sw"] :is(.sw, .ctl) { order: 2; } /* Crush: the crushed sine as an inline tile at the end of its second row */ html.host-plugin #pages .page.fx .plate[data-area="crs"] canvas[data-slot="inline"] { order: 3; flex: 1 1 160px; width: auto; height: 82px; } html.host-plugin #pages .page.fx .plate[data-area="crs"] .segctl .lab { display: none; } /* Room: switch + MODE + three knobs; six knobs (K2); its decay picture hidden (Help keeps it) */ html.host-plugin #pages .page.fx .plate[data-area="room"] :is(.ctl, .sw) { width: 64px; } html.host-plugin #pages .page.fx .plate[data-area="room"] .seg button { min-width: 0; padding: 0 5px; } html.host-plugin #pages .page.fx .plate[data-area="dly"] .ctl { width: 62px; } html.host-plugin #pages .page.fx .plate[data-area="dly"] .segctl .lab { display: none; } /* MAGICATION: the card 6c XL (the sections in three lines), the slots 3c M, Rigs 3c M (56 px pills) */ html.host-plugin #pages .page.fx:is(.sub-magic, .sub-master) .rack > .plate.rack-card { display: none; } html.host-plugin #pages .page.fx.sub-magic .rack > .plate[data-area="mg"] { display: flex; grid-column: 1 / 7; grid-row: 2 / span 10; } html.host-plugin #pages .page.fx.sub-magic .rack > .plate[data-area="mgs"] { display: flex; grid-column: 1 / 4; grid-row: 12 / span 6; } html.host-plugin #pages .page.fx.sub-magic > .plate[data-area="rig"] { display: flex; grid-column: 4 / 7; grid-row: 12 / span 6; } html.host-plugin #pages .page.fx.sub-magic .mg-body { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: flex-start; align-content: space-between; height: 100%; width: 100%; } html.host-plugin #pages .page.fx.sub-magic .mg-secs { display: contents; } html.host-plugin #pages .page.fx.sub-magic .mg-sec { flex: 1 1 40%; } html.host-plugin #pages .page.fx.sub-magic .mg-body > .sw { flex: 0 0 auto; margin-top: 18px; } html.host-plugin #pages .page.fx.sub-magic .mg-sec-hd { font-size: 11px; margin-bottom: 2px; } html.host-plugin #pages .page.fx.sub-magic .mg-sec .row { justify-content: flex-start; gap: 6px; } html.host-plugin #pages .page.fx.sub-magic .plate[data-area="mgs"] > .plate-body > .mg-dim { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; height: 100%; } html.host-plugin #pages .page.fx.sub-magic .mg-slots { display: flex; justify-content: space-between; width: 100%; gap: 10px; } html.host-plugin #pages .page.fx.sub-magic .mg-slot { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; } html.host-plugin #pages .page.fx.sub-magic .plate[data-area="mgs"] .row { justify-content: space-between; gap: 6px; margin: 0 !important; flex-wrap: nowrap; } html.host-plugin #pages .page.fx.sub-magic .plate[data-area="mgs"] .row > div:empty:not([class]) { display: none; } html.host-plugin #pages .page.fx.sub-magic .plate[data-area="rig"] > .plate-body { overflow: visible; } html.host-plugin #pages .page.fx.sub-magic .plate[data-area="rig"] .rigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 56px; gap: 4px; width: 100%; } html.host-plugin #pages .page.fx.sub-magic .plate[data-area="rig"] .rigs .pill { height: 56px; } /* MASTER OUT: the card 6c Column 16u; its five sections on an inner 3 x 2 grid, the meters as strips / the loudness panel */ html.host-plugin #pages .page.fx.sub-master .rack > .plate[data-area="mo"] { display: flex; grid-column: 1 / 7; grid-row: 2 / span 16; } html.host-plugin #pages .page.fx.sub-master .mo-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 10px 24px; height: 100%; width: 100%; } html.host-plugin #pages .page.fx.sub-master .mo-sec { display: flex; flex-direction: column; gap: 6px; padding: 0; min-width: 0; margin: 0; border: 0; } html.host-plugin #pages .page.fx.sub-master .mo-sec:nth-child(5) { grid-column: 2 / 4; } html.host-plugin #pages .page.fx.sub-master .mo-sec-hd { font-size: 12px; min-height: 20px; margin: 0; } html.host-plugin #pages .page.fx.sub-master .mo-sec .row { justify-content: space-between; row-gap: 6px; } html.host-plugin #pages .page.fx.sub-master .mo-sec .row > div:empty:not([class]) { display: none; } html.host-plugin #pages .page.fx.sub-master .mo-sec canvas[data-slot] { flex: none; width: 100%; border: 0; min-width: 0; align-self: auto; } html.host-plugin #pages .page.fx.sub-master .mo-sec > canvas[data-slot] { margin-top: auto; } html.host-plugin #pages .page.fx.sub-master .mo-sec > .row { align-content: flex-start; } html.host-plugin #pages .page.fx.sub-master .mo-lufs { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; margin-top: auto; } html.host-plugin #pages .page.fx.sub-master .mo-reset { font-size: 12px; min-height: 32px; } /* PATRICK (P5, no head row: 17 units): the Library 6c Hero 13u (main's lockup head, the rail, the scrolling patch grid: the one scroller of the stage) over the Macros mirror 6c S on HERO dials */ html.host-plugin #pages.pin-lib > .page.patrick.on > .plate[data-area="lib"] { grid-column: 1 / 7; grid-row: 1 / span 13; flex: none; padding-bottom: 4px; } html.host-plugin #pages.pin-lib > .page.patrick.on > .plate[data-area="pmac"] { grid-column: 1 / 7; grid-row: 14 / span 4; flex: none; } html.host-plugin #pages .plate[data-area="lib"] > .plate-body { --rail-w: 232px; --tile: 72px; column-gap: 12px; } html.host-plugin #pages .plate[data-area="lib"] > .plate-head { position: static; margin: 0 0 16px; padding: 0; background: transparent; } html.host-plugin #pages .plate[data-area="lib"] > .plate-head::after { left: 0; right: 0; bottom: -4px; } html.host-plugin #pages .plate[data-area="lib"] .lib-now { padding-bottom: 12px; } html.host-plugin #pages .plate[data-area="lib"] .lib-now > .init-tile { width: 72px; } html.host-plugin #pages .plate[data-area="lib"] .lib-rail { gap: 8px; max-height: none; overflow: visible; } html.host-plugin #pages .plate[data-area="lib"] .lib-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } html.host-plugin #pages .plate[data-area="lib"] .lib-actions .pill { height: 32px; min-height: 32px; } html.host-plugin #pages .plate[data-area="lib"] .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.host-plugin #pages .plate[data-area="lib"] .cats button { min-height: 36px; padding: 2px 0; gap: 2px; } html.host-plugin #pages .plate[data-area="lib"] .cats button svg { width: 16px; height: 16px; } html.host-plugin #pages .plate[data-area="lib"] .pm { gap: 2px; padding: 4px 3px; } html.host-plugin #pages .plate[data-area="lib"] .pm svg { width: 22px; height: 22px; } html.host-plugin #pages .plate[data-area="lib"] .pm :is(.n, .s) { font-size: 11px; line-height: 12px; } html.host-plugin #pages .plate[data-area="lib"] .grid-marks { gap: 3px; } /* the Macros mirror: four HERO dials, each with its name, centred in its quarter of the width (LANES lives on MOD) */ html.host-plugin #pages .plate[data-area="pmac"] .mac-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; width: 100%; flex: 1; align-items: center; } html.host-plugin #pages .plate[data-area="pmac"] .mac-col { display: grid; grid-template-columns: 92px 110px; gap: 0 12px; align-items: center; justify-self: center; } html.host-plugin #pages .plate[data-area="pmac"] .mac-col .mac-name { width: 110px; margin: 0; font-size: 13px; justify-content: flex-start; text-align: left; } html.host-plugin #pages .plate[data-area="pmac"] .mac-also { display: none; } /* PLAY (P5, no head row: 17 units): Arp 3c M over the Sequencer 3c Hero 11u | Blocks 3c Column 17u; EXPAND (.seq-wide) puts the Sequencer over the whole stage */ html.host-plugin #pages .page.play > .plate[data-area="arp"] { grid-column: 1 / 4; grid-row: 1 / span 6; } html.host-plugin #pages .page.play > .plate[data-area="seq"] { grid-column: 1 / 4; grid-row: 7 / span 11; } html.host-plugin #pages .page.play > .plate[data-area="blk"] { grid-column: 4 / 7; grid-row: 1 / span 17; } html.host-plugin #pages .page.play.seq-wide > .plate[data-area="seq"] { grid-column: 1 / 7; grid-row: 1 / span 17; } html.host-plugin #pages .page.play.seq-wide > .plate:is([data-area="arp"], [data-area="blk"]) { display: none; } html.host-plugin #pages .plate[data-area="arp"] > .plate-body { align-content: space-between; } /* the Sequencer: the bar rows (32 px), the roll box-sized (hero), the lanes segment, the lane strip; the Steps grid the same box */ html.host-plugin #pages .plate[data-area="seq"] > .plate-head .seq-expand { min-height: 32px; height: 32px; padding: 0 10px; margin-right: 6px; } html.host-plugin #pages .plate[data-area="seq"] > .plate-head .seqmodes button { height: 32px; } html.host-plugin #pages .plate[data-area="seq"] > .plate-body { min-height: 0; } html.host-plugin #pages .plate[data-area="seq"] .seqmode { gap: 6px; min-height: 0; } html.host-plugin #pages .plate[data-area="seq"] .seqmode.on, html.host-plugin #pages .plate[data-area="seq"] .seqmode:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; } html.host-plugin #pages .plate[data-area="seq"] .seqmode > :is(.sqbar, .sqpresets, .row) { flex: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; margin: 0 !important; } html.host-plugin #pages .plate[data-area="seq"] .seqmode :is(.seg button, .pill, select) { min-height: 32px; height: 32px; } html.host-plugin #pages .plate[data-area="seq"] .seqmode .seg button { padding: 0 6px; min-width: 32px; } html.host-plugin #pages .plate[data-area="seq"] .seqmode .pill { padding: 0 7px; } html.host-plugin #pages .plate[data-area="seq"] canvas[data-slot="hero"] { flex: 1 1 0; min-height: 0; height: auto; } html.host-plugin #pages .plate[data-area="seq"] .rollhint { display: none; } /* Blocks: box-sized, the lanes graph as a strip */ html.host-plugin #pages .plate[data-area="blk"] .play-big { height: 56px; } /* VOICES / MODEL (P6): Model 3c XL over Model envelope 3c M (panel) | Model scope 3c Column 16u (hero) */ html.host-plugin #pages .page.model > .plate[data-area="mdl"] { grid-column: 1 / 4; grid-row: 2 / span 10; } html.host-plugin #pages .page.model > .plate[data-area="menv"] { grid-column: 1 / 4; grid-row: 12 / span 6; } html.host-plugin #pages .page.model > .plate[data-area="mvis"] { grid-column: 4 / 7; grid-row: 2 / span 16; } html.host-plugin #pages .plate:is([data-area="mdl"], [data-area="menv"]) > .plate-body { justify-content: space-between; } html.host-plugin #pages .plate[data-area="mdl"] .mdtypes { margin: 0; } html.host-plugin #pages .plate[data-area="mdl"] .mdtypes .seg { grid-template-columns: repeat(7, minmax(0, 1fr)); } /* (the 21 types as 7 x 3 of 32) */ html.host-plugin #pages .plate[data-area="mdl"] .mdtypes .seg button { min-width: 0; padding: 0 2px; font-size: 11px; letter-spacing: 0; } html.host-plugin #pages .plate[data-area="mvis"] canvas[data-slot="hero"] { flex: 1 1 0; min-height: 0; height: auto; } /* VOICES / SINGERS (P6): Singers 3c L over Faces 3c L (hero) | Vowels 3c L (banner) over Stage 3c L (banner) */ html.host-plugin #pages .page.singers > .plate[data-area="sng"] { grid-column: 1 / 4; grid-row: 2 / span 10; } /* (XL: mode, cast, style, two rows of eight / seven; the plan's L had the pickers on fewer lines than they need) */ html.host-plugin #pages .page.singers > .plate[data-area="fac"] { grid-column: 1 / 4; grid-row: 12 / span 6; } html.host-plugin #pages .plate[data-area="sng"] > .plate-body > .row:first-child { align-items: flex-end !important; gap: 12px !important; justify-content: flex-start; } html.host-plugin #pages .plate[data-area="sng"] .hstyles { width: 100%; } html.host-plugin #pages .plate[data-area="sng"] .hstyles .seg { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; } html.host-plugin #pages .plate[data-area="sng"] .hstyles .seg button { min-width: 0; padding: 0 2px; font-size: 11px; letter-spacing: 0; } html.host-plugin #pages .plate[data-area="sng"] .sngcap { margin: 0 0 -4px; } html.host-plugin #pages .plate[data-area="sng"] :is(.sngnote, .sngwho) { display: none; } html.host-plugin #pages .plate:is([data-area="vow"], [data-area="stg"]) :is(.hmoves, .hrooms) .seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; } html.host-plugin #pages .plate:is([data-area="vow"], [data-area="stg"]) :is(.hmoves, .hrooms) .seg button { min-width: 0; padding: 0 2px; font-size: 11px; letter-spacing: 0; } html.host-plugin #pages .plate:is([data-area="vow"], [data-area="stg"]) :is(.hmoves, .hrooms) { width: 100%; } html.host-plugin #pages .plate[data-area="vow"] .vownote { display: none; } html.host-plugin #pages .page.singers > .plate[data-area="vow"] { grid-column: 4 / 7; grid-row: 2 / span 8; } html.host-plugin #pages .page.singers > .plate[data-area="stg"] { grid-column: 4 / 7; grid-row: 10 / span 8; } html.host-plugin #pages .plate:is([data-area="sng"], [data-area="vow"], [data-area="stg"]) > .plate-body { justify-content: space-between; } html.host-plugin #pages .plate[data-area="fac"] canvas[data-slot="hero"] { flex: 1 1 0; min-height: 0; height: auto; } /* VOICES / PULSAR (P6): DCO 3c L, DCO 2 3c S, Filter 3c S | Pulse width 3c M, LFO 2 3c M (two packed K2 lines), Chorus 3c S. The plan's split (DCO M, LFO 2 L) did not hold the DCO's three pictos and three pickers; this one keeps every cell and fills both columns' 16 units. The Shape env mirror is not shown in the plugin (SUPER has the same parameters) */ html.host-plugin #pages .page.pulsar > .plate[data-area="pdco"] { grid-column: 1 / 4; grid-row: 2 / span 8; } html.host-plugin #pages .page.pulsar > .plate[data-area="pdc2"] { grid-column: 1 / 4; grid-row: 10 / span 4; } html.host-plugin #pages .page.pulsar > .plate[data-area="pflt"] { grid-column: 1 / 4; grid-row: 14 / span 4; } html.host-plugin #pages .page.pulsar > .plate[data-area="ppwm"] { grid-column: 4 / 7; grid-row: 2 / span 6; } html.host-plugin #pages .page.pulsar > .plate[data-area="plf2"] { grid-column: 4 / 7; grid-row: 8 / span 6; } html.host-plugin #pages .page.pulsar > .plate[data-area="pens"] { grid-column: 4 / 7; grid-row: 14 / span 4; } html.host-plugin #pages .page.pulsar > .plate[data-area="pshp"] { display: none; } html.host-plugin #pages .plate[data-area="pdco"] > .plate-body > .segctl:not(:has(.row)) { flex: 1 0 100%; margin: 0 !important; } /* (the width-now caption over its meter) */ html.host-plugin #pages .plate[data-area="pdco"] .pl-src { gap: 6px; flex-wrap: nowrap; } html.host-plugin #pages .plate[data-area="pdco"] .segctl { gap: 0; } html.host-plugin #pages .plate[data-area="pens"] > .plate-body { justify-content: space-between !important; align-items: flex-start !important; } /* (over the mirror's inline flex-start) */ html.host-plugin #pages .page.pulsar > .plate > .plate-body { justify-content: space-between; align-content: space-between; } /* MASTER (P7, no head row: 17 units): Engines 3c Hero 13u over Output 3c S (the HERO volume) | Monitor 3c Hero 9u over System 3c L */ html.host-plugin #pages .page.master > .plate[data-area="eng"] { grid-column: 1 / 4; grid-row: 1 / span 11; } html.host-plugin #pages .page.master > .plate[data-area="out"] { grid-column: 1 / 4; grid-row: 12 / span 6; } /* (M: the volume row and the RAW / MASTERED line; the plan's S had them stacked beside the volume, which does not fit the four controls of the row) */ /* Engines: the three strips the inner height, their meter ladders and fader tracks box-sized */ html.host-plugin #pages .plate[data-area="eng"] > .plate-body { min-height: 0; } html.host-plugin #pages .plate[data-area="eng"] .strips { flex: 1; min-height: 0; display: flex; gap: 10px; align-items: stretch; width: 100%; } html.host-plugin #pages .plate[data-area="eng"] .strip { max-width: none; min-height: 0; padding: 6px; gap: 6px; } html.host-plugin #pages .plate[data-area="eng"] .strip-mid { flex: 1 1 0; height: auto; min-height: 0; } html.host-plugin #pages .plate[data-area="eng"] .strip-btns .pill { min-height: 32px; height: 32px; } /* Output: VOLUME (HERO 72) + DRIVE, MASTER, the WAV recorder spread on the first line; CHARACTER, RAW / MASTERED, MONO and the link to MASTER OUT on the second */ html.host-plugin #pages .plate[data-area="out"] .ctl.huge { --dial: var(--khero); } html.host-plugin #pages .plate[data-area="out"] > .plate-body > .row:first-child > div:not([class]), html.host-plugin #pages .plate[data-area="out"] > .plate-body > .row:first-child .row { display: contents; } html.host-plugin #pages .plate[data-area="out"] > .plate-body { align-content: space-between; align-items: flex-end; } html.host-plugin #pages .plate[data-area="out"] > .plate-body::before { content: ""; flex: 1 0 100%; height: 0; order: 1; } /* (the line break between the two lines) */ html.host-plugin #pages .plate[data-area="out"] > .plate-body > .row:not(:first-child) > * { order: 2; } html.host-plugin #pages .plate[data-area="out"] .mo-link { min-height: 32px; } /* Monitor: the VU the inner height (vertical slot), the spectrum box-sized beside it, the output scope a strip under it */ html.host-plugin #pages .plate[data-area="mon"] .mon { height: 100%; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; } html.host-plugin #pages .plate[data-area="mon"] > .plate-body { padding-top: 0; } /* (app.css's 6 px: the head gap is the same in every cell) */ html.host-plugin #pages .plate[data-area="mon"] canvas[data-slot="vertical"] { width: 112px; height: 100%; } html.host-plugin #pages .plate[data-area="mon"] .mon-side { min-height: 0; gap: 6px; } html.host-plugin #pages .plate[data-area="mon"] .mon-side canvas[data-slot="hero"] { flex: 1 1 0; min-height: 0; height: auto; } /* System: the CPU / mini VU line, the knob row, MIDI input, the state buttons */ html.host-plugin #pages .plate[data-area="sys"] > .plate-body { justify-content: space-between; } html.host-plugin #pages .plate[data-area="sys"] .sys-load { margin: 0; } html.host-plugin #pages .plate[data-area="sys"] .sys-load canvas[data-slot] { flex: 1 1 auto; width: auto; min-width: 0; margin-left: 6px; } html.host-plugin #pages .plate[data-area="sys"] .lib-actions { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; } html.host-plugin #pages .plate[data-area="sys"] .lib-actions .pill { min-height: 32px; height: 32px; } html.host-plugin #pages .page.master > .plate[data-area="mon"] { grid-column: 4 / 7; grid-row: 1 / span 9; } html.host-plugin #pages .page.master > .plate[data-area="sys"] { grid-column: 4 / 7; grid-row: 10 / span 8; } /* ---------- 7. colour pass 2, variant A (docs/colour-pass-2/BUILD-NOTES.md): the colours themselves are ui.js's CP2 table (one coin stop a cell, sub tab, chip and knob group). Here only the two coin stops under 4.5:1 on black: violet and plum cells, sub tabs and chips carry their text in the lifted ink (--pc / --tc) and keep the pure stop on the outline and the title rule (--pc-line / --tc-line, set by ui.js). Colour only: no geometry, no shadow, blur or glow ---------- */ html.host-plugin #pages .plate { border-color: var(--pc-line, var(--pc)); } html.host-plugin #pages .plate > .plate-head::after { background: var(--pc-line, var(--pc)); } html.host-plugin #pages .tab.subtab { border-color: var(--tc-line, var(--tc)); } /* ---------- 8. CASINO MIDI-MATE, the MIDI FX stage (docs/midi-fx/, ui.js MFX): PLAY's head row (PLAYER | MIDI FX + the SOURCE > MIDI FX > ARP flow strip), PLAYER under it, the MIDI FX page (the signal line, then two rows of cards on the 6 x 17 tracks), the header's MFX chip. OLED black, square, no shadow / blur / glow, coin colours only (the cells' from ui.js CP2) ---------- */ /* PLAYER: Arp 3c M over the Sequencer 3c Hero 10u | Blocks 3c Column 16u, under the head row (as VOICES' pages) */ html.host-plugin #pages .page.play > .plate[data-area="arp"] { grid-row: 2 / span 6; } html.host-plugin #pages .page.play > .plate[data-area="seq"] { grid-row: 8 / span 10; } html.host-plugin #pages .page.play > .plate[data-area="blk"] { grid-row: 2 / span 16; } html.host-plugin #pages .page.play.seq-wide > .plate[data-area="seq"] { grid-row: 2 / span 16; } html.host-plugin #pages .page.play:not(.sub-mfx) > :is(.plate.mfx-card, .mfx-line) { display: none; } html.host-plugin #pages .page.play.sub-mfx > .plate:not(.mfx-card) { display: none; } /* the head row: the two sub tabs at the left, the flow strip at the right */ html.host-plugin #pages .playtabs { justify-content: space-between; align-items: center; gap: 10px; } html.host-plugin #pages .playtabs-tabs { display: flex; gap: 4px; flex: none; height: 32px; } html.host-plugin #pages .playtabs-tabs .subtab { flex: none; width: 104px; height: 32px; padding: 0 10px; font-size: 11px; } html.host-plugin #pages .flow { display: flex; align-items: center; gap: 4px; flex: none; height: 32px; font-size: 11px; } html.host-plugin #pages .flow :is(.flow-live, .flow-chip, .flow-end) { height: 32px; min-height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } html.host-plugin #pages .flow .flow-live { border: 2px solid var(--dim); color: var(--lav); } html.host-plugin #pages .flow .flow-live .flow-led { width: 8px; height: 8px; border: 2px solid var(--dim); display: inline-block; } html.host-plugin #pages .flow .flow-live.act .flow-led { background: #A9ED43; border-color: #A9ED43; } /* (lime: time / motion) */ html.host-plugin #pages .flow .flow-src { display: flex; gap: 2px; } html.host-plugin #pages .flow .flow-chip { background: transparent; border: 2px solid var(--tab-play); color: var(--tab-play); min-width: 32px; cursor: pointer; } html.host-plugin #pages .flow .flow-chip.on { background: var(--tab-play); color: #000; } html.host-plugin #pages .flow .flow-mfx { border-color: var(--sub-mfx, #45A7EF); color: var(--sub-mfx, #45A7EF); } html.host-plugin #pages .flow .flow-mfx.on { background: var(--sub-mfx, #45A7EF); color: #000; } html.host-plugin #pages .flow .flow-arp { border-color: var(--cell-arp); color: var(--cell-arp); } html.host-plugin #pages .flow .flow-arp.on { background: var(--cell-arp); color: #000; } html.host-plugin #pages .flow .flow-sub { font-weight: 700; letter-spacing: 0; text-transform: none; } html.host-plugin #pages .flow .flow-end { padding: 0 2px; color: var(--lav); } html.host-plugin #pages .flow-arw { width: 16px; height: 32px; flex: none; position: relative; } html.host-plugin #pages .flow-arw::before { content: ""; position: absolute; left: 0; right: 7px; top: 15px; height: 2px; background: var(--lav); } html.host-plugin #pages .flow-arw::after { content: ""; position: absolute; right: 0; top: 10px; border-left: 8px solid var(--lav); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } html.host-plugin #pages .flow-arw.bypass::before { right: 0; } /* master off: the wire runs straight through */ html.host-plugin #pages .flow-arw.bypass::after { display: none; } /* the MIDI FX page's signal line: track 2, the rack's chain on the left, the master / seed / take / key / LAT on the right */ html.host-plugin #pages .page.play > .mfx-line { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 32px; min-width: 0; } html.host-plugin #pages .mfx-line :is(.mfx-chain, .mfx-ctl) { display: flex; align-items: center; gap: 4px; flex: none; height: 32px; } html.host-plugin #pages .mfx-line :is(button, .mfx-key, .mfx-latc, .mfx-smp, .mfx-lab) { height: 32px; min-height: 32px; box-sizing: border-box; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; } html.host-plugin #pages .mfx-line .mfx-ch { padding: 0 7px; min-width: 32px; background: transparent; border: 2px solid var(--fc); color: var(--fc); cursor: pointer; } html.host-plugin #pages .mfx-line .mfx-ch.on { background: var(--fc); color: #000; } html.host-plugin #pages .mfx-line .mfx-arw { width: 8px; height: 32px; flex: none; position: relative; } html.host-plugin #pages .mfx-line .mfx-arw::after { content: ""; position: absolute; left: 1px; top: 11px; border-left: 6px solid var(--lav); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } html.host-plugin #pages .mfx-line .mfx-lab { color: var(--lav); padding: 0 2px 0 6px; } html.host-plugin #pages .mfx-line .segctl { flex-direction: row; gap: 0; } html.host-plugin #pages .mfx-line .segctl > .lab { display: none; } html.host-plugin #pages .mfx-line .seg { display: flex; gap: 2px; } html.host-plugin #pages .mfx-line .seg button { height: 32px; min-height: 32px; min-width: 32px; padding: 0 6px; font-size: 11px; } html.host-plugin #pages .mfx-line .mfx-smp { color: var(--lav); font-weight: 700; letter-spacing: 0; text-transform: none; padding: 0 2px; min-width: 64px; } html.host-plugin #pages .mfx-line .mfx-on { padding: 0 10px; background: transparent; border: 2px solid var(--sub-mfx, #45A7EF); color: var(--sub-mfx, #45A7EF); cursor: pointer; } html.host-plugin #pages .mfx-line .mfx-on.on { background: var(--sub-mfx, #45A7EF); color: #000; } html.host-plugin #pages .mfx-line .mfx-reels { display: flex; gap: 2px; height: 32px; } html.host-plugin #pages .mfx-line .mfx-reel { width: 32px; justify-content: center; padding: 0; font-family: var(--font-head); font-size: 18px; letter-spacing: 0; border: 2px solid #F4B43B; background: #000; color: #F4B43B; cursor: pointer; } /* (amber: the coin's reels) */ html.host-plugin #pages .mfx-line .mfx-reels.free .mfx-reel { color: var(--lav); border-color: var(--dim); } html.host-plugin #pages .mfx-line .mfx-reels.spun .mfx-reel { animation: mfx-spin 0.5s steps(6) 1; } @keyframes mfx-spin { 0% { transform: translateY(-6px); } 50% { transform: translateY(6px); } 100% { transform: none; } } html.host-plugin #pages .mfx-line .mfx-spin { padding: 0 9px; background: transparent; border: 2px solid #F4B43B; color: #F4B43B; cursor: pointer; } html.host-plugin #pages .mfx-line .mfx-spin:active { background: #F4B43B; color: #000; } html.host-plugin #pages .mfx-line .mfx-key { padding: 0 8px; border: 2px solid var(--cell-mtu); color: var(--cell-mtu); } html.host-plugin #pages .mfx-line .mfx-latc { padding: 0 8px; border: 2px solid var(--dim); color: var(--lav); } html.host-plugin #pages .mfx-line .mfx-latc.on { background: #F4B43B; border-color: #F4B43B; color: #000; } /* the cards: rows 3..9 (7u) and 10..17 (8u); a 32 px head (the LED and the dice pip at its right, as the FX cards' heads) */ html.host-plugin #pages .page.play > .plate[data-area="mtu"] { grid-column: 1 / 2; grid-row: 3 / span 7; } html.host-plugin #pages .page.play > .plate[data-area="moc"] { grid-column: 2 / 4; grid-row: 3 / span 7; } html.host-plugin #pages .page.play > .plate[data-area="msh"] { grid-column: 4 / 5; grid-row: 3 / span 7; } html.host-plugin #pages .page.play > .plate[data-area="mgo"] { grid-column: 5 / 7; grid-row: 3 / span 7; } html.host-plugin #pages .page.play > .plate[data-area="mtr"] { grid-column: 1 / 4; grid-row: 10 / span 8; } html.host-plugin #pages .page.play > .plate[data-area="mgi"] { grid-column: 4 / 5; grid-row: 10 / span 8; } html.host-plugin #pages .page.play > .plate[data-area="mhu"] { grid-column: 5 / 7; grid-row: 10 / span 8; } html.host-plugin #pages .plate.mfx-card > .plate-head { min-height: 32px; flex-wrap: nowrap; } html.host-plugin #pages .plate.mfx-card > .plate-head h2 { flex: 1 1 auto; min-width: 0; overflow: hidden; } html.host-plugin #pages .plate.mfx-card .mfx-head-r { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; } html.host-plugin #pages .plate.mfx-card .mfx-led { width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 2px solid var(--pc-line, var(--pc)); cursor: pointer; } html.host-plugin #pages .plate.mfx-card .mfx-led i { width: 12px; height: 12px; border: 2px solid var(--pc-line, var(--pc)); display: block; } html.host-plugin #pages .plate.mfx-card .mfx-led.on i { background: var(--pc-line, var(--pc)); } html.host-plugin #pages .plate.mfx-card .mfx-pip { width: 10px; height: 10px; border: 2px solid var(--pc-line, var(--pc)); display: block; } html.host-plugin #pages .plate.mfx-card .mfx-pip.hit { background: var(--pc-line, var(--pc)); } html.host-plugin #pages .plate.mfx-card .mfx-say { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 11px; line-height: 14px; } html.host-plugin #pages .plate.mfx-card .mfx-plain { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--pc); letter-spacing: 0; } html.host-plugin #pages .plate.mfx-card .mfx-tag { color: var(--lav); font-weight: 700; } html.host-plugin #pages .plate.mfx-card .mfx-what { margin: 0; font-size: 12px; line-height: 16px; color: var(--lav); } /* the header's MFX chip (beside MIDI): dim off, the MIDI FX colour when the master is on */ html.host-plugin #bar #stat-mfx { height: 36px; padding: 0 8px; background: transparent; border: 0; cursor: pointer; font-size: 11px; } html.host-plugin #bar #stat-mfx.on { color: var(--sub-mfx, #45A7EF); } html.host-plugin #bar #stat-mfx.on .dot { background: var(--sub-mfx, #45A7EF); border-color: var(--sub-mfx, #45A7EF); } html.host-plugin #bar #stat-mfx.live .dot { background: #A9ED43; border-color: #A9ED43; } /* (the 1-column cards: the full knock-off name on one line, the mark gives way; the reels' digits in the panel face) */ html.host-plugin #pages .plate.mfx-card > .plate-head h2 .ttl { letter-spacing: 0.02em; } html.host-plugin #pages .page.play > .plate.mfx-card:is([data-area="mtu"], [data-area="msh"], [data-area="mgi"]) > .plate-head > .mark { display: none; } html.host-plugin #pages .page.play > .plate.mfx-card:is([data-area="mtu"], [data-area="msh"], [data-area="mgi"]) > .plate-head h2 .ttl { font-size: 12px; } html.host-plugin #pages .mfx-line .mfx-reel { font-family: var(--font-body); font-size: 16px; font-weight: 800; } html.host-plugin #pages .page.play > .plate.mfx-card:is([data-area="mtu"], [data-area="msh"], [data-area="mgi"]) > .plate-head h2 .ttl { letter-spacing: 0; } html.host-plugin #pages .page.play > .plate.mfx-card:is([data-area="mtu"], [data-area="msh"], [data-area="mgi"]) .mfx-head-r { gap: 4px; } html.host-plugin #pages .playtabs .subtab.on { color: #000; } /* PLAYER's Blocks at 16 units (the head row took one): the two transport buttons 48 px (were 56), so its editor never scrolls */ html.host-plugin #pages .plate[data-area="blk"] .play-big { height: 48px; } /* (the signal line: exactly one 32 px unit tall, 1412 wide: the segments' own border inside their 32 px, a little less air) */ html.host-plugin #pages .mfx-line .seg { height: 32px; box-sizing: border-box; border: 0; padding: 0; gap: 2px; } html.host-plugin #pages .mfx-line .seg button { box-sizing: border-box; } html.host-plugin #pages .mfx-line .segctl { height: 32px; } html.host-plugin #pages .mfx-line :is(.mfx-chain, .mfx-ctl) { gap: 3px; } html.host-plugin #pages .mfx-line .mfx-ch { padding: 0 6px; } html.host-plugin #pages .mfx-line .mfx-smp { min-width: 56px; } html.host-plugin #pages .mfx-line .mfx-lab { padding: 0 1px 0 4px; } /* (the signal line's segments: each button carries its own 2 px outline inside its 32 px, in the MIDI FX colour) */ html.host-plugin #pages .page.play > .mfx-line { --pc: var(--sub-mfx, #45A7EF); } html.host-plugin #pages .mfx-line .seg { gap: 0; } html.host-plugin #pages .mfx-line .seg button { border: 2px solid var(--pc); height: 32px; min-height: 32px; } html.host-plugin #pages .mfx-line .seg button + button { border-left: 0; } html.host-plugin #pages .page.play > .plate.mfx-card:is([data-area="mtu"], [data-area="msh"], [data-area="mgi"]) > .plate-head h2 .ttl { font-size: 11px; } /* the cards as their stages fill them: a built card hides the one-sentence help (Help and the tooltip keep it) */ html.host-plugin #pages .plate.mfx-card.built .mfx-what { display: none; } html.host-plugin #pages .plate.mfx-card.built > .plate-body { justify-content: space-between; } /* YAMAHAHA HUMAN-DX: the tape strip box-sized (hero) over two K2 rows */ html.host-plugin #pages .plate[data-area="mhu"] canvas.mfx-tape { flex: 1 1 0; min-height: 0; height: auto; border: 2px solid #202026; box-sizing: border-box; } /* GIBBO STRUMMER: DIR as a 3 + 2 grid at full width, K1 rows, the strum scope inline beside LOOSE and MIN */ html.host-plugin #pages .plate[data-area="mgi"] .mfx-dir { width: 100%; } html.host-plugin #pages .plate[data-area="mgi"] .mfx-dir .seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; border: 0; gap: 2px; } html.host-plugin #pages .plate[data-area="mgi"] .mfx-dir .seg button { grid-column: span 2; min-width: 0; padding: 0 2px; border: 2px solid var(--pc); height: 32px; box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mgi"] .mfx-dir .seg button:nth-child(n+4) { grid-column: span 3; } html.host-plugin #pages .plate[data-area="mgi"] .mfx-dir .seg button + button { border-left: 2px solid var(--pc); } html.host-plugin #pages .plate[data-area="mgi"] .mfx-dir > .lab { display: none; } html.host-plugin #pages .plate[data-area="mgi"] canvas.mfx-scope { flex: 1 1 auto; width: auto; min-width: 0; height: 74px; } html.host-plugin #pages .plate[data-area="mgi"] .row:has(> canvas.mfx-scope) { flex-wrap: nowrap; gap: 6px; } html.host-plugin #pages .plate[data-area="mgi"] .row > canvas.mfx-scope { flex: 1 1 0; width: 0; align-self: flex-start; } /* AUTO-TUNA: the ring inline beside ROOT and SCALE; OMNICHORDY: the keyboard strip on top */ html.host-plugin #pages .plate[data-area="mtu"] .row:has(> canvas.mfx-ring) { flex-wrap: nowrap; } html.host-plugin #pages .plate[data-area="mtu"] canvas.mfx-ring { width: 74px; height: 74px; flex: none; } html.host-plugin #pages .mfx-line .mfx-key { cursor: pointer; background: transparent; } html.host-plugin #pages .plate.mfx-card .ctl.off { opacity: 0.55; } /* BOZZ SHIMMER-2: four K1 dials to a 1-column row (50 px cells), MODE wider for its names */ html.host-plugin #pages .plate[data-area="msh"] :is(.ctl, .sw) { width: 50px; } html.host-plugin #pages .plate[data-area="msh"] .ctl.mfx-wide { width: 84px; } html.host-plugin #pages .plate[data-area="msh"] .row { column-gap: 3px; flex-wrap: nowrap; } /* ROLLAND TRANCE-909: the lane (16 coin stacks + the window ring, panel 96) over the pattern row and VOICE / INV / EMPH on the * left, RATE GATE | WINDOW HOP | SWING OCT on the right; More swaps the lane, the segments and the dials for two K1 rows */ html.host-plugin #pages .plate[data-area="mtr"] .mtr-wrap { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-l { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-r { flex: none; display: flex; flex-direction: column; justify-content: space-between; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-r .row { flex-wrap: nowrap; column-gap: 10px; } html.host-plugin #pages .plate[data-area="mtr"] canvas.mfx-lane { width: 100%; height: 96px; flex: none; cursor: pointer; } html.host-plugin #pages .plate[data-area="mtr"] :is(.mtr-pat, .mtr-segs) { display: flex; align-items: center; gap: 4px; height: 32px; flex: none; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-segs { gap: 12px; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-lab, html.host-plugin #pages .plate[data-area="mtr"] .mtr-seg > .lab { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lav); margin: 0 2px 0 0; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-lab + .mtr-step { margin-left: 0; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-seg { display: flex; flex-direction: row; align-items: center; gap: 4px; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-seg .seg { display: flex; gap: 0; border: 0; padding: 0; height: 32px; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-seg .seg button { height: 32px; min-height: 32px; min-width: 32px; padding: 0 6px; font-size: 11px; border: 2px solid var(--pc); box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-seg .seg button + button { border-left: 0; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-pat button { height: 32px; min-height: 32px; min-width: 32px; box-sizing: border-box; border: 2px solid var(--pc); background: transparent; color: var(--pc); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-pat .mtr-name { width: 132px; justify-content: flex-start; white-space: nowrap; overflow: hidden; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-pat .mtr-step { width: 32px; padding: 0; font-size: 14px; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-pat .mtr-lab:not(:first-child) { margin-left: 10px; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-len { min-width: 26px; text-align: center; font-size: 12px; font-weight: 800; color: var(--pc); } html.host-plugin #pages .plate[data-area="mtr"] .mtr-more-b { margin-left: auto; padding: 0 12px; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-more-b[aria-pressed="true"] { background: var(--pc); color: #000; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-tri { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; display: block; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-tri.l { border-right: 6px solid var(--pc); } html.host-plugin #pages .plate[data-area="mtr"] .mtr-tri.r { border-left: 6px solid var(--pc); } html.host-plugin #pages .plate[data-area="mtr"] .mtr-more { display: none; flex-direction: column; gap: 8px; } html.host-plugin #pages .plate[data-area="mtr"].more .mtr-more { display: flex; } html.host-plugin #pages .plate[data-area="mtr"].more :is(canvas.mfx-lane, .mtr-segs, .mtr-r) { display: none; } html.host-plugin #pages .plate[data-area="mtr"] .mtr-more .row { flex-wrap: nowrap; justify-content: space-between; } /* KORGG RHYTHM-A-LOT 5000 (PLAY > RHYTHM ARP, S5b): one card under the head row; the 12 figure tiles (3 x 4) beside the big grid, * the arp's dials and the five switches along the foot; the Arp cell's head carries the figure's 16-square minimap */ html.host-plugin #pages .page.play:not(.sub-rhy) > .plate.rhy-card { display: none; } html.host-plugin #pages .page.play.sub-rhy > .plate:not(.rhy-card), html.host-plugin #pages .page.play.sub-rhy > .mfx-line { display: none; } html.host-plugin #pages .page.play > .plate[data-area="mra"] { grid-column: 1 / -1; grid-row: 2 / span 16; } html.host-plugin #pages .plate[data-area="mra"] > .plate-body { justify-content: space-between; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mode .seg { display: flex; gap: 0; border: 0; padding: 0; height: 32px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mode .seg button { height: 32px; min-height: 32px; min-width: 32px; padding: 0 12px; font-size: 11px; border: 2px solid var(--pc); box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mode .seg button + button { border-left: 0; } html.host-plugin #pages .plate[data-area="mra"] .rhy-main { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; } html.host-plugin #pages .plate[data-area="mra"] .rhy-tiles { flex: none; width: 520px; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 4px; padding: 6px 8px; min-height: 32px; box-sizing: border-box; background: transparent; border: 2px solid #3A3A44; color: var(--pc); cursor: pointer; text-align: left; overflow: hidden; } html.host-plugin #pages .plate[data-area="mra"] .rhy-tile b { font-size: 12px; font-weight: 800; letter-spacing: 0.03em; white-space: nowrap; } html.host-plugin #pages .plate[data-area="mra"] .rhy-tile .rhy-sub { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 13px; color: var(--lav); } html.host-plugin #pages .plate[data-area="mra"] .rhy-tile.on { border-color: var(--pc); } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini { display: grid; grid-template-columns: repeat(16, 8px); gap: 2px; align-items: end; height: 12px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini.two { grid-template-rows: 12px 12px; height: 26px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini i { display: block; width: 8px; box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini i.l0 { height: 4px; border: 1px solid #3A3A44; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini i.l1 { height: 6px; border: 1px solid var(--pc); } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini i.l2 { height: 8px; background: #6E677E; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini i.l3 { height: 12px; background: #6E677E; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini i.l4 { height: 4px; background: #A9ED43; } html.host-plugin #pages .plate[data-area="mra"] .rhy-tile.on .rhy-mini i:is(.l2, .l3) { background: var(--pc); } html.host-plugin #pages .plate[data-area="mra"] .rhy-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-top { display: flex; align-items: center; gap: 6px; height: 32px; flex: none; } html.host-plugin #pages .plate[data-area="mra"] .rhy-now { flex: 1 1 auto; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pc); white-space: nowrap; overflow: hidden; } html.host-plugin #pages .plate[data-area="mra"] .rhy-page { height: 32px; padding: 0 10px; display: inline-flex; align-items: center; box-sizing: border-box; border: 2px solid #3A3A44; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--lav); } html.host-plugin #pages .plate[data-area="mra"] .rhy-page.on { border-color: #43D0EC; color: #43D0EC; } html.host-plugin #pages .plate[data-area="mra"] .rhy-sug { height: 32px; min-height: 32px; padding: 0 12px; box-sizing: border-box; border: 2px solid var(--pc); background: transparent; color: var(--pc); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } html.host-plugin #pages .plate[data-area="mra"] canvas.rhy-grid { flex: 1 1 0; min-height: 0; width: 100%; height: auto; } html.host-plugin #pages .plate[data-area="mra"] .rhy-foot { display: flex; flex-direction: column; gap: 8px; flex: none; } html.host-plugin #pages .plate[data-area="mra"] .rhy-foot > .row { flex-wrap: nowrap; justify-content: space-between; } html.host-plugin #pages .plate[data-area="mra"] .rhy-segs { display: flex; justify-content: space-between; align-items: center; height: 32px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-seg { display: flex; flex-direction: row; align-items: center; gap: 6px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-seg > .lab { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lav); margin: 0; } html.host-plugin #pages .plate[data-area="mra"] .rhy-seg .seg { display: flex; gap: 0; border: 0; padding: 0; height: 32px; } html.host-plugin #pages .plate[data-area="mra"] .rhy-seg .seg button { height: 32px; min-height: 32px; min-width: 32px; padding: 0 10px; font-size: 11px; border: 2px solid var(--pc); box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mra"] .rhy-seg .seg button + button { border-left: 0; } html.host-plugin #pages .plate[data-area="arp"] > .plate-head .rhy-mmb { margin-left: auto; height: 32px; min-height: 32px; width: 248px; padding: 2px 4px; box-sizing: border-box; background: transparent; border: 2px solid #3A3A44; cursor: pointer; display: inline-flex; align-items: center; } html.host-plugin #pages .plate[data-area="arp"] > .plate-head .rhy-mmb canvas { width: 236px; height: 24px; display: block; } html.host-plugin #pages .plate.rhy-card > .plate-head { min-height: 32px; flex-wrap: nowrap; } html.host-plugin #pages .plate.rhy-card .mfx-head-r { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; } html.host-plugin #pages .plate.rhy-card .mfx-say { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 11px; line-height: 14px; } html.host-plugin #pages .plate.rhy-card .mfx-plain { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--pc); letter-spacing: 0; } html.host-plugin #pages .plate.rhy-card .mfx-tag { color: var(--lav); font-weight: 700; } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini { grid-template-columns: repeat(16, 7px); } html.host-plugin #pages .plate[data-area="mra"] .rhy-mini i { width: 7px; } /* GOGGLE TRANSLATE: four tiles 2 x 2: the name line (and the fire light) over the LED / More column beside a K1 row */ html.host-plugin #pages .plate[data-area="mgo"] .go-tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px 8px; flex: 1 1 auto; min-height: 0; } html.host-plugin #pages .plate[data-area="mgo"] .go-tile { border: 2px solid #3A3A44; padding: 2px 4px; display: flex; flex-direction: column; gap: 0; min-width: 0; min-height: 0; box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mgo"] .go-tile.lit { border-color: var(--pc); } html.host-plugin #pages .plate[data-area="mgo"] .go-head { display: flex; align-items: center; gap: 6px; height: 14px; flex: none; } html.host-plugin #pages .plate[data-area="mgo"] .go-head b { flex: 1 1 auto; font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pc); white-space: nowrap; } html.host-plugin #pages .plate[data-area="mgo"] > .plate-head .go-rmode { display: flex; align-items: center; gap: 4px; flex: none; height: 32px; } html.host-plugin #pages .plate[data-area="mgo"] > .plate-head .go-rlab { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pc); } html.host-plugin #pages .plate[data-area="mgo"] .go-rseg { display: flex; flex-wrap: nowrap; flex: none; gap: 0; border: 0; padding: 0; height: 32px; min-height: 0; } html.host-plugin #pages .plate[data-area="mgo"] .go-rseg button { height: 32px; min-height: 32px; min-width: 36px; padding: 0 4px; font-size: 11px; line-height: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; border: 2px solid var(--pc); box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mgo"] .go-rseg button + button { border-left: 0; } html.host-plugin #pages .plate[data-area="mgo"] .go-head .mfx-pip { width: 10px; height: 10px; border: 2px solid var(--pc); display: block; flex: none; box-sizing: border-box; } html.host-plugin #pages .plate[data-area="mgo"] .go-head .mfx-pip.hit { background: var(--pc); } html.host-plugin #pages .plate[data-area="mgo"] .go-body { display: flex; gap: 4px; flex: 1 1 auto; min-height: 0; align-items: flex-start; } html.host-plugin #pages .plate[data-area="mgo"] .go-side { display: flex; flex-direction: column; gap: 4px; flex: none; width: 42px; padding-top: 4px; } html.host-plugin #pages .plate[data-area="mgo"] .go-side .mfx-led { width: 32px; height: 32px; min-height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 2px solid var(--pc); cursor: pointer; } html.host-plugin #pages .plate[data-area="mgo"] .go-side .mfx-led i { width: 12px; height: 12px; border: 2px solid var(--pc); display: block; } html.host-plugin #pages .plate[data-area="mgo"] .go-side .mfx-led.on i { background: var(--pc); } html.host-plugin #pages .plate[data-area="mgo"] .go-more-b { width: 42px; height: 32px; min-height: 32px; padding: 0; box-sizing: border-box; border: 2px solid var(--pc); background: transparent; color: var(--pc); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; cursor: pointer; } html.host-plugin #pages .plate[data-area="mgo"] .go-more-b[aria-pressed="true"] { background: var(--pc); color: #000; } html.host-plugin #pages .plate[data-area="mgo"] .go-dials { flex: 1 1 0; min-width: 0; } html.host-plugin #pages .plate[data-area="mgo"] .go-dials .row { flex-wrap: nowrap; justify-content: space-between; column-gap: 2px; } html.host-plugin #pages .plate[data-area="mgo"] .go-dials :is(.ctl, .sw) { width: 54px; } html.host-plugin #pages .plate[data-area="mgo"] .go-tile .go-more { display: none; } html.host-plugin #pages .plate[data-area="mgo"] .go-tile.more .go-more { display: flex; } html.host-plugin #pages .plate[data-area="mgo"] .go-tile.more .go-main { display: none; } /* RIGS and JACKPOT (S7): on PLAY's sub-tab row, MIDI FX only; the list drops below RIGS (no shadow: a 2 px outline on black) */ html.host-plugin #pages .playtabs .mfx-rigbar { display: none; position: relative; align-items: center; gap: 4px; flex: none; height: 32px; margin-right: auto; } html.host-plugin #pages .page.play.sub-mfx .playtabs .mfx-rigbar { display: flex; } html.host-plugin #pages .playtabs .mfx-rigbar > button { height: 32px; min-height: 32px; padding: 0 12px; box-sizing: border-box; background: transparent; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } html.host-plugin #pages .playtabs .mfx-rigs { border: 2px solid var(--sub-mfx, #45A7EF); color: var(--sub-mfx, #45A7EF); min-width: 72px; } html.host-plugin #pages .playtabs .mfx-rigs[aria-expanded="true"] { background: var(--sub-mfx, #45A7EF); color: #000; } html.host-plugin #pages .playtabs .mfx-jackpot { border: 2px solid #F4B43B; color: #F4B43B; } html.host-plugin #pages .playtabs .mfx-jackpot:active, html.host-plugin #pages .playtabs .mfx-jackpot.won { background: #F4B43B; color: #000; } html.host-plugin #pages .playtabs .mfx-jackpot.won { animation: mfx-won 0.9s step-end 1 forwards; } @keyframes mfx-won { 0%, 32%, 66% { background: #F4B43B; color: #000; } 16%, 50%, 83% { background: #000; color: #F4B43B; } 100% { background: transparent; color: #F4B43B; } } html.host-plugin #board > .mfx-rigmenu { position: absolute; z-index: 60; width: 460px; background: #000; border: 2px solid var(--sub-mfx, #45A7EF); display: flex; flex-direction: column; padding: 4px; gap: 2px; box-sizing: border-box; } html.host-plugin #board > .mfx-rigmenu[hidden] { display: none; } html.host-plugin #board > .mfx-rigmenu button { min-height: 32px; height: auto; padding: 3px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: transparent; border: 0; border-left: 3px solid transparent; cursor: pointer; text-align: left; } html.host-plugin #board > .mfx-rigmenu button:hover, html.host-plugin #board > .mfx-rigmenu button:focus-visible { border-left-color: #F4B43B; } html.host-plugin #board > .mfx-rigmenu b { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: #F4B43B; } html.host-plugin #board > .mfx-rigmenu span { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; line-height: 14px; color: var(--lav); } /* JACKPOT's casino lights: the chain's chips flash in turn */ html.host-plugin #pages .mfx-line .mfx-chain.chase .mfx-ch { animation: mfx-chase 0.6s step-end 2; } @keyframes mfx-chase { 0% { background: var(--fc); color: #000; } 50% { background: #000; color: var(--fc); } 100% { background: #000; color: var(--fc); } } /* (hard on / off: no in-between colour) */ html.host-plugin #pages .mfx-line .mfx-chain.chase .mfx-ch:nth-of-type(2) { animation-delay: 0.08s; } html.host-plugin #pages .mfx-line .mfx-chain.chase .mfx-ch:nth-of-type(3) { animation-delay: 0.16s; } html.host-plugin #pages .mfx-line .mfx-chain.chase .mfx-ch:nth-of-type(4) { animation-delay: 0.24s; } html.host-plugin #pages .mfx-line .mfx-chain.chase .mfx-ch:nth-of-type(5) { animation-delay: 0.32s; } html.host-plugin #pages .mfx-line .mfx-chain.chase .mfx-ch:nth-of-type(6) { animation-delay: 0.40s; } html.host-plugin #pages .mfx-line .mfx-chain.chase .mfx-ch:nth-of-type(7) { animation-delay: 0.48s; } /* the flow strip's ARP chip: a long RHY-ARP name never pushes the strip */ html.host-plugin #pages .flow .flow-arp { max-width: 300px; overflow: hidden; } html.host-plugin #pages .flow .flow-arp .flow-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* UPGRADE: VOICES / DELUXE on the 6 x 17 grid: Poly-Moddy 3c, Uni-son 3c | Brass 3c, Release me 3c | Ribbon's settings full width */ html.host-plugin #pages .page.deluxe > .plate[data-area="pmd"] { grid-column: 1 / 4; grid-row: 2 / span 8; } html.host-plugin #pages .page.deluxe > .plate[data-area="uni"] { grid-column: 4 / 7; grid-row: 2 / span 8; } html.host-plugin #pages .page.deluxe > .plate[data-area="brs"] { grid-column: 1 / 4; grid-row: 10 / span 5; } html.host-plugin #pages .page.deluxe > .plate[data-area="rel"] { grid-column: 4 / 7; grid-row: 10 / span 5; } html.host-plugin #pages .page.deluxe > .plate[data-area="rib"] { grid-column: 1 / 7; grid-row: 15 / span 3; } html.host-plugin #pages .page.deluxe > .plate .plate-note { font-size: 11px; line-height: 1.25; } /* PAN on the 6 x 17 grid: Fingers 3c, Voice pan 3c | Auto-pan 3c, Cutoff > Pan 3c | Oscillator pan full width */ html.host-plugin #pages .page.pan > .plate[data-area="pfg"] { grid-column: 1 / 4; grid-row: 2 / span 6; } html.host-plugin #pages .page.pan > .plate[data-area="pvp"] { grid-column: 4 / 7; grid-row: 2 / span 6; } html.host-plugin #pages .page.pan > .plate[data-area="pap"] { grid-column: 1 / 4; grid-row: 8 / span 6; } html.host-plugin #pages .page.pan > .plate[data-area="pcp"] { grid-column: 4 / 7; grid-row: 8 / span 6; } html.host-plugin #pages .page.pan > .plate[data-area="pop"] { grid-column: 1 / 7; grid-row: 14 / span 4; } html.host-plugin #pages .page.pan > .plate .plate-note { font-size: 11px; line-height: 1.25; } /* PAN: a little air between a cell's knob row and its switch row (fills the 6-row cells to the grid's fill rule at every host zoom) */ html.host-plugin #pages .page.pan > .plate .plate-body > .row + .row { margin-top: 16px !important; } html.host-plugin #pages .page.pan > .plate[data-area="pfg"] canvas { height: 74px !important; }