✨

less/character-sheet.less

@@ -438,7 +438,8 @@
     }
 
     .statHex {
-        margin-top: 0px;
+        margin-top: 7px;
+        margin-bottom: 7px;
     }
 
     select {
@@ -464,4 +465,65 @@
         align-items: center;
         text-align: center;
     }
+
+    .radioButton {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+    }
+
+    /* Create a custom radio button */
+    .checkmark {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 20px;
+        width: 35px;
+        background-color: #30da0c;
+        border-radius: 5px;
+
+        box-shadow: 0 0 20px #003300 inset;
+        -webkit-box-shadow: 0 0 20px #003300 inset;
+        -moz-box-shadow: 0 0 20px #003300 inset;
+        -o-box-shadow: 0 0 20px #003300 inset;
+
+        border-radius: 10px;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        -o-border-radius: 10px;
+    }
+
+    /* On mouse-over, add a grey background color */
+    .container:hover input ~ .checkmark {
+        background-color: #3de31c;
+    }
+
+    /* When the radio button is checked, add a blue background */
+    .container input:checked ~ .checkmark {
+        background-color: #3de31c;
+    }
+
+    /* Create the indicator (the dot/circle - hidden when not checked) */
+    .checkmark:after {
+        content: "";
+        position: absolute;
+        display: none;
+    }
+
+    /* Show the indicator (dot/circle) when checked */
+    .container input:checked ~ .checkmark:after {
+        display: block;
+    }
+
+    /* Style the indicator (dot/circle) */
+    .container .checkmark:after {
+        top: 9px;
+        left: 9px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: white;
+    }
 }