Titan World (Unofficial Attack on Titan RPG)

Added new character sheet by Flash.
This commit is contained in:
Lloydski246
2017-01-03 17:55:46 +00:00
parent cc92322f4b
commit c31fdf787e
3 changed files with 696 additions and 0 deletions
@@ -0,0 +1,476 @@
.charsheet {
width: 830px;
background: white;
font: Impact;
}
textarea {
resize: none;
height: auto;
width: 99%;
font: Impact;
}
textarea, input {
outline: none;
box-shadow: none;
margin-bottom: 1px;
font: Impact;
}
.sheet-header textarea, .sheet-header input {
border: none;
}
input[type="number"], input[type="text"] {
width: 100%;
}
select {
width: auto;
margin: 0;
}
.repcontainer .btn, .repcontrol .btn {
border-radius: 0;
background-image: none;
border: none;
}
/* ===== LAYOUT ===== */
.sheet-col-left {
float: left;
width: 39%;
}
.sheet-col-right {
float: right;
width: 60%;
}
/* ===== TOGGLE ===== */
.sheet-toggle:not(:checked) ~ .sheet-hide, .sheet-toggle:checked ~ .sheet-show {
display: none;
}
/* ===== SECTION HEADERS ===== */
.sheet-header {
background-color: #000;
color: #fff;
padding: 2px 0px;
vertical-align: middle;
line-height: 100%;
height: 32px;
line-height: 32px;
font-size: 1.3em;
margin: 3px 0px;
box-align: center;
border-radius: 4px;
padding: 2px 2px 2px 8px;
font: Impact;
}
.sheet-header input {
height: 28px;
border: none;
vertical-align: middle;
font-weight: bold;
font-size: 18px;
line-height: 18px;
margin: 2px;
}
.sheet-header input[type="text"] {
width: 2.2em;
}
.sheet-header input[type="number"] {
width: 2.7em;
}
.sheet-header input[type="number"]:disabled {
width: 2em;
}
.sheet-header > * {
text-align: right;
float: right;
height: 100%;
}
.sheet-header .sheet-section-name {
margin-right: 2px;
font-weight: bold;
text-align: left;
float: left;
}
/* ===== Affiliation Merge ===== */
.sheet-header-aff {
background-color: #000;
color: #fff;
padding: 2px 0px;
vertical-align: middle;
line-height: 100%;
height: 32px;
line-height: 32px;
font-size: 1.3em;
margin: 3px 0px;
box-align: center;
border-radius: 4px 0px 0px 4px;
padding: 2px 2px 2px 8px;
font: Impact;
}
.sheet-header-aff input {
height: 28px;
border: none;
vertical-align: middle;
font-weight: bold;
font-size: 20px;
line-height: 20px;
margin: 2px;
}
.sheet-header-aff input[type="text"] {
width: 2.2em;
}
.sheet-header-aff input[type="number"] {
width: 2.7em;
}
.sheet-header-aff input[type="number"]:disabled {
width: 2em;
}
.sheet-header-aff > * {
text-align: right;
float: right;
height: 100%;
}
.sheet-header-aff .sheet-section-name {
margin-right: 2px;
font-weight: bold;
text-align: left;
float: left;
}
.sheet-topbar.sheet-header-aff > input {
height: 100%;
width: 50%;
padding: 0;
margin: 0;
background-color: black;
color: white;
font-size: 38px;
line-height: 42px;
}
.sheet-statistics .sheet-header-aff {
width: 18%;
float: left;
margin-right: 0%;
}
.sheet-statistics .sheet-header-aff:last-child {
margin-right: 0;
}
.sheet-header-aff2 {
background-color: #000;
color: #fff;
padding: 2px 0px;
vertical-align: middle;
line-height: 100%;
height: 32px;
line-height: 32px;
font-size: 1.1em;
margin: 3px 0px;
box-align: center;
border-radius: 0px 4px 4px 0px;
padding: 2px 2px 2px 8px;
font: Impact;
}
.sheet-header-aff2 input {
height: 28px;
border: none;
vertical-align: middle;
font-weight: bold;
font-size: 18px;
line-height: 18px;
margin: 2px;
}
.sheet-header-aff2 input[type="text"] {
width: 11em;
}
.sheet-header-aff2 input[type="number"] {
width: 2.7em;
}
.sheet-header-aff2 input[type="number"]:disabled {
width: 2em;
}
.sheet-header-aff2 > * {
text-align: right;
float: right;
height: 100%;
}
.sheet-header-aff2 .sheet-section-name {
margin-right: 2px;
font-weight: bold;
text-align: left;
float: left;
}
.sheet-topbar.sheet-header-aff2 > input {
height: 100%;
width: 50%;
padding: 0;
margin: 0;
background-color: black;
color: white;
font-size: 38px;
line-height: 42px;
}
.sheet-statistics .sheet-header-aff2 {
width: 18%;
float: left;
margin-right: 0%;
}
.sheet-statistics .sheet-header-aff2:last-child {
margin-right: 0;
}
/* ===== MAIN HEADER ===== */
.sheet-topbar {
height: 50px;
padding: 4px 2% 4px 2%;
}
.sheet-topbar.sheet-header > input {
height: 100%;
width: 50%;
padding: 0;
margin: 0;
background-color: black;
color: white;
font-size: 38px;
line-height: 42px;
}
.sheet-topbar > .sheet-field-name {
float: left;
text-align: left;
}
.sheet-topbar > .sheet-field-class {
float: right;
text-align: right;
}
/* ===== STATISTICS ===== */
.sheet-statistics {
width: 100%;
margin-left: 0.5%;
}
.sheet-statistics .sheet-header {
width: 18%;
float: left;
margin-right: 0.6%;
}
.sheet-statistics .sheet-header:last-child {
margin-right: 0;
}
/* ===== ATTR LABELS ===== */
.sheet-attheader {
background-color: none;
color: #000;
padding: 2px 0px;
vertical-align: middle;
line-height: 100%;
height: 25px;
line-height: 18px;
font-size: 1.2em;
margin: 0px 0px;
box-align: center;
border-radius: 0px;
padding: 0px 0px 0px 8px;
background: none;
}
.sheet-attheader .sheet-section-name {
margin-right: 0px;
font-weight: bold;
text-align: center;
background: white;
}
.sheet-attlabel {
width: 100%;
margin-left: 0.5%;
}
.sheet-attlabel .sheet-attheader{
width: 18%;
float: left;
margin-right: 0.6%;
}
.sheet-attlabel .sheet-attheader:last-child {
margin-right: 0;
}
/* ===== ATTRIBUTES ===== */
.sheet-attributes {
margin-left: 0.8%;
margin-bottom: 10px;
margin-top: 10px;
}
.sheet-attributes .sheet-header {
height: auto;
width: 18%;
float: left;
margin-right: 0.8%;
padding: 4px;
padding-bottom: 6px;
position: relative;
margin-top: 10px;
}
.sheet-attributes .sheet-header > label {
height: 1em;
width: calc(90% - 8px);
margin: 0;
padding: 1px 2px;
margin: 0.5%;
text-transform: uppercase;
text-align: center;
font-weight: normal;
font-size: 12px;
background: white;
transform: skew(-10deg);
position: absolute;
}
.sheet-attributes .sheet-header > label.sheet-top {
top: -5px;
}
.sheet-attributes .sheet-header > label.sheet-bottom {
bottom: -2px;
}
.sheet-attributes .sheet-header input[type="number"] {
background: white;
width: 100%;
margin: 1;
text-align: center;
z-index: 1;
}
.sheet-attributes .sheet-row-1 input {
width: 90%;
height: 100%;
line-height: 80px;
font-size: 60px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
vertical-align: middle;
}
.sheet-attributes .sheet-row-2 {
width: 100%;
height: 16px;
padding: 1px;
overflow: hidden;
line-height: 80px;
font-size: 80px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.sheet-attributes .sheet-row-2 label {
color: #DDD;
font-size: 80%;
text-align: center;
background: white;
}
.sheet-attributes .sheet-row-3 label {
position: center;
color: #FFFFFF;
right: 12px;
bottom: 2px;
z-index: 1;
}
/* ===== UTILITY ===== */
.sheet-clearfix {
clear: both;
}
.sheet-right {
float: right !important;
}
.sheet-left {
float: left !important;
}
/* ===== TWEAKS ===== */
.sheet-section-moves textarea {
height: 100px;
}
.sheet-section-bio textarea {
height: 75px;
}
.sheet-section-bio input[name="attr_bio"],
.sheet-section-moves input[name="attr_movename"] {
font-weight: bold;
font-size: 10pt;
}
.sheet-section-moves input[name="attr_amovename"] {
font-weight: bold;
font-size: 10pt;
}
.sheet-section-moves input[name="attr_trait"] {
font-weight: bold;
font-size: 10pt;
}
.sheet-section-gear input[name="attr_itemtags"] {
width: 100%;
float: left;
}
/* ===== Button Reset ===== */
.sheet-section-name button[type="roll"]:before {
content: ""!important;
display: none;
}
.sheet-section-name button[type="roll"],
.sheet-section-name .sheet-btn {
width: 100%;
height:24px;
vertical-align: middle;
padding: 0;
display: inline-block;
margin: 0;
font-weight: bold;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
background-color: transparent;
border: 1px solid #ccc;
white-space: nowrap;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.sheet-section-name button[type="roll"]:hover,
.sheet-section-name .sheet-btn:hover,
.sheet-section-name .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
background-color: #DAA520;
border-color: #DAA520;
}
.charsheet .sheet-section-name .sheet-hider input[type=checkbox]:checked ~ .sheet-btn {
}
.sheet-section-name button[type="roll"] label,
.sheet-section-name button[type="roll"] input {
height:24px;
line-height: 24px;
font-size: 14pt;
vertical-align: middle;
text-align:center;
width: 99%;
cursor: pointer;
background: none;
box-shadow: none;
transition: none;
border-radius: none;
border:none;
font-weight:700;
}
.sheet-section-name button[type="roll"] input {
}
.sheet-section-name button[type="roll"]:hover label,
.sheet-section-name button[type="roll"]:hover input {
color: white;
border: none;
}
@@ -0,0 +1,210 @@
<div class="sheet-header sheet-topbar">
<input class="sheet-field-name" type="text" placeholder="Name" name="attr_character_name">
<input class="sheet-field-class" type="text" placeholder="Class" name="attr_class">
</div>
<!-- ===== 5 ROWS - LUCK & ATTRIBS ===== -->
<div class="sheet-statistics">
<div class="sheet-header">
<div class="sheet-section-name">Level</div>
<input type="text" name="attr_level">
</div>
<div class="sheet-header">
<div class="sheet-section-name">Luck</div>
<input type="text" name="attr_luck">
</div>
<div class="sheet-header">
<div class="sheet-section-name">Age</div>
<input type="text" name="attr_age">
</div>
<div class="sheet-header-aff">
<div class="sheet-section-name">Affiliation</div>
</div>
<div class="sheet-header-aff2">
<input type="text" name="attr_affiliation">
</div>
</div>
<div class="sheet-attributes">
<div class="sheet-header">
<div class="sheet-row-1">
<input type="text" name="attr_agility">
</div>
</div>
<div class="sheet-header">
<div class="sheet-row-1">
<input type="text" name="attr_execution">
</div>
</div>
<div class="sheet-header">
<div class="sheet-row-1">
<input type="text" name="attr_awareness">
</div>
</div>
<div class="sheet-header">
<div class="sheet-row-1">
<input type="text" name="attr_discipline">
</div>
</div>
<div class="sheet-header">
<div class="sheet-row-1">
<input type="text" name="attr_rage">
</div>
</div>
</div>
</div>
<div class="sheet-attlabel">
<div class="sheet-attheader">
<div class="sheet-section-name">
<button name="roll_agility" type="roll" value="/em rolls Agility: [[2d6+@{agility}]]">
<label>AGILITY</label>
</button>
</div>
</div>
<div class="sheet-attheader">
<div class="sheet-section-name">
<button name="roll_execution" type="roll" value="/em rolls Execution: [[2d6+@{execution}]]">
<label>EXECUTION</label>
</button></div>
</div>
<div class="sheet-attheader">
<div class="sheet-section-name">
<button name="roll_awareness" type="roll" value="/em rolls Awareness: [[2d6+@{awareness}]]">
<label>AWARENESS</label>
</button>
</div>
</div>
<div class="sheet-attheader">
<div class="sheet-section-name">
<button name="roll_discipline" type="roll" value="/em rolls Discipline: [[2d6+@{discipline}]]">
<label>DISCIPLINE</label>
</button>
</div>
</div>
<div class="sheet-attheader">
<div class="sheet-section-name">
<button name="roll_rage" type="roll" value="/em rolls Rage: [[2d6+@{rage}]]">
<label>RAGE</label>
</button>
</div>
</div>
</div>
<div class="sheet-clearfix"></div>
<div>
</div>
<div class="sheet-header">
<div class="sheet-section-name">Personal Information</div>
</div>
<div class="sheet-section-bio">
<textarea name="attr_bio" class="sheet-hide" placeholder="Personal Information"></textarea>
</div>
<!-- ===== COLUMN SPLIT ===== -->
<div class="sheet-col-left">
<!-- ===== GEAR ===== -->
<div class="sheet-header">
<div class="sheet-section-name">Gear & Equipment</div>
</div>
<div class="sheet-section-gear">
<fieldset class="repeating_gear">
<input name="attr_itemname" type="text" placeholder="Name">
<div class="sheet-clearfix"></div>
</fieldset>
</div>
</div>
<div class="sheet-col-right">
<!-- ===== MOVES ===== -->
<div class="sheet-header">
<div class="sheet-section-name">Starting Moves</div>
</div>
<div class="sheet-section-moves">
<fieldset class="repeating_moves">
<input type="text" name="attr_movename" placeholder="Move Name">
<textarea name="attr_movebody" class="sheet-hide" placeholder="Move Description"></textarea>
</fieldset>
</div>
</div>
<div class="sheet-clearfix"></div>
<!-- ===== Kills ===== -->
<div class="sheet-col-left">
<div class="sheet-header">
<div class="sheet-section-name">Kill Count & Information</div>
</div>
<div class="sheet-section-gear">
<fieldset class="repeating_kills">
<input name="attr_kill" type="text" placeholder="Name">
<div class="sheet-clearfix"></div>
</fieldset>
</div>
</div>
<div class="sheet-col-right">
<!-- ===== ADV MOVES ===== -->
<div class="sheet-header">
<div class="sheet-section-name">Advanced Moves</div>
</div>
<div class="sheet-section-moves">
<fieldset class="repeating_advmoves">
<input type="text" name="attr_amovename" placeholder="Move Name">
<textarea name="attr_amovebody" class="sheet-hide" display:inline-block placeholder="Move Description"></textarea>
</fieldset>
</div>
</div>
<div class="sheet-clearfix"></div>
<div class="sheet-col-left">
<!-- ===== Advantages ===== -->
<div class="sheet-header">
<div class="sheet-section-name">Advantages</div>
</div>
<div class="sheet-section-gear">
<fieldset class="repeating_advantage">
<input name="attr_advantage" type="text">
<div class="sheet-clearfix"></div>
</fieldset>
</div>
</div>
<div class="sheet-col-right">
<!-- ===== Disadvantages ===== -->
<div class="sheet-header">
<div class="sheet-section-name">Disadvantages</div>
</div>
<div class="sheet-section-moves">
<fieldset class="repeating_disadvantage">
<input type="text" name="attr_disadvantage">
</fieldset>
</div>
</div>
<div class="sheet-clearfix"></div>
<div class="sheet-header">
<div class="sheet-section-name">Additional Character Notes</div>
</div>
<div class="sheet-section-moves">
<fieldset class="repeating_traits">
<input type="text" name="attr_trait" placeholder="Note">
<textarea name="attr_traitbody" class="sheet-hide" placeholder="Description"></textarea>
</fieldset>
</div>
<br>
@@ -0,0 +1,10 @@
Titan World (Unofficial Attack on Titan RPG)
Titan World is based off of the Apocalypse World engine, and so after playing a couple of Titan world games
I decided to modify the existing AW sheet to fit Titan World.
This is my first attempt at actually making something like this, so I apologise that it
isn't overly pretty, but it is clean and functional. If you have suggestions or would like
to improve on it then just drop me a PM on roll20.
Flash