kamp/searxng
1
0
Fork 0
mirror of https://github.com/searxng/searxng.git synced 2024-11-05 04:40:11 +01:00
Code

Merge pull request #345 from MrPaulBlack/simple-theme-changes

Browse Source 
simple theme css refactor
This commit is contained in:
Alexandre Flament 2021-09-27 16:19:51 +02:00 committed by GitHub
commit a1c55caa71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 358 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
searx/static/themes/simple/css/searx-rtl.css
View File

@ -1247,7 +1247,6 @@ div.selectable_url {
border: 1px solid #888; border: 1px solid #888;
padding: 4px; padding: 4px;
color: #444; color: #444;
width: 100%;
margin: 0.1em; margin: 0.1em;
overflow: hidden; overflow: hidden;
height: 1.2em; height: 1.2em;
@ -1265,9 +1264,8 @@ div.selectable_url pre {
} }
.dialog-error { .dialog-error {
position: relative; position: relative;
width: 70%;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 8% 1em 8%; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
@ -1315,9 +1313,8 @@ div.selectable_url pre {
} }
.dialog-warning { .dialog-warning {
position: relative; position: relative;
width: 70%;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 8% 1em 8%; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
@ -1365,9 +1362,8 @@ div.selectable_url pre {
} }
.dialog-modal { .dialog-modal {
position: relative; position: relative;
width: 70%;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 8% 1em 8%; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
@ -1500,8 +1496,6 @@ html body .tabs > input:checked + label {
border-bottom: 2px solid #084999; border-bottom: 2px solid #084999;
background: #3498DB; background: #3498DB;
color: #FFF; color: #FFF;
font-weight: bold;
letter-spacing: -0.1px;
} }
html body .tabs > input:checked + label + section { html body .tabs > input:checked + label + section {
display: block; display: block;
@ -1544,7 +1538,7 @@ select:focus {
width: 40px; width: 40px;
height: 10px; height: 10px;
background: #dcdcdc; background: #dcdcdc;
margin: 8px auto; margin: 8px 1rem;
position: relative; position: relative;
border-radius: 50px; border-radius: 50px;
} }
@ -1800,7 +1794,7 @@ td:hover .engine-tooltip,
.autocomplete.open:empty { .autocomplete.open:empty {
display: none; display: none;
} }
@media screen and (max-width: 50em) { @media screen and (max-width: 45rem) {
.autocomplete { .autocomplete {
bottom: 0; bottom: 0;
} }
@ -1810,6 +1804,9 @@ td:hover .engine-tooltip,
text-align: left; text-align: left;
} }
} }
#main_index {
margin-top: 16em;
}
.index { .index {
text-align: center; text-align: center;
} }
@ -1827,6 +1824,7 @@ td:hover .engine-tooltip,
margin: 0 auto; margin: 0 auto;
background: inherit; background: inherit;
border: inherit; border: inherit;
padding: 0;
} }
.index .search_filters { .index .search_filters {
display: block; display: block;
@ -1836,10 +1834,18 @@ td:hover .engine-tooltip,
padding: 6px 10px; padding: 6px 10px;
border-bottom: initial !important; border-bottom: initial !important;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
div.title h1 { div.title h1 {
font-size: 1em; font-size: 1em;
} }
#main_index {
margin-top: 6em;
}
}
@media screen and (max-width: 50em) {
#main_index {
margin-top: 0;
}
} }
.column-reliability .engine-tooltip { .column-reliability .engine-tooltip {
right: 12rem; right: 12rem;
@ -1937,7 +1943,7 @@ td:hover .engine-tooltip,
#main_preferences th.name .engine-tooltip .engine-description { #main_preferences th.name .engine-tooltip .engine-description {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
.preferences_back { .preferences_back {
clear: both; clear: both;
} }
@ -1946,7 +1952,7 @@ td:hover .engine-tooltip,
* searx, A privacy-respecting, hackable metasearch engine * searx, A privacy-respecting, hackable metasearch engine
*/ */
#search { #search {
padding: 0 2em; padding: 0 2em 0 10rem;
margin: 0; margin: 0;
background: #f7f7f7; background: #f7f7f7;
border-bottom: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7;
@ -2011,7 +2017,7 @@ td:hover .engine-tooltip,
padding-left: 8px; padding-left: 8px;
padding-right: 0 !important; padding-right: 0 !important;
border-right: none; border-right: none;
width: 40em; width: 40rem;
} }
#q::-ms-clear, #q::-ms-clear,
#q::-webkit-search-cancel-button { #q::-webkit-search-cancel-button {
@ -2033,7 +2039,10 @@ td:hover .engine-tooltip,
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
#search {
padding: 0 0.5rem;
}
#categories { #categories {
font-size: 90%; font-size: 90%;
clear: both; clear: both;
@ -2096,7 +2105,7 @@ td:hover .engine-tooltip,
} }
.category { .category {
display: block; display: block;
width: 90%; width: 100%;
} }
.category label { .category label {
border-bottom: 0; border-bottom: 0;
@ -2200,23 +2209,32 @@ main {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
main { main {
width: 100%; width: 100%;
margin-bottom: 2rem;
flex: 1;
} }
#main_preferences, #main_preferences,
#main_about, #main_about,
#main_stats { #main_stats {
margin: 3em; margin: 2em auto;
width: auto; width: 85em;
} }
footer { footer {
bottom: 0;
height: 3em;
margin: 1em 0;
padding: 1em 0;
clear: both; clear: both;
min-height: 4rem;
padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #d7d7d7;
overflow: hidden;
} }
footer p { footer p {
font-size: 0.9em; font-size: 0.9em;
@ -2235,7 +2253,6 @@ footer p {
input[type="submit"], input[type="submit"],
#results button[type="submit"] { #results button[type="submit"] {
padding: 0.5rem; padding: 0.5rem;
margin: 2px 4px;
display: inline-block; display: inline-block;
background: #3498DB; background: #3498DB;
color: #FFF; color: #FFF;
@ -2260,7 +2277,7 @@ article[data-vim-selected] {
} }
article[data-vim-selected]::before { article[data-vim-selected]::before {
position: absolute; position: absolute;
left: 1em; left: 8rem;
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
@ -2452,9 +2469,21 @@ article.result-images[data-vim-selected]::before {
color: #684898; color: #684898;
} }
#results { #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; padding: 0;
width: 50em; grid-area: urls;
} }
#suggestions .wrapper { #suggestions .wrapper {
display: flex; display: flex;
@ -2465,11 +2494,6 @@ article.result-images[data-vim-selected]::before {
display: inline-block; display: inline-block;
flex: 1 1 50%; flex: 1 1 50%;
} }
#suggestions,
#answers,
#corrections {
max-width: 50em;
}
#suggestions input, #suggestions input,
#answers input, #answers input,
#infoboxes input, #infoboxes input,
@ -2505,9 +2529,10 @@ article.result-images[data-vim-selected]::before {
text-decoration: underline; text-decoration: underline;
} }
#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;
} }
#corrections h4, #corrections h4,
#corrections input[type="submit"] { #corrections input[type="submit"] {
@ -2524,7 +2549,7 @@ article.result-images[data-vim-selected]::before {
color: #444; color: #444;
} }
#answers { #answers {
margin: 10px 8px 10px 8px; grid-area: answers;
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;
@ -2542,12 +2567,7 @@ article.result-images[data-vim-selected]::before {
min-width: 210px; min-width: 210px;
} }
#sidebar { #sidebar {
position: absolute; grid-area: sidebar;
top: 100px;
left: 57em;
margin: 0 2px 5px 5px;
padding: 0 2px 2px;
max-width: 25em;
word-wrap: break-word; word-wrap: break-word;
} }
#sidebar .infobox { #sidebar .infobox {
@ -2614,7 +2634,7 @@ article.result-images[data-vim-selected]::before {
color: #222; color: #222;
} }
#pagination { #pagination {
clear: both; grid-area: pagination;
} }
#pagination br { #pagination br {
clear: both; clear: both;
@ -2625,14 +2645,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: 50em; left: 56.3rem;
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; opacity: 0;
} }
@ -2641,17 +2661,13 @@ article.result-images[data-vim-selected]::before {
margin: 0; margin: 0;
padding: 0.6em; padding: 0.6em;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
#main_preferences, #main_preferences,
#main_about, #main_about,
#main_stats { #main_stats {
margin: 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;
@ -2665,9 +2681,6 @@ article.result-images[data-vim-selected]::before {
margin: 0.5em 0.5em 0.5em 0; margin: 0.5em 0.5em 0.5em 0;
} }
#sidebar { #sidebar {
position: static;
max-width: 50em;
margin: 0 0 2px 0;
padding: 0; padding: 0;
float: none; float: none;
border: none; border: none;
@ -2718,30 +2731,48 @@ article.result-images[data-vim-selected]::before {
.image_result img { .image_result img {
max-width: 98%; 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 { #main_results div#results.only_template_images {
flex-direction: column; margin: 2rem 0.5rem 0 0.5rem;
width: auto; display: grid;
display: flex; grid-template-columns: 100%;
} grid-template-rows: min-content min-content 1fr min-content min-content;
#main_results div#results.only_template_images #sidebar { gap: 0;
position: relative; grid-template-areas: "corrections" "urls" "answers" "sidebar" "pagination";
top: auto;
order: 2;
} }
#main_results div#results.only_template_images #urls { #main_results div#results.only_template_images #urls {
position: relative; width: inherit;
order: 1; margin: 0;
} }
#main_results div#results.only_template_images #backToTop { #main_results div#results.only_template_images #backToTop {
right: 0.5em;
left: auto; left: auto;
right: 2rem;
} }
#main_results div#results.only_template_images #pagination { #main_results div#results.only_template_images #pagination {
position: relative; margin-right: 4rem;
order: 3;
} }
@media screen and (max-width: 50em) { @media screen and (max-width: 50em) {
#main_results div#results {
grid-template-columns: 100%;
margin: 2rem 0 0 0;
}
article[data-vim-selected]::before { article[data-vim-selected]::before {
display: none; display: none;
content: ""; content: "";
@ -2755,17 +2786,16 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
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 {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: initial;
} }
#backToTop { #pagination {
left: 40em; margin: 2rem 1rem 0 1rem !important;
bottom: 35px;
} }
.result { .result {
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;

2
searx/static/themes/simple/css/searx-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searx-rtl.min.css.map
View File

File diff suppressed because one or more lines are too long

174
searx/static/themes/simple/css/searx.css
View File

@ -1247,7 +1247,6 @@ div.selectable_url {
border: 1px solid #888; border: 1px solid #888;
padding: 4px; padding: 4px;
color: #444; color: #444;
width: 100%;
margin: 0.1em; margin: 0.1em;
overflow: hidden; overflow: hidden;
height: 1.2em; height: 1.2em;
@ -1265,9 +1264,8 @@ div.selectable_url pre {
} }
.dialog-error { .dialog-error {
position: relative; position: relative;
width: 70%;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 8% 1em 8%; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
@ -1315,9 +1313,8 @@ div.selectable_url pre {
} }
.dialog-warning { .dialog-warning {
position: relative; position: relative;
width: 70%;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 8% 1em 8%; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
@ -1365,9 +1362,8 @@ div.selectable_url pre {
} }
.dialog-modal { .dialog-modal {
position: relative; position: relative;
width: 70%;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 8% 1em 8%; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
@ -1500,8 +1496,6 @@ html body .tabs > input:checked + label {
border-bottom: 2px solid #084999; border-bottom: 2px solid #084999;
background: #3498DB; background: #3498DB;
color: #FFF; color: #FFF;
font-weight: bold;
letter-spacing: -0.1px;
} }
html body .tabs > input:checked + label + section { html body .tabs > input:checked + label + section {
display: block; display: block;
@ -1544,7 +1538,7 @@ select:focus {
width: 40px; width: 40px;
height: 10px; height: 10px;
background: #dcdcdc; background: #dcdcdc;
margin: 8px auto; margin: 8px 1rem;
position: relative; position: relative;
border-radius: 50px; border-radius: 50px;
} }
@ -1800,7 +1794,7 @@ td:hover .engine-tooltip,
.autocomplete.open:empty { .autocomplete.open:empty {
display: none; display: none;
} }
@media screen and (max-width: 50em) { @media screen and (max-width: 45rem) {
.autocomplete { .autocomplete {
bottom: 0; bottom: 0;
} }
@ -1810,6 +1804,9 @@ td:hover .engine-tooltip,
text-align: left; text-align: left;
} }
} }
#main_index {
margin-top: 16em;
}
.index { .index {
text-align: center; text-align: center;
} }
@ -1827,6 +1824,7 @@ td:hover .engine-tooltip,
margin: 0 auto; margin: 0 auto;
background: inherit; background: inherit;
border: inherit; border: inherit;
padding: 0;
} }
.index .search_filters { .index .search_filters {
display: block; display: block;
@ -1836,10 +1834,18 @@ td:hover .engine-tooltip,
padding: 6px 10px; padding: 6px 10px;
border-bottom: initial !important; border-bottom: initial !important;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
div.title h1 { div.title h1 {
font-size: 1em; font-size: 1em;
} }
#main_index {
margin-top: 6em;
}
}
@media screen and (max-width: 50em) {
#main_index {
margin-top: 0;
}
} }
.column-reliability .engine-tooltip { .column-reliability .engine-tooltip {
right: 12rem; right: 12rem;
@ -1937,7 +1943,7 @@ td:hover .engine-tooltip,
#main_preferences th.name .engine-tooltip .engine-description { #main_preferences th.name .engine-tooltip .engine-description {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
.preferences_back { .preferences_back {
clear: both; clear: both;
} }
@ -1946,7 +1952,7 @@ td:hover .engine-tooltip,
* searx, A privacy-respecting, hackable metasearch engine * searx, A privacy-respecting, hackable metasearch engine
*/ */
#search { #search {
padding: 0 2em; padding: 0 2em 0 10rem;
margin: 0; margin: 0;
background: #f7f7f7; background: #f7f7f7;
border-bottom: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7;
@ -2011,7 +2017,7 @@ td:hover .engine-tooltip,
padding-left: 8px; padding-left: 8px;
padding-right: 0 !important; padding-right: 0 !important;
border-right: none; border-right: none;
width: 40em; width: 40rem;
} }
#q::-ms-clear, #q::-ms-clear,
#q::-webkit-search-cancel-button { #q::-webkit-search-cancel-button {
@ -2033,7 +2039,10 @@ td:hover .engine-tooltip,
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
#search {
padding: 0 0.5rem;
}
#categories { #categories {
font-size: 90%; font-size: 90%;
clear: both; clear: both;
@ -2096,7 +2105,7 @@ td:hover .engine-tooltip,
} }
.category { .category {
display: block; display: block;
width: 90%; width: 100%;
} }
.category label { .category label {
border-bottom: 0; border-bottom: 0;
@ -2200,23 +2209,32 @@ main {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
main { main {
width: 100%; width: 100%;
margin-bottom: 2rem;
flex: 1;
} }
#main_preferences, #main_preferences,
#main_about, #main_about,
#main_stats { #main_stats {
margin: 3em; margin: 2em auto;
width: auto; width: 85em;
} }
footer { footer {
bottom: 0;
height: 3em;
margin: 1em 0;
padding: 1em 0;
clear: both; clear: both;
min-height: 4rem;
padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #d7d7d7;
overflow: hidden;
} }
footer p { footer p {
font-size: 0.9em; font-size: 0.9em;
@ -2235,7 +2253,6 @@ footer p {
input[type="submit"], input[type="submit"],
#results button[type="submit"] { #results button[type="submit"] {
padding: 0.5rem; padding: 0.5rem;
margin: 2px 4px;
display: inline-block; display: inline-block;
background: #3498DB; background: #3498DB;
color: #FFF; color: #FFF;
@ -2260,7 +2277,7 @@ article[data-vim-selected] {
} }
article[data-vim-selected]::before { article[data-vim-selected]::before {
position: absolute; position: absolute;
left: 1em; left: 8rem;
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
@ -2452,9 +2469,21 @@ article.result-images[data-vim-selected]::before {
color: #684898; color: #684898;
} }
#results { #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; padding: 0;
width: 50em; grid-area: urls;
} }
#suggestions .wrapper { #suggestions .wrapper {
display: flex; display: flex;
@ -2465,11 +2494,6 @@ article.result-images[data-vim-selected]::before {
display: inline-block; display: inline-block;
flex: 1 1 50%; flex: 1 1 50%;
} }
#suggestions,
#answers,
#corrections {
max-width: 50em;
}
#suggestions input, #suggestions input,
#answers input, #answers input,
#infoboxes input, #infoboxes input,
@ -2505,9 +2529,10 @@ article.result-images[data-vim-selected]::before {
text-decoration: underline; text-decoration: underline;
} }
#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;
} }
#corrections h4, #corrections h4,
#corrections input[type="submit"] { #corrections input[type="submit"] {
@ -2524,7 +2549,7 @@ article.result-images[data-vim-selected]::before {
color: #444; color: #444;
} }
#answers { #answers {
margin: 10px 8px 10px 8px; grid-area: answers;
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;
@ -2542,12 +2567,7 @@ article.result-images[data-vim-selected]::before {
min-width: 210px; min-width: 210px;
} }
#sidebar { #sidebar {
position: absolute; grid-area: sidebar;
top: 100px;
left: 57em;
margin: 0 2px 5px 5px;
padding: 0 2px 2px;
max-width: 25em;
word-wrap: break-word; word-wrap: break-word;
} }
#sidebar .infobox { #sidebar .infobox {
@ -2614,7 +2634,7 @@ article.result-images[data-vim-selected]::before {
color: #222; color: #222;
} }
#pagination { #pagination {
clear: both; grid-area: pagination;
} }
#pagination br { #pagination br {
clear: both; clear: both;
@ -2625,14 +2645,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: 50em; left: 56.3rem;
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; opacity: 0;
} }
@ -2641,17 +2661,13 @@ article.result-images[data-vim-selected]::before {
margin: 0; margin: 0;
padding: 0.6em; padding: 0.6em;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
#main_preferences, #main_preferences,
#main_about, #main_about,
#main_stats { #main_stats {
margin: 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;
@ -2665,9 +2681,6 @@ article.result-images[data-vim-selected]::before {
margin: 0.5em 0.5em 0.5em 0; margin: 0.5em 0.5em 0.5em 0;
} }
#sidebar { #sidebar {
position: static;
max-width: 50em;
margin: 0 0 2px 0;
padding: 0; padding: 0;
float: none; float: none;
border: none; border: none;
@ -2718,30 +2731,48 @@ article.result-images[data-vim-selected]::before {
.image_result img { .image_result img {
max-width: 98%; 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 { #main_results div#results.only_template_images {
flex-direction: column; margin: 2rem 0.5rem 0 0.5rem;
width: auto; display: grid;
display: flex; grid-template-columns: 100%;
} grid-template-rows: min-content min-content 1fr min-content min-content;
#main_results div#results.only_template_images #sidebar { gap: 0;
position: relative; grid-template-areas: "corrections" "urls" "answers" "sidebar" "pagination";
top: auto;
order: 2;
} }
#main_results div#results.only_template_images #urls { #main_results div#results.only_template_images #urls {
position: relative; width: inherit;
order: 1; margin: 0;
} }
#main_results div#results.only_template_images #backToTop { #main_results div#results.only_template_images #backToTop {
right: 0.5em;
left: auto; left: auto;
right: 2rem;
} }
#main_results div#results.only_template_images #pagination { #main_results div#results.only_template_images #pagination {
position: relative; margin-right: 4rem;
order: 3;
} }
@media screen and (max-width: 50em) { @media screen and (max-width: 50em) {
#main_results div#results {
grid-template-columns: 100%;
margin: 2rem 0 0 0;
}
article[data-vim-selected]::before { article[data-vim-selected]::before {
display: none; display: none;
content: ""; content: "";
@ -2755,17 +2786,16 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
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 {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: initial;
} }
#backToTop { #pagination {
left: 40em; margin: 2rem 1rem 0 1rem !important;
bottom: 35px;
} }
.result { .result {
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;

2
searx/static/themes/simple/css/searx.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searx.min.css.map
View File

File diff suppressed because one or more lines are too long

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

@ -31,8 +31,11 @@
@color-url-font: #29314d; @color-url-font: #29314d;
@color-url-visited-font: #684898; @color-url-visited-font: #684898;
@results-width: 50em; @results-width: 45rem;
@search-width: 40em; @results-offset: 10rem;
@results-tablet-offset: 0.5rem;
@results-gap: 5rem;
@search-width: 40rem;
// //
@color-a-font: @color-base; @color-a-font: @color-base;
@ -40,6 +43,16 @@
/// Start-Screen /// Start-Screen
/// Header
@color-header-background: #f7f7f7;
@color-header-border: #d7d7d7;
/// Footer
@color-footer-background: #f7f7f7;
@color-footer-border: #d7d7d7;
/// Search-Input /// Search-Input
@color-search-border: @color-base; @color-search-border: @color-base;

17
searx/static/themes/simple/src/less/index.less
View File

@ -1,3 +1,7 @@
#main_index {
margin-top: 16em;
}
.index { .index {
text-align: center; text-align: center;
@ -17,6 +21,7 @@
margin: 0 auto; margin: 0 auto;
background: inherit; background: inherit;
border: inherit; border: inherit;
padding: 0;
} }
.search_filters { .search_filters {
@ -30,10 +35,20 @@
} }
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
div.title { div.title {
h1 { h1 {
font-size: 1em; font-size: 1em;
} }
} }
#main_index {
margin-top: 6em;
}
}
@media screen and (max-width: 50em) {
#main_index {
margin-top: 0;
}
} }

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

