becomes a grid container.
(The pending list is already -based and needs none of this.) */
table.list2, table.list2 tbody { display: block; }
table.list2 thead { display: none; }
table.list2 { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
.table-responsive:has(table.list2) { overflow-x: visible; }
.list2-row {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* equal thirds: c1 left | c2 true-centre | c3 right */
grid-template-rows: 21px 18px; /* line 1 | line 2 */
column-gap: 10px;
padding: 7px 22px 7px 4px; /* right room reserved for the chevron */
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
align-items: center;
}
/* Grid children: drop table-cell padding/border, allow shrink for ellipsis. */
.list2-row > * { padding: 0; border: none; line-height: 1.25; min-width: 0; }
/* Beat scaffold/modern_base
width caps (e.g. td.statsLink max-width:100px)
so a slot cell can fill its grid track instead of being clipped early. */
.list2-row > td { width: auto; max-width: none; }
/* Subtle striping — 2% black on even rows. */
.list2-row.tablerowcolor1 { background: transparent; }
.list2-row.tablerowcolor2 { background: rgba(0, 0, 0, 0.02); }
/* Hover wash sits on the ROW, not the cells. Line 1 overlaps grid items — the
full-width .list2-title underlaps the right-aligned .list2-lead — so the
per-cell wash from modern_base (`tr:hover td` / `.clickable-row:hover td`)
paints an opaque box over the title text behind it. Harmless on a narrow phone
column, but very visible once the row stretches wide on desktop. So wash the
row and force the cells transparent, the same way the striping above works. */
@media (hover: hover) {
.list2-row.clickable-row:hover { background-color: #f8fafc; }
table.list2 tr.list2-row.clickable-row:hover > td { background-color: transparent !important; }
}
/* Chevron affordance on clickable rows — absolutely placed so it never sizes a
grid track. */
.list2-row.clickable-row::after {
content: "\203A";
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
color: var(--text-muted, #cbd5e1);
font-size: 20px;
line-height: 1;
}
/* Spacer + section-banner rows (e.g. ranking "Ausserhalb der Gewinnränge"). */
table.list2 tr.space { display: none; }
table.list2 tr:has(td[colspan]) {
display: block;
padding: 14px 8px 4px;
border-bottom: none;
}
table.list2 tr:has(td[colspan]) td { display: inline; white-space: normal !important; }
/* --- Column slots --- */
.list2-title {
grid-column: 1 / -1; grid-row: 1; /* span the whole row on line 1 (no centre item there) */
padding-right: 76px !important; /* reserve room for the short lead floated top-right */
text-align: left !important; /* beat desktop cell classes (e.g. .score centres) */
font-weight: 700; font-size: var(--fs-body);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list2-title--name { font-weight: 600; } /* player names sit a touch lighter than team matchups */
.list2-lead {
grid-column: 3; grid-row: 1;
text-align: right !important; /* .resultsTable .score centres the score on desktop — keep it right on mobile */
font-weight: 700; font-size: 15px;
color: var(--text-primary, #1e293b); white-space: nowrap;
}
.list2-c1, .list2-c2, .list2-c3 {
grid-row: 2; font-size: var(--fs-meta); font-weight: 700;
color: var(--text-muted, #64748b); white-space: nowrap;
}
/* !important so the mobile alignment wins over desktop column classes the
same cells also carry (.resultsTable .points-col centres, td.ranking
right-aligns) — otherwise c1/c2/c3 alignment varies per list. */
.list2-c1 { grid-column: 1; text-align: left !important; }
.list2-c2 { grid-column: 2; text-align: center !important; position: relative; }
.list2-c3 { grid-column: 3; text-align: right !important; }
/* Follow marker — a small, dimmed link icon next to the tip value. In the
left-aligned slot it simply trails the value. In the centred slot (c2) it
takes zero width and overflows just to the right of the value, so the
label+value stay centred while the icon sits right beside them. */
.bet-follow-icon { font-size: 0.8em; opacity: 0.55; margin-left: 3px; }
.list2-c2 .bet-follow-icon {
display: inline-block; width: 0; overflow: visible; white-space: nowrap; margin-left: 2px;
}
/* Shared line-2 label: text from data-label, typography defined once.
The gap before the value is a CSS margin (not a trailing space in the
attribute), so the centred c2 isn't skewed by trailing whitespace. */
.list2-c1::before, .list2-c2::before, .list2-c3::before {
content: attr(data-label);
margin-right: 4px;
font-size: var(--fs-label); font-weight: 600; color: var(--text-muted, #64748b); opacity: 0.6;
}
/* Empty slot → keep the label and show a muted dash, so every column stays
present and the row never collapses. One rule for ALL lists — no per-view
"–" needed. Applies at every width, since these lists render the card
layout on desktop too (see .desktop-only note in modern_base.css). */
.list2-c1:empty::after, .list2-c2:empty::after, .list2-c3:empty::after {
content: "–"; font-weight: 700; color: var(--text-muted, #64748b);
}
/* Inline rank prefix shown before the name on mobile (ranking + Alle Tipps). */
.list2 .rank-inline { font-weight: 700; color: var(--text-primary, #1e293b); }
/* ============================================================================
Ranking leaderboard — placement/labels come from the shared slots; only the
per-list accents live here. Position + odds-weighted betPoints (TP) columns
are desktop-only (the rank is folded inline into the name on mobile).
========================================================================== */
/* Gewinn (OG %) keeps the inline green/red colour set in the view's style attr. */
td.position { font-size: 21px; }
/* -----------------------------------------------------------------------
Pending matches list — maps onto the shared .list2 grid (the .pending-row
div carries .list2-row): matchup = title, tip badge = lead, meta
(group · date · hint) spans line 2. Striping/cursor come from modern_base.
----------------------------------------------------------------------- */
.pending-matchup { grid-column: 1 / 3; grid-row: 1; font-weight: 700; }
.pending-action { grid-column: 3; grid-row: 1; justify-self: end; }
.pending-meta { grid-column: 1 / 4; grid-row: 2; font-size: var(--fs-label); }
/* -----------------------------------------------------------------------
Results table — mobile. A true sibling of the pending list:
left-aligned matchup, same fonts/sizes, same row height, chevron.
Line 1: Home – Away ........................ score ›
Line 2: muted — Mein Tipp X · Torwette a:b
Whole row opens "Alle Tipps" (everyone's bets); the › is the affordance.
----------------------------------------------------------------------- */
/* ============================================================================
Ergebnisse / User-Stats results — placement + line-2 labels come from the
shared .list2 slots (added in the view: r-matchup=title, score=lead,
r-tp=c1, r-mt=c2, r-mtw=c3). Only the colour accents live here. (The
desktop-only columns are hidden globally by .desktop-only in modern_base.css.)
========================================================================== */
/* Combined matchup cell is the row title at every width — render it as a block
so it fills line 1 of the card grid. */
table.resultsTable td.r-matchup { display: block; }
/* Muted "–" separator between the two team names in the matchup title. */
table.resultsTable td.r-matchup .r-sep { color: var(--text-muted, #64748b); font-weight: 400; }
/* Punkte (points won) is green; neutral when nothing was won. Tipp + Torwette
keep the right(green)/wrong(red) colouring. */
table.resultsTable td.r-tp { color: var(--success-color, #16a34a); }
table.resultsTable td.r-tp.no-pts { color: var(--text-muted, #64748b); font-weight: 400; }
table.resultsTable td.r-mt.no-tip { font-weight: 400; }
table.resultsTable td.r-mt.right-bet,
table.resultsTable td.r-mtw.right-bet { color: var(--success-color, #16a34a); }
table.resultsTable td.r-mt.wrong-bet,
table.resultsTable td.r-mtw.wrong-bet { color: #ef4444; }
/* ============================================================================
Alle Tipps (betsAll) — placement + line-2 labels come from the shared .list2
slots (bet-name=title, bet-points=lead, bet-tip=c1, bet-goals=c2,
bet-wonpts=c3). Only the colour accents live here.
========================================================================== */
/* Gewonnene Punkte value is green, like the Ergebnisse points column. */
table.betsTable td.bet-wonpts { color: var(--success-color, #16a34a); }
/* Correct tip/torwette → green; wrong → red. */
table.betsTable td.bet-tip.bet-correct,
table.betsTable td.bet-goals.bet-correct { color: var(--success-color, #16a34a); }
table.betsTable td.bet-tip.bet-wrong,
table.betsTable td.bet-goals.bet-wrong { color: #ef4444; }
/* NOTE: the chart icon button + history overlay used to live here, but the
overlay renders on every viewport (it's in _user_stats, ungated) while this
sheet only loads on mobile — so on desktop it was unstyled. Moved to
modern_base.css (the shared sheet) so it works everywhere. */
|