From aa9995e972ee8306b7698212b29bdcf20845f4bf Mon Sep 17 00:00:00 2001
From: jrobson <jrobson@wikimedia.org>
Date: Tue, 21 Jan 2014 16:43:04 -0800
Subject: [PATCH] Remove the fade in image in favour of background gradient

* Introduces vertical-gradient mixin (tried and tested
in MobileFrontend)
* Add additional LESS variables
* Just dont give versions with no vertical gradient support a fade
effect - it's not a big deal
* Save a single asset download

Change-Id: Ie36708f32edf0d83a0be843c115ad82d8014e4e1
---
 resources/mediawiki.less/mediawiki.mixins.less |   8 ++++++++
 skins/vector/components/common.less            |   6 +++---
 skins/vector/components/navigation.less        |   3 +--
 skins/vector/components/notifications.less     |   2 +-
 skins/vector/images/page-fade.png              | Bin 115 -> 0 bytes
 skins/vector/variables.less                    |   6 ++++++
 6 files changed, 19 insertions(+), 6 deletions(-)
 delete mode 100644 skins/vector/images/page-fade.png

diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less
index c55c25cf3f..5d2c27189f 100644
--- a/resources/mediawiki.less/mediawiki.mixins.less
+++ b/resources/mediawiki.less/mediawiki.mixins.less
@@ -19,6 +19,14 @@
 	background-image: url(@url);
 }
 
+.vertical-gradient ( @startColor: gray, @endColor: white, @startPos: 0, @endPos: 100% ) {
+	background-color: @endColor;
+	background-image: -moz-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Firefox 3.6+
+	background-image: -webkit-gradient( linear, left top, left bottom, color-stop( @startPos, @startColor ), color-stop( @endPos, @endColor ) ); // Safari 4+, Chrome 2+
+	background-image: -webkit-linear-gradient( top, @startColor @startPos, @endColor @endPos ); // Safari 5.1+, Chrome 10+
+	background-image: linear-gradient( @startColor @startPos, @endColor @endPos ); // Standard
+}
+
 /* Note gzip compression means that it is okay to embed twice */
 .background-image-svg(@svg, @fallback) {
 	background-image: url(@fallback);
diff --git a/skins/vector/components/common.less b/skins/vector/components/common.less
index b70066adc6..cb89a7b38c 100644
--- a/skins/vector/components/common.less
+++ b/skins/vector/components/common.less
@@ -23,7 +23,7 @@ body {
 	font-family: @content-font-family;
 }
 body {
-	background-color: #f6f6f6;
+	background-color: @menu-background-color;
 	font-size: @body-font-size;
 }
 
@@ -33,11 +33,11 @@ div#content {
 	margin-left: 10em;
 	padding: @content-padding;
 	/* Border on top, left, and bottom side */
-	border: 1px solid #a7d7f9;
+	border: 1px solid @content-border-color;
 	border-right-width: 0;
 	/* Merge the border with tabs' one (in their background image) */
 	margin-top: -1px;
-	background-color: white;
+	background-color: @body-background-color;
 	color: @content-font-color;
 	direction: ltr;
 }
diff --git a/skins/vector/components/navigation.less b/skins/vector/components/navigation.less
index 4512efaea1..e2942d7980 100644
--- a/skins/vector/components/navigation.less
+++ b/skins/vector/components/navigation.less
@@ -13,10 +13,9 @@
 /* Head */
 #mw-page-base {
 	height: 5em;
-	background-color: white;
-	.background-image('images/page-fade.png');
 	background-position: bottom left;
 	background-repeat: repeat-x;
+	.vertical-gradient(@body-background-color, @menu-background-color, 40%, 100%);
 }
 
 #mw-head-base {
diff --git a/skins/vector/components/notifications.less b/skins/vector/components/notifications.less
index 43b9882855..cadb61c8d3 100644
--- a/skins/vector/components/notifications.less
+++ b/skins/vector/components/notifications.less
@@ -12,7 +12,7 @@
 		background-color: #fff;
 		background-color: rgba(255, 255, 255, 0.93);
 		padding: 0.75em 1.5em;
-		border: solid 1px #a7d7f9;
+		border: solid 1px @content-border-color;
 		border-radius: 0.75em;
 		-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
 		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.125);
diff --git a/skins/vector/images/page-fade.png b/skins/vector/images/page-fade.png
deleted file mode 100644
index b4a6034259a1cd2526de120ba3696a71aef01e6a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 115
zcmeAS@N?(olHy`uVBq!ia0vp^j6kfz!2~3=U0uz9l$EE8V@SoV(B5b+1_utN()abx
zZ!Qq8WwFZOs+jaFpyJqavxB9TPhZ4kgwH?u_5IuR-;Gb+T>Dn!``w=zEXtOtOs~p;
PrZ9NA`njxgN@xNAJ2)t7

diff --git a/skins/vector/variables.less b/skins/vector/variables.less
index f8184014e6..c2d0b92ac0 100644
--- a/skins/vector/variables.less
+++ b/skins/vector/variables.less
@@ -3,6 +3,8 @@
 @body-font-size: 1em;
 
 // Page content
+// FIXME: Use global variable since Echo and CentralNotice use this variable
+@content-border-color: #a7d7f9;
 @content-font-family: sans-serif;
 @content-font-color: black;
 @content-font-size: 0.8em;
@@ -10,6 +12,10 @@
 @content-padding: 1.25em 1.5em 1.5em 1.5em;
 @content-heading-font-size: 1.6em;
 @content-heading-font-family: sans-serif;
+@body-background-color: #fff;
+
+// Navigation
+@menu-background-color: #f6f6f6;
 
 // Common menu
 @menu-link-color: #0645ad;
-- 
2.20.1