[simple theme] update to ion icons 5 and drop webfont

* update from ionicons-npm to ionicons ver.5
* drop the webfont built by grunt for icons
* built icons.html template for inlining icons with jinja2 into html
* update icon to use mostly the outline version
* add icons to categories and do not display them on mobile to save space
* remove all legacy ion icon font files from simple theme
* icons.html is added in this commit since make statc.build.restore requires git to know the file already
* cleanup error-dialog

searx/static/themes/simple/src/fonts/magnet.svg

@@ -1 +0,0 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" width="31mm" height="44mm" viewBox="0 0 31 44" version="1.1"><metadata><rdf:RDF><cc:Work><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/><cc:license rdf:resource="https://www.gnu.org/licenses/agpl-3.0.en.html"/><dc:creator><cc:Agent><dc:title>Alexandre Flament</dc:title></cc:Agent></dc:creator></cc:Work></rdf:RDF></metadata><g fill="#000"><path d="M2.381 28.39H9.79v5.82H2.38z" stroke-width=".049"/><path d="M15.872 10.398c2.381 0 5.82.264 5.82 3.704v12.17c2.47.055 4.94-.001 7.41 0 .02-4.371 0-8.73 0-12.964-.022-3.73-1.158-6.05-3.705-7.937-2.844-2.203-6.144-2.335-9.656-2.347-3.512.012-6.812.144-9.656 2.347-2.547 1.887-3.683 4.207-3.704 7.937 0 4.234-.02 8.593 0 12.965 2.47-.002 4.94.054 7.409 0v-12.17c0-3.44 3.44-3.705 5.82-3.705" stroke="#000" stroke-width=".063" stroke-linecap="butt" stroke-linejoin="miter" stroke-opacity="1"/><path d="M21.696 28.39h7.408v5.82h-7.408z" stroke-width=".049"/></g></svg>

searx/static/themes/simple/src/generated/ion.less

@@ -1,181 +0,0 @@
-// Generated by grunt-webfont
-
-
-
-@font-face {
-	font-family:"ion";
-	src:url("../fonts/ion.eot?31a1b735188db616a2142d17947e8a45");
-	src:url("../fonts/ion.eot?31a1b735188db616a2142d17947e8a45#iefix") format("embedded-opentype"),
-		url("../fonts/ion.woff2?31a1b735188db616a2142d17947e8a45") format("woff2"),
-		url("../fonts/ion.woff?31a1b735188db616a2142d17947e8a45") format("woff"),
-		url("../fonts/ion.ttf?31a1b735188db616a2142d17947e8a45") format("truetype"),
-		url("../fonts/ion.svg?31a1b735188db616a2142d17947e8a45#ion") format("svg");
-	font-weight:normal;
-	font-style:normal;
-}
-
-.ion-icon {
-	&:before {
-		font-family:"ion";
-	}
-	display:inline-block;
-	line-height:1;
-	font-weight:normal;
-	font-style:normal;
-	speak:none;
-	text-decoration:inherit;
-	text-transform:none;
-	text-rendering:auto;
-	-webkit-font-smoothing:antialiased;
-	-moz-osx-font-smoothing:grayscale;
-}
-
-
-// Icons
-
-.ion-navicon-round {
-	&:before {
-		content:"\f101";
-	}
-}
-
-
-.ion-search {
-	&:before {
-		content:"\f102";
-	}
-}
-
-
-.ion-play {
-	&:before {
-		content:"\f103";
-	}
-}
-
-
-.ion-link {
-	&:before {
-		content:"\f104";
-	}
-}
-
-
-.ion-chevron-up {
-	&:before {
-		content:"\f105";
-	}
-}
-
-
-.ion-chevron-left {
-	&:before {
-		content:"\f106";
-	}
-}
-
-
-.ion-chevron-right {
-	&:before {
-		content:"\f107";
-	}
-}
-
-
-.ion-arrow-down-a {
-	&:before {
-		content:"\f108";
-	}
-}
-
-
-.ion-arrow-up-a {
-	&:before {
-		content:"\f109";
-	}
-}
-
-
-.ion-arrow-swap {
-	&:before {
-		content:"\f10a";
-	}
-}
-
-
-.ion-arrow-dropdown {
-	&:before {
-		content:"\f10b";
-	}
-}
-
-
-.ion-globe {
-	&:before {
-		content:"\f10c";
-	}
-}
-
-
-.ion-time {
-	&:before {
-		content:"\f10d";
-	}
-}
-
-
-.ion-location {
-	&:before {
-		content:"\f10e";
-	}
-}
-
-
-.ion-warning {
-	&:before {
-		content:"\f10f";
-	}
-}
-
-
-.ion-error {
-	&:before {
-		content:"\f110";
-	}
-}
-
-
-.ion-film-outline {
-	&:before {
-		content:"\f111";
-	}
-}
-
-
-.ion-music-note {
-	&:before {
-		content:"\f112";
-	}
-}
-
-
-.ion-more-vertical {
-	&:before {
-		content:"\f113";
-	}
-}
-
-
-.ion-magnet {
-	&:before {
-		content:"\f114";
-	}
-}
-
-
-.ion-close {
-	&:before {
-		content:"\f115";
-	}
-}
-

