From 8cfce316fa284c88f6acf77b5b92dc8b18c5d8a5 Mon Sep 17 00:00:00 2001 From: MarcoE Date: Thu, 17 Sep 2026 14:07:49 +0200 Subject: [PATCH] Compatta i campi di accesso e togli il doppio bordo sul fuoco MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Sul fuoco si vedevano due bordi: quello del campo piu' l'anello globale che l'input riceve per conto suo, con raggio e colore diversi. Dove e' il contenitore a segnare il fuoco — accesso, ricerca, barcode, gruppi del form — l'anello sull'input non serve: il fuoco resta visibile dal bordo del campo. Campi da 74 a 56 punti: padding piu' stretto, riga del valore alta quanto il testo che contiene. Il bottone che mostra la password sborda nel padding invece di alzare la riga, cosi' il campo password non e' piu' alto degli altri due e il bersaglio resta da 44. "Accedi" disabilitato era navy pieno con testo bianco: sembrava pronto, e il tocco a vuoto sembrava un guasto. Ora e' chiaramente inerte. Con la tastiera aperta il marchio finiva tagliato sopra e non si poteva risalire: il pannello si centra con i margini automatici invece che con align-items, cosi' lo scroll arriva anche in cima. Via anche la barra di scorrimento, come nel resto delle schermate. Verificata sul terminale, a riposo e col campo attivo. Co-Authored-By: Claude Opus 5 (1M context) --- SteUp.Shared/wwwroot/css/base.css | 12 +++++++++ SteUp.Shared/wwwroot/css/components.css | 34 +++++++++++++++++++------ 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/SteUp.Shared/wwwroot/css/base.css b/SteUp.Shared/wwwroot/css/base.css index 12dd292..abd0fcc 100644 --- a/SteUp.Shared/wwwroot/css/base.css +++ b/SteUp.Shared/wwwroot/css/base.css @@ -245,6 +245,18 @@ textarea:focus-visible, border-radius: var(--radius-compact); } +/* Dove e' il contenitore a segnare il fuoco — campo di accesso, ricerca, + barcode, gruppo di form — l'anello sull'input disegnerebbe un secondo bordo + dentro il primo, con raggio e colore diversi. Il fuoco resta visibile: lo + mostra il bordo del campo. */ +.onboarding__field input:focus-visible, +.search-field input:focus-visible, +.barcode-field input:focus-visible, +.form-group input:focus-visible, +.form-group textarea:focus-visible { + outline: none; +} + /* ----------------------------------------------------------------------------- Risposta al tocco Feedback fisico immediato (principio "Feedback immediato a ogni scan"): diff --git a/SteUp.Shared/wwwroot/css/components.css b/SteUp.Shared/wwwroot/css/components.css index 5c1da6b..bc2ca8b 100644 --- a/SteUp.Shared/wwwroot/css/components.css +++ b/SteUp.Shared/wwwroot/css/components.css @@ -873,22 +873,31 @@ .onboarding { display: flex; - align-items: center; justify-content: center; min-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; + /* La barra di scorrimento del browser e' uno dei segnali che tradiscono + una pagina web dentro un'app, come nel resto delle schermate. */ + scrollbar-width: none; padding: var(--space-lg); padding-top: calc(var(--space-lg) + env(safe-area-inset-top, 0px)); padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px)); background-color: var(--workspace); } +.onboarding::-webkit-scrollbar { display: none; } + .onboarding__panel { width: 100%; max-width: 440px; display: flex; flex-direction: column; + /* Centrato con i margini automatici invece che con align-items: quando la + tastiera accorcia la finestra il contenuto eccede da entrambi i lati, e + con align-items: center la parte sopra finisce fuori dalla portata dello + scroll — il marchio si vedeva tagliato e non si poteva risalire. */ + margin-block: auto; } .onboarding__logo { @@ -905,13 +914,13 @@ .onboarding__fields { display: flex; flex-direction: column; - gap: var(--space-sm); - margin-top: var(--space-xl); + gap: var(--space-xs); + margin-top: var(--space-lg); } .onboarding__field { display: block; - padding: var(--space-sm) var(--space-md); + padding: var(--space-xs) var(--space-14); background-color: var(--surface); border-radius: var(--radius-control); border: 1.5px solid transparent; @@ -927,7 +936,7 @@ .onboarding__label { display: block; font-size: var(--label-md-size); - line-height: 1.25; + line-height: 1.2; font-weight: 500; color: var(--ink-muted); } @@ -941,7 +950,7 @@ .onboarding__input { width: 100%; min-width: 0; - min-height: 34px; + min-height: 24px; border: none; background: none; outline: none; @@ -958,7 +967,10 @@ justify-content: center; width: var(--touch-min); height: var(--touch-min); - margin-right: calc(var(--space-xs) * -1); + /* Il bersaglio resta da 44, ma sborda nel padding invece di alzare la riga: + cosi' il campo password non e' piu' alto degli altri due. */ + margin-block: -10px; + margin-right: calc(var(--space-6) * -1); border: none; border-radius: var(--radius-pill); background: none; @@ -966,6 +978,10 @@ font-size: 20px; } +/* L'anello del fuoco resta dentro il bottone: fuori sbatterebbe contro il + bordo del campo. */ +.onboarding__reveal:focus-visible { outline-offset: -2px; } + .onboarding__reveal:active { background-color: var(--surface-muted); } .onboarding__error { margin-top: var(--space-md); } @@ -991,7 +1007,9 @@ } .onboarding__submit:active { transform: scale(0.98); } -.onboarding__submit:disabled { background-color: var(--ink-muted); } +/* Disabilitato deve sembrare inerte: il navy pieno con testo bianco si legge + come un bottone pronto, e il tocco a vuoto sembra un guasto. */ +.onboarding__submit:disabled { background-color: var(--divider); color: var(--ink-muted); } /* Il caricamento prende il posto dell'icona, stessa dimensione: il bottone non cambia forma mentre lavora. */