Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 294ebbb3 authored by Daniel J. Ramirez's avatar Daniel J. Ramirez
Browse files

Responsiveness, there are some missing things...

parent a2099203

searx/static/themes/eelo/css/eelo.css

+215 −45
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ 
  padding-right: 16px;

  display: flex;

  justify-content: space-between;

  margin: auto;

}

.container > :first-child {

  max-width: 600px;
@@ -27,6 +28,19 @@ 
.container.full > :last-child:not(:first-child) {

  display: none;

}

.container.full #pagination {

  max-width: 400px;

  width: 400px;

  margin: auto;

  justify-content: space-around;

}

#search_bar_area {

  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

#search_bar_area #search_form {

  max-width: 600px;

  margin: auto;

}

#index {

  max-width: 600px;

  margin: auto;
@@ -45,29 +59,51 @@ 
.rtl {

  flex-direction: row-reverse;

}

@media screen and (max-width: 1100px) {

  .container {

    flex-direction: column-reverse;

  }

  .container > * {

    margin: auto;

  }

}

@media screen and (max-width: 600px) {

  body {

    background-color: red;

  }

  .container {

    max-width: 100%;

    padding-left: 16px;

    padding-right: 16px;

  }

  .container > :first-child,

  .container > :last-child:not(:first-child) {

    max-width: 100%;

    width: 100%;

  }

  #search_input_container {

    margin-left: 16px;

    margin-right: 16px;

  }

}

html {

  position: relative;

  min-height: 100%;

  color: #60686f;

}

body {

  /* Margin bottom by footer height */

  margin: 0px;

  padding: 0px;

  font-size: 16px;

  margin-bottom: 80px;

  margin-bottom: 120px;

  background-color: white;

}

body,

body * {

  font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;

}

a {

  color: #3889f4;

body.lock {

  overflow: hidden;

}

input,

select {

  box-shadow: none !important;

body * {

  font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;

}

.text-muted {

  color: rgba(0, 0, 0, 0.4);
@@ -76,6 +112,13 @@ select { 
.btn.danger {

  color: #e06572;

}

input,

select {

  box-shadow: none !important;

}

a {

  color: #1f6ed7;

}

a,

a:hover,

a:focus,
@@ -119,15 +162,16 @@ input.btn[type="submit"] { 
#icons {

  display: none;

}

body.lock {

  overflow: hidden;

[disabled] {

  opacity: 0.4;

}

#image_view_modal {

  position: absolute;

  top: 0;

  width: 100%;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.7);

  background-color: rgba(0, 0, 0, 0.9);

  z-index: 100;

}

#image_view_modal button {

  display: block;
@@ -148,16 +192,35 @@ body.lock { 
  max-width: 600px;

  max-height: 80vh;

}

@media screen and (max-width: 600px) {

  #image_view_modal #image_view_card {

    margin-left: 16px;

    margin-right: 16px;

    max-width: 100%;

    width: 100%;

  }

}

#image_view_modal #image_view_image {

  display: block;

  max-width: 100%;

  max-height: 70vh;

  background-color: white;

  margin: auto;

}

#image_view_modal .options {

  margin-top: 8px;

}

#image_view_modal .btn {

  display: inline-block;

  border-color: rgba(255, 255, 255, 0.4);

  color: rgba(255, 255, 255, 0.8);

  background-color: rgba(0, 0, 0, 0.5);

  margin-right: 8px;

}

.custom-select {

  appearance: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  border: none;

  font-weight: normal;

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJN

AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
@@ -168,6 +231,15 @@ ZQAyMDE2LTA3LTI0VDExOjU1OjU4KzAyOjAwRFqFOQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNi0w 
Ny0yNFQxMToxNTowMCswMjowMP7RDgQAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb

7jwaAAAAAElFTkSuQmCC) 96% no-repeat;

}

.custom-select.flat {

  border: none;

}

.custom-select:not(.flat) {

  border: 2px solid rgba(0, 0, 0, 0.2);

  width: 100%;

  border-radius: 50px;

  padding: 4px 12px;

}

nav {

  height: 48px;

  display: flex;
@@ -200,13 +272,17 @@ footer { 
  padding-bottom: 16px;

}

#q {

  border: 2px solid rgba(0, 0, 0, 0.3);

  border: 2px solid rgba(0, 0, 0, 0.24);

  border-radius: 50px;

  height: 42px;

  line-height: 42px;

  width: 100%;

  padding-left: 16px;

  font-size: 16px;

  transition: border-color 0.2s ease-in-out;

}

#q:focus {

  border-color: #5068dd;

}

