Simplified search bar

The last one didn't stage all the files

includes/SkinCitizen.php

@@ -234,8 +234,6 @@ class SkinCitizen extends SkinTemplate {
 			'skins.citizen.styles.fonts',
 			'skins.citizen.icons',
 			'skins.citizen.icons.ca',
-			'skins.citizen.icons.p',
-			'skins.citizen.icons.toc',
 			'skins.citizen.icons.es',
 			'skins.citizen.icons.n',
 			'skins.citizen.icons.t',

includes/templates/Searchbox.mustache

@@ -27,5 +27,6 @@
 <form action="{{form-action}}" role="search" id="searchform">
 	<input type="hidden" name="title" value="{{page-title}}">
 	<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>
+	<div id="searchform-icon"></div>
 	{{{html-input}}}
 </form>

resources/components/Searchbox.less

@@ -3,8 +3,6 @@
 // https://starcitizen.tools
 //
 
-@search-bar-icon-size: 14px;
-
 #search {
 	&form {
 		position: absolute;

resources/skins.citizen.icons/toc-rtl.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		stripe ToC
+	</title>
+	<path d="M1 3h14v2H1zm0 6h14v2H1zm0 6h14v2H1zM17 3h2v2h-2zm0 6h2v2h-2zm0 6h2v2h-2z"/>
+</svg>

resources/skins.citizen.styles.search/search.less

@@ -6,8 +6,6 @@
 @import '../variables.less';
 @import '../mixins.less';
 
-@suggestion-max-width: 400px + @icon-box-size + @icon-padding * 2; // 454px
-
 #typeahead-suggestions {
 	position: absolute;
 	top: 42px;
@@ -15,7 +13,7 @@
 }
 
 .suggestions-dropdown {
-	width: @suggestion-max-width;
+	width: @search-bar-width;
 	max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
 	display: flex; // Needed to show margin
 	flex-direction: column;
@@ -128,7 +126,7 @@ a.suggestion-link:hover {
 	}
 }
 
-@media only screen and ( max-width: @suggestion-max-width ) {
+@media only screen and ( max-width: @search-bar-width ) {
 	.suggestions-dropdown {
 		position: fixed;
 		left: 0;

resources/variables.less

@@ -24,6 +24,10 @@
 @padding-menu-item-big: 10px 20px;
 @negative-margin: (@footer-width - @page-width) / -2;
 
+@search-bar-width: 454px;
+@search-bar-height: 42px;
+@search-bar-icon-size: 14px;
+
 @border-radius-small: 4px;
 @border-radius-medium: @border-radius-small * 2;
 @border-radius-large: @border-radius-small * 3;

skin.json

@@ -222,6 +222,22 @@
 				"resources/skins.citizen.scripts.lazyload/lazyload.js"
 			]
 		},
+		"skins.citizen.icons": {
+			"class": "ResourceLoaderImageModule",
+			"selector": "{name}",
+			"defaultColor": "#000",
+			"useDataURI": false,
+			"images": {
+				".toctoggle > a:before": {
+					"file": {
+						"ltr": "resources/skins.citizen.icons/toc-ltr.svg",
+						"rtl": "resources/skins.citizen.icons/toc-rtl.svg"
+					}
+				},
+				"#p-actions:before": "resources/skins.citizen.icons/more.svg",
+				"#searchform-icon": "resources/images/icons/search.svg"
+			}
+		},
 		"skins.citizen.icons.ca": {
 			"class": "ResourceLoaderImageModule",
 			"selector": "#ca-{name} > *:after",
@@ -244,24 +260,6 @@
 				"translate": "resources/images/icons/language.svg"
 			}
 		},
-		"skins.citizen.icons.p": {
-			"class": "ResourceLoaderImageModule",
-			"selector": "#p-{name}:before",
-			"defaultColor": "#000",
-			"useDataURI": false,
-			"images": {
-				"actions": "resources/images/icons/more.svg"
-			}
-		},
-		"skins.citizen.icons.toc": {
-			"class": "ResourceLoaderImageModule",
-			"selector": ".toctoggle > a:before",
-			"defaultColor": "#000",
-			"useDataURI": false,
-			"images": {
-				"": "resources/images/icons/ToC.svg"
-			}
-		},
 		"skins.citizen.icons.es": {
 			"class": "ResourceLoaderImageModule",
 			"selector": ".mw-editsection > a{name}:before",