From 3d9e48b84e4d41c7ee5042ad718108bd49bdc07a Mon Sep 17 00:00:00 2001 From: Alexandre Flament Date: Fri, 25 Feb 2022 15:46:18 +0100 Subject: [PATCH] [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. --- .../themes/simple/src/less/animations.less | 4 + .../themes/simple/src/less/definitions.less | 22 ++- .../themes/simple/src/less/preferences.less | 86 +++++---- .../themes/simple/src/less/toolkit.less | 172 +++++++++++------- searx/templates/simple/macros.html | 20 +- searx/templates/simple/preferences.html | 84 ++++----- 6 files changed, 220 insertions(+), 168 deletions(-) diff --git a/searx/static/themes/simple/src/less/animations.less b/searx/static/themes/simple/src/less/animations.less index 750b7d255..75c98308f 100644 --- a/searx/static/themes/simple/src/less/animations.less +++ b/searx/static/themes/simple/src/less/animations.less @@ -13,3 +13,7 @@ } } } + +input.checkbox-onoff[type="checkbox"]::before { + transition: left 0.25s; +} diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less index 7de0d7ef9..804d4423e 100644 --- a/searx/static/themes/simple/src/less/definitions.less +++ b/searx/static/themes/simple/src/less/definitions.less @@ -96,10 +96,13 @@ --color-toolkit-select-border: #ddd; --color-toolkit-select-background-hover: #bbb; --color-toolkit-input-text-font: #222; - --color-toolkit-checkbox-onoff-background: #ddd; - --color-toolkit-checkbox-onoff-label-background: #3050ff; - --color-toolkit-checkbox-onoff-checked-background: #aaa; - --color-toolkit-checkbox-label-background: #fff; + --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; --color-toolkit-checkbox-label-border: #ddd; --color-toolkit-checkbox-input-border: #3050ff; --color-toolkit-engine-tooltip-border: #ddd; @@ -199,10 +202,13 @@ --color-toolkit-select-border: #555; --color-toolkit-select-background-hover: #333; --color-toolkit-input-text-font: #fff; - --color-toolkit-checkbox-onoff-background: #3c3b31; - --color-toolkit-checkbox-onoff-label-background: #58f; - --color-toolkit-checkbox-onoff-checked-background: #ddd; - --color-toolkit-checkbox-label-background: #fff; + --color-toolkit-checkbox-onoff-off-background: #3c3b31; + --color-toolkit-checkbox-onoff-on-background: #3c3b31; + --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; --color-toolkit-checkbox-label-border: #333; --color-toolkit-checkbox-input-border: #58f; --color-toolkit-engine-tooltip-border: #333; diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less index a08b89cf5..9620828b4 100644 --- a/searx/static/themes/simple/src/less/preferences.less +++ b/searx/static/themes/simple/src/less/preferences.less @@ -80,6 +80,55 @@ text-align: center; } + .category { + .ltr-margin-right(0.5rem); + + label { + border: 2px solid transparent; + padding: 0.2rem 0.4rem; + .rounded-corners-tiny; + } + } + + .category input[type="checkbox"]:checked + label { + border: 2px solid var(--color-categories-item-border-selected); + } + + table.table_engines { + td { + height: 3.75rem; + } + + th.name { + /* stylelint-disable */ + label { + cursor: pointer; + } + /* stylelint-enable */ + + .engine-tooltip { + margin-top: 1.8rem; + .ltr-left(calc((100% - 85em) / 2 + 10em)); + max-width: 40rem; + + .engine-description { + margin-top: 0.5rem; + } + } + } + + .engine-group { + .ltr-text-align-left(); + font-weight: normal; + background: var(--color-settings-engine-group-background); + } + + .name, + .shortcut { + .ltr-text-align-left(); + } + } + table.cookies { width: 100%; direction: ltr; @@ -109,25 +158,6 @@ } } - .category { - .ltr-margin-right(0.5rem); - - label { - border: 2px solid transparent; - padding: 0.2rem 0.4rem; - .rounded-corners-tiny; - } - } - - .category input[type="checkbox"]:checked + label { - border: 2px solid var(--color-categories-item-border-selected); - } - - .name, - .shortcut { - .ltr-text-align-left(); - } - .preferences_back { background: none repeat scroll 0 0 var(--color-btn-background); color: var(--color-btn-font); @@ -153,24 +183,6 @@ width: 100%; } } - - th.name { - .engine-tooltip { - margin-top: 1.8rem; - .ltr-left(calc((100% - 85em) / 2 + 10em)); - max-width: 40rem; - - .engine-description { - margin-top: 0.5rem; - } - } - } - - .engine-group { - .ltr-text-align-left(); - font-weight: normal; - background: var(--color-settings-engine-group-background); - } } @media screen and (max-width: @tablet) { diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less index 17fe56801..93fa5e04c 100644 --- a/searx/static/themes/simple/src/less/toolkit.less +++ b/searx/static/themes/simple/src/less/toolkit.less @@ -378,92 +378,126 @@ select { } /* -- checkbox-onoff -- */ -@supports (border-radius: 50px) { - .checkbox-onoff { - display: inline-block; - width: 40px; - height: 10px; - background: var(--color-toolkit-checkbox-onoff-background); - margin: 8px 1rem; - position: relative; - border-radius: 50px; +input.checkbox-onoff[type="checkbox"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + display: inline-block; + width: 2.5em; + height: 0.7em; + box-shadow: none !important; + margin: 0 16px; + border-radius: 10px; + position: relative; - label { - display: block; - width: 20px; - height: 20px; - position: absolute; - top: -5px; - cursor: pointer; - border-radius: 50px; - transition: all 0.4s ease; - left: 27px; - background-color: var(--color-toolkit-checkbox-onoff-label-background); - } + /* focus & hover */ + &:focus, + &:hover { + outline: none; + } - input[type=checkbox] { - visibility: hidden; + &:focus::after { + content: ""; + position: absolute; + width: 3.5em; + height: 1.65em; + border: 1px solid var(--color-btn-background); + border-radius: 12px; + box-shadow: var(--color-btn-background) 0 0 3px; + z-index: 10000; + top: -0.55em; + left: -0.6em; + } - &:checked + label { - left: -5px; - background: var(--color-toolkit-checkbox-onoff-checked-background); - } - } + &::before { + position: absolute; + top: -0.5em; + display: flex; + justify-content: center; + align-items: center; + font-size: 0.75em; + width: 1.875em; + height: 1.875em; + border-radius: 50%; + } +} + +/* check mark +reversed-checkbox displays unchecked checkedboxes as checked, and vice versa. +see https://github.com/searxng/searxng/blob/3408d061aab9abc6168fec9bbc6deab71b236dac/searx/templates/simple/preferences.html#L313 +*/ +input.checkbox-onoff[type="checkbox"], +.reversed-checkbox input.checkbox-onoff[type="checkbox"]:checked { + background: var(--color-toolkit-checkbox-onoff-off-background); + + &::before { + left: -0.5em; + content: "\2715"; + color: var(--color-toolkit-checkbox-onoff-off-mark-color); + background: var(--color-toolkit-checkbox-onoff-off-mark-background); + } +} + +input.checkbox-onoff[type="checkbox"]:checked, +.reversed-checkbox input.checkbox-onoff[type="checkbox"] { + background: var(--color-toolkit-checkbox-onoff-on-background); + + &::before { + left: calc(100% - 1.5em); + content: "\2713"; + color: var(--color-toolkit-checkbox-onoff-on-mark-color); + background: var(--color-toolkit-checkbox-onoff-on-mark-background); } } /* -- checkbox -- */ @supports (transform: rotate(-45deg)) { - .checkbox { + input[type=checkbox]:not(.checkbox-onoff) { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 20px; + height: 20px; + cursor: pointer; position: relative; - margin: 20px auto; + top: 0; + left: 0; + border: 2px solid var(--color-toolkit-checkbox-input-border); + .rounded-corners(0.3em); - label { - width: 20px; - height: 20px; - cursor: pointer; + &::after { + content: ''; + width: 9px; + height: 5px; position: absolute; - top: 0; - left: 0; - background: var(--color-toolkit-checkbox-label-background); - .rounded-corners; - - &::after { - content: ''; - width: 9px; - height: 5px; - position: absolute; - top: 4px; - left: 4px; - border: 3px solid var(--color-toolkit-checkbox-label-border); - border-top: none; - border-right: none; - background: transparent; - opacity: 0; - transform: rotate(-45deg); - } + top: 3px; + left: 2px; + border: 3px solid var(--color-toolkit-checkbox-label-border); + border-top: none; + border-right: none; + background: transparent; + opacity: 0; + transform: rotate(-45deg); } - input[type=checkbox] { - visibility: hidden; - - &:checked + label::after { - border-color: var(--color-toolkit-checkbox-input-border); - opacity: 1; - } + &:checked::after { + border-color: var(--color-toolkit-checkbox-input-border); + opacity: 1; } + } - // disabled : can''t be focused, show only the check mark - input[disabled] + label { - background-color: transparent !important; - cursor: inherit; - } + // disabled : can't be focused, show only the check mark + input[type=checkbox][disabled]:not(.checkbox-onoff) { + border: inherit; + background-color: transparent !important; + cursor: inherit; + } - // if not checked and possible to checked then display a "light" check mark on hover - input:not(:checked):not([readonly]):not([disabled]) + label:hover::after { - opacity: 0.5; - } + // if not checked and possible to checked then display a "light" check mark on hover + input.checkbox[type=checkbox]:not(:checked):not([disabled]):not(.checkbox-onoff):hover::after { + opacity: 0.5; } } diff --git a/searx/templates/simple/macros.html b/searx/templates/simple/macros.html index 6c64c23ea..a751ce187 100644 --- a/searx/templates/simple/macros.html +++ b/searx/templates/simple/macros.html @@ -72,19 +72,13 @@ {%- endmacro -%} {%- macro checkbox_onoff(name, checked) -%} -
{{- '' -}} - {{- '' -}} - {{- '' -}} -
+ {%- endmacro -%} -{%- macro checkbox(name, checked, readonly, disabled) -%} -
{{- '' -}} - {%- if checked == '?' -%} - {{ icon_small('warning') }} - {%- else -%} - {{- '' -}} - {{- '' -}} - {%- endif -%} -
+{%- macro checkbox(name, checked, disabled) -%} +{%- if checked == '?' -%} + {{- icon_small('warning') -}} +{%- else -%} + +{%- endif -%} {%- endmacro -%} diff --git a/searx/templates/simple/preferences.html b/searx/templates/simple/preferences.html index 275a53bf7..659e93f9a 100644 --- a/searx/templates/simple/preferences.html +++ b/searx/templates/simple/preferences.html @@ -23,13 +23,13 @@ {% if search_engine.about is defined %} {% set about = search_engine.about %} {{- "" -}} {%- else -%} -{{ r }} +{% if r %}{{ r }}{% endif %} {%- endif -%} {%- endmacro -%} @@ -98,7 +98,7 @@ {% block content %}

