/* shell.css — la cornice dell'app su schermo grande, nello stile approvato da Roberto (barra laterale petrolio scura, contenuto in un pannello bianco arrotondato). PERCHÉ IL LAVORO È TUTTO QUI DENTRO Tutte le pagine dell'app caricano già questo file. Riscrivendolo cambiano aspetto tutte insieme, senza toccare il loro contenuto. Le tre righe di @import qui sotto portano dentro anche i colori nuovi e il ponte con i nomi vecchi, così nemmeno di quelli devo aggiungere un collegamento pagina per pagina. COME È FATTA (da 900px in su) ┌──────────┬─────────────────────────────────┬───────────┐ │ │ ╭───────────────────────────╮ │ │ │ .tl-side │ │ .hdr / .topbar │ │ .wh-rail │ │ scura │ │ .body / .stage / .wrap │ │ colonna │ │ a tutta │ │ .footer │ │ destra │ │ altezza │ ╰── pannello bianco ────────╯ │ (se c'è) │ └──────────┴─────────────────────────────────┴───────────┘ IL PANNELLO BIANCO SENZA TOCCARE IL DOM Il pannello dovrebbe essere un contenitore che avvolge testata e contenuto. Ma 26 regole sparse nelle pagine si aspettano che .body sia figlio DIRETTO di .phone (per esempio `.phone > .body`): infilando un contenitore in mezzo si romperebbero. Quindi il pannello non è un elemento: è lo sfondo `.phone::after`, posizionato dove sta la colonna del contenuto. Effetto identico, DOM intatto, zero rischi. SOGLIE < 900px → telefono: non cambia nulla, resta l'app di sempre ≥ 900px → barra laterale scura + pannello ≥ 1240px → compare anche la colonna destra, se la pagina ne fornisce una */ @import url('ui.css'); @import url('ponte.css'); @import url('telaio.css'); :root{ --wh-side-w:248px; /* larghezza della barra laterale */ --wh-gap:16px; /* aria attorno al pannello */ --wh-rail-w:344px; /* misure tenute per compatibilità: alcune pagine le usano ancora */ --wh-r-sm:10px; --wh-r-md:14px; --wh-r-lg:20px; --wh-sh-sm:0 1px 2px rgba(4,36,42,.05); --wh-sh-md:0 4px 16px rgba(4,36,42,.07); --wh-sh-lg:0 12px 36px rgba(4,36,42,.11); } /* La barra laterale la costruisce shell.js, la colonna destra la singola pagina. Di base nascoste: senza questa riga la colonna destra comparirebbe sul telefono, appesa in fondo alla pagina. */ .wh-rail{ display:none; } /* la vecchia barra in alto non esiste più: nel disegno nuovo il titolo sta dentro il pannello. Se una pagina la creasse ancora, resta invisibile invece di raddoppiarsi. */ .wh-top{ display:none !important; } @media (min-width:900px){ body{ padding:0 !important; align-items:stretch !important; justify-content:stretch !important; background:var(--bg) !important; } /* La cornice-telefono smette di essere un mockup e diventa la piattaforma. L'aria attorno al pannello è il PADDING di questa griglia, non un margine dei figli: così la colonna del contenuto finisce esattamente dove finisce il pannello e la sua barra di scorrimento cade DENTRO il bianco. Con il padding sui figli, invece, la barretta di scorrimento restava appesa al bordo della finestra, fuori dal pannello. */ .phone{ width:100% !important; max-width:none !important; height:100vh !important; max-height:none !important; border-radius:0 !important; box-shadow:none !important; background:var(--bg) !important; display:grid !important; grid-template-columns:var(--wh-side-w) minmax(0,1fr); /* riga 1 = header fisso · riga 2 = testata della pagina · riga 3 = contenuto che scorre · riga 4 = piede */ grid-template-rows:auto auto minmax(0,1fr) auto; column-gap:var(--wh-gap); padding:var(--wh-gap) var(--wh-gap) var(--wh-gap) 0 !important; position:relative; } /* Il pannello: solo sfondo, nessun elemento nuovo (vedi nota in testa al file). Le coordinate sono riferite al riquadro interno al padding, quindi 0 = bordo del pannello già distanziato dalla finestra. z-index NEGATIVO, e non "0 più i figli a 1": lo sfondo del genitore si disegna per primo, poi i figli con z-index negativo, poi tutto il resto. Così il pannello sta sotto al contenuto senza che io debba toccare i figli. PRIMA AVEVO FATTO L'ERRORE OPPOSTO: `.phone > *{position:relative}` per alzare il contenuto. Ma quella regola rendeva relativi anche i pop-up e i messaggi a comparsa delle pagine (che si dichiarano `position:absolute`), e quelli finivano a occupare una riga della griglia spingendo tutto in basso. */ .phone::after{ content:''; position:absolute; z-index:-1; pointer-events:none; top:0; bottom:0; right:0; left:calc(var(--wh-side-w) + var(--wh-gap)); background:var(--surface); border-radius:26px; box-shadow:var(--sh-2); } /* i margini negativi annullano il padding della griglia solo per la barra laterale, che deve restare attaccata al bordo e alta tutto lo schermo */ .tl-side{ display:flex; grid-column:1; grid-row:1 / -1; margin:calc(-1 * var(--wh-gap)) 0; } /* ---------- dove va la roba della pagina ---------- Le righe sono dichiarate in modo ESPLICITO. Lasciandole indovinare, il risultato cambiava da pagina a pagina: alcune hanno .hdr, altre no, e le procedure guidate usano .topbar/.stage/.footer invece di .body. */ .phone > .tl-topbar{ grid-column:2; grid-row:1; } .phone > .hdr, .phone > .topbar { grid-column:2; grid-row:2; } .phone > .body, .phone > .stage, .phone > .wrap { grid-column:2; grid-row:3; min-height:0; overflow-y:auto; } .phone > .footer { grid-column:2; grid-row:4; } /* la barra in basso e la barretta di ui.js sono sostituite dalla laterale */ .phone > .nav, .phone > .wh-topbar{ display:none !important; } /* ---------- messaggi a comparsa e pop-up ---------- Le pagine li piazzano con `left:18px; right:18px` rispetto a .phone: sul telefono è tutta la larghezza dello schermo, ma da computer .phone è l'intera finestra e quindi finivano stesi anche sopra la barra laterale. Li riporto dentro il pannello. */ .phone > .btoast, .phone > .ctoast, .phone > .toast{ left:calc(var(--wh-side-w) + 48px) !important; right:48px !important; max-width:520px; } .phone > .pmodal, .phone > .amodal, .phone > .modal{ left:var(--wh-side-w) !important; } /* ---------- respiro dentro il pannello ---------- Il contenuto ora coincide col pannello, quindi qui serve solo l'aria interna. */ .phone > .body, .phone > .stage, .phone > .wrap{ padding:6px 34px 44px; background:transparent; } .phone > .hdr, .phone > .topbar{ padding:28px 34px 0; background:transparent; border:none; } .phone > .footer{ padding:0 34px 22px; background:transparent; border:none; } /* width:100% NON è ridondante: se la pagina rende .body un contenitore flex (lezione.html lo fa per tenere il video in cima sul telefono) i margini automatici hanno la precedenza sullo stiramento e i blocchi si restringono al contenuto, finendo centrati invece che allineati a sinistra. */ /* 1080px e non 940 come prima: adesso il contenuto sta DENTRO un pannello bianco, e una colonna da 940 lasciava 150px di bianco vuoto per lato. Le card hanno una loro struttura interna, quindi le righe di testo non diventano troppo lunghe. */ .phone > .body > *, .phone > .stage > *, .phone > .wrap > *{ width:100%; max-width:1080px; margin-left:auto; margin-right:auto; } /* 940px è la misura giusta per il testo, ma stringe i cataloghi a due colonne. Le pagine a griglia (corsi, risorse) chiedono più spazio con class="body larga". */ .phone > .body.larga > *{ max-width:1240px; } /* i