henry
072a985ba0
Breakpoints at 600px (tablet) and 420px (mobile): - Header: smaller emblem and title on mobile - StandingsTable: hide DV/DT/Vorm at 600px, also W/D/L at 420px - TeamMatchesModal: bottom sheet on mobile, hide matchday column - CompetitionPicker: smaller buttons, hide country label on mobile Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
192 lines
3.1 KiB
CSS
192 lines
3.1 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: 140px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
Column order in thead/tbody:
|
|
1=pos 2=team 3=G 4=W 5=D 6=L 7=DV 8=DT 9=DS 10=Ptn 11=Vorm
|
|
*/
|
|
|
|
/* Tablet: hide DV, DT, Vorm */
|
|
@media (max-width: 600px) {
|
|
.table th:nth-child(7),
|
|
.table td:nth-child(7),
|
|
.table th:nth-child(8),
|
|
.table td:nth-child(8),
|
|
.table th:nth-child(11),
|
|
.table td:nth-child(11) {
|
|
display: none;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 0.6rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Mobile: also hide W, D, L */
|
|
@media (max-width: 420px) {
|
|
.table th:nth-child(4),
|
|
.table td:nth-child(4),
|
|
.table th:nth-child(5),
|
|
.table td:nth-child(5),
|
|
.table th:nth-child(6),
|
|
.table td:nth-child(6) {
|
|
display: none;
|
|
}
|
|
|
|
.team {
|
|
min-width: 110px;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 0.55rem 0.35rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|