diff --git a/GODSEND-Agenda/Readme.md b/GODSEND-Agenda/Readme.md new file mode 100644 index 0000000000..344cb8935f --- /dev/null +++ b/GODSEND-Agenda/Readme.md @@ -0,0 +1,4 @@ +# About +Character sheet for GODSEND Agenda, on behalf of the publisher Khepera Publishing. + +Created with PUGjs and SASS by [Andreas J.](https:wiki.roll20.net/Anduh). diff --git a/GODSEND-Agenda/preview.png b/GODSEND-Agenda/preview.png new file mode 100644 index 0000000000..94ad690f79 Binary files /dev/null and b/GODSEND-Agenda/preview.png differ diff --git a/GODSEND-Agenda/sheet.css b/GODSEND-Agenda/sheet.css new file mode 100644 index 0000000000..0aa25020b4 --- /dev/null +++ b/GODSEND-Agenda/sheet.css @@ -0,0 +1,375 @@ +@import url("https://fonts.googleapis.com/css?family=Zilla+Slab|Anton|Noto+Sans+TC|Bebas+Neue&display=swap"); +.charsheet { + /* ---------- Colors ---------- */ + /* --------- Text ------------- */ + /* --------- Inputs ------------- */ + /* -----Hides up/down buttons on numberfields that don't need them ---*/ + /* highlights empty fields with Light grayish red */ + /* higlight selected input */ + /* ------- Buttons ---------- */ + /* text buttons with dice icon removed */ + /*------------------------------------*\ + #SECTIONS + \*------------------------------------*/ + /* page selection */ + /* --------------- Universal Section ------------------- */ + /* Core layout of each page */ + /*------------------------------------*\ + #PAGE LAYOUT/ PAGE BUTTONS + \*------------------------------------*/ + /* -------------- page buttons ------------- */ + /* show the selected page */ +} +.charsheet * { + font-family: "Noto Sans TC"; + --mythic-dark-red: #4a0004; + --mythic-light-red: #ac3f2b; + --mythic-red: #a83521; +} +.charsheet .version { + color: black; + font-weight: bold; + float: right; + margin: -31px 13px; +} +.charsheet .capital, +.charsheet :not(textarea) { + font-family: "Bebas Neue"; +} +.charsheet label, +.charsheet .label, +.charsheet span { + color: var(--mythic-dark-red); +} +.charsheet h1, .charsheet h2, .charsheet h3 { + text-align: center; +} +.charsheet span.bold { + font-weight: 800; + font-size: medium; +} +.charsheet div.border-label label { + border-style: solid; + max-width: 80%; + border-radius: 13px; +} +.charsheet .small-font { + font-size: xx-small; + height: 18px; +} +.charsheet input[type=text], +.charsheet input[type=number] { + background-color: transparent; + border-style: none none solid none; + border-color: var(--mythic-light-red); + border-radius: 0px; +} +.charsheet input[type=number] { + border: 1px solid var(--mythic-light-red); + text-align: center; +} +.charsheet input[type=number].bubble { + border: 2px solid var(--mythic-light-red); + border-radius: 13px; +} +.charsheet input[type=checkbox].checkbox { + border: solid var(--mythic-light-red); + border-radius: 0px; +} +.charsheet input[type=number].ref { + border-style: none none solid none; + border-color: black; + border-radius: 0px; +} +.charsheet input[type=number].ref::-webkit-inner-spin-button, +.charsheet input[type=number].ref::-webkit-outer-spin-button, +.charsheet input[type=number].txtfield::-webkit-inner-spin-button, +.charsheet input[type=number].txtfield::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} +.charsheet input[type=number].ref, +.charsheet input[type=number].txtfield { + -moz-appearance: textfield; +} +.charsheet textarea { + width: 90%; + height: 85%; + background-color: transparent; +} +.charsheet textarea:placeholder-shown, +.charsheet input[type=text]:placeholder-shown, +.charsheet input[type=number]:placeholder-shown { + background-color: #EAC9D1; +} +.charsheet textarea:focus, +.charsheet input[type=text]:focus, +.charsheet input[type=number]:focus { + background-color: #ccc; +} +.charsheet button[type=roll].txt-btn:before, +.charsheet button[type=roll].skills:before { + content: " "; +} +.charsheet button[type=roll].d6-dice::before { + /*new die changes die roller to d6*/ + font-family: "dicefontd6", arial; + content: "F "; + color: white; +} +.charsheet button[type=roll].sendtext::before { + /*new die changes die roller to d6*/ + font-family: "Pictos"; + content: "w "; + color: black; +} +.charsheet button[type=roll].txt-btn { + height: 22px; + border: 2px solid black; + background-color: transparent; + margin-left: 5px; + font-weight: bold; + padding: 2px 5px 4px 5px; + text-shadow: none; +} +.charsheet button[type=roll].txt-btn:hover { + background-color: #d9d9d9; + border-radius: 10px; + text-shadow: none; +} +.charsheet button[type=roll].red { + background-color: #a83521; + background-position: 0 -30px; + color: white; +} +.charsheet button[type=roll].red:hover { + background-color: #a83521; + background-position: 0 -30px; + color: white; + font-size: 1.7em; +} +.charsheet div.tab-buttons { + display: flex; + gap: 30px; + border: 2px black; + border-style: none none solid none; +} +.charsheet div.tab-buttons button { + font-size: 1.5em; +} +.charsheet div.tab-buttons select { + width: 90px; +} +.charsheet .border { + border-style: solid; + border-radius: 13px; +} +.charsheet :is(div.section section) hr { + display: block; + margin-top: 0.5em; + margin-bottom: 0.5em; + margin-left: auto; + margin-right: auto; + border-style: solid; + border-width: 2px; + border-color: black; +} +.charsheet .section, +.charsheet section { + display: flex; + padding: 5px; + border: none; + background: white; + opacity: 0.9; + min-height: 90%; + max-width: 750px; +} +.charsheet .flex-row { + display: flex; + flex-flow: row wrap; +} +.charsheet .flex-col { + display: flex; + flex-flow: column; +} +.charsheet .flex-center { + place-items: center; +} +.charsheet .gap { + gap: 10px; +} +.charsheet .columnflex { + display: flex; + flex-direction: column; +} +.charsheet .rowflex { + display: flex; + flex-direction: row; +} +.charsheet .wrap { + flex-wrap: wrap; +} +.charsheet .nowrap { + flex-wrap: nowrap; +} +.charsheet .center { + align-items: center; +} +.charsheet .middle { + justify-content: center; +} +.charsheet .spaced { + justify-content: space-evenly; +} +.charsheet label.title { + text-transform: capitalize; + max-width: 150px; + text-align: center; + font-size: 25px; +} +.charsheet div.halfsection { + max-width: 400px; +} +.charsheet main.character { + display: grid; + grid-gap: 4px; + grid-template-columns: 3fr 1fr; + grid-template-rows: 70px 40px 140px auto; + grid-template-areas: "common common" "points points" "attrs attrs" "skills notes"; + width: 800px; + height: 1300px; + position: relative; + /* Section specific */ +} +.charsheet main.character section.common { + grid-area: common; +} +.charsheet main.character section.points { + grid-area: points; +} +.charsheet main.character section.disadv { + grid-area: disadv; +} +.charsheet main.character section.skills { + grid-area: skills; +} +.charsheet main.character section.notes { + grid-area: notes; +} +.charsheet main.character section.notes input { + background-color: #ccc; +} +.charsheet main.notes { + display: grid; + width: 750px; + position: relative; +} +.charsheet main.settings { + display: grid; + width: 750px; + position: relative; +} +.charsheet main.character, +.charsheet main.notes, +.charsheet main.settings { + display: none; +} +.charsheet input.tabstoggle[value=character] ~ main.character, +.charsheet input.tabstoggle[value=notes] ~ main.notes, +.charsheet input.tabstoggle[value=settings] ~ main.settings { + display: grid; +} + +/*------------------------------------*\ + #ROLL TEMPLATES +\*------------------------------------*/ +/* Smaller margins - remove these if you want the huge default left margin */ +.withoutavatars .sheet-rolltemplate-rolls { + margin-left: -7px; +} + +.sheet-rolltemplate-rolls { + margin-left: -37px; + font-family: "Yanone Kaffeesatz"; + /* Header formatting - title and subtitle */ + /* alt template colors */ + /* Allprops part */ + /* Make even-numbered rows grey */ + /* Description field */ +} +.sheet-rolltemplate-rolls .sheet-container { + border: 3px solid black; + border-radius: 3px; +} +.sheet-rolltemplate-rolls .sheet-header { + background-color: var(--header-bg-color, #a83521); + color: var(--header-text-color, #FFF); + text-align: left; + text-transform: capitalize; + padding: 5px; + border-bottom: 2px solid black; +} +.sheet-rolltemplate-rolls .sheet-title { + font-size: 1.4em; + font-weight: bold; +} +.sheet-rolltemplate-rolls .sheet-subtitle { + font-size: 1em; +} +.sheet-rolltemplate-rolls .sheet-container { + --header-bg-color: #a83521; + --header-text-color: #FFF; +} +.sheet-rolltemplate-rolls .sheet-container.sheet-color-green { + --header-bg-color: #008000; +} +.sheet-rolltemplate-rolls .sheet-container.sheet-color-blue { + --header-bg-color: #0000e0; +} +.sheet-rolltemplate-rolls .sheet-container.sheet-color-gold { + --header-bg-color: #ffdd1f; + --header-text-color: #000; +} +.sheet-rolltemplate-rolls .sheet-container.sheet-color-purple { + --header-bg-color: #c200c2; +} +.sheet-rolltemplate-rolls .sheet-container.sheet-color-black { + --header-bg-color: #000; +} +.sheet-rolltemplate-rolls .sheet-container.sheet-color-white { + --header-bg-color: #FFF; + --header-text-color: #000; +} +.sheet-rolltemplate-rolls .sheet-content { + display: grid; + background: #FFF; + grid-template-columns: auto auto; + line-height: 1.4em; +} +.sheet-rolltemplate-rolls .sheet-content > div { + padding: 5px; +} +.sheet-rolltemplate-rolls .sheet-content .sheet-key { + font-weight: bold; + padding-right: 10px; + text-align: right; +} +.sheet-rolltemplate-rolls .sheet-content :nth-child(4n+3), +.sheet-rolltemplate-rolls .sheet-content :nth-child(4n) { + background: #EEE; +} +.sheet-rolltemplate-rolls .sheet-desc, .sheet-rolltemplate-rolls .sheet-crit, .sheet-rolltemplate-rolls .sheet-fail { + grid-column: span 2; + padding: 5px; + text-align: center; +} +.sheet-rolltemplate-rolls .sheet-crit, .sheet-rolltemplate-rolls .sheet-fail { + font-weight: bold; + font-size: 1.3em; +} +.sheet-rolltemplate-rolls .sheet-crit { + color: green; +} +.sheet-rolltemplate-rolls .sheet-fail { + color: red; +} diff --git a/GODSEND-Agenda/sheet.html b/GODSEND-Agenda/sheet.html new file mode 100644 index 0000000000..de28447775 --- /dev/null +++ b/GODSEND-Agenda/sheet.html @@ -0,0 +1,222 @@ + + +
+ +

