/* Shared styling for the standalone, non-logged-in pages: login.aspx, reset-password.aspx, lsn_maintain.aspx. login.aspx is the reference design - keep all three in sync when tweaking the base styling (cards, fields, buttons, alerts). The login-image/loginstyle-* customization below is shared by login.aspx and reset-password.aspx only - lsn_maintain.aspx deliberately does not use it (it can render mid-database-upgrade, so it avoids any settings-driven/DB-dependent lookup). */ * { box-sizing: border-box; } body { font-family: 'Segoe UI', Calibri, Arial, sans-serif; background: #eef1f5; margin: 0; color: #333; } .login-wrap { max-width: 380px; margin: 7% auto; padding: 0 12px; } .login-wrap.login-wrap-wide { max-width: 620px; } .login-card { background: #fff; border: 1px solid #e2e6ea; border-radius: 6px; padding: 30px; box-shadow: 0 2px 12px rgba(0,0,0,.07); } .login-header { text-align: center; margin-bottom: 20px; } .login-header img { max-height: 64px; max-width: 100%; } .login-header h3 { margin: 0; color: #2c3e50; } .login-title { text-align: center; margin: 0 0 18px; color: #2c3e50; font-size: 18px; } .login-error { display: block; color: #a94442; background: #f2dede; border: 1px solid #ebccd1; padding: 9px 11px; border-radius: 4px; margin-bottom: 14px; font-size: 13px; } .login-info { display: block; color: #31708f; background: #d9edf7; border: 1px solid #bce8f1; padding: 9px 11px; border-radius: 4px; margin-bottom: 14px; font-size: 13px; } .login-success { display: block; color: #3c763d; background: #dff0d8; border: 1px solid #d6e9c6; padding: 9px 11px; border-radius: 4px; margin-bottom: 14px; font-size: 13px; } .login-field { margin-bottom: 13px; } .login-field input[type=text], .login-field input[type=password] { width: 100%; padding: 9px 11px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; } .login-field label { font-weight: normal; display: block; margin-bottom: 4px; } .login-remember { font-size: 13px; color: #555; margin-bottom: 6px; } .login-btn { width: 100%; padding: 10px; background: #3d6cb3; color: #fff; border: 0; border-radius: 4px; font-size: 15px; cursor: pointer; } .login-btn:hover { background: #345c98; } .login-link { font-size: 12px; } .login-footer { text-align: center; color: #8a94a6; font-size: 11px; margin-top: 16px; line-height: 1.7; } .login-footer .lic-status { color: #6b7688; font-weight: 600; } .login-status-row { text-align: center; font-size: 13px; color: #555; margin: 14px 0; } .login-status-row img { vertical-align: -6px; margin-right: 6px; } .icon-size-16 { height: 16px; width: 16px; } label { font-weight: normal; } /* ========================================================================== Login image layout options (login.aspx + reset-password.aspx) - 4 alternates driven by a body class (Settings > Appearance > Login Page > "Login Page Style", applied server-side in login.aspx.vb's ApplyAppearance() / reset-password.aspx.vb's ApplyLoginPageStyle()). The image URLs come in as CSS custom properties set inline on : --login-image (Settings > Appearance > "Login Image") and --login-vertical-image ("Login Vertical Image"). --login-image drives loginstyle-split's photo panel and loginstyle-hero's full backdrop, since that's the setting installs actually populate with a real photo; --login-vertical-image drives loginstyle-bg's faded card image, and is optional ("leave blank to hide" per its Settings description). Base rules below keep every new element inert when no loginstyle-* class is present, so lsn_maintain.aspx (same stylesheet, no loginstyle class, no .login-card-bg/.login-image-panel markup - deliberately not settings-driven, see the header comment at the top of this file) is unaffected. ========================================================================== */ .login-card { position: relative; overflow: hidden; } .login-card-bg, .login-image-panel { display: none; } /* --- Option 1: image faded into the card background --- */ body.loginstyle-bg .login-card-bg { display: block; position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 36%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,.8) 58%, #fff 80%), var(--login-vertical-image, none); background-repeat: no-repeat; background-position: center; background-size: auto, 260px auto; } body.loginstyle-bg .login-card-fields { position: relative; z-index: 1; } /* --- Option 2: image panel to the left, form to the right --- */ body.loginstyle-split .login-wrap { max-width: 760px; } body.loginstyle-split .login-card { display: flex; align-items: stretch; padding: 0; } body.loginstyle-split .login-image-panel { display: block; position: relative; flex: 0 0 55%; min-height: 440px; } body.loginstyle-split .login-image-panel-bg { position: absolute; inset: 0; background-image: var(--login-image, linear-gradient(160deg, #3d6cb3, #23345c)); background-size: cover; background-position: center; } body.loginstyle-split .login-image-panel-logo { display: none; } body.loginstyle-split .login-card-fields { flex: 1 1 auto; padding: 34px 36px; } /* --- Option 3: full-bleed blurred hero backdrop + glass card --- */ body.loginstyle-hero { background: #1a2540; } body.loginstyle-hero::before { content: ''; position: fixed; inset: -40px; background-image: var(--login-image, linear-gradient(135deg, #2c3e50, #4a69bd)); background-size: cover; background-position: center; filter: blur(5px) brightness(.55) saturate(1.3); z-index: 0; } body.loginstyle-hero .login-wrap, body.loginstyle-hero-sharp .login-wrap { position: relative; z-index: 1; } body.loginstyle-hero .login-card, body.loginstyle-hero-sharp .login-card { background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.4); } body.loginstyle-hero .login-footer, body.loginstyle-hero-sharp .login-footer { color: rgba(255,255,255,.8); } body.loginstyle-hero .login-footer .lic-status, body.loginstyle-hero-sharp .login-footer .lic-status { color: rgba(255,255,255,.65); } /* --- Option 4: full-bleed SHARP (unblurred) hero backdrop + glass card --- */ body.loginstyle-hero-sharp { background: #1a2540; } body.loginstyle-hero-sharp::before { content: ''; position: fixed; inset: 0; background-image: var(--login-image, linear-gradient(135deg, #2c3e50, #4a69bd)); background-size: cover; background-position: center; filter: brightness(.75) saturate(1.1); z-index: 0; }