Archives/searxng
2
0
Fork 1
mirror of https://github.com/searxng/searxng synced 2024-11-03 09:40:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

[theme] cleanup grid layout and remove various margins and paddings from elements

Browse Source
This commit is contained in:
MrPaulBlack 2021-09-25 15:59:10 +02:00 committed by Markus Heiser
parent cc3c54f4cd
commit 385dce213b
4 changed files with 52 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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;

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

@ -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 {

4
searx/static/themes/simple/src/less/toolkit.less
View File

@ -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;