GODSEND AGENDA

+
Page selection + +
+
Sheet Version:
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
Body Points + / + +
+
Mind Points + / + +
+
Hero Points + / + +
+
Wealth Rating + +
+
XP + + +
+
+
+

Attributes

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

Skills

+
+ + + + +
+
+
+

Disadvantages

+
personal + +
+
internal + +
+
external + +
+

Notes

+ +
+
+
+

Notes

+
+

archetype_description

+ +
+
+

powers

+ +
+
+

weapons

+ +
+
+

equipment

+ +
+
+
+

Settings

+
Ask for Roll Modifiers? + +
+
Whisper rolls to GM? + +
+
Dice type + +
+
+ + + + + + +
+
+ {{#title}}
{{title}}
{{/title}} + + {{#subtitle}}
{{subtitle}}
{{/subtitle}} +
+
+ {{#allprops() title subtitle desc color baseroll}} +
{{key}}
+
{{value}}
+ {{/allprops() title subtitle desc color baseroll}} + {{#rollTotal() baseroll 2}} +
^{critical-fumble}
+ {{/rollTotal() baseroll 2}} + {{#rollTotal() baseroll 12}} +
Critical Success!
+ {{/rollTotal() baseroll 12}} + {{#desc}}
{{desc}}
{{/desc}} +
+
+
+ + + \ No newline at end of file diff --git a/GODSEND-Agenda/sheet.json b/GODSEND-Agenda/sheet.json new file mode 100644 index 0000000000..1b52c8de09 --- /dev/null +++ b/GODSEND-Agenda/sheet.json @@ -0,0 +1,40 @@ +{ + "html": "sheet.html", + "css": "sheet.css", + "authors": "Andreas J.", + "roll20userid": "1223200", + "preview": "preview.png", + "instructions": "This is the character sheet for'GODSEND Agenda', by Khepera Publishing.\n\n* [GODSEND-Agenda-3-Beta-Test](https://www.drivethrurpg.com/product/305357/GODSEND-Agenda-3-Beta-Test?affiliate_id=135577) on DriveThuRPG", + "legacy": false, + "useroptions": [ + { + "attribute": "whisper", + "displayname": "Whisper rolls to GM?", + "description": "When checked, the rolls made from the sheet are only visible to the player and the GM.", + "type": "checkbox", + "value": "/w gm" + }, + { + "attribute": "modquery", + "displayname": "Ask for Roll Modifiers?", + "type": "select", + "options": [ + "No| ", + "Yes|+(?{Roll Modifier|0}[Modifiers])" + ], + "default": "+(?{Roll Modifier|0}[Modifiers])", + "description": "If active, sheet will as for dice modifiers before every roll." + }, + { + "attribute": "dice", + "displayname": "Base dice for rolls", + "type": "select", + "options": [ + "2d10 (GODSEND)|2d10cf0cs0", + "1d20 (Talislanta, Hellas, Atlantis)|1d20" + ], + "default": "2d10cf0cs0", + "description": "Choose what dice is used of the rolls from the sheet. GODSEND Agenda uses '2d10', while some other variations like Talislanta, Hellas & Atlantis use a 'd20'." + } + ] +} diff --git a/GODSEND-Agenda/sheet.pug b/GODSEND-Agenda/sheet.pug new file mode 100644 index 0000000000..0e437910a7 --- /dev/null +++ b/GODSEND-Agenda/sheet.pug @@ -0,0 +1,13 @@ + +// main sheet code +include src/pug/core.pug + +//hidden inputs & datalists +include src/pug/data.pug + +//roll templates +include src/pug/rolltemplate.html + +//sheetworkers +script(type="sheet/worker") + include src/js/sheetworker.js diff --git a/GODSEND-Agenda/sheet.scss b/GODSEND-Agenda/sheet.scss new file mode 100644 index 0000000000..a0afc8c6c6 --- /dev/null +++ b/GODSEND-Agenda/sheet.scss @@ -0,0 +1,3 @@ +@use 'src/scss/_core.scss'; + +@use 'src/scss/_rolltemplate.scss'; diff --git a/GODSEND-Agenda/src/js/sheetworker.js b/GODSEND-Agenda/src/js/sheetworker.js new file mode 100644 index 0000000000..4216c3333b --- /dev/null +++ b/GODSEND-Agenda/src/js/sheetworker.js @@ -0,0 +1,16 @@ + + +const int = score => parseInt(score, 10) || 0; + +// tabs + +const buttonlist = ["character", "notes", "settings"]; + +buttonlist.forEach(button => { + on(`clicked:${button}`, function() { + console.log(button + " was pressed"); + setAttrs({ + sheetTab: button + }); + }); +}); diff --git a/GODSEND-Agenda/src/pug/core.html b/GODSEND-Agenda/src/pug/core.html new file mode 100644 index 0000000000..2afa3710b9 --- /dev/null +++ b/GODSEND-Agenda/src/pug/core.html @@ -0,0 +1,196 @@ + +
+ + + + + +
+ +Sheet Version: + + + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ Body Points/ +
+
+ Mind Points/ +
+
+ Hero Points/ +
+
+ Wealth Rating +
+
+ +
+

Attributes

+
+
+ con + + +
+ +
+ dex + + +
+ +
+ spd + + +
+ +
+ str + + +
+ +
+ cr + + +
+
+ +
+
+ cha + + +
+ +
+ int + + +
+ +
+ per + + +
+ +
+ wil + + +
+ +
+ mr + + +
+
+ +
+ +
+

Skills

+
+ + + + +
+
+ + +
+

Disadvantages

+
+ personal +
+
+ internal +
+
+ external +
+

Notes

+ +
+ +
+ + +
+

Notes

+ +
+

powers

+ +
+ +
+

weapons

+ +
+ +
+

equipment

+ +
+ +
+ +
+

Settings

+ +
+ Ask for Roll Modifiers? + +
+ +
+ Whisper rolls to GM? + +
+ +
+ Dice type + +
+
+ diff --git a/GODSEND-Agenda/src/pug/core.pug b/GODSEND-Agenda/src/pug/core.pug new file mode 100644 index 0000000000..483703364f --- /dev/null +++ b/GODSEND-Agenda/src/pug/core.pug @@ -0,0 +1,126 @@ +//- PUG variables/lists +- var attrs1 = ["con", "dex", "spd", "str", "cr"]; +- var attrs2 = ["sha", "int", "per", "wil", "mr"]; +- var attrsall = ["con", "dex", "spd", "str", "cr", "sha", "int", "per", "wil", "mr", "none"]; +- var pages = ["character", "notes", "settings"]; +//- Mixins +mixin attrsrolls(name) + div + button(name=`roll_${name}` value!=`@{whisper}&{template:rolls} {{title=${name} }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{${name}}[${name}]@{modquery}]]}}` type="roll")= name + input(name=`attr_${name}` type="number" title=`@{${name}}` value="") + +mixin attrselect + select(name="attr_attribute") + each name in attrsall + option(value=`[[@{${name}}]]`)= name +//- end of mixins +//- sheet code +.tab-buttons.spaced.center + //- + //- each tab in pages + //_ button(type="action" name=`act_${tab}`) tab + //- + h1 GODSEND AGENDA + div + span Page selection + select(name="attr_sheetTab") + each tab in pages + option(value=`${tab}`)= tab + .version + span Sheet Version: + span(name="attr_version") +input.tabstoggle(type="hidden" name="attr_sheetTab" value="character") +main.character + section.common + .columnflex.nowrap + label Name + input(name="attr_character_name" title="@{character_name}" type="text") + .columnflex.nowrap + label Species + input(name="attr_species" title="@{species}" type="text") + .columnflex.nowrap + label Archetype + input(name="attr_archetype" title="@{archetype}" type="text") + .columnflex.nowrap + label Renown + input(name="attr_renown" title="@{renown}" type="number") + section.points.rowflex.nowrap.spaced + .rowflex.nowrap + span Body Points + input.txtfield(name="attr_body_points" type="number" value="") + span / + input.txtfield(name="attr_body_points_max" type="number" value="") + .rowflex.nowrap + span Mind Points + input.txtfield(name="attr_mind_points" type="number" value="") + span / + input.txtfield(name="attr_mind_points_max" type="number" value="") + .rowflex.nowrap + span Hero Points + input.txtfield(name="attr_hero_points" title="@{hero_points}" type="number" value="") + span / + input.txtfield(name="attr_hero_points_max" title="@{hero_points_max}" type="number" value="") + .rowflex.nowrap + span Wealth Rating + input.txtfield(name="attr_wealth" title="@{wealth}" type="number" value="") + .rowflex.nowrap + span XP + input.txtfield(name="attr_xp" title="@{xp}" type="number" value="") + input.txtfield(name="attr_xp_max" title="@{xp_max}" type="number" value="") + section.attrs.columnflex.nowrap + h2 Attributes + .rowflex.nowrap.middle.spaced + each name in attrs1 + +attrsrolls(name) + .rowflex.nowrap.middle.spaced + each name in attrs2 + +attrsrolls(name) + section.skills.columnflex.nowrap + h2 Skills + fieldset.repeating_skills + input(name="attr_name" title="@{name}" type="text") + input(name="attr_level" title="@{level}" type="number") + +attrselect + button(name="roll_roll" value!="@{whisper}&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{level}[skill level]+@{attribute}[attribute]@{modquery}]]}}" type="roll") + span(name="attr_name") + section.notes.columnflex.nowrap + h2 Disadvantages + div + span + | personal + input(name="attr_personal" title="@{personal}" type="text") + input(name="attr_personaldice" title="@{personaldice}" type="number" value="") + div + span + | internal + input(name="attr_internal" title="@{internal}" type="text") + input(name="attr_internaldice" title="@{internaldice}" type="number" value="") + div + span + | external + input(name="attr_external" title="@{external}" type="text") + input(name="attr_externaldice" title="@{externaldice}" type="number" value="") + h2 Notes + textarea(name="attr_notes") +main.notes + h1 Notes + each option in ["archetype_description", "powers","weapons","equipment"] + section + h3= option + textarea(name=`attr_${option}`) +main.settings + h1 Settings + .section.columnflex.nowrap + span Ask for Roll Modifiers? + select(name="attr_modquery" title="@{modquery}") + option(value="+(?{Roll Modifier|0}[Modifiers])") Yes + option(value=" ") No + .section.rowflex.nowrap.gap + span(title="@{whisper}") Whisper rolls to GM? + input(name="attr_whisper" title="@{whisper}" type="checkbox" value="/w gm") + .section.rowflex.nowrap.gap + span Dice type + select(name="attr_dice" title="@{dice}") + option(value="2d10cf0cs0" selected)= '2d10 (GODSEND Agenda)' + option(value="1d20")= 'd20 (Talislanta, Hellas, Atlantis)' + diff --git a/GODSEND-Agenda/src/pug/data.pug b/GODSEND-Agenda/src/pug/data.pug new file mode 100644 index 0000000000..90350797e5 --- /dev/null +++ b/GODSEND-Agenda/src/pug/data.pug @@ -0,0 +1,11 @@ + +//sheet version +input(type="hidden" name="attr_version" value="1.0.0") + +input(type="hidden" name="attr_none" value="0") + +//- - var = ["lore", "crafting", "dwarf", "halfling"]; + +//- datalist#skillsgodsend +//- each item in +//- option(value=`${item}`) diff --git a/GODSEND-Agenda/src/pug/rolltemplate.html b/GODSEND-Agenda/src/pug/rolltemplate.html new file mode 100644 index 0000000000..8c07a091b9 --- /dev/null +++ b/GODSEND-Agenda/src/pug/rolltemplate.html @@ -0,0 +1,23 @@ + + +
+
+ {{#title}}
{{title}}
{{/title}} + + {{#subtitle}}
{{subtitle}}
{{/subtitle}} +
+
+ {{#allprops() title subtitle desc color baseroll}} +
{{key}}
+
{{value}}
+ {{/allprops() title subtitle desc color baseroll}} + {{#rollTotal() baseroll 2}} +
^{critical-fumble}
+ {{/rollTotal() baseroll 2}} + {{#rollTotal() baseroll 12}} +
Critical Success!
+ {{/rollTotal() baseroll 12}} + {{#desc}}
{{desc}}
{{/desc}} +
+
+
diff --git a/GODSEND-Agenda/src/scss/_core.scss b/GODSEND-Agenda/src/scss/_core.scss new file mode 100644 index 0000000000..2c8d718b06 --- /dev/null +++ b/GODSEND-Agenda/src/scss/_core.scss @@ -0,0 +1,351 @@ +@import url('https://fonts.googleapis.com/css?family=Zilla+Slab|Anton|Noto+Sans+TC|Bebas+Neue&display=swap'); + + +.charsheet { + + * { + font-family: "Noto Sans TC"; + --mythic-dark-red: #4a0004; + --mythic-light-red: #ac3f2b; + --mythic-red: #a83521; + } + + .version{ + color: black; + font-weight: bold; + float: right; + margin: -31px 13px; + } + + .capital, + :not(textarea){ + font-family: "Bebas Neue"; + } + + /* ---------- Colors ---------- */ + + label, + .label, + span { + color: var(--mythic-dark-red); + } + + /* --------- Text ------------- */ + + h1, h2, h3{ + text-align: center; + } + + span.bold{ + font-weight: 800; + font-size: medium; + } + + div.border-label label { + border-style: solid; + max-width: 80%; + border-radius: 13px; + } + + .small-font{ + font-size: xx-small; + height:18px; + } + /* --------- Inputs ------------- */ + + input[type="text"], + input[type="number"]{ + background-color: transparent; + border-style: none none solid none; + border-color: var(--mythic-light-red); + border-radius: 0px; + } + + input[type="number"]{ + border: 1px solid var(--mythic-light-red); + text-align: center; + } + + + input[type="number"].bubble { + border: 2px solid var(--mythic-light-red); + border-radius: 13px; + } + + input[type="checkbox"].checkbox { + border: solid var(--mythic-light-red); + border-radius: 0px; + } + + + /* -----Hides up/down buttons on numberfields that don't need them ---*/ + input[type="number"].ref { + border-style: none none solid none; + border-color: black; + border-radius: 0px; + } + + input[type=number].ref::-webkit-inner-spin-button, + input[type=number].ref::-webkit-outer-spin-button, + input[type=number].txtfield::-webkit-inner-spin-button, + input[type=number].txtfield::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + input[type=number].ref, + input[type=number].txtfield { + -moz-appearance: textfield; + } + + textarea { + width: 90%; + height: 85%; + background-color: transparent; + } + + /* highlights empty fields with Light grayish red */ + textarea:placeholder-shown, + input[type="text"]:placeholder-shown, + input[type="number"]:placeholder-shown{ + background-color: #EAC9D1; + } + + /* higlight selected input */ + textarea:focus, + input[type="text"]:focus, + input[type="number"]:focus{ + background-color: #ccc; + } + + + + /* ------- Buttons ---------- */ + + + + /* text buttons with dice icon removed */ + + button[type="roll"].txt-btn:before, + button[type="roll"].skills:before{ + content: ' '; + } + + button[type=roll].d6-dice::before { /*new die changes die roller to d6*/ + font-family: 'dicefontd6',arial; + content: 'F '; + color: white; + } + button[type=roll].sendtext::before { /*new die changes die roller to d6*/ + font-family: 'Pictos'; + content: 'w '; + color: black; + } + + button[type="roll"].txt-btn{ + height: 22px; + border: 2px solid black; + background-color: transparent; + margin-left: 5px; + font-weight: bold; + padding: 2px 5px 4px 5px; + text-shadow: none; + } + button[type="roll"].txt-btn:hover{ + background-color: #d9d9d9; + border-radius: 10px; + text-shadow: none; + } + + button[type="roll"].red{ + background-color: #a83521; + background-position: 0 -30px; + color: white; + } + button[type="roll"].red:hover{ + background-color: #a83521; + background-position: 0 -30px; + color: white; + font-size: 1.7em; + } + + + + + /*------------------------------------*\ + #SECTIONS + \*------------------------------------*/ + + /* page selection */ + + div.tab-buttons{ + display: flex; + gap: 30px; + border: 2px black; + border-style: none none solid none; + + button{ + font-size: 1.5em; + } + select{ + width: 90px; + } + } + + + /* --------------- Universal Section ------------------- */ + + .border{ + border-style: solid; + border-radius: 13px; + } + + :is(div.section section) hr{ + display: block; + margin-top: 0.5em; + margin-bottom: 0.5em; + margin-left: auto; + margin-right: auto; + border-style: solid; + border-width: 2px; + border-color: black; + } + + .section, + section { + display: flex; + padding: 5px; + border: none; + background: white; + opacity: 0.9; + min-height: 90%; + max-width: 750px; + } + .flex-row { + display: flex; + flex-flow: row wrap; + } + + .flex-col{ + display: flex; + flex-flow: column; + } + + .flex-center { + place-items: center; + } + + .gap{ + gap: 10px; + } + + .columnflex { + display: flex; + flex-direction: column; + } + .rowflex { + display: flex; + flex-direction: row; + } + .wrap { + flex-wrap: wrap; + } + .nowrap { + flex-wrap: nowrap; + } + + .center { + align-items: center; + } + + .middle { + justify-content: center; + } + .spaced { + justify-content: space-evenly; + } + + + label.title{ + text-transform: capitalize; + max-width: 150px; + text-align: center; + font-size: 25px; + } + + div.halfsection{ + max-width: 400px; + } + + + /* Core layout of each page */ + + main.character { + display: grid; + grid-gap: 4px; + grid-template-columns: 3fr 1fr; + grid-template-rows: 70px 40px 140px auto; + grid-template-areas:"common common" + "points points" + "attrs attrs" + "skills notes"; + width: 800px; + height: 1300px; + position: relative; + /* Section specific */ + section.common{ + grid-area: common; + } + section.points{ + grid-area: points; + } + section.disadv{ + grid-area: disadv; + } + section.skills{ + grid-area: skills; + } + section.notes{ + grid-area: notes; + + input { + background-color: #ccc; + } + } + } + + main.notes { + display: grid; + width: 750px; + position: relative; + } + + + + main.settings { + display: grid; + width: 750px; + position: relative; + } + + /*------------------------------------*\ + #PAGE LAYOUT/ PAGE BUTTONS + \*------------------------------------*/ + + + + /* -------------- page buttons ------------- */ + + main.character, + main.notes, + main.settings { + display: none; + } + + /* show the selected page */ + input.tabstoggle[value="character"] ~ main.character, + input.tabstoggle[value="notes"] ~ main.notes, + input.tabstoggle[value="settings"] ~ main.settings { + display: grid; + } + +} diff --git a/GODSEND-Agenda/src/scss/_rolltemplate.scss b/GODSEND-Agenda/src/scss/_rolltemplate.scss new file mode 100644 index 0000000000..b2b51c3f7c --- /dev/null +++ b/GODSEND-Agenda/src/scss/_rolltemplate.scss @@ -0,0 +1,103 @@ +/*------------------------------------*\ + #ROLL TEMPLATES +\*------------------------------------*/ + +/* Smaller margins - remove these if you want the huge default left margin */ + +.withoutavatars .sheet-rolltemplate-rolls { + margin-left: -7px; +} + +.sheet-rolltemplate-rolls { + margin-left: -37px; + font-family: "Yanone Kaffeesatz"; + + .sheet-container { + border: 3px solid black; + border-radius: 3px; + } + + /* Header formatting - title and subtitle */ + .sheet-header { + background-color: var(--header-bg-color, #a83521); + color: var(--header-text-color, #FFF); + text-align: left; + text-transform: capitalize; + padding: 5px; + border-bottom: 2px solid black; + } + .sheet-title { + font-size: 1.4em; + font-weight: bold; + } + .sheet-subtitle { + font-size: 1em; + } + + .sheet-container { + --header-bg-color: #a83521; + --header-text-color: #FFF; + } + + /* alt template colors */ + .sheet-container.sheet-color-green { + --header-bg-color: #008000; + } + .sheet-container.sheet-color-blue { + --header-bg-color: #0000e0; + } + .sheet-container.sheet-color-gold { + --header-bg-color: #ffdd1f; + --header-text-color: #000; + } + .sheet-container.sheet-color-purple { + --header-bg-color: #c200c2; + } + .sheet-container.sheet-color-black { + --header-bg-color: #000; + } + .sheet-container.sheet-color-white { + --header-bg-color: #FFF; + --header-text-color: #000; + } + + /* Allprops part */ + .sheet-content { + display: grid; + background: #FFF; + grid-template-columns: auto auto; + line-height:1.4em; + } + .sheet-content > div { + padding: 5px; + } + + .sheet-content .sheet-key { + font-weight: bold; + padding-right: 10px; + text-align: right; + } + + /* Make even-numbered rows grey */ + .sheet-content :nth-child(4n+3), + .sheet-content :nth-child(4n) { + background:#EEE; + } + + /* Description field */ + .sheet-desc, .sheet-crit, .sheet-fail { + grid-column: span 2; + padding: 5px; + text-align: center; + } + .sheet-crit, .sheet-fail{ + font-weight: bold; + font-size: 1.3em; + } + .sheet-crit { + color: green; + } + .sheet-fail { + color: red; + } +} \ No newline at end of file