Changed Basic Theme

searx/settings.yml

@@ -54,7 +54,7 @@ server:
   # If you change port, bind_address or base_url don't forget to rebuild
   # instance's enviroment (make buildenv)
   port: 8888
-  bind_address: "127.0.0.1"
+  bind_address: "0.0.0.0"
   base_url: false  # Possible values: false or "https://example.org/location".
   limiter: false  # rate limit the number of request on the instance, block some bots
 

searx/static/themes/simple/src/less/autocomplete.less

@@ -2,9 +2,11 @@
 
 .autocomplete {
   position: absolute;
-  width: @search-width;
+  width: 45rem;
   max-height: 0;
+  top: 0.8rem;
   overflow-y: hidden;
+
   .ltr-text-align-left();
 
   .rounded-corners;
@@ -26,7 +28,7 @@
 
     > li {
       cursor: pointer;
-      padding: 0.5rem 1rem;
+      padding: 0.8rem 1.5rem;
 
       &.active,
       &:active,
@@ -52,16 +54,21 @@
     background-color: var(--color-autocomplete-background);
     color: var(--color-autocomplete-font);
     max-height: 32rem;
-    overflow-y: auto;
+    transition: max-height 0.3s ease-in;
+    overflow-y: hidden;
     z-index: 100;
     margin-top: 3.5rem;
     border-radius: 0.8rem;
-    box-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+    box-shadow: var(--search-bar-shadow);
 
     &:empty {
       display: none;
     }
   }
+
+  &.close {
+    transition: 0 0.8s ease-out;
+  }
 }
 
 @media screen and (max-width: @phone) {
@@ -69,7 +76,7 @@
     width: 100%;
 
     > ul > li {
-      padding: 1rem;
+      padding: 1.5rem;
     }
   }
 }

searx/static/themes/simple/src/less/definitions.less

@@ -10,34 +10,31 @@
   --color-base-font: #444;
   --color-base-font-rgb: 68, 68, 68;
   --color-base-background: #fff;
-  --color-base-background-mobile: #f2f5f8;
+  --color-url-font: #29314d;
-  --color-url-font: #334999;
+  --color-url-visited-font: #80b;
-  --color-url-visited-font: #9822c3;
   /// Header Colors
-  --color-header-background: #fdfbff;
+  --color-header-background: #fff;
-  --color-header-border: #ddd;
+  --color-header-border: #fff;
   /// Footer Colors
-  --color-footer-background: #fdfbff;
+  --color-footer-background: #f7f7f7;
   --color-footer-border: #ddd;
   /// Sidebar Colors
   --color-sidebar-border: #ddd;
   --color-sidebar-font: #000;
-  --color-sidebar-background: #fff;
   /// BackToTop Colors
   --color-backtotop-font: #444;
   --color-backtotop-border: #ddd;
   --color-backtotop-background: #fff;
   /// Button Colors
-  --color-btn-background: #3050ff;
+  --color-btn-background: #2d79cf;
   --color-btn-font: #fff;
   --color-show-btn-background: #bbb;
-  --color-show-btn-font: #000;
+  --color-show-btn-font: #222;
   /// Search Input Colors
   --color-search-border: #bbb;
-  --color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
   --color-search-background: #fff;
   --color-search-font: #222;
