style: BEENDET badge right-aligned, bigger score, score aligned to flag center

- BEENDET as subtle badge on the right (same position as LIVE/countdown)
- Score: 26px default, 32px for live matches
- Score vertically centered to flag height (52px), not flag+name

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-12 09:11:36 +02:00
parent 0f70a1913c
commit 1eaec75901
2 changed files with 27 additions and 13 deletions
+24 -10
View File
@@ -41,6 +41,18 @@
color: var(--error); color: var(--error);
} }
/* BEENDET badge — right-aligned in header */
.finishedBadge {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--surface-high);
padding: 3px 10px;
border-radius: 20px;
}
/* LIVE badge — right-aligned in header */ /* LIVE badge — right-aligned in header */
.liveBadge { .liveBadge {
display: flex; display: flex;
@@ -120,7 +132,7 @@
/* Match row — Teams + Score */ /* Match row — Teams + Score */
.matchRow { .matchRow {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
margin-bottom: 18px; margin-bottom: 18px;
@@ -136,6 +148,15 @@
min-width: 0; min-width: 0;
} }
/* Score aligned to flag center (not flag+name center) */
.scoreBox {
display: flex;
align-items: center;
justify-content: center;
align-self: flex-start;
height: 52px; /* match flag height for vertical centering */
}
/* Flag box — subtle, clean */ /* Flag box — subtle, clean */
.flagBox { .flagBox {
width: 52px; width: 52px;
@@ -183,24 +204,17 @@
white-space: nowrap; white-space: nowrap;
} }
/* Score / VS center */
.scoreBox {
display: flex;
align-items: center;
justify-content: center;
}
.score { .score {
font-family: 'Plus Jakarta Sans', sans-serif; font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px; font-size: 26px;
font-weight: 800; font-weight: 800;
color: var(--text-primary); color: var(--text-primary);
letter-spacing: 4px; letter-spacing: 4px;
} }
.scoreLive { .scoreLive {
font-size: 28px; font-size: 32px;
color: var(--text-primary);
} }
.kickoffCenter { .kickoffCenter {
+3 -3
View File
@@ -86,9 +86,6 @@ export default function MatchCard({ match, onTip }: Props) {
{/* Top row: Group left + Status/Countdown right */} {/* Top row: Group left + Status/Countdown right */}
<div className={styles.topRow}> <div className={styles.topRow}>
{isFinished && (
<span className={styles.status}>{STATUS_LABELS[match.status] ?? match.status}</span>
)}
{match.group && ( {match.group && (
<span className={styles.group}> <span className={styles.group}>
{match.group.replace('GROUP_', 'Gruppe ')} {match.group.replace('GROUP_', 'Gruppe ')}
@@ -101,6 +98,9 @@ export default function MatchCard({ match, onTip }: Props) {
LIVE LIVE
</span> </span>
)} )}
{isFinished && (
<span className={styles.finishedBadge}>{STATUS_LABELS[match.status] ?? match.status}</span>
)}
{(state === 'open' || state === 'tipped') && match.tippable && ( {(state === 'open' || state === 'tipped') && match.tippable && (
<span className={`${styles.countdownBadge} ${remainingMins < 60 ? styles.countdownUrgent : ''}`}> <span className={`${styles.countdownBadge} ${remainingMins < 60 ? styles.countdownUrgent : ''}`}>
{match.minutesUntilKickoff < 60 {match.minutesUntilKickoff < 60