mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-08 04:06: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>
209 lines
4.0 KiB
CSS
209 lines
4.0 KiB
CSS
.chapter-strip {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s3);
|
|
}
|
|
|
|
.chapter-strip-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--s4);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chapter-strip-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--text-3);
|
|
}
|
|
|
|
.chapter-strip-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--s2);
|
|
}
|
|
|
|
.chapter-tour-btn {
|
|
font-family: var(--f-mono);
|
|
font-size: 11px;
|
|
padding: var(--s1) var(--s3);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--s1);
|
|
background: var(--surface);
|
|
color: var(--text-2);
|
|
cursor: pointer;
|
|
transition: background 0.15s, border-color 0.15s, color 0.15s;
|
|
}
|
|
|
|
.chapter-tour-btn:hover,
|
|
.chapter-tour-btn.active {
|
|
background: var(--surface-h);
|
|
border-color: var(--border-2);
|
|
color: var(--text);
|
|
}
|
|
|
|
.chapter-strip-scroll-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.chapter-strip-scroll-wrap::before,
|
|
.chapter-strip-scroll-wrap::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: var(--s2);
|
|
width: 28px;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.chapter-strip-scroll-wrap::before {
|
|
left: 0;
|
|
background: linear-gradient(to right, var(--bg), transparent);
|
|
}
|
|
|
|
.chapter-strip-scroll-wrap::after {
|
|
right: 0;
|
|
background: linear-gradient(to left, var(--bg), transparent);
|
|
}
|
|
|
|
.chapter-strip-scroll {
|
|
display: flex;
|
|
gap: var(--s3);
|
|
overflow-x: auto;
|
|
padding-bottom: var(--s2);
|
|
scroll-snap-type: x mandatory;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--border-2) transparent;
|
|
}
|
|
|
|
.chapter-strip-scroll::-webkit-scrollbar {
|
|
height: 4px;
|
|
}
|
|
|
|
.chapter-strip-scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.chapter-strip-scroll::-webkit-scrollbar-thumb {
|
|
background: var(--border-2);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.chapter-card {
|
|
flex: 0 0 min(240px, 72vw);
|
|
min-height: 88px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s2);
|
|
padding: var(--s3) var(--s4);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--s2);
|
|
background: var(--surface);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
scroll-snap-align: center;
|
|
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
|
|
}
|
|
|
|
.chapter-card:hover {
|
|
background: var(--surface-h);
|
|
border-color: var(--border-2);
|
|
}
|
|
|
|
.chapter-card.active {
|
|
border-color: var(--accent, var(--red));
|
|
background: var(--surface-h);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--red)) 35%, transparent);
|
|
}
|
|
|
|
.chapter-card.tour-active {
|
|
border-color: var(--yellow);
|
|
box-shadow: 0 0 0 1px color-mix(in srgb, var(--yellow) 40%, transparent);
|
|
}
|
|
|
|
.chapter-card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--s3);
|
|
}
|
|
|
|
.chapter-kind {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 28px;
|
|
height: 20px;
|
|
padding: 0 var(--s2);
|
|
border-radius: var(--s1);
|
|
font-family: var(--f-mono);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
background: var(--bg);
|
|
color: var(--text-2);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.chapter-card.active .chapter-kind {
|
|
color: var(--text);
|
|
border-color: var(--border-2);
|
|
}
|
|
|
|
.chapter-kind--safety_car,
|
|
.chapter-kind--virtual_safety_car {
|
|
color: var(--orange, #f90);
|
|
}
|
|
|
|
.chapter-kind--red_flag {
|
|
color: var(--red);
|
|
}
|
|
|
|
.chapter-kind--decisive_swing {
|
|
color: var(--green, #22c55e);
|
|
}
|
|
|
|
.chapter-kind--finish {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
.chapter-lap-range {
|
|
font-family: var(--f-mono);
|
|
font-size: 10px;
|
|
color: var(--text-3);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.chapter-headline {
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
color: var(--text);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
|
|
.chapter-strip-empty-card {
|
|
padding: var(--s6) var(--s5);
|
|
margin: 0;
|
|
}
|
|
|
|
.chapter-strip-empty-card .empty-state-icon {
|
|
display: block;
|
|
margin: 0 auto var(--s3);
|
|
color: var(--text-3);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.chapter-strip-header {
|
|
align-items: flex-start;
|
|
}
|
|
}
|