-  --color-search-background-hover: #3050ff;
+  --color-search-background-hover: #2d79cf;
   /// Modal Colors
   --color-error: #db3434;
   --color-error-background: lighten(#db3434, 40%);
@@ -46,19 +43,18 @@
   --color-success: #42db34;
   --color-success-background: lighten(#42db34, 40%);
   /// Categories Colors
-  --color-categories-item-selected-font: #3050ff;
+  --color-categories-item-selected-font: #2d79cf;
-  --color-categories-item-border-selected: #3050ff;
+  --color-categories-item-border-selected: #2d79cf;
   /// Autocomplete Colors
   --color-autocomplete-font: #000;
   --color-autocomplete-border: #bbb;
-  --color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
   --color-autocomplete-background: #fff;
-  --color-autocomplete-background-hover: #e3e3e3;
+  --color-autocomplete-background-hover: #f7f7f7;
   /// Answer Colors
+  --color-answer-border: #ddd; // same as --color-header-border
   --color-answer-font: #444;  // same as --color-base-font
-  --color-answer-background: #fff;
+  --color-answer-background: #f7f7f7; // same as --color-header-background:
   /// Results Colors
-  --color-result-background: #fff;
   --color-result-border: #ddd;
   --color-result-url-font: #000;
   --color-result-vim-selected: #f7f7f7;
@@ -66,9 +62,9 @@
   --color-result-description-highlight-font: #000;
   --color-result-link-font: #000bbb;
   --color-result-link-font-highlight: #000bbb;
-  --color-result-link-visited-font: #9822c3;
+  --color-result-link-visited-font: #80b;
   --color-result-publishdate-font: #777;
-  --color-result-engines-font: #545454;
+  --color-result-engines-font: #777;
   --color-result-search-url-border: #ddd;
   --color-result-search-url-font: #000;
   // Images Colors
@@ -76,79 +72,78 @@
   --color-result-image-span-font-selected: #fff;
   --color-result-image-background: #fff;
   /// Settings Colors
-  --color-settings-tr-hover: #ebebeb;
+  --color-settings-tr-hover: #f7f7f7;
-  --color-settings-engine-description-font: #545454;
+  --color-settings-engine-description-font: darken(#dcdcdc, 30%);
   --color-settings-engine-group-background: #0001;
   /// Detail modal
   --color-result-detail-font: #fff;
   --color-result-detail-label-font: lightgray;
-  --color-result-detail-background: #242424;
+  --color-result-detail-background: #000;
   --color-result-detail-hr: #555;
   --color-result-detail-link: #8af;
   --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
   --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
   /// Toolkit Colors
   --color-toolkit-badge-font: #fff;
-  --color-toolkit-badge-background: #545454;
+  --color-toolkit-badge-background: #777;
   --color-toolkit-kbd-font: #fff;
   --color-toolkit-kbd-background: #000;
   --color-toolkit-dialog-border: #ddd;
   --color-toolkit-dialog-background: #fff;
   --color-toolkit-tabs-label-border: #fff;
   --color-toolkit-tabs-section-border: #ddd;
-  --color-toolkit-select-background: #e1e1e1;
+  --color-toolkit-select-background: #f7f7f7;
   --color-toolkit-select-border: #ddd;
   --color-toolkit-select-background-hover: #bbb;
   --color-toolkit-input-text-font: #222;
   --color-toolkit-checkbox-onoff-off-background: #ddd;
   --color-toolkit-checkbox-onoff-on-background: #ddd;
-  --color-toolkit-checkbox-onoff-on-mark-background: #3050ff;
+  --color-toolkit-checkbox-onoff-on-mark-background: #2d79cf;
   --color-toolkit-checkbox-onoff-on-mark-color: #fff;
   --color-toolkit-checkbox-onoff-off-mark-background: #aaa;
   --color-toolkit-checkbox-onoff-off-mark-color: #fff;
   --color-toolkit-checkbox-label-background: #ddd;
   --color-toolkit-checkbox-label-border: #ddd;
-  --color-toolkit-checkbox-input-border: #3050ff;
+  --color-toolkit-checkbox-input-border: #2d79cf;
   --color-toolkit-engine-tooltip-border: #ddd;
   --color-toolkit-engine-tooltip-background: #fff;
   --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
   --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
   --color-doc-code: #300;
   --color-doc-code-background: #fdd;
+  --color-icon-background: brightness(0) saturate(100%) invert(42%) sepia(43%) saturate(892%) hue-rotate(172deg) brightness(95%) contrast(97%);
+  --search-bar-shadow: rgba(0, 0, 0, 0.35) 0 2px 9px;
 }
 
 .dark-themes() {
   /// Base Colors
   --color-base-font: #bbb;
   --color-base-font-rgb: 187, 187, 187;
-  --color-base-background: #222428;
+  --color-base-background: #181818;
-  --color-base-background-mobile: #222428;
   --color-url-font: #8af;
-  --color-url-visited-font: #c09cd9;
+  --color-url-visited-font: #96b;
   /// Header Colors
-  --color-header-background: #1e1e22;
+  --color-header-background: #181818;
   --color-header-border: #333;
   /// Footer Colors
-  --color-footer-background: #1e1e22;
+  --color-footer-background: #181818;
   --color-footer-border: #333;
   /// Sidebar Colors
   --color-sidebar-border: #555;
-  --color-sidebar-font: #fff;
+  --color-sidebar-font: #eee;
-  --color-sidebar-background: #292c34;
   /// BackToTop Colors
   --color-backtotop-font: #bbb;
   --color-backtotop-border: #333;
-  --color-backtotop-background: #2b2e36;
+  --color-backtotop-background: #181818;
   /// Button Colors
   --color-btn-background: #58f;
-  --color-btn-font: #222;
+  --color-btn-font: #111;
   --color-show-btn-background: #555;
-  --color-show-btn-font: #fff;
+  --color-show-btn-font: #bbb;
   /// Search Input Colors
   --color-search-border: #555;
-  --color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-search-background: #252525;
-  --color-search-background: #2b2e36;
+  --color-search-font: #eee;
-  --color-search-font: #fff;
   --color-search-background-hover: #58f;
   /// Modal Colors
   --color-error: #f55b5b;
@@ -161,72 +156,73 @@
   --color-categories-item-selected-font: #58f;
   --color-categories-item-border-selected: #58f;
   /// Autocomplete Colors
-  --color-autocomplete-font: #fff;
+  --color-autocomplete-font: #eee;
   --color-autocomplete-border: #555;
-  --color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
+  --color-autocomplete-background: #252525;
-  --color-autocomplete-background: #2b2e36;
+  --color-autocomplete-background-hover: #181818;
-  --color-autocomplete-background-hover: #1e1e22;
   /// Answer Colors
+  --color-answer-border: #333; // same as --color-header-border
   --color-answer-font: #bbb; // same as --color-base-font
-  --color-answer-background: #26292f;
+  --color-answer-background: #181818; // same as --color-header-background:
   /// Results Colors
-  --color-result-background: #26292f;
   --color-result-border: #333;
-  --color-result-url-font: #fff;
+  --color-result-url-font: #eee;
-  --color-result-vim-selected: #1f1f23cc;
+  --color-result-vim-selected: #181818;
   --color-result-vim-arrow: #8af;
-  --color-result-description-highlight-font: #fff;
+  --color-result-description-highlight-font: #eee;
   --color-result-link-font: #8af;
   --color-result-link-font-highlight: #8af;
-  --color-result-link-visited-font: #c09cd9;
+  --color-result-link-visited-font: #96b;
   --color-result-publishdate-font: #888;
-  --color-result-engines-font: #a4a4a4;
+  --color-result-engines-font: #888;
   --color-result-search-url-border: #555;
-  --color-result-search-url-font: #fff;
+  --color-result-search-url-font: #eee;
   /// Detail modal : same as the light version
-  --color-result-detail-font: #fff;
+  --color-result-detail-font: #eee;
   --color-result-detail-label-font: lightgray;
-  --color-result-detail-background: #1a1a1c;
+  --color-result-detail-background: #000;
   --color-result-detail-hr: #555;
   --color-result-detail-link: #8af;
   --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
   --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
   // Images Colors
   --color-result-image-span-font: #bbb;
-  --color-result-image-span-font-selected: #222;
+  --color-result-image-span-font-selected: #111;
-  --color-result-image-background: #222;
+  --color-result-image-background: #111;
   /// Settings Colors
-  --color-settings-tr-hover: #2c2c32;
+  --color-settings-tr-hover: #2d2d2d;
   --color-settings-engine-description-font: darken(#dcdcdc, 30%);
-  --color-settings-engine-group-background: #1b1b21;
+  --color-settings-engine-group-background: #1a1919;
   /// Toolkit Colors
-  --color-toolkit-badge-font: #fff;
+  --color-toolkit-badge-font: #eee;
-  --color-toolkit-badge-background: #555;
+  --color-toolkit-badge-background: #777;
   --color-toolkit-kbd-font: #000;
-  --color-toolkit-kbd-background: #fff;
+  --color-toolkit-kbd-background: #eee;
   --color-toolkit-dialog-border: #555;
-  --color-toolkit-dialog-background: #1e1e22;
+  --color-toolkit-dialog-background: #111;
-  --color-toolkit-tabs-label-border: #222;
+  --color-toolkit-tabs-label-border: #111;
   --color-toolkit-tabs-section-border: #555;
-  --color-toolkit-select-background: #313338;
+  --color-toolkit-select-background: #3c3b31;
   --color-toolkit-select-border: #555;
-  --color-toolkit-select-background-hover: #373b49;
+  --color-toolkit-select-background-hover: #333;
-  --color-toolkit-input-text-font: #fff;
+  --color-toolkit-input-text-font: #eee;
-  --color-toolkit-checkbox-onoff-off-background: #313338;
+  --color-toolkit-checkbox-onoff-off-background: #3c3b31;
-  --color-toolkit-checkbox-onoff-on-background: #313338;
+  --color-toolkit-checkbox-onoff-on-background: #3c3b31;
   --color-toolkit-checkbox-onoff-on-mark-background: #58f;
-  --color-toolkit-checkbox-onoff-on-mark-color: #222;
+  --color-toolkit-checkbox-onoff-on-mark-color: #111;
-  --color-toolkit-checkbox-onoff-off-mark-background: #ddd;
+  --color-toolkit-checkbox-onoff-off-mark-background: #eee;
-  --color-toolkit-checkbox-onoff-off-mark-color: #222;
+  --color-toolkit-checkbox-onoff-off-mark-color: #111;
-  --color-toolkit-checkbox-label-background: #222;
+  --color-toolkit-checkbox-label-background: #111;
   --color-toolkit-checkbox-label-border: #333;
   --color-toolkit-checkbox-input-border: #58f;
   --color-toolkit-engine-tooltip-border: #333;
-  --color-toolkit-engine-tooltip-background: #222;
+  --color-toolkit-engine-tooltip-background: #111;
   --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
   --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
   --color-doc-code: #fdd;
   --color-doc-code-background: #300;
+  --color-icon-background: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(109%) contrast(100%);
+  --search-bar-shadow: rgb(0 0 0 / 85%) 0 10px 15px;
 }
 
 /// Dark Theme (autoswitch based on device pref)
@@ -243,7 +239,6 @@
 
 /// General Size
 @results-width: 45rem;
-@results-sidebar-width: 25rem;
 @results-offset: 10rem;
 @results-tablet-offset: 0.5rem;
 @results-gap: 5rem;

searx/static/themes/simple/src/less/index.less

@@ -1,3 +1,23 @@
+
+// #search_logo svg {
+//   /* width: 90px; */
+//   /* height: 150px; */
+//   /* margin-top: -10rem; */
+//   /* margin-bottom: -7rem */
+//   width: 80px;
+//   height: 80px;
+//   margin-top: -3rem;
+//   /* margin-bottom:-7rem; */
+//   overflow: visible;
+//   margin-left: -8rem;
+// #search_logo image {
+//   /* width: 249px; */
+//   /* height: 135px */
+//   width: 180px;
+//   height: 180px;
+//   /* overflow: visible; */
+// }
+
 #main_index {
   margin-top: 26vh;
 }
@@ -7,15 +27,17 @@
 
   .title {
     background: url('../img/searxng.png') no-repeat;
-    min-height: 4rem;
+    min-height: 3.5rem;
-    margin: 4rem auto;
     background-position: center;
     background-size: contain;
+    filter: var(--color-icon-background);
   }
 
   h1 {
-    font-size: 4em;
+    font-size: 33rem;
     visibility: hidden;
+    margin-bottom: -7.5rem;
+    margin-top: -7rem;
   }
 
   #search,

searx/static/themes/simple/src/less/new_issue.less

@@ -1,48 +1,21 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
-.stats_endpoint {
-  .github-issue-button {
-    display: block;
-    padding: 8px 16px;
-    font-family: sans-serif;
-    font-size: 16px;
-    color: white;
-    background-color: #238636;
-    border: #2ea043;
-    border-radius: 10px !important;
-    box-shadow: rgba(0, 0, 0, 0) 0 0 0 0;
-  }
 
-  .github-issue-button:hover {
+.github-issue-button {
-    background-color: #2ea043;
+  display: block;
-  }
+  padding: 8px 16px;
-
+  font-family: sans-serif;
-  .issue-hide {
+  font-size: 16px;
-    display: none;
+  color: white;
-  }
+  background-color: #238636;
-
+  border: #2ea043;
-  input[type=checked] {
+  border-radius: 10px !important;
-    position: absolute;
+  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0;
-  }
+}
-
+
-  label {
+.github-issue-button:hover {
-    margin: 1rem 1rem 1rem 0;
+  background-color: #2ea043;
-  }
+}
-
+
-  .step_content {
+.issue-hide {
-    margin: 1rem 1rem 1rem 2rem;
+  display: none;
-  }
-
-  .step1,
-  .step2 {
-    visibility: hidden;
-  }
-
-  .step1_delay {
-    transition: visibility 0s linear 4s;
-  }
-
-  #step1:checked ~ .step1,
-  #step2:checked ~ .step2 {
-    visibility: visible;
-  }
 }

searx/static/themes/simple/src/less/search.less

@@ -7,27 +7,65 @@
   margin: 0;
 }
 
+.title {
+  font-size: 14px;
+}
+
+footer {
+  display: none;
+}
+
+*:focus {
+  outline: none;
+}
+
+#search_view {
+  display: inline-flex;
+  grid-area: search;
+  margin-top: 1rem;
+}
+
 #search_header {
   padding-top: 1.5em;
   .ltr-padding-right(2em);
   .ltr-padding-left(@results-offset - 3rem);
   margin: 0;
   background: var(--color-header-background);
