body.task-login { --gs-bg: #f3f3f3; --gs-card: #ffffff; --gs-text: #212529; --gs-muted: #707070; --gs-muted-2: #9a9a9a; --gs-border: #dfdfdf; --gs-input-border: #ced4da; --gs-accent: #0d6efd; --gs-accent-hover: #0b5ed7; --gs-sans: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; --gs-ease: cubic-bezier(0.16, 1, 0.3, 1); --gs-radius-lg: 20px; --gs-radius: 12px; } @media (prefers-color-scheme: dark) { body.task-login { --gs-bg: #1a1a1a; --gs-card: #242424; --gs-text: #e8e8e8; --gs-muted: #a0a0a0; --gs-muted-2: #757575; --gs-border: #3a3a3a; --gs-input-border: #444; } } html.dark-mode body.task-login { --gs-bg: #1a1a1a; --gs-card: #242424; --gs-text: #e8e8e8; --gs-muted: #a0a0a0; --gs-muted-2: #757575; --gs-border: #3a3a3a; --gs-input-border: #444; } body.task-login { background: var(--gs-bg) !important; font-family: var(--gs-sans) !important; font-size: 16px; color: var(--gs-text); } /* Scale everything up a bit on very large monitors - fixed px sizing otherwise stays the same regardless of screen size, which reads as too small on a 2500px+ display. Targets (scoped to when the login page's own body class is present, via :has so it can't leak into the authenticated webmail UI, which never loads this stylesheet anyway but keeping the selector self-documenting): rem below is relative to the root element's font-size, not body's own. */ @media (min-width: 1921px) { html:has(body.task-login) { font-size: 18px; } } @media (min-width: 2560px) { html:has(body.task-login) { font-size: 20px; } } /* elastic's table/td elements inside #login-form (built for a side-by-side label+input settings-page layout, notably td.title{width:7em}) don't fully neutralize under our stacked layout and were throwing off horizontal centering - reset them all so #login-form's own padding is the only source of spacing. */ body.task-login #login-form table, body.task-login #login-form tbody, body.task-login #login-form tr, body.task-login #login-form td { display: block !important; width: auto !important; padding: 0 !important; margin: 0 !important; } @keyframes gsFadeSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.task-login *, body.task-login *::before, body.task-login *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Elastic sets #layout-content to display:block with fixed top:Xvh offsets on #logo/#login-form for the login task - that only looks centered at one particular viewport height. #layout already fills the full viewport height (100%), so turning #layout-content into a centered flex column gives true vertical centering on any screen size, matching /recover/. */ body.task-login #layout-content { background: transparent !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 16px; } /* The default envelope icon doesn't represent the brand at all, and tinting it with a color filter turned it into an illegible blob - replaced with a plain text wordmark instead, matching the /recover/ pages' h1 style. As a ::before on the (now flex) #layout-content it participates in the centered flex column as a normal item, instead of being absolutely positioned. */ body.task-login #logo { display: none; } body.task-login #layout-content::before { content: 'goned mail'; font-family: var(--gs-sans); font-weight: 600; font-size: 23px; color: var(--gs-text); margin-bottom: 18px; animation: gsFadeSlideUp 0.5s var(--gs-ease) both; } /* Soft glow behind the logo mark, top-left of the viewport. */ body.task-login::before { content: ''; position: fixed; top: -100px; left: -100px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(13, 110, 253, 0.22), transparent 70%); pointer-events: none; z-index: 1; } /* The goned.studio logo mark, top-left corner. Its own fill is a fixed dark color (not currentColor), so it's inverted in dark mode to stay visible against a dark background. */ body.task-login::after { content: ''; position: fixed; top: 28px; left: 28px; width: 72px; height: 44px; background-image: url('logo.svg'); background-size: contain; background-repeat: no-repeat; background-position: left center; z-index: 2; animation: gsFadeSlideUp 0.5s var(--gs-ease) both; } @media (prefers-color-scheme: dark) { body.task-login::after { filter: invert(1) brightness(1.8); } } html.dark-mode body.task-login::after { filter: invert(1) brightness(1.8); } body.task-login #login-form { position: relative; top: 0; margin: 0; width: 400px; max-width: 100%; background: var(--gs-card); border: 1px solid var(--gs-border); border-radius: var(--gs-radius-lg); padding: 28px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); animation: gsFadeSlideUp 0.5s var(--gs-ease) 0.08s both; /* #layout-content sets text-align:center (elastic's own login-task rule) which was inherited all the way down to the labels, centering "Utilizator"/"Parolă" above left-aligned inputs - inconsistent with /recover/'s plain left-aligned labels. Reset to left here; the handful of things that should stay centered (button text, forgot-password link, support line) declare it explicitly below. */ text-align: left; } body.task-login #login-form .title label { display: block; font-family: var(--gs-sans); font-weight: 400; font-size: 0.85rem; color: var(--gs-text); margin-bottom: 6px; } /* Elastic's own JS wraps each input in an icon box (input-group-prepend) with square corners that clashed with the rounded inputs below - simplest fix consistent with /recover/'s plain inputs is to drop the icon boxes entirely rather than fight Bootstrap's input-group styling. */ body.task-login .input-group-prepend { display: none; } body.task-login .input-group .form-control { width: 100% !important; } body.task-login .form-control { background: var(--gs-card) !important; color: var(--gs-text) !important; border: 1px solid var(--gs-input-border) !important; border-radius: var(--gs-radius) !important; font-family: var(--gs-sans); font-size: 1rem !important; padding: 9px 12px !important; margin-bottom: 14px !important; transition: border-color .2s var(--gs-ease), box-shadow .2s var(--gs-ease), transform .2s var(--gs-ease); } body.task-login .form-control:focus { border-color: #86b7fe !important; box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important; transform: translateY(-1px); } body.task-login .button.mainaction { display: block; width: 100%; text-align: center; text-transform: none !important; background: var(--gs-accent) !important; border-color: var(--gs-accent) !important; border-radius: var(--gs-radius) !important; font-family: var(--gs-sans); font-weight: 400; font-size: 1rem !important; padding: 9px 12px !important; transition: background .2s var(--gs-ease), border-color .2s var(--gs-ease), transform .2s var(--gs-ease); } body.task-login .button.mainaction:hover { background: var(--gs-accent-hover) !important; border-color: var(--gs-accent-hover) !important; } body.task-login .button.mainaction:active { transform: scale(0.98); } body.task-login .forgot-password-link { display: block; text-align: center; margin-top: 12px; font-size: 0.9rem; color: var(--gs-muted); text-decoration: none; transition: color .2s var(--gs-ease); } body.task-login .forgot-password-link:hover { color: var(--gs-accent); } body.task-login .support-contact { display: block; text-align: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--gs-border); font-size: 0.82rem; color: var(--gs-muted-2); line-height: 1.6; } body.task-login .support-contact a { color: var(--gs-muted); font-weight: 500; } body.task-login .support-contact a:hover { color: var(--gs-accent); } body.task-login #login-footer { display: none; } body.task-login .lang-toggle-wrap { margin: 0 0 4px !important; } body.task-login .lang-switch-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; } body.task-login .lang-switch-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; color: var(--gs-muted-2); transition: color .3s var(--gs-ease); user-select: none; } body.task-login .lang-switch-label.active { color: var(--gs-text); } body.task-login .lang-switch { position: relative; display: inline-block; width: 40px; height: 22px; background: var(--gs-border); border-radius: 999px; flex-shrink: 0; transition: background .3s var(--gs-ease); } body.task-login .lang-switch.is-en { background: var(--gs-accent); } body.task-login .lang-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform .3s var(--gs-ease); } body.task-login .lang-switch.is-en .lang-switch-knob { transform: translateX(18px); }