1 files changed, 232 insertions, 0 deletions
diff --git a/searx/static/themes/simple/less/search.less b/searx/static/themes/simple/less/search.less
new file mode 100644
index 000000000..beeac3e8a
--- /dev/null
+++ b/searx/static/themes/simple/less/search.less
@@ -0,0 +1,232 @@
+/*
+* searx, A privacy-respecting, hackable metasearch engine
+*/
+
+#search  {
+  padding: 0 2em;
+  margin: 0;
+  background: #f7f7f7;
+  border-bottom: 1px solid #d7d7d7;
+}
+
+#search_wrapper {
+  padding: 10px 0;
+}
+
+.search_box {
+  margin: 0 12px 0 0;
+  display: inline-flex;
+  flex-direction: row;
+
+  white-space: nowrap;
+  /*
+  &:has(q:focus) {
+  box-shadow: 0px 0px 5px #CCC;
+}
+*/
+}
+
+#q, #send_search {
+  display: block !important;
+  border-collapse: separate;
+  box-sizing: border-box;
+  position: relative;
+
+  margin: 0;
+  padding: 2px;
+  height: 2.2em;
+  background: none repeat scroll 0 0 @color-search-background;
+  border: 1px solid @color-search-border;
+  border-radius: 0px;
+  outline: none;
+  color: @color-search-font;
+  font-size: 16px;
+  z-index: 2;
+}
+
+#q {
+  outline: medium none;
+  padding-left: 8px;
+  padding-right: 0px !important;
+  border-right: none;
+  width: @search-width;
+}
+
+#send_search {
+  border-left: none;
+  width: 2.2em;
+
+  &:hover {
+    cursor: pointer;
+    background-color: @color-search-border;
+    color: @color-base-light;
+  }
+}
+
+.no-js #send_search {
+  width: auto !important;
+}
+
+.search_filters {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@media screen and (max-width: 75em) {
+
+  #categories {
+    font-size: 90%;
+    clear: both;
+
+    .checkbox_container {
+      margin-top: 2px;
+      margin: auto;
+    }
+  }
+
+  html.touch {
+    #main_index, #main_results {
+
+      #categories_container {
+        width: 1000px;
+        width: -moz-max-content;
+        width: -webkit-max-content;
+        width: max-content;
+
+        .category {
+          display: inline-block;
+          width: auto;
+        }
+      }
+
+      #categories {
+        width: 100%;
+        margin: 0;
+        text-align: left;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+
+}
+
+@media screen and (max-width: @results-width) {
+
+  #search {
+    width: 100%;
+    margin: 0;
+    padding: 0.1em 0 0 0;
+  }
+
+  #search_wrapper {
+    width: 100%;
+    margin: 0 0 0.7em 0;
+    padding: 0;
+  }
+
+  .search_box {
+    // hack, should bew 100% ?
+    width: 99%;
+    margin: 0.1em;
+    padding: 0 0.1em 0 0;
+    display: flex;
+    flex-direction: row;
+  }
+
+  #q {
+    width: auto !important;
+    flex: 1;
+  }
+
+  .search_filters {
+    display: block;
+    margin: 0.5em;
+  }
+
+  .language, .time_range {
+    width: 45%;
+  }
+
+  .category {
+    display: block;
+    width: 90%;
+
+    label {
+      border-bottom: 0;
+    }
+  }
+
+}
+
+#categories {
+  margin: 0 10px 0 0;
+  .disable-user-select;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.category {
+  display: inline-block;
+  position: relative;
+  margin: 0 3px;
+  padding: 0px;
+
+  input {
+    display: none;
+  }
+
+  label {
+    cursor: pointer;
+    padding: 4px 10px;
+    margin: 0;
+    display: block;
+    text-transform: capitalize;
+    font-size: 0.9em;
+    border-bottom: 2px solid transparent;
+    .disable-user-select;
+  }
+
+  input[type="checkbox"]:focus + label {
+    box-shadow: 0px 0px 8px #3498DB;
+  }
+
+  /*label:hover {
+  border-bottom: 2px solid @color-categories-item-border-unselected-hover;
+  }*/
+
+  input[type="checkbox"]:checked + label {
+    background: @color-categories-item-selected;
+    color: @color-categories-item-selected-font;
+    border-bottom: 2px solid @color-categories-item-border-selected;
+  }
+}
+
+#categories_container {
+
+  position: relative;
+
+  .help {
+    position: absolute;
+    width: 100%;
+    bottom: -20px;
+    overflow: hidden;
+
+    opacity: 0;
+    transition: opacity 1s ease;
+
+    font-size: 0.8em;
+    text-position: center;
+    background: white;
+  }
+
+  &:hover .help {
+    opacity: 0.8;
+    transition: opacity 1s ease;
+  }
+
+}