1
0
mirror of https://github.com/searxng/searxng.git synced 2024-07-07 18:00:13 +02:00

Merge pull request #1026 from MontyQI/themes

Update simple theme
This commit is contained in:
Paul Braeuning 2022-05-10 22:05:26 +02:00 committed by GitHub
commit e869cbed5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 104 additions and 55 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -51,11 +51,12 @@
display: block;
background-color: var(--color-autocomplete-background);
color: var(--color-autocomplete-font);
border: 1px solid var(--color-autocomplete-border);
max-height: 32rem;
overflow-y: auto;
z-index: 100;
margin-top: 3.2rem;
margin-top: 3.5rem;
border-radius: 0.8rem;
box-shadow: 0 2px 8px rgb(34 38 46 / 25%);
&:empty {
display: none;

View File

@ -10,17 +10,19 @@
--color-base-font: #444;
--color-base-font-rgb: 68, 68, 68;
--color-base-background: #fff;
--color-url-font: #29314d;
--color-url-visited-font: #80b;
--color-base-background-mobile: #f2f5f8;
--color-url-font: #334999;
--color-url-visited-font: #9822c3;
/// Header Colors
--color-header-background: #f7f7f7;
--color-header-background: #fdfbff;
--color-header-border: #ddd;
/// Footer Colors
--color-footer-background: #f7f7f7;
--color-footer-background: #fdfbff;
--color-footer-border: #ddd;
/// Sidebar Colors
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
--color-sidebar-background: #fff;
/// BackToTop Colors
--color-backtotop-font: #444;
--color-backtotop-border: #ddd;
@ -29,9 +31,10 @@
--color-btn-background: #3050ff;
--color-btn-font: #fff;
--color-show-btn-background: #bbb;
--color-show-btn-font: #222;
--color-show-btn-font: #000;
/// Search Input Colors
--color-search-border: #bbb;
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
--color-search-background: #fff;
--color-search-font: #222;
--color-search-background-hover: #3050ff;
@ -48,13 +51,14 @@
/// Autocomplete Colors
--color-autocomplete-font: #000;
--color-autocomplete-border: #bbb;
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
--color-autocomplete-background: #fff;
--color-autocomplete-background-hover: #f7f7f7;
--color-autocomplete-background-hover: #e3e3e3;
/// Answer Colors
--color-answer-border: #ddd; // same as --color-header-border
--color-answer-font: #444; // same as --color-base-font
--color-answer-background: #f7f7f7; // same as --color-header-background:
--color-answer-background: #fff;
/// Results Colors
--color-result-background: #fff;
--color-result-border: #ddd;
--color-result-url-font: #000;
--color-result-vim-selected: #f7f7f7;
@ -62,9 +66,9 @@
--color-result-description-highlight-font: #000;
--color-result-link-font: #000bbb;
--color-result-link-font-highlight: #000bbb;
--color-result-link-visited-font: #80b;
--color-result-link-visited-font: #9822c3;
--color-result-publishdate-font: #777;
--color-result-engines-font: #777;
--color-result-engines-font: #545454;
--color-result-search-url-border: #ddd;
--color-result-search-url-font: #000;
// Images Colors
@ -72,27 +76,27 @@
--color-result-image-span-font-selected: #fff;
--color-result-image-background: #fff;
/// Settings Colors
--color-settings-tr-hover: #f7f7f7;
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
--color-settings-tr-hover: #ebebeb;
--color-settings-engine-description-font: #545454;
--color-settings-engine-group-background: #0001;
/// Detail modal
--color-result-detail-font: #fff;
--color-result-detail-label-font: lightgray;
--color-result-detail-background: #000;
--color-result-detail-background: #242424;
--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);
/// Toolkit Colors
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--color-toolkit-badge-background: #545454;
--color-toolkit-kbd-font: #fff;
--color-toolkit-kbd-background: #000;
--color-toolkit-dialog-border: #ddd;
--color-toolkit-dialog-background: #fff;
--color-toolkit-tabs-label-border: #fff;
--color-toolkit-tabs-section-border: #ddd;
--color-toolkit-select-background: #f7f7f7;
--color-toolkit-select-background: #e1e1e1;
--color-toolkit-select-border: #ddd;
--color-toolkit-select-background-hover: #bbb;
--color-toolkit-input-text-font: #222;
@ -117,30 +121,33 @@
/// Base Colors
--color-base-font: #bbb;
--color-base-font-rgb: 187, 187, 187;
--color-base-background: #222;
--color-base-background: #222428;
--color-base-background-mobile: #222428;
--color-url-font: #8af;
--color-url-visited-font: #96b;
--color-url-visited-font: #c09cd9;
/// Header Colors
--color-header-background: #181818;
--color-header-background: #1e1e22;
--color-header-border: #333;
/// Footer Colors
--color-footer-background: #181818;
--color-footer-background: #1e1e22;
--color-footer-border: #333;
/// Sidebar Colors
--color-sidebar-border: #555;
--color-sidebar-font: #fff;
--color-sidebar-background: #292c34;
/// BackToTop Colors
--color-backtotop-font: #bbb;
--color-backtotop-border: #333;
--color-backtotop-background: #181818;
--color-backtotop-background: #2b2e36;
/// Button Colors
--color-btn-background: #58f;
--color-btn-font: #222;
--color-show-btn-background: #555;
--color-show-btn-font: #bbb;
--color-show-btn-font: #fff;
/// Search Input Colors
--color-search-border: #555;
--color-search-background: #222;
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
--color-search-background: #2b2e36;
--color-search-font: #fff;
--color-search-background-hover: #58f;
/// Modal Colors
@ -156,29 +163,30 @@
/// Autocomplete Colors
--color-autocomplete-font: #fff;
--color-autocomplete-border: #555;
--color-autocomplete-background: #222;
--color-autocomplete-background-hover: #181818;
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
--color-autocomplete-background: #2b2e36;
--color-autocomplete-background-hover: #1e1e22;
/// Answer Colors
--color-answer-border: #333; // same as --color-header-border
--color-answer-font: #bbb; // same as --color-base-font
--color-answer-background: #181818; // same as --color-header-background:
--color-answer-background: #26292f;
/// Results Colors
--color-result-background: #26292f;
--color-result-border: #333;
--color-result-url-font: #fff;
--color-result-vim-selected: #181818;
--color-result-vim-selected: #1f1f23cc;
--color-result-vim-arrow: #8af;
--color-result-description-highlight-font: #fff;
--color-result-link-font: #8af;
--color-result-link-font-highlight: #8af;
--color-result-link-visited-font: #96b;
--color-result-link-visited-font: #c09cd9;
--color-result-publishdate-font: #888;
--color-result-engines-font: #888;
--color-result-engines-font: #a4a4a4;
--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-background: #1a1a1c;
--color-result-detail-hr: #555;
--color-result-detail-link: #8af;
--color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
@ -188,24 +196,24 @@
--color-result-image-span-font-selected: #222;
--color-result-image-background: #222;
/// Settings Colors
--color-settings-tr-hover: #2d2d2d;
--color-settings-tr-hover: #2c2c32;
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
--color-settings-engine-group-background: #1a1919;
--color-settings-engine-group-background: #1b1b21;
/// Toolkit Colors
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--color-toolkit-badge-background: #555;
--color-toolkit-kbd-font: #000;
--color-toolkit-kbd-background: #fff;
--color-toolkit-dialog-border: #555;
--color-toolkit-dialog-background: #222;
--color-toolkit-dialog-background: #1e1e22;
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #555;
--color-toolkit-select-background: #3c3b31;
--color-toolkit-select-background: #313338;
--color-toolkit-select-border: #555;
--color-toolkit-select-background-hover: #333;
--color-toolkit-select-background-hover: #373b49;
--color-toolkit-input-text-font: #fff;
--color-toolkit-checkbox-onoff-off-background: #3c3b31;
--color-toolkit-checkbox-onoff-on-background: #3c3b31;
--color-toolkit-checkbox-onoff-off-background: #313338;
--color-toolkit-checkbox-onoff-on-background: #313338;
--color-toolkit-checkbox-onoff-on-mark-background: #58f;
--color-toolkit-checkbox-onoff-on-mark-color: #222;
--color-toolkit-checkbox-onoff-off-mark-background: #ddd;

