/* * La tavolozza di Bootstrap 3 e del tema Metronic ad almeno 4,5:1, da un punto solo. * * Audit TxDOT §2.6 (DGWGEOWORK-9114, spacchettato in DGWGEOWORK-10140) -- WCAG 2.1 AA, 1.4.3 * Contrast (Minimum) per il testo e 1.4.11 Non-text Contrast per i confini. L'auditor chiede «a * consistent colour system»: sotto c'era la tavolozza di default delle due librerie, mai scelta per * WCAG, con il bianco scritto su tinte chiare. * * MISURATO (formula di contrasto WCAG, la stessa di `big.contrastRatio`): * * elemento colori prima dopo * -------------------------------------- -------------------------- ----- ----- * .btn-success, .btn.green(-meadow/-haze) #fff su #36c6d3/#32c5d2 2,06 5,07 (#137a84) * hover e focus / premuto #fff su #27a4b0 2,99 6,84 / 8,62 * .btn.blue senza .btn-primary #fff su #3598dc 3,15 5,47 (#2e6da4) * hover e focus / premuto #fff su #217ebd 4,39 7,02 / 8,71 * .btn-danger, .btn.red #fff su #ed6b75 / #e7505a 3,02 5,14 (#d02b38) * hover e focus / premuto #fff su #e73d4a 4,07 7,26 / 9,01 * .label-default, .badge-default, .badge #fff su #bac3d0 / #777 1,78 5,65 (#5d6878) * .label-success, .badge-success #fff su #36c6d3 2,06 5,07 * .label-info, .badge-info #fff su #659be0 2,87 4,64 (#2a74d2) * .label-primary, .badge-primary #fff su #337ab7 4,56 5,47 * .label-warning, .badge-warning #fff su #F1C40F 1,66 12,64 (testo nero) * link sul fondo pagina / pannelli grigi #337ab7 su #f3f5f9 / #eee 4,17 5,01 / 4,71 * .help-block sui pannelli grigi #737373 su #f5f5f5 / #eee 4,35 5,27 / 4,95 * opzione evidenziata di ui-select #fff su #428bca 3,63 5,47 * SweetAlert, testo del messaggio #797979 su #fff 4,35 6,69 * SweetAlert, Annulla / pulsante generico #fff su #d0d0d0 / #AEDEF4 1,54 5,65 / 5,47 * schede scorrevoli, confine #d9d9d9 su #fff / #f2f2f2 1,41 3,95 / 3,53 * * LE TINTE SI SCURISCONO, NON SI RIDISEGNANO: ognuna e' la sua tonalita' di partenza con la * luminosita' abbassata fino alla soglia (un verde resta verde). Due eccezioni dichiarate: * - i blu sono uno solo, #2e6da4, quello che DGWGEOWORK-10136 ha gia' dato alla barra in alto: * quattro blu quasi uguali erano proprio il colore «incoerente fra le schermate» dell'audit; * - il giallo resta giallo e il testo diventa nero, `--btn-warning-color`, la variabile con cui * `big.css` scrive gia' nero il testo di `.btn-warning`: scurito fino a reggere il bianco, il * giallo diventerebbe marrone. * * I NOMI DELLE VARIABILI sono i token semantici di `design-tokens-italia` (npm, 1.3.3), cosi' * DGWGEOWORK-10097 (Designers Italia come baseline) ne cambia i valori e non le regole. Dove la * libreria non ha il ruolo -- l'«info» di Bootstrap -- il nome e' nostro, `--gw-`, con la stessa * forma. Un ente che vuole altre tinte ridichiara la variabile nel `:root` del suo CSS; chi la * cambia rimisura il contrasto, e' un requisito. * * IL FALLBACK IN OGNI var(). * Il `:root` sta in questo stesso foglio, servito sia da `app.min.css` sia da `common.min.css` * (le pagine prima del login), quindi le variabili esistono ovunque la regola arrivi. Il ripiego * vale per un CSS d'ente che ne azzera una con `initial`, e tiene il valore leggibile accanto alla * regola. Non copre un valore invalido (`--it-color-link-base: 12px`): li' la dichiarazione diventa * invalida e il colore torna quello iniziale, non quello della libreria -- chi ridichiara rimisura. * * PERCHE' QUI E NON NEI FILE DELLE LIBRERIE. * `libs/bootstrap`, `metronic`, `libs/sweetalert` e i fogli di `Scripts/BIG` non sono nostri. In * `app.min.css` la voce `Common/Styles` viene dopo Bootstrap, Metronic, la prima copia di * SweetAlert e le schede scorrevoli: a pari specificita' vince per ordine di sorgente, e le regole * qui sotto ripetono i selettori della libreria senza `!important`, cosi' un tema d'ente puo' ancora * sovrascriverle per selettore. Due fogli invece vengono DOPO `Common/Styles`: * `Scripts/BIG/angular-plugins/angular-ui-select/select.css` e la seconda copia di SweetAlert, * `Scripts/BIG/css/sweet-alert/sweet-alert.css`. Li' il selettore porta un elemento o una classe in * piu' della libreria: vince per specificita', di un grado solo. * * PERCHE' «colorPalette» E NON UN NOME QUALSIASI. I fogli di una cartella entrano nel bundle in * ordine alfabetico (`bundle-config.js`, `canonicalCompare`): questo deve venire PRIMA di * `pageFrameContrast.css`, che colora `.badge-danger` e `.label-danger` con la stessa specificita' * della regola su `.badge` qui sotto. Rinominandolo dopo la «p», i contatori rossi del menu * diventerebbero grigi. * * COSA RIDEFINISCE (trappola T3, frontend-accessibility.md §5b): solo `color`, * `background-color` e `border-color`. Nessuna misura, nessuna ombra, nessun posizionamento. * * COSA RESTA FUORI, di proposito: * - `.btn-primary`, `.btn-info` e il «conferma» di SweetAlert nell'applicazione: li colora * `big.css` con `--action-button-color`, il colore azione dell'ente; * - `.badge-danger` e `.label-danger`: li colora `pageFrameContrast.css` (DGWGEOWORK-10136); * - i messaggi d'errore: li colora `errorContrast.css` (DGWGEOWORK-10135); * - gli `.help-block` dei campi Metronic `.form-md-line-input`, che hanno i colori di stato del tema. * * NON E' AFFIDATO AL SOLO COLORE (WCAG 1.4.1): il testo delle etichette e dei pulsanti resta dove * era. Cambia la tinta, non il segnale. */ :root { --it-color-background-success: #137a84; --it-color-background-success-hover: #10646d; --it-color-background-success-active: #0d545b; --it-color-background-primary: #2e6da4; --it-color-background-primary-hover: #275c8b; --it-color-background-primary-active: #214e75; --gw-color-background-info: #2a74d2; --gw-color-background-info-hover: #215aa3; --gw-color-background-info-active: #1b4c89; --it-color-background-danger: #d02b38; --it-color-background-danger-hover: #a4262c; --it-color-background-danger-active: #8b2025; --it-color-background-secondary: #5d6878; --it-color-background-secondary-hover: #4b5461; --it-color-background-secondary-active: #424955; /* il giallo di Bootstrap e Metronic, invariato: regge il testo nero, non il bianco */ --it-color-background-warning: #f1c40f; --it-color-link-base: #2e6da4; --it-color-link-hover: #214e75; --it-color-text-muted: #666666; --it-color-text-secondary: #5c5c5c; --it-color-border-secondary: #808080; /* L'albero della pratica (DGWGEOWORK-10141): i colori dei nodi, del pulsante «Wizard» e della barra del nodo selezionato, letti da tree.html e dall'icona del nodo da completare (TreeNodeService). Dove la tavolozza ha il ruolo, l'albero lo prende da li'; il resto sono tinte dell'albero, scurite dalla loro di prima finche' reggono 4,5:1 sul bianco e sui due fondi di jstree (sotto il mouse #e7f4f9, selezionato #beebff). Rapporti su bianco / mouse / selezione: da completare, rimosso #a4262c 7,26 / 6,47 / 5,71 il rosso degli errori (DGWGEOWORK-10135) consolidato #7a5a00 6,38 / 5,69 / 5,02 era darkgoldenrod 3,25 / 2,90 / 2,56 stato corrente #006400 7,44 / 6,63 / 5,85 era green 5,14 / 4,58 / 4,04; non il verde acqua della tavolozza: si confonderebbe col grigio-verde dei nodi di un'altra pratica stato precedente #8a2be2 5,96 / 5,31 / 4,69 invariato (blueviolet) altra pratica #2f4f4f 8,93 / 7,95 / 7,02 invariato (darkslategray) pratica aperta nero su #ff8c00 9,0 era bianco 2,33; il fondo resta Wizard il pulsante di cambio stato che gli sta accanto («Presenta»): bianco su --change-status-submit-btn-bg-color #008000 5,14, in hover lo stesso brightness(0.85) di big.css 6,59 (era #efefef 4,47 / 3,43) barra del nodo selezionato primary #2e6da4 5,47 sul bianco, 4,30 sul fondo di selezione (>= 3) */ --gw-tree-node-to-complete-color: var(--gw-field-error-color, #a4262c); --gw-tree-node-removed-color: var(--gw-field-error-color, #a4262c); --gw-tree-node-consolidated-color: #7a5a00; --gw-tree-node-same-version-color: #006400; --gw-tree-node-previous-version-color: #8a2be2; --gw-tree-node-another-rf-color: #2f4f4f; --gw-tree-node-current-rf-color: #000000; --gw-tree-node-current-rf-background: #ff8c00; --gw-tree-node-selected-bar-color: var(--it-color-background-primary, #2e6da4); --gw-tree-wizard-color: var(--change-status-submit-btn-color, #ffffff); --gw-tree-wizard-background: var(--change-status-submit-btn-bg-color, #008000); --gw-tree-wizard-readonly-color: #efefef; --gw-tree-wizard-readonly-background: #814eab; /* Il pannello di debug sopra l'albero (debugConsole.html, solo utenti Berenice): link «Vista corrente» e «Modello», pulsante «Legenda», schede e legenda degli OpenType. Rapporti su bianco e su #f3f4f6, il fondo dei numeri della legenda: accento (link; numero e barretta #b45309 5,02 / 4,56 era #f59e0b 2,15 e #d5b743 1,79 degli OpenType interni, via --internal di tree.html) accento in hover e focus #92400e 7,09, 5,73 sul grigio #e5e7eb del pulsante testo #1f2937 14,68 / 13,34 era #6b7280 4,83 / 4,39 scheda dell'OpenType attivo bianco su #4b5563 7,56 era bianco su #b3b3b3 2,10 Il blu degli OpenType esterni (--external #153e67 di tree.html, 9,96) regge gia'. */ --gw-tree-debug-accent-color: #b45309; --gw-tree-debug-accent-hover-color: #92400e; --gw-tree-debug-text-color: #1f2937; --gw-tree-debug-active-background: #4b5563; } /* ---- Link e testo di supporto --------------------------------------------------------------- */ a { color: var(--it-color-link-base, #2e6da4); } a:hover, a:focus { color: var(--it-color-link-hover, #214e75); } .help-block { color: var(--it-color-text-muted, #666666); } /* ---- Pulsanti verdi: .btn-success di Bootstrap, .btn.green / .green-meadow / .green-haze di Metronic */ .btn-success, .btn.green:not(.btn-outline), .btn.green-meadow:not(.btn-outline), .btn.green-haze:not(.btn-outline), .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success.focus, .btn.green:not(.btn-outline).disabled:hover, .btn.green:not(.btn-outline).disabled:focus, .btn.green:not(.btn-outline).disabled.focus, .btn.green:not(.btn-outline)[disabled]:hover, .btn.green:not(.btn-outline)[disabled]:focus, .btn.green:not(.btn-outline)[disabled].focus, fieldset[disabled] .btn.green:not(.btn-outline):hover, fieldset[disabled] .btn.green:not(.btn-outline):focus, fieldset[disabled] .btn.green:not(.btn-outline).focus, .btn.green-meadow:not(.btn-outline).disabled:hover, .btn.green-meadow:not(.btn-outline).disabled:focus, .btn.green-meadow:not(.btn-outline).disabled.focus, .btn.green-meadow:not(.btn-outline)[disabled]:hover, .btn.green-meadow:not(.btn-outline)[disabled]:focus, .btn.green-meadow:not(.btn-outline)[disabled].focus, fieldset[disabled] .btn.green-meadow:not(.btn-outline):hover, fieldset[disabled] .btn.green-meadow:not(.btn-outline):focus, fieldset[disabled] .btn.green-meadow:not(.btn-outline).focus, .btn.green-haze:not(.btn-outline).disabled:hover, .btn.green-haze:not(.btn-outline).disabled:focus, .btn.green-haze:not(.btn-outline).disabled.focus, .btn.green-haze:not(.btn-outline)[disabled]:hover, .btn.green-haze:not(.btn-outline)[disabled]:focus, .btn.green-haze:not(.btn-outline)[disabled].focus, fieldset[disabled] .btn.green-haze:not(.btn-outline):hover, fieldset[disabled] .btn.green-haze:not(.btn-outline):focus, fieldset[disabled] .btn.green-haze:not(.btn-outline).focus { color: #fff; background-color: var(--it-color-background-success, #137a84); border-color: var(--it-color-background-success, #137a84); } .btn-success:focus, .btn-success.focus, .btn-success:hover, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle, .btn.green:not(.btn-outline):focus, .btn.green:not(.btn-outline).focus, .btn.green:not(.btn-outline):hover, .btn.green:not(.btn-outline):active, .btn.green:not(.btn-outline).active, .open > .btn.green:not(.btn-outline).dropdown-toggle, .btn.green-meadow:not(.btn-outline):focus, .btn.green-meadow:not(.btn-outline).focus, .btn.green-meadow:not(.btn-outline):hover, .btn.green-meadow:not(.btn-outline):active, .btn.green-meadow:not(.btn-outline).active, .open > .btn.green-meadow:not(.btn-outline).dropdown-toggle, .btn.green-haze:not(.btn-outline):focus, .btn.green-haze:not(.btn-outline).focus, .btn.green-haze:not(.btn-outline):hover, .btn.green-haze:not(.btn-outline):active, .btn.green-haze:not(.btn-outline).active, .open > .btn.green-haze:not(.btn-outline).dropdown-toggle { color: #fff; background-color: var(--it-color-background-success-hover, #10646d); border-color: var(--it-color-background-success-active, #0d545b); } .btn-success:active:hover, .btn-success:active:focus, .btn-success:active.focus, .btn-success.active:hover, .btn-success.active:focus, .btn-success.active.focus, .open > .btn-success.dropdown-toggle:hover, .open > .btn-success.dropdown-toggle:focus, .open > .btn-success.dropdown-toggle.focus, .btn.green:not(.btn-outline):active:hover, .btn.green:not(.btn-outline):active:focus, .btn.green:not(.btn-outline):active.focus, .btn.green:not(.btn-outline).active:hover, .btn.green:not(.btn-outline).active:focus, .btn.green:not(.btn-outline).active.focus, .open > .btn.green:not(.btn-outline).dropdown-toggle:hover, .open > .btn.green:not(.btn-outline).dropdown-toggle:focus, .open > .btn.green:not(.btn-outline).dropdown-toggle.focus, .btn.green-meadow:not(.btn-outline):active:hover, .btn.green-meadow:not(.btn-outline):active:focus, .btn.green-meadow:not(.btn-outline):active.focus, .btn.green-meadow:not(.btn-outline).active:hover, .btn.green-meadow:not(.btn-outline).active:focus, .btn.green-meadow:not(.btn-outline).active.focus, .open > .btn.green-meadow:not(.btn-outline).dropdown-toggle:hover, .open > .btn.green-meadow:not(.btn-outline).dropdown-toggle:focus, .open > .btn.green-meadow:not(.btn-outline).dropdown-toggle.focus, .btn.green-haze:not(.btn-outline):active:hover, .btn.green-haze:not(.btn-outline):active:focus, .btn.green-haze:not(.btn-outline):active.focus, .btn.green-haze:not(.btn-outline).active:hover, .btn.green-haze:not(.btn-outline).active:focus, .btn.green-haze:not(.btn-outline).active.focus, .open > .btn.green-haze:not(.btn-outline).dropdown-toggle:hover, .open > .btn.green-haze:not(.btn-outline).dropdown-toggle:focus, .open > .btn.green-haze:not(.btn-outline).dropdown-toggle.focus { background-color: var(--it-color-background-success-active, #0d545b); } .btn-success .badge, .btn.green:not(.btn-outline) .badge, .btn.green-meadow:not(.btn-outline) .badge, .btn.green-haze:not(.btn-outline) .badge { color: var(--it-color-background-success, #137a84); background-color: #fff; } /* ---- Pulsanti blu di Metronic (.btn.blue): con .btn-primary li colora big.css col colore azione */ .btn.blue:not(.btn-outline), .btn.blue:not(.btn-outline).disabled:hover, .btn.blue:not(.btn-outline).disabled:focus, .btn.blue:not(.btn-outline).disabled.focus, .btn.blue:not(.btn-outline)[disabled]:hover, .btn.blue:not(.btn-outline)[disabled]:focus, .btn.blue:not(.btn-outline)[disabled].focus, fieldset[disabled] .btn.blue:not(.btn-outline):hover, fieldset[disabled] .btn.blue:not(.btn-outline):focus, fieldset[disabled] .btn.blue:not(.btn-outline).focus { color: #fff; background-color: var(--it-color-background-primary, #2e6da4); border-color: var(--it-color-background-primary, #2e6da4); } .btn.blue:not(.btn-outline):focus, .btn.blue:not(.btn-outline).focus, .btn.blue:not(.btn-outline):hover, .btn.blue:not(.btn-outline):active, .btn.blue:not(.btn-outline).active, .open > .btn.blue:not(.btn-outline).dropdown-toggle { color: #fff; background-color: var(--it-color-background-primary-hover, #275c8b); border-color: var(--it-color-background-primary-active, #214e75); } .btn.blue:not(.btn-outline):active:hover, .btn.blue:not(.btn-outline):active:focus, .btn.blue:not(.btn-outline):active.focus, .btn.blue:not(.btn-outline).active:hover, .btn.blue:not(.btn-outline).active:focus, .btn.blue:not(.btn-outline).active.focus, .open > .btn.blue:not(.btn-outline).dropdown-toggle:hover, .open > .btn.blue:not(.btn-outline).dropdown-toggle:focus, .open > .btn.blue:not(.btn-outline).dropdown-toggle.focus { background-color: var(--it-color-background-primary-active, #214e75); } .btn.blue:not(.btn-outline) .badge { color: var(--it-color-background-primary, #2e6da4); background-color: #fff; } /* ---- Pulsanti rossi: .btn-danger di Bootstrap, .btn.red di Metronic ------------------------- */ .btn-danger, .btn.red:not(.btn-outline), .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger.focus, .btn.red:not(.btn-outline).disabled:hover, .btn.red:not(.btn-outline).disabled:focus, .btn.red:not(.btn-outline).disabled.focus, .btn.red:not(.btn-outline)[disabled]:hover, .btn.red:not(.btn-outline)[disabled]:focus, .btn.red:not(.btn-outline)[disabled].focus, fieldset[disabled] .btn.red:not(.btn-outline):hover, fieldset[disabled] .btn.red:not(.btn-outline):focus, fieldset[disabled] .btn.red:not(.btn-outline).focus { color: #fff; background-color: var(--it-color-background-danger, #d02b38); border-color: var(--it-color-background-danger, #d02b38); } .btn-danger:focus, .btn-danger.focus, .btn-danger:hover, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle, .btn.red:not(.btn-outline):focus, .btn.red:not(.btn-outline).focus, .btn.red:not(.btn-outline):hover, .btn.red:not(.btn-outline):active, .btn.red:not(.btn-outline).active, .open > .btn.red:not(.btn-outline).dropdown-toggle { color: #fff; background-color: var(--it-color-background-danger-hover, #a4262c); border-color: var(--it-color-background-danger-active, #8b2025); } .btn-danger:active:hover, .btn-danger:active:focus, .btn-danger:active.focus, .btn-danger.active:hover, .btn-danger.active:focus, .btn-danger.active.focus, .open > .btn-danger.dropdown-toggle:hover, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle.focus, .btn.red:not(.btn-outline):active:hover, .btn.red:not(.btn-outline):active:focus, .btn.red:not(.btn-outline):active.focus, .btn.red:not(.btn-outline).active:hover, .btn.red:not(.btn-outline).active:focus, .btn.red:not(.btn-outline).active.focus, .open > .btn.red:not(.btn-outline).dropdown-toggle:hover, .open > .btn.red:not(.btn-outline).dropdown-toggle:focus, .open > .btn.red:not(.btn-outline).dropdown-toggle.focus { background-color: var(--it-color-background-danger-active, #8b2025); } .btn-danger .badge, .btn.red:not(.btn-outline) .badge { color: var(--it-color-background-danger, #d02b38); background-color: #fff; } /* ---- Pulsanti gialli: il fondo resta giallo, il testo e' quello che big.css gia' scrive nero -- */ .btn-warning, .btn-warning:focus, .btn-warning.focus, .btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn.yellow:not(.btn-outline), .btn.yellow:not(.btn-outline):focus, .btn.yellow:not(.btn-outline).focus, .btn.yellow:not(.btn-outline):hover, .btn.yellow:not(.btn-outline):active, .btn.yellow:not(.btn-outline).active { color: var(--btn-warning-color, #000); } /* ---- Etichette e contatori ------------------------------------------------------------------- */ /* Il contatore senza variante: Bootstrap lo dipinge #777 (4,48:1). Sta PRIMA delle varianti, che hanno la sua stessa specificita' e devono vincere. */ .badge { background-color: var(--it-color-background-secondary, #5d6878); } .label-default, .badge-default { background-color: var(--it-color-background-secondary, #5d6878); } .label-default[href]:hover, .label-default[href]:focus { background-color: var(--it-color-background-secondary-hover, #4b5461); } .label-success, .badge-success { background-color: var(--it-color-background-success, #137a84); } .label-success[href]:hover, .label-success[href]:focus { background-color: var(--it-color-background-success-hover, #10646d); } .label-info, .badge-info { background-color: var(--gw-color-background-info, #2a74d2); } .label-info[href]:hover, .label-info[href]:focus { background-color: var(--gw-color-background-info-hover, #215aa3); } .label-primary, .badge-primary { background-color: var(--it-color-background-primary, #2e6da4); } .label-primary[href]:hover, .label-primary[href]:focus { background-color: var(--it-color-background-primary-hover, #275c8b); } /* Il fondo giallo si ridice per il contatore: la regola su `.badge` qui sopra coprirebbe quello di Metronic, che ha la stessa specificita' e viene prima. */ .badge-warning { background-color: var(--it-color-background-warning, #f1c40f); } .label-warning, .badge-warning, .label-warning[href]:hover, .label-warning[href]:focus { color: var(--btn-warning-color, #000); } /* ---- Opzione evidenziata delle tendine ui-select ---------------------------------------------- `select.css` viene dopo questo foglio: `.ui-select-choices` in piu' nel selettore (la lista che contiene le righe) gli fa vincere per specificita'. */ .ui-select-bootstrap .ui-select-choices .ui-select-choices-row.active > span { color: #fff; background-color: var(--it-color-background-primary, #2e6da4); } /* ---- SweetAlert ------------------------------------------------------------------------------- La seconda copia di `sweet-alert.css` (Scripts/BIG) viene dopo questo foglio: `div` in piu' nel selettore gli fa vincere per specificita'. Il «conferma» lo colora `big.css` (colore azione, `!important` contro lo stile in linea della libreria); qui sotto c'e' il suo stesso selettore, che vale solo dove `big.css` non arriva, le pagine prima del login. */ div.sweet-alert p { color: var(--it-color-text-secondary, #5c5c5c); } div.sweet-alert button { color: #fff; background-color: var(--it-color-background-primary, #2e6da4); } div.sweet-alert button:hover { background-color: var(--it-color-background-primary-hover, #275c8b); } div.sweet-alert button:active { background-color: var(--it-color-background-primary-active, #214e75); } div.sweet-alert button.cancel { background-color: var(--it-color-background-secondary, #5d6878); } div.sweet-alert button.cancel:hover { background-color: var(--it-color-background-secondary-hover, #4b5461); } div.sweet-alert button.cancel:active { background-color: var(--it-color-background-secondary-active, #424955); } .sweet-alert button.confirm { background-color: var(--action-button-color, #0166cc) !important; } /* ---- Schede scorrevoli (angular-ui-tab-scroll, modale anagrafica) ----------------------------- Il confine fra scheda e fondo era #d9d9d9 (1,41:1 sul bianco), quello inferiore #999 (2,85:1). Le regole sono quelle di `angular-ui-tab-scroll-flat.css`, che viene prima di questo foglio. */ .ui-tabs-scrollable > .spacer > div:first-child > .nav-tabs > li > a { border-top-color: var(--it-color-border-secondary, #808080); border-left-color: var(--it-color-border-secondary, #808080); } .ui-tabs-scrollable > .spacer > div:first-child > .nav-tabs > li.active > a { border-top-color: var(--it-color-border-secondary, #808080); border-left-color: var(--it-color-border-secondary, #808080); border-right-color: var(--it-color-border-secondary, #808080); } .ui-tabs-scrollable > .spacer > div:first-child > .nav-tabs > li:not(.active) > a { border-bottom-color: var(--it-color-border-secondary, #808080); } .ui-tabs-scrollable > .spacer > div:first-child > .tab-content { border-top-color: var(--it-color-border-secondary, #808080); } .ui-tabs-scrollable > .spacer.hidden-buttons > div:first-child > .nav-tabs > li:last-child > a, .ui-tabs-scrollable > .spacer.hidden-buttons > div:first-child > .nav-tabs > li:last-child.active > a { border-right-color: var(--it-color-border-secondary, #808080); } .ui-tabs-scrollable > .nav-button, .ui-tabs-scrollable > .dropdown > .dropdown-toggle { border-color: var(--it-color-border-secondary, #808080); }