From 595b2001595a38a39d714d26586bdfee7f67148d Mon Sep 17 00:00:00 2001
From: SavageSpiel <92274791+SavageSpiel@users.noreply.github.com>
Date: Sun, 23 Apr 2023 16:17:08 +0100
Subject: [PATCH] Dark mode label fixes and roll template

Set label colours so dark mode doesn't make them invisible.
Added a roll template and styling.
---
 Liminal/liminal.css  | 92 +++++++++++++++++++++++++++++++++++++++++++-
 Liminal/liminal.html | 71 +++++++++++++++++++++-------------
 2 files changed, 134 insertions(+), 29 deletions(-)

diff --git a/Liminal/liminal.css b/Liminal/liminal.css
index 9d29558a8d..9e43f1bfc8 100644
--- a/Liminal/liminal.css
+++ b/Liminal/liminal.css
@@ -1,14 +1,12 @@
 /* Set the min-width so that when the window is resized the look will stay consistant */
 
 .charsheet {
-	/*background-color: #8bb;*/
 	background-color:#9EBFBB;
     background-size: cover;
 	width:825px;
 	min-width:825px;
 	min-height:400px;
 	margin:0;
-	/*background-image: url('https://d1vzi28wh99zvq.cloudfront.net/images/4329/267203.jpg');*/
 }
 
 /* Universal styling applied to all elements of these types */
@@ -54,6 +52,10 @@
     "traits traits traits other other other"
 }
 
