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-NumberedExtLink;
  15 }
  16
  17 .mw-body-content a[rel~="mw:ExtLink"]:empty:after {
  18         content: "[" counter(mw-NumberedExtLink) "]";
  19         counter-increment: mw-NumberedExtLink;
  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: smaller;
  35         line-height: 1;
  36         vertical-align: super;
  37 }
  38
  39 sup, sub {
  40         line-height: 1;
  41 }
  42
  43 /**
  44  * Block media items
  45  */
  46 figure[typeof*='mw:Image'] {
  47         margin: 0;
  48
  49         a {
  50                 border: 0;
  51         }
  52
  53         &.mw-halign-right {
  54                 /* @noflip */
  55                 margin: .5em 0 1.3em 1.4em;
  56                 /* @noflip */
  57                 clear: right;
  58                 /* @noflip */
  59                 float: right;
  60         }
  61
  62         &.mw-halign-left {
  63                 /* @noflip */
  64                 margin: .5em 1.4em 1.3em 0;
  65                 /* @noflip */
  66                 clear: left;
  67                 /* @noflip */
  68                 float: left;
  69         }
  70
  71         &.mw-halign-none {
  72                 margin: 0;
  73                 clear: none;
  74                 float: none;
  75         }
  76
  77         &.mw-halign-center {
  78                 margin: 0 auto .5em auto;
  79                 display: table;
  80                 clear: none;
  81                 float: none;
  82         }
  83
  84         > figcaption {
  85                 display: table-caption;
  86                 caption-side: bottom;
  87                 /* In mw-core the font-size is duplicated, 94% in thumbiner
  88                    and again 94% in thumbcaption. 88% for font size of the
  89                    caption results in the same behavior. */
  90                 font-size: 88%;
  91                 line-height: 1.4em;
  92                 text-align: left;
  93
  94                 border: 1px solid #ccc;
  95                 border-top: 0;
  96
  97                 /* taken from .thumbcaption, plus .thumbinner */
  98                 padding: 1px 5px 5px;
  99                 background-color: #f9f9f9;
 100         }
 101 }
 102
 103 figure[typeof~='mw:Image/Thumb'],
 104 figure[typeof~='mw:Image/Frame'] {
 105         display: table;
 106         overflow: auto;
 107         text-align: center;
 108         border: 1px solid #ccc;
 109         border-bottom: 0; // No border to caption
 110         border-collapse: collapse;
 111         background-color: #f9f9f9;
 112         // Default to right alignment. This is needed since Parsoid only specifies the
 113         // alignment class when the alignment is explicitly set.
 114         margin: .5em 0 1.3em 1.4em;
 115         clear: right;
 116         float: right;
 117 }
 118
 119 figure[typeof~='mw:Image/Thumb'] > *:first-child > img,
 120 figure[typeof~='mw:Image/Frame'] > *:first-child > img,
 121 .mw-image-border > *:first-child > img {
 122         border: 1px solid #cccccc;
 123         margin: 3px;
 124 }
 125
 126 /* Hide the caption for frameless and plain floated images */
 127 figure[typeof~="mw:Image/Frameless"] > figcaption,
 128 figure[typeof~="mw:Image"] > figcaption { display: none }
 129
 130 /*
 131  * Finally, some basic styling for Parsoid render testing.
 132  * Only Parsoid directly sets .mw-body-content directly on the body, so this
 133  * shouldn't affect anything else.
 134  */
 135 body.mw-body-content {
 136         background-color: #fff;
 137         padding: 0.8em;
 138 }