/* ===================================================================== * RIG UI — libreria grafica condivisa dei tool * --------------------------------------------------------------------- * Caricata dal tema su tutte le pagine. I quattro tool (PC Builder, * Mini PC, Notebook Finder, Phone Finder) la usano invece di ripetere * ognuno le stesse regole. * * Contiene DUE cose e basta: * 1. la palette esposta come variabili --rig-*, così i tool possono * ereditare i colori del sito invece di ridefinirli per conto loro; * 2. il toast, cioè l'avviso che compare in alto a destra al posto * degli alert() nativi del browser. * * NON contiene card, filtri o comparatori: quelli restano dentro ogni * tool, perché sono davvero diversi tra loro e unificarli significherebbe * riscrivere tre strumenti che oggi funzionano. * ===================================================================== */ /* --------------------------------------------------------------------- * 1. PALETTE CONDIVISA * * Il tema definisce i colori su [data-theme="light"] / [data-theme="dark"] * applicati al . Qui li ricopiamo sotto il prefisso --rig-*, sempre * sul : essendo l'elemento che porta l'attributo data-theme, le * variabili --color-* sono già risolte per il tema attivo, e le --rig-* * ereditano il valore corretto in tutta la pagina. * * ATTENZIONE, è il punto delicato: mettere questo blocco su :root NON * funzionerebbe, perché data-theme sta sul e non su , quindi * a livello di :root i colori scuri non sono ancora applicati. * * Ogni tool poi scrive, nel proprio CSS: * --color-bg: var(--rig-bg, #f7f6f2); * cioè "usa il colore del sito, e se il tema non c'è ripiega su questo". * Così cambiando tema cambiano anche i tool, ma se un domani il tema * venisse disattivato gli strumenti resterebbero leggibili invece di * diventare bianco su bianco. * ------------------------------------------------------------------ */ body { --rig-bg: var(--color-bg); --rig-surface: var(--color-surface); --rig-surface-hover: var(--color-surface-hover); --rig-border: var(--color-border); --rig-divider: var(--color-divider); --rig-text: var(--color-text); --rig-text-muted: var(--color-text-muted); --rig-primary: var(--color-primary); --rig-primary-hover: var(--color-primary-hover); --rig-success: var(--color-success); --rig-success-hover: var(--color-success-hover); --rig-danger: var(--color-danger); --rig-danger-hover: var(--color-danger-hover); --rig-radius-md: var(--radius-md, 0.375rem); --rig-radius-lg: var(--radius-lg, 0.5rem); } /* Il tema non ha un colore "attenzione": ce l'hanno solo i tool. Lo si definisce qui con i valori che i tool già usavano, così resta uguale a prima ed esiste un unico posto dove cambiarlo. Va scritto per esteso e non derivato da --color-*, perché nel tema quella variabile non esiste. */ body { --rig-warning: #c08a2e; --rig-warning-hover: #a8761f; } body[data-theme="dark"] { --rig-warning: #dbb568; --rig-warning-hover: #e6c886; } /* --------------------------------------------------------------------- * 2. TOAST * * Sostituisce alert(). Differenze che contano: * - non blocca la pagina: puoi continuare a usare il tool mentre è a video; * - non mostra il nome del dominio né la grafica del sistema operativo; * - segue i colori del sito. * * Posizione: in alto a destra, come le notifiche di macOS. Scelta rispetto * al basso perché Notebook e Mini PC hanno la barra del confronto ancorata * in fondo alla finestra, e un toast lì sopra ci finirebbe addosso. * Su schermi stretti diventa una striscia a tutta larghezza. * * Quando l'utente è loggato WordPress mette la sua barra di amministrazione * alta 32px in cima: --rig-toast-top viene alzato via JS in quel caso. * ------------------------------------------------------------------ */ .rig-toasts { position: fixed; top: var(--rig-toast-top, 1rem); right: 1rem; z-index: 100000; /* sopra gli overlay dei tool (che stanno a 9999) */ display: flex; flex-direction: column; gap: 0.5rem; width: min(23rem, calc(100vw - 2rem)); pointer-events: none; /* i click passano attraverso la colonna vuota... */ } .rig-toasts .rig-toast { pointer-events: auto; } /* ...ma non attraverso i toast */ .rig-toast { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.85rem; border-radius: var(--rig-radius-md, 0.375rem); border: 1px solid var(--rig-border, #555249); background: var(--rig-surface, #2f3138); color: var(--rig-text, #f1e2cb); font-size: 0.88rem; line-height: 1.45; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); /* Entra scivolando da destra. La transizione parte dalla classe .rig-toast-in aggiunta dal JS al frame successivo: senza quel ritardo il browser applica subito lo stato finale e l'animazione non si vede. */ transform: translateX(120%); opacity: 0; transition: transform 220ms ease, opacity 220ms ease; } .rig-toast.rig-toast-in { transform: translateX(0); opacity: 1; } .rig-toast.rig-toast-out { transform: translateX(120%); opacity: 0; } .rig-toast-icon { flex: none; margin-top: 0.1rem; font-size: 0.95rem; } .rig-toast-body { flex: 1; min-width: 0; } .rig-toast-title { font-weight: 600; } /* Tre toni. Il bordo colorato basta a distinguerli: uno sfondo pieno sarebbe troppo aggressivo per una conferma tipo "link copiato". */ .rig-toast-ok { border-color: var(--rig-success, #b8c394); } .rig-toast-ok .rig-toast-icon { color: var(--rig-success, #b8c394); } .rig-toast-warn { border-color: var(--rig-warning, #cc9870); } .rig-toast-warn .rig-toast-icon { color: var(--rig-warning, #cc9870); } .rig-toast-errore { border-color: var(--rig-danger, #d48e72); } .rig-toast-errore .rig-toast-icon { color: var(--rig-danger, #d48e72); } /* Pulsante di chiusura: presente sempre, ma indispensabile sui toast che non scadono da soli (es. "copia non riuscita", dove il testo va letto e selezionato con calma). */ .rig-toast-close { flex: none; width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: transparent; color: var(--rig-text-muted, #b8bc9f); /* Il contenuto è il carattere "×", non un'icona: dimensione e interlinea sono tarate su quello per centrarlo nel cerchietto. */ font-size: 1.15rem; line-height: 1; font-family: inherit; cursor: pointer; border-radius: 999px; } .rig-toast-close:hover { color: var(--rig-text, #f1e2cb); background: var(--rig-surface-hover, #444750); } /* Casella con il link da copiare a mano quando la copia automatica fallisce. È l'unico motivo per cui l'alert() nativo aveva ancora un senso: il testo deve restare a video e selezionabile. Qui il toast non scade e il campo è di sola lettura ma selezionabile. */ .rig-toast-copy { display: block; width: 100%; margin-top: 0.45rem; padding: 0.35rem 0.45rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; color: var(--rig-text, #f1e2cb); background: var(--rig-bg, #17181b); border: 1px solid var(--rig-border, #555249); border-radius: var(--rig-radius-md, 0.375rem); } @media (max-width: 600px) { .rig-toasts { left: 0.75rem; right: 0.75rem; width: auto; } } /* Chi ha chiesto al sistema operativo di ridurre le animazioni non le vede: il toast compare e sparisce senza scivolare. */ @media (prefers-reduced-motion: reduce) { .rig-toast { transition: opacity 120ms linear; transform: none; } .rig-toast.rig-toast-in { transform: none; } .rig-toast.rig-toast-out { transform: none; } }