/* ═══════════════════════════════════════════════════════════════════════════ LIQUID GLASS — NON MODIFICARE Fa parte di uicore/core: al prossimo riallineamento questo file viene sovrascritto. Per personalizzare: config/brand.css o un foglio di progetto caricato DOPO il core. ═══════════════════════════════════════════════════════════════════════════ Il materiale, non i componenti. Qui ci sono le ricette del vetro e le classi che le applicano; chi le usa — sidebar, topbar, bottom nav, sheet, modal — sta altrove. ┌─ La regola che tiene in piedi tutto ────────────────────────────────────┐ │ Il vetro va sul CHROME, mai sui contenuti. │ │ │ │ Sidebar, topbar, navigazione, sheet e backdrop: vetro. Card, tabelle, │ │ form e testo: superfici piene. Un contenuto su fondo traslucido è più │ │ faticoso da leggere e il contrasto cambia a seconda di cosa ci scorre │ │ sotto — cioè diventa impossibile da garantire. │ └─────────────────────────────────────────────────────────────────────────┘ La tinta del vetro deriva dal brand: cambiare `--ui-brand` cambia anche il riflesso, quindi il white-label resta coerente senza ritocchi. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Chrome traslucido: sidebar, topbar, dropdown */ --ui-glass-bg: rgba(255, 255, 255, .62); --ui-glass-border: rgba(255, 255, 255, .72); --ui-glass-blur: blur(22px) saturate(180%); /* Pannelli quasi pieni: dropdown e popover, dove serve leggere */ --ui-glass-panel-bg: rgba(255, 255, 255, .90); --ui-glass-panel-border: rgba(40, 25, 90, .07); /* Navigazione mobile e sheet: più trasparenti, il contenuto sotto si intravede ed è ciò che dà la sensazione di profondità */ --ui-glass-nav-bg: rgba(255, 255, 255, .34); --ui-glass-nav-border: rgba(255, 255, 255, .60); --ui-glass-nav-ink: rgba(22, 18, 31, .60); --ui-glass-nav-pill: rgba(255, 255, 255, .66); --ui-glass-nav-blur: blur(24px) saturate(190%); /* Velo dietro modal e sheet */ --ui-glass-backdrop-bg: rgba(20, 18, 40, .34); --ui-glass-backdrop-blur: blur(6px); } [data-bs-theme="dark"] { --ui-glass-bg: rgba(26, 23, 34, .60); --ui-glass-border: rgba(255, 255, 255, .10); --ui-glass-panel-bg: rgba(28, 25, 38, .90); --ui-glass-panel-border: rgba(255, 255, 255, .08); --ui-glass-nav-bg: rgba(30, 28, 40, .38); --ui-glass-nav-border: rgba(255, 255, 255, .13); --ui-glass-nav-ink: rgba(236, 232, 245, .58); --ui-glass-nav-pill: rgba(255, 255, 255, .16); --ui-glass-backdrop-bg: rgba(0, 0, 0, .52); } /* ── Canvas ──────────────────────────────────────────────────────────────── Va sul . Due aloni tenui del colore brand negli angoli alti: danno profondità alla pagina senza che si noti l'effetto. `fixed` perché devono restare fermi mentre il contenuto scorre — se scorrono, si vedono. */ .ui-canvas { background-color: var(--ui-page); background-image: radial-gradient(60vw 42vh at 6% -4%, rgba(var(--ui-brand-rgb), .06), transparent 60%), radial-gradient(52vw 40vh at 100% -2%, rgba(var(--ui-brand-rgb), .05), transparent 55%); background-attachment: fixed; background-repeat: no-repeat; } /* ── Vetro ──────────────────────────────────────────────────────────────── ┌─ COME È COSTRUITO, E PERCHÉ COSÌ ───────────────────────────────────────┐ │ Ogni superficie di vetro è fatta di TRE livelli sovrapposti: │ │ │ │ ::before lo sfondo sfocato (`backdrop-filter`) — è qui, e SOLO qui, │ │ che si applica la rifrazione │ │ elemento la tinta e il contenuto — mai deformato │ │ ::after bordo e riflesso interno: lo spessore del vetro │ │ │ │ Il motivo è secco: `filter` agisce su tutto il sottoalbero. Applicarlo │ │ all'elemento deforma anche il testo dentro, che diventa illeggibile. │ │ Mettendolo sul solo `::before` (che sta a `z-index:-1`) si deforma │ │ quello che si vede ATTRAVERSO il vetro, non quello che ci sta SOPRA. │ │ │ │ `isolation:isolate` serve a tenere lo `z-index:-1` dentro l'elemento: │ │ senza, lo strato scivola dietro lo sfondo della pagina e sparisce. │ │ │ │ Conseguenza: chi usa queste classi NON può usare ::before e ::after per │ │ altro sullo stesso elemento. │ └─────────────────────────────────────────────────────────────────────────┘ */ .ui-glass, .ui-glass-panel, .ui-glass-nav { position: relative; isolation: isolate; } .ui-glass::before, .ui-glass-panel::before, .ui-glass-nav::before, .ui-glass::after, .ui-glass-panel::after, .ui-glass-nav::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; } /* Lo strato che sfoca ciò che sta sotto. */ .ui-glass::before, .ui-glass-panel::before, .ui-glass-nav::before { -webkit-backdrop-filter: var(--ui-glass-blur); backdrop-filter: var(--ui-glass-blur); } /* Bordo e riflesso interno. Le due ombre incassate — chiara in alto a sinistra, più tenue in basso a destra — simulano la luce che entra nello spessore del vetro. È il dettaglio che distingue "vetro" da "sfondo sfocato": toglilo e l'effetto si sgonfia. */ .ui-glass::after, .ui-glass-panel::after, .ui-glass-nav::after { pointer-events: none; border: 1px solid var(--ui-glass-border); box-shadow: inset 1.5px 1.5px 1px rgba(255, 255, 255, .55), inset -1px -1px 1px rgba(255, 255, 255, .18); } .ui-glass { background: var(--ui-glass-bg); box-shadow: var(--ui-shadow-lg); } .ui-glass-panel { background: var(--ui-glass-panel-bg); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-lg); } .ui-glass-panel::before { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); } .ui-glass-panel::after { border-color: var(--ui-glass-panel-border); } .ui-glass-nav { background: var(--ui-glass-nav-bg); box-shadow: var(--ui-shadow-xl); } .ui-glass-nav::before { -webkit-backdrop-filter: var(--ui-glass-nav-blur); backdrop-filter: var(--ui-glass-nav-blur); } .ui-glass-nav::after { border-color: var(--ui-glass-nav-border); } [data-bs-theme="dark"] .ui-glass::after, [data-bs-theme="dark"] .ui-glass-panel::after, [data-bs-theme="dark"] .ui-glass-nav::after { /* Al buio un riflesso bianco pieno sembra un alone: va tenuto basso. */ box-shadow: inset 1.5px 1.5px 1px rgba(255, 255, 255, .14), inset -1px -1px 1px rgba(255, 255, 255, .05); } .ui-glass-backdrop { background: var(--ui-glass-backdrop-bg); -webkit-backdrop-filter: var(--ui-glass-backdrop-blur); backdrop-filter: var(--ui-glass-backdrop-blur); } /* ── Rifrazione ─────────────────────────────────────────────────────────── Si aggiunge accanto a una delle classi sopra. Agisce sul solo strato sfocato: il contenuto resta nitido. Costa in resa: solo su superfici piccole e ferme — navigazione mobile, sheet, pannelli fluttuanti — mai su aree grandi o che scorrono, dove il browser ricalcola il filtro a ogni frame. */ .ui-glass-refract::before { filter: url(#ui-glass-refract); } @media (prefers-reduced-motion: reduce) { /* Il filtro non anima, ma la deformazione dà comunque una sensazione di instabilità: chi ha chiesto meno movimento riceve un vetro piatto. */ .ui-glass-refract::before { filter: none; } } /* ── Ripiego senza backdrop-filter ──────────────────────────────────────── Senza sfocatura, un fondo al 34% di opacità diventa testo illeggibile sopra qualunque cosa ci scorra sotto. Qui le superfici tornano piene: si perde l'effetto, non la leggibilità. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root { --ui-glass-bg: var(--ui-panel); --ui-glass-panel-bg: var(--ui-panel); --ui-glass-nav-bg: var(--ui-panel); --ui-glass-backdrop-bg: rgba(20, 18, 40, .62); } [data-bs-theme="dark"] { --ui-glass-bg: var(--ui-panel); --ui-glass-panel-bg: var(--ui-panel); --ui-glass-nav-bg: var(--ui-panel); --ui-glass-backdrop-bg: rgba(0, 0, 0, .72); } /* Senza sfocatura non c'è niente da deformare: la rifrazione distorcerebbe soltanto il colore di fondo, con un effetto sporco. */ .ui-glass-refract::before { filter: none; } } /* ── Cambio tema ────────────────────────────────────────────────────────── Al cambio di tema la classe `.ui-theme-anim` resta su per mezzo secondo: i colori fanno una dissolvenza invece di scattare. Solo colori e bordi — animare anche le ombre costa frame e non si nota. */ html.ui-theme-anim, html.ui-theme-anim body, html.ui-theme-anim .ui-glass, html.ui-theme-anim .ui-glass-panel, html.ui-theme-anim .ui-glass-nav, html.ui-theme-anim .card, html.ui-theme-anim .btn { transition: background-color var(--ui-duration-slow) var(--ui-ease), border-color var(--ui-duration-slow) var(--ui-ease), color var(--ui-duration-slow) var(--ui-ease); }