/* ============================================================================ IMVP — habillage de marque de l'AUTH AGENTS osTicket (/scp/login.php + le flux de réinitialisation de mot de passe : pwreset.php / pwreset.sent / pwreset.login, qui partagent tous include/staff/login.header.php). Surcouche chargée APRÈS scp/css/login.css. On ne modifie AUCUN CSS osTicket ; on ne touche PAS scp.css → le panneau agents CONNECTÉ (l'admin fonctionnel) reste 100 % stock. Charte = imvp-v3.css / imvp-brand.css (portail client) : brutalisme suisse, papier/encre, filets 1px, zéro arrondi, Archivo + JetBrains Mono, action en bleu #2563EB. Tout est scopé sous #loginBody. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap'); #loginBody { --ink: #0A0A0A; --paper: #FBFBF9; --blue: #2563EB; --blue-hover: #1d4fd0; --coral: #E63E54; --line: rgba(10, 10, 10, 0.14); --line-strong: rgba(10, 10, 10, 0.32); --mono: 'JetBrains Mono', ui-monospace, monospace; } /* La marque est carrée (neutralise tous les arrondis osTicket sur cette page). */ #loginBody, #loginBody * { border-radius: 0 !important; } /* --------------------------------------------------------------- FOND ----- */ /* On retire le décor photo/flou d'osTicket (brickwall + blur + backdrop) au profit du papier IMVP net. */ /* Littéral (pas var()) : les tokens vivent sur #loginBody, donc var(--paper) ne résout PAS sur (ancêtre). Cosmétiquement masqué par la propagation body→canvas, mais on ne s'appuie pas dessus. */ html { background: #FBFBF9; } #loginBody { background: var(--paper) !important; color: var(--ink) !important; font-family: 'Archivo', system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Autofill Chrome/Edge : sinon les champs à identifiants sauvegardés virent au jaune (seul override fiable = box-shadow inset blanc + text-fill-color). */ #loginBody input:-webkit-autofill, #loginBody input:-webkit-autofill:hover, #loginBody input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink); } #brickwall { background: var(--paper) !important; background-image: none !important; } #blur, #background, #background-compat { display: none !important; } /* --------------------------------------------------------------- CARTE ---- */ #loginBox { background: #fff !important; border: 1px solid var(--ink) !important; box-shadow: none !important; mix-blend-mode: normal !important; isolation: auto !important; width: 400px; padding: 40px 44px 44px !important; top: 12% !important; } /* Le voile blanc translucide arrondi (::after) d'osTicket : supprimé. */ #loginBox:after { display: none !important; content: none !important; } /* --------------------------------------------------------------- LOGO ----- */ /* Logo image osTicket remplacé par le logotype texte « IMVP · SUPPORT ». */ #loginBody #logo { margin: 0 0 6px !important; } #loginBody #logo a { display: flex !important; align-items: baseline; justify-content: center; gap: 12px; height: auto !important; text-decoration: none !important; } #loginBody #logo a img, #loginBody #logo .valign-helper { display: none !important; } #loginBody #logo a::before { content: 'IMVP'; font-weight: 900; font-size: 34px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } #loginBody #logo a::after { content: 'SUPPORT'; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; color: var(--blue); border: 1px solid var(--blue); padding: 3px 8px; transform: translateY(-5px); } /* ------------------------------------------------ MESSAGE / EN-TÊTE -------- */ /* Le titre direct de #loginBox (h3) : sur login.php c'est #login-message (qui double comme zone d'erreur — le JS y injecte le message d'échec) ; sur le flux pwreset c'est le h3 d'instruction. osTicket le rend en ROUGE #d00 par défaut → on le repasse en label mono neutre. L'échec reste signalé par le « shake » du loginBox + le champ mot de passe vidé (comportement osTicket conservé). `> h3` cible le titre direct et ÉPARGNE le h3 inline qui enveloppe #reset-link. */ #loginBody #loginBox > h3, #loginBody #login-message { font-family: var(--mono) !important; font-size: 11px !important; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(10, 10, 10, 0.62) !important; margin: 4px 0 22px !important; line-height: 1.5em; } #loginBody div.banner { color: rgba(10, 10, 10, 0.6); } #loginBody div.banner:not(:empty) { margin-bottom: 1.4em; } /* ------------------------------------------------------------- FORMULAIRE -- */ #loginBody form#login { width: 100%; max-width: 300px; margin: 0 auto; } #loginBody fieldset { margin: 0; } #loginBody fieldset input[type="text"], #loginBody fieldset input[type="password"] { display: block; width: 100%; margin-bottom: 12px; background: #fff !important; border: 1px solid var(--line-strong) !important; box-shadow: none !important; color: var(--ink) !important; font-family: 'Archivo', system-ui, sans-serif !important; font-size: 14px !important; padding: 11px 12px !important; } #loginBody input:focus { outline: 2px solid var(--blue) !important; outline-offset: 0; border-color: var(--blue) !important; box-shadow: none !important; } #loginBody ::placeholder { color: #8a8a86; font-style: normal; } #loginBody ::-webkit-input-placeholder { color: #8a8a86; font-style: normal; } /* ------------------------------------------------------------- BOUTON ------ */ #loginBody button[type="submit"], #loginBody input[type="submit"], #loginBody .submit.button { display: block !important; float: none !important; width: 100% !important; height: auto !important; line-height: 1.2 !important; margin-top: 4px; padding: 13px 22px !important; background: var(--blue) !important; background-color: var(--blue) !important; color: #fff !important; border: 1px solid var(--blue) !important; box-shadow: none !important; font-family: var(--mono) !important; font-size: 12px !important; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: none !important; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } #loginBody button[type="submit"]:hover, #loginBody input[type="submit"]:hover, #loginBody .submit.button:hover { background: var(--ink) !important; background-color: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; } #loginBody button[type="submit"] i { margin-right: 0.5em; } /* Pendant l'ajax de connexion, osTicket met le bouton `disabled` (dialogue « Verifying »). Sans état désactivé, le :hover le noircit → paraît cliquable. On fige la couleur et on retire l'affordance tant qu'il est désactivé. */ #loginBody button[type="submit"][disabled], #loginBody input[type="submit"][disabled], #loginBody .submit.button[disabled] { opacity: 0.55 !important; cursor: default !important; background: var(--blue) !important; border-color: var(--blue) !important; } #loginBody button[type="submit"][disabled]:hover, #loginBody input[type="submit"][disabled]:hover, #loginBody .submit.button[disabled]:hover { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; } /* Lien « Forgot My Password » : APPARENCE seulement (lien mono discret). On NE fixe PAS `display` — osTicket le garde `class="hidden"` et ne le révèle qu'après un échec (JS `.show()`). Écraser display via la spécificité de l'id casserait ce comportement (le lien s'afficherait toujours). On respecte donc .hidden. */ #loginBody #reset-link { margin-bottom: 14px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue) !important; border-bottom: 1px solid rgba(37, 99, 235, 0.35); text-decoration: none; } #loginBody #reset-link:hover { color: var(--blue-hover) !important; border-bottom-color: currentColor; } /* Le h3 conteneur du lien (rouge #d00 par défaut) : neutralisé. */ #loginBody form#login h3 { color: inherit !important; margin: 0; } /* ------------------------------------------ AUTH EXTERNE (SSO futur) ------- */ /* Boutons SSO/OAuth (apparaissent si un backend est configuré). Alignés marque par anticipation (N1 SSO OIDC prévu). */ /* Deux branches de rendu osTicket : (1) provider AVEC logo image → a.external-sign-in > img.sign-in-image ; (2) provider SANS image → .external- auth-box/-icon/-name. On habille les DEUX. L'anchor porte le cadre marque. */ #loginBody a.external-sign-in { display: block; text-decoration: none; border: 1px solid var(--ink) !important; background: #fff !important; color: var(--ink) !important; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 14px; margin: 8px auto 0; max-width: 300px; } #loginBody a.external-sign-in:hover { background: var(--ink) !important; color: #fff !important; } #loginBody img.sign-in-image { filter: grayscale(1); max-height: 22px; display: inline-block; vertical-align: middle; } #loginBody .external-auth-box { border: 0 !important; background: none !important; } #loginBody .external-auth-icon { border-right: 1px solid var(--line) !important; color: inherit; } #loginBody .external-auth-name { color: inherit; font-family: var(--mono); } /* ------------------------------------------------ COPYRIGHT / ATTRIBUTION -- */ /* #company : la pastille sombre osTicket → texte mono discret sur le papier. */ #loginBody #company { bottom: -36px; } #loginBody #company .content { background: none !important; box-shadow: none !important; text-shadow: none !important; color: rgba(10, 10, 10, 0.55) !important; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0; } /* #poweredBy : la pastille sombre à ombres → attribution grise discrète (GPL). */ #loginBody #poweredBy { background: none !important; background-color: transparent !important; box-shadow: none !important; text-shadow: none !important; color: rgba(10, 10, 10, 0.4) !important; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; filter: grayscale(1); opacity: 0.6; } #loginBody #poweredBy:hover { opacity: 0.9; } #loginBody #poweredBy .osticket-logo { filter: grayscale(1) !important; -webkit-filter: grayscale(1) !important; } /* --------------------------------------------------- DIALOGUE « Verifying » */ #loginBody #loading.dialog { background: var(--paper) !important; border: 1px solid var(--ink) !important; box-shadow: none !important; color: var(--ink) !important; } #loginBody #loading h1 { color: var(--ink) !important; } /* ----------------------------------------------------------- RESPONSIVE ---- */ @media (max-width: 460px) { #loginBody #loginBox { width: calc(100% - 28px) !important; max-width: 380px; /* left/margin-left SANS !important : sinon ils écrasent le `left` inline animé par jQuery-UI `.effect('shake')` → pas de secousse sur échec en mobile. La spécificité (#loginBody #loginBox) suffit à battre la base login.css. */ left: 50%; margin-left: 0; transform: translateX(-50%); padding: 32px 22px 34px !important; top: 7% !important; } #loginBody #company { width: calc(100% - 28px) !important; left: 50% !important; margin-left: 0 !important; transform: translateX(-50%); } #loginBody #logo a::before { font-size: 28px; } }