searx/static/themes/simple/src/less/search.less

@@ -16,6 +16,40 @@
     "spacer categories";
 }
 
+.category {
+  display: inline-block;
+  position: relative;
+  margin-right: 1rem;
+  padding: 0;
+
+  input {
+    display: none;
+  }
+
+  label {
+    svg {
+      padding-right: 0.2rem;
+    }
+
+    cursor: pointer;
+    padding: 0.2rem 0;
+    display: inline-flex;
+    text-transform: capitalize;
+    font-size: 0.9em;
+    border-bottom: 2px solid transparent;
+    .disable-user-select;
+
+    div.category_name {
+      margin: auto 0;
+    }
+  }
+
+  input[type="checkbox"]:checked + label {
+    color: var(--color-categories-item-selected-font);
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+}
+
 #search_logo {
   grid-area: logo;
   display: flex;
@@ -79,7 +113,7 @@
   border-collapse: separate;
   box-sizing: border-box;
   margin: 0;
-  padding: 8px;
+  padding: 10px;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: 1px solid var(--color-search-border);
   border-radius: 0;
@@ -156,7 +190,6 @@
 
       #categories {
         width: 100%;
-        margin: 0;
         text-align: left;
         overflow-x: scroll;
         overflow-y: hidden;
@@ -188,7 +221,7 @@
   }
 
   .search_box {
-    // hack, should bew 100% ?
+    // hack, should be 100% ?
     width: 99%;
     margin: 0.1em;
     padding: 0 0.1em 0 0;
@@ -219,9 +252,15 @@
   .category {
     display: block;
     width: 100%;
+    margin: 0;
 
     label {
-      padding: 10px !important;
+      padding: 0.8rem !important;
+      margin: 0 !important;
+
+      svg {
+        display: none;
+      }
     }
   }
 }
@@ -239,7 +278,6 @@
 }
 
 #categories {
-  margin: 0 10px 0 0;
   .disable-user-select;
 
   &::-webkit-scrollbar {
@@ -248,33 +286,6 @@
   }
 }
 
-.category {
-  display: inline-block;
-  position: relative;
-  margin: 0 3px;
-  padding: 0;
-
-  input {
-    display: none;
-  }
-
-  label {
-    cursor: pointer;
-    padding: 0.3rem 0.75rem 0.5rem 0.75rem;
-    margin: 0;
-    display: block;
-    text-transform: capitalize;
-    font-size: 0.9em;
-    border-bottom: 2px solid transparent;
-    .disable-user-select;
-  }
-
-  input[type="checkbox"]:checked + label {
-    color: var(--color-categories-item-selected-font);
-    border-bottom: 2px solid var(--color-categories-item-border-selected);
-  }
-}
-
 #categories_container {
   position: relative;
 }

searx/static/themes/simple/src/less/style.less

@@ -10,7 +10,6 @@
 @import "../../__common__/less/stats.less";
 @import "../../__common__/less/result_templates.less";
 @import (inline) "../../node_modules/normalize.css/normalize.css";
-@import "../generated/ion.less";
 @import "definitions.less";
 @import "mixins.less";
 @import "code.less";
@@ -28,10 +27,23 @@
 @import "search.less";
 
 // ion-icon
-.ion-icon-big {
-  .ion-icon;
+.ion-icon {
+  display: inline-block;
+  vertical-align: bottom;
+  line-height: 1;
+  text-decoration: inherit;
+}
 
-  font-size: 149%;
+.ion-icon-small {
+  width: 1rem;
+  height: 1rem;
+  .ion-icon;
+}
+
+.ion-icon-big {
+  width: 1.5rem;
+  height: 1.5rem;
+  .ion-icon;
 }
 
 // Main LESS-Code
@@ -530,7 +542,7 @@ article[data-vim-selected].category-social {
 #linkto_preferences {
   position: absolute;
   right: 10px;
-  top: 2rem;
+  top: 2.2rem;
   padding: 0;
   border: 0;
   display: block;

searx/static/themes/simple/src/less/toolkit.less

@@ -121,20 +121,13 @@ div.selectable_url {
 // dialog
 .dialog() {
   position: relative;
-  padding: 1em 1em 1em 2.7em;
+  display: flex;
+  padding: 1rem;
   margin: 0 0 1em 0;
   border: 1px solid var(--color-toolkit-dialog-border);
   text-align: left;
   .rounded-corners;
 
-  &::before {
-    position: absolute;
-    top: 0.5em;
-    left: 0.5em;
-    font-family: "ion"; // stylelint-disable font-family-no-missing-generic-family-keyword
-    font-size: 1.5em;
-  }
-
   .close {
     float: right;
     position: relative;
@@ -177,7 +170,6 @@ div.selectable_url {
   color: var(--color-error);
   background: var(--color-error-background);
   border-color: var(--color-error);
-  .ion-error();
 }
 
 .dialog-warning {
@@ -186,7 +178,6 @@ div.selectable_url {
   color: var(--color-warning);
   background: var(--color-warning-background);
   border-color: var(--color-warning);
-  .ion-warning();
 }
 
 .dialog-modal {