/* * Variabili di tema per l'area admin (AdminLTE). Tema chiaro di default, * scuro attivato con [data-theme="dark"] sull'. Solo le variabili e * le regole minime per provare il meccanismo end-to-end — la reskin * completa di ogni componente AdminLTE è lavoro incrementale, pagina dopo * pagina, non tutto in un colpo solo. */ :root { --bg-body: #f4f6f9; --bg-surface: #ffffff; --text-primary: #212529; --text-secondary: #6c757d; --border-color: #dee2e6; --sidebar-bg: #343a40; --sidebar-text: #c2c7d0; } :root[data-theme="dark"] { --bg-body: #181a1b; --bg-surface: #22262a; --text-primary: #e8e6e3; --text-secondary: #a9b0b6; --border-color: #3a3f44; --sidebar-bg: #14161a; --sidebar-text: #c2c7d0; } /* * NON scopare a "body.hold-transition": AdminLTE rimuove quella classe * dal 50ms dopo il caricamento (setTimeout in adminlte.min.js, * serve solo a disabilitare le transizioni CSS durante il primo paint). * Scoparci sopra faceva sparire il colore del tema pochi istanti dopo il * caricamento, tornando al default Bootstrap (#212529, quasi nero) — * il testo "diventa grigio" segnalato da Ivan. Il colore del tema deve * restare applicato sempre, non solo nella finestra iniziale. */ body { background-color: var(--bg-body); color: var(--text-primary); } .content-wrapper { background-color: var(--bg-body); } .card { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); } .main-sidebar { background-color: var(--sidebar-bg) !important; } .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link { color: var(--sidebar-text); } /* * .main-sidebar è sempre scura (sidebar-dark-primary), a prescindere dal * tema chiaro/scuro — ma la regola generica "a:not(.btn):not(.nav-link) * :not(.page-link) { color: var(--text-primary) }" più sotto in questo * file la raggiunge comunque (brand-link e nome utente non hanno nessuna * di quelle classi). In tema chiaro --text-primary è quasi nero su sfondo * quasi nero: 1.34:1, ben sotto la soglia WCAG AA. In tema scuro * funzionava per puro caso (--text-primary chiaro lì). Fix mirato solo * alla sidebar per ora, riusa --sidebar-text già verificato sui nav-link * (6.77:1 chiaro / 10.66:1 scuro) — non tocca la regola generica. */ .main-sidebar .brand-link, .main-sidebar .user-panel .info a { color: var(--sidebar-text) !important; } .content-header { background-color: var(--bg-body); } .content-header h1, .breadcrumb-item.active { color: var(--text-primary); } .breadcrumb { background-color: var(--bg-surface); } .breadcrumb-item a { color: var(--text-secondary); } /* Tabelle: Bootstrap ha colori chiari fissi per bordi/righe alternate */ .table { color: var(--text-primary); } .table td, .table th { border-color: var(--border-color); } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(127, 127, 127, 0.06); } .table thead th { border-color: var(--border-color); } /* Form: input/select/textarea ereditano lo sfondo del body chiaro di default */ .form-control { background-color: var(--bg-surface); color: var(--text-primary); border-color: var(--border-color); } .form-control:focus { background-color: var(--bg-surface); color: var(--text-primary); } label, .custom-control-label { color: var(--text-primary); } /* Tab-nav (nav-pills) usate nelle sotto-pagine di amministrazione/ruoli */ .nav-pills .nav-link:not(.active) { color: var(--text-secondary); } /* * Bootstrap fissa .text-muted/.text-secondary a #6c757d con !important, * ignaro del tema — contrasto 3.2-3.7:1 su sfondo scuro, sotto la soglia * WCAG AA (4.5:1 per testo normale, dogma #11). Usate ovunque per le * etichette nelle tabelle di dettaglio (Microchip, Razza, Conduttore...). * Serve !important per vincere quello di Bootstrap a parità di specificità * (source order: questo file è l'ultimo caricato). */ .text-muted, .text-secondary { color: var(--text-secondary) !important; } a:not(.btn):not(.nav-link):not(.page-link) { color: var(--text-primary); } /* * Menu a tendina utente (navbar in alto): Bootstrap fissa .dropdown-menu a * uno sfondo bianco fisso, ignaro del tema. La regola generica sopra * ("a:not(.btn)...") colora comunque il testo dei .dropdown-item con * --text-primary — in tema scuro quel colore è chiaro, su sfondo bianco * fisso il contrasto crolla (segnalato illeggibile da Ivan). Tema anche * qui lo sfondo, non solo il testo. */ .dropdown-menu { background-color: var(--bg-surface); border-color: var(--border-color); } .dropdown-item:hover, .dropdown-item:focus { background-color: rgba(127, 127, 127, 0.12); color: var(--text-primary); } .dropdown-divider { border-top-color: var(--border-color); } code { background-color: rgba(127, 127, 127, 0.12); padding: 0.1rem 0.3rem; border-radius: 0.2rem; } /* Intestazioni colonna ordinabili (tabelle con data-sort, es. admin/rescue-team) */ th.sortable { cursor: pointer; user-select: none; } th.sortable::after { content: " \2195"; opacity: 0.5; font-size: 0.7rem; } th.sortable.asc::after { content: " \25B2"; opacity: 1; } th.sortable.desc::after { content: " \25BC"; opacity: 1; } /* * Righe tabella contestuali (.table-danger/.table-warning, es. gare * annullate in admin/calendario e admin/eventi) — Bootstrap le fissa a * uno sfondo pastello chiaro pensato per testo scuro. In dark mode il * nostro testo chiaro (.table { color: var(--text-primary) }) ci finisce * sopra e si confonde. Sfondi scuri desaturati, stesso significato * cromatico (rosso/giallo), contrasto verificato >7:1 col testo chiaro. */ :root[data-theme="dark"] .table-danger, :root[data-theme="dark"] .table-danger > td, :root[data-theme="dark"] .table-danger > th { background-color: #4a1f24 !important; } :root[data-theme="dark"] .table-warning, :root[data-theme="dark"] .table-warning > td, :root[data-theme="dark"] .table-warning > th { background-color: #4a3a12 !important; } /* * Stesso fix esteso alle altre classi contestuali di Bootstrap * (.table-secondary/.table-success/.table-info/.table-primary), tutte * con lo stesso problema: sfondo pastello chiaro fisso, illeggibile col * nostro testo chiaro in tema scuro (segnalato da Ivan su una riga * "gara annullata" .table-secondary in /gara, praticamente invisibile). * Copre anche lo stato :hover di .table-hover, che Bootstrap fissa a un * pastello leggermente più scuro ma sempre chiaro. */ :root[data-theme="dark"] .table-secondary, :root[data-theme="dark"] .table-secondary > td, :root[data-theme="dark"] .table-secondary > th, :root[data-theme="dark"] .table-hover .table-secondary:hover, :root[data-theme="dark"] .table-hover .table-secondary:hover > td, :root[data-theme="dark"] .table-hover .table-secondary:hover > th { background-color: #3a3f44 !important; } :root[data-theme="dark"] .table-success, :root[data-theme="dark"] .table-success > td, :root[data-theme="dark"] .table-success > th, :root[data-theme="dark"] .table-hover .table-success:hover, :root[data-theme="dark"] .table-hover .table-success:hover > td, :root[data-theme="dark"] .table-hover .table-success:hover > th { background-color: #1c3d28 !important; } :root[data-theme="dark"] .table-info, :root[data-theme="dark"] .table-info > td, :root[data-theme="dark"] .table-info > th, :root[data-theme="dark"] .table-hover .table-info:hover, :root[data-theme="dark"] .table-hover .table-info:hover > td, :root[data-theme="dark"] .table-hover .table-info:hover > th { background-color: #12404a !important; } :root[data-theme="dark"] .table-primary, :root[data-theme="dark"] .table-primary > td, :root[data-theme="dark"] .table-primary > th, :root[data-theme="dark"] .table-hover .table-primary:hover, :root[data-theme="dark"] .table-hover .table-primary:hover > td, :root[data-theme="dark"] .table-hover .table-primary:hover > th { background-color: #1f2f4a !important; } :root[data-theme="dark"] .table-hover .table-danger:hover, :root[data-theme="dark"] .table-hover .table-danger:hover > td, :root[data-theme="dark"] .table-hover .table-danger:hover > th { background-color: #5a262c !important; } :root[data-theme="dark"] .table-hover .table-warning:hover, :root[data-theme="dark"] .table-hover .table-warning:hover > td, :root[data-theme="dark"] .table-hover .table-warning:hover > th { background-color: #5a4716 !important; }