From 0e0d77fef35fa65a4aed0a490e83e1e7a593edc3 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Sat, 7 Oct 2017 19:58:20 -0700
Subject: [PATCH] Replace raster image gradients with CSS where easily
 applicable

Replace raster image gradients (before base64 embedded) for modern
browsers by CSS gradients. Only relying on conventional image URLs
in browsers that don't support linear-gradient.
Also
- adding a darkened border for inactive tabs to harmonize visual
  perception of border as one continuous line and
- DRYing tab separator selectors, saving ~8 bytes gzipped.

Bug: T63099
Bug: T121730
Change-Id: I76d32b84ddff06a2c7ef983e6f89ca6e74257a67
---
 components/tabs.less                        |  51 ++++++++++++--------
 images/{tab-break.png => tab-separator.png} | Bin
 variables.less                              |   2 +
 3 files changed, 34 insertions(+), 19 deletions(-)
 rename images/{tab-break.png => tab-separator.png} (100%)

diff --git a/components/tabs.less b/components/tabs.less
index d7f002206..4d7ee7c07 100644
--- a/components/tabs.less
+++ b/components/tabs.less
@@ -6,12 +6,11 @@
 
 /* Namespaces and Views */
 .vectorTabs {
+	// Tab separator: Outer start border (left in LTR) of tab row.
+	background-position: left bottom;
 	float: left;
 	height: 2.5em;
-	.background-image('images/tab-break.png');
-	background-position: bottom left;
-	background-repeat: no-repeat;
-	padding-left: 1px;
+	padding-left: @border-width-base;
 
 	/* Navigation Labels */
 	h3 {
@@ -24,20 +23,19 @@
 		list-style: none none;
 		margin: 0;
 		padding: 0;
-		.background-image('images/tab-break.png');
-		background-position: right bottom;
-		background-repeat: no-repeat;
 	}
 
 	li {
+		// Tab fade background: Fade inside from light grey to white.
+		background-image: url( images/tab-normal-fade.png ); // Support: IE 8 & 9, Fx 3.6-15, Safari 5.1-6, Chrome 10-25
+		background-image: linear-gradient( to top, @border-color-content--tabs-inactive 0, #e8f2f8 1px, #fff 100% ); // Support: Standard (Firefox 16+, IE 10+, Safari 6.1+, Chrome 26+)
+		background-position: left bottom;
+		background-repeat: repeat-x;
 		float: left;
 		display: block;
 		height: 100%;
 		margin: 0;
 		padding: 0;
-		.background-image('images/tab-normal-fade.png');
-		background-position: bottom left;
-		background-repeat: repeat-x;
 		line-height: @line-height-nav;
 		white-space: nowrap;
 
@@ -60,7 +58,10 @@
 	}
 
 	.selected {
-		.background-image('images/tab-current-fade.png');
+		// Replace tab fade with flat color (matching top of would-be fade).
+		background-image: url( images/tab-current-fade.png );
+		// Overwrite above in browsers that support `rgba()`.
+		background: rgba( 255, 255, 255, 1 ); // stylelint-disable-line declaration-block-no-shorthand-property-overrides
 
 		a,
 		a:visited {
@@ -71,16 +72,15 @@
 
 	.icon {
 		a {
-			background-position: bottom right;
+			background-position: right bottom;
 			background-repeat: no-repeat;
 		}
 	}
 
+	// Tab separator: Border between tabs and outer right border.
 	span {
+		background-position: right bottom;
 		display: inline-block;
-		.background-image('images/tab-break.png');
-		background-position: bottom right;
-		background-repeat: no-repeat;
 		height: 100%;
 
 		a {
@@ -194,18 +194,31 @@
 }
 
 #mw-head .vectorMenu h3 {
+	// Tab separator: Outer end (right in LTR) border of "Actions" menu.
+	background-position: right bottom;
 	float: left;
-	.background-image('images/tab-break.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
 	font-size: @font-size-reset;
 	height: 2.5em;
+	margin: 0 -@border-width-base 0 0;
 	// `padding-right` >= `1px` effectively moves the "background border" outside of the element to
 	// act like a real border. It is necessary for `.vectorMenu .menu` dropdown to align well.
 	// 0.5em equals `8px` at computed `font-size` of `14px` as visually harmonically with
 	// `padding-left` in `.vectorMenu h3 span`
 	padding: 0 0.5em 0 0;
-	margin: 0 -1px 0 0;
+}
+
+// Tab Separators
+// `.vectorTabs`: Outer start border (left in LTR) of tab row.
+// `.vectorTabs span`: Border between tabs and outer end (right in LTR) border.
+// `#mw-head .vectorMenu h3`: // Outer end (right in LTR) border of "Actions" menu.
+.vectorTabs,
+.vectorTabs span,
+#mw-head .vectorMenu h3 {
+	background-image: url( images/tab-separator.png );
+	background-image: linear-gradient( to bottom, rgba( 167, 215, 249, 0 ) 0, @border-color-content 100% );
+	background-repeat: no-repeat;
+	// Contain gradient to 1px × 100% size and draw from top to bottom-left or -right corner.
+	background-size: @border-width-base 100%;
 }
 
 // Invisible checkbox covering the dropdown menu handle
diff --git a/images/tab-break.png b/images/tab-separator.png
similarity index 100%
rename from images/tab-break.png
rename to images/tab-separator.png
diff --git a/variables.less b/variables.less
index e84af2db3..97e98ab50 100644
--- a/variables.less
+++ b/variables.less
@@ -32,6 +32,8 @@
 
 // FIXME: Use global variable since Echo and CentralNotice use this variable
 @border-color-content: #a7d7f9;
+// Due to darker background gradient, border needs to be darkened for aligned visual perception.
+@border-color-content--tabs-inactive: darken( @border-color-content, 10% );
 @content-line-height: 1.6;
 @padding-content: 1em;