/* ========================================================= QUARZEO ADMIN V12.10 Connexion esthétique et fonctionnelle CSS uniquement — aucun événement modifié ========================================================= */ /* * CRITIQUE : * ne jamais forcer display sur #loginView lorsqu'il est hidden. */ #loginView.hidden, #loginView.qz-auth.hidden{ display:none !important; } /* Design actif uniquement tant que la vue de connexion est visible */ #loginView.qz-auth:not(.hidden){ display:grid !important; place-items:center !important; width:100% !important; min-height:100vh !important; padding:30px !important; background: radial-gradient( circle at 50% 45%, rgba(34,195,215,.11), transparent 27% ), radial-gradient( circle at 78% 20%, rgba(47,128,205,.045), transparent 22% ), linear-gradient( 180deg, #f9fcfe 0%, #eef6fa 100% ) !important; } #loginView:not(.hidden) .qz-auth-box{ display:flex !important; flex-direction:column !important; align-items:stretch !important; width:min(370px,calc(100vw - 38px)) !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } /* Marque */ #loginView:not(.hidden) .qz-auth-brand{ display:flex !important; align-items:baseline !important; justify-content:center !important; gap:9px !important; margin:0 0 22px !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; } #loginView:not(.hidden) .qz-auth-brand span{ background: linear-gradient( 105deg, #075a82 0%, #28c8dc 34%, #073e61 65%, #25bdd4 100% ); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#086083 !important; font-size:31px !important; font-weight:950 !important; line-height:1 !important; letter-spacing:-.045em !important; animation:qzaSafeBrandLight 7s ease-in-out infinite; } #loginView:not(.hidden) .qz-auth-brand b{ color:#1497b2 !important; font-size:12px !important; font-weight:950 !important; line-height:1 !important; letter-spacing:.15em !important; } @keyframes qzaSafeBrandLight{ 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} } /* Carte de connexion */ #loginView:not(.hidden) form, #loginView:not(.hidden) .loginCard{ display:block !important; width:100% !important; margin:0 !important; padding:25px 23px 23px !important; border:1px solid rgba(171,210,225,.62) !important; border-radius:23px !important; background: radial-gradient( circle at 100% 0, rgba(40,206,224,.06), transparent 34% ), rgba(255,255,255,.97) !important; box-shadow: 0 25px 65px rgba(6,43,66,.13), inset 0 1px 0 rgba(255,255,255,.9) !important; backdrop-filter:blur(16px) !important; } /* Libellés centrés */ #loginView:not(.hidden) form label, #loginView:not(.hidden) .loginCard label{ display:block !important; margin:0 0 18px !important; color:#365f74 !important; font-size:10px !important; font-weight:900 !important; line-height:1.2 !important; text-align:center !important; } /* Champs */ #loginView:not(.hidden) form label input, #loginView:not(.hidden) .loginCard label input{ display:block !important; width:100% !important; min-height:49px !important; margin:8px 0 0 !important; padding:0 15px !important; border:1px solid #d4e4ec !important; border-radius:14px !important; background:#fafdfe !important; color:#173d52 !important; font-size:12px !important; text-align:left !important; outline:0 !important; appearance:none !important; box-shadow: inset 0 1px 2px rgba(5,50,73,.025) !important; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important; } #loginView:not(.hidden) form label input:hover, #loginView:not(.hidden) .loginCard label input:hover{ border-color:#b8d6e2 !important; background:#fff !important; } #loginView:not(.hidden) form label input:focus, #loginView:not(.hidden) .loginCard label input:focus{ border-color:#57cadb !important; background:#fff !important; box-shadow: 0 0 0 4px rgba(40,206,224,.11) !important; } /* Bouton : esthétique sans toucher à son comportement */ #loginView:not(.hidden) form button[type="submit"], #loginView:not(.hidden) .loginCard button[type="submit"]{ width:100% !important; min-height:49px !important; margin:1px 0 0 !important; padding:0 16px !important; border:0 !important; border-radius:14px !important; background: linear-gradient( 120deg, #08688f, #11a6c0 ) !important; color:#fff !important; font-family:inherit !important; font-size:10px !important; font-weight:950 !important; cursor:pointer !important; pointer-events:auto !important; box-shadow: 0 13px 29px rgba(7,105,142,.21) !important; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important; } #loginView:not(.hidden) form button[type="submit"]:hover, #loginView:not(.hidden) .loginCard button[type="submit"]:hover{ transform:translateY(-1px) !important; filter:brightness(1.035) !important; box-shadow: 0 16px 34px rgba(7,105,142,.25) !important; } #loginView:not(.hidden) form button[type="submit"]:active, #loginView:not(.hidden) .loginCard button[type="submit"]:active{ transform:translateY(0) !important; } /* Le statut reste lisible pendant la requête */ #loginView:not(.hidden) #loginStatus{ min-height:0 !important; margin:12px 0 0 !important; color:#527286 !important; font-size:9px !important; font-weight:750 !important; text-align:center !important; } /* Suppression des anciens encadrements parasites */ #loginView:not(.hidden) .qz-auth-box::before, #loginView:not(.hidden) .qz-auth-box::after, #loginView:not(.hidden) form::before, #loginView:not(.hidden) form::after, #loginView:not(.hidden) .loginCard::before, #loginView:not(.hidden) .loginCard::after{ display:none !important; content:none !important; } @media(max-width:520px){ #loginView.qz-auth:not(.hidden){ padding:18px !important; } #loginView:not(.hidden) .qz-auth-brand{ margin-bottom:19px !important; } #loginView:not(.hidden) .qz-auth-brand span{ font-size:27px !important; } #loginView:not(.hidden) form, #loginView:not(.hidden) .loginCard{ padding:22px 18px 20px !important; } }