/* ============================================================ Login page styles (user-login.tpl) Scoped to the login screen only. The accent color --acc is injected on per company settings; the fallback below applies when none is set. ============================================================ */ :root { --acc: #014081; --acc-soft: rgba(1, 64, 129, .14); --ink: #12263a; --muted: #718096; --card-bg: #ffffff; } /* ---------- layout ---------- */ .login-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 24px; box-sizing: border-box; } .login-stack { width: 100%; max-width: 400px; display: flex; flex-direction: column; } /* ---------- entrance animation ---------- */ .login-anim { animation: loginFadeUp .55s ease both; } .login-anim--2 { animation-delay: .15s; } .login-anim--3 { animation-delay: .28s; } @keyframes loginFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ---------- company logo (inside card header) ---------- */ .login-logo-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 18px; padding: 16px 22px; margin: 0 auto 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, .18), 0 3px 10px rgba(0, 0, 0, .10); } .login-logo-chip img { max-width: 100%; width: auto; height: auto; max-height: 130px; display: block; } /* ---------- notices (logLast / logexception) ---------- */ .login-notice-wrap { margin-bottom: 14px; } .login-notice { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 12px; padding: 10px 16px; text-align: center; font-size: 14px; backdrop-filter: blur(4px); } /* ---------- card ---------- */ .login-card { background: var(--card-bg); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .32), 0 6px 18px rgba(0, 0, 0, .20); overflow: hidden; } .login-card-head { padding: 24px 26px 18px; text-align: center; background: linear-gradient(180deg, #f7fafc, #ffffff); border-bottom: 1px solid #edf2f7; } .login-card-head h1 { margin: 0; font-size: 21px; font-weight: 700; color: var(--ink); } .login-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); } .login-hint--error { color: #c53030; font-weight: 600; } .login-alert { margin: 12px 0 0; font-size: 13px; font-weight: 500; color: #2b6cb0; background: #ebf4ff; border: 1px solid #bee3f8; border-radius: 9px; padding: 8px 12px; text-align: center; } .login-alert--danger { color: #9b2c2c; background: #fff5f5; border-color: #fed7d7; } .login-card-body { padding: 26px 28px 30px; } /* ---------- form fields ---------- */ .login-field { position: relative; margin-bottom: 16px; } .login-field-icon { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); color: #a0aec0; font-size: 15px; pointer-events: none; line-height: 1; } .login-input { width: 100%; height: 50px; border: 1.5px solid #cfe0ff; border-radius: 11px; background: #e5f1ff; padding: 0 42px; font-size: 15px; color: var(--ink); box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .login-input:hover { border-color: #9fc3ff; } .login-input:focus { outline: none; border-color: #6f9dff; background: #fff; box-shadow: 0 0 0 4px rgba(111, 157, 255, .18); } .login-input--pw { padding-inline-end: 52px; } /* password visibility toggle */ .login-pw-toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: none; background: transparent; color: #a0aec0; font-size: 15px; border-radius: 9px; cursor: pointer; } .login-pw-toggle:hover { color: var(--acc); } .login-pw-toggle:focus { outline: none; } /* ---------- submit button ---------- */ .btn-login { width: 100%; height: 52px; border: none; border-radius: 11px; background: #0b5cad; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px var(--acc-soft); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; display: flex; align-items: center; justify-content: center; gap: 9px; } .btn-login:hover { filter: brightness(1.06); box-shadow: 0 14px 26px var(--acc-soft); } .btn-login:active { transform: translateY(1px) scale(.995); } .btn-login:disabled { opacity: .8; cursor: default; filter: saturate(.85); } /* ---------- footer ---------- */ .login-footer { margin-top: 22px; text-align: center; color: rgba(255, 255, 255, .85); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; } .login-footer a { color: rgba(255, 255, 255, .95); text-decoration: none; } .login-footer img { width: 50px; height: auto; vertical-align: middle; } /* ---------- responsive ---------- */ @media (max-width: 767px) { .login-shell { padding: 24px 14px 18px; justify-content: flex-start; } .login-logo-chip { padding: 12px 16px; } .login-logo-chip img { max-height: 100px; } .login-card-head { padding: 20px 20px 14px; } .login-card-body { padding: 22px 20px 24px; } .login-input { height: 48px; } .btn-login { height: 50px; } .login-field { margin-bottom: 16px; } }