Files
roll20-character-sheets/rapidfire_system/style.css
T

1513 lines
60 KiB
CSS

@import url("https://fonts.googleapis.com/css?family=Bakbak+One|Oxanium:wght@700|Raleway:wght@500;600;700;800&display=swap");
.sheet-rolltemplate-rapidfire, .ui-dialog {
--topHeaderFont:Bakbak One;
--midHeaderFont:Oxanium;
--contentFont:Raleway;
}
.ui-dialog .tab-content .charsheet select,
.ui-dialog .tab-content .charsheet textarea,
.ui-dialog .tab-content .charsheet input,
.ui-dialog .tab-content .charsheet .uneditable-input,
.ui-dialog .tab-content .charsheet label,
.ui-dialog .tab-content .charsheet button {
all: initial;
}
.ui-dialog .tab-content .charsheet .stacked.input-label, .sheet-rolltemplate-rapidfire .stacked.input-label {
flex-direction: column-reverse;
}
.ui-dialog .tab-content .charsheet .stacked.center.input-label > *, .sheet-rolltemplate-rapidfire .stacked.center.input-label > * {
text-align: center;
}
.ui-dialog .tab-content .charsheet .stacked.input-label:not(.center) > *, .sheet-rolltemplate-rapidfire .stacked.input-label:not(.center) > * {
text-align: left;
}
.ui-dialog .tab-content .charsheet .stacked.input-label > [name], .sheet-rolltemplate-rapidfire .stacked.input-label > [name] {
width: 100%;
}
.ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):is(:hover, :focus, :focus-within), .sheet-rolltemplate-rapidfire :is(.underlined, .boxed):not([readonly]):is(:hover, :focus, :focus-within) {
border-width: 1px 3px;
border-style: solid;
border-color: black;
border-radius: 5px;
box-sizing: border-box;
transition: var(--focusTrans);
}
.ui-dialog .tab-content .charsheet .ratio1-1, .sheet-rolltemplate-rapidfire .ratio1-1 {
aspect-ratio: 1/1;
}
.ui-dialog .tab-content .charsheet .boxed.span-2, .ui-dialog .tab-content .charsheet .health-track .repcontainer, .ui-dialog .tab-content .charsheet .health-track .repcontainer > .repitem, .ui-dialog .tab-content .charsheet .repeat-columns, .ui-dialog .tab-content .charsheet .image-container, .ui-dialog .tab-content .charsheet .base-container, #stats .equipment, #stats .equipment .repitem, #secondary > .secondaries, #secondary > .combat-gear, #skill .repitem, #weapon .repitem, #adjustments .repitem, #remnant-ratings, #remnant-stats, #remnant-trait .repitem, #remnant-drone .repitem, #remnant-weapons .repitem, .sheet-rolltemplate-rapidfire .sheet-content, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-background, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header__content, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer__content, #settings, #character, #remnant, #character-info, #skill, #weapon, #adjustments .subsection, #remnant-ratings .remnant-skills, #remnant-specialty, #remnant-trait, #remnant-drone, #remnant-weapons, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:before, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:after, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border__hex-content, .ui-dialog .tab-content .charsheet .roll-container, .sheet-rolltemplate-rapidfire .roll-container, .ui-dialog .tab-content .charsheet .small-scale-grid, .sheet-rolltemplate-rapidfire .small-scale-grid,
.ui-dialog .tab-content .charsheet fieldset.small-scale-grid + .repcontainer,
.sheet-rolltemplate-rapidfire fieldset.small-scale-grid + .repcontainer, .ui-dialog .tab-content .charsheet .headed-textarea, .sheet-rolltemplate-rapidfire .headed-textarea, .ui-dialog .tab-content .charsheet section, .sheet-rolltemplate-rapidfire section, .ui-dialog .tab-content .charsheet .adaptive-text {
display: grid;
}
.ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-rapidfire select,
.ui-dialog .tab-content .charsheet .pseudo-select span,
.sheet-rolltemplate-rapidfire .pseudo-select span,
.ui-dialog .tab-content .charsheet input:not(:where([type="checkbox"], [type="radio"])),
.sheet-rolltemplate-rapidfire input:not(:where([type="checkbox"], [type="radio"])),
.ui-dialog .tab-content .charsheet .uneditable-input,
.sheet-rolltemplate-rapidfire .uneditable-input,
.ui-dialog .tab-content .charsheet textarea,
.sheet-rolltemplate-rapidfire textarea, .ui-dialog .tab-content .charsheet .adaptive-text > span {
border-width: 1px 3px;
border-style: solid;
border-radius: 5px;
border-color: transparent;
box-sizing: border-box;
}
.ui-dialog .tab-content .charsheet .repcontrol-button, .sheet-rolltemplate-rapidfire .repcontrol-button {
background-color: #DCDCDC33;
border-radius: 5px;
box-shadow: 0 2px 4px black;
border-width: 0;
transition-property: box-shadow, backdrop-filter;
transition-duration: 200ms;
transition-timing-function: ease-out;
backdrop-filter: blur(1px);
overflow: hidden;
}
.ui-dialog .tab-content .charsheet .repcontrol-button:is(:hover, :focus), .sheet-rolltemplate-rapidfire .repcontrol-button:is(:hover, :focus) {
background-color: #85858580;
box-shadow: 0 4px 6px black;
backdrop-filter: blur(2px);
}
.ui-dialog .tab-content .charsheet .repcontrol-button:active, .sheet-rolltemplate-rapidfire .repcontrol-button:active {
background-color: #858585ff;
box-shadow: 0 1px 2px black;
backdrop-filter: blur(0px);
}
.ui-dialog .tab-content .charsheet .repcontrol-button, .sheet-rolltemplate-rapidfire .repcontrol-button {
padding: 5px 7px;
}
.ui-dialog .tab-content .charsheet .adaptive-text {
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: "content";
}
.ui-dialog .tab-content .charsheet .adaptive-text > * {
grid-area: content;
}
.ui-dialog .tab-content .charsheet .adaptive-text > span {
opacity: 0;
z-index: -10;
white-space: pre-wrap;
text-transform: initial;
}
.ui-dialog .tab-content .charsheet .adaptive-text textarea {
resize: none;
}
#main-nav .nav__button--settings, .ui-dialog .tab-content .charsheet .pictos, .sheet-rolltemplate-rapidfire .pictos {
font-family: pictos;
text-transform: initial;
}
.ui-dialog .tab-content .charsheet .pictos3, .sheet-rolltemplate-rapidfire .pictos3 {
font-family: pictos three;
text-transform: initial;
}
.ui-dialog .tab-content .charsheet .pictoscustom, .sheet-rolltemplate-rapidfire .pictoscustom {
font-family: pictos custom;
text-transform: initial;
}
#main .uppercase {
text-transform: uppercase;
}
#main .roller {
display: inline-flex;
align-items: center;
align-self: start;
gap: var(--half-gap);
}
#main .roller:before {
content: "L";
font-family: dicefontd6;
}
.ui-dialog .tab-content .charsheet .hidden, .sheet-rolltemplate-rapidfire .hidden,
.ui-dialog .tab-content .charsheet *[hidden],
.sheet-rolltemplate-rapidfire *[hidden] {
display: none !important;
}
.ui-dialog .tab-content .charsheet .italics, .sheet-rolltemplate-rapidfire .italics {
font-style: italic;
}
.ui-dialog .tab-content .charsheet span, .sheet-rolltemplate-rapidfire span,
.ui-dialog .tab-content .charsheet input,
.sheet-rolltemplate-rapidfire input,
.ui-dialog .tab-content .charsheet textarea,
.sheet-rolltemplate-rapidfire textarea, .ui-dialog .tab-content .charsheet h5 *, .sheet-rolltemplate-rapidfire h5 *,
.ui-dialog .tab-content .charsheet *[aria-level="5"] *,
.sheet-rolltemplate-rapidfire *[aria-level="5"] *, .ui-dialog .tab-content .charsheet h5, .sheet-rolltemplate-rapidfire h5,
.ui-dialog .tab-content .charsheet *[aria-level="5"],
.sheet-rolltemplate-rapidfire *[aria-level="5"], .ui-dialog .tab-content .charsheet h4 *, .sheet-rolltemplate-rapidfire h4 *,
.ui-dialog .tab-content .charsheet *[aria-level="4"] *,
.sheet-rolltemplate-rapidfire *[aria-level="4"] *, .ui-dialog .tab-content .charsheet h4, .sheet-rolltemplate-rapidfire h4,
.ui-dialog .tab-content .charsheet *[aria-level="4"],
.sheet-rolltemplate-rapidfire *[aria-level="4"], .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-rapidfire h3 *,
.ui-dialog .tab-content .charsheet *[aria-level="3"] *,
.sheet-rolltemplate-rapidfire *[aria-level="3"] *, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-rapidfire h3,
.ui-dialog .tab-content .charsheet *[aria-level="3"],
.sheet-rolltemplate-rapidfire *[aria-level="3"], .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-rapidfire h2 *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name] *,
.ui-dialog .tab-content .charsheet *[aria-level="2"] *,
.sheet-rolltemplate-rapidfire *[aria-level="2"] *, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-rapidfire h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name],
.ui-dialog .tab-content .charsheet *[aria-level="2"],
.sheet-rolltemplate-rapidfire *[aria-level="2"], .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-rapidfire h1 *,
.ui-dialog .tab-content .charsheet *[aria-level="1"] *,
.sheet-rolltemplate-rapidfire *[aria-level="1"] *, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-rapidfire h1,
.ui-dialog .tab-content .charsheet *[aria-level="1"],
.sheet-rolltemplate-rapidfire *[aria-level="1"] {
line-height: normal;
}
.ui-dialog .tab-content .charsheet h5 *, .sheet-rolltemplate-rapidfire h5 *,
.ui-dialog .tab-content .charsheet *[aria-level="5"] *,
.sheet-rolltemplate-rapidfire *[aria-level="5"] *, .ui-dialog .tab-content .charsheet h5, .sheet-rolltemplate-rapidfire h5,
.ui-dialog .tab-content .charsheet *[aria-level="5"],
.sheet-rolltemplate-rapidfire *[aria-level="5"], .ui-dialog .tab-content .charsheet h4 *, .sheet-rolltemplate-rapidfire h4 *,
.ui-dialog .tab-content .charsheet *[aria-level="4"] *,
.sheet-rolltemplate-rapidfire *[aria-level="4"] *, .ui-dialog .tab-content .charsheet h4, .sheet-rolltemplate-rapidfire h4,
.ui-dialog .tab-content .charsheet *[aria-level="4"],
.sheet-rolltemplate-rapidfire *[aria-level="4"], .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-rapidfire h3 *,
.ui-dialog .tab-content .charsheet *[aria-level="3"] *,
.sheet-rolltemplate-rapidfire *[aria-level="3"] *, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-rapidfire h3,
.ui-dialog .tab-content .charsheet *[aria-level="3"],
.sheet-rolltemplate-rapidfire *[aria-level="3"], .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-rapidfire h2 *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name] *,
.ui-dialog .tab-content .charsheet *[aria-level="2"] *,
.sheet-rolltemplate-rapidfire *[aria-level="2"] *, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-rapidfire h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name],
.ui-dialog .tab-content .charsheet *[aria-level="2"],
.sheet-rolltemplate-rapidfire *[aria-level="2"], .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-rapidfire h1 *,
.ui-dialog .tab-content .charsheet *[aria-level="1"] *,
.sheet-rolltemplate-rapidfire *[aria-level="1"] *, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-rapidfire h1,
.ui-dialog .tab-content .charsheet *[aria-level="1"],
.sheet-rolltemplate-rapidfire *[aria-level="1"] {
color: black;
display: block;
white-space: nowrap;
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
}
.ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-rapidfire h3 *,
.ui-dialog .tab-content .charsheet *[aria-level="3"] *,
.sheet-rolltemplate-rapidfire *[aria-level="3"] *, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-rapidfire h3,
.ui-dialog .tab-content .charsheet *[aria-level="3"],
.sheet-rolltemplate-rapidfire *[aria-level="3"], .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-rapidfire h2 *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name] *,
.ui-dialog .tab-content .charsheet *[aria-level="2"] *,
.sheet-rolltemplate-rapidfire *[aria-level="2"] *, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-rapidfire h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name],
.ui-dialog .tab-content .charsheet *[aria-level="2"],
.sheet-rolltemplate-rapidfire *[aria-level="2"], .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-rapidfire h1 *,
.ui-dialog .tab-content .charsheet *[aria-level="1"] *,
.sheet-rolltemplate-rapidfire *[aria-level="1"] *, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-rapidfire h1,
.ui-dialog .tab-content .charsheet *[aria-level="1"],
.sheet-rolltemplate-rapidfire *[aria-level="1"] {
text-transform: uppercase;
font-weight: normal;
}
.ui-dialog .tab-content .charsheet h5 :not(input), .sheet-rolltemplate-rapidfire h5 :not(input),
.ui-dialog .tab-content .charsheet *[aria-level="5"] :not(input),
.sheet-rolltemplate-rapidfire *[aria-level="5"] :not(input), .ui-dialog .tab-content .charsheet h5:not(input), .sheet-rolltemplate-rapidfire h5:not(input),
.ui-dialog .tab-content .charsheet [aria-level="5"]:not(input),
.sheet-rolltemplate-rapidfire [aria-level="5"]:not(input), .ui-dialog .tab-content .charsheet h4 :not(input), .sheet-rolltemplate-rapidfire h4 :not(input),
.ui-dialog .tab-content .charsheet *[aria-level="4"] :not(input),
.sheet-rolltemplate-rapidfire *[aria-level="4"] :not(input), .ui-dialog .tab-content .charsheet h4:not(input), .sheet-rolltemplate-rapidfire h4:not(input),
.ui-dialog .tab-content .charsheet [aria-level="4"]:not(input),
.sheet-rolltemplate-rapidfire [aria-level="4"]:not(input) {
text-transform: capitalize;
}
.ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-rapidfire h1 *,
.ui-dialog .tab-content .charsheet *[aria-level="1"] *,
.sheet-rolltemplate-rapidfire *[aria-level="1"] *, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-rapidfire h1,
.ui-dialog .tab-content .charsheet *[aria-level="1"],
.sheet-rolltemplate-rapidfire *[aria-level="1"] {
font-size: 2rem;
font-family: var(--topHeaderFont);
}
.ui-dialog .tab-content .charsheet h1 :not(input), .sheet-rolltemplate-rapidfire h1 :not(input),
.ui-dialog .tab-content .charsheet *[aria-level="1"] :not(input),
.sheet-rolltemplate-rapidfire *[aria-level="1"] :not(input), .ui-dialog .tab-content .charsheet h1:not(input), .sheet-rolltemplate-rapidfire h1:not(input),
.ui-dialog .tab-content .charsheet [aria-level="1"]:not(input),
.sheet-rolltemplate-rapidfire [aria-level="1"]:not(input) {
text-align: center;
}
.ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-rapidfire h2 *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name] *,
.ui-dialog .tab-content .charsheet *[aria-level="2"] *,
.sheet-rolltemplate-rapidfire *[aria-level="2"] *, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-rapidfire h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name],
.ui-dialog .tab-content .charsheet *[aria-level="2"],
.sheet-rolltemplate-rapidfire *[aria-level="2"] {
font-size: 1.75rem;
font-family: var(--topHeaderFont);
grid-area: header;
}
.ui-dialog .tab-content .charsheet h2 :not(input), .sheet-rolltemplate-rapidfire h2 :not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] :not(input), .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name] :not(input),
.ui-dialog .tab-content .charsheet *[aria-level="2"] :not(input),
.sheet-rolltemplate-rapidfire *[aria-level="2"] :not(input), .ui-dialog .tab-content .charsheet h2:not(input), .sheet-rolltemplate-rapidfire h2:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input), .sheet-rolltemplate-rapidfire .input-label:not(.stacked).large > [name]:not(input),
.ui-dialog .tab-content .charsheet [aria-level="2"]:not(input),
.sheet-rolltemplate-rapidfire [aria-level="2"]:not(input) {
text-align: center;
}
.ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-rapidfire h3 *,
.ui-dialog .tab-content .charsheet *[aria-level="3"] *,
.sheet-rolltemplate-rapidfire *[aria-level="3"] *, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-rapidfire h3,
.ui-dialog .tab-content .charsheet *[aria-level="3"],
.sheet-rolltemplate-rapidfire *[aria-level="3"] {
font-size: 1.5rem;
font-family: var(--topHeaderFont);
}
.ui-dialog .tab-content .charsheet h3 :not(input), .sheet-rolltemplate-rapidfire h3 :not(input),
.ui-dialog .tab-content .charsheet *[aria-level="3"] :not(input),
.sheet-rolltemplate-rapidfire *[aria-level="3"] :not(input), .ui-dialog .tab-content .charsheet h3:not(input), .sheet-rolltemplate-rapidfire h3:not(input),
.ui-dialog .tab-content .charsheet [aria-level="3"]:not(input),
.sheet-rolltemplate-rapidfire [aria-level="3"]:not(input) {
text-align: center;
}
.ui-dialog .tab-content .charsheet h4 *, .sheet-rolltemplate-rapidfire h4 *,
.ui-dialog .tab-content .charsheet *[aria-level="4"] *,
.sheet-rolltemplate-rapidfire *[aria-level="4"] *, .ui-dialog .tab-content .charsheet h4, .sheet-rolltemplate-rapidfire h4,
.ui-dialog .tab-content .charsheet *[aria-level="4"],
.sheet-rolltemplate-rapidfire *[aria-level="4"] {
font-size: 1.25rem;
font-family: var(--midHeaderFont);
}
.ui-dialog .tab-content .charsheet h4 :not(input), .sheet-rolltemplate-rapidfire h4 :not(input),
.ui-dialog .tab-content .charsheet *[aria-level="4"] :not(input),
.sheet-rolltemplate-rapidfire *[aria-level="4"] :not(input), .ui-dialog .tab-content .charsheet h4:not(input), .sheet-rolltemplate-rapidfire h4:not(input),
.ui-dialog .tab-content .charsheet [aria-level="4"]:not(input),
.sheet-rolltemplate-rapidfire [aria-level="4"]:not(input) {
text-align: center;
}
.ui-dialog .tab-content .charsheet h5 *, .sheet-rolltemplate-rapidfire h5 *,
.ui-dialog .tab-content .charsheet *[aria-level="5"] *,
.sheet-rolltemplate-rapidfire *[aria-level="5"] *, .ui-dialog .tab-content .charsheet h5, .sheet-rolltemplate-rapidfire h5,
.ui-dialog .tab-content .charsheet *[aria-level="5"],
.sheet-rolltemplate-rapidfire *[aria-level="5"] {
font-size: 1rem;
font-style: normal;
font-family: var(--midHeaderFont);
}
.ui-dialog .tab-content .charsheet h5 :not(input), .sheet-rolltemplate-rapidfire h5 :not(input),
.ui-dialog .tab-content .charsheet *[aria-level="5"] :not(input),
.sheet-rolltemplate-rapidfire *[aria-level="5"] :not(input), .ui-dialog .tab-content .charsheet h5:not(input), .sheet-rolltemplate-rapidfire h5:not(input),
.ui-dialog .tab-content .charsheet [aria-level="5"]:not(input),
.sheet-rolltemplate-rapidfire [aria-level="5"]:not(input) {
text-align: center;
}
.ui-dialog .tab-content .charsheet .contents, .sheet-rolltemplate-rapidfire .contents,
.ui-dialog .tab-content .charsheet .sheet-contents,
.sheet-rolltemplate-rapidfire .sheet-contents {
display: contents;
}
.ui-dialog .tab-content .charsheet .health-track__fill-control:checked + *, .ui-dialog .tab-content .charsheet input[type=checkbox]:checked, .sheet-rolltemplate-rapidfire input[type=checkbox]:checked {
background-color: var(--selectedColor);
}
.ui-dialog .tab-content .charsheet .boxed, .sheet-rolltemplate-rapidfire .boxed,
.ui-dialog .tab-content .charsheet .sheet-boxed,
.sheet-rolltemplate-rapidfire .sheet-boxed {
border: 1px solid black;
border-radius: 0;
box-sizing: border-box;
}
.ui-dialog .tab-content .charsheet, .sheet-rolltemplate-rapidfire {
--grid-gap: 1rem;
--half-gap: calc(var(--grid-gap) / 2);
--tiny-gap: calc(var(--half-gap) / 2);
--big-gap: calc(var(--grid-gap) * 2);
--revealTime: 500ms;
--delayTime: 200ms;
--inputSwap: opacity var(--revealTime) ease var(--delayTime);
--focusTiming: 500ms ease;
--focusTrans: all var(--focusTiming);
--borderColor: black;
--fontColor: black;
--backColor: #ffffff;
--spanSectionColumn:1/-1;
--displayBorderWidth: 2px;
--subHeadBackColor:grey;
--unselectedColor:lightgrey;
--selectedColor:black;
--topCorner:url("https://s3.amazonaws.com/files.d20.io/images/258525471/MZYT-HjOvfJOqUXufyBkww/original.png");
--bottomCorner:url("https://s3.amazonaws.com/files.d20.io/images/258525472/d7gSQyNdXW4tfBUa3osltQ/original.png");
--headerBottom:url("https://s3.amazonaws.com/files.d20.io/images/258525865/9moWl3pE8miL8gqQC2UPRw/original.png");
--footerTop:url("https://s3.amazonaws.com/files.d20.io/images/258525864/dzZKV6kH_fltY8yH9D-ptA/original.png");
position: relative;
gap: var(--grid-gap);
}
.ui-dialog .tab-content .charsheet button, .sheet-rolltemplate-rapidfire button {
cursor: pointer;
}
.ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-rapidfire textarea {
resize: vertical;
min-height: 3.5rem;
white-space: pre-wrap;
}
.ui-dialog .tab-content .charsheet textarea.fixed, .sheet-rolltemplate-rapidfire textarea.fixed {
resize: none;
overflow: auto;
}
.ui-dialog .tab-content .charsheet .span-2, .sheet-rolltemplate-rapidfire .span-2 {
grid-column: span 2;
}
.ui-dialog .tab-content .charsheet .span-all, .sheet-rolltemplate-rapidfire .span-all {
grid-column: 1/-1;
}
.ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-rapidfire select,
.ui-dialog .tab-content .charsheet .pseudo-select span,
.sheet-rolltemplate-rapidfire .pseudo-select span,
.ui-dialog .tab-content .charsheet textarea,
.sheet-rolltemplate-rapidfire textarea,
.ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])),
.sheet-rolltemplate-rapidfire input:not(:is([type=radio], [type=checkbox])),
.ui-dialog .tab-content .charsheet .uneditable-input,
.sheet-rolltemplate-rapidfire .uneditable-input {
padding: 2px;
font-size: 1rem;
}
.ui-dialog .tab-content .charsheet input:is([type=text], [type=number]), .sheet-rolltemplate-rapidfire input:is([type=text], [type=number]), .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-rapidfire textarea {
cursor: auto;
}
.ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-rapidfire select,
.ui-dialog .tab-content .charsheet .pseudo-select span,
.sheet-rolltemplate-rapidfire .pseudo-select span {
-webkit-apperance: none;
appearance: none;
text-transform: capitalize;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.ui-dialog .tab-content .charsheet input, .sheet-rolltemplate-rapidfire input {
width: auto;
}
.ui-dialog .tab-content .charsheet input:placeholder, .sheet-rolltemplate-rapidfire input:placeholder {
color: #ededed80;
}
.ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before, .sheet-rolltemplate-rapidfire input.plus-control:not([value*="-"]) + span:before {
content: "+";
}
.ui-dialog .tab-content .charsheet span, .sheet-rolltemplate-rapidfire span,
.ui-dialog .tab-content .charsheet input,
.sheet-rolltemplate-rapidfire input,
.ui-dialog .tab-content .charsheet textarea,
.sheet-rolltemplate-rapidfire textarea {
font-size: 1rem;
}
.ui-dialog .tab-content .charsheet span, .sheet-rolltemplate-rapidfire span, .ui-dialog .tab-content .charsheet input, .sheet-rolltemplate-rapidfire input, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-rapidfire textarea, .ui-dialog .tab-content .charsheet button, .sheet-rolltemplate-rapidfire button, .ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-rapidfire select {
font-family: var(--contentFont);
--fontWght: 600;
font-weight: var(--fontWght);
font-variation-settings: "wght" var(--fontWght);
}
.ui-dialog .tab-content .charsheet input[type=checkbox], .sheet-rolltemplate-rapidfire input[type=checkbox] {
align-self: center;
border: 1px solid black;
cursor: pointer;
}
.ui-dialog .tab-content .charsheet input[type=radio], .sheet-rolltemplate-rapidfire input[type=radio] {
appearance: radio;
}
.ui-dialog .tab-content .charsheet input[type=number], .sheet-rolltemplate-rapidfire input[type=number] {
width: 3rem;
-moz-appearance: textfield !important;
text-align: center;
}
.ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, .sheet-rolltemplate-rapidfire input[type=number]::-webkit-inner-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button, .sheet-rolltemplate-rapidfire input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ui-dialog .tab-content .charsheet .number, .sheet-rolltemplate-rapidfire .number {
width: 2rem;
box-sizing: border-box;
}
.ui-dialog .tab-content .charsheet section, .sheet-rolltemplate-rapidfire section {
gap: var(--half-gap);
align-self: start;
}
.ui-dialog .tab-content .charsheet section.page, .sheet-rolltemplate-rapidfire section.page {
display: none;
}
.ui-dialog .tab-content .charsheet section.inactive, .sheet-rolltemplate-rapidfire section.inactive {
display: none !important;
}
.ui-dialog .tab-content .charsheet .pseudo-button, .sheet-rolltemplate-rapidfire .pseudo-button {
display: inline;
cursor: pointer;
border-radius: 5px;
text-transform: uppercase;
border: 1px solid black;
text-align: center;
padding: 0 5px;
}
.ui-dialog .tab-content .charsheet .input-label, .sheet-rolltemplate-rapidfire .input-label {
display: inline-flex;
gap: var(--half-gap);
align-items: center;
}
.ui-dialog .tab-content .charsheet .input-label:not(.stacked) > [name]:not([type=number], [type=checkbox], [type=radio]), .sheet-rolltemplate-rapidfire .input-label:not(.stacked) > [name]:not([type=number], [type=checkbox], [type=radio]) {
width: 0;
flex: 1 1 0;
}
.ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]), .sheet-rolltemplate-rapidfire .input-label:not(.stacked) > :not([name]) {
flex: 0 0 auto;
}
.ui-dialog .tab-content .charsheet .input-label--dual, .sheet-rolltemplate-rapidfire .input-label--dual {
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "over over over" "under under under";
}
.ui-dialog .tab-content .charsheet .input-label--dual > span:last-of-type, .sheet-rolltemplate-rapidfire .input-label--dual > span:last-of-type {
grid-column: 1/-1;
}
.ui-dialog .tab-content .charsheet .input-label--dual > input, .sheet-rolltemplate-rapidfire .input-label--dual > input {
width: 100%;
}
.ui-dialog .tab-content .charsheet .input-label--dual > .slash, .sheet-rolltemplate-rapidfire .input-label--dual > .slash {
line-height: 0rem;
font-weight: normal;
}
.ui-dialog .tab-content .charsheet .headed-textarea, .sheet-rolltemplate-rapidfire .headed-textarea {
grid-template-rows: auto 1fr;
grid-template-columns: auto;
}
.ui-dialog .tab-content .charsheet .headed-textarea h5, .sheet-rolltemplate-rapidfire .headed-textarea h5 {
justify-self: start;
}
.ui-dialog .tab-content .charsheet .boxed.thick-left, .sheet-rolltemplate-rapidfire .boxed.thick-left,
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-left,
.sheet-rolltemplate-rapidfire .sheet-boxed.thick-left {
border-left-width: 5px;
}
.ui-dialog .tab-content .charsheet .boxed.thick-bottom, .sheet-rolltemplate-rapidfire .boxed.thick-bottom,
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom,
.sheet-rolltemplate-rapidfire .sheet-boxed.thick-bottom {
border-bottom-width: 5px;
}
.ui-dialog .tab-content .charsheet .boxed.thick-right, .sheet-rolltemplate-rapidfire .boxed.thick-right,
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-right,
.sheet-rolltemplate-rapidfire .sheet-boxed.thick-right {
border-right-width: 5px;
}
.ui-dialog .tab-content .charsheet .boxed.thick-top, .sheet-rolltemplate-rapidfire .boxed.thick-top,
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-top,
.sheet-rolltemplate-rapidfire .sheet-boxed.thick-top {
border-top-width: 5px;
}
.ui-dialog .tab-content .charsheet .underlined, .sheet-rolltemplate-rapidfire .underlined,
.ui-dialog .tab-content .charsheet .sheet-underlined,
.sheet-rolltemplate-rapidfire .sheet-underlined {
border-radius: 0;
border-bottom: 1px solid black;
transition: var(--focusTrans);
}
.ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):is(:focus, :focus-within), .sheet-rolltemplate-rapidfire :is(.underlined, .boxed):not([readonly]):is(:focus, :focus-within) {
background-color: #DCDCDC;
transition: var(--focusTrans);
}
.ui-dialog .tab-content .charsheet .small-scale-grid, .sheet-rolltemplate-rapidfire .small-scale-grid,
.ui-dialog .tab-content .charsheet fieldset.small-scale-grid + .repcontainer,
.sheet-rolltemplate-rapidfire fieldset.small-scale-grid + .repcontainer {
grid-template-columns: [header-start] repeat(auto-fit, minmax(15rem, 1fr)) [header-end];
grid-template-rows: [header-start] auto [header-end];
gap: var(--half-gap);
}
.ui-dialog .tab-content .charsheet .small-scale-grid > .repitem, .sheet-rolltemplate-rapidfire .small-scale-grid > .repitem,
.ui-dialog .tab-content .charsheet fieldset.small-scale-grid + .repcontainer > .repitem,
.sheet-rolltemplate-rapidfire fieldset.small-scale-grid + .repcontainer > .repitem {
display: flex;
gap: var(--half-gap);
}
.ui-dialog .tab-content .charsheet .small-scale-grid > .repitem > :is(.dot-row, input[type=text]), .sheet-rolltemplate-rapidfire .small-scale-grid > .repitem > :is(.dot-row, input[type=text]),
.ui-dialog .tab-content .charsheet fieldset.small-scale-grid + .repcontainer > .repitem > :is(.dot-row, input[type=text]),
.sheet-rolltemplate-rapidfire fieldset.small-scale-grid + .repcontainer > .repitem > :is(.dot-row, input[type=text]) {
flex: 1 1 0;
width: 100%;
}
.ui-dialog .tab-content .charsheet .small-scale-grid .repcontrol_move, .sheet-rolltemplate-rapidfire .small-scale-grid .repcontrol_move,
.ui-dialog .tab-content .charsheet fieldset.small-scale-grid + .repcontainer .repcontrol_move,
.sheet-rolltemplate-rapidfire fieldset.small-scale-grid + .repcontainer .repcontrol_move {
display: none;
}
.ui-dialog .tab-content .charsheet .short-text, .sheet-rolltemplate-rapidfire .short-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-transform: initial;
}
.ui-dialog .tab-content .charsheet .roll-container, .sheet-rolltemplate-rapidfire .roll-container {
align-self: center;
opacity: 0;
grid-row: 1/2;
}
.ui-dialog .tab-content .charsheet .repitem > input:not([type=checkbox]), .sheet-rolltemplate-rapidfire .repitem > input:not([type=checkbox]) {
width: 100%;
}
.ui-dialog .tab-content .charsheet .repitem .headed-textarea, .sheet-rolltemplate-rapidfire .repitem .headed-textarea {
grid-column: 1/-1;
}
.ui-dialog .tab-content .charsheet .repitem .collapse, .sheet-rolltemplate-rapidfire .repitem .collapse {
opacity: 0;
position: absolute;
right: -10px;
top: 0px;
border: 0px solid black;
border-radius: 0;
color: var(--selectedColor);
text-transform: none;
}
.ui-dialog .tab-content .charsheet .repitem .collapse:before, .sheet-rolltemplate-rapidfire .repitem .collapse:before {
content: "y";
font-family: pictos;
}
.ui-dialog .tab-content .charsheet .repitem .collapse:checked, .sheet-rolltemplate-rapidfire .repitem .collapse:checked {
background-color: transparent;
color: var(--unselectedColor);
}
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded, .sheet-rolltemplate-rapidfire .repitem .collapse:checked ~ .expanded {
display: none;
}
.ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .sheet-rolltemplate-rapidfire .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + * {
display: none;
}
.ui-dialog .tab-content .charsheet .repitem .collapse:hover, .sheet-rolltemplate-rapidfire .repitem .collapse:hover {
color: var(--selectedColor);
}
.ui-dialog .tab-content .charsheet .repitem:hover .collapse, .sheet-rolltemplate-rapidfire .repitem:hover .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, .sheet-rolltemplate-rapidfire .repitem:hover .roll-container {
opacity: 1;
}
.ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse, .sheet-rolltemplate-rapidfire .repcontainer.editmode .collapse {
display: none;
}
.ui-dialog .tab-content .charsheet .repcontainer, .sheet-rolltemplate-rapidfire .repcontainer {
display: grid;
row-gap: var(--grid-gap);
}
.ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) .repcontrol-button, .sheet-rolltemplate-rapidfire .repeating-container:is(:hover, :focus-within, :focus) .repcontrol-button {
opacity: 1;
}
.ui-dialog .tab-content .charsheet .repcontrol-button, .sheet-rolltemplate-rapidfire .repcontrol-button {
grid-area: header;
align-self: center;
text-transform: none;
opacity: 0;
transition: opacity var(--revealTime);
}
.ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol, .sheet-rolltemplate-rapidfire .repcontrol-button ~ .repcontrol {
display: none;
}
.ui-dialog .tab-content .charsheet .repcontrol-button--add, .sheet-rolltemplate-rapidfire .repcontrol-button--add {
justify-self: start;
}
.ui-dialog .tab-content .charsheet .repcontrol-button--add:before, .sheet-rolltemplate-rapidfire .repcontrol-button--add:before {
font-family: pictos;
content: "&";
}
.ui-dialog .tab-content .charsheet .repcontrol-button--edit, .sheet-rolltemplate-rapidfire .repcontrol-button--edit {
justify-self: end;
}
.ui-dialog .tab-content .charsheet .repcontrol-button--edit:before, .sheet-rolltemplate-rapidfire .repcontrol-button--edit:before {
font-family: pictos;
content: "p";
}
.ui-dialog .tab-content .charsheet .box, .sheet-rolltemplate-rapidfire .box {
border-radius: 0;
width: 10px;
height: 10px;
}
.ui-dialog .tab-content .charsheet *[data-i18n=xp] {
text-transform: uppercase;
}
.ui-dialog .tab-content .charsheet .stat-grid {
gap: var(--half-gap) var(--tiny-gap);
}
.ui-dialog .tab-content .charsheet .stat-grid > :not(input):not(h2) {
place-self: center end;
}
.ui-dialog .tab-content .charsheet .boxed.span-2 {
grid-auto-flow: column;
place-content: center;
width: 6.5rem;
}
.ui-dialog .tab-content .charsheet .roll-plus {
justify-self: center;
}
.ui-dialog .tab-content .charsheet .health-track .repcontainer {
grid-template-columns: repeat(auto-fill, 2rem);
row-gap: var(--tiny-gap);
}
.ui-dialog .tab-content .charsheet .health-track .repcontainer:hover .health-track__clearer {
background-image: linear-gradient(45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px)), linear-gradient(-45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px));
}
.ui-dialog .tab-content .charsheet .health-track .repcontainer > .repitem {
grid-template-columns: 2rem;
grid-template-rows: repeat(2, 2rem);
grid-template-areas: "check" "penalty";
}
.ui-dialog .tab-content .charsheet .health-track .repcontainer > .repitem:first-child .itemcontrol {
display: none !important;
}
.ui-dialog .tab-content .charsheet .health-track .repcontainer > .repitem .repcontrol_move {
display: none !important;
}
.ui-dialog .tab-content .charsheet .health-track .repcontrol {
display: none;
}
.ui-dialog .tab-content .charsheet .health-track__max-control[value="1"] ~ .repcontrol .repcontrol_edit {
display: none;
}
.ui-dialog .tab-content .charsheet .health-track__number:is(:hover, :focus) {
border-radius: 0;
}
.ui-dialog .tab-content .charsheet .health-track__checkbox {
border-radius: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
grid-area: check;
}
.ui-dialog .tab-content .charsheet .health-track__clear-control:not(:checked) ~ .health-track__clearer {
display: none;
}
.ui-dialog .tab-content .charsheet .health-track__clearer {
grid-area: check;
}
.ui-dialog .tab-content .charsheet .health-track__clearer button {
width: 100%;
height: 100%;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:after, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border__hex-content, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:before {
overflow: hidden;
grid-template-areas: "content";
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:after, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border__hex-content, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:before {
width: 100%;
height: 100%;
grid-area: content;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:before {
transform: rotate(-60deg);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:before, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:after {
box-sizing: border-box;
content: "";
box-shadow: 0 0 0 1px black inset, 0 0 4px #ffffff inset;
}
#settings, #character, #remnant {
gap: var(--big-gap);
}
.system-remnant#settings, .system-remnant#character, .system-remnant#remnant {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
#character-info, #skill, #weapon, #adjustments .subsection, #remnant-ratings .remnant-skills, #remnant-specialty, #remnant-trait, #remnant-drone, #remnant-weapons {
grid-template-areas: "header";
gap: var(--half-gap);
align-self: start;
}
html {
font-size: 13px;
}
ul.nav-tabs.nav {
position: sticky;
top: 0;
background-color: white;
z-index: 9999;
margin-bottom: 0px;
}
.nav-tabs li a {
font-family: var(--midHeaderFont);
padding-top: 18px;
padding-bottom: 15px;
}
.nav-tabs li a[data-tab=charsheet] {
background-image: url(https://s3.amazonaws.com/files.d20.io/images/259063058/V4Hm27FqfgBujU8bI74Xaw/original.png);
background-size: contain;
background-repeat: no-repeat;
padding-left: 50px;
padding-right: 12px;
}
.itemcontrol {
z-index: 10;
}
.image-input {
cursor: pointer;
}
.ui-dialog .tab-content .charsheet {
padding-top: 0px;
}
.ui-dialog .tab-content .charsheet .repeat-columns > * {
background-color: var(--subHeadBackColor);
border: 1px solid black;
}
.ui-dialog .tab-content .charsheet .image-container {
grid-template-columns: "content";
}
.ui-dialog .tab-content .charsheet .image-container__input {
z-index: 10;
background-color: white;
box-shadow: 0 0 var(--grid-gap) var(--grid-gap) white;
grid-area: content;
place-self: center;
width: calc(100% - (var(--big-gap) * 2));
transition: opacity var(--focusTiming), height var(--focusTiming);
opacity: 0;
height: 0;
overflow: hidden;
}
.ui-dialog .tab-content .charsheet .image-container__input span {
white-space: pre-wrap;
}
.ui-dialog .tab-content .charsheet .image-container__input input {
width: 100%;
box-sizing: border-box;
}
.ui-dialog .tab-content .charsheet .image-container__input.active {
opacity: 1;
height: auto;
}
.ui-dialog .tab-content .charsheet .image-container__button {
grid-area: content;
}
.ui-dialog .tab-content .charsheet .base-container {
grid-template-areas: "content";
}
.ui-dialog .tab-content .charsheet .base-container__actual {
grid-area: content;
}
.ui-dialog .tab-content .charsheet .base-container__interact {
grid-area: content;
z-index: 1;
}
#main-nav {
--tabColor:white;
--tabBorder:drop-shadow(1px 0 0 grey) drop-shadow(-1px 0 0 grey) drop-shadow(0 -1px 0 grey) drop-shadow(0 1px 0 black);
display: grid;
gap: var(--half-gap);
grid-template-columns: 1fr auto 1fr;
align-items: center;
position: sticky;
top: 60px;
background: white;
box-shadow: -10px 0 0 0 white, 10px 0 0 0 white, 0 -6px white;
z-index: 100;
border-bottom: 1px solid black;
}
#main-nav .nav__button {
font-style: normal;
color: grey;
}
#main-nav .nav__button--settings.active, #main-nav .nav__button--settings:hover {
color: black;
}
#main-nav.system-remnant {
/*
.tab:nth-of-type(2) {
background-color: #555;
top: 10px;
left: 30px;
z-index: 1;
color: #EEE;
}
.tab:nth-of-type(2):before {
background-color: #555;
}
.tab:nth-of-type(2):hover,
.tab:nth-of-type(2):hover:before {
background-color: #159;
transition: 0.3s ease-out;
}*/
}
#main-nav.system-remnant .nav__button--tab {
background-color: var(--tabColor);
position: relative;
display: inline-block;
z-index: 2;
padding: calc(var(--half-gap) + 0.1rem);
filter: var(--tabBorder);
}
#main-nav.system-remnant .nav__button--tab.active, #main-nav.system-remnant .nav__button--tab:hover {
--tabBorder:drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
top: 1px;
color: black;
}
#main-nav.system-remnant .nav__button--tab.active {
pointer-events: none;
}
#main-nav.system-remnant .nav__button--tab:before {
height: 100%;
width: 50px;
background-color: var(--tabColor);
content: "";
position: absolute;
z-index: -1;
}
#main-nav.system-remnant .nav__button--tab--left {
border-radius: 0 50% 0 0;
margin-left: 1px;
justify-self: start;
}
#main-nav.system-remnant .nav__button--tab--left:before {
border-radius: 0 2px 0 0;
left: calc(100% - 40px);
top: 0px;
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
#main-nav.system-remnant .nav__button--tab--right {
border-radius: 50% 0 0 0;
margin-right: 1px;
justify-self: end;
}
#main-nav.system-remnant .nav__button--tab--right:before {
border-radius: 2px 0 0 0;
left: -5px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
#main .system-header {
margin: 0 auto;
width: 200px;
}
#main article {
padding: var(--grid-gap);
}
#main article:not(.active) {
display: none;
}
#main .translate-control:checked ~ .untranslated, #main .translate-control:not(:checked) ~ .translated {
display: none;
}
#main .section {
transition: box-shadow var(--focusTiming), transform;
border-radius: 6px;
padding: var(--half-gap);
}
#main .section:hover {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
#settings .input-label {
justify-content: space-between;
}
#settings .input-label [name]:not([type=number], [type=checkbox], [type=radio]) {
width: auto;
flex: 0 0 auto;
}
#settings section {
align-self: stretch;
align-content: start;
}
#character.system-remnant {
grid-template-areas: "." "skills" "skills";
border-left: 1px solid black;
grid-template-rows: repeat(2, auto) 1fr;
}
#character-info > .health-track {
margin: 0 -5px;
}
#stats {
grid-template-columns: auto 1fr repeat(2, auto);
grid-template-areas: "header header header header" "stat_points . . ." "reserve . . ." ". . . ." "header2 header2 header2 header2";
}
#stats h2 {
grid-area: auto;
grid-column: 1/-1;
}
#stats > button {
grid-column: 2;
}
#stats > .stat_points {
grid-area: stat_points;
justify-self: end;
}
#stats > .reserve {
grid-area: reserve;
justify-self: end;
}
#stats > .reserve {
box-sizing: border-box;
}
#stats .equipment {
grid-template-areas: "header";
gap: var(--half-gap);
grid-column: 1/-1;
place-self: stretch;
}
#stats .equipment h2 {
grid-area: header;
}
#stats .equipment .repeat-columns,
#stats .equipment .repitem {
grid-template-columns: 1fr 2.5rem;
}
#secondary > .secondaries {
grid-template-columns: 1fr repeat(3, auto);
grid-template-areas: "header header header header";
}
#secondary > .combat-gear {
grid-template-areas: "header";
}
#skill {
grid-area: skills;
}
#skill .repcontainer {
gap: 0;
}
#skill .repitem {
position: relative;
}
#skill .repitem span {
align-self: center;
text-align: left;
}
#skill .repeat-columns,
#skill .repitem {
grid-template-columns: 1rem 1fr 3rem 4rem 2.5rem;
}
#skill .repeat-columns > input,
#skill .repitem > input {
width: 100%;
}
#skill .repeat-columns :nth-child(1) {
grid-column: 2;
}
#skill .repeat-columns :nth-child(2) {
grid-column: 3;
}
#skill .repeat-columns :nth-child(3) {
grid-column: 4;
}
#skill .repeat-columns :nth-child(4) {
grid-column: 5;
}
#skill .raw-control:not(:checked) + .raw,
#skill .raw-control:checked ~ .custom {
display: none;
}
#skill .roller.raw {
grid-column: span 2;
}
@media (min-width: 680px) {
#weapon, #remnant-weapons {
grid-column: span 2;
}
}
@media (min-width: 1300px) {
#main {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--big-gap);
}
#main .system-header {
grid-column: 1/-1;
}
#main .sheet-state:not([value=settings]) ~ article:not(#settings) {
display: grid;
align-self: start;
}
#main .sheet-state:not([value=settings]) ~ #main-nav .nav__button--tab {
--tabBorder:drop-shadow(1px 0 0 black) drop-shadow(-1px 0 0 black) drop-shadow(0 -1px 0 black);
top: 1px;
color: black;
pointer-events: none;
}
#settings {
grid-column: 1/-1;
}
#main-nav {
grid-column: 1/-1;
}
}
#weapon input[type=text] {
width: 100%;
}
#weapon .repitem {
row-gap: var(--half-gap);
}
#weapon .repitem > .underlined {
width: 100%;
}
#weapon span.underlined {
display: block;
text-align: center;
padding: 2px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
border-width: 1px 3px;
border-style: solid;
border-color: transparent transparent black transparent;
}
#weapon .repeat-columns,
#weapon .repitem {
grid-template-columns: 1rem 1fr 10rem 7rem;
align-items: end;
}
#weapon .repeat-columns :nth-child(1) {
grid-column: 2;
}
#weapon .repeat-columns :nth-child(2) {
grid-column: 3;
}
#weapon .repeat-columns :nth-child(3) {
grid-column: 4;
}
#weapon .headed-textarea {
grid-column: 1/-1;
}
#adjustments {
display: contents;
}
#adjustments .repitem {
gap: var(--half-gap);
}
#adjustments input[type=text] {
width: 100%;
}
#remnant.system-remnant {
grid-template-areas: "image" "image";
border-right: 1px solid black;
grid-template-rows: auto 1fr;
}
#remnant-pic {
grid-area: image;
}
#remnant-pic > .input-label {
justify-self: start;
}
#remnant-ratings {
grid-template-columns: 1fr repeat(2, auto);
grid-template-areas: "header header header";
}
#remnant-ratings .remnant-skills {
grid-template-areas: "header header header";
place-self: stretch;
grid-column: 1/-1;
gap: 0;
}
#remnant-ratings .remnant-skills * {
place-self: stretch;
}
#remnant-ratings .remnant-skills input {
width: 100%;
}
#remnant-ratings .remnant-skills,
#remnant-ratings .remnant-skills .repeat-columns {
grid-template-columns: 1fr 4rem 3rem;
}
#remnant-ratings .remnant-skills *,
#remnant-ratings .remnant-skills .repeat-columns * {
align-self: center;
}
#remnant-ratings .remnant-skills .repeat-columns {
grid-column: 1/-1;
}
#remnant-ratings .remnant-skills .repeat-columns :not(:first-child) {
text-align: center;
}
#remnant-ratings .remnant-skills .roller {
justify-self: start;
}
#remnant-ratings .remnant-skills input {
justify-self: center;
}
#remnant-stats {
grid-template-columns: 1fr repeat(2, auto) 1fr repeat(2, auto);
grid-template-areas: "header header header header header header" ". . . . . ." ". . . . . ." ". . . . . ." "assault_damage_label assault_damage_label assault_damage_label assault_damage_label assault_damage_label assault_damage_input" "strike_damage_label strike_damage_label strike_damage_label strike_damage_label strike_damage_label strike_damage_input" "strike_range_label strike_range_label strike_range_label strike_range_label strike_range_label strike_range_input";
}
#remnant-stats .strike_damage_label {
grid-area: strike_damage_label;
}
#remnant-stats .strike_damage_input {
grid-area: strike_damage_input;
}
#remnant-stats .strike_range_label {
grid-area: strike_range_label;
}
#remnant-stats .strike_range_input {
grid-area: strike_range_input;
}
#remnant-stats .assault_damage_label {
grid-area: assault_damage_label;
}
#remnant-stats .assault_damage_input {
grid-area: assault_damage_input;
}
#remnant-trait .repeat-columns,
#remnant-trait .repitem {
grid-template-columns: 1fr 4rem 4rem;
}
#remnant-drone .repitem {
grid-template-columns: repeat(2, 1fr);
gap: var(--tiny-gap) var(--half-gap);
}
#remnant-drone .input-label--button {
grid-column: 1;
}
#remnant-drone .strikerange {
grid-column: 2;
}
#remnant-drone .input-label span, #remnant-drone .input-label button {
text-align: left;
}
#remnant-drone .input-label:not(.input-label--dual) :not([name]) {
flex: 1 1 0;
}
#remnant-drone .structure {
display: flex;
gap: var(--half-gap);
grid-column: 1/-1;
place-self: center end;
grid-column: span 2;
}
#remnant-drone .structure * {
align-self: center;
}
#remnant-weapons .repeat-columns,
#remnant-weapons .repitem {
grid-template-columns: 1rem 1fr 5rem 4rem 7rem 8rem 5rem;
}
#remnant-weapons .repeat-columns :nth-child(1) {
grid-column: 2;
}
#remnant-weapons .repeat-columns :nth-child(2) {
grid-column: 3;
}
#remnant-weapons .repeat-columns :nth-child(3) {
grid-column: 4;
}
#remnant-weapons .repeat-columns :nth-child(4) {
grid-column: 5;
}
#remnant-weapons .repeat-columns :nth-child(5) {
grid-column: 6;
}
#remnant-weapons .repeat-columns :nth-child(6) {
grid-column: 7;
}
/*
Roll Template
#rolltemplate
*/
.sheet-rolltemplate-rapidfire {
--templateRadius: 1rem;
--dieSize: 50px;
--templateBorderW: 2px 5px 2px 5px;
--fumbleColor: red;
--critColor: green;
--innerBorderRadius: 5px;
--borderSize:1px;
--sizeFactor: 6;
--cornerSize: calc(1107px / var(--sizeFactor)) calc(952px / var(--sizeFactor));
--headSideMargin:40px;
--headVerticalMargin:10px;
--circleSize:73px;
--hexagonBackgroundImage:url("https://s3.amazonaws.com/files.d20.io/images/258492885/gzYgspdnfa8K2zUgTrgV3g/original.png");
margin-left: -40px;
margin-right: -5px;
}
.sheet-rolltemplate-rapidfire a[href^="!"],
.sheet-rolltemplate-rapidfire a[href^="~"] {
font-family: var(--topHeaderFont);
background-color: transparent;
color: black;
font-weight: 700;
padding: 0;
}
.sheet-rolltemplate-rapidfire h1, .sheet-rolltemplate-rapidfire h2, .sheet-rolltemplate-rapidfire h3, .sheet-rolltemplate-rapidfire h4, .sheet-rolltemplate-rapidfire h5, .sheet-rolltemplate-rapidfire a {
white-space: pre-wrap;
}
.sheet-rolltemplate-rapidfire:not(:first-child) {
margin-top: 10px;
}
.sheet-rolltemplate-rapidfire .sheet-content {
overflow: hidden;
}
.sheet-rolltemplate-rapidfire > .sheet-template {
overflow: hidden;
--hexColor:#000000;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants {
padding: 15px 10px;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants > .sheet-content {
background-color: #c2c2c2;
background-image: var(--hexagonBackgroundImage);
background-position: top left;
background-size: 400px auto;
background-repeat: no-repeat;
padding: 0 10px;
border-radius: 10px;
border: 5px solid black;
grid-template-columns: [roll-start footer-start] var(--headSideMargin) [header-start] 1fr [damage-start] 1fr [roll-end difficulty-start] 1fr [damage-end] 1fr [footer-end] var(--headSideMargin) [difficulty-end header-end];
grid-template-areas: ". header header header header header" ". . . . . ." ". . . . . ." ". . . . . ." ". . . . . ." "description description description description description description" "footer footer footer footer footer .";
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants > .sheet-content.sheet-single-roll .sheet-hexagon {
grid-column: damage-start/damage-end;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants + .sheet-image-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants + .sheet-image-border.sheet-has-header.sheet-has-footer {
background-image: var(--topCorner), var(--bottomCorner);
background-position: top left, bottom right;
background-size: var(--cornerSize), var(--cornerSize);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants + .sheet-image-border.sheet-has-header:not(.sheet-has-footer) {
background-image: var(--topCorner);
background-position: top left;
background-size: var(--cornerSize);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants + .sheet-image-border.sheet-has-footer:not(.sheet-has-header) {
background-image: var(--bottomCorner);
background-position: bottom right;
background-size: var(--cornerSize);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer {
min-height: 30px;
align-items: center;
grid-template-areas: "content";
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header *, .sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer * {
box-sizing: border-box;
grid-area: content;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header {
--headBorder:0 3px 3px 3px;
--headRadius:0 0 10px 10px;
--headItems:center start;
--headSelf:start;
--headMargin:0 0 10px -3px;
--headPadding:5px 10px 10px 15px;
grid-column: 2/7;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header * {
text-align: left;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer {
--headBorder:3px 3px 0 3px;
--headRadius:10px 10px 0 0;
--headItems:center end;
--headSelf:end;
--headMargin:9px -3px 0 0;
--headPadding:15px 15px 5px 5px;
grid-column: 1/6;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer * {
text-align: right;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-background {
grid-template-areas: "content";
background-color: #aac1dd80;
border-color: black;
border-style: solid;
border-color: black;
border-width: var(--headBorder);
border-radius: var(--headRadius);
place-items: var(--headPlace);
margin: var(--headMargin);
place-self: var(--headSelf);
padding: var(--headPadding);
box-sizing: border-box;
backdrop-filter: blur(2px);
min-width: 120px;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-background * {
opacity: 0;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header__content {
place-self: var(--headSelf);
grid-template-areas: "content";
padding: var(--headPadding);
place-items: var(--headItems);
margin: var(--headMargin);
border-radius: var(--headRadius);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-header__image {
width: 100%;
height: 100%;
background-image: var(--headerBottom);
background-position: bottom left;
background-size: calc(699px / var(--sizeFactor)) calc(130px / var(--sizeFactor));
background-repeat: no-repeat;
z-index: 1;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer__content {
place-self: var(--headSelf);
grid-template-areas: "content";
place-items: var(--headItems);
padding: var(--headPadding);
margin: var(--headMargin);
border-radius: var(--headRadius);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-footer__image {
width: 100%;
height: 100%;
background-image: var(--footerTop);
background-position: top right;
background-size: calc(699px / var(--sizeFactor)) calc(130px / var(--sizeFactor));
background-repeat: no-repeat;
z-index: 1;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-fumble-toggle + .sheet-hexagon__hex-wrapper {
--hexColor:#db1a1a;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-crit-toggle + .sheet-hexagon__hex-wrapper {
--hexColor:#02a98d;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon {
--shadow:black;
width: var(--circleSize);
aspect-ratio: 1/1.1547005;
transform: rotate(150deg);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon h4 * {
font-family: var(--midHeaderFont);
font-weight: normal;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border {
background: radial-gradient(at 150%, #585858, var(--hexColor));
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border:after {
transform: rotate(-120deg);
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-hexagon__hex-wrapper__hex-border__hex-content {
transform: rotate(-30deg);
grid-template-columns: auto;
grid-template-rows: auto auto;
gap: var(--half-gap);
place-items: center;
place-content: center;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-roll,
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-difficulty {
align-self: start;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-container-background {
background-color: white;
margin-right: -10px;
margin-left: -10px;
margin-bottom: -17px;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-container-background,
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-container-background + div {
margin-top: 15px;
padding-block: 5px;
}
.sheet-rolltemplate-rapidfire > .sheet-template.sheet-system-remnants .sheet-description.sheet-text h4 {
text-align: left;
margin-top: var(--grid-gap);
font-weight: 700;
}
.sheet-rolltemplate-rapidfire > .sheet-template span:not(.inlinerollresult) {
font-size: 13px;
}
.sheet-rolltemplate-rapidfire .sheet-roll:nth-child(even),
.sheet-rolltemplate-rapidfire .sheet-difficulty:nth-child(even) {
grid-column: roll-start/roll-end;
}
.sheet-rolltemplate-rapidfire .sheet-roll:nth-child(odd),
.sheet-rolltemplate-rapidfire .sheet-difficulty:nth-child(odd) {
grid-column: difficulty-start/difficulty-end;
}
.sheet-rolltemplate-rapidfire .sheet-damage:nth-child(even) {
grid-column: damage-start/damage-end;
}
.sheet-rolltemplate-rapidfire .sheet-damage:nth-child(odd) {
grid-column: difficulty-start/difficulty-end;
}
.sheet-rolltemplate-rapidfire .sheet-header {
grid-area: header;
}
.sheet-rolltemplate-rapidfire .sheet-description {
grid-area: description;
}
.sheet-rolltemplate-rapidfire .sheet-footer {
grid-area: footer;
}
.sheet-rolltemplate-rapidfire :not(div),
.sheet-rolltemplate-rapidfire .sheet-hexagon,
.sheet-rolltemplate-rapidfire .sheet-hexagon div,
.sheet-rolltemplate-rapidfire .sheet-text,
.sheet-rolltemplate-rapidfire .sheet-description:not(.sheet-container-background) {
position: relative;
z-index: 10;
}
.sheet-rolltemplate-rapidfire .inlinerollresult {
font-size: 1.5rem;
}
.sheet-rolltemplate-rapidfire .inlinerollresult[title*="[computed value]"], .sheet-rolltemplate-rapidfire .inlinerollresult[original-title*="[computed value]"] {
pointer-events: none;
}
.sheet-rolltemplate-rapidfire .inlinerollresult, .sheet-rolltemplate-rapidfire .inlinerollresult.fullcrit, .sheet-rolltemplate-rapidfire .inlinerollresult.fullfail, .sheet-rolltemplate-rapidfire .inlinerollresult.importantroll {
border: none;
background-color: transparent;
}
.sheet-rolltemplate-rapidfire .sheet-hexagon, .sheet-rolltemplate-rapidfire .sheet-circle {
place-self: center;
}
.sheet-rolltemplate-rapidfire .sheet-hexagon.sheet-damage, .sheet-rolltemplate-rapidfire .sheet-circle.sheet-damage {
justify-self: center;
}
.sheet-rolltemplate-rapidfire .sheet-hexagon :not(div), .sheet-rolltemplate-rapidfire .sheet-circle :not(div) {
color: white;
}