/* TEMA: Indice — massima densita' per chi vive nella griglia tutto il giorno. Monocromo, un solo accento blu-petrolio desaturato, niente serif. Griglia editoriale condivisa (grid-editorial.css) in versione compatta. */ @import url("layout-structure.css"); @import url("gestionale-immobiliare.css"); @import url("grid-editorial.css"); @import url("filter-editorial.css"); :root { /* Il sans di default del tema, al TOKEN di scala (§4 livello 1): DevExpress alimenta da qui il font di OGNI .dxbl-text-edit (valori della scheda + caselle fuori-form) e lo dichiara sull'input, che nessun contenitore raggiunge (§8.43) → senza, rende Segoe di SISTEMA. Le regole font-family !important piu' in basso vincono comunque (chrome/griglia/menu). Nota lunga e misure in theme-repertorio.css (§26.7 punto 10). */ --dxds-font-family-sans-serif: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif; /* Icone dei titoli di sezione a TINTA UNITA = teal del titolo #3b7991 (--dxds-primary-90). Catena filter dal solver su canvas, scarto 3.0. Meccanismo in layout-structure.css. */ --icon-tint-filter: brightness(0) invert(0.553) sepia(0.917) saturate(8.83) hue-rotate(161deg) brightness(0.603) contrast(0.618); /* --- Colore: rampa petrolio (hue 197) desaturata --- */ --dxds-primary-10: #ebf2f4; --dxds-primary-20: #d7e6ec; --dxds-primary-30: #c1dbe5; --dxds-primary-40: #accfdd; --dxds-primary-50: #96c2d4; --dxds-primary-60: #7eb5cb; --dxds-primary-70: #65a6c0; --dxds-primary-80: #4791af; --dxds-primary-90: #3b7991; --dxds-primary-100: #377086; --dxds-primary-110: #306174; --dxds-primary-120: #275061; --dxds-primary-130: #214350; --dxds-primary-140: #1a353f; --dxds-primary-150: #142830; --dxds-primary-160: #0e1c21; --dxds-primary-170: #081114; /* --- Spaziatura compressa: densita' massima --- */ --dxds-spacing-160: 0.625rem; --dxds-spacing-200: 0.875rem; /* --- DIMENSIONE DEL CARATTERE: +1px su tutte le superfici --- Indice nasce come il tema denso, ma il corpo era troppo piccolo da leggere. ⚠️ NON esiste una manopola sola: servono QUATTRO leve, e le due che c'erano qui prima ne governavano solo una parte (misurato superficie per superficie). --bs-body-font-size -> body, voci di menu, linguette 14 -> 15 --dxbl-grid-font-size -> celle della griglia 14 -> 15 (piu' sotto) --dxds-font-size-140 -> bottoni del ribbon, filtro 12 -> 13 -> 14 ⚠️ e ANCHE le voci del menu laterale, che il primo censimento attribuiva a --bs-body-font-size: quella vale 15px mentre il menu ne rende 14, quindi non e' lei a governarlo. Misurato, non deducibile dai nomi. .dxbl-grid-header-content -> intestazioni di griglia 11 -> 12 (piu' sotto) ⚠️ --dxds-font-size-base-md sembra la manopola del body ma NON lo e': vale 12px mentre il body ne rende 14, perche' la regola del foglio Bootstrap (--bs-body-font-size) viene dopo e vince. Alzarla non produce alcun effetto. ⚠️ --dxds-font-size-160 non e' stata trovata su NESSUNA superficie misurata: resta qui, alzata di pari passo, per non lasciare indietro eventuali componenti non ispezionati — ma non aspettarti che muova qualcosa. 💡 L'altezza di riga NON dipende dal font ma dal padding: misurata a 29px prima e dopo, su tutte le prove. L'aumento non costa spazio verticale. */ --bs-body-font-size: 15px; --dxds-font-size-160: 0.875rem; --dxds-font-size-140: 0.875rem; /* --- Griglia editoriale: monocromo cool + righe compatte --- */ --grid-header-color: #5B6672; --grid-line: #D8DCDF; --grid-cell-color: #14171A; --grid-title-color: #14171A; --grid-hover-bg: #E6EEF0; /* Barra delle azioni: la STESSA carta di .app/sidebar/body. */ --toolbar-bg: #EBEDEF; /* Linea sotto la barra: --grid-line (#D8DCDF) scurita di uno scalino HSL, tinta 206 e saturazione invariate -> resta fredda. */ --toolbar-line: #C8CED2; /* Titolo di un box reso dal componente (LayoutBoxGroup / .fl-box-titolo). ⚠️ Non e' un colore nuovo: e' lo STESSO #5B6672 che questo tema gia' da' al titolo del gruppo annidato dentro un box (regola della "terza forma", piu' in basso in questo foglio) — misurato a runtime rgb(91,102,114). Serve dichiararlo come token perche' il componente non ha piu' un .dxbl-group-header da agganciare. Gli altri sei temi lo dichiareranno quando ci passeranno: fino ad allora li' il titolo eredita il colore del testo, e si nota. */ --fl-box-titolo-color: #5B6672; /* --- L'HOVER DEL CHROME: un colore solo per tre superfici (8a sessione) --------- Segnalato dall'utente come hover "fuori tono", ed era letterale: non era il volume a essere sbagliato, era la TINTA. Misurate, le tre superfici usavano tre colori che si muovevano in tre direzioni diverse rispetto al fondo comune #EBEDEF: voce di menu #F4F4F3 (di serie DevExpress) +9/+7/+4 contrasto 1.066 azione barra #F4F4F3 (di serie DevExpress) +9/+7/+4 contrasto 1.066 header griglia --dxds-primary-20 #D7E6EC -20/-7/-3 contrasto 1.090 ⚠️⚠️ IL DIFETTO DEL GRIGIO DI SERIE NON E' LA LUMINOSITA': e' che il BLU sale meno di rosso e verde (+4 contro +9). Il fondo di Indice ha il blu piu' alto di tutti (235/237/239, carta fredda), quindi quel grigio arriva a 244/244/243 — cioe' r=g>b, neutro-CALDO. L'hover cambiava temperatura, ed e' esattamente cio' che l'orecchio chiama "fuori tono". Il petrolio dell'header sbagliava nell'altro verso, saturando. 💡 IL DATO CHE HA RESO OVVIA L'OMOLOGAZIONE: le tre superfici hanno lo STESSO identico fondo — sidebar, barra delle azioni e testata di griglia misurano tutte #EBEDEF. Non e' un'armonizzazione estetica fra contesti diversi: e' lo stesso problema tre volte, e tre valori dove ne bastava uno. ⚠️ NON si e' potuto riusare --grid-hover-bg, che pure e' "il tenue del tema": su questa carta misura -5/+1/+1, cioe' contrasto 1.002 — la soglia dell'INVISIBILE misurata al §22.8. E soprattutto su Indice quella variabile non e' un hover: la consumano la voce di menu SELEZIONATA, la linguetta attiva e la fascia dei titoli di gruppo. Spenderla anche per l'hover farebbe dire la stessa cosa a "sotto il mouse" e a "scelto" (§24.9). 💡 Il valore e' costruito, non scelto: e' il fondo comune con tinta (210) e saturazione INVARIATE e la sola luminosita' alzata di 4 punti HSL — lo stesso metodo con cui il §5 ha scurito le linee di ogni tema restando nella sua temperatura. Risultato +11/+10/+9, contrasto 1.094, e resta FREDDO (246/247/248, b>g>r) invece di virare come faceva il grigio di serie. ⚠️ Si e' scelto di SCHIARIRE e non di scurire, a parita' di forza (l'equivalente scuro sarebbe #E0E3E6, contrasto 1.098): il verso chiaro e' quello che l'utente ha gia' sotto gli occhi da sempre, quindi la correzione si legge come "ora e' intonato" e non come un comportamento nuovo. E non compete con la voce SELEZIONATA, che qui e' un blocco pieno di petrolio. */ --hover-chrome: #F6F7F8; /* L'INCHIOSTRO DEL CHROME: il testo delle azioni in barra (8a sessione). Segnalato dall'utente come "risalta poco", e il file lo aveva gia' previsto: accanto alla regola che colora i pulsanti del ribbon c'era scritto che, se fosse risultato troppo schiarito, il gradino intermedio era "hsl(215,10%,28%) circa #40474F". E' quello, non un numero nuovo: la previsione era gia' stata pagata. ⚠️⚠️ E SOPRATTUTTO NON SI SCURISCE --grid-header-color, che era il valore usato finora. Quella variabile e' il colore delle ETICHETTE D'INTESTAZIONE DI GRIGLIA: ritoccarla per sistemare la barra avrebbe mosso anche quelle, cioe' una manopola sola per due decisioni (§8.33, corollario di manutenzione). Il chrome prende un token suo, e le due cose possono divergere quando serve. 💡 Resta comunque piu' chiaro dei DATI, ed e' voluto: la cella di griglia sta a 17.98 sul bianco. Il chrome deve leggersi bene senza competere con il contenuto. ⚠️ 12a sessione: SCURITO ANCORA a #2C3035 (hsl 215,10%,19%; stesso hue/saturazione freddi, scesa la sola LUMINOSITA' — §5), su richiesta dell'utente ("piu' scuro"). Il contrasto sulla barra sale da 8.02 a 11.32 e RESTA sotto i DATI (inchiostro #161616, 15.42): il chrome si legge meglio senza competere col contenuto. Misurato che gli altri candidati (#33373E 10.18, #25282D 12.6) stavano tutti sotto i dati — scelto quello di mezzo. Il gradino #40474F dell'8a e' storia. */ --chrome-ink: #2C3035; --grid-link-color: #306174; --grid-cell-pad-y: 4px; --grid-cell-pad-x: 10px; } /* --- CHROME IN BAHNSCHRIFT: menu laterale e barra superiore --- Segoe UI e' il default di Windows, cioe' l'assenza di una scelta: il menu era l'unica superficie del tema senza un tratto proprio. Bahnschrift e' il DIN di Windows, il carattere della segnaletica tecnica — geometrico e appena condensato, che e' esattamente il registro di Indice. ⚠️ Verificato INSTALLATO prima di adottarlo, non solo dichiarato: su questa macchina rende 201.23px sulla stringa campione contro i 200.66 di Segoe. E' la trappola del §8.22 — un font Apple dichiarato e mai installato, con getComputedStyle che riportava tranquillamente la dichiarazione — e si smaschera solo confrontando le LARGHEZZE rese. ⚠️ Nella stessa prova "Arial Narrow" risultava presente ma rendeva ESATTAMENTE come sans-serif: stava ricadendo su Arial, non era condensato affatto. Scartato. 💡 La quasi identita' di larghezza con Segoe (+0.3%) e' anche il motivo per cui il cambio e' sicuro: nessuna voce di menu va a capo, la sidebar non va riallargata. ⚠️ Scopato al CHROME e non a tutta l'app: restano in Segoe le etichette del form e le celle di griglia, che stanno accanto ai DATI e devono restare neutre. E' una divergenza VOLUTA — chrome e contenuto con due voci diverse — non una copertura incompleta. ⚠️ .xaf-navmenu e .dxbl-ribbon .dxbl-btn vanno nominati esplicitamente: la regola tipografica generale piu' in basso li elenca uno per uno, e una dichiarazione su un antenato perderebbe contro la loro (§8.18). Il bottone del ribbon sale a (0,2,0) per battere il .dxbl-btn (0,1,0) di quella regola. ⚠️⚠️ `.xaf-sidebar *` E' DELIBERATO, non pigrizia. Due ragioni, entrambe misurate: 1. DevExpress dichiara font-family DIRETTAMENTE su .dxbl-treeview-item-container, e una dichiarazione diretta batte sempre una ereditata a prescindere da ordine e specificita': con il solo .xaf-sidebar il menu restava a Segoe mentre il ribbon era gia' convertito. Risalendo la catena il salto si vede al pixel — item-content in Bahnschrift, il suo figlio item-container di nuovo in Segoe. 2. Il menu ha DUE stili commutabili a runtime (§20, azione "Menu"): a pannelli usa .dxbl-accordion-*, a indice .dxbl-treeview-*, e in ciascuno i selettori dell'altro hanno ZERO occorrenze. Nominarli uno per uno vuol dire mantenere due liste e scoprire il buco solo dopo aver commutato. Qui la scopatura e' gia' stretta — il menu laterale — quindi l'universale non fa danni fuori. */ .xaf-sidebar, .xaf-sidebar *, .xaf-navmenu, .dxbl-ribbon, .dxbl-ribbon .dxbl-btn, .dxbl-ribbon .dxbl-tabs-item, .dxbl-ribbon .dxbl-tabs-text-overflow { font-family: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; } /* ⚠️⚠️ IBM PLEX SANS AL POSTO DI ARCHIVO 85% (8a sessione) — ed e' caduto il font-stretch. Chiesto dall'utente: una voce sola per il tema, chrome e contenuto sulla stessa famiglia. ⚠️ IL `font-stretch: 85%` E' STATO TOLTO, NON LASCIATO LI'. IBM Plex Sans non ha l'asse di larghezza — la sua @font-face dichiara `font-stretch: 100%` e basta — quindi quella riga sarebbe stata perfettamente INERTE: applicata, presente nel CSSOM, e senza alcun effetto (§8.17). Una regola che non fa niente ma sembra farlo e' peggio di nessuna regola, ed e' la stessa ragione per cui in 3a sessione fu tolto il `font-family: "Segoe UI Semibold"` da Dossier. 💡 E QUI CADE ANCHE LA RAGIONE DELL'85%, non solo la sua possibilita'. Quel valore aveva DUE motivi (§24.5): il registro "segnaletica tecnica", e l'evitare la collisione con Nitido, che usa la stessa famiglia a larghezza normale. Passando a Plex il secondo motivo sparisce da se' — Archivo resta di Nitido e di nessun altro — quindi restava solo il gusto, e l'utente ha scelto la larghezza piena. ⚠️ Scartata "IBM Plex Sans Condensed", che pure avrebbe tradotto in Plex l'idea "una famiglia, due larghezze": e' una famiglia SEPARATA e NON variabile (pesi statici 400/600/700), cioe' sei file invece di uno, e romperebbe la regola per cui tutte le famiglie spedite da questa app sono variabili (§24.1). 💡 Misurato prima di decidere, sulla voce di menu piu' lunga a 14px: Archivo 85% 94.53 contro Plex 108.8, cioe' +15.1%. Il chrome si ALLARGA, che e' il verso rischioso — ma la voce piu' lunga resa e' 97.8px su 270 di sidebar, quindi il margine non e' mai stato in discussione: il vincolo era estetico, non di spazio. */ /* ═══ STORIA, NON STATO ATTUALE ═══ Quanto segue descrive il chrome com'era fino alla 7a sessione compresa — Archivo condensato all'85%. Dall'8a e' IBM Plex Sans a larghezza piena, vedi la nota qui sopra. Si tiene perche' contiene le MISURE e il ragionamento che hanno portato all'85%, e se un giorno si volesse tornare a un chrome condensato quei numeri sono gia' pagati. Va letto al passato. ⚠️ ARCHIVO AL POSTO DI BAHNSCHRIFT, spedito dall'app (§24). Bahnschrift e' il DIN di Windows: non si puo' incorporare (licenza Microsoft), quindi il registro "segnaletica tecnica" del chrome esisteva solo su questa macchina. 💡 IL font-stretch NON E' UN GUSTO, e' l'unica cosa che separa questo chrome dal tema Nitido, che usa la STESSA famiglia. Archivo e' variabile a due assi, quindi la distinzione si ottiene senza scaricare una seconda famiglia. Misurato a 14px sulle voci di menu reali: Bahnschrift 360.75 · Archivo 100% 356.99 (−1.0%, sarebbe stato un rimpiazzo metricamente esatto) · Archivo 85% 312.31 (−13.4%). ⚠️ Si e' scelto 85% e non 100% proprio PER non ricreare la collisione che il §23.6 aveva evitato dando Archivo a Nitido: li' e' il testo a larghezza normale, qui e' il chrome condensato. Sono due voci, non una riusata due volte. 💡 Il −13.4% e' nel verso sicuro: il chrome si stringe, quindi nessuna voce puo' andare a capo e la sidebar guadagna spazio invece di perderne. ⚠️ Il font-stretch resta valido anche sul fallback: Bahnschrift e' a sua volta variabile in larghezza, quindi se il woff2 non fosse servito il chrome resterebbe condensato invece di saltare a una larghezza diversa. */ /* Le altre due leve della dimensione del carattere (vedi la nota nel :root). ⚠️ --dxbl-grid-font-size va messa sulla GRIGLIA, non sul :root: DevExpress la definisce lei stessa su .dxbl-grid, e una definizione locale batte sempre il valore ereditato da un antenato — impostarla sul :root non arriverebbe mai. */ .dxbl-grid { --dxbl-grid-font-size: 15px; } /* --- INTESTAZIONI DI GRIGLIA rese come i TITOLI DI GRUPPO del form --- Le due superfici dicono la stessa cosa — il nome di un dato — e il §21.8 aveva gia' allineato il titolo di gruppo ALL'IDIOMA delle intestazioni di griglia (11px/650 maiuscolo spaziato). Qui si chiude il cerchio dall'altro capo: l'intestazione prende anche il colore, il fondo e la barra del titolo di gruppo. ⚠️ Tutto scopato a questo tema e NON messo in grid-editorial.css, che e' condiviso: i titoli-sezione esistono solo su Indice (su Repertorio e Dossier i gruppi sono ancora riquadri), quindi portare questo trattamento nel foglio comune darebbe agli altri due temi la meta' di un disegno che non hanno. ⚠️ Il font torna a 11px, cioe' ANNULLA il ritocco a 12 del §21.7: quello era stato deciso per leggibilita' quando le intestazioni erano un elemento a se', ma "uguale ai titoli di gruppo" vuol dire 11. Se la leggibilita' dovesse pesare, il numero da rialzare e' questo — sapendo che le due superfici divergono di nuovo. ⚠️ Il COLORE resta --grid-header-color (il grigio freddo di sempre) e NON passa all'accento come nel titolo di gruppo: provato e rifiutato. Le due superfici non sono simmetriche — un titolo di gruppo e' uno per sezione, un'intestazione di colonna e' una per colonna, e su quindici colonne l'accento smette di essere un segnale e diventa il colore della griglia. Dell'idioma del titolo di gruppo qui restano tipografia, fondo e barra; il colore del testo e' l'unica cosa che resta indietro, apposta. */ .dxbl-grid-header-content { font-size: 11px !important; color: var(--grid-header-color) !important; } /* Il fondo va sul THEAD, non sul TH. ⚠️ Misurato: il th e' GIA' trasparente, a dipingere il bianco e' il thead — e sotto di lui la catena e' opaca per altri quattro livelli (table, scroll-viewer-content, scroll-viewer, grid), tutti bianchi. E' il motivo per cui un "header trasparente" non avrebbe prodotto NULLA: sotto sarebbe rimasto comunque il bianco della griglia. Si dipinge invece, e l'effetto e' quello voluto senza dover bucare cinque livelli. ⚠️ Tinta: --toolbar-bg, cioe' LA CARTA DEL TEMA — lo stesso fondo di .app, sidebar, body e barra delle azioni (§19). L'header smette di essere una fascia colorata e diventa il proseguimento della pagina: stacca solo verso il BIANCO delle righe, che e' dove la distinzione serve davvero. ⚠️ Percorso completo, perche' le tappe scartate dicono piu' della scelta finale: --toolbar-bg (carta) -> l'header si fonde con la pagina <- ATTIVA --grid-hover-bg (#E6EEF0) -> la tinta della voce di menu selezionata: coerente col resto dell'app, ma verso la carta dista -5/+1/+1 su 255, cioe' non stacca, e verso il bianco pesa --dxds-primary-20 (#d7e6ec) -> staccava da entrambe, ma introduceva in griglia un azzurro che nel resto dell'app non esiste Le ultime due sono state provate a video e giudicate PESANTI: su quindici colonne una fascia colorata compete con i dati, ed e' la griglia il posto dove il dato deve vincere. 💡 Resta valido il legame creato allora fra la voce di menu attiva e --grid-hover-bg: quel token continua a dire "elemento in evidenza" (hover di riga, voce selezionata), solo che l'header non e' piu' fra i suoi clienti. */ .dxbl-grid-table thead { background: var(--toolbar-bg) !important; } /* La cella d'intestazione di una COLONNA FISSA (ColumnFixedPosition, §36) ridipinta con la carta del tema, come il resto dell'header. Stessa diagnosi di Repertorio: il thead dipinge la carta e le celle non fisse la lasciano vedere (trasparenti), ma la serie DevExpress da' alla cella fissa un fondo OPACO proprio (#FFFFFE) che, stando sul TH, copre il thead — su carta #EBEDEF la colonna fissa restava una lastra bianca. → si ridipinge la sola cella fissa dell'HEADER con --toolbar-bg (il fondo del thead); la cella fissa del CORPO resta opaca, li' serve a coprire le righe che scorrono. ⚠️ Stessa decisione del thead qui sopra: se cambia quella tinta, cambia questa. ⚠️ Nel tema e non nel condiviso: il difetto si vede solo dove l'header e' carta != bianco (qui e Repertorio); forzare --toolbar-bg nel condiviso farebbe stonare i temi con header bianco. L'hover resta a --hover-chrome (:hover ha specificita' maggiore). */ .dxbl-grid-table thead th.dxbl-grid-fixed-cell { background-color: var(--toolbar-bg) !important; } /* FOOTER della griglia (barra del pager) sulla stessa carta dell'header. Simmetrica del thead: la fascia .dxbl-grid-bottom-panel e' trasparente e mostra il fondo bianco di .dxbl-grid, quindi appariva bianca mentre l'header e' carta. Header e footer sono le due fasce che racchiudono le righe → stessa carta --toolbar-bg, staccano insieme verso il bianco delle righe. I controlli interni (page-size, input) restano col loro fondo. ⚠️ Stessa tinta del thead; nel tema e non nel condiviso (i temi a foglio bianco hanno gia' footer = header, i dark sono scuri di serie). */ .dxbl-grid .dxbl-grid-bottom-panel { background: var(--toolbar-bg) !important; } /* Via il contorno grigio della griglia. ⚠️ Non e' un bordo dell'header: e' il bordo di .dxbl-grid, 0.8px #D3D3D2 su tutti e QUATTRO i lati — lo si nota attorno all'intestazione solo perche' li' passa accanto a una fascia ora colorata. Spegnendolo sparisce il contorno dell'INTERA griglia, che resta comunque leggibile: la delimitano il proprio fondo bianco, la barra d'accento in testa e le linee di riga. ⚠️ Si spegne il COLORE, non il bordo (§21.8): con "border: none" la griglia perderebbe 0.8px per lato e tutto il contenuto slitterebbe. Con un colore la geometria resta identica al pixel. ⚠️⚠️ MA NON BASTA "transparent", ed e' una trappola nuova: un bordo trasparente non e' un bordo assente. Con background-clip: border-box — il default — il FONDO dell'elemento si estende SOTTO il bordo, quindi attraverso un bordo trasparente si vede il fondo dell'elemento stesso. Qui .dxbl-grid ha fondo BIANCO, e il risultato era una cornice bianca da 0.8px tutt'intorno, visibilissima sopra l'header azzurro. Misurato: .dxbl-grid parte a x=286.0 e il thead a x=286.8 — quei 0.8px di scarto sono esattamente il bordo, e li' si vedeva il bianco della griglia. → si dipinge il bordo del colore del fondo dell'header, cosi' sparisce dove confina con lui. Il bordo prosegue anche ai lati e in fondo, dove resta una linea tenue contro il bianco delle righe: e' il prezzo, ed e' un contorno discreto invece di una cornice bianca. ⚠️ DEVE SEGUIRE IL FONDO DELL'HEADER, sempre: sono la stessa decisione scritta in due punti. Quando l'header e' passato da --grid-hover-bg a --toolbar-bg, lasciare qui il vecchio valore avrebbe fatto RICOMPARIRE la cornice — stavolta azzurrina invece che bianca. Se un giorno si ritocca il fondo dell'header, questo va con lui. 💡 L'alternativa era azzerare la larghezza, ma quella slitta il contenuto di 0.8px per lato — la ragione per cui il §21.8 prescrive di agire sul colore. */ .dxbl-grid { border-color: var(--toolbar-bg) !important; } /* La barra d'accento sotto l'intestazione, al posto della linea di riga. ⚠️ Sostituisce il border-bottom da 1px --grid-line che grid-editorial.css mette su th.dxbl-grid-header: se si aggiungesse senza sostituirlo resterebbero DUE linee sovrapposte (§8.1, la stessa trappola dei separatori nativi). */ .dxbl-grid-table th.dxbl-grid-header { border-bottom: 3px solid var(--dxds-primary-90) !important; } /* L'HOVER sulla cella di intestazione, riportato in famiglia. Di serie DevExpress la schiarisce con un grigio NEUTRO: finche' l'header era bianco passava inosservato, ma su un fondo azzurrino stona — due temperature diverse sulla stessa superficie. Si sostituisce con il gradino successivo della rampa dell'accento, cosi' il passaggio del mouse scurisce di un passo restando nella stessa famiglia. ⚠️ Va sul TH e non sul thead: il fondo a riposo lo dipinge il thead (una superficie sola), ma l'hover deve accendere la SINGOLA colonna sotto il mouse. Il th e' sopra il thead nell'ordine di pittura, quindi lo copre dove serve senza toccare il resto. ⚠️ Il grigio di serie non e' stato misurato: eseguire JS nel browser pane perde lo stato di hover (matches(':hover') torna false subito dopo), ed e' la stessa trappola del §8.29 sul fuoco. Qui non serviva conoscerlo — bastava scavalcarlo — ma se un giorno servisse il valore, la via e' la classe simulata o la lettura del CSSOM. 💡 Non si tocca l'hover di RIGA (--grid-hover-bg su tbody): quello segnala "record sotto il mouse" ed e' un'altra cosa dal "colonna ordinabile sotto il mouse". */ /* ⚠️ Era --dxds-primary-20 (#D7E6EC): un petrolio schiarito, cioe' la terza direzione dei tre hover del chrome. Ora prende --hover-chrome come il menu e la barra — vedi la nota estesa nel :root. */ /* ⚠️⚠️ SI ILLUMINA SOLO CIO' CHE RISPONDE AL CLIC (07/08/2026, §110). Il selettore diceva `th.dxbl-grid-header`, cioe' OGNI testata: si accendevano anche la casella di selezione, la colonna dei comandi e le colonne aggiunte da codice, che non sono associate a nessun dato e al clic non fanno niente. Misurato sulla lista immobili: clic su PROPRIETARIO -> nessun ordinamento, ordine dei dati identico; su AGENTE -> ordina. 📌 Non e' un cambio di rotta: e' l'intenzione che il commento qui sopra dichiarava gia' ("colonna ORDINABILE sotto il mouse"), scritta finalmente anche nel selettore. ⚠️ La specificita' sale da 3 a 4 pseudo-classi/classi: continua a vincere dove vinceva prima, e sulle testate non ordinabili non si applica piu' affatto — li' resta il fondo a riposo, che e' quello che devono avere. Notturno non ha mai avuto questa regola. */ .dxbl-grid-table th.dxbl-grid-header.dxbl-grid-header-sortable:hover { background: var(--hover-chrome) !important; } /* =================================================================================== L'HOVER DEL CHROME, OMOLOGATO — menu (in due stili), barra delle azioni, header =================================================================================== Le tre superfici stanno tutte su #EBEDEF e ora dicono "sotto il mouse" con lo stesso colore. Il valore e il perche' stanno nel :root; qui ci sono solo i selettori. */ /* Barra delle azioni. Il fondo di serie era il grigio caldo #F4F4F3. */ .xaf-ribbon .dxbl-btn-toolbar .dxbl-btn:not(.dxbl-disabled):hover { background: var(--hover-chrome) !important; } /* Menu, stile "a pannelli". ⚠️⚠️ E QUI SERVONO DUE SELETTORI, non uno: dentro l'intestazione di ogni voce — anche di quelle FUORI dai raggruppamenti — c'e' un `button.dxbl-btn` col chevron che e' FRATELLO del contenuto, non un suo discendente. Dipingendo il solo `.dxbl-accordion-item-content` l'hover uscirebbe a pezzi: una parte di riga nel colore nuovo e la parte del chevron nel grigio di serie, che e' precisamente il difetto trovato su Notturno nell'8a sessione. Si dipinge l'HEADER, che e' largo quanto la voce, e si spegne il fondo proprio del pulsante. 💡 Il contenuto lo si dipinge comunque: le foglie DENTRO un raggruppamento non stanno in un group-header, quindi il solo selettore dell'header le lascerebbe fuori. Due selettori coprono due strutture diverse, non due strati dello stesso elemento. */ .xaf-sidebar .dxbl-accordion-group-header:hover, .xaf-sidebar .dxbl-accordion-item-content:hover { background: var(--hover-chrome) !important; } /* Menu, stile "a indice". ⚠️ E' un COMPONENTE DIVERSO (§20): i selettori dell'accordion qui hanno zero occorrenze. La leva pulita e' la variabile di componente, che DevExpress definisce su `.dxbl-treeview` e che va impostata li' e non su un antenato (§8.21); il `:hover` sul contenuto copre la parte di riga che la variabile non raggiunge, cioe' quella occupata dall'espansore. */ .xaf-sidebar .dxbl-treeview { --dxbl-treeview-item-hover-bg: var(--hover-chrome); } .xaf-sidebar .dxbl-treeview-item > .dxbl-treeview-item-content:hover { background: var(--hover-chrome) !important; } /* ...e nessun pulsante della sidebar si porta un fondo suo, in nessuno stato: chevron, espansore dell'albero e i bottoni della casella di filtro. Elencarli a uno a uno significherebbe mantenere due liste per due stili di menu e scoprire il buco dopo aver commutato (§8.38). */ .xaf-sidebar .dxbl-btn, .xaf-sidebar .dxbl-btn:hover, .xaf-sidebar .dxbl-btn:active { background-color: transparent !important; } /* ⚠️ PROVATA E SCARTATA: una pastiglia colorata dietro al solo testo di ogni intestazione, per imitare alla lettera il titolo di gruppo (che ce l'ha). Due motivi, entrambi emersi solo DOPO averla messa a video: 1. Non si vedeva. La tinta era --grid-hover-bg su fondo carta: -5/+1/+1 su 255, cioe' contrasto 1.00. L'anteprima disegnata prima la mostrava "diversa" perche' nessuno aveva calcolato la distanza fra i due colori — anche un mockup va misurato. 2. Non era aderente al testo. Lo span che porta il nome della colonna e' largo 162px su 200 di colonna (se lo prende tutto), quindi la pastiglia vestiva la colonna e non la parola, che e' l'opposto dell'effetto voluto nel form. Il disegno regge senza: l'intestazione si distingue per FONDO, colore d'accento e barra. Se un giorno la si volesse rimettere servono entrambe le correzioni — una tinta piu' marcata E un width: fit-content sullo span. Struttura del th per riferimento, mappata a runtime: DXBL-GRID-HEADER-CONTENT > SPAN (testo, senza classe) + SPAN.dxbl-grid-sort-asc (freccia) + DIV.dxbl-grid-filter-menu-funnel-btn (imbuto) */ /* VALORI DEI CAMPI nella scheda: 13 -> 15px, come le celle di griglia. Le ETICHETTE restano a 13 (richiesta esplicita) — e si puo' fare con precisione perche' le due cose hanno variabili SEPARATE: --dxbl-text-edit-font-size -> il valore dentro la casella (questa) --dxbl-fl-caption-font-size -> l'etichetta (NON toccata) Ne esce una gerarchia voluta: etichetta piu' quieta del dato che introduce. ⚠️ VA MESSA SULLA CASELLA, non sul form. DevExpress definisce questa variabile sulla .dxbl-text-edit stessa, e una definizione locale batte sempre il valore ereditato da un antenato: impostarla su .dxbl-fl e' PERFETTAMENTE INERTE (provato, 13px identici). Stessa trappola di --dxbl-grid-font-size qui sopra — le variabili "di componente" di DevExpress vanno impostate al livello del componente. ⚠️ Inerte anche la variante --dxbl-text-edit-font-size-m, per lo stesso motivo. ⚠️ Lo scoping a .dxbl-fl e' OBBLIGATORIO: le stesse classi .dxbl-text-edit vivono anche FUORI dal form (filtro della griglia, ricerca del menu) e li' non vanno toccate. Verificato a runtime: quelle restano a 13px. 💡 Copre anche l'area di testo (Descrizione): il memo e' una .dxbl-text-edit annidata, quindi eredita senza bisogno di una regola propria. ⚠️ La CASELLA DI SPUNTA e' deliberatamente esclusa: li' non c'e' testo, e il suo font-size governa la dimensione del segno di spunta — sarebbe geometria, non caratteri. (Le caselle non sono mai state stilate: vedi §11 del LAYOUT-CONTEXT.) */ .dxbl-fl .dxbl-text-edit { --dxbl-text-edit-font-size: 15px; /* Meno vuoto sopra e sotto il testo: 5 -> 3px. La casella passa da 31.6 a 27.6px e la scheda da 442 a 422. Coerente con Indice, che e' il tema denso. ⚠️ Qui il padding NON e' inerte, al contrario del caso delle linguette (§17.4): nessuna regola impone un'altezza all'input, quindi l'altezza e' il RISULTATO di line-height + padding (20+3+3) e ridurre il padding stringe davvero. ⚠️ Il "height: 30px" che getComputedStyle riporta sull'input NON e' una dichiarazione: e' il valore USATO, calcolato dal layout. Scambiarlo per un vincolo porta a concludere che il padding non serva a niente — e a cercare una leva che non esiste. ⚠️ NON ridurre anche --dxbl-text-edit-line-height: provato a 18px, i campi SENZA bottoni interni scendono a 23.6 ma il lookup Categoria resta a 25.6, perche' il bottone interno (18px) fa da pavimento. I campi si disallineano fra loro. Il padding invece li stringe tutti allo stesso modo. Se servisse ancora piu' stretto la strada e' 2px (casella 25.6): provato, i bottoni interni ci stanno ancora. */ --dxbl-text-edit-padding-y: 3px; } /* ...E I BOTTONI DELLA BARRA DI UNA GRIGLIA SEGUONO LA CASELLA — 31,6 -> 27,6 (19/08, §155). Sua segnalazione guardando «Form con griglie»: «i button delle action sopra le griglie sono piu' alti della casella di test del search che si trova sempre nella stessa toolbar». ⚠️ IL DIFETTO NASCE DALLA REGOLA QUI SOPRA, non dai bottoni: quel `--dxbl-text-edit-padding-y` e' agganciato a `.dxbl-fl`, e la barra di una griglia annidata sta DENTRO `.dxbl-fl` — cosi' la ricerca si prende un padding pensato per i CAMPI DEL FORM (20+3+3+1,6 = 27,6) mentre i bottoni restano al default DevExpress (20+5+5+1,6 = 31,6). Quattro pixel di scarto. 📌 E' un difetto SOLO DI INDICE, misurato cambiando tema davvero: su Nitido bottoni e casella stanno tutt'e due a 31,6, perche' nessun altro tema tocca quel token. Percio' la cura sta QUI e non in layout-structure.css: la' pareggerebbe Indice e SPAIEREBBE tutti gli altri. ⚠️⚠️ IL BERSAGLIO E' `.dxbl-btn.dxbl-btn-secondary`, NON `.dxbl-toolbar-btn`. Provata prima la via ovvia e MISURATA sbagliata: `.dxbl-toolbar-btn` sta anche sui CONTENITORI adattivi e sui bottoni split, che hanno padding 0 — dandogliene 3+3 la riga cresce e tutti si allineano al piu' alto, cioe' i bottoni a video passavano da 31,6 a **37,6**. Il contrario di quanto chiesto. Con il bersaglio stretto vanno tutti a 27,6, contenitori compresi, che seguono. 💡 *Una classe che sta sia sul comando sia sulla scatola che lo contiene non e' un bersaglio: e' due bersagli con lo stesso nome.* ⚠️ Scartata anche `align-items: center` sull'item: schiaccia un bottone-icona a 21,6. ⚠️ Il padding verticale si scrive PER ESTESO: `--dxbl-btn-padding-y` e' inerte (§ la nota in theme-notturno.css), governa il longhand `padding-block`. 📌 I 3px sono gli stessi della casella qui sopra, e i due numeri vanno tenuti insieme: chi cambia il padding della casella cambia anche questo, o lo scarto torna. */ /* ⚠️⚠️ ...E IL PADDING DA SOLO NON BASTA: SERVE ANCHE UN PAVIMENTO (21/08, §176). Sua segnalazione: «nella toolbar degli allegati le action risultano troppo basse - deformate», e «la misura giusta e' quella dei consensi». Le due barre stanno nella stessa linguetta e hanno UNA SOLA differenza: i Consensi hanno la casella di ricerca. 🔑 MISURATO, non dedotto: nascosta la casella nella barra Consensi, i suoi bottoni scendono da 27,6 a 21,6 ESATTI, cioe' identici a quelli degli Allegati; rimessa la casella, tornano a 27,6. La casella e' l'UNICA cosa che li teneva su — li stira perche' `.dxbl-toolbar-group` ha `align-self: stretch` e la riga prende la misura del suo elemento piu' alto. ⚠️⚠️ IL PERCHE' STANNO SOTTO: QUI I BOTTONI SONO SOLO-ICONA. Dentro c'e' una sola `img.xaf-toolbar-item-icon` da 14x14 e NESSUN testo, e senza testo non c'e' il pavimento del `line-height`: il contenuto vale 14 e non 20. 14 + 3 + 3 + 1,6 = 21,6. 📌 Il §155 aveva misurato una barra con bottoni TESTUALI (New/Link/Unlink/Delete) — la' il pavimento da 20 c'era davvero, e i suoi conti tornavano. Qui no. 📌 E il padding qui sopra NON e' la causa, e' un aggravante: spegnendolo in pagina gli Allegati fanno 25,6 (14+5+5+1,6), non 27,6. Il difetto c'era gia' prima del §155. 💡 *Un pareggio ottenuto da un elemento che puo' sparire non e' un pareggio: e' una coincidenza con una scadenza.* Legare l'altezza alla casella voleva dire perderla il giorno in cui la casella se ne va — ed e' successo, togliendola dai Consensi. ✅ LA CURA E' UN PAVIMENTO, non altro padding: `min-height` con `box-sizing: border-box` puo' solo ALZARE chi sta sotto la misura, quindi non gonfia mai la riga. Il valore e' scritto come l'ARITMETICA del bottone testuale di questo tema — il `line-height` piu' il padding qui sopra piu' i due bordi — cosi' resta legato ai 3px invece di essere un terzo numero da tenere a mano: 20 + 3 + 3 + 1,6 = 27,6. ❌ SCARTATA la strada elegante — ridare il pavimento con un `::before` alto `1lh` — che sarebbe stata valida per tutti i temi senza numeri: MISURATA, su Nitido gonfia la barra Consensi da 31,6 a 39,6. Lo pseudo-elemento diventa un flex item e la riga cresce con lui. 💡 *La regola piu' generale non e' la piu' sicura: e' solo quella che sbaglia in piu' posti.* 📌 Per lo stesso motivo la regola sta QUI e non in `layout-structure.css`: il bersaglio e' l'altezza del bottone testuale, che vale 27,6 su questo tema e 31,6 sugli altri. Un pavimento unico a 27,6 alzerebbe **Ardesia** di 2px (v. il blocco gemello la'). ✅ GIRATI TUTTI E SETTE I TEMI su questa scheda, misurando le due barre con e senza casella: si muovono solo Indice (21,6 -> 27,6) e Ardesia (25,6 -> 31,6, curato nel suo foglio). Nitido, Repertorio, Vespro, Ampio e Notturno restano a 31,6 — li' l'icona vale 20 o 22, cioe' e' gia' >= al `line-height`, e il pavimento e' un no-op. */ .dxbl-fl .nested-toolbar .dxbl-btn.dxbl-btn-secondary { padding-top: 3px; padding-bottom: 3px; min-height: calc(1lh + 3px + 3px + 1.6px); } /* --- IL CAMPO PRENDE UN FONDO: UNA VASCHETTA APPENA GRIGIA ------------------------- Chiesto dall'utente ("una leggera variazione del bianco verso il grigio"), e sul contenuto del campo, non sulla scatola che lo contiene. Prima: campo #FFFFFE su scatola #FFFFFE — bianco su bianco, a distinguerlo c'era il solo bordo. 💡 IL COLORE E' RICAVATO, NON SCELTO. La famiglia fredda di questo tema e' hue 210 con saturazione ~11%: --toolbar-bg #EBEDEF (il chrome) e --hover-chrome #F6F7F8 stanno entrambi li', e differiscono per la sola luminosita' (metodo del §5). #F4F5F6 e' lo stesso hue e la stessa saturazione, portati a L 96%. 💡💡 E LA MISURA E' STATA SCELTA CONFRONTANDO LO SCARTO CON UN RIFERIMENTO CHE IL TEMA GIA' USA, non guardando la tinta (§23.5b): l'hover del chrome vale 11/10/9 sul proprio fondo — cioe' e' lo scarto che questo tema considera "visibile ma quieto". #F4F5F6 dista -11/-10/-8 dal foglio, quindi da' al campo esattamente lo stesso peso percettivo che l'hover ha sul chrome. Scala misurata, per chi volesse muoverla: #F7F8F9 -8/-7/-5 appena percettibile #F4F5F6 -11/-10/-8 <- ATTIVO, = lo scarto dell'hover del chrome #F0F2F4 -15/-13/-10 #EBEDEF -20/-18/-15 il chrome stesso: il campo diventa una fascia ⚠️ Il valore resta leggibilissimo: 16.58 sul nuovo fondo (era 18.09 sul bianco). ⚠️⚠️ SI IMPOSTA LA VARIABILE E NON background-color, e gli stati vanno resi DISGIUNTI (§8.44). Su questo controllo DevExpress esprime ANCHE gli stati attraverso la stessa --dxbl-text-edit-bg: senza il :not() la regola li travolge tutti e disabilitato e sola lettura prendono il grigio come i campi attivi. Verificato producendo gli stati. ✅ E con l'esclusione si guadagna un segnale GRATIS: disabilitato e sola lettura hanno fondo ad alpha 0 (§8.58), quindi tornano a mostrare il FOGLIO — cioe' restano piu' CHIARI dei campi attivi. "Qui non si scrive" lo dice il fondo, senza aggiungere una tinta. Non era l'obiettivo della richiesta: e' venuto dal renderli disgiunti. ⚠️ Scopato a .dxbl-fl come tutto il blocco qui sopra: le stesse classi .dxbl-text-edit vivono nel filtro del menu e nella ricerca in barra, che non vanno toccate. */ /* ⚠️⚠️ I LOOKUP vanno aggiunti a mano, e per DUE motivi distinti (25/07/2026, difetto segnalato sul gestionale: `Cliente_DetailView` > "Altre info", il campo Categoria restava BIANCO mentre gli altri erano grigi). 1) Il loro `.dxbl-readonly` NON vuol dire "campo in sola lettura": e' la casella di testo che non si digita, perche' il valore si sceglie dalla tendina. Misurato: quel controllo ha i bottoni "Clear" e "Find" ABILITATI, quindi il dato e' modificabile a tutti gli effetti. L'esclusione :not(.dxbl-readonly) qui sotto lo scambiava per un campo spento e lo lasciava fuori dal grigio. 2) Anche rientrandoci non basterebbe: XAF, in styles.css, dipinge questi editor con un `background:` DIRETTO (`.dxbl-theme-fluent .dxbl-text-edit.xaf-lookup-search:...`, e le sorelle xaf-object-editor / xaf-file-data-editor / xaf-combo-box-list), non con la variabile — quindi la variabile non verrebbe mai letta. Serve il blocco piu' sotto che reindirizza quel background alla variabile. 💡 Causalita' separata a runtime commutando le classi: togliendo solo `dxbl-readonly` restava bianco (quindi non era il readonly); togliendo solo `xaf-lookup-search` tornava ad alpha 0; togliendo entrambe diventava #F4F5F6. */ /* ⚠️ `fl-edit-buttons` (§57) e' la QUINTA voce, ed e' NOSTRA, non di XAF: la mette il componente dell'uploader in linea sulla sua casella. Stessa storia delle quattro sopra — `dxbl-readonly` li' significa "non ci si digita", ma il valore si cambia coi bottoni — solo che quel controllo non porta nessuna classe `xaf-*`, quindi restava l'unico campo bianco fra campi grigi (misurato su Indice: alpha 0 contro i #F4F5F6 degli altri sette). ⚠️⚠️ NON gli si e' data `xaf-file-data-editor` per riusare la riga gia' presente: XAF dipinge quella classe con un `background` DIRETTO bianco #FFFFFE, e sui temi che il campo non lo dipingono affatto (Repertorio, Vespro, Ardesia) sarebbe diventata una macchia bianca — su due dark, per giunta. Una classe propria non eredita nulla. 💡 Per lo stesso motivo `fl-edit-buttons` NON va aggiunta al "ponte" qui sotto: quel blocco serve a disinnescare il background diretto di XAF, che su questo campo non c'e'. */ /* IL FONDO DEI CAMPI, promosso a token del FORM (02/08). Il valore e' lo stesso di prima e la sua derivazione sta nel commento qui sopra: cambia solo DOVE e' dichiarato. Serviva perche' ora lo legge un SECONDO meccanismo — le righe delle griglie dentro un box (layout-structure.css, blocco "fondo righe come i campi") — e `--dxbl-text-edit-bg` non era riusabile: e' dichiarata SUGLI elementi `.dxbl-text-edit`, quindi non scende per eredita' fino alla griglia. Dichiarata su `.dxbl-fl` scende a entrambi, e il letterale resta scritto UNA volta sola. ⚠️ Scopata a `.dxbl-fl` e non a `:root`: e' "il fondo dei campi DEL FORM", e fuori dal form (filtro del menu, casella di ricerca della griglia di primo livello) non deve arrivare — quelle vivono anche fuori da `.dxbl-fl` (§8.x, nota su `.dxbl-text-edit`). */ .dxbl-fl { --fl-campo-bg: #F4F5F6; /* Il CONTORNO e il RAGGIO del campo, promossi accanto al fondo per la stessa ragione: le due variabili di serie — `--dxbl-text-edit-border-color` e `--dxbl-text-edit-border-radius` — sono dichiarate SUGLI elementi `.dxbl-text-edit` (misurate li': #E1E1E0 e 0.25rem) e quindi non scendono per eredita' alla griglia. Le legge la cornice attorno alle righe, in layout-structure.css. ⚠️ Il letterale del bordo NON e' duplicato: la dichiarazione di serie piu' sotto (`.dxbl-text-edit`) e' stata puntata su questa variabile, con lo stesso valore come ripiego per le caselle FUORI dal form, dove `.dxbl-fl` non c'e'. */ --fl-campo-bordo: #E1E1E0; --fl-campo-raggio: 0.25rem; /* Il COLORE DELL'ETICHETTA di campo. ⚠️ NON si e' potuto riusare `--form-label-color`: quella la dichiarano solo Vespro e Repertorio, mentre qui l'etichetta prende il colore da un LETTERALE nella regola `.dxbl-fl .dxbl-fl-cpt` piu' sotto. Puntare alla variabile "che somigliava" avrebbe fatto cadere l'intestazione della griglia sul RIPIEGO #545A54 — successo, e misurato: etichetta rgb(127,140,153) contro intestazione rgb(84,90,84). Ora il letterale sta qui, e lo legge sia l'etichetta sia l'intestazione della griglia dentro un box (layout-structure.css). */ --fl-etichetta-colore: #7F8C99; /* Corpo e peso dell'etichetta, stessa logica del colore: il letterale sta QUI e lo leggono sia la regola d'etichetta di questo tema sia l'intestazione della griglia nel box. Il corpo non si dichiara perche' 13px e' gia' il ripiego condiviso; il peso si', perche' il 600 e' una scelta di Indice (schiarire il colore toglie peso, il 600 lo restituisce — vedi la nota sulla regola piu' sotto). */ --fl-etichetta-peso: 600; /* Lo stacco SOPRA una fila di pastiglie affiancate, che deve pareggiare quello che un campo normale si prende dalla sua etichetta. Il valore e' l'avanzamento della caption di questo tema: height 22 + margin-bottom −4 = 18, piu' lo 0.8 del bordo della pastiglia. ⚠️ MISURATO QUI, non copiato: su Repertorio la stessa caption ha margin-bottom −6 e il valore giusto e' 16. Chi porta il token su un altro tema lo rimisuri (fila a 12 dalla cima della riga, campo a 30.8: la differenza e' questa). */ --fl-pastiglia-stacco-sopra: 18.8px; } .dxbl-fl .dxbl-text-edit:not(.dxbl-disabled):not(.dxbl-readonly), .dxbl-fl .dxbl-text-edit.xaf-lookup-search:not(.dxbl-disabled), .dxbl-fl .dxbl-text-edit.xaf-object-editor:not(.dxbl-disabled), .dxbl-fl .dxbl-text-edit.xaf-file-data-editor:not(.dxbl-disabled), .dxbl-fl .dxbl-text-edit.xaf-combo-box-list:not(.dxbl-disabled), .dxbl-fl .dxbl-text-edit.fl-edit-buttons:not(.dxbl-disabled) { --dxbl-text-edit-bg: var(--fl-campo-bg); } /* Il ponte: XAF scrive `background` diretto su questi quattro editor, quindi la variabile qui sopra non basta. Reindirizzandolo alla variabile stessa, il fondo del lookup segue da solo la logica gia' tarata: grigio se attivo, e per il DISABILITATO la variabile resta al default ad alpha 0, cioe' torna a mostrare il foglio — il segnale "qui non si scrive" del blocco qui sopra resta intatto, senza doverlo riscrivere. ⚠️ Serve !important: la regola di XAF e' a (0,4,0) contro la (0,3,0) di questa, e non usa !important — quindi si vince cosi', non per specificita'. */ .dxbl-fl .dxbl-text-edit.xaf-lookup-search, .dxbl-fl .dxbl-text-edit.xaf-object-editor, .dxbl-fl .dxbl-text-edit.xaf-file-data-editor, .dxbl-fl .dxbl-text-edit.xaf-combo-box-list { background: var(--dxbl-text-edit-bg) !important; } /* ⚠️ Conseguenza del padding qui sopra: la casella scende a 27.6px, e il cap dell'altezza delle caselle di SPUNTA (layout-structure.css) deve seguirlo. Senza, le righe di due colonne affiancate divergono di 2.4px l'una dall'altra — su tre righe fanno 4.8px, ed era il difetto aperto piu' visibile della 5a sessione (§22.6). ⚠️ Va su .dxbl-fl e NON nel blocco qui sopra: deve essere visibile dal contenitore della SPUNTA, che di una casella di testo non e' discendente. E' lo stesso motivo per cui il valore non si puo' leggere da --dxbl-text-edit-padding-y (§8.21/§8.24). 💡 Piu' in basso in questo foglio c'e' un altro blocco .dxbl-fl (fondo e bordo del form): proprieta' diverse, quindi non si fanno ombra — ma sono due, non uno. */ .dxbl-fl { --form-row-h: calc(20px + 3px + 3px + 1.6px); /* interlinea + padding + due bordi */ /* L'etichetta SOPRA tirata verso il proprio campo (--form-cap-pull). Stessa geometria di DIDASCALIA di Ampio (5/14, senza tirata ~1.67), MA il campo di Indice e' piu' corto (27.6 contro 32): a -7 come Ampio l'etichetta arrivava a 0.4px dal VALORE, sfiorandolo. Quindi -4, che da' la STESSA aria di Ampio sul valore (clearance 3.4 contro 3.2) con rap_c 2.59 - pende chiaro senza toccare il testo. ⚠️ Gemelli sulla didascalia NON vuol dire gemelli sulla tirata sicura: la governa l'ALTEZZA DEL CAMPO. Misura fresca e correzione del numero 9a-stantio (§8.50) per esteso in theme-ampio.css. A VIDEO (11a). ➕➕ 19/08, §158.11 — DA -4 A -2, cioe' +2px di respiro sotto OGNI etichetta. Chiesto da lui guardando Indice: *«lo spazio minimo che c'e' tra fine etichetta e l'inizio del suo relativo elemento di sotto… vorrei aumentarli entrambi di un paio di pixel, prova con 2 pixel»*. 🔑 «Entrambi» sono l'etichetta-campo del form E il titolo-riga delle griglie interne, e si muovono con QUESTA sola riga: il `margin-bottom` dell'intestazione di griglia e' scritto in `layout-structure.css` come `padding dell'etichetta + --form-cap-pull - filetto`, cioe' legge la stessa geometria. Una leva, due distanze — ed e' anche il motivo per cui erano gia' pari prima di toccarle (misurato: 3,5 contro 3,3 dalla linea di base, dove lo 0,2 e' il filetto a DPR 1.25). ⚠️ Chi volesse muoverne una sola deve rompere quel legame, e sarebbe un peggioramento. ⚠️ IL VERSO E' SICURO: il vincolo scritto qui sopra e' che a -7 l'etichetta arrivava a 0,4px dal VALORE. -2 la allontana, quindi la clearance cresce da 3,4 a 5,4 — il limite sta dall'altra parte. Il costo e' in ALTEZZA: +2px per ogni item e per ogni griglia con intestazione. */ --form-cap-pull: -2px; } /* BORDO UNIFORME SUI QUATTRO LATI, a riposo — su OGNI casella di testo dell'app. ⚠️ Il lato inferiore NON era piu' spesso: misurato, tutti e quattro sono 0.8px. Era piu' SCURO — #3f3f3e sotto contro #d3d3d2 sugli altri tre — perche' DevExpress lo governa con una variabile a parte, --dxbl-text-edit-underline-color, residuo dello stile "a sottolineatura" di Fluent. Sembrava spessore, era colore. Si punta alla variabile del BORDO invece di ricopiarne il valore, cosi' il lato inferiore segue automaticamente gli altri tre, hover compreso. ⚠️ Regola GLOBALE e non scopata a .dxbl-fl: le caselle fuori dai form sono quattro (ricerca full text nel ribbon, filtro del menu, e due nel pannello impostazioni di DevExpress) e avevano tutte la stessa asimmetria. Elencarle una per una avrebbe voluto dire mantenere una lista destinata a diventare incompleta. ⚠️ Il FUOCO invece resta scopato al form (piu' sotto): fuori dai form la riga d'accento e' ancora solo sul lato inferiore, come di serie. */ .dxbl-text-edit { /* --- Bordo a riposo SCHIARITO: #d3d3d2 -> #E1E1E0 --- Stessa tinta di prima (neutro, hue 60) con la sola luminosita' alzata da 82.5% a 88%: si alleggerisce il contorno del campo senza introdurre colori. ⚠️ Su DPR 1.25 un bordo da 1px rende 0.8px, cioe' UN pixel fisico: sotto il pixel pieno il COLORE e' l'unica leva del peso percepito (§8.9). E' il motivo per cui schiarire funziona — ma anche il motivo per cui oltre L 88% il bordo non diventa "piu' tenue", diventa invisibile su certi monitor. Questo e' il gradino limite. ⚠️ Si dichiara la variabile e non il border-color: cosi' la seguono anche gli stati che DevExpress deriva da lei, incluso il lato inferiore agganciato qui sotto. 💡 Valutata e scartata --grid-line (#D8DCDF), che sarebbe stata la scelta "di sistema" — la stessa linea che separa le righe in griglia, e per giunta fredda come il resto del tema. Non scelta perche' schiariva meno: qui si voleva alleggerire. */ --dxbl-text-edit-border-color: var(--fl-campo-bordo, #E1E1E0); /* L'hover schiarito DELLO STESSO PASSO, non lasciato dov'era. ⚠️ Di serie e' #c8c8c7 (L 78.4%): contro un riposo a 82.5% era uno scalino di 4 punti, contro 88% ne diventerebbe uno di quasi 10 — il passaggio del mouse "sbatterebbe" invece di accennare. Portandolo a L 84% lo scalino torna 4 punti, cioe' il rapporto che DevExpress aveva scelto. Si sposta il livello, non la relazione. */ --dxbl-text-edit-border-hovered-color: #D7D7D6; /* ⚠️ Le due righe che agganciavano il lato inferiore al bordo (--dxbl-text-edit-underline-color e la sua gemella hovered) sono state HOISTATE in `layout-structure.css` §7 nella 7a sessione, insieme alla terza che mancava (-active-color). Motivo: non contengono un colore, e gli altri quattro temi avevano tutti la stessa asimmetria — la correzione era scritta qui e valeva per il solo Indice. Stesso caso dell'icona dei rami al §23.11. 💡 Restano qui le due dichiarazioni SOPRA, che invece un colore lo portano: quelle sono la scelta di Indice, non una regola di struttura. Puntando il foglio condiviso alla variabile del bordo, il lato inferiore segue automaticamente proprio questi due valori. */ } /* AL FUOCO: si colorano TUTTI E QUATTRO i lati, non il solo lato inferiore. Di serie DevExpress non colora il bordo: genera un ::after in posizione assoluta ancorato in basso (bottom/left/right: -1px) che disegna un solo border-bottom da 2px nel colore d'accento. Quindi non basta cambiare un colore — quel pseudo-elemento va spento, e il colore va messo sul bordo vero della casella. ⚠️ Si cambia solo il COLORE di bordi che esistono gia' su tutti e quattro i lati: nessuna larghezza cambia, quindi il testo non si sposta di un pixel al clic. E' il rischio che il §15 segnala per Repertorio, dove invece l'anello viene AGGIUNTO e percio' li' e' fatto col box-shadow. ⚠️ Servono tutte e tre le forme del selettore: DevExpress usa sia la classe .dxbl-focused sia :focus-within sia :has(:focus), e non sono intercambiabili. 💡 Per provarlo NON serve inseguire il fuoco vero — eseguire JS nel browser lo sposta sul body e si finisce per misurare lo stato a riposo (§8.10). Basta aggiungere a mano la classe .dxbl-focused alla casella e misurare. */ .dxbl-fl .dxbl-text-edit.dxbl-focused::after, .dxbl-fl .dxbl-text-edit:focus-within::after, .dxbl-fl .dxbl-text-edit:has(:focus)::after { content: none; } .dxbl-fl .dxbl-text-edit.dxbl-focused, .dxbl-fl .dxbl-text-edit:focus-within, .dxbl-fl .dxbl-text-edit:has(:focus) { border-color: var(--dxbl-text-edit-underline-focused-color) !important; } /* CASELLE DI SPUNTA (i flag bool) piu' grandi nella scheda: 10 -> 16px. ⚠️⚠️ LA CAUSA DEI 10px NON ERA UNA SCELTA SULLE CASELLE, era un effetto collaterale di QUESTO tema: la dimensione discende da --dxds-spacing-160, che Indice comprime a 0.625rem nel blocco "spaziatura compressa" in cima al foglio. Stringendo un token generico di spaziatura si sono rimpiccioliti anche i flag, senza che nessuno lo decidesse. Da tenere a mente prima di toccare quel blocco: non governa solo i vuoti. ⚠️ Serve specificita' (0,4,0): DevExpress dichiara queste variabili su .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio), cioe' (0,3,0), e un semplice ".dxbl-fl .dxbl-checkbox" (0,2,0) PERDE — provato, del tutto inerte. Si ricalca la loro struttura invece di alzare il peso a caso (§8.15). */ /* ⚠️ REGOLA GLOBALE, non piu' scopata al form. La prima stesura diceva ".dxbl-fl .dxbl-checkbox" perche' in quel momento si stava lavorando alla scheda, ma il difetto non era della scheda: --dxds-spacing-160 e' un token GENERICO di spaziatura, e Indice lo comprime per tutta l'app. Le caselle erano quindi a 10px OVUNQUE — in griglia (colonna di selezione, 73 in scena) esattamente come nel form, solo che li' nessuno le aveva ancora guardate. Correggere solo il form voleva dire lasciare due misure diverse per lo stesso oggetto. E' la stessa scelta gia' fatta poco piu' sotto per i bordi delle caselle di testo: quando il difetto viene da un token generico, la correzione va dove sta il difetto. ⚠️ Serve "body" davanti per arrivare a (0,3,1): DevExpress dichiara queste variabili su .dxbl-checkbox:not(...):not(...), cioe' (0,3,0), e a parita' di peso il §8.15 avverte che vince il loro foglio, non il nostro. Un antenato basta a scavalcare senza gonfiare il selettore con classi inventate. ⚠️ Restano fuori switch e radio, che sono altri due componenti con la stessa classe base: ingrandirli con la stessa regola li deformerebbe. */ body .dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio) { --flag-dim: 16px; --dxbl-checkbox-check-element-checkbox-size-m: var(--flag-dim); --dxbl-checkbox-check-element-width: var(--flag-dim); --dxbl-checkbox-check-element-height: var(--flag-dim); } /* ⚠️ Ingrandendola, la casella cresce VERSO IL BASSO da un bordo superiore fisso: il suo centro scendeva di 3px rispetto all'etichetta del campo (scarto misurato da -1 a +2). Si recupera con meta' della crescita, espressa come calcolo sul valore di partenza invece che col numero -3 scritto a mano: cosi' se un giorno si cambia --flag-dim o la spaziatura del tema, la compensazione segue da sola. ⚠️ NON si risolve centrando col flex (align-self / align-items sul controllo): provati entrambi, numeri IDENTICI. Il contenitore e' gia' alto quanto la casella, quindi non c'e' nessuno spazio da ridistribuire — regola applicata e inerte. */ .dxbl-fl .dxbl-checkbox .dxbl-checkbox-check-element { /* Meta' della crescita, PIU' un pixel. Quel pixel non e' un ritocco a occhio: e' il BORDO che il campo di testo ha e la casella no. Senza, la casella restava 0.8px piu' in alto dei campi che le stanno ACCANTO SULLA STESSA RIGA (Locali|Ascensore, Bagni|Garage, Piano|Ristrutturato) — ed e' li' che si vedeva la sfasatura. Misurato sul centro dei GLIFI dell'etichetta, non delle scatole: campi -1.8, casella -2.6 prima, -1.6 dopo. I 0.2px residui sono sotto la soglia percepibile. ⚠️ Si allinea ai CAMPI VICINI, non al proprio ottimo ottico: centrandola sul centro dei glifi (scarto 0) finirebbe 1.8px PIU' IN BASSO dei campi sulla stessa riga, cioe' si sposterebbe la sfasatura invece di toglierla. ⚠️ NON usare var(--dxbl-text-edit-border-width) al posto di 1px: quella variabile non e' visibile da qui (e' del componente text-edit), il calc diventa invalido e cade l'INTERA dichiarazione — margin-top 0, non "il calc senza quel termine". Una variabile inesistente non vale zero: avvelena tutta la proprieta'. */ margin-top: calc((var(--dxds-spacing-160) - var(--flag-dim)) / 2 + 1px); } /* ETICHETTE DEI CAMPI: piu' piccole, piu' chiare, con un semigrassetto a compensare. Le tre leve si compensano a vicenda ed e' il motivo per cui vanno mosse insieme: schiarire il colore toglie peso, il 600 lo restituisce. Muovendole nello stesso verso l'etichetta o sparisce o grida. Da 14px/400 quasi nero a 13px/600 #7F8C99: ne esce una gerarchia dichiarata — l'etichetta nomina, il valore (15px) dice. ⚠️ #7F8C99 su bianco da' circa 3.4:1, sotto la soglia AA. E' lo stesso baratto accettato per le linguette chiuse, ma qui il rischio e' diverso: li' il grigio CODIFICA uno stato (non sei su questa scheda), qui l'etichetta e' l'unica cosa che dice cosa contiene il campo. Scelta consapevole, guardando il risultato: se un giorno stona, il gradino sopra e' --grid-header-color (#5B6672, circa 5.9:1). */ .dxbl-fl .dxbl-fl-cpt { font-size: var(--fl-etichetta-corpo, 13px); font-weight: var(--fl-etichetta-peso, 600); color: var(--fl-etichetta-colore, #7F8C99); } /* Caption di CAMPO con help-info (§44): colore muto come un'etichetta normale, non l'accento da titolo di gruppo. L'inner eredita (color:inherit in layout-structure). */ .dxbl-fl .dxbl-fl-cpt.dxbl-fl-caption-tmpl:has(> .caption-container), .dxbl-fl .dxbl-fl-cpt.dxbl-fl-caption-tmpl:has(> .caption-container-inline) { color: #7F8C99 !important; } /* ...MA NON dove il controllo e' una casella di spunta. ⚠️ Il problema: una casella di spunta NON ha testo proprio — l'ispezione mostra che sotto .dxbl-fl-ctrl c'e' il solo quadratino (.dxbl-checkbox-check-element). Quindi "Ascensore" e' la LABEL del campo, la stessa classe di "Titolo", e qualunque regola sulle etichette la colpisce. Ma nelle altre righe l'etichetta e' accompagnata da un valore a 15px che porta il peso della riga, mentre qui e' l'unico testo in scena: rimpicciolita e schiarita, la riga sbiadisce accanto alle vicine. La regola quindi non e' "le etichette sono cosi'" ma "il testo che fa le veci del VALORE si scrive come un valore": 15px/400 nel nero dei dati, gli stessi numeri misurati dentro le caselle di testo. ⚠️ Selettore per STRUTTURA e non per nome di campo: :has(+ ...) prende l'etichetta il cui fratello successivo contiene una spunta. Elencare xaf-item-ascensore, -garage, -ristrutturato funzionerebbe oggi e sarebbe una lista da aggiornare a ogni bool nuovo. 💡 Disponibile resta fuori di proposito: usa l'editor custom DisponibileBadge, che un suo contenuto visibile ce l'ha (il pill), quindi la sua etichetta puo' restare quieta. ⚠️⚠️ 03/08 — LA CATENA E' DIVENTATA `> .dxbl-fl-ctrl >`, FIGLIO DIRETTO. Scritta discendente la condizione prendeva qualunque spunta a qualunque profondita', quindi anche gli editor che di spunte ne contengono TANTE dentro un loro contenitore: misurato su DemoEditors/Lavoratore, etichetta «Categoria» (modo checkBox, un DxListBox con 4 spunte) resa 15px/400/rgb(22,22,22) come una spunta nuda, mentre «Nome» e «Caratteristiche» accanto stavano a 13px/600/rgb(127,140,153). **Era un difetto gia' li', non introdotto dal nuovo editor a pastiglie: quello ci si e' solo aggiunto.** 📌 E la cura non cambia l'intenzione, la RISPETTA: il criterio scritto qui sopra e' «il testo che fa le veci del valore si scrive come un valore». Un DxListBox e una fila di pastiglie un contenuto visibile CE L'HANNO — sono nella stessa condizione di Disponibile, che il commento dichiarava gia' fuori. La catena stretta li esclude per struttura invece che per elenco. ✅ Verificato che la regola continua a scattare DOVE DEVE, e col numero: su LayoutLab (scheda immobile, 43 caption in pagina) il selettore stretto aggancia **10** elementi, esattamente gli stessi **10** di quello largo — sulle spunte vere non cambia nulla, e «Trattabile» resta 15px/400/rgb(22,22,22). Su DemoEditors invece tornano a 13px/600/rgb(127,140,153) le tre che non dovevano esserci: Dotazioni, Categoria e Professione. ⚠️ La riga qui sopra e' nata SBAGLIATA: diceva «verificato» prima che lo fosse, ed e' stata corretta misurando. E' il difetto del §90.1 — un commento che afferma un meccanismo senza il numero che lo dimostra — commesso mentre lo si documentava. 💡 Nitido questa lezione l'aveva gia' imparata (§51, difetto arrivato dal gestionale) e scrive `> .dxbl-fl-ctrl > .dxbl-checkbox` da allora. Qui era rimasta la forma larga. */ .dxbl-fl .dxbl-fl-cpt:has(+ .dxbl-fl-ctrl > .dxbl-checkbox) { font-size: 15px; font-weight: 400; color: rgb(22, 22, 22); } /* GRUPPI DI LAYOUT: via il contorno della carta, e una barra d'accento sotto il titolo. Il gruppo smette di essere un riquadro e diventa una sezione introdotta da un titolo sottolineato — la stessa grammatica delle linguette, riusata su un'altra superficie. ⚠️ Si spegne il COLORE del bordo, non il bordo: con "border: none" la carta perde 0.8px per lato e TUTTO il contenuto slitta (misurato: carta 320 -> 318.4, primo campo da x 309.6 a 308.8, form 422 -> 421). Con "transparent" la geometria resta identica al pixel e sparisce solo la riga. Vale anche come promemoria generale: togliere un bordo non e' mai neutro sul layout, cambiargli colore si. ⚠️ Resta il FONDO BIANCO della carta sulla carta grigia del tema: non e' stato chiesto di toglierlo, ma e' lui che fa ancora leggere il gruppo come un riquadro. La barra e' copiata dal ::after della linguetta attiva (§17.4), misurato sul posto: position absolute, bottom 0, left/right 12px, altezza 3px, raggio 2px, accento del tema. 💡 I 12px coincidono con il padding orizzontale della didascalia, quindi la barra parte esattamente dove inizia il testo del titolo — non e' stato scelto, e' emerso dal fatto che le due superfici usano lo stesso passo. ⚠️ Serve position: relative sulla didascalia (era static), altrimenti il ::after si ancorerebbe a un antenato qualsiasi. ⚠️ Si usa .dxbl-fl-caption-tmpl e non .dxbl-group-header a secco: il §15 avverte che quest'ultima colpisce anche i rami del menu laterale. */ .dxbl-fl .dxbl-group.expanded { border-color: transparent; } /* ...e via anche il FONDO BIANCO: e' l'ultimo residuo che faceva leggere il gruppo come un riquadro anche senza contorno (carta bianca #FFFFFE sul grigio #EBEDEF del tema). Con il fondo trasparente il gruppo smette del tutto di essere una scheda e diventa una sezione, delimitata solo dal titolo e dalla sua barra. ⚠️ I fondi da spegnere sono DUE, non uno: la carta esterna (.dxbl-group) e la didascalia (.dxbl-fl-caption-tmpl), che ne dichiara uno proprio. Spegnendo solo la prima resterebbe una banda bianca dietro al titolo — e sarebbe l'unica cosa visibile, quindi il difetto piu' evidente dei due. */ .dxbl-fl .dxbl-group.expanded, .dxbl-fl .dxbl-fl-caption-tmpl { background-color: transparent; } /* ...ma il BIANCO torna sul solo CORPO del gruppo, da sotto la barra in giu': il titolo resta sulla carta grigia del tema, il contenuto ha il suo foglio bianco. 💡 Non serve calcolare nessun offset: la carta ha esattamente DUE figli — la didascalia e .dxbl-group-body — e il corpo inizia al pixel dove finisce la didascalia (misurato: didascalia y 226 + altezza 36 = 262, corpo y = 262). Dipingere il corpo fa partire il bianco esattamente sotto la barra, per costruzione. Angoli: tondi solo IN BASSO, cosi' il bianco si chiude sotto e resta a filo con la barra sopra, che fa da tappo. */ /* ⚠️ DUE SUPERFICI, UNA REGOLA SOLA: la vista a gruppi affiancati e quella a schede sono lo stesso disegno reso da componenti diversi, e vanno tenute nella stessa regola o divergono al primo ritocco. .dxbl-group-body -> il corpo di un LayoutGroup, sotto la didascalia .dxbl-tabs-content-panel -> il pannello di un TabbedGroup, sotto le linguette 💡 Nella vista a schede la barra d'accento NON va aggiunta: c'e' gia', ed e' il ::after sotto la linguetta attiva (§17.4) — cioe' proprio quello da cui era stata copiata la barra dei titoli. Le due viste convergono sullo stesso disegno partendo da capi opposti. ⚠️ .dxbl-tabs-content-panel esiste ANCHE nel ribbon (vedi §19): va scopato a .dxbl-fl-gt, il contenitore del TabbedGroup, non lasciato libero. */ .dxbl-fl .dxbl-group-body, .dxbl-fl .dxbl-fl-gt .dxbl-tabs-content-panel { background-color: #FFFFFE; border-radius: 0 0 4px 4px; /* Gli altri tre lati chiudono il foglio bianco: sopra ci pensa gia' la barra. Colore = --toolbar-line, cioe' il token che il tema ha GIA' per "linea di uno scalino piu' marcata" (e' --grid-line scurita in HSL a tinta invariata). Si preferisce ai #d3d3d2 di serie di DevExpress perche' quello e' neutro, mentre tutta la scala di Indice e' FREDDA: a fianco delle righe di griglia si vedrebbe la differenza di temperatura. ⚠️ Il bordo va sul CORPO, non sulla carta: cosi' delimita esattamente il bianco e parte al pixel dove finisce la barra. Sulla carta avvolgerebbe anche il titolo, che invece deve restare sulla carta grigia. ⚠️ Costa 0.8px: il contenuto rientra di altrettanto e il form cresce di 1px. Inevitabile aggiungendo un bordo — misurato, non stimato. */ border-left: 1px solid var(--toolbar-line); border-right: 1px solid var(--toolbar-line); border-bottom: 1px solid var(--toolbar-line); } /* ⚠️ Il bordo SUPERIORE serve SOLO alla versione a schede, ed e' l'unica differenza voluta fra le due. Motivo: nei LayoutGroup la barra d'accento e' larga quanto il foglio e quindi lo chiude da sola; fra le schede invece e' larga quanto la sola linguetta attiva, e tutto il resto del lato superiore resterebbe aperto — si vedrebbe il gradino fra il grigio e il bianco dove la barra non arriva. Non va quindi aggiunto anche a .dxbl-group-body: li' raddoppierebbe la barra. */ .dxbl-fl .dxbl-fl-gt .dxbl-tabs-content-panel { border-top: 1px solid var(--toolbar-line); /* ...e il pannello sale di 2px per togliere il vuoto fra la barra della linguetta attiva e il bordo superiore del foglio. ⚠️ QUEI 2px NON SONO DECORATIVI e non vanno tolti alla fonte: sono il padding-bottom della