resources/src/mediawiki.special.userlogin.signup.styles/signup.less

   1 @import 'mediawiki.skin.variables.less';
   2
   3 /* Flexbox gap not supported by all browsers, and warns here for some reason */
   4 /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   5 .mw-ui-container {
   6         /* Benefits column CSS to the right (if it fits) of the form, otherwise below. */
   7         display: flex;
   8         flex-wrap: wrap;
   9         gap: 50px 100px;
  10 }
  11
  12 .mw-createacct-benefits-heading {
  13         font-family: @font-family-serif;
  14         font-size: 1.5em;
  15         font-weight: bold;
  16         margin: 0.25em 0;
  17         padding-top: 0.5em;
  18 }
  19
  20 /* stylelint-disable-next-line selector-class-pattern */
  21 .mw-number-text.icon-edits {
  22         /* @embed */
  23         background: url( images/icon-edits.png ) no-repeat left center;
  24 }
  25
  26 /* stylelint-disable-next-line selector-class-pattern */
  27 .mw-number-text.icon-pages {
  28         /* @embed */
  29         background: url( images/icon-pages.png ) no-repeat left center;
  30 }
  31
  32 /* stylelint-disable-next-line selector-class-pattern */
  33 .mw-number-text.icon-contributors {
  34         /* @embed */
  35         background: url( images/icon-contributors.png ) no-repeat left center;
  36 }
  37
  38 /*
  39  * Special font for numbers in benefits, same as Vector's `@content-heading-font-family`.
  40  */
  41 .mw-body-content .mw-number-text span {
  42         color: @color-base;
  43         margin: 0;
  44         padding: 0;
  45         font-family: @font-family-serif;
  46         font-weight: normal;
  47         font-size: 2.2em;
  48         line-height: 1.2;
  49         text-align: center;
  50         display: block;
  51 }
  52
  53 /* Contains a “headlined” number and explanatory text, with space for an icon */
  54 .mw-number-text {
  55         display: block;
  56         font-size: 1.2em;
  57         color: @color-subtle;
  58         margin-top: 1em;
  59         /* 80px wide icon plus "margin" */
  60         padding: 0 0 0 95px;
  61         /* Matches max icon height, ensures icon emblem is visible */
  62         min-height: 75px;
  63         text-align: center;
  64 }
  65
  66 .mw-heading-subheading-wrapper {
  67         max-width: 480px;
  68         text-align: center;
  69
  70         h2 {
  71                 text-align: center;
  72         }
  73
  74         .mw-benefit-subheading {
  75                 line-height: 1.4em;
  76                 color: #000;
  77         }
  78 }
  79
  80 /* Flexbox gap not supported by all browsers */
  81 /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  82 .mw-benefit-list-wrapper {
  83         margin-top: 8px;
  84         display: flex;
  85         flex-direction: column;
  86         align-items: flex-start;
  87         gap: 16px;
  88         padding-left: 21px;
  89
  90         /* Flexbox gap not supported by all browsers */
  91         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  92         .mw-benefit-item {
  93                 display: flex;
  94                 gap: 16px;
  95
  96                 span,
  97                 p {
  98                         margin: 0;
  99                 }
 100
 101                 span {
 102                         display: block;
 103                         min-width: 20px;
 104                         height: 20px;
 105                         padding: 0.5px 0 0.5px 0;
 106                         margin-top: 0.5px;
 107                 }
 108
 109                 p {
 110                         line-height: 1.25;
 111                         letter-spacing: normal;
 112                         color: #54595d;
 113                 }
 114         }
 115 }