diff --git a/Quest-rpg/Readme.md b/Quest-rpg/Readme.md new file mode 100644 index 0000000000..dd682b84d1 --- /dev/null +++ b/Quest-rpg/Readme.md @@ -0,0 +1,13 @@ +# Quest RPG Roll20 Character Sheet +UnofficialCharacter Sheet Template for T.C. Sottek's tabletop game, [Quest](https://www.adventure.game/). + + +## Version 1.1 +(Andreas J.) 0ct. 2020 + +Made sheet more compact, updated the roll template, added button for rolls, minor fixes & adjustments. + +## Version 1.0 +(Andrew S.) + +It works, but it ain't particularly pretty. I tried to model it after the Quest RPG character profile and worksheet, but I tweaked a few things based on my experiences with how Roll20 is used. I will jazz up the formatting in the future, but we may never have complete parity with the visuals of the official Quest character handouts since there are limitations to what kind of font families Roll20 let's you use in a custom character sheet. \ No newline at end of file diff --git a/Quest-rpg/images/quest-logo.png b/Quest-rpg/images/quest-logo.png new file mode 100644 index 0000000000..1dc4a7e2ee Binary files /dev/null and b/Quest-rpg/images/quest-logo.png differ diff --git a/Quest-rpg/quest-preview.png b/Quest-rpg/quest-preview.png new file mode 100644 index 0000000000..1c5d66f33d Binary files /dev/null and b/Quest-rpg/quest-preview.png differ diff --git a/Quest-rpg/quest.css b/Quest-rpg/quest.css new file mode 100644 index 0000000000..687adee224 --- /dev/null +++ b/Quest-rpg/quest.css @@ -0,0 +1,318 @@ +/*----------- Logo -------------*/ + +img.sheet-logo { + max-width: 96px; + filter: invert(100%); + float: right; + padding-right: 60px; +} + +.charsheet ::placeholder{ + color: #9FA8A1; + font-size: 12px; + text-align: center; +} + +/*----------- Tabs Setup -------------*/ + +/*this hides the contents of each tab by default*/ +.charsheet div[class^="sheet-section"]{ + display: none; +} + +/*this shows the tab content when the appropriate input field is selected*/ +.charsheet input.sheet-tab1:checked ~ div.sheet-section-profile, +.charsheet input.sheet-tab2:checked ~ div.sheet-section-inv, +.charsheet input.sheet-tab3:checked ~ div.sheet-section-abilities,{ + display: block; + width: 540px; + background-color: white; +} + +.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"]{ + display: block; +} + +/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/ +.charsheet input.sheet-tab { + width: 100px; + height: 40px; + cursor: pointer; + position: relative; + opacity: 0; + z-index: 9999; +} + +/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/ +.charsheet span.sheet-tab { + display: inline-block; + text-align: center; + font-size: 13px; + background: #c7c3b0; + color: white; + font-weight: bold; + border-radius: 4px; + + width: 100px; + height: 40px; + cursor: pointer; + position: relative; + vertical-align: middle; + margin-left: -101px;/*originally 91px*/ +} + +/*this modifies the span color once the radio button is selected so you know which tab is selected*/ +.charsheet input.sheet-tab1:checked + span.sheet-tab1, +.charsheet input.sheet-tab2:checked + span.sheet-tab2, +.charsheet input.sheet-tab3:checked + span.sheet-tab3, +.charsheet input.sheet-tab4:checked + span.sheet-tab4, +.charsheet input.sheet-tab5:checked + span.sheet-tab5, +.charsheet input.sheet-tab6:checked + span.sheet-tab6, +.charsheet input.sheet-tab7:checked + span.sheet-tab7, +.charsheet input.sheet-tab8:checked + span.sheet-tab8, +.charsheet input.sheet-tab99:checked + span.sheet-tab99{ + background: #2c424e; + color: white; + border-radius: 4px; +} + + + +/*----------- Profile Section -------------*/ +.charsheet .sheet-section-profile{ + background-color: #ffffff; + background-repeat: no-repeat; +} + +.charsheet div.sheet-section-profile{ + padding-top: 30px; + padding-bottom: 10px; +} + +.charsheet .sheet-section-profile p{ + font-family: 'Ovo', serif; + font-size: 17px; + margin-left: 20px; + line-height: 1.6; + width: 545px; +} + + +input[type=text], +input[type=number] { + display: inline-block; + margin-right: 5px; + box-shadow: none; + border: none; + border-bottom: 1px solid black; + -moz-appearance:textfield; + font-size: 17px; + margin-top: -5px; + padding-bottom: 2px; +} + +.charsheet input.sheet-name-field { + width: 250px; +} + +.charsheet input.sheet-pronoun { + width: 130px; + text-align: center; +} + +.charsheet input.sheet-age { + width: 70px; +} + +.charsheet input.sheet-height { + width: 140px; +} + +.charsheet input.sheet-role { + width: 200px; +} + +.charsheet input.sheet-attribute { + width: 200px; +} + +.charsheet input.sheet-attribute2 { + width: 240px; +} + +.charsheet input.sheet-clothes { + width: 210px; +} + +.charsheet input.sheet-background { + width: 240px; +} + +.charsheet input.sheet-background2 { + width: 410px; +} + +.charsheet input.sheet-ethos { + width: 270px; +} + +.charsheet input.sheet-goal { + width: 410px; +} + +.charsheet textarea.sheet-notes { + width: 470px; + height: 130px; + font-size: 17px; +} + +.charsheet div.sheet-profile-notes { + padding-top: 15px; +} + + + +/*----------- Abilities Section -------------*/ + +div.sheet-section-abilities { + padding-top: 30px; +} + +div.sheet-section-abilities p { + font-size: 17px; +} + +span.sheet-ap { + float: right; + margin-right: 50px; +} + +span.sheet-hp, +input.sheet-ap, +input.sheet-hp{ + text-align: center; +} + + +h3.sheet-ability-header { + text-align: center; + color: #FFF; + background-color: #2c424e; + margin-top: 10px; + margin-bottom: 10px; + width: 510px; +} + +input.sheet-ability-name { + margin-bottom: 10px; + font-size: 18px; +} + +input.sheet-ability-cost { + margin-bottom: 10px; + font-size: 18px; + width: 75px; +} + +div.repcontrol{ + width: 510px; +} + +textarea.sheet-ability-description { + font-size: 18px; + resize: none; + width: 575px; + height: 90px; + resize: none; +} + + +/*----------- Inventory Section -------------*/ + +div.sheet-2colrow.sheet-2colrow-top { + padding-top: 30px; +} + +div.sheet-2colrow.sheet-2colrow-top div.sheet-col, +div.sheet-2colrow.sheet-invbottom div.sheet-col{ + margin-right: 10px; +} + +.sheet-section-inv textarea { + font-size: 18px; + resize: none; + width: 95%; +} + + +/*------------------------------------*\ + #ROLL TEMPLATES +\*------------------------------------*/ + +/* Smaller margins - remove these if you want the huge default left margin */ +.sheet-rolltemplate-quest { + margin-left: -37px; +} +.withoutavatars .sheet-rolltemplate-quest { + margin-left: -7px; +} + +.sheet-rolltemplate-quest .sheet-container { + border: 3px solid var(--quest-blue); + border-radius: 3px; +} + +/* Header formatting - title and subtitle */ +.sheet-rolltemplate-quest .sheet-header { + background-color: var(--quest-blue); + color: white; + text-align: left; + text-transform: capitalize; + padding: 5px; + border-bottom: 2px solid var(--quest-blue); +} +.sheet-rolltemplate-quest .sheet-title { + font-size:1.2em; + font-weight: bold; +} +.sheet-rolltemplate-quest .sheet-subtitle { + font-size:.9em; +} + + +.sheet-rolltemplate-quest .sheet-container { + --quest-blue: #2c424e; +} + +/* Allprops part */ +.sheet-rolltemplate-quest .sheet-content { + display: grid; + background: #FFF; + /* Header formatting - modify the column layout below */ + grid-template-columns: auto auto; + /* Line height to match default roll template */ + line-height:1.4em; +} +.sheet-rolltemplate-quest .sheet-content > div { + padding: 5px; +} + +/* Left column */ +.sheet-rolltemplate-quest .sheet-content .sheet-key { + font-weight: bold; + padding-right: 10px; + text-align: right; +} + +/* Make even-numbered rows grey */ +.sheet-rolltemplate-quest .sheet-content :nth-child(4n+3), +.sheet-rolltemplate-quest .sheet-content :nth-child(4n) { + background:#EEE; +} + +/* Wide Description field */ +.sheet-rolltemplate-quest .sheet-desc { + grid-column: span 2; + padding: 5px; + text-align: center; +} \ No newline at end of file diff --git a/Quest-rpg/quest.html b/Quest-rpg/quest.html new file mode 100644 index 0000000000..99574c7977 --- /dev/null +++ b/Quest-rpg/quest.html @@ -0,0 +1,108 @@ +
+ + + Profile + + Abilities + + Inventory + + v.1.1 + + + + +
+
+

