style: BEENDET badge right-aligned, bigger score, score aligned to flag center
Build & Deploy Tippspiel / build (push) Successful in 51s
Build & Deploy Tippspiel / build (push) Successful in 51s
- 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:
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user