/* nmp-nota.css — il riquadro di nota di NoMorePaper: UN SOLO punto per tutto il sito (decisione del titolare, 11/11/2026). * * Il riquadro e' un foglietto di carta: fondo appena colorato, niente striscia a sinistra, niente bordo, niente ombra, angolo in alto a * destra piegato (la piega e' di 17px: --f). Sostituisce la vecchia striscia colorata (la riga a sinistra di 3-6 pixel) che il titolare * considera il segno di una pagina fatta in serie. Dove il colore e' un'informazione di STATO (la scheda della cucina, la riga di un * elenco, la voce di menu attiva) la striscia resta: qui si parla solo dei riquadri che spiegano, avvisano o confermano. * * COME SI USA *
nota / informazione (verde) *
attenzione (ambra) *
esito buono (verde pieno) *
errore (rosso) * + nmp-nota-piana «fondo pieno»: niente piega ne' ritaglio, raggio 10px. Per le pagine di testo lungo (termini, privacy, * cookie, condizioni, informative), per le note ravvicinate o ripetute (elenchi di avvisi, aiuto sotto ogni * campo) e per i riquadri con dentro elementi che escono dai bordi (menu a tendina, suggerimenti: il ritaglio * dell'angolo li taglierebbe). * PARSIMONIA (titolare, 11/11/2026): l'angolo piegato e' un segno raro. In una schermata al massimo UNO o DUE riquadri lo portano, * i piu' importanti (l'avviso che si deve leggere, l'esito di un'operazione); tutte le altre note della stessa schermata sono * nmp-nota-piana. Le SCHEDE (card, riquadri cliccabili, pannelli) non hanno ne' striscia ne' piega: restano pulite. * + nmp-nota-scura forza i colori per fondo scuro. Non serve dentro .notte / body.st-notte / .nmp-scuro: li riconosce da sola. * La prima parola in grassetto ( o come primo figlio) prende il colore d'accento --c. * Per un colore a scelta si impostano in linea --c e --b: la piega si ricava da sola (color-mix) o, senza, e' un'ombra leggera. * * CLASSI PROPRIE DELLE AREE (stesso aspetto, markup invariato): le classi che le app e il pannello avevano gia' * (.ca-status, .ca-pd-allergens, .message, .flash ...) sono registrate qui, cosi' la forma resta scritta una volta sola. Quasi tutte * sono messaggi ripetuti e hanno il fondo pieno; l'angolo piegato lo hanno solo .ca-pd-conflict (conflitto con un allergene) e gli * esiti del pannello (.adm-msg, .bd-msg, .sn-msg, .message, .flash, .et-flash, .et-err). I nomi generici del pannello valgono solo * sotto . * * Le MAIL non leggono fogli di stile e molti programmi di posta non conoscono clip-path: li' il riquadro e' un fondo pieno con raggio * 4px e spazio 12px 14px, tutto in linea nel codice che costruisce la mail. Niente angolo piegato nelle mail. */ /* ---- i colori: chiari di serie, scuri dentro .notte / body.st-notte / .nmp-scuro (o sul riquadro con nmp-nota-scura) ---- */ :root { --nmpn-nota-c: #2e7a1f; --nmpn-nota-b: #eef3ea; --nmpn-nota-p: #a5c59d; --nmpn-att-c: #9a5b00; --nmpn-att-b: #fbf1dd; --nmpn-att-p: #d6b889; --nmpn-fatto-c: #1f6f4a; --nmpn-fatto-b: #e6f3ec; --nmpn-fatto-p: #9ac1ae; --nmpn-err-c: #a8261c; --nmpn-err-b: #fbeae8; --nmpn-err-p: #dba09a; } .notte, body.st-notte, .nmp-scuro, .nmp-nota-scura { --nmpn-nota-c: #8fd46b; --nmpn-nota-b: #1c2a1e; --nmpn-nota-p: #486b3b; --nmpn-att-c: #f0b64a; --nmpn-att-b: #2c2410; --nmpn-att-p: #765b26; --nmpn-fatto-c: #6fd6a0; --nmpn-fatto-b: #16291f; --nmpn-fatto-p: #386b50; --nmpn-err-c: #ff9a90; --nmpn-err-b: #2d1816; --nmpn-err-p: #7d4944; } /* il pannello ha il fondo verdino (#eef2ec): la nota di serie (#eef3ea) avrebbe lo stesso colore e non si vedrebbe; qui e' bianca */ :root.nmp-area-admin { --nmpn-nota-b: #ffffff; --nmpn-nota-p: #b0ccaa; } /* ---- la forma ---- */ .nmp-nota, .ca-banner-welcome, .ca-cart-tablenote, .ca-status, .ca-scan-status, .ca-pd-allergens, .ca-cart-dietary, .ca-scan-feedback, .ca-pd-conflict, .bar-nota, .kds-nota, :where(.nmp-area-admin) :is(.adm-msg, .bd-msg, .sn-msg, .message, .flash, .et-flash, .et-err, .warn-box), :where(.nmp-area-admin) .wip-modal .warning { --f: 17px; --c: var(--nmpn-nota-c); --b: var(--nmpn-nota-b); --p: var(--nmpn-nota-p); /* la piega, ripiego a tinta piena per i browser senza color-mix */ box-sizing: border-box; position: relative; background: var(--b); color: inherit; padding: 12px calc(var(--f) + 12px) 12px 14px; border: 0; border-radius: 4px; box-shadow: none; overflow-wrap: break-word; clip-path: polygon(0 0, calc(100% - var(--f)) 0, 100% var(--f), 100% 100%, 0 100%); } .nmp-nota::after, .ca-banner-welcome::after, .ca-cart-tablenote::after, .ca-status::after, .ca-scan-status::after, .ca-pd-allergens::after, .ca-cart-dietary::after, .ca-scan-feedback::after, .ca-pd-conflict::after, .bar-nota::after, .kds-nota::after, :where(.nmp-area-admin) :is(.adm-msg, .bd-msg, .sn-msg, .message, .flash, .et-flash, .et-err, .warn-box)::after, :where(.nmp-area-admin) .wip-modal .warning::after { content: ""; position: absolute; top: 0; right: 0; width: var(--f); height: var(--f); background: var(--p, rgba(0, 0, 0, .14)); /* ripiego: colore pieno (o un'ombra leggera se --p non c'e') */ background: color-mix(in srgb, var(--c) 38%, var(--b)); clip-path: polygon(0 0, 100% 100%, 0 100%); } .nmp-nota > :first-child { margin-top: 0; } .nmp-nota > :last-child { margin-bottom: 0; } .nmp-nota > b:first-child, .nmp-nota > strong:first-child { color: var(--c); } /* ---- i tipi ---- */ .nmp-nota-attenzione, .ca-pd-allergens, .ca-cart-dietary, .ca-status.warn, .bar-nota, .kds-nota, :where(.nmp-area-admin) :is(.adm-msg, .bd-msg, .sn-msg, .message, .flash).warning, :where(.nmp-area-admin) :is(.warn-box, .toast.warning), :where(.nmp-area-admin) .wip-modal .warning { --c: var(--nmpn-att-c); --b: var(--nmpn-att-b); --p: var(--nmpn-att-p); } .nmp-nota-fatto, .ca-status.ok, .ca-scan-feedback, :where(.nmp-area-admin) :is(.adm-msg, .bd-msg, .sn-msg, .message, .flash).success, :where(.nmp-area-admin) :is(.flash.ok, .et-flash, .toast.success) { --c: var(--nmpn-fatto-c); --b: var(--nmpn-fatto-b); --p: var(--nmpn-fatto-p); } .nmp-nota-errore, .ca-status.err, .ca-pd-conflict, .ca-scan-status.err, .ca-scan-feedback.err, :where(.nmp-area-admin) :is(.adm-msg, .bd-msg, .sn-msg, .message, .flash).error, :where(.nmp-area-admin) :is(.flash.err, .et-err, .toast.error) { --c: var(--nmpn-err-c); --b: var(--nmpn-err-b); --p: var(--nmpn-err-p); } /* ---- «fondo pieno»: niente ritaglio, niente piega. Per i testi lunghi, per le note ravvicinate o ripetute, per i riquadri con dentro elementi che escono dai bordi. Le classi proprie delle app e del pannello che sono messaggi ripetuti stanno qui di serie: l'angolo piegato resta solo a .nmp-nota (senza -piana), a .ca-pd-conflict e agli esiti del pannello (.message, .flash ...). ---- */ .nmp-nota.nmp-nota-piana, .ca-banner-welcome, .ca-cart-tablenote, .ca-status, .ca-scan-status, .ca-pd-allergens, .ca-cart-dietary, .ca-scan-feedback, .bar-nota, .kds-nota, :where(.nmp-area-admin) :is(.warn-box), :where(.nmp-area-admin) .wip-modal .warning { clip-path: none; padding: 12px 14px; border-radius: 10px; } .nmp-nota.nmp-nota-piana::after, .ca-banner-welcome::after, .ca-cart-tablenote::after, .ca-status::after, .ca-scan-status::after, .ca-pd-allergens::after, .ca-cart-dietary::after, .ca-scan-feedback::after, .bar-nota::after, .kds-nota::after, :where(.nmp-area-admin) :is(.warn-box)::after, :where(.nmp-area-admin) .wip-modal .warning::after { content: none; display: none; } /* ---- il pannello: gli avvisi a scomparsa fluttuano (hanno l'ombra, che il ritaglio taglierebbe): fondo pieno ---- */ :where(.nmp-area-admin) .toast { --f: 17px; --c: var(--nmpn-nota-c); --b: var(--nmpn-nota-b); background: var(--b); color: inherit; padding: 12px 14px; border: 0; border-radius: 10px; }