diff --git a/GODSEND-Agenda/Readme.md b/GODSEND-Agenda/Readme.md index 3e8447c22e..8d0d89401b 100644 --- a/GODSEND-Agenda/Readme.md +++ b/GODSEND-Agenda/Readme.md @@ -5,8 +5,15 @@ Created with PUGjs and SASS by [Andreas J.](https:wiki.roll20.net/Anduh). ## Changelog +### v.1.3.1 +- several visual fixes +- + ### v.1.2.0 - repeating weapons, powers, armor - add/remove some secondary attributes - update looks -- rolltemplate shows degree of success \ No newline at end of file +- rolltemplate shows degree of success + +### v.1.0.0 +- barebones initial sheet \ No newline at end of file diff --git a/GODSEND-Agenda/sheet.css b/GODSEND-Agenda/sheet.css index 5a4a262b06..f67b720f4f 100644 --- a/GODSEND-Agenda/sheet.css +++ b/GODSEND-Agenda/sheet.css @@ -1,13 +1,11 @@ -@import url("https://fonts.googleapis.com/css?family=Caesar+Dressing|Noto+Sans+TC|Bebas+Neue&display=swap"); +@import url("https://fonts.googleapis.com/css?family=Bebas+Neue|Lexend|Caesar+Dressing|Noto+Sans+TC&display=swap"); .charsheet * { - font-family: "Bebas Neue"; - --mythic-dark-red: #4a0004; - --mythic-light-red: #ac3f2b; - --mythic-red: #a83521; + font-family: "Bebas Neue", "Arial"; --godsend: #c87d00; + --sheetwidth: 800px; } .charsheet input[value=hellas].gamesys ~ * { - font-family: "Caesar Dressing"; + font-family: "Caesar Dressing", Arial; --godsend: #a83521; } .charsheet .version { @@ -27,7 +25,12 @@ .charsheet h2 { background-color: var(--godsend); width: calc(100% - 40px); - margin: 0.5em 0 0.5em 15px; + margin: 0.4em 0 0.4em 15px; +} +.charsheet h3 { + background-color: var(--godsend); + width: calc(100% - 40px); + margin: 0.2em 0 0.2em 5px; } .charsheet .cap { text-transform: capitalize; @@ -46,6 +49,12 @@ height: 18px; } .charsheet input[type=text], +.charsheet input[type=number], +.charsheet textarea, +.charsheet select, .charsheet option { + font-family: "Lexend", Arial; +} +.charsheet input[type=text], .charsheet input[type=number] { background-color: transparent; border-style: none none solid none; @@ -64,6 +73,10 @@ border: solid var(--godsend); border-radius: 0px; } +.charsheet select { + border-color: var(--godsend); + padding-top: 1px; +} .charsheet input[type=number].ref { border-style: none none solid none; border-color: black; @@ -95,6 +108,10 @@ .charsheet input[type=number]:focus { background-color: #ccc; } +.charsheet button[type=roll]::before { + position: relative; + top: 2px; +} .charsheet button[type=roll].txt-btn:before, .charsheet button[type=roll].skills:before { content: " "; @@ -139,6 +156,7 @@ gap: 30px; border: 2px black; border-style: none none solid none; + width: var(--sheetwidth); } .charsheet div.tab-buttons button { font-size: 1.5em; @@ -215,121 +233,157 @@ display: grid; grid-gap: 4px; grid-template-columns: 5fr 4fr; - grid-template-rows: 70px 40px 162px auto; + grid-template-rows: 65px 40px 162px auto; grid-template-areas: "common common" "points points" "attrs notes" "skills notes"; - width: 800px; + width: var(--sheetwidth); height: 1300px; position: relative; } -.charsheet main.character section.common { +.charsheet section.common { grid-area: common; } -.charsheet main.character section.common input[type=text] { +.charsheet section.common input[type=text] { width: 170px; text-align: center; } -.charsheet main.character section.common input[type=text].name { - font-size: 1.5em; +.charsheet section.common input[type=text].name { + font-size: 1.4em; color: var(--godsend); } -.charsheet main.character section.common label { +.charsheet section.common label { margin-bottom: 2px; text-align: center; } -.charsheet main.character section.points { +.charsheet section.points { grid-area: points; } -.charsheet main.character section.points span { +.charsheet section.points span { padding: 0em 0.5em; font-size: 1em; display: flex; align-items: center; text-align: center; } -.charsheet main.character section.points input[type=number] { +.charsheet section.points input[type=number] { font-size: 1.4em; width: 40px; } -.charsheet main.character section.attrs { +.charsheet section.attrs { grid-area: attrs; + row-gap: 3px; } -.charsheet main.character section.attrs button { +.charsheet section.attrs button[type=roll] { font-size: 1.8em; + width: 47px; } -.charsheet main.character section.attrs input[type=number] { +.charsheet section.attrs input[type=number] { font-size: 1.5em; width: 2em; } -.charsheet main.character section.skills { +.charsheet section.skills { grid-area: skills; padding-top: 0px; margin-top: -28px; } -.charsheet main.character section.skills .desc-row { +.charsheet section.skills .desc-row { display: flex; justify-content: center; gap: 5px; } -.charsheet main.character section.skills .desc-row span { +.charsheet section.skills .desc-row span { display: flex; align-items: center; width: 40px; } -.charsheet main.character section.skills .desc-row span.powers { +.charsheet section.skills .desc-row span.attr { + width: 50px; +} +.charsheet section.skills .desc-row span.desc { + width: 68px; + justify-content: center; +} +.charsheet section.skills .desc-row span.powers { width: 81px; } -.charsheet main.character section.skills .desc-row span.weapons { - width: 104px; +.charsheet section.skills .desc-row span.weapons { + width: 188px; + justify-content: center; } -.charsheet main.character section.skills .desc-row span.armor { - width: 120px; - text-align: center; +.charsheet section.skills .desc-row span.armor { + width: 164px; + justify-content: center; } -.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem { +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) { + display: flex; + flex-flow: nowrap column; + row-gap: 3px; +} +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem { display: flex; justify-content: center; gap: 3px; + height: 29px; } -.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem input[type=text] { +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=text] { width: 40px; - font-size: 1.8em; + font-size: 1.3em; border-style: solid solid solid solid; + height: 28px; } -.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem input[type=text].name { +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=text].name { width: 140px; } -.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem input[type=number] { - font-size: 1.7em; +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=text].desc { + width: auto; +} +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem input[type=number] { + font-size: 1.5em; width: 40px; } -.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem select { - width: 55px; - font-size: 1.4em; - margin-top: 5px; +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem select { + width: 52px; + font-size: 1.5em; margin-bottom: 0px; text-align: center; + padding-top: 2px; + font-family: "Bebas Neue", Arial; } -.charsheet main.character section.skills :is(.repcontainer[data-groupname="repeating_skills"], .repcontainer[data-groupname="repeating_powers"], .repcontainer[data-groupname="repeating_weapons"], .repcontainer[data-groupname="repeating_armor"]) > .repitem button:not(.power) { - width: 90px; +.charsheet section.skills :is(.repcontainer[data-groupname=repeating_skills], .repcontainer[data-groupname=repeating_powers], .repcontainer[data-groupname=repeating_weapons], .repcontainer[data-groupname=repeating_armor]) > .repitem button { + margin: 1px 3px; } -.charsheet main.character section.notes { +.charsheet section.notes { grid-area: notes; } -.charsheet main.character section.notes input[type=text] { +.charsheet section.notes input[type=text] { width: 110px; } -.charsheet main.character section.notes textarea { +.charsheet section.notes textarea { height: 90px; } .charsheet main.notes { display: grid; width: 750px; position: relative; + grid-template-columns: 1fr 1fr; +} +.charsheet main.notes h2 { + grid-column: span 2; } .charsheet main.settings { display: grid; width: 750px; position: relative; + grid-template-columns: 1fr 1fr; +} +.charsheet main.settings h2 { + grid-column: span 2; +} +.charsheet main.settings select.short { + width: 70px; +} +.charsheet main.settings span { + color: black; + margin-right: 5px; } .charsheet main.settings .section * { font-size: 1.3em; diff --git a/GODSEND-Agenda/sheet.html b/GODSEND-Agenda/sheet.html index b12125aa4e..5b8a026f98 100644 --- a/GODSEND-Agenda/sheet.html +++ b/GODSEND-Agenda/sheet.html @@ -26,11 +26,11 @@