Tweak CSS for Parsoid <figure>s

[lhc/web/wiklou.git] / resources / src / mediawiki.skinning / content.parsoid.less

diff --git a/resources/src/mediawiki.skinning/content.parsoid.less b/resources/src/mediawiki.skinning/content.parsoid.less
index 346771f..ec5b429 100644 (file)
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -11,12 +11,12 @@
  * automatically when content is modified.
  */
 .mw-body-content {
-       counter-reset: mw-NumberedExtLink;
+       counter-reset: mw-numbered-ext-link;
 }
 
-.mw-body-content a[rel~="mw:ExtLink"]:empty:after {
-       content: "[" counter( mw-NumberedExtLink ) "]";
-       counter-increment: mw-NumberedExtLink;
+.mw-body-content a[rel~='mw:ExtLink']:empty:after {
+       content: '[' counter( mw-numbered-ext-link ) ']';
+       counter-increment: mw-numbered-ext-link;
 }
 
 /**
@@ -38,7 +38,8 @@ span.reference {
        unicode-bidi: isolate;
 }
 
-sup, sub {
+sup,
+sub {
        line-height: 1;
 }
 
@@ -54,7 +55,7 @@ figure[typeof*='mw:Image'] {
 
        &.mw-halign-right {
                /* @noflip */
-               margin: .5em 0 1.3em 1.4em;
+               margin: 0.5em 0 1.3em 1.4em;
                /* @noflip */
                clear: right;
                /* @noflip */
@@ -63,7 +64,7 @@ figure[typeof*='mw:Image'] {
 
        &.mw-halign-left {
                /* @noflip */
-               margin: .5em 1.4em 1.3em 0;
+               margin: 0.5em 1.4em 1.3em 0;
                /* @noflip */
                clear: left;
                /* @noflip */
@@ -77,7 +78,7 @@ figure[typeof*='mw:Image'] {
        }
 
        &.mw-halign-center {
-               margin: 0 auto .5em auto;
+               margin: 0 auto 0.5em auto;
                display: table;
                clear: none;
                float: none;
@@ -87,18 +88,18 @@ figure[typeof*='mw:Image'] {
                display: table-caption;
                caption-side: bottom;
                /* In mw-core the font-size is duplicated, 94% in thumbiner
-                  and again 94% in thumbcaption. 88% for font size of the
-                  caption results in the same behavior. */
-               font-size: 88%;
+                * 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: 1px solid #c8ccd1;
                border-top: 0;
 
                /* taken from .thumbcaption, plus .thumbinner */
-               padding: 1px 5px 5px;
-               background-color: #f9f9f9;
+               padding: 0 6px 6px 6px;
+               background-color: #f8f9fa;
 
                table {
                        /* reset caption side for tables inside figcaptions */
@@ -112,13 +113,13 @@ figure[typeof~='mw:Image/Frame'] {
        display: table;
        overflow: auto;
        text-align: center;
-       border: 1px solid #ccc;
+       border: 1px solid #c8ccd1;
        border-bottom: 0; // No border to caption
        border-collapse: collapse;
-       background-color: #f9f9f9;
+       background-color: #f8f9fa;
        // Default to right alignment. This is needed since Parsoid only specifies the
        // alignment class when the alignment is explicitly set.
-       margin: .5em 0 1.3em 1.4em;
+       margin: 0.5em 0 1.3em 1.4em;
        clear: right;
        float: right;
 }
@@ -126,10 +127,13 @@ figure[typeof~='mw:Image/Frame'] {
 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;
+       border: 1px solid #c8ccd1;
        margin: 3px;
+       background: #fff;
 }
 
 /* Hide the caption for frameless and plain floated images */
-figure[typeof~="mw:Image/Frameless"] > figcaption,
-figure[typeof~="mw:Image"] > figcaption { display: none }
+figure[typeof~='mw:Image/Frameless'] > figcaption,
+figure[typeof~='mw:Image'] > figcaption {
+       display: none;
+}