diff options
| author | Alexandre Flament <alex@al-f.net> | 2021-10-30 11:51:52 +0200 |
|---|---|---|
| committer | Alexandre Flament <alex@al-f.net> | 2021-10-30 22:33:34 +0200 |
| commit | d0a31645145aa34dc41e0f4defcdf8c909b10416 (patch) | |
| tree | 85d4b11136c49452b279731f5f6c60da17c044d5 | |
| parent | 67b0b68b407b6080dd3b9e424eb2cfefbda87e13 (diff) | |
[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.
4 files changed, 19 insertions, 1 deletions
diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 244bd817d..d99cca713 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -232,3 +232,7 @@ html { @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"; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 74cc55f0c..681da43e7 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -328,7 +328,7 @@ select { -moz-appearance: none; border: none; border-bottom: 1px solid var(--color-toolkit-select-border); - background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat; + background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat; background-position-x: 105%; background-size: 2em; background-origin: content-box; @@ -339,6 +339,12 @@ select { border-bottom: 1px solid var(--color-search-border); } } + + @media (prefers-color-scheme: dark) { + select { + background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path); + } + } } /* -- checkbox-onoff -- */ diff --git a/searx/static/themes/simple/src/svg/select-dark.svg b/searx/static/themes/simple/src/svg/select-dark.svg new file mode 100644 index 000000000..97335cea5 --- /dev/null +++ b/searx/static/themes/simple/src/svg/select-dark.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> +<g><polygon fill="#ddd" points="128,192 256,320 384,192"/></g> +</svg>
\ No newline at end of file diff --git a/searx/static/themes/simple/src/svg/select-light.svg b/searx/static/themes/simple/src/svg/select-light.svg new file mode 100644 index 000000000..3b707f018 --- /dev/null +++ b/searx/static/themes/simple/src/svg/select-light.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> +<g><polygon points="128,192 256,320 384,192"/></g> +</svg>
\ No newline at end of file |
