more work on result layout

searx/static/themes/smart/css/ltr-style.css

@@ -171,23 +171,23 @@ img, video {
 
 :root {
   --primary-color: #0290ee;
-  --secondary-color: #ffd30d;
+  --secondary-color: #f8b600;
   --background-color: #fff;
   --secondary-background-color: #f8f8f8;
   --text-color: #000;
   --filled-text-color: #fff;
-  --border-color: gray;
+  --border-color: #b3b3b3;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --primary-color: #0290ee;
-    --secondary-color: #ffd30d;
+    --secondary-color: #f8b600;
     --background-color: #fff;
     --secondary-background-color: #f8f8f8;
     --text-color: #000;
     --filled-text-color: #fff;
-    --border-color: gray;
+    --border-color: #b3b3b3;
   }
 }
 
@@ -279,6 +279,31 @@ body .body-container {
   grid-area: main;
 }
 
+.links {
+  gap: .5rem;
+  display: flex;
+}
+
+.links .link {
+  border-radius: 9999px;
+  height: min-content;
+  padding: .5rem;
+  transition: background-color .1s ease-in-out;
+  display: inline-block;
+}
+
+.links .link:is(:hover, :focus-within) {
+  background-color: var(--background-color);
+}
+
+.links .link svg {
+  width: 1.5rem;
+}
+
+.links .link.config {
+  transition: transform 1s ease-in-out;
+}
+
 #index main, #None main {
   flex-direction: column;
   justify-content: center;
@@ -324,18 +349,35 @@ main:has(.not-found) .button {
 }
 
 #results {
-  grid-template: "search links"
+  grid-template: "search links" 5rem
-                 "search amount"
+                 "search amount" min-content
                  "results sidebox" 1fr
                  "footer footer"
                  / 2fr 1fr;
   gap: 1rem;
-  padding: 0 6rem;
+  max-width: 1800px;
+  margin: 0 auto;
+  padding: 0 1rem;
   display: grid;
 }
 
-#results .links {
+@media (width >= 992px) {
+  #results {
+    padding: 0 4rem;
+  }
+}
+
+#results > .links {
   grid-area: links;
+  justify-content: end;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+#results > .links :is(.link, .sidebar_btn) {
+  width: 40px;
+  height: 40px;
 }
 
 #results footer {
@@ -397,7 +439,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 
 #sidebar > .container h1 {
   text-align: center;
-  background-color: var(--background-color);
   color: var(--text-color);
   border-radius: 9999px;
   padding: .25rem 0;
@@ -452,31 +493,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   margin: .5rem 0;
 }
 
-.links {
-  gap: .5rem;
-  display: flex;
-}
-
-.links .link {
-  border-radius: 9999px;
-  height: min-content;
-  padding: .5rem;
-  transition: background-color .1s ease-in-out;
-  display: inline-block;
-}
-
-.links .link:is(:hover, :focus-within) {
-  background-color: var(--background-color);
-}
-
-.links .link svg {
-  width: 1.5rem;
-}
-
-.links .link.config {
-  transition: transform 1s ease-in-out;
-}
-
 footer {
   flex-wrap: wrap;
   justify-content: space-between;
@@ -499,8 +515,86 @@ footer .links {
   display: flex;
 }
 
+.search_box {
+  background-color: var(--background-color);
+  border-radius: 9999px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem;
+  width: clamp(400px, 50vw, 40rem);
+  padding: .25rem .5rem;
+  display: flex;
+}
+
+@media (width <= 480px) {
+  .search_box {
+    border-radius: 1rem;
+    width: 70vw;
+  }
+}
+
+.search_box .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: .5rem;
+}
+
+.search_box input {
+  color: var(--text-color);
+  background-color: #0000;
+  border: none;
+  border-radius: 9999px;
+  flex: 1;
+  padding: .5rem;
+}
+
+.search_box input:focus {
+  outline: none;
+}
+
+.search_box button {
+  color: var(--text-color);
+  background-color: #0000;
+  border: none;
+  border-radius: 9999px;
+  padding: .5rem;
+}
+
+.search_box button:focus {
+  outline: none;
+}
+
+.search_box #clear_search {
+  color: var(--border-color);
+  background-color: #0000;
+  border: none;
+  border-radius: 9999px;
+  padding: .5rem;
+}
+
+.search_box #clear_search:focus {
+  outline: none;
+}
+
+.search_box #clear_search:hover {
+  color: var(--text-color);
+}
+
+.search_box #send_search {
+  background-color: var(--secondary-color);
+  padding: .5rem 1.5rem;
+}
+
+.search_box #send_search:focus {
+  outline: none;
+}
+
+#search.screen .search_box {
+  margin-top: 1rem;
+}
+
 #search.screen #search_categories .categories {
