Skip to content

Instantly share code, notes, and snippets.

@Cazra

Cazra/css

Last active August 29, 2015 14:03
Show Gist options
  • Save Cazra/b288601580f55b635b22 to your computer and use it in GitHub Desktop.
Save Cazra/b288601580f55b635b22 to your computer and use it in GitHub Desktop.
Download ZIP
My Little Pony: Roleplaying is Magic, Season 4 edition
Raw
css
.charsheet {
background-image: url("https://sites.google.com/site/roleplayingismagichome/_/rsrc/1385907608270/config/WebsiteBackground_Rough.png.1385907608112.png");
height: 80%;
width: 100%;
}
.charsheet .sheet-everything {
height: 90%;
margin: 10px 40px;
width: 80%;
}
.charsheet .sheet-banner {
display: inline-block;
height: 50px;
width: 100%;
}
.charsheet .sheet-banner img.sheet-mlprimLogo {
float: right;
width: 20%;
}
.charsheet .sheet-tabsContainer {
height: 640px;
position: relative;
width: 640px;
}
.charsheet .sheet-tab {
float: left;
width: 16%;
height: 32px;
}
.charsheet .sheet-tab .sheet-tabInput {
position: absolute;
top: -9999px;
}
.charsheet .sheet-tab > label {
background: #82c;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
height: 22px;
margin: 0;
padding: 10px 0 0 0;
text-align: center;
vertical-align: middle;
width: 100%;
}
.charsheet .sheet-tab > label {
cursor: pointer;
}
.charsheet .sheet-tab > input:checked + label {
background: #a5f;
}
.charsheet .sheet-tab .sheet-tabPanel {
background: #404;
border: 4px solid #a5f;
border-radius: 10px;
color: #fff;
display: none;
height: 60%;
left: -32px;
max-height: 640px;
overflow-y: auto;
padding: 20px;
position: absolute;
top: 32px;
width: 100%;
}
.charsheet .sheet-tab input:checked + label + .sheet-tabPanel {
display: inline-block;
}
.charsheet button {
background: #a5f;
border-color: #82c;
color: #fff;
padding: 4px;
}
.charsheet input,select,textarea {
background: #000;
border: none;
color: #0ff;
}
.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet textarea {
height: auto;
resize: none;
max-width: 90%;
}
.charsheet .sheet-fraction {
display: inline;
font-size: 1.2em;
font-weight: bold;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}
.charsheet h2 {
border-bottom: 1px solid #a5f;
color: #fff;
line-height: normal;
margin: 0 0 5px 0;
width: 100%;
}
.charsheet .sheet-hLayout > div {
display: inline;
}
.charsheet .sheet-vLayout > div {
display: block;
}
.charsheet .sheet-field label {
color: white;
display: inline-block;
width: 80px;
}
.charsheet .sheet-column {
display: inline-block;
}
.charsheet #sheet-mainPanel input[type=text],select {
max-width: 150px;
}
.charsheet #sheet-mainPanel .sheet-attrBox {
margin: auto;
width: 150px;
}
.charsheet #sheet-mainPanel .sheet-attrBox label {
text-align: right;
width: 50%;
}
.charsheet #sheet-skillsPanel .repitem {
margin-bottom: 5px;
}
.charsheet #sheet-edgesPanel .repitem {
margin-bottom: 5px;
}
.charsheet .sheet-rankBox {
border: 1px solid #a5f;
display: inline-block;
position: relative;
height: 16px;
text-align: center;
width: 16px;
}
.charsheet .sheet-rankBox input{
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.charsheet .sheet-rankBox input + div{
background: #000;
color: #a5f;
height: 100%;
width: 100%;
}
.charsheet .sheet-rankBox input:checked + div{
background: #a5f;
color: #000;
}
.charsheet #sheet-magicPanel .sheet-spellBody{
border-bottom: 1px solid #a5f;
margin-bottom: 16px;
}
Raw
html
<div class="everything">
<div class="banner"><div class="space"></div><img class="mlprimLogo" src="https://sites.google.com/site/roleplayingismagichome/_/rsrc/1404003237260/0-0/RiM-Logo-Redesign.png" /></div>
<div class="tabsContainer">
<div class="tab">
<input id="sheet-mainRadio" type="radio" class="tabInput" name="tab" checked />
<label for="sheet-mainRadio">Main</label>
<div id="mainPanel" class="tabPanel">
<h2>General</h2>
<div class='column vLayout' style="width: 50%;">
<div class="field">
<label>Name:</label>
<input type="text" name="attr_name">
</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>
<div class="column vLayout">
<div class="field">
<label>XP:</label>
<input type="number" name="attr_xpUnspent"><div class="fraction">/</div><input type="number" name="attr_xp">
</div>
<div class="field">
<label>Fortitude:</label>
<input type="number" name="attr_fortitude"><div class="fraction">/</div><input type="number" name="attr_fortitude_max" disabled="tr value="0" /""ue" value="@{body}*10 + @{heart}*5 + @{fortitudeMaxMods}"/>
Modifiers: <input type="number" name="attr_fortitudeMaxMods" value="0" />
</div>
<div class="field">
<label>Willpower:</label>
<input type="number" name="attr_willpower"><div class="fraction">/</div><input type="number" name="attr_willpower_max" disabled="true" value="@{mind}*10 + @{heart}*5 + @{willpowerMaxMods}"/>
Modifiers: <input type="number" name="attr_willpowerMaxMods" value="0" />
</div>
<div class="field">
<label>Valor:</label>
<input type="number" name="attr_valor"><div class="fraction">/</div><input type="number" name="attr_valor_max" disabled="true" value="@{heart} + @{valorMaxMods}"/>
Modifiers: <input type="number" name="attr_valorMaxMods" value="0" />
</div>
</div>
<h2>Attributes</h2>
<table width="100%">
<tr>
<td>
<div class="attrBox field">
<label>MIND</label>
<input type="number" name="attr_mind">
</div>
</td>
<td>
<div class="attrBox field">
<label>BODY</label>
<input type="number" name="attr_body">
</div>
</td>
<td>
<div class="attrBox field">
<label>HEART</label>
<input type="number" name="attr_heart">
</div>
</td>
</tr>
</table>
<h2>Description</h2>
<textarea rows="3" name="attr_description"></textarea>
</div>
</div>
<div class="tab">
<input id="skillsRadio" type="radio" class="tabInput" name="tab" />
<label for="skillsRadio">Skills</label>
<div id="skillsPanel" class="tabPanel scrollingY">
<h2>MIND Skills</h2>
<fieldset name="skillsMind" class="repeating_skillsMind">
Name: <input type="text" name="attr_skillM">
Skill Training: <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>
Modifier: <input class="skillMod" type="number" name="attr_skillMMisc" value="0" title="Misc. Modifier"/>
</fieldset>
<h2>BODY Skills</h2>
<fieldset name="skillsBody" class="repeating_skillsBody">
Name: <input type="text" name="attr_skillB">
Skill Training: <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>
Modifier: <input class="skillMod" type="number" name="attr_skillBMisc" value="0" title="Misc. Modifier"/>
</fieldset>
<h2>HEART Skills</h2>
<fieldset name="skillsHeart" class="repeating_skillsHeart">
Name: <input type="text" name="attr_skillH">
Skill Training: <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>
Modifier: <input class="skillMod" type="number" name="attr_skillHMisc" value="0" title="Misc. Modifier"/>
</fieldset>
</div>
</div>
<div class="tab">
<input id="edgesRadio" type="radio" class="tabInput" name="tab" />
<label for="edgesRadio">Edges</label>
<div id="edgesPanel" class="tabPanel">
<p>
This section is for all edges other than Skill Training. Those go over in the Skills section.
</p>
<fieldset name="edges" class="repeating_edges">
Name: <input type="text" name="attr_edgeName" style="width: 100px;"/>
Effect: <input type="text" name="attr_edgeEffect" />
Edge rank:
<div class="rankBox trained" title="Trained">
<input type="checkbox" name="attr_edgeT" value="1">
<div>T</div>
</div>
<div class="rankBox trained" title="Improved">
<input type="checkbox" name="attr_edgeI" value="1">
<div>I</div>
</div>
<div class="rankBox trained" title="Greater">
<input type="checkbox" name="attr_edgeG" value="1">
<div>G</div>
</div>
</fieldset>
</div>
</div>
<div class="tab">
<input id="magicRadio" type="radio" class="tabInput" name="tab" />
<label for="magicRadio">Magic</label>
<div id="magicPanel" class="tabPanel">
<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" style="width: 100px;">
<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" style="width: 100px;">
<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" style="width: 100px;">
<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; margin-bottom: 10px; 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; margin-bottom: 10px; 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>
</tr>
<tr>
<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>
<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>
</tr>
<tr>
<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 class="tab">
<input id="lootRadio" type="radio" class="tabInput" name="tab" />
<label for="lootRadio">Loot</label>
<div id="lootPanel" class="tabPanel">
<div class="field money">
<label>Bits</label>
<input type="number" name="attr_money">
</div>
<div class="field">
<label>Equipped</label>
<textarea rows="5" name="attr_equipped"></textarea>
</div>
<div class="field">
<label>Inventory</label>
<textarea rows="9" name="attr_inventory"></textarea>
</div>
</div>
</div>
<div class="tab">
<input id="notesRadio" type="radio" class="tabInput" name="tab" />
<label for="notesRadio">Notes</label>
<div id="notesPanel" class="tabPanel">
<textarea rows="20" name="attr_notes"></textarea>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment