Skip to content

Instantly share code, notes, and snippets.

@Cazra

Cazra/css

Last active August 29, 2015 14:03
Show Gist options
  • Save Cazra/fc6e7abb1c6398ddf75f to your computer and use it in GitHub Desktop.
Save Cazra/fc6e7abb1c6398ddf75f to your computer and use it in GitHub Desktop.
Download ZIP
My Little Pony: Roleplaying is Magic, Season 3 edition character sheet
Raw
css
.charsheet label {
display: inline-block;
width: 75px;
text-align: right;
}
.charsheet .sheet-attrBox {
display:table-cell;
border:solid;
border-width:1px;
padding-right:5px;
}
.charsheet .sheet-attrBox label {
text-align:center;
font-weight:bold;
}
Raw
html
<div class="sheet-2colrow">
<div class="sheet-col" style="width:40%;">
<label>Name</label><input type="text" name="attr_character_name" disabled="true" /><br/>
<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><br/>
<label>Gender</label>
<select name="attr_gender" style="width:100px;">
<option value="def">Select</option>
<option value="female">Female</option>
<option value="male">Male</option>
<option value="none">n/a</option>
</select>
<label>XP</label><input type="number" name="attr_xp" /><br/>
<div style="display:table; border-spacing:10px; width:100%;">
<div class="sheet-attrBox">
<label>Mind</label><br/>
<input type="number" name="attr_mind" value="1 + @{hasEggHead}*3 + @{hasSmartCookie}*2 + @{hasStudentAthlete}*2 + @{hasPrizePony}*1 + @{hasCrusader}*1" disabled="true"/>
</div>
<div class="sheet-attrBox">
<label>Body</label><br/>
<input type="number" name="attr_body" value="1 + @{hasIronPony}*3 + @{hasPrizePony}*2 + @{hasDaredevil}*2 + @{hasStudentAthlete}*1 + @{hasDramaQueen}*1" disabled="true"/>
</div>
<div class="sheet-attrBox">
<label>Heart</label><br/>
<input type="number" name="attr_heart" value="1 + @{hasShowStopper}*3 + @{hasDramaQueen}*2 + @{hasCrusader}*2 + @{hasSmartCookie}*1 + @{hasDaredevil}*1" disabled="true"/>
</div>
</div>
</div>
<div class="sheet-col" style="width:55%">
<div class="sheet-3colrow">
<div class="sheet-col" style="width:25%;">
<div class="sheet-attrBox">
<label>Fortitude</label><br/>
<input type="number" name="attr_fortitude" value="0"/>
/<input type="number" name="attr_fortitude_max" value="(@{body} + @{heart})*(5 + @{isEarthPony}*floor(@{spec1AP}/4)) + @{isEarthPony}*@{spec1AP}*5" disabled="true"/>
</div><br/>
<div class="sheet-attrBox">
<label>Willpower</label><br/>
<input type="number" name="attr_willpower" value="0"/>
/<input type="number" name="attr_willpower_max" value="(@{mind} + @{heart})*(5 + @{isEarthPony}*floor(@{spec1AP}/4)) + @{isEarthPony}*@{spec1AP}*5" disabled="true"/>
</div><br/>
</div>
<div class="sheet-col" style="width:25%;">
<div class="sheet-attrBox">
<label>Energy</label><br/>
<input type="number" name="attr_energy" value="0"/>
/<input type="number" name="attr_energy_max" value="(((@{fortitude_max} + @{willpower_max}) + abs(@{fortitude_max} - @{willpower_max})) / 2)" disabled="true"/>
</div><br/>
<div class="sheet-attrBox">
<label>Virtue</label><br/>
<input type="number" name="attr_virtue" value="1"/>
</div>
</div>
<div class="sheet-col" style="width:35%;font-size:80%;">
<input type="checkbox" name="attr_hasEgghead" value="1">Egghead (+3M)</input><br/>
<input type="checkbox" name="attr_hasIronPony" value="1">Iron Pony (+3B)</input><br/>
<input type="checkbox" name="attr_hasShowStopper" value="1">Show Stopper (+3H)</input><br/>
<input type="checkbox" name="attr_hasSmartCookie" value="1">Smart Cookie (+2M, +1H)</input><br/>
<input type="checkbox" name="attr_hasStudentAthlete" value="1">Student Athlete (+2M, +1B)</input><br/>
<input type="checkbox" name="attr_hasPrizePony" value="1">Prize Pony (+2B, +1M)</input><br/>
<input type="checkbox" name="attr_hasDaredevil" value="1">Daredevil (+2B, +1H)</input><br/>
<input type="checkbox" name="attr_hasDramaQueen" value="1">Drama Queen (+2H, +1B)</input><br/>
<input type="checkbox" name="attr_hasCrusader" value="1">Crusader (+2H, +1M)</input><br/>
</div>
</div>
</div>
</div><br/>
<div>
<input type="checkbox" name="attr_isCrystalPony" value="1">Crystal Pony</input>
<input type="checkbox" name="attr_isEarthPony" value="1">Earth Pony</input>
<input type="checkbox" name="attr_isGriffon" value="1">Griffon</input>
<input type="checkbox" name="attr_isPegasus" value="1">Pegasus</input>
<input type="checkbox" name="attr_isUnicorn" value="1">Unicorn</input>
<input type="checkbox" name="attr_isZebra" value="1">Zebra</input>
<input type="checkbox" name="attr_isOtherRace" value="1">Other:</input><input type="text" name="attr_raceOther" />
</div><br/>
<div class="sheet-2colrow">
<div class="sheet-col" style="width:30%;">
<div style="background-color:#000000; color:#FFFFFF;">
Natural Abilities
</div>
<input type="text" name="attr_nat1"/><br/>
<input type="text" name="attr_nat2"/>
</div>
<div class="sheet-col" style="width:60%;">
<div style="background-color:#000000; color:#FFFFFF;">
Special Abilities
</div>
Primary:<input type="text" name="attr_spec1"/> AP:
<select name="attr_spec1AP" style="width:60px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select><br/>
Secondary:<input type="text" name="attr_spec2"/> AP:
<select name="attr_spec2AP" style="width:60px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
Utility:<input type="text" name="attr_spec3"/> AP:
<select name="attr_spec3AP" style="width:60px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br/>
</div>
</div><br/>
<div style="background-color:#000000; color:#FFFFFF;">
Edges
</div>
<fieldset class="repeating_edges">
<input type="text" name="attr_edge"/>
</fieldset>
<div style="background-color:#000000; color:#FFFFFF;">
Skills
</div>
<div class="sheet-3colrow">
<div class="sheet-col">
<div style="background-color:#000000; color:#FFFFFF;">
Body
</div>
<fieldset class="repeating_skillsBody">
<input type="text" name="attr_skillB" style="width:50%;"/>Ranks:
<select name="attr_skillRanksB" style="width:20%;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
</fieldset>
</div>
<div class="sheet-col">
<div style="background-color:#000000; color:#FFFFFF;">
Mind
</div>
<fieldset class="repeating_skillsMind">
<input type="text" name="attr_skillM" style="width:50%;"/>Ranks:
<select name="attr_skillRanksM" style="width:20%;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
</fieldset>
</div>
<div class="sheet-col">
<div style="background-color:#000000; color:#FFFFFF;">
Heart
</div>
<fieldset class="repeating_skillsHeart">
<input type="text" name="attr_skillH" style="width:50%;"/>Ranks:
<select name="attr_skillRanksH" style="width:20%;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br/>
</fieldset>
</div>
</div><br/>
<div style="background-color:#000000; color:#FFFFFF;">
Pets/Companions
</div>
<div>
<textarea cols="80" rows="10"></textarea>
</div><br/>
<div style="background-color:#000000; color:#FFFFFF;">
Loot
</div>
<div>
<textarea cols="80" rows="10"></textarea>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment