[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.

6 files changed, 221 insertions, 169 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;
-
-    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) -%}
-<div class="checkbox-onoff">{{- '' -}}
-    <input type="checkbox" value="None" id="{{ name }}" name="{{ name }}" {% if checked %}checked{% endif %}/>{{- '' -}}
-    <label for="{{ name }}"></label>{{- '' -}}
-</div>
+  <input type="checkbox" name="{{ name }}" id="{{ name }}" value="None" class="checkbox-onoff" {% if checked %}checked{% endif %} />
 {%- endmacro -%}
 
-{%- macro checkbox(name, checked, readonly, disabled) -%}
-<div class="checkbox">{{- '' -}}
-    {%- if checked == '?' -%}
-      {{ icon_small('warning') }}
-    {%- else -%}
-      <input type="checkbox" value="None" id="{{ name }}" name="{{ name }}" {% if checked %}checked{% endif %}{% if readonly %} readonly="readonly" {% endif %}{% if disabled %} disabled="disabled" {% endif %}/>{{- '' -}}
-      <label for="{{ name }}"></label>{{- '' -}}
-    {%- endif -%}
-</div>
+{%- macro checkbox(name, checked, disabled) -%}
+{%- if checked == '?' -%}
+  {{- icon_small('warning') -}}
+{%- else -%}
+  <input type="checkbox"{% if name %} name="{{ name }}"{% endif %} value="None"{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %} />
+{%- 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 %}
 <div class="engine-tooltip" role="tooltip">{{- "" -}}
-    <p class="engine-description"></p>
+    <p class="engine-description"></p>{{- "" -}}
     <p><a href="{{about.website}}" rel="noreferrer">{{about.website}}</a></p>
     {%- if about.wikidata_id -%}<p><a href="https://www.wikidata.org/wiki/{{about.wikidata_id}}" rel="noreferrer">wikidata.org/wiki/{{about.wikidata_id}}</a></p>{%- endif -%}
     {%- if search_engine.enable_http %}<p>{{ icon_big('exclamation-sign', 'No HTTPS') }}{{ _('No HTTPS')}}</p>{% endif -%}
     {%- if reliabilities.get(search_engine.name, {}).errors or reliabilities.get(search_engine.name, {}).checker -%}
     <a href="{{ url_for('stats', engine=search_engine.name|e) }}" title="{{ _('View error logs and submit a bug report') }}">
-      {{ _('View error logs and submit a bug report') }}
+      {{ _('View error logs and submit a bug report') -}}
     </a>
     {%- endif -%}
 
@@ -89,7 +89,7 @@
     </div>{{- "" -}}
 </td>
 {%- else -%}
-<td class="{{ label }}"><span>{{ r }}</span></td>
+<td class="{{ label }}">{% if r %}<span>{{ r }}</span>{% endif %}</td>
 {%- endif -%}
 {%- endmacro -%}
 
@@ -98,7 +98,7 @@
 {% block content %}
 <h1>{{ _('Preferences') }}</h1>
 
-<form id="search_form" method="post" action="{{ url_for('preferences') }}" autocomplete="off">
+<form id="search_form" method="post" action="{{ url_for('preferences') }}" autocomplete="off" class="reversed-checkbox">
 
 {{ tabs_open() }}
 
@@ -182,9 +182,9 @@
       <legend>{{ _('Interface language') }}</legend>
       <p class="value">
         <select name='locale'>
-          {% for locale_id,locale_name in locales.items() | sort %}
+          {%- for locale_id,locale_name in locales.items() | sort -%}
           <option value="{{ locale_id }}" {% if locale_id == current_locale %}selected="selected"{% endif %}>{{ locale_name }}</option>
-          {% endfor %}
+          {%- endfor -%}
         </select>
       </p>
       <div class="description">{{ _('Change the language of the layout') }}</div>
@@ -290,17 +290,17 @@
       <p>{{_('This tab does not show up for search results, but you can search the engines listed here via bangs.')}}</p>
     {% endif %}
     <div class="scrollx">
-    <table class="striped">
-      <tr>
-        <th class="engine_checkbox">{{ _("Allow") }}</th>
-        <th class="name">{{ _("Engine name") }}</th>
-        <th class="shortcut">{{ _("Shortcut") }}</th>
-        <th>{{ _("Supports selected language") }}</th>
-        <th>{{ _("SafeSearch") }}</th>
-        <th>{{ _("Time range") }}</th>
-        <th>{{ _("Response time") }}</th>
-        <th>{{ _("Max time") }}</th>
-        <th>{{ _("Reliability") }}</th>
+    <table class="striped table_engines">
+      <tr>{{- "" -}}
+        <th class="engine_checkbox">{{ _("Allow") }}</th>{{- "" -}}
+        <th class="name">{{ _("Engine name") }}</th>{{- "" -}}
+        <th class="shortcut">{{ _("Shortcut") }}</th>{{- "" -}}
+        <th>{{ _("Supports selected language") }}</th>{{- "" -}}
+        <th>{{ _("SafeSearch") }}</th>{{- "" -}}
+        <th>{{ _("Time range") }}</th>{{- "" -}}
+        <th>{{ _("Response time") }}</th>{{- "" -}}
+        <th>{{ _("Max time") }}</th>{{- "" -}}
+        <th>{{ _("Reliability") }}</th>{{- "" -}}
       </tr>
       {% 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(' ', '_') %}