-  flex-flow: wrap;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 1rem;
@@ -563,80 +657,13 @@ footer .links {
   background-color: var(--background-color);
 }
 
-#search.screen .search_box {
-  background-color: var(--background-color);
-  border-radius: 9999px;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-  width: clamp(400px, 50vw, 40rem);
-  margin-top: 1rem;
-  padding: .5rem;
-  display: flex;
-}
-
-@media (width <= 480px) {
-  #search.screen .search_box {
-    border-radius: 1rem;
-    width: 70vw;
-  }
-}
-
-#search.screen .search_box input {
-  color: var(--text-color);
-  background-color: #0000;
-  border: none;
-  border-radius: 9999px;
-  flex: 1;
-  padding: .5rem;
-}
-
-#search.screen .search_box input:focus {
-  outline: none;
-}
-
-#search.screen .search_box button {
-  color: var(--text-color);
-  background-color: #0000;
-  border: none;
-  border-radius: 9999px;
-  padding: .5rem;
-}
-
-#search.screen .search_box button:focus {
-  outline: none;
-}
-
-#search.screen .search_box #clear_search {
-  color: var(--text-color);
-  background-color: #0000;
-  border: none;
-  border-radius: 9999px;
-  padding: .5rem;
-}
-
-#search.screen .search_box #clear_search:focus {
-  outline: none;
-}
-
-#search.screen .search_box #send_search {
-  background-color: var(--primary-color);
-  color: var(--filled-text-color);
-  border-radius: 9999px;
-  padding: 0 1rem;
-}
-
-#search.screen .search_box #send_search:focus {
-  outline: none;
-}
-
 #search.header {
   grid-area: search;
   padding: 1rem 0;
+  position: relative;
 }
 
 #search.header .header {
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
@@ -650,30 +677,79 @@ footer .links {
   display: flex;
 }
 
-#search.header .header .logo img {
+#search.header .header .logo img, #search.header .header .search_box {
   width: 100%;
 }
 
-#search.header .header .search_box {
+#search.header .selections {
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  width: 100%;
+  gap: 1rem;
+  margin-top: 1rem;
   display: flex;
 }
 
-#search.header .header .search_box input {
+#search.header .selections .categories {
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  display: flex;
+}
+
+#search.header .selections .categories .category {
+  background-color: var(--background-color);
+  cursor: pointer;
   border-radius: 9999px;
