Improve wikibase interlanguage link styles

Overrides the `wikibase.client.init` module to
better style the interlanguage link button in
Vector 2022.

Also adds the `.mw-list-item` class to that link
so that it maintains consistency with the other
menu list items.

Bug: T328069
Change-Id: I5c84b7f036afb4b8dc11e92a59dff8000f068e67

resources/skins.vector.js/languageButton.js

@@ -13,7 +13,7 @@ function addInterwikiLinkToMainMenu() {
 		var $li = $( '<li>' )
 			// If the Wikibase code runs last, this class is required so it matches the selector @:
 			// https://gerrit.wikimedia.org/g/mediawiki/extensions/Wikibase/+/f2e96e1b08fc5ae2e2e92f05d5eda137dc6b1bc8/client/resources/wikibase.client.linkitem.init.js#82
-			.addClass( 'wb-langlinks-link' )
+			.addClass( 'wb-langlinks-link mw-list-item' )
 			.append( $editLink );
 		$li.appendTo( '#p-tb ul' );
 	}

skin.json

@@ -446,6 +446,7 @@
 			"+ext.uls.compactlinks": "skinStyles/ext.uls.compactlinks.less",
 			"+ext.uls.interface": "skinStyles/ext.uls.interface.less",
 			"+ext.visualEditor.base": "skinStyles/ext.visualEditor.less",
+			"wikibase.client.init": "skinStyles/wikibase.client.init.css",
 			"jquery.ui": [
 				"skinStyles/jquery.ui/jquery.ui.core.css",
 				"skinStyles/jquery.ui/jquery.ui.theme.css",

skinStyles/images/edit.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+	<path fill="#0645ad" d="M10.5 4.7l1.3-1.3c.3-.3.3-.7 0-.9L9.6.2c-.3-.3-.7-.3-.9 0L7.3 1.5l3.2 3.2zM6.6 2.2L0 8.8V12h3.2l6.6-6.6-3.2-3.2z"/>
+</svg>

skinStyles/wikibase.client.init.css

@@ -0,0 +1,12 @@
+.wb-langlinks-link > a:before {
+	content: '';
+	background-image: url( images/edit.svg );
+	background-position: 2px center;
+	background-repeat: no-repeat;
+	background-size: 10px 10px;
+	display: inline-block;
+	width: 14px; /* extra 2px of white space around the icon */
+	height: 10px;
+	margin-left: -14px;
+	vertical-align: top;
+}