-      <tr>
-        <td class="engine_checkbox">{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}</td>
-        <th class="name" data-engine-name="{{ search_engine.name }}">{% if search_engine.enable_http %}{{ icon_big('warning', 'No HTTPS') }}{% endif %}
-          {{ search_engine.name }}
-          {%- if search_engine.about and search_engine.about.language %}
+      <tr>{{- "" -}}
+        <td>{{ checkbox_onoff(engine_id, (search_engine.name, categ) in disabled_engines) }}</td>{{- "" -}}
+        <th class="name" data-engine-name="{{ search_engine.name }}">{% if search_engine.enable_http %}{{ icon_big('warning', 'No HTTPS') }}{% endif -%}
+          <label for="{{ engine_id }}">
+            {{- search_engine.name -}}
+            {%- if search_engine.about and search_engine.about.language -%}
               ({{search_engine.about.language | upper}})
-          {%- endif %}
-          {{ engine_about(search_engine) }}
-        </th>
-        <td class="shortcut">{{ shortcuts[search_engine.name] }}</td>
-        <td>{{ checkbox(engine_id + '_supported_languages', supports[search_engine.name]['supports_selected_language'], true, true) }}</td>
-        <td>{{ checkbox(engine_id + '_safesearch', supports[search_engine.name]['safesearch'], true, true) }}</td>
-        <td>{{ checkbox(engine_id + '_time_range_support', supports[search_engine.name]['time_range_support'], true, true) }}</td>
-        {{ engine_time(search_engine.name) }}
-        <td class="{{ 'danger' if stats[search_engine.name]['warn_timeout'] else '' }}">{{ search_engine.timeout }}</td>
-        {{ engine_reliability(search_engine.name) }}
+            {%- endif -%}
+          </label>
+          {{- engine_about(search_engine) -}}
+        </th>{{- "" -}}
+        <td class="shortcut">{{ shortcuts[search_engine.name] }}</td>{{- "" -}}
+        <td>{{ checkbox(None, supports[search_engine.name]['supports_selected_language'], true) }}</td>{{- "" -}}
+        <td>{{ checkbox(None, supports[search_engine.name]['safesearch'], true) }}</td>{{- "" -}}
+        <td>{{ checkbox(None, supports[search_engine.name]['time_range_support'], true) }}</td>{{- "" -}}
+        {{- engine_time(search_engine.name) -}}
+        <td class="{{ 'danger' if stats[search_engine.name]['warn_timeout'] else '' }}">{{ search_engine.timeout }}</td>{{- "" -}}
+        {{ engine_reliability(search_engine.name) -}}
       </tr>
       {% endif %}
       {% endfor %}
@@ -377,20 +379,20 @@
   {{ tab_footer() }}
 
   {{ tab_header('maintab', 'cookies', _('Cookies')) }}
-     <p class="text-muted">
-        {{ _('This is the list of cookies and their values SearXNG is storing on your computer.') }}<br />
-        {{ _('With that list, you can assess SearXNG transparency.') }}<br />
+     <p class="text-muted">{{- "" -}}
+        {{- _('This is the list of cookies and their values SearXNG is storing on your computer.') }}<br />{{- "" -}}
+        {{- _('With that list, you can assess SearXNG transparency.') }}<br />{{- "" -}}
      </p>
      {% if cookies %}
      <table class="cookies">
-       <tr>
-          <th>{{ _('Cookie name') }}</th>
-          <th>{{ _('Value') }}</th>
+       <tr>{{- "" -}}
+          <th>{{ _('Cookie name') }}</th>{{- "" -}}
+          <th>{{ _('Value') }}</th>{{- "" -}}
        </tr>
        {% for cookie in cookies %}
-       <tr>
-          <td>{{ cookie }}</td>
-          <td>{{ cookies[cookie] }}</td>
+       <tr>{{- "" -}}
+          <td>{{ cookie }}</td>{{- "" -}}
+          <td>{{ cookies[cookie] }}</td>{{- "" -}}
        </tr>
        {% endfor %}
      </table>