Item cards (Automations, Channels, Inputs, Integrations):
- `.card-title` — bumped to weight 700, -0.01em tracking, solid --lux-ink
for better presence against the flat card bg.
- `.card-subtitle` / `.card-meta` — mono font, 0.04em tracking, tighter
gap so rule chips pack in a readable row.
- `.stream-card-prop` rule chips — rectangular 2px radius + hairline
border + flat dark bg (was rounded 10px grey pill). Channel-signal
icon tint; hover fades in a channel-green wash with matching border.
- `.badge` generic — rectangular 2px radius, mono 0.62rem, 0.12em
tracking, hairline border slot for variants.
- `.badge-automation-active` — channel-signal tinted bg + border +
soft outer glow so the "ACTIVE" state reads at a glance.
- `.badge-automation-inactive` / `-disabled` — transparent with a
hairline outline so they sit quietly alongside the active variant.
- `.device-url-badge` — switched from rounded pill to rectangular
hairline mono chip; hover shifts to filled bg + bolder border +
brighter ink.
- `.card-actions` — 1px hairline top divider, 6px gap.
- `.btn-icon` — 7/10px padding, 1rem icon, hairline border, channel-
signal glow on hover (replaces the old scale(1.1) jiggle).
- `.btn-icon.btn-warning` — amber ink + hairline + amber hover glow
(drives the "disable" action in the automation card).
- `.btn-icon.btn-success` — signal-green ink + hairline + green hover
glow ("enable" action).
Cross-link navigation highlight:
- `cardHighlight` keyframes were using an undefined `--primary-rgb` var,
so the outer glow fell back to 59/130/246 (the Tailwind blue default).
Rewritten with `var(--ch-signal)` + color-mix so the highlight tracks
the accent picker and reads as signal-green. Added double-layer
box-shadow (ring + 32px/10px bloom) so the highlight is obvious on
the flat dark/light card surfaces. Added .dashboard-target to the
selector + `isolation: isolate` so the glow isn't clipped inside
overflow: hidden containers (perf strip cells, tree-nav panels).
Perf strip (follow-up polish):
- Total FPS cell shows `/<N>` ceiling suffix next to the live value —
sum of fps_target across running targets, styled like the Patches
"/12". A dashed horizontal reference line at that ceiling is rendered
on the sparkline so the live value reads as "percentage of max
achievable throughput." Y-axis ceiling grows to targetSum * 1.1 so
the dashed line never clips.
- Removed the empty `.perf-chart-app` pill in the FPS cell (no app
variant). Added `:empty { display: none }` as a safety so any other
unpopulated cell doesn't render a ghost pill.
- Hover tooltips on all sparks — single floating `.perf-chart-tooltip`
in <body> with fixed positioning; event-delegated from the perf
grid so re-renders don't need rebinding. Shows metric label + sys
value + app value (in both-mode) + "−Ns ago" age line derived from
the poll interval. Vertical marker line follows the cursor over the
spark; `cursor: crosshair` on the spark container signals interact-
ability. `pointer-events: none` shifted from the spark container
down to the inner SVG so hover events land on the container.
Grid:
- Perf strip capped at 4 cols even on widescreen; wraps to 2 rows ×
4 when the full 7 cells are present. Responsive breakpoints at
1100 / 760 / 480 px.
- Big value font uses `clamp(1.8rem, 2.8vw, 2.8rem)` so readouts
like "18.9/31.8 GB" fit a 1fr cell at desktop while still scaling
down on narrow viewports. `white-space: nowrap; flex-wrap: nowrap;
overflow: hidden; text-overflow: clip` prevents mid-text wrapping.
- `.perf-chart-spark` uses `margin-top: auto` so sparkline baselines
align across cells regardless of whether a subtitle is present
(CPU/GPU model name, FPS min/max).
Dashboard target meta:
- Integrations card stripe reverted to the default signal color so it
matches the overall accent picker; the health-dot inside the card
carries the connection state. Removed the per-integration channel
override in both cards.css and dashboard.css.
Section headers:
- `.dashboard-section-header` / `.subtab-section-header` underline
switched from dashed to solid; channel-green 40px accent rule on
the left remains.
- Section count badge (`.dashboard-section-count`) restyled to match
the rest of the badge family (mono tabular-nums, 2px radius, hairline
border, --lux-bg-3 fill).
Build: tsc --noEmit clean; CSS bundle stable at ~216 KB.
alexei.dolgolyov
70c95d1c09