style: dashboard LED smaller, TipModal flags fullbleed + subtle picker buttons
- 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:
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user