/* Interfaccia di gestione -- foglio di stile unico, servito dal nodo. * * NESSUN FRAMEWORK E NESSUN CDN, e non e' austerita': un CDN e' una terza * parte che vede ogni accesso all'interfaccia di amministrazione del nostro * centralino, e un framework scaricato va aggiornato per le vulnerabilita'. * Qui sono quattrocento righe che si leggono in dieci minuti. * * Il tema segue il sistema: chiaro o scuro secondo le impostazioni di chi * guarda. Chi amministra un centralino lo fa anche di notte. */ :root { --sf: #ffffff; --sf-2: #f6f7f9; --sf-3: #eceef2; --bordo: #d8dce4; --testo: #1a1d23; --tenue: #5b6472; /* Il rosso Konekti #b23e4b: preso dal foglio del marchio di PBXware e confermato sui pixel del logo del sito. Contrasto su bianco 5,70, quindi e' leggibile anche come testo e non solo come decorazione. */ --accento: #b23e4b; --acc-sf: #fbeced; --acc-pieno: #b23e4b; --ok: #0f7b3f; --ok-sf: #e6f6ec; --no: #b3261e; --no-sf: #fdecea; --att: #8a5300; --att-sf: #fff4e0; --r: 10px; --om: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1); } @media (prefers-color-scheme: dark) { :root { --sf: #14171c; --sf-2: #1b1f26; --sf-3: #232832; --bordo: #2e3542; --testo: #e7eaf0; --tenue: #9aa4b2; /* Su fondo scuro #b23e4b scende a 3,15 di contrasto e NON basta per il testo: si schiarisce a #e08a94 (7,04). Il fondo dei pulsanti pieni resta invece #b23e4b, perche' il bianco sopra ha 5,70. */ --accento: #e08a94; --acc-sf: #2b1419; --acc-pieno: #b23e4b; --ok: #5fd18b; --ok-sf: #10281b; --no: #ff8a80; --no-sf: #2b1513; --att: #ffc166; --att-sf: #2a1f0c; --om: 0 1px 2px rgba(0,0,0,.4); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--testo); background: var(--sf-2); -webkit-font-smoothing: antialiased; } a { color: var(--accento); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; } h2 { font-size: 1.05rem; margin: 1.75rem 0 .75rem; } .tenue { color: var(--tenue); } .piccolo { font-size: .875rem; } code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; } /* ---- impalcatura: barra laterale + contenuto ---------------------------- */ .guscio { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } .lato { background: var(--sf); border-right: 1px solid var(--bordo); padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .marchio { padding: .5rem .5rem 1.1rem; } /* IL LOGO E' BIANCO SU TRASPARENTE nel file originale, quindi su fondo chiaro sparirebbe. Ci sono due tinte dello STESSO disegno e si mostra quella che si vede: scura sul chiaro, chiara sullo scuro. Sono due e non uno sfondo CSS perche' un marchio e' contenuto, non decorazione: cosi' ha un testo alternativo e si vede anche se il foglio di stile non arriva. */ .marchio img { display: block; width: 132px; height: auto; } .marchio .su-chiaro { display: block; } .marchio .su-scuro { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marchio .su-chiaro { display: none; } :root:not([data-theme="light"]) .marchio .su-scuro { display: block; } } :root[data-theme="dark"] .marchio .su-chiaro { display: none; } :root[data-theme="dark"] .marchio .su-scuro { display: block; } .marchio .sotto { display: block; font-size: .68rem; color: var(--tenue); letter-spacing: .09em; text-transform: uppercase; margin-top: .3rem; } .nav-gruppo { margin: .9rem 0 .3rem; padding: 0 .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tenue); } .nav a { display: flex; align-items: center; justify-content: space-between; padding: .44rem .55rem; border-radius: 8px; color: var(--testo); font-size: .9rem; text-decoration: none; } .nav a:hover { background: var(--sf-3); } .nav a.qui { background: var(--acc-sf); color: var(--accento); font-weight: 600; } .nav a.poi { color: var(--tenue); } .nav .tag { font-size: .62rem; padding: .08rem .34rem; border-radius: 999px; background: var(--sf-3); color: var(--tenue); border: 1px solid var(--bordo); } .corpo { padding: 1.5rem 1.75rem 4rem; max-width: 1180px; } .cima { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } /* ---- schede, tabelle, moduli ------------------------------------------- */ .scheda { background: var(--sf); border: 1px solid var(--bordo); border-radius: var(--r); box-shadow: var(--om); /* UNA TABELLA PIU' LARGA DELLA SCHEDA SCORRE DENTRO DI ESSA, non esce. Senza questo, il registro -- che ha sette colonne e note lunghe fino a 250 caratteri -- sfondava il riquadro e si prendeva la pagina. Segnalato dall'operatore il 03/11/2026. */ overflow-x: auto; } .scheda + .scheda { margin-top: 1rem; } .scheda .testa { padding: .85rem 1.1rem; border-bottom: 1px solid var(--bordo); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .scheda .testa h2 { margin: 0; font-size: .98rem; } .scheda .dentro { padding: 1.1rem; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--bordo); } th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 600; background: var(--sf-2); } tbody tr:hover { background: var(--sf-2); } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } /* Il testo lungo nelle celle VA A CAPO invece di allargare la colonna. `anywhere` e non `break-word`: un indirizzo o un identificativo senza spazi non si spezzerebbe, e sarebbe proprio quello a sfondare. */ td { overflow-wrap: anywhere; } td code { white-space: normal; overflow-wrap: anywhere; } .cella-lunga { max-width: 32ch; } .cella-media { max-width: 22ch; } label { display: block; font-size: .82rem; font-weight: 600; margin: .9rem 0 .3rem; } label .nota { display: block; font-weight: 400; color: var(--tenue); font-size: .78rem; } input[type=text], input[type=password], input[type=number], input[type=email], select, textarea { width: 100%; padding: .5rem .65rem; font: inherit; color: var(--testo); background: var(--sf); border: 1px solid var(--bordo); border-radius: 8px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accento); outline-offset: 1px; border-color: var(--accento); } .riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1rem; } .btn { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; padding: .5rem .9rem; font: inherit; font-weight: 600; font-size: .88rem; border-radius: 8px; border: 1px solid var(--bordo); background: var(--sf); color: var(--testo); } .btn:hover { background: var(--sf-3); } .btn.primo { background: var(--acc-pieno); border-color: var(--acc-pieno); color: #fff; } .btn.primo:hover { filter: brightness(1.08); } .btn.danno { color: var(--no); border-color: var(--no); } .btn.piccolo { padding: .28rem .55rem; font-size: .8rem; } .azioni { margin-top: 1.25rem; display: flex; gap: .6rem; align-items: center; } /* ---- pastiglie di stato ------------------------------------------------- */ .pas { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid transparent; } .pas.ok { background: var(--ok-sf); color: var(--ok); border-color: var(--ok); } .pas.no { background: var(--no-sf); color: var(--no); border-color: var(--no); } .pas.att { background: var(--att-sf); color: var(--att); border-color: var(--att); } .pas.neutro { background: var(--sf-3); color: var(--tenue); border-color: var(--bordo); } /* ---- avvisi ------------------------------------------------------------- */ .avviso { padding: .75rem 1rem; border-radius: var(--r); border: 1px solid; margin-bottom: 1rem; font-size: .9rem; } .avviso.ok { background: var(--ok-sf); border-color: var(--ok); color: var(--ok); } .avviso.no { background: var(--no-sf); border-color: var(--no); color: var(--no); } .avviso.att { background: var(--att-sf); border-color: var(--att); color: var(--att); } .avviso ul { margin: .4rem 0 0; padding-left: 1.2rem; } /* ---- numeri in evidenza sul cruscotto ---------------------------------- */ .conti { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; } .conto { background: var(--sf); border: 1px solid var(--bordo); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--om); } .conto .q { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .conto .e { font-size: .78rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; } /* ---- la pagina d'accesso ----------------------------------------------- */ .nuda { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; } .nuda .riquadro { width: 100%; max-width: 380px; } .nuda .marchio { padding-bottom: 1.5rem; text-align: center; } .nuda .marchio img { width: 180px; margin: 0 auto; } .credenziali { background: var(--sf); border: 1px solid var(--bordo); border-radius: var(--r); padding: 1.5rem; box-shadow: var(--om); } /* ---- la sezione dichiarata e non fatta --------------------------------- */ .vuoto { text-align: center; padding: 3.25rem 1.5rem; color: var(--tenue); } .vuoto .segnaposto { color: var(--accento); margin-bottom: .9rem; } .vuoto .titolo-vuoto { color: var(--testo); font-weight: 600; font-size: 1rem; margin: 0 0 .35rem; } .vuoto p.piccolo { max-width: 46ch; margin: 0 auto; font-size: .875rem; } /* ---- blocco da copiare (password, codici di recupero) ------------------ */ .copia { background: var(--sf-3); border: 1px dashed var(--bordo); border-radius: 8px; padding: .8rem 1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; line-height: 1.9; user-select: all; word-break: break-all; } @media (max-width: 860px) { .guscio { grid-template-columns: 1fr; } .lato { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--bordo); } .corpo { padding: 1.1rem; } }