/*
* Pharmver overrides for Element Web's auth screens.
*
* Element ships a stock photograph behind /#/login and every pre-login dialog
* (including "Verify this device"). There is no config option for it, so this
* stylesheet is injected into index.html by the element service's copy step.
*
* The replacement is the same navy plus-grid used by the 360 sign-in panel,
* built entirely from CSS gradients. No photograph means nothing to host,
* nothing to 404, no licensing question, and it matches the rest of the brand
* instead of being a stock landscape of Iceland.
*/
:root {
--pv-navy: #0d1526;
--pv-navy-2: #111a2e;
--pv-blue: #5b93f5;
--pv-line: rgba(148, 163, 184, .10);
}
/* --- background ----------------------------------------------------------- */
/* Several Element versions name this element differently, so all the known
selectors are covered rather than betting on one. */
.mx_AuthPage,
.mx_Welcome.mx_AuthPage,
.mx_MatrixChat_splash {
background-color: var(--pv-navy) !important;
background-image:
radial-gradient(circle at 50% 42%, rgba(91, 147, 245, .13) 0%, transparent 62%),
linear-gradient(var(--pv-line) 1px, transparent 1px),
linear-gradient(90deg, var(--pv-line) 1px, transparent 1px) !important;
background-size: 100% 100%, 34px 34px, 34px 34px !important;
background-position: center, center, center !important;
background-repeat: no-repeat, repeat, repeat !important;
}
/* --- the sign-in card ----------------------------------------------------- */
/* No max-width and no overflow:hidden here. Element reuses this class for more
than the login form - the post-login "Verify this device" screen is the same
modal - and constraining it clipped that dialog's buttons off the right edge.
Only cosmetic properties are safe to set at this level. */
.mx_AuthPage_modal {
border-radius: 16px !important;
box-shadow: 0 24px 60px rgba(0, 0, 0, .42) !important;
border: 1px solid rgba(148, 163, 184, .14) !important;
}
/* The logo column is gone entirely. The wordmark is already on the welcome
screen immediately before this one, and a second copy in a narrow side column
only ever looked like an afterthought. The card is now just the form. */
.mx_AuthPage_modal .mx_AuthHeader,
.mx_AuthHeader {
display: none !important;
}
/* Scoped to the auth page so it cannot reach the verify-device screen. */
.mx_AuthPage .mx_AuthBody {
width: 100% !important;
max-width: 420px !important;
border-radius: 16px !important;
padding: 34px 36px 30px !important;
}
/* Language is chosen before this point, and repeating the control inside the
form crowds it. It stays available in Settings after sign-in. */
.mx_AuthPage .mx_LanguageDropdown,
.mx_AuthBody .mx_LanguageDropdown,
.mx_AuthHeader .mx_LanguageDropdown {
display: none !important;
}
/* --- primary action ------------------------------------------------------- */
/* Stock is near-black, which reads as a system button rather than ours. */
.mx_AuthBody .mx_Login_submit,
.mx_AuthBody [type="submit"].mx_AccessibleButton_kind_primary {
background-color: var(--pv-blue) !important;
border-color: var(--pv-blue) !important;
color: #fff !important;
}
.mx_AuthBody .mx_Login_submit:hover,
.mx_AuthBody [type="submit"].mx_AccessibleButton_kind_primary:hover {
background-color: #4a83ec !important;
border-color: #4a83ec !important;
}
/* --- the SSO button ------------------------------------------------------- */
/* Match the welcome screen exactly: Microsoft's own convention of a light
surface, thin border, the four-square mark and dark text. Element renders a
flat grey block with no icon, which gives no signal about whose identity is
about to be used.
*
* The mark is an inline data: URI rather than a file, so it cannot 404 and needs
* no extra request. */
.mx_SSOButtons .mx_SSOButton,
.mx_SSOButtons .mx_AccessibleButton {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
background: #fff !important;
color: #1e293b !important;
border: 1px solid #d4dae3 !important;
border-radius: 8px !important;
font-weight: 600 !important;
padding: 12px 18px !important;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.mx_SSOButtons .mx_SSOButton:hover,
.mx_SSOButtons .mx_AccessibleButton:hover {
background: #fafbfc !important;
border-color: #b9c2ce !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, .07) !important;
}
.mx_SSOButtons .mx_SSOButton::before,
.mx_SSOButtons .mx_AccessibleButton::before {
content: "";
width: 18px;
height: 18px;
flex: 0 0 18px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* Element also renders its own icon slot; hide it so there is only one mark. */
.mx_SSOButtons .mx_SSOButton_icon {
display: none !important;
}
/* --- primary Sign in button gets a lock, matching the SSO button's mark ----- */
/* Same 18px box and 12px gap as the Microsoft button so the two sit on one
visual system rather than looking like one was an afterthought. */
.mx_AuthBody .mx_Login_submit {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
}
.mx_AuthBody .mx_Login_submit::before {
content: "";
width: 16px;
height: 16px;
flex: 0 0 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
}
/* --- footer --------------------------------------------------------------- */
.mx_AuthFooter {
color: rgba(226, 232, 240, .62) !important;
}
.mx_AuthFooter a {
color: rgba(226, 232, 240, .62) !important;
}
.mx_AuthFooter a:hover {
color: #fff !important;
}