diff --git a/searx/static/themes/oscar/css/logicodev-dark.min.css.map b/searx/static/themes/oscar/css/logicodev-dark.min.css.map index bd8eafd25..e91363dae 100644 Binary files a/searx/static/themes/oscar/css/logicodev-dark.min.css.map and b/searx/static/themes/oscar/css/logicodev-dark.min.css.map differ diff --git a/searx/static/themes/oscar/css/logicodev.min.css.map b/searx/static/themes/oscar/css/logicodev.min.css.map index bb3d8a1d8..9f1d89c34 100644 Binary files a/searx/static/themes/oscar/css/logicodev.min.css.map and b/searx/static/themes/oscar/css/logicodev.min.css.map differ diff --git a/searx/static/themes/oscar/css/pointhi.min.css.map b/searx/static/themes/oscar/css/pointhi.min.css.map index ecdb6b8f2..3e18c4a78 100644 Binary files a/searx/static/themes/oscar/css/pointhi.min.css.map and b/searx/static/themes/oscar/css/pointhi.min.css.map differ diff --git a/searx/static/themes/simple/css/searxng-rtl.css b/searx/static/themes/simple/css/searxng-rtl.css index 6731b5707..f05f46fb2 100644 --- a/searx/static/themes/simple/css/searxng-rtl.css +++ b/searx/static/themes/simple/css/searxng-rtl.css @@ -819,8 +819,9 @@ template { * * To change the colors of the site, simple edit this variables */ -html { +:root { --color-base-font: #444; + --color-base-font-rgb: 68, 68, 68; --color-base-background: #fff; --color-url-font: #29314d; --color-url-visited-font: #80b; @@ -901,8 +902,9 @@ html { --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); } @media (prefers-color-scheme: dark) { - html { + :root { --color-base-font: #bbb; + --color-base-font-rgb: 187, 187, 187; --color-base-background: #222; --color-url-font: #8af; --color-url-visited-font: #96b; @@ -1690,7 +1692,7 @@ select:focus { -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: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; background-position-x: 105%; background-size: 2em; background-origin: content-box; @@ -1700,6 +1702,11 @@ select:focus { select:focus { border-bottom: 1px solid var(--color-search-border); } + @media (prefers-color-scheme: dark) { + select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E"); + } + } } /* -- checkbox-onoff -- */ @supports (border-radius: 50px) { @@ -1882,8 +1889,8 @@ td:hover .engine-tooltip, flex-shrink: 0; flex-grow: 0; flex-basis: unset; - background: #000000; - border: 1px solid rgba(0, 0, 0, 0.9); + background: var(--color-base-font); + border: 1px solid rgba(var(--color-base-font-rgb), 0.9); padding: 0.3rem 0; } .stacked-bar-chart-rate80 { @@ -1892,7 +1899,7 @@ td:hover .engine-tooltip, flex-grow: 0; flex-basis: unset; background: transparent; - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid rgba(var(--color-base-font-rgb), 0.3); padding: 0.3rem 0; } .stacked-bar-chart-rate95 { @@ -1901,7 +1908,7 @@ td:hover .engine-tooltip, flex-grow: 0; flex-basis: unset; background: transparent; - border-bottom: 1px dotted rgba(0, 0, 0, 0.5); + border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5); padding: 0; } .stacked-bar-chart-rate100 { @@ -1910,7 +1917,7 @@ td:hover .engine-tooltip, flex-grow: 0; flex-basis: unset; background: transparent; - border-left: 1px solid rgba(0, 0, 0, 0.9); + border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9); padding: 0.4rem 0; width: 1px; } @@ -2284,16 +2291,23 @@ article.result-images .detail { text-align: center; } #main_preferences table.cookies { - width: auto; + width: 100%; } #main_preferences table.cookies th, #main_preferences table.cookies td { text-align: left; - padding: 0.25em; + font-family: monospace; + font-size: 1rem; + padding: 0.5em; + vertical-align: top; } -#main_preferences table.cookies th:first-child, #main_preferences table.cookies td:first-child { - padding-right: 4em; + word-break: keep-all; + width: 14rem; + padding-right: 1rem; +} +#main_preferences table.cookies td:last-child { + word-break: break-all; } #main_preferences table.cookies > tbody > tr:nth-child(even) > th, #main_preferences table.cookies > tbody > tr:nth-child(even) > td { @@ -2316,7 +2330,6 @@ article.result-images .detail { padding: 0.7em; } #main_preferences .preferences_back a { - display: block; color: var(--color-settings-return-font); } #main_preferences .preferences_back a::first-letter { @@ -2968,7 +2981,7 @@ article.result-images[data-vim-selected] .image_thumbnail { max-width: 100%; max-height: 12em; display: block; - margin: 0; + margin: 0 auto; padding: 0; } #sidebar .infobox dl { diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css b/searx/static/themes/simple/css/searxng-rtl.min.css index e62d29893..e861fb32a 100644 Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css and b/searx/static/themes/simple/css/searxng-rtl.min.css differ diff --git a/searx/static/themes/simple/css/searxng-rtl.min.css.map b/searx/static/themes/simple/css/searxng-rtl.min.css.map index c3136c0e3..202793d1a 100644 Binary files a/searx/static/themes/simple/css/searxng-rtl.min.css.map and b/searx/static/themes/simple/css/searxng-rtl.min.css.map differ diff --git a/searx/static/themes/simple/css/searxng.css b/searx/static/themes/simple/css/searxng.css index 2570463c9..33fd07f43 100644 --- a/searx/static/themes/simple/css/searxng.css +++ b/searx/static/themes/simple/css/searxng.css @@ -819,8 +819,9 @@ template { * * To change the colors of the site, simple edit this variables */ -html { +:root { --color-base-font: #444; + --color-base-font-rgb: 68, 68, 68; --color-base-background: #fff; --color-url-font: #29314d; --color-url-visited-font: #80b; @@ -901,8 +902,9 @@ html { --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0); } @media (prefers-color-scheme: dark) { - html { + :root { --color-base-font: #bbb; + --color-base-font-rgb: 187, 187, 187; --color-base-background: #222; --color-url-font: #8af; --color-url-visited-font: #96b; @@ -1690,7 +1692,7 @@ select:focus { -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: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; background-position-x: 105%; background-size: 2em; background-origin: content-box; @@ -1700,6 +1702,11 @@ select:focus { select:focus { border-bottom: 1px solid var(--color-search-border); } + @media (prefers-color-scheme: dark) { + select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%3Cg%3E%3Cpolygon%20fill%3D%22%23ddd%22%20points%3D%22128%2C192%20256%2C320%20384%2C192%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E"); + } + } } /* -- checkbox-onoff -- */ @supports (border-radius: 50px) { @@ -1882,8 +1889,8 @@ td:hover .engine-tooltip, flex-shrink: 0; flex-grow: 0; flex-basis: unset; - background: #000000; - border: 1px solid rgba(0, 0, 0, 0.9); + background: var(--color-base-font); + border: 1px solid rgba(var(--color-base-font-rgb), 0.9); padding: 0.3rem 0; } .stacked-bar-chart-rate80 { @@ -1892,7 +1899,7 @@ td:hover .engine-tooltip, flex-grow: 0; flex-basis: unset; background: transparent; - border: 1px solid rgba(0, 0, 0, 0.3); + border: 1px solid rgba(var(--color-base-font-rgb), 0.3); padding: 0.3rem 0; } .stacked-bar-chart-rate95 { @@ -1901,7 +1908,7 @@ td:hover .engine-tooltip, flex-grow: 0; flex-basis: unset; background: transparent; - border-bottom: 1px dotted rgba(0, 0, 0, 0.5); + border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5); padding: 0; } .stacked-bar-chart-rate100 { @@ -1910,7 +1917,7 @@ td:hover .engine-tooltip, flex-grow: 0; flex-basis: unset; background: transparent; - border-left: 1px solid rgba(0, 0, 0, 0.9); + border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9); padding: 0.4rem 0; width: 1px; } @@ -2284,16 +2291,23 @@ article.result-images .detail { text-align: center; } #main_preferences table.cookies { - width: auto; + width: 100%; } #main_preferences table.cookies th, #main_preferences table.cookies td { text-align: left; - padding: 0.25em; + font-family: monospace; + font-size: 1rem; + padding: 0.5em; + vertical-align: top; } -#main_preferences table.cookies th:first-child, #main_preferences table.cookies td:first-child { - padding-right: 4em; + word-break: keep-all; + width: 14rem; + padding-right: 1rem; +} +#main_preferences table.cookies td:last-child { + word-break: break-all; } #main_preferences table.cookies > tbody > tr:nth-child(even) > th, #main_preferences table.cookies > tbody > tr:nth-child(even) > td { @@ -2316,7 +2330,6 @@ article.result-images .detail { padding: 0.7em; } #main_preferences .preferences_back a { - display: block; color: var(--color-settings-return-font); } #main_preferences .preferences_back a::first-letter { @@ -2968,7 +2981,7 @@ article.result-images[data-vim-selected] .image_thumbnail { max-width: 100%; max-height: 12em; display: block; - margin: 0; + margin: 0 auto; padding: 0; } #sidebar .infobox dl { diff --git a/searx/static/themes/simple/css/searxng.min.css b/searx/static/themes/simple/css/searxng.min.css index 5ccacbeca..2c8b483b4 100644 Binary files a/searx/static/themes/simple/css/searxng.min.css and b/searx/static/themes/simple/css/searxng.min.css differ diff --git a/searx/static/themes/simple/css/searxng.min.css.map b/searx/static/themes/simple/css/searxng.min.css.map index b1145d0ca..d0c2366b7 100644 Binary files a/searx/static/themes/simple/css/searxng.min.css.map and b/searx/static/themes/simple/css/searxng.min.css.map differ diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 9df9019f2..d2e91f1c3 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -5,9 +5,10 @@ */ /// Light Theme -html { +: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; @@ -105,9 +106,10 @@ html { /// Dark Theme (autoswitch based on device pref) @media (prefers-color-scheme: dark) { - html { + :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; @@ -230,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/preferences.less b/searx/static/themes/simple/src/less/preferences.less index 70edc3c8f..e0e3dec4b 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -52,17 +52,25 @@ } table.cookies { - width: auto; + width: 100%; th, td { text-align: left; - padding: 0.25em; + font-family: monospace; + font-size: 1rem; + padding: 0.5em; + vertical-align: top; } - th:first-child, td:first-child { - padding-right: 4em; + word-break: keep-all; + width: 14rem; + padding-right: 1rem; + } + + td:last-child { + word-break: break-all; } & > tbody > tr:nth-child(even) > th, @@ -88,7 +96,6 @@ padding: 0.7em; a { - display: block; color: var(--color-settings-return-font); } diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less index a27d8a3e3..79c200dc8 100644 --- a/searx/static/themes/simple/src/less/style.less +++ b/searx/static/themes/simple/src/less/style.less @@ -468,7 +468,7 @@ article.result-images[data-vim-selected] { max-width: 100%; max-height: 12em; display: block; - margin: 0; + margin: 0 auto; padding: 0; } diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 524cc93d1..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 -- */ @@ -541,8 +547,8 @@ td:hover .engine-tooltip, .stacked-bar-chart-median { .stacked-bar-chart-base(); - background: @stacked-bar-chart; - border: 1px solid fade(@stacked-bar-chart, 90%); + background: var(--color-base-font); + border: 1px solid rgba(var(--color-base-font-rgb), 0.9); padding: 0.3rem 0; } @@ -550,7 +556,7 @@ td:hover .engine-tooltip, .stacked-bar-chart-base(); background: transparent; - border: 1px solid fade(@stacked-bar-chart, 30%); + border: 1px solid rgba(var(--color-base-font-rgb), 0.3); padding: 0.3rem 0; } @@ -558,7 +564,7 @@ td:hover .engine-tooltip, .stacked-bar-chart-base(); background: transparent; - border-bottom: 1px dotted fade(@stacked-bar-chart, 50%); + border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5); padding: 0; } @@ -566,7 +572,7 @@ td:hover .engine-tooltip, .stacked-bar-chart-base(); background: transparent; - border-left: 1px solid fade(@stacked-bar-chart, 90%); + border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9); padding: 0.4rem 0; width: 1px; } 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 Binary files /dev/null and b/searx/static/themes/simple/src/svg/select-dark.svg differ 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 Binary files /dev/null and b/searx/static/themes/simple/src/svg/select-light.svg differ