-  width: 100%;
+  padding: .5rem 1rem;
-  padding: 1rem;
+  display: inline-block;
+}
+
+#search.header .selections .categories .category.selected {
+  color: #fff;
+  background-color: #000;
+}
+
+#search.header .selections .filter-btn {
+  cursor: pointer;
+  color: var(--border-color);
+  align-items: center;
+  display: flex;
+}
+
+#search.header .selections .filter-btn input {
+  transform: scale(.8);
+}
+
+#search.header .filters {
+  opacity: 0;
+  align-items: center;
+  gap: 1rem;
+  height: 0;
+  transition: opacity .15s ease-in-out, height .1s ease-in-out;
+  display: flex;
+  position: absolute;
+  top: 100%;
+}
+
+#search.header .filters .filter {
+  background-color: var(--background-color);
+  border-radius: 1rem;
+  padding: .25rem .5rem;
+  display: inline-block;
+}
+
+#search.header:has(#filter:checked) .filters {
+  opacity: 1;
+  height: 2rem;
 }
 
 input[type="checkbox"].switch {
   appearance: none;
-  background-color: var(--secondary-background-color);
+  background-color: var(--border-color);
   color: var(--text-color);
   border: 1px solid var(--border-color);
   box-sizing: border-box;
-  border-radius: .5rem;
+  border-radius: 9999px;
   width: 40px;
   height: 20px;
   min-height: 20px;
@@ -685,7 +761,7 @@ input[type="checkbox"].switch {
 
 input[type="checkbox"].switch:after {
   content: "";
-  background-color: var(--text-color);
+  background-color: var(--filled-text-color);
   border-radius: .5rem;
   width: 15px;
   height: 15px;

searx/static/themes/smart/css/rtl-style.css

@@ -171,23 +171,23 @@ img, video {
 
 :root {
   --primary-color: #0290ee;
-  --secondary-color: #ffd30d;
+  --secondary-color: #f8b600;
   --background-color: #fff;
   --secondary-background-color: #f8f8f8;
   --text-color: #000;
   --filled-text-color: #fff;
-  --border-color: gray;
+  --border-color: #b3b3b3;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --primary-color: #0290ee;
-    --secondary-color: #ffd30d;
+    --secondary-color: #f8b600;
     --background-color: #fff;
     --secondary-background-color: #f8f8f8;
     --text-color: #000;
     --filled-text-color: #fff;
-    --border-color: gray;
+    --border-color: #b3b3b3;
   }
 }
 
@@ -279,6 +279,31 @@ body .body-container {
   grid-area: main;
 }
 
+.links {
+  gap: .5rem;
+  display: flex;
+}
+
+.links .link {
+  border-radius: 9999px;
+  height: min-content;
+  padding: .5rem;
+  transition: background-color .1s ease-in-out;
+  display: inline-block;
+}
+
+.links .link:is(:hover, :focus-within) {
+  background-color: var(--background-color);
+}
+
+.links .link svg {
+  width: 1.5rem;
+}
+
+.links .link.config {
+  transition: transform 1s ease-in-out;
+}
+
 #index main, #None main {
   flex-direction: column;
   justify-content: center;
@@ -324,18 +349,35 @@ main:has(.not-found) .button {
 }
 
 #results {
-  grid-template: "search links"
+  grid-template: "search links" 5rem
-                 "search amount"
+                 "search amount" min-content
                  "results sidebox" 1fr
                  "footer footer"
                  / 2fr 1fr;
   gap: 1rem;
-  padding: 0 6rem;
+  max-width: 1800px;
+  margin: 0 auto;
+  padding: 0 1rem;
   display: grid;
 }
 
-#results .links {
+@media (width >= 992px) {
+  #results {
+    padding: 0 4rem;
+  }
+}
+
+#results > .links {
   grid-area: links;
+  justify-content: end;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+#results > .links :is(.link, .sidebar_btn) {
+  width: 40px;
+  height: 40px;
 }
 
 #results footer {
@@ -397,7 +439,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
 
 #sidebar > .container h1 {
   text-align: center;
-  background-color: var(--background-color);
   color: var(--text-color);
   border-radius: 9999px;
   padding: .25rem 0;
@@ -452,31 +493,6 @@ body:has(.sidebar_btn[open]) header .links .link.config {
   margin: .5rem 0;
 }
 
