add advanced settings for logicodev style

4 files changed, 92 insertions, 26 deletions

diff --git a/searx/static/themes/oscar/less/logicodev/advanced.less b/searx/static/themes/oscar/less/logicodev/advanced.less
new file mode 100644
index 000000000..30e4c9ea5
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/advanced.less
@@ -0,0 +1,70 @@
+#advanced-search-container {
+    display:none;
+    text-align:left;
+    margin-bottom:1rem;
+
+    label, .input-group-addon {
+        font-size: 1.2rem;
+        font-weight:normal;
+        background-color: white;
+        border: @mild-gray 1px solid;
+        border-right: none;
+        color: @dark-gray;
+        padding-bottom: 0.4rem;
+        padding-top: 0.4rem;
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+
+    label:last-child, .input-group-addon:last-child {
+        border-right: @mild-gray 1px solid;
+    }
+
+    input[type="radio"] {
+        display: none;
+    }
+
+    input[type="radio"]:checked + label{
+        color: @black;
+        font-weight:bold;
+        border-bottom: @light-green 5px solid;
+    }
+    select {
+        appearance: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        font-size: 1.2rem;
+        font-weight:normal;
+        background-color: white;
+        border: @mild-gray 1px solid;
+        color: @dark-gray;
+        padding-bottom: 0.4rem;
+        padding-top: 0.4rem;
+        padding-left: 1rem;
+        padding-right: 5rem;
+        margin-right: 0.5rem;
+        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
+AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
+cwAABFkAAARZAVnbJUkAAAAHdElNRQfgBxgLDwB20OFsAAAAbElEQVQY073OsQ3CMAAEwJMYwJGn
+sAehpoXJItltBkmcdZBYgIIiQoLglnz3ui+eP+bk5uneteTMZJa6OJuIqvYzSJoqwqBq8gdmTTW8
+6/dghxAUq4xsVYT9laBYXCw93Aajh7GPEF23t4fkBYevGFTANkPRAAAAJXRFWHRkYXRlOmNyZWF0
+ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
+Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
+7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
+    }
+}
+
+#check-advanced {
+    display: none;
+}
+
+#check-advanced:checked ~ #advanced-search-container {
+    display:block;
+}
+
+.advanced {
+    margin-top:1rem;
+    text-align:right;
+}
+
+
diff --git a/searx/static/themes/oscar/less/logicodev/oscar.less b/searx/static/themes/oscar/less/logicodev/oscar.less
index fba596c07..7d0d0046e 100644
--- a/searx/static/themes/oscar/less/logicodev/oscar.less
+++ b/searx/static/themes/oscar/less/logicodev/oscar.less
@@ -12,6 +12,8 @@
 
 @import "search.less";
 
+@import "advanced.less";
+
 @import "cursor.less";
 
 @import "code.less";
diff --git a/searx/static/themes/oscar/less/logicodev/search.less b/searx/static/themes/oscar/less/logicodev/search.less
index 1bb71a702..f6d6b3dc6 100644
--- a/searx/static/themes/oscar/less/logicodev/search.less
+++ b/searx/static/themes/oscar/less/logicodev/search.less
@@ -1,36 +1,28 @@
 .search_categories, #categories {
-  margin: 10px 0 4px 0;
   text-transform: capitalize;
-  
-  label{
-    border: none;
-    box-shadow: none;
-    font-size: 13px;
-    padding-bottom: 2px;
-    color: @gray;
-    margin-bottom: 5px;
-
-    &:hover{
-        color: @black;
-        background-color: transparent;
-    }
+  margin-bottom: 0.5rem;
 
-      &:active{
-        box-shadow: none;
-      }
+  label, .input-group-addon {
+    font-size: 1.2rem;
+    font-weight:normal;
+    background-color: white;
+    border: @mild-gray 1px solid;
+    border-right: none;
+    color: @dark-gray;
+    padding-bottom: 0.4rem;
+    padding-top: 0.4rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+  label:last-child, .input-group-addon:last-child {
+      border-right: @mild-gray 1px solid;
   }
 
-  .active, .btn-primary{
+  input[type="checkbox"]:checked + label {
     color: @black;
-    font-weight: 700;
-    border-bottom: 5px solid @light-green;
-    background-color: transparent;
+    font-weight:bold;
+    border-bottom: @light-green 5px solid;
   }
-
-}
-
-#categories{
-    margin: 0;
 }
 
 #main-logo{
diff --git a/searx/static/themes/oscar/less/logicodev/variables.less b/searx/static/themes/oscar/less/logicodev/variables.less
index 3ca05e76e..2b0e1a39b 100644
--- a/searx/static/themes/oscar/less/logicodev/variables.less
+++ b/searx/static/themes/oscar/less/logicodev/variables.less
@@ -2,6 +2,8 @@
 @gray: #A4A4A4;
 @dim-gray: #F6F9FA;
 @dark-gray: #666;
+@middle-gray: #F5F5F5;
+@mild-gray: #DDD;
 @blue: #0088CC; 
 @red: #F35E77;
 @violet: #684898;