#search_input_container {

  position: relative;
@@ -219,6 +295,30 @@ footer { 
  height: 24px;

  border: none;

  background: none;

  padding: 0;

  z-index: 2;

  cursor: pointer;

}

#search_input_container button[type="submit"] .icon {

  transition: fill 0.2s ease-in-out;

}

#search_input_container button[type="submit"] + .circle {

  transition: transform 0.2s ease-in-out;

}

#search_input_container button[type="submit"]:hover .icon {

  fill: white;

}

#search_input_container button[type="submit"]:hover + .circle {

  transform: scale(1.6);

}

#search_input_container .circle {

  width: 32px;

  height: 32px;

  border-radius: 50px;

  background-color: #5068dd;

  position: absolute;

  right: 6px;

  transform: scale(0);

}

#search_params {

  display: flex;
@@ -226,6 +326,20 @@ footer { 
  font-size: 11px;

  margin-bottom: 16px;

  margin-top: 16px;

  padding-left: 24px;

  padding-right: 24px;

}

#search_params select,

#search_params label {

  font-size: 14px;

}

#search_params select {

  color: rgba(0, 0, 0, 0.5);

  text-align: right;

  padding-right: 32px;

}

#search_params #time_and_lang > :first-child {

  margin-right: 16px;

}

.search_categories,

#categories {
@@ -268,57 +382,107 @@ footer { 
  max-width: 250px;

  width: 80%;

}

.result.result-default {

#results {

  margin-top: 32px;

  margin-bottom: 32px;

}

.result_header {

  margin-bottom: 8px;

.result .result_header {

  margin-bottom: 6px;

}

.result_header .favicon {

.result .result_header .favicon {

  width: 16px;

  height: 16px;

}

.result-content {

  margin-bottom: 2px;

.result .result-content {

  margin-top: 8px;

  margin-bottom: 6px;

}

.external-link {

.result .external-link {

  font-size: 14px;

  color: #39a441;

}

.infobox {

  border-radius: 8px;

.result.result-default {

  margin-bottom: 32px;

}

.infobox .panel-heading {

  background-color: transparent;

  border: none;

  padding-top: 16px;

  padding-bottom: 0px;

.result.result-images {

  display: inline;

}

.infobox img {

  margin-top: 18px;

.result.result-images .img-thumbnail {

  width: 100%;

  border: none;

  margin-bottom: 8px;

}

.infobox .panel-title {

  font-size: 22px;

  color: #5c6469;

}

.extras {

  margin-top: 48px;

#results.image-gallery {

  display: flex;

  flex-wrap: wrap;

}

.result-images {

  display: inline;

#results.image-gallery .result.result-images {

  display: block;

  flex: 20%;

  height: 200px;

  max-height: 200px;

  overflow: hidden;

}

@supports (display: grid) {

  #results.image-gallery {

  column-count: 7;

  column-gap: 8px;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    grid-gap: 8px;

  }

  #results.image-gallery .result.result-images {

    display: block;

    text-align: center;

    overflow: hidden;

  }

  #results.image-gallery .result.result-images .img-thumbnail {

    height: 100%;

    width: auto;

  }

}

#default_images_container {

  column-count: 5;

  column-gap: 8px;

}

.img-thumbnail {

#default_images_container .img-thumb-link {

  display: block;

  max-height: 120px;

  overflow: hidden;

}

.infobox {

  margin-top: 32px;

}

.infobox .head .title {

  font-size: 22px;

  margin-top: 0;

  margin-bottom: 0;

}

.infobox .head small {

  color: rgba(0, 0, 0, 0.4);

}

.infobox .body .image-container {

  max-height: 250px;

  overflow: hidden;

  text-align: center;

}

.infobox .body .content {

  flex: 3;

}

.infobox .body img {

  max-width: 100%;

  width: 100%;

  border: none;

  margin-bottom: 8px;

  margin-top: 16px;

}

.extras {

  margin-top: 48px;

}

@media screen and (max-width: 1100px) {

  #results.image-gallery {

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

  }

  #results.image-gallery .result.result-images {

    height: 140px;

    max-height: 140px;

  }

}

#preferences h1 {

  margin-bottom: 32px;
@@ -356,6 +520,12 @@ footer { 
#preferences .preference.inline {

  justify-content: space-between;

}

#preferences .preference.inline > :first-child {

  flex: 2;

}

#preferences .preference.inline > :last-child {

  flex: 1;

}

#preferences #tabs {

  margin-bottom: 32px;

}

searx/static/themes/eelo/css/eelo.min.css

+0 −0

File changed.

