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