@import url("https://fonts.googleapis.com/css?family=IM+Fell+English+SC|Trade+Winds|Material+Icons&display=swap"); .ui-dialog .tab-content .charsheet select, .ui-dialog .tab-content .charsheet textarea, .ui-dialog .tab-content .charsheet input, .ui-dialog .tab-content .charsheet .uneditable-input, .ui-dialog .tab-content .charsheet label, .ui-dialog .tab-content .charsheet button { all: initial; } .tabs .tabs__container:not(.k-active-tab) { display: none !important; } .sheet-rolltemplate-backbone .text-collapse:before, .ui-dialog .tab-content .charsheet .text-collapse:before, .sheet-rolltemplate-backbone .sheet-material-icons, .ui-dialog .tab-content .charsheet .sheet-material-icons, .sheet-rolltemplate-backbone .material-icons, .ui-dialog .tab-content .charsheet .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: "liga"; } .sheet-rolltemplate-backbone .sheet-pictos, .ui-dialog .tab-content .charsheet .sheet-pictos, .sheet-rolltemplate-backbone .pictos, .ui-dialog .tab-content .charsheet .pictos { font-family: pictos; text-transform: none; } .sheet-rolltemplate-backbone .pictos3, .ui-dialog .tab-content .charsheet .pictos3, .sheet-rolltemplate-backbone .sheet-pictos3, .ui-dialog .tab-content .charsheet .sheet-pictos3 { font-family: pictos three; text-transform: none; } .sheet-rolltemplate-backbone .pictoscustom, .ui-dialog .tab-content .charsheet .pictoscustom, .sheet-rolltemplate-backbone .sheet-pictoscustom, .ui-dialog .tab-content .charsheet .sheet-pictoscustom { font-family: pictos custom; text-transform: none; } .sheet-rolltemplate-backbone .dicefontd20, .ui-dialog .tab-content .charsheet .dicefontd20, .sheet-rolltemplate-backbone .sheet-dicefontd20, .ui-dialog .tab-content .charsheet .sheet-dicefontd20 { font-family: dicefontd20; text-transform: none; } .sheet-rolltemplate-backbone .sheet-hidden, .ui-dialog .tab-content .charsheet .sheet-hidden, .sheet-rolltemplate-backbone .hidden, .ui-dialog .tab-content .charsheet .hidden, .sheet-rolltemplate-backbone *[hidden], .ui-dialog .tab-content .charsheet *[hidden] { display: none !important; } .sheet-rolltemplate-backbone span, .ui-dialog .tab-content .charsheet span, .sheet-rolltemplate-backbone input, .ui-dialog .tab-content .charsheet input, .sheet-rolltemplate-backbone textarea, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-backbone p, .ui-dialog .tab-content .charsheet p, .sheet-rolltemplate-backbone h5 *, .ui-dialog .tab-content .charsheet h5 *, .sheet-rolltemplate-backbone *[aria-level="5"] *, .ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-backbone h5, .ui-dialog .tab-content .charsheet h5, .sheet-rolltemplate-backbone *[aria-level="5"], .ui-dialog .tab-content .charsheet *[aria-level="5"], .ui-dialog .tab-content .charsheet .roller:not([role]) *, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .ui-dialog .tab-content .charsheet .styled-button--controlled * *, .sheet-rolltemplate-backbone h4 *, .ui-dialog .tab-content .charsheet h4 *, .sheet-rolltemplate-backbone *[aria-level="4"] *, .ui-dialog .tab-content .charsheet *[aria-level="4"] *, .ui-dialog .tab-content .charsheet .roller:not([role]), .ui-dialog .tab-content .charsheet .styled-button--controlled, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .sheet-rolltemplate-backbone h4, .ui-dialog .tab-content .charsheet h4, .sheet-rolltemplate-backbone *[aria-level="4"], .ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-backbone .sheet-content .inlinerollresult, .sheet-rolltemplate-backbone .big-text *, .ui-dialog .tab-content .charsheet .big-text *, .sheet-rolltemplate-backbone .sheet-big-text *, .ui-dialog .tab-content .charsheet .sheet-big-text *, .sheet-rolltemplate-backbone h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-backbone *[aria-level="3"] *, .ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-backbone .big-text, .ui-dialog .tab-content .charsheet .big-text, .sheet-rolltemplate-backbone .sheet-big-text, .ui-dialog .tab-content .charsheet .sheet-big-text, .sheet-rolltemplate-backbone h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-backbone *[aria-level="3"], .ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-backbone h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone *[aria-level="2"] *, .ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-backbone h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone *[aria-level="2"], .ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult *, .sheet-rolltemplate-backbone h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-backbone *[aria-level="1"] *, .ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult, .sheet-rolltemplate-backbone h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-backbone *[aria-level="1"], .ui-dialog .tab-content .charsheet *[aria-level="1"] { line-height: normal; } .sheet-rolltemplate-backbone .sheet-italics, .ui-dialog .tab-content .charsheet .sheet-italics, .sheet-rolltemplate-backbone .italics, .ui-dialog .tab-content .charsheet .italics { font-style: italic; } .sheet-rolltemplate-backbone h5 *, .ui-dialog .tab-content .charsheet h5 *, .sheet-rolltemplate-backbone *[aria-level="5"] *, .ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-backbone h5, .ui-dialog .tab-content .charsheet h5, .sheet-rolltemplate-backbone *[aria-level="5"], .ui-dialog .tab-content .charsheet *[aria-level="5"], .ui-dialog .tab-content .charsheet .roller:not([role]) *, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .ui-dialog .tab-content .charsheet .styled-button--controlled * *, .sheet-rolltemplate-backbone h4 *, .ui-dialog .tab-content .charsheet h4 *, .sheet-rolltemplate-backbone *[aria-level="4"] *, .ui-dialog .tab-content .charsheet *[aria-level="4"] *, .ui-dialog .tab-content .charsheet .roller:not([role]), .ui-dialog .tab-content .charsheet .styled-button--controlled, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .sheet-rolltemplate-backbone h4, .ui-dialog .tab-content .charsheet h4, .sheet-rolltemplate-backbone *[aria-level="4"], .ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-backbone .sheet-content .inlinerollresult, .sheet-rolltemplate-backbone .big-text *, .ui-dialog .tab-content .charsheet .big-text *, .sheet-rolltemplate-backbone .sheet-big-text *, .ui-dialog .tab-content .charsheet .sheet-big-text *, .sheet-rolltemplate-backbone h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-backbone *[aria-level="3"] *, .ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-backbone .big-text, .ui-dialog .tab-content .charsheet .big-text, .sheet-rolltemplate-backbone .sheet-big-text, .ui-dialog .tab-content .charsheet .sheet-big-text, .sheet-rolltemplate-backbone h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-backbone *[aria-level="3"], .ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-backbone h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone *[aria-level="2"] *, .ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-backbone h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone *[aria-level="2"], .ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult *, .sheet-rolltemplate-backbone h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-backbone *[aria-level="1"] *, .ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult, .sheet-rolltemplate-backbone h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-backbone *[aria-level="1"], .ui-dialog .tab-content .charsheet *[aria-level="1"] { color: var(--fontColor); white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; } .sheet-rolltemplate-backbone .sheet-content .inlinerollresult, .sheet-rolltemplate-backbone .big-text *, .ui-dialog .tab-content .charsheet .big-text *, .sheet-rolltemplate-backbone .sheet-big-text *, .ui-dialog .tab-content .charsheet .sheet-big-text *, .sheet-rolltemplate-backbone h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-backbone *[aria-level="3"] *, .ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-backbone .big-text, .ui-dialog .tab-content .charsheet .big-text, .sheet-rolltemplate-backbone .sheet-big-text, .ui-dialog .tab-content .charsheet .sheet-big-text, .sheet-rolltemplate-backbone h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-backbone *[aria-level="3"], .ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-backbone h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone *[aria-level="2"] *, .ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-backbone h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone *[aria-level="2"], .ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult *, .sheet-rolltemplate-backbone h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-backbone *[aria-level="1"] *, .ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult, .sheet-rolltemplate-backbone h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-backbone *[aria-level="1"], .ui-dialog .tab-content .charsheet *[aria-level="1"] { text-transform: uppercase; font-weight: normal; } .sheet-rolltemplate-backbone h5 :not(:where(input)), .ui-dialog .tab-content .charsheet h5 :not(:where(input)), .sheet-rolltemplate-backbone *[aria-level="5"] :not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="5"] :not(:where(input)), .sheet-rolltemplate-backbone h5:not(:where(input)), .ui-dialog .tab-content .charsheet h5:not(:where(input)), .sheet-rolltemplate-backbone [aria-level="5"]:not(:where(input)), .ui-dialog .tab-content .charsheet [aria-level="5"]:not(:where(input)), .ui-dialog .tab-content .charsheet .roller:not([role]) :not(:where(input)), .ui-dialog .tab-content .charsheet .styled-button--controlled :not(:where(input)), .sheet-rolltemplate-backbone h4 :not(:where(input)), .ui-dialog .tab-content .charsheet h4 :not(:where(input)), .sheet-rolltemplate-backbone *[aria-level="4"] :not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="4"] :not(:where(input)), .ui-dialog .tab-content .charsheet .roller:not(:where(input)):not([role]), .ui-dialog .tab-content .charsheet .styled-button--controlled:not(:where(input)), .sheet-rolltemplate-backbone h4:not(:where(input)), .ui-dialog .tab-content .charsheet h4:not(:where(input)), .sheet-rolltemplate-backbone [aria-level="4"]:not(:where(input)), .ui-dialog .tab-content .charsheet [aria-level="4"]:not(:where(input)) { text-transform: capitalize; } .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult *, .sheet-rolltemplate-backbone h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-backbone *[aria-level="1"] *, .ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult, .sheet-rolltemplate-backbone h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-backbone *[aria-level="1"], .ui-dialog .tab-content .charsheet *[aria-level="1"] { font-size: 1.5rem; font-family: var(--topHeaderFont); } .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult :not(input), .sheet-rolltemplate-backbone h1 :not(input), .ui-dialog .tab-content .charsheet h1 :not(input), .sheet-rolltemplate-backbone *[aria-level="1"] :not(input), .ui-dialog .tab-content .charsheet *[aria-level="1"] :not(input), .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult:not(input), .sheet-rolltemplate-backbone h1:not(input), .ui-dialog .tab-content .charsheet h1:not(input), .sheet-rolltemplate-backbone [aria-level="1"]:not(input), .ui-dialog .tab-content .charsheet [aria-level="1"]:not(input) { text-align: center; } .sheet-rolltemplate-backbone h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-backbone *[aria-level="2"] *, .ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-backbone h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .sheet-rolltemplate-backbone *[aria-level="2"], .ui-dialog .tab-content .charsheet *[aria-level="2"] { font-size: 1.375rem; font-family: var(--topHeaderFont); } .sheet-rolltemplate-backbone h2 :not(input), .ui-dialog .tab-content .charsheet h2 :not(input), .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name] :not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] :not(input), .sheet-rolltemplate-backbone *[aria-level="2"] :not(input), .ui-dialog .tab-content .charsheet *[aria-level="2"] :not(input), .sheet-rolltemplate-backbone h2:not(input), .ui-dialog .tab-content .charsheet h2:not(input), .sheet-rolltemplate-backbone .input-label:not(.stacked).large > [name]:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input), .sheet-rolltemplate-backbone [aria-level="2"]:not(input), .ui-dialog .tab-content .charsheet [aria-level="2"]:not(input) { text-align: center; } .sheet-rolltemplate-backbone .sheet-content .inlinerollresult, .sheet-rolltemplate-backbone .big-text *, .ui-dialog .tab-content .charsheet .big-text *, .sheet-rolltemplate-backbone .sheet-big-text *, .ui-dialog .tab-content .charsheet .sheet-big-text *, .sheet-rolltemplate-backbone h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-backbone *[aria-level="3"] *, .ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-backbone .big-text, .ui-dialog .tab-content .charsheet .big-text, .sheet-rolltemplate-backbone .sheet-big-text, .ui-dialog .tab-content .charsheet .sheet-big-text, .sheet-rolltemplate-backbone h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-backbone *[aria-level="3"], .ui-dialog .tab-content .charsheet *[aria-level="3"] { font-size: 1.25rem; font-family: var(--topHeaderFont); } .sheet-rolltemplate-backbone .sheet-content .inlinerollresult:not(input), .sheet-rolltemplate-backbone .big-text :not(input), .ui-dialog .tab-content .charsheet .big-text :not(input), .sheet-rolltemplate-backbone .sheet-big-text :not(input), .ui-dialog .tab-content .charsheet .sheet-big-text :not(input), .sheet-rolltemplate-backbone h3 :not(input), .ui-dialog .tab-content .charsheet h3 :not(input), .sheet-rolltemplate-backbone *[aria-level="3"] :not(input), .ui-dialog .tab-content .charsheet *[aria-level="3"] :not(input), .sheet-rolltemplate-backbone .big-text:not(input), .ui-dialog .tab-content .charsheet .big-text:not(input), .sheet-rolltemplate-backbone .sheet-big-text:not(input), .ui-dialog .tab-content .charsheet .sheet-big-text:not(input), .sheet-rolltemplate-backbone h3:not(input), .ui-dialog .tab-content .charsheet h3:not(input), .sheet-rolltemplate-backbone [aria-level="3"]:not(input), .ui-dialog .tab-content .charsheet [aria-level="3"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet .roller:not([role]) *, .ui-dialog .tab-content .charsheet .styled-button--controlled *, .sheet-rolltemplate-backbone h4 *, .ui-dialog .tab-content .charsheet h4 *, .sheet-rolltemplate-backbone *[aria-level="4"] *, .ui-dialog .tab-content .charsheet *[aria-level="4"] *, .ui-dialog .tab-content .charsheet .roller:not([role]), .ui-dialog .tab-content .charsheet .styled-button--controlled, .sheet-rolltemplate-backbone h4, .ui-dialog .tab-content .charsheet h4, .sheet-rolltemplate-backbone *[aria-level="4"], .ui-dialog .tab-content .charsheet *[aria-level="4"] { font-size: 1.125rem; font-family: var(--midHeaderFont); } .ui-dialog .tab-content .charsheet .roller:not([role]) :not(input), .ui-dialog .tab-content .charsheet .styled-button--controlled :not(input), .sheet-rolltemplate-backbone h4 :not(input), .ui-dialog .tab-content .charsheet h4 :not(input), .sheet-rolltemplate-backbone *[aria-level="4"] :not(input), .ui-dialog .tab-content .charsheet *[aria-level="4"] :not(input), .ui-dialog .tab-content .charsheet .roller:not(input):not([role]), .ui-dialog .tab-content .charsheet .styled-button--controlled:not(input), .sheet-rolltemplate-backbone h4:not(input), .ui-dialog .tab-content .charsheet h4:not(input), .sheet-rolltemplate-backbone [aria-level="4"]:not(input), .ui-dialog .tab-content .charsheet [aria-level="4"]:not(input) { text-align: center; } .sheet-rolltemplate-backbone h5 *, .ui-dialog .tab-content .charsheet h5 *, .sheet-rolltemplate-backbone *[aria-level="5"] *, .ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-backbone h5, .ui-dialog .tab-content .charsheet h5, .sheet-rolltemplate-backbone *[aria-level="5"], .ui-dialog .tab-content .charsheet *[aria-level="5"] { font-size: 1rem; font-style: normal; font-family: var(--midHeaderFont); } .sheet-rolltemplate-backbone h5 :not(input), .ui-dialog .tab-content .charsheet h5 :not(input), .sheet-rolltemplate-backbone *[aria-level="5"] :not(input), .ui-dialog .tab-content .charsheet *[aria-level="5"] :not(input), .sheet-rolltemplate-backbone h5:not(input), .ui-dialog .tab-content .charsheet h5:not(input), .sheet-rolltemplate-backbone [aria-level="5"]:not(input), .ui-dialog .tab-content .charsheet [aria-level="5"]:not(input) { text-align: center; } .sheet-rolltemplate-backbone span, .ui-dialog .tab-content .charsheet span, .sheet-rolltemplate-backbone input, .ui-dialog .tab-content .charsheet input, .sheet-rolltemplate-backbone textarea, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-backbone p, .ui-dialog .tab-content .charsheet p { font-size: 1rem; color: var(--fontColor); } .sheet-rolltemplate-backbone span, .ui-dialog .tab-content .charsheet span, .sheet-rolltemplate-backbone input, .ui-dialog .tab-content .charsheet input, .sheet-rolltemplate-backbone textarea, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-backbone button, .ui-dialog .tab-content .charsheet button, .sheet-rolltemplate-backbone select, .ui-dialog .tab-content .charsheet select { font-family: var(--contentFont); } .sheet-rolltemplate-backbone .tiny-text, .ui-dialog .tab-content .charsheet .tiny-text, .sheet-rolltemplate-backbone .sheet-tiny-text, .ui-dialog .tab-content .charsheet .sheet-tiny-text { font-size: 0.75rem; } .sheet-rolltemplate-backbone .uppercase, .ui-dialog .tab-content .charsheet .uppercase { text-transform: uppercase !important; } .ui-dialog .tab-content .charsheet .tabs > nav .tabs__button, .sheet-rolltemplate-backbone .text-collapse__check:not(:checked) + .text-collapse, .ui-dialog .tab-content .charsheet .text-collapse__check:not(:checked) + .text-collapse, .sheet-rolltemplate-backbone .control-button, .ui-dialog .tab-content .charsheet .control-button, .sheet-rolltemplate-backbone :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:hover, :focus, :focus-within), .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; } .sheet-rolltemplate-backbone .adaptive > span, .ui-dialog .tab-content .charsheet .adaptive > span, .sheet-rolltemplate-backbone select, .ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-backbone .pseudo-select span, .ui-dialog .tab-content .charsheet .pseudo-select span, .sheet-rolltemplate-backbone .sheet-pseudo-select span, .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, .sheet-rolltemplate-backbone input:not(:where([type=checkbox], [type=radio])), .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])), .sheet-rolltemplate-backbone .uneditable-input, .ui-dialog .tab-content .charsheet .uneditable-input, .sheet-rolltemplate-backbone textarea, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-backbone .underlined, .ui-dialog .tab-content .charsheet .underlined, .sheet-rolltemplate-backbone .sheet-underlined, .ui-dialog .tab-content .charsheet .sheet-underlined { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; } .sheet-rolltemplate-backbone .boxed, .ui-dialog .tab-content .charsheet .boxed, .sheet-rolltemplate-backbone .sheet-boxed, .ui-dialog .tab-content .charsheet .sheet-boxed { border: 2px solid var(--borderColor); border-radius: 0; box-sizing: border-box; } .sheet-rolltemplate-backbone .boxed.thick-left, .ui-dialog .tab-content .charsheet .boxed.thick-left, .sheet-rolltemplate-backbone .sheet-boxed.thick-left, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-left { border-left-width: 5px; } .sheet-rolltemplate-backbone .boxed.thick-bottom, .ui-dialog .tab-content .charsheet .boxed.thick-bottom, .sheet-rolltemplate-backbone .sheet-boxed.thick-bottom, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom { border-bottom-width: 5px; } .sheet-rolltemplate-backbone .boxed.thick-right, .ui-dialog .tab-content .charsheet .boxed.thick-right, .sheet-rolltemplate-backbone .sheet-boxed.thick-right, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-right { border-right-width: 5px; } .sheet-rolltemplate-backbone .boxed.thick-top, .ui-dialog .tab-content .charsheet .boxed.thick-top, .sheet-rolltemplate-backbone .sheet-boxed.thick-top, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-top { border-top-width: 5px; } .sheet-rolltemplate-backbone .underlined, .ui-dialog .tab-content .charsheet .underlined, .sheet-rolltemplate-backbone .sheet-underlined, .ui-dialog .tab-content .charsheet .sheet-underlined { border-radius: 0; border-bottom: 1px solid var(--borderColor); transition: var(--focusTrans); } .sheet-rolltemplate-backbone :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within), .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within) { background-color: var(--subHeadBackColor); } .sheet-rolltemplate-backbone .underlined--invisible, .ui-dialog .tab-content .charsheet .underlined--invisible { border-color: transparent !important; } .ui-dialog .tab-content .charsheet .styled-button { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; } .sheet-rolltemplate-backbone .repcontrol_edit:after, .ui-dialog .tab-content .charsheet .repcontrol_edit:after, .sheet-rolltemplate-backbone .repcontrol-button--add, .ui-dialog .tab-content .charsheet .repcontrol-button--add { background-color: rgba(220, 220, 220, 0.2); border-radius: 5px; box-shadow: 0 2px 4px black; border-width: 0; transition-property: box-shadow, backdrop-filter; transition-duration: 200ms; transition-timing-function: ease-out; backdrop-filter: blur(1px); overflow: hidden; } .sheet-rolltemplate-backbone .repcontrol_edit:is(:hover, :focus):after, .ui-dialog .tab-content .charsheet .repcontrol_edit:is(:hover, :focus):after, .sheet-rolltemplate-backbone .repcontrol-button--add:is(:hover, :focus), .ui-dialog .tab-content .charsheet .repcontrol-button--add:is(:hover, :focus) { background-color: rgba(133, 133, 133, 0.5019607843); box-shadow: 0 4px 6px black; backdrop-filter: blur(2px); } .sheet-rolltemplate-backbone .repcontrol_edit:active:after, .ui-dialog .tab-content .charsheet .repcontrol_edit:active:after, .sheet-rolltemplate-backbone .repcontrol-button--add:active, .ui-dialog .tab-content .charsheet .repcontrol-button--add:active { background-color: #858585; box-shadow: 0 1px 2px black; backdrop-filter: blur(0px); } .sheet-rolltemplate-backbone .repcontrol_edit:after, .ui-dialog .tab-content .charsheet .repcontrol_edit:after, .sheet-rolltemplate-backbone .repcontrol-button--add, .ui-dialog .tab-content .charsheet .repcontrol-button--add { padding: 5px 7px; } .sheet-rolltemplate-backbone button, .ui-dialog .tab-content .charsheet button { cursor: pointer; } .sheet-rolltemplate-backbone .roller, .ui-dialog .tab-content .charsheet .roller { display: flex; gap: var(--half-gap); align-items: center; } .sheet-rolltemplate-backbone .roller:before, .ui-dialog .tab-content .charsheet .roller:before { font-family: dicefontd20; content: "T"; } .sheet-rolltemplate-backbone .control-button, .ui-dialog .tab-content .charsheet .control-button { align-self: center; padding-inline: var(--tiny-gap); transition-property: background-color, color; transition-duration: var(--revealTime); transition-timing-function: ease; } .sheet-rolltemplate-backbone .control-button:hover, .ui-dialog .tab-content .charsheet .control-button:hover { background-color: var(--borderColor); color: var(--backColor); } .sheet-rolltemplate-backbone input:is([type=checkbox], [type=radio]):not(.collapse):not(.fill-left__radio):checked:before, .ui-dialog .tab-content .charsheet input:is([type=checkbox], [type=radio]):not(.collapse):not(.fill-left__radio):checked:before { content: "✓"; grid-area: content; font-weight: bold; place-self: start center; color: var(--checkColor); font-size: 1.5rem; line-height: 0.5rem; } .sheet-rolltemplate-backbone input, .ui-dialog .tab-content .charsheet input { width: auto; font-family: var(--topHeaderFont); } .sheet-rolltemplate-backbone input:placeholder, .ui-dialog .tab-content .charsheet input:placeholder { color: rgba(237, 237, 237, 0.5019607843); } .sheet-rolltemplate-backbone input.plus-control:not([value*="-"]) + span:before, .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before { content: "+"; } .sheet-rolltemplate-backbone input[readonly], .ui-dialog .tab-content .charsheet input[readonly] { border: 0; } .sheet-rolltemplate-backbone input:is([type=checkbox], [type=radio]), .ui-dialog .tab-content .charsheet input:is([type=checkbox], [type=radio]) { border: 1px solid var(--borderColor); cursor: pointer; -webkit-appearance: none; appearance: none; width: 14px; min-width: 14px; height: 14px; min-height: 14px; display: grid; grid-template-columns: 1fr; grid-template-areas: "content"; } .sheet-rolltemplate-backbone input[type=number], .ui-dialog .tab-content .charsheet input[type=number] { width: 3rem; -moz-appearance: textfield !important; text-align: center; } .sheet-rolltemplate-backbone input[type=number]::-webkit-inner-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, .sheet-rolltemplate-backbone input[type=number]::-webkit-outer-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .sheet-rolltemplate-backbone select, .ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-backbone .pseudo-select span, .ui-dialog .tab-content .charsheet .pseudo-select span, .sheet-rolltemplate-backbone .sheet-pseudo-select span, .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, .sheet-rolltemplate-backbone textarea, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-backbone input:not(:is([type=radio], [type=checkbox])), .ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])), .sheet-rolltemplate-backbone .uneditable-input, .ui-dialog .tab-content .charsheet .uneditable-input { padding: 2px; } .sheet-rolltemplate-backbone input:is([type=text], [type=number]), .ui-dialog .tab-content .charsheet input:is([type=text], [type=number]), .sheet-rolltemplate-backbone textarea, .ui-dialog .tab-content .charsheet textarea { cursor: auto; } .sheet-rolltemplate-backbone select, .ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-backbone .sheet-pseudo-select span, .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, .sheet-rolltemplate-backbone .pseudo-select span, .ui-dialog .tab-content .charsheet .pseudo-select span { -webkit-apperance: none; appearance: none; text-transform: capitalize; overflow: hidden !important; white-space: nowrap; text-overflow: ellipsis; text-align: center; color: var(--fontColor); } .sheet-rolltemplate-backbone textarea, .ui-dialog .tab-content .charsheet textarea { resize: vertical; white-space: pre-wrap; } .sheet-rolltemplate-backbone textarea.fixed, .ui-dialog .tab-content .charsheet textarea.fixed { resize: none; overflow: auto; } .sheet-rolltemplate-backbone .stacked.input-label, .ui-dialog .tab-content .charsheet .stacked.input-label { flex-direction: column; } .sheet-rolltemplate-backbone .stacked.center.input-label > *, .ui-dialog .tab-content .charsheet .stacked.center.input-label > * { text-align: center; } .sheet-rolltemplate-backbone .stacked.input-label > [name]:not([type=number]):not([type=checkbox]):not([type=radio]), .ui-dialog .tab-content .charsheet .stacked.input-label > [name]:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } .sheet-rolltemplate-backbone .input-label, .ui-dialog .tab-content .charsheet .input-label { display: inline-flex; gap: var(--half-gap); align-items: center; } .sheet-rolltemplate-backbone .input-label:not(.stacked) > input[type=text], .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > input[type=text] { flex: 1 1 0; } .sheet-rolltemplate-backbone .input-label:not(.stacked) > :not([name]), .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]) { flex: 0 0 auto; } .sheet-rolltemplate-backbone .input-label > :is(span, button), .ui-dialog .tab-content .charsheet .input-label > :is(span, button) { text-transform: capitalize; } .sheet-rolltemplate-backbone .input-label--dual, .ui-dialog .tab-content .charsheet .input-label--dual { grid-template-columns: 1fr auto 1fr; grid-template-areas: "over over over" "under under under"; } .sheet-rolltemplate-backbone .input-label--dual > span:last-of-type, .ui-dialog .tab-content .charsheet .input-label--dual > span:last-of-type { grid-column: 1/-1; } .sheet-rolltemplate-backbone .input-label--dual > input:not([type=number]):not([type=checkbox]):not([type=radio]), .ui-dialog .tab-content .charsheet .input-label--dual > input:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } .sheet-rolltemplate-backbone .input-label--dual > .slash, .ui-dialog .tab-content .charsheet .input-label--dual > .slash { line-height: 0rem; font-weight: normal; } .sheet-rolltemplate-backbone .collapse-container, .ui-dialog .tab-content .charsheet .collapse-container { position: relative; } .sheet-rolltemplate-backbone .text-collapse, .ui-dialog .tab-content .charsheet .text-collapse { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; } .sheet-rolltemplate-backbone .text-collapse:before, .ui-dialog .tab-content .charsheet .text-collapse:before { content: "unfold_less"; } .sheet-rolltemplate-backbone .text-collapse__text, .ui-dialog .tab-content .charsheet .text-collapse__text { display: inline; } .sheet-rolltemplate-backbone .text-collapse__check:checked + .text-collapse:before, .ui-dialog .tab-content .charsheet .text-collapse__check:checked + .text-collapse:before { content: "unfold_more"; } .sheet-rolltemplate-backbone .repitem:hover .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .collapse, .sheet-rolltemplate-backbone .repitem:hover .roll-container, .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, .sheet-rolltemplate-backbone .collapse-container:hover .collapse, .ui-dialog .tab-content .charsheet .collapse-container:hover .collapse, .sheet-rolltemplate-backbone .collapse-container:hover .roll-container, .ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container { opacity: 1; } .sheet-rolltemplate-backbone .repitem .collapse, .ui-dialog .tab-content .charsheet .repitem .collapse, .sheet-rolltemplate-backbone .collapse-container .collapse, .ui-dialog .tab-content .charsheet .collapse-container .collapse { opacity: 0; position: absolute; right: -10px; top: 0px; border: 0px solid black; border-radius: 0; color: var(--selectedColor); text-transform: none; background-color: transparent; } .sheet-rolltemplate-backbone .repitem .collapse:before, .ui-dialog .tab-content .charsheet .repitem .collapse:before, .sheet-rolltemplate-backbone .collapse-container .collapse:before, .ui-dialog .tab-content .charsheet .collapse-container .collapse:before { content: "y"; font-family: pictos; } .sheet-rolltemplate-backbone .repitem .collapse:checked, .ui-dialog .tab-content .charsheet .repitem .collapse:checked, .sheet-rolltemplate-backbone .collapse-container .collapse:checked, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked { color: var(--unselectedColor1); background-color: transparent; } .sheet-rolltemplate-backbone .repitem .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded, .sheet-rolltemplate-backbone .repitem .collapse:checked ~ .collapse-container .expanded, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container .expanded, .sheet-rolltemplate-backbone .collapse-container .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded, .sheet-rolltemplate-backbone .collapse-container .collapse:checked ~ .collapse-container .expanded, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container .expanded { display: none !important; } .sheet-rolltemplate-backbone .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .sheet-rolltemplate-backbone .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + * { display: none !important; } .sheet-rolltemplate-backbone .repitem .collapse:not(:checked) ~ .collapsed, .ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapsed, .sheet-rolltemplate-backbone .repitem .collapse:not(:checked) ~ .collapse-container .collapsed, .ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapse-container .collapsed, .sheet-rolltemplate-backbone .collapse-container .collapse:not(:checked) ~ .collapsed, .ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapsed, .sheet-rolltemplate-backbone .collapse-container .collapse:not(:checked) ~ .collapse-container .collapsed, .ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapse-container .collapsed { display: none !important; } .sheet-rolltemplate-backbone .repitem .collapse:hover, .ui-dialog .tab-content .charsheet .repitem .collapse:hover, .sheet-rolltemplate-backbone .collapse-container .collapse:hover, .ui-dialog .tab-content .charsheet .collapse-container .collapse:hover { color: var(--selectedColor); } .sheet-rolltemplate-backbone .repcontainer.editmode .collapse, .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse { display: none; } .sheet-rolltemplate-backbone .section-control:not(:checked) + .section-display, .ui-dialog .tab-content .charsheet .section-control:not(:checked) + .section-display { display: none !important; } .sheet-rolltemplate-backbone .empty-hider:is([value=""], :not([value])) + *, .ui-dialog .tab-content .charsheet .empty-hider:is([value=""], :not([value])) + * { display: none; } .sheet-rolltemplate-backbone .adaptive, .ui-dialog .tab-content .charsheet .adaptive { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; position: relative; } .sheet-rolltemplate-backbone .adaptive > *, .ui-dialog .tab-content .charsheet .adaptive > * { grid-area: content; } .sheet-rolltemplate-backbone .adaptive > span, .ui-dialog .tab-content .charsheet .adaptive > span { opacity: 0; z-index: -10; text-transform: initial; border-radius: 0px; } .sheet-rolltemplate-backbone .adaptive--text, .ui-dialog .tab-content .charsheet .adaptive--text { min-height: 4rem; } .sheet-rolltemplate-backbone .adaptive--text__span, .ui-dialog .tab-content .charsheet .adaptive--text__span { white-space: pre-wrap; padding: 2px; } .sheet-rolltemplate-backbone .adaptive--text__textarea, .ui-dialog .tab-content .charsheet .adaptive--text__textarea { width: 100%; height: 100%; resize: none; } .sheet-rolltemplate-backbone .adaptive--text__textarea, .ui-dialog .tab-content .charsheet .adaptive--text__textarea, .sheet-rolltemplate-backbone .adaptive--input__input, .ui-dialog .tab-content .charsheet .adaptive--input__input { position: absolute; } .sheet-rolltemplate-backbone .adaptive--input__input, .ui-dialog .tab-content .charsheet .adaptive--input__input { width: 100%; } .sheet-rolltemplate-backbone .adaptive--input__span, .ui-dialog .tab-content .charsheet .adaptive--input__span { padding: 2px; min-height: 1.5rem; } .sheet-rolltemplate-backbone .headed-textarea, .ui-dialog .tab-content .charsheet .headed-textarea { display: grid; grid-template-rows: auto 1fr; grid-template-columns: auto; grid-column: 1/-1; } .sheet-rolltemplate-backbone .headed-textarea :not(textarea):not(.adaptive), .ui-dialog .tab-content .charsheet .headed-textarea :not(textarea):not(.adaptive) { justify-self: start; } .sheet-rolltemplate-backbone .headed-textarea .headed-textarea__header, .ui-dialog .tab-content .charsheet .headed-textarea .headed-textarea__header { grid-area: initial; } .sheet-rolltemplate-backbone .repitem > input:not([type=checkbox]), .ui-dialog .tab-content .charsheet .repitem > input:not([type=checkbox]) { width: 100%; } .sheet-rolltemplate-backbone .repitem .headed-textarea, .ui-dialog .tab-content .charsheet .repitem .headed-textarea, .sheet-rolltemplate-backbone .repitem .description, .ui-dialog .tab-content .charsheet .repitem .description { grid-column: 1/-1; } .sheet-rolltemplate-backbone .repcontainer, .ui-dialog .tab-content .charsheet .repcontainer { display: grid; gap: var(--grid-gap); } .sheet-rolltemplate-backbone .repeating-container, .ui-dialog .tab-content .charsheet .repeating-container { display: grid; grid-template-areas: "header"; align-self: start; } .sheet-rolltemplate-backbone .repeating-container > .header, .ui-dialog .tab-content .charsheet .repeating-container > .header { grid-area: header; } .sheet-rolltemplate-backbone .repeating-container:is(:hover, :focus-within, :focus) .repcontrol_edit:after, .ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) .repcontrol_edit:after, .sheet-rolltemplate-backbone .repeating-container:is(:hover, :focus-within, :focus) .repcontrol-button, .ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) .repcontrol-button { opacity: 1; } .sheet-rolltemplate-backbone .repcontrol_edit, .ui-dialog .tab-content .charsheet .repcontrol_edit { visibility: hidden; text-transform: none; } .sheet-rolltemplate-backbone .repcontrol_edit:after, .ui-dialog .tab-content .charsheet .repcontrol_edit:after { opacity: 0; transition-property: opacity, background-color; transition-duration: var(--revealTime); font-family: pictos; visibility: visible; content: "p"; } .sheet-rolltemplate-backbone .repcontrol-button, .ui-dialog .tab-content .charsheet .repcontrol-button { grid-area: header; align-self: start; } .sheet-rolltemplate-backbone .repcontrol-button ~ .repcontrol, .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol { display: contents; } .sheet-rolltemplate-backbone .repcontrol-button ~ .repcontrol .repcontrol_edit, .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol .repcontrol_edit { grid-area: header; align-self: start; justify-self: end; display: flex; float: none; } .sheet-rolltemplate-backbone .repcontrol-button ~ .repcontrol .repcontrol_add, .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol .repcontrol_add { display: none !important; } .sheet-rolltemplate-backbone .repcontrol-button--add, .ui-dialog .tab-content .charsheet .repcontrol-button--add { justify-self: start; opacity: 0; transition-property: opacity, background-color; transition-duration: var(--revealTime); font-family: pictos; } .sheet-rolltemplate-backbone .repcontrol-button--add:before, .ui-dialog .tab-content .charsheet .repcontrol-button--add:before { font-family: pictos; content: "&"; } .ui-dialog .tab-content .charsheet .circle { border-radius: 50%; } .sheet-rolltemplate-backbone .ratio1-1, .ui-dialog .tab-content .charsheet .ratio1-1, .sheet-rolltemplate-backbone .sheet-ratio1-1, .ui-dialog .tab-content .charsheet .sheet-ratio1-1 { aspect-ratio: 1/1; } .sheet-rolltemplate-backbone .fill-left, .ui-dialog .tab-content .charsheet .fill-left { display: flex; align-self: center; box-sizing: border-box; } .sheet-rolltemplate-backbone .fill-left__radio, .ui-dialog .tab-content .charsheet .fill-left__radio { appearance: none; -webkit-appearance: none; background-color: var(--selectedColor); width: var(--fillLeftRadioWidth); height: var(--fillLeftRadioHeight); cursor: pointer; } .sheet-rolltemplate-backbone .fill-left__radio[data-value], .ui-dialog .tab-content .charsheet .fill-left__radio[data-value] { display: grid; grid-template-areas: "content"; place-items: center; } .sheet-rolltemplate-backbone .fill-left__radio[data-value] > *, .ui-dialog .tab-content .charsheet .fill-left__radio[data-value] > * { grid-area: content; } .sheet-rolltemplate-backbone .fill-left__radio[data-value]:checked:before, .ui-dialog .tab-content .charsheet .fill-left__radio[data-value]:checked:before { content: attr(data-value); color: var(--backColor); font-size: 1rem; place-self: center; text-transform: uppercase; } .sheet-rolltemplate-backbone .fill-left__radio:checked ~ .fill-left__radio, .ui-dialog .tab-content .charsheet .fill-left__radio:checked ~ .fill-left__radio { background-color: var(--unselectedColor2); } .sheet-rolltemplate-backbone .inline, .ui-dialog .tab-content .charsheet .inline, .sheet-rolltemplate-backbone .sheet-inline, .ui-dialog .tab-content .charsheet .sheet-inline { display: inline !important; } .sheet-rolltemplate-backbone .inline-flex-box, .ui-dialog .tab-content .charsheet .inline-flex-box, .sheet-rolltemplate-backbone .sheet-inline-flex-box, .ui-dialog .tab-content .charsheet .sheet-inline-flex-box { display: inline-flex !important; } .sheet-rolltemplate-backbone .flex-box, .ui-dialog .tab-content .charsheet .flex-box, .sheet-rolltemplate-backbone .sheet-flex-box, .ui-dialog .tab-content .charsheet .sheet-flex-box { display: flex; } .sheet-rolltemplate-backbone .flex-wrap, .ui-dialog .tab-content .charsheet .flex-wrap, .sheet-rolltemplate-backbone .sheet-flex-wrap, .ui-dialog .tab-content .charsheet .sheet-flex-wrap { flex-wrap: wrap; } .sheet-rolltemplate-backbone .justify-space-around, .ui-dialog .tab-content .charsheet .justify-space-around, .sheet-rolltemplate-backbone .sheet-justify-space-around, .ui-dialog .tab-content .charsheet .sheet-justify-space-around { justify-content: space-around; } .sheet-rolltemplate-backbone .justify-space-between, .ui-dialog .tab-content .charsheet .justify-space-between, .sheet-rolltemplate-backbone .sheet-justify-space-between, .ui-dialog .tab-content .charsheet .sheet-justify-space-between { justify-content: space-between; } .sheet-rolltemplate-backbone .justify-center, .ui-dialog .tab-content .charsheet .justify-center, .sheet-rolltemplate-backbone .sheet-justify-center, .ui-dialog .tab-content .charsheet .sheet-justify-center { justify-content: center; } .sheet-rolltemplate-backbone .stacked, .ui-dialog .tab-content .charsheet .stacked, .sheet-rolltemplate-backbone .sheet-stacked, .ui-dialog .tab-content .charsheet .sheet-stacked { flex-direction: column; } .sheet-rolltemplate-backbone .stacked.center, .ui-dialog .tab-content .charsheet .stacked.center, .sheet-rolltemplate-backbone .stacked.sheet-center, .ui-dialog .tab-content .charsheet .stacked.sheet-center, .sheet-rolltemplate-backbone .sheet-stacked.center, .ui-dialog .tab-content .charsheet .sheet-stacked.center, .sheet-rolltemplate-backbone .sheet-stacked.sheet-center, .ui-dialog .tab-content .charsheet .sheet-stacked.sheet-center { align-items: center; } .sheet-rolltemplate-backbone .stacked.center > *, .ui-dialog .tab-content .charsheet .stacked.center > *, .sheet-rolltemplate-backbone .sheet-stacked.sheet-stacked > *, .ui-dialog .tab-content .charsheet .sheet-stacked.sheet-stacked > * { text-align: center; } .sheet-rolltemplate-backbone .stacked:not(.center):not(.sheet-center), .ui-dialog .tab-content .charsheet .stacked:not(.center):not(.sheet-center), .sheet-rolltemplate-backbone .sheet-stacked:not(.center):not(.sheet-center), .ui-dialog .tab-content .charsheet .sheet-stacked:not(.center):not(.sheet-center) { align-items: start; } .sheet-rolltemplate-backbone .stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]), .ui-dialog .tab-content .charsheet .stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]), .sheet-rolltemplate-backbone .sheet-stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]), .ui-dialog .tab-content .charsheet .sheet-stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } .sheet-rolltemplate-backbone .span-2, .ui-dialog .tab-content .charsheet .span-2, .sheet-rolltemplate-backbone .sheet-span-2, .ui-dialog .tab-content .charsheet .sheet-span-2 { grid-column: span 2; } .sheet-rolltemplate-backbone .span-all, .ui-dialog .tab-content .charsheet .span-all, .sheet-rolltemplate-backbone .sheet-span-all, .ui-dialog .tab-content .charsheet .sheet-span-all { grid-column: 1/-1; } .sheet-rolltemplate-backbone .row-reverse, .ui-dialog .tab-content .charsheet .row-reverse, .sheet-rolltemplate-backbone .sheet-row-reverse, .ui-dialog .tab-content .charsheet .sheet-row-reverse { flex-direction: row-reverse; } .sheet-rolltemplate-backbone .column-reverse, .ui-dialog .tab-content .charsheet .column-reverse, .sheet-rolltemplate-backbone .sheet-column-reverse, .ui-dialog .tab-content .charsheet .sheet-column-reverse { flex-direction: column-reverse; } .sheet-rolltemplate-backbone .no-gap, .ui-dialog .tab-content .charsheet .no-gap, .sheet-rolltemplate-backbone .sheet-no-gap, .ui-dialog .tab-content .charsheet .sheet-no-gap { gap: 0; } .sheet-rolltemplate-backbone .gap, .ui-dialog .tab-content .charsheet .gap, .sheet-rolltemplate-backbone .sheet-gap, .ui-dialog .tab-content .charsheet .sheet-gap { gap: var(--grid-gap); } .sheet-rolltemplate-backbone .half-gap, .ui-dialog .tab-content .charsheet .half-gap, .sheet-rolltemplate-backbone .sheet-half-gap, .ui-dialog .tab-content .charsheet .sheet-half-gap { gap: var(--half-gap); } .sheet-rolltemplate-backbone .tiny-gap, .ui-dialog .tab-content .charsheet .tiny-gap, .sheet-rolltemplate-backbone .sheet-tiny-gap, .ui-dialog .tab-content .charsheet .sheet-tiny-gap { gap: var(--tiny-gap); } .sheet-rolltemplate-backbone .big-gap, .ui-dialog .tab-content .charsheet .big-gap, .sheet-rolltemplate-backbone .sheet-big-gap, .ui-dialog .tab-content .charsheet .sheet-big-gap { gap: var(--big-gap); } .sheet-rolltemplate-backbone .no-gap, .ui-dialog .tab-content .charsheet .no-gap, .sheet-rolltemplate-backbone .sheet-no-gap, .ui-dialog .tab-content .charsheet .sheet-no-gap { gap: 0; } .sheet-rolltemplate-backbone .flex-min-content, .ui-dialog .tab-content .charsheet .flex-min-content, .sheet-rolltemplate-backbone .sheet-flex-min-content, .ui-dialog .tab-content .charsheet .sheet-flex-min-content { flex: 1 1 min-content; } .sheet-rolltemplate-backbone input.flex-min-content, .ui-dialog .tab-content .charsheet input.flex-min-content, .sheet-rolltemplate-backbone input.sheet-flex-min-content, .ui-dialog .tab-content .charsheet input.sheet-flex-min-content { width: 0; } .sheet-rolltemplate-backbone .align-self-stretch, .ui-dialog .tab-content .charsheet .align-self-stretch, .sheet-rolltemplate-backbone .sheet-align-self-stretch, .ui-dialog .tab-content .charsheet .sheet-align-self-stretch { align-self: stretch; } .sheet-rolltemplate-backbone .align-self-start, .ui-dialog .tab-content .charsheet .align-self-start, .sheet-rolltemplate-backbone .sheet-align-self-start, .ui-dialog .tab-content .charsheet .sheet-align-self-start { align-self: start; } .sheet-rolltemplate-backbone .align-self-end, .ui-dialog .tab-content .charsheet .align-self-end, .sheet-rolltemplate-backbone .sheet-align-self-end, .ui-dialog .tab-content .charsheet .sheet-align-self-end { align-self: end; } .sheet-rolltemplate-backbone .align-items-center, .ui-dialog .tab-content .charsheet .align-items-center, .sheet-rolltemplate-backbone .sheet-align-items-center, .ui-dialog .tab-content .charsheet .sheet-align-items-center { align-items: center; } .sheet-rolltemplate-backbone .align-items-end, .ui-dialog .tab-content .charsheet .align-items-end, .sheet-rolltemplate-backbone .sheet-align-items-end, .ui-dialog .tab-content .charsheet .sheet-align-items-end { align-items: end; } .sheet-rolltemplate-backbone .flex-box > .span-all, .ui-dialog .tab-content .charsheet .flex-box > .span-all { width: 100%; } .sheet-rolltemplate-backbone .tall-2, .ui-dialog .tab-content .charsheet .tall-2 { grid-row: span 2; } .sheet-rolltemplate-backbone, .ui-dialog { --topHeaderFont:Arial; --midHeaderFont:Arial; --contentFont:Arial; } .sheet-rolltemplate-backbone, .ui-dialog { --grid-gap: 1rem; --half-gap: calc(var(--grid-gap) / 2); --tiny-gap: calc(var(--half-gap) / 2); --big-gap: calc(var(--grid-gap) * 2); --spanSectionColumn:1/-1; --fillLeftRadioSize: 1rem; --fillLeftRadioWidth:var(--fillLeftRadioSize); --fillLeftRadioHeight:var(--fillLeftRadioSize); --revealTime: 500ms; --delayTime: 200ms; --inputSwap: opacity var(--revealTime) ease var(--delayTime); --focusTiming: 500ms ease; --focusTrans: all var(--focusTiming); --borderColor: black; --fontColor: black; --backColor: #ffffff; --subHeadBackColor:grey; --unselectedColor1:lightgrey; --unselectedColor2:transparent; --selectedColor:black; --checkColor:black; --darkCheck:white; --displayBorderWidth: 2px; } .sheet-darkmode .ui-dialog { --borderColor: var(--dark-secondarytext); --fontColor: var(--dark-secondarytext); --backColor: var(--dark-surface1); --selectedColor:var(--fontColor); --subHeadBackColor:var(--dark-primary); --checkColor: var(--darkCheck); } .sheet-darkmode .ui-dialog img { filter: brightness(0.8) contrast(1.2); } .sheet-rolltemplate-backbone, .ui-dialog { --errorColor:red; --failCircle: url("https://s3.amazonaws.com/files.d20.io/images/318562209/I3x7bfc3_M_QcFnt8tV85Q/original.png?16710625345"); --successCircle: url("https://s3.amazonaws.com/files.d20.io/images/318562210/oX_VbZJwiNoujxFnSVumpA/original.png?16710625345"); --conditionIcon: url("https://s3.amazonaws.com/files.d20.io/images/318557936/fEiMDUb_UctEstYyXkKlEA/original.png?16710607145"); --heart:url("https://s3.amazonaws.com/files.d20.io/images/303476002/EGcfkMfeF7mIRowjCyVy-w/original.png?16625716925"); --boot:url("https://s3.amazonaws.com/files.d20.io/images/303476005/Ap6DSJSqAVUkpkEwmKazPA/original.png?16625716925"); --bolt:url("https://s3.amazonaws.com/files.d20.io/images/303476003/7La7gESx4Th7OYnkHc4u2Q/original.png?16625716925"); --flame:url("https://s3.amazonaws.com/files.d20.io/images/303476004/9l3GwDqA2PNTAULgIvC8EA/original.png?16625716915"); --armor:url("https://s3.amazonaws.com/files.d20.io/images/303476001/9BHZGaCcM8H3wbj2W23zdw/original.png?16625716925"); --skull: url("https://s3.amazonaws.com/files.d20.io/images/303477021/Vm1A4GWATnboxP65WqEW0A/original.png?16625722085"); --borderImageSource: url(https://s3.amazonaws.com/files.d20.io/images/312349470/ovngRYPae8cWAT9W489wJw/original.png?166741640555); --borderImageSlice: 175 fill; --maskSize: 20px; --shadowSize: 0px; --shadowBlur: 4px; --shadowColor: rgb(0 0 0 / 0.2); --shadowColor2: rgb(0 0 0 / 0.1); --topHeaderFont: "Trade Winds", cursive; --midHeaderFont: "IM Fell English SC"; --contentFont: "IM Fell English SC"; --radioSize:15px; --columnSize:370px; --imgInvert: invert(0); } html { font-size: 16px; } .ui-dialog .tab-content .charsheet { /* First of all we apply our default styles. Note that because we are using the placeholder, these styles would be first up in the cascade even if we put the extend declaration last. This is done first so that when we read the code, we can easily see that it is applied, and anything after it will overwrite those default styles. */ padding-top: 0; } .ui-dialog .tab-content .charsheet .repitem .roller:nth-last-child(3) { padding-right: var(--half-gap); } .ui-dialog .tab-content .charsheet .large-parentheses { align-items: center; font-size: 2rem; } .ui-dialog .tab-content .charsheet .fill-left__radio[data-value]:checked:before { font-family: var(--contentFont); } .ui-dialog .tab-content .charsheet .parentheses { font-family: var(--topHeaderFont); } .ui-dialog .tab-content .charsheet .text-center { text-align: center; } .ui-dialog .tab-content .charsheet .input-controls { display: grid; grid-template-columns: [input-start increment-start] auto [increment-end] 1fr [decrement-start] auto [input-end decrement-end]; grid-template-rows: [increment-start input-start decrement-start] auto [increment-end input-end decrement-end]; } .ui-dialog .tab-content .charsheet .input-controls > input { grid-area: input; } .ui-dialog .tab-content .charsheet .input-control--button { font-family: var(--topHeaderFont); z-index: 100; } .ui-dialog .tab-content .charsheet .input-control--button:first-of-type { grid-area: increment; } .ui-dialog .tab-content .charsheet .input-control--button:last-of-type { grid-area: decrement; } .ui-dialog .tab-content .charsheet .even-flow { gap: inherit; display: flex; } .ui-dialog .tab-content .charsheet .roller { display: flex; gap: var(--half-gap); align-items: center; } .ui-dialog .tab-content .charsheet .roller:before { font-family: dicefontd20; content: "T"; } .ui-dialog .tab-content .charsheet button { color: var(--fontColor); cursor: pointer; } .ui-dialog .tab-content .charsheet h3 { grid-area: header; } .ui-dialog .tab-content .charsheet .styled-button { background-color: var(--backColor); border: 0; border-radius: 0.5rem; box-sizing: border-box; cursor: pointer; transition-property: background-color, color; transition-duration: var(--revealTime); padding-inline: var(--half-gap); text-align: center; } .ui-dialog .tab-content .charsheet .styled-button:hover { background-color: var(--selectedColor); } .ui-dialog .tab-content .charsheet .styled-button:hover, .ui-dialog .tab-content .charsheet .styled-button:hover * { color: var(--dark-secondarytext); } .ui-dialog .tab-content .charsheet .styled-button:focus { outline: 2px solid transparent; outline-offset: 2px; } .ui-dialog .tab-content .charsheet .styled-button:focus-visible { box-shadow: none; } .ui-dialog .tab-content .charsheet .styled-button-control:is(:checked, [type=hidden]:not([value=""]):not([value="0"])) + .styled-button--controlled { background-color: var(--selectedColor); } .ui-dialog .tab-content .charsheet .styled-button-control:is(:checked, [type=hidden]:not([value=""]):not([value="0"])) + .styled-button--controlled, .ui-dialog .tab-content .charsheet .styled-button-control:is(:checked, [type=hidden]:not([value=""]):not([value="0"])) + .styled-button--controlled * { color: var(--dark-secondarytext); } .ui-dialog .tab-content .charsheet .parens-holder { display: flex; align-items: center; } .ui-dialog .tab-content .charsheet .parens-holder > .input-label { gap: 0; } .ui-dialog .tab-content .charsheet .parens-holder > .input-label span { font-size: 0.8rem; } .ui-dialog .tab-content .charsheet .stat-container { --shadowSize: 1px; border: 2px solid var(--fontColor); display: flex; flex-direction: column; align-items: center; break-inside: avoid; aspect-ratio: 1/1; justify-content: center; } .ui-dialog .tab-content .charsheet .stat-container:not(.circle) { border-radius: 20px; } .ui-dialog .tab-content .charsheet :is(.stat-container, .overlay-content) .input-label__text, .ui-dialog .tab-content .charsheet :is(.stat-container, .overlay-content) .roller { text-shadow: var(--shadowSize) 0 var(--backColor), calc(var(--shadowSize) * -1) 0 var(--backColor), 0px var(--shadowSize) var(--backColor), 0px calc(var(--shadowSize) * -1) var(--backColor); } .ui-dialog .tab-content .charsheet .overlay-content { display: grid; grid-template-areas: content; place-items: center; } .ui-dialog .tab-content .charsheet .overlay-content > * { grid-area: content !important; } .ui-dialog .tab-content .charsheet .overlay-content > .overlaid-content { z-index: 100; } .ui-dialog .tab-content .charsheet .basic-border { border: 2px solid var(--fontColor); } .ui-dialog .tab-content .charsheet .avoid-break { break-inside: avoid; } .ui-dialog .tab-content .charsheet article { position: relative; } .ui-dialog .tab-content .charsheet .text-check span { transition-duration: var(--revealTime); transition-property: color, background-color; } .ui-dialog .tab-content .charsheet .text-check > input:checked + span { background-color: var(--selectedColor); color: var(--backColor); } .ui-dialog .sheetform { background-color: var(--backColor); transition-property: background-color; transition-duration: var(--revealTime); } .sheet-darkmode .ui-dialog { --imgInvert:invert(0.9); } #main { display: grid; grid-area: content; } ul.nav-tabs.nav { position: sticky; top: 0; background-color: var(--backColor); z-index: 9999; margin-bottom: 0px; } .ui-dialog .tab-content .charsheet .tabs > nav { display: flex; flex-wrap: wrap; justify-content: end; align-items: start; gap: var(--half-gap); position: sticky; top: 44px; margin-bottom: 10px; padding-inline: 10px; padding-block: var(--half-gap); background-color: var(--backColor); z-index: 1000; transition-property: background-color; transition-duration: var(--revealTime); } .ui-dialog .tab-content .charsheet .tabs > nav .no-list { list-style: none; margin: 0; } .ui-dialog .tab-content .charsheet .tabs > nav button { color: var(--fontColor); } .ui-dialog .tab-content .charsheet .tabs > nav .tabs__button { font-size: 1.5rem; border-color: transparent; padding-inline: 0; transition-property: border-color, color, background-color, padding-inline; transition-duration: var(--revealTime); transition-timing-function: ease; } .ui-dialog .tab-content .charsheet .tabs > nav .tabs__button:not(.pictos) { font-family: var(--topHeaderFont); line-height: 1; } .ui-dialog .tab-content .charsheet .tabs > nav .tabs__button.k-active-button { color: var(--backColor); background-color: var(--borderColor); border-color: var(--borderColor); padding-inline: var(--tiny-gap); } .ui-dialog .tab-content .charsheet .tabs > nav .tabs__button.inactive { display: none !important; } .ui-dialog .tab-content .charsheet .tabs > nav .roll-options, .ui-dialog .tab-content .charsheet .tabs > nav .basic-moves { display: flex; flex-wrap: wrap; grid-gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .tabs > nav .basic-moves { justify-content: space-between; } .ui-dialog .tab-content .charsheet .tabs > nav .roll-options { grid-column: 1; justify-content: center; } #pc { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--columnSize), 1fr)); gap: var(--grid-gap); } #pc section { align-self: start; } #character-info { flex-basis: 100%; display: flex; flex-wrap: wrap; } #character-info > div { gap: var(--half-gap); } #character-info [aria-level="2"] { font-size: 1rem; } #character-info .input-label input { width: 50px; flex: 1 0 auto; } #character-info > :first-child { display: grid; grid-template-columns: 1fr 1fr; flex: 1; padding-right: var(--half-gap); margin-right: var(--half-gap); border-right: 1px solid var(--fontColor); } #character-info > :first-child > :first-child { grid-column: 1/-1; } #character-info > :nth-child(2) { flex: 2; display: grid; grid-template-columns: repeat(3, 1fr); } #character-info > :nth-child(2) > div { flex: 1 1 0px; } #basic-stats { grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--big-gap); } #basic-stats > div { flex: 1 0 200px; } #basic-stats > :is(.attributes, .characteristics) { display: flex; flex-wrap: wrap; gap: var(--half-gap); margin: 0; justify-content: center; } #basic-stats > :is(.attributes, .characteristics) .stat-container { box-sizing: border-box; } #basic-stats h2 { width: 100%; box-sizing: border-box; column-span: all; font-size: 1rem; } #basic-stats [aria-level="3"] { font-size: 0.8rem; } #basic-stats .stat-container { box-sizing: border-box; } #basic-stats .armor-movement { display: flex; flex-wrap: wrap; gap: var(--half-gap); align-items: center; justify-content: center; } #basic-stats .armor-details { width: 100%; } #basic-stats .armor-details span { font-size: 0.75rem; text-transform: capitalize; } .characteristics { flex-grow: 2; } .characteristics > .stat-container { width: 55px; } .attributes .stat-container { width: 70px; } .armor-movement > .stat-container { width: 70px; } .armor-movement .armor { position: relative; isolation: isolate; } .armor-movement .armor:before { border-radius: inherit; overflow: hidden; z-index: -1; filter: var(--imgInvert); content: ""; position: absolute; inset: 0; background-image: var(--armor); background-position: center; background-size: contain; background-repeat: no-repeat; } .armor-movement .movement { position: relative; isolation: isolate; } .armor-movement .movement:before { border-radius: inherit; overflow: hidden; z-index: -1; filter: var(--imgInvert); content: ""; position: absolute; inset: 0; background-image: var(--boot); background-position: center; background-size: contain; background-repeat: no-repeat; } .armor-movement .sprint { position: relative; isolation: isolate; } .armor-movement .sprint:before { border-radius: inherit; overflow: hidden; z-index: -1; filter: var(--imgInvert); content: ""; position: absolute; inset: 0; background-image: var(--bolt); background-position: center; background-size: contain; background-repeat: no-repeat; } #combat-stats { grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--big-gap); } #combat-stats [aria-level="3"], #combat-stats h3 { font-size: 0.8rem; } #combat-stats .health-container { display: flex; gap: var(--half-gap); height: 70px; } #combat-stats .luck-container { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; grid-template-areas: "header odd button" "header even button"; justify-items: end; column-gap: var(--tiny-gap); } #combat-stats .luck-container h3 { grid-area: header; writing-mode: vertical-rl; rotate: 180deg; } #combat-stats .luck-container button { grid-area: button; place-self: center; } #combat-stats .adrenaline-container { align-items: center; } #combat-stats .adrenaline-container input { font-size: 2rem; } .adrenaline { position: relative; isolation: isolate; } .adrenaline:before { border-radius: inherit; overflow: hidden; z-index: -1; filter: var(--imgInvert); content: ""; position: absolute; inset: 0; background-image: var(--flame); background-position: center; background-size: contain; background-repeat: no-repeat; } .max { position: relative; isolation: isolate; } .max:before { border-radius: inherit; overflow: hidden; z-index: -1; background-position: center; background-size: contain; background-repeat: no-repeat; filter: var(--imgInvert); } .max.health:before { content: ""; position: absolute; inset: 0; background-image: var(--heart); } .max.resolve:before { content: ""; position: absolute; inset: 0; background-image: var(--skull); } #skills { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: var(--half-gap) var(--big-gap); } #skills .stacked { flex-direction: column-reverse; } #skills .fill-left__radio { border: 1px solid var(--borderColor); } #skills .fill-left__radio:first-child { border-radius: 50% 0 0 50%; } #skills .fill-left__radio:before { line-height: 0; } #skills .parens-holder input { position: relative; top: var(--half-gap); } #skills > .basic-skills { width: 100%; } #skills > .basic-skills > :first-child { display: flex; gap: var(--half-gap); justify-content: space-between; } #skills > .basic-skills > h2 { column-span: all; } #skills > .basic-skills > .skill-container { column-width: var(--columnSize); column-gap: var(--big-gap); column-rule: 2px solid var(--fontColor); } #skills > .basic-skills > .skill-container > .skill-row { break-inside: avoid; } #skills > :not(.basic-skills) { flex: 1 1 var(--columnSize); } #skills .skill-row, #skills .repitem { display: flex; gap: var(--half-gap); align-items: center; } #skills .skill-row > :first-child, #skills .repitem > :first-child { flex: 1 0 auto; } #skills .skill-row [aria-level="3"], #skills .repitem [aria-level="3"] { font-size: 1.125rem; text-transform: capitalize; text-align: left; } #skills .skill-row input[type=number], #skills .repitem input[type=number] { width: 2rem; } #notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--columnSize), 1fr)); gap: var(--big-gap); } #notes .headed-textarea { grid-column: initial; } #gear { display: flex; flex-direction: column; gap: var(--grid-gap); } #gear > .coin { display: flex; flex-wrap: wrap; gap: var(--half-gap); } #gear > .coin h2 { width: 100%; } #gear > .coin .input-label { flex: 1; } #gear > .coin .input-label__input { width: 80px; flex: 1 0 80px; } #gear .repeating-container { align-self: initial; } #gear .repitem { display: grid; gap: var(--half-gap); } #gear .equipped .repitem { grid-template-columns: auto 1fr auto; } #gear .equipped .repitem .skill { grid-column: 1/-1; place-self: center; } #gear .over-equip-control:checked + .input-label span:last-of-type { color: transparent; display: grid; grid-template-columns: "content"; } #gear .over-equip-control:checked + .input-label span:last-of-type > * { grid-area: content; } #gear .over-equip-control:checked + .input-label span:last-of-type:before { content: "!"; color: var(--errorColor); font-size: 150%; } #gear .over-equip-control:checked + .input-label input:first-of-type { color: var(--errorColor); font-family: var(--topHeaderFont); } #gear .stored .repitem { grid-template-columns: auto 1fr auto; } #gear .stored .section-display:not(.wear) { grid-column: 1/-1; display: grid; gap: var(--half-gap); } #gear .stored .section-display:not(.wear).weapon-section { grid-template-columns: auto 1fr 2fr; grid-template-areas: "blitz damage damage" "range range wear"; } #gear .stored .section-display:not(.wear).gear { grid-auto-flow: column; place-content: center; } #gear .stored .section-display:not(.wear) .blitz { grid-area: blitz; } #gear .stored .section-display:not(.wear) .damage { grid-area: damage; } #gear .stored .section-display:not(.wear) .range { grid-area: range; } #gear .stored .section-display:not(.wear) .wear { grid-area: wear; } #gear .stored .section-display:not(.wear) .input-label__input:not([type=checkbox]) { width: 70px; flex: 1; } #gear .stored .section-display:not(.wear) .input-label { flex: 1; } #weapons .repitem { display: grid; grid-template-columns: auto 1fr; gap: var(--half-gap); grid-template-areas: "equipped name name roller" "damage damage range range" "blitz blitz wear wear"; } #weapons .repitem .equipped { grid-area: equipped; } #weapons .repitem .name { grid-area: name; } #weapons .repitem .roller { grid-area: roller; } #weapons .repitem .damage { grid-area: damage; } #weapons .repitem .range { grid-area: range; } #weapons .repitem .blitz { grid-area: blitz; } #weapons .repitem .wear { grid-area: wear; } #weapons .repitem .section-display { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: var(--half-gap); } #weapons .repitem .blitz, #weapons .repitem .wear { justify-self: center; flex: 1 1 0; width: 0; } #weapons .repitem .blitz input, #weapons .repitem .wear input { width: 0; } #weapons .ammo-container .container-name { width: 10rem; flex: 1; } #weapons .ammo-container .parens-holder { flex: 0; } #weapons .ammo-container .ammo-type { width: 5rem; } #archetype .repitem { display: flex; flex-direction: column; gap: var(--half-gap); } #favorable-traits .repitem, #unfavorable-traits .repitem { display: flex; flex-direction: column; gap: var(--half-gap); } #npc { max-width: 500px; display: flex; flex-direction: column; gap: var(--half-gap); } #npc h3 { text-align: left; } #npc .repeating-container { grid-template-columns: 1fr 60px; grid-template-rows: auto 1fr; grid-template-areas: "header buttons" "repeat repeat"; } #npc .repeating-container h3 { grid-area: header; } #npc .repeating-container .repcontrol_edit, #npc .repeating-container .repcontrol-button--add { grid-area: buttons; } #npc .repeating-container .repcontainer { grid-area: repeat; } #npc-header { display: flex; } #npc-header input[type=text] { flex: 1; width: 0; } .npc-skill-container { display: flex; flex-wrap: wrap; gap: var(--half-gap); } #npc-stats { border-bottom: 2px dashed lightgray; padding-bottom: var(--half-gap); } #npc-stats .characteristics { display: grid; grid-template-columns: repeat(4, 1fr); } #npc-stats .circle { width: 4.5rem; } .ui-dialog .tab-content .charsheet .sidebar-toggle { position: absolute; top: 0; --toggleSize:24px; display: grid; grid-template-areas: "content"; } .ui-dialog .tab-content .charsheet .sidebar-toggle:before { --endRotate:45deg; } .ui-dialog .tab-content .charsheet .sidebar-toggle:after { --endRotate:-45deg; } .ui-dialog .tab-content .charsheet .sidebar-toggle:before, .ui-dialog .tab-content .charsheet .sidebar-toggle:after { content: ""; grid-area: content; display: block; width: var(--toggleSize); height: var(--toggleSize); background-image: var(--conditionIcon); background-repeat: no-repeat; background-position: left center; background-size: contain; filter: var(--imgInvert); transform: rotate(0deg); } .ui-dialog .tab-content .charsheet .sidebar-toggle:not(.fresh):before, .ui-dialog .tab-content .charsheet .sidebar-toggle:not(.fresh):after { animation-duration: var(--sidebarRevealTime); animation-iteration-count: 1; animation-delay: var(--sidebarRevealTime); animation-direction: normal; animation-fill-mode: both; animation-name: x-rotate-close; } .ui-dialog .tab-content .charsheet .sidebar-toggle.above-top { top: -2rem; z-index: 1000; } .ui-dialog .tab-content .charsheet .sidebar-toggle.sidebar--left { left: 0; } .ui-dialog .tab-content .charsheet .sidebar-toggle.sidebar--right { right: 0; } .ui-dialog .tab-content .charsheet .sidebar { --sidebarWidth: clamp(250px,75vw,500px); --hidValue: calc(-1 * var(--sidebarWidth)); --sidebarRevealTime: 1s; background-color: var(--backColor); position: fixed; width: var(--sidebarWidth); top: 46px; left: 0; z-index: 10000; border: var(--displayBorderWidth) solid var(--borderColor); border-radius: 0 5px 5px 0; box-sizing: border-box; padding: var(--grid-gap) var(--big-gap) var(--grid-gap) var(--grid-gap); opacity: 1; translate: calc(var(--sidebarWidth) * -1 + 26px); border-color: transparent; } .ui-dialog .tab-content .charsheet .sidebar:not(.fresh):not(.active) { animation-duration: var(--sidebarRevealTime); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-name: slide-out; } .ui-dialog .tab-content .charsheet .sidebar.active { animation-duration: var(--sidebarRevealTime); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-name: slide-in; } .ui-dialog .tab-content .charsheet .sidebar.active .sidebar-toggle:before, .ui-dialog .tab-content .charsheet .sidebar.active .sidebar-toggle:after { animation-duration: var(--sidebarRevealTime); animation-iteration-count: 1; animation-delay: var(--sidebarRevealTime); animation-direction: normal; animation-fill-mode: both; animation-name: x-rotate-open; } .ui-dialog .tab-content .charsheet .text-check { break-inside: avoid; cursor: pointer; } .ui-dialog .tab-content .charsheet .text-check span { padding-inline: var(--half-gap); } .ui-dialog .tab-content .charsheet .sidebar--open { background-image: var(--conditionIcon); background-repeat: no-repeat; background-position: left center; background-size: contain; flex: 0 0 auto; margin-right: auto; } .ui-dialog .tab-content .charsheet .condition-holder { position: relative; display: grid; grid-template-areas: "content"; place-items: center; } .ui-dialog .tab-content .charsheet .condition-holder > * { grid-area: content; } .ui-dialog .tab-content .charsheet .condition-holder:not(:hover):not(:focus):not(:focus-within) .tooltip-display { opacity: 0; visibility: hidden; transition: opacity var(--revealTime) ease-in, visibility 0ms var(--revealTime); } .ui-dialog .tab-content .charsheet .tooltip-display { z-index: 1000; position: absolute; top: 100%; left: 0; width: min(50vw, 250px); padding: var(--half-gap); border: var(--displayBorderWidth) solid var(--borderColor); border-radius: 0 0 5px 5px; transition: opacity var(--revealTime) ease-out; background-color: var(--backColor); visibility: visible; } .ui-dialog .tab-content .charsheet .condition-item { gap: var(--half-gap); list-style: none; } .ui-dialog .tab-content .charsheet .condition-summary { flex: 1 1 0; margin: 0; } .ui-dialog .tab-content .charsheet .display-control:not(:checked) + * { display: none; } #pc-conditions { box-sizing: border-box; } #pc-conditions > div { gap: var(--grid-gap); } @keyframes x-rotate-open { 0% { transform: rotate(0deg); } 100% { transform: rotate(var(--endRotate)); } } @keyframes x-rotate-close { 0% { transform: rotate(var(--endRotate)); } 100% { transform: rotate(0deg); } } @keyframes slide-in { 0% { translate: calc(var(--sidebarWidth) * -1 + 26px); border-color: transparent; } 100% { translate: calc(var(--displayBorderWidth) * -1); border-color: var(--borderColor); } } @keyframes slide-out { 0% { translate: calc(var(--displayBorderWidth) * -1); border-color: var(--borderColor); } 100% { translate: calc(var(--sidebarWidth) * -1 + 26px); border-color: transparent; } } .sheet-rolltemplate-backbone { --backColor:#FCF5E5; --borderImgRadiusFit:20px; margin-right: -16px; margin-left: -45px; margin-bottom: -7px; padding: var(--grid-gap); } .sheet-rolltemplate-backbone:not(:first-child) { margin-top: var(--grid-gap); } .sheet-rolltemplate-backbone .sheet-image-border { position: absolute; inset: 0; border: var(--maskSize) solid; border-image-source: var(--borderImageSource); border-image-slice: var(--borderImageSlice); border-image-width: var(--maskSize); border-image-repeat: round; pointer-events: none; z-index: -1; } .sheet-rolltemplate-backbone .sheet-template { position: relative; padding: 4px; isolation: isolate; filter: drop-shadow(var(--shadowSize) 0 var(--shadowBlur) var(--shadowColor)) drop-shadow(calc(var(--shadowSize) * -1) 0 var(--shadowBlur) var(--shadowColor)) drop-shadow(0 var(--shadowSize) var(--shadowBlur) var(--shadowColor)) drop-shadow(0 calc(var(--shadowSize) * -1) var(--shadowBlur) var(--shadowColor)) drop-shadow(var(--shadowSize) 0 calc(var(--shadowBlur) * 1.5) var(--shadowColor2)) drop-shadow(calc(var(--shadowSize) * -1) 0 calc(var(--shadowBlur) * 1.5) var(--shadowColor2)) drop-shadow(0 var(--shadowSize) calc(var(--shadowBlur) * 1.5) var(--shadowColor2)) drop-shadow(0 calc(var(--shadowSize) * -1) calc(var(--shadowBlur) * 1.5) var(--shadowColor2)); } .sheet-rolltemplate-backbone .sheet-template > :nth-child(2) { border-top-left-radius: var(--borderImgRadiusFit); border-top-right-radius: var(--borderImgRadiusFit); } .sheet-rolltemplate-backbone .sheet-template > :last-child { border-bottom-left-radius: var(--borderImgRadiusFit); border-bottom-right-radius: var(--borderImgRadiusFit); } .sheet-rolltemplate-backbone .sheet-template p, .sheet-rolltemplate-backbone .sheet-template span { font-size: 1.3rem; } .sheet-rolltemplate-backbone .sheet-template p { overflow-y: auto; max-height: 30rem; margin: 0; } .sheet-rolltemplate-backbone .sheet-template a { background-color: transparent; border: none; padding: 0; color: var(--fontColor); font-weight: 700; } .sheet-rolltemplate-backbone .sheet-template a[href^="!"], .sheet-rolltemplate-backbone .sheet-template a[href^="~"] { display: inline-grid; grid-template-columns: 10px auto; grid-template-areas: "icon text"; } .sheet-rolltemplate-backbone .sheet-template a[href^="!"]:before, .sheet-rolltemplate-backbone .sheet-template a[href^="~"]:before { content: ""; background-image: url("https://s3.amazonaws.com/files.d20.io/images/305391097/UIK_ZAJSwqtkuDg5I2g_LQ/original.png?16636241805"); background-repeat: no-repeat; background-size: contain; background-position: center; } .sheet-rolltemplate-backbone .sheet-content { padding: var(--big-gap); } .sheet-rolltemplate-backbone .sheet-content .inlinerollresult { background-color: transparent; border: 0px solid transparent; font-weight: 700; } .sheet-rolltemplate-backbone .sheet-content .inlinerollresult.fullcrit { color: green; } .sheet-rolltemplate-backbone .sheet-content .inlinerollresult.fullfail { color: red; } .sheet-rolltemplate-backbone .sheet-content .inlinerollresult.importantroll { color: blue; } .sheet-rolltemplate-backbone .sheet-content .sheet-pure-success + .inlinerollresult { color: var(--fontColor) !important; position: relative; display: flex; align-items: center; } .sheet-rolltemplate-backbone .sheet-content .sheet-pure-success + .inlinerollresult:before { position: absolute; left: -24px; } .sheet-rolltemplate-backbone .sheet-content .sheet-pure-success + .inlinerollresult.fullcrit { color: var(--fontColor); } .sheet-rolltemplate-backbone .sheet-content .sheet-pure-success + .inlinerollresult.fullcrit:before { content: ""; display: block; background-image: var(--successCircle); background-repeat: no-repeat; background-size: contain; width: 24px; height: 24px; } .sheet-rolltemplate-backbone .sheet-content .sheet-pure-success + .inlinerollresult.fullfail { color: var(--fontColor); } .sheet-rolltemplate-backbone .sheet-content .sheet-pure-success + .inlinerollresult.fullfail:before { content: ""; display: block; background-image: var(--failCircle); background-repeat: no-repeat; background-size: contain; width: 24px; height: 24px; } .sheet-rolltemplate-backbone .sheet-content .sheet-result .inlinerollresult { font-size: 3rem; } .sheet-rolltemplate-backbone .sheet-content .sheet-result--no-crit .inlinerollresult { color: var(--fontColor); } .sheet-rolltemplate-backbone .sheet-content .sheet-result--is-fumble .inlinerollresult { position: relative; display: flex; align-items: center; } .sheet-rolltemplate-backbone .sheet-content .sheet-result--is-fumble .inlinerollresult:before { position: absolute; left: -24px; } .sheet-rolltemplate-backbone .sheet-content .sheet-result--is-fumble .inlinerollresult:before { content: ""; display: block; background-image: var(--failCircle); background-repeat: no-repeat; background-size: contain; width: 24px; height: 24px; } .sheet-rolltemplate-backbone .sheet-content .sheet-result--is-crit .inlinerollresult { position: relative; display: flex; align-items: center; } .sheet-rolltemplate-backbone .sheet-content .sheet-result--is-crit .inlinerollresult:before { position: absolute; left: -24px; } .sheet-rolltemplate-backbone .sheet-content .sheet-result--is-crit .inlinerollresult:before { content: ""; display: block; background-image: var(--successCircle); background-repeat: no-repeat; background-size: contain; width: 24px; height: 24px; } .sheet-rolltemplate-backbone .sheet-description { width: 100%; }