✨

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;
+    }
 }

pokemon.css

@@ -1,3 +1,11 @@
+.pokemon.sheet.characterSheet {
+  /* Create a custom radio button */
+  /* On mouse-over, add a grey background color */
+  /* When the radio button is checked, add a blue background */
+  /* Create the indicator (the dot/circle - hidden when not checked) */
+  /* Show the indicator (dot/circle) when checked */
+  /* Style the indicator (dot/circle) */
+}
 .pokemon.sheet.characterSheet .window-content {
   background: #c00d0d;
   color: white;
@@ -368,7 +376,8 @@
   justify-items: space-evenly;
 }
 .pokemon.sheet.characterSheet .statHex {
-  margin-top: 0px;
+  margin-top: 7px;
+  margin-bottom: 7px;
 }
 .pokemon.sheet.characterSheet select {
   background-color: #30da0c;
@@ -390,3 +399,49 @@
   align-items: center;
   text-align: center;
 }
+.pokemon.sheet.characterSheet .radioButton {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.pokemon.sheet.characterSheet .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;
+}
+.pokemon.sheet.characterSheet .container:hover input ~ .checkmark {
+  background-color: #3de31c;
+}
+.pokemon.sheet.characterSheet .container input:checked ~ .checkmark {
+  background-color: #3de31c;
+}
+.pokemon.sheet.characterSheet .checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+.pokemon.sheet.characterSheet .container input:checked ~ .checkmark:after {
+  display: block;
+}
+.pokemon.sheet.characterSheet .container .checkmark:after {
+  top: 9px;
+  left: 9px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: white;
+}

system.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.40",
+    "version": "0.0.41",
     "id": "pokemon",
     "title": "Pokémon TTRPG",
     "description": "A Pokémon TTRPG",

templates/partials/character-sheet-character.hbs

@@ -3,16 +3,18 @@
         <div class="charHex statHex"><span class="charHexHead">Attack</span></br><input class="charHexValue invisibleInput" type="number" name="system.stats.attack" value="{{system.stats.attack}}"></div>
         <div class="categorySelectBox">
             <div class="row">
-                <label>
+                <label class="container">
-                    <input type="radio" name="system.attackCategory" value="Physical"
+                    <input class="radioButton" type="radio" name="system.attackCategory" value="Physical"
                             {{#if (eq system.attackCategory "Physical")}}checked{{/if}}>
+                    <span class="checkmark"></span>
                     Physical
                 </label>
             </div>
             <div class="row">
-                <label>
+                <label class="container">
-                    <input type="radio" name="system.attackCategory" value="Physical"
+                    <input class="radioButton" type="radio" name="system.attackCategory" value="Special"
                             {{#if (eq system.attackCategory "Special")}}checked{{/if}}>
+                    <span class="checkmark"></span>
                     Special
                 </label>
             </div>
@@ -25,10 +27,26 @@
     <div class="row">
         <div class="charHex statHex"><span class="charHexHead">Defense</span></br><input class="charHexValue invisibleInput" type="number" name="system.stats.defense" value="{{system.stats.defense}}"></div>
         <div class="categorySelectBox">
-            <select name="system.defenseCategory">
+            <div class="row">
+                <label class="container">
+                    <input class="radioButton" type="radio" name="system.defenseCategory" value="Physical"
+                            {{#if (eq system.defenseCategory "Physical")}}checked{{/if}}>
+                    <span class="checkmark"></span>
+                    Physical
+                </label>
+            </div>
+            <div class="row">
+                <label class="container">
+                    <input class="radioButton" type="radio" name="system.defenseCategory" value="Special"
+                            {{#if (eq system.defenseCategory "Special")}}checked{{/if}}>
+                    <span class="checkmark"></span>
+                    Special
+                </label>
+            </div>
+            {{!-- <select name="system.defenseCategory">
                 <option value="Physical" {{#if (eq system.defenseCategory "Physical")}}selected{{/if}}>Physical</option>
                 <option value="Special" {{#if (eq system.defenseCategory "Special")}}selected{{/if}}>Special</option>
-            </select>
+            </select> --}}
         </div>
     </div>
     <div class="row">