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:
@@ -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 ── */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user