jedarden/spaxel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(dashboard): complete CSS tokenization pass on live view and timeline

Browse source 
Replace remaining hardcoded font-size, padding, and border-radius values
with design token variables in layout.css, timeline.css, live.html, and
setup.html. Add timeline explain button and selected-event highlight styles.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
jedarden 2026-04-24 15:13:29 -04:00
parent dd2fdd789c
commit 61a2e1eafc
4 changed files with 155 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
dashboard/css/layout.css
View file

@ -235,10 +235,10 @@
height: 44px;
display: flex;
align-items: center;
padding: 0 16px;
padding: 0 var(--space-4);
padding-top: max(0px, env(safe-area-inset-top));
gap: 24px;
font-size: 14px;
gap: var(--space-6);
font-size: var(--text-sm);
color: var(--text-primary);
border-bottom: 1px solid var(--border-default);
flex-wrap: nowrap;
@ -261,7 +261,7 @@
status bar (header) and the canvas (main). */
.live-panel {
background: var(--live-panel-bg);
border-radius: 8px;
border-radius: var(--radius-card);
z-index: 100;
overflow-y: auto;
color: var(--text-primary);
@ -273,7 +273,7 @@
left: 20px;
width: 280px;
max-height: calc(100vh - 80px);
padding: 12px;
padding: var(--space-3);
}
.live-panel--right {
@ -281,7 +281,7 @@
bottom: 20px;
right: 20px;
width: 400px;
padding: 12px;
padding: var(--space-3);
}
.live-panel--presence {
@ -290,7 +290,7 @@
right: 20px;
width: 240px;
max-height: calc(100vh - 80px);
padding: 12px;
padding: var(--space-3);
}
/* ── Tablet breakpoint for live panels ── */

63
dashboard/css/timeline.css
View file

