resources/src/mediawiki.skinning/elements.less

   1 /**
   2  * MediaWiki style sheet for general styles on basic content elements.
   3  * IMPORTANT: All rules in this file should only apply to __tag__ selectors (T255717).
   4  * Styling of non-tag selectors is permitted for backwards compatibility, in only two cases:
   5  * 1) There is an equivalent tag with the same name in HTML4 (e.g. `.small and <small>)
   6  * 2) A class matches a tag name and is prefixed with `mw-` e.g. `code` and `.mw-code`
   7  *
   8  * Styles for basic elements: links, headings, lists, ….
   9  *
  10  * This style sheet is used by the Monobook and Vector skins.
  11  */
  12
  13 @import 'mediawiki.mixins.less';
  14 @import 'mediawiki.skin.variables.less';
  15
  16 /* stylelint-disable selector-class-pattern */
  17
  18 /* Links */
  19 a {
  20         text-decoration: none;
  21         color: @color-link;
  22         background: none;
  23
  24         &:not( [ href ] ) {
  25                 cursor: pointer; /* Always cursor:pointer even without href */
  26         }
  27
  28         &:visited {
  29                 color: @color-link--visited;
  30         }
  31
  32         &:active {
  33                 color: @color-link--active;
  34         }
  35
  36         &:hover,
  37         &:focus {
  38                 text-decoration: underline;
  39         }
  40 }
  41
  42 /* Inline Elements */
  43 img {
  44         border: 0; /* FIXME: Remove after adding 'normalize.less' added to all 'elements.less' calling skins. */
  45         vertical-align: middle;
  46 }
  47
  48 hr {
  49         // Use `@border-width-base` instead of `1px` to match the default border width.
  50         height: @border-width-base;
  51         // Use `@border-color-base` as the element represents a border.
  52         background-color: @border-color-base;
  53         border: 0;
  54         margin: 0.2em 0;
  55 }
  56
  57 /* Structural Elements */
  58 .mw-heading,
  59 h1,
  60 h2,
  61 h3,
  62 h4,
  63 h5,
  64 h6 {
  65         color: @color-emphasized;
  66         font-weight: bold;
  67         margin: 0;
  68         padding-top: 0.5em;
  69         padding-bottom: 0.17em;
  70         // Create a "block formatting context" so that the bottom border on headings
  71         // don't overlap floated content like infoboxes or thumbnails.
  72         // In addition, word-break:break-word forces heading to span multiple lines.
  73         // Together, these two rules are a substitute for overflow: hidden.
  74         // https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root
  75         /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  76         display: flow-root;
  77         word-break: break-word;
  78 }
  79
  80 .mw-heading1,
  81 h1,
  82 .mw-heading2,
  83 h2 {
  84         margin-bottom: 0.6em;
  85         border-bottom: @border-width-base @border-style-base @border-color-base;
  86 }
  87
  88 .mw-heading3,
  89 h3,
  90 .mw-heading4,
  91 h4,
  92 .mw-heading5,
  93 h5 {
  94         margin-bottom: 0.3em;
  95 }
  96
  97 .mw-heading1,
  98 h1 {
  99         font-size: 188%;
 100         font-weight: normal;
 101 }
 102
 103 .mw-heading2,
 104 h2 {
 105         font-size: 150%;
 106         font-weight: normal;
 107 }
 108
 109 .mw-heading3,
 110 h3 {
 111         font-size: 128%;
 112 }
 113
 114 .mw-heading4,
 115 h4 {
 116         font-size: 116%;
 117 }
 118
 119 .mw-heading5,
 120 h5 {
 121         font-size: 108%;
 122 }
 123
 124 .mw-heading6,
 125 h6 {
 126         font-size: 100%;
 127 }
 128
 129 // Override all styles above for `hN` nested inside `.mw-heading`, as used on wikitext pages.
 130 // Also override the most common skin-defined styles to make the migration after T13555 easier.
 131 .mw-heading {
 132         h1,
 133         h2,
 134         h3,
 135         h4,
 136         h5,
 137         h6 {
 138                 // Must be inline to allow `.mw-editsection` to be shown on the same line
 139                 display: inline;
 140                 border: 0;
 141                 margin: 0;
 142                 padding: 0;
 143                 color: inherit;
 144                 font: inherit;
 145         }
 146 }
 147
 148 p {
 149         margin: 0.4em 0 0.5em 0;
 150
 151         img {
 152                 margin: 0;
 153         }
 154 }
 155
 156 ul {
 157         margin-top: 0.3em;
 158         margin-bottom: 0;
 159         .margin-inline( 1.6em, 0 );
 160         padding: 0;
 161 }
 162
 163 ol {
 164         margin-top: 0.3em;
 165         margin-bottom: 0;
 166         .margin-inline( 3.2em, 0 );
 167         padding: 0;
 168         list-style-image: none;
 169 }
 170
 171 dd {
 172         margin-bottom: 0.1em;
 173         .margin-inline( 1.6em, 0 );
 174 }
 175
 176 li {
 177         margin-bottom: 0.1em;
 178 }
 179
 180 dt {
 181         font-weight: bold;
 182         margin-bottom: 0.1em;
 183 }
 184
 185 dl {
 186         margin-top: 0.2em;
 187         margin-bottom: 0.5em;
 188 }
 189
 190 /* FIXME: Duplicated ruleset if skins using ResourceLoaderSkinModule
 191 load the features `normalize` and `elements`. */
 192 pre,
 193 code,
 194 tt,
 195 kbd,
 196 samp,
 197 .mw-code {
 198         /* Support: Blink, Gecko, Webkit; enable unified font sizes for monospace font. T176636 */
 199         font-family: monospace, monospace;
 200 }
 201
 202 pre,
 203 code,
 204 .mw-code {
 205         background-color: @background-color-neutral-subtle;
 206         color: @color-emphasized;
 207         border: @border-width-base @border-style-base @border-color-muted;
 208 }
 209
 210 code {
 211         border-radius: @border-radius-base;
 212         padding: 1px 4px;
 213 }
 214
 215 pre,
 216 .mw-code {
 217         padding: 1em;
 218         /* Wrap lines in overflow. T2260, T103780 */
 219         white-space: pre-wrap;
 220         /* Create a new block formatting context */
 221         overflow-x: hidden;
 222         /* Break really long words when they overflow to the next line */
 223         word-wrap: break-word;
 224 }
 225
 226 /* Tables */
 227 table {
 228         font-size: 100%;
 229 }
 230
 231 /* Forms */
 232 fieldset {
 233         border: @border-width-base @border-style-base #2a4b8d;
 234         margin: 1em 0 1em 0;
 235         padding: 0 1em 1em;
 236 }
 237
 238 legend {
 239         padding: 0.5em;
 240 }
 241
 242 form {
 243         border: 0;
 244         margin: 0;
 245 }
 246
 247 textarea {
 248         display: block;
 249         box-sizing: @box-sizing-base;
 250         width: 100%;
 251         /* Support: Firefox */
 252         /* Border rule required to override system appearance on Linux. T13641. */
 253         border: @border-width-base @border-style-base @border-color-base;
 254         padding: 0.1em;
 255 }
 256
 257 /* Emulate Center */
 258 .center {
 259         width: 100%;
 260         text-align: center;
 261 }
 262
 263 *.center * {
 264         margin-left: auto;
 265         margin-right: auto;
 266 }
 267
 268 /* Small for tables and similar */
 269 .small {
 270         font-size: 94%;
 271
 272         table& {
 273                 font-size: 100%;
 274         }
 275 }