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

277 lines
9.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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-base-background-mobile: #f2f5f8;
--color-url-font: #334999;
--color-url-visited-font: #9822c3;
[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
/// Header Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-header-background: #fdfbff;
[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-header-border: #ddd;
/// Footer Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-footer-background: #fdfbff;
[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-footer-border: #ddd;
/// Sidebar Colors
--color-sidebar-border: #ddd;
--color-sidebar-font: #000;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-sidebar-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
/// BackToTop Colors
[mod] simple theme: adjust button colors in dark version. buttons: * previous & next in the result page * save, restore, & back in the preferences * back to top <select> input in Chrom* browsers: * fix the white text with a white background issue
2021-10-30 20:43:40 +02:00
--color-backtotop-font: #444;
[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-backtotop-border: #ddd;
--color-backtotop-background: #fff;
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;
[mod] simple theme: define a '.show-content-button' With LESS function '.show-content-button' all the *Show-Media* links becomes bottons. Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-08 17:45:18 +01:00
--color-show-btn-background: #bbb;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-show-btn-font: #000;
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
/// 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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-autocomplete-background-hover: #e3e3e3;
[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-font: #444; // same as --color-base-font
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-answer-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
/// Results Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-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-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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-link-visited-font: #9822c3;
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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-engines-font: #545454;
[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-search-url-border: #ddd;
--color-result-search-url-font: #000;
// Images Colors
[simple theme] replace Image_layout.js with flexbox CS impl. * drop image_layout.js from simple theme * move image_layout.js to oscar theme and delete common js dir (since its empty now) * align top position of image detail modal with bottom position of search header * use flexbox to display images; row height can be set via @results-image-row-height in defenitions.less * display span title underneath each image with a max width of 12rem * increase margin and padding around image article on desktop and tablet * make article height smaller on phone layout (height of 6rem) to display more content on current view * remove content from result, if the title and content matches * use a group that cotains the flex image article, if images are mixed with other categories * fix pylint issues in webapp.py * use the default.html result template in unit tests (thanks @return42)
2022-02-21 22:18:48 +01:00
--color-result-image-span-font: #444;
--color-result-image-span-font-selected: #fff;
[fix] simple theme: set img background color to wallpaper's color The *background color* of an transparent image is the color of the color of wallpaper on which all images are shown on. Set variable `--color-result-image-background` and `--color-base-background` to the same value. Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-27 14:37:04 +01:00
--color-result-image-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
/// Settings Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-settings-tr-hover: #ebebeb;
--color-settings-engine-description-font: #545454;
[simple] improve styling of subcategory table headers in preferences
2021-12-27 02:27:48 +01:00
--color-settings-engine-group-background: #0001;
[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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-detail-background: #242424;
[mod] simple theme: dark mode: various fixes
2021-10-31 10:57:06 +01:00
--color-result-detail-hr: #555;
[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-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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-toolkit-badge-background: #545454;
[theme] replace all hardcoded colors by css vars and drop ununsed vars
2021-09-30 18:12:42 +02:00
--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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-toolkit-select-background: #e1e1e1;
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] rework select; add safesearch to search and replace / with › in article url * rework selection UI in pref (fix based on: https://github.com/twelsby/searx/commit/78643e9f43a103c523f112e9f3ce26a5c7bb3a0f) * moved search filters underneath categories * cut params from url and replace / with › * make h3 and url in article bigger * add safe search select to search filter (this will not override settings and only be valid while on result page in a session) * make search form button not overlap each other when js is disabled * 1rem padding around preview image and thumbnail in default article template
2021-11-21 21:38:00 +01:00
--color-toolkit-select-background-hover: #bbb;
[fix] simple theme: /preferences: add tokens field include changes to display input text field in the preferences
2021-11-12 11:38:28 +01:00
--color-toolkit-input-text-font: #222;
[simple] checkboxes can get the focusable Do note that checkboxes in the engine tab are displayed reversed. See: https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313 A checkbox for an engine is checked when the engine is disabled.
2022-02-25 15:46:18 +01:00
--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;
[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;
--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);
[simple] add CSS for /info pages Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-03-12 10:53:08 +01:00
--color-doc-code: #300;
--color-doc-code-background: #fdd;
[theme] convert less vars to css vars in simple theme
2021-09-28 22:41:56 +02:00
}
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
.dark-themes() {
/// Base Colors
--color-base-font: #bbb;
--color-base-font-rgb: 187, 187, 187;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-base-background: #222428;
--color-base-background-mobile: #222428;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-url-font: #8af;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-url-visited-font: #c09cd9;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// Header Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-header-background: #1e1e22;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-header-border: #333;
/// Footer Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-footer-background: #1e1e22;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-footer-border: #333;
/// Sidebar Colors
--color-sidebar-border: #555;
--color-sidebar-font: #fff;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-sidebar-background: #292c34;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// BackToTop Colors
--color-backtotop-font: #bbb;
--color-backtotop-border: #333;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-backtotop-background: #2b2e36;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// Button Colors
--color-btn-background: #58f;
--color-btn-font: #222;
[mod] simple theme: define a '.show-content-button' With LESS function '.show-content-button' all the *Show-Media* links becomes bottons. Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-02-08 17:45:18 +01:00
--color-show-btn-background: #555;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-show-btn-font: #fff;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// Search Input Colors
--color-search-border: #555;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-search-shadow: 0 2px 8px rgb(34 38 46 / 25%);
--color-search-background: #2b2e36;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-autocomplete-shadow: 0 2px 8px rgb(34 38 46 / 25%);
--color-autocomplete-background: #2b2e36;
--color-autocomplete-background-hover: #1e1e22;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// Answer Colors
--color-answer-font: #bbb; // same as --color-base-font
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-answer-background: #26292f;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// Results Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-background: #26292f;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-result-border: #333;
--color-result-url-font: #fff;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-vim-selected: #1f1f23cc;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-result-vim-arrow: #8af;
--color-result-description-highlight-font: #fff;
--color-result-link-font: #8af;
--color-result-link-font-highlight: #8af;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-link-visited-font: #c09cd9;
[simple theme] rework select; add safesearch to search and replace / with › in article url * rework selection UI in pref (fix based on: https://github.com/twelsby/searx/commit/78643e9f43a103c523f112e9f3ce26a5c7bb3a0f) * moved search filters underneath categories * cut params from url and replace / with › * make h3 and url in article bigger * add safe search select to search filter (this will not override settings and only be valid while on result page in a session) * make search form button not overlap each other when js is disabled * 1rem padding around preview image and thumbnail in default article template
2021-11-21 21:38:00 +01:00
--color-result-publishdate-font: #888;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-engines-font: #a4a4a4;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--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;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-result-detail-background: #1a1a1c;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--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
[simple theme] replace Image_layout.js with flexbox CS impl. * drop image_layout.js from simple theme * move image_layout.js to oscar theme and delete common js dir (since its empty now) * align top position of image detail modal with bottom position of search header * use flexbox to display images; row height can be set via @results-image-row-height in defenitions.less * display span title underneath each image with a max width of 12rem * increase margin and padding around image article on desktop and tablet * make article height smaller on phone layout (height of 6rem) to display more content on current view * remove content from result, if the title and content matches * use a group that cotains the flex image article, if images are mixed with other categories * fix pylint issues in webapp.py * use the default.html result template in unit tests (thanks @return42)
2022-02-21 22:18:48 +01:00
--color-result-image-span-font: #bbb;
--color-result-image-span-font-selected: #222;
[fix] simple theme: set img background color to wallpaper's color The *background color* of an transparent image is the color of the color of wallpaper on which all images are shown on. Set variable `--color-result-image-background` and `--color-base-background` to the same value. Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2021-11-27 14:37:04 +01:00
--color-result-image-background: #222;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// Settings Colors
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-settings-tr-hover: #2c2c32;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-settings-engine-description-font: darken(#dcdcdc, 30%);
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-settings-engine-group-background: #1b1b21;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
/// Toolkit Colors
--color-toolkit-badge-font: #fff;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-toolkit-badge-background: #555;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-toolkit-kbd-font: #000;
--color-toolkit-kbd-background: #fff;
--color-toolkit-dialog-border: #555;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-toolkit-dialog-background: #1e1e22;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-toolkit-tabs-label-border: #222;
--color-toolkit-tabs-section-border: #555;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-toolkit-select-background: #313338;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-toolkit-select-border: #555;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-toolkit-select-background-hover: #373b49;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--color-toolkit-input-text-font: #fff;
[mod] simple theme: colors, autocomplete, border * change colors, autocomplete, delete border in some places
2022-03-30 17:09:40 +02:00
--color-toolkit-checkbox-onoff-off-background: #313338;
--color-toolkit-checkbox-onoff-on-background: #313338;
[simple] checkboxes can get the focusable Do note that checkboxes in the engine tab are displayed reversed. See: https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313 A checkbox for an engine is checked when the engine is disabled.
2022-02-25 15:46:18 +01:00
--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;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
--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);
[simple] add CSS for /info pages Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
2022-03-12 10:53:08 +01:00
--color-doc-code: #fdd;
--color-doc-code-background: #300;
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01: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) {
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
:root.theme-auto {
.dark-themes();
[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
}
}
[enh] simple theme: add "simple-style" preferences
2021-11-19 13:49:16 +01:00
// Dark Theme by preferences
:root.theme-dark {
.dark-themes();
}
[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;
[simple theme] replace Image_layout.js with flexbox CS impl. * drop image_layout.js from simple theme * move image_layout.js to oscar theme and delete common js dir (since its empty now) * align top position of image detail modal with bottom position of search header * use flexbox to display images; row height can be set via @results-image-row-height in defenitions.less * display span title underneath each image with a max width of 12rem * increase margin and padding around image article on desktop and tablet * make article height smaller on phone layout (height of 6rem) to display more content on current view * remove content from result, if the title and content matches * use a group that cotains the flex image article, if images are mixed with other categories * fix pylint issues in webapp.py * use the default.html result template in unit tests (thanks @return42)
2022-02-21 22:18:48 +01:00
@results-image-row-height: 12rem;
@results-image-row-height-phone: 6rem;
[simple theme] refactor search form * update search input form params; inspiried by whoogle * remove autofocus from result page input form (JS impl. as well as input param) -> autofocus on landing page still works only on desktop and tablet with JS impl. * update landing page margins on mobile * rework border and radius for search form to 0.8rem and outline * remove positioning from autocomplete JS lib and use CSS impl. * match search box and autocomplete width * rework search form to a google like design on mobile * fix settings icon display withg RTL on mobile on result page when search input is empty
2022-03-09 17:43:58 +01:00
@search-width: 44rem;
[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
[simple theme] replace Image_layout.js with flexbox CS impl. * drop image_layout.js from simple theme * move image_layout.js to oscar theme and delete common js dir (since its empty now) * align top position of image detail modal with bottom position of search header * use flexbox to display images; row height can be set via @results-image-row-height in defenitions.less * display span title underneath each image with a max width of 12rem * increase margin and padding around image article on desktop and tablet * make article height smaller on phone layout (height of 6rem) to display more content on current view * remove content from result, if the title and content matches * use a group that cotains the flex image article, if images are mixed with other categories * fix pylint issues in webapp.py * use the default.html result template in unit tests (thanks @return42)
2022-02-21 22:18:48 +01:00
@search-height: 7.6rem;
[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
[simple] switch to the tablet layout at 79.75em 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
2022-03-04 09:26:02 +01:00
@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874
[simple theme] define device width with less vars in defenition.less
2021-10-18 21:57:32 +02:00
@phone: 50em;
@small-phone: 35em;
[fix] scaling of result page on small screens by @ZetaTom * thanks to https://github.com/ZetaTom for the fix! * set the width of the input#q element to 100% of the 1fr space of the grid layout * change the viewport meta tag to th recommended value (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics) * add a new @ultra-small-phone width of 20rem; when a device is smaller than that the search logo does not get displayed on the result page anymore
2021-11-11 22:26:26 +01:00
@ultra-small-phone: 20rem;
[simple theme] define device width with less vars in defenition.less
2021-10-18 21:57:32 +02:00
[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