[enh] oscar theme redesign added

The original code made by @logico-dev (#559)

10 files changed, 472 insertions, 0 deletions

diff --git a/searx/static/themes/oscar/less/logicodev/checkbox.less b/searx/static/themes/oscar/less/logicodev/checkbox.less
new file mode 100644
index 000000000..6428b36ed
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/checkbox.less
@@ -0,0 +1,9 @@
+// Hide element if checkbox is checked
+input[type=checkbox]:checked + .label_hide_if_checked, input[type=checkbox]:checked + .label_hide_if_not_checked + .label_hide_if_checked {
+  display:none;
+}
+
+// Hide element if checkbox is not checked
+input[type=checkbox]:not(:checked) + .label_hide_if_not_checked, input[type=checkbox]:not(:checked) + .label_hide_if_checked + .label_hide_if_not_checked {
+  display:none;
+}
diff --git a/searx/static/themes/oscar/less/logicodev/code.less b/searx/static/themes/oscar/less/logicodev/code.less
new file mode 100644
index 000000000..96486f5aa
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/code.less
@@ -0,0 +1,103 @@
+pre, code{
+    font-family: 'Ubuntu Mono', 'Courier New', 'Lucida Console', monospace !important;
+}
+
+.lineno{
+    margin-right: 5px;
+}
+
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f8f8f8; }
+.highlight .c { color: #556366; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid @orange } /* Error */
+.highlight .k { color: #BE74D5; font-weight: bold } /* Keyword */
+.highlight .o { color: #D19A66 } /* Operator */
+.highlight .cm { color: #556366; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
+.highlight .c1 { color: #556366; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #556366; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #BE74D5; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #BE74D5; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #BE74D5; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #BE74D5 } /* Keyword.Pseudo */
+.highlight .kr { color: #BE74D5; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #D46C72 } /* Keyword.Type */
+.highlight .m { color: #D19A66 } /* Literal.Number */
+.highlight .s { color: #86C372 } /* Literal.String */
+.highlight .na { color: #7D9029 } /* Name.Attribute */
+.highlight .nb { color: #BE74D5 } /* Name.Builtin */
+.highlight .nc { color: #61AFEF; font-weight: bold } /* Name.Class */
+.highlight .no { color: #D19A66 } /* Name.Constant */
+.highlight .nd { color: #AA22FF } /* Name.Decorator */
+.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #61AFEF } /* Name.Function */
+.highlight .nl { color: #A0A000 } /* Name.Label */
+.highlight .nn { color: #61AFEF; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #BE74D5; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #DFC06F } /* Name.Variable */
+.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #D7DAE0 } /* Text.Whitespace */
+.highlight .mf { color: #D19A66 } /* Literal.Number.Float */
+.highlight .mh { color: #D19A66 } /* Literal.Number.Hex */
+.highlight .mi { color: #D19A66 } /* Literal.Number.Integer */
+.highlight .mo { color: #D19A66 } /* Literal.Number.Oct */
+.highlight .sb { color: #86C372 } /* Literal.String.Backtick */
+.highlight .sc { color: #86C372 } /* Literal.String.Char */
+.highlight .sd { color: #86C372; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #86C372 } /* Literal.String.Double */
+.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #86C372 } /* Literal.String.Heredoc */
+.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
+.highlight .sx { color: #BE74D5 } /* Literal.String.Other */
+.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
+.highlight .s1 { color: #86C372 } /* Literal.String.Single */
+.highlight .ss { color: #DFC06F } /* Literal.String.Symbol */
+.highlight .bp { color: #BE74D5 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #DFC06F } /* Name.Variable.Class */
+.highlight .vg { color: #DFC06F } /* Name.Variable.Global */
+.highlight .vi { color: #DFC06F } /* Name.Variable.Instance */
+.highlight .il { color: #D19A66 } /* Literal.Number.Integer.Long */
+
+.highlight .lineno {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: default;
+    color: #556366;
+    
+    &::selection {
+        background: transparent; /* WebKit/Blink Browsers */
+    }
+    &::-moz-selection {
+        background: transparent; /* Gecko Browsers */
+    }
+}
+
+.highlight pre {
+    background-color: #282C34;
+    color: #D7DAE0;
+    border: none;
+    margin-bottom: 25px;
+    font-size: 15px;
+    padding: 20px 10px;
+}
+
+.highlight {
+    font-weight: 700;
+}
+
+
diff --git a/searx/static/themes/oscar/less/logicodev/cursor.less b/searx/static/themes/oscar/less/logicodev/cursor.less
new file mode 100644
index 000000000..cbc1ea6fc
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/cursor.less
@@ -0,0 +1,8 @@
+// display cursor
+.cursor-text {
+    cursor: text !important;
+}
+
+.cursor-pointer {
+    cursor: pointer !important;
+}
diff --git a/searx/static/themes/oscar/less/logicodev/footer.less b/searx/static/themes/oscar/less/logicodev/footer.less
new file mode 100644
index 000000000..d23a0cc97
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/footer.less
@@ -0,0 +1,30 @@
+// Sticky footer styles
+*{
+  border-radius: 0 !important;
+}
+html {
+  position: relative;
+  min-height: 100%;
+  color: @black;
+}
+
+body {
+  /* Margin bottom by footer height */
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  margin-bottom: 80px;
+  background-color: white;
+
+  a{
+      color: @blue;
+  }
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  text-align: center;
+  color: #999;
+}
diff --git a/searx/static/themes/oscar/less/logicodev/infobox.less b/searx/static/themes/oscar/less/logicodev/infobox.less
new file mode 100644
index 000000000..0d488d744
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/infobox.less
@@ -0,0 +1,37 @@
+.infobox {
+
+    .panel-heading{
+        background-color: @dim-gray;
+
+        .panel-title{
+            font-weight: 700;
+        }
+    }
+
+
+    p{
+        font-family: "DejaVu Serif", Georgia, Cambria, "Times New Roman", Times, serif !important;
+        font-style: italic;
+    }
+
+    .btn{
+        background-color: @green;
+        border: none;
+
+        a{
+            color: white;
+            margin: 5px;
+        }
+    }
+
+    .infobox_part {
+        margin-bottom: 20px;
+        word-wrap: break-word;
+        table-layout: fixed;
+
+    }
+    
+    .infobox_part:last-child {
+        margin-bottom: 0;
+    }
+}
diff --git a/searx/static/themes/oscar/less/logicodev/navbar.less b/searx/static/themes/oscar/less/logicodev/navbar.less
new file mode 100644
index 000000000..fec699e74
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/navbar.less
@@ -0,0 +1,50 @@
+.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
+    background: @black;
+    color: @light-green;
+}
+
+.navbar > li > a {
+    padding: 0;
+    margin: 0;
+}
+
+.navbar-nav > li > a {
+    background: @black;
+    padding: 0 8px;
+    margin: 0;
+    line-height: 30px;
+}
+
+.navbar, .navbar-default{
+    background-color: @black;
+    border: none;
+    border-top: 4px solid @light-green;
+    padding-top: 5px;
+    color: @dim-gray !important;
+    font-weight: 700;
+    font-size: 1.1em;
+    text-transform: lowercase;
+    margin-bottom: 24px;
+    height: 30px;
+    line-height: 30px;
+
+    .navbar-nav > li > a{
+        color: @dim-gray;
+    }
+
+    .navbar-brand{
+        font-weight: 700;
+        text-transform: capitalize;
+        color: @light-green;
+        line-height: 30px;
+        padding: 0 30px;
+        margin: 0;
+    }
+}
+
+// Hover color
+// http://stackoverflow.com/users/114029/leniel-macaferi
+.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
+    color: @light-green;
+    background: @black;
+}
diff --git a/searx/static/themes/oscar/less/logicodev/oscar.less b/searx/static/themes/oscar/less/logicodev/oscar.less
new file mode 100644
index 000000000..fba596c07
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/oscar.less
@@ -0,0 +1,17 @@
+@import "variables.less";
+
+@import "navbar.less";
+
+@import "footer.less";
+
+@import "checkbox.less";
+
+@import "results.less";
+
+@import "infobox.less";
+
+@import "search.less";
+
+@import "cursor.less";
+
+@import "code.less";
diff --git a/searx/static/themes/oscar/less/logicodev/results.less b/searx/static/themes/oscar/less/logicodev/results.less
new file mode 100644
index 000000000..208c414b2
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/results.less
@@ -0,0 +1,149 @@
+.result_header {
+    margin-bottom:5px;
+    font-size: 16px;
+
+    .favicon {
+        margin-bottom:-3px;
+    }
+    
+    a {
+        color: @black;
+        text-decoration: none;
+
+        &:hover{
+            color: @blue;
+        }
+
+        &:visited{
+            color: @violet;
+        }
+        
+        .highlight {
+            background-color: @dim-gray;
+            // Chrome hack: bold is different size than normal
+            // https://stackoverflow.com/questions/20713988/weird-text-alignment-issue-in-css-when-bolded-lucida-sans
+        }
+    }
+}
+
+.result-content {
+    margin-top: 2px;
+    margin-bottom: 4px;
+    word-wrap: break-word;
+    color: @dark-gray;
+    font-size: 13px;
+
+
+    .highlight {
+        font-weight:bold;
+    }
+
+}
+
+.external-link, .external-link a{
+    color: @green;
+
+    a{
+        margin-right: 3px;
+    }
+}
+
+// default formating of results
+.result-default, .result-code, .result-torrent, .result-videos, .result-map {
+    clear: both;
+    padding: 2px 4px;
+    &:hover{
+        background-color: @dim-gray;
+    }
+}
+
+
+// image formating of results
+.result-images {
+    float: left !important;
+    width: 24%;
+    margin: .5%;
+    a{
+        display: block;
+        width: 100%;
+        height: 170px;
+        background-size: cover;
+    }
+}
+
+.img-thumbnail {
+    margin: 5px;
+    max-height: 128px;
+    min-height: 128px;
+}
+
+// video formating of results
+.result-videos {
+    clear: both;
+
+    hr{
+        margin: 5px 0 15px 0;
+    }
+
+    .collapse{
+        width: 100%;
+    }
+
+    .in{
+        margin-bottom: 8px;
+    }
+}
+
+// torrent formating of results
+.result-torrent {
+    clear: both;
+
+    b{
+        margin-right: 5px;
+        margin-left: 5px;
+    }
+
+    .seeders{
+        color: @green;
+    }
+
+    .leechers{
+        color: @red;
+    }
+}
+
+// map formating of results
+.result-map {
+    clear: both;
+}
+
+// code formating of results
+.result-code {
+    clear: both;
+
+    .code-fork, .code-fork a{
+        color: @dark-gray;
+    }
+
+}
+
+// suggestion
+.suggestion_item {
+    margin: 2px 5px;
+}
+
+// download result
+.result_download {
+    margin-right: 5px;
+}
+
+// page forward, backward
+#pagination {
+    margin-top: 30px;
+    padding-bottom: 60px;
+}
+
+.label-default {
+    color: @gray;
+    background: transparent;
+}
diff --git a/searx/static/themes/oscar/less/logicodev/search.less b/searx/static/themes/oscar/less/logicodev/search.less
new file mode 100644
index 000000000..f30b1178f
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/search.less
@@ -0,0 +1,59 @@
+.search_categories, #categories {
+  margin: 15px 0 20px 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;
+    }
+
+      &:active{
+        box-shadow: none;
+      }
+  }
+
+  .active, .btn-primary{
+    color: @black;
+    font-weight: 700;
+    border-bottom: 5px solid @light-green;
+    background-color: transparent;
+  }
+
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
+    background-color: transparent !important;
+    box-shadow: none;
+}
+
+#categories{
+    margin: 0;
+}
+
+#main-logo{
+    margin-top: 10vh;
+    margin-bottom: 25px;
+}
+
+#q{
+    box-shadow: none;
+    border-right: none;
+    border-color: @gray;
+}
+
+ #search_form .input-group-btn .btn{
+    border-color: @gray;
+ }
+
+ #search_form .input-group-btn .btn:hover{
+     background-color: @green;
+     color: white;
+ }
diff --git a/searx/static/themes/oscar/less/logicodev/variables.less b/searx/static/themes/oscar/less/logicodev/variables.less
new file mode 100644
index 000000000..3ca05e76e
--- /dev/null
+++ b/searx/static/themes/oscar/less/logicodev/variables.less
@@ -0,0 +1,10 @@
+@black: #29314D;
+@gray: #A4A4A4;
+@dim-gray: #F6F9FA;
+@dark-gray: #666;
+@blue: #0088CC; 
+@red: #F35E77;
+@violet: #684898;
+@green: #2ecc71;
+@light-green: #01D7D4; 
+@orange: #FFA92F;