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

4 files changed, 171 insertions, 115 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;
   }
 }