feat: Adds images and finishes dark mode changes

- Turns off the reliance on legacy character sheet tasks
- Adds dark mode colour changes
- Adds images to the repository for safer linking
- Updates sheet HTML to use background images rather than img elements

D&D_BECM/BDnDSheet.css

@@ -3,13 +3,13 @@
 .charsheet {
 	--background: #ffffff;
 	--border: #000000;
+	--button-background: #e6e6e6;
 	--disabled-input-background: #eaffef;
 	--disabled-input-border: #dddddd;
-	--disabled-passive-background: #def6fc;
-	--foreground-text: #1E1523;
-	--footer-background: #faca4e33;
-	--header-background: #000000;
-	--header-text: #ffffff;
+	--foreground-text: #1e1523;
+	--footer-background: #fdf6e0;
+	--header-background: var(--border);
+	--header-text: var(--background);
 	--is-player-character: #65763c;
 	--not-player-character: #93537c;
 	--repeating-section-background: #eeeeee;
@@ -18,9 +18,39 @@
 	--selected-tab-background: #ab8b57;
 	--spell-header: #c7d1bf;
 	--subheader-background: #cecece;
+	--textarea-background: #f5f5f5;
+	--textarea-border: #cecece;
 	--unselected-spell-effect: #8c6075;
 	--unselected-subtab-background: #56b4e9;
 	--unselected-tab-background: #4a6486;
+
+	background-color: var(--background);
+}
+
+body.sheet-darkmode .charsheet {
+	--background: #1f1f1f;
+	--border: #b3b3b3;
+	--button-background: #353535;
+	--disabled-input-background: var(--repeating-section-background);
+	--disabled-input-border: var(--border);
+	--footer-background: var(--border);
+	--foreground-text: #e6e6e6;
+	--header-background: var(--border);
+	--header-text: #353535;
+	--is-player-character: #97a86e;
+	--not-player-character: #c585ae;
+	--repeating-section-background: #2a2a2a;
+	--selected-spell-effect: #b9cc9c;
+	--selected-subtab-background: #32d0a5;
+	--selected-tab-background: #ddbd89;
+	--spell-header: #555555;
+	--subheader-background: var(--header-text);
+	--textarea-background: var(--background);
+	--textarea-border: var(--border);
+	--unselected-spell-effect: #8c6075;
+	--unselected-spell-effect: #be92a7;
+	--unselected-subtab-background: #88e6ff;
+	--unselected-tab-background: #7c96b8;
 }
 
 .sheet-rolltemplate-5eDefault {
@@ -197,6 +227,41 @@
 	padding: 10px;
 }
 
