From a917bac386dd893750e345d27bc5ca6943ee9525 Mon Sep 17 00:00:00 2001 From: Daniel Allaire Date: Sat, 4 Jul 2026 01:30:17 -0400 Subject: [PATCH] =?UTF-8?q?Th=C3=A8me=20account=20Keycloak=20:=20couvrir?= =?UTF-8?q?=20PF4+PF5=20+=20fond=20aurore=20+=20constellation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le SPA account peut être en PatternFly 4 (.pf-c-*) ou 5 (.pf-v5-*) selon la version ; on cible les deux. Même correctif que le login : fond par défaut effacé (transparent), ciel aurore + constellation remontés (z-index), cartes en verre, champs et bouton en !important. Co-Authored-By: Claude Opus 4.8 --- .../account/resources/css/account.css | 93 ++++++++++++------- 1 file changed, 59 insertions(+), 34 deletions(-) diff --git a/roles/serveur_keycloak/files/themes/alliance-boreale/account/resources/css/account.css b/roles/serveur_keycloak/files/themes/alliance-boreale/account/resources/css/account.css index 4d609b0..4ee37ca 100644 --- a/roles/serveur_keycloak/files/themes/alliance-boreale/account/resources/css/account.css +++ b/roles/serveur_keycloak/files/themes/alliance-boreale/account/resources/css/account.css @@ -1,62 +1,87 @@ /* ========================================================================= - Alliance Boréale — console de compte Keycloak (SPA PatternFly 5) - Overlay : ciel nocturne aurore, cartes en verre, accent aurore. + Alliance Boréale — console de compte Keycloak (SPA PatternFly, KC 26) + Overlay : ciel nocturne aurore + constellation, cartes en verre, accent aurore. + Cible PF4 (.pf-c-*) ET PF5 (.pf-v5-*) — la version rendue par le SPA varie. ========================================================================= */ -:root, -.pf-v5-theme-dark, -html { +:root, html { + --ab-ink: #e9ecff; + --ab-cyan: #56c2ff; --pf-v5-global--Color--100: #e9ecff; - --pf-v5-global--Color--200: #99a1c9; --pf-v5-global--link--Color: #56c2ff; - --pf-v5-global--link--Color--hover: #a98bff; --pf-v5-global--primary-color--100: #56c2ff; - --pf-v5-global--primary-color--200: #4fe3c1; - --pf-v5-global--BorderColor--100: rgba(255, 255, 255, 0.12); - --pf-v5-global--BackgroundColor--100: rgba(255, 255, 255, 0.05); - --pf-v5-global--BackgroundColor--200: #0a0d24; + --pf-global--Color--100: #e9ecff; + --pf-global--link--Color: #56c2ff; + --pf-global--primary-color--100: #56c2ff; --pf-v5-global--FontFamily--text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif; } -html, body, #app, .pf-v5-c-page, .pf-v5-c-page__main { +/* ---------- Fond aurore : on efface le fond par défaut du SPA ---------- */ +html, body { height: 100%; color: var(--ab-ink); background: #05060f !important; } +#app, main, +.pf-c-page, .pf-v5-c-page, +.pf-c-page__main, .pf-v5-c-page__main, +.pf-c-page__main-section, .pf-v5-c-page__main-section { background: transparent !important; - color: #e9ecff; + position: relative; + z-index: 1; } -body { + +/* ---------- Ciel animé (injecté par constellation.js) ---------- */ +.ab-sky { + position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(1200px 700px at 80% -10%, #131a44 0%, transparent 60%), radial-gradient(900px 600px at 10% 0%, #0e1640 0%, transparent 55%), - linear-gradient(180deg, #0a0d24 0%, #05060f 70%) fixed !important; + linear-gradient(180deg, #0a0d24 0%, #05060f 70%); } +.ab-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } +.ab-aurora { + position: absolute; inset: -20% -10% auto -10%; height: 70vh; + filter: blur(60px) saturate(140%); opacity: 0.5; + background: + radial-gradient(40% 60% at 20% 30%, #4fe3c1 0%, transparent 70%), + radial-gradient(45% 70% at 55% 20%, #56c2ff 0%, transparent 70%), + radial-gradient(40% 65% at 80% 35%, #a98bff 0%, transparent 70%); + animation: aurora-drift 22s ease-in-out infinite alternate; +} +@keyframes aurora-drift { + from { transform: translateX(-3%) translateY(0) scale(1); } + to { transform: translateX(3%) translateY(2%) scale(1.08); } +} +@media (prefers-reduced-motion: reduce) { .ab-aurora { animation: none; } } -/* En-tête / masthead + cartes : verre */ -.pf-v5-c-masthead, -.pf-v5-c-card, -.pf-v5-c-page__sidebar, -.pf-v5-c-nav { +/* ---------- En-tête + cartes + nav : verre ---------- */ +.pf-c-masthead, .pf-v5-c-masthead, +.pf-c-card, .pf-v5-c-card, +.pf-c-page__sidebar, .pf-v5-c-page__sidebar, +.pf-c-nav, .pf-v5-c-nav { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.10) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } -.pf-v5-c-card { border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); } +.pf-c-card, .pf-v5-c-card { + border-radius: 16px !important; + box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4); +} -/* Textes, titres */ -.pf-v5-c-title, .pf-v5-c-content, h1, h2, h3, label { color: #e9ecff !important; } -a, .pf-v5-c-button.pf-m-link { color: #56c2ff; } +/* ---------- Textes, titres, liens ---------- */ +.pf-c-title, .pf-v5-c-title, .pf-c-content, .pf-v5-c-content, +h1, h2, h3, label { color: var(--ab-ink) !important; } +a, .pf-c-button.pf-m-link, .pf-v5-c-button.pf-m-link { color: var(--ab-cyan) !important; } -/* Champs */ -.pf-v5-c-form-control, input, select, textarea { +/* ---------- Champs ---------- */ +.pf-c-form-control, .pf-v5-c-form-control, +input, select, textarea { background: rgba(255, 255, 255, 0.06) !important; - color: #e9ecff !important; - border: 1px solid rgba(255, 255, 255, 0.14) !important; + color: var(--ab-ink) !important; + border: 1px solid rgba(255, 255, 255, 0.16) !important; } -/* Bouton primaire : ruban d'aurore */ -.pf-v5-c-button.pf-m-primary { +/* ---------- Bouton primaire : ruban d'aurore ---------- */ +.pf-c-button.pf-m-primary, .pf-v5-c-button.pf-m-primary { background: linear-gradient(100deg, #4fe3c1, #56c2ff) !important; - color: #04121a !important; - border: none !important; - border-radius: 999px !important; - font-weight: 600 !important; + color: #04121a !important; border: none !important; + border-radius: 999px !important; font-weight: 600 !important; }