diff --git a/GODSEND-Agenda/sheet.css b/GODSEND-Agenda/sheet.css index 90de22493e..0aa25020b4 100644 --- a/GODSEND-Agenda/sheet.css +++ b/GODSEND-Agenda/sheet.css @@ -11,43 +11,26 @@ /*------------------------------------*\ #SECTIONS \*------------------------------------*/ + /* page selection */ /* --------------- 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; + margin: -31px 13px; } .charsheet .capital, .charsheet :not(textarea) { @@ -165,6 +148,18 @@ 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; @@ -187,7 +182,7 @@ background: white; opacity: 0.9; min-height: 90%; - max-width: 800px; + max-width: 750px; } .charsheet .flex-row { display: flex; @@ -235,33 +230,34 @@ .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-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; @@ -273,52 +269,6 @@ 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 { @@ -329,101 +279,7 @@ .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 \*------------------------------------*/ diff --git a/GODSEND-Agenda/sheet.html b/GODSEND-Agenda/sheet.html index 27bc8d4941..de28447775 100644 --- a/GODSEND-Agenda/sheet.html +++ b/GODSEND-Agenda/sheet.html @@ -1,221 +1,192 @@ -
- - - - - +
+ +

GODSEND AGENDA

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

Attributes

-
-
- con - - -
- -
- dex - - -
- -
- spd - - -
- -
- str - - -
- -
- cr - - -
-
- -
-
- cha - - -
- -
- int - - -
- -
- per - - -
- -
- wil - - -
- -
- mr - - -
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
Body Points + / + +
+
Mind Points + / + +
+
Hero Points + / + +
+
Wealth Rating + +
+
XP + + +
+
+
+

Attributes

+
- -
- -
-

Skills

-
- - - - -
-
- - -
-

Disadvantages

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

Notes

- -
- -
- - -
-

Notes

- -
-

powers

- -
- -
-

weapons

- -
- -
-

equipment

- -
- -
- -
-

Settings

- -
- Ask for Roll Modifiers? - +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Skills

