mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
3840 lines
149 KiB
CSS
3840 lines
149 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Alegreya:400|Alegreya:700|Galdeano|Material+Symbols+Outlined&display=swap");
|
|
@import url("https://fonts.googleapis.com/css?family=Material+Icons&display=swap");
|
|
.tabs__container:not(.k-active-tab) {
|
|
display: none !important;
|
|
}
|
|
|
|
.tabs__nav-item {
|
|
list-style: none;
|
|
}
|
|
|
|
.tabs__nav-list {
|
|
display: flex;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet {
|
|
position: relative;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__button {
|
|
all: initial;
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__checkbox {
|
|
display: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__outer {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
text-align: left;
|
|
background: var(--kmodal-overlay-background);
|
|
transition: opacity 0.25s ease;
|
|
z-index: 999;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__background {
|
|
all: initial;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
cursor: pointer;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__inner {
|
|
position: fixed;
|
|
width: var(--kmodal-width);
|
|
height: var(--kmodal-height);
|
|
inset: 0;
|
|
margin: auto;
|
|
overflow: auto;
|
|
background: var(--kmodal-dialog-background);
|
|
border-radius: 5px;
|
|
padding: var(--kmodal-close-height) calc(var(--kmodal-close-width) * 3) var(--kmodal-close-height) calc(var(--kmodal-close-width) * 2);
|
|
max-width: var(--kmodal-max-width);
|
|
max-height: var(--kmodal-max-height);
|
|
transition: opacity 0.25s ease;
|
|
box-shadow: var(--kmodal-box-shadow);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__close {
|
|
position: absolute;
|
|
right: var(--kmodal-close-width);
|
|
top: var(--kmodal-close-height);
|
|
width: var(--kmodal-close-width);
|
|
height: var(--kmodal-close-height);
|
|
cursor: pointer;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__close:after,
|
|
.ui-dialog .tab-content .charsheet .kmodal__close:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: var(--kmodal-close-line-thickness);
|
|
height: var(--kmodal-close-line-length);
|
|
background: var(--kmodal-close-color);
|
|
display: block;
|
|
transform: rotate(45deg);
|
|
left: 50%;
|
|
margin: -3px 0 0 -1px;
|
|
top: 0;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__close:hover:after,
|
|
.ui-dialog .tab-content .charsheet .kmodal__close:hover:before {
|
|
background: var(--kmodal-close-hover-color);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__close:before {
|
|
transform: rotate(-45deg);
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__checkbox:not(:checked) + .kmodal__outer {
|
|
display: none;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__checkbox:checked + .kmodal__outer {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .kmodal__checkbox:checked + .kmodal__outer .kmodal__inner {
|
|
top: 0;
|
|
}
|
|
|
|
body .ui-dialog .tab-content .charsheet .border--parchment {
|
|
border: 1px solid black;
|
|
border-image: var(--img-field-parchment);
|
|
border-image-slice: 100 fill;
|
|
border-image-width: 40px;
|
|
border-image-outset: 3px;
|
|
border-image-repeat: round;
|
|
background: none !important;
|
|
}
|
|
@container (max-height: 100px) {
|
|
body .ui-dialog .tab-content .charsheet .border--parchment {
|
|
border-image-repeat: repeat;
|
|
border-image-width: 40 5;
|
|
}
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .border--marble-green, body .ui-dialog .tab-content .charsheet .border-marble-red {
|
|
border: 1px solid black;
|
|
border-image: var(--img-field-marble-green);
|
|
border-image-slice: 100 fill;
|
|
border-image-width: 40px;
|
|
border-image-repeat: round;
|
|
}
|
|
@container (max-height: 100px) {
|
|
body .ui-dialog .tab-content .charsheet .border--marble-green, body .ui-dialog .tab-content .charsheet .border-marble-red {
|
|
border-image-repeat: repeat;
|
|
}
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .border--marble-red {
|
|
border-image: var(--img-field-marble-red);
|
|
}
|
|
|
|
body .ui-dialog .tab-content .charsheet label.--parchment, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment, [class*=rolltemplate] label.--parchment, [class*=rolltemplate] .adaptive--input.--parchment {
|
|
--cap: var(--img-cap-parchment1);
|
|
flex: 1;
|
|
isolation: isolate;
|
|
display: grid;
|
|
grid-template-areas: "content";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment > *, body .ui-dialog .tab-content .charsheet label.--parchment:before, body .ui-dialog .tab-content .charsheet label.--parchment:after, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment > *, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment:before, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment:after, [class*=rolltemplate] label.--parchment > *, [class*=rolltemplate] label.--parchment:before, [class*=rolltemplate] label.--parchment:after, [class*=rolltemplate] .adaptive--input.--parchment > *, [class*=rolltemplate] .adaptive--input.--parchment:before, [class*=rolltemplate] .adaptive--input.--parchment:after {
|
|
grid-area: content;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment input, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment input, [class*=rolltemplate] label.--parchment input, [class*=rolltemplate] .adaptive--input.--parchment input {
|
|
font-family: var(--font1);
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
color: var(--lm-fontColor);
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment:nth-of-type(1), body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment:nth-of-type(1), [class*=rolltemplate] label.--parchment:nth-of-type(1), [class*=rolltemplate] .adaptive--input.--parchment:nth-of-type(1) {
|
|
--cap: var(--img-cap-parchment1);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment:nth-of-type(2), body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment:nth-of-type(2), [class*=rolltemplate] label.--parchment:nth-of-type(2), [class*=rolltemplate] .adaptive--input.--parchment:nth-of-type(2) {
|
|
--cap: var(--img-cap-parchment2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment:nth-of-type(3), body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment:nth-of-type(3), [class*=rolltemplate] label.--parchment:nth-of-type(3), [class*=rolltemplate] .adaptive--input.--parchment:nth-of-type(3) {
|
|
--cap: var(--img-cap-parchment3);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment::before, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment::before, [class*=rolltemplate] label.--parchment::before, [class*=rolltemplate] .adaptive--input.--parchment::before {
|
|
content: "";
|
|
inset: 0;
|
|
background: var(--img-input-parchment);
|
|
background-size: 10em 100%;
|
|
z-index: -2;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment.--cap, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment.--cap, [class*=rolltemplate] label.--parchment.--cap, [class*=rolltemplate] .adaptive--input.--parchment.--cap {
|
|
margin-right: 1em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label.--parchment.--cap::after, body .ui-dialog .tab-content .charsheet .adaptive--input.--parchment.--cap::after, [class*=rolltemplate] label.--parchment.--cap::after, [class*=rolltemplate] .adaptive--input.--parchment.--cap::after {
|
|
content: "";
|
|
position: relative;
|
|
right: -2em;
|
|
top: -0.7em;
|
|
height: 130%;
|
|
width: 3em;
|
|
background: var(--cap);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: left;
|
|
z-index: -1;
|
|
justify-self: end;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment, [class*=rolltemplate] :not(label).--parchment {
|
|
position: relative;
|
|
padding: 1em;
|
|
padding-top: 1.5em;
|
|
border: 1px solid black;
|
|
border-image: var(--img-field-parchment);
|
|
border-image-slice: 100 fill;
|
|
border-image-width: 50px;
|
|
border-image-outset: 0px;
|
|
border-image-repeat: repeat;
|
|
color: var(--lm-fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment:not:has(.--parchment__trim.--top), [class*=rolltemplate] :not(label).--parchment:not:has(.--parchment__trim.--top) {
|
|
padding-top: 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment textarea, [class*=rolltemplate] :not(label).--parchment textarea {
|
|
border: none;
|
|
padding: none;
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment h3, [class*=rolltemplate] :not(label).--parchment h3 {
|
|
position: absolute;
|
|
top: 1em;
|
|
left: 50%;
|
|
translate: -50%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment__trim, [class*=rolltemplate] :not(label).--parchment__trim {
|
|
position: absolute;
|
|
content: "";
|
|
height: 0.75em;
|
|
width: 102%;
|
|
left: -1%;
|
|
border-image: var(--img-edge-deco-line);
|
|
border-image-slice: 10 50 fill;
|
|
border-image-width: 2px 30px;
|
|
border-image-outset: 0px;
|
|
border-image-repeat: round;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment__trim.--top, [class*=rolltemplate] :not(label).--parchment__trim.--top {
|
|
top: 0em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment__trim.--bottom, [class*=rolltemplate] :not(label).--parchment__trim.--bottom {
|
|
--background: var(--img-edgedeco-center-sm);
|
|
bottom: -0.25em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment__trim.--bottom::before, [class*=rolltemplate] :not(label).--parchment__trim.--bottom::before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 2em;
|
|
width: 2em;
|
|
left: 50%;
|
|
top: 0;
|
|
translate: -50%;
|
|
background: var(--background);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment__trim.--bottom.--lg, [class*=rolltemplate] :not(label).--parchment__trim.--bottom.--lg {
|
|
--background: var(--img-edgedeco-center-lg);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :not(label).--parchment__trim.--bottom.--lg::before, [class*=rolltemplate] :not(label).--parchment__trim.--bottom.--lg::before {
|
|
height: 3em;
|
|
width: 15em;
|
|
top: -1.2em;
|
|
}
|
|
|
|
.sheet-rolltemplate-dragonbane {
|
|
--font1:var(--topHeadFont);
|
|
--font2:var(--topHeadFont);
|
|
--font3:var(--midHeadFont);
|
|
--font4:var(--midHeadFont);
|
|
--font5:var(--midHeadFont);
|
|
--font6:var(--contentHeadFont);
|
|
--font7:var(--contentHeadFont);
|
|
--baseFontSize: 16px;
|
|
--size1:300%;
|
|
--size2:250%;
|
|
--size3:200%;
|
|
--size4:150%;
|
|
--size5:125%;
|
|
--size6:100%;
|
|
--size7:87.5%;
|
|
--icon-size:24px;
|
|
--font-icon: "Material Icons";
|
|
--normal-gap-x:1rem;
|
|
--normal-gap-y:1rem;
|
|
--normal-gap: var(--normal-gap-x);
|
|
--half-gap-x:calc(var(--normal-gap-x) / 2);
|
|
--half-gap-y:calc(var(--normal-gap-y) / 2);
|
|
--half-gap: var(--half-gap-x);
|
|
--tiny-gap-x:calc(var(--half-gap-x) / 2);
|
|
--tiny-gap-y:calc(var(--half-gap-y) / 2);
|
|
--tiny-gap: var(--tiny-gap-x);
|
|
--big-gap-x:calc(var(--normal-gap-x) * 2);
|
|
--big-gap-y:calc(var(--normal-gap-y) * 2);
|
|
--big-gap: var(--big-gap-x);
|
|
--lm-backColor:#fff;
|
|
--dm-backColor:var(--dark-surface1);
|
|
--backColor:var(--lm-backColor);
|
|
--lm-selectedColor:#000;
|
|
--dm-selectedColor:#007476;
|
|
--selectedColor:var(--lm-selectedColor);
|
|
--lm-unselectedColor1:lightgrey;
|
|
--dm-unselectedColor1:#0e0e0e;
|
|
--unselectedColor1:var(--lm-unselectedColor1);
|
|
--lm-unselectedColor2:transparent;
|
|
--dm-unselectedColor2:transparent;
|
|
--unselectedColor1:var(--lm-unselectedColor2);
|
|
--lm-checkColor:#000;
|
|
--dm-checkColor:#ff0000;
|
|
--checkColor:var(--lm-checkColor);
|
|
--lm-checkedBackColor:transparent;
|
|
--dm-checkedBackColor:transparent;
|
|
--checkedBackColor:var(--lm-checkedBackColor);
|
|
--lm-borderColor:#000;
|
|
--dm-borderColor:lightgrey;
|
|
--borderColor:var(--lm-borderColor);
|
|
--lm-fontColor:#0f0f0f;
|
|
--dm-fontColor:var(--dark-primarytext);
|
|
--fontColor:var(--lm-fontColor);
|
|
--lm-disabledColor:var(--lm-unselectedColor1);
|
|
--dm-disabledColor:var(--dm-unselectedColor1);
|
|
--disabledColor:var(--lm-disabledColor);
|
|
--checkContent: "✓";
|
|
--checkWeight: bold;
|
|
--checkSize: 150%;
|
|
--checkLineHeight: calc(var(--checkSize) / 3);
|
|
--checkboxBorderWidth: var(--borderWidth);
|
|
--checkboxBorderStyle: var(--borderStyle);
|
|
--lm-checkboxBorderColor: var(--lm-borderColor);
|
|
--dm-checkboxBorderColor: var(--dm-borderColor);
|
|
--checkboxBorderColor: var(--lm-checkBorderColor);
|
|
--checkboxWidth: 14px;
|
|
--checkboxHeight: 14px;
|
|
--inputTopPadding: 2px;
|
|
--inputRightPadding: 2px;
|
|
--inputBottomPadding: 2px;
|
|
--inputLeftPadding: 2px;
|
|
--inputPadding:
|
|
var(--inputTopPadding)
|
|
var(--inputRightPadding)
|
|
var(--inputBottomPadding)
|
|
var(--inputLeftPadding);
|
|
--lm-placeholderColor:#ededed80;
|
|
--dm-placeholderColor:#3f3f3f80;
|
|
--placeholderColor: var(--lm-placeholderColor);
|
|
--textareaResize: vertical;
|
|
--borderWidth:1px;
|
|
--borderStyle:solid;
|
|
--expandedSymbol:"unfold_less";
|
|
--collapsedSymbol: "unfold_more";
|
|
--collapseHoverOpacity: 1;
|
|
--collapseBaseOpacity: 0;
|
|
--lm-collapseExpandedColor:var(--lm-selectedColor);
|
|
--dm-collapseExpandedColor:var(--dm-selectedColor);
|
|
--collapseExpandedColor: var(--lm-collapseExpandedColor);
|
|
--lm-collapseCollapsedColor:var(--lm-unselectedColor);
|
|
--dm-collapseCollapsedColor:var(--dm-unselectedColor);
|
|
--collapseCollapsedColor: var(--lm-collapseCollapsedColor);
|
|
--fillLeftDisplay: flex;
|
|
--fillLeftAlignment: center;
|
|
--fillLeftDataTransform: uppercase;
|
|
--fillLeftDataSize: var(--size6);
|
|
--lm-fillLeftSelectedColor: var(--lm-selectedColor);
|
|
--dm-fillLeftSelectedColor: var(--dm-selectedColor);
|
|
--fillLeftSelectedColor: var(--lm-fillLeftSelectedColor);
|
|
--lm-fillLeftUnselectedColor: var(--lm-unselectedColor);
|
|
--dm-fillLeftUnselectedColor: var(--dm-unselectedColor);
|
|
--fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor);
|
|
--lm-fillLeftDataColor: var(--lm-backColor);
|
|
--dm-fillLeftDataColor: var(--dm-backColor);
|
|
--fillLeftDataColor: var(--lm-fillLeftDataColor);
|
|
--lm-selectColor: var(--lm-fontColor);
|
|
--dm-selectColor: var(--dm-fontColor);
|
|
--selectColor: var(--lm-fontColor);
|
|
--selectTextOverflow: var(--textOverflow);
|
|
--selectTextAlign: center;
|
|
--selectTextTransform: capitalize;
|
|
--revealTime:500ms;
|
|
--revealFunction: ease-in-out;
|
|
--revealTrans: var(--revealTime) var(--revealFunction);
|
|
--kmodal-width:fit-content;
|
|
--kmodal-height:fit-content;
|
|
--kmodal-max-width:90vw;
|
|
--kmodal-max-height:90vh;
|
|
--lm-kmodal-overlay-background:rgba(0,0,0,.9);
|
|
--dm-kmodal-overlay-background:rgba(0,0,0,.9);
|
|
--kmodal-overlay-background: var(--lm-kmodal-overlay-background);
|
|
--lm-kmodal-dialog-background:var(--lm-backColor);
|
|
--dm-kmodal-dialog-background:var(--dm-backColor);
|
|
--kmodal-dialog-background: var(--lm-kmodal-dialog-background);
|
|
--kmodal-border-width:0px;
|
|
--kmodal-border-color:transparent;
|
|
--lm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25);
|
|
--dm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25);
|
|
--kmodal-box-shadow-color1:var(--lm-kmodal-box-shadow-color1);
|
|
--kmodal-box-shadow-blur1:28px;
|
|
--kmodal-box-shadow-x1:0px;
|
|
--kmodal-box-shadow-y1:14px;
|
|
--kmodal-box-shadow-spread1:0px;
|
|
--lm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22);
|
|
--dm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22);
|
|
--kmodal-box-shadow-color2:var(--lm-kmodal-box-shadow-color2);
|
|
--kmodal-box-shadow-blur2:10px;
|
|
--kmodal-box-shadow-x2:0px;
|
|
--kmodal-box-shadow-y2:10px;
|
|
--kmodal-box-shadow-spread2:0px;
|
|
--kmodal-box-shadow:
|
|
var(--kmodal-box-shadow-x1) var(--kmodal-box-shadow-y1) var(--kmodal-box-shadow-blur1) var(--kmodal-box-shadow-spread1) var(--kmodal-box-shadow-color1),
|
|
var(--kmodal-box-shadow-x2) var(--kmodal-box-shadow-y2) var(--kmodal-box-shadow-blur2) var(--kmodal-box-shadow-spread2) var(--kmodal-box-shadow-color2);
|
|
--kmodal-close-width:1rem;
|
|
--kmodal-close-height:1rem;
|
|
--lm-kmodal-close-color:#ccc;
|
|
--dm-kmodal-close-color:#aaa;
|
|
--kmodal-close-color:var(--lm-kmodal-close-color);
|
|
--lm-kmodal-close-hover-color:#aaa;
|
|
--dm-kmodal-close-hover-color:#aaa;
|
|
--kmodal-close-hover-color:var(--lm-kmodal-close-hover-color);
|
|
--kmodal-close-line-thickness:2px;
|
|
--kmodal-close-line-length:calc(var(--kmodal-close-width) * 1.5);
|
|
--input-label-gap: var(--half-gap);
|
|
--contentHeadFont: Galdeano, sans-serif;
|
|
--midHeadFont: Alegreya, serif;
|
|
--topHeadFont: Alegreya, serif;
|
|
--lm-selectedTextColor: beige;
|
|
--dm-selectedTextColor: black;
|
|
--selectedTextColor: var(--lm-selectedTextColor);
|
|
--lm-fontColor:black;
|
|
--dm-fontColor: beige;
|
|
--selectedColor: #e73431;
|
|
--lm-elementColor: hsl(167, 76%, 16%);
|
|
--dm-elementColor: hsl(167, 76%, 16%);
|
|
--elementColor: var(--lm-elementColor);
|
|
--accentColor: #91643e;
|
|
--lightAccentColor: #ae9077;
|
|
--inputHighlight: hsla(78, 87%, 18%, 0.2);
|
|
--checkedColor: var(--selectedColor);
|
|
--checkColor: var(--selectedColor);
|
|
--fontColor:var(--lm-fontColor);
|
|
--input-label-text-transform: capitalize;
|
|
--lm-attributeGradientOuter: #f7eedf;
|
|
--dm-attributeGradientOuter: #2a1d24;
|
|
--attributeGradientOuter: var(--lm-attributeGradientOuter);
|
|
--selectTextAlign: left;
|
|
color: var(--fontColor);
|
|
font-family: var(--contentHeadFont);
|
|
font-size: var(--baseFontSize);
|
|
--font-icon-outlined: "Material Icons Outlined";
|
|
--lm-img-background-trunk:url(https://files.d20.io/images/340967489/C9RG1IgH0wtT-WzHnUp0IQ/original.webp?168357376655);
|
|
--dm-img-background-trunk: url(https://s3.amazonaws.com/files.d20.io/images/344388910/6GCWP4m5AFdMGwnaA2CNrg/original.jpg);
|
|
--img-background-trunk: var(--lm-img-background-trunk);
|
|
--img-underline: url(https://s3.amazonaws.com/files.d20.io/images/341105722/SObhoH7fKZsP1EruFOtgxg/original.webp?168366659555);
|
|
--img-underline2: url(https://s3.amazonaws.com/files.d20.io/images/341266910/MR-M3Vu6F02csBtlyJmhlA/original.webp?168376894455);
|
|
--img-underline3: url(https://s3.amazonaws.com/files.d20.io/images/341267108/hUSdD0xogLL-CNqT-9YfSw/original.webp?168376904155);
|
|
--img-underline-dm: url(https://s3.amazonaws.com/files.d20.io/images/344463581/RfDMPLZroxX-m45XzAIEUA/original.jpg);
|
|
--img-underline2-dm: url(https://s3.amazonaws.com/files.d20.io/images/344464387/wfPEiwB0Sx-L8u7_vvu2Xw/original.jpg);
|
|
--img-underline3-dm: url(https://s3.amazonaws.com/files.d20.io/images/344464414/4Bai-VthBzpKkXsLwmWhQQ/original.jpg);
|
|
--img-full-cap-1: url(https://s3.amazonaws.com/files.d20.io/images/337877070/pvNpZQTaXC-LkJZLav1fVw/original.png?16817739755);
|
|
--img-full-cap-2: url(https://s3.amazonaws.com/files.d20.io/images/337877066/iZrp6qCQVq4H0VU8CAIWZw/original.webp?16817739755);
|
|
--img-full-cap-3: url(https://s3.amazonaws.com/files.d20.io/images/337877071/OuGYvLvL1DBRaQ6QE2_kfg/original.webp?16817739755);
|
|
--img-full-cap-4: url(https://s3.amazonaws.com/files.d20.io/images/337877068/8piMIUycneNLyU4akGV1LQ/original.webp?16817739755);
|
|
--img-small-cap-1: url(https://s3.amazonaws.com/files.d20.io/images/337877069/Kp0vR4b6fzWOO3jMKP8d1w/original.webp?16817739755);
|
|
--img-small-cap-2: url(https://s3.amazonaws.com/files.d20.io/images/337877067/M6eBqL2OkQy9QJf8vm0tRg/original.webp?16817739765);
|
|
--img-min-cap-1: url(https://s3.amazonaws.com/files.d20.io/images/337875826/MckUvffsdHzKUmClrGtWOQ/original.webp?16817735245);
|
|
--img-plate-general: url(https://s3.amazonaws.com/files.d20.io/images/337875663/2n79dXi1zDm6jSv3TFr6Uw/original.png?168177345655);
|
|
--img-plate-parchment: url(https://s3.amazonaws.com/files.d20.io/images/337875612/-QBUwqQ6GH-DwHtMagMf1A/original.png?168177343055);
|
|
--img-field-parchment: url(https://s3.amazonaws.com/files.d20.io/images/338032646/3wxXcs3DEZPjzXjMsLlIWg/original.webp?168187041355);
|
|
--img-field-marble-green-vert-repeat: url(https://files.d20.io/images/350678464/bK2_Dh8xA0GkYVW0Ffjb0Q/original.png);
|
|
--img-field-marble-green: url(https://s3.amazonaws.com/files.d20.io/images/337875412/nuFu607BG0jjT0DCZF3hDw/original.webp?168177334155);
|
|
--img-field-marble-red: url(https://s3.amazonaws.com/files.d20.io/images/337875413/QQKnJODjd6gVq7bt2iBJHg/original.webp?168177334155);
|
|
--img-input-parchment: url(https://s3.amazonaws.com/files.d20.io/images/337875295/49gtGknCZnt-7umsqcnBdA/original.webp?168177328955);
|
|
--img-cap-parchment1: url(https://s3.amazonaws.com/files.d20.io/images/337874777/ifWdvn67qTPug9C3igg-8g/original.webp?16817732325);
|
|
--img-cap-parchment2: url(https://s3.amazonaws.com/files.d20.io/images/337874786/sCXrEPgxwuWAa3ZCBsXvjQ/original.webp?16817732325);
|
|
--img-cap-parchment3: url(https://s3.amazonaws.com/files.d20.io/images/337874821/_Oo2CWDa3UPwYLn3VigoQQ/original.webp?16817732335);
|
|
--img-marble-rod-border: url(https://s3.amazonaws.com/files.d20.io/images/343376680/dOBeDttyeYlW1FL5NTBQhg/original.jpg);
|
|
--img-attrdeco-left: url(https://s3.amazonaws.com/files.d20.io/images/337873674/5Qvxo8xhl7Rbqp6KxZS1vg/original.webp?168177288755);
|
|
--img-attrdeco-right: url(https://s3.amazonaws.com/files.d20.io/images/337874217/eVx0T9hZciyDYar_5UUS4g/original.webp?168177312955);
|
|
--img-attrdeco-center: url(https://s3.amazonaws.com/files.d20.io/images/337874219/J4-RtaBOnBW1gLB8Cni08g/original.webp?168177312955);
|
|
--img-attrdeco-border: url(https://s3.amazonaws.com/files.d20.io/images/337874216/ja3d2TOTiCoNhosVkSQKWw/original.webp?168177312955);
|
|
--img-attrdeco-border2: url(https://s3.amazonaws.com/files.d20.io/images/337874215/-auYrjs-MFKu7EiiiFRh5Q/original.webp?168177312955);
|
|
--img-attrdeco-background: url(https://s3.amazonaws.com/files.d20.io/images/337874218/A-J6-z9-Kmn2osvjzHNNlA/original.webp?168177313055);
|
|
--img-edgedeco-left: url(https://s3.amazonaws.com/files.d20.io/images/338034574/K-lsu5ZtSRl0Jvj1Oa3uqA/original.webp?168187141855);
|
|
--img-edgedeco-right: url(https://s3.amazonaws.com/files.d20.io/images/338034573/VLRMrtGjq09bXlfCvHy0Vw/original.webp?168187141855);
|
|
--img-edgedeco-center-lg: url(https://s3.amazonaws.com/files.d20.io/images/338034577/Cy2LOHQBTaONvhqIyvH2zg/original.webp?168187141955);
|
|
--img-edgedeco-center-sm: url(https://s3.amazonaws.com/files.d20.io/images/338034576/7f94Bbgpd9nP0SB060ousg/original.webp?16818714185);
|
|
--img-edge-deco-line: url(https://s3.amazonaws.com/files.d20.io/images/338034575/cr2dJkVN21XZ0ejSZKI0rA/original.webp?168187141955);
|
|
--img-round-button: url(https://s3.amazonaws.com/files.d20.io/images/338274645/WfqLrQ8npbosG7xyEYWmjg/original.webp?16820368465);
|
|
--img-round-button-red: url(https://s3.amazonaws.com/files.d20.io/images/344245100/eeLXueBGIaoEkbR2cmNhaw/original.jpg);
|
|
--img-plate-willpower: url(https://s3.amazonaws.com/files.d20.io/images/344091016/djkLb01pS0RuEvhxv9n9ag/original.jpg);
|
|
--img-plate-hp: url(https://s3.amazonaws.com/files.d20.io/images/344090978/bsg4gYxg-0bTvBkTq4wlMw/original.jpg);
|
|
--img-point1: url(https://s3.amazonaws.com/files.d20.io/images/344092362/gkUFWH9ztfF6X5kIVSfhZw/original.png);
|
|
--img-point2: url(https://s3.amazonaws.com/files.d20.io/images/344092362/gkUFWH9ztfF6X5kIVSfhZw/original.png);
|
|
--img-point3: url(https://s3.amazonaws.com/files.d20.io/images/344092497/RSEVUYU_CXUYCYUKxzcYVw/original.png);
|
|
--img-point4: url(https://s3.amazonaws.com/files.d20.io/images/344092517/CwUrP5TzRIekkPXFhqhBVg/original.png);
|
|
--img-point5: url(https://s3.amazonaws.com/files.d20.io/images/344092621/zkSFkyF_dq_Itdnf3_KmvA/original.png);
|
|
--img-helm: url(https://s3.amazonaws.com/files.d20.io/images/344484199/ZlWZHSiewtkCVYBDvdzKQg/original.png);
|
|
--img-armor: url(https://s3.amazonaws.com/files.d20.io/images/344484246/AUvTw7I48L6os77jb0qrGA/original.png);
|
|
--_shadow: rgba(0,0,0,0.8);
|
|
--fx-shadow: drop-shadow(0 0 0.2em var(--_shadow));
|
|
padding: 0.5em 0;
|
|
margin-left: -25px;
|
|
margin-right: 5px;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-container {
|
|
position: relative;
|
|
padding: 1em 1em 0.6em 1em;
|
|
margin: 1em 0;
|
|
background: var(--img-field-marble-green-vert-repeat);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
border: 2px solid gold;
|
|
border-image: var(--img-marble-rod-border);
|
|
border-image-slice: 60;
|
|
border-image-width: 40px;
|
|
border-image-outset: 20px;
|
|
border-image-repeat: repeat;
|
|
filter: drop-shadow(0 0 2px black);
|
|
min-height: 50px;
|
|
color: var(--dm-fontColor);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-container a {
|
|
color: inherit;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-container a[href^="!"], .sheet-rolltemplate-dragonbane .sheet-container a[href^="~"] {
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .inlinerollresult.fullcrit {
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .inlinerollresult.fullfail {
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .inlinerollresult.importantroll {
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header {
|
|
--size2: 1.2em;
|
|
--size3: 1em;
|
|
font-size: 12px;
|
|
position: absolute;
|
|
top: -1.75em;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
height: 3em;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto;
|
|
isolation: isolate;
|
|
z-index: 5;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header__cap {
|
|
display: block;
|
|
position: absolute;
|
|
background: var(--img-full-cap-1) no-repeat;
|
|
background-size: cover;
|
|
height: 3em;
|
|
aspect-ratio: 1/1;
|
|
z-index: 5;
|
|
--capOffset: -1em;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header__cap:where(:nth-child(1)) {
|
|
left: var(--capOffset);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header__cap:where(:nth-child(2)) {
|
|
right: var(--capOffset);
|
|
transform: scaleX(-1);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header a {
|
|
font-weight: inherit;
|
|
font-style: inherit;
|
|
font-family: inherit;
|
|
line-height: inherit;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header h2, .sheet-rolltemplate-dragonbane .sheet-marble-header body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-dragonbane .sheet-marble-header .input-label:not(.stacked).large > [name] {
|
|
--capOffset: -5em;
|
|
display: grid;
|
|
place-content: center;
|
|
position: relative;
|
|
color: var(--dm-fontColor);
|
|
font-size: 1.2em;
|
|
font-weight: 700;
|
|
margin: auto;
|
|
text-transform: uppercase;
|
|
font-family: var(--font1);
|
|
display: grid;
|
|
place-content: center;
|
|
padding: 0 1em;
|
|
background: var(--img-plate-general) no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header h2::before, .sheet-rolltemplate-dragonbane .sheet-marble-header body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]::before, body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-dragonbane .sheet-marble-header .input-label:not(.stacked).large > [name]::before, .sheet-rolltemplate-dragonbane .sheet-marble-header h2::after, .sheet-rolltemplate-dragonbane .sheet-marble-header body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]::after, body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-dragonbane .sheet-marble-header .input-label:not(.stacked).large > [name]::after {
|
|
background: var(--img-edgedeco-left) no-repeat;
|
|
background-size: contain;
|
|
position: absolute;
|
|
content: "";
|
|
width: 6.5em;
|
|
height: 100%;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header h2::before, .sheet-rolltemplate-dragonbane .sheet-marble-header body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]::before, body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-dragonbane .sheet-marble-header .input-label:not(.stacked).large > [name]::before {
|
|
left: var(--capOffset);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header h2::after, .sheet-rolltemplate-dragonbane .sheet-marble-header body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]::after, body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-dragonbane .sheet-marble-header .input-label:not(.stacked).large > [name]::after {
|
|
right: var(--capOffset);
|
|
transform: scaleX(-1);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-marble-header.sheet--bottom {
|
|
top: unset;
|
|
bottom: -1.5em;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-label {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-label h2, .sheet-rolltemplate-dragonbane .sheet-label body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-dragonbane .sheet-label .input-label:not(.stacked).large > [name], .sheet-rolltemplate-dragonbane .sheet-label h3 {
|
|
display: grid;
|
|
place-content: center;
|
|
font-family: var(--font1);
|
|
font-weight: 700;
|
|
color: var(--dm-fontColor);
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
text-shadow: 2px 2px 2px black;
|
|
flex: 1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-label h2, .sheet-rolltemplate-dragonbane .sheet-label body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-dragonbane .sheet-label .input-label:not(.stacked).large > [name] {
|
|
font-size: 1.5em;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-label h3 {
|
|
font-size: 1.25em;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result {
|
|
position: relative;
|
|
display: grid;
|
|
place-content: center;
|
|
background: var(--img-round-button) no-repeat;
|
|
background-size: contain;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-shadow: 2px 2px 2px black;
|
|
height: 3em;
|
|
aspect-ratio: 1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result span {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 1.5em;
|
|
height: auto;
|
|
line-height: 1;
|
|
text-align: center;
|
|
border: none;
|
|
text-shadow: 2px 2px 2px black;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result::before, .sheet-rolltemplate-dragonbane .sheet-result::after {
|
|
position: absolute;
|
|
content: "";
|
|
inset: 0;
|
|
z-index: -1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result:nth-of-type(1) {
|
|
right: -0.75em;
|
|
z-index: 1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-second {
|
|
filter: brightness(0);
|
|
transition: 200ms ease;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-second:hover {
|
|
filter: brightness(1);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-check {
|
|
position: absolute;
|
|
background: var(--img-round-button-red);
|
|
background-size: contain;
|
|
bottom: -2em;
|
|
right: 3em;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-check::before {
|
|
background: var(--img-edgedeco-center-sm) no-repeat;
|
|
background-size: contain;
|
|
top: -0.25em;
|
|
width: 2.5em;
|
|
left: 50%;
|
|
translate: -50%;
|
|
z-index: 1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-check::after {
|
|
background: var(--img-edgedeco-center-lg) no-repeat;
|
|
background-size: contain;
|
|
width: 400%;
|
|
translate: -55%;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-push {
|
|
position: absolute;
|
|
background: var(--img-round-button-red);
|
|
background-size: contain;
|
|
bottom: -2em;
|
|
right: 7.3em;
|
|
cursor: pointer;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-push::before {
|
|
background: var(--img-edgedeco-center-sm) no-repeat;
|
|
background-size: contain;
|
|
top: -0.25em;
|
|
width: 2.5em;
|
|
left: 50%;
|
|
translate: -50%;
|
|
z-index: 1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-push:hover {
|
|
filter: brightness(1.5);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-push:hover:before {
|
|
filter: brightness(0.6666666667);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-result.sheet-push a {
|
|
font-family: "Material Icons";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: var(--icon-size); /* Preferred icon size */
|
|
z-index: 10;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-description {
|
|
/* width */
|
|
/* Track */
|
|
/* Handle */
|
|
/* Handle on hover */
|
|
font-size: 0.8em;
|
|
color: var(--lm-fontColor);
|
|
padding: 1em;
|
|
border: 1px solid black;
|
|
border-image: var(--img-field-parchment);
|
|
border-image-slice: 25 fill;
|
|
border-image-width: 20px;
|
|
border-image-outset: 1em;
|
|
border-image-repeat: round;
|
|
max-height: 19.5rem;
|
|
overflow: auto;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-description::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-description::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-description::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-description::-webkit-scrollbar-thumb:hover {
|
|
background: var(--elementColor);
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-description .inlinerollresult {
|
|
background: unset;
|
|
border-radius: 0.25em;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-spell {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-spell > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.5em;
|
|
line-height: normal;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-spell > div > * {
|
|
line-height: 1;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-spell > div dt {
|
|
font-family: var(--font1);
|
|
font-weight: normal;
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-spell > div dt::after {
|
|
content: ":";
|
|
}
|
|
.sheet-rolltemplate-dragonbane .sheet-spell > div dd {
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
|
|
body .ui-dialog .tab-content .charsheet .section--attributes {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
width: min-content;
|
|
margin: 4em auto;
|
|
filter: var(--fx-shadow);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -4em;
|
|
bottom: -1.5em;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--img-attrdeco-center);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -4em;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--img-attrdeco-background);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
z-index: -1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes__deco {
|
|
position: absolute;
|
|
height: 12em;
|
|
top: -2.7em;
|
|
aspect-ratio: 1;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
transition: opacity 500ms ease;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes__deco--left {
|
|
left: -25%;
|
|
background: var(--img-attrdeco-left) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes__deco--right {
|
|
right: -23%;
|
|
background: var(--img-attrdeco-right) no-repeat;
|
|
background-size: contain;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 0 0.7em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -2.25em;
|
|
left: 50%;
|
|
height: 8em;
|
|
aspect-ratio: 1;
|
|
background: var(--img-attrdeco-border);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
translate: -50% 0;
|
|
pointer-events: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute:nth-child(even)::after {
|
|
background: var(--img-attrdeco-border2);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__value {
|
|
background: radial-gradient(ellipse at center, var(--backColor) 20%, var(--attributeGradientOuter) 60%);
|
|
border-radius: 50%;
|
|
width: 2em;
|
|
aspect-ratio: 1;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__button {
|
|
position: absolute;
|
|
top: 0.2em;
|
|
left: 50%;
|
|
padding: 2px 5px;
|
|
border-radius: 5px;
|
|
transform: translateX(-50%);
|
|
transition: all 200ms ease;
|
|
font-size: 0.75em;
|
|
font-weight: bold;
|
|
color: var(--fontColor);
|
|
text-transform: uppercase;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__button::before {
|
|
content: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__button:hover {
|
|
background: var(--elementColor);
|
|
color: var(--dm-fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__condition {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
bottom: -2.5em;
|
|
filter: drop-shadow(0 -1px 1px black) drop-shadow(0 1px 1px black);
|
|
z-index: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__condition__background {
|
|
position: absolute;
|
|
height: 2em;
|
|
aspect-ratio: 1;
|
|
rotate: 45deg;
|
|
z-index: -1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__condition input {
|
|
position: relative;
|
|
bottom: -0.1em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute__condition__label {
|
|
font-family: var(--font3);
|
|
font-weight: 700;
|
|
color: var(--dm-fontColor);
|
|
text-transform: uppercase;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute:nth-child(n+6)::after {
|
|
scale: -1 1;
|
|
}
|
|
@media (max-width: 780px) {
|
|
body .ui-dialog .tab-content .charsheet .section--attributes__deco {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@media (max-width: 560px) {
|
|
body .ui-dialog .tab-content .charsheet .section--attributes {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
margin-top: 1.5em;
|
|
gap: 3em 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -18% 0 -15% -60%;
|
|
background: var(--img-attrdeco-center);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
transform: rotate(-90deg);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute:nth-child(3n+2)::after {
|
|
scale: -1 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes .attribute:nth-child(6n)::after {
|
|
scale: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -18% -60% -15% 0;
|
|
background: var(--img-attrdeco-center);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
body .ui-dialog .tab-content .charsheet .section--attributes_secondaries {
|
|
display: flex;
|
|
gap: 1em;
|
|
filter: var(--fx-shadow);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes_secondaries > .marble-header {
|
|
flex-wrap: wrap;
|
|
font-size: 12px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes_secondaries > .marble-header label {
|
|
position: relative;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--attributes_secondaries > .marble-header:nth-child(-n+2) input[type=hidden]:not([value="0"]) + label span::before {
|
|
position: absolute;
|
|
content: "+D";
|
|
left: -0.75em;
|
|
top: 50%;
|
|
translate: 0 -50%;
|
|
font-family: var(--font1);
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
z-index: 5;
|
|
}
|
|
|
|
body .ui-dialog .tab-content .charsheet .section--skills {
|
|
position: relative;
|
|
margin: 1.5em 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
grid-template-rows: auto auto;
|
|
gap: 0 1em;
|
|
filter: var(--fx-shadow);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills label {
|
|
color: var(--lm-fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills h2.marble-header__title, body .ui-dialog .tab-content .charsheet .section--skills .input-label:not(.stacked).large > .marble-header__title[name] {
|
|
padding: 0 4em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills h2:not(.marble-header), body .ui-dialog .tab-content .charsheet .section--skills .input-label:not(.stacked).large > [name]:not(.marble-header) {
|
|
text-align: left;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__list--base {
|
|
grid-row: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row {
|
|
font-family: var(--font1);
|
|
display: grid;
|
|
grid-template-columns: auto auto 1fr;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row:nth-child(even) {
|
|
background: linear-gradient(to right, transparent, hsla(78, 87%, 18%, 0.2) 10%, transparent);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row input[type=checkbox], body .ui-dialog .tab-content .charsheet .section--skills__row input[type=number] {
|
|
max-height: 1.3em;
|
|
max-width: 1.5em;
|
|
line-height: 1;
|
|
align-self: center;
|
|
color: var(--lm-fontColor);
|
|
font-weight: 700;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row input[type=checkbox][type=checkbox], body .ui-dialog .tab-content .charsheet .section--skills__row input[type=number][type=checkbox] {
|
|
font-size: 12px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row__field--base_chance {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row__field--skill_levels {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row__field--total {
|
|
display: grid;
|
|
position: relative;
|
|
background: hsla(78, 87%, 18%, 0.2);
|
|
border-radius: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold label {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:hover, body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:focus-within {
|
|
display: flex;
|
|
line-height: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:hover .section--skills__row__field--skill_levels, body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:focus-within .section--skills__row__field--skill_levels {
|
|
display: block;
|
|
background: hsla(78, 41%, 79%, 0.5);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:hover .section--skills__row__field--base_chance, body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:focus-within .section--skills__row__field--base_chance {
|
|
display: block;
|
|
white-space: nowrap;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:hover .section--skills__row__field--base_chance::before, body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:focus-within .section--skills__row__field--base_chance::before {
|
|
content: " + (";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:hover .section--skills__row__field--base_chance::after, body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:focus-within .section--skills__row__field--base_chance::after {
|
|
content: ") ";
|
|
margin-right: 0.2em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:hover label, body .ui-dialog .tab-content .charsheet .section--skills__row .inputFold:focus-within label {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row button.section--skills__button::before {
|
|
content: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row label {
|
|
display: flex;
|
|
background: transparent;
|
|
align-items: center;
|
|
font-family: var(--font6);
|
|
text-transform: capitalize;
|
|
font-size: 0.8em;
|
|
flex: 1;
|
|
justify-self: flex-end;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row label span:not(.section--skills__list--secondary__skill_name) {
|
|
text-transform: uppercase;
|
|
margin-left: 0.5em;
|
|
font-size: 0.8em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row label span:not(.section--skills__list--secondary__skill_name)::before {
|
|
content: "(";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row label span:not(.section--skills__list--secondary__skill_name)::after {
|
|
content: ")";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__row label:hover {
|
|
background: var(--elementColor);
|
|
color: var(--dm-fontColor);
|
|
padding: 0 0.5em;
|
|
border-radius: 0.5em;
|
|
transition: all 200ms;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary {
|
|
display: grid;
|
|
height: fit-content;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .expanded {
|
|
display: flex;
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .expanded input, body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .expanded select {
|
|
background: linear-gradient(to right, var(--accentColor), transparent);
|
|
border: none;
|
|
color: white;
|
|
padding-left: 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .expanded input {
|
|
width: 0;
|
|
flex: 1 1 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .expanded select {
|
|
width: auto;
|
|
padding: 0 var(--half-gap);
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: 0.8em;
|
|
background: var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .expanded select option {
|
|
background: var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .section--skills__button:hover {
|
|
background: var(--elementColor);
|
|
color: var(--dm-fontColor);
|
|
padding: 0 0.5em;
|
|
border-radius: 0.5em;
|
|
transition: all 200ms;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary span.section--skills__list--secondary__skill_attribute {
|
|
text-transform: uppercase;
|
|
margin-left: 0.5em;
|
|
font-size: 0.8em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary span.section--skills__list--secondary__skill_attribute::before {
|
|
content: "(";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary span.section--skills__list--secondary__skill_attribute::after {
|
|
content: ")";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input.section--skills__list--secondary__skill_attribute[type=hidden][value=""] {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input.section--skills__list--secondary__skill_attribute[type=hidden][value=strength] + span::after {
|
|
content: "STR)";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input.section--skills__list--secondary__skill_attribute[type=hidden][value=constitution] + span::after {
|
|
content: "CON)";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input.section--skills__list--secondary__skill_attribute[type=hidden][value=agility] + span::after {
|
|
content: "AGI)";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input.section--skills__list--secondary__skill_attribute[type=hidden][value=intelligence] + span::after {
|
|
content: "INT)";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input.section--skills__list--secondary__skill_attribute[type=hidden][value=willpower] + span::after {
|
|
content: "WIL)";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input.section--skills__list--secondary__skill_attribute[type=hidden][value=charisma] + span::after {
|
|
content: "CHA)";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden]) + label, body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden]) + label span {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden])[value=strength] + label span.--str {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden])[value=constitution] + label span.--con {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden])[value=agility] + label span.--agi {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden])[value=intelligence] + label span.--int {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden])[value=willpower] + label span.--wil {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary :where(input.section--skills__row__field--base_chance[type=hidden])[value=charisma] + label span.--cha {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontainer, body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary h2, body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .input-label:not(.stacked).large > [name] {
|
|
gap: 0;
|
|
grid-column: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary input[type=text] {
|
|
padding-left: 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol {
|
|
display: flex;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol_edit {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
color: transparent;
|
|
font-size: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol_edit::before {
|
|
color: var(--dm-fontColor);
|
|
font-family: var(--font-icon-outlined);
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
border-radius: 100%;
|
|
padding: 0.4em;
|
|
background: var(--img-round-button);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
width: 20px;
|
|
content: "label_off";
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol_edit::before.round-button--no-image {
|
|
background: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol_edit::before:hover {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol_edit:hover::before {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontainer.editmode ~ .repcontrol button::after {
|
|
position: absolute;
|
|
content: "";
|
|
inset: -2px;
|
|
top: -1px;
|
|
border: 3px solid var(--elementColor);
|
|
border-style: dashed;
|
|
border-radius: 100%;
|
|
aspect-ratio: 1/1;
|
|
animation: spin 10s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol-button--add {
|
|
width: auto;
|
|
height: auto;
|
|
margin: 5px 0;
|
|
order: 99;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol-button--add::before {
|
|
color: var(--dm-fontColor);
|
|
font-family: var(--font-icon-outlined);
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
border-radius: 100%;
|
|
padding: 0.4em;
|
|
background: var(--img-round-button);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
width: 20px;
|
|
content: "new_label";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol-button--add::before.round-button--no-image {
|
|
background: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol-button--add::before:hover {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills .section--skills__list--secondary .repcontrol-button--add:hover::before {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__button--advance {
|
|
position: absolute;
|
|
top: -0.5em;
|
|
right: 2em;
|
|
color: var(--dm-fontColor);
|
|
font-family: var(--font-icon-outlined);
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
border-radius: 100%;
|
|
padding: 0.4em;
|
|
background: var(--img-round-button);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
width: 20px;
|
|
z-index: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__button--advance.round-button--no-image {
|
|
background: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--skills__button--advance:hover {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
@container (max-width: 400px) {
|
|
body .ui-dialog .tab-content .charsheet .section--skills h2:not(.marble-header), body .ui-dialog .tab-content .charsheet .section--skills .input-label:not(.stacked).large > [name]:not(.marble-header) {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
body .ui-dialog .tab-content .charsheet .section--wealth {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
margin-bottom: 1rem;
|
|
filter: var(--fx-shadow);
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#main {
|
|
container: charsheet/inline-size;
|
|
}
|
|
|
|
body {
|
|
--font1:var(--topHeadFont);
|
|
--font2:var(--topHeadFont);
|
|
--font3:var(--midHeadFont);
|
|
--font4:var(--midHeadFont);
|
|
--font5:var(--midHeadFont);
|
|
--font6:var(--contentHeadFont);
|
|
--font7:var(--contentHeadFont);
|
|
--baseFontSize: 16px;
|
|
--size1:300%;
|
|
--size2:250%;
|
|
--size3:200%;
|
|
--size4:150%;
|
|
--size5:125%;
|
|
--size6:100%;
|
|
--size7:87.5%;
|
|
--icon-size:24px;
|
|
--font-icon: "Material Icons";
|
|
--normal-gap-x:1rem;
|
|
--normal-gap-y:1rem;
|
|
--normal-gap: var(--normal-gap-x);
|
|
--half-gap-x:calc(var(--normal-gap-x) / 2);
|
|
--half-gap-y:calc(var(--normal-gap-y) / 2);
|
|
--half-gap: var(--half-gap-x);
|
|
--tiny-gap-x:calc(var(--half-gap-x) / 2);
|
|
--tiny-gap-y:calc(var(--half-gap-y) / 2);
|
|
--tiny-gap: var(--tiny-gap-x);
|
|
--big-gap-x:calc(var(--normal-gap-x) * 2);
|
|
--big-gap-y:calc(var(--normal-gap-y) * 2);
|
|
--big-gap: var(--big-gap-x);
|
|
--lm-backColor:#fff;
|
|
--dm-backColor:var(--dark-surface1);
|
|
--backColor:var(--lm-backColor);
|
|
--lm-selectedColor:#000;
|
|
--dm-selectedColor:#007476;
|
|
--selectedColor:var(--lm-selectedColor);
|
|
--lm-unselectedColor1:lightgrey;
|
|
--dm-unselectedColor1:#0e0e0e;
|
|
--unselectedColor1:var(--lm-unselectedColor1);
|
|
--lm-unselectedColor2:transparent;
|
|
--dm-unselectedColor2:transparent;
|
|
--unselectedColor1:var(--lm-unselectedColor2);
|
|
--lm-checkColor:#000;
|
|
--dm-checkColor:#ff0000;
|
|
--checkColor:var(--lm-checkColor);
|
|
--lm-checkedBackColor:transparent;
|
|
--dm-checkedBackColor:transparent;
|
|
--checkedBackColor:var(--lm-checkedBackColor);
|
|
--lm-borderColor:#000;
|
|
--dm-borderColor:lightgrey;
|
|
--borderColor:var(--lm-borderColor);
|
|
--lm-fontColor:#0f0f0f;
|
|
--dm-fontColor:var(--dark-primarytext);
|
|
--fontColor:var(--lm-fontColor);
|
|
--lm-disabledColor:var(--lm-unselectedColor1);
|
|
--dm-disabledColor:var(--dm-unselectedColor1);
|
|
--disabledColor:var(--lm-disabledColor);
|
|
--checkContent: "✓";
|
|
--checkWeight: bold;
|
|
--checkSize: 150%;
|
|
--checkLineHeight: calc(var(--checkSize) / 3);
|
|
--checkboxBorderWidth: var(--borderWidth);
|
|
--checkboxBorderStyle: var(--borderStyle);
|
|
--lm-checkboxBorderColor: var(--lm-borderColor);
|
|
--dm-checkboxBorderColor: var(--dm-borderColor);
|
|
--checkboxBorderColor: var(--lm-checkBorderColor);
|
|
--checkboxWidth: 14px;
|
|
--checkboxHeight: 14px;
|
|
--inputTopPadding: 2px;
|
|
--inputRightPadding: 2px;
|
|
--inputBottomPadding: 2px;
|
|
--inputLeftPadding: 2px;
|
|
--inputPadding:
|
|
var(--inputTopPadding)
|
|
var(--inputRightPadding)
|
|
var(--inputBottomPadding)
|
|
var(--inputLeftPadding);
|
|
--lm-placeholderColor:#ededed80;
|
|
--dm-placeholderColor:#3f3f3f80;
|
|
--placeholderColor: var(--lm-placeholderColor);
|
|
--textareaResize: vertical;
|
|
--borderWidth:1px;
|
|
--borderStyle:solid;
|
|
--expandedSymbol:"unfold_less";
|
|
--collapsedSymbol: "unfold_more";
|
|
--collapseHoverOpacity: 1;
|
|
--collapseBaseOpacity: 0;
|
|
--lm-collapseExpandedColor:var(--lm-selectedColor);
|
|
--dm-collapseExpandedColor:var(--dm-selectedColor);
|
|
--collapseExpandedColor: var(--lm-collapseExpandedColor);
|
|
--lm-collapseCollapsedColor:var(--lm-unselectedColor);
|
|
--dm-collapseCollapsedColor:var(--dm-unselectedColor);
|
|
--collapseCollapsedColor: var(--lm-collapseCollapsedColor);
|
|
--fillLeftDisplay: flex;
|
|
--fillLeftAlignment: center;
|
|
--fillLeftDataTransform: uppercase;
|
|
--fillLeftDataSize: var(--size6);
|
|
--lm-fillLeftSelectedColor: var(--lm-selectedColor);
|
|
--dm-fillLeftSelectedColor: var(--dm-selectedColor);
|
|
--fillLeftSelectedColor: var(--lm-fillLeftSelectedColor);
|
|
--lm-fillLeftUnselectedColor: var(--lm-unselectedColor);
|
|
--dm-fillLeftUnselectedColor: var(--dm-unselectedColor);
|
|
--fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor);
|
|
--lm-fillLeftDataColor: var(--lm-backColor);
|
|
--dm-fillLeftDataColor: var(--dm-backColor);
|
|
--fillLeftDataColor: var(--lm-fillLeftDataColor);
|
|
--lm-selectColor: var(--lm-fontColor);
|
|
--dm-selectColor: var(--dm-fontColor);
|
|
--selectColor: var(--lm-fontColor);
|
|
--selectTextOverflow: var(--textOverflow);
|
|
--selectTextAlign: center;
|
|
--selectTextTransform: capitalize;
|
|
--revealTime:500ms;
|
|
--revealFunction: ease-in-out;
|
|
--revealTrans: var(--revealTime) var(--revealFunction);
|
|
--kmodal-width:fit-content;
|
|
--kmodal-height:fit-content;
|
|
--kmodal-max-width:90vw;
|
|
--kmodal-max-height:90vh;
|
|
--lm-kmodal-overlay-background:rgba(0,0,0,.9);
|
|
--dm-kmodal-overlay-background:rgba(0,0,0,.9);
|
|
--kmodal-overlay-background: var(--lm-kmodal-overlay-background);
|
|
--lm-kmodal-dialog-background:var(--lm-backColor);
|
|
--dm-kmodal-dialog-background:var(--dm-backColor);
|
|
--kmodal-dialog-background: var(--lm-kmodal-dialog-background);
|
|
--kmodal-border-width:0px;
|
|
--kmodal-border-color:transparent;
|
|
--lm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25);
|
|
--dm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25);
|
|
--kmodal-box-shadow-color1:var(--lm-kmodal-box-shadow-color1);
|
|
--kmodal-box-shadow-blur1:28px;
|
|
--kmodal-box-shadow-x1:0px;
|
|
--kmodal-box-shadow-y1:14px;
|
|
--kmodal-box-shadow-spread1:0px;
|
|
--lm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22);
|
|
--dm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22);
|
|
--kmodal-box-shadow-color2:var(--lm-kmodal-box-shadow-color2);
|
|
--kmodal-box-shadow-blur2:10px;
|
|
--kmodal-box-shadow-x2:0px;
|
|
--kmodal-box-shadow-y2:10px;
|
|
--kmodal-box-shadow-spread2:0px;
|
|
--kmodal-box-shadow:
|
|
var(--kmodal-box-shadow-x1) var(--kmodal-box-shadow-y1) var(--kmodal-box-shadow-blur1) var(--kmodal-box-shadow-spread1) var(--kmodal-box-shadow-color1),
|
|
var(--kmodal-box-shadow-x2) var(--kmodal-box-shadow-y2) var(--kmodal-box-shadow-blur2) var(--kmodal-box-shadow-spread2) var(--kmodal-box-shadow-color2);
|
|
--kmodal-close-width:1rem;
|
|
--kmodal-close-height:1rem;
|
|
--lm-kmodal-close-color:#ccc;
|
|
--dm-kmodal-close-color:#aaa;
|
|
--kmodal-close-color:var(--lm-kmodal-close-color);
|
|
--lm-kmodal-close-hover-color:#aaa;
|
|
--dm-kmodal-close-hover-color:#aaa;
|
|
--kmodal-close-hover-color:var(--lm-kmodal-close-hover-color);
|
|
--kmodal-close-line-thickness:2px;
|
|
--kmodal-close-line-length:calc(var(--kmodal-close-width) * 1.5);
|
|
--input-label-gap: var(--half-gap);
|
|
--contentHeadFont: Galdeano, sans-serif;
|
|
--midHeadFont: Alegreya, serif;
|
|
--topHeadFont: Alegreya, serif;
|
|
--lm-selectedTextColor: beige;
|
|
--dm-selectedTextColor: black;
|
|
--selectedTextColor: var(--lm-selectedTextColor);
|
|
--lm-fontColor:black;
|
|
--dm-fontColor: beige;
|
|
--selectedColor: #e73431;
|
|
--lm-elementColor: hsl(167, 76%, 16%);
|
|
--dm-elementColor: hsl(167, 76%, 16%);
|
|
--elementColor: var(--lm-elementColor);
|
|
--accentColor: #91643e;
|
|
--lightAccentColor: #ae9077;
|
|
--inputHighlight: hsla(78, 87%, 18%, 0.2);
|
|
--checkedColor: var(--selectedColor);
|
|
--checkColor: var(--selectedColor);
|
|
--fontColor:var(--lm-fontColor);
|
|
--input-label-text-transform: capitalize;
|
|
--lm-attributeGradientOuter: #f7eedf;
|
|
--dm-attributeGradientOuter: #2a1d24;
|
|
--attributeGradientOuter: var(--lm-attributeGradientOuter);
|
|
--selectTextAlign: left;
|
|
color: var(--fontColor);
|
|
font-family: var(--contentHeadFont);
|
|
font-size: var(--baseFontSize);
|
|
--font-icon-outlined: "Material Icons Outlined";
|
|
--lm-img-background-trunk:url(https://files.d20.io/images/340967489/C9RG1IgH0wtT-WzHnUp0IQ/original.webp?168357376655);
|
|
--dm-img-background-trunk: url(https://s3.amazonaws.com/files.d20.io/images/344388910/6GCWP4m5AFdMGwnaA2CNrg/original.jpg);
|
|
--img-background-trunk: var(--lm-img-background-trunk);
|
|
--img-underline: url(https://s3.amazonaws.com/files.d20.io/images/341105722/SObhoH7fKZsP1EruFOtgxg/original.webp?168366659555);
|
|
--img-underline2: url(https://s3.amazonaws.com/files.d20.io/images/341266910/MR-M3Vu6F02csBtlyJmhlA/original.webp?168376894455);
|
|
--img-underline3: url(https://s3.amazonaws.com/files.d20.io/images/341267108/hUSdD0xogLL-CNqT-9YfSw/original.webp?168376904155);
|
|
--img-underline-dm: url(https://s3.amazonaws.com/files.d20.io/images/344463581/RfDMPLZroxX-m45XzAIEUA/original.jpg);
|
|
--img-underline2-dm: url(https://s3.amazonaws.com/files.d20.io/images/344464387/wfPEiwB0Sx-L8u7_vvu2Xw/original.jpg);
|
|
--img-underline3-dm: url(https://s3.amazonaws.com/files.d20.io/images/344464414/4Bai-VthBzpKkXsLwmWhQQ/original.jpg);
|
|
--img-full-cap-1: url(https://s3.amazonaws.com/files.d20.io/images/337877070/pvNpZQTaXC-LkJZLav1fVw/original.png?16817739755);
|
|
--img-full-cap-2: url(https://s3.amazonaws.com/files.d20.io/images/337877066/iZrp6qCQVq4H0VU8CAIWZw/original.webp?16817739755);
|
|
--img-full-cap-3: url(https://s3.amazonaws.com/files.d20.io/images/337877071/OuGYvLvL1DBRaQ6QE2_kfg/original.webp?16817739755);
|
|
--img-full-cap-4: url(https://s3.amazonaws.com/files.d20.io/images/337877068/8piMIUycneNLyU4akGV1LQ/original.webp?16817739755);
|
|
--img-small-cap-1: url(https://s3.amazonaws.com/files.d20.io/images/337877069/Kp0vR4b6fzWOO3jMKP8d1w/original.webp?16817739755);
|
|
--img-small-cap-2: url(https://s3.amazonaws.com/files.d20.io/images/337877067/M6eBqL2OkQy9QJf8vm0tRg/original.webp?16817739765);
|
|
--img-min-cap-1: url(https://s3.amazonaws.com/files.d20.io/images/337875826/MckUvffsdHzKUmClrGtWOQ/original.webp?16817735245);
|
|
--img-plate-general: url(https://s3.amazonaws.com/files.d20.io/images/337875663/2n79dXi1zDm6jSv3TFr6Uw/original.png?168177345655);
|
|
--img-plate-parchment: url(https://s3.amazonaws.com/files.d20.io/images/337875612/-QBUwqQ6GH-DwHtMagMf1A/original.png?168177343055);
|
|
--img-field-parchment: url(https://s3.amazonaws.com/files.d20.io/images/338032646/3wxXcs3DEZPjzXjMsLlIWg/original.webp?168187041355);
|
|
--img-field-marble-green-vert-repeat: url(https://files.d20.io/images/350678464/bK2_Dh8xA0GkYVW0Ffjb0Q/original.png);
|
|
--img-field-marble-green: url(https://s3.amazonaws.com/files.d20.io/images/337875412/nuFu607BG0jjT0DCZF3hDw/original.webp?168177334155);
|
|
--img-field-marble-red: url(https://s3.amazonaws.com/files.d20.io/images/337875413/QQKnJODjd6gVq7bt2iBJHg/original.webp?168177334155);
|
|
--img-input-parchment: url(https://s3.amazonaws.com/files.d20.io/images/337875295/49gtGknCZnt-7umsqcnBdA/original.webp?168177328955);
|
|
--img-cap-parchment1: url(https://s3.amazonaws.com/files.d20.io/images/337874777/ifWdvn67qTPug9C3igg-8g/original.webp?16817732325);
|
|
--img-cap-parchment2: url(https://s3.amazonaws.com/files.d20.io/images/337874786/sCXrEPgxwuWAa3ZCBsXvjQ/original.webp?16817732325);
|
|
--img-cap-parchment3: url(https://s3.amazonaws.com/files.d20.io/images/337874821/_Oo2CWDa3UPwYLn3VigoQQ/original.webp?16817732335);
|
|
--img-marble-rod-border: url(https://s3.amazonaws.com/files.d20.io/images/343376680/dOBeDttyeYlW1FL5NTBQhg/original.jpg);
|
|
--img-attrdeco-left: url(https://s3.amazonaws.com/files.d20.io/images/337873674/5Qvxo8xhl7Rbqp6KxZS1vg/original.webp?168177288755);
|
|
--img-attrdeco-right: url(https://s3.amazonaws.com/files.d20.io/images/337874217/eVx0T9hZciyDYar_5UUS4g/original.webp?168177312955);
|
|
--img-attrdeco-center: url(https://s3.amazonaws.com/files.d20.io/images/337874219/J4-RtaBOnBW1gLB8Cni08g/original.webp?168177312955);
|
|
--img-attrdeco-border: url(https://s3.amazonaws.com/files.d20.io/images/337874216/ja3d2TOTiCoNhosVkSQKWw/original.webp?168177312955);
|
|
--img-attrdeco-border2: url(https://s3.amazonaws.com/files.d20.io/images/337874215/-auYrjs-MFKu7EiiiFRh5Q/original.webp?168177312955);
|
|
--img-attrdeco-background: url(https://s3.amazonaws.com/files.d20.io/images/337874218/A-J6-z9-Kmn2osvjzHNNlA/original.webp?168177313055);
|
|
--img-edgedeco-left: url(https://s3.amazonaws.com/files.d20.io/images/338034574/K-lsu5ZtSRl0Jvj1Oa3uqA/original.webp?168187141855);
|
|
--img-edgedeco-right: url(https://s3.amazonaws.com/files.d20.io/images/338034573/VLRMrtGjq09bXlfCvHy0Vw/original.webp?168187141855);
|
|
--img-edgedeco-center-lg: url(https://s3.amazonaws.com/files.d20.io/images/338034577/Cy2LOHQBTaONvhqIyvH2zg/original.webp?168187141955);
|
|
--img-edgedeco-center-sm: url(https://s3.amazonaws.com/files.d20.io/images/338034576/7f94Bbgpd9nP0SB060ousg/original.webp?16818714185);
|
|
--img-edge-deco-line: url(https://s3.amazonaws.com/files.d20.io/images/338034575/cr2dJkVN21XZ0ejSZKI0rA/original.webp?168187141955);
|
|
--img-round-button: url(https://s3.amazonaws.com/files.d20.io/images/338274645/WfqLrQ8npbosG7xyEYWmjg/original.webp?16820368465);
|
|
--img-round-button-red: url(https://s3.amazonaws.com/files.d20.io/images/344245100/eeLXueBGIaoEkbR2cmNhaw/original.jpg);
|
|
--img-plate-willpower: url(https://s3.amazonaws.com/files.d20.io/images/344091016/djkLb01pS0RuEvhxv9n9ag/original.jpg);
|
|
--img-plate-hp: url(https://s3.amazonaws.com/files.d20.io/images/344090978/bsg4gYxg-0bTvBkTq4wlMw/original.jpg);
|
|
--img-point1: url(https://s3.amazonaws.com/files.d20.io/images/344092362/gkUFWH9ztfF6X5kIVSfhZw/original.png);
|
|
--img-point2: url(https://s3.amazonaws.com/files.d20.io/images/344092362/gkUFWH9ztfF6X5kIVSfhZw/original.png);
|
|
--img-point3: url(https://s3.amazonaws.com/files.d20.io/images/344092497/RSEVUYU_CXUYCYUKxzcYVw/original.png);
|
|
--img-point4: url(https://s3.amazonaws.com/files.d20.io/images/344092517/CwUrP5TzRIekkPXFhqhBVg/original.png);
|
|
--img-point5: url(https://s3.amazonaws.com/files.d20.io/images/344092621/zkSFkyF_dq_Itdnf3_KmvA/original.png);
|
|
--img-helm: url(https://s3.amazonaws.com/files.d20.io/images/344484199/ZlWZHSiewtkCVYBDvdzKQg/original.png);
|
|
--img-armor: url(https://s3.amazonaws.com/files.d20.io/images/344484246/AUvTw7I48L6os77jb0qrGA/original.png);
|
|
--_shadow: rgba(0,0,0,0.8);
|
|
--fx-shadow: drop-shadow(0 0 0.2em var(--_shadow));
|
|
font-size: 1rem;
|
|
}
|
|
body .ui-dialog .nav-tabs {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
background-color: var(--backColor);
|
|
}
|
|
body .ui-dialog .nav-tabs a {
|
|
font-family: var(--font3);
|
|
}
|
|
body .ui-dialog .tab-content .sheetform {
|
|
background-color: transparent;
|
|
background: var(--img-background-trunk);
|
|
background-size: 100%;
|
|
background-position: center;
|
|
filter: drop-shadow(0 0 1rem black);
|
|
margin-bottom: var(--normal-gap);
|
|
margin-top: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet {
|
|
/* width */
|
|
/* Track */
|
|
/* Handle */
|
|
/* Handle on hover */
|
|
}
|
|
body .ui-dialog .tab-content .charsheet select,
|
|
body .ui-dialog .tab-content .charsheet textarea,
|
|
body .ui-dialog .tab-content .charsheet input,
|
|
body .ui-dialog .tab-content .charsheet .uneditable-input,
|
|
body .ui-dialog .tab-content .charsheet label,
|
|
body .ui-dialog .tab-content .charsheet button {
|
|
all: initial;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .flex-box,
|
|
body .ui-dialog .tab-content .charsheet .sheet-flex-box {
|
|
display: flex;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .flex-wrap,
|
|
body .ui-dialog .tab-content .charsheet .sheet-flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .justify-space-around,
|
|
body .ui-dialog .tab-content .charsheet .sheet-justify-space-around {
|
|
justify-content: space-around;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .justify-space-between,
|
|
body .ui-dialog .tab-content .charsheet .sheet-justify-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .justify-center,
|
|
body .ui-dialog .tab-content .charsheet .sheet-justify-center {
|
|
justify-content: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .flex-min-content,
|
|
body .ui-dialog .tab-content .charsheet .sheet-flex-min-content {
|
|
flex: 1 0 min-content;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .stacked {
|
|
flex-direction: column;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .stacked.center > * {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .stacked:not(.center) {
|
|
align-items: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]) {
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .flex-column,
|
|
body .ui-dialog .tab-content .charsheet .sheet-flex-column {
|
|
flex-direction: column;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .flex-row-reverse,
|
|
body .ui-dialog .tab-content .charsheet .sheet-flex-row-revers {
|
|
flex-direction: row-reverse;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .flex-column-reverse,
|
|
body .ui-dialog .tab-content .charsheet .sheet-flex-column-reverse {
|
|
flex-direction: column-reverse;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .normal-gap,
|
|
body .ui-dialog .tab-content .charsheet .sheet-normal-gap {
|
|
gap: var(--normal-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .normal-gap-x,
|
|
body .ui-dialog .tab-content .charsheet .sheet-normal-gap-x {
|
|
column-gap: var(--normal-gap-x);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .normal-gap-y,
|
|
body .ui-dialog .tab-content .charsheet .sheet-normal-gap-y {
|
|
row-gap: var(--normal-gap-y);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .half-gap,
|
|
body .ui-dialog .tab-content .charsheet .sheet-half-gap {
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .half-gap-x,
|
|
body .ui-dialog .tab-content .charsheet .sheet-half-gap-x {
|
|
column-gap: var(--half-gap-x);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .half-gap-y,
|
|
body .ui-dialog .tab-content .charsheet .sheet-half-gap-y {
|
|
row-gap: var(--half-gap-y);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tiny-gap,
|
|
body .ui-dialog .tab-content .charsheet .sheet-tiny-gap {
|
|
gap: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tiny-gap-x,
|
|
body .ui-dialog .tab-content .charsheet .sheet-tiny-gap-x {
|
|
column-gap: var(--tiny-gap-x);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tiny-gap-y,
|
|
body .ui-dialog .tab-content .charsheet .sheet-tiny-gap-y {
|
|
row-gap: var(--tiny-gap-y);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .big-gap,
|
|
body .ui-dialog .tab-content .charsheet .sheet-big-gap {
|
|
gap: var(--big-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .big-gap-x,
|
|
body .ui-dialog .tab-content .charsheet .sheet-big-gap-x {
|
|
column-gap: var(--big-gap-x);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .big-gap-y,
|
|
body .ui-dialog .tab-content .charsheet .sheet-big-gap-y {
|
|
row-gap: var(--big-gap-y);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .grid,
|
|
body .ui-dialog .tab-content .charsheet .sheet-grid {
|
|
display: grid;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .grid-span-2,
|
|
body .ui-dialog .tab-content .charsheet .sheet-grid-span-2 {
|
|
grid-column: span 2;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .grid-span-all,
|
|
body .ui-dialog .tab-content .charsheet .sheet-grid-span-all {
|
|
grid-column: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .grid-column,
|
|
body .ui-dialog .tab-content .charsheet .sheet-grid-column {
|
|
grid-auto-flow: column;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .grid-dense,
|
|
body .ui-dialog .tab-content .charsheet .sheet-grid-dense {
|
|
grid-auto-flow: dense;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .boxed,
|
|
body .ui-dialog .tab-content .charsheet .sheet-boxed {
|
|
border: 2px solid var(--borderColor);
|
|
border-radius: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .boxed.thick-left,
|
|
body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-left {
|
|
border-left-width: 5px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .boxed.thick-bottom,
|
|
body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom {
|
|
border-bottom-width: 5px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .boxed.thick-right,
|
|
body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-right {
|
|
border-right-width: 5px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .boxed.thick-top,
|
|
body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-top {
|
|
border-top-width: 5px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .underlined,
|
|
body .ui-dialog .tab-content .charsheet .sheet-underlined {
|
|
border-width: 1px 3px;
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
border-color: transparent;
|
|
box-sizing: border-box;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--borderColor);
|
|
transition: border-radius border var(--revealTrans);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:hover, :focus, :focus-within) {
|
|
border-width: 1px 3px;
|
|
border-style: solid;
|
|
border-color: var(--borderColor);
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within) {
|
|
background-color: var(--disabledColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .underlined--invisible {
|
|
border-color: transparent !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .ratio1-1,
|
|
body .ui-dialog .tab-content .charsheet .sheet-ratio1-1 {
|
|
aspect-ratio: 1/1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet span,
|
|
body .ui-dialog .tab-content .charsheet input,
|
|
body .ui-dialog .tab-content .charsheet textarea,
|
|
body .ui-dialog .tab-content .charsheet button,
|
|
body .ui-dialog .tab-content .charsheet select {
|
|
line-height: normal;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-1,
|
|
body .ui-dialog .tab-content .charsheet .sheet-text-1 {
|
|
font-size: var(--size1);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-2,
|
|
body .ui-dialog .tab-content .charsheet .sheet-text-2 {
|
|
font-size: var(--size2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-3,
|
|
body .ui-dialog .tab-content .charsheet .sheet-text-3 {
|
|
font-size: var(--size3);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-4,
|
|
body .ui-dialog .tab-content .charsheet .sheet-text-4 {
|
|
font-size: var(--size4);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-5,
|
|
body .ui-dialog .tab-content .charsheet .sheet-text-5 {
|
|
font-size: var(--size5);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-6,
|
|
body .ui-dialog .tab-content .charsheet .sheet-text-6 {
|
|
font-size: var(--size6);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-7,
|
|
body .ui-dialog .tab-content .charsheet .sheet-text-7 {
|
|
font-size: var(--size7);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .capitalize,
|
|
body .ui-dialog .tab-content .charsheet .sheet-capitalize {
|
|
text-transform: capitalize !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .lowercase,
|
|
body .ui-dialog .tab-content .charsheet .sheet-lowercase {
|
|
text-transform: lowercase !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .uppercase,
|
|
body .ui-dialog .tab-content .charsheet .sheet-uppercase {
|
|
text-transform: uppercase !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .sheet-material-icons,
|
|
body .ui-dialog .tab-content .charsheet .material-icons {
|
|
font-family: "Material Icons";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: var(--icon-size); /* Preferred icon size */
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .sheet-italics,
|
|
body .ui-dialog .tab-content .charsheet .italics {
|
|
font-style: italic;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h1,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-size: var(--size1);
|
|
font-family: var(--font1);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h1:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="1"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h1 *,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="1"] * {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-size: var(--size1);
|
|
font-family: var(--font1);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h1 *:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="1"] *:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h2, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="2"] {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-size: var(--size2);
|
|
font-family: var(--font2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h2:not(input), body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="2"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h2 *, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="2"] * {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-size: var(--size2);
|
|
font-family: var(--font2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h2 *:not(input), body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="2"] *:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h3,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="3"] {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-size: var(--size3);
|
|
font-family: var(--font3);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h3:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="3"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h3 *,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="3"] * {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
text-transform: uppercase;
|
|
font-weight: normal;
|
|
font-size: var(--size3);
|
|
font-family: var(--font3);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h3 *:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="3"] *:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h4,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="4"] {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
font-size: var(--size4);
|
|
font-family: var(--font4);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h4:not(:where(input)),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(:where(input)) {
|
|
text-transform: capitalize;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h4:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h4 *,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="4"] * {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
font-size: var(--size4);
|
|
font-family: var(--font4);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h4 *:not(:where(input)),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(:where(input)) {
|
|
text-transform: capitalize;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h4 *:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h5,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="5"] {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
font-size: var(--size5);
|
|
font-style: normal;
|
|
font-family: var(--font5);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h5:not(:where(input)),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(:where(input)) {
|
|
text-transform: capitalize;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h5:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h5 *,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="5"] * {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
font-size: var(--size5);
|
|
font-style: normal;
|
|
font-family: var(--font5);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h5 *:not(:where(input)),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(:where(input)) {
|
|
text-transform: capitalize;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h5 *:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h6,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="6"] {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
font-size: var(--size5);
|
|
font-style: normal;
|
|
font-family: var(--font5);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h6:not(:where(input)),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(:where(input)) {
|
|
text-transform: capitalize;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h6:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h6 *,
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="6"] * {
|
|
line-height: normal;
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: normal;
|
|
font-size: var(--size5);
|
|
font-style: normal;
|
|
font-family: var(--font5);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h6 *:not(:where(input)),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(:where(input)) {
|
|
text-transform: capitalize;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h6 *:not(input),
|
|
body .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(input) {
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .sheet-pictos,
|
|
body .ui-dialog .tab-content .charsheet .pictos {
|
|
font-family: pictos;
|
|
text-transform: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .pictos3,
|
|
body .ui-dialog .tab-content .charsheet .sheet-pictos3 {
|
|
font-family: pictos three;
|
|
text-transform: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .pictoscustom,
|
|
body .ui-dialog .tab-content .charsheet .sheet-pictoscustom {
|
|
font-family: pictos custom;
|
|
text-transform: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .d4,
|
|
body .ui-dialog .tab-content .charsheet .sheet-d4 {
|
|
font-family: dicefontd4 !important;
|
|
text-transform: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .d6,
|
|
body .ui-dialog .tab-content .charsheet .sheet-d6 {
|
|
font-family: dicefontd6 !important;
|
|
text-transform: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .d8,
|
|
body .ui-dialog .tab-content .charsheet .sheet-d8 {
|
|
font-family: dicefontd8 !important;
|
|
text-transform: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .d10,
|
|
body .ui-dialog .tab-content .charsheet .sheet-d10 {
|
|
font-family: dicefontd10 !important;
|
|
text-transform: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .d12,
|
|
body .ui-dialog .tab-content .charsheet .sheet-d12 {
|
|
font-family: dicefontd12 !important;
|
|
text-transform: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .d20,
|
|
body .ui-dialog .tab-content .charsheet .sheet-d20 {
|
|
font-family: dicefontd20 !important;
|
|
text-transform: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .d30,
|
|
body .ui-dialog .tab-content .charsheet .sheet-d30 {
|
|
font-family: dicefontd30 !important;
|
|
text-transform: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=checkbox] {
|
|
border: 1px solid var(--checkboxBorderColor);
|
|
cursor: pointer;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: var(--checkboxWidth);
|
|
min-width: var(--checkboxWidth);
|
|
height: var(--checkboxHeight);
|
|
min-height: var(--checkboxHeight);
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "content";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked {
|
|
background-color: var(--checkedBackColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked:before {
|
|
content: var(--checkContent);
|
|
grid-area: content;
|
|
font-weight: var(--checkWeight);
|
|
place-self: start center;
|
|
color: var(--checkColor);
|
|
font-size: var(--checkSize);
|
|
line-height: var(--checkLineHeight);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=number] {
|
|
width: 3rem;
|
|
-moz-appearance: textfield !important;
|
|
text-align: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, body .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet select,
|
|
body .ui-dialog .tab-content .charsheet .pseudo-select span,
|
|
body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
body .ui-dialog .tab-content .charsheet textarea,
|
|
body .ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])),
|
|
body .ui-dialog .tab-content .charsheet .uneditable-input {
|
|
padding: var(--inputPadding);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input:is([type=text], [type=number]), body .ui-dialog .tab-content .charsheet textarea {
|
|
cursor: auto;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet select,
|
|
body .ui-dialog .tab-content .charsheet .pseudo-select span,
|
|
body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
body .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])),
|
|
body .ui-dialog .tab-content .charsheet .uneditable-input,
|
|
body .ui-dialog .tab-content .charsheet textarea {
|
|
border-width: 1px 3px;
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
border-color: transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet select,
|
|
body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
body .ui-dialog .tab-content .charsheet .pseudo-select span {
|
|
-webkit-apperance: none;
|
|
appearance: none;
|
|
text-transform: var(--selectTextTransform);
|
|
overflow: hidden !important;
|
|
white-space: nowrap;
|
|
text-overflow: var(--selectTextOverflow);
|
|
text-align: var(--selectTextAlign);
|
|
color: var(--selectColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input {
|
|
width: auto;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input:placeholder {
|
|
color: var(--placeholderColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before {
|
|
content: "+";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet textarea {
|
|
resize: var(--textareaResize);
|
|
white-space: pre-wrap;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet textarea.fixed {
|
|
resize: none;
|
|
overflow: auto;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet button {
|
|
cursor: pointer;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .roller {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .roller:before {
|
|
content: "T";
|
|
font-family: dicefontd20;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .collapse-container {
|
|
display: grid;
|
|
position: relative;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-collapse {
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-collapse:before {
|
|
content: var(--expandedSymbol);
|
|
font-family: "Material Icons";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: var(--icon-size); /* Preferred icon size */
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-collapse__text {
|
|
display: inline;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-collapse__check:not(:checked) + .text-collapse {
|
|
border-width: 1px 3px;
|
|
border-style: solid;
|
|
border-color: var(--borderColor);
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .text-collapse__check:checked + .text-collapse:before {
|
|
content: var(--collapsedSymbol);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem:hover .collapse, body .ui-dialog .tab-content .charsheet .repitem:hover .roll-container,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container:hover .collapse,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container {
|
|
opacity: var(--collapseHoverOpacity);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse {
|
|
opacity: var(--collapseBaseOpacity);
|
|
position: absolute;
|
|
right: -10px;
|
|
top: 0px;
|
|
border: 0px solid black;
|
|
border-radius: 0;
|
|
color: var(--collapseExpandedColor);
|
|
text-transform: none;
|
|
background-color: transparent;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:before,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:before {
|
|
content: "y";
|
|
font-family: pictos;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:checked,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked {
|
|
color: var(--collapseCollapsedColor);
|
|
background-color: transparent;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded,
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container .expanded,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container .expanded {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapsed,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapsed {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .collapse:hover,
|
|
body .ui-dialog .tab-content .charsheet .collapse-container .collapse:hover {
|
|
color: var(--collapseExpandedColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fill-left {
|
|
display: var(--fillLeftDisplay);
|
|
align-self: var(--fillLeftAlignment);
|
|
box-sizing: border-box;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fill-left__radio {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
background-color: var(--fillLeftSelectedColor);
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fill-left__radio[data-value]:checked:before {
|
|
content: attr(data-value);
|
|
color: var(--fillLeftDataColor);
|
|
font-size: var(--fillLeftDataSize);
|
|
place-self: center;
|
|
text-transform: var(--fillLeftDataTransform);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fill-left__radio:checked ~ .fill-left__radio {
|
|
background-color: var(--fillLeftUnselectedColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label {
|
|
display: inline-flex;
|
|
gap: var(--input-label-gap);
|
|
align-items: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > input[type=text] {
|
|
flex: 1 1 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]) {
|
|
flex: 0 0 auto;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label > :is(span, button) {
|
|
text-transform: var(--input-label-text-transform);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label--dual {
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-template-areas: "over over over" "under under under";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label--dual > span:last-of-type {
|
|
grid-column: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label--dual > input:not([type=number]):not([type=checkbox]):not([type=radio]) {
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .input-label--dual > .slash {
|
|
line-height: 0rem;
|
|
font-weight: normal;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .headed-textarea {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: auto;
|
|
grid-column: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .headed-textarea :not(textarea):not(.adaptive) {
|
|
justify-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .headed-textarea .headed-textarea__header {
|
|
grid-area: initial;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto;
|
|
grid-template-areas: "content";
|
|
position: relative;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive > * {
|
|
grid-area: content;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive > span {
|
|
opacity: 0;
|
|
z-index: -10;
|
|
border-width: 1px 3px;
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
border-color: transparent;
|
|
box-sizing: border-box;
|
|
text-transform: initial;
|
|
border-radius: 0px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive--text {
|
|
min-height: 4rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive--text__span {
|
|
white-space: pre-wrap;
|
|
padding: 2px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive--text__textarea {
|
|
width: 100%;
|
|
height: 100%;
|
|
resize: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive--text__textarea,
|
|
body .ui-dialog .tab-content .charsheet .adaptive--input__input {
|
|
position: absolute;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive--input__input {
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .adaptive--input__span {
|
|
padding: 2px;
|
|
min-height: 1.5rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem > input:not([type=checkbox]) {
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repitem .headed-textarea,
|
|
body .ui-dialog .tab-content .charsheet .repitem .description {
|
|
grid-column: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer {
|
|
display: grid;
|
|
gap: var(--normal-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container {
|
|
display: grid;
|
|
grid-template-areas: "header";
|
|
align-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container > .header {
|
|
grid-area: header;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container :is(.repcontrol-button, .repcontrol_edit) {
|
|
opacity: 0;
|
|
transition: var(--revealTrans);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) :is(.repcontrol-button, .repcontrol_edit) {
|
|
opacity: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
align-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol {
|
|
justify-self: end;
|
|
z-index: 100;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol > .repcontrol_add {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add {
|
|
justify-self: start;
|
|
width: 15px;
|
|
height: 15px;
|
|
padding: 4px;
|
|
font-size: 0;
|
|
color: var(--col-alt);
|
|
border: 1px solid var(--col-alt);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add::before {
|
|
inset: 0;
|
|
place-self: center;
|
|
font-family: var(--font-icon);
|
|
font-size: 12px;
|
|
content: "add";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header {
|
|
--size2: 1.2em;
|
|
--size3: 1em;
|
|
--offset:-0.7em;
|
|
--offsetR:var(--offset);
|
|
--offsetL:var(--offset);
|
|
flex-wrap: nowrap !important;
|
|
font-size: 12px;
|
|
height: 2.6em;
|
|
position: relative;
|
|
isolation: isolate;
|
|
background: var(--img-plate-general) no-repeat;
|
|
background-size: cover;
|
|
padding-inline: max(var(--offsetL) * -1, 1em) max(var(--offsetR) * -1, 1em);
|
|
box-sizing: border-box;
|
|
margin-left: calc(var(--offsetL) * -1);
|
|
margin-right: calc(var(--offsetR) * -1);
|
|
margin-block: 0.2em;
|
|
gap: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.offset-box {
|
|
position: absolute;
|
|
top: -1em;
|
|
left: 50%;
|
|
translate: calc(-50% + var(--offsetL));
|
|
z-index: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header:before, body .ui-dialog .tab-content .charsheet .marble-header:after {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
top: -0.2em;
|
|
bottom: -0.2em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header:before {
|
|
left: var(--offsetL);
|
|
background-image: var(--img-small-cap-1);
|
|
min-width: 1.5em;
|
|
max-width: 1.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header:after {
|
|
right: var(--offsetR);
|
|
transform: scaleX(-1);
|
|
background-image: var(--img-small-cap-2);
|
|
min-width: 1.5em;
|
|
max-width: 1.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.marble-header--min {
|
|
--offset: -0.7em;
|
|
padding: 0 1em;
|
|
min-width: 3em;
|
|
max-width: 7em;
|
|
justify-content: center;
|
|
z-index: 10;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.marble-header--min:before {
|
|
background-image: var(--img-min-cap-1);
|
|
min-width: 1.5em;
|
|
max-width: 1.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.marble-header--min:after {
|
|
background-image: var(--img-min-cap-1);
|
|
min-width: 1.5em;
|
|
max-width: 1.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.marble-header--full-left {
|
|
--offsetL: -2em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.marble-header--full-left:before {
|
|
background-image: var(--img-full-cap-1);
|
|
min-width: 3em;
|
|
max-width: 3em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.marble-header--full-right {
|
|
--offsetR: -2em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header.marble-header--full-right:after {
|
|
background-image: var(--img-full-cap-1);
|
|
min-width: 3em;
|
|
max-width: 3em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > :first-child {
|
|
flex-grow: 1 !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > :first-child:not(:last-child) {
|
|
--offset: -8px;
|
|
padding-right: calc(var(--offset) * -2);
|
|
position: relative;
|
|
display: flex;
|
|
gap: var(--tiny-gap);
|
|
align-items: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > :first-child:not(:last-child):after {
|
|
content: "";
|
|
position: absolute;
|
|
right: var(--offset);
|
|
display: block;
|
|
background: var(--img-small-cap-2) no-repeat;
|
|
background-size: cover;
|
|
width: 18px;
|
|
height: 36px;
|
|
z-index: 5;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > :last-child:not(:first-child) {
|
|
margin-right: calc(var(--offsetR) / 2 - 0.3em);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > .--parchment {
|
|
height: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > .--parchment > :last-child:not(div, input) {
|
|
padding-right: calc(var(--offsetR) / 2 * -1);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > .--parchment > :first-child:not(div, input) {
|
|
padding-left: calc(var(--offsetL) / 2 * -1);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header > .--parchment input[type=text], body .ui-dialog .tab-content .charsheet .marble-header > .--parchment input[type=number], body .ui-dialog .tab-content .charsheet .marble-header > .--parchment select, body .ui-dialog .tab-content .charsheet .marble-header > .--parchment span {
|
|
align-self: center;
|
|
position: relative;
|
|
text-align: center;
|
|
color: var(--lm-fontColor);
|
|
font-family: var(--font1);
|
|
font-size: 1.25em;
|
|
font-weight: 700;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header h2, body .ui-dialog .tab-content .charsheet .marble-header .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet .marble-header [aria-level="2"], body .ui-dialog .tab-content .charsheet .marble-header h3, body .ui-dialog .tab-content .charsheet .marble-header [aria-level="3"] {
|
|
color: var(--dm-fontColor);
|
|
font-weight: 700;
|
|
display: grid;
|
|
place-content: center;
|
|
flex: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header input[type=text], body .ui-dialog .tab-content .charsheet .marble-header input[type=number] {
|
|
width: 3em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header select {
|
|
padding-inline: calc(var(--offset) * -1);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .marble-header input:is([type=checkbox], [type=radio]) {
|
|
--checkboxWidth: 1em !important;
|
|
margin-inline: 0.8em -0.8em !important;
|
|
z-index: 10;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .round-button {
|
|
color: var(--dm-fontColor);
|
|
font-family: var(--font-icon-outlined);
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
border-radius: 100%;
|
|
padding: 0.4em;
|
|
background: var(--img-round-button);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .round-button.round-button--no-image {
|
|
background: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .round-button:hover {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .round-button.round-button--symbol {
|
|
font-family: "Material Symbols Outlined";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .check-highlight:not(:checked) + .hover-cursor {
|
|
border-radius: 10px;
|
|
background-color: var(--elementColor);
|
|
color: var(--dm-fontColor);
|
|
padding: 0 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .hover-cursor {
|
|
cursor: pointer;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .hover-cursor:hover {
|
|
border-radius: 10px;
|
|
background-color: var(--elementColor);
|
|
color: var(--dm-fontColor);
|
|
padding: 0 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .collapsed .roller {
|
|
transition: all 200ms ease;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .collapsed .roller::before {
|
|
content: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .collapsed .roller:hover {
|
|
border-radius: 10px;
|
|
background-color: var(--elementColor);
|
|
color: var(--dm-fontColor);
|
|
padding: 0 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded {
|
|
display: grid;
|
|
border: 1px dashed var(--elementColor);
|
|
border-top: 4px solid var(--elementColor);
|
|
border-bottom: 4px solid var(--elementColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded input:not([type=checkbox]),
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded select {
|
|
border: none;
|
|
background: linear-gradient(to right, transparent, var(--inputHighlight) 1rem);
|
|
padding: 0 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul .input-label {
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul li {
|
|
display: flex;
|
|
padding-left: 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul li > * {
|
|
line-height: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul li::before {
|
|
font-family: var(--font-icon-outlined);
|
|
content: "arrow_right";
|
|
color: var(--elementColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul li span {
|
|
font-family: var(--contentHeadFont);
|
|
color: var(--elementColor);
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul li input,
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded ul li select {
|
|
width: 100%;
|
|
height: 17.6px;
|
|
font-size: 0.8em;
|
|
text-align: right;
|
|
font-familY: var(--midHeadFont);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .bullet-point-section + fieldset + .repcontainer .repitem > .expanded .adaptive--text {
|
|
background: hsla(14, 20%, 90%, 0.5);
|
|
font-size: 0.7em;
|
|
min-height: 10em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .column-section + fieldset + .repcontainer {
|
|
display: block;
|
|
column-width: 200px;
|
|
column-gap: var(--normal-gap);
|
|
column-fill: balance;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .column-section + fieldset + .repcontainer .repitem {
|
|
break-inside: avoid;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet ::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet ::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet ::-webkit-scrollbar-thumb {
|
|
background: #888;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet ::-webkit-scrollbar-thumb:hover {
|
|
background: var(--elementColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-section-container {
|
|
display: grid;
|
|
grid-template-areas: "header" "section" "buttons";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add,
|
|
body .ui-dialog .tab-content .charsheet .repcontrol {
|
|
grid-area: buttons;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
place-self: center stretch;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add {
|
|
place-self: center end;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add ~ .repcontrol {
|
|
place-self: center start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .display-control:not(:checked) + .controlled-display {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .display-control--inverted:checked + .controlled-display {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .display-control--non-zero:is([value="0"], :not([value]), [value=""]) + .controlled-display {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fade-overlay {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background-color: transparent;
|
|
transition-property: background-color;
|
|
transition-duration: 500ms;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fade-control:checked + .fade-overlay {
|
|
background-color: rgba(0, 0, 0, 0.321);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header {
|
|
margin-bottom: var(--half-gap);
|
|
align-items: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .character-details {
|
|
flex: 1 1 0;
|
|
min-width: 280px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .logo {
|
|
width: min(220px, 100%);
|
|
color: #c84948;
|
|
font-weight: 700;
|
|
text-wrap: wrap;
|
|
line-height: 0.8;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .input-label {
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .input-elm {
|
|
flex: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .input-elm :not([type=number]):not(h3):not(h2) {
|
|
flex: 1 1;
|
|
min-width: 100px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .player-name {
|
|
width: 150px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .kin {
|
|
width: 150px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .age {
|
|
flex: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .descriptions {
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet header .input-desc {
|
|
flex: 1 1;
|
|
min-width: min(300px, 100%);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory {
|
|
gap: var(--half-gap);
|
|
grid-template-areas: "header" "backpack" "content" "buttons";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .marble-header {
|
|
filter: var(--fx-shadow);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .repcontainer {
|
|
gap: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .repitem {
|
|
display: grid;
|
|
gap: var(--tiny-gap);
|
|
grid-template-columns: auto 1fr auto;
|
|
grid-template-rows: auto auto;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .repitem input[type=text] {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .repitem input[type=number] {
|
|
width: 2em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .repitem .expanded {
|
|
grid-column: 1/-1;
|
|
grid-row: 2;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .repcontrol {
|
|
align-self: stretch;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory__description {
|
|
background: var(--accentColor);
|
|
font-size: 0.7em;
|
|
border-radius: 5px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory__description textarea::placeholder {
|
|
color: color-mix(in lch, var(--dm-fontColor) 60%, transparent);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory__quantity--wrapper {
|
|
position: relative;
|
|
font-size: 0.8em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory__quantity--wrapper span {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
translate: 0 calc(-50% - 0.05em);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory__quantity--wrapper input {
|
|
--inputPadding: 0;
|
|
line-height: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory__name {
|
|
font-weight: bold;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory [class^=subsection] {
|
|
filter: var(--fx-shadow);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--inventory .subsection--tinyitems {
|
|
margin-bottom: 1rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--abilities {
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--abilities__name--display {
|
|
font-weight: bold;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--abilities__cost--display {
|
|
font-weight: bold;
|
|
padding: 0 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--abilities .marble-header {
|
|
filter: var(--fx-shadow);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer[data-groupname=repeating_abilities] {
|
|
gap: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer[data-groupname=repeating_abilities] .collapsed {
|
|
display: flex;
|
|
gap: var(--tiny-gap);
|
|
align-items: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer[data-groupname=repeating_abilities] .collapsed .flex-box {
|
|
flex-grow: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer[data-groupname=repeating_abilities] .collapsed .section--abilities__cost--display {
|
|
margin-left: auto;
|
|
align-self: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer[data-groupname=repeating_abilities] .expanded .--spellReveal:not(:checked) + ul {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
|
align-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .marble-header {
|
|
justify-self: stretch;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .armor__row {
|
|
display: grid;
|
|
grid-template-columns: [image-start banes-start] 5rem [input-start bane-label-start] 2rem [header-start] 1fr [input-end header-end banes-end bane-label-end];
|
|
grid-template-rows: [image-start header-start] 2.5rem [header-end input-start] auto [input-end bane-label-start] auto [bane-label-end banes-start] 1fr [banes-end image-end];
|
|
gap: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor > * {
|
|
align-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor h3 {
|
|
grid-area: header;
|
|
justify-self: end;
|
|
align-self: end;
|
|
margin-right: 2rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .bane-label {
|
|
margin-left: 1rem;
|
|
grid-area: bane-label;
|
|
justify-self: start;
|
|
margin-bottom: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .image-container {
|
|
grid-area: image;
|
|
isolation: isolate;
|
|
place-self: start;
|
|
display: grid;
|
|
grid-template-areas: "content";
|
|
width: 7.25rem;
|
|
z-index: 10;
|
|
color: var(--lm-fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .image-container > * {
|
|
grid-area: content;
|
|
place-self: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .image-container img {
|
|
width: initial;
|
|
height: auto;
|
|
z-index: -1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .image-container input {
|
|
height: 100%;
|
|
width: 100%;
|
|
font-size: 1.5rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .armor__row:nth-child(odd) .bane-label {
|
|
margin-left: 0.5rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .armor__row:nth-child(odd) .image-container input {
|
|
position: relative;
|
|
top: -0.25rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .--parchment {
|
|
grid-area: input;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .--parchment input {
|
|
padding-left: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .armor__row:nth-child(even) .--parchment input {
|
|
padding-left: var(--normal-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .armor .banes {
|
|
justify-content: end;
|
|
grid-area: banes;
|
|
margin-top: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .weapons {
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol {
|
|
justify-self: end;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: var(--half-gap);
|
|
position: sticky;
|
|
top: 40px;
|
|
z-index: 1000;
|
|
padding-block: var(--half-gap);
|
|
filter: drop-shadow(0px 0px 2px rgb(38, 57, 77)) drop-shadow(0px 0px 5px rgb(38, 57, 77)) drop-shadow(0px 0px 10px rgb(38, 57, 77));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__header .tabs__nav-list {
|
|
margin: 0;
|
|
align-items: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .toggle-disabled {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster {
|
|
display: grid;
|
|
gap: var(--big-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .stat-row {
|
|
--rowOpacity: 0.1;
|
|
padding: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .stat-row:first-child {
|
|
border-top: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .stat-row:last-child {
|
|
border-bottom: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .stat-row:not(:last-child) {
|
|
border-bottom: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .stat-row:not(:first-child) {
|
|
border-top: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .stat-row:nth-child(odd) {
|
|
background-color: rgba(120 120 120/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .stat-row:nth-child(even) {
|
|
background-color: rgba(255 255 255/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster [aria-level="1"] {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .monster-description-span {
|
|
white-space: pre-wrap;
|
|
display: inline;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--monster .repcontainer .label {
|
|
display: inline;
|
|
margin-inline: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-stats {
|
|
justify-self: end;
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-stats > .collapse {
|
|
right: var(--normal-gap);
|
|
top: var(--normal-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-stats .input-label {
|
|
color: var(--lm-fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-stats .repitem .collapsed {
|
|
display: block !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-stats .display-control--custom[value="15"] + .controlled-display {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .display-control--default[type=hidden][value="0"] + .controlled-display {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks {
|
|
padding-top: 1.5em;
|
|
padding-bottom: 1em;
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .input-label {
|
|
width: auto !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem {
|
|
--rowOpacity: 0.1;
|
|
padding: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem:first-child {
|
|
border-top: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem:last-child {
|
|
border-bottom: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem:not(:last-child) {
|
|
border-bottom: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem:not(:first-child) {
|
|
border-top: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem:nth-child(odd) {
|
|
background-color: rgba(120 120 120/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem:nth-child(even) {
|
|
background-color: rgba(255 255 255/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .collapsed .subtable-list .subtable-row {
|
|
--rowOpacity: 0.1;
|
|
padding: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .collapsed .subtable-list .subtable-row:first-child {
|
|
border-top: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .collapsed .subtable-list .subtable-row:last-child {
|
|
border-bottom: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .collapsed .subtable-list .subtable-row:not(:last-child) {
|
|
border-bottom: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .collapsed .subtable-list .subtable-row:not(:first-child) {
|
|
border-top: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .collapsed .subtable-list .subtable-row:nth-child(odd) {
|
|
background-color: rgba(120 120 120/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .collapsed .subtable-list .subtable-row:nth-child(even) {
|
|
background-color: rgba(255 255 255/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem li::marker {
|
|
content: "";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .expanded.expanded .number {
|
|
width: 3rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .expanded.expanded ul {
|
|
padding-left: var(--normal-gap);
|
|
padding-right: var(--normal-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .expanded.expanded .subtable-row {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr 1fr;
|
|
gap: var(--tiny-gap);
|
|
position: relative;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .expanded.expanded .subtable-row > :first-child {
|
|
padding-left: var(--normal-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .expanded.expanded .subtable-row:before {
|
|
position: absolute;
|
|
left: var(--half-gap);
|
|
top: -2px;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--monster-attacks .repcontainer > .repitem > .expanded.expanded .subtable-row .section--monster-sub-attacks__description {
|
|
grid-column: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--settings section {
|
|
flex: 1 1;
|
|
min-width: min-content;
|
|
justify-content: space-around;
|
|
align-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--settings section > h2, body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--settings section.input-label:not(.stacked).large > [name] {
|
|
width: 100%;
|
|
align-self: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .tabs--dragonbane__container--settings section > label {
|
|
width: content;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm {
|
|
margin-top: var(--normal-gap);
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
place-content: center;
|
|
padding-block: 2em 1.5em !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .initiative-control {
|
|
position: absolute;
|
|
top: -0.6em;
|
|
z-index: 1000;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .initiative-control.reset {
|
|
right: calc(50% - 6em);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .initiative-control.draw {
|
|
left: calc(50% - 6em);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontrol {
|
|
justify-self: end;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer {
|
|
display: block;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer .roller {
|
|
display: inline;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem {
|
|
--rowOpacity: 0.1;
|
|
padding: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem:first-child {
|
|
border-top: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem:last-child {
|
|
border-bottom: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem:not(:last-child) {
|
|
border-bottom: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem:not(:first-child) {
|
|
border-top: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem:nth-child(odd) {
|
|
background-color: rgba(120 120 120/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem:nth-child(even) {
|
|
background-color: rgba(255 255 255/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem .collapsed .subtable-list subtable-row {
|
|
--rowOpacity: 0.1;
|
|
padding: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem .collapsed .subtable-list subtable-row:first-child {
|
|
border-top: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem .collapsed .subtable-list subtable-row:last-child {
|
|
border-bottom: 2px solid var(--accentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem .collapsed .subtable-list subtable-row:not(:last-child) {
|
|
border-bottom: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem .collapsed .subtable-list subtable-row:not(:first-child) {
|
|
border-top: 1px solid var(--lightAccentColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem .collapsed .subtable-list subtable-row:nth-child(odd) {
|
|
background-color: rgba(120 120 120/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer > .repitem .collapsed .subtable-list subtable-row:nth-child(even) {
|
|
background-color: rgba(255 255 255/var(--rowOpacity));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points {
|
|
--gridColumnWidth: 270px;
|
|
display: grid;
|
|
align-content: start;
|
|
grid-template-columns: repeat(auto-fit, minmax(var(--gridColumnWidth), 1fr));
|
|
gap: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=section] {
|
|
container-type: inline-size;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points .section--rest {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points .section--rest label {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
gap: 0.5em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] {
|
|
box-sizing: border-box;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
display: grid;
|
|
grid-template-columns: 25cqw 2fr;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-areas: "title title" "max current";
|
|
aspect-ratio: 950/300;
|
|
padding: 4cqw 6cqw;
|
|
filter: var(--fx-shadow);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate][class*=willpower] {
|
|
background-image: var(--img-plate-willpower);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate][class*=willpower] .fill-left input {
|
|
filter: invert(0.5) brightness(1.5) sepia(1) saturate(3) hue-rotate(100deg);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate][class*=health] {
|
|
background-image: var(--img-plate-hp);
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate][class*=health] .fill-left input {
|
|
filter: invert(0.5) brightness(1.5) sepia(1) saturate(3) hue-rotate(320deg);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] h3 {
|
|
grid-area: title;
|
|
text-align: left;
|
|
color: var(--dm-fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .scores {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 1.25em;
|
|
line-height: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .scores::after {
|
|
content: "/";
|
|
color: var(--accentColor);
|
|
order: 2;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .scores input {
|
|
place-self: center;
|
|
border: 0;
|
|
padding: 0;
|
|
width: 2ch;
|
|
text-align: right;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .scores input:nth-of-type(2) {
|
|
order: 3;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="0"] + .fill-left input:nth-child(2), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="0"] + .fill-left input:nth-child(2) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="1"] + .fill-left input:nth-child(3), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="1"] + .fill-left input:nth-child(3) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="2"] + .fill-left input:nth-child(4), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="2"] + .fill-left input:nth-child(4) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="3"] + .fill-left input:nth-child(5), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="3"] + .fill-left input:nth-child(5) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="4"] + .fill-left input:nth-child(6), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="4"] + .fill-left input:nth-child(6) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="5"] + .fill-left input:nth-child(7), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="5"] + .fill-left input:nth-child(7) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="6"] + .fill-left input:nth-child(8), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="6"] + .fill-left input:nth-child(8) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="7"] + .fill-left input:nth-child(9), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="7"] + .fill-left input:nth-child(9) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="8"] + .fill-left input:nth-child(10), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="8"] + .fill-left input:nth-child(10) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="9"] + .fill-left input:nth-child(11), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="9"] + .fill-left input:nth-child(11) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="10"] + .fill-left input:nth-child(12), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="10"] + .fill-left input:nth-child(12) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="11"] + .fill-left input:nth-child(13), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="11"] + .fill-left input:nth-child(13) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="12"] + .fill-left input:nth-child(14), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="12"] + .fill-left input:nth-child(14) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="13"] + .fill-left input:nth-child(15), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="13"] + .fill-left input:nth-child(15) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="14"] + .fill-left input:nth-child(16), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="14"] + .fill-left input:nth-child(16) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="15"] + .fill-left input:nth-child(17), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="15"] + .fill-left input:nth-child(17) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="16"] + .fill-left input:nth-child(18), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="16"] + .fill-left input:nth-child(18) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="17"] + .fill-left input:nth-child(19), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="17"] + .fill-left input:nth-child(19) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="18"] + .fill-left input:nth-child(20), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="18"] + .fill-left input:nth-child(20) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="19"] + .fill-left input:nth-child(21), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="19"] + .fill-left input:nth-child(21) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="20"] + .fill-left input:nth-child(22), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] input[type=hidden][value="20"] + .fill-left input:nth-child(22) ~ input {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left {
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
grid-template-rows: 1fr 1fr;
|
|
gap: 2cqw 0;
|
|
padding-right: 2.5cqw;
|
|
--fillLeftSelectedColor: var(--elementColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input {
|
|
position: relative;
|
|
--background: var(--img-point1);
|
|
background: var(--background);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(5n+1) {
|
|
--background: var(--img-point2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(5n+2) {
|
|
--background: var(--img-point3);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(5n+3) {
|
|
--background: var(--img-point4);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(5n+4) {
|
|
--background: var(--img-point5);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(6), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(16) {
|
|
margin-right: 2cqw;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(7), body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input:nth-child(17) {
|
|
margin-left: 2cqw;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left input.fill-left__radio:checked ~ input, body .ui-dialog .tab-content .charsheet .section--points [class^=plate] .fill-left .fill-left__radio[type=hidden][value="0"] ~ input {
|
|
filter: invert(0.8);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points .death-saves {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
top: -1em;
|
|
padding: 1em 1em 0.75em 1em;
|
|
margin: 0 0.5em;
|
|
background: var(--img-field-parchment);
|
|
background-size: cover;
|
|
background-position: bottom center;
|
|
filter: var(--fx-shadow);
|
|
z-index: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points .death-saves button::before {
|
|
content: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points .death-saves [class^=death-saves] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points .death-saves [class^=death-saves] .fill-left {
|
|
--fillLeftSelectedColor: none;
|
|
display: flex;
|
|
gap: 0.25em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--points .death-saves [class^=death-saves] .fill-left input::before {
|
|
width: calc(var(--checkboxWidth) - 0.1em);
|
|
height: calc(var(--checkboxWidth) - 0.1em);
|
|
}
|
|
@container charsheet (max-width: 550px) {
|
|
body .ui-dialog .tab-content .charsheet .section--points {
|
|
--gridColumnWidth: 230px;
|
|
}
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--normal-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontainer:empty + .repcontrol {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontrol {
|
|
justify-content: end;
|
|
padding-right: var(--tiny-gap);
|
|
margin-top: var(--half-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontrol_add {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .repcontrol_edit:before {
|
|
content: "sort";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm ul {
|
|
margin: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .card {
|
|
font-size: var(--size3);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .hold {
|
|
gap: var(--tiny-gap);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .btn-danger {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm .subtable-row {
|
|
align-items: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .section--gm ::marker {
|
|
content: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .deck {
|
|
outline: 1px solid black;
|
|
width: 8rem;
|
|
color: var(--fontColor);
|
|
background-image: var(--lm-img-background-trunk);
|
|
background-size: 100%;
|
|
align-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .deck span {
|
|
margin-left: var(--half-gap);
|
|
order: -1;
|
|
align-self: start;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .deck:before {
|
|
content: "" !important;
|
|
display: block;
|
|
height: 10rem;
|
|
width: 100%;
|
|
rotate: 45deg;
|
|
margin-block: -1.5rem;
|
|
background-image: url("https://files.d20.io/images/354907880/XwVnAkcifiWJYUi7CExF2w/original.png?169220761055");
|
|
background-size: contain;
|
|
background-position: top center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .colon:not(:empty):after {
|
|
content: ":";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .align-items-end {
|
|
align-items: end;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .disabled {
|
|
display: none !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet button[type=roll]:before {
|
|
content: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h1 {
|
|
white-space: pre-wrap;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label,
|
|
body .ui-dialog .tab-content .charsheet select {
|
|
font-size: inherit;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet label option,
|
|
body .ui-dialog .tab-content .charsheet select option {
|
|
background-color: var(--backColor);
|
|
color: var(--fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet [hidden] {
|
|
display: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .number {
|
|
width: 3rem;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fill-left__radio[type=hidden][value="0"] ~ .fill-left__radio {
|
|
background-color: transparent;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .thin-border {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--borderColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .thick-border {
|
|
border-width: var(--tiny-gap);
|
|
border-style: solid;
|
|
border-color: var(--borderColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .circle {
|
|
border-radius: 100%;
|
|
aspect-ratio: 1/1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h2, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet [aria-level="2"],
|
|
body .ui-dialog .tab-content .charsheet h3, body .ui-dialog .tab-content .charsheet [aria-level="3"],
|
|
body .ui-dialog .tab-content .charsheet h4, body .ui-dialog .tab-content .charsheet [aria-level="4"] {
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
color: var(--accentColor);
|
|
white-space: pre-wrap;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h3, body .ui-dialog .tab-content .charsheet [aria-level="3"] {
|
|
font-size: 0.8em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet h4, body .ui-dialog .tab-content .charsheet [aria-level="4"] {
|
|
font-size: 0.6em;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input {
|
|
line-height: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .underline {
|
|
--underline: var(--img-underline);
|
|
background: var(--underline) repeat-x;
|
|
background-size: 100% 5px;
|
|
background-position: 0 calc(100% - 2px);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .underline:nth-of-type(even) {
|
|
--underline: var(--img-underline2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .underline:nth-of-type(3n) {
|
|
--underline: var(--img-underline3);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :is(label, label label) {
|
|
color: var(--fontColor);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .collapse {
|
|
z-index: 10000;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio),
|
|
body .ui-dialog .tab-content .charsheet .diamond {
|
|
--checkboxWidth: 0.6em;
|
|
filter: drop-shadow(0 -1px 2px var(--accentColor));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio).--outset,
|
|
body .ui-dialog .tab-content .charsheet .diamond.--outset {
|
|
filter: drop-shadow(0 1px 2px var(--accentColor));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio)::after, body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio)::before,
|
|
body .ui-dialog .tab-content .charsheet .diamond::after,
|
|
body .ui-dialog .tab-content .charsheet .diamond::before {
|
|
content: "" !important;
|
|
grid-area: content;
|
|
place-self: center !important;
|
|
position: absolute;
|
|
width: var(--checkboxWidth);
|
|
height: var(--checkboxWidth);
|
|
border: 1px solid var(--lm-fontColor);
|
|
border-radius: 0.1em;
|
|
background-color: var(--dm-fontColor);
|
|
transition: background-color 0.2s ease-in-out;
|
|
rotate: 45deg;
|
|
z-index: -1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked::before,
|
|
body .ui-dialog .tab-content .charsheet .diamond:checked::before {
|
|
border: none;
|
|
border-radius: 0 5px;
|
|
background: var(--checkColor);
|
|
width: calc(var(--checkboxWidth) - 0.2em);
|
|
height: calc(var(--checkboxWidth) - 0.2em);
|
|
content: "";
|
|
z-index: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .fill-left__radio.diamond::before {
|
|
border: none;
|
|
border-radius: 0 5px;
|
|
background: var(--checkColor);
|
|
width: calc(var(--checkboxWidth) - 0.2em);
|
|
height: calc(var(--checkboxWidth) - 0.2em);
|
|
content: "";
|
|
z-index: 1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :is(.fill-left__radio.diamond:checked, .fill-left__radio[value="0"]) ~ .fill-left__radio.diamond {
|
|
--checkboxWidth: 0.6em;
|
|
filter: drop-shadow(0 -1px 2px var(--accentColor));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :is(.fill-left__radio.diamond:checked, .fill-left__radio[value="0"]) ~ .fill-left__radio.diamond.--outset {
|
|
filter: drop-shadow(0 1px 2px var(--accentColor));
|
|
}
|
|
body .ui-dialog .tab-content .charsheet :is(.fill-left__radio.diamond:checked, .fill-left__radio[value="0"]) ~ .fill-left__radio.diamond::after, body .ui-dialog .tab-content .charsheet :is(.fill-left__radio.diamond:checked, .fill-left__radio[value="0"]) ~ .fill-left__radio.diamond::before {
|
|
content: "" !important;
|
|
grid-area: content;
|
|
place-self: center !important;
|
|
position: absolute;
|
|
width: var(--checkboxWidth);
|
|
height: var(--checkboxWidth);
|
|
border: 1px solid var(--lm-fontColor);
|
|
border-radius: 0.1em;
|
|
background-color: var(--dm-fontColor);
|
|
transition: background-color 0.2s ease-in-out;
|
|
rotate: 45deg;
|
|
z-index: -1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol {
|
|
display: flex;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_edit {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
color: transparent;
|
|
font-size: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_edit::before {
|
|
color: var(--dm-fontColor);
|
|
font-family: var(--font-icon-outlined);
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
border-radius: 100%;
|
|
padding: 0.4em;
|
|
background: var(--img-round-button);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
width: 20px;
|
|
content: "label_off";
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_edit::before.round-button--no-image {
|
|
background: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_edit::before:hover {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_edit:hover::before {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontainer.editmode ~ .repcontrol button::after {
|
|
position: absolute;
|
|
content: "";
|
|
inset: -2px;
|
|
top: -1px;
|
|
border: 3px solid var(--elementColor);
|
|
border-style: dashed;
|
|
border-radius: 100%;
|
|
aspect-ratio: 1/1;
|
|
animation: spin 10s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container {
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-areas: "header header" "repcontainer repcontainer" "edit add";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container > * {
|
|
grid-column: 1/-1;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container .repcontrol {
|
|
grid-area: edit;
|
|
align-self: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repeating-container .repcontrol-button--add {
|
|
grid-area: add;
|
|
align-self: center;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_add {
|
|
width: auto;
|
|
height: auto;
|
|
font-size: 0;
|
|
margin: 0;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_add::before {
|
|
color: var(--dm-fontColor);
|
|
font-family: var(--font-icon-outlined);
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
border-radius: 100%;
|
|
padding: 0.4em;
|
|
background: var(--img-round-button);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
width: 20px;
|
|
content: "new_label";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_add::before.round-button--no-image {
|
|
background: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_add::before:hover {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol_add:hover::before {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add:before {
|
|
color: var(--dm-fontColor);
|
|
font-family: var(--font-icon-outlined);
|
|
font-size: 20px;
|
|
font-weight: 200;
|
|
line-height: 1;
|
|
border-radius: 100%;
|
|
padding: 0.4em;
|
|
background: var(--img-round-button);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: 20px;
|
|
width: 20px;
|
|
content: "new_label";
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add:before.round-button--no-image {
|
|
background: none;
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add:before:hover {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body .ui-dialog .tab-content .charsheet .repcontrol-button--add:hover::before {
|
|
filter: hue-rotate(-160deg) brightness(1.5) saturate(2);
|
|
}
|
|
body.sheet-darkmode {
|
|
--backColor:var(--dm-backColor);
|
|
--selectedColor:var(--dm-selectedColor);
|
|
--unselectedColor1:var(--dm-unselectedColor1);
|
|
--unselectedColor1:var(--dm-unselectedColor2);
|
|
--checkColor:var(--dm-checkColor);
|
|
--borderColor:var(--dm-borderColor);
|
|
--fontColor:var(--dm-fontColor);
|
|
--disabledColor:var(--dm-disabledColor);
|
|
--fontColor:var(--dm-fontColor);
|
|
--selectedTextColor: var(--dm-selectedTextColor);
|
|
--img-background-trunk: var(--dm-img-background-trunk);
|
|
--img-underline: var(--img-underline-dm);
|
|
--img-underline2: var(--img-underline2-dm);
|
|
--img-underline3: var(--img-underline3-dm);
|
|
--attributeGradientOuter: var(--dm-attributeGradientOuter);
|
|
--elementColor: var(--dm-elementColor);
|
|
--collapseExpandedColor:var(--dm-collapseExpandedColor);
|
|
color: var(--fontColor);
|
|
}
|
|
body .containerWrapper {
|
|
container-type: inline-size;
|
|
}
|
|
body [hidden] {
|
|
display: none !important;
|
|
}
|
|
body .test {
|
|
outline: 2px solid red;
|
|
outline-offset: 1em;
|
|
display: none;
|
|
}
|
|
|
|
.tabs--dragonbane__container--pc {
|
|
display: grid;
|
|
gap: 0 0.2em;
|
|
grid-template-columns: 25% 1fr 25%;
|
|
grid-template-areas: "header header header" "attributes attributes attributes" "attributes_secondaries attributes_secondaries attributes_secondaries" "abilities skills inventory" "wealth skills inventory" "bottom bottom bottom";
|
|
align-items: start;
|
|
}
|
|
.tabs--dragonbane__container--pc header {
|
|
grid-area: header;
|
|
}
|
|
.tabs--dragonbane__container--pc .section--attributes {
|
|
grid-area: attributes;
|
|
}
|
|
.tabs--dragonbane__container--pc .section--attributes_secondaries {
|
|
grid-area: attributes_secondaries;
|
|
}
|
|
.tabs--dragonbane__container--pc .section--skills {
|
|
grid-area: skills;
|
|
}
|
|
.tabs--dragonbane__container--pc .section--inventory {
|
|
grid-area: inventory;
|
|
}
|
|
.tabs--dragonbane__container--pc .section--abilities {
|
|
grid-area: abilities;
|
|
}
|
|
.tabs--dragonbane__container--pc .section--wealth {
|
|
grid-area: wealth;
|
|
}
|
|
.tabs--dragonbane__container--pc .bottom {
|
|
grid-area: bottom;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr;
|
|
gap: var(--half-gap);
|
|
grid-template-areas: "armor points" "weapon points";
|
|
}
|
|
.tabs--dragonbane__container--pc .section--points {
|
|
grid-area: points;
|
|
}
|
|
|
|
@media (max-width: 890px) {
|
|
.tabs--dragonbane__container--pc {
|
|
display: grid;
|
|
grid-template-columns: 40% 1fr;
|
|
grid-template-areas: "header header" "attributes attributes" "attributes_secondaries attributes_secondaries" "abilities skills" "inventory skills" "wealth skills" "bottom bottom";
|
|
}
|
|
.tabs--dragonbane__container--pc .bottom {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "points" "armor" "weapon";
|
|
}
|
|
} |