-.links {
-  gap: .5rem;
-  display: flex;
-}
-
-.links .link {
-  border-radius: 9999px;
-  height: min-content;
-  padding: .5rem;
-  transition: background-color .1s ease-in-out;
-  display: inline-block;
-}
-
-.links .link:is(:hover, :focus-within) {
-  background-color: var(--background-color);
-}
-
-.links .link svg {
-  width: 1.5rem;
-}
-
-.links .link.config {
-  transition: transform 1s ease-in-out;
-}
-
 footer {
   flex-wrap: wrap;
   justify-content: space-between;
@@ -499,8 +515,86 @@ footer .links {
   display: flex;
 }
 
+.search_box {
+  background-color: var(--background-color);
+  border-radius: 9999px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem;
+  width: clamp(400px, 50vw, 40rem);
+  padding: .25rem .5rem;
+  display: flex;
+}
+
+@media (width <= 480px) {
+  .search_box {
+    border-radius: 1rem;
+    width: 70vw;
+  }
+}
+
+.search_box .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: .5rem;
+}
+
+.search_box input {
+  color: var(--text-color);
+  background-color: #0000;
+  border: none;
+  border-radius: 9999px;
+  flex: 1;
+  padding: .5rem;
+}
+
+.search_box input:focus {
+  outline: none;
+}
+
+.search_box button {
+  color: var(--text-color);
+  background-color: #0000;
+  border: none;
+  border-radius: 9999px;
+  padding: .5rem;
+}
+
+.search_box button:focus {
+  outline: none;
+}
+
+.search_box #clear_search {
+  color: var(--border-color);
+  background-color: #0000;
+  border: none;
+  border-radius: 9999px;
+  padding: .5rem;
+}
+
+.search_box #clear_search:focus {
+  outline: none;
+}
+
+.search_box #clear_search:hover {
+  color: var(--text-color);
+}
+
+.search_box #send_search {
+  background-color: var(--secondary-color);
+  padding: .5rem 1.5rem;
+}
+
+.search_box #send_search:focus {
+  outline: none;
+}
+
+#search.screen .search_box {
+  margin-top: 1rem;
+}
+
 #search.screen #search_categories .categories {
-  flex-flow: wrap;
+  flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 1rem;
@@ -563,80 +657,13 @@ footer .links {
   background-color: var(--background-color);
 }
 
-#search.screen .search_box {
-  background-color: var(--background-color);
-  border-radius: 9999px;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-  width: clamp(400px, 50vw, 40rem);
-  margin-top: 1rem;
-  padding: .5rem;
-  display: flex;
-}
-
-@media (width <= 480px) {
-  #search.screen .search_box {
-    border-radius: 1rem;
-    width: 70vw;
-  }
-}
-
-#search.screen .search_box input {
-  color: var(--text-color);
-  background-color: #0000;
-  border: none;
-  border-radius: 9999px;
-  flex: 1;
-  padding: .5rem;
-}
-
-#search.screen .search_box input:focus {
-  outline: none;
-}
-
-#search.screen .search_box button {
-  color: var(--text-color);
-  background-color: #0000;
-  border: none;
-  border-radius: 9999px;
-  padding: .5rem;
-}
-
-#search.screen .search_box button:focus {
-  outline: none;
-}
-
-#search.screen .search_box #clear_search {
-  color: var(--text-color);
-  background-color: #0000;
-  border: none;
-  border-radius: 9999px;
-  padding: .5rem;
-}
-
-#search.screen .search_box #clear_search:focus {
-  outline: none;
-}
-
-#search.screen .search_box #send_search {
-  background-color: var(--primary-color);
-  color: var(--filled-text-color);
-  border-radius: 9999px;
-  padding: 0 1rem;
-}
-
-#search.screen .search_box #send_search:focus {
-  outline: none;
-}
-
 #search.header {
   grid-area: search;
   padding: 1rem 0;
+  position: relative;
 }
 
 #search.header .header {
-  flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
@@ -650,30 +677,79 @@ footer .links {
   display: flex;
 }
 
-#search.header .header .logo img {
+#search.header .header .logo img, #search.header .header .search_box {
   width: 100%;
 }
 
-#search.header .header .search_box {
+#search.header .selections {
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
-  width: 100%;
+  gap: 1rem;
+  margin-top: 1rem;
   display: flex;
 }
 
-#search.header .header .search_box input {
+#search.header .selections .categories {
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  display: flex;
+}
+
+#search.header .selections .categories .category {
+  background-color: var(--background-color);
+  cursor: pointer;
   border-radius: 9999px;
