[simple theme] rework select; add safesearch to search and replace / with › in article url

* 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

1 files changed, 21 insertions, 5 deletions

diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index db6831341..c6e691b9d 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -41,13 +41,15 @@
     input[type="text"] {
       width: 13.25rem;
       color: var(--color-toolkit-input-text-font);
-      border: 1px solid var(--color-toolkit-input-text-border);
-      background: none repeat scroll 0 0 var(--color-base-background);
-      padding: 0.4rem;
+      border: none;
+      background: none repeat scroll 0 0 var(--color-toolkit-select-background);
+      padding: 0.2rem 0.4rem;
+      height: 2rem;
       .rounded-corners-tiny;
 
-      &:hover {
-        border: 1px solid var(--color-toolkit-input-text-border-hover);
+      &:hover,
+      &:focus {
+        background-color: var(--color-toolkit-select-background-hover);
       }
     }
 
@@ -103,6 +105,20 @@
     }
   }
 
+  .category {
+    margin-right: 0.5rem;
+
+    label {
+      border: 2px solid transparent;
+      padding: 0.2rem 0.4rem;
+      .rounded-corners-tiny;
+    }
+  }
+
+  .category input[type="checkbox"]:checked + label {
+    border: 2px solid var(--color-categories-item-border-selected);
+  }
+
   .name,
   .shortcut {
     text-align: left;