From f3aff26086dda1c2610c9aa845db119ad413006f Mon Sep 17 00:00:00 2001
From: mrpaulblack <paul@paulgo.io>
Date: Sun, 21 Nov 2021 21:38:00 +0100
Subject: =?UTF-8?q?[simple=20theme]=20rework=20select;=20add=20safesearch?=
 =?UTF-8?q?=20to=20search=20and=20replace=20/=20with=20=E2=80=BA=20in=20ar?=
 =?UTF-8?q?ticle=20url?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* rework selection UI in pref (fix based on: https://github.com/twelsby/searx/commit/78643e9f43a103c523f112e9f3ce26a5c7bb3a0f)
* moved search filters underneath categories
* cut params from url and replace / with ›
* make h3 and url in article bigger
* add safe search select to search filter (this will not override settings and only be valid while on result page in a session)
* make search form button not overlap each other when js is disabled
* 1rem padding around preview image and thumbnail in default article template
---
 searx/static/themes/simple/src/less/search.less | 49 +++++++++++++++----------
 1 file changed, 29 insertions(+), 20 deletions(-)

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

diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 99aa02a34..04ee2cea8 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/searx/static/themes/simple/src/less/search.less
@@ -3,6 +3,11 @@
 */
 
 #search {
+  padding: 0;
+  margin: 0;
+}
+
+#search_header {
   padding: 1.5em 2em 0 @results-offset - 3rem;
   margin: 0;
   background: var(--color-header-background);
@@ -68,13 +73,10 @@
   grid-area: categories;
 }
 
-#search_wrapper {
+.search_box {
+  margin: 0;
   padding: 0;
   grid-area: search;
-}
-
-.search_box {
-  margin: 0 12px 0 0;
   display: inline-flex;
   flex-direction: row;
   white-space: nowrap;
@@ -148,21 +150,36 @@
   }
 }
 
+.no-js #clear_search,
 .no-js #send_search {
   width: auto !important;
+  border-left: 1px solid var(--color-search-border);
+  padding: 10px;
 }
 
 .search_filters {
-  display: inline-block;
-  margin: 0.8rem 0 0 0;
+  margin: 0.6rem 0 0 @results-offset + 0.6rem;
+
+  select {
+    background-color: inherit;
+
+    &:hover,
+    &:focus {
+      color: var(--color-base-font);
+    }
+  }
 }
 
 @media screen and (max-width: @tablet) {
-  #search {
+  #search_header {
     padding: 1.5em @results-tablet-offset 0 @results-tablet-offset;
     column-gap: @results-tablet-offset;
   }
 
+  .search_filters {
+    margin: 0.6rem 0 0 @results-tablet-offset + 3rem;
+  }
+
   #categories {
     font-size: 90%;
     clear: both;
@@ -200,10 +217,10 @@
 }
 
 @media screen and (max-width: @phone) {
-  #search {
+  #search_header {
     width: 100%;
     margin: 0;
-    padding: 0.1em 0 0 0;
+    padding: 0.1rem 0 0 0;
     column-gap: 0;
     row-gap: 0;
     grid-template-areas:
@@ -215,16 +232,9 @@
     padding: 0;
   }
 
-  #search_wrapper {
-    width: 100%;
-    padding: 0;
-  }
-
   .search_box {
     // hack, should be 100% ?
     width: 99%;
-    margin: 0.1em;
-    padding: 0 0.1em 0 0;
     display: flex;
     flex-direction: row;
   }
@@ -240,8 +250,7 @@
   }
 
   .search_filters {
-    display: block;
-    margin: 0.8em 0;
+    margin: 0;
   }
 
   .language,
@@ -266,7 +275,7 @@
 }
 
 @media screen and (max-width: @ultra-small-phone) {
-  #search {
+  #search_header {
     grid-template-areas:
       "search search"
       "categories categories";
-- 
cgit v1.2.3