mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
2484 lines
84 KiB
CSS
2484 lines
84 KiB
CSS
@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);
|
|
} |