Dark mode label fixes and roll template

Set label colours so dark mode doesn't make them invisible.
Added a roll template and styling.
This commit is contained in:
SavageSpiel
2023-04-23 16:17:08 +01:00
parent d0e7c4cfb3
commit 595b200159
2 changed files with 134 additions and 29 deletions
+90 -2
View File
@@ -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;
}
+44 -27
View File
@@ -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