fix: CSS variables neu-*, WebSocket token, thème initial

- CSS: remplace var(--bg-*)/var(--text-*)/var(--accent-*)/var(--color-*)
  par les vraies variables --neu-* (neu-bg, neu-surface, neu-text, neu-primary…)
- CSS: supprime body{overflow:hidden} qui bloquait le scroll
- CSS: .auth-layout déplacé dans neu.css pour login/install
- WS: ajoute ?token= aux connexions /ws/proxmox (dashboardPage + proxmoxPage)
- HTML: script inline pour appliquer data-theme avant Alpine (évite FOUC)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
enzo 2026-03-21 16:39:23 +01:00
parent 2098c80ec1
commit 562eff8863
10 changed files with 142 additions and 133 deletions

View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<script>(function(){document.documentElement.setAttribute("data-theme",localStorage.getItem("pxp_theme")||"dark")})()</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ProxmoxPanel — Modules</title>
@ -92,17 +93,17 @@
.module-icon{font-size:1.75rem;flex-shrink:0}
.module-info{flex:1}
.module-name{font-weight:700;display:block;margin-bottom:.2rem}
.module-desc{font-size:.8rem;color:var(--text-secondary);display:block}
.core-badge{font-size:.65rem;padding:.15rem .4rem;border-radius:.2rem;background:rgba(99,102,241,.15);color:var(--accent-primary);font-weight:700;text-transform:uppercase}
.toggle-btn{display:flex;align-items:center;gap:.4rem;background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:.8rem}
.module-desc{font-size:.8rem;color:var(--neu-text-muted);display:block}
.core-badge{font-size:.65rem;padding:.15rem .4rem;border-radius:.2rem;background:rgba(99,102,241,.15);color:var(--neu-primary);font-weight:700;text-transform:uppercase}
.toggle-btn{display:flex;align-items:center;gap:.4rem;background:none;border:none;cursor:pointer;color:var(--neu-text-muted);font-size:.8rem}
.toggle-btn:disabled{cursor:not-allowed;opacity:.5}
.toggle-track{width:2.5rem;height:1.25rem;background:var(--bg-secondary);border-radius:.625rem;position:relative;transition:background .2s;border:1px solid var(--border-color)}
.toggle-thumb{position:absolute;top:.125rem;left:.125rem;width:.875rem;height:.875rem;background:var(--text-muted);border-radius:50%;transition:transform .2s,background .2s}
.toggle-btn.on .toggle-track{background:var(--accent-primary);border-color:var(--accent-primary)}
.toggle-track{width:2.5rem;height:1.25rem;background:var(--neu-surface);border-radius:.625rem;position:relative;transition:background .2s;border:1px solid var(--neu-border)}
.toggle-thumb{position:absolute;top:.125rem;left:.125rem;width:.875rem;height:.875rem;background:var(--neu-text-muted);border-radius:50%;transition:transform .2s,background .2s}
.toggle-btn.on .toggle-track{background:var(--neu-primary);border-color:var(--neu-primary)}
.toggle-btn.on .toggle-thumb{transform:translateX(1.25rem);background:#fff}
.loading-state{display:flex;align-items:center;gap:.75rem;padding:2rem;color:var(--text-muted)}
.spinner-lg{width:2rem;height:2rem;border:3px solid transparent;border-top-color:var(--accent-primary);border-radius:50%;animation:spin .6s linear infinite}
.empty-state{color:var(--text-muted);font-size:.875rem}
.loading-state{display:flex;align-items:center;gap:.75rem;padding:2rem;color:var(--neu-text-muted)}
.spinner-lg{width:2rem;height:2rem;border:3px solid transparent;border-top-color:var(--neu-primary);border-radius:50%;animation:spin .6s linear infinite}
.empty-state{color:var(--neu-text-muted);font-size:.875rem}
@keyframes spin{to{transform:rotate(360deg)}}
</style>
</body>