/* elite-pages.css — DH #507 Deliverable 2: Default / Large scalable sizing. Ported 1:1 from the DH #507 brief (task #4789, lane 5, wave ss-dh-elite-r1). THE POINT OF THIS FILE, stated once so nobody re-hardcodes past it: the elite skin's density was literal pixels — 26px rows, 11px text, 22px controls — spread across cueroom-elite.css / shell.css / sfxsel.css / sspt-b.css. That is why "make it bigger for a long session" was not a setting: there was nothing to turn. This file makes the density a LADDER OF VARIABLES driven by ONE root multiplier, so a size tier is a variable swap and never a second hand-maintained stylesheet (brief, D2 verbatim). ⛔ DO NOT paste raw px back into the elite stylesheets for anything on this ladder. If a value should scale with the size setting, it belongs here. TIERS. The multiplier is the only thing a tier changes. Default --ep-scale: 1 — the CURRENT elite density, unchanged. Large --ep-scale: 1.2 — the readability/accessibility tier the brief asks for ("older editors and long sessions"). Compact --ep-scale: 0.9 — architected now, per the brief's "cheap to add later". Shipped INERT: no Preferences control offers it, because the brief ships two tiers. Adding it later is one option in the picker. FIDELITY NOTE (measured, not asserted): at Default every token below evaluates to the exact literal it replaced, so Default renders byte-identically to the pre-port skin. That is the whole fidelity claim for D2 and it is checkable — see proof/d2-token-parity.tsv in the lane report. */ /* ── the multiplier ──────────────────────────────────────────────────────── On (not :root's cascade origin alone) because the Preferences control writes data-ep-size there, and a document-level attribute is the one place every surface — shell, panels, portalled overlays, the companion window — can see it without prop-drilling a size through React. */ html { --ep-scale: 1; } html[data-ep-size="default"]{ --ep-scale: 1; } html[data-ep-size="large"] { --ep-scale: 1.2; } html[data-ep-size="compact"]{ --ep-scale: 0.9; } /* inert until a tier picker offers it */ :root { /* ── the six the brief names ─────────────────────────────────────────── */ --ep-row-h: calc(26px * var(--ep-scale)); /* list/table row */ --ep-fs: calc(11px * var(--ep-scale)); /* base body/label text */ --ep-control-h: calc(22px * var(--ep-scale)); /* buttons, inputs, selects */ --ep-chip-h: calc(18px * var(--ep-scale)); /* status/meta chips */ --ep-gap: calc(8px * var(--ep-scale)); /* the standard inline gap */ --ep-tc-fs: calc(12px * var(--ep-scale)); /* mono timecode readout */ /* ── the rest of the ladder the skin actually uses ─────────────────────── These are not extras: every one is a literal that appears in the elite stylesheets and would otherwise stay pinned while the six above scaled, which is exactly how a half-scaled UI happens. */ --ep-top-h: calc(38px * var(--ep-scale)); /* window/page top bar */ --ep-rail-h: calc(26px * var(--ep-scale)); /* rail header row */ --ep-btn-h: calc(26px * var(--ep-scale)); /* key-parity button (ce-kbtn) */ --ep-mark: calc(20px * var(--ep-scale)); /* square brand mark */ /* type ramp — the elite skin's fractional sizes are deliberate, keep them */ --ep-fs-xs: calc(7px * var(--ep-scale)); /* micro label */ --ep-fs-label: calc(7.5px * var(--ep-scale)); /* uppercase tracked label */ --ep-fs-kbd: calc(8.5px * var(--ep-scale)); /* kbd caps, chip text */ --ep-fs-sm: calc(9.5px * var(--ep-scale)); /* secondary */ --ep-fs-sub: calc(10.5px * var(--ep-scale)); /* subtitle */ --ep-fs-base: calc(12px * var(--ep-scale)); /* window base */ --ep-fs-lg: calc(13.5px * var(--ep-scale)); /* emphasis */ --ep-fs-xl: calc(15px * var(--ep-scale)); /* counter numeral */ /* spacing ramp */ --ep-gap-xs: calc(5px * var(--ep-scale)); --ep-gap-sm: calc(6px * var(--ep-scale)); --ep-gap-md: calc(7px * var(--ep-scale)); --ep-gap-lg: calc(10px * var(--ep-scale)); --ep-pad-x: calc(10px * var(--ep-scale)); /* standard row padding-x */ --ep-pad-btn: calc(9px * var(--ep-scale)); /* button padding-x */ /* ⛔ NOT on the ladder, on purpose. Hairlines and radii are the elite look itself (brief: "hairlines, 0–2px radii"). A 1px rule scaled to 1.2px stops being a hairline and starts being a border, and a 2px radius scaled up reads as a rounded SaaS card — the exact aesthetic the brief forbids. Dots, rules and radii therefore stay literal everywhere. */ } /* ── Large-tier touch/hit-area correction ────────────────────────────── Scaling a 22px control to 26.4px is the readability half. The accessibility half is that the Large tier is also what someone reaches for on a docked half-screen with a trackpad, so the interactive minimum comes up with it. */ html[data-ep-size="large"] { --ep-hit-min: 28px; } :root { --ep-hit-min: 0px; } /* ── adoption surface ────────────────────────────────────────────────────── Rules below are the port's own; the per-file conversions live in the elite stylesheets that already own those selectors (cueroom-elite.css, shell.css). Anything here is a NEW element this DH introduces (Preferences, the keyboard overlay), styled in the elite vocabulary from the start. */ /* Preferences — D3. Extends the owner Settings surface per the brief's recommendation ("extends the existing owner Settings drawer with a 'Preferences' section"), so it inherits ss-set-sec / ss-set-h wholesale and only styles what is genuinely new: the segmented tier pickers. */ .ep-prefs { display: flex; flex-direction: column; gap: calc(var(--ep-gap) * 1.5); } .ep-pref-row { display: flex; align-items: flex-start; gap: var(--ep-gap-lg); padding: var(--ep-gap) 0; border-bottom: 1px solid var(--line-soft); } .ep-pref-row:last-child { border-bottom: 0; } .ep-pref-lab { flex: 0 0 260px; min-width: 0; } .ep-pref-lab .t { display: block; font-size: var(--ep-fs); color: var(--fg-strong); } .ep-pref-lab .d { display: block; font-size: var(--ep-fs-sm); color: var(--fg-dim); margin-top: 2px; line-height: 1.45; } .ep-pref-ctl { display: flex; align-items: center; gap: var(--ep-gap-sm); flex-wrap: wrap; min-width: 0; max-width: 100%; flex: 1 1 auto; } /* segmented picker — sharp rectangles, hairlines, ONE teal for the live choice */ .ep-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; } .ep-seg button { appearance: none; background: var(--bg-sub); border: 0; cursor: pointer; font-family: var(--ui); font-size: var(--ep-fs); color: var(--fg-mute); height: var(--ep-control-h); min-height: var(--ep-hit-min); padding: 0 var(--ep-pad-x); border-right: 1px solid var(--line); } .ep-seg button:last-child { border-right: 0; } .ep-seg button:hover { background: var(--bg-row-hover); color: var(--fg); } .ep-seg button.on { color: var(--ss-accent); background: var(--ss-accent-bg); } .ep-seg button[disabled] { color: var(--fg-faint); cursor: default; background: var(--bg-sub); } .ep-seg kbd { font-family: var(--mono); font-size: var(--ep-fs-kbd); color: inherit; border: 1px solid var(--line); border-radius: 2px; padding: 0 3px; margin-left: 6px; opacity: .8; } .ep-pref-note { font-size: var(--ep-fs-sm); color: var(--fg-dim); line-height: 1.5; } .ep-pref-note b { color: var(--fg); font-weight: 550; } /* the size preview — shows the tier on a real row, not an abstract slider */ .ep-size-demo { border: 1px solid var(--line); border-radius: 2px; background: var(--bg-deep); padding: var(--ep-gap-sm); display: flex; flex-direction: column; gap: 1px; min-width: 200px; } .ep-size-demo .r { display: flex; align-items: center; gap: var(--ep-gap); height: var(--ep-row-h); padding: 0 var(--ep-pad-x); background: var(--bg-row); font-size: var(--ep-fs); color: var(--fg); } .ep-size-demo .r .tc { font-family: var(--mono); font-size: var(--ep-tc-fs); color: var(--tc-green); } /* ── D4: the ? cheat-sheet overlay ──────────────────────────────────────── Grouped by tier (Core / Tune / SSPT), left-hand cluster drawn, fallbacks shown quietly beside their primary — the brief's overlay spec, verbatim. */ .ep-keys-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; } .ep-keys { background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: 2px; box-shadow: 0 18px 48px rgba(0,0,0,.5); width: min(940px, 100%); max-height: 88vh; display: flex; flex-direction: column; font-family: var(--ui); color: var(--fg); } .ep-keys .kh { display: flex; align-items: center; gap: var(--ep-gap); flex-shrink: 0; height: var(--ep-top-h); padding: 0 var(--ep-pad-x); border-bottom: 1px solid var(--line); background: var(--bg-panel); } .ep-keys .kh .t { font-size: var(--ep-fs-base); color: var(--fg-strong); font-weight: 500; } .ep-keys .kh .s { font-size: var(--ep-fs-sub); color: var(--fg-dim); } .ep-keys .kh .sp { flex: 1; } .ep-keys .kh .x { appearance: none; background: transparent; border: 1px solid var(--line); border-radius: 2px; color: var(--fg-mute); cursor: pointer; height: var(--ep-chip-h); min-width: var(--ep-chip-h); font-size: var(--ep-fs); } .ep-keys .kh .x:hover { color: var(--fg-strong); border-color: var(--line-strong); } .ep-keys .kbody { overflow: auto; padding: var(--ep-pad-x); display: flex; gap: var(--ep-pad-x); align-items: flex-start; flex-wrap: wrap; } /* the drawn left-hand cluster */ .ep-hand { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 2px; background: var(--bg-deep); padding: var(--ep-gap); } .ep-hand .hl { font-size: var(--ep-fs-label); letter-spacing: .17em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: var(--ep-gap-sm); } .ep-hand .hrow { display: flex; gap: 3px; margin-bottom: 3px; } .ep-hand .hk { display: inline-flex; align-items: center; justify-content: center; width: calc(24px * var(--ep-scale)); height: calc(24px * var(--ep-scale)); border: 1px solid var(--line); border-radius: 2px; background: var(--bg-sub); font-family: var(--mono); font-size: var(--ep-fs-kbd); color: var(--fg-faint); } .ep-hand .hk.lit { color: var(--ss-accent); border-color: var(--ss-accent-line); background: var(--ss-accent-bg); } .ep-hand .hk.wide { width: calc(52px * var(--ep-scale)); } .ep-hand .hk.thumb { width: calc(104px * var(--ep-scale)); } .ep-hand .hnote { font-size: var(--ep-fs-xs); color: var(--fg-dim); margin-top: var(--ep-gap-sm); line-height: 1.5; } /* the tiers */ .ep-ktiers { flex: 1 1 360px; min-width: 300px; display: flex; flex-direction: column; gap: var(--ep-gap); } .ep-ktier .tl { display: flex; align-items: baseline; gap: var(--ep-gap-sm); font-size: var(--ep-fs-label); letter-spacing: .17em; text-transform: uppercase; color: var(--fg-dim); padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); } .ep-ktier .tl .n { text-transform: none; letter-spacing: 0; font-size: var(--ep-fs-sm); color: var(--fg-faint); } .ep-krow { display: flex; align-items: baseline; gap: var(--ep-gap); padding: 3px 0; border-bottom: 1px solid var(--line-soft); } .ep-krow:last-child { border-bottom: 0; } .ep-krow .kk { flex: 0 0 auto; min-width: calc(96px * var(--ep-scale)); display: flex; gap: 4px; align-items: center; } .ep-krow .kd { flex: 1; font-size: var(--ep-fs); color: var(--fg); line-height: 1.45; } .ep-krow .kfb { flex: 0 0 auto; font-size: var(--ep-fs-sm); color: var(--fg-faint); } .ep-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: calc(18px * var(--ep-scale)); height: var(--ep-chip-h); padding: 0 5px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg-deep); font-family: var(--mono); font-size: var(--ep-fs-kbd); color: var(--fg-strong); } .ep-kbd.acc { color: var(--ss-accent); border-color: var(--ss-accent-line); } .ep-keys .kf { flex-shrink: 0; border-top: 1px solid var(--line); padding: var(--ep-gap) var(--ep-pad-x); font-size: var(--ep-fs-sm); color: var(--fg-dim); } /* ── D1 helper: the V/H flip on master-detail surfaces ──────────────────── The brief defines V as "flips the list-and-detail split from side-by-side (H) to stacked (V)" — a direction change, not a different design. Surfaces opt in by carrying .ep-md; nothing else changes shape. Pure full-width tables (History, Notifications, Media lists) deliberately DO NOT carry it: the brief says "NO vertical variant. Do not force one." */ .ep-md { display: flex; min-height: 0; min-width: 0; } .ep-md[data-ep-layout="h"] { flex-direction: row; } .ep-md[data-ep-layout="v"] { flex-direction: column; } /* #6676 — project settings is a scrolling document. The later shell.css rule lets the non-owner Media section shrink to zero, which put its header and body on top of Timecode once Preferences made the page taller. Preserve the section's original 520px flow height; the extra html selector intentionally outranks the later generic shell rule without !important. */ html .ss-settings-surface:not(.has-admin) .ss-settings-media { flex: 1 0 auto; min-height: 520px; } /* #6676 — the 390px contract is a stacked settings form, not a clipped desktop row. Every choice remains rendered and interactive. */ @media (max-width: 600px) { .ep-pref-row { flex-direction: column; gap: var(--ep-gap-sm); } .ep-pref-lab { width: 100%; min-width: 0; flex: 0 0 auto; } .ep-pref-ctl { width: 100%; } .ep-size-demo { width: 100%; min-width: 0; box-sizing: border-box; } .ep-pref-surface-row { flex-direction: column; align-items: stretch !important; width: 100%; min-width: 0; gap: 4px !important; } .ep-pref-surface-row > .ep-pref-note { min-width: 0 !important; width: 100%; } .ep-pref-surface-row > .ep-seg { align-self: flex-start; max-width: 100%; } }