MarcoE/SteUP_Dotnet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2d7e3c591e0ffed67c8b9e585beb6199e2dcc983
SteUP_Dotnet/SteUp.Shared/wwwroot/css/mudblazor-overrides.css
T
MarcoE 2d7e3c591e Dai una gerarchia ai pesi tipografici 
Quasi tutto il testo dell'app stava fra 600 e 800: etichette, valori, indirizzi,
conteggi, voci di elenco. Un grassetto ovunque non segnala niente, e la pagina
Profilo era il caso peggiore — ogni riga gridava come un titolo.

La scala ora ha quattro gradini, documentati nei token:
  400  corpo, metadati, valori descrittivi
  500  etichette di campo, voci di lista, testo dei controlli
  600  stati brevi (badge, voce attiva), nomi in una riga di elenco
  700  titoli, uno solo per blocco

Sopra il 700 non si sale: l'800 dei titoli di card e dell'avatar e' sceso a 700.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 12:46:28 +02:00

424 lines
14 KiB
CSS
Raw Blame History

/* =============================================================================
SteUP — MudBlazor riportato allo stile condiviso
MudBlazor e' Material 2 di default: ombre per costruire gerarchia, tinte
automatiche sulle superfici, target stretti. Qui lo si appiattisce secondo
STILE_UI §1 e §5, cosi' i controlli di libreria e i componenti propri
parlano la stessa lingua.
========================================================================== */
/* -----------------------------------------------------------------------------
Aggancio delle variabili di MudBlazor ai token del progetto.
I token restano l'unica fonte di verita': cambiare un ruolo in tokens.css
aggiorna sia i componenti propri sia quelli di libreria.
-------------------------------------------------------------------------- */
:root {
--mud-palette-primary: var(--primary);
--mud-palette-primary-text: var(--on-primary);
--mud-palette-secondary: var(--primary-dark);
--mud-palette-tertiary: var(--info-surface);
--mud-palette-surface: var(--surface);
--mud-palette-background: var(--workspace);
--mud-palette-background-gray: var(--workspace);
--mud-palette-text-primary: var(--ink);
--mud-palette-text-secondary: var(--ink-muted);
--mud-palette-text-disabled: var(--ink-muted);
--mud-palette-action-default: var(--ink-muted);
--mud-palette-lines-default: var(--divider);
--mud-palette-lines-inputs: var(--divider);
--mud-palette-divider: var(--divider);
--mud-palette-divider-light: var(--divider);
--mud-palette-error: var(--danger-solid);
--mud-palette-error-text: #ffffff;
--mud-palette-success: var(--success-solid);
--mud-palette-warning: var(--warning-solid);
--mud-palette-info: var(--info-solid);
--mud-default-borderradius: var(--radius-control);
/* Tipografia: stessa scala dei token (STILE_UI §4). */
--mud-typography-default-family: "Inter", "SF Pro Display", "Roboto", system-ui, sans-serif;
--mud-typography-default-size: var(--body-lg-size);
--mud-typography-default-weight: 400;
--mud-typography-default-lineheight: var(--body-lg-height);
--mud-typography-default-letterspacing: normal;
--mud-typography-h5-family: var(--mud-typography-default-family);
--mud-typography-h5-size: var(--headline-sm-size);
--mud-typography-h5-weight: 700;
--mud-typography-h5-lineheight: var(--headline-sm-height);
--mud-typography-h6-family: var(--mud-typography-default-family);
--mud-typography-h6-size: var(--title-lg-size);
--mud-typography-h6-weight: 700;
--mud-typography-h6-lineheight: var(--title-lg-height);
--mud-typography-subtitle1-family: var(--mud-typography-default-family);
--mud-typography-subtitle1-size: var(--title-md-size);
--mud-typography-subtitle1-weight: 700;
--mud-typography-subtitle1-lineheight: var(--title-md-height);
--mud-typography-subtitle2-family: var(--mud-typography-default-family);
--mud-typography-subtitle2-size: var(--body-md-size);
--mud-typography-subtitle2-weight: 500;
--mud-typography-body1-family: var(--mud-typography-default-family);
--mud-typography-body1-size: var(--body-lg-size);
--mud-typography-body1-lineheight: var(--body-lg-height);
--mud-typography-body2-family: var(--mud-typography-default-family);
--mud-typography-body2-size: var(--body-md-size);
--mud-typography-body2-lineheight: var(--body-md-height);
--mud-typography-button-family: var(--mud-typography-default-family);
--mud-typography-button-size: var(--label-lg-size);
--mud-typography-button-weight: 600;
--mud-typography-button-transform: none;
--mud-typography-button-letterspacing: normal;
--mud-typography-caption-family: var(--mud-typography-default-family);
--mud-typography-caption-size: var(--label-md-size);
--mud-typography-caption-weight: 500;
}
/* -----------------------------------------------------------------------------
§1 Superfici piatte, nessun tint automatico
-------------------------------------------------------------------------- */
.mud-paper,
.mud-card,
.mud-expansion-panels .mud-expand-panel,
.mud-toolbar,
.mud-appbar {
box-shadow: none !important;
background-image: none !important;
background-color: var(--surface);
border-radius: var(--radius-surface);
}
.mud-elevation-0, .mud-elevation-1, .mud-elevation-2, .mud-elevation-3,
.mud-elevation-4, .mud-elevation-5, .mud-elevation-6, .mud-elevation-8,
.mud-elevation-12, .mud-elevation-16, .mud-elevation-24 {
box-shadow: none !important;
}
/* I livelli che galleggiano davvero conservano un contorno, non un'ombra. */
.mud-popover.mud-popover-open,
.mud-picker-popover-paper,
.mud-menu-popover {
border-radius: var(--radius-control) !important;
border: 1px solid var(--divider);
box-shadow: none !important;
}
/* -----------------------------------------------------------------------------
§5 Bottoni — target 44/48, raggio control, etichette in caso naturale
-------------------------------------------------------------------------- */
.mud-button-root {
min-height: var(--touch-min);
border-radius: var(--radius-control);
font-family: var(--font-sans);
font-size: var(--label-lg-size);
font-weight: 600;
line-height: 1.25;
letter-spacing: normal;
text-transform: none;
transition: transform var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.mud-button-root:active { transform: scale(0.97); }
.mud-button-filled {
min-height: var(--button-height);
box-shadow: none !important;
padding-inline: var(--space-lg);
}
.mud-button-filled.mud-button-filled-primary {
background-color: var(--primary);
color: var(--on-primary);
}
.mud-button-filled.mud-button-filled-primary:hover,
.mud-button-filled.mud-button-filled-primary:active {
background-color: var(--primary-pressed);
}
.mud-button-outlined {
min-height: var(--button-height);
border: 1px solid var(--divider);
color: var(--ink);
padding-inline: var(--space-lg);
}
.mud-button-text { min-height: var(--touch-min); }
.mud-icon-button {
min-width: var(--touch-min);
min-height: var(--touch-min);
border-radius: var(--radius-pill);
transition: transform var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
.mud-icon-button:active { transform: scale(0.92); }
/* Il FAB circolare al centro e' una firma Android di serie (§1.7): qui i FAB
sono rettangolari e stondati come il resto dei controlli. */
.mud-fab {
box-shadow: none !important;
border-radius: var(--radius-control);
min-height: var(--touch-min);
font-family: var(--font-sans);
font-weight: 600;
text-transform: none;
letter-spacing: normal;
}
.mud-fab.mud-fab-primary { background-color: var(--primary); color: var(--on-primary); }
.mud-fab.mud-fab-default { background-color: var(--surface-muted); color: var(--ink); }
.mud-fab:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
.mud-button-root:active,
.mud-icon-button:active,
.mud-fab:active { transform: none; }
}
/* -----------------------------------------------------------------------------
§5 Campi — riempiti, raggio control, bordo 1px a riposo e 2px in focus
La sottolineatura Material viene rimossa: i campi sono schede, non righe.
-------------------------------------------------------------------------- */
.mud-input.mud-input-text,
.mud-input.mud-input-filled,
.mud-input-control .mud-input-slot {
font-family: var(--font-sans);
font-size: var(--body-lg-size);
color: var(--ink);
}
.mud-input:before,
.mud-input:after,
.mud-input-filled:before,
.mud-input-filled:after,
.mud-input-underline:before,
.mud-input-underline:after {
display: none !important;
border: none !important;
}
.field-shell {
background-color: var(--surface);
border: 1px solid var(--divider);
border-radius: var(--radius-control);
padding: var(--space-md);
transition: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.field-shell:focus-within {
border-color: var(--primary);
box-shadow: inset 0 0 0 1px var(--primary);
}
.field-shell--error { border-color: var(--danger-solid); }
.field-shell--muted { background-color: var(--surface-muted); }
.mud-input-label,
.mud-input-helper-text {
font-family: var(--font-sans);
color: var(--ink-muted);
}
.mud-input-helper-text.mud-input-error,
.mud-input-error .mud-input-helper-text {
color: var(--danger-ink);
font-weight: 500;
}
/* Il testo segnaposto deve restare leggibile al sole: stesso contrasto del
testo secondario, non il grigio chiarissimo di serie. */
.mud-input input::placeholder,
.mud-input textarea::placeholder {
color: var(--ink-muted);
opacity: 1;
}
.mud-select .mud-input-adornment .mud-icon-root { color: var(--ink-muted); }
/* -----------------------------------------------------------------------------
Select, liste e voci di menu
-------------------------------------------------------------------------- */
.mud-list-item {
min-height: var(--touch-min);
border-radius: var(--radius-compact);
font-family: var(--font-sans);
font-size: var(--body-lg-size);
}
.mud-list-item.mud-selected-item {
background-color: var(--info-surface);
color: var(--primary-dark);
font-weight: 600;
}
.custom-item-select { padding-block: var(--space-xs); }
/* -----------------------------------------------------------------------------
Chip
-------------------------------------------------------------------------- */
.mud-chip {
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: var(--label-sm-size);
font-weight: 600;
letter-spacing: normal;
text-transform: none;
}
.mud-chip.mud-chip-filled.mud-chip-color-default {
background-color: var(--neutral-surface);
color: var(--neutral-ink);
}
/* -----------------------------------------------------------------------------
Pannelli a fisarmonica — nessun bordo di serie, nessuna ombra
-------------------------------------------------------------------------- */
.mud-expansion-panels { width: 100%; }
.mud-expand-panel {
background-color: transparent !important;
border: none !important;
margin-block: 0 !important;
}
.mud-expand-panel .mud-expand-panel-header {
padding: var(--space-sm) 0;
min-height: var(--touch-min);
}
.mud-expand-panel .mud-expand-panel-content { padding: 0; }
.mud-expand-panel::before { display: none !important; }
/* -----------------------------------------------------------------------------
§6.10 Dialog
-------------------------------------------------------------------------- */
.mud-dialog {
border-radius: var(--radius-surface) !important;
background-color: var(--surface);
box-shadow: none !important;
max-width: 420px;
width: calc(100vw - 48px);
}
.mud-dialog-title {
padding: var(--space-lg) var(--space-lg) 0;
font-family: var(--font-sans);
font-size: var(--title-md-size);
line-height: var(--title-md-height);
font-weight: 700;
color: var(--ink);
}
.mud-dialog-content {
padding: var(--space-xs) var(--space-lg) 0;
font-family: var(--font-sans);
font-size: var(--body-lg-size);
line-height: 1.45;
color: var(--ink-muted);
overflow-x: hidden;
}
/* Le scelte stanno in fondo, allineate a destra, con la conferma per ultima.
Su schermo stretto le etichette lunghe ("Salva come bozza") andrebbero a
sbattere: in quel caso la riga diventa una colonna a piena larghezza invece
di comprimere i bersagli. */
.mud-dialog-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-xs);
padding: var(--space-lg);
}
.mud-dialog-actions > * {
margin: 0 !important;
min-height: var(--touch-min);
}
@media (max-width: 380px) {
.mud-dialog-actions { flex-direction: column-reverse; }
.mud-dialog-actions > * { width: 100%; }
}
/* Il form scheda e' a schermo pieno: e' una schermata, non un riquadro. */
.mud-dialog.customDialog-form {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
border-radius: 0 !important;
background-color: var(--workspace);
}
.mud-dialog.customDialog-form .mud-dialog-content {
padding: 0;
max-height: 100%;
height: 100%;
color: var(--ink);
}
.mud-overlay { z-index: var(--z-overlay); }
.mud-overlay.on-top { z-index: var(--z-modal) !important; }
/* -----------------------------------------------------------------------------
§6.9 Toast — riempimento pieno del tono, testo bianco, l'unica ombra
-------------------------------------------------------------------------- */
.mud-snackbar {
border-radius: var(--radius-control) !important;
box-shadow: var(--shadow-toast) !important;
font-family: var(--font-sans);
font-size: var(--body-lg-size);
font-weight: 600;
line-height: 1.35;
color: #ffffff !important;
padding: var(--space-sm) var(--space-14) !important;
z-index: var(--z-toast);
}
.mud-snackbar.mud-alert-filled-success { background-color: var(--success-solid) !important; }
.mud-snackbar.mud-alert-filled-error { background-color: var(--danger-solid) !important; }
.mud-snackbar.mud-alert-filled-warning { background-color: var(--warning-solid) !important; }
.mud-snackbar.mud-alert-filled-info { background-color: var(--info-solid) !important; }
.mud-snackbar .mud-snackbar-content-message { color: #ffffff !important; }
.mud-snackbar .mud-icon-root { color: #ffffff !important; }
/* -----------------------------------------------------------------------------
Progresso
-------------------------------------------------------------------------- */
.mud-progress-linear { border-radius: var(--radius-compact); height: 8px; }
.mud-progress-linear .mud-progress-linear-bar { background-color: var(--primary); }
.mud-progress-circular.mud-primary-text { color: var(--primary); }
/* -----------------------------------------------------------------------------
Il ripple di Mud viene disattivato dove il contenitore ha il proprio
feedback al tocco, per non avere due risposte sovrapposte allo stesso dito.
-------------------------------------------------------------------------- */
.ripple-container .mud-ripple-effect,
.ripple-container .mud-ripple-effect-expanding {
display: none !important;
}
.mud-skeleton { border-radius: var(--radius-compact) !important; }
Reference in New Issue View Git Blame Copy Permalink