/* --------------------------------------------------------------------------- Noleggiando — pannello tools: solo impaginazione. Consuma esclusivamente token semantici --nl-*: nessun esadecimale, nessun primitivo, nessun corpo in px fuori dalla scala --nl-t-*. Il collaudo del brand kit vale anche qui: cambiando data-theme su tutto deve ripitturarsi, e ciò che resta fermo è fuori sistema. Le classi .nl-* vengono da brand/components.css e non sono ridefinite: quanto segue aggiunge la griglia e i pochi pezzi che il pannello ha in più (misuratori, righe di servizio, scrim e modale, avvisi). --------------------------------------------------------------------------- */ /* ── Base ────────────────────────────────────────────────────────────── */ body { margin: 0; background: var(--nl-bg-0); color: var(--nl-text-1); font: 400 var(--nl-t-b)/var(--nl-t-b-lh) var(--nl-font-testo); } .contenitore { max-width: var(--nl-container); margin-inline: auto; padding-inline: var(--nl-s5); } /* Un componente nascosto resta nascosto anche quando qui sotto gli viene assegnato un display: l'attributo hidden vince sempre. */ [hidden] { display: none !important; } a:focus-visible, select:focus-visible { outline: 2px solid var(--nl-accent-1); outline-offset: 2px; } a.nl-btn { text-decoration: none; } .visivamente-nascosto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .suggerimento { margin: 0; font: 400 var(--nl-t-cap)/var(--nl-t-cap-lh) var(--nl-font-testo); color: var(--nl-text-3); } .pila { display: grid; gap: var(--nl-s4); } .pila-stretta { display: grid; gap: var(--nl-s2); } .campo { display: grid; gap: var(--nl-s1); align-content: start; } .campo .suggerimento { margin-block-start: var(--nl-s1); } /* ── Accesso ─────────────────────────────────────────────────────────── */ .schermata-accesso { min-height: 100dvh; display: grid; place-items: center; padding: var(--nl-s5); } .schermata-accesso__carta { width: min(26rem, 100%); display: grid; gap: var(--nl-s4); } .accesso__logo { width: min(18rem, 100%); height: auto; justify-self: start; } /* ── Testata ─────────────────────────────────────────────────────────── */ .testata { position: sticky; top: 0; z-index: var(--nl-z-sticky); background: var(--nl-surface-1); border-block-end: 1px solid var(--nl-line); } .testata__riga { display: flex; align-items: center; gap: var(--nl-s4); min-height: calc(var(--nl-hit-min) + var(--nl-s3)); padding-block: var(--nl-s2); flex-wrap: wrap; } .testata__logo { height: var(--nl-s6); width: auto; } .testata__coda { margin-inline-start: auto; display: flex; align-items: center; gap: var(--nl-s3); flex-wrap: wrap; } .testata__scelta { width: auto; } /* ── Struttura delle sezioni ─────────────────────────────────────────── */ .contenuto { display: grid; gap: var(--nl-s6); padding-block: var(--nl-s6) var(--nl-s8); } .sezione { display: grid; gap: var(--nl-s4); align-content: start; } /* ── KPI ─────────────────────────────────────────────────────────────── */ .griglia-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--nl-s4); } .kpi { background: var(--nl-surface-2); border-radius: var(--nl-r3); padding: var(--nl-s4); display: grid; gap: var(--nl-s2); align-content: start; } /* Il valore resta un dato mono (.nl-dato) ma sale alla misura di titolo: la coppia size/line-height viene comunque dalla scala dei token. */ .kpi__valore { margin: 0; font-size: var(--nl-t-h2); line-height: var(--nl-t-h2-lh); color: var(--nl-text-1); } .kpi__unita { font-size: var(--nl-t-bs); color: var(--nl-text-3); margin-inline-start: var(--nl-s1); } .kpi__nota { margin: 0; font: 400 var(--nl-t-cap)/var(--nl-t-cap-lh) var(--nl-font-testo); color: var(--nl-text-3); font-variant-numeric: tabular-nums; } /* ── Misuratore ──────────────────────────────────────────────────────── */ /* Il colore comunica una soglia, quindi viene dai token di feedback e non da una scala inventata qui. Sotto il livello di attenzione resta l'accento: un misuratore sempre rosso non segnala più niente. L'altezza è lo spessore della barra UI del brand. */ .misuratore { height: var(--nl-barra-ui); border-radius: var(--nl-r1); background: var(--nl-surface-3); overflow: hidden; } .misuratore__barra { height: 100%; border-radius: inherit; background: var(--nl-accent-1); transition: width var(--nl-dur-3) var(--nl-ease), background-color var(--nl-dur-2) var(--nl-ease); } .misuratore__barra[data-livello="attenzione"] { background: var(--nl-warn); } .misuratore__barra[data-livello="critico"] { background: var(--nl-err); } /* Il ridotto movimento è già gestito dal riduttore globale del kit (tokens/effects.css): qui non si aggiunge né si combatte niente. */ /* ── Allocazione ─────────────────────────────────────────────────────── */ .allocazione-riga { display: grid; gap: var(--nl-s2); } .allocazione-riga__intestazione { display: flex; justify-content: space-between; align-items: baseline; gap: var(--nl-s3); flex-wrap: wrap; font: 400 var(--nl-t-bs)/var(--nl-t-bs-lh) var(--nl-font-testo); color: var(--nl-text-2); } /* ── Watchdog ────────────────────────────────────────────────────────── */ .watchdog__testa { display: flex; align-items: center; gap: var(--nl-s3); flex-wrap: wrap; } .controllo { display: grid; grid-template-columns: minmax(9rem, 1fr) auto auto minmax(6rem, auto); align-items: center; gap: var(--nl-s3); font: 400 var(--nl-t-cap)/var(--nl-t-cap-lh) var(--nl-font-testo); color: var(--nl-text-2); } .controllo__nome { overflow-wrap: anywhere; } .controllo__valore { color: var(--nl-text-1); white-space: nowrap; } .evento { display: grid; grid-template-columns: auto auto auto 1fr; gap: var(--nl-s3); align-items: baseline; font: 400 var(--nl-t-cap)/var(--nl-t-cap-lh) var(--nl-font-testo); color: var(--nl-text-2); } .evento__quando { color: var(--nl-text-3); white-space: nowrap; } .evento__chiave { color: var(--nl-text-3); overflow-wrap: anywhere; } .evento__testo { overflow-wrap: anywhere; } /* ── Applicativi ─────────────────────────────────────────────────────── */ .griglia-applicativi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: var(--nl-s4); } .applicativo { display: grid; gap: var(--nl-s3); align-content: start; } .applicativo__testa { display: flex; align-items: center; gap: var(--nl-s3); flex-wrap: wrap; } .applicativo__dominio { color: var(--nl-text-1); overflow-wrap: anywhere; margin-inline-end: auto; } .servizio { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: var(--nl-s3); } .servizio__nome { font: 500 var(--nl-t-ov)/var(--nl-t-ov-lh) var(--nl-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--nl-text-3); } .servizio__cifre { white-space: nowrap; color: var(--nl-text-2); } .servizio__cifre.assente { color: var(--nl-text-3); } .applicativo__piede { display: flex; align-items: center; justify-content: space-between; gap: var(--nl-s3); flex-wrap: wrap; } /* ── Editor (allocazione e utenze) ───────────────────────────────────── */ .editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: var(--nl-s3); padding-block-start: var(--nl-s3); border-block-start: 1px solid var(--nl-line); } .editor__azioni { grid-column: 1 / -1; display: flex; gap: var(--nl-s3); align-items: center; flex-wrap: wrap; } /* ── Scrim e modale ──────────────────────────────────────────────────── */ /* Lo scrim è inchiostro d'ombra diluito, non un nero scritto a mano: il token cambia con il tema e la velatura lo segue. */ .nl-scrim { position: fixed; inset: 0; z-index: var(--nl-z-modal); background: color-mix(in srgb, var(--nl-shade-ink) 55%, transparent); display: grid; place-items: center; padding: var(--nl-s5); } .nl-modal { width: min(36rem, 100%); max-height: min(85dvh, 48rem); overflow-y: auto; background: var(--nl-surface-1); border: 1px solid var(--nl-line); border-radius: var(--nl-r4); box-shadow: var(--nl-e3); padding: var(--nl-s5); display: grid; gap: var(--nl-s4); align-content: start; } .nl-modal__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--nl-s3); } .nl-modal__titolo { margin: 0; font: 700 var(--nl-t-h3)/var(--nl-t-h3-lh) var(--nl-font-ui); color: var(--nl-text-1); } .nl-modal__corpo { display: grid; gap: var(--nl-s4); } .utenza { display: flex; align-items: center; gap: var(--nl-s3); padding: var(--nl-s2) var(--nl-s3); border: 1px solid var(--nl-line); border-radius: var(--nl-r2); background: var(--nl-surface-2); } .utenza__chi { display: grid; min-width: 0; margin-inline-end: auto; } .utenza__email { color: var(--nl-text-1); overflow-wrap: anywhere; } .utenza__nome { font: 400 var(--nl-t-cap)/var(--nl-t-cap-lh) var(--nl-font-testo); color: var(--nl-text-3); overflow-wrap: anywhere; } /* ── Avvisi (toast) ──────────────────────────────────────────────────── */ .contenitore-avvisi { position: fixed; inset-block-end: var(--nl-s5); inset-inline-end: var(--nl-s5); display: grid; gap: var(--nl-s3); z-index: var(--nl-z-modal); max-width: min(24rem, calc(100vw - 2 * var(--nl-s5))); } .avviso { background: var(--nl-surface-1); border: 1px solid var(--nl-line); border-inline-start: 4px solid var(--nl-info); border-radius: var(--nl-r2); box-shadow: var(--nl-e2); padding: var(--nl-s3) var(--nl-s4); font: 400 var(--nl-t-bs)/var(--nl-t-bs-lh) var(--nl-font-testo); color: var(--nl-text-1); overflow-wrap: anywhere; } .avviso--ok { border-inline-start-color: var(--nl-ok); background: var(--nl-ok-tint); } .avviso--warn { border-inline-start-color: var(--nl-warn); background: var(--nl-warn-tint); } .avviso--err { border-inline-start-color: var(--nl-err); background: var(--nl-err-tint); } /* ── Sotto --nl-bp-s (768px): colonna unica ──────────────────────────── */ /* Le variabili CSS non entrano nelle media query: 768px qui sotto È --nl-bp-s (tokens/spacing.css), citato dal medesimo posto del brand book. */ @media (max-width: 768px) { .griglia-kpi, .griglia-applicativi { grid-template-columns: 1fr; } .contenitore { padding-inline: var(--nl-s4); } .controllo { grid-template-columns: 1fr auto; row-gap: var(--nl-s1); } .evento { grid-template-columns: auto auto 1fr; } .evento__testo { grid-column: 1 / -1; } .servizio { grid-template-columns: 5.5rem 1fr; } .servizio__cifre { grid-column: 1 / -1; white-space: normal; } }