/* =========================================================================== Piccione. Foglio di stile della dashboard. La lingua visiva e' quella di Guild Keeper, portata qui dal suo `tokens.css`: fondo quasi nero, oro caldo come unico accento, inchiostro crema, angoli vivi e moltissimi filetti sottili. I titoli sono in graziato (Georgia), il testo dell'interfaccia in system-ui, i valori macchina in Consolas: tre ruoli, come la'. Niente font da scaricare: sono tutti gia' nel sistema. Le superfici: carta il fondo della pagina (--bg di Guild Keeper) rilievo cio' che galleggia sopra (--card) incavo il fondo dei campi (--well-1) tenue blocchi minori e passaggio (--surface-2) I colori sono misurati. Quelli di Guild Keeper passano quasi tutti cosi' come sono: l'unico ritocco e' `--text-muted`, che sulle superfici sollevate si fermava a 3,79:1. Il tema chiaro non esiste la', ed e' derivato qui nello stesso spirito: carta calda, oro scuro. =========================================================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* --- Aggancio ai token di Guild Keeper ------------------------------------- */ /* I colori non stanno piu' qui: arrivano da `tokens.css`, copiato identico. Questi sono solo i nomi con cui Piccione li chiama, cosi' le sue regole non vanno riscritte una per una. Cambiare la palette la' cambia questo pannello. `--ok`, `--danger` e `--warn` non vengono rinominati: sono gia' i suoi. */ :root { --carta: var(--bg); --rilievo: var(--card); --incavo: var(--well-1); --tenue: var(--surface-2); --text-primary: var(--ink); --text-secondary: var(--text-2); /* Unico valore non suo: il suo --muted (#8a869c) sulle superfici sollevate scende a 3,79:1, sotto la soglia. Misurato, non supposto. */ --text-muted: #9894aa; /* ── L'ACCENTO, IN DUE GRADINI DELLA STESSA FAMIGLIA ────────────────── hsl(205, 43%) tutti e due: cambia la LUCE, non la tinta e non la saturazione. Non sono due azzurri, e' un azzurro con due mestieri — e i due mestieri hanno vincoli OPPOSTI: - quello CHIARO (L 73%) e' quello che si SCRIVE e si DISEGNA: il testo d'accento al 70%, gli anelli del fuoco, le frecce, il chevron del profilo. Deve reggere 4,5:1 contro ogni tinta che il cielo mette sotto, e al 70% e' un vincolo stretto; - quello SCURO (L 59%) e' quello con cui si RIEMPIE: il pulsante principale, la riga scelta, la casella accesa del tema. Sopra ci va una scritta scura, quindi piu' scuro e' PIU' contrastato. Prima erano lo stesso valore, e quel valore doveva soddisfare il vincolo del testo: un fondo se lo portava addosso senza averne bisogno. E' la stessa distinzione che il tema chiaro fa gia' da sempre poco piu' sotto (`--selezione`), dove riusare il colore del testo come fondo aveva fatto una riga scelta NERA in una pagina chiara. ⚠️ E il gradino chiaro non si puo' abbassare. Prima era #6fc5e7: stessa luce, ma 71% di saturazione, ed era troppo acceso. A poter scendere e' la SATURAZIONE, non la luce — misurato contro la rete del cielo, come testo al 70%: #6b9fc4 fa 3,34:1 e #85b3d3 fa 4,07:1, tutti e due sotto soglia; questo fa 4,59:1, cioe' il filo di margine che aveva anche quello di prima (4,56:1). */ --gold: #9bbfd8; --gold2: #b6d0e2; --gold-rgb: 155, 191, 216; --gold2-rgb: 182, 208, 226; /* L'accento AL 70%, come chiesto. Si mescola col fondo su cui sta, quindi il contrasto va misurato dopo la mescolanza: e' quello che si vede. */ --accento: rgba(var(--gold-rgb), 0.7); --accento-forte: rgba(var(--gold2-rgb), 0.7); --accento-rgb: var(--gold-rgb); /* Opaco, e ci sta sopra del testo: e' il gradino SCURO. Un riempimento al 70% si schiara col fondo e il testo sopra scende sotto la soglia (bianco sull'accento chiaro al 70% misurava 4,02:1). */ --accento-pieno: #6b9fc4; /* ⚠️ E quello che si DISEGNA non e' quello che si riempie. Anelli del fuoco, frecce, chevron: nessuno di loro porta del testo addosso, quindi nessuno ha bisogno di essere scuro — e scurendoli si perde proprio la cosa per cui esistono, farsi vedere. Prima pescavano da `--accento-pieno` perche' i due valori COINCIDEVANO: una coincidenza, non una scelta, ed e' bastato separare i gradini per accorgersene. */ --accento-segno: var(--gold); /* Il nero della pagina, non uno suo: il testo sul pieno e' la carta. */ --su-accento: #0d0d0f; /* La riga scelta ha i suoi colori, separati dall'accento. Nello scuro il riempimento E' l'accento pieno: su una pagina scura una riga azzurra accesa si vede da lontano e non serve altro. */ --selezione: var(--accento-pieno); --su-selezione: #0d0d0f; --su-selezione-tenue: #0d0d0f; --pericolo: var(--danger); --pericolo-rgb: var(--danger-rgb); --avviso: var(--warn); --filo: var(--line); --filo-forte: rgba(223, 228, 242, 0.30); --fondo-pulsante: rgba(0, 0, 0, 0.5); --discord: #5865f2; --discord-hover: #4752c4; /* ⚠️ Nello scuro un'ombra nera sotto un pannello quasi nero non si vede: il fondo non puo' diventare piu' scuro di cosi'. Quello che stacca e' il filo di luce in ALTO, dove il pannello prende la luce dell'ambiente. Non e' un bordo: e' un'ombra interna su un lato solo, e non chiude il riquadro. */ --ombra-pannello: 0 18px 44px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.055); --barra: #2b2b30; --barra-viva: #3d3d44; --alone: #191a2e; --opacita-spiegazione: 0.5; /* Da qui parte la dissolvenza del testo di spiegazione. Dimezzando l'inchiostro crema si arrivava a 4,11:1, sotto la soglia; partendo dal bianco pieno la stessa opacita' del 50% misura 5,16:1. L'opacita' chiesta resta quella: cambia solo il colore da cui si parte. */ --ink-spiegazione: #ffffff; --bg-wallpaper-pc: url('/wallpaper/piccione-pc-dark.webp'); --bg-wallpaper-mobile: url('/wallpaper/piccione-smartphone-dark.webp'); /* Il ritratto di Zio Piccio, e il suffisso nomina il MODO in cui si usa, non com'e' fatta l'immagine — stessa convenzione degli sfondi qui sopra. Le due versioni sono INVERTITE apposta: `-dark` ha il fondo CHIARO e `-light` il fondo NERO. Sembra un errore e non lo e': il ritratto e' un disco di 38-64px dentro una barra, e dentro una barra scura un disco scuro sparisce. Il fondo del ritratto fa da contrasto al pannello, non da tinta in armonia con lui. */ --ritratto-piccio: url('/wallpaper/zio-piccio-dark.webp'); /* Una faccia sola, variabile. I ruoli non sono piu' caratteri diversi ma posizioni diverse sugli assi della stessa faccia. */ /* Due nomi, e l'ordine conta. Google Sans Flex viene prima e vince su tutto il latino; per una lettera cirillica non ha il glifo — quel sottoinsieme non esiste proprio — e si passa a Onest, che per `unicode-range` esiste solo lì. Prima ci ricadeva `system-ui`, cioè una faccia diversa da quella di tutto il resto: si vedeva nelle righe che mescolano le due scritture. Il perché e i file stanno in `public/font/caratteri.css`. */ --faccia: "Google Sans Flex", "Onest", system-ui, "Segoe UI", Roboto, sans-serif; --ui: var(--faccia); --display: var(--faccia); --mono: var(--faccia); /* La scala in pixel di Guild Keeper, rialzata: `tokens.css` resta intatto, si sovrascrive qui perche' e' caricato prima. */ --fs-display: 34px; --fs-xl: 28px; /* Di questa vecchia famiglia di misure ne restava viva una sola: le altre cinque non le usava nessuno. E `--fs-ui` non serve piu' a noi, serve al foglio copiato: `.btn` e `.field`, la' dentro, la leggono. Il loro valore e' 13px, ma style.css si carica dopo tokens.css, quindi vince questo — e tutti i pulsanti della pagina scrivono a 15px per causa sua, senza che fosse mai stata una decisione. Adesso lo e', e il numero lo prende dalla scala invece di essere scritto una seconda volta qui. */ --fs-ui: var(--t4); --nav-height: 72px; /* Il rientro laterale della pagina, in un posto solo. Barra, contenuto e pie' devono cominciare sulla stessa verticale: quando ognuno se lo dichiarava per conto suo hanno smesso di farlo senza che se ne accorgesse nessuno. */ --margine-pagina: clamp(14px, 2.4vw, 44px); /* Era 0, ed e' il motivo per cui le pillole ADMIN/OWNER, i campi, la testata del pannello profilo e le voci della barra avevano gli angoli vivi mentre tutto il resto era arrotondato: nessuno lo aveva scelto, era rimasto li'. Contenitori e pulsanti non lo usano (hanno i loro), quindi questo tocca solo le cose piccole, che e' esattamente dove serviva. */ --radius: var(--raggio-voce); /* La molla delle animazioni. Era `cubic-bezier(0.34, 1.56, 0.64, 1)`, che passa oltre il valore finale del 9,8%: un rimbalzo da giocattolo in mezzo a una pagina che altrove si muove piano. Questa passa oltre del 2,0% — misurato, non stimato — e sta in un token solo perche' il rimbalzo dev'essere lo stesso dappertutto. */ --molla: cubic-bezier(0.25, 1.25, 0.4, 1); /* --- LA SCALA DEGLI SPAZI -------------------------------------------- Trentaquattro riempimenti diversi e quattordici distanze, contati sulla pagina vera: 11px 14px, 7px 11px, 9px 11px, 13px 14px... numeri a caso, uno per componente. Passo da 8, mezzo passo da 4. E' quello che raccomanda designsystems.com, che sconsiglia proprio il 4 come passo principale: «ti apre a troppe variabili». Il 2 c'e' solo per i distacchi minimi fra due icone. Chi sta piu' di 3px lontano da un gradino resta com'e': se una misura e' cosi' fuori scala di solito ha una ragione, e forzarla sposterebbe le cose invece di ordinarle. */ --s0: 2px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; /* --- LA SCALA DEL TESTO --------------------------------------------- Quarantotto misure diverse dichiarate, in DUE unita': 34 in `rem` e 14 in `px`. E la radice sta a 19px, non a 16, quindi ogni `rem` cadeva su un pixel rotto: 0,78rem faceva 14,82px e 0,85rem 16,15px. Misure che nessuno aveva scelto, a meta' pixel, che il browser deve comunque arrotondare per disegnarle. Nove gradini, in pixel interi. In cima sono piu' fitti apposta: lo stesso titolo cambia misura fra telefono e schermo largo, e due gradini troppo distanti gli appiattirebbero la rampa. C'e' un controllo che lo verifica: con sette gradini `.section-title` passava da 22,8/26,6/33,2 a 20/28/28, cioe' due misure su tre uguali. Le misure del testo non devono stare sulla griglia da 4: quella vale per le altezze di riga e per gli spazi. */ --t1: 11px; --t2: 12px; --t3: 13px; --t4: 15px; --t5: 17px; --t6: 20px; --t7: 24px; --t8: 28px; --t9: 32px; /* ─── LA SCALA DEI PULSANTI ─────────────────────────────────────────── Undici coppie di colori diverse, contate sulla pagina vera: la stessa idea di «pulsante tinto» era scritta cinque volte con cinque ricette (14% sul pieno, 12% sul trasparente, 22%, 10%, 30%) e su tre basi diverse. Nessuno lo aveva deciso: si erano accumulate. Adesso ci sono TRE livelli, che e' quello che dicono di fare i sistemi di progetto seri (Carbon, Material, Cieden): pieno per l'azione principale, tinto per tutto il resto, piano per quello che non deve nemmeno sembrare un pulsante. Una ricetta per livello, non una per pulsante. Il rosso non e' un quarto livello: e' il livello tinto con un'altra tinta, con le stesse identiche percentuali. Il pieno va usato UNA volta per schermata. E il colore non lavora mai da solo: ELIMINA ha il cestino, «Sostienici» ha il cuore, e il tema ha tre simboli — perche' chi non distingue i colori deve poterli comunque distinguere. */ --pieno: var(--accento-pieno); --su-pieno: var(--su-accento); /* ⚠️ Il livello tinto si mescola sopra il RILIEVO, non sopra il trasparente: viene fuori un blocco OPACO, che non lascia passare la pagina e quindi non si accende sopra al cielo. Con la velatura, fondo e scritta erano la stessa tinta a due intensita' — e la scritta era la piu' accesa delle due, per farsi vedere. Adesso il fondo e' un grigio-ardesia e la scritta e' quasi bianca: due famiglie, non una. Le percentuali salgono (20/32 -> 30/44) perche' mescolando con una base opaca invece che col nulla il colore rende meno. La ricetta resta UNA, con due tinte: il rosso non e' un quarto livello, e' questo livello con l'altra tinta e le stesse identiche percentuali. C'e' una prova che confronta i due numeri. */ --tinto: color-mix(in srgb, var(--accento-pieno) 30%, var(--rilievo)); --tinto-sopra: color-mix(in srgb, var(--accento-pieno) 44%, var(--rilievo)); --su-tinto: #e4ebf2; --tinto-rosso: color-mix(in srgb, var(--pericolo) 30%, var(--rilievo)); --tinto-rosso-sopra: color-mix(in srgb, var(--pericolo) 44%, var(--rilievo)); /* ⚠️ La scritta del livello rosso è quella di TUTTI gli altri pulsanti, non una versione chiara del rosso. Un fondo rosso con sopra una scritta rossa è la stessa forma che il livello tinto ha appena smesso di avere con l'azzurro: due intensità della stessa tinta, con la più accesa delle due nella scritta per farsi vedere. Il rosso lo portano il FONDO e la forma del CESTINO — che è anche il solo segnale che arriva a chi i colori non li distingue. Vale nei due temi: qui è il quasi-bianco freddo, nel chiaro il blu scuro, sempre lo stesso di «Tutorial» e «Modifica». */ --su-tinto-rosso: var(--su-tinto); /* I contenitori: velati, sfocati, e con un'ombra sotto. Col fondo che cambia colore tutto il giorno non bastava piu' il solo colore a staccarli — al tramonto carta e cielo si somigliano. L'ombra e' quella che li stacca sempre, perche' non dipende dal colore di sotto ma dalla luce. La sfocatura fa il resto: dietro al pannello il cielo e la pioggia si vedono, ma sfocati, e questo dice «vetro». L'opacita' e' larga: misurata, i testi reggono anche a pannello del tutto trasparente (4,93:1 nel chiaro), quindi 86% e' comodissimo. */ /* Piu' leggera di prima: sotto adesso c'e' il cielo sgranato, e con la carta all'86% dei blocchi non si vedeva quasi niente. La misura dice che i testi reggono anche a pannello del tutto trasparente (4,93:1), quindi il 62% e' ancora molto largo. */ --pannello-alfa: 62%; --sfocatura-pannello: blur(16px) saturate(1.1); /* Il colore dei comandi della barra: la stessa famiglia di «Entra nella dashboard» (#0b3241) ma piu' chiara, perche' li' e' un pulsante grande e isolato mentre questi stanno in fila. Prima erano azzurro chiaro su una pagina azzurra e non si vedevano proprio. Bianco sopra: 8,39:1. */ --pulsante-barra: #175468; --su-pulsante-barra: #ffffff; /* Massima rotondita': i pulsanti sono pastiglie piene. Il valore enorme si taglia da solo a meta' dell'altezza, quindi la curva e' sempre la piu' grande possibile su qualunque altezza. ⚠️ Qui dentro e' finito anche `--radius-full`, che era questo stesso 9999px con un altro nome: l'ultimo dei quindici alias del «ponte» verso i componenti arrivati da main. Gli altri quattordici non li leggeva piu' nessuno da b96e753, che ha portato via i loro consumatori. Due nomi per una misura sola e' il modo in cui le due meta' divergono: le caselle del tema ne usavano uno e il pulsante del profilo l'altro, nella stessa barra. */ --raggio-pulsante: 9999px; /* Fisso: su una scatola alta il raggio dei pulsanti diventerebbe un ovale. */ --raggio-contenitore: 12px; --raggio-voce: 6px; --raggio-riga: 10px; /* I filetti che dividono sono barre vere, non bordi: un bordo non si puo' arrotondare da solo. Vedi `.step-header::after`. ⚠️ Due pesi, e non sono intercambiabili. Il grosso divide un TITOLO dal suo contenuto, il sottile divide due pezzi di contenuto fra loro. Li avevo scambiati nel registro — intestazione sottile e righe grosse — e la tabella si leggeva come sette blocchi separati sotto a un cappello attaccato al primo. Il grosso e' anche piu' contrastato: se no due pesi cosi' vicini non si distinguono. ⚠️ E `--barra-titolo` stava scritto DUE VOLTE, qui e otto righe piu' giu', con lo stesso valore: il commento sui due pesi e' arrivato dopo, si e' portato dietro la sua coppia, e la dichiarazione di prima e' rimasta sopra. Non si vedeva, e non si sarebbe visto finche' qualcuno non ne cambiava una sola. */ --barra-riga: 2px; --barra-titolo: 2.5px; --passo: 0.1s ease; /* Di questa famiglia restano due nomi soli, e restano perche' sono gli unici spazi che cambiano con lo schermo. Gli altri erano un secondo nome per numeri che la scala aveva gia': --sp-1..--sp-6 del foglio copiato valgono 4, 8, 12, 16, 24, 32, cioe' sei gradini di --s. Due vocabolari per gli stessi pixel, e chi scriveva una regola nuova ne pescava uno a caso. */ --sp-largo: var(--s7); /* Il respiro fra sezioni sta sopra la scala apposta: e' l'unico stacco che deve dire "qui finisce una cosa e ne comincia un'altra", e il gradino piu' largo, 48, non si distingueva dal respiro dentro un pannello. Resta sulla griglia da 8: 56 sono sette passi. */ --sp-sezione: 56px; } /* --- Tema chiaro ----------------------------------------------------------- */ /* Guild Keeper e' solo scuro. Il chiaro e' un'aggiunta di Piccione, e per restare una cosa sola sovrascrive le SUE variabili, non le nostre: cosi' anche le regole copiate in `componenti-gk.css` seguono il tema. Ogni valore misurato sul peggiore dei quattro fondi. */ [data-theme="light"] { --bg: #f2efe6; --card: #fbf9f3; --card2: #eae6da; --well-1: #e6e2d5; --well-2: #e2ded0; --well-3: #ddd8c9; --surface-2: #e3dfd2; --surface-3: #dcd7c8; /* Non nero. #2a2620 era un quasi-nero caldo e di giorno pesava troppo su un fondo azzurro: adesso e' un grigio scuro della stessa famiglia violacea degli altri due, cosi' i tre passi si leggono come una scala sola. Misurato sul peggiore dei fondi chiari (l'incavo): 9,05:1, che e' il doppio abbondante della soglia. Non e' l'inchiostro a limitare il cielo — quello lo limitano il nero della spiegazione e l'accento. */ --ink: #3a3644; --text-2: #4a4550; --text-muted: #5b5665; /* Sul chiaro l'azzurro deve scurire molto: al 70% sopra una carta quasi bianca, questo e' il piu' chiaro della stessa tonalita' che regge 4,5:1 su tutte le superfici. */ --gold: #0b3241; /* Nel tema scuro `--gold2` e' la variante PIU CHIARA: e' il passaggio del mouse, e su fondo scuro schiarire vuol dire "acceso". Nel chiaro il verso si ribalta, e la prima versione se l'era portato dietro sbagliato: un accento piu' chiaro del gia' chiaro. `.brand-name`, che lo usa al 70%, misurava 4,07:1 sulla carta. Qui e' piu' scuro di `--gold`: 5,07:1. */ --gold2: #092834; --gold-rgb: 11, 50, 65; --gold2-rgb: 9, 40, 52; --su-accento: #ffffff; /* Nel chiaro no. Qui il riempimento era `--accento-pieno`, cioe' #0b3241, un blu quasi nero: ma quel valore era stato scelto per reggere 4,5:1 come TESTO al 70% di opacita', non per fare da fondo. Un fondo non ha quel vincolo, e riusarlo faceva una riga scelta nera dentro una pagina chiara. Qui e' una velatura d'azzurro con l'inchiostro di sempre sopra: 12,31:1 il testo, 5,80:1 le scritte piccole. */ --selezione: #d6ecf5; --su-selezione: #2a2620; --su-selezione-tenue: #5b5665; /* ⚠️ `--muted` arriva dal foglio di Guild Keeper e non era mai stato riscritto per il chiaro: restava il grigio del tema scuro, e siccome vince per specificità sui placeholder di tre campi il testo lì dentro faceva 2,68:1. Stesso valore del suo gemello `--text-muted`, che il chiaro ce l'aveva: sono due nomi per la stessa idea. */ --muted: #5b5665; /* Il riempimento tinto dei pulsanti e' l'accento al 20% (`--tinto`) su quello che ha dietro, e non piu' una mescola fissa: dietro c'e' il pannello, che e' `--rilievo` al 62% sul cielo. Misurata sulla pagina quella superficie fa #bcccd8, e il verde ci sta sopra a 5,15:1 — su 720 momenti (sei luoghi, cinque giornate, ogni ora) non scende mai sotto 4,85:1. Era `--gold` al 14% sopra `--well-2`, cioe' #c4c6bc, e li' il verde di prima si fermava a 4,28:1: e' per questo che e' sceso di un tono. Il bianco sopra la spia verde ne guadagna, da 7,41:1 a 8,47:1. */ --ok: #2b5719; /* Sul riempimento tinto del pulsante Elimina — la stessa ricetta con l'altra tinta — il rosso precedente si fermava a 4,44:1, appena sotto: e' per questo che e' sceso di un soffio. Oggi quella superficie misura #d7cbd4 e questo rosso ci sta a 5,00:1, 4,79:1 nel peggiore dei cieli. (Il 4,44 era misurato su #d7c6b9, quando il tinto era al 14% sopra `--well-2`.) */ --danger: #91312a; --danger-rgb: 145, 49, 42; --warn: #7d4500; --line: rgba(42, 38, 32, 0.16); --line-soft: rgba(42, 38, 32, 0.10); --line-gold: rgba(11, 50, 65, 0.45); --line-gold-soft: rgba(11, 50, 65, 0.26); --filo-forte: rgba(42, 38, 32, 0.32); --fondo-pulsante: rgba(255, 255, 255, 0.55); --alone: #e6e2f2; --ink-spiegazione: #000000; /* Nel chiaro il 50% non puo' passare: sopra una carta quasi bianca il nero pieno dimezzato arriva a 3,94:1 ed e' il MASSIMO possibile, perche' non esiste un colore piu' scuro del nero da cui partire. 55% era il primo valore che reggeva sul PEGGIORE dei due fondi chiari: sulla carta della pagina (4,60:1) e non solo su quella delle schede, dove il 54% sarebbe bastato. Nello scuro resta il 50% chiesto, che li' misura 5,16:1. Adesso e' 66%, per due ragioni misurate. La prima e' che il 55% non reggeva davvero dappertutto: su `--card2` (#eae6da) misurava 4,4999:1, cioe' sotto soglia per un capello, e la rete di sicurezza del cielo ci sbatteva contro a ogni tramonto senza poterci fare niente — il colore era gia' quello di partenza. Al 66% quella stessa misura fa 7,15:1. La seconda e' il cielo: era questo il testo che teneva il fondo inchiodato al bianco, perche' un nero al 55% smette di reggere appena il foglio si scurisce, e senza scurire il foglio l'azzurro non entra nel gamut. */ --opacita-spiegazione: 0.66; /* Erano beige, che veniva dalla palette calda di prima: dentro una pagina azzurra stonavano. Stessa famiglia violacea dei testi. */ /* Nel chiaro l'ombra fa tutto il lavoro. */ --ombra-pannello: 0 14px 34px -22px rgba(12, 22, 40, 0.55), 0 3px 10px -8px rgba(12, 22, 40, 0.26); --barra: #b6c1d4; --barra-viva: #8e9cb8; --bg-wallpaper-pc: url('/wallpaper/piccione-pc.webp'); --bg-wallpaper-mobile: url('/wallpaper/piccione-smartphone.webp'); --ritratto-piccio: url('/wallpaper/zio-piccio-light.webp'); /* ⚠️ Nello scuro i pulsanti sono passati alla tavolozza opaca, e il gradino che li riempie e' scritto per esteso invece di derivare da `--gold`: qui vanno ridichiarati, se no il giorno si porterebbe addosso i blocchi della notte. Sono le ricette di sempre, non valori nuovi — il tema chiaro non e' cambiato di un pixel. Il giorno che si rifa' anche lui, e' qui che si tocca. `--accento-segno` non serve: e' `var(--gold)`, che qui sopra e' gia' quello del chiaro. */ --accento-pieno: var(--gold); --tinto: color-mix(in srgb, var(--accento-pieno) 20%, transparent); --tinto-sopra: color-mix(in srgb, var(--accento-pieno) 32%, transparent); --su-tinto: var(--accento-pieno); --tinto-rosso: color-mix(in srgb, var(--pericolo) 20%, transparent); --tinto-rosso-sopra: color-mix(in srgb, var(--pericolo) 32%, transparent); --su-tinto-rosso: var(--su-tinto); } /* --- Quello che a Guild Keeper non serve ----------------------------------- */ /* Da qui in giu' e' roba di Piccione, tenuta separata da cio' che e' copiato. Il suo `.btn` e' alto ~28px. Qui il minimo resta 44px: e' il bersaglio da pollice che questo pannello si e' gia' dato, e che i test difendono. */ .btn, .btn-rule-action, .btn-refresh, .btn-logout-popover { min-height: 44px; justify-content: center; } /* `.btn` suo nasce con `align-self: flex-start`: dentro le barre di Piccione, che sono flex in riga, schiaccerebbe i pulsanti in alto. */ .btn { align-self: auto; } /* Il suo `.btn` ha il fondo scritto a mano (`rgba(0,0,0,.5)`), non preso da una variabile: essendo lui solo scuro non serviva. Nel chiaro diventava una scatola quasi nera. Si sovrascrive qui, senza toccare il file copiato. */ /* ⚠️ Qui c'erano `.stato-bot` e una PRIMA dichiarazione di `.status-indicator-dot` (piu' la sua variante `.online`), e non facevano niente. `.stato-bot` non esiste nel markup ne' in `app.js`: vestiva un nome che non c'e' piu'. Le altre due erano scavalcate in OGNI dichiarazione da una seconda copia 600 righe piu' in basso — stessa specificita', quindi vince l'ultima — e la differenza non si vedeva nemmeno sul colore, perche' `--avviso` e `--warn` sono lo stesso token (vedi sopra): e' per questo che nessuno se n'era accorto. Chi passava di qui per arrotondare la spia toccava questa e non cambiava un pixel: e' la trappola gia' raccontata per `.theme-icon-slot`. La spia viva sta piu' sotto, insieme a `.pigeon-avatar-wrap .status-indicator-dot`, che e' quella che le da' il cerchio e l'anello. */ /* --- Base ----------------------------------------------------------------- */ /* Il rem parte da qui: alzandolo cresce tutto cio' che e' scritto in rem, che e' quasi tutto. I token in pixel di Guild Keeper non seguono il rem, quindi sono rialzati piu' sotto uno per uno. */ /* ⚠️ Senza questa riga, Chrome per Android disegna il SUO lampo a ogni tocco: misurato, `rgba(51, 181, 229, 0.4)`, un ciano che nel foglio non compare da nessuna parte. Si vede su ogni pulsante, ogni collegamento e ogni `