attilio/segnapunti
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: allinea stile modalità mobile alla dashboard estesa

Browse Source 
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:
Davide Grilli
2026-06-20 23:34:41 +02:00
parent c7d0ec6215
commit e212fb4654
1 changed files with 54 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ControllerPage.vue
+54 -56
View File
@@ -503,47 +503,52 @@ export default {
.team-score { .team-score {
flex: 1; flex: 1;
border-radius: 16px; 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; text-align: center;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: transform 0.1s; transition: transform 0.1s;
min-height: 120px; min-height: 110px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.team-score:active { .team-score::before {
transform: scale(0.97); content: '';
} position: absolute;
.home-bg { top: 0; left: 0; right: 0;
background: linear-gradient(145deg, #1a1a1a, #333); height: 4px;
border: 2px solid #fdd835;
color: #fdd835;
}
.guest-bg {
background: linear-gradient(145deg, #0d47a1, #1565c0);
border: 2px solid #64b5f6;
color: #fff;
} }
.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 { .team-name {
font-size: 14px; font-size: 13px;
font-weight: 700; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1.5px;
color: #f0f0f0;
margin-bottom: 4px; margin-bottom: 4px;
} }
.team-pts { .team-pts {
font-size: 56px; font-size: 54px;
font-weight: 900; font-weight: 900;
line-height: 1; line-height: 1;
} }
.home-bg .team-pts { color: #f5c518; }
.guest-bg .team-pts { color: #2196f3; }
.team-set { .team-set {
font-size: 13px; font-size: 11px;
font-weight: 600; font-weight: 700;
opacity: 0.75;
margin-top: 4px; margin-top: 4px;
color: #888;
} }
.serv-icon { .serv-icon {
position: absolute; position: absolute;
@@ -558,18 +563,16 @@ export default {
} }
.btn-undo { .btn-undo {
width: 100%; width: 100%;
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.2); border: 1px solid rgba(255,171,145,0.2);
color: #ffab91; color: #ffab91;
padding: 10px; padding: 10px;
font-size: 14px; font-size: 13px;
font-weight: 700; font-weight: 700;
border-radius: 12px; border-radius: 10px;
cursor: pointer; cursor: pointer;
} }
.btn-undo:active { .btn-undo:active { background: rgba(255,100,50,0.2); }
background: rgba(255,100,50,0.2);
}
.action-row { .action-row {
display: flex; display: flex;
@@ -578,17 +581,19 @@ export default {
} }
.btn-set { .btn-set {
flex: 1; flex: 1;
padding: 12px; padding: 11px;
font-size: 13px; font-size: 11px;
font-weight: 700; font-weight: 800;
border-radius: 12px; letter-spacing: 1.2px;
border-radius: 10px;
cursor: pointer; cursor: pointer;
border: none; border: none;
text-transform: uppercase; text-transform: uppercase;
transition: opacity 0.1s;
} }
.btn-set:active { .btn-set:active { transform: scale(0.97); opacity: 0.8; }
transform: scale(0.97); .btn-set.home-bg { background: #f5c518; color: #111; }
} .btn-set.guest-bg { background: #2196f3; color: #fff; }
.controls { .controls {
display: grid; display: grid;
@@ -604,35 +609,28 @@ export default {
} }
.btn-ctrl { .btn-ctrl {
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.1);
color: #e0e0e0; color: #bbb;
padding: 14px 8px; padding: 14px 8px;
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 600;
border-radius: 12px; border-radius: 10px;
transition: background 0.15s; transition: background 0.12s;
} }
.btn-ctrl:active { .btn-ctrl:active { background: rgba(255,255,255,0.16); }
background: rgba(255,255,255,0.18); .btn-ctrl:disabled { opacity: 0.28; }
}
.btn-ctrl:disabled {
opacity: 0.35;
}
.btn-danger { .btn-danger {
background: rgba(198, 40, 40, 0.25); background: rgba(180,30,30,0.2);
border: 1px solid rgba(239, 83, 80, 0.4); border: 1px solid rgba(239,83,80,0.3);
color: #ff8a80; color: #ff6b6b;
padding: 14px 8px; padding: 14px 8px;
font-size: 14px; font-size: 13px;
font-weight: 600; font-weight: 600;
border-radius: 12px; border-radius: 10px;
}
.btn-danger:active {
background: rgba(198, 40, 40, 0.45);
} }
.btn-danger:active { background: rgba(198,40,40,0.4); }
/* ── MODALITÀ ESTESA ── */ /* ── MODALITÀ ESTESA ── */