Files
box-box/frontend/src/styles/telemetry-trace.css
AmanTahiliani eacd5f26e9 feat(#15): Telemetry trace chart component
Implemented by claude via .agents/dev dispatch.
2026-07-03 23:59:39 -04:00

102 lines
1.6 KiB
CSS

.telemetry-trace {
display: flex;
flex-direction: column;
gap: 8px;
}
.telemetry-trace-empty {
padding: 24px;
text-align: center;
color: var(--text-3);
font-size: 13px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.telemetry-trace-legend {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 12px;
color: var(--text-2);
}
.telemetry-trace-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.telemetry-trace-swatch {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 2px;
flex: none;
}
.telemetry-trace-svg {
display: block;
width: 100%;
height: auto;
}
.telemetry-trace-panel-bg {
fill: var(--surface);
stroke: var(--border);
stroke-width: 1;
rx: 4;
}
.telemetry-trace-panel-title {
fill: var(--text-2);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.telemetry-trace-axis-max {
fill: var(--text-3);
font-size: 10px;
}
.telemetry-trace-crosshair {
stroke: var(--text-2);
stroke-width: 1;
stroke-dasharray: 3 3;
pointer-events: none;
}
.telemetry-trace-readout {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 6px 10px;
font-size: 12px;
color: var(--text-2);
background: var(--surface-h);
border: 1px solid var(--border);
border-radius: 6px;
}
.telemetry-trace-readout-index {
color: var(--text-3);
}
.telemetry-trace-readout-driver {
display: inline-flex;
align-items: center;
gap: 6px;
}
.telemetry-trace-readout-label {
color: var(--text);
font-weight: 600;
}
.telemetry-trace-readout-value {
font-variant-numeric: tabular-nums;
}