Cleaned up css, improved mobile layout and preferences.

searx/static/themes/eelo/less/eelo/base.less

@@ -12,68 +12,81 @@ body {
   margin-bottom: 120px;
   background-color: white;
   font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;
-}
-body.lock { overflow: hidden; }
-
-body * {
-  font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;
-}
-
 
-.text-muted {
-  color: @text-muted-color;
-}
+  &.lock { overflow: hidden; }
 
-.danger, .btn.danger {
-  color: @color_danger;
+  * {
+    font-family: sans-serif, "Cantarell", 'Roboto', Helvetica, Arial;
+  }
 }
 
 input, select {
   box-shadow: none !important;
 }
 
-a { color: @link-color; }
-a, a:hover, a:focus, a:active, select:hover, select:focus, select:active {
-  outline: none;
-  text-decoration: none;
+a { 
+  color: @link-color;
+  &:extend(.color-transition);
+}
+a, select {
+  &, &:focus, &:active, &:hover {
+    outline: none;
+    text-decoration: none;
+  }
 }
 
+label { color: @text-color-hl; }
 
-.btn {
-  text-transform: uppercase;
-  padding: 8px 14px;
-  background-color: transparent;
-  border: 2px solid rgba(0, 0, 0, .2);
-  border-radius: @corner-radius;  
-  text-align: center;
-  font-size: @fontsize_medium;
-  font-weight: bold;
-  color: @color_base-text-hl;  
-}
-.btn.btn-block, .block {
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-}
-.btn.primary, input.btn[type="submit"] {
-  // border-color: @color_accent;
-  color: @color_accent;
-}
-.btn.btn-flat {
+section { margin-bottom: @spacing_xx-large; }
+
+ul > li { margin-bottom: @spacing_medium; }
+
+fieldset {
   border: none;
-  border-radius: 0;
+  padding: 0px;
 }
-.btn.btn-flat:hover {
-  background-color: transparent;
-  color: blue;
+
+
+
+nav {
+  &:extend(.container-padding);
+
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  text-transform: capitalize;
+
+  margin-bottom: 24px;
+  a {
+    color: #868686;
+
+    &:hover {
+      color: @color_accent;
+    }
+  }
+  #eelo_links > * { margin-right: 32px; }
+}
+
+
+
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: auto;
+  text-align: center;
+  color: #c1c1c1;
+  padding-bottom: @spacing_medium;
 }
 
-.hidden, #icons { display: none; }
 
 
 [disabled] {
-  opacity: 0.4;
+  &:extend(.disabled);
 }
+.hidden, #icons { display: none; }
 
 
 #image_view_modal {
@@ -124,37 +137,8 @@ a, a:hover, a:focus, a:active, select:hover, select:focus, select:active {
 
   .options { margin-top: @spacing_medium; }
   .btn {
+    .btn.plain-white();
     display: inline-block;
-    border-color: rgba(255, 255, 255, .4);
-    color: rgba(255, 255, 255, .8);
-    background-color: rgba(0, 0, 0, .5);
     margin-right: @spacing_medium;
   }
-}
-
-
-.custom-select {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  font-weight: normal;
-  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
-AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
-cwAABFkAAARZAVnbJUkAAAAHdElNRQfgBxgLDwB20OFsAAAAbElEQVQY073OsQ3CMAAEwJMYwJGn
-sAehpoXJItltBkmcdZBYgIIiQoLglnz3ui+eP+bk5uneteTMZJa6OJuIqvYzSJoqwqBq8gdmTTW8
-6/dghxAUq4xsVYT9laBYXCw93Aajh7GPEF23t4fkBYevGFTANkPRAAAAJXRFWHRkYXRlOmNyZWF0
-ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w
-Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb
-7jwaAAAAAElFTkSuQmCC) 96% no-repeat;
-
-}
-.custom-select.flat {
-  border: none;
-}
-.custom-select:not(.flat) {
-  border: 2px solid rgba(0, 0, 0, .2);
-  width: 100%;
-  border-radius: 50px;
-  padding: 4px 12px;
 }
\ No newline at end of file

searx/static/themes/eelo/less/eelo/variables.less → searx/static/themes/eelo/less/eelo/defs.less

@@ -45,3 +45,35 @@
 
 @size-desktop: 1100px;
 @size-mobile: 600px;
+
+
+.container-padding {
+  padding-left: @spacing_container;
+  padding-right: @spacing_container;
+}
+
+
+@color-transition: color .2s ease-in-out;
+@border-color-transition: border-color .2s ease-in-out;
+
+.color-transition { transition: @color-transition; }
+.border-color-transition { transition: @border-color-transition; }
+
+.widget-border(@color: rgba(0, 0, 0, .2)) {
+  border: 2px solid @color;
+}
+
+
+.disabled { opacity: .4; }
+
+
+// media queries
+.tablet-mq(@rules) {
+  @media screen and (max-width: @size-desktop) { @rules(); }
+}
+.mobile-mq(@rules) {
+  @media screen and (max-width: @size-mobile) { @rules(); }
+}
+.mobile-landscape-mq(@rules) {
+  @media screen and (max-height: @size-mobile) and (orientation: landscape) { @rules(); }
+}
\ No newline at end of file

searx/static/themes/eelo/less/eelo/eelo.less

-@import "variables.less";
+@import "defs.less";
 @import "layout.less";
+@import "widgets.less";
+
 @import "base.less";
-@import "navbar.less";
-@import "footer.less";
+
 @import "search.less";
 @import "results.less";
 @import "preferences.less";
\ No newline at end of file

searx/static/themes/eelo/less/eelo/footer.less

-footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: auto;
-  text-align: center;
-  color: #c1c1c1;
-  padding-bottom: 16px;
-}
\ No newline at end of file

