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

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