From 6204ef665f5418ed7b4b188e04d36f3c685f5fd3 Mon Sep 17 00:00:00 2001
From: MrPaulBlack <paul.accounts@protonmail.com>
Date: Mon, 18 Oct 2021 21:57:32 +0200
Subject: [PATCH] [simple theme] define device width with less vars in
 defenition.less

---
 searx/static/themes/simple/src/less/autocomplete.less | 2 +-
 searx/static/themes/simple/src/less/definitions.less  | 6 ++++++
 searx/static/themes/simple/src/less/index.less        | 4 ++--
 searx/static/themes/simple/src/less/preferences.less  | 2 +-
 searx/static/themes/simple/src/less/search.less       | 4 ++--
 searx/static/themes/simple/src/less/style.less        | 6 +++---
 searx/static/themes/simple/src/less/toolkit.less      | 2 +-
 7 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/searx/static/themes/simple/src/less/autocomplete.less b/searx/static/themes/simple/src/less/autocomplete.less
index 0c0ae3f32..5f5745388 100644
--- a/searx/static/themes/simple/src/less/autocomplete.less
+++ b/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;
   }
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index fc1bcd5fa..9caf4f3f5 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/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);
 
diff --git a/searx/static/themes/simple/src/less/index.less b/searx/static/themes/simple/src/less/index.less
index a74988a72..64bfda06a 100644
--- a/searx/static/themes/simple/src/less/index.less
+++ b/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;
   }
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index 5b512cc71..70edc3c8f 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/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;
   }
diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less
index 36f0011e1..5e8888f0b 100644
--- a/searx/static/themes/simple/src/less/search.less
+++ b/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;
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 1a5418164..1f6bb4516 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/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;
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index 8c92fe488..524cc93d1 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/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%;
   }