mirror of
https://github.com/searxng/searxng
synced 2024-01-01 19:24:07 +01:00
8ffbaa086a
The previous value was 80em (1280px). Some desktop screens have this resolution, and tablet layout takes too much space in this configuration This PR switch to the table layout for screen width strictly below 1280px. Close https://github.com/searxng/searxng/issues/874
264 lines
9.3 KiB
Text
264 lines
9.3 KiB
Text
/*
|
|
* SearXNG, A privacy-respecting, hackable metasearch engine
|
|
*
|
|
* To change the colors of the site, simple edit this variables
|
|
*/
|
|
|
|
/// Light Theme
|
|
:root {
|
|
/// Base Colors
|
|
--color-base-font: #444;
|
|
--color-base-font-rgb: 68, 68, 68;
|
|
--color-base-background: #fff;
|
|
--color-url-font: #29314d;
|
|
--color-url-visited-font: #80b;
|
|
/// 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-font: #444;
|
|
--color-backtotop-border: #ddd;
|
|
--color-backtotop-background: #fff;
|
|
/// Button Colors
|
|
--color-btn-background: #3050ff;
|
|
--color-btn-font: #fff;
|
|
--color-show-btn-background: #bbb;
|
|
--color-show-btn-font: #222;
|
|
/// Search Input Colors
|
|
--color-search-border: #bbb;
|
|
--color-search-background: #fff;
|
|
--color-search-font: #222;
|
|
--color-search-background-hover: #3050ff;
|
|
/// Modal Colors
|
|
--color-error: #db3434;
|
|
--color-error-background: lighten(#db3434, 40%);
|
|
--color-warning: #dbba34;
|
|
--color-warning-background: lighten(#dbba34, 40%);
|
|
--color-success: #42db34;
|
|
--color-success-background: lighten(#42db34, 40%);
|
|
/// Categories Colors
|
|
--color-categories-item-selected-font: #3050ff;
|
|
--color-categories-item-border-selected: #3050ff;
|
|
/// Autocomplete Colors
|
|
--color-autocomplete-font: #000;
|
|
--color-autocomplete-border: #bbb;
|
|
--color-autocomplete-background: #fff;
|
|
--color-autocomplete-background-hover: #f7f7f7;
|
|
/// 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:
|
|
/// Results Colors
|
|
--color-result-border: #ddd;
|
|
--color-result-url-font: #000;
|
|
--color-result-vim-selected: #f7f7f7;
|
|
--color-result-vim-arrow: #000bbb;
|
|
--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-publishdate-font: #777;
|
|
--color-result-engines-font: #777;
|
|
--color-result-search-url-border: #ddd;
|
|
--color-result-search-url-font: #000;
|
|
// Images Colors
|
|
--color-result-image-span-font: #444;
|
|
--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-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-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-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-border: #ddd;
|
|
--color-toolkit-select-background-hover: #bbb;
|
|
--color-toolkit-input-text-font: #222;
|
|
--color-toolkit-checkbox-onoff-off-background: #ddd;
|
|
--color-toolkit-checkbox-onoff-on-background: #ddd;
|
|
--color-toolkit-checkbox-onoff-on-mark-background: #3050ff;
|
|
--color-toolkit-checkbox-onoff-on-mark-color: #fff;
|
|
--color-toolkit-checkbox-onoff-off-mark-background: #aaa;
|
|
--color-toolkit-checkbox-onoff-off-mark-color: #fff;
|
|
--color-toolkit-checkbox-label-background: #ddd;
|
|
--color-toolkit-checkbox-label-border: #ddd;
|
|
--color-toolkit-checkbox-input-border: #3050ff;
|
|
--color-toolkit-engine-tooltip-border: #ddd;
|
|
--color-toolkit-engine-tooltip-background: #fff;
|
|
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
|
|
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
.dark-themes() {
|
|
/// Base Colors
|
|
--color-base-font: #bbb;
|
|
--color-base-font-rgb: 187, 187, 187;
|
|
--color-base-background: #222;
|
|
--color-url-font: #8af;
|
|
--color-url-visited-font: #96b;
|
|
/// Header Colors
|
|
--color-header-background: #181818;
|
|
--color-header-border: #333;
|
|
/// Footer Colors
|
|
--color-footer-background: #181818;
|
|
--color-footer-border: #333;
|
|
/// Sidebar Colors
|
|
--color-sidebar-border: #555;
|
|
--color-sidebar-font: #fff;
|
|
/// BackToTop Colors
|
|
--color-backtotop-font: #bbb;
|
|
--color-backtotop-border: #333;
|
|
--color-backtotop-background: #181818;
|
|
/// Button Colors
|
|
--color-btn-background: #58f;
|
|
--color-btn-font: #222;
|
|
--color-show-btn-background: #555;
|
|
--color-show-btn-font: #bbb;
|
|
/// Search Input Colors
|
|
--color-search-border: #555;
|
|
--color-search-background: #222;
|
|
--color-search-font: #fff;
|
|
--color-search-background-hover: #58f;
|
|
/// Modal Colors
|
|
--color-error: #f55b5b;
|
|
--color-error-background: darken(#db3434, 40%);
|
|
--color-warning: #f1d561;
|
|
--color-warning-background: darken(#dbba34, 40%);
|
|
--color-success: #79f56e;
|
|
--color-success-background: darken(#42db34, 40%);
|
|
/// Categories Colors
|
|
--color-categories-item-selected-font: #58f;
|
|
--color-categories-item-border-selected: #58f;
|
|
/// Autocomplete Colors
|
|
--color-autocomplete-font: #fff;
|
|
--color-autocomplete-border: #555;
|
|
--color-autocomplete-background: #222;
|
|
--color-autocomplete-background-hover: #181818;
|
|
/// 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:
|
|
/// Results Colors
|
|
--color-result-border: #333;
|
|
--color-result-url-font: #fff;
|
|
--color-result-vim-selected: #181818;
|
|
--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-publishdate-font: #888;
|
|
--color-result-engines-font: #888;
|
|
--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: #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);
|
|
// Images Colors
|
|
--color-result-image-span-font: #bbb;
|
|
--color-result-image-span-font-selected: #222;
|
|
--color-result-image-background: #222;
|
|
/// Settings Colors
|
|
--color-settings-tr-hover: #2d2d2d;
|
|
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
|
--color-settings-engine-group-background: #1a1919;
|
|
/// Toolkit Colors
|
|
--color-toolkit-badge-font: #fff;
|
|
--color-toolkit-badge-background: #777;
|
|
--color-toolkit-kbd-font: #000;
|
|
--color-toolkit-kbd-background: #fff;
|
|
--color-toolkit-dialog-border: #555;
|
|
--color-toolkit-dialog-background: #222;
|
|
--color-toolkit-tabs-label-border: #222;
|
|
--color-toolkit-tabs-section-border: #555;
|
|
--color-toolkit-select-background: #3c3b31;
|
|
--color-toolkit-select-border: #555;
|
|
--color-toolkit-select-background-hover: #333;
|
|
--color-toolkit-input-text-font: #fff;
|
|
--color-toolkit-checkbox-onoff-off-background: #3c3b31;
|
|
--color-toolkit-checkbox-onoff-on-background: #3c3b31;
|
|
--color-toolkit-checkbox-onoff-on-mark-background: #58f;
|
|
--color-toolkit-checkbox-onoff-on-mark-color: #222;
|
|
--color-toolkit-checkbox-onoff-off-mark-background: #ddd;
|
|
--color-toolkit-checkbox-onoff-off-mark-color: #222;
|
|
--color-toolkit-checkbox-label-background: #222;
|
|
--color-toolkit-checkbox-label-border: #333;
|
|
--color-toolkit-checkbox-input-border: #58f;
|
|
--color-toolkit-engine-tooltip-border: #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);
|
|
}
|
|
|
|
/// Dark Theme (autoswitch based on device pref)
|
|
@media (prefers-color-scheme: dark) {
|
|
:root.theme-auto {
|
|
.dark-themes();
|
|
}
|
|
}
|
|
|
|
// Dark Theme by preferences
|
|
:root.theme-dark {
|
|
.dark-themes();
|
|
}
|
|
|
|
/// General Size
|
|
@results-width: 45rem;
|
|
@results-offset: 10rem;
|
|
@results-tablet-offset: 0.5rem;
|
|
@results-gap: 5rem;
|
|
@results-margin: 0.125rem;
|
|
@result-padding: 1rem;
|
|
@results-image-row-height: 12rem;
|
|
@results-image-row-height-phone: 6rem;
|
|
@search-width: 40rem;
|
|
// heigh of #search, see detail.less
|
|
@search-height: 7.6rem;
|
|
|
|
/// Device Size
|
|
/// @desktop > @tablet
|
|
@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874
|
|
@phone: 50em;
|
|
@small-phone: 35em;
|
|
@ultra-small-phone: 20rem;
|
|
|
|
/// From style.less
|
|
@stacked-bar-chart: rgb(0, 0, 0);
|
|
|
|
/// Load fonts from this directory.
|
|
@icon-font-path: "../../../fonts/";
|
|
//** File name for all font files.
|
|
@icon-font-name: "glyphicons-halflings-regular";
|
|
//** Element ID within SVG icon file.
|
|
@icon-font-svg-id: "glyphicons_halflingsregular";
|
|
|
|
// decoration of the select HTML elements
|
|
@select-light-svg-path: "../svg/select-light.svg";
|
|
@select-dark-svg-path: "../svg/select-dark.svg";
|