@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap"); @import url("https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Romanesco&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"); html { font-size: 16px; } body { --font1:var(--topHeadFont); --font2:var(--topHeadFont); --font3:var(--midHeadFont); --font4:var(--midHeadFont); --font5:var(--midHeadFont); --font6:var(--contentHeadFont); --font7:var(--contentHeadFont); --baseFontSize: 16px; --size1:300%; --size2:250%; --size3:200%; --size4:150%; --size5:125%; --size6:100%; --size7:87.5%; --icon-size:24px; --font-icon: "Material Icons"; --normal-gap-x:1rem; --normal-gap-y:1rem; --normal-gap: var(--normal-gap-x); --half-gap-x:calc(var(--normal-gap-x) / 2); --half-gap-y:calc(var(--normal-gap-y) / 2); --half-gap: var(--half-gap-x); --tiny-gap-x:calc(var(--half-gap-x) / 2); --tiny-gap-y:calc(var(--half-gap-y) / 2); --tiny-gap: var(--tiny-gap-x); --big-gap-x:calc(var(--normal-gap-x) * 2); --big-gap-y:calc(var(--normal-gap-y) * 2); --big-gap: var(--big-gap-x); --lm-backColor:#fff; --dm-backColor:var(--dark-surface1); --backColor:var(--lm-backColor); --lm-selectedColor:#000; --dm-selectedColor:#007476; --selectedColor:var(--lm-selectedColor); --lm-unselectedColor1:lightgrey; --dm-unselectedColor1:#0e0e0e; --unselectedColor1:var(--lm-unselectedColor1); --lm-unselectedColor2:transparent; --dm-unselectedColor2:transparent; --unselectedColor2:var(--lm-unselectedColor2); --lm-checkColor:#000; --dm-checkColor:#ff0000; --checkColor:var(--lm-checkColor); --lm-checkedBackColor:transparent; --dm-checkedBackColor:transparent; --checkedBackColor:var(--lm-checkedBackColor); --lm-borderColor:#000; --dm-borderColor:lightgrey; --borderColor:var(--lm-borderColor); --lm-fontColor:#0f0f0f; --dm-fontColor:var(--dark-primarytext); --fontColor:var(--lm-fontColor); --lm-disabledColor:var(--lm-unselectedColor1); --dm-disabledColor:var(--dm-unselectedColor1); --disabledColor:var(--lm-disabledColor); --checkContent: "✓"; --checkWeight: bold; --checkSize: 150%; --checkLineHeight: calc(var(--checkSize) / 3); --checkboxBorderWidth: var(--borderWidth); --checkboxBorderStyle: var(--borderStyle); --lm-checkboxBorderColor: var(--lm-borderColor); --dm-checkboxBorderColor: var(--dm-borderColor); --checkboxBorderColor: var(--lm-checkBorderColor); --checkboxWidth: 14px; --checkboxHeight: 14px; --inputTopPadding: 2px; --inputRightPadding: 2px; --inputBottomPadding: 2px; --inputLeftPadding: 2px; --inputPadding: var(--inputTopPadding) var(--inputRightPadding) var(--inputBottomPadding) var(--inputLeftPadding); --lm-placeholderColor:#ededed80; --dm-placeholderColor:#3f3f3f80; --placeholderColor: var(--lm-placeholderColor); --textareaResize: vertical; --borderWidth:1px; --borderStyle:solid; --expandedSymbol:"unfold_less"; --collapsedSymbol: "unfold_more"; --collapseHoverOpacity: 1; --collapseBaseOpacity: 0; --lm-collapseExpandedColor:var(--lm-selectedColor); --dm-collapseExpandedColor:var(--dm-selectedColor); --collapseExpandedColor: var(--lm-collapseExpandedColor); --lm-collapseCollapsedColor:var(--lm-unselectedColor); --dm-collapseCollapsedColor:var(--dm-unselectedColor); --collapseCollapsedColor: var(--lm-collapseCollapsedColor); --fillLeftDisplay: flex; --fillLeftAlignment: center; --fillLeftDataTransform: uppercase; --fillLeftDataSize: var(--size6); --lm-fillLeftSelectedColor: var(--lm-selectedColor); --dm-fillLeftSelectedColor: var(--dm-selectedColor); --fillLeftSelectedColor: var(--lm-fillLeftSelectedColor); --lm-fillLeftUnselectedColor: var(--lm-unselectedColor); --dm-fillLeftUnselectedColor: var(--dm-unselectedColor); --fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor); --lm-fillLeftDataColor: var(--lm-backColor); --dm-fillLeftDataColor: var(--dm-backColor); --fillLeftDataColor: var(--lm-fillLeftDataColor); --lm-selectColor: var(--lm-fontColor); --dm-selectColor: var(--dm-fontColor); --selectColor: var(--lm-fontColor); --selectTextOverflow: var(--textOverflow); --selectTextAlign: center; --selectTextTransform: capitalize; --revealTime:500ms; --revealFunction: ease-in-out; --revealTrans: var(--revealTime) var(--revealFunction); --kmodal-width:fit-content; --kmodal-height:fit-content; --kmodal-max-width:90vw; --kmodal-max-height:90vh; --lm-kmodal-overlay-background:rgba(0,0,0,.9); --dm-kmodal-overlay-background:rgba(0,0,0,.9); --kmodal-overlay-background: var(--lm-kmodal-overlay-background); --lm-kmodal-dialog-background:var(--lm-backColor); --dm-kmodal-dialog-background:var(--dm-backColor); --kmodal-dialog-background: var(--lm-kmodal-dialog-background); --kmodal-border-width:0px; --kmodal-border-color:transparent; --lm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --dm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --kmodal-box-shadow-color1:var(--lm-kmodal-box-shadow-color1); --kmodal-box-shadow-blur1:28px; --kmodal-box-shadow-x1:0px; --kmodal-box-shadow-y1:14px; --kmodal-box-shadow-spread1:0px; --lm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --dm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --kmodal-box-shadow-color2:var(--lm-kmodal-box-shadow-color2); --kmodal-box-shadow-blur2:10px; --kmodal-box-shadow-x2:0px; --kmodal-box-shadow-y2:10px; --kmodal-box-shadow-spread2:0px; --kmodal-box-shadow: var(--kmodal-box-shadow-x1) var(--kmodal-box-shadow-y1) var(--kmodal-box-shadow-blur1) var(--kmodal-box-shadow-spread1) var(--kmodal-box-shadow-color1), var(--kmodal-box-shadow-x2) var(--kmodal-box-shadow-y2) var(--kmodal-box-shadow-blur2) var(--kmodal-box-shadow-spread2) var(--kmodal-box-shadow-color2); --kmodal-close-width:1rem; --kmodal-close-height:1rem; --lm-kmodal-close-color:#ccc; --dm-kmodal-close-color:#aaa; --kmodal-close-color:var(--lm-kmodal-close-color); --lm-kmodal-close-hover-color:#aaa; --dm-kmodal-close-hover-color:#aaa; --kmodal-close-hover-color:var(--lm-kmodal-close-hover-color); --kmodal-close-line-thickness:2px; --kmodal-close-line-length:calc(var(--kmodal-close-width) * 1.5); --sheet-header-height: 110px; /* ------------------ Theme Colors ----------------- */ --discworld-sand: #d0a773; --discworld-brown: #7e4839; /* ----------------- Generic Colors ---------------- */ --red-dark: #610000; --blue-light: #7ac3e0; --blue-very-light: #d2e9f8; --purple-light: #c3a1d1; /* ----------------- K-Scaffold Base Colors ---------------- */ --lm-font-color: black; --dm-font-color: beige; --font-color: var(--lm-font-color); --lm-backColor: var(--lm-parchment); --dm-backColor: var(--lm-parchment); --backColor: var(--lm-backColor); --lm-borderColor: #42351F; --dm-borderColor: #42351F; --borderColor: var(--lm-borderColor); --lm-rowHighlight: #e2dcd5; --dm-rowHighlight: #e2dcd5; --rowHighlight: var(--lm-rowHighlight); /* ----------------- Font Settings ---------------- */ --fontMain: "Libre Caslon Text", serif; --fontHeader: "IM Fell English SC", serif; --fontScript: "Romanesco", serif; --fontSystem: "Josefin Sans", sans-serif; --fontIcon: "Material Symbols Outlined", "Material Icons", "Material Design Icons", "Font Awesome 5 Free"; --font-family: var(--fontMain); /* ----------------- Font Sizes ---------------- */ --size1: 225%; --size2: 200%; --size3: 175%; --size4: 150%; --size5: 125%; --size6: 100%; --size7: 75%; /* ----------------- Themed Images ---------------- */ --packageCssClass: "discworld"; /* ----------------- Themed Colors (Light Mode) ---------------- */ --input-outline: var(--discworld-sand); --portrait-shadow: var(--red-dark); --title: var(--discworld-brown); --callout-primary: rgba(208, 167, 115, 0.35); --callout-primary-shadow-inset: #eee; --callout-primary-shadow-depth: #382501; --highlight-color: rgba(208, 167, 115, 0.2); --placeholder-color: rgba(208, 167, 115, 0.8); --toggle-icon: var(--discworld-brown); /* ----------------- Notch & Borders ---------------- */ --notchSize: 7px; --notchBorderSize: 1px; --notchColor: var(--lm-backColor); --lm-parchment: #f3f2ef; --lm-nested: #e5e1de; --lm-alternate_row: #dfd7cf; --lm-deep: #b09d8d; --lm-border: #42351F; /* ----------------- Decoration Settings ---------------- */ --corner-ul-width: 125px; --corner-ur-width: 275px; --corner-br-width: 101px; --corner-br-height: 500px; --corner-ur-height: 125px; --logo-width: 200px; --logo-height: 100px; --logo-min-space: 250px; /* ----------------- Logo ---------------- */ --dw-logo: url(https://files.d20.io/images/434666659/ZZ5SAZBKvYGDBiIMvxeZDg/max.png?1743169287); --default-avatar: url(https://files.d20.io/images/436164906/0PiSKwWYu02HaO-EG86gNA/original.png); /* ----------------- Themed Filters (Light Mode) ---------------- */ --filter-logo: none; --sheet-background: url(https://files.d20.io/images/434666656/l5oOEzAOunkAXb_i_tm-nQ/original.png); /* ----------------- Image Borders ---------------- */ --paint-smear: url(https://files.d20.io/images/434666653/1Ljh_s-tR_Zt8uxC42aS7A/max.png?1743169286); --sheet-bottom-right: url(https://files.d20.io/images/434666658/3-qzMN1knhpiGSsBfymuVA/max.png?1743169287); --sheet-upper-left: url(https://files.d20.io/images/434666657/xL91sSIQBoRq9rVbU4_uSw/original.png?1743169287); --sheet-upper-right: url(https://files.d20.io/images/434666655/hRVc2O1iiVMW8vy2qPf5Vg/max.png?1743169287); --banner-decoration: url(https://files.d20.io/images/434666652/-tsNtmxaqzgEXH78DZWktQ/max.png?1743169286); /* ----------------- Dice Assets ---------------- */ --d4: url(https://files.d20.io/images/434666644/bzhbhgaZpOnAKAoKRo8JKQ/max.png); --d6: url(https://files.d20.io/images/434666648/eXP0b0LmhBWpDVXygASqCQ/max.png?1743169285); --d8: url(https://files.d20.io/images/434666645/Uys9UXb7Z_GEynpF4bRx2g/max.png?1743169285); --d10: url(https://files.d20.io/images/434666646/07Fy5eKeijxyTLYn90K1Tg/max.png?17431692859); --d12: url(https://files.d20.io/images/434666647/RMjrH4m8UnszyFjCLynY2Q/max.png?1743169285); --d20: url(https://files.d20.io/images/434666651/FAFEdE0GNnz07-JGrKcpsw/max.png?1743169286); color: var(--font-color); font-size: 1rem; } body .ui-dialog .nav-tabs { position: relative; top: 0; z-index: 1000; background-color: var(--r20Back); } body .ui-dialog .nav-tabs a { font-family: var(--fontMain); } body .ui-dialog .tab-content .charsheet { position: relative; top: 0; bottom: 0; left: 0; right: 0; overflow: visible; min-height: calc(var(--corner-ur-height) + var(--corner-br-height) - 2em); min-width: calc(var(--corner-ur-width) + var(--corner-ul-width) + 3em); background-repeat: no-repeat !important; background-position: center; background-size: cover !important; background: var(--sheet-background); border: 1px solid black; padding: 2.5em; /*No sheet sfc used*/ --corner-horizontal-offset: -15px; --corner-ul-intrustion: var(--corner-ul-width) + var(--corner-horizontal-offset); --corner-ur-intrustion: var(--corner-ur-width) + var(--corner-horizontal-offset); } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet textarea, body .ui-dialog .tab-content .charsheet input, body .ui-dialog .tab-content .charsheet .uneditable-input, body .ui-dialog .tab-content .charsheet label, body .ui-dialog .tab-content .charsheet button { all: initial; } body .ui-dialog .tab-content .charsheet .flex-box, body .ui-dialog .tab-content .charsheet .sheet-flex-box { display: flex; } body .ui-dialog .tab-content .charsheet .flex-wrap, body .ui-dialog .tab-content .charsheet .sheet-flex-wrap { flex-wrap: wrap; } body .ui-dialog .tab-content .charsheet .justify-space-around, body .ui-dialog .tab-content .charsheet .sheet-justify-space-around { justify-content: space-around; } body .ui-dialog .tab-content .charsheet .justify-space-between, body .ui-dialog .tab-content .charsheet .sheet-justify-space-between { justify-content: space-between; } body .ui-dialog .tab-content .charsheet .justify-center, body .ui-dialog .tab-content .charsheet .sheet-justify-center { justify-content: center; } body .ui-dialog .tab-content .charsheet .flex-min-content, body .ui-dialog .tab-content .charsheet .sheet-flex-min-content { flex: 1 0 min-content; } body .ui-dialog .tab-content .charsheet .stacked { flex-direction: column; } body .ui-dialog .tab-content .charsheet .stacked.center > * { text-align: center; } body .ui-dialog .tab-content .charsheet .stacked:not(.center) { align-items: start; } body .ui-dialog .tab-content .charsheet .stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } body .ui-dialog .tab-content .charsheet .flex-column, body .ui-dialog .tab-content .charsheet .sheet-flex-column { flex-direction: column; } body .ui-dialog .tab-content .charsheet .flex-row-reverse, body .ui-dialog .tab-content .charsheet .sheet-flex-row-revers { flex-direction: row-reverse; } body .ui-dialog .tab-content .charsheet .flex-column-reverse, body .ui-dialog .tab-content .charsheet .sheet-flex-column-reverse { flex-direction: column-reverse; } body .ui-dialog .tab-content .charsheet .normal-gap, body .ui-dialog .tab-content .charsheet .sheet-normal-gap { gap: var(--normal-gap); } body .ui-dialog .tab-content .charsheet .normal-gap-x, body .ui-dialog .tab-content .charsheet .sheet-normal-gap-x { column-gap: var(--normal-gap-x); } body .ui-dialog .tab-content .charsheet .normal-gap-y, body .ui-dialog .tab-content .charsheet .sheet-normal-gap-y { row-gap: var(--normal-gap-y); } body .ui-dialog .tab-content .charsheet .half-gap, body .ui-dialog .tab-content .charsheet .sheet-half-gap { gap: var(--half-gap); } body .ui-dialog .tab-content .charsheet .half-gap-x, body .ui-dialog .tab-content .charsheet .sheet-half-gap-x { column-gap: var(--half-gap-x); } body .ui-dialog .tab-content .charsheet .half-gap-y, body .ui-dialog .tab-content .charsheet .sheet-half-gap-y { row-gap: var(--half-gap-y); } body .ui-dialog .tab-content .charsheet .tiny-gap, body .ui-dialog .tab-content .charsheet .sheet-tiny-gap { gap: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .tiny-gap-x, body .ui-dialog .tab-content .charsheet .sheet-tiny-gap-x { column-gap: var(--tiny-gap-x); } body .ui-dialog .tab-content .charsheet .tiny-gap-y, body .ui-dialog .tab-content .charsheet .sheet-tiny-gap-y { row-gap: var(--tiny-gap-y); } body .ui-dialog .tab-content .charsheet .big-gap, body .ui-dialog .tab-content .charsheet .sheet-big-gap { gap: var(--big-gap); } body .ui-dialog .tab-content .charsheet .big-gap-x, body .ui-dialog .tab-content .charsheet .sheet-big-gap-x { column-gap: var(--big-gap-x); } body .ui-dialog .tab-content .charsheet .big-gap-y, body .ui-dialog .tab-content .charsheet .sheet-big-gap-y { row-gap: var(--big-gap-y); } body .ui-dialog .tab-content .charsheet .grid, body .ui-dialog .tab-content .charsheet .sheet-grid { display: grid; } body .ui-dialog .tab-content .charsheet .grid-span-2, body .ui-dialog .tab-content .charsheet .sheet-grid-span-2 { grid-column: span 2; } body .ui-dialog .tab-content .charsheet .grid-span-all, body .ui-dialog .tab-content .charsheet .sheet-grid-span-all { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .grid-column, body .ui-dialog .tab-content .charsheet .sheet-grid-column { grid-auto-flow: column; } body .ui-dialog .tab-content .charsheet .grid-dense, body .ui-dialog .tab-content .charsheet .sheet-grid-dense { grid-auto-flow: dense; } body .ui-dialog .tab-content .charsheet .boxed, body .ui-dialog .tab-content .charsheet .sheet-boxed { border: 2px solid var(--borderColor); border-radius: 0; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet .boxed.thick-left, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-left { border-left-width: 5px; } body .ui-dialog .tab-content .charsheet .boxed.thick-bottom, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom { border-bottom-width: 5px; } body .ui-dialog .tab-content .charsheet .boxed.thick-right, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-right { border-right-width: 5px; } body .ui-dialog .tab-content .charsheet .boxed.thick-top, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-top { border-top-width: 5px; } body .ui-dialog .tab-content .charsheet .underlined, body .ui-dialog .tab-content .charsheet .sheet-underlined { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; border-radius: 0; border-bottom: 1px solid var(--borderColor); transition: border-radius border var(--revealTrans); } body .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:hover, :focus, :focus-within) { border-width: 1px 3px; border-style: solid; border-color: var(--borderColor); border-radius: 5px; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within) { background-color: var(--disabledColor); } body .ui-dialog .tab-content .charsheet .underlined--invisible { border-color: transparent !important; } body .ui-dialog .tab-content .charsheet .ratio1-1, body .ui-dialog .tab-content .charsheet .sheet-ratio1-1 { aspect-ratio: 1/1; } body .ui-dialog .tab-content .charsheet span, body .ui-dialog .tab-content .charsheet input, body .ui-dialog .tab-content .charsheet textarea, body .ui-dialog .tab-content .charsheet button, body .ui-dialog .tab-content .charsheet select { line-height: normal; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } body .ui-dialog .tab-content .charsheet .text-1, body .ui-dialog .tab-content .charsheet .sheet-text-1 { font-size: var(--size1); } body .ui-dialog .tab-content .charsheet .text-2, body .ui-dialog .tab-content .charsheet .sheet-text-2 { font-size: var(--size2); } body .ui-dialog .tab-content .charsheet .text-3, body .ui-dialog .tab-content .charsheet .sheet-text-3 { font-size: var(--size3); } body .ui-dialog .tab-content .charsheet .text-4, body .ui-dialog .tab-content .charsheet .sheet-text-4 { font-size: var(--size4); } body .ui-dialog .tab-content .charsheet .text-5, body .ui-dialog .tab-content .charsheet .sheet-text-5 { font-size: var(--size5); } body .ui-dialog .tab-content .charsheet .text-6, body .ui-dialog .tab-content .charsheet .sheet-text-6 { font-size: var(--size6); } body .ui-dialog .tab-content .charsheet .text-7, body .ui-dialog .tab-content .charsheet .sheet-text-7 { font-size: var(--size7); } body .ui-dialog .tab-content .charsheet .capitalize, body .ui-dialog .tab-content .charsheet .sheet-capitalize { text-transform: capitalize !important; } body .ui-dialog .tab-content .charsheet .lowercase, body .ui-dialog .tab-content .charsheet .sheet-lowercase { text-transform: lowercase !important; } body .ui-dialog .tab-content .charsheet .uppercase, body .ui-dialog .tab-content .charsheet .sheet-uppercase { text-transform: uppercase !important; } body .ui-dialog .tab-content .charsheet .sheet-material-icons, body .ui-dialog .tab-content .charsheet .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: var(--icon-size); /* Preferred icon size */ } body .ui-dialog .tab-content .charsheet .material-symbol, body .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; } body .ui-dialog .tab-content .charsheet .sheet-italics, body .ui-dialog .tab-content .charsheet .italics { font-style: italic; } body .ui-dialog .tab-content .charsheet h1, body .ui-dialog .tab-content .charsheet *[aria-level="1"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size1); font-family: var(--font1); } body .ui-dialog .tab-content .charsheet h1:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="1"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h1 *, body .ui-dialog .tab-content .charsheet *[aria-level="1"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size1); font-family: var(--font1); } body .ui-dialog .tab-content .charsheet h1 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="1"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h2, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet *[aria-level="2"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size2); font-family: var(--font2); } body .ui-dialog .tab-content .charsheet h2:not(input), body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="2"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h2 *, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, body .ui-dialog .tab-content .charsheet *[aria-level="2"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size2); font-family: var(--font2); } body .ui-dialog .tab-content .charsheet h2 *:not(input), body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="2"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h3, body .ui-dialog .tab-content .charsheet *[aria-level="3"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size3); font-family: var(--font3); } body .ui-dialog .tab-content .charsheet h3:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="3"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h3 *, body .ui-dialog .tab-content .charsheet *[aria-level="3"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size3); font-family: var(--font3); } body .ui-dialog .tab-content .charsheet h3 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="3"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h4, body .ui-dialog .tab-content .charsheet *[aria-level="4"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size4); font-family: var(--font4); } body .ui-dialog .tab-content .charsheet h4:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h4:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h4 *, body .ui-dialog .tab-content .charsheet *[aria-level="4"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size4); font-family: var(--font4); } body .ui-dialog .tab-content .charsheet h4 *:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h4 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h5, body .ui-dialog .tab-content .charsheet *[aria-level="5"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h5:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h5:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h5 *, body .ui-dialog .tab-content .charsheet *[aria-level="5"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h5 *:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h5 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h6, body .ui-dialog .tab-content .charsheet *[aria-level="6"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h6:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h6:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h6 *, body .ui-dialog .tab-content .charsheet *[aria-level="6"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h6 *:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h6 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet .sheet-pictos, body .ui-dialog .tab-content .charsheet .pictos { font-family: pictos; text-transform: none; } body .ui-dialog .tab-content .charsheet .pictos3, body .ui-dialog .tab-content .charsheet .sheet-pictos3 { font-family: pictos three; text-transform: none; } body .ui-dialog .tab-content .charsheet .pictoscustom, body .ui-dialog .tab-content .charsheet .sheet-pictoscustom { font-family: pictos custom; text-transform: none; } body .ui-dialog .tab-content .charsheet .d4, body .ui-dialog .tab-content .charsheet .sheet-d4 { font-family: dicefontd4 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d6, body .ui-dialog .tab-content .charsheet .sheet-d6 { font-family: dicefontd6 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d8, body .ui-dialog .tab-content .charsheet .sheet-d8 { font-family: dicefontd8 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d10, body .ui-dialog .tab-content .charsheet .sheet-d10 { font-family: dicefontd10 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d12, body .ui-dialog .tab-content .charsheet .sheet-d12 { font-family: dicefontd12 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d20, body .ui-dialog .tab-content .charsheet .sheet-d20 { font-family: dicefontd20 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d30, body .ui-dialog .tab-content .charsheet .sheet-d30 { font-family: dicefontd30 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet input[type=checkbox] { border: 1px solid var(--checkboxBorderColor); cursor: pointer; -webkit-appearance: none; appearance: none; width: var(--checkboxWidth); min-width: var(--checkboxWidth); height: var(--checkboxHeight); min-height: var(--checkboxHeight); display: grid; grid-template-columns: 1fr; grid-template-areas: "content"; } body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked { background-color: var(--checkedBackColor); } body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked:before { content: var(--checkContent); grid-area: content; font-weight: var(--checkWeight); place-self: start center; color: var(--checkColor); font-size: var(--checkSize); line-height: var(--checkLineHeight); } body .ui-dialog .tab-content .charsheet input[type=number] { width: 3rem; -moz-appearance: textfield !important; text-align: center; } body .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, body .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet .pseudo-select span, body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, body .ui-dialog .tab-content .charsheet textarea, body .ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])), body .ui-dialog .tab-content .charsheet .uneditable-input { padding: var(--inputPadding); } body .ui-dialog .tab-content .charsheet input:is([type=text], [type=number]), body .ui-dialog .tab-content .charsheet textarea { cursor: auto; } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet .pseudo-select span, body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, body .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])), body .ui-dialog .tab-content .charsheet .uneditable-input, body .ui-dialog .tab-content .charsheet textarea { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, body .ui-dialog .tab-content .charsheet .pseudo-select span { -webkit-apperance: none; appearance: none; text-transform: var(--selectTextTransform); overflow: hidden !important; white-space: nowrap; text-overflow: var(--selectTextOverflow); text-align: var(--selectTextAlign); color: var(--selectColor); } body .ui-dialog .tab-content .charsheet input { width: auto; } body .ui-dialog .tab-content .charsheet input:placeholder { color: var(--placeholderColor); } body .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before { content: "+"; } body .ui-dialog .tab-content .charsheet textarea { resize: var(--textareaResize); white-space: pre-wrap; } body .ui-dialog .tab-content .charsheet textarea.fixed { resize: none; overflow: auto; } body .ui-dialog .tab-content .charsheet button { cursor: pointer; } body .ui-dialog .tab-content .charsheet .roller { display: flex; align-items: center; gap: var(--half-gap); } body .ui-dialog .tab-content .charsheet .roller:before { content: "T"; font-family: dicefontd20; } body .ui-dialog .tab-content .charsheet .collapse-container { display: grid; position: relative; } body .ui-dialog .tab-content .charsheet .text-collapse { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; } body .ui-dialog .tab-content .charsheet .text-collapse:before { content: var(--expandedSymbol); font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: var(--icon-size); /* Preferred icon size */ } body .ui-dialog .tab-content .charsheet .text-collapse__text { display: inline; } body .ui-dialog .tab-content .charsheet .text-collapse__check:not(:checked) + .text-collapse { border-width: 1px 3px; border-style: solid; border-color: var(--borderColor); border-radius: 5px; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet .text-collapse__check:checked + .text-collapse:before { content: var(--collapsedSymbol); } body .ui-dialog .tab-content .charsheet .repitem:hover > .collapse, body .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, body .ui-dialog .tab-content .charsheet .collapse-container:hover > .collapse, body .ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container { opacity: var(--collapseHoverOpacity); } body .ui-dialog .tab-content .charsheet .repitem > .collapse, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse { opacity: var(--collapseBaseOpacity); position: absolute; right: -10px; top: 0px; border: 0px solid black; border-radius: 0; color: var(--collapseExpandedColor); text-transform: none; background-color: transparent; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:before, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:before { content: "y"; font-family: pictos; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked { color: var(--collapseCollapsedColor); background-color: transparent; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .expanded, body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .collapse-container .expanded, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .expanded, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .collapse-container .expanded { display: none !important; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * { display: none !important; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:not(:checked) ~ .collapsed, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:not(:checked) ~ .collapsed { display: none !important; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:hover, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:hover { color: var(--collapseExpandedColor); } body .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse { display: none; } body .ui-dialog .tab-content .charsheet .fill-left { display: var(--fillLeftDisplay); align-self: var(--fillLeftAlignment); box-sizing: border-box; } body .ui-dialog .tab-content .charsheet .fill-left__radio { appearance: none; -webkit-appearance: none; background-color: var(--fillLeftSelectedColor); width: 100%; height: 100%; cursor: pointer; } body .ui-dialog .tab-content .charsheet .fill-left__radio[data-value]:checked:before { content: attr(data-value); color: var(--fillLeftDataColor); font-size: var(--fillLeftDataSize); place-self: center; text-transform: var(--fillLeftDataTransform); } body .ui-dialog .tab-content .charsheet .fill-left__radio:checked ~ .fill-left__radio { background-color: var(--fillLeftUnselectedColor); } body .ui-dialog .tab-content .charsheet .input-label { display: inline-flex; gap: var(--input-label-gap); align-items: center; } body .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > input[type=text] { flex: 1 1 0; } body .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]) { flex: 0 0 auto; } body .ui-dialog .tab-content .charsheet .input-label > :is(span, button) { text-transform: var(--input-label-text-transform); } body .ui-dialog .tab-content .charsheet .input-label--dual { grid-template-columns: 1fr auto 1fr; grid-template-areas: "over over over" "under under under"; } body .ui-dialog .tab-content .charsheet .input-label--dual > span:last-of-type { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .input-label--dual > input:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } body .ui-dialog .tab-content .charsheet .input-label--dual > .slash { line-height: 0rem; font-weight: normal; } body .ui-dialog .tab-content .charsheet .headed-textarea { display: grid; grid-template-rows: auto 1fr; grid-template-columns: auto; grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .headed-textarea :not(textarea):not(.adaptive) { justify-self: start; } body .ui-dialog .tab-content .charsheet .headed-textarea .headed-textarea__header { grid-area: initial; } body .ui-dialog .tab-content .charsheet .adaptive { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; position: relative; } body .ui-dialog .tab-content .charsheet .adaptive > * { grid-area: content; } body .ui-dialog .tab-content .charsheet .adaptive > span { opacity: 0; z-index: -10; border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; text-transform: initial; border-radius: 0px; } body .ui-dialog .tab-content .charsheet .adaptive--text { min-height: 4rem; } body .ui-dialog .tab-content .charsheet .adaptive--text__span { white-space: pre-wrap; padding: 2px; } body .ui-dialog .tab-content .charsheet .adaptive--text__textarea { width: 100%; height: 100%; resize: none; } body .ui-dialog .tab-content .charsheet .adaptive--text__textarea, body .ui-dialog .tab-content .charsheet .adaptive--input__input { position: absolute; } body .ui-dialog .tab-content .charsheet .adaptive--input__input { width: 100%; } body .ui-dialog .tab-content .charsheet .adaptive--input__span { padding: 2px; min-height: 1.5rem; } body .ui-dialog .tab-content .charsheet .repitem > input:not([type=checkbox]) { width: 100%; } body .ui-dialog .tab-content .charsheet .repitem .headed-textarea, body .ui-dialog .tab-content .charsheet .repitem .description { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .repcontainer { display: grid; gap: var(--normal-gap); } body .ui-dialog .tab-content .charsheet .repeating-container { display: grid; grid-template-areas: "header"; align-self: start; } body .ui-dialog .tab-content .charsheet .repeating-container > .header { grid-area: header; } body .ui-dialog .tab-content .charsheet .repeating-container :is(.repcontrol-button, .repcontrol_edit) { opacity: 0; transition: var(--revealTrans); } body .ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) :is(.repcontrol-button, .repcontrol_edit) { opacity: 1; } body .ui-dialog .tab-content .charsheet .repcontrol-button { align-self: start; } body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol { justify-self: end; z-index: 100; } body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol > .repcontrol_add { display: none !important; } body .ui-dialog .tab-content .charsheet .repcontrol-button--add { justify-self: start; width: 15px; height: 15px; padding: 4px; font-size: 0; color: var(--col-alt); border: 1px solid var(--col-alt); } body .ui-dialog .tab-content .charsheet .repcontrol-button--add::before { inset: 0; place-self: center; font-family: var(--font-icon); font-size: 12px; content: "add"; } body .ui-dialog .tab-content .charsheet .kmodal__button { all: initial; display: flex; margin: 0; padding: 0; cursor: pointer; } body .ui-dialog .tab-content .charsheet .kmodal__checkbox[type=checkbox] { display: none; } body .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; } body .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; } body .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); } body .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; } body .ui-dialog .tab-content .charsheet .kmodal__close:after, body .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; } body .ui-dialog .tab-content .charsheet .kmodal__close:hover:after, body .ui-dialog .tab-content .charsheet .kmodal__close:hover:before { background: var(--kmodal-close-hover-color); } body .ui-dialog .tab-content .charsheet .kmodal__close:before { transform: rotate(-45deg); } body .ui-dialog .tab-content .charsheet .kmodal__checkbox:not(:checked) + .kmodal__outer { display: none; } body .ui-dialog .tab-content .charsheet .kmodal__checkbox:checked + .kmodal__outer { opacity: 1; visibility: visible; } body .ui-dialog .tab-content .charsheet .kmodal__checkbox:checked + .kmodal__outer .kmodal__inner { top: 0; } body .ui-dialog .tab-content .charsheet .tabs__container:not(.k-active-tab) { display: none !important; } body .ui-dialog .tab-content .charsheet .tabs__nav-item { list-style: none; } body .ui-dialog .tab-content .charsheet .tabs__nav-list { display: flex; } body .ui-dialog .tab-content .charsheet h2, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] { font-family: var(--fontHeader); font-size: 1em; margin: 0; padding: 0; text-align: center; font-weight: bold; } body .ui-dialog .tab-content .charsheet [type=roll]::before { display: none; } body .ui-dialog .tab-content .charsheet .itemcontrol { z-index: 100; } body .ui-dialog .tab-content .charsheet .adaptive { font-family: var(--fontMain); } body .ui-dialog .tab-content .charsheet .adaptive, body .ui-dialog .tab-content .charsheet input, body .ui-dialog .tab-content .charsheet select { line-height: normal; font-weight: normal; --input-focus-outline-color: var(input-outline); } body .ui-dialog .tab-content .charsheet .adaptive > span { font-weight: inherit; font-family: inherit; font-size: inherit; } body .ui-dialog .tab-content .charsheet [hidden] { display: none !important; } body .ui-dialog .tab-content .charsheet .flex-span-all { flex: 1 0 100%; } body .ui-dialog .tab-content .charsheet ::placeholder { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet .disabled { display: none !important; } body .ui-dialog .tab-content .charsheet .overlay-container { position: absolute; width: 100%; height: 100%; pointer-events: none; top: 0; left: 0; } body .ui-dialog .tab-content .charsheet .corner { position: absolute; background-repeat: no-repeat; background-size: contain; pointer-events: none; filter: drop-shadow(2px 4px 6px #000000); z-index: 20; } body .ui-dialog .tab-content .charsheet .top-left { top: -1.2rem; left: var(--corner-horizontal-offset); width: var(--corner-ul-width); height: 125px; background-image: var(--sheet-upper-left); } body .ui-dialog .tab-content .charsheet .top-right { top: -1.2rem; right: var(--corner-horizontal-offset); width: var(--corner-ur-width); height: 125px; background-image: var(--sheet-upper-right); } body .ui-dialog .tab-content .charsheet .bottom-right { bottom: -10px; right: var(--corner-horizontal-offset); width: var(--corner-br-width); height: 500px; background-image: var(--sheet-bottom-right); } body .ui-dialog .tab-content .charsheet .logo-container { position: absolute; top: -10px; left: calc(50% - (var(--corner-ur-width) - var(--corner-ul-width)) / 2); transform: translateX(-52.5%); width: var(--logo-width); min-width: var(--logo-min-space); height: var(--logo-height); background-image: var(--dw-logo); background-repeat: no-repeat; background-size: contain; background-position: center; pointer-events: none; filter: var(--filter-logo); } body.sheet-darkmode { --backColor:var(--dm-backColor); --selectedColor:var(--dm-selectedColor); --unselectedColor1:var(--dm-unselectedColor1); --unselectedColor2:var(--dm-unselectedColor2); --checkColor:var(--dm-checkColor); --checkedBackColor:var(--dm-checkedBackColor); --borderColor:var(--dm-borderColor); --fontColor:var(--dm-fontColor); --disabledColor:var(--dm-disabledColor); --font-color: var(--dm-font-color); --backColor: var(--dm-backColor); --borderColor: var(--dm-borderColor); --rowHighlight: var(--dm-rowHighlight); /* ----------------- Themed Colors (Dark Mode) ---------------- */ --input-outline: var(--purple-light); --title: var(--purple-light); --highlight-color: rgba(195, 161, 209, 0.1); --placeholder-color: rgba(195, 161, 209, 0.65); --callout-primary: rgba(56, 27, 73, 0.35); --callout-primary-shadow-inset: #000; --callout-primary-shadow-depth: #633d79; --toggle-icon: var(--purple-light); /* ----------------- Themed Filters (Dark Mode) ---------------- */ --filter-logo: invert(0.8); --sheet-background: url(https://s3.amazonaws.com/files.d20.io/images/433238436/GxfTIZ1gykfcairmqQan1Q/thumb.png?1742217845); } body.sheet-darkmode .tab-content .charsheet { background: var(--dark-surface1); } /* -- Flex Styles --*/ .flexrow { display: flex; flex-direction: row; align-items: center; } .flexcol { display: flex; flex-direction: column; align-items: start; } /* --- Header & Portrait Styles --- */ header.sheet-header { position: relative; gap: 0.5rem; height: var(--sheet-header-height); padding-top: calc(var(--logo-height) * 0.4); } header.sheet-header > * { justify-content: center; font-size: 1rem; } header.sheet-header .portrait-container { flex: 0 0 calc(var(--sheet-header-height) * 1.5); height: calc(var(--sheet-header-height) * 1.5); margin-right: unset; margin-bottom: 1.5rem; filter: drop-shadow(2px 2px 6px var(--portrait-shadow)); overflow: hidden; position: relative; } header.sheet-header .portrait-container .portrait, header.sheet-header .portrait-container .placeholder-avatar { position: absolute; width: 100%; height: 100%; border: unset; } header.sheet-header .portrait-container .placeholder-avatar { background-image: var(--default-avatar); background-size: contain; background-position: center; background-repeat: no-repeat; mask-image: none; display: block; z-index: 1; } header.sheet-header .portrait-container .portrait { object-fit: contain; mask-size: contain; mask-repeat: no-repeat; visibility: visible; cursor: pointer; background-image: none; display: block; z-index: 2; } header.sheet-header .portrait-container .portrait[src=""], header.sheet-header .portrait-container .portrait:not([src]) { opacity: 0; visibility: hidden; pointer-events: none; color: transparent; display: none; } header.sheet-header .portrait-container .portrait[src]:not([src=""]) + .placeholder-avatar { opacity: 0; visibility: hidden; pointer-events: none; } header.sheet-header .header-data-container { flex-grow: 1; height: 100%; max-width: 100%; overflow: hidden; justify-content: center; text-align: center; padding: 0 0.5rem; border-radius: 0.75rem; margin: 0 auto; background-image: linear-gradient(var(--callout-primary) 0%, transparent 90%); box-shadow: inset 0 0 20px var(--callout-primary-shadow-inset); filter: drop-shadow(0 0 10px var(--callout-primary)); } header.sheet-header .header-data-container .document-controls .roll-name-as-trait { flex: 0 0 2rem; } header.sheet-header .header-data-container h1.document-name { position: relative; display: flex !important; flex-grow: 1; align-self: center; height: auto !important; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: center; align-content: center; } header.sheet-header .header-data-container h1.document-name .adaptive--input { align-items: center; align-self: center; } header.sheet-header .header-data-container h1.document-name, header.sheet-header .header-data-container h1.document-name input { color: var(--title); text-transform: none; opacity: 0; top: 0.1rem; left: 0; height: 3rem; font-size: 2.25rem; font-family: var(--fontHeader); font-weight: bold; text-align: center; position: relative !important; width: 100%; } header.sheet-header .header-data-container h1.document-name:focus, header.sheet-header .header-data-container h1.document-name:hover, header.sheet-header .header-data-container h1.document-name input:focus, header.sheet-header .header-data-container h1.document-name input:hover { opacity: 100%; } header.sheet-header .header-data-container h1.document-name:placeholder-shown, header.sheet-header .header-data-container h1.document-name input:placeholder-shown { opacity: 1; transition: opacity 0.3s ease-in-out; width: 6rem; } header.sheet-header .header-data-container h1.document-name::placeholder, header.sheet-header .header-data-container h1.document-name input::placeholder { color: var(--placeholder-color); } header.sheet-header .header-data-container h1.document-name:focus::placeholder, header.sheet-header .header-data-container h1.document-name input:focus::placeholder { opacity: 0.5; } header.sheet-header .header-data-container h1.document-name, header.sheet-header .header-data-container h1.document-name .adaptive--input__span { color: var(--title) !important; text-transform: none !important; opacity: 1; top: 0; left: 0; pointer-events: none; width: 100%; height: 3rem; font-size: 2.25rem; font-family: var(--fontHeader); font-weight: bold; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } header.sheet-header .header-data-container h1.document-name:has(input:focus) .adaptive--input__span, header.sheet-header .header-data-container h1.document-name:has(input:hover) .adaptive--input__span { opacity: 0; } header.sheet-header .header-data-container .document-details { justify-content: space-between; flex-grow: 0; width: 100%; align-self: flex-end; flex-wrap: wrap; font-family: var(--fontHeader); font-size: 1.25rem; z-index: 1; } header.sheet-header .header-data-container .document-details input { text-align: right; color: inherit; font-size: inherit; height: unset; line-height: unset; } header.sheet-header .header-data-container .document-details .detail-left { font-weight: normal; flex-shrink: 1; padding-left: 0.5rem; max-width: fit-content; } header.sheet-header .header-data-container .document-details .detail-left .input-label__text::after { content: ":"; } header.sheet-header .header-data-container .document-details .detail-left .input-label__text { font-family: inherit !important; font-size: inherit !important; color: var(--font-color); } header.sheet-header .header-data-container .document-details .detail-left span { font-family: var(--fontMain); font-size: 1rem; line-height: 1.5; } header.sheet-header .header-data-container .document-details .detail-left.luck-container { display: flex; align-items: center; gap: 0.5ch; } header.sheet-header .header-data-container .document-details .detail-left .input-label { font-weight: bold; font-size: 1.25rem; font-family: var(--fontHeader); } header.sheet-header .header-data-container .document-details .detail-left .number-input-container { display: flex; align-items: center; } header.sheet-header .header-data-container .document-details .detail-left .luck-input { width: 2rem; font-weight: bold; } header.sheet-header .header-data-container .document-details .detail-left .number-input-controls { display: flex; flex-direction: column; } header.sheet-header .header-data-container .document-details .detail-left .arrow-button { color: var(--title); height: 0.9rem; width: 1.2rem; padding: 0; font-size: 0.6rem; line-height: 0.9rem; cursor: pointer; box-shadow: none; text-shadow: none; } header.sheet-header .header-data-container .document-details .detail-left .arrow-button:hover { border-color: var(--title); } header.sheet-header .header-data-container .document-details .detail-right { padding-top: 0.25rem; padding-right: 0.5rem; min-width: fit-content; text-align: right; } header.sheet-header .header-data-container .document-details .detail-right input { width: 6rem; font-weight: bold; } header.sheet-header .header-data-container input { border: none; } header.sheet-header .header-data-container label { align-self: center; } /* -- Tab Styles --*/ .tabs--discworld { flex-direction: column; position: relative; color: var(--title); margin: 0.5rem 0 0.25rem 0; border: none; } .tabs__container { display: none; } .tabs .k-active-tab { display: block; } .tabs__header { position: relative; z-index: 2; width: 100%; margin-bottom: -2rem; } .tabs__header::after { content: ""; pointer-events: none; display: block; z-index: 5; position: relative; transform: translateY(-52.5%); top: 0; width: calc(100vw - 134px); min-height: 45px; min-width: calc(var(--corner-ur-width) + var(--corner-ul-width) + 3em); height: calc((100vw - 134px) * 0.0802325581); background-image: var(--banner-decoration); background-size: 100%; background-repeat: no-repeat; filter: drop-shadow(0px -4px 10px var(--callout-primary)) drop-shadow(2px 4px 6px var(--callout-primary-shadow-depth)); } .tabs__nav-list { display: flex; gap: 3rem; width: inherit; justify-content: space-around; list-style: none; padding: 0; margin-left: 0; text-align: center; border-radius: 10px; border: none; background-image: linear-gradient(var(--callout-primary) 0%, transparent 90%); box-shadow: inset 0 0 20px var(--callout-primary-shadow-inset); filter: drop-shadow(0 0 10px var(--callout-primary)); } .tabs__nav-item { flex: 1; display: flex; align-items: center; justify-content: center; border-width: 2px; border-style: dotted dotted none !important; border-radius: inherit !important; background: none !important; cursor: pointer !important; transition: border 0.3s ease-in-out !important; } .tabs__nav-item:has(.k-active-button) { border-style: solid solid none !important; } .tabs__nav-item:hover { border-color: var(--title); } .tabs__button { flex: 1; line-height: 3.5rem !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; text-align: center !important; font-family: var(--fontHeader) !important; font-size: 1.5rem !important; font-weight: bold !important; } .tabs__button.k-active-button { text-shadow: -3px -3px 0 var(--highlight-color), 3px -3px 0 var(--highlight-color), -3px 3px 0 var(--highlight-color), 3px 3px 0 var(--highlight-color) !important; } .tabs__body { height: 100%; overflow-y: auto; } /* -- Tabs body styles --*/ section.tabs--discworld__container { /* -- Description Tab Styles --*/ /* -- Traits Tab Styles --*/ } section.tabs--discworld__container--description { display: flex; flex-direction: column; padding: 0.5rem; overflow: hidden; } section.tabs--discworld__container--description .description-textarea { background-image: linear-gradient(var(--callout-primary) 0%, transparent 90%); box-shadow: inset 0 0 20px var(--callout-primary-shadow-inset); filter: drop-shadow(0 0 10px var(--callout-primary)); width: 100%; font-family: var(--fontMain); font-size: 0.9rem; max-height: calc(var(--corner-ur-height) + var(--corner-br-height) - var(--sheet-header-height)); } section.tabs--discworld__container--description .description-textarea .adaptive--text { min-height: 100%; min-height: 6rem; max-height: calc(var(--corner-ur-height) + var(--corner-br-height) - var(--sheet-header-height)); display: grid; grid-template-areas: "content"; position: relative; } section.tabs--discworld__container--description .description-textarea .adaptive--text > * { grid-area: content; width: 100%; } section.tabs--discworld__container--description .description-textarea .adaptive--text__span { display: block; font: inherit; color: var(--font-color); padding-top: 0.5rem !important; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; } section.tabs--discworld__container--description .description-textarea textarea.adaptive--text__textarea { z-index: 10; font: inherit; color: var(--font-color); border: 2px solid var(--highlight-color); padding: 0.5rem; resize: none; width: 100%; min-height: inherit; max-height: calc(var(--corner-ur-height) + var(--corner-br-height) - var(--sheet-header-height)); box-sizing: border-box; word-break: break-word; white-space: pre-wrap; } section.tabs--discworld__container--description .description-textarea textarea.adaptive--text__textarea:focus { outline: none; border-color: var(--title); } section.tabs--discworld__container--traits { overflow-y: auto; } section.tabs--discworld__container--traits .traits-header { display: flex; justify-content: flex-end; align-items: center; padding: 0; } section.tabs--discworld__container--traits .traits-header label.input-label { font-size: 0.875rem; font-weight: bold; font-family: var(--fontHeader); color: var(--font-color); } section.tabs--discworld__container--traits .traits-header label.input-label select { font-size: 0.875rem; background-color: var(--callout-primary); border: 1px solid var(--highlight-color); color: var(--font-color); z-index: 20 !important; } section.tabs--discworld__container--traits hr { color: var(--title); border: none; height: 2px; margin-top: 0px; margin-bottom: 10px; background-image: linear-gradient(90deg, transparent 0%, var(--title) 50%, transparent 100%); } section.tabs--discworld__container--traits .trait-type { display: flex; align-items: center; flex-wrap: wrap; position: relative; min-height: 3.5rem; } section.tabs--discworld__container--traits .trait-type .trait-category { flex: 0 0 7.5rem; } section.tabs--discworld__container--traits .trait-type .trait-category label { font-family: var(--fontScript); color: var(--font-color); font-size: 1.5rem; } section.tabs--discworld__container--traits .trait-type .trait-list { flex: 3; display: flex; align-items: flex-start; } section.tabs--discworld__container--traits .trait-type .trait-list .repcontainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); width: 100%; gap: 0.5rem; align-items: start; justify-items: stretch; overflow: hidden; } section.tabs--discworld__container--traits .trait-type .trait-list .repcontainer .repitem { display: flex; flex-direction: column; width: 100%; min-width: 0; } section.tabs--discworld__container--traits .trait-type .trait-list .repcontainer .repitem .itemcontrol { background-color: var(--callout-primary); } section.tabs--discworld__container--traits .trait-type .trait-list .repcontainer .repitem .itemcontrol .repcontrol_move { color: var(--title); background-color: var(--highlight-color); } section.tabs--discworld__container--traits .trait-type .trait-list .repcontrol-button--add { z-index: 50; position: absolute; left: 5rem; top: 0; width: 1.2rem; height: 1.2rem; padding: 0; border-radius: 50%; border: 1px solid var(--title); background-color: var(--callout-primary); color: var(--title); display: flex; align-items: center; justify-content: center; } section.tabs--discworld__container--traits .trait-type .trait-list .repcontrol-button--add::before { font-size: 0.9rem; content: "add"; font-weight: bold; } section.tabs--discworld__container--traits .trait-type .trait-list fieldset { position: relative; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; position: relative; padding: 0.2rem 0; width: 100%; min-width: 0; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .flexrow.trait-name > .adaptive--text { width: fit-content; flex-grow: 0; min-width: 6rem; margin-top: 2px; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-roll-button { background-color: var(--title); z-index: 20; width: 1.3rem !important; height: 1.3rem !important; mask-repeat: no-repeat; mask-size: contain; mask-position: center; mask-mode: alpha; width: 48px; height: 48px; background-color: var(--title); mask-image: var(--d20); } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item input.collapse { appearance: none; margin-right: 0.4rem; width: 1rem; height: 1rem; border: 1px solid var(--title); border-radius: 50%; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; z-index: 50; background-color: var(--callout-primary); font-family: var(--fontIcon); font-weight: bold; font-size: 1rem; color: var(--title); } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item input.collapse::after { content: "arrow_forward"; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item input.collapse:checked::after { content: "arrow_downward"; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .collapsed { display: flex; font-weight: bold; align-items: center; gap: 0.25rem; width: 100%; cursor: pointer; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded { display: none; flex-direction: column; gap: 0.5rem; width: 100%; grid-column: 1/-1; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded hr { color: var(--placeholder-color); border: none; height: 2px; width: 100%; margin-top: 0px; margin-bottom: 5px; background-image: linear-gradient(90deg, transparent 0%, var(--placeholder-color) 0%, transparent 80%) !important; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded input, section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded textarea, section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded select { color: var(--font-color); } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded .adaptive--text { flex: 0 0 auto; width: 100%; min-height: 2rem; font-size: 0.9rem; line-height: 1.3; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded .adaptive--text__span { word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; overflow: hidden; font-size: inherit; line-height: inherit; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded textarea.adaptive--text__textarea { font-size: inherit; line-height: inherit; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; overflow: hidden; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .expanded textarea.adaptive--text__textarea:focus { min-height: 3rem; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .severity-row { gap: 0.25rem; flex: wrap; margin-bottom: 5px; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .severity-row .severity-label { flex: 0 0 auto; color: var(--font-color); font-weight: bold; font-size: 1rem; font-family: var(--fontHeader); margin-right: 0.25rem; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .severity-row select { flex: 1 0 auto; color: var(--font-color); background-color: var(--callout-primary); border: 1px solid var(--highlight-color); font-family: var(--fontHeader); max-width: 60%; font-size: 1rem; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .severity-row select option { color: var(--font-color); } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-name .adaptive--text { overflow: hidden; min-width: 0; display: grid; align-content: center; width: 100%; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-name .adaptive--text .adaptive--text__textarea, section.tabs--discworld__container--traits .trait-type .trait-list .trait-item .trait-name .adaptive--text .adaptive--text__span { resize: none; background: transparent; border: none; font-family: var(--fontMain); font-size: 1rem; width: 100% !important; line-height: 1.4rem; min-height: 1.4rem; color: var(--font-color) !important; overflow-wrap: break-word; white-space: pre-wrap; overflow: hidden; grid-column: 1; grid-row: 1; } section.tabs--discworld__container--traits .trait-type .trait-list .trait-item input.collapse:checked ~ .expanded { display: flex; } section.tabs--discworld__container--traits .trait-type .trait-list .repcontrol .repcontrol_edit { position: absolute; z-index: 50; left: 5rem; bottom: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background-color: var(--callout-primary); border: 1px solid var(--title); color: var(--title); display: flex; align-items: center; justify-content: center; padding: 0; font-family: var(--font-icon); text-indent: -9999px; } section.tabs--discworld__container--traits .trait-type .trait-list .repcontrol .repcontrol_edit:before { content: "edit"; font-size: 0.9rem; font-weight: bold; text-indent: 0; } .sheet-darkmode header.sheet-header { background: var(--dark-surface1); color: var(--font-color); } .sheet-rolltemplate-discworld { --font1:var(--topHeadFont); --font2:var(--topHeadFont); --font3:var(--midHeadFont); --font4:var(--midHeadFont); --font5:var(--midHeadFont); --font6:var(--contentHeadFont); --font7:var(--contentHeadFont); --baseFontSize: 16px; --size1:300%; --size2:250%; --size3:200%; --size4:150%; --size5:125%; --size6:100%; --size7:87.5%; --icon-size:24px; --font-icon: "Material Icons"; --normal-gap-x:1rem; --normal-gap-y:1rem; --normal-gap: var(--normal-gap-x); --half-gap-x:calc(var(--normal-gap-x) / 2); --half-gap-y:calc(var(--normal-gap-y) / 2); --half-gap: var(--half-gap-x); --tiny-gap-x:calc(var(--half-gap-x) / 2); --tiny-gap-y:calc(var(--half-gap-y) / 2); --tiny-gap: var(--tiny-gap-x); --big-gap-x:calc(var(--normal-gap-x) * 2); --big-gap-y:calc(var(--normal-gap-y) * 2); --big-gap: var(--big-gap-x); --lm-backColor:#fff; --dm-backColor:var(--dark-surface1); --backColor:var(--lm-backColor); --lm-selectedColor:#000; --dm-selectedColor:#007476; --selectedColor:var(--lm-selectedColor); --lm-unselectedColor1:lightgrey; --dm-unselectedColor1:#0e0e0e; --unselectedColor1:var(--lm-unselectedColor1); --lm-unselectedColor2:transparent; --dm-unselectedColor2:transparent; --unselectedColor2:var(--lm-unselectedColor2); --lm-checkColor:#000; --dm-checkColor:#ff0000; --checkColor:var(--lm-checkColor); --lm-checkedBackColor:transparent; --dm-checkedBackColor:transparent; --checkedBackColor:var(--lm-checkedBackColor); --lm-borderColor:#000; --dm-borderColor:lightgrey; --borderColor:var(--lm-borderColor); --lm-fontColor:#0f0f0f; --dm-fontColor:var(--dark-primarytext); --fontColor:var(--lm-fontColor); --lm-disabledColor:var(--lm-unselectedColor1); --dm-disabledColor:var(--dm-unselectedColor1); --disabledColor:var(--lm-disabledColor); --checkContent: "✓"; --checkWeight: bold; --checkSize: 150%; --checkLineHeight: calc(var(--checkSize) / 3); --checkboxBorderWidth: var(--borderWidth); --checkboxBorderStyle: var(--borderStyle); --lm-checkboxBorderColor: var(--lm-borderColor); --dm-checkboxBorderColor: var(--dm-borderColor); --checkboxBorderColor: var(--lm-checkBorderColor); --checkboxWidth: 14px; --checkboxHeight: 14px; --inputTopPadding: 2px; --inputRightPadding: 2px; --inputBottomPadding: 2px; --inputLeftPadding: 2px; --inputPadding: var(--inputTopPadding) var(--inputRightPadding) var(--inputBottomPadding) var(--inputLeftPadding); --lm-placeholderColor:#ededed80; --dm-placeholderColor:#3f3f3f80; --placeholderColor: var(--lm-placeholderColor); --textareaResize: vertical; --borderWidth:1px; --borderStyle:solid; --expandedSymbol:"unfold_less"; --collapsedSymbol: "unfold_more"; --collapseHoverOpacity: 1; --collapseBaseOpacity: 0; --lm-collapseExpandedColor:var(--lm-selectedColor); --dm-collapseExpandedColor:var(--dm-selectedColor); --collapseExpandedColor: var(--lm-collapseExpandedColor); --lm-collapseCollapsedColor:var(--lm-unselectedColor); --dm-collapseCollapsedColor:var(--dm-unselectedColor); --collapseCollapsedColor: var(--lm-collapseCollapsedColor); --fillLeftDisplay: flex; --fillLeftAlignment: center; --fillLeftDataTransform: uppercase; --fillLeftDataSize: var(--size6); --lm-fillLeftSelectedColor: var(--lm-selectedColor); --dm-fillLeftSelectedColor: var(--dm-selectedColor); --fillLeftSelectedColor: var(--lm-fillLeftSelectedColor); --lm-fillLeftUnselectedColor: var(--lm-unselectedColor); --dm-fillLeftUnselectedColor: var(--dm-unselectedColor); --fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor); --lm-fillLeftDataColor: var(--lm-backColor); --dm-fillLeftDataColor: var(--dm-backColor); --fillLeftDataColor: var(--lm-fillLeftDataColor); --lm-selectColor: var(--lm-fontColor); --dm-selectColor: var(--dm-fontColor); --selectColor: var(--lm-fontColor); --selectTextOverflow: var(--textOverflow); --selectTextAlign: center; --selectTextTransform: capitalize; --revealTime:500ms; --revealFunction: ease-in-out; --revealTrans: var(--revealTime) var(--revealFunction); --kmodal-width:fit-content; --kmodal-height:fit-content; --kmodal-max-width:90vw; --kmodal-max-height:90vh; --lm-kmodal-overlay-background:rgba(0,0,0,.9); --dm-kmodal-overlay-background:rgba(0,0,0,.9); --kmodal-overlay-background: var(--lm-kmodal-overlay-background); --lm-kmodal-dialog-background:var(--lm-backColor); --dm-kmodal-dialog-background:var(--dm-backColor); --kmodal-dialog-background: var(--lm-kmodal-dialog-background); --kmodal-border-width:0px; --kmodal-border-color:transparent; --lm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --dm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --kmodal-box-shadow-color1:var(--lm-kmodal-box-shadow-color1); --kmodal-box-shadow-blur1:28px; --kmodal-box-shadow-x1:0px; --kmodal-box-shadow-y1:14px; --kmodal-box-shadow-spread1:0px; --lm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --dm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --kmodal-box-shadow-color2:var(--lm-kmodal-box-shadow-color2); --kmodal-box-shadow-blur2:10px; --kmodal-box-shadow-x2:0px; --kmodal-box-shadow-y2:10px; --kmodal-box-shadow-spread2:0px; --kmodal-box-shadow: var(--kmodal-box-shadow-x1) var(--kmodal-box-shadow-y1) var(--kmodal-box-shadow-blur1) var(--kmodal-box-shadow-spread1) var(--kmodal-box-shadow-color1), var(--kmodal-box-shadow-x2) var(--kmodal-box-shadow-y2) var(--kmodal-box-shadow-blur2) var(--kmodal-box-shadow-spread2) var(--kmodal-box-shadow-color2); --kmodal-close-width:1rem; --kmodal-close-height:1rem; --lm-kmodal-close-color:#ccc; --dm-kmodal-close-color:#aaa; --kmodal-close-color:var(--lm-kmodal-close-color); --lm-kmodal-close-hover-color:#aaa; --dm-kmodal-close-hover-color:#aaa; --kmodal-close-hover-color:var(--lm-kmodal-close-hover-color); --kmodal-close-line-thickness:2px; --kmodal-close-line-length:calc(var(--kmodal-close-width) * 1.5); --sheet-header-height: 110px; /* ------------------ Theme Colors ----------------- */ --discworld-sand: #d0a773; --discworld-brown: #7e4839; /* ----------------- Generic Colors ---------------- */ --red-dark: #610000; --blue-light: #7ac3e0; --blue-very-light: #d2e9f8; --purple-light: #c3a1d1; /* ----------------- K-Scaffold Base Colors ---------------- */ --lm-font-color: black; --dm-font-color: beige; --font-color: var(--lm-font-color); --lm-backColor: var(--lm-parchment); --dm-backColor: var(--lm-parchment); --backColor: var(--lm-backColor); --lm-borderColor: #42351F; --dm-borderColor: #42351F; --borderColor: var(--lm-borderColor); --lm-rowHighlight: #e2dcd5; --dm-rowHighlight: #e2dcd5; --rowHighlight: var(--lm-rowHighlight); /* ----------------- Font Settings ---------------- */ --fontMain: "Libre Caslon Text", serif; --fontHeader: "IM Fell English SC", serif; --fontScript: "Romanesco", serif; --fontSystem: "Josefin Sans", sans-serif; --fontIcon: "Material Symbols Outlined", "Material Icons", "Material Design Icons", "Font Awesome 5 Free"; --font-family: var(--fontMain); /* ----------------- Font Sizes ---------------- */ --size1: 225%; --size2: 200%; --size3: 175%; --size4: 150%; --size5: 125%; --size6: 100%; --size7: 75%; /* ----------------- Themed Images ---------------- */ --packageCssClass: "discworld"; /* ----------------- Themed Colors (Light Mode) ---------------- */ --input-outline: var(--discworld-sand); --portrait-shadow: var(--red-dark); --title: var(--discworld-brown); --callout-primary: rgba(208, 167, 115, 0.35); --callout-primary-shadow-inset: #eee; --callout-primary-shadow-depth: #382501; --highlight-color: rgba(208, 167, 115, 0.2); --placeholder-color: rgba(208, 167, 115, 0.8); --toggle-icon: var(--discworld-brown); /* ----------------- Notch & Borders ---------------- */ --notchSize: 7px; --notchBorderSize: 1px; --notchColor: var(--lm-backColor); --lm-parchment: #f3f2ef; --lm-nested: #e5e1de; --lm-alternate_row: #dfd7cf; --lm-deep: #b09d8d; --lm-border: #42351F; /* ----------------- Decoration Settings ---------------- */ --corner-ul-width: 125px; --corner-ur-width: 275px; --corner-br-width: 101px; --corner-br-height: 500px; --corner-ur-height: 125px; --logo-width: 200px; --logo-height: 100px; --logo-min-space: 250px; /* ----------------- Logo ---------------- */ --dw-logo: url(https://files.d20.io/images/434666659/ZZ5SAZBKvYGDBiIMvxeZDg/max.png?1743169287); --default-avatar: url(https://files.d20.io/images/436164906/0PiSKwWYu02HaO-EG86gNA/original.png); /* ----------------- Themed Filters (Light Mode) ---------------- */ --filter-logo: none; --sheet-background: url(https://files.d20.io/images/434666656/l5oOEzAOunkAXb_i_tm-nQ/original.png); /* ----------------- Image Borders ---------------- */ --paint-smear: url(https://files.d20.io/images/434666653/1Ljh_s-tR_Zt8uxC42aS7A/max.png?1743169286); --sheet-bottom-right: url(https://files.d20.io/images/434666658/3-qzMN1knhpiGSsBfymuVA/max.png?1743169287); --sheet-upper-left: url(https://files.d20.io/images/434666657/xL91sSIQBoRq9rVbU4_uSw/original.png?1743169287); --sheet-upper-right: url(https://files.d20.io/images/434666655/hRVc2O1iiVMW8vy2qPf5Vg/max.png?1743169287); --banner-decoration: url(https://files.d20.io/images/434666652/-tsNtmxaqzgEXH78DZWktQ/max.png?1743169286); /* ----------------- Dice Assets ---------------- */ --d4: url(https://files.d20.io/images/434666644/bzhbhgaZpOnAKAoKRo8JKQ/max.png); --d6: url(https://files.d20.io/images/434666648/eXP0b0LmhBWpDVXygASqCQ/max.png?1743169285); --d8: url(https://files.d20.io/images/434666645/Uys9UXb7Z_GEynpF4bRx2g/max.png?1743169285); --d10: url(https://files.d20.io/images/434666646/07Fy5eKeijxyTLYn90K1Tg/max.png?17431692859); --d12: url(https://files.d20.io/images/434666647/RMjrH4m8UnszyFjCLynY2Q/max.png?1743169285); --d20: url(https://files.d20.io/images/434666651/FAFEdE0GNnz07-JGrKcpsw/max.png?1743169286); } .sheet-rolltemplate-discworld.sheet-rolltemplate-darkmode { --backColor:var(--dm-backColor); --selectedColor:var(--dm-selectedColor); --unselectedColor1:var(--dm-unselectedColor1); --unselectedColor2:var(--dm-unselectedColor2); --checkColor:var(--dm-checkColor); --checkedBackColor:var(--dm-checkedBackColor); --borderColor:var(--dm-borderColor); --fontColor:var(--dm-fontColor); --disabledColor:var(--dm-disabledColor); --font-color: var(--dm-font-color); --backColor: var(--dm-backColor); --borderColor: var(--dm-borderColor); --rowHighlight: var(--dm-rowHighlight); /* ----------------- Themed Colors (Dark Mode) ---------------- */ --input-outline: var(--purple-light); --title: var(--purple-light); --highlight-color: rgba(195, 161, 209, 0.1); --placeholder-color: rgba(195, 161, 209, 0.65); --callout-primary: rgba(56, 27, 73, 0.35); --callout-primary-shadow-inset: #000; --callout-primary-shadow-depth: #633d79; --toggle-icon: var(--purple-light); /* ----------------- Themed Filters (Dark Mode) ---------------- */ --filter-logo: invert(0.8); --sheet-background: url(https://s3.amazonaws.com/files.d20.io/images/433238436/GxfTIZ1gykfcairmqQan1Q/thumb.png?1742217845); } .sheet-rolltemplate-discworld .sheet-flexrow { display: flex; flex-direction: row; align-items: center; } .sheet-rolltemplate-discworld .sheet-flexcol { display: flex; flex-direction: column; align-items: center; } .sheet-rolltemplate-discworld .sheet-discworld-roll { background-image: linear-gradient(var(--callout-primary) 0%, transparent 90%); box-shadow: inset 0 0 20px var(--callout-primary-shadow-inset); filter: drop-shadow(0 0 10px var(--callout-primary)); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container { border-radius: 10px; padding-top: 0.25rem; padding-bottom: 0.25rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-divider { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-family: var(--fontHeader); color: var(--title); padding: 0 0.25rem; margin: 0.25rem 0; text-align: center; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-divider::before, .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-divider::after { content: ""; flex: 1; height: 2px; border-radius: 2px; margin: 0 0.5rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-divider::before { background: linear-gradient(to right, transparent, var(--title)); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-divider::after { background: linear-gradient(to right, var(--title), transparent); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-trait-quote { text-align: center; font-family: var(--fontMain); color: var(--font-color); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-trait-quote .sheet-quote-text { font-size: 1rem; display: inline-block; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-trait-quote .sheet-quote-text::before { content: "“"; margin-right: 0.15rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-trait-quote .sheet-quote-text::after { content: "”"; margin-left: 0.15rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-trait-quote cite { display: block; font-size: 1.025rem; font-style: italic; padding-top: 0.25rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-trait-container .sheet-trait-quote cite::before { content: "— "; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls { display: flex; justify-content: center; gap: 0.25rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container { flex: 1; text-align: center; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result { list-style: none; margin: 0; padding: 0.25rem; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 1.25rem; text-align: center; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li { width: 3rem; height: 3rem; align-items: center; justify-content: center; position: relative; display: flex; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li::before { content: ""; position: absolute; inset: 0; z-index: 0; mask-repeat: no-repeat; mask-size: contain; mask-position: center; mask-mode: alpha; width: 48px; height: 48px; background-color: var(--title); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li.sheet-d4::before { mask-image: var(--d4); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li.sheet-d6::before { mask-image: var(--d6); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li.sheet-d8::before { mask-image: var(--d8); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li.sheet-d10::before { mask-image: var(--d10); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li.sheet-d12::before { mask-image: var(--d12); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li span { z-index: 1; text-shadow: 0 0 2px black, 0 0 4px black, 0 0 6px var(--title); border-radius: 50%; color: white; font-family: var(--fontMain); padding: 0 0.25rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li span .inlinerollresult { background-color: transparent; font-size: 1.25rem; border: none; font-weight: bold; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-result li.sheet-d4 span { transform: translateY(0.125rem); } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-outcome-container .sheet-gmroll { padding-bottom: 0.5rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-roll-link a { display: inline-block; padding: 0.5rem 0.75rem; font-size: 1rem; color: var(--title); font-family: var(--fontHeader); background: var(--callout-primary); border-radius: 6px; border-color: var(--title); text-decoration: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6) 0 0 4px var(--callout-primary); transition: background-color 0.2s, box-shadow 0.2s; margin-top: 0.25rem; margin-bottom: 0.5rem; } .sheet-rolltemplate-discworld .sheet-discworld-roll .sheet-dice-rolls .sheet-roll-link a:hover { background-color: var(--callout-primary); box-shadow: 0 0 10px var(--callout-primary); }