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
 124         &.mw-halign-right {
 125                 /* @noflip */
 126                 margin: 0.5em 0 1.3em 1.4em;
 127         }
 128
 129         > *:first-child {
 130                 > img,
 131                 > video {
 132                         border: 1px solid #c8ccd1;
 133                         background: #fff;
 134                 }
 135         }
 136
 137         > figcaption {
 138                 display: block;
 139                 word-break: break-word;
 140
 141                 /* In mw-core the font-size is duplicated, 94% in thumbiner
 142                  * and again 94% in thumbcaption. 88.4% for font size of the
 143                  * caption results in the same behavior. */
 144                 font-size: 88.4%;
 145                 line-height: 1.4em;
 146                 text-align: left;
 147
 148                 /* taken from .thumbcaption, plus .thumbinner */
 149                 padding: 3px;
 150         }
 151 }
 152
 153 figure[ typeof*='mw:Image/Thumb' ],
 154 figure[ typeof*='mw:Video/Thumb' ],
 155 figure[ typeof*='mw:Audio/Thumb' ] {
 156         > a:after {
 157                 content: '';
 158                 width: 15px;
 159                 height: 11px;
 160                 margin: 3px;
 161                 margin-bottom: 0;
 162
 163                 .mw-content-ltr & {
 164                         /* @noflip */
 165                         float: right;
 166                         /* @noflip */
 167                         background-image: url( images/magnify-clip-ltr.png );
 168                         /* @noflip */
 169                         background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
 170                 }
 171
 172                 .mw-content-rtl & {
 173                         /* @noflip */
 174                         float: left;
 175                         /* @noflip */
 176                         background-image: url( images/magnify-clip-rtl.png );
 177                         /* @noflip */
 178                         background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
 179                 }
 180         }
 181 }
 182
 183 /* Same as img.thumbborder in content.css */
 184 .mw-image-border > *:first-child {
 185         > img,
 186         > video {
 187                 border: 1px solid #eaecf0;
 188         }
 189 }
 190
 191 /**
 192  * Avoid the need to calculate paddings individually
 193  * https://stackoverflow.com/a/7310398
 194  */
 195 .mw-gallery-traditional .gallerybox .thumb {
 196         &:before {
 197                 content: '';
 198                 vertical-align: middle;
 199                 display: inline-block;
 200                 height: 100%;
 201         }
 202
 203         > * {
 204                 vertical-align: middle;
 205                 display: inline-block;
 206         }
 207 }
 208
 209 /**
 210  * Inline media items
 211  */
 212 *:first-child {
 213         > img,
 214         > video {
 215                 .mw-valign-middle > & {
 216                         vertical-align: middle;
 217                 }
 218
 219                 .mw-valign-baseline > & {
 220                         vertical-align: baseline;
 221                 }
 222
 223                 .mw-valign-sub > & {
 224                         vertical-align: sub;
 225                 }
 226
 227                 .mw-valign-super > & {
 228                         vertical-align: super;
 229                 }
 230
 231                 .mw-valign-top > & {
 232                         vertical-align: top;
 233                 }
 234
 235                 .mw-valign-text-top > & {
 236                         vertical-align: text-top;
 237                 }
 238
 239                 .mw-valign-bottom > & {
 240                         vertical-align: bottom;
 241                 }
 242
 243                 .mw-valign-text-bottom > & {
 244                         vertical-align: text-bottom;
 245                 }
 246         }
 247 }