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

1 files changed, 49 insertions, 37 deletions

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) {