View File

@ -94,12 +94,12 @@
}
.search_box {
border: 1px solid var(--color-search-border);
border-radius: 0.8rem;
width: @search-width;
display: inline-flex;
flex-direction: row;
white-space: nowrap;
box-shadow: var(--color-search-shadow);
}
#clear_search {
@ -283,7 +283,7 @@ html.no-js #clear_search.hide_if_nojs {
#search_view:focus-within {
display: block;
background-color: var(--color-base-background);
background-color: var(--color-search-background);
position: absolute;
top: 0;
height: 100%;
@ -291,11 +291,10 @@ html.no-js #clear_search.hide_if_nojs {
z-index: 10000;
.search_box {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid var(--color-search-border);
width: 100%;
border-radius: 0;
box-shadow: none;
#send_search {
.ltr-margin-right(0) !important; // Delete when send_search button is disabled on mobile.
@ -304,6 +303,7 @@ html.no-js #clear_search.hide_if_nojs {
* {
border: none;
border-radius: 0;
box-shadow: none;
}
}
}

View File

@ -46,10 +46,26 @@
border-radius: @radius 0 0 @radius;
}
.ltr-rounded-top-left-corners(@radius) {
border-radius: @radius 0 0 0;
}
.ltr-rounded-bottom-left-corners(@radius) {
border-radius: 0 0 0 @radius;
}
.ltr-rounded-right-corners(@radius) {
border-radius: 0 @radius @radius 0;
}
.ltr-rounded-top-right-corners(@radius) {
border-radius: 0 @radius 0 0;
}
.ltr-rounded-bottom-right-corners(@radius) {
border-radius: 0 0 @radius 0;
}
.ltr-text-align-left() {
text-align: left;
}

