/* * Aurora Theme — Login page & Variant Switcher * Adds a full-bleed background image (with a colored overlay) and a * glassmorphism login card. The gets the `aurora-login` class from * aurora_theme.js (so we never touch Frappe's login template / auth flow). * * Per-variant background images are injected by JS via --aurora-login-bg. * Forest / Midnight fall back to a rich gradient (see aurora_theme.js). */ /* ---------- Login page full-bleed background ---------- */ body.aurora-login { min-height: 100vh; position: relative; background-color: #0F172A; background-image: var(--aurora-login-bg, url(/assets/aurora_theme/images/login-bg.png)); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* Color overlay so the card stays readable on any image */ body.aurora-login::before { content: ""; position: fixed; inset: 0; z-index: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--aurora-primary) 55%, rgba(15, 23, 42, 0.85)) 0%, color-mix(in srgb, var(--aurora-secondary) 45%, rgba(15, 23, 42, 0.9)) 100%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Lift the actual login card above the overlay */ body.aurora-login .login-content, body.aurora-login form.form-login, body.aurora-login .page-card { position: relative; z-index: 1; } /* Glassmorphism card */ body.aurora-login .login-content { background: rgba(255, 255, 255, 0.82) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.55) !important; border-radius: var(--aurora-radius-xl, 22px) !important; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35) !important; padding: 32px 36px !important; overflow: hidden; } /* subtle brand glow at the top of the glass card */ body.aurora-login .login-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--aurora-gradient); } /* Dark mode login card */ [data-theme="dark"] body.aurora-login .login-content { background: rgba(15, 23, 42, 0.72) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #E2E8F0; } body.aurora-login .login-content .form-control { background: rgba(255, 255, 255, 0.7) !important; border: 1px solid rgba(15, 23, 42, 0.12) !important; } [data-theme="dark"] body.aurora-login .login-content .form-control { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #E2E8F0; } body.aurora-login .login-content .btn-login, body.aurora-login .login-content button[type="submit"] { background: var(--aurora-gradient) !important; border: none !important; font-weight: 700 !important; border-radius: var(--aurora-radius-sm, 8px) !important; box-shadow: 0 6px 18px color-mix(in srgb, var(--aurora-primary) 40%, transparent) !important; transition: transform 0.15s ease, box-shadow 0.2s ease; } body.aurora-login .login-content .btn-login:hover, body.aurora-login .login-content button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--aurora-primary) 50%, transparent) !important; } /* ---------- Variant Switcher (Desk) — collapsed into the top navbar ---------- */ /* Trigger button: sits inside the Desk navbar, never overlaps page content */ .aurora-variant-trigger { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; background: transparent; color: var(--text-muted); border-radius: 8px; cursor: pointer; margin: 0 3px; transition: background 0.15s ease, color 0.15s ease; } .aurora-variant-trigger:hover { background: var(--control-bg); color: var(--text-color); } /* Fallback: a small button pinned to the top-right, just below the page-tab bar. Always visible, clear of the bottom-right pagination, and clear of the left sidebar. Used only if the navbar anchor can't be found — the trigger is ALWAYS inserted into the DOM, so it is never orphaned. */ .aurora-trigger-floating { position: fixed; top: 92px; right: 12px; z-index: 9990; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: var(--aurora-shadow-lg); color: var(--text-color); } /* Dropdown panel — hidden until the trigger is clicked */ .aurora-variant-switcher { position: fixed; z-index: 10000; display: none; align-items: center; gap: 8px; padding: 8px 10px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 999px; box-shadow: var(--aurora-shadow-lg); user-select: none; } .aurora-variant-switcher.open { display: flex; } .aurora-variant-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.15s ease, border-color 0.15s ease; outline: none; } .aurora-variant-dot:hover { transform: scale(1.15); } .aurora-variant-dot.active { border-color: var(--text-color); box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--border-color); } .aurora-variant-aurora { background: linear-gradient(135deg, #4F46E5, #7C3AED); } .aurora-variant-sunset { background: linear-gradient(135deg, #F97316, #EC4899); } .aurora-variant-forest { background: linear-gradient(135deg, #059669, #0EA5E9); } .aurora-variant-midnight { background: linear-gradient(135deg, #6366F1, #22D3EE); } @media (max-width: 768px) { .aurora-trigger-floating { top: auto; bottom: 14px; left: 14px; transform: none; border-left: 1px solid var(--border-color); border-radius: 10px; } }