+.charsheet .sheet-character label {	
+	color:#333;
+}
+
 /* BASIC INFO */
 
 .sheet-basicinfo {
@@ -108,6 +110,7 @@
 	margin-top:-5px;
 	font-weight: bold;
 	font-size:1em;
+	max-width: 105px;
 }
 .sheet-skills input {
 	display: inline-block;
@@ -291,6 +294,10 @@ textarea {
 	width:720px;
 }
 
+.charsheet .sheet-crew label {	
+	color:#333;
+}
+
 .sheet-crew-relationships h3 {
 	padding-right:14px;
 }
@@ -324,3 +331,84 @@ textarea {
 .sheet-crew-relationships textarea {
 	height:60px;
 }
+
+
+.charsheet .sheet-mods label {	
+	color:#333;
+}
+
+
+/* ROLL TEMPLATE */
+.sheet-rolltemplate-liminal {
+  margin-left: -37px;
+}
+.withoutavatars .sheet-rolltemplate-liminal {
+  margin-left: -7px;
+}
+
+.sheet-rolltemplate-liminal .sheet-container {
+  border: 1px solid;
+  /* by default, the border is the same color as the header. You can change this here, e.g. to black */
+  border-color: var(--header-bg-color);
+}
+
+/* Header formatting - title and subtitle */
+.sheet-rolltemplate-liminal .sheet-header {
+  background-color: #277F84;
+  /* change text-align to center to center the header text */
+  text-align: left;
+  color: white;
+  padding: 5px;
+}
+.sheet-rolltemplate-liminal .sheet-title {
+  font-size:1.1em;
+}
+.sheet-rolltemplate-liminal .sheet-subtitle {
+  font-size:.9em;
+}
+
+
+/* Allprops part */
+.sheet-rolltemplate-liminal .sheet-content {
+  display: grid;
+  background: #FFF;
+  /* Header formatting - modify the column layout below */
+  grid-template-columns: auto auto;
+  /* Line height to match default roll template */
+  line-height:1.4em;
+}
+.sheet-rolltemplate-liminal .sheet-content > div {
+  padding: 5px;
+}
+
+/* Left column */
+.sheet-rolltemplate-liminal .sheet-content .sheet-key {
+  font-weight: bold;
+  padding-right: 10px;
+  text-align: right;
+}
+
+/* Empty rule, use this if you want to change the right column 
+.sheet-rolltemplate-liminal .sheet-value {
+}
+*/
+
+/* Make even-numbered rows grey */
+.sheet-rolltemplate-liminal .sheet-content :nth-child(4n+3),
+.sheet-rolltemplate-liminal .sheet-content :nth-child(4n) {
+  background:#EEE;
+}
+
+/* Description field */
+.sheet-rolltemplate-liminal .sheet-desc {
+  grid-column: span 2;
+  padding: 5px;
+  text-align: center;
+}
+
+/* set the inline roll result so it doesn't look awful in dark mode */
+.sheet-rolltemplate-liminal .sheet-container .inlinerollresult  {
+	background-color:#DAE7E5;
+	border: 1px solid #333;
+	color:#black;
+}
diff --git a/Liminal/liminal.html b/Liminal/liminal.html
index 5e68f30371..7766243faf 100644
--- a/Liminal/liminal.html
+++ b/Liminal/liminal.html
@@ -28,25 +28,25 @@
 	<h2>Physical Skills</h2>
 	<label>Specialities</label>
 	
-	<button class="sheet-skill-button" type='roll' name='roll_athletics' value='&{template:default} {{name=@{character_name}}} {{Athletics=[[2d6 + @{athletics} + ?{Modifier|0}]]}}'>Athletics</button><input type="number" name='attr_athletics' min="0"></input><input type="text" name='attr_athleticsspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_athletics' value='&{template:liminal} {{title=@{character_name}}} {{Athletics=[[2d6 + @{athletics} + ?{Modifier|0}]]}}'>Athletics</button><input type="number" name='attr_athletics' min="0"></input><input type="text" name='attr_athleticsspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_awareness' value='&{template:default} {{name=@{character_name}}} {{Awareness=[[2d6 + @{awareness} + ?{Modifier|0}]]}}'>Awareness</button><input type="number" name='attr_awareness' min="0"></input><input type="text" name='attr_awarenessspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_awareness' value='&{template:liminal} {{title=@{character_name}}} {{Awareness=[[2d6 + @{awareness} + ?{Modifier|0}]]}}'>Awareness</button><input type="number" name='attr_awareness' min="0"></input><input type="text" name='attr_awarenessspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_melee' value='&{template:default} {{name=@{character_name}}} {{Melee=[[2d6 + @{melee} + ?{Modifier|0}]]}}'>Melee</button><input type="number" name='attr_melee' min="0"></input><input type="text" name='attr_meleespec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_melee' value='&{template:liminal} {{title=@{character_name}}} {{Melee=[[2d6 + @{melee} + ?{Modifier|0}]]}}'>Melee</button><input type="number" name='attr_melee' min="0"></input><input type="text" name='attr_meleespec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_shoot' value='&{template:default} {{name=@{character_name}}} {{Shoot=[[2d6 + @{shoot} + ?{Modifier|0}]]}}'>Shoot</button><input type="number" name='attr_shoot' min="0"></input><input type="text" name='attr_shootspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_shoot' value='&{template:liminal} {{title=@{character_name}}} {{Shoot=[[2d6 + @{shoot} + ?{Modifier|0}]]}}'>Shoot</button><input type="number" name='attr_shoot' min="0"></input><input type="text" name='attr_shootspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_stealth' value='&{template:default} {{name=@{character_name}}} {{Stealth=[[2d6 + @{stealth} + ?{Modifier|0}]]}}'>Stealth</button><input type="number" name='attr_stealth' min="0"></input><input type="text" name='attr_stealthspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_stealth' value='&{template:liminal} {{title=@{character_name}}} {{Stealth=[[2d6 + @{stealth} + ?{Modifier|0}]]}}'>Stealth</button><input type="number" name='attr_stealth' min="0"></input><input type="text" name='attr_stealthspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_survival' value='&{template:default} {{name=@{character_name}}} {{Survival=[[2d6 + @{survival} + ?{Modifier|0}]]}}'>Survival</button><input type="number" name='attr_survival' min="0"></input><input type="text" name='attr_survivalspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_survival' value='&{template:liminal} {{title=@{character_name}}} {{Survival=[[2d6 + @{survival} + ?{Modifier|0}]]}}'>Survival</button><input type="number" name='attr_survival' min="0"></input><input type="text" name='attr_survivalspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_vehicles' value='&{template:default} {{name=@{character_name}}} {{Vehicles=[[2d6 + @{vehicles} + ?{Modifier|0}]]}}'>Vehicles</button><input type="number" name='attr_vehicles' min="0"></input><input type="text" name='attr_vehiclesspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_vehicles' value='&{template:liminal} {{title=@{character_name}}} {{Vehicles=[[2d6 + @{vehicles} + ?{Modifier|0}]]}}'>Vehicles</button><input type="number" name='attr_vehicles' min="0"></input><input type="text" name='attr_vehiclesspec'></input>
 
 </div>
 
@@ -54,50 +54,50 @@
 	<h2>Mental Skills</h2>
 	<label>Specialities</label>
 
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Art=[[2d6 + @{art} + ?{Modifier|0}]]}}'>Art</button><input type="number" name='attr_art' min="0"></input><input type="text" name='attr_artspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Art=[[2d6 + @{art} + ?{Modifier|0}]]}}'>Art</button><input type="number" name='attr_art' min="0"></input><input type="text" name='attr_artspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Business=[[2d6 + @{business} + ?{Modifier|0}]]}}'>Business</button><input type="number" name='attr_business' min="0"></input><input type="text" name='attr_businessspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Business=[[2d6 + @{business} + ?{Modifier|0}]]}}'>Business</button><input type="number" name='attr_business' min="0"></input><input type="text" name='attr_businessspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Education=[[2d6 + @{education} + ?{Modifier|0}]]}}'>Education</button><input type="number" name='attr_education' min="0"></input><input type="text" name='attr_educationspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Education=[[2d6 + @{education} + ?{Modifier|0}]]}}'>Education</button><input type="number" name='attr_education' min="0"></input><input type="text" name='attr_educationspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Lore=[[2d6 + @{lore} + ?{Modifier|0}]]}}'>Lore</button><input type="number" name='attr_lore' min="0"></input><input type="text" name='attr_lorespec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Lore=[[2d6 + @{lore} + ?{Modifier|0}]]}}'>Lore</button><input type="number" name='attr_lore' min="0"></input><input type="text" name='attr_lorespec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Medicine=[[2d6 + @{medicine} + ?{Modifier|0}]]}}'>Medicine</button><input type="number" name='attr_medicine' min="0"></input><input type="text" name='attr_medicinespec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Medicine=[[2d6 + @{medicine} + ?{Modifier|0}]]}}'>Medicine</button><input type="number" name='attr_medicine' min="0"></input><input type="text" name='attr_medicinespec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Science=[[2d6 + @{science} + ?{Modifier|0}]]}}'>Science</button><input type="number" name='attr_science' min="0"></input><input type="text" name='attr_sciencespec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Science=[[2d6 + @{science} + ?{Modifier|0}]]}}'>Science</button><input type="number" name='attr_science' min="0"></input><input type="text" name='attr_sciencespec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Technology=[[2d6 + @{technology} + ?{Modifier|0}]]}}'>Technology</button><input type="number" name='attr_technology' min="0"></input><input type="text" name='attr_technologyspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Technology=[[2d6 + @{technology} + ?{Modifier|0}]]}}'>Technology</button><input type="number" name='attr_technology' min="0"></input><input type="text" name='attr_technologyspec'></input>
 </div>
 
 <div class="sheet-skills sheet-social">
 	<h2>Social Skills</h2>
 	<label>Specialities</label>
 
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Charm=[[2d6 + @{charm} + ?{Modifier|0}]]}}'>Charm</button><input type="number" name='attr_charm' min="0"></input><input type="text" name='attr_charmspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Charm=[[2d6 + @{charm} + ?{Modifier|0}]]}}'>Charm</button><input type="number" name='attr_charm' min="0"></input><input type="text" name='attr_charmspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Conviction=[[2d6 + @{conviction} + ?{Modifier|0}]]}}'>Conviction</button><input type="number" name='attr_conviction' min="0"></input><input type="text" name='attr_convictionspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Conviction=[[2d6 + @{conviction} + ?{Modifier|0}]]}}'>Conviction</button><input type="number" name='attr_conviction' min="0"></input><input type="text" name='attr_convictionspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Empathy=[[2d6 + @{empathy} + ?{Modifier|0}]]}}'>Empathy</button><input type="number" name='attr_empathy' min="0"></input><input type="text" name='attr_empathyspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Empathy=[[2d6 + @{empathy} + ?{Modifier|0}]]}}'>Empathy</button><input type="number" name='attr_empathy' min="0"></input><input type="text" name='attr_empathyspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{High Society=[[2d6 + @{highsociety} + ?{Modifier|0}]]}}'>High Society</button><input type="number" name='attr_highsociety' min="0"></input><input type="text" name='attr_highsocietyspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{High Society=[[2d6 + @{highsociety} + ?{Modifier|0}]]}}'>High Society</button><input type="number" name='attr_highsociety' min="0"></input><input type="text" name='attr_highsocietyspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Rhetoric=[[2d6 + @{rhetoric} + ?{Modifier|0}]]}}'>Rhetoric</button><input type="number" name='attr_rhetoric' min="0"></input><input type="text" name='attr_rhetoricspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Rhetoric=[[2d6 + @{rhetoric} + ?{Modifier|0}]]}}'>Rhetoric</button><input type="number" name='attr_rhetoric' min="0"></input><input type="text" name='attr_rhetoricspec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Streetwise=[[2d6 + @{streetwise} + ?{Modifier|0}]]}}'>Streetwise</button><input type="number" name='attr_streetwise' min="0"></input><input type="text" name='attr_streetwisespec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Streetwise=[[2d6 + @{streetwise} + ?{Modifier|0}]]}}'>Streetwise</button><input type="number" name='attr_streetwise' min="0"></input><input type="text" name='attr_streetwisespec'></input>
 	<br />
 	
