✨

less/character-sheet.less

@@ -146,11 +146,12 @@
         flex-direction: column;
         align-items: center;
         width: 200px;
+        height: 400px;
         border-right: #5e0000;
     }
 
     .imgBox {
-        height: 165px;
+        height: 170px;
         width: 180px;
         padding: 0 20px;
         background-color: #b0b0b0;
@@ -160,8 +161,8 @@
         -o-border-radius: 15px;
 
 		position: absolute;
-		bottom: 0;
+		top: 120;
-		left: 0;
+		left: 20;
     }
 
     .imgBox:after {
@@ -171,7 +172,8 @@
 		height: 0;
         float: left;
         position: absolute;
-        left: 20px;
+        left: 0px;
+        bottom: 0px
 	}
 
     .screen {
@@ -194,6 +196,75 @@
         justify-content: center;
 	}
 
+    div#topPicture
+	{
+		margin: 6px auto;
+		width: 40px;
+	}
+
+	div#buttontopPicture1, div#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;
+	}
+
+	div#buttontopPicture1
+	{
+		margin-right: 20px;
+	}
+
+	div#buttonbottomPicture
+	{
+		height: 26px;
+		width: 26px;
+		background-color: #c00d0d;
+		margin-left: 35px;
+		float: left;
+
+		border-radius: 30px;
+		-webkit-border-radius: 30px;
+		-moz-border-radius: 30px;
+		-o-border-radius: 30px;
+
+		box-shadow: -2px 1px #5e0000;
+		-webkit-box-shadow: -2px 1px #5e0000;
+		-moz-box-shadow: -2px 1px #5e0000;
+		-o-box-shadow: -2px 1px #5e0000;
+
+		background: linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+		background: -webkit-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+		background: -moz-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+		background: -o-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+	}
+
+	div#speakers
+	{
+		float: right;
+		width: 75px;
+		height: 25px;
+		margin-right: 20px;
+	}
+
+	div.sp
+	{
+		height: 3px;
+		margin-bottom: 5px;
+		background-color: #494949;
+
+		border-radius: 30px;
+		-webkit-border-radius: 30px;
+		-moz-border-radius: 30px;
+		-o-border-radius: 30px;
+	}
+
     .charImg {
 		max-height: 95px;
 		max-width: 125px;
@@ -202,12 +273,18 @@
     }
 
     .vertLine {
-        height: 100%;
+        position: absolute;
+        height: 400px;
+        float: left;
+        left: 200px;
+        bottom: 0px;
         width: 5px;
         background-color: #5e0000;
     }
 
     .menuBox {
         background-color: #5e0000;
+        border: none;
+        padding: 0px 10px;
     }
 }

pokemon.css

@@ -123,10 +123,11 @@
   flex-direction: column;
   align-items: center;
   width: 200px;
+  height: 400px;
   border-right: #5e0000;
 }
 .pokemon.sheet.characterSheet .imgBox {
-  height: 165px;
+  height: 170px;
   width: 180px;
   padding: 0 20px;
   background-color: #b0b0b0;
@@ -135,8 +136,8 @@
   -moz-border-radius: 15px;
   -o-border-radius: 15px;
   position: absolute;
-  bottom: 0;
+  top: 120;
-  left: 0;
+  left: 20;
 }
 .pokemon.sheet.characterSheet .imgBox:after {
   content: "";
@@ -145,7 +146,8 @@
   height: 0;
   float: left;
   position: absolute;
-  left: 20px;
+  left: 0px;
+  bottom: 0px;
 }
 .pokemon.sheet.characterSheet .screen {
   height: 110px;
@@ -163,6 +165,59 @@
   align-items: center;
   justify-content: center;
 }
+.pokemon.sheet.characterSheet div#topPicture {
+  margin: 6px auto;
+  width: 40px;
+}
+.pokemon.sheet.characterSheet div#buttontopPicture1,
+.pokemon.sheet.characterSheet div#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 div#buttontopPicture1 {
+  margin-right: 20px;
+}
+.pokemon.sheet.characterSheet div#buttonbottomPicture {
+  height: 26px;
+  width: 26px;
+  background-color: #c00d0d;
+  margin-left: 35px;
+  float: left;
+  border-radius: 30px;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  -o-border-radius: 30px;
+  box-shadow: -2px 1px #5e0000;
+  -webkit-box-shadow: -2px 1px #5e0000;
+  -moz-box-shadow: -2px 1px #5e0000;
+  -o-box-shadow: -2px 1px #5e0000;
+  background: linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+  background: -webkit-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+  background: -moz-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+  background: -o-linear-gradient(top, #c00d0d 0%, #8b0000 80%);
+}
+.pokemon.sheet.characterSheet div#speakers {
+  float: right;
+  width: 75px;
+  height: 25px;
+  margin-right: 20px;
+}
+.pokemon.sheet.characterSheet div.sp {
+  height: 3px;
+  margin-bottom: 5px;
+  background-color: #494949;
+  border-radius: 30px;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  -o-border-radius: 30px;
+}
 .pokemon.sheet.characterSheet .charImg {
   max-height: 95px;
   max-width: 125px;
@@ -170,10 +225,16 @@
   width: auto;
 }
 .pokemon.sheet.characterSheet .vertLine {
-  height: 100%;
+  position: absolute;
+  height: 400px;
+  float: left;
+  left: 200px;
+  bottom: 0px;
   width: 5px;
   background-color: #5e0000;
 }
 .pokemon.sheet.characterSheet .menuBox {
   background-color: #5e0000;
+  border: none;
+  padding: 0px 10px;
 }

system.json

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