Remove @embed page load delays (and misc optimisations)

* page-fade:
  Remove redundant 'background-image' PNG fallback for
  IE6-8 in '#mw-page-base' because the vertical-gradient() already
  creates a solid fallback color which seems good enough for IE6-8.

  Remove the 'background-color' rule which was only there to fill
  the gap above the the IE6-8 PNG image fallback, which in turn
  overrode the background-color rule from vertical-gradient.
  The background-repeat rule is also redundant with background-image
  gone.

* watch-icon-loading:
  This is only used when the JS code is active and the user
  clicks the watch star. It does not need a PNG fallback, as it
  is only needed in Grade A browsers where the JS executes,
  which are expected to support SVG.
  Also removed the embedding as the rendering of article text
  on page load should not be delayed by an icon that might
  be used if and when the user clicks on the watchstar (and
  irrelevant to logged-out users).

Bug: T121730
Change-Id: Ief4b80432fbe2ce7ebddf429f02c161048ed61d1

components/common.less

@@ -158,6 +158,7 @@ div.emptyPortlet {
 }
 
 ul {
+	// No need for PNG fallback. Fallback is browser default (a smaller, also black, circle).
 	.list-style-image( 'images/bullet-icon.svg' );
 }
 

components/navigation.less

@@ -16,12 +16,8 @@
 /* Head */
 #mw-page-base {
 	height: 5em;
-	background-color: @background-color-base;
-	/* This image is only a fallback (for IE 6-9), so we do not @embed it. */
-	background-image: url( images/page-fade.png );
-	.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
 	background-position: bottom left;
-	background-repeat: repeat-x;
+	.vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
 }
 
 #mw-head-base {
@@ -98,7 +94,7 @@
 		.body {
 			margin-left: @menu-main-body-margin-left;
 			padding-top: 0;
-			.background-image( 'images/portal-break.png' );
+			background-image: url( images/portal-break.png );
 			background-repeat: no-repeat;
 
 			ul {

components/watchstar.less

@@ -39,7 +39,7 @@
 
 	#ca-unwatch.icon a.loading,
 	#ca-watch.icon a.loading {
-		.background-image-svg( 'images/watch-icon-loading.svg', 'images/watch-icon-loading.png' );
+		background-image: url( images/watch-icon-loading.svg );
 		.rotation( 700ms );
 		/* Suppress the hilarious rotating focus outline on Firefox */
 		outline: 0;