searx/static/themes/eelo/less/eelo/layout.less

 
-.tablet-mq(@rules) {
-  @media screen and (max-width: @size-desktop) { @rules(); }  
-}
-.mobile-mq(@rules) {
-  @media screen and (max-width: @size-mobile) { @rules(); }
-}
-
-
 #pagination {
   display: flex;
   justify-content: space-between;
@@ -14,8 +6,7 @@
 
 .container {
   max-width: @size-desktop;
-  padding-left: @spacing_container;
-  padding-right: @spacing_container;
+  .container-padding();
 
   display: flex;
   justify-content: space-between;
@@ -58,30 +49,12 @@
   }
 }
 
-#index {
-  max-width: @size-content;
-  margin: auto;
-
-  img {
-    width: 300px;
-    display: block;
-    margin: auto;
-    margin-top: 64px;
-    margin-bottom: 64px;    
-  }
-}
-
 
 .inline {
   display: flex;
   flex-direction: row;
 }
 
-.rtl {
-  flex-direction: row-reverse;
-}
-
-
 
 .tablet-mq({
   .container {
@@ -96,13 +69,9 @@
 });
 
 .mobile-mq({
-  body {
-    background-color: red;
-  }
   .container {
     max-width: 100%;
-    padding-left: @spacing_container;
-    padding-right: @spacing_container;
+    .container-padding();
   
     > :first-child, > :last-child:not(:first-child) {
       max-width: 100%;
@@ -120,3 +89,33 @@
     width: 100%;
   }
 });
+
+
+// Move somewhere else?
+#index {
+  max-width: @size-content;
+  margin: auto;
+
+  img {
+    width: 300px;
+    display: block;
+    margin: auto;
+    margin-top: 64px;
+    margin-bottom: 64px;
+  }
+  img#logo_inline { display: none; }
+}
+.mobile-mq({
+  #index img {
+    width: 50vmin;
+    margin-bottom: @spacing_x-large;
+  }
+});
+.mobile-landscape-mq({
+  #index img {
+    width: 70vmin;
+    margin-top: @spacing_xx-large;
+    display: none; 
+  }
+  #index img#logo_inline { display: block; }
+});

searx/static/themes/eelo/less/eelo/navbar.less

-nav {
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 16px;
-  padding-right: 16px;
-
-  text-transform: capitalize;
-
-  margin-bottom: 24px;
-}
-nav a {
-  color: #868686;
-  transition: color .2s ease-in-out;
-  text-decoration: none;
-}
-nav a:hover {
-  text-decoration: none;
-  color: @color_accent;
-}
-
-#eelo_links > * {
-  margin-right: 32px;
-}
\ No newline at end of file

searx/static/themes/eelo/less/eelo/preferences.less

 #preferences {
-  h1 {
-    margin-bottom: 32px;
-  }
-
-  .nav-tabs {
-    margin-bottom: 32px;
-  }
-
-  .options {
-    margin-top: 32px;
-  }
+  h1, .nav-tabs, #notice { margin-bottom: @spacing_x-large; }
 
-  label {
-    color: @text-color-hl;
-  }
-
-  div.row.form-group {
-    margin-bottom: 24px;
-  }
-
-  div.tab-content {
-    margin-bottom: 48px;
-  }
-
-  #notice {
-    margin-bottom: 32px;
-  }
+  .options { margin-top: @spacing_x-large; }
 
   .tab-content {
+    margin-bottom: 48px;
     display: none;
   }
 
