/* ============================================================================ * reskin.css — ridisegna le pagine esistenti senza convertirle * ============================================================================ * * ── Cosa fa, e perché funziona ────────────────────────────────────────────── * * Le 292 pagine non usano centinaia di stili diversi: usano una decina di nomi * di classe, ripetuti ovunque. * * .clean_row / .HSpace4 265 pagine * .BoxRow 239 pagine 8.951 occorrenze * .BoxRowLabel 227 pagine 4.258 * .BoxRowCaption 227 pagine 4.006 * .table_label_H 199 pagine 1.649 * .table_caption_H 180 pagine 2.383 * * Ridisegnare quei dieci nomi ridisegna quindi tutta l'applicazione insieme, * senza toccare una riga di PHP e senza convertire nessuna pagina. * * ── Il difetto che questo file corregge ───────────────────────────────────── * * Non è la scelta dei colori: è che *ogni cella è un blocco di colore pieno*. * L'etichetta di un campo è una barra blu scuro con testo bianco, il valore è * una barra azzurra, il campo di testo dentro è verde pallido, l'intestazione * di tabella è blu saturo. Con tutto colorato non c'è gerarchia: nessun * elemento può risaltare, perché risaltano tutti. * * Il reskin toglie i fondi pieni e ricostruisce la gerarchia con la tipografia * e lo spazio, che è il modo in cui la fanno le interfacce moderne. I colori * restano, ma tornano a significare qualcosa: si usano per lo stato, non per * decorare ogni cella. * * ── IL VINCOLO, e va rispettato da chiunque tocchi questo file ────────────── * * SI PUÒ CAMBIARE background, color, border, border-radius, font-*, * padding, min-height, line-height, box-shadow, transition * * NON SI PUÒ width, float, position, display, top/right/bottom/left, * e in generale qualunque cosa tocchi la griglia col-sm-* * * È questo che rende l'operazione a rischio quasi nullo: nessuna pagina può * sfasarsi in orizzontale, perché la geometria non viene toccata. Le altezze * fisse diventano min-height, quindi al massimo una riga cresce in verticale — * l'unica direzione in cui crescere non rompe niente. * * ── Accendere e spegnere ──────────────────────────────────────────────────── * * Interruttore globale: la costante RESKIN in ui/boot.php. * * Esclusione di una singola pagina che dovesse sfasarsi, da mettere PRIMA * dell'include dell'header: * * define('TL_NO_RESKIN', true); * * Serve durante la verifica: una pagina che non regge si esclude in una riga, * senza spegnere il reskin per tutte le altre e senza fermare il rilascio. * * ── Perché non c'è nessun !important ──────────────────────────────────────── * * Non serve. Questo foglio è caricato da boot.php in fondo a , quindi * dopo bootstrap.css e dopo sarida.css: a parità di specificità vince l'ultimo. * Dove l'originale usa selettori più specifici, qui si scrive `body .classe` * per superarli di un punto. Un !important qui renderebbe impossibile a una * pagina convertita di sovrascrivere, che è esattamente il contrario di quanto * serve nei prossimi mesi. * ========================================================================= */ /* ═══════════════════════════════════════════════════════════════════════════ * 0 · BASE * ═══════════════════════════════════════════════════════════════════════════ */ body { background-color: var(--tl-surface-sunken); color: var(--tl-text); font-family: var(--tl-font-sans); -webkit-font-smoothing: antialiased; } /* sarida.css dichiara `body { margin: 1em }`: 1em con la radice a 10px fa 10px * su ogni lato. Si porta a una spaziatura della scala. */ body { margin: var(--tl-space-3); } body.tl-shell { margin: 0; } /* con la barra laterale il margine lo dà il guscio */ /* ═══════════════════════════════════════════════════════════════════════════ * 1 · LE RIGHE DEI MODULI * ═══════════════════════════════════════════════════════════════════════════ * .BoxRowLabel + .BoxRowCaption sono la coppia etichetta/valore: 8.264 * occorrenze su 227 pagine. È il pezzo che cambia di più l'aspetto complessivo. */ /* ── L'unico !important del foglio, e perché non se ne può fare a meno ─────── * * Duecentoquarantasei pagine scrivono l'altezza del riquadro filtri **dentro * l'attributo `style`**, novecentosei volte in tutto: * *
* * Undici virgola quattro rem sono centoquattordici pixel, cioè cinque righe da * ventidue. È un conto fatto a mano sull'altezza che le righe avevano allora. * Ingrandendo il testo le righe diventano più alte, il riquadro no, e le righe * in eccesso **escono dal riquadro e finiscono sopra l'elenco dei risultati**: * su `mgmt_communication.php` gli ultimi tre filtri sparivano dietro * l'intestazione della tabella. Non è una sbavatura, è contenuto illeggibile. * * Nessuna specificità batte un attributo `style`. Le alternative erano due: * modificare novecentosei righe di PHP, oppure una riga di CSS. La seconda. * * `height: auto` basta da sola perché il contenitore è già `float: left`, e un * float contiene i propri figli flottanti: tolta l'altezza imposta, si * dimensiona sul contenuto senza bisogno di toccarne il `display`. * * L'elenco prende sia i contenitori delle celle sia le celle stesse: qualche * pagina scrive l'altezza direttamente sul `.BoxRow` o sul `.table_caption_H`, * che quindi fa da contenitore a sé. * * ── L'unica eccezione all'eccezione ───────────────────────────────────────── * * `:not([style*="overflow"])`. Alcuni riquadri hanno un'altezza imposta * APPOSTA, perché devono scorrere: * *
* * Lì il contenuto in eccesso resta dentro e non copre niente: togliere * l'altezza sostituirebbe una barra di scorrimento con una pagina lunga il * triplo. Chi vuole scorrere lo dichiara, e si riconosce da quello. */ /* deroga: batte l'altezza fissa scritta negli attributi style delle pagine */ body :is( div:has(> .BoxRowLabel), div:has(> .BoxRowCaption), div:has(> .table_label_H), div:has(> .table_caption_H), .BoxRow, .BoxRowLabel, .BoxRowCaption, .table_label_H, .table_caption_H ):not([style*="overflow"]) { height: auto !important; } /* ── La riga che non conteneva la propria riga ────────────────────────────── * * `.tableRow` avvolge le celle di una riga d'elenco in sessantacinque pagine e * **non ha una sola regola di stile** in tutto il progetto: né qui né nei * fogli originali. È un contenitore che non contiene. Le celle sono * `float: left`, quindi ne escono, e il div resta alto zero — si può misurare, * ed è zero anche nell'aspetto classico. * * Finché ogni cella era alta esattamente 22px la cosa non si vedeva: righe * tutte identiche si impilano bene anche senza contenitore. Tolte le altezze * fisse (la deroga qui sopra) le celle si dimensionano sul contenuto, e basta * che una vada a capo — «NON ASSOC.» in una colonna da un dodicesimo, una * targa accanto a data e ora — perché la riga seguente si infili nello spazio * rimasto libero accanto a quella più alta. In «Pagamenti» le ultime quattro * righe scivolavano di una colonna: dati veri sotto l'intestazione sbagliata, * che è il difetto peggiore che possa avere un elenco. * * `flow-root` fa una cosa sola: crea il contesto di formattazione che * trattiene i float. Non tocca la griglia — le celle restano `float: left` * con le loro larghezze — e non ritaglia niente, a differenza di * `overflow: hidden`, che mangerebbe le targhe posizionate in assoluto. * * ── Perché qui si può cambiare il display ────────────────────────────────── * * La regola che ci si è dati è di non toccare `display` sugli elementi della * griglia: cambiarlo su un `col-sm-*` ne cambia la geometria e disfa * l'impaginazione. `.tableRow` non è una cella, è il loro contenitore, e * passare un contenitore da `block` a `flow-root` non sposta di un pixel ciò * che ha dentro. È l'unico punto in cui vale, e vale perché è l'unico * contenitore vuoto di regole. * * ── E perché da solo non bastava ─────────────────────────────────────────── * * `flow-root` ha un secondo effetto, che non è un dettaglio: un blocco che * apre un proprio contesto di formattazione **non si sovrappone ai float che * lo precedono** — si affianca a loro e si stringe nello spazio rimasto. * Quasi ovunque non cambia niente, perché fra l'intestazione e la prima riga * le pagine mettono un `clean_row` che azzera i float. Dove non c'è — * `exp_injunction`, l'elenco delle Ingiunzioni — lo spazio rimasto accanto * all'intestazione è **zero**: la prima riga si è ridotta a una colonna larga * diciassette pixel appiccicata al bordo destro, con le lettere una sotto * l'altra, e la pagina è diventata alta duemilaseicento pixel. Le altre righe * stavano al loro posto: solo la prima, che è quella che si guarda per capire * se l'elenco funziona. * * `clear: both` toglie proprio quel caso, e non tocca nient'altro: una riga * d'elenco occupa dodici colonne su dodici, quindi comincia a capo comunque. * Dove il `clean_row` c'è già, questa riga non sposta un pixel. */ body .tableRow { display: flow-root; clear: both; } /* L'etichetta: da barra blu scuro con testo bianco a etichetta vera. * Fondo trasparente, testo grigio, corpo piccolo — la gerarchia la fa il * contrasto con il valore accanto, non un rettangolo colorato. */ /* ── Perché l'etichetta è alta quanto un campo ─────────────────────────────── * * L'etichetta e il suo campo sono due celle affiancate, non una coppia: niente * le tiene allineate. Nell'originale combaciavano per caso — erano entrambe * alte 22px, perché il testo a 10px e il campo a 20px stavano tutti e due in * quello spazio. Ingrandendo il testo il caso è finito: l'etichetta veniva * 35px e la cella del campo 45px, e ogni etichetta galleggiava dieci pixel * sopra il campo che descrive. * * La cura è dare all'etichetta la stessa altezza minima che la cella del campo * ha comunque (campo più le sue spaziature) e centrarci dentro il testo. Non * costa un pixel in più: quell'altezza la riga ce l'aveva già, era solo * l'etichetta a non arrivarci. * * `align-content` centra il contenuto di un blocco senza toccarne il `display`, * quindi il vincolo in cima al file resta rispettato. Funziona da Chrome 123, * Safari 17.4 e Firefox 125 — dentro i «solo browser moderni» concordati. */ /* Il fondo è quello del `.BoxRow` che le contiene, non «niente»: sembra la * stessa cosa e non lo è. Diverse pagine scrivono nei filtri una larghezza * maggiore della propria colonna — `mgmt_warning` mette `width:10rem` in una * `col-sm-1` da 91px — e quel campo sborda da sempre sopra l'etichetta * accanto. In Classico non si vedeva perché l'etichetta era un rettangolo blu * pieno che glielo copriva; con il fondo trasparente ricompare, e si legge * «0arga» al posto di «Targa». * Il difetto è della pagina e resta lì (vedi il catalogo in docs-explorer); * qui si ripristina * soltanto la copertura, perché una variante non deve mai mostrarsi peggio * dell'originale. */ body .BoxRowLabel { background-color: var(--tl-surface); color: var(--tl-text-muted); font-size: var(--tl-text-sm); font-weight: var(--tl-weight-medium); height: auto; min-height: calc(var(--tl-control-height) + 2 * var(--tl-space-2)); align-content: center; line-height: 1.35; padding: var(--tl-space-2) var(--tl-space-2) var(--tl-space-2) var(--tl-space-1); border-bottom: 1px solid var(--tl-border-subtle); } /* Il valore. * * ── Perché la spaziatura orizzontale è stretta ────────────────────────────── * * Dodici pixel per lato sembrano pochi, e su una cella larga lo sono. Ma il * campo dentro questa cella è largo `100%`, quindi ogni pixel di spaziatura è * un pixel tolto al campo — e le celle qui dentro sono spesso `col-sm-1`, che * a 1440px vuol dire novantuno pixel in tutto. * * Con dodici pixel per lato un campo data mostrava «01/01/» al posto di * «01/01/2026»: il valore c'era e non si leggeva. Con otto ci sta, e i campi * che restano tagliati sono gli stessi due che si tagliavano già prima del * reskin — cioè non li abbiamo peggiorati noi. */ /* Stesso motivo dell'etichetta qui sopra: fondo del contenitore, non * trasparente, così una cella non lascia trapelare quella di prima. */ body .BoxRowCaption { background-color: var(--tl-surface); color: var(--tl-text); font-size: var(--tl-text-base); height: auto; min-height: calc(var(--tl-control-height) + 2 * var(--tl-space-2)); align-content: center; line-height: 1.35; /* Orizzontale più stretta della verticale, per la stessa ragione delle celle * di dato: qui dentro finiscono valori dentro colonne da 91px, e ogni pixel * di spaziatura è un pixel tolto al testo. Con 8px per lato «Codice della * Strada» non riusciva a mettere due parole sulla stessa riga e occupava tre * righe da sola, alta 74px in una fila da 48. */ padding: var(--tl-space-2) var(--tl-space-1); border-bottom: 1px solid var(--tl-border-subtle); } /* Quando una cella porta entrambe le classi l'originale la ridipinge di blu: * qui diventa un'etichetta di sezione, che è il ruolo che ha davvero. */ body .BoxRowCaption.BoxRowLabel { background-color: var(--tl-surface-muted); color: var(--tl-text-muted); font-weight: var(--tl-weight-semibold); } /* .BoxRow è il contenitore: era una barra blu piena alta 3rem. Diventa la * superficie su cui poggiano le righe. */ body .BoxRow { background-color: var(--tl-surface); color: var(--tl-text); font-weight: var(--tl-weight-normal); height: auto; min-height: 30px; line-height: 1.4; margin-top: 0; border-bottom: 1px solid var(--tl-border-subtle); } /* Titolo di riquadro: era 30px in grassetto su verde-grigio. */ body .BoxRowTitle { background-color: transparent; color: var(--tl-text); font-size: var(--tl-text-xl); font-weight: var(--tl-weight-semibold); line-height: 1.3; padding: var(--tl-space-4) var(--tl-space-2) var(--tl-space-2); border-bottom: 2px solid var(--tl-border-strong); } body .BoxRowHTitle { background-color: var(--tl-surface-muted); color: var(--tl-text-muted); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; height: auto; min-height: 26px; line-height: 1.4; padding: var(--tl-space-2) var(--tl-space-3); border-bottom: 1px solid var(--tl-border); } body .BoxRowButton { background-color: var(--tl-surface-muted); height: auto; min-height: 52px; padding: var(--tl-space-3); border-top: 1px solid var(--tl-border-subtle); } /* La barra dei filtri: era bianco su blu pieno. */ body .BoxRowFilterButton { background-color: var(--tl-surface-muted); color: var(--tl-text); border-bottom: 1px solid var(--tl-border); } /* ═══════════════════════════════════════════════════════════════════════════ * 2 · I CAMPI * ═══════════════════════════════════════════════════════════════════════════ * I campi di testo erano blu su verde pallido (#C7EBE0), con un'icona PNG di * sfondo che costringeva a 20px di padding a sinistra. Diventano campi normali: * fondo bianco, bordo, e un anello di messa a fuoco visibile — che oggi manca, * ed è il motivo per cui lavorando da tastiera non si capisce dove si è. */ body .BoxRowCaption input[type="text"], body .BoxRowCaption input[type="password"], body .BoxRowCaption input[type="number"], body .BoxRowCaption input[type="email"], body .BoxRowCaption input[type="date"], body .BoxRowCaption select, body .BoxRowCaption textarea, body .form-control { background-color: var(--tl-surface); background-image: none; /* toglie l'icona PNG di frm_field_* */ color: var(--tl-text); font-size: var(--tl-text-base); font-weight: var(--tl-weight-normal); height: auto; min-height: 28px; line-height: 1.4; padding: var(--tl-space-1) var(--tl-space-2); border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius-sm); box-shadow: none; transition: border-color var(--tl-duration-fast) var(--tl-ease), box-shadow var(--tl-duration-fast) var(--tl-ease); } body .BoxRowCaption textarea, body textarea.form-control { min-height: 60px; line-height: 1.5; } body .BoxRowCaption input[type="text"]:hover, body .BoxRowCaption select:hover, body .form-control:hover { border-color: var(--tl-gray-400); } /* Un solo anello per tutta l'applicazione. sarida.css ne aveva uno azzurro * fosforescente (`outline: #1400ff solid 1px` più due ombre): qui viene * sostituito da quello dei token, che è lo stesso dei componenti nuovi. */ body .BoxRowCaption input:focus, body .BoxRowCaption select:focus, body .BoxRowCaption textarea:focus, body .form-control:focus { outline: none; border-color: var(--tl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tl-accent) 18%, transparent); } body .BoxRowCaption input:disabled, body .BoxRowCaption select:disabled, body .BoxRowCaption textarea:disabled, body .form-control:disabled, body .form-control[readonly] { background-color: var(--tl-surface-muted); color: var(--tl-text-subtle); border-color: var(--tl-border); } /* Le icone PNG dei tipi di campo: 735 input le portano. Erano un'immagine di * sfondo a 16px con 20px di padding a compensarla. */ body .frm_field_string, body .frm_field_mail, body .frm_field_date, body .frm_field_time, body .frm_field_numeric, body .frm_field_currency { background-image: none; padding-left: var(--tl-space-2); } body .frm_field_currency, body .frm_field_numeric { text-align: right; font-variant-numeric: tabular-nums; } /* L'obbligatorio: da bordo senape di 3px a un bordo sinistro sobrio. * Il bordo pieno su tutti i lati faceva sembrare il campo in errore. */ body .frm_field_required { border: 1px solid var(--tl-border-strong); border-left: 3px solid var(--tl-warning); } body .has-error .form-control { border-color: var(--tl-danger); } body .has-error .control-label, body .has-error .help-block { color: var(--tl-danger-text); } body .has-success .form-control { border-color: var(--tl-success); } body .has-success .control-label, body .has-success .help-block { color: var(--tl-success-text); } /* Le caselle di spunta erano minuscole e senza colore d'accento. */ body input[type="checkbox"], body input[type="radio"] { accent-color: var(--tl-accent); width: 15px; height: 15px; } /* ═══════════════════════════════════════════════════════════════════════════ * 3 · GLI ELENCHI * ═══════════════════════════════════════════════════════════════════════════ * Gli elenchi sono griglie di div, non tabelle: la struttura non si può * correggere da qui, e resta il lavoro della conversione. Ma l'aspetto sì. * * L'intervento che pesa di più è .table_caption_H, che oggi è a font-size 1rem, * cioè 10px con la radice a 10px: il testo dei dati dell'elenco è la cosa più * piccola della pagina. Portarlo a 13px cambia la giornata di chi ci lavora. */ body .table_label_H { background-color: var(--tl-surface-muted); color: var(--tl-text-muted); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-semibold); text-transform: uppercase; letter-spacing: 0.02em; height: auto; min-height: 30px; align-content: center; line-height: 1.4; /* La stessa spaziatura orizzontale della cella di dato qui sotto, e non una * più larga. Erano 12px contro 8, e la differenza si vedeva: ogni etichetta * stava quattro pixel più a destra del proprio dato, su ogni elenco del * gestionale. Il guadagno secondario è che l'etichetta ha otto pixel in più * per starci — quanto basta a «VIOLAZIONE», che in una colonna col-sm-1 si * spezzava a metà e usciva «VIOLAZION / E». */ padding: var(--tl-space-2); border-right: 1px solid var(--tl-border-subtle); border-bottom: 1px solid var(--tl-border-strong); /* Diverse intestazioni sono parole singole più larghe della propria colonna * — «ManagerProvince» chiede 140px in una cella da 98px. Senza questo la * parola non va a capo e straborda sopra la colonna vicina; con questo si * spezza, e le due righe ci stanno già per via della min-height qui sotto. * Vale anche per «ManagerProvince» in Classico, che sbordava già prima. * * Resta il caso peggiore: una parola sola di undici lettere o più in una * colonna da 98px — «Cronologico», «Rateizzazione», «trasmissione» — che si * spezza comunque, perché neanche a spaziatura zero ci starebbe. Non è un * problema di CSS: è una colonna larga un dodicesimo dello schermo a cui il * PHP chiede di contenere una parola lunga. Si chiude con la conversione * degli elenchi a componenti, dove la larghezza la decide il contenuto. * * `hyphens: auto` prova a sillabare invece di troncare: «STAMPATO-/RE» * invece di «STAMPATOR/E», dove la lineetta dice che la parola continua. * **Va detto che non sempre funziona.** Serve che il browser abbia il * dizionario di sillabazione italiano: Chrome e Safari da desktop ce l'hanno, * il Chromium headless con cui girano le verifiche di `verifica-ui/` no — lì * la proprietà è calcolata `auto` e non produce nulla, quindi nelle schermate * la parola resta spezzata a metà. È un miglioramento dove c'è, non una * correzione su cui contare; quella arriva con la conversione. * `overflow-wrap` resta come rete, e resta l'unica cosa che agisce sempre: * dove la sillabazione non ha un punto in cui spezzare — sigle, targhe, * «IUV» — si torna comunque al taglio secco. * * L'attributo `lang` che gli serve non c'era su nessuna pagina: aggiunto * `lang="it"` nei tre header. Serviva comunque, e per una ragione più seria * della sillabazione: senza, il lettore di schermo pronuncia l'italiano con * le regole dell'inglese (criterio WCAG 3.1.1). */ hyphens: auto; overflow-wrap: break-word; } /* ── Le sole vere righe di intestazione ───────────────────────────────────── * * `.table_label_H` fa due mestieri. In cima a un elenco è l'intestazione di * colonna, e le celle stanno in fila. Nel cruscotto e nelle schede di * dettaglio è invece l'etichetta di una riga singola, con il proprio valore * accanto: lì di celle ce n'è una sola. * * La distinzione conta perché la cura serve solo al primo caso. Le celle * dell'intestazione sono div flottanti su griglia col-sm-*: se una va a capo * diventa più alta delle vicine, scende sotto la riga e sembra una linguetta * bianca appesa. Succedeva a «Proprietario / Obbligato» nell'elenco verbali, * 51px contro 34px, ed era colpa nostra — MAIUSCOLO più spaziatura fra le * lettere allarga il testo di circa un sesto, e ciò che stava su una riga a * 15px tondi non ci sta più a 12px maiuscoli. Togliere il maiuscolo risolveva * solo tre casi su otto, e il maiuscolo è quello che fa leggere la riga come * un'intestazione. * * Quindi si tiene il maiuscolo e si toglie il dislivello: due righe di altezza * minima, così chi va a capo e chi non ci va misura uguale. Applicarlo a * TUTTE le `.table_label_H` però costava ventun pixel per riga sul cruscotto, * dove il problema non esiste: da qui i due selettori qui sotto, che insieme * prendono ogni cella di una fila di due o più e nessuna cella isolata. * * Non si può risolvere allineando i figli: i float non si allineano, e * servirebbe cambiare `display` sul contenitore — proprio ciò che il vincolo * in cima a questo file vieta. */ /* * Nella fila conta anche la cella del «+» (`.table_add_button`), che chiude * quasi ogni intestazione ed è a tutti gli effetti una cella come le altre. * Lasciarla fuori è costato l'elenco dei Ricorsi: le tre etichette alte 51px, * la cella del «+» ferma a 32, e «Cron» — che avrebbe dovuto andare a capo * insieme al resto — si è infilata nei 19px di dislivello rimasti liberi a * destra. Da lì in poi ogni intestazione stava una colonna più a sinistra del * proprio dato: il cronologico sotto «Data», la data sotto «Targa», la targa * sotto «Nome». * * È lo stesso difetto dei Pagamenti, e si vede solo guardando la schermata: * nessuna misura lo segnala, perché ogni singola cella è larga giusta e al * posto giusto. È sbagliata la riga. */ body .table_label_H:has(+ .table_label_H), body .table_label_H:has(+ .table_add_button), body .table_add_button:has(+ .table_label_H), body .table_add_button:has(+ .table_add_button), body .table_label_H + .table_label_H, body .table_label_H + .table_add_button, body .table_add_button + .table_label_H, body .table_add_button + .table_add_button { /* due righe di testo + le due spaziature + il bordo inferiore. Scritta come * calcolo e non come numero perché deve restare giusta se qualcuno cambia il * corpo del testo o la spaziatura nei token. */ min-height: calc(2 * 1.4 * var(--tl-text-xs) + 2 * var(--tl-space-2) + 1px); } /* La cella di dato. La spaziatura orizzontale è più stretta di quella * dell'intestazione per la stessa ragione delle celle valore: qui dentro * finiscono targhe, importi e date dentro colonne strette, e ogni pixel di * spaziatura è un pixel tolto al contenuto. */ body .table_caption_H { background-color: var(--tl-surface); color: var(--tl-text); font-size: var(--tl-text-sm); /* era 1rem = 10px */ font-weight: var(--tl-weight-normal); height: auto; min-height: 30px; align-content: center; line-height: 1.4; padding: var(--tl-space-2); border-right: 1px solid var(--tl-border-subtle); border-bottom: 1px solid var(--tl-border-subtle); overflow-wrap: break-word; } /* Il colore della riga. Alcuni elenchi lo mettono sul contenitore — in * `exp_injunction` la riga è `
` — e lo * spiegano nella nota in cima: «le righe verdi verranno incluse nella stampa * definitiva, le rosse no». È l'unica differenza fra le due, e non è * decorativa. * Il colore si eredita, ma `body .table_caption_H { color: … }` è più * specifico della classe sul padre e lo copriva: in Classico le righe erano * verdi e rosse, da noi tutte nere. Qui si ridà alla cella il colore che la * riga dichiara — con i toni scuri dei token, leggibili sul fondo chiaro, * invece del verde e del rosso pieni di Bootstrap. */ body .tableRow.text-success .table_caption_H, body .tableRow.text-success .table_caption_button { color: var(--tl-success-text); } body .tableRow.text-danger .table_caption_H, body .tableRow.text-danger .table_caption_button { color: var(--tl-danger-text); } body .table_caption_I { background-color: var(--tl-surface-muted); color: var(--tl-text); font-size: var(--tl-text-sm); font-weight: var(--tl-weight-medium); height: auto; min-height: 30px; line-height: 1.4; padding: var(--tl-space-2) var(--tl-space-3); border-right: 1px solid var(--tl-border-subtle); } body .table_caption_button { background-color: var(--tl-surface-muted); height: auto; min-height: 30px; font-size: var(--tl-text-sm); padding: var(--tl-space-1) var(--tl-space-2); } /* Gli stati delle righe. Erano fondi pieni saturi con testo bianco: diventano * fondi tenui con testo scuro e un bordo sinistro che porta il colore. * Stessi toni dei componenti nuovi, quindi le pagine convertite e quelle non * convertite dicono «errore» nello stesso modo. */ body .table_caption_error { background-color: var(--tl-danger-subtle); color: var(--tl-danger-text); border-left: 3px solid var(--tl-danger); } body .table_caption_success { background-color: var(--tl-success-subtle); color: var(--tl-success-text); border-left: 3px solid var(--tl-success); } body .table_caption_warning { background-color: var(--tl-warning-subtle); color: var(--tl-warning-text); border-left: 3px solid var(--tl-warning); } /* La barra delle azioni in cima agli elenchi — il riquadro con il «+» per * aggiungere. Era un blocco `#6397e2` pieno, lo stesso blu delle intestazioni, * e restava l'unico rettangolo saturo della pagina una volta tolti gli altri. */ body .table_add_button { background-color: var(--tl-surface-muted); color: var(--tl-text); font-size: var(--tl-text-base); height: auto; min-height: 32px; line-height: 1.4; padding: var(--tl-space-1) var(--tl-space-2); border-right: 1px solid var(--tl-border-subtle); border-bottom: 1px solid var(--tl-border-strong); } body .add_button, body .table_add_button a, body .table_add_button .add_button { color: var(--tl-accent); } /* Bordi di stato da 3px attorno alle celle: diventano un bordo sinistro come * tutti gli altri stati, così l'applicazione dice «errore» in un modo solo. */ body .txt-success { border: 1px solid var(--tl-border); border-left: 3px solid var(--tl-success); } body .txt-warning { border: 1px solid var(--tl-border); border-left: 3px solid var(--tl-warning); } body .txt-danger { border: 1px solid var(--tl-border); border-left: 3px solid var(--tl-danger); } body .bg-danger-dark { background-color: var(--tl-danger); color: var(--tl-text-inverse); } /* La velatura sotto alle finestre: era nera al 30%, uguale a quella dei * componenti nuovi per non avere due grigi diversi nella stessa applicazione. */ body .overlay { background: rgb(13 16 19 / 0.45); opacity: 1; } /* L'elenco a discesa della ricerca: era bianco su blu pieno #294A9C. */ body .ul_SearchList { background: var(--tl-surface); color: var(--tl-text); font-size: var(--tl-text-base); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-lg); } /* Le righe della gestione utenti: stesso trattamento di BoxRowLabel/Caption. * Sono su una pagina sola, ma è la pagina che l'amministratore apre per prima. */ body .user_label_H { background-color: transparent; color: var(--tl-text-muted); font-size: var(--tl-text-sm); font-weight: var(--tl-weight-medium); border-bottom: 1px solid var(--tl-border-subtle); } body .user_caption_H { background-color: transparent; color: var(--tl-text); font-size: var(--tl-text-sm); line-height: 1.4; border-bottom: 1px solid var(--tl-border-subtle); } body .user_caption_button, body .user_add_button { background-color: var(--tl-surface-muted); color: var(--tl-accent); font-size: var(--tl-text-base); line-height: 1.4; } /* Bootstrap disegna anche delle vere, dove ci sono. */ body .table > thead > tr > th { background-color: var(--tl-surface-muted); color: var(--tl-text-muted); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--tl-border-strong); } body .table > tbody > tr > td { font-size: var(--tl-text-sm); padding: var(--tl-space-2) var(--tl-space-3); border-top: 1px solid var(--tl-border-subtle); } body .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--tl-surface-muted); } body .table-hover > tbody > tr:hover { background-color: var(--tl-accent-subtle); } /* ═══════════════════════════════════════════════════════════════════════════ * 4 · GLI SPAZIATORI * ═══════════════════════════════════════════════════════════════════════════ * .HSpace4/16/48 sono bordi bianchi: con tutte le celle colorate leggevano come * separazioni. Ora che i fondi sono chiari un bordo bianco è invisibile, e la * separazione la deve fare lo spazio. * * .clean_row è `clear: both` e NON va toccata: è geometria, non aspetto. */ body .HSpace4 { border-bottom: 0; height: var(--tl-space-2); } body .HSpace16 { border-bottom: 0; height: var(--tl-space-4); } body .HSpace48 { border-bottom: 0; height: var(--tl-space-6); } body .DivHSpace { height: var(--tl-space-5); } /* ═══════════════════════════════════════════════════════════════════════════ * 5 · I PULSANTI * ═══════════════════════════════════════════════════════════════════════════ * Bootstrap 3 con il tema della 3 sopra: sfumature, ombre interne e bordi * arrotondati del 2013. Stessa forma dei pulsanti nuovi, così le pagine * convertite e quelle non convertite non sembrano due applicazioni diverse. */ /* ── I pulsanti che non hanno nessuna classe ──────────────────────────────── * * Trentatré `` nel progetto non portano nessuna classe. * Bootstrap veste `.btn`, non l'elemento: quindi restavano **pulsanti grigi di * sistema**, quelli con il bordo `outset` nero. Il primo è il pulsante «Login», * cioè il primissimo elemento che chiunque tocchi in questa applicazione. * * Si vestono per tipo invece che per classe. La regola sta prima di `.btn` e * ha specificità più bassa, quindi un pulsante che una classe ce l'ha continua * a vincere: questa è la rete sotto, non un'imposizione sopra. */ body :is(input[type="submit"], input[type="button"], input[type="reset"], button):not([class]) { background-color: var(--tl-surface); color: var(--tl-text); border: 1px solid var(--tl-border-strong); border-radius: var(--tl-radius); font-family: inherit; font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); padding: var(--tl-space-1) var(--tl-space-4); min-height: var(--tl-control-height); cursor: pointer; transition: background-color var(--tl-duration-fast) var(--tl-ease), border-color var(--tl-duration-fast) var(--tl-ease); } body :is(input[type="submit"], input[type="button"], input[type="reset"], button):not([class]):hover { background-color: var(--tl-surface-muted); border-color: var(--tl-gray-400); } body :is(input[type="submit"], input[type="button"], input[type="reset"], button):not([class]):focus-visible { outline: var(--tl-focus-ring); outline-offset: var(--tl-focus-offset); } body .btn { background-image: none; /* toglie le sfumature di bootstrap-theme */ border-radius: var(--tl-radius); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); padding: var(--tl-space-1) var(--tl-space-4); min-height: var(--tl-control-height); text-shadow: none; box-shadow: none; transition: background-color var(--tl-duration-fast) var(--tl-ease), border-color var(--tl-duration-fast) var(--tl-ease); } body .btn:focus-visible { outline: var(--tl-focus-ring); outline-offset: var(--tl-focus-offset); } body .btn-default { background-color: var(--tl-surface); border-color: var(--tl-border-strong); color: var(--tl-text); } body .btn-default:hover { background-color: var(--tl-surface-muted); border-color: var(--tl-gray-400); } body .btn-primary { background-color: var(--tl-accent); border-color: var(--tl-accent); color: var(--tl-on-accent); } body .btn-primary:hover, body .btn-primary:focus { background-color: var(--tl-accent-hover); border-color: var(--tl-accent-hover); } body .btn-success { background-color: var(--tl-success); border-color: var(--tl-success); color: var(--tl-text-inverse); } body .btn-warning { background-color: var(--tl-warning); border-color: var(--tl-warning); color: var(--tl-text-inverse); } body .btn-danger { background-color: var(--tl-danger); border-color: var(--tl-danger); color: var(--tl-text-inverse); } body .btn-info { background-color: var(--tl-info); border-color: var(--tl-info); color: var(--tl-text-inverse); } body .btn-success:hover { background-color: color-mix(in srgb, var(--tl-success) 85%, black); } body .btn-warning:hover { background-color: color-mix(in srgb, var(--tl-warning) 85%, black); } body .btn-danger:hover { background-color: color-mix(in srgb, var(--tl-danger) 85%, black); } body .btn-info:hover { background-color: color-mix(in srgb, var(--tl-info) 85%, black); } /* ═══════════════════════════════════════════════════════════════════════════ * 6 · MESSAGGI, RIQUADRI, FINESTRE * ═══════════════════════════════════════════════════════════════════════════ */ body .alert { border-radius: var(--tl-radius); border-width: 1px; border-left-width: 3px; font-size: var(--tl-text-base); padding: var(--tl-space-3) var(--tl-space-4); } body .alert-success { background-color: var(--tl-success-subtle); color: var(--tl-success-text); border-color: var(--tl-border); border-left-color: var(--tl-success); } body .alert-info { background-color: var(--tl-info-subtle); color: var(--tl-info-text); border-color: var(--tl-border); border-left-color: var(--tl-info); } body .alert-warning { background-color: var(--tl-warning-subtle); color: var(--tl-warning-text); border-color: var(--tl-border); border-left-color: var(--tl-warning); } body .alert-danger { background-color: var(--tl-danger-subtle); color: var(--tl-danger-text); border-color: var(--tl-border); border-left-color: var(--tl-danger); } body .panel { border-radius: var(--tl-radius-lg); border-color: var(--tl-border); box-shadow: var(--tl-shadow-sm); } body .panel-heading { background-image: none; background-color: var(--tl-surface-muted); border-color: var(--tl-border-subtle); font-weight: var(--tl-weight-semibold); } body .modal-content { border: 0; border-radius: var(--tl-radius-xl); box-shadow: var(--tl-shadow-lg); } body .modal-header { border-bottom-color: var(--tl-border-subtle); } body .modal-footer { border-top-color: var(--tl-border-subtle); background-color: var(--tl-surface-muted); } body .modal-title { font-size: var(--tl-text-lg); font-weight: var(--tl-weight-semibold); } body .well { background-color: var(--tl-surface-muted); border-color: var(--tl-border); border-radius: var(--tl-radius-lg); box-shadow: none; } body .label { border-radius: var(--tl-radius-full); font-weight: var(--tl-weight-medium); padding: 2px var(--tl-space-2); } body .badge { background-color: var(--tl-neutral); border-radius: var(--tl-radius-full); font-weight: var(--tl-weight-medium); } body .menu-badge { background-color: var(--tl-surface); color: var(--tl-accent); } /* ═══════════════════════════════════════════════════════════════════════════ * 7 · SCHEDE * ═══════════════════════════════════════════════════════════════════════════ */ body .nav-tabs { border-bottom-color: var(--tl-border); } body .nav-tabs > li > a { border-radius: var(--tl-radius) var(--tl-radius) 0 0; color: var(--tl-text-muted); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); border-color: transparent; } body .nav-tabs > li > a:hover { background-color: var(--tl-surface-muted); border-color: transparent; color: var(--tl-text); } body .nav-tabs > li.active > a, body .nav-tabs > li.active > a:hover, body .nav-tabs > li.active > a:focus { background-color: var(--tl-surface); color: var(--tl-accent); border-color: var(--tl-border) var(--tl-border) var(--tl-surface); font-weight: var(--tl-weight-semibold); } /* ═══════════════════════════════════════════════════════════════════════════ * 8 · IL MENU IN ALTO E LE INTESTAZIONI * ═══════════════════════════════════════════════════════════════════════════ * Serve a chi resta sul menu in alto: finché i due menu convivono devono * assomigliarsi, altrimenti sembrano due applicazioni diverse. */ body .FN_Menu { background-color: var(--tl-nav-bg); color: var(--tl-nav-text); font-size: var(--tl-text-base); } body .navbar { border: 0; border-radius: 0; box-shadow: var(--tl-shadow-sm); } body .navbar-default { background-image: none; background-color: var(--tl-nav-bg); border-color: var(--tl-nav-border); } body .navbar-nav > li > a { color: var(--tl-nav-text); font-size: var(--tl-text-base); } body .navbar-nav > li > a:hover { color: var(--tl-nav-text-strong); background-color: var(--tl-nav-bg-hover); } body .dropdown-menu { border: 1px solid var(--tl-border); border-radius: var(--tl-radius); box-shadow: var(--tl-shadow-lg); padding: var(--tl-space-1) 0; } body .dropdown-menu.FN_Menu { background-color: var(--tl-nav-bg); border-color: var(--tl-nav-border); } body .dropdown-menu > li > a { font-size: var(--tl-text-base); padding: var(--tl-space-2) var(--tl-space-3); } /* Il pulsante a tre lineette che compare sotto i 768px. Senza queste regole * resterebbe l'unico pezzo azzurro Bootstrap 3 della barra su telefono. */ body .navbar-toggle { border-color: var(--tl-nav-border); border-radius: var(--tl-radius); min-width: var(--tl-target-touch); min-height: var(--tl-target-comfort); } body .navbar-toggle:hover, body .navbar-toggle:focus { background-color: var(--tl-nav-bg-hover); } body .navbar-toggle .icon-bar { background-color: var(--tl-nav-text); } body .navbar-collapse { border-color: var(--tl-nav-border); box-shadow: none; } body .navbar-brand { color: var(--tl-nav-text-strong); font-size: var(--tl-text-lg); } body .table-bordered, body .table-bordered > thead > tr > th, body .table-bordered > tbody > tr > td { border-color: var(--tl-border-subtle); } body .bg-primary { background-color: var(--tl-accent-subtle); color: var(--tl-accent-text); } body .ulUserList, body .ulUserList_U { background: var(--tl-surface); color: var(--tl-text); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); } body .FN_Title { background-color: var(--tl-surface); color: var(--tl-text); font-size: var(--tl-text-2xl); font-weight: var(--tl-weight-semibold); line-height: 1.4; border-bottom: 1px solid var(--tl-border); } /* Il nome dell'ente era a 3rem, cioè 30px: più grande del titolo della pagina. */ body .title_city { color: var(--tl-text); font-size: var(--tl-text-lg); font-weight: var(--tl-weight-semibold); line-height: 1.4; } body .title_page { color: var(--tl-text-muted); font-size: var(--tl-text-base); font-weight: var(--tl-weight-medium); word-spacing: normal; } body .font_small { font-size: var(--tl-text-xs); } /* ═══════════════════════════════════════════════════════════════════════════ * 9 · IL RESTO DI BOOTSTRAP 3 * ═══════════════════════════════════════════════════════════════════════════ * Elementi che le pagine usano meno spesso ma che, se lasciati com'erano, * restavano gli unici pezzi con l'aspetto del 2013 in mezzo a una pagina * rinnovata — e si notano proprio per quello. */ /* Barre di avanzamento: sono su 10 pagine, tutte di elaborazione, dove chi * guarda sta aspettando ed è l'unica cosa che ha da guardare. */ body .progress { height: 18px; background-color: var(--tl-gray-200); border-radius: var(--tl-radius-full); box-shadow: none; overflow: hidden; } body .progress-bar { background-image: none; background-color: var(--tl-accent); color: var(--tl-on-accent); font-size: var(--tl-text-xs); font-weight: var(--tl-weight-medium); line-height: 18px; box-shadow: none; } body .progress-bar-success { background-color: var(--tl-success); } body .progress-bar-info { background-color: var(--tl-info); } body .progress-bar-warning { background-color: var(--tl-warning); } body .progress-bar-danger { background-color: var(--tl-danger); } /* Riquadri colorati. Bootstrap 3 li disegna con l'intestazione a tinta piena e * il testo bianco: stesso trattamento degli stati, colore sul bordo. */ body .panel-body { padding: var(--tl-space-4); } body .panel-footer { background-color: var(--tl-surface-muted); border-top-color: var(--tl-border-subtle); } body .panel-primary, body .panel-success, body .panel-info, body .panel-warning, body .panel-danger { border-color: var(--tl-border); } body .panel-primary > .panel-heading { background-color: var(--tl-accent-subtle); color: var(--tl-accent-text); border-color: var(--tl-border-subtle); } body .panel-success > .panel-heading { background-color: var(--tl-success-subtle); color: var(--tl-success-text); border-color: var(--tl-border-subtle); } body .panel-info > .panel-heading { background-color: var(--tl-info-subtle); color: var(--tl-info-text); border-color: var(--tl-border-subtle); } body .panel-warning > .panel-heading { background-color: var(--tl-warning-subtle); color: var(--tl-warning-text); border-color: var(--tl-border-subtle); } body .panel-danger > .panel-heading { background-color: var(--tl-danger-subtle); color: var(--tl-danger-text); border-color: var(--tl-border-subtle); } /* Paginazione. */ body .pagination > li > a, body .pagination > li > span { color: var(--tl-text-link); background-color: var(--tl-surface); border-color: var(--tl-border); font-size: var(--tl-text-sm); padding: var(--tl-space-1) var(--tl-space-3); min-height: var(--tl-target-min); } body .pagination > li > a:hover { background-color: var(--tl-accent-subtle); border-color: var(--tl-border-strong); } body .pagination > .active > a, body .pagination > .active > span, body .pagination > .active > a:hover, body .pagination > .active > span:hover { background-color: var(--tl-accent); border-color: var(--tl-accent); color: var(--tl-on-accent); } /* ── Le pagine che non esistono ───────────────────────────────────────────── * * `CreatePagination()` in `inc/function.php` disegna **sempre cinque** numeri * di pagina e marca `disabled` quelli oltre l'ultima vera (riga 787: a pagina * uno l'estremo è la costante 5, non il totale). Un elenco di otto righe su * venticinque per pagina mostra quindi «1 2 3 4 5» con quattro pagine che non * ci sono, e chi guarda conclude che ci siano altri duecento articoli. * * Rendere le pagine finte meno leggibili non si può — sotto il 3:1 le segnala * il controllo del contrasto, giustamente. Si toglie invece la **forma di * pulsante**: senza bordo e senza fondo il numero resta leggibile ma smette di * annunciarsi come qualcosa su cui si può premere, che è la vera differenza. * `cursor: default` toglie anche la manina. * * La correzione vera è di una riga in `CreatePagination()`, ma quella funzione * la chiamano tutti gli elenchi del gestionale e non è la pelle a doverla * cambiare: sta fra le cose da fare, non qui. */ body .pagination > .disabled > span, body .pagination > .disabled > a { color: var(--tl-text-subtle); background-color: transparent; border-color: transparent; cursor: default; } /* Utilità di colore del testo: erano i colori di Bootstrap 3, che non passano * la soglia di contrasto. Qui prendono i toni verificati dei token. */ body .text-danger, body .text-danger a { color: var(--tl-danger-text); } body .text-warning, body .text-warning a { color: var(--tl-warning-text); } body .text-success, body .text-success a { color: var(--tl-success-text); } body .text-info, body .text-info a { color: var(--tl-info-text); } body .text-primary, body .text-primary a { color: var(--tl-accent-text); } body .text-muted { color: var(--tl-text-muted); } body .bg-danger { background-color: var(--tl-danger-subtle); color: var(--tl-danger-text); } body .bg-warning { background-color: var(--tl-warning-subtle); color: var(--tl-warning-text); } body .bg-success { background-color: var(--tl-success-subtle); color: var(--tl-success-text); } body .bg-info { background-color: var(--tl-info-subtle); color: var(--tl-info-text); } /* La croce di chiusura: era un × grigio da 21px senza area cliccabile. * Qui prende il bersaglio minimo di WCAG 2.2. */ body .close { color: var(--tl-text-muted); font-size: var(--tl-text-xl); font-weight: var(--tl-weight-normal); text-shadow: none; opacity: 0.7; min-width: var(--tl-target-min); min-height: var(--tl-target-min); } body .close:hover { color: var(--tl-text); opacity: 1; } /* Misure dei pulsanti: l'altezza minima della regola generale le annullerebbe. */ body .btn-xs { min-height: var(--tl-target-min); padding: 0 var(--tl-space-2); font-size: var(--tl-text-xs); } body .btn-sm { min-height: var(--tl-control-height-sm); padding: 0 var(--tl-space-3); font-size: var(--tl-text-sm); } body .btn-lg { min-height: var(--tl-control-height-lg); padding: 0 var(--tl-space-5); font-size: var(--tl-text-lg); } body .list-group-item { border-color: var(--tl-border); font-size: var(--tl-text-base); padding: var(--tl-space-2) var(--tl-space-3); } body .list-group-item.active { background-color: var(--tl-accent); border-color: var(--tl-accent); color: var(--tl-on-accent); } body .input-group-addon { background-color: var(--tl-surface-muted); border-color: var(--tl-border-strong); color: var(--tl-text-muted); font-size: var(--tl-text-sm); border-radius: var(--tl-radius-sm); } /* ── Le tre classi rimaste del progetto ──────────────────────────────────── */ /* .FN_IN era un'intestazione verde a 3rem, cioè 30px. */ body .FN_IN { background-color: var(--tl-surface-muted); color: var(--tl-text); font-size: var(--tl-text-lg); font-weight: var(--tl-weight-semibold); border-bottom: 1px solid var(--tl-border); } body .FN_Content_IN { border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); } /* .mgmt_user forzava i collegamenti a grigio chiaro, illeggibili su fondo chiaro. */ body .mgmt_user a:link, body .mgmt_user a:visited { color: var(--tl-text-link); } body .mgmt_user a:hover { color: var(--tl-text-link-hover); } /* ── L'albero del menu laterale storico (menu_left.php) ──────────────────── */ body .tree_label { color: var(--tl-nav-text); } body .tree_label a:link, body .tree_label a:visited { color: var(--tl-nav-text); } body .tree_label a:hover { color: var(--tl-nav-text-strong); } body label.tree_label:before { background: var(--tl-accent); color: var(--tl-on-accent); } body .tree_custom { background: var(--tl-surface-muted); border-radius: var(--tl-radius); } /* ═══════════════════════════════════════════════════════════════════════════ * 10 · COLLEGAMENTI * ═══════════════════════════════════════════════════════════════════════════ */ body a { color: var(--tl-text-link); } body a:hover, body a:focus { color: var(--tl-text-link-hover); } /* I collegamenti dentro le celle dei dati ereditano il colore della cella: * l'originale li faceva grigio chiaro su fondo azzurro. */ body .BoxRowCaption a:link, body .BoxRowCaption a:visited { color: var(--tl-text-link); } body .BoxRowCaption a:hover { color: var(--tl-text-link-hover); } /* Un anello di messa a fuoco visibile su tutto ciò che è raggiungibile da * tastiera. È il criterio WCAG 2.4.7, e oggi in gran parte dell'applicazione * non c'è: lavorando da tastiera non si capisce dove ci si trova. */ body a:focus-visible, body button:focus-visible, body [tabindex]:focus-visible { outline: var(--tl-focus-ring); outline-offset: var(--tl-focus-offset); border-radius: var(--tl-radius-sm); } /* ═══════════════════════════════════════════════════════════════════════════ * 11 · TESTO CHE NON SI LEGGE * ═══════════════════════════════════════════════════════════════════════════ * * Difetti preesistenti, trovati con `verifica-ui/contrasto.mjs`. Non sono * questione di gusto: sotto 3:1 il testo non si legge, sotto 1.5:1 non si vede * proprio, e per accorgersene bisogna sapere in anticipo che lì qualcosa * doveva esserci. Le soglie sono quelle delle WCAG 2.2, criterio 1.4.3. */ /* Il contatore della paginazione — «1-0 di 0», «21-40 di 137». `sarida.css` * lo dichiara `color:#E7E7E7` in grassetto, cioè grigio quasi bianco su fondo * bianco: **1,08:1**. È l'unico posto dove si legge quanti risultati ci sono, * ed è invisibile da sempre. */ body .totnav { color: var(--tl-text-muted); font-weight: var(--tl-weight-medium); /* E qui si paga il prezzo di averlo reso visibile: era anche **posizionato * male**, e finché non si leggeva nessuno poteva accorgersene. * `sarida.css` lo mette in assoluto a `margin: 5rem auto` dal bordo del * contenitore — cinquanta pixel, che nel foglio originale cadevano esatti * sotto i bottoni delle pagine (20px di margine + 30 di altezza). Il conto * dava per scontato che il contenitore non avesse spaziatura interna. La * nostra c'è, quindi i bottoni scendono di altrettanto e il contatore * finiva **sotto di loro**, tagliato a metà. Gli si somma la stessa misura. * Si cambia un margine e non `top`/`position`, che il vincolo esclude. */ margin-top: calc(50px + var(--tl-space-2)); } /* `color:orange` scritto negli attributi style di 35 pagine. Arancione puro su * bianco fa 1,97:1, e regge il messaggio che si vede più spesso di tutti: * «Inserire criteri ricerca», cioè la spiegazione del perché l'elenco è vuoto. * Diventa il colore d'avviso dei token, che è verificato a 4,5:1. * * Serve `!important` perché lo stile è inline e nessuna specificità lo batte; * si applica solo dove il colore dichiarato è esattamente `orange`, quindi non * tocca nient'altro. */ /* deroga: batte color:orange scritto negli attributi style delle pagine */ body [style*="color:orange"], body [style*="color: orange"] { color: var(--tl-warning-text) !important; } /* La legenda dei tipi di atto, in fondo agli elenchi: «Tipo atto: Preinserimento * / Preavviso / Verbale / Verbale contratto». Sta dentro la barra di * paginazione, che era blu scuro, e `inc/initialization.php` le scrive addosso * `color:#fff` nell'attributo style. Schiarita la barra, la legenda è rimasta * bianca su chiaro: **1,06:1, cioè non c'è più**. Sette pagine, tutte del * blocco verbali, e la legenda è l'unica cosa che spiega quelle icone. * * Si riporta al colore del testo solo dentro la barra: il bianco altrove — * barra laterale, pulsanti pieni, intestazioni scure — resta bianco. * * Lo stesso vale per la legenda delle rateizzazioni (`mgmt_installments.php`), * che scrive `color:white` — la parola, non il codice — e **sulla barra * stessa**, non su un elemento dentro. Servono quindi due forme del selettore: * l'elemento che porta l'attributo e i suoi discendenti. */ /* deroga: batte color:#fff e color:white scritti negli attributi style delle pagine */ body .table_label_H [style*="color:#fff"], body .table_label_H [style*="color: #fff"], body .table_label_H [style*="color:#FFF"], body .table_label_H [style*="color:white"], body .table_label_H [style*="color: white"], body .table_label_H[style*="color:#fff"], body .table_label_H[style*="color: #fff"], body .table_label_H[style*="color:#FFF"], body .table_label_H[style*="color:white"], body .table_label_H[style*="color: white"], body .table_label_H[style*="color:white"] *, body .table_label_H[style*="color: white"] * { color: var(--tl-text) !important; } /* La targa in fondo alla cella «Dati atto». Dieci pagine la scrivono così: * * … 02/07/2026 - 08:30 FA123GH 🚗 * * Il testo scorre, la targa è ancorata a destra, e niente le tiene separate: * stavano larghe perché a 10px la data misurava novanta pixel e la targa * sessanta, dentro una cella da centonovantotto. A 13px diventano centodieci e * settantasei, e **la targa finisce sopra l'ora**. * * La posizione non si può toccare — è il vincolo in cima al file, ed è anche * scritta nell'attributo style. Ma si può togliere spazio al testo che scorre: * riservando a destra la fascia dove vive la targa, la data va a capo prima di * arrivarci invece di finirle sotto. La cella ha altezza automatica, quindi * cresce di una riga e non rompe niente. * * `:has()` limita la regola alle celle che quella targa ce l'hanno davvero. */ body .table_caption_H:has(> span[style*="position:absolute"]) { padding-inline-end: 92px; } /* La cella cresce di una riga, e fin qui è quello che volevamo. Il guaio è che * cresce **da sola**: le celle accanto restano a una riga e sotto di loro * resta una fascia vuota alta ventitré pixel, che fa sembrare la riga slittata * anche quando non lo è. `layout.mjs` lo segnalava come riga sfalsata su dieci * elenchi. * * Si pareggia l'altezza minima di tutte le celle dell'elenco che contiene la * targa. **Non costa un pixel**: la riga è già alta due righe per via della * cella con la targa, e negli elenchi che hanno questo schema ce l'hanno tutte * le righe. Si riempie il vuoto, non si aggiunge spazio. */ body div:has(> .table_caption_H > span[style*="position:absolute"]) > .table_caption_H { min-height: calc(2 * 1.4 * var(--tl-text-sm) + 2 * var(--tl-space-2) + 1px); }