forked from Ponysearch/Ponysearch
fd374d6322
When an image is selected, the detail with the full size image is displayed on the right side of the screen (or full screen on tablet and phone). When Javascript is disabled, the thumbnail is a linked to the full size image, as it was before. When the image proxy is enabled, the full size image is also proxied, in consequence this commit increases the bandwidth usage of instances. The detail can be closed by the close button or the Esc key. It is possible to go to the next and previous images using the j and k keys or the button on the top right of the screen.
229 lines
8.1 KiB
Text
229 lines
8.1 KiB
Text
/*
|
|
* SearXNG, A privacy-respecting, hackable metasearch engine
|
|
*
|
|
* To change the colors of the site, simple edit this variables
|
|
*/
|
|
|
|
/// Light Theme
|
|
html {
|
|
/// Base Colors
|
|
--color-base-font: #444;
|
|
--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-border: #ddd;
|
|
--color-backtotop-background: #fff;
|
|
--color-backtotop-shadow: #ccc;
|
|
/// 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;
|
|
--color-answer-font: #000;
|
|
/// Results Colors
|
|
--color-result-shadow: #ccc;
|
|
--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: #333;
|
|
--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-checkbox-onoff-background: #ddd;
|
|
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
|
|
--color-toolkit-checkbox-onoff-label-background: #3050ff;
|
|
--color-toolkit-checkbox-onoff-checked-background: #ddd;
|
|
--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-shadow: #ccc;
|
|
--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) {
|
|
html {
|
|
/// Base Colors
|
|
--color-base-font: #bbb;
|
|
--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: #333;
|
|
--color-sidebar-font: #fff;
|
|
/// BackToTop Colors
|
|
--color-backtotop-border: #333;
|
|
--color-backtotop-background: #181818;
|
|
--color-backtotop-shadow: #444;
|
|
/// Button Colors
|
|
--color-btn-background: #58f;
|
|
--color-btn-font: #fff;
|
|
/// Search Input Colors
|
|
--color-search-border: #444;
|
|
--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: #444;
|
|
--color-autocomplete-background: #222;
|
|
--color-autocomplete-background-hover: #181818;
|
|
/// Answer Colors
|
|
--color-answer-border: #ddd;
|
|
--color-answer-font: #fff;
|
|
/// Results Colors
|
|
--color-result-shadow: #444;
|
|
--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: #333;
|
|
--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-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: #333;
|
|
--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: #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-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
|
|
--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-shadow: #444;
|
|
--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: 2rem;
|
|
@search-width: 40rem;
|
|
|
|
/// Device Size
|
|
/// @desktop > @tablet
|
|
@tablet: 80em;
|
|
@phone: 50em;
|
|
@small-phone: 35em;
|
|
|
|
/// 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";
|