diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 6f2de5250..c74358078 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -31,8 +31,10 @@ @color-url-font: #29314d; @color-url-visited-font: #684898; -@results-width: 50em; -@results-offset: 4rem; +@results-width: 40em; +@results-offset: 8rem; +@results-tablet-offset: 0.5rem; +@results-gap: 4em; @search-width: 40em; // @@ -41,6 +43,16 @@ /// Start-Screen +/// Header + +@color-header-background: #f7f7f7; +@color-header-border: #d7d7d7; + +/// Footer + +@color-footer-background: #f7f7f7; +@color-footer-border: #d7d7d7; + /// Search-Input @color-search-border: @color-base; diff --git a/searx/static/themes/simple/src/less/search.less b/searx/static/themes/simple/src/less/search.less index 09ee92646..dd810de2a 100644 --- a/searx/static/themes/simple/src/less/search.less +++ b/searx/static/themes/simple/src/less/search.less @@ -3,10 +3,10 @@ */ #search { - padding: 0 2em; + padding: 0 2em 0 @results-offset; margin: 0; - background: #f7f7f7; - border-bottom: 1px solid #d7d7d7; + background: @color-header-background; + border-bottom: 1px solid @color-header-border; } #search_wrapper { @@ -104,7 +104,11 @@ vertical-align: middle; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 1250px) { + #search { + padding: 0 @results-tablet-offset; + } + #categories { font-size: 90%; clear: both; diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index 84c1a201b..aab913639 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -78,8 +78,8 @@ footer { padding: 1em 0; width: 100%; text-align: center; - background-color: #f2f2f2; - border-top: 1px solid #e4e4e4; + background-color: @color-footer-background; + border-top: 1px solid @color-footer-border; overflow: hidden; p { @@ -102,7 +102,6 @@ footer { input[type="submit"], #results button[type="submit"] { padding: 0.5rem; - margin: 2px 4px; display: inline-block; background: @color-download-button-background; color: @color-download-button-font; @@ -365,11 +364,11 @@ article.result-images[data-vim-selected]::before { } #results { - margin: 2rem 2rem 0 2rem; + margin: 2rem 2rem 0 @results-offset; display: grid; - grid-template-columns: (@results-width + @results-offset) 1fr; - grid-template-rows: min-content 1fr min-content; - gap: 0 3rem; + grid-template-columns: (@results-width + @results-offset) 25em; + grid-template-rows: min-content min-content 1fr min-content; + gap: 0 @results-gap; grid-template-areas: "answers sidebar" "suggestions sidebar" @@ -384,7 +383,6 @@ article.result-images[data-vim-selected]::before { } #urls { - margin: 0.5em 2em 20px 0; padding: 0; grid-area: urls; } @@ -486,9 +484,6 @@ article.result-images[data-vim-selected]::before { #sidebar { grid-area: sidebar; - margin: 0 2px 5px 5px; - padding: 0 2px 2px; - max-width: 25em; word-wrap: break-word; .infobox { @@ -592,7 +587,7 @@ article.result-images[data-vim-selected]::before { background: white; position: fixed; bottom: 85px; - left: @results-width; + left: @results-width + @results-offset + @results-gap; transition: opacity 0.5s; opacity: 0; @@ -632,8 +627,6 @@ article.result-images[data-vim-selected]::before { } #sidebar { - max-width: @results-width; - margin: 0 0 2px 0; padding: 0; float: none; border: none; @@ -698,14 +691,18 @@ article.result-images[data-vim-selected]::before { max-width: 98%; } } + + #backToTop { + left: @results-width; + } } #main_results div#results.only_template_images { - margin: 2rem 2rem 0 2rem; + margin: 2rem @results-tablet-offset 0 @results-tablet-offset; display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content 1fr min-content min-content; - gap: 0 3rem; + gap: 0; grid-template-areas: "answers" "suggestions" @@ -715,7 +712,7 @@ article.result-images[data-vim-selected]::before { #urls { width: inherit; - margin: 0 0 20px 0; + margin: 0; } #backToTop { @@ -724,23 +721,27 @@ article.result-images[data-vim-selected]::before { } } -/* @media screen and (max-width: 1250px) { #main_results div#results { - margin: 2rem 2rem 0 2rem; + margin: 2rem @results-tablet-offset 0 @results-tablet-offset; display: grid; - grid-template-columns: (@results-width + @results-offset) 1fr; + grid-template-columns: 50em; grid-template-rows: min-content min-content min-content 1fr min-content min-content; - gap: 0 3rem; + gap: 0; grid-template-areas: - "answers empty" - "suggestions empty" - "sidebar empty" - "urls empty" - "pagination empty"; - } + "answers" + "suggestions" + "sidebar" + "urls" + "pagination"; + } +} + +@media screen and (max-width: 50em) { + #main_results div#results { + grid-template-columns: 100%; + } } -*/ @media screen and (max-width: @results-width) { article[data-vim-selected]::before { diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index f56a0edd0..7299e2574 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -107,7 +107,6 @@ div.selectable_url { border: 1px solid @color-result-search-url-border; padding: 4px; color: @color-result-search-url-font; - width: 100%; margin: 0.1em; overflow: hidden; height: 1.2em; @@ -121,9 +120,8 @@ div.selectable_url { // dialog .dialog() { position: relative; - width: 70%; padding: 1em 1em 1em 2.7em; - margin: 0 8% 1em 8%; + margin: 0 0 1em 0; border: 1px solid black; border-radius: 4px; text-align: left;