Simplify print styles

Simplifying CSS code by
- merging similar selectors,
- reordering them by CSS specificity and within selectors alphabetically &
- applying simpler `line-height` units dependent on `font-size` instead
of absolute.

Bug: T135022
Bug: T169823
Change-Id: I9aa92a3e70991126c56df0a6db408d1c6f84f172

diff --git a/resources/src/mediawiki.legacy/commonPrint.css b/resources/src/mediawiki.legacy/commonPrint.css
index b4418e5..602bdab 100644 (file)
--- a/resources/src/mediawiki.legacy/commonPrint.css
+++ b/resources/src/mediawiki.legacy/commonPrint.css
@@ -9,18 +9,25 @@
 /**
  * Hide all the elements irrelevant for printing
  */
+/* General hide-in-print class, please only use sparely */
 .noprint,
-#jump-to-nav,
+/* Various content classes, in alphabetical order */
+.magnify,
+.mw-cite-backlink,
 .mw-jump,
-#column-one,
 .mw-editsection,
 .mw-editsection-like,
-#footer-places,
 .mw-hidden-catlinks,
-.usermessage,
-.patrollink,
+.noexcerpt,
 .ns-0 .mw-redirectedfrom,
-.magnify,
+.patrollink,
+.play-btn-large,
+.usermessage,
+/* Various content ids, in alphabetical order */
+#column-one,
+#coordinates .image,
+#footer-places,
+#jump-to-nav,
 #mw-navigation,
 #siteNotice,
 /* Deprecated, changed in core */
@@ -43,6 +50,42 @@ body {
        padding: 0;
 }
 
+/* Links */
+a {
+       background: none !important; /* stylelint-disable-line declaration-no-important */
+       padding: 0 !important; /* stylelint-disable-line declaration-no-important */
+}
+
+a,
+a.external,
+a.new,
+a.stub {
+       /* IE 6 & 7 don't understand `inherit` */
+       color: #000 !important; /* stylelint-disable-line declaration-no-important */
+       text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
+       /* Modern browser will apply this, IE 6 & 7 ignore the unknown */
+       color: inherit !important; /* stylelint-disable-line declaration-block-no-duplicate-properties, declaration-no-important */
+       text-decoration: inherit !important; /* stylelint-disable-line declaration-block-no-duplicate-properties, declaration-no-important */
+}
+
+/* Expand URLs for printing */
+.mw-body-content a.external.text:after,
+.mw-body-content a.external.autonumber:after {
+       content: ' (' attr( href ) ')';
+       word-break: break-all;
+       word-wrap: break-word;
+}
+
+/* Expand protocol-relative URLs for printing */
+.mw-body-content a.external.text[href^='//']:after,
+.mw-body-content a.external.autonumber[href^='//']:after {
+       content: ' (https:' attr( href ) ')';
+}
+
+dt {
+       font-weight: bold;
+}
+
 h1,
 h2,
 h3,
@@ -52,24 +95,30 @@ h6 {
        font-weight: bold;
        /* Pagination */
        page-break-after: avoid;
-}
-
-dt {
-       font-weight: bold;
-}
-
-ul {
-       list-style-type: square;
+       page-break-before: avoid;
 }
 
 p {
        margin: 1em 0;
-       line-height: 1.2em;
+       line-height: 1.2;
        /* Pagination */
        orphans: 3;
        widows: 3;
 }
 
+img,
+figure,
+.wikitable,
+.thumb {
+       /* Pagination */
+       page-break-inside: avoid;
+}
+
+img {
+       border: 0;
+       vertical-align: middle;
+}
+
 pre,
 .mw-code {
        background: #fff;
@@ -82,17 +131,8 @@ pre,
        overflow: auto;
 }
 
