/* Campo di luce: la pelle della piattaforma. Una luce morbida sul fondo e le cose disegnate a filo, trasparenti: la stessa luce passa attraverso le schede. Niente ombre, niente pieni: il pulsante principale e' un filo piu' chiaro con un velo appena acceso, non una tinta piena. Colori neutri -- bianco, nero, grigi -- finche' non si sceglie un accento: basta cambiare i token qui sotto. DUE TAVOLOZZE. Lo scuro e' quella di serie (:root); il chiaro arriva con data-tema="light" sull', che ogni pagina mette in leggendo `qr_tema` prima del primo disegno. L'interruttore sta accanto alla lingua (i18n.js). Qui NON c'e' impaginazione: solo colori, fili e la luce del fondo. Le pagine restano padrone del proprio layout. I NOMI dei token sono quelli storici (--cyan, --violet, --grad-...): le pagine li usano in duecento punti. Il glossario: --cyan l'ACCENTO: oggi l'inchiostro stesso (bianco sullo scuro) --grad-* il velo dei pulsanti principali, non piu' una tinta piena --su-accento la scritta sui pulsanti principali: l'inchiostro --ombra-* non piu' ombre: il filo che disegna il pulsante --opaco il fondo PIENO di tendine e finestre, che stanno sopra al contenuto e trasparenti non si leggerebbero Chi riempie qualcosa di --cyan deve scriverci sopra in --bg, non in --su-accento: sarebbe bianco su bianco. */ /* ===================================================== lo scuro (di serie) */ :root { /* --- fondali e testo --- */ --bg: #05070c; /* il fondo: nero appena bluastro */ --surface: rgba(255, 255, 255, .025); /* le schede: un velo, la luce passa */ --surface-2: rgba(255, 255, 255, .05);/* campi e chip: un velo in piu' */ --ink: #f2f3f5; --ink-tenue: #b9bec5; /* testo secondario */ --muted: #858b93; --line: rgba(255, 255, 255, .14); /* il filo delle schede */ --line-bright: rgba(255, 255, 255, .2); /* il filo dei comandi */ --placeholder: #6f757d; /* --- componenti RGB, per le velature --- */ --cyan-rgb: 242, 243, 245; --violet-rgb: 185, 190, 197; --success-rgb: 127, 179, 154; --danger-rgb: 224, 122, 106; --ombra-rgb: 0, 0, 0; --lume-rgb: 255, 255, 255; /* Fondo dei campi quando hanno il fuoco. */ --campo-fuoco: rgba(255, 255, 255, .07); /* --- accenti --- */ --cyan: #f2f3f5; --cyan-chiaro: #ffffff; --violet: #b9bec5; --success: #7fb39a; /* verde spento: solo semantico */ --danger: #e07a6a; /* rosso spento: solo semantico */ /* La scritta sui pulsanti principali: l'inchiostro, sul loro velo. */ --su-accento: #f2f3f5; --su-successo: #f2f3f5; /* --- i pulsanti principali: un velo, disegnati dal filo --- */ --grad-accento: rgba(255, 255, 255, .07); --grad-successo: rgba(255, 255, 255, .07); --grad-marchio: #f2f3f5; --titolo-da: #f2f3f5; --titolo-a: #f2f3f5; /* --- velature: fondi tenui degli stati --- */ --velo-cyan: rgba(255, 255, 255, .07); --velo-violet: rgba(255, 255, 255, .05); --velo-success: rgba(127, 179, 154, .12); --velo-danger: rgba(224, 122, 106, .10); /* --- bordi --- */ --bordo-cyan: rgba(255, 255, 255, .38); --bordo-violet: rgba(255, 255, 255, .22); --bordo-success: rgba(127, 179, 154, .42); --bordo-danger: rgba(224, 122, 106, .45); /* --- niente ombre: i pulsanti principali li disegna un filo piu' chiaro --- */ --ombra: none; --ombra-accento: inset 0 0 0 1px rgba(255, 255, 255, .38); --ombra-successo: inset 0 0 0 1px rgba(255, 255, 255, .38); --alone-cyan: 0 0 0 1px rgba(255, 255, 255, .38); --glow-cyan: 0 0 0 3px rgba(255, 255, 255, .12); /* L'unica ombra rimasta: sotto a quello che sta SOPRA la pagina. */ --ombra-alta: 0 18px 50px rgba(0, 0, 0, .55); /* Il «Pro»: un velo anche lui. */ --grad-violet: rgba(255, 255, 255, .07); --su-violet: #f2f3f5; --testo-successo: #a9d5bf; --testo-pericolo: #f3b3a8; --velo-modale: rgba(0, 0, 0, .62); --opaco: #0d1016; /* tendine e finestre */ --vetro: rgba(5, 7, 12, .62); /* le barre fisse, smerigliate */ /* --- la luce del fondo: il colore e quanto e' forte --- */ --luce: 120, 138, 170; --forza: .22; /* I titoli nel carattere del testo: il graziato da menu' stampato e' uscito col campo di luce. */ --display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color-scheme: dark; } /* ========================================================= il chiaro */ :root[data-tema="light"] { --bg: #f5f6f8; --surface: rgba(255, 255, 255, .45); --surface-2: rgba(15, 20, 30, .035); --ink: #15171b; --ink-tenue: #454a52; --muted: #6f757e; --line: rgba(15, 25, 45, .14); --line-bright: rgba(15, 25, 45, .22); --placeholder: #9a9fa6; --cyan-rgb: 21, 23, 27; --violet-rgb: 69, 74, 82; --success-rgb: 47, 107, 79; --danger-rgb: 161, 51, 34; --ombra-rgb: 15, 20, 30; --lume-rgb: 255, 255, 255; --campo-fuoco: rgba(255, 255, 255, .85); --cyan: #15171b; --cyan-chiaro: #000000; --violet: #454a52; --success: #2f6b4f; --danger: #a13322; --su-accento: #15171b; --su-successo: #15171b; --grad-accento: rgba(15, 20, 30, .05); --grad-successo: rgba(15, 20, 30, .05); --grad-marchio: #15171b; --titolo-da: #15171b; --titolo-a: #15171b; --velo-cyan: rgba(15, 20, 30, .06); --velo-violet: rgba(15, 20, 30, .045); --velo-success: rgba(47, 107, 79, .10); --velo-danger: rgba(161, 51, 34, .08); --bordo-cyan: rgba(15, 25, 45, .4); --bordo-violet: rgba(15, 25, 45, .24); --bordo-success: rgba(47, 107, 79, .35); --bordo-danger: rgba(161, 51, 34, .38); --ombra-accento: inset 0 0 0 1px rgba(15, 25, 45, .4); --ombra-successo: inset 0 0 0 1px rgba(15, 25, 45, .4); --alone-cyan: 0 0 0 1px rgba(15, 25, 45, .4); --glow-cyan: 0 0 0 3px rgba(15, 20, 30, .08); --ombra-alta: 0 18px 50px rgba(15, 20, 30, .16); --grad-violet: rgba(15, 20, 30, .05); --su-violet: #15171b; --testo-successo: #24523c; --testo-pericolo: #7c2718; --velo-modale: rgba(15, 20, 30, .38); --opaco: #ffffff; --vetro: rgba(245, 246, 248, .7); --luce: 60, 80, 120; --forza: .10; color-scheme: light; } /* ======================================================= la luce del fondo Sul , con due selettori: le pagine scrivono «body { background: var(--bg) }» nel loro