From 452b26638756e8412566bc320959402f6016565f Mon Sep 17 00:00:00 2001
From: MrPaulBlack <paul.accounts@protonmail.com>
Date: Tue, 28 Sep 2021 22:41:56 +0200
Subject: [theme] convert less vars to css vars in simple theme

---
 searx/static/themes/simple/src/less/style.less | 60 +++++++++++++-------------
 1 file changed, 30 insertions(+), 30 deletions(-)

(limited to 'searx/static/themes/simple/src/less/style.less')

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index d010b9026..920d23c23 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -41,7 +41,7 @@ html {
   font-size: 0.9em;
   .text-size-adjust;
 
-  color: @color-font;
+  color: var(--color-font);
   padding: 0;
   margin: 0;
 }
@@ -78,8 +78,8 @@ footer {
   padding: 1rem 0;
   width: 100%;
   text-align: center;
-  background-color: @color-footer-background;
-  border-top: 1px solid @color-footer-border;
+  background-color: var(--color-footer-background);
+  border-top: 1px solid var(--color-footer-border);
   overflow: hidden;
 
   p {
@@ -103,8 +103,8 @@ input[type="submit"],
 #results button[type="submit"] {
   padding: 0.5rem;
   display: inline-block;
-  background: @color-download-button-background;
-  color: @color-download-button-font;
+  background: var(--color-download-button-background);
+  color: var(--color-download-button-font);
   .rounded-corners;
 
   border: 0;
@@ -113,13 +113,13 @@ input[type="submit"],
 
 a {
   text-decoration: none;
-  color: @color-url-font;
+  color: var(--color-url-font);
 
   &:visited {
-    color: @color-url-visited-font;
+    color: var(--color-url-visited-font);
 
     .highlight {
-      color: @color-url-visited-font;
+      color: var(--color-url-visited-font);
     }
   }
 }
@@ -134,11 +134,11 @@ article[data-vim-selected]::before {
   padding: 2px;
   content: ">";
   font-weight: bold;
-  color: @color-base;
+  color: var(--color-base);
 }
 
 article.result-images[data-vim-selected] {
-  background: @color-base;
+  background: var(--color-base);
 }
 
 article.result-images[data-vim-selected]::before {
@@ -158,12 +158,12 @@ article.result-images[data-vim-selected]::before {
     margin-bottom: 0;
 
     a {
-      color: @color-result-link-font;
+      color: var(--color-result-link-font);
       font-weight: normal;
       font-size: 1.1em;
 
       &:visited {
-        color: @color-result-link-visited-font;
+        color: var(--color-result-link-visited-font);
       }
 
       &:focus,
@@ -193,7 +193,7 @@ article.result-images[data-vim-selected]::before {
     line-height: 1.24;
 
     .highlight {
-      color: @color-black;
+      color: var(--color-black);
       background: inherit;
       font-weight: bold;
     }
@@ -213,12 +213,12 @@ article.result-images[data-vim-selected]::before {
     padding: 0;
     max-width: 54em;
     word-wrap: break-word;
-    color: @color-result-url-font;
+    color: var(--color-result-url-font);
   }
 
   .published_date {
     font-size: 0.8em;
-    color: @color-result-publishdate-font;
+    color: var(--color-result-publishdate-font);
   }
 
   img {
@@ -228,7 +228,7 @@ article.result-images[data-vim-selected]::before {
       width: 20em;
       min-width: 20em;
       min-height: 8em;
-      // background: @color-base-light;
+      // background: var(--color-base-light);
     }
 
     &.image {
@@ -259,7 +259,7 @@ article.result-images[data-vim-selected]::before {
 
 .engines {
   float: right;
-  color: @color-engines-font;
+  color: var(--color-engines-font);
 
   span {
     font-size: smaller;
@@ -272,7 +272,7 @@ article.result-images[data-vim-selected]::before {
 }
 
 .highlight {
-  color: @color-highlight;
+  color: var(--color-highlight);
   background: inherit;
   font-weight: bold;
 }
@@ -290,12 +290,12 @@ article.result-images[data-vim-selected]::before {
     padding: 0;
     border: none;
     max-height: 200px;
-    background: @color-base-dark;
+    background: var(--color-base-dark);
   }
 
   span a {
     display: none;
-    color: @color-result-image-span-font;
+    color: var(--color-result-image-span-font);
   }
 
   &:hover span a {
@@ -305,7 +305,7 @@ article.result-images[data-vim-selected]::before {
     right: 0;
     padding: 4px;
     margin: 0 0 4px 4px;
-    background-color: @color-result-image-span-background-hover;
+    background-color: var(--color-result-image-span-background-hover);
     font-size: 0.7em;
   }
 }
@@ -342,7 +342,7 @@ article.result-images[data-vim-selected]::before {
 }
 
 .torrent_result {
-  border-left: 10px solid @color-result-torrent-border;
+  border-left: 10px solid var(--color-result-torrent-border);
   padding-left: 3px;
 
   p {
@@ -351,14 +351,14 @@ article.result-images[data-vim-selected]::before {
   }
 
   a {
-    color: @color-result-link-font;
+    color: var(--color-result-link-font);
 
     &:hover {
       text-decoration: underline;
     }
 
     &:visited {
-      color: @color-result-link-visited-font;
+      color: var(--color-result-link-visited-font);
     }
   }
 }
@@ -410,13 +410,13 @@ article.result-images[data-vim-selected]::before {
     font-size: 0.9em;
     display: inline-block;
     background: transparent;
-    color: @color-result-search-url-font;
+    color: var(--color-result-search-url-font);
     cursor: pointer;
   }
 
   input[type="submit"],
   .infobox .url a {
-    color: @color-result-link-font;
+    color: var(--color-result-link-font);
     text-decoration: none;
     font-size: 0.9rem;
 
@@ -447,7 +447,7 @@ article.result-images[data-vim-selected]::before {
 #search_url .title,
 #apis .title {
   margin: 2em 0 0.5em 0;
-  color: @color-font;
+  color: var(--color-font);
 }
 
 #answers {
@@ -547,13 +547,13 @@ article.result-images[data-vim-selected]::before {
   border: 0;
   display: block;
   font-size: 1.2em;
-  color: @color-search-font;
+  color: var(--color-search-font);
 
   a:link *,
   a:hover *,
   a:visited *,
   a:active * {
-    color: @color-search-font;
+    color: var(--color-search-font);
   }
 }
 
@@ -633,7 +633,7 @@ article.result-images[data-vim-selected]::before {
   }
 
   .result {
-    border-bottom: 1px solid @color-result-top-border;
+    border-bottom: 1px solid var(--color-result-top-border);
     margin: 0;
     padding-top: 8px;
     padding-bottom: 6px;
-- 
cgit v1.2.3


From 7c2a518d120ec02c4cead76faa1ba5fcec205373 Mon Sep 17 00:00:00 2001
From: MrPaulBlack <paul.accounts@protonmail.com>
Date: Thu, 30 Sep 2021 18:12:42 +0200
Subject: [theme] replace all hardcoded colors by css vars and drop ununsed
 vars

---
 searx/static/themes/simple/src/less/style.less | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

(limited to 'searx/static/themes/simple/src/less/style.less')

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 920d23c23..d46b4c117 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -6,8 +6,6 @@
 
 // stylelint-disable no-descending-specificity
 
-@stacked-bar-chart: rgb(0, 0, 0);
-
 @import "../../__common__/less/new_issue.less";
 @import "../../__common__/less/stats.less";
 @import "../../__common__/less/result_templates.less";
@@ -79,7 +77,7 @@ footer {
   width: 100%;
   text-align: center;
   background-color: var(--color-footer-background);
-  border-top: 1px solid var(--color-footer-border);
+  border-top: 1px solid var(--color-base-border);
   overflow: hidden;
 
   p {
@@ -125,7 +123,7 @@ a {
 }
 
 article[data-vim-selected] {
-  background: #f7f7f7;
+  background: var(--color-result-vim-selected);
 }
 
 article[data-vim-selected]::before {
@@ -452,9 +450,9 @@ article.result-images[data-vim-selected]::before {
 
 #answers {
   grid-area: answers;
-  border: 1px solid #ddd;
+  border: 1px solid var(--color-base-border);
   padding: 0.9em;
-  box-shadow: 0 0 5px #ccc;
+  box-shadow: 0 0 5px var(--color-base-shadow);
 
   h4 {
     display: none;
@@ -480,10 +478,10 @@ article.result-images[data-vim-selected]::before {
 
   .infobox {
     margin: 10px 0 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--color-base-border);
     padding: 0.9em;
     font-size: 0.9em;
-    box-shadow: 0 0 5px #ccc;
+    box-shadow: 0 0 5px var(--color-base-shadow);
 
     h2 {
       margin: 0 0 0.5em 0;
@@ -571,11 +569,11 @@ article.result-images[data-vim-selected]::before {
 }
 
 #backToTop {
-  border: 1px solid #ddd;
+  border: 1px solid var(--color-base-border);
   margin: 0;
   padding: 0;
   font-size: 1em;
-  box-shadow: 0 0 5px #ccc;
+  box-shadow: 0 0 5px var(--color-base-shadow);
   background: white;
   position: fixed;
   bottom: 8rem;
-- 
cgit v1.2.3


From 740fca00ccabbbccd24e9fd6b17f5a56394cfca1 Mon Sep 17 00:00:00 2001
From: MrPaulBlack <paul.accounts@protonmail.com>
Date: Wed, 6 Oct 2021 20:12:51 +0200
Subject: 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/style.less | 31 +++++++++++++-------------
 1 file changed, 15 insertions(+), 16 deletions(-)

(limited to 'searx/static/themes/simple/src/less/style.less')

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index d46b4c117..edc10dbe6 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/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);
-  color: var(--color-download-button-font);
+  background: var(--color-btn-background);
+  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;
   }
 }
 
-- 
cgit v1.2.3


From 3daa024c04d9e6133d456d9c103b5f67fa15f643 Mon Sep 17 00:00:00 2001
From: MrPaulBlack <paul.accounts@protonmail.com>
Date: Fri, 8 Oct 2021 16:06:48 +0200
Subject: [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

---
 searx/static/themes/simple/src/less/style.less | 62 +++++++++++---------------
 1 file changed, 25 insertions(+), 37 deletions(-)

(limited to 'searx/static/themes/simple/src/less/style.less')

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;
   }
 }
 
-- 
cgit v1.2.3