-  border-bottom: 1px solid var(--color-header-border);
+  //box-shadow: 0 5px 5px -7px #222;
   display: grid;
   column-gap: 1.2rem;
   row-gap: 1rem;
+  position: relative;
+  border-radius: 1rem;
   grid-template-columns: 3rem 1fr;
   grid-template-areas:
     "logo search"
     "spacer categories";
 }
 
+div#suggestions {
+  display: none;
+}
+
+.search_box {
+  width: 45rem;
+  background: var(--color-categories-item-selected-font);
+  border-radius: 1rem;
+  box-shadow: var(--search-bar-shadow);
+  position: relative;
+  height: 3.5rem;
+}
+
+#categories_container {
+  margin-top: -2.2rem;
+}
+
 .category {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
   .ltr-margin-right(1rem);
   padding: 0;
+  margin-right: 1rem;
 
   input {
     display: none;
@@ -35,14 +73,16 @@
 
   label {
     svg {
-      padding-right: 0.2rem;
+      padding-right: 0.5rem;
     }
 
     cursor: pointer;
     padding: 0.2rem 0;
+    padding-right: 0.5rem;
+    padding-left: 0.1rem;
     display: inline-flex;
     text-transform: capitalize;
-    font-size: 0.9em;
+    font-size: 13px;
     border-bottom: 2px solid transparent;
     .disable-user-select;
 
@@ -53,7 +93,7 @@
 
   input[type="checkbox"]:checked + label {
     color: var(--color-categories-item-selected-font);
-    border-bottom: 2px solid var(--color-categories-item-border-selected);
+    border-bottom: 3px solid var(--color-categories-item-border-selected);
   }
 }
 
@@ -62,24 +102,35 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  filter: var(--color-icon-background);
 
   svg {
     flex: 1;
-    width: 30px;
+    width: 100px;
-    height: 30px;
+    height: 100px;
-    margin: 0.5rem 0 auto 0;
+    margin-top: -13.5rem;
+    margin-bottom: -7rem;
+    margin-left: -9.2rem;
+    overflow: visible;
+  }
+
+  image {
+    width: 18rem;
+    height: 15rem;
+    overflow: visible;
   }
 }
 
 .search_categories {
   grid-area: categories;
+  padding-top: 2.3rem;
 
   .help {
     display: none;
   }
 
   &:hover .help {
-    display: block;
+    display: flex;
     position: absolute;
     background: var(--color-base-background);
     padding: 1rem 0.6rem 0.6rem 0;
@@ -89,98 +140,113 @@
   }
 }
 
-#search_view {
-  grid-area: search;
-}
-
-.search_box {
-  border-radius: 0.8rem;
-  width: @search-width;
-  display: inline-flex;
-  flex-direction: row;
-  white-space: nowrap;
-  box-shadow: var(--color-search-shadow);
-}
-
 #clear_search {