Preview suppressed by a .gitattributes entry or the file's encoding is unsupported.

View original file
View changed file

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

+43 −24
Original line number Diff line number Diff line
@@ -6,35 +6,33 @@ html { 
}



body {

  /* Margin bottom by footer height */

  margin: 0px;

  padding: 0px;

  font-size: @fontsize_medium;

  margin-bottom: 80px;

  margin-bottom: 120px;

  background-color: white;

}



body, body * {

  font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;

}

body.lock { overflow: hidden; }



a { color: @link-color; }





input, select {

  box-shadow: none !important;

body * {

  font-family: 'Roboto', "Cantarell", Helvetica, Arial, sans-serif;

}





.text-muted {

  color: rgba(0, 0, 0, 0.4);

  color: @text-muted-color;

}



.danger, .btn.danger {

  color: @color_danger;

}



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;
@@ -70,26 +68,21 @@ a, a:hover, a:focus, a:active, select:hover, select:focus, select:active { 
  color: blue;

}



// .btn.danger {

//   border-color: @color_danger;

// }

.hidden, #icons { display: none; }





.hidden, #icons {

  display: none;

[disabled] {

  opacity: 0.4;

}





body.lock {

  overflow: hidden;

}



#image_view_modal {

  position: absolute;

  top: 0;

  width: 100%;

  height: 100vh;

  background-color: rgba(0, 0, 0, .7);

  background-color: rgba(0, 0, 0, .9);

  z-index: 100;



  button {

    display: block;
@@ -110,14 +103,32 @@ body.lock { 


  #image_view_card {

    margin: auto;

    max-width: 600px; // TODO: move to var

    max-width: @size-content;

    max-height: 80vh;



    .mobile-mq({

      margin-left: @spacing_container;

      margin-right: @spacing_container;

      max-width: 100%;

      width: 100%;

    });

  }



  #image_view_image {

    display: block;

    max-width: 100%;

    max-height: 70vh;

    background-color: white;

    margin: auto;

  }



  .options { margin-top: @spacing_medium; }

  .btn {

    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;

  }

}
@@ -127,8 +138,6 @@ body.lock { 
  -webkit-appearance: none;

  -moz-appearance: none;



  border: none;

  

  font-weight: normal;

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAABGdBTUEAALGPC/xhBQAAACBjSFJN

AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
@@ -138,4 +147,14 @@ sAehpoXJItltBkmcdZBYgIIiQoLglnz3ui+eP+bk5uneteTMZJa6OJuIqvYzSJoqwqBq8gdmTTW8 
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/layout.less

+65 −9
Original line number Diff line number Diff line 


.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;

}



.container {

  max-width: 1100px;

  padding-left: @spacing_large;

  padding-right: @spacing_large;

  max-width: @size-desktop;

  padding-left: @spacing_container;

  padding-right: @spacing_container;



  display: flex;

  justify-content: space-between;

  margin: auto;



  >:first-child {

    max-width: 600px;

    width: 600px;

    max-width: @size-content;

    width: @size-content;

  }

  >:last-child:not(:first-child) {

    max-width: 400px;

    width: 400px;

    max-width: @size-content-small;

    width: @size-content-small;

  }

}
@@ -31,10 +40,26 @@ 
  >:last-child:not(:first-child) {

    display: none;

  }



  #pagination {

    max-width: @size-content-small;

    width: @size-content-small;

    margin: auto;

    justify-content: space-around;

  }

}



#search_bar_area {

  border-bottom: 1px solid rgba(0, 0, 0, .1);



  #search_form {

    max-width: @size-content;

    margin: auto;

  }

}



#index {

  max-width: 600px;

  max-width: @size-content;

  margin: auto;



  img {
@@ -55,3 +80,34 @@ 
.rtl {

  flex-direction: row-reverse;

}







.tablet-mq({

  .container {

    flex-direction: column-reverse;



    > * { margin: auto; }

  }

});



.mobile-mq({

  body {

    background-color: red;

  }

  .container {

    max-width: 100%;

    padding-left: @spacing_container;

    padding-right: @spacing_container;

  

    > :first-child, > :last-child:not(:first-child) {

      max-width: 100%;

      width: 100%;

    }

  }



  #search_input_container {

    margin-left: @spacing_container;

    margin-right: @spacing_container;

  }

});

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

+6 −0
Original line number Diff line number Diff line
@@ -43,6 +43,12 @@ 
  }

  .preference.inline {

    justify-content: space-between;

    >:first-child {

      flex: 2;

    }

    >:last-child {

      flex: 1;

    }

  }



  #tabs {