ui: uniform responsive checkbox

This improves the checkbox UX a bit:

- define common style for checkbox-type inputs so that it is consistent 
  across different forms (if necessary, particular form can 
  adjust/redefine it ofc)

- lower check-box brightness in dark-mode (it's way too bright/white 
  compared to everything else, sticking out)

- highlight (currently just making font bold, maybe there is a better 
  approach for this) label when hovering over; this helps significantly 
  with signalling to the user that he can click on the text, which is
  much easier than trying to pin the actual box

client/webserver/site/src/css/main.scss

@@ -507,3 +507,20 @@ span.token-aware-symbol sup {
     }
   }
 }
+
+.form-check-input[type=checkbox] {
+  background-color: #ebebeb;
+  cursor: pointer;
+
+  &:checked {
+    background-color: #3095db;
+  }
+}
+
+.form-check-label {
+  cursor: pointer;
+
+  &:hover {
+    font-weight: bold;
+  }
+}

client/webserver/site/src/css/main_dark.scss

@@ -132,4 +132,12 @@ body.dark {
   #loader {
     background-color: #13202b77;
   }
+
+  .form-check-input[type=checkbox] {
+    background-color: black;
+
+    &:checked {
+      background-color: #27278d;
+    }
+  }
 }

client/webserver/site/src/html/forms.tmpl

@@ -252,7 +252,7 @@
   <input type="password" class="form-control select" data-tmpl="pw" autocomplete="current-password">
   <div class="form-check pt-2">
     <input class="form-check-input" type="checkbox" data-tmpl="rememberPass" id="logRememberPass">
-    <label for="logRememberPass" class="form-label ps-1">[[[Remember my password]]]</label>
+    <label for="logRememberPass" class="form-check-label ps-1">[[[Remember my password]]]</label>
   </div>
 </div>
 <div class="d-flex justify-content-center mt-2">

client/webserver/site/src/html/register.tmpl

@@ -18,7 +18,7 @@
       </div>
       <div>
         <input class="form-check-input" type="checkbox" id="rememberPass">
-        <label for="rememberPass" class="ps-1">[[[Remember my password]]]</label>
+        <label for="rememberPass" class="form-check-label ps-1">[[[Remember my password]]]</label>
       </div>
       <div class="pb-3 d-hide mt-3" id="seedRestore">
         <label for="seedInput" class="form-label ps-1 mb-1">[[[Restoration Seed]]]</label>

client/webserver/site/src/html/wallets.tmpl

@@ -250,7 +250,7 @@
       <span class="mt-2 d-hide">~<span id="sendValue" class="mx-1"></span>USD</span>
       <div id="toggleSubtract" class="form-check pt-2">
           <input class="form-check-input" type="checkbox" id="subtractCheckBox">
-          <label for="subtractCheckBox" class="form-label ps-1">Subtract fees from amount sent.</label>
+          <label for="subtractCheckBox" class="form-check-label ps-1">Subtract fees from amount sent.</label>
       </div>
       <div id="maxSendDisplay" class="mt-3">
         <hr class="dashed mt-2">