[refactor] simple theme: *.less - replace hardcoded colors

Closes: https://github.com/searxng/searxng/issues/3842

8 files changed, 19 insertions, 23 deletions

diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less
index bb2e1890f..32c016e06 100644
--- a/searx/static/themes/simple/src/less/autocomplete.less
+++ b/searx/static/themes/simple/src/less/autocomplete.less
@@ -56,7 +56,6 @@
     z-index: 100;
     margin-top: 3.5rem;
     border-radius: 0.8rem;
-    box-shadow: 0 2px 8px rgb(34 38 46 / 25%);
 
     &:empty {
       display: none;
diff --git a/searx/static/themes/simple/src/less/code.less b/searx/static/themes/simple/src/less/code.less
index d6553feb8..6e838bf88 100644
--- a/searx/static/themes/simple/src/less/code.less
+++ b/searx/static/themes/simple/src/less/code.less
@@ -29,7 +29,7 @@
     }
 
     span.linenos {
-      color: #64708d;
+      color: var(--color-line-number);
     }
   }
 }
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 7d946f40e..9f23ecaeb 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -115,6 +115,14 @@
   --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
   --color-doc-code: #003;
   --color-doc-code-background: #ddeaff;
+  /// Other misc colors
+  --color-bar-chart-primary: #5bc0de;
+  --color-bar-chart-secondary: #deb15b;
+  --color-image-resolution-background: rgba(0, 0, 0, 50%);
+  --color-image-resolution-font: #fff;
+  --color-loading-indicator: rgba(255, 255, 255, 0.2);
+  --color-loading-indicator-gap: #fff;
+  --color-line-number: #64708d;
 }
 
 .dark-themes() {
diff --git a/searx/static/themes/simple/src/less/new_issue.less b/searx/static/themes/simple/src/less/new_issue.less
index a1e5006e3..e10a2791c 100644
--- a/searx/static/themes/simple/src/less/new_issue.less
+++ b/searx/static/themes/simple/src/less/new_issue.less
@@ -2,18 +2,7 @@
 .stats_endpoint {
   .github-issue-button {
     display: block;
-    padding: 8px 16px;
-    font-family: sans-serif;
     font-size: 16px;
-    color: white;
-    background-color: #238636;
-    border: #2ea043;
-    border-radius: 10px !important;
-    box-shadow: rgba(0, 0, 0, 0) 0 0 0 0;
-  }
-
-  .github-issue-button:hover {
-    background-color: #2ea043;
   }
 
   .issue-hide {
diff --git a/searx/static/themes/simple/src/less/stats.less b/searx/static/themes/simple/src/less/stats.less
index 4658d4f2b..1e823f7c9 100644
--- a/searx/static/themes/simple/src/less/stats.less
+++ b/searx/static/themes/simple/src/less/stats.less
@@ -75,18 +75,18 @@ failed-test {
 }
 
 .bar-chart-bar {
-  border: 3px solid #5bc0de;
+  border: 3px solid var(--color-bar-chart-primary);
   margin: 1px 0;
 }
 
 .bar-chart-serie1 {
-  border: 3px solid #5bc0de;
+  border: 3px solid var(--color-bar-chart-primary);
   margin: 1px 0;
   float: left;
 }
 
 .bar-chart-serie2 {
-  border: 3px solid #deb15b;
+  border: 3px solid var(--color-bar-chart-secondary);
   margin: 1px 0;
   float: left;
 }
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index b7105e639..d35dd744c 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -469,10 +469,10 @@ article[data-vim-selected].category-social {
     position: absolute;
     right: 0;
     bottom: 0;
-    background: rgba(0, 0, 0, 50%);
+    background: var(--color-image-resolution-background);
     padding: 0.3rem 0.5rem;
     font-size: 0.9rem;
-    color: #fff;
+    color: var(--color-image-resolution-font);
     border-top-left-radius: 0.3rem;
   }
 
diff --git a/searx/static/themes/simple/src/less/toolkit_loader.less b/searx/static/themes/simple/src/less/toolkit_loader.less
index d426035a3..83b169139 100644
--- a/searx/static/themes/simple/src/less/toolkit_loader.less
+++ b/searx/static/themes/simple/src/less/toolkit_loader.less
@@ -10,10 +10,10 @@
   font-size: 10px;
   position: relative;
   text-indent: -9999em;
-  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
-  border-left: 1.1em solid #fff;
+  border-top: 1.1em solid var(--color-loading-indicator);
+  border-right: 1.1em solid var(--color-loading-indicator);
+  border-bottom: 1.1em solid var(--color-loading-indicator);
+  border-left: 1.1em solid var(--color-loading-indicator-gap);
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
diff --git a/searx/templates/simple/new_issue.html b/searx/templates/simple/new_issue.html
index 7ce30c059..ba7997bd4 100644
--- a/searx/templates/simple/new_issue.html
+++ b/searx/templates/simple/new_issue.html
@@ -69,7 +69,7 @@ or manually by executing the searx/webapp.py file? -->
     <label class="step1 step1_delay" for="step2" >{{ _('I confirm there is no existing bug about the issue I encounter') }}</label>
     <div class="step2 step_content">
         <p>{{ _('If this is a public instance, please specify the URL in the bug report') }}</p>
-        <button type="submit" class="github-issue-button" title="{{ get_setting('brand.new_issue_url') }}">{{ _('Submit a new issue on Github including the above information') }}</button>
+        <button type="submit" class="github-issue-button button" title="{{ get_setting('brand.new_issue_url') }}">{{ _('Submit a new issue on Github including the above information') }}</button>
     </div>
 </form>
 {% endmacro %}