[simple theme] refactor search form

* update search input form params; inspiried by whoogle
* remove autofocus from result page input form (JS impl. as well as input param)
-> autofocus on landing page still works only on desktop and tablet with JS impl.
* update landing page margins on mobile
* rework border and radius for search form to 0.8rem and outline
* remove positioning from autocomplete JS lib and use CSS impl.
* match search box and autocomplete width
* rework search form to a google like design on mobile
* fix settings icon display withg RTL on mobile on result page when search input is empty

1 files changed, 8 insertions, 7 deletions

diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less
index a1a74480b..7c211fbb0 100644
--- a/searx/static/themes/simple/src/less/autocomplete.less
+++ b/searx/static/themes/simple/src/less/autocomplete.less
@@ -2,6 +2,7 @@
 
 .autocomplete {
   position: absolute;
+  width: @search-width;
   max-height: 0;
   overflow-y: hidden;
   .ltr-text-align-left();
@@ -25,7 +26,7 @@
 
     > li {
       cursor: pointer;
-      padding: 0.5rem;
+      padding: 0.5rem 1rem;
 
       &.active,
       &:active,
@@ -51,9 +52,10 @@
     background-color: var(--color-autocomplete-background);
     color: var(--color-autocomplete-font);
     border: 1px solid var(--color-autocomplete-border);
-    max-height: 500px;
+    max-height: 32rem;
     overflow-y: auto;
     z-index: 100;
+    margin-top: 3.2rem;
 
     &:empty {
       display: none;
@@ -63,11 +65,10 @@
 
 @media screen and (max-width: @phone) {
   .autocomplete {
-    bottom: 0;
-  }
+    width: 100%;
 
-  .autocomplete > ul > li {
-    border-bottom: 1px solid var(--color-result-top-border);
-    text-align: left;
+    > ul > li {
+      padding: 1rem;
+    }
   }
 }