jandieman
/
searxng
mirror of https://github.com/searxng/searxng.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #462 from dalf/simple-dark-mode-fixes 

[RFC] Simple theme: fix & improve the dark mode
This commit is contained in:
Alexandre Flament 2021-11-03 09:55:55 +01:00 committed by GitHub
parent 49db7b20d4 8d6c119593
commit 580a55fe86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 98 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
searx/static/themes/oscar/css/logicodev-dark.min.css.map
View File

File diff suppressed because one or more lines are too long

2
searx/static/themes/oscar/css/logicodev.min.css.map
View File

File diff suppressed because one or more lines are too long

46
searx/static/themes/simple/css/searxng-rtl.css
View File

@ -831,6 +831,7 @@ template {
--color-footer-border: #ddd;
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
--color-backtotop-font: #444;
--color-backtotop-border: #ddd;
--color-backtotop-background: #fff;
--color-backtotop-shadow: #ccc;
@ -876,7 +877,7 @@ template {
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-hr: #555;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
@ -889,6 +890,7 @@ template {
--color-toolkit-tabs-label-border: #fff;
--color-toolkit-tabs-section-border: #ddd;
--color-toolkit-select-border: #ddd;
--color-toolkit-select-border-hover: #bbb;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #3050ff;
@ -913,14 +915,15 @@ template {
--color-header-border: #333;
--color-footer-background: #181818;
--color-footer-border: #333;
--color-sidebar-border: #333;
--color-sidebar-border: #555;
--color-sidebar-font: #fff;
--color-backtotop-font: #bbb;
--color-backtotop-border: #333;
--color-backtotop-background: #181818;
--color-backtotop-shadow: #444;
--color-backtotop-shadow: #333;
--color-btn-background: #58f;
--color-btn-font: #fff;
--color-search-border: #444;
--color-btn-font: #222;
--color-search-border: #555;
--color-search-background: #222;
--color-search-font: #fff;
--color-search-background-hover: #58f;
@ -933,13 +936,13 @@ template {
--color-categories-item-selected-font: #58f;
--color-categories-item-border-selected: #58f;
--color-autocomplete-font: #fff;
--color-autocomplete-border: #444;
--color-autocomplete-border: #555;
--color-autocomplete-background: #222;
--color-autocomplete-background-hover: #181818;
--color-answer-border: #333;
--color-answer-font: #bbb;
--color-answer-background: #181818;
--color-result-shadow: #444;
--color-result-shadow: #333;
--color-result-border: #333;
--color-result-url-font: #fff;
--color-result-vim-selected: #181818;
@ -950,19 +953,19 @@ template {
--color-result-link-visited-font: #96b;
--color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-search-url-border: #333;
--color-result-search-url-border: #555;
--color-result-search-url-font: #fff;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-hr: #555;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #8af;
--color-settings-tr-hover: #333;
--color-settings-tr-hover: #2d2d2d;
--color-settings-engine-description-font: #909090;
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
@ -971,9 +974,10 @@ template {
--color-toolkit-dialog-border: #333;
--color-toolkit-dialog-background: #222;
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #333;
--color-toolkit-select-border: #333;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-tabs-section-border: #555;
--color-toolkit-select-border: #555;
--color-toolkit-select-border-hover: #777;
--color-toolkit-checkbox-onoff-background: #3c3b31;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #58f;
--color-toolkit-checkbox-onoff-checked-background: #ddd;
@ -981,7 +985,7 @@ template {
--color-toolkit-checkbox-label-border: #333;
--color-toolkit-checkbox-input-border: #58f;
--color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-shadow: #333;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
@ -1408,7 +1412,7 @@ td {
padding: 0 4px;
}
tr:hover {
background: var(--color-settings-tr-hover);
background: var(--color-settings-tr-hover) !important;
}
div.selectable_url {
display: block;
@ -1702,7 +1706,10 @@ select:focus {
}
select:hover,
select:focus {
border-bottom: 1px solid var(--color-search-border);
border-bottom: 1px solid var(--color-toolkit-select-border-hover);
}
select option {
background-color: var(--color-base-background);
}
@media (prefers-color-scheme: dark) {
select {
@ -2011,6 +2018,7 @@ article.result-images .detail {
left: 60rem;
right: 0;
top: 7.5rem;
transition: top 0.064s ease-in 0s;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
@ -3062,6 +3070,12 @@ article.result-images[data-vim-selected] .image_thumbnail {
margin: 0;
padding: 0.7em;
}
#backToTop a,
#backToTop a:visited,
#backToTop a:hover,
#backToTop a:active {
color: var(--color-backtotop-font);
}
#results.scrolling #backToTop {
opacity: 1;
}

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

46
searx/static/themes/simple/css/searxng.css
View File

@ -831,6 +831,7 @@ template {
--color-footer-border: #ddd;
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
--color-backtotop-font: #444;
--color-backtotop-border: #ddd;
--color-backtotop-background: #fff;
--color-backtotop-shadow: #ccc;
@ -876,7 +877,7 @@ template {
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-hr: #555;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
@ -889,6 +890,7 @@ template {
--color-toolkit-tabs-label-border: #fff;
--color-toolkit-tabs-section-border: #ddd;
--color-toolkit-select-border: #ddd;
--color-toolkit-select-border-hover: #bbb;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #3050ff;
@ -913,14 +915,15 @@ template {
--color-header-border: #333;
--color-footer-background: #181818;
--color-footer-border: #333;
--color-sidebar-border: #333;
--color-sidebar-border: #555;
--color-sidebar-font: #fff;
--color-backtotop-font: #bbb;
--color-backtotop-border: #333;
--color-backtotop-background: #181818;
--color-backtotop-shadow: #444;
--color-backtotop-shadow: #333;
--color-btn-background: #58f;
--color-btn-font: #fff;
--color-search-border: #444;
--color-btn-font: #222;
--color-search-border: #555;
--color-search-background: #222;
--color-search-font: #fff;
--color-search-background-hover: #58f;
@ -933,13 +936,13 @@ template {
--color-categories-item-selected-font: #58f;
--color-categories-item-border-selected: #58f;
--color-autocomplete-font: #fff;
--color-autocomplete-border: #444;
--color-autocomplete-border: #555;
--color-autocomplete-background: #222;
--color-autocomplete-background-hover: #181818;
--color-answer-border: #333;
--color-answer-font: #bbb;
--color-answer-background: #181818;
--color-result-shadow: #444;
--color-result-shadow: #333;
--color-result-border: #333;
--color-result-url-font: #fff;
--color-result-vim-selected: #181818;
@ -950,19 +953,19 @@ template {
--color-result-link-visited-font: #96b;
--color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-search-url-border: #333;
--color-result-search-url-border: #555;
--color-result-search-url-font: #fff;
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-hr: #555;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
--color-result-image-background: #8af;
--color-settings-tr-hover: #333;
--color-settings-tr-hover: #2d2d2d;
--color-settings-engine-description-font: #909090;
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
@ -971,9 +974,10 @@ template {
--color-toolkit-dialog-border: #333;
--color-toolkit-dialog-background: #222;
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #333;
--color-toolkit-select-border: #333;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-tabs-section-border: #555;
--color-toolkit-select-border: #555;
--color-toolkit-select-border-hover: #777;
--color-toolkit-checkbox-onoff-background: #3c3b31;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #58f;
--color-toolkit-checkbox-onoff-checked-background: #ddd;
@ -981,7 +985,7 @@ template {
--color-toolkit-checkbox-label-border: #333;
--color-toolkit-checkbox-input-border: #58f;
--color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-shadow: #333;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
@ -1408,7 +1412,7 @@ td {
padding: 0 4px;
}
tr:hover {
background: var(--color-settings-tr-hover);
background: var(--color-settings-tr-hover) !important;
}
div.selectable_url {
display: block;
@ -1702,7 +1706,10 @@ select:focus {
}
select:hover,
select:focus {
border-bottom: 1px solid var(--color-search-border);
border-bottom: 1px solid var(--color-toolkit-select-border-hover);
}
select option {
background-color: var(--color-base-background);
}
@media (prefers-color-scheme: dark) {
select {
@ -2011,6 +2018,7 @@ article.result-images .detail {
left: 60rem;
right: 0;
top: 7.5rem;
transition: top 0.064s ease-in 0s;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);
@ -3062,6 +3070,12 @@ article.result-images[data-vim-selected] .image_thumbnail {
margin: 0;
padding: 0.7em;
}
#backToTop a,
#backToTop a:visited,
#backToTop a:hover,
#backToTop a:active {
color: var(--color-backtotop-font);
}
#results.scrolling #backToTop {
opacity: 1;
}

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -22,6 +22,7 @@
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
/// BackToTop Colors
--color-backtotop-font: #444;
--color-backtotop-border: #ddd;
--color-backtotop-background: #fff;
--color-backtotop-shadow: #ccc;
@ -77,7 +78,7 @@
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-hr: #555;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
@ -91,6 +92,7 @@
--color-toolkit-tabs-label-border: #fff;
--color-toolkit-tabs-section-border: #ddd;
--color-toolkit-select-border: #ddd;
--color-toolkit-select-border-hover: #bbb;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #3050ff;
@ -121,17 +123,18 @@
--color-footer-background: #181818;
--color-footer-border: #333;
/// Sidebar Colors
--color-sidebar-border: #333;
--color-sidebar-border: #555;
--color-sidebar-font: #fff;
/// BackToTop Colors
--color-backtotop-font: #bbb;
--color-backtotop-border: #333;
--color-backtotop-background: #181818;
--color-backtotop-shadow: #444;
--color-backtotop-shadow: #333;
/// Button Colors
--color-btn-background: #58f;
--color-btn-font: #fff;
--color-btn-font: #222;
/// Search Input Colors
--color-search-border: #444;
--color-search-border: #555;
--color-search-background: #222;
--color-search-font: #fff;
--color-search-background-hover: #58f;
@ -147,7 +150,7 @@
--color-categories-item-border-selected: #58f;
/// Autocomplete Colors
--color-autocomplete-font: #fff;
--color-autocomplete-border: #444;
--color-autocomplete-border: #555;
--color-autocomplete-background: #222;
--color-autocomplete-background-hover: #181818;
/// Answer Colors
@ -155,7 +158,7 @@
--color-answer-font: #bbb; // same as --color-base-font
--color-answer-background: #181818; // same as --color-header-background:
/// Results Colors
--color-result-shadow: #444;
--color-result-shadow: #333;
--color-result-border: #333;
--color-result-url-font: #fff;
--color-result-vim-selected: #181818;
@ -166,13 +169,13 @@
--color-result-link-visited-font: #96b;
--color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-search-url-border: #333;
--color-result-search-url-border: #555;
--color-result-search-url-font: #fff;
/// Detail modal : same as the light version
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-hr: #333;
--color-result-detail-hr: #555;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
--color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
@ -181,7 +184,7 @@
--color-result-image-span-font: #fff;
--color-result-image-background: #8af;
/// Settings Colors
--color-settings-tr-hover: #333;
--color-settings-tr-hover: #2d2d2d;
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
/// Toolkit Colors
--color-toolkit-badge-font: #fff;
@ -191,9 +194,10 @@
--color-toolkit-dialog-border: #333;
--color-toolkit-dialog-background: #222;
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #333;
--color-toolkit-select-border: #333;
--color-toolkit-checkbox-onoff-background: #ddd;
--color-toolkit-tabs-section-border: #555;
--color-toolkit-select-border: #555;
--color-toolkit-select-border-hover: #777;
--color-toolkit-checkbox-onoff-background: #3c3b31;
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
--color-toolkit-checkbox-onoff-label-background: #58f;
--color-toolkit-checkbox-onoff-checked-background: #ddd;
@ -201,7 +205,7 @@
--color-toolkit-checkbox-label-border: #333;
--color-toolkit-checkbox-input-border: #58f;
--color-toolkit-engine-tooltip-border: #333;
--color-toolkit-engine-tooltip-shadow: #444;
--color-toolkit-engine-tooltip-shadow: #333;
--color-toolkit-engine-tooltip-background: #222;
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);

1
searx/static/themes/simple/src/less/detail.less
View File

@ -18,6 +18,7 @@ article.result-images .detail {
left: 60rem;
right: 0;
top: @search-height;
transition: top 0.064s ease-in 0s;
bottom: 0;
background: var(--color-result-detail-background);
border: 1px solid var(--color-result-detail-background);

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

@ -563,6 +563,13 @@ article.result-images[data-vim-selected] {
margin: 0;
padding: 0.7em;
}
a,
a:visited,
a:hover,
a:active {
color: var(--color-backtotop-font);
}
}
#results.scrolling #backToTop {

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

@ -89,7 +89,7 @@ td {
tr {
&:hover {
background: var(--color-settings-tr-hover);
background: var(--color-settings-tr-hover) !important;
}
}
@ -336,7 +336,11 @@ select {
&:hover,
&:focus {
border-bottom: 1px solid var(--color-search-border);
border-bottom: 1px solid var(--color-toolkit-select-border-hover);
}
option {
background-color: var(--color-base-background);
}
}