Redo Color Theme and css cleanup

* remove vars and add elements to base and btn vars
* change default border radius to 10px and padding to 0.7em
* put border radius and padding on search input form, infoxbox and buttons
* remove unused .help class in #categories_container
* remove active background from tabs to straemline design
* redo search form: 10px padding
* 2rem margin on search results on desktop
* fix modal pacement of engine reliability in prefs
* use darker accent colors
* streamline autocomplete with more padding and a hover effect

1 files changed, 10 insertions, 29 deletions

diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index db12289cb..ed692b3b3 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -5,12 +5,12 @@
 #search {
   padding: 0 2em 0 @results-offset;
   margin: 0;
-  background: var(--color-header-background);
+  background: var(--color-header-footer-background);
   border-bottom: 1px solid var(--color-base-border);
 }
 
 #search_wrapper {
-  padding: 10px 0;
+  padding: 20px 0 10px 0;
 }
 
 .search_box {
@@ -32,8 +32,7 @@
   box-sizing: border-box;
   width: 1.8em;
   margin: 0;
-  padding: 2px;
-  height: 2.2em;
+  padding: 8px 2px;
   background: none repeat scroll 0 0 var(--color-search-background);
   border-top: 1px solid var(--color-search-border);
   border-bottom: 1px solid var(--color-search-border);
@@ -46,7 +45,7 @@
   z-index: 10000;
 
   &:hover {
-    color: var(--color-search-border);
+    color: var(--color-search-background-hover);
   }
 
   &.empty * {
@@ -60,8 +59,7 @@
   border-collapse: separate;
   box-sizing: border-box;
   margin: 0;
-  padding: 2px;
-  height: 2.2em;
+  padding: 8px;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: 1px solid var(--color-search-border);
   border-radius: 0;
@@ -73,10 +71,11 @@
 
 #q {
   outline: medium none;
-  padding-left: 8px;
+  padding-left: 12px;
   padding-right: 0 !important;
   border-right: none;
   width: @search-width;
+  border-radius: 10px 0 0 10px;
 }
 
 #q::-ms-clear,
@@ -86,12 +85,12 @@
 
 #send_search {
   border-left: none;
-  width: 2.2em;
+  border-radius: 0 10px 10px 0;
 
   &:hover {
     cursor: pointer;
-    background-color: var(--color-search-border);
-    color: var(--color-base-light);
+    background-color: var(--color-search-background-hover);
+    color: var(--color-search-background);
   }
 }
 
@@ -229,7 +228,6 @@
   }
 
   input[type="checkbox"]:checked + label {
-    background: var(--color-categories-item-selected);
     color: var(--color-categories-item-selected-font);
     border-bottom: 2px solid var(--color-categories-item-border-selected);
   }
@@ -237,21 +235,4 @@
 
 #categories_container {
   position: relative;
-
-  .help {
-    position: absolute;
-    width: 100%;
-    bottom: -20px;
-    overflow: hidden;
-    opacity: 0;
-    transition: opacity 1s ease;
-    font-size: 0.8em;
-    text-align: center;
-    background: var(--color-search-help);
-  }
-
-  &:hover .help {
-    opacity: 0.8;
-    transition: opacity 1s ease;
-  }
 }