feat: allinea stile modalità mobile alla dashboard estesa

Le card punteggio mobile adottano lo stesso linguaggio visivo della
modalità estesa: pannello scuro #161618, stripe colorata in cima
(giallo home, blu guest), score come testo colorato senza riquadro.
I bottoni SET diventano a colore pieno; btn-ctrl e btn-danger
uniformati ai token colore della dashboard landscape.
This commit is contained in:
2026-06-20 23:34:41 +02:00
parent c7d0ec6215
commit e212fb4654
+54 -56
View File
@@ -503,47 +503,52 @@ export default {
.team-score {
flex: 1;
border-radius: 16px;
padding: 16px 12px;
background: #161618;
border: 1px solid rgba(255,255,255,0.07);
overflow: hidden;
padding: 14px 12px 14px;
text-align: center;
cursor: pointer;
position: relative;
transition: transform 0.1s;
min-height: 120px;
min-height: 110px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.team-score:active {
transform: scale(0.97);
}
.home-bg {
background: linear-gradient(145deg, #1a1a1a, #333);
border: 2px solid #fdd835;
color: #fdd835;
}
.guest-bg {
background: linear-gradient(145deg, #0d47a1, #1565c0);
border: 2px solid #64b5f6;
color: #fff;
.team-score::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
}
.team-score:active { transform: scale(0.97); }
/* stripe colorata come nella versione estesa */
.home-bg::before { background: #f5c518; }
.guest-bg::before { background: #2196f3; }
.team-name {
font-size: 14px;
font-weight: 700;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
letter-spacing: 1.5px;
color: #f0f0f0;
margin-bottom: 4px;
}
.team-pts {
font-size: 56px;
font-size: 54px;
font-weight: 900;
line-height: 1;
}
.home-bg .team-pts { color: #f5c518; }
.guest-bg .team-pts { color: #2196f3; }
.team-set {
font-size: 13px;
font-weight: 600;
opacity: 0.75;
font-size: 11px;
font-weight: 700;
margin-top: 4px;
color: #888;
}
.serv-icon {
position: absolute;
@@ -558,18 +563,16 @@ export default {
}
.btn-undo {
width: 100%;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,171,145,0.2);
color: #ffab91;
padding: 10px;
font-size: 14px;
font-size: 13px;
font-weight: 700;
border-radius: 12px;
border-radius: 10px;
cursor: pointer;
}
.btn-undo:active {
background: rgba(255,100,50,0.2);
}
.btn-undo:active { background: rgba(255,100,50,0.2); }
.action-row {
display: flex;
@@ -578,17 +581,19 @@ export default {
}
.btn-set {
flex: 1;
padding: 12px;
font-size: 13px;
font-weight: 700;
border-radius: 12px;
padding: 11px;
font-size: 11px;
font-weight: 800;
letter-spacing: 1.2px;
border-radius: 10px;
cursor: pointer;
border: none;
text-transform: uppercase;
transition: opacity 0.1s;
}
.btn-set:active {
transform: scale(0.97);
}
.btn-set:active { transform: scale(0.97); opacity: 0.8; }
.btn-set.home-bg { background: #f5c518; color: #111; }
.btn-set.guest-bg { background: #2196f3; color: #fff; }
.controls {
display: grid;
@@ -604,35 +609,28 @@ export default {
}
.btn-ctrl {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: #e0e0e0;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
color: #bbb;
padding: 14px 8px;
font-size: 14px;
font-size: 13px;
font-weight: 600;
border-radius: 12px;
transition: background 0.15s;
border-radius: 10px;
transition: background 0.12s;
}
.btn-ctrl:active {
background: rgba(255,255,255,0.18);
}
.btn-ctrl:disabled {
opacity: 0.35;
}
.btn-ctrl:active { background: rgba(255,255,255,0.16); }
.btn-ctrl:disabled { opacity: 0.28; }
.btn-danger {
background: rgba(198, 40, 40, 0.25);
border: 1px solid rgba(239, 83, 80, 0.4);
color: #ff8a80;
background: rgba(180,30,30,0.2);
border: 1px solid rgba(239,83,80,0.3);
color: #ff6b6b;
padding: 14px 8px;
font-size: 14px;
font-size: 13px;
font-weight: 600;
border-radius: 12px;
}
.btn-danger:active {
background: rgba(198, 40, 40, 0.45);
border-radius: 10px;
}
.btn-danger:active { background: rgba(198,40,40,0.4); }
/* ── MODALITÀ ESTESA ── */