checkbox

public/assets/css/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 @font-face {
   font-family: "DM Sans";
   src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
@@ -355,14 +356,53 @@ input[type=range]::-ms-track {
   border-radius: 2px;
 }
 
+input[type=checkbox] {
+  display: none;
+}
+
+input[type=checkbox] + label {
+  position: relative;
+  padding-left: 24px;
+}
+
+input[type=checkbox] + label::before {
+  content: "✔";
+  font-size: 11px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+  --size: 11px;
+  width: var(--size);
+  height: var(--size);
+  border-radius: var(--border-radius);
+  display: block;
+  background-color: red;
+  position: absolute;
+  top: 0px;
+  border: 1px solid var(--color-interface-400);
+  background-color: var(--color-interface-100);
+  color: transparent;
+}
+
+input[type=checkbox]:checked + label::before {
+  background-color: var(--color-interface-600);
+  border-color: var(--color-interface-600);
+  color: var(--color-panel-bg);
+}
+
+.field--view-only {
+  opacity: 0.3;
+}
+
 .field {
-  display: flex;
+  display: grid;
+  grid-template-columns: var(--label-w) 1fr;
 }
 .field label {
   font-weight: 600;
   color: var(--color-800);
+  align-self: center;
 }
-.field .input-with-unit {
+.field .input-with-range {
   display: flex;
   gap: 0.3rem;
 }
@@ -390,12 +430,9 @@ input[type=range]::-ms-track {
   grid-column: 2;
 }
 
-.field {
-  display: grid;
-  grid-template-columns: var(--label-w) 1fr;
-}
-.field label {
-  align-self: center;
+.checkbox-field {
+  display: block;
+  margin: calc(var(--space-xs) * 2) 0;
 }
 
 .field-font {
@@ -406,13 +443,13 @@ input[type=range]::-ms-track {
 .field-font select {
   width: 100%;
 }
-.field-font .field-checkbox {
+.field-font .checkbox-field {
   grid-column: 2;
   padding-top: var(--space-xs);
+  margin: 0;
 }
-.field-font .field-checkbox label {
+.field-font .checkbox-field label {
   font-weight: 400;
-  margin-left: 0.75ch;
   color: var(--color-txt);
 }
 
@@ -439,20 +476,6 @@ input[type=range]::-ms-track {
   margin-right: 2ch;
 }
 
-.checkbox-field {
-  margin: calc(var(--space-xs) * 2) 0;
-  grid-template-columns: 3ch 1fr;
-}
-.checkbox-field input {
-  justify-self: left;
-  margin: 0;
-}
-
-.field--view-only {
-  opacity: 0.3;
-}
-
-/* Label with CSS tooltip */
 .label-with-tooltip {
   -webkit-text-decoration: underline dotted 1px var(--color-200);
           text-decoration: underline dotted 1px var(--color-200);
@@ -525,6 +548,7 @@ input[type=number] {
 .number-input .spinner-buttons button:hover svg path {
   fill: var(--color-interface-900);
 }
+
 .settings-section {
   margin: var(--space-m) 0;
 }