simple theme: update

Browse Source
This commit is contained in:
Alexandre Flament 2021-06-25 11:31:14 +02:00 committed by Markus Heiser
parent 88c17d106d
commit cc3c54f4cd
3 changed files with 74 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
searx/static/themes/simple/src/less/definitions.less
View File

@ -32,6 +32,7 @@
@color-url-font: #29314d; @color-url-font: #29314d;
@color-url-visited-font: #684898; @color-url-visited-font: #684898;
@results-width: 50em; @results-width: 50em;
@results-offset: 4rem;
@search-width: 40em; @search-width: 40em;
// //

2
searx/static/themes/simple/src/less/search.less
View File

@ -181,7 +181,7 @@
.category { .category {
display: block; display: block;
width: 90%; width: 100%;
label { label {
border-bottom: 0; border-bottom: 0;

98
searx/static/themes/simple/src/less/style.less
View File

@ -52,9 +52,17 @@ main {
margin: 0; margin: 0;
} }
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
main { main {
width: 100%; width: 100%;
// position: absolute; margin-bottom: 2rem;
flex: 1;
} }
#main_preferences, #main_preferences,
@ -65,13 +73,14 @@ main {
} }
footer { footer {
bottom: 0;
height: 3em;
margin: 1em 0;
padding: 1em 0;
clear: both; clear: both;
min-height: 4rem;
padding: 1em 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #f2f2f2;
border-top: 1px solid #e4e4e4;
overflow: hidden;
p { p {
font-size: 0.9em; font-size: 0.9em;
@ -356,12 +365,33 @@ article.result-images[data-vim-selected]::before {
} }
#results { #results {
margin: 2em 2em 20px 2em; margin: 2rem 2rem 0 2rem;
display: grid;
grid-template-columns: (@results-width + @results-offset) 1fr;
grid-template-rows: min-content 1fr min-content;
gap: 0 3rem;
grid-template-areas:
"answers sidebar"
"suggestions sidebar"
"urls sidebar"
"pagination sidebar";
}
#results #answers *:first-child,
#results #sidebar *:first-child,
#results #urls *:first-child {
margin-top: 0;
}
#urls {
margin: 0.5em 2em 20px 0;
padding: 0; padding: 0;
width: @results-width; grid-area: urls;
} }
#suggestions { #suggestions {
grid-area: suggestions;
.wrapper { .wrapper {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -430,6 +460,7 @@ article.result-images[data-vim-selected]::before {
} }
#answers { #answers {
grid-area: answers;
margin: 10px 8px 10px 8px; margin: 10px 8px 10px 8px;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 0.9em; padding: 0.9em;
@ -454,9 +485,7 @@ article.result-images[data-vim-selected]::before {
} }
#sidebar { #sidebar {
position: absolute; grid-area: sidebar;
top: 100px;
left: 57em;
margin: 0 2px 5px 5px; margin: 0 2px 5px 5px;
padding: 0 2px 2px; padding: 0 2px 2px;
max-width: 25em; max-width: 25em;
@ -542,7 +571,7 @@ article.result-images[data-vim-selected]::before {
} }
#pagination { #pagination {
clear: both; grid-area: pagination;
br { br {
clear: both; clear: both;
@ -574,7 +603,7 @@ article.result-images[data-vim-selected]::before {
} }
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 1250px) {
#main_preferences, #main_preferences,
#main_about, #main_about,
#main_stats { #main_stats {
@ -603,7 +632,6 @@ article.result-images[data-vim-selected]::before {
} }
#sidebar { #sidebar {
position: static;
max-width: @results-width; max-width: @results-width;
margin: 0 0 2px 0; margin: 0 0 2px 0;
padding: 0; padding: 0;
@ -673,31 +701,46 @@ article.result-images[data-vim-selected]::before {
} }
#main_results div#results.only_template_images { #main_results div#results.only_template_images {
flex-direction: column; margin: 2rem 2rem 0 2rem;
width: auto; display: grid;
display: flex; grid-template-columns: 100%;
grid-template-rows: min-content min-content 1fr min-content min-content;
#sidebar { gap: 0 3rem;
position: relative; grid-template-areas:
top: auto; "answers"
order: 2; "suggestions"
} "urls"
"sidebar"
"pagination";
#urls { #urls {
position: relative; width: inherit;
order: 1; margin: 0 0 20px 0;
} }
#backToTop { #backToTop {
right: 0.5em; right: 0.5em;
left: auto; left: auto;
} }
}
#pagination { /*
position: relative; @media screen and (max-width: 1250px) {
order: 3; #main_results div#results {
margin: 2rem 2rem 0 2rem;
display: grid;
grid-template-columns: (@results-width + @results-offset) 1fr;
grid-template-rows: min-content min-content min-content 1fr min-content min-content;
gap: 0 3rem;
grid-template-areas:
"answers empty"
"suggestions empty"
"sidebar empty"
"urls empty"
"pagination empty";
} }
} }
*/
@media screen and (max-width: @results-width) { @media screen and (max-width: @results-width) {
article[data-vim-selected]::before { article[data-vim-selected]::before {
@ -723,7 +766,6 @@ article.result-images[data-vim-selected]::before {
#results { #results {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: initial;
} }
#backToTop { #backToTop {