/* * ================================================ * NOTIFICHE * ================================================ * * Indice * * 1. Avvisi WooCommerce inline * 2. Contenitore * 3. Notifica * 4. Tipi * 5. Link interni * 6. Animazioni * 7. Campi in errore * 8. Movimento ridotto e stampa * * Nota sugli !important. * Il corpo della notifica è markup nostro: WooCommerce e Blocksy su * .edt-toast non hanno nemmeno una regola, quindi non c'è niente da * resettare. Gli !important stanno solo dove serve davvero — sui link, * perché WooCommerce ci attacca .button / .showlogin / .restore-item e * Blocksy quelle classi le trasforma in pulsanti pieni. Lì il markup lo * ricostruiamo in JS, ma la difesa in CSS resta come rete di sicurezza. * ================================================ */ /* * ================================================ * 1. Avvisi WooCommerce inline * ================================================ * * Nascosti solo sotto html.edt-toast-on: quella classe la mette uno script * inline in e viene tolta da sé se il modulo non parte entro pochi * secondi. Senza JavaScript, o con un file non caricato, gli avvisi * restano visibili dove stavano — un errore di pagamento non deve mai * sparire per colpa di un asset mancante. * * Il selettore è volutamente stretto: prende solo ciò che sta DENTRO i * contenitori in cui WooCommerce svuota la coda. Un .woocommerce-info può * essere anche la descrizione di un metodo di pagamento al checkout o lo * stato "carrello vuoto", e quelli non sono notifiche. */ html.edt-toast-on :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { display: none !important; } /* * Questa regola serve solo a coprire l'istante fra il primo disegno e * l'avvio del modulo: subito dopo il JavaScript stacca proprio quei nodi * dal DOM, quindi il contenitore resta davvero vuoto e le regole :empty * che abbiamo già altrove tornano a valere da sole. */ /* * ================================================ * 2. Contenitore * ================================================ * * Centrato con inset-inline + margin-inline invece che con * translateX(-50%): così il transform resta libero per l'animazione delle * singole notifiche e le due cose non si pestano i piedi. * * z-index sopra i pannelli offcanvas di Blocksy, che stanno a 999999: le * rimozioni dal carrello partono proprio da dentro quel pannello. */ .edt-toasts { position: fixed; z-index: 1000001; inset-inline: 0; bottom: 1.5rem; bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem)); width: min(32rem, calc(100% - 2rem)); margin-inline: auto; /* Il contenitore non deve rubare i click alla pagina sotto. */ pointer-events: none; } .edt-toasts__region { display: block; } /* * ================================================ * 3. Notifica * ================================================ * * display: block e niente flex, come da richiesta: il contenuto scorre in * linea e nessun figlio inatteso può sfondare il riquadro. */ .edt-toast { display: block; box-sizing: border-box; /* * fit-content: la pillola si stringe sul testo invece di occupare tutta * la fascia, com'è nel riferimento. margin auto la rimette al centro, * e max-width la fa andare a capo prima di toccare i bordi. Si ottiene * lo stesso risultato di un flex centrato senza usare flex. */ width: fit-content; max-width: 100%; margin: 0.5rem auto 0; padding: 0.875rem 1.75rem; border-radius: 4px; background-color: rgba(0, 0, 0, 0.98); color: var(--wp--preset--color--white); font-size: 0.9375rem; line-height: 1.45; text-align: center; text-wrap: pretty; cursor: pointer; box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.28); /* Riattiva i click solo sulla notifica, non su tutta la fascia. */ pointer-events: auto; } @media (max-width: 480px) { .edt-toast { padding: 0.75rem 1.25rem; font-size: 0.875rem; } } /* * ================================================ * 4. Tipi * ================================================ * * Nero per conferme e informazioni, rosso pieno per gli errori: una carta * rifiutata o un pagamento non andato a buon fine devono leggersi come * tali senza doverli leggere. * * Il rosso è quello che Blocksy usa già per i suoi avvisi di errore, così * resta un colore solo su tutto il sito. Bianco su questo rosso dà un * contrasto di 5,25:1, sopra il minimo AA di 4,5:1. */ .edt-toast--error { background-color: var(--edt-color-error, #da001c); color: var(--wp--preset--color--white); } /* * ================================================ * 5. Link interni * ================================================ * * Qui vivono gli !important. WooCommerce marca certi link come .button, * .showlogin o .restore-item ("Visualizza carrello", "Annulla?") e Blocksy * li dipinge da pulsante pieno con altezza minima, padding e ::before di * hover. Dentro la notifica devono essere solo testo sottolineato. */ .edt-toast a { display: inline !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: none !important; text-decoration: underline !important; text-underline-offset: 0.2em; } .edt-toast a::before, .edt-toast a::after { content: none !important; } .edt-toast a:hover, .edt-toast a:focus-visible { color: inherit !important; opacity: 0.75; } .edt-toast a:focus-visible { outline: 0.125rem solid var(--wp--preset--color--white, #ffffff); outline-offset: 0.125rem; } /* * ================================================ * 6. Animazioni * ================================================ * * Entrata: sale e compare. Uscita: solo dissolvenza, perché .is-out * riscrive sia il transform sia la transition. * * Attenzione all'ordine di lettura: la regola base è lo stato di PARTENZA * dell'entrata (non l'uscita), .is-in è lo stato finale, .is-out porta con * sé la propria transition più corta. */ .edt-toast { opacity: 0; transform: translateY(0.75rem); transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1); } .edt-toast.is-in { opacity: 1; transform: none; } .edt-toast.is-out { opacity: 0; transform: none; transition: opacity 0.28s ease; } /* * ================================================ * 7. Campi in errore * ================================================ * * Quando gli errori sono più d'uno la notifica diventa una riga sola * ("Controlla i campi evidenziati") e il dettaglio va sotto al campo che * lo riguarda. */ .edt-field-invalid :is(input, select, textarea) { border-color: var(--edt-color-error, #da001c); } .edt-field-error { display: block; margin-top: 0.375rem; color: var(--edt-color-error, #da001c); font-size: 0.75rem; line-height: 1.4; } /* * ================================================ * 8. Movimento ridotto e stampa * ================================================ */ @media (prefers-reduced-motion: reduce) { .edt-toast { transform: none; transition: opacity 0.01ms linear; } .edt-toast.is-in, .edt-toast.is-out { transform: none; } } @media print { .edt-toasts { display: none; } /* In stampa gli avvisi tornano dove li mette WooCommerce. */ html.edt-toast-on :is(.woocommerce-notices-wrapper, .woocommerce-NoticeGroup) :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) { display: block !important; } }