/* ===================================================================== Tema dTouchView — STANDARD = chiaro; DarkMode = scuro. Scelta: segue l'OS (prefers-color-scheme) OPPURE la preferenza cliente (framework.DarkMode -> ). L'override cliente ha specificita' piu' alta della media query, quindi vince sull'OS. Variabili unificate (superset usato anche dalle pagine con palette propria). ===================================================================== */ :root { /* --- STANDARD: tema chiaro --- */ --bg:#f4f6f9; --panel:#ffffff; --fg:#1f2733; --muted:#6b7480; --accent:#e0a800; --line:#e2e5ea; --ok:#2fae63; --err:#d64524; --link:#2563eb; --pill-bg:#eef1f5; --pill-fg:#3a424d; --rowhover:#f2f6fc; --canvasbg:#eef1f5; --btnfg:#1b1f24; --footer:#8a929b; color-scheme: light; } /* --- Segui OS: scuro se il sistema e' scuro (nessun override cliente) --- */ @media (prefers-color-scheme: dark) { :root { --bg:#1e2227; --panel:#262b31; --fg:#e6e6e6; --muted:#9aa3ad; --accent:#f3b51b; --line:#333a42; --ok:#3ad07a; --err:#e0533a; --link:#5aa9ff; --pill-bg:#2f353c; --pill-fg:#cfd5db; --rowhover:#2b3138; --canvasbg:#1b1f24; --btnfg:#1b1f24; --footer:#7a828b; color-scheme: dark; } } /* --- Override CLIENTE (framework.DarkMode): forza a prescindere dall'OS --- */ :root[data-theme="light"] { --bg:#f4f6f9; --panel:#ffffff; --fg:#1f2733; --muted:#6b7480; --accent:#e0a800; --line:#e2e5ea; --ok:#2fae63; --err:#d64524; --link:#2563eb; --pill-bg:#eef1f5; --pill-fg:#3a424d; --rowhover:#f2f6fc; --canvasbg:#eef1f5; --btnfg:#1b1f24; --footer:#8a929b; color-scheme: light; } :root[data-theme="dark"] { --bg:#1e2227; --panel:#262b31; --fg:#e6e6e6; --muted:#9aa3ad; --accent:#f3b51b; --line:#333a42; --ok:#3ad07a; --err:#e0533a; --link:#5aa9ff; --pill-bg:#2f353c; --pill-fg:#cfd5db; --rowhover:#2b3138; --canvasbg:#1b1f24; --btnfg:#1b1f24; --footer:#7a828b; color-scheme: dark; } * { box-sizing: border-box; } body { margin:0; background:var(--bg); color:var(--fg); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } header.top { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; } header.top h1 { font-size:17px; margin:0; font-weight:600; } header.top h1 .accent { color:var(--accent); } header.top .meta { color:var(--muted); font-size:13px; margin-left:auto; } .crumbs { font-size:13px; color:var(--muted); } .crumbs a { color:var(--muted); } main { padding:18px; max-width:1200px; margin:0 auto; } /* griglia dispositivi */ .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:12px; } /* L'attributo `hidden` deve vincere SEMPRE. Senza questa riga, qualunque regola d'autore che imposti `display` (es. la .card qui sotto, o una .placeholder in flex) batte il `[hidden]{display:none}` del browser: l'elemento resta VISIBILE pur avendo l'attributo, e non c'e' alcun segnale di errore. E' gia' successo due volte — banner delle statistiche e modulo di registrazione — quindi si chiude la questione una volta per tutte. */ [hidden] { display: none !important; } .card { display:block; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; transition:border-color .15s, transform .05s; } .card:hover { border-color:var(--accent); text-decoration:none; transform:translateY(-1px); } .card .name { font-size:16px; font-weight:600; color:var(--fg); } .card .sub { font-size:12px; color:var(--muted); margin-top:4px; } .card .row { display:flex; justify-content:space-between; margin-top:10px; font-size:13px; color:var(--muted); } .card .pill { background:var(--pill-bg); border-radius:20px; padding:2px 10px; color:var(--pill-fg); font-size:12px; } /* pannelli dettaglio */ .panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px; } .panel h2 { margin:0 0 12px; font-size:15px; font-weight:600; } .kv { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:8px 18px; font-size:14px; } .kv .k { color:var(--muted); } .kv .v { color:var(--fg); font-weight:500; } table { width:100%; border-collapse:collapse; font-size:13px; } th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); } th { color:var(--muted); font-weight:600; } tr:hover td { background:var(--rowhover); } canvas { width:100%; height:280px; display:block; background:var(--canvasbg); border-radius:8px; } .btn { display:inline-block; background:var(--accent); color:var(--btnfg); font-weight:600; padding:8px 14px; border-radius:8px; } .btn:hover { text-decoration:none; filter:brightness(1.05); } .empty { color:var(--muted); font-style:italic; padding:8px 0; } .dot { width:9px; height:9px; border-radius:50%; background:#888; display:inline-block; } .dot.on { background:var(--ok); } .dot.err { background:var(--err); } footer { text-align:center; color:var(--footer); font-size:12px; padding:14px; }