mediawiki-skins-MinervaNeue/skinStyles/mediawiki.special.userlogin.common.styles/minerva.less
jdlrobson 685387220f Message box styles for Minerva come from core
Just as before styles for message boxes will be
kept off the critical path of most page views and
loaded on special pages, old revisions and action= URIs,
however unlike before the CSS will come from the definition
in core.

It must also be loaded in JavaScript for compatibility
with the use of warnings in JavaScript, for example 
MobileFrontend overlays.

This change will allow us to remove the
mobile.messageBox.styles module in MobileFrontend
I8b6bdfceaf33b9527dbe6790d2a39e335fb692b2

Bug: T233160
Change-Id: I7d8d1d34621c36c26ec03a3773d4d1e67bd14f2e
2021-04-12 21:45:53 +00:00

151 lines
3.2 KiB
Plaintext

/* stylelint-disable selector-max-id */
@import '../../minerva.less/minerva.variables.less';
@import '../../minerva.less/minerva.mixins.less';
// Hide the texts inside these selectors because they push the login form below the fold
// `#user-button` serves no purpose on the login screen as you are not logged in so cannot use.
#userloginprompt,
#languagelinks,
#user-button {
display: none;
}
.mw-ui-container {
.mw-ui-vform {
margin: auto;
width: auto;
max-width: @contentMaxWidthTablet;
}
.mw-form-related-link-container {
a {
padding-bottom: 12px;
display: block;
}
}
.fancycaptcha-image-container {
display: inherit;
}
// reason for account creation is not so important on mobile - it should be obvious through the workflows
.mw-createacct-benefits-container {
display: none;
}
}
#mw-mf-login,
#mw-mf-accountcreate,
#userloginForm {
.watermark {
text-align: center;
// FIXME: Should we set the height here?
height: 72px;
margin-bottom: @headingMargin;
img {
// Important to override default max-width and height auto combo
height: 72px !important;
}
}
}
// Hide keep me logged in checkbox on mobile. It will be marked as checked by default.
#userloginForm {
.mw-userlogin-rememberme {
display: none;
}
}
.client-nojs {
// Show keep me logged in checkbox for grade C users on mobile so that they can
// check the checkbox (we use JS to check this and that won't run on grade C bmode)
#userloginForm {
.mw-userlogin-rememberme {
display: block;
margin: 10px 0 11px;
}
}
}
@media all and ( min-width: @width-breakpoint-tablet ) {
// If tablet mode, show the keep me logged in checkbox
#userloginForm {
.mw-userlogin-rememberme {
display: block;
}
}
}
// FIXME: Some of these rules should actually be mobile first, only hiding inputs needs to be wrapped in a media query
@media all and ( max-width: @width-breakpoint-tablet ) {
@margin: 12px;
#userloginForm {
// tips are not useful, hide help link, benefits (#wpReason)
// are obvious through the workflows,
// real name in account creation is not so important on mobile
.prefsectiontip, .htmlform-tip,
#mw-userlogin-help, .mw-userlogin-help,
#wpReason,
#wpRealName {
display: none !important;
}
}
// do not show langage link list
// FIXME: After the language list is mobile friendly, it can be re-enabled - Bug T110403
#languagelinks {
display: none;
}
// account creation
#userlogin2 {
.mw-ui-checkbox {
margin: @margin 0;
}
}
.mw-ui-vform-field {
text-align: center;
}
// Make the inputs look connected in mobile mode
.mw-ui-input {
&#wpEmail,
&.loginPassword {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -1px;
}
}
.mw-ui-vform {
margin: auto;
.mw-ui-input {
padding: 0.8em 0.5em;
}
// hide on mobile only media queries (placeholder support)
.mw-ui-vform-field {
margin-bottom: 0;
.mw-ui-button {
margin: @margin 0;
}
// user can rely on placeholder attributes in fields media query support should mean placeholder support
// but don't hide any checkbox labels
> label {
display: none;
}
}
}
#mw-createaccount-another {
margin-top: @margin;
}
}