-  input.tab-radio[type="radio"] {
-    display: none;
-  }
-  input.tab-radio[type="radio"]:checked + .tab-content {
-    display: block;
-  }
+  input.tab-radio[type="radio"] { display: none; }
+  input.tab-radio[type="radio"]:checked + .tab-content { display: block; }
 
   .preference {
     margin-bottom: @spacing_large;
-  }
-  .preference.inline {
-    justify-content: space-between;
-    >:first-child {
-      flex: 2;
-    }
-    >:last-child {
-      flex: 1;
+    
+    &.inline {
+      justify-content: space-between;
+      
+      >:first-child { flex: 2; }
+      >:last-child { flex: 1; }
     }
   }
 
-  #tabs {
-    margin-bottom: @spacing_xx-large;
-  }
-  #tabs > * {
-    margin-right: @spacing_xx-large;
-  }
+  #tabs { margin-bottom: @spacing_xx-large; }
+  #tabs > * { margin-right: @spacing_xx-large; }
 
   #controls {
     display: flex;
@@ -64,28 +31,41 @@
     justify-content: flex-end;
   }
 
+  #cookies_list { }
+  #cookies_list .cookie-value { word-wrap: break-word; }
 
-  section {
-    margin-bottom: @spacing_xx-large;
-  }
+  #action_buttons { margin-top: @spacing_x-huge; }
+  #action_buttons > div { margin-bottom: @spacing_x-large; }
+  #action_buttons > div > * { margin-bottom: @spacing_medium; }
 
-  ul > li {
-    margin-bottom: @spacing_medium;
-  }
 
+  #engines {
+    h3 {
+      text-transform: capitalize;
+      margin-top: 0;
+    }
+
+    .engine {
+      display: flex;
+      margin-bottom: @spacing_medium;
 
-  fieldset {
-    border: none;
-    padding: 0px;
-  }
+      .data {
+        width: 100%;
+        margin-left: @spacing_large;
+        margin-right: @spacing_large;
+      }
 
-  #cookies_list {
-  }
-  #cookies_list .cookie-value {
-    word-wrap: break-word;
+      input:checked ~ .data { &:extend(.disabled); }
+      input:checked ~ .data .danger { display: inline; }
+      input:not(:checked) ~ .data i.danger { display: none; }
+    }
   }
+}
 
-  #action_buttons { margin-top: @spacing_x-huge; }
-  #action_buttons > div { margin-bottom: @spacing_x-large; }
-  #action_buttons > div > * { margin-bottom: @spacing_medium; }
-}
\ No newline at end of file
+.mobile-mq({
+  .preference.inline {
+    flex-direction: column;
+    
+    >:first-child { margin-bottom: @spacing_medium; }
+  }
+});
\ No newline at end of file

searx/static/themes/eelo/less/eelo/results.less

@@ -113,10 +113,6 @@
   }
 }
 
-.extras {
-  margin-top: 48px;
-}
-
 
 .tablet-mq({
   #results.image-gallery {

searx/static/themes/eelo/less/eelo/search.less

-#q {
-  border: 2px solid rgba(0, 0, 0, 0.24);
-  border-radius: 50px;
 
-  height: 42px;
-  line-height: 42px;
-  width: 100%;
-  padding-left: @spacing_large;
-  font-size: @fontsize_medium;
+#search_form {
+  @logo-link-size: 32px;
+  @input-size: 38px;
 
-  transition: border-color 0.2s ease-in-out;
-}
-#q:focus {
-  border-color: @color_accent;
-}
+  #search_input_container {
+    position: relative;
+    display: flex;
+    align-items: center;
 
-#search_input_container {
-  position: relative;
-  display: flex;
-  align-items: center;
+    .widget-border(rgba(0, 0, 0, 0.24));
+    border-radius: 50px;
+    height: @input-size;
+    &:hover, &:active { border-color: @color_accent; }
+    &:extend(.border-color-transition);
+    
 
-  button[type="submit"] {
-    position: absolute;
-    right: 10px;
-    height: 24px;
-    border: none;
-    background: none;
-    padding: 0;
-    z-index: 2;
-    cursor: pointer;
+    // the actual input
+    #q {
+      font-size: @fontsize_medium;
 
-    .icon { transition: fill 0.2s ease-in-out; }
-    + .circle { transition: transform 0.2s ease-in-out; }
-  }
-  button[type="submit"]:hover {
-    .icon { fill: white; }
-    + .circle { transform: scale(1.6); }
-  }
-  .circle {
-    width: 32px;
-    height: 32px;
-    border-radius: 50px;
-    background-color: @color_accent;
-    position: absolute;
-    right: 6px;
-    transform: scale(0);
+      border: none;
+      height: 100%;
+      width: 100%;
+      min-width: 0;
+      margin-left: @spacing_large;
+    }
+  
+    button[type="submit"] {
+      position: relative;
+      height: 100%;
+      width: @input-size;
+      min-width: @input-size;
+      border: none;
+      background: none;
+      padding: 0;
+      display: flex;
+      cursor: pointer;
+  
+      .icon { transition: fill 0.2s ease-in-out, transform 0.1s ease-in-out; }
+    }
+    button[type="submit"]:hover {
+      .icon { 
+        fill: @color_accent;
+        transform: scale(1.2);
+      }
+    }
   }
