From 4c1ef3d846ef83cfe17bc00c4f1b41fc8a8af33f Mon Sep 17 00:00:00 2001 From: MarcoE Date: Thu, 17 Sep 2026 12:54:51 +0200 Subject: [PATCH] Separa di nuovo i campi della schermata di accesso Il pannello unico diviso da linee e' la forma di un elenco da consultare. Qui si compilano tre dati diversi uno dopo l'altro, e lo stacco fra un campo e l'altro serve a dire dove finisce quello che stai scrivendo. Ogni campo torna a essere una superficie sua, con il bordo che si accende su quello attivo. Le etichette restano ferme sopra il campo: e' il salto dell'etichetta al primo tocco che faceva sembrare la schermata un modulo web, non il fatto che i campi fossero separati. Co-Authored-By: Claude Opus 5 (1M context) --- SteUp.Shared/wwwroot/css/components.css | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/SteUp.Shared/wwwroot/css/components.css b/SteUp.Shared/wwwroot/css/components.css index aad8bb4..5c1da6b 100644 --- a/SteUp.Shared/wwwroot/css/components.css +++ b/SteUp.Shared/wwwroot/css/components.css @@ -899,24 +899,28 @@ /* Un pannello solo, tre righe divise da una linea: la stessa forma delle liste dell'app, invece di tre riquadri che galleggiano separati. */ +/* Tre campi distinti, non tre righe di un blocco unico: qui non si consulta un + elenco, si compilano tre dati diversi uno dopo l'altro, e lo stacco fra uno + e l'altro dice dove finisce quello che stai scrivendo. */ .onboarding__fields { display: flex; flex-direction: column; + gap: var(--space-sm); margin-top: var(--space-xl); - background-color: var(--surface); - border-radius: var(--radius-surface); - overflow: hidden; } .onboarding__field { display: block; padding: var(--space-sm) var(--space-md); - transition: background-color var(--duration-fast) var(--ease-out); + background-color: var(--surface); + border-radius: var(--radius-control); + border: 1.5px solid transparent; + transition: border-color var(--duration-fast) var(--ease-out); } -.onboarding__field + .onboarding__field { border-top: 1px solid var(--divider); } - -.onboarding__field:focus-within { background-color: var(--surface-muted); } +/* Il campo attivo si segna col bordo, non cambiando fondo: lo stacco dallo + sfondo di pagina lo fa gia' la superficie bianca. */ +.onboarding__field:focus-within { border-color: var(--primary-dark); } /* L'etichetta sta sopra il campo e non si muove: niente testo che scivola quando appoggi il dito. */