/* ============================================================ myVote — Foglio di stile principale ============================================================ Allineato al design system "DexHub" dell'app Android originale. Strategia generale: - tutte le palette (default, sky, sunset, ocean, forest) condividono lo stesso "surface ladder" scuro (sfondi quasi-neri) o chiaro (sfondi grigi-bianchi). L'identità visiva è data dall'accento primary/secondary/tertiary, esposto come variabili CSS. - il theme è impostato dinamicamente da js/theme.js applicando le classi `.theme-dark` / `.theme-light` e `.palette-` su . - ogni schermata avvolge il contenuto in `.gradient-bg` per il fondo diagonale tipico di DexHub (~6% del primary in alto, base flat). ============================================================ */ /* ---- Reset minimo ---- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color: var(--text); background: var(--bg); overflow-x: hidden; } input, textarea, button, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } /* ============================================================ Variabili CSS — palette di default (Default monocromatica grigio-scuro). Sovrascritte da `.palette-` per sky/sunset/ocean/forest. ============================================================ */ :root { /* Surface ladder - dark (default theme) */ --bg: #0A0A0A; --surface: #141414; --surface-2: #1C1C1C; --surface-3: #262626; --border: #2A2A2A; --text: #ECECEC; --text-soft: #C8C8C8; --muted: #8A8A8A; /* Accenti - palette default (slate) */ --primary: #A1A1AA; --secondary: #71717A; --tertiary: #52525B; --on-primary: #0A0A0A; /* Stati */ --danger: #EF4444; --success: #10B981; --warning: #F59E0B; /* Misure & forme */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; } /* ---- Theme: light ---- */ body.theme-light { --bg: #F5F7FA; --surface: #FFFFFF; --surface-2: #F8FAFC; --surface-3: #EEF2F7; --border: #E1E5EA; --text: #1F2933; --text-soft: #334155; --muted: #667080; --on-primary: #FFFFFF; --danger: #DC2626; --success: #16A34A; --warning: #D97706; } /* ---- Palette: Sky (era il vecchio default) ---- */ body.palette-sky { --primary: #4AA5D0; --secondary: #3786B1; --tertiary: #CFB347; } body.palette-sky.theme-light { --primary: #2563EB; --secondary: #1D4ED8; --tertiary: #0284C7; } /* ---- Palette: Sunset ---- */ body.palette-sunset { --primary: #FB923C; --secondary: #F59E0B; --tertiary: #EC4899; } body.palette-sunset.theme-light { --primary: #EA580C; --secondary: #D97706; --tertiary: #BE185D; } /* ---- Palette: Ocean ---- */ body.palette-ocean { --primary: #22D3EE; --secondary: #06B6D4; --tertiary: #38BDF8; } body.palette-ocean.theme-light { --primary: #0891B2; --secondary: #0E7490; --tertiary: #0369A1; } /* ---- Palette: Forest ---- */ body.palette-forest { --primary: #34D399; --secondary: #10B981; --tertiary: #A3E635; } body.palette-forest.theme-light { --primary: #16A34A; --secondary: #15803D; --tertiary: #059669; } /* ---- Default light: contrasto migliore ---- */ body.palette-default.theme-light, body:not([class*="palette-"]).theme-light { --primary: #1F2933; --secondary: #334155; --tertiary: #475569; } /* ============================================================ Layout dell'app ============================================================ */ .app-root { min-height: 100vh; display: flex; flex-direction: column; } /* Background con gradiente verticale leggero (DexHub-style): un velo di primary in alto + flat sotto. Quando vogliamo un "colore giurato" sostituiamo il gradiente via inline-style. */ .gradient-bg { min-height: 100vh; background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 6%, var(--bg)) 0%, var(--bg) 35%, var(--bg) 100%); display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; padding: var(--space-md) var(--space-lg) var(--space-xl); -webkit-overflow-scrolling: touch; } .center-screen { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--space-lg); } /* ============================================================ Top app bar (replica dello Scaffold/TopAppBar Compose) ============================================================ */ .top-bar { display: flex; align-items: center; gap: var(--space-sm); padding: 12px 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 5; } .top-bar h1 { margin: 0; font-size: 1.15rem; font-weight: 600; flex: 1 1 auto; color: var(--text); } .top-bar .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background .15s ease; } .top-bar .icon-btn:hover { background: var(--surface-2); } .top-bar .icon-btn svg { width: 22px; height: 22px; fill: currentColor; } /* ============================================================ Tipografia ============================================================ */ .t-display-l { font-size: 3.6rem; line-height: 1.1; font-weight: 800; } .t-display-m { font-size: 2.8rem; line-height: 1.15; font-weight: 700; } .t-display-s { font-size: 2.2rem; line-height: 1.2; font-weight: 700; } .t-headline-l { font-size: 2rem; line-height: 1.25; font-weight: 700; } .t-headline-m { font-size: 1.75rem; line-height: 1.3; font-weight: 600; } .t-headline-s { font-size: 1.5rem; line-height: 1.3; font-weight: 600; } .t-title-l { font-size: 1.35rem; line-height: 1.3; font-weight: 600; } .t-title-m { font-size: 1.05rem; line-height: 1.4; font-weight: 600; } .t-body-l { font-size: 1rem; line-height: 1.5; } .t-body-m { font-size: 0.92rem; line-height: 1.45; } .t-body-s { font-size: 0.84rem; line-height: 1.4; color: var(--text-soft); } .t-label-l { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .t-center { text-align: center; } .t-primary { color: var(--primary); } .t-secondary { color: var(--secondary); } .t-tertiary { color: var(--tertiary); } .t-soft { color: var(--text-soft); } .t-muted { color: var(--muted); } .t-danger { color: var(--danger); } .t-bold { font-weight: 700; } .t-black { font-weight: 800; } /* ============================================================ Spaziature utili ============================================================ */ .row { display: flex; align-items: center; gap: var(--space-sm); } .row.between { justify-content: space-between; } .col { display: flex; flex-direction: column; } .col.gap { gap: var(--space-md); } .col.gap-sm { gap: var(--space-sm); } .col.gap-lg { gap: var(--space-lg); } .full-width { width: 100%; } .flex-1 { flex: 1 1 auto; } .center-h { display: flex; justify-content: center; } .spacer-xs { height: var(--space-xs); } .spacer-sm { height: var(--space-sm); } .spacer-md { height: var(--space-md); } .spacer-lg { height: var(--space-lg); } .spacer-xl { height: var(--space-xl); } /* ============================================================ Form fields ============================================================ */ .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 0.85rem; color: var(--muted); font-weight: 500; } .text-input { padding: 12px 14px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: var(--radius-sm); transition: border-color .15s ease, box-shadow .15s ease; } .text-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); } /* ============================================================ Slider — replica del Material Slider ============================================================ */ input[type="range"].vote-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; } input[type="range"].vote-slider::-webkit-slider-runnable-track { height: 6px; background: var(--border); border-radius: 3px; } input[type="range"].vote-slider::-moz-range-track { height: 6px; background: var(--border); border-radius: 3px; } input[type="range"].vote-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); border: 4px solid var(--surface); margin-top: -10px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); cursor: pointer; } input[type="range"].vote-slider::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); border: 4px solid var(--surface); box-shadow: 0 2px 6px rgba(0,0,0,0.4); cursor: pointer; } /* ============================================================ Dialog / modal di base (per ProvisionalRankingDialog & conferme) ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--space-md); } .modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); max-width: 480px; width: 100%; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; } .modal-header { padding: var(--space-md) var(--space-md) var(--space-sm); font-weight: 600; font-size: 1.1rem; } .modal-body { padding: 0 var(--space-md) var(--space-md); overflow-y: auto; } .modal-footer { padding: var(--space-sm) var(--space-md); display: flex; justify-content: flex-end; gap: var(--space-sm); border-top: 1px solid var(--border); } /* ============================================================ Reveal full-screen del voto (FullScreenVoteReveal) ============================================================ */ .reveal-fullscreen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; transition: background-color 0.4s ease; z-index: 50; cursor: pointer; padding: var(--space-lg); } .reveal-fullscreen .alias { color: rgba(255,255,255,0.9); font-size: 1.4rem; font-weight: 600; margin-bottom: var(--space-md); } .reveal-fullscreen .value { color: white; font-weight: 800; line-height: 1; } .reveal-fullscreen .hint { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-top: var(--space-md); } /* ============================================================ Classifica finale & gruppi (ranking) ============================================================ */ .ranking-screen { flex: 1 1 auto; overflow-y: auto; padding: var(--space-lg) var(--space-md); cursor: pointer; } .ranking-card { border-radius: var(--radius-lg); padding: var(--space-md); margin-bottom: var(--space-md); color: var(--text); } .ranking-card.gold { background: linear-gradient(90deg, #FFD54F, #FFA000); color: #111; } .ranking-card.silver { background: linear-gradient(90deg, #E0E0E0, #9E9E9E); color: #111; } .ranking-card.bronze { background: linear-gradient(90deg, #FFAB91, #BF360C); color: #111; } .ranking-card.normal { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--tertiary) 10%, transparent)); } .ranking-row { display: flex; align-items: center; gap: var(--space-md); padding: 6px 12px; border-radius: var(--radius-sm); margin: 4px 0; } .ranking-row .pos { font-weight: 700; font-size: 1.4rem; min-width: 48px; } .ranking-row .name { flex: 1 1 auto; font-weight: 600; } /* ============================================================ Lista vuota / messaggi placeholder ============================================================ */ .empty-state { text-align: center; color: var(--text-soft); padding: var(--space-xl) var(--space-md); } /* ============================================================ Utilità di accessibilità (focus-visible) ============================================================ */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .tappable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ============================================================ Toast errori (banner sopra la pagina) ============================================================ */ .toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 10px 16px; border-radius: var(--radius-md); z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,0.4); animation: toast-in .25s ease; max-width: 92vw; } @keyframes toast-in { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }