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

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

@@ -5,11 +5,12 @@
   max-height: 0;
   overflow-y: hidden;
   text-align: left;
+  .rounded-corners;
 
   &:active,
   &:focus,
   &:hover {
-    background-color: var(--color-autocompoleter-background);
+    background-color: var(--color-autocomplete-background);
   }
 
   &:empty {
@@ -23,12 +24,13 @@
 
     > li {
       cursor: pointer;
-      padding: 5px 0 5px 10px;
+      padding: 8px 0 8px 8px;
 
       &.active,
       &:active,
-      &:focus {
+      &:focus,
-        background-color: var(--color-base);
+      &:hover {
+        background-color: var(--color-autocomplete-background-hover);
 
         a:active,
         a:focus,
@@ -45,8 +47,8 @@
 
   &.open {
     display: block;
-    background-color: var(--color-autocompleter-background);
+    background-color: var(--color-autocomplete-background);
-    border: 1px solid var(--color-base);
+    border: 1px solid var(--color-base-border);
     max-height: 500px;
     overflow-y: auto;
     z-index: 100;
@@ -63,7 +65,6 @@
   }
 
   .autocomplete > ul > li {
-    padding: 7px 0 7px 10px;
     border-bottom: 1px solid var(--color-result-top-border);
     text-align: left;
   }

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

@@ -5,14 +5,25 @@
  */
 
 html {
-  /// Basic Colors
+  /// Base Colors
-  --color-base: #3498db;
+  --color-base: #084999;
-  --color-base-dark: #084999;
+  --color-base-font: #444;
-  --color-base-light: #ecf0f1;
+  --color-base-border: #ddd;
-  --color-highlight: #094089;
-  --color-black: #000;
-  --color-base-border: #d7d7d7;
   --color-base-shadow: #ccc;
+  --color-base-background: #fff;
+  --color-url-font: #29314d;
+  --color-url-visited-font: #684898;
+  --color-header-footer-background: #f7f7f7;
+
+  /// Button Colors
+  --color-btn-background: #084999;
+  --color-btn-font: #fff;
+
+  /// Search Input Colors
+  --color-search-border: #ddd;
+  --color-search-background: #fff;
+  --color-search-font: #222;
+  --color-search-background-hover: #084999;
 
   /// Modal Colors
   --color-error: #db3434;
@@ -22,68 +33,46 @@ html {
   --color-success: #42db34;
   --color-success-background: lighten(#42db34, 40%);
 
-  /// General Colors
+  /// Categories Colors
-  --color-font: #444;
+  --color-categories-item-selected-font: #084999;
-  --color-font-light: #888;
+  --color-categories-item-border-selected: #084999;
-  --color-url-font: #29314d;
-  --color-url-visited-font: #684898;
 
-  /// Header
+  /// Autocompleter Colors
-  --color-header-background: #f7f7f7;
+  --color-autocomplete-background: #fff;
-
+  --color-autocomplete-background-hover: #f7f7f7;
-  /// Footer
-  --color-footer-background: #f7f7f7;
-
-  /// Search-Input
-  --color-search-border: var(--color-base);
-  --color-search-background: #fff;
-  --color-search-font: #222;
-  --color-search-help: white;
-
-  /// Autocompleter
-  --color-autocompleter-background: white;
-
-  /// Categories
-  --color-categories-item-selected: var(--color-base);
-  --color-categories-item-selected-font: #fff;
-  --color-categories-item-border-selected: var(--color-base-dark);
-  --color-categories-item-border-unselected: #e8e7e6;
 
   /// Results
-  --color-download-button-background: var(--color-base);
-  --color-download-button-font: #fff;
   --color-result-torrent-border: lightgray;
   --color-result-top-border: #e8e7e6;
   --color-result-vim-selected: #f7f7f7;
+  --color-result-description-highlight-font: #000;
 
   // Link to result
-  --color-result-link-font: var(--color-base-dark);
+  --color-result-link-font: #084999;
+  --color-result-link-font-highlight: #084999;
   --color-result-link-visited-font: var(--color-url-visited-font);
 
   // Url to result
-  --color-result-url-font: #25a55b;
+  --color-result-url-font: #000;
-
-  // Publish Date
-  --color-result-publishdate-font: var(--color-font-light);
-
-  // Images
-  --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
-  --color-result-image-span-font: #fff;
 
   // Search-URL
   --color-result-search-url-border: #888;
   --color-result-search-url-font: #444;
 
+  // Publish Date
+  --color-result-publishdate-font: #777;
+
+  // Images
+  --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
+  --color-result-image-span-font: #fff;
+  --color-result-image-background: #084999;
+
   /// Settings
   --color-settings-tr-hover: #ececec;
   --color-settings-engine-description-font: darken(#dcdcdc, 30%);
 
-  // Labels
-  --color-settings-return-background: var(--color-base);
-  --color-settings-return-font: #fff;
-
   /// Other
-  --color-engines-font: var(--color-font-light);
+  --color-engines-font: #888;
 
   /// From Toolkit
   --color-toolkit-badge-font: #fff;
@@ -94,16 +83,16 @@ html {
   --color-toolkit-dialog-background: #fff;
   --color-toolkit-tabs-label-border: #fff;
   --color-toolkit-tabs-section-border: #000;
-  --color-toolkit-select-border: #d7d7d7;
+  --color-toolkit-select-border: #ddd;
   --color-toolkit-checkbox-onoff-background: #dcdcdc;
   --color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
-  --color-toolkit-checkbox-onoff-label-background: #3498db;
+  --color-toolkit-checkbox-onoff-label-background: #084999;
   --color-toolkit-checkbox-onoff-checked-background: #dcdcdc;
   --color-toolkit-checkbox-label-background: #fff;
   --color-toolkit-checkbox-label-shadow1: #fff;
   --color-toolkit-checkbox-label-shadow2: rgba(0, 0, 0, 0.5);
   --color-toolkit-checkbox-label-border: #333;
-  --color-toolkit-checkbox-input-border: #3498db;
+  --color-toolkit-checkbox-input-border: #084999;
   --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
   --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
   --color-toolkit-engine-tooltip-border: #ddd;
@@ -116,6 +105,7 @@ html {
 @results-offset: 10rem;
 @results-tablet-offset: 0.5rem;
 @results-gap: 5rem;
+@results-margin: 2rem;
 @search-width: 40rem;
 
 /// From style.less

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

@@ -10,7 +10,7 @@
   text-size-adjust: @property;
 }
 
-.rounded-corners (@radius: 4px) {
+.rounded-corners (@radius: 10px) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
   border-radius: @radius;

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

@@ -1,9 +1,3 @@
-.column-reliability {
-  .engine-tooltip {
-    right: 12rem;
-  }
-}
-
 #tab-contentquery table td,
 #tab-contentquery table th {
   text-align: left !important;
@@ -83,15 +77,15 @@
   }
 
   .preferences_back {
-    background: none repeat scroll 0 0 var(--color-settings-return-background);
+    background: none repeat scroll 0 0 var(--color-btn-background);
-    color: var(--color-settings-return-font);
+    color: var(--color-btn-font);
     border: 0 none;
     .rounded-corners;
 
     cursor: pointer;
     display: inline-block;
     margin: 2px 4px;
-    padding: 0.5em;
+    padding: 0.7em;
 
     a {
       display: block;

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;
+  padding: 8px 2px;
-  height: 2.2em;
   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;
+  padding: 8px;
-  height: 2.2em;
   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);
+    background-color: var(--color-search-background-hover);
-    color: var(--color-base-light);
+    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;
-  }
 }

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

@@ -39,7 +39,7 @@ html {
   font-size: 0.9em;
   .text-size-adjust;
 
-  color: var(--color-font);
+  color: var(--color-base-font);
   padding: 0;
   margin: 0;
 }
@@ -76,7 +76,7 @@ footer {
   padding: 1rem 0;
   width: 100%;
   text-align: center;
-  background-color: var(--color-footer-background);
+  background-color: var(--color-header-footer-background);
   border-top: 1px solid var(--color-base-border);
   overflow: hidden;
 
@@ -99,10 +99,10 @@ footer {
 
 input[type="submit"],
 #results button[type="submit"] {
-  padding: 0.5rem;
+  padding: 0.7rem;
   display: inline-block;
-  background: var(--color-download-button-background);
+  background: var(--color-btn-background);
-  color: var(--color-download-button-font);
+  color: var(--color-btn-font);
   .rounded-corners;
 
   border: 0;
@@ -145,7 +145,7 @@ article.result-images[data-vim-selected]::before {
 }
 
 .result {
-  margin: 19px 0 18px 0;
+  margin: @results-margin 0;
   padding: 0;
 
   h3 {
@@ -191,7 +191,7 @@ article.result-images[data-vim-selected]::before {
     line-height: 1.24;
 
     .highlight {
-      color: var(--color-black);
+      color: var(--color-result-description-highlight-font);
       background: inherit;
       font-weight: bold;
     }
@@ -226,7 +226,6 @@ article.result-images[data-vim-selected]::before {
       width: 20em;
       min-width: 20em;
       min-height: 8em;
-      // background: var(--color-base-light);
     }
 
     &.image {
@@ -270,9 +269,8 @@ article.result-images[data-vim-selected]::before {
 }
 
 .highlight {
-  color: var(--color-highlight);
+  color: var(--color-result-link-font-highlight);
   background: inherit;
-  font-weight: bold;
 }
 
 .result-images {
@@ -288,7 +286,7 @@ article.result-images[data-vim-selected]::before {
     padding: 0;
     border: none;
     max-height: 200px;
-    background: var(--color-base-dark);
+    background: var(--color-result-image-background);
   }
 
   span a {
@@ -445,14 +443,14 @@ article.result-images[data-vim-selected]::before {
 #search_url .title,
 #apis .title {
   margin: 2em 0 0.5em 0;
-  color: var(--color-font);
+  color: var(--color-base-font);
 }
 
 #answers {
   grid-area: answers;
   border: 1px solid var(--color-base-border);
   padding: 0.9em;
-  box-shadow: 0 0 5px var(--color-base-shadow);
+  .rounded-corners;
 
   h4 {
     display: none;
@@ -481,7 +479,7 @@ article.result-images[data-vim-selected]::before {
     border: 1px solid var(--color-base-border);
     padding: 0.9em;
     font-size: 0.9em;
-    box-shadow: 0 0 5px var(--color-base-shadow);
+    .rounded-corners;
 
     h2 {
       margin: 0 0 0.5em 0;
@@ -574,17 +572,18 @@ article.result-images[data-vim-selected]::before {
   padding: 0;
   font-size: 1em;
   box-shadow: 0 0 5px var(--color-base-shadow);
-  background: white;
+  background: var(--color-base-background);
   position: fixed;
   bottom: 8rem;
   left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
   transition: opacity 0.5s;
   opacity: 0;
+  .rounded-corners;
 
   a {
     display: block;
     margin: 0;
-    padding: 0.6em;
+    padding: 0.7em;
   }
 }
 

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

@@ -123,8 +123,8 @@ div.selectable_url {
   padding: 1em 1em 1em 2.7em;
   margin: 0 0 1em 0;
   border: 1px solid var(--color-toolkit-dialog-border);
-  border-radius: 4px;
   text-align: left;
+  .rounded-corners;
 
   &::before {
     position: absolute;