mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Kids on Brooms Official - v1 (#6684)
* kids on brooms official first pass * kids on brooms branding * adding missing json and screenshot
This commit is contained in:
Nic Bradley
@@ -0,0 +1,391 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Chelsea+Market|Montserrat:400&display=swap");
|
||||
.sheet-kob-wrapper {
|
||||
padding: 1em 3em;
|
||||
background: url("https://s3.amazonaws.com/files.d20.io/images/140339579/OXUcAr8mw0JvS2Ejs7Fj8Q/med.png?1591123400") center/cover;
|
||||
font-family: "Chelsea Market", serif;
|
||||
font-size: 10pt;
|
||||
}
|
||||
.sheet-kob-wrapper * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sheet-kob-wrapper input {
|
||||
height: 1.75em;
|
||||
}
|
||||
.sheet-kob-wrapper input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-kob-wrapper input[type=number]::-webkit-outer-spin-button, .sheet-kob-wrapper input[type=number]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.sheet-kob-wrapper input[type=number],
|
||||
.sheet-kob-wrapper input[type=text],
|
||||
.sheet-kob-wrapper textarea,
|
||||
.sheet-kob-wrapper select {
|
||||
background-color: transparent;
|
||||
font-family: "Montserrat", Verdana, sans-serif;
|
||||
font-size: 12pt;
|
||||
font-variant: normal;
|
||||
}
|
||||
.sheet-kob-wrapper input[type=number]:hover,
|
||||
.sheet-kob-wrapper input[type=text]:hover,
|
||||
.sheet-kob-wrapper textarea:hover,
|
||||
.sheet-kob-wrapper select:hover {
|
||||
background-color: rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
.sheet-kob-wrapper select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
height: 1.75em;
|
||||
cursor: pointer;
|
||||
background: transparent url("https://s3.amazonaws.com/files.d20.io/images/138210258/mZTqw1vke8SrkprMJmiZQw/med.png?1590443723") right 5px center no-repeat;
|
||||
}
|
||||
.sheet-kob-wrapper textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sheet-kob-wrapper label {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.sheet-kob-wrapper .itemcontrol {
|
||||
position: relative;
|
||||
}
|
||||
.sheet-kob-wrapper .itemcontrol button.repcontrol_del,
|
||||
.sheet-kob-wrapper .itemcontrol a.repcontrol_move {
|
||||
display: block;
|
||||
top: calc(50% - 1.5rem);
|
||||
position: relative;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
box-shadow: none;
|
||||
line-height: 2em;
|
||||
text-shadow: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet-kob-wrapper .itemcontrol button.repcontrol_del {
|
||||
margin-right: 0.25rem;
|
||||
background: #a00;
|
||||
color: #fff;
|
||||
}
|
||||
.sheet-kob-wrapper .itemcontrol a.repcontrol_move {
|
||||
margin-left: 0.25rem;
|
||||
background: transparent;
|
||||
color: #000;
|
||||
}
|
||||
.sheet-kob-wrapper .repcontrol {
|
||||
padding: 0.25em;
|
||||
background-color: transparent;
|
||||
}
|
||||
.sheet-kob-wrapper .repcontrol button.repcontrol_add,
|
||||
.sheet-kob-wrapper .repcontrol button.repcontrol_del,
|
||||
.sheet-kob-wrapper .repcontrol button.repcontrol_move,
|
||||
.sheet-kob-wrapper .repcontrol button.repcontrol_edit {
|
||||
display: block;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
box-shadow: none;
|
||||
font-size: 0;
|
||||
line-height: 1em;
|
||||
text-shadow: none;
|
||||
}
|
||||
.sheet-kob-wrapper .repcontrol button.repcontrol_add:before {
|
||||
display: block;
|
||||
content: "&";
|
||||
font-family: "Pictos";
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet-kob-wrapper .repcontrol button.repcontrol_edit:before {
|
||||
display: block;
|
||||
content: "p";
|
||||
right: 5px;
|
||||
font-family: "Pictos";
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-header__logo {
|
||||
height: 50px;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-header__trope[type=text] {
|
||||
width: 100%;
|
||||
padding: 0.25em;
|
||||
border: 2px solid #000;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
font-size: 24pt;
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1.25fr;
|
||||
gap: 1.5em;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body__strengths, .sheet-kob-wrapper .sheet-kob-body__flaws, .sheet-kob-wrapper .sheet-kob-body__stats, .sheet-kob-wrapper .sheet-kob-body__adversity, .sheet-kob-wrapper .sheet-kob-body__tropes, .sheet-kob-wrapper .sheet-kob-body__character {
|
||||
padding: 1.25em 1.25em;
|
||||
margin-bottom: 1.5em;
|
||||
background: url("https://s3.amazonaws.com/files.d20.io/images/140337271/wJZvx5ua03bzSc0DViK_YA/med.png?1591122772") top left/40px no-repeat, url("https://s3.amazonaws.com/files.d20.io/images/140337272/8TEVnItbqmvdXka2UVLulw/med.png?1591122772") top right/40px no-repeat, url("https://s3.amazonaws.com/files.d20.io/images/140337270/uKtXcumLfN1rNOl0EaBGKA/med.png?1591122772") bottom left/40px no-repeat, url("https://s3.amazonaws.com/files.d20.io/images/140337273/RPhav9hWTnUy4Sd0jwqq6A/med.png?1591122772") bottom right/40px no-repeat;
|
||||
border: 2px solid #000;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body__stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body__stats h2 {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body__subtext {
|
||||
display: block;
|
||||
font-family: "Montserrat", Verdana, sans-serif;
|
||||
font-size: 11pt;
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body__flaws .repcontrol, .sheet-kob-wrapper .sheet-kob-body__strengths .repcontrol {
|
||||
margin-top: 4em;
|
||||
border-top: 2px solid #000;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body h2 {
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
color: #611618;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-body__tropes textarea {
|
||||
min-height: 15em;
|
||||
height: 100%;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristics, .sheet-kob-wrapper .sheet-kob-characteristics__general, .sheet-kob-wrapper .sheet-kob-characteristics__wand, .sheet-kob-wrapper .sheet-kob-characteristics__broom, .sheet-kob-wrapper .sheet-kob-characteristics__other {
|
||||
padding: 0.5em;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristics h3, .sheet-kob-wrapper .sheet-kob-characteristics__general h3, .sheet-kob-wrapper .sheet-kob-characteristics__wand h3, .sheet-kob-wrapper .sheet-kob-characteristics__broom h3, .sheet-kob-wrapper .sheet-kob-characteristics__other h3 {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristics h3:after, .sheet-kob-wrapper .sheet-kob-characteristics__general h3:after, .sheet-kob-wrapper .sheet-kob-characteristics__wand h3:after, .sheet-kob-wrapper .sheet-kob-characteristics__broom h3:after, .sheet-kob-wrapper .sheet-kob-characteristics__other h3:after {
|
||||
display: inline;
|
||||
content: ":";
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristics__general {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristics__wand {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristic {
|
||||
grid-column: 1/-1;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristic__label {
|
||||
flex-shrink: 0;
|
||||
margin-right: 1em;
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristic__label:after {
|
||||
display: inline;
|
||||
content: ":";
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristic__select, .sheet-kob-wrapper .sheet-kob-characteristic__input[type=number], .sheet-kob-wrapper .sheet-kob-characteristic__input[type=text] {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristic--age, .sheet-kob-wrapper .sheet-kob-characteristic--pronouns, .sheet-kob-wrapper .sheet-kob-characteristic--wood, .sheet-kob-wrapper .sheet-kob-characteristic--core {
|
||||
grid-column: span 1;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-characteristic--core, .sheet-kob-wrapper .sheet-kob-characteristic--pronouns {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-flaw, .sheet-kob-wrapper .sheet-kob-strength {
|
||||
padding-top: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
border-top: 2px solid #000;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-flaw__wrapper, .sheet-kob-wrapper .sheet-kob-strength__wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-flaw__wrapper--text, .sheet-kob-wrapper .sheet-kob-strength__wrapper--text {
|
||||
display: grid;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-flaw__label, .sheet-kob-wrapper .sheet-kob-strength__label {
|
||||
flex-shrink: 0;
|
||||
font-size: 10pt;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-flaw__label:after, .sheet-kob-wrapper .sheet-kob-strength__label:after {
|
||||
display: inline;
|
||||
content: ":";
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-flaw__input[type=text], .sheet-kob-wrapper .sheet-kob-strength__input[type=text] {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-flaw__textarea, .sheet-kob-wrapper .sheet-kob-strength__textarea {
|
||||
height: 5em;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat {
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat:nth-child(even) {
|
||||
grid-template-columns: 2.5em 1fr;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat:nth-child(even) button {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat:nth-child(odd) {
|
||||
grid-template-columns: 1fr 2.5em;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat:nth-child(odd) button {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat * {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 0.5em;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat__select {
|
||||
grid-column: 1/-1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
height: 3em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: calc(50% - 1.25em);
|
||||
border-bottom: 2px solid #000;
|
||||
background-position-x: right 10px;
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat__button {
|
||||
line-height: 1em;
|
||||
border: 1px solid transparent;
|
||||
color: #611618;
|
||||
background: transparent;
|
||||
font-size: 12pt;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat__button:before {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat__button:hover {
|
||||
background: #611618;
|
||||
color: #fff;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat__label {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 7pt;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-stat__input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #000;
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-kob-wrapper .sheet-kob-adversity__input[type=number] {
|
||||
width: 100%;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-kobrooms {
|
||||
background: url("https://s3.amazonaws.com/files.d20.io/images/138445853/9o33D5SoZ3MkIHqP8tZWNA/max.png?1590524256") center/100%;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
border: 1px solid #611618;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container h1 {
|
||||
color: #611618;
|
||||
border-bottom: 2px solid #611618;
|
||||
font-family: "Chelsea Market", serif;
|
||||
font-size: 14pt;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container h2 {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 12pt;
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result {
|
||||
margin-top: 1em;
|
||||
font-family: "Chelsea Market", serif;
|
||||
font-size: 14pt;
|
||||
text-align: center;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result .importantroll,
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result .fullcrit,
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result .fullfail,
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result .inlinerollresult {
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
line-height: 1em;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result .importantroll {
|
||||
color: #3e7bff;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result .fullcrit {
|
||||
color: #4cc016;
|
||||
}
|
||||
.sheet-rolltemplate-kobrooms .sheet-kobroom-container .sheet-kobroom-roll-result .fullfail {
|
||||
color: #900;
|
||||
}
|
||||
@@ -0,0 +1,236 @@
|
||||
|
||||
<div class="kob-wrapper">
|
||||
<div class="kob-header">
|
||||
<div class="kob-header__logo"><img src="https://s3.amazonaws.com/files.d20.io/images/140339639/LGuCR6kY6ZAJ2kvwgkn41Q/max.png?1591123417"/></div>
|
||||
<input class="kob-header__trope" data-i18n-placeholder="Trope" name="attr_trope" placeholder="Trope" type="text"/>
|
||||
</div>
|
||||
<div class="kob-body">
|
||||
<div class="kob-body__leftcol">
|
||||
<div class="kob-body__character">
|
||||
<div class="kob-characteristics__general">
|
||||
<label class="kob-characteristic kob-characteristic--character_name"><strong class="kob-characteristic__label" data-i18n="Character Name">Character Name</strong>
|
||||
<input class="kob-characteristic__input" name="attr_character_name" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--age"><strong class="kob-characteristic__label" data-i18n="Age">Age</strong>
|
||||
<input class="kob-characteristic__input" name="attr_age" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--pronouns"><strong class="kob-characteristic__label" data-i18n="Pronouns">Pronouns</strong>
|
||||
<input class="kob-characteristic__input" name="attr_pronouns" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--fear"><strong class="kob-characteristic__label" data-i18n="Fear">Fear</strong>
|
||||
<input class="kob-characteristic__input" name="attr_fear" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--motivation"><strong class="kob-characteristic__label" data-i18n="Motivation">Motivation</strong>
|
||||
<input class="kob-characteristic__input" name="attr_motivation" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--description"><strong class="kob-characteristic__label" data-i18n="Description">Description</strong>
|
||||
<input class="kob-characteristic__input" name="attr_description" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--grade"><strong class="kob-characteristic__label" data-i18n="Grade">Grade</strong>
|
||||
<select class="kob-characteristic__select" name="attr_grade" type="text">
|
||||
<option data-i18n="Underclass" value="underclass">Underclass</option>
|
||||
<option data-i18n="Upperclass" value="upperclass">Upperclass</option>
|
||||
<option data-i18n="Faculty" value="faculty">Faculty</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="kob-characteristics__broom">
|
||||
<h3 data-i18n="Your Broom">Your Broom</h3>
|
||||
<label class="kob-characteristic kob-characteristic--name"><strong class="kob-characteristic__label" data-i18n="Name">Name</strong>
|
||||
<input class="kob-characteristic__input" name="attr_name" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--look"><strong class="kob-characteristic__label" data-i18n="Look">Look</strong>
|
||||
<input class="kob-characteristic__input" name="attr_look" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--mechanical_benefit"><strong class="kob-characteristic__label" data-i18n="Mechanical Benefit">Mechanical Benefit</strong>
|
||||
<input class="kob-characteristic__input" name="attr_mechanical_benefit" type="text"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="kob-characteristics__wand">
|
||||
<h3 data-i18n="Your Wand">Your Wand</h3>
|
||||
<label class="kob-characteristic kob-characteristic--wood"><strong class="kob-characteristic__label" data-i18n="Wood">Wood</strong>
|
||||
<input class="kob-characteristic__input" name="attr_wood" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic kob-characteristic--core"><strong class="kob-characteristic__label" data-i18n="Core">Core</strong>
|
||||
<input class="kob-characteristic__input" name="attr_core" type="text"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="kob-characteristics__other">
|
||||
<label class="kob-characteristic kob-characteristic--animal_familiar"><strong class="kob-characteristic__label" data-i18n="Animal Familiar">Animal Familiar</strong>
|
||||
<input class="kob-characteristic__input" name="attr_animal_familiar" type="text"/>
|
||||
</label>
|
||||
<label class="kob-characteristic--textarea kob-characteristic--school_bag"><strong class="kob-characteristic__label" data-i18n="Schoolbag">Schoolbag</strong>
|
||||
<textarea class="kob-characteristic__textarea" name="attr_school_bag"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-body__strengths">
|
||||
<h2 data-i18n="Strengths">Strengths</h2><span class="kob-body__subtext" data-i18n="You start with your 'grade Strength' and two more.">You start with your 'grade Strength' and two more.</span>
|
||||
<fieldset class="repeating_strengths">
|
||||
<div class="kob-strength">
|
||||
<div class="kob-strength__wrapper"><strong class="kob-strength__label" data-i18n="Strength Name">Strength Name</strong>
|
||||
<input class="kob-strength__input" name="attr_strength_name" type="text"/>
|
||||
</div>
|
||||
<div class="kob-strength__wrapper--text"><strong class="kob-strength__label" data-i18n="Strength Effects">Strength Effects</strong>
|
||||
<textarea class="kob-strength__textarea" name="attr_strength_description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="kob-body__flaws">
|
||||
<h2 data-i18n="Flaws">Flaws</h2>
|
||||
<fieldset class="repeating_flaws">
|
||||
<div class="kob-flaw">
|
||||
<div class="kob-flaw__wrapper"><strong class="kob-flaw__label" data-i18n="Flaw Name">Flaw Name</strong>
|
||||
<input class="kob-flaw__input" name="attr_flaw_name" type="text"/>
|
||||
</div>
|
||||
<div class="kob-flaw__wrapper"><strong class="kob-flaw__label" data-i18n="Flaw Effects">Flaw Effects</strong>
|
||||
<textarea class="kob-flaw__textarea" name="attr_flaw_description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-body__rightcol">
|
||||
<div class="kob-body__stats">
|
||||
<h2 data-i18n="Stats">Stats </h2>
|
||||
<div class="kob-stat">
|
||||
<button class="kob-stat__button" data-i18n="Fight" name="roll_fight" type="roll" value="&{template:kobrooms} {{name=Fight}} {{character_name=@{character_name}}} {{roll=[[1@{fight}!+?{Bonus|Stat,@{fight_stat}|Magic,@{fight_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Fight</button>
|
||||
<div class="kob-stat__wrapper">
|
||||
<select class="kob-stat__select" name="attr_fight">
|
||||
<option data-i18n="d4" value="d4">d4</option>
|
||||
<option data-i18n="d6" value="d6">d6</option>
|
||||
<option data-i18n="d8" value="d8">d8</option>
|
||||
<option data-i18n="d10" value="d10">d10</option>
|
||||
<option data-i18n="d12" value="d12">d12</option>
|
||||
<option data-i18n="d20" value="d20">d20</option>
|
||||
</select>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_fight_stat" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Stat">Stat</span>
|
||||
</label>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_fight_magic" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Magic">Magic</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-stat">
|
||||
<button class="kob-stat__button" data-i18n="Flight" name="roll_flight" type="roll" value="&{template:kobrooms} {{name=Flight}} {{character_name=@{character_name}}} {{roll=[[1@{flight}!+?{Bonus|Stat,@{flight_stat}|Magic,@{flight_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Flight</button>
|
||||
<div class="kob-stat__wrapper">
|
||||
<select class="kob-stat__select" name="attr_flight">
|
||||
<option data-i18n="d4" value="d4">d4</option>
|
||||
<option data-i18n="d6" value="d6">d6</option>
|
||||
<option data-i18n="d8" value="d8">d8</option>
|
||||
<option data-i18n="d10" value="d10">d10</option>
|
||||
<option data-i18n="d12" value="d12">d12</option>
|
||||
<option data-i18n="d20" value="d20">d20</option>
|
||||
</select>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_flight_stat" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Stat">Stat</span>
|
||||
</label>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_flight_magic" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Magic">Magic</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-stat">
|
||||
<button class="kob-stat__button" data-i18n="Brains" name="roll_brains" type="roll" value="&{template:kobrooms} {{name=Brains}} {{character_name=@{character_name}}} {{roll=[[1@{brains}!+?{Bonus|Stat,@{brains_stat}|Magic,@{brains_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Brains</button>
|
||||
<div class="kob-stat__wrapper">
|
||||
<select class="kob-stat__select" name="attr_brains">
|
||||
<option data-i18n="d4" value="d4">d4</option>
|
||||
<option data-i18n="d6" value="d6">d6</option>
|
||||
<option data-i18n="d8" value="d8">d8</option>
|
||||
<option data-i18n="d10" value="d10">d10</option>
|
||||
<option data-i18n="d12" value="d12">d12</option>
|
||||
<option data-i18n="d20" value="d20">d20</option>
|
||||
</select>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_brains_stat" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Stat">Stat</span>
|
||||
</label>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_brains_magic" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Magic">Magic</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-stat">
|
||||
<button class="kob-stat__button" data-i18n="Brawn" name="roll_brawn" type="roll" value="&{template:kobrooms} {{name=Brawn}} {{character_name=@{character_name}}} {{roll=[[1@{brawn}!+?{Bonus|Stat,@{brawn_stat}|Magic,@{brawn_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Brawn</button>
|
||||
<div class="kob-stat__wrapper">
|
||||
<select class="kob-stat__select" name="attr_brawn">
|
||||
<option data-i18n="d4" value="d4">d4</option>
|
||||
<option data-i18n="d6" value="d6">d6</option>
|
||||
<option data-i18n="d8" value="d8">d8</option>
|
||||
<option data-i18n="d10" value="d10">d10</option>
|
||||
<option data-i18n="d12" value="d12">d12</option>
|
||||
<option data-i18n="d20" value="d20">d20</option>
|
||||
</select>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_brawn_stat" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Stat">Stat</span>
|
||||
</label>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_brawn_magic" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Magic">Magic</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-stat">
|
||||
<button class="kob-stat__button" data-i18n="Charm" name="roll_charm" type="roll" value="&{template:kobrooms} {{name=Charm}} {{character_name=@{character_name}}} {{roll=[[1@{charm}!+?{Bonus|Stat,@{charm_stat}|Magic,@{charm_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Charm</button>
|
||||
<div class="kob-stat__wrapper">
|
||||
<select class="kob-stat__select" name="attr_charm">
|
||||
<option data-i18n="d4" value="d4">d4</option>
|
||||
<option data-i18n="d6" value="d6">d6</option>
|
||||
<option data-i18n="d8" value="d8">d8</option>
|
||||
<option data-i18n="d10" value="d10">d10</option>
|
||||
<option data-i18n="d12" value="d12">d12</option>
|
||||
<option data-i18n="d20" value="d20">d20</option>
|
||||
</select>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_charm_stat" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Stat">Stat</span>
|
||||
</label>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_charm_magic" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Magic">Magic</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-stat">
|
||||
<button class="kob-stat__button" data-i18n="Grit" name="roll_grit" type="roll" value="&{template:kobrooms} {{name=Grit}} {{character_name=@{character_name}}} {{roll=[[1@{grit}!+?{Bonus|Stat,@{grit_stat}|Magic,@{grit_magic}|None,0}+?{Bonuses / Penalties|0}]]}}">Grit</button>
|
||||
<div class="kob-stat__wrapper">
|
||||
<select class="kob-stat__select" name="attr_grit">
|
||||
<option data-i18n="d4" value="d4">d4</option>
|
||||
<option data-i18n="d6" value="d6">d6</option>
|
||||
<option data-i18n="d8" value="d8">d8</option>
|
||||
<option data-i18n="d10" value="d10">d10</option>
|
||||
<option data-i18n="d12" value="d12">d12</option>
|
||||
<option data-i18n="d20" value="d20">d20</option>
|
||||
</select>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_grit_stat" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Stat">Stat</span>
|
||||
</label>
|
||||
<label class="kob-stat__label">
|
||||
<input class="kob-stat__input" name="attr_grit_magic" type="text" value="0"/><span class="kob-stat__tag" data-i18n="Magic">Magic</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="kob-body__adversity">
|
||||
<h2 data-i18n="Adversity Tokens">Adversity Tokens</h2><span class="kob-body__subtext" data-i18n="Begin the game with 3 adversity tokens. Add 1 each time you fail a roll.">Begin the game with 3 adversity tokens. Add 1 each time you fail a roll.</span>
|
||||
<label class="kob-adversity">
|
||||
<input class="kob-adversity__input" name="attr_adversity" type="number" value="3"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="kob-body__tropes">
|
||||
<h2 data-i18n="Trope Questions">Trope Questions</h2><span class="kob-body__subtext" data-i18n="Share these answers with the GM.">Share these answers with the GM.</span>
|
||||
<label class="kob-tropes">
|
||||
<textarea class="kob-tropes__textarea" name="attr_tropes"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<rolltemplate class="sheet-rolltemplate-kobrooms">
|
||||
<div class="sheet-kobroom-container">{{#name}}
|
||||
<h1>{{name}} </h1>{{/name}}
|
||||
<div class="sheet-kobroom-body">{{#character_name}}
|
||||
<h2>{{character_name}} </h2>{{/character_name}}
|
||||
{{#roll}}
|
||||
<div class="sheet-kobroom-roll-result">Result: {{roll}}</div>{{/roll}}
|
||||
</div>
|
||||
</div>
|
||||
</rolltemplate>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"html": "kobrooms.html",
|
||||
"css": "kobrooms.css",
|
||||
"authors": "Nic B.",
|
||||
"roll20userid": "45398",
|
||||
"preview": "kobrooms.png",
|
||||
"instructions": "Official Kids on Brooms by Hunters Entertainment"
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
include mixins.pug
|
||||
|
||||
.kob-wrapper
|
||||
.kob-header
|
||||
.kob-header__logo
|
||||
img(src="https://s3.amazonaws.com/files.d20.io/images/140339639/LGuCR6kY6ZAJ2kvwgkn41Q/max.png?1591123417")
|
||||
input.kob-header__trope(data-i18n-placeholder="Trope", name="attr_trope", placeholder="Trope", type="text")
|
||||
.kob-body
|
||||
.kob-body__leftcol
|
||||
.kob-body__character
|
||||
.kob-characteristics__general
|
||||
each characteristic in ["Character Name", "Age","Pronouns","Fear","Motivation","Description"]
|
||||
- const attr = characteristic.toLowerCase().replace(/ /g, "_");
|
||||
+characteristic-display(characteristic, attr)
|
||||
+select-display("Grade", "grade", ["Underclass", "Upperclass", "Faculty"])
|
||||
.kob-characteristics__broom
|
||||
h3(data-i18n="Your Broom") Your Broom
|
||||
each characteristic in ["Name", "Look","Mechanical Benefit"]
|
||||
- const attr = characteristic.toLowerCase().replace(/ /g, "_");
|
||||
+characteristic-display(characteristic, attr)
|
||||
.kob-characteristics__wand
|
||||
h3(data-i18n="Your Wand") Your Wand
|
||||
each characteristic in ["Wood","Core"]
|
||||
- const attr = characteristic.toLowerCase().replace(/ /g, "_");
|
||||
+characteristic-display(characteristic, attr)
|
||||
.kob-characteristics__other
|
||||
each characteristic in ["Animal Familiar"]
|
||||
- const attr = characteristic.toLowerCase().replace(/ /g, "_");
|
||||
+characteristic-display(characteristic, attr)
|
||||
label.kob-characteristic--textarea(class=`kob-characteristic--school_bag`)
|
||||
strong.kob-characteristic__label(data-i18n="Schoolbag") Schoolbag
|
||||
textarea.kob-characteristic__textarea(name=`attr_school_bag`)
|
||||
.kob-body__strengths
|
||||
h2(data-i18n="Strengths") Strengths
|
||||
span.kob-body__subtext(data-i18n=`You start with your 'grade Strength' and two more.`) You start with your 'grade Strength' and two more.
|
||||
fieldset(class="repeating_strengths")
|
||||
.kob-strength
|
||||
.kob-strength__wrapper
|
||||
strong.kob-strength__label(data-i18n="Strength Name") Strength Name
|
||||
input.kob-strength__input(name="attr_strength_name", type="text")
|
||||
.kob-strength__wrapper--text
|
||||
strong.kob-strength__label(data-i18n="Strength Effects") Strength Effects
|
||||
textarea.kob-strength__textarea(name="attr_strength_description")
|
||||
.kob-body__flaws
|
||||
h2(data-i18n="Flaws") Flaws
|
||||
fieldset(class="repeating_flaws")
|
||||
.kob-flaw
|
||||
.kob-flaw__wrapper
|
||||
strong.kob-flaw__label(data-i18n="Flaw Name") Flaw Name
|
||||
input.kob-flaw__input(name="attr_flaw_name", type="text")
|
||||
.kob-flaw__wrapper
|
||||
strong.kob-flaw__label(data-i18n="Flaw Effects") Flaw Effects
|
||||
textarea.kob-flaw__textarea(name="attr_flaw_description")
|
||||
.kob-body__rightcol
|
||||
.kob-body__stats
|
||||
h2(data-i18n="Stats") Stats
|
||||
each stat in ["Fight", "Flight", "Brains", "Brawn", "Charm", "Grit"]
|
||||
- const attr = stat.toLowerCase().replace(/ /g, "_");
|
||||
+stat-display(stat, attr)
|
||||
.kob-body__adversity
|
||||
h2(data-i18n="Adversity Tokens") Adversity Tokens
|
||||
span.kob-body__subtext(data-i18n=`Begin the game with 3 adversity tokens. Add 1 each time you fail a roll.`) Begin the game with 3 adversity tokens. Add 1 each time you fail a roll.
|
||||
label.kob-adversity
|
||||
input.kob-adversity__input(name=`attr_adversity`, type="number", value="3")
|
||||
.kob-body__tropes
|
||||
h2(data-i18n="Trope Questions") Trope Questions
|
||||
span.kob-body__subtext(data-i18n=`Share these answers with the GM.`) Share these answers with the GM.
|
||||
label.kob-tropes
|
||||
textarea.kob-tropes__textarea(name=`attr_tropes`)
|
||||
|
||||
include rolltemplates.pug
|
||||
@@ -0,0 +1,37 @@
|
||||
mixin characteristic-display(name, attr)
|
||||
label.kob-characteristic(class=`kob-characteristic--${attr}`)
|
||||
strong.kob-characteristic__label(data-i18n=name)=name
|
||||
input.kob-characteristic__input(name=`attr_${attr}`, type="text")
|
||||
|
||||
mixin select-display(name, attr, options)
|
||||
label.kob-characteristic(class=`kob-characteristic--${attr}`)
|
||||
strong.kob-characteristic__label(data-i18n=name)=name
|
||||
select.kob-characteristic__select(name=`attr_${attr}`, type="text")
|
||||
each option in options
|
||||
- const val = option.toLowerCase();
|
||||
option(data-i18n=option, value=val)=option
|
||||
|
||||
mixin stat-display(name, attr)
|
||||
-
|
||||
const roll = [
|
||||
`&{template:kobrooms}`,
|
||||
`{{name=${name}}}`,
|
||||
`{{character_name=@{character_name}}}`,
|
||||
`{{roll=[[1@{${attr}}!+?{Bonus|Stat,@{${attr}_stat}|Magic,@{${attr}_magic}|None,0}+?{Bonuses / Penalties|0}]]}}`,
|
||||
].join(" ");
|
||||
.kob-stat
|
||||
button.kob-stat__button(data-i18n=name, name=`roll_${attr}`, type="roll", value=roll)=name
|
||||
.kob-stat__wrapper
|
||||
select.kob-stat__select(name=`attr_${attr}`)
|
||||
+dice-select()
|
||||
label.kob-stat__label
|
||||
input.kob-stat__input(name=`attr_${attr}_stat`, type="text", value="0")
|
||||
span.kob-stat__tag(data-i18n="Stat") Stat
|
||||
label.kob-stat__label
|
||||
input.kob-stat__input(name=`attr_${attr}_magic`, type="text", value="0")
|
||||
span.kob-stat__tag(data-i18n="Magic") Magic
|
||||
|
||||
mixin dice-select(selected)
|
||||
- const dice = ["d4", "d6", "d8", "d10", "d12", "d20"];
|
||||
each die in dice
|
||||
option(data-i18n=die value=die selected=(die == selected))=die
|
||||
@@ -0,0 +1,13 @@
|
||||
rolltemplate.sheet-rolltemplate-kobrooms
|
||||
.sheet-kobroom-container
|
||||
| {{#name}}
|
||||
h1 {{name}}
|
||||
| {{/name}}
|
||||
.sheet-kobroom-body
|
||||
| {{#character_name}}
|
||||
h2 {{character_name}}
|
||||
| {{/character_name}}
|
||||
| {{#roll}}
|
||||
.sheet-kobroom-roll-result
|
||||
| Result: {{roll}}
|
||||
| {{/roll}}
|
||||
@@ -0,0 +1,552 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Chelsea+Market|Montserrat:400&display=swap');
|
||||
|
||||
.sheet-kob-wrapper {
|
||||
padding: 1em 3em;
|
||||
|
||||
background: url("https://s3.amazonaws.com/files.d20.io/images/140339579/OXUcAr8mw0JvS2Ejs7Fj8Q/med.png?1591123400") center/cover;
|
||||
|
||||
font-family: "Chelsea Market", serif;
|
||||
font-size: 10pt;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 1.75em;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
|
||||
text-align: center;
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="number"],
|
||||
input[type="text"],
|
||||
textarea,
|
||||
select {
|
||||
background-color: transparent;
|
||||
|
||||
font-family: "Montserrat", Verdana, sans-serif;
|
||||
font-size: 12pt;
|
||||
font-variant: normal;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,0.125);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
height: 1.75em;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
background: transparent url("https://s3.amazonaws.com/files.d20.io/images/138210258/mZTqw1vke8SrkprMJmiZQw/med.png?1590443723") right 5px center no-repeat;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.itemcontrol {
|
||||
position: relative;
|
||||
|
||||
button.repcontrol_del,
|
||||
a.repcontrol_move {
|
||||
display: block;
|
||||
top: calc(50% - 1.5rem);
|
||||
position: relative;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
box-shadow: none;
|
||||
|
||||
line-height: 2em;
|
||||
text-shadow: none;
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button.repcontrol_del {
|
||||
margin-right: .25rem;
|
||||
|
||||
background: #a00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a.repcontrol_move {
|
||||
margin-left: .25rem;
|
||||
|
||||
background: transparent;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.repcontrol {
|
||||
padding: .25em;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
button.repcontrol_add,
|
||||
button.repcontrol_del,
|
||||
button.repcontrol_move,
|
||||
button.repcontrol_edit {
|
||||
display: block;
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
box-shadow: none;
|
||||
|
||||
font-size: 0;
|
||||
line-height: 1em;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
button.repcontrol_add:before {
|
||||
display: block;
|
||||
content: "&";
|
||||
|
||||
font-family: "Pictos";
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button.repcontrol_edit {
|
||||
&:before {
|
||||
display: block;
|
||||
content: "p";
|
||||
right: 5px;
|
||||
|
||||
font-family: "Pictos";
|
||||
font-size: 12pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-kob {
|
||||
|
||||
&-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
gap: 1.5em;
|
||||
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
&__logo {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&__trope[type="text"] {
|
||||
width: 100%;
|
||||
padding: .25em;
|
||||
|
||||
border: 2px solid #000;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
|
||||
font-size: 24pt;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1.25fr;
|
||||
gap: 1.5em;
|
||||
|
||||
&__strengths,
|
||||
&__flaws,
|
||||
&__stats,
|
||||
&__adversity,
|
||||
&__tropes,
|
||||
&__character {
|
||||
padding: 1.25em 1.25em;
|
||||
margin-bottom: 1.5em;
|
||||
|
||||
background:
|
||||
url("https://s3.amazonaws.com/files.d20.io/images/140337271/wJZvx5ua03bzSc0DViK_YA/med.png?1591122772") top left/40px no-repeat,
|
||||
url("https://s3.amazonaws.com/files.d20.io/images/140337272/8TEVnItbqmvdXka2UVLulw/med.png?1591122772") top right/40px no-repeat,
|
||||
url("https://s3.amazonaws.com/files.d20.io/images/140337270/uKtXcumLfN1rNOl0EaBGKA/med.png?1591122772") bottom left/40px no-repeat,
|
||||
url("https://s3.amazonaws.com/files.d20.io/images/140337273/RPhav9hWTnUy4Sd0jwqq6A/med.png?1591122772") bottom right/40px no-repeat;
|
||||
|
||||
border: 2px solid #000;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
h2 {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
&__subtext {
|
||||
display: block;
|
||||
font-family: "Montserrat", Verdana, sans-serif;
|
||||
font-size: 11pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__flaws,
|
||||
&__strengths {
|
||||
.repcontrol {
|
||||
margin-top: 4em;
|
||||
|
||||
border-top: 2px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
|
||||
color: #611618;
|
||||
}
|
||||
|
||||
&__tropes {
|
||||
|
||||
textarea {
|
||||
min-height: 15em;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-characteristics {
|
||||
padding: .5em;
|
||||
|
||||
font-variant: small-caps;
|
||||
|
||||
h3 {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
&:after {
|
||||
display: inline;
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
&__general,
|
||||
&__wand,
|
||||
&__broom,
|
||||
&__other {
|
||||
@extend .sheet-kob-characteristics;
|
||||
}
|
||||
|
||||
&__general {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
}
|
||||
|
||||
&__wand {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
&-characteristic {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: .25em;
|
||||
|
||||
&__label {
|
||||
flex-shrink: 0;
|
||||
margin-right: 1em;
|
||||
font-size: 10pt;
|
||||
font-weight: bold;
|
||||
|
||||
&:after {
|
||||
display: inline;
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
&__select,
|
||||
&__input[type=number],
|
||||
&__input[type=text] {
|
||||
flex-grow: 1;
|
||||
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--age,
|
||||
&--pronouns,
|
||||
&--wood,
|
||||
&--core {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
&--core,
|
||||
&--pronouns {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-flaw,
|
||||
&-strength {
|
||||
padding-top: .5em;
|
||||
margin-top: .5em;
|
||||
border-top: 2px solid #000;
|
||||
|
||||
&__wrapper {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&--text {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
flex-shrink: 0;
|
||||
|
||||
font-size: 10pt;
|
||||
font-variant: small-caps;
|
||||
|
||||
&:after {
|
||||
display: inline;
|
||||
content: ":";
|
||||
}
|
||||
}
|
||||
|
||||
&__input[type=text] {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
border-bottom: 1px solid #000;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&__textarea {
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
&-stat {
|
||||
display: grid;
|
||||
align-items: stretch;
|
||||
|
||||
|
||||
&:nth-child(even) {
|
||||
grid-template-columns: 2.5em 1fr;
|
||||
|
||||
button {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
grid-template-columns: 1fr 2.5em;
|
||||
|
||||
button {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: .5em;
|
||||
padding: .5em;
|
||||
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
&__select {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
height: 3em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: calc(50% - 1.25em);
|
||||
|
||||
border-bottom: 2px solid #000;
|
||||
background-position-x: right 10px;
|
||||
|
||||
font-size: 14pt;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&__button {
|
||||
line-height: 1em;
|
||||
|
||||
border: 1px solid transparent;
|
||||
color: #611618;
|
||||
background: transparent;
|
||||
|
||||
font-size: 12pt;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-shadow: none;
|
||||
writing-mode: vertical-lr;
|
||||
|
||||
&:before {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #611618;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
max-width:100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
font-size: 7pt;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__input {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
border-bottom: 1px solid #000;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&-adversity {
|
||||
|
||||
&__input[type="number"] {
|
||||
width: 100%;
|
||||
|
||||
border: 1px solid #000;
|
||||
border-radius: 0;
|
||||
|
||||
font-size: 16pt;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sheet-rolltemplate-kobrooms {
|
||||
background: url("https://s3.amazonaws.com/files.d20.io/images/138445853/9o33D5SoZ3MkIHqP8tZWNA/max.png?1590524256") center/100%;
|
||||
|
||||
.sheet-kobroom-container {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
border: 1px solid #611618;
|
||||
|
||||
h1 {
|
||||
color: #611618;
|
||||
border-bottom: 2px solid #611618;
|
||||
|
||||
font-family: "Chelsea Market", serif;
|
||||
font-size: 14pt;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Montserrat", sans-serif;
|
||||
font-size: 12pt;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-kobroom-roll-result {
|
||||
margin-top: 1em;
|
||||
|
||||
font-family: "Chelsea Market", serif;
|
||||
font-size: 14pt;
|
||||
text-align: center;
|
||||
|
||||
.importantroll,
|
||||
.fullcrit,
|
||||
.fullfail,
|
||||
.inlinerollresult {
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
font-family: inherit;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.importantroll {
|
||||
color: #3e7bff;
|
||||
}
|
||||
|
||||
.fullcrit {
|
||||
color: #4cc016;
|
||||
}
|
||||
|
||||
.fullfail {
|
||||
color: #900;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
{
|
||||
"Trope":"Trope",
|
||||
"Character Name":"Character Name",
|
||||
"Age":"Age",
|
||||
"Pronouns":"Pronouns",
|
||||
"Fear":"Fear",
|
||||
"Motivation":"Motivation",
|
||||
"Description":"Description",
|
||||
"Grade":"Grade",
|
||||
"Underclass":"Underclass",
|
||||
"Upperclass":"Upperclass",
|
||||
"Faculty":"Faculty",
|
||||
"Your Broom":"Your Broom",
|
||||
"Look":"Look",
|
||||
"Mechanical Benefit":"Mechanical Benefit",
|
||||
"Your Wand":"Your Wand",
|
||||
"Wood":"Wood",
|
||||
"Core":"Core",
|
||||
"Animal Familiar":"Animal Familiar",
|
||||
"Schoolbag":"Schoolbag",
|
||||
"Strengths":"Strengths",
|
||||
"You start with your 'grade Strength' and two more.":"You start with your 'grade Strength' and two more.",
|
||||
"Strength Name":"Strength Name",
|
||||
"Strength Effects":"Strength Effects",
|
||||
"Flaws":"Flaws",
|
||||
"Flaw Name":"Flaw Name",
|
||||
"Flaw Effects":"Flaw Effects",
|
||||
"d4":"d4",
|
||||
"d6":"d6",
|
||||
"d8":"d8",
|
||||
"d10":"d10",
|
||||
"d12":"d12",
|
||||
"d20":"d20",
|
||||
"Adversity Tokens":"Adversity Tokens",
|
||||
"Begin the game with 3 adversity tokens. Add 1 each time you fail a roll.":"Begin the game with 3 adversity tokens. Add 1 each time you fail a roll.",
|
||||
"Trope Questions":"Trope Questions",
|
||||
"Share these answers with the GM.":"Share these answers with the GM.",
|
||||
"Fight":"Fight",
|
||||
"Flight":"Flight",
|
||||
"Brains":"Brains",
|
||||
"Brawn":"Brawn",
|
||||
"Charm":"Charm",
|
||||
"Grit":"Grit",
|
||||
"Stats":"Stats",
|
||||
"Stat":"Stat",
|
||||
"Magic":"Magic",
|
||||
"Name":"Name"
|
||||
}
|
||||
Reference in New Issue
Block a user