-  display: block;
+  display: none;
-  border-collapse: separate;
+  position: absolute;
-  box-sizing: border-box;
+  z-index: 1;
-  width: 1.8rem;
+  right: 85px;
-  margin: 0;
+  margin: auto;
-  padding: 0.8rem 0.2rem;
+  border-radius: 50%;
-  background: none repeat scroll 0 0 var(--color-search-background);
+  text-align: center;
-  border: none;
-  outline: none;
   color: var(--color-search-font);
-  font-size: 1.1rem;
+  cursor: pointer;
-  z-index: 10000;
+  background-color: #0000;
+  border: none;
+  top: 16px;
 
   &:hover {
     color: var(--color-search-background-hover);
+    cursor: pointer;
   }
-
-  &.empty * {
-    display: none;
-  }
-}
-
-html.no-js #clear_search.hide_if_nojs {
-  display: none;
 }
 
 #q,
 #send_search {
-  display: block;
+  display: flex;
-  margin: 0;
+  padding-left: 1.5rem;
-  padding: 0.8rem;
+  height: 3.5rem;
-  background: none repeat scroll 0 0 var(--color-search-background);
   border: none;
-  outline: none;
   color: var(--color-search-font);
-  font-size: 1.1rem;
+  background-color: var(--color-search-background);
-  z-index: 2;
+  font-size: 20px;
+  width: 43.5rem;
+  border-radius: 0.7rem;
+  transition: all 0.4s cubic-bezier(0, 0, 0.3, 1.2); // transition-property: width, border-radius;
 }
 
