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);
font-family: @content-font-family;
}
body {
- background-color: #f6f6f6;
+ background-color: @menu-background-color;
font-size: @body-font-size;
}
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;
}
/* 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 {
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);
@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;
@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;