of label/input rows, and elastic's ui.js then
* rewrites each row in the browser into a Bootstrap `.input-group` with an icon
* span. Both shapes are handled here, so the fields look right whether or not that
* JS has run.
*
* Three faults were reported and each is addressed:
* 1. the icon block and the input were separate controls of different heights,
* with a visible seam. Fixed by making the .input-group ITSELF the bordered,
* rounded, filled control and stripping the border/background/radius from
* everything inside it — one control, one outline, one focus ring in the org
* accent (via :focus-within, so focusing the input lights the whole control).
* 2. a dead vertical band between the logo and the tagline/button. See "THE
* OFFENDER" below for what it actually was — NOT a min-height, fixed height
* or flex spacer, which is why the first search for those came up empty.
* 3. a stock Roundcube background image showing below the card. No such file
* exists in the skin tree, so rather than guess where it comes from, EVERY
* login surface is explicitly repainted and background-image is forced to
* none. Nothing stock can show through.
* ═══════════════════════════════════════════════════════════════════════════ */
:root {
--loom-ground: #1A1820;
--loom-ground-2: #131118;
--loom-card: #1F1D26;
--loom-border: #2E2A33;
--loom-input-bg: #1A1820;
--loom-input-border: #3A3440;
--loom-text: #EFE7DC;
--loom-muted: #6E6672;
--loom-accent: #C2513A;
--loom-accent-rgb: 194, 81, 58;
}
/* ── 3. no stock imagery, anywhere on the login page ────────────────────────── */
html, body.task-login {
background: linear-gradient(180deg, var(--loom-ground) 0%, var(--loom-ground-2) 100%) fixed !important;
background-size: cover !important;
background-image: linear-gradient(180deg, var(--loom-ground) 0%, var(--loom-ground-2) 100%) !important;
}
body.task-login #layout,
body.task-login #layout > .content,
body.task-login #layout-menu,
body.task-login #layout-sidebar,
body.task-login #layout-list,
body.task-login .watermark {
background-image: none !important;
background-color: transparent !important;
}
/* ── 2. the stack: logo -> tagline -> SSO -> "or" -> fields -> LOGIN ────────── */
body.task-login #layout-content {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
background: var(--loom-card) !important;
}
body.task-login #logo {
order: 1;
position: static !important;
top: auto !important; left: auto !important; right: auto !important;
display: block !important;
margin: 0 auto 1rem !important;
max-height: 44px !important;
width: auto !important;
opacity: 1 !important;
}
body.task-login #login-form { order: 2; margin: 0 !important; }
/* THE OFFENDER, killed at the source. Elastic ships:
* .task-login #logo { display:inline-block; position:relative; top:16vh; max-height:100px }
* #login-form { margin:0 auto; top:20vh; width:95%; max-width:320px; position:relative }
* Both are position:relative with a viewport-sized `top`, which DISPLACES each element
* downward while leaving its layout box where it was — so the card grows by 16vh + 20vh
* of nothing. That is the "giant vertical void", and it is not a min-height, a fixed
* height or a flex spacer, which is why looking for those found nothing. Overriding
* #logo alone (the first attempt) left the form's own 20vh in place and the band stayed.
* Both are returned to static flow here. No negative margins are used anywhere. */
body.task-login #login-form {
position: static !important;
top: auto !important;
left: auto !important;
margin: 0 auto !important;
width: 100% !important;
max-width: none !important;
}
/* The card hugs its content: #layout-content is flex:6 inside #layout, which would
otherwise stretch it to the viewport. */
body.task-login #layout-content {
flex: 0 0 auto !important;
align-self: flex-start !important;
height: auto !important;
max-width: 440px !important;
margin: 8vh auto 0 !important;
padding: 2.2em 1.75em 1.6em !important;
}
/* The login table becomes a plain vertical stack so no table geometry can reintroduce a
gap. NOTE the deliberate absence of a blanket `td` rule: elastic's ui.js hides the label
cell inline once it has moved the label text into the input's placeholder, and a
`display: block !important` on every td OVERRIDES that inline style — which is exactly
how a visible "Username" label ended up sitting above a field already placeholdered
"Username". Only td.input is forced to block; td.title is left to elastic, and is
additionally made screen-reader-only below so it can never become visible again. */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td.input { display: block !important; width: 100% !important; }
body.task-login #login-form table { margin: 0 !important; border-spacing: 0 !important; }
/* Labels stay in the DOM for screen readers and for the input's `for=` association, but
carry no visible box. The placeholder and the in-field icon are the visible affordance.
This is the standard sr-only pattern, not display:none, which would remove them from
the accessibility tree entirely. */
body.task-login #login-form td.title,
body.task-login #login-form td.title label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* The target stack, with the spacing the owner specified:
logo -> 12px -> tagline -> 24px -> SSO -> divider -> Username -> 12px -> Password
-> LOGIN -> footer. Every gap below is a margin on content; none is a reserved band. */
body.task-login #logo { margin: 0 auto 12px !important; }
body.task-login #login-form::before { margin-bottom: 24px !important; }
body.task-login .loom-sso { margin: 0 !important; }
body.task-login .loom-sso-or { margin: 10px 0 18px !important; }
/* The inter-field gap must NOT live on td.input: elastic makes that very | the
input-group, so its padding sits INSIDE the rounded border and leaves 12px of dead
space at the bottom of each control (measured: a 49px field in a 63px box). The gap
belongs to the ROW. */
body.task-login #login-form td.input { padding: 0 !important; }
body.task-login #login-form tr { margin: 0 0 12px !important; }
body.task-login p.formbuttons { margin: 4px 0 0 !important; }
body.task-login #login-footer { margin-top: 18px !important; padding-top: 14px !important; }
/* ── 1. one unified, comfortable field control ──────────────────────────────── */
/* NOTE THE td.input.input-group SELECTOR. Elastic's ui.js does not WRAP the input in a
* new element — it adds `input-group input-group-lg` to the | that already holds it.
* So the layout section's `td.input { display: block }` and this rule are fighting over
* the SAME element, and `td.input` wins on specificity no matter which is declared later.
* That flattened the flex row: the icon span took a full line at 387px wide and the input
* collapsed to Bootstrap's `width: 1%` — 15px — on the line beneath it. Measured in a real
* headless Chrome, not guessed. Naming both classes here outranks it. */
body.task-login #login-form td.input.input-group,
body.task-login #login-form .input-group {
display: flex !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
background: var(--loom-input-bg) !important;
border: 1px solid var(--loom-input-border) !important;
border-radius: 10px !important;
overflow: hidden;
}
body.task-login #login-form .input-group:focus-within {
border-color: var(--loom-accent) !important;
box-shadow: 0 0 0 2px rgba(var(--loom-accent-rgb), .35) !important;
}
/* everything INSIDE the group is a bare part of one control, never its own box */
body.task-login #login-form .input-group > *,
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-append,
body.task-login #login-form .input-group-text {
border: 0 !important;
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
body.task-login #login-form .input-group .input-group-text,
body.task-login #login-form .input-group > .icon,
body.task-login #login-form .input-group-prepend .icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
align-self: stretch !important;
min-width: 44px;
height: auto !important;
padding: 0 !important;
color: var(--loom-muted) !important;
}
/* the input itself: comfortable padding, no second outline, full height of the group */
body.task-login #login-form input.form-control,
body.task-login #login-form .form-control {
height: auto !important;
min-height: 0 !important;
padding: 13px 15px !important;
line-height: 1.3 !important;
background: var(--loom-input-bg) !important;
color: var(--loom-text) !important;
border: 1px solid var(--loom-input-border) !important;
border-radius: 10px !important;
box-shadow: none !important;
flex: 1 1 auto;
}
/* inside a group the input contributes no border of its own — the group owns it */
body.task-login #login-form .input-group input.form-control,
body.task-login #login-form .input-group .form-control {
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
padding-left: 0 !important;
/* Bootstrap gives .input-group > .form-control `width: 1%`, which is what actually
produced the 15px-wide field once the row was flexing again. */
width: auto !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
/* the icon sits INSIDE the control and provides the left gutter, so it must not also
stretch to the full row width */
body.task-login #login-form .input-group > .input-group-prepend,
body.task-login #login-form .input-group > .input-group-append {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
}
body.task-login #login-form .form-control:focus {
border-color: var(--loom-accent) !important;
box-shadow: 0 0 0 2px rgba(var(--loom-accent-rgb), .35) !important;
outline: 0 !important;
}
body.task-login #login-form .input-group .form-control:focus {
box-shadow: none !important; /* the ring belongs to the group, not the input */
}
body.task-login #rcmloginsubmit,
body.task-login .formbuttons button.mainaction {
padding: 13px 16px !important;
border-radius: 10px !important;
}
/* No tagline sits between the logo and the button in this organization's card, so the
24px the spec puts under the tagline is carried here instead. vaultmotive and
tidyandmore already get it from their own ::before block. */
body.task-login .loom-sso { margin-top: 12px !important; }
/* The other three cards carry a 1px hairline and a radius from their own theme sections.
The family stylesheet never had a card at all (it styled a .box-inner that this skin's
login template does not emit), so the same treatment is given here. */
body.task-login #layout-content {
border: 1px solid var(--loom-border) !important;
border-radius: 14px;
box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
/* The family stylesheet never styled the password submit button, so it rendered in
* elastic's stock BLUE next to an ember SSO button — caught by a screenshot of the live
* page, not by any status code. Both actions are ember now, and the SSO button is given
* the same full-width block shape its three siblings use so the four cards match. */
body.task-login #rcmloginsubmit,
body.task-login .formbuttons button.mainaction {
width: 100%;
background: var(--sw-ember) !important;
border-color: var(--sw-ember) !important;
color: var(--sw-cloud) !important;
border-radius: 10px !important;
font-weight: 700 !important;
}
body.task-login #rcmloginsubmit:hover,
body.task-login .formbuttons button.mainaction:hover {
background: var(--sw-ember-bright) !important;
border-color: var(--sw-ember-bright) !important;
}
body.task-login .loom-sso-btn {
display: block !important;
box-sizing: border-box;
width: 100%;
padding: .8em 1.2em !important;
border-radius: 10px !important;
font-weight: 700 !important;
text-align: center;
}
|