From c5434bb33c905cfeb013d7e548261fd1ff985f23 Mon Sep 17 00:00:00 2001 From: Daniel Allaire Date: Sat, 4 Jul 2026 00:07:49 -0400 Subject: [PATCH] =?UTF-8?q?Th=C3=A8me=20login=20Keycloak=20:=20corriger=20?= =?UTF-8?q?fond,=20constellation=20et=20champs=20(vrais=20s=C3=A9lecteurs?= =?UTF-8?q?=20KC=2026)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Le thème "keycloak" de KC 26 est PatternFly (body sans classe, .pf-c-*). Corrections : fond gris par défaut sur .login-pf-page effacé (transparent), ciel aurore remonté (z-index 0, sous le contenu z-index 1) → la constellation s'affiche ; champs ciblés en .pf-c-form-control !important (le mot de passe n'était plus blanc) ; carte/bouton/liens en !important. Co-Authored-By: Claude Opus 4.8 --- .../login/resources/css/alliance.css | 101 ++++++++---------- 1 file changed, 43 insertions(+), 58 deletions(-) diff --git a/roles/serveur_keycloak/files/themes/alliance-boreale/login/resources/css/alliance.css b/roles/serveur_keycloak/files/themes/alliance-boreale/login/resources/css/alliance.css index 7e92b53..daffa48 100644 --- a/roles/serveur_keycloak/files/themes/alliance-boreale/login/resources/css/alliance.css +++ b/roles/serveur_keycloak/files/themes/alliance-boreale/login/resources/css/alliance.css @@ -1,7 +1,7 @@ /* ========================================================================= Alliance Boréale — thème de connexion Keycloak Identité : aurore boréale · étoiles · constellation · ciel nocturne souverain. - Police système (souveraineté, aucune dépendance externe). + Cible le thème "keycloak" de KC 26 (PatternFly : .pf-c-*, .login-pf-page, .card-pf). ========================================================================= */ :root { --bg: #05060f; @@ -17,28 +17,32 @@ Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif; } -/* ---------- Ciel nocturne : aurore en fond ---------- */ -html { height: 100%; } -body.login-pf, -body { +/* ---------- Ciel nocturne aurore : on efface le fond gris par défaut ---------- */ +html, body { height: 100%; font-family: var(--font); color: var(--ink); - 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, var(--bg-2) 0%, var(--bg) 70%) fixed; + background: #05060f !important; +} +.login-pf-page, +body .login-pf-page { + background: transparent !important; + position: relative; + z-index: 1; + padding-top: 40px; } -.login-pf-page { padding-top: 40px; background: transparent; } -#kc-container, #kc-container-wrapper, .login-pf-page .card-pf { position: relative; } /* ---------- Ciel animé : constellation + aurore (injecté par constellation.js) ---------- */ .ab-sky { position: fixed; inset: 0; - z-index: -1; + z-index: 0; /* au-dessus du fond, sous le contenu (z-index:1) */ 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, var(--bg-2) 0%, var(--bg) 70%); } .ab-sky canvas { position: absolute; @@ -63,12 +67,9 @@ body { 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; } -} +@media (prefers-reduced-motion: reduce) { .ab-aurora { animation: none; } } /* ---------- En-tête + logo étoile aurore ---------- */ -#kc-header, #kc-header-wrapper { color: var(--ink); font-size: 1.6rem; @@ -76,9 +77,7 @@ body { letter-spacing: 0.5px; text-transform: none; } -.login-pf-page .login-pf-header { - text-align: center; -} +.login-pf-page .login-pf-header { text-align: center; } .login-pf-page .login-pf-header::before { content: ""; display: block; @@ -91,67 +90,53 @@ body { /* ---------- Carte de connexion (glassmorphism) ---------- */ .card-pf { - background: var(--panel); - border: 1px solid var(--border); - border-radius: 16px; + background: var(--panel) !important; + border: 1px solid var(--border) !important; + border-radius: 16px !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); - padding: 2rem 2.2rem 2.4rem; } /* ---------- Titres, libellés, texte ---------- */ #kc-page-title, -.login-pf-page .login-pf-signup a, -label, -.control-label, -#kc-form-options, -.login-pf-page label { color: var(--ink); } -.login-pf-page .login-pf-header h1 { color: var(--ink); } -p, .instruction, #kc-info-message { color: var(--ink-dim); } +label, .control-label, .pf-c-form__label, .pf-c-form__label-text, +.login-pf-page .login-pf-header h1 { color: var(--ink) !important; } +p, .instruction, #kc-info-message, #kc-info, #kc-info-wrapper { color: var(--ink-dim) !important; } -/* ---------- Champs ---------- */ -input.form-control, +/* ---------- Champs (PatternFly : .pf-c-form-control) ---------- */ .pf-c-form-control, -.form-control { - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.14); - color: var(--ink); - border-radius: 10px; +input.pf-c-form-control, +.pf-c-input-group, +input[type="text"], input[type="password"], input[type="email"] { + background: rgba(255, 255, 255, 0.06) !important; + border: 1px solid rgba(255, 255, 255, 0.16) !important; + color: var(--ink) !important; + border-radius: 10px !important; } -input.form-control:focus, -.form-control:focus { - border-color: var(--aurora-cyan); - box-shadow: 0 0 0 3px rgba(86, 194, 255, 0.25); - background: rgba(255, 255, 255, 0.09); +.pf-c-form-control:focus, +input:focus { + border-color: var(--aurora-cyan) !important; + box-shadow: 0 0 0 3px rgba(86, 194, 255, 0.25) !important; } -input.form-control::placeholder { color: var(--ink-dim); } +.pf-c-form-control::placeholder { color: var(--ink-dim) !important; } +/* le bouton "afficher le mot de passe" dans l'input-group */ +.pf-c-input-group .pf-c-button { background: transparent !important; color: var(--ink-dim) !important; } /* ---------- Bouton primaire : ruban d'aurore ---------- */ -.btn-primary, -input.btn-primary, .pf-c-button.pf-m-primary, -#kc-login { +input.btn-primary, .btn-primary, #kc-login { background: linear-gradient(100deg, var(--aurora-teal), var(--aurora-cyan)) !important; color: #04121a !important; border: none !important; border-radius: 999px !important; font-weight: 600 !important; box-shadow: 0 10px 30px rgba(79, 227, 193, 0.28); - transition: transform 0.15s ease, box-shadow 0.2s ease; } -.btn-primary:hover, -#kc-login:hover { - transform: translateY(-2px); +.pf-c-button.pf-m-primary:hover, #kc-login:hover { box-shadow: 0 14px 38px rgba(86, 194, 255, 0.4); } /* ---------- Liens ---------- */ -a, a:visited { color: var(--aurora-cyan); } -a:hover { color: var(--aurora-violet); } - -/* ---------- Alertes ---------- */ -.alert { border-radius: 12px; border: 1px solid var(--border); } - -/* ---------- Bas de page ---------- */ -#kc-info, #kc-info-wrapper { color: var(--ink-dim); } +a, a:visited { color: var(--aurora-cyan) !important; } +a:hover { color: var(--aurora-violet) !important; }