/* etiket.ai — CSS minimo, nessun framework esterno, deve funzionare offline. */ /* Font del brand, self-hosted (GDPR, niente CDN a runtime): file variabili, sottoinsieme latino — copre l'italiano accentato. */ @font-face { font-family: 'Space Grotesk'; src: url('/static/fonts/space-grotesk-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; } @font-face { font-family: 'Instrument Sans'; src: url('/static/fonts/instrument-sans-latin.woff2') format('woff2'); font-weight: 400 600; font-display: swap; } :root { --bg: #f5f3ec; --bg-pannello: #ffffff; --testo: #0e1512; --testo-tenue: #6b665e; --bordo: #e2ddd3; --bg-input: #ffffff; --accento: #a6612c; --accento-testo: #ffffff; --errore: #b3261e; --sidebar-bg: #23201b; --sidebar-testo: #ded8cc; --sidebar-testo-attivo: #ffffff; --radius: 6px; } /* --- Temi (#21): preset scelti in /impostazioni, mai un editor libero ----- Due assi indipendenti sull'elemento (data-colore, data-modalita) — evita l'esplosione combinatoria di un preset per ogni coppia colore/modo. "Verde" allineato al Verde bosco di marca (Fase 2, #30). */ [data-colore="verde"] { --accento: #1f6b45; } [data-colore="blu"] { --accento: #3a6ea5; } [data-colore="bordeaux"] { --accento: #8a2f45; } [data-modalita="scuro"] { --bg: #1c1a17; --bg-pannello: #26231e; --testo: #ece7de; --testo-tenue: #a89e8f; --bordo: #3a352c; --bg-input: #2e2a24; --sidebar-bg: #141210; --errore: #ff6b60; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--testo); font-family: 'Instrument Sans', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.45; } a { color: var(--accento); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Marchio (Fase 2, #30): simbolo tag+scintilla + wordmark, riusato in topbar, sidebar e login. `fill: currentColor` sul tag cosi' eredita il colore del contenitore (bianco su sidebar scura, inchiostro sul login); la scintilla resta sempre Lime, e' l'unico punto dove compare. */ .marchio { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; } .marchio-simbolo { width: 1.4em; height: 1.4em; flex-shrink: 0; fill: currentColor; } .marchio-scintilla { fill: #b9f227; } .marchio-testo-accento { opacity: .82; } .layout { display: block; } .topbar { display: none; } .backdrop { display: none; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 240px; overflow-y: auto; z-index: 20; background: var(--sidebar-bg); color: var(--sidebar-testo); padding: 1.25rem 0; display: flex; flex-direction: column; } .sidebar-brand { font-size: 1.2rem; color: #fff; padding: 0 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: .5rem; } .sidebar-section { padding: 1rem 1.25rem .25rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #a49b8a; } .sidebar-nav { list-style: none; margin: 0; padding: 0; } .sidebar-nav li a { display: flex; align-items: center; gap: .6rem; padding: .5rem 1.25rem; color: var(--sidebar-testo); } .sidebar-nav li a:hover { background: rgba(255,255,255,.08); text-decoration: none; color: var(--sidebar-testo-attivo); } .icona { font-size: 1.1rem; line-height: 1; } .sidebar-logout { margin-top: auto; padding: 1rem 1.25rem 0; } .sidebar-logout button { width: 100%; } .content { margin-left: 240px; padding: 2rem; } .tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --- iPad: sidebar a rail, solo icone ------------------------------------ */ @media (max-width: 1024px) { .sidebar { width: 64px; } .sidebar-brand, .sidebar-section, .etichetta, .sidebar-logout { display: none; } .sidebar-nav li a { justify-content: center; padding: .75rem 0; } .icona { font-size: 1.3rem; } .content { margin-left: 64px; } } /* --- Telefono: sidebar come cassetto aperto da un hamburger -------------- */ @media (max-width: 640px) { .topbar { display: flex; align-items: center; gap: .75rem; background: var(--sidebar-bg); color: #fff; padding: .75rem 1rem; position: sticky; top: 0; z-index: 20; } .hamburger { background: none; border: none; color: #fff; font-size: 1.4rem; padding: .25rem .5rem; cursor: pointer; } .topbar-brand { font-size: 1.1rem; } .sidebar { width: 240px; z-index: 30; transform: translateX(-100%); transition: transform .2s ease; } .sidebar-brand, .sidebar-section, .etichetta, .sidebar-logout { display: block; } .sidebar-nav li a { justify-content: flex-start; padding: .5rem 1.25rem; } body.menu-aperto .sidebar { transform: translateX(0); } body.menu-aperto .backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; } .content { margin-left: 0; padding: 1.25rem; } button, .bottone, input[type=text], input[type=number], input[type=password], input[type=date], input[type=email], select, textarea { min-height: 44px; font-size: 16px; /* evita lo zoom automatico di iOS al focus */ } } h1, h2, h3 { line-height: 1.2; overflow-wrap: break-word; } .pannello { background: var(--bg-pannello); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 1.25rem; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--bordo); } button, input, select, textarea { font: inherit; color: inherit; } button, .bottone { background: var(--accento); color: var(--accento-testo); border: none; border-radius: var(--radius); padding: .5rem 1rem; cursor: pointer; } button:hover, .bottone:hover { opacity: .9; } .bottone-secondario { background: var(--bg); color: var(--testo); border: 1px solid var(--bordo); } .bottone-pericolo { background: var(--errore); } /* --- Liste e azioni (#32): un pattern unico al posto delle tabelle dense. Righe leggibili invece di colonne; le tabelle restano solo dove il confronto in colonna serve davvero (es. archivio HACCP). */ .lista-righe { display: flex; flex-direction: column; gap: .5rem; } .riga-lista { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--bg-pannello); border: 1px solid var(--bordo); border-radius: var(--radius); padding: .75rem 1rem; } .riga-lista.riga-attenzione { border-color: var(--errore); } .riga-corpo { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: .2rem; } .riga-titolo { font-weight: 600; } .riga-titolo a { color: var(--testo); } .riga-dettagli { font-size: .85rem; color: var(--testo-tenue); display: flex; gap: .1rem 1rem; flex-wrap: wrap; } .stato-badge { display: inline-block; font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; } /* Azioni in riga: un'azione primaria, al massimo una secondaria visibile, il resto (in particolare le azioni distruttive) dietro il menu "⋯" —
nativo, niente JS di libreria. */ .azioni { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; } .menu-azioni { position: relative; } .menu-azioni > summary { list-style: none; cursor: pointer; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bordo); border-radius: var(--radius); font-size: 1.1rem; background: var(--bg-pannello); } .menu-azioni > summary::-webkit-details-marker, .menu-azioni > summary::marker { display: none; content: ""; } .menu-azioni > summary:hover { background: var(--bg); } .menu-azioni[open] > summary { border-color: var(--accento); } .menu-azioni-lista { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 40; background: var(--bg-pannello); border: 1px solid var(--bordo); border-radius: var(--radius); min-width: 10rem; padding: .3rem; display: flex; flex-direction: column; gap: .1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); } .menu-azioni-lista a, .menu-azioni-lista button { background: none; color: var(--testo); border: none; text-align: left; padding: .5rem .6rem; border-radius: calc(var(--radius) - 2px); font-size: .9rem; width: 100%; min-height: 40px; } .menu-azioni-lista a:hover, .menu-azioni-lista button:hover { background: var(--bg); text-decoration: none; } .menu-azioni-lista .voce-pericolo { color: var(--errore); } /* --- Modali (#39): nativo, niente libreria --- */ dialog { border: none; border-radius: var(--radius); padding: 1.25rem; background: var(--bg-pannello); color: var(--testo); max-width: 480px; width: calc(100% - 2rem); box-shadow: 0 8px 32px rgba(0, 0, 0, .25); } dialog::backdrop { background: rgba(0, 0, 0, .45); } dialog h2 { margin-top: 0; } dialog .azioni-modale { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; } input[type=text], input[type=number], input[type=password], input[type=date], input[type=email], select, textarea { padding: .45rem .6rem; border: 1px solid var(--bordo); border-radius: var(--radius); background: var(--bg-input); width: 100%; } .errore { color: var(--errore); } /* --- Login: pagina isolata, senza sidebar ------------------------------- */ .pagina-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .riquadro-login { background: var(--bg-pannello); border: 1px solid var(--bordo); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 320px; } .riquadro-login h1 { font-size: 1.05rem; margin: 0 0 1.5rem; } .riquadro-login .marchio-simbolo { width: 2.5rem; height: 2.5rem; } .riquadro-login label { display: block; font-size: .85rem; color: var(--testo-tenue); margin-bottom: .3rem; } .riquadro-login button { width: 100%; margin-top: .75rem; } /* --- Stampa: usata dalle etichette e dai documenti nelle wave successive - */ @media print { .noprint, .sidebar, button, .bottone { display: none !important; } .content { margin-left: 0; padding: 0; } body { background: #fff; } }