mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-06 23:22:34 +00:00
Trophy Gold v1 (#6223)
* trophy gold commit' * save trophy gold * update preview * remove unused files and updat readme
This commit is contained in:
Cassie Levett
@@ -0,0 +1,14 @@
|
||||
Roll20 Character Sheet Template
|
||||
=======================
|
||||
|
||||
## Necessary files
|
||||
|
||||
Written in PUG & SCSS. Use NPM to install compilers.
|
||||
|
||||
## NPM
|
||||
|
||||
This is a template uses [NPM](https://www.npmjs.com/get-npm) to develop character sheets.
|
||||
|
||||
Dependencies are outlined in the package.json. Just use `npm install` to download them.
|
||||
|
||||
Start the compiles for SCSS & PUG with `npm start`.
|
||||
@@ -0,0 +1,564 @@
|
||||
/* GLOBAL SETTINGS
|
||||
============================= */
|
||||
/* GLOBAL SETTINGS
|
||||
============================= */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 62.5%; }
|
||||
|
||||
button {
|
||||
text-overflow: ellipsis;
|
||||
font-family: serif;
|
||||
font-variant: small-caps;
|
||||
transition: all .2s;
|
||||
box-shadow: -1px -1px 1px 1px rgba(0, 0, 0, 0.5); }
|
||||
button:before {
|
||||
display: none; }
|
||||
button:focus, button:hover, button:active {
|
||||
background: none;
|
||||
background-color: #1e1a1a !important;
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
box-shadow: none; }
|
||||
button[type="roll"], button[type="action"] {
|
||||
background-color: whitesmoke;
|
||||
border-bottom: 1px solid #666;
|
||||
border-bottom-right-radius: 1px;
|
||||
border-color: #b3b3b3;
|
||||
border-radius: 0.25rem;
|
||||
border-right: 0.02rem solid #333333;
|
||||
border-style: outset;
|
||||
font-size: 2rem !important;
|
||||
margin: 0.25rem !important;
|
||||
padding: 0.2rem 0.5rem !important; }
|
||||
|
||||
div {
|
||||
background-color: transparent;
|
||||
width: 100%; }
|
||||
|
||||
fieldset {
|
||||
background-color: transparent; }
|
||||
|
||||
h2.sheet-label {
|
||||
border-bottom: 0.15em solid black;
|
||||
text-align: center;
|
||||
margin-left: 3%; }
|
||||
|
||||
input[type="text"], input[type="number"] {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: 2.1rem;
|
||||
padding: 1% 2%;
|
||||
width: 100%; }
|
||||
input[type="text"]:hover, input[type="number"]:hover {
|
||||
background-color: #d8d6d0; }
|
||||
|
||||
input[type='number'] {
|
||||
text-align: center;
|
||||
width: 100% !important; }
|
||||
|
||||
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
|
||||
margin: 0; }
|
||||
|
||||
label {
|
||||
margin-bottom: 0px;
|
||||
padding-right: 0px; }
|
||||
|
||||
select {
|
||||
margin-bottom: 0px;
|
||||
vertical-align: bottom;
|
||||
border: 2px solid #1e1a1a;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
margin-top: 8%;
|
||||
width: 100%; }
|
||||
|
||||
span {
|
||||
font-size: 1.5rem;
|
||||
word-break: break-word; }
|
||||
|
||||
textarea {
|
||||
text-align: left;
|
||||
border-bottom: 0.2em dotted #b9dadf;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
min-height: 50px;
|
||||
line-height: 18px;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
padding: 2px;
|
||||
resize: vertical;
|
||||
vertical-align: top;
|
||||
overflow: scroll;
|
||||
background-color: transparent; }
|
||||
|
||||
.charsheet {
|
||||
width: 850px; }
|
||||
|
||||
div.sheet-background {
|
||||
background-color: rgba(77, 77, 77, 0.0784314); }
|
||||
|
||||
.sheet-border {
|
||||
border: 0.15em solid #4c4c4c; }
|
||||
|
||||
.sheet-bottom-border {
|
||||
border-bottom: 0.2em solid black; }
|
||||
|
||||
.sheet-description {
|
||||
white-space: pre-line; }
|
||||
|
||||
.sheet-eclipse {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
.sheet-font-weight-bold {
|
||||
font-weight: bold; }
|
||||
|
||||
.sheet-grid {
|
||||
display: inline-grid;
|
||||
grid-gap: 0.5%; }
|
||||
|
||||
.sheet-inline-block {
|
||||
display: inline-block; }
|
||||
|
||||
.sheet-text-vertical {
|
||||
transform: rotate(180deg);
|
||||
writing-mode: vertical-lr; }
|
||||
|
||||
.sheet-text-center {
|
||||
text-align: center; }
|
||||
|
||||
div.sheet-2column {
|
||||
grid-template-columns: repeat(2, 1fr); }
|
||||
|
||||
div.sheet-3column {
|
||||
grid-template-columns: repeat(3, 1fr); }
|
||||
|
||||
div.sheet-4column {
|
||||
grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
div.sheet-5column {
|
||||
grid-template-columns: repeat(5, 1fr); }
|
||||
|
||||
div.sheet-6column {
|
||||
grid-template-columns: repeat(6, 1fr); }
|
||||
|
||||
div.sheet-2autocolumn {
|
||||
grid-template-columns: auto 1fr; }
|
||||
|
||||
div.sheet-4autocolumn {
|
||||
grid-template-columns: auto 1fr auto 1fr; }
|
||||
|
||||
div.sheet-3columnbutton {
|
||||
grid-template-columns: auto 1fr 3rem; }
|
||||
|
||||
h1 {
|
||||
color: #1e1a1a;
|
||||
text-transform: capitalize;
|
||||
font-family: serif;
|
||||
font-size: 2.5rem; }
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
text-transform: capitalize;
|
||||
font-variant: small-caps;
|
||||
margin-bottom: 2%; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
text-transform: capitalize;
|
||||
font-style: italic; }
|
||||
|
||||
h4 {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase; }
|
||||
|
||||
label {
|
||||
font-size: 3rem; }
|
||||
|
||||
.sheet-pictos {
|
||||
font-family: "pictos"; }
|
||||
|
||||
.sheet-d20 {
|
||||
font-family: "dicefontd20"; }
|
||||
|
||||
.sheet-text-capitalize {
|
||||
text-transform: capitalize; }
|
||||
|
||||
.sheet-text-uppercase {
|
||||
text-transform: uppercase; }
|
||||
|
||||
.sheet-text-center {
|
||||
text-align: center; }
|
||||
|
||||
.sheet-text-left {
|
||||
text-align: left !important; }
|
||||
|
||||
.sheet-text-right {
|
||||
text-align: right; }
|
||||
|
||||
.sheet-text-primary {
|
||||
color: #1e1a1a; }
|
||||
|
||||
/* GRID
|
||||
============================= */
|
||||
div.sheet-grid {
|
||||
display: inline-grid;
|
||||
grid-column-gap: 1%;
|
||||
grid-row-gap: 0.5%; }
|
||||
|
||||
span.sheet-display {
|
||||
border-bottom: 2px dotted black;
|
||||
padding-top: 3%; }
|
||||
|
||||
input.sheet-toggles {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
z-index: 2; }
|
||||
input.sheet-toggles:checked + span {
|
||||
color: #1e1a1a;
|
||||
margin-left: 5%; }
|
||||
|
||||
/* HEADER
|
||||
============================= */
|
||||
div.sheet-header {
|
||||
margin-top: 2%;
|
||||
border-top: 2px solid #1e1a1a;
|
||||
border-bottom: 2px solid #1e1a1a;
|
||||
text-align: center;
|
||||
background: #b9dadf;
|
||||
/* Old browsers */
|
||||
background: -moz-linear-gradient(top, #b9dadf 0%, #d8d6d0 50%, #b9dadf 100%);
|
||||
/* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, #b9dadf 0%, #d8d6d0 50%, #b9dadf 100%);
|
||||
/* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, #b9dadf 0%, #d8d6d0 50%, #b9dadf 100%);
|
||||
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$light', endColorstr='$light',GradientType=0 );
|
||||
/* IE6-9 */ }
|
||||
|
||||
/* PC
|
||||
============================= */
|
||||
div.sheet-pc {
|
||||
border: 0.8em solid #4c4c4c;
|
||||
background-color: #d8d6d0;
|
||||
padding: 2% 1%;
|
||||
grid-template-columns: 3fr 2fr 0.5fr;
|
||||
grid-row-gap: 1%;
|
||||
-moz-box-shadow: inset 0 0 10px #000000;
|
||||
-webkit-box-shadow: inset 0 0 10px #000000;
|
||||
box-shadow: inset 0 0 10px #000000; }
|
||||
div.sheet-pc h1 {
|
||||
grid-area: 1 / 1 / 1 / 4;
|
||||
border-bottom: 0.5rem solid black; }
|
||||
div.sheet-pc label {
|
||||
border: 1px solid black; }
|
||||
div.sheet-pc div.sheet-row {
|
||||
display: inline-grid;
|
||||
margin-bottom: 5%; }
|
||||
div.sheet-pc div.sheet-skill {
|
||||
padding: 1% 2%;
|
||||
overflow: hidden; }
|
||||
div.sheet-pc div.sheet-training div.sheet-skill,
|
||||
div.sheet-pc div.sheet-library div.sheet-skill {
|
||||
border-left: 0.5rem solid black; }
|
||||
div.sheet-pc div.sheet-hoard {
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-row-gap: 2%;
|
||||
border-bottom: 2px solid black;
|
||||
padding-bottom: 5%; }
|
||||
div.sheet-pc div.sheet-hoard h2 {
|
||||
grid-area: 1 / 1 / 1 / 11; }
|
||||
div.sheet-pc div.sheet-hoard label {
|
||||
border: none; }
|
||||
div.sheet-pc div.sheet-household textarea {
|
||||
border-left: 0.5rem solid black; }
|
||||
div.sheet-pc div.sheet-equipment {
|
||||
border-bottom: 2px solid black; }
|
||||
div.sheet-pc div.sheet-equipment div.sheet-backpack,
|
||||
div.sheet-pc div.sheet-equipment div.sheet-combat {
|
||||
grid-column-gap: 1%; }
|
||||
div.sheet-pc div.sheet-equipment div.sheet-repeating-container {
|
||||
grid-column: 1 / 3; }
|
||||
div.sheet-pc div.sheet-equipment div.sheet-armor,
|
||||
div.sheet-pc div.sheet-equipment div.sheet-backpack {
|
||||
grid-template-columns: 80% 1fr; }
|
||||
div.sheet-pc div.sheet-equipment div.sheet-armor div.sheet-grid,
|
||||
div.sheet-pc div.sheet-equipment div.sheet-backpack div.sheet-grid {
|
||||
grid-template-columns: 80% 1fr; }
|
||||
div.sheet-pc div.sheet-equipment div.sheet-combat {
|
||||
grid-template-columns: 80% 1fr; }
|
||||
div.sheet-pc div.sheet-equipment div.sheet-combat label:first-child {
|
||||
border-left: 0.5rem solid black; }
|
||||
div.sheet-pc div.sheet-column:not(:last-child) {
|
||||
border-right: 0.5rem solid black;
|
||||
padding-right: 2%; }
|
||||
div.sheet-pc div.sheet-squares {
|
||||
text-align: center;
|
||||
display: inline-grid;
|
||||
align-items: start; }
|
||||
div.sheet-pc div.sheet-squares label {
|
||||
border: 1px solid black;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: auto;
|
||||
margin-bottom: 5%;
|
||||
display: grid;
|
||||
align-items: center; }
|
||||
div.sheet-pc div.sheet-squares input {
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
div.sheet-pc div.sheet-gold input,
|
||||
div.sheet-pc div.sheet-burdens input {
|
||||
text-align: center; }
|
||||
div.sheet-pc div.sheet-burdens label {
|
||||
border-left: 0.5rem solid black; }
|
||||
div.sheet-pc div.sheet-ruin {
|
||||
transition: all 2s; }
|
||||
div.sheet-pc div.sheet-ruin label {
|
||||
position: relative; }
|
||||
div.sheet-pc div.sheet-ruin div.sheet-slash {
|
||||
opacity: 0; }
|
||||
div.sheet-pc div.sheet-ruin input[type='checkbox'] {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
position: absolute; }
|
||||
div.sheet-pc div.sheet-ruin input[type='checkbox']:checked + div.sheet-slash {
|
||||
background-color: black;
|
||||
height: 5px;
|
||||
opacity: 1;
|
||||
transform: skewY(-44deg); }
|
||||
div.sheet-pc div.sheet-ruin div.sheet-text-center {
|
||||
position: absolute; }
|
||||
|
||||
/* REPEATING SECTIONS
|
||||
============================= */
|
||||
div.sheet-repeating-container {
|
||||
margin-top: 2%; }
|
||||
div.sheet-repeating-container button {
|
||||
font-variant: none;
|
||||
width: fit-content;
|
||||
font-size: 1.5rem;
|
||||
padding: 1% 2%; }
|
||||
div.sheet-repeating-container button[type='roll'] {
|
||||
width: 100%; }
|
||||
div.sheet-repeating-container textarea {
|
||||
margin-top: 2%; }
|
||||
div.sheet-repeating-container div.sheet-skill {
|
||||
border: 1px solid black; }
|
||||
div.sheet-repeating-container .repcontrol {
|
||||
margin-top: 5%; }
|
||||
div.sheet-repeating-container .repcontrol_del {
|
||||
font-family: "pictos";
|
||||
position: relative; }
|
||||
div.sheet-repeating-container .repitem {
|
||||
margin-bottom: 2%; }
|
||||
div.sheet-repeating-container div.sheet-descriptor {
|
||||
grid-template-columns: 1fr repeat(2, 1.5rem);
|
||||
align-items: center;
|
||||
justify-items: center; }
|
||||
div.sheet-repeating-container div.sheet-descriptor div.sheet-collapse {
|
||||
padding-left: 5%; }
|
||||
div.sheet-repeating-container div.sheet-descriptor input[name='attr_collapse'] + span,
|
||||
div.sheet-repeating-container div.sheet-descriptor input[name='attr_settings'] + span {
|
||||
font-size: 1.5rem; }
|
||||
div.sheet-repeating-container div.sheet-descriptor input[name='attr_collapse'],
|
||||
div.sheet-repeating-container div.sheet-descriptor input[name='attr_collapse'] + span {
|
||||
grid-area: 1 / 2 / 1 / 2; }
|
||||
div.sheet-repeating-container div.sheet-descriptor input[name='attr_settings'],
|
||||
div.sheet-repeating-container div.sheet-descriptor input[name='attr_settings'] + span {
|
||||
grid-area: 1 / 3 / 1 / 3; }
|
||||
div.sheet-repeating-container div.sheet-descriptor div.sheet-collapse,
|
||||
div.sheet-repeating-container div.sheet-descriptor div.sheet-settings {
|
||||
grid-column: 1 / 4; }
|
||||
div.sheet-repeating-container div.sheet-descriptor div.sheet-settings {
|
||||
grid-template-columns: 1fr;
|
||||
background-color: rgba(76, 76, 76, 0.2);
|
||||
padding: 3% 5%;
|
||||
margin-top: 5%;
|
||||
position: relative; }
|
||||
div.sheet-repeating-container div.sheet-descriptor div.sheet-settings::before {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: 50%;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid rgba(76, 76, 76, 0.2); }
|
||||
|
||||
/* SHOW & HIDE SECTIONS
|
||||
============================= */
|
||||
/***** SETTINGS *****/
|
||||
input[name='attr_collapse']:checked ~ div.sheet-collapse,
|
||||
input[name='attr_settings']:checked ~ div.sheet-settings {
|
||||
display: block; }
|
||||
|
||||
input.sheet-type:not([value="npc"]) ~ div.sheet-npc, input[name='attr_sheet_type']:not([value='core']) ~ div.sheet-pc div.sheet-info,
|
||||
input[name='attr_sheet_type']:not([value='core']) ~ div.sheet-pc div.sheet-skill-traits,
|
||||
input[name='attr_sheet_type']:not([value='arms']) ~ div.sheet-pc div.sheet-arms,
|
||||
input[name='attr_sheet_type']:not([value='advancement']) ~ div.sheet-pc div.sheet-advancement,
|
||||
input[name='attr_sheet_type'][value='advancement'] ~ div.sheet-pc div.sheet-characteristics, div.sheet-collapse,
|
||||
.sheet-settings {
|
||||
display: none; }
|
||||
|
||||
/* SWITCH
|
||||
============================= */
|
||||
/* SWITCH
|
||||
============================= */
|
||||
.sheet-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
/* Hide default HTML checkbox */ }
|
||||
.sheet-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
|
||||
/* The slider */
|
||||
.sheet-slider {
|
||||
-webkit-transition: .4s;
|
||||
background-color: #ccc;
|
||||
border-radius: 34px;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: .4s; }
|
||||
.sheet-slider:before {
|
||||
-webkit-transition: .4s;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
bottom: 4px;
|
||||
content: "";
|
||||
height: 16px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
transition: .4s;
|
||||
width: 16px; }
|
||||
input:checked + .sheet-slider {
|
||||
background-color: black; }
|
||||
input:checked + .sheet-slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px); }
|
||||
input:focus + .sheet-slider {
|
||||
box-shadow: 0 0 1px black; }
|
||||
|
||||
/* STYLED CHECKBOXES
|
||||
============================= */
|
||||
label.sheet-styled-checkbox input, label.sheet-styled-checkbox span {
|
||||
grid-area: 1 / 1 / 1 / 1;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
position: relative;
|
||||
left: 20%; }
|
||||
|
||||
label.sheet-styled-checkbox span {
|
||||
border: 2px solid #1e1a1a;
|
||||
display: inline-block;
|
||||
top: -20%;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
line-height: 90%; }
|
||||
|
||||
label.sheet-styled-checkbox input {
|
||||
opacity: 0;
|
||||
top: 20%;
|
||||
z-index: 2; }
|
||||
label.sheet-styled-checkbox input[type="checkbox"]:checked + span {
|
||||
background-color: #1e1a1a;
|
||||
color: #fff; }
|
||||
|
||||
/* FOOTER
|
||||
============================= */
|
||||
.sheet-footer {
|
||||
display: block;
|
||||
text-align: center; }
|
||||
.sheet-footer span[name="attr_version"]::after {
|
||||
content: '.';
|
||||
margin-right: 0.2rem; }
|
||||
.sheet-footer span {
|
||||
font-size: 1rem; }
|
||||
.sheet-footer img {
|
||||
margin-left: 2%;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem; }
|
||||
|
||||
/* ROLL TEMPLATE STYLE
|
||||
============================= */
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container {
|
||||
border: 2px solid black;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: inset 0px 0px 3px 1px #1e1a1a;
|
||||
text-align: center;
|
||||
font-family: 'fantasy';
|
||||
/* DICE ROLL STYLES
|
||||
----------------------------- */ }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail,
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit,
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.importantroll {
|
||||
border: none; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullfail, .sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult.fullcrit {
|
||||
color: #1e1a1a; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container .inlinerollresult {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
padding: unset; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-header {
|
||||
background-color: #1e1a1a;
|
||||
border-bottom: 2px solid black;
|
||||
color: whitesmoke;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-top: -2px;
|
||||
padding: 5% 2%;
|
||||
text-transform: capitalize;
|
||||
-moz-box-shadow: inset 0 0 10px #000000;
|
||||
-webkit-box-shadow: inset 0 0 10px #000000;
|
||||
box-shadow: inset 0 0 10px #000000; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body {
|
||||
background-color: black;
|
||||
color: whitesmoke; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row:nth-child(2n+0) {
|
||||
background-color: #b9dadf; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-inlinerollresult {
|
||||
color: whitesmoke;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
cursor: help;
|
||||
padding: 0 3px 0 3px;
|
||||
font-weight: bold; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-percent, .sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-row span.sheet-template-desc {
|
||||
color: whitesmoke;
|
||||
font-size: 1rem; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-damage {
|
||||
background-color: #fff;
|
||||
padding: 3% 2%; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col {
|
||||
padding: 5%; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col:nth-of-type(2) {
|
||||
border-left: 2px solid black; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col span {
|
||||
display: block; }
|
||||
.sheet-rolltemplate-rolls div.sheet-template-container div.sheet-template-body div.sheet-template-roll div.sheet-template-col span:last-child {
|
||||
margin-top: 5%; }
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "sheettemplate",
|
||||
"version": "1.0.0",
|
||||
"description": "Character sheet development in VS Code",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"pug": "^2.0.4",
|
||||
"node-sass": "^4.5.3",
|
||||
"npm-run-all": "^4.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "npm-run-all --parallel compile:sass compile:pug",
|
||||
"compile:sass": "node-sass scss.scss css.css -w",
|
||||
"compile:pug": "pug pug.pug pug.html -w",
|
||||
"manual:pug": "pug pug.pug pug.html"
|
||||
},
|
||||
"keywords": [
|
||||
"Roll20"
|
||||
],
|
||||
"author": "Cassie Levett",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Roll20/roll20-character-sheets/issues"
|
||||
},
|
||||
"homepage": "http://emeraldproductions.info/"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
File diff suppressed because one or more lines are too long
@@ -0,0 +1,22 @@
|
||||
input(name='attr_version' type='hidden' value='1')
|
||||
|
||||
//- VARIABLES
|
||||
=============================
|
||||
include src/pug/abstracts/variables.pug
|
||||
|
||||
//- INCLUDES
|
||||
=============================
|
||||
include src/pug/abstracts/mixins.pug
|
||||
|
||||
//-PC SHEET
|
||||
=============================
|
||||
include src/pug/pages/pc.pug
|
||||
|
||||
//-FOOTER
|
||||
=============================
|
||||
include src/pug/layout/footer.pug
|
||||
|
||||
//-ROLL TEMPLATE
|
||||
=============================
|
||||
//- include src/pug/components/rolltemplates.pug
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
// COLORS & OTHER VARIABLES
|
||||
// ============================= *
|
||||
@import 'src/scss/abstracts/variables';
|
||||
|
||||
/* GLOBAL SETTINGS
|
||||
============================= */
|
||||
@import 'src/scss/base/base';
|
||||
@import 'src/scss/base/utilities';
|
||||
@import 'src/scss/base/typography';
|
||||
|
||||
/* GRID
|
||||
============================= */
|
||||
@import 'src/scss/layout/grid';
|
||||
|
||||
span.sheet-display {
|
||||
border-bottom: 2px dotted $dark;
|
||||
padding-top: 3%;
|
||||
}
|
||||
|
||||
input.sheet-toggles {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
&:checked + span {
|
||||
color: $primary;
|
||||
margin-left: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
/* HEADER
|
||||
============================= */
|
||||
@import 'src/scss/layout/header';
|
||||
|
||||
/* PC
|
||||
============================= */
|
||||
@import 'src/scss/pages/pc';
|
||||
|
||||
/* REPEATING SECTIONS
|
||||
============================= */
|
||||
@import 'src/scss/components/repeating_container';
|
||||
|
||||
/* SHOW & HIDE SECTIONS
|
||||
============================= */
|
||||
@import 'src/scss/layout/hide';
|
||||
|
||||
/* SWITCH
|
||||
============================= */
|
||||
@import 'src/scss/components/switch';
|
||||
|
||||
/* STYLED CHECKBOXES
|
||||
============================= */
|
||||
@import 'src/scss/components/checkbox';
|
||||
|
||||
/* FOOTER
|
||||
============================= */
|
||||
@import 'src/scss/layout/footer';
|
||||
|
||||
/* ROLL TEMPLATE STYLE
|
||||
============================= */
|
||||
@import 'src/scss/components/rolltemplate';
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"html": "pug.html",
|
||||
"css": "css.css",
|
||||
"authors": "Cassie Levett",
|
||||
"roll20userid": "557736",
|
||||
"preview": "preview.png",
|
||||
"instructions": "Dark Trophy basic character sheet."
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 370 KiB |
@@ -0,0 +1,58 @@
|
||||
mixin textInput(name)
|
||||
- const attrName = name.replace(/ /g, '_');
|
||||
label(data-i18n-title=`enter ${name}` title=`enter ${name}`)
|
||||
input(data-i18n-placeholder=name name=`attr_${attrName}` placeholder=name title=`@{${attrName}}` type='text' value='')
|
||||
|
||||
mixin numberInput(name)
|
||||
- const attrName = name.replace(/ /g, '_');
|
||||
label(data-i18n-title=`enter ${name}` title=`enter ${name}`)
|
||||
input(name=`attr_${attrName}` title=`@{${attrName}}` type='number' value='')
|
||||
|
||||
mixin checkboxInput(name)
|
||||
- const attrName = name.replace(/ /g, '_');
|
||||
label.styled-checkbox.grid(data-i18n-title=`toggle ${name}` title=`enter ${name}`)
|
||||
input(name=`attr_${attrName}` title=`@{${attrName}}` type='checkbox' value=name)
|
||||
span.pictos 3
|
||||
|
||||
mixin checkboxSymbol(name, symbol)
|
||||
- const attrName = name.replace(/ /g, '_');
|
||||
input.toggles.text-center(name=`attr_${attrName}` title=`@{${attrName}}` type='checkbox' value=name)
|
||||
span.toggles.text-center.pictos #{symbol}
|
||||
|
||||
mixin textarea(name)
|
||||
textarea(name=`attr_${name}` placeholder=name)
|
||||
|
||||
mixin rollButton(name)
|
||||
- const attrName = name.replace(/ /g, '-');
|
||||
button.text-capitalize(data-i18n=name name=`roll_${attrName}` type='roll' value=`&{template:rolls} {{header=^{${name}}}} {{dice=[[1d20[Roll]]]}}`)
|
||||
|
||||
mixin repeatingText(name)
|
||||
- const attrName = name.replace(/ /g, '-');
|
||||
fieldset(class=`repeating_${attrName}`)
|
||||
.rowx.grid.descriptor
|
||||
.skill
|
||||
span(name='attr_name')
|
||||
+checkboxSymbol('collapse', 'i')
|
||||
+checkboxSymbol('settings', 'p')
|
||||
.rowx.collapse
|
||||
span.collapse.description(name='attr_description')
|
||||
.rowx.settings
|
||||
+textInput(`name`)
|
||||
+textarea('description')
|
||||
|
||||
mixin repeatingBackpack()
|
||||
fieldset(class=`repeating_backpack`)
|
||||
.rowx.grid
|
||||
+textInput(`name`)
|
||||
+textInput(`uses`)
|
||||
|
||||
mixin repeatingArmor()
|
||||
fieldset(class=`repeating_armor`)
|
||||
.rowx.grid
|
||||
+textInput(`name`)
|
||||
+textInput(`marked`)
|
||||
|
||||
mixin repeatingWeapon()
|
||||
fieldset(class=`repeating_weapon`)
|
||||
.rowx.grid
|
||||
+textInput(`name`)
|
||||
@@ -0,0 +1,2 @@
|
||||
- const abilities = ['strength', 'dexterity', 'intelligence', 'wisdom', 'charisma'];
|
||||
- const skillList = ['acrobatics','athletics','awareness', 'charm', 'command', 'commerce','intimidate', 'logic'];
|
||||
@@ -0,0 +1,16 @@
|
||||
.rolltemplates
|
||||
rolltemplate.sheet-rolltemplate-rolls
|
||||
.sheet-template-container
|
||||
// - Display a header on the template -
|
||||
.sheet-template-header
|
||||
| {{#header}}{{header}}{{/header}}
|
||||
// - Display the dice roll in the template -
|
||||
.sheet-template-body
|
||||
| {{#dice}}
|
||||
.sheet-template-rowx {{dice}}
|
||||
| {{/dice}}
|
||||
// - Display a description. This is great for text included with a roll -
|
||||
| {{#desc}}
|
||||
.sheet-template-rowx
|
||||
span.sheet-template-desc
|
||||
| {{/desc}}
|
||||
@@ -0,0 +1,5 @@
|
||||
.footer
|
||||
span Version
|
||||
span(name='attr_version')
|
||||
span Original template created by Emerald Productions, LLC
|
||||
img(src="https://raw.githubusercontent.com/clevett/roll20-SheetTemplate/master/src/imgs/EProd_Emerald_Gloss.png", alt="Emerald Productions logo of an E")
|
||||
@@ -0,0 +1,101 @@
|
||||
.pc.container.grid
|
||||
h1.text-center(data-i18n='trophy gold')
|
||||
.column
|
||||
.row.grid.2column
|
||||
.col
|
||||
h2(data-i18n='name')
|
||||
+textInput('character name')
|
||||
.col
|
||||
h2(data-i18n='player')
|
||||
+textInput('player')
|
||||
.row.grid.2column
|
||||
.col
|
||||
h2(data-i18n='occupation')
|
||||
+textInput('occupation')
|
||||
span(data-i18n='occupation description')
|
||||
.col.repeating-container
|
||||
h3(data-i18n='skills')
|
||||
+repeatingText('occupation skills')
|
||||
.row.grid.2column
|
||||
.col
|
||||
h2(data-i18n='background')
|
||||
+textInput('background')
|
||||
.col
|
||||
h3(data-i18n='skill')
|
||||
+textInput('background skill')
|
||||
.row.grid.2column.training
|
||||
.col
|
||||
h2(data-i18n='training')
|
||||
span(data-i18n='training description')
|
||||
.col.repeating-container
|
||||
h3(data-i18n='skills')
|
||||
+repeatingText('training skills')
|
||||
.row.grid.2column.household
|
||||
.col
|
||||
h2(data-i18n='household')
|
||||
span(data-i18n='training description')
|
||||
.col
|
||||
h3(data-i18n='household name & description')
|
||||
+textarea('household description')
|
||||
.row.grid.2column
|
||||
.col
|
||||
h2(data-i18n='rituals')
|
||||
span(data-i18n='rituals description')
|
||||
.col.repeating-container
|
||||
h3(data-i18n='rituals')
|
||||
+repeatingText('rituals')
|
||||
.row.grid.2column.library
|
||||
.col
|
||||
h2(data-i18n='library')
|
||||
span(data-i18n='library description')
|
||||
.col.repeating-container
|
||||
h3(data-i18n='rituals')
|
||||
+repeatingText('library rituals')
|
||||
|
||||
.column
|
||||
.row
|
||||
h2(data-i18n='drive')
|
||||
+textarea('drive')
|
||||
.row.grid.hoard
|
||||
h2(data-i18n='hoard')
|
||||
-let hoardChecks = 1
|
||||
while hoardChecks < 50
|
||||
+checkboxInput(`hoard ${hoardChecks++}`)
|
||||
.row.equipment
|
||||
h2(data-i18n='equipment')
|
||||
.row.backpack.grid.backpack
|
||||
h3(data-i18n='backpack')
|
||||
h4(data-i18n='uses')
|
||||
.repeating-container
|
||||
+repeatingBackpack
|
||||
.row.combat.grid
|
||||
h3(data-i18n='combat')
|
||||
h4(data-i18n='marked')
|
||||
.repeating-container.armor
|
||||
+repeatingArmor()
|
||||
.repeating-container
|
||||
+repeatingWeapon('weapon')
|
||||
.row
|
||||
h3(data-i18n='found equipment')
|
||||
+textarea('found equipment')
|
||||
.row.conditions.repeating-container
|
||||
h2(data-i18n='conditions')
|
||||
+repeatingText('conditions')
|
||||
|
||||
.column.squares
|
||||
.row.burdens
|
||||
h2(data-i18n='burdens')
|
||||
+textInput(`burdens`)
|
||||
.row.gold
|
||||
h2(data-i18n='gold')
|
||||
+textInput(`gold`)
|
||||
.row.ruin
|
||||
h2(data-i18n='ruin')
|
||||
-let ruinBoxes = 1
|
||||
while ruinBoxes < 7
|
||||
label(data-i18n-title=`ruin box ${ruinBoxes}` title=`ruin box ${ruinBoxes}`)
|
||||
input(name=`attr_ruin_${ruinBoxes}` title=`@{ruin_${ruinBoxes}}` type='checkbox' value=ruinBoxes)
|
||||
.slash
|
||||
.text-center #{ruinBoxes}
|
||||
- ruinBoxes++
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
$primary: #1e1a1a;
|
||||
$secondary: #d8d6d0;
|
||||
$light: #b9dadf;
|
||||
$dark: hsl(0, 6%, 0%);
|
||||
$dark-font: #000;
|
||||
$gray: #4c4c4c;
|
||||
$transparentGray: hsla(0, 0%, 30%, 0.0784313725490196);
|
||||
$white: hsl(0, 0%, 96%);
|
||||
|
||||
//Box Shadows
|
||||
$box-shadow: inset 0px 0px 3px 1px rgba($dark, .3);
|
||||
$box-shadow-outset: -1px -1px 1px 1px rgba($dark, .5);
|
||||
|
||||
//Transition buttons
|
||||
$button-scale-small: scale(1.1);
|
||||
$button-scale-medium: scale(1.3);
|
||||
|
||||
//Borders
|
||||
$border-thick-left: 0.5rem solid $dark;
|
||||
$border-thin: 1px solid $dark;
|
||||
@@ -0,0 +1,128 @@
|
||||
/* GLOBAL SETTINGS
|
||||
============================= */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 62.5%; //1rem = 10px
|
||||
}
|
||||
|
||||
button {
|
||||
text-overflow: ellipsis;
|
||||
font-family: serif;
|
||||
font-variant: small-caps;
|
||||
transition: all .2s;
|
||||
box-shadow: $box-shadow-outset;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
background: none;
|
||||
background-color: $primary !important;
|
||||
color: #fff;
|
||||
transform: $button-scale-small;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&[type="roll"],
|
||||
&[type="action"] {
|
||||
background-color: $white;
|
||||
border: {
|
||||
bottom : 1px solid #666;
|
||||
bottom-right-radius: 1px;
|
||||
color : hsl(0, 0%, 70%);
|
||||
radius : 0.25rem;
|
||||
right : 0.02rem solid hsl(0, 0%, 20%);
|
||||
style : outset;
|
||||
}
|
||||
font-size: 2rem !important;
|
||||
margin: 0.25rem !important;
|
||||
padding: 0.2rem 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
h2 {
|
||||
&.sheet-label {
|
||||
border-bottom: 0.15em solid $dark;
|
||||
text-align: center;
|
||||
margin-left: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="text"],
|
||||
&[type="number"] {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
height: 2.1rem;
|
||||
padding: 1% 2%;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
&[type='number'] {
|
||||
text-align: center;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 0px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: 0px;
|
||||
vertical-align: bottom;
|
||||
border: 2px solid $primary;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
margin-top: 8%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1.5rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
textarea {
|
||||
text-align: left;
|
||||
border-bottom : 0.2em dotted $light;
|
||||
font-size : 12px;
|
||||
font-weight : normal;
|
||||
min-height : 50px;
|
||||
line-height : 18px;
|
||||
overflow : hidden;
|
||||
overflow-wrap : break-word;
|
||||
padding : 2px;
|
||||
resize : vertical;
|
||||
vertical-align: top;
|
||||
overflow: scroll;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.charsheet {
|
||||
width: 850px;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
h1 {
|
||||
color: $primary;
|
||||
text-transform: capitalize;
|
||||
font-family: serif;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
text-transform: capitalize;
|
||||
font-variant: small-caps;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2rem;
|
||||
text-transform: capitalize;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.sheet-pictos {
|
||||
font-family: "pictos";
|
||||
}
|
||||
|
||||
.sheet-d20 {
|
||||
font-family: "dicefontd20";
|
||||
}
|
||||
|
||||
.sheet-text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.sheet-text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sheet-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sheet-text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.sheet-text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.sheet-text-primary {
|
||||
color: $primary;
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
|
||||
div.sheet-background {
|
||||
background-color: $transparentGray;
|
||||
}
|
||||
|
||||
.sheet-border {
|
||||
border: 0.15em solid $gray;
|
||||
}
|
||||
|
||||
.sheet-bottom-border {
|
||||
border-bottom: 0.2em solid $dark;
|
||||
}
|
||||
|
||||
.sheet-description {
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.sheet-eclipse {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sheet-font-weight-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sheet-grid {
|
||||
display: inline-grid;
|
||||
grid-gap: 0.5%;
|
||||
}
|
||||
|
||||
.sheet-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sheet-text-vertical {
|
||||
transform: rotate(180deg);
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.sheet-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.sheet-2column {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
div.sheet-3column {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
div.sheet-4column {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
div.sheet-5column {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
div.sheet-6column {
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
}
|
||||
|
||||
div.sheet-2autocolumn {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
div.sheet-4autocolumn {
|
||||
grid-template-columns: auto 1fr auto 1fr;
|
||||
}
|
||||
|
||||
div.sheet-3columnbutton {
|
||||
grid-template-columns: auto 1fr 3rem;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
label.sheet-styled-checkbox {
|
||||
input, span {
|
||||
grid-area: 1 / 1 / 1 / 1;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
position: relative;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
span {
|
||||
border: 2px solid $primary;
|
||||
display: inline-block;
|
||||
top: -20%;
|
||||
color: transparent;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
line-height: 90%;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
top: 20%;
|
||||
z-index: 2;
|
||||
|
||||
&[type="checkbox"]:checked + span {
|
||||
background-color: $primary;
|
||||
color : #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
div.sheet-repeating-container {
|
||||
margin-top: 2%;
|
||||
|
||||
button {
|
||||
font-variant: none;
|
||||
width: fit-content;
|
||||
font-size: 1.5rem;
|
||||
padding: 1% 2%;
|
||||
|
||||
&[type='roll'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
div.sheet-skill {
|
||||
border: 1px solid $dark;
|
||||
}
|
||||
|
||||
.repcontrol {
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.repcontrol_del {
|
||||
font-family: "pictos";
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.repitem {
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
div.sheet-descriptor {
|
||||
grid-template-columns: 1fr repeat(2, 1.5rem);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
div.sheet-collapse {
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
input[name='attr_collapse'] + span,
|
||||
input[name='attr_settings'] + span {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
input[name='attr_collapse'],
|
||||
input[name='attr_collapse'] + span {
|
||||
grid-area: 1 / 2 / 1 / 2;
|
||||
}
|
||||
|
||||
input[name='attr_settings'],
|
||||
input[name='attr_settings'] + span {
|
||||
grid-area: 1 / 3 / 1 / 3;
|
||||
}
|
||||
|
||||
div.sheet-collapse,
|
||||
div.sheet-settings {
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
|
||||
div.sheet-settings {
|
||||
grid-template-columns: 1fr;
|
||||
background-color: rgba($gray, .2);
|
||||
padding: 3% 5%;
|
||||
margin-top: 5%;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
left: 50%;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
|
||||
border-bottom: 10px solid rgba($gray, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
.sheet-rolltemplate-rolls {
|
||||
div.sheet-template-container {
|
||||
border: 2px solid $dark;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: inset 0px 0px 3px 1px $primary;
|
||||
text-align: center;
|
||||
font-family: 'fantasy';
|
||||
|
||||
/* DICE ROLL STYLES
|
||||
----------------------------- */
|
||||
.inlinerollresult.fullfail,
|
||||
.inlinerollresult.fullcrit,
|
||||
.inlinerollresult.importantroll {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.inlinerollresult.fullfail, .inlinerollresult.fullcrit {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.inlinerollresult {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
|
||||
div.sheet-template-header {
|
||||
background-color: $primary;
|
||||
border-bottom: 2px solid $dark;
|
||||
color: $white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-top: -2px;
|
||||
padding: 5% 2%;
|
||||
text-transform: capitalize;
|
||||
-moz-box-shadow: inset 0 0 10px #000000;
|
||||
-webkit-box-shadow: inset 0 0 10px #000000;
|
||||
box-shadow: inset 0 0 10px #000000;
|
||||
}
|
||||
|
||||
div.sheet-template-body {
|
||||
background-color: $dark;
|
||||
color: $white;
|
||||
|
||||
div.sheet-template-row {
|
||||
&:nth-child(2n+0) { background-color: $light; }
|
||||
|
||||
span {
|
||||
&.sheet-inlinerollresult {
|
||||
color: $white;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
cursor: help;
|
||||
padding: 0 3px 0 3px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.sheet-percent,
|
||||
&.sheet-template-desc {
|
||||
color: $white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-template-damage {
|
||||
background-color: #fff;
|
||||
padding: 3% 2%;
|
||||
}
|
||||
|
||||
div.sheet-template-roll {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
width: 100%;
|
||||
|
||||
div.sheet-template-col {
|
||||
padding: 5%;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
border-left: 2px solid $dark;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
|
||||
&:last-child {
|
||||
margin-top: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/* SWITCH
|
||||
============================= */
|
||||
.sheet-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.sheet-slider {
|
||||
-webkit-transition: .4s;
|
||||
background-color: #ccc;
|
||||
border-radius: 34px;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: .4s;
|
||||
|
||||
&:before {
|
||||
-webkit-transition: .4s;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
bottom: 4px;
|
||||
content: "";
|
||||
height: 16px;
|
||||
left: 4px;
|
||||
position: absolute;
|
||||
transition: .4s;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
input:checked + & {
|
||||
background-color: black;
|
||||
|
||||
&:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
input:focus + & {
|
||||
box-shadow: 0 0 1px black;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.sheet-footer {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
span[name="attr_version"] {
|
||||
&::after {
|
||||
content: '.';
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-left: 2%;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
div.sheet-grid {
|
||||
display: inline-grid;
|
||||
grid-column-gap: 1%;
|
||||
grid-row-gap: 0.5%;
|
||||
}
|
||||
|
||||
%gridRowCol {
|
||||
display: inline-grid;
|
||||
overflow: hidden;
|
||||
grid-auto-rows: min-content;
|
||||
grid-column-gap: 1%;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
div.sheet-header {
|
||||
margin-top: 2%;
|
||||
border-top: 2px solid $primary;
|
||||
border-bottom: 2px solid $primary;
|
||||
text-align: center;
|
||||
background: $light; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, $light 0%, $secondary 50%, $light 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(top, $light 0%,$secondary 50%,$light 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(to bottom, $light 0%,$secondary 50%,$light 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$light', endColorstr='$light',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/***** SETTINGS *****/
|
||||
%display-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
%display-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
input.sheet-type:not([value="npc"]) ~ div.sheet-npc {
|
||||
@extend %display-none;
|
||||
}
|
||||
|
||||
input[name='attr_sheet_type']:not([value='core']) ~ div.sheet-pc div.sheet-info,
|
||||
input[name='attr_sheet_type']:not([value='core']) ~ div.sheet-pc div.sheet-skill-traits,
|
||||
input[name='attr_sheet_type']:not([value='arms']) ~ div.sheet-pc div.sheet-arms,
|
||||
input[name='attr_sheet_type']:not([value='advancement']) ~ div.sheet-pc div.sheet-advancement,
|
||||
input[name='attr_sheet_type'][value='advancement'] ~ div.sheet-pc div.sheet-characteristics {
|
||||
@extend %display-none;
|
||||
}
|
||||
|
||||
div.sheet-collapse,
|
||||
.sheet-settings {
|
||||
@extend %display-none;
|
||||
}
|
||||
|
||||
input[name='attr_collapse']:checked ~ div.sheet-collapse,
|
||||
input[name='attr_settings']:checked ~ div.sheet-settings {
|
||||
@extend %display-block;
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
div.sheet-pc {
|
||||
border: 0.8em solid $gray;
|
||||
background-color: $secondary;
|
||||
padding: 2% 1%;
|
||||
grid-template-columns: 3fr 2fr 0.5fr;
|
||||
grid-row-gap: 1%;
|
||||
|
||||
-moz-box-shadow: inset 0 0 10px #000000;
|
||||
-webkit-box-shadow: inset 0 0 10px #000000;
|
||||
box-shadow: inset 0 0 10px #000000;
|
||||
|
||||
h1 {
|
||||
grid-area: 1 / 1 / 1 / 4;
|
||||
border-bottom: $border-thick-left;
|
||||
}
|
||||
|
||||
label {
|
||||
border: 1px solid $dark;
|
||||
}
|
||||
|
||||
div.sheet-row {
|
||||
display: inline-grid;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
div.sheet-skill {
|
||||
padding: 1% 2%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.sheet-training,
|
||||
div.sheet-library {
|
||||
div.sheet-skill {
|
||||
border-left: $border-thick-left;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.sheet-hoard {
|
||||
grid-template-columns: repeat(10, 1fr);
|
||||
grid-row-gap: 2%;
|
||||
border-bottom: 2px solid $dark;
|
||||
padding-bottom: 5%;
|
||||
|
||||
h2 {
|
||||
grid-area: 1 / 1 / 1 / 11;
|
||||
}
|
||||
|
||||
label {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-household {
|
||||
textarea {
|
||||
border-left: $border-thick-left;
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-equipment {
|
||||
border-bottom: 2px solid $dark;
|
||||
|
||||
div.sheet-backpack,
|
||||
div.sheet-combat {
|
||||
grid-column-gap: 1%;
|
||||
}
|
||||
|
||||
div.sheet-repeating-container {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
div.sheet-armor,
|
||||
div.sheet-backpack {
|
||||
grid-template-columns: 80% 1fr;
|
||||
|
||||
div.sheet-grid {
|
||||
grid-template-columns: 80% 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-combat {
|
||||
grid-template-columns: 80% 1fr;
|
||||
|
||||
label:first-child {
|
||||
border-left: $border-thick-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-column:not(:last-child) {
|
||||
border-right: $border-thick-left;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
div.sheet-squares {
|
||||
text-align: center;
|
||||
display: inline-grid;
|
||||
align-items: start;
|
||||
|
||||
label {
|
||||
border: $border-thin;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: auto;
|
||||
margin-bottom: 5%;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-gold,
|
||||
div.sheet-burdens {
|
||||
input {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-burdens {
|
||||
label {
|
||||
border-left: $border-thick-left;
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-ruin {
|
||||
transition: all 2s;
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.sheet-slash {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
||||
&:checked + div.sheet-slash {
|
||||
background-color: $dark;
|
||||
height: 5px;
|
||||
opacity: 1;
|
||||
transform: skewY(-44deg);
|
||||
}
|
||||
}
|
||||
|
||||
div.sheet-text-center {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"trophy gold" :"trophy gold"
|
||||
,"name" :"name"
|
||||
,"player" :"player"
|
||||
,"occupation" :"occupation"
|
||||
,"skills":"skills"
|
||||
,"skill":"skill"
|
||||
,"occupation description":"Your Occupation is the role you serve in the party now. Your Background is what you used to do or be before you entered this life of treasure-hunting"
|
||||
,"background" :"background"
|
||||
,"training" :"training"
|
||||
,"training description" :"When you make it safely back to town at the end of an incursion, you may acquire the services of a mentor who will train you in the use of a new Skill. Each Skill you acquire permanently increases your Burdens by 1."
|
||||
,"characteristics":"characteristics"
|
||||
,"character name": "Afer you survive your frst incursion, you may take out a loan for small private house. It isn’t much, but safely returning to the comforts of home afer an incursion always heals 1 Ruin and all Conditions. Acquiring a Household permanently increases your Burdens by 1."
|
||||
,"household": "household"
|
||||
,"household name & description":"household name & description"
|
||||
,"rituals":"rituals"
|
||||
,"rituals description": "Any treasure-hunter can learn and use Rituals, regardless of Background or Occupation. You can start with up to 3 Rituals, but you must increase your starting Ruin by 1 for each Ritual you know. You can never lower your Ruin below your starting Ruin."
|
||||
,"library description": "You have acquired a few small spellbooks you can study in between incursions to learn new Rituals. Each Ritual you learn permanently increases your Burdens by 1."
|
||||
,"library": "library"
|
||||
,"background skill": "background skill"
|
||||
,"drive":"drive"
|
||||
,"hoard":"hoard"
|
||||
,"equipment":"equipment"
|
||||
,"backpack":"backpack"
|
||||
,"combat":"combat"
|
||||
,"found equipment":"found equipment"
|
||||
,"conditions":"conditions"
|
||||
,"burdens":"burdens"
|
||||
,"gold":"gold"
|
||||
,"ruin":"ruin"
|
||||
,"marked":"marked"
|
||||
,"uses":"uses"
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
input(name='attr_version' type='hidden' value='1')
|
||||
|
||||
//- VARIABLES
|
||||
=============================
|
||||
include src/pug/abstracts/variables.pug
|
||||
|
||||
//- INCLUDES
|
||||
=============================
|
||||
include src/pug/abstracts/mixins.pug
|
||||
|
||||
//-PC SHEET
|
||||
=============================
|
||||
include src/pug/pages/pc.pug
|
||||
|
||||
//-FOOTER
|
||||
=============================
|
||||
include src/pug/layout/footer.pug
|
||||
|
||||
//-ROLL TEMPLATE
|
||||
=============================
|
||||
include src/pug/components/rolltemplates.pug
|
||||
|
||||
//- SCRIPTS
|
||||
script(type="text/worker")
|
||||
include src/js/scripts.js
|
||||
Reference in New Issue
Block a user