mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
AmanTahiliani
1dac73cdc5
Clamp active-chapter detection to the same scrub bounds as chapter clicks, keep an explicit selection on click for out-of-window timestamps, point E2E at the empty-state card, and move Race Story empty-state styles out of app.css. Co-authored-by: Cursor <cursoragent@cursor.com>
92 lines
1.6 KiB
CSS
92 lines
1.6 KiB
CSS
.replay-map-panel {
|
|
min-height: 244px;
|
|
height: 100%;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
border-radius: var(--s2);
|
|
}
|
|
|
|
.replay-map-stage {
|
|
position: relative;
|
|
min-height: 244px;
|
|
height: 100%;
|
|
}
|
|
|
|
.replay-map-svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 244px;
|
|
display: block;
|
|
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 62%);
|
|
}
|
|
|
|
.replay-map-outline-shadow,
|
|
.replay-map-outline {
|
|
fill: none;
|
|
vector-effect: non-scaling-stroke;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
.replay-map-outline-shadow {
|
|
stroke: rgba(255, 255, 255, 0.08);
|
|
stroke-width: 5;
|
|
}
|
|
|
|
.replay-map-outline {
|
|
stroke: var(--text-2);
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.replay-car {
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.replay-car circle {
|
|
stroke: var(--bg);
|
|
stroke-width: 0.8;
|
|
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
|
|
}
|
|
|
|
.replay-car text {
|
|
fill: #fff;
|
|
font-family: var(--f-mono);
|
|
font-size: 2.6px;
|
|
font-weight: 800;
|
|
text-anchor: middle;
|
|
pointer-events: none;
|
|
paint-order: stroke;
|
|
stroke: rgba(0, 0, 0, 0.75);
|
|
stroke-width: 0.7;
|
|
}
|
|
|
|
.replay-car:not(.replay-car-pinned) text {
|
|
opacity: 0;
|
|
}
|
|
|
|
.replay-car:hover text,
|
|
.replay-car:focus-visible text,
|
|
.replay-car-pinned text {
|
|
opacity: 1;
|
|
}
|
|
|
|
.replay-car-pinned circle {
|
|
stroke: #fff;
|
|
stroke-width: 1.2;
|
|
}
|
|
|
|
.replay-map-empty-card {
|
|
min-height: 244px;
|
|
display: grid;
|
|
place-content: center;
|
|
padding: var(--s6);
|
|
margin: 0;
|
|
}
|
|
|
|
.replay-map-empty-card .empty-state-icon {
|
|
display: block;
|
|
margin: 0 auto var(--s3);
|
|
color: var(--text-3);
|
|
}
|