View File

@ -46,10 +46,26 @@
border-radius: 0 @radius @radius 0;
}
.ltr-rounded-top-left-corners(@radius) {
border-radius: 0 @radius 0 0;
}
.ltr-rounded-bottom-left-corners(@radius) {
border-radius: 0 0 @radius 0;
}
.ltr-rounded-right-corners(@radius) {
border-radius: @radius 0 0 @radius;
}
.ltr-rounded-top-right-corners(@radius) {
border-radius: @radius 0 0 0;
}
.ltr-rounded-bottom-right-corners(@radius) {
border-radius: 0 0 0 @radius;
}
.ltr-text-align-left() {
text-align: right;
}

View File

@ -309,7 +309,7 @@ article[data-vim-selected].category-social {
.category-files,
.category-social {
border: 1px solid var(--color-result-border);
margin: 1rem 0;
margin: 1rem @results-tablet-offset 0 @results-tablet-offset !important;
.rounded-corners;
}
@ -538,7 +538,6 @@ article[data-vim-selected].category-social {
#answers {
grid-area: answers;
border: 1px solid var(--color-answer-border);
background: var(--color-answer-background);
padding: @result-padding;
margin: 1rem 0;
@ -717,7 +716,7 @@ article[data-vim-selected].category-social {
}
#sidebar {
margin-bottom: @results-margin;
margin: 0 @results-tablet-offset @results-margin @results-tablet-offset;
padding: 0;
float: none;
border: none;
@ -832,9 +831,13 @@ article[data-vim-selected].category-social {
}
@media screen and (max-width: @phone) {
html {
background-color: var(--color-base-background-mobile);
}
#main_results div#results {
grid-template-columns: 100%;
margin: 2rem @results-tablet-offset 0 @results-tablet-offset;
margin: 1rem 0 0 0;
}
#linkto_preferences {
@ -862,14 +865,19 @@ article[data-vim-selected].category-social {
}
.result {
border: 1px solid var(--color-result-border);
background: var(--color-result-background);
margin: 1rem 0;
.rounded-corners;
}
.result-images {
margin: 0;
height: @results-image-row-height-phone;
background: var(--color-base-background-mobile);
}
.infobox {
border: none !important;
background-color: var(--color-sidebar-background);
}
}