/* ===================================================================== Qriib auth screens — sign in, sign up, password reset. Loaded by mjara_brand/www/login.html, which shadows Frappe's own login template. It is deliberately the only stylesheet that owns these screens: frappe's login.bundle.css is still loaded first for the shared form/field plumbing, everything visual below overrides it. Light and dark come out of one token block: :root -> light prefers-color-scheme: dark, unless pinned -> dark [data-theme="dark"] -> dark, explicit data-theme is stamped on by mjara_spa.js from the desk theme and, before first paint, by the inline script in the template head. ===================================================================== */ :root { --qriib-auth-bg: #f7f7fb; --qriib-auth-card: #ffffff; --qriib-auth-card-border: #ebe8f1; --qriib-auth-card-border-accent: rgba(157, 72, 231, 0.68); --qriib-auth-card-border-soft: rgba(157, 72, 231, 0.18); --qriib-auth-card-shadow: none; --qriib-auth-title: #17171c; --qriib-auth-muted: #6c6c7a; --qriib-auth-label: #35353f; --qriib-auth-input-bg: #ffffff; --qriib-auth-input-border: #e1e1e8; --qriib-auth-input-text: #17171c; --qriib-auth-placeholder: #a7a7b3; --qriib-auth-brand: var(--primary, #9d48e7); --qriib-auth-brand-hover: #8933d4; --qriib-auth-brand-text: #ffffff; --qriib-auth-focus-ring: rgba(157, 72, 231, 0.18); --qriib-auth-danger: #c0392b; --qriib-auth-danger-bg: rgba(192, 57, 43, 0.08); --qriib-auth-success: #1a7f5a; --qriib-auth-success-bg: rgba(26, 127, 90, 0.08); --qriib-auth-subtle-bg: #f2f2f5; --qriib-auth-subtle-hover: #e9e9ef; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --qriib-auth-bg: #0f0e11; --qriib-auth-card: #17161a; --qriib-auth-card-border: rgba(255, 255, 255, 0.09); --qriib-auth-card-border-accent: rgba(172, 99, 238, 0.68); --qriib-auth-card-border-soft: rgba(172, 99, 238, 0.18); --qriib-auth-card-shadow: none; --qriib-auth-title: #f4f4f6; --qriib-auth-muted: #9c9ca8; --qriib-auth-label: #c9c9d2; --qriib-auth-input-bg: #201f24; --qriib-auth-input-border: rgba(255, 255, 255, 0.11); --qriib-auth-input-text: #f4f4f6; --qriib-auth-placeholder: #74747f; --qriib-auth-brand: var(--primary, #9d48e7); --qriib-auth-brand-hover: #ac63ee; --qriib-auth-brand-text: #ffffff; --qriib-auth-focus-ring: rgba(157, 72, 231, 0.32); --qriib-auth-danger: #ff8080; --qriib-auth-danger-bg: rgba(255, 128, 128, 0.12); --qriib-auth-success: #5fd4a5; --qriib-auth-success-bg: rgba(95, 212, 165, 0.12); --qriib-auth-subtle-bg: #242329; --qriib-auth-subtle-hover: #2d2c33; } } :root[data-theme="dark"] { --qriib-auth-bg: #0f0e11; --qriib-auth-card: #17161a; --qriib-auth-card-border: rgba(255, 255, 255, 0.09); --qriib-auth-card-border-accent: rgba(172, 99, 238, 0.68); --qriib-auth-card-border-soft: rgba(172, 99, 238, 0.18); --qriib-auth-card-shadow: none; --qriib-auth-title: #f4f4f6; --qriib-auth-muted: #9c9ca8; --qriib-auth-label: #c9c9d2; --qriib-auth-input-bg: #201f24; --qriib-auth-input-border: rgba(255, 255, 255, 0.11); --qriib-auth-input-text: #f4f4f6; --qriib-auth-placeholder: #74747f; --qriib-auth-brand: var(--primary, #9d48e7); --qriib-auth-brand-hover: #ac63ee; --qriib-auth-brand-text: #ffffff; --qriib-auth-focus-ring: rgba(157, 72, 231, 0.32); --qriib-auth-danger: #ff8080; --qriib-auth-danger-bg: rgba(255, 128, 128, 0.12); --qriib-auth-success: #5fd4a5; --qriib-auth-success-bg: rgba(95, 212, 165, 0.12); --qriib-auth-subtle-bg: #242329; --qriib-auth-subtle-hover: #2d2c33; } /* --------------------------------------------------------------------- Section visibility. login.js routes between these on the URL hash and shows one with jQuery .toggle(), which writes an inline display — so the starting state has to come from here, not from frappe's login bundle. --------------------------------------------------------------------- */ .qriib-auth .for-forgot, .qriib-auth .for-login-with-email-link, .qriib-auth .for-signup, .qriib-auth .for-email-login { display: none; } /* --------------------------------------------------------------------- Page shell. The tab bar is 42px and mjara_tabs.css pads the body by it, so the card centres in what is left rather than in the whole viewport. --------------------------------------------------------------------- */ body.qriib-auth-page { background-color: var(--qriib-auth-bg); color: var(--qriib-auth-title); } body.qriib-auth-page .page-content-wrapper { min-height: 0; padding-top: 0; } body.qriib-auth-page .page-breadcrumbs, body.qriib-auth-page .page-header-wrapper, body.qriib-auth-page .page-footer, body.qriib-auth-page .web-footer { display: none; } body.qriib-auth-page main.container { max-width: none; padding: 0; } body.qriib-auth-page .page_content { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 42px - var(--navbar-height, 50px)); padding: 24px 16px; box-sizing: border-box; } /* --------------------------------------------------------------------- Card --------------------------------------------------------------------- */ .qriib-auth .login-content.page-card { width: 100%; max-width: 360px; margin: 0 auto; padding: 32px; gap: 24px; box-sizing: border-box; background: linear-gradient(var(--qriib-auth-card), var(--qriib-auth-card)) padding-box, linear-gradient( 180deg, var(--qriib-auth-card-border-accent) 0%, var(--qriib-auth-card-border-soft) 46%, var(--qriib-auth-card-border) 100% ) border-box; border: 1px solid transparent; border-radius: 12px; box-shadow: var(--qriib-auth-card-shadow); } .qriib-auth .login-content.page-card.invalid-login { animation: qriib-auth-shake 0.4s ease; } @keyframes qriib-auth-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .qriib-auth .page-card-head { display: block; text-align: center; margin: 0; padding: 0; border: none; } .qriib-auth .page-card-head h4 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--qriib-auth-title); } .qriib-auth .page-card-subtitle { margin: 0; font-size: 12px; line-height: 1.5; color: var(--qriib-auth-muted); } /* --------------------------------------------------------------------- Fields --------------------------------------------------------------------- */ .qriib-auth form { display: flex; flex-direction: column; gap: 20px; margin: 0; } .qriib-auth .page-card-body { display: flex; flex-direction: column; gap: 18px; } .qriib-auth .form-group { display: flex; flex-direction: column; gap: 8px; margin: 0; align-items: stretch; } .qriib-auth .form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .qriib-auth .form-label { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--qriib-auth-label); } .qriib-auth .form-control { width: 100%; height: 36px; padding: 9px 12px; font-size: 13px; line-height: 1.5; color: var(--qriib-auth-input-text); background-color: var(--qriib-auth-input-bg); border: 1px solid var(--qriib-auth-input-border); border-radius: 6px; box-shadow: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .qriib-auth .form-control::placeholder { color: var(--qriib-auth-placeholder); opacity: 1; } .qriib-auth .form-control:focus { outline: none; border-color: var(--qriib-auth-brand); box-shadow: 0 0 0 2px var(--qriib-auth-focus-ring); } .qriib-auth .form-group.invalid .form-control { border-color: var(--qriib-auth-danger); } .qriib-auth .form-group.invalid .form-control:focus { box-shadow: 0 0 0 2px var(--qriib-auth-danger-bg); } /* Password reveal. Logical inset so RTL flips it with the text. */ .qriib-auth .password-field { position: relative; display: block; } .qriib-auth .password-field .form-control { padding-inline-end: 38px; } .qriib-auth .password-field .form-control::-ms-reveal { display: none; } .qriib-auth .toggle-password { position: absolute; fill: currentColor; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); color: var(--qriib-auth-muted); cursor: pointer; } .qriib-auth .toggle-password:hover { color: var(--qriib-auth-title); } .qriib-auth .field-error { margin: 0; font-size: 11px; line-height: 1.4; color: var(--qriib-auth-danger); } .qriib-auth .field-error:empty { display: none; } .qriib-auth .form-group.invalid .field-error { display: block; } .qriib-auth .forgot-password-message { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--qriib-auth-brand); text-decoration: none; } .qriib-auth .forgot-password-message:hover, .qriib-auth .forgot-password-message:focus { color: var(--qriib-auth-brand-hover); text-decoration: underline; } /* --------------------------------------------------------------------- Banners --------------------------------------------------------------------- */ .qriib-auth .login-error-banner { display: none; align-items: flex-start; gap: 6px; padding: 8px 9px; font-size: 9px; line-height: 1.45; color: var(--qriib-auth-danger); background-color: var(--qriib-auth-danger-bg); border-radius: 6px; } .qriib-auth .login-success-banner { display: none; align-items: flex-start; gap: 6px; padding: 8px 9px; font-size: 9px; line-height: 1.45; color: var(--qriib-auth-success); background-color: var(--qriib-auth-success-bg); border-radius: 6px; } .qriib-auth .login-error-banner svg, .qriib-auth .login-success-banner svg { flex: 0 0 auto; margin-top: 1px; fill: currentColor; } /* --------------------------------------------------------------------- Actions --------------------------------------------------------------------- */ .qriib-auth .page-card-actions { display: flex; flex-direction: column; gap: 12px; margin: 0; } .qriib-auth .btn-login, .qriib-auth .btn-signup, .qriib-auth .btn-ldap-login { display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; padding: 9px 12px; font-size: 13px; font-weight: 500; line-height: 1.4; border-radius: 6px; } .qriib-auth .btn-login:focus-visible, .qriib-auth .btn-signup:focus-visible, .qriib-auth .btn-ldap-login:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--qriib-auth-focus-ring); } .qriib-auth .btn-signup:disabled { opacity: 0.45; pointer-events: none; } /* Secondary actions — email-link sign in, social providers. */ .qriib-auth .btn-login-option { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 36px; padding: 9px 12px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--qriib-auth-label); background: var(--qriib-auth-subtle-bg); border: 1px solid var(--qriib-auth-card-border); border-radius: 6px; box-shadow: none; } .qriib-auth .btn-login-option:hover, .qriib-auth .btn-login-option:focus { color: var(--qriib-auth-title); background: var(--qriib-auth-subtle-hover); border-color: var(--qriib-auth-card-border); } .qriib-auth .btn-login-option img, .qriib-auth .btn-login-option svg { margin: 0; } .qriib-auth .social-logins { margin: 0; } .qriib-auth .social-login-buttons { display: flex; flex-direction: column; gap: 10px; margin: 0; } .qriib-auth .login-button-wrapper { min-width: 0; padding: 0; margin: 0; } .qriib-auth .resend-link { display: none; align-items: center; gap: 4px; margin: 0; font-size: 9px; color: var(--qriib-auth-muted); } .qriib-auth .resend-link a { color: var(--qriib-auth-brand); } /* --------------------------------------------------------------------- Footer line --------------------------------------------------------------------- */ .qriib-auth .sign-up-message { margin: 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--qriib-auth-muted); } .qriib-auth .sign-up-message a, .qriib-auth .sign-up-message .contact-admin { color: var(--qriib-auth-brand); font-weight: 500; text-decoration: none; } .qriib-auth .sign-up-message a:hover, .qriib-auth .sign-up-message a:focus { color: var(--qriib-auth-brand-hover); text-decoration: underline; } .qriib-auth .signup-disabled-message { display: flex; flex-direction: column; gap: 16px; text-align: center; } .qriib-auth .signup-disabled-message .text-muted { margin: 0; font-size: 12px; color: var(--qriib-auth-muted); } /* --------------------------------------------------------------------- Two-factor step. login.js empties .login-content and injects its own markup there, so it inherits the card but needs its own field rules. --------------------------------------------------------------------- */ .qriib-auth #twofactor_div .form-verify { display: flex; flex-direction: column; gap: 16px; } .qriib-auth #twofactor_div .text-muted { padding-bottom: 0 !important; font-size: 12px; color: var(--qriib-auth-muted); } .qriib-auth #twofactor_div #login_token { width: 100%; height: 36px; padding: 9px 12px; font-size: 13px; color: var(--qriib-auth-input-text); background-color: var(--qriib-auth-input-bg); border: 1px solid var(--qriib-auth-input-border); border-radius: 6px; } .qriib-auth #twofactor_div #verify_token { margin-top: 0 !important; height: 36px; font-size: 13px; font-weight: 500; border-radius: 6px; } /* --------------------------------------------------------------------- Small screens — the card becomes the page. --------------------------------------------------------------------- */ @media (max-width: 480px) { body.qriib-auth-page .page_content { padding: 0; align-items: stretch; } .qriib-auth .login-content.page-card { max-width: 100%; min-height: calc(100vh - 42px); justify-content: center; padding: 48px 28px; border: none; border-radius: 0; box-shadow: none; } }