/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
Struttura della shell, e solo struttura: i colori arrivano dai token globali attraverso
il bridge Bootstrap, non da qui. Nessun valore letterale di colore vive fuori da
sg-tokens.scss — questo file non fa eccezione, e un test di architettura lo verifica.
Il punto di rottura e' 992px e non un valore scelto qui: e' il `lg` di Bootstrap, cioe'
quello a cui .offcanvas-lg smette di essere un pannello e torna un blocco. Due soglie
diverse darebbero una fascia di larghezze in cui la sidebar e' visibile e il pulsante
che la apre pure.
*/
/*
Skip link. Fuori schermo finche' non ha il focus, e a quel punto VISIBILE davvero: un
link che resta a -9999px anche da focalizzato esiste per il test automatico e non per
la persona che sta tabulando. z-index sopra la topbar sticky, altrimenti compare
sotto di essa (WCAG 2.2 · 2.4.11, focus non oscurato).
*/
.sg-skip-link[b-5asyvwsmct] {
position: absolute;
inset-inline-start: var(--ev-space-3);
top: calc(-1 * var(--ev-space-7));
z-index: 1050;
padding: var(--ev-space-2) var(--ev-space-4);
border-radius: var(--ev-radius);
background-color: var(--ev-surface-raised);
color: var(--ev-text);
box-shadow: var(--ev-shadow);
text-decoration: none;
transition: top var(--ev-dur-fast) var(--ev-ease-out);
}
.sg-skip-link:focus-visible[b-5asyvwsmct] {
top: var(--ev-space-3);
}
@media (prefers-reduced-motion: reduce) {
.sg-skip-link[b-5asyvwsmct] {
transition: none;
}
}
.page[b-5asyvwsmct] {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
/* minmax implicito: senza min-width, un figlio largo (una tabella, un grafico) sfonda
il contenitore flex invece di scorrere dentro il proprio riquadro. */
min-width: 0;
}
.main-column[b-5asyvwsmct] {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
/*
La topbar: appiccicosa e in vetro.
⚠️ Il velo funziona solo se il fondo e' TRASLUCIDO: --ev-glass e' un rgba, quindi
background-color e non background, e nessuna tinta piatta sotto. Dove
backdrop-filter non e' supportato resta comunque un fondo al 78/86% sopra il
contenuto — leggibile, senza sfocatura. Il degrado e' voluto e non va "corretto"
con un fallback opaco: sarebbe la stessa barra in due prodotti diversi.
*/
.top-row[b-5asyvwsmct] {
display: flex;
align-items: center;
gap: var(--ev-space-3);
min-height: 3.375rem;
padding-inline: var(--ev-space-5);
border-bottom: 1px solid var(--ev-hairline);
position: sticky;
top: 0;
z-index: 1020;
/* isolation: il velo qui sotto sta a z-index -1, e senza un contesto di
impilamento proprio finirebbe dietro al fondo della pagina invece che
dietro al solo contenuto della barra. */
isolation: isolate;
}
/*
IL VELO STA IN UN ::before, E NON SULLA BARRA. Non e' un vezzo: `filter` e
`backdrop-filter` rendono l'elemento un CONTAINING BLOCK per i discendenti in
`position: fixed`. Il pannello della guida e' reso da , che vive
dentro questa barra: col filtro sulla barra, il pannello «fisso» si ancorava
alla barra invece che alla finestra e diventava una scheggia alta 53px
all'angolo destro. Si apriva davvero — classe `is-open`, aria-hidden false —
e non si vedeva, che e' il modo peggiore in cui un comando puo' rompersi.
Su uno pseudo-elemento il filtro produce lo stesso velo e non crea alcun
containing block per i fratelli, perche' lo pseudo-elemento discendenti non ne
ha. ⚠️ Vale per QUALUNQUE superficie in vetro che contenga componenti: prima
di mettere `backdrop-filter` su un contenitore, si guarda che cosa ci vive
dentro.
*/
.top-row[b-5asyvwsmct]::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--ev-glass);
backdrop-filter: var(--ev-glass-blur);
-webkit-backdrop-filter: var(--ev-glass-blur);
}
.top-row__spacer[b-5asyvwsmct] {
flex: 1;
}
.top-row__icon[b-5asyvwsmct] {
width: 1.125rem;
height: 1.125rem;
display: block;
fill: currentColor;
}
.content[b-5asyvwsmct] {
flex: 1;
/* In fondo piu' spazio che in testa: l'ultima sezione di una pagina lunga non deve
finire incollata al bordo della finestra, dove sembra tagliata. */
padding: var(--ev-space-5) var(--ev-space-4) var(--ev-space-7);
}
/* e' focalizzabile per ricevere il salto dello skip link, ma non e' un controllo:
l'anello del focus su un'area di pagina non aggiunge nulla e sembra un guasto. */
.content:focus[b-5asyvwsmct] {
outline: none;
}
.bottom-row[b-5asyvwsmct] {
padding: var(--ev-space-4) var(--ev-space-5);
border-top: 1px solid var(--ev-hairline);
color: var(--ev-text-muted);
font-size: var(--ev-fs-sm);
}
/*
La sidebar, in vetro come la topbar. Sotto lg e' un offcanvas: li' il velo sta sopra
il contenuto della pagina, ed e' proprio il caso in cui serve.
*/
.sidebar[b-5asyvwsmct] {
/*
COLONNA FLEX, e serve perche' la tessera in fondo ci arrivi davvero.
`.nav-pulse` si spinge in basso con `margin-block-start: auto`, che in un
blocco normale non fa nulla: sotto lg funzionava — Bootstrap mette
`display: flex; flex-direction: column` su `.offcanvas` — e sopra lg, dove
`.offcanvas-lg` quel display lo toglie, la tessera restava appiccicata
all'ultima voce di menu con il vuoto sotto. Due comportamenti diversi ai
due lati dello stesso punto di rottura, cioe' il difetto piu' facile da
non vedere: si guarda la finestra larga e sembra un margine sbagliato.
*/
display: flex;
flex-direction: column;
background-color: var(--ev-glass-side);
/* Stessa cautela della topbar: qui il filtro resta sull'elemento perche' la
barra non contiene nulla in position: fixed — ma se un giorno ce lo si
mette, va spostato in un ::before come sopra. */
backdrop-filter: var(--ev-glass-blur);
-webkit-backdrop-filter: var(--ev-glass-blur);
}
@media (min-width: 992px) {
.page[b-5asyvwsmct] {
flex-direction: row;
}
.sidebar[b-5asyvwsmct] {
/* flex-shrink a 0 ma con una base dichiarata: `flex: none` sul fratello di un
contenuto elastico e' il modo classico per affamare il campo portante. Qui la
sidebar ha una larghezza fissa e main-column ha flex:1, quindi il conto torna. */
flex: 0 0 248px;
width: 248px;
height: 100vh;
position: sticky;
top: 0;
/* La barra e' piu' alta della finestra appena i gruppi si riempiono: senza
questo, le ultime voci non si raggiungono e non c'e' modo di accorgersene
perche' la pagina accanto scorre. */
overflow-y: auto;
border-inline-end: 1px solid var(--ev-border);
}
.content[b-5asyvwsmct] {
padding: var(--ev-space-5) var(--ev-space-6) var(--ev-space-7);
}
/*
La barra ridotta alla sola colonna delle icone.
L'ancora e' html[data-sg-nav] e non una classe su .page, e non e' una scelta di
stile: l'attributo lo scrive sg-nav.js PRIMA del primo paint, quando .page non
esiste ancora. Partire da e' l'unico modo perche' la larghezza sia gia'
giusta al primo fotogramma invece di assestarsi dopo che Blazor si e' connesso.
La CSS isolation scopa il selettore in coda (.sidebar[b-xxx]), quindi la regola
resta confinata a questo componente pur partendo da fuori.
Solo dentro la media query di lg, e questo e' il vincolo che rende il comando
onesto: sotto lg la barra e' un offcanvas, cioe' o coperta o assente, e una rail
di sole icone dentro un pannello aperto a pieno schermo sarebbe un elenco di
simboli senza nome. La preferenza resta persistita e torna a valere appena la
finestra si riallarga — non si perde, semplicemente non si applica.
*/
html[data-sg-nav="collapsed"] .sidebar[b-5asyvwsmct] {
flex-basis: 4rem;
width: 4rem;
}
/* La transizione sta sulla sola sidebar e non sul contenuto: il contenuto e' elastico
e si riassesta da se'. Animare anche quello vorrebbe dire animare la larghezza di un
grafico, che ApexCharts ridisegna a ogni passo. */
.sidebar[b-5asyvwsmct] {
transition: flex-basis var(--ev-dur-fast) var(--ev-ease-out),
width var(--ev-dur-fast) var(--ev-ease-out);
}
}
/* prefers-reduced-motion risolve allo STATO FINALE e non a meta' strada: la barra e'
ridotta subito, senza passaggi. E' la stessa regola dello skip link qui sopra e la
Definition of Done di M7 la chiede su ogni animazione. */
@media (prefers-reduced-motion: reduce) {
.sidebar[b-5asyvwsmct] {
transition: none;
}
}
/*
L'avviso di errore del circuito. color-scheme: light only e i colori espliciti sono
voluti: quando questo riquadro compare il circuito e' caduto, quindi e' l'ultima cosa
che l'utente vede, e deve essere leggibile anche se il tema non fosse stato applicato.
*/
#blazor-error-ui[b-5asyvwsmct] {
color-scheme: light only;
background: var(--ev-warning-subtle);
color: var(--ev-text);
border-top: 2px solid var(--ev-warning);
bottom: 0;
box-sizing: border-box;
display: none;
left: 0;
padding: var(--ev-space-3) var(--ev-space-5);
position: fixed;
width: 100%;
z-index: 1080;
}
#blazor-error-ui .dismiss[b-5asyvwsmct] {
cursor: pointer;
position: absolute;
inset-inline-end: var(--ev-space-3);
top: var(--ev-space-2);
}
/* /Components/Layout/NavCollapse.razor.rz.scp.css */
/*
L'icona del pulsante ha bisogno delle proprie regole, e la ragione e' K-101.
.top-row__icon e' dichiarata in MainLayout.razor.css, quindi porta l'attributo
b-xxxxx di QUEL componente: la CSS isolation di Blazor scopa ogni regola al markup
scritto nel proprio .razor, e un