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);
}
/* 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 */
.liveBadge {
display: flex;
@@ -120,7 +132,7 @@
/* Match row — Teams + Score */
.matchRow {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
gap: 16px;
margin-bottom: 18px;
@@ -136,6 +148,15 @@
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 */
.flagBox {
width: 52px;
@@ -183,24 +204,17 @@
white-space: nowrap;
}
/* Score / VS center */
.scoreBox {
display: flex;
align-items: center;
justify-content: center;
}
.score {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 22px;
font-size: 26px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: 4px;
}
.scoreLive {
font-size: 28px;
color: var(--text-primary);
font-size: 32px;
}
.kickoffCenter {
+3 -3
View File
@@ -86,9 +86,6 @@ export default function MatchCard({ match, onTip }: Props) {
{/* Top row: Group left + Status/Countdown right */}
<div className={styles.topRow}>
{isFinished && (
<span className={styles.status}>{STATUS_LABELS[match.status] ?? match.status}</span>
)}
{match.group && (
<span className={styles.group}>
{match.group.replace('GROUP_', 'Gruppe ')}
@@ -101,6 +98,9 @@ export default function MatchCard({ match, onTip }: Props) {
LIVE
</span>
)}
{isFinished && (
<span className={styles.finishedBadge}>{STATUS_LABELS[match.status] ?? match.status}</span>
)}
{(state === 'open' || state === 'tipped') && match.tippable && (
<span className={`${styles.countdownBadge} ${remainingMins < 60 ? styles.countdownUrgent : ''}`}>
{match.minutesUntilKickoff < 60