✨

less/character-sheet.less

@@ -449,20 +449,21 @@
         background-color: transparent;
         color: black;
         border: 2px solid black;
-        width: 80px;
-        height: 20px;
+        width: 100px;
+        height: 30px;
 
         border-radius: 20px;
         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         -o-border-radius: 20px;
 
-        margin: 15px 10px;
+        margin: 5px 0px 5px 15px;
         display: flex;
         flex-direction: column;
         justify-content: space-evenly;
         align-items: center;
         text-align: center;
+        font-size: 16;
     }
 
     .container {
@@ -486,7 +487,7 @@
         left: 0;
         height: 20px;
         width: 36px;
-        background-color: #30da0c;
+        background-color: black;
         border-radius: 5px;
         margin-right: 8px;
 
@@ -503,7 +504,7 @@
 
     /* On mouse-over, add a grey background color */
     .container:hover input ~ .checkmark {
-        background-color: #83f16d;
+        background-color: #434343;
     }
 
     /* When the radio button is checked, add a blue background */
@@ -512,26 +513,26 @@
     }
 
     /* Create the indicator (the dot/circle - hidden when not checked) */
-    .checkmark:after {
-        content: "";
-        position: relative;
-        display: none;
-    }
+    // .checkmark:after {
+    //     content: "";
+    //     position: relative;
+    //     display: none;
+    // }
 
     /* Show the indicator (dot/circle) when checked */
-    .container input:checked ~ .checkmark:after {
-        display: block;
-    }
+    // .container input:checked ~ .checkmark:after {
+    //     display: block;
+    // }
 
     /* Style the indicator (dot/circle) */
-    .container .checkmark:after {
-        top: 5px;
-        left: 13px;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
-        background: black;
-    }
+    // .container .checkmark:after {
+    //     top: 5px;
+    //     left: 13px;
+    //     width: 10px;
+    //     height: 10px;
+    //     border-radius: 50%;
+    //     background: black;
+    // }
 
     .combatBox {
         display: flex;

pokemon.css

@@ -385,18 +385,19 @@
   background-color: transparent;
   color: black;
   border: 2px solid black;
-  width: 80px;
-  height: 20px;
+  width: 100px;
+  height: 30px;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -o-border-radius: 20px;
-  margin: 15px 10px;
+  margin: 5px 0px 5px 15px;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   text-align: center;
+  font-size: 16;
 }
 .pokemon.sheet.characterSheet .container {
   display: flex;
@@ -416,7 +417,7 @@
   left: 0;
   height: 20px;
   width: 36px;
-  background-color: #30da0c;
+  background-color: black;
   border-radius: 5px;
   margin-right: 8px;
   box-shadow: 0 0 10px #003300 inset;
@@ -429,27 +430,11 @@
   -o-border-radius: 10px;
 }
 .pokemon.sheet.characterSheet .container:hover input ~ .checkmark {
-  background-color: #83f16d;
+  background-color: #434343;
 }
 .pokemon.sheet.characterSheet .container input:checked ~ .checkmark {
   background-color: #30da0c;
 }
-.pokemon.sheet.characterSheet .checkmark:after {
-  content: "";
-  position: relative;
-  display: none;
-}
-.pokemon.sheet.characterSheet .container input:checked ~ .checkmark:after {
-  display: block;
-}
-.pokemon.sheet.characterSheet .container .checkmark:after {
-  top: 5px;
-  left: 13px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: black;
-}
 .pokemon.sheet.characterSheet .combatBox {
   display: flex;
   flex-direction: column;

system.json

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