@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; }