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/sheet.css b/GODSEND-Agenda/sheet.css new file mode 100644 index 0000000000..90de22493e --- /dev/null +++ b/GODSEND-Agenda/sheet.css @@ -0,0 +1,519 @@ +@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 + \*------------------------------------*/ + /* --------------- Universal Section ------------------- */ + /* Section specific */ + /* Core layout of each page */ + /* -------------------------- Pages Specific Layout--------------------- */ + /* -------------------------- Page 2/Notes --------------------- */ + /* -------------------------- Page 3/Settings ------------------ */ + /* -------------------------- Page 4/NPC ------------------ */ + /*------------------------------------*\ + #PAGE LAYOUT/ PAGE BUTTONS + \*------------------------------------*/ + /* -------------- page buttons ------------- */ + /* + main.npc, + button[type="action"].npc, + button[type="action"].pc, + input.tabstoggle[value="npc"] ~ main.npc, + */ + /* show the selected page */ + /* shows/hides page buttons */ + /* + input.npctoggle[value="0"] ~ button[type="action"].pc, + input.npctoggle[value="1"] ~ button[type="action"].npc{ + display: flex; + } */ +} +.charsheet * { + font-family: "Noto Sans TC"; + --mythic-dark-red: #4a0004; + --mythic-light-red: #ac3f2b; + --mythic-red: #a83521; + overflow: clip; +} +.charsheet .version { + color: black; + font-weight: bold; + float: right; + margin: -16px 20px; +} +.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 .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: 800px; +} +.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 section.common { + grid-area: common; +} +.charsheet section.points { + grid-area: points; +} +.charsheet section.disadv { + grid-area: disadv; +} +.charsheet section.skills { + grid-area: skills; +} +.charsheet section.notes { + grid-area: notes; +} +.charsheet section.notes input { + background-color: #ccc; +} +.charsheet main.character { + display: grid; + grid-gap: 4px; + grid-template-columns: 3fr 1fr; + grid-template-rows: 70px 40px 100px auto; + grid-template-areas: "common common" "points points" "attrs attrs" "skills notes"; + width: 800px; + height: 1300px; + position: relative; +} +.charsheet main.notes { + display: grid; + width: 750px; + position: relative; +} +.charsheet main.settings { + display: grid; + width: 750px; + position: relative; +} +.charsheet main.npc textarea { + height: 140px; +} +.charsheet main.settings input[type=number] { + height: 24px; +} +.charsheet main.settings span.dice { + margin-top: 5px; +} +.charsheet main.npc * { + overflow: hidden; + text-overflow: ellipsis; + text-align: center; +} +.charsheet main.npc h3 { + text-align: center; +} +.charsheet main.npc .mookgrid { + display: grid; + grid-template-columns: repeat(5, 1fr); + grid-template-rows: repeat(4, 1fr) 3fr; + place-items: center; +} +.charsheet main.npc .mookgrid .orange { + background-color: orange; + font-size: 1.3em; + place-self: stretch; +} +.charsheet main.npc .mookgrid .name { + grid-column: span 5; +} +.charsheet main.npc .mookgrid .name label { + width: 40px; +} +.charsheet main.npc .mookgrid .name input { + font-size: 1.7em; + text-align: center; + margin-bottom: 5px; +} +.charsheet main.npc .mookgrid .al { + grid-column: span 2; +} +.charsheet main.npc .mookgrid .notes { + grid-column: span 5; + background-color: LemonChiffon; +} +.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; +} +.charsheet div.tab-buttons { + display: flex; + gap: 10px; +} +.charsheet div.tab-buttons button { + font-size: 1.5em; +} + +/* mobile styling */ +@media only screen and (max-width: 480px) { + .charsheet button[type=roll].d6-dice::before { + /*new die changes die roller to d6*/ + content: ""; + } + .charsheet main.character { + display: grid; + grid-gap: 4px; + grid-template-columns: 13fr 9fr; + grid-template-rows: 1fr minmax(0.3fr, 2.5fr) 1.5fr 8fr 3fr 2fr 2fr 2fr 2fr 1fr; + grid-template-areas: "common common " "archetype archetype " "attributes attributes" "skills skills " "powers powers " "weapons weapons " "armor armor " "stress stress " "equipment equipment " "rules rules "; + width: 480px; + height: 1800px; + position: relative; + } + .charsheet div.archetype { + width: 400px; + } + .charsheet div.archetype details div { + flex-direction: column; + } + .charsheet div.archetype textarea.featuredesc { + width: 90%; + } + .charsheet div.attributes { + flex-wrap: wrap; + } + .charsheet div.attributes label.title { + text-align: center; + min-width: 450px; + width: 450px; + } + .charsheet div.attributes div.rowflex.nowrap.middle { + flex-wrap: wrap; + width: 350px; + } + .charsheet div.skills div.rowflex { + flex-direction: column; + } + .charsheet div.skills div.skillgrid { + display: grid; + padding: 5px; + grid-template-rows: repeat(21, 1fr); + grid-template-columns: 3fr 2fr; + width: 400px; + height: 800px; + } + .charsheet div.skills button[type=roll].red { + width: 170px; + } + .charsheet button[type=roll].skills { + font-size: 14px; + padding: 0px; + margin: 0px; + width: 145px; + height: 25px; + border: 2px solid white; + color: var(--mythic-light-red); + text-shadow: none; + } + .charsheet button[type=roll].skills:hover { + font-size: 14px; + padding: 0px; + margin: 0px; + width: 145px; + height: 25px; + border: 2px solid black; + border-radius: 9px; + color: var(--mythic-light-red); + text-shadow: none; + } + .charsheet button[type=roll].skills:hover::after { + content: ""; + } + .charsheet div.skills button[type=roll].special { + width: 25px; + color: var(--mythic-light-red); + } + .charsheet div.skills button[type=roll].special:hover { + width: 25px; + color: var(--mythic-light-red); + } + .charsheet div.skills button[type=roll].special::after { + content: "d6"; + } +} +/*------------------------------------*\ + #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..27bc8d4941 --- /dev/null +++ b/GODSEND-Agenda/sheet.html @@ -0,0 +1,289 @@ + + +
+ +Sheet Version: + + + +