-  width: 100%;
+  padding: .5rem 1rem;
-  padding: 1rem;
+  display: inline-block;
+}
+
+#search.header .selections .categories .category.selected {
+  color: #fff;
+  background-color: #000;
+}
+
+#search.header .selections .filter-btn {
+  cursor: pointer;
+  color: var(--border-color);
+  align-items: center;
+  display: flex;
+}
+
+#search.header .selections .filter-btn input {
+  transform: scale(.8);
+}
+
+#search.header .filters {
+  opacity: 0;
+  align-items: center;
+  gap: 1rem;
+  height: 0;
+  transition: opacity .15s ease-in-out, height .1s ease-in-out;
+  display: flex;
+  position: absolute;
+  top: 100%;
+}
+
+#search.header .filters .filter {
+  background-color: var(--background-color);
+  border-radius: 1rem;
+  padding: .25rem .5rem;
+  display: inline-block;
+}
+
+#search.header:has(#filter:checked) .filters {
+  opacity: 1;
+  height: 2rem;
 }
 
 input[type="checkbox"].switch {
   appearance: none;
-  background-color: var(--secondary-background-color);
+  background-color: var(--border-color);
   color: var(--text-color);
   border: 1px solid var(--border-color);
   box-sizing: border-box;
-  border-radius: .5rem;
+  border-radius: 9999px;
   width: 40px;
   height: 20px;
   min-height: 20px;
@@ -685,7 +761,7 @@ input[type="checkbox"].switch {
 
 input[type="checkbox"].switch:after {
   content: "";
-  background-color: var(--text-color);
+  background-color: var(--filled-text-color);
   border-radius: .5rem;
   width: 15px;
   height: 15px;

searx/static/themes/smart/scripts/svg2jinja.js

@@ -7,6 +7,7 @@ const svgList = {
   news: "node_modules/remixicon/icons/Document/newspaper-fill.svg",
   music: "node_modules/remixicon/icons/Media/music-2-fill.svg",
   search: "node_modules/remixicon/icons/System/search-line.svg",
+  close: "node_modules/remixicon/icons/System/close-line.svg",
 };
 
 const ejs = require("ejs"),

searx/static/themes/smart/src/scss/_colors.scss

@@ -9,7 +9,7 @@
     --secondary-background-color: #{$secondary-background-color};
     --text-color: #{$text-color};
     --filled-text-color: #{$filled-text-color};
-    --border-color: #{color.mix($text-color, $background-color, 50%)};
+    --border-color: #{color.mix($text-color, $background-color, 30%)};
 }
 
 
@@ -22,6 +22,6 @@
         --secondary-background-color: #{$secondary-background-color-dark};
         --text-color: #{$text-color-dark};
         --filled-text-color: #{$filled-text-color-dark};
-        --border-color: #{color.mix($text-color, $background-color, 50%)};
+        --border-color: #{color.mix($text-color, $background-color, 30%)};
     }
 }

searx/static/themes/smart/src/scss/definitions.scss

@@ -3,7 +3,7 @@
 // - Colors -
 // Light theme
 $primary-color: #0290ee;
-$secondary-color: #ffd30d;
+$secondary-color: #f8b600;
 $background-color: #ffffff;
 $secondary-background-color: #f8f8f8;
 $text-color: #000000;

searx/static/themes/smart/src/scss/style.scss

@@ -91,6 +91,31 @@ body {
     }
 }
 