-#q {
+#q[type="search"] {
+  display: flex;
+  outline: 0;
   width: 100%;
-  .ltr-padding-left(1rem);
+  background: var(--color-search-background);
-  .ltr-padding-right(0) !important;
+  padding: 0 1.6rem;
-  .ltr-rounded-left-corners(0.8rem);
+  border-radius: 0.7rem;
-}
+  appearance: none;
-
+  transition: all 0.4s cubic-bezier(0, 0, 0.3, 1.2);
-#q::-ms-clear,
+  transition-property: width, border-radius;
-#q::-webkit-search-cancel-button {
+  z-index: 1;
-  display: none;
+  position: absolute;
+  padding-right: 2rem;
+  text-align: center;
+  padding-left: 1.5rem;
 }
 
 #send_search {
-  .ltr-rounded-right-corners(0.8rem);
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 3.6rem;
+  width: 5rem;
+  font-weight: bold;
+  background: var(--color-categories-item-selected-font);
+  border-radius: 0 0.7rem 0.7rem 0;
+  color: var(--color-search-background);
+  cursor: pointer;
+  box-shadow: var(--search-bar-shadow);
+  z-index: 0;
+  line-height: 3.7rem;
 
   &:hover {
     cursor: pointer;
     background-color: var(--color-search-background-hover);
-    color: var(--color-search-background);
+    color: var(--color-search-font);
   }
 }
 
