[mod] in the preference page, show !bang of subgrouping categories

The names of the subgrouping categories in the preference page are translated,
to use this categories the user needs to know by which !bang the category can be
selected.  Related to "Make 'non tab category' bangs discoverable" in [#690].

Related:

- [#690] https://github.com/searxng/searxng/issues/690
- https://github.com/searxng/searxng/issues/1604
- https://github.com/searxng/searxng/pull/1545

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

3 files changed, 21 insertions, 7 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index ef6b02b2c..e5a11ff2b 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -113,8 +113,8 @@
   --color-toolkit-engine-tooltip-background: #fff;
   --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
   --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
-  --color-doc-code: #300;
-  --color-doc-code-background: #fdd;
+  --color-doc-code: #003;
+  --color-doc-code-background: #ddeaff;
 }
 
 .dark-themes() {
@@ -225,8 +225,8 @@
   --color-toolkit-engine-tooltip-background: #222;
   --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
   --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
-  --color-doc-code: #fdd;
-  --color-doc-code-background: #300;
+  --color-doc-code: #ddd;
+  --color-doc-code-background: #4d5a6f;
 }
 
 /// Dark Theme (autoswitch based on device pref)
diff --git a/searx/static/themes/simple/src/less/info.less b/searx/static/themes/simple/src/less/info.less
index 8c83c379d..f354135d2 100644
--- a/searx/static/themes/simple/src/less/info.less
+++ b/searx/static/themes/simple/src/less/info.less
@@ -1,9 +1,10 @@
 .info-page {
   code {
     font-family: monospace;
-    color: var(--color-doc-code);
+    .rounded-corners-tiny;
     background-color: var(--color-doc-code-background);
-    padding: 2px 5px;
-    .rounded-corners(5px);
+    color: var(--color-doc-code);
+    padding: 0.2rem;
+    border: 0 none;
   }
 }
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index 6913bbb90..4f446245a 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -72,6 +72,15 @@
     font-size: 90%;
   }
 
+  .bang {
+    .ltr-text-align-left();
+    .rounded-corners-tiny;
+    background-color: var(--color-doc-code-background);
+    color: var(--color-doc-code);
+    padding: 0.2rem;
+    border: 0 none;
+  }
+
   table {
     border-collapse: collapse;
   }
@@ -114,6 +123,10 @@
         .engine-description {
           margin-top: 0.5rem;
         }
+
+        .bang {
+          margin: 0.3rem;
+        }
       }
     }