Hello,

+

My name is ()

+

I'm years old, and stand tall.

+

I'm the party's .

+

When people see me, they first notice my , , and .

+

I wear , ,

+

and move with .

+

I'm from , where my people are

+

known for .

+

I believe in , but my side can get in my way.

+

I dream of .

+

+
+

+
+
+ + +
+

+ Hit Points: / 10 + Adventure Points: +

+ +

Abilities

+
+ + + + +
+
+ + +
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+ + + + + + + + + + + + +
{{name}}
AP Cost: {{cost}}
{{desc}}
+ + + +
+
+ {{#title}}
{{title}}
{{/title}} + {{#subtitle}}
{{subtitle}}
{{/subtitle}} +
+
+ {{#allprops() title subtitle desc}} +
{{key}}
+
{{value}}
+ {{/allprops() title subtitle desc}} + {{#desc}}
{{desc}}
{{/desc}} +
+
+ \ No newline at end of file diff --git a/Quest-rpg/sheet.json b/Quest-rpg/sheet.json new file mode 100644 index 0000000000..2dc2ab5e93 --- /dev/null +++ b/Quest-rpg/sheet.json @@ -0,0 +1,8 @@ +{ + "html": "quest.html", + "css": "quest.css", + "authors": "Andrew Simone, Andreas J.", + "roll20userid": "849188, 1223200", + "preview": "quest-preview.png", + "instructions": "Unofficial Character Sheet for the '[Quest](https://www.adventure.game/)' RPG(by The Adventure Guild/T.C. Sottek).\n\n* The roll button shows the roll table alongside the result.\n\nSheet created by Andrew S., and Andreas J. updated it a bit as well as made it avaiable in Roll20." +}