✨

lang/en.json

@@ -3,6 +3,7 @@
         "SystemName": "Pokémon TTRPG",
         "System": {
             "LevelShort": "LvL",
+            "ExperienceShort": "EXP",
             "ArmorClass": "Armor Class",
             "Speed": "Speed"
         }

less/character-sheet.less

@@ -5,13 +5,17 @@
         color: white;
         width: 100%;
         height: 100%;
-        font-family: Arial, Helvetica, sans-serif;
+
+        @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
+        font-family: "VT323", Arial, Helvetica, sans-serif;
     };
 
     .headerBox {
         float: left;
         width: 100%;
-        height: 80px;
+        height: 100px;
+
+        display: flex;
     };
 
     .inputText {
@@ -32,6 +36,7 @@
 
     .bigInputText {
         font-size: 21px;
+        font-weight: 600;
 
         padding-left: 10px;
         padding-right: 10px;
@@ -42,14 +47,50 @@
     }
 
     .smallInputText {
-        font-size: 18px;
+        font-size: 14px;
 
         padding-left: 10px;
         padding-right: 10px;
-        padding-top: 20px;
+        padding-top: 10px;
-        padding-bottom: 20px;
+        padding-bottom: 10px;
 
         margin-top: 5px;
+        width: 60%;
+    }
+
+    .lvlBox {
+        width: 50px;
+        height: 50px;
+        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;
+    }
+
+    .expBox {
+        display: flex;
+        width: 50px;
+        height: 30px;
+        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;
     }
 
     .sideBarBox {

pokemon.css

@@ -3,12 +3,20 @@
   color: white;
   width: 100%;
   height: 100%;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "VT323", Arial, Helvetica, sans-serif;
+}
+@font-face {
+  font-family: 'VT323';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/vt323/v17/pxiKyp0ihIEF2hsY.ttf) format('truetype');
 }
 .pokemon.sheet.characterSheet .headerBox {
   float: left;
   width: 100%;
-  height: 80px;
+  height: 100px;
+  display: flex;
 }
 .pokemon.sheet.characterSheet .inputText {
   background-color: #30da0c;
@@ -25,6 +33,7 @@
 }
 .pokemon.sheet.characterSheet .bigInputText {
   font-size: 21px;
+  font-weight: 600;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 20px;
@@ -32,12 +41,42 @@
   margin-bottom: 5px;
 }
 .pokemon.sheet.characterSheet .smallInputText {
-  font-size: 18px;
+  font-size: 14px;
   padding-left: 10px;
   padding-right: 10px;
-  padding-top: 20px;
+  padding-top: 10px;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
   margin-top: 5px;
+  width: 60%;
+}
+.pokemon.sheet.characterSheet .lvlBox {
+  width: 50px;
+  height: 50px;
+  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;
+}
+.pokemon.sheet.characterSheet .expBox {
+  display: flex;
+  width: 50px;
+  height: 30px;
+  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;
 }
 .pokemon.sheet.characterSheet .sideBarBox {
   visibility: hidden;

system.json

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

templates/sheets/character/header.hbs

@@ -1,20 +1,16 @@
 <div class="headerBox">
-
-    {{!-- <div class="logoBox">
-        <div class="logoImg"><div class="logoText">{{localize "POKEMON.SystemName"}}</div></div>
-    </div> --}}
-
-    <div class="charInfoBox">
     <div class="charInfo">
         <input class="inputText bigInputText" type="text" name="name" value="{{actor.name}}">
         <input class="inputText smallInputText" type="text" name="species" value="{{actor.species}}">
     </div>
+    <div class="advancementBox">
         <div class="lvlBox">
             <div class="lvlLabel">{{localize "POKEMON.System.LevelShort"}}</div>
             <div class="lvlValue">{{system.experience.level}}</div>
         </div>
         <div class="expBox">
-            <div class="expValue">{{system.experience.EXP}} EXP</div>
+            <div class="expLabel">{{localize "POKEMON.System.ExperienceShort"}}:</div>
+            <div class="expValue">{{system.experience.EXP}}</div>
         </div>
     </div>
 </div>