/* * adobe-theme.css — re-skin "Adobe Acrobat" (Spectrum design language). * * Caricato PER ULTIMO in : sovrascrive i token di app.css (che è * token-based) con la palette Adobe Spectrum, imposta il font Source Sans 3 * (font open di Adobe, il più vicino ad "Adobe Clean") e rifinisce la chrome * (brand, mode-switch, pulsanti, tab) verso l'aspetto Acrobat. Nessuna modifica * a markup/JS → nessun impatto funzionale. */ /* ---------------- Font: Source Sans 3 (self-hosted, subset latin) ---------------- */ @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url('/app/vendor/fonts/source-sans-3-400.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url('/app/vendor/fonts/source-sans-3-600.woff2') format('woff2'); } @font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url('/app/vendor/fonts/source-sans-3-700.woff2') format('woff2'); } :root { --font-adobe: 'Source Sans 3', 'Adobe Clean', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } body, button, input, select, textarea, .brand { font-family: var(--font-adobe); } /* ============================ TOKEN — LIGHT (Spectrum) ============================ * ⚠️ Il selettore DEVE elencare anche `[data-theme="light"]`. * app.css dichiara gli stessi token come `:root, :root[data-theme="light"]` * (specificità 0,1,1) mentre qui bastava `:root` (0,1,0). Siccome initTheme() * mette SEMPRE l'attributo data-theme, in chiaro vinceva app.css e tutta questa * palette era codice morto — mentre in scuro i selettori si pareggiavano e vinceva * l'ultimo file, cioè questo. Effetto misurato: --r-md valeva 8px in chiaro e 6px * in scuro, quindi cambiando tema cambiava la GEOMETRIA dell'interfaccia. */ :root, :root[data-theme="light"] { /* Accento: Spectrum blue */ --accent: #1473e6; --accent-hover: #0d66d0; --accent-active: #095aba; --accent-text: #1473e6; --accent-weak: #e7f0fc; --accent-weak-border: #b9dbfb; --accent-ring: rgba(20,115,230,.34); /* Superfici — grigi neutri Spectrum */ --bg: #f5f5f5; --viewer-bg: #d9d9d9; /* tela grigio-medio: la pagina bianca stacca (feel Acrobat) */ --panel: #ffffff; --surface: #ffffff; --panel-2: #f4f4f4; --surface-2: #f4f4f4; --surface-3: #e6e6e6; --border: #d5d5d5; --border-strong: #b1b1b1; --text: #222222; --text-secondary: #6d6d6d; --text-dim: #6d6d6d; --text-disabled: #b1b1b1; --text-on-accent: #ffffff; --toolbar-bg: #ffffff; --toolbar-fg: #222222; --toolbar-border: #e1e1e1; --control-bg: #f4f4f4; --control-bg-hover: #e6e6e6; --control-bg-active: #d5d5d5; --control-border: #8f8f8f; /* era #cacaca = 1,64:1 sul chiaro, sotto il 3:1 richiesto per i bordi dei controlli */ --control-fg: #222222; --control-placeholder: #6d6d6d; --mode-track-bg: #ececec; --mode-active-bg: #ffffff; --mode-active-fg: #1473e6; --success: #268e6c; --success-bg: #e4f4ee; --warning: #cb6f10; --warning-bg: #fbf0e2; --danger: #d7373f; --danger-bg: #fbeaea; --danger-hover: #b5232a; /* Ombre Spectrum: più morbide/diffuse */ --e1: 0 1px 2px rgba(0,0,0,.07); --e2: 0 2px 6px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06); --e3: 0 8px 28px rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.10); --shadow-page: 0 1px 3px rgba(0,0,0,.13), 0 10px 24px rgba(0,0,0,.10); /* Brand Acrobat */ --brand-mark: #eb1000; /* Raggi Spectrum (più stretti) */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; } /* ============================ TOKEN — DARK (Spectrum dark) ============================ */ :root[data-theme="dark"] { --accent: #2680eb; /* Sfondo delle superfici piene con testo bianco sopra: --accent dava 3,91:1. Resta separato da --accent perché quello serve ai LINK, che qui stanno su fondo scuro e scurendoli peggiorerebbero. */ --accent-solid: #1266d6; --accent-hover: #378ef0; --accent-active: #1473e6; --accent-text: #6cb0f5; --accent-weak: rgba(38,128,235,.16); --accent-weak-border: rgba(38,128,235,.34); --accent-ring: rgba(56,142,240,.45); --bg: #1e1e1e; --viewer-bg: #141414; --panel: #2a2a2a; --surface: #2a2a2a; --panel-2: #323232; --surface-2: #323232; --surface-3: #3a3a3a; --border: #3a3a3a; --border-strong: #4a4a4a; --text: #e8e8e8; --text-secondary: #a0a0a0; --text-dim: #a0a0a0; --text-disabled: #6a6a6a; --toolbar-bg: #2a2a2a; --toolbar-fg: #e8e8e8; --toolbar-border: #383838; --control-bg: #333333; --control-bg-hover: #3d3d3d; --control-bg-active: #4a4a4a; --control-border: #7e7e7e; /* era #4a4a4a = 1,62:1 sullo scuro */ --control-fg: #e8e8e8; --control-placeholder: #a0a0a0; --mode-track-bg: #1e1e1e; --mode-active-bg: #3a3a3a; --mode-active-fg: #6cb0f5; --brand-mark: #f85c4c; --e1: 0 1px 2px rgba(0,0,0,.4); --e2: 0 2px 8px rgba(0,0,0,.5); --e3: 0 10px 30px rgba(0,0,0,.6); --shadow-page: 0 2px 6px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.45); } /* ============================ RIFINITURE CHROME (Acrobat) ============================ */ /* Tipografia leggermente più stretta/nitida come nell'UI Adobe */ body { letter-spacing: .1px; -webkit-font-smoothing: antialiased; } /* Brand: mark rosso "Acrobat" + wordmark neutro */ .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; letter-spacing: .2px; } .brand::before { content: ""; width: 24px; height: 24px; flex: none; border-radius: 6px; /* tile rosso con leggero gradiente (feel icona app) + glifo documento bianco */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 2.8h6.2L18 7.6V21.2H7z'/%3E%3Cpath fill='%23000' fill-opacity='.28' d='M13.2 2.8 18 7.6h-4.8z'/%3E%3C/svg%3E") center/16px 16px no-repeat, linear-gradient(160deg, #ff3b26, var(--brand-mark) 70%); box-shadow: 0 1px 2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25); } .brand strong { color: var(--text); font-weight: 700; } /* Mode-switch: segmented control Spectrum (attivo bianco + testo accento) */ .mode-switch { border-radius: var(--r-lg); padding: 3px; gap: 2px; } .mode-switch__btn { border-radius: var(--r-sm); font-weight: 600; } .mode-switch__btn.is-active { box-shadow: 0 1px 2px rgba(0,0,0,.12); color: var(--mode-active-fg); font-weight: 700; } /* Pulsante primario Spectrum: pill blu pieno */ .btn--primary { border-radius: var(--r-full); padding: 0 18px; } .btn { border-radius: var(--r-md); } /* Tab sidebar: stile Spectrum con sottolineatura accento */ .sidebar__tab.is-active, .sidebar__tab[aria-selected="true"] { color: var(--accent-text); } /* Focus ring Spectrum (anello blu netto) */ .btn:focus-visible, .icon-btn:focus-visible, .mode-switch__btn:focus-visible, .sidebar__tab:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Miniatura pagina attiva: bordo accento Spectrum */ .thumb.is-active, .thumbnail.is-active { outline-color: var(--accent); } /* Toolbar contestuale: pulsanti "quiet" Spectrum (trasparenti, fill su hover) → toglie l'effetto "scatola" e dà l'aria pulita della barra strumenti Acrobat. Il pulsante guida (.btn--lead) e il primario restano evidenziati. */ .toolbar__mode .btn:not(.btn--primary):not(.btn--lead) { background: transparent; border-color: transparent; } .toolbar__mode .btn:not(.btn--primary):not(.btn--lead):hover { background: var(--control-bg-hover); border-color: transparent; } .toolbar__mode .btn:not(.btn--primary):not(.btn--lead):active { background: var(--control-bg-active); } /* Campo di ricerca: pill Spectrum con icona lente inline */ #search-input { border-radius: var(--r-full); padding-left: 34px; background-color: var(--control-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6d6d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; background-size: 16px 16px; } /* Tab sidebar: stile Spectrum — sottolineatura accento sul tab attivo */ .sidebar__tab { font-weight: 600; } .sidebar__tab.is-active, .sidebar__tab[aria-selected="true"] { color: var(--accent-text); box-shadow: inset 0 -2px 0 var(--accent); } /* Scrollbar sottili in stile Spectrum (chrome dell'app; il documento resta nativo) */ .sidebar *::-webkit-scrollbar, .toolbar__mode::-webkit-scrollbar { height: 10px; width: 10px; } .sidebar *::-webkit-scrollbar-thumb, .toolbar__mode::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } .sidebar *::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip: padding-box; border: 3px solid transparent; } .sidebar *::-webkit-scrollbar-track { background: transparent; } /* Toast "documento aperto": bordo accento neutro anziché verde acceso (più sobrio Adobe) */ .toast--success { border-left-color: var(--success); } /* ============================ TOOL RAIL SINISTRO (Acrobat) ============================ * La firma visiva di Acrobat: dock verticale di icone a sinistra. Riusa il * mode-switch esistente (i 4 bottoni #mode-* mantengono id/handler → JS e test * invariati). Solo DESKTOP (≥768px); su mobile il mode-switch resta com'era. * Il padding che fa spazio al rail si applica SOLO a documento aperto (quando il * mode-switch non è [hidden]) via :has() → stato vuoto invariato. * NB: non impostiamo `display` qui, così l'attributo [hidden] continua a valere. */ :root { --rail-w: 68px; } @media (min-width: 768px) { body:has(.mode-switch:not([hidden])) .toolbar, body:has(.mode-switch:not([hidden])) .workspace { padding-left: var(--rail-w); } .mode-switch { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 40; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 64px 8px 10px; /* top: sotto la prima riga dell'header */ background: var(--panel); border: none; border-right: 1px solid var(--toolbar-border); border-radius: 0; overflow-y: auto; } .mode-switch__btn { flex-direction: column; gap: 4px; height: auto; min-height: 0; padding: 9px 2px; border-radius: 8px; font-size: 10.5px; font-weight: 600; line-height: 1.1; color: var(--text-secondary); } .mode-switch__ico { width: 22px; height: 22px; flex: none; } .mode-switch__btn:hover { background: var(--control-bg-hover); color: var(--text); } .mode-switch__btn.is-active { background: var(--accent-weak); color: var(--accent-text); box-shadow: none; } .mode-switch__btn.is-active .mode-switch__ico { color: var(--accent); } .mode-switch__btn:focus-visible { outline-offset: -2px; } } /* Il mode-switch è nascosto senza documento: nessuna icona nel rail finché non apri un PDF (le icone SVG si mostrano solo nel contesto rail). */ .mode-switch__ico { display: none; } @media (min-width: 768px) { .mode-switch__btn .mode-switch__ico { display: inline-block; } }