/* * Tema di leisure: SOLO le personalizzazioni, sopra la base di commonui-quarkus. * * La base e' il tema della famiglia, che arriva da commonui con BluAppLayout: palette (verde, * commonui.theme in application.properties), barra, menu laterale, griglie, campi, intestazione * delle view (blu-theme.css, blu-menu.css, blu-app-layout-styles.css, blu-grid.css, blu-view.css). * Qui non si ridefinisce niente di quello: si aggiusta e si aggiunge. Decisione di Luca del * 04/11/2026. * * NOTA: Fino ad allora queste regole stavano in styles/custom-styles.css, importato da MainUI. Il * file e' stato tolto: tutto quello che e' di leisure sta qui. * * Due parti: * 1. aggiustamenti al tema di commonui, che valgono per tutte le view; * 2. componenti e classi di leisure. */ /* * ATTENZIONE: Il preset "compact" di Lumo NON si importa da qui. * * Qui c'era @import url('@vaadin/vaadin-lumo-styles/presets/compact.css'), e funzionava solo * nel pacchetto di produzione: nel dev mode questo file viene iniettato come testo, l'@import * resta uno specificatore npm che il browser non risolve, e il foglio risulta caricato e vuoto * senza un errore. In locale i font erano quelli di Lumo di serie, sul pod quelli compatti. * * Adesso il preset arriva da @CssImport su AppShell, che passa dal bundle di Flow e vale in * entrambe le modalita'. La spiegazione lunga e le misure stanno li'. */ /* ============================================================================================= 1. Aggiustamenti al tema di commonui ============================================================================================= */ /* --------------------------------------------------------------------------------------------- Pulsanti normali: grassetto e un velo del colore del tema (decisione di Luca del 04/11/2026, nata sulla home). Il grigio neutro di Lumo li faceva sparire nelle schede e nelle cornici bianche. Restano fuori, perche' hanno gia' una resa loro: - primary: pieno nel colore del tema, testo bianco, ombra (blu-theme.css); - tertiary e tertiary-inline: piatti per scelta, come i comandi di riga delle griglie; - error, success, contrast: il colore dice gia' qualcosa, il velo verde lo confonderebbe; - il filtro a intervallo di date, vestito da campo (.leisure-range-filter); - i pulsanti attaccati a un campo, nello stesso HorizontalLayout (Copia, Apri, QR Code accanto a "Code" e "Link" nel dettaglio utente): fanno gruppo col campo e restano come Lumo li fa, vedi la regola subito sotto. --------------------------------------------------------------------------------------------- */ vaadin-button:not([theme~="primary"]):not([theme~="tertiary"]):not([theme~="tertiary-inline"]):not([theme~="error"]):not([theme~="success"]):not([theme~="contrast"]):not(.leisure-range-filter):not(vaadin-horizontal-layout:has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker)) > *) { font-weight: 600; background-color: rgba(var(--blu-primary-rgb), 0.1); } /* hover ben visibile: il velo si scurisce e compare un bordo sottile del colore del tema. Il solo passaggio dal 10 al 18% si notava appena */ vaadin-button:not([theme~="primary"]):not([theme~="tertiary"]):not([theme~="tertiary-inline"]):not([theme~="error"]):not([theme~="success"]):not([theme~="contrast"]):not(.leisure-range-filter):not(vaadin-horizontal-layout:has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker)) > *):hover { background-color: rgba(var(--blu-primary-rgb), 0.24); box-shadow: inset 0 0 0 1px rgba(var(--blu-primary-rgb), 0.45); } /* I pulsanti attaccati a un campo (stesso HorizontalLayout): l'aspetto di Lumo, come prima del tema (decisione di Luca del 04/11/2026), con gli angoli degli input invece dei 12px che commonui da' ai pulsanti. Gli stili scritti in Java (la riga di separazione, gli angoli a sinistra a zero sui pulsanti che si attaccano al precedente) restano e vincono, perche' sono sull'elemento. */ vaadin-horizontal-layout:has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker)) > vaadin-button { border-radius: var(--vaadin-input-field-border-radius, 4px); } /* Campo e pulsanti come un controllo solo (decisione di Luca del 04/11/2026): il campo perde gli angoli a destra, i pulsanti hanno il bordo del campo e angoli vivi, e solo l'ultimo chiude a destra con gli angoli degli input. Il bordo e' quello dei campi di blu-theme.css (piu' scuro se il campo e' in sola lettura, come Code e Link nel dettaglio utente). ATTENZIONE: contano solo i pulsanti VISIBILI. Un pulsante spento per il ruolo resta nella pagina con l'attributo hidden: con :last-child gli angoli finivano su di lui e quello visibile restava con lo spigolo vivo, e il campo perdeva gli angoli anche senza pulsanti accanto. Qui l'ultimo e' l'ultimo visibile, e il campo si attacca solo se dopo di lui c'e' un pulsante visibile. AVVERTENZA: i pulsanti non hanno il bordo a sinistra: la riga di separazione la fa il bordo destro dell'elemento prima. Fino al 04/11/2026 la riga e gli angoli li scriveva il Java su Apri e QR Code, nello stile dell'elemento: tolti, li fa questa regola. */ vaadin-horizontal-layout:has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker) ~ vaadin-button:not([hidden])) > :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker):has(~ vaadin-button:not([hidden]))::part(input-field) { border-top-right-radius: 0; border-bottom-right-radius: 0; } vaadin-horizontal-layout:has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker) ~ vaadin-button:not([hidden])) > vaadin-button { --leisure-attached-border: rgba(34, 62, 92, 0.42); box-sizing: border-box; margin-block: 0; border: 1px solid var(--leisure-attached-border); border-left-width: 0; border-radius: 0; /* 10px per lato: il padding di Lumo dipende dalla stondatura, e con i 12px di commonui arrivava a quasi 17. Con tre pulsanti il campo restava strettissimo */ padding-inline: var(--lumo-space-m); } vaadin-horizontal-layout:has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker) ~ vaadin-button:not([hidden])):has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker)[readonly]) > vaadin-button { --leisure-attached-border: rgba(27, 51, 79, 0.6); } vaadin-horizontal-layout:has(> :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-select, vaadin-date-picker) ~ vaadin-button:not([hidden])) > vaadin-button:not([hidden]):not(:has(~ vaadin-button:not([hidden]))) { border-top-right-radius: var(--vaadin-input-field-border-radius, 4px); border-bottom-right-radius: var(--vaadin-input-field-border-radius, 4px); } /* Hover dei primary: il pieno si scurisce, come i pulsanti normali si scuriscono al passaggio del mouse (decisione di Luca del 05/11/2026). Lumo da solo lo schiariva appena; il verde scuro del tema (--blu-primary-strong) era troppo vicino al normale per notarsi, quindi gli si aggiunge un 20% di nero. Segue la palette: con il blu si scurisce il blu. */ vaadin-button[theme~="primary"]:not([disabled]):hover { background-color: color-mix(in srgb, var(--blu-primary-strong) 80%, #000000); } /* Campi in sola lettura: lo stesso aspetto per tutti i tipi. Commonui (blu-theme.css) da' fondo azzurrino, bordo e testo piu' scuri solo a testo, area di testo, combo, data e select: un campo numerico in sola lettura ("Credito da Ripristinare" nel ripristino del credito) restava col bordo dei campi modificabili, diverso da quelli accanto. Gli stessi valori, per gli altri tipi. */ :is(vaadin-big-decimal-field, vaadin-number-field, vaadin-integer-field, vaadin-email-field, vaadin-password-field, vaadin-time-picker, vaadin-multi-select-combo-box, vaadin-date-time-picker)[readonly] { --vaadin-input-field-background: #f5f8fc; --vaadin-input-field-border-color: rgba(27, 51, 79, 0.6); --vaadin-input-field-value-color: #21374f; } /* Campi in sola lettura: niente tratteggio. Lumo li segna con un bordo tratteggiato (sul campo stesso nella textarea, in un ::after sopra il campo negli altri), e commonui con fondo azzurrino e bordo pieno piu' scuro (blu-theme.css): i due si sommavano, e nella textarea il tratteggio accanto al bordo pieno faceva uno strano effetto. Resta il segno di commonui. */ :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-multi-select-combo-box, vaadin-select, vaadin-date-picker, vaadin-time-picker, vaadin-date-time-picker)[readonly]::part(input-field) { border-style: none; } :is(vaadin-text-field, vaadin-text-area, vaadin-email-field, vaadin-password-field, vaadin-integer-field, vaadin-number-field, vaadin-big-decimal-field, vaadin-combo-box, vaadin-multi-select-combo-box, vaadin-select, vaadin-date-picker, vaadin-time-picker, vaadin-date-time-picker)[readonly]::part(input-field)::after { border-style: none; } /* Le checkbox in sola lettura e non spuntate (anche dentro la CustomCheckbox, il campo con l'etichetta sopra): Lumo toglie il fondo e disegna il riquadro tratteggiato. Prendono invece l'aspetto dei campi in sola lettura di commonui (blu-theme.css): bordo pieno piu' scuro e fondo azzurrino. Quelle spuntate restano come sono, con il loro fondo pieno. */ vaadin-checkbox[readonly]:not([checked]):not([indeterminate])::part(checkbox) { background-color: #f5f8fc; } vaadin-checkbox[readonly]:not([checked]):not([indeterminate])::part(checkbox)::after { border-style: solid; border-color: rgba(27, 51, 79, 0.6); } /* --------------------------------------------------------------------------------------------- Intestazione delle view (AbsLeisure.buildViewHeader). Titolo e pulsanti a filo del contenuto sotto, griglia o form: le classi di commonui danno all'intestazione 8px di padding e al titolo 4px di margine, e il titolo partiva 12px dentro. Il titolo e' alto quanto i pulsanti accanto (decisione di Luca del 04/11/2026): font xxxl, 28px col preset compact, la misura del vecchio H1 di leisure (xl in commonui), e la riga alta quanto un pulsante, cosi' testo e pulsanti stanno sulla stessa linea. NOTA: per avere il testo alto 32px da bordo a bordo come i pulsanti servirebbero circa 35px, piu' del nome dell'applicazione nella barra (22px): misurato e scartato. --------------------------------------------------------------------------------------------- */ vaadin-app-layout > .blu-page > .blu-view-header-top { padding-inline: 0; row-gap: var(--lumo-space-s); /* per la regola "stretta" qui sotto: si misura l'intestazione, non la finestra */ container-type: inline-size; } /* La cornice di commonui ha 8px di padding sopra e sotto e 12 ai lati: fra il fondo della griglia e il bordo restavano 4px meno che ai lati. Sotto si porta a 12, come ai lati. */ vaadin-app-layout > .blu-page { padding-bottom: 12px; } /* Il gruppo dei pulsanti accanto al titolo (un HorizontalLayout, o la ResponsiveButtonBar del dettaglio card). L'intestazione di commonui va gia' a capo, ma il gruppo no: a finestra stretta i pulsanti uscivano dal bordo. Qui il gruppo va a capo anche lui, resta allineato a destra e, quando scende sotto il titolo, si tiene sul lato destro. */ vaadin-app-layout > .blu-page > .blu-view-header-top > :not(.blu-view-title) { flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; min-width: 0; gap: var(--lumo-space-s); } /* Intestazione stretta (telefono, o finestra con il menu aperto): niente allineamento a destra. I pulsanti scendono sotto il titolo e seguono il flusso normale, da sinistra, come il testo: tenuti a destra sotto un titolo a sinistra sembravano staccati da tutto (Luca, 05/11/2026). */ @container (max-width: 600px) { vaadin-app-layout > .blu-page > .blu-view-header-top > :not(.blu-view-title) { justify-content: flex-start; margin-inline-start: 0; } } vaadin-app-layout > .blu-page > .blu-view-header-top > .blu-view-title { margin-inline-start: 0; font-size: var(--lumo-font-size-xxxl); /* --lumo-size-m e non --lumo-button-size: quella esiste solo dentro vaadin-button, e qui fuori la regola cadeva in silenzio (riga di 30,8px invece di 32) */ line-height: var(--lumo-size-m); } /* --------------------------------------------------------------------------------------------- Schede dei dettagli (vaadin-tabs): la linea sotto le schede arriva da un bordo all'altro. La linea e' un'ombra disegnata sul componente stesso, e il componente era largo quanto le sue schede: nel dettaglio card 499px su 915, con la linea che si fermava a meta'. Nella cornice della pagina le tab si allargano a tutta la riga. --------------------------------------------------------------------------------------------- */ vaadin-app-layout > .blu-page > vaadin-tabs { align-self: stretch; } /* La lineetta della tab selezionata va dall'icona alla fine del testo, cioe' la tab meno il suo padding ai lati (0.75rem per parte in Lumo): uguale su tutte le tab, corte o lunghe (decisione di Luca del 04/11/2026). Lumo la disegna nello shadow DOM (::before e ::after della tab), centrata e larga --lumo-size-s, circa 24px: dall'esterno lo pseudo-elemento non si raggiunge, la variabile si'. AVVERTENZA: nella tab --lumo-size-s serve solo a quella lineetta (tab.css di Lumo); il valore si eredita anche al contenuto della tab, che oggi e' un'icona e un testo e non la usa. */ vaadin-app-layout > .blu-page > vaadin-tabs > vaadin-tab { --lumo-size-s: calc(100% - 1.5rem); /* AVVERTENZA: l'icona della tab ha 4px di padding suo, quindi il disegno comincia 4px dopo l'inizio della tab. Con il padding uguale ai due lati la lineetta partiva 4px prima del disegno e finiva col testo: sembrava spostata. Togliendo quei 4px a sinistra la lineetta, centrata e larga la tab meno 0.75rem per parte, va dal disegno dell'icona alla fine del testo. */ padding-inline-start: calc(0.75rem - 4px); } /* Il caricamento file nell'intestazione (Import Files): Lumo lo disegna come area di trascinamento con il suo padding, e l'intestazione era alta 65px invece di 40. Senza padding resta il bordo tratteggiato, che dice che li' si puo' trascinare un file, ed e' alto quanto i pulsanti accanto. Angoli come gli input. */ vaadin-app-layout > .blu-page > .blu-view-header-top > vaadin-upload { padding: 0 var(--lumo-space-s) 0 0; border-radius: var(--vaadin-input-field-border-radius, 4px); /* la lista dei file sta su una seconda riga, vuota finche' non si carica niente: senza lo spazio fra le righe non aggiunge altezza */ row-gap: 0; } /* il pulsante "Upload File..." ha 3px di margine sopra e sotto: senza, l'area e' alta quanto lui */ vaadin-app-layout > .blu-page > .blu-view-header-top > vaadin-upload > vaadin-button { margin-block: 0; } /* --------------------------------------------------------------------------------------------- Dettagli a tab: tutto a filo della cornice (decisione di Luca del 04/11/2026). Titolo, bordo dei pulsanti e griglie stavano gia' sul bordo interno della cornice; nei dettagli no. Misurato sul dettaglio card, dal bordo della cornice: titolo 13px, prima tab 25, la sua icona 37, i campi 23. Ora partono tutti da 13, e i campi finiscono dove finisce l'ultimo pulsante. Dei pulsanti conta il bordo, non il testo, come per i campi. --------------------------------------------------------------------------------------------- */ /* Nei dettagli a tab la cornice cresce con il contenuto, e scorre la pagina intera: la barra di scorrimento sta sul bordo della finestra, fuori dalla cornice, e gli allineamenti non cambiano. ATTENZIONE: AbsLeisureView e AbsTabDetail danno a pagina e scheda setSizeFull(), cioe' height 100%; ma la scheda parte sotto titolo e tab, quindi finiva oltre il fondo della cornice (73px nel dettaglio gruppo, dove la seconda griglia usciva). L'altezza e' scritta nello stile dell'elemento, e si batte solo con !important. AVVERTENZA: provato e scartato lo scorrimento DENTRO la cornice, con titolo e tab fermi: la barra (15px con le barre classiche) toglieva spazio al contenuto, che finiva 15px prima dei pulsanti. Le griglie da sole (le pagine elenco) restano come sono: alte quanto la cornice, scorrono dentro di se'. */ vaadin-app-layout > .blu-page:has(> .leisure-tab-page) { height: auto !important; min-height: 100%; } vaadin-app-layout > .blu-page > .leisure-tab-page { height: auto !important; flex: none; } /* il contenuto della scheda: il VerticalLayout ha il padding di Lumo; si toglie ai lati e sotto (sotto lo spazio lo da' la cornice), sopra resta lo stacco dalle tab */ vaadin-app-layout > .blu-page > .leisure-tab-page > vaadin-vertical-layout { padding-inline: 0; padding-bottom: 0; } /* Il form di una scheda ha il riquadro delle griglie (blu-theme.css di commonui: bordo e ombra leggera; gli angoli qui sono quelli degli input), cosi' ogni scheda mostra un pannello, form o griglia che sia. Prima la griglia era incorniciata e il form no, e passando da una scheda all'altra cambiava tutto. Il bordo del pannello sta a filo della cornice come quello della griglia; i campi rientrano dentro. */ vaadin-app-layout > .blu-page > .leisure-tab-page > vaadin-vertical-layout > vaadin-form-layout { box-sizing: border-box; align-self: stretch; padding: var(--lumo-space-m) var(--lumo-space-l); /* sotto 4px in piu': il campo di Lumo ha 7px sopra l'etichetta e 3px sotto l'input, quindi a padding uguale lo spazio visibile era 17px sopra ("Numero") e 13 sotto ("Nota"). Cosi' e' 17 da entrambe le parti. */ padding-bottom: calc(var(--lumo-space-m) + 4px); background: #ffffff; border: 1px solid rgba(var(--blu-surface-rgb), 0.12); /* stondati come gli input, 4px in commonui (decisione di Luca del 04/11/2026): la stessa variabile, cosi' seguono gli input se commonui la cambia */ border-radius: var(--vaadin-input-field-border-radius, 4px); box-shadow: 0 8px 20px rgba(var(--blu-surface-rgb), 0.06); } /* Una griglia DENTRO il pannello di un form (il dettaglio gruppo: campi e due sezioni a fisarmonica con una griglia ciascuna) perde l'ombra e ha gli angoli degli input: si legge come contenuto del pannello, non come una terza scatola dentro pannello e cornice. Le griglie che sono da sole in una scheda tengono il riquadro di commonui. */ vaadin-app-layout > .blu-page > .leisure-tab-page > vaadin-vertical-layout > vaadin-form-layout vaadin-grid { box-shadow: none; border-radius: var(--vaadin-input-field-border-radius, 4px); } /* Lumo lascia 12px ai lati delle tab per le frecce di scorrimento, e ogni tab ha 12px di padding. Quando le tab ci stanno tutte, la fila si sposta in modo che il disegno dell'icona della prima tab parta sotto la prima lettera del titolo, e ogni tab tiene lo stesso padding ai lati, quindi la lineetta della tab selezionata e' centrata su icona e testo per tutte. Con le frecce, la fila resta dov'e'. AVVERTENZA: non si toglie il padding alla sola prima tab: la sua lineetta resterebbe spostata rispetto a icona e testo, e diversa dalle altre. */ vaadin-app-layout > .blu-page > vaadin-tabs:not([overflow~="start"]):not([overflow~="end"])::part(tabs) { /* il disegno dell'icona della prima tab parte dove parte il TESTO del titolo, che a 28px ha circa 2px di spazio prima della prima lettera (misurato su "D" e "C"): -0.75rem toglie il padding della tab e quello dell'icona, +2px la porta sotto la lettera. Con l'icona sul bordo esatto sembrava un pelo a sinistra del titolo; allineata ai campi del pannello (34px) era troppo a destra. Decisione di Luca del 04/11/2026 */ margin-inline: calc(2px - 0.75rem) 0; } /* --------------------------------------------------------------------------------------------- Griglie stondate come gli input, 4px (decisione di Luca del 04/11/2026). Commonui le stonda a 14px (blu-theme.css): qui tutte, pagine elenco comprese, prendono la variabile degli input, come i pannelli dei form. Il selettore ha un elemento in piu' di quello di commonui per vincere senza dipendere dall'ordine dei fogli. --------------------------------------------------------------------------------------------- */ html vaadin-grid { border-radius: var(--vaadin-input-field-border-radius, 4px); } /* --------------------------------------------------------------------------------------------- Testata delle griglie (riga dei nomi e riga dei filtri). Commonui (blu-theme.css) le da' una sfumatura verticale azzurrina scritta a mano (#f7fbff -> #edf4fc), che non segue la palette e che, applicata a ciascuna delle due righe, ne disegnava due una sopra l'altra. Qui un colore solo, senza sfumatura: un velo leggero del colore del tema, uguale per le due righe (decisione di Luca del 05/11/2026). I nomi delle colonne ordinabili stavano 3px sopra il centro della cella: vaadin-grid-sorter allinea il testo con le freccette, non al centro. Centrati, lo scarto e' quello di "Azioni" (non ordinabile), circa un pixel, che viene dalla forma delle lettere. --------------------------------------------------------------------------------------------- */ /* ATTENZIONE: un colore PIENO, non un velo trasparente. La colonna "Azioni" e' fissa a destra: con una testata trasparente ci passavano sotto, leggibili, i nomi delle altre colonne. */ html vaadin-grid::part(header-cell) { background: color-mix(in srgb, var(--blu-primary) 6%, #ffffff); } vaadin-grid-sorter { align-items: center; } vaadin-grid-sorter::part(indicators) { align-self: center; } /* Il bordo per allargare una colonna anche sulla riga dei titoli, non solo su quella dei filtri. ATTENZIONE: vaadin-grid mette la maniglia del resize solo nelle celle dell'ULTIMA riga d'intestazione, e nelle nostre griglie l'ultima e' quella dei filtri (appendHeaderRow): il bordo si prendeva sotto il titolo, non accanto. La maniglia qui sale di 10rem e copre anche i titoli. NOTA: 10rem e non l'altezza esatta della riga dei titoli, che cambia (titoli a capo, legende): la parte che sale oltre la griglia non si vede ne' si clicca, perche' l'intestazione sta dentro un contenitore che taglia quello che esce. Misurato il 05/11/2026 sulla griglia delle card: il bordo si prende a meta' del titolo e non sopra la griglia. Con una riga sola di intestazione la regola non cambia niente. */ html vaadin-grid::part(resize-handle) { top: -10rem; height: calc(100% + 10rem); } /* AVVERTENZA: l'ultima colonna bloccata (setFrozen, nelle card "Numero") ha overflow hidden, e la maniglia che sale restava tagliata dentro la sua cella: il bordo si prendeva sul filtro ma non sul titolo. Si apre solo la cella della riga dei filtri, quella che contiene la maniglia; il contenuto non ne esce comunque, lo taglia vaadin-grid-cell-content. */ html vaadin-grid::part(last-frozen-cell last-header-row-cell) { overflow: visible; } /* --------------------------------------------------------------------------------------------- Pannello del soggetto nei form delle operazioni (component/SubjectPanel): un divisore fra la colonna della card e quella del promocode. Verticale quando stanno affiancate, orizzontale quando lo spazio non basta e vanno una sotto l'altra (le colonne sono minimo 260px, piu' lo spazio fra le due). --------------------------------------------------------------------------------------------- */ /* Il pannello e le sue righe come i campi in sola lettura che ha intorno (blu-theme.css): bordo piu' scuro, angoli degli input, etichette e valori con i caratteri dei campi. Prima il bordo era il grigio chiaro di Lumo e gli angoli 12px, gli unici chiari del dettaglio operazione. */ .leisure-subject-panel { box-sizing: border-box; border: 1px solid rgba(27, 51, 79, 0.6); border-radius: var(--vaadin-input-field-border-radius, 4px); } .leisure-subject-label { font-size: var(--lumo-font-size-s); font-weight: 500; color: #35516d; } .leisure-subject-value { font-size: var(--lumo-font-size-m); font-weight: 500; color: #21374f; } .leisure-subject-columns { container-type: inline-size; } .leisure-subject-columns > * + * { border-left: 1px solid var(--lumo-contrast-10pct); padding-left: var(--lumo-space-m); } @container (max-width: 529px) { .leisure-subject-columns > * + * { border-left: none; padding-left: 0; border-top: 1px solid var(--lumo-contrast-10pct); padding-top: var(--lumo-space-m); } } /* --------------------------------------------------------------------------------------------- Larghezza delle colonne delle griglie. L'auto-width di Vaadin misura tutto quello che sta nella colonna, riga di filtro compresa: un campo Lumo parte da --vaadin-field-default-width (12em = 192px), e quel numero diventava la larghezza minima di ogni colonna filtrabile. Sulla griglia dei form la colonna ID ne usciva a 226px per mostrare due cifre. Qui i campi di filtro smettono di dettare la misura: si prendono la larghezza della colonna, con un minimo che li tiene usabili. --------------------------------------------------------------------------------------------- */ vaadin-grid-cell-content > vaadin-text-field, vaadin-grid-cell-content > vaadin-integer-field, vaadin-grid-cell-content > vaadin-number-field, vaadin-grid-cell-content > vaadin-combo-box, vaadin-grid-cell-content > vaadin-date-picker, vaadin-grid-cell-content > vaadin-select { --vaadin-field-default-width: 0; width: 100%; min-width: 4em; } /* La colonna Azioni: bottoni di sola icona, con l'aria fra uno e l'altro di un HorizontalLayout normale (16px) piu' i 16px di padding della cella. Quattro icone occupavano 250px. */ vaadin-grid-cell-content:has(> vaadin-horizontal-layout > vaadin-button) { padding-inline: var(--lumo-space-xs); } vaadin-grid-cell-content > vaadin-horizontal-layout:has(> vaadin-button) { gap: var(--lumo-space-xs); } /* Su uno schermo largo le icone piu' distanti (Luca, 06/11/2026). I pixel fra un'icona e l'altra erano gli stessi a ogni larghezza, 11, ma a schermo intero, con il resto della pagina piu' arioso, sembravano attaccate. La colonna e' ad auto-width: si allarga da sola. */ @media (min-width: 1200px) { vaadin-grid-cell-content > vaadin-horizontal-layout:has(> vaadin-button) { gap: var(--lumo-space-m); } } /* AVVERTENZA: non vale per i pulsanti di AbsLeisure.buildGridAction (tertiary-inline), che hanno gia' la misura dei comandi di riga di commonui: e' per le griglie non ancora passate di li'. */ vaadin-grid-cell-content > vaadin-horizontal-layout > vaadin-button:not([theme~="tertiary-inline"]) { min-width: var(--lumo-size-m); padding-inline: 0; } /* --------------------------------------------------------------------------------------------- Filtro a intervallo di date nella riga dei filtri (component/DateTimeRangeFilter). E' un vaadin-button che apre il popup delle date: senza intervallo scelto non ha testo, e col tema di commonui restava una pillola grigia stondata a 12px, alta 32px contro i 28,8 degli altri filtri. Qui prende la resa di un campo: le misure sono quelle dei campi di filtro (blu-grid.css: --lumo-text-field-size 1.8rem, testo 0.85rem) e i colori quelli dei campi di blu-theme.css (bordo rgba(34, 62, 92, 0.42), hover --blu-input-hover-bg). --------------------------------------------------------------------------------------------- */ vaadin-grid vaadin-button.leisure-range-filter { height: 1.8rem; min-height: 1.8rem; margin: 0; /* stesso margine a destra e a sinistra: l'icona sta a 5px dal bordo, come la freccia dei combo */ padding: 0 var(--lumo-space-s); background: #ffffff; border-radius: var(--vaadin-input-field-border-radius, 4px); box-shadow: inset 0 0 0 1px rgba(34, 62, 92, 0.42); color: var(--lumo-body-text-color); font-size: 0.85rem; font-weight: 400; } vaadin-grid vaadin-button.leisure-range-filter:hover { background: var(--blu-input-hover-bg); } /* il testo dell'intervallo a sinistra, il calendario in fondo a destra come nei date picker */ vaadin-grid vaadin-button.leisure-range-filter::part(label) { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; } vaadin-grid vaadin-button.leisure-range-filter vaadin-icon { color: var(--lumo-contrast-60pct); } /* AVVERTENZA: senza intervallo scelto il bottone non ha testo, e Flow tratta un bottone senza testo come "solo icona": l'icona perde lo slot suffix e finisce nell'etichetta, a sinistra. Qui la si riporta a destra; con un intervallo scelto torna nel suffix da sola. */ /* AVVERTENZA: flex e non block: con display block il disegno dell'icona scendeva di 18px sotto la sua scatola e l'overflow dell'etichetta lo tagliava a meta' */ vaadin-grid vaadin-button.leisure-range-filter > vaadin-icon:not([slot]) { display: flex; margin-inline-start: auto; } /* Nella finestra del filtro date i placeholder dicono il valore che si usa a campo vuoto ("Nessun limite", "00:00", "23:59"): corsivo e grigio chiaro, perche' non si scambino per valori scritti. Il grigio di Lumo da solo era troppo simile a un testo vero. AVVERTENZA: Lumo stila il placeholder da dentro il componente, facendolo ereditare dall'input (font e colore "inherit") e prendendo il colore da --vaadin-input-field-placeholder-color: una regola su ::placeholder da fuori non passa. Si lavora quindi sulla variabile e sull'input mentre mostra il placeholder. */ .leisure-range-dialog :is(vaadin-date-picker, vaadin-time-picker) { --vaadin-input-field-placeholder-color: var(--lumo-tertiary-text-color); } .leisure-range-dialog :is(vaadin-date-picker, vaadin-time-picker) > input:placeholder-shown { font-style: italic; } /* Il piede della finestra del filtro date a filo dei campi: il bordo di "Svuota" sotto il bordo sinistro dei campi, quello di "Applica" sotto il destro (decisione di Luca del 05/11/2026). Lumo da' al piede 10px di padding ai lati e al contenuto 20 (--lumo-space-l): si porta il piede a 20. */ vaadin-dialog.leisure-range-dialog::part(footer) { padding-inline: var(--lumo-space-l); } .leisure-range-dialog vaadin-button.leisure-range-clear { margin-inline-end: auto; } /* --------------------------------------------------------------------------------------------- Lavori in background (AbsLeisure.STYLE_TASK_STATUS): il riquadro sotto l'intestazione della pagina che li lancia - la scadenza del credito nella griglia Cards, lo scarico dei promocode nella griglia Promotion Code. Lo stato si legge qui, nella stessa pagina (Luca, 06/11/2026). Il colore lo da' l'attributo theme: running, done, error. --------------------------------------------------------------------------------------------- */ .leisure-task-status { display: flex; flex-direction: column; gap: 2px; align-self: stretch; margin-bottom: var(--lumo-space-s); padding: 6px var(--lumo-space-m); border: 1px solid rgba(27, 51, 79, 0.18); border-left-width: 4px; border-radius: var(--vaadin-input-field-border-radius, 4px); background: #ffffff; color: #21374f; font-size: 14px; } .leisure-task-status[theme~="running"] { border-left-color: var(--blu-primary); background: color-mix(in srgb, var(--blu-primary) 6%, #ffffff); } .leisure-task-status[theme~="done"] { border-left-color: var(--blu-primary-strong); } .leisure-task-status[theme~="error"] { border-left-color: #c0392b; background: #fdf3f2; } .leisure-task-status-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--lumo-space-s); } /* la X per nascondere una riga finita: in fondo a destra, lontana da "Apri" */ .leisure-task-status-close { margin-inline-start: auto; } /* il popup della scadenza del credito: un paragrafo per riga, senza i margini del

*/ .leisure-expire-dialog p { margin: 0; } /* "Attenzione:" arriva dal bundle come : stesso peso dei titoli, non il bold pieno */ .leisure-expire-dialog strong { font-weight: 600; } /* --------------------------------------------------------------------------------------------- Scheda "Versioni" dei dettagli (component/VersionHistory): una versione per riquadro, con il riquadro dei pannelli dei form (bordo, angoli 4px), e dentro la tabella Campo / Prima / Dopo. Il prima in rosso tenue e il dopo nel verde del tema: si legge la modifica senza le frecce. --------------------------------------------------------------------------------------------- */ .leisure-versions { display: flex; flex-direction: column; gap: var(--lumo-space-s); width: 100%; /* le regole "strette" in fondo alla sezione misurano lo storico, non la finestra */ container-type: inline-size; } vaadin-details.leisure-version { margin: 0; background: #ffffff; border: 1px solid rgba(27, 51, 79, 0.18); border-radius: var(--vaadin-input-field-border-radius, 4px); } /* AVVERTENZA: in Vaadin 25 il titolo non e' una part ma un elemento a se', vaadin-details-summary nel DOM della pagina: ::part(summary) non lo prende, e freccia e conteggio restavano attaccati al bordo. Ai due lati lo stesso margine della tabella: la freccia comincia dove comincia lei, il conteggio finisce dove finisce lei. */ vaadin-details.leisure-version > vaadin-details-summary { padding-inline: var(--lumo-space-m); } /* il contenuto del titolo si stringe con il riquadro: senza, su telefono data, autore e causa uscivano dal bordo invece di andare a capo */ vaadin-details.leisure-version > vaadin-details-summary::part(content) { flex: 1; min-width: 0; } vaadin-details.leisure-version::part(content) { padding: 0 var(--lumo-space-m) var(--lumo-space-m); } .leisure-version-summary { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--lumo-space-m); row-gap: 2px; width: 100%; color: #21374f; font-size: 14px; /* Lumo mette nowrap al titolo dei details: una causa lunga non andava mai a capo */ white-space: normal; } .leisure-version-number { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blu-primary) 12%, #ffffff); color: var(--blu-primary-strong); font-weight: 600; white-space: nowrap; } .leisure-version-meta { color: #5a6f86; font-variant-numeric: tabular-nums; white-space: nowrap; } .leisure-version-description { font-weight: 500; min-width: 0; overflow-wrap: anywhere; } /* il numero dei campi in fondo a destra, dove l'occhio arriva scorrendo le versioni chiuse */ .leisure-version-count { margin-inline-start: auto; color: #5a6f86; font-size: 13px; white-space: nowrap; } /* La tabella: una griglia CSS, non una vaadin-grid. Sono poche righe per versione e decine di versioni per oggetto: una vaadin-grid per ognuna sarebbe pesante, e qui non serve ordinare. */ .leisure-version-changes { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr) minmax(0, 2fr); border: 1px solid rgba(27, 51, 79, 0.12); border-radius: var(--vaadin-input-field-border-radius, 4px); overflow: hidden; font-size: 14px; } .leisure-version-changes > * { padding: 6px var(--lumo-space-s); border-top: 1px solid rgba(27, 51, 79, 0.08); /* le note arrivano a 400 caratteri senza spazi lunghi: vanno a capo dentro la cella */ overflow-wrap: anywhere; white-space: pre-wrap; } .leisure-version-changes > .leisure-version-head { border-top: none; background: color-mix(in srgb, var(--blu-primary) 6%, #ffffff); color: #35516d; font-size: 13px; font-weight: 600; } .leisure-version-field { display: flex; flex-direction: column; color: #21374f; font-weight: 500; } /* il nome della proprieta' sotto l'etichetta: per chi cerca nel codice, piccolo e grigio */ .leisure-version-property { color: #7a8ca0; font-family: var(--lumo-font-family-monospace, monospace); font-size: 11px; font-weight: 400; } .leisure-version-before { background: #fdf3f2; color: #8a3a33; } .leisure-version-after { background: color-mix(in srgb, var(--blu-primary) 8%, #ffffff); color: var(--blu-primary-strong); font-weight: 500; } .leisure-version-changes > .leisure-version-empty { color: #8a99aa; font-style: italic; font-weight: 400; } /* righe registrate come modifica ma con lo stesso valore prima e dopo: spente */ .leisure-version-changes > .leisure-version-same { background: transparent; color: #8a99aa; } /* Storico stretto (sotto i 600px): niente allineamenti forzati. Il titolo della versione scorre da sinistra e va a capo come il testo, con il conteggio in coda e non spinto sul bordo destro; nella tabella il campo sopra, prima e dopo affiancati sotto. */ @container (max-width: 600px) { .leisure-version-count { margin-inline-start: 0; } .leisure-version-meta { white-space: normal; overflow-wrap: anywhere; } .leisure-version-changes { grid-template-columns: 1fr 1fr; } .leisure-version-changes > .leisure-version-head:first-child, .leisure-version-changes > .leisure-version-field { grid-column: 1 / -1; } } /* --------------------------------------------------------------------------------------------- Schede della home (HomeView): occupano tutta la larghezza disponibile. blu-theme.css le dispone in una griglia con auto-fill, che tiene libere le colonne che avanzano: le schede restavano strette e i pulsanti andavano a capo. Una griglia non basta nemmeno con auto-fit: con tre schede su due colonne la terza resta a meta' riga. Qui e' un flex che va a capo: ogni riga, l'ultima compresa, si riempie per intero. --------------------------------------------------------------------------------------------- */ .blu-card-grid.leisure-home-cards { display: flex; flex-wrap: wrap; } /* basis 0 e min-width automatico: la scheda non scende sotto la larghezza dei suoi pulsanti in fila, quindi se non c'e' posto va a capo la scheda intera, non i pulsanti. Le schede di una riga si dividono lo spazio che avanza. */ .blu-card-grid.leisure-home-cards > .blu-card { flex: 1 1 0; } .blu-card-grid.leisure-home-cards .blu-card-actions { flex-wrap: nowrap; } /* la descrizione delle schede: blu-theme.css la tiene a font-size-s, piccola per la home (Luca, 06/11/2026). Solo qui: le altre schede di commonui restano come sono. NOTA: 15px a mano, non una variabile: col tema compatto font-size-m e' 14px, appena 1 in piu' dei 13 di partenza, e font-size-l e' quella del titolo (16px, in grassetto). */ .blu-card-grid.leisure-home-cards .blu-card-desc { font-size: 0.9375rem; } /* su uno schermo stretto i pulsanti tornano ad andare a capo, o la scheda uscirebbe dalla pagina */ @media (max-width: 600px) { .blu-card-grid.leisure-home-cards .blu-card-actions { flex-wrap: wrap; } } /* * Voce del menu utente realizzata con un RouterLink (MainUI.buildUserMenu): serve un * perche' il browser possa aprirla in una nuova scheda, ma deve avere la resa di una * normale voce di menu, quindi riempie la riga e non porta ne' colore ne' sottolineatura di link. */ .profile-menu-link, .profile-menu-link:hover, .profile-menu-link[highlight] { display: flex; align-items: center; gap: 8px; width: 100%; color: inherit; font-weight: 400; text-decoration: none; } /* ============================================================================================= 2. Componenti e classi di leisure ============================================================================================= */ /* * { font-family: "Lucida Console", "Courier New", monospace; font-size: 1rem; } */ vaadin-context-menu-overlay#overlay { transform: translateY(14px); } vaadin-context-menu-overlay#overlay::part(overlay) { border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.15); } /* Border for Select Operation Type in OperationDetailView */ .operation-item { padding: 2px 0; display: block; } .operation-item-group-separator { border-bottom: 1px solid var(--lumo-contrast-20pct); padding-bottom: 8px; margin-bottom: -8px; } vaadin-text-area.monospace-content::part(input-field) { font-family: monospace; white-space: pre; } [theme~="badge"][theme~="large"] { font-size: var(--lumo-font-size-l); } .banner { /* display: flex; width: 100%; */ display: inline-flex; flex-direction: column; align-items: center; text-align: center; gap: 0em; padding: var(--lumo-space-s) var(--lumo-space-m); box-sizing: border-box; background-color: var(--lumo-error-color); color: var(--lumo-error-contrast-color); border-radius: var(--lumo-border-radius-m); } .banner-title { font-size: var(--lumo-font-size-xl); font-weight: 700; margin: 0; line-height: var(--lumo-line-height-s); } .banner-text { font-size: var(--lumo-font-size-l); margin: 0; line-height: var(--lumo-line-height-m); } /* * Macro sezioni del popup "Dettaglio Anagrafica" (ProfileSearchView). * La banda deve coprire tutta la riga cliccabile, freccia inclusa: la riga e' il * part "summary" nello shadow DOM del componente, quindi non e' raggiungibile * con gli stili inline lato Java e va colorata da qui con ::part(). */ /* Le macro sezioni del popup "Dettaglio Anagrafica" (Siap, BTProfile): riquadri come quelli della scheda Versioni, con il titolo sul fondo delle intestazioni di griglia. Fino al 05/11/2026 erano barre piene, prima blu e poi del colore della barra in alto: troppo pesanti per un titolo, e staccate dal resto (Luca: "non mi piacciono i colori"). AVVERTENZA: in Vaadin 25 il titolo dei details e' l'elemento vaadin-details-summary, non la part "summary": con ::part(summary) la regola non prendeva niente. Stesso caso della scheda Versioni. */ vaadin-details.macro-section { /* border-box: larga il 100% piu' il bordo, la sezione sforava e il popup scorreva di lato */ box-sizing: border-box; /* ATTENZIONE: il contenitore e' un VerticalLayout (flex in colonna) con un'altezza massima, e da aperte le due sezioni non ci stanno: senza flex-shrink 0 si stringevano invece di far scorrere il popup, e la prima restava tagliata a meta' */ flex-shrink: 0; margin: 0 0 var(--lumo-space-m); background: #ffffff; border: 1px solid rgba(27, 51, 79, 0.18); /* angoli vivi (Luca, 05/11/2026) */ border-radius: 0; } vaadin-details.macro-section:last-child { margin-bottom: 0; } /* il titolo ha angoli e margini suoi (Lumo): il fondo si vedeva come un bordino stondato dentro il riquadro, invece di riempirlo */ vaadin-details.macro-section > vaadin-details-summary { margin: 0; border-radius: 0; padding: 6px var(--lumo-space-m); background: color-mix(in srgb, var(--blu-primary) 6%, #ffffff); color: #21374f; font-size: var(--lumo-font-size-m); font-weight: 600; } vaadin-details.macro-section[opened] > vaadin-details-summary { border-bottom: 1px solid rgba(27, 51, 79, 0.12); } vaadin-details.macro-section > vaadin-details-summary::part(toggle) { color: var(--blu-primary-strong); } /* Lo spazio dentro la sezione: sopra quanto basta a staccare la prima etichetta dal titolo, ai lati e sotto quello della scheda Versioni. Prima il contenuto partiva a filo della barra. */ vaadin-details.macro-section::part(content) { padding: var(--lumo-space-s) var(--lumo-space-m) var(--lumo-space-m); } /* Legenda della colonna Scadenza Consensi: compare passando il mouse sull'icona info. Non si puo' usare il title nativo, che accetta solo testo e non le icone colorate. */ .consent-legend-host { position: relative; display: inline-flex; align-items: center; } .consent-legend { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 100; padding: var(--lumo-space-s); background: var(--lumo-base-color); border: 1px solid var(--lumo-contrast-20pct); border-radius: var(--lumo-border-radius-m); box-shadow: var(--lumo-box-shadow-s); white-space: nowrap; font-weight: normal; text-transform: none; color: var(--lumo-body-text-color); } .consent-legend-host:hover .consent-legend { display: block; } /* un filo d'aria fra le righe, altrimenti le icone si toccano */ .consent-legend > * + * { margin-top: 3px; } .consent-legend > *:first-child { margin-bottom: 5px; } /* la cella dell'intestazione taglia quello che esce dai suoi bordi: senza questa regola la legenda resterebbe invisibile anche da aperta */ vaadin-grid-cell-content:has(.consent-legend-host) { overflow: visible; }