/* ============================================================================= Pannello ArkSystems - foglio di stile unico Aspetto ricalcato su MeshCentral: fascia viola in alto con sfumatura, colonna scura di sinistra con le icone, barra delle linguette, tabelle. TUTTI i colori stanno nei blocchi qui sotto. Un tema nuovo e' un blocco nuovo: niente colori sparsi nel resto del file. ========================================================================== */ :root, [data-tema="viola"] { --sfumatura-1: #3b1a5e; --sfumatura-2: #6b2fa0; --sfumatura-3: #ad63d4; --colonna: #150a1f; --colonna-attiva: #2a1440; --sfondo: #100b16; --carta: #1a1024; --carta2: #221533; --riga: #1c1226; --riga-alt: #170f20; --bordo: #33244a; --testo: #e8e2f0; --tenue: #9b8fae; --link: #4db2ff; --acceso: #3ddc84; --spento: #ff5f56; --attenzione: #ffc857; --accento: #8b5cf6; --accento-scuro: #6f42c1; --rosa: #d0409a; --barretta: #2a1c3a; --linguette: #221b2b; --linguetta-attiva: #100b16; --ombra: rgba(0,0,0,.6); --scelta-presa: #2a1440; --oro: #e0b64a; } [data-tema="notte"] { --sfumatura-1: #0f2027; --sfumatura-2: #1c4b63; --sfumatura-3: #2f8fb5; --colonna: #0b1116; --colonna-attiva: #14222c; --sfondo: #0d1117; --carta: #161b22; --carta2: #1c2230; --riga: #161b22; --riga-alt: #12161d; --bordo: #30363d; --testo: #e6edf3; --tenue: #8b949e; --link: #58a6ff; --acceso: #3fb950; --spento: #f85149; --attenzione: #d29922; --accento: #58a6ff; --accento-scuro: #1f6feb; --rosa: #db6d9c; --barretta: #21262d; --linguette: #1b2029; --linguetta-attiva: #0d1117; --ombra: rgba(0,0,0,.6); --scelta-presa: #14222c; --oro: #d8a93c; } [data-tema="chiaro"] { --sfumatura-1: #5b2c8d; --sfumatura-2: #8b46c4; --sfumatura-3: #c98ae0; --colonna: #2b1c3d; --colonna-attiva: #3f2a58; --sfondo: #f3f0f7; --carta: #ffffff; --carta2: #f6f3fa; --riga: #ffffff; --riga-alt: #f7f4fb; --bordo: #ddd5e8; --testo: #1d1526; --tenue: #6b6178; --link: #1a6fd4; --acceso: #1a9c4e; --spento: #d32f2f; --attenzione: #b57d00; --accento: #7b3fc4; --accento-scuro: #5b2c8d; --rosa: #b5307f; --barretta: #e6e0ee; --linguette: #e4dced; --linguetta-attiva: #f3f0f7; --ombra: rgba(0,0,0,.15); --scelta-presa: #ece2f7; --oro: #a97a12; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--sfondo); color: var(--testo); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; } /* ============================================================== la fascia */ #fascia { height: 58px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: linear-gradient(100deg, var(--sfumatura-1) 0%, var(--sfumatura-2) 48%, var(--sfumatura-3) 100%); position: relative; z-index: 30; } #fascia .marchio { display: flex; align-items: center; gap: 10px; color: #fff; } #fascia .marchio .segno { width: 34px; height: 34px; } #fascia .marchio .nome { font-size: 19px; font-weight: 700; letter-spacing: .02em; } /* Il marchio adesso e' fatto di lettere, una per pezzetto: «Ark» piene e «Systems» leggere. La regola vale sulla classe, non su «span», se no diventerebbero leggere tutte quante. */ #fascia .marchio .nome .leggero { font-weight: 300; opacity: .85; } #fascia .destra { margin-left: auto; display: flex; align-items: center; gap: 14px; } #fascia .tema { display: flex; align-items: center; gap: 6px; cursor: pointer; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12px; } #fascia .tema:hover { background: rgba(0,0,0,.4); } #fascia .chi { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; } #fascia .chi .tondo { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; overflow: hidden; } #fascia .chi .tondo img { width: 24px; height: 24px; } #fascia .chi { position: relative; cursor: pointer; padding: 5px 10px; border-radius: 8px; } #fascia .chi:hover { background: rgba(0,0,0,.2); } .menuchi { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 220px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 9px; box-shadow: 0 14px 34px var(--ombra); padding: 6px; display: none; z-index: 50; } .menuchi.aperto { display: block; } .vocechi { padding: 9px 12px; border-radius: 6px; font-size: 13.5px; color: var(--testo); cursor: pointer; } .vocechi:hover { background: var(--carta2); } .menuchi .separa { height: 1px; background: var(--bordo); margin: 5px 8px; } /* ============================================================== la colonna */ #corpo { display: flex; min-height: calc(100vh - 58px); } #colonna { width: 74px; flex: 0 0 74px; background: var(--colonna); border-right: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 2px; } #colonna .voce { height: 56px; display: grid; place-items: center; cursor: pointer; position: relative; } /* La pastiglia: e' lei che si accende, non tutta la riga. Una fascia larga quanto la colonna che cambia colore fa sembrare la colonna a scacchi; un quadrato morbido attorno all'icona si legge come un pulsante. */ #colonna .voce .segnale { position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; transition: background .16s, box-shadow .16s, transform .12s; } #colonna .voce img { width: 30px; height: 30px; opacity: .62; transition: opacity .16s; } #colonna .voce:hover .segnale { background: rgba(255,255,255,.07); } #colonna .voce:hover img { opacity: .95; } #colonna .voce:active .segnale { transform: scale(.94); } #colonna .voce.qui .segnale { background: linear-gradient(145deg, var(--sfumatura-2), var(--sfumatura-1)); box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); } #colonna .voce.qui img { opacity: 1; } /* Il segno di «sei qui»: una lineetta corta sul bordo sinistro, non un bordo alto tutta la voce. */ #colonna .voce.qui::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 26px; border-radius: 0 3px 3px 0; background: var(--sfumatura-3); } /* La pallina degli allarmi, in alto a destra dell'icona. Vuota non si vede. */ #colonna .voce .pallina { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--spento); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; border: 2px solid var(--colonna); display: none; } #colonna .voce .pallina.accesa { display: block; } #colonna .voce .nomevoce { position: absolute; left: 78px; top: 50%; transform: translateY(-50%); background: var(--carta); color: var(--testo); border: 1px solid var(--bordo); font-size: 12.5px; padding: 6px 11px; border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s; z-index: 40; box-shadow: 0 8px 22px var(--ombra); } #colonna .voce .nomevoce::before { content: ''; position: absolute; left: -5px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-right-color: var(--bordo); } #colonna .voce:hover .nomevoce { opacity: 1; visibility: visible; } #pagina { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ============================================================ le linguette */ .linguette { display: flex; align-items: stretch; background: var(--linguette); border-bottom: 1px solid var(--bordo); padding-left: 12px; overflow-x: auto; } .linguette .linguetta { padding: 10px 22px; cursor: pointer; color: var(--tenue); font-size: 14px; border-right: 1px solid var(--bordo); white-space: nowrap; } .linguette .linguetta:hover { color: var(--testo); } .linguette .linguetta.qui { background: var(--linguetta-attiva); color: var(--testo); font-weight: 600; } .linguette .linguetta.dopo { opacity: .45; cursor: not-allowed; } .linguette .titolomacchina { margin-left: auto; align-self: center; padding: 0 18px; color: #fff; background: var(--accento-scuro); border-radius: 6px 6px 0 0; font-size: 12.5px; line-height: 26px; margin-top: 6px; } /* ================================================================ contenuto */ .contenuto { padding: 18px 22px 60px; flex: 1; } /* I lavori stanno sopra al contenuto e su OGNI pagina. Senza margine sotto quando e' vuota: una barra vuota che lascia comunque il suo spazio sposta in giu' il titolo di ogni schermata per niente. */ .lavoribarra { padding: 0 22px; } .lavoribarra:not(:empty) { padding-top: 14px; } h1.titolo { font-size: 22px; font-weight: 600; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; } h1.titolo .indietro { width: 30px; height: 30px; border-radius: 6px; background: var(--accento-scuro); display: grid; place-items: center; cursor: pointer; color: #fff; flex: 0 0 auto; } h1.titolo .sottonome { color: var(--tenue); font-size: 14px; font-weight: 400; } p.introduzione { color: var(--tenue); margin: 0 0 18px; max-width: 860px; } h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); margin: 26px 0 10px; font-weight: 600; } /* =================================================== elenco dei dispositivi */ .gruppo { margin-bottom: 6px; } .gruppo .capo { display: flex; align-items: center; gap: 10px; padding: 9px 4px; cursor: pointer; user-select: none; } .gruppo .capo .freccia { transition: transform .15s; color: var(--tenue); font-size: 12px; } .gruppo.chiuso .capo .freccia { transform: rotate(-90deg); } .gruppo .capo .nomegruppo { font-size: 15px; font-weight: 600; } .gruppo .capo .quanti { margin-left: auto; color: var(--tenue); font-size: 12.5px; } .gruppo.chiuso .elenco { display: none; } .elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 2px 18px; padding-bottom: 10px; } .dispositivo { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; } .dispositivo:hover { background: var(--carta); border-color: var(--bordo); } .dispositivo.trascinato { opacity: .35; } .dispositivo.bersaglio { border-color: var(--sfumatura-3); background: var(--carta2); } .dispositivo .schermo { width: 40px; height: 40px; flex: 0 0 auto; display: block; } .dispositivo .schermo img { width: 40px; height: 40px; display: block; } img.spenta { filter: grayscale(1) brightness(.7); } .dispositivo .testi { min-width: 0; flex: 1; } .dispositivo .nome { font-weight: 600; font-size: 14px; } .dispositivo .sotto { color: var(--tenue); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dispositivo .maniglia { color: var(--tenue); opacity: 0; cursor: grab; font-size: 15px; padding: 0 2px; } .dispositivo:hover .maniglia { opacity: .6; } /* ================================================================= riquadri */ /* La fila dei numeri in evidenza. Il margine sotto e' quello delle schede, perche' sotto ai riquadri viene sempre qualcos'altro: senza, la fila si appiccicava alla scheda successiva e non c'era nessuno spazio in mezzo. Succedeva in tutte le pagine che hanno i riquadri, non solo nelle nuove. */ .riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 11px; margin-bottom: 14px; } /* In pila, uno per riga: serve quando i riquadri sono un ELENCO di cose che si leggono dall'alto in basso — i moduli da installare — e non quattro numeri da guardare insieme. Affiancati, il terzo finiva a capo da solo e sembrava di un altro gruppo. */ .riquadri.inpila { grid-template-columns: 1fr; } /* Quello che sta DENTRO a un riquadro e non e' una scheda a se': una riga che separa, non un altro bordo. Una scheda dentro a una scheda sembra un'altra cosa, ed era il difetto delle credenziali della voce. */ .dentroilriquadro { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--bordo); } .dentroilriquadro .capo { margin-bottom: 0; } .riquadro { background: var(--carta); border: 1px solid var(--bordo); border-radius: 9px; padding: 13px 15px; } .riquadro .etichetta { color: var(--tenue); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; } .riquadro .valore { font-size: 22px; font-weight: 600; margin-top: 5px; line-height: 1.15; } .riquadro .sotto { color: var(--tenue); font-size: 11.5px; margin-top: 3px; } /* ================================================== schede a due colonne */ .duecolonne { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; } @media (max-width: 1000px) { .duecolonne { grid-template-columns: 1fr; } } .scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 9px; padding: 15px 17px; margin-bottom: 14px; } /* La regola degli spazi: 11px fra il titolo di una scheda e la prima cosa che ci sta sotto. Undici veri, quelli che si vedono. Prima il margine era scritto 11 ma il bianco misurato era 14, perche' in mezzo ci finivano il respiro della riga del titolo e il bordo interno della prima riga della tabella: il numero era giusto nel foglio di stile e sbagliato sullo schermo. Qui il titolo sta stretto sul suo testo e la prima riga di sotto non aggiunge bordo, cosi' l'11 scritto e l'11 visto sono lo stesso. */ .scheda > .capo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; line-height: 1; margin-bottom: 11px; } .scheda > .capo + table.dati > tbody > tr:first-child > th, .scheda > .capo + table.dati > tbody > tr:first-child > td, .scheda > .capo + table.dati > tr:first-child > th, .scheda > .capo + table.dati > tr:first-child > td { padding-top: 0; } /* Un paragrafo porta con se' due pixel di respiro sopra la sua prima riga. Non si possono togliere dal paragrafo, perche' molti hanno il margine scritto addosso e quello vince su qualunque regola: si tolgono di qua, dal titolo, che e' l'unico posto dove nessuno li puo' contraddire. */ .scheda > .capo:has(+ p) { margin-bottom: 9px; } /* ============================================================= righe dati */ table.dati { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.dati th { text-align: left; color: var(--tenue); font-weight: 600; width: 190px; padding: 5px 12px 5px 0; vertical-align: top; } table.dati td { padding: 5px 0; vertical-align: top; } .si { color: var(--acceso); font-weight: 600; } .no { color: var(--spento); font-weight: 600; } .forse { color: var(--attenzione); font-weight: 600; } /* ================================================================== misure */ .misura { margin-bottom: 11px; } .misura .riga { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; margin-bottom: 4px; } .misura .riga .dx { color: var(--tenue); text-align: right; font-variant-numeric: tabular-nums; } .barra { height: 7px; background: var(--barretta); border-radius: 4px; overflow: hidden; } .barra > div { height: 100%; background: var(--accento); border-radius: 4px; transition: width .5s ease; } .barra > div.media { background: var(--attenzione); } .barra > div.alta { background: var(--spento); } .barra.ignota { background: repeating-linear-gradient(45deg, var(--barretta), var(--barretta) 4px, var(--carta2) 4px, var(--carta2) 8px); } .percorso { font-family: ui-monospace, monospace; font-size: 11.5px; } .senzabackup { color: var(--spento); font-weight: 600; } /* ================================================================ pulsanti */ .pulsanti { display: flex; flex-wrap: wrap; gap: 7px; } /* I PULSANTI CON IL SIMBOLO. Dove i pulsanti sono tanti — la riga di una chiave ne ha sei — le scritte lunghe li mandavano a capo su tre righe, e una tabella con le righe alte il triplo non si legge piu'. Simbolo e parola corta stanno su una riga sola, e la frase intera resta sotto al mouse. */ .atto.consimbolo { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; padding-right: 10px; } .atto.consimbolo svg { display: block; flex: none; } /* I loghi dei sistemi sono immagini, non disegni: si tengono a 18 e non si lasciano stiracchiare dal pulsante. */ .atto.consimbolo img { display: block; flex: none; width: 18px; height: 18px; } .atto.consimbolo .parola { font-weight: 600; letter-spacing: .3px; } /* «unariga» dice che quei pulsanti NON vanno a capo: e' una riga di tabella, e se si spezza la tabella diventa illeggibile. */ .pulsanti.unariga { flex-wrap: nowrap; justify-content: flex-end; } /* Su uno schermo stretto pero' si torna a capo: meglio due righe che una tabella che esce dal riquadro e va cercata trascinando. */ @media (max-width: 980px) { .pulsanti.unariga { flex-wrap: wrap; } } button.atto { font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; color: #fff; background: var(--accento-scuro); border: 1px solid transparent; border-radius: 6px; padding: 7px 14px; transition: filter .12s; } button.atto:hover { filter: brightness(1.18); } button.atto.chiaro { background: var(--carta2); color: var(--testo); border-color: var(--bordo); } button.atto.buono { background: var(--acceso); color: #06240f; } /* Rosso e giallo sono a CONTORNO, non pieni: il bordo e la scritta colorati, il fondo come gli altri. Pieni erano macchie di colore pastello che tiravano l'occhio piu' del contenuto della pagina; cosi' si vedono benissimo lo stesso ma non gridano. Al passaggio del mouse si riempiono, che e' il momento in cui gridare ha senso. */ button.atto.pericolo { background: transparent; color: var(--spento); border-color: var(--spento); } button.atto.pericolo:hover { background: var(--spento); color: #2a0605; filter: none; } button.atto.giallo { background: transparent; color: var(--attenzione); border-color: var(--attenzione); } button.atto.giallo:hover { background: var(--attenzione); color: #2a1e00; filter: none; } /* Verde a contorno. Serve a un caso solo, e va tenuto distinto dal verde PIENO di «buono»: quello dice «premi qui», questo dice «questa cosa sta bene». Il pulsante della password di amministrazione di Foundry cambia colore col suo STATO e non con quello che fa — rosso quando la password e' tolta, verde quando c'e'. E' l'unico posto in cui il rosso non vuol dire «questo pulsante distrugge»: vuol dire «questo Foundry e' scoperto». */ button.atto.verde { background: transparent; color: var(--acceso); border-color: var(--acceso); } button.atto.verde:hover { background: var(--acceso); color: #06240f; filter: none; } button.atto.disabilitato { opacity: .38; cursor: not-allowed; pointer-events: none; } /* UNA RIGA DI COMANDO DA COPIARE. Il comando si legge in monospazio, tutto su una riga, e se e' piu' lungo del riquadro scorre dentro al suo: non manda a capo, perche' un comando spezzato a meta' sembra due comandi. Il pulsante «Copia» resta fermo a destra e non si stringe. */ .comando { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; background: var(--carta2); border: 1px solid var(--bordo); border-radius: 6px; padding: 8px 8px 8px 11px; } .comando code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12.5px; color: var(--testo); background: none; padding: 0; } .comando .atto { flex: 0 0 auto; } /* I PASSI DI UN'ISTRUZIONE STANNO INCOLONNATI. Scritti di seguito dentro a un paragrafo — «1. fai questo 2. fai quello» — i numeri finiscono in mezzo alla riga e il secondo passo si trova solo rileggendo. Qui il numero ha una colonna sua e il testo e' allineato tutto alla stessa tacca, anche quando va a capo: l'occhio scende dritto sui numeri e sa sempre a che punto e'. */ ol.passi { list-style: none; margin: 11px 0 0; padding: 0; counter-reset: passo; } ol.passi > li { counter-increment: passo; position: relative; padding-left: 24px; color: var(--tenue); font-size: 12.5px; line-height: 1.55; max-width: 860px; margin-bottom: 11px; } ol.passi > li:last-child { margin-bottom: 0; } ol.passi > li::before { content: counter(passo) "."; position: absolute; left: 0; top: 0; color: var(--accento); font-weight: 700; } /* un comando dentro a un passo resta incolonnato con il testo del passo */ ol.passi > li .comando { margin: 8px 0 0; } a.collega { font-size: 12.5px; margin-right: 16px; } /* ================================================================== stato */ .pallino { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; display: inline-block; } .pallino.on { background: var(--acceso); box-shadow: 0 0 8px var(--acceso); } .pallino.off { background: var(--spento); } .targhetta { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--carta2); color: var(--tenue); display: inline-block; } .targhetta.verde { color: var(--acceso); background: rgba(61,220,132,.14); } .targhetta.rossa { color: var(--spento); background: rgba(255,95,86,.14); } .targhetta.gialla { color: var(--attenzione); background: rgba(255,200,87,.14); } /* ================================================================= salute */ .salute { display: flex; gap: 14px; align-items: flex-start; background: var(--carta); border: 1px solid var(--bordo); border-left-width: 4px; border-radius: 9px; padding: 14px 18px; margin-bottom: 14px; } .salute.bene { border-left-color: var(--acceso); } .salute.attenzione { border-left-color: var(--attenzione); } .salute.male { border-left-color: var(--spento); } .salute .verdetto { font-size: 17px; font-weight: 600; white-space: nowrap; } .salute.bene .verdetto { color: var(--acceso); } .salute.attenzione .verdetto { color: var(--attenzione); } .salute.male .verdetto { color: var(--spento); } .salute ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--tenue); } .salute li.male { color: var(--spento); } .salute li.attenzione { color: var(--attenzione); } /* ================================================================= tabelle */ table.tabellona { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 9px; overflow: hidden; } table.tabellona th { text-align: left; color: var(--tenue); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; padding: 11px 14px; background: var(--carta2); } table.tabellona td { padding: 9px 14px; border-top: 1px solid var(--bordo); vertical-align: top; } table.tabellona tr:nth-child(even) td { background: var(--riga-alt); } table.tabellona td.quando { color: var(--tenue); font-family: ui-monospace, monospace; font-size: 11.5px; white-space: nowrap; } table.tabellona td.tenue { color: var(--tenue); } table.tabellona td.male { color: var(--spento); font-weight: 600; } table.tabellona td.attenzione { color: var(--attenzione); font-weight: 600; } .dettaglio { color: var(--tenue); font-size: 11px; } /* ================================================================== lavori */ .lavoro { background: var(--carta); border: 1px solid var(--bordo); border-left-width: 4px; border-radius: 9px; padding: 12px 16px; margin-bottom: 10px; } .lavoro.corre { border-left-color: var(--accento); } .lavoro.bene { border-left-color: var(--acceso); } .lavoro.male { border-left-color: var(--spento); } .lriga1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ltitolo { font-weight: 600; font-size: 14px; } .lchi { margin-left: auto; color: var(--tenue); font-size: 11.5px; } .scorre { height: 3px; background: var(--barretta); border-radius: 2px; overflow: hidden; margin: 9px 0 6px; } .scorre > div { height: 100%; width: 35%; background: var(--accento); border-radius: 2px; animation: scivola 1.4s ease-in-out infinite; } @keyframes scivola { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } /* LA BARRA CON LA PERCENTUALE VERA. Quando un lavoro dice a che punto e' — e lo dice con un numero misurato, non supposto — la barra smette di scorrere a vuoto e si riempie a quella larghezza. Chiesto dall'utente il 14 settembre 2026. Niente animazione «scivola»: qui la larghezza E' l'informazione, e una barra che si muove da sola sopra a un numero vero lo contraddice. */ .barrapiena { height: 6px; background: var(--barretta); border-radius: 3px; overflow: hidden; margin: 9px 0 4px; } .barrapiena > div { height: 100%; background: var(--accento); border-radius: 3px; transition: width .4s ease; } .lquanto { font-size: 11.5px; color: var(--tenue); margin: 0 0 6px; font-variant-numeric: tabular-nums; } .passi { margin-top: 6px; font-size: 12px; color: var(--tenue); } .passo .ora { font-family: ui-monospace, monospace; font-size: 11px; opacity: .7; margin-right: 7px; } /* ================================================================ finestra */ .velo { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; } .velo.aperto { display: flex; } .finestra { background: var(--carta); border: 1px solid var(--bordo); border-radius: 11px; padding: 22px 24px; width: 640px; max-width: 100%; max-height: 86vh; overflow: auto; box-shadow: 0 24px 60px var(--ombra); } .finestra h3 { margin: 0 0 12px; font-size: 17px; } .finestra .corpo p { margin: 0 0 10px; font-size: 13.5px; } .finestra .nota { color: var(--tenue); font-size: 12.5px; } .finestra .tasti { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } /* I campi dentro a una finestra: etichetta sopra, casella sotto, e aria fra una coppia e l'altra. Prima erano etichetta e casella appiccicate sulla stessa riga, e due campi vicini si leggevano come una frase sola: «Password nuova ... Per quanti giorni vale ...». */ .finestra .corpo label { display: block; margin: 14px 0 0; color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .finestra .corpo label input, .finestra .corpo label select { display: block; margin-top: 5px; font: inherit; font-size: 13.5px; width: 100%; padding: 8px 10px; text-transform: none; letter-spacing: 0; background: var(--sfondo); color: var(--testo); border: 1px solid var(--bordo); border-radius: 6px; } .finestra .corpo label + .nota { margin-top: 4px; } .campo { margin: 12px 0; } .campo label { display: block; color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; } /* Le caselle di testo alte non erano mai state usate finche' non e' arrivata l'assistenza: senza questa riga restavano quelle grezze del browser, con un altro carattere e un altro fondo, in mezzo a un pannello tutto suo. */ .campo select, .campo input, .campo textarea { font: inherit; font-size: 13.5px; width: 100%; padding: 8px 10px; background: var(--sfondo); color: var(--testo); border: 1px solid var(--bordo); border-radius: 6px; } /* La scelta del gruppo, dentro alla tabella «Cos'e» della macchina. Sta in una riga stretta insieme a un'etichetta, quindi non prende tutta la larghezza come i campi di una finestra. */ select.scegligruppo { font: inherit; font-size: 13px; padding: 4px 8px; background: var(--sfondo); color: var(--testo); border: 1px solid var(--bordo); border-radius: 6px; } /* ================================================================== varie */ .errore { background: rgba(255,95,86,.12); border: 1px solid var(--spento); color: var(--spento); padding: 12px 16px; border-radius: 9px; margin-bottom: 16px; font-size: 13px; } .vuoto { color: var(--tenue); font-size: 13px; } /* Due classi minute che mancavano e che venivano usate lo stesso. «tenue» c'era solo dentro alle tabelle grandi, quindi fuori di li' non faceva niente e il testo restava del colore pieno; «nota» c'era solo dentro alle finestre. Sono le due scritte piccole di servizio che ricorrono in tutto il pannello: adesso valgono dappertutto. */ .tenue { color: var(--tenue); } p.nota { color: var(--tenue); font-size: 12.5px; max-width: 860px; } .inarrivo { background: var(--carta); border: 1px dashed var(--bordo); border-radius: 9px; padding: 26px; color: var(--tenue); font-size: 13.5px; max-width: 860px; } .inarrivo strong { color: var(--testo); } .filtri { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; } .filtri input { font: inherit; font-size: 13px; padding: 7px 11px; background: var(--carta); color: var(--testo); border: 1px solid var(--bordo); border-radius: 6px; min-width: 280px; } .piede { color: var(--tenue); font-size: 11.5px; text-align: right; padding: 10px 22px; } .bollini { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; } .bollino { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--carta2); color: var(--tenue); border: 1px solid var(--bordo); } .bollino.giallo { color: var(--attenzione); border-color: rgba(255,200,87,.4); } .bollino.rosso { color: var(--spento); border-color: rgba(255,95,86,.4); } /* ============================================ aiuto al passaggio del mouse */ .aiuto { border-bottom: 1px dotted var(--tenue); cursor: help; } .conaiuto { position: relative; } .conaiuto:hover > .bolla { opacity: 1; visibility: visible; transform: translateY(0); } .bolla { position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 6px; width: 300px; max-width: 78vw; padding: 9px 12px; background: var(--carta2); color: var(--testo); border: 1px solid var(--bordo); border-radius: 8px; box-shadow: 0 10px 26px var(--ombra); font-size: 12px; font-weight: 400; line-height: 1.5; text-transform: none; letter-spacing: 0; text-align: left; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; } .bolla.dx { left: auto; right: 0; } /* ------------------------------------------------------ spunte e password */ .spunte { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 7px; max-height: 230px; overflow: auto; padding-right: 4px; } label.spunta { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 5px 8px; border-radius: 6px; cursor: pointer; } label.spunta:hover { background: var(--carta2); } label.spunta input { width: 15px; height: 15px; accent-color: var(--accento); } .passwordgrande { font-family: ui-monospace, monospace; font-size: 19px; letter-spacing: .08em; background: var(--carta2); border: 1px solid var(--bordo); border-radius: 8px; padding: 13px 16px; text-align: center; user-select: all; word-break: break-all; } /* --------------------------------------------------- la zona di caricamento */ .zonacarica { border: 2px dashed var(--bordo); border-radius: 10px; padding: 26px; text-align: center; transition: border-color .15s, background .15s; } .zonacarica.sopra { border-color: var(--accento); background: var(--carta2); } /* ------------------------------------------------- le istanze da creare */ .istanza { border: 1px solid var(--bordo); border-radius: 9px; padding: 12px 14px; margin-bottom: 10px; background: var(--carta2); } .istanza .campo { margin: 8px 0; } /* Le domande della creazione: tre pulsanti larghi invece di una tendina, perche' la scelta si vede tutta insieme e si preme con un dito solo. */ .etichetta { color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 8px; } .scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .scelte .scelta { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 9px; cursor: pointer; border: 1px solid var(--bordo); background: var(--carta2); color: var(--testo); font: inherit; transition: border-color .12s, background .12s; } .scelte .scelta:hover { border-color: var(--accento); } .scelte .scelta.presa { border-color: var(--accento); background: var(--scelta-presa); } .scelte .stitolo { font-weight: 600; font-size: 14px; } .scelte .ssotto { color: var(--tenue); font-size: 11.5px; line-height: 1.35; } /* La spunta dentro a un .campo: senza questa erediterebbe l'etichetta maiuscola e minuscola dei campi, e si leggerebbe male. */ .campo textarea { resize: vertical; min-height: 64px; line-height: 1.45; font-family: inherit; } .campo label.spunta { display: flex; align-items: center; gap: 8px; padding: 0; color: var(--testo); font-size: 13.5px; text-transform: none; letter-spacing: 0; margin: 0; } .campo label.spunta input { width: 16px; height: 16px; margin: 0; } /* La scheda del pulsante "Nuova Macchina": testo a sinistra, pulsante a destra. */ .scheda-crea { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; } .scheda-crea strong { font-size: 15px; } .scheda-crea .atto { flex: 0 0 auto; } /* Il preventivo: una colonnina di righe con la cifra a destra. */ .preventivo { border: 1px solid var(--bordo); border-radius: 9px; padding: 12px 14px; background: var(--carta2); margin: 10px 0; } .preventivo .ptitolo { color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; } .preventivo .priga { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; font-size: 13.5px; } .preventivo .priga span:last-child { font-family: ui-monospace, monospace; white-space: nowrap; } .preventivo .priga.forte { border-top: 1px solid var(--bordo); margin-top: 6px; padding-top: 8px; font-weight: 600; } .preventivo .priga.sconto { color: var(--acceso); } .preventivo .priga.totale { border-top: 1px solid var(--bordo); margin-top: 6px; padding-top: 8px; font-weight: 700; font-size: 16px; } .preventivo .pnota { color: var(--tenue); font-size: 12px; text-align: right; margin-top: 2px; } /* Una fascia di sconto: mesi, sconto, e il pulsante per toglierla. */ .fascia { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 8px; } /* Le righe dei server che appartengono allo stesso cliente della riga sopra: rientrate un pelo, cosi' si legge a colpo d'occhio che sono un gruppo. */ .tabellona tr.stessoCliente td:first-child { padding-left: 28px; } .tabellona tr.stessoCliente td { border-top-color: transparent; } /* Di chi e' un server: oro le tue macchine, verde quelle di chi ha un accesso al pannello, niente per i clienti veri. Il bordo sta su tutta la riga, non solo a sinistra, cosi' un gruppo aperto si legge come un blocco unico anche quando e' lungo sei righe. */ /* Fra la fila dei riquadri e la prima scheda ci vuole aria: senza, il riquadro «Disco» e la scheda sotto sembrano la stessa cosa. La misura non e' libera: e' la STESSA che c'e' fra una scheda e l'altra (il margin-bottom di .scheda, 14 punti). Uno spazio piu' largo di quello fa sembrare che i riquadri stiano in un'altra pagina. */ .riquadri + .scheda, .riquadri + div > .scheda:first-child { margin-top: 14px; } /* Il riquadro di un gruppo e' UNO SOLO, anche quando il gruppo e' lungo sei righe: bordo sopra sulla prima, sotto sull'ultima, e i fianchi su tutte. Colorare ogni riga per conto suo faceva una scala di rettangoli. I fianchi NON sono «border». Due cose li rovinavano, una per lato: - a DESTRA, la tabella ha gli angoli arrotondati e «overflow: hidden», e con «border-collapse: collapse» il bordo destro dell'ultima cella cade esattamente sul filo che quel ritaglio taglia via: il fianco destro spariva del tutto e il riquadro restava aperto su un lato; - su ENTRAMBI, il separatore fra una riga e l'altra e' un «border-top» largo quanto la cella, e i bordi si disegnano dopo lo sfondo: passava sopra al filo colorato e lo intaccava di un punto a ogni riga. Quindi i fianchi sono elementi disegnati a parte, ancorati alla cella e allungati di un punto sopra e sotto per scavalcare i separatori. Stanno dentro alla cella, dove il ritaglio non arriva, e sopra a tutto il resto. */ .tabellona tr.gruppo.oro { --bordo-gruppo: var(--oro); } .tabellona tr.gruppo.verde { --bordo-gruppo: var(--acceso); } .tabellona tr.gruppo.chiaro { --bordo-gruppo: var(--tenue); } .tabellona tr.gruppo td:first-child, .tabellona tr.gruppo td:last-child { position: relative; } .tabellona tr.gruppo td:first-child::before, .tabellona tr.gruppo td:last-child::after { content: ''; position: absolute; top: -1px; bottom: -1px; width: 3px; background: var(--bordo-gruppo, transparent); pointer-events: none; } .tabellona tr.gruppo td:first-child::before { left: 0; } .tabellona tr.gruppo td:last-child::after { right: 0; } .tabellona tr.gruppo.inizio td { border-top: 1px solid var(--bordo-gruppo, transparent); } .tabellona tr.gruppo.fine td { border-bottom: 1px solid var(--bordo-gruppo, transparent); } /* L'avviso di una cosa andata bene: stessa forma dell'errore, altro colore. */ .errore.buona { background: rgba(61,220,132,.12); border-color: var(--acceso); color: var(--acceso); } /* IL CASSETTO DEGLI AVVISI. Sta appeso al corpo della pagina e non dentro al contenuto, perche' il contenuto si ridisegna e si porterebbe via il messaggio nello stesso istante in cui compare. Sopra a tutto, anche sopra alla finestra, perche' un avviso che nasce mentre una finestra si chiude deve restare visibile. */ #avvisi { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(460px, calc(100vw - 36px)); pointer-events: none; } /* UN MESSAGGIO A CAPO VA A CAPO. I racconti dell'esecutore arrivano su piu' righe — un passo per riga — e l'avviso le incollava tutte insieme: «zip c era gia la tua cartella Data pesa 12,8 GB E troppo grande...», che non e' una frase e non si legge. Le righe restano righe; gli a capo in piu' li mangia «pre-line» da solo. */ #avvisi .errore { margin: 0; box-shadow: 0 10px 30px rgba(0,0,0,.45); background: var(--carta); pointer-events: auto; white-space: pre-line; } #avvisi .errore.buona { background: var(--carta); } /* L'avviso che aspetta: la barra dentro va larga quanto l'avviso e senza il margine di sopra, se no si porta dietro uno stacco che qui non serve. */ #avvisi .errore.aspetta .scorre { margin: 0; } /* «Multi - Server» e' un collegamento da premere, e si vede che lo e'. Blu per i clienti e per chiunque non abbia un ruolo suo; per le tue e per quelle di chi ha un accesso al pannello prende lo STESSO colore del bordo, cosi' la scritta e il riquadro dicono la stessa cosa invece di due cose diverse. */ .tabellona strong.multiserver { color: var(--link); } .tabellona tr.oro strong.multiserver { color: var(--oro); } .tabellona tr.verde strong.multiserver { color: var(--acceso); } .tabellona strong.multiserver:hover { text-decoration: underline; } /* La casella di ricerca dell'anagrafica. */ input.cerca { flex: 1; max-width: 460px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--bordo); background: var(--carta2); color: var(--testo); font-size: 13.5px; font-family: inherit; } input.cerca:focus { outline: none; border-color: var(--accento); } /* Chiusi di suo: si aprono cliccando la riga «Multi - Server». */ .tabellona tr.chiusa { display: none; } .tabellona tr.capogruppo td { background: var(--scelta-presa); } .apribile { cursor: pointer; user-select: none; } strong.apribile:hover, .targhetta.apribile:hover { color: var(--accento); } /* Il collegamento per aprire tutte le righe di un lavoro lungo. */ .apriLavoro { color: var(--link); font-size: 12px; cursor: pointer; margin: 6px 0 2px; } .apriLavoro:hover { text-decoration: underline; } /* La girella dei pulsanti che stanno lavorando: senza, premi e non succede niente per due secondi, e ripremi. */ .girella { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; margin-right: 6px; } @keyframes gira { to { transform: rotate(360deg); } } .atto:disabled { opacity: .7; cursor: default; } /* Il messaggio d'errore dentro alla finestra, sopra ai pulsanti. */ .messaggioFinestra { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--carta2); border: 1px solid var(--spento); color: var(--spento); font-size: 13px; } .messaggioFinestra.buono { border-color: var(--acceso); color: var(--acceso); } /* Gli indirizzi mostrati a fine creazione. */ .indirizzo { border: 1px solid var(--bordo); border-radius: 9px; padding: 11px 14px; margin: 10px 0; background: var(--carta2); } .indirizzo .ichi { font-size: 12px; color: var(--tenue); margin-bottom: 4px; } .indirizzo .icome { opacity: .7; } .indirizzo .iurl { font-family: ui-monospace, monospace; font-size: 15px; word-break: break-all; } /* ==================================================================== barre Un grafico a barre fatto con dei DIV: niente librerie da fuori, niente da aggiornare, e funziona anche se il browser non carica nient'altro. Le colonne sono impilate — con risposta, letture sbagliate, problemi — perche' la cosa che si vuole vedere e' il rapporto fra le tre, non i tre numeri separati. */ .barre { display: flex; align-items: flex-end; gap: 3px; height: 168px; padding: 8px 2px 0; overflow-x: auto; } .barre .colonna { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; align-items: center; height: 100%; } .barre .pila { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 3px; overflow: hidden; background: var(--carta2); } .barre .pezzo { display: block; width: 100%; min-height: 2px; } .barre .pezzo.verde { background: var(--acceso); } .barre .pezzo.rossa { background: var(--spento); } .barre .pezzo.gialla { background: var(--attenzione); } .barre .pezzo.grigia { background: var(--bordo); } .barre .pezzo.blu { background: var(--accento); } .barre .colonna .sotto { font-size: 10px; color: var(--tenue); margin-top: 5px; white-space: nowrap; } /* Il diario di un servizio, dentro alla pagina. Non in una finestra e non in una scheda nuova: una finestra che si apre da sola i blocchi della pubblicita' la fermano, e in ogni caso copre quello che stavi guardando. */ pre.diario { margin: 0; max-height: 460px; overflow: auto; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; } /* Una tabella lunga scorre dentro al suo riquadro invece di allungare la pagina all'infinito: quattrocento targhe sono quattrocento righe. */ .tabellalunga { max-height: 520px; overflow: auto; border: 1px solid var(--bordo); border-radius: 8px; } .tabellalunga table.dati { margin: 0; } .tabellalunga table.dati tr:first-child th { position: sticky; top: 0; z-index: 2; background: var(--carta2); } /* Una password mostrata in chiaro: si legge carattere per carattere e si seleziona tutta con un doppio clic. */ code.chiaro { background: var(--carta2); border: 1px solid var(--bordo); border-radius: 5px; padding: 2px 7px; color: var(--testo); font-size: 12.5px; letter-spacing: .04em; user-select: all; } /* Le scelte di un'operazione, in fila e a capo quando non ci stanno. Non e' una griglia a colonne fisse perche' il numero di caselle CAMBIA con la scelta: «tutto» ne ha una, «da una data a un'altra» tre. */ .scelte { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .scelte .campo { margin: 0; flex: 1 1 180px; min-width: 150px; } .scelte .campo:last-child { flex: 0 0 auto; } /* Una fila di scelte che NON deve allargarsi a tutta la scheda. Senza questa, una tendina con dentro «03:00» si stiracchiava per mezzo schermo perche' le caselle sono elastiche: giusto per una data, ridicolo per un'ora. E .valore tiene la stessa altezza di una casella, cosi' le etichette della fila partono tutte dalla stessa riga invece di sfalsarsi di dieci pixel. */ .scelte.strette .campo { flex: 0 0 auto; min-width: 0; } .scelte.strette .campo select, .scelte.strette .campo input { width: auto; min-width: 108px; } .scelte .campo .valore { display: flex; align-items: center; margin-top: 5px; } /* Tendina, pulsante e valore hanno tre altezze naturali diverse (35, 34, 37) e la fila e' allineata in basso: bastavano quei tre pixel perche' le etichette in cima partissero da tre righe diverse. Qui si pareggiano. */ .scelte.strette .campo > select, .scelte.strette .campo > button, .scelte.strette .campo > .valore { height: 36px; } /* ============================================================== terminale */ .rigacomando { display: flex; align-items: center; gap: 9px; } .rigacomando .segno { color: var(--acceso); font-family: ui-monospace, monospace; font-size: 15px; flex: 0 0 auto; } .rigacomando input { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; padding: 9px 12px; background: var(--sfondo); color: var(--testo); border: 1px solid var(--bordo); border-radius: 6px; } .rigacomando input:focus { outline: none; border-color: var(--accento); } .giro { border-top: 1px solid var(--bordo); padding: 12px 0 4px; } .giro:first-child { border-top: 0; padding-top: 0; } .giro .riga { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; } .giro .riga .segno { color: var(--acceso); font-family: ui-monospace, monospace; } .giro .riga code { font-size: 13px; color: var(--testo); } .giro.senzadifese .riga .segno { color: var(--spento); } .giro.senzadifese .riga code { color: var(--spento); } /* Un elenco stretto dentro a una scheda: niente pallini grossi e niente rientri da documento, sono voci non paragrafi. */ ul.scarno { margin: 0; padding-left: 18px; } ul.scarno li { margin-bottom: 5px; font-size: 13px; } /* La tabella delle targhe: colonne di larghezza decisa, non "quanto capita". Con le colonne libere l'ora e la targa finivano appiccicate e il resto sparpagliato, e una tabella cosi' non si legge — si decifra. */ table.dati.tabellatarghe { width: 100%; table-layout: fixed; } table.dati.tabellatarghe th, table.dati.tabellatarghe td { padding: 7px 12px; } table.dati.tabellatarghe tr > *:nth-child(1) { width: 178px; } table.dati.tabellatarghe tr > *:nth-child(2) { width: 108px; } table.dati.tabellatarghe tr > *:nth-child(3) { width: 148px; } table.dati.tabellatarghe tr > *:nth-child(4) { width: 108px; } table.dati.tabellatarghe tr > *:nth-child(6) { width: 118px; } table.dati.tabellatarghe tr > *:nth-child(7) { width: 100px; } table.dati.tabellatarghe tr:nth-child(even) > * { background: var(--riga-alt); } table.dati.tabellatarghe tr:hover > * { background: var(--carta2); } /* I titoli delle colonne sono pulsanti: si clicca e la tabella si riordina. Sembrano titoli, non pulsanti, di proposito - un titolo che sembra un pulsante fa una tabella che sembra una barra degli strumenti. */ table.dati.tabellatarghe th { padding: 0; } button.ordina { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 600; padding: 9px 12px; display: flex; align-items: center; gap: 5px; } button.ordina:hover { color: var(--testo); } button.ordina.presa { color: var(--accento); } button.ordina .freccia { font-size: 10px; } /* Sì e No dentro alla tabella. Il trattino resta tenue: «non lo so» non deve somigliare a un No, perché un No sbagliato su un'assicurazione è una pattuglia che ferma una macchina in regola. */ strong.si { color: var(--acceso); font-weight: 700; } strong.no2 { color: var(--spento); font-weight: 700; } /* Una barra sola non deve prendersi tutta la larghezza: con un giorno solo sembrava una bandiera, non un grafico. */ .barre .colonna { max-width: 90px; } /* Un nome con una spiegazione sotto al mouse. La sottolineatura tratteggiata e' l'unica cosa che dice «qui c'e' dell'altro»: senza, la spiegazione la trova solo chi ci passa sopra per caso. */ .spiegato { border-bottom: 1px dotted var(--bordo); cursor: help; } .spiegato:hover { border-bottom-color: var(--accento); } /* Doppio clic per cambiare un nome. Il tratteggio compare solo passandoci sopra: un nome sottolineato di suo sembrerebbe un collegamento. */ .rinominabile { border-bottom: 1px dashed transparent; cursor: text; } .rinominabile:hover { border-bottom-color: var(--bordo); } .rinomina { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; } .rinomina input { font: inherit; font-size: inherit; padding: 4px 10px; min-width: 240px; background: var(--sfondo); color: var(--testo); border: 1px solid var(--accento); border-radius: 6px; } .rinomina .atto { font-size: 12px; padding: 5px 12px; } /* Un pulsante che non si puo' premere resta VISIBILE: toglierlo dalla pagina fa sparire l'informazione «questa cosa esiste, ma adesso non serve». */ button.atto[disabled] { opacity: .45; cursor: not-allowed; } button.atto[disabled]:hover { background: inherit; border-color: var(--bordo); } /* Il pulsante che sta lavorando. La girella si aggiunge davanti alla scritta senza toccarla: cosi' vale per tutti i pulsanti, anche per quelli scritti prima che questa regola esistesse, e nessuno si dimentica di metterla. */ /* Il selettore e' «button.inattesa», non «button.atto.inattesa»: la girella vale per OGNI pulsante, comprese le intestazioni delle colonne che si premono per ordinare, che sono «capotabella» e restavano fuori. Chiesto dall'utente il 14 settembre 2026. Se il lavoro finisce in un decimo di secondo la girella si chiude subito, e va bene cosi': serve a rispondere «ho sentito», non a misurare quanto ci mette. */ button.inattesa { position: relative; pointer-events: none; opacity: .75; } button.inattesa::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: giragira .7s linear infinite; } @keyframes giragira { to { transform: rotate(360deg) } } /* La X che chiude la scheda di un lavoro finito. Sta a destra, discreta, e si accende passandoci sopra: chiudere una scheda non e' un'azione importante e non deve sembrarlo. Su un lavoro ancora in corso c'e' ma e' spenta — nascondere una barra che sta girando vuol dire perdere di vista una cosa che sta succedendo davvero. */ /* E' un