/* ============================================================ token colore Il tema scuro è quello predefinito: viene applicato quando l'attributo data-theme non è impostato. Uno script inline nelle pagine lo scrive sul tag prima del rendering, per evitare il lampo chiaro al caricamento. */ :root, :root[data-theme='dark'] { --bg: #0d1117; --bg-sidebar: #10161f; --bg-elev: #161c26; --bg-elev-2: #1d2430; --bg-hover: #222b38; --border: #262e3b; --border-soft: #1d242f; --text: #e8edf4; --text-dim: #97a3b4; --text-faint: #6b7789; --accent: #4b8dff; --accent-soft: rgba(75, 141, 255, .14); --up: #29c46a; --down: #f0524d; --warn: #f0a92b; --pending: #6b7789; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .3); } :root[data-theme='light'] { --bg: #f5f7fa; --bg-sidebar: #ffffff; --bg-elev: #ffffff; --bg-elev-2: #eff2f6; --bg-hover: #e8ecf2; --border: #dde3ea; --border-soft: #e9edf2; --text: #121a24; --text-dim: #57646f; --text-faint: #8b96a3; --accent: #2f6fe4; --accent-soft: rgba(47, 111, 228, .1); --up: #14a44d; --down: #d93a35; --warn: #c47f10; --pending: #8b96a3; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07); } :root { --radius: 10px; --sidebar-w: 236px; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } * { box-sizing: border-box; } /* L'attributo hidden deve vincere anche su regole con display esplicito (es. .row { display: flex }), altrimenti le azioni di tutte le pagine restano visibili insieme nella barra in alto. */ [hidden] { display: none !important; } body { margin: 0; /* nessun trabocco orizzontale: una stringa lunga non deve spostare la pagina */ overflow-x: clip; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } svg { flex: none; } /* ==================================================================== shell */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; } .sidebar { background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; } .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; font-weight: 650; letter-spacing: -.01em; font-size: 15px; color: var(--text); } .brand .logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), #7c5cff); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; } .nav { padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--text-dim); font-weight: 500; font-size: 14px; } .nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; } .nav a.active { background: var(--accent-soft); color: var(--accent); } .nav a .count { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; background: var(--bg-elev-2); color: var(--text-faint); padding: 1px 7px; border-radius: 999px; } .nav a.active .count { background: var(--accent); color: #fff; } .nav-sep { height: 1px; background: var(--border-soft); margin: 10px 12px; } .sidebar-foot { margin-top: auto; padding: 10px; border-top: 1px solid var(--border-soft); } .user-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; height: auto; border-radius: 8px; cursor: pointer; background: transparent; border: none; color: var(--text); text-align: left; } .user-chip:hover { background: var(--bg-hover); } .avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 650; } .user-chip .who { overflow: hidden; } .user-chip .who b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .user-chip .who span { display: block; font-size: 11.5px; color: var(--text-faint); } /* =================================================================== topbar */ .main { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 22px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .topbar h1 { font-size: 17px; margin: 0; letter-spacing: -.02em; font-weight: 650; } .topbar .row { flex-wrap: wrap; } .topbar .spacer { flex: 1; } /* La ricerca assorbe tutto lo spazio disponibile; select e filtri restano a misura di contenuto alla sua destra. */ .search { position: relative; display: flex; align-items: center; flex: 1 1 200px; min-width: 0; } .search svg { position: absolute; left: 10px; color: var(--text-faint); pointer-events: none; } .search input { padding-left: 32px; width: 100%; } /* Nella barra tutti i controlli hanno la stessa altezza del campo di ricerca. */ .topbar { --ctl-h: 38px; } .topbar input, .topbar select, .topbar button:not(.fab), .topbar .btn, .topbar .seg { height: var(--ctl-h); } /* con l'altezza imposta, il padding verticale schiaccerebbe il testo tagliando le discendenti: verticalmente ci pensa l'altezza stessa */ .topbar input, .topbar select { padding-top: 0; padding-bottom: 0; } .topbar button.icon { width: var(--ctl-h); } .topbar .seg { padding: 3px; align-items: stretch; } .topbar .seg button { height: auto; padding-top: 0; padding-bottom: 0; } .actions-monitor { flex: 999 1 auto; min-width: 0; } .actions-monitor select { width: auto; flex: 0 0 auto; } .actions-monitor .seg { flex: none; } /* Sotto i 900px l'elasticita' che serve ai piccoli: ricerca a fisarmonica, filtri a tutta larghezza sulla riga successiva. */ @media (max-width: 900px) { .search { flex: 1 1 120px; } .actions-monitor .seg { flex: 1 1 240px; } .actions-monitor .seg button { flex: 1; } } .content { padding: 26px 30px; flex: 1; } .page { display: none; } .page.active { display: block; } /* ================================================================= controlli */ /* Regola generale: i controlli affiancati hanno tutti la stessa altezza. 36px per pulsanti, 28px per le varianti .sm; gli .icon sono quadrati. */ button, .btn { font: inherit; font-size: 13.5px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); padding: 0 13px; height: 36px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .12s, border-color .12s, opacity .12s; white-space: nowrap; } button:hover, .btn:hover { background: var(--bg-hover); text-decoration: none; } button:disabled { opacity: .5; cursor: not-allowed; } button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 550; } button.primary:hover, .btn.primary:hover { filter: brightness(1.08); background: var(--accent); } button.danger, .btn.danger { color: var(--down); border-color: transparent; background: transparent; } button.danger:hover, .btn.danger:hover { border-color: var(--down); background: transparent; } button.ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--text-dim); } button.ghost:hover, .btn.ghost:hover { color: var(--text); background: var(--bg-hover); } /* Pausa e Riattiva del dettaglio: pieni, bianco su rosso/verde. */ button.btn-pause { background: var(--down); border-color: var(--down); color: #fff; font-weight: 550; } button.btn-pause:hover { background: var(--down); filter: brightness(1.08); } button.btn-resume { background: var(--up); border-color: var(--up); color: #fff; font-weight: 550; } button.btn-resume:hover { background: var(--up); filter: brightness(1.08); } button.sm, .btn.sm { padding: 0 8px; height: 28px; font-size: 12.5px; } button.icon, .btn.icon { padding: 0; width: 36px; } button.sm.icon, .btn.sm.icon { width: 28px; } .seg { display: inline-flex; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; } .seg button { border: none; background: transparent; padding: 5px 11px; border-radius: 6px; font-size: 13px; color: var(--text-dim); } .seg button.on { background: var(--bg-hover); color: var(--text); font-weight: 550; } label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 5px; } /* :where() azzera la specificità: così regole mirate come `.search input` possono vincere su questa senza ricorrere a !important. */ input:where(:not([type=checkbox]):not([type=radio]):not([type=submit])), select, textarea { font: inherit; font-size: 14px; width: 100%; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); } /* La freccia nativa dei select viene disegnata dentro il padding destro: con un padding simmetrico finisce appiccicata al bordo. Disegniamo la nostra e le riserviamo lo spazio, così il testo non le va mai sotto. */ select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 7px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2397a3b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :root[data-theme='light'] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2357646f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } select::-ms-expand { display: none; } input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; border-color: var(--accent); } textarea { resize: vertical; min-height: 70px; font-family: var(--mono); font-size: 13px; } /* Il riempimento automatico del browser imporrebbe colori propri, illeggibili in tema scuro: lo riportiamo a quelli dell'interfaccia. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset; caret-color: var(--text); transition: background-color 9999s ease-out; } .field { margin-bottom: 14px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .check { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .check input { width: auto; } .check label { margin: 0; color: var(--text); font-size: 13.5px; } .hint { font-size: 12px; color: var(--text-faint); margin-top: 4px; } /* ==================================================================== card */ .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; } .stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; } .stat .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); font-weight: 600; } .stat .v { font-size: 23px; font-weight: 650; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; } .stat .v.up { color: var(--up); } .stat .v.down { color: var(--down); } /* ================================================================== stato */ /* Icona di stato "alla UptimeRobot": cerchio pieno con glifo, che pulsa. */ .sicon { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; } .sicon.up { background: var(--up); animation: pulse-up 2.6s ease-out infinite; } .sicon.down { background: var(--down); animation: pulse-down 1.5s ease-out infinite; } .sicon.maint { background: var(--warn); } .sicon.warn { background: var(--warn); animation: pulse-up 2.2s ease-out infinite; } .sicon.pending { background: var(--pending); } .sicon.paused { background: var(--bg-elev-2); color: var(--text-faint); border: 1px solid var(--border); } .sicon.xl { width: 46px; height: 46px; } .sicon.xl svg { width: 19px; height: 19px; } @keyframes pulse-up { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } } @keyframes pulse-down { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--down) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 11px transparent; } } @media (prefers-reduced-motion: reduce) { .sicon { animation: none !important; } } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; } .dot.up { background: var(--up); box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 20%, transparent); } .dot.down { background: var(--down); box-shadow: 0 0 0 3px color-mix(in srgb, var(--down) 20%, transparent); } .dot.maint { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 20%, transparent); } .dot.pending { background: var(--pending); } .dot.paused { background: var(--text-faint); } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 550; padding: 2px 8px; border-radius: 999px; background: var(--bg-elev-2); color: var(--text-dim); border: 1px solid var(--border); } .badge.up { color: var(--up); border-color: color-mix(in srgb, var(--up) 32%, transparent); background: color-mix(in srgb, var(--up) 10%, transparent); } .badge.down { color: var(--down); border-color: color-mix(in srgb, var(--down) 32%, transparent); background: color-mix(in srgb, var(--down) 10%, transparent); } .badge.maint, .badge.mw-live, .badge.degraded { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); } /* Elenco delle finestre di manutenzione nell'editor. */ .mw-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; border-top: 1px solid var(--border-soft); font-size: 12.5px; } .mw-row:first-child { border-top: none; } .mw-row .mw-when { font-variant-numeric: tabular-nums; white-space: nowrap; } .mw-row .mw-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============================================ impianto elenco + pannello */ .with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 18px; align-items: start; } .aside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 74px; } .panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .panel h3 { margin: 0 0 14px; font-size: 14px; font-weight: 650; letter-spacing: -.01em; } .panel h3 .dotmark { color: var(--accent); } .status-ring { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; font-size: 20px; } .status-ring.ok { background: var(--up); box-shadow: 0 0 0 6px color-mix(in srgb, var(--up) 16%, transparent); } .status-ring.bad { background: var(--down); box-shadow: 0 0 0 6px color-mix(in srgb, var(--down) 16%, transparent); } .tally { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 6px; } .tally .n { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; } .tally .n.down { color: var(--down); } .tally .n.up { color: var(--text); } .tally .l { font-size: 11.5px; color: var(--text-faint); } .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; } /* I pannelli aggiuntivi dell'aside mantengono la stessa spaziatura dei primi. */ #ov-panels { display: flex; flex-direction: column; gap: 14px; } /* Riepilogo per anno: più compatto e riconoscibile (barretta colorata). */ .panel.year { padding: 12px 16px; border-left: 3px solid var(--accent); } .panel.year h3 { margin-bottom: 9px; font-size: 12.5px; color: var(--text-dim); letter-spacing: .05em; display: flex; align-items: baseline; } .panel.year .year-days { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-faint); letter-spacing: 0; } .panel.year .kpis { gap: 9px 12px; } .panel.year .kpi .n { font-size: 14.5px; } .panel.year .kpi .l { font-size: 10.5px; } .kpi .n { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kpi .n.warn { color: var(--warn); } .kpi .l { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; } /* ========================================================== lista monitor */ .monitor-list { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; /* alle larghezze intermedie la riga non si schiaccia: mantiene la sua larghezza minima e la lista scorre in orizzontale */ overflow-x: auto; overflow-y: hidden; /* le righe si adattano alla larghezza di QUESTO contenitore, non della finestra */ container-type: inline-size; } .monitor { display: flex; gap: 14px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background .12s; } .monitor > * { flex: none; } .monitor:last-child { border-bottom: none; } .monitor:hover { background: var(--bg-elev-2); } .monitor.is-paused .info { opacity: .6; } /* base 0, non auto: con base auto la colonna partirebbe dalla larghezza del proprio contenuto, diversa a ogni riga, e le colonne successive si disallineerebbero. Con base 0 lo spazio si ripartisce uguale ovunque. */ .monitor .info { flex: 1 1 0; min-width: 0; overflow: hidden; } .monitor .name { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .monitor .sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--text-faint); min-width: 0; } .monitor .sub > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .monitor .sub .type { flex: none; } .monitor .sub .type { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); padding: 1px 6px; border-radius: 5px; } /* HTTPS con certificato scaduto o in errore: bianco su rosso. */ .monitor .sub .type.cert-bad { background: var(--down); border-color: var(--down); color: #fff; } /* Tag del monitor: chip neutro, in minuscolo come inserito. */ .monitor .sub .type.tag { text-transform: none; letter-spacing: 0; } /* Monitor esposto sulla status page pubblica: rosso su fondo rosato. */ .monitor .sub .type.pub { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); background: color-mix(in srgb, var(--down) 9%, transparent); } /* Larghezze fisse: testi di lunghezza diversa ("ora", "2 min fa") non devono spostare le strisce, che altrimenti risultano disallineate. */ .monitor .metrics { display: flex; gap: 14px; align-items: center; } .metric { text-align: right; width: 56px; flex: none; } .metric.mlast { width: 78px; } .metric .v { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .metric .k { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; } /* Toggle di appartenenza alla status page: visibile solo se attivo o al passaggio del mouse — a differenza di pausa/controlla/menu, che restano sempre in vista. */ .pubtoggle { color: var(--text-faint); } .pubtoggle.is-pub { color: var(--accent); } .monitor .pubtoggle:not(.is-pub) { opacity: 0; } .monitor:hover .pubtoggle { opacity: 1; } /* Griglia della pagina di modifica completa. */ .editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .editor-grid .span2 { grid-column: 1 / -1; } @media (max-width: 1000px) { .editor-grid { grid-template-columns: 1fr; } } /* Pallino "?" con spiegazione: bolla al passaggio del mouse. */ .lbl-info { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-hover); color: var(--text-faint); font-size: 10px; font-weight: 700; cursor: help; margin-left: 4px; position: relative; vertical-align: 1px; } .lbl-info:hover { background: var(--accent-soft); color: var(--accent); } .lbl-info:hover::after { content: attr(data-info); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 240px; padding: 9px 11px; border-radius: 8px; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; box-shadow: var(--shadow); z-index: 60; } /* Servizi non ancora disponibili, elencati con il loro badge. */ .presto-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--text-faint); font-size: 13px; border-top: 1px solid var(--border-soft); } .presto-row:first-of-type { border-top: none; } .mini-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); padding: 1px 6px; border-radius: 5px; margin-left: auto; } /* Slider dell'intervallo. */ input[type=range] { accent-color: var(--accent); padding: 0; height: auto; border: none; background: transparent; } /* Righe della legenda: campione a sinistra, spiegazione a destra. */ .lg-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; font-size: 13.5px; } .lg-row > span:last-child { color: var(--text-dim); } .lg-swatch { width: 40px; justify-content: center; flex: none; height: 18px; } .lg-swatch .b { flex: none; width: 5px; border-radius: 2px; } .lg-swatch.bars { width: auto; height: 18px; } .lg-swatch .d { width: 10px; border-radius: 2px; } .lg-ico { flex: none; } .lg-chip { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim); padding: 1px 6px; border-radius: 5px; } /* Tooltip riassuntivo delle strisce di controlli. */ .bar-tip { position: fixed; z-index: 130; pointer-events: none; min-width: 230px; max-width: 300px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 11px 13px; font-size: 12.5px; } .bar-tip .tt-title { font-weight: 650; margin-bottom: 7px; font-size: 13px; } .bar-tip .tt-row { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; } .bar-tip .tt-row span { color: var(--text-faint); } .bar-tip .tt-row b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .bar-tip .tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; } .bar-tip .tt-dot.ok { background: var(--up); } .bar-tip .tt-dot.bad { background: var(--down); } .bar-tip .tt-note { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-soft); color: var(--text-faint); font-size: 11.5px; line-height: 1.45; } /* Menù contestuale della riga. */ .menu-pop { position: fixed; z-index: 120; min-width: 210px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; } .menu-pop button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; border: none; background: transparent; padding: 8px 10px; height: auto; border-radius: 7px; font-size: 13.5px; color: var(--text); text-align: left; } .menu-pop button:hover { background: var(--bg-hover); } .menu-pop button.danger { color: var(--down); } .menu-pop button.danger:hover { background: color-mix(in srgb, var(--down) 12%, transparent); border-color: transparent; } .menu-pop .sep { height: 1px; background: var(--border-soft); margin: 5px 4px; } .menu-pop button:disabled { opacity: .5; cursor: not-allowed; } .menu-pop button:disabled:hover { background: transparent; } .menu-pop .mini-badge { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); padding: 1px 6px; border-radius: 5px; } .menu-pop button svg { color: var(--text-dim); } .menu-pop button.danger svg { color: var(--down); } /* La striscia con la sua didascalia di frequenza, sempre visibile. */ .bars-wrap { flex: none; display: flex; align-items: center; gap: 8px; } /* Frequenza del controllo: testo con sotto la linea di durata, ancorata a destra — piu' lungo l'intervallo, piu' la linea si allunga verso sinistra (30px a 1 minuto, 150px a 1 giorno, scala logaritmica). */ .freq-label { flex: none; width: 200px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .freq-label .dur-line { display: block; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-faint) 55%, transparent); /* riserva, sovrascritta inline */ } /* Striscia di barre: una per controllo. Il blocco ha larghezza fissa e le barrette se la spartiscono: un monitor rado ha poche barrette larghe, uno fitto tante barrette sottili — grana diversa, colonne sempre allineate. */ .bars { display: flex; gap: 2px; align-items: stretch; height: 26px; width: 293px; flex: none; } .bars .b { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--bg-elev-2); } .bars .b.ok { background: var(--up); } .bars .b.bad { background: var(--down); } .bars .b.warn { background: var(--warn); } /* Niente degradazione alle larghezze intermedie: la riga tiene tutto il contenuto leggibile e, se il contenitore è più stretto, si scorre. Solo il telefono (sotto) ha il suo layout compatto dedicato. */ @container (min-width: 521px) { /* minima ESPLICITA e identica per tutte le righe: la somma delle colonne fisse (icone, rivenditore/IP, frequenza, striscia, metriche, azioni, spazi) più i 240px garantiti al nome. Con fit-content ogni riga calcolava una larghezza diversa dal proprio contenuto e le colonne si disallineavano; con lo stesso numero ovunque restano incolonnate sia a tutta pagina sia in modalità scorrimento. */ .monitor { min-width: 1540px; } .monitor .info { min-width: 240px; } } /* Telefono: al nome serve spazio — pausa e controlla-adesso si ritirano nel menu (che li contiene comunque), restano percentuale e menu. */ /* Telefono: riga compatta a linea singola — icona, nome a tutta larghezza, percentuale, menu. Stato e frequenza restano nell'icona e nel dettaglio. */ /* colonna rivenditore/IP: larghezza fissa, tutte le righe incolonnate */ .mon-infra { flex: none; width: 170px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-faint); } .mon-infra b { color: var(--text); font-weight: 600; } .mon-infra .reg-lbl { color: var(--text-faint); font-weight: 400; } .mon-infra b.needs-reseller { color: var(--down); } .mon-infra b, .mon-infra span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 520px) { .mon-infra { display: none; } .monitor { gap: 10px; padding: 9px 12px; min-width: 0; } .monitor .rowmenu[data-action="toggle"], .monitor .rowmenu[data-action="check"] { display: none; } .monitor .sub { display: none; } .monitor .sicon { width: 22px; height: 22px; } .monitor .sicon svg { width: 10px; height: 10px; } .monitor .metric.m24 { width: auto; min-width: 44px; } .monitor .metric .k { display: none; } .monitor .name { font-size: 14.5px; } } /* Selezione multipla. */ input.rowsel { width: 16px; height: 16px; accent-color: var(--accent); flex: none; cursor: pointer; } #bulk-bar .badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); } /* La X del foglio statistiche esiste solo a foglio aperto. */ .sheet-close { display: none; } /* Paginazione sotto la lista. */ .pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .pager .sm { min-width: 28px; justify-content: center; } /* Il pulsante Statistiche esiste solo dove i pannelli sono nascosti. */ #btn-stats-toggle { display: none; } @media (max-width: 900px) { #btn-stats-toggle { display: inline-flex; } } /* stesso rientro orizzontale delle righe (16px + 1 di bordo): il capofila e' incolonnato con le checkbox sotto per costruzione */ .list-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 0 17px; } @media (max-width: 600px) { .list-head { padding: 0 13px; } } /* Tabella di configurazione nelle impostazioni: i percorsi lunghi vanno spezzati, non allargano la pagina. */ #s-info { width: 100%; table-layout: fixed; } #s-info td:first-child { width: 92px; } #s-info td { overflow-wrap: anywhere; } /* ================================================================= tabelle */ table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border-soft); } th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; } td.mono, .mono { font-family: var(--mono); font-size: 12.5px; } tbody tr:last-child td { border-bottom: none; } tbody tr { transition: background .1s ease; } tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, var(--bg-elev)); } .table-wrap { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px; overflow-x: auto; } /* ================================================================== modali */ dialog { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); color: var(--text); padding: 0; width: min(640px, calc(100vw - 32px)); box-shadow: var(--shadow); } dialog::backdrop { background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); } /* margini identici sui quattro lati: 16px come lo spazio laterale */ dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); } dialog .dlg-head { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; } dialog .dlg-head h2 { margin: 0; font-size: 15.5px; } dialog .dlg-body { padding: 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; } dialog .dlg-foot { padding: 13px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; } dialog .dlg-foot .spacer { flex: 1; } /* modale di conferma/richiesta (sostituisce confirm/prompt del browser) */ #dlg-ask { width: min(430px, calc(100vw - 32px)); } .ask-msg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text); } #ask-field { margin-top: 14px; } #ask-ok.ask-danger { background: var(--down); border-color: var(--down); color: #fff; } #ask-ok.ask-danger:hover { filter: brightness(1.08); background: var(--down); } /* campo a chip: gli alias si aggiungono con lo spazio e si tolgono con la x */ .chips-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elev); cursor: text; } .chips-input:focus-within { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -1px; border-color: var(--accent); } .chips-input .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 10px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); } .chips-input .chip-x { border: none; background: transparent; color: var(--text-faint); font-size: 15px; line-height: 1; padding: 0 2px; cursor: pointer; } .chips-input .chip-x:hover { color: var(--down); } .chips-input .chips-entry { flex: 1 1 140px; min-width: 140px; border: none !important; outline: none !important; background: transparent !important; padding: 4px 2px !important; } /* elenco scadenze dei domini nell'editor */ .dom-expiries { display: flex; flex-direction: column; gap: 3px; } /* barra di salvataggio flottante: compare in basso a destra alla prima modifica */ .save-bar { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .3); animation: save-bar-in .18s ease-out; } .save-bar[hidden] { display: none; } .save-bar .primary { display: inline-flex; align-items: center; gap: 7px; } @keyframes save-bar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .save-bar { right: 12px; bottom: 12px; left: 12px; justify-content: flex-end; } } /* modale "modifiche non salvate" */ #dlg-unsaved { width: min(420px, calc(100vw - 32px)); } .unsaved-body { text-align: center; } .unsaved-icon { color: var(--warn); margin-bottom: 6px; } .unsaved-body h2 { margin: 0 0 6px; font-size: 17px; } .unsaved-body .ask-msg { margin-bottom: 18px; } .unsaved-actions { display: flex; flex-direction: column; gap: 8px; } .unsaved-actions .un-danger { color: var(--down); border-color: color-mix(in srgb, var(--down) 45%, transparent); } .unsaved-actions .un-danger:hover { background: color-mix(in srgb, var(--down) 10%, transparent); } @media (min-width: 480px) { .unsaved-actions { flex-direction: row; justify-content: center; } } /* riga IP/registrar nel dettaglio, con pulsantino di aggiornamento */ .infra-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .mini-refresh { padding: 2px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-faint); } .mini-refresh:hover { color: var(--text); border-color: var(--text-faint); } .mini-refresh svg { width: 12px; height: 12px; } /* Nella scheda 24h del dettaglio la striscia riempie tutto lo spazio. */ .bars-fluid .bars { width: 100%; } /* Riga di statistiche del dettaglio, con divisori verticali. */ .stat-row { display: grid; grid-template-columns: repeat(5, 1fr); } .stat-row > div { padding-left: 18px; border-left: 1px solid var(--border-soft); } .stat-row > div:first-child { padding-left: 0; border-left: none; } @media (max-width: 900px) { .stat-row { grid-template-columns: 1fr 1fr; gap: 14px; } .stat-row > div { padding-left: 0; border-left: none; } } /* Grafico del tempo di risposta: SVG stirato al 100%, etichette in HTML. */ .chart-box { position: relative; width: 100%; } .chart-box svg { width: 100%; height: 100%; display: block; } .chart-box .y-lab { position: absolute; left: 6px; transform: translateY(-50%); font-size: 10.5px; color: var(--text-faint); pointer-events: none; background: color-mix(in srgb, var(--bg-elev) 75%, transparent); padding: 0 4px; border-radius: 4px; } /* Statistiche sotto il grafico del tempo di risposta. */ .rt-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; } .rt-stats > div { display: flex; align-items: center; gap: 11px; padding: 2px 0 2px 18px; } .rt-stats > div:first-child { padding-left: 0; } .rt-stats > div + div { border-left: 1px solid var(--border-soft); } .rt-stats .v { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; } .rt-stats .k { font-size: 11.5px; color: var(--text-faint); } .rt-ico { display: grid; place-items: center; } /* Banner d'allarme mostrato all'accesso quando ci sono certificati scaduti o in errore. */ .banner-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: color-mix(in srgb, var(--down) 12%, transparent); border: 1px solid color-mix(in srgb, var(--down) 40%, transparent); color: var(--down); font-weight: 550; font-size: 13.5px; padding: 11px 14px; border-radius: 10px; margin-bottom: 16px; } .banner-alert a { color: inherit; text-decoration: underline; margin-left: auto; } /* Pulsante flottante "+ nuovo": in basso a destra su ogni schermo. */ .fab { position: fixed; right: 24px; bottom: 24px; z-index: 55; width: 56px; height: 56px !important; border-radius: 50%; background: var(--accent); border-color: var(--accent); color: #fff; display: grid; place-items: center; padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); } .fab svg { display: block; } @media (min-width: 901px) { .fab { width: 64px; height: 64px !important; right: 30px; bottom: 30px; } } .fab:hover { background: var(--accent); filter: brightness(1.1); } /* =================================================================== varie */ .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .small { font-size: 12.5px; } .row { display: flex; align-items: center; gap: 10px; } .spacer { flex: 1; } .empty { text-align: center; padding: 52px 20px; color: var(--text-faint); } h2.section { font-size: 13px; margin: 24px 0 10px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } .error-box { background: color-mix(in srgb, var(--down) 12%, transparent); border: 1px solid color-mix(in srgb, var(--down) 38%, transparent); color: var(--down); padding: 10px 12px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; } .ok-box { background: color-mix(in srgb, var(--up) 12%, transparent); border: 1px solid color-mix(in srgb, var(--up) 38%, transparent); padding: 10px 12px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--bg-elev-2); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 10px 16px; border-radius: 999px; font-size: 13.5px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); } .toast.err { color: var(--down); border-color: color-mix(in srgb, var(--down) 42%, transparent); } /* Campo password con occhio per mostrare/nascondere. */ .pw-wrap { position: relative; } .pw-wrap input { padding-right: 40px; } .pw-toggle { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: transparent; border: none; padding: 6px; cursor: pointer; color: var(--text-faint); display: grid; place-items: center; border-radius: 6px; } .pw-toggle:hover { color: var(--text); background: transparent; } /* Variante con più azioni (occhio + copia) generata dalla dashboard. */ .pw-actions { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; gap: 1px; } .pw-actions button { background: transparent; border: none; padding: 0; width: 28px; height: 28px; cursor: pointer; color: var(--text-faint); display: grid; place-items: center; border-radius: 6px; } .pw-actions button:hover { color: var(--text); background: var(--bg-hover); } /* Il pulsante Genera non deve alzare la riga della label: altezza bloccata, identica su entrambe le colonne. */ .genpw { margin-left: auto; font-size: 12px; padding: 0 7px; height: 19px; line-height: 19px; border: none; } .label-row { display: flex; align-items: center; margin-bottom: 5px; height: 19px; } .label-row label { line-height: 19px; } .label-row label { margin: 0; } .pw-wrap { display: flex; align-items: center; width: 100%; } .pw-wrap > input { flex: 1 1 auto; min-width: 0; } /* le colonne affiancate partono dall'alto: label su una riga, campi allineati */ .grid-2 > .field, .grid-3 > .field { margin-bottom: 14px; align-self: start; } /* ================================================== login / pagine pubbliche */ .login-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; } .login-card { width: min(390px, 100%); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); } .login-card .brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 20px; font-size: 16px; font-weight: 650; } header.top { border-bottom: 1px solid var(--border); background: var(--bg-elev); position: sticky; top: 0; z-index: 20; } header.top .inner { max-width: 900px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; } header.top .brand { display: flex; align-items: center; gap: 10px; font-weight: 650; } .wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; } .wrap-narrow { max-width: 860px; } .status-hero { text-align: center; padding: 34px 0 26px; } .status-hero .pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid var(--border); background: var(--bg-elev); } .status-hero .pill.operational { color: var(--up); border-color: color-mix(in srgb, var(--up) 38%, transparent); } .status-hero .pill.partial_outage { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 38%, transparent); } .status-hero .pill.major_outage { color: var(--down); border-color: color-mix(in srgb, var(--down) 38%, transparent); } .status-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; } .status-item .head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .status-item .head .up-pct { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 13px; } .day-bars { display: flex; gap: 2px; height: 30px; align-items: stretch; } .day-bars .d { flex: 1; min-width: 2px; border-radius: 2px; background: var(--bg-elev-2); } .day-bars .d.ok { background: var(--up); } .day-bars .d.bad { background: var(--down); } .day-bars .d.warn { background: var(--warn); } .legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-faint); margin-top: 6px; } /* Telefono in orizzontale: poca altezza a disposizione, l'intestazione si fa bassa — controlli a 32px, padding ridotti, titolo minore. */ @media (max-height: 520px) { .topbar { padding: 6px 16px; gap: 8px; row-gap: 6px; --ctl-h: 34px; } .topbar h1 { font-size: 15px; flex: none; } /* i filtri stanno a destra della ricerca sulla stessa riga: a stringersi sono solo loro, ricerca e select restano a dimensione piena */ .actions-monitor { flex: 999 1 auto; flex-wrap: nowrap; min-width: 0; } .search { flex: 1 1 110px; width: auto; } .actions-monitor .seg { flex: 0 1 auto; } .topbar .seg button { padding-left: 7px; padding-right: 7px; } .content { padding-top: 12px; } } /* ================================================================ responsive */ /* Sotto i 1100px la sidebar si compatta a colonna di sole icone, come UptimeRobot: le etichette spariscono e restano i tooltip nativi (title). */ .only-compact { display: none; } @media (max-width: 1100px) { .only-compact { display: inline-flex; } .hide-compact { display: none !important; } .app { grid-template-columns: 64px 1fr; } .sidebar { width: 64px; } .sidebar .brand { justify-content: center; padding: 14px 0 12px; font-size: 0; gap: 0; } .sidebar .brand .logo { font-size: 15px; } .nav { padding: 6px; } .nav a { justify-content: center; padding: 11px 0; font-size: 0; gap: 0; } .nav a svg { width: 19px; height: 19px; } .nav a .count { display: none; } /* ordine: luna, riga a tutta larghezza, utente con il suo respiro */ .sidebar-foot { padding: 0; border-top: none; display: flex; flex-direction: column; } .sidebar-foot .btn-theme { width: 100%; margin: 8px 0; justify-content: center; } .user-chip { justify-content: center; width: 100%; margin: 0; padding: 12px 0 10px; border-radius: 0; border-top: 1px solid var(--border-soft); } .user-chip .who, .user-chip > svg { display: none; } /* Tooltip disegnato accanto all'icona, come su UptimeRobot: il title nativo è lento e su touch non esiste. Compare solo in modalità compatta. */ .nav a, .user-chip { position: relative; } .nav a:hover::after, .user-chip:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 550; white-space: nowrap; box-shadow: var(--shadow); z-index: 60; pointer-events: none; } .nav a:hover::before, .user-chip:hover::before { content: ''; position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--bg-elev-2); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); z-index: 61; pointer-events: none; } } @media (max-width: 900px) { .content { padding: 14px; } .rt-stats > div { padding-left: 10px; gap: 8px; } .topbar { padding: 10px 14px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .with-aside { grid-template-columns: 1fr; } /* aria in fondo alla lista: il pulsante flottante non deve coprire le righe */ .content { padding-bottom: 96px; } /* Su mobile i pannelli statistici escono dal flusso: foglio a scomparsa dal basso, aperto dal pulsante "Statistiche" accanto al contatore. */ .aside { display: none; } .aside.open { display: flex; position: fixed; inset: 16px; z-index: 70; overflow-y: auto; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); } .sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 65; } .aside.open .sheet-close { display: grid; place-items: center; position: sticky; top: -6px; align-self: flex-end; z-index: 2; width: 34px; height: 34px; margin: -4px -4px -20px 0; padding: 0; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim); box-shadow: var(--shadow); cursor: pointer; } } .only-mobile { display: none !important; } /* collaudo catena di deploy 13:10 */ /* ╔══════════════════════════════════════════════════════════════════╗ ║ COMPONENTI AUDIT — aggiunte al design system condiviso con ║ ║ uptime.astrelia.it (la parte sopra è il suo stylesheet, intatto ║ ║ per mantenere il look identico). ║ ╚══════════════════════════════════════════════════════════════════╝ */ /* Shim: testo solo per screen reader (prima veniva da Tailwind). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Pill di stato dei moduli di scansione. */ .status-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; } .status-pill .status-icon { width: 13px; height: 13px; flex: none; } .status-pill[data-status="pending"] { color: var(--text-faint); } .status-pill[data-status="running"] { color: var(--text); font-weight: 550; } .status-pill[data-status="success"] { color: var(--up); } .status-pill[data-status="failed"] { color: var(--down); } .status-pill[data-status="skipped"] { color: var(--text-faint); opacity: .65; } .status-spinner { width: 13px; height: 13px; flex: none; border: 2px solid var(--border); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } tr.module-row[data-module-status="running"] { background: var(--accent-soft); } /* Badge persistente "modificato" sui blocchi già revisionati. */ .edited-badge { font-size: 10.5px; line-height: 1; margin-left: 8px; padding: 3px 7px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; border-radius: 999px; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); } /* Badge di stato per campo ("da salvare" / "salvato"). */ .field-badge { font-size: 11px; line-height: 1; margin-left: 8px; font-weight: 500; text-transform: none; letter-spacing: normal; white-space: nowrap; } .field-badge[data-state="dirty"] { color: var(--down); } .field-badge[data-state="saved"] { color: var(--up); } /* Blocchi dell'editor contenuti: details/summary in stile card. */ details.editor-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; } details.editor-block > summary { padding: 12px 16px; cursor: pointer; user-select: none; font-weight: 600; font-size: 14px; background: var(--bg-elev-2); list-style: none; display: flex; align-items: center; gap: 8px; } details.editor-block > summary::before { content: ''; width: 7px; height: 7px; flex: none; border-right: 1.8px solid var(--text-faint); border-bottom: 1.8px solid var(--text-faint); transform: rotate(-45deg); transition: transform .12s; margin-right: 2px; } details.editor-block[open] > summary::before { transform: rotate(45deg); } details.editor-block > summary::-webkit-details-marker { display: none; } .editor-block .block-body { padding: 16px; } /* Ritmo verticale tra i campi di un blocco (sostituisce le utility space-y). */ .editor-block .block-body > * + * { margin-top: 10px; } /* Separatore tra blocchi fratelli (es. le singole criticità in elenco). */ .editor-block .block-body + .block-body { border-top: 1px solid var(--border-soft); } /* Elementi ripetuti dentro un blocco (paragrafi, fasi, punti): solo aria, niente riga — lo spazio complessivo resta quello di prima (12+1+12). */ .editor-item { padding-top: 12px; margin-top: 13px; } /* Editor rich text (Quill) nei due temi. */ /* Aria tra editor consecutivi (le textarea originali sono nascoste). */ .rich-editor { margin-bottom: 10px; } .rich-editor .ql-toolbar.ql-snow { border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--bg-elev-2); font-family: inherit; } .rich-editor .ql-container.ql-snow { border: 1px solid var(--border); border-radius: 0 0 8px 8px; background: var(--bg-elev); color: var(--text); font-family: inherit; font-size: 13.5px; } .rich-editor .ql-editor { min-height: 88px; line-height: 1.6; } .rich-editor .ql-editor.ql-blank::before { color: var(--text-faint); font-style: normal; } .rich-editor .ql-editor a { color: var(--accent); } .rich-editor .ql-snow .ql-stroke { stroke: var(--text-dim); } .rich-editor .ql-snow .ql-fill { fill: var(--text-dim); } .rich-editor .ql-snow .ql-picker { color: var(--text-dim); } .rich-editor .ql-snow button:hover .ql-stroke, .rich-editor .ql-snow button.ql-active .ql-stroke { stroke: var(--accent); } .rich-editor .ql-snow button:hover .ql-fill, .rich-editor .ql-snow button.ql-active .ql-fill { fill: var(--accent); } .rich-editor .ql-snow .ql-tooltip { background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow); border-radius: 8px; } .rich-editor .ql-snow .ql-tooltip input { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); } /* Overlay dei modali custom (delete, prima/dopo). */ .overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .6); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: 16px; } .dlg { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; padding: 20px; overflow-y: auto; } .dlg.wide { width: min(980px, 100%); } .dlg h3 { margin: 0 0 10px; font-size: 15.5px; font-weight: 650; } .code-line { font-family: var(--mono); font-size: 12.5px; word-break: break-all; background: var(--bg-elev-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; margin: 0; } /* Pill flottante di salvataggio dell'editor. */ #save-indicator { position: fixed; bottom: 24px; right: 24px; z-index: 70; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 550; cursor: pointer; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); box-shadow: 0 12px 34px rgba(0, 0, 0, .3); display: inline-flex; align-items: center; gap: 7px; } #save-indicator.is-dirty { background: var(--down); border-color: var(--down); color: #fff; } #save-indicator.is-dirty:hover { filter: brightness(1.08); background: var(--down); } #save-indicator.is-saving { color: var(--text-dim); cursor: default; } #save-indicator.is-saved { color: var(--up); border-color: color-mix(in srgb, var(--up) 40%, transparent); cursor: default; } #save-indicator.is-error { background: var(--down); border-color: var(--down); color: #fff; } body.pdf-preview-open #save-indicator { right: calc(50vw + 24px); } /* Pannello anteprima PDF affiancata. */ .pdf-preview-toggle { display: none; } @media (min-width: 1280px) { .pdf-preview-toggle { display: inline-flex; } } #pdf-preview-panel { position: fixed; top: 0; right: 0; width: 50vw; height: 100dvh; z-index: 60; display: none; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border); } body.pdf-preview-open #pdf-preview-panel { display: flex; } body.pdf-preview-open .main { margin-right: 50vw; } #pdf-preview-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; background: var(--bg-sidebar); } #pdf-preview-status[data-loading="1"]::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--border); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; } #pdf-preview-scroll { flex: 1; overflow-y: auto; padding: 14px; background: #30343a; } .pdf-page { position: relative; margin: 0 auto 14px auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .45); } .pdf-page canvas { display: block; width: 100%; height: auto; } /* Rimediazione per finding (prompt Claude Code + verifica) */ .remediation-bar { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg-elev-2); } .remediation-bar textarea[data-rem-prompt] { margin-top: 8px; font-size: 12px; background: var(--bg); } .remediation-bar[data-state="resolved"] { border-style: solid; border-color: color-mix(in srgb, var(--up) 45%, transparent); } .remediation-bar[data-state="resolved"] .rem-status { color: var(--up); font-weight: 600; } .remediation-bar[data-state="failed"] .rem-status { color: var(--down); } .finding-resolved { display: none; } body.show-resolved-findings .finding-resolved { display: block; opacity: .65; } /* Ricerca nel PDF (barra dell'anteprima) */ #pdf-search-box { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } #pdf-search-box input { width: 150px; height: 26px; padding: 0 9px; font-size: 12px; } #pdf-search-count { white-space: nowrap; font-variant-numeric: tabular-nums; } #pdf-search-box button { padding: 0 7px; height: 26px; } /* Layer testo PDF.js: testo trasparente sopra il canvas per selezione/copia */ .pdf-text-layer { position: absolute; inset: 0; overflow: hidden; line-height: 1; z-index: 1; } .pdf-text-layer span, .pdf-text-layer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0 0; } .pdf-text-layer ::selection { background: rgba(40, 110, 255, .35); } /* Layer link PDF.js: aree cliccabili sopra il canvas */ .pdf-link { position: absolute; z-index: 2; } .pdf-link:hover { background: rgba(40, 110, 255, .12); border-radius: 2px; } .pdf-hl { position: absolute; pointer-events: none; border-radius: 2px; background: rgba(245, 200, 66, .45); mix-blend-mode: multiply; z-index: 3; } .pdf-hl.current { background: rgba(255, 122, 0, .5); outline: 2px solid rgba(230, 100, 0, .9); } /* Stati del pulsante "Proponi criticità": rosso pieno = da fare (mai analizzato o contenuto cambiato dopo l'analisi); ambra = aperto ma nessuna proposta accettata; grigio = analizzato, nessuna criticità rilevata; verde = criticità aggiunte. Ogni salvataggio del blocco azzera lo stato. */ [data-action="suggest-findings"] { background: var(--down); border-color: var(--down); color: #fff; font-weight: 550; } [data-action="suggest-findings"]:hover { background: var(--down); filter: brightness(1.08); } [data-action="suggest-findings"][data-suggest-state="dismissed"]:hover, [data-action="suggest-findings"][data-suggest-state="none_found"]:hover, [data-action="suggest-findings"][data-suggest-state="accepted"]:hover { filter: none; background: var(--bg-hover); } [data-action="suggest-findings"][data-suggest-state="dismissed"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); } [data-action="suggest-findings"][data-suggest-state="none_found"] { color: var(--text-faint); border-color: var(--border-soft); background: transparent; } [data-action="suggest-findings"][data-suggest-state="accepted"] { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, transparent); background: color-mix(in srgb, var(--up) 8%, transparent); } /* Pulsante di chiusura "verde" (es. "Chiudi" a fine analisi nel modal proposte): segnala che non c'è più nulla da annullare. */ button.btn-done, .btn.btn-done { background: var(--up); border-color: var(--up); color: #fff; font-weight: 550; } button.btn-done:hover, .btn.btn-done:hover { background: var(--up); filter: brightness(1.08); } /* Box import scansione accessibilità dentro il blocco editor. */ .import-box { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 14px; } /* Sottoliste per dominio nella lista audit */ .group-toggle { margin-left: 8px; padding: 1px 8px; font-size: 11.5px; } .group-toggle .chev { font-size: 10px; } .sub-row td { background: color-mix(in srgb, var(--bg-elev-2) 55%, var(--bg-elev)); } .sub-row td:first-child { padding-left: 26px; } .sub-marker { color: var(--text-faint); margin-right: 6px; } /* Toggle obbligo accessibilità (sezione manuale) */ .mandatory-toggle { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-elev-2); cursor: pointer; font-size: 13px; } .mandatory-toggle input { width: auto; margin-top: 2px; accent-color: var(--down); } .mandatory-toggle:has(input:checked) { border-color: color-mix(in srgb, var(--down) 45%, transparent); background: color-mix(in srgb, var(--down) 6%, var(--bg-elev)); } /* Elenco pagine interessate dentro i blocchi criticità */ .pages-list { border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-elev-2); padding: 8px 12px; font-size: 12.5px; } .pages-list summary { cursor: pointer; font-weight: 550; color: var(--text-dim); } .pages-list ul { margin: 8px 0 2px; padding-left: 18px; } .pages-list li { margin-bottom: 3px; word-break: break-all; } .pages-list a { color: var(--accent); } /* Opzioni di resa del PDF (tabella moduli) */ .report-options { font-size: 12.5px; color: var(--text-dim); } .report-options .ro-item { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .report-options .ro-item input { width: auto; accent-color: var(--accent); } .report-options .ro-sub { opacity: .9; } .report-options input:disabled + *, .report-options .ro-sub:has(input:disabled) { opacity: .45; } /* Menu utente a tendina (sidebar) */ .user-menu-wrap { position: relative; } .user-chip .kebab { margin-left: auto; color: var(--text-faint); font-size: 16px; } .user-menu { position: absolute; bottom: calc(100% + 8px); left: 6px; right: 6px; min-width: 230px; z-index: 80; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 6px; box-shadow: 0 14px 40px rgba(0, 0, 0, .25); } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; border: none; background: transparent; color: var(--text); font-size: 13px; text-decoration: none; cursor: pointer; text-align: left; } .user-menu-item:hover { background: var(--bg-hover); } .user-menu-item svg { color: var(--text-dim); flex: none; } .user-menu-sep { height: 1px; background: var(--border-soft); margin: 5px 8px; } .user-menu-danger, .user-menu-danger svg { color: var(--down); } .user-menu-danger:hover { background: color-mix(in srgb, var(--down) 10%, transparent); } /* Navigazione interna alla pagina di lavoro (sidebar) */ .page-nav { flex: 1; overflow-y: auto; min-height: 0; margin: 12px 10px 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .page-nav .pn-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 650; padding: 0 8px 6px; } .page-nav a { display: block; padding: 6px 9px; border-radius: 7px; margin-bottom: 2px; font-size: 12.5px; color: var(--text-dim); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; } .page-nav a:hover { background: var(--bg-hover); color: var(--text); } /* Livello 1: i capitoli della pagina — pesati e distanziati */ .page-nav a.lv1 { font-weight: 650; color: var(--text); font-size: 12.5px; margin-top: 12px; } .page-nav a.lv1:first-of-type { margin-top: 2px; } /* Livello 2: i blocchi — indentati con guida verticale */ .page-nav a.sub { margin-left: 10px; padding-left: 12px; border-left: 2px solid var(--border-soft); border-radius: 0 7px 7px 0; } /* Livello 3: aree e criticità — più piccoli, guida più profonda */ .page-nav a.sub2 { margin-left: 24px; padding: 4px 9px 4px 12px; border-left: 2px solid var(--border-soft); border-radius: 0 7px 7px 0; font-size: 11.5px; color: var(--text-faint); } .page-nav a.active { color: var(--accent); font-weight: 600; background: color-mix(in srgb, var(--accent) 8%, transparent); } .page-nav a.sub.active, .page-nav a.sub2.active { border-left-color: var(--accent); } .page-nav .pn-row { display: flex; align-items: center; gap: 2px; } .page-nav .pn-row a { flex: 1; min-width: 0; } .page-nav .pn-toggle { border: none; background: none; color: var(--text-faint); cursor: pointer; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; margin-bottom: 2px; padding: 0; } .page-nav .pn-toggle:hover { background: var(--bg-hover); color: var(--text); } .page-nav .pn-toggle svg { transition: transform .15s ease; } .page-nav .pn-toggle.open svg { transform: rotate(180deg); } /* Prolungamento al passaggio: la voce tagliata mostrata per intero, anche oltre la colonna della sidebar */ .pn-tip { position: fixed; z-index: 200; pointer-events: none; display: flex; align-items: center; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 0 12px 0 9px; white-space: nowrap; box-shadow: 0 8px 26px rgba(0, 0, 0, .28); } /* Pulsante sticky "Indice" nell'anteprima PDF */ #pdf-toc-btn { position: absolute; bottom: 18px; right: 22px; z-index: 65; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); box-shadow: 0 10px 28px rgba(0, 0, 0, .3); display: inline-flex; align-items: center; gap: 6px; } #pdf-toc-btn:hover { background: var(--bg-hover); } /* Caselle OTP a 6 cifre */ .otp-boxes { display: flex; gap: 8px; } .otp-boxes input { width: 42px; height: 50px; text-align: center; font-family: var(--mono); font-size: 19px; font-weight: 600; padding: 0; } /* Ancore della navigazione di pagina: il titolo non deve finire sotto la topbar sticky (scrollIntoView rispetta scroll-margin). */ h2.section, details.editor-block > summary, .block-body[data-editor-block] { scroll-margin-top: 78px; } /* Box link di riferimento per sezione (editor) */ .links-box { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--bg-elev-2); padding: 10px 12px; margin-bottom: 4px; } /* Toast post-reload (esito dei job che ricaricano la pagina) */ .app-toast { position: fixed; top: 64px; right: 22px; z-index: 220; max-width: 400px; padding: 11px 15px; border-radius: 10px; background: color-mix(in srgb, var(--up) 12%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--up) 45%, transparent); color: var(--text); font-size: 13px; line-height: 1.45; box-shadow: 0 12px 34px rgba(0, 0, 0, .25); transition: opacity .4s ease; } .app-toast.hide { opacity: 0; } /* Testo esito positivo (es. "✓ Analizzati il …") */ .ok-text { color: var(--up); } /* Badge "Proponi criticità in sospeso" sui summary dei blocchi */ .suggest-pending-badge { font-size: 10.5px; font-weight: 650; letter-spacing: .01em; padding: 2px 9px; border-radius: 999px; flex: none; background: var(--down); color: #fff; } /* Toggle "nel report" ed evidenza dei blocchi esclusi dal PDF */ .report-include { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; color: var(--text-dim); cursor: pointer; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--border-soft); background: var(--bg-elev-2); } .report-include input { width: auto; accent-color: var(--accent); } [data-report-excluded] { opacity: .55; } [data-report-excluded] .report-include { opacity: 1; border-color: color-mix(in srgb, var(--down) 45%, transparent); color: var(--down); font-weight: 600; } /* Spunta "manca" sui link di sezione */ .link-missing-toggle { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); cursor: pointer; white-space: nowrap; } .link-missing-toggle input { width: auto; accent-color: var(--down); } .link-missing-toggle:has(input:checked) { color: var(--down); font-weight: 600; } /* Score nella lista audit */ .score-cell { white-space: nowrap; font-variant-numeric: tabular-nums; } .score-value { font-weight: 700; font-size: 14px; }