diff --git a/Teens in Space Official/sheet.json b/Teens in Space Official/sheet.json new file mode 100644 index 0000000000..7114bfd7a8 --- /dev/null +++ b/Teens in Space Official/sheet.json @@ -0,0 +1,8 @@ +{ + "html": "tis.html", + "css": "tis.css", + "authors": "Nic B.", + "roll20userid": "45398", + "preview": "tis.png", + "instructions": "Official Teens in Space by Hunters Entertainment" +} \ No newline at end of file diff --git a/Teens in Space Official/src/pug/mixins.pug b/Teens in Space Official/src/pug/mixins.pug new file mode 100644 index 0000000000..15d07ff4d4 --- /dev/null +++ b/Teens in Space Official/src/pug/mixins.pug @@ -0,0 +1,32 @@ +mixin characteristic-display(name, attr) + .tis-characteristic(class=`tis-characteristic--${attr}`) + .tis-characteristic__label(data-i18n=name)=name + input.tis-characteristic__input(name=`attr_${attr}`, type="text") + +mixin select-display(name, attr, options) + label.tis-characteristic(class=`tis-characteristic--${attr}`) + .tis-characteristic__label(data-i18n=name)=name + select.tis-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:tispace}`, + `{{name=${name}}}`, + `{{character_name=@{character_name}}}`, + `{{roll=[[1@{${attr}}!+?{Bonus|Yes,@{${attr}_bonus}|No,0|None,0}+?{Bonuses / Penalties|0}]]}}`, + ].join(" "); + .tis-stat + button.tis-stat__button(data-i18n=name, name=`roll_${attr}`, type="roll", value=roll)=name + .tis-stat__bonus + input(name=`attr_${attr}_bonus`, type="number", value="0") + select.tis-stat__select(name=`attr_${attr}`) + +dice-select() + +mixin dice-select(selected) + - const dice = ["d4", "d6", "d8", "d10", "d12", "d20"]; + each die in dice + option(value=die selected=(die == selected))=die \ No newline at end of file diff --git a/Teens in Space Official/src/pug/rolltemplates.pug b/Teens in Space Official/src/pug/rolltemplates.pug new file mode 100644 index 0000000000..3eb61458a7 --- /dev/null +++ b/Teens in Space Official/src/pug/rolltemplates.pug @@ -0,0 +1,13 @@ +rolltemplate.sheet-rolltemplate-tispace + .sheet-tispace-container + | {{#name}} + h1 {{name}} + | {{/name}} + .sheet-tispace-body + | {{#character_name}} + h2 {{character_name}} + | {{/character_name}} + | {{#roll}} + .sheet-tispace-roll-result + | Result: {{roll}} + | {{/roll}} \ No newline at end of file diff --git a/Teens in Space Official/src/pug/tis.pug b/Teens in Space Official/src/pug/tis.pug new file mode 100644 index 0000000000..1030025d7a --- /dev/null +++ b/Teens in Space Official/src/pug/tis.pug @@ -0,0 +1,55 @@ +include mixins.pug + +.tis-wrapper + .tis-name + h1.tis-name__label(data-i18n="Name") Name + input.tis-name__input(name=`attr_character_name`, type="text") + .tis-body + .tis-body__leftcol + .tis-body__character + .tis-characteristics__general + each characteristic in ["Age","Species","Species Drawback","Trope","Fatal Flaw"] + - const attr = characteristic.toLowerCase().replace(/ /g, "_"); + +characteristic-display(characteristic, attr) + .tis-characteristic--textarea(class=`tis-characteristic--description`) + .tis-characteristic__label--description(data-i18n="Description") Description + textarea.tis-characteristic__textarea(name=`attr_description`) + .tis-body__improvements + h2(data-i18n="Improvements") Improvements + .tis-improvementrow--header + strong.tis-improvementrow__label(data-i18n="Name") Strength Name + strong.tis-improvementrow__label(data-i18n="Description") Description + fieldset(class="repeating_improvements") + .tis-improvementrow + .tis-improvementrow__input + input(name="attr_improvement_name", type="text") + .tis-improvementrow__divider + .tis-improvementrow__input + input(name="attr_improvement_description", type="text") + .tis-body__records + h2(data-i18n="Records") Records + .tis-records + textarea.tis-records__textarea(name="attr_") + + .tis-body__rightcol + .tis-body__stats + h2(data-i18n="Stats") Stats + each stat in ["Flight", "Fight", "Brawn", "Brains", "Grit", "Charm"] + - const attr = stat.toLowerCase().replace(/ /g, "_"); + +stat-display(stat, attr) + .tis-body__hex--first + h2(data-i18n="Adversity Tokens") Adversity Tokens + label.tis-adversity + input.tis-adversity__input(name=`attr_adversity`, type="number", value="3") + .tis-body__hex + h2(data-i18n="Improvement Points") Improvement Points + label.tis-improvement + input.tis-improvement__input(name=`attr_improvement`, type="number", value="3") + .tis-body__shiproles + h2.tis-textblock__label(data-i18n="Ship Roles") Ship Roles + textarea.tis-textblock__textarea(name=`attr_ship_roles`) + .tis-body__backpack + h2.tis-textblock__label(data-i18n="Space Backpack") Space Backpack + textarea.tis-textblock__textarea(name=`attr_space_backpack`) + +include rolltemplates.pug \ No newline at end of file diff --git a/Teens in Space Official/src/scss/_rolltemplate.scss b/Teens in Space Official/src/scss/_rolltemplate.scss new file mode 100644 index 0000000000..45afdc7436 --- /dev/null +++ b/Teens in Space Official/src/scss/_rolltemplate.scss @@ -0,0 +1,64 @@ +.sheet-rolltemplate-tispace { + + .sheet-tispace-container { + display: block; + padding: 1em; + + border: 1px solid #023; + background: #fff; + + h1 { + width: 80%; + margin: auto; + + color: #fff; + background: #023; + + @include hexagon-short; + + font-family: "Audiowide", sans-serif; + font-size: 14pt; + text-align: center; + text-transform: uppercase; + } + + h2 { + font-family: "Montserrat", sans-serif; + font-size: 12pt; + text-align: center; + } + + .sheet-tispace-roll-result { + margin-top: 1em; + + font-family: "Audiowide", sans-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/Teens in Space Official/src/scss/tis.scss b/Teens in Space Official/src/scss/tis.scss new file mode 100644 index 0000000000..446a0e993c --- /dev/null +++ b/Teens in Space Official/src/scss/tis.scss @@ -0,0 +1,623 @@ +@mixin polygon($basewidth) { + clip-path: polygon( + #{$basewidth*2}rem 0, + calc(100% - #{$basewidth * 3}rem) 0, + calc(100% - #{$basewidth}rem) #{$basewidth*2}rem, + calc(100% - #{$basewidth}rem) 50%, + 100% calc(50% + #{$basewidth}rem), + 100% calc(100% - #{$basewidth}rem), + calc(100% - #{$basewidth}rem) 100%, + #{$basewidth}rem 100%, + 0 calc(100% - #{$basewidth}rem), + 0rem #{$basewidth*2}rem + ); +} + +@mixin hexagon() { + clip-path: polygon( + 0 0, + 75% 0%, + 100% 50%, + 75% 100%, + 25% 100%, + 0 50%, + 25% 0% + ); +} + +@mixin hexagon-short() { + clip-path: polygon( + 0 0, + 90% 0%, + 100% 50%, + 90% 100%, + 10% 100%, + 0 50%, + 10% 0% + ); +} + +@mixin arrow() { + clip-path: polygon( + 0 0, + 92.5% 0%, + 100% 50%, + 92.5% 100%, + 0 100% + ); +} + +@mixin bevel() { + clip-path: polygon( + 0 0, + 100% 0, + 80% 100%, + 0 100% + ); +} + +@import url('https://fonts.googleapis.com/css?family=Audiowide|Montserrat:400:800&display=swap'); + +.sheet-tis-wrapper { + position: relative; + min-width: 818px; + padding: .5em; + margin: 0; + + font-family: "Audiowide", sans-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 { + margin:0; + + 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 { + -moz-appearance: none; + -webkit-appearance: none; + cursor: pointer; + + height: 1.75em; + + 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: 0; + 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; + padding: 0; + margin: 0; + height: 3rem; + width: 3rem; + + box-shadow: none; + border: 1px solid #000; + border-radius: 0; + + 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: 1em .25em; + clear: both; + + min-height: 5rem; + + 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-tis { + + &-body { + display: grid; + grid-template-columns: 2fr 1.5fr; + margin-top: 2em; + gap: 1em; + padding: 1em; + + background: #023; + + @include polygon(3); + + &__stats { + + h2 { + margin: 0; + margin-left: 1.5em; + + color: #fff !important; + + text-align: left !important; + } + } + + &__subtext { + display: block; + font-family: "Montserrat", Verdana, sans-serif; + font-size: 11pt; + text-align: center; + } + + h2 { + font-weight: normal; + text-align: center; + text-transform: uppercase; + + color: #a00; + } + + &__hex { + display: grid; + grid-template-rows: .5fr 1fr; + align-items: center; + justify-items: center; + + height: 6.5em; + width: 12.5em; + margin-left: .5em; + + background: #fff; + + @include hexagon(); + + &--first { + @extend .sheet-tis-body__hex; + margin-top: -2em !important; + } + + &:nth-child(even) { + position: relative; + left: 9.6em; + } + + &:not(:first-child) { + margin-top: -3.1em; + } + + h2 { + width: 55%; + + font-size: 8pt; + line-height: 8pt; + text-align: center; + } + + label.sheet-tis-improvement, + label.sheet-tis-adversity { + height: 100%; + } + + input[type="number"] { + align-self: center; + + width: 100%; + height: 100%; + + border: 0; + + font-size: 30pt; + text-align: center; + } + } + + &__improvements, + &__records, + &__shiproles, + &__backpack { + margin-top: 1em; + padding: 0 1.5em; + + background: #fff; + + @include polygon(1.5); + } + } + + &-name { + position: absolute; + z-index: 1000; + width: 60%; + height: 5em; + padding-left: 2em; + + display: flex; + flex-flow: row nowrap; + align-items: flex-end; + + @include bevel(); + + background: #fff; + + &__label { + flex-shrink: 0; + text-transform: uppercase; + + font-size: 20pt; + + color: #a00; + } + + &__input[type="text"] { + flex-grow: 1; + height: 30pt; + margin-left: .5em; + margin-right: 20%; + + border-radius: 0; + border: 0; + + font-size: 13pt; + font-weight: bold; + } + } + + &-characteristics { + padding: .5em; + margin-top: 3em; + + background: #fff; + + @include polygon(1.5); + + h3 { + grid-column: 1 / -1; + + &:after { + display: inline; + content: ":"; + } + } + + &__general, + &__wand, + &__broom, + &__other { + @extend .sheet-tis-characteristics; + } + + &__general { + padding: .5em 0 0 0; + } + + &__wand { + display: grid; + grid-template-columns: 1fr 1fr; + } + } + + &-characteristic { + grid-column: 1 / -1; + + display: grid; + grid-template-columns: .75fr 1fr; + align-items: center; + + margin-bottom: .25em; + + &__label { + padding: .25em; + + font-size: 10pt; + font-weight: normal; + text-align: center; + text-transform: uppercase; + + @include arrow(); + + color: #fff; + background: #023; + + &--description { + @extend .sheet-tis-characteristic__label; + + width: 43%; + } + } + + &__select, + &__input[type=number], + &__input[type=text] { + flex-grow: 1; + + min-width: 0; + width: 100%; + + margin: 0; + padding: 0; + + text-align: center; + + border: 0; + border-bottom: 3px solid #ddd; + border-radius: 0; + } + + } + + &-stat { + display: grid; + grid-template-columns: 1fr 25%; + grid-template-rows: 2em 1fr; + align-items: stretch; + height: 6.5em; + width: 12.5em; + overflow: hidden; + + background: #fff; + + @include hexagon(); + + &:nth-child(even) { + position: relative; + left: 9.6em; + } + + &:not(:first-child) { + margin-top: -3.1em; + } + + &__select { + margin-left: 25%; + margin-right: .5em; + height: 60%; + width: auto; + + border: 0; + + font-size: 20pt; + line-height: 20pt; + text-align: center; + } + + &__button { + margin-left: 20% !important; + + color: #000; + background: transparent; + border: none; + + font-size: 10pt !important; + line-height: 1.5em; + text-align: center; + text-transform: uppercase; + + &:before { + display: none; + } + + &:hover { + } + } + + &__bonus { + position: relative; + grid-row: span 2; + + background-color: #bbb; + border: none; + color: #023; + + input { + height: 100%; + width: 100%; + padding-left: 30%; + + border: none; + background: #bbb; + color: #023; + + font-family: "Montserrat" sans-serif; + font-size: 16pt; + } + + &:before { + position: absolute; + display: inline-block; + content: "BONUS"; + + top: calc(50% - .75em); + left: -2.75em; + + color: #bbb; + font-size: 12pt; + font-weight: bold; + letter-spacing: 2px; + + transform: rotate(-90deg); + } + + &:after { + position: absolute; + display: inline-block; + content: "&"; + top: calc(50% - .9em); + left: 2px; + + font-family: "Pictos"; + font-size: 10pt; + font-weight: bold; + letter-spacing: 4px; + + transform: rotate(-90deg); + } + } + + } + + &-body__improvements { + + .repitem:not(:last-child) .sheet-tis-improvementrow { + border-bottom: 0; + } + + } + + &-improvementrow { + display: grid; + grid-template-columns: .45fr .5em 1fr; + + border: 2px solid #ddd; + + &--header { + @extend .sheet-tis-improvementrow; + grid-template-columns: .45fr 1fr; + + border: none; + + * { + border: none; + color: #023; + + font-size: 10pt; + font-weight: normal; + text-align: center; + text-transform: uppercase; + } + } + + &__input { + border: 0; + + &:first-child { + border-right: 0; + + input[type="text"] { + font-weight: bold; + } + } + + input[type="text"] { + width: 100%; + padding: 1em 0; + + font-size: 10pt; + + border: 0; + border-radius: 0; + } + + } + + &__divider { + background: #ddd; + + clip-path: polygon(40% 0, 100% 50%, 40% 100%, 0 100%, 65% 50%, 0 0); + + } + + } + + } + +} + +@import "rolltemplate"; \ No newline at end of file diff --git a/Teens in Space Official/tis.css b/Teens in Space Official/tis.css new file mode 100644 index 0000000000..c02b4aa3d7 --- /dev/null +++ b/Teens in Space Official/tis.css @@ -0,0 +1,444 @@ +@import url("https://fonts.googleapis.com/css?family=Audiowide|Montserrat:400:800&display=swap"); +.sheet-tis-wrapper { + position: relative; + min-width: 818px; + padding: 0.5em; + margin: 0; + font-family: "Audiowide", sans-serif; + font-size: 10pt; +} +.sheet-tis-wrapper * { + box-sizing: border-box; +} +.sheet-tis-wrapper input { + height: 1.75em; +} +.sheet-tis-wrapper input[type=number] { + -moz-appearance: textfield; + text-align: center; +} +.sheet-tis-wrapper input[type=number]::-webkit-outer-spin-button, .sheet-tis-wrapper input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.sheet-tis-wrapper input[type=number], +.sheet-tis-wrapper input[type=text], +.sheet-tis-wrapper textarea, +.sheet-tis-wrapper select { + margin: 0; + background-color: transparent; + font-family: "Montserrat", Verdana, sans-serif; + font-size: 12pt; + font-variant: normal; +} +.sheet-tis-wrapper input[type=number]:hover, +.sheet-tis-wrapper input[type=text]:hover, +.sheet-tis-wrapper textarea:hover, +.sheet-tis-wrapper select:hover { + background-color: rgba(0, 0, 0, 0.125); +} +.sheet-tis-wrapper select { + -moz-appearance: none; + -webkit-appearance: none; + cursor: pointer; + height: 1.75em; + background: transparent url("https://s3.amazonaws.com/files.d20.io/images/138210258/mZTqw1vke8SrkprMJmiZQw/med.png?1590443723") right 5px center no-repeat; +} +.sheet-tis-wrapper textarea { + resize: vertical; + width: 100%; + border: 0; + border-radius: 0; +} +.sheet-tis-wrapper label { + padding: 0; + margin: 0; +} +.sheet-tis-wrapper .itemcontrol { + position: relative; +} +.sheet-tis-wrapper .itemcontrol button.repcontrol_del, +.sheet-tis-wrapper .itemcontrol a.repcontrol_move { + display: block; + top: calc(50% - 1.5rem); + position: relative; + padding: 0; + margin: 0; + height: 3rem; + width: 3rem; + box-shadow: none; + border: 1px solid #000; + border-radius: 0; + line-height: 2em; + text-shadow: none; + font-weight: bold; +} +.sheet-tis-wrapper .itemcontrol button.repcontrol_del { + margin-right: 0.25rem; + background: #a00; + color: #fff; +} +.sheet-tis-wrapper .itemcontrol a.repcontrol_move { + margin-left: 0.25rem; + background: transparent; + color: #000; +} +.sheet-tis-wrapper .repcontrol { + padding: 1em 0.25em; + clear: both; + min-height: 5rem; + background-color: transparent; +} +.sheet-tis-wrapper .repcontrol button.repcontrol_add, +.sheet-tis-wrapper .repcontrol button.repcontrol_del, +.sheet-tis-wrapper .repcontrol button.repcontrol_move, +.sheet-tis-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-tis-wrapper .repcontrol button.repcontrol_add:before { + display: block; + content: "&"; + font-family: "Pictos"; + font-size: 12pt; + font-weight: bold; +} +.sheet-tis-wrapper .repcontrol button.repcontrol_edit:before { + display: block; + content: "p"; + right: 5px; + font-family: "Pictos"; + font-size: 12pt; + font-weight: bold; +} +.sheet-tis-wrapper .sheet-tis-body { + display: grid; + grid-template-columns: 2fr 1.5fr; + margin-top: 2em; + gap: 1em; + padding: 1em; + background: #023; + clip-path: polygon(6rem 0, calc(100% - 9rem) 0, calc(100% - 3rem) 6rem, calc(100% - 3rem) 50%, 100% calc(50% + 3rem), 100% calc(100% - 3rem), calc(100% - 3rem) 100%, 3rem 100%, 0 calc(100% - 3rem), 0rem 6rem); +} +.sheet-tis-wrapper .sheet-tis-body__stats h2 { + margin: 0; + margin-left: 1.5em; + color: #fff !important; + text-align: left !important; +} +.sheet-tis-wrapper .sheet-tis-body__subtext { + display: block; + font-family: "Montserrat", Verdana, sans-serif; + font-size: 11pt; + text-align: center; +} +.sheet-tis-wrapper .sheet-tis-body h2 { + font-weight: normal; + text-align: center; + text-transform: uppercase; + color: #a00; +} +.sheet-tis-wrapper .sheet-tis-body__hex, .sheet-tis-wrapper .sheet-tis-body__hex--first { + display: grid; + grid-template-rows: 0.5fr 1fr; + align-items: center; + justify-items: center; + height: 6.5em; + width: 12.5em; + margin-left: 0.5em; + background: #fff; + clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0%); +} +.sheet-tis-wrapper .sheet-tis-body__hex--first { + margin-top: -2em !important; +} +.sheet-tis-wrapper .sheet-tis-body__hex:nth-child(even), .sheet-tis-wrapper .sheet-tis-body__hex--first:nth-child(even) { + position: relative; + left: 9.6em; +} +.sheet-tis-wrapper .sheet-tis-body__hex:not(:first-child), .sheet-tis-wrapper .sheet-tis-body__hex--first:not(:first-child) { + margin-top: -3.1em; +} +.sheet-tis-wrapper .sheet-tis-body__hex h2, .sheet-tis-wrapper .sheet-tis-body__hex--first h2 { + width: 55%; + font-size: 8pt; + line-height: 8pt; + text-align: center; +} +.sheet-tis-wrapper .sheet-tis-body__hex label.sheet-tis-improvement, .sheet-tis-wrapper .sheet-tis-body__hex--first label.sheet-tis-improvement, +.sheet-tis-wrapper .sheet-tis-body__hex label.sheet-tis-adversity, +.sheet-tis-wrapper .sheet-tis-body__hex--first label.sheet-tis-adversity { + height: 100%; +} +.sheet-tis-wrapper .sheet-tis-body__hex input[type=number], .sheet-tis-wrapper .sheet-tis-body__hex--first input[type=number] { + align-self: center; + width: 100%; + height: 100%; + border: 0; + font-size: 30pt; + text-align: center; +} +.sheet-tis-wrapper .sheet-tis-body__improvements, .sheet-tis-wrapper .sheet-tis-body__records, .sheet-tis-wrapper .sheet-tis-body__shiproles, .sheet-tis-wrapper .sheet-tis-body__backpack { + margin-top: 1em; + padding: 0 1.5em; + background: #fff; + clip-path: polygon(3rem 0, calc(100% - 4.5rem) 0, calc(100% - 1.5rem) 3rem, calc(100% - 1.5rem) 50%, 100% calc(50% + 1.5rem), 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0rem 3rem); +} +.sheet-tis-wrapper .sheet-tis-name { + position: absolute; + z-index: 1000; + width: 60%; + height: 5em; + padding-left: 2em; + display: flex; + flex-flow: row nowrap; + align-items: flex-end; + clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); + background: #fff; +} +.sheet-tis-wrapper .sheet-tis-name__label { + flex-shrink: 0; + text-transform: uppercase; + font-size: 20pt; + color: #a00; +} +.sheet-tis-wrapper .sheet-tis-name__input[type=text] { + flex-grow: 1; + height: 30pt; + margin-left: 0.5em; + margin-right: 20%; + border-radius: 0; + border: 0; + font-size: 13pt; + font-weight: bold; +} +.sheet-tis-wrapper .sheet-tis-characteristics, .sheet-tis-wrapper .sheet-tis-characteristics__general, .sheet-tis-wrapper .sheet-tis-characteristics__wand, .sheet-tis-wrapper .sheet-tis-characteristics__broom, .sheet-tis-wrapper .sheet-tis-characteristics__other { + padding: 0.5em; + margin-top: 3em; + background: #fff; + clip-path: polygon(3rem 0, calc(100% - 4.5rem) 0, calc(100% - 1.5rem) 3rem, calc(100% - 1.5rem) 50%, 100% calc(50% + 1.5rem), 100% calc(100% - 1.5rem), calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 calc(100% - 1.5rem), 0rem 3rem); +} +.sheet-tis-wrapper .sheet-tis-characteristics h3, .sheet-tis-wrapper .sheet-tis-characteristics__general h3, .sheet-tis-wrapper .sheet-tis-characteristics__wand h3, .sheet-tis-wrapper .sheet-tis-characteristics__broom h3, .sheet-tis-wrapper .sheet-tis-characteristics__other h3 { + grid-column: 1/-1; +} +.sheet-tis-wrapper .sheet-tis-characteristics h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__general h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__wand h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__broom h3:after, .sheet-tis-wrapper .sheet-tis-characteristics__other h3:after { + display: inline; + content: ":"; +} +.sheet-tis-wrapper .sheet-tis-characteristics__general { + padding: 0.5em 0 0 0; +} +.sheet-tis-wrapper .sheet-tis-characteristics__wand { + display: grid; + grid-template-columns: 1fr 1fr; +} +.sheet-tis-wrapper .sheet-tis-characteristic { + grid-column: 1/-1; + display: grid; + grid-template-columns: 0.75fr 1fr; + align-items: center; + margin-bottom: 0.25em; +} +.sheet-tis-wrapper .sheet-tis-characteristic__label, .sheet-tis-wrapper .sheet-tis-characteristic__label--description { + padding: 0.25em; + font-size: 10pt; + font-weight: normal; + text-align: center; + text-transform: uppercase; + clip-path: polygon(0 0, 92.5% 0%, 100% 50%, 92.5% 100%, 0 100%); + color: #fff; + background: #023; +} +.sheet-tis-wrapper .sheet-tis-characteristic__label--description { + width: 43%; +} +.sheet-tis-wrapper .sheet-tis-characteristic__select, .sheet-tis-wrapper .sheet-tis-characteristic__input[type=number], .sheet-tis-wrapper .sheet-tis-characteristic__input[type=text] { + flex-grow: 1; + min-width: 0; + width: 100%; + margin: 0; + padding: 0; + text-align: center; + border: 0; + border-bottom: 3px solid #ddd; + border-radius: 0; +} +.sheet-tis-wrapper .sheet-tis-stat { + display: grid; + grid-template-columns: 1fr 25%; + grid-template-rows: 2em 1fr; + align-items: stretch; + height: 6.5em; + width: 12.5em; + overflow: hidden; + background: #fff; + clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0%); +} +.sheet-tis-wrapper .sheet-tis-stat:nth-child(even) { + position: relative; + left: 9.6em; +} +.sheet-tis-wrapper .sheet-tis-stat:not(:first-child) { + margin-top: -3.1em; +} +.sheet-tis-wrapper .sheet-tis-stat__select { + margin-left: 25%; + margin-right: 0.5em; + height: 60%; + width: auto; + border: 0; + font-size: 20pt; + line-height: 20pt; + text-align: center; +} +.sheet-tis-wrapper .sheet-tis-stat__button { + margin-left: 20% !important; + color: #000; + background: transparent; + border: none; + font-size: 10pt !important; + line-height: 1.5em; + text-align: center; + text-transform: uppercase; +} +.sheet-tis-wrapper .sheet-tis-stat__button:before { + display: none; +} +.sheet-tis-wrapper .sheet-tis-stat__bonus { + position: relative; + grid-row: span 2; + background-color: #bbb; + border: none; + color: #023; +} +.sheet-tis-wrapper .sheet-tis-stat__bonus input { + height: 100%; + width: 100%; + padding-left: 30%; + border: none; + background: #bbb; + color: #023; + font-family: "Montserrat" sans-serif; + font-size: 16pt; +} +.sheet-tis-wrapper .sheet-tis-stat__bonus:before { + position: absolute; + display: inline-block; + content: "BONUS"; + top: calc(50% - .75em); + left: -2.75em; + color: #bbb; + font-size: 12pt; + font-weight: bold; + letter-spacing: 2px; + transform: rotate(-90deg); +} +.sheet-tis-wrapper .sheet-tis-stat__bonus:after { + position: absolute; + display: inline-block; + content: "&"; + top: calc(50% - .9em); + left: 2px; + font-family: "Pictos"; + font-size: 10pt; + font-weight: bold; + letter-spacing: 4px; + transform: rotate(-90deg); +} +.sheet-tis-wrapper .sheet-tis-body__improvements .repitem:not(:last-child) .sheet-tis-improvementrow, .sheet-tis-wrapper .sheet-tis-body__improvements .repitem:not(:last-child) .sheet-tis-improvementrow--header { + border-bottom: 0; +} +.sheet-tis-wrapper .sheet-tis-improvementrow, .sheet-tis-wrapper .sheet-tis-improvementrow--header { + display: grid; + grid-template-columns: 0.45fr 0.5em 1fr; + border: 2px solid #ddd; +} +.sheet-tis-wrapper .sheet-tis-improvementrow--header { + grid-template-columns: 0.45fr 1fr; + border: none; +} +.sheet-tis-wrapper .sheet-tis-improvementrow--header * { + border: none; + color: #023; + font-size: 10pt; + font-weight: normal; + text-align: center; + text-transform: uppercase; +} +.sheet-tis-wrapper .sheet-tis-improvementrow__input { + border: 0; +} +.sheet-tis-wrapper .sheet-tis-improvementrow__input:first-child { + border-right: 0; +} +.sheet-tis-wrapper .sheet-tis-improvementrow__input:first-child input[type=text] { + font-weight: bold; +} +.sheet-tis-wrapper .sheet-tis-improvementrow__input input[type=text] { + width: 100%; + padding: 1em 0; + font-size: 10pt; + border: 0; + border-radius: 0; +} +.sheet-tis-wrapper .sheet-tis-improvementrow__divider { + background: #ddd; + clip-path: polygon(40% 0, 100% 50%, 40% 100%, 0 100%, 65% 50%, 0 0); +} + +.sheet-rolltemplate-tispace .sheet-tispace-container { + display: block; + padding: 1em; + border: 1px solid #023; + background: #fff; +} +.sheet-rolltemplate-tispace .sheet-tispace-container h1 { + width: 80%; + margin: auto; + color: #fff; + background: #023; + clip-path: polygon(0 0, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%, 10% 0%); + font-family: "Audiowide", sans-serif; + font-size: 14pt; + text-align: center; + text-transform: uppercase; +} +.sheet-rolltemplate-tispace .sheet-tispace-container h2 { + font-family: "Montserrat", sans-serif; + font-size: 12pt; + text-align: center; +} +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result { + margin-top: 1em; + font-family: "Audiowide", sans-serif; + font-size: 14pt; + text-align: center; +} +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .importantroll, +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullcrit, +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullfail, +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .inlinerollresult { + border: none; + background: transparent; + font-family: inherit; + line-height: 1em; +} +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .importantroll { + color: #3e7bff; +} +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullcrit { + color: #4cc016; +} +.sheet-rolltemplate-tispace .sheet-tispace-container .sheet-tispace-roll-result .fullfail { + color: #900; +} diff --git a/Teens in Space Official/tis.html b/Teens in Space Official/tis.html new file mode 100644 index 0000000000..fda839b38c --- /dev/null +++ b/Teens in Space Official/tis.html @@ -0,0 +1,179 @@ + +