OwlBurst/Ponysearch
1
0
Fork 0
forked from Ponysearch/Ponysearch
Code Pull requests Activity
Ponysearch/searx/static/themes/simple/src/less/definitions.less

241 lines
8.7 KiB
Text
Raw Normal View History

[enh] add simple theme (WIP)
2017-02-12 15:06:01 +01:00
/*
SearXNG: simple theme
2021-10-01 16:33:31 +02:00
* SearXNG, A privacy-respecting, hackable metasearch engine
[enh] add simple theme (WIP)
2017-02-12 15:06:01 +01:00
*
* To change the colors of the site, simple edit this variables
*/
[simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme
2021-10-09 15:46:31 +02:00
/// Light Theme
[mod] simple theme: use :root instead of html to define CSS variables This allows to use the CSS variables in inline svg.
2021-10-30 11:54:31 +02:00
:root {
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
/// Base Colors
--color-base-font: #444;
[fix] simple theme: /preferences: dark theme version for the response time bar charts
2021-10-30 10:01:58 +02:00
--color-base-font-rgb: 68, 68, 68;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
--color-base-background: #fff;
--color-url-font: #29314d;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--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;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
/// Button Colors
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-btn-background: #3050ff;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
--color-btn-font: #fff;
/// Search Input Colors
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-search-border: #bbb;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
--color-search-background: #fff;
--color-search-font: #222;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-search-background-hover: #3050ff;
[theme] convert less vars to css vars in simple theme
2021-09-28 22:41:56 +02:00
/// 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%);
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
/// Categories Colors
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-categories-item-selected-font: #3050ff;
--color-categories-item-border-selected: #3050ff;
/// Autocomplete Colors
--color-autocomplete-font: #000;
--color-autocomplete-border: #bbb;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
--color-autocomplete-background: #fff;
--color-autocomplete-background-hover: #f7f7f7;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
/// Answer Colors
[theme] simple - improve rendering of the "Answers" box Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-01 17:20:52 +01:00
--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:
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
/// Results Colors
--color-result-shadow: #ccc;
--color-result-border: #ddd;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
--color-result-url-font: #000;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--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;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
--color-result-publishdate-font: #777;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-result-engines-font: #777;
--color-result-search-url-border: #ddd;
--color-result-search-url-font: #000;
// Images Colors
[theme] convert less vars to css vars in simple theme
2021-09-28 22:41:56 +02:00
--color-result-image-span-background-hover: rgba(0, 0, 0, 0.6);
--color-result-image-span-font: #fff;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-result-image-background: #000bbb;
/// Settings Colors
--color-settings-tr-hover: #f7f7f7;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
[enh] simple theme: image detail 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.
2021-10-02 11:57:08 +02:00
/// 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);
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
/// Toolkit Colors
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--color-toolkit-badge-font: #fff;
--color-toolkit-badge-background: #777;
--color-toolkit-kbd-font: #fff;
--color-toolkit-kbd-background: #000;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-toolkit-dialog-border: #ddd;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--color-toolkit-dialog-background: #fff;
--color-toolkit-tabs-label-border: #fff;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-toolkit-tabs-section-border: #ddd;
Redo Color Theme and css cleanup * remove vars and add elements to base and btn vars * change default border radius to 10px and padding to 0.7em * put border radius and padding on search input form, infoxbox and buttons * remove unused .help class in #categories_container * remove active background from tabs to straemline design * redo search form: 10px padding * 2rem margin on search results on desktop * fix modal pacement of engine reliability in prefs * use darker accent colors * streamline autocomplete with more padding and a hover effect
2021-10-06 20:12:51 +02:00
--color-toolkit-select-border: #ddd;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-toolkit-checkbox-onoff-background: #ddd;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--color-toolkit-checkbox-onoff-label-shadow: rgba(0, 0, 0, 0.3);
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-toolkit-checkbox-onoff-label-background: #3050ff;
--color-toolkit-checkbox-onoff-checked-background: #ddd;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--color-toolkit-checkbox-label-background: #fff;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-toolkit-checkbox-label-border: #ddd;
--color-toolkit-checkbox-input-border: #3050ff;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--color-toolkit-engine-tooltip-border: #ddd;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-toolkit-engine-tooltip-shadow: #ccc;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--color-toolkit-engine-tooltip-background: #fff;
[simple theme] new color theme and result on mobile and tablet * clean up vars in defenition * results look now the same on mobile and desktop * reworked results on mobile * new color theme with more vibrant colors
2021-10-08 16:06:48 +02:00
--color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
--color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
[theme] convert less vars to css vars in simple theme
2021-09-28 22:41:56 +02:00
}
[simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme
2021-10-09 15:46:31 +02:00
/// Dark Theme (autoswitch based on device pref)
@media (prefers-color-scheme: dark) {
[mod] simple theme: use :root instead of html to define CSS variables This allows to use the CSS variables in inline svg.
2021-10-30 11:54:31 +02:00
:root {
[simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme
2021-10-09 15:46:31 +02:00
/// Base Colors
--color-base-font: #bbb;
[fix] simple theme: /preferences: dark theme version for the response time bar charts
2021-10-30 10:01:58 +02:00
--color-base-font-rgb: 187, 187, 187;
[simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme
2021-10-09 15:46:31 +02:00
--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
[theme] simple - improve rendering of the "Answers" box Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-01 17:20:52 +01:00
--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:
[simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme
2021-10-09 15:46:31 +02:00
/// 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;
[enh] simple theme: image detail 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.
2021-10-02 11:57:08 +02:00
/// 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);
[simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme
2021-10-09 15:46:31 +02:00
// 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;
[enh] simple theme: image detail 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.
2021-10-02 11:57:08 +02:00
--color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
--color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
[simple theme] add a dark theme * add a new color theme for a dark mode * make the device auto switch between dark and light theme
2021-10-09 15:46:31 +02:00
}
}
[theme] convert less vars to css vars in simple theme
2021-09-28 22:41:56 +02:00
/// General Size
[fix] several issues in the simple theme - using more rem in style and definitions - mobile width in preferences.less fix max-width: 75em to 80em (normalized with style.less and other) - do not display #backToTop position on tablet (when max-width: 80em) - fix answer box on mobile (when max-width: 50em)
2021-09-26 13:01:22 +02:00
@results-width: 45rem;
[theme] optimize switching between different device types
2021-09-25 17:44:54 +02:00
@results-offset: 10rem;
[theme] cleanup grid layout and remove various margins and paddings from elements
2021-09-25 15:59:10 +02:00
@results-tablet-offset: 0.5rem;
[fix] several issues in the simple theme - using more rem in style and definitions - mobile width in preferences.less fix max-width: 75em to 80em (normalized with style.less and other) - do not display #backToTop position on tablet (when max-width: 80em) - fix answer box on mobile (when max-width: 50em)
2021-09-26 13:01:22 +02:00
@results-gap: 5rem;
[simple theme] selection ui with border * remove vim arrow * add 1rem padding to results * add 0.2rem left border to vim selected article * set column gap to 1.2rem and make search bar in line with results * put 10px border-radius selected article * result article: 0.125rem margin on tablet and esktop; 1rem margin on phone
2021-10-29 18:57:36 +02:00
@results-margin: 0.125rem;
@result-padding: 1rem;
[fix] several issues in the simple theme - using more rem in style and definitions - mobile width in preferences.less fix max-width: 75em to 80em (normalized with style.less and other) - do not display #backToTop position on tablet (when max-width: 80em) - fix answer box on mobile (when max-width: 50em)
2021-09-26 13:01:22 +02:00
@search-width: 40rem;
[mod] simple theme: adjust margins * index page: margin top is 24% of the view port. avoid to scroll a small screen, center the content in the middle of the screen * link to preferences at the same height same the input fields * increase the category tab heighs * increase the margin bottom of the query field * in the results, change the h3 margin top and bottom to 0.4rem (6px) * move the back to top button slightly on the right when the results are only images
2021-10-28 16:14:34 +02:00
// heigh of #search, see detail.less
@search-height: 7.5rem;
[enh] add simple theme (WIP)
2017-02-12 15:06:01 +01:00
[simple theme] define device width with less vars in defenition.less
2021-10-18 21:57:32 +02:00
/// Device Size
/// @desktop > @tablet
@tablet: 80em;
@phone: 50em;
@small-phone: 35em;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
/// From style.less
@stacked-bar-chart: rgb(0, 0, 0);
[enh] add simple theme (WIP)
2017-02-12 15:06:01 +01:00
/// 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";
[fix] simple theme: /preferences: dark theme version for select widgets It is not possible to use CSS variable in a SVG when this is in a background. This commit adds two .svg files, less converts them into data URL. The two files are indentical except the fill color.
2021-10-30 11:51:52 +02:00
// decoration of the select HTML elements
@select-light-svg-path: "../svg/select-light.svg";
@select-dark-svg-path: "../svg/select-dark.svg";
Copy permalink