style: dashboard LED smaller, TipModal flags fullbleed + subtle picker buttons
Build & Deploy Tippspiel / build (push) Successful in 51s

- Dashboard: LED digits 20px (was 26px) — less crowded between flags
- MatchCard: topRow margins for better badge alignment
- TipModal: flags now object-fit:cover (fullbleed)
- TipModal: picker buttons less glossy — reduced shine from 55% to 12%,
  smaller shadow, subtler hover effect

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-12 13:37:57 +02:00
parent 58b2c7ea86
commit 7c26c93905
3 changed files with 20 additions and 26 deletions
+4 -2
View File
@@ -21,12 +21,14 @@
inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
/* Top row */
/* Top row — badges inset to align near flag inner edges */
.topRow {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
margin-bottom: 12px;
margin-left: 8px;
margin-right: 8px;
}
.status {
+13 -21
View File
@@ -99,9 +99,9 @@
}
.flagImg {
width: 48px;
height: 48px;
object-fit: contain;
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 0;
}
@@ -164,13 +164,13 @@
}
.pickerBtn {
width: 56px;
height: 56px;
width: 48px;
height: 48px;
background: var(--surface-high);
border: 1px solid var(--border-subtle);
border-radius: 16px;
border-radius: 14px;
color: var(--text-primary);
font-size: 24px;
font-size: 22px;
font-weight: 300;
cursor: pointer;
display: flex;
@@ -179,31 +179,23 @@
transition: all 0.15s;
position: relative;
overflow: hidden;
box-shadow:
var(--shadow-card),
inset 0 1px 0 rgba(255,255,255,0.55),
inset 0 -1px 0 rgba(0,0,0,0.06);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Glossy sheen */
.pickerBtn::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 55%;
background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
height: 40%;
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
pointer-events: none;
border-radius: 16px 16px 0 0;
border-radius: 14px 14px 0 0;
}
.pickerBtn:hover {
background: rgba(75,183,248,0.12);
border-color: rgba(75,183,248,0.35);
background: rgba(75,183,248,0.08);
border-color: rgba(75,183,248,0.2);
color: var(--primary);
box-shadow:
0 6px 20px rgba(75,183,248,0.2),
inset 0 1px 0 rgba(75,183,248,0.15),
inset 1px 0 0 rgba(75,183,248,0.08);
}
.pickerBtn:active {
+3 -3
View File
@@ -123,7 +123,7 @@
.ledDigit, .ledColon {
font-family: 'DSEG7', 'Courier New', monospace;
font-size: 26px;
font-size: 20px;
color: #FECC4C;
display: inline-block;
text-align: center;
@@ -135,11 +135,11 @@
}
.ledDigit {
width: 18px;
width: 14px;
}
.ledColon {
width: 8px;
width: 6px;
}
.heroGroup {