forked from zaclys/searxng
[fix] several issues in the simple theme
- using more rem in style and definitions - mobile width in preferences.less fix max-width: 75em to 80em (normalized with style.less and other) - do not display #backToTop position on tablet (when max-width: 80em) - fix answer box on mobile (when max-width: 50em)
This commit is contained in:
parent
b6ae1f1c7a
commit
8268873701
|
@ -31,11 +31,11 @@
|
|||
|
||||
@color-url-font: #29314d;
|
||||
@color-url-visited-font: #684898;
|
||||
@results-width: 35em;
|
||||
@results-width: 45rem;
|
||||
@results-offset: 10rem;
|
||||
@results-tablet-offset: 0.5rem;
|
||||
@results-gap: 6em;
|
||||
@search-width: 40em;
|
||||
@results-gap: 5rem;
|
||||
@search-width: 40rem;
|
||||
|
||||
//
|
||||
@color-a-font: @color-base;
|
||||
|
|
|
@ -122,7 +122,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 75em) {
|
||||
@media screen and (max-width: 80em) {
|
||||
.preferences_back {
|
||||
clear: both;
|
||||
}
|
||||
|
|
|
@ -75,7 +75,7 @@ main {
|
|||
footer {
|
||||
clear: both;
|
||||
min-height: 4rem;
|
||||
padding: 1em 0;
|
||||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: @color-footer-background;
|
||||
|
@ -130,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;
|
||||
|
@ -366,12 +366,12 @@ article.result-images[data-vim-selected]::before {
|
|||
#results {
|
||||
margin: 2rem 2rem 0 @results-offset;
|
||||
display: grid;
|
||||
grid-template-columns: (@results-width + @results-offset) 25em;
|
||||
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"
|
||||
"suggestions sidebar"
|
||||
"urls sidebar"
|
||||
"pagination sidebar";
|
||||
}
|
||||
|
@ -388,8 +388,6 @@ article.result-images[data-vim-selected]::before {
|
|||
}
|
||||
|
||||
#suggestions {
|
||||
grid-area: suggestions;
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
@ -402,12 +400,6 @@ article.result-images[data-vim-selected]::before {
|
|||
}
|
||||
}
|
||||
|
||||
#suggestions,
|
||||
#answers,
|
||||
#corrections {
|
||||
max-width: @results-width;
|
||||
}
|
||||
|
||||
#suggestions,
|
||||
#answers,
|
||||
#infoboxes,
|
||||
|
@ -435,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"] {
|
||||
|
@ -459,7 +452,6 @@ article.result-images[data-vim-selected]::before {
|
|||
|
||||
#answers {
|
||||
grid-area: answers;
|
||||
margin: 10px 8px 10px 8px;
|
||||
border: 1px solid #ddd;
|
||||
padding: 0.9em;
|
||||
box-shadow: 0 0 5px #ccc;
|
||||
|
@ -580,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 + @results-offset + @results-gap;
|
||||
bottom: 8rem;
|
||||
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
|
||||
transition: opacity 0.5s;
|
||||
opacity: 0;
|
||||
|
||||
|
@ -602,15 +594,10 @@ article.result-images[data-vim-selected]::before {
|
|||
#main_preferences,
|
||||
#main_about,
|
||||
#main_stats {
|
||||
margin: 2em 0.5em;
|
||||
margin: 2rem 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#suggestions,
|
||||
#answers {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#infoboxes {
|
||||
position: inherit;
|
||||
max-width: inherit;
|
||||
|
@ -693,22 +680,30 @@ article.result-images[data-vim-selected]::before {
|
|||
}
|
||||
|
||||
#backToTop {
|
||||
left: @results-width;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pagination {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#main_results div#results {
|
||||
margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
|
||||
display: grid;
|
||||
grid-template-columns: 50em;
|
||||
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"
|
||||
"suggestions"
|
||||
"sidebar"
|
||||
"urls"
|
||||
"pagination";
|
||||
}
|
||||
|
||||
article[data-vim-selected]::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#main_results div#results.only_template_images {
|
||||
|
@ -718,9 +713,9 @@ article.result-images[data-vim-selected]::before {
|
|||
grid-template-rows: min-content min-content 1fr min-content min-content;
|
||||
gap: 0;
|
||||
grid-template-areas:
|
||||
"answers"
|
||||
"suggestions"
|
||||
"corrections"
|
||||
"urls"
|
||||
"answers"
|
||||
"sidebar"
|
||||
"pagination";
|
||||
|
||||
|
@ -728,11 +723,6 @@ article.result-images[data-vim-selected]::before {
|
|||
width: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
right: 0.5em;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 50em) {
|
||||
|
@ -757,8 +747,9 @@ 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 {
|
||||
|
@ -766,9 +757,8 @@ article.result-images[data-vim-selected]::before {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#backToTop {
|
||||
left: 40em;
|
||||
bottom: 35px;
|
||||
#pagination {
|
||||
margin: 2rem 1rem 0 1rem;
|
||||
}
|
||||
|
||||
.result {
|
||||
|
|
Loading…
Reference in New Issue