Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/108873
Change subject: Remove the fade in image in favour of background gradient
......................................................................
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
---
M resources/mediawiki.less/mediawiki.mixins.less
M skins/vector/components/common.less
M skins/vector/components/navigation.less
M skins/vector/components/notifications.less
D skins/vector/images/page-fade.png
M skins/vector/variables.less
6 files changed, 19 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/73/108873/1
diff --git a/resources/mediawiki.less/mediawiki.mixins.less
b/resources/mediawiki.less/mediawiki.mixins.less
index c55c25c..5d2c271 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 b70066a..cb89a7b 100644
--- a/skins/vector/components/common.less
+++ b/skins/vector/components/common.less
@@ -23,7 +23,7 @@
font-family: @content-font-family;
}
body {
- background-color: #f6f6f6;
+ background-color: @menu-background-color;
font-size: @body-font-size;
}
@@ -33,11 +33,11 @@
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..011959e 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 43b9882..cadb61c 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 b4a6034..0000000
--- a/skins/vector/images/page-fade.png
+++ /dev/null
Binary files differ
diff --git a/skins/vector/variables.less b/skins/vector/variables.less
index f818401..c2d0b92 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;
--
To view, visit https://gerrit.wikimedia.org/r/108873
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ie36708f32edf0d83a0be843c115ad82d8014e4e1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
