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-nav-scrollbar) 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); } /* ── Sottogruppi annidati ────────────────────────────────────────────────── Un contenitore del menu è un

dentro un

dell'elenco: si annida da solo, ma senza rientranza si presenta allineato al gruppo di primo livello e chi legge non capisce che sta un gradino più in basso. L'etichetta si allinea alle voci sorelle (`--tl-space-6`, la stessa di `.tl-nav-link`), e l'elenco dei figli rientra di un passo in più. La rientranza si accumula da sé a ogni livello, perché gli elenchi sono annidati l'uno dentro l'altro: vale a qualunque profondità senza cablarla. */ .tl-nav-group--annidato > .tl-nav-group__label { padding-inline-start: var(--tl-space-6); } .tl-nav-group--annidato .tl-nav-list { padding-block-end: 0; padding-inline-start: var(--tl-space-3); } /* ── 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; } /* «Pag. n\tot» della procedura, in alto a destra (task C8). * * Il documento di specifica lo chiede su ogni pagina dedicata a una procedura, * e dice che «la situazione più comune sarà Pag. 1\1». Cioè: comparirà quasi * sempre, e quasi sempre dirà la stessa cosa. Da qui il tono — è un riferimento * che si consulta quando serve, non un'informazione che deve chiamare * l'attenzione ogni volta che si apre una pagina. * * Cifre tabellari perché il numero cambia sotto i piedi quando si passa da una * scheda all'altra: senza, «Pag. 1\11» e «Pag. 2\11» hanno larghezze diverse e * l'etichetta balla. * * ⚠ Serve anche alle pagine legacy, che non hanno la `.tl-topbar`: lì sta nella * riga del titolo con un `float:right` in linea (vedi `inc/page/title_top.php`). * Quindi qui niente `position` e niente margini che presuppongano il flex. */ .tl-pagina { flex: 0 0 auto; white-space: nowrap; font-size: var(--tl-text-sm); font-variant-numeric: tabular-nums; color: var(--tl-text-muted); } /* ── L'avanzamento delle elaborazioni lunghe ───────────── .tl-avanzamento * * Il documento di specifica chiede, per importazioni, estrazioni, elaborazioni * e stampe lunghe, «prima il numero totale delle registrazioni e poi la * progressione» (task C7). Qui c'è solo il vestito: i due numeri li mette * `ui/tl.js`, che li chiede a `ajax/avanzamento.php`. * * Compare sotto al modulo che ha lanciato l'elaborazione, e solo dopo che è * stata lanciata: `hidden` finché non serve. Non è una finestra modale — chi ha * appena lanciato un'elaborazione da novanta secondi deve poter continuare a * guardare i parametri con cui l'ha lanciata. * * ⚠ La barra «indefinita» non è un ornamento: copre la PRIMA fase, quella in * cui si stanno contando le registrazioni e un totale ancora non c'è. Senza, * quei secondi mostrerebbero una barra ferma a zero, che si legge come «non sta * succedendo niente». */ .tl-avanzamento { margin-block-start: var(--tl-space-3); padding: var(--tl-space-3) var(--tl-space-4); background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); } .tl-avanzamento__testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tl-space-3); margin-block-end: var(--tl-space-2); } .tl-avanzamento__fase { font-size: var(--tl-text-sm); font-weight: var(--tl-weight-medium); color: var(--tl-text); } .tl-avanzamento__conto { font-size: var(--tl-text-sm); font-variant-numeric: tabular-nums; color: var(--tl-text-muted); } .tl-avanzamento__pista { overflow: hidden; height: 8px; background: var(--tl-surface-muted); border-radius: var(--tl-radius-full); } .tl-avanzamento__barra { width: 0; height: 100%; background: var(--tl-accent); border-radius: var(--tl-radius-full); transition: width 150ms linear; } /* La fase del conteggio: non si sa ancora quanto manchi, e lo si dice. */ .tl-avanzamento__barra--indefinita { width: 35%; animation: tl-avanzamento-scorre 1.2s ease-in-out infinite; } @keyframes tl-avanzamento-scorre { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } /* Chi ha chiesto di non vedere animazioni non deve vedere nemmeno questa: la * barra resta ferma a un terzo, che è comunque diverso da «zero». */ @media (prefers-reduced-motion: reduce) { .tl-avanzamento__barra--indefinita { animation: none; } } .tl-avanzamento--errore { border-color: var(--tl-danger); } .tl-avanzamento--errore .tl-avanzamento__fase { color: var(--tl-danger-text); } .tl-avanzamento--errore .tl-avanzamento__barra { background: var(--tl-danger); } /* ── La barra dei comandi, in fondo e sempre in vista ───────────────────── * * Il gemello in basso di `.tl-topbar`: stesso meccanismo, stesso `z-index`, * bordo dalla parte opposta. Serve alle schede lunghe — quella del verbale ha * tredici sezioni — dove i comandi in coda si raggiungono solo scorrendo fino * in fondo, e chi arriva dall'elenco non sa nemmeno che ci sono. * * `sticky` e non `fixed`, che pure darebbe lo stesso effetto a schermo, per tre * ragioni concrete in questo impianto: * * · `fixed` si àncora alla finestra, non al contenuto: andrebbe scostato a * mano di `--tl-sidebar-width` e ri-scostato quando la barra laterale si * richiude (`.tl-shell.is-sidebar-collapsed`), cioè due regole in più che * rincorrono un valore che il flusso normale conosce già. * · `.tl-content` è `flex: 1 1 auto` dentro un `.tl-main` alto `100vh`: * il blocco contenitore arriva comunque in fondo allo schermo, quindi anche * a pagina corta la barra si appoggia al bordo inferiore. L'effetto voluto * c'è, senza uscire dal flusso. * · un elemento `fixed` copre l'ultima riga del contenuto e va compensato con * un `padding-block-end` sul contenitore, che è la classica misura che poi * nessuno aggiorna quando la barra cambia altezza. * * I margini negativi in linea annullano il `padding` di `.tl-content` * (`--tl-space-4`): la barra arriva ai bordi della colonna come fa la fascia in * alto, invece di galleggiare rientrata. */ .tl-barra-comandi { position: sticky; inset-block-end: 0; z-index: var(--tl-z-sticky); display: flex; align-items: center; gap: var(--tl-space-3); flex-wrap: wrap; margin-block-start: var(--tl-space-5); margin-inline: calc(var(--tl-space-4) * -1); margin-block-end: calc(var(--tl-space-4) * -1); padding: var(--tl-space-3) var(--tl-space-4); background: var(--tl-surface); border-block-start: 1px solid var(--tl-border); box-shadow: var(--tl-shadow-barra-comandi); } /* Su schermo stretto lo spaziatore va tolto, non ridotto: con lui i comandi vanno a capo **tenendo il vuoto in mezzo**, e restano staccati come se appartenessero a due gruppi diversi. Senza, si dispongono di fila e vanno a capo dove serve. (Misurato a 390px: il secondo comando passa da x241 a x167, accanto al primo; le righe restano due, perché tre comandi su 390px non ci stanno comunque — quello che cambia è che non c'è più il buco.) */ @media (max-width: 700px) { .tl-barra-comandi .tl-spacer { display: none; } } /* ── La ricerca dentro il selettore dell'ente ───────────────────────────── * * Il campo non sta nel markup: lo inserisce tl.js. La fascia è disegnata in * DUE file — ui/menu_side.php per le pagine legacy e * partials/tl-cornice-topbar.blade.php per Blade e Filament — e scriverlo a * mano vorrebbe dire ripeterlo in tutti e due e tenerli allineati. Qui resta * il solo aspetto. * * `sticky` è il motivo per cui queste regole esistono invece di due stili in * linea messi da JavaScript: il pannello dell'ente scorre — ha `max-height` e * `overflow-y` — e un campo dentro un contenitore che scorre se ne andrebbe * fuori vista alla prima rotella, cioè proprio mentre si guarda l'elenco che * si sta filtrando. */ .tl-picker-search { position: sticky; inset-block-start: 0; z-index: 1; padding: var(--tl-space-2); background: var(--tl-surface); border-block-end: 1px solid var(--tl-border); } .tl-picker-search .tl-field__control { width: 100%; } /* ── Il campo che propone mentre si scrive ─────────────────────────────────── * * Sostituisce `.tl-select-search`, che era una casella di filtro sopra a una * tendina: si scriveva, e poi bisognava comunque aprire la tendina. Qui le * proposte compaiono sotto al campo ({@see initSelectRicerca} in tl.js). * * `position: relative` sul contenitore e `absolute` sull'elenco: così l'elenco * **esce dal flusso** e si sovrappone a ciò che ha sotto invece di spingerlo in * giù. Su `select_customer.php` sotto c'è «Scegliere gestione», e un elenco che * spinge farebbe saltare le righe a ogni lettera digitata. */ .tl-combo { position: relative; } .tl-combo__campo { width: 100%; height: auto; font-size: inherit; } .tl-combo__elenco { position: absolute; inset-inline: 0; top: calc(100% + 2px); z-index: var(--tl-z-dropdown); margin: 0; padding: var(--tl-space-1); list-style: none; max-height: 320px; overflow-y: auto; background: var(--tl-surface-raised); border-radius: var(--tl-radius); box-shadow: 0 0 0 1px var(--tl-border), var(--tl-shadow-lg); } .tl-combo__voce { display: flex; align-items: center; justify-content: space-between; gap: var(--tl-space-3); padding: var(--tl-space-2) var(--tl-space-3); min-height: var(--tl-target-comfort); border-radius: var(--tl-radius-sm); font-size: var(--tl-text-base); line-height: var(--tl-leading-tight); color: var(--tl-text); cursor: pointer; } /* Una classe sola per «col puntatore sopra» e «raggiunta con le frecce»: sono * la stessa cosa per chi guarda, e tenerle distinte porta a scoprire un giorno * che con la tastiera non si vede dove si è. */ .tl-combo__voce:hover, .tl-combo__voce.is-attiva { background: var(--tl-accent-subtle); color: var(--tl-accent-text); } .tl-combo__nome { overflow-wrap: anywhere; } .tl-combo__codice { flex: 0 0 auto; font-family: var(--tl-font-mono); font-size: var(--tl-text-xs); color: var(--tl-text-subtle); } .tl-combo__vuoto { padding: var(--tl-space-2) var(--tl-space-3); font-size: var(--tl-text-sm); color: var(--tl-text-muted); } /* ── Una fa così, e questo deve passare per una. */ .tl-select-picker__toggle:hover { border-color: var(--tl-border-strong); } .tl-select-picker__toggle:focus-visible { outline: var(--tl-focus-ring); outline-offset: var(--tl-focus-offset); } /* Finché non si è scelto il pulsante porta il segnaposto, e deve dire di non essere una scelta — come il grigio del `placeholder` di un campo. */ .tl-select-picker__toggle.is-empty { color: var(--tl-text-muted); } /* La punta a destra: la tendina nativa ne aveva una, e senza, il pulsante non dichiara di potersi aprire. Disegnata coi bordi e misurata in `em`, così cresce col testo invece di restare un francobollo su un controllo enorme. */ .tl-select-picker__toggle::after { content: ''; flex: none; width: .4em; height: .4em; margin-inline-start: var(--tl-space-2); /* Nera, e non «del colore del testo»: quando non si è ancora scelto il testo è il grigio del segnaposto, e la freccia sbiadirebbe con lui. Una ` il pulsante è più basso, * col bordo più tenue e il testo di un'altra misura. Qui si allinea al * controllo vero, dichiarando gli stessi cinque valori di * `.tl-field__control` — compresi il passaggio del mouse e l'aspetto ad * aperto, che imita quello al fuoco di una tendina. * * ⚠ **`border-radius: 8px` NON è ridondante: togliendolo l'aspetto cambia.** * Sembra ripetere la regola base di `.tl-select-picker__toggle`, che * dichiara `--tl-radius` — cioè proprio 8px — ma non è quella a vincere. * `reskin.css:346` mette questo pulsante nello stesso gruppo che veste i * campi **legacy** (`.form-control`, gli `input` di `.BoxRowCaption`) e gli * dà `--tl-radius-sm`, 4px; quel selettore comincia per `body`, quindi è più * specifico della regola base e la scavalca. Provato il 10 settembre 2026 * togliendo la riga: gli angoli diventano più spigolosi, non uguali. * * È anche il motivo per cui qui si ridichiarano altezza minima, imbottitura * e dimensione del testo: in `reskin.css` valgono 28px e misure da campo * legacy, che sono giuste in mezzo a campi legacy e sbagliate accanto a tre * `.tl-field__control`. * * Angoli **più** tondi dei campi sono stati provati a video lo stesso giorno — * 12px, poi 10, poi 9 — e ogni volta risultavano troppi: il pulsante deve * passare per una tendina, non distinguersi da quelle accanto. */ .tl-filters--picker-come-campo .tl-select-picker__toggle { min-height: var(--tl-control-height); padding: 0 var(--tl-control-padding-x); border-color: var(--tl-border-strong); border-radius: 8px; font-size: var(--tl-text-base); line-height: var(--tl-leading-normal); } .tl-filters--picker-come-campo .tl-select-picker__toggle:hover { border-color: var(--tl-gray-400); } .tl-filters--picker-come-campo .tl-select-picker[open] > .tl-select-picker__toggle { border-color: var(--tl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 18%, transparent); } /* Lo stesso, per un selettore che sta in una SCHEDA invece che in una barra di * filtri: la scheda anagrafica di «Gestione utenti», dove l'ente è un campo in * mezzo agli altri dentro una `.tl-card`. Il motivo per cui serve è identico — * `reskin.css:346` veste il pulsante come un campo legacy, e accanto a campi * nuovi risulta più basso e col bordo più tenue. * * ⚠ **Le sei dichiarazioni sono duplicate da `.tl-filters--picker-come-campo` * qui sopra, di proposito.** La scelta, presa il 10 settembre 2026, è stata * di non toccare la regola già in uso: allargarne il selettore sarebbe stato * più asciutto, ma è una modifica a codice che funziona, e la prudenza è * stata preferita. * * Il prezzo va saputo: **chi cambia un valore deve cambiarlo in due posti.** * Se le due regole divergono, lo stesso pulsante avrà due aspetti diversi * nella stessa pagina — nei filtri e nella scheda — e niente lo segnalerà. * Il giorno in cui servisse un terzo contesto, conviene fermarsi e unire i * selettori invece di aggiungere una terza copia. * * Sul `border-radius: 8px` che sembra ridondante vale la nota del blocco * qui sopra: non lo è, lo scavalca `reskin.css`. */ .tl-picker-in-scheda .tl-select-picker__toggle { min-height: var(--tl-control-height); padding: 0 var(--tl-control-padding-x); border-color: var(--tl-border-strong); border-radius: 8px; font-size: var(--tl-text-base); line-height: var(--tl-leading-normal); } .tl-picker-in-scheda .tl-select-picker__toggle:hover { border-color: var(--tl-gray-400); } .tl-picker-in-scheda .tl-select-picker[open] > .tl-select-picker__toggle { border-color: var(--tl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 18%, transparent); } /* Attesa. Rispetta prefers-reduced-motion tramite il token di durata. */ .tl-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; border-radius: 50%; animation: tl-spin 700ms linear infinite; } @keyframes tl-spin { to { transform: rotate(360deg); } } /* Solo per i lettori di schermo. Serve alle etichette delle azioni di riga e * alla parola "obbligatorio" accanto all'asterisco. */ .tl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Salta al contenuto: compare solo con la tastiera. Primo elemento del , * è il criterio WCAG 2.4.1 e oggi non c'è. */ .tl-skip-link { position: absolute; inset-block-start: -100%; inset-inline-start: var(--tl-space-2); z-index: var(--tl-z-toast); padding: var(--tl-space-2) var(--tl-space-4); background: var(--tl-accent); color: var(--tl-on-accent); border-radius: 0 0 var(--tl-radius) var(--tl-radius); text-decoration: none; } /* ⚠ Il colore va ripetuto qui, e non è una ridondanza. * * `.tl-skip-link` dichiara `color: var(--tl-on-accent)` con specificità (0,1,0). * Il reskin ha `body a:hover, body a:focus { color: var(--tl-text-link-hover) }`, * che è (0,1,2) — quindi **vince**. Risultato: mettendo il fuoco sul * collegamento di salto il testo diventava blu scuro sul fondo grigio scuro * dell'accento, **1,13:1**, cioè invisibile. Su 46 pagine. * * Il collegamento di salto esiste per chi naviga da tastiera, e si vede **solo** * quando ha il fuoco: era rotto esattamente nell'unico stato in cui esiste. * Trovato da `verifica-ui/hover.mjs` il 9 settembre 2026 — è il primo difetto * vero che quello strumento ha pescato da solo. * * `.tl-skip-link:focus` è (0,2,0) e batte `body a:focus`. */ .tl-skip-link:hover, .tl-skip-link:focus { color: var(--tl-on-accent); } .tl-skip-link:focus { inset-block-start: 0; } /* ═══════════════════════════════════════════════════════════════════════════ * 10 · SCHEDE .tl-tabs * ═══════════════════════════════════════════════════════════════════════════ * * Una pagina lunga divisa in schede, con i pannelli sempre nel documento. * * ── Perché serviva un componente e non l'ennesima copia ───────────────────── * Fino all'8 settembre 2026 nel progetto convivevano TRE modi di fare la stessa * cosa: `data-toggle="tab"` di Bootstrap (che vive di jQuery, e quale jQuery * arrivi dipende dalla pagina), la navigazione lato server `?tab=N` dei * Parametri (una richiesta al server per cambiare scheda, e i dati non ancora * salvati se ne vanno), e le classi locali `ver-schede` della statistica dei * verbali. Nessuno dei tre è riusabile e tutti e tre si comportano diversamente * con la tastiera. * * ── I pannelli restano nel documento ──────────────────────────────────────── * Si nascondono con l'attributo `hidden`, non si tolgono. È la differenza che * conta su una pagina di modifica: i campi di una scheda non guardata **vengono * comunque inviati** col modulo, quindi un salvataggio scrive tutto e non solo * quello che si stava guardando. Ed è anche la ragione per cui il pulsante * «Salva» può stare nella barra delle schede e non dentro un pannello. * * ── Marcatura ─────────────────────────────────────────────────────────────── *

