From ff8487ae7a5388416d10158a17e57d96131f0599 Mon Sep 17 00:00:00 2001
From: Alexandre Flament <alex@al-f.net>
Date: Sun, 19 Jun 2022 11:24:35 +0200
Subject: [PATCH] WIP: theme: support high constrat.

Close https://github.com/searxng/searxng/issues/951
---
 .../static/themes/simple/src/less/search.less |   2 +-
 .../simple/src/less/style-highcontrast.less   | 130 ++++++++++++++++++
 .../static/themes/simple/src/less/style.less  |   9 +-
 .../themes/simple/src/less/toolkit.less       |   5 +-
 4 files changed, 141 insertions(+), 5 deletions(-)
 create mode 100644 searx/static/themes/simple/src/less/style-highcontrast.less

diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index e70ef30ad..86ff0a8c7 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -43,7 +43,7 @@
     display: inline-flex;
     text-transform: capitalize;
     font-size: 0.9em;
-    border-bottom: 2px solid transparent;
+    // border-bottom: 2px solid transparent;
     .disable-user-select;
 
     div.category_name {
diff --git a/searx/static/themes/simple/src/less/style-highcontrast.less b/searx/static/themes/simple/src/less/style-highcontrast.less
new file mode 100644
index 000000000..7e3f96eff
--- /dev/null
+++ b/searx/static/themes/simple/src/less/style-highcontrast.less
@@ -0,0 +1,130 @@
+@media (forced-colors: active) {
+  // toolkit.less
+  html body select {
+    appearance: auto;
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    background: none;
+    border: 1px solid lightgray;
+    padding: inherit;
+
+    &:hover,
+    &:focus {
+      background-color: inherit;
+    }
+
+    option {
+      background-color: inherit;
+    }
+  }
+
+  // toolkit.less
+  input.checkbox-onoff[type="checkbox"] {
+    -webkit-appearance: auto;
+    -moz-appearance: auto;
+    appearance: auto;
+    background: none;
+    margin: inherit;
+    padding: inherit;
+    width: auto;
+    font-size: 1.5em;
+
+    &:focus,
+    &:hover {
+      outline: inherit;
+    }
+
+    &::after,
+    &::before,
+    &:focus::after,
+    &:focus::before,
+    &:hover::after,
+    &:hover::before {
+      display: none;
+      content: inherit;
+    }
+  }
+
+  // details.less
+  #results.image-detail-open article.result-images[data-vim-selected] .detail {
+    a.result-detail-close,
+    a.result-detail-next,
+    a.result-detail-previous {
+      filter: none;
+    }
+  }
+
+  // search.less
+  #q {
+    border: 1px solid black;
+    .ltr-border-right(none);
+  }
+
+  #clear_search {
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+
+  #send_search {
+    border: 1px solid black;
+    .ltr-border-left(none);
+  }
+
+  .category {
+    label {
+      height: 21px;
+      font-size: 1rem;
+      border: inherit;
+      padding-right: 0.5rem;
+      padding-left: 0.5rem;
+
+      svg {
+        display: none;
+      }
+    }
+
+    input[type="checkbox"]:checked + label {
+      filter: invert(100%);
+      background-color: white;
+      color: black;
+      border: inherit;
+    }
+  }
+
+  // autocomplete.less
+  .autocomplete.open {
+    border: 2px solid black;
+    width: calc(44rem - 4px);
+
+    > ul > li {
+      &.active,
+      &:active,
+      &:focus,
+      &:hover {
+        filter: invert(100%);
+      }
+    }
+  }
+
+  // style.less
+  article[data-vim-selected] {
+    outline: 0.2rem solid var(--color-result-vim-arrow);
+    outline-offset: 0.25rem;
+    border-radius: 10px;
+  }
+
+  article[data-vim-selected].category-videos,
+  article[data-vim-selected].category-news,
+  article[data-vim-selected].category-map,
+  article[data-vim-selected].category-music,
+  article[data-vim-selected].category-files,
+  article[data-vim-selected].category-social {
+    border: 1px dotted var(--color-result-vim-arrow);
+    box-shadow: none;
+  }
+
+  // preferences.less
+  #main_preferences .value input[type="text"] {
+    border: 1px solid black;
+  }
+}
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index c2efcdd50..280d79b2a 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -135,13 +135,14 @@ a {
 
 article[data-vim-selected] {
   background: var(--color-result-vim-selected);
-  .ltr-border-left(0.2rem solid var(--color-result-vim-arrow));
+  box-shadow: -0.2rem 0 0 0 var(--color-result-vim-arrow);
   .ltr-rounded-right-corners(10px);
 }
 
 article.result-images[data-vim-selected] {
   background: var(--color-result-vim-arrow);
   border: none;
+  box-shadow: none;
   .rounded-corners;
 
   .image_thumbnail {
@@ -161,13 +162,14 @@ article[data-vim-selected].category-music,
 article[data-vim-selected].category-files,
 article[data-vim-selected].category-social {
   border: 1px solid var(--color-result-vim-arrow);
+  box-shadow: none;
   .rounded-corners;
 }
 
 .result {
   margin: @results-margin 0;
   padding: @result-padding;
-  .ltr-border-left(0.2rem solid transparent);
+  .ltr-padding-left(@result-padding);
 
   h3 {
     font-size: 1.2rem;
@@ -932,3 +934,6 @@ article[data-vim-selected].category-social {
 pre code {
   white-space: pre-wrap;
 }
+
+// high contrast
+@import "style-highcontrast.less";
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index 93fa5e04c..235699740 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/searx/static/themes/simple/src/less/toolkit.less
@@ -328,7 +328,7 @@ select {
   .ltr-margin-right(1rem);
   margin-bottom: 0;
   .ltr-margin-left(0);
-  padding: 0.2rem !important;
+  padding: 0.2rem;
   color: var(--color-search-font);
   font-size: 0.9rem;
   z-index: 2;
@@ -344,7 +344,8 @@ select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border-width: 0 2rem 0 0;
+    border-width: 0;
+    padding-right: 2rem;
     border-color: transparent;
     background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
     background-position-x: calc(100% + 2rem);