Merge pull request #496 from dalf/simple-pref-tokens

Simple theme: add "Engine tokens" field.

searx/static/themes/simple/css/searxng-rtl.css

@@ -804,6 +804,9 @@ template {
   --color-toolkit-tabs-section-border: #ddd;
   --color-toolkit-select-border: #ddd;
   --color-toolkit-select-border-hover: #bbb;
+  --color-toolkit-input-text-font: #222;
+  --color-toolkit-input-text-border: #ddd;
+  --color-toolkit-input-text-border-hover: #bbb;
   --color-toolkit-checkbox-onoff-background: #ddd;
   --color-toolkit-checkbox-onoff-label-background: #3050ff;
   --color-toolkit-checkbox-onoff-checked-background: #aaa;
@@ -886,6 +889,9 @@ template {
     --color-toolkit-tabs-section-border: #555;
     --color-toolkit-select-border: #555;
     --color-toolkit-select-border-hover: #777;
+    --color-toolkit-input-text-font: #fff;
+    --color-toolkit-input-text-border: #555;
+    --color-toolkit-input-text-border-hover: #777;
     --color-toolkit-checkbox-onoff-background: #3c3b31;
     --color-toolkit-checkbox-onoff-label-background: #58f;
     --color-toolkit-checkbox-onoff-checked-background: #ddd;
@@ -2162,6 +2168,32 @@ article.result-images .detail {
   float: left;
   width: 15em;
 }
+#main_preferences .value select,
+#main_preferences .value input[type="text"] {
+  font-size: inherit !important;
+  margin: 0 1rem 0 0;
+}
+#main_preferences .value select {
+  width: 14rem;
+}
+#main_preferences .value input[type="text"] {
+  width: 13.25rem;
+  color: var(--color-toolkit-input-text-font);
+  border: 1px solid var(--color-toolkit-input-text-border);
+  background: none repeat scroll 0 0 var(--color-base-background);
+  padding: 0.4rem;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+#main_preferences .value input[type="text"]:hover {
+  border: 1px solid var(--color-toolkit-input-text-border-hover);
+}
+#main_preferences .value select:focus,
+#main_preferences .value input:focus {
+  outline: none;
+  box-shadow: 0 0 1px 1px var(--color-btn-background);
+}
 #main_preferences .description {
   margin: 0;
   padding: 5px 0 0 0;
@@ -2170,10 +2202,6 @@ article.result-images .detail {
   color: var(--color-settings-engine-description-font);
   font-size: 90%;
 }
-#main_preferences select {
-  width: 200px;
-  font-size: inherit !important;
-}
 #main_preferences table {
   border-collapse: collapse;
 }

searx/static/themes/simple/css/searxng.css

@@ -804,6 +804,9 @@ template {
   --color-toolkit-tabs-section-border: #ddd;
   --color-toolkit-select-border: #ddd;
   --color-toolkit-select-border-hover: #bbb;
+  --color-toolkit-input-text-font: #222;
+  --color-toolkit-input-text-border: #ddd;
+  --color-toolkit-input-text-border-hover: #bbb;
   --color-toolkit-checkbox-onoff-background: #ddd;
   --color-toolkit-checkbox-onoff-label-background: #3050ff;
   --color-toolkit-checkbox-onoff-checked-background: #aaa;
@@ -886,6 +889,9 @@ template {
     --color-toolkit-tabs-section-border: #555;
     --color-toolkit-select-border: #555;
     --color-toolkit-select-border-hover: #777;
+    --color-toolkit-input-text-font: #fff;
+    --color-toolkit-input-text-border: #555;
+    --color-toolkit-input-text-border-hover: #777;
     --color-toolkit-checkbox-onoff-background: #3c3b31;
     --color-toolkit-checkbox-onoff-label-background: #58f;
     --color-toolkit-checkbox-onoff-checked-background: #ddd;
@@ -2162,6 +2168,32 @@ article.result-images .detail {
   float: left;
   width: 15em;
 }
+#main_preferences .value select,
+#main_preferences .value input[type="text"] {
+  font-size: inherit !important;
+  margin: 0 1rem 0 0;
+}
+#main_preferences .value select {
+  width: 14rem;
+}
+#main_preferences .value input[type="text"] {
+  width: 13.25rem;
+  color: var(--color-toolkit-input-text-font);
+  border: 1px solid var(--color-toolkit-input-text-border);
+  background: none repeat scroll 0 0 var(--color-base-background);
+  padding: 0.4rem;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+#main_preferences .value input[type="text"]:hover {
+  border: 1px solid var(--color-toolkit-input-text-border-hover);
+}
+#main_preferences .value select:focus,
+#main_preferences .value input:focus {
+  outline: none;
+  box-shadow: 0 0 1px 1px var(--color-btn-background);
+}
 #main_preferences .description {
   margin: 0;
   padding: 5px 0 0 0;
