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; - - label { - width: 20px; - height: 20px; - cursor: pointer; + top: 0; + left: 0; + border: 2px solid var(--color-toolkit-checkbox-input-border); + .rounded-corners(0.3em); + + &::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) -%} -
wikidata.org/wiki/{{about.wikidata_id}}
{%- endif -%} {%- if search_engine.enable_http %}{{ icon_big('exclamation-sign', 'No HTTPS') }}{{ _('No HTTPS')}}
{% endif -%} {%- if reliabilities.get(search_engine.name, {}).errors or reliabilities.get(search_engine.name, {}).checker -%} - {{ _('View error logs and submit a bug report') }} + {{ _('View error logs and submit a bug report') -}} {%- endif -%} @@ -89,7 +89,7 @@