:root { /* base */ --bg: #14110f; --bg-elevated: #1c1815; /* stessi due colori qui sopra, scomposti in R,G,B - servono per un rgba() con opacita' (es. l'overlay sopra lo sfondo decorativo delle pagine Schede, vedi registry.css), che non puo' usare direttamente --bg/--bg-elevated (sono stringhe esadecimali intere, non i 3 canali separati che rgba() richiede) - ripetuti uguali in ogni palette qui sotto, nello stesso ordine dei loro --bg/--bg-elevated */ --bg-rgb: 20, 17, 15; --bg-elevated-rgb: 28, 24, 21; --text: #ede6da; --text-dim: #a89f8f; --border: #35302a; --accent: #c9a24b; /* oro/bronzo, spina dorsale */ --accent-soft: #8a7440; /* categorie evento - palette pensata per stare bene su sfondo molto scuro e restare distinguibile categoria per categoria (le due coppie piu' vicine nella versione precedente, associazione/ricordo e artefatto/morte, qui sono state allontanate apposta). "oggetti" unisce le vecchie "artefatto" e "ricompensa" (nella pratica la distinzione tra "premio trovato" e "oggetto magico" era sottile) - tenuto il colore di "artefatto", "ricompensa" e' stata tolta. */ --cat-luogo: #5fd068; --cat-evento: #4ea1f2; --cat-arco: #f25c9c; --cat-oggetti: #ff8a3d; --cat-associazione: #f2c744; --cat-ricordo: #b084f2; --cat-morte: #f2424b; --cat-nota: #a79b8a; --font-body: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif; --font-ui: -apple-system, Segoe UI, Roboto, sans-serif; /* palette a parte per i riquadri "al volo" (es. il tooltip delle immagini della timeline): volutamente diversa dal marrone/bronzo delle card, per segnalare visivamente che e' un livello di informazione diverso */ --tooltip-bg: #201a2e; --tooltip-border: #4a3a63; } /* --- palette alternative, ispirate alle stagioni ------------------------- Scelta salvata dall'utente (icona a rotella accanto al nome - vedi user-settings.js/auth-bar.js) e applicata come attributo data-palette su . A differenza della prima versione, qui cambia anche lo sfondo (--bg/--bg-elevated/--border), non solo i colori di categoria: ogni stagione ha una sua "temperatura" di fondo, cosi' le palette si sentono davvero diverse tra loro, non solo negli accenti. Testo e oro/bronzo dell'interfaccia (--text/--text-dim/--accent/--accent-soft) restano invece uguali per tutti - sono l'identita' del sito, e cambiarli rischierebbe di compromettere la leggibilita' su qualche combinazione. "classica" e' quella di base nel :root sopra, non ripetuta qui. */ :root[data-palette="primavera"] { --bg: #10150f; --bg-elevated: #182016; --bg-rgb: 16, 21, 15; --bg-elevated-rgb: 24, 32, 22; --border: #33402a; --cat-luogo: #6fd67a; --cat-evento: #5aa9e6; --cat-arco: #f28fb3; --cat-oggetti: #f2a944; --cat-associazione: #e8d64a; --cat-ricordo: #b8a0f2; --cat-morte: #e6524f; --cat-nota: #9fada0; } :root[data-palette="estate"] { --bg: #0d1614; --bg-elevated: #16221e; --bg-rgb: 13, 22, 20; --bg-elevated-rgb: 22, 34, 30; --border: #26362f; --cat-luogo: #3ecf6e; --cat-evento: #2f9fe0; --cat-arco: #e6408f; --cat-oggetti: #f2921f; --cat-associazione: #f2d125; --cat-ricordo: #9a5fd1; --cat-morte: #e6423d; --cat-nota: #b8a888; } :root[data-palette="autunno"] { --bg: #170f0a; --bg-elevated: #221710; --bg-rgb: 23, 15, 10; --bg-elevated-rgb: 34, 23, 16; --border: #3d2c1c; --cat-luogo: #90a136; --cat-evento: #3f7f95; --cat-arco: #c1603f; --cat-oggetti: #e0812a; --cat-associazione: #dab13a; --cat-ricordo: #8a5a72; --cat-morte: #a52e2e; --cat-nota: #a89076; } :root[data-palette="inverno"] { --bg: #0c1016; --bg-elevated: #141b24; --bg-rgb: 12, 16, 22; --bg-elevated-rgb: 20, 27, 36; --border: #263344; --cat-luogo: #4a9e7a; --cat-evento: #6fb3e0; --cat-arco: #c95f8a; --cat-oggetti: #d9822e; --cat-associazione: #d4c05a; --cat-ricordo: #8a7fd1; --cat-morte: #b8323d; --cat-nota: #97a3ad; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); } ::selection { background: var(--accent-soft); color: #14110f; } a { color: var(--accent); } a:hover { text-decoration: underline; } .site-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); font-family: var(--font-ui); /* sempre visibile durante lo scroll (richiesto dal vivo: nelle pagine lunghe - es. Luoghi con tante righe - la barra con login/nav/allarme spariva scendendo) - sfondo pieno (non trasparente) perche' il contenuto scorre proprio sotto; z-index sopra al resto della pagina (non serve superare i menu a tendina/pannelli interni all'header stesso, z-index:100 su .site-nav-dropdown-menu/.user-settings-panel: restano sopra comunque perche' sono suoi discendenti) - MA deve superare anche i controlli/pannelli interni di Leaflet nella pagina Mappe (fino a z-index:1000 di suo, .leaflet-container non e' un vero contesto di stacking isolato dato che ha solo position:relative senza un proprio z-index: i suoi discendenti con z-index esplicito "sfondano" verso l'alto invece di restarne contenuti, competendo direttamente con questo - bug segnalato dal vivo, il menu Schede finiva sotto alla mappa) - 1200 lascia margine anche sopra al pannello di dettaglio di un pin (z-index:1100, vedi mappe.css) */ position: sticky; top: 0; z-index: 1200; background: var(--bg); } .site-header h1 { font-family: var(--font-body); font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; color: var(--accent); } /* barra di accesso (Utente/Password/Esci) DENTRO alla testata, spinta tutta a destra - richiesto dal vivo: "deve essere cosi' per tutte le pagine" (prima solo la Timeline la teneva qui, le altre pagine la tenevano in un riquadro a parte dentro al contenuto, sotto il testo introduttivo - posizione incoerente da pagina a pagina, corretta qui). Generalizzata da quella che era una regola a se' per il solo #graph-token-bar della Timeline (vedi graph.css) - .token-bar resta comunque la classe di base (vedi registry.css), qui solo le differenze per la versione "in testata": piu' compatta, spinta a destra dentro al contenitore flex .site-header (":not()" non serve, .site-header e' l'unico genitore possibile di un .token-bar messo qui). */ .site-header .token-bar { margin: 0 0 0 auto; padding: 0.35rem 0.65rem; font-size: 0.76rem; gap: 0.5rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .site-header .token-bar label, .site-header .token-bar button { font-size: 0.76rem; } .site-header .token-bar input { padding: 0.3rem 0.5rem; font-size: 0.76rem; } .site-header .token-bar input[type="password"] { min-width: 120px; } .site-nav { display: flex; flex-wrap: wrap; row-gap: 0.4rem; } .site-nav a { font-size: 0.9rem; color: var(--text-dim); margin-right: 1rem; } .site-nav a.active, .site-nav a:hover { color: var(--text); } /* --- menu a tendina (Diario/Schede, vedi site-nav.js) ------------------- Raggruppa la fila di link (troppo lunga con 10 pagine) in due tendine: site-nav.js sposta gli STESSI nodi gia' presenti nell'HTML dentro a .site-nav-dropdown-menu, questo file li stila di conseguenza (annulla il margine orizzontale pensato per una fila, li dispone invece uno sotto l'altro). */ .site-nav-dropdown { position: relative; } .site-nav-dropdown-trigger { background: none; border: none; padding: 0; margin: 0 1rem 0 0; font-family: var(--font-ui); font-size: 0.9rem; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; } .site-nav-dropdown-trigger::after { content: '▾'; font-size: 0.65em; } .site-nav-dropdown-trigger:hover, .site-nav-dropdown-trigger.active, .site-nav-dropdown-trigger[aria-expanded="true"] { color: var(--text); } .site-nav-dropdown-menu { position: absolute; top: calc(100% + 0.6rem); left: 0; z-index: 100; min-width: 170px; display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); padding: 0.4rem; } .site-nav-dropdown-menu.hidden { display: none; } .site-nav-dropdown-menu a { margin-right: 0; padding: 0.4rem 0.6rem; border-radius: 5px; } .site-nav-dropdown-menu a:hover { background: rgba(255, 255, 255, 0.05); } /* --- titolo/tendina cambio campagna (vedi campaign-switcher.js) -------- Stessa scatola della tendina di navigazione sopra (.site-nav-dropdown*), solo che qui il contenitore e' l'

stesso (resta un vero titolo semantico) e le voci sono bottoni "cambia campagna", non link. */ .site-header h1.campaign-switcher { position: relative; } .campaign-switcher-trigger { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; } .campaign-switcher-trigger:hover { color: var(--text); } .campaign-switcher-menu { left: 0; right: auto; } .campaign-switcher-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text-dim); font-family: var(--font-ui); font-size: 0.85rem; text-transform: none; letter-spacing: normal; padding: 0.4rem 0.6rem; border-radius: 5px; cursor: pointer; } .campaign-switcher-menu button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); color: var(--text); } .campaign-switcher-menu button:disabled { opacity: 0.5; cursor: default; } /* --- opzioni utente (icona a rotella, accanto al nome) ----------------- Pannello a comparsa condiviso da tutte le pagine (costruito ed agganciato da auth-bar.js, subito dopo #login-status - nessun markup dedicato serve nell'HTML di ogni pagina). Per ora la sola opzione e' la palette di colori delle categorie, ma il pannello e' gia' pensato per accoglierne altre in futuro senza cambiare questo stile. */ .user-settings-wrap { position: relative; display: inline-flex; } .user-settings-gear { background: none; border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; width: 1.7rem; height: 1.7rem; padding: 0; font-size: 0.85rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .user-settings-gear:hover, .user-settings-gear[aria-expanded="true"] { border-color: var(--accent-soft); color: var(--accent); } .user-settings-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 100; width: 210px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); padding: 0.7rem; font-family: var(--font-ui); } .user-settings-panel.hidden { display: none; } .user-settings-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: 0 0 0.45rem; } .user-settings-palette-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.35rem; border-radius: 5px; cursor: pointer; font-size: 0.8rem; color: var(--text); } .user-settings-palette-option:hover { background: rgba(255, 255, 255, 0.05); } .user-settings-palette-option input { accent-color: var(--accent); margin: 0; } .user-settings-swatches { display: flex; gap: 0.2rem; flex: 0 0 auto; } .user-settings-swatches span { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* --- cambia password (dentro allo stesso pannello "opzioni", solo se connessi - vedi passwordSection in auth-bar.js) ------------------------ */ .user-settings-pw-input { display: block; width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 0.4rem 0.5rem; font-family: var(--font-ui); font-size: 0.78rem; margin-bottom: 0.4rem; } .user-settings-pw-save { display: block; width: 100%; box-sizing: border-box; background: var(--bg-elevated); border: 1px solid var(--accent-soft); color: var(--accent); border-radius: 5px; padding: 0.4rem 0.5rem; font-family: var(--font-ui); font-size: 0.78rem; cursor: pointer; } .user-settings-pw-save:hover:not(:disabled) { background: var(--accent-soft); color: var(--bg); } .user-settings-pw-save:disabled { opacity: 0.5; cursor: default; } .user-settings-pw-status { font-family: var(--font-ui); font-size: 0.74rem; color: var(--text-dim); margin: 0.35rem 0 0; min-height: 1em; } .user-settings-pw-status.ok { color: #6fcf6f; } .user-settings-pw-status.error { color: var(--cat-morte); } .user-settings-pw-status.pending { color: var(--text-dim); } /* --- pannello di dettaglio laterale -------------------------------- Base condivisa da Timeline (graph.css) e Relazioni (relazioni.css): entrambe le pagine hanno un pannello fisso a destra che si apre cliccando un nodo. Qui solo cio' che e' identico in entrambe; le due pagine sovrascrivono/aggiungono solo cio' che le differenzia (larghezza, z-index, ombra). */ .detail-panel { position: fixed; top: 68px; right: 0; bottom: 0; background: var(--bg-elevated); border-left: 1px solid var(--border); padding: 1.5rem; overflow-y: auto; font-family: var(--font-ui); /* apre/chiude scorrendo da destra (richiesto dal vivo), non piu' un semplice display:none - "visibility" e' ritardata SOLO in chiusura (transition-delay sul secondo valore) cosi' il pannello resta interattivo/a fuoco fino a quando la scorrimento e' davvero finito, ma sparisce dalla tastiera (tab) subito quando si apre */ transform: translateX(0); visibility: visible; transition: transform 0.28s ease, visibility 0s linear 0s; } .detail-panel.hidden { transform: translateX(105%); /* un filo oltre il 100%, cosi' bordo/ombra non si intravedono */ visibility: hidden; pointer-events: none; transition: transform 0.28s ease, visibility 0s linear 0.28s; } .detail-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--text-dim); font-size: 1.3rem; cursor: pointer; line-height: 1; } .detail-close:hover { color: var(--text); }