1 files changed, 93 insertions, 55 deletions

diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 794958594..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);
@@ -16,25 +21,62 @@
     "spacer categories";
 }
 
+.category {
+  display: inline-block;
+  position: relative;
+  margin-right: 1rem;
+  padding: 0;
+
+  input {
+    display: none;
+  }
+
+  label {
+    svg {
+      padding-right: 0.2rem;
+    }
+
+    cursor: pointer;
+    padding: 0.2rem 0;
+    display: inline-flex;
+    text-transform: capitalize;
+    font-size: 0.9em;
+    border-bottom: 2px solid transparent;
+    .disable-user-select;
+
+    div.category_name {
+      margin: auto 0;
+    }
+  }
+
+  input[type="checkbox"]:checked + label {
+    color: var(--color-categories-item-selected-font);
+    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  }
+}
+
 #search_logo {
   grid-area: logo;
-}
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-.search_logo_img {
-  width: 40px;
+  svg {
+    flex: 1;
+    width: 30px;
+    height: 30px;
+    margin: 0.5rem 0 auto 0;
+  }
 }
 
 .search_categories {
   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;
@@ -73,7 +115,7 @@
   border-collapse: separate;
   box-sizing: border-box;
   margin: 0;
-  padding: 8px;
+  padding: 10px;
   background: none repeat scroll 0 0 var(--color-search-background);
   border: 1px solid var(--color-search-border);
   border-radius: 0;
@@ -108,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;
@@ -150,7 +207,6 @@
 
       #categories {
         width: 100%;
-        margin: 0;
         text-align: left;
         overflow-x: scroll;
         overflow-y: hidden;
@@ -161,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:
@@ -176,22 +232,15 @@
     padding: 0;
   }
 
-  #search_wrapper {
-    width: 100%;
-    padding: 0;
-  }
-
   .search_box {
-    // hack, should bew 100% ?
+    // hack, should be 100% ?
     width: 99%;
-    margin: 0.1em;
-    padding: 0 0.1em 0 0;
     display: flex;
     flex-direction: row;
   }
 
   #q {
-    width: auto !important;
+    width: 100%;
     flex: 1;
   }
 
@@ -201,8 +250,7 @@
   }
 
   .search_filters {
-    display: block;
-    margin: 0.8em 0;
+    margin: 0;
   }
 
   .language,
@@ -213,47 +261,37 @@
   .category {
     display: block;
     width: 100%;
+    margin: 0;
 
     label {
-      padding: 10px !important;
+      padding: 0.8rem !important;
+      margin: 0 !important;
+
+      svg {
+        display: none;
+      }
     }
   }
 }
 
-#categories {
-  margin: 0 10px 0 0;
-  .disable-user-select;
-
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+@media screen and (max-width: @ultra-small-phone) {
+  #search_header {
+    grid-template-areas:
+      "search search"
+      "categories categories";
   }
-}
 
-.category {
-  display: inline-block;
-  position: relative;
-  margin: 0 3px;
-  padding: 0;
-
-  input {
+  #search_logo {
     display: none;
   }
+}
 
-  label {
-    cursor: pointer;
-    padding: 0.3rem 0.75rem 0.5rem 0.75rem;
-    margin: 0;
-    display: block;
-    text-transform: capitalize;
-    font-size: 0.9em;
-    border-bottom: 2px solid transparent;
-    .disable-user-select;
-  }
+#categories {
+  .disable-user-select;
 
-  input[type="checkbox"]:checked + label {
-    color: var(--color-categories-item-selected-font);
-    border-bottom: 2px solid var(--color-categories-item-border-selected);
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
   }
 }