web : page principale et feuille de style (ergonomie Logstream)
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_015a8P6WMRPeqdpd5VCh6jAy
This commit is contained in:
1 parent
010034b988
commit
bcedf3d24c
2 files changed
+1109
No files matched your search
+419
@@ -0,0 +1,419 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>pve-confsync</title>
|
||||
<link rel="icon" href="favicon.svg">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="boot.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="8"/><path d="M8.5 14.5a8 8 0 0 1 13.6-4.6M22.6 6v4.2h-4.2M23.5 17.5a8 8 0 0 1-13.6 4.6M9.4 26v-4.2h4.2"/></svg>
|
||||
<span>pve-confsync</span>
|
||||
<span id="demoBadge" class="demo-badge" hidden data-i18n="demo">DÉMO</span>
|
||||
</div>
|
||||
|
||||
<div class="search">
|
||||
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
|
||||
<input id="q" type="search" autocomplete="off" spellcheck="false" data-i18n-ph="searchPh" data-i18n-aria="searchPh">
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button id="refreshBtn" class="btn" type="button" data-i18n-title="refreshTitle">
|
||||
<!-- Lucide "refresh-cw" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
|
||||
<span class="lbl" data-i18n="refresh">Actualiser</span>
|
||||
</button>
|
||||
<button id="settingsBtn" class="icon-btn" type="button" data-i18n-title="settings" data-i18n-aria="settings">
|
||||
<!-- Lucide "settings" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</button>
|
||||
<button id="themeBtn" class="icon-btn" type="button" data-i18n-title="theme" data-i18n-aria="theme">
|
||||
<svg class="sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
<svg class="moon" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
||||
</button>
|
||||
<span id="whoami" class="whoami" hidden><span class="who-name"></span><span class="who-badge"></span></span>
|
||||
<a id="logoutBtn" class="icon-btn" href="auth/logout" data-i18n-title="logout" data-i18n-aria="logout">
|
||||
<!-- Lucide "log-out" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="progress" aria-hidden="true"></div>
|
||||
</header>
|
||||
|
||||
<section class="filters">
|
||||
<div id="viewMode" class="seg view-mode" role="radiogroup" data-i18n-aria="viewAria">
|
||||
<button type="button" role="radio" data-view="diff">
|
||||
<!-- Lucide "git-compare" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M11 18H8a2 2 0 0 1-2-2V9"/></svg>
|
||||
<span data-i18n="viewDiff">Écarts</span>
|
||||
</button>
|
||||
<button type="button" role="radio" data-view="runs">
|
||||
<!-- Lucide "history" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></svg>
|
||||
<span data-i18n="viewRuns">Journal</span>
|
||||
</button>
|
||||
<button type="button" role="radio" data-view="audit" id="auditTab" hidden>
|
||||
<!-- Lucide "shield-check" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
<span data-i18n="viewAudit">Audit</span>
|
||||
</button>
|
||||
</div>
|
||||
<select id="kindSel" data-diff data-i18n-aria="kindAria"></select>
|
||||
<select id="statusSel" data-diff data-i18n-aria="statusAria"></select>
|
||||
<select id="runModeSel" data-runs data-i18n-aria="modeAria" hidden></select>
|
||||
<span class="spacer"></span>
|
||||
<span id="count" class="muted"></span>
|
||||
<div id="globalActs" class="global-acts" data-diff hidden>
|
||||
<button id="dryAllBtn" class="btn tool" type="button">
|
||||
<!-- Lucide "scan-search" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/></svg>
|
||||
<span data-i18n="dryAll">Dry-run global</span>
|
||||
</button>
|
||||
<button id="syncAllBtn" class="btn tool sync" type="button">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 0 1 15.7-6L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.7 6L3 16M3 21v-5h5"/></svg>
|
||||
<span data-i18n="syncAll">Tout synchroniser</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="error" class="error-banner" hidden></div>
|
||||
<div id="setup" class="setup" hidden>
|
||||
<p data-i18n="setupText">Aucun cluster de référence n'est défini.</p>
|
||||
<button id="setupBtn" class="btn primary" type="button" data-i18n="setupBtn">Ajouter les clusters</button>
|
||||
</div>
|
||||
|
||||
<!-- Differences: clusters, then the objects of the selected client -->
|
||||
<section id="diffView">
|
||||
<div id="strip" class="strip" role="tablist" data-i18n-aria="stripAria"></div>
|
||||
<div id="clientBar" class="client-bar" hidden></div>
|
||||
<div id="notes" class="notes"></div>
|
||||
<div id="objTable" class="table objects" hidden>
|
||||
<div class="list-head" role="presentation">
|
||||
<span data-i18n="colKind">Type</span>
|
||||
<span data-i18n="colObject">Objet</span>
|
||||
<span data-i18n="colStatus">Statut</span>
|
||||
<span data-i18n="colFields">Champs</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<main id="objList" class="list"></main>
|
||||
</div>
|
||||
<div id="objEmpty" class="empty" hidden>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
|
||||
<p><strong id="objEmptyTitle"></strong></p>
|
||||
<p class="muted" id="objEmptyHint"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Execution journal -->
|
||||
<section id="runsView" hidden>
|
||||
<div class="table runs">
|
||||
<div class="list-head" role="presentation">
|
||||
<span data-i18n="colDate">Date</span>
|
||||
<span data-i18n="colUser">Utilisateur</span>
|
||||
<span data-i18n="colMode">Mode</span>
|
||||
<span data-i18n="colScope">Portée</span>
|
||||
<span data-i18n="colClients">Clients</span>
|
||||
<span data-i18n="colStatus">Statut</span>
|
||||
<span data-i18n="colSummary">Résumé</span>
|
||||
</div>
|
||||
<main id="runList" class="list"></main>
|
||||
</div>
|
||||
<div class="more-row"><button id="runMore" class="btn ghost" type="button" data-i18n="more" hidden>Plus</button></div>
|
||||
</section>
|
||||
|
||||
<!-- Audit trail (administrators) -->
|
||||
<section id="auditView" hidden>
|
||||
<div class="table audit">
|
||||
<div class="list-head" role="presentation">
|
||||
<span data-i18n="colDate">Date</span>
|
||||
<span data-i18n="colUser">Utilisateur</span>
|
||||
<span data-i18n="colIP">Adresse</span>
|
||||
<span data-i18n="colAction">Action</span>
|
||||
<span data-i18n="colTarget">Cible</span>
|
||||
<span data-i18n="colResult">Résultat</span>
|
||||
<span data-i18n="colDetail">Détail</span>
|
||||
</div>
|
||||
<main id="auditList" class="list"></main>
|
||||
</div>
|
||||
<div class="more-row"><button id="auditMore" class="btn ghost" type="button" data-i18n="more" hidden>Plus</button></div>
|
||||
</section>
|
||||
|
||||
<footer class="status">
|
||||
<span id="conn" class="conn"></span>
|
||||
<span id="stats" class="muted"></span>
|
||||
<span class="sp"></span>
|
||||
<span id="ver" class="muted"></span>
|
||||
<button id="toTop" class="icon-btn to-top" type="button" data-i18n-title="toTop" data-i18n-aria="toTop" hidden>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
<!-- Dry-run, confirmation and progress of a synchronization -->
|
||||
<dialog id="planDlg" aria-labelledby="planTitle">
|
||||
<div class="dlg">
|
||||
<header>
|
||||
<h2 id="planTitle"></h2>
|
||||
<button class="icon-btn" type="button" data-close data-i18n-aria="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
||||
</header>
|
||||
<div id="planBody" class="dlg-body"></div>
|
||||
<footer>
|
||||
<span id="planNote" class="muted small"></span>
|
||||
<span class="sp"></span>
|
||||
<button id="planClose" class="btn ghost" type="button" data-close data-i18n="close">Fermer</button>
|
||||
<button id="planApply" class="btn primary" type="button" hidden>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 0 1 15.7-6L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.7 6L3 16M3 21v-5h5"/></svg>
|
||||
<span data-i18n="applyBtn">Synchroniser</span>
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<!-- Cluster editor (administrators) -->
|
||||
<dialog id="clusterDlg" aria-labelledby="clusterTitle">
|
||||
<form class="dlg" id="clusterForm" method="dialog">
|
||||
<header>
|
||||
<h2 id="clusterTitle"></h2>
|
||||
<button class="icon-btn" type="button" data-close data-i18n-aria="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
||||
</header>
|
||||
<div class="dlg-body">
|
||||
<div class="field-grid">
|
||||
<label for="cName" data-i18n="cName">Nom</label>
|
||||
<input id="cName" class="inp" required autocomplete="off" spellcheck="false">
|
||||
<span class="lbl" data-i18n="cRole">Rôle</span>
|
||||
<div id="cRole" class="seg" role="radiogroup">
|
||||
<button type="button" role="radio" data-v="client" data-i18n="roleClient">Client</button>
|
||||
<button type="button" role="radio" data-v="ref" data-i18n="roleRef">Référence</button>
|
||||
</div>
|
||||
<label for="cURL">URL</label>
|
||||
<input id="cURL" class="inp mono" required placeholder="https://pve.example.org:8006" autocomplete="off" spellcheck="false">
|
||||
<label for="cToken" data-i18n="cToken">Token</label>
|
||||
<input id="cToken" class="inp mono" required placeholder="confsync@pve!rw" autocomplete="off" spellcheck="false">
|
||||
<label for="cSecret" data-i18n="cSecret">Secret</label>
|
||||
<input id="cSecret" class="inp mono" type="password" autocomplete="new-password" spellcheck="false">
|
||||
<p class="muted small hint" id="cSecretHint"></p>
|
||||
<span class="lbl" data-i18n="cTLS">TLS</span>
|
||||
<select id="cTLS" class="field">
|
||||
<option value="fp" data-i18n="tlsFp">Empreinte SHA-256 du certificat</option>
|
||||
<option value="ca" data-i18n="tlsCa">Certificat d'autorité (PEM)</option>
|
||||
<option value="sys" data-i18n="tlsSys">Autorités du système</option>
|
||||
<option value="insecure" data-i18n="tlsInsecure">Sans vérification (labo uniquement)</option>
|
||||
</select>
|
||||
<label for="cFp" data-tls="fp" data-i18n="cFp">Empreinte</label>
|
||||
<input id="cFp" class="inp mono" data-tls="fp" placeholder="AA:BB:…" autocomplete="off" spellcheck="false">
|
||||
<label for="cCA" data-tls="ca">PEM</label>
|
||||
<textarea id="cCA" class="inp" data-tls="ca" spellcheck="false" placeholder="-----BEGIN CERTIFICATE-----"></textarea>
|
||||
<label for="cTimeout" data-i18n="cTimeout">Délai</label>
|
||||
<input id="cTimeout" class="inp mono" placeholder="30s" autocomplete="off">
|
||||
</div>
|
||||
|
||||
<div id="cClientOnly">
|
||||
<div class="sec-head mt"><h3 class="lbl" data-i18n="cMapping">Mapping (valeurs propres au client)</h3></div>
|
||||
<p class="muted small" data-i18n="cMappingHelp"></p>
|
||||
<div class="erow-head map"><span data-i18n="colKind">Type</span><span data-i18n="colObject">Objet</span><span data-i18n="colField">Champ</span><span data-i18n="colValue">Valeur</span><span></span></div>
|
||||
<div id="cMapRows" class="erows"></div>
|
||||
<div class="toolbar"><button id="cMapAdd" class="btn tool" type="button" data-i18n="addRow">+ Ajouter</button></div>
|
||||
|
||||
<div class="sec-head mt"><h3 class="lbl" data-i18n="cPolicies">Politiques propres au client</h3></div>
|
||||
<p class="muted small" data-i18n="cPoliciesHelp"></p>
|
||||
<div class="erow-head pol"><span data-i18n="colKind">Type</span><span data-i18n="colField">Champ</span><span data-i18n="colPolicy">Politique</span><span></span></div>
|
||||
<div id="cPolRows" class="erows"></div>
|
||||
<div class="toolbar"><button id="cPolAdd" class="btn tool" type="button" data-i18n="addRow">+ Ajouter</button></div>
|
||||
</div>
|
||||
<p id="cErr" class="login-err" role="alert" hidden></p>
|
||||
</div>
|
||||
<footer>
|
||||
<button id="cDelete" class="btn danger" type="button" data-i18n="delete">Supprimer</button>
|
||||
<span class="sp"></span>
|
||||
<button class="btn ghost" type="button" data-close data-i18n="cancel">Annuler</button>
|
||||
<button class="btn primary" type="submit" data-i18n="save">Enregistrer</button>
|
||||
</footer>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<dialog id="settingsDlg" class="settings" aria-labelledby="settingsTitle">
|
||||
<div class="dlg">
|
||||
<header>
|
||||
<h2 id="settingsTitle" data-i18n="settings">Paramètres</h2>
|
||||
<button class="icon-btn" type="button" data-close data-i18n-aria="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
||||
</header>
|
||||
<div class="set-body">
|
||||
<div class="set-side">
|
||||
<nav id="setNav" class="set-nav" role="tablist" aria-orientation="vertical">
|
||||
<button type="button" role="tab" data-tab="clusters">
|
||||
<!-- Lucide "server" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24"><rect width="20" height="8" x="2" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 6h.01M6 18h.01"/></svg>
|
||||
<span data-i18n="tabClusters">Clusters</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="sync">
|
||||
<svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 15.7-6L21 8M21 3v5h-5M21 12a9 9 0 0 1-15.7 6L3 16M3 21v-5h5"/></svg>
|
||||
<span data-i18n="tabSync">Synchronisation</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="users" data-admin>
|
||||
<!-- Lucide "users" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
<span data-i18n="tabUsers">Utilisateurs</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="config" data-admin>
|
||||
<!-- Lucide "file-code" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4M10 12l-2 2 2 2M14 12l2 2-2 2"/></svg>
|
||||
<span data-i18n="tabConfig">Import / export</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="account">
|
||||
<!-- Lucide "key-round" (ISC license) -->
|
||||
<svg viewBox="0 0 24 24"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg>
|
||||
<span data-i18n="tabAccount">Compte</span>
|
||||
</button>
|
||||
<button type="button" role="tab" data-tab="appearance">
|
||||
<svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>
|
||||
<span data-i18n="tabAppearance">Apparence</span>
|
||||
</button>
|
||||
</nav>
|
||||
<div id="setActions" class="set-actions" hidden>
|
||||
<button id="setSave" class="btn save" type="button" disabled>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 10 17l9-10"/></svg>
|
||||
<span data-i18n="save">Enregistrer</span>
|
||||
</button>
|
||||
<button id="setCancel" class="btn ghost" type="button" disabled data-i18n="cancel">Annuler</button>
|
||||
<p id="setState" class="set-state" role="status"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="set-panels">
|
||||
<!-- Clusters -->
|
||||
<div class="set-panel wide" role="tabpanel" data-panel="clusters">
|
||||
<p class="ro-note" data-ro data-i18n="roNote" hidden></p>
|
||||
<section class="set-section">
|
||||
<div class="sec-head">
|
||||
<h3 data-i18n="tabClusters">Clusters</h3>
|
||||
<button id="addCluster" class="btn tool primary" type="button" data-admin-only data-i18n="addCluster">+ Ajouter un cluster</button>
|
||||
</div>
|
||||
<p class="muted small" data-i18n="clustersHelp"></p>
|
||||
<div id="clusterList" class="clist"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Synchronization settings -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="sync" hidden>
|
||||
<p class="ro-note" data-ro data-i18n="roNote" hidden></p>
|
||||
<section class="set-section" data-edit>
|
||||
<h3 data-i18n="kindsTitle">Types synchronisés</h3>
|
||||
<div id="kindChips" class="chip-field"></div>
|
||||
<p class="muted small mt-s" data-i18n="kindsHelp"></p>
|
||||
</section>
|
||||
<section class="set-section danger" data-edit>
|
||||
<h3 data-i18n="pruneTitle">Suppression</h3>
|
||||
<label class="switch-row"><input id="pruneSw" type="checkbox" class="switch"><span data-i18n="pruneLabel">Supprimer chez les clients les objets absents de la référence</span></label>
|
||||
<p class="muted small mt-s" data-i18n="pruneHelp"></p>
|
||||
</section>
|
||||
<section class="set-section span" data-edit>
|
||||
<h3 data-i18n="selTitle">Sélection des objets</h3>
|
||||
<p class="muted small" data-i18n="selHelp"></p>
|
||||
<div class="erow-head sel"><span data-i18n="colKind">Type</span><span data-i18n="colInclude">Inclure</span><span data-i18n="colExclude">Exclure</span></div>
|
||||
<div id="selRows" class="erows"></div>
|
||||
</section>
|
||||
<section class="set-section span" data-edit>
|
||||
<h3 data-i18n="polTitle">Politiques par champ</h3>
|
||||
<p class="muted small" data-i18n="polHelp"></p>
|
||||
<ul id="polDefaults" class="muted small"></ul>
|
||||
<div class="erow-head pol"><span data-i18n="colKind">Type</span><span data-i18n="colField">Champ</span><span data-i18n="colPolicy">Politique</span><span></span></div>
|
||||
<div id="polRows" class="erows"></div>
|
||||
<div class="toolbar"><button id="polAdd" class="btn tool" type="button" data-i18n="addRow">+ Ajouter</button></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Users -->
|
||||
<div class="set-panel wide" role="tabpanel" data-panel="users" hidden>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="tabUsers">Utilisateurs</h3>
|
||||
<p class="muted small" data-i18n="usersHelp"></p>
|
||||
<div class="erow-head user"><span data-i18n="colUser">Utilisateur</span><span data-i18n="colRole">Rôle</span><span data-i18n="colPassword">Nouveau mot de passe</span><span data-i18n="colLastLogin">Dernière connexion</span><span></span></div>
|
||||
<div id="userRows" class="erows"></div>
|
||||
<div class="toolbar"><button id="userAdd" class="btn tool" type="button" data-i18n="addUser">+ Ajouter un utilisateur</button></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Import / export -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="config" hidden>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="exportTitle">Exporter</h3>
|
||||
<p class="muted small" data-i18n="exportHelp"></p>
|
||||
<a id="exportBtn" class="btn" href="api/config/export" download="confsync.yaml">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M4 17v3h16v-3"/></svg>
|
||||
<span data-i18n="exportBtn">Télécharger confsync.yaml</span>
|
||||
</a>
|
||||
</section>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="importTitle">Importer</h3>
|
||||
<p class="muted small" data-i18n="importHelp"></p>
|
||||
<textarea id="importText" class="inp" spellcheck="false" placeholder="reference: name: ref …"></textarea>
|
||||
<div class="toolbar">
|
||||
<input id="importFile" type="file" accept=".yaml,.yml,text/yaml" hidden>
|
||||
<button id="importPick" class="btn tool" type="button" data-i18n="importPick">Choisir un fichier…</button>
|
||||
<label class="switch-row"><input id="importReplace" type="checkbox" class="switch"><span data-i18n="importReplace">Supprimer les clusters absents du fichier</span></label>
|
||||
<span class="spacer"></span>
|
||||
<button id="importBtn" class="btn primary" type="button" data-i18n="importBtn">Importer</button>
|
||||
</div>
|
||||
<div id="importRes" class="notes import-res"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Account -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="account" hidden>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="accountTitle">Mon compte</h3>
|
||||
<dl id="accountInfo" class="field-grid small"></dl>
|
||||
</section>
|
||||
<section class="set-section" id="pwdSection">
|
||||
<h3 data-i18n="pwdTitle">Changer de mot de passe</h3>
|
||||
<form id="pwdForm" class="field-grid">
|
||||
<input type="text" autocomplete="username" hidden>
|
||||
<label for="pwdOld" data-i18n="pwdOld">Mot de passe actuel</label>
|
||||
<input id="pwdOld" class="inp" type="password" autocomplete="current-password" required>
|
||||
<label for="pwdNew" data-i18n="pwdNew">Nouveau</label>
|
||||
<input id="pwdNew" class="inp" type="password" autocomplete="new-password" minlength="8" required>
|
||||
<label for="pwdNew2" data-i18n="pwdNew2">Confirmation</label>
|
||||
<input id="pwdNew2" class="inp" type="password" autocomplete="new-password" minlength="8" required>
|
||||
<span></span>
|
||||
<div><button class="btn primary" type="submit" data-i18n="pwdBtn">Changer le mot de passe</button></div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Appearance -->
|
||||
<div class="set-panel" role="tabpanel" data-panel="appearance" hidden>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="language">Langue</h3>
|
||||
<div id="langSwitch" class="seg" role="radiogroup" data-i18n-aria="language">
|
||||
<button type="button" role="radio" data-lang="fr">Français</button>
|
||||
<button type="button" role="radio" data-lang="en">English</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="themeTitle">Thème</h3>
|
||||
<div id="themeSwitch" class="seg" role="radiogroup" data-i18n-aria="themeTitle">
|
||||
<button type="button" role="radio" data-theme-opt="system" data-i18n="themeSystem">Système</button>
|
||||
<button type="button" role="radio" data-theme-opt="light" data-i18n="themeLight">Clair</button>
|
||||
<button type="button" role="radio" data-theme-opt="dark" data-i18n="themeDark">Sombre</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="set-section">
|
||||
<h3 data-i18n="density">Densité</h3>
|
||||
<div id="densitySwitch" class="seg" role="radiogroup" data-i18n-aria="density">
|
||||
<button type="button" role="radio" data-density="normal" data-i18n="densityNormal">Normale</button>
|
||||
<button type="button" role="radio" data-density="compact" data-i18n="densityCompact">Compacte</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<div id="toast" class="toast" role="status" hidden></div>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+690
@@ -0,0 +1,690 @@
|
||||
/* pve-confsync: same look and feel as Logstream (variables, top bar, filters,
|
||||
lists with a colored edge, settings dialog with a side menu, login page). */
|
||||
|
||||
/* ---------- Theme: everything goes through these variables ---------- */
|
||||
:root {
|
||||
--bg: #f6f7f9;
|
||||
--panel: #ffffff;
|
||||
--panel-2: #f0f2f5;
|
||||
--border: #e2e5ea;
|
||||
--text: #1a1d23;
|
||||
--muted: #6b7280;
|
||||
--accent: #6366f1;
|
||||
--accent-soft: rgba(99, 102, 241, .12);
|
||||
--row-hover: #f5f6fa;
|
||||
--shadow: 0 10px 30px rgba(15, 23, 42, .12);
|
||||
|
||||
--err: #dc2626;
|
||||
--warn: #d97706;
|
||||
--ok: #0d9488;
|
||||
--info: #2563eb;
|
||||
--debug: #9ca3af;
|
||||
|
||||
/* change badges: create, update, delete, kept */
|
||||
--op-create: #16a34a;
|
||||
--op-update: #d97706;
|
||||
--op-delete: #dc2626;
|
||||
--op-extra: #64748b;
|
||||
--op-same: #94a3b8;
|
||||
|
||||
/* object kinds */
|
||||
--k-dc: #7c4dbd;
|
||||
--k-zone: #1d6fd6;
|
||||
--k-vnet: #1f9aa3;
|
||||
--k-subnet: #5f8a1f;
|
||||
|
||||
--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
|
||||
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--radius: 10px;
|
||||
--row-size: 13px;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
--bg: #0f1115;
|
||||
--panel: #161a20;
|
||||
--panel-2: #1d222a;
|
||||
--border: #2a3039;
|
||||
--text: #e6e8ec;
|
||||
--muted: #8b93a1;
|
||||
--accent: #818cf8;
|
||||
--accent-soft: rgba(129, 140, 248, .16);
|
||||
--row-hover: #1a1f26;
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, .5);
|
||||
--err: #f87171;
|
||||
--warn: #fbbf24;
|
||||
--ok: #2dd4bf;
|
||||
--info: #60a5fa;
|
||||
--debug: #6b7280;
|
||||
--op-create: #4ade80;
|
||||
--op-update: #fbbf24;
|
||||
--op-delete: #f87171;
|
||||
--op-extra: #94a3b8;
|
||||
--op-same: #64748b;
|
||||
--k-dc: #a983e6;
|
||||
--k-zone: #5aa2f5;
|
||||
--k-vnet: #3cc3cc;
|
||||
--k-subnet: #9ccc54;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) {
|
||||
--bg: #0f1115;
|
||||
--panel: #161a20;
|
||||
--panel-2: #1d222a;
|
||||
--border: #2a3039;
|
||||
--text: #e6e8ec;
|
||||
--muted: #8b93a1;
|
||||
--accent: #818cf8;
|
||||
--accent-soft: rgba(129, 140, 248, .16);
|
||||
--row-hover: #1a1f26;
|
||||
--shadow: 0 10px 30px rgba(0, 0, 0, .5);
|
||||
--err: #f87171;
|
||||
--warn: #fbbf24;
|
||||
--ok: #2dd4bf;
|
||||
--info: #60a5fa;
|
||||
--debug: #6b7280;
|
||||
--op-create: #4ade80;
|
||||
--op-update: #fbbf24;
|
||||
--op-delete: #f87171;
|
||||
--op-extra: #94a3b8;
|
||||
--op-same: #64748b;
|
||||
--k-dc: #a983e6;
|
||||
--k-zone: #5aa2f5;
|
||||
--k-vnet: #3cc3cc;
|
||||
--k-subnet: #9ccc54;
|
||||
color-scheme: dark;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Base ---------- */
|
||||
* { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 14px/1.45 var(--sans);
|
||||
padding-bottom: 44px;
|
||||
}
|
||||
button, input, select, textarea { font: inherit; color: inherit; }
|
||||
button { cursor: pointer; }
|
||||
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.muted { color: var(--muted); }
|
||||
.small { font-size: 12.5px; }
|
||||
.mono { font-family: var(--mono); }
|
||||
[hidden] { display: none !important; }
|
||||
code { font-family: var(--mono); font-size: .92em; }
|
||||
|
||||
/* ---------- Top bar ---------- */
|
||||
.topbar {
|
||||
position: sticky; top: 0; z-index: 20;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 10px 20px;
|
||||
background: color-mix(in srgb, var(--panel) 88%, transparent);
|
||||
backdrop-filter: saturate(160%) blur(10px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(10px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; }
|
||||
.brand svg { width: 26px; height: 26px; }
|
||||
.brand svg rect { fill: var(--accent); stroke: none; }
|
||||
.brand svg path { stroke: #fff; stroke-width: 2.6; }
|
||||
.demo-badge {
|
||||
padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
|
||||
color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent);
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1; max-width: 560px;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 0 6px 0 12px; height: 38px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius);
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
|
||||
.search .ico { width: 17px; height: 17px; color: var(--muted); flex: none; }
|
||||
.search input {
|
||||
flex: 1; min-width: 0; height: 100%;
|
||||
border: 0; outline: 0; background: transparent;
|
||||
font-family: var(--mono); font-size: 13px;
|
||||
}
|
||||
|
||||
.actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
|
||||
.whoami { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: 6px; font-size: 13px; color: var(--muted); }
|
||||
.whoami .who-name { font-weight: 600; color: var(--text); max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.whoami .who-badge {
|
||||
flex: none; border: 1px solid var(--border); border-radius: 6px;
|
||||
padding: 1px 6px; font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
|
||||
}
|
||||
.whoami .who-badge.admin { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
|
||||
.whoami .who-badge.operator { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, var(--border)); }
|
||||
.icon-btn {
|
||||
width: 36px; height: 36px; display: grid; place-items: center; flex: none;
|
||||
border: 1px solid transparent; background: transparent; border-radius: 9px; color: var(--muted);
|
||||
}
|
||||
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
|
||||
.icon-btn svg { width: 19px; height: 19px; }
|
||||
.icon-btn.danger:hover { color: var(--err); }
|
||||
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }
|
||||
|
||||
#themeBtn .moon { display: none; }
|
||||
:root[data-theme="dark"] #themeBtn .sun { display: none; }
|
||||
:root[data-theme="dark"] #themeBtn .moon { display: block; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme="light"]) #themeBtn .sun { display: none; }
|
||||
:root:not([data-theme="light"]) #themeBtn .moon { display: block; }
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
height: 34px; padding: 0 12px;
|
||||
border: 1px solid var(--border); border-radius: 9px;
|
||||
background: var(--panel); font-weight: 550; font-size: 13px; white-space: nowrap;
|
||||
}
|
||||
.btn:hover { background: var(--panel-2); }
|
||||
.btn svg { width: 16px; height: 16px; flex: none; }
|
||||
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.btn.primary:hover { filter: brightness(1.08); }
|
||||
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
|
||||
.btn.ghost:hover { color: var(--text); background: var(--panel-2); }
|
||||
.btn.tool { height: 32px; padding: 0 10px; }
|
||||
.btn.sync { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
|
||||
.btn.sync:hover:not(:disabled) { background: var(--accent); color: #fff; }
|
||||
.btn.danger { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, var(--border)); }
|
||||
.btn.danger:hover:not(:disabled) { background: var(--err); border-color: var(--err); color: #fff; }
|
||||
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
||||
.btn.spin svg { animation: rot 1s linear infinite; }
|
||||
@keyframes rot { to { transform: rotate(360deg); } }
|
||||
.link-btn { border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 550; color: var(--accent); white-space: nowrap; }
|
||||
.link-btn:hover { text-decoration: underline; }
|
||||
|
||||
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
|
||||
body.busy .progress::after {
|
||||
content: ""; position: absolute; inset: 0; width: 30%;
|
||||
background: var(--accent);
|
||||
animation: slide 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
|
||||
|
||||
/* ---------- Filters ---------- */
|
||||
.filters {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
|
||||
padding: 12px 20px 8px;
|
||||
}
|
||||
.filters select {
|
||||
height: 32px; padding: 0 28px 0 10px;
|
||||
border: 1px solid var(--border); border-radius: 8px;
|
||||
background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
|
||||
appearance: none; -webkit-appearance: none;
|
||||
font-size: 13px; max-width: 220px;
|
||||
}
|
||||
.filters select.set { border-color: var(--accent); background-color: var(--accent-soft); }
|
||||
.view-mode { padding: 2px; gap: 2px; border-radius: 9px; }
|
||||
.view-mode button { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; }
|
||||
.view-mode svg { width: 15px; height: 15px; }
|
||||
.spacer { flex: 1; }
|
||||
#count { font-size: 12.5px; font-variant-numeric: tabular-nums; }
|
||||
.global-acts { display: flex; gap: 6px; }
|
||||
|
||||
.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; }
|
||||
.seg button {
|
||||
border: 0; background: transparent; border-radius: 7px;
|
||||
height: 30px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--muted);
|
||||
}
|
||||
.seg button:hover { color: var(--text); }
|
||||
.seg button[aria-checked="true"] { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
|
||||
|
||||
/* ---------- Cluster strip ---------- */
|
||||
.strip {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
|
||||
margin: 6px 20px 0;
|
||||
}
|
||||
.ccard {
|
||||
position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0;
|
||||
padding: 10px 12px 10px 14px; text-align: left;
|
||||
background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
border-left: 3px solid var(--st, var(--border));
|
||||
}
|
||||
button.ccard:hover { background: var(--row-hover); }
|
||||
.ccard[aria-selected="true"] { border-color: var(--accent); border-left-color: var(--st, var(--accent)); box-shadow: 0 0 0 3px var(--accent-soft); }
|
||||
.ccard.ref { --st: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--panel)); cursor: default; }
|
||||
.ccard.st-ok { --st: var(--ok); }
|
||||
.ccard.st-diff { --st: var(--warn); }
|
||||
.ccard.st-error { --st: var(--err); }
|
||||
.ccard .c-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
||||
.ccard .c-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ccard .c-role {
|
||||
flex: none; padding: 0 5px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
|
||||
color: var(--accent); background: var(--accent-soft);
|
||||
}
|
||||
.ccard .c-ver { margin-left: auto; flex: none; font: 11.5px var(--mono); color: var(--muted); }
|
||||
.ccard .c-url { font: 11.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ccard .c-counts { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; align-items: center; }
|
||||
.ccard .c-err { font-size: 12px; color: var(--err); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
.cnt {
|
||||
display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 5px;
|
||||
font: 700 11px/1.6 var(--mono); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent);
|
||||
}
|
||||
.cnt.create { --c: var(--op-create); }
|
||||
.cnt.update { --c: var(--op-update); }
|
||||
.cnt.delete { --c: var(--op-delete); }
|
||||
.cnt.error { --c: var(--err); }
|
||||
.cnt.extra { --c: var(--op-extra); }
|
||||
.cnt.ok { --c: var(--ok); }
|
||||
|
||||
/* ---------- Selected client ---------- */
|
||||
.client-bar {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
|
||||
margin: 14px 20px 0;
|
||||
}
|
||||
.client-bar h2 { margin: 0; font-size: 16px; font-weight: 650; }
|
||||
.client-bar .meta { font-size: 12.5px; color: var(--muted); }
|
||||
.client-bar .acts { margin-left: auto; display: flex; gap: 6px; }
|
||||
.notes { margin: 8px 20px 0; display: flex; flex-direction: column; gap: 6px; }
|
||||
.note {
|
||||
display: flex; gap: 8px; align-items: baseline;
|
||||
padding: 7px 12px; border-radius: var(--radius); font-size: 12.5px;
|
||||
border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--c) 9%, transparent);
|
||||
}
|
||||
.note b { color: var(--c); font-size: 11px; letter-spacing: .03em; text-transform: uppercase; flex: none; }
|
||||
.note.err { --c: var(--err); }
|
||||
.note.warn { --c: var(--warn); }
|
||||
.note.info { --c: var(--info); }
|
||||
|
||||
/* ---------- Lists (objects, journal, audit) ---------- */
|
||||
.table {
|
||||
display: grid; column-gap: 12px;
|
||||
margin: 8px 20px 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
}
|
||||
.table.objects { grid-template-columns: 5.6rem minmax(8rem, max-content) 6.4rem minmax(0, 1fr) max-content; }
|
||||
.table.runs { grid-template-columns: max-content minmax(5rem, max-content) 5.6rem 5.2rem minmax(6rem, max-content) 6rem minmax(0, 1fr); }
|
||||
.table.audit { grid-template-columns: max-content minmax(5rem, max-content) minmax(5rem, max-content) 9rem minmax(6rem, max-content) 3.2rem minmax(0, 1fr); }
|
||||
.table > .list { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
|
||||
.list-head {
|
||||
display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
|
||||
position: sticky; top: var(--topbar-h, 0px); z-index: 5;
|
||||
padding: 0 14px 0 11px; border-left: 3px solid transparent;
|
||||
background: var(--panel-2); border-bottom: 1px solid var(--border);
|
||||
font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
|
||||
}
|
||||
.list-head > span { min-width: 0; padding: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.row {
|
||||
display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
|
||||
align-items: center;
|
||||
padding: 5px 14px 5px 11px;
|
||||
border-left: 3px solid transparent;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: var(--row-size); line-height: 1.35;
|
||||
cursor: pointer;
|
||||
}
|
||||
:root[data-density="compact"] .row { padding-top: 2px; padding-bottom: 2px; }
|
||||
.row:last-child { border-bottom: 0; }
|
||||
.row:hover { background: var(--row-hover); }
|
||||
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
.row > * { min-width: 0; }
|
||||
.row.open { background: var(--row-hover); }
|
||||
.row .id { font-family: var(--mono); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.row .sum { font-family: var(--mono); font-size: .92em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.row .sum .f-add { color: var(--op-create); }
|
||||
.row .sum .f-set { color: var(--op-update); }
|
||||
.row .sum .f-unset { color: var(--op-delete); }
|
||||
.row time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .92em; }
|
||||
.row .user { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.row .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.row .acts { display: flex; gap: 2px; justify-content: flex-end; }
|
||||
.row .acts .icon-btn { width: 28px; height: 28px; border-radius: 7px; }
|
||||
.row .acts .icon-btn svg { width: 16px; height: 16px; }
|
||||
.row .acts .icon-btn.go { color: var(--accent); }
|
||||
|
||||
.row.st-create { border-left-color: var(--op-create); }
|
||||
.row.st-update { border-left-color: var(--op-update); }
|
||||
.row.st-delete { border-left-color: var(--op-delete); background: color-mix(in srgb, var(--op-delete) 5%, transparent); }
|
||||
.row.st-error { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 6%, transparent); }
|
||||
.row.st-same .id { font-weight: 500; color: var(--muted); }
|
||||
.row.st-extra .id { font-style: italic; }
|
||||
|
||||
/* kind badge, fixed width, one color per kind */
|
||||
.kind {
|
||||
justify-self: start; box-sizing: content-box; width: 4.6rem; padding: 0 4px; border-radius: 4px; text-align: center;
|
||||
font: 700 10px/1.5 var(--mono); letter-spacing: .02em;
|
||||
color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 40%, transparent);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.kind.datacenter-options { --k: var(--k-dc); }
|
||||
.kind.sdn-zone { --k: var(--k-zone); }
|
||||
.kind.sdn-vnet { --k: var(--k-vnet); }
|
||||
.kind.sdn-subnet { --k: var(--k-subnet); }
|
||||
|
||||
/* status / mode badges */
|
||||
.badge {
|
||||
justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
|
||||
padding: 0 6px; border-radius: 5px; line-height: 1.6;
|
||||
color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 14%, transparent);
|
||||
}
|
||||
.badge.create { --c: var(--op-create); }
|
||||
.badge.update { --c: var(--op-update); }
|
||||
.badge.delete { --c: var(--op-delete); }
|
||||
.badge.extra { --c: var(--op-extra); }
|
||||
.badge.same { --c: var(--op-same); }
|
||||
.badge.error, .badge.blocked, .badge.ko { --c: var(--err); }
|
||||
.badge.ok { --c: var(--ok); }
|
||||
.badge.noop { --c: var(--op-same); }
|
||||
.badge.running, .badge.pending { --c: var(--info); }
|
||||
.badge.apply { --c: var(--accent); background: var(--accent); color: #fff; }
|
||||
.badge.dry-run { --c: var(--accent); }
|
||||
.badge.sdn { --c: var(--k-zone); margin-left: 4px; }
|
||||
.badge.running::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: blink 1s infinite; }
|
||||
@keyframes blink { 50% { opacity: .25; } }
|
||||
|
||||
/* expanded row */
|
||||
.details {
|
||||
grid-column: 1 / -1;
|
||||
margin: 8px 0 6px; padding: 10px 12px;
|
||||
background: var(--panel-2); border-radius: 8px;
|
||||
cursor: auto; font-size: 12.5px;
|
||||
}
|
||||
.details .errs { margin: 0 0 8px; color: var(--err); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; }
|
||||
.fields { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
|
||||
.fields th {
|
||||
text-align: left; font: 650 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
|
||||
padding: 2px 10px 4px 0; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.fields td { padding: 3px 10px 3px 0; vertical-align: top; word-break: break-all; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); }
|
||||
.fields tr:last-child td { border-bottom: 0; }
|
||||
.fields td.name { font-weight: 650; white-space: nowrap; word-break: normal; }
|
||||
.fields td.none { color: var(--muted); opacity: .6; }
|
||||
.fields tr.ch-add td.target, .fields tr.ch-set td.target { color: var(--op-create); font-weight: 650; }
|
||||
.fields tr.ch-set td.cur, .fields tr.ch-unset td.cur { color: var(--op-delete); text-decoration: line-through; text-decoration-thickness: 1px; }
|
||||
.fields tr.ch-unset td.target { color: var(--op-delete); }
|
||||
.fields tr.pol-ignore { opacity: .55; }
|
||||
.pol {
|
||||
display: inline-block; padding: 0 5px; border-radius: 4px; font: 600 10.5px/1.5 var(--sans);
|
||||
color: var(--muted); border: 1px solid var(--border);
|
||||
}
|
||||
.pol.sync { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
|
||||
.pol.override { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
|
||||
.details .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
|
||||
.details .acts .btn { height: 28px; font-size: 12px; }
|
||||
.steps { margin: 6px 0 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12px; }
|
||||
.steps li { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 10px; padding: 2px 0; }
|
||||
.steps li .ok { color: var(--ok); }
|
||||
.steps li .ko { color: var(--err); }
|
||||
.steps li .e { grid-column: 3; color: var(--err); white-space: pre-wrap; word-break: break-word; }
|
||||
.run-client { margin-top: 10px; }
|
||||
.run-client:first-child { margin-top: 0; }
|
||||
.run-client h4 { margin: 0 0 4px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
|
||||
|
||||
/* plan (dry-run) */
|
||||
.plan { margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 12.5px; }
|
||||
.plan > li { padding: 6px 0; border-bottom: 1px solid var(--border); }
|
||||
.plan > li:last-child { border-bottom: 0; }
|
||||
.plan .ph { display: flex; align-items: center; gap: 8px; }
|
||||
.plan .pf { margin: 3px 0 0 1.2rem; padding: 0; list-style: none; color: var(--muted); }
|
||||
.plan .pf .add { color: var(--op-create); }
|
||||
.plan .pf .set { color: var(--op-update); }
|
||||
.plan .pf .unset { color: var(--op-delete); }
|
||||
.plan .pf del { color: var(--op-delete); }
|
||||
.plan .pf ins { color: var(--op-create); text-decoration: none; font-weight: 650; }
|
||||
|
||||
/* ---------- States ---------- */
|
||||
.empty { text-align: center; padding: 50px 20px; }
|
||||
.empty svg { width: 40px; height: 40px; color: var(--muted); opacity: .6; }
|
||||
.empty p { margin: 6px 0; }
|
||||
.error-banner {
|
||||
margin: 6px 20px 0; padding: 10px 14px;
|
||||
border: 1px solid color-mix(in srgb, var(--err) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--err) 10%, transparent);
|
||||
color: var(--err); border-radius: var(--radius);
|
||||
font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap;
|
||||
}
|
||||
.setup {
|
||||
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
|
||||
margin: 10px 20px 0; padding: 14px 16px;
|
||||
border: 1px dashed color-mix(in srgb, var(--accent) 50%, var(--border)); border-radius: var(--radius);
|
||||
background: color-mix(in srgb, var(--accent) 6%, transparent);
|
||||
}
|
||||
.setup p { margin: 0; flex: 1 1 300px; }
|
||||
.ro-note {
|
||||
margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius); font-size: 12.5px;
|
||||
background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text);
|
||||
}
|
||||
.status {
|
||||
position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
|
||||
display: flex; gap: 16px; align-items: center;
|
||||
padding: 6px 20px; font-size: 12px;
|
||||
background: var(--panel); border-top: 1px solid var(--border);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.conn { white-space: nowrap; }
|
||||
.conn::before { content: "●"; margin-right: 6px; color: var(--muted); }
|
||||
.conn.ok::before { color: var(--ok); }
|
||||
.conn.ko::before { color: var(--err); }
|
||||
.status .sp { flex: 1; }
|
||||
.to-top { width: 24px; height: 24px; margin: -5px -6px -5px 0; }
|
||||
.to-top svg { width: 16px; height: 16px; }
|
||||
.toast {
|
||||
position: fixed; bottom: 48px; left: 50%; transform: translateX(-50%); z-index: 60;
|
||||
background: var(--text); color: var(--bg);
|
||||
padding: 8px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow);
|
||||
max-width: calc(100vw - 32px);
|
||||
}
|
||||
.toast.bad { background: var(--err); color: #fff; }
|
||||
.more-row { display: flex; justify-content: center; padding: 10px; }
|
||||
|
||||
/* ---------- Dialogs ---------- */
|
||||
dialog {
|
||||
width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
|
||||
padding: 0; border: 1px solid var(--border); border-radius: 14px;
|
||||
background: var(--panel); color: var(--text); box-shadow: var(--shadow);
|
||||
}
|
||||
dialog::backdrop { background: rgba(10, 12, 16, .45); backdrop-filter: blur(2px); }
|
||||
.dlg { display: flex; flex-direction: column; max-height: calc(100vh - 66px); }
|
||||
.dlg > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--border); }
|
||||
.dlg h2 { margin: 0; font-size: 17px; }
|
||||
.dlg .dlg-body { padding: 14px 20px; overflow-y: auto; min-height: 0; }
|
||||
.dlg > footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
|
||||
.dlg > footer .sp { flex: 1; }
|
||||
.confirm-box {
|
||||
display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 10px 12px; border-radius: 8px;
|
||||
border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* settings dialog (side menu, sections as cards) */
|
||||
dialog.settings { width: min(1280px, calc(100vw - 32px)); height: calc(100vh - 48px); max-height: 960px; }
|
||||
dialog.settings .dlg { height: 100%; max-height: none; }
|
||||
.set-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
|
||||
.set-side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--panel-2) 50%, transparent); }
|
||||
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; }
|
||||
.set-nav button {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
height: 38px; padding: 0 12px; border: 0; border-radius: 9px;
|
||||
background: transparent; color: var(--muted); font-weight: 560; font-size: 13.5px; text-align: left; white-space: nowrap;
|
||||
}
|
||||
.set-nav button:hover { background: var(--panel-2); color: var(--text); }
|
||||
.set-nav button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
|
||||
.set-nav svg { width: 18px; height: 18px; flex: none; }
|
||||
.set-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 10px 12px; padding-top: 12px; border-top: 1px solid var(--border); }
|
||||
.set-actions .btn { flex: 1; justify-content: center; }
|
||||
.set-actions .btn.save { color: var(--muted); }
|
||||
.set-actions.dirty .btn.save { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }
|
||||
.set-state { flex-basis: 100%; margin: 2px 2px 0; font-size: 12px; color: var(--muted); }
|
||||
.set-actions.dirty .set-state { color: var(--accent); font-weight: 550; }
|
||||
.set-panels { overflow-y: auto; padding: 16px 20px 20px; }
|
||||
.set-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; align-items: start; }
|
||||
.set-panel[hidden] { display: none; }
|
||||
.set-panel.wide { grid-template-columns: minmax(0, 1fr); }
|
||||
.set-section {
|
||||
margin: 0; padding: 14px 16px; min-width: 0;
|
||||
border: 1px solid var(--border); border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--panel-2) 35%, var(--panel));
|
||||
}
|
||||
.set-section.span { grid-column: 1 / -1; }
|
||||
.set-panel > .ro-note { grid-column: 1 / -1; margin: 0; }
|
||||
.set-section h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
|
||||
.set-section.danger h3 { color: var(--err); }
|
||||
.set-section p { margin: 0 0 8px; }
|
||||
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
|
||||
.read-only .set-section[inert] { opacity: .6; }
|
||||
|
||||
.field-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: center; }
|
||||
.field-grid label, .lbl { font-size: 13px; font-weight: 550; }
|
||||
.field-grid .hint { grid-column: 2; margin: -4px 0 2px; }
|
||||
.inp, select.field, textarea.inp {
|
||||
height: 32px; padding: 0 9px; min-width: 0; width: 100%;
|
||||
border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 13px; outline: 0;
|
||||
}
|
||||
.inp.mono, textarea.inp { font-family: var(--mono); font-size: 12.5px; }
|
||||
textarea.inp { height: auto; min-height: 140px; padding: 8px 9px; resize: vertical; line-height: 1.4; }
|
||||
select.field {
|
||||
padding-right: 30px; appearance: none; -webkit-appearance: none;
|
||||
background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b93a1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
|
||||
}
|
||||
.inp:focus, select.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
|
||||
.inp.bad { border-color: var(--err); }
|
||||
|
||||
/* editable rows (mappings, policies, users, clusters) */
|
||||
.erows { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
|
||||
.erow {
|
||||
display: grid; align-items: center; gap: 6px;
|
||||
padding: 4px 4px 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
|
||||
}
|
||||
.erow.map { grid-template-columns: 10rem minmax(6rem, 1fr) minmax(6rem, 1fr) minmax(8rem, 2fr) 28px; }
|
||||
.erow.pol { grid-template-columns: 10rem minmax(6rem, 1fr) 8rem 28px; }
|
||||
.erow.sel { grid-template-columns: 10rem minmax(6rem, 1fr) minmax(6rem, 1fr); }
|
||||
.erow.user { grid-template-columns: minmax(6rem, 1fr) 9rem minmax(8rem, 1fr) 9rem 60px; }
|
||||
.erow .inp, .erow select.field { height: 28px; }
|
||||
.erow .icon-btn { width: 28px; height: 28px; border-radius: 7px; }
|
||||
.erow .icon-btn svg { width: 15px; height: 15px; }
|
||||
.erow-head { display: grid; gap: 6px; padding: 0 4px 0 9px; font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
|
||||
.erow-head.map { grid-template-columns: 10rem minmax(6rem, 1fr) minmax(6rem, 1fr) minmax(8rem, 2fr) 28px; }
|
||||
.erow-head.pol { grid-template-columns: 10rem minmax(6rem, 1fr) 8rem 28px; }
|
||||
.erow-head.sel { grid-template-columns: 10rem minmax(6rem, 1fr) minmax(6rem, 1fr); }
|
||||
.erow-head.user { grid-template-columns: minmax(6rem, 1fr) 9rem minmax(8rem, 1fr) 9rem 60px; }
|
||||
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
|
||||
|
||||
/* cluster list in the settings */
|
||||
.clist { display: flex; flex-direction: column; gap: 6px; }
|
||||
.citem {
|
||||
display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr) max-content; align-items: center; gap: 4px 12px;
|
||||
padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel);
|
||||
border-left: 3px solid var(--border);
|
||||
}
|
||||
.citem.ref { border-left-color: var(--accent); }
|
||||
.citem .n { font-weight: 650; display: flex; gap: 8px; align-items: center; }
|
||||
.citem .u { font: 12px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.citem .acts { display: flex; gap: 4px; }
|
||||
.citem .chk { grid-column: 1 / -1; font-size: 12px; }
|
||||
.citem .chk.ok { color: var(--ok); }
|
||||
.citem .chk.ko { color: var(--err); }
|
||||
.citem .chk.warn { color: var(--warn); }
|
||||
|
||||
.chip-field { display: flex; flex-wrap: wrap; gap: 5px; }
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
height: 26px; padding: 0 9px;
|
||||
border: 1px solid var(--border); border-radius: 6px; background: transparent;
|
||||
color: var(--muted); font: 600 12px/1 var(--mono); white-space: nowrap; cursor: pointer;
|
||||
}
|
||||
.chip:hover { color: var(--text); border-color: var(--muted); }
|
||||
.chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
|
||||
|
||||
.switch-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 550; cursor: pointer; }
|
||||
input.switch {
|
||||
appearance: none; -webkit-appearance: none; flex: none;
|
||||
width: 34px; height: 20px; margin: 0; border-radius: 999px;
|
||||
background: var(--border); position: relative; cursor: pointer; transition: background .15s;
|
||||
}
|
||||
input.switch::after {
|
||||
content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
|
||||
background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s;
|
||||
}
|
||||
input.switch:checked { background: var(--accent); }
|
||||
input.switch:checked::after { transform: translateX(14px); }
|
||||
input.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
|
||||
/* ---------- Mobile ---------- */
|
||||
@media (max-width: 760px) {
|
||||
body { font-size: 13.5px; }
|
||||
.topbar { flex-wrap: wrap; padding: 8px 16px; gap: 8px 10px; }
|
||||
.search { order: 3; flex-basis: 100%; max-width: none; }
|
||||
#refreshBtn .lbl { display: none; }
|
||||
.whoami .who-name { max-width: 12ch; }
|
||||
.filters { padding: 10px 16px 6px; }
|
||||
.filters select { flex: 1 1 calc(50% - 8px); max-width: none; min-width: 0; }
|
||||
.view-mode { flex: 1 1 100%; }
|
||||
.view-mode button { flex: 1; justify-content: center; }
|
||||
.spacer { display: none; }
|
||||
.global-acts { flex: 1 1 100%; }
|
||||
.global-acts .btn { flex: 1; justify-content: center; }
|
||||
.strip, .client-bar, .notes, .table, .error-banner, .setup { margin-left: 16px; margin-right: 16px; }
|
||||
.strip { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
|
||||
.client-bar .acts { margin-left: 0; flex: 1 1 100%; }
|
||||
.client-bar .acts .btn { flex: 1; justify-content: center; }
|
||||
.table { display: block; }
|
||||
.table > .list { display: block; }
|
||||
.list-head { display: none; }
|
||||
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; padding: 8px 12px 8px 10px; }
|
||||
.table.objects .row .sum { grid-column: 1 / -1; }
|
||||
.table.runs .row, .table.audit .row { grid-template-columns: auto auto 1fr; }
|
||||
.table.runs .row .txt, .table.audit .row .txt { grid-column: 1 / -1; white-space: normal; }
|
||||
.details { grid-column: 1 / -1; overflow-x: auto; }
|
||||
#stats, #ver { display: none; }
|
||||
.field-grid { grid-template-columns: 1fr; gap: 4px; }
|
||||
.field-grid .hint { grid-column: 1; }
|
||||
dialog.settings { height: calc(100vh - 24px); width: calc(100vw - 16px); }
|
||||
.set-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
|
||||
.set-side { border-right: 0; border-bottom: 1px solid var(--border); overflow: visible; }
|
||||
.set-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; }
|
||||
.set-nav button { flex-direction: column; justify-content: center; height: auto; padding: 6px 2px; gap: 3px; font-size: 11.5px; }
|
||||
.set-actions { margin: 0 6px 6px; padding-top: 6px; }
|
||||
.set-panels { padding: 12px 12px 18px; }
|
||||
.set-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
|
||||
.erow.map, .erow-head.map { grid-template-columns: 1fr 1fr 28px; }
|
||||
.erow.map > :nth-child(4) { grid-column: 1 / 3; }
|
||||
.erow.pol, .erow-head.pol { grid-template-columns: 1fr 1fr 28px; }
|
||||
.erow.user, .erow-head.user { grid-template-columns: 1fr 1fr 28px; }
|
||||
.erow-head { display: none; }
|
||||
.citem { grid-template-columns: 1fr max-content; }
|
||||
.citem .u { grid-column: 1 / -1; grid-row: 2; }
|
||||
.status { padding: 6px 16px; }
|
||||
}
|
||||
|
||||
/* ---------- Login page ---------- */
|
||||
body.login-page { min-height: 100vh; padding: 16px; display: grid; place-items: center; }
|
||||
.login-tools { position: fixed; top: 12px; right: 16px; display: flex; align-items: center; gap: 8px; }
|
||||
.login-card {
|
||||
width: 100%; max-width: 360px;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 10px;
|
||||
padding: 32px 28px 28px;
|
||||
background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
|
||||
}
|
||||
.login-card .brand { font-size: 20px; }
|
||||
.login-card .brand svg { width: 32px; height: 32px; }
|
||||
.login-card > p { margin: 0 0 8px; text-align: center; }
|
||||
.login-card form { width: 100%; display: flex; flex-direction: column; gap: 6px; }
|
||||
.login-card label { font-size: 13px; font-weight: 550; }
|
||||
.login-card input {
|
||||
height: 38px; padding: 0 11px; margin-bottom: 6px;
|
||||
border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
|
||||
}
|
||||
.login-card input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
|
||||
.login-card .btn { height: 38px; justify-content: center; margin-top: 6px; font-size: 14px; width: 100%; }
|
||||
.login-err { margin: 0; color: var(--err); font-size: 13px; }
|
||||
.login-sep { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--muted); font-size: 12px; }
|
||||
.login-sep::before, .login-sep::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
|
||||
.demo-hint { width: 100%; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: color-mix(in srgb, var(--warn) 12%, transparent); }
|
||||
.demo-hint code { font-weight: 650; }
|
||||
.mt { margin-top: 18px; }
|
||||
.mt-s { margin-top: 8px !important; }
|
||||
.erow .acts { display: flex; gap: 2px; }
|
||||
.import-res { margin: 10px 0 0; }
|
||||
Reference in new issue
Block a user