/* ============================================================================ TrueSight — système de design « poste de pilotage » Thème sombre, accent cyan-phosphore. Tokens repris de design/DESIGN-LANGUAGE.md et de design/prototype.html. Remplace l'usage de Tailwind CDN (cf. SPEC §7, adapté : la charte impose un thème sombre maison). ============================================================================ */ :root{ --bg:#080B0F; --bg-2:#0C1116; --bg-3:#10171E; --raised:#131C24; --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.11); --line-3:rgba(255,255,255,.18); --text:#E8EEF4; --dim:#93A1B0; --faint:#5A6773; --signal:#2BE3C6; --signal-dim:#1B9C8A; --ok:#34E2B0; --warn:#F5B83D; --danger:#FF5D63; --info:#5AB6FF; --glow:0 0 0 1px rgba(43,227,198,.25),0 0 22px -6px rgba(43,227,198,.55); --font-ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --r:7px; --r-lg:11px; } /* ============================================================================ Thème CLAIR — surcharge des tokens (activé via ). Les « écrans » (terminal, bureau à distance, sortie de commande) restent volontairement sombres dans les deux thèmes. ============================================================================ */ :root.theme-light{ --bg:#eef1f5; --bg-2:#ffffff; --bg-3:#f3f6f9; --raised:#e9eef3; --line:rgba(16,32,48,.10); --line-2:rgba(16,32,48,.16); --line-3:rgba(16,32,48,.26); --text:#13212e; --dim:#4a5a67; --faint:#7a8794; --signal:#0c9b89; --signal-dim:#0a8576; --ok:#1a9d6f; --warn:#a9730f; --danger:#d6373d; --info:#2477cf; --glow:0 0 0 1px rgba(12,155,137,.30),0 0 18px -6px rgba(12,155,137,.45); } /* Surfaces définies en dur (non variabilisées) : on les adapte au thème clair. */ :root.theme-light body::before{background-image:radial-gradient(circle at 1px 1px,rgba(16,32,48,.06) 1px,transparent 0)} :root.theme-light body::after{background:radial-gradient(ellipse at center,rgba(12,155,137,.08),transparent 60%)} :root.theme-light .topbar{background:rgba(255,255,255,.72)} :root.theme-light .flash.error{color:#a3262b} :root.theme-light .flash.info{color:#1c5fa0} :root.theme-light .gauge .track{background:#dfe5ec} *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{ font-family:var(--font-ui); background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden; position:relative; } /* Grille en pointillés + halo cyan discret (fond cockpit) */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 1px,transparent 0); background-size:26px 26px; } body::after{ content:"";position:fixed;top:-30%;left:35%;width:60%;height:70%;z-index:0;pointer-events:none; background:radial-gradient(ellipse at center,rgba(43,227,198,.10),transparent 60%); filter:blur(20px); } a{color:inherit;text-decoration:none} button{font-family:inherit} /* --------------------------------------------------------------------------- Layout général : rail + colonne principale --------------------------------------------------------------------------- */ .app{position:relative;z-index:1;display:grid;grid-template-columns:62px 1fr;height:100vh} /* ---- rail gauche ---- */ .rail{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-right:1px solid var(--line); display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px; } .brandmark{ width:36px;height:36px;border-radius:9px;display:grid;place-items:center;margin-bottom:14px; background:linear-gradient(150deg,var(--bg-3),var(--raised));border:1px solid var(--line-2); position:relative;box-shadow:var(--glow); } .brandmark span{width:13px;height:13px;border-radius:50%;border:2.5px solid var(--signal);box-shadow:0 0 10px -1px var(--signal)} .brandmark::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--signal)} .navi{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;color:var(--faint);cursor:pointer;position:relative;transition:.18s} .navi:hover{color:var(--dim);background:var(--bg-3)} .navi.on{color:var(--signal);background:var(--bg-3)} .navi.on::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:3px;background:var(--signal);box-shadow:0 0 8px var(--signal)} .navi svg{width:19px;height:19px} /* item « à venir » : visuellement désactivé (tooltip « Bientôt » conservé au survol) */ .navi.disabled{opacity:.3;cursor:not-allowed;color:var(--faint)} .navi.disabled:hover{background:none;color:var(--faint)} .rail .spacer{flex:1} /* ---- colonne principale ---- */ .main{display:flex;flex-direction:column;min-width:0;overflow:hidden} /* ---- topbar ---- */ .topbar{ display:flex;align-items:center;gap:18px;padding:0 22px;height:58px; border-bottom:1px solid var(--line);background:rgba(8,11,15,.6);backdrop-filter:blur(8px);flex:none; } .wordmark{font-family:var(--font-mono);font-weight:700;letter-spacing:.22em;font-size:14px;white-space:nowrap} .wordmark b{color:var(--signal);font-weight:700} .live{ display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em; color:var(--ok);padding:5px 11px;border:1px solid rgba(52,226,176,.3);border-radius:30px;background:rgba(52,226,176,.06) } .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:beat 1.6s infinite} .search{ margin-left:8px;flex:1;max-width:340px;display:flex;align-items:center;gap:9px;height:36px;padding:0 13px; background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);color:var(--faint);font-size:13px;transition:.18s } .search:hover,.search:focus-within{border-color:var(--line-2)} .search svg{width:15px;height:15px;flex:none} .search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-ui);font-size:13px} .search input::placeholder{color:var(--faint)} .search kbd{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--faint);border:1px solid var(--line-2);border-radius:4px;padding:1px 5px} .topbar .right{margin-left:auto;display:flex;align-items:center;gap:16px} .region{font-family:var(--font-mono);font-size:11px;color:var(--dim);letter-spacing:.08em;display:flex;align-items:center;gap:7px;white-space:nowrap} .region b{color:var(--signal);font-weight:500} .region .g{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)} .user-block{display:flex;align-items:center;gap:10px} .user-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25} .user-meta .em{font-size:12px;color:var(--dim);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-meta .ro{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .user-meta .ro.admin{color:var(--warn)} .avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(150deg,var(--signal-dim),#16504a);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:700;color:#03110f;border:1px solid var(--line-2);flex:none} .logout-link{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--dim);display:grid;place-items:center;transition:.16s} .logout-link:hover{color:var(--danger);border-color:rgba(255,93,99,.4)} .logout-link svg{width:15px;height:15px} .icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:.16s;flex:none} .icon-btn:hover{color:var(--signal);border-color:var(--signal-dim)} .icon-btn svg{width:16px;height:16px} /* ---- zone de défilement ---- */ .scroll{overflow:auto;padding:22px;flex:1;position:relative} .scroll::-webkit-scrollbar{width:10px;height:10px} .scroll::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:10px;border:3px solid var(--bg)} .scroll::-webkit-scrollbar-track{background:transparent} /* ---- messages flash ---- */ .flashes{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .flash{ font-size:13px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line-2); background:var(--bg-2);color:var(--text);display:flex;align-items:center;gap:9px; } .flash.error{border-color:rgba(255,93,99,.35);background:rgba(255,93,99,.08);color:#ffd2d4} .flash.info{border-color:rgba(90,182,255,.3);background:rgba(90,182,255,.08);color:#cfe7ff} /* ---- en-tête de page ---- */ .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .page-head h1{font-size:21px;font-weight:700;letter-spacing:-.01em} .page-head .sub{font-size:12.5px;color:var(--dim);margin-top:3px} .page-head .label{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:5px} /* --------------------------------------------------------------------------- KPIs --------------------------------------------------------------------------- */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px} .kpi{ background:linear-gradient(160deg,var(--bg-2),var(--bg-3));border:1px solid var(--line);border-radius:var(--r-lg); padding:15px 17px;position:relative;overflow:hidden;animation:rise .6s cubic-bezier(.2,.7,.2,1) both } .kpi:nth-child(2){animation-delay:.05s}.kpi:nth-child(3){animation-delay:.1s}.kpi:nth-child(4){animation-delay:.15s} .kpi .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;display:flex;align-items:center;gap:7px} .kpi .lbl .d{width:7px;height:7px;border-radius:50%;flex:none} .kpi .lbl svg{width:11px;height:11px;color:var(--signal)} .kpi .val{font-family:var(--font-mono);font-size:34px;font-weight:700;line-height:1;margin-top:11px;letter-spacing:-.02em} .kpi .val small{font-size:18px;color:var(--dim);font-weight:500} .kpi .sub{font-size:12px;color:var(--dim);margin-top:7px;display:flex;align-items:center;gap:5px} .kpi .spark{position:absolute;right:14px;bottom:13px;opacity:.85} .kpi.accent{border-color:rgba(43,227,198,.28)} .kpi.accent::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 0,rgba(43,227,198,.12),transparent 55%);pointer-events:none} .trend-up{color:var(--ok)}.trend-down{color:var(--danger)} /* --------------------------------------------------------------------------- Grilles de colonnes --------------------------------------------------------------------------- */ .cols{display:grid;grid-template-columns:1fr 360px;gap:14px;align-items:start} .grid-3{display:grid;grid-template-columns:1fr 2fr;gap:14px;align-items:start;margin-bottom:14px} @media (max-width:1100px){ .kpis{grid-template-columns:repeat(2,1fr)} .cols,.grid-3{grid-template-columns:1fr} } /* --------------------------------------------------------------------------- Panneaux --------------------------------------------------------------------------- */ .panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;animation:rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:.18s} .phead{display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--line);flex-wrap:wrap} .phead .fleet-filter{margin-left:auto} .phead h2{font-size:13.5px;font-weight:600;letter-spacing:.01em} .phead .tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint);margin-left:auto;text-transform:uppercase;white-space:nowrap} .phead .ico{width:18px;height:18px;color:var(--signal);flex:none} .pbody{padding:15px 17px} .side{display:flex;flex-direction:column;gap:14px} /* --------------------------------------------------------------------------- Tableaux (parc, logiciels, audit) --------------------------------------------------------------------------- */ table{width:100%;border-collapse:collapse} thead th{ font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint); text-align:left;padding:11px 17px;font-weight:500;border-bottom:1px solid var(--line);white-space:nowrap; background:var(--bg-2); } thead th.num{text-align:right} tbody td{padding:12px 17px;border-bottom:1px solid var(--line);vertical-align:middle} tbody tr{transition:.15s;position:relative} tbody tr:last-child td{border-bottom:none} tbody tr.clickable{cursor:pointer} tbody tr:hover{background:var(--bg-3)} tbody tr.clickable:hover td:first-child{box-shadow:inset 2px 0 0 var(--signal)} .empty-cell{padding:34px 17px;text-align:center;color:var(--faint);font-size:13px} .err-cell{color:var(--danger)} .sticky-head thead th{position:sticky;top:0;z-index:1} .scroll-y{overflow:auto;max-height:380px} .scroll-y::-webkit-scrollbar{width:9px;height:9px} .scroll-y::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:9px;border:2px solid var(--bg-2)} /* hôte (hostname + utilisateur) */ .host{display:flex;align-items:center;gap:11px} .host .nm{font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--text)} .host .us{font-size:11.5px;color:var(--faint);margin-top:1px} .revoked{margin-left:6px;font-family:var(--font-mono);font-size:10px;color:var(--danger);letter-spacing:.06em} /* pastilles d'état */ .dot{width:9px;height:9px;border-radius:50%;flex:none;position:relative;display:inline-block} .dot.on{background:var(--ok);box-shadow:0 0 9px var(--ok);animation:beat 2.4s infinite} .dot.alert{background:var(--warn);box-shadow:0 0 9px var(--warn)} .dot.off{background:#33404b;border:1px solid #46545f} /* Compat : anciennes classes JS conservées (status-dot / status-online / status-offline) */ .status-dot{width:9px;height:9px;border-radius:50%;flex:none;position:relative;display:inline-block} .status-online{background:var(--ok);box-shadow:0 0 9px var(--ok);animation:beat 2.4s infinite} .status-offline{background:#33404b;border:1px solid #46545f} /* chips / badges */ .chip{font-family:var(--font-mono);font-size:11px;color:var(--dim);background:var(--bg-3);border:1px solid var(--line);padding:3px 9px;border-radius:30px;letter-spacing:.04em;white-space:nowrap;display:inline-block} .chip.tag{font-size:10.5px;margin-right:5px;margin-bottom:3px} .badge{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--dim);white-space:nowrap} .badge.ok{color:var(--ok);border-color:rgba(52,226,176,.3);background:rgba(52,226,176,.08)} .badge.off{color:var(--faint)} .badge.warn{color:var(--warn);border-color:rgba(245,184,61,.3);background:rgba(245,184,61,.08)} .badge.danger{color:var(--danger);border-color:rgba(255,93,99,.3);background:rgba(255,93,99,.08)} .badge.info{color:var(--info);border-color:rgba(90,182,255,.3);background:rgba(90,182,255,.08)} /* jauges CPU / RAM */ .gauge{display:flex;align-items:center;gap:9px;min-width:110px} .gauge .track{flex:1;height:5px;border-radius:5px;background:#1b2730;overflow:hidden;min-width:54px} .gauge .fill{height:100%;border-radius:5px;transition:width .4s ease} .gauge .pc{font-family:var(--font-mono);font-size:12px;color:var(--dim);min-width:38px;text-align:right} .seen{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);white-space:nowrap} .muted{color:var(--faint)} /* actions ligne */ .act{display:flex;gap:7px;justify-content:flex-end} .btn-ico{width:30px;height:30px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:.16s} .btn-ico:hover{color:var(--signal);border-color:var(--signal-dim);box-shadow:var(--glow)} .btn-ico svg{width:15px;height:15px} .btn-ico.disabled{opacity:.32;cursor:not-allowed;pointer-events:none} /* --------------------------------------------------------------------------- Listes (inventaire matériel = paires clé/valeur) --------------------------------------------------------------------------- */ .dl{display:flex;flex-direction:column;gap:0} .dl .kv{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)} .dl .kv:last-child{border-bottom:none} .dl dt{color:var(--dim);font-size:12.5px;flex:none} .dl dd{color:var(--text);font-size:12.5px;text-align:right;font-weight:500;word-break:break-word} .dl dd.mono{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--dim)} .dl-loading,.dl-empty{color:var(--faint);font-size:12.5px;padding:6px 0} /* --------------------------------------------------------------------------- Graphiques (cartouches Chart.js) --------------------------------------------------------------------------- */ .chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px} .chart-cur{font-family:var(--font-mono);font-size:11px;color:var(--dim);letter-spacing:.03em} .chart-block{margin-bottom:14px} .chart-block:last-child{margin-bottom:0} .chart-block .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:7px} .chart-wrap{position:relative;height:110px} /* --------------------------------------------------------------------------- Console de commande --------------------------------------------------------------------------- */ .field-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .console-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} select.input,input.input{ background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r);color:var(--text); font-family:var(--font-ui);font-size:13px;padding:7px 11px;outline:none;transition:.16s; } select.input:focus,input.input:focus,textarea.input:focus{border-color:var(--signal-dim);box-shadow:var(--glow)} input.input.w-sm{width:96px} textarea.input{ width:100%;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r);color:var(--text); font-family:var(--font-mono);font-size:12.5px;padding:11px 13px;outline:none;transition:.16s;resize:vertical;min-height:74px; } .cmd-status{font-family:var(--font-mono);font-size:11.5px;color:var(--dim);letter-spacing:.02em} .cmd-output{ margin-top:12px;background:#05080a;border:1px solid var(--line-2);border-radius:var(--r); color:#cfe7df;font-family:var(--font-mono);font-size:12px;line-height:1.55;padding:14px; overflow:auto;max-height:340px;white-space:pre-wrap;word-break:break-word; } .cmd-output.hidden{display:none} .cmd-output::-webkit-scrollbar{width:9px;height:9px} .cmd-output::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:9px;border:2px solid #05080a} /* boutons génériques */ .btn{height:36px;padding:0 16px;border-radius:7px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--dim);font-family:var(--font-ui);font-size:12.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.16s;white-space:nowrap} .btn svg{width:15px;height:15px} .btn:hover{color:var(--text);border-color:var(--line-3)} .btn:disabled{opacity:.45;cursor:not-allowed} .btn.go{background:linear-gradient(180deg,var(--signal),var(--signal-dim));color:#03110f;border:none;font-weight:700;box-shadow:var(--glow)} .btn.go:hover{filter:brightness(1.08);color:#03110f} .btn.go:disabled{filter:none;opacity:.55} .btn.danger{color:var(--danger);border-color:rgba(255,93,99,.3)} .btn.danger:hover{background:rgba(255,93,99,.1);color:#ffd2d4} .btn.full{width:100%} .btn.block{flex:1} /* --------------------------------------------------------------------------- Fenêtre bureau à distance --------------------------------------------------------------------------- */ .remote-panel{padding:0} .rwin{margin:14px;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#05080a;box-shadow:0 14px 40px -18px rgba(0,0,0,.9)} .rbar{display:flex;align-items:center;gap:9px;padding:8px 11px;background:linear-gradient(180deg,var(--bg-3),var(--bg-2));border-bottom:1px solid var(--line)} .rbar .rec{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--faint)} .rbar .rec i{width:7px;height:7px;border-radius:50%;background:#33404b;flex:none} .rbar.is-live .rec{color:var(--ok)} .rbar.is-live .rec i{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:beat 1.3s infinite} .rbar .name{font-family:var(--font-mono);font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rbar .stat{margin-left:auto;display:flex;gap:8px;font-family:var(--font-mono);font-size:10px;color:var(--faint);white-space:nowrap} .rbar .stat b{color:var(--signal);font-weight:500} .rbar .stat .sep{color:var(--faint)} .rscreen{aspect-ratio:16/10;position:relative;background:radial-gradient(circle at 30% 20%,#0d2230,#06121a 70%);overflow:hidden;display:flex;align-items:center;justify-content:center} .rscreen::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);pointer-events:none;z-index:2} #pv-remote-canvas{position:relative;z-index:1;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block;background:#05080a;cursor:default;outline:none} #pv-remote-canvas.controlling{cursor:none} .rscreen .placeholder{position:relative;z-index:1;text-align:center;color:var(--faint);font-size:12.5px;padding:24px;max-width:80%} .rscreen .placeholder svg{width:34px;height:34px;color:var(--signal-dim);margin-bottom:10px;opacity:.7} .rscreen .placeholder .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--dim)} .rscreen.has-stream .placeholder{display:none} .rfoot{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line);background:var(--bg-2);flex-wrap:wrap} .rfoot .btn{flex:1} .remote-monitors{display:flex;gap:6px;align-items:center;padding:0 14px 11px;flex-wrap:wrap} .remote-monitors .field-label{margin-right:2px} .remote-error{margin:0 14px 12px;font-size:12px;color:#ffd2d4;background:rgba(255,93,99,.08);border:1px solid rgba(255,93,99,.3);border-radius:var(--r);padding:9px 12px;display:none} .remote-error.show{display:block} /* fullscreen : le canvas occupe tout l'écran */ .rscreen:fullscreen{aspect-ratio:auto;width:100vw;height:100vh} .rscreen:fullscreen #pv-remote-canvas{width:100vw;height:100vh} /* --------------------------------------------------------------------------- Zone de travail à onglets (bureau / terminal / commande) --------------------------------------------------------------------------- */ .workzone{margin-bottom:18px;display:flex;flex-direction:column} .tablist{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg-3),var(--bg-2))} .tab{ position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px; background:none;border:none;cursor:pointer;color:var(--dim);font-family:var(--font-ui); font-size:13px;font-weight:600;letter-spacing:.01em;transition:.16s; } .tab svg{width:16px;height:16px;color:var(--faint);transition:.16s} .tab:hover{color:var(--text)} .tab:hover svg{color:var(--dim)} .tab[aria-selected="true"]{color:var(--signal)} .tab[aria-selected="true"] svg{color:var(--signal)} .tab[aria-selected="true"]::after{ content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px; background:var(--signal);box-shadow:0 0 8px var(--signal); } .tab:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--signal-dim)} .tabpanel{padding:14px;min-height:60vh;display:flex;flex-direction:column} .tabpanel.hidden{display:none} /* Outil de la barre d'onglets (agrandir / réduire) */ .tablist-spacer{flex:1} .tab-tool{display:inline-flex;align-items:center;justify-content:center;width:44px;height:46px;background:none;border:none;color:var(--faint);cursor:pointer;transition:.16s} .tab-tool svg{width:17px;height:17px} .tab-tool:hover{color:var(--text)} .tab-tool.on{color:var(--signal)} /* Mode agrandi : la zone de travail remplit la fenêtre, le reste est masqué (zéro scroll) */ body.wz-focus .scroll{padding:0;overflow:hidden;display:flex} body.wz-focus .scroll > *{display:none} body.wz-focus .scroll > .workzone{display:flex;flex:1;margin:0;border:none;border-radius:0;animation:none} body.wz-focus .workzone .tabpanel:not(.hidden){flex:1;min-height:0} /* Bureau à distance dans l'onglet : occupe toute la hauteur disponible */ .tabpanel .rwin{margin:0;flex:1;display:flex;flex-direction:column} .tabpanel .rscreen{aspect-ratio:auto;flex:1;min-height:0} .tabpanel .rfoot{flex:none} /* --------------------------------------------------------------------------- Terminal interactif (xterm.js) --------------------------------------------------------------------------- */ .termwin{flex:1;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#05080a;box-shadow:0 14px 40px -18px rgba(0,0,0,.9)} .termscreen{flex:1;min-height:0;position:relative;background:#05080a;display:flex;align-items:center;justify-content:center;overflow:hidden} .term-mount{position:absolute;inset:0;padding:8px 10px} .term-mount .xterm{height:100%} .termscreen .placeholder{position:relative;z-index:1;text-align:center;color:var(--faint);font-size:12.5px;padding:24px;max-width:80%} .termscreen .placeholder svg{width:34px;height:34px;color:var(--signal-dim);margin-bottom:10px;opacity:.7} .termscreen .placeholder .t{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--dim)} .termwin .rfoot{align-items:center} .termwin .rfoot .grow{flex:1} .termwin .rfoot .field-label{flex:none} .termwin .rfoot select.input{flex:none} .termwin .rfoot .btn{flex:none} /* la barre de défilement xterm aux couleurs de la charte */ .term-mount .xterm-viewport::-webkit-scrollbar{width:9px;height:9px} .term-mount .xterm-viewport::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:9px;border:2px solid #05080a} /* --------------------------------------------------------------------------- Commande ponctuelle + actions rapides --------------------------------------------------------------------------- */ .cmdwin{flex:1;display:flex;flex-direction:column} .quick-actions{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)} .quick-actions .field-label{display:block;margin-bottom:9px} .quick-row{display:flex;gap:8px;flex-wrap:wrap} .btn.quick{height:38px} .btn.quick[data-action="restart"]:hover,.btn.quick[data-action="logoff"]:hover{color:var(--warn);border-color:rgba(245,184,61,.4)} .quick-msg{display:flex;gap:8px;margin-top:10px} .quick-msg .input{flex:1} .quick-msg.hidden{display:none} /* Bibliothèque de scripts 1-clic */ .script-lib{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)} .script-lib > .field-label{display:block;margin-bottom:10px} .script-groups{display:flex;flex-direction:column;gap:11px} .script-cat{display:flex;flex-direction:column;gap:7px} .script-cat-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-dim)} .btn.quick.script-btn{height:34px} .btn.quick.script-btn.danger{color:var(--danger);border-color:rgba(255,93,99,.3)} .btn.quick.script-btn.danger:hover{background:rgba(255,93,99,.1);color:#ffd2d4} /* Étiquettes éditables (fiche poste) */ .tagbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg)} .tag-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .chip.tag.tag-removable{display:inline-flex;align-items:center;gap:5px;padding-right:5px} .tag-x{background:none;border:none;color:var(--faint);cursor:pointer;font-size:14px;line-height:1;padding:0 2px;transition:.16s} .tag-x:hover{color:var(--danger)} .tagbar .input{height:30px;width:180px;padding:5px 10px;font-size:12.5px} /* Liste du parc : sélection multiple + actions groupées + tags cliquables */ .cb-col{width:36px;text-align:center} .cb-col input{width:15px;height:15px;accent-color:var(--signal);cursor:pointer;vertical-align:middle} .chip.tag.tag-click{cursor:pointer} .chip.tag.tag-click:hover{color:var(--signal);border-color:var(--signal-dim)} .bulkbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 17px;border-bottom:1px solid var(--line);background:rgba(43,227,198,.05)} .bulkbar .grow{flex:1} .bulk-count{font-family:var(--font-mono);font-size:11.5px;color:var(--signal);letter-spacing:.04em} /* Onglet Activité — frise d'événements */ .activity-win{display:flex;flex-direction:column;gap:14px} .act-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .act-toolbar .grow{flex:1} .act-summary{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:12px 15px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg)} .act-summary:empty{display:none} .act-summary .s-item{display:flex;flex-direction:column;gap:6px;min-width:0} .act-summary .s-apps{flex:1;min-width:200px} .act-summary .s-label{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} .act-summary .s-val{font-size:13px;color:var(--text)} .act-summary .s-chips{display:flex;flex-wrap:wrap;gap:5px} .act-feed{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto;padding-right:4px} .act-feed::-webkit-scrollbar{width:9px} .act-feed::-webkit-scrollbar-thumb{background:var(--bg-3);border-radius:9px;border:2px solid var(--bg)} .feed-item{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:start;padding:10px 13px;background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r)} .feed-item.b-error,.feed-item.b-logon_fail{border-left-color:var(--danger)} .feed-item.b-warning{border-left-color:var(--warn)} .feed-item.b-logon{border-left-color:var(--info)} .feed-item.b-power{border-left-color:var(--signal)} .feed-meta{display:flex;flex-direction:column;gap:6px} .feed-time{font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap} .feed-title{font-size:13px;font-weight:600;letter-spacing:-.01em} .feed-detail{font-size:12px;color:var(--dim);margin-top:3px;word-break:break-word;line-height:1.45} .feed-empty{padding:30px;text-align:center;color:var(--faint);font-size:13px} @media (max-width:700px){.feed-item{grid-template-columns:1fr}} /* --------------------------------------------------------------------------- Barre d'état (bas) --------------------------------------------------------------------------- */ .statusbar{display:flex;align-items:center;gap:20px;height:30px;padding:0 22px;border-top:1px solid var(--line);background:var(--bg-2);font-family:var(--font-mono);font-size:10.5px;color:var(--faint);letter-spacing:.06em;flex:none;overflow:hidden} .statusbar .s{display:flex;align-items:center;gap:6px;white-space:nowrap} .statusbar .s b{color:var(--dim);font-weight:500} .statusbar .s .g{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)} .statusbar .end{margin-left:auto;color:var(--signal);white-space:nowrap} /* --------------------------------------------------------------------------- Pages d'authentification (login / mfa) --------------------------------------------------------------------------- */ .auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;z-index:1} .auth-card{ width:100%;max-width:380px;background:linear-gradient(160deg,var(--bg-2),var(--bg-3)); border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 28px; box-shadow:0 26px 70px -30px rgba(0,0,0,.85);animation:rise .6s cubic-bezier(.2,.7,.2,1) both;position:relative;overflow:hidden; } .auth-card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% -10%,rgba(43,227,198,.12),transparent 55%);pointer-events:none} .auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px;position:relative;z-index:1} .auth-brand .mk{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(150deg,var(--bg-3),var(--raised));border:1px solid var(--line-2);box-shadow:var(--glow);position:relative} .auth-brand .mk span{width:12px;height:12px;border-radius:50%;border:2.4px solid var(--signal);box-shadow:0 0 10px -1px var(--signal)} .auth-brand .mk::after{content:"";position:absolute;width:4.5px;height:4.5px;border-radius:50%;background:var(--signal)} .auth-brand .wm{font-family:var(--font-mono);font-weight:700;letter-spacing:.22em;font-size:16px} .auth-brand .wm b{color:var(--signal)} .auth-sub{text-align:center;font-size:12.5px;color:var(--dim);margin:8px 0 22px;position:relative;z-index:1} .auth-form{display:flex;flex-direction:column;gap:15px;position:relative;z-index:1} .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)} .field input{ background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);color:var(--text); font-family:var(--font-ui);font-size:14px;padding:11px 13px;outline:none;transition:.16s; } .field input:focus{border-color:var(--signal-dim);box-shadow:var(--glow)} .field input.code-input{text-align:center;letter-spacing:.5em;font-family:var(--font-mono);font-size:20px;padding-left:.5em} .auth-cancel{display:block;text-align:center;font-size:12px;color:var(--faint);margin-top:4px;transition:.16s} .auth-cancel:hover{color:var(--dim)} /* --------------------------------------------------------------------------- Sélecteur segmenté (filtre des alertes) --------------------------------------------------------------------------- */ .seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px} .seg-btn{height:30px;padding:0 15px;border:none;background:none;color:var(--faint);font-family:var(--font-ui);font-size:12.5px;font-weight:600;border-radius:6px;cursor:pointer;transition:.16s} .seg-btn:hover{color:var(--dim)} .seg-btn.on{background:var(--bg-3);color:var(--signal);box-shadow:inset 0 0 0 1px var(--line-2)} /* --------------------------------------------------------------------------- Réglages (compte / mot de passe / MFA) --------------------------------------------------------------------------- */ .set-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} @media (max-width:1100px){.set-grid{grid-template-columns:1fr}} .set-form{display:flex;flex-direction:column;gap:14px} .form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px} .form-msg{font-size:12.5px;font-weight:500} .form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--danger)} .pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:6px 12px;border-radius:30px;border:1px solid var(--line-2);background:var(--bg-3);color:var(--dim)} .pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;box-shadow:0 0 7px currentColor} .pill.on{color:var(--ok);border-color:rgba(52,226,176,.3);background:rgba(52,226,176,.06)} .pill.off{color:var(--faint)} .pill.off i{box-shadow:none} .mfa-state{margin-bottom:12px} .mfa-qr{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border:1px dashed var(--line-2);border-radius:var(--r);margin:14px 0;background:var(--bg-3)} .mfa-qr img{width:172px;height:172px;border-radius:8px;background:#fff;padding:8px;display:block} .mfa-secret{font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.1em;word-break:break-all;text-align:center;max-width:240px} /* Gestion des accès (super-administrateur) */ .user-create{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:4px} .user-create .field{gap:6px} .user-create .field.grow{flex:1;min-width:220px} .btn.xs{height:28px;padding:0 11px;font-size:11.5px} .role-sel{min-width:158px} .pw-row td{background:var(--bg-3)} .pw-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pw-inline .pw-new{flex:1;min-width:180px} /* --------------------------------------------------------------------------- Déploiement & mises à jour (Réglages) --------------------------------------------------------------------------- */ .deploy-block .block-title{font-size:14px;font-weight:700;margin:0 0 4px;color:var(--text)} .deploy-block > .sub{margin:0 0 14px} .deploy-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:4px} .deploy-form .field{gap:6px} .deploy-form .field.grow{flex:1;min-width:200px} .deploy-form .chk{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);white-space:nowrap;cursor:pointer} .deploy-form .chk input{width:15px;height:15px;accent-color:var(--signal)} .link-result{margin-top:14px;padding:13px 15px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg)} .link-result > .field-label{display:block;margin-bottom:8px} .copy-row{display:flex;align-items:stretch;gap:8px} .oneliner{flex:1;font-family:var(--font-mono);font-size:12px;color:var(--signal);background:var(--bg);border:1px solid var(--line-2);border-radius:7px;padding:9px 12px;word-break:break-all;line-height:1.5;user-select:all} .copy-row .btn{flex:none} .btn.ghost{background:var(--bg-3)} .btn.ok-flash{color:var(--ok);border-color:rgba(52,226,176,.4)} .link-result .sub{margin:9px 0 0} .rel-progress{display:flex;align-items:center;gap:10px;margin-top:10px} .rel-progress progress{flex:1;height:8px;border-radius:6px;overflow:hidden;border:none;background:var(--bg-3)} .rel-progress progress::-webkit-progress-bar{background:var(--bg-3)} .rel-progress progress::-webkit-progress-value{background:var(--signal)} .rel-progress span{font-size:11.5px;color:var(--dim);min-width:42px;text-align:right} /* --------------------------------------------------------------------------- Vue d'ensemble (overview) + santé / emplacements --------------------------------------------------------------------------- */ .page-head .head-right{margin-top:8px} .ov-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;align-items:start} @media (max-width:980px){.ov-grid{grid-template-columns:1fr}} /* Barre de santé globale */ .healthbar{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--bg-3);border:1px solid var(--line)} .healthbar .hseg{height:100%;transition:width .4s ease} .health-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px} .hleg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim)} .hleg i{width:10px;height:10px;border-radius:3px;display:inline-block} .hleg b{color:var(--text);font-family:var(--font-mono)} /* Cartes d'emplacement */ .site-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;padding:14px 16px} .site-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 13px;cursor:pointer;transition:.16s} .site-card:hover{border-color:var(--line-3);box-shadow:var(--glow)} .site-top{display:flex;align-items:center;gap:8px;margin-bottom:8px} .site-pin{width:10px;height:10px;border-radius:50%;flex:none} .site-name{font-weight:700;font-size:13.5px;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .site-actions{display:flex;gap:4px;opacity:0;transition:.16s} .site-card:hover .site-actions{opacity:1} .btn-ico.sm{width:24px;height:24px;border-radius:6px} .btn-ico.sm svg{width:13px;height:13px} .site-meta{display:flex;gap:12px;font-size:11.5px;color:var(--dim);margin-bottom:8px} .site-on{color:var(--ok)} .site-dots{display:flex;gap:10px;flex-wrap:wrap} .hdot{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--dim);font-family:var(--font-mono)} .hdot i{width:8px;height:8px;border-radius:50%;display:inline-block} /* Problèmes d'intégrité */ .prob-list{display:flex;flex-direction:column;padding:6px 0} .prob-row{display:flex;align-items:center;gap:12px;padding:11px 16px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);transition:.14s} .prob-row:last-child{border-bottom:none} .prob-row:hover{background:var(--bg-2)} .prob-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none} .prob-ic svg{width:16px;height:16px} .prob-ic.warn{color:var(--warn);background:rgba(245,184,61,.1)} .prob-ic.crit{color:var(--danger);background:rgba(255,93,99,.1)} .prob-lb{flex:1;font-size:13px} .prob-ct{font-family:var(--font-mono);font-weight:700;font-size:15px;color:var(--text)} .prob-ok{display:flex;align-items:center;gap:10px;padding:18px 16px;color:var(--ok);font-size:13px} .prob-ok svg{width:18px;height:18px} .color-input{padding:3px;width:48px;height:36px;cursor:pointer} /* Santé sur la liste du parc */ .dot.healthy{background:var(--ok);box-shadow:0 0 7px var(--ok)} .dot.warning{background:var(--warn);box-shadow:0 0 7px var(--warn)} .dot.critical{background:var(--danger);box-shadow:0 0 7px var(--danger)} .dot.unknown{background:#5A6773} .us.hs-warning{color:var(--warn)} .us.hs-critical{color:var(--danger)} .us.hs-unknown{color:var(--faint)} .site-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim)} .site-chip i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none} /* Filtres liste : sélecteur d'emplacement + bandeau + affectation groupée */ .site-filter{height:30px;padding:4px 10px;font-size:12px;max-width:200px} .filter-banner{display:flex;align-items:center;gap:14px;padding:9px 16px;background:rgba(90,182,255,.08);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim)} .banner-clear{color:var(--signal);text-decoration:none;font-weight:600} .banner-clear:hover{text-decoration:underline} .bulk-sep{width:1px;height:20px;background:var(--line-2);margin:0 2px} .bulk-site{height:28px;padding:3px 8px;font-size:11.5px;max-width:170px} .btn-ico.danger:hover{color:var(--danger);border-color:rgba(255,93,99,.4)} /* --------------------------------------------------------------------------- Utilitaires --------------------------------------------------------------------------- */ .hidden{display:none !important} .mono{font-family:var(--font-mono)} .text-dim{color:var(--dim)} .text-faint{color:var(--faint)} .nowrap{white-space:nowrap} .spin{width:15px;height:15px;border:2px solid var(--line-2);border-top-color:var(--signal);border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:middle} /* --------------------------------------------------------------------------- Animations --------------------------------------------------------------------------- */ @keyframes beat{0%,100%{opacity:1}50%{opacity:.35}} @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} }