slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates to the character sheet, preview file and sheet.json

Browse Source 
Small updates to the character sheet HTML and CSS to add a bonus field for rolls, a repeatable section for custom rolls and significant visual improvements. The sheet.json now includes a link to the updated rules document and the new preview image reflects the updated look of the character sheet.
This commit is contained in:
OoznynKoo
2021-03-27 12:53:46 +02:00
parent 93d8a80ff1
commit e28295ce97
3 changed files with 125 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
EtherealWinds-playtest/etherealwinds.css
+80 -21
View File
@@ -1,4 +1,5 @@
.sheet-wrapper {width:1024px; min-width: 1024px;
/* character sheet version 1.2 | decreasing width/min-width to 900 px*/
.sheet-wrapper {width:900px; min-width: 900px;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/bg.jpg");
background-repeat: no-repeat; background-size: contain; padding: 3em 1.5em 2em 1em; font-size:16px;}
.sheet-wrapper h2 {text-transform: uppercase; letter-spacing: -0.04em; text-decoration: underline;}
@@ -7,7 +8,7 @@
.sheet-last:after {content:""; display: table; height: 0; width:100%; clear:both;}
.sheet-wrapper div {display: block; font-family: sans-serif; font-size:14px;}
.sheet-wrapper h1 {line-height: 1; margin:0; margin-top:0.1em; letter-spacing: -0.04em;}
.sheet-wrapper p {margin:0; /*background-color: white;*/ padding: 0.3em 0.8em 0.3em 0.7em; border-radius: 1em; border:0.15em solid black;
.sheet-wrapper p {margin:0; padding: 0.3em 0.8em 0.3em 0.7em; border-radius: 1em; border:0.15em solid black;
background-color: #15567F; color:white;
}
.sheet-wrapper p.sheet-simple {color:black; border:none; background:none;}
@@ -23,7 +24,7 @@
.sheet-strain-track {width:100%;}
.sheet-selector {width:20%; float:left;}
.sheet-wrapper .sheet-dietypes {position:absolute; width:47%; left:27%; top:56em; border-radius: 2em; padding:1em 0.5em 1em 1em; border:outset 0.2em black; background-color: black;}
.sheet-dietypes h2 {font-size: 1.6em; text-decoration: none; color:white;}
.sheet-dietypes h2 {font-size: 1.4em; text-decoration: none; color:white;}
.sheet-dietypes h2 label { font-size: 0.6em; color:white;}
.sheet-wrapper input[type=checkbox] {width:14%; height:1.6em; margin:0; padding:0; position: relative; top:0.3em;}
@@ -59,33 +60,33 @@
.sheet-numbers {width:60%; float: left; position: relative;}
.sheet-numbers h3 {text-transform: uppercase; letter-spacing: -0.024em; margin:0.2em 0 0.1em 0;}
.sheet-block {text-align: center; width:16%; float:left; position: relative; z-index: 2;}
.sheet-block1 {transform:rotateZ(-30deg); margin-left:20%;}
.sheet-block2 {transform:rotateZ(30deg); float:right; margin-right:20%; margin-bottom:4em;}
.sheet-block6 {transform: rotateZ(-90deg); clear: both; margin-left:5%;}
.sheet-block3 {transform:rotateZ(90deg); float:right; margin-right:5%; margin-bottom:4em;}
.sheet-block5 {transform: rotateZ(30deg); clear: both; float:left; margin-left:20%;}
.sheet-block4 {transform: rotateZ(-30deg); float:right; margin-right:20%;}
/* version 1.2 alpha | moving things around slightly to fit the decreased width */
.sheet-block1 {transform:rotateZ(-30deg); margin-left:23%;}
.sheet-block2 {transform:rotateZ(30deg); float:right; margin-right:23%; margin-bottom:4em;}
.sheet-block6 {transform: rotateZ(-90deg); clear: both; margin-left:5%; top:-1em;}
.sheet-block3 {transform:rotateZ(90deg); float:right; margin-right:5%; margin-bottom:4em; top:-1em;}
.sheet-block5 {transform: rotateZ(30deg); clear: both; float:left; margin-left:23%; top:-2em;}
.sheet-block4 {transform: rotateZ(-30deg); float:right; margin-right:23%; top:-2em;}
.sheet-hexes {position: absolute; width:100%; height:100%; z-index: 1;}
.sheet-stat-hex {position:absolute;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-orange.png"); min-width:82px; min-height:72px; background-repeat: no-repeat; background-size: contain;}
.sheet-bluehex .sheet-stat-hex {background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/EtherealWinds-playtest/hex-blue.png");}
.sheet-hex1 {left:43.5%; top:20%;}
.sheet-hex6 {left:28%; top:31%;}
.sheet-hex2 {right:27%; top:31%;}
.sheet-hex5 {left:28%; bottom:31%;}
.sheet-hex3 {right:27%; bottom:31%;}
.sheet-hex4 {left:43.5%; bottom:20%;}
/* version 1.2 alpha | moving things around slightly to fit with the decreased width */
.sheet-hex1 {left:42.5%; top:20%;}
.sheet-hex6 {left:27%; top:30%;}
.sheet-hex2 {right:25%; top:30%;}
.sheet-hex5 {left:27%; bottom:35%;}
.sheet-hex3 {right:25%; bottom:35%;}
.sheet-hex4 {left:42.5%; bottom:25%;}
.sheet-exp {margin-top: 2em; float:left; width:20%;}
.sheet-exp p {clear: both;}
.sheet-effort-track {float:left; width:20%; text-align: left;}
/*.sheet-effort-track h2 {text-transform: uppercase; letter-spacing: -0.04em; text-decoration: underline;}*/
.sheet-strain-track span {color:crimson; text-shadow: 0 0 0.2em black; font-weight: bold;font-size: 1.2em; position: relative; top:0.07em;}
.sheet-derived-stats {float:left; width:60%; position:relative;}
.sheet-derived-stats:after {content:""; display: table; height: 0; width:100%; clear:both;}
.sheet-derived-stats img {width:100%; height:auto;}
.sheet-derived-stats h2, .sheet-tints h2 {
clear: both; padding-left: 7%; padding-top: 1.2em;
/*text-transform: uppercase; text-decoration: underline; letter-spacing: -0.04em;*/
}
.sheet-health, .sheet-mana {width:24%; float:left; position: relative; text-align: center; height:auto; box-sizing: border-box;}
.sheet-health {margin-left: 16%;}
@@ -102,10 +103,11 @@
.sheet-selector select {width:7em;}
.sheet-combo {display:block;}
.sheet-wrapper .sheet-hexes input.sheet-switch {position: absolute; top:-12%; left:80%; text-align: center; z-index: 5;}
.sheet-hexes label { font-size: 1.2em; position:absolute; top:-12.5%; left:91%; text-transform: uppercase; font-weight: bold; color:white;
/* version 1.2 alpha | correcting the position of the hex-switching checkbox and label */
.sheet-wrapper .sheet-hexes input.sheet-switch {position: absolute; top:-4%; left:80%; text-align: center; z-index: 5;}
.sheet-hexes label { font-size: 1em; position:absolute; top:-4.5%; left:91%; text-transform: uppercase; font-weight: bold; color:white;
background-color: #15567F; border-radius: 5em; padding:0.4em 0.8em; width:11em;
/*text-shadow: 0 0 0.3em #15567F;*/}
}
.sheet-orangehex {display: block;}
.sheet-bluehex {display: none;}
@@ -113,7 +115,6 @@
.sheet-switch:not(:checked) ~ .sheet-bluehex, .sheet-switch:checked ~ .sheet-orangehex { display: none; }
.sheet-dietypes div {width:auto; float: left;}
/* .sheet-dietypes div:nth-child(3) {clear: both;}*/
.sheet-wrapper .sheet-dietypes input[type=radio] {width:2em;}
.sheet-dietypes label {width:2.2em; display:inline; padding-left:0.2em;}
@@ -123,6 +124,64 @@
.sheet-wrapper .sheet-conditions {position: absolute; bottom:1.6em; right:5.6em; font-size: 64%; border-top: 0.16em solid black;}
.sheet-wrapper .sheet-conditions label {font-size: 1.8em; position: relative; top: 0.2em;}
/* character sheet version 1.2 | styling the new sections: bonus field, custom rolls, dropdown text color changing */
.sheet-customrolls {width:100%; clear: both;}
.charsheet .sheet-wrapper .sheet-customrolls p {color:#15567F; background-color: rgba(255,255,255,0); border: solid 0.2em #15567F; border-radius: 0.2em; margin-top:0.65em; margin-bottom: 0.35em;}
.sheet-bonustoroll input {font-size: 20px;}
span.sheet-highlighted {
color:rgba(255,255,255,0.5); font-size: 80px; line-height:0.6em;
user-select: none;
display: block;
position: absolute; font-weight: 100; z-index: 6;
}
/* the top selector */
.sheet-colorswitch1[value="Physical"] ~ .sheet-selectedcolor1 {color: #8F5A3D; border:solid 0.2em #8F5A3D;}
.sheet-colorswitch1[value="Mental"] ~ .sheet-selectedcolor1 {color: #288f8b; border: solid 0.2em #288f8b;}
.sheet-colorswitch1[value="Ethereal"] ~ .sheet-selectedcolor1 {color: #662f90; border: solid 0.2em #662f90;}
.sheet-colorswitch1[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
.sheet-colorswitch1[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
.sheet-colorswitch1[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
.sheet-colorswitch1[value="Physical"] ~ span.sheet-highlighted.sheet-hl6 {color: #8F5A3D;}
.sheet-colorswitch1[value="Physical"] ~ span.sheet-highlighted.sheet-hl1 {color: #8F5A3D;}
.sheet-colorswitch1[value="Mental"] ~ span.sheet-highlighted.sheet-hl6 {color: #288f8b;}
.sheet-colorswitch1[value="Mental"] ~ span.sheet-highlighted.sheet-hl1 {color: #288f8b;}
.sheet-colorswitch1[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl6 {color: #662f90;}
.sheet-colorswitch1[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl1 {color: #662f90;}
/* the middle selector */
.sheet-colorswitch2[value="Physical"] ~ .sheet-selectedcolor2 {color: #8F5A3D; border: solid 0.2em #8F5A3D;}
.sheet-colorswitch2[value="Mental"] ~ .sheet-selectedcolor2 {color: #288f8b; border: solid 0.2em #288f8b;}
.sheet-colorswitch2[value="Ethereal"] ~ .sheet-selectedcolor2 {color: #662f90; border: solid 0.2em ;}
.sheet-colorswitch2[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
.sheet-colorswitch2[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
.sheet-colorswitch2[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
.sheet-colorswitch2[value="Physical"] ~ span.sheet-highlighted.sheet-hl2 {color: #8F5A3D;}
.sheet-colorswitch2[value="Physical"] ~ span.sheet-highlighted.sheet-hl3 {color: #8F5A3D;}
.sheet-colorswitch2[value="Mental"] ~ span.sheet-highlighted.sheet-hl2 {color: #288f8b;}
.sheet-colorswitch2[value="Mental"] ~ span.sheet-highlighted.sheet-hl3 {color: #288f8b;}
.sheet-colorswitch2[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl2 {color: #662f90;}
.sheet-colorswitch2[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl3 {color: #662f90;}
/* the bottom selector */
.sheet-colorswitch3[value="Physical"] ~ .sheet-selectedcolor3 {color: #8F5A3D; border: solid 0.2em #8F5A3D;}
.sheet-colorswitch3[value="Mental"] ~ .sheet-selectedcolor3 {color: #288f8b; border: solid 0.2em #288f8b;}
.sheet-colorswitch3[value="Ethereal"] ~ .sheet-selectedcolor3 {color: #662f90; border: solid 0.2em #662f90;}
.sheet-colorswitch3[value="Physical"] ~ .sheet-descriptor {background-color: rgba(143,90,61,0.8); color:white;}
.sheet-colorswitch3[value="Mental"] ~ .sheet-descriptor {background-color: rgba(40,143,139,0.8); color:white;}
.sheet-colorswitch3[value="Ethereal"] ~ .sheet-descriptor {background-color: rgba(102,47,144,0.8); color:white;}
.sheet-colorswitch3[value="Physical"] ~ span.sheet-highlighted.sheet-hl4 {color: #8F5A3D;}
.sheet-colorswitch3[value="Physical"] ~ span.sheet-highlighted.sheet-hl5 {color: #8F5A3D;}
.sheet-colorswitch3[value="Mental"] ~ span.sheet-highlighted.sheet-hl4 {color: #288f8b;}
.sheet-colorswitch3[value="Mental"] ~ span.sheet-highlighted.sheet-hl5 {color: #288f8b;}
.sheet-colorswitch3[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl4 {color: #662f90;}
.sheet-colorswitch3[value="Ethereal"] ~ span.sheet-highlighted.sheet-hl5 {color: #662f90;}
.sheet-hl1 {top:477px; left:453px;}
.sheet-hl2 {top:528px; left:537px;}
.sheet-hl3 {top:629px; left:537px;}
.sheet-hl4 {top:680px; left:453px;}
.sheet-hl5 {top:630px; left:370px;}
.sheet-hl6 {top:528px; left:369px;}
/* Custom Template from Jakob */
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom {
EtherealWinds-playtest/etherealwinds.html
+45 -17
View File
@@ -111,56 +111,70 @@
<div class="combo">
<div>
<input type="hidden" name="attr_bluetop" value="Sorrow / Compassion:">
<!-- version 1.2 alpha | hidden attributes that enable color switching -->
<input name="attr_allocatetop" type="hidden" class="colorswitch1">
<input class="descriptor" name="attr_bluetopshow" type="text" disabled="true" value="@{bluetop}">
<select name="attr_allocatetop">
<select name="attr_allocatetop" class="selectedcolor1">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocatetop}}} {{Check=[[floor(({@{diepoolfirst}}k5+@{conditional}+floor(@{penalty}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" name="roll_checkfirst">Roll</button>
<span class="highlighted hl6">&xcirc;</span>
<span class="highlighted hl1">&xcirc;</span>
<!-- version 1.2 alpha | updated roll formulas to include bonus attribute -->
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocatetop}}} {{Check=[[floor(({@{diepoolfirst}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkfirst">Roll</button>
</div>
<div>
<input type="hidden" name="attr_blueright" value="Joy / Anger:">
<input name="attr_allocateright" type="hidden" class="colorswitch2">
<input class="descriptor" name="attr_bluerightshow" type="text" disabled="true" value="@{blueright}">
<select name="attr_allocateright">
<select name="attr_allocateright" class="selectedcolor2">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateright}}} {{Check=[[floor(({@{diepoolsecond}}k5+@{conditional}+floor(@{penalty}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" name="roll_checksecond">Roll</button>
<span class="highlighted hl2">&xcirc;</span>
<span class="highlighted hl3">&xcirc;</span>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateright}}} {{Check=[[floor(({@{diepoolsecond}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checksecond">Roll</button>
</div>
<div>
<input type="hidden" name="attr_blueleft" value="Fear / Confusion:">
<input name="attr_allocateleft" type="hidden" class="colorswitch3">
<input class="descriptor" name="attr_blueleftshow" type="text" disabled="true" value="@{blueleft}">
<select name="attr_allocateleft">
<select name="attr_allocateleft" class="selectedcolor3">
<option value="unallocated" checked="true">&mdash;</option>
<option value="Ethereal">Ethereal</option>
<option value="Mental">Mental</option>
<option value="Physical">Physical</option>
</select>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateleft}}} {{Roll=[[floor(({@{diepoolthird}}k5+@{conditional}+floor(@{penalty}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" name="roll_checkthird">Roll</button>
<span class="highlighted hl4">&xcirc;</span>
<span class="highlighted hl5">&xcirc;</span>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{allocateleft}}} {{Roll=[[floor(({@{diepoolthird}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkthird">Roll</button>
</div>
</div>
<div class="targetnumber"><input type="number" name="attr_tn" value="13"><label>TN</label></div>
<!-- character sheet version 1.2 | added a field for roll bonuses -->
<div class="bonustoroll"><input type="number" name="attr_bonus" value="0"><label>Bonus</label></div>
</div>
<div class="effort-track">
<h2>Effort Remaining</h2>
<div><input type="radio" name="attr_effort" value="10"><p class="label inline">&ndash; 10</p></div>
<div><input type="radio" name="attr_effort" value="9"><p class="label inline">&ndash; 9</p></div>
<div><input type="radio" name="attr_effort" value="8"><p class="label inline">&ndash; 8</p></div>
<div><input type="radio" name="attr_effort" value="7"><p class="label inline">&ndash; 7</p></div>
<div><input type="radio" name="attr_effort" value="6"><p class="label inline">&ndash; 6</p></div>
<div><input type="radio" name="attr_effort" value="5"><p class="label inline">&ndash; 5</p></div>
<div><input type="radio" name="attr_effort" value="4"><p class="label inline">&ndash; 4</p></div>
<div><input type="radio" name="attr_effort" value="3"><p class="label inline">&ndash; 3</p></div>
<div><input type="radio" name="attr_effort" value="2"><p class="label inline">&ndash; 2</p></div>
<div><input type="radio" name="attr_effort" value="1"><p class="label inline">&ndash; 1</p></div>
<!-- removing dashes in front of numbers -->
<div><input type="radio" name="attr_effort" value="10"><p class="label inline"> 10</p></div>
<div><input type="radio" name="attr_effort" value="9"><p class="label inline"> 9</p></div>
<div><input type="radio" name="attr_effort" value="8"><p class="label inline"> 8</p></div>
<div><input type="radio" name="attr_effort" value="7"><p class="label inline"> 7</p></div>
<div><input type="radio" name="attr_effort" value="6"><p class="label inline"> 6</p></div>
<div><input type="radio" name="attr_effort" value="5"><p class="label inline"> 5</p></div>
<div><input type="radio" name="attr_effort" value="4"><p class="label inline"> 4</p></div>
<div><input type="radio" name="attr_effort" value="3"><p class="label inline"> 3</p></div>
<div><input type="radio" name="attr_effort" value="2"><p class="label inline"> 2</p></div>
<div><input type="radio" name="attr_effort" value="1"><p class="label inline"> 1</p></div>
<div class="single">
<input type="radio" name="attr_effort" value="0"><p class="label inline">&ndash; 0</p>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=Effort}} {{Roll=[[floor(({@{diepooleffort}}k5+@{conditional}+floor(@{penalty}))/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})]] penalty.}}" name="roll_checkeffort">Roll Effort</button>
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=Effort}} {{Roll=[[floor(({@{diepooleffort}}k5+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkeffort">Roll Effort</button>
</div>
<input type="hidden" name="attr_diepooleffort" value="0">
</div>
@@ -229,7 +243,21 @@
<h2>Miscellaneous Notes</h2>
<textarea name="attr_miscnotes"></textarea>
</div>
<!-- adding repeatable section for custom rolls -->
<div class="customrolls">
<h2>Custom Rolls</h2>
<p>Roll penalties and bonuses are applied automatically; <strong>RD</strong>, <strong>DD</strong>, and <strong>type of die</strong> are not.<br>
You can drop the lowest rolling dice by adding "dl" and the number of dice to remove. Alternately you can add "k" followed by however many dice you want to keep.</p>
<p>If rolling multiple types of dice and need to drop some, place them inside curly brackets. Example: <strong>{2d6+3d8}k4</strong>.</p>
<hr>
<fieldset class="repeating_custom">
<label>Name: </label><input type="text" name="attr_customrollname">
<label>Formula: </label><input type="text" name="attr_customdice" value="4d6dl1">
<button type="roll" value="&{template:custom} {{color=green}} {{title=@{character_name}}} {{subtitle=@{customrollname}}} {{Check=[[floor((@{customdice}+@{conditional}+floor(@{penalty})+@{bonus})/@{tn})]] success(es).}} {{Notes=Check made with a [[floor(@{penalty})+@{bonus}]] modifier.}}" name="roll_checkfirst">Roll</button>
<hr>
</fieldset>
</div>
<div class="last">&nbsp;</div>
</div>
EtherealWinds-playtest/preview.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 106 KiB