-	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:default} {{name=@{character_name}}} {{Taunt=[[2d6 + @{taunt} + ?{Modifier|0}]]}}'>Taunt</button><input type="number" name='attr_taunt' min="0"></input><input type="text" name='attr_tauntspec'></input>
+	<button class="sheet-skill-button" type='roll' name='roll_testattack' value='&{template:liminal} {{title=@{character_name}}} {{Taunt=[[2d6 + @{taunt} + ?{Modifier|0}]]}}'>Taunt</button><input type="number" name='attr_taunt' min="0"></input><input type="text" name='attr_tauntspec'></input>
 </div>
 
 
@@ -148,7 +148,7 @@
 	<label>Will</label><input type="number" name="attr_will" />/<input type="number" name="attr_will_max" /><br />
 	
 	<label class="sheet-driveused">Drive used this session?</label><input type="checkbox" name="attr_driveused"></input><br />
-	<button class="sheet-skill-button sheet-d6-dice" type='roll' name='roll_drive' value='&{template:default} {{name=@{character_name}}} {{Will points recovered=[[1d6]]}}'> Lean on your drive</button>
+	<button class="sheet-skill-button sheet-d6-dice" type='roll' name='roll_drive' value='&{template:liminal} {{title=@{character_name}}} {{Will points recovered=[[1d6]]}}'> Lean on your drive</button>
 </div>
 <div class="sheet-combat">
 	<h2>Combat</h2>
