diff --git a/src/components/ControllerPage.vue b/src/components/ControllerPage.vue index b7b56b4..be98972 100644 --- a/src/components/ControllerPage.vue +++ b/src/components/ControllerPage.vue @@ -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 ── */