* *

…

facoltativa *

…

* * `aria-selected`, `tabindex` e `hidden` li scrive tl.js: la pagina non deve * dire quale scheda è attiva, e senza JavaScript si vedono tutti i pannelli — * che è il verso giusto in cui rompersi. * * `.tl-tabs__panel` non ha regole qui e non è una dimenticanza: un pannello è * un pezzo di pagina come un altro, e a nasconderlo basta `hidden`. La classe * serve a tl.js per ritrovare il pannello di un campo non valido. */ .tl-tabs { display: flex; align-items: flex-end; gap: var(--tl-space-3); margin-block-end: var(--tl-space-4); border-block-end: 1px solid var(--tl-border); } /* Le schede scorrono in orizzontale quando non ci stanno, invece di andare a * capo: una fila di schede su due righe non si legge più come una fila. */ .tl-tabs__list { display: flex; flex: 1 1 auto; gap: var(--tl-space-1); overflow-x: auto; scrollbar-width: thin; } .tl-tabs__tab { flex: 0 0 auto; min-height: var(--tl-target-comfort); padding: var(--tl-space-2) var(--tl-space-3); border: 0; border-block-end: 2px solid transparent; background: transparent; color: var(--tl-text-muted); font: inherit; font-weight: var(--tl-weight-medium); white-space: nowrap; cursor: pointer; transition: color var(--tl-duration-fast) var(--tl-ease), border-color var(--tl-duration-fast) var(--tl-ease); } .tl-tabs__tab:hover { color: var(--tl-text); } .tl-tabs__tab:focus-visible { outline: var(--tl-focus-ring); outline-offset: calc(var(--tl-focus-offset) * -1); } .tl-tabs__tab[aria-selected="true"] { color: var(--tl-text); border-block-end-color: var(--tl-accent); } /* Il pallino col numero: quante udienze, quanti documenti. Sta nella scheda * perché è l'informazione che decide se vale la pena aprirla. */ .tl-tabs__count { display: inline-block; margin-inline-start: var(--tl-space-1); padding: 0 var(--tl-space-1); min-width: 1.4em; border-radius: var(--tl-radius-full); background: var(--tl-surface-muted); color: var(--tl-text-muted); font-size: var(--tl-text-xs); font-variant-numeric: tabular-nums; text-align: center; } .tl-tabs__tab[aria-selected="true"] .tl-tabs__count { background: var(--tl-accent-subtle); color: var(--tl-accent-text); } /* Le azioni della pagina — «Salva» — accanto alle schede e non in fondo: in una * pagina a schede il fondo è quello del pannello aperto, e cambia di scheda in * scheda. */ .tl-tabs__actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--tl-space-2); padding-block-end: var(--tl-space-2); } @media (max-width: 700px) { .tl-tabs { flex-wrap: wrap; } .tl-tabs__actions { padding-block-start: var(--tl-space-2); } } /* ── Organizza menu: lo spostamento di una voce ──────────────────────────── Due classi sole, usate da configurazione/organizza-menu.blade.php. Stanno qui e non in un