Merge pull request #8909 from Anduh/GODSEND-Agenda
[New Sheet] GODSEND Agenda
This commit is contained in:
Miguel Peres
@@ -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).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,375 @@
|
||||
@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
|
||||
\*------------------------------------*/
|
||||
/* page selection */
|
||||
/* --------------- Universal Section ------------------- */
|
||||
/* Core layout of each page */
|
||||
/*------------------------------------*\
|
||||
#PAGE LAYOUT/ PAGE BUTTONS
|
||||
\*------------------------------------*/
|
||||
/* -------------- page buttons ------------- */
|
||||
/* show the selected page */
|
||||
}
|
||||
.charsheet * {
|
||||
font-family: "Noto Sans TC";
|
||||
--mythic-dark-red: #4a0004;
|
||||
--mythic-light-red: #ac3f2b;
|
||||
--mythic-red: #a83521;
|
||||
}
|
||||
.charsheet .version {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin: -31px 13px;
|
||||
}
|
||||
.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 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;
|
||||
}
|
||||
.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: 750px;
|
||||
}
|
||||
.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 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 */
|
||||
}
|
||||
.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;
|
||||
width: 750px;
|
||||
position: relative;
|
||||
}
|
||||
.charsheet main.settings {
|
||||
display: grid;
|
||||
width: 750px;
|
||||
position: relative;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
/*------------------------------------*\
|
||||
#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,222 @@
|
||||
|
||||
<!-- main sheet code-->
|
||||
<div class="tab-buttons spaced center">
|
||||
<!--_ button(type="action" name=`act_${tab}`) tab-->
|
||||
<h1>GODSEND AGENDA</h1>
|
||||
<div><span>Page selection</span>
|
||||
<select name="attr_sheetTab">
|
||||
<option value="character">character</option>
|
||||
<option value="notes">notes</option>
|
||||
<option value="settings">settings</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="version"><span>Sheet Version: </span><span name="attr_version"></span></div>
|
||||
</div>
|
||||
<input class="tabstoggle" type="hidden" 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="number"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="points rowflex nowrap spaced">
|
||||
<div class="rowflex nowrap"><span>Body Points</span>
|
||||
<input class="txtfield" name="attr_body_points" type="number" value=""/><span>/</span>
|
||||
<input class="txtfield" name="attr_body_points_max" type="number" value=""/>
|
||||
</div>
|
||||
<div class="rowflex nowrap"><span>Mind Points</span>
|
||||
<input class="txtfield" name="attr_mind_points" type="number" value=""/><span>/</span>
|
||||
<input class="txtfield" name="attr_mind_points_max" type="number" value=""/>
|
||||
</div>
|
||||
<div class="rowflex nowrap"><span>Hero Points</span>
|
||||
<input class="txtfield" name="attr_hero_points" title="@{hero_points}" type="number" value=""/><span>/</span>
|
||||
<input class="txtfield" name="attr_hero_points_max" title="@{hero_points_max}" type="number" value=""/>
|
||||
</div>
|
||||
<div class="rowflex nowrap"><span>Wealth Rating</span>
|
||||
<input class="txtfield" name="attr_wealth" title="@{wealth}" type="number" value=""/>
|
||||
</div>
|
||||
<div class="rowflex nowrap"><span>XP</span>
|
||||
<input class="txtfield" name="attr_xp" title="@{xp}" type="number" value=""/>
|
||||
<input class="txtfield" name="attr_xp_max" title="@{xp_max}" type="number" value=""/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="attrs columnflex nowrap">
|
||||
<h2>Attributes</h2>
|
||||
<div class="rowflex nowrap middle spaced">
|
||||
<div>
|
||||
<button name="roll_con" value="@{whisper}&{template:rolls} {{title=con }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{con}[con]@{modquery}]]}}" type="roll">con</button>
|
||||
<input name="attr_con" type="number" title="@{con}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_dex" value="@{whisper}&{template:rolls} {{title=dex }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{dex}[dex]@{modquery}]]}}" type="roll">dex</button>
|
||||
<input name="attr_dex" type="number" title="@{dex}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_spd" value="@{whisper}&{template:rolls} {{title=spd }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{spd}[spd]@{modquery}]]}}" type="roll">spd</button>
|
||||
<input name="attr_spd" type="number" title="@{spd}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_str" value="@{whisper}&{template:rolls} {{title=str }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{str}[str]@{modquery}]]}}" type="roll">str</button>
|
||||
<input name="attr_str" type="number" title="@{str}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_cr" value="@{whisper}&{template:rolls} {{title=cr }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{cr}[cr]@{modquery}]]}}" type="roll">cr</button>
|
||||
<input name="attr_cr" type="number" title="@{cr}" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rowflex nowrap middle spaced">
|
||||
<div>
|
||||
<button name="roll_sha" value="@{whisper}&{template:rolls} {{title=sha }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{sha}[sha]@{modquery}]]}}" type="roll">sha</button>
|
||||
<input name="attr_sha" type="number" title="@{sha}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_int" value="@{whisper}&{template:rolls} {{title=int }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{int}[int]@{modquery}]]}}" type="roll">int</button>
|
||||
<input name="attr_int" type="number" title="@{int}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_per" value="@{whisper}&{template:rolls} {{title=per }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{per}[per]@{modquery}]]}}" type="roll">per</button>
|
||||
<input name="attr_per" type="number" title="@{per}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_wil" value="@{whisper}&{template:rolls} {{title=wil }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{wil}[wil]@{modquery}]]}}" type="roll">wil</button>
|
||||
<input name="attr_wil" type="number" title="@{wil}" value=""/>
|
||||
</div>
|
||||
<div>
|
||||
<button name="roll_mr" value="@{whisper}&{template:rolls} {{title=mr }} {{subtitle=@{character_name} }} {{result= [[@{dice}+@{mr}[mr]@{modquery}]]}}" type="roll">mr</button>
|
||||
<input name="attr_mr" type="number" title="@{mr}" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="skills columnflex nowrap">
|
||||
<h2>Skills</h2>
|
||||
<fieldset class="repeating_skills">
|
||||
<input name="attr_name" title="@{name}" type="text"/>
|
||||
<input name="attr_level" title="@{level}" type="number"/>
|
||||
<select name="attr_attribute">
|
||||
<option value="[[@{con}]]">con</option>
|
||||
<option value="[[@{dex}]]">dex</option>
|
||||
<option value="[[@{spd}]]">spd</option>
|
||||
<option value="[[@{str}]]">str</option>
|
||||
<option value="[[@{cr}]]">cr</option>
|
||||
<option value="[[@{sha}]]">sha</option>
|
||||
<option value="[[@{int}]]">int</option>
|
||||
<option value="[[@{per}]]">per</option>
|
||||
<option value="[[@{wil}]]">wil</option>
|
||||
<option value="[[@{mr}]]">mr</option>
|
||||
<option value="[[@{none}]]">none</option>
|
||||
</select>
|
||||
<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"></span></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="notes">
|
||||
<h1>Notes</h1>
|
||||
<section>
|
||||
<h3>archetype_description</h3>
|
||||
<textarea name="attr_archetype_description"></textarea>
|
||||
</section>
|
||||
<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>Ask for Roll Modifiers?</span>
|
||||
<select name="attr_modquery" title="@{modquery}">
|
||||
<option value="+(?{Roll Modifier|0}[Modifiers])">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>
|
||||
<select name="attr_dice" title="@{dice}">
|
||||
<option value="2d10cf0cs0" selected="selected">2d10 (GODSEND Agenda)</option>
|
||||
<option value="1d20">d20 (Talislanta, Hellas, Atlantis)</option>
|
||||
</select>
|
||||
</div>
|
||||
</main>
|
||||
<!--hidden inputs & datalists-->
|
||||
<!--sheet version-->
|
||||
<input type="hidden" name="attr_version" value="1.0.0"/>
|
||||
<input type="hidden" name="attr_none" value="0"/>
|
||||
<!--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 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;
|
||||
|
||||
// tabs
|
||||
|
||||
const buttonlist = ["character", "notes", "settings"];
|
||||
|
||||
buttonlist.forEach(button => {
|
||||
on(`clicked:${button}`, function() {
|
||||
console.log(button + " was pressed");
|
||||
setAttrs({
|
||||
sheetTab: button
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
{
|
||||
"html": "sheet.html",
|
||||
"css": "sheet.css",
|
||||
"authors": "Andreas J.",
|
||||
"roll20userid": "1223200",
|
||||
"preview": "preview.png",
|
||||
"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": [
|
||||
{
|
||||
"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|+(?{Roll Modifier|0}[Modifiers])"
|
||||
],
|
||||
"default": "+(?{Roll Modifier|0}[Modifiers])",
|
||||
"description": "If active, sheet will as for dice modifiers before every roll."
|
||||
},
|
||||
{
|
||||
"attribute": "dice",
|
||||
"displayname": "Base dice for rolls",
|
||||
"type": "select",
|
||||
"options": [
|
||||
"2d10 (GODSEND)|2d10cf0cs0",
|
||||
"1d20 (Talislanta, Hellas, Atlantis)|1d20"
|
||||
],
|
||||
"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'."
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
|
||||
// main sheet code
|
||||
include src/pug/core.pug
|
||||
|
||||
//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,16 @@
|
||||
|
||||
|
||||
const int = score => parseInt(score, 10) || 0;
|
||||
|
||||
// tabs
|
||||
|
||||
const buttonlist = ["character", "notes", "settings"];
|
||||
|
||||
buttonlist.forEach(button => {
|
||||
on(`clicked:${button}`, function() {
|
||||
console.log(button + " was pressed");
|
||||
setAttrs({
|
||||
sheetTab: button
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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,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
|
||||
//- <input type="hidden" class="npctoggle" name="attr_npc" value="0">
|
||||
//- each tab in pages
|
||||
//_ button(type="action" name=`act_${tab}`) tab
|
||||
//- <button class="npc" type="action" name="act_npc" >NPC</button>
|
||||
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)'
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
|
||||
//sheet version
|
||||
input(type="hidden" name="attr_version" value="1.0.0")
|
||||
|
||||
input(type="hidden" name="attr_none" value="0")
|
||||
|
||||
//- - var = ["lore", "crafting", "dwarf", "halfling"];
|
||||
|
||||
//- datalist#skillsgodsend
|
||||
//- each item in
|
||||
//- 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 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,351 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.version{
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin: -31px 13px;
|
||||
}
|
||||
|
||||
.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
|
||||
\*------------------------------------*/
|
||||
|
||||
/* 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{
|
||||
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: 750px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
}
|
||||
section.points{
|
||||
grid-area: points;
|
||||
}
|
||||
section.disadv{
|
||||
grid-area: disadv;
|
||||
}
|
||||
section.skills{
|
||||
grid-area: skills;
|
||||
}
|
||||
section.notes{
|
||||
grid-area: notes;
|
||||
|
||||
input {
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main.notes {
|
||||
display: grid;
|
||||
width: 750px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
main.settings {
|
||||
display: grid;
|
||||
width: 750px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/*------------------------------------*\
|
||||
#PAGE LAYOUT/ PAGE BUTTONS
|
||||
\*------------------------------------*/
|
||||
|
||||
|
||||
|
||||
/* -------------- page buttons ------------- */
|
||||
|
||||
main.character,
|
||||
main.notes,
|
||||
main.settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* show the selected page */
|
||||
input.tabstoggle[value="character"] ~ main.character,
|
||||
input.tabstoggle[value="notes"] ~ main.notes,
|
||||
input.tabstoggle[value="settings"] ~ main.settings {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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