/** * login.css * ---------- * Soft UI Dashboard Tailwind-style split sign-in screen: a light page * background, a floating rounded-2xl card holding the form on the * left, and a skewed gradient panel on the right (Soft UI's * "curved image" side panel, recreated here with a gradient + soft * pattern instead of a stock photo). * * Colors are the app's own brand palette (#0052B2 / #002569 - see * config.php / assets/css/soft-ui-theme.css) so the login page reads * as part of the same system as the rest of the dashboard. * * font-family reads the same --font-family-sans-serif custom property * login.php sets in - see Configuration > System Setting > * "JAG" > System Font. */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap'); body.login-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8f9fa; font-family: 'Open Sans', var(--font-family-sans-serif, sans-serif); padding: 1.5rem; } .login-card { width: 100%; max-width: 900px; background: #fff; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.08); display: flex; min-height: 520px; } /* ---- Left: the sign-in form ---- */ .login-left { flex: 1 1 50%; padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; } /* ---- Right: decorative skewed gradient panel (Soft UI's "curved image" side, recreated without a stock photo) ---- */ .login-right { flex: 1 1 50%; position: relative; display: none; background: linear-gradient(310deg, var(--su-primary-dark, #013844) 0%, var(--su-primary, #017B8F) 60%, var(--su-primary-light, #1f9bf0) 100%); overflow: hidden; } .login-right::before { content: ""; position: absolute; inset: -10% -10% -10% 20%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 55%), radial-gradient(circle at 70% 70%, rgba(255,255,255,.10), transparent 50%); transform: skewX(-8deg); } .login-right-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 3rem; color: #fff; } .login-right-content i { font-size: 2.5rem; margin-bottom: 1rem; opacity: .9; } .login-right-content h2 { font-weight: 800; font-size: 1.6rem; margin-bottom: .5rem; } .login-right-content p { font-size: .9rem; opacity: .85; line-height: 1.5; max-width: 22rem; } @media (min-width: 768px) { .login-right { display: block; } } .login-right-content-gif { align-items: center; justify-content: center; } .login-animation-gif { display: block; width: 100%; max-width: 260px; height: auto; /* The gif is pre-colored to the app's default theme color at the pixel level (only the dark monitor body's hue was retargeted; the green checkmark/progress bar were left untouched) - see assets/img/login-animation.gif. Framing it in a white card (like a floating screenshot) keeps it visually separate from the gradient panel behind it regardless of exact color match. */ background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); } .login-logo-circle { width: 60px; height: 60px; flex: 0 0 60px; margin: 0 0 1.25rem; border-radius: .75rem; background: linear-gradient(310deg, var(--su-primary-dark, #013844) 0%, var(--su-primary, #017B8F) 100%); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1.5rem; box-shadow: 0 4px 20px 0 rgba(var(--su-primary-rgb, 1, 123, 143),.14), 0 7px 10px -5px rgba(var(--su-primary-rgb, 1, 123, 143),.4); } .login-logo-circle-has-image { background: transparent; box-shadow: none; padding: 0; } .login-logo-img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .login-title { text-align: left; color: #344767; font-weight: 800; letter-spacing: -0.02rem; margin: 0 0 .25rem; font-size: 1.6rem; } .login-subtitle { text-align: left; color: #67748e; margin: 0 0 1.75rem; font-size: .88rem; } .login-info-box { display: flex; gap: .75rem; background: #eef4fc; border-left: 3px solid var(--su-primary, #017B8F); border-radius: .6rem; padding: .85rem 1rem; margin-top: .5rem; margin-bottom: 1.25rem; } .login-info-box i { color: var(--su-primary, #017B8F); margin-top: .2rem; } .login-info-box strong { display: block; color: #344767; font-size: .9rem; margin-bottom: .15rem; } .login-info-box p { margin: 0; font-size: .82rem; color: #67748e; line-height: 1.35; } .login-form label { font-weight: 700; font-size: .8rem; color: #344767; display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; } .login-form label i { color: var(--su-primary, #017B8F); width: 1rem; text-align: center; } .login-form .form-control { display: block; width: 100%; box-sizing: border-box; font-family: inherit; font-size: .92rem; border-radius: .6rem; padding: .7rem .95rem; margin-bottom: 1.1rem; border: 1px solid #e9ecef; background: #fbfcfe; transition: border-color .15s ease, box-shadow .15s ease; } .login-form .form-control:focus { outline: none; border-color: var(--su-primary, #017B8F); box-shadow: 0 0 0 .15rem rgba(var(--su-primary-rgb, 1, 123, 143), .15); background: #fff; } .password-field-wrap { position: relative; width: 100%; margin-bottom: 1.1rem; } .password-field-wrap .form-control { margin-bottom: 0; padding-right: 2.5rem; } .password-toggle { position: absolute; right: .9rem; top: 0; bottom: 0; display: flex; align-items: center; cursor: pointer; color: #adb5bd; background: none; border: none; padding: 0; } .password-toggle:hover { color: #67748e; } .login-btn { width: 100%; border: none; border-radius: .6rem; padding: .85rem 1rem; font-weight: 700; font-size: .78rem; letter-spacing: .04rem; text-transform: uppercase; color: #fff; background: linear-gradient(310deg, var(--su-primary-dark, #013844) 0%, var(--su-primary, #017B8F) 100%); box-shadow: 0 4px 20px 0 rgba(var(--su-primary-rgb, 1, 123, 143),.14), 0 7px 10px -5px rgba(var(--su-primary-rgb, 1, 123, 143),.4); transition: all .15s ease-in-out; } .login-btn:hover { color: #fff; box-shadow: 0 8px 26px -4px rgba(var(--su-primary-rgb, 1, 123, 143),.5); transform: translateY(-1px); } .login-footnote { text-align: left; color: #8392ab; font-size: .78rem; margin: 1rem 0 0; } .login-footnote i { margin-right: .3rem; } @media (max-width: 767.98px) { .login-card { min-height: 0; } .login-left { padding: 2.25rem 1.75rem; } }