+.links {
+    display: flex;
+    gap: .5rem;
+
+    .link {
+        display: inline-block;
+        padding: 0.5rem;
+        height: min-content;
+        @include mixin.rounded(full);
+        transition: background-color 100ms ease-in-out;
+
+        &:is(:hover, :focus-within) {
+            background-color: var(--background-color);
+        }
+
+        svg {
+            width: 1.5rem;
+        }
+
+        &.config {
+            transition: transform 1s ease-in-out;
+        }
+    }
+}
+
 #index,
 #None {
     main {
@@ -149,17 +174,33 @@ main:has(.not-found) {
 #results {
     display: grid;
     grid-template-columns: 2fr 1fr;
-    grid-template-rows: auto auto 1fr auto;
+    grid-template-rows: 5rem min-content 1fr auto;
     grid-template-areas:
         "search links"
         "search amount"
         "results sidebox"
         "footer footer";
     gap: 1rem;
-    padding: 0 6rem;
+    margin: 0 auto;
+    padding: 0 1rem;
+    max-width: 1800px;
 
-    .links {
+    @include mixin.screens($screen-lg) {
+        padding: 0 4rem;
+    }
+
+
+    &>.links {
         grid-area: links;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        justify-content: end;
+
+        :is(.link, .sidebar_btn) {
+            width: 40px;
+            height: 40px;
+        }
     }
 
     footer {
@@ -224,7 +265,6 @@ body:has(.sidebar_btn[open]) {
             font-size: 1.5rem;
             padding: .25rem 0;
             text-align: center;
-            background-color: var(--background-color);
             color: var(--text-color);
             @include mixin.rounded(full);
         }
@@ -280,31 +320,6 @@ body:has(.sidebar_btn[open]) {
     }
 }
 
-.links {
-    display: flex;
-    gap: .5rem;
-
-    .link {
-        display: inline-block;
-        padding: 0.5rem;
-        height: min-content;
-        @include mixin.rounded(full);
-        transition: background-color 100ms ease-in-out;
-
-        &:is(:hover, :focus-within) {
-            background-color: var(--background-color);
-        }
-
-        svg {
-            width: 1.5rem;
-        }
-
-        &.config {
-            transition: transform 1s ease-in-out;
-        }
-    }
-}
-
 footer {
     display: flex;
     justify-content: space-between;
@@ -329,10 +344,87 @@ footer {
     }
 }
 
+.search_box {
+    background-color: var(--background-color);
+    padding: .25rem .5rem;
+    width: clamp(400px, 50vw, 40rem);
+    @include mixin.rounded(full);
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: .5rem;
+
+    @include mixin.max-screens($screen-sm) {
+        width: 70vw;
+        @include mixin.rounded();
+    }
+
+    .icon {
+        @include mixin.margin-left(.5rem);
+        width: 1.5rem;
+        height: 1.5rem;
+    }
+
+
+    input {
+        flex: 1;
+        background-color: transparent;
+        border: none;
+        color: var(--text-color);
+        @include mixin.rounded(full);
+        padding: .5rem;
+
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    button {
+        background-color: transparent;
+        border: none;
+        color: var(--text-color);
+        @include mixin.rounded(full);
+        padding: .5rem;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    #clear_search {
+        background-color: transparent;
+        border: none;
+        color: var(--border-color);
+        @include mixin.rounded(full);
+        padding: .5rem;
+
+        &:focus {
+            outline: none;
+        }
+
+        &:hover {
+            color: var(--text-color);
+        }
+    }
+
+    #send_search {
+        background-color: var(--secondary-color);
+        padding: .5rem 1.5rem;
+
+        &:focus {
+            outline: none;
+        }
+    }
+}
+
 #search.screen {
+    .search_box {
+        margin-top: 1rem;
+    }
+
     #search_categories .categories {
         display: flex;
-        flex-direction: row;
         justify-content: center;
         align-items: center;
         flex-wrap: wrap;
@@ -394,81 +486,16 @@ footer {
         }
     }
 
-    .search_box {
-        background-color: var(--background-color);
-        padding: .5rem;
-        width: clamp(400px, 50vw, 40rem);
-        @include mixin.rounded(full);
-        margin-top: 1rem;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 1rem;
-
-        @include mixin.max-screens($screen-sm) {
-            width: 70vw;
-            @include mixin.rounded();
-        }
-
-
-        input {
-            flex: 1;
-            background-color: transparent;
-            border: none;
-            color: var(--text-color);
-            @include mixin.rounded(full);
-            padding: .5rem;
-
-
-            &:focus {
-                outline: none;
-            }
-        }
-
-        button {
-            background-color: transparent;
-            border: none;
-            color: var(--text-color);
-            @include mixin.rounded(full);
-            padding: .5rem;
-
-            &:focus {
-                outline: none;
-            }
-        }
-
-        #clear_search {
-            background-color: transparent;
-            border: none;
-            color: var(--text-color);
-            @include mixin.rounded(full);
-            padding: .5rem;
-
-            &:focus {
-                outline: none;
-            }
-        }
-
-        #send_search {
-            background-color: var(--primary-color);
-            color: var(--filled-text-color);
-            @include mixin.rounded(full);
-            padding: 0 1rem;
-
-            &:focus {
-                outline: none;
-            }
-        }
-    }
 }
 
 #search.header {
+    position: relative;
     grid-area: search;
     padding: 1rem 0;
 
     .header {
         display: flex;
-        flex-direction: row;
+
         justify-content: space-between;
         gap: 1rem;
         align-items: center;
@@ -485,26 +512,81 @@ footer {
         }
 
         .search_box {
-            display: flex;
-            align-items: center;
-            justify-content: center;
             width: 100%;
+        }
+    }
 
