/* =========================================================================== OrbitCondomini — Design system Palette: blu notte + ciano orbitale. Tutti i colori passano da qui: i componenti non contengono mai valori esadecimali. Il tema si commuta con l'attributo data-tema su . =========================================================================== */ :root, html[data-tema="chiaro"] { /* --- Cromatura applicativa (top bar, taskbar, barre finestra) --- */ --orbit-notte: #0F1B2D; --orbit-notte-alto: #16273D; --orbit-slate: #1C2E4A; --orbit-su-notte: #E8EDF4; --orbit-su-notte-soft: #93A3B8; /* --- Accento --- */ --orbit-ciano: #0091AB; --orbit-ciano-vivo: #00A9C7; --orbit-ciano-chiaro: #33BDD6; --orbit-ciano-velo: rgba(0, 169, 199, 0.12); --orbit-su-ciano: #FFFFFF; /* Accento per testo e icone: su fondo chiaro il ciano dell'accento si ferma a 3,72:1, sotto la soglia di leggibilita'. Questa variante piu' scura arriva a 5,3:1 e si usa ovunque il ciano faccia da primo piano. */ --orbit-ciano-testo: #00768A; /* --- Il marchio --- Il petrolio e' quello del logo ufficiale, non l'accento dell'applicazione: il marchio non e' un elemento di interfaccia e non segue la tavolozza. La controforma e' il FONDO dietro al marchio: nell'originale l'interno della O e i punti in cui l'anello passa dietro le lettere sono dipinti, non ritagliati, e su un fondo diverso dal bianco resterebbero macchie. */ --orbit-marchio-accento: #246B83; --orbit-marchio-fondo: var(--orbit-superficie); /* La cromatura della top bar e' scura in ENTRAMBI i temi: li' il petrolio del marchio serve schiarito comunque, e il valore e' lo stesso di qua e di la'. */ --orbit-marchio-su-notte: #5FA8C0; /* Evidenziazione della riga al passaggio del mouse: opaca e non traslucida, altrimenti si sommerebbe al fondo delle righe alternate dando due tinte diverse fra righe pari e dispari. */ --orbit-riga-evidenziata: #E4F4F8; /* --- Superfici --- */ --orbit-fondo: #F4F6F9; --orbit-fondo-trama: rgba(15, 27, 45, 0.045); --orbit-superficie: #FFFFFF; --orbit-superficie-alt: #F7F9FC; --orbit-superficie-velo: #EDF1F7; /* --- Testo --- */ --orbit-testo: #16202F; --orbit-testo-soft: #5C6B80; --orbit-testo-tenue: #667488; /* 4,75:1 su superficie chiara */ /* --- Accenti per area funzionale --------------------------------------- Il colore qui NON e' decorazione: dice a quale famiglia appartiene una finestra. Con sei schermate aperte sono sei rettangoli identici, e il titolo bisogna leggerlo; il filetto e l'icona colorata si vedono. Sei tinte e non dieci: oltre si perde la capacita' di distinguerle a colpo d'occhio, che e' l'unica ragione per cui esistono. Sono desaturate di proposito - il programma tiene termini di legge, non e' un gioco. Contrasto verificato per il testo su superficie chiara (>= 4,5:1). */ --orbit-area-cruscotto: #0E7C8C; /* ciano - cruscotto e strumenti */ --orbit-area-anagrafiche: #3B5BA5; /* indaco - persone e unita' */ --orbit-area-numeri: #8A6714; /* ambra - millesimi e contabilita' */ --orbit-area-assemblee: #7A3E6B; /* prugna - assemblee e delibere */ --orbit-area-immobile: #4A6B3D; /* oliva - impianti, lavori, sicurezza */ --orbit-area-carte: #8A5230; /* terra - documenti e adempimenti */ --orbit-area-piattaforma: #55637A; /* neutro - area di servizio */ /* --- Bordi e ombre --- */ --orbit-bordo: #E1E7EF; --orbit-bordo-forte: #CBD5E1; --orbit-velo-modale: rgba(15, 27, 45, .45); --orbit-ombra-finestra: 0 1px 2px rgba(15, 27, 45, .08), 0 8px 24px -6px rgba(15, 27, 45, .16); --orbit-ombra-attiva: 0 2px 4px rgba(15, 27, 45, .10), 0 20px 48px -12px rgba(15, 27, 45, .30); --orbit-ombra-menu: 0 8px 28px -6px rgba(15, 27, 45, .22); /* --- Semantici (stato, non accento) --- */ --orbit-ok: #17864B; --orbit-ok-velo: rgba(23, 134, 75, .12); --orbit-attenzione: #B7791F; --orbit-attenzione-velo: rgba(183, 121, 31, .14); --orbit-critico: #C0392B; --orbit-critico-velo: rgba(192, 57, 43, .12); /* --- Barra titolo delle finestre --- In tema scuro e' il contrasto a distinguere la finestra attiva. In tema chiaro la barra e' stata bianca fino al 1 settembre 2026, con una ragione: una barra blu scuro su fondo chiaro appesantisce il desktop. La ragione regge ancora, e infatti qui non c'e' una barra blu scuro: c'e' un VELO DEL COLORE DELL'AREA, che quel colore ce l'ha gia' e dice a quale famiglia la finestra appartiene. Cosi' la barra e' colorata - che e' quello che serviva - e il colore non e' decorazione: con sei finestre aperte si distinguono senza leggere i titoli. Il velo e' al dodici per cento perche' il titolo deve restare leggibile; oltre, il contrasto del testo scende sotto la soglia. IL VELO NON STA QUI, e non e' una questione di ordine. Un token dichiarato su :root risolve i propri var() SU :ROOT, dove `--orbit-accento-area` non esiste ancora: tutte le finestre finirebbero dello stesso colore, e la cosa si vedrebbe solo aprendone due di famiglie diverse. Il velo sta nella regola che lo usa, in orbit-shell.css, dove l'elemento la propria area ce l'ha addosso. Qui resta il FONDO su cui il velo si stende. */ --orbit-barra-attiva-bg: #FFFFFF; --orbit-barra-attiva-testo: var(--orbit-testo); --orbit-barra-attiva-linea: var(--orbit-ciano); --orbit-barra-inattiva-bg: var(--orbit-superficie-alt); /* --- Metriche --- */ --orbit-topbar-h: 44px; --orbit-taskbar-h: 38px; --orbit-raggio: 8px; --orbit-raggio-piccolo: 5px; --orbit-transizione: 140ms cubic-bezier(.4, 0, .2, 1); } html[data-tema="scuro"] { --orbit-notte: #0A121D; --orbit-notte-alto: #121D2C; --orbit-slate: #16243A; --orbit-su-notte: #DDE5EF; --orbit-su-notte-soft: #7F8FA5; --orbit-ciano: #22B8D4; --orbit-ciano-vivo: #33C6E0; --orbit-ciano-chiaro: #5FD4E9; --orbit-ciano-velo: rgba(51, 198, 224, 0.16); --orbit-su-ciano: #062430; /* Su fondo scuro il ciano dell'accento e' gia' a 6,85:1: nessuna variante. */ --orbit-ciano-testo: #22B8D4; /* Sul fondo scuro il petrolio del marchio si ferma a 2,4:1. Si schiarisce restando sulla stessa tinta: il marchio resta riconoscibile, e leggibile. */ --orbit-marchio-accento: #5FA8C0; --orbit-marchio-fondo: var(--orbit-superficie); --orbit-marchio-su-notte: #5FA8C0; --orbit-riga-evidenziata: #1F3340; --orbit-fondo: #0E151F; --orbit-fondo-trama: rgba(255, 255, 255, 0.035); --orbit-superficie: #18212E; --orbit-superficie-alt: #1D2837; --orbit-superficie-velo: #222E3F; --orbit-testo: #E4EAF2; --orbit-testo-soft: #9CAABC; --orbit-testo-tenue: #8492A6; /* 5,13:1 su superficie scura */ /* Sul fondo scuro le stesse tinte si schiariscono e perdono saturazione: un colore pensato per la carta bianca, su nero, vibra. */ --orbit-area-cruscotto: #45BDCD; --orbit-area-anagrafiche: #8FAAE8; --orbit-area-numeri: #D8B267; --orbit-area-assemblee: #C994BB; --orbit-area-immobile: #97B885; --orbit-area-carte: #D0997A; --orbit-area-piattaforma: #9BA8BC; --orbit-bordo: #26313F; --orbit-bordo-forte: #354355; --orbit-velo-modale: rgba(0, 0, 0, .60); --orbit-ombra-finestra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -6px rgba(0, 0, 0, .6); --orbit-ombra-attiva: 0 2px 4px rgba(0, 0, 0, .55), 0 20px 48px -12px rgba(0, 0, 0, .75); --orbit-ombra-menu: 0 8px 28px -6px rgba(0, 0, 0, .65); --orbit-ok: #34D399; --orbit-ok-velo: rgba(52, 211, 153, .16); --orbit-attenzione: #E0A94B; --orbit-attenzione-velo: rgba(224, 169, 75, .16); --orbit-critico: #F0776B; --orbit-critico-velo: rgba(240, 119, 107, .16); --orbit-barra-attiva-bg: #1E2E44; --orbit-barra-attiva-testo: var(--orbit-su-notte); --orbit-barra-attiva-linea: var(--orbit-ciano-vivo); --orbit-barra-inattiva-bg: var(--orbit-superficie-alt); color-scheme: dark; } /* =========================================================================== Ponte verso Radzen: le variabili del tema material puntano ai token Orbit. La specificità di html[data-tema] batte il :root della libreria in entrambi i versi, indipendentemente dall'ordine di caricamento dei fogli di stile. =========================================================================== */ html[data-tema="chiaro"], html[data-tema="scuro"] { --rz-primary: var(--orbit-ciano); --rz-primary-light: var(--orbit-ciano-vivo); --rz-primary-lighter: var(--orbit-ciano-velo); --rz-primary-dark: var(--orbit-slate); --rz-primary-darker: var(--orbit-notte); --rz-on-primary: var(--orbit-su-ciano); --rz-on-primary-light: var(--orbit-su-ciano); --rz-on-primary-lighter: var(--orbit-ciano); --rz-secondary: var(--orbit-slate); --rz-secondary-light: var(--orbit-notte-alto); --rz-secondary-lighter: var(--orbit-ciano-velo); --rz-on-secondary: var(--orbit-su-notte); --rz-success: var(--orbit-ok); --rz-success-lighter: var(--orbit-ok-velo); --rz-warning: var(--orbit-attenzione); --rz-warning-lighter: var(--orbit-attenzione-velo); --rz-danger: var(--orbit-critico); --rz-danger-lighter: var(--orbit-critico-velo); --rz-info: var(--orbit-ciano); --rz-info-lighter: var(--orbit-ciano-velo); --rz-text-color: var(--orbit-testo); --rz-text-title-color: var(--orbit-testo); --rz-text-secondary-color: var(--orbit-testo-soft); --rz-text-tertiary-color: var(--orbit-testo-tenue); --rz-text-disabled-color: var(--orbit-testo-tenue); --rz-text-contrast-color: var(--orbit-su-notte); --rz-text-selection-background-color: var(--orbit-ciano-velo); --rz-text-selection-color: var(--orbit-testo); --rz-body-background-color: transparent; --rz-base-background-color: var(--orbit-superficie); --rz-panel-background-color: var(--orbit-superficie); --rz-card-background-color: var(--orbit-superficie); --rz-dialog-background-color: var(--orbit-superficie); --rz-input-background-color: var(--orbit-superficie); --rz-input-disabled-background-color: var(--orbit-superficie-velo); /* Radzen non ha una variabile generica per il colore dei bordi: li deriva tutti da --rz-base-300, che e' mappato piu' sotto sul token dei bordi. */ --rz-card-border: 1px solid var(--orbit-bordo); /* I nomi seguono quelli del tema Radzen: inventarli non produce errori, ma lascia la griglia con i colori predefiniti della libreria. */ --rz-grid-background-color: var(--orbit-superficie); --rz-grid-border: 1px solid var(--orbit-bordo); --rz-grid-cell-border: 1px solid var(--orbit-bordo); --rz-grid-bottom-cell-border: 1px solid var(--orbit-bordo); --rz-grid-cell-color: var(--orbit-testo); --rz-grid-header-background-color: var(--orbit-superficie-alt); --rz-grid-header-color: var(--orbit-testo-soft); --rz-grid-header-cell-border-bottom: 1px solid var(--orbit-bordo); --rz-grid-header-sorted-background-color: var(--orbit-superficie-velo); --rz-grid-stripe-background-color: var(--orbit-superficie-alt); --rz-grid-stripe-odd-background-color: var(--orbit-superficie); --rz-grid-hover-background-color: var(--orbit-ciano-velo); --rz-grid-hover-color: var(--orbit-testo); --rz-grid-selected-background-color: var(--orbit-ciano-velo); --rz-grid-selected-color: var(--orbit-testo); /* Le celle bloccate hanno un fondo proprio: senza questo restano trasparenti e si vede scorrere il contenuto sotto. */ --rz-grid-frozen-cell-background-color: var(--orbit-superficie); --rz-grid-frozen-cell-border: 1px solid var(--orbit-bordo); --rz-grid-foot-background-color: var(--orbit-superficie-alt); --rz-grid-foot-cell-color: var(--orbit-testo); --rz-grid-toolbar-background-color: var(--orbit-superficie); --rz-grid-filter-background-color: var(--orbit-superficie); --rz-grid-filter-color: var(--orbit-testo-tenue); --rz-grid-sort-icon-color: var(--orbit-testo-tenue); --rz-grid-detail-template-background-color: var(--orbit-superficie-alt); --rz-base: var(--orbit-superficie-velo); --rz-base-50: var(--orbit-superficie); --rz-base-100: var(--orbit-superficie-alt); --rz-base-200: var(--orbit-superficie-velo); --rz-base-300: var(--orbit-bordo); --rz-base-400: var(--orbit-bordo-forte); --rz-base-500: var(--orbit-testo-tenue); --rz-base-600: var(--orbit-testo-soft); --rz-base-700: var(--orbit-testo-soft); --rz-base-800: var(--orbit-testo); --rz-base-900: var(--orbit-testo); --rz-base-light: var(--orbit-superficie-alt); --rz-base-lighter: var(--orbit-superficie); --rz-base-dark: var(--orbit-testo-soft); --rz-base-darker: var(--orbit-testo); --rz-on-base: var(--orbit-testo); --rz-on-base-light: var(--orbit-testo); --rz-on-base-lighter: var(--orbit-testo); --rz-shadow-1: 0 1px 2px rgba(15, 27, 45, .10); --rz-shadow-2: 0 2px 6px rgba(15, 27, 45, .12); --rz-shadow-3: var(--orbit-ombra-menu); --rz-shadow-4: var(--orbit-ombra-menu); --rz-shadow-5: var(--orbit-ombra-attiva); } /* ------------------------------------------------------- Densita' dei moduli -- Il tema Material dimensiona i campi per il dito su un telefono: 3.375rem, cioe' 54 pixel per casella. Su una scrivania, dove si inseriscono decine di dati con la tastiera, e' il doppio del necessario - una scheda con dodici campi diventa piu' alta dello schermo solo per l'aria che c'e' dentro. Si riportano le variabili del tema, non si combatte con la specificita': e' il meccanismo che Radzen offre, e vale per ogni componente presente e futuro. */ :root { --rz-form-field-filled-height: 2.2rem; --rz-form-field-filled-height-md: 2.2rem; --rz-form-field-filled-height-sm: 2rem; --rz-form-field-filled-height-xs: 1.8rem; --rz-input-font-size: .84rem; --rz-input-font-size-md: .84rem; /* I nomi veri del riempimento: sono queste che .rz-textbox usa davvero. Verificato leggendo il foglio del tema, non indovinato. */ --rz-input-padding-block: .25rem; --rz-input-padding-inline: .55rem; } /* Le caselle di testo e i numerici seguono l'altezza dichiarata: senza questo il tema tiene il proprio riempimento e l'altezza non cambia. */ /* L'altezza si FISSA, non si suggerisce: con min-height il campo restava a 40 pixel perche' l'interlinea del tema riempiva lo spazio da sola. Misurato nel browser - min-height 35.2px applicata, altezza reale 40px - e corretto di conseguenza. */ .rz-textbox, .rz-numeric, .rz-dropdown, .rz-datepicker { height: var(--rz-form-field-filled-height); min-height: var(--rz-form-field-filled-height); line-height: 1.3; font-size: var(--rz-input-font-size); } .rz-numeric input, .rz-dropdown .rz-dropdown-label { line-height: 1.3; font-size: var(--rz-input-font-size); } /* La maniglia di ridimensionamento e' del browser e non sa nulla del dialogo: chi trascina in orizzontale porta il campo fuori dai bordi, e il browser scrive la larghezza nello stile in linea, dove nessuna regola normale lo raggiunge. Si ridimensiona solo in ALTEZZA, e comunque non oltre il contenitore. */ .rz-textarea { min-height: 3.2rem; line-height: 1.35; font-size: var(--rz-input-font-size); resize: vertical; max-width: 100%; max-height: 40vh; } .rz-textarea { min-height: 3.4rem; } /* Material scrive i pulsanti in MAIUSCOLO con le lettere distanziate. E' una convenzione di quel linguaggio visivo, non del nostro: "Salva" si legge meglio di "S A L V A", e in italiano il maiuscolo fisso sembra un avviso. */ .rz-button { text-transform: none; letter-spacing: 0; }