/* ============================================================ PicSelect — design system Temi: chiaro (default) e scuro su base grigia neutra. Meccanismo: token in custom properties; il tema segue il sistema (prefers-color-scheme) salvo override manuale via [data-theme]. ============================================================ */ :root { color-scheme: light; --bg: #f7f7f8; --surface: #ffffff; --surface-2: #f1f1f3; --text: #1c1c1f; --text-muted: #6e6e76; --border: #e3e3e8; --border-strong: #cfcfd6; --accent: #2563eb; --btn-bg: #1c1c1f; --btn-text: #ffffff; --danger: #b91c1c; --danger-bg: #fdecec; --success: #15803d; --success-bg: #e8f5ec; --progress: #16a34a; --shadow: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 4%); --radius: .5rem; } /* Tema scuro — base grigia neutra (nessuna dominante blu) */ [data-theme='dark'] { color-scheme: dark; --bg: #1a1a1a; --surface: #232323; --surface-2: #2c2c2c; --text: #e7e7e7; --text-muted: #9c9c9c; --border: #383838; --border-strong: #4a4a4a; --accent: #82b4fe; --btn-bg: #e7e7e7; --btn-text: #1a1a1a; --danger: #f07575; --danger-bg: #3a2626; --success: #63cf82; --success-bg: #24352a; --progress: #4caf6d; --shadow: 0 1px 3px rgb(0 0 0 / 40%); } /* Auto: senza override manuale segue il sistema */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --bg: #1a1a1a; --surface: #232323; --surface-2: #2c2c2c; --text: #e7e7e7; --text-muted: #9c9c9c; --border: #383838; --border-strong: #4a4a4a; --accent: #82b4fe; --btn-bg: #e7e7e7; --btn-text: #1a1a1a; --danger: #f07575; --danger-bg: #3a2626; --success: #63cf82; --success-bg: #24352a; --progress: #4caf6d; --shadow: 0 1px 3px rgb(0 0 0 / 40%); } } /* ---------- base ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.25; } .muted { color: var(--text-muted); } .small { font-size: .85rem; } .ml-auto { margin-left: auto; } /* [hidden] vince SEMPRE su qualunque display d'autore. Senza questa guardia un display:flex/inline-flex di classe (.btn, .async-conflicts, …) batte lo stile user-agent di [hidden] e l'elemento resta visibile: è il bug del pannello "Scelte in conflitto" sempre aperto (2026-07-04) — già rattoppato caso per caso su loupe e commenti, ora chiuso una volta per tutte. */ [hidden] { display: none !important; } /* Nasconde visivamente mantenendo l'elemento accessibile/funzionante (input file dentro label) */ /* ============================================================ Progressive enhancement (no-JS first). Il sito si usa senza JavaScript; il JS si "riattacca sopra" dove serve davvero. Lo script inline in base.html.twig aggiunge la classe `js` a : qui la usiamo per NASCONDERE i controlli che senza JS non funzionerebbero (bottoni che scattano via JS) e per scambiare le versioni HTML pure con quelle potenziate. ============================================================ */ /* mostrato SOLO con JS (senza JS resta l'equivalente HTML puro, o niente). Scopato a html:not(.js) + !important così NASCONDE davvero anche gli elementi con un display proprio da componente (es. .sel-row flex) a parità di specificità (audit M10). Con JS la regola non si applica → il display normale dell'elemento resta quello del suo componente. */ html:not(.js) .js-only { display: none !important; } /* mostrato SOLO senza JS (es. avvisi sui limiti del caricamento nativo) */ html.js .no-js-only { display: none; } /* l'input file nativo si nasconde (a favore del bottone stilizzato) SOLO col JS; senza JS resta visibile, così il browser mostra i file scelti (feedback) */ html.js .upload-file-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- layout ---------- */ .container { max-width: 60rem; margin: 0 auto; padding: 1rem; } .container-narrow { max-width: 24rem; margin: 4rem auto; padding: 0 1rem; } /* ---------- landing pubblica ---------- */ /* La landing riusa .site-header dell'admin; solo il respiro superiore è suo */ .landing-topbar { padding-top: 1rem; margin-bottom: 0; } .landing-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; padding-top: 1.4rem; padding-bottom: 1.5rem; } .landing-hero h1 { margin: 0 0 1rem; font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -.02em; } .landing-hero .accent { color: var(--accent); } .landing-tagline { margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--text-muted); } .landing-cta { display: flex; flex-wrap: wrap; gap: .75rem; } .btn-lg { padding: .65rem 1.4rem; font-size: 1rem; } /* Mock della griglia di revisione: gradienti al posto delle foto, nessuna risorsa esterna, funziona in chiaro e scuro. */ .landing-mock { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; } .mock-photo { display: flex; align-items: flex-end; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transform: rotate(-1.2deg); } .mock-photo:nth-child(even) { transform: rotate(1.4deg); } .mock-a { background: linear-gradient(135deg, #f6b26b, #e06666 60%, #674ea7); } .mock-b { background: linear-gradient(160deg, #76a5af, #134f5c); } .mock-c { background: linear-gradient(150deg, #ffd966, #b45309); } .mock-d { background: linear-gradient(140deg, #979aa1, #33373d); } .mock-photo figcaption { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .2rem .5rem; font-size: .78rem; letter-spacing: .05em; color: #fff; background: rgb(0 0 0 / 45%); } .dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; } .dot-green { background: #4caf6d; } .dot-yellow { background: #e6b800; } .dot-red { background: #e05252; } .landing h2 { margin: 2.2rem 0 1rem; font-size: 1.35rem; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; padding: 0; list-style: none; } .steps li, .feature-card { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--surface); font-weight: 700; font-size: .9rem; } .steps h3, .feature-card h3 { margin: .5rem 0 .25rem; font-size: 1.02rem; } .feature-card h3 { margin-top: 0; } .steps p, .feature-card p { margin: 0; font-size: .92rem; color: var(--text-muted); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .badge-soon { display: inline-block; padding: .05rem .5rem; margin-left: .3rem; vertical-align: middle; font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } .landing-footer { margin-top: 3rem; padding: 1.2rem 0 2rem; font-size: .85rem; color: var(--text-muted); border-top: 1px solid var(--border); } /* Smartphone: hero impilato, passi in colonna, mock contenuto */ @media (max-width: 760px) { .landing-hero { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 1.4rem; } .landing-mock { max-width: 26rem; } .steps { grid-template-columns: 1fr; } } .site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: .75rem; margin-bottom: 1.5rem; } .brand { text-decoration: none; color: inherit; font-weight: 650; font-size: 1.15rem; } .nav { display: flex; gap: 1rem; align-items: center; font-size: .9rem; } .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .page-title { font-size: 1.5rem; margin: 0 0 .25rem; } /* azioni affiancate a destra del titolo (link + form nello stesso page-head) */ .page-actions { display: flex; align-items: center; gap: .5rem; } /* ---------- componenti ---------- */ /* Primitiva unica: OGNI variante (.btn-primary, .btn-ghost, …) cambia solo i colori, mai padding/altezza — così i bottoni affiancati sono sempre della stessa taglia. Unica eccezione dimensionale dichiarata: .btn-lg. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.35rem; padding: .5rem .9rem; border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-size: .92rem; line-height: 1.2; cursor: pointer; text-decoration: none; background: var(--surface-2); color: var(--text); transition: filter .12s; } .btn:hover { filter: brightness(.96); } [data-theme='dark'] .btn:hover, :root:not([data-theme='light']) .btn:hover { filter: brightness(1.12); } .btn-primary { background: var(--btn-bg); color: var(--btn-text); } .btn-danger-outline { background: transparent; color: var(--danger); border-color: var(--danger); } .btn:disabled { opacity: .55; cursor: default; } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); } .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger-ghost { background: transparent; border-color: var(--border); color: var(--danger); } /* Zona pericolosa: conferma dell'eliminazione totale di un utente (stile GitLab) */ .danger-zone { max-width: 640px; border: 1px solid var(--danger); border-radius: 8px; padding: 1.25rem 1.5rem; } .danger-zone ul { margin: .5rem 0 1rem 1.25rem; } .danger-ack, .danger-type { display: block; margin: 1rem 0; } .danger-type input { display: block; margin-top: .35rem; width: 100%; max-width: 340px; } .danger-actions { display: flex; gap: .75rem; margin-top: 1.25rem; } /* Larghezza FISSA: "◐ Auto" / "☀️ Chiaro" / "🌙 Scuro" hanno lunghezze diverse e il bottone non deve cambiare taglia a ogni click. */ .theme-toggle { min-width: 6.5rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; } .list-cards { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .75rem; } .list-cards > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .list-cards a.item-title { font-weight: 600; text-decoration: none; color: inherit; } /* ============================================================ Dashboard — fogli provini. Ogni album è una striscia di provini su un fondo scuro che NON segue il tema: le foto si giudicano sempre sullo stesso neutro (tavolo luminoso). Sotto, la "battuta" del provino stampato: titolo + riga tecnica in monospace (la voce delle annotazioni EXIF). Niente webfont, niente JS: solo stack di sistema. ============================================================ */ :root { --sheet: #17171a; /* fondo striscia, identico nei due temi */ --sheet-note: #8f8f98; /* annotazioni sul fondo scuro */ --frame: clamp(72px, 14vw, 108px); --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; } /* riga tecnica sotto il titolo di pagina: quanti album, quante foto */ .dash-stat { margin: .15rem 0 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .sheet-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; } .sheet { position: relative; /* àncora del link steso su tutta la striscia */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .12s, box-shadow .12s; } .sheet:hover { border-color: var(--border-strong); box-shadow: var(--shadow); } .sheet:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } /* la striscia: provini quadrati flush, tagliati vivi dal bordo destro come un foglio rifilato — nessuna media query per contarli */ .sheet-band { display: flex; gap: 2px; height: var(--frame); overflow: hidden; background: var(--sheet); } .sheet-frame { width: var(--frame); height: var(--frame); flex: none; object-fit: cover; background: #26262b; /* segnaposto mentre carica, sul fondo scuro */ } /* senza provini la striscia si assottiglia: spessa = c'è materiale, sottile = solo una nota (vuoto / zero-knowledge) */ .sheet-band--note { height: auto; padding: .6rem 0; } /* annotazione al posto dei provini: album vuoto, o zero-knowledge (il server non può mostrare anteprime: la striscia lo dice) */ .sheet-note { align-self: center; padding: 0 1rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--sheet-note); } /* la battuta: il margine stampato sotto i provini */ .sheet-rebate { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; padding: .6rem .9rem; } .sheet-title { font-weight: 600; color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* tutta la striscia è UN link (niente link annidati, niente JS) */ .sheet-title::after { content: ''; position: absolute; inset: 0; } .sheet-rebate .enc-badge { margin-left: 0; } .sheet-meta { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; } .sheet-open { margin-left: .6rem; transition: color .12s; } .sheet:hover .sheet-open { color: var(--accent); } /* archivio vuoto: un foglio ancora da riempire, non un errore */ .sheet-empty { margin-top: 2rem; padding: 2.5rem 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); text-align: center; } .sheet-empty p { margin: 0 0 .5rem; } .sheet-empty .btn { margin-top: .75rem; } /* ============================================================ Timeline — il registro cronologico. In testa la rotaia dei mesi (voce mono delle annotazioni); ogni giorno è un foglio provini che va a capo, sullo stesso fondo scuro invariante della dashboard: le foto sempre sul solito tavolo luminoso. ============================================================ */ .tl-months { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .35rem; margin: 1.25rem 0 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .tl-year { color: var(--text-muted); font-weight: 600; margin-right: .15rem; } .tl-year:not(:first-child) { margin-left: .6rem; } .tl-month { color: var(--text-muted); text-decoration: none; padding: .15rem .45rem; border: 1px solid transparent; border-radius: var(--radius); transition: color .12s, border-color .12s; } .tl-month:hover { color: inherit; border-color: var(--border); } .tl-month.is-current { color: inherit; border-color: var(--border-strong); } .tl-month-n { color: var(--text-muted); } .tl-group-head { margin: 1.75rem 0 0; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .tl-days { display: grid; gap: 1.6rem; margin-top: 1.25rem; } /* regola di sistema: il contenuto largo (lista album nowrap) scorre/ellissa DENTRO il suo giorno, mai il body — senza questo il grid item si allarga al max-content e la pagina scrolla in orizzontale */ .tl-days > * { min-width: 0; } /* il giorno NON è una scheda-album: la data è un'intestazione di registro sopra i provini, nessuna cornice attorno */ .tl-day-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .75rem; margin: 0 0 .4rem; font-size: .82rem; font-weight: 400; } .tl-day-date { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; font-variant-numeric: tabular-nums; } .tl-day-n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text-muted); } /* più servizi nello stesso giorno = più bande, ognuna con la sua etichetta */ .tl-service + .tl-service { margin-top: .6rem; } .tl-band-label { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .25rem; font-weight: 400; min-width: 0; } .tl-band-label a { color: var(--text-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tl-band-label a:hover { color: inherit; text-decoration: underline; } /* la striscia del giorno va a capo: più righe di provini, passo 2px, provini un filo più grandi che in dashboard (qui si guardano le FOTO, non l'album). Il fondo ABBRACCIA il contenuto: una banda corta dice che c'è poco materiale, come la striscia sottile della dashboard */ .tl-band { --frame: clamp(84px, 12vw, 132px); display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; background: var(--sheet); border-radius: var(--radius); overflow: hidden; } /* la tendina d'ordinamento non è un campo di form a tutta pagina */ .tl-sort select { width: auto; } .tl-shot { display: block; flex: none; line-height: 0; } .tl-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tl-band .sheet-note { align-self: center; padding: .6rem 1rem; } /* foto ancora in coda dal worker: il posto nel registro c'è già */ .tl-shot-pending { display: flex; align-items: center; justify-content: center; color: var(--sheet-note); } .flash { padding: .55rem .8rem; border-radius: var(--radius); margin: .5rem 0; font-size: .92rem; } .flash-success { background: var(--success-bg); color: var(--success); } .flash-error { background: var(--danger-bg); color: var(--danger); } /* ---------- form ---------- */ input[type='text'], input[type='email'], input[type='password'], input[type='datetime-local'], input[type='date'], input[type='time'], input[type='number'], input[type='search'], select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; } /* L'icona del calendario nativa segue il tema (via color-scheme sul :root) */ input[type='datetime-local']::-webkit-calendar-picker-indicator, input[type='date']::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; } /* Bottone "↻ Ritenta" nelle card della sezione errori */ .photo-card .retry-row { padding: 0 .4rem .5rem; } .photo-card .retry-row .btn { width: 100%; font-size: .8rem; padding: .3rem; } /* ---------- area revisione (pubblica, mobile-first) ---------- */ .review-enter-form { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; } .review-enter-form label { font-size: .9rem; font-weight: 600; } .review-enter-form .btn { margin-top: .5rem; } /* La galleria di revisione usa TUTTO lo schermo (come Lightroom: lo spazio serve alle foto), non il container centrato da 60rem pensato per il testo. */ .review-gallery { max-width: none; } /* Larghezza minima della card CALCOLATA dai controlli (root 16px): - riga stelle: 5×2.4rem bottoni + 4×.15rem gap + .7rem padding = 13.3rem - riga flag+colori: (2×2.4rem + .15) + (5×1.9rem + 4×.15) + .7 + ~.5 di separazione tra i gruppi ≈ 16.3rem ← vincolante - bordi card: ~.15rem → min 16.5rem S = 17rem è quindi IL MINIMO; sotto, overflow:hidden taglia stelle e pallini (regressione 2026-07-03: card a 160px → 4 stelle e 2 pallini visibili). Se cambiano le dimensioni dei bottoni, RIFARE il conto. Specificità .photo-grid.review-grid: la regola base .photo-grid sta PIÙ AVANTI nel file e a pari specificità vincerebbe lei (è esattamente ciò che teneva le card a 160px). Il doppio selettore è intenzionale. */ .photo-grid.review-grid { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; } /* Taglia scelta dall'utente (grid-size controller, persistita): S è il minimo calcolato, M il default, L per giudicare senza aprire la loupe. */ .photo-grid.review-grid--s { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .photo-grid.review-grid--m { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); } .photo-grid.review-grid--l { grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); } .grid-size-picker { display: flex; align-items: center; gap: .3rem; } .grid-size-picker .btn.active { border-color: var(--accent); color: var(--text); } /* ------------------------------------------------------------------ Valutazione SENZA JavaScript (I9): gli stessi comandi della griglia fatti di radio e checkbox, dentro il form che abbraccia i provini. Li mostra il CSS solo quando NON ha la classe .js, quindi con JavaScript attivo questa roba non esiste nemmeno visivamente. ------------------------------------------------------------------ */ .sel-nojs { display: grid; gap: .25rem; padding: .3rem .5rem .6rem; } .sel-nojs-row { margin: 0; padding: 0; border: 0; } .sel-nojs-row legend { padding: 0; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; } /* Bersagli da dito: il pallino nativo è ~16px, sotto i 24×24 che servono (WCAG 2.5.8). Il padding sulla label allarga l'area cliccabile senza toccare il controllo, che resta quello del sistema. */ .sel-nojs-opt { display: inline-flex; align-items: center; gap: .2rem; min-height: 1.6rem; margin: 0 .35rem .1rem 0; padding: .15rem .2rem; font-size: .85rem; cursor: pointer; } .sel-nojs-opt:hover { background: var(--surface-2); border-radius: var(--radius); } /* pastiglia di colore accanto al nome: la stessa tavolozza dei pallini */ .sel-nojs-swatch { display: inline-block; width: .65rem; height: .65rem; margin-right: .25rem; border-radius: 50%; vertical-align: -1px; } .sel-nojs-swatch.dot-red { background: #e05252; } .sel-nojs-swatch.dot-yellow { background: #e6b800; } .sel-nojs-swatch.dot-green { background: #4caf6d; } .sel-nojs-swatch.dot-blue { background: #4c8dd6; } .sel-nojs-swatch.dot-purple { background: #9b6dd6; } .sel-nojs-comments summary { cursor: pointer; color: var(--text-muted); font-size: .8rem; } .sel-nojs-comment { margin: .35rem 0; font-size: .85rem; } .sel-nojs-comments textarea { width: 100%; margin-top: .2rem; } /* il bottone d'invio chiude la pagina: sta in fondo e si vede */ .review-nojs-save { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0; } /* La miniatura è avvolta in un link (fallback no-JS alla foto grande, I9): deve comportarsi come l'immagine che contiene, non come testo in riga. */ .review-grid .photo-card > .loupe-openable { display: block; line-height: 0; } /* Come Lightroom: cella quadrata e foto INTERA (mai tagliata), verticale o orizzontale, con letterbox neutro — si giudica l'inquadratura vera. */ .review-grid .photo-card img { aspect-ratio: 1 / 1; object-fit: contain; background: var(--surface-2); } .review-grid .photo-card figcaption { font-size: .85rem; } /* Controlli in scala con le card più grandi */ .review-grid .sel-star, .review-grid .sel-flag { min-width: 2.4rem; min-height: 2.4rem; font-size: 1.3rem; } .review-grid .sel-dot { min-width: 1.9rem; min-height: 1.9rem; } .review-grid .sel-dot::before { width: .95rem; height: .95rem; } /* Controlli di selezione sulle card (stelle, flag, colori) */ .sel-row { display: flex; align-items: center; gap: .15rem; padding: 0 .35rem .35rem; } .sel-stars { justify-content: center; } .sel-star, .sel-flag, .sel-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; min-height: 2rem; padding: 0; background: none; border: none; border-radius: var(--radius); font: inherit; font-size: 1.1rem; color: var(--text-muted); cursor: pointer; } .sel-star.active { color: #e6b800; } .sel-flag.active { color: var(--success); background: var(--success-bg); } .sel-flag-reject.active { color: var(--danger); background: var(--danger-bg); } .sel-colors { display: inline-flex; gap: .15rem; margin-left: auto; } .sel-dot { min-width: 1.6rem; min-height: 1.6rem; } .sel-dot::before { content: ''; width: .8rem; height: .8rem; border-radius: 50%; background: var(--dot-color, transparent); opacity: .55; } .sel-dot.active::before { opacity: 1; outline: 2px solid var(--text); outline-offset: 1px; } .sel-dot.dot-red { --dot-color: #e05252; } .sel-dot.dot-yellow { --dot-color: #e6b800; } .sel-dot.dot-green { --dot-color: #4caf6d; } .sel-dot.dot-blue { --dot-color: #4c8dd6; } .sel-dot.dot-purple { --dot-color: #9b6dd6; } /* Scarto (reject): la card si spegne, come in Lightroom */ .photo-card.rejected img { opacity: .35; } /* Salvataggio in corso: i controlli si attenuano finché il server non conferma — il click è registrato anche se la risposta tarda (i click ripetuti vengono coalizzati, non persi). */ .photo-card.saving .sel-row { opacity: .55; transition: opacity .15s; } /* ---------- loupe (vista singola) ---------- */ .loupe-openable { cursor: zoom-in; } .loupe { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgb(10 10 10 / 94%); } /* ([hidden] è garantito dalla guardia globale in testa al foglio) */ .loupe-image { max-width: 96vw; max-height: 74vh; object-fit: contain; border-radius: 2px; } .loupe-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: .75rem; padding: .6rem .9rem; color: #e7e7e7; } .loupe-name { font-weight: 600; } .loupe-counter { color: #9c9c9c; } .loupe-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; background: rgb(255 255 255 / 8%); border: none; border-radius: var(--radius); color: #e7e7e7; font: inherit; font-size: 1.2rem; cursor: pointer; } .loupe-top .loupe-btn { margin-left: auto; } .loupe-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2rem; min-width: 3rem; min-height: 4.5rem; } .loupe-prev { left: .5rem; } .loupe-next { right: .5rem; } .loupe-bottom { position: absolute; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; padding: .4rem 0 .6rem; background: linear-gradient(transparent, rgb(0 0 0 / 55%)); } /* Nella loupe i controlli sono su fondo scuro fisso, a prescindere dal tema */ .loupe .sel-star, .loupe .sel-flag { color: #b9b9b9; font-size: 1.35rem; } .loupe .sel-star.active { color: #ffd75e; } .loupe .sel-dot.active::before { outline-color: #fff; } .loupe .sel-colors { margin-left: .75rem; } .loupe-hint { margin: .2rem 0 0; color: #8b8b8b; } /* Badge conteggio commenti sulle card della griglia */ .comment-badge { margin-left: .35rem; font-size: .78rem; color: var(--text-muted); white-space: nowrap; } /* Pannello commenti nella loupe (fondo scuro fisso, come i controlli) */ .loupe-comments-toggle { font-size: .9rem; margin-top: .3rem; padding: 0 .8rem; } .loupe-comments { position: absolute; right: .75rem; bottom: 6.5rem; display: flex; flex-direction: column; width: min(24rem, 92vw); max-height: 55vh; padding: .75rem; background: rgb(20 20 20 / 96%); border: 1px solid #3a3a3a; border-radius: var(--radius); color: #e7e7e7; } .loupe-comments-list { flex: 1; margin: 0 0 .6rem; padding: 0; list-style: none; overflow-y: auto; } .loupe-comments-list li { padding: .4rem .5rem; margin-bottom: .35rem; background: rgb(255 255 255 / 5%); border-radius: var(--radius); } .loupe-comments-list li.mine { background: rgb(130 180 254 / 12%); } .loupe-comments-list .comment-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: #9c9c9c; } .loupe-comments-list p { margin: .15rem 0 0; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* preset rapidi di scadenza nel form "Nuovo link" */ .expiry-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; } .expiry-presets button { padding: .2rem .6rem; font-size: .8rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; } .expiry-presets button:hover { border-color: var(--accent); } /* azioni sui PROPRI commenti: link discreti, visibili anche al tocco */ .comment-actions { display: flex; gap: .6rem; margin-top: .2rem; } .comment-actions button, .comment-edit-form button { padding: 0; font-size: .72rem; color: #9c9c9c; background: none; border: none; cursor: pointer; text-decoration: underline; } .comment-actions button:hover, .comment-edit-form button:hover { color: #e7e7e7; } .comment-edit-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .3rem; } .comment-edit-form textarea { flex: 1 1 100%; padding: .35rem .5rem; font: inherit; font-size: .9rem; color: inherit; background: rgb(255 255 255 / 8%); border: 1px solid #3a3a3a; border-radius: var(--radius); resize: vertical; } .loupe-comments-form { display: flex; gap: .4rem; align-items: flex-end; } .loupe-comments-form textarea { flex: 1; padding: .45rem .55rem; background: #1c1c1c; color: #e7e7e7; border: 1px solid #3a3a3a; border-radius: var(--radius); font: inherit; font-size: .9rem; resize: none; } @media (max-width: 700px) { .loupe-comments { right: 2vw; left: 2vw; width: auto; bottom: 7.5rem; max-height: 45vh; } } @media (max-width: 700px) { .loupe-hint { display: none; /* la tastiera non c'è: si naviga con swipe e tap */ } .loupe-image { max-height: 62vh; } } /* Su schermi piccoli la griglia respira meno; i tap target restano ≥44px */ @media (max-width: 560px) { .review-gallery { padding: .5rem; } .review-grid { gap: .4rem; } /* specificità ≥ degli override .review-grid: su mobile i tap target ≥44px vincono sempre */ .sel-star, .sel-flag, .review-grid .sel-star, .review-grid .sel-flag { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.35rem; } .sel-dot, .review-grid .sel-dot { min-width: 2rem; min-height: 2rem; } } /* ---------- pannello condivisione ---------- */ .share-list { margin: 0; padding: 0; list-style: none; } .share-list li { padding: .6rem .75rem; margin-bottom: .5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .share-list li.share-inactive { opacity: .65; } .share-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .share-row input.share-url { font-family: var(--font-mono); font-size: .78rem; } .share-row + .share-row { margin-top: .45rem; } .share-url { flex: 1; min-width: 12rem; width: auto; font-size: .82rem; color: var(--text-muted); } .share-new { margin-top: .75rem; } /* Il summary è stilizzato da bottone: niente freccetta nativa del details */ .share-new > summary { list-style: none; user-select: none; } .share-new > summary::-webkit-details-marker { display: none; } .share-new form { max-width: 28rem; margin-top: .75rem; padding: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .share-permissions { display: flex; gap: 1.25rem; flex-wrap: wrap; } /* Barra di ordinamento galleria: select compatto in linea, non a tutta larghezza */ .sort-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .75rem; } .sort-bar select { width: auto; padding: .3rem .5rem; font-size: .85rem; } input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Il focus dell'input file nascosto si mostra sulla label che lo contiene */ label.btn:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; } label { font-size: .92rem; } .form-grid { display: grid; gap: 1rem; max-width: 32rem; } /* testata del login: marchio + toggle tema, poi l'annotazione d'accesso */ .login-head { display: flex; justify-content: space-between; align-items: center; } .login-brand { font-size: 1.5rem; margin: 0; } .form-stack { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; } .form-errors, ul.upload-errors { color: var(--danger); font-size: .85rem; margin: .5rem 0 0; padding-left: 1.2rem; } /* ---------- upload ---------- */ .upload-box { margin-top: 1.5rem; border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 1rem; background: var(--surface); transition: border-color .15s, background .15s; } /* Cartella/file in trascinamento sopra il box */ .upload-box.drop-active { border-color: var(--accent); border-style: solid; background: var(--surface-2); } .upload-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .progress { background: var(--surface-2); border-radius: var(--radius); height: .6rem; overflow: hidden; margin-top: .85rem; } .progress-bar { background: var(--progress); height: 100%; width: 0%; transition: width .2s; } /* ---------- sezioni collassabili ---------- */ .collapsible { margin-top: 2rem; } .collapsible > summary { cursor: pointer; user-select: none; display: flex; align-items: baseline; gap: .5rem; } .collapsible > summary::before { content: '▸'; color: var(--text-muted); font-size: .9rem; transition: transform .15s; } .collapsible[open] > summary::before { transform: rotate(90deg); } .collapsible > summary::marker, .collapsible > summary::-webkit-details-marker { display: none; content: ''; } /* titolo di sezione a voce-annotazione (come le schede Account); il target di click resta l'intera riga del summary */ .collapsible > summary { padding: .4rem 0; } .collapsible > summary h2 { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 0; display: inline; } /* ---------- sessioni di upload ---------- */ .session-list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .4rem; } .session-list > li { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .session-list > li.active { border-color: var(--accent); } .session-list a { text-decoration: none; } /* ---------- galleria ---------- */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; margin-top: 1rem; } .photo-card { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .photo-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; } .photo-card .placeholder { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-size: .8rem; } /* la didascalia del provino è un'annotazione tecnica: nome file + tipo */ .photo-card figcaption { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; padding: .35rem .5rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- risultati revisione (vista aggregata admin) ---------- */ /* il nome file è un'annotazione tecnica, come sul provino */ .review-result-body h3 { font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .02em; } /* pillole reviewer: riepilogo dell'attività + filtro della lista */ .reviewer-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; } .review-results { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; } .review-result { display: flex; gap: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; } /* thumb quadrata a lato: foto intera, mai tagliata (come la griglia review) */ .review-result-thumb { flex: 0 0 9rem; } .review-result-thumb img { display: block; width: 9rem; aspect-ratio: 1; object-fit: contain; background: var(--surface-2); border-radius: var(--radius); } .review-result-thumb.placeholder { width: 9rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); font-size: .8rem; } .review-result-body { flex: 1; min-width: 0; /* consente l'ellipsis dei nomi lunghi dentro il flex */ } .review-result-body h3 { margin: 0 0 .4rem; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* una riga = la decisione di UN reviewer su quella foto */ .result-line { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .2rem 0; } .result-stars .on { color: #e6b800; } .result-stars .off { color: var(--text-muted); } .result-flag.pick { color: var(--success); } .result-flag.reject { color: var(--danger); } .result-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; } .result-dot.dot-red { background: #e05252; } .result-dot.dot-yellow { background: #e6b800; } .result-dot.dot-green { background: #4caf6d; } .result-dot.dot-blue { background: #4c8dd6; } .result-dot.dot-purple { background: #9b6dd6; } .result-comments { list-style: none; margin: .5rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--border); } .result-comments li { padding: .2rem 0; } .result-comments p { margin: .1rem 0 0; white-space: pre-wrap; /* i commenti conservano gli a-capo */ } /* smartphone: thumb sopra a tutta larghezza, dettagli sotto */ @media (max-width: 560px) { .review-result { flex-direction: column; } .review-result-thumb, .review-result-thumb img, .review-result-thumb.placeholder { width: 100%; flex-basis: auto; } } /* ---------- pagine d'errore (404/403/5xx) ---------- */ .error-page { text-align: center; } .error-page .error-code { font-family: var(--font-mono); /* il codice di stato è un dato tecnico */ margin: 0; font-size: 5rem; font-weight: 700; line-height: 1; color: var(--border-strong); } .error-page h1 { margin: .25rem 0 .75rem; } /* ---------- pannello attività (M3.5) ---------- */ .activity-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 1rem 0 .5rem; } .stat-card { display: flex; flex-direction: column; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .stat-card strong { font-size: 1.6rem; line-height: 1.2; } .stat-failed strong { color: var(--danger); } .activity-meta { margin: .25rem 0 1.25rem; } /* tabelle larghe: scorrono nel proprio contenitore, mai la pagina */ .table-scroll { overflow-x: auto; } .activity-table { width: 100%; border-collapse: collapse; font-size: .9rem; white-space: nowrap; } .activity-table th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: .8rem; } .activity-table th, .activity-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); } .worker-stale td { color: var(--text-muted); } .badge-ok, .badge-down { display: inline-block; padding: .05rem .5rem; font-size: .75rem; font-weight: 600; border-radius: 999px; white-space: nowrap; } .badge-ok { color: var(--success); background: var(--success-bg); } .badge-down { color: var(--danger); background: var(--danger-bg); } /* l'errore può essere lungo: si tronca nel testo, intero nel title */ .activity-failed .failed-error { max-width: 32rem; white-space: normal; overflow-wrap: anywhere; } .failed-retry-all { margin-top: .6rem; } .activity-albums { list-style: none; margin: .5rem 0 0; padding: 0; } .activity-albums li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--border); } /* riga risorsa: etichetta a sinistra, barra elastica, percento a destra */ .resource-row { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; } .resource-row .progress { flex: 1; margin-top: 0; /* la primitiva nasce nell'upload con margine sopra */ } .resource-label { flex: 0 0 auto; min-width: 16rem; } @media (max-width: 560px) { .resource-row { flex-wrap: wrap; } .resource-label { min-width: 0; flex-basis: 100%; } } /* ---------- vista risultati: barra filtri (M4) ---------- */ .results-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 1rem; } /* riga export: campo-appunti elastico tra etichetta e bottoni */ .results-export { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; } .results-export input { flex: 1; min-width: 12rem; } /* ---------- ordine manuale (drag&drop, M4) ---------- */ .photo-grid [draggable='true'] { cursor: grab; } .photo-card.dragging { opacity: .4; } /* ---------- parole chiave (M4): pagina set + sezione album ---------- */ .keyword-set-create, .keyword-add { display: flex; gap: .5rem; margin: 1rem 0; } .keyword-set-create input[type='text'], .keyword-add input[type='text'] { flex: 1; max-width: 22rem; } .keyword-set { padding: .9rem 1rem; margin: 0 0 .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .keyword-set-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; } .keyword-set-head h2 { margin: 0; font-size: 1.1rem; } .keyword-set .keyword-add { margin: .6rem 0 0; } .keyword-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; } /* chip = form inline: testo + ✕ per togliere la voce */ .keyword-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .3rem .15rem .7rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; } .keyword-chip .chip-remove { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; padding: 0; background: none; border: none; border-radius: 50%; color: var(--text-muted); cursor: pointer; } .keyword-chip .chip-remove:hover { color: var(--danger); background: var(--danger-bg); } .keyword-optional-row { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; } .keyword-optional .btn { margin-top: .5rem; } /* chip keyword in loupe: toggle come i colori, testo leggibile su sfondo scuro */ .loupe-keywords { flex-wrap: wrap; justify-content: center; max-width: 42rem; } .kw-chip { padding: .25rem .8rem; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; color: #ddd; font: inherit; font-size: .85rem; cursor: pointer; } .kw-chip.active { background: #e6b800; border-color: #e6b800; color: #1a1a1a; font-weight: 600; } /* badge 🏷 sulla card: come il badge commenti */ .keyword-badge { margin-left: .35rem; white-space: nowrap; } /* smartphone: chip comodi da premere (≥44px come gli altri controlli) */ @media (max-width: 560px) { .kw-chip { min-height: 2.75rem; padding: .45rem 1rem; } } /* keyword nelle righe risultati: chip informativi, non interattivi */ .result-keywords { display: inline-flex; flex-wrap: wrap; gap: .3rem; } .result-kw { padding: .05rem .55rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: .78rem; white-space: nowrap; } /* base di partenza dell'ordine manuale */ .reorder-base { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; } /* ---------- conflitti di dedup (M2.6): due versioni affiancate ---------- */ .conflict-card { padding: .9rem 1rem; margin: 0 0 .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .conflict-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 18rem)); gap: .75rem; } .conflict-reason { margin: .6rem 0; font-size: .9rem; } .conflict-reason.conflict-danger { color: var(--danger); font-weight: 600; } .conflict-actions { display: flex; flex-wrap: wrap; gap: .5rem; } @media (max-width: 560px) { .conflict-pair { grid-template-columns: 1fr; } } /* consegna (M7): ⬇ sulla card, comodo anche da touch */ .dl-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; min-height: 1.9rem; margin-left: .35rem; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; } /* ---------- gestione utenti (M7.5 + redesign lista/scheda) ---------- */ /* Il "Nuovo utente" è un box a comparsa: non ruba spazio alla lista. */ .user-create-box { margin: 1rem 0; } .user-create-box > summary { display: inline-flex; width: max-content; list-style: none; } .user-create-box > summary::-webkit-details-marker { display: none; } .user-create { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; } .user-create-admin { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; } /* --- lista --- */ .users-list td { vertical-align: middle; } /* intestazioni di colonna nella voce annotazione (come le schede Account): vale per TUTTE le tabelle tecniche (utenti, sessioni, diagnostica) */ .activity-table th { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } /* affordance di riga quieta: si accende al passaggio sulla riga */ .table-open { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; white-space: nowrap; transition: color .12s; } .users-list tr:hover .table-open, .table-open:focus-visible { color: var(--accent); } .user-link { font-weight: 600; color: var(--text); text-decoration: none; } .user-link:hover { color: var(--accent); text-decoration: underline; } .user-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; } .badge-soft { display: inline-block; padding: .05rem .5rem; font-size: .75rem; font-weight: 600; border-radius: 999px; color: var(--text-muted); background: var(--surface-2); white-space: nowrap; } /* pagina Moduli (P16) */ .module-list { display: flex; flex-direction: column; gap: 1rem; max-width: 680px; margin-top: 1rem; } .module-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; } .module-name { font-size: 1.05rem; margin: 0 0 .35rem; display: flex; align-items: center; gap: .5rem; } /* conversione del livello di cifratura (P15 Fase 4) */ .enc-convert { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; } /* badge del livello di cifratura dell'album (🔓/🛡️/🔒, P15) */ .enc-badge { display: inline-block; padding: .1rem .55rem; margin-left: .5rem; font-size: .72rem; font-weight: 600; border-radius: 999px; color: var(--text-muted); background: var(--surface-2); white-space: nowrap; vertical-align: middle; } .user-go { text-align: right; white-space: nowrap; } /* --- barra quota --- */ .quota-line { font-family: var(--font-mono); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .quota-bar { display: block; width: 120px; max-width: 100%; height: 6px; margin-top: .3rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .quota-bar__fill { display: block; height: 100%; background: var(--accent); } .quota-bar--over .quota-bar__fill { background: var(--danger); } /* --- scheda del singolo utente --- */ .user-detail { display: flex; flex-direction: column; gap: 1rem; max-width: 880px; /* respiro per Accesso + Spazio affiancati */ margin-top: 1rem; } /* badge di stato dentro il titolo (tu / sospeso) */ .page-title .badge-soft, .page-title .badge-down { vertical-align: middle; margin-left: .35rem; } /* l'email nel form della scheda usa la larghezza disponibile */ .user-email-change input[type='email'] { flex: 1 1 12rem; min-width: 0; } .user-danger-text { margin: 0 0 .75rem; } .back-link { display: inline-block; text-decoration: none; margin-bottom: .35rem; } .back-link:hover { text-decoration: underline; } .user-section { padding: 1.1rem 1.25rem; } /* stessa voce annotazione delle schede della pagina Account */ .user-section__title { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin: 0 0 .9rem; } .field-row { display: grid; grid-template-columns: 110px 1fr; gap: .5rem 1rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--border); } .field-row:first-of-type { border-top: 0; padding-top: 0; } .field-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .field-value { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; } .inline-form { display: inline-flex; align-items: center; gap: .4rem; margin: 0; } .user-danger { border-color: var(--danger); } @media (max-width: 34rem) { .field-row { grid-template-columns: 1fr; gap: .3rem; } } /* self-test crypto ZK (M6, collaudo): righe verdi/rosse */ .zk-ok td { color: var(--success); } .zk-fail td { color: var(--danger); } /* attivazione ZK: riquadro del recovery code (mostrato una volta) */ .zk-recovery { border: 1px solid var(--accent); border-radius: 8px; padding: 1rem 1.25rem; margin-top: .75rem; max-width: 640px; } .zk-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); padding: .75rem 1rem; border-radius: var(--radius); white-space: pre-wrap; word-break: break-all; user-select: all; margin: .5rem 0; } /* ---------- copertina della consegna (decisione #9) ---------- */ /* card admin: pillola ☆/★ per scegliere la copertina (solo album di consegna) */ .cover-row { margin: .35rem .5rem .5rem; } .cover-toggle { padding: .2rem .6rem; font-size: .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); cursor: pointer; } .cover-toggle:hover { border-color: var(--accent); } .cover-toggle.is-cover { border-color: var(--accent); color: var(--accent); font-weight: 600; } /* pagina del cliente: foto grande col titolo sopra */ .delivery-hero { position: relative; margin: 0 0 1.25rem; border-radius: var(--radius); overflow: hidden; } .delivery-hero img { display: block; width: 100%; max-height: 46vh; object-fit: cover; } .delivery-hero-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2.5rem 1.25rem .9rem; font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.15; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); /* leggibile su qualsiasi foto, chiara o scura, in entrambi i temi */ background: linear-gradient(transparent, rgba(0, 0, 0, .55)); } /* ---------- etichette XMP (decisione #7): form utente e pannellino album ---------- */ .xmp-labels-form, .album-labels-form { display: grid; gap: .6rem; max-width: 34rem; margin: .5rem 0 0; } .xmp-labels-form select, .album-labels-form select { padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); } .custom-labels { display: grid; gap: .4rem; padding: .6rem .75rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); } .custom-label-row { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: .5rem; } .custom-label-row input { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); } .xmp-labels-form .btn, .album-labels-form .btn { justify-self: start; } /* ---------- modalità async della revisione (decisione #8) ---------- */ .async-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 0 0 1rem; } .async-toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; } /* scelta fatta ma non ancora inviata: la card lo dice a colpo d'occhio */ .photo-card.pending-sync { outline: 2px dashed #d97706; outline-offset: -2px; } /* confronto foto per foto: overlay sopra la galleria, coerente coi due temi */ .async-conflicts { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .55); } .async-conflicts-box { width: min(38rem, 100%); max-height: 85vh; overflow-y: auto; padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); } .async-conflicts-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .async-conflicts-head h2 { margin: 0; } .async-conflicts-box ul { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .75rem; } .conflict-item { display: grid; grid-template-columns: 4rem 1fr; gap: .6rem .75rem; align-items: start; padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); } .conflict-item img { width: 4rem; height: 4rem; object-fit: cover; border-radius: calc(var(--radius) / 2); } .conflict-body { display: grid; gap: .15rem; font-size: .9rem; } .conflict-choice { grid-column: 1 / -1; display: flex; gap: .5rem; justify-content: flex-end; } /* ---------- Filtro Libreria stile Lightroom ---------- */ .library-filter .lf-badge { margin-left: .5rem; padding: .1rem .5rem; font-size: .8rem; border-radius: 999px; background: var(--accent); color: #fff; } .lf-attribute { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .5rem 0 .75rem; } .lf-group { display: inline-flex; align-items: center; gap: .3rem; } .lf-op, .lf-pill, .lf-star { padding: .15rem .45rem; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); font-size: .85rem; } .lf-star { border: none; padding: .15rem .05rem; font-size: 1.05rem; } .lf-op.active, .lf-pill.active { border-color: var(--accent); color: var(--accent); font-weight: 600; } .lf-star.active { color: #eab308; } .lf-dot { width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid transparent; display: inline-block; } .lf-dot.active { border-color: var(--text); } .lf-dot-red { background: #dc2626; } .lf-dot-yellow { background: #eab308; } .lf-dot-green { background: #16a34a; } .lf-dot-blue { background: #2563eb; } .lf-dot-purple { background: #9333ea; } .lf-clear { margin-left: auto; } /* riga metadati: colonne affiancate, scroll orizzontale se non ci stanno */ .lf-columns { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .25rem; } .lf-column { min-width: 11rem; max-height: 14rem; overflow-y: auto; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); font-size: .85rem; } .lf-column-title { font-weight: 600; margin-bottom: .3rem; } .lf-value { display: flex; justify-content: space-between; gap: .5rem; padding: .1rem .25rem; border-radius: calc(var(--radius) / 2); text-decoration: none; color: var(--text); } .lf-value:hover { background: var(--surface); } .lf-value.active { background: var(--accent); color: #fff; } .lf-value .lf-count { opacity: .65; } .lf-indent { margin-left: .8rem; } /* ============================================================ Sidebar admin (stile GitLab) — sostituisce la navbar orizzontale. Desktop: colonna sticky collassabile a rotaia di icone (html[data-sidebar='collapsed'], stato in localStorage, applicato pre-paint). Mobile (≤900px): off-canvas con topbar + backdrop. ============================================================ */ .admin-shell { display: flex; align-items: stretch; min-height: 100vh; } .admin-main { flex: 1 1 auto; min-width: 0; } .sidebar { position: sticky; top: 0; display: flex; flex-direction: column; flex: 0 0 auto; width: 14.5rem; height: 100vh; height: 100dvh; padding: .6rem; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; overflow-x: hidden; transition: width .12s ease; /* veloce: legata al click di collasso, niente bloat */ } .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .25rem; margin-bottom: .5rem; } .sidebar-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .45rem .55rem; font-weight: 650; font-size: 1.05rem; color: inherit; text-decoration: none; border-radius: var(--radius); white-space: nowrap; } .sidebar-brand:hover { background: var(--surface-2); } .sidebar-collapse { flex: 0 0 auto; padding: .35rem .55rem; border: 0; border-radius: var(--radius); background: none; color: var(--text-muted); font: inherit; cursor: pointer; } .sidebar-collapse:hover { background: var(--surface-2); color: var(--text); } .sidebar-collapse-icon { display: inline-block; } /* Chiusura del pannello mobile senza JS: esiste solo là (v. media query in fondo, dove l'off-canvas si apre con :target). */ .sidebar-close { display: none; } .sidebar-group { display: flex; flex-direction: column; gap: .1rem; padding: .4rem 0; } .sidebar-group + .sidebar-group { border-top: 1px solid var(--border); } .sidebar-group-title { padding: .25rem .55rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* il gruppo contestuale dell'album si distingue appena dal resto */ .sidebar-context .sidebar-group-title { color: var(--text); } .sidebar-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: var(--radius); color: inherit; text-decoration: none; font-size: .92rem; line-height: 1.2; white-space: nowrap; } .sidebar-item:hover { background: var(--surface-2); } .sidebar-item.is-active { background: var(--surface-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } /* CTA di sezione (M9): "Nuovo album" / "Condividi". Risalta come i .btn-primary del resto dell'app (stesse variabili → contrasto garantito nei due temi) e si stacca dalle voci di navigazione, mute. Nella rotaia collassata resta un quadrotto con la sola icona. */ .sidebar-primary { margin-bottom: .3rem; background: var(--btn-bg); color: var(--btn-text); font-weight: 600; } .sidebar-primary:hover { background: var(--btn-bg); color: var(--btn-text); filter: brightness(.96); } [data-theme='dark'] .sidebar-primary:hover, :root:not([data-theme='light']) .sidebar-primary:hover { filter: brightness(1.12); } /* sotto-voce (es. Timeline → Foto/Album): rientra sotto la madre; nella rotaia collassata vale la regola generale (quadrotto icona centrato) */ .sidebar-child { padding-left: 1.6rem; font-size: .88rem; } .sidebar-icon { flex: 0 0 1.35rem; width: 1.35rem; text-align: center; } .sidebar-label { overflow: hidden; text-overflow: ellipsis; } .sidebar-foot { display: flex; flex-direction: column; gap: .1rem; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--border); } .sidebar-user { display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .3rem .55rem; font-size: .82rem; color: var(--text-muted); white-space: nowrap; } /* il toggle tema dentro la sidebar si allinea alle altre voci */ .sidebar .theme-toggle { justify-content: flex-start; gap: .6rem; min-height: 0; padding: .45rem .55rem; border: 0; font-size: .92rem; } /* --- stato collassato: rotaia di sole icone, tooltip nei title --- */ html[data-sidebar='collapsed'] .sidebar { width: 3.6rem; padding: .6rem .35rem; } html[data-sidebar='collapsed'] .sidebar .sidebar-label, html[data-sidebar='collapsed'] .sidebar .sidebar-group-title { display: none; } html[data-sidebar='collapsed'] .sidebar-head { flex-direction: column; gap: .1rem; } html[data-sidebar='collapsed'] .sidebar .sidebar-item, html[data-sidebar='collapsed'] .sidebar-brand, html[data-sidebar='collapsed'] .sidebar-user, html[data-sidebar='collapsed'] .sidebar .theme-toggle { justify-content: center; padding-left: .3rem; padding-right: .3rem; } html[data-sidebar='collapsed'] .sidebar-collapse-icon { transform: scaleX(-1); } /* --- topbar e off-canvas mobile --- */ .admin-topbar { display: none; } .sidebar-backdrop { display: none; } .sidebar-mobile-open { display: none; } @media (max-width: 900px) { .admin-shell { display: block; } .admin-topbar { position: sticky; top: 0; z-index: 30; /* sotto il loupe (50): a schermo intero copre tutto lui */ display: flex; align-items: center; gap: .5rem; padding: .4rem .75rem; background: var(--surface); border-bottom: 1px solid var(--border); } .sidebar-mobile-open { display: inline-flex; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; /* sopra loupe (50) e conflitti (60): aperta a richiesta */ width: 15.5rem; height: auto; transform: translateX(-100%); transition: transform .12s ease; box-shadow: var(--shadow); } /* su mobile il collasso non si applica: o aperta piena o chiusa */ html[data-sidebar='collapsed'] .sidebar { width: 15.5rem; padding: .6rem; } html[data-sidebar='collapsed'] .sidebar .sidebar-label, html[data-sidebar='collapsed'] .sidebar .sidebar-group-title { display: revert; } html[data-sidebar='collapsed'] .sidebar .sidebar-item, html[data-sidebar='collapsed'] .sidebar-brand, html[data-sidebar='collapsed'] .sidebar-user, html[data-sidebar='collapsed'] .sidebar .theme-toggle { justify-content: flex-start; padding-left: .55rem; padding-right: .55rem; } html[data-sidebar='collapsed'] .sidebar-head { flex-direction: row; } .sidebar-collapse { display: none; } .admin-shell.sidebar-open .sidebar { transform: translateX(0); } /* Senza JavaScript l'off-canvas lo apre il CSS: l'hamburger è un link a #app-sidebar e :target fa scorrere dentro il pannello. È l'UNICO modo di raggiungere la navigazione da telefono a JS spento (I9) — con JS il controller intercetta il click, l'ancora non scatta e comanda la classe .sidebar-open come sempre. */ html:not(.js) .sidebar:target { transform: translateX(0); } html:not(.js) .sidebar-close { display: inline-flex; flex: 0 0 auto; padding: .35rem .55rem; border-radius: var(--radius); color: var(--text-muted); text-decoration: none; } .admin-shell.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / 40%); } } /* chi chiede meno movimento (SO) non paga le transizioni della sidebar */ @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* ============================================================ Pagina Account — il registro dello studio. Stessa grammatica dei fogli provini ma senza striscia (qui non ci sono foto): schede quiete, intestazioni di sezione nella voce monospace delle annotazioni tecniche, dati (IP, date, contatori) in mono tabellare. L'identità apre la pagina: l'email è il titolo, i fatti sono la sua riga tecnica. ============================================================ */ .account-stack { display: grid; gap: 1rem; margin-top: 1.25rem; } /* gli item di grid hanno min-width:auto = min-content: la tabella sessioni allargherebbe la card (e la pagina) oltre il viewport su mobile — il contenuto largo deve scorrere DENTRO la card (.table-scroll), mai il body */ .account-stack > *, .account-grid > * { min-width: 0; } /* due schede affiancate quando c'è spazio (credenziali) */ .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); gap: 1rem; align-items: start; } .account-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; } /* scheda-form singola (nuovo album, ecc.) */ .form-card { max-width: 640px; margin-top: 1.25rem; } /* l'intestazione di scheda è un'annotazione, non un titolo urlato: la gerarchia la fa il contenuto */ .account-card h2 { margin: 0 0 .75rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .account-email { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 650; overflow-wrap: anywhere; } /* fatti in riga: coppie ETICHETTA valore nella voce mono */ .account-facts { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; margin: 0; } .account-facts > div { display: flex; align-items: baseline; gap: .4rem; } .account-facts dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); } .account-facts dd { margin: 0; font-family: var(--font-mono); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .account-form { display: flex; flex-direction: column; gap: .75rem; max-width: 26rem; } .account-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; } .account-form button { align-self: flex-start; } /* dati tabellari (IP, date) nella voce tecnica */ .mono { font-family: var(--font-mono); font-size: .8rem; font-variant-numeric: tabular-nums; } .session-current { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--success); white-space: nowrap; } .account-sessions-cut { margin-top: .75rem; } /* ---------- pannello attività: salute dipendenze (P7) ---------- */ .deps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }