From 9f0b47f525aa2c7b00d8839201843eb05e3594a1 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 30 Oct 2021 10:01:18 +0200 Subject: [fix] simple theme: cookie table doesn't overflow the expected width --- searx/static/themes/simple/src/less/preferences.less | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) (limited to 'searx/static/themes/simple/src') 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); } -- cgit v1.2.3 From 67b0b68b407b6080dd3b9e424eb2cfefbda87e13 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 30 Oct 2021 10:01:58 +0200 Subject: [fix] simple theme: /preferences: dark theme version for the response time bar charts --- searx/static/themes/simple/src/less/definitions.less | 2 ++ searx/static/themes/simple/src/less/toolkit.less | 10 +++++----- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'searx/static/themes/simple/src') diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 9df9019f2..244bd817d 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -8,6 +8,7 @@ html { /// 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; @@ -108,6 +109,7 @@ html { html { /// 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; diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 524cc93d1..74cc55f0c 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -541,8 +541,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 +550,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 +558,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 +566,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; } -- cgit v1.2.3 From d0a31645145aa34dc41e0f4defcdf8c909b10416 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 30 Oct 2021 11:51:52 +0200 Subject: [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. --- searx/static/themes/simple/src/less/definitions.less | 4 ++++ searx/static/themes/simple/src/less/toolkit.less | 8 +++++++- searx/static/themes/simple/src/svg/select-dark.svg | 4 ++++ searx/static/themes/simple/src/svg/select-light.svg | 4 ++++ 4 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 searx/static/themes/simple/src/svg/select-dark.svg create mode 100644 searx/static/themes/simple/src/svg/select-light.svg (limited to 'searx/static/themes/simple/src') 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 @@ + + + + \ 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 @@ + + + + \ No newline at end of file -- cgit v1.2.3 From 60d595ea528cd5c63543a6ed5f4f102c23b33090 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 30 Oct 2021 11:54:31 +0200 Subject: [mod] simple theme: use :root instead of html to define CSS variables This allows to use the CSS variables in inline svg. --- searx/static/themes/simple/src/less/definitions.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'searx/static/themes/simple/src') diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index d99cca713..d2e91f1c3 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -5,7 +5,7 @@ */ /// Light Theme -html { +:root { /// Base Colors --color-base-font: #444; --color-base-font-rgb: 68, 68, 68; @@ -106,7 +106,7 @@ 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; -- cgit v1.2.3 From 540042d0ca47471d047d3c4ae04a0e3e16fbe9d3 Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Sat, 30 Oct 2021 12:05:36 +0200 Subject: [mod] simple theme: infobox: center the image --- searx/static/themes/simple/src/less/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'searx/static/themes/simple/src') 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; } -- cgit v1.2.3