/* ═══════════════════════════════════════════════════════════════════════════ IL COLORE DEL MARCHIO NELLA SCHERMATA DI ACCESSO ═══════════════════════════════════════════════════════════════════════════ Qui non si dichiara NESSUN colore: si rimappano le variabili di PatternFly sulle tinte di `tinte.css`, caricato prima. E' la ragione per cui questo file e' corto — e per cui cambiare il verde in un posto solo lo cambia anche qui. ── PERCHE' LE VARIABILI E NON LE REGOLE ────────────────────────────────── Colorare `.pf-v5-c-button.pf-m-primary { background: … }` funzionerebbe oggi e si romperebbe al primo aggiornamento di PatternFly che rinomina una classe. Le variabili globali sono il contratto stabile: PatternFly le legge in tutti i suoi componenti, compresi quelli che questa pagina non mostra ancora (verifica del secondo fattore, recupero della password, consenso). ── PERCHE' DUE VOLTE, SU `:root` E SU `.pf-v5-theme-dark` ──────────────── Il tema scuro di PatternFly ridefinisce queste stesse variabili dentro `.pf-v5-theme-dark`, che sta sullo STESSO elemento di `:root` ma vince per specificita'. Dichiararle solo su `:root` significa vederle applicate in tema chiaro e ignorate in tema scuro — un difetto che non si vede finche' non si guarda la pagina col sistema in scuro, cioe' quasi mai. Il valore e' identico nei due blocchi (`var(--tinta-marchio)`) perche' e' `tinte.css` a cambiarlo sotto: qui non si sceglie il colore, si sceglie DOVE va a finire. ═══════════════════════════════════════════════════════════════════════════ */ :root, .pf-v5-theme-dark { /* Il primario: fondo del pulsante d'accesso, e tutto cio' che PatternFly considera «l'azione principale». */ --pf-v5-global--primary-color--100: var(--tinta-marchio); --pf-v5-global--primary-color--light-100: var(--tinta-marchio); --pf-v5-global--primary-color--dark-100: var(--tinta-marchio); /* Lo stato premuto. Nel tema chiaro `--tinta-marchio-scuro` e' piu' scura del marchio, nel tema scuro e' piu' chiara: «scuro» qui vuol dire «variante per lo stato premuto», non «piu' scura». La distinzione e' gia' risolta dentro tinte.css, e questa riga vale in entrambi i temi senza saperlo. */ --pf-v5-global--primary-color--200: var(--tinta-marchio-scuro); /* `--300` e' il fondo del pulsante primario nel TEMA SCURO di PatternFly. Senza questa riga il pulsante resterebbe blu con il sistema in scuro: e' l'unico posto in cui il colore del genitore sopravvive a tutto il resto. */ --pf-v5-global--primary-color--300: var(--tinta-marchio); /* `--400` e' il TESTO sopra il pulsante primario, ed e' bianco di serie. Sopra il verde chiaro del tema scuro il bianco rende 1,93:1 — illeggibile. Portandolo al colore di sfondo si ottiene 8,99:1, ed e' il verso giusto: su fondo acceso si scrive scuro. Nel tema chiaro il fondo e' `--tinta-sfondo` quasi bianco sopra un marchio scuro (5,03:1), quindi la stessa riga vale per tutti e due. */ --pf-v5-global--primary-color--400: var(--tinta-sfondo); /* I collegamenti: «Password dimenticata?» e i rimandi in fondo. */ --pf-v5-global--link--Color: var(--tinta-marchio); --pf-v5-global--link--Color--light: var(--tinta-marchio); --pf-v5-global--link--Color--dark: var(--tinta-marchio); --pf-v5-global--link--Color--hover: var(--tinta-marchio-scuro); --pf-v5-global--link--Color--light--hover: var(--tinta-marchio-scuro); --pf-v5-global--link--Color--dark--hover: var(--tinta-marchio-scuro); /* Il bordo del campo che ha il fuoco, e la casella di spunta segnata. */ --pf-v5-global--active-color--100: var(--tinta-marchio); --pf-v5-global--active-color--200: var(--tinta-marchio-tinta2); /* Il filo sopra la scheda: e' una variabile di keycloak.v2, non di PatternFly, e di serie punta a `--pf-v5-global--palette--blue-400` — cioe' a un blu della tavolozza che nessuna delle righe qui sopra tocca. Senza questa riga resterebbe una striscia blu sopra una scheda tutta verde. */ --keycloak-card-top-color: var(--tinta-marchio); } /* ── L'UNICA REGOLA DI QUESTO FILE, e la ragione per cui c'e' ─────────────── La casella «Ricordami» e' un `input` NATIVO: PatternFly gli toglie l'aspetto di serie in molti componenti, ma qui no, e in tutto il suo foglio non compare mai `accent-color`. Il segno di spunta lo colora quindi il BROWSER, con l'accento di sistema — che e' blu, e resta blu qualunque variabile si ridefinisca: nessuna delle righe qui sopra puo' raggiungerlo. Si vede solo a casella SPUNTATA, cioe' non nella pagina appena aperta: il difetto sarebbe comparso addosso a un cliente, non in una prova. È la stessa riga che il tema del prodotto ha per lo stesso motivo (`interfaccia/stile/tema.css`, `input[type="checkbox"]`). */ input[type="checkbox"], input[type="radio"] { accent-color: var(--tinta-marchio); } /* ═══════════════════════════════════════════════════════════════════════════ IL FONDALE DEL FUNNEL ═══════════════════════════════════════════════════════════════════════════ Di serie questa pagina ha un'immagine: `--keycloak-bg-logo-url`, un SVG di poligoni scuri che e' di Keycloak e non nostro. Qui prende lo sfondo del funnel — nero, griglia, alone verde — cosi' chi arriva dalla pagina pubblica e viene mandato ad autenticarsi non attraversa due mondi diversi. ── RIFATTO IN CSS, NON COPIATO COME IMMAGINE ───────────────────────────── Nel funnel sono due `
` (`.bg-grid` e `.bg-glow`, in `funnel/assets/css/prelancio.css`). Qui non si possono aggiungere elementi senza sovrascrivere il template, che e' proprio cio' che questo tema evita per non doverlo riallineare a ogni aggiornamento di Keycloak. Sono tre strati di `background-image`, che non aggiungono un solo nodo alla pagina. Nessun file da servire, quindi: nessuna immagine da montare, e la CSP resta quella che era. ── L'ALONE NON RESPIRA, E NON E' UNA DIMENTICANZA ──────────────────────── Nel funnel pulsa (`bgGlowPulse`, 8s). Li' e' una pagina che si guarda; qui e' una pagina in cui si scrive una password. Un movimento perpetuo dietro il modulo tira l'occhio via dalla sola cosa che questa pagina deve far fare, e per animarlo servirebbe uno strato in piu' SOPRA il fondo — cioe' un modo in piu' di coprire il modulo se un giorno cambia l'impaginazione. L'ordine degli strati e' quello del funnel letto al contrario: in CSS il primo della lista sta SOPRA, e nel funnel l'alone e' dichiarato dopo la griglia, quindi le va sopra. ── L'ALONE E' PIU' LARGO CHE NEL FUNNEL (760px invece di 400) ──────────── Non e' un ritocco a gusto: nel funnel il centro della pagina e' libero e l'alone si vede tutto, qui il centro e' occupato dalla scheda di accesso, che e' larga quanto la zona in cui l'alone sfuma. Alla misura del funnel restava INTERAMENTE dietro la scheda — visto in fotografia: sfondo nero e griglia, e nessun verde da nessuna parte. Allargandolo, la sfumatura esce da sotto la scheda ed e' di nuovo cio' che il funnel mostra. */ .login-pf body { background-color: var(--tinta-fondale); background-image: radial-gradient(circle 760px at 50% 50%, var(--tinta-fondale-alone) 0%, transparent 60%), linear-gradient(var(--tinta-fondale-riga) 1px, transparent 1px), linear-gradient(90deg, var(--tinta-fondale-riga) 1px, transparent 1px); background-size: auto, 60px 60px, 60px 60px; background-position: center center, 0 0, 0 0; background-repeat: no-repeat, repeat, repeat; background-attachment: fixed; } /* ── IL CONTORNO DELLA SCHEDA, SOLO IN TEMA SCURO ────────────────────────── In tema chiaro la scheda e' bianca sul fondale nero e si stacca da sola. In tema scuro no: il grigio che PatternFly le da' rende 1,19:1 contro il fondale — la scheda finisce per essere tenuta insieme dalla sola ombra. Finche' lo sfondo era l'immagine di Keycloak la differenza non si notava, perche' quel disegno ha zone piu' chiare; il fondale del funnel e' scuro ovunque, e il margine e' sparito con lui. Il bordo si ferma PRIMA del lato alto: la' c'e' gia' il filo del marchio, 4px pieni su `.pf-v5-c-login__main-header`, e un grigio da 1px sopra il verde sarebbe una seconda riga che non dice niente. */ .pf-v5-theme-dark .pf-v5-c-login__main { border: 1px solid var(--tinta-fondale-bordo); border-top: 0; } /* ═══════════════════════════════════════════════════════════════════════════ L'AREA ACCOUNT, AVVICINATA AL PANNELLO ═══════════════════════════════════════════════════════════════════════════ Da qui in giu' niente riguarda la pagina di accesso: sono i componenti che esistono solo nell'area account (masthead, barra laterale, navigazione). Nel tema di accesso queste righe non combaciano con niente e restano inerti — e' il prezzo di tenere UN foglio per due temi, ed e' piu' basso di quello di tenerne due che divergono. ── LA FORMA VIENE DAL PANNELLO, E LE MISURE SONO LE SUE ────────────────── Non sono scelte a occhio: stanno in `interfaccia/componenti/Guscio.vue` e in `@utility voce-barra` di `interfaccia/stile/tema.css`. Testata alta 44px, barra larga 244px, voci alte 28px con testo da 14px, etichette di sezione a 11px maiuscole, filo del marchio da 2px sulla voce attiva. ── DOVE SI SCRIVE UNA VARIABILE DI PATTERNFLY ──────────────────────────── Non su `:root` per abitudine: DOVE PATTERNFLY LA DEFINISCE. Le custom properties si risolvono sull'elemento, quindi una definizione locale batte sempre l'ereditarieta' da `:root` — e la nostra, per quanto scritta dopo, non arriva mai. Misurato sul foglio dell'applicazione, ed e' meta' e meta': · su `:root` il fondo della barra e quello della pagina; · su `.pf-v5-c-masthead` il fondo della testata; · su `.pf-v5-c-nav` TUTTE le variabili della navigazione. Costo gia' pagato: scritte tutte su `:root`, la testata era rimasta nera e il marchio scuro sopra il nero, cioe' invisibile. Il tema scuro ripete i selettori: li' PatternFly rideclina i propri colori con una classe in piu' davanti, che vincerebbe su un selettore nudo. Quello che NON si puo' fare da qui: l'area account e' un'applicazione React, e la sua struttura — quali voci, in che ordine, dentro quali sezioni — non e' raggiungibile senza sostituirne i sorgenti. Questo foglio la riveste, non la ridisegna. */ /* ── Le due che PatternFly definisce su :root ──────────────────────────── */ :root, .pf-v5-theme-dark { /* La barra piu' smorta della pagina, come nel pannello, dove la navigazione sta su `sfondo` e il contenuto su `superficie`. E' quel mezzo tono a dire quale delle due e' la cornice. */ --pf-v5-c-page__sidebar--BackgroundColor: var(--tinta-sfondo); --pf-v5-c-page__main-section--BackgroundColor: var(--tinta-sfondo); } /* ── La testata ────────────────────────────────────────────────────────── */ .pf-v5-c-masthead, .pf-v5-theme-dark .pf-v5-c-masthead { --pf-v5-c-masthead--BackgroundColor: var(--tinta-superficie); min-height: 44px; padding-block: 0; /* Il filo sotto: nel pannello e' cio' che separa la cornice dal contenuto, e senza di esso testata e pagina diventano un blocco solo. */ border-bottom: 1px solid var(--tinta-tratto); } /* ── RIBALTARE IL CONTESTO DELLA TESTATA ─────────────────────────────────── Il masthead di PatternFly non e' solo scuro: IMPONE ai propri contenuti un contesto scuro, ridefinendo le variabili globali di testo, bordi, icone e fondo. Tutto cio' che ci sta dentro — il bottone a panino, la tendina con l'uscita, le icone — legge quelle, non le nostre. Cambiare il solo fondo lascia percio' dentro una testata chiara dei contenuti disegnati per il nero. Costo gia' pagato, tre sintomi con una causa sola: · il bottone a panino quasi invisibile (a riposo legge `Color--200`); · lo stesso bottone BIANCO dopo il clic e li' rimasto (da premuto passa a `Color--100`, e il fuoco non se ne va da solo); · la tendina dell'uscita col riquadro VUOTO — il testo c'era, bianco su bianco. Nessuno dei tre si vede in una fotografia della pagina a riposo. ── PERCHE' QUATTRO SELETTORI E NON UNO ────────────────────────────────── PatternFly non imposta quelle variabili solo sul masthead: le rimette anche SUL BOTTONE, con `.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain`. Una nostra regola sul solo masthead e' piu' lontana dall'elemento e piu' debole, e non arriva: misurato, il panino restava del grigio chiarissimo di serie con il resto gia' corretto. Si ripetono percio' gli stessi selettori che usa lui. PatternFly ha di suo una variante chiara — `.pf-v5-c-masthead.pf-m-light` — che farebbe esattamente questo, ma la classe la mette l'applicazione React e da un foglio di stile non si aggiunge. Queste righe ne sono l'equivalente. */ .pf-v5-c-masthead, .pf-v5-c-masthead .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain, .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain .pf-v5-c-button { --pf-v5-global--Color--100: var(--tinta-testo); --pf-v5-global--Color--200: var(--tinta-testo-2); --pf-v5-global--BorderColor--100: var(--tinta-tratto); --pf-v5-global--BackgroundColor--100: var(--tinta-superficie); --pf-v5-global--link--Color: var(--tinta-marchio); --pf-v5-global--link--Color--hover: var(--tinta-marchio-scuro); --pf-v5-global--icon--Color--light: var(--tinta-testo-2); --pf-v5-global--icon--Color--dark: var(--tinta-testo); /* Il filo fra gli elementi della testata: di serie e' un nero dell'800, pensato per staccare su fondo nero. */ --pf-v5-c-masthead--item-border-color--base: var(--tinta-tratto); } /* ── La navigazione: tutte le sue variabili vivono su `.pf-v5-c-nav` ───── */ .pf-v5-c-nav, .pf-v5-theme-dark .pf-v5-c-nav { --pf-v5-c-nav__link--Color: var(--tinta-testo-2); --pf-v5-c-nav__link--FontSize: 14px; --pf-v5-c-nav__link--m-current--Color: var(--tinta-testo); --pf-v5-c-nav__link--m-current--BackgroundColor: var(--tinta-superficie); /* `after--BorderColor` e' il filo verticale che PatternFly disegna gia' sulla voce corrente: era al posto giusto, gli mancava il colore del marchio. */ --pf-v5-c-nav__link--m-current--after--BorderColor: var(--tinta-marchio); --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: 2px; --pf-v5-c-nav__link--hover--BackgroundColor: var(--tinta-superficie-2); /* ── IL TESTO SOTTO IL PUNTATORE ─────────────────────────────────────── Di serie il colore di hover e' BIANCO: la barra di PatternFly nasce scura, e su fondo scuro e' la scelta giusta. Avendole dato un fondo chiaro senza toccare questa, il testo spariva nel bianco appena ci si passava sopra — e solo li', quindi non si vede in nessuna fotografia ferma. */ --pf-v5-c-nav__link--hover--Color: var(--tinta-testo); --pf-v5-c-nav__link--focus--Color: var(--tinta-testo); --pf-v5-c-nav__link--active--Color: var(--tinta-testo); /* ── LE RIGHE FRA UNA VOCE E L'ALTRA ─────────────────────────────────── PatternFly separa le voci con un filo orizzontale (il `:before` della voce). Nel pannello non c'e': un elenco di otto voci con sette righe in mezzo si legge come sette gruppi da una voce l'uno. Lo spazio basta. */ --pf-v5-c-nav__link--before--BorderBottomWidth: 0; --pf-v5-c-nav__link--hover--before--BorderBottomWidth: 0; /* Le altre tre varianti, ed e' la ragione per cui la riga «appariva e scompariva» seguendo il mouse: azzerata solo quella di riposo e quella di hover, restavano in piedi quelle di focus, active e voce corrente. Una riga che compare quando il puntatore passa e sparisce quando se ne va non si legge come un difetto di stile, si legge come uno sfarfallio. */ --pf-v5-c-nav__link--focus--before--BorderBottomWidth: 0; --pf-v5-c-nav__link--active--before--BorderBottomWidth: 0; --pf-v5-c-nav__link--m-current--before--BorderBottomWidth: 0; --pf-v5-c-nav__section__link--before--BorderBottomWidth: 0; /* ── E LA RIGA SOPRA LA VOCE CHE SEGUE UN SOTTOMENU ──────────────────── Quarta famiglia, e non e' quella del link: `__item--before`. La disegna `.pf-v5-c-nav__item.pf-m-expandable:before`, cioe' la VOCE ESPANDIBILE, e cade sotto tutto il suo sottomenu — quindi si vede sopra la prima voce che viene dopo, lontana dall'elemento che la produce. Azzerare le variabili del link non la tocca nemmeno: e' l'item a dichiararla. */ --pf-v5-c-nav__item--before--BorderWidth: 0; /* ── IL FILO DEI SOTTOMENU ───────────────────────────────────────────── Terza famiglia di variabili dopo quella del link e quella di sezione: `__subnav__link--*`. Una voce dentro un sottomenu — «Device activity» dentro «Account security» — non legge nessuna delle due precedenti, ed e' il motivo per cui restava azzurra mentre tutto il resto era gia' verde. Nota il nome: qui e' `BorderWidth`, non `BorderLeftWidth` come nel link. */ --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--tinta-marchio); --pf-v5-c-nav__subnav__link--m-current--after--BorderWidth: 2px; --pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--tinta-marchio); --pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--tinta-marchio); /* Sotto il puntatore il filo si accenna appena: se fosse del marchio come quello della voce corrente, passando il mouse sembrerebbe di aver gia' cambiato pagina. */ --pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--tinta-tratto-2); /* Le etichette di sezione: nel pannello sono piccole e maiuscolette, e spezzano un elenco lungo senza pesare quanto una voce. */ --pf-v5-c-nav__section-title--FontSize: 11px; --pf-v5-c-nav__section-title--Color: var(--tinta-testo-3); /* ── E LE STESSE, UN'ALTRA VOLTA, PER LE VOCI DENTRO UNA SEZIONE ─────── Non e' una ripetizione per sicurezza. Dentro `.pf-v5-c-nav__section` PatternFly REINDIRIZZA ogni variabile del link alla sua variante `__section__link--*`: quella sezione e' piu' vicina alla voce di quanto lo sia `.pf-v5-c-nav`, quindi vince, e le righe qui sopra non arrivano mai a una voce che stia in una sezione. Costo gia' pagato, e visibile in fotografia: voci a 16px invece di 14 e filo della voce attiva rimasto BLU, con tutto il resto gia' verde. */ --pf-v5-c-nav__section__link--FontSize: 14px; --pf-v5-c-nav__section__link--m-current--after--BorderColor: var(--tinta-marchio); --pf-v5-c-nav__section__link--m-current--after--BorderLeftWidth: 2px; --pf-v5-c-nav__section__link--PaddingTop: 0; --pf-v5-c-nav__section__link--PaddingBottom: 0; --pf-v5-c-nav__section__link--PaddingLeft: 16px; --pf-v5-c-nav__section__link--PaddingRight: 16px; } /* ── Geometria: non la tocca il tema scuro, quindi basta una regola ────── */ .pf-v5-c-page__sidebar { --pf-v5-c-page__sidebar--Width: 244px; /* Il bordo destro passa dall'ombra e non da `border-right`: PatternFly usa quella variabile per staccare la barra, e sovrascriverla lascia una via sola invece di due che si contraddicono. */ --pf-v5-c-page__sidebar--BoxShadow: inset -1px 0 0 var(--tinta-tratto); } .pf-v5-c-nav__list { padding-block: 8px; } .pf-v5-c-nav__link { min-height: 28px; padding-block: 0; padding-inline: 16px; } .pf-v5-c-nav__section-title { text-transform: uppercase; letter-spacing: .04em; border-bottom: 0; padding-block: 10px 2px; } /* Il marchio alla misura della testata del pannello. */ .pf-v5-c-masthead__brand img, .pf-v5-c-brand { max-height: 20px; }