-.no-js #clear_search,
+#q:not(:placeholder-shown) {
-.no-js #send_search {
+  display: flex;
-  width: auto !important;
+  border-radius: 0.7rem 0 0 0.7rem;
-  .ltr-border-left(1px solid var(--color-search-border));
+  width: calc(100% - 9.5rem);
+  position: absolute;
+  z-index: 1;
+  padding-left: 1.5rem;
+  padding-right: 3rem;
+  transition: all 0.4s cubic-bezier(0, 0, 0.3, 1.2);
+  transition-property: width, border-radius;
 }
 
+#q:not(:placeholder-shown) ~ #send_search {
+  display: flex;
+}
+
+#q:not(:placeholder-shown) ~ #clear_search {
+  display: flex;
+}
+
+input[type="search"]::-webkit-search-cancel-button { display: none; }
+
 .search_filters {
   margin-top: 0.6rem;
   .ltr-margin-right(0);
   margin-bottom: 0;
   .ltr-margin-left(@results-offset + 0.6rem);
-  display: flex;
+  display: none;
   overflow-x: auto;
   overscroll-behavior-inline: contain;
 
   select {
-    background-color: inherit;
+    background: var(--color-search-background);
 
     &:hover,
     &:focus {
@@ -220,7 +286,7 @@ html.no-js #clear_search.hide_if_nojs {
       width: max-content;
 
       .category {
-        display: inline-block;
+        display: inline-flex;
         width: auto;
       }
     }
@@ -267,7 +333,7 @@ html.no-js #clear_search.hide_if_nojs {
   }
 
   .category {
-    display: inline-block;
+    display: inline-flex;
     width: auto;
     margin: 0;
 
@@ -282,8 +348,8 @@ html.no-js #clear_search.hide_if_nojs {
   }
 
   #search_view:focus-within {
-    display: block;
+    display: flex;
-    background-color: var(--color-search-background);
+    background-color: var(--color-base-background);
     position: absolute;
     top: 0;
     height: 100%;
@@ -291,10 +357,11 @@ html.no-js #clear_search.hide_if_nojs {
     z-index: 10000;
 
     .search_box {
-      border-bottom: 1px solid var(--color-search-border);
+      border-top: none;
+      border-left: none;
+      border-right: none;
       width: 100%;
       border-radius: 0;
-      box-shadow: none;
 
       #send_search {
         .ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile.
@@ -303,14 +370,13 @@ html.no-js #clear_search.hide_if_nojs {
       * {
         border: none;
         border-radius: 0;
-        box-shadow: none;
       }
     }
   }
 
   #main_results #q:placeholder-shown ~ #send_search {
     .ltr-margin-right(2.6rem);