@@ -2170,10 +2202,6 @@ article.result-images .detail {
   color: var(--color-settings-engine-description-font);
   font-size: 90%;
 }
-#main_preferences select {
-  width: 200px;
-  font-size: inherit !important;
-}
 #main_preferences table {
   border-collapse: collapse;
 }

searx/static/themes/simple/src/less/definitions.less

@@ -91,6 +91,9 @@
   --color-toolkit-tabs-section-border: #ddd;
   --color-toolkit-select-border: #ddd;
   --color-toolkit-select-border-hover: #bbb;
+  --color-toolkit-input-text-font: #222;
+  --color-toolkit-input-text-border: #ddd;
+  --color-toolkit-input-text-border-hover: #bbb;
   --color-toolkit-checkbox-onoff-background: #ddd;
   --color-toolkit-checkbox-onoff-label-background: #3050ff;
   --color-toolkit-checkbox-onoff-checked-background: #aaa;
@@ -191,6 +194,9 @@
     --color-toolkit-tabs-section-border: #555;
     --color-toolkit-select-border: #555;
     --color-toolkit-select-border-hover: #777;
+    --color-toolkit-input-text-font: #fff;
+    --color-toolkit-input-text-border: #555;
+    --color-toolkit-input-text-border-hover: #777;
     --color-toolkit-checkbox-onoff-background: #3c3b31;
     --color-toolkit-checkbox-onoff-label-background: #58f;
     --color-toolkit-checkbox-onoff-checked-background: #ddd;

searx/static/themes/simple/src/less/preferences.less

@@ -27,6 +27,35 @@
     padding: 0;
     float: left;
     width: 15em;
+
+    select,
+    input[type="text"] {
+      font-size: inherit !important;
+      margin: 0 1rem 0 0;
+    }
+
+    select {
+      width: 14rem;
+    }
+
+    input[type="text"] {
+      width: 13.25rem;
+      color: var(--color-toolkit-input-text-font);
+      border: 1px solid var(--color-toolkit-input-text-border);
+      background: none repeat scroll 0 0 var(--color-base-background);
+      padding: 0.4rem;
+      .rounded-corners-tiny;
+
+      &:hover {
+        border: 1px solid var(--color-toolkit-input-text-border-hover);
+      }
+    }
+
+    select:focus,
+    input:focus {
+      outline: none;
+      box-shadow: 0 0 1px 1px var(--color-btn-background);
+    }
   }
 
   .description {
@@ -38,11 +67,6 @@
     font-size: 90%;
   }
 
-  select {
-    width: 200px;
-    font-size: inherit !important;
-  }
-
   table {
     border-collapse: collapse;
   }

searx/templates/oscar/preferences.html

@@ -183,7 +183,7 @@
                     {% set label = _('Engine tokens') %}
                     {% set info = _('Access tokens for private engines') %}
                     {{ preferences_item_header(info, label, rtl, 'tokens') }}
-                        <input class="form-control" id="tokens" name="tokens" value='{{ preferences.tokens.get_value() }}'/>
+                        <input class="form-control" id="tokens" name="tokens" value='{{ preferences.tokens.get_value() }}' autocomplete="off" spellcheck="false" autocorrect="off" />
                     {{ preferences_item_footer(info, label, rtl) }}
                 </div>
                 </fieldset>

searx/templates/simple/preferences.html

@@ -169,6 +169,13 @@
       <div class="description"><!-- {{ _('Redirect to open-access versions of publications when available (plugin required)') }} --></div>
     </fieldset>
     {% endif %}
+    <fieldset>
+      <legend>{{ _('Engine tokens') }}</legend>
+      <p class="value">
+        <input name="tokens" type="text" autocomplete="off" spellcheck="false" autocorrect="off" value='{{ preferences.tokens.get_value() }}'/>
+      </p>
+      <p class="description">{{ _('Access tokens for private engines') }}</p>
+    </fieldset>
   {{ tab_footer() }}
 
   {{ tab_header('maintab', 'ui', _('User interface')) }}