+
+ + + - - -
- Whisper rolls to GM? - -
- -
- Dice type - -
+ +
+
+
+

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}} - {{#name}}
{{name}}
{{/name}} + {{#subtitle}}
{{subtitle}}
{{/subtitle}}
- {{#allprops() title name subtitle desc color baseroll}} + {{#allprops() title subtitle desc color baseroll}}
{{key}}
{{value}}
{{/allprops() title subtitle desc color baseroll}} @@ -235,55 +206,17 @@ const int = score => parseInt(score, 10) || 0; -const list = ["str", "dex"]; - // tabs -const buttonlist = ["notes","settings","character"]; +const buttonlist = ["character", "notes", "settings"]; + buttonlist.forEach(button => { on(`clicked:${button}`, function() { - - setAttrs({ - sheetTab: button - }); + console.log(button + " was pressed"); + setAttrs({ + sheetTab: button + }); }); }); -/* -on("sheet:opened", function() { - - getAttrs(["npc", "sheetTab"], values => { - - let npc = int(values["npc"]); - let sheetTab = values["sheetTab"]; - console.log("sheetTab: ", sheetTab); - //let page = "character"; - - if (sheetTab === "character"){ - npc = 0; - console.log("sheetTab was char, set NPC=0: ", npc); - } - else if (sheetTab === "npc"){ - npc = 1; - console.log("sheetTab was npc, set NPC=1: ", npc); - } - else if (sheetTab === "notes"){ - console.log("sheetTab was note"); - } - else if (sheetTab === "settings"){ - console.log("sheetTab was settings"); - } - setAttrs({ - npc: npc - }); - }); -}); - -on("sheet:opened", function(eventInfo){ - setAttrs({ - fumble_i18n: getTranslationByKey("critical-fumble"), - success_i18n: getTranslationByKey("critical-success") - }); -}); - */ \ No newline at end of file diff --git a/GODSEND-Agenda/sheet.json b/GODSEND-Agenda/sheet.json index a30bc00618..d894ff3f5f 100644 --- a/GODSEND-Agenda/sheet.json +++ b/GODSEND-Agenda/sheet.json @@ -4,7 +4,7 @@ "authors": "Andreas J.", "roll20userid": "1223200", "preview": "sheet-preview.png", - "instructions": "This is the character sheet for'GODSEND Agenda', by Khepera Publishing.\n\n* [GODSEND-Agenda-3-Beta-Test on DriveThuRPG](https://www.drivethrurpg.com/product/305357/GODSEND-Agenda-3-Beta-Test?affiliate_id=135577)", + "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": [ { @@ -20,21 +20,21 @@ "type": "select", "options": [ "No| ", - "Yes|+?{Extra Dice?|0}d6>3cf0cs0[EXTRA DICE]" + "Yes|+(?{Roll Modifier|0}[Modifiers])" ], - "default": " ", + "default": "+(?{Roll Modifier|0}[Modifiers])", "description": "If active, sheet will as for dice modifiers before every roll." }, { - "attribute": "skillcolor", - "displayname": "", + "attribute": "dice", + "displayname": "Base dice for rolls", "type": "select", "options": [ - "No| ", - "Yes|" + "2d10 (GODSEND)|2d10cf0cs0", + "1d20 (Talislanta, Hellas, Atlantis)|1d20" ], - "default": " ", - "description": "" + "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 index c5bd010396..0e437910a7 100644 --- a/GODSEND-Agenda/sheet.pug +++ b/GODSEND-Agenda/sheet.pug @@ -1,6 +1,6 @@ // main sheet code -include src/pug/core.html +include src/pug/core.pug //hidden inputs & datalists include src/pug/data.pug diff --git a/GODSEND-Agenda/src/js/sheetworker.js b/GODSEND-Agenda/src/js/sheetworker.js index a4b37eb63d..4216c3333b 100644 --- a/GODSEND-Agenda/src/js/sheetworker.js +++ b/GODSEND-Agenda/src/js/sheetworker.js @@ -2,54 +2,15 @@ const int = score => parseInt(score, 10) || 0; -const list = ["str", "dex"]; - // tabs -const buttonlist = ["notes","settings","character"]; +const buttonlist = ["character", "notes", "settings"]; + buttonlist.forEach(button => { on(`clicked:${button}`, function() { - - setAttrs({ - sheetTab: button - }); + console.log(button + " was pressed"); + setAttrs({ + sheetTab: button + }); }); }); - -/* -on("sheet:opened", function() { - - getAttrs(["npc", "sheetTab"], values => { - - let npc = int(values["npc"]); - let sheetTab = values["sheetTab"]; - console.log("sheetTab: ", sheetTab); - //let page = "character"; - - if (sheetTab === "character"){ - npc = 0; - console.log("sheetTab was char, set NPC=0: ", npc); - } - else if (sheetTab === "npc"){ - npc = 1; - console.log("sheetTab was npc, set NPC=1: ", npc); - } - else if (sheetTab === "notes"){ - console.log("sheetTab was note"); - } - else if (sheetTab === "settings"){ - console.log("sheetTab was settings"); - } - setAttrs({ - npc: npc - }); - }); -}); - -on("sheet:opened", function(eventInfo){ - setAttrs({ - fumble_i18n: getTranslationByKey("critical-fumble"), - success_i18n: getTranslationByKey("critical-success") - }); -}); - */ \ No newline at end of file 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 index 1b2ff671be..90350797e5 100644 --- a/GODSEND-Agenda/src/pug/data.pug +++ b/GODSEND-Agenda/src/pug/data.pug @@ -2,10 +2,10 @@ //sheet version input(type="hidden" name="attr_version" value="1.0.0") +input(type="hidden" name="attr_none" value="0") -input(type="hidden" name="attr_" value="0") +//- - var = ["lore", "crafting", "dwarf", "halfling"]; - -datalist#list - each item in ["human", "elf", "dwarf", "halfling"] - option(value=`${item}`) +//- datalist#skillsgodsend +//- each item in +//- option(value=`${item}`) diff --git a/GODSEND-Agenda/src/pug/rolltemplate.html b/GODSEND-Agenda/src/pug/rolltemplate.html index ba1fd3afbc..8c07a091b9 100644 --- a/GODSEND-Agenda/src/pug/rolltemplate.html +++ b/GODSEND-Agenda/src/pug/rolltemplate.html @@ -3,11 +3,11 @@
{{#title}}
{{title}}
{{/title}} - {{#name}}
{{name}}
{{/name}} + {{#subtitle}}
{{subtitle}}
{{/subtitle}}
- {{#allprops() title name subtitle desc color baseroll}} + {{#allprops() title subtitle desc color baseroll}}
{{key}}
{{value}}
{{/allprops() title subtitle desc color baseroll}} diff --git a/GODSEND-Agenda/src/scss/_core.scss b/GODSEND-Agenda/src/scss/_core.scss index a74071eb66..2c8d718b06 100644 --- a/GODSEND-Agenda/src/scss/_core.scss +++ b/GODSEND-Agenda/src/scss/_core.scss @@ -8,14 +8,13 @@ --mythic-dark-red: #4a0004; --mythic-light-red: #ac3f2b; --mythic-red: #a83521; - overflow: clip; } .version{ color: black; font-weight: bold; float: right; - margin: -16px 20px; + margin: -31px 13px; } .capital, @@ -120,8 +119,6 @@ - - /* ------- Buttons ---------- */ @@ -178,6 +175,23 @@ #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{ @@ -204,7 +218,7 @@ background: white; opacity: 0.9; min-height: 90%; - max-width: 800px; + max-width: 750px; } .flex-row { display: flex; @@ -263,6 +277,20 @@ } + /* 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; @@ -283,22 +311,6 @@ background-color: #ccc; } } - - - /* Core layout of each page */ - - 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; } main.notes { @@ -315,81 +327,6 @@ position: relative; } - - /* -------------------------- Pages Specific Layout--------------------- */ - - /* -------------------------- Page 2/Notes --------------------- */ - - main.npc { - - textarea{ - height: 140px; - } - } - - /* -------------------------- Page 3/Settings ------------------ */ - - main.settings { - input[type="number"]{ - height: 24px; - } - - span.dice{ - margin-top: 5px; - } - } - - - /* -------------------------- Page 4/NPC ------------------ */ - - main.npc{ - - * { - overflow: hidden; - text-overflow: ellipsis; - text-align: center; - } - h3{ - text-align: center; - } - .mookgrid{ - display: grid; - grid-template-columns: repeat(5, 1fr); - grid-template-rows: repeat(4, 1fr) 3fr; - place-items: center; - - .orange { - background-color: orange; - font-size: 1.3em; - place-self: stretch; - } - - .name { - grid-column: span 5; - - label{ - width: 40px; - } - input{ - font-size: 1.7em; - text-align: center; - margin-bottom: 5px; - } - } - - .al{ - grid-column: span 2; - } - .notes{ - grid-column: span 5; - background-color: LemonChiffon; - } - - } - } - - - /*------------------------------------*\ #PAGE LAYOUT/ PAGE BUTTONS \*------------------------------------*/ @@ -403,150 +340,12 @@ main.settings { display: none; } -/* - main.npc, - button[type="action"].npc, - button[type="action"].pc, - input.tabstoggle[value="npc"] ~ main.npc, - */ /* show the selected page */ input.tabstoggle[value="character"] ~ main.character, input.tabstoggle[value="notes"] ~ main.notes, - input.tabstoggle[value="settings"] ~ main.settings { display: grid; } - /* shows/hides page buttons */ - /* - input.npctoggle[value="0"] ~ button[type="action"].pc, - input.npctoggle[value="1"] ~ button[type="action"].npc{ - display: flex; - } */ - - div.tab-buttons{ - display: flex; - gap: 10px; - - 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: ''; - } - - 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; - } - - div.archetype { - width: 400px; - - details div{ - flex-direction: column; - } - textarea.featuredesc{ - width: 90%; - } - } - - div.attributes { - flex-wrap: wrap; - - label.title{ - text-align: center; - min-width: 450px; - width: 450px; - } - - div.rowflex.nowrap.middle{ - flex-wrap: wrap; - width: 350px; - } - } - - div.skills { - - div.rowflex{ - flex-direction: column; - } - - div.skillgrid{ - display: grid; - padding: 5px; - grid-template-rows: repeat(21, 1fr); - grid-template-columns: 3fr 2fr; - width: 400px; - height: 800px; - } - - - button[type="roll"].red{ - width: 170px; - } - } - 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; - } - 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; - } - button[type="roll"].skills:hover::after{ - content: ''; - } - - div.skills{ - button[type="roll"].special{ - width: 25px; - color: var(--mythic-light-red); - } - button[type="roll"].special:hover{ - width: 25px; - color: var(--mythic-light-red); - } - button[type="roll"].special::after{ - content: 'd6'; - } - } - } }