Bugfixes, Images from Github and Darkmode

This in a future proofing update for the Pokeymanz sheet. We cleaned some bugs, changed the images to pull directly from the GitHub folder and added some support for Dark Mode, enough to make the white background border disappear when the user change modes, enhancing the overall experience. We also added a Help Button that explain how some things of the sheet works and point to roll20 wiki for more detailed explanations.

Pokeymanz/Pokeymanz.css

@@ -1,10 +1,16 @@
 /* Character Sheet Tabs - Pokemon vs Trainer*/
 .charsheet {
-  background-color: rgb(255, 255, 255);
-  background-repeat: repeat;
-  color: rgb(0, 0, 0);
-  margin: 0;
-  padding: 0;
+  width: 750px !important;
+  margin: 0 auto !important;
+  padding: 0px !important;
+}
+
+.sheet-darkmode {
+  background: #1f1f1f;
+  color: #c0c0c0;
+}
+.sheet-darkmode .sheetform {
+  background-color: #1f1f1f;
 }
 
 /*Configure the tab buttons*/
@@ -49,7 +55,6 @@
     font-size: 16px;
     resize: none;
     text-align:center;
-    font-weight:bold;
   }
   
   .sm-slt-white {
@@ -137,6 +142,10 @@
   button[type='roll']::before {
     content: '' !important;
   }
+
+  .dropdown {
+    appearance: none;
+  }
   
   /*--------------------------------CUSTOM ROLL TEMPLATE--------------------------------*/
   
@@ -293,7 +302,7 @@
   }
   
   button[type="roll"].sheet-pokeball:hover{
-    background-image: url("https://i.ibb.co/ThMVCPL/Roll-Button2.png");
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/RollButton2.png");
     background-size: 34px 34px;
     background-repeat: no-repeat;
     background-position: 0;
@@ -305,7 +314,7 @@
   }
   
   button[type="roll"].sheet-pokeball{
-    background-image: url("https://i.ibb.co/s1xvfxq/Roll-Button.png"); 
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/RollButton.png"); 
     background-size: 34px 34px;
     background-repeat: no-repeat;
     background-position: 0;
@@ -322,16 +331,16 @@
   }
   
   button[type="action"].sheet-pokemon:hover{
-    background-image: url("https://i.ibb.co/GMdBnhG/poke-sheet-symbol.png");
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/poke-sheet-symbol.png");
     opacity: 100%;
   }
   
   button[type="action"].sheet-pokemon{
-    background-image: url("https://i.ibb.co/sKfF6bh/trainer-sheet-symbol.png"); 
-    background-size: 34px 34px;
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/trainer-sheet-symbol.png"); 
+    background-size: 34px 52px;
     background-repeat: no-repeat;
     width: 34px;
-    height: 34px;
+    height: 52px;
     border-style: none;
     background-color: transparent;
     margin-left: 0px;
@@ -343,23 +352,51 @@
   }
   
   button[type="action"].sheet-trainer:hover{
-    background-image: url("https://i.ibb.co/sKfF6bh/trainer-sheet-symbol.png");
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/trainer-sheet-symbol.png");
     opacity: 100%;
   }
   
   button[type="action"].sheet-trainer{
-    background-image: url("https://i.ibb.co/GMdBnhG/poke-sheet-symbol.png"); 
-    background-size: 34px 34px;
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/poke-sheet-symbol.png"); 
+    background-size: 34px 52px;
     background-repeat: no-repeat;
     width: 34px;
-    height: 34px;
+    height: 52px;
     border-style: none;
     background-color: transparent;
     margin-left: 0px;
     opacity: 80%;
   }
 
