Files

7219 lines
178 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=Material+Symbols+Outlined|Material+Icons|Material+Icons+Outlined|Didact+Gothic|Oswald:wght@300&display=swap');
.characterdialog {
background-color: #fff;
}
.ui-dialog .charactersheet.charsheet {
padding: 0;
}
input.allow-scaling:checked + .year-zero-sheet
{
container-type: inline-size;
container-name: myz-charsheet;
}
.year-zero-sheet {
transition-property: transform;
transition-duration: 1s;
transition-delay: 0.1s;
}
@container myz-charsheet (max-width: 800px) and (min-width: 780px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(800 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 780px) and (min-width: 760px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(780 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 760px) and (min-width: 740px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(760 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 740px) and (min-width: 720px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(740 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 720px) and (min-width: 700px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(720 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 700px) and (min-width: 680px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(700 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 680px) and (min-width: 660px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(680 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 660px) and (min-width: 640px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(660 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 640px) and (min-width: 620px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(640 / 800));
transform-origin: top left;
}
}
@container myz-charsheet (max-width: 620px) {
.logo, .grid-tabs, .wrapper {
transform: scale(calc(620 / 800));
transform-origin: top left;
}
}
.sheet-rolltemplate-mutantyearzero {
/* Roll template variables */
--bg-dice-white: #fff;
--bg-dice-yellow: rgb(235, 212, 4);
--bg-dice-orange: #ff8c00;
--bg-dice-red: #c00202;
--bg-dice-blue: #0088af;
--bg-dice-green: #235402;
--bg-dice-black: #000;
--bg-dice-maroon: #a60100;
--bg-dice-purple: #800080;
--fg-dice-white: #000;
--fg-dice-yellow: #000;
--fg-dice-orange: #fff;
--fg-dice-blue: #fff;
--fg-dice-green: #fff;
--fg-dice-black: #fff;
--fg-dice-maroon: #fff;
--fg-dice-purple: #800080;
--bg-dice-boxshadow: #222;
}
.charsheet {
--fg-clr-cog: #c0a748;
--bg-clr-button-active: #a60100;
--bg-clr-biohaz-active:#c04040;
--bg-clr-button: #cfcece;
--fg-clr-button-active: #fff;
--bg-clr-dicepool-base: #d1c970;
--bg-clr-dicepool-skill: #57aa57;
--bg-clr-dicepool-gear: #404040;
/* color variables */
--bg-clr-0: #764621;
--bg-clr-1: #cd8b41;
--bg-clr-2: #efd6b8;
--bg-clr-3: #f4e1c9;
--bg-clr-4: #eaeaea;
--border-clr-0: #000;
--border-clr-1: #764621;
--border-clr-2: #cd8b41;
--border-clr-3: #efd6b8;
--fg-clr-0: #000;
--fg-clr-1: #333;
--fg-clr-2: #555;
--fg-clr-3: lightgrey;
--fg-clr-4: #fff;
/* Character type specific colors */
--bg-clr-mutant-0: #764621;
--bg-clr-mutant-1: #cd8b41;
--bg-clr-mutant-2: #efd6b8;
--bg-clr-mutant-3: #f6dcbd;
--bg-clr-mutant-4: #eaeaea;
--border-clr-mutant-0: #000;
--border-clr-mutant-1: #764621;
--border-clr-mutant-2: #cd8b41;
--border-clr-mutant-3: #efd6b8;
--fg-clr-mutant-0: #000;
--fg-clr-mutant-1: #333;
--fg-clr-mutant-2: #555;
--fg-clr-mutant-3: lightgrey;
--fg-clr-mutant-4: #fff;
--bg-clr-animal-0: #687569;
--bg-clr-animal-1: #67a83f;
--bg-clr-animal-2: #d6ead8;
--bg-clr-animal-3: #def4e0;
--bg-clr-animal-4: #eaeaea;
--border-clr-animal-0: #000;
--border-clr-animal-1: #687569;
--border-clr-animal-2: #67a83f;
--border-clr-animal-3: #d6ead8;
--fg-clr-animal-0: #000;
--fg-clr-animal-1: #333;
--fg-clr-animal-2: #555;
--fg-clr-animal-3: lightgrey;
--fg-clr-animal-4: #fff;
--bg-clr-robot-0: #035974;
--bg-clr-robot-1: #8bb2ce;
--bg-clr-robot-2: #e4eef5;
--bg-clr-robot-3: rgb(228, 238, 245);
--bg-clr-robot-4: #eaeaea;
--border-clr-robot-0: #000;
--border-clr-robot-1: #035974;
--border-clr-robot-2: #8bb2ce;
--border-clr-robot-3: #e4eef5;
--fg-clr-robot-0: #000;
--fg-clr-robot-1: #333;
--fg-clr-robot-2: #555;
--fg-clr-robot-3: lightgrey;
--fg-clr-robot-4: #fff;
--bg-clr-human-0: #1b6764;
--bg-clr-human-1: #68a98f;
--bg-clr-human-2: #e2edea;
--bg-clr-human-3: #edf8f5;
--bg-clr-human-4: #eaeaea;
--border-clr-human-0: #000;
--border-clr-human-1: #1b6764;
--border-clr-human-2: #68a98f;
--border-clr-human-3: #e2edea;
--fg-clr-human-0: #000;
--fg-clr-human-1: #333;
--fg-clr-human-2: #555;
--fg-clr-human-3: lightgrey;
--fg-clr-human-4: #fff;
/* Roll template variables */
--bg-dice-white: #fff;
--bg-dice-yellow: rgb(235, 212, 4);
--bg-dice-orange: #ff8c00;
--bg-dice-red: #c00202;
--bg-dice-blue: #0088af;
--bg-dice-green: #235402;
--bg-dice-black: #000;
--bg-dice-maroon: #a60100;
--bg-dice-purple: #800080;
--fg-dice-white: #000;
--fg-dice-yellow: #000;
--fg-dice-orange: #fff;
--fg-dice-blue: #fff;
--fg-dice-green: #fff;
--fg-dice-black: #fff;
--fg-dice-maroon: #fff;
--fg-dice-purple: #800080;
--bg-dice-boxshadow: #222;
.announcements-show,
.v1-data-show {
font-size: 0.85em;
position: relative;
float: right;
margin: 0.5em 10px 0 -5em;
padding: 0 4px 0 4px;
border: 2px solid black;
border-radius: 5px;
}
.announcements-show,
.v1-data-show {
font-size: 0.85em;
position: relative;
float: right;
margin: 0.5em 10px 0 -5em;
padding: 0 4px 0 4px;
border: 2px solid black;
border-radius: 5px;
}
.v1-data-show { border: 0; }
.v1-data-show div div {display: flex;flex-direction: row;}
.v1-data-show div div div { display: flex;flex-direction: column;}
.v1-data-show div div div div { display: flex; flex-direction: row; }
.v1-data-show .repcontainer { display: flex; flex-direction: column; }
.v1-data-show .repcontainer div { display: flex; flex-direction: row; }
span.announcements-show::before,
span.v1-data-show::before {
content: "v";
}
span.announcements-show::after,
span.v1-data-show::after {
font-family: pictos;
padding-left: 4px;
content: "l";
}
input.announcements-show,
input.v1-data-show {
z-index: 1;
width: 4.75em;
height: 1.75em;
margin: -3.25em 0 0 -5em;
opacity: 0;
}
.announcements-exit,
.v1-data-exit {
font-family: pictos;
font-size: 1em;
position: relative;
float: right;
margin: 0.5em 0 0 0;
}
input.announcements-show:hover + span,
input.v1-data-show:hover + span,
input.tab[value="monster"]
~ div.character
input[type="checkbox"].extra-damage-show:hover,
input.monster_only:checked
~ div.character
input[type="checkbox"].extra-damage-show:hover {
color: var(--bg-clr-button-active);
opacity: 1;
}
input[type="checkbox"].announcements-older-show,
input[type="checkbox"].v1-data-show {
position: relative;
z-index: 1;
float: left;
width: 1.5em;
height: 1em;
margin: 5px 0 0 15px;
opacity: 0;
}
input.announcements-older-show:hover + span,
input.v1-data-show:hover + span,
input.armor-show-more:hover + span {
border-left-color: var(--bg-clr-button-active);
}
input.announcements-older-show + span,
input.v1-data-show + span,
input.armor-show-more + span {
position: relative;
float: left;
width: 0;
height: 0;
margin: 5px 0 0 -1.5em;
content: "";
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
transform-origin: 25% 50%;
text-align: center;
border: 0.4em solid transparent;
border-width: 0.4em 0.6em;
border-left-color: #c0a748;
}
/*
input.v1-data-show + span,
input[type="checkbox"].v1-data-show {
margin-top: 5px;
-margin-left: -15px;
}
input.v1-data-show + span {
margin-top: 5px;
margin-left: -15px;
} */
input.announcements-older-show:checked + span,
input.v1-data-show:checked + span,
input.armor-show-more:checked + span {
transform: rotate(90deg);
}
.announcements-show:not(:checked) + span + div.announcements,
.announcements-older-show:not(:checked) ~ .announcements-older-show,
.v1-data-show:not(:checked) ~ .v1-data-show,
input.armor-show-more:not(:checked) ~ .armor-show-more {
display: none;
}
.announcements-older-show:checked + span ~ .announcements-older-show,
.v1-data-show:checked + span ~ .v1-data-show,
input.armor-show-more:checked + span ~ .armor-show-more {
display: block;
box-sizing: border-box;
margin: 2em;
padding: 1em;
color: #333;
border: 1px solid #000;
border-radius: 5px;
}
.v1-data-show:checked + span ~ .v1-data-show {
border: 0;
padding-left: 0 !important;
margin-left: 0 !important;
}
div.v1-data-show {
display: flex;
justify-content:center;
justify-items:center;
width: 80%;
margin-bottom: 10px;
}
.v1-data-show .repcontrol {
display: none;
}
span.informative-qmark {
display: inline-flex;
aspect-ratio: 1 / 1;
font-size: 10px;
padding: 1px;
margin-inline: 3px;
border-radius: 50%;
border: 1px solid black;
height: 10px;
justify-content: center;
align-content: center;
flex-wrap: wrap;
cursor: help;
}
/* Hide actual checkbox */
input.tab[value="monster"]
~ div.character
input[type="checkbox"].extra-damage-show,
input.monster_only:checked
~ div.character
input[type="checkbox"].extra-damage-show {
margin: -22px 0 0 2px;
opacity: 0.25;
position: relative;
cursor: pointer;
z-index: 1;
}
input.tab[value="monster"]
~ div.character
input[type="checkbox"].extra-damage-show:checked,
input.monster_only:checked
~ div.character
input[type="checkbox"].extra-damage-show:checked {
margin: -40px 6px 0 2px;
display: flex;
padding: 2px 0 0 0;
}
input.tab[value="monster"]
~ div.character
input[type="checkbox"].extra-damage-show:not(:checked)
~ .extra-damage-show,
input.monster_only:checked
~ div.character
input[type="checkbox"].extra-damage-show:not(:checked)
~ .extra-damage-show,
input.tab[value="monster"]
~ div.character
input[type="checkbox"].extra-damage-show:not(:checked)
~ .extra-damage-show
+ ::before,
input.monster_only:checked
~ div.character
input[type="checkbox"].extra-damage-show:not(:checked)
~ .extra-damage-show
+ ::before {
display: none;
}
.wrapper.tab-content.settings .settings-tab-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
}
.settings-options,
.announcements {
margin: 3em 0.5em 2em 0.5em;
padding: 1em 0.5em 2em 0.5em;
border: 2px solid #000;
border-radius: 5px;
background-color: #eaeaea;
height: fit-content;
}
.settings-options h3,
.announcements h3 {
text-transform: capitalize;
}
.announcements ol span {
font-weight: bold;
}
.settings-options > div:first-of-type,
.settings-options > div:nth-of-type(2) {
display: flex;
flex-direction: column;
}
/* Text */
body {
-font-family: "IM Fell English", "Times New Roman", Times, serif;
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
}
h1 {
-font-family: "IM Fell English", "Times New Roman", Times, serif;
-font-family: "Oswald", Helvetica, Arial, sans-serif;
font-family: 'Oswald', sans-serif;
font-size: 1.1em;
font-weight: normal;
z-index: 0;
margin: -16px 0 0 0;
letter-spacing: 0.0625em;
color: #fff;
}
.header-h1 {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
font-weight: bold;
z-index: 0;
letter-spacing: 0.0625em;
color: #000;
}
hr.horizontal-rule {
overflow: visible;
width: 90%;
height: 10px;
margin-top: 10px;
margin-bottom: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #000;
border-radius: 5px;
}
hr.horizontal-rule::before {
/* Not really supposed to work, but does */
display: block;
height: 10px;
margin-top: -11px;
content: "";
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
border-radius: 5px;
}
.header {
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
min-height: 3em;
margin: 0 0 0 0;
color: #fff;
background-color: #000;
}
.column-header {
font-size: 0.95em;
display: flex;
text-align: center;
justify-content: center;
justify-self: center;
align-items: center;
color: lightgrey;
-background-color: #000;
font-variant-caps: small-caps;
padding: 0;
line-height: 0.9em;
}
.column-subheader {
font-size: 0.95em;
display: flex;
text-align: center;
justify-content: center;
justify-self: center;
align-items: center;
color: #fff;
-background-color: #000;
font-variant-caps: small-caps;
padding: 0;
line-height: 0.9em;
padding: 1.2em 0 0.4em 0;
}
.header ~ .column-header span {
padding: 1.5em 0 0 0;
}
.footer {
font-size: 0.95em;
display: block;
margin: -15px 0 0 -10px;
text-align: right;
}
.label {
font-weight: bold;
font-size: 1em;
color: #333;
}
.small-caps {
font-variant-caps: small-caps;
}
.equal {
margin: 4px 1px 0 1px;
text-align: center;
}
.left,
.grid-item.left {
text-align: left;
}
.right,
.grid-item.right {
text-align: right;
justify-self: right;
}
span.separator-s {
width: 5px;
min-width: 5px;
}
span.separator-m {
width: 15px;
min-width: 15px;
}
span.separator-l {
width: 25px;
min-width: 25px;
}
span.separator-xl {
width: 50px;
min-width: 50px;
}
.center,
.grid-item.center {
text-align: center;
}
span.readonly,
input.tab[value="monster"]~div.character .monster+span.monster.readonly
input.monster_only:checked~div.character .monster+span.monster.readonly {
font-size: 18px;
color: #555;
justify-self: center;
align-self: center;
line-height: .85em;
-min-width: 1em;
width: 100%;
display: flex;
justify-content: center;
-padding: 0 0 0 2px;
cursor: help;
}
/* Hide actual radio */
input.biohaz[type="radio"] {
display: flex;
width: 20px;
height: 10px;
margin: 0 1px 1px 1px;
cursor: pointer;
opacity: 0;
text-align: center;
vertical-align: middle;
}
/* Fake radio using biohazard */
input.biohaz[type="radio"] + span {
font-size: 17px;
line-height: 16px;
display: flex;
width: 17px;
height: 17px;
margin: 0 0 0 -21px;
padding: 0 0 1px 1px;
-content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_checked.png);
color: #333;
text-align: center;
vertical-align: middle;
background-color: #c04040;
border: 1px solid black;
border-radius: 50%;
-background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/skull_empty.png);
-background-image: 'images/skull_dark_empty.png';
-background-image: url(https://raw.githubusercontent.com/Dwarfwing/MutantYearZearoFL/master/images/skull_dark_empty.png);
}
input.biohaz[type="radio"]:checked + span {
-background-color: var(--bg-clr-button-active);
}
/* Removes biohaz from all radios _after_ selected one */
input[type="radio"]:checked ~ input.biohaz[type="radio"] + span,
input.biohaz[type="radio"]:checked
~ input.biohaz[type="radio"]
+ span {
-content: "";
background-color: #cfcece;
}
/* Only show skulls up to the attributes max value */
input[name="attr_strength"][value="0"] ~ input.biohaz:nth-of-type(1n+3),
input[name="attr_strength"][value="0"] ~ input.biohaz:nth-of-type(1n+3) + span,
input[name="attr_strength"][value="1"] ~ input.biohaz:nth-of-type(1n+4),
input[name="attr_strength"][value="1"] ~ input.biohaz:nth-of-type(1n+4) + span,
input[name="attr_strength"][value="2"] ~ input.biohaz:nth-of-type(1n+5),
input[name="attr_strength"][value="2"] ~ input.biohaz:nth-of-type(1n+5) + span,
input[name="attr_strength"][value="3"] ~ input.biohaz:nth-of-type(1n+6),
input[name="attr_strength"][value="3"] ~ input.biohaz:nth-of-type(1n+6) + span,
input[name="attr_strength"][value="4"] ~ input.biohaz:nth-of-type(1n+7),
input[name="attr_strength"][value="4"] ~ input.biohaz:nth-of-type(1n+7) + span,
input[name="attr_strength"][value="5"] ~ input.biohaz:nth-of-type(1n+8),
input[name="attr_strength"][value="5"] ~ input.biohaz:nth-of-type(1n+8) + span,
input[name="attr_strength"][value="6"] ~ input.biohaz:nth-of-type(1n+9),
input[name="attr_strength"][value="6"] ~ input.biohaz:nth-of-type(1n+9) + span,
input[name="attr_strength"][value="7"] ~ input.biohaz:nth-of-type(1n+10),
input[name="attr_strength"][value="7"] ~ input.biohaz:nth-of-type(1n+10) + span,
input[name="attr_strength"][value="8"] ~ input.biohaz:nth-of-type(1n+11),
input[name="attr_strength"][value="8"] ~ input.biohaz:nth-of-type(1n+11) + span,
input[name="attr_strength"][value="9"] ~ input.biohaz:nth-of-type(1n+12),
input[name="attr_strength"][value="9"] ~ input.biohaz:nth-of-type(1n+12) + span,
input[name="attr_strength"][value="10"] ~ input.biohaz:nth-of-type(1n+13),
input[name="attr_strength"][value="10"] ~ input.biohaz:nth-of-type(1n+13) + span,
input[name="attr_strength"][value="11"] ~ input.biohaz:nth-of-type(1n+14),
input[name="attr_strength"][value="11"] ~ input.biohaz:nth-of-type(1n+14) + span,
input[name="attr_strength"][value="12"] ~ input.biohaz:nth-of-type(1n+15),
input[name="attr_strength"][value="12"] ~ input.biohaz:nth-of-type(1n+15) + span {
opacity: 0;
display: none !important;
}
input[name="attr_strength"][value="13"] ~ input.biohaz:nth-of-type(1n+16),
input[name="attr_strength"][value="13"] ~ input.biohaz:nth-of-type(1n+16) + span,
input[name="attr_strength"][value="14"] ~ input.biohaz:nth-of-type(1n+17),
input[name="attr_strength"][value="14"] ~ input.biohaz:nth-of-type(1n+17) + span,
input[name="attr_strength"][value="15"] ~ input.biohaz:nth-of-type(1n+18),
input[name="attr_strength"][value="15"] ~ input.biohaz:nth-of-type(1n+18) + span,
input[name="attr_strength"][value="16"] ~ input.biohaz:nth-of-type(1n+19),
input[name="attr_strength"][value="16"] ~ input.biohaz:nth-of-type(1n+19) + span,
input[name="attr_strength"][value="17"] ~ input.biohaz:nth-of-type(1n+20),
input[name="attr_strength"][value="17"] ~ input.biohaz:nth-of-type(1n+20) + span,
input[name="attr_strength"][value="18"] ~ input.biohaz:nth-of-type(1n+21),
input[name="attr_strength"][value="18"] ~ input.biohaz:nth-of-type(1n+21) + span,
input[name="attr_strength"][value="19"] ~ input.biohaz:nth-of-type(1n+22),
input[name="attr_strength"][value="19"] ~ input.biohaz:nth-of-type(1n+22) + span,
input[name="attr_strength"][value="20"] ~ input.biohaz:nth-of-type(1n+23),
input[name="attr_strength"][value="20"] ~ input.biohaz:nth-of-type(1n+23) + span,
input[name="attr_strength"][value="21"] ~ input.biohaz:nth-of-type(1n+24),
input[name="attr_strength"][value="21"] ~ input.biohaz:nth-of-type(1n+24) + span,
input[name="attr_strength"][value="22"] ~ input.biohaz:nth-of-type(1n+25),
input[name="attr_strength"][value="22"] ~ input.biohaz:nth-of-type(1n+25) + span,
input[name="attr_strength"][value="23"] ~ input.biohaz:nth-of-type(1n+26),
input[name="attr_strength"][value="23"] ~ input.biohaz:nth-of-type(1n+26) + span,
input[name="attr_strength"][value="24"] ~ input.biohaz:nth-of-type(1n+27),
input[name="attr_strength"][value="24"] ~ input.biohaz:nth-of-type(1n+27) + span {
opacity: 1;
display: none !important;
}
input[name="attr_strength"][value="25"] ~ input.biohaz:nth-of-type(1n+28),
input[name="attr_strength"][value="25"] ~ input.biohaz:nth-of-type(1n+28) + span,
input[name="attr_strength"][value="26"] ~ input.biohaz:nth-of-type(1n+29),
input[name="attr_strength"][value="26"] ~ input.biohaz:nth-of-type(1n+29) + span,
input[name="attr_strength"][value="27"] ~ input.biohaz:nth-of-type(1n+30),
input[name="attr_strength"][value="27"] ~ input.biohaz:nth-of-type(1n+30) + span,
input[name="attr_strength"][value="28"] ~ input.biohaz:nth-of-type(1n+31),
input[name="attr_strength"][value="28"] ~ input.biohaz:nth-of-type(1n+31) + span,
input[name="attr_strength"][value="29"] ~ input.biohaz:nth-of-type(1n+32),
input[name="attr_strength"][value="29"] ~ input.biohaz:nth-of-type(1n+32) + span,
input[name="attr_strength"][value="30"] ~ input.biohaz:nth-of-type(1n+33),
input[name="attr_strength"][value="30"] ~ input.biohaz:nth-of-type(1n+33) + span,
input[name="attr_strength"][value="31"] ~ input.biohaz:nth-of-type(1n+34),
input[name="attr_strength"][value="31"] ~ input.biohaz:nth-of-type(1n+34) + span,
input[name="attr_strength"][value="32"] ~ input.biohaz:nth-of-type(1n+35),
input[name="attr_strength"][value="32"] ~ input.biohaz:nth-of-type(1n+35) + span,
input[name="attr_strength"][value="33"] ~ input.biohaz:nth-of-type(1n+36),
input[name="attr_strength"][value="33"] ~ input.biohaz:nth-of-type(1n+36) + span,
input[name="attr_strength"][value="34"] ~ input.biohaz:nth-of-type(1n+37),
input[name="attr_strength"][value="34"] ~ input.biohaz:nth-of-type(1n+37) + span,
input[name="attr_strength"][value="35"] ~ input.biohaz:nth-of-type(1n+38),
input[name="attr_strength"][value="35"] ~ input.biohaz:nth-of-type(1n+38) + span,
input[name="attr_strength"][value="36"] ~ input.biohaz:nth-of-type(1n+39),
input[name="attr_strength"][value="36"] ~ input.biohaz:nth-of-type(1n+39) + span {
opacity: 1;
display: none !important;
}
input[name="attr_strength"][value="37"] ~ input.biohaz:nth-of-type(1n+40),
input[name="attr_strength"][value="37"] ~ input.biohaz:nth-of-type(1n+40) + span,
input[name="attr_strength"][value="38"] ~ input.biohaz:nth-of-type(1n+41),
input[name="attr_strength"][value="38"] ~ input.biohaz:nth-of-type(1n+41) + span,
input[name="attr_strength"][value="39"] ~ input.biohaz:nth-of-type(1n+42),
input[name="attr_strength"][value="39"] ~ input.biohaz:nth-of-type(1n+42) + span,
input[name="attr_strength"][value="40"] ~ input.biohaz:nth-of-type(1n+43),
input[name="attr_strength"][value="40"] ~ input.biohaz:nth-of-type(1n+43) + span {
opacity: 1;
display: none !important;
}
input[name="attr_agility"][value="0"] ~ input.biohaz:nth-of-type(1n+3),
input[name="attr_agility"][value="0"] ~ input.biohaz:nth-of-type(1n+3) + span,
input[name="attr_agility"][value="1"] ~ input.biohaz:nth-of-type(1n+4),
input[name="attr_agility"][value="1"] ~ input.biohaz:nth-of-type(1n+4) + span,
input[name="attr_agility"][value="2"] ~ input.biohaz:nth-of-type(1n+5),
input[name="attr_agility"][value="2"] ~ input.biohaz:nth-of-type(1n+5) + span,
input[name="attr_agility"][value="3"] ~ input.biohaz:nth-of-type(1n+6),
input[name="attr_agility"][value="3"] ~ input.biohaz:nth-of-type(1n+6) + span,
input[name="attr_agility"][value="4"] ~ input.biohaz:nth-of-type(1n+7),
input[name="attr_agility"][value="4"] ~ input.biohaz:nth-of-type(1n+7) + span,
input[name="attr_agility"][value="5"] ~ input.biohaz:nth-of-type(1n+8),
input[name="attr_agility"][value="5"] ~ input.biohaz:nth-of-type(1n+8) + span,
input[name="attr_agility"][value="6"] ~ input.biohaz:nth-of-type(1n+9),
input[name="attr_agility"][value="6"] ~ input.biohaz:nth-of-type(1n+9) + span,
input[name="attr_agility"][value="7"] ~ input.biohaz:nth-of-type(1n+10),
input[name="attr_agility"][value="7"] ~ input.biohaz:nth-of-type(1n+10) + span,
input[name="attr_agility"][value="8"] ~ input.biohaz:nth-of-type(1n+11),
input[name="attr_agility"][value="8"] ~ input.biohaz:nth-of-type(1n+11) + span,
input[name="attr_agility"][value="9"] ~ input.biohaz:nth-of-type(1n+12),
input[name="attr_agility"][value="9"] ~ input.biohaz:nth-of-type(1n+12) + span,
input[name="attr_agility"][value="10"] ~ input.biohaz:nth-of-type(1n+13),
input[name="attr_agility"][value="10"] ~ input.biohaz:nth-of-type(1n+13) + span,
input[name="attr_agility"][value="11"] ~ input.biohaz:nth-of-type(1n+14),
input[name="attr_agility"][value="11"] ~ input.biohaz:nth-of-type(1n+14) + span,
input[name="attr_agility"][value="12"] ~ input.biohaz:nth-of-type(1n+15),
input[name="attr_agility"][value="12"] ~ input.biohaz:nth-of-type(1n+15) + span {
opacity: 1;
display: none !important;
}
input[name="attr_wits"][value="0"] ~ input.biohaz:nth-of-type(1n+3),
input[name="attr_wits"][value="0"] ~ input.biohaz:nth-of-type(1n+3) + span,
input[name="attr_wits"][value="1"] ~ input.biohaz:nth-of-type(1n+4),
input[name="attr_wits"][value="1"] ~ input.biohaz:nth-of-type(1n+4) + span,
input[name="attr_wits"][value="2"] ~ input.biohaz:nth-of-type(1n+5),
input[name="attr_wits"][value="2"] ~ input.biohaz:nth-of-type(1n+5) + span,
input[name="attr_wits"][value="3"] ~ input.biohaz:nth-of-type(1n+6),
input[name="attr_wits"][value="3"] ~ input.biohaz:nth-of-type(1n+6) + span,
input[name="attr_wits"][value="4"] ~ input.biohaz:nth-of-type(1n+7),
input[name="attr_wits"][value="4"] ~ input.biohaz:nth-of-type(1n+7) + span,
input[name="attr_wits"][value="5"] ~ input.biohaz:nth-of-type(1n+8),
input[name="attr_wits"][value="5"] ~ input.biohaz:nth-of-type(1n+8) + span,
input[name="attr_wits"][value="6"] ~ input.biohaz:nth-of-type(1n+9),
input[name="attr_wits"][value="6"] ~ input.biohaz:nth-of-type(1n+9) + span,
input[name="attr_wits"][value="7"] ~ input.biohaz:nth-of-type(1n+10),
input[name="attr_wits"][value="7"] ~ input.biohaz:nth-of-type(1n+10) + span,
input[name="attr_wits"][value="8"] ~ input.biohaz:nth-of-type(1n+11),
input[name="attr_wits"][value="8"] ~ input.biohaz:nth-of-type(1n+11) + span,
input[name="attr_wits"][value="9"] ~ input.biohaz:nth-of-type(1n+12),
input[name="attr_wits"][value="9"] ~ input.biohaz:nth-of-type(1n+12) + span,
input[name="attr_wits"][value="10"] ~ input.biohaz:nth-of-type(1n+13),
input[name="attr_wits"][value="10"] ~ input.biohaz:nth-of-type(1n+13) + span,
input[name="attr_wits"][value="11"] ~ input.biohaz:nth-of-type(1n+14),
input[name="attr_wits"][value="11"] ~ input.biohaz:nth-of-type(1n+14) + span,
input[name="attr_wits"][value="12"] ~ input.biohaz:nth-of-type(1n+15),
input[name="attr_wits"][value="12"] ~ input.biohaz:nth-of-type(1n+15) + span {
opacity: 1;
display: none !important;
}
input[name="attr_empathy"][value="0"] ~ input.biohaz:nth-of-type(1n+3),
input[name="attr_empathy"][value="0"] ~ input.biohaz:nth-of-type(1n+3) + span,
input[name="attr_empathy"][value="1"] ~ input.biohaz:nth-of-type(1n+4),
input[name="attr_empathy"][value="1"] ~ input.biohaz:nth-of-type(1n+4) + span,
input[name="attr_empathy"][value="2"] ~ input.biohaz:nth-of-type(1n+5),
input[name="attr_empathy"][value="2"] ~ input.biohaz:nth-of-type(1n+5) + span,
input[name="attr_empathy"][value="3"] ~ input.biohaz:nth-of-type(1n+6),
input[name="attr_empathy"][value="3"] ~ input.biohaz:nth-of-type(1n+6) + span,
input[name="attr_empathy"][value="4"] ~ input.biohaz:nth-of-type(1n+7),
input[name="attr_empathy"][value="4"] ~ input.biohaz:nth-of-type(1n+7) + span,
input[name="attr_empathy"][value="5"] ~ input.biohaz:nth-of-type(1n+8),
input[name="attr_empathy"][value="5"] ~ input.biohaz:nth-of-type(1n+8) + span,
input[name="attr_empathy"][value="6"] ~ input.biohaz:nth-of-type(1n+9),
input[name="attr_empathy"][value="6"] ~ input.biohaz:nth-of-type(1n+9) + span,
input[name="attr_empathy"][value="7"] ~ input.biohaz:nth-of-type(1n+10),
input[name="attr_empathy"][value="7"] ~ input.biohaz:nth-of-type(1n+10) + span,
input[name="attr_empathy"][value="8"] ~ input.biohaz:nth-of-type(1n+11),
input[name="attr_empathy"][value="8"] ~ input.biohaz:nth-of-type(1n+11) + span,
input[name="attr_empathy"][value="9"] ~ input.biohaz:nth-of-type(1n+12),
input[name="attr_empathy"][value="9"] ~ input.biohaz:nth-of-type(1n+12) + span,
input[name="attr_empathy"][value="10"] ~ input.biohaz:nth-of-type(1n+13),
input[name="attr_empathy"][value="10"] ~ input.biohaz:nth-of-type(1n+13) + span,
input[name="attr_empathy"][value="11"] ~ input.biohaz:nth-of-type(1n+14),
input[name="attr_empathy"][value="11"] ~ input.biohaz:nth-of-type(1n+14) + span,
input[name="attr_empathy"][value="12"] ~ input.biohaz:nth-of-type(1n+15),
input[name="attr_empathy"][value="12"] ~ input.biohaz:nth-of-type(1n+15) + span {
opacity: 1;
display: none !important;
}
/* Broken Indicators */
input.broken-str[value="0"] ~ div .broken-str,
input.broken-agi[value="0"] ~ div .broken-agi,
input.broken-wit[value="0"] ~ div .broken-wit,
input.broken-emp[value="0"] ~ div .broken-emp {
font-weight: bold;
color: var(--bg-clr-button-active);
}
input.broken-str[value="0"] ~ div .broken-str.input-span,
input.broken-agi[value="0"] ~ div .broken-agi.input-span,
input.broken-wit[value="0"] ~ div .broken-wit.input-span,
input.broken-emp[value="0"] ~ div .broken-emp.input-span {
box-sizing: border-box;
}
/* Fake radio using xbox for Experience/powerpoint */
input[type="radio"].xbox + span::before {
font-size: 24px;
line-height: 14px;
display: inline-block;
width: 15px;
height: 15px;
margin: 0 0 0 -20px;
content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_checked.png);
text-align: center;
vertical-align: middle;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_empty.png);
}
input.xbox {
z-index: 1;
width: 16px;
margin-top: 3px;
opacity: 0;
}
/* Removes xbox from all radios _after_ selected one */
input[type="radio"]:checked ~ input[type="radio"].xbox + span::before,
input[type="radio"].xbox:checked ~ input[type="radio"].xbox + span::before {
content: "";
}
/* Fake radio using xbox for Conditions */
input[type="checkbox"].xbox + span::before {
font-size: 24px;
line-height: 14px;
display: inline-block;
width: 15px;
height: 15px;
margin: 0 0 0 -20px;
content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_checked.png);
text-align: center;
vertical-align: middle;
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_empty.png);
}
.conditions-grid > div input.xbox {
z-index: 1;
width: 20px;
height: 20px;
margin: 1px 0 0 0;
transform: scaleX(4.5);
transform-origin: left;
opacity: 0;
}
/* Removes xbox from all radios _after_ selected one */
input[type="checkbox"].xbox:not(:checked) + span::before {
content: "";
}
/* Fake Action Button */
button[type="action"].roll-button,
button[type="roll"].roll-button {
position: relative;
font-family: "Pictos Custom";
font-size: 1.25em;
line-height: 1em;
display: flex;
justify-content: center;
box-sizing: border-box;
width: 1.25em;
height: 1.25em;
margin: 5px 2px 5px 2px;
padding: 0 0 0 0;
/* content: "t"; */
cursor: pointer;
border: 1px solid #ccc;
/* border-width: 2px;
border-style: outset;
border-bottom-color: #bbb;
border-image: initial;
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6); */
border: 0;
background-image: none;
background-color: transparent;
justify-self: center;
}
button[type="action"].roll-button:hover,
button[type="roll"].roll-button:hover {
color: var(--bg-clr-button-active);
background-color: transparent;
}
input.attack-toggle ~ button.weapons-box60:after,
input.attack-toggle ~ button.weapons-box61:after {
position: absolute;
inset: 0;
content: '';
}
input.attack-toggle:checked ~ button.weapons-box60:after { content: 'e'; }
input.attack-toggle:not(:checked) ~ button.weapons-box60:after { content: ''; }
input.attack-toggle:not(:checked) ~ button.weapons-box60 { opacity: 0; pointer-events: none; }
input.attack-toggle:not(:checked) ~ button.weapons-box61:after { content: '['; }
input.attack-toggle:checked ~ button.weapons-box61:after {
font-family: 'Material Symbols Outlined';
content: 'swords';
}
button[type="roll"].roll-button-textonly::before {
content: "";
}
button.roll-button-textonly {
border: 1px solid #ccc;
border-width: 2px;
border-style: outset;
border-bottom-color: #bbb;
border-image: initial;
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
justify-self: center;
}
button.roll-button-textonly span {
padding: 0 6px 0 0;
font-size: 0.75em;
vertical-align: bottom;
}
/* Update the Dice Pool indicator */
.box-indicator button,
.box-api-indicator button,
.dice-rolls-roll button {
z-index: 1;
color: #fff;
border: 1px solid #000;
background: var(--bg-clr-button-active);
box-shadow: 0 2px 4px 2px #000;
}
.dice-rolls-roll button[type="action"] span {
color: white;
}
.box-indicator button:hover,
.box-api-indicator button:hover,
.dice-rolls-roll button:hover {
border: 1px solid var(--bg-clr-button-active);
box-shadow: 0 1px 2px 1px #000;
}
.box-indicator,
.box-api-indicator {
position: relative;
display: flex;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
border-radius: 4px;
box-shadow: 0 2px 15px transparent;
max-height: 24px;
}
.box-indicator::after {
z-index: 0;
width: 3.75em;
margin: 0 0 -2px -5.25em;
content: "";
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
opacity: 0;
border: 10px solid var(--bg-clr-button-active);
border-radius: 4px;
background-color: transparent;
box-shadow: 0 2px 10px 5px var(--bg-clr-button-active);
max-height: 20px;
}
.box-api-indicator::after {
z-index: 0;
width: 7.5em;
margin: -2px 0 -4px -9em;
content: "";
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
opacity: 0;
border: 10px solid var(--bg-clr-button-active);
border-radius: 4px;
background-color: transparent;
box-shadow: 0 2px 10px 5px var(--bg-clr-button-active);
}
.roll-indicator:checked ~ .box-indicator::after,
.roll-indicator:checked ~ .box-api-indicator::after {
opacity: 1;
}
/* repcontrol */
/* this sets the formatting for all repcontrol buttons */
.repcontrol {
display: flex;
justify-content: flex-end;
clear: both;
}
.repcontrol_del {
position: absolute;
right: 5px;
top: 5px;
z-index: 1000;
}
.repcontrol_move {
position: absolute;
right: 35px;
top: 2px;
z-index: 1000;
}
.repcontrol_add,
.repcontrol_edit,
.repcontrol_del {
width: 2em;
height: 1.2em;
margin: 1px;
padding: 0 1px 3px 1px;
box-shadow: none;
color: transparent;
text-shadow: none;
}
.repcontrol_move {
float: right;
margin-right: 5px;
cursor: move;
}
button.btn.repcontrol_edit:after {
font-family: Pictos;
content: '(';
color: black;
margin: 0 0 0 -38px;
}
.repcontainer.ui-sortable.editmode ~ .repcontrol button.btn.repcontrol_edit:after {
margin: 0 0 0 -28px;
content: ')';
}
button.btn.repcontrol_add:after {
font-family: Pictos;
content: '&';
color: black;
margin: 0 0 0 -31px;
}
button.btn:hover.repcontrol_edit:after,
button.btn:hover.repcontrol_add:after,
button.btn:hover.repcontrol_del:after {
color: var(--bg-clr-button-active);
}
a.btn.repcontrol_move:hover {
color: var(--bg-clr-button-active);
}
button.btn.btn-danger.pictos.repcontrol_del:hover {
color: #fff;
}
/* ------------------- CHARACTER TYPE */
input[name="attr_chartype"][value="Mutant"] ~ div {
--bg-clr-0: var(--bg-clr-mutant-0);
--bg-clr-1: var(--bg-clr-mutant-1);
--bg-clr-2: var(--bg-clr-mutant-2);
--bg-clr-3: var(--bg-clr-mutant-3);
--bg-clr-4: var(--bg-clr-mutant-4);
--border-clr-0: var(--border-clr-mutant-0);
--border-clr-1: var(--border-clr-mutant-1);
--border-clr-2: var(--border-clr-mutant-2);
--border-clr-3: var(--border-clr-mutant-3);
}
input[name="attr_chartype"][value="Animal"] ~ div {
--bg-clr-0: var(--bg-clr-animal-0);
--bg-clr-1: var(--bg-clr-animal-1);
--bg-clr-2: var(--bg-clr-animal-2);
--bg-clr-3: var(--bg-clr-animal-3);
--bg-clr-4: var(--bg-clr-animal-4);
--border-clr-0: var(--border-clr-animal-0);
--border-clr-1: var(--border-clr-animal-1);
--border-clr-2: var(--border-clr-animal-2);
--border-clr-3: var(--border-clr-animal-3);
}
input[name="attr_chartype"][value="Robot"] ~ div {
--bg-clr-0: var(--bg-clr-robot-0);
--bg-clr-1: var(--bg-clr-robot-1);
--bg-clr-2: var(--bg-clr-robot-2);
--bg-clr-3: var(--bg-clr-robot-3);
--bg-clr-4: var(--bg-clr-robot-4);
--border-clr-0: var(--border-clr-robot-0);
--border-clr-1: var(--border-clr-robot-1);
--border-clr-2: var(--border-clr-robot-2);
--border-clr-3: var(--border-clr-robot-3);
}
input[name="attr_chartype"][value="Human"] ~ div {
--bg-clr-0: var(--bg-clr-human-0);
--bg-clr-1: var(--bg-clr-human-1);
--bg-clr-2: var(--bg-clr-human-2);
--bg-clr-3: var(--bg-clr-human-3);
--bg-clr-4: var(--bg-clr-human-4);
--border-clr-0: var(--border-clr-human-0);
--border-clr-1: var(--border-clr-human-1);
--border-clr-2: var(--border-clr-human-2);
--border-clr-3: var(--border-clr-human-3);
}
/* input[name="attr_chartype"][value="Mutant"] ~ div .header,
input[name="attr_chartype"][value="Mutant"] ~ div .chartype-background-darkest {
background-color: #764621;
}
input[name="attr_chartype"][value="Animal"] ~ div .header,
input[name="attr_chartype"][value="Animal"] ~ div .chartype-background-darkest {
background-color: #687569;
}
input[name="attr_chartype"][value="Robot"] ~ div .header,
input[name="attr_chartype"][value="Robot"] ~ div .chartype-background-darkest {
background-color: #035974;
}
input[name="attr_chartype"][value="Human"] ~ div .header,
input[name="attr_chartype"][value="Human"] ~ div .chartype-background-darkest {
background-color: #1b6764;
} */
.wrapper.tab-content div .header,
.wrapper.tab-content div .chartype-background-darkest {
background-color: var(--bg-clr-0);
}
/* input[name="attr_chartype"][value="Mutant"] ~ div .chartype-background-dark {
background-color: #cd8b41;
}
input[name="attr_chartype"][value="Animal"] ~ div .chartype-background-dark {
background-color: #67a83f;
}
input[name="attr_chartype"][value="Robot"] ~ div .chartype-background-dark {
background-color: #8bb2ce;
}
input[name="attr_chartype"][value="Human"] ~ div .chartype-background-dark {
background-color: #68a98f;
} */
.wrapper.tab-content div .chartype-background-dark {
background-color: var(--bg-clr-1);
}
/* input[name="attr_chartype"][value="Mutant"] ~ div .chartype-background-light {
background-color: #efd6b8;
}
input[name="attr_chartype"][value="Animal"] ~ div .chartype-background-light {
background-color: #d6ead8;
}
input[name="attr_chartype"][value="Robot"] ~ div .chartype-background-light {
background-color: #e4eef5;
}
input[name="attr_chartype"][value="Human"] ~ div .chartype-background-light {
background-color: #e2edea;
} */
.wrapper.tab-content div .chartype-background-light {
background-color: var(--bg-clr-2);
}
/* -------------------------- BORDERS */
/* input[name="attr_chartype"][value="Mutant"] ~ div .chartype-border-darkest {
border-color: #764621;
}
input[name="attr_chartype"][value="Animal"] ~ div .chartype-border-darkest {
border-color: #687569;
}
input[name="attr_chartype"][value="Robot"] ~ div .chartype-border-darkest {
border-color: #035974;
}
input[name="attr_chartype"][value="Human"] ~ div .chartype-border-darkest {
border-color: #1b6764;
} */
.wrapper.tab-content div .chartype-border-darkest {
background-color: var(--border-clr-0);
}
/* input[name="attr_chartype"][value="Mutant"] ~ div .chartype-border-dark {
border-color: #cd8b41;
}
input[name="attr_chartype"][value="Animal"] ~ div .chartype-border-dark {
border-color: #67a83f;
}
input[name="attr_chartype"][value="Robot"] ~ div .chartype-border-dark {
border-color: #8bb2ce;
}
input[name="attr_chartype"][value="Human"] ~ div .chartype-border-dark {
border-color: #68a98f;
} */
.wrapper.tab-content div .chartype-border-dark {
background-color: var(--border-clr-1);
}
/* input[name="attr_chartype"][value="Mutant"] ~ div .chartype-border-light {
border-color: #efd6b8;
}
input[name="attr_chartype"][value="Animal"] ~ div .chartype-border-light {
border-color: #d6ead8;
}
input[name="attr_chartype"][value="Robot"] ~ div .chartype-border-light {
border-color: #e4eef5;
}
input[name="attr_chartype"][value="Human"] ~ div .chartype-border-light {
border-color: #e2edea;
} */
.wrapper.tab-content div .chartype-border-light {
background-color: var(--border-clr-2);
}
/*
.character-mutations,
.character-modules,
.character-animalpowers,
.character-contacts,
.character-biomech,
.character-chassis,*/
.char-mutant,
.char-robot,
.char-animal,
.char-human,
.char-mutant-grid,
.char-robot-grid,
.char-animal-grid,
.char-human-grid,
.char-mutant-flex,
.char-robot-flex,
.char-animal-flex,
.char-human-flex,
.character-rotpoints {
display: none;
}
input[name="attr_force_show_mutations"]:checked ~ .character-mutations,
input[name="attr_force_show_animalpowers"]:checked ~ .character-animalpowers,
input[name="attr_force_show_contacts"]:checked ~ .character-contacts,
input[name="attr_force_show_biomech"]:checked ~ .character-biomech,
input[name="attr_force_show_modules"]:checked ~ .character-modules,
input[name="attr_force_show_vehicle"]:checked ~ .vehicle-grid {
display: grid;
}
input[name="attr_force_show_money"]:checked ~ .character-money,
input[name="attr_force_show_arklevels"]:checked ~ .ark-development,
input[name="attr_force_show_arkdetails"]:checked ~ .ark-details,
input[name="attr_force_show_arkdetails"]:checked ~ .ark-bosses,
input[name="attr_force_show_arkdetails"]:checked ~ .ark-other,
input[name="attr_force_show_projects"]:checked ~ .ark-projects,
input[name="attr_force_show_rot"]:checked ~ .character-rotpoints {
display: block;
}
/*
input[name="attr_force_show_mutations"]:not(:checked) ~ .character-mutations,
input[name="attr_force_show_animalpowers"]:not(:checked) ~ .character-animalpowers,
input[name="attr_force_show_contacts"]:not(:checked) ~ .character-contacts,
input[name="attr_force_show_biomech"]:not(:checked) ~ .character-biomech,
input[name="attr_force_show_modules"]:not(:checked) ~ .character-modules {
display: none;
} */
/*
input[name="attr_chartype"][value="Mutant"] ~ div .char-mutant,
input[name="attr_chartype"][value="Mutant"] ~ div .character-mutations,
input[name="attr_chartype"][value="Robot"] ~ div .char-robot,
input[name="attr_chartype"][value="Robot"] ~ div .character-modules,
input[name="attr_chartype"][value="Animal"] ~ div .char-animal,
input[name="attr_chartype"][value="Animal"] ~ div .character-animalpowers,
input[name="attr_chartype"][value="Human"] ~ div .char-human,
input[name="attr_chartype"][value="Human"] ~ div .character-contacts,
input[name="attr_chartype"][value="Human"] ~ div .character-biomech
*/
input[name="attr_chartype"][value="Mutant"] ~ div .char-mutant,
input[name="attr_chartype"][value="Robot"] ~ div .char-robot,
input[name="attr_chartype"][value="Animal"] ~ div .char-animal,
input[name="attr_chartype"][value="Human"] ~ div .char-human {
display: block;
}
input[name="attr_chartype"][value="Mutant"] ~ div .char-mutant-grid,
input[name="attr_chartype"][value="Robot"] ~ div .char-robot-grid,
input[name="attr_chartype"][value="Animal"] ~ div .char-animal-grid,
input[name="attr_chartype"][value="Human"] ~ div .char-human-grid {
display: grid;
}
input[name="attr_chartype"][value="Mutant"] ~ div .char-mutant-flex,
input[name="attr_chartype"][value="Robot"] ~ div .char-robot-flex,
input[name="attr_chartype"][value="Animal"] ~ div .char-animal-flex,
input[name="attr_chartype"][value="Human"] ~ div .char-human-flex {
display: flex;
}
input[name="attr_chartype"][value="Robot"] ~ div .appearance-grid {
display: grid;
padding: 0;
row-gap: 10px;
grid-template-columns: 0.5fr 1fr 1fr;
}
input[name="attr_chartype"][value="Robot"] ~ div .appearance-grid .header {
display: flex;
}
input[name="attr_chartype"][value="Robot"] ~ div .conditions-grid {
display: none;
}
/* ----------------------- TABS VISIBILITY */
/* Sheet Tabs */
div.tab-content {
display: none;
padding: 5px;
}
/* USING radiobuttons in v2.00 */
input.character:checked ~ div.character,
input.ark:checked ~ div.ark,
input.monster_only:checked ~ div.character,
input.settings:checked ~ div.settings {
display: inline-block;
}
/* USING buttons in v2.01 */
input.tab[value="character"] ~ div.character,
input.tab[value="monster"] ~ div.character,
input.tab[value="ark"] ~ div.ark,
input.tab[value="zonelog"] ~ div.zonelog,
input.tab[value="settings"] ~ div.settings {
display: inline-block;
}
/* input.settings:checked ~ .character-type {
display: none;
} */
/* input.monster_only:checked
~ div.character
.toggle-monster-only,
input.tab[value="monster"]
~ div.character
.toggle-monster-only {
display: none;
}
input.npc_only:checked
~ div.character
.toggle-npc-only {
display: none;
} */
/* NPC - Monster View */
.toggle-monster-only,
input.tab[value="monster"] ~ div.character .toggle-pc-only,
input.tab[value="monster"] ~ div.character ~ div .toggle-pc-only,
input.monster_only:checked ~ div.character div.toggle-pc-only,
input.monster_only:checked ~ div.character div.toggle-pc-only + span {
display: none;
}
input.tab[value="monster"] ~ div.character .monster,
input.tab[value="monster"] ~ div.character ~ div .monster,
input.tab[value="monster"] ~ div.character .toggle-monster-only,
input.tab[value="monster"] ~ div.character ~ div .toggle-monster-only,
input.monster_only:checked ~ div.character .monster,
input.monster_only:checked ~ div.character .monster + span {
display: block;
}
input.tab[value="monster"] ~ div.character .monster-grid,
input.tab[value="monster"] ~ div.character ~ div .monster-grid,
input.monster_only:checked ~ div.character .monster-grid {
display: grid;
}
input.tab[value="monster"] ~ div.character .monster-flex,
input.tab[value="monster"] ~ div.character ~ div .monster-flex,
input.monster_only:checked ~ div.character .monster-flex {
display: flex;
}
/** TABS *****************************/
div.grid-tabs {
display: inline-block;
width: 100%;
border-bottom: 1px solid #CCC;
}
/* input[type="radio"].tab, */
button.tab {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
display: inline-block;
vertical-align: bottom;
width: 100px;
width: 10%;
min-width: 75px;
height: 22px;
margin-left: -4px;
cursor: pointer;
outline: none;
opacity: 1;
content: attr(title);
-webkit-appearance: none;
-moz-appearance: none;
line-height: 18px;
color: #444;
background: #FFF;
text-align: center;
text-align-last: center;
border: 2px solid #ccc;
border-bottom: 0 !important;
border-radius: 4px 4px 0 0 !important;
-margin-bottom: -4px;
padding: 0;
}
/* input[type="radio"].tab:first-of-class, */
button.tab.character {
margin-left: 15px;
}
/* input.tab::before,
.select-chartype {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
line-height: 18px;
display: block;
width: 120px;
height: 22px;
-padding-bottom: 1px;
content: attr(title);
text-align: center;
color: #444;
border: 2px solid #ccc;
border-bottom: 0;
border-radius: 4px 4px 0 0;
background: #FFF;
} */
.select-chartype {
display: inline-block;
vertical-align: bottom;
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
line-height: 18px;
color: #444;
font-size: 1em;
width: 98px;
width: 10%;
min-width: 75px;
height: 23.5px;
margin-left: -4px;
background: #FFF;
text-align: center;
text-align-last: center;
border: 2px solid #ccc;
border-bottom: 0 !important;
border-radius: 4px 4px 0 0 !important;
margin-top: 0.5px;
margin-bottom: 0;
padding: 0;
}
/* span.select-chartype {
margin-left: -120px;
} */
/* .select-chartype:hover {
-background-color: #CCC;
opacity: 1;
} */
/* input[type="radio"].tab.settings, */
button.tab.settings {
font-family: "pictos";
width: 24px;
min-width: 24px;
height: 22px;
vertical-align: bottom;
-margin-top: -4px;
-margin-left: -2px;
-z-index: 0;
}
/* */
button.tab.settings::before {
font-family: "pictos";
content: "y";
}
/* Hover tab */
button.tab.character:hover,
button.tab.ark:hover,
button.tab.npc:hover,
button.tab.monster_only:hover,
button.tab.settings:hover,
button.tab:hover,
button.tab:active,
button.tab:focus,
input.tab.character:hover::before,
input.tab.ark:hover::before,
input.tab.npc:hover::before,
input.tab.monster_only:hover::before {
font-weight: bold !important;
-z-index: 3;
-width: 120px;
-height: 23px;
-margin: -3px 0 0 0;
-border-color: #aaa;
-border-bottom-color: transparent;
background: #EEE !important;
color: #000 !important;
}
/* Active tab */
input.tab[value="character"] ~ div button[name="act_tab_character"],
input.tab[value="ark"] ~ div button[name="act_tab_ark"],
input.tab[value="zonelog"] ~ div button[name="act_tab_zonelog"],
input.tab[value="monster"] ~ div button[name="act_tab_monster"],
input.tab[value="settings"] ~ div button[name="act_tab_settings"],
input.tab[value="character"] ~ div button[name="act_tab_character"]:hover,
input.tab[value="ark"] ~ div button[name="act_tab_ark"]:hover,
input.tab[value="zonelog"] ~ div button[name="act_tab_zonelog"]:hover,
input.tab[value="monster"] ~ div button[name="act_tab_monster"]:hover,
input.tab[value="settings"] ~ div button[name="act_tab_settings"]:hover {
-color : #fcd67b;
-background-color: #8c4110;
color: #CCC !important;
background-color: #000 !important;
border: 2px solid #000 !important;
border-bottom: 0 !important;
border-radius: 4px 4px 0 0;
}
.tab-content.zonelog .box {
margin-top: 20px;
}
/* input.tab.character:checked,
input.tab.ark:checked,
input.tab.npc:checked,
input.tab.monster_only:checked,
input.tab.settings:checked {
-z-index: 2;
opacity: 1;
border: 0;
}
input.tab.character:hover,
input.tab.ark:hover,
input.tab.npc:hover,
input.tab.monster_only:hover,
input.tab.settings:hover {
-z-index: 3;
opacity: 1;
}
input.tab.settings:hover::before {
-z-index: 3;
-width: 23px;
border-color: #aaa;
-border-bottom-color: transparent;
background: #EEE;
}
input.tab:active,
input.tab:focus {
-outline: none;
}
input.tab:hover::before {
-background: #EEE;
}
input.tab:hover::before {
-font-weight: bold;
-height: 23px;
-margin: -3px 0 0 -2px;
-background: #EEE;
}
input.tab:checked::before,
input.tab:checked:hover::before {
font-weight: bold;
-width: 120px;
-height: 23px;
-margin: -3px 0 0 -2px;
color: #fff;
border: 2px solid #000;
border-bottom: 0;
border-radius: 4px 4px 0 0;
background: #000;
}
input.tab.settings:checked::before,
input.tab.settings:checked:hover::before {
width: 24px;
}
/* hides radio selector
input.tab.character:checked::after,
input.tab.ark:checked::after,
input.tab.npc_only:checked::after,
input.tab.monster_only:checked::after,
input.tab.settings:checked::after {
opacity: 0;
}
*/
/* SHEEET *********************/
.wrapper {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
overflow: hidden;
box-sizing: border-box;
width: 100%;
min-width: 760px;
-padding: 70px 0 50px 0;
-margin-top: 10px;
color: #000;
-border: 2px solid #000;
-border-top: 1px solid #CCC;
-border-bottom: 4px solid #000;
background-color: inherit;
}
input.adv-modifiers ~ div.wrapper {
min-width: 810px;
}
/* LOGO ************************/
.logo {
max-height: 56px;
//margin-top: 11px;
margin-right: 30px;
line-height: 24px;
text-align: right;
width: fit-content;
justify-self: flex-end;
position: absolute;
right: 0;
z-index: 1000;
}
span.logo-image {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position:right;
width: 150px;
height: 55px;
margin: -17px 0 0 0;
display: inline-block;
-margin-left: 60px;
text-align: right;
}
span.logo-image.lang-sv {
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/logo-sv.png);
}
input {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
color: #000;
}
.input:focus,
input[type="text"].input:focus,
input[type="number"].input:focus,
input[type="text"].input:focus,
input[type="number"].input:focus,
input[type="text"].input-number:focus,
input[type="number"].input-number:focus,
.input-textarea:focus,
textarea:focus {
outline: none;
background-color: #ffffea;
}
.input,
input[type="text"].input,
input[type="number"].input {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
width: 100%;
height: 2.25em;
color: #000;
}
input[type="text"].input-number,
input[type="number"].input-number,
input[type="select"].input-number,
input[type="select"].input {
width: 100%;
max-height: 2.25em;
text-align: center;
align-self: center;
color: #000;
width: 2.5em;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 0.5;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button !important;
width: 25px;
position: absolute;
top: 0.125em;
bottom: 0.125em;
right: -3px;
height: 100%;
}
select.input {
width: 100%;
min-width: 2.5em;
height: 2.25em;
margin: 0;
color: #000;
text-align-last: center;
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
}
select.input:hover {
-webkit-appearance: menulist;
-moz-appearance: menulist;
padding: 0;
}
input.input.input-number-center {
display: flex;
width: 2.5em;
text-align: center;
justify-self: center;
}
input.input.input-center {
display: flex;
min-width: 2.5em;
text-align: center;
justify-self: center;
}
/* change checkbox appearance */
input[type="checkbox"], button.action-checkbox {
height: 1em;
width: 1em;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
vertical-align: text-bottom;
border: 1px solid #000;
border-radius: 4px;
outline: none;
background-color: #fff;
cursor: pointer;
}
input[type="checkbox"]:checked,
/* input.action-checkbox[value="1"] + button.action-checkbox, */
input.action-checkbox:checked + button.action-checkbox {
border: 1px solid #000;
background-color: #fff;
vertical-align: text-bottom;
}
input[type="checkbox"]:checked::after,
/* input.action-checkbox[value="1"] + button.action-checkbox::after, */
input.action-checkbox:checked + button.action-checkbox::after {
content: "3";
font-family: pictos;
color: #000;
position: relative;
top: -5px;
}
input[type="checkbox"]:active {
border: 2px solid #34495e;
}
/* end checkbox appearance */
/* change radio appearance */
input[type="radio"] {
height: 1em;
width: 1em;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
vertical-align: text-bottom;
border: 1px solid #333;
border-radius: 50%;
outline: none;
background-color: #fff;
cursor: pointer;
opacity: 0.5;
}
input[type="radio"].xbox {
opacity: 0;
}
input[type="radio"]:checked {
border: 1px solid #333;
border-radius: 50%;
background-color: #fff;
vertical-align: text-bottom;
}
input[type="radio"]:checked::after {
content: "*";
font-family: pictos;
color: #000;
position: relative;
top: -5px;
}
/* end radio appearance */
input[type="checkbox"].input {
height: 11px;
width: 11px;
justify-self: center;
align-self: center;
}
.input-textarea {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
line-height: 1em;
overflow: hidden;
width: 100%;
height: 2.25em;
min-height: 1.9em;
margin: 0;
padding: 0 2px 0 2px;
resize: vertical;
color: #000;
}
input[disabled].input-number,
input[readonly].input,
textarea[disabled].input,
textarea[readonly].input,
input[readonly].input-number {
font-style: italic;
cursor: not-allowed;
text-align: center;
color: #6e6e6e;
border-color: #6e6e6e;
background-color: #eee;
max-width: 2.5em;
justify-self: center;
}
button > input.input {
max-height: 1.75em;
}
button[type="action"] {
border-radius: 5px;
}
/* hide spinner in FF number inputs */
input[type="number"]:not(:hover)::-webkit-inner-spin-button,
input[type="number"]:not(:hover)::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
input[type="number"]:not(:hover) {
-moz-appearance: textfield;
}
/* highlight rows on hover
.itemcontrol + div:hover {
background-color: var(--bg-clr-1);
}
.skills-grid span.skills-row:hover {
background-color: var(--bg-clr-2);
}
.skills-grid span.skills-row:first-of-type:hover {
background-color: var(--bg-clr-0);
} */
/* show/hide areas */
.expand {
position: absolute;
z-index: 6;
top: -4px;
left: -3px;
width: 18px;
opacity: 0;
}
input.expand + span::before {
font-family: pictos;
font-size: 14px;
position: absolute;
z-index: 3;
top: -5px;
left: 0;
width: 13px;
height: 16px;
content: "y";
cursor: pointer;
opacity: 0.001;
color: #c3996b;
}
.vehicle-grid > input.expand + span::before {
margin-top: 2.75em;
}
input.expand + span::before,
input.expand:checked + span::before {
opacity: 0.25;
}
.repitem .weapons-grid:hover input.expand+span::before,
.repitem .monster-features-grid:hover input.expand+span::before,
.repitem .talents-grid:hover input.expand+span::before,
.armor-box10:hover input.expand+span::before,
.armor-box10-2:hover input.expand+span::before,
.armor-box10-3:hover input.expand+span::before,
.armor-box10-4:hover input.expand+span::before,
.armor-box10-5:hover input.expand+span::before,
.shield-box12:hover input.expand+span::before,
.repitem .gear-grid:hover input.expand+span::before,
.vehicle-grid:hover input.expand+span::before,
.repitem .vehiclegear-grid:hover input.expand+span::before,
.repitem .spells-grid:hover input.expand+span::before,
.skills-row:hover input.expand+span::before {
opacity: 0.85;
}
input.expand~.input-textarea,
.repitem input.expand~.input-textarea,
input.expand~.weapons-subgrid,
input.expand~.armor-row2,
input.expand~.endure-row2,
input.expand~.heal-row2,
input.expand~.insight-row2,
input.expand~.manipulate-row2,
input.expand~.shoot-row2,
input.expand~.fight-row2,
input.expand~.might-row2,
input.expand~.move-row2,
input.expand~.scout-row2,
input.expand~.sneak-row2,
input.expand~.know-the-zone-row2 {
display: none;
}
input.expand:checked~.input-textarea,
.repitem input.expand:checked~.input-textarea,
input.expand:checked~.weapons-subgrid,
input.expand:checked~.armor-row2,
input.expand:checked~.endure-row2,
input.expand:checked~.heal-row2,
input.expand:checked~.insight-row2,
input.expand:checked~.manipulate-row2,
input.expand:checked~.shoot-row2,
input.expand:checked~.fight-row2,
input.expand:checked~.might-row2,
input.expand:checked~.move-row2,
input.expand:checked~.scout-row2,
input.expand:checked~.sneak-row2,
input.expand:checked~.know-the-zone-row2 {
display: grid;
box-sizing: border-box;
margin: 0;
-border: 2px dotted #c3996b;
width: 100%;
}
input.expand:checked ~ .input-textarea {
line-height: 1.2em;
display: block;
box-sizing: border-box;
height: 4.5em;
min-height: 2em;
margin: 0;
border: 2px dotted #c3996b;
overflow: hidden;
overflow-y: auto;
}
/* character grid layout */
.character-grid {
display: grid;
-margin: -10px 0 0 0;
column-gap: 4px;
row-gap: 4px;
grid-template-columns: 42% auto 32%;
grid-template-columns: 4fr 2fr 3fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.box {
padding: 0;
-margin-bottom: 5px;
text-align: left;
border: 2px solid #000;
border-radius: 4px;
-font-size: 1.05em;
box-shadow: 2px 2px 2px #999;
}
/* Add Backgrounds to Headers
div
*/
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .attributes-box1.header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .monster-stats-box1.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-development-grid .header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header7.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-details div.header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .character-weapons div.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header2.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .skills-header-row {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header3.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .dice_pool-box1 {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .talents-box {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header9.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-other div.header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .mutant-box {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header10.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .character-rotpoints .talents-box,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-bosses div.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header3.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .talents-box {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header18.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .character-talents .talents-box {
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header12.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .dice_pool-box1,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .monster-features-box.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .character-experience {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header9.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .relationships-grid .header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .gear-grid div.header,
/* input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .gear-box6, */
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .character-money .header,
/* input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .vehiclegear-box1, */
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .consumables-grid .header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .powerpoint-box1,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-notes .header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .npc-grid div.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header13.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .appearance-box1.header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark h1[data-i18n="ark"],
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .description-box1.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header15.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .rot-box,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .information-box0.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header12b.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-projects-grid .header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .armor-grid .header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .injuries-box1.header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header12.jpg");
}
/* input.header-bgimg:checked ~ div .experience-grid */
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .spells-box,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .beasts-box,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .notes-grid .header
{
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header6.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .vehicle-box1.header,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-notes-grid h1,
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-bosses-header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header18.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-projects-header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header17.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .ark-other-grid h1 {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header19.jpg");
}
input[name="attr_chartype"][value="Mutant"] ~ input.header-bgimg:checked ~ div .log-grid-header {
background-size: cover;
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/header17.jpg");
}
/* ADD TOGGLE FOR MODIFIERS */
/* CHARACTER SHEET LAYOUT */
.character-type {
-display:flex;
-width: 100%;
-text-align: left;
-justify-self: start;
-margin: -20px 15px 25px -55px;
}
.character-type-break {
clear:left;
}
.character-heading {
padding: 5px;
margin-top: 20px;
border: 2px solid #000;
grid-column: 1/span 12;
grid-row-start: 1;
display: flex;
justify-content: space-evenly;
justify-self: stretch;
}
.character-attributes {
grid-column: 1 / span 5;
min-width: 330px;
}
.character-attributes .attributes-grid {
display: grid;
grid-template-columns: max(25%,80px) 3em 1fr 3em;
column-gap: 0.5em;
}
.character-grid .character-attributes .attributes-grid > * {
width: 100%;;
}
.character-attributes .attributes-grid .attributes-box1.header {
grid-column: 1 / 5;
}
.character-attributes .attributes-box4 input[value='0'] {
margin: 4px 8px 3px 2px;
align-self: center;
}
/* monster version of attributes */
input.tab[value="monster"]
~ div.character
.character-attributes,
input.monster_only:checked
~ div.character
.character-attributes {
background-image: none;
padding: 0;
margin: -2px 0px 0 0px;
border: 2px solid #000;
background-color: inherit;
height: 100%;
}
input.tab[value="monster"]
~ div.character
.character-attributes .attributes-box4,
input.monster_only:checked
~ div.character
.character-attributes .attributes-box4 {
padding-left: 1.7em;
width: calc(100% - 1.7em);
}
input.tab[value="monster"]
~ div.character
.character-attributes .attributes-box4 input[value='0'],
input.monster_only:checked
~ div.character
.character-attributes .attributes-box4 input[value='0'] {
margin-left: -1.6em;
}
.character-appearance {
grid-column: 6 /span 7;
-grid-column-end: 3;
}
/* .character-conditions {
padding: 10px 0 5px 0;
border: none;
grid-column: 1/3;
} */
.character-attributes,
.character-appearance {
padding: 0 0 10px 0;
margin: 0;
-border: 10px solid #000;
border: 2px solid #000;
overflow: hidden;
}
.character-injuries,
.character-weapons,
.character-beasts,
.character-notes,
.character-armor,
.character-relationships,
.character-spells,
.ark-functions,
.ark-hirelings,
.ark-stockpile,
.ark-notes {
padding: 0;
-margin: 0 0 5px 0;
-border: 7px solid #000;
border: 2px solid #000;
overflow: hidden;
-height: fit-content;
}
.character-injuries,
.character-weapons {
grid-column: 1/span 8;
overflow: hidden;
}
.character-beasts {
display: none;
grid-column: 1/span 8;
grid-row-start: 11;
overflow: hidden;
}
.character-notes {
grid-column: 1/span 8;
grid-row-start: 12;
overflow: hidden;
}
.character-armor {
height: fit-content;
grid-column: 1/span 8;
grid-row-start: 6;
-padding: 0 0 8px 0;
overflow: hidden;
}
.character-relationships,
.character-spells {
height: fit-content;
grid-column: 1/ span 8;
padding: 0 0 8px 0;
overflow: hidden;
}
.character-skills,
.character-dice_pool {
padding: 0;
-margin: -2px 0px 0 0px;
border: 2px solid #000;
overflow: hidden;
}
.character-skill-dice-box {
display: flex;
width: 100%;
-justify-content: space-evenly;
padding: 0;
border: none;
grid-column: 1/span 8;
grid-row-start: 4;
-overflow: hidden;
}
.character-skills {
grid-column: 1/ span 4;
-width: 100%;
-min-width: 18em;
-width: 50%;
}
.character-dice_pool {
grid-column: 5/ span 4;
-width: 100%;
-min-width: 230px;
-width: 50%;
-max-width: 21em;
-background-color: #ffffea;
}
input.dice_only:checked ~ div.character .character-dice_pool {
width: 100%;
}
input.dice_only:checked
~ div.character
.character-skill-dice-box {
display: flex;
min-width: 20em;
-margin-top: -1.5em;
grid-column: 1/4;
justify-self: center;
}
.character-column3 {
height: fit-content;
grid-column: 9/ span 4;
grid-row: 3/ span 7;
border: none;
}
.character-column3 .box {
margin-bottom: 4px;
}
.character-talents,
.character-mutations,
.character-modules,
.character-animalpowers,
.character-contacts,
.character-biomech {
height: fit-content;
overflow: hidden;
}
.character-gear {
height: fit-content;
overflow: hidden;
}
.character-vehicle {
height: fit-content;
overflow: hidden;
}
.character-money,
.character-consumables {
grid-column-start: 3;
padding: 0;
background-color: inherit;
overflow: hidden;
}
.character-experience {
height: 2.25em;
grid-column-start: 3;
overflow: hidden;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
-margin: 5px 0 0 0;
color: #fff;
}
.input-experience {
margin-top: 4px;
}
.character-powerpoint {
height: fit-content;
grid-column-start: 3;
padding: 0;
-border: 7px solid #000;
border: 2px solid #000;
background-color: inherit;
overflow: hidden;
}
.powerpoint-grid .powerpoint-box2,
.powerpoint-grid .powerpoint-box3 {
-padding: 0 0 10px 0;
}
/* Testing */
.powerpoint-grid .powerpoint-box2 :is(input[type='checkbox'],input[type="radio"]).xbox {
position: relative;
opacity: 1;
width: 1.5rem;
height: 1.5rem;
border:0;
background: none;
appearance: none;
margin: 4px 0 3px 0;
}
.powerpoint-grid .powerpoint-box2 .xbox:after {
position: absolute;
inset: 0;
/*font-size: 24px;*/
display: inline-block;
content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_checked.png);
text-align: center;
vertical-align: middle;
}
.powerpoint-grid .powerpoint-box2 .xbox-null:checked ~ .xbox:after,
.powerpoint-grid .powerpoint-box2 .xbox:checked ~ .xbox:after {
content: '';
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Forbidden_Lands/images/xbox_empty.png);
background-repeat: no-repeat;
background-size: contain;
}
.character-spells {
display: none;
-grid-row-start: 11;
overflow: hidden;
}
.character-relationships {
grid-row-start: 7;
overflow: hidden;
}
.character-notes {
grid-row-start: 8;
overflow: hidden;
}
/* ---------------------------------- Heading */
.heading-grid {
-align-items: stretch;
justify-self: left;
justify-content: flex-start;
width: 100%;
-display: grid;
display: flex;
margin: 0;
-grid-template-columns: 8em 150px 8em 150px 8em 4em;
-grid-template-columns: auto auto auto auto auto;
-column-gap: 1em;
-grid-template-rows: auto auto;
}
.heading-box {
margin: 5px 7px 5px 7px;
justify-self: center;
-margin-top: -5px;
}
.heading-box .label {
align-self: center;
justify-self: left;
padding-left: 1em;
display: inline-block;
position: relative;
-bottom: -5px;
-margin-top: 20px;
}
.heading-box .input-number,
.heading-box .input {
align-self: center;
justify-self: center;
text-align: center;
padding-top: 3px;
padding-bottom: 3px;
min-width: 5em;
height: 2.75em !important;
max-height: 2.75em !important;
}
.heading-box1 {
width: 200px;
}
.heading-box3,
.heading-box5 {
width: 125px;
}
.heading-box5m {
width: 200px;
}
.heading-box4 {
width: 200px;
}
.heading-box6 {
width: 250px;
}
/*
input[name="attr_chartype"][value="Mutant"] ~ div.character-grid .heading-box3,
input[name="attr_chartype"][value="Mutant"] ~ div.character-grid .heading-box9,
input[name="attr_chartype"][value="Robot"] ~ div.character-grid .heading-box3,
input[name="attr_chartype"][value="Robot"] ~ div.character-grid .heading-box7 {
display:none;
}
*/
.heading-box7,
.heading-box9 {
-text-align: center;
-position: relative;
-bottom: -17px;
}
.heading-box9.char-human .label,
.heading-box9.char-robot .label {
padding-left: 0;
}
.heading-grid div:nth-child(even),
.heading-grid div:nth-child(even) input {
-width: 11.5em;
-text-align: left;
-align-self: center;
}
.heading-grid div:nth-child(odd) {
-width: 11.5em;
-text-align: right;
-align-self: center;
}
/* ---------------------------------- Attributes */
.attributes-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
-padding: 0 0 5px 0;
padding: 0;
}
.attributes-grid > div:first-child {
margin-bottom: 0.5em;
margin-top: 0;
}
.attributes-grid > div:not(:first-child) {
display: flex;
align-items: center;
flex-wrap: wrap;
-margin: 0 -5px 5px -3px;
-border-bottom: 1px solid #000;
}
.attributes-grid > .attributes-box2,
.attributes-grid > .attributes-box6,
.attributes-grid > .attributes-box10,
.attributes-grid > .attributes-box14 {
font-size: 1.2em;
justify-content: space-around;
width: 30%;
min-width: 4.5em;
padding-left: 0.4em;
}
.attributes-grid>.attributes-box3,
.attributes-grid>.attributes-box5,
.attributes-grid>.attributes-box7,
.attributes-grid>.attributes-box9,
.attributes-grid>.attributes-box11,
.attributes-grid>.attributes-box13,
.attributes-grid>.attributes-box15,
.attributes-grid>.attributes-box17 {
justify-content: left;
width: 2.5em;
}
.attributes-grid > .attributes-box4,
.attributes-grid > .attributes-box8,
.attributes-grid > .attributes-box12,
.attributes-grid > .attributes-box16 {
-justify-content: space-between;
width: 45%;
min-width: 9.25em;
align-self: center;
}
.attributes-box1 {
width: 104%;
-margin: -2px -5px 0 -5px;
overflow: hidden;
}
.input-span {
font-size: 18px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
margin: 0 0 0 -3px;
padding: 0 0 5px 0;
box-sizing: border-box;
width: 34px;
height: 34px;
color: #555;
cursor: help;
}
.attributes-grid button[type="action"] {
width: 80%;
height: 1.65em;
padding: 0;
-font-size: .875em;
}
/* -----------------------------------Monster Tab layout */
input.tab[value="monster"] ~ div.character .character-grid,
input.monster_only:checked ~ div.character .character-grid {
-grid-template-columns: 32% 32% 35%;
-grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
margin: 20px 0 0 0;
-padding: 0;
}
input.tab[value="monster"]
~ div.character
.character-attributes,
input.monster_only:checked
~ div.character
.character-attributes {
-height: fit-content;
-width: 100%;
grid-column: 1/ span 7;
grid-row-start: 1;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 4em auto;
}
input.tab[value="monster"]
~ div.character
.monster-stat1,
input.monster_only:checked
~ div.character
.monster-stat1 {
-height: fit-content;
margin: 0;
width: 100%;
height: 4em;
grid-column: 1/3;
grid-row-start: 1;
display: flex;
}
input.tab[value="monster"]
~ div.character
.attributes-grid,
input.monster_only:checked
~ div.character
.attributes-grid {
-height: fit-content;
padding: 0;
width: 100%;
grid-column: 1/3;
grid-row-start: 2;
}
input.tab[value="monster"] ~ div.character div.attributes-box1 h1,
input.monster_only:checked ~ div.character div.attributes-box1 h1 {
display: none;
}
input.tab[value="monster"] ~ div.character .monster-features,
input.monster_only:checked ~ div.character .monster-features {
grid-column: 1/ span 8;
grid-row-start: 2;
}
input.tab[value="monster"] ~ div.character .character-weapons,
input.monster_only:checked ~ div.character .character-weapons {
grid-column: 1/ span 8;
grid-row-start: 3;
}
/* input.tab[value="monster"]
~ div.character .character-grid
.monster.character-skill-dice-box,
input.monster_only:checked
~ div.character .character-grid
.monster.character-skill-dice-box {
display: grid;
padding: 0;
margin: 0 0 0 0;
border: none;
grid-column: 1/span 12;
grid-row-start: 3;
grid-row-gap: 4px;
grid-template-columns: auto;
grid-template-rows: auto auto;
} */
input.tab[value="monster"]
~ div.character
.monster-description,
input.monster_only:checked
~ div.character
.monster-description {
grid-column: 8/span 5;
grid-row-start: 1;
}
.monster-description {
grid-column: 8/span 5;
grid-row-start: 1;
}
.monster-description .description-modifier {
margin-top: 0.25em;
display: flex;
align-items: center;
justify-content: center;
}
.monster-description .description-modifier span::after {
content: ":";
margin-right: 1em;
}
.monster-description .description-modifier input {
padding-left: 1.25em;
padding-right: 0;
}
.monster-description textarea {
margin: 3px 8px 3px 3px;
width: 95%;
min-height: 5em;
}
input.tab[value="monster"] ~ div.character .character-armor,
input.monster_only:checked ~ div.character .character-armor {
-height: fit-content;
grid-column: 1/ span 8;
grid-row-start: 4;
}
input.tab[value="monster"]
~ div.character
.character-dice_pool,
input.monster_only:checked
~ div.character
.character-dice_pool {
grid-column: 9/span 4;
grid-row: 2/ span 3;
}
input.tab[value="monster"]
~ div.character
.character-skills,
input.monster_only:checked
~ div.character
.character-skills {
margin-top: 2px;
grid-column: 9/span 4;
grid-row: 5/ span 3;
}
input.tab[value="monster"] ~ div.character .character-notes,
input.monster_only:checked ~ div.character .character-notes {
-height: fit-content;
grid-column: 1/ span 8;
grid-row-start: 5;
}
/* ---------------------------------- Monster Stats */
.monster-stat1 > *[class^="monster-stats-box"] {
display: flex;
align-items: center;
justify-self: center;
}
.monster-stat1 > .column-header {
margin-top: 1.5em;
}
/*
input.monster_only:checked ~ div.character .attributes-grid {
margin: 0;
padding: 0 1em 0 1em;
width: 37em;
float: right;
}
input.monster_only:checked
~ div.character
.attributes-grid
> div:not(:first-child) {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 3px;
} */
input.tab[value="monster"]
~ div.character
.attributes-box8
input.biohaz,
input.monster_only:checked
~ div.character
.attributes-box8
input.biohaz,
input.tab[value="monster"]
~ div.character
.attributes-box12
input.biohaz,
input.monster_only:checked
~ div.character
.attributes-box12
input.biohaz,
input.tab[value="monster"]
~ div.character
.attributes-box16
input.biohaz,
input.monster_only:checked
~ div.character
.attributes-box16
input.biohaz {
-margin: -10px -28px -10px -10px;
}
input.tab[value="monster"] ~ div.character .monster-stat1,
input.monster_only:checked ~ div.character .monster-stat1 {
-display: grid;
display: flex;
width: 100%;
-padding: 0 2px 0 2px;
-margin: 0 -6px 0 -6px;
-row-gap: 2px;
-grid-template-columns: 4em 7em auto 3em 3em 8em 4em 4em auto;
}
.monster-stat1 input[type="text"].header-h1 {
font-size: 1.65em;
width: 38%;
height: 1.35em;
margin: -15px 0 0 0;
padding: 0;
color: #333;
background-color: white;
}
.monster-stats-box1 {
height: 4em;
margin: 0;
-grid-column: 1/10;
-grid-row-start: 1;
width: 100%
}
/* .monster-stats-box2 {
grid-column-start: 1;
grid-row-start: 1;
}
.monster-stats-box3 {
grid-column-start: 2;
grid-row-start: 1;
}
.monster-stats-box4 {
grid-column-start: 3;
grid-row-start: 1;
}
.monster-stats-box5 {
grid-column-start: 4;
grid-row-start: 1;
justify-self: right;
}
.monster-stats-box6 {
grid-column-start: 5;
grid-row-start: 1;
justify-self: left;
}
.monster-stats-box6 span::before {
content: "/";
padding: 0 2px 0 0;
}
.monster-stats-box7 {
grid-column-start: 6;
grid-row-start: 1;
}
.monster-stats-box8 {
grid-column-start: 7;
grid-row-start: 1;
}
.monster-stats-box9 {
grid-column-start: 8;
grid-row-start: 1;
}
.monster-stats-box10 {
grid-column-start: 9;
grid-row-start: 1;
}
.monster-stats-box11 {
width: 3em;
grid-column-start: 1;
grid-row-start: 2;
}
.monster-stats-box12 {
grid-column-start: 2;
grid-row-start: 2;
}
.monster-stats-box13 {
grid-column-start: 3;
grid-row-start: 2;
}
.monster-stats-box14 {
width: 3em;
grid-column-start: 4;
grid-row-start: 2;
}
.monster-stats-box15 {
grid-column-start: 5;
grid-row-start: 2;
}
.monster-stats-box16 {
grid-column-start: 6;
grid-row-start: 2;
}
.monster-stats-box17 {
grid-column-start: 7;
grid-row-start: 2;
}
.monster-stats-box18 {
grid-column-start: 8;
grid-row-start: 2;
}
.monster-stats-box19 {
grid-column-start: 9;
grid-row-start: 2;
} */
/* ---------------------------------- Monster Attacks */
/*rep-items counter*/
.repeating-fields {
counter-reset: rep-items 0;
}
input[type="checkbox"].counted:checked + span::before {
font-size: 2em;
font-weight: bold;
position: absolute;
top: -3px;
left: 0;
content: counter(rep-items) " ";
counter-increment: rep-items;
color: #000;
}
input.tab[value="monster"]
~ div.character
.monster-features-grid,
input.monster_only:checked
~ div.character
.monster-features-grid {
display: grid;
column-gap: 1px;
row-gap: 2px;
grid-template-columns: 7em auto 2.5em 2.5em 5em 3em;
}
.monster-features-box {
grid-column: 1/ span 6;
grid-row-start: 1;
}
.monster-features-box1 {
grid-column-start: 1;
grid-row-start: 1;
}
.monster-features-box2 {
grid-column-start: 2;
grid-row-start: 1;
width: 98%
}
.monster-features-box3 {
grid-column-start: 3;
grid-row-start: 1;
}
.monster-features-box4 {
grid-column-start: 4;
grid-row-start: 1;
}
.monster-features-box5 {
grid-column-start: 5;
grid-row-start: 1;
}
.monster-features-box6 {
grid-column-start: 6;
grid-row-start: 1;
}
.monster-features-box7 {
grid-column-start: 7;
grid-row-start: 1;
}
.monster-features-box8 {
grid-column: 1/7;
grid-row-start: 2;
margin-left: 5px;
background-color: inherit;
}
/* -----------------------------------NPC Tab layout */
input.npc_only:checked ~ div.character .character-grid {
grid-template-columns: auto auto 22em;
margin: -4px 0 0 0;
padding: 0;
}
input.npc_only:checked ~ div.character .character-heading {
height: fit-content;
grid-column: 1/3;
grid-row-start: 1;
}
input.npc_only:checked ~ div.character .character-attributes {
height: fit-content;
grid-column: 1/2;
grid-row-start: 2;
}
input.npc_only:checked ~ div.character .character-appearance {
grid-column: 3;
grid-row-start: 2;
border: none;
}
input.npc_only:checked ~ div.character .character-weapons {
grid-column: 1/2;
grid-row: 3;
border: none;
}
input.npc_only:checked ~ div.character .character-armor {
grid-column: 1/2;
grid-row: 4;
border: none;
}
input.npc_only:checked ~ div.character .character-skills {
margin-top: 2px;
grid-column: 1;
grid-row-start: 5;
}
input.npc_only:checked
~ div.character
.box.character-skill-dice-box {
display: grid;
padding: 0;
margin: 0 0 0 0;
border: none;
grid-column: 2;
-grid-column-start: 1;
grid-row-end: span 4;
grid-row-start: 5;
}
input.npc_only:checked
~ div.character
.character-dice_pool {
grid-column-start: 2;
grid-row: span 2;
grid-row-start: 4;
}
input.npc_only:checked ~ div.character .character-column3 {
height: fit-content;
grid-column-start: 3;
grid-row-start: 5;
}
/* ---------------------------------- Details */
.details-grid {
display: grid;
padding: 2em 0 2em 0;
column-gap: 2px;
row-gap: 1em;
grid-template-columns: auto 2em 3em auto;
grid-template-rows: auto auto auto;
align-items: center;
}
.details-grid > div {
display: flex;
align-items: center;
justify-content: space-evenly;
}
.details-grid > div textarea {
height: 100%;
}
.details-box1 {
grid-column-start: 1;
grid-row-start: 1;
}
.details-box2 {
grid-column: 2/6;
grid-row-start: 1;
}
.details-box3 {
grid-column-start: 1;
grid-row-start: 2;
}
.details-box4 {
grid-column: 2/6;
grid-row-start: 2;
}
.details-box5 {
grid-column-start: 1;
grid-row-start: 3;
}
.details-box6 {
grid-column: 2/4;
grid-row-start: 3;
}
.details-box7 {
grid-column-start: 4;
grid-row-start: 3;
margin: 0 0 0 -5px;
}
.details-box8 {
grid-column-start: 5;
grid-row-start: 3;
margin: 0 0 0 -5px;
}
/* ---------------------------------- Appearance */
.appearance-grid {
display: grid;
padding: 0;
row-gap: 10px;
grid-template-columns: 5em auto;
grid-template-rows: 3em auto auto auto;
}
.appearance-grid > div:first-child {
-padding: 0 -10px 0 -10px;
}
.appearance-grid > .appearance-box {
display: flex;
-align-items: flex-start;
justify-content: space-evenly;
}
.appearance-grid .label {
padding-top: 8px;
}
.appearance-grid > div textarea {
height: 100%;
}
.chassis-grid div .input-textarea,
.appearance-grid div .input-textarea {
height: 3.5em;
min-height: 3em;
margin-right: 5px;
}
.appearance-box1 {
grid-column: 1/3;
grid-row-start: 1;
}
.appearance-box2 {
grid-row-start: 2;
}
.appearance-box3 {
grid-row-start: 2;
}
.appearance-box4 {
grid-row-start: 3;
}
.appearance-box5 {
grid-row-start: 3;
}
.appearance-box6 {
grid-row-start: 4;
}
.appearance-box7 {
grid-row-start: 4;
}
.chassis-box {
padding: 0px 8px 0px 10px;
}
.chassis-box .label {
padding-left: 10px;
padding-top: 0;
}
.chassis-box1 {
grid-row-start: 1;
grid-column: 3/5;
}
.chassis-box2 {
grid-row-start: 2;
grid-column-start: 3;
}
.chassis-box3 {
grid-row-start: 2;
grid-column-start: 4;
}
.chassis-box4 {
grid-row-start: 3;
grid-column-start: 3;
}
.chassis-box5 {
grid-row-start: 3;
grid-column-start: 4;
}
.chassis-box6 {
grid-row-start: 4;
grid-column-start: 3;
}
.chassis-box7 {
grid-row-start: 4;
grid-column-start: 4;
}
/* ---------------------------------- Conditions */
.conditions-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 4px;
margin: 0 10px 0 10px;
align-content: center;
}
.conditions-grid > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.conditions-grid > div input.xbox {
transform: none;
}
.conditions-box2 {
grid-column-start: 1;
grid-row-start: 2;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.conditions-box3 {
grid-column-start: 1;
grid-row-start: 3;
font-size: 0.8em;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-bottom: 3px;
}
.conditions-box4 {
grid-column-start: 2;
grid-row-start: 2;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.conditions-box5 {
grid-column-start: 2;
grid-row-start: 3;
font-size: 0.8em;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-bottom: 3px;
}
.conditions-box6 {
grid-column-start: 3;
grid-row-start: 2;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.conditions-box7 {
grid-column-start: 3;
grid-row-start: 3;
font-size: 0.8em;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-bottom: 3px;
}
.conditions-box8 {
grid-column-start: 4;
grid-row-start: 2;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.conditions-box9 {
grid-column-start: 4;
grid-row-start: 3;
font-size: 0.8em;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding-bottom: 3px;
}
input.conditions-hungry:checked ~ div > span.conditions-hungry,
input.conditions-sleepy:checked ~ div > span.conditions-sleepy,
input.conditions-thirsty:checked ~ div > span.conditions-thirsty,
input.conditions-cold:checked ~ div > span.conditions-cold {
-font-weight: bold;
-color: var(--bg-clr-button-active);
color: #eee;
}
input.conditions-hungry:checked ~ div.conditions-hungry,
input.conditions-sleepy:checked ~ div.conditions-sleepy,
input.conditions-thirsty:checked ~ div.conditions-thirsty,
input.conditions-cold:checked ~ div.conditions-cold {
background-color: var(--bg-clr-button-active);
}
/* ---------------------------------- Critical Injuries */
.injuries-grid {
display: grid;
padding: 0 0 2px 0;
column-gap: 2px;
row-gap: 2px;
grid-template-columns: 1fr 6em 6em 2fr 8em;
}
.injuries-box1 {
grid-column: 1/6;
grid-row-start: 1;
}
.injuries-box2 {
grid-column-start: 1;
grid-row-start: 1;
}
.injuries-box3 {
grid-column-start: 2;
grid-row-start: 1;
}
.injuries-box4 {
grid-column-start: 3;
grid-row-start: 1;
}
.injuries-box5 {
grid-column-start: 4;
grid-row-start: 1;
}
.injuries-box6 {
grid-column-start: 5;
grid-row-start: 1;
}
.injuries-box7 {
grid-column: 1/6;
grid-row-start: 2;
}
.injuries-box8 {
grid-column-start: 1;
}
.injuries-box13 {
display: none;
}
/* ---------------------------------- Weapons */
.weapons-grid {
display: grid;
-padding: 0 0 2px 0;
column-gap: 2px;
-row-gap: 2px;
grid-template-columns: auto 4em 2.25em 4px 2.25em 2.25em 4px 2.25em 2.25em 2.25em 2.25em 4px 2.25em 2.25em 2.25em 4px 2em 2em;
}
.weapons-box0 {
grid-column: 1/19;
grid-row-start: 1;
}
.weapons-box0.header h1 {
width: 90%;
}
.weapons-box-header {
grid-column: 1/5;
grid-row-start: 1;
}
.weapons-box-skill {
grid-column: 5/7;
grid-row-start: 1;
}
.weapons-box-gear {
grid-column: 8/12;
grid-row-start: 1;
}
.weapons-box-damage {
grid-column: 12/15;
grid-row-start: 1;
}
.weapons-box.readonly.separator {
line-height: 100%;
font-size: 2.25em;
align-self: center;
padding-bottom: 2px;
color: #999;
}
.weapons-box1 { grid-row-start: 1; grid-column-start: 18; }
.weapons-box2 { grid-row-start: 1; grid-column-start: 17; }
.weapons-box3 { grid-row-start: 1; grid-column-start: 1; }
.weapons-box4 { grid-row-start: 1; grid-column-start: 2; }
.weapons-box5 { grid-row-start: 1; grid-column-start: 3; }
.weapons-box6 { grid-row-start: 1; grid-column-start: 4; }
.weapons-box7 { grid-row-start: 1; grid-column-start: 5; }
.weapons-box8 { grid-row-start: 1; grid-column-start: 6; }
.weapons-box9 { grid-row-start: 1; grid-column-start: 7; }
.weapons-box11 { grid-row-start: 1; grid-column-start: 8; justify-self: right; }
.weapons-box12 { grid-row-start: 1; grid-column-start: 9; justify-self: left; }
.weapons-box13 { grid-row-start: 1; grid-column-start: 10; }
.weapons-box14 { grid-row-start: 1; grid-column-start: 11; }
.weapons-box16 { grid-row-start: 1; grid-column-start: 12; }
.weapons-box17 { grid-row-start: 1; grid-column-start: 13; }
.weapons-box18 { grid-row-start: 1; grid-column-start: 14; }
.weapons-box19 { grid-row-start: 1; grid-column-start: 15; }
.weapons-box20 { grid-row-start: 1; grid-column-start: 16; }
.weapons-box12 span::before { content: "/"; padding: 0 2px 0 2px; }
.weapons-box-repeating {
grid-column: 1/19;
-grid-row-start: 2;
}
.weapons-box30 {
grid-column-start: 1;
}
.weapons-box33,
.weapons-box37,
.weapons-box47 {
align-self:center;
justify-self: center;
-margin-right: 5px;
}
.weapons-subgrid {
grid-column: 1/19;
grid-row-start: 3;
display: grid;
grid-template-columns: 3em 2.25em 4em 4em 2.5em 2.25em 3em 1em 5em auto 0;
padding: 0 0 8px 45px;
column-gap: 6px;
font-size: 0.9em;
justify-items: center;
align-items: baseline;
}
.weapons-box71 {
grid-column-start: 1;
grid-row-start: 1;
}
.weapons-box71,
.weapons-box73,
.weapons-box75,
.weapons-box77,
.weapons-box79 {
justify-self: flex-end;
}
/* .weapons-box-repeating .repitem:nth-of-type(2n) .weapons-grid {
background-color: var(--bg-clr-3);
} */
/* ----------------------------------Skill and Dice Pool grids */
.character-skills .repcontrol,
.character-skills .itemcontrol {
display: flex;
justify-content: flex-start;
float: left;
}
.character-skills .repcontainer .repitem .itemcontrol .repcontrol_del {
-position: absolute;
right: 5px;
top: 5px;
z-index: 1000;
}
.character-skills .repcontainer .repitem .itemcontrol .repcontrol_move {
-position: absolute;
right: 35px;
top: 2px;
z-index: 1000;
}
.dice-header {
grid-area: dice-header;
}
.character-dice_pool {
min-width: 235px;
}
/* .dice_pool-grid {
display: grid;
grid-template-areas:
"dice-header dice-header dice-header"
"dice-base dice-skill dice-gear"
"dice-rolls dice-rolls dice-rolls"
"dice-preset dice-preset dice-preset"
"dice-footer dice-footer dice-footer";
grid-template-columns: 1fr 1fr 1fr;
} */
.dice_pool-grid {
display: grid;
grid-template-areas:
"dice-header dice-header dice-header"
"dice-base dice-skill dice-gear"
"dice-rolls dice-rolls dice-rolls"
"dice-rolls-clear dice-rolls-clear dice-rolls-d6"
"dice-rolls-info dice-rolls-info dice-rolls-d66"
"dice-rolls-info dice-rolls-info dice-rolls-d666"
"dice-rolls-info dice-rolls-info dice-rolls-init";
grid-template-columns: 1fr 1fr 1fr;
}
.character-skill-total {
justify-self: right;
}
.dice-base {
display: grid;
margin: 0;
padding: 2px 2px 0 2px;
text-align: center;
border: 1px solid #000;
-background-color: white;
background-color: rgb(209, 201, 112);
grid-area: dice-base;
grid-template-areas: "dice-base-header dice-base-header" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2" "dice-base-col1 dice-base-col2";
grid-template-columns: 1fr 1fr;
grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
justify-items: center;
}
.dice-base2,
.dice-skill2,
.dice-gear2 {
display: grid;
margin: 0;
padding: 0;
text-align: center;
border: 1px solid #000;
grid-template-rows: 1.5em auto;
justify-items: center;
}
.dice-base2 {
grid-area: dice-base;
background-color: var(--bg-clr-dicepool-base);
grid-template-areas: "dice-base-header" "dice-base-col";
}
.dice-skill2 {
grid-area: dice-skill;
background-color: var(--bg-clr-dicepool-skill);
grid-template-areas: "dice-skill-header" "dice-skill-col";
}
.dice-gear2 {
grid-area: dice-gear;
background-color: var(--bg-clr-dicepool-gear);
grid-template-areas: "dice-gear-header" "dice-gear-col";
}
.dice-base-header { grid-area: dice-base-header; }
.dice-skill-header { grid-area: dice-skill-header; }
.dice-gear-header { grid-area: dice-gear-header; }
.dice-col {
display: grid;
flex-direction: column-reverse;
width: 100%;
padding-bottom: 10px;
grid-template-areas:
"six seven"
"five eight"
"four nine"
"three ten"
"two eleven"
"one twelve"
"zero thirteen"
}
.dice-base-col {
grid-area: dice-base-col;
--dice-color: var(--bg-dice-yellow);
}
.dice-skill-col {
grid-area: dice-skill-col;
--dice-color: var(--bg-dice-green);
}
.dice-gear-col {
grid-area: dice-gear-col;
--dice-color: var(--bg-dice-black);
}
.dice-col label,
.dice-col button.add-die {
display: inline-block;
display: flex;
align-content: center;
justify-content: center;
justify-self: center;
align-self: center;
width: clamp(28px,28px,28px);
height: clamp(28px,28px,28px);
text-align: center;
vertical-align: middle;
line-height: 28px;
color: #000;
font-weight: normal;
font-size: 1em;
cursor: pointer;
background-color: #fff;
border: solid 2px #000;
border-radius: 5px;
box-shadow: 2px 2px 2px #000;
padding: 0;
margin: 2px 4px 2px 2px;
}
.dice-col label {
background-color: var(--dice-color);
color: var(--fg-clr-4);
}
.dice-base-col label {
color: var(--fg-clr-0);
}
.dice-skill-col label.negative {
background-color: var(--bg-dice-red);
}
.dice-col input[type="radio"]:checked + label {
border: 2px dotted white;
}
.dice-col input[type="radio"]:checked + label ~ label {
background-color: #fff;
color: var(--fg-clr-0);
}
.dice-col label.zero-dice {
background-color: #fff;
color: var(--fg-clr-0);
}
input.no-dice[value="0"] ~ .dice-col label.zero-dice {
background-color: #fff;
color: var(--fg-clr-0);
border: 2px dotted black;
}
input.no-dice[value="-1"] ~ .dice-col label.positive,
input.no-dice[value="-2"] ~ .dice-col label.positive,
input.no-dice[value="-3"] ~ .dice-col label.positive {
background-color: #fff;
color: var(--fg-clr-0);
}
/* .dice-col .add-die:checked,
.dice-col .add-die:checked + label {
display: none;
}
.dice-col button.add-die {
display: none;
}
.dice-col input.add-die:checked ~ button {
display: flex;
grid-area: thirteen;
background-color: var(--dice-color);
} */
.dice-col button.add-die {
display: flex;
grid-area: thirteen;
background-color: var(--dice-color);
}
.dice-col label:nth-of-type(1) {
grid-area: zero;
background-color: #fff;
color: var(--fg-clr-0); }
.dice-col label:nth-of-type(2) { grid-area: one; }
.dice-col label:nth-of-type(3) { grid-area: two; }
.dice-col label:nth-of-type(4) { grid-area: three; }
.dice-col label:nth-of-type(5) { grid-area: four; }
.dice-col label:nth-of-type(6) { grid-area: five; }
.dice-col label:nth-of-type(7) { grid-area: six; }
.dice-col label:nth-of-type(8) { grid-area: seven; }
.dice-col label:nth-of-type(9) { grid-area: eight; }
.dice-col label:nth-of-type(10) { grid-area: nine; }
.dice-col label:nth-of-type(11) { grid-area: ten; }
.dice-col label:nth-of-type(12) { grid-area: eleven; }
.dice-col label:nth-of-type(13) { grid-area: twelve; }
.dice-col label:nth-of-type(14) { grid-area: thirteen; }
.dice-base-col2 {
display: flex;
flex-direction: column;
grid-area: dice-base-col2;
}
.dice-base-col1 {
display: flex;
flex-direction: column;
grid-area: dice-base-col1;
}
.dice-skill {
display: grid;
margin: 0;
padding: 2px 2px 0 2px;
text-align: center;
-color: #fff;
color: #000;
border: 1px solid #000;
-background-color: #db5f5f;
background-color: #57aa57;
grid-area: dice-skill;
grid-template-areas: "dice-skill-header dice-skill-header" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2" "dice-skill-col1 dice-skill-col2";
grid-template-columns: 1fr 1fr;
grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
justify-items: center;
}
/* .dice-skill-header {
grid-area: dice-header;
} */
.dice-skill-col2 {
display: flex;
flex-direction: column;
grid-area: dice-skill-col2;
}
.dice-skill-col1 {
display: flex;
flex-direction: column;
grid-area: dice-skill-col1;
}
.dice-gear {
display: grid;
margin: 0;
padding: 2px 2px 0 2px;
text-align: center;
color: #fff;
border: 1px solid #000;
background-color: #404040;
grid-area: dice-gear;
grid-template-areas: "dice-gear-header dice-gear-header" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2" "dice-gear-col1 dice-gear-col2";
grid-template-columns: 1fr 1fr;
grid-template-rows: 2.5em 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
justify-items: center;
}
/* .dice-gear-header {
grid-area: dice-gear-header;
} */
.dice-gear-header span {
color: #dedede;
}
.dice-gear-col2 {
display: flex;
flex-direction: column;
grid-area: dice-gear-col2;
}
.dice-gear-col1 {
display: flex;
flex-direction: column;
grid-area: dice-gear-col1;
}
/* .dice-rolls {
display: grid;
justify-content: space-between;
padding: 5px;
grid-area: dice-rolls;
grid-template-areas: "dice-rolls1 dice-rolls2";
grid-template-columns: 1fr 1fr;
} */
/* .dice-rolls {
grid-template-columns: auto auto auto;
grid-template-areas:
"dice-roll dice-roll dice-roll"
"dice-rolls-clear dice-rolls-clear dice-rolls-d66"
"dice-rolls-api dice-rolls-api dice-rolls-d666"
"dice-rolls-init";
} */
/* .dice-rolls1 {
display: flex;
flex-flow: row;
justify-content: space-between;
-margin-top: 10px;
-padding: 10px;
grid-area: dice-rolls1;
grid-template-areas: "dice-rolls-roll dice-rolls-push";
} */
.dice-roll-input {
grid-area: dice-rolls;
width: auto;
padding: 5px;
display: flex;
flex-wrap: nowrap;
justify-content: stretch;
justify-items: stretch;
}
.dice-roll-input button,
.dice-rolls-roll {
grid-area: dice-rolls-roll;
display: flex;
justify-content: center;
justify-items: center;
align-content: center;
align-items: center;
}
/* .dice-rolls button {
max-height: 20px;
} */
.dice-rolls-roll button span {
color: white;
font-size: 14px;
}
.dice-preset {
grid-area: dice-preset;
flex: 1;
padding-right: 10px;
}
.dice-preset input[type="text"] {
width: 100%;
}
/* .dice-rolls2 {
display: flex;
flex-flow: column;
justify-content: space-between;
-margin-top: 10px;
-padding: 10px;
grid-area: dice-rolls2;
grid-template-areas: "dice-rolls-d66" "dice-rolls-d666" "dice-rolls-init";
} .dice-rolls-roll {
display: flex;
justify-content: flex-start;
padding-bottom: 10px;
grid-area: dice-rolls-roll;
}
.dice-rolls-push {
display: flex;
justify-content: flex-start;
grid-area: dice-rolls-push;
}*/
.dice-rolls-init {
display: flex;
justify-content: flex-end;
padding-block: 2px;
grid-area: dice-rolls-init;
}
.dice-rolls-d6 {
display: flex;
justify-content: flex-end;
padding-block: 2px;
grid-area: dice-rolls-d6;
}
.dice-rolls-d66 {
display: flex;
justify-content: flex-end;
padding-block: 2px;
grid-area: dice-rolls-d66;
}
.dice-rolls-d666 {
display: flex;
justify-content: flex-end;
padding-block: 2px;
grid-area: dice-rolls-d666;
}
.dice-rolls-info {
position: relative;
display: block;
justify-content: center;
align-items: flex-end;
padding: 4px;
text-align: center;
grid-area: dice-rolls-info;
}
.dice-rolls-info > div {
display:flex;
flex-direction:row;
justify-items: flex-start;
align-self: flex-start;
align-content: center;
padding-top: 0.5rem;
padding-left: 0.5rem;
}
.dice-rolls-info label {
width: auto;
font-size: 1.25rem;
font-weight: normal;
vertical-align: middle;
padding-left: 0.5rem;
margin-bottom: 0;
cursor:pointer;
}
.dice-rolls-info input {
vertical-align: middle;
align-self: center;
}
.dice-rolls-info input:checked::after {
top: -5px;
}
input[type="checkbox"].api-toggle-show:checked ~ .dice-rolls-pushable {
display: none;
}
input[type="checkbox"].hide-whisper:checked ~ .dice-rolls-whisper {
display: none;
}
.dice-rolls-info .dice-rolls-whisper {
display: flex;
flex-direction: column;
}
.dice-rolls-info .dice-rolls-whisper div {
display: flex;
flex-direction: row;
}
.dice-rolls-whisper input[type="radio"] + label {
color: #333;
background-color: var(--color-surface2);
border: 1px solid grey;
border-radius: 2px;
padding: 0.5rem;
box-shadow: 1px 1px 1px darkgrey;
line-height: 1rem;
height: 1.125rem;
align-self: center;
margin-left: 0.5rem;
}
.dice-rolls-whisper input[type="radio"]:checked + label {
background-color: var(--bg-clr-0);
color: #CCC;
}
/* input[type="hidden"].whisper-roll[value="1"] ~ input#whisper-toggle::after {
content: '3';
}
input[type="hidden"].whisper-roll[value="0"] ~ input#whisper-toggle::after {
content: '*';
font-family: pictos;
color: #000;
position: relative;
top: -5px;
} */
.dice-rolls-smaller {
height: 17px;
font-size: 1em !important;
}
/* */
.dice-preset-header {
font-size: 12px;
margin-bottom: 0px;
float: left;
justify-self: flex-start;
text-indent: 5px;
}
.dice-preset-preset {
text-align: center;
border-width: 0 1px 1px 1px;
}
.dice-footer-clear {
grid-area: dice-rolls-clear;
}
.dice-footer-api {
grid-area: dice-rolls-api;
}
.dice-footer-clear,
.dice-footer-api {
justify-self: flex-start;
width: auto;
align-self: center;
width: fit-content;
margin-left: 5px;
}
.dice-footer-api button[type="action"].api-button:focus,
.dice-footer-api button[type="action"].api-button:focus-visible {
border-width: 1px;
border-style: solid;
border-image: unset;
color: inherit;
border: 1px solid lightblue;
background: var(--color-surface2);
}
/* api dice toggle */
button.api-button {
border: 1px solid lightblue;
box-shadow: 2px 2px 3px darkgrey;
width: auto;
justify-self: flex-start;
}
input[type="checkbox"].hidden,
.hidden {
display: none;
}
div.api-roll.dice-rolls-roll,
div.template-roll.dice-rolls-roll,
div.computed-roll.dice-rolls-roll {
display: none;
}
input.hidden.api-toggle-show:checked ~ div div.api-roll,
input.hidden.api-toggle-show:not(:checked) ~ div .computed-roll {
display: flex;
}
.dice-rolls-roll button::before {
content: "" !important;
}
input.hidden.api-toggle-show:checked
~ div div.api-roll
button::after {
margin-right: 2px;
font-size: 14px;
content: "(API)";
}
input.api-toggle-show:checked ~ .dice-footer-api button {
background: var(--bg-clr-button-active);
color: white;
}
/* ---------------------------------- Experience */
.experience-grid {
display: grid;
margin-right: -1px;
grid-template-columns: 4.25fr 2.2em 1fr;
background: transparent;
}
.experience-box1 {
grid-column-start: 1;
grid-row-start: 1;
-width: 104%;
}
.experience-box1 h1 {
margin: 0 12px 0 0;
}
.experience-box2 {
z-index: 1;
grid-column-start: 2;
grid-row-start: 1;
}
.experience-box3 {
grid-column-start: 3;
grid-row-start: 1;
}
.experience-grid .header > .input {
z-index: 1;
}
.experience-grid .header > h1 {
margin: 0;
}
/* ---------------------------------- Power */
.powerpoint-grid {
display: grid;
grid-template-columns: auto 3em;
overflow: hidden;
-width: 100%;
}
.powerpoint-box1 {
grid-column: 1/3;
grid-row-start: 1;
margin: 0;
}
.powerpoint-box2 {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 3em;
grid-column: 1/2;
grid-row-start: 2;
}
.powerpoint-box2 input[type="radio"] {
margin: 4px 5px 3px 2px;
width: 0.95em;
height: 0.95em;
align-self: center;
}
.powerpoint-box2 input[type="radio"].xbox-null {
margin-left: 8px;
}
.powerpoint-box3 {
display: flex;
align-items: center;
justify-content: center;
height: 3em;
grid-column-start: 2;
grid-row-start: 2;
}
.powerpoint-box3 span {
-margin: 0 3px 0 3px;
}
input[type="checkbox"][name="attr_powerincrease"]:not(:checked) + div input.powerincrease,
input[type="checkbox"][name="attr_powerincrease"]:not(:checked) + div input.powerincrease + span {
display: none;
}
input[type="checkbox"][name="attr_powerincrease"]:checked + div input.powerincrease {
display: block;
}
input[type="checkbox"][name="attr_powerincrease"]:checked + div input {
margin-left: 0px;
}
/* ---------------------------------- Talents */
.talents-grid {
display: grid;
column-gap: 2px;
row-gap: 2px;
grid-template-columns: auto 4em 3em;
-grid-template-columns: auto 4em;
}
.talents-box {
grid-column: 1/4;
grid-row-start: 1;
}
.talents-box1 {
-grid-column-start: 1; /* Enable to show Power level and action button */
grid-column: 1/4;
grid-row-start: 1;
padding-left: 10px;
}
.talents-box2 {
display: none; /* Remove to show Power level dropdown */
grid-column-start: 2;
grid-row-start: 1;
justify-self: center;
line-height: unset;
padding-bottom: 0;
}
.talents-box3 {
display: none; /* Remove to show Power action button */
grid-column-start: 3;
grid-row-start: 1;
justify-self: center;
}
.talents-box4 {
grid-column: 1/4;
grid-row-start: 2;
}
.character-biomech .talents-box1 {
grid-column: 1/4;
}
.character-rotpoints .talents-box1 {
display: flex;
gap: 8px;
padding: 5px 8px 5px 10px;
align-items: center;
justify-items: right;
justify-content: flex-end;
}
.character-rotpoints .powerpoint-box3 button {
width: 15px;
height: 22px;
}
/* input[name="attr_rot_permanent"][value="0"] ~ input:nth-of-type(1n+1) + span, */
input[name="attr_rot_permanent"][value="1"] ~ .rot1,
input[name="attr_rot_permanent"][value="2"] ~ .rot1,
input[name="attr_rot_permanent"][value="2"] ~ .rot2,
input[name="attr_rot_permanent"][value="3"] ~ .rot1,
input[name="attr_rot_permanent"][value="3"] ~ .rot2,
input[name="attr_rot_permanent"][value="3"] ~ .rot3,
input[name="attr_rot_permanent"][value="4"] ~ .rot1,
input[name="attr_rot_permanent"][value="4"] ~ .rot2,
input[name="attr_rot_permanent"][value="4"] ~ .rot3,
input[name="attr_rot_permanent"][value="4"] ~ .rot4,
input[name="attr_rot_permanent"][value="5"] ~ .rot1,
input[name="attr_rot_permanent"][value="5"] ~ .rot2,
input[name="attr_rot_permanent"][value="5"] ~ .rot3,
input[name="attr_rot_permanent"][value="5"] ~ .rot4,
input[name="attr_rot_permanent"][value="5"] ~ .rot5,
input[name="attr_rot_permanent"][value="6"] ~ .rot1,
input[name="attr_rot_permanent"][value="6"] ~ .rot2,
input[name="attr_rot_permanent"][value="6"] ~ .rot3,
input[name="attr_rot_permanent"][value="6"] ~ .rot4,
input[name="attr_rot_permanent"][value="6"] ~ .rot5,
input[name="attr_rot_permanent"][value="6"] ~ .rot6,
input[name="attr_rot_permanent"][value="7"] ~ .rot1,
input[name="attr_rot_permanent"][value="7"] ~ .rot2,
input[name="attr_rot_permanent"][value="7"] ~ .rot3,
input[name="attr_rot_permanent"][value="7"] ~ .rot4,
input[name="attr_rot_permanent"][value="7"] ~ .rot5,
input[name="attr_rot_permanent"][value="7"] ~ .rot6,
input[name="attr_rot_permanent"][value="7"] ~ .rot7,
input[name="attr_rot_permanent"][value="8"] ~ .rot1,
input[name="attr_rot_permanent"][value="8"] ~ .rot2,
input[name="attr_rot_permanent"][value="8"] ~ .rot3,
input[name="attr_rot_permanent"][value="8"] ~ .rot4,
input[name="attr_rot_permanent"][value="8"] ~ .rot5,
input[name="attr_rot_permanent"][value="8"] ~ .rot6,
input[name="attr_rot_permanent"][value="8"] ~ .rot7,
input[name="attr_rot_permanent"][value="8"] ~ .rot8,
input[name="attr_rot_permanent"][value="9"] ~ .rot1,
input[name="attr_rot_permanent"][value="9"] ~ .rot2,
input[name="attr_rot_permanent"][value="9"] ~ .rot3,
input[name="attr_rot_permanent"][value="9"] ~ .rot4,
input[name="attr_rot_permanent"][value="9"] ~ .rot5,
input[name="attr_rot_permanent"][value="9"] ~ .rot6,
input[name="attr_rot_permanent"][value="9"] ~ .rot7,
input[name="attr_rot_permanent"][value="9"] ~ .rot8,
input[name="attr_rot_permanent"][value="9"] ~ .rot9,
input[name="attr_rot_permanent"][value="10"] ~ .rot1,
input[name="attr_rot_permanent"][value="10"] ~ .rot2,
input[name="attr_rot_permanent"][value="10"] ~ .rot3,
input[name="attr_rot_permanent"][value="10"] ~ .rot4,
input[name="attr_rot_permanent"][value="10"] ~ .rot5,
input[name="attr_rot_permanent"][value="10"] ~ .rot6,
input[name="attr_rot_permanent"][value="10"] ~ .rot7,
input[name="attr_rot_permanent"][value="10"] ~ .rot8,
input[name="attr_rot_permanent"][value="10"] ~ .rot9,
input[name="attr_rot_permanent"][value="10"] ~ .rot10 {
content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/dotx_redx.png');;
}
/* special handling for Powers boxes WITH Power levels and action buttons
.character-talents .talents-box1 {
grid-column: 1/3;
}
.character-talents .talents-box2 {
grid-column: 3;
}
.character-talents .talents-box3 {
display: block;
} */
/* special handling for Talent box */
.character-talents .talents-box1 {
grid-column: 1/3;
}
.character-talents .talents-box2 {
display: block;
grid-column: 3;
padding-top: 1.75em;
}
.character-talents select.talents-box2 {
padding-top: 0;
}
.character-talents .talents-box3 {
display: none;
}
/* ---------------------------------- Skills */
.skills-row {
margin: 0;
padding: 2px 0 2px 0;
}
.skills-header-row {
margin: 0;
justify-content: unset !important;
background-color: transparent;
}
.skills-header-row .skills-header-box h1 {
margin-inline: 50% 40%;
}
.skills-header-row .column-header {
margin-top: 20px;
}
.skills-row select.input, .skills-row input.input-number {
-min-width: 2.5em;
-max-width: 2.5em;
height: 2.25em
}
.skills-row button {
padding-left: 0;
padding-right: 0;
}
/* list ordering of skills by attribute group */
.skills-grid {
display: flex;
flex-direction: column;
}
/* Skill re-ordering */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(2) { order: 8;} /* Comprehend */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(3) { order: 1;} /* Endure */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(4) { order: 3;} /* Fight */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(5) { order: 2;} /* Force */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(6) { order: 12;} /* Heal */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(7) { order: 9;} /* Know the Zone */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(8) { order: 11;} /* Manipulate */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(9) { order: 5;} /* Move */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(10) { order: 7;} /* Scout */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(11) { order: 10;} /* Sense emotion */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(12) { order: 6;} /* Shoot */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(13) { order: 4;} /* Sneak */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(14) { order: 13;} /* Profession */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(15) { order: 14;} /* Profession */
.skill-order-group:checked ~ .skills-grid span.skills-row:nth-of-type(16) { order: 15;} /* Profession */
/* end list order */
/* .skills-grid>span, */
.skills-row {
-position: relative;
display: grid;
padding: 1px 0 1px 0;
column-gap: 2px;
row-gap: 0;
grid-template-columns: auto 2.25em 2.5em 2.5em 2.5em 2.5em;
-align-items: center;
}
/* .skills-grid > span > div,
.skills-row > div {
display: flex;
align-items: center;
justify-content: space-evenly;
padding: 0;
height: auto;
width: 103%;
} */
.skill-name {
font-size: 15px;
align-self: center;
margin-left: 4px;
-max-width: 95px;
-min-width: 95px;
width: 100%;
width: calc(100% - 10px);
max-height: 2.25em;
padding: 5px;
}
.skill-attribute {
align-self: center;
text-align: center;
margin-left: -8px;
max-width: 95px;
max-height: 2.25em;
}
.skills-grid button {
text-align: center;
-padding-left: 0.8em;
}
input.tab[value="monster"] ~ div.character .skills-grid button,
input.monster_only:checked ~ div.character .skills-grid button {
padding-left: 2px;
}
.skills-box1 {
-grid-column: 1/6;
grid-row-start: 1;
-grid-template-columns: auto 2em 2em 2em 2em 2em;
-background-color: #000;
}
.skills-box1 h1 {
justify-content: flex-end;
justify-self: center;
}
.skills-box-base {
-grid-column-start: 2;
grid-row-start: 1;
}
.skills-box2 {
-grid-column-start: 3;
grid-row-start: 1;
}
.skills-box3 {
-grid-column-start: 4;
grid-row-start: 1;
}
.skills-box4 {
-grid-column-start: 5;
grid-row-start: 1;
}
.skills-box5 {
-grid-column-start: 6;
grid-row-start: 1;
}
div.repeating-skill-grid {
grid-column: 1 / 7;
background-color: #ead3b8;
}
div.repeating-skill-grid select {
width: 100%;
}
div.repeating-skill-grid span {
-grid-template-columns: auto 2.5em 1em 2.5em 2.5em 2.5em 2.5em;
-text-align: center;
}
div.repeating-skill-grid button {
font-size: 24px;
color: #555;
justify-self: center;
line-height: .85em;
width: 1em;
display: flex;
justify-content: center;
padding: 0;
}
div.repeating_skills .input-skills-base-attr {
border: 0;
}
.skills-row .skills-row2 {
grid-column: 1/7;
grid-row-start: 2;
grid-template-columns: 100%;
}
.skills-row2-header {
display: grid;
grid-template-columns: auto 2em 2em 2em 2em;
background-color: #000;
height: 1.1em;
}
.skills-row2-body {
display: grid;
grid-row-start: 2;
grid-template-columns: auto 2em 2em 2em 2em;
}
.skills-box6 {
grid-column-start: 1;
grid-row-start: 1;
padding: 0px 0 4px 0;
margin: -15px 0 0 0;
}
.skills-box7 {
-grid-column-start: 2;
grid-row-start: 1;
}
.skills-box8 {
-grid-column-start: 3;
grid-row-start: 1;
}
.skills-box9 {
-grid-column-start: 4;
grid-row-start: 1;
}
.skills-box10 {
-grid-column-start: 5;
grid-row-start: 1;
}
/* ---------------------------------- Armor */
.armor-container {
-display: grid;
padding-bottom: 2px;
-grid-template-columns: auto;
}
.armor-grid {
display: grid;
padding-bottom: 2px;
column-gap: 2px;
row-gap: 2px;
grid-template-columns: auto 3em 3em 3em 3em 3em 3em 8em 3em;
-grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
-justify-items: center;
-align-items: baseline;
}
/*
.armor-row2 {
display: grid;
justify-self: end;
padding-bottom: 2px;
column-gap: 4px;
row-gap: 2px;
grid-template-columns: auto 3em 3em 3em 3em 3em 3em 3em 6em;
justify-items: right;
align-items: baseline;
} */
.armor-subgrid {
display: grid;
align-items: center;
height: 3em;
column-gap: 2px;
grid-template-columns: auto auto auto auto auto auto;
}
.armor-subgrid > span {
display: flex;
}
.armor-box {
grid-column: 1/10;
grid-row-start: 1;
}
.armor-box-header {
grid-column: 1/10;
grid-row-start: 1;
}
.armor-box1 {
grid-column: 1;
grid-row-start: 1;
}
.armor-box2 {
grid-column-start: 2;
grid-row-start: 1;
justify-self: right;
}
.armor-box3 {
grid-column-start: 3;
grid-row-start: 1;
justify-self: left;
}
.armor-box3 span::before {
content: "/";
padding: 0 2px 0 0;
}
.armor-box4 {
grid-column-start: 4;
grid-row-start: 1;
}
.armor-box5 {
grid-column-start: 5;
grid-row-start: 1;
}
.armor-box6 {
grid-column-start: 6;
grid-row-start: 1;
}
.armor-box7 {
grid-column-start: 7;
grid-row-start: 1;
}
.armor-box8 {
grid-column-start: 8;
grid-row-start: 1;
}
.armor-box9 {
grid-column-start: 9;
grid-row-start: 1;
}
/* Container for repeating armor */
.armor-box10 {
grid-column: 1/10;
grid-row-start: 2;
position: relative;
justify-items: right;
align-items: baseline;
}
.armor-box10 .repcontainer {
width: 100%;
}
.armor-ar {
-grid-column: 1/10;
display: flex;
justify-content: flex-end;
width: 100%;
margin-bottom: 0;
height: 36px;
padding: 3px;
text-align: right;
margin-bottom: -2px;
}
.armor-box-ar {
display: flex;
margin-right: 10px;
}
.armor-button {
color: #555;
height: 30px;
width: 30px;
font-size: 20px;
justify-self: center;
align-self: center;
line-height: .80em;
display: flex;
justify-content: center;
padding: 0;
margin: 12px;
}
/* ---------------------------------- Consumables */
.consumables-grid {
display: grid;
row-gap: 2px;
grid-template-columns: auto 3.25em 0.2em auto 3.25em 0.2em;
padding-bottom: 8px;
}
.consumables-grid > div {
display: flex;
align-items: center;
justify-content: space-around;
}
.consumables-grid ~ span.header-h1 {
text-align: right;
margin-right: 10px;
}
.consumables-icon {
-display: none;
height: 45px;
width: 45px;
}
.consumables-food {
-content: url('https://github.com/dwarfwing/MutantYearZeroRW/blob/main/Mutant%20Year%20Zero/images/grub-blk.png');
-content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/grub-blk.png');
}
.consumables-water {
-content: url('https://github.com/dwarfwing/MutantYearZeroRW/blob/main/Mutant%20Year%20Zero/images/water-blk.png');
-content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/water-blk.png');
}
.consumables-epacks {
-content: url('https://github.com/dwarfwing/MutantYearZeroRW/blob/main/Mutant%20Year%20Zero/images/battery-blk.png');
-content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/battery-blk.png');
}
.consumables-bullets {
-content: url('https://github.com/dwarfwing/MutantYearZeroRW/blob/main/Mutant%20Year%20Zero/images/bullet-blk.png');
-content: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutant%20Year%20Zero/images/bullet-blk.png');
}
input[name="attr_consumables-icons"]:checked ~ div .consumables-icon,
input[name="attr_consumables-icons"]:not(:checked) ~ div .consumables-label {
display: block;
}
input[name="attr_consumables-icons"]:not(:checked) ~ div .consumables-icon,
input[name="attr_consumables-icons"]:checked ~ div .consumables-label {
display: none;
}
.consumables-box {
grid-column: 1/7;
grid-row-start: 1;
}
.consumables-box1 {
grid-column-start: 2;
grid-row-start: 1;
align-content: flex-end;
}
.consumables-box2 {
grid-column-start: 5;
grid-row-start: 1;
align-content: flex-end;
}
/*
.consumables-box3 {
grid-column-start: 1;
grid-row-start: 2;
}*/
.consumables-box4 {
grid-column-start: 1;
grid-row-start: 2;
align-content: flex-end;
justify-content: flex-end !important;
}
.consumables-box5 {
grid-column-start: 2;
grid-row-start: 2;
}
.consumables-box6 {
grid-column-start: 3;
grid-row-start: 2;
}
.consumables-box7 {
grid-column-start: 4;
grid-row-start: 2;
align-content: flex-end;
justify-content: flex-end !important;
}
.consumables-box8 {
grid-column-start: 5;
grid-row-start: 2;
}
.consumables-box9 {
grid-column-start: 6;
grid-row-start: 2;
}
.consumables-box10 {
grid-column-start: 1;
grid-row-start: 3;
align-content: flex-end;
justify-content: flex-end !important;
}
.consumables-box11 {
grid-column-start: 2;
grid-row-start: 3;
}
.consumables-box12 {
grid-column-start: 3;
grid-row-start: 3;
}
.consumables-box13 {
grid-column-start: 4;
grid-row-start: 3;
align-content: flex-end;
justify-content: flex-end !important;
}
.consumables-box14 {
grid-column-start: 5;
grid-row-start: 3;
}
.consumables-box15 {
grid-column-start: 6;
grid-row-start: 3;
}
/* ---------------------------------- money */
.money-grid {
display: grid;
margin: 0;
row-gap: 4px;
-grid-template-columns: 7em repeat(3, 1fr);
grid-template-columns: auto 4em auto 5em;
grid-template-rows: auto;
padding: 0 0 8px 0;
}
.money-grid div[class$="-header"] {
margin: 0 -7px 0 -9px;
}
.money-grid > div {
display: flex;
align-items: center;
justify-content: space-around;
}
.money-grid input.input-number {
min-width: 3em;
}
.money-box {
grid-column: 1/5;
grid-row-start: 1;
}
.money-box1 {
grid-column-start: 1;
grid-row-start: 1;
}
.money-box2 {
grid-column-start: 2;
grid-row-start: 1;
}
.money-box3 {
grid-column-start: 3;
grid-row-start: 1;
}
.money-box4 {
grid-column-start: 4;
grid-row-start: 1;
}
.money-box5 {
grid-column-start: 1;
grid-row-start: 2;
}
.money-box6 {
grid-column-start: 2;
grid-row-start: 2;
}
.money-box7 {
grid-column-start: 1;
grid-row-start: 3;
}
.money-box8 {
grid-column-start: 2;
grid-row-start: 3;
}
.money-box9 {
grid-column-start: 1;
grid-row-start: 4;
}
.money-box10 {
grid-column-start: 2;
grid-row-start: 4;
}
.money-box11 {
grid-column-start: 3;
grid-row-start: 4;
}
.money-box12 {
grid-column-start: 4;
grid-row-start: 4;
}
/* ---------------------------------- Gear */
.gear-grid {
display: grid;
row-gap: 2px;
column-gap: 1px;
grid-template-columns: auto 3em 2em 4em;
grid-template-rows: auto;
}
.gear-subgrid {
display: grid;
column-gap: 2px;
grid-template-columns: 4em 3em 9em 3em;
}
.gear-subgrid > div {
display: flex;
align-items: center;
justify-content: space-around;
}
.gear-box1 {
grid-column: 1/5;
grid-row-start: 1;
}
.gear-box2 {
grid-column-start: 2;
grid-row-start: 1;
}
.gear-box3 {
grid-column-start: 3;
grid-row-start: 1;
}
.gear-box4 {
grid-column-start: 4;
grid-row-start: 1;
}
.gear-box5 {
grid-column: 1/5;
grid-row-start: 2;
-margin: 0 10px 0 6px;
}
.gear-weight {
display: grid;
justify-content: end;
grid-column: 1/5;
column-gap: 5px;
grid-row-start: 3;
grid-template-columns: auto 3em;
justify-items: end;
padding-left: 5px;
}
.gear-weight > div {
display: flex;
align-items: center;
justify-content: space-around;
height: 1.5em;
}
.gear-weight > div input {
height: 1.5em;
}
.gear-box6 {
width: 100%;
display: grid;
-justify-content: end;
height: 3em;
-padding-right: 5px;
grid-column: 1/5;
column-gap: 0.25em;
grid-row-start: 4;
grid-template-columns: auto 3em 1em auto 3em;
}
.gear-box6 span {
color: #FFF;
}
.carry-separator {
font-size: 2em;
}
.gear-box7 {
grid-column: 1/2;
grid-row-start: 1;
}
.gear-box8 {
grid-column-start: 2;
grid-row-start: 1;
}
.gear-box9 {
grid-column-start: 3;
grid-row-start: 1;
}
.gear-box10 {
grid-column-start: 4;
grid-row-start: 1;
}
.gear-box11 {
grid-column: 1/5;
grid-row-start: 5;
}
.gear-subgrid2 {
grid-column: 1/span 4;
display: grid;
margin-top: 2px;
column-gap: 2px;
grid-template-columns: auto 5em;
justify-content: end;
padding: 5px;
margin-bottom: 3px;
}
.gear-box12 {
margin-top: 7px;
padding-right: 5px;
}
/* ---------------------------------- Vehicle */
.vehicle-grid,
.vehiclegear-box5,
.talents-grid .talents-box4,
.gear-box5 {
background-color: inherit;
}
.vehicle-grid {
position: relative;
-display: grid; /* Done above in char type traits */
row-gap: 2px;
-column-gap: 2px;
grid-template-columns: 1fr 1fr;
-grid-template-rows: auto;
-justify-content: space-around;
-padding-bottom: 4px;
}
.vehicle-grid .header {
margin: 0;
overflow: hidden;
}
.vehicle-grid > div {
display: flex;
align-items: center;
-justify-self: end;
}
.vehicle-box1 {
grid-row-start: 1;
grid-column: 1/3;
width: 100%;
justify-self:stretch;
}
.vehicle-grid > div > input {
margin: 0 6px 0 6px;
}
.vehicle-box2 { /*Name label*/
grid-row-start: 2;
grid-column: 1/3;
}
.vehicle-box-desc {
grid-row-start: 3;
grid-column: 1/3;
display: inline-block;
}
.vehicle-box3 { /*Bonus label*/
grid-row-start: 4;
grid-column-start: 1;
justify-self: end;
}
.vehicle-box4 { /* Carry Capacity label */
grid-row-start: 4;
grid-column-start: 2;
justify-self: start;
}
.vehicle-box5 { /*Armor label*/
grid-row-start: 5;
grid-column-start: 1;
justify-self: end;
}
.vehicle-box7 { /*Resilience label*/
grid-row-start: 5;
grid-column: 2;
justify-self: start;
}
.vehicle-box9 { /*Fuel label*/
grid-row-start: 6;
grid-column-start: 1;
justify-self: end;
}
.vehicle-box11 { /*Fuel cap label*/
grid-row-start: 6;
grid-column: 2;
justify-self: start;
}
.vehicle-box13 { /*Occupancy label*/
grid-row-start: 7;
grid-column-start: 1;
justify-self: end;
}
.vehicle-box15 { /*Seats label*/
grid-row-start: 7;
grid-column: 2;
justify-self: start;
}
/* ---------------------------------- Vehicle Gear */
.vehiclegear-box {
grid-row-start: 8;
grid-column: 1/3;
display:flex;
width: 100%;
}
.vehiclegear-grid {
display: grid;
row-gap: 2px;
grid-template-columns: auto 3em 2em 3em;
grid-template-rows: auto;
width: 100%;
}
.vehiclegear-subgrid {
display: grid;
column-gap: 2px;
row-gap: 2px;
grid-template-columns: 4em 3em 9em 3em;
}
.vehiclegear-subgrid2 {
display: grid;
height: 2em;
margin-top: 5px;
grid-template-columns: 2em auto;
}
.vehiclegear-subgrid > .vehiclegear-box11 {
display: block;
white-space: nowrap;
}
.vehiclegear-subgrid > div {
display: flex;
align-items: center;
justify-content: space-around;
}
/* Hiding encumbrance for fuel and occupants */
.input-vehicle-advancedencumbrance:not(:checked) ~ .advanced-vehicleencumbrance {
display: none;
}
.vehiclegear-box1 {
grid-column: 1/5;
grid-row-start: 1;
}
.vehiclegear-box2 {
grid-column-start: 2;
grid-row-start: 1;
}
.vehiclegear-box3 {
grid-column-start: 3;
grid-row-start: 1;
}
.vehiclegear-box4 {
grid-column-start: 4;
grid-row-start: 1;
}
.vehiclegear-box5 {
grid-column: 1/5;
grid-row-start: 2;
}
.vehiclegear-coin {
grid-column: 1/5;
grid-row-start: 3;
}
.vehiclegear-box6 {
width: 100%;
display: grid;
-justify-content: end;
overflow: hidden;
height: 3em;
-padding-right: 5px;
grid-column: 1/5;
column-gap: 0.25em;
grid-row-start: 4;
grid-template-columns: auto 3em 1em auto 3em;
}
.vehiclegear-box6 span {
color: #FFF;
}
.vehiclegear-box7 {
grid-column: 1/2;
grid-row-start: 1;
}
.vehiclegear-box8 {
grid-column-start: 2;
grid-row-start: 1;
}
.vehiclegear-box9 {
grid-column-start: 3;
grid-row-start: 1;
}
.vehiclegear-box10 {
grid-column-start: 4;
grid-row-start: 1;
}
.vehiclegear-box11 {
justify-content: left;
grid-column: 1/5;
grid-row-start: 2;
}
/* ---------------------------------- Relationships */
.relationships-grid {
width: 100%;
display: grid;
column-gap: 4px;
row-gap: 3px;
grid-template-columns: 9em auto 1rem;
}
.relationships-box3,
.relationships-box4,
.relationships-box5,
.relationships-box6 {
display: flex;
align-items: stretch;
-justify-content: space-around;
box-sizing: border-box;
padding: 3px;
}
.relationships-box3 {
justify-content: center;
align-content:flex-start;
}
.relationships-box11,
.repeating_rpcrelations,
.repeating_npcrelations,
.relationships-box11 .repcontainer {
grid-column: 1/4;
width: 100%;
display: inline-block;
-align-items: center;
-justify-content: center;
}
.relationships-grid-repeating {
width: 100%;
display: grid;
column-gap: 4px;
row-gap: 3px;
grid-template-columns: 15rem auto 3rem;
}
.relationships-box1 {
grid-column: 1/4;
width: 100%;
display: flex;
-grid-row-start: 1;
}
.relationship-box1 .relationships-grid {
width: 100%;
display: grid;
column-gap: 4px;
row-gap: 3px;
grid-template-columns: 8rem auto 1rem;
}
.relationships-box2 {
grid-column-start: 3;
grid-row-start: 1;
}
.relationships-box3 {
grid-column-start: 1;
grid-row-start: 1;
}
.relationships-box4 {
grid-column-start: 2;
grid-row-start: 1;
padding-right: 1em;
}
.relationships-box5 {
grid-column-start: 3;
grid-row-start: 1;
justify-self: center;
}
.relationships-box6 {
grid-column: 2/4;
grid-row-start: 1;
padding-right: 1em;
}
/* ---------------------------------- Notes */
.notes-grid {
display: grid;
column-gap: 4px;
row-gap: 3px;
grid-template-columns: 15rem auto;
padding-bottom: 5px;
}
.notes-grid > .notes-box3,
.notes-grid > .notes-box4,
.notes-grid > .notes-box5 {
display: flex;
-align-items: center;
justify-content: space-around;
box-sizing: border-box;
padding: 3px;
}
.notes-box1 {
grid-column: 1/4;
grid-row-start: 1;
}
.notes-box2 {
grid-column: 1/4;
grid-row-start: 2;
margin-top: 5px;
}
.notes-box3 {
grid-column-start: 1;
grid-row-start: 2;
}
.notes-box4 {
grid-column-start: 1;
grid-row-start: 2;
vertical-align: top;
}
.notes-box5 {
min-height: 2em;
padding-right: 6px;
grid-column-start: 2;
grid-row-start: 2;
vertical-align: top;
}
/* ---------------------------------- Monster info */
.monster-information {
grid-column: 1/ span 12;
}
.information-grid {
display: grid;
column-gap: 4px;
row-gap: 3px;
grid-template-columns: 1fr 1fr;
padding-bottom: 5px;
}
.information-grid .information-box0,
.information-grid .heading-grid {
grid-column: 1/3;
}
.information-grid .heading-box1 {
width: 95%;
}
.monster-abilities {
min-height: 2em;
grid-column: 1/3;
width: 100%;
display: flex;
flex-direction: column;
}
.monster-abilities-row {
display: flex;
align-items:flex-start;
align-content: flex-start;
justify-items: center;
justify-content: space-around;
padding: 5px;
}
.monster-abilities input {
width: 35%;
justify-self: left;
align-self: flex-start;
}
.monster-abilities textarea {
width: 60%;
justify-self: right;
align-self: flex-start;
height: unset;
}
/* ---------------------------------- Spells */
.spells-grid {
display: grid;
column-gap: 2px;
row-gap: 2px;
grid-template-columns: 2.5em auto 3em 3em 5.5em 6em 11.5em;
}
.spells-box6 > div > .input {
display: flex;
align-items: center;
justify-content: space-around;
}
.spells-box {
grid-column: 1/8;
grid-row-start: 1;
}
.spells-box0 {
grid-column-start: 1;
grid-row-start: 1;
}
.spells-box1 {
grid-column-start: 2;
grid-row-start: 1;
}
.spells-box2 {
grid-column-start: 3;
grid-row-start: 1;
}
.spells-box3 {
grid-column-start: 4;
grid-row-start: 1;
}
.spells-box4 {
grid-column-start: 5;
grid-row-start: 1;
}
.spells-box5 {
grid-column-start: 6;
grid-row-start: 1;
}
.spells-box6 {
grid-column-start: 7;
grid-row-start: 1;
}
.spells-box7 {
grid-column: 1/8;
grid-row-start: 2;
}
/* -------------------------- ark grid layout */
.ark-grid {
display: grid;
margin: 21px 5px 0 5px;
column-gap: 4px;
row-gap: 4px;
grid-template-columns: 1fr 1fr 1fr;
-grid-template-rows: repeat(4, auto);
}
.ark-development {
grid-row-start: 1;
grid-column: 1/4;
}
.ark-details {
-border: none;
grid-column: 1;
grid-row-start: 2;
justify-content: space-evenly;
justify-self: stretch;
}
.ark-bosses {
grid-column-start: 2;
grid-row-start: 2;
}
.ark-other {
grid-column-start: 3;
grid-row-start: 2;
}
.ark-projects {
grid-column: 1/4;
grid-row-start: 3;
}
.ark-notes {
grid-column: 1/4;
grid-row-start: 5;
}
.ark-influence {
grid-column: 1/4;
grid-row-start: 4;
}
.ark-details,
.ark-development {
background-color: lightgrey;
}
/* ---------------------------------- ark development */
.ark-development-grid {
display: grid;
-row-gap: 2px;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-content: space-around;
-width: 87%;
}
.ark-development-grid > div {
display: flex;
align-items: center;
justify-content: space-around;
padding: 3px;
}
.ark-development-box1 {
grid-column: 1/5;
grid-row-start: 1;
}
.ark-development-subheader {
font-size: 1.3em;
padding-bottom: 0.5em;
}
.ark-development-subheader1 {
grid-column: 1;
grid-row-start: 1;
}
.ark-development-subheader2 {
grid-column: 2;
grid-row-start: 1;
}
.ark-development-subheader3 {
grid-column: 3;
grid-row-start: 1;
}
.ark-development-subheader4 {
grid-column: 4;
grid-row-start: 1;
}
.ark-development-col {
padding: 4px;
}
.ark-development-col1 {
grid-column: 1;
grid-row-start: 2;
}
.ark-development-col2 {
grid-column: 2;
grid-row-start: 2;
}
.ark-development-col3 {
grid-column: 3;
grid-row-start: 2;
}
.ark-development-col4 {
grid-column: 4;
grid-row-start: 2;
}
.ark-development-col .input-number {
width: 3em !important;
max-height: 2em !important;
height: 32em !important;
font-size: 1.3em !important;
color: #666 !important;
}
/* ---------------------------------- ark Details */
.ark-details-grid {
display: grid;
row-gap: 2px;
grid-template-columns: 1fr 1fr;
justify-content: space-around;
-width: 87%;
}
.ark-details-grid > div {
-display: flex;
align-items: center;
justify-content: space-around;
-width: 100%;
}
.ark-details-grid > span.ark-details-label {
justify-self: flex-end;
padding-right: 5px;
}
.ark-details-grid > div.ark-details-number {
justify-self: flex-start;
padding-left: 5px;
}
.ark-details-header {
grid-column: 1/3;
grid-row: 1;
-background-color: inherit;
width: 100%;
}
.ark-details-box {
padding: 3px;
display: flex;
}
.ark-details-box1 {
grid-column-start: 1;
grid-row-start: 2;
width: 100%;
}
.ark-details-box2 {
grid-column-start: 2;
grid-row-start: 2;
}
.ark-details-box3 {
grid-column-start: 1;
grid-row-start: 3;
-margin: 3.5em 0 0 0;
width: 100%;
}
.ark-details-box4 {
grid-column-start: 2;
grid-row-start: 3;
-margin: 2.5em 0 0 0;
}
.ark-details-box5 {
grid-column-start: 1;
grid-row-start: 4;
width: 100%;
}
.ark-details-box6 {
grid-column-start: 2;
grid-row-start: 4;
-margin: 2.5em 0 0 0;
}
.ark-details-box7 {
grid-column-start: 1;
grid-row-start: 5;
}
.ark-details-box8 {
grid-column-start: 2;
grid-row-start: 5;
}
.ark-details-box9 {
grid-column: 1/3;
grid-row-start: 6;
padding: 10px;
margin: 0 1px 0 0 ;
background-color: inherit;
-width: 100%;
}
.ark-details-box7 .input-textarea {
width: 90%;
}
/* ---------------------------------- ark bosses */
.ark-bosses-grid {
display: grid;
column-gap: 2px;
row-gap: 2px;
grid-template-columns: auto 5em;
}
.ark-bosses-grid > div,
.ark-bosses-grid > input,
.ark-bosses-grid > textarea {
box-sizing: border-box;
}
.ark-bosses-grid > .input-textarea {
height: 2.25em;
}
.ark-bosses-box,
.ark-bosses-repeating {
grid-column: 1/3;
grid-row-start: 1;
}
.ark-bosses-subheader1 {
grid-column-start: 1;
grid-row-start: 1;
}
.ark-bosses-subheader2 {
grid-column-start: 2;
grid-row-start: 1;
}
.ark-bosses-repeating {
grid-row-start: 2;
}
.ark-bosses-box1 {
grid-column: 1;
}
.ark-bosses-box2 {
grid-column: 2;
width: 4.5em;
}
/* ---------------------------------- ark projects */
.ark-projects {
-display: flex;
grid-column: 1/4;
width: 100%;
}
.ark-projects-grid {
display: grid;
flex-direction: column;
row-gap: 2px;
column-gap: 10px;
grid-template-columns: 180px auto 140px 90px 60px;
width: 100%;
}
.ark-projects-grid > div,
.ark-projects-grid > span {
-display: flex;
align-items: center;
justify-content: space-around;
justify-self: stretch;
}
.ark-projects-grid > .column-header > span {
width: 100%;
}
.ark-projects-grid .input-text,
.ark-projects-grid .input-textfield {
justify-self: stretch !important;
}
.ark-projects-grid .input-radio,
.ark-projects-grid .input-number {
justify-self: center !important;
}
.ark-projects-grid > span > span.label {
width: 100%;
text-align: center;
}
.ark-projects-col .input-checkbox {
align-self: center;
}
.ark-projects-box {
grid-column: 1/6;
grid-row: 1;
}
.ark-projects-box1 {
grid-column-start: 1;
grid-row-start: 1;
width: 100%;
-text-align: right;
}
.ark-projects-box2 {
grid-column-start: 2;
grid-row-start: 1;
width: 100%;
-text-align: right;
}
.ark-projects-box3 {
grid-column-start: 3;
grid-row-start: 1;
width: 100%;
-text-align: right;
}
.ark-projects-box4 {
grid-column-start: 4;
grid-row-start: 1;
width: 100%;
-text-align: right;
}
.ark-projects-box5 {
grid-column-start: 5;
grid-row-start: 1;
width: 100%;
-text-align: right;
}
.ark-projects-repeating {
width: 100%;
grid-column: 1/6;
}
.ark-projects-box6 {
grid-column-start: 1;
grid-row-start: 2;
width: 100%;
-text-align: right;
}
.ark-projects-box7 {
grid-column-start: 2;
grid-row-start: 2;
width: 100%;
-text-align: right;
}
.ark-projects-box8 {
grid-column-start: 3;
grid-row-start: 2;
width: 100%;
-text-align: right;
}
.ark-projects-box9 {
grid-column-start: 4;
grid-row-start: 2;
width: 100%;
-text-align: right;
display: flex;
justify-content: center;
justify-items: center;
}
.ark-projects-box10 {
grid-column-start: 5;
grid-row-start: 2;
width: 100%;
justify-self: center;
align-self: center;
-text-align: right;
}
/* ---------------------------------- ark Influence */
.ark-influence {
-display: flex;
grid-column: 1/4;
width: 100%;
}
.ark-influence-grid {
display: flex;
flex-direction: column;
}
.ark-influence-header {
width: 100%;
}
.ark-influence-subheaderrow {
display: flex;
justify-items: stretch;
}
.ark-influence-subheader {
display: flex;
flex-direction: row;
justify-items: center;
width: 20%;
font-size: 1.3em;
-margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
.ark-influence-row {
display: flex;
flex-direction: row;
justify-items: center;
border-bottom: 1px solid #ccc;
-margin-bottom: 0.2em;
}
.ark-influence-row span {
align-items: center;
}
.ark-influence-col {
display: flex;
width: 20%;
justify-content: center;
border-right: 1px solid #ccc;
padding: 3px;
}
.ark-influence-col .input-number {
max-width: 3.5em !important;
width: 3.5em !important;
max-height: 2.25em !important;
height: 2.25em !important;
}
/* ---------------------------------- ark Notes */
.ark-notes {
width: 100%;
grid-column: 1/4;
display:flex;
}
.ark-notes-grid {
width: 100%;
display: grid;
column-gap: 2px;
row-gap: 2px;
grid-template-columns: 250px auto;
grid-template-rows: auto;
}
.ark-notes-grid div,
.ark-notes-grid input,
.ark-notes-grid textarea {
box-sizing: border-box;
width: 100%;
justify-self: stretch;
}
.ark-notes-box {
grid-column: 1/3;
grid-row-start: 1;
}
.ark-notes-repeating {
width: 100%;
grid-column: 1/3;
}
.ark-notes-box1 {
grid-column-start: 1;
grid-row-start: 1;
}
.ark-notes-box2 {
grid-column-start: 2;
grid-row-start: 1;
}
.ark-notes-box3 {
grid-column-start: 1;
grid-row-start: 2;
}
.ark-notes-box4 {
grid-column-start: 2;
grid-row-start: 2;
}
/* ----------------------------- Zone log */
div.log-grid {
display: grid;
grid-template-columns: 80px 180px 60px 40px auto 50px 50px 50px 50px;
column-gap: 3px;
padding: 3px;
-width: 100%;
-overflow: hidden;
}
div.log-grid-header {
height: 50px;
-width: 100%;
-font-size : 2em;
text-align : center;
justify-items: center;
}
.log-grid-header h1 {
grid-column: 1 / 10;
margin-top: -70px;
background-color: transparent !important;
}
div.log-grid-header,
div.log-grid .column-header {
grid-row: 1;
}
div.log-grid-header .column-header {
margin : 35px 0 4px 0px;
padding-bottom: 4px;
}
.log-box {
display: flex;
flex-direction: row;
align-self: center;
justify-self: center;
text-align: center;
/*
justify-self: center;
justify-content: center;
justify-items: center;
align-items: center;
align-self: center;
align-content: center; */
}
.log-grid input[name="attr_coordinates"] { width: 75px;}
.log-grid input[name="attr_terrain"] {width: 175px;}
.log-grid input[name="attr_rot_level"] {width: 30px; }
.log-grid input[name="attr_threat_notes"] { width: 90%;}
/* div.log-grid h2[data-i18n="coordinates"],
div.log-grid input[name="attr_coordinates"], */
.log-column1 {
grid-column: 1;
grid-row: 1;
}
/* div.log-grid h2[data-i18n="terrain"],
div.log-grid input[name="attr_terrain"], */
.log-column2 {
grid-column: 2;
grid-row: 1;
}
/* div.log-grid h2[data-i18n="rot-level"],
div.log-grid input[name="attr_rot_level"], */
.log-column3 {
grid-column: 3;
grid-row: 1;
}
/* div.log-grid h2[data-i18n="threat"], */
.log-column4 {
grid-column: 4;
grid-row: 1;
-text-align: left;
}
/* div.log-grid h2[data-i18n="threat-notes"],
div.log-grid input[name="attr_threat_notes"], */
.log-column5 {
grid-column: 5;
grid-row: 1;
}
/* div.log-grid input[name="attr_threat"],
div.log-grid input[name="attr_threat"] + span, */
.log-column4 {
grid-column: 4;
grid-row: 1;
-margin-left: 25%;
}
div.log-grid .log-resources {
text-align: left;
justify-self: left;
margin: 0;
padding-right: 3px;
width: auto;
align-self: center;
-grid-row: 1;
}
div.log-grid input[type="checkbox"] {
width: 9px;
height: 9px;
border-radius: 50%;
}
div.log-grid input[type="checkbox"]:checked {
border: 0;
background-color: inherit;
padding-top: 3px;
}
/* div.log-grid label[data-i18n="a"], */
.log-column6 {
grid-column: 6;
grid-row: 1;
}
/* div.log-grid input[name="attr_artifacts"],
div.log-grid input[name="attr_artifacts"] + span, */
.log-column7 {
grid-column: 7;
grid-row: 1;
}
/* div.log-grid label[data-i18n="b"], */
.log-column8 {
grid-column: 8;
grid-row: 1;
}
/* div.log-grid input[name="attr_bullets"],
div.log-grid input[name="attr_bullets"] + span, */
.log-column9 {
grid-column: 9;
grid-row: 1;
}
/* div.log-grid label[data-i18n="g"], */
.log-column10 {
grid-column: 10;
grid-row: 1;
}
/* div.log-grid input[name="attr_grub"],
div.log-grid input[name="attr_grub"] + span, */
.log-column11 {
grid-column: 11;
grid-row: 1;
}
/* div.log-grid input[name="attr_water"],
div.log-grid input[name="attr_water"] + span, */
.log-column13 {
grid-column: 13;
grid-row: 1;
}
/* div.log-grid h2[data-i18n="resources-found"], */
.log-column6-13 {
grid-column: 6 / 13;
grid-row: 1;
}
/* div.log-grid input[name="attr_comment"], */
.log-comments {
grid-column: 1 / 10;
grid-row: 3;
justify-content: stretch;
text-align: left;
padding: 3px;
width: 98%;
-margin-bottom: 4px;
}
div.repeating-log-grid .repcontainer .repitem hr {
color: #999;
padding: 3px 5px 2px 5px;
margin: 0;
}
div.ark-bosses-repeating .repcontainer .repitem,
div.repeating-log-grid .repcontainer .repitem,
div.weapons-box .repcontainer .repitem {
-margin-top: 1%;
padding: 3px 5px 3px 5px;
margin: 0;
}
/* --------------------- SETTINGS OPTIONS */
.traits-vis-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.traits-vis-col1 {
grid-column-start: 1;
}
.traits-vis-col2 {
grid-column-start: 2;
}
/* GRID STYLING */
.grid-item {
text-align: center;
}
.dice_pool-grid .grid-item {
width: 103%;
}
.sub-grid-item {
margin: 2px;
text-align: center;
}
.span-two {
grid-column: 1/3;
}
.span-three {
grid-column: 1/4;
}
.span-right {
grid-column: 2/4;
}
/***** ADD TOGGLE FOR MODIFIERS */
input.adv-modifiers:checked ~ div .modifiers-toggled-off {
display: none;
}
input.adv-modifiers:not(:checked) ~ div .modifiers-toggled-on {
display: none;
}
/** Toggle modifiers for weapons */
input.adv-modifiers:not(:checked) ~ div .weapons-grid {
display: grid;
-padding: 0 0 2px 0;
-column-gap: 2px;
-row-gap: 2px;
grid-template-columns: auto 75px 35px 4px 35px 4px 35px 35px 4px 35px 4px 35px 35px;
-grid-template-columns: 25% 20% 7% 1% 7% 1% 7% 7% 1% 7% 1% 7% 7%;
}
input.adv-modifiers:not(:checked) ~ div .weapons-box-repeating {
grid-column: 1/14;
}
input.adv-modifiers:not(:checked) ~ div .weapons-subgrid {
grid-column: 1/14;
grid-row-start: 3;
}
input.adv-modifiers:not(:checked) ~ div .weapons-box0 {
grid-column: 1/14;
grid-row-start: 1;
}
input.adv-modifiers:not(:checked) ~ div .weapons-box-skill { display: none; }
input.adv-modifiers:not(:checked) ~ div .weapons-box-gear { display: none; }
input.adv-modifiers:not(:checked) ~ div .weapons-box-damage { display: none; }
input.adv-modifiers:not(:checked) ~ div .weapons-box3 { grid-row-start: 1; grid-column-start: 1; width: 100%; }
input.adv-modifiers:not(:checked) ~ div .weapons-box4 { grid-row-start: 1; grid-column-start: 2; }
input.adv-modifiers:not(:checked) ~ div .weapons-box5 { grid-row-start: 1; grid-column-start: 3; }
input.adv-modifiers:not(:checked) ~ div .weapons-box6 { grid-row-start: 1; grid-column-start: 4; }
input.adv-modifiers:not(:checked) ~ div .weapons-box7 { width: 0; }
input.adv-modifiers:not(:checked) ~ div .weapons-box8 { grid-row-start: 1; grid-column-start: 5; }
input.adv-modifiers:not(:checked) ~ div .weapons-box9 { grid-row-start: 1; grid-column-start: 6; }
input.adv-modifiers:not(:checked) ~ div .weapons-box10 { width: 0; }
input.adv-modifiers:not(:checked) ~ div .weapons-box11 { grid-row-start: 1; grid-column-start: 7; justify-self: right; }
input.adv-modifiers:not(:checked) ~ div .weapons-box12 { grid-row-start: 1; grid-column-start: 8; justify-self: left; }
input.adv-modifiers:not(:checked) ~ div .weapons-box13 { width: 0; }
input.adv-modifiers:not(:checked) ~ div .weapons-box14 { width: 0; }
input.adv-modifiers:not(:checked) ~ div .weapons-box15 { width: 0; }
input.adv-modifiers:not(:checked) ~ div .weapons-box16 { grid-row-start: 1; grid-column-start: 9; }
input.adv-modifiers:not(:checked) ~ div .weapons-box17 { grid-row-start: 1; grid-column-start: 10; }
input.adv-modifiers:not(:checked) ~ div .weapons-box20 { grid-row-start: 1; grid-column-start: 11; }
input.adv-modifiers:not(:checked) ~ div .weapons-box2 { grid-row-start: 1; grid-column-start: 12; }
input.adv-modifiers:not(:checked) ~ div .weapons-box1 { grid-row-start: 1; grid-column-start: 13; }
/** Toggle modifiers for skills */
input.adv-modifiers:checked ~ div .character-skills {
min-width: 22em;
}
input.adv-modifiers:not(:checked) ~ div .skills-row {
-position: relative;
grid-template-columns: auto 2.5em 2.5em 2.5em;
-align-items: center;
}
input.adv-modifiers:not(:checked) ~ div .skills-box1 h1 {
justify-content: flex-end;
}
input.adv-modifiers:not(:checked) ~ div .repeating-skill-grid {
grid-column: 1 / 5;
background-color: #ead3b8;
}
input.adv-modifiers:checked ~ div .skill-name {
font-size: 14px;
}
input.adv-modifiers:not(:checked) ~ div .repeating-skills-row input.skill-name {
-max-width: 150px;
}
/** Toggle modifiers for armor */
input.adv-modifiers:not(:checked) ~ div .armor-grid {
display: grid;
grid-template-columns: auto 3em 3em 3em 3em 3em 8em 3em;
}
input.adv-modifiers:not(:checked) ~ div .armor-box10 {
grid-column: 1/9;
grid-row-start: 2;
}
input.adv-modifiers:not(:checked) ~ div .armor-box {
grid-column: 1/9;
grid-row-start: 1;
}
input.adv-modifiers:not(:checked) ~ div .armor-box-header {
grid-column: 1/9;
grid-row-start: 1;
}
input.adv-modifiers:not(:checked) ~ div .armor-box4 { display: none; }
input.adv-modifiers:not(:checked) ~ div .armor-box5 { grid-column-start: 4; grid-row-start: 1;}
input.adv-modifiers:not(:checked) ~ div .armor-box6 { grid-column-start: 5; grid-row-start: 1;}
input.adv-modifiers:not(:checked) ~ div .armor-box7 { grid-column-start: 6; grid-row-start: 1;}
input.adv-modifiers:not(:checked) ~ div .armor-box8 { grid-column-start: 7; grid-row-start: 1;}
input.adv-modifiers:not(:checked) ~ div .armor-box9 { grid-column-start: 8; grid-row-start: 1;}
/* Toggle display of legacy monster information */
input.adv-monsterinfo:not(:checked) ~ div .monster-information-toggle {
display:none !important;
}
/**** DICE ROLLER STYLING ****/
button[type="action"]:hover,
button[type="action"]:hover>span,
button[type="roll"]:hover {
color: #fff;
background: var(--bg-clr-button-active);
}
.dice-rolls button[type="action"].dice-pool {
padding: 2px 3px;
font-size: 1.3em;
margin: 0px 3px 0px 3px;
}
/*
.dice-rolls button[type="action"].dice-pool:before {
font-family: "dicefontd6";
content: "f";
} */
.dice-rolls button[type="action"].dice-pool span {
color: #fff;
text-transform: capitalize;
}
button[type="action"] > span {
-font-size: 95%;
color: #333;
}
input.dice-selection {
position: relative;
z-index: 1;
width: 25px;
height: 25px;
margin: -10px 0 2px 3px;
cursor: pointer;
opacity: 0;
}
input.mighty,
input.epic,
input.legendary {
width: 15%;
margin: 0 -25% 0 0;
}
input.dice-selection + span::before {
display: inline-block;
width: 28px;
height: 22px;
margin: -44px 2px 5px 0;
padding: 5px 0 0 0;
content: attr(title);
text-align: center;
vertical-align: middle;
color: #000;
background-color: #fff;
border: solid 1px #000;
border-radius: 5px;
box-shadow: 2px 2px 2px #000;
}
.dice-artifact-rolls input.dice-selection + span::before {
width: 40px;
margin: 0;
}
span.artifact-die {
position: relative;
margin: 2% 3% 0 -20%;
}
input.dice-selection:hover+span::before {
color: #fff;
background: #a9a9a9;
}
input.attribute:checked + span::before {
color: #000;
background: rgb(235, 212, 4);
}
input.skill:checked + span::before {
-color: #fff;
-background: var(--bg-clr-button-active);
color: #fff;
background: #00a608;
}
input.gear + span::before {
background: #000;
color: #fff;
}
input.gear:checked + span::before {
color: #fff;
background: #000;
}
input.gear:checked + span ~ span::before {
background: #fff;
color: #000;
}
input.negative:checked + span::before {
color: #fff;
background: #c00202;
}
input.mighty:checked + span::before {
color: #fff;
background: #235402;
}
input.epic:checked + span::before {
color: #fff;
background: #0088af;
}
input.legendary:checked + span::before {
color: #000;
background: #ff8c00;
}
/* Included to help color blind users */
button[type="action"]:focus-visible {
color: white;
border: 2px dotted white;
background: var(--bg-clr-button-active);
}
button[type="action"]:focus span {
color: white;
}
.dice_pool-grid button[type="action"]:focus {
border-width: 2px;
border-style: outset;
border-image: initial;
}
input[type="radio"].dice-selection.attribute:checked
+ span::before {
border: 2px dotted black;
}
input[type="radio"].dice-selection.skill:checked + span::before,
input[type="radio"].dice-selection.gear:checked + span::before,
input[type="radio"].dice-selection.negative:checked + span::before,
input[type="checkbox"].mighty:checked + span::before,
input[type="checkbox"].epic:checked + span::before,
input[type="checkbox"].legendary:checked + span::before {
font-size: 95%;
padding: 3px 0 0 0;
border: 2px dotted white;
}
}
/* ROLL TEMPLATE STYLING */
.sheet-rolltemplate-myz .sheet-rolltemplate-mutantyearzero .sheet-template-wrap {
width: auto;
justify-content: center;
}
.sheet-rolltemplate-myz .sheet-dice-roll {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.sheet-rolltemplate-mutantyearzero .sheet-small-caps {
font-variant-caps: small-caps;
}
.sheet-rolltemplate-mutantyearzero {
padding: 12px 0 12px 0;
}
.sheet-rolltemplate-mutantyearzero span.sheet-label {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap {
box-sizing: border-box;
/* width: 240px; */
/* margin: 5px 0 5px -20px;
padding: 5px 0 5px 0; */
border: 3px solid #8b3f1f;
border-radius: 5px;
min-width: 235px;
background: rgb(124,78,8);
background: linear-gradient(0deg, rgba(124,78,8,1) 0%, rgba(224,184,15,1) 100%);
background-image: url('https://s3.amazonaws.com/files.d20.io/images/16289834/HuG1AuH9EWsSI2tLJZubBA/original.png?1455490062');
background-size: cover;
box-shadow: 2px 2px 2px #555;
}
.sheet-rolltemplate-mutantyearzero div.sheet-template-header {
flex-direction: column;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.9em;
display: flex;
justify-content: space-between;
justify-self: center;
width: 100%;
margin-bottom: 5px;
padding-top: 3px;
/* margin: 2px -9px 2px -9px;
padding: 0 5px 0 5px; */
word-break: break-word;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-color: #8b3f1f;
margin-top: -1px;
margin-left: -2px;
margin-right: -2px;
width: calc(100% + 2px);
}
/* .sheet-rolltemplate-myz .sheet-rolltemplate-mutantyearzero div.sheet-template-header {
margin-top: -1px;
margin-left: -3px;
margin-right: -3px;
width: calc(100% + 1px);
} */
.sheet-rolltemplate-mutantyearzero div.sheet-template-header div {
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-bottom: 0.25em;
}
.sheet-rolltemplate-mutantyearzero div.sheet-template-header a {
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #fff;
font-weight: bold;
font-size: 1em;
}
.sheet-rolltemplate-mutantyearzero div.sheet-template-header.sheet-template-span-one,
.sheet-rolltemplate-mutantyearzero div.sheet-template-header.sheet-template-span-two {
display: inline-block;
align-content: center;
align-items: center;
}
.sheet-rolltemplate-mutantyearzero .sheet-push-option a[href^="~"] {
background-color: #a52a2a;
border: 3px outset black;
border-radius: 5px;
padding-inline: 15px;
padding-block: 3px;
margin-top: 3px;
}
.sheet-rolltemplate-mutantyearzero .sheet-push-option a[href^="~"]:hover span {
color: #fff;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-header span.inlinerollresult {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
font-weight: bold;
color: #fff;
background-color: transparent;
padding: 0;
cursor: auto;
}
.sheet-rolltemplate-mutantyearzero
.sheet-template-span-left.sheet-template-header {
justify-content: center;
width: 43%;
}
.sheet-rolltemplate-mutantyearzero
.sheet-template-span-center.sheet-template-header {
z-index: 1;
}
.sheet-rolltemplate-mutantyearzero
.sheet-template-span-right.sheet-template-header {
justify-content: center;
width: 43%;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-grid-item.sheet-right {
justify-self: right;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-grid-item.sheet-left {
justify-self: left;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-grid-item.sheet-condensed {
-line-height: 1.2em;
font-size: 0.95em;
}
.sheet-rolltemplate-mutantyearzero
.sheet-template-grid-item.sheet-template-span-six.sheet-template-header:empty {
display: none;
}
.sheet-rolltemplate-mutantyearzero div.sheet-template-subtitle {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin: 0 -5px 0px -5px;
padding: 0 2px 0 2px;
-color: black;
color: #DDD;
}
/*
.sheet-rolltemplate-mutantyearzero .sheet-template-white-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-mutantyearzero .sheet-template-white-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-mutantyearzero .sheet-template-white-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-mutantyearzero .sheet-template-red-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-mutantyearzero .sheet-template-red-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-mutantyearzero .sheet-template-red-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-mutantyearzero .sheet-template-black-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-mutantyearzero .sheet-template-black-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-mutantyearzero .sheet-template-black-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-mutantyearzero .sheet-template-yellow-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-mutantyearzero .sheet-template-yellow-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-mutantyearzero .sheet-template-yellow-dice ~ .sheet-template-span-right,
.sheet-rolltemplate-mutantyearzero .sheet-template-green-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-mutantyearzero .sheet-template-green-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-mutantyearzero .sheet-template-green-dice ~ .sheet-template-span-right ,*/
.sheet-rolltemplate-mutantyearzero .sheet-template-dice ~ .sheet-template-span-left,
.sheet-rolltemplate-mutantyearzero .sheet-template-dice ~ .sheet-template-span-center,
.sheet-rolltemplate-mutantyearzero .sheet-template-dice ~ .sheet-template-span-right {
margin: 5px 1px 0 1px;
border-radius: 0;
background-color: #111;
color: #EEE;
}
.sheet-rolltemplate-mutantyearzero div.sheet-template-footer span,
.sheet-rolltemplate-mutantyearzero div.sheet-template-footer label {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
color: #CCC;
}
.sheet-rolltemplate-mutantyearzero div.sheet-template-footer {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
-font-size: 0.75em;
-margin: 5px;
padding: 2px;
-text-align: justify;
text-align: center;
}
.sheet-rolltemplate-mutantyearzero div.sheet-template-footer .sheet-right-align {
text-align: right;
}
.sheet-rolltemplate-mutantyearzero div.sheet-free-text {
font-size: 1em;
line-height: inherit;
margin: -10px 5px 2px 5px;
padding: 0;
text-align: left;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-grid .sheet-scroll-text {
font-size: 1em;
line-height: inherit;
overflow-y: auto;
min-height: 1.25em;
max-height: 6em;
margin: 0;
text-align: left;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-grid {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
display: grid;
/* margin: 3px 2px 2px 2px; */
padding: 0;
background-color: transparent;
grid-gap: 1px;
grid-template-columns: repeat(6, 1fr);
}
/* Character type specific coloring */
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-animal {
border-color: #687569;
border-color: #435644;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-animal .sheet-template-grid {
backdrop-filter: hue-rotate(55deg);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-animal .sheet-template-header {
background-color: #687569;
background-color: #435644;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-robot {
border-color: #035974;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-robot .sheet-template-grid {
backdrop-filter: hue-rotate(177deg);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-robot .sheet-template-header{
background-color: #035974;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-human {
border-color: #1b6764;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-human .sheet-template-grid {
backdrop-filter: hue-rotate(135deg);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-wrap.sheet-human .sheet-template-header {
background-color: #1b6764;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-grid-item {
-padding: 0 3px 0 3px;
text-align: center;
border: none;
border-radius: 5px;
background-color: transparent;
}
.sheet-template-grid-item.sheet-template-span-six:last-child {
overflow-y: auto;
max-height: 6em;
text-align: left;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-six {
grid-column: 1 / 7;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-half {
line-height: 1em;
grid-column: 1 / 4;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-2nd-half {
line-height: 1em;
grid-column: 4 / 7;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-left {
grid-column: 1 / 3;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-center {
grid-column: 3 / 5;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-right {
grid-column: 5 / 7;
}
/* used for consumable's single dice roll */
.sheet-rolltemplate-mutantyearzero .sheet-template-span-center-die {
width: 38%;
margin-left: 24%;
grid-column: 3 / 5;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-one {
grid-column: 1 / 2;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-two {
grid-column: 2 / 3;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-three {
grid-column: 3 / 4;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-four {
grid-column: 4 / 5;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-five {
grid-column: 5 / 6;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-span-shix {
grid-column: 6 / 7;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-success {
max-width: 100%;
height: auto;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-bane {
max-width: 100%;
height: auto;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-bold {
font-weight: bold;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-dice-column {
display: flex;
width: 100%;
justify-self: flex-start;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-label-dice-column {
background-color: #000;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-label-dice-column span {
color: #fff;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-inline {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
font-size: 2em;
line-height: 0;
display: inline-block;
margin: 8px 0 18px 0;
border: none;
background-color: transparent;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-smaller {
font-size: 0.85em;
}
/* add drop shadow to dice */
.sheet-rolltemplate-mutantyearzero .sheet-template-dice {
margin: 2px;
box-shadow: 2px 2px 2px #222;
line-height: 0;
padding: 3px;
text-align: center;
border-radius: 5px;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
justify-self: center;
height: 1.8em;
width: 1.8em;
}
/* .sheet-rolltemplate-mutantyearzero
.sheet-template-grid-item.sheet-template-span-six.sheet-template-header {
margin-bottom: 5px;
box-shadow: 0 2px 7px #000;
} */
.sheet-rolltemplate-mutantyearzero .sheet-template-white-dice {
border: 1px solid #000;
background-color: var(--bg-dice-white);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-maroon-dice {
line-height: 0;
padding: 3px;
text-align: center;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
background-color: var(--bg-dice-maroon);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-black-dice {
color: #fff;
border: 1px solid transparent;
background-color: #000;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-black-dice .span[title="Bane"] {
font-family: 'Segoe UI Symbol',symbol;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-green-dice {
line-height: 0;
padding: 3px;
text-align: center;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
background-color: var(--bg-dice-green);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-blue-dice {
line-height: 0;
padding: 3px;
text-align: center;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
background-color: var(--bg-dice-blue);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-orange-dice {
line-height: 0;
padding: 3px;
text-align: center;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
background-color: var(--bg-dice-orange);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-yellow-dice {
color: #000;
border: 1px solid #000;
background-color: var(--bg-dice-yellow);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-purple-dice {
line-height: 0;
padding: 3px;
text-align: center;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
background-color: var(--fg-dice-purple);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-red-dice {
color: #fff;
border: 1px solid #000;
background-color: var(--bg-dice-red);
}
.sheet-rolltemplate-mutantyearzero .sheet-template-grid-item span.inlinerollresult {
background-color: transparent;
border: none;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-dice > span {
font-family: 'Didact Gothic', 'DidactGothic', Verdana, Helvetica, Arial, sans-serif;
font-size: 1.8em;
line-height: 1em;
font-weight: normal;
padding: 0;
-margin: -4px 0 0 0;
display: inline-block;
border: none;
background-color: transparent;
}
.sheet-rolltemplate-mutantyearzero .sheet-template-green-dice > div > .sheet-template-inline,
.sheet-rolltemplate-mutantyearzero .sheet-template-blue-dice > div > .sheet-template-inline,
.sheet-rolltemplate-mutantyearzero .sheet-template-orange-dice > div > .sheet-template-inline,
.sheet-rolltemplate-mutantyearzero .sheet-template-yellow-dice > div > .sheet-template-inline {
font-size: 2.25em;
font-variant: diagonal-fractions;
text-shadow: 1px 1px 1px black;
}
.sheet-rolltemplate-mutantyearzero .inlinerollresult.fullcrit {
color: inherit;
border: none;
}
.sheet-rolltemplate-mutantyearzero .inlinerollresult.fullfail {
color: inherit;
border: none;
}
.sheet-rolltemplate-mutantyearzero .inlinerollresult.importantroll {
color: inherit;
border: none;
}