@ -430,6 +430,26 @@
color: var(--color-critical, var(--alert));
}
.timeline-explain-btn {
background: transparent;
border: 1px solid var(--border-color, var(--bg-hover));
border-radius: var(--radius-control);
padding: 4px 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--text-muted, var(--text-muted));
transition: all 0.2s;
}
.timeline-explain-btn:hover {
background: var(--bg-primary, var(--bg-page));
color: var(--text-secondary, var(--text-secondary));
border-color: var(--text-muted, var(--text-muted));
}
.timeline-seek-btn {
margin-left: auto;
background: transparent;
@ -665,6 +685,49 @@
pointer-events: none;
}
/* Selected Event (tap-to-jump highlight) */
.timeline-event.timeline-event-selected {
background: color-mix(in srgb, var(--blue-9) 12%, transparent);
border-color: var(--blue-9) !important;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue-9) 25%, transparent),
0 2px 12px color-mix(in srgb, var(--blue-9) 15%, transparent);
}
.timeline-event.timeline-event-selected::before {
background: var(--blue-9);
width: 4px;
}
.timeline-event.timeline-event-selected:hover {
background: color-mix(in srgb, var(--blue-9) 18%, transparent);
}
/* Now Replaying Chip (in full-page timeline header) */
#timeline-now-replaying {
display: none;
align-items: center;
gap: 6px;
padding: 2px 10px;
margin-left: 8px;
background: color-mix(in srgb, var(--blue-9) 20%, transparent);
color: var(--blue-11);
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono, ui-monospace, monospace);
white-space: nowrap;
letter-spacing: 0.02em;
animation: now-replaying-pulse 2s ease-in-out infinite;
}
.now-replaying-dot {
width: 6px;
height: 6px;
background: var(--blue-9);
border-radius: 50%;
animation: timeline-pulse 1.5s ease-in-out infinite;
}
/* Secondary system events (expert mode - greyed out) */
.timeline-event.secondary {
opacity: 0.6;

165
dashboard/live.html
View file

@ -66,7 +66,7 @@
padding-top: max(0px, env(safe-area-inset-top)); /* iOS notch support */
gap: 24px;
z-index: 100;
font-size: 14px;
font-size: var(--text-sm);
}
.status-item {
@ -105,7 +105,7 @@
}
#chart-title {
font-size: 12px;
font-size: var(--text-xs);
color: var(--text-muted);
margin-bottom: 6px;
}
@ -154,7 +154,7 @@
}
#node-panel h3 {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-muted);
margin-bottom: 12px;
text-transform: uppercase;
@ -207,7 +207,7 @@
background: var(--warn-bg);
border: 1px solid var(--warn-border);
color: var(--warn);
font-size: 14px;
font-size: var(--text-sm);
padding: 2px 6px;
border-radius: 3px;
cursor: pointer;
@ -253,7 +253,7 @@
gap: 8px;
padding: 6px 0;
cursor: pointer;
font-size: 12px;
font-size: var(--text-xs);
color: var(--text-secondary);
}
@ -302,7 +302,7 @@
margin-bottom: 4px;
background: var(--highlight-subtle);
border-radius: 4px;
font-size: 12px;
font-size: var(--text-xs);
cursor: pointer;
display: flex;
justify-content: space-between;
@ -337,7 +337,7 @@
/* Overall presence indicator in status bar */
#presence-indicator {
font-size: 12px;
font-size: var(--text-xs);
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
@ -359,7 +359,7 @@
background: var(--bg-hover);
border: 1px solid var(--border-strong);
color: var(--text-secondary);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -372,7 +372,7 @@
background: rgba(255,255,255,0.06);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -400,7 +400,7 @@
}
#presence-header h3 {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
@ -449,7 +449,7 @@
margin-bottom: 3px;
background: var(--highlight-subtle);
border-radius: 4px;
font-size: 12px;
font-size: var(--text-xs);
cursor: pointer;
transition: background 0.2s;
}
@ -575,7 +575,7 @@
}
#wizard-header h1 {
font-size: 20px;
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
@ -657,7 +657,7 @@
.wizard-step-content p {
color: var(--text-secondary);
font-size: 14px;
font-size: var(--text-sm);
line-height: 1.5;
margin-bottom: 12px;
}
@ -689,7 +689,7 @@
.wizard-success {
color: var(--ok);
font-size: 14px;
font-size: var(--text-sm);
font-weight: 500;
}
@ -772,7 +772,7 @@
}
.wizard-progress p {
font-size: 12px;
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 6px;
text-align: center;
@ -781,8 +781,8 @@
/* Buttons */
.wizard-btn {
padding: 10px 24px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-control);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
border: none;
@ -843,7 +843,7 @@
}
.link-health-header h3 {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
@ -955,7 +955,7 @@
border: 1px solid rgba(255, 167, 38, 0.3);
border-radius: 4px;
padding: 8px 10px;
font-size: 12px;
font-size: var(--text-xs);
}
.hint-header {
@ -1012,7 +1012,7 @@
.diagnosis-card {
padding: 8px 10px;
border-radius: 4px;
font-size: 12px;
font-size: var(--text-xs);
}
.diagnosis-card.severity-info {
@ -1110,7 +1110,7 @@
}
.no-issues-icon {
font-size: 16px;
font-size: var(--text-base);
}
/* ===== System-wide Detection Quality Gauge ===== */
@ -1207,7 +1207,7 @@
background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(100, 181, 246, 0.9));
color: var(--text-on-accent);
padding: 8px 16px;
border-radius: 6px;
border-radius: var(--radius-control);
font-size: 13px;
display: none;
align-items: center;
@ -1242,7 +1242,7 @@
cursor: pointer;
padding: 2px 6px;
opacity: 0.7;
font-size: 16px;
font-size: var(--text-base);
}
#diurnal-banner .dismiss-btn:hover {
@ -1308,8 +1308,8 @@
background: rgba(0, 0, 0, 0.9);
color: var(--text-on-accent);
padding: 12px 20px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-control);
font-size: var(--text-sm);
display: flex;
align-items: center;
gap: 10px;
@ -1374,7 +1374,7 @@
border: 1px solid var(--border-strong);
border-radius: 4px;
color: var(--text-primary);
font-size: 14px;
font-size: var(--text-sm);
box-sizing: border-box;
}
@ -1408,14 +1408,14 @@
}
.calibrate-phase h3 {
font-size: 16px;
font-size: var(--text-base);
color: var(--text-primary);
margin-bottom: 6px;
}
.calibrate-phase p {
color: var(--text-secondary);
font-size: 14px;
font-size: var(--text-sm);
}
/* Add Node button in status bar */
@ -1423,7 +1423,7 @@
background: rgba(79, 195, 247, 0.15);
border: 1px solid rgba(79, 195, 247, 0.4);
color: var(--blue-10);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1439,7 +1439,7 @@
background: var(--highlight-subtle);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1456,7 +1456,7 @@
background: rgba(171, 71, 188, 0.15);
border: 1px solid rgba(171, 71, 188, 0.4);
color: var(--blue-10);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1493,7 +1493,7 @@
background: rgba(255,255,255,0.06);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1507,7 +1507,7 @@
background: rgba(255, 167, 38, 0.15);
border: 1px solid rgba(255, 167, 38, 0.4);
color: var(--warn);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1523,7 +1523,7 @@
background: rgba(255,255,255,0.06);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1548,7 +1548,7 @@
}
#portal-editor-panel h3 {
font-size: 14px;
font-size: var(--text-sm);
color: var(--warn);
text-transform: uppercase;
letter-spacing: 1px;
@ -1574,7 +1574,7 @@
color: var(--text-on-accent);
padding: 6px 8px;
border-radius: 4px;
font-size: 12px;
font-size: var(--text-xs);
box-sizing: border-box;
}
@ -1627,7 +1627,7 @@
background: rgba(255,255,255,0.06);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1641,7 +1641,7 @@
background: rgba(79,195,247,0.1);
border: 1px solid rgba(79,195,247,0.3);
color: var(--blue-10);
font-size: 14px;
font-size: var(--text-sm);
font-weight: 600;
padding: 3px 10px;
border-radius: 4px;
@ -1656,7 +1656,7 @@
background: rgba(255,255,255,0.06);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1670,7 +1670,7 @@
background: rgba(255,255,255,0.06);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1753,7 +1753,7 @@
background: var(--highlight-subtle);
border: 1px solid var(--bg-hover);
color: var(--text-muted);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -1788,7 +1788,7 @@
}
#room-editor-panel h3 {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
@ -1801,7 +1801,7 @@
.room-field label {
display: block;
font-size: 12px;
font-size: var(--text-xs);
color: var(--text-secondary);
margin-bottom: 3px;
}
@ -1813,7 +1813,7 @@
border: 1px solid var(--border-strong);
border-radius: 4px;
color: var(--text-primary);
font-size: 14px;
font-size: var(--text-sm);
box-sizing: border-box;
}
@ -1853,7 +1853,7 @@
bottom: 20px;
left: 320px;
background: var(--live-status-bg);
border-radius: 6px;
border-radius: var(--radius-control);
padding: 10px 14px;
z-index: 100;
display: none;
@ -1904,8 +1904,8 @@
color: var(--bg-page);
border: none;
padding: 10px 24px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-control);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
}
@ -1957,20 +1957,20 @@
}
.anomaly-title {
font-size: 16px;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-on-accent);
margin-bottom: 4px;
}
.anomaly-description {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-primary);
margin-bottom: 4px;
}
.anomaly-meta {
font-size: 12px;
font-size: var(--text-xs);
color: var(--text-secondary);
}
@ -1982,7 +1982,7 @@
.anomaly-btn {
padding: 8px 16px;
border-radius: 6px;
border-radius: var(--radius-control);
font-size: 13px;
font-weight: 500;
cursor: pointer;
@ -2067,12 +2067,12 @@
}
.feedback-anomaly-desc {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: 20px;
padding: 12px;
background: var(--highlight-subtle);
border-radius: 6px;
border-radius: var(--radius-control);
}
.feedback-options {
@ -2106,19 +2106,19 @@
}
.feedback-btn .icon {
font-size: 20px;
font-size: var(--text-lg);
width: 28px;
text-align: center;
}
.feedback-btn .label {
font-size: 14px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-primary);
}
.feedback-btn .desc {
font-size: 12px;
font-size: var(--text-xs);
color: var(--text-muted);
}
@ -2132,7 +2132,7 @@
padding: 10px;
background: var(--highlight-subtle);
border: 1px solid var(--border-strong);
border-radius: 6px;
border-radius: var(--radius-control);
color: var(--text-primary);
font-size: 13px;
resize: none;
@ -2152,8 +2152,8 @@
.modal-btn {
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-control);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
border: none;
@ -2192,7 +2192,7 @@
color: var(--text-on-accent);
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 1px;
z-index: 150;
@ -2218,7 +2218,7 @@
background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(100, 181, 246, 0.9));
color: var(--text-on-accent);
padding: 8px 16px;
border-radius: 6px;
border-radius: var(--radius-control);
font-size: 13px;
display: none;
align-items: center;
@ -2293,12 +2293,12 @@
max-width: 380px;
}
.ws-lost-modal-content h3 {
font-size: 20px;
font-size: var(--text-lg);
margin-bottom: 12px;
color: var(--alert);
}
.ws-lost-modal-content p {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-secondary);
margin-bottom: 24px;
line-height: 1.5;
@ -2308,8 +2308,8 @@
color: var(--bg-page);
border: none;
padding: 10px 24px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-control);
font-size: var(--text-sm);
cursor: pointer;
margin-right: 8px;
}
@ -2321,8 +2321,8 @@
color: var(--text-secondary);
border: none;
padding: 10px 24px;
border-radius: 6px;
font-size: 14px;
border-radius: var(--radius-control);
font-size: var(--text-sm);
cursor: pointer;
}
.ws-lost-dismiss-btn:hover {
@ -2335,7 +2335,7 @@
background: var(--bg-hover);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-secondary);
font-size: 14px;
font-size: var(--text-sm);
padding: 10px; /* 44px touch target (18px icon + 10px padding top/bottom = ~38px, close enough) */
min-width: 44px; /* Ensure 44px minimum */
min-height: 44px;
@ -2441,7 +2441,7 @@
}
.hamburger-section h3 {
font-size: 12px;
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
@ -2462,7 +2462,7 @@
background: none;
width: 100%;
text-align: left;
font-size: 14px;
font-size: var(--text-sm);
}
.hamburger-item:hover {
@ -2555,7 +2555,7 @@
}
.hamburger-tab-header h3 {
font-size: 16px;
font-size: var(--text-base);
font-weight: 600;
color: var(--text-primary);
margin: 0;
@ -2593,7 +2593,7 @@
padding: 12px;
margin-bottom: 8px;
background: var(--highlight-subtle);
border-radius: 6px;
border-radius: var(--radius-control);
font-size: 13px;
}
@ -2614,7 +2614,7 @@
padding: 12px;
margin-bottom: 4px;
background: var(--highlight-subtle);
border-radius: 6px;
border-radius: var(--radius-control);
font-size: 13px;
}
@ -2674,7 +2674,7 @@
flex-wrap: wrap;
padding: 8px;
gap: 8px;
font-size: 12px;
font-size: var(--text-xs);
}
.status-item {
@ -2893,7 +2893,7 @@
/* Toast notifications - larger on touch devices */
.toast {
padding: 14px 20px;
font-size: 14px;
font-size: var(--text-sm);
}
/* Replay controls - larger touch targets */
@ -2932,7 +2932,7 @@
background: var(--warn-bg);
border: 1px solid var(--warn-border);
color: var(--warn);
font-size: 12px;
font-size: var(--text-xs);
padding: 3px 10px;
border-radius: 4px;
cursor: pointer;
@ -2971,7 +2971,7 @@
color: var(--text-secondary);
width: 32px;
height: 32px;
border-radius: 6px;
border-radius: var(--radius-control);
cursor: pointer;
display: flex;
align-items: center;
@ -2990,7 +2990,7 @@
gap: 2px;
}
.replay-timestamp {
font-size: 14px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-primary);
font-family: var(--font-mono);
@ -3107,7 +3107,7 @@
margin-bottom: 8px;
}
.replay-tuning-header h3 {
font-size: 14px;
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
@ -3185,7 +3185,7 @@
padding: 8px;
border: none;
border-radius: 4px;
font-size: 12px;
font-size: var(--text-xs);
cursor: pointer;
transition: background 0.2s;
}
@ -3210,9 +3210,9 @@
display: none;
background: rgba(0, 0, 0, 0.9);
border: 1px solid var(--blue-interact-border);
border-radius: 6px;
border-radius: var(--radius-control);
padding: 10px 12px;
font-size: 12px;
font-size: var(--text-xs);
color: var(--text-primary);
pointer-events: none;
z-index: 1000;
@ -3959,6 +3959,7 @@
Timeline
<span id="timeline-count" class="timeline-count"></span>
</h2>
<span id="timeline-now-replaying"></span>
<button id="timeline-filter-toggle" class="timeline-filter-toggle" title="Toggle filters">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="22 3 2 10 12.79 21 15.41 18.38 19 14.79 22 3 22 3"></polygon>

4
dashboard/setup.html
View file

@ -13,8 +13,8 @@
<style>
.app-shell--live .setup-header {
height: 44px;
gap: 16px;
font-size: 14px;
gap: var(--space-4);
font-size: var(--text-sm);
}
.setup-header__link {
color: var(--text-secondary);