/* * La cornice della pagina: i contatori rossi del menu, il titolo della pagina e il nome utente nella * barra in alto. * * Audit TxDOT §2.6 (DGWGEOWORK-9114, spacchettato in DGWGEOWORK-10136) -- WCAG 2.1 AA, 1.4.3 * Contrast (Minimum): sono testo, e devono stare ad almeno 4,5:1 sul proprio fondale. Compaiono in * OGNI pagina dell'applicazione: il contatore accanto a Applications, Clearances e alle loro voci, * quello delle notifiche nella barra in alto, e il titolo in testa a ogni elenco. * * MISURATO (formula di contrasto WCAG, la stessa di `big.contrastRatio`): * * elemento colori prima dopo * -------------------------------------- ------------------------ ----- ----- * contatore .badge-danger, 11 px #fff su #ed6b75 3,02 5,14 (#d02b38) * .label-danger (stessa tinta) #fff su #ed6b75 3,02 5,14 * .label-danger[href] in hover/focus #fff su #e73d4a 4,07 7,26 (#a4262c) * titolo di pagina, 22 px normale #697882 su #f3f5f9 4,17 5,43 (#58666f) * #697882 su #fff 4,56 5,92 * sottotitolo h1 > small, 13 px #9eacb4 su #fff 2,33 5,18 (#616f78) * #9eacb4 su #f3f5f9 2,13 4,75 * nome utente nella barra in alto, 14 px #7fb0da su #fff 2,30 5,47 (#2e6da4) * col mouse sopra il pulsante #7fb0da su #f9fafc 2,20 5,24 * voci della barra (menu, Support), riposo #337ab7 su #fff 4,56 5,47 (#2e6da4) * col mouse sopra #23527c su #f9fafc 7,83 7,83 (invariato) * * `#ed6b75` e `#e73d4a` vengono da `metronic/assets/global/css/components-md.css:2924` e :9936; * `#697882` e `#9eacb4` da `metronic/assets/admin/layout4/css/layout.css:1699` e :1707. Il fondo * #f3f5f9 della pagina e' `metronic/assets/admin/layout4/css/themes/light.css:14`; `#7fb0da` del * nome utente e del nome della lingua da `themes/light.css:80` e :86, il fondo #f9fafc in hover da * :34. Le voci della barra (Applications, Payments, Support, ...) non hanno un colore del tema: * prendono quello dei link di Bootstrap, `a` #337ab7 a 4,56:1, cioe' sul filo della soglia; il * nome utente, accanto, sarebbe stato di un altro azzurro. Ora tutta la barra ha la stessa tinta. * * PERCHE' QUESTE TINTE. * Sono le stesse tinte di Metronic, spostate verso lo scuro finche' passano con margine: il contatore * resta un rosso "da notifica" e non diventa il rosso bordeaux degli errori (#a4262c, * `errorContrast.css`), che a 11 px su una barra chiara si leggerebbe come un allarme. Il titolo resta * il grigio-azzurro del tema: a 5,43:1 contro gli 11,58:1 del testo del corpo (#333), si legge ancora * come intestazione e non come testo. Il sottotitolo resta piu' chiaro del titolo. Il nome utente resta * l'azzurro del tema, piu' scuro: tiene anche sul grigio chiaro che il pulsante prende in hover. * Il contatore non cambia colore quando la voce del menu e' in hover o aperta: nessuna regola del tema * lo ridichiara su quegli stati, quindi il valore qui sotto vale anche li'. * * PERCHE' STA IN Common/Styles E LE VARIABILI SONO QUI. * Stessa ragione di `textContrast.css`, spiegata per esteso in testa a quel file: e' la sola cartella * pescata sia da `app.min.css` sia da `common.min.css` (le pagine del layout frontend), mentre * `Scripts/BIG/css/big.css` entra solo nel primo. Variabile e regole che la usano viaggiano nello * stesso file, cosi' la variabile non e' mai indefinita dove serve. * Il CSS dell'ente arriva dopo il bundle (`App/common/services/appSession.js`): un ente che vuole un * altro rosso o un altro grigio ridichiara la variabile nel proprio `:root`. I fogli di Munich, * Stuttgart e VTrans ridisegnano gia' il contatore per selettore, e continuano a vincere. * * PERCHE' QUI E NON NEI FILE DI METRONIC. * `metronic/` non e' nostro: si aggiorna sostituendolo, e una correzione scritta dentro sparirebbe. * In `app.min.css` la voce `Common/Styles` viene dopo `components-md.css`, `layout4/css/layout.css` e * `themes/light.css` (bundles.json), quindi a pari specificita' vince per ordine di sorgente: le regole * ripetono i selettori del tema, senza `!important`. * * COSA RIDEFINISCE (trappola T3, frontend-accessibility.md §5b): solo `color` e `background-color`. * Nessuna misura, nessun peso, nessun margine. */ :root { --gw-counter-badge-bg-color: #d02b38; --gw-counter-badge-hover-bg-color: #a4262c; --gw-page-title-color: #58666f; --gw-page-subtitle-color: #616f78; --gw-header-text-color: #2e6da4; } /* Contatori: stessi selettori di metronic/assets/global/css/components-md.css */ .badge-danger { background-color: var(--gw-counter-badge-bg-color); } .label-danger { background-color: var(--gw-counter-badge-bg-color); } .label-danger[href]:hover, .label-danger[href]:focus { background-color: var(--gw-counter-badge-hover-bg-color); } /* Titolo di pagina: stessi selettori di metronic/assets/admin/layout4/css/layout.css */ .page-head .page-title > h1 { color: var(--gw-page-title-color); } .page-head .page-title > h1 > small { color: var(--gw-page-subtitle-color); } /* Nome utente e nome della lingua nella barra in alto: stessi selettori di metronic/assets/admin/layout4/css/themes/light.css */ .page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username, .page-header.navbar .top-menu .navbar-nav > li.dropdown-language > .dropdown-toggle > .langname { color: var(--gw-header-text-color); } /* Voci della barra in alto. Sostituiscono il colore di `a` di Bootstrap, e devono pesare come lui: :where() porta la specificita' a (0,0,1), cosi' la regola vince su Bootstrap solo per ordine di sorgente e perde contro tutto il resto. - contro `a:hover` e `a:focus` di Bootstrap (0,1,1): in hover e a fuoco la voce resta #23527c, 7,83:1, senza che serva riscriverlo; - contro il CSS dell'ente: Munich e BAU-ER fanno le voci bianche sul loro header blu con `.navbar a` (0,1,1). Con il selettore pieno, (0,4,2), questa regola avrebbe vinto e le voci sarebbero diventate azzurre su blu. */ :where(.page-header.navbar .top-menu .navbar-nav > li) > a { color: var(--gw-header-text-color); }