-    transition: margin 0.1s;
+    transition: margin 0.2s;
   }
 }
 
@@ -334,7 +400,3 @@ html.no-js #clear_search.hide_if_nojs {
     height: 0;
   }
 }
-
-#categories_container {
-  position: relative;
-}

searx/static/themes/simple/src/less/stats.less

@@ -1,25 +1,6 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 .engine-stats {
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  tr td,
-  tr th {
-    border-bottom: 1px solid var(--color-result-border);
-    padding: 0.25rem;
-  }
-
-  table.engine-tooltip {
-    border-spacing: 0;
-    border-collapse: collapse;
-
-    td,
-    th {
-      border: none;
-    }
-  }
-
   .engine-name {
     width: 20rem;
   }
@@ -32,33 +13,23 @@
   .engine-reliability {
     text-align: right;
   }
-}
-
-table.engine-error th.engine-error-type,
-table.engine-error td.engine-error-type,
-failed-test {
-  width: 10rem;
-}
-
-.engine-errors {
-  margin-top: 3rem;
 
   table.engine-error {
     max-width: 1280px;
-    margin: 1rem 0 3rem 0;
+    margin: 1rem;
-    border: 1px solid var(--color-result-border);
+    border: 1px solid gray;
-    .ltr-text-align-left();
+  }
 
-    tr th,
+  table.engine-error th.engine-error-type,
-    tr td {
+  table.engine-error td.engine-error-type,
-      padding: 0.5rem;
+  failed-test {
-    }
+    width: 10rem;
+  }
 
-    & span.log_parameters {
+  table.engine-error span.log_parameters {
-      border-right: 1px solid solid var(--color-result-border);
+    border-right: 1px solid gray;
-      padding: 0 1rem 0 0;
+    padding: 0 1rem 0 0;
-      margin: 0 0 0 0.5rem;
+    margin: 0 0 0 0.5rem;
-    }
   }
 }
 

searx/static/themes/simple/src/less/style.less

@@ -29,9 +29,6 @@
 // Search-Field
 @import "search.less";
 
