/* ===================================================================== Gestionale Moovy - foglio di stile Tema: Vetro (DR-047). Palette campionata dal logo. La struttura non conosce i colori: tutto passa dalle variabili qui sotto. Cambiare tema significa cambiare un attributo sul , non toccare una regola. Due verdi, non uno (DR-048): --mint #08CEB7 il verde del logo. Decorazioni, sfumature. Come testo darebbe 1,5:1 - illeggibile. --mint-ink la stessa tinta, scurita fino a 4,5:1. E' l'unico che puo' scrivere. ===================================================================== */ /* ---------------------------------------------------------------- */ /* 1. Temi */ /* ---------------------------------------------------------------- */ /* `color-scheme` dice al browser di che colore e' la pagina, e da quello lui tinge le cose che disegna DA SOLO e che il nostro CSS non raggiunge: la barra di scorrimento, il calendario dei campi data, la freccia delle tendine di sistema. Serve da quando l'elenco clienti scorre dentro il suo riquadro: senza, su Notturno compariva una barra di scorrimento chiara in mezzo a una pagina scura - lo stesso rettangolo bianco fuori posto del campo di ricerca, solo disegnato dal browser invece che da noi. */ /* Vetro - predefinito */ :root, :root[data-tema="vetro"]{ color-scheme: light; --ink:#0E2B3F; --dim:#456580; --bg:#E4F1F2; --surf:rgba(255,255,255,.66); --surf2:rgba(255,255,255,.42); --line:rgba(255,255,255,.72); --surf-border:rgba(255,255,255,.85); --accent:#0A79B8; --mint:#08CEB7; --mint-ink:#047164; --good:#047164; --warn:#8A5A0C; --bad:#B02A37; --radius:16px; --blur:blur(18px) saturate(1.35); --card-shadow:0 1px 1px rgba(255,255,255,.8) inset,0 10px 30px rgba(14,60,90,.16); /* Piu' tenue di quella del mockup: li' stava dentro una cornice di 700px, qui copre uno schermo intero e alla stessa intensita' diventa invadente. Un fondo si nota quando manca, non quando c'e'. */ --ground: radial-gradient(52% 58% at 2% 0%,rgba(8,206,183,.42),transparent 64%), radial-gradient(54% 62% at 100% 6%,rgba(6,155,249,.34),transparent 62%), radial-gradient(60% 50% at 24% 100%,rgba(4,187,207,.26),transparent 66%), linear-gradient(158deg,#EDF8F7 0%,#E2EDF8 100%); } /* Salina - chiaro */ :root[data-tema="salina"]{ color-scheme: light; --ink:#0F2A42; --dim:#5A7183; --bg:#EDF3F6; --surf:#FFFFFF; --surf2:#F7FBFC; --line:#DCE7EC; --surf-border:#DCE7EC; --accent:#0B7FC4; --mint:#08CEB7; --mint-ink:#057B6D; --good:#057B6D; --warn:#9A6410; --bad:#B02A37; --radius:12px; --blur:none; --card-shadow:0 1px 2px rgba(15,42,66,.05),0 6px 18px rgba(15,42,66,.06); --ground:none; } /* Notturno - scuro */ :root[data-tema="notturno"]{ color-scheme: dark; --ink:#E7F1F6; --dim:#8CA6B6; --bg:#0B1926; --surf:#122735; --surf2:#17303F; --line:#22404F; --surf-border:#22404F; --accent:#3FB2F5; --mint:#08CEB7; --mint-ink:#09DDC4; --good:#09DDC4; --warn:#EDB55E; --bad:#FF7B84; --radius:12px; --blur:none; --card-shadow:0 1px 2px rgba(0,0,0,.34),0 8px 22px rgba(0,0,0,.30); --ground:none; } /* Ripiego per gli apparati che non sanno sfocare, o non se lo possono permettere (DR-049). La sfocatura dietro un pannello e' l'effetto piu' caro dell'interfaccia: su un tablet economico si sente. Qui i pannelli diventano opachi; palette, spaziature e tipografia non cambiano. */ @supports not (backdrop-filter: blur(2px)){ :root,:root[data-tema="vetro"]{ --surf:rgba(255,255,255,.94); --surf2:rgba(255,255,255,.80); --surf-border:rgba(160,196,214,.55); --blur:none; } } :root[data-solido="1"]{ --surf:rgba(255,255,255,.94)!important; --surf2:rgba(255,255,255,.80)!important; --surf-border:rgba(160,196,214,.55)!important; --blur:none!important; } /* ---------------------------------------------------------------- */ /* 2. Fondamenta */ /* ---------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* L'attributo hidden e' solo un display:none del browser, e QUALUNQUE regola che imposti display lo scavalca in silenzio: .btn e' inline-flex, quindi un pulsante nascosto con .hidden restava li', visibile e inerte. Costato una segnalazione sul primo modulo a piu' passi. Qui vale per tutto il gestionale. */ [hidden]{display:none!important} html{background:var(--bg)} body{ margin:0;min-height:100vh; background:var(--ground),var(--bg); background-attachment:fixed; color:var(--ink); font-family:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif; font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased; } /* Gli importi, le quantita' e i codici stanno in un carattere a spaziatura fissa: in una colonna di prezzi un '1' largo quanto un '8' e' la differenza fra leggere e ricontare. */ .num,.mono{ font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; font-variant-numeric:tabular-nums; } a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.2} h1{font-size:26px;font-weight:800} h2{font-size:19px;font-weight:700} h3{font-size:15px;font-weight:700} .dim{color:var(--dim)} .eyebrow{ font-size:13.5px;text-transform:uppercase;letter-spacing:.11em; font-weight:700;color:var(--dim); } /* ---------------------------------------------------------------- */ /* 3. Impaginazione */ /* ---------------------------------------------------------------- */ /* Fascia dell'ispezione. E' l'unico rosso dell'interfaccia, di proposito: deve essere impossibile dimenticarsi di stare dentro i dati di un cliente. */ .ispezione{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:9px 22px;font-size:13.5px;line-height:1.4; background:#8C1D2B;color:#FFF1F1;position:sticky;top:0;z-index:40; } .ispezione > b{ font-size:13.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:800; background:rgba(255,255,255,.16);padding:3px 9px;border-radius:999px;flex:none; } .ispezione b{color:#fff} .ispezione .sp{flex:1} .ispezione button{ font:inherit;font-size:13.5px;font-weight:700;cursor:pointer; background:#FFF1F1;color:#8C1D2B;border:none;border-radius:999px;padding:6px 16px; } .ispezione button:hover{background:#fff} .ispezione + .topbar{top:39px} .topbar{ /* Il passo scende da 16 a 12: la barra ha nove figli, quindi otto spazi, e quattro pixel a testa sono trentadue pixel - esattamente quello che mancava alla settima voce per stare su una riga. */ display:flex;align-items:center;gap:12px;padding:12px 22px; background:var(--surf);backdrop-filter:var(--blur); border-bottom:1px solid var(--surf-border); position:sticky;top:0;z-index:30; } .topbar .logo{height:24px;width:auto;display:block} /* Il nome della sede e' la prima cosa da sapere entrando: dice DOVE si sta lavorando, e sbagliare sede vuol dire ricaricare il braccialetto di un ospite in un'altra struttura. Va nel colore dei valori che contano (DR-156), non in quello delle etichette. */ /* Misurato su 1366: oltre 290 px questo blocco spinge la settima voce della barra a capo (misurato: 260). Il nome resta grande; se e' lunghissimo si taglia con i puntini - la sede si riconosce dalle prime parole, e per esteso c'e' comunque il titolo al passaggio. TRAPPOLA GIA' PAGATA: i puntini vogliono `overflow:hidden`, e `overflow:hidden` sul CONTENITORE ritaglia tutto quello che ne esce - comprese le tendine che si aprono verso il basso. Messo qui, spegneva il menu del tema e quello del cambio sede: i due `details` restavano aperti, alti 135 px e con lo sfondo giusto, ma tagliati a zero e quindi invisibili. Sembrava un pulsante rotto, ed era una riga di CSS su un altro elemento. Il taglio va quindi sul TESTO, non sulla scatola: `.nome-sede` e il sottotitolo si accorciano, il contenitore resta aperto e le tendine escono. */ .topbar .sede{font-weight:800;font-size:17px;line-height:1.2;color:var(--mint-ink); letter-spacing:-.01em;max-width:260px} /* La barra dell'amministratore di struttura ha SEI voci, non sette: i 260 px qui sopra erano tarati sulla settima, che qui non c'e'. Con 340 px la riga « · amministratore» si legge per intero. */ .topbar.barra-admin .sede{max-width:340px} .topbar .sede .nome-sede{display:block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar .sede span{display:block;font-weight:500;font-size:13.5px;color:var(--dim); letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar .sp{flex:1} /* Le voci stanno al centro, fra i due spaziatori. Misurato su 1366: con il nome della sede piu' grande le sette voci ci stanno solo stringendo i fianchi delle pastiglie da 13 a 10 px - togliere una voce non era un'opzione, e rimpicciolire il testo sotto i 13,5 px nemmeno (DR-155). */ .nav{display:flex;gap:3px;flex-wrap:wrap;justify-content:center} .nav a{ font-size:13.5px;font-weight:600;text-decoration:none;color:var(--dim); padding:7px 10px;border-radius:999px;border:1px solid transparent; } .nav a:hover{color:var(--ink);background:var(--surf2)} .nav a[aria-current="page"]{ color:var(--ink);background:var(--surf2);border-color:var(--surf-border); } .oper{ display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600; background:var(--surf2);border:1px solid var(--surf-border); border-radius:999px;padding:4px 6px 4px 4px;text-decoration:none;color:var(--ink); } .avatar{ width:26px;height:26px;border-radius:999px;display:grid;place-items:center; background:linear-gradient(135deg,var(--mint),var(--accent)); color:#fff;font-size:13.5px;font-weight:800;flex:none; } .oper .esci{ font-size:13.5px;font-weight:600;color:var(--dim);text-decoration:none; padding:3px 9px;border-radius:999px; } .oper .esci:hover{background:var(--surf);color:var(--bad)} main{max-width:1100px;margin:0 auto;padding:30px 22px 70px} .intestazione{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px} .intestazione .sp{flex:1} /* ---------------------------------------------------------------- */ /* 4. Schede */ /* ---------------------------------------------------------------- */ .card{ background:var(--surf);backdrop-filter:var(--blur); border:1px solid var(--surf-border);border-radius:var(--radius); box-shadow:var(--card-shadow);padding:22px; } .card + .card{margin-top:16px} /* ...ma non dentro una griglia: li' lo spazio lo mette gia' il gap, e questo margine in piu' faceva crescere la riga di 16px. La prima carta, che il margine non ce l'ha, si stirava per riempirla ed era piu' alta delle altre. Un difetto che si vede solo affiancandole. */ .griglia > .card + .card{margin-top:0} .card > h2{margin-bottom:4px} .card > .eyebrow{margin-bottom:14px;display:block} .griglia{display:grid;gap:16px} .griglia.due{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .griglia.tre{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .dato{display:flex;flex-direction:column;gap:2px} .dato b{font-size:22px;font-weight:700;letter-spacing:-.02em} .dato b.num{font-size:24px;font-weight:600} /* ---------------------------------------------------------------- */ /* 5. Pastiglie di stato */ /* ---------------------------------------------------------------- */ .pill{ display:inline-flex;align-items:center;gap:6px; font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; padding:4px 10px;border-radius:999px;border:1px solid; background:var(--surf2); } .pill.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,transparent)} .pill.att{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)} .pill.no{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)} .pill.neutro{color:var(--dim);border-color:var(--surf-border)} .pill i{width:6px;height:6px;border-radius:99px;background:currentColor;flex:none} /* ---------------------------------------------------------------- */ /* 6. Tabelle */ /* ---------------------------------------------------------------- */ .tabella-wrap{overflow-x:auto;margin:0 -6px;padding:0 6px} table{border-collapse:collapse;width:100%;font-size:14px} th{ text-align:left;font-size:13.5px;text-transform:uppercase;letter-spacing:.1em; font-weight:700;color:var(--dim);padding:0 12px 9px;white-space:nowrap; } td{ padding:11px 12px;border-top:1px solid color-mix(in srgb,var(--line) 65%,transparent); vertical-align:middle; } tbody tr:hover td{background:var(--surf2)} td.num,th.num{text-align:right} .vuoto{padding:34px 12px;text-align:center;color:var(--dim);font-size:14px} /* ---------------------------------------------------------------- */ /* 7. Moduli */ /* ---------------------------------------------------------------- */ .campo{display:flex;flex-direction:column;gap:5px} .campo label{ font-size:13.5px;text-transform:uppercase;letter-spacing:.09em; font-weight:700;color:var(--dim); } /* Il vestito dei campi sta sugli ELEMENTI, non su `.campo`. Legato alla classe, un campo che nasce FUORI da un `.campo` - la ricerca dei clienti, la tendina «quanti per pagina» - si prendeva il rettangolo bianco del browser in mezzo a una pagina scura. E si notava. Il verso giusto e' lo stesso di DR-154 per la selezione del testo: si veste tutto e si scopre l'eccezione, invece di elencare i pezzi da vestire e dimenticarne sempre uno. Ogni pagina nuova ne porta di suoi. Fuori restano le caselle e i pallini: hanno un disegno loro - la leva di `.interruttore` - e un fondo con un bordo li deformerebbe. Fuori anche i nascosti, che non si vedono per definizione. */ input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea{ font:inherit;font-size:15px;color:var(--ink); background:var(--surf2);border:1px solid var(--surf-border); border-radius:10px;padding:11px 13px; } input::placeholder,textarea::placeholder{color:var(--dim);opacity:.7} input:not([type=checkbox]):not([type=radio]):focus, select:focus,textarea:focus{ outline:none;border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); } /* Le tendine hanno la freccetta del sistema, che su fondo scuro sparisce o resta nera. Se ne disegna una nostra e si spegne quella - `appearance` va messa anche col prefisso, che Safari la vuole ancora. */ select{ appearance:none;-webkit-appearance:none;-moz-appearance:none; padding-right:34px; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%), linear-gradient(135deg,var(--dim) 50%,transparent 50%); background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size:5px 5px,5px 5px; background-repeat:no-repeat; } /* Dentro un `.campo` occupano la riga: e' la colonna che decide la larghezza, non il contenuto. Fuori, ognuno si dice la sua. */ .campo input,.campo select,.campo textarea{width:100%} .campo .aiuto{font-size:13.5px;color:var(--dim);line-height:1.45} /* Campo password con il pulsante mostra/nascondi. Chi digita una password lunga su una tastiera che non conosce ha diritto di controllare cosa ha scritto: senza, l'unico responso e' "non corretti". */ .con-occhio{position:relative;display:flex;align-items:center} .con-occhio input{padding-right:46px} .occhio{ position:absolute;right:6px; display:grid;place-items:center;width:34px;height:34px; background:none;border:none;border-radius:8px;cursor:pointer; color:var(--dim);padding:0; } .occhio:hover{color:var(--ink);background:var(--surf)} .occhio:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .altra-porta{ font-size:13.5px;color:var(--dim);text-align:center;line-height:1.5; margin:16px 0 0;padding-top:14px;border-top:1px solid var(--surf-border); } .altra-porta a{color:var(--accent);font-weight:600} .btn{ font:inherit;font-size:14px;font-weight:600;cursor:pointer; padding:11px 18px;border-radius:10px; border:1px solid var(--surf-border);background:var(--surf2);color:var(--ink); text-decoration:none;display:inline-flex;align-items:center;gap:8px; } .btn:hover{border-color:var(--accent)} .btn.primario{ border:none;color:#fff;font-weight:700;font-size:15px;padding:13px 20px; background:linear-gradient(135deg,var(--mint),var(--accent)); box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 32%,transparent); justify-content:center; } .btn.primario:hover{filter:brightness(1.06)} .btn[disabled]{opacity:.5;cursor:not-allowed} /* ---------------------------------------------------------------- */ /* 8. Avvisi */ /* ---------------------------------------------------------------- */ .avviso{ display:flex;gap:11px;align-items:flex-start; padding:13px 15px;border-radius:11px;font-size:14px;line-height:1.5; border:1px solid;margin-bottom:16px;background:var(--surf2); } .avviso b{display:block;font-weight:700;margin-bottom:1px} .avviso.err{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 38%,transparent)} .avviso.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 38%,transparent)} .avviso.info{color:var(--ink);border-color:var(--surf-border)} .avviso.info .eyebrow{color:var(--dim)} /* ---------------------------------------------------------------- */ /* 9. Accesso */ /* ---------------------------------------------------------------- */ .accesso{min-height:100vh;display:grid;place-items:center;padding:34px 20px} .accesso .card{width:100%;max-width:380px;padding:30px} .accesso .logo{height:32px;width:auto;display:block;margin:0 auto 22px} .accesso form{display:flex;flex-direction:column;gap:15px} .accesso .nota{ font-size:13.5px;color:var(--dim);text-align:center;line-height:1.5; margin:4px 0 0; } /* ---------------------------------------------------------------- */ /* 10. Pie' di pagina */ /* ---------------------------------------------------------------- */ .piede{ max-width:1100px;margin:0 auto;padding:0 22px 30px; font-size:13.5px;color:var(--dim);display:flex;gap:14px;flex-wrap:wrap; } .piede .sp{flex:1} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* -------------------------------------------------------------------- Cambio di sede e di struttura (migrazione 009). Compare solo a chi ha davvero piu' di una scelta: con una sede sola la parola "sede" non deve nemmeno apparire (DR-076). -------------------------------------------------------------------- */ /* Blocco, non riga: cosi' il nome della sede tiene la sua riga e il cambio sede va sotto. In linea, con il taglio a 260 px, i due finivano sulla stessa riga e a essere tagliato era il nome - cioe' l'unica cosa che si doveva vedere. */ .sede .passa { position: relative; display: block; } .sede .passa > summary { cursor: pointer; list-style: none; border-radius: 8px; padding: 2px 20px 2px 6px; margin-left: -6px; } .sede .passa > summary::-webkit-details-marker { display: none; } .sede .passa > summary::after { content: ""; position: absolute; right: 7px; top: 50%; width: 5px; height: 5px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; } .sede .passa[open] > summary { background: var(--velo, rgba(0,0,0,.05)); } .sede .passa > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .sede .passa .menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: -6px; min-width: 200px; padding: 8px; border-radius: 12px; background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow); } .sede .passa .menu p { margin: 2px 8px 8px; font-size:13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); font-weight: 700; } .sede .passa .menu form { display: block; } .sede .passa .menu button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 7px 9px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink); } .sede .passa .menu button:hover { background: var(--velo, rgba(0,0,0,.05)); } .sede .passa .menu button[aria-current] { font-weight: 700; color: var(--accent); } /* ---------------------------------------------------------------- */ /* Cruscotto della sede */ /* ---------------------------------------------------------------- */ /* L'area dei negozi: a sinistra l'insieme, a destra il singolo. Con un negozio solo la divisione sparisce da se' - la colonna di sinistra resta, ma non c'e' niente da confrontare e la tabella e' corta. */ .cruscotto-negozi{display:grid;grid-template-columns:250px 1fr;gap:0} .cn-insieme{padding-right:20px;border-right:1px solid var(--surf-border)} .cn-singolo{padding-left:20px;min-width:0} @media (max-width:820px){ .cruscotto-negozi{grid-template-columns:1fr} .cn-insieme{padding:0 0 16px;border-right:none;border-bottom:1px solid var(--surf-border)} .cn-singolo{padding:16px 0 0} } .cn-insieme .num{font-size:32px;font-weight:600;display:block;line-height:1.1} .cn-insieme .num.presto{color:var(--dim);opacity:.5} .cn-reali{margin-top:20px;padding-top:16px;border-top:1px solid var(--surf-border); display:flex;flex-direction:column;gap:10px} .cn-reali .num{font-size:20px;display:inline;margin-right:8px} .cn-reali span{font-size:13.5px;color:var(--dim)} /* La pastiglia che dice «non ancora, e da quando». Tratteggiata: si distingue a colpo d'occhio da cio' che funziona davvero. */ .fase-nota{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:13.5px;color:var(--dim);border:1px dashed var(--surf-border); border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:middle} .porte{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px} .porta{flex:1 1 240px;background:var(--surf);border:1px solid var(--surf-border); border-radius:var(--radius);padding:14px 16px;box-shadow:var(--card-shadow)} .porta.spenta{opacity:.72;border-style:dashed;box-shadow:none;background:var(--surf2)} .porta b{font-size:16px} .porta span.dim{display:block;margin-top:5px;font-size:13.5px} .in-arrivo{background:var(--surf2);border:1px dashed var(--surf-border); border-radius:12px;padding:12px 14px} .in-arrivo span.dim{display:block;margin-top:4px;font-size:13.5px} /* Voce di menu non ancora attiva: si vede che c'e' e che non si clicca. Prende la stessa forma delle altre - senza, le voci si appiccicano fra loro e si leggono come una parola sola. */ .nav .presto{ font-size:13.5px;font-weight:600;color:var(--dim);opacity:.45; padding:7px 13px;border-radius:999px;border:1px dashed var(--surf-border); cursor:default; } /* ===================================================================== L'AREA DELL'AMMINISTRATORE DI STRUTTURA e le due schermate d'ingresso (accesso, scelta della sede). Tutto quello che sta qui sotto usa le stesse variabili di sopra: sul tema Notturno cambiano i valori, non le regole. Una classe che nominasse un colore invece di una variabile funzionerebbe su un tema solo, e si scoprirebbe cambiando tema - cioe' tardi. ===================================================================== */ /* ---------------------------------------------------------------- */ /* Ingresso: marchio in alto a sinistra, pannello al centro */ /* ---------------------------------------------------------------- */ .accesso .marchio{padding:26px 30px;display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap} .accesso .marchio img{height:30px;width:auto;display:block} .accesso .marchio .claim{ flex-basis:100%;font-size:13.5px;color:var(--dim); letter-spacing:.02em;font-weight:500;margin-top:-2px; } .accesso .marchio .chi{margin-left:auto;font-size:13.5px;color:var(--dim)} .accesso .centro{flex:1;display:grid;place-items:center;padding:0 20px 40px} .accesso h2{margin-bottom:20px} .accesso .sotto{font-size:13.5px;color:var(--dim);margin:-16px 0 20px} /* La versione in fondo, sotto una riga. E' la prima domanda dell'assistenza al telefono, e questa e' l'unica pagina che si vede senza essere entrati. */ .accesso .versione{ margin:0;padding:16px 30px 26px;border-top:1px solid var(--surf-border); display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--dim); } .accesso .versione .sp{flex:1} .come-link{ font:inherit;font-size:13.5px;background:none;border:none;cursor:pointer; color:var(--accent);padding:0;text-decoration:underline; } /* Scelta della struttura o della sede: righe grandi, un bersaglio solo */ .elenco-scelte{display:flex;flex-direction:column;gap:12px} .elenco-scelte form{display:block} .scelta{ display:flex;align-items:center;gap:16px;width:100%;text-align:left; cursor:pointer;font:inherit;color:var(--ink); background:var(--surf2);border:1px solid var(--surf-border); border-radius:var(--radius);padding:14px 16px; } .scelta:hover{border-color:var(--accent)} .scelta .sp{flex:1;min-width:0} .scelta b{font-size:16px;font-weight:700;display:block;letter-spacing:-.02em} .scelta .riga2{display:block;font-size:13.5px;color:var(--dim);margin-top:2px} .scelta .freccia{color:var(--dim);font-size:20px;flex:none;line-height:1} .scelta.grande{ background:var(--surf);box-shadow:var(--card-shadow);padding:18px 20px; } .scelta.grande b{font-size:17px} .scelta-sede .dentro{width:100%;max-width:620px} .scelta-sede h1{margin-bottom:4px} /* ---------------------------------------------------------------- */ /* Impaginazione delle pagine di amministrazione */ /* ---------------------------------------------------------------- */ .topbar .sede .ruolo{display:block;font-weight:500;font-size:13.5px;color:var(--dim); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sezione{display:flex;flex-direction:column;gap:12px;margin-top:26px} .sezione:first-of-type{margin-top:0} .testata{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .testata .sp{flex:1} .testata .spiega{font-size:13.5px;color:var(--dim)} .intestazione .codice{font-size:13.5px;color:var(--dim);margin:4px 0 0} .intestazione .codice b{color:var(--ink);font-weight:600} .card.stretta{padding:18px 20px} .card.vuoto-vero{padding:26px 22px} .card.vuoto-vero b{font-size:16px;display:block;margin-bottom:6px} .card.vuoto-vero p{margin:0;font-size:14px;line-height:1.55} /* Quello che chiede di essere fatto. Questa riga deve essere vuota quasi sempre: un riquadro che dice «tutto a posto» dopo due giorni non lo legge piu' nessuno, e con lui non si legge piu' nemmeno il giorno in cui c'e' scritto qualcosa. */ .attenzione{display:flex;flex-direction:column;gap:10px;margin-bottom:4px} .riga-avviso{ display:flex;gap:12px;align-items:center;flex-wrap:wrap; padding:12px 15px;border-radius:11px;font-size:14px;line-height:1.45; border:1px solid;background:var(--surf2); } .riga-avviso .sp{flex:1;min-width:60px} .riga-avviso .segno{ font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;flex:none; } .riga-avviso.att{border-color:color-mix(in srgb,var(--warn) 38%,transparent)} .riga-avviso.att .segno{color:var(--warn)} .riga-avviso.no{border-color:color-mix(in srgb,var(--bad) 38%,transparent)} .riga-avviso.no .segno{color:var(--bad)} /* ---------------------------------------------------------------- */ /* I riquadri: un servizio in licenza, oppure una sede */ /* ---------------------------------------------------------------- */ .servizi{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))} .servizio{ background:var(--surf);border:1px solid var(--surf-border); border-radius:var(--radius);box-shadow:var(--card-shadow); padding:0;display:flex;flex-direction:column;overflow:hidden; } .servizio header{padding:16px 18px 12px;display:flex;gap:12px;align-items:flex-start} .servizio header .sp{flex:1;min-width:0} .servizio .tipo{ font-size:13.5px;text-transform:uppercase;letter-spacing:.11em; font-weight:700;color:var(--dim); } .servizio h3{font-size:17px;margin-top:3px} .servizio h3.vuoto{color:var(--warn)} .servizio .corpo{padding:0 18px 14px;display:flex;flex-direction:column} .servizio footer{ margin-top:auto;padding:11px 18px;background:var(--surf2); border-top:1px solid var(--surf-border);display:flex;gap:8px;flex-wrap:wrap; } /* Un negozio che non vende resta leggibile: i suoi dati ci sono tutti, e il gestore ci deve poter guardare dentro (DR-103). Si smorza, non si spegne. */ .servizio.fermo{opacity:.74} .riga{ display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); } .riga .sp{flex:1;min-width:0} .riga .val{font-weight:600;font-size:14px} .riga .val.piccolo,.mono.piccolo{font-size:13.5px} /* ---------------------------------------------------------------- */ /* Mezzi di pagamento */ /* ---------------------------------------------------------------- */ .mezzi{display:flex;gap:10px;flex-wrap:wrap} .mezzo{ display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600; background:var(--surf2);border:1px solid var(--surf-border); border-radius:999px;padding:7px 15px; } .mezzo i{width:7px;height:7px;border-radius:99px;background:var(--good);flex:none} .mezzo.spento{color:var(--dim);border-style:dashed;font-weight:500} .mezzo.spento i{background:var(--dim);opacity:.5} /* ---------------------------------------------------------------- */ /* Pulsanti piccoli dentro i riquadri e le tabelle */ /* ---------------------------------------------------------------- */ .mini{ font:inherit;font-size:13.5px;font-weight:600;color:var(--dim);cursor:pointer; padding:5px 11px;border-radius:999px;border:1px solid var(--surf-border); background:transparent;text-decoration:none;display:inline-flex;align-items:center; } .mini:hover{color:var(--ink);border-color:var(--accent)} .mini.forte{color:var(--ink)} .mini.pericolo:hover{color:var(--bad);border-color:var(--bad)} .mini.spento{color:var(--dim);opacity:.45;border-style:dashed;cursor:default} .mini.spento:hover{border-color:var(--surf-border);color:var(--dim)} /* L'azione che INVITA, quando la riga esiste proprio perche' la si faccia: «metti a listino» su un articolo che a listino non c'e'. Un `.mini` normale e' grigio su grigio - e' giusto per «modifica», «spegni», le cose che stanno li' in attesa - ma a colpo d'occhio si legge DISABILITATO, e chi guarda la riga pensa di non poterci fare niente. Questa prende l'asola e il testo del verde dell'interfaccia: resta un pulsantino di riga, ma si vede che si preme. */ .mini.invita{color:var(--mint-ink);border-color:var(--mint); background:color-mix(in srgb, var(--mint) 12%, transparent)} .mini.invita:hover{color:var(--ink);border-color:var(--mint-ink); background:color-mix(in srgb, var(--mint) 22%, transparent)} .btn.piccolo{font-size:13.5px;padding:6px 12px;border-radius:8px} .btn.primario.stretto{font-size:14px;padding:11px 20px} td.azioni{text-align:right;white-space:nowrap} td.azioni .mini + .mini{margin-left:6px} /* Le pagine di amministrazione stanno su una workstation, non al banco: la tabella delle persone ha sette colonne e l'ultima e' fatta di pulsanti. In 1100 px non ci sta, e quello che avanza finiva dietro a una barra di scorrimento orizzontale - il modo peggiore di nascondere delle colonne, perche' a essere nascosta era proprio quella con i comandi. */ body.admin main{max-width:1400px} /* L'elenco che scorre da solo. Regola: scorre la LISTA, non la pagina e non l'intestazione. Se le righe diventano trenta, si scorre dentro il riquadro e i nomi delle colonne restano in cima - una tabella lunga di cui non si vede piu' l'intestazione si legge contando le colonne con il dito. Niente barra orizzontale: `overflow-x:hidden`. Non taglia niente, perche' i pulsanti dell'ultima colonna adesso vanno a capo invece di allargare la riga all'infinito. */ .tabella-lista{overflow-x:hidden;max-height:62vh;overflow-y:auto} .tabella-lista td.azioni{white-space:normal} .tabella-lista td.azioni .mini{margin:2px 0 2px 6px} .tabella-lista td.azioni .mini + .mini{margin-left:6px} /* L'intestazione ferma vuole uno sfondo OPACO, se no le righe le passano sotto e si leggono attraverso. Su Notturno e Salina `--surf` e' gia' pieno; su Vetro e' semitrasparente, quindi sotto ci va il colore della pagina: i due strati insieme danno esattamente la tinta che il riquadro ha gia'. */ .tabella-lista thead th{ position:sticky;top:0;z-index:1;padding-top:4px; background-color:var(--bg); background-image:linear-gradient(var(--surf),var(--surf)); } tr.spenta td{color:var(--dim)} /* ---------------------------------------------------------------- */ /* La finestra a due passi */ /* ---------------------------------------------------------------- */ body.fermo{overflow:hidden} .velo{ position:fixed;inset:0;z-index:80;background:rgba(4,12,20,.72); display:grid;place-items:center;padding:24px; } .modale{ width:100%;max-width:490px;background:var(--surf);border:1px solid var(--line); border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden; max-height:calc(100vh - 60px);display:flex;flex-direction:column; } .modale > header{ padding:20px 24px 14px;border-bottom:1px solid var(--surf-border); display:flex;gap:12px;align-items:flex-start; } .modale > header .sp{flex:1} .modale .passo{ display:block;margin-bottom:3px;font-size:13.5px;text-transform:uppercase; letter-spacing:.11em;font-weight:700;color:var(--dim); } .modale .contenuto{padding:22px 24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto} .modale > footer{ padding:14px 24px 18px;border-top:1px solid var(--surf-border); display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;background:var(--surf2); } .modulo-modale{display:flex;flex-direction:column;gap:16px} .modulo-modale .spiega{margin:0;font-size:13.5px;line-height:1.5} .chiudi{ font:inherit;background:none;border:none;color:var(--dim);cursor:pointer; font-size:22px;line-height:1;padding:2px 6px;border-radius:8px;flex:none; } .chiudi:hover{color:var(--ink);background:var(--surf2)} /* Il riepilogo del secondo passo. Non e' un «sei sicuro?»: quello si clicca senza leggerlo, ed e' peggio di niente perche' fa credere che ci sia una protezione. Qui ci sono i valori veri appena scritti. */ .riepilogo{ background:var(--surf2);border:1px solid var(--surf-border); border-radius:12px;padding:2px 16px; } .riepilogo dl{margin:0} .riepilogo div{ display:flex;gap:14px;align-items:baseline;padding:10px 0; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); } .riepilogo div:first-child{border-top:none} .riepilogo dt{ font-size:13.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:700; color:var(--dim);flex:none;width:130px; } .riepilogo dd{margin:0;font-size:14.5px;font-weight:600;flex:1;word-break:break-word} /* La conseguenza: cosa succede, e cosa non si torna indietro. */ .conseguenza{ display:flex;gap:11px;align-items:flex-start;padding:13px 15px; border-radius:11px;font-size:13.5px;line-height:1.5;border:1px solid; background:var(--surf2);color:var(--ink); } .conseguenza b{display:block;margin-bottom:2px} .conseguenza.att{border-color:color-mix(in srgb,var(--warn) 38%,transparent)} .conseguenza.att b{color:var(--warn)} .conseguenza.no{border-color:color-mix(in srgb,var(--bad) 42%,transparent)} .conseguenza.no b{color:var(--bad)} /* ---------------------------------------------------------------- */ /* La password che si consegna */ /* ---------------------------------------------------------------- */ /* Sta in cima alla pagina e non in una finestra: una finestra si chiude per riflesso, e con lei se ne andrebbe l'unica copia. */ .consegna{ background:var(--surf);border:1px solid color-mix(in srgb,var(--mint-ink) 45%,transparent); border-radius:var(--radius);box-shadow:var(--card-shadow); padding:20px 22px;margin-bottom:22px;display:flex;flex-direction:column;gap:14px; } .consegna .testata{display:block} .consegna h2{margin-top:2px} .consegna .coppia{display:flex;gap:34px;flex-wrap:wrap} .consegna .coppia b{display:block;font-size:17px;font-weight:600;margin-top:2px} .consegna .coppia b.grande{font-size:22px;color:var(--mint-ink);letter-spacing:.04em} .consegna p{margin:0;font-size:13.5px;line-height:1.5} /* ---------------------------------------------------------------- */ /* Il piede di pagina legale */ /* ---------------------------------------------------------------- */ /* Sta in fondo alla FINESTRA, non in fondo al contenuto: la pagina d'accesso e' una colonna flex e il pannello resta al centro, quindi questa riga non lo spinge mai sotto la piega (DR-094 - la misura e' 1366x768, cioe' 648 pixel utili). Testo piccolo, bersagli no (DR-098): sui monitor del settore si clicca col dito, e sotto i 44 pixel si apre «Cookie» volendo «Privacy». Il padding verticale e' quello che porta ogni voce all'altezza giusta - togliendolo si risparmiano 20 pixel e si perde il senso della riga. */ .piede-legale{ display:flex;align-items:center;gap:2px;flex-wrap:wrap; padding:6px 24px 14px;min-height:44px; font-size:13.5px;color:var(--dim); } .piede-legale a{ color:var(--dim); /* Sempre sottolineato, mai solo al passaggio del mouse: su un touch il passaggio del mouse non esiste, quindi un collegamento che si annuncia cosi' non si annuncia mai. */ text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; padding:12px 10px;border-radius:8px; display:inline-flex;align-items:center;min-height:44px; } /* Il verde del marchio come testo da 1,5:1 e non si legge (DR-048): qui si usa --mint-ink, che e' la stessa tinta portata a 4,5:1. */ .piede-legale a:hover{color:var(--mint-ink)} .piede-legale a:focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* Il separatore non e' un bersaglio e non si legge ad alta voce. */ .piede-legale .sep{opacity:.5;padding:0 2px;user-select:none} .piede-legale .sp{flex:1;min-width:12px} .piede-legale .versione{font-size:13.5px;white-space:nowrap;padding:12px 0} /* Su finestra stretta la versione va a capo sotto le voci e la riga resta centrata: e' l'unico punto in cui l'ordine cambia. */ @media (max-width:560px){ .piede-legale{justify-content:center;padding-left:14px;padding-right:14px} .piede-legale .sp{flex-basis:100%;height:0;min-width:0} } /* ---------------------------------------------------------------- */ /* Le pagine legali */ /* ---------------------------------------------------------------- */ .pagina-legale .marchio{padding:26px 30px} .pagina-legale .marchio img{height:26px;width:auto;display:block} .pagina-legale .centro{align-items:start;padding-top:8px} .documento{ width:100%;max-width:640px; background:var(--surf);border:1px solid var(--surf-border); border-radius:var(--radius);box-shadow:var(--card-shadow);padding:30px 34px; } .documento h1{margin:4px 0 16px;font-size:24px} /* Il testo lungo si legge su una colonna stretta: oltre i 70 caratteri l'occhio perde la riga di ritorno. */ .documento .corpo{margin:0 0 14px;font-size:15px;line-height:1.65;max-width:62ch} .documento .chi-firma{ margin:0 0 18px;padding:12px 15px;font-size:13.5px;line-height:1.5; background:var(--surf2);border:1px solid var(--surf-border);border-radius:11px; } .documento .quando{ margin:20px 0 0;padding-top:14px;border-top:1px solid var(--surf-border); font-size:13.5px;color:var(--dim); } .documento .altra-porta{margin-top:14px;text-align:left} /* ---------------------------------------------------------------- */ /* I poteri del responsabile di sede (DR-126) */ /* ---------------------------------------------------------------- */ /* Dieci interruttori in fila si leggono male; tre gruppi da tre o quattro si leggono. Il raggruppamento non e' decorazione: e' l'unica cosa che rende la domanda «chi puo' stornare una riga?» una domanda a cui si risponde guardando. */ .poteri{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .gruppo-poteri{ background:var(--surf);border:1px solid var(--surf-border); border-radius:var(--radius);box-shadow:var(--card-shadow);padding:16px 18px; } .gruppo-poteri > .eyebrow{display:block;margin-bottom:10px} .gruppo-poteri ul{list-style:none;margin:0;padding:0} .gruppo-poteri li{ display:flex;gap:11px;align-items:flex-start;padding:11px 0; border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); } .gruppo-poteri li:first-child{border-top:none} .gruppo-poteri li .sp{flex:1;min-width:0} .gruppo-poteri li b{display:block;font-size:14px;font-weight:600;line-height:1.35} .gruppo-poteri li .dim{display:block;font-size:13.5px;line-height:1.45;margin-top:2px} /* Il segno vale piu' del colore: su un elenco lungo il verde e il grigio si confondono, un ✓ e un ✕ no - e chi non distingue i colori legge comunque. */ .segno-potere{ flex:none;width:20px;text-align:center;font-size:14px;font-weight:700; line-height:1.5; } .gruppo-poteri li.si .segno-potere{color:var(--good)} .gruppo-poteri li.no .segno-potere{color:var(--dim);opacity:.6} .gruppo-poteri li.no b{color:var(--dim)} .gruppo-poteri li .pill,.gruppo-poteri li .fase-nota{flex:none;margin-top:1px} /* L'interruttore dentro la finestra */ .campo-poteri{display:flex;flex-direction:column;gap:2px} .campo-poteri > .eyebrow{display:block;margin-bottom:6px} .interruttore{ display:flex;gap:12px;align-items:flex-start;cursor:pointer; padding:10px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent); } .campo-poteri .interruttore:first-of-type{border-top:none} .interruttore .sp{flex:1;min-width:0} .interruttore b{display:block;font-size:14px;font-weight:600;line-height:1.35} .interruttore .dim{display:block;font-size:13.5px;line-height:1.45;margin-top:2px} /* La casella vera resta nel modulo - e' lei che viene inviata - ma non si vede: si vede la leva. Nasconderla con display:none la toglierebbe anche dalla tastiera. */ .interruttore input{ position:absolute;opacity:0;width:0;height:0; } .leva{ flex:none;width:38px;height:22px;border-radius:999px;margin-top:1px; background:var(--surf2);border:1px solid var(--surf-border); position:relative;transition:background .12s,border-color .12s; } .leva::after{ content:"";position:absolute;top:2px;left:2px;width:16px;height:16px; border-radius:999px;background:var(--dim);transition:transform .12s,background .12s; } .interruttore input:checked + .leva{ background:color-mix(in srgb,var(--good) 26%,transparent); border-color:color-mix(in srgb,var(--good) 55%,transparent); } .interruttore input:checked + .leva::after{transform:translateX(16px);background:var(--good)} .interruttore input:focus-visible + .leva{outline:2px solid var(--accent);outline-offset:2px} /* Lo stato a parole sta sempre, la nota sulla fase solo dove serve: in colonna, cosi' la riga non si allarga e i due pezzi non si confondono fra loro. */ .stato-potere{ flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:1px; } /* ---------------------------------------------------------------- */ /* Il registro */ /* ---------------------------------------------------------------- */ /* I tre filtri affiancati: l'etichetta sopra, le schegge sotto in UNA riga che non va a capo. Niente si sposta quando si sceglie - cambia solo il colore di quella premuta. Un filtro i cui pulsanti cambiano posto a ogni clic obbliga a rileggerli tutti ogni volta. */ .filtri{ display:flex;flex-wrap:wrap;gap:16px 30px;margin-bottom:18px;align-items:flex-start; background:var(--surf);border:1px solid var(--surf-border); border-radius:var(--radius);padding:16px 18px;box-shadow:var(--card-shadow); } /* Ogni gruppo e' largo quanto gli serve, e va a capo INTERO quando non ci sta. La prima versione lo incastrava in una colonna di griglia fissa: le schegge in fondo finivano fuori dal bordo e sparivano - un filtro nascosto e' peggio di un filtro assente, perche' chi lo cerca crede che non esista. Misurato a 1366: due file, niente di tagliato. */ .gruppo-filtro{display:flex;flex-direction:column;gap:8px;flex:0 1 auto;min-width:0} .gruppo-filtro > .eyebrow{display:block} /* Le schegge di un gruppo restano su una riga sola: se le sedi diventano tante scorre quel gruppo, non la pagina. */ .filtri .fila{ display:flex;gap:6px;flex-wrap:nowrap;max-width:100%; overflow-x:auto;padding-bottom:2px;scrollbar-width:thin; } .scheggia{ flex:0 0 auto; /* non si allarga e non si stringe */ display:inline-flex;align-items:center;gap:7px; min-height:36px;padding:7px 14px;border-radius:999px; font-size:13.5px;font-weight:600;white-space:nowrap; color:var(--dim);text-decoration:none; background:var(--surf2);border:1px solid var(--surf-border); } .scheggia:hover{color:var(--ink);border-color:var(--accent)} .scheggia b{ font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px; font-weight:600;opacity:.75; } /* Lo stato scelto sta su aria-current e non su una classe: «.scelta» esisteva gia' in questo foglio - e' la riga grande della scelta della sede, larga il 100% - e il filtro selezionato diventava largo quanto la pagina. Un nome di classe riusato rompe cose lontane. */ .scheggia[aria-current]{ color:#04121B;background:var(--mint-ink);border-color:var(--mint-ink); } .scheggia[aria-current] b{opacity:.7} .scheggia[aria-current]:hover{color:#04121B;filter:brightness(1.06)} .scheggia.verde[aria-current] {background:var(--good);border-color:var(--good)} .scheggia.giallo[aria-current]{background:var(--warn);border-color:var(--warn)} .scheggia.rosso[aria-current] {background:var(--bad);border-color:var(--bad)} table.registro td{vertical-align:top} table.registro td.quando{white-space:nowrap;font-size:13.5px;color:var(--dim);padding-top:13px} table.registro td.dettaglio{font-size:13.5px;color:var(--dim);line-height:1.5;max-width:46ch} table.registro .sotto{font-size:13.5px;opacity:.55} /* Il pallino porta il colore del livello. Un pallino e non una riga colorata: dieci righe gialle di fila diventano un muro e smettono di segnalare qualcosa. */ .pallino{ display:inline-block;width:7px;height:7px;border-radius:99px; margin-right:9px;vertical-align:middle;background:var(--dim);flex:none; } tr.liv-info .pallino{background:var(--good)} tr.liv-warning .pallino{background:var(--warn)} tr.liv-error .pallino{background:var(--bad)} tr.liv-warning td:nth-child(2){color:var(--warn)} tr.liv-error td:nth-child(2){color:var(--bad);font-weight:600} .nota-registro{font-size:13.5px;line-height:1.55;margin:16px 0 0;max-width:62ch} /* L'estensione appiccicata al campo: si vede che c'e' e non si puo' cancellare per sbaglio. Scriverla dentro il campo la renderebbe modificabile, e un foglio Excel chiamato «.xls» non si apre. */ .con-coda{display:flex;align-items:stretch} .con-coda input{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none} .con-coda .coda{ display:flex;align-items:center;padding:0 13px;flex:none; font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13.5px;color:var(--dim); background:var(--surf);border:1px solid var(--surf-border); border-top-right-radius:10px;border-bottom-right-radius:10px; } /* ---------------------------------------------------------------- */ /* Il logo segue il tema */ /* ---------------------------------------------------------------- */ /* Il marchio scuro sparisce su fondo scuro e quello chiaro su fondo chiaro. Fino a DR-151 lo sceglieva il server, perche' il tema era deciso dalla pagina; adesso si cambia nel browser senza ricaricare, quindi il server non lo sa piu'. Ci sono tutte e due le immagini e qui se ne nasconde una - e' la sola cosa che sa reagire al cambio. La specificita' non e' un caso: «.topbar .logo{display:block}» piu' sopra vale 0,2,0, quindi una regola con una classe sola perderebbe. */ .logo.logo-chiaro{display:none} :root[data-tema="notturno"] .logo.logo-scuro{display:none} :root[data-tema="notturno"] .logo.logo-chiaro{display:block} /* ---------------------------------------------------------------- */ /* Niente si seleziona, tranne quello che si copia davvero */ /* ---------------------------------------------------------------- */ /* Strisciare il mouse e vedersi evidenziare mezza pagina fa sembrare il gestionale un documento invece che un programma. Un programma non si evidenzia: si usa. Il verso giusto e' spegnere TUTTO e riaccendere le poche cose che si copiano per davvero. Provando a elencare i pezzi da spegnere se ne dimentica sempre uno, e ogni pagina nuova ne porta di suoi. Restano selezionabili: - quello che si sta scrivendo (campi, aree di testo, tendine); - i CODICI in carattere a spaziatura fissa - licenze, nomi utente, identificativi: si dettano al telefono E si incollano in una mail, e toglierli alla copia sarebbe un fastidio vero. */ body{-webkit-user-select:none; user-select:none} input, textarea, select, .mono, code, pre, .consegna b{ -webkit-user-select:text; user-select:text; } /* ---------------------------------------------------------------- */ /* Il colore nei titoli */ /* ---------------------------------------------------------------- */ /* Una pagina tutta grigia si legge bene e non si guarda. Il colore serve a far trovare le cose senza leggerle: il titolo di un riquadro, il nome di un negozio, un orario. Si usano --mint-ink e --accent, MAI --mint: misurato, il verde del marchio come colore di testo sul tema Vetro da' 1,9:1 - illeggibile (DR-048). Le due varianti scelte danno da 4,3:1 a 8,9:1 sui tre temi. --mint-ink i titoli e i valori che contano --accent le etichette e i sottotitoli */ /* Il titolo della pagina: sfumatura del marchio, con il ripiego dichiarato prima per i browser che non sanno ritagliare lo sfondo. */ .intestazione h1{ color:var(--mint-ink); background:linear-gradient(100deg,var(--mint-ink),var(--accent)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; width:fit-content; } /* I titoli dei riquadri, con la barretta davanti che li fa trovare scorrendo la pagina con la coda dell'occhio. */ .card > h2, .testata h2{ color:var(--mint-ink);display:flex;align-items:center;gap:10px; } .card > h2::before, .testata h2::before{ content:"";width:4px;height:1.05em;border-radius:99px;flex:none; background:linear-gradient(180deg,var(--mint-ink),var(--accent)); } /* Il nome di un negozio nella sua scheda, e il tipo sopra. */ .servizio h3{color:var(--accent)} .servizio .tipo{color:var(--mint-ink)} .eyebrow{color:var(--accent)} /* Le fasce dei tempi di attesa: l'orario e' il dato, e si vede. */ .fascia .n{color:var(--accent)} .fascia .val{color:var(--mint-ink)} .scaglione{ color:var(--mint-ink); border-color:color-mix(in srgb,var(--mint-ink) 40%,transparent); background:color-mix(in srgb,var(--mint-ink) 8%,transparent); } /* Nelle finestre: l'etichetta del riepilogo e il passo. */ .riepilogo dt{color:var(--accent)} .modale > header h2{color:var(--mint-ink)} .campo label,.spunte > .titolo{color:var(--accent)} /* ---------------------------------------------------------------- */ /* Righe di spunta dentro le finestre a due passi */ /* ---------------------------------------------------------------- */ /* Le righe di spunta della finestra. Nomi nuovi e non `.campo` o `.scelta`: la prima rende le etichette maiuscole e minuscole e stira gli input al 100% della larghezza - su una casella di spunta viene fuori un quadratino perso in mezzo a un riquadro; la seconda e' la scheda grande usata altrove. E' la quarta volta che un nome di classe riusato rompe qualcosa di lontano. */ .spunte{display:flex;flex-direction:column;gap:7px} .spunte > .titolo{font-size:13.5px;text-transform:uppercase;letter-spacing:.09em; font-weight:700;color:var(--dim)} /* La riga sopra le spunte: il titolo a sinistra, «abilita tutte» a destra. */ .capo-spunte{display:flex;align-items:center;gap:10px} .capo-spunte .sp{flex:1} .spunta{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer; padding:9px 13px;border:1px solid var(--surf-border);border-radius:10px; background:var(--surf2);font-size:14.5px} .spunta:hover{border-color:var(--accent)} .spunta input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent)} .spunta b{font-weight:600} .spunta em{font-style:normal;font-size:13.5px;color:var(--dim);margin-left:auto; text-align:right} .spunta.spento{opacity:.55;cursor:not-allowed;border-style:dashed} .spunta.spento:hover{border-color:var(--surf-border)}