/* ============================================================ SPEEDY - TEMA SCURO (overlay) Fase 1: fondamenta (body, box, tabelle, form, header, link) ------------------------------------------------------------ REGOLA D'ORO: ogni selettore e' prefissato con body.theme-dark. Senza quella classe sul questo file e' completamente inerte: il tema chiaro non viene toccato in alcun modo. Le fatture non caricano questo file e non hanno la classe. ============================================================ */ body.theme-dark { /* --- Palette --- */ --sd-bg-page: #17191d; /* sfondo pagina */ --sd-bg-box: #212429; /* card / .box */ --sd-bg-box-alt: #262a31; /* top panel, fasce */ --sd-bg-input: #1a1d22; /* campi input */ --sd-bg-cell: #24272d; /* celle tabella (era #f0f0f0) */ --sd-bg-thead: #2a2f36; /* intestazioni tabella (era #ddd) */ --sd-border: #343a43; /* bordi generici (era #ccc/#bbb) */ --sd-border-strong: #434b56; --sd-text: #cfd3d9; /* testo principale (era #333/#444) */ --sd-text-muted: #8a919c; --sd-text-bright: #eef1f4; --sd-link: #6ea8dc; /* era #255C90 */ --sd-link-hover: #8cc0ee; /* era #317ABF */ --sd-h2-grad-top: #33415c; /* barra titolo box (sostituisce 1.png) */ --sd-h2-grad-bottom: #22304a; --sd-h2-border: #1d2c43; /* invariato dal tema chiaro */ } /* ------------------------------------------------------------ 1. PAGINA E TIPOGRAFIA ------------------------------------------------------------ */ body.theme-dark { background: var(--sd-bg-page); /* niente pattern/13.png */ color: var(--sd-text); } body.theme-dark .container { color: var(--sd-text); } body.theme-dark a { color: var(--sd-link); } body.theme-dark a:hover { color: var(--sd-link-hover); } body.theme-dark h1, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { color: var(--sd-text-bright); } /* ------------------------------------------------------------ 2. BOX E BLOCCHI (le "card" bianche) ------------------------------------------------------------ */ body.theme-dark .box { background: var(--sd-bg-box); border: 1px solid var(--sd-border); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; } /* Barra blu del titolo: via l'immagine 1.png, dentro un gradient con gli stessi toni, cosi' l'identita' visiva resta quella */ body.theme-dark .box h2 { color: var(--sd-text-bright); background: var(--sd-h2-grad-bottom); background: -moz-linear-gradient(top, var(--sd-h2-grad-top) 0%, var(--sd-h2-grad-bottom) 100%); background: -webkit-linear-gradient(top, var(--sd-h2-grad-top) 0%, var(--sd-h2-grad-bottom) 100%); background: linear-gradient(to bottom, var(--sd-h2-grad-top) 0%, var(--sd-h2-grad-bottom) 100%); border: 1px solid var(--sd-h2-border); } body.theme-dark .block .block_in h2 { background: none; border: 0; color: var(--sd-text-bright); } /* Bottone collassa/espandi nell'angolo dei box */ body.theme-dark .box div.hide { border: 1px solid var(--sd-border-strong); background: #2c3037; background: -moz-linear-gradient(top, #343941 0%, #262a30 100%); background: -webkit-linear-gradient(top, #343941 0%, #262a30 100%); background: linear-gradient(to bottom, #343941 0%, #262a30 100%); } body.theme-dark .box div.hide:hover { background: #3a3f48; } /* ------------------------------------------------------------ 3. TOP PANEL (barra con MENU / Benvenuto / Logout) ------------------------------------------------------------ */ body.theme-dark .top_panel .box { background: var(--sd-bg-box-alt); /* niente pattern/17.png */ -webkit-box-shadow: 0 1px 0 0 #0d0e10; -moz-box-shadow: 0 1px 0 0 #0d0e10; box-shadow: 0 1px 0 0 #0d0e10; } body.theme-dark .panel_item li a { color: var(--sd-text); border: 1px solid var(--sd-border-strong); background: #30353d; background: -moz-linear-gradient(top, #3a3f47 0%, #30353d 50%, #282c33 51%, #2e333a 100%); background: -webkit-linear-gradient(top, #3a3f47 0%, #30353d 50%, #282c33 51%, #2e333a 100%); background: linear-gradient(to bottom, #3a3f47 0%, #30353d 50%, #282c33 51%, #2e333a 100%); } body.theme-dark .panel_item li a:hover, body.theme-dark .panel_item li a.hov, body.theme-dark .panel_item li a.active { color: var(--sd-text-bright) !important; background: #3d434c; } /* ------------------------------------------------------------ 4. TABELLE (thead/tbody generici, Repeater_Table, DetailContainer e simili ereditano da qui) ------------------------------------------------------------ */ body.theme-dark thead th { background: var(--sd-bg-thead); border-left: 1px solid var(--sd-border-strong); border-right: 1px solid var(--sd-border-strong); color: var(--sd-text-bright); } body.theme-dark thead th.table-head { color: var(--sd-text-bright); background: #383f48; border: 1px solid #383f48; } body.theme-dark tbody th, body.theme-dark tbody td { border: 1px solid var(--sd-border); background: var(--sd-bg-cell); color: var(--sd-text); } body.theme-dark tfoot th, body.theme-dark tfoot td { background: var(--sd-bg-thead); border: 1px solid var(--sd-border); color: var(--sd-text); } /* ------------------------------------------------------------ 5. FORM: input, textarea, select, fieldset ------------------------------------------------------------ */ body.theme-dark input[type="text"], body.theme-dark input[type="password"] { border: 1px solid var(--sd-border-strong); background-color: var(--sd-bg-input); color: var(--sd-text-bright); } body.theme-dark textarea { border: 1px solid var(--sd-border-strong); background-color: var(--sd-bg-input); color: var(--sd-text-bright); } body.theme-dark select { border: 1px solid var(--sd-border-strong); background-color: var(--sd-bg-input); color: var(--sd-text-bright); } body.theme-dark select option { background-color: var(--sd-bg-input); color: var(--sd-text-bright); } body.theme-dark input::-webkit-input-placeholder, body.theme-dark textarea::-webkit-input-placeholder { color: var(--sd-text-muted); } body.theme-dark input::placeholder, body.theme-dark textarea::placeholder { color: var(--sd-text-muted); } body.theme-dark input[disabled], body.theme-dark input[readonly], body.theme-dark textarea[disabled] { background-color: #22252a; color: var(--sd-text-muted); } body.theme-dark fieldset { border: 1px solid var(--sd-border-strong); background: #23262b; } body.theme-dark legend { background: var(--sd-bg-box); border: 1px solid var(--sd-border-strong); color: var(--sd-text-bright); } /* NOTA: i bottoni .button (green/orange/red/blue) restano volutamente invariati: i gradient colorati funzionano gia' bene su fondo scuro e sono l'identita' di Speedy. */ /* ------------------------------------------------------------ 6. RITOCCHI VARI ------------------------------------------------------------ */ /* I chip colorati (style1..12) restano invariati: sono saturi e leggibili anche su scuro. Correggo solo il grigio chiaro dello style1 che si perderebbe. */ body.theme-dark mark.style1 { background-color: #3a4048; color: var(--sd-text-bright); } body.theme-dark hr { border-color: var(--sd-border); background: var(--sd-border); } /* Scrollbar coerenti (WebKit) */ body.theme-dark ::-webkit-scrollbar { width: 12px; height: 12px; } body.theme-dark ::-webkit-scrollbar-track { background: var(--sd-bg-page); } body.theme-dark ::-webkit-scrollbar-thumb { background: #3c434d; border-radius: 6px; border: 2px solid var(--sd-bg-page); } body.theme-dark ::-webkit-scrollbar-thumb:hover { background: #4a525e; } /* ------------------------------------------------------------ 7. PLUGIN CHOSEN (dropdown con ricerca, classi chzn-*) ------------------------------------------------------------ */ /* Controllo chiuso */ body.theme-dark .chzn-container-single .chzn-single { background-color: var(--sd-bg-input); background-image: none; border: 1px solid var(--sd-border-strong); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: var(--sd-text-bright); } body.theme-dark .chzn-container-single .chzn-single span { color: var(--sd-text-bright); } /* Riquadro freccetta: via lo sprite, freccia disegnata in CSS */ body.theme-dark .chzn-container-single .chzn-single div { background: transparent; background-image: none; border-left: 1px solid var(--sd-border-strong); } body.theme-dark .chzn-container-single .chzn-single div b { background: none !important; position: relative; } body.theme-dark .chzn-container-single .chzn-single div b:after { content: ""; position: absolute; top: 50%; left: 50%; margin: -2px 0 0 -4px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--sd-text-muted); } body.theme-dark .chzn-container-active .chzn-single-with-drop div b:after { border-top: none; border-bottom: 5px solid var(--sd-text-muted); } /* Pannello aperto */ body.theme-dark .chzn-container .chzn-drop { background: var(--sd-bg-box); border: 1px solid var(--sd-border-strong); -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } body.theme-dark .chzn-container-active .chzn-single-with-drop { background-color: var(--sd-bg-input); background-image: none; border: 1px solid var(--sd-border-strong); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Campo di ricerca dentro il pannello (perde la lente dello sprite: era grigio scuro, sul fondo scuro non si vedrebbe) */ body.theme-dark .chzn-container-single .chzn-search input { background: var(--sd-bg-input) !important; border: 1px solid var(--sd-border-strong); color: var(--sd-text-bright); } /* Voci della lista */ body.theme-dark .chzn-container .chzn-results li { color: var(--sd-text); } body.theme-dark .chzn-container .chzn-results .highlighted { background: var(--sd-h2-grad-top); background-image: none; color: var(--sd-text-bright); } body.theme-dark .chzn-container .chzn-results .group-result { color: var(--sd-text-muted); } body.theme-dark .chzn-container .chzn-results .no-results { background: var(--sd-bg-cell); color: var(--sd-text-muted); } /* Evidenziazione del testo cercato */ body.theme-dark .chzn-container .chzn-results li em { background: rgba(255, 217, 102, 0.25); color: inherit; } body.theme-dark .chzn-container .chzn-results .highlighted em { background: transparent; } /* Select multipli (chips) */ body.theme-dark .chzn-container-multi .chzn-choices { background-color: var(--sd-bg-input); background-image: none; border: 1px solid var(--sd-border-strong); } body.theme-dark .chzn-container-multi .chzn-choices .search-field input { color: var(--sd-text-bright) !important; } body.theme-dark .chzn-container-multi .chzn-choices .search-field .default { color: var(--sd-text-muted); } body.theme-dark .chzn-container-multi .chzn-choices .search-choice { background-color: #333a43; background-image: none; border: 1px solid var(--sd-border-strong); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; color: var(--sd-text); } body.theme-dark .chzn-container-multi .chzn-choices .search-choice-focus { background: #3d4550; } /* Disabilitato */ body.theme-dark .chzn-disabled .chzn-single { background-color: #22252a; color: var(--sd-text-muted); } /* ------------------------------------------------------------ 8. DATATABLES: righe gradeA/C/X/U e colonne sorting_1/2/3 (demo_table_jui.css). Il code-behind assegna gradeA + odd/even alle righe e sorting_1 alla cella "Pagato": qui rimappiamo le tinte chiare in equivalenti scuri con lo stesso significato (verde = pagato/ok, rosso = errore, blu = info, grigio = n/d). Specificita' volutamente maggiore delle regole originali. ------------------------------------------------------------ */ /* Colonna ordinata neutra (tinta blu) */ body.theme-dark tr.odd td.sorting_1 { background-color: #272d3a; } body.theme-dark tr.odd td.sorting_2 { background-color: #262b37; } body.theme-dark tr.odd td.sorting_3 { background-color: #252a34; } body.theme-dark tr.even td.sorting_1 { background-color: #232833; } body.theme-dark tr.even td.sorting_2 { background-color: #232730; } body.theme-dark tr.even td.sorting_3 { background-color: #22262e; } /* gradeA = ok/pagato (verde) */ body.theme-dark table.display tr.odd.gradeA, body.theme-dark tr.odd.gradeA td, body.theme-dark table.display tr.even.gradeA, body.theme-dark tr.even.gradeA td { background-color: var(--sd-bg-cell); } body.theme-dark tr.odd.gradeA td.sorting_1 { background-color: #1f3d27; color: #a9d8b4; } body.theme-dark tr.odd.gradeA td.sorting_2, body.theme-dark tr.odd.gradeA td.sorting_3 { background-color: #224230; color: #a9d8b4; } body.theme-dark tr.even.gradeA td.sorting_1 { background-color: #24462e; color: #a9d8b4; } body.theme-dark tr.even.gradeA td.sorting_2, body.theme-dark tr.even.gradeA td.sorting_3 { background-color: #274b33; color: #a9d8b4; } /* gradeC = info (blu) */ body.theme-dark tr.odd.gradeC td.sorting_1, body.theme-dark tr.odd.gradeC td.sorting_2, body.theme-dark tr.odd.gradeC td.sorting_3 { background-color: #272d46; color: #b3bce8; } body.theme-dark tr.even.gradeC td.sorting_1, body.theme-dark tr.even.gradeC td.sorting_2, body.theme-dark tr.even.gradeC td.sorting_3 { background-color: #2b314d; color: #b3bce8; } /* gradeX = errore (rosso) */ body.theme-dark tr.odd.gradeX td.sorting_1, body.theme-dark tr.odd.gradeX td.sorting_2, body.theme-dark tr.odd.gradeX td.sorting_3 { background-color: #46262a; color: #e5b3b8; } body.theme-dark tr.even.gradeX td.sorting_1, body.theme-dark tr.even.gradeX td.sorting_2, body.theme-dark tr.even.gradeX td.sorting_3 { background-color: #4d2b30; color: #e5b3b8; } /* gradeU = non disponibile (grigio) */ body.theme-dark tr.odd.gradeU td.sorting_1, body.theme-dark tr.odd.gradeU td.sorting_2, body.theme-dark tr.odd.gradeU td.sorting_3 { background-color: #2e3238; } body.theme-dark tr.even.gradeU td.sorting_1, body.theme-dark tr.even.gradeU td.sorting_2, body.theme-dark tr.even.gradeU td.sorting_3 { background-color: #33373e; } /* Riga selezionata */ body.theme-dark table.display tr.odd.row_selected td, body.theme-dark table.display tr.even.row_selected td { background-color: var(--sd-h2-grad-top); color: var(--sd-text-bright); } /* ------------------------------------------------------------ 9. TAB "ENERGIA ELETTRICA" / "GAS" (call_button, call_button2) ------------------------------------------------------------ */ body.theme-dark .call_button, body.theme-dark .call_button2 { border: 1px solid var(--sd-border-strong); background: #2c3037; background: -moz-linear-gradient(top, #343941 0%, #262a30 100%); background: -webkit-linear-gradient(top, #343941 0%, #262a30 100%); background: linear-gradient(to bottom, #343941 0%, #262a30 100%); color: var(--sd-text); } body.theme-dark .call_button:hover, body.theme-dark .call_button2:hover { background: #3a3f48; } body.theme-dark span.m_icon3 { border-right: 1px solid var(--sd-border-strong); } /* ------------------------------------------------------------ 10. GRAFICI HIGHCHARTS 8 Highcharts disegna SVG: dove imposta i colori come attributi basta la regola CSS, dove li mette nello style inline dei serve !important. I colori delle serie (F1 rosso, F2 arancio, F3 grigio...) restano volutamente invariati: sono semantici e funzionano bene sul fondo scuro. NOTA: l'export PNG dal menu hamburger continua a generare il grafico coi colori originali chiari (renderizza dalle opzioni JS, non dal CSS). ------------------------------------------------------------ */ /* Sfondo e cornice del grafico */ body.theme-dark .highcharts-background { fill: var(--sd-bg-box); stroke: var(--sd-border); } body.theme-dark .highcharts-plot-background { fill: var(--sd-bg-input); } body.theme-dark .highcharts-plot-border { stroke: var(--sd-border); } /* Titoli e testi */ body.theme-dark .highcharts-title, body.theme-dark .highcharts-title tspan, body.theme-dark .highcharts-subtitle, body.theme-dark .highcharts-subtitle tspan { fill: var(--sd-text-bright) !important; color: var(--sd-text-bright) !important; } body.theme-dark .highcharts-axis-title { fill: var(--sd-text) !important; } body.theme-dark .highcharts-axis-labels text { fill: var(--sd-text) !important; } body.theme-dark .highcharts-stack-labels text { fill: var(--sd-text-bright) !important; } /* Il contorno di contrasto dei totali (tspan duplicato dietro al numero) resta bianco di default: sul testo chiaro faceva la "macchia". Lo ribaltiamo in alone scuro. */ body.theme-dark .highcharts-stack-labels .highcharts-text-outline { stroke: var(--sd-bg-input) !important; fill: var(--sd-bg-input) !important; } body.theme-dark .highcharts-credits { fill: var(--sd-text-muted) !important; } /* Griglia e assi */ body.theme-dark .highcharts-grid-line { stroke: #2c313a; } /* Righe secondarie (minorTickInterval): di default quasi bianche, sul fondo scuro facevano l'effetto "tapparella" */ body.theme-dark .highcharts-minor-grid-line { stroke: #232830; } body.theme-dark .highcharts-crosshair { stroke: var(--sd-border-strong); } body.theme-dark .highcharts-axis-line { stroke: var(--sd-border-strong); } body.theme-dark .highcharts-tick { stroke: var(--sd-border-strong); } /* Legenda */ body.theme-dark .highcharts-legend-box { fill: var(--sd-bg-cell); stroke: var(--sd-border-strong); } body.theme-dark .highcharts-legend-item text { fill: var(--sd-text) !important; } body.theme-dark .highcharts-legend-item:hover text { fill: var(--sd-text-bright) !important; } /* Tooltip */ body.theme-dark .highcharts-tooltip-box { fill: var(--sd-bg-cell); stroke: var(--sd-border-strong); } body.theme-dark .highcharts-tooltip text { fill: var(--sd-text-bright) !important; } /* Bottone hamburger dell'export */ body.theme-dark .highcharts-button-box { fill: #2c3037; stroke: var(--sd-border-strong); } body.theme-dark .highcharts-button-symbol { stroke: var(--sd-text); } body.theme-dark .highcharts-button:hover .highcharts-button-box { fill: #3a3f48; } /* Etichetta "Nessun dato" e stati vuoti */ body.theme-dark .highcharts-no-data text { fill: var(--sd-text-muted) !important; } /* ------------------------------------------------------------ 11. PAGINA DI LOGIN (Login.aspx, senza master) La login ha head proprio: serve il link a questo file e la classe theme-dark sul body (che li' convive con login_background). Il tema qui arrivera' dal cookie, quando ci sara' lo switch: prima del login il DB non puo' parlarci. ------------------------------------------------------------ */ body.theme-dark.login_background { background: var(--sd-bg-page); /* niente pattern/19.png */ } body.theme-dark .login_box { background: var(--sd-bg-box); border: 1px solid var(--sd-border); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; } /* Stessa barra blu in gradient dei .box h2 */ body.theme-dark .login_box h2 { color: var(--sd-text-bright); background: var(--sd-h2-grad-bottom); background: -moz-linear-gradient(top, var(--sd-h2-grad-top) 0%, var(--sd-h2-grad-bottom) 100%); background: -webkit-linear-gradient(top, var(--sd-h2-grad-top) 0%, var(--sd-h2-grad-bottom) 100%); background: linear-gradient(to bottom, var(--sd-h2-grad-top) 0%, var(--sd-h2-grad-bottom) 100%); border: 1px solid var(--sd-h2-border); } /* Campi: scuri, nessun effetto al passaggio del mouse. Il testo e' arancione saturo (#f08c1b): si legge sia sul nostro fondo scuro sia sul fondo chiaro dell'anteprima autofill di Chrome, che come sfondo non e' stilizzabile ma come colore del testo eredita proprio da questa regola. */ body.theme-dark .login_block_in .username, body.theme-dark .login_block_in .password { color: #f08c1b; -webkit-text-fill-color: #f08c1b; caret-color: #f08c1b; background-color: var(--sd-bg-input); border: 1px solid var(--sd-border-strong); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; box-shadow: 0 0 10px rgba(0, 0, 0, 0.35) inset; } body.theme-dark .login_block_in .username::-webkit-input-placeholder, body.theme-dark .login_block_in .password::-webkit-input-placeholder { color: #8a919c; -webkit-text-fill-color: #8a919c; } body.theme-dark .login_block_in .username::placeholder, body.theme-dark .login_block_in .password::placeholder { color: #8a919c; -webkit-text-fill-color: #8a919c; } body.theme-dark .login_block_in .username:focus, body.theme-dark .login_block_in .password:focus { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.55) inset; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.55) inset; box-shadow: 0 0 10px rgba(0, 0, 0, 0.55) inset; } /* Autofill di Chrome/Edge in TUTTO il gestionale: box-shadow interno 1000px che copre il celeste di sistema + colori neutri in esadecimale puro (dentro :-webkit-autofill le var() a volte non vengono risolte). Stesso colore del testo scritto a mano. */ body.theme-dark input:-webkit-autofill, body.theme-dark input:-webkit-autofill:hover, body.theme-dark input:-webkit-autofill:focus, body.theme-dark input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #1a1d22 inset; box-shadow: 0 0 0 1000px #1a1d22 inset; -webkit-text-fill-color: #eef1f4; caret-color: #eef1f4; } /* SOLO nella pagina di login (body.login_background): arancione bi-leggibile anche a campo autocompilato */ body.theme-dark.login_background input:-webkit-autofill, body.theme-dark.login_background input:-webkit-autofill:hover, body.theme-dark.login_background input:-webkit-autofill:focus, body.theme-dark.login_background input:-webkit-autofill:active { -webkit-text-fill-color: #f08c1b; caret-color: #f08c1b; } /* ------------------------------------------------------------ 12. JQUERY UI (classi ui-*) + TABELLE DATATABLES bJQueryUI Copre in un colpo solo: toolbar e paginazione delle tabelle DataTables, datepicker, dialog, tabs, accordion — usano tutti le stesse classi di stato di jquery.ui.theme.css. ------------------------------------------------------------ */ /* Superfici e cornici */ body.theme-dark .ui-widget-content { border: 1px solid var(--sd-border); background: var(--sd-bg-box); color: var(--sd-text); } body.theme-dark .ui-widget-content a { color: var(--sd-link); } body.theme-dark .ui-widget-header { border: 1px solid var(--sd-border-strong); background: var(--sd-bg-box-alt); color: var(--sd-text-bright); } body.theme-dark .ui-widget-header a { color: var(--sd-text-bright); } /* Stati (bottoni paginazione, th delle tabelle, giorni del datepicker, bottoni dei dialog...) */ body.theme-dark .ui-state-default, body.theme-dark .ui-widget-content .ui-state-default, body.theme-dark .ui-widget-header .ui-state-default { border: 1px solid var(--sd-border-strong); background: #2c3037; color: var(--sd-text); } body.theme-dark .ui-state-default a, body.theme-dark .ui-state-default a:link, body.theme-dark .ui-state-default a:visited { color: var(--sd-text); } body.theme-dark .ui-state-hover, body.theme-dark .ui-widget-content .ui-state-hover, body.theme-dark .ui-widget-header .ui-state-hover, body.theme-dark .ui-state-focus, body.theme-dark .ui-widget-content .ui-state-focus, body.theme-dark .ui-widget-header .ui-state-focus { border: 1px solid #4a525e; background: #3a3f48; color: var(--sd-text-bright); } body.theme-dark .ui-state-hover a, body.theme-dark .ui-state-hover a:hover { color: var(--sd-text-bright); } body.theme-dark .ui-state-active, body.theme-dark .ui-widget-content .ui-state-active, body.theme-dark .ui-widget-header .ui-state-active { border: 1px solid var(--sd-h2-border); background: var(--sd-h2-grad-top); color: var(--sd-text-bright); } body.theme-dark .ui-state-active a, body.theme-dark .ui-state-active a:link, body.theme-dark .ui-state-active a:visited { color: var(--sd-text-bright); } /* Evidenziato (es. "oggi" nel datepicker) e stato errore: stesse semantiche, declinate in scuro */ body.theme-dark .ui-state-highlight, body.theme-dark .ui-widget-content .ui-state-highlight, body.theme-dark .ui-widget-header .ui-state-highlight { border: 1px solid #6b5d2a; background: #4a4425; color: #f0e0a0; } body.theme-dark .ui-state-error, body.theme-dark .ui-widget-content .ui-state-error, body.theme-dark .ui-widget-header .ui-state-error { border: 1px solid #8a3a3a; background: #46262a; color: #e5a0a0; } body.theme-dark .ui-state-error-text, body.theme-dark .ui-widget-content .ui-state-error-text, body.theme-dark .ui-widget-header .ui-state-error-text { color: #e5a0a0; } /* Icone sprite: dallo scuro al bianco (il file e' gia' nel tema) */ body.theme-dark .ui-icon, body.theme-dark .ui-widget-content .ui-icon, body.theme-dark .ui-widget-header .ui-icon, body.theme-dark .ui-state-default .ui-icon, body.theme-dark .ui-state-hover .ui-icon, body.theme-dark .ui-state-focus .ui-icon, body.theme-dark .ui-state-active .ui-icon { background-image: url(../bootstrap/images/ui-icons_ffffff_256x240.png); } /* Contenitori DataTables */ body.theme-dark .dataTables_wrapper, body.theme-dark .dataTables_info, body.theme-dark .dataTables_length, body.theme-dark .dataTables_filter { color: var(--sd-text); } body.theme-dark .dataTables_processing { background: var(--sd-bg-box); color: var(--sd-text-bright); } /* Zebra righe: la lavanda #E2E4FF / bianco in scuro, con specificita' cintura-e-bretelle sulle celle */ body.theme-dark table.dataTable tr.odd, body.theme-dark table.dataTable tr.odd td, body.theme-dark tr.odd, body.theme-dark tr.odd td { background-color: var(--sd-bg-cell); } body.theme-dark table.dataTable tr.even, body.theme-dark table.dataTable tr.even td, body.theme-dark tr.even, body.theme-dark tr.even td { background-color: #22252b; } body.theme-dark td.group, body.theme-dark td.details { background-color: var(--sd-bg-thead); color: var(--sd-text-bright); } /* ------------------------------------------------------------ 13. PAGINE RESTYLING "cs-*" (ClientiSetup e simili) Queste pagine hanno un blocco