@@ -156,7 +156,7 @@
 	<label class="sheet-damagebonus">Shoot damage bonus</label><input type="number" name="attr_shootbonus" />
 	<label class="sheet-damagebonus">Initiative bonus</label><input type="number" name="attr_initiativebonus" />
 	
-	<button class="sheet-2d6-dice" type='roll' name='roll_initiative' value='&{template:default} {{name=@{character_name}}} {{Initiative=[[2d6 + @{awareness} + @{initiativebonus} + ?{Modifier|0}]]}}'>Roll Initiative</button>
+	<button class="sheet-2d6-dice" type='roll' name='roll_initiative' value='&{template:liminal} {{title=@{character_name}}} {{Initiative=[[2d6 + @{awareness} + @{initiativebonus} + ?{Modifier|0}]]}}'>Roll Initiative</button>
 	
 	<hr />
 	<label>Weapons and Attacks</label><br />
@@ -171,8 +171,8 @@
 	<select disabled="true">
 		<option value="@{meleebonus}">Melee</option>
 	</select>
-	<button class="sheet-d6-dice" type='roll' name='roll_unarmed' value='&{template:default} {{name=@{character_name}}} {{Weapon=Unarmed}} {{Damage=[[1d6 + @{meleebonus} + ?{Modifier|0}]]}}'></button>
-	<button class="sheet-2d6-dice" type='roll' name='roll_unarmed2' value='&{template:default} {{name=@{character_name}}} {{Weapon=Unarmed}} {{Damage=[[2d6 + @{meleebonus} + ?{Modifier|0}]]}}'></button>
+	<button class="sheet-d6-dice" type='roll' name='roll_unarmed' value='&{template:liminal} {{title=@{character_name}}} {{Weapon=Unarmed}} {{Damage=[[1d6 + @{meleebonus} + ?{Modifier|0}]]}}'></button>
+	<button class="sheet-2d6-dice" type='roll' name='roll_unarmed2' value='&{template:liminal} {{title=@{character_name}}} {{Weapon=Unarmed}} {{Damage=[[2d6 + @{meleebonus} + ?{Modifier|0}]]}}'></button>
 	
 	<fieldset class="repeating_weapons">
 		<input type="text" name="attr_weaponname" />
