TOC: Use padding instead of inline-block for space

The padding does not get reduced on table cell size adaption. See T126857.

The padding is also visible for IE7 and lower.
c7894deb used an inline-block because it get ignored by IE7 and lower.
Now the gap between tocnummber and toctext is 0.5em + one space for IE7 and lower.
This is acceptable.

The additional CSS selectors are necessary to get the padding on the correct side.
* On Special:EditWatchlist and
* On content pages with a user interface language with different direction.

Bug: T126857
Change-Id: I61e3835f28cd65152cf7920a17e393dc68b76e41

diff --git a/resources/src/mediawiki.legacy/commonPrint.css b/resources/src/mediawiki.legacy/commonPrint.css
index 4803a0a..77ecfcb 100644 (file)
--- a/resources/src/mediawiki.legacy/commonPrint.css
+++ b/resources/src/mediawiki.legacy/commonPrint.css
@@ -127,11 +127,23 @@ pre, .mw-code {
 }
 
 /* Space between the columns for tocnumber and toctext */
-.tocnumber:after {
-       content: "";
+.tocnumber {
+       padding-left: 0;
        padding-right: 0.5em;
 }
 
+/* @noflip */
+.mw-content-ltr .tocnumber {
+       padding-left: 0;
+       padding-right: 0.5em;
+}
+
+/* @noflip */
+.mw-content-rtl .tocnumber {
+       padding-left: 0.5em;
+       padding-right: 0;
+}
+
 #footer {
        background: white;
        color: black;

diff --git a/resources/src/mediawiki.skinning/content.css b/resources/src/mediawiki.skinning/content.css
index c88d00d..e6f92a5 100644 (file)
--- a/resources/src/mediawiki.skinning/content.css
+++ b/resources/src/mediawiki.skinning/content.css
@@ -96,11 +96,21 @@ table.toc td {
 }
 
 /* Space between the columns for tocnumber and toctext */
-/* Ignored by IE7 and lower */
-.tocnumber:after {
-       content: "";
-       display: inline-block;
-       width: 0.5em;
+.tocnumber {
+       padding-left: 0;
+       padding-right: 0.5em;
+}
+
+/* @noflip */
+.mw-content-ltr .tocnumber {
+       padding-left: 0;
+       padding-right: 0.5em;
+}
+
+/* @noflip */
+.mw-content-rtl .tocnumber {
+       padding-left: 0.5em;
+       padding-right: 0;
 }
 
 /* Warning */