Skip to content

Instantly share code, notes, and snippets.

@Cazra

Cazra/pipbuck.css

Created February 21, 2015 00:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Cazra/60e7f4e66e5c98bf3457 to your computer and use it in GitHub Desktop.
Save Cazra/60e7f4e66e5c98bf3457 to your computer and use it in GitHub Desktop.
Download ZIP
Roll20 charSheet - Fallout Equestria Pipbuck
Raw
pipbuck.css
.charsheet {
background-image: url("http://i336.photobucket.com/albums/n346/Hymnodi/Useful%20stuff/FALLOUT2.png");
}
.charsheet * {
border-color: #22ff88;
color: #22ff88;
}
.charsheet input, select, textarea {
background: rgba(0,0,0,0.5);
}
.charsheet input[type="number"] {
text-align: center;
}
.charsheet input[type="text"], input[type="number"], select {
border: none;
padding: 0px;
}
.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet select {
height: 1.5em;
}
.charsheet textarea {
height: auto;
resize: none;
width: 90%;
}
/* Set the color of input placeholder text. */
.charsheet ::-webkit-input-placeholder {
color: #22ff88;
opacity: 0.5;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #22ff88;
opacity: 0.5;
}
.charsheet button {
background-color: #22ff88;
background-image: none;
border-radius: 10px;
color: #000000;
}
.charsheet .sheet-relativePos {
position: relative;
}
.charsheet .sheet-all {
margin: 10px;
}
.charsheet .sheet-statsHeader {
border-width: 2;
display: table;
height: 30px;
width: 100%;
}
.charsheet .sheet-statsHeader .sheet-borderTitle {
font-size: 1.5em;
transform: translate(0, -100%);
}
.charsheet .sheet-statsHeader > div {
display: table-cell;
padding-left: 1em;
padding-right: 0.5em;
vertical-align: bottom;
}
.charsheet .sheet-tabContainer, .charsheet .sheet-tabContents {
height: 480px;
margin-bottom: 10px;
margin-top: 10px;
}
.charsheet .sheet-tabsFooter {
border-width: 2;
display: table;
height: 30px;
position: relative;
width: 100%;
}
.charsheet .sheet-tabsFooter > div:not(.sheet-tabContents) {
display: table-cell;
padding-left: 1em;
padding-right: 0.5em;
}
.charsheet .sheet-tabsFooter > .sheet-tab > label {
display: inline-block;
float: none;
height: 30px;
margin-bottom: -10px;
padding-top: 5px;
vertical-align: middle;
width: 100%;
}
.charsheet .sheet-tabsFooter .sheet-spacer {
border-bottom: solid;
width: 32px;
}
.charsheet .sheet-tabsFooter .sheet-tab {
transform: translate(0, 50%);
}
.charsheet .sheet-tabsFooter .sheet-tab:hover {
border: dotted 1px;
}
.charsheet .sheet-tabsFooter input.sheet-tabRadio:checked + .sheet-tab {
border: solid;
}
/*
Don't show the radio buttons for the tabs. Instead the user checks the tabs
by clicking their labels.
*/
.charsheet input.sheet-tabRadio {
width: 0px;
}
/*
Position the tabs' contents over the tab container.
*/
.charsheet .sheet-tabContents {
bottom: 30px;
display: none;
left: 0px;
position: absolute;
right: 0px;
}
/*
Only display the tab whose label is checked.
*/
.charsheet .sheet-tabRadio:checked + .sheet-tab + .sheet-tabContents {
display: block;
}
.charsheet .sheet-cornerNW {
border-left: solid;
border-top: solid;
}
.charsheet .sheet-cornerNE {
border-right: solid;
border-top: solid;
}
.charsheet .sheet-cornerSW {
border-bottom: solid;
border-left: solid;
}
.charsheet .sheet-cornerSE {
border-bottom: solid;
border-right: solid;
}
.charsheet .sheet-labelLeft {
display: inline-block;
font-weight: bold;
padding-right: 4px;
}
.charsheet .sheet-flowLayout {
display: inline-block;
}
.charsheet .sheet-panel {
border: solid;
border-left-color: transparent;
border-radius: 16px;
border-right-color: transparent;
padding: 10px;
// position: relative;
}
.charsheet .sheet-panel h2 {
border-bottom: solid 1px;
line-height: 1em;
margin-bottom: 0.5em;
}
.charsheet .sheet-panel h2 input {
font-size: 1em;
}
.charsheet .sheet-field {
margin-bottom: 10px;
}
.charsheet .sheet-field label {
float: left;
margin: 0px;
text-align: left;
width: 100px;
}
.charsheet .sheet-scrollingY {
overflow-y: auto;
}
.charsheet .sheet-overflowX {
overflow-x: visible;
}
.charsheet .sheet-stretchY {
height: 100%;
}
/* SPECIAL tab styles */
.charsheet .sheet-tabContents.sheet-special .sheet-statusImage {
height: 100%;
}
.charsheet .sheet-tabContents.sheet-special .sheet-statusImage input {
height: 0px;
}
.charsheet .sheet-tabContents.sheet-special .sheet-statusImage img {
display: none;
}
.charsheet .sheet-tabContents.sheet-special .sheet-statusImage input:in-range + img {
display: block;
}
.charsheet .sheet-tabContents.sheet-special .sheet-panel {
margin-bottom: 10px;
width: 90%;
}
.charsheet .sheet-tabContents.sheet-special .sheet-primaryAttr {
display: inline-block;
width: 100px;
}
.charsheet .sheet-tabContents.sheet-special .sheet-primaryAttr div {
margin-left: auto;
margin-right: auto;
width: 50%;
}
.charsheet .sheet-tabContents.sheet-special .sheet-primaryAttr .sheet-label {
font-size: 1.5em;
margin-bottom: 5px;
}
/* SKILLS tab styles */
.charsheet .sheet-tabContents.sheet-skills .sheet-panel {
margin-bottom: 10px;
width: 90%;
}
.charsheet .sheet-tabContents.sheet-skills .sheet-skillsList .table {
border-spacing: 32px 0px;
display: table;
}
.charsheet .sheet-tabContents.sheet-skills .sheet-skillsList input[type=text] {
width: 140px
}
.charsheet .sheet-tabContents.sheet-skills .sheet-skillsList input[type=number].sheet-skillMod {
width: 28px
}
.charsheet .sheet-tabContents.sheet-skills .sheet-skillsList .sheet-rollSkill button {
display: none;
height: 20px;
}
.charsheet .sheet-tabContents.sheet-skills .sheet-skillsList .sheet-rollSkill input:in-range + button {
display: inline;
}
.charsheet .sheet-rankBox {
border: solid 1px;
display: inline-block;
height: 20px;
position: relative;
width: 20px;
}
.charsheet .sheet-rankBox input[type="checkbox"] {
height: 100%;
left: 0px;
opacity: 0.0;
position: absolute;
top: 0px;
width: 100%;
}
.charsheet .sheet-rankBox input[type="checkbox"] + div {
background-color: rgba(0,0,0,0.5);
height: 100%;
text-align: center;
width: 100%;
}
.charsheet .sheet-rankBox input[type="checkbox"]:checked + div {
background-color: #22ff88;
color: #000000;
}
.charsheet div.sheet-tableRow {
display: table-row;
}
.charsheet div.sheet-tableRow > div {
display: table-cell;
}
/* MAGIC tab styles */
.charsheet .sheet-tabContents.sheet-magic .sheet-panel {
margin-bottom: 10px;
width: 90%;
}
.charsheet .sheet-tabContents.sheet-magic .sheet-spellsList select {
font-size: 1em;
width: 100px;
}
.charsheet .sheet-tabContents.sheet-magic .sheet-spellsList h2 input {
font-size: 0.8em;
}
.charsheet .sheet-tabContents.sheet-magic .sheet-spellsList .sheet-spellBody {
font-size: 0.8em;
}
/* INVENTORY tab styles */
.charsheet .sheet-tabContents.sheet-inventory .sheet-panel {
margin-bottom: 10px;
width: 90%;
}
.charsheet .sheet-tabContents.sheet-inventory .sheet-field.sheet-caps label {
width: 50px;
}
.charsheet .sheet-tabContents.sheet-inventory .sheet-field.sheet-caps input {
width: 50px;
}
/* General tab styles */
.charsheet .sheet-tabContents.sheet-general .sheet-panel {
margin-bottom: 10px;
width: 90%;
}
.charsheet input[value="test"] {
border: solid 2px red;
}
.charsheet input.sheet-hiddenNumber {
display: none;
height: 0px;
}
Raw
pipbuck.html
<div class="all">
<div class="statsHeader">
<div class="cornerNW"></div>
<div style="width:50px;">
<div class="borderTitle">STATS</div>
</div>
<div class="cornerNE">
<div class="labelLeft">XP</div><input type="number" name="attr_xp" />
</div>
<div class="cornerNE">
<div class="labelLeft">Fortitude</div>
<div class="flowLayout">
<input type="number" class="shortNum" name="attr_fortitude"/>/
<input type="number" class="shortNum" name="attr_fortitude_max" disabled="true" value="@{body}*10 + (@{heart} + @{edgeVitality} + @{edgeVitalityI} + @{edgeVitalityG})*5"/>
</div>
</div>
<div class="cornerNE">
<div class="labelLeft">Willpower</div>
<div class="sheet-flowLayout">
<input type="number" name="attr_willpower"/>/
<input type="number" name="attr_willpower_max" disabled="true" value="@{mind}*10 + (@{heart} + @{edgeDetermined} + @{edgeDeterminedI} + @{edgeDeterminedG})*5"/>
</div>
</div>
<div class="cornerNE">
<div class="labelLeft">Valor</div>
<div class="sheet-flowLayout">
<input type="number" name="attr_valor"/>/
<input type="number" name="attr_valor_max" disabled="true" value="@{heart} + @{edgeNobleSoul} + @{edgeNobleSoulI} + @{edgeNobleSoulG}"/>
</div>
</div>
</div>
<div class="tabContainer">
<!--This is just used to reserve space for the tabs' contents, which are asolutely positioned to here.-->
</div>
<div class="tabsFooter">
<div class="cornerSW"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_special" checked>
<div class="tab">
<label for="sheet-tab_special">S.P.E.C.I.A.L.</label>
</div>
<div class="tabContents special">
<div class="sheet-2colrow">
<div class="sheet-col statusImage">
<input type="hidden" name="attr_fAlpha" disabled="true" value="((@{fortitude}) / (@{fortitude_max}))"/>
<input type="hidden" name="attr_wAlpha" disabled="true" value="((@{willpower}) / (@{willpower_max}))"/>
<input type="hidden" name="attr_minHealth" disabled="true" value="(((@{fAlpha} + @{wAlpha}) - abs(@{fAlpha} - @{wAlpha}))/2)"/>
<input type="number" name="attr_isHealthy" disabled="true" value="@{minHealth}" min="0.500001" max="1.0"/>
<img src="http://th03.deviantart.net/fs70/PRE/i/2015/012/7/d/vault_filly_by_cazra-d8doquo.png">
<input type="number" name="attr_isBloodied" disabled="true" value="@{minHealth}" min="0.250001" max="0.5"/>
<img src="http://neonairgames.net/img/vaultFilly/VaultFilly_bloodied.png">
<input type="number" name="attr_isBloodied" disabled="true" value="@{minHealth}" min="0.000001" max="0.25"/>
<img src="http://neonairgames.net/img/vaultFilly/VaultFilly_critical.png">
<input type="number" name="attr_isBloodied" disabled="true" value="@{minHealth}" min="-9999" max="0"/>
<img src="http://neonairgames.net/img/vaultFilly/VaultFilly_sidelined.png">
</div>
<div class="sheet-col statsPanel">
<div class="panel">
<h2>General</h2>
<div class="field">
<label>Name</label><input type="text" name="attr_character_name" disabled="true" />
</div>
<div class="field">
<label>Race</label><input type="text" name="attr_race"/>
</div>
<div class="field">
<label>Guiding Element</label>
<select name="attr_guiding_elem">
<option value="def">Select</option>
<option value="generosity">Generosity</option>
<option value="honesty">Honesty</option>
<option value="kindness">Kindness</option>
<option value="laughter">Laughter</option>
<option value="loyalty">Loyalty</option>
<option value="magic">Magic</option>
</select>
</div>
<div class="field">
<label>Fatal Flaw</label><input type="text" name="attr_flaw">
</div>
<div class="field">
<label>Background Theme</label><input type="text" name="attr_bgTheme">
</div>
</div>
<div class="panel">
<h2>Attributes</h2>
<div class="primaryAttr">
<div class="label">
MIND
</div>
<div>
<input type="number" name="attr_mind" value="1" />
</div>
</div>
<div class="primaryAttr">
<div class="label">
BODY
</div>
<div>
<input type="number" name="attr_body" value="1" />
</div>
</div>
<div class="primaryAttr">
<div class="label">
HEART
</div>
<div>
<input type="number" name="attr_heart" value="1" />
</div>
</div>
</div>
<div class="panel">
<h2>Description</h2>
<textarea name="attr_description" rows="4"></textarea>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_skills">
<div class="tab">
<label for="sheet-tab_skills">SKILLS/PERKS</label>
</div>
<div class="tabContents skills">
<div class="sheet-2colrow stretchY relativePos">
<!-- Skills -->
<div class="col stretchY scrollingY overflowX">
<h2>SKILLS</h2>
<div class="panel skillsList">
<h2>MIND</h2>
<div class="table">
<fieldset name="skillsMind" class="repeating_skillsMind"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_skillM"/>
</div>
<div class="rankBox trained" title="Trained">
<input type="checkbox" name="attr_skillMT" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_skillMI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_skillMG" value="1"/>
<div>G</div>
</div>
<div class="rollSkill">
<input class="skillMod" type="number" name="attr_skillMAdv" value="0" title="Advantages"/>
<input class="skillMod" type="number" name="attr_skillMDis" value="0" title="Drawbacks"/>
<input class="skillMod" type="number" name="attr_skillMMisc" value="0" title="Misc. Modifier"/>
<input class="hiddenNumber" type="number" name="attr_skillMtierU" value="(@{skillMT} + @{skillMI} + @{skillMG})" min="0" max="0.1" disabled="true" />
<button type="roll" name="roll_mindSkill_untrained" value="/r [@{skillM} - untrained] {{2d6 + @{skillMAdv}[Adv] -abs(@{skillMDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{mind}[Mind] + @{skillMMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillMtierT" value="(@{skillMT} + @{skillMI} + @{skillMG})" min="1" max="1.1" disabled="true" />
<button type="roll" name="roll_mindSkill_trained" value="/r [@{skillM} - trained] {{3d6d1 + @{skillMAdv}[Adv] -abs(@{skillMDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{mind}[Mind] + @{skillMMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillMtierI" value="(@{skillMT} + @{skillMI} + @{skillMG})" min="2" max="2.1" disabled="true" />
<button type="roll" name="roll_mindSkill_improved" value="/r [@{skillM} - improved] {{4d6d2 + @{skillMAdv}[Adv] -abs(@{skillMDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{mind}[Mind] + @{skillMMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillMtierG" value="(@{skillMT} + @{skillMI} + @{skillMG})" min="3" max="3.1" disabled="true" />
<button type="roll" name="roll_mindSkill_greater" value="/r [@{skillM} - greater] {{4d6d2 + @{skillMAdv}[Adv] -abs(@{skillMDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{mind}[Mind] + 1[Gr] + @{skillMMisc}[Misc]"></button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="panel skillsList">
<h2>BODY</h2>
<div class="table">
<fieldset name="skillsBody" class="repeating_skillsBody"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_skillB"/>
</div>
<div class="rankBox trained" title="Trained">
<input type="checkbox" name="attr_skillBT" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_skillBI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_skillBG" value="1"/>
<div>G</div>
</div>
<div class="rollSkill">
<input class="skillMod" type="number" name="attr_skillBAdv" value="0" title="Advantages"/>
<input class="skillMod" type="number" name="attr_skillBDis" value="0" title="Drawbacks"/>
<input class="skillMod" type="number" name="attr_skillBMisc" value="0" title="Misc. Modifier"/>
<input class="hiddenNumber" type="number" name="attr_skillBtierU" value="(@{skillBT} + @{skillBI} + @{skillBG})" min="0" max="0.1" disabled="true" />
<button type="roll" name="roll_bodySkill_untrained" value="/r [@{skillB} - untrained] {{2d6 + @{skillBAdv}[Adv] -abs(@{skillBDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{body}[Body] + @{skillBMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillBtierT" value="(@{skillBT} + @{skillBI} + @{skillBG})" min="1" max="1.1" disabled="true" />
<button type="roll" name="roll_bodySkill_trained" value="/r [@{skillB} - trained] {{3d6d1 + @{skillBAdv}[Adv] -abs(@{skillBDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{body}[Body] + @{skillBMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillBtierI" value="(@{skillBT} + @{skillBI} + @{skillBG})" min="2" max="2.1" disabled="true" />
<button type="roll" name="roll_bodySkill_improved" value="/r [@{skillB} - improved] {{4d6d2 + @{skillBAdv}[Adv] -abs(@{skillBDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{body}[Body] + @{skillBMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillBtierG" value="(@{skillBT} + @{skillBI} + @{skillBG})" min="3" max="3.1" disabled="true" />
<button type="roll" name="roll_bodySkill_greater" value="/r [@{skillB} - greater] {{4d6d2 + @{skillBAdv}[Adv] -abs(@{skillBDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{body}[Body] + 1[Gr] + @{skillBMisc}[Misc]"></button>
</div>
</div>
</fieldset>
</div>
</div>
<div class="panel skillsList">
<h2>HEART</h2>
<div class="table">
<fieldset name="skillsHeart" class="repeating_skillsHeart"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_skillH"/>
</div>
<div class="rankBox trained" title="Trained">
<input type="checkbox" name="attr_skillHT" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_skillHI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_skillHG" value="1"/>
<div>G</div>
</div>
<div class="rollSkill">
<input class="skillMod" type="number" name="attr_skillHAdv" value="0" title="Advantages"/>
<input class="skillMod" type="number" name="attr_skillHDis" value="0" title="Drawbacks"/>
<input class="skillMod" type="number" name="attr_skillHMisc" value="0" title="Misc. Modifier"/>
<input class="hiddenNumber" type="number" name="attr_skillHtierU" value="(@{skillHT} + @{skillHI} + @{skillHG})" min="0" max="0.1" disabled="true" />
<button type="roll" name="roll_heartSkill_untrained" value="/r [@{skillH} - untrained] {{2d6 + @{skillHAdv}[Adv] -abs(@{skillHDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{heart}[Heart] + @{skillHMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillHtierT" value="(@{skillHT} + @{skillHI} + @{skillHG})" min="1" max="1.1" disabled="true" />
<button type="roll" name="roll_heartSkill_trained" value="/r [@{skillH} - trained] {{3d6d1 + @{skillHAdv}[Adv] -abs(@{skillHDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{heart}[Heart] + @{skillHMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillHtierI" value="(@{skillHT} + @{skillHI} + @{skillHG})" min="2" max="2.1" disabled="true" />
<button type="roll" name="roll_heartSkill_improved" value="/r [@{skillH} - improved] {{4d6d2 + @{skillHAdv}[Adv] -abs(@{skillHDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{heart}[Heart] + @{skillHMisc}[Misc]"></button>
<input class="hiddenNumber" type="number" name="attr_skillHtierG" value="(@{skillHT} + @{skillHI} + @{skillHG})" min="3" max="3.1" disabled="true" />
<button type="roll" name="roll_heartSkill_greater" value="/r [@{skillH} - greater] {{4d6d2 + @{skillHAdv}[Adv] -abs(@{skillHDis})[Drb], 0d1 + 12}kl1, 0d1 + 2}kh1 + @{heart}[Heart] + 1[Gr] + @{skillHMisc}[Misc]"></button>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<!-- Edges -->
<div class="col stretchY scrollingY">
<h2>PERKS</h2>
<div class="panel edgesList">
<h2>Built-in</h2>
<div class="table">
<div class="tableRow">
<div>
Determined
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeDetermined" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeDeterminedI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeDeterminedG" value="1"/>
<div>G</div>
</div>
</div>
<div class="tableRow">
<div>
Vitality
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeVitality" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeVitalityI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeVitalityG" value="1"/>
<div>G</div>
</div>
</div>
<div class="tableRow">
<div>
Noble Soul
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeNobleSoul" value="1"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeNobleSoulI" value="1"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeNobleSoulG" value="1"/>
<div>G</div>
</div>
</div>
</div>
</div>
<div class="panel edgesList">
<h2>Custom</h2>
<div class="table">
<fieldset name="edges" class="repeating_edges"> <!--A div is created for each instance which we can use as a row.-->
<div class="tableRow">
<div>
<input type="text" name="attr_edge"/>
</div>
<div class="rankBox trained" title="Taken">
<input type="checkbox" name="attr_edgeT"/>
<div>T</div>
</div>
<div class="rankBox improved" title="Improved">
<input type="checkbox" name="attr_edgeI"/>
<div>I</div>
</div>
<div class="rankBox greater" title="Greater">
<input type="checkbox" name="attr_edgeG"/>
<div>G</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_perks">
<div class="tab">
<label for="sheet-tab_perks">MAGIC</label>
</div>
<div class="tabContents magic">
<div class="stretchY scrollingY">
<div class="spellsList">
<fieldset name="spells" class="repeating_spells">
<div class="panel">
<div style="display: inline-block;">
<div class="rankBox" title="Prepared?">
<input type="checkbox" name="attr_spellPrepared"/>
<div>P</div>
</div>
</div>
<div style="display: inline-block; vertical-align: text-top; width: 90%;">
<h2>
<input type="text" name="attr_spellName" placeholder="Spell name"/>
Lv. <input type="number" name="attr_spellLevel" disabled="true"
value="(@{spellTarget} + @{spellRange} + @{spellDuration} + @{spellEffectsTotal} + @{spellSubjectsTotal})"/>
</h2>
<div class="spellBody">
Target: <select name="attr_spellTarget">
<option value=1>Individual</option>
<option value=2>Group</option>
<option value=4>Area</option>
<option value=8>Mass</option>
</select>
Range: <select name="attr_spellRange">
<option value=1>Contact</option>
<option value=2>Seen</option>
<option value=4>Known</option>
<option value=8>Unknown</option>
</select>
Duration: <select name="attr_spellDuration">
<option value=1>Immediate</option>
<option value=2>Sustained</option>
<option value=4>Temporary</option>
<option value=8>Persistent</option>
</select> <br/>
<div style="display: inline-block;">
Effects:
</div>
<div style="display: inline-block; vertical-align: text-top;">
<input type="hidden" name="attr_spellEffectsTotal" disabled="true"
value="(@{spellAnimate} + @{spellCombine} + @{spellDeceive} + @{spellDiminish} +
@{spellForge} + @{spellModify} + @{spellReveal} + @{spellSeparate})"/>
<table class="layoutTable">
<tr>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellAnimate" value="1"/>
<div>&nbsp;</div>
</div> Animate
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellCombine" value="1"/>
<div>&nbsp;</div>
</div> Combine
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellDeceive" value="1"/>
<div>&nbsp;</div>
</div> Deceive
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellDiminish" value="1"/>
<div>&nbsp;</div>
</div> Diminish
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellForge" value="1"/>
<div>&nbsp;</div>
</div> Forge
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellModify" value="1"/>
<div>&nbsp;</div>
</div> Modify
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellReveal" value="1"/>
<div>&nbsp;</div>
</div> Reveal
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellSeparate" value="1"/>
<div>&nbsp;</div>
</div> Separate
</td>
</tr>
</table>
</div> <br/>
<div style="display: inline-block;">
Subjects:
</div>
<div style="display: inline-block; vertical-align: text-top;">
<input type="hidden" name="attr_spellSubjectsTotal" disabled="true"
value="(@{spellAir} + @{spellAnimal} + @{spellBody} + @{spellConstruct} + @{spellEarth} +
@{spellEnergy} + @{spellForce} + @{spellHeat} + @{spellLight} + @{spellMagic} +
@{spellMind} + @{spellPlant} + @{spellShadow} + @{spellSound} + @{spellSpace} +
@{spellTime} + @{spellWater} + @{spellWeather})"/>
<table class="layoutTable">
<tr>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellAir" value="1"/>
<div>&nbsp;</div>
</div> Air
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellAnimal" value="1"/>
<div>&nbsp;</div>
</div> Animal
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellBody" value="1"/>
<div>&nbsp;</div>
</div> Body
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellConstruct" value="1"/>
<div>&nbsp;</div>
</div> Construct
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellEarth" value="1"/>
<div>&nbsp;</div>
</div> Earth
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellEnergy" value="1"/>
<div>&nbsp;</div>
</div> Energy
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellForce" value="1"/>
<div>&nbsp;</div>
</div> Force
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellHeat" value="1"/>
<div>&nbsp;</div>
</div> Heat
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellLight" value="1"/>
<div>&nbsp;</div>
</div> Light
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellMagic" value="1"/>
<div>&nbsp;</div>
</div> Magic
</td>
</tr>
<tr>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellMind" value="1"/>
<div>&nbsp;</div>
</div> Mind
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellPlant" value="1"/>
<div>&nbsp;</div>
</div> Plant
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellShadow" value="1"/>
<div>&nbsp;</div>
</div> Shadow
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellSound" value="1"/>
<div>&nbsp;</div>
</div> Sound
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellSpace" value="1"/>
<div>&nbsp;</div>
</div> Space
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellTime" value="1"/>
<div>&nbsp;</div>
</div> Time
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellWater" value="1"/>
<div>&nbsp;</div>
</div> Water
</td>
<td>
<div class="rankBox">
<input type="checkbox" name="attr_spellWeather" value="1"/>
<div>&nbsp;</div>
</div> Weather
</td>
</tr>
</table>
</div> <!-- End effects and subjects -->
<textarea name="attr_spellDescription" rows="3" placeholder="Spell description"></textarea>
</div> <!-- End spellBody -->
</div>
</div> <!-- End panel -->
</fieldset>
</div>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_inventory">
<div class="tab">
<label for="sheet-tab_inventory">INVENTORY</label>
</div>
<div class="tabContents inventory">
<div class="panel">
<div class="field caps">
<label>Caps</label>
<input type="number" name="attr_caps">
</div>
<label>Equipped</label>
<textarea rows="6" name="attr_equipped"></textarea>
<label>Inventory</label>
<textarea rows="12" name="attr_inventory"></textarea>
</div>
</div>
<div class="spacer"></div>
<input type="radio" class="tabRadio" name="tab" id="sheet-tab_general">
<div class="tab">
<label for="sheet-tab_general">GENERAL</label>
</div>
<div class="tabContents general">
<div class="panel">
<div class="sheet-2colrow">
<div class="sheet-col">
<label>Notes</label>
<textarea rows="20" name="attr_notes"></textarea>
</div>
<div class="sheet-col">
<label>Spells (Deprecated)</label>
<textarea rows="10" name="attr_spells"></textarea>
<label>Pet/Companion</label>
<textarea rows="10" name="attr_pet"></textarea>
</div>
</div>
</div>
</div>
<div class="cornerSE"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment