resources/src/mediawiki.skinning/content.parsoid.less

   1 /**
   2  * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
   3  */
   4
   5 /* stylelint-disable selector-class-pattern */
   6
   7 /*
   8  * Auto-numbered external links
   9  * Parsoid renders those as link without content, and lets CSS do the
  10  * counting. This way the counting style can be customized, and counts update
  11  * automatically when content is modified.
  12  */
  13 .mw-parser-output {
  14         counter-reset: mw-numbered-ext-link;
  15 }
  16
  17 .mw-parser-output a[ rel~='mw:ExtLink' ]:empty:after {
  18         content: '[' counter( mw-numbered-ext-link ) ']';
  19         counter-increment: mw-numbered-ext-link;
  20 }
  21
  22 /**
  23  * References
  24  *
  25  * Parser and Extension:Cite output reference numbers for <sup>[1]</sup> for <ref> tags.
  26  *
  27  * Markup:
  28  * Cake is good<sup>[2]</sup>
  29  * The cake is a lie<span class="reference">[1]</span>
  30  *
  31  * Styleguide 1.1.
  32  */
  33 span.reference {
  34         font-size: 80%;
  35         line-height: 1;
  36         vertical-align: super;
  37         unicode-bidi: -moz-isolate;
  38         unicode-bidi: isolate;
  39 }
  40
  41 sup,
  42 sub {
  43         line-height: 1;
  44 }
  45
  46 /**
  47  * Block media items
  48  */
  49 figure[ typeof*='mw:Image' ],
  50 figure[ typeof*='mw:Video' ],
  51 figure[ typeof*='mw:Audio' ] {
  52         margin: 0;
  53
  54         a {
  55                 border: 0;
  56         }
  57
  58         &.mw-halign-right {
  59                 /* @noflip */
  60                 margin: 0 0 0.5em 0.5em;
  61                 /* @noflip */
  62                 clear: right;
  63                 /* @noflip */
  64                 float: right;
  65         }
  66
  67         &.mw-halign-left {
  68                 /* @noflip */
  69                 margin: 0 0.5em 0.5em 0;
  70                 /* @noflip */
  71                 clear: left;
  72                 /* @noflip */
  73                 float: left;
  74         }
  75
  76         &.mw-halign-none {
  77                 margin: 0;
  78                 clear: none;
  79                 float: none;
  80         }
  81
  82         &.mw-halign-center {
  83                 margin: 0 auto 0.5em auto;
  84                 display: table;
  85                 border-collapse: collapse;
  86                 clear: none;
  87                 float: none;
  88         }
  89
  90         /* Hide the caption for frameless and plain floated images */
  91         > figcaption {
  92                 display: none;
  93         }
  94 }
  95
  96 figure[ typeof~='mw:Image/Thumb' ],
  97 figure[ typeof~='mw:Video/Thumb' ],
  98 figure[ typeof~='mw:Audio/Thumb' ],
  99 figure[ typeof~='mw:Image/Frame' ],
 100 figure[ typeof~='mw:Video/Frame' ],
 101 figure[ typeof~='mw:Audio/Frame' ] {
 102         display: table;
 103         text-align: center;
 104         border: 1px solid #c8ccd1;
 105         border-collapse: separate;
 106         border-spacing: 3px;
 107         background-color: #f8f9fa;
 108         width: 1px;  // From https://stackoverflow.com/a/6536025
 109
 110         // Avoid !important
 111         &.mw-halign-center {
 112                 border-collapse: separate;
 113         }
 114
 115         // Default to right alignment. This is needed since Parsoid only specifies the
 116         // alignment class when the alignment is explicitly set.
 117         margin: 0.5em 0 1.3em 1.4em;
 118         clear: right;
 119         float: right;
 120
 121         &.mw-halign-left {
 122                 /* @noflip */
 123                 margin: 0.5em 1.4em 1.3em 0;
 124         }
 125
 126         &.mw-halign-right {
 127                 /* @noflip */
 128                 margin: 0.5em 0 1.3em 1.4em;
 129         }
 130
 131         > *:first-child {
 132                 > img,
 133                 > video {
 134                         border: 1px solid #c8ccd1;
 135                         background: #fff;
 136                 }
 137         }
 138
 139         > figcaption {
 140                 display: block;
 141                 word-break: break-word;
 142
 143                 /* In mw-core the font-size is duplicated, 94% in thumbiner
 144                  * and again 94% in thumbcaption. 88.4% for font size of the
 145                  * caption results in the same behavior. */
 146                 font-size: 88.4%;
 147                 line-height: 1.4em;
 148                 text-align: left;
 149
 150                 /* taken from .thumbcaption, plus .thumbinner */
 151                 padding: 3px;
 152         }
 153 }
 154
 155 figure[ typeof*='mw:Image/Thumb' ],
 156 figure[ typeof*='mw:Video/Thumb' ],
 157 figure[ typeof*='mw:Audio/Thumb' ] {
 158         > a:after {
 159                 content: '';
 160                 width: 15px;
 161                 height: 11px;
 162                 margin: 3px;
 163                 margin-bottom: 0;
 164
 165                 .mw-content-ltr & {
 166                         /* @noflip */
 167                         float: right;
 168                         /* @noflip */
 169                         background-image: url( images/magnify-clip-ltr.png );
 170                         /* @noflip */
 171                         background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
 172                 }
 173
 174                 .mw-content-rtl & {
 175                         /* @noflip */
 176                         float: left;
 177                         /* @noflip */
 178                         background-image: url( images/magnify-clip-rtl.png );
 179                         /* @noflip */
 180                         background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
 181                 }
 182         }
 183 }
 184
 185 /* Same as img.thumbborder in content.css */
 186 .mw-image-border > *:first-child {
 187         > img,
 188         > video {
 189                 border: 1px solid #eaecf0;
 190         }
 191 }
 192
 193 /**
 194  * Avoid the need to calculate paddings individually
 195  * https://stackoverflow.com/a/7310398
 196  */
 197 .mw-gallery-traditional .gallerybox .thumb {
 198         &:before {
 199                 content: '';
 200                 vertical-align: middle;
 201                 display: inline-block;
 202                 height: 100%;
 203         }
 204
 205         > * {
 206                 vertical-align: middle;
 207                 display: inline-block;
 208         }
 209 }
 210
 211 /**
 212  * Inline media items
 213  */
 214 *:first-child {
 215         > img,
 216         > video {
 217                 .mw-valign-middle > & {
 218                         vertical-align: middle;
 219                 }
 220
 221                 .mw-valign-baseline > & {
 222                         vertical-align: baseline;
 223                 }
 224
 225                 .mw-valign-sub > & {
 226                         vertical-align: sub;
 227                 }
 228
 229                 .mw-valign-super > & {
 230                         vertical-align: super;
 231                 }
 232
 233                 .mw-valign-top > & {
 234                         vertical-align: top;
 235                 }
 236
 237                 .mw-valign-text-top > & {
 238                         vertical-align: text-top;
 239                 }
 240
 241                 .mw-valign-bottom > & {
 242                         vertical-align: bottom;
 243                 }
 244
 245                 .mw-valign-text-bottom > & {
 246                         vertical-align: text-bottom;
 247                 }
 248         }
 249 }