Fate Freeport: New character sheet
This commit is contained in:
St. Lawrence, Zachary
@@ -0,0 +1,243 @@
|
||||
/* === GENERAL === */
|
||||
.charsheet {
|
||||
min-width: 800px;
|
||||
}
|
||||
|
||||
/* Background image that is way too dark and busy to use in its default rendering */
|
||||
.sheet-character-bg {
|
||||
padding: 50px;
|
||||
background-image:url(http://www.evilhat.com/home/wp-content/uploads/2014/01/Fate_Freeport_The_Story.png);
|
||||
background-repeat:no-repeat;
|
||||
background-origin: border-box;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* Using white gradient with varying opacity to overwrite background so character sheet is usable */
|
||||
.sheet-character {
|
||||
padding: 0px;
|
||||
margin-bottom: 0px;
|
||||
background: -webkit-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,.8)); /*Safari 5.1-6*/
|
||||
background: -o-linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,.8)); /*Opera 11.1-12*/
|
||||
background: -moz-linear-gradient(bottom,rgba(255,255,255,1),rgba(255,255,255,.8)); /*Fx 3.6-15*/
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,.8)); /*Standard*/
|
||||
}
|
||||
|
||||
|
||||
/* use big bold and black section headers */
|
||||
.sheet-header {
|
||||
margin-bottom: 4px;
|
||||
padding: 2px 4px;
|
||||
|
||||
background: black;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sheet-section {
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
margin: 4px 0;
|
||||
padding: 1px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sheet-break {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
label,
|
||||
select {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input, textarea, select, .uneditable-input {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #555;
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input, select, .uneditable-input {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin: 0;
|
||||
height: 120px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* === LOGO === */
|
||||
.sheet-logo {
|
||||
width: 300px;
|
||||
margin: 0 5px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* === ASPECTS === */
|
||||
.sheet-col-aspects input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* === STRESS === */
|
||||
.sheet-section {
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
table.sheet-stress {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
table.sheet-stress td {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
table.sheet-stress td div.sheet-td-corruption-div,
|
||||
table.sheet-stress td div.sheet-td-stress-div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
left: calc(50% - 25px) !important;
|
||||
}
|
||||
|
||||
|
||||
table.sheet-stress td div.sheet-td-corruption-div,
|
||||
table.sheet-stress td div.sheet-td-corruption-div label {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
table.sheet-stress td div.sheet-td-corruption-div label,
|
||||
table.sheet-stress td div.sheet-td-stress-div label {
|
||||
position: relative;
|
||||
top:-50px;
|
||||
background: #ddd;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
display: block;
|
||||
/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
|
||||
|
||||
/* IE10 Consumer Preview */
|
||||
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
|
||||
|
||||
/* Mozilla Firefox */
|
||||
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
|
||||
|
||||
/* Opera */
|
||||
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
|
||||
|
||||
/* Webkit (Safari/Chrome 10) */
|
||||
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #C7C7C7));
|
||||
|
||||
/* Webkit (Chrome 11+) */
|
||||
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #C7C7C7 100%);
|
||||
|
||||
/* W3C Markup, IE10 Release Preview */
|
||||
background-image: linear-gradient(to top left, #FFFFFF 0%, #C7C7C7 100%);
|
||||
|
||||
}
|
||||
|
||||
table.sheet-stress td div.sheet-td-corruption-div label:hover,
|
||||
table.sheet-stress td div.sheet-td-stress-div label:hover {/* Note: This gradient may render differently in browsers that don't support the unprefixed gradient syntax */
|
||||
|
||||
/* IE10 Consumer Preview */
|
||||
background-image: -ms-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
|
||||
|
||||
/* Mozilla Firefox */
|
||||
background-image: -moz-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
|
||||
|
||||
/* Opera */
|
||||
background-image: -o-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
|
||||
|
||||
/* Webkit (Safari/Chrome 10) */
|
||||
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #8FECFF));
|
||||
|
||||
/* Webkit (Chrome 11+) */
|
||||
background-image: -webkit-linear-gradient(bottom right, #FFFFFF 0%, #8FECFF 100%);
|
||||
|
||||
/* W3C Markup, IE10 Release Preview */
|
||||
background-image: linear-gradient(to top left, #FFFFFF 0%, #8FECFF 100%);}
|
||||
|
||||
|
||||
input[type=checkbox].sheet-corruption-check,
|
||||
input[type=checkbox].sheet-stress-check {
|
||||
margin: 0px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
left: calc(50% - 27px) !important;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
|
||||
input[type=checkbox].sheet-corruption-check:checked ~ label,
|
||||
input[type=checkbox].sheet-stress-check:checked ~ label {
|
||||
background: url(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
table.sheet-stress tr.sheet-stress-labels,
|
||||
table.sheet-stress tr.sheet-stress-labels th {
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
table.sheet-stress tr.sheet-stress-labels th h3 {
|
||||
position: relative;
|
||||
line-height: 24px;
|
||||
font-size: 24px;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3.sheet-outline {
|
||||
color: white;
|
||||
text-shadow:
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
|
||||
/* === CONSEQUENCES === */
|
||||
.sheet-col-consequences {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sheet-col-consequences select {
|
||||
width: 100px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.sheet-col-consequences input {
|
||||
margin-left: 2px;
|
||||
width: calc(100% - 102px);
|
||||
}
|
||||
|
||||
/* === SPELLS === */
|
||||
.sheet-col-spells {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* === SPELLS === */
|
||||
.sheet-col-stunts {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
<div class="sheet-character-bg">
|
||||
<div class="sheet-character">
|
||||
<div class='sheet-2colrow'>
|
||||
<div class="sheet-col-id sheet-col">
|
||||
<div class="sheet-header">ID</div>
|
||||
<label>Name <input type="text" name="attr_name" placeholder="Name" title="@{name}"/></label>
|
||||
<textarea name="attr_description" placeholder="Description" title="@{description}"></textarea>
|
||||
</div> <!-- .section-id -->
|
||||
|
||||
<div class="sheet-col-refresh sheet-col">
|
||||
<div>
|
||||
<img class="sheet-logo" src="freeport-logo.png" alt="FATE FREEPORT" />
|
||||
</div>
|
||||
<div class="sheet-under-logo">
|
||||
<label>Refresh <input type="number" name="attr_refresh" placeholder="Refresh" title="@{refresh}"/></label>
|
||||
<label>Current <input type="number" name="attr_current_fate_points" placeholder="Current Fate Points" title="@{current_fate_points}"/></label>
|
||||
</div>
|
||||
</div> <!-- .section-refresh -->
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
|
||||
<div class='sheet-row'>
|
||||
<div class="sheet-col-aspects sheet-col">
|
||||
<div class="sheet-header">Aspects</div>
|
||||
<input type="text" name="attr_high_concept" placeholder="High Concept Aspect" title="@{high_concept}"/>
|
||||
<input type="text" name="attr_trouble" placeholder="Trouble Aspect" title="@{trouble}"/>
|
||||
<fieldset class="repeating_aspects">
|
||||
<input type="text" name="attr_aspect" />
|
||||
</fieldset>
|
||||
</div> <!-- .section-aspects -->
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
|
||||
<div class='sheet-row'>
|
||||
<div class="sheet-col-approaches sheet-col">
|
||||
<div class="sheet-header">Approaches</div>
|
||||
<table class="sheet-stress">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label>Strength</label></td>
|
||||
<td><input type="number" name="attr_str" title="@{str}"/></td>
|
||||
<td><button type='roll' value='/roll 4dF + @{str}' name='roll_str' /></td>
|
||||
<td/>
|
||||
<td><label>Intelligence</label></td>
|
||||
<td><input type="number" name="attr_int" title="@{int}"/></td>
|
||||
<td><button type='roll' value='/roll 4dF + @{int}' name='roll_int' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>Dexterity</label></td>
|
||||
<td><input type="number" name="attr_dex" title="@{dex}"/></td>
|
||||
<td><button type='roll' value='/roll 4dF + @{dex}' name='roll_dex' /></td>
|
||||
<td/>
|
||||
<td><label>Wisdom</label></td>
|
||||
<td><input type="number" name="attr_wis" title="@{wis}"/></td>
|
||||
<td><button type='roll' value='/roll 4dF + @{wis}' name='roll_wis' /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label>Constitution</label></td>
|
||||
<td><input type="number" name="attr_con" title="@{con}"/></td>
|
||||
<td><button type='roll' value='/roll 4dF + @{con}' name='roll_con' /></td>
|
||||
<td/>
|
||||
<td><label>Charisma</label></td>
|
||||
<td><input type="number" name="attr_cha" title="@{cha}"/></td>
|
||||
<td><button type='roll' value='/roll 4dF + @{cha}' name='roll_cha' /></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> <!-- .section-approaches -->
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
|
||||
<div class='sheet-2colrow'>
|
||||
<div class="sheet-col-stress sheet-col ">
|
||||
<div class="sheet-header">Physical Stress</div>
|
||||
<div class="sheet-section">
|
||||
<table class="sheet-stress">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_physical_stress_1" value="1" title="@{physical_stress_1}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_physical_stress_2" value="1" title="@{physical_stress_2}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_physical_stress_3" value="1" title="@{physical_stress_3}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_physical_stress_4" value="1" title="@{physical_stress_4}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="sheet-stress-labels">
|
||||
<th><h3>1</h3></th>
|
||||
<th><h3>2</h3></th>
|
||||
<th><h3 class="sheet-outline">3</h3></th>
|
||||
<th><h3 class="sheet-outline">4</h3></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
<div class="sheet-header">Mental Stress</div>
|
||||
<div class="sheet-section">
|
||||
<table class="sheet-stress">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_mental_stress_1" value="1" title="@{mental_stress_1}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_mental_stress_2" value="1" title="@{mental_stress_2}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_mental_stress_3" value="1" title="@{mental_stress_3}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-stress-div">
|
||||
<input class="sheet-stress-check" type="checkbox" name="attr_mental_stress_4" value="1" title="@{mental_stress_4}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="sheet-stress-labels">
|
||||
<th><h3>1</h3></th>
|
||||
<th><h3>2</h3></th>
|
||||
<th><h3 class="sheet-outline">3</h3></th>
|
||||
<th><h3 class="sheet-outline">4</h3></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
<div class="sheet-header">Corruption</div>
|
||||
<div class="sheet-section">
|
||||
<table class="sheet-stress">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="sheet-td-corruption-div">
|
||||
<input class="sheet-corruption-check" type="checkbox" name="attr_corruption_1" value="1" title="@{corruption_1}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-corruption-div">
|
||||
<input class="sheet-corruption-check" type="checkbox" name="attr_corruption_2" value="1" title="@{corruption_2}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-corruption-div">
|
||||
<input class="sheet-corruption-check" type="checkbox" name="attr_corruption_3" value="1" title="@{corruption_3}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="sheet-td-corruption-div">
|
||||
<input class="sheet-corruption-check" type="checkbox" name="attr_corruption_4" value="1" title="@{corruption_4}" />
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
<div class="sheet-header">Insanity</div>
|
||||
<textarea name="attr_insanity"></textarea>
|
||||
</div> <!-- .section-stress -->
|
||||
|
||||
<div class="sheet-col-consequences sheet-col ">
|
||||
<div class="sheet-header">Consequences</div>
|
||||
<fieldset class="repeating_consequences">
|
||||
<select name="attr_consequences_type">
|
||||
<option>Mild (2 stress)</option>
|
||||
<option>Moderate (4 stress)</option>
|
||||
<option>Severe (6 stress)</option>
|
||||
</select>
|
||||
<input type="text" name="attr_consequence" />
|
||||
</fieldset>
|
||||
</div> <!-- .section-consequences -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
|
||||
<div class="sheet-row">
|
||||
<div class="sheet-col-stunts sheet-col ">
|
||||
<div class="sheet-header">Stunts</div>
|
||||
<textarea name="attr_stunts" title="@{stunts}"></textarea>
|
||||
</div> <!-- .section-stunts -->
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
<div class="sheet-row">
|
||||
<div class="sheet-col-spells sheet-col ">
|
||||
<div class="sheet-header">Spells</div>
|
||||
<textarea name="attr_spells" title="@{spells}"></textarea>
|
||||
</div> <!-- .section-spells -->
|
||||
</div>
|
||||
|
||||
<div class="sheet-break"></div>
|
||||
|
||||
<div class='sheet-2colrow'>
|
||||
<div class="sheet-col-gear sheet-col">
|
||||
<div class="sheet-header">Gear</div>
|
||||
<textarea name="attr_gear"></textarea>
|
||||
</div> <!-- .section-gear -->
|
||||
|
||||
<div class="sheet-col-extras sheet-col">
|
||||
<div class="sheet-header">Extras</div>
|
||||
<textarea name="attr_extras"></textarea>
|
||||
</div> <!-- .section-extras -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"html": "fate.html",
|
||||
"css": "fate.css",
|
||||
"roll20userid": "675646",
|
||||
"authors": "Zachary St Lawrence",
|
||||
"preview": "fate.png",
|
||||
"instructions": "# Fate Freeport Character Sheet.\r## Based off of Devindra Payment (Ardnived) Fate core character sheet\r## with modifications to more closely mirror the Evilhat official freeport character sheet http://www.evilhat.com/home/wp-content/uploads/2013/02/Fate-Freeport-Character-Sheet.pdf\r\r"
|
||||
}
|
||||
Reference in New Issue
Block a user