Merge pull request #419 from MrPaulBlack/media-queries-names

[simple theme] less vars for different device sizes

searx/static/themes/simple/css/searxng-rtl.css

@@ -1962,7 +1962,7 @@ td:hover .engine-tooltip,
 .autocomplete.open:empty {
   display: none;
 }
-@media screen and (max-width: 45rem) {
+@media screen and (max-width: 50em) {
   .autocomplete {
     bottom: 0;
   }

searx/static/themes/simple/css/searxng.css

@@ -1962,7 +1962,7 @@ td:hover .engine-tooltip,
 .autocomplete.open:empty {
   display: none;
 }
-@media screen and (max-width: 45rem) {
+@media screen and (max-width: 50em) {
   .autocomplete {
     bottom: 0;
   }

searx/static/themes/simple/src/less/autocomplete.less

@@ -60,7 +60,7 @@
   }
 }
 
-@media screen and (max-width: @results-width) {
+@media screen and (max-width: @phone) {
   .autocomplete {
     bottom: 0;
   }

searx/static/themes/simple/src/less/definitions.less

@@ -196,6 +196,12 @@ html {
 @results-margin: 2rem;
 @search-width: 40rem;
 
+/// Device Size
+/// @desktop > @tablet
+@tablet: 80em;
+@phone: 50em;
+@small-phone: 35em;
+
 /// From style.less
 @stacked-bar-chart: rgb(0, 0, 0);
 

searx/static/themes/simple/src/less/index.less

@@ -35,7 +35,7 @@
   }
 }
 
-@media screen and (max-width: 80em) {
+@media screen and (max-width: @tablet) {
   div.title {
     h1 {
       font-size: 1em;
@@ -47,7 +47,7 @@
   }
 }
 
-@media screen and (max-width: 50em) {
+@media screen and (max-width: @phone) {
   #main_index {
     margin-top: 0;
   }

searx/static/themes/simple/src/less/preferences.less

@@ -116,7 +116,7 @@
   }
 }
 
-@media screen and (max-width: 80em) {
+@media screen and (max-width: @tablet) {
   .preferences_back {
     clear: both;
   }

searx/static/themes/simple/src/less/search.less

@@ -103,7 +103,7 @@
   vertical-align: middle;
 }
 
-@media screen and (max-width: 80em) {
+@media screen and (max-width: @tablet) {
   #search {
     padding: 0 @results-tablet-offset;
   }
@@ -145,7 +145,7 @@
   }
 }
 
-@media screen and (max-width: 50em) {
+@media screen and (max-width: @phone) {
   #search {
     width: 100%;
     margin: 0;

searx/static/themes/simple/src/less/style.less

@@ -569,7 +569,7 @@ article.result-images[data-vim-selected]::before {
   }
 }
 
-@media screen and (max-width: 80em) {
+@media screen and (max-width: @tablet) {
   #main_preferences,
   #main_about,
   #main_stats {
@@ -710,7 +710,7 @@ article.result-images[data-vim-selected]::before {
   }
 }
 
-@media screen and (max-width: 50em) {
+@media screen and (max-width: @phone) {
   #main_results div#results {
     grid-template-columns: 100%;
     margin: 2rem 0 0 0;
@@ -767,7 +767,7 @@ article.result-images[data-vim-selected]::before {
   }
 }
 
-@media screen and (max-width: 35em) {
+@media screen and (max-width: @small-phone) {
   .result-videos {
     img.thumbnail {
       float: none !important;

searx/static/themes/simple/src/less/toolkit.less

@@ -433,7 +433,7 @@ select {
   }
 }
 
-@media screen and (max-width: 50em) {
+@media screen and (max-width: @phone) {
   .tabs > label {
     width: 100%;
   }