{{ _('Preferences') }}

-
+ {{ tabs_open() }} @@ -182,9 +182,9 @@ {{ _('Interface language') }}

{{ _('Change the language of the layout') }}
@@ -290,17 +290,17 @@

{{_('This tab does not show up for search results, but you can search the engines listed here via bangs.')}}

{% endif %}
- - - - - - - - - - - +
{{ _("Allow") }}{{ _("Engine name") }}{{ _("Shortcut") }}{{ _("Supports selected language") }}{{ _("SafeSearch") }}{{ _("Time range") }}{{ _("Response time") }}{{ _("Max time") }}{{ _("Reliability") }}
+ {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} {% for group, engines in engines_by_category[categ] | group_engines_in_tab %} {% if loop.length > 1 %} @@ -309,22 +309,24 @@ {% for search_engine in engines %} {% if not search_engine.private %} {% set engine_id = 'engine_' + search_engine.name|replace(' ', '_') + '__' + categ|replace(' ', '_') %} - - - {{- "" -}} + {{- "" -}} + - - - - - {{ engine_time(search_engine.name) }} - - {{ engine_reliability(search_engine.name) }} + {%- endif -%} + + {{- engine_about(search_engine) -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- "" -}} + {{- engine_time(search_engine.name) -}} + {{- "" -}} + {{ engine_reliability(search_engine.name) -}} {% endif %} {% endfor %} @@ -377,20 +379,20 @@ {{ tab_footer() }} {{ tab_header('maintab', 'cookies', _('Cookies')) }} -

