Use background-image-svg mixin for SVG/PNG fallbacks

Change-Id: I00266b088b16fa749f3ee59d9ce4890ed025c887

extension.json

@@ -109,7 +109,7 @@
 		},
 		"ext.uls.displaysettings": {
 			"scripts": "js/ext.uls.displaysettings.js",
-			"styles": "css/ext.uls.displaysettings.css",
+			"styles": "css/ext.uls.displaysettings.less",
 			"dependencies": [
 				"ext.uls.languagesettings",
 				"ext.uls.mediawiki",
@@ -174,7 +174,7 @@
 		},
 		"ext.uls.inputsettings": {
 			"scripts": "js/ext.uls.inputsettings.js",
-			"styles": "css/ext.uls.inputsettings.css",
+			"styles": "css/ext.uls.inputsettings.less",
 			"dependencies": [
 				"ext.uls.ime",
 				"ext.uls.languagesettings",
@@ -350,12 +350,12 @@
 			"remoteExtPath": "UniversalLanguageSelector/lib"
 		},
 		"ext.uls.pt": {
-			"styles": "css/ext.uls.pt.css",
+			"styles": "css/ext.uls.pt.less",
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
 		},
 		"ext.uls.interlanguage": {
-			"styles": "css/ext.uls.interlanguage.css",
+			"styles": "css/ext.uls.interlanguage.less",
 			"localBasePath": "resources",
 			"remoteExtPath": "UniversalLanguageSelector/resources"
 		},

resources/css/ext.uls.displaysettings.less

@@ -1,10 +1,8 @@
+@import "mediawiki.mixins";
+
 div.display-settings-block {
-	/* @embed */
+	background: transparent no-repeat left top;
-	background: transparent url('../images/display.png') no-repeat left top;
+	.background-image-svg( '../images/display.svg', '../images/display.png' );
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/display.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/display.svg');
 	background-size: 20px auto;
 	color: #252525;
 	padding-left: 26px;

resources/css/ext.uls.inputsettings.less

@@ -1,10 +1,8 @@
+@import "mediawiki.mixins";
+
 div.input-settings-block {
-	/* @embed */
+	background: transparent no-repeat left top;
-	background: transparent url('../images/input.png') no-repeat left top;
+	.background-image-svg( '../images/input.svg', '../images/input.png' );
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/input.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/input.svg');
 	background-size: 20px auto;
 	color: #252525;
 	padding-left: 26px;
@@ -37,12 +35,8 @@ div.input-settings-block {
 }
 
 .uls-ime-disable-link {
-	/* @embed */
+	background: transparent no-repeat left top;
-	background: transparent url('../images/remove-input.png') no-repeat left top;
+	.background-image-svg( '../images/remove-input.svg', '../images/remove-input.png' );
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/remove-input.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/remove-input.svg');
 	background-size: auto 16px;
 	padding-left: 22px;
 	padding-right: 26px;
@@ -51,12 +45,8 @@ div.input-settings-block {
 }
 
 .uls-ime-more-settings-link {
-	/* @embed */
+	background: transparent no-repeat center top;
-	background: transparent url('../images/cog.png') no-repeat center top;
+	.background-image-svg( '../images/cog.svg', '../images/cog.png' );
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/cog.svg');
 	background-size: auto 14px;
 	border-left: 1px solid #CCCCCC;
 	width: 22px;
@@ -134,12 +124,8 @@ div.input-settings-block {
 	right: 0;
 	opacity: 0.75;
 	padding: 0;
-	/* @embed */
+	background: transparent no-repeat left center;
-	background: transparent url('../images/help.png') left center no-repeat;
+	.background-image-svg( '../images/help.svg', '../images/help.png' );
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/help.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/help.svg');
 }
 
 .ime-checked .ime-perime-help:hover {

resources/css/ext.uls.interlanguage.css

@@ -1,21 +0,0 @@
-#p-lang .uls-settings-trigger {
-	/* @embed */
-	background: transparent url('../images/cog-sprite.png') no-repeat right top;
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../images/cog-sprite.svg');
-	height: 16px;
-	width: 14px;
-	float: right;
-	cursor: pointer;
-}
-
-.skin-vector #p-lang .uls-settings-trigger {
-	/* Put it in the middle of the first row of the section title */
-	margin-top: 3px;
-}
-
-#p-lang .uls-settings-trigger:hover {
-	background-position: right -16px;
-}

resources/css/ext.uls.interlanguage.less

@@ -0,0 +1,19 @@
+@import "mediawiki.mixins";
+
+#p-lang .uls-settings-trigger {
+	background: transparent no-repeat right top;
+	.background-image-svg( '../images/cog-sprite.svg', '../images/cog-sprite.png' );
+	height: 16px;
+	width: 14px;
+	float: right;
+	cursor: pointer;
+}
+
+.skin-vector #p-lang .uls-settings-trigger {
+	/* Put it in the middle of the first row of the section title */
+	margin-top: 3px;
+}
+
+#p-lang .uls-settings-trigger:hover {
+	background-position: right -16px;
+}

resources/css/ext.uls.pt.less

@@ -1,3 +1,5 @@
+@import "mediawiki.mixins";
+
 /*
  * The trigger can be placed in the personal toolbar near the username
  * or near the interlanguage links.
@@ -8,12 +10,8 @@
  * Copied from jquery.uls.css with the path changed.
  */
 .uls-trigger {
-	/* @embed */
+	background: transparent no-repeat scroll left center;
-	background: transparent url('../../lib/jquery.uls/images/icon-language.png') no-repeat scroll left center;
+	.background-image-svg( '../../lib/jquery.uls/images/icon-language.svg', '../../lib/jquery.uls/images/icon-language.png' );
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url('../../lib/jquery.uls/images/icon-language.svg');
 	padding-left: 30px;
 }