[simple theme] new color theme and result on mobile and tablet

* clean up vars in defenition
* results look now the same on mobile and desktop
* reworked results on mobile
* new color theme with more vibrant colors

5 files changed, 89 insertions, 92 deletions

diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less
index 4dbb68d46..0c0ae3f32 100644
--- a/searx/static/themes/simple/src/less/autocomplete.less
+++ b/searx/static/themes/simple/src/less/autocomplete.less
@@ -48,7 +48,8 @@
   &.open {
     display: block;
     background-color: var(--color-autocomplete-background);
-    border: 1px solid var(--color-base-border);
+    color: var(--color-autocomplete-font);
+    border: 1px solid var(--color-autocomplete-border);
     max-height: 500px;
     overflow-y: auto;
     z-index: 100;
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 14354feca..c3f28fce9 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -6,24 +6,37 @@
 
 html {
   /// Base Colors
-  --color-base: #084999;
   --color-base-font: #444;
-  --color-base-border: #ddd;
-  --color-base-shadow: #ccc;
   --color-base-background: #fff;
   --color-url-font: #29314d;
-  --color-url-visited-font: #684898;
-  --color-header-footer-background: #f7f7f7;
+  --color-url-visited-font: #80b;
+
+  /// Header Colors
+  --color-header-background: #f7f7f7;
+  --color-header-border: #ddd;
+
+  /// Footer Colors
+  --color-footer-background: #f7f7f7;
+  --color-footer-border: #ddd;
+
+  /// Sidebar Colors
+  --color-sidebar-border: #ddd;
+  --color-sidebar-font: #000;
+
+  /// BackToTop Colors
+  --color-backtotop-border: #ddd;
+  --color-backtotop-background: #fff;
+  --color-backtotop-shadow: #ccc;
 
   /// Button Colors
-  --color-btn-background: #084999;
+  --color-btn-background: #3050ff;
   --color-btn-font: #fff;
 
   /// Search Input Colors
-  --color-search-border: #ddd;
+  --color-search-border: #bbb;
   --color-search-background: #fff;
   --color-search-font: #222;
-  --color-search-background-hover: #084999;
+  --color-search-background-hover: #3050ff;
 
   /// Modal Colors
   --color-error: #db3434;
@@ -34,70 +47,65 @@ html {
   --color-success-background: lighten(#42db34, 40%);
 
   /// Categories Colors
-  --color-categories-item-selected-font: #084999;
-  --color-categories-item-border-selected: #084999;
+  --color-categories-item-selected-font: #3050ff;
+  --color-categories-item-border-selected: #3050ff;
 
-  /// Autocompleter Colors
+  /// Autocomplete Colors
+  --color-autocomplete-font: #000;
+  --color-autocomplete-border: #bbb;
   --color-autocomplete-background: #fff;
   --color-autocomplete-background-hover: #f7f7f7;
 
-  /// Results
-  --color-result-torrent-border: lightgray;
-  --color-result-top-border: #e8e7e6;
-  --color-result-vim-selected: #f7f7f7;
-  --color-result-description-highlight-font: #000;
+  /// Answer Colors
+  --color-answer-border: #ddd;
+  --color-answer-font: #000;
 
-  // Link to result
-  --color-result-link-font: #084999;
-  --color-result-link-font-highlight: #084999;
-  --color-result-link-visited-font: var(--color-url-visited-font);
-
-  // Url to result
+  /// Results Colors
+  --color-result-shadow: #ccc;
+  --color-result-border: #ddd;
   --color-result-url-font: #000;
-
-  // Search-URL
-  --color-result-search-url-border: #888;
-  --color-result-search-url-font: #444;
-
-  // Publish Date
+  --color-result-vim-selected: #f7f7f7;
+  --color-result-vim-arrow: #000bbb;
+  --color-result-description-highlight-font: #000;
+  --color-result-link-font: #000bbb;
+  --color-result-link-font-highlight: #000bbb;
+  --color-result-link-visited-font: #80b;
   --color-result-publishdate-font: #777;
+  --color-result-engines-font: #777;
+  --color-result-search-url-border: #ddd;
+  --color-result-search-url-font: #000;
 
-  // Images
+  // Images Colors
   --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
   --color-result-image-span-font: #fff;
-  --color-result-image-background: #084999;
+  --color-result-image-background: #000bbb;
 
-  /// Settings
-  --color-settings-tr-hover: #ececec;
+  /// Settings Colors
+  --color-settings-tr-hover: #f7f7f7;
   --color-settings-engine-description-font: darken(#dcdcdc, 30%);
 
-  /// Other
-  --color-engines-font: #888;
-
-  /// From Toolkit
+  /// Toolkit Colors
   --color-toolkit-badge-font: #fff;
   --color-toolkit-badge-background: #777;
   --color-toolkit-kbd-font: #fff;
   --color-toolkit-kbd-background: #000;
-  --color-toolkit-dialog-border: #000;
+  --color-toolkit-dialog-border: #ddd;
   --color-toolkit-dialog-background: #fff;
   --color-toolkit-tabs-label-border: #fff;
-  --color-toolkit-tabs-section-border: #000;
+  --color-toolkit-tabs-section-border: #ddd;
   --color-toolkit-select-border: #ddd;
-  --color-toolkit-checkbox-onoff-background: #dcdcdc;
+  --color-toolkit-checkbox-onoff-background: #ddd;
   --color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
-  --color-toolkit-checkbox-onoff-label-background: #084999;
-  --color-toolkit-checkbox-onoff-checked-background: #dcdcdc;
+  --color-toolkit-checkbox-onoff-label-background: #3050ff;
+  --color-toolkit-checkbox-onoff-checked-background: #ddd;
   --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: #084999;
-  --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
-  --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
+  --color-toolkit-checkbox-label-border: #ddd;
+  --color-toolkit-checkbox-input-border: #3050ff;
   --color-toolkit-engine-tooltip-border: #ddd;
-  --color-toolkit-engine-tooltip-shadow: rgba(0, 0, 0, 0.1);
+  --color-toolkit-engine-tooltip-shadow: #ccc;
   --color-toolkit-engine-tooltip-background: #fff;
+  --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
+  --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
 }
 
 /// General Size
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index ed692b3b3..36f0011e1 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -5,8 +5,8 @@
 #search {
   padding: 0 2em 0 @results-offset;
   margin: 0;
-  background: var(--color-header-footer-background);
-  border-bottom: 1px solid var(--color-base-border);
+  background: var(--color-header-background);
+  border-bottom: 1px solid var(--color-header-border);
 }
 
 #search_wrapper {
@@ -224,7 +224,7 @@
   }
 
   input[type="checkbox"]:focus + label {
-    box-shadow: 0 0 8px var(--color-base);
+    box-shadow: 0 0 8px var(--color-categories-item-border-selected);
   }
 
   input[type="checkbox"]:checked + label {
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index edc10dbe6..47ae21391 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -40,6 +40,7 @@ html {
   .text-size-adjust;
 
   color: var(--color-base-font);
+  background-color: var(--color-base-background);
   padding: 0;
   margin: 0;
 }
@@ -76,8 +77,8 @@ footer {
   padding: 1rem 0;
   width: 100%;
   text-align: center;
-  background-color: var(--color-header-footer-background);
-  border-top: 1px solid var(--color-base-border);
+  background-color: var(--color-footer-background);
+  border-top: 1px solid var(--color-footer-border);
   overflow: hidden;
 
   p {
@@ -132,11 +133,11 @@ article[data-vim-selected]::before {
   padding: 2px;
   content: ">";
   font-weight: bold;
-  color: var(--color-base);
+  color: var(--color-result-vim-arrow);
 }
 
 article.result-images[data-vim-selected] {
-  background: var(--color-base);
+  background: var(--color-result-vim-arrow);
 }
 
 article.result-images[data-vim-selected]::before {
@@ -256,7 +257,7 @@ article.result-images[data-vim-selected]::before {
 
 .engines {
   float: right;
-  color: var(--color-engines-font);
+  color: var(--color-result-engines-font);
 
   span {
     font-size: smaller;
@@ -337,28 +338,6 @@ article.result-images[data-vim-selected]::before {
   display: none !important;
 }
 
-.torrent_result {
-  border-left: 10px solid var(--color-result-torrent-border);
-  padding-left: 3px;
-
-  p {
-    margin: 3px;
-    font-size: 0.8em;
-  }
-
-  a {
-    color: var(--color-result-link-font);
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:visited {
-      color: var(--color-result-link-visited-font);
-    }
-  }
-}
-
 #results {
   margin: 2rem 2rem 0 @results-offset;
   display: grid;
@@ -448,8 +427,10 @@ article.result-images[data-vim-selected]::before {
 
 #answers {
   grid-area: answers;
-  border: 1px solid var(--color-base-border);
+  border: 1px solid var(--color-answer-border);
   padding: 0.9em;
+  margin-bottom: @results-margin;
+  color: var(--color-answer-font);
   .rounded-corners;
 
   h4 {
@@ -473,10 +454,11 @@ article.result-images[data-vim-selected]::before {
 #sidebar {
   grid-area: sidebar;
   word-wrap: break-word;
+  color: var(--color-sidebar-font);
 
   .infobox {
     margin: 10px 0 10px;
-    border: 1px solid var(--color-base-border);
+    border: 1px solid var(--color-sidebar-border);
     padding: 0.9em;
     font-size: 0.9em;
     .rounded-corners;
@@ -567,12 +549,12 @@ article.result-images[data-vim-selected]::before {
 }
 
 #backToTop {
-  border: 1px solid var(--color-base-border);
+  border: 1px solid var(--color-backtotop-border);
   margin: 0;
   padding: 0;
   font-size: 1em;
-  box-shadow: 0 0 5px var(--color-base-shadow);
-  background: var(--color-base-background);
+  box-shadow: 0 0 5px var(--color-backtotop-shadow);
+  background: var(--color-backtotop-background);
   position: fixed;
   bottom: 8rem;
   left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
@@ -611,6 +593,7 @@ article.result-images[data-vim-selected]::before {
   }
 
   #sidebar {
+    margin-bottom: @results-margin;
     padding: 0;
     float: none;
     border: none;
@@ -630,11 +613,6 @@ article.result-images[data-vim-selected]::before {
   }
 
   .result {
-    border-bottom: 1px solid var(--color-result-top-border);
-    margin: 0;
-    padding-top: 8px;
-    padding-bottom: 6px;
-
     h3 {
       margin: 0 0 1px 0;
     }
@@ -753,9 +731,14 @@ article.result-images[data-vim-selected]::before {
     margin: 0 5px 2px 5px;
   }
 
+  .infobox {
+    box-shadow: 0 0 5px var(--color-result-shadow);
+  }
+
   #corrections,
   #answers {
     margin: 0 5px 1em 5px;
+    box-shadow: 0 0 5px var(--color-result-shadow);
   }
 
   #results {
@@ -769,12 +752,17 @@ article.result-images[data-vim-selected]::before {
 
   .result {
     padding: 8px 10px 6px 10px;
+    margin: @results-tablet-offset;
+    border: 1px solid var(--color-result-border);
+    box-shadow: 0 0 5px var(--color-result-shadow);
+    .rounded-corners;
   }
 
   .result-images {
     margin: 0;
     padding: 0;
     border: none;
+    box-shadow: none;
   }
 }
 
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index 84b5e6a8c..8c92fe488 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/searx/static/themes/simple/src/less/toolkit.less
@@ -392,8 +392,7 @@ select {
       top: 0;
       left: 0;
       background: var(--color-toolkit-checkbox-label-background);
-      border-radius: 4px;
-      box-shadow: inset 0 1px 1px var(--color-toolkit-checkbox-label-shadow1), 0 1px 4px var(--color-toolkit-checkbox-label-shadow2);
+      .rounded-corners;
 
       &::after {
         content: '';
@@ -495,12 +494,13 @@ select {
   padding: 0.5rem 1rem;
   margin: 0 0 0 2rem;
   border: 1px solid var(--color-toolkit-engine-tooltip-border);
-  box-shadow: 2px 2px 2px 0 var(--color-toolkit-engine-tooltip-shadow);
+  box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow);
   background: var(--color-toolkit-engine-tooltip-background);
   font-size: 14px;
   font-weight: normal;
   z-index: 1000000;
   text-align: left;
+  .rounded-corners;
 }
 
 th:hover .engine-tooltip,