-}
-
-#search_params {
-  display: flex;
-  justify-content: space-between;
-  font-size: @fontsize_x-small;
-  margin-bottom: @spacing_large;
-  margin-top: @spacing_large;
-  padding-left: @spacing_x-large;
-  padding-right: @spacing_x-large;
 
-  select, label {
-    font-size: @fontsize_small;
+  // inline search form
+  #logo, #logo_link { 
+    height: @logo-link-size;
   }
-  select {
-    color: rgba(0,0,0, .5);
-    text-align: right;
-    padding-right: 32px;
+  #logo_link {
+    padding-left: 4px;
   }
-  #time_and_lang > :first-child {
-    margin-right: @spacing_large;
+
+  // some minor tweaks for RTL
+  #search_input_container.rtl {
+    #q {
+      margin-left: 0;
+      margin-right: @spacing_large;
+    }
+    #logo_link {
+      padding-left: 0;
+      padding-right: 4px;
+    }
   }
-}
 
-.search_categories, #categories {
-  text-transform: capitalize;
-  display: flex;
-  flex-wrap: wrap;
-  flex-flow: row wrap;
-  align-content: stretch;
-  align-items: center;
 
-  label {
-    flex-grow: 1;
-    flex-basis: auto;
-    font-size: @fontsize_small;
-    font-weight: normal;
-    margin-right: @spacing_large;
-  }
+  // advanced search params, search topic, lang and time.
+  #search_params {
+    display: flex;
+    justify-content: space-between;
+    font-size: @fontsize_x-small;
+    padding-bottom: @spacing_large;
+    padding-top: @spacing_large;
+    padding-left: @spacing_x-large;
+    padding-right: @spacing_x-large;
 
-  input[type="checkbox"]:checked + label {
-    color: @color_accent;
-    font-weight: bold;
+    select, label { font-size: @fontsize_small; }
+    select {
+      color: rgba(0, 0, 0, .5);
+      text-align: right;
+      padding-right: 32px;
+    }
+    #time_and_lang > :first-child {
+      margin-right: @spacing_large;
+    }
   }
-}
 
 
-// inline search form
-#logo_link {
-  position: absolute;
-  left: 6px;
-}
-#logo, #logo_link {
-  height: 32px;  
-}
-.inline-search #q {
-  padding-left: @spacing_search_bar_contents;
-}
-
+  .search_categories, #categories {
+    text-transform: capitalize;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  
+    label {
+      flex-grow: 1;
+      flex-basis: auto;
+      font-size: @fontsize_small;
+      font-weight: normal;
+      margin-right: @spacing_large;
+    }
+  
+    input[type="checkbox"]:checked + label {
+      color: @color_accent;
+      font-weight: bold;
+    }
+  }
 
-#main-logo{
-  margin-top: 12vh;
-  margin-bottom: 25px;
-}
-#main-logo > img {
-  max-width: 250px;
-  width: 80%;
 }
 
+
+// make advanced options scrollable on mobile
 .mobile-mq({
-  #search_params {
-    overflow-x: scroll;
-  }
-  #search_params, #categories {
-    flex-wrap: nowrap;
-  }
-  #time_and_lang {
-    display: flex;
+  #search_form {
+    #search_params { overflow-x: scroll; }
+    #search_params, #categories { flex-wrap: nowrap; }
+    #time_and_lang { display: flex; }
   }
 });
\ No newline at end of file

searx/static/themes/eelo/less/eelo/widgets.less

+.block {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.text-muted { color: @text-muted-color; }
+
+.danger { color: @color_danger; }
+
+.widget {
+  .widget-border();
+  padding: 4px 12px;
+  background-color: transparent;
+
+  transition: @border-color-transition, @color-transition;
+}
+
+.btn {
+  &:extend(.widget);
+
+  padding: 8px 16px;
+
+  text-transform: uppercase;
+  background-color: transparent;
+  border-radius: @corner-radius;
+  text-align: center;
+  font-size: @fontsize_medium;
+  font-weight: bold;
+  color: @color_base-text-hl;