Merge "Clean up mediawiki.legacy.upload a bit more"

[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 081524a..47c3526 100644 (file)
--- a/resources/src/mediawiki.skinning/content.parsoid.less
+++ b/resources/src/mediawiki.skinning/content.parsoid.less
@@ -2,6 +2,23 @@
  * 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 {
+       counter-reset: mw-NumberedExtLink;
+}
+
+.mw-body-content a[rel~="mw:ExtLink"]:empty:after {
+       content: "[" counter(mw-NumberedExtLink) "]";
+       counter-increment: mw-NumberedExtLink;
+}
+
 /**
  * References
  *
@@ -15,8 +32,15 @@
  */
 span.reference {
        font-size: smaller;
-       line-height: normal;
+       line-height: 1;
        vertical-align: super;
+       unicode-bidi: -moz-isolate;
+       unicode-bidi: -webkit-isolate;
+       unicode-bidi: isolate;
+}
+
+sup, sub {
+       line-height: 1;
 }
 
 /**
@@ -47,12 +71,20 @@ figure[typeof*='mw:Image'] {
                float: left;
        }
 
+       &.mw-halign-none {
+               margin: 0;
+               clear: none;
+               float: none;
+       }
+
        &.mw-halign-center {
-               margin-left: auto;
-               margin-right: auto;
+               margin: 0 auto .5em auto;
+               display: table;
+               clear: none;
+               float: none;
        }
 
-       figcaption {
+       > figcaption {
                display: table-caption;
                caption-side: bottom;
                /* In mw-core the font-size is duplicated, 94% in thumbiner
@@ -62,22 +94,48 @@ figure[typeof*='mw:Image'] {
                line-height: 1.4em;
                text-align: left;
 
-               /* taken from .thumbcaption */
-               padding: 3px;
+               border: 1px solid #ccc;
+               border-top: 0;
+
+               /* taken from .thumbcaption, plus .thumbinner */
+               padding: 1px 5px 5px;
+               background-color: #f9f9f9;
        }
 }
 
 figure[typeof~='mw:Image/Thumb'],
 figure[typeof~='mw:Image/Frame'] {
        display: table;
-       overflow: hidden;
+       overflow: auto;
        text-align: center;
-       padding: 3px;
        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: .5em 0 1.3em 1.4em;
+       clear: right;
+       float: right;
 }
 
-figure[typeof~='mw:Image/Thumb'] img,
-.mw-image-border img {
+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 #cccccc;
-}
\ No newline at end of file
+       margin: 3px;
+}
+
+/* Hide the caption for frameless and plain floated images */
+figure[typeof~="mw:Image/Frameless"] > figcaption,
+figure[typeof~="mw:Image"] > figcaption { display: none }
+
+/*
+ * Finally, some basic styling for Parsoid render testing.
+ * Only Parsoid directly sets .mw-body-content directly on the body, so this
+ * shouldn't affect anything else.
+ */
+body.mw-body-content {
+       background-color: #fff;
+       padding: 0.8em;
+}