@import url("https://fonts.googleapis.com/css?family=Nova+Cut|Source+Sans+Pro|Special+Elite&display=swap"); .ui-dialog .tab-content .charsheet .ratio1-1, .sheet-rolltemplate-storypath .ratio1-1, .ui-dialog .tab-content .charsheet .dot-button-container .dot, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot { aspect-ratio: 1/1; } .sheet-rolltemplate-storypath .sheet-template-row, #notes, #equipment, #birthrights, #purview, #calling, #paths, #deeds, #move-defense { display: grid; } #notes, #equipment, #birthrights, #purview, #calling, #paths, #deeds { gap: var(--grid-gap); grid-template-areas: "header"; grid-template-columns: 1fr; grid-template-rows: 1fr; } .ui-dialog .tab-content .charsheet .dot-button-container .dot, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot { border-radius: 50%; } #calling .short-knack, #paths .short-master, #paths .short-contact, #paths .short-access, #paths .short-group, #paths .short-obligation { align-items: center; } .ui-dialog .tab-content .charsheet h1.subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet h1.subsystem-style.system-scion-hero, .ui-dialog .tab-content .charsheet *[aria-level="1"].subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet *[aria-level="1"].subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath h1.subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath h1.subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath *[aria-level="1"].subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath *[aria-level="1"].subsystem-style.system-scion-hero { background-color: darkgrey; color: white; } .ui-dialog .tab-content .charsheet .repcontrol-button:not(.repcontrol-button--inline), .ui-dialog .tab-content .charsheet .collapse-interface { 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; } .ui-dialog .tab-content .charsheet .repcontrol-button:is(:hover, :focus):not(.repcontrol-button--inline), .ui-dialog .tab-content .charsheet .collapse-interface:is(:hover, :focus) { background-color: rgba(133, 133, 133, 0.5019607843); box-shadow: 0 4px 6px black; backdrop-filter: blur(2px); } .ui-dialog .tab-content .charsheet .repcontrol-button:active:not(.repcontrol-button--inline), .ui-dialog .tab-content .charsheet .collapse-interface:active { background-color: #858585; box-shadow: 0 1px 2px black; backdrop-filter: blur(0px); } .ui-dialog .tab-content .charsheet .roller:before, .sheet-rolltemplate-storypath .roller:before { line-height: 14px; /*height to vertically center a 2rem dicefontd10*/ font-size: 2rem; font-weight: normal; font-style: normal; padding: 5px 3px 7px; } .ui-dialog .tab-content .charsheet .repcontrol-button:not(.repcontrol-button--inline), .ui-dialog .tab-content .charsheet .collapse-interface { padding: 5px 7px; } #birthrights .repcontainer:not(:empty) ~ .add-container:after, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:not(:first-child) > .upper-blur, .ui-dialog .tab-content .charsheet .border-control[value=add-detail] + .image-border > .upper-blur, .sheet-rolltemplate-storypath .border-control[value=add-detail] + .image-border > .upper-blur, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child > .upper-blur, .ui-dialog .tab-content .charsheet .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .upper-blur, .sheet-rolltemplate-storypath .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .upper-blur, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:not(:first-child) > .sheet-upper-blur, .ui-dialog .tab-content .charsheet .border-control[value=add-detail] + .image-border > .sheet-upper-blur, .sheet-rolltemplate-storypath .border-control[value=add-detail] + .image-border > .sheet-upper-blur, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child > .sheet-upper-blur, .ui-dialog .tab-content .charsheet .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .sheet-upper-blur, .sheet-rolltemplate-storypath .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .sheet-upper-blur { content: ""; position: absolute; top: 0; height: 0px; left: calc(var(--inset) / 2); right: calc(var(--inset) / 2); box-shadow: 0 0 calc(var(--inset) / 2) calc(var(--inset) / 2 + 3px) var(--glowcolor); background-color: transparent; } #birthrights .repcontainer .repitem:last-child .image-border::after, .sheet-rolltemplate-storypath > .sheet-template:not(.sheet-continuation):first-child > .lower-blur, .ui-dialog .tab-content .charsheet .border-control[value*=master] + .image-border > .lower-blur, .sheet-rolltemplate-storypath .border-control[value*=master] + .image-border > .lower-blur, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child > .lower-blur, .ui-dialog .tab-content .charsheet .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .lower-blur, .sheet-rolltemplate-storypath .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .lower-blur, .sheet-rolltemplate-storypath > .sheet-template:not(.sheet-continuation):first-child > .sheet-lower-blur, .ui-dialog .tab-content .charsheet .border-control[value*=master] + .image-border > .sheet-lower-blur, .sheet-rolltemplate-storypath .border-control[value*=master] + .image-border > .sheet-lower-blur, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child > .sheet-lower-blur, .ui-dialog .tab-content .charsheet .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .sheet-lower-blur, .sheet-rolltemplate-storypath .border-control:not([value=add-detail]):not([value*=master]) + .image-border > .sheet-lower-blur { content: ""; position: absolute; bottom: 0; height: 0px; left: calc(var(--inset) / 2); right: calc(var(--inset) / 2); box-shadow: 0 0 calc(var(--inset) / 2) calc(var(--inset) / 2 + 3px) var(--glowcolor); background-color: transparent; } .ui-dialog .tab-content .charsheet .add-container, #main .add-detail { column-gap: var(--tiny-gap); } .ui-dialog .tab-content .charsheet .add-container > button, #main .add-detail > button { text-transform: capitalize; width: auto; height: auto; display: flex; flex-grow: 1; gap: var(--half-gap); place-self: stretch; justify-content: center; font-family: var(--sectionHeaderFont); font-size: 1rem; } .ui-dialog .tab-content .charsheet .add-container > button:not(:first-of-type), #main .add-detail > button:not(:first-of-type) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .ui-dialog .tab-content .charsheet .add-container > button:not(:last-of-type), #main .add-detail > button:not(:last-of-type) { border-top-right-radius: 0; border-bottom-right-radius: 0; } #deeds [aria-level="3"], .ui-dialog .tab-content .charsheet h2.subsystem-style, .ui-dialog .tab-content .charsheet *[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.subsystem-style, .sheet-rolltemplate-storypath *[aria-level="2"].subsystem-style { background-repeat: no-repeat; background-position: center; background-size: min(100%, 1000px) 100%; background-color: initial; filter: drop-shadow(0px 2px black) drop-shadow(-1px 0px black) drop-shadow(1px 0px black) drop-shadow(0px -0.5px black); } #health .repcontainer { column-width: 190px; gap: var(--grid-gap); } .ui-dialog .tab-content .charsheet .split { display: flex; gap: var(--grid-gap); } .ui-dialog .tab-content .charsheet .split > * { width: 0px !important; flex: 1 1 0; } #deeds [aria-level="3"], .ui-dialog .tab-content .charsheet h2.subsystem-style, .ui-dialog .tab-content .charsheet *[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.subsystem-style, .sheet-rolltemplate-storypath *[aria-level="2"].subsystem-style { font-family: var(--sectionHeaderFont); } #deeds .system-scion-demigod[aria-level="3"], .ui-dialog .tab-content .charsheet h2.system-scion-demigod.subsystem-style, .ui-dialog .tab-content .charsheet .system-scion-demigod[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.system-scion-demigod.subsystem-style, .sheet-rolltemplate-storypath .system-scion-demigod[aria-level="2"].subsystem-style, #deeds .sheet-system-scion-demigod[aria-level="3"], .ui-dialog .tab-content .charsheet h2.sheet-system-scion-demigod.subsystem-style, .ui-dialog .tab-content .charsheet .sheet-system-scion-demigod[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.sheet-system-scion-demigod.subsystem-style, .sheet-rolltemplate-storypath .sheet-system-scion-demigod[aria-level="2"].subsystem-style, #deeds .system-scion-hero[aria-level="3"], .ui-dialog .tab-content .charsheet h2.system-scion-hero.subsystem-style, .ui-dialog .tab-content .charsheet .system-scion-hero[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.system-scion-hero.subsystem-style, .sheet-rolltemplate-storypath .system-scion-hero[aria-level="2"].subsystem-style, #deeds .sheet-system-scion-hero[aria-level="3"], .ui-dialog .tab-content .charsheet h2.sheet-system-scion-hero.subsystem-style, .ui-dialog .tab-content .charsheet .sheet-system-scion-hero[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.sheet-system-scion-hero.subsystem-style, .sheet-rolltemplate-storypath .sheet-system-scion-hero[aria-level="2"].subsystem-style, #deeds .system-scion-origin[aria-level="3"], .ui-dialog .tab-content .charsheet h2.system-scion-origin.subsystem-style, .ui-dialog .tab-content .charsheet .system-scion-origin[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.system-scion-origin.subsystem-style, .sheet-rolltemplate-storypath .system-scion-origin[aria-level="2"].subsystem-style, #deeds .sheet-system-scion-origin[aria-level="3"], .ui-dialog .tab-content .charsheet h2.sheet-system-scion-origin.subsystem-style, .ui-dialog .tab-content .charsheet .sheet-system-scion-origin[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.sheet-system-scion-origin.subsystem-style, .sheet-rolltemplate-storypath .sheet-system-scion-origin[aria-level="2"].subsystem-style { color: white; } #deeds .system-scion-demigod[aria-level="3"] > *, .ui-dialog .tab-content .charsheet h2.system-scion-demigod.subsystem-style > *, .ui-dialog .tab-content .charsheet .system-scion-demigod[aria-level="2"].subsystem-style > *, .sheet-rolltemplate-storypath h2.system-scion-demigod.subsystem-style > *, .sheet-rolltemplate-storypath .system-scion-demigod[aria-level="2"].subsystem-style > *, #deeds .sheet-system-scion-demigod[aria-level="3"] > *, .ui-dialog .tab-content .charsheet h2.sheet-system-scion-demigod.subsystem-style > *, .ui-dialog .tab-content .charsheet .sheet-system-scion-demigod[aria-level="2"].subsystem-style > *, .sheet-rolltemplate-storypath h2.sheet-system-scion-demigod.subsystem-style > *, .sheet-rolltemplate-storypath .sheet-system-scion-demigod[aria-level="2"].subsystem-style > *, #deeds .system-scion-hero[aria-level="3"] > *, .ui-dialog .tab-content .charsheet h2.system-scion-hero.subsystem-style > *, .ui-dialog .tab-content .charsheet .system-scion-hero[aria-level="2"].subsystem-style > *, .sheet-rolltemplate-storypath h2.system-scion-hero.subsystem-style > *, .sheet-rolltemplate-storypath .system-scion-hero[aria-level="2"].subsystem-style > *, #deeds .sheet-system-scion-hero[aria-level="3"] > *, .ui-dialog .tab-content .charsheet h2.sheet-system-scion-hero.subsystem-style > *, .ui-dialog .tab-content .charsheet .sheet-system-scion-hero[aria-level="2"].subsystem-style > *, .sheet-rolltemplate-storypath h2.sheet-system-scion-hero.subsystem-style > *, .sheet-rolltemplate-storypath .sheet-system-scion-hero[aria-level="2"].subsystem-style > *, #deeds .system-scion-origin[aria-level="3"] > *, .ui-dialog .tab-content .charsheet h2.system-scion-origin.subsystem-style > *, .ui-dialog .tab-content .charsheet .system-scion-origin[aria-level="2"].subsystem-style > *, .sheet-rolltemplate-storypath h2.system-scion-origin.subsystem-style > *, .sheet-rolltemplate-storypath .system-scion-origin[aria-level="2"].subsystem-style > *, #deeds .sheet-system-scion-origin[aria-level="3"] > *, .ui-dialog .tab-content .charsheet h2.sheet-system-scion-origin.subsystem-style > *, .ui-dialog .tab-content .charsheet .sheet-system-scion-origin[aria-level="2"].subsystem-style > *, .sheet-rolltemplate-storypath h2.sheet-system-scion-origin.subsystem-style > *, .sheet-rolltemplate-storypath .sheet-system-scion-origin[aria-level="2"].subsystem-style > * { display: inline; color: white; } #deeds .system-scion-origin[aria-level="3"], .ui-dialog .tab-content .charsheet h2.system-scion-origin.subsystem-style, .ui-dialog .tab-content .charsheet .system-scion-origin[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.system-scion-origin.subsystem-style, .sheet-rolltemplate-storypath .system-scion-origin[aria-level="2"].subsystem-style, #deeds .sheet-system-scion-origin[aria-level="3"], .ui-dialog .tab-content .charsheet h2.sheet-system-scion-origin.subsystem-style, .ui-dialog .tab-content .charsheet .sheet-system-scion-origin[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.sheet-system-scion-origin.subsystem-style, .sheet-rolltemplate-storypath .sheet-system-scion-origin[aria-level="2"].subsystem-style { background-image: url("https://s3.amazonaws.com/files.d20.io/images/251683060/8CsXGJVVouL_mx7pYiMMbg/original.png"); padding-top: var(--half-gap); } #deeds .system-scion-hero[aria-level="3"], .ui-dialog .tab-content .charsheet h2.system-scion-hero.subsystem-style, .ui-dialog .tab-content .charsheet .system-scion-hero[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.system-scion-hero.subsystem-style, .sheet-rolltemplate-storypath .system-scion-hero[aria-level="2"].subsystem-style, #deeds .sheet-system-scion-hero[aria-level="3"], .ui-dialog .tab-content .charsheet h2.sheet-system-scion-hero.subsystem-style, .ui-dialog .tab-content .charsheet .sheet-system-scion-hero[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.sheet-system-scion-hero.subsystem-style, .sheet-rolltemplate-storypath .sheet-system-scion-hero[aria-level="2"].subsystem-style { background-image: url("https://s3.amazonaws.com/files.d20.io/images/251360621/itDvmUX6IhfnSzD3D4aGnQ/original.png"); padding-top: var(--half-gap); } #deeds .system-scion-demigod[aria-level="3"], .ui-dialog .tab-content .charsheet h2.system-scion-demigod.subsystem-style, .ui-dialog .tab-content .charsheet .system-scion-demigod[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.system-scion-demigod.subsystem-style, .sheet-rolltemplate-storypath .system-scion-demigod[aria-level="2"].subsystem-style, #deeds .sheet-system-scion-demigod[aria-level="3"], .ui-dialog .tab-content .charsheet h2.sheet-system-scion-demigod.subsystem-style, .ui-dialog .tab-content .charsheet .sheet-system-scion-demigod[aria-level="2"].subsystem-style, .sheet-rolltemplate-storypath h2.sheet-system-scion-demigod.subsystem-style, .sheet-rolltemplate-storypath .sheet-system-scion-demigod[aria-level="2"].subsystem-style { background-image: url("https://s3.amazonaws.com/files.d20.io/images/251360621/itDvmUX6IhfnSzD3D4aGnQ/original.png"); padding-top: var(--half-gap); } .sheet-rolltemplate-storypath > .sheet-template, .ui-dialog .tab-content .charsheet .bordered-item + fieldset + .repcontainer .image-border, .ui-dialog .tab-content .charsheet .bordered-item, .ui-dialog .tab-content .charsheet .image-border, .sheet-rolltemplate-storypath .bordered-item + fieldset + .repcontainer .image-border, .sheet-rolltemplate-storypath .bordered-item, .sheet-rolltemplate-storypath .image-border { border: 0px solid transparent; background-blend-mode: screen; transition: none; --glowcolor: white; } .sheet-rolltemplate-storypath > .sheet-template:before, .ui-dialog .tab-content .charsheet .bordered-item + fieldset + .repcontainer .image-border:before, .ui-dialog .tab-content .charsheet .bordered-item:before, .ui-dialog .tab-content .charsheet .image-border:before, .sheet-rolltemplate-storypath .bordered-item + fieldset + .repcontainer .image-border:before, .sheet-rolltemplate-storypath .bordered-item:before, .sheet-rolltemplate-storypath .image-border:before { content: ""; position: absolute; right: var(--inset); left: var(--inset); background: var(--glowcolor); border-radius: 2px; box-shadow: 0 0 var(--inset) var(--inset) var(--glowcolor); } .sheet-rolltemplate-storypath > .sheet-template:not(.sheet-continuation):not(:first-child), .ui-dialog .tab-content .charsheet .bordered-item + fieldset + .repcontainer .image-border, .ui-dialog .tab-content .charsheet .bordered-item, .sheet-rolltemplate-storypath .bordered-item + fieldset + .repcontainer .image-border, .sheet-rolltemplate-storypath .bordered-item { padding: calc(var(--inset) / 2); clip-path: var(--fullNotch); background-image: var(--image-marble-top), var(--image-marble-right), var(--image-marble-left), var(--image-marble-bottom); background-repeat: no-repeat, repeat-y, repeat-y, no-repeat; background-position: top var(--offset) left, top right var(--offset), top left var(--offset), bottom var(--offset) left; background-size: max(1500px, 100%) var(--short-side), var(--short-side) max(981px, 100%), var(--short-side) max(981px, 100%), max(1500px, 100%) var(--short-side); } .sheet-rolltemplate-storypath > .sheet-template:not(.sheet-continuation):not(:first-child):before, .ui-dialog .tab-content .charsheet .bordered-item + fieldset + .repcontainer .image-border:before, .ui-dialog .tab-content .charsheet .bordered-item:before, .sheet-rolltemplate-storypath .bordered-item + fieldset + .repcontainer .image-border:before, .sheet-rolltemplate-storypath .bordered-item:before { top: var(--inset); bottom: var(--inset); z-index: -1; } .sheet-rolltemplate-storypath > .sheet-template:not(.sheet-continuation):first-child, .ui-dialog .tab-content .charsheet .border-control[value*=master] + .image-border, .sheet-rolltemplate-storypath .border-control[value*=master] + .image-border { padding: calc(var(--inset) / 2) calc(var(--inset) / 2) 0; clip-path: var(--topNotch); background-image: var(--image-marble-top), var(--image-marble-right), var(--image-marble-left); background-repeat: no-repeat, repeat-y, repeat-y; background-position: top var(--offset) left, top right var(--offset), top left var(--offset); background-size: max(1500px, 100%) var(--short-side), var(--short-side) max(981px, 100%), var(--short-side) max(981px, 100%); } .sheet-rolltemplate-storypath > .sheet-template:not(.sheet-continuation):first-child:before, .ui-dialog .tab-content .charsheet .border-control[value*=master] + .image-border:before, .sheet-rolltemplate-storypath .border-control[value*=master] + .image-border:before { top: var(--inset); bottom: 0; } .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:not(:first-child), .ui-dialog .tab-content .charsheet .border-control[value=add-detail] + .image-border, .sheet-rolltemplate-storypath .border-control[value=add-detail] + .image-border { padding: 0 calc(var(--inset) / 2) calc(var(--inset) / 2); clip-path: var(--bottomNotch); background-image: var(--image-marble-right), var(--image-marble-left), var(--image-marble-bottom); background-repeat: repeat-y, repeat-y, no-repeat; background-position: top right var(--offset), top left var(--offset), bottom var(--offset) left; background-size: var(--short-side) max(981px, 100%), var(--short-side) max(981px, 100%), max(1500px, 100%) var(--short-side); } .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:not(:first-child):before, .ui-dialog .tab-content .charsheet .border-control[value=add-detail] + .image-border:before, .sheet-rolltemplate-storypath .border-control[value=add-detail] + .image-border:before { top: 0; bottom: var(--inset); } .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child, .ui-dialog .tab-content .charsheet .border-control:not([value=add-detail]):not([value*=master]) + .image-border, .sheet-rolltemplate-storypath .border-control:not([value=add-detail]):not([value*=master]) + .image-border { padding: 0 calc(var(--inset) / 2); background-image: var(--image-marble-right), var(--image-marble-left); background-repeat: repeat-y, repeat-y; background-position: top right var(--offset), top left var(--offset); background-size: var(--short-side) max(981px, 100%), var(--short-side) max(981px, 100%); } .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child:before, .ui-dialog .tab-content .charsheet .border-control:not([value=add-detail]):not([value*=master]) + .image-border:before, .sheet-rolltemplate-storypath .border-control:not([value=add-detail]):not([value*=master]) + .image-border:before { top: 0; bottom: 0; } #main, .sheet-rolltemplate-storypath { --sheetHeaderFont:Nova Cut; --sectionHeaderFont:Special Elite; --contentFont:Source Sans Pro; --origin-marble-top: url(https://s3.amazonaws.com/files.d20.io/images/249877181/OO8kLtGrKrmbo-zrYj6zrg/original.png); --origin-marble-bottom: url(https://s3.amazonaws.com/files.d20.io/images/249879723/iWQ50VC7Lxjz6v_NxSt-iQ/original.png); --origin-marble-left: url(https://s3.amazonaws.com/files.d20.io/images/249877911/jArMKf20lWDHWjqI1oH_6g/original.png); --origin-marble-right: url(https://s3.amazonaws.com/files.d20.io/images/249877929/tHr_-gJ-BxGB5Fv8o7O27Q/original.png); --chamfer: 9.5px; --fullNotch:polygon(0% var(--chamfer), var(--chamfer) 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0% calc(100% - var(--chamfer))); --topNotch: polygon(0% var(--chamfer), var(--chamfer) 0%, calc(100% - var(--chamfer)) 0%, 100% var(--chamfer), 100% 100%, 0% 100%); --bottomNotch: polygon(0% 0%, 100% 0%, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0% calc(100% - var(--chamfer))); --short-side: 100px; --offset: -10px; --inset: 20px; --image-marble-top: var(--origin-marble-top); --image-marble-bottom: var(--origin-marble-bottom); --image-marble-left: var(--origin-marble-left); --image-marble-right: var(--origin-marble-right); } #main.system-scion-hero, #main.sheet-system-scion-hero, #main > .sheet-template.system-scion-hero, #main > .sheet-template.sheet-system-scion-hero, .sheet-rolltemplate-storypath.system-scion-hero, .sheet-rolltemplate-storypath.sheet-system-scion-hero, .sheet-rolltemplate-storypath > .sheet-template.system-scion-hero, .sheet-rolltemplate-storypath > .sheet-template.sheet-system-scion-hero { --image-marble-top: url(https://s3.amazonaws.com/files.d20.io/images/253888639/8JSfdmx58dzvuz-_Knw88Q/original.png); --image-marble-bottom: url(https://s3.amazonaws.com/files.d20.io/images/253874376/bDQw-CkPKzNrwMAQ5aiA0w/original.png); --image-marble-left: url(https://s3.amazonaws.com/files.d20.io/images/253053812/MWwzeVDtpJ6Q8-zRkGB-Wg/original.png); --image-marble-right: url(https://s3.amazonaws.com/files.d20.io/images/253053813/b3MN3VPqcCFZKe-tjvGoDQ/original.png); } #image-head { display: grid; grid-template-rows: 150px; place-content: center; grid-column: 1/-1; } #image-head img { height: 100%; } @media (max-width: 830px) { #main .dot-row.size-number .dot-button-container { display: none; } #main .dot-row.size-number .dot-number { display: inline; } #calling .repitem > .calling { grid-template-columns: auto 1fr repeat(2, auto); } #calling .repitem > .calling .dot-number { grid-column: 3/4; } #calling .repitem > .calling .dot-row { grid-row: 1/2; } } @media (min-width: 1060px) { .ui-dialog .charsheet { --spanSectionColumn:span 2; } } @media touch { .small-scale-grid, .small-scale-grid + fieldset + .repcontainer { grid-template-columns: [header-start] repeat(auto-fit, minmax(20rem, 1fr)) [header-end]; } } @media not touch { .small-scale-grid, .small-scale-grid + fieldset + .repcontainer { grid-template-columns: [header-start] repeat(auto-fit, minmax(15rem, 1fr)) [header-end]; } } ul.nav-tabs.nav { position: sticky; top: 0; background-color: white; z-index: 9999; margin-bottom: 0px; } .characterviewer { background-color: white; } #main-nav { display: grid; place-content: center start; grid-auto-flow: column; align-items: center; gap: 2px; position: sticky; top: 43px; background-color: white; padding: var(--grid-gap) 0 0; margin-bottom: var(--half-gap); border-bottom: 1px solid #dddddd; z-index: 999; box-shadow: 30px 0 white, -30px 0 white; } #main-nav .sheet-nav__tab { color: black; font-style: normal; border: 1px solid transparent; margin: 0 0 -1px; background-color: transparent; border-radius: 4px 4px 0 0; box-shadow: none; font-size: 13px; background-image: none; padding: 9px 12px; } #main-nav .sheet-nav__tab:not(.active):hover { background-color: #eeeeee; } #main-nav .sheet-nav__tab.active { border-color: #dddddd #dddddd white #dddddd; height: 16px; } html { font-size: 13px; } #main .contents, #main .contents + fieldset + .repcontainer, .sheet-rolltemplate-storypath .contents, .sheet-rolltemplate-storypath .contents + fieldset + .repcontainer { display: contents; } .ui-dialog .tab-content .charsheet { position: relative; top: 0; bottom: 0; left: 0; right: 0; } .ui-dialog .tab-content .charsheet select, .ui-dialog .tab-content .charsheet textarea, .ui-dialog .tab-content .charsheet input, .ui-dialog .tab-content .charsheet .uneditable-input, .ui-dialog .tab-content .charsheet label, .ui-dialog .tab-content .charsheet button { all: initial; } .ui-dialog .tab-content .charsheet .flex-box, .ui-dialog .tab-content .charsheet .sheet-flex-box { display: flex; } .ui-dialog .tab-content .charsheet .flex-wrap, .ui-dialog .tab-content .charsheet .sheet-flex-wrap { flex-wrap: wrap; } .ui-dialog .tab-content .charsheet .justify-space-around, .ui-dialog .tab-content .charsheet .sheet-justify-space-around { justify-content: space-around; } .ui-dialog .tab-content .charsheet .justify-space-between, .ui-dialog .tab-content .charsheet .sheet-justify-space-between { justify-content: space-between; } .ui-dialog .tab-content .charsheet .justify-center, .ui-dialog .tab-content .charsheet .sheet-justify-center { justify-content: center; } .ui-dialog .tab-content .charsheet .flex-min-content, .ui-dialog .tab-content .charsheet .sheet-flex-min-content { flex: 1 0 min-content; } .ui-dialog .tab-content .charsheet .stacked { flex-direction: column; } .ui-dialog .tab-content .charsheet .stacked.center > * { text-align: center; } .ui-dialog .tab-content .charsheet .stacked:not(.center) { align-items: start; } .ui-dialog .tab-content .charsheet .stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } .ui-dialog .tab-content .charsheet .flex-column, .ui-dialog .tab-content .charsheet .sheet-flex-column { flex-direction: column; } .ui-dialog .tab-content .charsheet .flex-row-reverse, .ui-dialog .tab-content .charsheet .sheet-flex-row-revers { flex-direction: row-reverse; } .ui-dialog .tab-content .charsheet .flex-column-reverse, .ui-dialog .tab-content .charsheet .sheet-flex-column-reverse { flex-direction: column-reverse; } .ui-dialog .tab-content .charsheet .normal-gap, .ui-dialog .tab-content .charsheet .sheet-normal-gap { gap: var(--normal-gap); } .ui-dialog .tab-content .charsheet .normal-gap-x, .ui-dialog .tab-content .charsheet .sheet-normal-gap-x { column-gap: var(--normal-gap-x); } .ui-dialog .tab-content .charsheet .normal-gap-y, .ui-dialog .tab-content .charsheet .sheet-normal-gap-y { row-gap: var(--normal-gap-y); } .ui-dialog .tab-content .charsheet .half-gap, .ui-dialog .tab-content .charsheet .sheet-half-gap { gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .half-gap-x, .ui-dialog .tab-content .charsheet .sheet-half-gap-x { column-gap: var(--half-gap-x); } .ui-dialog .tab-content .charsheet .half-gap-y, .ui-dialog .tab-content .charsheet .sheet-half-gap-y { row-gap: var(--half-gap-y); } .ui-dialog .tab-content .charsheet .tiny-gap, .ui-dialog .tab-content .charsheet .sheet-tiny-gap { gap: var(--tiny-gap); } .ui-dialog .tab-content .charsheet .tiny-gap-x, .ui-dialog .tab-content .charsheet .sheet-tiny-gap-x { column-gap: var(--tiny-gap-x); } .ui-dialog .tab-content .charsheet .tiny-gap-y, .ui-dialog .tab-content .charsheet .sheet-tiny-gap-y { row-gap: var(--tiny-gap-y); } .ui-dialog .tab-content .charsheet .big-gap, .ui-dialog .tab-content .charsheet .sheet-big-gap { gap: var(--big-gap); } .ui-dialog .tab-content .charsheet .big-gap-x, .ui-dialog .tab-content .charsheet .sheet-big-gap-x { column-gap: var(--big-gap-x); } .ui-dialog .tab-content .charsheet .big-gap-y, .ui-dialog .tab-content .charsheet .sheet-big-gap-y { row-gap: var(--big-gap-y); } .ui-dialog .tab-content .charsheet .grid, .ui-dialog .tab-content .charsheet .sheet-grid { display: grid; } .ui-dialog .tab-content .charsheet .grid-span-2, .ui-dialog .tab-content .charsheet .sheet-grid-span-2 { grid-column: span 2; } .ui-dialog .tab-content .charsheet .grid-span-all, .ui-dialog .tab-content .charsheet .sheet-grid-span-all { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet .grid-column, .ui-dialog .tab-content .charsheet .sheet-grid-column { grid-auto-flow: column; } .ui-dialog .tab-content .charsheet .grid-dense, .ui-dialog .tab-content .charsheet .sheet-grid-dense { grid-auto-flow: dense; } .ui-dialog .tab-content .charsheet .boxed, .ui-dialog .tab-content .charsheet .sheet-boxed { border: 2px solid var(--borderColor); border-radius: 0; box-sizing: border-box; } .ui-dialog .tab-content .charsheet .boxed.thick-left, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-left { border-left-width: 5px; } .ui-dialog .tab-content .charsheet .boxed.thick-bottom, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom { border-bottom-width: 5px; } .ui-dialog .tab-content .charsheet .boxed.thick-right, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-right { border-right-width: 5px; } .ui-dialog .tab-content .charsheet .boxed.thick-top, .ui-dialog .tab-content .charsheet .sheet-boxed.thick-top { border-top-width: 5px; } .ui-dialog .tab-content .charsheet .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; border-radius: 0; border-bottom: 1px solid var(--borderColor); transition: border-radius border var(--revealTrans); } .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; } .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within) { background-color: var(--disabledColor); } .ui-dialog .tab-content .charsheet .underlined--invisible { border-color: transparent !important; } .ui-dialog .tab-content .charsheet .ratio1-1, .ui-dialog .tab-content .charsheet .sheet-ratio1-1 { aspect-ratio: 1/1; } .ui-dialog .tab-content .charsheet span, .ui-dialog .tab-content .charsheet input, .ui-dialog .tab-content .charsheet textarea, .ui-dialog .tab-content .charsheet button, .ui-dialog .tab-content .charsheet select { line-height: normal; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } .ui-dialog .tab-content .charsheet .text-1, .ui-dialog .tab-content .charsheet .sheet-text-1 { font-size: var(--size1); } .ui-dialog .tab-content .charsheet .text-2, .ui-dialog .tab-content .charsheet .sheet-text-2 { font-size: var(--size2); } .ui-dialog .tab-content .charsheet .text-3, .ui-dialog .tab-content .charsheet .sheet-text-3 { font-size: var(--size3); } .ui-dialog .tab-content .charsheet .text-4, .ui-dialog .tab-content .charsheet .sheet-text-4 { font-size: var(--size4); } .ui-dialog .tab-content .charsheet .text-5, .ui-dialog .tab-content .charsheet .sheet-text-5 { font-size: var(--size5); } .ui-dialog .tab-content .charsheet .text-6, .ui-dialog .tab-content .charsheet .sheet-text-6 { font-size: var(--size6); } .ui-dialog .tab-content .charsheet .text-7, .ui-dialog .tab-content .charsheet .sheet-text-7 { font-size: var(--size7); } .ui-dialog .tab-content .charsheet .capitalize, .ui-dialog .tab-content .charsheet .sheet-capitalize { text-transform: capitalize !important; } .ui-dialog .tab-content .charsheet .lowercase, .ui-dialog .tab-content .charsheet .sheet-lowercase { text-transform: lowercase !important; } .ui-dialog .tab-content .charsheet .uppercase, .ui-dialog .tab-content .charsheet .sheet-uppercase { text-transform: uppercase !important; } .ui-dialog .tab-content .charsheet .sheet-material-icons, .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 */ } .ui-dialog .tab-content .charsheet .material-symbol, .ui-dialog .tab-content .charsheet .sheet-material-symbol { font-family: "Material Symbols Outlined"; 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; font-variation-settings: "FILL" 1; } .ui-dialog .tab-content .charsheet .sheet-italics, .ui-dialog .tab-content .charsheet .italics { font-style: italic; } .ui-dialog .tab-content .charsheet h1, .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-size: var(--size1); font-family: var(--font1); } .ui-dialog .tab-content .charsheet h1:not(input), .ui-dialog .tab-content .charsheet *[aria-level="1"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h1 *, .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-size: var(--size1); font-family: var(--font1); } .ui-dialog .tab-content .charsheet h1 *:not(input), .ui-dialog .tab-content .charsheet *[aria-level="1"] *:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .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-size: var(--size2); font-family: var(--font2); } .ui-dialog .tab-content .charsheet h2:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name]:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input), .ui-dialog .tab-content .charsheet *[aria-level="2"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h2 *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, .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-size: var(--size2); font-family: var(--font2); } .ui-dialog .tab-content .charsheet h2 *:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name] *:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *:not(input), .ui-dialog .tab-content .charsheet *[aria-level="2"] *:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h3, .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-size: var(--size3); font-family: var(--font3); } .ui-dialog .tab-content .charsheet h3:not(input), .ui-dialog .tab-content .charsheet *[aria-level="3"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h3 *, .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-size: var(--size3); font-family: var(--font3); } .ui-dialog .tab-content .charsheet h3 *:not(input), .ui-dialog .tab-content .charsheet *[aria-level="3"] *:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h4, .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); } .ui-dialog .tab-content .charsheet h4:not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(:where(input)) { text-transform: capitalize; } .ui-dialog .tab-content .charsheet h4:not(input), .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h4 *, .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); } .ui-dialog .tab-content .charsheet h4 *:not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(:where(input)) { text-transform: capitalize; } .ui-dialog .tab-content .charsheet h4 *:not(input), .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h5, .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); } .ui-dialog .tab-content .charsheet h5:not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(:where(input)) { text-transform: capitalize; } .ui-dialog .tab-content .charsheet h5:not(input), .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h5 *, .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); } .ui-dialog .tab-content .charsheet h5 *:not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(:where(input)) { text-transform: capitalize; } .ui-dialog .tab-content .charsheet h5 *:not(input), .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h6, .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); } .ui-dialog .tab-content .charsheet h6:not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(:where(input)) { text-transform: capitalize; } .ui-dialog .tab-content .charsheet h6:not(input), .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h6 *, .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); } .ui-dialog .tab-content .charsheet h6 *:not(:where(input)), .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(:where(input)) { text-transform: capitalize; } .ui-dialog .tab-content .charsheet h6 *:not(input), .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet .sheet-pictos, .ui-dialog .tab-content .charsheet .pictos { font-family: pictos; text-transform: none; } .ui-dialog .tab-content .charsheet .pictos3, .ui-dialog .tab-content .charsheet .sheet-pictos3 { font-family: pictos three; text-transform: none; } .ui-dialog .tab-content .charsheet .pictoscustom, .ui-dialog .tab-content .charsheet .sheet-pictoscustom { font-family: pictos custom; text-transform: none; } .ui-dialog .tab-content .charsheet .d4, .ui-dialog .tab-content .charsheet .sheet-d4 { font-family: dicefontd4 !important; text-transform: none !important; } .ui-dialog .tab-content .charsheet .d6, .ui-dialog .tab-content .charsheet .sheet-d6 { font-family: dicefontd6 !important; text-transform: none !important; } .ui-dialog .tab-content .charsheet .d8, .ui-dialog .tab-content .charsheet .sheet-d8 { font-family: dicefontd8 !important; text-transform: none !important; } .ui-dialog .tab-content .charsheet .d10, .ui-dialog .tab-content .charsheet .sheet-d10 { font-family: dicefontd10 !important; text-transform: none !important; } .ui-dialog .tab-content .charsheet .d12, .ui-dialog .tab-content .charsheet .sheet-d12 { font-family: dicefontd12 !important; text-transform: none !important; } .ui-dialog .tab-content .charsheet .d20, .ui-dialog .tab-content .charsheet .sheet-d20 { font-family: dicefontd20 !important; text-transform: none !important; } .ui-dialog .tab-content .charsheet .d30, .ui-dialog .tab-content .charsheet .sheet-d30 { font-family: dicefontd30 !important; text-transform: none !important; } .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"; } .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked { background-color: var(--checkedBackColor); } .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); } .ui-dialog .tab-content .charsheet input[type=number] { width: 3rem; -moz-appearance: textfield !important; text-align: center; } .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ui-dialog .tab-content .charsheet select, .ui-dialog .tab-content .charsheet .pseudo-select span, .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, .ui-dialog .tab-content .charsheet textarea, .ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])), .ui-dialog .tab-content .charsheet .uneditable-input { padding: var(--inputPadding); } .ui-dialog .tab-content .charsheet input:is([type=text], [type=number]), .ui-dialog .tab-content .charsheet textarea { cursor: auto; } .ui-dialog .tab-content .charsheet select, .ui-dialog .tab-content .charsheet .pseudo-select span, .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])), .ui-dialog .tab-content .charsheet .uneditable-input, .ui-dialog .tab-content .charsheet textarea { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; } .ui-dialog .tab-content .charsheet select, .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, .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); } .ui-dialog .tab-content .charsheet input { width: auto; } .ui-dialog .tab-content .charsheet input:placeholder { color: var(--placeholderColor); } .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before { content: "+"; } .ui-dialog .tab-content .charsheet textarea { resize: var(--textareaResize); white-space: pre-wrap; } .ui-dialog .tab-content .charsheet textarea.fixed { resize: none; overflow: auto; } .ui-dialog .tab-content .charsheet button { cursor: pointer; } .ui-dialog .tab-content .charsheet .roller { display: flex; align-items: center; gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .roller:before { content: "T"; font-family: dicefontd20; } .ui-dialog .tab-content .charsheet .collapse-container { display: grid; position: relative; } .ui-dialog .tab-content .charsheet .text-collapse { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; } .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 */ } .ui-dialog .tab-content .charsheet .text-collapse__text { display: inline; } .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; } .ui-dialog .tab-content .charsheet .text-collapse__check:checked + .text-collapse:before { content: var(--collapsedSymbol); } .ui-dialog .tab-content .charsheet .repitem:hover > .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, .ui-dialog .tab-content .charsheet .collapse-container:hover > .collapse, .ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container { opacity: var(--collapseHoverOpacity); } .ui-dialog .tab-content .charsheet .repitem > .collapse, .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; } .ui-dialog .tab-content .charsheet .repitem > .collapse:before, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:before { content: "y"; font-family: pictos; } .ui-dialog .tab-content .charsheet .repitem > .collapse:checked, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked { color: var(--collapseCollapsedColor); background-color: transparent; } .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .collapse-container .expanded, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .collapse-container .expanded { display: none !important; } .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * { display: none !important; } .ui-dialog .tab-content .charsheet .repitem > .collapse:not(:checked) ~ .collapsed, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:not(:checked) ~ .collapsed { display: none !important; } .ui-dialog .tab-content .charsheet .repitem > .collapse:hover, .ui-dialog .tab-content .charsheet .collapse-container > .collapse:hover { color: var(--collapseExpandedColor); } .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse { display: none; } .ui-dialog .tab-content .charsheet .fill-left { display: var(--fillLeftDisplay); align-self: var(--fillLeftAlignment); box-sizing: border-box; } .ui-dialog .tab-content .charsheet .fill-left__radio { appearance: none; -webkit-appearance: none; background-color: var(--fillLeftSelectedColor); width: 100%; height: 100%; cursor: pointer; } .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); } .ui-dialog .tab-content .charsheet .fill-left__radio:checked ~ .fill-left__radio { background-color: var(--fillLeftUnselectedColor); } .ui-dialog .tab-content .charsheet .input-label { display: inline-flex; gap: var(--input-label-gap); align-items: center; } .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > input[type=text] { flex: 1 1 0; } .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]) { flex: 0 0 auto; } .ui-dialog .tab-content .charsheet .input-label > :is(span, button) { text-transform: var(--input-label-text-transform); } .ui-dialog .tab-content .charsheet .input-label--dual { grid-template-columns: 1fr auto 1fr; grid-template-areas: "over over over" "under under under"; } .ui-dialog .tab-content .charsheet .input-label--dual > span:last-of-type { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet .input-label--dual > input:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } .ui-dialog .tab-content .charsheet .input-label--dual > .slash { line-height: 0rem; font-weight: normal; } .ui-dialog .tab-content .charsheet .headed-textarea { display: grid; grid-template-rows: auto 1fr; grid-template-columns: auto; grid-column: 1/-1; } .ui-dialog .tab-content .charsheet .headed-textarea :not(textarea):not(.adaptive) { justify-self: start; } .ui-dialog .tab-content .charsheet .headed-textarea .headed-textarea__header { grid-area: initial; } .ui-dialog .tab-content .charsheet .adaptive { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; position: relative; } .ui-dialog .tab-content .charsheet .adaptive > * { grid-area: content; } .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; } .ui-dialog .tab-content .charsheet .adaptive--text { min-height: 4rem; } .ui-dialog .tab-content .charsheet .adaptive--text__span { white-space: pre-wrap; padding: 2px; } .ui-dialog .tab-content .charsheet .adaptive--text__textarea { width: 100%; height: 100%; resize: none; } .ui-dialog .tab-content .charsheet .adaptive--text__textarea, .ui-dialog .tab-content .charsheet .adaptive--input__input { position: absolute; } .ui-dialog .tab-content .charsheet .adaptive--input__input { width: 100%; } .ui-dialog .tab-content .charsheet .adaptive--input__span { padding: 2px; min-height: 1.5rem; } .ui-dialog .tab-content .charsheet .repitem > input:not([type=checkbox]) { width: 100%; } .ui-dialog .tab-content .charsheet .repitem .headed-textarea, .ui-dialog .tab-content .charsheet .repitem .description { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet .repcontainer { display: grid; gap: var(--normal-gap); } .ui-dialog .tab-content .charsheet .repeating-container { display: grid; grid-template-areas: "header"; align-self: start; } .ui-dialog .tab-content .charsheet .repeating-container > .header { grid-area: header; } .ui-dialog .tab-content .charsheet .repeating-container :is(.repcontrol-button, .repcontrol_edit) { opacity: 0; transition: var(--revealTrans); } .ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) :is(.repcontrol-button, .repcontrol_edit) { opacity: 1; } .ui-dialog .tab-content .charsheet .repcontrol-button { align-self: start; } .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol { justify-self: end; z-index: 100; } .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol > .repcontrol_add { display: none !important; } .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); } .ui-dialog .tab-content .charsheet .repcontrol-button--add::before { inset: 0; place-self: center; font-family: var(--font-icon); font-size: 12px; content: "add"; } .ui-dialog .tab-content .charsheet .kmodal__button { all: initial; display: flex; margin: 0; padding: 0; cursor: pointer; } .ui-dialog .tab-content .charsheet .kmodal__checkbox[type=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; } .ui-dialog .tab-content .charsheet .tabs__container:not(.k-active-tab) { display: none !important; } .ui-dialog .tab-content .charsheet .tabs__nav-item { list-style: none; } .ui-dialog .tab-content .charsheet .tabs__nav-list { display: flex; } .sheet-rolltemplate-storypath { --inlineRollFont: var(--font6); --inlineRollSize: var(--size6); --inlineRollCritFont: var(--inlineRollFont); --inlineRollCritSize: var(--inlineRollSize); --inlineRollFumbleFont: var(--inlineRollFont); --inlineRollFumbleSize: var(--inlineRollSize); --inlineRollImportantFont: var(--inlineRollFont); --inlineRollImportantSize: var(--inlineRollSize); --lm-inlineRollBackColor: transparent; --dm-inlineRollBackColor: transparent; --inlineRollBackColor: var(--lm-inlineRollBackColor); --inlineRollColor: var(--fontColor); --lm-inlineRollCritBackColor: var(--lm-inlineRollBackColor); --dm-inlineRollCritBackColor: var(--dm-inlineRollBackColor); --inlineRollCritBackColor: var(--lm-inlineRollCritBackColor); --lm-inlineRollCritColor: #40E240; --dm-inlineRollCritColor: #40E240; --inlineRollCritColor: var(--lm-inlineRollCritColor); --lm-inlineRollFumbleBackColor: var(--lm-inlineRollBackColor); --dm-inlineRollFumbleBackColor: var(--dm-inlineRollBackColor); --inlineRollFumbleBackColor: var(--lm-inlineRollFumbleBackColor); --lm-inlineRollFumbleColor: #C70000; --dm-inlineRollFumbleColor: #C70000; --inlineRollFumbleColor: var(--lm-inlineRollCritColor); --lm-inlineRollImportantBackColor: var(--lm-inlineRollBackColor); --dm-inlineRollImportantBackColor: var(--dm-inlineRollBackColor); --inlineRollImportantBackColor: var(--lm-inlineRollImportantBackColor); --lm-inlineRollImportantColor: #000352; --dm-inlineRollImportantColor: #000352; --inlineRollImportantColor: var(--lm-inlineRollCritColor); --inlineRollPadTop: 0; --inlineRollPadRight: 0; --inlineRollPadBottom: 0; --inlineRollPadLeft: 0; --inlineRollMarginTop: 0; --inlineRollMarginRight: 0; --inlineRollMarginBottom: 0; --inlineRollMarginLeft: 0; --inlineRollBorderTop: 0; --inlineRollBorderRight: 0; --inlineRollBorderBottom: 0; --inlineRollBorderLeft: 0; --inlineRollPadding: var(--inlineRollPadTop) var(--inlineRollPadRight) var(--inlineRollPadBottom) var(--inlineRollPadLeft); --inlineRollMargin: var(--inlineRollMarginTop) var(--inlineRollMarginRight) var(--inlineRollMarginBottom) var(--inlineRollMarginLeft); --inlineRollBorder: var(--inlineRollBorderTop) var(--inlineRollBorderRight) var(--inlineRollBorderBottom) var(--inlineRollBorderLeft); } .sheet-rolltemplate-storypath .inlinerollresult { background-color: var(--inlineRollBackColor); color: var(--inlineRollColor); font-family: var(--inlineRollFont); font-size: var(--inlineRollSize); padding: var(--inlineRollPadding); border: var(--inlineRollBorder); margin: var(--inlineRollMargin); } .sheet-rolltemplate-storypath .inlinerollresult.fullcrit { background-color: var(--inlineRollCritBackColor); color: var(--inlineRollCritColor); font-family: var(--inlineRollCritFont); font-size: var(--inlineRollCritSize); padding: var(--inlineRollCritPadding); border: var(--inlineRollCritBorder); margin: var(--inlineRollCritMargin); } .sheet-rolltemplate-storypath .inlinerollresult.fullfail { background-color: var(--inlineRollFumbleBackColor); color: var(--inlineRollFumbleColor); font-family: var(--inlineRollFumbleFont); font-size: var(--inlineRollFumbleSize); padding: var(--inlineRollFumblePadding); border: var(--inlineRollFumbleBorder); margin: var(--inlineRollFumbleMargin); } .sheet-rolltemplate-storypath .inlinerollresult.importantroll { background-color: var(--inlineRollImportantBackColor); color: var(--inlineRollImportantColor); font-family: var(--inlineRollImportantFont); font-size: var(--inlineRollImportantSize); padding: var(--inlineRollImportantPadding); border: var(--inlineRollImportantBorder); margin: var(--inlineRollImportantMargin); } .ui-dialog .tab-content .charsheet, .sheet-rolltemplate-storypath { --grid-gap: 1rem; --half-gap: calc(var(--grid-gap) / 2); --tiny-gap: calc(var(--half-gap) / 2); --big-gap: calc(var(--grid-gap) * 2); --revealTime: 500ms; --delayTime: 200ms; --inputSwap: opacity var(--revealTime) ease var(--delayTime); --focusTiming: 500ms ease; --focusTrans: all var(--focusTiming); --borderColor: black; --fontColor: black; --backColor: #ffffff; --spanSectionColumn:1/-1; --displayBorderWidth: 2px; --innerFillPoint: 2px; --outerFillPoint: 5.5px; --midColor: transparent; --selectedRadio: black; --checkedBackColor: var(--selectedRadio); position: relative; gap: var(--grid-gap); } .ui-dialog .tab-content .charsheet .input-label > .adaptive, .sheet-rolltemplate-storypath .input-label > .adaptive { align-self: stretch; } .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, .sheet-rolltemplate-storypath select, .sheet-rolltemplate-storypath textarea, .sheet-rolltemplate-storypath input, .sheet-rolltemplate-storypath .uneditable-input, .sheet-rolltemplate-storypath label, .sheet-rolltemplate-storypath button { all: initial; font-family: var(--contentFont); } .ui-dialog .tab-content .charsheet *, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-storypath *, .sheet-rolltemplate-storypath textarea { color: black; transition: var(--focusTrans); font-family: var(--contentFont); } .ui-dialog .tab-content .charsheet button, .sheet-rolltemplate-storypath button { font-weight: bold; cursor: pointer; } .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-storypath textarea { resize: vertical; min-height: 3.5rem; white-space: pre-wrap; } .ui-dialog .tab-content .charsheet select, .ui-dialog .tab-content .charsheet textarea, .ui-dialog .tab-content .charsheet .adaptive--text__span, .ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])), .ui-dialog .tab-content .charsheet .uneditable-input, .sheet-rolltemplate-storypath select, .sheet-rolltemplate-storypath textarea, .sheet-rolltemplate-storypath .adaptive--text__span, .sheet-rolltemplate-storypath input:not(:is([type=radio], [type=checkbox])), .sheet-rolltemplate-storypath .uneditable-input { padding: 2px; } .ui-dialog .tab-content .charsheet select, .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])), .ui-dialog .tab-content .charsheet .uneditable-input, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-storypath select, .sheet-rolltemplate-storypath input:not(:where([type=checkbox], [type=radio])), .sheet-rolltemplate-storypath .uneditable-input, .sheet-rolltemplate-storypath textarea { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; } .ui-dialog .tab-content .charsheet select:not([readonly]):is(:hover, :focus), .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])):not([readonly]):is(:hover, :focus), .ui-dialog .tab-content .charsheet .uneditable-input:not([readonly]):is(:hover, :focus), .ui-dialog .tab-content .charsheet textarea:not([readonly]):is(:hover, :focus), .sheet-rolltemplate-storypath select:not([readonly]):is(:hover, :focus), .sheet-rolltemplate-storypath input:not(:where([type=checkbox], [type=radio])):not([readonly]):is(:hover, :focus), .sheet-rolltemplate-storypath .uneditable-input:not([readonly]):is(:hover, :focus), .sheet-rolltemplate-storypath textarea:not([readonly]):is(:hover, :focus) { border-width: 1px 3px; border-style: solid; border-color: black; border-radius: 5px; box-sizing: border-box; transition: var(--focusTrans); } .ui-dialog .tab-content .charsheet select:not([readonly]):focus, .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])):not([readonly]):focus, .ui-dialog .tab-content .charsheet .uneditable-input:not([readonly]):focus, .ui-dialog .tab-content .charsheet textarea:not([readonly]):focus, .sheet-rolltemplate-storypath select:not([readonly]):focus, .sheet-rolltemplate-storypath input:not(:where([type=checkbox], [type=radio])):not([readonly]):focus, .sheet-rolltemplate-storypath .uneditable-input:not([readonly]):focus, .sheet-rolltemplate-storypath textarea:not([readonly]):focus { background-color: #DCDCDC; transition: var(--focusTrans); } .ui-dialog .tab-content .charsheet select, .sheet-rolltemplate-storypath select { -webkit-apperance: none; appearance: none; text-transform: capitalize; overflow: hidden !important; white-space: nowrap; text-overflow: ellipsis; text-align: center; } .ui-dialog .tab-content .charsheet label[for], .ui-dialog .tab-content .charsheet .pointer, .sheet-rolltemplate-storypath label[for], .sheet-rolltemplate-storypath .pointer { cursor: pointer; } .ui-dialog .tab-content .charsheet input, .sheet-rolltemplate-storypath input { width: auto; } .ui-dialog .tab-content .charsheet input:placeholder, .sheet-rolltemplate-storypath input:placeholder { color: rgba(237, 237, 237, 0.5019607843); } .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before, .sheet-rolltemplate-storypath input.plus-control:not([value*="-"]) + span:before { content: "+"; } .ui-dialog .tab-content .charsheet span, .ui-dialog .tab-content .charsheet input, .ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-storypath span, .sheet-rolltemplate-storypath input, .sheet-rolltemplate-storypath textarea { font-size: 1rem; } .ui-dialog .tab-content .charsheet .hidden, .sheet-rolltemplate-storypath .hidden { display: none !important; } .ui-dialog .tab-content .charsheet .italics, .sheet-rolltemplate-storypath .italics { font-style: italic; } .ui-dialog .tab-content .charsheet h1, .ui-dialog .tab-content .charsheet h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet h3, .ui-dialog .tab-content .charsheet *[aria-level="1"], .ui-dialog .tab-content .charsheet *[aria-level="2"], .ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-storypath h1, .sheet-rolltemplate-storypath h2, .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .sheet-rolltemplate-storypath h3, .sheet-rolltemplate-storypath *[aria-level="1"], .sheet-rolltemplate-storypath *[aria-level="2"], .sheet-rolltemplate-storypath *[aria-level="3"] { text-transform: uppercase; font-weight: bold; } .ui-dialog .tab-content .charsheet h1, .ui-dialog .tab-content .charsheet h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet h3, .ui-dialog .tab-content .charsheet h4, .ui-dialog .tab-content .charsheet h5, .ui-dialog .tab-content .charsheet *[aria-level="1"], .ui-dialog .tab-content .charsheet *[aria-level="2"], .ui-dialog .tab-content .charsheet *[aria-level="3"], .ui-dialog .tab-content .charsheet *[aria-level="4"], .ui-dialog .tab-content .charsheet *[aria-level="5"], .ui-dialog .tab-content .charsheet span, .ui-dialog .tab-content .charsheet label, .sheet-rolltemplate-storypath h1, .sheet-rolltemplate-storypath h2, .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .sheet-rolltemplate-storypath h3, .sheet-rolltemplate-storypath h4, .sheet-rolltemplate-storypath h5, .sheet-rolltemplate-storypath *[aria-level="1"], .sheet-rolltemplate-storypath *[aria-level="2"], .sheet-rolltemplate-storypath *[aria-level="3"], .sheet-rolltemplate-storypath *[aria-level="4"], .sheet-rolltemplate-storypath *[aria-level="5"], .sheet-rolltemplate-storypath span, .sheet-rolltemplate-storypath label { line-height: normal; text-transform: capitalize; } .ui-dialog .tab-content .charsheet h1, .ui-dialog .tab-content .charsheet *[aria-level="1"], .sheet-rolltemplate-storypath h1, .sheet-rolltemplate-storypath *[aria-level="1"] { font-size: 3rem; display: block; font-family: var(--sheetHeaderFont); } .ui-dialog .tab-content .charsheet h1:not(input), .ui-dialog .tab-content .charsheet *[aria-level="1"]:not(input), .sheet-rolltemplate-storypath h1:not(input), .sheet-rolltemplate-storypath *[aria-level="1"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-storypath h2, .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .sheet-rolltemplate-storypath *[aria-level="2"] { font-size: 2.5rem; display: block; } .ui-dialog .tab-content .charsheet h2:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name]:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input), .ui-dialog .tab-content .charsheet *[aria-level="2"]:not(input), .sheet-rolltemplate-storypath h2:not(input), .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive).large > [name]:not(input), .sheet-rolltemplate-storypath *[aria-level="2"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h3, .ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-storypath h3, .sheet-rolltemplate-storypath *[aria-level="3"] { font-size: 2rem; display: block; } .ui-dialog .tab-content .charsheet h3:not(input), .ui-dialog .tab-content .charsheet *[aria-level="3"]:not(input), .sheet-rolltemplate-storypath h3:not(input), .sheet-rolltemplate-storypath *[aria-level="3"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h4, .ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-storypath h4, .sheet-rolltemplate-storypath *[aria-level="4"] { font-size: 1.5rem; font-weight: bold; display: block; } .ui-dialog .tab-content .charsheet h4:not(input), .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(input), .sheet-rolltemplate-storypath h4:not(input), .sheet-rolltemplate-storypath *[aria-level="4"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h5, .ui-dialog .tab-content .charsheet *[aria-level="5"], .sheet-rolltemplate-storypath h5, .sheet-rolltemplate-storypath *[aria-level="5"] { font-size: 1rem; font-style: italic; display: block; font-weight: bold; } .ui-dialog .tab-content .charsheet h5:not(input), .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(input), .sheet-rolltemplate-storypath h5:not(input), .sheet-rolltemplate-storypath *[aria-level="5"]:not(input) { text-align: center; } .ui-dialog .tab-content .charsheet h1, .ui-dialog .tab-content .charsheet *[aria-level="1"], .sheet-rolltemplate-storypath h1, .sheet-rolltemplate-storypath *[aria-level="1"] { display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; } .ui-dialog .tab-content .charsheet h2, .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-storypath h2, .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .sheet-rolltemplate-storypath *[aria-level="2"] { display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; } .ui-dialog .tab-content .charsheet h3, .ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-storypath h3, .sheet-rolltemplate-storypath *[aria-level="3"] { display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; } .ui-dialog .tab-content .charsheet h4, .ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-storypath h4, .sheet-rolltemplate-storypath *[aria-level="4"] { display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; } .ui-dialog .tab-content .charsheet h5, .ui-dialog .tab-content .charsheet *[aria-level="5"], .sheet-rolltemplate-storypath h5, .sheet-rolltemplate-storypath *[aria-level="5"] { display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; } .ui-dialog .tab-content .charsheet .roller, .sheet-rolltemplate-storypath .roller { display: inline-flex; align-items: center; gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .roller:before, .sheet-rolltemplate-storypath .roller:before { content: "K"; font-family: dicefontd10; text-transform: none; } .ui-dialog .tab-content .charsheet .pictos, .sheet-rolltemplate-storypath .pictos { font-family: pictos; text-transform: initial; } .ui-dialog .tab-content .charsheet .pictos3, .sheet-rolltemplate-storypath .pictos3 { font-family: pictos three; text-transform: initial; } .ui-dialog .tab-content .charsheet .pictoscustom, .sheet-rolltemplate-storypath .pictoscustom { font-family: pictos custom; text-transform: initial; } .ui-dialog .tab-content .charsheet input[type=checkbox], .sheet-rolltemplate-storypath input[type=checkbox] { align-self: center; border-radius: 3px; border: 1px solid black; width: 10px; min-width: 10px; height: 10px; min-height: 10px; cursor: pointer; } .ui-dialog .tab-content .charsheet input[type=checkbox]:checked, .sheet-rolltemplate-storypath input[type=checkbox]:checked { background-color: black; } .ui-dialog .tab-content .charsheet input[type=radio], .sheet-rolltemplate-storypath input[type=radio] { appearance: radio; } .ui-dialog .tab-content .charsheet input[type=number], .sheet-rolltemplate-storypath input[type=number] { width: 2em; -moz-appearance: textfield !important; text-align: center; } .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button, .sheet-rolltemplate-storypath input[type=number]::-webkit-inner-spin-button, .sheet-rolltemplate-storypath input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ui-dialog .tab-content .charsheet input input textarea.fixed, .sheet-rolltemplate-storypath input input textarea.fixed { resize: none; overflow: auto; } .ui-dialog .tab-content .charsheet .disable, .sheet-rolltemplate-storypath .disable { display: none !important; } .ui-dialog .tab-content .charsheet .span-all, .sheet-rolltemplate-storypath .span-all { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet section.page, .sheet-rolltemplate-storypath section.page { display: none; } .ui-dialog .tab-content .charsheet .navigable-section:not(.active), .sheet-rolltemplate-storypath .navigable-section:not(.active) { display: none !important; } .ui-dialog .tab-content .charsheet .pseudo-button, .sheet-rolltemplate-storypath .pseudo-button { display: inline; cursor: pointer; border-radius: 5px; text-transform: uppercase; border: 1px solid black; text-align: center; padding: 0 5px; } .ui-dialog .tab-content .charsheet .input-label, .sheet-rolltemplate-storypath .input-label { display: inline-flex; gap: var(--half-gap); align-items: center; } .ui-dialog .tab-content .charsheet .input-label.stacked, .sheet-rolltemplate-storypath .input-label.stacked { flex-direction: column-reverse; } .ui-dialog .tab-content .charsheet .input-label.stacked.center > *, .sheet-rolltemplate-storypath .input-label.stacked.center > * { text-align: center; } .ui-dialog .tab-content .charsheet .input-label.stacked:not(.center) > *, .sheet-rolltemplate-storypath .input-label.stacked:not(.center) > * { text-align: left; } .ui-dialog .tab-content .charsheet .input-label.stacked > [name], .sheet-rolltemplate-storypath .input-label.stacked > [name] { width: 100%; } .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive) > [name]:not([type=number], [type=checkbox], [type=radio], [type=roll], [type=action], select), .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive) > [name]:not([type=number], [type=checkbox], [type=radio], [type=roll], [type=action], select) { width: 0; flex: 1 1 0; } .ui-dialog .tab-content .charsheet .input-label:not(.stacked):not(.input-label--adaptive) > :not([name]), .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive) > :not([name]) { flex: 0 0 auto; } .ui-dialog .tab-content .charsheet .dual.input-label, .sheet-rolltemplate-storypath .dual.input-label { grid-template-columns: 1fr auto 1fr; grid-template-areas: "over over over" "under under under"; } .ui-dialog .tab-content .charsheet .dual.input-label > span:last-of-type, .sheet-rolltemplate-storypath .dual.input-label > span:last-of-type { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet .dual.input-label > input, .sheet-rolltemplate-storypath .dual.input-label > input { width: 100%; } .ui-dialog .tab-content .charsheet .dual.input-label > .slash, .sheet-rolltemplate-storypath .dual.input-label > .slash { line-height: 0rem; font-weight: normal; } .ui-dialog .tab-content .charsheet .headed-textarea, .sheet-rolltemplate-storypath .headed-textarea { display: grid; grid-template-rows: auto 1fr; grid-template-columns: auto; } .ui-dialog .tab-content .charsheet .boxed, .sheet-rolltemplate-storypath .boxed { border: 1px solid black; } .ui-dialog .tab-content .charsheet .boxed.thick-left, .sheet-rolltemplate-storypath .boxed.thick-left { border-left-width: 5px; } .ui-dialog .tab-content .charsheet .boxed.thick-bottom, .sheet-rolltemplate-storypath .boxed.thick-bottom { border-bottom-width: 5px; } .ui-dialog .tab-content .charsheet .boxed.thick-right, .sheet-rolltemplate-storypath .boxed.thick-right { border-right-width: 5px; } .ui-dialog .tab-content .charsheet .boxed.thick-top, .sheet-rolltemplate-storypath .boxed.thick-top { border-top-width: 5px; } .ui-dialog .tab-content .charsheet .underlined, .sheet-rolltemplate-storypath .underlined { border-radius: 0; border-bottom: 1px solid black; transition: var(--focusTrans); } .ui-dialog .tab-content .charsheet .small-scale-grid, .ui-dialog .tab-content .charsheet .small-scale-grid + fieldset + .repcontainer, .sheet-rolltemplate-storypath .small-scale-grid, .sheet-rolltemplate-storypath .small-scale-grid + fieldset + .repcontainer { display: grid; grid-template-columns: [header-start] repeat(auto-fit, minmax(15rem, 1fr)) [header-end]; grid-template-rows: [header-start] auto [header-end]; gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .small-scale-grid > .repitem, .ui-dialog .tab-content .charsheet .small-scale-grid + fieldset + .repcontainer > .repitem, .sheet-rolltemplate-storypath .small-scale-grid > .repitem, .sheet-rolltemplate-storypath .small-scale-grid + fieldset + .repcontainer > .repitem { display: flex; gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .small-scale-grid > .repitem > :is(.dot-row, input[type=text]), .ui-dialog .tab-content .charsheet .small-scale-grid + fieldset + .repcontainer > .repitem > :is(.dot-row, input[type=text]), .sheet-rolltemplate-storypath .small-scale-grid > .repitem > :is(.dot-row, input[type=text]), .sheet-rolltemplate-storypath .small-scale-grid + fieldset + .repcontainer > .repitem > :is(.dot-row, input[type=text]) { flex: 1 1 0; width: 100%; } .ui-dialog .tab-content .charsheet .repcontrol_move, .sheet-rolltemplate-storypath .repcontrol_move { display: none !important; } .ui-dialog .tab-content .charsheet .short-text, .sheet-rolltemplate-storypath .short-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-transform: initial; } *[hidden] { display: none !important; } .ui-dialog .tab-content .charsheet { padding-top: 0px; } .ui-dialog .tab-content .charsheet :placeholder-shown { text-transform: capitalize; } .ui-dialog .tab-content .charsheet .adaptive { display: grid; position: relative; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; } .ui-dialog .tab-content .charsheet .adaptive > * { grid-area: content; } .ui-dialog .tab-content .charsheet .adaptive > span { opacity: 0; z-index: -10; text-transform: initial; } .ui-dialog .tab-content .charsheet .adaptive--text { --height:4rem; min-block-size: var(--height); } .ui-dialog .tab-content .charsheet .adaptive--text__span { white-space: pre-wrap; display: block; min-block-size: var(--height); } .ui-dialog .tab-content .charsheet .adaptive--text__textarea { resize: none; position: absolute; width: 100%; height: 100%; min-height: 0px; } .ui-dialog .tab-content .charsheet .adaptive--text__textarea, .ui-dialog .tab-content .charsheet .adaptive--text__span { font-family: var(--contentFont); } .ui-dialog .tab-content .charsheet .adaptive--input { --inputMin:4rem; --inputMax:14rem; width: fit-content; overflow: hidden; } .ui-dialog .tab-content .charsheet .adaptive--input__span { white-space: nowrap; max-width: var(--inputMax); } .ui-dialog .tab-content .charsheet .adaptive--input__input:not([type=number]) { width: 100%; } .ui-dialog .tab-content .charsheet .repcontainer { padding-top: var(--half-gap); background-color: white; } .ui-dialog .tab-content .charsheet .repcontrol { display: none; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer .roller { place-self: center end; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer .repcontrol-button--edit { position: absolute; grid-column-end: -1; grid-row: 1/2; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer .description { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem { position: relative; background-color: white; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem input[type=text], .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem select { width: 100%; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem[data-reprowid=-COMPLETEHEADERSTYLE] { grid-column: 1/-1; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem > div:not(:is(.itemcontrol, .image-border, .display-target)) { padding: var(--tiny-gap); } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem .display-target { gap: var(--half-gap); } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem .btn.collapse { grid-area: collapse-button; position: absolute; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem .itemcontrol { padding: 0 var(--tiny-gap); border: 1px solid transparent; width: 100%; box-sizing: border-box; z-index: 10; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem .itemcontrol .btn { border-radius: 4px; border: 1px solid #ccc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); display: inline-block; padding: 0px 5px; margin: 0; font-size: 13px; line-height: 18px; color: #333; text-align: center; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; } .ui-dialog .tab-content .charsheet .pseudo-control + fieldset + .repcontainer > .repitem .itemcontrol .btn-danger { background-color: #da4f49; background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .ui-dialog .tab-content .charsheet .add-container { display: flex; position: relative; } .ui-dialog .tab-content .charsheet .repitem:is([data-reprowid^=-ADD], [data-reprowid^=-COMPLETEHEADERSTYLE]) { margin-bottom: var(--half-gap); } .ui-dialog .tab-content .charsheet .repitem:is([data-reprowid^=-ADD], [data-reprowid^=-COMPLETEHEADERSTYLE]) > .itemcontrol { display: none !important; } .ui-dialog .tab-content .charsheet .display-target { border: 0px solid transparent; padding: calc(var(--inset) / 2); } .ui-dialog .tab-content .charsheet :is(.image-borders, .bordered-item) + fieldset + .repcontainer > .repitem { display: grid; grid-template-areas: "content"; } .ui-dialog .tab-content .charsheet :is(.image-borders, .bordered-item) + fieldset + .repcontainer > .repitem > * { grid-area: content; } .ui-dialog .tab-content .charsheet :is(.image-borders, .bordered-item) + fieldset + .repcontainer > .repitem .itemcontrol { align-self: start; } .ui-dialog .tab-content .charsheet .image-border ~ * { z-index: 1; } .ui-dialog .tab-content .charsheet .display-control:not(:checked) + .display-target { display: none; } .ui-dialog .tab-content .charsheet .display-control:checked + .display-target { display: grid; } .ui-dialog .tab-content .charsheet .display-control:checked + .display-target.add-detail { display: flex; } .ui-dialog .tab-content .charsheet .display-control[value=""] + :is(label, .input-label) { display: none; } .ui-dialog .tab-content .charsheet .expanded-control + .display-target .conditional-show { display: none; } .ui-dialog .tab-content .charsheet .expanded-control[value*=short] + .display-target { display: none; } .ui-dialog .tab-content .charsheet .expanded-control:not([value*=short]) + .display-target { display: grid; } .ui-dialog .tab-content .charsheet .repcontrol-button:not(.repcontrol-button--inline) { align-self: center; text-transform: none; transition: opacity var(--revealTime); text-align: center; } .ui-dialog .tab-content .charsheet .repcontrol-button--add:before { font-family: pictos; content: "&"; } .ui-dialog .tab-content .charsheet .repcontrol-button--edit:before { font-family: pictos; content: "p"; } .ui-dialog .tab-content .charsheet .repcontrol-button--inline { align-self: start; } .ui-dialog .tab-content .charsheet section > .repcontrol-button--add { place-self: center start; margin-left: 5px; border-color: transparent; } .ui-dialog .tab-content .charsheet .subsystem-style ~ .repcontrol-button--edit, .ui-dialog .tab-content .charsheet .subsystem-style ~ .repcontrol-button--add { justify-self: start; grid-area: header; z-index: 10; color: white; } .ui-dialog .tab-content .charsheet .subsystem-style ~ .repcontrol-button--edit { justify-self: end; margin-right: var(--half-gap); } .ui-dialog .tab-content .charsheet .collapse-interface { position: absolute; grid-column: 1/2; grid-row: 1/2; left: -24px; top: 0; font-family: pictos; opacity: 0; cursor: pointer; transition: var(--focusTrans) 500ms; padding: 3px 4px; } .ui-dialog .tab-content .charsheet div:is(:hover, :focus, :focus-within) > .collapse-interface { opacity: 1; transition: var(--focusTrans); } .ui-dialog .tab-content .charsheet .collapse-control[value="0"] + .collapse-interface:before { content: "_"; } .ui-dialog .tab-content .charsheet .collapse-control:not([value="0"]) + .collapse-interface:before { content: "|"; } .ui-dialog .tab-content .charsheet .repitem:hover .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, .ui-dialog .tab-content .charsheet .collapse-container:hover .collapse, .ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container { opacity: 1; } .ui-dialog .tab-content .charsheet .repitem .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; } .ui-dialog .tab-content .charsheet .repitem .collapse:before, .ui-dialog .tab-content .charsheet .collapse-container .collapse:before { content: "y"; font-family: pictos; } .ui-dialog .tab-content .charsheet .repitem .collapse:checked, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked { color: var(--unselectedColor1); background-color: transparent; } .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container .expanded, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container .expanded { display: none !important; } .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .collapse-container .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * { display: none !important; } .ui-dialog .tab-content .charsheet .repitem .collapse:not(:checked) ~ .collapsed, .ui-dialog .tab-content .charsheet .collapse-container .collapse:not(:checked) ~ .collapsed { display: none !important; } .ui-dialog .tab-content .charsheet .repitem .collapse:hover, .ui-dialog .tab-content .charsheet .collapse-container .collapse:hover { color: var(--selectedColor); } .ui-dialog .tab-content .charsheet .split { display: flex; gap: var(--grid-gap); } .ui-dialog .tab-content .charsheet .dot-row { align-items: center; gap: var(--tiny-gap); } .ui-dialog .tab-content .charsheet .dot-row:not(.contents) { display: flex; } .ui-dialog .tab-content .charsheet .dot-row.boxes .dot { border-radius: 0; } .ui-dialog .tab-content .charsheet .dot-row .dot-number { display: none; } .ui-dialog .tab-content .charsheet .dot-row > :not(:is(.dot-button-container, .dot-number)):is(:first-child, :last-child) { place-self: center start; flex: 1 1 0; width: 100%; } .ui-dialog .tab-content .charsheet .dot-row > :not(:is(.dot-button-container, .dot-number)):first-child { text-align: left; } .ui-dialog .tab-content .charsheet .dot-row > :not(:is(.dot-button-container, .dot-number)):last-child { text-align: right; } .ui-dialog .tab-content .charsheet .dot-button-container { display: inline-flex; gap: var(--tiny-gap); align-items: center; } .ui-dialog .tab-content .charsheet .dot-button-container .dot, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot { -webkit-apperance: none; appearance: none; width: 12px; border: 1px solid black; } .ui-dialog .tab-content .charsheet .dot-button-container .dot.no-fill, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot.no-fill { background: white; } .ui-dialog .tab-content .charsheet .dot-button-container .dot:not(.no-fill), .ui-dialog .tab-content .charsheet .dot-button-container .dot.no-fill:checked, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot:not(.no-fill), .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot.no-fill:checked { background-color: var(--selectedRadio); } .ui-dialog .tab-content .charsheet .dot-button-container .dot:not(.no-fill), .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot:not(.no-fill) { order: 1; } .ui-dialog .tab-content .charsheet .dot-button-container .dot:not(.no-fill):not(.no-clear):checked, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot:not(.no-fill):not(.no-clear):checked { display: none; } .ui-dialog .tab-content .charsheet .dot-button-container .dot:not(.no-fill).clearer, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot:not(.no-fill).clearer { order: 2; } .ui-dialog .tab-content .charsheet .dot-button-container .dot:not(.no-fill).clearer:checked, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot:not(.no-fill).clearer:checked { display: none; } .ui-dialog .tab-content .charsheet .dot-button-container .dot:not(.no-fill):checked ~ .dot, .ui-dialog .tab-content .charsheet .dot-button-container .readonly-dot:not(.no-fill):checked ~ .dot { order: 3; background-color: white; } .ui-dialog .tab-content .charsheet .dot-button-container .dot { cursor: pointer; } .ui-dialog .tab-content .charsheet .dot-button-container .dot[value="0"] + .readonly-dot { display: none; } .ui-dialog .tab-content .charsheet .dot-button-container:is(:hover, :focus-within, :focus) .clearer { background-color: var(--selectedRadio); background-image: linear-gradient(45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px)), linear-gradient(-45deg, transparent 0% 48%, white 48% calc(48% + 1px), transparent calc(48% + 1px)); border-color: transparent; } #sheet { display: grid; align-items: start; gap: var(--big-gap); grid-template-columns: repeat(auto-fit, minmax(375px, 1fr)); } #sheet > section { align-self: start; } #sheet > section h2, #sheet > section .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet #sheet > section .input-label:not(.stacked).large > [name], #sheet > section .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive).large > [name], .sheet-rolltemplate-storypath #sheet > section .input-label:not(.stacked):not(.input-label--adaptive).large > [name], #sheet > section [aria-level="2"] { grid-area: header; width: 100%; } #sheet > section h2.collapse ~ *:not(h2, [aria-level="2"]), #sheet > section .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > .collapse[name] ~ *:not(h2, [aria-level="2"]), .ui-dialog .tab-content .charsheet #sheet > section .input-label:not(.stacked).large > .collapse[name] ~ *:not(h2, [aria-level="2"]), #sheet > section .sheet-rolltemplate-storypath .input-label:not(.stacked):not(.input-label--adaptive).large > .collapse[name] ~ *:not(h2, [aria-level="2"]), .sheet-rolltemplate-storypath #sheet > section .input-label:not(.stacked):not(.input-label--adaptive).large > .collapse[name] ~ *:not(h2, [aria-level="2"]), #sheet > section [aria-level="2"].collapse ~ *:not(h2, [aria-level="2"]) { display: none; } #sheet > section h3.collapse ~ *:not(h2, [aria-level="2"]), #sheet > section [aria-level="3"].collapse ~ *:not(h2, [aria-level="2"]) { display: none; } #main :is(article, .subsystem-display):not(.active) { display: none; } #main .repeat-columns { display: grid; gap: var(--half-gap); place-items: center; } #main .display-target:not([class*=short]) .clash { grid-column: 1/-1; display: grid; grid-template-columns: auto 1fr; } #main .display-target:not([class*=short]) .clash .select-container { grid-template-columns: 1fr auto 1fr; } #main .display-target:not([class*=short]) .clash .select-container .vs { grid-column: 1/-1; } #main .display-target > .clash { gap: var(--half-gap); } #main .display-target > .clash .select-container { grid-column: span 2; display: grid; gap: var(--half-gap); } #main .display-target > .clash .select-container span { place-self: center; text-transform: uppercase; } #main .display-target[class*=short] .clash { grid-column: span 2; display: none; grid-template-columns: repeat(4, auto) 1fr repeat(3, auto); } #main .display-target[class*=short] .clash span { place-self: center; text-transform: uppercase; } #main .display-target[class*=short] .clash-display-control:not([value=select]) ~ .clash { display: grid; } #main .image-display-control:is([value=""], :not([value])) + img { display: none; } #main .inline-fieldset__summary { padding: 0; } #main .statblock__row { display: grid; gap: var(--half-gap); grid-template-columns: auto; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: var(--tiny-gap); } #main .statblock__row--auto-grid { grid-auto-columns: auto; justify-content: start; } #main .statblock__row--inline-container { grid-template-columns: auto 1fr repeat(2, auto); } #main .statblock__row--flex { display: flex; flex-wrap: wrap; gap: var(--half-gap); } #main .inline-fieldset + fieldset + .repcontainer { display: flex; align-content: center; flex-wrap: wrap; gap: var(--tiny-gap); padding: 0; } #main .inline-fieldset + fieldset + .repcontainer > .repitem { display: inline; } #main .inline-fieldset + fieldset + .repcontainer > .repitem .repcontrol_move { display: none; } #main .inline-fieldset + fieldset + .repcontainer > .repitem > .display-control:checked + .inline-fieldset__summary { display: inline; } #main .inline-fieldset + fieldset + .repcontainer > .repitem:not(:last-child) > .inline-fieldset__summary .inline-fieldset__summary__text:after { content: ","; } #main .inline-fieldset + fieldset + .repcontainer > .repitem:first-child .collapse-interface { top: 2rem; } #main .inline-fieldset + fieldset + .repcontainer .statblock__row--flex { justify-content: space-between; gap: var(--half-gap); padding-inline: 0; } #main .inline-fieldset + fieldset + .repcontainer .statblock__row--flex > .input-label { max-width: 100%; } #main .inline-fieldset + fieldset + .repcontainer .input-label { flex: 1 1 0; } #main .inline-fieldset + fieldset + .repcontainer .input-label:last-child { width: 100%; } #main .inline-fieldset + fieldset + .repcontainer .input-label__input[type=number] { min-width: 2rem; } #main .inline-fieldset + fieldset + .repcontainer .input-label__input:not([type=number]) { min-width: 4rem; } #main .hide-control:checked + .display-target { display: none; } .has-label--uppercase { text-transform: uppercase !important; } .has-label--lowercase { text-transform: lowercase !important; } .has-label--capitalize { text-transform: capitalize !important; } .ui-dialog .tab-content .charsheet h3.subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet h3.subsystem-style.system-scion-hero, .ui-dialog .tab-content .charsheet *[aria-level="3"].subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet *[aria-level="3"].subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath h3.subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath h3.subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath *[aria-level="3"].subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath *[aria-level="3"].subsystem-style.system-scion-hero { background-color: darkgrey; color: white; } .ui-dialog .tab-content .charsheet h4.subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet h4.subsystem-style.system-scion-hero, .ui-dialog .tab-content .charsheet *[aria-level="4"].subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet *[aria-level="4"].subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath h4.subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath h4.subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath *[aria-level="4"].subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath *[aria-level="4"].subsystem-style.system-scion-hero { background-color: darkgrey; color: white; } .ui-dialog .tab-content .charsheet h5.subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet h5.subsystem-style.system-scion-hero, .ui-dialog .tab-content .charsheet *[aria-level="5"].subsystem-style.system-scion-origin, .ui-dialog .tab-content .charsheet *[aria-level="5"].subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath h5.subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath h5.subsystem-style.system-scion-hero, .sheet-rolltemplate-storypath *[aria-level="5"].subsystem-style.system-scion-origin, .sheet-rolltemplate-storypath *[aria-level="5"].subsystem-style.system-scion-hero { background-color: darkgrey; color: white; } #settings { display: grid; grid-template-columns: [header-start] repeat(auto-fit, minmax(315px, 1fr)) [header-end]; grid-template-rows: [header-start] auto [header-end]; gap: var(--big-gap); } #settings h1 { grid-area: header; } #settings > section { border: 1px solid black; padding: 5px; display: grid; grid-template-columns: [header-start] repeat(auto-fit, minmax(150px, 1fr)) [header-end]; gap: var(--grid-gap); align-content: start; } #settings > section > h2 { grid-column: 1/-1; } #antagonist { --antagonistHeadColor:transparent; --antagonistHeadFontColor:black; display: grid; gap: var(--big-gap); grid-template-columns: minmax(375px, 1fr); } #antagonist h1, #antagonist *[aria-level="1"] { font-size: 2rem; } #antagonist h2, #antagonist *[aria-level="2"] { font-size: 1.75rem; } #antagonist h3, #antagonist *[aria-level="3"] { font-size: 1.5rem; } #antagonist h4, #antagonist *[aria-level="4"] { font-size: 1.25rem; } #antagonist h5, #antagonist *[aria-level="5"] { font-size: 1rem; } #antagonist.subsystem-style.system-scion-origin .statblock__row--header { --antagonistHeadColor:#323f28; --antagonistHeadFontColor:white ; } #antagonist.subsystem-style.system-scion-hero .statblock__row--header { --antagonistHeadColor:#504436; --antagonistHeadFontColor:white; } #antagonist .statblock__row--header { background-color: var(--antagonistHeadColor); } #antagonist .statblock__row--header input:not(:where([type=checkbox], [type=radio])):not([readonly]):focus { color: black; } #antagonist .statblock__row--header * { color: var(--antagonistHeadFontColor); } #antagonist [class*=statblock__row] { margin-bottom: var(--grid-gap); } #gm-screen, #party-screen { display: grid; gap: var(--big-gap); grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)); } #gm-screen > *, #party-screen > * { align-self: start; } #tension, #party-momentum { display: grid; gap: var(--half-gap); } #tension > .dot-row, #party-momentum > .dot-row { place-self: center; } #character_details { grid-column: 1/-1; display: grid; grid-gap: var(--half-gap); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } #character_details > .input-label { width: 100%; } #momentum { display: grid; gap: var(--half-gap); } #momentum:not(.system-scion-hero) { grid-template-columns: 1fr; grid-template-areas: "header" "buttons"; } #momentum.system-scion-hero { grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "momentum legend" "momentum legend-max"; align-items: center; } #momentum.system-scion-hero .momentum-content { grid-area: momentum; } #momentum.system-scion-hero .legend-content { grid-area: legend; } #momentum.system-scion-hero .legend-max-content { grid-area: legend-max; } #momentum > .dot-row { place-self: center; } #momentum.system-scion-demigod { grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "momentum legend" "momentum legend-max"; align-items: center; } #momentum.system-scion-demigod .momentum-content { grid-area: momentum; } #momentum.system-scion-demigod .legend-content { grid-area: legend; } #momentum.system-scion-demigod .legend-max-content { grid-area: legend-max; } #momentum > .dot-row { place-self: center; } #divinity { display: grid; gap: var(--half-gap); grid-template-areas: "header"; } #divinity.system-scion-demigod { grid-template-areas: "header"; align-items: center; } #divinity > .dot-row { place-self: center; } #virtue { display: grid; gap: var(--half-gap); grid-template-areas: "header"; } #skills { display: grid; gap: var(--half-gap); grid-template-areas: "header"; grid-column: 1/-1; } #skills .repcontainer { display: grid; column-gap: var(--big-gap); row-gap: var(--half-gap); grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); } #skills .repcontainer .repitem { display: inline-flex; gap: var(--half-gap); width: 100%; } #skills .repcontainer .repitem > button { flex: 1 1 0; } #skills .repcontainer .repitem .dot-row { flex: 1 1 auto; gap: var(--half-gap); } #skills .repcontainer .repitem .dot-row > input { width: 0; flex: 1 1 0; } #attributes { display: grid; gap: var(--half-gap); grid-column: var(--spanSectionColumn); grid-template-rows: repeat(4, auto); grid-template-columns: auto repeat(3, 1fr); gap: var(--half-gap) var(--grid-gap); grid-template-areas: "header header header header" ". mental-head physical-head social-head" "power-head mental-power physical-power social-power " "finesse-head mental-finesse physical-finesse social-finesse " "resistance-head mental-resistance physical-resistance social-resistance "; } #attributes > .approach-container { display: contents; } #attributes > .approach-container.power h4 { grid-area: power-head; } #attributes > .approach-container.finesse h4 { grid-area: finesse-head; } #attributes > .approach-container.reistance h4 { grid-area: reistance-head; } #attributes > .approach-container > :nth-child(2) { grid-column: 2; } #attributes > .approach-container > :nth-child(3) { grid-column: 3; } #attributes > .approach-container > :nth-child(4) { grid-column: 4; } #attributes .dot-row { display: grid; grid-template-columns: 9rem auto; place-content: center; } #attributes h3[data-i18n=mental] { grid-area: mental-head; } #attributes h3[data-i18n=physical] { grid-area: physical-head; } #attributes h3[data-i18n=social] { grid-area: social-head; } #attributes h4 { place-self: center start; } #health { display: grid; gap: var(--half-gap); grid-template-columns: repeat(2, 1fr); grid-template-areas: "header header"; } #health .input-label--button { justify-self: center; } #health .repitem { align-self: start; display: inline-block; margin-bottom: var(--half-gap); } #health .repcontainer { display: block; grid-column: 1/-1; } #health .type-control[value="taken out"] ~ .type, #health .type-control:not([value="taken out"]) ~ .taken-out { display: none; } #health .type-control[value*=short-] ~ .type > .adaptive--text { display: none; } #health .taken-out { display: grid; gap: var(--half-gap); grid-template-columns: auto auto; } #health .type { display: grid; gap: var(--half-gap); grid-template-columns: auto auto 1fr; grid-template-areas: "checkbox select name" "description description description"; } #health .repitem:last-of-type > .itemcontrol { display: none; } #health .initiative-label { grid-column: 1/-1; justify-self: center; } #deeds { gap: var(--half-gap); } #deeds .content, #deeds .header { display: contents; } #deeds .display-control:not([value=header]) ~ .header, #deeds .display-control:is([value=header], [value=loading]) ~ .content { display: none; } #deeds input[type=checkbox] { flex: 0 0 auto; } #deeds .repcontainer { row-gap: var(--half-gap); } #deeds .repitem { display: grid; grid-template-columns: auto 1fr auto; gap: var(--tiny-gap); align-items: start; } #deeds .repitem input[type=checkbox] { align-self: unset; } #deeds .adaptive--text { --height:1.5rem; } #deeds .experience { --inputSize:10rem; padding: 5px; display: grid; grid-template-columns: repeat(3, minmax(calc(var(--inputSize) / 2), var(--inputSize))); justify-content: center; align-items: center; gap: var(--half-gap); } #deeds .experience :first-child { line-height: 1rem; grid-column: 1/-1; } #deeds .experience .slash { place-self: center; font-size: 1.5rem; font-weight: bold; line-height: 1rem; } #deeds .experience input[type=number] { width: 100%; } #paths { gap: var(--half-gap); --masterColumns: 6rem 1fr auto; } #paths h5 { place-self: center start; } #paths .dot-row, #paths .dot-number { place-self: center end; } #paths .short-master { grid-template-areas: "type name status" "description description description"; } #paths .short-master span[role=heading] { text-align: left; } #paths .short-master, #paths .master { grid-template-columns: var(--masterColumns); } #paths .master { grid-template-areas: "type name status" "skills skills skills" "description description description"; } #paths .master .skills { grid-area: skills; } #paths .short-contact { grid-template-columns: auto repeat(2, 1fr) 2rem; } #paths .contact { grid-template-columns: auto repeat(2, 1fr) auto; grid-template-areas: "header name tag dot" "description description description description"; } #paths .short-access, #paths .short-group { grid-template-columns: auto 1fr; grid-template-areas: "header description"; } #paths .access, #paths .group { grid-template-columns: 1fr; grid-template-rows: repeat(2, auto); grid-template-areas: "header" "description"; } #paths .short-obligation { grid-template-columns: auto 1fr auto; } #paths .obligation { grid-template-columns: 1fr auto; grid-template-rows: repeat(2, auto); grid-template-areas: "header select" "description description"; } #calling { gap: var(--half-gap); } #calling .calling { grid-template-columns: auto 1fr repeat(5, auto); grid-template-areas: "button name dots"; } #calling .calling .dot-button-container { grid-area: dots; } #calling .calling .used { --selectedRadio: grey; } #calling .calling .used .dot + .readonly-dot { z-index: 10; } #calling .calling .used .dot:checked + .readonly-dot ~ .readonly-dot { z-index: -10; } #calling .short-knack { grid-template-columns: auto 1fr auto auto; } #calling .knack { grid-template-columns: auto 1fr auto auto; grid-template-areas: "enable name select roll" ". . . ." ". description description description"; } #calling .knack .description { grid-area: description; } #calling .repitem > .display-target > .clash { grid-column: 2/-1; } #purview .short-master * { text-align: left; } #purview .boon, #purview .short-boon { grid-template-columns: repeat(2, 1fr); } #purview .boon .name, #purview .short-boon .name { text-align: left; } #birthrights { --startRow: "header header header" "name name rating" ; } #birthrights .repitem:not(:last-child) { margin-bottom: var(--half-gap); } #birthrights .display-target { grid-template-areas: var(--startRow); } #birthrights .display-target:not([class*=short]) { grid-template-columns: 2fr repeat(2, 1fr); } #birthrights .display-target[class*=short] { grid-template-columns: 1fr 1fr 2rem; } #birthrights .display-target[class*=short] .input-label:nth-child(odd) { grid-column: span 2; } #birthrights .display-target .detail-container { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--half-gap); } #birthrights .display-target .name { grid-area: name; } #birthrights .display-target .rating { grid-area: rating; } #birthrights .display-target > h5 { grid-column: 1/-1; place-self: center start; } #birthrights .expanded-control[value=relic] + .display-target .relic { display: flex; } #birthrights .expanded-control[value=guide] + .display-target .guide { display: flex; } #birthrights .expanded-control[value=creature] + .display-target .creature { display: flex; } #birthrights .expanded-control[value=follower] + .display-target .follower { display: flex; } #birthrights *[role=heading] { place-self: center start; } #birthrights .repcontainer:not(:empty) ~ .add-container { margin-top: -14px; background-image: var(--image-marble-right), var(--image-marble-left), var(--image-marble-bottom); background-repeat: repeat-y, repeat-y, no-repeat; background-position: top right var(--offset), top left var(--offset), bottom var(--offset) left; background-size: var(--short-side) max(981px, 100%), var(--short-side) max(981px, 100%), max(1500px, 100%) var(--short-side); clip-path: var(--bottomNotch); } #birthrights .repcontainer .repitem:last-child .image-border { clip-path: var(--topNotch); background-image: var(--image-marble-top), var(--image-marble-right), var(--image-marble-left); background-repeat: no-repeat, repeat-y, repeat-y; background-position: top var(--offset) left, top right var(--offset), top left var(--offset); background-size: max(1500px, 100%) var(--short-side), var(--short-side) max(981px, 100%), var(--short-side) max(981px, 100%); } #birthrights .repcontrol-button.repcontrol-button--add { text-transform: capitalize; } #equipment .display-control[value*=short] + .image-border { display: none; } #equipment .repcontainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--tiny-gap) var(--grid-gap); } #equipment .repitem { align-self: start; display: inline-grid; width: 100%; margin-bottom: var(--half-gap); box-sizing: border-box; } #equipment .display-target { grid-template-columns: 1fr 1fr; } #equipment .display-target span { min-height: 1rem; } #equipment .display-target > span:first-of-type { place-self: end start; } #equipment .display-target > span:not(:first-of-type) { place-self: end end; } #equipment .display-target.short-equipment { border-bottom: 1px solid black; } #equipment .display-target.short-equipment > * { align-self: start; } #equipment .detail-container { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--half-gap); } #equipment .name { grid-area: name; } #equipment .rating { grid-area: rating; } #equipment > h5 { grid-column: 1/-1; place-self: center start; } #equipment .marvels, #equipment .special { grid-column: 1/-1; } #equipment .marvels .adaptive, #equipment .special .adaptive { flex: 1 auto; } .expanded-control[value=boon] + .display-target .boon { display: flex; } .expanded-control[value=marvel] + .display-target .marvel { display: flex; } .expanded-control[value=special] + .display-target .special { display: flex; } .expanded-control[value=scale] + .display-target .scale { display: flex; } #notes { grid-column-end: -1; grid-template-areas: "header" "content"; } #notes .adaptive--text { grid-column: 1/-1; } #move-defense { place-content: start center; grid-template-columns: auto 3em; } #move-defense :not(input) { justify-self: start; } #collateral { --buttonSize:30px; display: grid; grid-template-columns: 1fr var(--buttonSize) auto var(--buttonSize) 1fr; row-gap: var(--half-gap); grid-template-areas: "header header header header header" ". . fill button ."; } #collateral h2 { grid-area: header; } #collateral .dot-row { grid-area: fill; } #collateral button { grid-area: button; justify-items: center; } .sheet-rolltemplate-storypath { --templateRadius: 1rem; --dieSize: 50px; --templateBorderW: 2px 5px 2px 5px; --fumbleColor: red; --critColor: green; --innerBorderRadius: 5px; --borderSize:1px; font-size: 13px; margin-left: -40px; margin-right: -5px; filter: drop-shadow(var(--borderSize) 0 black) drop-shadow(calc(var(--borderSize) * -1) 0 black); } .sheet-rolltemplate-storypath:not(:first-child) { margin-top: 10px; } .sheet-rolltemplate-storypath:not(:first-child):has(.sheet-continuation) { margin-top: -33px; } .sheet-rolltemplate-storypath:first-child .sheet-continuation { margin-top: -9px; } .sheet-rolltemplate-storypath span { font-size: 1em; } .sheet-rolltemplate-storypath h3 { font-size: 1.75em; } .sheet-rolltemplate-storypath h4 { font-size: 1.5em; } .sheet-rolltemplate-storypath h5 { font-size: 1em; } .sheet-rolltemplate-storypath > .sheet-template { overflow: hidden; } .sheet-rolltemplate-storypath > .sheet-template:before, .sheet-rolltemplate-storypath > .sheet-template > .sheet-upper-blur, .sheet-rolltemplate-storypath > .sheet-template > .sheet-lower-blur { z-index: -1; } .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation .sheet-results { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--half-gap); } .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child:before, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child > .sheet-upper-blur, .sheet-rolltemplate-storypath > .sheet-template.sheet-continuation:first-child > .sheet-lower-blur { z-index: 0; } .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult { position: relative; font-size: 1.5em; } .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult[title*="[computed value]"], .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult[original-title*="[computed value]"] { pointer-events: none; } .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult, .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult.fullcrit, .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult.fullfail, .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult.importantroll { border: none; background-color: transparent; } .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult.fullcrit { color: green; } .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult.fullfail { color: red; } .sheet-rolltemplate-storypath > .sheet-template .inlinerollresult.importantroll { color: blue; } .sheet-rolltemplate-storypath .sheet-header { padding: 5px; display: grid; grid-template-columns: 1fr 2rem 1fr; gap: var(--half-gap); } .sheet-rolltemplate-storypath .sheet-header .sheet-character_name { grid-column: 1/-1; place-self: center end; } .sheet-rolltemplate-storypath .sheet-header .sheet-title { grid-column: 1/-1; place-self: center; } .sheet-rolltemplate-storypath .sheet-template-row { padding: 5px; grid-template-columns: minmax(6em, 1fr) repeat(auto-fit, minmax(1rem, 1fr)); place-items: center; } .sheet-rolltemplate-storypath .sheet-template-row:nth-child(odd) { background-color: lightgrey; } .sheet-rolltemplate-storypath .sheet-template-row > *:first-child { place-self: center start; }