oscar template: improve style for check and uncheck of engines

searx/static/oscar/css/oscar.css

@@ -17,3 +17,11 @@ body {
   /* Set the fixed height of the footer here */
   height: 40px;
 }
+
+input[type=checkbox]:checked ~ .label_hide_if_checked {
+  display:none;
+}
+
+input[type=checkbox]:not(:checked) ~ .label_hide_if_not_checked {
+  display:none;
+}

searx/templates/oscar/preferences.html

@@ -97,9 +97,9 @@
                             <div class="col-sm-4 col-md-4">{{ search_engine.name }} ({{ shortcuts[search_engine.name] }})</div>
                             <div class="col-sm-4 col-md-4">
                                 <div class="checkbox">
-                                <input type="checkbox" id="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}" name="engine_{{ search_engine.name }}"{% if search_engine.name in blocked_engines %} checked="checked"{% endif %} />
-                                <label class="allow btn btn-success" for="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Allow') }}</label>
-                                <label class="deny btn btn-danger" for="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Block') }}</label>
+                                <input class="hidden" type="checkbox" id="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}" name="engine_{{ search_engine.name }}"{% if search_engine.name in blocked_engines %} checked="checked"{% endif %} />
+                                <label class="btn btn-success label_hide_if_checked" for="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Block') }}</label>
+                                <label class="btn btn-danger label_hide_if_not_checked" for="engine_{{ categ }}_{{ search_engine.name|replace(' ', '_') }}">{{ _('Allow') }}</label>
                                 </div>
                             </div>
                         </div>