, quindi le classi del guscio non possono stare sul body; 2. .app-centered non usa piu' min-height:100dvh ma height:100%, perche' ora e' figlia di un contenitore gia' alto quanto la finestra: con la misura assoluta la pagina di accesso sfondava di una barra; 3. sezione [F], assente nell'originale: contiene le poche regole che servono ai componenti Blazor gia' esistenti (menu di notifica). Il file e' diviso in sezioni: [A] COLORI - variabili Bootstrap ridefinite (identita' dell'app) [B] FORMA e TESTO- raggio, font, densita' [C] MISURE - larghezze di sidebar, rail e drawer [D] LAYOUT - le poche regole che Bootstrap non copre [E] UTILITY - classi minime usate al posto degli style inline [F] BLAZOR - adattamenti specifici di questa applicazione Per verticalizzare l'aspetto su una nuova applicazione, nella pratica basta intervenire su [A], [B] e [C]. ============================================================================= */ /* ============================================================================= [A] COLORI — punto di customizzazione principale Ridefinendo le variabili native di Bootstrap, il colore si propaga da solo a bottoni, link, badge, focus ring, nav-pills, progress, form validati, ecc. Non serve toccare i componenti. ============================================================================= */ :root, [data-bs-theme="light"] { /* --- tinta principale --------------------------------------------------- Sostituisci queste cinque righe con i colori del tuo brand. --bs-primary-rgb DEVE corrispondere a --bs-primary (serve alle opacita'). ------------------------------------------------------------------------- */ --bs-primary: #2f4fd8; --bs-primary-rgb: 47, 79, 216; --bs-primary-text-emphasis: #1b2f80; --bs-primary-bg-subtle: #e6eafd; --bs-primary-border-subtle: #bcc7f6; /* --- tinta di appoggio, usata per grafici e accenti secondari ---------- */ --app-accent: #0d9488; --app-accent-rgb: 13, 148, 136; /* --- link -------------------------------------------------------------- */ --bs-link-color: var(--bs-primary); --bs-link-color-rgb: var(--bs-primary-rgb); --bs-link-hover-color: #23409f; /* --- superfici del guscio (header, sidebar, sfondo pagina) ------------- Cambiando solo queste tre righe si passa, ad esempio, da un guscio chiaro a uno con la navigazione scura, senza toccare il markup. ------------------------------------------------------------------------- */ --app-header-bg: var(--bs-body-bg); --app-nav-bg: #f6f7fb; --bs-body-bg: #ffffff; --bs-secondary-bg: #f6f7fb; } /* Variante scura: si attiva scrivendo data-bs-theme="dark" sul tag . Bootstrap ricalcola da solo testi, bordi e superfici dei componenti. */ [data-bs-theme="dark"] { --bs-primary: #8098ff; --bs-primary-rgb: 128, 152, 255; --bs-primary-bg-subtle: #1a2350; --bs-primary-border-subtle: #313f7d; --bs-link-hover-color: #a9b8ff; --app-accent: #2dd4bf; --app-accent-rgb: 45, 212, 191; --app-header-bg: var(--bs-body-bg); --app-nav-bg: #16181d; } /* ============================================================================= [A2] COLORI DEI COMPONENTI — [BLAZOR] sezione assente nel template grafico --------------------------------------------------------------------------- Aggiunta il 26 agosto 2026 dopo una verifica nel browser, perche' la premessa della sezione [A] e' vera solo a meta'. Bootstrap 5.3 non legge --bs-primary a runtime nei componenti: la sua build scrive il colore come valore letterale dentro le variabili del singolo componente. Un bottone dichiara --bs-btn-bg: #0d6efd, i pill di navigazione --bs-nav-pills-link-active-bg: #0d6efd, l'anello di fuoco dei campi ha il colore direttamente nel box-shadow. Ridefinire --bs-primary cambia percio' i link, le utility .text-primary e .bg-primary (che usano --bs-primary-rgb) e poco altro: i bottoni restano del blu di Bootstrap. Misurato sulla pagina di accesso prima di questa sezione: --bs-primary valeva #2f4fd8 e il bottone "Accedi" era disegnato rgb(13,110,253). Su un guscio che deve verticalizzarsi cambiando cinque righe, e' il difetto che vanifica il meccanismo, ed e' silenzioso: nessun errore, semplicemente il marchio non arriva sulla superficie piu' visibile dell'applicazione. Qui sotto le variabili dei componenti vengono riagganciate a --bs-primary. Da fare UNA volta, nel guscio: chi verticalizza continua a toccare la sola sezione [A]. Se in futuro serve un componente non elencato, il modo per scoprirne le variabili e' leggere la sua regola in bootstrap.min.css. ============================================================================= */ /* A2.1 Bottoni pieni e in contorno. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-link-hover-color); --bs-btn-hover-border-color: var(--bs-link-hover-color); --bs-btn-active-bg: var(--bs-link-hover-color); --bs-btn-active-border-color: var(--bs-link-hover-color); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color:var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color:var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* A2.2 Voce attiva della navigazione: e' un .nav-pills, quindi senza questa riga il menu resterebbe del blu di Bootstrap in tutte le app derivate. */ .nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); } /* A2.3 Anello di fuoco dei campi. Bootstrap lo scrive per esteso in .form-control:focus, quindi non basta una variabile: va riscritta la regola. Nota storica: qui prima arrivava anche una regola di app.css, ereditata dal modello Blazor di Microsoft, che disegnava un anello BIANCO OPACO di .1rem prima di quello colorato. Dentro un .input-group quell'anello bianco finiva sopra il bottone accanto - il difetto segnalato sulla ricerca della timeline. E' stata rimossa: l'anello ora e' uno solo, semitrasparente, nel colore del brand. */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .5); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); } :root { --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25); } /* A2.4 Caselle di spunta e interruttori selezionati. */ .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* A2.5 Barre di avanzamento, comprese quelle del caricamento iniziale. */ .progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); } /* A2.6 Paginazione. */ .pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color:var(--bs-primary); --bs-pagination-color: var(--bs-link-color); --bs-pagination-hover-color: var(--bs-link-hover-color); --bs-pagination-focus-color: var(--bs-link-hover-color); } /* A2.7 Voce selezionata di un menu a discesa (rail della navigazione compreso). */ .dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); } /* A2.8 Elemento attivo di una list-group, usata dal pannello delle notifiche. */ .list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color:var(--bs-primary); } /* ============================================================================= [B] FORMA E TESTO ============================================================================= */ :root { --bs-body-font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-size: .9375rem; /* 15px: densita' tipica da gestionale */ --bs-body-line-height: 1.5; --bs-border-radius: .5rem; /* 0 = squadrato, 1rem = molto morbido */ --bs-border-radius-sm: .375rem; --bs-border-radius-lg: .75rem; /* Altezza dei controlli: alzala per un'interfaccia piu' ariosa. */ --app-control-height: 2.25rem; } /* ============================================================================= [C] MISURE DEL GUSCIO ============================================================================= */ :root { --app-header-height: 3.5rem; /* barra superiore */ --app-sidebar-width: 17rem; /* navigazione estesa */ --app-rail-width: 4.25rem; /* navigazione ridotta a sole icone */ --app-drawer-width: 26rem; /* pannello contestuale destro */ --app-search-width: 16rem; /* campo di ricerca nell'header */ } /* ============================================================================= [D] LAYOUT — regole strutturali non coperte dalle utility Bootstrap ============================================================================= */ /* D1. Barra superiore. */ .app-header { min-height: var(--app-header-height); background-color: var(--app-header-bg); } /* D2. Le due facce della navigazione sinistra. .app-sidebar = estesa (icona + etichetta + gruppi) .app-rail = ridotta (sole icone) Entrambe hanno larghezza fissa: serve a .collapse-horizontal per animare correttamente la transizione. */ .app-sidebar { width: var(--app-sidebar-width); --bs-offcanvas-width: var(--app-sidebar-width); background-color: var(--app-nav-bg); } .app-rail { width: var(--app-rail-width); background-color: var(--app-nav-bg); } /* D2b. [BLAZOR] Il piede della navigazione deve stare in fondo alla colonna, non subito sotto l'ultima voce di menu. Il markup lo prevede gia' - fra le voci e il piede c'e' un div .flex-grow-1 che fa da distanziatore - ma da lg in su Bootstrap applica .offcanvas-lg .offcanvas-body { flex-grow: 0 }, perche' li' l'offcanvas smette di essere un pannello e torna contenuto normale. Con flex-grow a zero il corpo e' alto quanto il suo contenuto, quindi il distanziatore non ha spazio in cui crescere e il piede resta appeso a meta'. Qui il corpo torna a occupare tutta l'altezza dell'aside, che con min-height:0 puo' comunque restringersi e far scorrere le voci quando sono tante. Vale allo stesso modo sotto lg, dove l'offcanvas e' un pannello vero. */ .app-sidebar { display: flex; flex-direction: column; } .app-sidebar > .offcanvas-body { flex-grow: 1; min-height: 0; overflow-y: auto; } /* D3. Sotto il breakpoint lg la navigazione estesa diventa un offcanvas: il wrapper .collapse usato dal desktop non deve piu' nasconderla, e la versione a sole icone sparisce del tutto. */ @media (max-width: 991.98px) { #sidebarFull { display: block !important; width: auto !important; } #sidebarRail { display: none !important; } } /* D4. Freccia dei gruppi di menu: ruota quando il gruppo e' aperto. Lo stato arriva dall'attributo ARIA: qui lo scrive Blazor invece di Bootstrap, ma la regola CSS e' la stessa del template. */ .nav-group-toggle .nav-caret { transition: transform .2s ease-in-out; } .nav-group-toggle[aria-expanded="true"] .nav-caret { transform: rotate(90deg); } /* D5. Voci di menu: allineamento costante fra icona ed etichetta. */ .app-sidebar .nav-link, .app-rail .nav-link { border-radius: var(--bs-border-radius-sm); } .app-sidebar .nav-link .fa-fw { margin-inline-end: .625rem; } /* D6. Voci di secondo e terzo livello: rientro con guida verticale. */ .nav-sub { margin-inline-start: 1.15rem; padding-inline-start: .75rem; border-inline-start: 1px solid var(--bs-border-color); } /* D7. Pannello contestuale destro. */ .app-drawer { --bs-offcanvas-width: var(--app-drawer-width); } /* D8. Ricerca nell'header: sparisce sotto md tramite le utility del markup. */ .app-search { width: var(--app-search-width); } /* D9. In stampa restano solo i contenuti. */ @media print { .app-header, .app-sidebar, .app-rail, .app-toolbar, .offcanvas, .btn { display: none !important; } } /* ============================================================================= [E] UTILITY — sostituiscono gli attributi style inline ============================================================================= */ /* E1. Testo minore di .small, per didascalie e metadati. */ .fs-7 { font-size: .8125rem; } .fs-8 { font-size: .75rem; } /* E2. Pastiglia con le iniziali dell'utente. */ .app-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: .75rem; font-weight: 600; background-color: var(--bs-primary); color: #fff; } .app-avatar-lg { width: 2.75rem; height: 2.75rem; font-size: .875rem; } /* E3. Quadrato con icona, usato nelle schede degli indicatori. */ .app-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--bs-border-radius); flex: none; } /* E4. Barra di avanzamento sottile. */ .progress-thin { height: .375rem; } /* E5. Cronologia verticale del drawer. */ .app-timeline { list-style: none; margin: 0; padding: 0; } .app-timeline > li { position: relative; padding-inline-start: 1.5rem; padding-bottom: 1.25rem; border-inline-start: 1px solid var(--bs-border-color); margin-inline-start: .3rem; } .app-timeline > li:last-child { border-inline-start-color: transparent; padding-bottom: 0; } .app-timeline > li::before { content: ""; position: absolute; inset-inline-start: -.3rem; top: .35rem; width: .6rem; height: .6rem; border-radius: 50%; background-color: var(--bs-primary); } /* E6. Campione di colore nella pagina Impostazioni. */ .app-swatch { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: var(--bs-border-radius-sm); border: 1px solid var(--bs-border-color); } .app-swatch-accent { background-color: rgba(var(--app-accent-rgb), 1); } /* E7. Colonna azioni delle tabelle: larghezza stabile. */ .col-actions { width: 6.5rem; } .col-check { width: 2.75rem; } /* E8. Contenitore delle pagine di form, per non far correre le righe troppo. */ .app-page-narrow { max-width: 72rem; } /* E9. Menu a discesa largo, usato dalle notifiche nell'header. */ .app-drawer-menu { width: 22rem; max-width: calc(100vw - 1.5rem); } /* E10. Matrice permessi x ruoli. Bootstrap non ha un equivalente: .table-responsive fa scorrere la tabella ma su una matrice larga si perdono i riferimenti, e non si capisce piu' quale permesso e quale ruolo si sta guardando. Qui la prima colonna e l'intestazione restano ancorate mentre si scorre. */ .app-matrix-scroll { max-height: calc(100dvh - 17rem); overflow: auto; } .table-matrix { --app-matrix-col: 9.5rem; margin-bottom: 0; border-collapse: separate; /* i bordi restano visibili sotto le celle ancorate */ border-spacing: 0; } .table-matrix th, .table-matrix td { border-bottom: 1px solid var(--bs-border-color); } .table-matrix thead th { position: sticky; top: 0; z-index: 2; background-color: var(--bs-tertiary-bg); vertical-align: bottom; } .table-matrix tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 18rem; background-color: var(--bs-body-bg); font-weight: 400; } .table-matrix thead th:first-child { left: 0; z-index: 3; min-width: 18rem; } .table-matrix .col-role { width: var(--app-matrix-col); min-width: var(--app-matrix-col); text-align: center; } .table-matrix tbody td { text-align: center; } .table-matrix .matrix-group th { background-color: var(--bs-secondary-bg); font-weight: 600; position: sticky; left: 0; } /* E11. Immagine del profilo utente. */ .app-photo { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--bs-border-color); background-color: var(--bs-tertiary-bg); } .app-photo-placeholder { display: grid; place-items: center; font-size: 2.5rem; color: var(--bs-secondary-color); } /* E12. Schermate senza guscio (login, errore). [BLAZOR] L'originale usa min-height:100dvh. Qui .app-centered e' figlia di #app, che e' gia' alto quanto la finestra: con la misura assoluta si sommava all'altezza del contenitore e la pagina di accesso guadagnava una barra di scorrimento inutile. height:100% + overflow:auto danno lo stesso centraggio senza sfondare. */ .app-centered { height: 100%; overflow: auto; display: grid; place-items: center; padding: 1.5rem; background-color: var(--bs-secondary-bg); } .app-card-auth { width: 100%; max-width: 26rem; } /* ============================================================================= [F] BLAZOR — adattamenti di questa applicazione, assenti nel template ============================================================================= */ /* F1. [BLAZOR] Nel template il guscio a tutta altezza sta sul . Qui il markup del layout e' reso dentro

, quindi le classi d-flex/vh-100/overflow-hidden devono agire su quel contenitore: se restassero sul body, #app resterebbe alto quanto il contenuto e la colonna interna non avrebbe un'altezza su cui calcolare lo scorrimento. Il body porta comunque le stesse classi (vedi index.html), cosi' lo sfondo copre la finestra anche prima che Blazor abbia avviato. */ #app { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; }