-            input {
+
-                width: 100%;
+    .selections {
-                padding: 1rem;
+        margin-top: 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+
+        .categories {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+
+            .category {
+                display: inline-block;
+                background-color: var(--background-color);
+                padding: .5rem 1rem;
+                cursor: pointer;
                 @include mixin.rounded(full);
+
+                &.selected {
+                    background-color: #000;
+                    color: #fff;
+                }
             }
         }
+
+        .filter-btn {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            color: var(--border-color);
+
+            input {
+                transform: scale(.8);
+            }
+        }
+
+    }
+
+    .filters {
+        display: flex;
+        position: absolute;
+        align-items: center;
+        gap: 1rem;
+        top: 100%;
+        opacity: 0;
+        height: 0;
+        transition: opacity 150ms ease-in-out, height 100ms ease-in-out;
+
+        .filter {
+            display: inline-block;
+            background-color: var(--background-color);
+            padding: .25rem .5rem;
+            @include mixin.rounded();
+        }
+    }
+
+    &:has(#filter:checked) .filters {
+        opacity: 1;
+        height: 2rem;
     }
 }
 
 input[type="checkbox"].switch {
     appearance: none;
     margin-right: .5rem;
-    background-color: var(--secondary-background-color);
+    background-color: var(--border-color);
     color: var(--text-color);
-    @include mixin.rounded(sm);
+    @include mixin.rounded(full);
     width: 40px;
     height: 20px;
     min-height: 20px;
@@ -522,7 +604,7 @@ input[type="checkbox"].switch {
         @include mixin.left(2.5px);
         width: 15px;
         height: 15px;
-        background-color: var(--text-color);
+        background-color: var(--filled-text-color);
         @include mixin.rounded(sm);
         transition: background-color 200ms ease-in-out,
             left 200ms ease-in-out,

searx/templates/smart/icons.html

@@ -8,6 +8,7 @@
   'news':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M19 22H5C3.34315 22 2 20.6569 2 19V3C2 2.44772 2.44772 2 3 2H17C17.5523 2 18 2.44772 18 3V10H22V19C22 20.6569 20.6569 22 19 22ZM18 12V19C18 19.5523 18.4477 20 19 20C19.5523 20 20 19.5523 20 19V12H18ZM5 6V12H11V6H5ZM5 13V15H15V13H5ZM5 16V18H15V16H5ZM7 8H9V10H7V8Z"/></svg>',
   'music':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M20 3V17C20 19.2091 18.2091 21 16 21C13.7909 21 12 19.2091 12 17C12 14.7909 13.7909 13 16 13C16.7286 13 17.4117 13.1948 18 13.5351V6H9V17C9 19.2091 7.20914 21 5 21C2.79086 21 1 19.2091 1 17C1 14.7909 2.79086 13 5 13C5.72857 13 6.41165 13.1948 7 13.5351V3H20Z"/></svg>',
   'search':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"/></svg>',
+  'close':'<svg viewBox="0 0 24 24" fill="currentColor" class="icon" aria-hidden="true"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"/></svg>',
 
 }
 -%}

searx/templates/smart/madules/filters.html

