/* ---------------------------------------------------------------------------
Layout del pannello.
Consuma esclusivamente token semantici: nessun valore esadecimale, nessun
primitivo, nessuna classe di tema. Il test di conformità del design system
vale anche qui — cambiando `data-kit` su tutto deve ripitturarsi, e
se qualcosa resta fermo non appartiene ancora al sistema.
Le classi `.sv-*` vengono dalla libreria del brand kit e non sono
ridefinite: quanto segue aggiunge solo la griglia e i pochi elementi che il
pannello ha in più (misuratori, righe di servizio).
--------------------------------------------------------------------------- */
/* ── Nascosto vuol dire nascosto ──────────────────────────────────────── */
/*
`[hidden] { display: none }` vive nel foglio del browser, e ha la stessa
specificità di una classe. Qualunque regola d'autore che dichiari un
display — `.pannello-accesso { display: grid }`, qui sotto — vince, e
l'elemento resta visibile mentre il DOM giura che è nascosto.
È il guasto che teneva fuori dal pannello: l'accesso riusciva, il pannello
veniva costruito, mostraPannello() metteva hidden sulla schermata di
accesso — e il browser continuava a disegnarla, alta quanto lo schermo, con
il pannello sotto la piega. Dal lato di chi guarda: premi Entra e non
succede niente. Il server rispondeva 200 a ogni tentativo.
*/
[hidden] {
display: none !important;
}
/* ── Il margine che nessuno aveva chiesto ─────────────────────────────── */
/*
Gli 8px che il browser mette sul per difetto. Su un documento di
testo hanno senso; su un'applicazione a tutto schermo no — e finché la
barra scorreva via con la pagina non se ne accorgeva nessuno.
Con la barra appiccicata diventano visibili: misurato, la barra stava a
`top: 8` da ferma e a `top: 0` una volta incollata, quindi SALTAVA di otto
pixel nell'istante esatto in cui si comincia a scorrere, in cima allo
schermo, mentre la si sta guardando. È il tipo di difetto che si nota
benissimo e non si sa nominare.
I margini orizzontali li mette già .sv-container, quindi qui non si perde
niente.
*/
body.sv-app {
margin: 0;
}
/* ── Accesso ─────────────────────────────────────────────────────────── */
.pannello-accesso {
min-height: 100dvh;
display: grid;
place-items: center;
padding: var(--sv-s5);
}
.pannello-accesso__carta {
width: min(26rem, 100%);
}
/* Il kit espone la scala tipografica come token, non come classi: `sv-t-h2` è
una misura, e metterla nell'attributo class non dipinge niente. Il titolo si
compone qui, dai token, che è il livello a cui l'applicazione può farlo. */
.pannello-titolo {
margin: 0;
font-family: var(--sv-font-ui);
font-weight: 600;
font-size: var(--sv-t-h2);
line-height: var(--sv-t-h2-lh);
color: var(--sv-text-1);
}
/* Il payoff è `space-between`: le due parole vanno agli estremi, e con la
larghezza `max-content` che il kit dà alla firma di spazio da distribuire
non ce n'è — si leggeva SVILUPPIAMOAPPLICAZIONI, tutto attaccato. Una
larghezza definita è la condizione perché «estremi allineati» voglia dire
qualcosa: la scritta si adatta (è una forma), il payoff si distende.
Il tetto tiene la scritta in proporzione al resto della carta. */
.pannello-accesso__firma {
width: 100%;
max-width: 17rem;
}
/* La versione del design system arriva dal token, non da una stringa
ricopiata: così non resta indietro di due rilasci senza che nessuno se ne
accorga. È l'uso per cui il kit la espone come custom property. */
.pannello-accesso__versione::after {
content: "Design system " var(--sv-kit-version);
}
/* ── Telaio: barra laterale e colonna ────────────────────────────────── */
/*
Il pannello è passato da «una pagina lunga con la barra in cima» a «una
barra laterale e una vista alla volta».
La ragione non è estetica. Con sei sezioni impilate, per arrivare alla
sorveglianza si attraversavano tutte le altre; ogni sezione cresceva e
rimpiccioliva sotto il cursore a ogni giro di aggiornamento (il diario del
watchdog passa da quattro a tredici righe da solo), e la pagina saltava
mentre si stava premendo un bottone. Con le viste, ciò che cresce cresce
dentro il proprio schermo e non sposta niente di quello che si sta usando.
La larghezza della barra è una variabile perché la usa anche il cassetto su
schermo stretto: due numeri uguali scritti in due posti diventano due numeri
diversi al primo ripensamento.
*/
.telaio {
--fianco: 15.5rem;
display: grid;
grid-template-columns: var(--fianco) minmax(0, 1fr);
min-height: 100dvh;
}
/*
Appiccicata e alta quanto lo schermo: la navigazione non scorre via mai. È
la differenza fra «dove sono» e «dove posso andare» — la seconda domanda
non deve costare uno scorrimento all'insù.
`overflow-y:auto` perché su schermi bassi (un portatile con la finestra
dimezzata) sei voci più i comandi non ci stanno, e ciò che non ci sta deve
poter scorrere DENTRO la barra invece di essere tagliato.
*/
.fianco {
position: sticky;
inset-block-start: 0;
/*
`border-box`, e non è pedanteria: né il kit né questo foglio dichiarano un
`box-sizing` globale, quindi vale `content-box` e i 24 px di respiro sopra
e sotto si SOMMANO ai 100dvh. Misurato su una finestra alta 900: barra alta
948, e il collegamento al changelog — l'unico che porta alla sua pagina —
finiva 24 px sotto il bordo dello schermo, irraggiungibile. `overflow-y`
non salva niente: a scorrere non è il contenuto dentro la barra, è la barra
stessa a sporgere.
*/
box-sizing: border-box;
block-size: 100dvh;
display: flex;
flex-direction: column;
gap: var(--sv-s4);
padding: var(--sv-s5) var(--sv-s4);
background: var(--sv-surface-1);
border-inline-end: 1px solid var(--sv-line);
overflow-y: auto;
overscroll-behavior: contain;
}
.fianco__testa {
padding-inline: var(--sv-s2);
}
/* `flex:1` sulla navigazione: è lei a prendersi lo spazio che avanza, così i
comandi e la versione restano incollati in fondo alla barra invece di
galleggiare subito sotto l'ultima voce. */
.fianco__nav {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-block-size: 0;
}
.voce {
display: flex;
align-items: center;
gap: var(--sv-s3);
min-block-size: 40px;
padding: var(--sv-s2) var(--sv-s3);
border-radius: var(--sv-r2);
color: var(--sv-text-2);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-bs);
line-height: var(--sv-t-bs-lh);
text-decoration: none;
transition: background-color var(--sv-dur-1) var(--sv-ease),
color var(--sv-dur-1) var(--sv-ease);
}
.voce:hover {
background: var(--sv-surface-2);
color: var(--sv-text-1);
}
.voce:focus-visible {
outline: none;
box-shadow: var(--sv-focus-ring);
}
/*
`aria-current` e non una classe `.attiva`: lo stato «sei qui» va detto una
volta sola, nel posto in cui lo legge anche chi usa un lettore di schermo.
Una classe che dipinge e un attributo che annuncia sono due verità da tenere
allineate a mano, e prima o poi divergono.
Il filo a sinistra è un `box-shadow` interno e non un bordo: un bordo
sposterebbe il testo di tre pixel all'attivazione, e le voci ballerebbero
passando dall'una all'altra.
*/
.voce[aria-current="page"] {
background: var(--sv-accent-1-tint);
color: var(--sv-accent-1-text);
font-weight: 600;
box-shadow: inset 3px 0 0 0 var(--sv-accent-1);
}
.voce__segno {
inline-size: 20px;
block-size: 20px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.voce__nome {
min-inline-size: 0;
overflow-wrap: anywhere;
}
/* La pastiglia del livello di sorveglianza sta nella voce che porta alla
sorveglianza. `margin-inline-start:auto` la spinge in fondo alla riga; è
un'etichetta dentro un collegamento, quindi non intercetta il puntatore —
il bersaglio cliccabile resta la voce intera. */
.voce__stato {
margin-inline-start: auto;
pointer-events: none;
font-size: var(--sv-t-cap);
}
/* ── Piede della barra ───────────────────────────────────────────────── */
.fianco__piede {
display: grid;
gap: var(--sv-s3);
padding-block-start: var(--sv-s3);
border-block-start: 1px solid var(--sv-line);
}
/*
L'aspetto sta chiuso. Sei pastiglie e un menù a tendina si toccano una volta
ogni tanto, e aperti si prendevano un terzo della barra per un uso raro.
Il triangolo di sistema è tolto: il segno lo dà la rotazione dell'icona, che
è già lì e non aggiunge un secondo indicatore che dice la stessa cosa.
*/
.aspetto__linguetta {
display: flex;
align-items: center;
gap: var(--sv-s3);
min-block-size: 36px;
padding: var(--sv-s2) var(--sv-s3);
border-radius: var(--sv-r2);
color: var(--sv-text-2);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-bs);
cursor: pointer;
list-style: none;
}
.aspetto__linguetta::-webkit-details-marker { display: none; }
.aspetto__linguetta:hover { background: var(--sv-surface-2); color: var(--sv-text-1); }
.aspetto__linguetta:focus-visible { outline: none; box-shadow: var(--sv-focus-ring); }
.aspetto[open] .aspetto__linguetta .voce__segno { transform: rotate(180deg); }
.aspetto__corpo {
display: grid;
gap: var(--sv-s3);
padding: var(--sv-s3);
}
.fianco__chi {
margin: 0;
padding-inline: var(--sv-s3);
color: var(--sv-text-3);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-cap);
overflow-wrap: anywhere;
}
.fianco__chi:empty { display: none; }
.fianco__comandi {
display: flex;
gap: var(--sv-s2);
}
.fianco__comandi .sv-btn { flex: 1; }
/*
Il numero di versione È il collegamento al changelog. La specifica lo chiede
così, e il motivo si vede appena lo si prova: il numero è la domanda («quale
versione sto usando?») e il changelog è la risposta. Separarli obbliga a
cercare la seconda dopo aver letto la prima.
*/
.versione {
display: flex;
align-items: baseline;
gap: var(--sv-s2);
padding: var(--sv-s2) var(--sv-s3);
border-radius: var(--sv-r2);
text-decoration: none;
color: var(--sv-text-3);
}
.versione:hover { background: var(--sv-surface-2); }
.versione:focus-visible { outline: none; box-shadow: var(--sv-focus-ring); }
.versione__numero {
font-family: var(--sv-font-mono);
font-size: var(--sv-t-code);
color: var(--sv-text-2);
}
.versione:hover .versione__numero { color: var(--sv-text-1); }
.versione__nota {
font-family: var(--sv-font-ui);
font-size: var(--sv-t-cap);
color: var(--sv-accent-1-text);
}
/* ── Colonna e testata ───────────────────────────────────────────────── */
.colonna {
display: flex;
flex-direction: column;
min-inline-size: 0;
}
/*
La testata NON ripete il titolo della vista: quello sta dentro la vista, una
volta sola. Qui ci sta solo ciò che vale in tutte le viste — su quale
macchina siamo e se il pannello si sta ancora aggiornando. Un titolo
duplicato in cima allo schermo è una riga che nessuno legge due volte e che
toglie spazio ai numeri.
z-index dalla scala del kit: 100, sotto i toast (900) e lo scrim (1000).
Niente 9999, e niente backdrop-filter: il fondo è opaco in tutte e dodici le
palette, quindi una sfocatura non si vedrebbe e in cambio creerebbe un
contesto di impilamento e un blocco contenitore per i discendenti `fixed`.
*/
.testata {
position: sticky;
inset-block-start: 0;
z-index: var(--sv-z-sticky);
display: flex;
align-items: center;
gap: var(--sv-s3);
min-block-size: 52px;
padding: var(--sv-s2) var(--sv-s6);
background: var(--sv-surface-1);
border-block-end: 1px solid var(--sv-line);
}
.testata__spazio { flex: 1; }
.testata__host {
font-family: var(--sv-font-mono);
font-size: var(--sv-t-code);
color: var(--sv-text-3);
overflow-wrap: anywhere;
}
/* Il bottone del cassetto esiste solo dove il cassetto esiste. */
.testata__menu { display: none; }
/*
Gli avvisi vivono FUORI dalle viste, fra la testata e il contenuto: quello
che non va si deve leggere anche mentre si guarda l'allocazione. Prima
stavano solo dentro la sorveglianza, cioè nell'unico posto in cui si va
quando si sospetta già che qualcosa non vada.
*/
.striscia-avvisi {
display: grid;
gap: var(--sv-s2);
padding: var(--sv-s4) var(--sv-s6) 0;
}
.striscia-avvisi:empty { display: none; }
.avviso-riga {
display: flex;
align-items: baseline;
gap: var(--sv-s3);
padding: var(--sv-s3) var(--sv-s4);
border: 1px solid;
border-radius: var(--sv-r2);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-bs);
line-height: var(--sv-t-bs-lh);
}
.avviso-riga__testo { overflow-wrap: anywhere; }
.avviso-riga__quando {
margin-inline-start: auto;
font-family: var(--sv-font-mono);
font-size: var(--sv-t-code);
white-space: nowrap;
opacity: .8;
}
.avviso-riga--critico {
color: var(--sv-err);
border-color: var(--sv-err);
background: var(--sv-err-tint);
}
.avviso-riga--attenzione {
color: var(--sv-warn);
border-color: var(--sv-warn);
background: var(--sv-warn-tint);
}
/* ── Viste ───────────────────────────────────────────────────────────── */
.vista {
display: grid;
gap: var(--sv-s5);
align-content: start;
}
.vista__testa {
display: grid;
gap: var(--sv-s2);
max-inline-size: 62ch;
}
/* Un riquadro largo 1900 pixel con dentro tre righe di testo non è generoso, è
illeggibile: l'occhio deve tornare a capo attraversando mezzo schermo. Le
griglie (tessere, siti) NON sono limitate — lì la larghezza in più diventa
un'altra colonna, che è spazio speso bene. */
.vista > .sv-card {
max-inline-size: 78rem;
}
/* Il titolo della vista è il titolo della pagina: è l'unico posto in cui il
nome della sezione compare, quindi ha il corpo di un titolo e non quello di
un'etichetta di servizio. */
.vista__titolo {
font-family: var(--sv-font-ui);
font-weight: 600;
font-size: var(--sv-t-h3);
line-height: var(--sv-t-h3-lh);
color: var(--sv-text-1);
}
.vista__nota {
margin: 0;
color: var(--sv-text-3);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-bs);
line-height: var(--sv-t-bs-lh);
}
/* ── Legenda delle soglie ────────────────────────────────────────────── */
/*
Presa dal pannello GTM, dove risolve un problema che qui esisteva identico:
i numeri cambiano colore, e da nessuna parte era scritto a quale valore.
Le soglie non sono ricopiate — arrivano dal watchdog, che è quello che le fa
scattare davvero, quindi la tabella non può dire una cosa e l'allarme farne
un'altra.
*/
.legenda {
border: 1px solid var(--sv-line);
border-radius: var(--sv-r3);
background: var(--sv-surface-1);
}
.legenda__linguetta {
padding: var(--sv-s3) var(--sv-s4);
color: var(--sv-text-2);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-bs);
cursor: pointer;
}
.legenda__linguetta:hover { color: var(--sv-text-1); }
.legenda__linguetta:focus-visible { outline: none; box-shadow: var(--sv-focus-ring); }
.legenda__corpo {
display: grid;
gap: var(--sv-s3);
padding: 0 var(--sv-s4) var(--sv-s4);
}
/* Una tabella larga scorre DENTRO il proprio riquadro. Senza, è la pagina a
scorrere in orizzontale, e con la barra laterale appiccicata questo vuol
dire che si scolla tutto il pannello per leggere una colonna. */
.tabella-scorrevole {
overflow-x: auto;
overscroll-behavior-x: contain;
}
.legenda__tabella td:nth-child(3),
.legenda__tabella td:nth-child(4),
.legenda__tabella th:nth-child(3),
.legenda__tabella th:nth-child(4) {
font-family: var(--sv-font-mono);
white-space: nowrap;
}
/* ── Changelog ───────────────────────────────────────────────────────── */
.changelog {
display: grid;
gap: var(--sv-s6);
max-inline-size: 62rem;
}
.rilascio {
display: grid;
gap: var(--sv-s4);
padding-block-end: var(--sv-s6);
border-block-end: 1px solid var(--sv-line);
}
.rilascio:last-child { border-block-end: none; padding-block-end: 0; }
.rilascio__testa {
display: flex;
align-items: baseline;
gap: var(--sv-s3);
flex-wrap: wrap;
}
.rilascio__numero {
font-family: var(--sv-font-display);
font-size: var(--sv-t-h3);
line-height: var(--sv-t-h3-lh);
color: var(--sv-text-1);
}
/* La versione in esecuzione si segnala una volta sola, accanto al suo numero:
chi apre il changelog per sapere «cosa mi è cambiato» deve trovare subito il
punto della lista in cui si trova. */
.rilascio__corrente {
padding: 1px var(--sv-s3);
border-radius: var(--sv-r-full);
background: var(--sv-accent-1-tint);
color: var(--sv-accent-1-text);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-cap);
font-weight: 600;
}
.rilascio__data {
font-family: var(--sv-font-mono);
font-size: var(--sv-t-code);
color: var(--sv-text-3);
}
.rilascio__titolo {
margin: 0;
color: var(--sv-text-2);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-b);
line-height: var(--sv-t-b-lh);
}
.rilascio__voci {
display: grid;
gap: var(--sv-s3);
}
/*
Etichetta e testo su due colonne, con l'etichetta a larghezza fissa: così le
etichette si incolonnano e la lista si scorre per tipo di modifica senza
leggerla tutta. In colonna singola sotto i 40rem, dove una colonna da 8rem
lascerebbe al testo meno di metà riga.
*/
.voce-log {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
gap: var(--sv-s3);
align-items: start;
}
.voce-log__tipo {
justify-self: start;
padding: 2px var(--sv-s3);
border-radius: var(--sv-r-full);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-cap);
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
}
/* I quattro colori della specifica. Sono i token semantici del kit e non
quattro tinte scelte qui: cambiando brand kit le etichette restano
distinguibili fra loro e in tono con il resto, cosa che quattro esadecimali
scritti a mano non farebbero su nessuna delle dodici palette. */
.voce-log__tipo[data-tipo="aggiunto"] { color: var(--sv-ok); background: var(--sv-ok-tint); }
.voce-log__tipo[data-tipo="modificato"] { color: var(--sv-info); background: var(--sv-info-tint); }
.voce-log__tipo[data-tipo="corretto"] { color: var(--sv-warn); background: var(--sv-warn-tint); }
.voce-log__tipo[data-tipo="rimosso"] { color: var(--sv-err); background: var(--sv-err-tint); }
.voce-log__testo { display: grid; gap: 2px; min-inline-size: 0; }
/* `margin: 0` non è pulizia: sono
, e il margine dell'agente utente dentro
una griglia NON si fonde con quello del fratello. Titolo e descrizione si
ritrovavano 32 pixel di vuoto in mezzo — misurati — e le due righe della
stessa voce sembravano due voci diverse. */
.voce-log__titolo {
margin: 0;
color: var(--sv-text-1);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-bs);
line-height: var(--sv-t-bs-lh);
font-weight: 600;
}
.voce-log__descrizione {
margin: 0;
color: var(--sv-text-2);
font-family: var(--sv-font-ui);
font-size: var(--sv-t-bs);
line-height: var(--sv-t-bs-lh);
max-inline-size: 68ch;
}
@media (max-width: 40rem) {
.voce-log { grid-template-columns: 1fr; gap: var(--sv-s2); }
}
/* ── Selettore del kit ───────────────────────────────────────────────── */
/*
Sei pastiglie, una per kit, ognuna dipinta con la firma del proprio kit.
L'anello di selezione deve invece stare nei colori della PAGINA, non del kit
che rappresenta, altrimenti su Ardesia sparisce contro la barra. Le due
variabili sotto sono dichiarate qui, dove i token sono ancora quelli della
pagina, e arrivano dentro le pastiglie già risolte.
*/
.scelta-kit {
--anello: var(--sv-accent-1);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sv-s2);
border: 0;
padding: 0;
margin: 0;
}
/* Il selettore vive nel piede della barra laterale, largo circa 13rem: sei
pastiglie da 22px più i distacchi ne chiedono 172, quindi ci stanno su una
riga sola — ma `flex-wrap` sopra è la rete per il giorno in cui i kit
diventano sette. La legenda di un