/* ========================================================================= WSLAM Maps v2 — shell mobile-first responsivo. Tutti i selettori dello shell usano classi proprie (wsv2-*) cosi' il CSS base (styles.css) NON intercetta lo shell; il sottoalbero Spaghi (.spaghetti-*) continua invece a ereditare styles.css verbatim. Le poche classi generate da app.js (.tab, .icon-btn, .locked, .active, .empty, #areaFilters button ...) sono ridefinite qui sotto. Palette: usa le stesse var() di styles.css (:root e [data-theme=light]). ========================================================================= */ :root { --wsv2-bar-h: 64px; --wsv2-top-h: 54px; --wsv2-sec-h: 46px; } html, body { height: 100%; margin: 0; overflow: hidden; } body.v2 { background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } body.v2 * { box-sizing: border-box; } body.v2 button, body.v2 input, body.v2 select { font: inherit; } body.v2 .hidden { display: none !important; } /* toast sopra la control bar, mai sotto i comandi */ body.v2 .toast { bottom: calc(var(--wsv2-bar-h) + env(safe-area-inset-bottom) + 16px); z-index: 40; } /* ---------- guscio ---------- */ .wsv2-app { /* FISSA al viewport: cosi' un annuncio iniettato nel flusso del (es. banner Auto Ads in cima) NON spinge giu' l'interfaccia, e alla chiusura dell'annuncio non resta lo spazio vuoto in basso. */ position: fixed; inset: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } /* ---------- topbar ---------- */ .wsv2-top { display: flex; align-items: center; gap: 10px; height: var(--wsv2-top-h); padding: 0 12px; padding-top: env(safe-area-inset-top); height: calc(var(--wsv2-top-h) + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); flex: 0 0 auto; z-index: 20; } .wsv2-brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; margin-right: auto; } .wsv2-brand-logo { width: 78px; max-height: 34px; object-fit: contain; flex: 0 0 auto; } .wsv2-brand-copy { min-width: 0; line-height: 1.1; } .wsv2-brand-copy strong { display: block; font-size: 14px; } .wsv2-brand-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wsv2-run-status { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: min(34vw, 290px); height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; } .wsv2-run-status[hidden] { display: none; } .wsv2-run-status > span:last-child { overflow: hidden; text-overflow: ellipsis; } .wsv2-run-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: #94a3b8; } .wsv2-run-status.is-running { border-color: color-mix(in srgb, #38bdf8 55%, var(--line)); color: var(--text); } .wsv2-run-status.is-running .wsv2-run-status-dot { background: #38bdf8; animation: wsv2-status-pulse 1.7s ease-in-out infinite; } .wsv2-run-status.is-complete .wsv2-run-status-dot { background: #22c55e; } .wsv2-run-status.is-failed { border-color: color-mix(in srgb, #ef4444 65%, var(--line)); color: var(--text); } .wsv2-run-status.is-failed .wsv2-run-status-dot { background: #ef4444; } @keyframes wsv2-status-pulse { 50% { opacity: .35; transform: scale(.78); } } .wsv2-top-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } @media (max-width: 720px) { .wsv2-brand-logo { width: 62px; } .wsv2-run-status { max-width: 125px; padding: 0 8px; } } /* search pill (override base .search) */ body.v2 .wsv2-search { display: grid; grid-template-columns: 36px 0fr; align-items: center; height: 38px; width: 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); overflow: hidden; transition: width .2s ease, grid-template-columns .2s ease, background .2s ease; } body.v2 .wsv2-search svg { width: 18px; height: 18px; fill: var(--muted); justify-self: center; } body.v2 .wsv2-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: inherit; padding: 0 8px 0 2px; outline: none; } body.v2 .wsv2-search:focus-within, body.v2 .wsv2-search.is-expanded { width: min(58vw, 260px); grid-template-columns: 36px 1fr; background: var(--surface); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } /* ---------- icon buttons (riusa estetica base, ridimensiona) ---------- */ body.v2 .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .05s ease; } body.v2 .icon-btn:hover { background: var(--surface-3); } body.v2 .icon-btn:active { transform: scale(.94); } body.v2 .icon-btn svg { width: 19px; height: 19px; fill: currentColor; } body.v2 .icon-btn.active { background: var(--accent); border-color: var(--accent); color: #04221c; } body.v2 .icon-btn.locked { opacity: .38; pointer-events: none; } body.v2 .text-btn { border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 600; } body.v2 .text-btn:hover { background: var(--surface-3); } /* ---------- sezioni (tabs) ---------- */ .wsv2-sections { flex: 0 0 auto; height: var(--wsv2-sec-h); border-bottom: 1px solid var(--line); background: var(--surface); display: flex; align-items: center; z-index: 19; } body.v2 .wsv2-sections .tabs { display: flex; gap: 6px; align-items: center; width: 100%; height: 100%; padding: 0 10px; overflow-x: auto; scrollbar-width: none; } body.v2 .wsv2-sections .tabs::-webkit-scrollbar { display: none; } body.v2 .wsv2-sections .tab { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; align-items: center; border: 1px solid transparent; border-radius: 999px; padding: 6px 14px; background: var(--surface-2); color: var(--muted); cursor: pointer; white-space: nowrap; } body.v2 .wsv2-sections .tab strong { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; } body.v2 .wsv2-sections .tab span { font-size: 10px; opacity: .8; } body.v2 .wsv2-sections .tab.active { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--text); } body.v2 .wsv2-sections .tab.active strong { color: var(--accent); } /* ---------- main / area di lavoro ---------- */ .wsv2-main { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; } /* ---------- viewer ---------- */ .wsv2-viewer { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; } body.v2 .wsv2-viewer .stage { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--surface) 60%, var(--bg)) 0%, var(--bg) 70%); touch-action: none; } body.v2 .wsv2-viewer .stage.is-multi { touch-action: auto; align-items: stretch; justify-items: stretch; overflow: auto; } body.v2 .wsv2-viewer .stage.is-zoomed { cursor: grab; } body.v2 .wsv2-viewer .stage.is-zoomed:active { cursor: grabbing; } body.v2 .map-canvas { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; } body.v2 .empty { position: absolute; inset: auto; place-self: center; color: var(--muted); font-weight: 600; padding: 14px 18px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); } /* caption flottante sopra la mappa */ .wsv2-cap { display: none; /* barra caption (badge+titolo+scadenza) nascosta: copriva la parte alta della mappa */ position: absolute; top: 10px; left: 10px; right: 10px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid var(--line); backdrop-filter: blur(6px); pointer-events: none; z-index: 4; } .wsv2-badge { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 12px; font-weight: 800; background: var(--accent); color: #04221c; } .wsv2-cap-text { min-width: 0; } .wsv2-cap-text h2 { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wsv2-cap-text p { margin: 1px 0 0; font-size: 11px; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* frecce flick (mobile) */ .wsv2-flick { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 56px; z-index: 5; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text); cursor: pointer; opacity: .55; transition: opacity .15s ease, background .15s ease; } .wsv2-flick:hover { opacity: 1; } .wsv2-flick svg { width: 24px; height: 24px; fill: currentColor; } .wsv2-flick-prev { left: 6px; } .wsv2-flick-next { right: 6px; } .wsv2-viewer .stage.is-multi ~ .wsv2-flick, .stage.is-multi .wsv2-flick { display: none; } /* carta singola (meteogrammi/sezioni: "1 carta"): nessuna scadenza da sfogliare -> via le frecce flick sopra l'immagine e il transport, che altrimenti su mobile sono l'unica cosa evidente sopra un grafico piccolo. */ .stage.wsv2-single-frame .wsv2-flick { display: none !important; } body.v2 .wsv2-main:has(.stage.wsv2-single-frame) .wsv2-transport { display: none; } /* caricamento frame: teniamo visibile la mappa precedente (niente lampo nero) e mostriamo uno spinner discreto in alto a destra finché il nuovo arriva. */ .stage.is-loading::after { content: ""; position: absolute; top: 12px; right: 12px; z-index: 6; width: 18px; height: 18px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--text) 28%, transparent); border-top-color: var(--accent); animation: wsv2-spin .7s linear infinite; pointer-events: none; } @keyframes wsv2-spin { to { transform: rotate(360deg); } } /* ---------- scorciatoie orarie WRF (solo desktop) ---------- */ /* Su mobile restano nascoste: si usano slider/frecce/swipe. */ .wsv2-quickhours { display: none; } @media (min-width: 821px) { .wsv2-quickhours { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 6px; align-items: stretch; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 5; max-height: calc(100% - 96px); overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(6px); } .wsv2-quickhours.hidden { display: none; } body.v2 .wsv2-quickhour { min-width: 40px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 12.5px; cursor: pointer; transition: background-color .14s var(--wsv2-ease, ease), border-color .14s var(--wsv2-ease, ease), color .14s var(--wsv2-ease, ease), transform .09s var(--wsv2-ease, ease); } body.v2 .wsv2-quickhour:hover { background: var(--surface-3); } body.v2 .wsv2-quickhour:active { transform: scale(.95); } body.v2 .wsv2-quickhour.active { background: var(--accent); border-color: var(--accent); color: #04221c; } } /* ---------- control bar inferiore ---------- */ .wsv2-controlbar { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: calc(var(--wsv2-bar-h) + env(safe-area-inset-bottom)); padding: 8px 10px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); z-index: 8; } body.v2 .stage.is-multi + .wsv2-controlbar .wsv2-timeline, body.v2 .stage.is-multi + .wsv2-controlbar .wsv2-transport { opacity: .4; } .wsv2-mapbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px 0 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); color: var(--text); font-weight: 700; cursor: pointer; } .wsv2-mapbtn svg { width: 20px; height: 20px; fill: var(--accent); } .wsv2-mapbtn:active { transform: scale(.96); } .wsv2-transport { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } body.v2 .wsv2-transport .icon-btn { width: 40px; height: 42px; } body.v2 .wsv2-play { width: 46px; height: 46px; border-radius: 999px; background: var(--accent); border-color: var(--accent); color: #04221c; } body.v2 .wsv2-play.active { background: var(--accent-strong); border-color: var(--accent-strong); } body.v2 .wsv2-play svg { width: 22px; height: 22px; } /* timeline grande */ .wsv2-timeline { flex: 1 1 auto; display: grid; grid-template-rows: auto auto; gap: 2px; min-width: 0; padding: 0 4px; } .wsv2-timeline #timeSliderLabel { order: -1; font-size: 12px; font-weight: 700; color: var(--accent); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.v2 .wsv2-timeline input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: pointer; } body.v2 .wsv2-timeline input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--wsv2-fill,0%), var(--surface-3) var(--wsv2-fill,0%)); } body.v2 .wsv2-timeline input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-3); } body.v2 .wsv2-timeline input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--accent); } body.v2 .wsv2-timeline input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: grab; } body.v2 .wsv2-timeline input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.35); } /* pulsante "altri strumenti" + popover extra */ .wsv2-morebtn { flex: 0 0 auto; } .wsv2-extra { display: contents; } .wsv2-extra-sep { display: none; } @media (max-width: 820px) { /* barra comandi in OVERLAY translucido: lo stage usa tutta l'altezza, i comandi occupano lo spazio morto sotto la mappa senza coprire la legenda */ .wsv2-controlbar { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); height: auto; padding: 7px 9px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(12px); box-shadow: 0 10px 34px rgba(0,0,0,.4); } /* prev/next ridondanti: le frecce flick sono gia' accanto alla mappa */ body.v2 .wsv2-transport #prevBtn, body.v2 .wsv2-transport #nextBtn { display: none; } .wsv2-transport { gap: 0; } .wsv2-extra { position: absolute; right: 8px; bottom: calc(100% + 8px); display: grid; grid-template-columns: repeat(3, 44px); gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 98%, var(--bg)); box-shadow: var(--shadow); opacity: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 12; } .wsv2-controlbar.show-extra .wsv2-extra { opacity: 1; transform: none; pointer-events: auto; } .wsv2-extra-sep { display: block; grid-column: 1 / -1; height: 1px; background: var(--line); margin: 2px 0; } body.v2 .wsv2-extra .icon-btn { width: 44px; height: 44px; } /* compare-step visibili solo in modalita' confronto */ body.v2 .compare-step { display: none; } body.v2 .wsv2-main:has(.stage.is-multi) .compare-step { display: inline-grid; } /* ----- Spaghi su mobile: grafico PRIMA, controlli sotto ----- */ /* la shell base e' height:100%;overflow:hidden (desktop): su mobile tagliava il contenuto sotto la piega -> "non scrolla". Altezza automatica cosi' l'host (.spaghetti-host overflow:auto) diventa lo scroller verticale. */ .wsv2-main.is-spaghetti-section .spaghetti-shell { height: auto; min-height: 100%; overflow: visible; } .wsv2-main.is-spaghetti-section .spaghetti-workspace { display: flex; flex-direction: column-reverse; gap: 14px; height: auto; overflow: visible; } .wsv2-main.is-spaghetti-section .spaghetti-controls { border: 1px solid var(--spag-line); border-radius: 14px; padding: 12px; } /* il grafico STA nella larghezza del telefono (NIENTE scroll orizzontale: intrappolava il gesto e bloccava lo scroll verticale). Le etichette degli assi sono diradate dal modulo (date X e tick Y responsive). Spezzo la catena flex del plot-area e forzo un'altezza per non farlo schiacciare: height !important batte lo style inline del modulo, che resizeCanvas() rilegge e ridisegna a piena altezza. */ .wsv2-main.is-spaghetti-section .spaghetti-plot-area { display: block; } .wsv2-main.is-spaghetti-section .spaghetti-canvas-wrap { height: 580px !important; flex: 0 0 auto; } /* top header piu' compatto su mobile: piu' spazio al grafico */ .wsv2-main.is-spaghetti-section .spaghetti-topbar { padding: 12px 14px 10px; } .wsv2-main.is-spaghetti-section .spaghetti-topbar h1 { font-size: 20px; line-height: 1.1; } .wsv2-main.is-spaghetti-section .spaghetti-topbar #runLine { font-size: 12px; margin-top: 2px; } .wsv2-main.is-spaghetti-section .spaghetti-plot-title { padding: 12px 14px 0; } .wsv2-main.is-spaghetti-section .spaghetti-plot-title h2 { font-size: 17px; } .wsv2-main.is-spaghetti-section .spaghetti-plot-title p { font-size: 12px; } /* ===== Spaghi col pattern delle MAPPE: grafico=stage, controlli in bottom-sheet aperto dalla barra in basso (stesso drawer di app.js) ===== */ .wsv2-main.is-spaghetti-section .wsv2-sheet { display: none; } /* via il picker mappe */ .wsv2-main.is-spaghetti-section .spaghetti-top-actions { display: none; } /* azioni -> barra in basso */ .wsv2-main.is-spaghetti-section .spaghetti-workspace { display: block; padding-bottom: 88px; /* spazio per la barra flottante */ } /* controlli = bottom-sheet a scomparsa (apre/chiude col drawer di app.js) */ .wsv2-main.is-spaghetti-section .spaghetti-controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 32; width: auto; max-width: none; max-height: 84dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; background: color-mix(in srgb, var(--surface) 99%, var(--bg)); box-shadow: 0 -20px 60px rgba(0, 0, 0, .55); padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); transform: translateY(101%); transition: transform .26s cubic-bezier(.32, .72, 0, 1); } .wsv2-main.is-spaghetti-section:not(.sidebar-collapsed) .spaghetti-controls { transform: translateY(0); } /* header dello sheet: grip + titolo + X chiara (come il picker mappe) */ .wsv2-main.is-spaghetti-section .wsv2-spaghi-head { display: block; position: sticky; top: 0; z-index: 3; margin: -12px -14px 10px; padding: 6px 14px 10px; background: color-mix(in srgb, var(--surface) 99%, var(--bg)); border-bottom: 1px solid var(--line); } .wsv2-main.is-spaghetti-section .wsv2-spaghi-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wsv2-main.is-spaghetti-section .wsv2-spaghi-headrow strong { font-size: 16px; font-weight: 700; color: var(--text); } .wsv2-main.is-spaghetti-section .spaghetti-controls-close { display: inline-grid; flex: 0 0 auto; width: 38px; height: 38px; } /* barra in basso flottante (come .wsv2-controlbar delle mappe) */ .wsv2-main.is-spaghetti-section .wsv2-spaghibar { display: flex; align-items: center; gap: 8px; position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 12; padding: 7px 9px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(12px); box-shadow: 0 10px 34px rgba(0, 0, 0, .42); } .wsv2-spaghibar .wsv2-mapbtn { margin-right: auto; } } /* su desktop il wrapper di scroll e' trasparente al layout (canvas-wrap resta figlio diretto del plot-area come da CSS base) */ .wsv2-chart-scroll { display: contents; } /* barra inferiore Spaghi: nascosta di default, mostrata solo nella sezione spaghi su mobile (vedi @media) — desktop usa la sidebar + topbar come prima */ .wsv2-spaghibar { display: none; } /* toggle pannello (comprimi nell'header + riapri nella topbar): solo desktop */ body.v2 .wsv2-sidebar-toggle, body.v2 .wsv2-sidebar-reopen { display: none; } .wsv2-spaghi-head { display: none; } /* header dello sheet: solo mobile spaghi */ /* ---------- sheet scelta mappa ---------- */ .wsv2-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; max-height: 82dvh; padding: 6px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 99%, var(--bg)); box-shadow: 0 -20px 60px rgba(0,0,0,.42); transform: translateY(101%); transition: transform .26s cubic-bezier(.32,.72,0,1); overscroll-behavior: contain; } .wsv2-main:not(.sidebar-collapsed) .wsv2-sheet { transform: translateY(0); } .wsv2-sheet-grip { width: 44px; height: 5px; border-radius: 999px; background: var(--surface-3); margin: 6px auto 8px; flex: 0 0 auto; } .wsv2-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: 0 0 auto; padding-bottom: 8px; } .wsv2-sheet-head strong { font-size: 16px; } .wsv2-sheet-close { width: 36px; height: 36px; } .wsv2-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 16px; } .wsv2-sheet-foot { flex: 0 0 auto; display: flex; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .wsv2-sheet-foot .text-btn { flex: 1; } .wsv2-choice { display: flex; flex-direction: column; gap: 8px; } .wsv2-choice-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* chip aree e categorie */ .wsv2-chips { display: flex; flex-wrap: wrap; gap: 8px; } body.v2 .wsv2-chips button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap; } body.v2 .wsv2-chips button:hover { background: var(--surface-3); } body.v2 .wsv2-chips button.active { background: color-mix(in srgb, var(--accent) 20%, var(--surface-2)); border-color: var(--accent); color: var(--text); } /* griglia tipi mappa (card) */ .wsv2-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } body.v2 .wsv2-type-grid button { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; min-height: 60px; } body.v2 .wsv2-type-grid button:hover { background: var(--surface-3); } body.v2 .wsv2-type-grid button strong { font-size: 13px; font-weight: 700; line-height: 1.2; } body.v2 .wsv2-type-grid button span { font-size: 10.5px; color: var(--muted); line-height: 1.2; } body.v2 .wsv2-type-grid button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); } body.v2 .empty-inline { grid-column: 1 / -1; color: var(--muted); padding: 14px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; } /* selettori provincia/localita' */ .wsv2-loc { display: grid; gap: 10px; } .wsv2-loc label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); } body.v2 .wsv2-loc select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font-weight: 600; } /* backdrop */ .wsv2-backdrop { position: absolute; inset: 0; z-index: 25; border: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .wsv2-main:not(.sidebar-collapsed) .wsv2-backdrop { opacity: 1; pointer-events: auto; } /* ---------- Spaghi: host occupa l'area, controlli ereditano styles.css ---------- */ .wsv2-main .spaghetti-host { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--bg); } /* ---- Spaghi UNIFORMI col guscio: ereditano il tema dell'app (scuro/chiaro) ---- il modulo legge i colori del grafico da queste variabili CSS su #spaghettiHost (cssColor() -> getComputedStyle(nativeHost)); rimappandole sui token dell'app, sia la chrome (header, controlli, legenda) sia il CANVAS si ridisegnano in tema. */ .wsv2-main .spaghetti-host { --spag-bg: var(--bg); --spag-panel: var(--surface); --spag-line: var(--line); --ink: var(--text); --spag-muted: var(--muted); --spag-accent: var(--accent); --spag-button-bg: var(--surface-2); --spag-button-soft: var(--surface-2); --spag-button-soft-line: var(--line); --spag-active-bg: var(--accent); --spag-active-ink: #04221c; --canvas-bg: var(--surface); --grid: color-mix(in srgb, var(--text) 13%, transparent); --grid-strong: color-mix(in srgb, var(--text) 30%, transparent); --halo: var(--surface); --mean: var(--text); --tooltip-bg: var(--surface-2); color-scheme: inherit; color: var(--text); } /* la "Confronta" attiva e gli stati premuti restano leggibili sul tema */ .wsv2-main .spaghetti-host .spaghetti-compare-btn[aria-pressed="true"], .wsv2-main .spaghetti-host .spaghetti-compare-btn.active { color: #04221c; } .wsv2-main.is-spaghetti-section .wsv2-viewer, .wsv2-main.is-spaghetti-section .wsv2-controlbar { display: none; } .wsv2-main:not(.is-spaghetti-section) .spaghetti-host { display: none; } /* EPS/climatologia usa il layout full-screen degli ensemble, senza i controlli mobili degli spaghi. */ .wsv2-main.is-eps-climate-section .eps-climate-host { display: block; } body.v2.is-eps-climate-section .wsv2-spaghibar, body.v2.is-eps-climate-section .wsv2-sidebar-reopen, body.v2.is-eps-climate-section #mobileMenuBtn { display: none !important; } /* ========================================================================= DESKTOP (>= 821px) — sidebar persistente, una sola interfaccia adattiva NB: 820px e' lo stesso breakpoint usato da app.js (isMobileDrawer()). ========================================================================= */ @media (min-width: 821px) { :root { --wsv2-top-h: 60px; } .wsv2-brand-logo { width: 92px; max-height: 40px; } .wsv2-brand-copy strong { font-size: 15px; } /* righe vincolate al viewport: la sidebar (lunga) scrolla internamente, senza gonfiare la riga e quindi lo stage/canvas. */ .wsv2-main { display: grid; grid-template-columns: 340px minmax(0,1fr); grid-template-rows: minmax(0,1fr); height: 100%; } .wsv2-sheet, .wsv2-viewer { min-height: 0; } /* sheet -> sidebar fissa */ .wsv2-sheet { position: relative; inset: auto; max-height: none; grid-column: 1; grid-row: 1; border-radius: 0; border-top: 0; border-right: 1px solid var(--line); box-shadow: none; transform: none !important; padding: 14px 14px 14px; } body.v2 .wsv2-backdrop { display: none; } .wsv2-viewer { position: relative; grid-column: 2; grid-row: 1; inset: auto; } /* sidebar comprimibile col toggle (app.js setta .sidebar-collapsed) */ .wsv2-main { transition: grid-template-columns .26s var(--wsv2-ease, ease); } .wsv2-main.sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr); } .wsv2-main.sidebar-collapsed .wsv2-sheet { display: none; } /* comprimi: nell'header del pannello (visibile solo quando il pannello e' aperto, perche' la sidebar si nasconde quando collapsed). Non in Spaghi. */ body.v2 .wsv2-sidebar-toggle { display: inline-grid; width: 34px; height: 34px; } body.v2.is-spaghetti-section .wsv2-sidebar-toggle { display: none; } /* riapri: nella topbar, SOLO quando il pannello e' compresso. Vale anche negli Spaghi (riapre la sidebar "Opzioni grafico"). */ body.v2.wsv2-sidebar-collapsed .wsv2-sidebar-reopen { display: inline-grid; } /* su desktop niente pill "Mappe", niente "altri" (extra inline), niente frecce overlay. NB: prefisso body.v2 per battere la specificita' di `body.v2 .icon-btn`. */ body.v2 .wsv2-mapbtn { display: none; } body.v2 .wsv2-morebtn { display: none; } body.v2 .wsv2-flick { display: none; } body.v2 .wsv2-sheet-close { display: none; } body.v2 .wsv2-sheet-grip { display: none; } .wsv2-extra { display: flex; align-items: center; gap: 8px; position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; background: transparent; border: 0; padding: 0; } .wsv2-extra-sep { display: block; width: 1px; height: 26px; background: var(--line); margin: 0 4px; } body.v2 .compare-step { display: inline-grid; } .wsv2-controlbar { gap: 10px; padding: 10px 14px; } .wsv2-timeline { max-width: 520px; } /* spaghi: la sezione ha i SUOI controlli interni (.spaghetti-controls). Il picker mappe (#filters) NON c'entra e va nascosto, altrimenti resta nella colonna 1 e copre i controlli spaghi (titolo grafico tagliato). */ .wsv2-main.is-spaghetti-section .wsv2-sheet { display: none; } .wsv2-main.is-spaghetti-section { grid-template-columns: minmax(0,1fr); } .wsv2-main.is-spaghetti-section .spaghetti-host { position: relative; grid-column: 1 / -1; grid-row: 1; } /* ===== Spaghi desktop: barra laterale e intestazione chiudibili ===== */ /* (1) Barra laterale "Opzioni grafico": si chiude/apre come la sidebar WRF. Riusa la stessa macchina di stato (.sidebar-collapsed) e lo stesso bottone di riapertura in alto (#wsv2SidebarReopen), qui riattivato negli spaghi. */ body.v2.wsv2-sidebar-collapsed.is-spaghetti-section .wsv2-sidebar-reopen { display: inline-grid; } .wsv2-main.is-spaghetti-section.sidebar-collapsed .spaghetti-workspace { grid-template-columns: minmax(0, 1fr); } .wsv2-main.is-spaghetti-section.sidebar-collapsed .spaghetti-controls { display: none; } /* intestazione desktop della sidebar spaghi: titolo + bottone di chiusura */ .wsv2-main.is-spaghetti-section .wsv2-spaghi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px -4px 10px; padding: 0 0 8px; border-bottom: 1px solid var(--spag-line, var(--line)); } .wsv2-main.is-spaghetti-section .wsv2-spaghi-head .wsv2-sheet-grip { display: none; } .wsv2-main.is-spaghetti-section .wsv2-spaghi-headrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .wsv2-main.is-spaghetti-section .wsv2-spaghi-headrow strong { font-size: 14px; font-weight: 700; } .wsv2-main.is-spaghetti-section .spaghetti-controls-close { display: inline-grid; width: 32px; height: 32px; } /* (2) Intestazione "Spaghi Ensemble": bottone sulla barra per chiuderla. Chiusa = barra nascosta, riapertura dal bottone contestuale nel grafico. */ .wsv2-main.is-spaghetti-section #spaghettiHost.spag-topbar-collapsed .spaghetti-topbar { display: none; } .spag-topbar-toggle { flex: 0 0 auto; } #spagTopbarReopen { display: none; } .wsv2-main.is-spaghetti-section #spaghettiHost.spag-topbar-collapsed #spagTopbarReopen { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; margin-right: 4px; border: 1px solid var(--spag-line, var(--line)); border-radius: 8px; background: var(--spag-button-bg, var(--surface-2)); color: var(--ink, var(--text)); font-weight: 700; font-size: 12.5px; cursor: pointer; } #spagTopbarReopen svg { width: 15px; height: 15px; fill: currentColor; } #spagTopbarReopen:hover { background: var(--spag-button-soft, var(--surface-3)); } } /* su mobile la barra laterale e' gia' un bottom-sheet col suo bottone e l'intestazione e' compatta: niente controlli desktop. */ @media (max-width: 820px) { .spag-topbar-toggle { display: none; } #spagTopbarReopen { display: none !important; } } @media (min-width: 1200px) { .wsv2-main { grid-template-columns: 380px minmax(0,1fr); } .wsv2-type-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } /* ========================================================================= ANIMAZIONI RIFINITE — micro-interazioni coese (con rispetto reduced-motion) ========================================================================= */ :root { --wsv2-ease: cubic-bezier(.4, 0, .2, 1); --wsv2-spring: cubic-bezier(.32, .72, 0, 1); } /* transizioni di tema fluide su superfici e testo */ .wsv2-top, .wsv2-sections, .wsv2-controlbar, .wsv2-sheet, .wsv2-spaghibar, body.v2 .icon-btn, .wsv2-mapbtn, body.v2 .text-btn { transition: background-color .28s var(--wsv2-ease), border-color .28s var(--wsv2-ease), color .28s var(--wsv2-ease); } /* tab: stato attivo morbido */ body.v2 .wsv2-sections .tab { transition: background-color .2s var(--wsv2-ease), border-color .2s var(--wsv2-ease), color .2s var(--wsv2-ease), transform .12s var(--wsv2-ease); } body.v2 .wsv2-sections .tab:active { transform: scale(.96); } /* chip aree/categorie e card tipo-mappa: hover/active/selezione fluidi */ body.v2 .wsv2-chips button { transition: background-color .18s var(--wsv2-ease), border-color .18s var(--wsv2-ease), color .18s var(--wsv2-ease), transform .1s var(--wsv2-ease); } body.v2 .wsv2-type-grid button { transition: background-color .18s var(--wsv2-ease), border-color .18s var(--wsv2-ease), box-shadow .18s var(--wsv2-ease), transform .1s var(--wsv2-ease); } body.v2 .wsv2-chips button:active, body.v2 .wsv2-type-grid button:active { transform: scale(.97); } /* pulsanti azione: feedback al tap piu' reattivo */ body.v2 .icon-btn { transition: background-color .15s var(--wsv2-ease), border-color .15s var(--wsv2-ease), color .15s var(--wsv2-ease), transform .09s var(--wsv2-ease); } .wsv2-mapbtn { transition: background-color .16s var(--wsv2-ease), border-color .16s var(--wsv2-ease), transform .09s var(--wsv2-ease); } .wsv2-mapbtn:active { transform: scale(.96); } /* play: piccolo "pop" all'avvio */ @keyframes wsv2-pop { 0% { transform: scale(.86); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } } body.v2 .wsv2-play.active svg { animation: wsv2-pop .22s var(--wsv2-ease); } /* caption mappa: dissolvenza dolce ai cambi */ .wsv2-cap { transition: opacity .22s var(--wsv2-ease); } /* easing piu' "spring" per gli sheet (gia' applicato, rinforzato qui) */ .wsv2-sheet, .wsv2-main.is-spaghetti-section .spaghetti-controls { transition: transform .3s var(--wsv2-spring); } .wsv2-backdrop { transition: opacity .26s var(--wsv2-ease); } .wsv2-extra { transition: opacity .18s var(--wsv2-ease), transform .18s var(--wsv2-spring); } /* comparsa morbida del canvas mappa al primo paint */ @keyframes wsv2-fade-in { from { opacity: 0; } to { opacity: 1; } } body.v2 .map-canvas { animation: wsv2-fade-in .25s var(--wsv2-ease); } /* rispetto delle preferenze di movimento ridotto */ @media (prefers-reduced-motion: reduce) { body.v2 *, body.v2 *::before, body.v2 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Pubblicità manuale contestuale: mai sovrapposta a mappe o controlli. */ .ws-wslam-ad { box-sizing: border-box; width: 100%; min-height: 284px; margin: 8px auto 0; padding: 14px 0 18px; overflow: hidden; border-top: 1px solid var(--line, rgba(148, 163, 184, .24)); text-align: center; contain: layout paint; } .ws-wslam-ad__label { display: block; margin-bottom: 8px; color: var(--muted, #64748b); font: 750 9px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; } .ws-wslam-ad .adsbygoogle { width: 300px; height: 250px; margin: 0 auto; } .ws-wslam-ad:has(.adsbygoogle[data-ad-status="unfilled"]) { display: none; } .ws-wslam-ad--ensemble, .ws-wslam-ad--eps { width: min(100%, 970px); margin-top: 16px; border: 1px solid var(--spag-line, var(--line, rgba(148, 163, 184, .24))); border-radius: var(--radius, 14px); background: var(--spag-panel, var(--surface-1, transparent)); } .ws-wslam-ad--eps { margin-bottom: 20px; } @media (max-width: 820px) { .ws-wslam-ad--sheet { flex: 0 0 auto; } .ws-wslam-ad--ensemble, .ws-wslam-ad--eps { width: calc(100% - 24px); margin-top: 12px; } } @media (max-width: 340px) { .ws-wslam-ad .adsbygoogle { width: 280px; } }