@@ -0,0 +1,43 @@
+<div class="filters">    
+    <select name="language" aria-label="{{ _('Search language') }}" class="filter">
+        <option value="all"
+                {%- if current_language == 'all' %} selected="selected" {%- endif -%}>
+                {{- _('Default language') }} [all] 
+        </option>
+        <option value="auto"
+                {%- if current_language == 'auto' %} selected="selected" {%- endif -%}>
+                {{- _('Auto-detect') }} ({{ search_language }})  
+        </option>
+        {% for sxng_tag,lang_name,country_name,english_name,flag in sxng_locales | sort(attribute=1) -%}
+            <option value="{{ sxng_tag }}"
+                    {%- if sxng_tag == current_language %} selected="selected" {%- endif -%}>
+                    {{ lang_name }}{%- if country_name -%}-{{ country_name }}{%- endif -%}
+                    [{{sxng_tag}}]
+                    {%- if flag -%}{{ flag }}{%- endif -%}
+            </option>
+        {%- endfor -%}
+    </select>
+    <select name="time_range" aria-label="{{ _('Time range') }}" class="filter">
+        <option id="time-range-anytime" value="" {{ "selected" if time_range=="" or not time_range  else ""}}>
+            {{- _('Anytime') -}}
+        </option>
+        <option id="time-range-day" value="day" {{ "selected" if time_range=="day" else ""}}>
+            {{- _('Last day') -}}
+        </option>
+        <option id="time-range-week" value="week" {{ "selected" if time_range=="week" else ""}}>
+            {{- _('Last week') -}}
+        </option>
+        <option id="time-range-month" value="month" {{ "selected" if time_range=="month" else ""}}>
+            {{- _('Last month') -}}
+        </option>
+        <option id="time-range-year" value="year" {{ "selected" if time_range=="year" else ""}}>
+            {{- _('Last year') -}}
+        </option>
+    </select>
+    <select  name="safesearch" aria-label="{{ _('SafeSearch') }}" class="filter">
+        <option value="2" {% if safesearch == '2' %}selected="selected"{% endif %} aria-label="{{ _('Strict') }}">{{ _("SafeSearch") + ": " + _('Strict') }}</option>
+        <option value="1" {% if safesearch == '1' %}selected="selected"{% endif %} aria-label="{{ _('Moderate') }}">{{ _("SafeSearch") + ": " + _('Moderate') }}</option>
+        <option value="0" {% if safesearch == '0' %}selected="selected"{% endif %} aria-label="{{ _('None') }}">{{ _("SafeSearch") + ": " + _('None') }}</option>
+    </select>
+</div>
+

searx/templates/smart/madules/search_box.html

@@ -15,7 +15,7 @@
         value="{{ q or '' }}"
     />
     <button id="clear_search" type="reset" aria-label="{{ _('clear') }}">
-        <span class="js-only">Clear</span
+        <span class="js-only">{{ icon_small('close') }}</span
         ><span class="js-alt">{{ _('clear') }}</span>
     </button>
     <button

searx/templates/smart/madules/search_header.html

@@ -1,3 +1,5 @@
+{% from 'smart/icons.html' import icon_small %}
+
 <form
     id="search"
     method="{{ method or 'POST' }}"
@@ -6,10 +8,11 @@
     class="header"
 >
     <div class="header">
-        <div class="logo">
+        <a class="logo" href="/">
             <img src="/static/img/logo.svg" alt="{{ instance_name }}" />
-        </div>
+        </a>
         <div class="search_box">
+            <div class="icon">{{ icon_small('search') }}</div>
             <input
                 id="q"
                 name="q"
@@ -29,24 +32,30 @@
                 aria-label="{{ _('clear') }}"
                 class="hide_if_nojs"
             >
-                <span>c</span><span class="js-alt">{{ _('clear') }}</span>
+                <span class="js-only">{{ icon_small('close') }}</span
+                ><span class="js-alt">{{ _('clear') }}</span>
             </button>
         </div>
     </div>
     <div class="selections">
-        <div class="categories"></div>
+        <div class="categories">
-        <label for="filter">
+            {% for category in categories_as_tabs %}
-            <input type="checkbox" id="filter-btn" hidden />
+            <button
-            <div class="filter-btn">
+                type="submit"
-                {{ _('Filters') }} {{ icon_small('filter') }}
+                name="category_{{ category }}"
-            </div>
+                class="category {% if category in selected_categories %} selected {% endif %}"
+            >
+                {{ category}}
+            </button>
+
+            {% endfor %}
+        </div>
+        <label for="filter" class="filter-btn">
+            <input type="checkbox" id="filter" class="switch" />
+            <span> {{ _('Filters') }} </span>
         </label>
     </div>
-    <div class="filters">
+    {% include 'smart/madules/filters.html' %}
-        {% include 'simple/filters/languages.html' %} {% include
-        'simple/filters/time_range.html' %} {% include
-        'simple/filters/safesearch.html' %}
-    </div>
 
     <input type="hidden" name="theme" value="{{ theme }}" />
     {% if timeout_limit %}<input