mirror of
https://github.com/AmanTahiliani/box-box.git
synced 2026-08-07 19:56:18 -04:00
Updated Web UI
This commit is contained in:
@@ -145,74 +145,183 @@ a { color: inherit; text-decoration: none; }
|
||||
.home-hero { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Next race card */
|
||||
.next-race { text-align: center; }
|
||||
.next-race-flag { font-size: 3rem; margin: 0.25rem 0; }
|
||||
.next-race-name { font-size: 1.4rem; font-weight: 700; margin: 0.25rem 0; }
|
||||
.next-race-circuit { color: var(--text-2); font-size: 0.85rem; margin-bottom: 0.5rem; }
|
||||
/* ---- Next race card — rich hero ---- */
|
||||
.next-race {
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #1a0000 0%, #2d0a0a 40%, var(--surface-2) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-color: rgba(225,6,0,0.25);
|
||||
padding: 2rem 1.5rem 1.5rem;
|
||||
}
|
||||
.next-race::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff4422, var(--f1-red));
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer-red 2.5s linear infinite;
|
||||
}
|
||||
@keyframes shimmer-red {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Animated speed lines */
|
||||
.speed-lines {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.speed-line {
|
||||
position: absolute;
|
||||
left: -10%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(225,6,0,0.18), transparent);
|
||||
width: 60%;
|
||||
animation: speedline 3s ease-in-out infinite;
|
||||
}
|
||||
.speed-line:nth-child(1) { top: 18%; animation-delay: 0s; animation-duration: 2.8s; width: 55%; }
|
||||
.speed-line:nth-child(2) { top: 30%; animation-delay: 0.4s; animation-duration: 3.2s; width: 70%; }
|
||||
.speed-line:nth-child(3) { top: 42%; animation-delay: 0.9s; animation-duration: 2.5s; width: 45%; }
|
||||
.speed-line:nth-child(4) { top: 55%; animation-delay: 1.3s; animation-duration: 3.5s; width: 65%; }
|
||||
.speed-line:nth-child(5) { top: 65%; animation-delay: 0.2s; animation-duration: 2.9s; width: 50%; }
|
||||
.speed-line:nth-child(6) { top: 75%; animation-delay: 1.7s; animation-duration: 3.1s; width: 60%; }
|
||||
.speed-line:nth-child(7) { top: 85%; animation-delay: 0.6s; animation-duration: 2.7s; width: 40%; }
|
||||
.speed-line:nth-child(8) { top: 92%; animation-delay: 1.1s; animation-duration: 3.4s; width: 55%; }
|
||||
@keyframes speedline {
|
||||
0% { transform: translateX(-20%); opacity: 0; }
|
||||
20% { opacity: 1; }
|
||||
80% { opacity: 1; }
|
||||
100% { transform: translateX(220%); opacity: 0; }
|
||||
}
|
||||
|
||||
/* Circuit name watermark */
|
||||
.circuit-watermark {
|
||||
position: absolute;
|
||||
bottom: -0.25rem;
|
||||
right: -0.5rem;
|
||||
font-size: 4.5rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.03em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.03);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Checkered flag corner decoration */
|
||||
.checkered-corner {
|
||||
position: absolute;
|
||||
top: 0; right: 0;
|
||||
width: 64px; height: 64px;
|
||||
background-image:
|
||||
repeating-conic-gradient(rgba(255,255,255,0.07) 0% 25%, transparent 0% 50%);
|
||||
background-size: 16px 16px;
|
||||
mask-image: linear-gradient(225deg, rgba(0,0,0,0.5) 30%, transparent 70%);
|
||||
-webkit-mask-image: linear-gradient(225deg, rgba(0,0,0,0.5) 30%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.next-race .card-label { position: relative; z-index: 1; }
|
||||
.next-race-flag { font-size: 3.5rem; margin: 0.5rem 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); position: relative; z-index: 1; }
|
||||
.next-race-name { font-size: 1.8rem; font-weight: 800; margin: 0.25rem 0; letter-spacing: -0.02em; position: relative; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }
|
||||
.next-race-circuit { color: var(--text-2); font-size: 0.95rem; margin-bottom: 0.75rem; font-weight: 500; position: relative; z-index: 1; }
|
||||
.next-race-session {
|
||||
color: var(--text-1);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 0.45rem;
|
||||
display: inline-block;
|
||||
background: rgba(225, 6, 0, 0.15);
|
||||
color: var(--f1-red);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
margin-bottom: 0.75rem;
|
||||
border: 1px solid rgba(225, 6, 0, 0.3);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.next-race-countdown {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
font-size: 2.2rem;
|
||||
font-weight: 900;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--f1-red);
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-1);
|
||||
letter-spacing: 0.02em;
|
||||
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
|
||||
/* Championship sidebar */
|
||||
.champ-sidebar { display: flex; flex-direction: column; gap: 0.45rem; }
|
||||
.champ-sidebar { display: flex; flex-direction: column; gap: 0.45rem; background: var(--surface-1); }
|
||||
.champ-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20px 12px 36px 1fr 40px;
|
||||
grid-template-columns: 24px 4px 40px 1fr 45px;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
gap: 0.6rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.champ-pos { color: var(--text-2); font-size: 0.8rem; text-align: right; }
|
||||
.champ-tla { font-weight: 600; font-size: 0.85rem; }
|
||||
.champ-row:hover { background: var(--surface-2); }
|
||||
.champ-row.podium-1 { background: rgba(255, 215, 0, 0.05); border: 1px solid rgba(255, 215, 0, 0.1); }
|
||||
.champ-row.podium-1 .champ-pos { color: #FFD700; font-weight: 800; }
|
||||
.champ-row.podium-2 .champ-pos { color: #C0C0C0; font-weight: 800; }
|
||||
.champ-row.podium-3 .champ-pos { color: #CD7F32; font-weight: 800; }
|
||||
|
||||
.champ-pos { color: var(--text-2); font-size: 0.9rem; text-align: center; font-weight: 600; }
|
||||
.champ-tla { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
|
||||
.champ-bar-wrap {
|
||||
background: var(--surface-3);
|
||||
border-radius: 2px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
.champ-bar {
|
||||
height: 100%;
|
||||
background: var(--team-color, var(--f1-red));
|
||||
border-radius: 2px;
|
||||
transition: width 0.4s;
|
||||
border-radius: 3px;
|
||||
transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.champ-pts { font-size: 0.8rem; color: var(--text-2); text-align: right; }
|
||||
.champ-pts { font-size: 0.9rem; color: var(--text-1); text-align: right; font-weight: 700; }
|
||||
|
||||
/* Team color swatch */
|
||||
.team-swatch {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: var(--team-color, #666);
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* ---- Season meetings grid ---- */
|
||||
.section-label {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-3);
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-2);
|
||||
padding: 0.75rem 1.5rem 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.section-label::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 1em;
|
||||
background: var(--f1-red);
|
||||
border-radius: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.meetings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
|
||||
gap: 0.75rem;
|
||||
padding: 0 1.5rem 2rem;
|
||||
}
|
||||
@@ -223,11 +332,36 @@ a { color: inherit; text-decoration: none; }
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
transition: background 0.15s, border-color 0.15s, transform 0.15s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.meeting-card:hover { background: var(--surface-2); border-color: var(--text-3); }
|
||||
.meeting-card.past { opacity: 0.55; }
|
||||
.meeting-flag { font-size: 1.5rem; margin-bottom: 0.3rem; }
|
||||
.meeting-card:hover {
|
||||
background: var(--surface-2);
|
||||
border-color: var(--text-3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.meeting-card.past { opacity: 0.5; }
|
||||
.meeting-card-accent {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0;
|
||||
height: 3px;
|
||||
background: var(--surface-3);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.meeting-card:not(.past) .meeting-card-accent {
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff4422);
|
||||
}
|
||||
.meeting-card.meeting-next .meeting-card-accent {
|
||||
background: linear-gradient(90deg, var(--f1-red), #ff8844, var(--f1-red));
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer-red 2s linear infinite;
|
||||
}
|
||||
.meeting-card.meeting-next {
|
||||
border-color: rgba(225,6,0,0.35);
|
||||
box-shadow: 0 0 0 1px rgba(225,6,0,0.12), 0 4px 16px rgba(225,6,0,0.1);
|
||||
}
|
||||
.meeting-flag { font-size: 1.5rem; margin: 0.3rem 0 0.3rem; }
|
||||
.meeting-name { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
|
||||
.meeting-circuit { color: var(--text-2); font-size: 0.78rem; margin-top: 0.15rem; }
|
||||
.meeting-date { color: var(--text-3); font-size: 0.75rem; margin-top: 0.3rem; }
|
||||
@@ -292,23 +426,30 @@ a { color: inherit; text-decoration: none; }
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
.data-table th {
|
||||
background: var(--surface-1);
|
||||
border-bottom: 1px solid var(--surface-3);
|
||||
color: var(--text-3);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--surface-2);
|
||||
border-bottom: 2px solid var(--surface-3);
|
||||
color: var(--text-2);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.data-table td {
|
||||
border-bottom: 1px solid var(--surface-3);
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: 0.85rem 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.data-table tr:hover td { background: var(--surface-1); }
|
||||
.pos-cell { font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
|
||||
.data-table tr:hover td { background: rgba(255, 255, 255, 0.02); }
|
||||
.data-table tr.podium-1 td { background: rgba(255, 215, 0, 0.03); }
|
||||
.data-table tr.podium-1 .pos-cell { color: #FFD700; font-weight: 900; }
|
||||
.data-table tr.podium-2 .pos-cell { color: #C0C0C0; font-weight: 900; }
|
||||
.data-table tr.podium-3 .pos-cell { color: #CD7F32; font-weight: 900; }
|
||||
|
||||
.pos-cell { font-weight: 700; font-size: 1rem; }
|
||||
.driver-cell { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; font-size: 0.95rem; }
|
||||
.pts-cell { font-weight: 800; font-size: 1rem; color: var(--text-1); }
|
||||
|
||||
/* ---- Badges ---- */
|
||||
.badge {
|
||||
@@ -488,3 +629,177 @@ a { color: inherit; text-decoration: none; }
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Standings — custom row layout
|
||||
============================================================ */
|
||||
.standings-table {
|
||||
padding: 0 1.5rem 2rem;
|
||||
}
|
||||
.standings-header {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr 180px 120px 70px 70px;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 1rem 0.5rem 1.25rem;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-3);
|
||||
text-transform: uppercase;
|
||||
border-bottom: 2px solid var(--surface-3);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.standings-header { grid-template-columns: 44px 1fr 0 80px 55px 55px; }
|
||||
.sh-team { display: none; }
|
||||
}
|
||||
.standings-row {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr 180px 120px 70px 70px;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 1rem 0.6rem 0;
|
||||
border-bottom: 1px solid var(--surface-3);
|
||||
transition: background 0.15s;
|
||||
position: relative;
|
||||
border-left: 3px solid var(--team-color, transparent);
|
||||
padding-left: 1rem;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.standings-row:hover { background: rgba(255,255,255,0.025); }
|
||||
.standings-row.podium-1 { background: rgba(255,215,0,0.04); }
|
||||
.standings-row.podium-2 { background: rgba(192,192,192,0.03); }
|
||||
.standings-row.podium-3 { background: rgba(205,127,50,0.03); }
|
||||
@media (max-width: 700px) {
|
||||
.standings-row { grid-template-columns: 44px 1fr 0 80px 55px 55px; }
|
||||
.sr-team { display: none; }
|
||||
}
|
||||
|
||||
/* Position column */
|
||||
.sr-pos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
}
|
||||
.trophy-icon { font-size: 1.3rem; line-height: 1; }
|
||||
.pos-num { font-size: 1rem; font-weight: 800; color: var(--text-2); }
|
||||
.standings-row.podium-1 .pos-num { color: #FFD700; }
|
||||
.standings-row.podium-2 .pos-num { color: #C0C0C0; }
|
||||
.standings-row.podium-3 .pos-num { color: #CD7F32; }
|
||||
|
||||
/* Driver number badge */
|
||||
.driver-num-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.03em;
|
||||
border: 1px solid;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Driver column */
|
||||
.sr-driver {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.sr-driver-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.sr-full-name {
|
||||
font-weight: 700;
|
||||
font-size: 0.92rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.sr-tla {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-3);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Team column */
|
||||
.sr-team {
|
||||
font-size: 0.82rem;
|
||||
color: var(--text-2);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Points bar */
|
||||
.sr-bar-wrap {
|
||||
background: var(--surface-3);
|
||||
border-radius: 3px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sr-bar {
|
||||
height: 100%;
|
||||
background: var(--team-color, var(--f1-red));
|
||||
border-radius: 3px;
|
||||
transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
/* Points */
|
||||
.sr-pts {
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--text-1);
|
||||
}
|
||||
|
||||
/* Gap */
|
||||
.sr-gap {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-3);
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.standings-row.podium-1 .sr-gap {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--f1-red);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Constructor color block */
|
||||
.constructor-color-block {
|
||||
width: 5px;
|
||||
height: 32px;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.constructor-row .sr-full-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Constructor table has no TEAM column — use 5-col grid */
|
||||
.constructor-header,
|
||||
.constructor-row {
|
||||
grid-template-columns: 52px 1fr 140px 70px 70px;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.constructor-header,
|
||||
.constructor-row {
|
||||
grid-template-columns: 44px 1fr 80px 55px 55px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user