-img,
-figure,
-.wikitable,
-.thumb {
-       /* Pagination */
-       page-break-inside: avoid;
-}
-
-img {
-       border: 0;
-       vertical-align: middle;
+ul {
+       list-style-type: square;
 }
 
 /**
@@ -129,13 +169,13 @@ img {
        display: table;
 }
 
-/* Separate columns for tocnumber and toctext */
+/* Separate columns for `.tocnumber` and `.toctext` */
 .tocnumber,
 .toctext {
        display: table-cell;
 }
 
-/* Space between the columns for tocnumber and toctext */
+/* Space between those columns */
 .tocnumber {
        padding-left: 0;
        padding-right: 0.5em;
@@ -153,53 +193,12 @@ img {
        padding-right: 0;
 }
 
-#footer {
-       background: #fff;
-       color: #000;
-       margin-top: 1em;
-       border-top: 1pt solid #aaa;
-       direction: ltr;
-}
-
 /**
- * Links
- */
-a {
-       background: none !important; /* stylelint-disable-line declaration-no-important */
-       padding: 0 !important; /* stylelint-disable-line declaration-no-important */
-}
-
-/* Expand URLs for printing */
-.mw-body-content a.external.text:after,
-.mw-body-content a.external.autonumber:after {
-       content: ' (' attr( href ) ')';
-       word-break: break-all;
-       word-wrap: break-word;
-}
-
-/* Expand protocol-relative URLs for printing */
-.mw-body-content a.external.text[href^='//']:after,
-.mw-body-content a.external.autonumber[href^='//']:after {
-       content: ' (https:' attr( href ) ')';
-}
-
-a,
-a.external,
-a.new,
-a.stub {
-       /* IE 6 & 7 don't understand `inherit` */
-       color: #000 !important; /* stylelint-disable-line declaration-no-important */
-       text-decoration: none !important; /* stylelint-disable-line declaration-no-important */
-       /* Modern browser will apply this, IE 6 & 7 ignore the unknown */
-       color: inherit !important; /* stylelint-disable-line declaration-block-no-duplicate-properties, declaration-no-important */
-       text-decoration: inherit !important; /* stylelint-disable-line declaration-block-no-duplicate-properties, declaration-no-important */
-}
-
-/**
- * Floating divs
+ * Floating divs (and thumbnails)
  */
 /* @noflip */
-div.floatright {
+div.floatright,
+div.tright {
        float: right;
        clear: right;
        position: relative;
@@ -211,7 +210,8 @@ div.floatright p {
 }
 
 /* @noflip */
-div.floatleft {
+div.floatleft,
+div.tleft {
        float: left;
        clear: left;
        position: relative;
@@ -255,25 +255,11 @@ html .thumbimage {
 html .thumbcaption {
        border: 0;
        text-align: left;
-       line-height: 1.4em;
+       line-height: 1.4;
        padding: 3px;
        font-size: 94%;
 }
 
-/* @noflip */
-div.tright {
-       float: right;
-       clear: right;
-       margin: 0.5em 0 0.8em 1.4em;
-}
-
-/* @noflip */
-div.tleft {
-       float: left;
-       clear: left;
-       margin: 0.5em 1.4em 0.8em 0;
-}
-
 img.thumbborder {
        border: 1pt solid #ddd;
 }
@@ -290,6 +276,11 @@ table.mw_metadata {
        border-collapse: collapse;
 }
 
+table.wikitable > caption,
+.mw_metadata caption {
+       font-weight: bold;
+}
+
 table.wikitable > tr > th,
 table.wikitable > tr > td,
 table.wikitable > * > tr > th,
@@ -308,11 +299,6 @@ table.wikitable > * > tr > th,
        text-align: center;
 }
 
-table.wikitable > caption,
-.mw_metadata caption {
-       font-weight: bold;
-}
-
 table.listing,
 table.listing td {
        border: 1pt solid #000;
@@ -330,17 +316,29 @@ table.listing td {
 
 .catlinks li {
        display: inline-block;
-       line-height: 1.15em;
-       padding: 0 0.4em;
-       border-left: 1pt solid #aaa;
+       line-height: 1.15;
        margin: 0.1em 0;
+       border-left: 1pt solid #aaa;
+       padding: 0 0.4em;
 }
 
 .catlinks li:first-child {
-       padding-left: 0.2em;
        border-left: 0;
+       padding-left: 0.2em;
 }
 
+/**
+ * Footer
+ */
 .printfooter {
        padding: 1em 0;
 }
+
+#footer {
+       background: #fff;
+       color: #000;
+       margin-top: 1em;
+       border-top: 1pt solid #aaa;
+       padding-top: 5px;
+       direction: ltr;
+}