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

diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less
index c55c25c..5d2c271 100644 (file)
--- 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 b70066a..cb89a7b 100644 (file)
--- 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 4512efa..e2942d7 100644 (file)
--- 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 43b9882..cadb61c 100644 (file)
--- 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 (file)
index b4a6034..0000000
Binary files a/skins/vector/images/page-fade.png and /dev/null differ

diff --git a/skins/vector/variables.less b/skins/vector/variables.less
index f818401..c2d0b92 100644 (file)
--- 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;