+/* Logo and Footer */
+.sheet-logo {
+	--background-image: url("https://i.imgur.com/D36CQPG.png");
+	background-image: var(--background-image);
+	background-position: left top;
+	background-repeat: no-repeat;
+	background-size: contain;
+	min-height: 50px;
+}
+
+.sheet-footer {
+	background-color: var(--footer-background);
+	border-radius: 12px;
+	margin-top: 3px;
+	padding: 3px 0px;
+	vertical-align: bottom;
+}
+
+.sheet-footer-image {
+	--background-image: url("http://i.imgur.com/QQpi55r.png");
+	background-image: var(--background-image);
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	min-height: 30px;
+}
+
+.sheet-darkmode .sheet-logo {
+	--background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d7ab1b5c-ffb7-4f05-ae14-7f584918b549/da3bh57-2bb8f0c1-0c51-4928-8335-4d1854262242.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2Q3YWIxYjVjLWZmYjctNGYwNS1hZTE0LTdmNTg0OTE4YjU0OVwvZGEzYmg1Ny0yYmI4ZjBjMS0wYzUxLTQ5MjgtODMzNS00ZDE4NTQyNjIyNDIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.tEMCOLw96HHJZmbmp1ts0dWb0awyQJKf2G8ZGxaFm2U");
+}
+
+.sheet-darkmode .sheet-footer-image {
+	--background-image: url("http://i.imgur.com/QQpi55r.png");
+}
+
 /* Tweak repeating section buttons so they have a bottom margin and dont overflow when in edit mode. */
 div[class^="repcontrol"] {
 	margin-bottom: 5px;
@@ -218,9 +283,9 @@ input.sheet-is-force:not(:checked) ~ div.sheet-character {
 	display: block;
 }
 
-input.sheet-is-force {
+.charsheet input.sheet-is-force {
 	cursor: pointer;
-	height: 16px;
+	height: 20px;
 	opacity: 0;
 	position: relative;
 	width: 20%;
@@ -240,14 +305,13 @@ span.sheet-is-force-tab {
 	font-weight: bold;
 	height: 16px;
 	margin-left: -20%;
+	padding-top: 4px;
 	text-align: center;
 	width: 20%;
 }
 
 input.sheet-is-force:checked + span.sheet-is-force-tab {
 	background: var(--not-player-character);
-	border-radius: 4px;
-	color: var(--header-text);
 }
 
 input.sheet-is-force:checked + span.sheet-is-force-tab::before {
@@ -264,9 +328,9 @@ input.sheet-is-npc:checked ~ div.sheet-npcinfo {
 	display: block;
 }
 
-input.sheet-is-npc {
+.charsheet input.sheet-is-npc {
 	cursor: pointer;
-	height: 16px;
+	height: 20px;
 	opacity: 0;
 	position: relative;
 	width: 10%;
@@ -285,16 +349,14 @@ span.sheet-is-npc-tab {
 	font-size: 9px;
 	font-weight: bold;
 	height: 16px;
-	margin-left: -10%;
-	padding-top: 2px;
+	margin: 5px -10%;
+	padding-top: 4px;
 	text-align: center;
 	width: 10%;
 }
 
 input.sheet-is-npc:checked + span.sheet-is-npc-tab {
 	background: var(--not-player-character);
-	border-radius: 4px;
-	color: var(--header-text);
 }
 
 input.sheet-is-npc:checked + span.sheet-is-npc-tab::before {
@@ -302,7 +364,35 @@ input.sheet-is-npc:checked + span.sheet-is-npc-tab::before {
 }
 /* End NPC Button Settings */
 
+/* Button Settings */
+.charsheet button[type="roll"],
+.charsheet div.repcontrol button.btn {
+	background-color: var(--button-background);
+	color: var(--foreground-text);
+    background-image: linear-gradient(top, var(--background), var(--button-background));
+	background-image: -moz-linear-gradient(top, var(--background), var(--button-background));
+    background-image: -ms-linear-gradient(top, var(--background), var(--button-background));
+    background-image: -o-linear-gradient(top, var(--background), var(--button-background));
+    background-image: -webkit-linear-gradient(top, var(--background), var(--button-background));
+}
+
+.sheet-darkmode .charsheet button[type="roll"],
+.sheet-darkmode .charsheet div.repcontrol button.btn {
+	background-color: var(--background);
+    background-image: linear-gradient(top, var(--button-background), var(--background));
+	background-image: -moz-linear-gradient(top, var(--button-background), var(--background));
+    background-image: -ms-linear-gradient(top, var(--button-background), var(--background));
+    background-image: -o-linear-gradient(top, var(--button-background), var(--background));
+    background-image: -webkit-linear-gradient(top, var(--button-background), var(--background));
+}
+
+/* End Button Settings */
+
 /* Main Sheet Tabs */
+.charsheet input[type="checkbox"] {
+	mix-blend-mode: luminosity;
+}
+
 div[class^="sheet-section"] {
 	display: none;
 }
@@ -317,7 +407,7 @@ input.sheet-tab99:checked ~ div[class^="sheet-section"] {
 	display: block;
 }
 
-input.sheet-tab {
+.charsheet input.sheet-tab {
 	cursor: pointer;
 	height: 20px;
 	opacity: 0;
@@ -341,6 +431,10 @@ span.sheet-tab {
 	width: 87px;
 }
 
+/* .sheet-darkmode span.sheet-tab {
+	color: var(--foreground-text);
+} */
+
 input.sheet-tab1:checked + span.sheet-tab1,
 input.sheet-tab2:checked + span.sheet-tab2,
 input.sheet-tab3:checked + span.sheet-tab3,
@@ -427,6 +521,7 @@ div[data-groupname^="repeating_spellbook"] .repitem,
 	background: var(--repeating-section-background);
 	border: var(--border) 1px solid;
 	border-radius: 12px;
+	color: var(--foreground-text);
 	margin-bottom: 5px;
 	margin-left: 1px;
 }
@@ -675,6 +770,10 @@ span.sheet-spacer,
 	margin-top: 5px;
 }
 
+span.sheet-divider {
+	color: var(--foreground-text);
+}
+
 .sheet-vert-middle,
 .sheet-rolltemplate-5eDefault .sheet-vert-middle {
 	vertical-align: middle !important;
@@ -694,17 +793,19 @@ span.sheet-spacer,
 	text-align: right;
 }
 
-textarea {
+.sheet-overall-wrapper textarea {
+	background-color: var(--textarea-background);
+	border-color: var(--textarea-border);
 	height: 150px;
 	resize: none;
 	width: calc(100% - 10px);
 }
 
-.sheet-small-textarea {
+textarea.sheet-small-textarea {
 	height: 50px;
 }
 
-.sheet-medium-textarea {
+textarea.sheet-medium-textarea {
 	height: 100px;
 }
 
@@ -724,13 +825,6 @@ input[disabled] {
 	-moz-appearance: textfield;
 }
 
-input[disabled].sheet-passive-skill-score {
-	background-color: var(--disabled-passive-background);
-	border-color: var(--disabled-input-border);
-	cursor: not-allowed;
-	-moz-appearance: textfield;
-}
-
 input[disabled]::-webkit-inner-spin-button,
 input[disabled]::-webkit-outer-spin-button {
 	-webkit-appearance: none;
@@ -760,13 +854,6 @@ select {
 	vertical-align: bottom;
 }
 
-.sheet-footer {
-	background-color: var(--footer-background);
-	border-radius: 12px;
-	margin-top: 3px;
-	vertical-align: bottom;
-}
-
 .sheet-spell-header {
 	background-color: var(--spell-header);
 	border-radius: 12px;

D&D_BECM/BDnDSheet.html

@@ -6,7 +6,7 @@
 <!--Main Header -->
   <div class="sheet-core-header sheet-padb">
 		<div class="sheet-row">
-			<div class="sheet-col-1-4 sheet-margin-top"><img src="http://i.imgur.com/D36CQPG.png" alt="Dungeons and Dragons (BECM Clasic edition)" width=150 ></div>
+			<div class="sheet-col-1-4 sheet-margin-top sheet-logo" title="Dungeons and Dragons (BECM Clasic edition)"></div>
 			<div class="sheet-col-1-8 sheet-center sheet-margin-top"><p class="sheet-last-updated">Sheet version<br/>3rd october 2018</p></div>
 			<div class="sheet-col-1-4 sheet-small-label sheet-center"><input class="sheet-underlined sheet-center" type="text" name="attr_character_name"><br/>Character Name</div>
 			<div class="sheet-col-1-8 sheet-small-label sheet-center"><input class="sheet-underlined sheet-center" type="text" name="attr_class"><br/>Class</div>
@@ -2739,12 +2739,12 @@
 						</div>
 						<span class="sheet-spacer"></span>
 						<span class="sheet-small-label">Show :</span>
-							<input type="checkbox" name="attr_spelltypeadvanced" class="sheet-spelltypetab sheet-spelltypeadvanced" value="1" /><span class="sheet-spelltypetab sheet-spelltypeadvanced">Description</span>
-							| <input type="checkbox" name="attr_spelltypeattack" class="sheet-spelltypetab sheet-spelltypeattack" value="1" /><span class="sheet-spelltypetab sheet-spelltypeattack">Attack</span>
-							<input type="checkbox" name="attr_spelltypesave" class="sheet-spelltypetab sheet-spelltypesave" value="1" /><span class="sheet-spelltypetab sheet-spelltypesave">Save</span>
-							<input type="checkbox" name="attr_spelltypeheal" class="sheet-spelltypetab sheet-spelltypeheal" value="1" /><span class="sheet-spelltypetab sheet-spelltypeheal">Healing</span> |
-							<input type="checkbox" name="attr_spelltypdamage" class="sheet-spelltypetab sheet-spelltypedamage" value="1" /><span class="sheet-spelltypetab sheet-spelltypedamage">Damage</span>
-							<input type="checkbox" name="attr_spelltypeeffects" class="sheet-spelltypetab sheet-spelltypeeffects" value="1" /><span class="sheet-spelltypetab sheet-spelltypeeffects">Effects</span>
+						<input type="checkbox" name="attr_spelltypeadvanced" class="sheet-spelltypetab sheet-spelltypeadvanced" value="1" /><span class="sheet-spelltypetab sheet-spelltypeadvanced">Description</span> |
+						<input type="checkbox" name="attr_spelltypeattack" class="sheet-spelltypetab sheet-spelltypeattack" value="1" /><span class="sheet-spelltypetab sheet-spelltypeattack">Attack</span>
+						<input type="checkbox" name="attr_spelltypesave" class="sheet-spelltypetab sheet-spelltypesave" value="1" /><span class="sheet-spelltypetab sheet-spelltypesave">Save</span>
+						<input type="checkbox" name="attr_spelltypeheal" class="sheet-spelltypetab sheet-spelltypeheal" value="1" /><span class="sheet-spelltypetab sheet-spelltypeheal">Healing</span> |
+						<input type="checkbox" name="attr_spelltypdamage" class="sheet-spelltypetab sheet-spelltypedamage" value="1" /><span class="sheet-spelltypetab sheet-spelltypedamage">Damage</span>
+						<input type="checkbox" name="attr_spelltypeeffects" class="sheet-spelltypetab sheet-spelltypeeffects" value="1" /><span class="sheet-spelltypetab sheet-spelltypeeffects">Effects</span>
 						<span class="sheet-spacer"></span>
 						<div class="sheet-spell-type-advanced">
 							<div class="sheet-row">
@@ -2897,7 +2897,7 @@
 			</div>
 			<!--Encumbrance and Inventory Locations -->
 			<div class="sheet-col-1-2">
-				<h4 class="sheet-center">Encumbrence (in coins) <span class="sheet-pictos">a</span></h4>
+				<h4 class="sheet-center">Encumbrance (in coins) <span class="sheet-pictos">a</span></h4>
 				<div class="sheet-row sheet-sub-header">
 					<div class="sheet-col-1-4 sheet-center sheet-small-label">Inventory</div>
 					<div class="sheet-col-1-4 sheet-center sheet-small-label">Coin</div>
@@ -3211,7 +3211,7 @@
 <div class="sheet-force">
 	<div class="sheet-core-header sheet-padb">
 		<div class="sheet-row">
-			<div class="sheet-col-1-4 sheet-margin-top"><img src="http://i.imgur.com/D36CQPG.png" alt="Dungeons and Dragons (BECM Clasic edition)" width=150 ></div>
+			<div class="sheet-col-1-4 sheet-margin-top sheet-logo" title="Dungeons and Dragons (BECM Clasic edition)"></div>
 			<div class="sheet-col-1-8 sheet-center sheet-margin-top"><p class="sheet-last-updated">Sheet version<br/>26th May 2015</p></div>
 			<div class="sheet-col-1-4 sheet-small-label sheet-center"><input class="sheet-underlined sheet-center" type="text" name="attr_force_name"><br/>Force Name</div>
 			<div class="sheet-col-1-8 sheet-small-label sheet-center"><input class="sheet-underlined sheet-center" type="text" name="attr_troop_class"><br/>Troop Class</div>
@@ -3401,9 +3401,7 @@
 </div>
 <!--Footer -->
 	<div class="sheet-row sheet-footer">
-		<div class="sheet-col-1 sheet-small-label sheet-center">
-			<img src="http://i.imgur.com/QQpi55r.png" width=300 >
-		</div>
+		<div class="sheet-footer-image"></div>
 	</div>
 </div>
 <!-- Roll Templates -->

D&D_BECM/ReadMe.md

@@ -8,6 +8,8 @@ This version of the sheet incorporates roll templates, autocalculation of AC, mo
 
 ### Changelog
 * May 26 Update	Added basic Warmachine and NPC info
+* Sep 1st 2022
+  - Added Dark Mode support
 
 ### Credit Where Credit is Due
 The CSS and much of the layout is lifted from the excellent work of John Myles ([@Actoba](https://app.roll20.net/users/427494/actoba) on roll20) and the 5e Dungeons and Dragons sheet.

D&D_BECM/sheet.json

@@ -5,5 +5,5 @@
   "roll20userid": "1048758, 857613",
   "preview": "BDnDpreview.png",
   "instructions": "This sheet is for the Rules Cyclopedia version of Basic D&D (BECM). It supports skills, weapon mastery, and Warmachine rules.  It does not currently support Imortals rules. I WISH TO MAKE SOME MORE CHANGES LIKE ACTUALLY MAKING ROLLS ON THIEF SKILLS AND TURN UNDED, please let me know if you are opposed to this",
-  "legacy": true
+  "legacy": false
 }