amantahiliani/box-box
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/box-box.git synced 2026-08-07 19:56:18 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: redesign Live Timing page with dynamic animations and premium dashboard layout

Browse Source
This commit is contained in:
Aman Tahiliani
2026-07-03 02:47:04 -04:00
parent cc5184c4b6
commit 85a8b6ad44
6 changed files with 225 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/styles/app.css
View File

@@ -665,10 +665,119 @@ a { color: inherit; text-decoration: none; }
.track-red { background: rgba(225,6,0,.12); color: #ff6b6b; border: 1px solid rgba(225,6,0,.25); }
.track-vsc { background: rgba(194,120,255,.12); color: var(--purple); border: 1px solid rgba(194,120,255,.25); }
.live-tower { font-variant-numeric: tabular-nums; }
.live-tower .in-pit td { background: rgba(0, 80, 160, 0.14); }
.live-tower .pit-out td { background: rgba(57, 199, 58, 0.10); }
.live-tower .retired td { opacity: 0.62; }
.live-tower {
font-variant-numeric: tabular-nums;
border-collapse: separate;
border-spacing: 0 4px;
}
.live-tower th {
border-bottom: none !important;
padding-bottom: 12px;
}
.live-tower td {
border-bottom: none !important;
}
.live-tower tbody tr {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(8px);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.live-tower tbody tr:hover {
background: rgba(255, 255, 255, 0.07);
transform: scale(1.005) translateX(4px);
}
.live-tower tbody tr td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.live-tower tbody tr td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.live-tower .in-pit td { background: rgba(0, 80, 160, 0.2) !important; }
.live-tower .pit-out td { background: rgba(57, 199, 58, 0.15) !important; }
.live-tower .retired td { opacity: 0.5; filter: grayscale(80%); }
/* Race Control Panel & Animations */
.panel-glass {
background: rgba(20, 20, 20, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 16px;
backdrop-filter: blur(12px);
max-height: calc(100vh - 120px);
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.panel-glass .sticky-header {
position: sticky;
top: -16px;
background: rgba(20, 20, 20, 0.9);
padding: 16px 0 12px 0;
margin-top: -16px;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
}
.rc-hlt {
font-weight: 700;
padding: 0 2px;
border-radius: 2px;
}
.rc-hlt-car {
color: #fff;
background: rgba(255, 255, 255, 0.15);
}
.rc-hlt-bad {
color: #ff6b6b;
background: rgba(225, 6, 0, 0.15);
}
.rc-hlt-warn {
color: var(--yellow);
background: rgba(255, 214, 0, 0.15);
}
.rc-hlt-ok {
color: var(--green);
background: rgba(57, 199, 58, 0.15);
}
.panel-glass .sticky-header {
position: sticky;
top: -16px;
background: rgba(20, 20, 20, 0.9);
padding: 16px 0 12px 0;
margin-top: -16px;
z-index: 10;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
backdrop-filter: blur(12px);
}
@keyframes flash-rc {
0% { background: rgba(255, 255, 255, 0.2); transform: scale(1.02); }
100% { background: transparent; transform: scale(1); }
}
.rc-item-new {
animation: flash-rc 2.5s ease-out forwards;
}
@keyframes flash-rc-yellow {
0% { background: rgba(255, 214, 0, 0.35); transform: scale(1.03); box-shadow: 0 0 15px rgba(255, 214, 0, 0.5); }
100% { background: rgba(255, 214, 0, 0.05); transform: scale(1); box-shadow: 0 0 0 transparent; }
}
.rc-item-yellow {
animation: flash-rc-yellow 2.5s ease-out forwards;
}
@keyframes flash-rc-red {
0% { background: rgba(225, 6, 0, 0.4); transform: scale(1.03); box-shadow: 0 0 15px rgba(225, 6, 0, 0.6); }
100% { background: rgba(225, 6, 0, 0.05); transform: scale(1); box-shadow: 0 0 0 transparent; }
}
.rc-item-red {
animation: flash-rc-red 2.5s ease-out forwards;
}
.pos-delta { font-family: var(--f-mono); color: var(--text-3); }
.pos-delta.pos-gain { color: var(--green); }
.pos-delta.pos-loss { color: var(--red); }