che avvolge il contenuto. Qui non si può, e * la ragione è istruttiva: le pagine non chiudono i propri contenitori. È * footer.php a emettere , e page/title_top.php contiene un in più * di quanti ne apra. Un involucro aperto dal menu non avrebbe nessuno che lo * chiude, e il primo spaiato lo chiuderebbe al posto sbagliato. * * Con la barra a posizione fissa e un padding sul non si apre nessun tag: * il guscio funziona su tutte le 292 pagine così come sono, senza modificarne * nemmeno una e senza dipendere da come chiudono il proprio HTML. * * .tl-main resta disponibile per le pagine convertite, che il proprio markup lo * chiudono davvero. */ /* box-sizing dichiarato invece che dato per scontato. * * Sulle 292 pagine esistenti lo imposta già Bootstrap con `* { }`, quindi qui è * un doppione innocuo. Ma un componente deve funzionare anche dove Bootstrap non * c'è — la pagina demo, e domani una pagina convertita che non lo carica più. * Senza questa riga larghezza al 100% più padding fa sforare il contenitore, e * la pagina scorre in orizzontale. */ .tl-shell, .tl-shell *, .tl-shell *::before, .tl-shell *::after { box-sizing: border-box; } .tl-shell { margin: 0; min-height: 100vh; padding-inline-start: var(--tl-sidebar-width); background: var(--tl-surface-sunken); color: var(--tl-text); font-family: var(--tl-font-sans); font-size: var(--tl-text-base); line-height: var(--tl-leading-normal); -webkit-font-smoothing: antialiased; transition: padding var(--tl-duration) var(--tl-ease); } /* ── La barra laterale ──────────────────────────────────────────────────── */ .tl-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--tl-z-sidebar); width: var(--tl-sidebar-width); display: flex; flex-direction: column; background: var(--tl-nav-bg); color: var(--tl-nav-text); border-inline-end: 1px solid var(--tl-nav-border); transition: width var(--tl-duration) var(--tl-ease), transform var(--tl-duration) var(--tl-ease); overscroll-behavior: contain; } /* Intestazione: stemma dell'ente, nome del comune, anno di esercizio. * Sono le tre informazioni che dicono su quali dati si sta lavorando, ed è * giusto che stiano sempre sotto agli occhi invece che in fondo a una barra. */ .tl-sidebar__head { display: flex; align-items: center; gap: var(--tl-space-3); padding: var(--tl-space-4) var(--tl-space-3); border-block-end: 1px solid var(--tl-nav-border); min-height: var(--tl-topbar-height); } .tl-sidebar__blazon { flex: 0 0 auto; width: 32px; height: 40px; object-fit: contain; } .tl-sidebar__ident { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .tl-sidebar__city { font-size: var(--tl-text-sm); font-weight: var(--tl-weight-semibold); color: var(--tl-nav-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-sidebar__meta { font-size: var(--tl-text-xs); color: var(--tl-nav-text); opacity: 0.8; white-space: nowrap; } /* Il corpo scorre, l'intestazione e il piede restano fermi. */ .tl-sidebar__nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: var(--tl-space-2) 0; scrollbar-width: thin; scrollbar-color: var(--tl-teal-600) transparent; } .tl-sidebar__foot { flex: 0 0 auto; padding: var(--tl-space-2); border-block-start: 1px solid var(--tl-nav-border); display: flex; align-items: center; gap: var(--tl-space-2); } /* ── Gruppi del menu (primo livello: TitleMenu) ────────────────────────────── * Sono

: la fisarmonica funziona senza una riga di * JavaScript, è navigabile da tastiera e la sa leggere un lettore di schermo. * Il menu attuale ottiene lo stesso effetto con checkbox nascoste e label, che * per la tastiera e per lo screen reader non è la stessa cosa. */ .tl-nav-group { border: 0; } .tl-nav-group__label { display: flex; align-items: center; gap: var(--tl-space-2); width: 100%; padding: var(--tl-space-2) var(--tl-space-3); min-height: var(--tl-target-comfort); font-size: var(--tl-text-sm); font-weight: var(--tl-weight-semibold); color: var(--tl-nav-text-strong); cursor: pointer; user-select: none; list-style: none; transition: background var(--tl-duration-fast) var(--tl-ease); } /* Toglie il triangolino predefinito: ne disegniamo uno nostro che ruota. */ .tl-nav-group__label::-webkit-details-marker { display: none; } .tl-nav-group__label::marker { content: ""; } .tl-nav-group__label:hover { background: var(--tl-nav-bg-hover); } .tl-nav-group__label:focus-visible { outline: var(--tl-focus-ring); outline-offset: calc(var(--tl-focus-offset) * -1); } .tl-nav-group__icon { flex: 0 0 auto; width: 16px; text-align: center; opacity: 0.9; } .tl-nav-group__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-nav-group__chevron { flex: 0 0 auto; width: 8px; height: 8px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(-45deg); opacity: 0.6; transition: transform var(--tl-duration) var(--tl-ease); } .tl-nav-group[open] > .tl-nav-group__label .tl-nav-group__chevron { transform: rotate(45deg); } /* ── Voci del menu (secondo livello: TitleSubMenu) ───────────────────────── */ .tl-nav-list { margin: 0; padding: 0 0 var(--tl-space-2) 0; list-style: none; } .tl-nav-link { display: flex; align-items: center; gap: var(--tl-space-2); padding: var(--tl-space-2) var(--tl-space-3) var(--tl-space-2) var(--tl-space-6); min-height: var(--tl-target-min); font-size: var(--tl-text-sm); color: var(--tl-nav-text); text-decoration: none; border-inline-start: 3px solid transparent; transition: background var(--tl-duration-fast) var(--tl-ease), color var(--tl-duration-fast) var(--tl-ease); } .tl-nav-link:hover { background: var(--tl-nav-bg-hover); color: var(--tl-nav-text-strong); text-decoration: none; } .tl-nav-link:focus-visible { outline: var(--tl-focus-ring); outline-offset: calc(var(--tl-focus-offset) * -1); } /* La pagina in cui ci si trova. Oggi non è segnalata in nessun modo: si capisce * dove si è solo leggendo il titolo. */ .tl-nav-link.is-current { background: var(--tl-nav-bg-active); color: var(--tl-nav-text-strong); font-weight: var(--tl-weight-medium); border-inline-start-color: var(--tl-white); } .tl-nav-link__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Barra ridotta a sole icone ──────────────────────────────────────────── */ .tl-shell.is-sidebar-collapsed { padding-inline-start: var(--tl-sidebar-width-collapsed); } .tl-shell.is-sidebar-collapsed .tl-sidebar { width: var(--tl-sidebar-width-collapsed); } .tl-shell.is-sidebar-collapsed .tl-sidebar__ident, .tl-shell.is-sidebar-collapsed .tl-nav-group__text, .tl-shell.is-sidebar-collapsed .tl-nav-group__chevron, .tl-shell.is-sidebar-collapsed .tl-nav-list, .tl-shell.is-sidebar-collapsed .tl-sidebar__label { display: none; } .tl-shell.is-sidebar-collapsed .tl-nav-group__label { justify-content: center; padding-inline: 0; } .tl-shell.is-sidebar-collapsed .tl-sidebar__head { justify-content: center; padding-inline: 0; } /* ── Il contenuto ───────────────────────────────────────────────────────── */ /* Involucro del contenuto, per le pagine convertite. Non serve al guscio: lo * spazio per la barra lo fa già il padding su .tl-shell. */ .tl-main { min-height: 100vh; display: flex; flex-direction: column; } .tl-topbar { position: sticky; top: 0; z-index: var(--tl-z-sticky); display: flex; align-items: center; gap: var(--tl-space-3); min-height: var(--tl-topbar-height); padding: var(--tl-space-2) var(--tl-space-4); background: var(--tl-surface); border-block-end: 1px solid var(--tl-border); } .tl-topbar__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--tl-text-lg); font-weight: var(--tl-weight-semibold); color: var(--tl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Briciole di pane: dicono da dove si è arrivati. Oggi il titolo di pagina è * "Menu / Sottomenu" dentro un unico , che non è navigabile. */ .tl-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tl-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--tl-text-xs); color: var(--tl-text-muted); } .tl-breadcrumb li { display: flex; align-items: center; gap: var(--tl-space-1); } .tl-breadcrumb li + li::before { content: "›"; opacity: 0.5; } .tl-breadcrumb a { color: inherit; text-decoration: none; } .tl-breadcrumb a:hover { color: var(--tl-text-link); text-decoration: underline; } .tl-content { flex: 1 1 auto; padding: var(--tl-space-4); max-width: var(--tl-content-max); width: 100%; } /* ── Il pulsante che apre e chiude la barra ──────────────────────────────── */ .tl-sidebar-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: var(--tl-target-comfort); height: var(--tl-target-comfort); padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--tl-radius); color: var(--tl-text-muted); cursor: pointer; } .tl-sidebar-toggle:hover { background: var(--tl-surface-muted); color: var(--tl-text); } .tl-sidebar-toggle:focus-visible { outline: var(--tl-focus-ring); outline-offset: var(--tl-focus-offset); } /* Le tre lineette, disegnate senza dipendere da un font di icone: i tre set di * icone del progetto non sono tutti presenti su tutte le pagine. */ .tl-sidebar-toggle__bars, .tl-sidebar-toggle__bars::before, .tl-sidebar-toggle__bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; } .tl-sidebar-toggle__bars { position: relative; } .tl-sidebar-toggle__bars::before { content: ""; position: absolute; top: -5px; } .tl-sidebar-toggle__bars::after { content: ""; position: absolute; top: 5px; } /* ── Su schermo stretto la barra diventa un pannello che scorre da sinistra ── */ .tl-sidebar-scrim { position: fixed; inset: 0; z-index: calc(var(--tl-z-sidebar) - 1); background: rgb(13 16 19 / 0.45); opacity: 0; pointer-events: none; transition: opacity var(--tl-duration) var(--tl-ease); } @media (max-width: 900px) { .tl-shell { padding-inline-start: 0; } .tl-sidebar { transform: translateX(-100%); box-shadow: var(--tl-shadow-lg); } .tl-shell.is-sidebar-open .tl-sidebar { transform: translateX(0); } .tl-shell.is-sidebar-open .tl-sidebar-scrim { opacity: 1; pointer-events: auto; } /* Sotto i 900px "ridotta a icone" non ha senso: o c'è o non c'è. */ .tl-shell.is-sidebar-collapsed { padding-inline-start: 0; } .tl-shell.is-sidebar-collapsed .tl-sidebar { width: var(--tl-sidebar-width); } .tl-shell.is-sidebar-collapsed .tl-sidebar__ident, .tl-shell.is-sidebar-collapsed .tl-nav-group__text, .tl-shell.is-sidebar-collapsed .tl-nav-group__chevron, .tl-shell.is-sidebar-collapsed .tl-nav-list { display: revert; } .tl-content { padding: var(--tl-space-3); } } /* Chi stampa non vuole la barra di navigazione sul foglio. */ @media print { .tl-sidebar, .tl-sidebar-scrim, .tl-topbar, .tl-actions, .tl-filters { display: none !important; } .tl-main { margin: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ * 2 · PULSANTI * ═══════════════════════════════════════════════════════════════════════════ * Serve prima degli altri componenti perché filtri, azioni e messaggi lo usano. * Va su