mirror of
https://github.com/searxng/searxng.git
synced 2024-09-27 14:00:11 +00:00
48d2dcbb20
when on the top of the page, the image is just below the search fields. this commit slightly aligh the top of the image detail with the bottom of the search fields.
243 lines
8.7 KiB
Text
243 lines
8.7 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;
|
|
/// 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-background-hover: rgba(0, 0, 0, 0.6);
|
|
--color-result-image-span-font: #fff;
|
|
--color-result-image-background: #000bbb;
|
|
/// Settings Colors
|
|
--color-settings-tr-hover: #f7f7f7;
|
|
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
|
/// 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-border: #ddd;
|
|
--color-toolkit-select-border-hover: #bbb;
|
|
--color-toolkit-input-text-font: #222;
|
|
--color-toolkit-input-text-border: #ddd;
|
|
--color-toolkit-input-text-border-hover: #bbb;
|
|
--color-toolkit-checkbox-onoff-background: #ddd;
|
|
--color-toolkit-checkbox-onoff-label-background: #3050ff;
|
|
--color-toolkit-checkbox-onoff-checked-background: #aaa;
|
|
--color-toolkit-checkbox-label-background: #fff;
|
|
--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 Theme (autoswitch based on device pref)
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/// 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;
|
|
/// 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: #777;
|
|
--color-result-engines-font: #777;
|
|
--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-background-hover: rgba(0, 0, 0, 0.6);
|
|
--color-result-image-span-font: #fff;
|
|
--color-result-image-background: #8af;
|
|
/// Settings Colors
|
|
--color-settings-tr-hover: #2d2d2d;
|
|
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
|
|
/// 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-border: #555;
|
|
--color-toolkit-select-border-hover: #777;
|
|
--color-toolkit-input-text-font: #fff;
|
|
--color-toolkit-input-text-border: #555;
|
|
--color-toolkit-input-text-border-hover: #777;
|
|
--color-toolkit-checkbox-onoff-background: #3c3b31;
|
|
--color-toolkit-checkbox-onoff-label-background: #58f;
|
|
--color-toolkit-checkbox-onoff-checked-background: #ddd;
|
|
--color-toolkit-checkbox-label-background: #fff;
|
|
--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);
|
|
}
|
|
}
|
|
|
|
/// General Size
|
|
@results-width: 45rem;
|
|
@results-offset: 10rem;
|
|
@results-tablet-offset: 0.5rem;
|
|
@results-gap: 5rem;
|
|
@results-margin: 0.125rem;
|
|
@result-padding: 1rem;
|
|
@search-width: 40rem;
|
|
// heigh of #search, see detail.less
|
|
@search-height: 7.75rem;
|
|
|
|
/// Device Size
|
|
/// @desktop > @tablet
|
|
@tablet: 80em;
|
|
@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";
|