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                 clear: none;
  84                 float: none;
  85         }
  86
  87         > figcaption {
  88                 display: table-caption;
  89                 caption-side: bottom;
  90                 /* In mw-core the font-size is duplicated, 94% in thumbiner
  91                  * and again 94% in thumbcaption. 88.4% for font size of the
  92                  * caption results in the same behavior. */
  93                 font-size: 88.4%;
  94                 line-height: 1.4em;
  95                 text-align: left;
  96
  97                 border: 1px solid #c8ccd1;
  98                 border-top: 0;
  99
 100                 /* taken from .thumbcaption, plus .thumbinner */
 101                 padding: 0 6px 6px 6px;
 102                 background-color: #f8f9fa;
 103
 104                 table {
 105                         /* reset caption side for tables inside figcaptions */
 106                         caption-side: top;
 107                 }
 108         }
 109 }
 110
 111 figure[typeof~='mw:Image/Thumb'],
 112 figure[typeof~='mw:Video/Thumb'],
 113 figure[typeof~='mw:Audio/Thumb'],
 114 figure[typeof~='mw:Image/Frame'],
 115 figure[typeof~='mw:Video/Frame'],
 116 figure[typeof~='mw:Audio/Frame'] {
 117         display: table;
 118         overflow: auto;
 119         text-align: center;
 120         border: 1px solid #c8ccd1;
 121         border-bottom: 0; // No border to caption
 122         border-collapse: collapse;
 123         background-color: #f8f9fa;
 124         // Default to right alignment. This is needed since Parsoid only specifies the
 125         // alignment class when the alignment is explicitly set.
 126         margin: 0.5em 0 1.3em 1.4em;
 127         clear: right;
 128         float: right;
 129
 130         > *:first-child {
 131                 > img,
 132                 > video {
 133                         border: 1px solid #c8ccd1;
 134                         margin: 3px;
 135                         background: #fff;
 136                 }
 137         }
 138 }
 139
 140 /* Same as img.thumbborder in content.css */
 141 .mw-image-border > *:first-child {
 142         > img,
 143         > video {
 144                 border: 1px solid #eaecf0;
 145         }
 146 }
 147
 148 /* Hide the caption for frameless and plain floated images */
 149 figure[typeof~='mw:Image/Frameless'],
 150 figure[typeof~='mw:Video/Frameless'],
 151 figure[typeof~='mw:Audio/Frameless'],
 152 figure[typeof~='mw:Image'],
 153 figure[typeof~='mw:Video'],
 154 figure[typeof~='mw:Audio'] {
 155         > figcaption {
 156                 display: none;
 157         }
 158 }