@@ -182,8 +182,8 @@
 			<option value="@{shootbonus}">Shoot</option>
 			<option value="0">Other</option>
 		</select>
-		<button class="sheet-d6-dice" type='roll' name='roll_weapon' value='&{template:default} {{name=@{character_name}}} {{Weapon=@{weaponname}}} {{Damage=[[1d6 + @{weapondamagebonus} + @{weapontype} + ?{Modifier|0}]]}}'></button>
-		<button class="sheet-2d6-dice" type='roll' name='roll_weapon2' value='&{template:default} {{name=@{character_name}}} {{Weapon=@{weaponname}}} {{Damage=[[2d6 + @{weapondamagebonus} + @{weapontype} + ?{Modifier|0}]]}}'></button>
+		<button class="sheet-d6-dice" type='roll' name='roll_weapon' value='&{template:liminal} {{title=@{character_name}}} {{Weapon=@{weaponname}}} {{Damage=[[1d6 + @{weapondamagebonus} + @{weapontype} + ?{Modifier|0}]]}}'></button>
+		<button class="sheet-2d6-dice" type='roll' name='roll_weapon2' value='&{template:liminal} {{title=@{character_name}}} {{Weapon=@{weaponname}}} {{Damage=[[2d6 + @{weapondamagebonus} + @{weapontype} + ?{Modifier|0}]]}}'></button>
 	</fieldset>
 </div>
 
@@ -239,6 +239,23 @@
 </div>
 <!-- END MODS SHEET -->
 
+<!-- ROLL TEMPLATE -->
+<rolltemplate class="sheet-rolltemplate-liminal">
+  <div class="sheet-container">
+    <div class="sheet-header">
+      {{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
+      {{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
+    </div>
+    <div class="sheet-content">
+      {{#allprops() title subtitle desc color}}
+      <div class="sheet-key">{{key}}</div>
+      <div class="sheet-value">{{value}}</div>
+      {{/allprops() title subtitle desc color}}
+      {{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
+    </div>
+  </div>
+</rolltemplate>
+
 <script type="text/worker">
 
 // Deal with the tabs