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

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