diff --git a/.planning/phases/05-live-show-execution/05-UI-SPEC.md b/.planning/phases/05-live-show-execution/05-UI-SPEC.md index 9e5562f..1f49be4 100644 --- a/.planning/phases/05-live-show-execution/05-UI-SPEC.md +++ b/.planning/phases/05-live-show-execution/05-UI-SPEC.md @@ -34,13 +34,11 @@ Declared values (multiples of 4 only): | Token | Value | Usage | |-------|-------|-------| -| xs | 4px | Inner icon gaps, strip padding (`padding: 0 4px`) | +| xs | 4px | Inner icon gaps, strip padding (`padding: 0 4px`), live-preview top/bottom padding | | sm | 8px | Element gaps inside device strips, panel content padding top/bottom | -| md | 12px | Header/transport bar horizontal padding | -| lg | 16px | Timeline toolbar gap between field groups | +| lg | 16px | Header/transport bar horizontal padding | | xl | 24px | — | | 2xl | 32px | Timeline toolbar fixed height | -| transport | 52px | Transport bar grid row height (existing, do not change) | Exceptions: - Device strip row height: 18px (compact single-line strip — matches existing `.block-inspector` at 40px; preview is intentionally denser) @@ -48,6 +46,9 @@ Exceptions: - Strip color swatch: 40px wide × 10px tall (fixed decoration element) - Live preview panel max-height: 60px (D-06 from CONTEXT.md, overflows to scroll if many devices) +Fixed dimensions (not spacing tokens — declared here for executor reference): +- Transport bar grid row height: 52px (existing fixed dimension, unchanged from Phase 4) + Source: CONTEXT.md D-06 "Compact — 40-60px total" + RESEARCH.md Pattern 2 CSS. --- @@ -98,6 +99,8 @@ All values use existing CSS custom properties. No new color tokens for Phase 5. **Live preview color fills:** The preview device strip color swatch uses the cue's `params.color` value (RGB array from the animation block) as `background-color: rgb(r, g, b)`. This is data-driven, not a design token. Inactive state uses `--text-dim` (`#555555`) as fill. +**Focal point:** The active `.device-strip` color swatch is the primary visual signal during playback. The color fill (data-driven RGB from the animation cue) is the focal point of the live preview panel — all other elements in the strip are secondary context for which device and animation is active. + Source: `style.css` entire file; CONTEXT.md D-11/D-12/D-15; Phase 1 CONTEXT.md D-11 through D-15. --- @@ -142,7 +145,7 @@ Collapsing: If device count > 3, panel height exceeds 60px and scrolls via `over display: flex; flex-direction: column; gap: 1px; - padding: 2px 0; + padding: 4px 0; max-height: 60px; overflow-y: auto; flex-shrink: 0; @@ -155,7 +158,7 @@ Collapsing: If device count > 3, panel height exceeds 60px and scrolls via `over padding: 0 4px; background: var(--bg-panel); gap: 8px; - font-size: 11px; + font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.05em; transition: background-color 0.1s; @@ -309,6 +312,9 @@ Transport bar remains in `.app-shell` grid `transport` area — it is NOT inside The show selector controls are added to the existing `.transport-bar` flex row. +Fixed dimensions (not spacing tokens): +- Transport bar grid row height: 52px (existing, do not change) + --- ## Registry Safety