Compact links: Add png background image for trigger

Converted the css to less file too.

Change-Id: I2f01c170336b0d19f0dbac10ebd9a3eac769d104

resources/css/ext.uls.compactlinks.less

@@ -0,0 +1,53 @@
+@import "mediawiki.mixins";
+
+#p-lang .body ul .uls-trigger,
+#p-lang .pBody ul .uls-trigger {
+	background-image: none;
+	padding: 0;
+}
+
+.mw-interlanguage-selector,
+.mw-interlanguage-selector:active {
+	cursor: pointer;
+	padding: 4px 6px 4px 25px;
+	font-size: 13px;
+	font-weight: 400;
+	.background-image-svg( '../images/compact-links-trigger.svg', '../images/compact-links-trigger.png' );
+	background-size: 18px;
+	background-repeat: no-repeat;
+	background-position: left 4px center;
+	margin: 4px 0;
+	text-align: left;
+}
+
+.interlanguage-uls-menu:before {
+	background: none repeat scroll 0 0 #FCFCFC;
+	border-left: 1px solid rgba( 0, 0, 0, 0.2 );
+	border-top: 1px solid rgba( 0, 0, 0, 0.2 );
+	box-shadow: -2px -2px 2px rgba( 0, 0, 0, 0.1 );
+	content: "";
+	height: 24px;
+	width: 24px;
+	left: -13px;
+	position: absolute;
+	/* The dialog middle is positioned 250px away from the center of the trigger. Substract 12 for
+	 * half of the box height to center middle of the box rather than the top.  The remaining 2 are
+	 * either for top-margin of the menu and border of this box, or because we use do not account
+	 * for the margin of the trigger when we use $.fn.outerWidth without true as a parameter.
+	 */
+	top: 236px;
+	transform: rotate( -45deg );
+	-webkit-transform: rotate( -45deg );
+	-moz-transform: rotate( -45deg );
+	-o-transform: rotate( -45deg );
+	-ms-transform: rotate( -45deg );
+	background-clip: padding-box;
+}
+
+body.rtl .interlanguage-uls-menu:before {
+	transform: rotate( 45deg );
+	-webkit-transform: rotate( 45deg );
+	-moz-transform: rotate( 45deg );
+	-o-transform: rotate( 45deg );
+	-ms-transform: rotate( 45deg );
+}