resources/src/mediawiki.special.userlogin.signup.styles/signup.less
@import 'mediawiki.skin.variables.less';
.mw-ui-container {
/* Benefits column CSS to the right (if it fits) of the form, otherwise below. */
display: flex;
flex-wrap: wrap;
column-gap: 100px;
row-gap: 50px;
}
.mw-createacct-benefits-heading {
font-family: @font-family-serif;
font-size: 1.5em;
font-weight: bold;
margin: 0.25em 0;
padding-top: 0.5em;
}
/* stylelint-disable-next-line selector-class-pattern */
.mw-number-text.icon-edits {
/* @embed */
background: url( images/icon-edits.png ) no-repeat left center;
}
/* stylelint-disable-next-line selector-class-pattern */
.mw-number-text.icon-pages {
/* @embed */
background: url( images/icon-pages.png ) no-repeat left center;
}
/* stylelint-disable-next-line selector-class-pattern */
.mw-number-text.icon-contributors {
/* @embed */
background: url( images/icon-contributors.png ) no-repeat left center;
}
/*
* Special font for numbers in benefits, same as Vector's `@content-heading-font-family`.
*/
.mw-body-content .mw-number-text span {
color: @color-base;
margin: 0;
padding: 0;
font-family: @font-family-serif;
font-weight: normal;
font-size: 2.2em;
line-height: 1.2;
text-align: center;
display: block;
}
/* Contains a “headlined” number and explanatory text, with space for an icon */
.mw-number-text {
display: block;
font-size: 1.2em;
color: @color-subtle;
margin-top: 1em;
/* 80px wide icon plus "margin" */
padding: 0 0 0 95px;
/* Matches max icon height, ensures icon emblem is visible */
min-height: 75px;
text-align: center;
}
.mw-heading-subheading-wrapper {
max-width: 480px;
text-align: center;
h2 {
text-align: center;
}
.mw-benefit-subheading {
line-height: 1.4em;
color: #000;
}
}
.mw-benefit-list-wrapper {
margin-top: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-left: 21px;
.mw-benefit-item {
display: flex;
gap: 16px;
span,
p {
margin: 0;
}
span {
display: block;
min-width: 20px;
height: 20px;
padding: 0.5px 0 0.5px 0;
margin-top: 0.5px;
}
p {
line-height: 1.25;
letter-spacing: normal;
color: #54595d;
}
}
}