✨

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;
@@ -395,3 +403,49 @@
   display: flex;
   align-items: center;
 }
+.pokemon.sheet.characterSheet .radioButton {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.pokemon.sheet.characterSheet .checkmark {
+  display: inline-block;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 36px;
+  background-color: #30da0c;
+  border-radius: 5px;
+  box-shadow: 0 0 10px #003300 inset;
+  -webkit-box-shadow: 0 0 10px #003300 inset;
+  -moz-box-shadow: 0 0 10px #003300 inset;
+  -o-box-shadow: 0 0 10px #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: 5px;
+  left: 8px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: black;
+}