Use consistent close icon

Using close icon of WikimediaUI icon collection, which is also
already in use by OOUI.

Bug: T50067
Bug: T175295
Change-Id: I83e435a7215708c5a5eae77eeca29632ed64f608

resources/css/ext.uls.languagesettings.less

@@ -142,11 +142,10 @@ label.checkbox input[type='checkbox'] {
 }
 
 .uls-icon-close {
-	background: transparent url( ../images/close.png ) no-repeat scroll center center;
-	background-image: -webkit-linear-gradient( transparent, transparent ), url( ../images/close.svg );
-	/* @embed */
-	background-image: linear-gradient( transparent, transparent ), url( ../images/close.svg );
+	background: transparent no-repeat center center;
+	.background-image-svg( '../images/close.svg', '../images/close.png' );
+	background-size: 16px 16px; // Support: Android Browser <= 4.3, doesn't accept it as part of `background` shorthand
 	float: right;
-	padding: 15px;
+	padding: 16px;
 	cursor: pointer;
 }

resources/images/close.svg

@@ -1 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="13.592" height="13.592"><g transform="translate(-578.659 -309.301)" fill="#555"><rect width="3.204" height="16.018" x="188.862" y="629.484" transform="rotate(-45)"/><rect width="3.204" height="16.018" x="-639.095" y="182.455" transform="matrix(-.707 -.707 .707 -.707 0 0)"/></g></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<path d="M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z"/>
+	<path d="M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z"/>
+</svg>