mirror of
https://github.com/searxng/searxng
synced 2024-01-01 18:24:07 +00:00
[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-font: #29314d;
|
||||||
@color-url-visited-font: #684898;
|
@color-url-visited-font: #684898;
|
||||||
@results-width: 35em;
|
@results-width: 45rem;
|
||||||
@results-offset: 10rem;
|
@results-offset: 10rem;
|
||||||
@results-tablet-offset: 0.5rem;
|
@results-tablet-offset: 0.5rem;
|
||||||
@results-gap: 6em;
|
@results-gap: 5rem;
|
||||||
@search-width: 40em;
|
@search-width: 40rem;
|
||||||
|
|
||||||
//
|
//
|
||||||
@color-a-font: @color-base;
|
@color-a-font: @color-base;
|
||||||
|
@ -122,7 +122,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 75em) {
|
@media screen and (max-width: 80em) {
|
||||||
.preferences_back {
|
.preferences_back {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
@ -75,7 +75,7 @@ main {
|
|||||||
footer {
|
footer {
|
||||||
clear: both;
|
clear: both;
|
||||||
min-height: 4rem;
|
min-height: 4rem;
|
||||||
padding: 1em 0;
|
padding: 1rem 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: @color-footer-background;
|
background-color: @color-footer-background;
|
||||||
@ -130,7 +130,7 @@ article[data-vim-selected] {
|
|||||||
|
|
||||||
article[data-vim-selected]::before {
|
article[data-vim-selected]::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 1em;
|
left: (@results-offset - 2rem);
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
content: ">";
|
content: ">";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -366,12 +366,12 @@ article.result-images[data-vim-selected]::before {
|
|||||||
#results {
|
#results {
|
||||||
margin: 2rem 2rem 0 @results-offset;
|
margin: 2rem 2rem 0 @results-offset;
|
||||||
display: grid;
|
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;
|
grid-template-rows: min-content min-content 1fr min-content;
|
||||||
gap: 0 @results-gap;
|
gap: 0 @results-gap;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
|
"corrections sidebar"
|
||||||
"answers sidebar"
|
"answers sidebar"
|
||||||
"suggestions sidebar"
|
|
||||||
"urls sidebar"
|
"urls sidebar"
|
||||||
"pagination sidebar";
|
"pagination sidebar";
|
||||||
}
|
}
|
||||||
@ -388,8 +388,6 @@ article.result-images[data-vim-selected]::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#suggestions {
|
#suggestions {
|
||||||
grid-area: suggestions;
|
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
@ -402,12 +400,6 @@ article.result-images[data-vim-selected]::before {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#suggestions,
|
|
||||||
#answers,
|
|
||||||
#corrections {
|
|
||||||
max-width: @results-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
#suggestions,
|
#suggestions,
|
||||||
#answers,
|
#answers,
|
||||||
#infoboxes,
|
#infoboxes,
|
||||||
@ -435,9 +427,10 @@ article.result-images[data-vim-selected]::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#corrections {
|
#corrections {
|
||||||
|
grid-area: corrections;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
margin: 1em 0;
|
margin: 0 0 1em 0;
|
||||||
|
|
||||||
h4,
|
h4,
|
||||||
input[type="submit"] {
|
input[type="submit"] {
|
||||||
@ -459,7 +452,6 @@ article.result-images[data-vim-selected]::before {
|
|||||||
|
|
||||||
#answers {
|
#answers {
|
||||||
grid-area: answers;
|
grid-area: answers;
|
||||||
margin: 10px 8px 10px 8px;
|
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
padding: 0.9em;
|
padding: 0.9em;
|
||||||
box-shadow: 0 0 5px #ccc;
|
box-shadow: 0 0 5px #ccc;
|
||||||
@ -580,14 +572,14 @@ article.result-images[data-vim-selected]::before {
|
|||||||
|
|
||||||
#backToTop {
|
#backToTop {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
margin: 0 0 0 2em;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
box-shadow: 0 0 5px #ccc;
|
box-shadow: 0 0 5px #ccc;
|
||||||
background: white;
|
background: white;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 85px;
|
bottom: 8rem;
|
||||||
left: @results-width + @results-offset + @results-gap;
|
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
|
||||||
transition: opacity 0.5s;
|
transition: opacity 0.5s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
@ -602,15 +594,10 @@ article.result-images[data-vim-selected]::before {
|
|||||||
#main_preferences,
|
#main_preferences,
|
||||||
#main_about,
|
#main_about,
|
||||||
#main_stats {
|
#main_stats {
|
||||||
margin: 2em 0.5em;
|
margin: 2rem 0.5rem;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#suggestions,
|
|
||||||
#answers {
|
|
||||||
margin-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#infoboxes {
|
#infoboxes {
|
||||||
position: inherit;
|
position: inherit;
|
||||||
max-width: inherit;
|
max-width: inherit;
|
||||||
@ -693,22 +680,30 @@ article.result-images[data-vim-selected]::before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#backToTop {
|
#backToTop {
|
||||||
left: @results-width;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pagination {
|
||||||
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_results div#results {
|
#main_results div#results {
|
||||||
margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
|
margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
|
||||||
display: grid;
|
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;
|
grid-template-rows: min-content min-content min-content 1fr min-content min-content;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
|
"corrections"
|
||||||
"answers"
|
"answers"
|
||||||
"suggestions"
|
|
||||||
"sidebar"
|
"sidebar"
|
||||||
"urls"
|
"urls"
|
||||||
"pagination";
|
"pagination";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
article[data-vim-selected]::before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#main_results div#results.only_template_images {
|
#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;
|
grid-template-rows: min-content min-content 1fr min-content min-content;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"answers"
|
"corrections"
|
||||||
"suggestions"
|
|
||||||
"urls"
|
"urls"
|
||||||
|
"answers"
|
||||||
"sidebar"
|
"sidebar"
|
||||||
"pagination";
|
"pagination";
|
||||||
|
|
||||||
@ -728,11 +723,6 @@ article.result-images[data-vim-selected]::before {
|
|||||||
width: inherit;
|
width: inherit;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#backToTop {
|
|
||||||
right: 0.5em;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 50em) {
|
@media screen and (max-width: 50em) {
|
||||||
@ -757,8 +747,9 @@ article.result-images[data-vim-selected]::before {
|
|||||||
margin: 0 5px 2px 5px;
|
margin: 0 5px 2px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#corrections {
|
#corrections,
|
||||||
margin: 1em 5px 1em 5px;
|
#answers {
|
||||||
|
margin: 0 5px 1em 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#results {
|
#results {
|
||||||
@ -766,9 +757,8 @@ article.result-images[data-vim-selected]::before {
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#backToTop {
|
#pagination {
|
||||||
left: 40em;
|
margin: 2rem 1rem 0 1rem;
|
||||||
bottom: 35px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result {
|
.result {
|
||||||
|
Loading…
Reference in New Issue
Block a user