(bug 35923) tweaks to mediawiki.action.history.diff.css

This is a followup from bug 11374. This patch has some fixes and final tweaks
for the code currently in trunk.

* Reorganized the CSS to specificallity.
* Changed table width to 100%, and added zero margin for table, so no
horizontal scrollbars.
* Changed horizontal padding in table.diff td from 0.66em to 0.5em, making max
use of expensive horizontal real estate.
* Override default vertical 0.33em padding in td.diff-marker with 0.25em to
compensate for increased fontsize of the marker (+ and -), which caused
unwanted padding at the bottom in one-line diff rules.
* Changed the background for td.diff-context to #f9f9f9, which is the same as
the background for wikitables. (BTW, the default background for Vector is
#f6f6f6, not the current #f3f3f3 as stated on wikitech-l).
* Removed 'overflow: auto' fallback for table.diff td div, as this creates
unwanted scrollbars in IE 8 and 9. The fallback targeted a very limited
set of older browsers anyway.

The NewDiff gadget on enwiki has all these fixes implemented, so you can
evaluate this code.

Change-Id: Ic9da00bc13ad8c322c19648c7d3ac8abec2eaa07

diff --git a/resources/mediawiki.action/mediawiki.action.history.diff.css b/resources/mediawiki.action/mediawiki.action.history.diff.css
index 10473be..31ca107 100644 (file)
--- a/resources/mediawiki.action/mediawiki.action.history.diff.css
+++ b/resources/mediawiki.action/mediawiki.action.history.diff.css
@@ -1,8 +1,36 @@
 /*
 ** Diff rendering
 */
-table.diff, td.diff-otitle, td.diff-ntitle {
+table.diff {
        background-color: white;
+       border: none;
+       border-spacing: 4px;
+       margin: 0;
+       width: 100%;
+       /* Ensure that colums are of equal width */
+       table-layout: fixed;
+}
+
+table.diff td {
+       padding: 0.33em 0.5em;
+}
+
+table.diff td.diff-marker {
+       /* Compensate padding for increased font-size */
+       padding: 0.25em;
+}
+
+table.diff col.diff-marker {
+       width: 2%;
+}
+
+table.diff col.diff-content {
+       width: 48%;
+}
+
+table.diff td div {
+       /* Force-wrap very long lines such as URLs or page-widening char strings */
+       word-wrap: break-word;
 }
 
 td.diff-otitle,
@@ -10,14 +38,14 @@ td.diff-ntitle {
        text-align: center;
 }
 
-td.diff-marker {
-       text-align: right;
+td.diff-lineno {
        font-weight: bold;
-       font-size: 1.25em;
 }
 
-td.diff-lineno {
+td.diff-marker {
+       text-align: right;
        font-weight: bold;
+       font-size: 1.25em;
 }
 
 td.diff-addedline,
@@ -27,10 +55,6 @@ td.diff-context {
        vertical-align: top;
        white-space: -moz-pre-wrap;
        white-space: pre-wrap;
-}
-
-td.diff-addedline,
-td.diff-deletedline {
        border-style: solid;
        border-width: 1px 1px 1px 4px;
        border-radius: 0.33em;
@@ -45,12 +69,9 @@ td.diff-deletedline {
 }
 
 td.diff-context {
-       background: #f3f3f3;
-       color: #333333;
-       border-style: solid;
-       border-width: 1px 1px 1px 4px;
+       background: #f9f9f9;
        border-color: #e6e6e6;
-       border-radius: 0.33em;
+       color: #333333;
 }
 
 .diffchange {
@@ -58,15 +79,6 @@ td.diff-context {
        text-decoration: none;
 }
 
-table.diff {
-       border: none;
-       width: 98%;
-       border-spacing: 4px;
-
-       /* Ensure that colums are of equal width */
-       table-layout: fixed;
-}
-
 td.diff-addedline .diffchange,
 td.diff-deletedline .diffchange {
        border-radius: 0.33em;
@@ -80,25 +92,3 @@ td.diff-addedline .diffchange {
 td.diff-deletedline .diffchange {
        background: #feeec8;
 }
-
-table.diff td {
-       padding: 0.33em 0.66em;
-}
-
-table.diff col.diff-marker {
-       width: 2%;
-}
-
-table.diff col.diff-content {
-       width: 48%;
-}
-
-table.diff td div {
-       /* Force-wrap very long lines such as URLs or page-widening char strings.*/
-       word-wrap: break-word;
-
-       /* As fallback (FF<3.5, Opera <10.5), scrollbars will be added for very wide cells
-          instead of text overflowing or widening
-       */
-       overflow: auto;
-}