-
+  button[type="roll"].sheet-help:before{
+    content: ' ';
+  }
+  
+  button[type="roll"].sheet-help:hover{
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/help-button.png");
+    background-size: 89px 53px;
+    background-repeat: no-repeat;
+    background-position: 0;
+    width: 89px;
+    height: 53px;
+    border-style: none;
+    background-color: transparent;
+    margin-left: 0px;
+    opacity: 100%;
+  }
+  
+  button[type="roll"].sheet-help{
+    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/help-button.png"); 
+    background-size: 89px 53px;
+    background-repeat: no-repeat;
+    background-position: 0;
+    width: 89px;
+    height: 53px;
+    border-style: none;
+    background-color: transparent;
+    margin-left: 0px;
+    opacity: 60%;
+  }
 /* Trainer Inventory Tabs */
 
 /*Configure the tab buttons*/
@@ -393,12 +430,12 @@ button[type="action"].sheet-button-pokeballs:before{
 }
 
 button[type="action"].sheet-button-pokeballs:hover{
-  background-image: url("https://i.ibb.co/fQw9h6H/Poke-Balls-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Poke-Balls-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-pokeballs{
-  background-image: url("https://i.ibb.co/bRYHVnr/Poke-Balls-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Poke-Balls-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -414,12 +451,12 @@ button[type="action"].sheet-button-medicines:before{
 }
 
 button[type="action"].sheet-button-medicines:hover{
-  background-image: url("https://i.ibb.co/J3c6SNr/Medicines-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Medicines-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-medicines{
-  background-image: url("https://i.ibb.co/Z6jV3L7/Medicines-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Medicines-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -435,12 +472,12 @@ button[type="action"].sheet-button-battleitems:before{
 }
 
 button[type="action"].sheet-button-battleitems:hover{
-  background-image: url("https://i.ibb.co/Ycr8nMS/Battle-Items-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Battle-Items-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-battleitems{
-  background-image: url("https://i.ibb.co/dj2BwZf/Battle-Items-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Battle-Items-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -456,12 +493,12 @@ button[type="action"].sheet-button-berries:before{
 }
 
 button[type="action"].sheet-button-berries:hover{
-  background-image: url("https://i.ibb.co/PG0vMzZ/Berries-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Berries-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-berries{
-  background-image: url("https://i.ibb.co/SQP6F8n/Berries-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Berries-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -477,12 +514,12 @@ button[type="action"].sheet-button-tmtrs:before{
 }
 
 button[type="action"].sheet-button-tmtrs:hover{
-  background-image: url("https://i.ibb.co/NKJZz8x/TRTM-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/TRTM-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-tmtrs{
-  background-image: url("https://i.ibb.co/h7RjCGS/TMTR-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/TMTR-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -498,12 +535,12 @@ button[type="action"].sheet-button-treasures:before{
 }
 
 button[type="action"].sheet-button-treasures:hover{
-  background-image: url("https://i.ibb.co/nnGCjbD/Treasures-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Treasures-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-treasures{
-  background-image: url("https://i.ibb.co/BqqFS4g/Treasures-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Treasures-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -519,12 +556,12 @@ button[type="action"].sheet-button-keys:before{
 }
 
 button[type="action"].sheet-button-keys:hover{
-  background-image: url("https://i.ibb.co/Fh5v57P/Key-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Key-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-keys{
-  background-image: url("https://i.ibb.co/3scZjMy/Key-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Key-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -540,12 +577,12 @@ button[type="action"].sheet-button-otheritems:before{
 }
 
 button[type="action"].sheet-button-otheritems:hover{
-  background-image: url("https://i.ibb.co/ZG6y0TK/Others-selected.png");
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Others-selected.png");
   opacity: 100%;
 }
 
 button[type="action"].sheet-button-otheritems{
-  background-image: url("https://i.ibb.co/z60Prxz/Others-float.png"); 
+  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Pokeymanz/images/Others-float.png"); 
   background-size: 35px 24px;
   background-repeat: no-repeat;
   width: 35px;
@@ -556,5 +593,8 @@ button[type="action"].sheet-button-otheritems{
   opacity: 60%;
 }
 
+/* End of Trainer Inventory Tabs */
 
-/* End of Trainer Inventory Tabs */
+body.sheet-darkmode .charsheet {
+	color: #eee
+}