@import 'tailwindcss'; /* * I TRE TEMI * * Ogni tema ridefinisce le stesse dieci variabili, e le pagine non nominano * mai un colore: dicono bg-fondo, text-tenue, bg-superficie. Cosi' un tema * nuovo sono dieci righe qui e nient'altro, invece di una caccia a zinc-900 * in trenta file. * * L'accento e' campionato dal meeple del logo (#42b649, tinta 124): l'emerald * di Tailwind ha tinta 160 e tira al ciano, accanto al logo si vedeva che * erano due verdi diversi. * * "superficie" e' la carta su cui stanno schede e tabelle, "inchiostro" il * testo che ci sta sopra: restano chiari in tutti e tre i temi, perche' le * copertine dei giochi hanno bisogno di un supporto neutro. */ @theme { --color-fondo: var(--t-fondo); --color-barra: var(--t-barra); --color-testata: var(--t-testata); /* Campi di ricerca e bottoni non scelti: un gradino sopra la banda che li ospita. */ --color-campo: var(--t-campo); --color-bordo: var(--t-bordo); --color-testo: var(--t-testo); --color-tenue: var(--t-tenue); --color-superficie: var(--t-superficie); --color-superficie-alt: var(--t-superficie-alt); --color-superficie-hover: var(--t-superficie-hover); --color-inchiostro: var(--t-inchiostro); --color-inchiostro-tenue: var(--t-inchiostro-tenue); --color-accento: var(--t-accento); --color-accento-scuro: var(--t-accento-scuro); --color-accento-velo: var(--t-accento-velo); --color-su-accento: var(--t-su-accento); /* Il verde quando fa da TESTO sul fondo: chiaro sui temi scuri, scuro su Giorno. */ --color-accento-testo: var(--t-accento-testo); /* I due segnali che non dipendono dal tema ma dal fondo su cui cadono. */ --color-oro: var(--t-oro); --color-rosso: var(--t-rosso); } /* A · Feltro, il predefinito: il panno verde di un tavolo da gioco. */ :root, :root[data-tema='feltro'] { /* * Il fondo e' grigio scuro, non verde: quando lo era, la banda del titolo * e le pillole verdi ci si scioglievano dentro. Con un fondo neutro il * verde resta il colore di quello che conta, invece di essere ovunque. */ --t-fondo: #1a1c1b; --t-barra: #0b1712; /* La banda del titolo sta un gradino sopra il fondo: senza stacco i filtri si confondono con i giochi che stanno sotto. Il gradino deve vedersi anche quando il pezzo e' piccolo: sulle pillole e sul piede delle schede video, il verde di prima spariva dentro il grigio del fondo. */ --t-testata: #22402e; --t-campo: #2a4d38; /* Il bordo deve stare sopra la testata, non sotto: era piu' scuro della superficie che delimita, e i contorni non si vedevano. */ --t-bordo: #2f5941; --t-testo: #f2f7f4; --t-tenue: #9db3a7; --t-superficie: #f8f7f2; --t-superficie-alt: #f2f1ea; --t-superficie-hover: #e4e2d8; --t-inchiostro: #1c2a22; --t-inchiostro-tenue: #5c6a61; --t-accento: #42b649; --t-accento-scuro: #256e36; --t-accento-velo: #ddf0dc; --t-su-accento: #08130d; --t-accento-testo: #5ecb64; --t-oro: #fbbf24; --t-rosso: #fb7185; } /* B · Notte verde: il grigio di prima, con il verde al posto del bianco. */ :root[data-tema='notte'] { --t-fondo: #131316; --t-barra: #1a1a1d; --t-testata: #1f1f23; --t-campo: #2c2c32; --t-bordo: #2e2e33; --t-testo: #fafafa; --t-tenue: #a1a1aa; --t-superficie: #fbfbfa; --t-superficie-alt: #f4f4f2; --t-superficie-hover: #e6e6e3; --t-inchiostro: #1c1c1f; --t-inchiostro-tenue: #5c5c63; --t-accento: #42b649; --t-accento-scuro: #256e36; --t-accento-velo: #ddf0dc; --t-su-accento: #0b1a0d; --t-accento-testo: #5ecb64; --t-oro: #fbbf24; --t-rosso: #fb7185; } /* C · Giorno: pagina chiara, scuro solo la barra in alto. */ :root[data-tema='giorno'] { --t-fondo: #f4f3ee; --t-barra: #14301f; --t-testata: #e8e6dd; --t-campo: #ffffff; --t-bordo: #dbd8cd; --t-testo: #1c2a22; /* Piu' scuro che nei temi scuri: qui il tenue sta su beige, non su nero. */ --t-tenue: #566259; --t-superficie: #ffffff; --t-superficie-alt: #faf9f5; --t-superficie-hover: #eae7dc; --t-inchiostro: #1c2a22; --t-inchiostro-tenue: #5a6760; --t-accento: #42b649; --t-accento-scuro: #256e36; --t-accento-velo: #ddf0dc; --t-su-accento: #07160c; /* Il verde su fondo chiaro deve scurire, o resta un'insegna al neon. */ --t-accento-testo: #1f6b30; --t-oro: #b45309; --t-rosso: #be123c; } /* * Nel tema chiaro la barra in alto resta scura: quello che ci sta dentro non * puo' usare --t-testo, che li' e' nero su nero. La barra si porta dietro i * suoi due colori, uguali per tutti i temi. */ :root[data-tema='giorno'] .su-barra { --t-testo: #f3f8f4; --t-tenue: #b3c7ba; /* * Anche i fondi, non solo il testo: dentro la barra scura un hover che * usa --t-fondo prenderebbe il crema della pagina, e la voce sotto il * mouse sparirebbe invece di accendersi. */ --t-fondo: #1d422c; --t-testata: #1d422c; --t-bordo: #2a5a3c; --t-campo: #275c3c; --t-accento-testo: #5ecb64; } /* * Baloo 2 serve solo al nome del sito in alto. Un font per una riga sola: * swap perche' finche' non arriva il nome si legge lo stesso, e il peso 700 * e' l'unico che usiamo. */ @font-face { font-family: 'Baloo 2'; src: url('/font/baloo-2.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } .marchio { font-family: 'Baloo 2', ui-sans-serif, system-ui, sans-serif; font-weight: 700; } /* * Niente rimbalzo elastico a fine pagina, ne' sopra ne' sotto. * * Il fondo e' quello della barra, non quello della pagina: e' il colore che * si vede sotto l'orologio nella versione salvata sulla home, e nell'attimo * prima che la pagina sia disegnata. Con il bianco di serie, li' restava una * fascia chiara sopra l'intestazione scura. */ html { overscroll-behavior-y: none; background: var(--t-barra); /* Niente zoom al doppio tocco: la pagina deve rispondere come un'app. */ touch-action: manipulation; } /* * Su iPhone, toccare un campo con il testo sotto i 16px fa ingrandire la * pagina, e quando la tastiera si chiude l'ingrandimento resta. E' l'unica * regola che Safari ascolta: user-scalable=no nel viewport lo ignora da * anni. Solo su schermi touch, cosi' da mouse i campi restano come sono. */ @media (pointer: coarse) { input, select, textarea { font-size: 16px; } } /* * ZONA SICURA * * Salvata nella home di un iPhone, la pagina occupa tutto lo schermo, orologio * e tacca comprese. Lo sfondo della barra ci arriva sotto (e' quello che * vogliamo), il testo no: senza questo, il nome del sito finisce sotto l'ora. * Nel browser normale gli inset valgono zero e non cambia niente. * * Anche i lati: in orizzontale la tacca mangia un bordo, e un menu che comincia * a filo scompare a meta'. * * Sono @utility e non classi normali per un motivo pratico: una regola * scritta fuori dai layer di Tailwind batte px-3 invece di sommarcisi, e il * padding laterale sparirebbe su tutti gli schermi. Cosi' invece il margine * di sicurezza si aggiunge a quello che c'e' gia'. */ @utility tetto-sicuro { padding-top: env(safe-area-inset-top, 0px); } @utility lati-sicuri { padding-left: calc(var(--spacing) * 3 + env(safe-area-inset-left, 0px)); padding-right: calc(var(--spacing) * 3 + env(safe-area-inset-right, 0px)); } /* In fondo c'e' la barra gestuale: l'ultima riga di una lista non ci va sotto. */ @utility fondo-sicuro { padding-bottom: calc(var(--spacing) * 4 + env(safe-area-inset-bottom, 0px)); } /* * Anello di fuoco visibile su tutto quello che si può raggiungere da tastiera. * Scritto qui una volta invece che su ogni bottone: è una regola del sito, * non una decisione di ciascun componente. */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, label:has(input:focus-visible) { outline: 2px solid var(--color-accento); outline-offset: 2px; border-radius: 0.5rem; } /* * I cursori dei filtri. Lo stile sta qui e non nei componenti perche' sono * due, uno singolo e uno a intervallo, e affiancati devono essere la stessa * cosa: quando ognuno si disegnava da se', il primo aveva il pallino bianco * di sistema e il secondo il pallino verde nostro. * * La traccia la disegna un div sotto, questi input sono trasparenti sopra: * e' l'unico modo di avere due pallini sulla stessa barra, e tenerlo uguale * anche dove i pallini sono uno solo evita due disegni diversi. */ .cursore { appearance: none; background: transparent; pointer-events: none; } .cursore::-webkit-slider-thumb { appearance: none; pointer-events: auto; height: 1rem; width: 1rem; border-radius: 9999px; background: var(--color-accento); border: 2px solid var(--color-campo); cursor: pointer; } .cursore::-moz-range-thumb { pointer-events: auto; height: 1rem; width: 1rem; border-radius: 9999px; background: var(--color-accento); border: 2px solid var(--color-campo); cursor: pointer; } .cursore:focus-visible::-webkit-slider-thumb, .cursore:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-accento); outline-offset: 2px; } /* I bottoni si abbassano di un pelo alla pressione: dice che il click è arrivato. */ button:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { button:active { transform: none; } } /* * I campi di ricerca hanno gia' una crocetta loro in WebKit, che si somma a * quella che disegniamo noi. Ne teniamo una sola, la nostra, che c'e' su * tutti i browser. */ input[type='search']::-webkit-search-cancel-button { appearance: none; } /* * La tendina di una