From cf06bfa0d5dd82efdf0b848900a2f2b8fa2ec166 Mon Sep 17 00:00:00 2001
From: Ian Merryweather <mrianmerry@gmail.com>
Date: Wed, 31 Aug 2022 15:09:05 +0100
Subject: [PATCH] feat: Adds colour definitions for tabs and toggles

- Adds colour definitions for the page tabs and the sheet type toggles
- Alphabetises CSS options inside the relevant rules
---
 D&D_BECM/BDnDSheet.css | 92 ++++++++++++++++++++----------------------
 1 file changed, 43 insertions(+), 49 deletions(-)

diff --git a/D&D_BECM/BDnDSheet.css b/D&D_BECM/BDnDSheet.css
index 0eae8bc241..8fa458fd3e 100644
--- a/D&D_BECM/BDnDSheet.css
+++ b/D&D_BECM/BDnDSheet.css
@@ -3,8 +3,11 @@
 .charsheet {
 	--background: var(--color-surface1);
 	--border: #000000;
+	--header-text: var(--color-surface1);
 	--is-player-character: #65763c;
 	--not-player-character: #93537c;
+	--selected-tab-background: #ab8b57;
+	--unselected-tab-background: #4a6486;
 }
 
 .sheet-rolltemplate-5eDefault {
@@ -191,8 +194,7 @@ div[class="repcontainer editmode"] ~ div[class^="repcontrol"] button[class="btn
 	visibility: hidden;
 }
 
-/* character/force button Settings */
-
+/* Character/Force Button Settings */
 div.sheet-character,
 div.sheet-force {
 	display: none;
@@ -204,11 +206,11 @@ input.sheet-is-force:not(:checked) ~ div.sheet-character {
 }
 
 input.sheet-is-force {
-	width: 20%;
-	height: 16px;
 	cursor: pointer;
-	position: relative;
+	height: 16px;
 	opacity: 0;
+	position: relative;
+	width: 20%;
 	z-index: 9999;
 }
 
@@ -217,32 +219,30 @@ span.sheet-is-force-tab::before {
 }
 
 span.sheet-is-force-tab {
-	text-align: center;
-	display: inline-block;
-	width: 20%;
-	height: 16px;
-	font-size: 9px;
-
 	background: var(--is-player-character);
-	color: white;
-	font-weight: bold;
 	border-radius: 4px;
+	color: var(--header-text);
+	display: inline-block;
+	font-size: 9px;
+	font-weight: bold;
+	height: 16px;
 	margin-left: -20%;
+	text-align: center;
+	width: 20%;
 }
 
 input.sheet-is-force:checked + span.sheet-is-force-tab {
 	background: var(--not-player-character);
-	color: white;
 	border-radius: 4px;
+	color: var(--header-text);
 }
 
 input.sheet-is-force:checked + span.sheet-is-force-tab::before {
 	content: "Force Sheet";
 }
+/* End Character/Force Button Settings */
 
-/* END character/force button Settings */
-/* NPC button Settings */
-
+/* NPC Button Settings */
 div.sheet-npcinfo {
 	display: none;
 }
@@ -252,11 +252,11 @@ input.sheet-is-npc:checked ~ div.sheet-npcinfo {
 }
 
 input.sheet-is-npc {
-	width: 5%;
-	height: 16px;
 	cursor: pointer;
-	position: relative;
+	height: 16px;
 	opacity: 0;
+	position: relative;
+	width: 5%;
 	z-index: 9999;
 }
 
@@ -265,29 +265,28 @@ span.sheet-is-npc-tab::before {
 }
 
 span.sheet-is-npc-tab {
-	text-align: center;
-	display: inline-block;
-	width: 5%;
-	height: 16px;
-	font-size: 9px;
 	background: var(--is-player-character);
-	color: white;
-	font-weight: bold;
 	border-radius: 4px;
+	color: var(--header-text);
+	display: inline-block;
+	font-size: 9px;
+	font-weight: bold;
+	height: 16px;
 	margin-left: -5%;
+	text-align: center;
+	width: 5%;
 }
 
 input.sheet-is-npc:checked + span.sheet-is-npc-tab {
 	background: var(--not-player-character);
-	color: white;
 	border-radius: 4px;
+	color: var(--header-text);
 }
 
 input.sheet-is-npc:checked + span.sheet-is-npc-tab::before {
 	content: "NPC";
 }
-
-/* END pc/npc button Settings */
+/* End NPC Button Settings */
 
 /* Main Sheet Tabs */
 div[class^="sheet-section"] {
@@ -299,37 +298,33 @@ input.sheet-tab2:checked ~ div.sheet-section-skills,
 input.sheet-tab3:checked ~ div.sheet-section-class,
 input.sheet-tab4:checked ~ div.sheet-section-combat,
 input.sheet-tab5:checked ~ div.sheet-section-spellbook,
-input.sheet-tab6:checked ~ div.sheet-section-inventory {
-	display: block;
-}
-
+input.sheet-tab6:checked ~ div.sheet-section-inventory,
 input.sheet-tab99:checked ~ div[class^="sheet-section"] {
 	display: block;
 }
 
 input.sheet-tab {
-	width: 87px;
-	height: 20px;
 	cursor: pointer;
-	position: relative;
+	height: 20px;
 	opacity: 0;
+	position: relative;
+	width: 87px;
 	z-index: 9999;
 }
 
 span.sheet-tab {
-	text-align: center;
+	background: var(--unselected-tab-background);
+	border-radius: 4px;
+	color: var(--header-text);
+	cursor: pointer;
 	display: inline-block;
 	font-size: 13px;
-	background: #4a6486;
-	color: white;
 	font-weight: bold;
-	border-radius: 4px;
-
-	width: 87px;
 	height: 20px;
-	cursor: pointer;
-	position: relative;
 	margin-left: -91px;
+	position: relative;
+	text-align: center;
+	width: 87px;
 }
 
 input.sheet-tab1:checked + span.sheet-tab1,
@@ -341,12 +336,11 @@ input.sheet-tab6:checked + span.sheet-tab6,
 input.sheet-tab7:checked + span.sheet-tab7,
 input.sheet-tab8:checked + span.sheet-tab8,
 input.sheet-tab99:checked + span.sheet-tab99 {
-	background: #ab8b57;
-	color: white;
+	background: var(--selected-tab-background);
 	border-radius: 4px;
+	color: var(--header-text);
 }
-
-/* END Main sheet tabs */
+/* End Main sheet tabs */
 
 /* Spell Page Settings */
 div[class^="sheet-spell-page"] {