ui: css: New style for select all checkbox

- Make the box look different from the rest of the options so that this it does
not look like an option without label.

- Give it the appearance of a button so that it is becomes an operation rather
than option.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

static/themes/default/css/main.css

@@ -699,6 +699,17 @@ input[type='submit'].running-status-button {
     padding-left: 2rem;
 }
 
+/*
+ * Select all checkbox for multiple checkboxes field.
+ */
+.select-all-label {
+    border: 1px solid var(--neutral-dark-color);
+    background-color: var(--neutral-light-color);
+    border-radius: 0.25rem;
+    padding: 0.5rem 1rem 0.25rem;
+    margin-left: -1rem;
+}
+
 /*
  * Button toolbar
  */

static/themes/default/js/main.js

@@ -132,6 +132,7 @@ document.addEventListener('DOMContentLoaded', function(event) {
 
         let label = document.createElement('label');
         label.for = "select_all";
+        label.setAttribute('class', 'select-all-label');
 
         let checkbox = document.createElement('input');
         checkbox.type = "checkbox";