Alliance-Boreale/Set-OPS-Public
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Thème account Keycloak : couvrir PF4+PF5 + fond aurore + constellation

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
Daniel Allaire 2026-07-04 01:30:17 -04:00
parent c5434bb33c
commit a917bac386
1 changed files with 59 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

93
roles/serveur_keycloak/files/themes/alliance-boreale/account/resources/css/account.css
View file

@ -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;
}