Fran Jurmanović
6c9a5ea7a6
- Create Next.js app with TypeScript, Tailwind, and Postcss - Extract API logic, types, and utilities to lib/ - Build React components for Race Results, Driver Standings, Points Key, and D3 Chart - Use environment variables for API credentials (NEXT_PUBLIC_*) - Static export (output: 'export') for Cloudflare Pages deployment - D3 chart rendered client-side with dynamic import - Update deploy workflow to build and deploy ./out directory - Remove original public/index.html
148 lines
3.0 KiB
CSS
148 lines
3.0 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* --- Custom Styles --- */
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #111827; /* gray-900 */
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #1f2937; /* gray-800 */
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #4b5563; /* gray-600 */
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #6b7280; /* gray-500 */
|
|
}
|
|
|
|
/* Podium Styles */
|
|
.podium-1 {
|
|
background: linear-gradient(145deg, #fde047, #facc15);
|
|
color: #422006;
|
|
font-weight: 700;
|
|
border-left: 4px solid #f59e0b;
|
|
}
|
|
.podium-2 {
|
|
background: linear-gradient(145deg, #9ca3af, #6b7280); /* gray-400, gray-500 */
|
|
color: #1f2937;
|
|
font-weight: 600;
|
|
border-left: 4px solid #9ca3af; /* gray-400 */
|
|
}
|
|
.podium-3 {
|
|
background: linear-gradient(145deg, #f0c0a0, #e69a6a);
|
|
color: #431407;
|
|
font-weight: 600;
|
|
border-left: 4px solid #c2410c;
|
|
}
|
|
|
|
/* Points Table Key Styles */
|
|
.points-fl { background-color: #8b5cf6; color: #000000; } /* violet-500 with black text */
|
|
|
|
.points-new {
|
|
background-color: #374151; /* gray-700 */
|
|
color: #e5e7eb; /* gray-200 */
|
|
}
|
|
|
|
/* Style for the (+1) badge in the POINTS TABLE */
|
|
.fl-bg-text {
|
|
background-color: #8b5cf6; /* violet-500 */
|
|
color: #000000; /* Black text */
|
|
font-weight: 700;
|
|
padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
|
|
border-radius: 0.375rem; /* rounded-md */
|
|
margin-left: 0.5rem; /* ml-2 */
|
|
flex-shrink: 0;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
/* Style for the (+1) text-only in the RESULTS TABLE */
|
|
.fl-text-only {
|
|
color: #000000; /* Black text */
|
|
font-weight: 700;
|
|
padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
|
|
margin-left: 0.5rem; /* ml-2 */
|
|
flex-shrink: 0;
|
|
line-height: 1.25;
|
|
/* No background, no border-radius */
|
|
}
|
|
|
|
/* D3 Chart Styles */
|
|
.chart-axis path,
|
|
.chart-axis line {
|
|
stroke: #9ca3af;
|
|
}
|
|
.chart-axis text {
|
|
fill: #d1d5db;
|
|
font-size: 12px;
|
|
}
|
|
.chart-title {
|
|
fill: #f9fafb;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
text-anchor: middle;
|
|
}
|
|
.chart-grid line {
|
|
stroke: #374151;
|
|
stroke-opacity: 0.7;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
.chart-line {
|
|
fill: none;
|
|
stroke-width: 2.5px;
|
|
}
|
|
.chart-dot {}
|
|
|
|
/* Sticky header for table */
|
|
#race-table-head th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: #111827;
|
|
}
|
|
|
|
/* Sticky first column */
|
|
#race-table-body td:first-child,
|
|
#race-table-head th:first-child {
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 11;
|
|
background-color: #111827;
|
|
min-width: 200px;
|
|
}
|
|
#race-table-body td:first-child {
|
|
z-index: 1;
|
|
background-color: #1f2937;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: left;
|
|
}
|
|
#race-table-head th:first-child {
|
|
text-align: left;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
/* Sticky second column */
|
|
#race-table-body td:nth-child(2),
|
|
#race-table-head th:nth-child(2) {
|
|
position: sticky;
|
|
left: 200px; /* Must match min-width of first col */
|
|
z-index: 11;
|
|
background-color: #111827;
|
|
min-width: 100px;
|
|
font-weight: 600;
|
|
color: #a855f7;
|
|
}
|
|
#race-table-body td:nth-child(2) {
|
|
z-index: 1;
|
|
background-color: #1f2937;
|
|
}
|