Files
roll20-character-sheets/Draw Steel/draw-steel.css
T

2329 lines
61 KiB
CSS

/* Utility Classes */
.grid-span-full {
grid-column-start: 1;
grid-column-end: -1
}
/* Sheet-wide variables */
.charsheet {
/* === COLORS === */
/* Backgrounds */
--color-bg-main: #fff;
--color-bg-section: rgb(234, 234, 234);
--color-bg-subsection: rgb(216, 216, 216);
/* Text */
--color-text-body: #080808;
--color-text-header: rgb(51, 51, 51);
--color-text-accent: rgb(73, 73, 73);
/* Borders & Accents */
--color-border: rgb(102, 102, 102);
--color-accent-steel: rgb(135, 186, 205);
/* Inputs & UI */
--color-input-bg: rgb(248, 248, 248);
--color-input-border: rgb(155, 155, 155);
--color-button-bg: rgb(155, 155, 155);
--color-button-border: rgb(102, 102, 102);
--color-button-hover-bg: var(--color-accent-steel);
--color-button-hover-border: rgb(51, 51, 51);
/* === FONTS === */
--font-family-header: "Georgia", "Times New Roman", serif;
--font-family-body: "Georgia", "Times New Roman", serif;
/* === SIZING & SPACING === */
--border-main: 1px solid var(--color-border);
--border-section: 1px solid var(--color-border);
--border-radius: 5px;
--box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.05), 0 0 4px rgba(0, 0, 0, 0.3);
--sheet-padding: 8px;
--section-gap: 0.5em;
}
/* Dark Mode Sheet-wide variables */
.sheet-darkmode .charsheet {
/* === COLORS === */
/* Backgrounds */
--color-bg-main: rgb(31, 31, 31);
--color-bg-section: rgb(39, 39, 39);
--color-bg-subsection: rgb(51, 51, 51);
/* Text */
--color-text-body: rgb(234, 234, 234);
--color-text-header: rgb(216, 216, 216);
--color-text-accent: rgb(186, 186, 186);
/* Borders & Accents */
--color-border: rgb(102, 102, 102);
--color-accent-steel: rgb(40, 82, 98);
/* Inputs & UI */
--color-input-bg: rgb(30,30,30);
--color-input-border: rgb(102, 102, 102);
--color-button-bg: rgb(102, 102, 102);
--color-button-border: rgb(155, 155, 155);
--color-button-hover-border: rgb(186, 186, 186);
}
/* Roll Template variables */
.sheet-rolltemplate-monsterability .sheet-roll-container,
.sheet-rolltemplate-powerrollability .sheet-roll-container,
.sheet-rolltemplate-ability .sheet-roll-container,
.sheet-rolltemplate-powerroll .sheet-roll-container,
.sheet-rolltemplate-simpleroll .sheet-roll-container {
/* === COLORS === */
/* Backgrounds */
--color-bg-main: #f5f5f5;
--color-bg-section: #e0e0e0;
/* Text */
--color-text-body: #333333;
--color-text-header: #1a1a1a;
--color-text-accent: #666666;
/* Borders & Accents */
--color-border: #999999;
--color-accent-steel: #777777;
/* === FONTS === */
--font-family-header: "Georgia", "Times New Roman", serif;
--font-family-body: "Georgia", "Times New Roman", serif;
/* === SIZING & SPACING === */
--border-main: 1px solid var(--color-border);
--border-section: 1px solid var(--color-border);
--border-radius: 5px;
--sheet-padding: 8px;
}
/* Darkmode Roll Template variables */
.sheet-rolltemplate-darkmode.sheet-rolltemplate-monsterability .sheet-roll-container,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-powerrollability .sheet-roll-container,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ability .sheet-roll-container,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-powerroll .sheet-roll-container,
.sheet-rolltemplate-simpleroll.sheet-rolltemplate-darkmode .sheet-roll-container {
--color-bg-main: #1f1f1f;
--color-bg-section: rgb(59, 64, 69);
/* Text */
--color-text-body: #cccccc;
--color-text-header: #f0f0f0;
--color-text-accent: #999999;
/* Borders & Accents */
--color-border: #666666;
--color-accent-steel: #888888;
}
/* Main Sheet */
.charsheet {
background-color: var(--color-bg-main) ;
color: var(--color-text-body);
font-family: var(--font-family-body);
padding: 1em;
overflow: clip;
min-width: 566px;
}
.sheet-panel {
background-color: var(--color-bg-section);
color: var(--color-text-body);
border: var(--border-main);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: var(--sheet-padding);
margin-bottom: var(--section-gap);
}
.sheet-panel-box {
border: var(--border-section);
border-radius: var(--border-radius);
padding: var(--sheet-padding);
background-color: var(--color-bg-subsection);
}
.sheet-darkmode img[alt="Powered By Draw Steel"] {
filter: invert(100%);
}
.charsheet button[type="action"] {
background-color: var(--color-button-bg);
color: var(--color-text-body);
border: 1px solid var(--color-button-border);
border-radius: var(--border-radius);
font-family: var(--font-family-body);
cursor: pointer;
transition: background-color 0.2s ease;
}
.charsheet button[type="action"]:hover {
background-color: var(--color-button-hover-bg);
border-color: var(--color-button-hover-border);
}
.characterviewer .charsheet label {
display: unset;
margin: unset;
padding: unset;
width: unset;
text-align: unset;
float: unset;
font-size: 1em;
color: var(--color-text-header);
}
.charsheet input {
width: unset;
color: var(--color-text-body);
background-color: var(--color-input-bg);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
}
.charsheet input[type=number] {
text-align: center;
}
.charsheet select {
margin: unset;
width: unset;
color: var(--color-text-body);
background-color: var(--color-input-bg);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
}
.charsheet textarea {
margin: unset;
width: unset;
resize: vertical;
color: var(--color-text-body);
background-color: var(--color-input-bg);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
min-height: 50px;
box-sizing: border-box;
}
.charsheet h1,
.charsheet h2,
.charsheet h3,
.charsheet h4,
.charsheet h5,
.charsheet h6 {
color: var(--color-text-header);
font-family: var(--font-family-header);
}
.charsheet .repcontrol {
margin: var(--sheet-padding);
}
.border-right {
border-right: var(--border-main);
}
/*.charsheet input[type=number].no-spin::-webkit-inner-spin-button,
.charsheet input[type=number].no-spin::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet input[type=number].no-spin {
-moz-appearance: textfield ;
}*/
.charsheet input.input-md {
height: 20px;
font-size: 0.9em;
}
.charsheet input.input-stamina {
height: 20px;
font-size: 0.9em;
width: 100%;
box-sizing: border-box;
min-width: 6em;
}
.charsheet label.sublabel {
height: 16px;
font-size: 0.8em;
font-weight: normal;
color: var(--color-text-accent);
}
.charsheet label.sublabel input {
padding: 0;
font-size: 1em;
}
.charsheet .panel-title {
font-size: 14px;
text-align: center
}
.itemcontrol {
z-index: 1;
}
/* Sheet Options Panel */
.charsheet label.sheet-options-checkbox-label {
font-family: "Pictos";
font-size: 25px;
position: absolute;
color: var(--color-button-bg);
cursor: pointer;
right: 30px;
top: 100px;
font-weight: normal;
}
.charsheet label.sheet-options-checkbox-label:hover {
color: var(--color-accent-steel);
}
.charsheet.has(.sheet-options-checkbox:checked) ~ label.sheet-options-checkbox-label {
color: var(--color-accent-steel);
}
input.sheet-options-checkbox {
display: none;
}
#sheet-options-checkbox:not(:checked) + div.sheet-panel {
display: none;
}
.sheet-options-toggle {
display: grid;
gap: 0.25em;
}
/* Switches between Character and NPC Sheets */
.charsheet input.npc-checkbox:not([value="on"]) ~ .npc-sheet-body,
.charsheet input.npc-checkbox[value="on"] ~ .sheet-body
{
display: none;
}
/* Player Character Sheet */
.sheet-body { /* Sets the minimum width for the player character sheet */
min-width:800px;
}
/* Minimize Panel Icon */
.minimize {
display:none;
}
#stats-minimize-checkbox:checked + label::before,
#biography-minimize-checkbox:checked + label::before,
#skills-languages-minimize-checkbox:checked + label::before,
#features-minimize-checkbox:checked + label::before,
#abilities-minimize-checkbox:checked + label::before,
#inventory-minimize-checkbox:checked + label::before,
#projects-minimize-checkbox:checked + label::before,
#notes-minimize-checkbox:checked + label::before,
#director-screen-minimize-checkbox:checked + label::before,
#director-screen-conditions-minimize-checkbox:checked + label::before,
#director-screen-basics-minimize-checkbox:checked + label::before,
#director-screen-combat-minimize-checkbox:checked + label::before,
#director-screen-movement-minimize-checkbox:checked + label::before,
#director-screen-areas-of-effect-minimize-checkbox:checked + label::before {
content:'&';
}
label[for*='minimize']::before {
display: inline-block;
content:'_';
font-family: 'Pictos';
margin-right: 3px;
}
.minimizable:has(.minimize-control > .minimize:checked) > :not(.minimize-control):not(.minimize-ignore):not(.minimize-show),
.minimizable:has(.minimize-control > .minimize:checked) > .minimize-ignore > :not(.minimize-ignore),
.minimizable:has(.minimize-control > .minimize:not(:checked)) > .minimize-show,
.minimizable-conditions:has(.minimize-control-conditions > .minimize:checked) > :not(.minimize-control-conditions):not(.minimize-ignore):not(.minimize-show),
.minimizable-conditions:has(.minimize-control-conditions > .minimize:checked) > .minimize-ignore > :not(.minimize-ignore),
.minimizable-conditions:has(.minimize-control-conditions > .minimize:not(:checked)) > .minimize-show,
.minimizable-basics:has(.minimize-control-basics > .minimize:checked) > :not(.minimize-control-basics):not(.minimize-ignore):not(.minimize-show),
.minimizable-basics:has(.minimize-control-basics > .minimize:checked) > .minimize-ignore > :not(.minimize-ignore),
.minimizable-basics:has(.minimize-control-basics > .minimize:not(:checked)) > .minimize-show,
.minimizable-combat:has(.minimize-control-combat > .minimize:checked) > :not(.minimize-control-combat):not(.minimize-ignore):not(.minimize-show),
.minimizable-combat:has(.minimize-control-combat > .minimize:checked) > .minimize-ignore > :not(.minimize-ignore),
.minimizable-combat:has(.minimize-control-combat > .minimize:not(:checked)) > .minimize-show,
.minimizable-movement:has(.minimize-control-movement > .minimize:checked) > :not(.minimize-control-movement):not(.minimize-ignore):not(.minimize-show),
.minimizable-movement:has(.minimize-control-movement > .minimize:checked) > .minimize-ignore > :not(.minimize-ignore),
.minimizable-movement:has(.minimize-control-movement > .minimize:not(:checked)) > .minimize-show,
.minimizable-areas-of-effect:has(.minimize-control-areas-of-effect > .minimize:checked) > :not(.minimize-control-areas-of-effect):not(.minimize-ignore):not(.minimize-show),
.minimizable-areas-of-effect:has(.minimize-control-areas-of-effect > .minimize:checked) > .minimize-ignore > :not(.minimize-ignore),
.minimizable-areas-of-effect:has(.minimize-control-areas-of-effect > .minimize:not(:checked)) > .minimize-show {
display: none;
}
/* Sheet Options Panel */
/* Header Panel */
/* -- Header Panel */
.header-panel {
display: flex;
gap: var(--section-gap);
}
.header-panel > * {
flex: 1 1 0;
}
.title {
text-align: center;
text-transform: uppercase;
}
.text-warning {
color: orangered;
}
.profile-panel {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 0.5em;
}
.profile-panel > * {
display: flex;
flex-direction: column;
}
.profile-panel .name-input-group {
grid-column-end: span 2;
}
.progress-panel {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 0.5em;
}
.progress-panel > * {
display: flex;
flex-direction: column;
align-items: center;
}
.progressbox-group {
display: flex;
}
.progressbox-group > input {
display: none;
}
.charsheet .progressbox-group > .progressbox {
display: block;
height: 1.5em;
width: 1.3em;
border: 1px solid var(--color-input-border);
cursor: pointer;
}
.progressbox-group > .progressbox:has(~ input:checked),
.progressbox-group > input:checked + .progressbox {
background-color: var(--color-accent-steel);
}
.victories-input-group {
grid-column-end: span 5;
}
.wealth-input-group, .renown-input-group, .experience-input-group {
grid-column-end: span 2;
}
.stats-panel {
position: sticky;
top: 0;
z-index: 10;
display: grid;
grid-template-columns: repeat(10,76px);
grid-template-rows: auto;
gap: 5px;
}
/*.charsheet .sheet-body .stats-panel input[type=number]::-webkit-inner-spin-button,
.charsheet .sheet-body .stats-panel input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.charsheet .sheet-body .stats-panel input[type=number] {
-moz-appearance: textfield;
}
*/
.stats-panel > .minimize-control {
grid-column: 1 / -1;
}
.stat-dashboard {
display: grid;
grid-template-columns: repeat(10, 76px);
gap: 5px;
grid-column: 1/-1;
justify-items: center;
align-items: end;
}
.hexagon {
--b: 2px;
height: 75px;
aspect-ratio: cos(30deg);
clip-path: polygon(50% 0,-50% 50%,50% 100%,150% 50%,50% 0, 50% var(--b), calc(100% - var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)), calc(100% - var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)), 50% calc(100% - var(--b)), calc(var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)), calc(var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)), 50% var(--b));
background: var(--color-bg-main);
position: absolute;
z-index: -10;
top: 0px;
}
.dashboard-characteristics {
grid-column-start: 1;
grid-column-end: span 5;
display: flex;
gap: 2px;
flex-direction: row;
}
.dashboard-stat-group {
text-align: center;
width: 75px;
position: relative;
display: grid;
justify-items: center;
}
.dashboard-stat-group label:hover {
color: var(--color-accent-steel);
}
.charsheet .sheet-body .dashboard-stat-group input[type="number"] {
display: block;
width: 50px;
height: 45px;
font-size: 1.5em;
text-align: center;
color: var(--color-text-header);
}
/*.charsheet .sheet-body .dashboard-stat-group input[type=number]::-webkit-inner-spin-button,
.charsheet .sheet-body .dashboard-stat-group input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}*/
.dashboard-stamina {
grid-column: 6/ span 2;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
}
.dashboard-resource, .dashboard-recoveries {
font-size: 0.9em;
}
.characteristic-input-group > label,
.recovery-input-group > label,
.resource-input-group > label,
.surges-input-group > label {
cursor: pointer;
}
.surges-input-group {
display: flex;
font-size: 0.75em;
justify-content: center;
align-items: center;
gap: 0px;
}
.pipe-separator {
font-weight: bold;
color: var(--color-text-header);
padding: 0 2px;
}
.characteristic-input-group > input {
text-align: center;
}
.potencies {
grid-column-start: 1;
grid-column-end: span 2;
display: flex;
gap: 0.25em;
flex-direction: column;
}
.potency-input-group {
flex-direction: row;
display: flex;
justify-content: right;
gap: 0.5em;
}
.potencies .potency-input-group input[type="number"] {
width:4.5em;
}
.potency-input-group {
flex-direction: row;
display: flex;
justify-content: right;
gap: 0.5em;
}
.potencies .potency-input-group input[type="number"] {
width:4.5em;
}
.movement {
grid-column-start: 1;
grid-column-end: span 5;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.1em;
}
.movement-input-group {
display: flex;
flex-direction: column;
align-items: center;
}
.movement-input-group > input {
width: 3.75em;
text-align: center;
}
.growing-resource {
grid-column: 1 / -1;
}
.growing-resource:has([name="attr_has_growing_resource"]:not(:checked)) > .growing-resource-display,
.growing-resource:has([name="attr_has_growing_resource"]:not(:checked)) > .growing-resource-selector-display {
display: none;
}
.growing-resource-display {
display: flex;
gap: 0.25em;
flex-direction: column;
}
.growing-resource-selector-display {
display: grid;
grid-template-columns: max-content max-content;
gap: 0.25em;
justify-items: start;
align-items: left;
jutify-content: start;
font-weight: bold;
}
.berserker-growing-resource-display,
.reaver-growing-resource-display,
.boren-growing-resource-display,
.corven-growing-resource-display,
.raden-growing-resource-display,
.vuken-growing-resource-display,
.chronokinetic-growing-resource-display,
.cryokinetic-growing-resource-display,
.metakinetic-growing-resource-display {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 0.25em;
row-gap: 0.4em;
grid-auto-rows: auto;
}
.growing-resource-display-label {
display: contents;
text-align: center;
font-size: 0.85em;
font-weight: normal;
}
.growing-resource-display-label > label:nth-child(1) {
font-size: 1.2em;
font-weight: bold;
}
.growing-resource-display-label > label:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(5)):not(:nth-child(7)):not(:nth-child(9)):not(:nth-child(11)):not(:nth-child(13)) {
text-align: left;
}
.growing-resource:not(:has(.growing-resource-selector > option[value="furyberserker"]:checked)) .berserker-growing-resource-display,
.growing-resource:not(:has(.growing-resource-selector > option[value="furyreaver"]:checked)) .reaver-growing-resource-display,
.growing-resource-selector-display:not(:has(.growing-resource-selector > option[value="furystormwight"]:checked)) .stormwight-growing-resource-selector,
.growing-resource:not(:has(.stormwight-growing-resource-selector > option[value="boren"]:checked)) .boren-growing-resource-display,
.growing-resource:not(:has(.stormwight-growing-resource-selector > option[value="corven"]:checked)) .corven-growing-resource-display,
.growing-resource:not(:has(.stormwight-growing-resource-selector > option[value="raden"]:checked)) .raden-growing-resource-display,
.growing-resource:not(:has(.stormwight-growing-resource-selector > option[value="vuken"]:checked)) .vuken-growing-resource-display,
.growing-resource:not(:has(.growing-resource-selector > option[value="nullchronokinetic"]:checked)) .chronokinetic-growing-resource-display,
.growing-resource:not(:has(.growing-resource-selector > option[value="nullcryokinetic"]:checked)) .cryokinetic-growing-resource-display,
.growing-resource:not(:has(.growing-resource-selector > option[value="nullmetakinetic"]:checked)) .metakinetic-growing-resource-display {
display: none;
}
input[name="attr_growingresource_show_2"]:not([value="1"]) ~ .growing-resource-display,
input[name="attr_growingresource_show_2"]:not([value="1"]) ~ .growing-resource-display-label,
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .berserker-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .berserker-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .berserker-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .berserker-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .berserker-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .reaver-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .reaver-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .reaver-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .reaver-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .reaver-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .boren-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .boren-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .boren-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .boren-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .boren-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .corven-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .corven-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .corven-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .corven-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .corven-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .raden-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .raden-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .raden-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .raden-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .raden-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .vuken-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .vuken-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .vuken-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .vuken-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .vuken-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .chronokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .chronokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .chronokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .chronokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .chronokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .cryokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .cryokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .cryokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .cryokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .cryokinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)),
input[name="attr_growingresource_show_4"]:not([value="1"]) ~ .growing-resource-display .metakinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+4)),
input[name="attr_growingresource_show_6"]:not([value="1"]) ~ .growing-resource-display .metakinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+6)),
input[name="attr_growingresource_show_8"]:not([value="1"]) ~ .growing-resource-display .metakinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+8)),
input[name="attr_growingresource_show_10"]:not([value="1"]) ~ .growing-resource-display .metakinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+10)),
input[name="attr_growingresource_show_12"]:not([value="1"]) ~ .growing-resource-display .metakinetic-growing-resource-display .growing-resource-display-label > label:not(:nth-child(-n+12)) {
display: none;
}
.stamina-panel {
grid-column-start: 6;
grid-column-end: span 2;
display: grid;
grid-template-columns: 75px 1fr;
column-gap: 5px;
padding: 3px;
}
.stamina-input-group {
grid-row-end: span 2;
display: flex;
flex-direction: column;
align-items: center;
}
.stamina-temp-max-group {
grid-column-end: -1;
grid-column-start: 1;
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
}
.stamina-temp-max-group {
grid-column-end: -1;
grid-column-start: 1;
display: grid;
grid-template-columns: 1fr 1fr;
text-align: center;
}
.stamina-input-group input{
width: 100%;
box-sizing: border-box;
min-width: 6em;
}
.stamina-temporary-input-group,
.stamina-winded-input-group,
.stamina-dying-input-group {
text-align: center;
}
.stamina-temporary-input-group input {
min-width:6em;
}
.charsheet .stamina-panel input[name="attr_stamina"],
.charsheet .recoveries-panel input[name="attr_recoveries"],
.charsheet .resource-panel input[name="attr_resource"] {
height: 57px;
font-size: 1.5em;
padding: 0;
width: 75px;
min-width: unset;
}
.recoveries-panel {
display: flex;
flex-direction: column;
}
.recoveries-input-group {
grid-column-start: 1;
grid-column-end: -1;
justify-self: center;
}
.recovery-amount-input-group,
.recoveries-max-input-group {
display: flex;
flex-direction: column;
align-items: center;
}
.damage-mod-panel {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.25em;
grid-column-start: 3;
grid-column-end: 7;
}
.resource-description-panel {
grid-column: 7/-1;
}
.resource-description-panel > textarea {
width: 100%;
height: 7em;
resize: vertical;
box-sizing: border-box;
}
.resource-panel {
justify-self: center;
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: min-content;
justify-items: center;
}
.resource-name-input-group > input {
width: 100px;
text-align: center;
}
.resource-name-input-group {
text-align: center;
}
.surges-panel {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: min-content;
justify-items: center;
grid-column-start: 10;
}
.surges-panel > span {
font-size: 0.7em;
}
.conditions-panel {
grid-column: 1 /-1;
}
.repcontainer[data-groupname="repeating_conditions"] > .repitem {
display: grid;
grid-template-columns: 3fr auto 1fr;
gap: 0.25em;
align-items: start;
}
.repcontainer[data-groupname="repeating_conditions"] > .repitem > input {
grid-row-end: span 2;
}
.savethrow-input-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 6px;
}
.savethrow-input-group > input {
width: 50px;
text-align: center;
}
.bleed-dying-input-group {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 6px;
}
/* -- Biography Panel Styling */
.biography-panel {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.5em;
}
.biography-panel > .minimize-control {
grid-column-start: 1;
grid-column-end: -1;
}
.career-panel {
display: grid;
}
.career-panel > input,
.career-panel > label {
text-align: center;
}
.career-panel > input {
font-weight: bold;
}
.career-panel > textarea {
height: 75px;
resize: vertical;
}
.complication-panel {
display: grid;
}
.complication-panel > input,
.complication-panel > label {
text-align: center;
}
.complication-panel > input {
font-weight: bold;
}
.complication-panel > textarea {
height: 75px;
resize: vertical;
}
.culture-panel {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.2em;
}
.culture-panel > .panel-title {
grid-column-start: 1;
grid-column-end: -1;
}
.culture-panel > label {
text-align: center;
}
.culture-panel > textarea {
height: 75px;
resize: vertical;
}
/* -- Skills and Language Panel Styling */
.skills-panel {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.25em;
align-items: center;
}
.skills-panel > .panel-title {
grid-column-start: 1;
grid-column-end: -1;
}
.languages-panel {
display: grid;
grid-template-columns: 1fr;
}
.languages-panel > .panel-title {
grid-column-start: 1;
grid-column-end: -1;
}
/* -- Features Panel Styling */
.features-panel {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 0.5em;
}
.features-panel > .minimize-control {
grid-column-start: 1;
grid-column-end: -1;
}
.class-panel {
grid-column-end: span 4;
}
.ancestry-panel {
grid-column-end: span 2;
}
.repcontainer[data-groupname="repeating_classfeatures"] {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.2em;
}
.class-feature-header,
.anc-feature-header,
.perk-feature-header,
.title-feature-header {
display: flex;
align-items: center;
gap: 0.2em;
flex-wrap: wrap;
}
.class-feature-header input[type="text"],
.anc-feature-header input[type="text"],
.perk-feature-header input[type="text"],
.title-feature-header input[type="text"] {
flex: 1 1 auto;
}
.class-feature-header textarea,
.anc-feature-header textarea,
.perk-feature-header textarea,
.title-feature-header textarea {
flex: 1 1 100%;
resize: vertical;
}
.class-feature-header span,
.anc-feature-header span,
.perk-feature-header span,
.title-feature-header span {
white-space-collapse: preserve;
}
.feature-accordion textarea {
width: 100%;
}
.repcontainer[data-groupname="repeating_classfeatures"] > .repitem,
.repcontainer[data-groupname="repeating_ancestrytraits"] > .repitem {
display: grid;
grid-gap: 0.3em;
overflow-wrap: anywhere;
padding: 5px;
box-shadow:
inset 1px 1px 2px #555,
inset -1px -1px 2px #111,
0 2px 6px rgba(0, 0, 0, 0.5);
}
.repcontainer[data-groupname="repeating_classfeatures"] > .repitem > input,
.repcontainer[data-groupname="repeating_ancestrytraits"] > .repitem > input {
font-weight: bold;
}
.repcontainer[data-groupname="repeating_classfeatures"] > .repitem > textarea,
.repcontainer[data-groupname="repeating_ancestrytraits"] > .repitem > textarea {
height: 50px;
resize: vertical;
}
.perks-panel {
grid-column-end: span 4;
}
.titles-panel {
grid-column-end: span 2;
}
.repcontainer[data-groupname="repeating_perks"] {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.2em;
box-shadow:
inset 1px 1px 2px #555,
inset -1px -1px 2px #111,
0 2px 6px rgba(0, 0, 0, 0.5);
}
.repcontainer[data-groupname="repeating_titles"] {
display: grid;
grid-gap: 0.2em;
box-shadow:
inset 1px 1px 2px #555,
inset -1px -1px 2px #111,
0 2px 6px rgba(0, 0, 0, 0.5);
}
.modifiers-panel {
grid-column-start: 1;
grid-column-end: -1;
}
.modifiers-title {
text-align: center;
}
.modifier-card {
display: grid;
grid-template-columns: 1fr;
gap: 0.5em;
text-align: center;
}
.modifier-name {
font-weight: bold;
text-align: center;
margin-left: 4em;
margin-right: 4em;
}
.kit-weapon-armor-group {
display: flex;
justify-content: space-between;
gap: 2em;
margin-left: 4em;
margin-right: 4em;
}
.kit-weapon-armor-group input {
text-align: center;
}
.kit-weapon-input-group,
.kit-armor-input-group {
flex: 1;
display: flex;
flex-direction: column;
}
.kit-input-group {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1em;
margin-left: 4em;
margin-right: 4em;
}
.other-modifiers {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 1em;
margin-left: 4em;
margin-right: 4em;
margin-top: 0.5em;
}
.kit-input-group > div,
.other-modifiers > div {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.kit-speed-group input,
.kit-disengage-group input,
.kit-stamina-group input,
.kit-stability-group input,
.kit-melee-distance-group input,
.kit-ranged-distance-group input,
.other-modifiers-forcemove-group input,
.other-modifiers-mag-psi-group input,
.other-modifiers-fire-dam-group input,
.other-modifiers-sanct-weap-group input {
min-width:6em;
}
.kit-damage {
display: flex;
justify-content: space-between;
gap: 2em;
width: 100%;
padding: 0 2em;
box-sizing: border-box;
}
.kit-damage-label,
.other-modifiers-label {
font-size: 0.75em !important;
}
.kit-melee-damage-group,
.kit-ranged-damage-group {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
text-align: center;
}
.kit-melee-damage,
.kit-ranged-damage {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em;
margin-top: 0.5em;
}
.kit-melee-damage > div,
.kit-ranged-damage > div {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.modifier-effect {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.modifier-effect textarea {
width: 50%;
}
/* -- Abilities Panel*/
.abilities-panel {
display: grid;
grid-gap: 0.5em;
padding-top: 5px;
}
/* ---- Ability Tab Buttons */
.abilities-buttons {
display: flex;
border-bottom: 2px solid;
}
.abilities-buttons button[type="action"] {
flex: 1;
padding: 8px 12px;
font-weight: bold;
cursor: pointer;
text-align: center;
transition: all 0.2s ease;
border-radius: 8px 8px 0 0;
}
.abilities-buttons button[type="action"]:hover {
background-color: var(--color-button-hover-bg);
}
.charsheet .sheet-action,
.charsheet .sheet-maneuver,
.charsheet .sheet-triggered,
.charsheet .sheet-noaction,
.charsheet .sheet-move {
display: none;
}
.charsheet .sheet-tabstoggle[value="action"] ~ div.sheet-action,
.charsheet .sheet-tabstoggle[value="maneuver"] ~ div.sheet-maneuver,
.charsheet .sheet-tabstoggle[value="triggered"] ~ div.sheet-triggered,
.charsheet .sheet-tabstoggle[value="noaction"] ~ div.sheet-noaction,
.charsheet .sheet-tabstoggle[value="move"] ~ div.sheet-move {
display: block;
}
.charsheet .sheet-tabstoggle[value="action"] ~ .abilities-buttons .sheet-button-action,
.charsheet .sheet-tabstoggle[value="maneuver"] ~ .abilities-buttons .sheet-button-maneuver,
.charsheet .sheet-tabstoggle[value="triggered"] ~ .abilities-buttons .sheet-button-triggered,
.charsheet .sheet-tabstoggle[value="noaction"] ~ .abilities-buttons .sheet-button-noaction,
.charsheet .sheet-tabstoggle[value="move"] ~ .abilities-buttons .sheet-button-move {
background-color: var(--color-bg-subsection);
border-color: var(--color-button-hover-border);
}
.power-roll label.sublabel {
background-color: var(--color-bg-subsection);
border: var(--border-main);
border-radius: var(--border-radius);
padding: 1px;
text-align: center;
margin: 4PX 0px 0px 0px;
line-height: normal;
}
.repcontainer[data-groupname="repeating_abilities"],
.repcontainer[data-groupname="repeating_maneuvers"],
.repcontainer[data-groupname="repeating_triggered"],
.repcontainer[data-groupname="repeating_noaction"],
.repcontainer[data-groupname="repeating_moves"],
.free-strikes,
.default-maneuvers,
.default-moves,
.default-noaction,
.default-mainaction,
.standard-abilities {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.5em;
}
.standard-abilities-item {
position: relative;
}
/* ---- Ability Card Styling */
#ability-edit::before {
content: 'p';
font-family: "Pictos";
font-size: 1.5em;
cursor: pointer;
}
#ability-edit:checked::before {
content: '_';
}
#ability-edit {
top: 0px;
right: 5px;
position: absolute;
appearance: none;
background-color: transparent;
border-color: transparent;
color: var(--color-button-border);
}
#ability-edit:hover {
color: var(--color-accent-steel);
}
.charsheet input.ability-edit:not(:checked) ~ div.card-edit, .charsheet input.ability-edit:checked ~ div.card-display {
display: none;
}
/* -- Ability Card Styling */
.repcontainer[data-groupname="repeating_abilities"],
.repcontainer[data-groupname="repeating_maneuvers"],
.repcontainer[data-groupname="repeating_triggered"],
.repcontainer[data-groupname="repeating_noaction"],
.repcontainer[data-groupname="repeating_moves"],
.repcontainer[data-groupname="repeating_npcabilities"] {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.5em;
}
.standard-abilities-item,
.repcontainer[data-groupname="repeating_abilities"] > .repitem,
.repcontainer[data-groupname="repeating_maneuvers"] > .repitem,
.repcontainer[data-groupname="repeating_triggered"] > .repitem,
.repcontainer[data-groupname="repeating_noaction"] > .repitem,
.repcontainer[data-groupname="repeating_moves"] > .repitem,
.npc-abilities-panel > .repcontainer[data-groupname="repeating_npcabilities"] > .repitem {
border: var(--border-main);
border-radius: var(--border-radius);
background-color: var(--color-bg-subsection);
padding: var(--sheet-padding);
box-shadow:
inset 1px 1px 2px #555,
inset -1px -1px 2px #111,
0 2px 6px rgba(0, 0, 0, 0.5);
}
.ability-subtype-selector, .ability-subtype {
grid-column-start: 4;
grid-column-end: span 2;
justify-self: right;
font-weight: bold;
}
.ability-card {
display: grid;
grid-template-columns: 30px repeat(4, 1fr) 30px;
gap: 2px;
}
.ability-name {
grid-column-start: 2;
grid-column-end: span 2;
font-weight: bold;
width: max-content;
max-width: 240px;
}
.npc-ability-solo-monster {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.npc-ability-solo-monster input {
grid-column-end: span 2;
}
.ability-description {
grid-column: 1 / -1;
font-style: italic;
}
.ability-subtype-selector:not(:has(> option[value="heroic-ability"]:checked)) ~ .ability-heroic-cost,
.ability-subtype-selector:not(:has(> option[value="solo-monster"]:checked)) ~ .npc-ability-solo-monster,
.ability-subtype-selector:not(:has(> option[value*="trait"]:checked)) ~ .npc-ability-trait,
.ability-subtype-selector:not(:has(> option[value*="malice"]:checked)) ~ .npc-ability-malice-cost,
.ability-subtype-selector:not(:has(> option[value*="ability"]:checked)) ~ .ability-details {
display: none;
}
.ability-type:has(> option[value*="triggered"]:checked) ~ .triggered-hide,
.ability-type:not(:has(> option[value*="triggered"]:checked)) ~ .triggered-show {
display: none;
}
.trait-show {
white-space-collapse: preserve;
}
.power-roll {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-column: 1 / -1;
column-gap: 0.5em;
}
.power-roll label.sublabel {
background-color: var(--color-bg-subsection);
border: var(--border-main);
border-radius: var(--border-radius);
padding: 1px;
text-align: center;
margin: 4PX 0px 0px 0px;
line-height: normal;
}
.power-roll-mods {
grid-column: 1 / -1;
}
.power-roll-tier-effect {
font-size: 0.8em;
}
.tier-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
column-gap: 0.5em;
grid-column: 1 / -1;
}
.potency-tier-1,
.potency-tier-2,
.potency-tier-3 {
display: flex;
gap: 0.25em;
align-items: center;
}
.ability-details:has([name="attr_has_power_roll"]:not(:checked)) > .power-roll > .power-roll-mods > :not(input[type="checkbox"]):not(label),
.ability-details:has([name="attr_has_power_roll"]:not(:checked)) > .power-roll > :not(.power-roll-mods),
.ability-details:has([name="attr_has_power_roll"]:not(:checked)) > .power-roll .power-roll-mods input[name="attr_has_potency"],
.ability-details:has([name="attr_has_power_roll"]:not(:checked)) > .power-roll .power-roll-mods label[data-i18n="potency"],
.ability-details:has([name="attr_has_potency"]:not(:checked)) .potency-tier-1,
.ability-details:has([name="attr_has_potency"]:not(:checked)) .potency-tier-2,
.ability-details:has([name="attr_has_potency"]:not(:checked)) .potency-tier-3,
.ability-details:has([name="attr_has_power_roll"]:not(:checked)) > .power-roll .power-roll-mods input[name="attr_has_pre_effect"],
.ability-details:has([name="attr_has_power_roll"]:not(:checked)) > .power-roll .power-roll-mods label[data-i18n="pre-effect"] {
display: none;
}
#ability-subtype-selector:not([value*="heroic"]) ~ .heroic-show,
#ability-subtype-selector:not([value*="villain"]):not([value*="signature"]) ~ .subtype-hide,
#ability-subtype-selector:not([value*="malice"]) ~ .malice-show,
#ability-subtype-selector:not([value*="trait"]) ~ .trait-show,
#ability-subtype-selector[value*="trait"] ~ .details-hide,
#ability-subtype-selector:not([value="solo-monster"]) ~ .solo-monster-show,
#ability-subtype-selector[value="solo-monster"] ~ .details-hide {
display: none;
}
.ability-card input[name*="attr_has"]:not([value="on"]) + div {
display: none;
}
.ability-card .ability-effect,
.ability-card .ability-trigger {
height: auto;
}
.ability-card .ability-pre-effect {
height: auto;
margin-bottom: 0.2em;
}
.ability-custom,
.ability-malice,
.ability-trigger > span,
.ability-effect > span,
.ability-pre-effect > span {
white-space-collapse: preserve;
}
.ability-details {
display: grid;
grid-template-columns: 1fr 1fr;
font-size: 0.9em;
}
.ability-type, .ability-target {
text-align: end;
}
.ability-distance {
grid-column-start: 1;
}
.ability-card.card-display input:not([value*="triggered"]) ~ .ability-trigger,
.ability-card.card-display input[value="no-action"] ~ .ability-type {
display: none;
}
.ability-card .power-roll .power-roll-mods button[type="roll"]::before {
content: "k";
font-family: "dicefontd10";
}
.ability-card .power-roll .power-roll-mods button[type="roll"] {
margin-left: 0px;
}
.ability-toggle-group {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.2em;
align-items: center;
}
.ability-toggle-group textarea {
width: 100%;
}
.ability-toggle-group input:not(:checked) ~ textarea,
.ability-toggle-group input:not(:checked) ~ div
{
display: none
}
/* -- Inventory Panel Styling */
.inventory-panel {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5em;
}
.inventory-panel textarea {
height: 50px;
width: 100%;
}
.inventory-panel .name-input {
font-weight: bold;
}
.inventory-panel > .minimize-control {
grid-column-start: 1;
grid-column-end: -1;
}
input.name-input {
width: 100%;
}
.trinket-panel {
grid-column-end: span 2;
}
.trinket-header,
.consumable-header,
.leveltreasure-header {
display: flex;
align-items: center;
gap: 0.2em;
flex-wrap: wrap;
}
.trinket-header input[type="text"],
.consumable-header input[type="text"],
.leveltreasure-header input[type="text"] {
flex: 1 1 auto;
}
.trinket-header textarea,
.consumable-header textarea,
.leveltreasure-header textarea {
flex: 1 1 100%;
resize: vertical;
}
.trinket-header span,
.consumable-header span,
.leveltreasure-header textarea {
white-space-collapse: preserve;
}
.consumable-panel input-bg {
width: 100%
}
.level-treasure-panel {
grid-column: 1 / -1;
}
.level-treasure-panel .carry-checks {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5em;
margin-bottom: 0.5em;
flex-wrap: wrap;
}
.carry-checks .carry-label {
font-weight: bold;
}
.repcontainer[data-groupname="repeating_trinkets"] {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: var(--sheet-padding);
}
.repcontainer[data-groupname="repeating_consumables"] {
display: flex;
grid-gap: var(--sheet-padding);
flex-direction: column;
}
.repcontainer[data-groupname="repeating_leveltreasure"] {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: var(--sheet-padding);
}
.repcontainer[data-groupname="repeating_trinkets"] > .repitem,
.repcontainer[data-groupname="repeating_leveltreasure"] > .repitem,
.repcontainer[data-groupname="repeating_consumables"] > .repitem {
display: flex;
grid-gap: 0.2em;
flex-direction: column;
box-shadow:
inset 1px 1px 2px #555,
inset -1px -1px 2px #111,
0 2px 6px rgba(0, 0, 0, 0.5);
}
/* -- Projects Panel Styling */
.repcontainer[data-groupname="repeating_projects"] > .repitem {
display: grid;
grid-template-columns: 5fr 4fr 3fr 3fr;
}
.project-goal-input-group {
display: flex;
align-items: center;
}
.project-goal-input-group > input {
flex-grow: 1;
}
/* -- Notes Panel Styling */
.notes-panel > textarea {
width: 100%;
height: 7em;
resize: vertical;
box-sizing: border-box;
}
/* Disclaimer */
.disclaimer {
font-family: Menlo, Monaco, Consolas;
}
/* NPC Sheet */
.npc-sheet-body {
min-width: 566px;
}
.npc-panel {
display: grid;
background: var(--color-bg-section);
padding: var(--sheet-padding);
border-bottom: var(--border-section);
border-left: var(--border-main);
border-right: var(--border-main);
}
/*Director screen styling*/
.director-screen-panel,
.director-screen-sub-panel {
display: grid;
}
.director-screen-panel > .minimize-control,
.director-screen-sub-panel > .minimize-control-conditions,
.director-screen-sub-panel > .minimize-control-basics,
.director-screen-sub-panel > .minimize-control-combat,
.director-screen-sub-panel > .minimize-control-movement,
.director-screen-sub-panel > .minimize-control-areas-of-effect {
grid-column-start: 1;
grid-column-end: -1;
}
.director-screen-sub-panel h5.panel-title {
text-align: left;
display: inline;
margin-top: 0.2em;
}
.director-screen-sub-panel h5.panel-title > span:not(.director-screen-sub-desc):first-child {
text-decoration: underline;
}
.director-screen-sub-panel h2.panel-title {
text-align: left;
font-size: 2em;
font-weight: 800;
}
.director-screen-sub-panel h3.panel-title {
text-align: left;
font-size: 1.5em;
font-weight: 800;
}
.director-screen-sub-panel h5.panel-title .director-screen-sub-desc {
font-weight: normal;
font-size: 0.9em;
}
/* NPC edit styling */
.charsheet label.npc-edit-icon {
font-family: "Pictos";
font-size: 20px;
position: relative;
left: calc(100% - 35px);
top: 25px;
color: var(--color-button-bg);
cursor: pointer;
}
.charsheet label.npc-edit-icon:hover {
color: var(--color-accent-steel);
}
input.npc-edit-toggle {
display: none;
}
input.npc-edit-toggle:not(:checked) ~ div.npc-edit {
display: none;
}
.npc-edit {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1em;
align-items: baseline;
justify-items: start;
font-size: 0.8em;
width: 400px;
margin-bottom: 10px;
}
.npc-edit-group {
display: grid;
gap: 3px;
}
.npc-edit-stats {
grid-template-columns: 1fr 1fr;
}
.npc-edit .npc-edit-stats > input[type="text"],
.npc-edit .npc-edit-stats > input[type="number"] {
width: 4.5em;
}
.npc-edit-text {
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}
/* Main NPC Sheet */
.npc-header-panel {
grid-template-columns: 1fr auto;
align-items: baseline;
border-radius: 20px 20px 0px 0px;
border-top: var(--border-main);
}
*/
.npc-header-panel div:nth-child(even) {
justify-self: right;
}
.npc-name {
font-size: 2em;
font-weight: 800;
}
.npc-level {
font-weight: 800;
}
.npc-stats-panel {
grid-template-columns: repeat(5, 1fr);
}
.npc-stats-panel div {
display: flex;
flex-direction: column;
align-items: center;
}
.npc-characteristic-input-group > label {
cursor: pointer;
}
.npc-stat {
font-size: 1.5em;
}
.npc-skills-panel {
grid-template-columns: 1fr auto;
border-bottom: none;
}
.npc-marip-panel {
grid-template-columns: repeat(5,1fr);
}
.npc-marip-panel div {
display: flex;
gap: 5px;
justify-content: center;
align-items: baseline;
}
.npc-marip-panel div span {
font-size: 1.2em;
}
.npc-conditions {
min-height: 3em;
}
.npc-conditions > .repcontainer[data-groupname="repeating_conditions"] > .repitem {
display: grid;
grid-template-columns: 2fr 1fr 1fr ;
gap: 0.5em;
align-items: start;
}
.npc-abilities-panel {
padding-top: 5px;
}
label[for="npc-checkbox"] {
color: var(--color-text-body);
font-weight: bold;
font-size: 1em;
padding-left: 0.5em;
}
/* Roll Template Styling */
.sheet-rolltemplate-powerroll .sheet-roll-container,
.sheet-rolltemplate-ability .sheet-roll-container,
.sheet-rolltemplate-simpleroll .sheet-roll-container {
background-color: var(--color-bg-main);
font-family: var(--font-family-body);
padding: 16px;
border-radius: 10px;
border: var(--border-main);
max-width: 264px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
color: var(--color-text-body);
}
.sheet-rolltemplate-powerroll .sheet-header,
.sheet-rolltemplate-ability .sheet-header,
.sheet-rolltemplate-simpleroll .sheet-header {
grid-column-start: 1;
grid-column-end: -1;
font-size: 1.2em;
font-weight: bold;
}
.sheet-rolltemplate-simpleroll .sheet-roll-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.sheet-rolltemplate-powerroll .sheet-header,
.sheet-rolltemplate-powerroll .sheet-header {
margin-bottom: 3px;
border-bottom: var(--border-main);
padding-bottom: 3px;
line-height: 1.4;
}
.sheet-rolltemplate-ability .sheet-header {
margin-bottom: 3px;
padding-bottom: 3px;
line-height: 1.4;
}
/*.sheet-rolltemplate-powerroll label,*/
.sheet-rolltemplate-simpleroll label,
/*.sheet-rolltemplate-powerroll .sheet-powerroll-edge-bane*/ {
display: unset;
margin: unset;
padding: unset;
width: unset;
text-align: unset;
float: unset;
font-size: 1em;
font-weight: bold;
}
/*
.sheet-rolltemplate-powerroll .sheet-powerroll-bonus-penalty {
grid-column-start: -2;
}
*/
.sheet-rolltemplate-powerrollability .sheet-powerroll-characteristic,
.sheet-rolltemplate-powerrollability .sheet-powerroll-tier,
.sheet-rolltemplate-powerroll .sheet-powerroll-characteristic,
.sheet-rolltemplate-powerroll .sheet-powerroll-tier {
text-align: right;
}
/*
.sheet-rolltemplate-powerroll .sheet-powerroll-crit,
.sheet-rolltemplate-powerroll .sheet-powerroll-total,
.sheet-rolltemplate-powerroll .sheet-powerroll-tier {
margin-top: 3px;
border-top: var(--border-main);
padding-top: 3px;
}
.sheet-rolltemplate-powerroll .sheet-powerroll-crit {
grid-column-start: 1;
grid-column-end: -1;
font-weight: bold;
color: red;
text-transform: uppercase;
}
.sheet-rolltemplate-powerroll .sheet-powerroll-total {
grid-column-start: 1;
}
*/
.sheet-rolltemplate-ability .sheet-description,
.sheet-rolltemplate-powerrollability .sheet-description,
.sheet-rolltemplate-monsterability .sheet-description {
font-size: 0.80em;
font-style: italic;
margin-bottom: 10px;
border-bottom: var(--border-section);
padding-bottom: 6px;
}
.sheet-rolltemplate-ability .sheet-meta-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.sheet-rolltemplate-ability .sheet-keywords {
font-weight: bold;
font-size: 0.90em;
}
.sheet-rolltemplate-ability .sheet-action-type {
font-weight: bold;
font-size: 0.90em;
}
.sheet-rolltemplate-ability .sheet-action-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.sheet-rolltemplate-ability .sheet-distance,
.sheet-rolltemplate-ability .sheet-target {
font-size: 0.80em;
}
.sheet-rolltemplate-ability .sheet-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
margin-bottom: 10px;
border-bottom: var(--border-main);
}
.sheet-rolltemplate-ability .sheet-roll-label {
font-weight: bold;
font-size: 1em;
}
.sheet-rolltemplate-ability .sheet-roll-formula {
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
font-family: monospace;
box-shadow: inset 0 0 2px #aaa;
}
.sheet-rolltemplate-ability .sheet-tiers {
display: flex;
flex-direction: column;
gap: 6px;
}
.sheet-rolltemplate-ability .sheet-tier {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border-radius: 6px;
border: var(--border-main);
}
.sheet-rolltemplate-ability .sheet-range {
flex-shrink: 0;
background-color: var(--color-bg-subsection);
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}
.sheet-rolltemplate-ability .sheet-damage {
font-size: 0.95em;
}
.sheet-rolltemplate-ability .sheet-effect-block {
margin-top: 14px;
padding: 10px;
background-color: var(--color-section);
border: var(--border-main);
border-radius: var(--border-radius);
}
.sheet-rolltemplate-ability .sheet-effect-label {
font-weight: bold;
margin-bottom: 6px;
font-size: 1em;
}
.sheet-rolltemplate-ability .sheet-effect-text {
font-size: 0.95em;
line-height: 1.4;
}
.sheet-rolltemplate-simpleroll .sheet-header {
border-bottom: var(--border-main);
margin-bottom: 6px;
}
.sheet-rolltemplate-simpleroll .sheet-powerroll-tier {
justify-self: right;
}
/* Monster Ability Roll Template */
.sheet-rolltemplate-powerroll .sheet-roll-container,
.sheet-rolltemplate-monsterability .sheet-roll-container,
.sheet-rolltemplate-powerrollability .sheet-roll-container {
background-color: var(--color-bg-main);
font-family: var(--font-family-body);
padding: 16px;
border-radius: 10px;
border: var(--border-main);
max-width: 264px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
color: var(--color-text-body);
}
.sheet-rolltemplate-monsterability .sheet-header,
.sheet-rolltemplate-powerrollability .sheet-header {
font-size: 1.2em;
font-weight: bold;
color: var(--color-text-header);
font-family: var(--font-family-header);
}
.sheet-rolltemplate-monsterability .sheet-character-name,
.sheet-rolltemplate-powerrollability .sheet-character-name,
.sheet-rolltemplate-powerroll .sheet-character-name,
.sheet-rolltemplate-simpleroll .sheet-character-name {
font-size: 0.8em;
font-style: italic;
}
.sheet-rolltemplate-monsterability .sheet-subtype,
.sheet-rolltemplate-powerrollability .sheet-subtype {
font-size: 0.9em;
font-style: italic;
margin-bottom: 10px;
border-bottom: var(--border-section);
padding-bottom: 6px;
font-weight: bold;
}
.sheet-rolltemplate-monsterability .sheet-meta-row,
.sheet-rolltemplate-powerrollability .sheet-meta-row {
display: grid;
grid-template-columns: 1fr auto;
font-size: 0.8em;
font-weight: bold;
gap: 1em;
}
.sheet-rolltemplate-monsterability .sheet-action-row,
.sheet-rolltemplate-powerrollability .sheet-action-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
font-size: 0.8em;
padding: 4px 0;
gap: 1em;
}
.sheet-rolltemplate-monsterability .sheet-distance,
.sheet-rolltemplate-powerrollability .sheet-distance {
flex: 1 1 auto;
}
.sheet-rolltemplate-monsterability .sheet-target,
.sheet-rolltemplate-powerrollability .sheet-target {
flex: 0 0 auto;
max-width: 60%;
}
.sheet-rolltemplate-monsterability .sheet-roll-column1,
.sheet-rolltemplate-monsterability .sheet-roll-column2,
.sheet-rolltemplate-powerrollability .sheet-roll-column1,
.sheet-rolltemplate-powerrollability .sheet-roll-column2,
.sheet-rolltemplate-powerroll .sheet-roll-column1,
.sheet-rolltemplate-powerroll .sheet-roll-column2 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1em;
flex-wrap: nowrap;
margin-bottom: 8px;
border-bottom: var(--border-main);
padding-bottom: 8px;
}
.sheet-rolltemplate-monsterability .sheet-roll-column1 label,
.sheet-rolltemplate-monsterability .sheet-roll-column2 label,
.sheet-rolltemplate-monsterability .sheet-roll-columnbonus label,
.sheet-rolltemplate-powerrollability .sheet-roll-column1 label,
.sheet-rolltemplate-powerrollability .sheet-roll-column2 label,
.sheet-rolltemplate-powerrollability .sheet-roll-columnbonus label,
.sheet-rolltemplate-powerroll .sheet-roll-column1 label,
.sheet-rolltemplate-powerroll .sheet-roll-column2 label,
.sheet-rolltemplate-powerroll .sheet-roll-columnbonus label {
font-size: 0.9em;
font-weight: bold;
}
.sheet-rolltemplate-monsterability .sheet-powerroll-edge-bane,
.sheet-rolltemplate-monsterability .sheet-powerroll-crit,
.sheet-rolltemplate-powerrollability .sheet-powerroll-edge-bane,
.sheet-rolltemplate-powerrollability .sheet-powerroll-crit,
.sheet-rolltemplate-powerroll .sheet-powerroll-edge-bane,
.sheet-rolltemplate-powerroll .sheet-powerroll-crit {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0;
}
.sheet-rolltemplate-monsterability .sheet-powerroll-2d10,
.sheet-rolltemplate-monsterability .sheet-powerroll-characteristic,
.sheet-rolltemplate-monsterability .sheet-powerroll-bonus-penalty,
.sheet-rolltemplate-monsterability .sheet-powerroll-total,
.sheet-rolltemplate-monsterability .sheet-powerroll-tier,
.sheet-rolltemplate-powerrollability .sheet-powerroll-2d10,
.sheet-rolltemplate-powerrollability .sheet-powerroll-characteristic,
.sheet-rolltemplate-powerrollability .sheet-powerroll-bonus-penalty,
.sheet-rolltemplate-powerrollability .sheet-powerroll-total,
.sheet-rolltemplate-powerrollability .sheet-powerroll-tier,
.sheet-rolltemplate-powerroll .sheet-powerroll-2d10,
.sheet-rolltemplate-powerroll .sheet-powerroll-characteristic,
.sheet-rolltemplate-powerroll .sheet-powerroll-bonus-penalty,
.sheet-rolltemplate-powerroll .sheet-powerroll-total,
.sheet-rolltemplate-powerroll .sheet-powerroll-tier {
display: flex;
align-items: center;
gap: 0.25em;
white-space: nowrap;
min-width: 0;
}
.sheet-rolltemplate-monsterability .sheet-powerroll-edge-bane,
.sheet-rolltemplate-powerrollability .sheet-powerroll-edge-bane,
.sheet-rolltemplate-powerroll .sheet-powerroll-edge-bane {
margin-bottom: 8px;
border-bottom: var(--border-main);
padding-bottom: 8px;
}
.sheet-rolltemplate-monsterability .sheet-powerroll-crit,
.sheet-rolltemplate-powerrollability .sheet-powerroll-crit,
.sheet-rolltemplate-powerroll .sheet-powerroll-crit {
margin-bottom: 8px;
border-bottom: var(--border-main);
padding-bottom: 8px;
font-weight: bold;
color: red;
text-transform: uppercase;
}
.sheet-rolltemplate-monsterability .sheet-action-type, .sheet-rolltemplate-monsterability .sheet-target,
.sheet-rolltemplate-powerrollability .sheet-action-type, .sheet-rolltemplate-powerrollability .sheet-target {
justify-self: right;
text-align: right;
}
.sheet-rolltemplate-monsterability .sheet-effect-block .sheet-effect-label,
.sheet-rolltemplate-powerrollability .sheet-effect-block .sheet-effect-label {
font-weight: bold;
font-size: 0.8em;
}
.sheet-rolltemplate-monsterability .sheet-effect-block,
.sheet-rolltemplate-powerrollability .sheet-effect-block {
margin-top: 14px;
padding: var(--sheet-padding);
background-color: var(--color-bg-section);
border: var(--border-main);
border-radius: var(--border-radius);
margin-bottom: 14px;
}
.sheet-rolltemplate-monsterability .sheet-effect-text,
.sheet-rolltemplate-powerrollability .sheet-effect-text {
font-size: .9em;
}
.sheet-rolltemplate-monsterability .sheet-stat-row,
.sheet-rolltemplate-powerrollability .sheet-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
margin-bottom: 10px;
border-bottom: var(--border-main);
}
.sheet-rolltemplate-monsterability .sheet-roll-label,
.sheet-rolltemplate-powerrollability .sheet-roll-label {
font-weight: bold;
font-size: 1em;
}
.sheet-rolltemplate-monsterability .sheet-roll-formula,
.sheet-rolltemplate-powerrollability .sheet-roll-formula {
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
font-family: monospace;
box-shadow: inset 0 0 2px #aaa;
}
.sheet-rolltemplate-monsterability .sheet-tiers,
.sheet-rolltemplate-powerrollability .sheet-tiers {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
}
.sheet-rolltemplate-monsterability .sheet-range,
.sheet-rolltemplate-powerrollability .sheet-range {
background-color: var(--color-bg-section);
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
font-size: .8em;
height: 20px;
text-align: center;
}
.sheet-rolltemplate-monsterability .sheet-damage,
.sheet-rolltemplate-powerrollability .sheet-damage {
font-size: 0.95em;
}