✨

lang/en.json

@@ -4,7 +4,7 @@
         "System": {
             "LevelShort": "LvL",
             "ExperienceShort": "EXP",
-            "ArmorClass": "Armor Class",
+            "ArmorClass": "AC",
             "Speed": "Speed"
         }
     }

less/character-sheet.less

@@ -53,12 +53,12 @@
     }
 
     .smallInputText {
-        font-size: 14px;
+        font-size: 16px;
 
         padding-left: 10px;
         padding-right: 10px;
-        padding-top: 10px;
+        padding-top: 8px;
-        padding-bottom: 10px;
+        padding-bottom: 8px;
 
         margin-top: 5px;
         width: 60%;
@@ -167,8 +167,8 @@
 
     .imgBox:after {
 		content: "";
-		border-top: 40px solid #b0b0b0;
+		border-top: 30px solid #b0b0b0;
-		border-left: 40px solid #c00d0d;
+		border-left: 30px solid #c00d0d;
 		height: 0;
         float: left;
         position: absolute;
@@ -196,37 +196,12 @@
         justify-content: center;
 	}
 
-    .topPicture
-	{
-		margin: 6px auto;
-		width: 40px;
-	}
-
-	.buttontopPicture1, .buttontopPicture2
-	{
-		height: 8px;
-		width: 8px;
-		background-color: #c00d0d;
-		border: 1px solid #000;
-		float: left;
-
-		border-radius: 15px;
-		-webkit-border-radius: 15px;
-		-moz-border-radius: 15px;
-		-o-border-radius: 15px;
-	}
-
-	.buttontopPicture1
-	{
-		margin-right: 20px;
-	}
-
 	.buttonbottomPicture
 	{
 		height: 26px;
 		width: 26px;
 		background-color: #c00d0d;
-		margin-left: 35px;
+		margin-left: 20px;
 		float: left;
 
 		border-radius: 30px;
@@ -251,6 +226,9 @@
 		width: 75px;
 		height: 25px;
 		margin-right: 20px;
+        right: 0px;
+        bottom: 7px;
+        position: absolute;
 	}
 
 	.sp
@@ -286,6 +264,39 @@
         margin-top: 200px;
     }
 
+    .hitPointBox {
+        display: flex;
+    }
+
+    .row {
+        display: flex;
+    }
+
+    .charHex {
+        width: 50px;
+        height: 50px;
+        background-color: #30da0c;
+        color: black;
+        border: black;
+
+        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;
+
+        padding: 5px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: center;
+        text-align: center;
+    }
+
     .menuBox {
         background-color: #5e0000;
         border: none;

pokemon.css

@@ -46,11 +46,11 @@
   margin-bottom: 5px;
 }
 .pokemon.sheet.characterSheet .smallInputText {
-  font-size: 14px;
+  font-size: 16px;
   padding-left: 10px;
   padding-right: 10px;
-  padding-top: 10px;
+  padding-top: 8px;
-  padding-bottom: 10px;
+  padding-bottom: 8px;
   margin-top: 5px;
   width: 60%;
 }
@@ -141,8 +141,8 @@
 }
 .pokemon.sheet.characterSheet .imgBox:after {
   content: "";
-  border-top: 40px solid #b0b0b0;
+  border-top: 30px solid #b0b0b0;
-  border-left: 40px solid #c00d0d;
+  border-left: 30px solid #c00d0d;
   height: 0;
   float: left;
   position: absolute;
@@ -165,30 +165,11 @@
   align-items: center;
   justify-content: center;
 }
-.pokemon.sheet.characterSheet .topPicture {
-  margin: 6px auto;
-  width: 40px;
-}
-.pokemon.sheet.characterSheet .buttontopPicture1,
-.pokemon.sheet.characterSheet .buttontopPicture2 {
-  height: 8px;
-  width: 8px;
-  background-color: #c00d0d;
-  border: 1px solid #000;
-  float: left;
-  border-radius: 15px;
-  -webkit-border-radius: 15px;
-  -moz-border-radius: 15px;
-  -o-border-radius: 15px;
-}
-.pokemon.sheet.characterSheet .buttontopPicture1 {
-  margin-right: 20px;
-}
 .pokemon.sheet.characterSheet .buttonbottomPicture {
   height: 26px;
   width: 26px;
   background-color: #c00d0d;
-  margin-left: 35px;
+  margin-left: 20px;
   float: left;
   border-radius: 30px;
   -webkit-border-radius: 30px;
@@ -208,6 +189,9 @@
   width: 75px;
   height: 25px;
   margin-right: 20px;
+  right: 0px;
+  bottom: 7px;
+  position: absolute;
 }
 .pokemon.sheet.characterSheet .sp {
   height: 3px;
@@ -236,6 +220,33 @@
 .pokemon.sheet.characterSheet .calcStatBox {
   margin-top: 200px;
 }
+.pokemon.sheet.characterSheet .hitPointBox {
+  display: flex;
+}
+.pokemon.sheet.characterSheet .row {
+  display: flex;
+}
+.pokemon.sheet.characterSheet .charHex {
+  width: 50px;
+  height: 50px;
+  background-color: #30da0c;
+  color: black;
+  border: black;
+  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;
+  padding: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  text-align: center;
+}
 .pokemon.sheet.characterSheet .menuBox {
   background-color: #5e0000;
   border: none;

system.json

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

templates/sheets/character/sidebar.hbs

@@ -2,10 +2,6 @@
     <div class="sidebarBox">
 
         <div class="imgBox">
-            <div class="topPicture">
-                <div class="buttontopPicture"></div>
-                <div class="buttontopPicture"></div>
-            </div>
             <div class="screen">
                 <img class="charImg" src="{{actor.img}}" data-edit="img" data-action="editImage" title="{{actor.name}}" >
             </div>
@@ -19,12 +15,16 @@
         </div>
 
         <div class="calcStatBox">
+            <div class="hitPointBox">
                 <div class="charHex charHPCurrent"><span class="charHexHead">HP</span></br><span class="charHexValue">{{system.hp.current}}</span></div>
                 <div class="charHex charHPMax"><span class="charHexHead">Max</span></br><span class="charHexValue">{{system.hp.max}}</span></div>
+            </div>
+            <div class="row">
                 <div class="charHex"><span class="charHexHead">{{localize "POKEMON.System.ArmorClass"}}</span></br><span class="charHexValue">{{system.armorClass}}</span></div>
                 <div class="charHex"><span class="charHexHead">{{localize "POKEMON.System.Speed"}}</span></br><span class="charHexValue">{{system.speed}}</span></div>
             </div>
         </div>
+    </div>
 
     <div class="vertLine"></div>