henry
d8fba41ea5
Vite + React app using football-data.org API to display standings and match details for 12 competitions. Supports competition switching, team match history modal, and Vite proxy to handle CORS. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
148 lines
2.4 KiB
CSS
148 lines
2.4 KiB
CSS
:root {
|
|
--cl: #1a6fb5;
|
|
--el: #e87722;
|
|
--rp: #8e44ad;
|
|
--rel: #c0392b;
|
|
}
|
|
|
|
.wrapper {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table thead tr {
|
|
border-bottom: 1px solid #2a2a2a;
|
|
}
|
|
|
|
.table th {
|
|
text-align: center;
|
|
padding: 0.6rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #666;
|
|
}
|
|
|
|
.table th.pos,
|
|
.table th.team {
|
|
text-align: left;
|
|
}
|
|
|
|
.table td {
|
|
text-align: center;
|
|
padding: 0.65rem 0.75rem;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
color: #ccc;
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: #161616;
|
|
}
|
|
|
|
.clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Position column */
|
|
.pos {
|
|
width: 48px;
|
|
text-align: left !important;
|
|
}
|
|
|
|
.posIndicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.dotCl { background: var(--cl); }
|
|
.dotEl { background: var(--el); }
|
|
.dotRp { background: var(--rp); }
|
|
.dotRel { background: var(--rel); }
|
|
.dotNeutral { background: #333; color: #aaa; }
|
|
|
|
/* Row highlight via left border */
|
|
.rowCl { border-left: 3px solid var(--cl); }
|
|
.rowEl { border-left: 3px solid var(--el); }
|
|
.rowRp { border-left: 3px solid var(--rp); }
|
|
.rowRel { border-left: 3px solid var(--rel); }
|
|
|
|
/* Team column */
|
|
.team {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
text-align: left !important;
|
|
min-width: 180px;
|
|
}
|
|
|
|
.crest {
|
|
width: 22px;
|
|
height: 22px;
|
|
object-fit: contain;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.teamName {
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Points */
|
|
.pts {
|
|
font-weight: 700;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* Goal difference */
|
|
.positive { color: #2ecc71 !important; }
|
|
.negative { color: #e74c3c !important; }
|
|
|
|
/* Form badges */
|
|
.form {
|
|
display: flex !important;
|
|
gap: 3px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-width: 90px;
|
|
}
|
|
|
|
.formBadge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 3px;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
}
|
|
|
|
.formW { background: #27ae60; }
|
|
.formD { background: #555; }
|
|
.formL { background: #c0392b; }
|
|
|
|
/* Legend */
|
|
.legend {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-top: 1.25rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #1f1f1f;
|
|
}
|