ZaclysIndustries
/
searxngRebrandZaclys
forked from zaclys/searxng
2
0
Fork 0
Code Issues Pull Requests Activity

[simple theme] new color theme and result on mobile and tablet 

* clean up vars in defenition
* results look now the same on mobile and desktop
* reworked results on mobile
* new color theme with more vibrant colors
This commit is contained in:
MrPaulBlack 2021-10-08 16:06:48 +02:00
parent 09324f3492
commit 3daa024c04
5 changed files with 89 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
searx/static/themes/simple/src/less/autocomplete.less
View File

@ -48,7 +48,8 @@
&.open { &.open {
display: block; display: block;
background-color: var(--color-autocomplete-background); background-color: var(--color-autocomplete-background);
border: 1px solid var(--color-base-border); color: var(--color-autocomplete-font);
border: 1px solid var(--color-autocomplete-border);
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
z-index: 100; z-index: 100;

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

@ -6,24 +6,37 @@
html { html {
/// Base Colors /// Base Colors
--color-base: #084999;
--color-base-font: #444; --color-base-font: #444;
--color-base-border: #ddd;
--color-base-shadow: #ccc;
--color-base-background: #fff; --color-base-background: #fff;
--color-url-font: #29314d; --color-url-font: #29314d;
--color-url-visited-font: #684898; --color-url-visited-font: #80b;
--color-header-footer-background: #f7f7f7;
/// Header Colors
--color-header-background: #f7f7f7;
--color-header-border: #ddd;
/// Footer Colors
--color-footer-background: #f7f7f7;
--color-footer-border: #ddd;
/// Sidebar Colors
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
/// BackToTop Colors
--color-backtotop-border: #ddd;
--color-backtotop-background: #fff;
--color-backtotop-shadow: #ccc;
/// Button Colors /// Button Colors
--color-btn-background: #084999; --color-btn-background: #3050ff;
--color-btn-font: #fff; --color-btn-font: #fff;
/// Search Input Colors /// Search Input Colors
--color-search-border: #ddd; --color-search-border: #bbb;
--color-search-background: #fff; --color-search-background: #fff;
--color-search-font: #222; --color-search-font: #222;
--color-search-background-hover: #084999; --color-search-background-hover: #3050ff;
/// Modal Colors /// Modal Colors
--color-error: #db3434; --color-error: #db3434;
@ -34,70 +47,65 @@ html {
--color-success-background: lighten(#42db34, 40%); --color-success-background: lighten(#42db34, 40%);
/// Categories Colors /// Categories Colors
--color-categories-item-selected-font: #084999; --color-categories-item-selected-font: #3050ff;
--color-categories-item-border-selected: #084999; --color-categories-item-border-selected: #3050ff;
/// Autocompleter Colors /// Autocomplete Colors
--color-autocomplete-font: #000;
--color-autocomplete-border: #bbb;
--color-autocomplete-background: #fff; --color-autocomplete-background: #fff;
--color-autocomplete-background-hover: #f7f7f7; --color-autocomplete-background-hover: #f7f7f7;
/// Results /// Answer Colors
--color-result-torrent-border: lightgray; --color-answer-border: #ddd;
--color-result-top-border: #e8e7e6; --color-answer-font: #000;
--color-result-vim-selected: #f7f7f7;
--color-result-description-highlight-font: #000;
// Link to result /// Results Colors
--color-result-link-font: #084999; --color-result-shadow: #ccc;
--color-result-link-font-highlight: #084999; --color-result-border: #ddd;
--color-result-link-visited-font: var(--color-url-visited-font);
// Url to result
--color-result-url-font: #000; --color-result-url-font: #000;
--color-result-vim-selected: #f7f7f7;
// Search-URL --color-result-vim-arrow: #000bbb;
--color-result-search-url-border: #888; --color-result-description-highlight-font: #000;
--color-result-search-url-font: #444; --color-result-link-font: #000bbb;
--color-result-link-font-highlight: #000bbb;
// Publish Date --color-result-link-visited-font: #80b;
--color-result-publishdate-font: #777; --color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-search-url-border: #ddd;
--color-result-search-url-font: #000;
// Images // Images Colors
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6); --color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff; --color-result-image-span-font: #fff;
--color-result-image-background: #084999; --color-result-image-background: #000bbb;
/// Settings /// Settings Colors
--color-settings-tr-hover: #ececec; --color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: darken(#dcdcdc, 30%); --color-settings-engine-description-font: darken(#dcdcdc, 30%);
/// Other /// Toolkit Colors
--color-engines-font: #888;
/// From Toolkit
--color-toolkit-badge-font: #fff; --color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777; --color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #fff; --color-toolkit-kbd-font: #fff;
--color-toolkit-kbd-background: #000; --color-toolkit-kbd-background: #000;
--color-toolkit-dialog-border: #000; --color-toolkit-dialog-border: #ddd;
--color-toolkit-dialog-background: #fff; --color-toolkit-dialog-background: #fff;
--color-toolkit-tabs-label-border: #fff; --color-toolkit-tabs-label-border: #fff;
--color-toolkit-tabs-section-border: #000; --color-toolkit-tabs-section-border: #ddd;
--color-toolkit-select-border: #ddd; --color-toolkit-select-border: #ddd;
--color-toolkit-checkbox-onoff-background: #dcdcdc; --color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3); --color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #084999; --color-toolkit-checkbox-onoff-label-background: #3050ff;
--color-toolkit-checkbox-onoff-checked-background: #dcdcdc; --color-toolkit-checkbox-onoff-checked-background: #ddd;
--color-toolkit-checkbox-label-background: #fff; --color-toolkit-checkbox-label-background: #fff;
--color-toolkit-checkbox-label-shadow1: #fff; --color-toolkit-checkbox-label-border: #ddd;
--color-toolkit-checkbox-label-shadow2: rgba(0, 0, 0, 0.5); --color-toolkit-checkbox-input-border: #3050ff;
--color-toolkit-checkbox-label-border: #333; --color-toolkit-engine-tooltip-border: #ddd;
--color-toolkit-checkbox-input-border: #084999; --color-toolkit-engine-tooltip-shadow: #ccc;
--color-toolkit-engine-tooltip-background: #fff;
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2); --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
--color-toolkit-engine-tooltip-border: #ddd;
--color-toolkit-engine-tooltip-shadow: rgba(0, 0, 0, 0.1);
--color-toolkit-engine-tooltip-background: #fff;
} }
/// General Size /// General Size

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

@ -5,8 +5,8 @@
#search { #search {
padding: 0 2em 0 @results-offset; padding: 0 2em 0 @results-offset;
margin: 0; margin: 0;
background: var(--color-header-footer-background); background: var(--color-header-background);
border-bottom: 1px solid var(--color-base-border); border-bottom: 1px solid var(--color-header-border);
} }
#search_wrapper { #search_wrapper {
@ -224,7 +224,7 @@
} }
input[type="checkbox"]:focus + label { input[type="checkbox"]:focus + label {
box-shadow: 0 0 8px var(--color-base); box-shadow: 0 0 8px var(--color-categories-item-border-selected);
} }
input[type="checkbox"]:checked + label { input[type="checkbox"]:checked + label {

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

@ -40,6 +40,7 @@ html {
.text-size-adjust; .text-size-adjust;
color: var(--color-base-font); color: var(--color-base-font);
background-color: var(--color-base-background);
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
@ -76,8 +77,8 @@ footer {
padding: 1rem 0; padding: 1rem 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: var(--color-header-footer-background); background-color: var(--color-footer-background);
border-top: 1px solid var(--color-base-border); border-top: 1px solid var(--color-footer-border);
overflow: hidden; overflow: hidden;
p { p {
@ -132,11 +133,11 @@ article[data-vim-selected]::before {
padding: 2px; padding: 2px;
content: ">"; content: ">";
font-weight: bold; font-weight: bold;
color: var(--color-base); color: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected] { article.result-images[data-vim-selected] {
background: var(--color-base); background: var(--color-result-vim-arrow);
} }
article.result-images[data-vim-selected]::before { article.result-images[data-vim-selected]::before {
@ -256,7 +257,7 @@ article.result-images[data-vim-selected]::before {
.engines { .engines {
float: right; float: right;
color: var(--color-engines-font); color: var(--color-result-engines-font);
span { span {
font-size: smaller; font-size: smaller;
@ -337,28 +338,6 @@ article.result-images[data-vim-selected]::before {
display: none !important; display: none !important;
} }
.torrent_result {
border-left: 10px solid var(--color-result-torrent-border);
padding-left: 3px;
p {
margin: 3px;
font-size: 0.8em;
}
a {
color: var(--color-result-link-font);
&:hover {
text-decoration: underline;
}
&:visited {
color: var(--color-result-link-visited-font);
}
}
}
#results { #results {
margin: 2rem 2rem 0 @results-offset; margin: 2rem 2rem 0 @results-offset;
display: grid; display: grid;
@ -448,8 +427,10 @@ article.result-images[data-vim-selected]::before {
#answers { #answers {
grid-area: answers; grid-area: answers;
border: 1px solid var(--color-base-border); border: 1px solid var(--color-answer-border);
padding: 0.9em; padding: 0.9em;
margin-bottom: @results-margin;
color: var(--color-answer-font);
.rounded-corners; .rounded-corners;
h4 { h4 {
@ -473,10 +454,11 @@ article.result-images[data-vim-selected]::before {
#sidebar { #sidebar {
grid-area: sidebar; grid-area: sidebar;
word-wrap: break-word; word-wrap: break-word;
color: var(--color-sidebar-font);
.infobox { .infobox {
margin: 10px 0 10px; margin: 10px 0 10px;
border: 1px solid var(--color-base-border); border: 1px solid var(--color-sidebar-border);
padding: 0.9em; padding: 0.9em;
font-size: 0.9em; font-size: 0.9em;
.rounded-corners; .rounded-corners;
@ -567,12 +549,12 @@ article.result-images[data-vim-selected]::before {
} }
#backToTop { #backToTop {
border: 1px solid var(--color-base-border); border: 1px solid var(--color-backtotop-border);
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 1em; font-size: 1em;
box-shadow: 0 0 5px var(--color-base-shadow); box-shadow: 0 0 5px var(--color-backtotop-shadow);
background: var(--color-base-background); background: var(--color-backtotop-background);
position: fixed; position: fixed;
bottom: 8rem; bottom: 8rem;
left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em); left: @results-width + @results-offset + (0.5 * @results-gap - 1.2em);
@ -611,6 +593,7 @@ article.result-images[data-vim-selected]::before {
} }
#sidebar { #sidebar {
margin-bottom: @results-margin;
padding: 0; padding: 0;
float: none; float: none;
border: none; border: none;
@ -630,11 +613,6 @@ article.result-images[data-vim-selected]::before {
} }
.result { .result {
border-bottom: 1px solid var(--color-result-top-border);
margin: 0;
padding-top: 8px;
padding-bottom: 6px;
h3 { h3 {
margin: 0 0 1px 0; margin: 0 0 1px 0;
} }
@ -753,9 +731,14 @@ article.result-images[data-vim-selected]::before {
margin: 0 5px 2px 5px; margin: 0 5px 2px 5px;
} }
.infobox {
box-shadow: 0 0 5px var(--color-result-shadow);
}
#corrections, #corrections,
#answers { #answers {
margin: 0 5px 1em 5px; margin: 0 5px 1em 5px;
box-shadow: 0 0 5px var(--color-result-shadow);
} }
#results { #results {
@ -769,12 +752,17 @@ article.result-images[data-vim-selected]::before {
.result { .result {
padding: 8px 10px 6px 10px; padding: 8px 10px 6px 10px;
margin: @results-tablet-offset;
border: 1px solid var(--color-result-border);
box-shadow: 0 0 5px var(--color-result-shadow);
.rounded-corners;
} }
.result-images { .result-images {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: none; border: none;
box-shadow: none;
} }
} }

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

@ -392,8 +392,7 @@ select {
top: 0; top: 0;
left: 0; left: 0;
background: var(--color-toolkit-checkbox-label-background); background: var(--color-toolkit-checkbox-label-background);
border-radius: 4px; .rounded-corners;
box-shadow: inset 0 1px 1px var(--color-toolkit-checkbox-label-shadow1), 0 1px 4px var(--color-toolkit-checkbox-label-shadow2);
&::after { &::after {
content: ''; content: '';
@ -495,12 +494,13 @@ select {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
margin: 0 0 0 2rem; margin: 0 0 0 2rem;
border: 1px solid var(--color-toolkit-engine-tooltip-border); border: 1px solid var(--color-toolkit-engine-tooltip-border);
box-shadow: 2px 2px 2px 0 var(--color-toolkit-engine-tooltip-shadow); box-shadow: 0 0 5px var(--color-toolkit-engine-tooltip-shadow);
background: var(--color-toolkit-engine-tooltip-background); background: var(--color-toolkit-engine-tooltip-background);
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
z-index: 1000000; z-index: 1000000;
text-align: left; text-align: left;
.rounded-corners;
} }
th:hover .engine-tooltip, th:hover .engine-tooltip,