mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
AmanTahiliani
66bf649729
Ship driver comparison in the race hub: two pickers (default top finishers), best-lap telemetry overlays via TelemetryTraceChart, and cumulative pace delta via DeltaTimeGraph with pit-lap captions. Car data is filtered to each driver's fastest lap client-side (OpenF1 returns full-session samples). Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
1.4 KiB
CSS
79 lines
1.4 KiB
CSS
.compare-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s5);
|
|
}
|
|
|
|
.compare-pickers {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--s4);
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.compare-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s3);
|
|
min-width: 180px;
|
|
}
|
|
|
|
.compare-picker-label {
|
|
font-family: var(--f-mono);
|
|
font-size: 11px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.compare-picker-select {
|
|
font-family: var(--f-mono);
|
|
font-size: 13px;
|
|
padding: var(--s2) var(--s3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r1);
|
|
background: var(--surface-2);
|
|
color: var(--text);
|
|
}
|
|
|
|
.compare-picker-select:focus {
|
|
outline: 2px solid var(--gp-accent, var(--red));
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.compare-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s3);
|
|
}
|
|
|
|
.compare-section-title {
|
|
font-family: var(--f-mono);
|
|
font-size: 12px;
|
|
letter-spacing: 0.05em;
|
|
text-transform: uppercase;
|
|
color: var(--text-2);
|
|
}
|
|
|
|
.compare-section-meta {
|
|
font-family: var(--f-mono);
|
|
font-size: 11px;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.compare-pit-caption {
|
|
font-family: var(--f-mono);
|
|
font-size: 11px;
|
|
color: var(--text-3);
|
|
margin: 0;
|
|
}
|
|
|
|
.compare-stale-notice {
|
|
font-size: 12px;
|
|
color: var(--amber, #f59e0b);
|
|
background: rgba(245, 158, 11, 0.08);
|
|
border: 1px solid rgba(245, 158, 11, 0.25);
|
|
border-radius: var(--r1);
|
|
padding: var(--s2) var(--s3);
|
|
}
|