* Style Parsoid HTML+RDFa output consistent with wikitext from PHP parser.
*/
-/*csslint regex-selectors:false */
-
/*
* Auto-numbered external links
* Parsoid renders those as link without content, and lets CSS do the
* counting. This way the counting style can be customized, and counts update
* automatically when content is modified.
*/
-.mw-body-content {
+.mw-parser-output {
counter-reset: mw-numbered-ext-link;
}
-.mw-body-content a[rel~='mw:ExtLink']:empty:after {
+.mw-parser-output a[rel~='mw:ExtLink']:empty:after {
content: '[' counter( mw-numbered-ext-link ) ']';
counter-increment: mw-numbered-ext-link;
}
/**
* Block media items
*/
-figure[typeof*='mw:Image'] {
+figure[typeof*='mw:Image'],
+figure[typeof*='mw:Video'],
+figure[typeof*='mw:Audio'] {
margin: 0;
a {
&.mw-halign-center {
margin: 0 auto 0.5em auto;
display: table;
+ border-collapse: collapse;
clear: none;
float: none;
}
+ /* Hide the caption for frameless and plain floated images */
+ > figcaption {
+ display: none;
+ }
+}
+
+figure[typeof~='mw:Image/Thumb'],
+figure[typeof~='mw:Video/Thumb'],
+figure[typeof~='mw:Audio/Thumb'],
+figure[typeof~='mw:Image/Frame'],
+figure[typeof~='mw:Video/Frame'],
+figure[typeof~='mw:Audio/Frame'] {
+ display: table;
+ text-align: center;
+ border: 1px solid #c8ccd1;
+ border-collapse: separate;
+ border-spacing: 3px;
+ background-color: #f8f9fa;
+ width: 1px; // From https://stackoverflow.com/a/6536025
+
+ // Avoid !important
+ &.mw-halign-center {
+ border-collapse: separate;
+ }
+
+ // Default to right alignment. This is needed since Parsoid only specifies the
+ // alignment class when the alignment is explicitly set.
+ margin: 0.5em 0 1.3em 1.4em;
+ clear: right;
+ float: right;
+
+ > *:first-child {
+ > img,
+ > video {
+ border: 1px solid #c8ccd1;
+ background: #fff;
+ }
+ }
+
> figcaption {
- display: table-caption;
- caption-side: bottom;
+ display: block;
+
/* In mw-core the font-size is duplicated, 94% in thumbiner
- * and again 94% in thumbcaption. 88% for font size of the
+ * and again 94% in thumbcaption. 88.4% for font size of the
* caption results in the same behavior. */
font-size: 88.4%;
line-height: 1.4em;
text-align: left;
- border: 1px solid #ccc;
- border-top: 0;
-
/* taken from .thumbcaption, plus .thumbinner */
- padding: 0 6px 6px 6px;
- background-color: #f9f9f9;
+ padding: 3px;
+ }
+}
- table {
- /* reset caption side for tables inside figcaptions */
- caption-side: top;
+figure[typeof*='mw:Image/Thumb'],
+figure[typeof*='mw:Video/Thumb'],
+figure[typeof*='mw:Audio/Thumb'] {
+ > a:after {
+ content: '';
+ width: 15px;
+ height: 11px;
+ margin: 3px;
+ margin-bottom: 0;
+
+ .mw-content-ltr & {
+ /* @noflip */
+ float: right;
+ /* @noflip */
+ background-image: url( images/magnify-clip-ltr.png );
+ /* @noflip */
+ background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-ltr.svg );
+ }
+
+ .mw-content-rtl & {
+ /* @noflip */
+ float: left;
+ /* @noflip */
+ background-image: url( images/magnify-clip-rtl.png );
+ /* @noflip */
+ background-image: linear-gradient( transparent, transparent ), url( images/magnify-clip-rtl.svg );
}
}
}
-figure[typeof~='mw:Image/Thumb'],
-figure[typeof~='mw:Image/Frame'] {
- display: table;
- overflow: auto;
- text-align: center;
- border: 1px solid #ccc;
- border-bottom: 0; // No border to caption
- border-collapse: collapse;
- background-color: #f9f9f9;
- // Default to right alignment. This is needed since Parsoid only specifies the
- // alignment class when the alignment is explicitly set.
- margin: 0.5em 0 1.3em 1.4em;
- clear: right;
- float: right;
+/* Same as img.thumbborder in content.css */
+.mw-image-border > *:first-child {
+ > img,
+ > video {
+ border: 1px solid #eaecf0;
+ }
}
-figure[typeof~='mw:Image/Thumb'] > *:first-child > img,
-figure[typeof~='mw:Image/Frame'] > *:first-child > img,
-.mw-image-border > *:first-child > img {
- border: 1px solid #ccc;
- margin: 3px;
- background: #fff;
+/**
+ * Avoid the need to calculate paddings individually
+ * https://stackoverflow.com/a/7310398
+ */
+.mw-gallery-traditional .gallerybox .thumb {
+ &:before {
+ content: '';
+ vertical-align: middle;
+ display: inline-block;
+ height: 100%;
+ }
+ > * {
+ vertical-align: middle;
+ display: inline-block;
+ }
}
-/* Hide the caption for frameless and plain floated images */
-figure[typeof~='mw:Image/Frameless'] > figcaption,
-figure[typeof~='mw:Image'] > figcaption {
- display: none;
+/**
+ * Inline media items
+ */
+*:first-child {
+ > img,
+ > video {
+ .mw-valign-middle > & {
+ vertical-align: middle;
+ }
+ .mw-valign-baseline > & {
+ vertical-align: baseline;
+ }
+ .mw-valign-sub > & {
+ vertical-align: sub;
+ }
+ .mw-valign-super > & {
+ vertical-align: super;
+ }
+ .mw-valign-top > & {
+ vertical-align: top;
+ }
+ .mw-valign-text-top > & {
+ vertical-align: text-top;
+ }
+ .mw-valign-bottom > & {
+ vertical-align: bottom;
+ }
+ .mw-valign-text-bottom > & {
+ vertical-align: text-bottom;
+ }
+ }
}