add: better checkboxes

crates/app/src/public/css/style.css

@@ -413,6 +413,43 @@ select:focus {
     overflow-wrap: anywhere;
 }
 
+input[type="checkbox"] {
+    --color: #c9b1bc;
+    appearance: none;
+    border-radius: var(--radius);
+    transition:
+        box-shadow 0.15s,
+        background 0.15s;
+    background-color: var(--color-super-raised);
+    background-position: center;
+    background-origin: padding-box;
+    background-size: 14px;
+    background-repeat: no-repeat;
+    width: 1em !important;
+    height: 1em;
+    outline: none;
+    border: solid 1px var(--color-super-lowered);
+    padding: 0;
+    cursor: pointer;
+    color: var(--color-text-primary);
+}
+
+input[type="checkbox"]:hover {
+    box-shadow: var(--shadow-x-offset) var(--shadow-y-offset) var(--shadow-size)
+        var(--color-shadow);
+}
+
+input[type="checkbox"]:focus {
+    outline: solid 2px var(--color);
+    outline-offset: 2px;
+}
+
+input[type="checkbox"]:checked {
+    border-color: var(--color);
+    background-color: var(--color);
+    background-image: url("/icons/check.svg");
+}
+
 /* pillmenu */
 .pillmenu {
     display: flex;

crates/app/src/public/js/atto.js

@@ -919,7 +919,7 @@ media_theme_pref();
             }
 
             if (option.input_element_type === "checkbox") {
-                into_element.innerHTML += `<div class="card flex gap-2">
+                into_element.innerHTML += `<div class="card flex items-center gap-2">
                 <input
                     type="checkbox"
                     onchange="window.set_setting_field${id_key}('${option.key}', event.target.checked)"