- {{ _('This is the list of cookies and their values SearXNG is storing on your computer.') }}
- {{ _('With that list, you can assess SearXNG transparency.') }}
+

{{- "" -}} + {{- _('This is the list of cookies and their values SearXNG is storing on your computer.') }}
{{- "" -}} + {{- _('With that list, you can assess SearXNG transparency.') }}
{{- "" -}}

{% if cookies %}
{{ _("Allow") }}{{ _("Engine name") }}{{ _("Shortcut") }}{{ _("Supports selected language") }}{{ _("SafeSearch") }}{{ _("Time range") }}{{ _("Response time") }}{{ _("Max time") }}{{ _("Reliability") }}
{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}{% if search_engine.enable_http %}{{ icon_big('warning', 'No HTTPS') }}{% endif %} - {{ search_engine.name }} - {%- if search_engine.about and search_engine.about.language %} +
{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}{% if search_engine.enable_http %}{{ icon_big('warning', 'No HTTPS') }}{% endif -%} + {{ shortcuts[search_engine.name] }}{{ checkbox(engine_id + '_supported_languages', supports[search_engine.name]['supports_selected_language'], true, true) }}{{ checkbox(engine_id + '_safesearch', supports[search_engine.name]['safesearch'], true, true) }}{{ checkbox(engine_id + '_time_range_support', supports[search_engine.name]['time_range_support'], true, true) }}{{ search_engine.timeout }}{{ shortcuts[search_engine.name] }}{{ checkbox(None, supports[search_engine.name]['supports_selected_language'], true) }}{{ checkbox(None, supports[search_engine.name]['safesearch'], true) }}{{ checkbox(None, supports[search_engine.name]['time_range_support'], true) }}{{ search_engine.timeout }}
- - - + {{- "" -}} + {{- "" -}} + {{- "" -}} {% for cookie in cookies %} - - - + {{- "" -}} + {{- "" -}} + {{- "" -}} {% endfor %}
{{ _('Cookie name') }}{{ _('Value') }}
{{ _('Cookie name') }}{{ _('Value') }}
{{ cookie }}{{ cookies[cookie] }}
{{ cookie }}{{ cookies[cookie] }}