1/** 2 * Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser. 3 */ 4 5/* stylelint-disable selector-class-pattern */ 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-parser-output { 14 counter-reset: mw-numbered-ext-link; 15} 16 17.mw-parser-output a[ rel~='mw:ExtLink' ]:empty:after { 18 content: '[' counter( mw-numbered-ext-link ) ']'; 19 counter-increment: mw-numbered-ext-link; 20} 21 22/** 23 * Block media items 24 */ 25figure[ typeof*='mw:Image' ], 26figure[ typeof*='mw:Video' ], 27figure[ typeof*='mw:Audio' ] { 28 margin: 0; 29 30 a { 31 border: 0; 32 } 33 34 &.mw-halign-right { 35 /* @noflip */ 36 margin: 0 0 0.5em 0.5em; 37 /* @noflip */ 38 clear: right; 39 /* @noflip */ 40 float: right; 41 } 42 43 &.mw-halign-left { 44 /* @noflip */ 45 margin: 0 0.5em 0.5em 0; 46 /* @noflip */ 47 clear: left; 48 /* @noflip */ 49 float: left; 50 } 51 52 &.mw-halign-none { 53 margin: 0; 54 clear: none; 55 float: none; 56 } 57 58 &.mw-halign-center { 59 margin: 0 auto 0.5em auto; 60 display: table; 61 border-collapse: collapse; 62 clear: none; 63 float: none; 64 } 65 66 /* Hide the caption for frameless and plain floated images */ 67 > figcaption { 68 display: none; 69 } 70} 71 72figure[ typeof~='mw:Image/Thumb' ], 73figure[ typeof~='mw:Video/Thumb' ], 74figure[ typeof~='mw:Audio/Thumb' ], 75figure[ typeof~='mw:Image/Frame' ], 76figure[ typeof~='mw:Video/Frame' ], 77figure[ typeof~='mw:Audio/Frame' ] { 78 display: table; 79 text-align: center; 80 border: 1px solid #c8ccd1; 81 border-collapse: separate; 82 border-spacing: 3px; 83 background-color: #f8f9fa; 84 width: 1px; // From https://stackoverflow.com/a/6536025 85 86 // Avoid !important 87 &.mw-halign-center { 88 border-collapse: separate; 89 } 90 91 // Default to right alignment. This is needed since Parsoid only specifies the 92 // alignment class when the alignment is explicitly set. 93 margin: 0.5em 0 1.3em 1.4em; 94 clear: right; 95 float: right; 96 97 &.mw-halign-left { 98 /* @noflip */ 99 margin: 0.5em 1.4em 1.3em 0; 100 } 101 102 &.mw-halign-right { 103 /* @noflip */ 104 margin: 0.5em 0 1.3em 1.4em; 105 } 106 107 > *:first-child { 108 > img, 109 > video { 110 border: 1px solid #c8ccd1; 111 background: #fff; 112 } 113 } 114 115 > figcaption { 116 display: block; 117 word-break: break-word; 118 119 /* In mw-core the font-size is duplicated, 94% in thumbiner 120 * and again 94% in thumbcaption. 88.4% for font size of the 121 * caption results in the same behavior. */ 122 font-size: 88.4%; 123 line-height: 1.4em; 124 text-align: left; 125 126 /* taken from .thumbcaption, plus .thumbinner */ 127 padding: 3px; 128 } 129} 130 131figure[ typeof*='mw:Image/Thumb' ], 132figure[ typeof*='mw:Video/Thumb' ], 133figure[ typeof*='mw:Audio/Thumb' ] { 134 > a:after { 135 content: ''; 136 width: 15px; 137 height: 11px; 138 margin: 3px; 139 margin-bottom: 0; 140 141 .mw-content-ltr & { 142 /* @noflip */ 143 float: right; 144 /* @noflip */ 145 background-image: url( images/magnify-clip-ltr.png ); 146 /* @noflip */ 147 background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg ); 148 } 149 150 .mw-content-rtl & { 151 /* @noflip */ 152 float: left; 153 /* @noflip */ 154 background-image: url( images/magnify-clip-rtl.png ); 155 /* @noflip */ 156 background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg ); 157 } 158 } 159} 160 161/* Same as img.thumbborder in content.css */ 162.mw-image-border > *:first-child { 163 > img, 164 > video { 165 border: 1px solid #eaecf0; 166 } 167} 168 169/** 170 * Avoid the need to calculate paddings individually 171 * https://stackoverflow.com/a/7310398 172 */ 173.mw-gallery-traditional .gallerybox .thumb { 174 &:before { 175 content: ''; 176 vertical-align: middle; 177 display: inline-block; 178 height: 100%; 179 } 180 181 > * { 182 vertical-align: middle; 183 display: inline-block; 184 } 185} 186 187/** 188 * Inline media items 189 */ 190*:first-child { 191 > img, 192 > video { 193 .mw-valign-middle > & { 194 vertical-align: middle; 195 } 196 197 .mw-valign-baseline > & { 198 vertical-align: baseline; 199 } 200 201 .mw-valign-sub > & { 202 vertical-align: sub; 203 } 204 205 .mw-valign-super > & { 206 vertical-align: super; 207 } 208 209 .mw-valign-top > & { 210 vertical-align: top; 211 } 212 213 .mw-valign-text-top > & { 214 vertical-align: text-top; 215 } 216 217 .mw-valign-bottom > & { 218 vertical-align: bottom; 219 } 220 221 .mw-valign-text-bottom > & { 222 vertical-align: text-bottom; 223 } 224 } 225} 226