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