From: edokter <erwin@darcoury.nl>
Date: Tue, 2 Oct 2012 20:44:44 +0000 (+0200)
Subject: (bug 35923) tweaks to mediawiki.action.history.diff.css
X-Git-Tag: 1.31.0-rc.0~21683^2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/password.php?a=commitdiff_plain;h=9930378862cc82b0ef1d1ac362f8f8aa13c8be6c;p=lhc%2Fweb%2Fwiklou.git

(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 10473be779..31ca10781c 100644
--- 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;
-}