style: unified flag+time design across Dashboard and Spielplan
Build & Deploy Tippspiel / build (push) Successful in 52s

Dashboard:
- Flags aligned to top (flex-start) — consistent height regardless of name length
- LED time centered to flag height (64px)

Match Cards:
- Flags fullbleed (object-fit: cover), larger (56px), glassmorphism shine
- LED kickoff time replaces dash separator between flags
- Score appears at same position when Live/Finished
- Removed separate kickoffRow — cards are more compact
- scoreBox height matches flag height for vertical centering

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-12 13:22:13 +02:00
parent fd47d05ff6
commit 58b2c7ea86
3 changed files with 31 additions and 49 deletions
+23 -35
View File
@@ -102,40 +102,25 @@
border: 1px solid rgba(75,183,248,0.15);
}
/* Kickoff — stadium LED segment display */
.kickoffRow {
text-align: center;
margin: 8px 0;
}
/* LED time between flags */
.kickoffLED {
font-family: 'DSEG7', 'Courier New', monospace;
font-size: 18px;
font-size: 16px;
color: #FECC4C;
letter-spacing: 0.02em;
word-spacing: -0.1em;
text-shadow:
0 0 4px rgba(254, 174, 50, 0.9),
0 0 12px rgba(254, 174, 50, 0.6),
0 0 24px rgba(254, 174, 50, 0.3),
0 0 40px rgba(254, 174, 50, 0.15);
0 0 3px rgba(254, 174, 50, 0.9),
0 0 8px rgba(254, 174, 50, 0.5),
0 0 16px rgba(254, 174, 50, 0.25);
}
/* VS separator */
.vsSeparator {
font-size: 24px;
font-weight: 800;
color: var(--text-muted);
}
/* Match row — Teams + Score */
/* Match row — Teams + Score/Time */
.matchRow {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 16px;
margin-bottom: 18px;
gap: 10px;
margin-bottom: 16px;
}
/* Teams — flag on top, name below */
@@ -148,23 +133,26 @@
min-width: 0;
}
/* Score aligned to flag center (not flag+name center) */
/* Center: Score or LED time, vertically centered to flag */
.scoreBox {
display: flex;
align-items: center;
justify-content: center;
align-self: flex-start;
height: 52px; /* match flag height for vertical centering */
height: 56px; /* match flag height for vertical centering */
min-width: 60px;
}
/* Flag box — subtle, clean */
/* Flag box — fullbleed icon style */
.flagBox {
width: 52px;
height: 52px;
border-radius: 12px;
width: 56px;
height: 56px;
border-radius: 14px;
background: var(--surface-high);
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
border: 1px solid var(--border-subtle);
box-shadow:
0 4px 12px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
@@ -178,15 +166,15 @@
position: absolute;
top: 0; left: 0; right: 0;
height: 40%;
background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
pointer-events: none;
z-index: 1;
}
.crest {
width: 36px;
height: 36px;
object-fit: contain;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 0;
}