@ -122,7 +122,7 @@
} }
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
.preferences_back { .preferences_back {
clear: both; clear: both;
} }

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

@ -3,10 +3,10 @@
*/ */
#search { #search {
padding: 0 2em; padding: 0 2em 0 @results-offset;
margin: 0; margin: 0;
background: #f7f7f7; background: @color-header-background;
border-bottom: 1px solid #d7d7d7; border-bottom: 1px solid @color-header-border;
} }
#search_wrapper { #search_wrapper {
@ -104,7 +104,11 @@
vertical-align: middle; vertical-align: middle;
} }
@media screen and (max-width: 75em) { @media screen and (max-width: 80em) {
#search {
padding: 0 @results-tablet-offset;
}
#categories { #categories {
font-size: 90%; font-size: 90%;
clear: both; clear: both;
@ -142,7 +146,7 @@
} }
} }
@media screen and (max-width: @results-width) { @media screen and (max-width: 50em) {
#search { #search {
width: 100%; width: 100%;
margin: 0; margin: 0;
@ -181,7 +185,7 @@
.category { .category {
display: block; display: block;
width: 90%; width: 100%;
label { label {
border-bottom: 0; border-bottom: 0;

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

@ -52,26 +52,35 @@ 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,
#main_about, #main_about,
#main_stats { #main_stats {
margin: 3em; margin: 2em auto;
width: auto; width: 85em;
} }
footer { footer {
bottom: 0;
height: 3em;
margin: 1em 0;
padding: 1em 0;
clear: both; clear: both;
min-height: 4rem;
padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: @color-footer-background;
border-top: 1px solid @color-footer-border;
overflow: hidden;
p { p {
font-size: 0.9em; font-size: 0.9em;
@ -93,7 +102,6 @@ footer {
input[type="submit"], input[type="submit"],
#results button[type="submit"] { #results button[type="submit"] {
padding: 0.5rem; padding: 0.5rem;
margin: 2px 4px;
display: inline-block; display: inline-block;
background: @color-download-button-background; background: @color-download-button-background;
color: @color-download-button-font; color: @color-download-button-font;
@ -122,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;
@ -356,9 +364,27 @@ article.result-images[data-vim-selected]::before {
} }
#results { #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; padding: 0;
width: @results-width; grid-area: urls;
} }
#suggestions { #suggestions {
@ -374,12 +400,6 @@ article.result-images[data-vim-selected]::before {
} }
} }
#suggestions,
#answers,
#corrections {
max-width: @results-width;
}
#suggestions, #suggestions,
#answers, #answers,
#infoboxes, #infoboxes,
@ -407,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"] {
@ -430,7 +451,7 @@ article.result-images[data-vim-selected]::before {
} }
#answers { #answers {
margin: 10px 8px 10px 8px; grid-area: answers;
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;
@ -454,12 +475,7 @@ article.result-images[data-vim-selected]::before {
} }
#sidebar { #sidebar {
position: absolute; grid-area: sidebar;
top: 100px;
left: 57em;
margin: 0 2px 5px 5px;
padding: 0 2px 2px;
max-width: 25em;
word-wrap: break-word; word-wrap: break-word;
.infobox { .infobox {
@ -542,7 +558,7 @@ article.result-images[data-vim-selected]::before {
} }
#pagination { #pagination {
clear: both; grid-area: pagination;
br { br {
clear: both; clear: both;
@ -556,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; left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
transition: opacity 0.5s; transition: opacity 0.5s;
opacity: 0; 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_preferences,
#main_about, #main_about,
#main_stats { #main_stats {
margin: 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;
@ -603,9 +614,6 @@ article.result-images[data-vim-selected]::before {
} }
#sidebar { #sidebar {
position: static;
max-width: @results-width;
margin: 0 0 2px 0;
padding: 0; padding: 0;
float: none; float: none;
border: none; border: none;
@ -670,36 +678,68 @@ article.result-images[data-vim-selected]::before {
max-width: 98%; 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 { #backToTop {
right: 0.5em; display: none;
left: auto;
} }
#pagination { #pagination {
position: relative; margin: 2rem 0 0 0 !important;
order: 3; }
#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 { article[data-vim-selected]::before {
display: none; display: none;
content: ""; content: "";
@ -716,19 +756,18 @@ 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 {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: initial;
} }
#backToTop { #pagination {
left: 40em; margin: 2rem 1rem 0 1rem !important;
bottom: 35px;
} }
.result { .result {

8
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; border: 1px solid @color-result-search-url-border;
padding: 4px; padding: 4px;
color: @color-result-search-url-font; color: @color-result-search-url-font;
width: 100%;
margin: 0.1em; margin: 0.1em;
overflow: hidden; overflow: hidden;
height: 1.2em; height: 1.2em;
@ -121,9 +120,8 @@ div.selectable_url {
// dialog // dialog
.dialog() { .dialog() {
position: relative; position: relative;
width: 70%;
padding: 1em 1em 1em 2.7em; padding: 1em 1em 1em 2.7em;
margin: 0 8% 1em 8%; margin: 0 0 1em 0;
border: 1px solid black; border: 1px solid black;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
@ -301,8 +299,6 @@ html body .tabs > input:checked {
border-bottom: 2px solid @color-categories-item-border-selected; border-bottom: 2px solid @color-categories-item-border-selected;
background: @color-categories-item-selected; background: @color-categories-item-selected;
color: @color-categories-item-selected-font; color: @color-categories-item-selected-font;
font-weight: bold;
letter-spacing: -0.1px;
} }
+ label + section { + label + section {
@ -352,7 +348,7 @@ select {
width: 40px; width: 40px;
height: 10px; height: 10px;
background: #dcdcdc; background: #dcdcdc;
margin: 8px auto; margin: 8px 1rem;
position: relative; position: relative;
border-radius: 50px; border-radius: 50px;