525edb188a
- Added a new blueprint for OIDC logout that invalidates the Authentik session and redirects to a specified landing page. - Introduced custom CSS and JS files for branding, improving the visual integration of Authentik flows. - Updated Nginx configuration to serve the new branding assets and handle specific routes for signup and password recovery. - Enhanced the flow completion logic to support OIDC bridge functionality, including session management and redirect handling. - Implemented unit tests for the new OIDC bridge and flow context functionalities to ensure reliability.
1141 lines
36 KiB
CSS
1141 lines
36 KiB
CSS
/* =============================================================================
|
|
* UltiSuite — habillage des flows Authentik (login / signup / recovery / MFA)
|
|
* -----------------------------------------------------------------------------
|
|
* Injection : ce fichier est monté sur /web/dist/custom.css dans le conteneur
|
|
* authentik-server (cf. deploy/docker-compose.yml). Authentik le sert avec
|
|
* l'attribut `data-inject` :
|
|
* <link rel="stylesheet" href="/auth/static/dist/custom.css" data-inject>
|
|
* Le bundle flow récupère le texte de chaque `link[data-inject]` et l'adopte
|
|
* (adoptedStyleSheets) dans le shadow root de CHAQUE composant Lit/PatternFly.
|
|
* => nos sélecteurs `.pf-c-*` atteignent l'intérieur des web components.
|
|
*
|
|
* Conséquences (shadow DOM) :
|
|
* - Les variables custom (`:root`) cascadent via héritage dans tous les roots.
|
|
* - Les sélecteurs descendants NE TRAVERSENT PAS les frontières de shadow root.
|
|
* Pour cibler le chrome porté par l'executor on utilise `:host([flowslug=…])`
|
|
* (l'hôte du shadow root de l'executor est `<ak-flow-executor flowslug=…>`).
|
|
* - Les éléments internes d'une étape (formulaire, champs, bouton) vivent dans
|
|
* le shadow root `<ak-stage-*>` : on les style globalement (look partagé).
|
|
*
|
|
* Carte de la structure (flow login `default-authentication-flow`) :
|
|
* ak-flow-executor[flowslug] (shadow #1)
|
|
* .pf-c-background-image ← fond plein écran
|
|
* .pf-c-login.stacked > .ak-login-container
|
|
* .pf-c-login__main ← LA CARTE
|
|
* .pf-c-login__main-header.pf-c-brand.ak-brand > img ← logo
|
|
* ak-stage-identification (shadow #2)
|
|
* header.pf-c-login__main-header > h1.pf-c-title ← titre
|
|
* .pf-c-login__main-body > form.pf-c-form
|
|
* ak-form-element.pf-c-form__group (shadow #3 : label) + input.pf-c-form-control
|
|
* .pf-c-form__group.pf-m-action > button.pf-c-button.pf-m-primary
|
|
* footer.pf-c-login__main-footer
|
|
* .pf-c-login__main-footer-band > p > a#enroll ← "Créer un compte"
|
|
* .pf-c-login__footer ← "Powered by authentik" (masqué)
|
|
* ========================================================================== */
|
|
|
|
/* ---- Angle animé pour les anneaux arc-en-ciel (carte + bouton) ---------- */
|
|
@property --ulti-ring-angle {
|
|
syntax: "<angle>";
|
|
inherits: true;
|
|
initial-value: 145deg;
|
|
}
|
|
|
|
/* ---- Jetons de design (repris de .ultimail-login du frontend) ----------- */
|
|
:root {
|
|
--ulti-bg: #f7f8fc;
|
|
--ulti-line: rgba(21, 24, 30, 0.07);
|
|
--ulti-glow-a: #4f6df5;
|
|
--ulti-glow-b: #9a5cf0;
|
|
--ulti-glow-c: #1fb6c9;
|
|
--ulti-card-glass: rgba(255, 255, 255, 0.62);
|
|
--ulti-card-border: rgba(21, 24, 30, 0.1);
|
|
--ulti-card-highlight: rgba(255, 255, 255, 0.72);
|
|
--ulti-text: #3c4043;
|
|
--ulti-text-strong: #202124;
|
|
--ulti-text-muted: #5f6368;
|
|
--ulti-link: #1a73e8;
|
|
--ulti-input-bg: #ffffff;
|
|
--ulti-input-border: rgba(21, 24, 30, 0.16);
|
|
--ulti-rainbow: conic-gradient(
|
|
from var(--ulti-ring-angle),
|
|
#1a73e8,
|
|
#34a853,
|
|
#fbbc04,
|
|
#ea4335,
|
|
#1a73e8
|
|
);
|
|
/* Remplace l'accent corail Authentik (#fd4b2d) — utilisé pour les scrollbars. */
|
|
--ulti-scrollbar-thumb: color-mix(in srgb, var(--ulti-text-muted) 55%, transparent);
|
|
--ulti-scrollbar-thumb-hover: color-mix(in srgb, var(--ulti-text-muted) 75%, transparent);
|
|
--ak-accent: var(--ulti-scrollbar-thumb);
|
|
/* Boutons primaires — gris neutre */
|
|
--ulti-btn-primary-bg: #f4f4f5;
|
|
--ulti-btn-primary-fg: #18181b;
|
|
--ulti-btn-primary-bg-hover: #e4e4e7;
|
|
--ulti-btn-primary-border: color-mix(in srgb, var(--ulti-text-strong) 14%, transparent);
|
|
--ulti-btn-primary-border-width: 2px;
|
|
--ulti-btn-primary-border-hover: color-mix(in srgb, var(--ulti-text-muted) 42%, transparent);
|
|
--ulti-btn-primary-shadow: none;
|
|
--ulti-btn-primary-shadow-hover: none;
|
|
--ulti-btn-primary-ring: color-mix(in srgb, var(--ulti-text-muted) 35%, transparent);
|
|
--ulti-link-ui: var(--ulti-text-muted);
|
|
--ulti-link-ui-hover: var(--ulti-text);
|
|
--pf-global--link--Color: var(--ulti-link-ui);
|
|
--pf-global--link--Color--hover: var(--ulti-link-ui-hover);
|
|
--pf-global--link--Color--light: var(--ulti-link-ui);
|
|
--pf-global--link--Color--dark: var(--ulti-link-ui-hover);
|
|
--ulti-card-backdrop: blur(16px) saturate(1.2);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--ulti-bg: #0b0d12;
|
|
--ulti-line: rgba(238, 240, 246, 0.08);
|
|
--ulti-glow-a: #5d7bff;
|
|
--ulti-glow-b: #a86bff;
|
|
--ulti-glow-c: #2cc8dc;
|
|
--ulti-card-glass: rgba(30, 30, 33, 0.96);
|
|
--ulti-card-border: rgba(255, 255, 255, 0.1);
|
|
--ulti-card-highlight: rgba(255, 255, 255, 0.06);
|
|
--ulti-card-backdrop: blur(12px);
|
|
--ulti-text: #e8eaed;
|
|
--ulti-text-strong: #ffffff;
|
|
--ulti-text-muted: #bdc1c6;
|
|
--ulti-link: #8ab4f8;
|
|
--ulti-input-bg: rgba(0, 0, 0, 0.25);
|
|
--ulti-input-border: rgba(255, 255, 255, 0.14);
|
|
--ulti-scrollbar-thumb: color-mix(in srgb, var(--ulti-text-muted) 50%, transparent);
|
|
--ulti-scrollbar-thumb-hover: color-mix(in srgb, var(--ulti-text-muted) 70%, transparent);
|
|
--ak-accent: var(--ulti-scrollbar-thumb);
|
|
--ulti-btn-primary-bg: #18181b;
|
|
--ulti-btn-primary-fg: var(--ulti-text-strong);
|
|
--ulti-btn-primary-bg-hover: #242428;
|
|
--ulti-btn-primary-border-width: 1px;
|
|
--ulti-btn-primary-border: rgba(255, 255, 255, 0.32);
|
|
--ulti-btn-primary-border-hover: rgba(255, 255, 255, 0.44);
|
|
--ulti-btn-primary-shadow: none;
|
|
--ulti-btn-primary-shadow-hover: none;
|
|
--ulti-btn-primary-ring: color-mix(in srgb, var(--ulti-text-muted) 42%, transparent);
|
|
--ulti-link-ui: color-mix(in srgb, var(--ulti-text-muted) 92%, var(--ulti-text));
|
|
--ulti-link-ui-hover: var(--ulti-text-strong);
|
|
}
|
|
}
|
|
|
|
/* Scrollbars — Authentik défaut utilise var(--ak-accent) corail sur le thumb. */
|
|
html {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--ulti-scrollbar-thumb) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--ulti-scrollbar-thumb);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--ulti-scrollbar-thumb-hover);
|
|
}
|
|
|
|
::-webkit-scrollbar-track,
|
|
::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 1. FOND — remplace la photo de route Authentik par l'aurore UltiSuite
|
|
* ======================================================================== */
|
|
html,
|
|
body {
|
|
background: var(--ulti-bg) !important;
|
|
overflow-x: hidden;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
/* PatternFly laisse .pf-c-background-image à hauteur 0 en mode stacked — on la fixe
|
|
* en plein écran pour que l'aurore / la grille soient visibles. */
|
|
.pf-c-background-image {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100dvh;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
background-color: var(--ulti-bg) !important;
|
|
background-image:
|
|
radial-gradient(
|
|
40rem 36rem at 18% 8%,
|
|
color-mix(in oklab, var(--ulti-glow-a) 60%, transparent),
|
|
transparent 58%
|
|
),
|
|
radial-gradient(
|
|
36rem 34rem at 84% 6%,
|
|
color-mix(in oklab, var(--ulti-glow-b) 55%, transparent),
|
|
transparent 60%
|
|
),
|
|
radial-gradient(
|
|
40rem 36rem at 50% 104%,
|
|
color-mix(in oklab, var(--ulti-glow-c) 55%, transparent),
|
|
transparent 60%
|
|
),
|
|
radial-gradient(
|
|
60% 50% at 50% 42%,
|
|
color-mix(in oklab, var(--ulti-glow-a) 14%, transparent),
|
|
transparent 70%
|
|
) !important;
|
|
background-repeat: no-repeat !important;
|
|
background-size: cover !important;
|
|
filter: none !important;
|
|
animation: ulti-aurora-drift 28s ease-in-out infinite alternate;
|
|
}
|
|
|
|
/* Orbe flottante A (cf. .ultimail-login-orb--a) */
|
|
.pf-c-background-image::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 0;
|
|
width: 40rem;
|
|
height: 40rem;
|
|
top: -16rem;
|
|
left: -12rem;
|
|
border-radius: 9999px;
|
|
pointer-events: none;
|
|
background: radial-gradient(
|
|
circle at 30% 30%,
|
|
color-mix(in oklab, var(--ulti-glow-a) 85%, transparent),
|
|
transparent 65%
|
|
);
|
|
filter: blur(90px);
|
|
opacity: 0.5;
|
|
will-change: transform;
|
|
animation: ulti-orb-drift-a 26s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.pf-c-background-image::before {
|
|
opacity: 0.42;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.pf-c-background-image::before {
|
|
width: 28rem;
|
|
height: 28rem;
|
|
top: -10rem;
|
|
left: -8rem;
|
|
filter: blur(70px);
|
|
}
|
|
|
|
.pf-c-background-image {
|
|
background-image:
|
|
radial-gradient(
|
|
120% 80% at 10% 0%,
|
|
color-mix(in oklab, var(--ulti-glow-a) 55%, transparent),
|
|
transparent 55%
|
|
),
|
|
radial-gradient(
|
|
100% 70% at 95% 8%,
|
|
color-mix(in oklab, var(--ulti-glow-b) 50%, transparent),
|
|
transparent 58%
|
|
),
|
|
radial-gradient(
|
|
120% 80% at 50% 100%,
|
|
color-mix(in oklab, var(--ulti-glow-c) 50%, transparent),
|
|
transparent 60%
|
|
),
|
|
radial-gradient(
|
|
90% 60% at 50% 45%,
|
|
color-mix(in oklab, var(--ulti-glow-a) 16%, transparent),
|
|
transparent 72%
|
|
) !important;
|
|
}
|
|
}
|
|
|
|
/* Les filtres SVG / images PatternFly du fond ne servent plus. */
|
|
.pf-c-background-image > * {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Grille fine masquée par un dégradé radial (cf. .ultimail-login-backdrop). */
|
|
.pf-c-background-image::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(to right, var(--ulti-line) 1px, transparent 1px),
|
|
linear-gradient(to bottom, var(--ulti-line) 1px, transparent 1px);
|
|
background-size: 56px 56px;
|
|
-webkit-mask-image: radial-gradient(
|
|
ellipse 80% 70% at 50% 42%,
|
|
black 28%,
|
|
transparent 80%
|
|
);
|
|
mask-image: radial-gradient(
|
|
ellipse 80% 70% at 50% 42%,
|
|
black 28%,
|
|
transparent 80%
|
|
);
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 2. MISE EN PAGE — carte centrée, chrome transparent devant le fond fixe
|
|
* ======================================================================== */
|
|
.pf-c-page__drawer,
|
|
.pf-c-drawer,
|
|
.pf-c-drawer__main,
|
|
.pf-c-drawer__content,
|
|
.pf-c-drawer__body {
|
|
position: relative;
|
|
z-index: 1;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.pf-c-login.stacked {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: 100dvh !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)) !important;
|
|
}
|
|
|
|
.pf-c-login.stacked .ak-login-container {
|
|
width: 100%;
|
|
max-width: min(26rem, 100%);
|
|
margin-inline: auto;
|
|
flex: 0 1 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pf-c-login__main {
|
|
position: relative;
|
|
isolation: isolate;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
/* visible : le hover du bouton (translateY + ombre) ne doit pas être rogné */
|
|
overflow: visible;
|
|
padding: 1.5rem 2rem 1.25rem !important;
|
|
border-radius: 2.25rem !important;
|
|
background: var(--ulti-card-glass) !important;
|
|
border: 1px solid var(--ulti-card-border) !important;
|
|
box-shadow:
|
|
inset 0 1px 0 var(--ulti-card-highlight),
|
|
0 16px 44px -16px rgba(0, 0, 0, 0.28) !important;
|
|
-webkit-backdrop-filter: var(--ulti-card-backdrop, blur(16px) saturate(1.2));
|
|
backdrop-filter: var(--ulti-card-backdrop, blur(16px) saturate(1.2));
|
|
}
|
|
|
|
/* Anneau arc-en-ciel confiné au bord via masque (padding ring). */
|
|
.pf-c-login__main::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 3;
|
|
border-radius: inherit;
|
|
padding: 2.5px;
|
|
background: var(--ulti-rainbow);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
animation: ulti-ring-spin 9s linear infinite;
|
|
}
|
|
|
|
/* Logo UltiSuite (header executor) — variante thème via content:url(). */
|
|
.pf-c-login__main-header.pf-c-brand,
|
|
.ak-brand {
|
|
padding-top: 0.25rem !important;
|
|
padding-bottom: 0.75rem !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.pf-c-login__main-header.pf-c-brand img,
|
|
.ak-brand img,
|
|
.pf-c-brand img {
|
|
max-height: 52px;
|
|
width: auto;
|
|
max-width: min(280px, 78vw);
|
|
content: url("/auth/static/dist/assets/branding/ultisuite-logo-light.png");
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.pf-c-login__main-header.pf-c-brand img,
|
|
.ak-brand img,
|
|
.pf-c-brand img {
|
|
content: url("/auth/static/dist/assets/branding/ultisuite-logo-dark.png");
|
|
}
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 3. TITRE + DESCRIPTION DE L'ÉTAPE
|
|
* ======================================================================== */
|
|
.pf-c-login__main-body,
|
|
.pf-c-login__main-header {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* Titre d'étape (identification, mot de passe, etc.) — pas le bandeau logo */
|
|
.pf-c-login__main-header:not(.pf-c-brand):not(.ak-brand) {
|
|
padding: 0 0 1rem !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.pf-c-title {
|
|
text-align: center;
|
|
color: var(--ulti-text-strong) !important;
|
|
font-weight: 600 !important;
|
|
margin: 0 !important;
|
|
line-height: 1.35 !important;
|
|
}
|
|
|
|
.pf-c-title.pf-m-3xl {
|
|
font-size: 1.125rem !important;
|
|
}
|
|
|
|
/* Bandeau utilisateur (avatar + « Pas vous ? ») sur l'étape mot de passe */
|
|
.pf-c-login__main-body .pf-c-login__main-header,
|
|
.pf-c-form .pf-c-login__main-header {
|
|
padding: 0 0 1rem !important;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 4. FORMULAIRE — labels, champs (.pf-c-form-control)
|
|
* ======================================================================== */
|
|
.pf-c-form {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
column-gap: 0.75rem;
|
|
row-gap: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
.pf-c-form > ak-form-static,
|
|
.pf-c-form > input,
|
|
.pf-c-form > ak-flow-input-password,
|
|
.pf-c-form > ak-form-element,
|
|
.pf-c-form > .pf-c-form__group:not(.pf-m-action),
|
|
.pf-c-form > p {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* Mot de passe oublié + bouton : même ligne, lien à gauche / bouton à droite */
|
|
.pf-c-form > a:has(+ .pf-c-form__group.pf-m-action) {
|
|
grid-column: 1;
|
|
justify-self: start;
|
|
align-self: center;
|
|
margin: 0.175rem 0 0.25rem !important;
|
|
}
|
|
|
|
.pf-c-form > a + .pf-c-form__group.pf-m-action {
|
|
grid-column: 2;
|
|
justify-self: end;
|
|
align-self: center;
|
|
margin: 0.175rem 0 0.25rem !important;
|
|
}
|
|
|
|
/* Bouton seul (sans lien juste avant) */
|
|
.pf-c-form > .pf-c-form__group.pf-m-action {
|
|
grid-column: 2;
|
|
margin: 0.175rem 0 0.25rem !important;
|
|
}
|
|
|
|
.pf-c-form__group {
|
|
margin-bottom: 0.5rem !important;
|
|
}
|
|
|
|
/* Liens auxiliaires (mot de passe oublié, « Pas vous ? », inscription…) */
|
|
.pf-c-login__main a,
|
|
.pf-c-form a,
|
|
ak-form-static a {
|
|
color: var(--ulti-link-ui) !important;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
text-decoration: underline;
|
|
text-underline-offset: 0.15em;
|
|
transition: color 0.18s ease;
|
|
}
|
|
|
|
.pf-c-login__main a:hover,
|
|
.pf-c-form a:hover,
|
|
ak-form-static a:hover {
|
|
color: var(--ulti-link-ui-hover) !important;
|
|
}
|
|
|
|
.pf-c-form__group.pf-m-action {
|
|
margin-top: 0 !important;
|
|
margin-bottom: 0 !important;
|
|
padding-top: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
overflow: visible !important;
|
|
display: var(--ulti-action-group-display, block);
|
|
justify-content: var(--ulti-action-group-justify, normal);
|
|
}
|
|
|
|
.pf-c-login__main-body {
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.pf-c-form__label-text {
|
|
color: var(--ulti-text-muted) !important;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pf-c-form__label-required {
|
|
color: var(--ulti-link) !important;
|
|
}
|
|
|
|
.pf-c-form-control {
|
|
height: 2.6rem;
|
|
padding: 0 0.85rem !important;
|
|
font-size: 0.9rem !important;
|
|
color: var(--ulti-text) !important;
|
|
background: var(--ulti-input-bg) !important;
|
|
border: 1px solid var(--ulti-input-border) !important;
|
|
border-radius: 0.6rem !important;
|
|
box-shadow: none !important;
|
|
transition:
|
|
border-color 0.18s ease,
|
|
box-shadow 0.18s ease;
|
|
}
|
|
|
|
.pf-c-form-control:hover {
|
|
border-color: color-mix(in srgb, var(--ulti-link) 45%, var(--ulti-input-border)) !important;
|
|
}
|
|
|
|
.pf-c-form-control:focus,
|
|
.pf-c-form-control:focus-visible {
|
|
border-color: var(--ulti-link) !important;
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ulti-link) 25%, transparent) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 4b. TEXTES D'AIDE / DESCRIPTION D'ÉTAPE
|
|
* -----------------------------------------------------------------------------
|
|
* Les étapes prompt/identification injectent des paragraphes bruts dans le
|
|
* corps (description de l'étape, suffixe de domaine "@ultisuite.fr", aide de
|
|
* champ). Sans règle ils héritent de la couleur PatternFly par défaut — peu
|
|
* lisible en sombre. On les aligne sur le texte atténué partagé.
|
|
* (Recovery : description "Enter the email…". Enrollment : "@ultisuite.fr".)
|
|
* ======================================================================== */
|
|
.pf-c-login__main-body > p,
|
|
.pf-c-form > p,
|
|
.pf-c-form__helper-text {
|
|
color: var(--ulti-text-muted) !important;
|
|
font-size: 0.85rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* Suffixe de domaine d'enrollment : rapproché du champ e-mail qu'il complète. */
|
|
.pf-c-form > p {
|
|
margin-top: -0.35rem !important;
|
|
margin-bottom: 0.125rem !important;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 4c. INSCRIPTION (ulti-enrollment) — e-mail suffixé, mots de passe
|
|
* ======================================================================== */
|
|
|
|
ak-flow-executor[flowslug="ulti-enrollment"] ak-form-element:has(input[name="password"]).pf-c-form__group,
|
|
ak-flow-executor[flowslug="ulti-enrollment"] ak-form-element:has(input[name="password"]) .pf-c-form__group {
|
|
margin-bottom: 0.175rem !important;
|
|
}
|
|
|
|
ak-flow-executor[flowslug="ulti-enrollment"] .ulti-password-strength {
|
|
grid-column: 1 / -1;
|
|
margin: 0.125rem 0 0.075rem !important;
|
|
}
|
|
|
|
ak-flow-executor[flowslug="ulti-enrollment"] ak-form-element:has(input[name="password_repeat"]).pf-c-form__group,
|
|
ak-flow-executor[flowslug="ulti-enrollment"] ak-form-element:has(input[name="password_repeat"]) .pf-c-form__group {
|
|
margin-bottom: 0.25rem !important;
|
|
}
|
|
|
|
ak-flow-executor[flowslug="ulti-enrollment"] .ulti-password-match {
|
|
grid-column: 1 / -1;
|
|
margin: 0.075rem 0 0.175rem !important;
|
|
}
|
|
|
|
ak-flow-executor[flowslug="ulti-enrollment"] .ulti-email-availability {
|
|
grid-column: 1 / -1;
|
|
margin: 0.075rem 0 0.175rem !important;
|
|
font-size: 0.75rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.ulti-email-availability.muted,
|
|
.ulti-email-availability.checking {
|
|
color: var(--ulti-text-muted) !important;
|
|
}
|
|
|
|
.ulti-email-availability.ok {
|
|
color: #10b981 !important;
|
|
}
|
|
|
|
.ulti-email-availability.bad {
|
|
color: #ef4444 !important;
|
|
}
|
|
|
|
.pf-c-button.pf-m-primary:disabled,
|
|
.pf-c-button.pf-m-primary[disabled] {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ulti-email-input-group {
|
|
display: flex;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
}
|
|
|
|
.ulti-email-input-group input[name="username"] {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
border-right: none !important;
|
|
}
|
|
|
|
.ulti-email-suffix {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
padding: 0 0.75rem;
|
|
border: 1px solid var(--ulti-input-border);
|
|
border-left: none;
|
|
border-radius: 0 0.375rem 0.375rem 0;
|
|
background: color-mix(in srgb, var(--ulti-input-bg) 90%, var(--ulti-text-muted));
|
|
color: var(--ulti-text-muted);
|
|
font-size: 0.9375rem;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
}
|
|
|
|
.ulti-password-wrap {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.ulti-password-input {
|
|
width: 100%;
|
|
padding-right: 2.5rem !important;
|
|
}
|
|
|
|
.ulti-password-toggle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 2.5rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--ulti-text-muted);
|
|
cursor: pointer;
|
|
border-radius: 0 0.375rem 0.375rem 0;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.ulti-password-toggle:hover {
|
|
color: var(--ulti-text-strong);
|
|
}
|
|
|
|
.ulti-password-toggle:focus-visible {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--ulti-btn-primary-ring);
|
|
}
|
|
|
|
.ulti-password-strength-bars {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.ulti-password-strength-bars span {
|
|
flex: 1;
|
|
height: 0.25rem;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--ulti-text-muted) 22%, transparent);
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.ulti-password-strength-bars span.active.weak {
|
|
background: #ef4444;
|
|
}
|
|
|
|
.ulti-password-strength-bars span.active.fair {
|
|
background: #f59e0b;
|
|
}
|
|
|
|
.ulti-password-strength-bars span.active.good {
|
|
background: #10b981;
|
|
}
|
|
|
|
.ulti-password-strength-bars span.active.strong {
|
|
background: #059669;
|
|
}
|
|
|
|
.ulti-password-strength-label {
|
|
margin: 0.175rem 0 0 !important;
|
|
font-size: 0.75rem;
|
|
color: var(--ulti-text-muted) !important;
|
|
}
|
|
|
|
.ulti-password-strength-label strong {
|
|
color: var(--ulti-text-strong);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ulti-password-match {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.ulti-password-match.ok {
|
|
color: #10b981 !important;
|
|
}
|
|
|
|
.ulti-password-match.bad {
|
|
color: #ef4444 !important;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 5. BOUTONS PRIMAIRES — gris neutre, bordure 2px
|
|
* ======================================================================== */
|
|
|
|
ak-flow-executor[flowslug="default-authentication-flow"],
|
|
ak-flow-executor[flowslug="ulti-enrollment"],
|
|
ak-flow-executor[flowslug="ulti-recovery"] {
|
|
--ulti-action-group-display: flex;
|
|
--ulti-action-group-justify: flex-end;
|
|
--ulti-primary-btn-width: auto;
|
|
--ulti-primary-btn-height: 2.625rem;
|
|
--ulti-primary-btn-min-height: 2.625rem;
|
|
--ulti-primary-btn-padding: 0 1rem;
|
|
--ulti-primary-btn-radius: 0.6rem;
|
|
--ulti-primary-btn-font-size: 0.9375rem;
|
|
--ulti-primary-btn-weight: 600;
|
|
}
|
|
|
|
.pf-c-button.pf-m-primary {
|
|
display: var(--ulti-primary-btn-display, inline-flex);
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
width: var(--ulti-primary-btn-width, auto);
|
|
height: var(--ulti-primary-btn-height, auto);
|
|
min-height: var(--ulti-primary-btn-min-height, 2.25rem);
|
|
margin: 0 !important;
|
|
padding: var(--ulti-primary-btn-padding, 0.4375rem 0.875rem) !important;
|
|
border: var(--ulti-btn-primary-border-width, 2px) solid var(--ulti-btn-primary-border, transparent) !important;
|
|
border-radius: var(--ulti-primary-btn-radius, 0.375rem) !important;
|
|
font-size: var(--ulti-primary-btn-font-size, 0.9375rem) !important;
|
|
font-weight: var(--ulti-primary-btn-weight, 600) !important;
|
|
line-height: 1 !important;
|
|
letter-spacing: normal;
|
|
color: var(--ulti-btn-primary-fg) !important;
|
|
text-shadow: none;
|
|
background-color: var(--ulti-btn-primary-bg) !important;
|
|
background-image: none !important;
|
|
box-shadow: var(--ulti-btn-primary-shadow, none) !important;
|
|
transition:
|
|
background-color 0.18s ease,
|
|
border-color 0.18s ease,
|
|
opacity 0.15s ease;
|
|
}
|
|
|
|
.pf-c-button.pf-m-primary:hover {
|
|
background-color: var(--ulti-btn-primary-bg-hover) !important;
|
|
border-color: var(--ulti-btn-primary-border-hover) !important;
|
|
}
|
|
|
|
.pf-c-button.pf-m-primary:active {
|
|
opacity: 0.94;
|
|
}
|
|
|
|
.pf-c-button.pf-m-primary:focus-visible {
|
|
outline: none !important;
|
|
border-color: var(--ulti-btn-primary-border-hover) !important;
|
|
box-shadow: 0 0 0 3px var(--ulti-btn-primary-ring) !important;
|
|
}
|
|
|
|
.pf-c-form__group.pf-m-action .pf-c-button.pf-m-primary {
|
|
width: var(--ulti-primary-btn-width, 100%) !important;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Overlay de chargement Authentik (après « Continuer ») — aligné sur la carte. */
|
|
ak-loading-overlay {
|
|
position: absolute !important;
|
|
inset: 0 !important;
|
|
top: 0 !important;
|
|
left: 0 !important;
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
margin: 0 !important;
|
|
border-radius: inherit !important;
|
|
background: color-mix(in srgb, var(--ulti-card-glass) 82%, transparent) !important;
|
|
-webkit-backdrop-filter: blur(6px) saturate(1.2);
|
|
backdrop-filter: blur(6px) saturate(1.2);
|
|
display: flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
z-index: 10;
|
|
}
|
|
|
|
ak-loading-overlay .pf-c-empty-state {
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
ak-loading-overlay .pf-c-spinner {
|
|
--pf-c-spinner--Color: var(--ulti-link);
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 6. PIED DE CARTE — bande "Créer un compte" / liens auxiliaires
|
|
* ======================================================================== */
|
|
.pf-c-login__main-footer {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.pf-c-login__main-footer-band {
|
|
margin-top: 0.5rem !important;
|
|
padding: 0.875rem 0 0.25rem !important;
|
|
background: transparent !important;
|
|
border: 0 !important;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Liens auxiliaires (mot de passe oublié, inscription, etc.) */
|
|
.pf-c-login__main-footer-links {
|
|
margin: 0.15rem 0 0 !important;
|
|
padding: 0 !important;
|
|
list-style: none !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.pf-c-login__main-footer-links li {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.pf-c-login__main-footer-band-item {
|
|
color: var(--ulti-text-muted) !important;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 7. MASQUAGE DU BRANDING AUTHENTIK
|
|
* ======================================================================== */
|
|
.pf-c-login__footer,
|
|
ak-branding-footer,
|
|
.pf-c-login__footer-text,
|
|
a[href*="goauthentik.io"],
|
|
a[href*="authentik.io"] {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
height: 0 !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
ak-flow-executor::part(footer) {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 8. MODE EMBARQUÉ — surfaces Authentik intégrées en iframe dans UltiSuite
|
|
* -----------------------------------------------------------------------------
|
|
* Deux familles de surfaces sont embarquées dans le panneau « réglages »
|
|
* d'UltiSuite (chrome Authentik masqué → seul le panneau utile reste visible) :
|
|
*
|
|
* A) La SPA user-settings : `/auth/if/user/#/settings;{"page":"<page>"}`
|
|
* Hôtes : <ak-interface-user> → (shadow) <ak-interface-user-presentation>
|
|
* → (shadow) <ak-user-settings> → (shadow) <ak-tabs vertical>.
|
|
* Pages deep-linkables via le hash (ex. `#/settings;{"page":"page-mfa"}`) :
|
|
* • MFA / authentificateurs : page-mfa → <ak-user-settings-mfa>
|
|
* • Sessions actives : page-sessions → <ak-user-session-list>
|
|
* (autres : page-details, page-consents, page-sources, page-tokens)
|
|
*
|
|
* B) Les flows de configuration MFA, ouverts en plein écran depuis le menu
|
|
* « Enroll » de la page MFA (configure flow → <ak-flow-executor flowslug>) :
|
|
* • default-authenticator-totp-setup
|
|
* • default-authenticator-webauthn-setup
|
|
* • default-authenticator-static-setup
|
|
* • default-password-change (bouton « Change password », page-details)
|
|
* • ulti-post-migration-security (blueprint 04 — sécuriser le compte)
|
|
*
|
|
* HYPOTHÈSE DE SCOPING (assumée, cf. brief) : la SPA user-settings n'est JAMAIS
|
|
* montrée en standalone aux utilisateurs finaux — uniquement embarquée dans
|
|
* UltiSuite. On dépouille donc son chrome INCONDITIONNELLEMENT, mais en scopant
|
|
* aux hôtes de l'INTERFACE UTILISATEUR (`ak-interface-user-presentation`,
|
|
* `ak-user-settings`, `ak-user-*-list/mfa`) afin de NE PAS toucher :
|
|
* - l'interface ADMIN (`if/admin`, hôtes `ak-interface-admin*`) ;
|
|
* - les FLOWS de login/signup/recovery (carte + branding conservés).
|
|
* Les flows de config MFA listés en B) ne sont atteints QUE depuis les réglages
|
|
* (le login garde son slug `default-authentication-flow`) → strip sûr.
|
|
*
|
|
* NOTE Firefox : la règle 8.3 (masquage de la nav d'onglets) repose sur
|
|
* `:host-context()`, non implémenté par Firefox. Cibles principales (Chrome,
|
|
* Edge, WebView Android, WKWebView/WebKitGTK de Tauri) OK ; sous Firefox la
|
|
* barre d'onglets verticale resterait visible (dégradation, pas de casse).
|
|
* ======================================================================== */
|
|
|
|
/* ---- 8.1 SPA : masquage du chrome global (header, fond, marges) --------- */
|
|
/* Hôte = <ak-interface-user-presentation> (porte le shadow contenant header
|
|
* + fond + drawer). Scope strict : n'atteint pas l'admin ni les flows. */
|
|
:host(ak-interface-user-presentation) .pf-c-page__header,
|
|
:host(ak-interface-user-presentation) .background-wrapper {
|
|
display: none !important;
|
|
}
|
|
|
|
:host(ak-interface-user-presentation) .pf-c-page,
|
|
:host(ak-interface-user-presentation) .pf-c-page__drawer,
|
|
:host(ak-interface-user-presentation) .pf-c-drawer,
|
|
:host(ak-interface-user-presentation) .pf-c-drawer__main,
|
|
:host(ak-interface-user-presentation) .pf-c-drawer__content,
|
|
:host(ak-interface-user-presentation) .pf-c-drawer__body {
|
|
background: transparent !important;
|
|
}
|
|
|
|
:host(ak-interface-user-presentation) .pf-c-page__main {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ---- 8.2 SPA : page de réglages à plat (transparente, sans marges) ------ */
|
|
:host(ak-user-settings) .pf-c-page,
|
|
:host(ak-user-settings) .pf-c-page__main {
|
|
background: transparent !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
:host(ak-user-settings) .pf-c-page__main-section {
|
|
padding: 0 !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* La carte qui enveloppe chaque panneau (MFA / sessions) devient le panneau
|
|
* UltiSuite lui-même : fond/ombre/bordure retirés pour fondre dans l'iframe. */
|
|
:host(ak-user-settings) .pf-c-card {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
:host(ak-user-settings) .pf-c-card__body {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ---- 8.3 SPA : masquage de la barre d'onglets verticale (cf. NOTE) ------ */
|
|
/* <ak-tabs> est générique (réutilisé par l'admin) : on le restreint au seul
|
|
* réglage utilisateur via :host-context(ak-user-settings). Le panneau actif
|
|
* (slot page-*) reste affiché ; seule la nav latérale disparaît. */
|
|
:host-context(ak-user-settings) .pf-c-tabs.pf-m-vertical {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ---- 8.4 SPA : look UltiSuite des listes MFA & sessions ----------------- */
|
|
/* Scopé aux hôtes propres à l'interface utilisateur (jamais en admin/flows). */
|
|
:host(ak-user-settings-mfa) .pf-c-table,
|
|
:host(ak-user-session-list) .pf-c-table {
|
|
background: transparent !important;
|
|
color: var(--ulti-text) !important;
|
|
}
|
|
|
|
:host(ak-user-settings-mfa) .pf-c-table th,
|
|
:host(ak-user-settings-mfa) .pf-c-table td,
|
|
:host(ak-user-session-list) .pf-c-table th,
|
|
:host(ak-user-session-list) .pf-c-table td {
|
|
color: var(--ulti-text) !important;
|
|
border-color: var(--ulti-line) !important;
|
|
}
|
|
|
|
:host(ak-user-settings-mfa) .pf-c-table th,
|
|
:host(ak-user-session-list) .pf-c-table th {
|
|
color: var(--ulti-text-muted) !important;
|
|
}
|
|
|
|
:host(ak-user-settings-mfa) .pf-c-toolbar,
|
|
:host(ak-user-session-list) .pf-c-toolbar {
|
|
background: transparent !important;
|
|
padding-inline: 0 !important;
|
|
}
|
|
|
|
/* Boutons réglages / MFA */
|
|
:host(ak-user-settings-mfa) .pf-c-dropdown__toggle.pf-m-primary,
|
|
:host(ak-user-settings) .pf-c-button.pf-m-primary,
|
|
:host(ak-user-settings-mfa) .pf-c-button.pf-m-primary,
|
|
:host(ak-user-session-list) .pf-c-button.pf-m-primary {
|
|
border-radius: 0.375rem !important;
|
|
padding: 0.4375rem 0.875rem !important;
|
|
}
|
|
|
|
:host(ak-user-settings-mfa) .pf-c-dropdown__toggle.pf-m-primary {
|
|
border: 0 !important;
|
|
}
|
|
|
|
/* ---- 8.5 Flows de configuration MFA / sécurité : chrome dépouillé ------- */
|
|
/* Mêmes effets que l'ancien stub, appliqués aux VRAIS slugs embarqués. */
|
|
:host([flowslug="default-authenticator-totp-setup"]) .pf-c-background-image,
|
|
:host([flowslug="default-authenticator-totp-setup"]) .pf-c-login__footer,
|
|
:host([flowslug="default-authenticator-totp-setup"]) .pf-c-login__main-header.pf-c-brand,
|
|
:host([flowslug="default-authenticator-webauthn-setup"]) .pf-c-background-image,
|
|
:host([flowslug="default-authenticator-webauthn-setup"]) .pf-c-login__footer,
|
|
:host([flowslug="default-authenticator-webauthn-setup"]) .pf-c-login__main-header.pf-c-brand,
|
|
:host([flowslug="default-authenticator-static-setup"]) .pf-c-background-image,
|
|
:host([flowslug="default-authenticator-static-setup"]) .pf-c-login__footer,
|
|
:host([flowslug="default-authenticator-static-setup"]) .pf-c-login__main-header.pf-c-brand,
|
|
:host([flowslug="default-password-change"]) .pf-c-background-image,
|
|
:host([flowslug="default-password-change"]) .pf-c-login__footer,
|
|
:host([flowslug="default-password-change"]) .pf-c-login__main-header.pf-c-brand,
|
|
:host([flowslug="ulti-post-migration-security"]) .pf-c-background-image,
|
|
:host([flowslug="ulti-post-migration-security"]) .pf-c-login__footer,
|
|
:host([flowslug="ulti-post-migration-security"]) .pf-c-login__main-header.pf-c-brand {
|
|
display: none !important;
|
|
}
|
|
|
|
:host([flowslug="default-authenticator-totp-setup"]) .pf-c-login.stacked,
|
|
:host([flowslug="default-authenticator-webauthn-setup"]) .pf-c-login.stacked,
|
|
:host([flowslug="default-authenticator-static-setup"]) .pf-c-login.stacked,
|
|
:host([flowslug="default-password-change"]) .pf-c-login.stacked,
|
|
:host([flowslug="ulti-post-migration-security"]) .pf-c-login.stacked {
|
|
background: transparent !important;
|
|
}
|
|
|
|
:host([flowslug="default-authenticator-totp-setup"]) .pf-c-login.stacked .ak-login-container,
|
|
:host([flowslug="default-authenticator-webauthn-setup"]) .pf-c-login.stacked .ak-login-container,
|
|
:host([flowslug="default-authenticator-static-setup"]) .pf-c-login.stacked .ak-login-container,
|
|
:host([flowslug="default-password-change"]) .pf-c-login.stacked .ak-login-container,
|
|
:host([flowslug="ulti-post-migration-security"]) .pf-c-login.stacked .ak-login-container {
|
|
max-width: none !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
:host([flowslug="default-authenticator-totp-setup"]) .pf-c-login__main,
|
|
:host([flowslug="default-authenticator-webauthn-setup"]) .pf-c-login__main,
|
|
:host([flowslug="default-authenticator-static-setup"]) .pf-c-login__main,
|
|
:host([flowslug="default-password-change"]) .pf-c-login__main,
|
|
:host([flowslug="ulti-post-migration-security"]) .pf-c-login__main {
|
|
max-width: none !important;
|
|
padding: 0 !important;
|
|
border: 0 !important;
|
|
border-radius: 0 !important;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
:host([flowslug="default-authenticator-totp-setup"]) .pf-c-login__main::before,
|
|
:host([flowslug="default-authenticator-webauthn-setup"]) .pf-c-login__main::before,
|
|
:host([flowslug="default-authenticator-static-setup"]) .pf-c-login__main::before,
|
|
:host([flowslug="default-password-change"]) .pf-c-login__main::before,
|
|
:host([flowslug="ulti-post-migration-security"]) .pf-c-login__main::before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ===========================================================================
|
|
* 9. ANIMATIONS / ACCESSIBILITÉ
|
|
* ======================================================================== */
|
|
@keyframes ulti-ring-spin {
|
|
to {
|
|
--ulti-ring-angle: 505deg;
|
|
}
|
|
}
|
|
|
|
@keyframes ulti-aurora-drift {
|
|
from {
|
|
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
|
|
}
|
|
to {
|
|
background-size: 112% 108%, 108% 112%, 110% 105%, 106% 104%;
|
|
}
|
|
}
|
|
|
|
@keyframes ulti-orb-drift-a {
|
|
from {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
to {
|
|
transform: translate3d(6rem, 4rem, 0) scale(1.12);
|
|
}
|
|
}
|
|
|
|
/* Évite le rognage du bouton / ombre de carte par les conteneurs PatternFly */
|
|
.pf-c-login.stacked,
|
|
.pf-c-login.stacked .ak-login-container,
|
|
.pf-c-page__drawer .pf-c-drawer__body,
|
|
.pf-c-page__drawer .pf-c-drawer__content {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
@media (max-width: 639px) {
|
|
.pf-c-login__main {
|
|
padding: 1.25rem 1.25rem 1rem !important;
|
|
border-radius: 1.75rem !important;
|
|
}
|
|
|
|
.pf-c-login__main-header.pf-c-brand img,
|
|
.ak-brand img,
|
|
.pf-c-brand img {
|
|
max-height: 44px;
|
|
max-width: min(240px, 72vw);
|
|
}
|
|
|
|
.pf-c-title.pf-m-3xl {
|
|
font-size: 1.05rem !important;
|
|
}
|
|
|
|
.pf-c-form-control {
|
|
height: 2.75rem;
|
|
font-size: 16px !important; /* évite le zoom iOS */
|
|
}
|
|
|
|
ak-flow-executor[flowslug="default-authentication-flow"],
|
|
ak-flow-executor[flowslug="ulti-enrollment"],
|
|
ak-flow-executor[flowslug="ulti-recovery"] {
|
|
--ulti-primary-btn-height: 2.625rem;
|
|
--ulti-primary-btn-min-height: 2.625rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pf-c-background-image,
|
|
.pf-c-background-image::before {
|
|
animation: none !important;
|
|
}
|
|
|
|
.pf-c-login__main::before {
|
|
animation: none !important;
|
|
}
|
|
}
|