/* ========================================================================== GRUME POS - SISTEMA DI DESIGN ========================================================================== Un unico sistema per le 92 pagine POS e per il sito pubblico. Perche' un file solo e non 92 template: le pagine hanno fogli di stile propri (inline nel body, mobile.css, style.css). Se ridisegnassi template per template, il risultato sarebbe coerente per qualche settimana e poi divergente. Qui invece i valori nascono una volta sola e ogni pagina li eredita: e' il modo in cui "tutto collegato" diventa vero invece che aspirazionale. Priorita' dichiarata: VELOCITA' DI LAVORO. Chiude una cassa, legge un ordine, apre un tavolo. Ogni decisione qui sotto guarda a quanto e' veloce la prossima azione, non a come appare ferma. Caricamento: Dopo questo file passa solo responsive.css, che si occupa dei breakpoint. Qui stanno identita' e componenti, li adattativi stanno li'. ========================================================================== */ /* ========================================================================== 1. TOKEN - l'unica fonte dei valori ========================================================================== */ :root { /* --- verde istituzionale: lo riconoscono i clienti, non lo cambio --- */ --ds-accent: #15803d; --ds-accent-hover: #166534; --ds-accent-soft: #dcfce7; --ds-accent-ink: #14532d; /* --- semantici: stati, non decorazioni --- */ --ds-danger: #b91c1c; --ds-danger-hover: #991b1b; --ds-danger-soft: #fee2e2; --ds-warn: #b45309; --ds-warn-soft: #fef3c7; --ds-info: #1d4ed8; --ds-info-soft: #dbeafe; /* --- superfici: dal fondo alla carta --- */ --ds-bg: #f1f5f9; --ds-surface: #ffffff; --ds-surface-2: #f8fafc; --ds-surface-3: #f1f5f9; --ds-ink: #0f172a; --ds-ink-2: #334155; --ds-ink-3: #64748b; --ds-line: #e2e8f0; --ds-line-2: #cbd5e1; /* --- ritmo: una scala di 4px, niente valori sparati --- */ --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px; --ds-s5: 20px; --ds-s6: 24px; --ds-s8: 32px; --ds-s10: 40px; --ds-r1: 6px; --ds-r2: 10px; --ds-r3: 14px; --ds-r4: 20px; --ds-r5: 28px; /* Ombre brevi: alzano la carta dal fondo senza sporcare */ --ds-sh-1: 0 1px 2px rgba(15,23,42,.06); --ds-sh-2: 0 2px 6px rgba(15,23,42,.08); --ds-sh-3: 0 8px 24px rgba(15,23,42,.10); --ds-sh-4: 0 18px 48px rgba(15,23,42,.16); --ds-sh-focus: 0 0 0 3px rgba(21,128,61,.28); /* --- testo: una scala, niente numeri arbitrari --- */ --ds-f-xs: 12px; --ds-f-sm: 13px; --ds-f-md: 15px; --ds-f-lg: 17px; --ds-f-xl: 20px; --ds-f-2xl: 26px; --ds-f-3xl: 34px; /* --- movimento: breve e funzionale, mai decorativo --- */ --ds-t-fast: 120ms cubic-bezier(.4,0,.2,1); --ds-t: 200ms cubic-bezier(.4,0,.2,1); /* bersagli tattili: 44px e' il minimo comodo, 48px il riferimento */ --ds-tap: 44px; } /* ========================================================================== 2. PALETTE DI RIFERIMENTO ========================================================================== Gli stessi valori nei tre contesti in cui il prodotto puo' trovarsi: chiaro, scuro automatico (impostazione del sistema), scuro scelto a mano. Perche' sta qui e non solo in ":root": in style.css i token del POS cambiano dentro @media (prefers-color-scheme: dark). Se il nuovo sistema li avesse riscritti una volta sola in ":root", avrebbe schiacciato il tema scuro: testo quasi nero su fondo nero, illeggibile. E' un errore che ho fatto e che si vede solo guardando la cassa, non il codice. ========================================================================== */ :root { --ds-bg: #f1f5f9; --ds-surface: #ffffff; --ds-ink: #0f172a; --ds-ink-2: #334155; --ds-ink-3: #64748b; --ds-line: #e2e8f0; --ds-line-2: #cbd5e1; } /* Scuro automatico: segue il sistema operativo, come faceva gia' il POS. DIFETTO CORRETTO: qui mancavano --ds-surface-2 e --ds-surface-3. Restavano ai valori CHIARI di ":root" mentre --ds-surface passava a #111827. Lo svantaggio si vede misurato sulla pagina Agenda Prenotazioni: la regola "table thead th { background: var(--ds-surface-2) }" metteva le intestazioni dei giorni (lun, mar, ...) su #f8fafc con testo bianco: contrasto 1,05:1, illeggibili. E una settimana su due del calendario aveva fondo chiaro con il numero del giorno bianco sopra. Il tema scuro scelto a mano li dichiarava gia' (riga 123-124): qui mancava solo il ramo automatico. */ @media (prefers-color-scheme: dark) { :root { --ds-bg: #0b1220; --ds-surface: #111827; --ds-surface-2: #1a2333; --ds-surface-3: #223047; --ds-ink: #f1f5f9; --ds-ink-2: #cbd5e1; --ds-ink-3: #94a3b8; --ds-line: #2b3648; --ds-line-2: #3b4a63; } } /* Scuro scelto a mano dal menu. Qui i token e i ponti sono dichiarati insieme sullo stesso elemento: e' l'unico modo che funziona quando il tema e' forzato e il sistema e' in chiaro. */ body.pos-dark-mode, body.dark-mode { --ds-bg: #0b1220; --ds-surface: #111827; --ds-surface-2: #1a2333; --ds-surface-3: #223047; --ds-ink: #f1f5f9; --ds-ink-2: #cbd5e1; --ds-ink-3: #94a3b8; --ds-line: #2b3648; --ds-line-2: #3b4a63; --hp-accent: #22c55e; --hp-accent2: #16a34a; --hp-accent-soft: rgba(34,197,94,.16); --hp-ink: #f1f5f9; --hp-ink-soft: #94a3b8; --hp-line: #2b3648; --hp-bg: #0b1220; --hp-card: #111827; --bg-body: var(--ds-bg); --bg-panel: var(--ds-surface); --bg-header: var(--ds-surface); --bg-card: var(--ds-surface); --text-main: var(--ds-ink); --border-color: var(--ds-line); --ds-sh-1: 0 1px 2px rgba(0,0,0,.4); --ds-sh-2: 0 2px 6px rgba(0,0,0,.45); --ds-sh-3: 0 8px 24px rgba(0,0,0,.5); --ds-sh-4: 0 18px 48px rgba(0,0,0,.6); } /* ========================================================================== 3. PONTE LEGACY - le variabili gia' esistenti puntano alle nuove ========================================================================== Le pagine usano --hp-* (homepage) e --bg-*/--text-* (moduli, KDS, cassa, delivery). Senza questo passaggio rifarei il tema ma non cambierebbe nulla: e' il tratto che rende il redesign visibile ovunque. Nota: --hp-* resta in chiaro perche' la dashboard gestisce gia' da sola il proprio tema scuro; qui si mette solo il ponte dei moduli. ========================================================================== */ :root { --hp-accent: var(--ds-accent); --hp-accent2: var(--ds-accent-hover); --hp-accent-soft: var(--ds-accent-soft); --hp-ink: var(--ds-ink); --hp-ink-soft: var(--ds-ink-3); --hp-line: var(--ds-line); --hp-bg: var(--ds-bg); --hp-card: var(--ds-surface); --bg-body: var(--ds-bg); --bg-panel: var(--ds-surface); --bg-header: var(--ds-surface); --bg-card: var(--ds-surface); --text-main: var(--ds-ink); --border-color: var(--ds-line); } /* ========================================================================== 4. BASE ========================================================================== Tutto questo livello usa :where(), che ha specificita' ZERO. E' la scelta che conta in un sistema di design: il sistema propone, la pagina decide. Con i selettori normali, essendo questo foglio caricato per ultimo, il sistema si sarebbe messo davanti a scelte legittime. Concreto: il mio "body { color: nero }" rendeva illeggibile il menu in fondo del sito pubblico, che eredita un colore chiaro su fondo scuro. Il testo non era sbagliato: era sovrascritto. Con :where() la pagina vince e il sistema resta disponibile. ========================================================================== */ :where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :where(body) { background: var(--ds-bg); color: var(--ds-ink); font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif; font-size: var(--ds-f-md); line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* I titoli hanno una scala, non dimensioni a caso */ :where(h1, h2, h3, h4, h5, h6) { color: var(--ds-ink); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; } :where(h1) { font-size: var(--ds-f-3xl); } :where(h2) { font-size: var(--ds-f-2xl); } :where(h3) { font-size: var(--ds-f-xl); } :where(h4) { font-size: var(--ds-f-lg); } :where(h5, h6) { font-size: var(--ds-f-md); } /* Numeri sempre leggibili: prezzi e quantita' sono il dato che si cerca di piu' e non devono stare in un carattere stretto o inclinato. */ .tnum, .price, .totale, .qty, [class*="price"], [class*="total"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } a { color: var(--ds-accent); text-decoration: none; } a:hover { color: var(--ds-accent-hover); text-decoration: underline; } /* Focus visibile: si lavora anche con tastiera e si deve vedere dove sei */ :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: var(--ds-r1); } /* ========================================================================== 5. BOTTONI - l'azione, resa immediatamente riconoscibile ========================================================================== Regola: una sola azione primaria per schermata. Le altre sono neutre o pericolose. Un tasto che spicca in mezzo a due uguali non spicca. ========================================================================== */ .btn { --_bg: var(--ds-surface); --_fg: var(--ds-ink); --_bd: var(--ds-line-2); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-s2); min-height: var(--ds-tap); padding: 0 var(--ds-s4); font-size: var(--ds-f-md); font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; color: var(--_fg); background: var(--_bg); border: 1px solid var(--_bd); border-radius: var(--ds-r2); box-shadow: var(--ds-sh-1); cursor: pointer; transition: background var(--ds-t-fast), border-color var(--ds-t-fast), box-shadow var(--ds-t-fast), transform var(--ds-t-fast); -webkit-tap-highlight-color: transparent; } .btn:hover { color: var(--_fg); text-decoration: none; background: var(--ds-surface-2); border-color: var(--ds-ink-3); } .btn:active { transform: translateY(1px); box-shadow: none; } .btn:focus-visible { outline: none; box-shadow: var(--ds-sh-focus); border-color: var(--ds-accent); } .btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; } /* --- primario: il verde istituzionale, uno solo per schermata --- */ .btn-primary, .btn-success { --_bg: var(--ds-accent); --_fg: #fff; --_bd: var(--ds-accent); box-shadow: 0 1px 2px rgba(21,128,61,.28); } .btn-primary:hover, .btn-success:hover { --_bg: var(--ds-accent-hover); --_bd: var(--ds-accent-hover); color: #fff; } /* --- pericolo: rosso pieno, mai da usare come abito --- */ .btn-danger { --_bg: var(--ds-danger); --_fg: #fff; --_bd: var(--ds-danger); } .btn-danger:hover { --_bg: var(--ds-danger-hover); --_bd: var(--ds-danger-hover); color: #fff; } /* --- contorno: azione secondaria ma reale --- */ .btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-light, .btn-outline-warning, .btn-outline-danger { --_bg: transparent; --_bd: currentColor; box-shadow: none; } .btn-outline-primary, .btn-outline-success { --_fg: var(--ds-accent); } .btn-outline-danger { --_fg: var(--ds-danger); } .btn-outline-warning { --_fg: var(--ds-warn); } .btn-outline-secondary, .btn-outline-light { --_fg: var(--ds-ink-2); --_bd: var(--ds-line-2); } /* --- avviso: da usare, non come colore decorativo --- */ .btn-warning { --_bg: var(--ds-warn); --_fg: #fff; --_bd: var(--ds-warn); } /* --- dimensioni: la piccola non scende sotto il bersaglio comodo --- */ .btn-sm { min-height: 36px; padding: 0 var(--ds-s3); font-size: var(--ds-f-sm); border-radius: var(--ds-r1); } .btn-lg { min-height: 52px; padding: 0 var(--ds-s6); font-size: var(--ds-f-lg); border-radius: var(--ds-r3); } .btn-block, .w-100.btn { width: 100%; } /* Icona sola: quadrata e centrata */ .btn-icon, .btn.rounded-circle, .rounded-circle.btn { width: var(--ds-tap); min-width: var(--ds-tap); height: var(--ds-tap); min-height: var(--ds-tap); padding: 0; border-radius: 50%; } /* ========================================================================== 6. MODULI DI INSERIMENTO ========================================================================== Il tocco e' l'atto piu' frequente: il bersaglio non scende mai sotto i 44px e niente si affianca per caso. ========================================================================== */ input, select, textarea, .form-control, .form-select, .form-check-input { min-height: var(--ds-tap); padding: var(--ds-s2) var(--ds-s3); font-size: var(--ds-f-md); font-family: inherit; color: var(--ds-ink); /* background, non background-color: l'abbreviazione azzera anche background-image, che e' dove Bootstrap disegna lo spuntone della casella. Con questa scrittura la casella spuntata e quella vuota avevano lo stesso aspetto, e non si capiva cosa fosse attivo. */ background-color: var(--ds-surface); border: 1px solid var(--ds-line-2); border-radius: var(--ds-r2); box-shadow: var(--ds-sh-1); transition: border-color var(--ds-t-fast), box-shadow var(--ds-t-fast); } /* La casella e l'interruttore devono mostrare in che stato sono: senza questo, la spunta e lo spostamento della levetta sparivano. */ .form-check-input:checked { background-color: var(--accent-green, #25D366); border-color: var(--accent-green, #25D366); } .form-check-input:focus-visible { outline: 2px solid var(--accent-gold, #ffd700); outline-offset: 2px; } /* Due regole generiche mettono background-color con !important su 'input, select, textarea' (mobile.css e style.css). Con quel !important vincevano anche sullo stato :checked, quindi la casella spuntata e quella vuota erano identiche: bianche, senza spuntone, senza differenza alcuna. Per farle sembrare diverse serve salire allo stesso livello. */ input[type="checkbox"].form-check-input, input[type="radio"].form-check-input { background-color: var(--ds-surface) !important; border-color: var(--ds-line-2) !important; } input[type="checkbox"].form-check-input:checked, input[type="radio"].form-check-input:checked { background-color: var(--accent-green, #25D366) !important; border-color: var(--accent-green, #25D366) !important; } /* lo spuntone e la levetta li disegna Bootstrap con una variabile: l'abbreviazione 'background' li cancellava, quindi vanno rimessi. */ input[type="checkbox"].form-check-input:checked { background-image: var(--bs-form-check-bg-image) !important; } .form-switch .form-check-input { background-image: var(--bs-form-switch-bg) !important; } .form-switch .form-check-input:checked { background-position: right center !important; background-image: var(--bs-form-switch-bg) !important; } input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus { color: var(--ds-ink); background: var(--ds-surface); border-color: var(--ds-accent); box-shadow: var(--ds-sh-focus); outline: none; } input::placeholder, textarea::placeholder { color: var(--ds-ink-3); } input:disabled, select:disabled, textarea:disabled, .form-control:disabled { background: var(--ds-surface-3); color: var(--ds-ink-3); cursor: not-allowed; } .form-label { margin-bottom: var(--ds-s1); font-size: var(--ds-f-sm); font-weight: 700; color: var(--ds-ink-2); } .form-check-input { width: 20px; height: 20px; } /* I gruppi di pulsanti devono stare uniti: due azioni adiacenti con una fessura in mezzo si premono per sbaglio. */ .input-group { gap: 0; } .input-group-text { min-height: var(--ds-tap); padding: 0 var(--ds-s3); font-weight: 700; color: var(--ds-ink-2); background: var(--ds-surface-3); border: 1px solid var(--ds-line-2); border-radius: var(--ds-r2); } /* ========================================================================== 7. SUPERFICI - carte, riquadri, pannelli ========================================================================== */ .card, .card-box, .goal-card, .pos-card, .panel { background: var(--ds-surface); color: var(--ds-ink); border: 1px solid var(--ds-line); border-radius: var(--ds-r3); box-shadow: var(--ds-sh-2); } .card-header, .card-box > header { padding: var(--ds-s4); font-weight: 800; color: var(--ds-ink); background: transparent; border-bottom: 1px solid var(--ds-line); } .card-body, .card-box > .card-body { padding: var(--ds-s4); } .card-footer { padding: var(--ds-s3) var(--ds-s4); background: var(--ds-surface-2); border-top: 1px solid var(--ds-line); } /* ========================================================================== 8. TABELLE - dove si lavora di piu' ========================================================================== Intestazione appiccicata e riga alternata: con duecento righe serve sapere sempre quale colonna si sta leggendo. ========================================================================== */ table, .table { --ds-cell-y: var(--ds-s3); } .table > :not(caption) > * > *, table > thead > tr > th, table > tbody > tr > td { padding: var(--ds-cell-y) var(--ds-s3); vertical-align: middle; } .table thead th, table thead th { position: sticky; top: 0; z-index: 3; font-size: var(--ds-f-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ds-ink-2); background: var(--ds-surface-2); border-bottom: 1px solid var(--ds-line-2); } .table > tbody > tr, table > tbody > tr { background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); transition: background var(--ds-t-fast); } /* Righe pari: con molte righe e' l'unica guida a non perdere il filo */ .table > tbody > tr:nth-of-type(even), table > tbody > tr:nth-of-type(even) { background: var(--ds-surface-2); } .table > tbody > tr:hover, table > tbody > tr:hover { background: var(--ds-accent-soft); } /* Riga selezionata: deve restare riconoscibile anche senza hover */ .table > tbody > tr.active, .table > tbody > tr.selected, table > tbody > tr.on { background: var(--ds-accent-soft); } .table > :not(caption) > * > *, table > thead > tr > th, table > tbody > tr > td { border-color: var(--ds-line); } /* ========================================================================== 9. ETICHETTE E DISTINTIVI ========================================================================== */ .badge, .badge-pill, .alert { display: inline-flex; align-items: center; gap: var(--ds-s1); padding: 3px var(--ds-s2); font-size: var(--ds-f-xs); font-weight: 800; line-height: 1.4; border-radius: 999px; border: 1px solid transparent; } .badge.text-bg-success, .badge.bg-success { color: #fff; background: var(--ds-accent); } .badge.text-bg-danger, .badge.bg-danger { color: #fff; background: var(--ds-danger); } .badge.text-bg-warning, .badge.bg-warning { color: #7c2d12; background: var(--ds-warn-soft); } .badge.text-bg-info, .badge.bg-info { color: #fff; background: var(--ds-info); } .badge.text-bg-secondary, .badge.bg-secondary { color: var(--ds-ink-2); background: var(--ds-surface-3); } .alert { padding: var(--ds-s3) var(--ds-s4); border-radius: var(--ds-r2); border-left: 4px solid var(--ds-ink-3); box-shadow: var(--ds-sh-1); } /* DIFETTO CORRETTO: le quattro righe qui sotto avevano il colore senza !important, mentre static/style.css righe 2639-2642 scrive: .alert-success, .alert-danger, .alert-info, .alert-primary { color: #ffffff !important } Vinceva il bianco, e i fondi sono chiari: --ds-info-soft #dbeafe, --ds-danger-soft #fee2e2, --ds-warn-soft #fef3c7, --ds-accent-soft #dcfce7. Nessuno dei quattro cambia nel ramo scuro, quindi il bianco era sbagliato in entrambi i tempi. Misurato su Orari Prenotazioni: bianco su #dbeafe, contrasto 1,22:1. Le righe che correggo sono le stesse scelte dal design, quindi non cambio un colore: cambio solo chi comanda. */ .alert-success { color: var(--ds-accent-ink) !important; background: var(--ds-accent-soft); border-left-color: var(--ds-accent); } .alert-danger { color: #7f1d1d !important; background: var(--ds-danger-soft); border-left-color: var(--ds-danger); } .alert-warning { color: #7c2d12 !important; background: var(--ds-warn-soft); border-left-color: var(--ds-warn); } .alert-info { color: #1e3a8a !important; background: var(--ds-info-soft); border-left-color: var(--ds-info); } /* ========================================================================== 10. FINESTRE E PANNELLI ========================================================================== */ .modal-content, .hp-modal-box { color: var(--ds-ink); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r4); box-shadow: var(--ds-sh-4); overflow: hidden; } .modal-header, .hp-modal-head { padding: var(--ds-s4) var(--ds-s5); font-weight: 800; color: var(--ds-ink); background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); } .modal-body, .hp-modal-body { padding: var(--ds-s5); } .modal-footer, .hp-modal-foot { display: flex; gap: var(--ds-s2); padding: var(--ds-s4) var(--ds-s5); background: var(--ds-surface-2); border-top: 1px solid var(--ds-line); } /* Chiudere: grande e lontano dal contenuto, per non premere per sbaglio */ .btn-close, .modal .btn-close, .hp-fly-close { width: var(--ds-tap); height: var(--ds-tap); padding: 0; opacity: .55; background-size: 14px; border-radius: 50%; transition: opacity var(--ds-t-fast), background var(--ds-t-fast); } .btn-close:hover, .hp-fly-close:hover { opacity: 1; } /* ========================================================================== 11. SCROLLBAR ========================================================================== Su Windows la scrollbar e' a scomparsa: senza questo non si sa che sotto ci sono altre righe. ========================================================================== */ * { scrollbar-width: thin; scrollbar-color: var(--ds-line-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ds-line-2); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--ds-ink-3); background-clip: padding-box; } /* ========================================================================== 12. CONTRASTO ========================================================================== Non e' una questione estetica: se il numero non si legge, si perde tempo. Il totale della cassa stava in verde su fondo scuro, quindi il dato piu' importante dello schermo era il meno leggibile. Qui si mette in chiaro. Nota: "#header-total" aveva lo stile in linea nel template, quindi correggerlo dal foglio di stile era impossibile senza !important. Il template ora usa la classe .pos-total. ========================================================================== */ /* Totale della cassa: deve stare in evidenza su entrambi i fondi */ .pos-total { color: var(--ds-accent); font-weight: 800; font-variant-numeric: tabular-nums; } @media (prefers-color-scheme: dark) { .pos-total { color: #4ade80; } } body.pos-dark-mode .pos-total, body.dark-mode .pos-total { color: #4ade80; } /* Stati vuoti: "Carrello vuoto" era grigio chiaro su bianco, illeggibile. Un vuoto si deve capire subito, non dopo due letture. */ .empty-state, .empty, .no-data, .vuoto, .carrello-vuoto, [class*="empty-state"] { color: var(--ds-ink-2) !important; font-weight: 600; } /* Il verde acceso su fondo chiaro non regge il contrasto: per il testo si usa la versione scura del verde, per i fondi quella chiara. */ .pos-chrome-accent { color: var(--ds-accent-ink); } /* La cassa ha un proprio set di token (--m-*) costruito per fondi scuri. Il verde di accento, usato per il totale del carrello, non regge il contrasto su quei fondi. Per il TESTO serve la versione chiara. */ .m-cart-total { color: #4ade80 !important; font-variant-numeric: tabular-nums; } /* Il layout mobile della cassa ha una regola larga: ".m-table-info span { color: accent }", che colpisce OGNI span dentro l'intestazione, totale compreso. Serve una specificita' maggiore per rimettere il totale leggibile. */ @media (max-width: 900px) { .m-table-info span.pos-total { color: #4ade80 !important; } } /* --- CASSA, LAYOUT DESKTOP --- Le stesse regole della cassa valgono anche da 900px in su, dove il layout e' diverso ma i colori di fondo sono gli stessi scuri. Il controllo di contrasto li ha elencati uno alla volta: sono qui tutti, con il selettore esatto, per non doverli rincorrere a uno a uno. */ /* Etichetta e totale del riepilogo: erano testo scuro su fondo scuro */ .cd-total-label { color: #cbd5e1 !important; font-weight: 700; } .total-big { color: #f8fafc !important; } .total-big .cd-total-label { color: #cbd5e1 !important; } /* Riepilogo cassa del popup turno: stessa problematica */ .cash-summary-box { color: #e2e8f0 !important; } .cash-summary-box .cash-info-value { color: #f1f5f9 !important; } .cash-summary-box .cash-info-label { color: #cbd5e1 !important; } /* Carrello vuoto: grigio chiaro su bianco, illeggibile. Lo stato vuoto deve dirsi subito, non dopo due letture. */ #cart-list.cart-list > div:only-child:not([class]), .cart-list > div:only-child:not([class]) { color: var(--ds-ink-3) !important; font-weight: 600; } /* Uscita / tavoli: testo scuro su rosso pieno */ .btn-exit { color: #fff !important; } .btn-exit:hover { color: #fff !important; opacity: .92; } /* Tasto prezzo: arancio su grigio chiaro, non regge */ .np-btn.btn-price { color: #7c2d12 !important; font-weight: 800; } /* --- STATO TAVOLO --- Il testo dello stato (libero / occupato) stava direttamente sul fondo della scheda, e il fondo cambia colore e sfumatura a seconda della stanza e dell'occupazione: alcune combinazioni erano illeggibili (2,54). Qui lo stato diventa un'etichetta con fondo proprio. Non e' solo una correzione di contrasto: con l'etichetta si vede di colpo quali tavoli sono occupati, senza leggerli uno a uno. */ .t-status-text { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(15, 23, 42, .80); color: #f1f5f9 !important; font-size: .68rem; font-weight: 800; letter-spacing: .02em; line-height: 1.4; white-space: nowrap; } /* Stato libero: verde, per leggerlo a colpo d'occhio */ .t-status-text.free, .t-status-text[data-status="free"] { background: rgba(21, 128, 61, .92); color: #fff !important; } /* Filtri attivi: il verde pieno dice "stai guardando questo" */ .filter-btn.active, .t-filter.active { background: var(--ds-accent) !important; color: #fff !important; border-color: var(--ds-accent) !important; font-weight: 800; } /* Piè di pagina: il contatore di versione si legge senza dover strizzare gli occhi, e resta in una posizione che non compete con i dati. */ .pos-footer { color: var(--ds-ink-3) !important; } /* La versione era a 10px: sotto la soglia minima di leggibilita', con il fondo semitrasparente della testata spariva del tutto. */ #page-version { font-size: 11px !important; color: var(--ds-ink-2) !important; font-weight: 600; } /* La barra di stato in fondo a Gestione ha fondo scuro: li devo dire "chiuso", "connesso" ecc. su quel fondo vanno in chiaro, non con il grigio dei testi attenuati che va bene sulle carte chiare. Attenzione: qui si nomina solo la barra di stato e i suoi due testi. Una regola con "*" costringeva anche l'avatar, che ha fondo chiaro proprio li': finiva chiaro su bianco. */ .bnet { color: #cbd5e1 !important; } #netTxt { color: #e2e8f0 !important; font-weight: 600; } #netDot { color: #e2e8f0 !important; } /* --- TESTO ATTENUATO --- Il caso piu' diffuso in tutto il POS: "text-muted", le sottotitole, le didascalie. Erano a 2,3 di contrasto su parecchie pagine, cioe' illeggibili. Il grigio attenuato serve a non far competere il testo secondario con i dati, non a renderlo invisibile. Ho provato prima con "color: currentColor" piu' opacita', perche' sembrava la soluzione che si adatta da sola al fondo. NON funziona: su queste pagine il contenitore eredita il colore chiaro del tema scuro ma la carta e' chiara, quindi il testo sparisce (misurato: da 2,3 a 1,8, peggio di prima). Serve un colore esplicito. Il grigio e' scelto sul caso peggiore reale, cioe' testo attenuato su carta chiara, che e' dove si legge di piu'. Sul pannello scuro resta un po' sotto la soglia: e' un compromesso consapevole, non un caso dimenticato. */ :where(.text-muted) { color: #5b6472 !important; } /* Alcune pagole dichiarano ".text-muted" con !important e specificita' maggiore (per esempio ".grume-body .text-muted" o ".sys-root .text-muted"), e vincevano: il testo risultava #aaa, illeggibile. Il sistema non puo' fare a meno di vincerle, quindi usa la classe che il POS ha gia' sul body per salire di specificita' in modo pulito. */ body.pos-scope .text-muted, body.pos-scope .text-muted-theme, body.pos-scope .small, body.pos-scope small.text-muted { color: #5b6472 !important; } /* Lo stesso per i titoli di scheda. Le carte sono CHIARE, quindi il titolo va scuro: schiarirlo lo rendeva illeggibile (1,18). */ body.pos-scope .text-main-theme { color: #1a2333 !important; } /* --- DELIVERY --- L'intestazione delle corsie ha fondo scuro ma ereditava il colore testo scuro: il numero di ordini ("41") era a 1,34, praticamente invisibile. I distintivi dei canali avevano lo stesso problema. Serve puntare anche ai figli: l'etichetta "DELIVERY" ha una classe propria e vinceva sul colore dato alla corsia. Il punto esatto era la testata: .kpi-header ha fondo scuro (52,58,64) ma il titolo dentro ereditava il colore testo scuro, cosi' la parola DELIVERY e tutto quello che le sta intorno erano a 1,34. */ .kpi-header, .kpi-header .page-title, .kpi-header .ms-2 { color: #e2e8f0 !important; } /* Le schede KPI invece stanno su BIANCO anche dentro la testata scura: il testo e' stato schiarito insieme al resto e il contrasto e' sceso a 1,0, cioe' bianco su bianco. Qui tornano scuri. */ .kpi-header .kpi-card, .kpi-header .kpi-card * { color: #0f172a !important; } .kpi-header .kpi-card .kpi-label { color: #5b6472 !important; } .kpi-header .kpi-val { color: #0f172a !important; font-weight: 800; } .lane-header, .lane-header *, .lane-header .ms-2 { color: #e2e8f0 !important; } .lane-header .count-badge, .count-badge { color: #f1f5f9 !important; font-weight: 800; } .ticket-badge { color: #fff !important; font-weight: 800; } /* --- GESTIONE --- Questa pagina porta stili propri dentro il corpo del template, che arrivano dopo questo foglio: senza !important le correzioni non attecchivano (misurato: identico prima e dopo). */ .secTitle { color: var(--ds-ink-2) !important; } .sub { color: var(--ds-ink-3) !important; } .btnP.g { color: #f1f5f9 !important; } /* ========================================================================== 14. INTESTAZIONE COMUNE DELLE PAGINE ========================================================================== Nell'applicazione esistevano due modelli di intestazione, identici nella sostanza e scritti due volte: .page-header (report) -> .ph-title con icona + pulsanti a destra .header-bar (sospesi) -> .page-title + pulsante indietro a destra Stessa idea, due scritture diverse: e' il motivo per cui il software sembra fatto di 92 programmi invece di uno. Qui si danno le stesse regole a entrambi i nomi, cosi' le pagine che adottano l'uno o l'altro vengono uguali senza toccare i template. Attenzione: ".page-title" NON e' sempre un'intestazione. Nella Delivery e' il titolo di una fascia di dati (ora si chiama .kpi-title) e nella stampa schede racchiude un

di un foglio. Per quello qui dentro vale solo come titolo DENTRO un'intestazione, non come intestazione. Prima di applicare un pattern a un nome di classe, bisogna verificare che quel nome significhi la stessa cosa in tutte le pagine: qui non significa. Priorita': l'utente deve sapere DOVE si trova e COSA puo' fare senza leggere. Per questo il titolo e' grosso e le azioni stanno sempre dalla stessa parte. ========================================================================== */ .page-header, .header-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s3); flex-wrap: wrap; padding: var(--ds-s3) var(--ds-s4); margin: 0 0 var(--ds-s4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-left: 4px solid var(--ds-accent); border-radius: var(--ds-r2); box-shadow: var(--ds-sh-1); } /* Il titolo vero e proprio: un passo sopra il corpo del testo, mai due. Su una pagina affollata e' l'unica cosa che si deve poter leggere a colpo d'occhio. */ .page-header .ph-title, .header-bar .page-title { display: flex; align-items: center; gap: var(--ds-s2); font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; line-height: 1.25; color: var(--ds-ink) !important; text-transform: none; } .page-header .ph-title > i, .page-title > i, .page-title > span > i { color: var(--ds-accent); font-size: 1.1rem; } /* Le azioni stanno sempre a destra e con lo stesso bersaglio del resto del prodotto: un pulsante piu' piccolo del resto si preme per sbaglio. */ .page-header > a, .page-header > .btn, .page-header > div:last-child > .btn, .header-bar > a, .header-bar > .btn { display: inline-flex; align-items: center; gap: var(--ds-s2); min-height: 40px; padding: 0 var(--ds-s3); font-size: var(--ds-f-sm); font-weight: 700; white-space: nowrap; } /* Su telefono l'intestazione non si comprime: il titolo sopra, le azioni sotto a tutta larghezza, cosi' non si finisce per schiacciare un pulsante per far stare tutto in una riga. */ @media (max-width: 768px) { .page-header, .header-bar { flex-direction: column; align-items: stretch; gap: var(--ds-s2); padding: var(--ds-s3); } .page-header > a, .page-header > .btn, .page-header > div:last-child > .btn, .header-bar > a, .header-bar > .btn { justify-content: center; min-height: var(--ds-tap); } } /* --- Titolo dentro la testata a schede (Delivery) --- Non e' un'intestazione di pagina ma il titolo di una fascia di dati, quindi non va trattato come ".page-header": niente riquadro, solo il titolo e il suo spazio. */ .kpi-title { display: flex; align-items: center; gap: var(--ds-s2); font-size: 1.1rem; font-weight: 900; letter-spacing: .04em; color: #e2e8f0 !important; white-space: nowrap; flex: none; } /* --- LA BARRA IN ALTO, TRA 769 E 1100px --- I pulsanti con testo (CASSA, TAVOLI, AGENDA) prendono il padding tattile da 44px: giusto col dito, ma in questa fascia la barra traboccava di 100px e la data finiva sopra i pulsanti. Ridurre la barra non significa rinunciare al bersaglio: in questa fascia restano comodi, solo piu' compatti. */ @media (min-width: 769px) and (max-width: 1100px) { .pos-header .btn { padding: 0 var(--ds-s2); font-size: var(--ds-f-xs); gap: 4px; } .pos-header .btn .me-2 { margin-right: 4px !important; } } /* --- Pulsanti colorati --- In alcune pagine i pulsanti con classe di Bootstrap (.btn-primary, .btn-success, .btn-info) restavano BIANCO su bianco: il colore di fondo era quello neutro del mio .btn e il testo bianco non reggeva (contrasto 1,0, il peggiore possibile: il bottone non si vede). Qui i tre casi sono fissati per nome. */ .btn-primary, .btn-success { --_bg: var(--ds-accent); --_fg: #fff; --_bd: var(--ds-accent); background: var(--ds-accent) !important; color: #fff !important; border-color: var(--ds-accent) !important; } .btn-info { --_bg: var(--ds-info); --_fg: #fff; --_bd: var(--ds-info); background: var(--ds-info) !important; color: #fff !important; border-color: var(--ds-info) !important; } /* --- Distintivi --- Un distintivo con fondo chiaro e testo bianco non si legge. Sul ciano e gli altri chiari il testo va scuro, non bianco. */ .badge.bg-info, .badge.text-bg-info { color: #083344 !important; background: #7dd3fc !important; } .badge.bg-warning, .badge.text-bg-warning { color: #7c2d12 !important; } .badge.bg-light, .badge.text-bg-light { color: var(--ds-ink) !important; } /* Il sottotitolo di pagina (".top .sub") era a 4,36: appena sotto la soglia. Su un testo che descrive la pagina si legge una volta sola, e una volta sola deve bastare. */ .top .sub, .sub { color: #4b5563 !important; } /* Le iniziali dentro un riquadro colorato: le decide la pagina, quindi il testo resta bianco e ben pesato per non sciogliersi sul colore. */ .av, .user-avatar { font-weight: 800; } /* ========================================================================== 15. FILTRI E BARRE DI STRUMENTI ========================================================================== Ogni pagina filtra in modo diverso: chip, bottoni, segmenti. Stesso lavoro, cinque interfacce diverse, e l'utente deve imparare a cercare ogni volta. Qui un solo modello: il filtro attivo si riconosce dal fondo pieno e dal peso del testo, non dal colore da solo. Perche' il colore da solo non basta: chi distingue i colori in modo debole non deve dover indovinare quale filtro e' attivo. ========================================================================== */ /* Contenitore dei filtri: spazio costante, mai uno stacco diverso pagina per pagina. */ .filter-bar, .filters, .report-filters, .filtri { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ds-s2); margin-bottom: var(--ds-s4); } /* Un filtro e' un interruttore: bersaglio comodo, area di pretesione chiarita, stato attivo che si vede anche senza colore. */ .filter-btn, .filtro, .report-filter, .chip { display: inline-flex; align-items: center; gap: var(--ds-s2); min-height: 38px; padding: 0 var(--ds-s3); font-size: var(--ds-f-sm); font-weight: 700; line-height: 1.2; color: var(--ds-ink-2); background: var(--ds-surface); border: 1px solid var(--ds-line-2); border-radius: var(--ds-r2); cursor: pointer; white-space: nowrap; transition: background var(--ds-t-fast), border-color var(--ds-t-fast), color var(--ds-t-fast), transform var(--ds-t-fast); -webkit-tap-highlight-color: transparent; } .filter-btn:hover, .filtro:hover, .report-filter:hover, .chip:hover { color: var(--ds-ink); background: var(--ds-surface-2); border-color: var(--ds-ink-3); } .filter-btn.active, .filtro.active, .report-filter.active, .chip.active, .filter-btn[aria-pressed="true"], .filtro[aria-selected="true"] { color: #fff !important; background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; font-weight: 800; box-shadow: 0 1px 2px rgba(21, 128, 61, .3); } /* Su telefono un filtro stretto e' un bersaglio che si sbaglia: si dispongono su piu' righe e si allargano. */ @media (max-width: 768px) { .filter-bar, .filters, .report-filters, .filtri { gap: var(--ds-s1); } .filter-btn, .filtro, .report-filter, .chip { flex: 1 1 auto; justify-content: center; min-height: var(--ds-tap); } } /* ========================================================================== 13. MOVIMENTO ========================================================================== Rapido e funzionale. Se l'utente ha chiesto meno animazioni, sparisce tutto tranne quello che serve a capire che e' successo qualcosa. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 13. LE PAGINE DI GESTIONE NON SEGUONO IL TEMA DEL COMPUTER ========================================================================== Scelta del gestore: dentro il POS le pagine di gestione - clienti, report, impostazioni, magazzino, menu, agenda - sono sempre chiare. Le schermate operative (cassa, Sala e Tavoli) restano legate al tema. Il difetto che ho misurato, e la sua forma esatta: le superfici di queste pagine sono gia' forzate chiare da static/style.css (blocco ".extras-ui, .extras-ui .card, ... { background-color:#ffffff !important }"), ma i COLORI DEL TESTO arrivavano da --text-main, che dentro @media (prefers-color-scheme: dark) diventa bianco. Risultato: titolo bianco su fondo bianco, contrasto 1,00:1. Su 44 pagine, 700 elementi di testo. Sull'Agenza Prenotazioni i numeri dei giorni sparivano e una settimana su due aveva fondo chiaro con numeri bianchi sopra. Il contraltale che gia' esisteva - static/style.css, "body.pos-dark-mode" - non serve a nulla: ho cercato in tutto il progetto e nessuno assegna mai quella classe. Era codice morto, e per questo il problema non si vedeva dal sorgente. Perche' qui si fissano i TOKEN e non i selettori: fissare il token una volta sola vale per tutto quello che c'e' dentro, anche per le regole scritte dopo. Correggere una regola alla volta e' esattamente come il difetto si e' ripetuto: si chiudeva una, emergeva un'altra. Attenzione a due cose, entrambe verificate: - "extras-ui" da solo non va bene: la cassa e Sala e Tavoli lo ereditano dal layout e devono continuare a seguire il tema. Lo stesso vale per il Gestore File, che ha un editor di codice con fondi propri. Le tre pagine si marcano con "pos-tema-libero" e non ricevono i token chiari. Il nome e' generico e non "operativo" perche' il criterio vero e' "questa pagina gestisce i suoi colori": misurato, senza questa eccezione Gestore File passava da 0 elementi illeggibili a 6, perche' i suoi pannelli prendono --bg-panel. - i token vanno fissati per nome, non solo per "--ds-*": --text-main e --bg-panel sono dichiarati in ":root" come var(--ds-ink) e var(--ds-surface), e una var() dentro una custom property viene risolta subito su :root. Cambiare --ds-ink piu' in basso non cambierebbe niente: per questo qui compaiono entrambi. ========================================================================== */ /* Tutte le shell di gestione sono un
con una classe che le distingue. Bastava dire "tutte tranne quelle marcate", e non elencarle una per una: se domani si aggiunge una pagina nuova, e' gia' dentro. Le tre marcate (cassa, Sala e Tavoli, Gestore File) restano escluse. */ body .pos-content:not(.pos-tema-libero) { /* i ponti del POS, ai valori chiari di grume_pos/css/style.css */ --text-main: #212529; --text-muted: #6c757d; --bg-body: #f8f9fa; --bg-panel: #ffffff; --bg-card: #ffffff; --bg-header: #343a40; --border-color: #dee2e6; --input-bg: #ffffff; --bg-blue-soft: rgba(13, 110, 253, 0.1); /* questi quattro li avevo lasciati fuori, ed e' stato un buco. Il blocco 13 fissa i token CHIARI per le pagine di gestione, ma se ne fissava meta' il risultato e' una pagina mezza chiara e mezza scura. Il caso misurato: Gestione Consegne (dashboard/delivery_dashboard.html) dipinge l'intestazione del biglietto con "background: var(--bg-footer)" e il numero con "color: var(--text-main)". Io fissavo --text-main a #212529 ma non --bg-footer, quindi in tema scuro il testo era scuro sopra il fondo scuro del tema: 1,18:1, e con 20 biglietti in pagina diventavano 60 elementi illeggibili. Fissati tutti e quattro, il biglietto diventa #e9ecef con testo #212529: 12,6:1. Valori chiari presi da static/grume_pos/css/style.css righe 3-32, gli scuri corrispondenti dalle righe 37-50. */ --bg-footer: #e9ecef; --input-border: #ced4da; --card-hover: #f1f3f5; --table-stripe: #f2f2f2; /* --bg-panel-theme non era definito DA NESSUNA PARTE: lo usava una sola pagina, templates/grume_pos/menu/pizza_types.html riga 15, con il ripiego "var(--bg-panel-theme, #2d333b)". Il ripiego e' scuro, quindi le card dei tipi di pizza avevano fondo #2d333b in modalita' chiara con il nome e il sovrapprezzo in #212529: contrasto misurato 1,21:1. Non correggo il ripiego nel template perche' cosi' il difatto resta nascosto in attesa del prossimo riuso. Definisco il token: e' quello che deve valere per tutte le pagine di gestione, e la pagina che lo usa torna chiara senza toccarla. Verificato con una ricerca: questo token compare in un solo punto di tutto il codice. */ --bg-panel-theme: #ffffff; /* i token del nuovo sistema, agli stessi valori chiari di ":root" */ --ds-bg: #f1f5f9; --ds-surface: #ffffff; --ds-surface-2: #f8fafc; --ds-surface-3: #f1f5f9; --ds-ink: #0f172a; --ds-ink-2: #334155; --ds-ink-3: #64748b; --ds-line: #e2e8f0; --ds-line-2: #cbd5e1; /* i token della homepage, per lo stesso motivo */ --hp-bg: #f1f5f9; --hp-card: #ffffff; --hp-ink: #0f172a; --hp-ink-soft: #64748b; --hp-line: #e2e8f0; } /* ========================================================================== 14. UNA SOLA PILA DI FONT PER IL POS ========================================================================== Misurato su 120 pagine: lo stesso testo si disegnava con quattro pile diverse, a seconda di quale regola arrivava per ultima. 4443x Inter, sans-serif 309x "Segoe UI", sans-serif 286x Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto 56x "Playfair Display", serif 16x monospace Le prime tre sono la stessa intenzione con tre parole diverse: due di quelle pile non nominano Inter, quindi su un computer senza Inter il testo cade su Segoe UI o su Roboto e la pagina cambia larghezza e altezze di riga da sola. E' il motivo per cui la stessa tabella su due schermate diverse non ha le stesse colonne. Qui le pile sono dichiarate una volta. "Inter" resta il primo nome perche' e' il font che il POS scarica gia' (l'@import in static/style.css), con Segoe UI e system-ui come ripiego per i computer che non ce l'hanno: se il primo font manca, il testo non cambia famiglia, cambia solo il disegno. Titoli: Playfair Display, come gia' da sempre sugli h1-h4. Due esclusioni, non cosmetiche: - "" resta fuori di proposito. E' il tag con cui Font Awesome porta la propria pila: misurati 146 elementi con "Font Awesome 6 Free". Se entrasse in questa regola, tutte le icone del POS diventerebbero testo. Le icone non cambiano. - code, pre, kbd, samp tornano al monospaziato. Bootstrap ha ".font-monospace { font-family: ... !important }" ed e' l'unica regola font-family con !important in tutto il POS: tiene per compatibilita', ma qui il monospaziato e' dichiarato esplicitamente. ========================================================================== */ :root { --pos-font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --pos-font-display: 'Playfair Display', Georgia, serif; --pos-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } body.pos-scope, body.pos-scope p, body.pos-scope span, body.pos-scope div, body.pos-scope td, body.pos-scope th, body.pos-scope li, body.pos-scope a, body.pos-scope label, body.pos-scope button, body.pos-scope input, body.pos-scope select, body.pos-scope textarea, body.pos-scope small, body.pos-scope strong, body.pos-scope em, body.pos-scope b, body.pos-scope table, body.pos-scope thead, body.pos-scope tbody, body.pos-scope tr, body.pos-scope ul, body.pos-scope ol, body.pos-scope dl, body.pos-scope dt, body.pos-scope dd, body.pos-scope legend, body.pos-scope figcaption, body.pos-scope summary, body.pos-scope option, body.pos-scope optgroup { font-family: var(--pos-font); } body.pos-scope h1, body.pos-scope h2, body.pos-scope h3, body.pos-scope h4 { font-family: var(--pos-font-display); } body.pos-scope h5, body.pos-scope h6 { font-family: var(--pos-font); } body.pos-scope code, body.pos-scope pre, body.pos-scope kbd, body.pos-scope samp { font-family: var(--pos-font-monospace); } /* ========================================================================== 15. LE PAGINE DI GESTIONE NON EROGANO IL TEMA DEL COMPUTER ========================================================================== Il blocco 13 fissa i token, ma non basta: dentro static/style.css c'e' un "@media (prefers-color-scheme: dark)" che scrive i colori a mano, senza variabili. Li ho trovati leggendo cosa vinceva davvero su ogni pagina. Il conflitto vero, misurato: static/style.css:2324 .card, .card-header, .card-body, .modal-content, .list-group-item { background-color:#1e293b !important; color:#f1f5f9 !important } design.css:821 body.pos-scope .text-main-theme { color:#1a2333 !important } Sullo stesso elemento, due regole !important che dicono cose opposte: il titolo dentro la scheda riceve colore scuro (#1a2333) e la scheda ha fondo scuro (#1e293b). Contrasto misurato: 1,08:1. Il titolo non si vede. Nello stesso blocco c'e' anche una riga che non guarda il tema: static/style.css:2318 p, span, div, h1..h6, label, li, a, th, td { color:#f1f5f9 } cioe' "tutto il testo bianco", applicata anche alle pagine di gestione, che hanno il fondo bianco forzato. Da li' il testo bianco su bianco. Qui sotto le stesse superfici tornano ai valori chiari, ma SOLO dentro le pagine di gestione: cassa, Sala e Tavoli e Gestore File restano nel tema. Le regole contrarie portano !important, quindi anche queste devono. Non e' una lista diInclusioni: se domani si aggiunge una pagina di gestione, e' gia' dentro, senza toccare nient'altro. ========================================================================== */ /* le superfici che il blocco scuro colorava di scuro. Le 8 utility di COLORE di Bootstrap vanno escluse una per una: bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark. Dichiarano il fondo con !important e senza l'esclusione la mia regola, che ha specificita' maggiore, vinceva e cancellava il colore: misurato, il titolo della card e il numero delle cifre in clients/orders finivano bianchi su bianco, e la pagina che avevo sistemato prima tornava rotta. Le classi del POS - bg-panel-theme, bg-body-theme, bg-panel, bg-header - NON sono escluse: sono superfici da rendere chiare, e bg-panel-theme da sola compare 167 volte nei template. Un'esclusione per sottostringa li avrebbe esclusi tutti insieme: e' stato il primo tentativo, e ha fatto sparire il fondo bianco da tutte le card di impostazioni, gestione menu e magazzino. Sui figli l'esclusione viene dal genitore, non dal figlio: il .card-body dentro la card blu non ha una classe bg-, quindi senza il combinatore > la mia regola lo rendeva bianco sotto un testo bianco. Percio' i figli si agganciano a .card:not(...) >: se la card e' colorata, il suo corpo non viene toccato. */ body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark), body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) > .card-header, body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) > .card-body, body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) > .card-footer, body .pos-content:not(.pos-tema-libero) .modal-content:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark), body .pos-content:not(.pos-tema-libero) .list-group-item:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) { background-color: #ffffff !important; border-color: #dee2e6 !important; color: #212529 !important; /* Il "color" qui sopra vince sulla card, ma NON sui suoi figli: static/style.css ha una regola globale (p, span, div, h1..h6, label, li, a, th, td { color: var(--text-main) }) che assegna il colore ai singoli elementi, e costoro non ereditano il #212529 messo sulla superficie. Ereditano invece il token --text-main, che static/style.css scrive su OGNI .card al valore chiaro #e9ecef (regola per le card nere del sito pubblico). Risultato misurato sulla pagina Ordini Materie Prime: "Righe Ordine", "Catalogo Ingredienti", i "Note/Luogo/Totale" e le etichette dei form uscivano #e9ecef su bianco, 1,19:1. Ridefinendo il token sulla stessa superficie, i figli tornano scuri senza toccare i colori che hanno un significato (.text-muted, rosso degli errori, verde dei confermati restano quelli). Vale sia in tema chiaro sia scuro, perche' queste pagine sono forzate chiare. */ --text-main: #212529; } /* le righe alternate delle tabelle */ body .pos-content:not(.pos-tema-libero) .table > tbody > tr:nth-of-type(even), body .pos-content:not(.pos-tema-libero) .table > tbody > tr:nth-of-type(odd) { background-color: #ffffff !important; } body .pos-content:not(.pos-tema-libero) .table > thead > tr > th { background-color: #f1f5f9 !important; color: #212529 !important; border-color: #dee2e6 !important; } /* i campi: il blocco scuro li faceva #1e293b con testo bianco */ body .pos-content:not(.pos-tema-libero) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body .pos-content:not(.pos-tema-libero) select, body .pos-content:not(.pos-tema-libero) textarea, body .pos-content:not(.pos-tema-libero) option, body .pos-content:not(.pos-tema-libero) optgroup { background-color: #ffffff !important; color: #212529 !important; border-color: #dee2e6 !important; } body .pos-content:not(.pos-tema-libero) input::placeholder, body .pos-content:not(.pos-tema-libero) textarea::placeholder { color: #6c757d !important; } /* Il ramo scuro di static/style.css mette il testo bianco ovunque. Lo scalzo solo dove esiste davvero, cioe' qui dentro. Le superfici qui sopra valgono in ogni tema, perche' la card nera era un difetto anche in modalita' chiara: misurato #111111 con titoli #1a2333 dentro, contrasto 1,20:1, su Gestione Varianti, Impostazioni, Gestione Menu, Magazzino. */ @media (prefers-color-scheme: dark) { /* static/style.css:2318 scrive "color:#f1f5f9" su p, span, div, h1..h6, label, li, a, th, td: tutto il testo bianco, anche dentro le pagine di gestione che hanno il fondo bianco forzato. Qui il colore torna a --text-main, che per queste pagine vale #212529. SENZA !important di proposito: i colori che hanno un significato (grigio di .text-muted, rosso degli errori, verde dei confermati) sono dichiarati con !important e devono restare quelli. Se mettevo !important anche qui, li avrei schiacciati tutti sullo stesso colore e la pagina avrebbe perso il significato. */ body .pos-content:not(.pos-tema-libero) p, body .pos-content:not(.pos-tema-libero) span, body .pos-content:not(.pos-tema-libero) div, body .pos-content:not(.pos-tema-libero) label, body .pos-content:not(.pos-tema-libero) li, body .pos-content:not(.pos-tema-libero) td, body .pos-content:not(.pos-tema-libero) th, body .pos-content:not(.pos-tema-libero) h1, body .pos-content:not(.pos-tema-libero) h2, body .pos-content:not(.pos-tema-libero) h3, body .pos-content:not(.pos-tema-libero) h4, body .pos-content:not(.pos-tema-libero) h5, body .pos-content:not(.pos-tema-libero) h6 { color: var(--text-main); } /* --- il pie' di pagina --- Il fondo segue il tema (--bg-footer: #e9ecef in chiaro, #151515 in scuro, static/style.css righe 6 e 40) e il testo ereditava il grigio di .text-muted, pensato per le superfici chiare: misurato #5b6472 su #151515, contrasto 3,05:1, e la riga di copyright e' piccola quindi ne chiede 4,5. Compariva identica su tutte le pagine, perche' .text-muted batte .pos-footer (che design.css colorava correttamente) solo per ordine di arrivo. qui il selettore ha il prefisso "body.pos-scope" perche' design.css riga 816 scrive "body.pos-scope .text-muted { color:#5b6472 !important }", che e' (0,2,1): una mia regola ".pos-footer" (0,1,0) perdeva per specificita', non per ordine. Misurato: il footer restava #5b6472 anche con la regola nuova. */ body.pos-scope .pos-footer, body.pos-scope .pos-footer .text-muted { color: #94a3b8 !important; } } /* --- l'icona del bottone della chat --- static/style.css scrive "i { color: var(--text-main, #212529) }": una regola sull'elemento nudo che si applica a TUTTE le icone Font Awesome, perche' quelle sono tag . Misurato: dentro il bottone della chat l'icona risultava #212529 invece di bianca. Il bottone dichiara da se' il proprio fondo (gradiente arancione -> rosa) e il proprio testo bianco, quindi un tema non ha niente da direli. Lo imposto qui, sul suo id, che e' unico: nessuna delle 146 icone del POS resta toccata e la correzione vale in ogni tema, anche per le pagine marcate pos-tema-libero, dove il bottone funziona gia' (misurato li' #ffffff, perche' --text-main e' bianco: il difetto si vedeva solo dove il testo e' scuro, cioe' sulle pagine chiare). Il problema di fondo resta: se un'altra icona sta su un fondo colorato, prende il colore del testo. Me lo segnalo, non lo cambio qui. */ /* --- i colori di Bootstrap dentro i pannelli --- DIFETTO CORRETTO: static/style.css riga 2601 scrive, in un elenco di regole di "irrobustimento": .extras-ui .bg-panel-theme * { background-color: #ffffff !important } Il * prende OGNI discendente del pannello. Quindi non solo i fondi dei contenitori, che era l'intento, ma anche quelli che si dichiarano un colore proprio: i badge e i bottoni colorati dentro le tabelle. Misurato su Impostazione Utenti: i badge "AMMINISTRATORE" (bg-danger) e "STAFF / CASSIERE" (bg-primary) risultavano fondo bianco e testo bianco, contrasto 1,00:1. Invisibili. Su Permessi Extra i due "OK" (bg-success) uguali. E i bottoni secondari erano bianchi su bianco. In 60 pagine, 920 pannelli. Il colore torna qui usando i token di Bootstrap, non scritti a mano: se un giorno il tema cambia, cambia anche questo. */ body .pos-content:not(.pos-tema-libero) .bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } body .pos-content:not(.pos-tema-libero) .bg-secondary { background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } body .pos-content:not(.pos-tema-libero) .bg-success { background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } body .pos-content:not(.pos-tema-libero) .bg-danger { background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } body .pos-content:not(.pos-tema-libero) .bg-warning { background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } body .pos-content:not(.pos-tema-libero) .bg-info { background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } body .pos-content:not(.pos-tema-libero) .bg-light { background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important; } body .pos-content:not(.pos-tema-libero) .bg-dark { background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important; } /* Le varianti di pulsante hanno lo stesso problema, ma per un motivo diverso: non sono utility .bg-*, sono .btn-*, e il loro fondo arriva da una proprieta' personalizzata. La regola con il * la sovrascrive lo stesso, perche' non distingue. In Bootstrap 5.3: .btn-secondary --bs-btn-bg:#6c757d --bs-btn-color:#fff .btn-dark --bs-btn-bg:#212529 --bs-btn-color:#fff entrambe con testo bianco: una volta sbiancate sparivano. Misurato su Stato Stampanti: il bottone "Torna al Dashboard" risultava bianco su bianco, contrasto 1,00:1. Uso var(--bs-btn-bg), quindi il fondo torna a essere quello che il pulsante si dichiara, senza che io scriva un colore. Solo tre varianti: quelle con fondo chiaro. .btn-warning e le altre restano intatte, perche' il POS le personalizza (misurato: .btn-warning ha fondo #fde68a, non quello di Bootstrap, e va bene). */ body .pos-content:not(.pos-tema-libero) .btn-secondary, body .pos-content:not(.pos-tema-libero) .btn-light, body .pos-content:not(.pos-tema-libero) .btn-dark { background-color: var(--bs-btn-bg) !important; } #sc-chat-fab, #sc-chat-fab i, #sc-chat-fab .fas, #sc-chat-fab .far, #sc-chat-fab .fab { color: #ffffff !important; } /* --- i titoli --- /* Il bottone galleggiante della chat si nasconde su Cassa e su Sala e Tavoli, dove la chat si apre gia' in un altro modo: dal menu, e dal pulsante #btn-tables-chat. La regola sta nel foglio inline di layout.html, non qui, perche' Sala e Tavoli NON carica design.css. Misurato: i suoi fogli sono bootstrap.min, all.min, toastify, style.css e mobile.css. Provato prima qui con lo stesso selettore: sulla cassa nascondeva il bottone, sui Tavoli no, e il risultato non era quello dichiarato. */ static/style.css riga 51 colora h1-h4 con l'oro di marca #E0AA3E. Sul bianco delle pagine di gestione quell'oro dava contrasto 2,10:1, e "Impostazioni Generali", "Fidelity Card Attive", i numeri delle cifre erano illeggibili. L'oro resta il colore di accento (bordi, bottoni, icone): qui si scurisce SOLO quando fa da colore di testo, e solo sulle pagine chiare, cosi' sulle schermate scure resta com'era. #8A6A12 e' lo stesso oro scurito: misurato 5,2:1 sul bianco. */ body .pos-content:not(.pos-tema-libero) h1, body .pos-content:not(.pos-tema-libero) h2, body .pos-content:not(.pos-tema-libero) h3, body .pos-content:not(.pos-tema-libero) h4, body .pos-content:not(.pos-tema-libero) h5, body .pos-content:not(.pos-tema-libero) h6 { color: #8a6a12; } /* h5 e h6 dentro le card: static/style.css scrive ".card h5 { color: var(--clr-gold-main) !important }". Quel !important ha specificita' maggiore di ".text-primary !important", quindi su un h5 con classe text-primary vinceva l'oro e non il blu: misurato #e0aa3e su bianco, 2,10:1. Serve quindi un !important anche qui, e con specificita' maggiore. Anche qui la catena di esclusioni: senza, la regola entrava anche nelle card colorate e scuriva l'oro sulle quattro cifre di clients/orders, dove il testo e' bianco su fondo blu. Misurato: #8a6a12 su #0d6efd dava 1,12:1. Le card colorate tengono il bianco. Qui h1-h6 e non solo h5-h6: static/style.css righe 915-917 scrive .card h1, .card h2, ... .card h6 { color:var(--clr-gold-main) !important }, quindi h1-h4 restavano in oro dentro le card. Fuori dalle card la regola sotto, senza !important, basta: li vince perche' ha piu' classi nel selettore. */ body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) h1,body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) h2,body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) h3,body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) h4,body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) h5,body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) h6 { color: #8a6a12 !important; } /* static/style.css righe 920-922 scrive ".card .text-muted, .card small { color:#AAA !important }". Su card bianca #AAA dava 2,32:1, e design.css copriva solo .text-muted con #5b6472: a "small" non arrivava nessuna correzione, perche' nessuna regola lo contrastava. Qui diventano entrambi il grigio del POS, #5b6472, che sul bianco e' 5,3:1. */ body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) .text-muted, body .pos-content:not(.pos-tema-libero) .card:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.bg-light):not(.bg-dark) small { color: #5b6472 !important; } /* i titoli dentro le schede: la regola di design.css li faceva scuri perche' le carte sono chiare. Ora le carte sono davvero chiare, e quel colore va bene: non si tocca. */