diff --git a/Kids on Brooms Official/kobrooms.css b/Kids on Brooms Official/kobrooms.css new file mode 100644 index 0000000000..0cf090b713 --- /dev/null +++ b/Kids on Brooms Official/kobrooms.css @@ -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; +} diff --git a/Kids on Brooms Official/kobrooms.html b/Kids on Brooms Official/kobrooms.html new file mode 100644 index 0000000000..0f40314ce7 --- /dev/null +++ b/Kids on Brooms Official/kobrooms.html @@ -0,0 +1,236 @@ + +
+
+ + +
+
+
+
+
+ + + + + + + +
+
+

Your Broom

+ + + +
+
+

Your Wand

+ + +
+
+ + +
+
+
+

Strengths

You start with your 'grade Strength' and two more. +
+
+
Strength Name + +
+
Strength Effects + +
+
+
+
+
+

Flaws

+
+
+
Flaw Name + +
+
Flaw Effects + +
+
+
+
+
+
+
+

Stats

+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+
+

Adversity Tokens

Begin the game with 3 adversity tokens. Add 1 each time you fail a roll. + +
+
+

Trope Questions

Share these answers with the GM. + +
+
+
+
+ +
{{#name}} +

{{name}}

{{/name}} +
{{#character_name}} +

{{character_name}}

{{/character_name}} + {{#roll}} +
Result: {{roll}}
{{/roll}} +
+
+ \ No newline at end of file diff --git a/Kids on Brooms Official/kobrooms.png b/Kids on Brooms Official/kobrooms.png new file mode 100644 index 0000000000..95b661a00b Binary files /dev/null and b/Kids on Brooms Official/kobrooms.png differ diff --git a/Kids on Brooms Official/sheet.json b/Kids on Brooms Official/sheet.json new file mode 100644 index 0000000000..96a07bddd0 --- /dev/null +++ b/Kids on Brooms Official/sheet.json @@ -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" +} \ No newline at end of file diff --git a/Kids on Brooms Official/src/pug/kobrooms.pug b/Kids on Brooms Official/src/pug/kobrooms.pug new file mode 100644 index 0000000000..a539f2cba4 --- /dev/null +++ b/Kids on Brooms Official/src/pug/kobrooms.pug @@ -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 \ No newline at end of file diff --git a/Kids on Brooms Official/src/pug/mixins.pug b/Kids on Brooms Official/src/pug/mixins.pug new file mode 100644 index 0000000000..5e4143a837 --- /dev/null +++ b/Kids on Brooms Official/src/pug/mixins.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 \ No newline at end of file diff --git a/Kids on Brooms Official/src/pug/rolltemplates.pug b/Kids on Brooms Official/src/pug/rolltemplates.pug new file mode 100644 index 0000000000..08df514497 --- /dev/null +++ b/Kids on Brooms Official/src/pug/rolltemplates.pug @@ -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}} \ No newline at end of file diff --git a/Kids on Brooms Official/src/scss/kobrooms.scss b/Kids on Brooms Official/src/scss/kobrooms.scss new file mode 100644 index 0000000000..2307ef72f1 --- /dev/null +++ b/Kids on Brooms Official/src/scss/kobrooms.scss @@ -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; + } + + } + + } +} \ No newline at end of file diff --git a/Kids on Brooms Official/translation.json b/Kids on Brooms Official/translation.json new file mode 100644 index 0000000000..cb9fa8d991 --- /dev/null +++ b/Kids on Brooms Official/translation.json @@ -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" +} \ No newline at end of file