GODSEND Agenda, sheet frame, rolls broken
This commit is contained in:
Andreas Johansson
@@ -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).
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
|
||||
<!-- main sheet code-->
|
||||
<div class="tab-buttons middle center">
|
||||
<!-- <input type="hidden" class="npctoggle" name="attr_npc" value="0"> -->
|
||||
<button type="action" name="act_character" >Character</button>
|
||||
<!-- <button class="npc" type="action" name="act_npc" >NPC</button> -->
|
||||
<button type="action" name="act_notes" >Notes</button>
|
||||
<button type="action" name="act_settings" >Settings</button>
|
||||
</div>
|
||||
|
||||
<span class="version">Sheet Version: <span name="attr_version"></span> </span>
|
||||
|
||||
<input type="hidden" class="tabstoggle" name="attr_sheetTab" value="character">
|
||||
|
||||
<main class="character">
|
||||
|
||||
<section class="common">
|
||||
<div class="columnflex nowrap">
|
||||
<label>Name</label>
|
||||
<input name="attr_character_name" title="@{character_name}" type="text">
|
||||
</div>
|
||||
<div class="columnflex nowrap">
|
||||
<label>Species</label>
|
||||
<input name="attr_species" title="@{species}" type="text">
|
||||
</div>
|
||||
<div class="columnflex nowrap">
|
||||
<label>Archetype</label>
|
||||
<input name="attr_archetype" title="@{archetype}" type="text">
|
||||
</div>
|
||||
<div class="columnflex nowrap">
|
||||
<label>Renown</label>
|
||||
<input name="attr_renown" title="@{renown}" type="text">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="points rowflex nowrap spaced">
|
||||
<div class="rowflex nowrap">
|
||||
<span>Body Points</span><input name="attr_body_points" type="number" value="" class="txtfield">/<input name="attr_body_points_max" type="number" value="" class="txtfield">
|
||||
</div>
|
||||
<div class="rowflex nowrap">
|
||||
<span>Mind Points</span><input name="attr_mind_points" type="number" value="" class="txtfield">/<input name="attr_mind_points_max" type="number" value="" class="txtfield">
|
||||
</div>
|
||||
<div class="rowflex nowrap">
|
||||
<span>Hero Points</span><input name="attr_hero_points" title="@{hero_points}" type="number" value="" class="txtfield">/<input name="attr_hero_points_max" title="@{hero_points_max}" type="number" value="" class="txtfield">
|
||||
</div>
|
||||
<div class="rowflex nowrap">
|
||||
<span>Wealth Rating</span><input name="attr_wealth" title="@{wealth}" type="text" value="" class="txtfield">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="attrs columnflex nowrap">
|
||||
<h2>Attributes</h2>
|
||||
<div class="rowflex nowrap">
|
||||
<div>
|
||||
<span>con</span>
|
||||
<input name="attr_con" type="number" value="">
|
||||
<button name="roll_con" value="" type="roll">con</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>dex</span>
|
||||
<input name="attr_dex" type="number" value="">
|
||||
<button name="roll_dex" value="" type="roll">dex</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>spd</span>
|
||||
<input name="attr_spd" type="number" value="">
|
||||
<button name="roll_spd" value="" type="roll">spd</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>str</span>
|
||||
<input name="attr_str" type="number" value="">
|
||||
<button name="roll_str" value="" type="roll">str</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>cr</span>
|
||||
<input name="attr_cr" type="number" value="">
|
||||
<button name="roll_cr" value="" type="roll">cr</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rowflex nowrap">
|
||||
<div>
|
||||
<span>cha</span>
|
||||
<input name="attr_cha" type="number" value="">
|
||||
<button name="roll_cha" value="" type="roll">sha</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>int</span>
|
||||
<input name="attr_int" type="number" value="">
|
||||
<button name="roll_int" value="" type="roll">int</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>per</span>
|
||||
<input name="attr_per" type="number" value="">
|
||||
<button name="roll_per" value="" type="roll">per</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>wil</span>
|
||||
<input name="attr_wil" type="number" value="">
|
||||
<button name="roll_wil" value="" type="roll">wil</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>mr</span>
|
||||
<input name="attr_mr" type="number" value="">
|
||||
<button name="roll_mr" value="" type="roll">mr</button>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</section>
|
||||
<!--
|
||||
<section class="disadv">
|
||||
|
||||
</section>
|
||||
-->
|
||||
<section class="skills columnflex nowrap">
|
||||
<h2>Skills</h2>
|
||||
<fieldset class="repeating_skills">
|
||||
<input name="attr_name" title="@{name}" type="text">
|
||||
<input name="attr_rank" title="@{rank}" type="number">
|
||||
<input name="attr_attribute" title="@{attribute}" type="number">
|
||||
<button name="roll_roll" value="&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{rank}+@{attribute}[attribute]@{modquery}]]}}" type="roll" ></button>
|
||||
</fieldset>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="notes columnflex nowrap">
|
||||
<h2>Disadvantages</h2>
|
||||
<div>
|
||||
<span>personal <input name="attr_personal" title="@{personal}" type="text"><input name="attr_personaldice" title="@{personaldice}" type="number" value=""></span>
|
||||
</div>
|
||||
<div>
|
||||
<span>internal <input name="attr_internal" title="@{internal}" type="text"><input name="attr_internaldice" title="@{internaldice}" type="number" value=""></span>
|
||||
</div>
|
||||
<div>
|
||||
<span>external <input name="attr_external" title="@{external}" type="text"><input name="attr_externaldice" title="@{externaldice}" type="number" value=""></span>
|
||||
</div>
|
||||
<h2>Notes</h2>
|
||||
<textarea name="attr_notes"></textarea>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<!--
|
||||
<main class="npc gap">
|
||||
<h1>NPC</h1>
|
||||
</main>
|
||||
-->
|
||||
|
||||
<main class="notes">
|
||||
<h1>Notes</h1>
|
||||
|
||||
<section>
|
||||
<h3>powers</h3>
|
||||
<textarea name="attr_powers"></textarea>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>weapons</h3>
|
||||
<textarea name="attr_weapons"></textarea>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>equipment</h3>
|
||||
<textarea name="attr_equipment"></textarea>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<main class="settings">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div class="section columnflex nowrap">
|
||||
<span title="@{show_name}">Ask for Roll Modifiers?</span>
|
||||
<select name="attr_modquery" title="@{modquery}" title="@{modquery}">
|
||||
<option value="+?{Roll Modifier|0}">Yes</option>
|
||||
<option value=" ">No</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section rowflex nowrap gap">
|
||||
<span title="@{whisper}">Whisper rolls to GM?</span>
|
||||
<input name="attr_whisper" title="@{whisper}" type="checkbox" value="/w gm">
|
||||
</div>
|
||||
|
||||
<div class="section rowflex nowrap gap">
|
||||
<span>Dice type</span>
|
||||
<input name="attr_dice" title="@{dice}" type="text" value="1d20">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<!--hidden inputs & datalists-->
|
||||
<!--sheet version-->
|
||||
<input type="hidden" name="attr_version" value="1.0.0"/>
|
||||
<input type="hidden" name="attr_" value="0"/>
|
||||
<datalist id="list">
|
||||
<option value="human"></option>
|
||||
<option value="elf"></option>
|
||||
<option value="dwarf"></option>
|
||||
<option value="halfling"></option>
|
||||
</datalist>
|
||||
<!--roll templates-->
|
||||
<rolltemplate class="sheet-rolltemplate-rolls">
|
||||
<div class="sheet-container sheet-color-{{color}}">
|
||||
<div class="sheet-header">
|
||||
{{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
|
||||
{{#name}}<div class="sheet-name">{{name}}</div>{{/name}}
|
||||
{{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
|
||||
</div>
|
||||
<div class="sheet-content">
|
||||
{{#allprops() title name subtitle desc color baseroll}}
|
||||
<div class="sheet-key">{{key}}</div>
|
||||
<div class="sheet-value">{{value}}</div>
|
||||
{{/allprops() title subtitle desc color baseroll}}
|
||||
{{#rollTotal() baseroll 2}}
|
||||
<div class="sheet-fail">^{critical-fumble}</div>
|
||||
{{/rollTotal() baseroll 2}}
|
||||
{{#rollTotal() baseroll 12}}
|
||||
<div class="sheet-crit">Critical Success!</div>
|
||||
{{/rollTotal() baseroll 12}}
|
||||
{{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
|
||||
</div>
|
||||
</div>
|
||||
</rolltemplate>
|
||||
|
||||
<!--sheetworkers-->
|
||||
<script type="sheet/worker">
|
||||
|
||||
const int = score => parseInt(score, 10) || 0;
|
||||
|
||||
const list = ["str", "dex"];
|
||||
|
||||
// tabs
|
||||
|
||||
const buttonlist = ["notes","settings","character"];
|
||||
buttonlist.forEach(button => {
|
||||
on(`clicked:${button}`, function() {
|
||||
|
||||
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")
|
||||
});
|
||||
});
|
||||
*/
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"html": "sheet.html",
|
||||
"css": "sheet.css",
|
||||
"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)",
|
||||
"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|+?{Extra Dice?|0}d6>3cf0cs0[EXTRA DICE]"
|
||||
],
|
||||
"default": " ",
|
||||
"description": "If active, sheet will as for dice modifiers before every roll."
|
||||
},
|
||||
{
|
||||
"attribute": "skillcolor",
|
||||
"displayname": "",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"No| ",
|
||||
"Yes|"
|
||||
],
|
||||
"default": " ",
|
||||
"description": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
|
||||
// main sheet code
|
||||
include src/pug/core.html
|
||||
|
||||
//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
|
||||
@@ -0,0 +1,3 @@
|
||||
@use 'src/scss/_core.scss';
|
||||
|
||||
@use 'src/scss/_rolltemplate.scss';
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
|
||||
const int = score => parseInt(score, 10) || 0;
|
||||
|
||||
const list = ["str", "dex"];
|
||||
|
||||
// tabs
|
||||
|
||||
const buttonlist = ["notes","settings","character"];
|
||||
buttonlist.forEach(button => {
|
||||
on(`clicked:${button}`, function() {
|
||||
|
||||
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")
|
||||
});
|
||||
});
|
||||
*/
|
||||
@@ -0,0 +1,196 @@
|
||||
|
||||
<div class="tab-buttons middle center">
|
||||
<!-- <input type="hidden" class="npctoggle" name="attr_npc" value="0"> -->
|
||||
<button type="action" name="act_character" >Character</button>
|
||||
<!-- <button class="npc" type="action" name="act_npc" >NPC</button> -->
|
||||
<button type="action" name="act_notes" >Notes</button>
|
||||
<button type="action" name="act_settings" >Settings</button>
|
||||
</div>
|
||||
|
||||
<span class="version">Sheet Version: <span name="attr_version"></span> </span>
|
||||
|
||||
<input type="hidden" class="tabstoggle" name="attr_sheetTab" value="character">
|
||||
|
||||
<main class="character">
|
||||
|
||||
<section class="common">
|
||||
<div class="columnflex nowrap">
|
||||
<label>Name</label>
|
||||
<input name="attr_character_name" title="@{character_name}" type="text">
|
||||
</div>
|
||||
<div class="columnflex nowrap">
|
||||
<label>Species</label>
|
||||
<input name="attr_species" title="@{species}" type="text">
|
||||
</div>
|
||||
<div class="columnflex nowrap">
|
||||
<label>Archetype</label>
|
||||
<input name="attr_archetype" title="@{archetype}" type="text">
|
||||
</div>
|
||||
<div class="columnflex nowrap">
|
||||
<label>Renown</label>
|
||||
<input name="attr_renown" title="@{renown}" type="text">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="points rowflex nowrap spaced">
|
||||
<div class="rowflex nowrap">
|
||||
<span>Body Points</span><input name="attr_body_points" type="number" value="" class="txtfield">/<input name="attr_body_points_max" type="number" value="" class="txtfield">
|
||||
</div>
|
||||
<div class="rowflex nowrap">
|
||||
<span>Mind Points</span><input name="attr_mind_points" type="number" value="" class="txtfield">/<input name="attr_mind_points_max" type="number" value="" class="txtfield">
|
||||
</div>
|
||||
<div class="rowflex nowrap">
|
||||
<span>Hero Points</span><input name="attr_hero_points" title="@{hero_points}" type="number" value="" class="txtfield">/<input name="attr_hero_points_max" title="@{hero_points_max}" type="number" value="" class="txtfield">
|
||||
</div>
|
||||
<div class="rowflex nowrap">
|
||||
<span>Wealth Rating</span><input name="attr_wealth" title="@{wealth}" type="text" value="" class="txtfield">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="attrs columnflex nowrap">
|
||||
<h2>Attributes</h2>
|
||||
<div class="rowflex nowrap">
|
||||
<div>
|
||||
<span>con</span>
|
||||
<input name="attr_con" type="number" value="">
|
||||
<button name="roll_con" value="" type="roll">con</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>dex</span>
|
||||
<input name="attr_dex" type="number" value="">
|
||||
<button name="roll_dex" value="" type="roll">dex</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>spd</span>
|
||||
<input name="attr_spd" type="number" value="">
|
||||
<button name="roll_spd" value="" type="roll">spd</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>str</span>
|
||||
<input name="attr_str" type="number" value="">
|
||||
<button name="roll_str" value="" type="roll">str</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>cr</span>
|
||||
<input name="attr_cr" type="number" value="">
|
||||
<button name="roll_cr" value="" type="roll">cr</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rowflex nowrap">
|
||||
<div>
|
||||
<span>cha</span>
|
||||
<input name="attr_cha" type="number" value="">
|
||||
<button name="roll_cha" value="" type="roll">sha</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>int</span>
|
||||
<input name="attr_int" type="number" value="">
|
||||
<button name="roll_int" value="" type="roll">int</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>per</span>
|
||||
<input name="attr_per" type="number" value="">
|
||||
<button name="roll_per" value="" type="roll">per</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>wil</span>
|
||||
<input name="attr_wil" type="number" value="">
|
||||
<button name="roll_wil" value="" type="roll">wil</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>mr</span>
|
||||
<input name="attr_mr" type="number" value="">
|
||||
<button name="roll_mr" value="" type="roll">mr</button>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</section>
|
||||
<!--
|
||||
<section class="disadv">
|
||||
|
||||
</section>
|
||||
-->
|
||||
<section class="skills columnflex nowrap">
|
||||
<h2>Skills</h2>
|
||||
<fieldset class="repeating_skills">
|
||||
<input name="attr_name" title="@{name}" type="text">
|
||||
<input name="attr_rank" title="@{rank}" type="number">
|
||||
<input name="attr_attribute" title="@{attribute}" type="number">
|
||||
<button name="roll_roll" value="&{template:rolls} {{title=@{name} }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{rank}+@{attribute}[attribute]@{modquery}]]}}" type="roll" ></button>
|
||||
</fieldset>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="notes columnflex nowrap">
|
||||
<h2>Disadvantages</h2>
|
||||
<div>
|
||||
<span>personal <input name="attr_personal" title="@{personal}" type="text"><input name="attr_personaldice" title="@{personaldice}" type="number" value=""></span>
|
||||
</div>
|
||||
<div>
|
||||
<span>internal <input name="attr_internal" title="@{internal}" type="text"><input name="attr_internaldice" title="@{internaldice}" type="number" value=""></span>
|
||||
</div>
|
||||
<div>
|
||||
<span>external <input name="attr_external" title="@{external}" type="text"><input name="attr_externaldice" title="@{externaldice}" type="number" value=""></span>
|
||||
</div>
|
||||
<h2>Notes</h2>
|
||||
<textarea name="attr_notes"></textarea>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<!--
|
||||
<main class="npc gap">
|
||||
<h1>NPC</h1>
|
||||
</main>
|
||||
-->
|
||||
|
||||
<main class="notes">
|
||||
<h1>Notes</h1>
|
||||
|
||||
<section>
|
||||
<h3>powers</h3>
|
||||
<textarea name="attr_powers"></textarea>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>weapons</h3>
|
||||
<textarea name="attr_weapons"></textarea>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>equipment</h3>
|
||||
<textarea name="attr_equipment"></textarea>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<main class="settings">
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div class="section columnflex nowrap">
|
||||
<span title="@{show_name}">Ask for Roll Modifiers?</span>
|
||||
<select name="attr_modquery" title="@{modquery}" title="@{modquery}">
|
||||
<option value="+?{Roll Modifier|0}">Yes</option>
|
||||
<option value=" ">No</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="section rowflex nowrap gap">
|
||||
<span title="@{whisper}">Whisper rolls to GM?</span>
|
||||
<input name="attr_whisper" title="@{whisper}" type="checkbox" value="/w gm">
|
||||
</div>
|
||||
|
||||
<div class="section rowflex nowrap gap">
|
||||
<span>Dice type</span>
|
||||
<input name="attr_dice" title="@{dice}" type="text" value="1d20">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
//sheet version
|
||||
input(type="hidden" name="attr_version" value="1.0.0")
|
||||
|
||||
|
||||
input(type="hidden" name="attr_" value="0")
|
||||
|
||||
|
||||
datalist#list
|
||||
each item in ["human", "elf", "dwarf", "halfling"]
|
||||
option(value=`${item}`)
|
||||
@@ -0,0 +1,23 @@
|
||||
|
||||
<rolltemplate class="sheet-rolltemplate-rolls">
|
||||
<div class="sheet-container sheet-color-{{color}}">
|
||||
<div class="sheet-header">
|
||||
{{#title}}<div class="sheet-title">{{title}}</div>{{/title}}
|
||||
{{#name}}<div class="sheet-name">{{name}}</div>{{/name}}
|
||||
{{#subtitle}}<div class="sheet-subtitle">{{subtitle}}</div>{{/subtitle}}
|
||||
</div>
|
||||
<div class="sheet-content">
|
||||
{{#allprops() title name subtitle desc color baseroll}}
|
||||
<div class="sheet-key">{{key}}</div>
|
||||
<div class="sheet-value">{{value}}</div>
|
||||
{{/allprops() title subtitle desc color baseroll}}
|
||||
{{#rollTotal() baseroll 2}}
|
||||
<div class="sheet-fail">^{critical-fumble}</div>
|
||||
{{/rollTotal() baseroll 2}}
|
||||
{{#rollTotal() baseroll 12}}
|
||||
<div class="sheet-crit">Critical Success!</div>
|
||||
{{/rollTotal() baseroll 12}}
|
||||
{{#desc}}<div class="sheet-desc">{{desc}}</div>{{/desc}}
|
||||
</div>
|
||||
</div>
|
||||
</rolltemplate>
|
||||
@@ -0,0 +1,552 @@
|
||||
@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;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.version{
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin: -16px 20px;
|
||||
}
|
||||
|
||||
.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
|
||||
\*------------------------------------*/
|
||||
|
||||
/* --------------- 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: 800px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* 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 {
|
||||
display: grid;
|
||||
width: 750px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
main.settings {
|
||||
display: grid;
|
||||
width: 750px;
|
||||
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
|
||||
\*------------------------------------*/
|
||||
|
||||
|
||||
|
||||
/* -------------- page buttons ------------- */
|
||||
|
||||
main.character,
|
||||
main.notes,
|
||||
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';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user