diff --git a/searx/static/themes/simple/css/searx-rtl.css b/searx/static/themes/simple/css/searx-rtl.css index bf0c03bbf..d6756cdfa 100644 --- a/searx/static/themes/simple/css/searx-rtl.css +++ b/searx/static/themes/simple/css/searx-rtl.css @@ -1247,7 +1247,6 @@ div.selectable_url { border: 1px solid #888; padding: 4px; color: #444; - width: 100%; margin: 0.1em; overflow: hidden; height: 1.2em; @@ -1265,9 +1264,8 @@ div.selectable_url pre { } .dialog-error { 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; @@ -1315,9 +1313,8 @@ div.selectable_url pre { } .dialog-warning { 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; @@ -1365,9 +1362,8 @@ div.selectable_url pre { } .dialog-modal { 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; @@ -1500,8 +1496,6 @@ html body .tabs > input:checked + label { border-bottom: 2px solid #084999; background: #3498DB; color: #FFF; - font-weight: bold; - letter-spacing: -0.1px; } html body .tabs > input:checked + label + section { display: block; @@ -1544,7 +1538,7 @@ select:focus { width: 40px; height: 10px; background: #dcdcdc; - margin: 8px auto; + margin: 8px 1rem; position: relative; border-radius: 50px; } @@ -1800,7 +1794,7 @@ td:hover .engine-tooltip, .autocomplete.open:empty { display: none; } -@media screen and (max-width: 50em) { +@media screen and (max-width: 45rem) { .autocomplete { bottom: 0; } @@ -1810,6 +1804,9 @@ td:hover .engine-tooltip, text-align: left; } } +#main_index { + margin-top: 16em; +} .index { text-align: center; } @@ -1827,6 +1824,7 @@ td:hover .engine-tooltip, margin: 0 auto; background: inherit; border: inherit; + padding: 0; } .index .search_filters { display: block; @@ -1836,10 +1834,18 @@ td:hover .engine-tooltip, padding: 6px 10px; border-bottom: initial !important; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { div.title h1 { font-size: 1em; } + #main_index { + margin-top: 6em; + } +} +@media screen and (max-width: 50em) { + #main_index { + margin-top: 0; + } } .column-reliability .engine-tooltip { right: 12rem; @@ -1937,7 +1943,7 @@ td:hover .engine-tooltip, #main_preferences th.name .engine-tooltip .engine-description { margin-top: 0.5rem; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { .preferences_back { clear: both; } @@ -1946,7 +1952,7 @@ td:hover .engine-tooltip, * searx, A privacy-respecting, hackable metasearch engine */ #search { - padding: 0 2em; + padding: 0 2em 0 10rem; margin: 0; background: #f7f7f7; border-bottom: 1px solid #d7d7d7; @@ -2011,7 +2017,7 @@ td:hover .engine-tooltip, padding-left: 8px; padding-right: 0 !important; border-right: none; - width: 40em; + width: 40rem; } #q::-ms-clear, #q::-webkit-search-cancel-button { @@ -2033,7 +2039,10 @@ td:hover .engine-tooltip, display: inline-block; vertical-align: middle; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { + #search { + padding: 0 0.5rem; + } #categories { font-size: 90%; clear: both; @@ -2096,7 +2105,7 @@ td:hover .engine-tooltip, } .category { display: block; - width: 90%; + width: 100%; } .category label { border-bottom: 0; @@ -2200,23 +2209,32 @@ main { padding: 0; margin: 0; } +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; +} main { width: 100%; + margin-bottom: 2rem; + flex: 1; } #main_preferences, #main_about, #main_stats { - margin: 3em; - width: auto; + margin: 2em auto; + width: 85em; } footer { - bottom: 0; - height: 3em; - margin: 1em 0; - padding: 1em 0; clear: both; + min-height: 4rem; + padding: 1rem 0; width: 100%; text-align: center; + background-color: #f7f7f7; + border-top: 1px solid #d7d7d7; + overflow: hidden; } footer p { font-size: 0.9em; @@ -2235,7 +2253,6 @@ footer p { input[type="submit"], #results button[type="submit"] { padding: 0.5rem; - margin: 2px 4px; display: inline-block; background: #3498DB; color: #FFF; @@ -2260,7 +2277,7 @@ article[data-vim-selected] { } article[data-vim-selected]::before { position: absolute; - left: 1em; + left: 8rem; padding: 2px; content: ">"; font-weight: bold; @@ -2452,9 +2469,21 @@ article.result-images[data-vim-selected]::before { color: #684898; } #results { - margin: 2em 2em 20px 2em; + margin: 2rem 2rem 0 10rem; + display: grid; + grid-template-columns: 45rem 25rem; + grid-template-rows: min-content min-content 1fr min-content; + gap: 0 5rem; + grid-template-areas: "corrections sidebar" "answers sidebar" "urls sidebar" "pagination sidebar"; +} +#results #answers *:first-child, +#results #sidebar *:first-child, +#results #urls *:first-child { + margin-top: 0; +} +#urls { padding: 0; - width: 50em; + grid-area: urls; } #suggestions .wrapper { display: flex; @@ -2465,11 +2494,6 @@ article.result-images[data-vim-selected]::before { display: inline-block; flex: 1 1 50%; } -#suggestions, -#answers, -#corrections { - max-width: 50em; -} #suggestions input, #answers input, #infoboxes input, @@ -2505,9 +2529,10 @@ article.result-images[data-vim-selected]::before { text-decoration: underline; } #corrections { + grid-area: corrections; display: flex; flex-flow: row wrap; - margin: 1em 0; + margin: 0 0 1em 0; } #corrections h4, #corrections input[type="submit"] { @@ -2524,7 +2549,7 @@ article.result-images[data-vim-selected]::before { color: #444; } #answers { - margin: 10px 8px 10px 8px; + grid-area: answers; border: 1px solid #ddd; padding: 0.9em; box-shadow: 0 0 5px #ccc; @@ -2542,12 +2567,7 @@ article.result-images[data-vim-selected]::before { min-width: 210px; } #sidebar { - position: absolute; - top: 100px; - left: 57em; - margin: 0 2px 5px 5px; - padding: 0 2px 2px; - max-width: 25em; + grid-area: sidebar; word-wrap: break-word; } #sidebar .infobox { @@ -2614,7 +2634,7 @@ article.result-images[data-vim-selected]::before { color: #222; } #pagination { - clear: both; + grid-area: pagination; } #pagination br { clear: both; @@ -2625,14 +2645,14 @@ article.result-images[data-vim-selected]::before { } #backToTop { border: 1px solid #ddd; - margin: 0 0 0 2em; + margin: 0; padding: 0; font-size: 1em; box-shadow: 0 0 5px #ccc; background: white; position: fixed; - bottom: 85px; - left: 50em; + bottom: 8rem; + left: 56.3rem; transition: opacity 0.5s; opacity: 0; } @@ -2641,17 +2661,13 @@ article.result-images[data-vim-selected]::before { margin: 0; padding: 0.6em; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { #main_preferences, #main_about, #main_stats { - margin: 0.5em; + margin: 2rem 0.5rem; width: auto; } - #suggestions, - #answers { - margin-top: 1em; - } #infoboxes { position: inherit; max-width: inherit; @@ -2665,9 +2681,6 @@ article.result-images[data-vim-selected]::before { margin: 0.5em 0.5em 0.5em 0; } #sidebar { - position: static; - max-width: 50em; - margin: 0 0 2px 0; padding: 0; float: none; border: none; @@ -2718,30 +2731,48 @@ article.result-images[data-vim-selected]::before { .image_result img { max-width: 98%; } + #backToTop { + display: none; + } + #pagination { + margin: 2rem 0 0 0 !important; + } + #main_results div#results { + margin: 2rem 0.5rem 0 0.5rem; + display: grid; + grid-template-columns: 45rem; + grid-template-rows: min-content min-content min-content 1fr min-content min-content; + gap: 0; + grid-template-areas: "corrections" "answers" "sidebar" "urls" "pagination"; + } + article[data-vim-selected]::before { + left: 0; + } } #main_results div#results.only_template_images { - flex-direction: column; - width: auto; - display: flex; -} -#main_results div#results.only_template_images #sidebar { - position: relative; - top: auto; - order: 2; + margin: 2rem 0.5rem 0 0.5rem; + display: grid; + grid-template-columns: 100%; + grid-template-rows: min-content min-content 1fr min-content min-content; + gap: 0; + grid-template-areas: "corrections" "urls" "answers" "sidebar" "pagination"; } #main_results div#results.only_template_images #urls { - position: relative; - order: 1; + width: inherit; + margin: 0; } #main_results div#results.only_template_images #backToTop { - right: 0.5em; left: auto; + right: 2rem; } #main_results div#results.only_template_images #pagination { - position: relative; - order: 3; + margin-right: 4rem; } @media screen and (max-width: 50em) { + #main_results div#results { + grid-template-columns: 100%; + margin: 2rem 0 0 0; + } article[data-vim-selected]::before { display: none; content: ""; @@ -2755,17 +2786,16 @@ article.result-images[data-vim-selected]::before { #sidebar { margin: 0 5px 2px 5px; } - #corrections { - margin: 1em 5px 1em 5px; + #corrections, + #answers { + margin: 0 5px 1em 5px; } #results { margin: 0; padding: 0; - width: initial; } - #backToTop { - left: 40em; - bottom: 35px; + #pagination { + margin: 2rem 1rem 0 1rem !important; } .result { padding: 8px 10px 6px 10px; diff --git a/searx/static/themes/simple/css/searx-rtl.min.css b/searx/static/themes/simple/css/searx-rtl.min.css index 7a9580062..343aeba4b 100644 Binary files a/searx/static/themes/simple/css/searx-rtl.min.css and b/searx/static/themes/simple/css/searx-rtl.min.css differ diff --git a/searx/static/themes/simple/css/searx-rtl.min.css.map b/searx/static/themes/simple/css/searx-rtl.min.css.map index 8d4a1c8ef..39a9138de 100644 Binary files a/searx/static/themes/simple/css/searx-rtl.min.css.map and b/searx/static/themes/simple/css/searx-rtl.min.css.map differ diff --git a/searx/static/themes/simple/css/searx.css b/searx/static/themes/simple/css/searx.css index a39a72cbe..bd98e3424 100644 --- a/searx/static/themes/simple/css/searx.css +++ b/searx/static/themes/simple/css/searx.css @@ -1247,7 +1247,6 @@ div.selectable_url { border: 1px solid #888; padding: 4px; color: #444; - width: 100%; margin: 0.1em; overflow: hidden; height: 1.2em; @@ -1265,9 +1264,8 @@ div.selectable_url pre { } .dialog-error { 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; @@ -1315,9 +1313,8 @@ div.selectable_url pre { } .dialog-warning { 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; @@ -1365,9 +1362,8 @@ div.selectable_url pre { } .dialog-modal { 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; @@ -1500,8 +1496,6 @@ html body .tabs > input:checked + label { border-bottom: 2px solid #084999; background: #3498DB; color: #FFF; - font-weight: bold; - letter-spacing: -0.1px; } html body .tabs > input:checked + label + section { display: block; @@ -1544,7 +1538,7 @@ select:focus { width: 40px; height: 10px; background: #dcdcdc; - margin: 8px auto; + margin: 8px 1rem; position: relative; border-radius: 50px; } @@ -1800,7 +1794,7 @@ td:hover .engine-tooltip, .autocomplete.open:empty { display: none; } -@media screen and (max-width: 50em) { +@media screen and (max-width: 45rem) { .autocomplete { bottom: 0; } @@ -1810,6 +1804,9 @@ td:hover .engine-tooltip, text-align: left; } } +#main_index { + margin-top: 16em; +} .index { text-align: center; } @@ -1827,6 +1824,7 @@ td:hover .engine-tooltip, margin: 0 auto; background: inherit; border: inherit; + padding: 0; } .index .search_filters { display: block; @@ -1836,10 +1834,18 @@ td:hover .engine-tooltip, padding: 6px 10px; border-bottom: initial !important; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { div.title h1 { font-size: 1em; } + #main_index { + margin-top: 6em; + } +} +@media screen and (max-width: 50em) { + #main_index { + margin-top: 0; + } } .column-reliability .engine-tooltip { right: 12rem; @@ -1937,7 +1943,7 @@ td:hover .engine-tooltip, #main_preferences th.name .engine-tooltip .engine-description { margin-top: 0.5rem; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { .preferences_back { clear: both; } @@ -1946,7 +1952,7 @@ td:hover .engine-tooltip, * searx, A privacy-respecting, hackable metasearch engine */ #search { - padding: 0 2em; + padding: 0 2em 0 10rem; margin: 0; background: #f7f7f7; border-bottom: 1px solid #d7d7d7; @@ -2011,7 +2017,7 @@ td:hover .engine-tooltip, padding-left: 8px; padding-right: 0 !important; border-right: none; - width: 40em; + width: 40rem; } #q::-ms-clear, #q::-webkit-search-cancel-button { @@ -2033,7 +2039,10 @@ td:hover .engine-tooltip, display: inline-block; vertical-align: middle; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { + #search { + padding: 0 0.5rem; + } #categories { font-size: 90%; clear: both; @@ -2096,7 +2105,7 @@ td:hover .engine-tooltip, } .category { display: block; - width: 90%; + width: 100%; } .category label { border-bottom: 0; @@ -2200,23 +2209,32 @@ main { padding: 0; margin: 0; } +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; +} main { width: 100%; + margin-bottom: 2rem; + flex: 1; } #main_preferences, #main_about, #main_stats { - margin: 3em; - width: auto; + margin: 2em auto; + width: 85em; } footer { - bottom: 0; - height: 3em; - margin: 1em 0; - padding: 1em 0; clear: both; + min-height: 4rem; + padding: 1rem 0; width: 100%; text-align: center; + background-color: #f7f7f7; + border-top: 1px solid #d7d7d7; + overflow: hidden; } footer p { font-size: 0.9em; @@ -2235,7 +2253,6 @@ footer p { input[type="submit"], #results button[type="submit"] { padding: 0.5rem; - margin: 2px 4px; display: inline-block; background: #3498DB; color: #FFF; @@ -2260,7 +2277,7 @@ article[data-vim-selected] { } article[data-vim-selected]::before { position: absolute; - left: 1em; + left: 8rem; padding: 2px; content: ">"; font-weight: bold; @@ -2452,9 +2469,21 @@ article.result-images[data-vim-selected]::before { color: #684898; } #results { - margin: 2em 2em 20px 2em; + margin: 2rem 2rem 0 10rem; + display: grid; + grid-template-columns: 45rem 25rem; + grid-template-rows: min-content min-content 1fr min-content; + gap: 0 5rem; + grid-template-areas: "corrections sidebar" "answers sidebar" "urls sidebar" "pagination sidebar"; +} +#results #answers *:first-child, +#results #sidebar *:first-child, +#results #urls *:first-child { + margin-top: 0; +} +#urls { padding: 0; - width: 50em; + grid-area: urls; } #suggestions .wrapper { display: flex; @@ -2465,11 +2494,6 @@ article.result-images[data-vim-selected]::before { display: inline-block; flex: 1 1 50%; } -#suggestions, -#answers, -#corrections { - max-width: 50em; -} #suggestions input, #answers input, #infoboxes input, @@ -2505,9 +2529,10 @@ article.result-images[data-vim-selected]::before { text-decoration: underline; } #corrections { + grid-area: corrections; display: flex; flex-flow: row wrap; - margin: 1em 0; + margin: 0 0 1em 0; } #corrections h4, #corrections input[type="submit"] { @@ -2524,7 +2549,7 @@ article.result-images[data-vim-selected]::before { color: #444; } #answers { - margin: 10px 8px 10px 8px; + grid-area: answers; border: 1px solid #ddd; padding: 0.9em; box-shadow: 0 0 5px #ccc; @@ -2542,12 +2567,7 @@ article.result-images[data-vim-selected]::before { min-width: 210px; } #sidebar { - position: absolute; - top: 100px; - left: 57em; - margin: 0 2px 5px 5px; - padding: 0 2px 2px; - max-width: 25em; + grid-area: sidebar; word-wrap: break-word; } #sidebar .infobox { @@ -2614,7 +2634,7 @@ article.result-images[data-vim-selected]::before { color: #222; } #pagination { - clear: both; + grid-area: pagination; } #pagination br { clear: both; @@ -2625,14 +2645,14 @@ article.result-images[data-vim-selected]::before { } #backToTop { border: 1px solid #ddd; - margin: 0 0 0 2em; + margin: 0; padding: 0; font-size: 1em; box-shadow: 0 0 5px #ccc; background: white; position: fixed; - bottom: 85px; - left: 50em; + bottom: 8rem; + left: 56.3rem; transition: opacity 0.5s; opacity: 0; } @@ -2641,17 +2661,13 @@ article.result-images[data-vim-selected]::before { margin: 0; padding: 0.6em; } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { #main_preferences, #main_about, #main_stats { - margin: 0.5em; + margin: 2rem 0.5rem; width: auto; } - #suggestions, - #answers { - margin-top: 1em; - } #infoboxes { position: inherit; max-width: inherit; @@ -2665,9 +2681,6 @@ article.result-images[data-vim-selected]::before { margin: 0.5em 0.5em 0.5em 0; } #sidebar { - position: static; - max-width: 50em; - margin: 0 0 2px 0; padding: 0; float: none; border: none; @@ -2718,30 +2731,48 @@ article.result-images[data-vim-selected]::before { .image_result img { max-width: 98%; } + #backToTop { + display: none; + } + #pagination { + margin: 2rem 0 0 0 !important; + } + #main_results div#results { + margin: 2rem 0.5rem 0 0.5rem; + display: grid; + grid-template-columns: 45rem; + grid-template-rows: min-content min-content min-content 1fr min-content min-content; + gap: 0; + grid-template-areas: "corrections" "answers" "sidebar" "urls" "pagination"; + } + article[data-vim-selected]::before { + left: 0; + } } #main_results div#results.only_template_images { - flex-direction: column; - width: auto; - display: flex; -} -#main_results div#results.only_template_images #sidebar { - position: relative; - top: auto; - order: 2; + margin: 2rem 0.5rem 0 0.5rem; + display: grid; + grid-template-columns: 100%; + grid-template-rows: min-content min-content 1fr min-content min-content; + gap: 0; + grid-template-areas: "corrections" "urls" "answers" "sidebar" "pagination"; } #main_results div#results.only_template_images #urls { - position: relative; - order: 1; + width: inherit; + margin: 0; } #main_results div#results.only_template_images #backToTop { - right: 0.5em; left: auto; + right: 2rem; } #main_results div#results.only_template_images #pagination { - position: relative; - order: 3; + margin-right: 4rem; } @media screen and (max-width: 50em) { + #main_results div#results { + grid-template-columns: 100%; + margin: 2rem 0 0 0; + } article[data-vim-selected]::before { display: none; content: ""; @@ -2755,17 +2786,16 @@ article.result-images[data-vim-selected]::before { #sidebar { margin: 0 5px 2px 5px; } - #corrections { - margin: 1em 5px 1em 5px; + #corrections, + #answers { + margin: 0 5px 1em 5px; } #results { margin: 0; padding: 0; - width: initial; } - #backToTop { - left: 40em; - bottom: 35px; + #pagination { + margin: 2rem 1rem 0 1rem !important; } .result { padding: 8px 10px 6px 10px; diff --git a/searx/static/themes/simple/css/searx.min.css b/searx/static/themes/simple/css/searx.min.css index 4c93b7ece..d9b3e0c7a 100644 Binary files a/searx/static/themes/simple/css/searx.min.css and b/searx/static/themes/simple/css/searx.min.css differ diff --git a/searx/static/themes/simple/css/searx.min.css.map b/searx/static/themes/simple/css/searx.min.css.map index ce8584074..31cd9625f 100644 Binary files a/searx/static/themes/simple/css/searx.min.css.map and b/searx/static/themes/simple/css/searx.min.css.map differ diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 246f8daa1..946760ec1 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -31,8 +31,11 @@ @color-url-font: #29314d; @color-url-visited-font: #684898; -@results-width: 50em; -@search-width: 40em; +@results-width: 45rem; +@results-offset: 10rem; +@results-tablet-offset: 0.5rem; +@results-gap: 5rem; +@search-width: 40rem; // @color-a-font: @color-base; @@ -40,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/index.less b/searx/static/themes/simple/src/less/index.less index 3a275763c..a74988a72 100644 --- a/searx/static/themes/simple/src/less/index.less +++ b/searx/static/themes/simple/src/less/index.less @@ -1,3 +1,7 @@ +#main_index { + margin-top: 16em; +} + .index { text-align: center; @@ -17,6 +21,7 @@ margin: 0 auto; background: inherit; border: inherit; + padding: 0; } .search_filters { @@ -30,10 +35,20 @@ } } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { div.title { h1 { font-size: 1em; } } + + #main_index { + margin-top: 6em; + } +} + +@media screen and (max-width: 50em) { + #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 0be6f9023..0909a6bf9 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -122,7 +122,7 @@ } } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { .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 ec67b9f1c..d497c673f 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: 80em) { + #search { + padding: 0 @results-tablet-offset; + } + #categories { font-size: 90%; clear: both; @@ -142,7 +146,7 @@ } } -@media screen and (max-width: @results-width) { +@media screen and (max-width: 50em) { #search { width: 100%; margin: 0; @@ -181,7 +185,7 @@ .category { display: block; - width: 90%; + width: 100%; label { border-bottom: 0; diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index c30d3e706..aaefb51fd 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -52,26 +52,35 @@ main { margin: 0; } +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; +} + main { width: 100%; - // position: absolute; + margin-bottom: 2rem; + flex: 1; } #main_preferences, #main_about, #main_stats { - margin: 3em; - width: auto; + margin: 2em auto; + width: 85em; } footer { - bottom: 0; - height: 3em; - margin: 1em 0; - padding: 1em 0; clear: both; + min-height: 4rem; + padding: 1rem 0; width: 100%; text-align: center; + background-color: @color-footer-background; + border-top: 1px solid @color-footer-border; + overflow: hidden; p { font-size: 0.9em; @@ -93,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; @@ -122,7 +130,7 @@ article[data-vim-selected] { article[data-vim-selected]::before { position: absolute; - left: 1em; + left: (@results-offset - 2rem); padding: 2px; content: ">"; font-weight: bold; @@ -356,9 +364,27 @@ article.result-images[data-vim-selected]::before { } #results { - margin: 2em 2em 20px 2em; + margin: 2rem 2rem 0 @results-offset; + display: grid; + grid-template-columns: @results-width 25rem; + grid-template-rows: min-content min-content 1fr min-content; + gap: 0 @results-gap; + grid-template-areas: + "corrections sidebar" + "answers sidebar" + "urls sidebar" + "pagination sidebar"; +} + +#results #answers *:first-child, +#results #sidebar *:first-child, +#results #urls *:first-child { + margin-top: 0; +} + +#urls { padding: 0; - width: @results-width; + grid-area: urls; } #suggestions { @@ -374,12 +400,6 @@ article.result-images[data-vim-selected]::before { } } -#suggestions, -#answers, -#corrections { - max-width: @results-width; -} - #suggestions, #answers, #infoboxes, @@ -407,9 +427,10 @@ article.result-images[data-vim-selected]::before { } #corrections { + grid-area: corrections; display: flex; flex-flow: row wrap; - margin: 1em 0; + margin: 0 0 1em 0; h4, input[type="submit"] { @@ -430,7 +451,7 @@ article.result-images[data-vim-selected]::before { } #answers { - margin: 10px 8px 10px 8px; + grid-area: answers; border: 1px solid #ddd; padding: 0.9em; box-shadow: 0 0 5px #ccc; @@ -454,12 +475,7 @@ article.result-images[data-vim-selected]::before { } #sidebar { - position: absolute; - top: 100px; - left: 57em; - margin: 0 2px 5px 5px; - padding: 0 2px 2px; - max-width: 25em; + grid-area: sidebar; word-wrap: break-word; .infobox { @@ -542,7 +558,7 @@ article.result-images[data-vim-selected]::before { } #pagination { - clear: both; + grid-area: pagination; br { clear: both; @@ -556,14 +572,14 @@ article.result-images[data-vim-selected]::before { #backToTop { border: 1px solid #ddd; - margin: 0 0 0 2em; + margin: 0; padding: 0; font-size: 1em; box-shadow: 0 0 5px #ccc; background: white; position: fixed; - bottom: 85px; - left: @results-width; + bottom: 8rem; + left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); transition: opacity 0.5s; opacity: 0; @@ -574,19 +590,14 @@ article.result-images[data-vim-selected]::before { } } -@media screen and (max-width: 75em) { +@media screen and (max-width: 80em) { #main_preferences, #main_about, #main_stats { - margin: 0.5em; + margin: 2rem 0.5rem; width: auto; } - #suggestions, - #answers { - margin-top: 1em; - } - #infoboxes { position: inherit; max-width: inherit; @@ -603,9 +614,6 @@ article.result-images[data-vim-selected]::before { } #sidebar { - position: static; - max-width: @results-width; - margin: 0 0 2px 0; padding: 0; float: none; border: none; @@ -670,36 +678,68 @@ article.result-images[data-vim-selected]::before { max-width: 98%; } } -} - -#main_results div#results.only_template_images { - flex-direction: column; - width: auto; - display: flex; - - #sidebar { - position: relative; - top: auto; - order: 2; - } - - #urls { - position: relative; - order: 1; - } #backToTop { - right: 0.5em; - left: auto; + display: none; } #pagination { - position: relative; - order: 3; + margin: 2rem 0 0 0 !important; + } + + #main_results div#results { + margin: 2rem @results-tablet-offset 0 @results-tablet-offset; + display: grid; + grid-template-columns: @results-width; + grid-template-rows: min-content min-content min-content 1fr min-content min-content; + gap: 0; + grid-template-areas: + "corrections" + "answers" + "sidebar" + "urls" + "pagination"; + } + + article[data-vim-selected]::before { + left: 0; } } -@media screen and (max-width: @results-width) { +#main_results div#results.only_template_images { + 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; + grid-template-areas: + "corrections" + "urls" + "answers" + "sidebar" + "pagination"; + + #urls { + width: inherit; + margin: 0; + } + + #backToTop { + left: auto; + right: 2rem; + } + + #pagination { + margin-right: 4rem; + } +} + +@media screen and (max-width: 50em) { + #main_results div#results { + grid-template-columns: 100%; + margin: 2rem 0 0 0; + } + article[data-vim-selected]::before { display: none; content: ""; @@ -716,19 +756,18 @@ article.result-images[data-vim-selected]::before { margin: 0 5px 2px 5px; } - #corrections { - margin: 1em 5px 1em 5px; + #corrections, + #answers { + margin: 0 5px 1em 5px; } #results { margin: 0; padding: 0; - width: initial; } - #backToTop { - left: 40em; - bottom: 35px; + #pagination { + margin: 2rem 1rem 0 1rem !important; } .result { diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 8a5a7ef38..e9e88e7e0 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; @@ -301,8 +299,6 @@ html body .tabs > input:checked { border-bottom: 2px solid @color-categories-item-border-selected; background: @color-categories-item-selected; color: @color-categories-item-selected-font; - font-weight: bold; - letter-spacing: -0.1px; } + label + section { @@ -352,7 +348,7 @@ select { width: 40px; height: 10px; background: #dcdcdc; - margin: 8px auto; + margin: 8px 1rem; position: relative; border-radius: 50px;