-// to center the results
-@import "style-center.less";
-
 // ion-icon
 .ion-icon {
   display: inline-block;
@@ -463,7 +460,7 @@ article[data-vim-selected].category-social {
   margin-bottom: 0;
   .ltr-margin-left(@results-offset);
   display: grid;
-  grid-template-columns: @results-width @results-sidebar-width;
+  grid-template-columns: @results-width 25rem;
   grid-template-rows: min-content min-content 1fr min-content;
   gap: 0 @results-gap;
   grid-template-areas:
@@ -594,29 +591,24 @@ article[data-vim-selected].category-social {
       padding: 0;
     }
 
+    dl {
+      margin: 0.5em 0;
+    }
+
     dt {
+      display: inline;
+      margin-top: 0.5em;
+      .ltr-margin-right(0.25em);
+      margin-bottom: 0.5em;
+      .ltr-margin-left(0);
+      padding: 0;
       font-weight: bold;
     }
 
-    .attributes {
+    dd {
-      dl {
+      display: inline;
-        margin: 0.5em 0;
+      margin: 0.5em 0;
-      }
+      padding: 0;
-
-      dt {
-        display: inline;
-        margin-top: 0.5em;
-        .ltr-margin-right(0.25em);
-        margin-bottom: 0.5em;
-        .ltr-margin-left(0);
-        padding: 0;
-      }
-
-      dd {
-        display: inline;
-        margin: 0.5em 0;
-        padding: 0;
-      }
     }
 
     input {
@@ -644,30 +636,16 @@ article[data-vim-selected].category-social {
   }
 }
 
-#links_on_top {
+#linkto_preferences {
   position: absolute;
   .ltr-right(1.8rem);
-  .ltr-text-align-right();
   top: 2.2rem;
   padding: 0;
   border: 0;
-  display: flex;
+  display: block;
-  align-items: center;
+  font-size: 1.2em;
-  font-size: 1em;
   color: var(--color-search-font);
 
-  a {
-    display: flex;
-    align-items: center;
-    margin-left: 1em;
-
-    svg {
-      font-size: 1.2em;
-      .ltr-margin-right(0.125em);
-    }
-  }
-
-  a,
   a:link *,
   a:hover *,
   a:visited *,
@@ -720,17 +698,7 @@ article[data-vim-selected].category-social {
   opacity: 1;
 }
 
-/*
+@media screen and (max-width: @tablet) {
-  tablet layout
-*/
-
-.results-tablet() {
-  #links_on_top {
-    span {
-      display: none;
-    }
-  }
-
   .page_with_header {
     margin: 2rem 0.5rem;
     width: auto;
@@ -831,36 +799,6 @@ article[data-vim-selected].category-social {
   }
 }
 
-@media screen and (max-width: calc(@tablet - 0.5px)) {
-  #links_on_top {
-    span {
-      display: none;
-    }
-  }
-}
-
-@media screen and (max-width: 52rem) {
-  body.results_endpoint {
-    #links_on_top {
-      .link_on_top_about,
-      .link_on_top_donate {
-        display: none;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: @phone) and (max-width: @tablet) {
-  // when .center-aligment-yes, see style-center.less
-  // the media query includes "min-width: @phone"
-  // because the phone layout includes the tablet layout unconditionally.
-  .center-aligment-no {
-    .results-tablet();
-  }
-}
-
-/* Misc */
-
 #main_results div#results.only_template_images {
   margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
@@ -899,14 +837,7 @@ article[data-vim-selected].category-social {
   }
 }
 
-/*
-  phone layout
-*/
-
 @media screen and (max-width: @phone) {
-  // based on the tablet layout
-  .results-tablet();
-
   html {
     background-color: var(--color-base-background-mobile);
   }
@@ -916,12 +847,12 @@ article[data-vim-selected].category-social {
     margin: 1rem 0 0 0;
   }
 
-  #links_on_top {
+  #linkto_preferences {
     top: 0.8rem;
     .ltr-right(0.7rem);
   }
 
-  #main_index #links_on_top {
+  #main_index #linkto_preferences {
     top: 0.5rem;
     .ltr-right(0.5rem);
   }
@@ -957,10 +888,6 @@ article[data-vim-selected].category-social {
   }
 }
 
-/*
-  small-phone layout
-*/
-
 @media screen and (max-width: @small-phone) {
   .result-videos {
     img.thumbnail {

utils/brand.env

@@ -1,5 +1,5 @@
 export SEARXNG_URL=''
 export SEARXNG_PORT='8888'
-export SEARXNG_BIND_ADDRESS='127.0.0.1'
+export SEARXNG_BIND_ADDRESS='0.0.0.0'
-export GIT_URL='https://github.com/searxng/searxng'
+export GIT_URL='unknow'
-export GIT_BRANCH='master'
+export GIT_BRANCH='unknow'