Seraaron
7028dd7d08
- Made class resources into a repeating segment - Added light and heavy attacks separately - Added bonus damage prompt and fixed critical damage not displaying separately - Moved save target to tactics tab - Added a 'whack' button
2651 lines
90 KiB
CSS
2651 lines
90 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700|Jost:ital,wght@0,400;0,700;1,400;1,700|PT+Mono|PT+Sans+Caption:wght@400;700|PT+Serif+Caption&display=swap");
|
|
.sheet-rolltemplate-icon, .ui-dialog {
|
|
--white: rgb(245, 245, 245);
|
|
--off-white: rgb(236, 232, 227);
|
|
--grey-lt: rgb(201, 201, 201);
|
|
--grey: rgb(145, 145, 145);
|
|
--off-grey: rgb(136, 153, 155);
|
|
--grey-dk: rgb(102, 102, 102);
|
|
--off-black: rgb(31, 27, 25);
|
|
--black: rgb(20, 20, 20);
|
|
--half-white: rgba(245, 245, 245, 0.5);
|
|
--half-black: rgba(20, 20, 20, 0.5);
|
|
--half-grey: rgba(145, 145, 145, 0.5);
|
|
--purple: rgb(156, 70, 255);
|
|
--magenta-lt: rgb(242, 130, 255);
|
|
--magenta: rgb(201, 85, 239);
|
|
--magenta-dk: rgb(136, 57, 162);
|
|
--red-lt: rgb(243, 126, 115);
|
|
--red: rgb(237, 34, 11);
|
|
--red-dk: rgb(172, 24, 8);
|
|
--yellow-lt: rgb(255, 217, 49);
|
|
--yellow: rgb(253, 194, 0);
|
|
--yellow-dk: rgb(221, 169, 0);
|
|
--green-lt: rgb(136, 249, 78);
|
|
--green: rgb(96, 216, 54);
|
|
--green-dk: rgb(63, 167, 26);
|
|
--blue-lt: rgb(76, 220, 253);
|
|
--blue: rgb(0, 161, 255);
|
|
--blue-dk: rgb(6, 131, 204);
|
|
--orange: rgb(230, 140, 44);
|
|
}
|
|
|
|
.sheet-rolltemplate-icon, .ui-dialog {
|
|
--basicFont: "Atkinson Hyperlegible", "Open Sans", "Calibri", sans-serif;
|
|
--titleFont: "Jost", "Maven Pro", "Montserrat", "Arial Black", sans-serif;
|
|
--monoFont: "PT Mono", "Liberation Mono", "Courier New", "Courier", monospace;
|
|
--sansFont: "PT Sans Caption", "Liberation Sans", "Arial", "Helvetica", "Tahoma", sans-serif;
|
|
--serifFont: "PT Serif Caption", "Liberation Serif", "Times New Roman", "Mac OS Roman", serif;
|
|
}
|
|
|
|
.serif {
|
|
font-family: var(--serifFont) !important;
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--monoFont) !important;
|
|
}
|
|
|
|
.title {
|
|
font-family: var(--titleFont) !important;
|
|
}
|
|
|
|
.bigger {
|
|
font-size: 1.2rem !important;
|
|
}
|
|
|
|
.big {
|
|
font-size: 1.1rem !important;
|
|
}
|
|
|
|
.normal {
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
.small {
|
|
font-size: 0.9rem !important;
|
|
}
|
|
|
|
.smaller {
|
|
font-size: 0.8rem !important;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .sheet-pictos, .ui-dialog .tab-content .charsheet .sheet-pictos,
|
|
.sheet-rolltemplate-icon .pictos,
|
|
.ui-dialog .tab-content .charsheet .pictos {
|
|
font-family: "pictos" !important;
|
|
text-transform: initial !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .pictos3, .ui-dialog .tab-content .charsheet .pictos3,
|
|
.sheet-rolltemplate-icon .sheet-pictos3,
|
|
.ui-dialog .tab-content .charsheet .sheet-pictos3 {
|
|
font-family: "pictos three" !important;
|
|
text-transform: initial !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .pictoscustom, .ui-dialog .tab-content .charsheet .pictoscustom,
|
|
.sheet-rolltemplate-icon .sheet-pictoscustom,
|
|
.ui-dialog .tab-content .charsheet .sheet-pictoscustom {
|
|
font-family: "pictos custom" !important;
|
|
text-transform: initial !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .stacked.input-label, .ui-dialog .tab-content .charsheet .stacked.input-label {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: reverse;
|
|
-ms-flex-direction: column-reverse;
|
|
flex-direction: column-reverse;
|
|
}
|
|
.sheet-rolltemplate-icon .stacked.center.input-label > *, .ui-dialog .tab-content .charsheet .stacked.center.input-label > * {
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-icon .stacked.input-label:not(.center) > *, .ui-dialog .tab-content .charsheet .stacked.input-label:not(.center) > * {
|
|
text-align: left;
|
|
}
|
|
.sheet-rolltemplate-icon .stacked.input-label > [name], .ui-dialog .tab-content .charsheet .stacked.input-label > [name] {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon :is(.underlined, .boxed):not([readonly]):is(:hover, :focus, :focus-within), .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):is(:hover, :focus, :focus-within) {
|
|
border: 1px solid var(--borderColor);
|
|
border-radius: 5px;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
background-color: var(--backColor);
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .ratio1-1, .ui-dialog .tab-content .charsheet .ratio1-1,
|
|
.sheet-rolltemplate-icon .sheet-ratio1-1,
|
|
.ui-dialog .tab-content .charsheet .sheet-ratio1-1, .sheet-rolltemplate-icon input:where([type=checkbox], [type=radio]), .ui-dialog .tab-content .charsheet input:where([type=checkbox], [type=radio]) {
|
|
aspect-ratio: 1/1;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .roll-container, .ui-dialog .tab-content .charsheet .roll-container, .sheet-rolltemplate-icon .headed-textarea, .ui-dialog .tab-content .charsheet .headed-textarea {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon select, .ui-dialog .tab-content .charsheet select,
|
|
.sheet-rolltemplate-icon .pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .pseudo-select span,
|
|
.sheet-rolltemplate-icon .sheet-pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
.sheet-rolltemplate-icon input:not(:where([type=checkbox], [type=radio])),
|
|
.ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])),
|
|
.sheet-rolltemplate-icon .uneditable-input,
|
|
.ui-dialog .tab-content .charsheet .uneditable-input,
|
|
.sheet-rolltemplate-icon textarea,
|
|
.ui-dialog .tab-content .charsheet textarea {
|
|
border-width: 1px 1px;
|
|
border-style: solid;
|
|
border-radius: 5px;
|
|
border-color: transparent;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .repcontrol-button, .ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
background-color: var(--buttonColor);
|
|
border-radius: 5px;
|
|
-webkit-box-shadow: 0 2px 4px black;
|
|
box-shadow: 0 2px 4px black;
|
|
border-width: 0;
|
|
-webkit-backdrop-filter: blur(1px);
|
|
backdrop-filter: blur(1px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .repcontrol-button, .ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
padding: 5px 7px;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .uppercase, .ui-dialog .tab-content .charsheet .uppercase,
|
|
.sheet-rolltemplate-icon .sheet-uppercase,
|
|
.ui-dialog .tab-content .charsheet .sheet-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .smallcaps, .ui-dialog .tab-content .charsheet .smallcaps {
|
|
font-variant-caps: small-caps;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .sheet-hidden, .ui-dialog .tab-content .charsheet .sheet-hidden,
|
|
.sheet-rolltemplate-icon .hidden,
|
|
.ui-dialog .tab-content .charsheet .hidden,
|
|
.sheet-rolltemplate-icon *[hidden],
|
|
.ui-dialog .tab-content .charsheet *[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .emph, .ui-dialog .tab-content .charsheet .emph, .sheet-rolltemplate-icon .sheet-emph, .ui-dialog .tab-content .charsheet .sheet-emph,
|
|
.sheet-rolltemplate-icon .sheet-italics,
|
|
.ui-dialog .tab-content .charsheet .sheet-italics,
|
|
.sheet-rolltemplate-icon .italics,
|
|
.ui-dialog .tab-content .charsheet .italics {
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .bold, .ui-dialog .tab-content .charsheet .bold, .sheet-rolltemplate-icon .sheet-bold, .ui-dialog .tab-content .charsheet .sheet-bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon span, .ui-dialog .tab-content .charsheet span,
|
|
.sheet-rolltemplate-icon input,
|
|
.ui-dialog .tab-content .charsheet input,
|
|
.sheet-rolltemplate-icon textarea,
|
|
.ui-dialog .tab-content .charsheet textarea, .sheet-rolltemplate-icon h6 *, .ui-dialog .tab-content .charsheet h6 *,
|
|
.sheet-rolltemplate-icon *[aria-level="6"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"] *, .sheet-rolltemplate-icon h6, .ui-dialog .tab-content .charsheet h6,
|
|
.sheet-rolltemplate-icon *[aria-level="6"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"], .sheet-rolltemplate-icon h5 *, .ui-dialog .tab-content .charsheet h5 *,
|
|
.sheet-rolltemplate-icon *[aria-level="5"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-icon h5, .ui-dialog .tab-content .charsheet h5,
|
|
.sheet-rolltemplate-icon *[aria-level="5"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"], #main .glyph-only *, .sheet-rolltemplate-icon h4 *, .ui-dialog .tab-content .charsheet h4 *,
|
|
.sheet-rolltemplate-icon *[aria-level="4"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] *, #main .glyph-only, .sheet-rolltemplate-icon h4, .ui-dialog .tab-content .charsheet h4,
|
|
.sheet-rolltemplate-icon *[aria-level="4"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-icon h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-icon .h3-style-input *, .ui-dialog .tab-content .charsheet .h3-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-icon h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-icon .h3-style-input, .ui-dialog .tab-content .charsheet .h3-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-icon h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-icon *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-icon h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-icon *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-icon h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-icon .h1-style-input *, .ui-dialog .tab-content .charsheet .h1-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-icon h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-icon .h1-style-input, .ui-dialog .tab-content .charsheet .h1-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
line-height: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h6 *, .ui-dialog .tab-content .charsheet h6 *,
|
|
.sheet-rolltemplate-icon *[aria-level="6"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"] *, .sheet-rolltemplate-icon h6, .ui-dialog .tab-content .charsheet h6,
|
|
.sheet-rolltemplate-icon *[aria-level="6"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"], .sheet-rolltemplate-icon h5 *, .ui-dialog .tab-content .charsheet h5 *,
|
|
.sheet-rolltemplate-icon *[aria-level="5"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-icon h5, .ui-dialog .tab-content .charsheet h5,
|
|
.sheet-rolltemplate-icon *[aria-level="5"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"], #main .glyph-only *, .sheet-rolltemplate-icon h4 *, .ui-dialog .tab-content .charsheet h4 *,
|
|
.sheet-rolltemplate-icon *[aria-level="4"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] *, #main .glyph-only, .sheet-rolltemplate-icon h4, .ui-dialog .tab-content .charsheet h4,
|
|
.sheet-rolltemplate-icon *[aria-level="4"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"], .sheet-rolltemplate-icon h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-icon .h3-style-input *, .ui-dialog .tab-content .charsheet .h3-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-icon h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-icon .h3-style-input, .ui-dialog .tab-content .charsheet .h3-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-icon h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-icon *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-icon h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-icon *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-icon h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-icon .h1-style-input *, .ui-dialog .tab-content .charsheet .h1-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-icon h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-icon .h1-style-input, .ui-dialog .tab-content .charsheet .h1-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
color: var(--fontColor);
|
|
display: block;
|
|
white-space: nowrap;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-icon .h3-style-input *, .ui-dialog .tab-content .charsheet .h3-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-icon h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-icon .h3-style-input, .ui-dialog .tab-content .charsheet .h3-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"], .sheet-rolltemplate-icon h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-icon *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-icon h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-icon *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"], .sheet-rolltemplate-icon h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-icon .h1-style-input *, .ui-dialog .tab-content .charsheet .h1-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-icon h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-icon .h1-style-input, .ui-dialog .tab-content .charsheet .h1-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h6 *, .ui-dialog .tab-content .charsheet h6 *,
|
|
.sheet-rolltemplate-icon *[aria-level="6"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"] *, .sheet-rolltemplate-icon h6, .ui-dialog .tab-content .charsheet h6,
|
|
.sheet-rolltemplate-icon *[aria-level="6"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"], .sheet-rolltemplate-icon h5 *, .ui-dialog .tab-content .charsheet h5 *,
|
|
.sheet-rolltemplate-icon *[aria-level="5"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-icon h5, .ui-dialog .tab-content .charsheet h5,
|
|
.sheet-rolltemplate-icon *[aria-level="5"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"], #main .glyph-only *, .sheet-rolltemplate-icon h4 *, .ui-dialog .tab-content .charsheet h4 *,
|
|
.sheet-rolltemplate-icon *[aria-level="4"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] *, #main .glyph-only, .sheet-rolltemplate-icon h4, .ui-dialog .tab-content .charsheet h4,
|
|
.sheet-rolltemplate-icon *[aria-level="4"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] {
|
|
text-transform: uppercase;
|
|
}
|
|
.sheet-rolltemplate-icon h6 :not(input), .ui-dialog .tab-content .charsheet h6 :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="6"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"] :not(input), .sheet-rolltemplate-icon h6:not(input), .ui-dialog .tab-content .charsheet h6:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="6"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="6"]:not(input), .sheet-rolltemplate-icon h5 :not(input), .ui-dialog .tab-content .charsheet h5 :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="5"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] :not(input), .sheet-rolltemplate-icon h5:not(input), .ui-dialog .tab-content .charsheet h5:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="5"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="5"]:not(input), #main .glyph-only :not(input), .sheet-rolltemplate-icon h4 :not(input), .ui-dialog .tab-content .charsheet h4 :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="4"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] :not(input), #main .glyph-only:not(input), .sheet-rolltemplate-icon h4:not(input), .ui-dialog .tab-content .charsheet h4:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="4"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="4"]:not(input) {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.header__image {
|
|
min-width: 191.5px;
|
|
min-height: 88.2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h1 *, .ui-dialog .tab-content .charsheet h1 *, .sheet-rolltemplate-icon .h1-style-input *, .ui-dialog .tab-content .charsheet .h1-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="1"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] *, .sheet-rolltemplate-icon h1, .ui-dialog .tab-content .charsheet h1, .sheet-rolltemplate-icon .h1-style-input, .ui-dialog .tab-content .charsheet .h1-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="1"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] {
|
|
font-size: 2rem !important;
|
|
font-family: var(--titleFont);
|
|
text-transform: uppercase;
|
|
background-color: var(--magenta);
|
|
color: var(--invertedFontColor) !important;
|
|
}
|
|
.sheet-rolltemplate-icon h1 :not(input), .ui-dialog .tab-content .charsheet h1 :not(input), .sheet-rolltemplate-icon .h1-style-input :not(input), .ui-dialog .tab-content .charsheet .h1-style-input :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="1"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"] :not(input), .sheet-rolltemplate-icon h1:not(input), .ui-dialog .tab-content .charsheet h1:not(input), .sheet-rolltemplate-icon .h1-style-input:not(input), .ui-dialog .tab-content .charsheet .h1-style-input:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="1"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="1"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h2 *, .ui-dialog .tab-content .charsheet h2 *, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name] *, .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *,
|
|
.sheet-rolltemplate-icon *[aria-level="2"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] *, .sheet-rolltemplate-icon h2, .ui-dialog .tab-content .charsheet h2, .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name], .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name],
|
|
.sheet-rolltemplate-icon *[aria-level="2"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] {
|
|
font-size: 1.75rem;
|
|
font-family: var(--serifFont);
|
|
grid-area: header;
|
|
}
|
|
.sheet-rolltemplate-icon h2 :not(input), .ui-dialog .tab-content .charsheet h2 :not(input), .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name] :not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="2"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="2"] :not(input), .sheet-rolltemplate-icon h2:not(input), .ui-dialog .tab-content .charsheet h2:not(input), .sheet-rolltemplate-icon .input-label:not(.stacked).large > [name]:not(input), .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="2"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="2"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h3 *, .ui-dialog .tab-content .charsheet h3 *, .sheet-rolltemplate-icon .h3-style-input *, .ui-dialog .tab-content .charsheet .h3-style-input *,
|
|
.sheet-rolltemplate-icon *[aria-level="3"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] *, .sheet-rolltemplate-icon h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-icon .h3-style-input, .ui-dialog .tab-content .charsheet .h3-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] {
|
|
font-size: 1.5rem;
|
|
font-family: var(--titleFont);
|
|
}
|
|
.sheet-rolltemplate-icon h3 :not(input), .ui-dialog .tab-content .charsheet h3 :not(input), .sheet-rolltemplate-icon .h3-style-input :not(input), .ui-dialog .tab-content .charsheet .h3-style-input :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="3"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] :not(input), .sheet-rolltemplate-icon h3:not(input), .ui-dialog .tab-content .charsheet h3:not(input), .sheet-rolltemplate-icon .h3-style-input:not(input), .ui-dialog .tab-content .charsheet .h3-style-input:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="3"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="3"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
#main .glyph-only *, .sheet-rolltemplate-icon h4 *, .ui-dialog .tab-content .charsheet h4 *,
|
|
.sheet-rolltemplate-icon *[aria-level="4"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] *, #main .glyph-only, .sheet-rolltemplate-icon h4, .ui-dialog .tab-content .charsheet h4,
|
|
.sheet-rolltemplate-icon *[aria-level="4"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] {
|
|
font-size: 1.25rem;
|
|
font-family: var(--serifFont);
|
|
}
|
|
#main .glyph-only :not(input), .sheet-rolltemplate-icon h4 :not(input), .ui-dialog .tab-content .charsheet h4 :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="4"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="4"] :not(input), #main .glyph-only:not(input), .sheet-rolltemplate-icon h4:not(input), .ui-dialog .tab-content .charsheet h4:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="4"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="4"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h5 *, .ui-dialog .tab-content .charsheet h5 *,
|
|
.sheet-rolltemplate-icon *[aria-level="5"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] *, .sheet-rolltemplate-icon h5, .ui-dialog .tab-content .charsheet h5,
|
|
.sheet-rolltemplate-icon *[aria-level="5"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] {
|
|
font-size: 1.1rem;
|
|
font-style: normal;
|
|
font-family: var(--titleFont);
|
|
}
|
|
.sheet-rolltemplate-icon h5 :not(input), .ui-dialog .tab-content .charsheet h5 :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="5"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="5"] :not(input), .sheet-rolltemplate-icon h5:not(input), .ui-dialog .tab-content .charsheet h5:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="5"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="5"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon h6 *, .ui-dialog .tab-content .charsheet h6 *,
|
|
.sheet-rolltemplate-icon *[aria-level="6"] *,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"] *, .sheet-rolltemplate-icon h6, .ui-dialog .tab-content .charsheet h6,
|
|
.sheet-rolltemplate-icon *[aria-level="6"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"] {
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
font-family: var(--serifFont);
|
|
}
|
|
.sheet-rolltemplate-icon h6 :not(input), .ui-dialog .tab-content .charsheet h6 :not(input),
|
|
.sheet-rolltemplate-icon *[aria-level="6"] :not(input),
|
|
.ui-dialog .tab-content .charsheet *[aria-level="6"] :not(input), .sheet-rolltemplate-icon h6:not(input), .ui-dialog .tab-content .charsheet h6:not(input),
|
|
.sheet-rolltemplate-icon [aria-level="6"]:not(input),
|
|
.ui-dialog .tab-content .charsheet [aria-level="6"]:not(input) {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon input:where([type=checkbox], [type=radio]):checked, .ui-dialog .tab-content .charsheet input:where([type=checkbox], [type=radio]):checked {
|
|
background-color: var(--selectedColor);
|
|
}
|
|
|
|
.sheet-rolltemplate-icon .boxed, .ui-dialog .tab-content .charsheet .boxed,
|
|
.sheet-rolltemplate-icon .sheet-boxed,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed {
|
|
border: 1px solid var(--borderColor);
|
|
border-radius: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.well-padded {
|
|
padding: 0.5rem !important;
|
|
margin: 0.5rem !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-icon, .ui-dialog {
|
|
--shadowColor1:rgba(0, 0, 0, 0.16);
|
|
--shadowColor2:rgba(0, 0, 0, 0.24);
|
|
--grid-gap: 1rem;
|
|
--half-gap: calc(var(--grid-gap) / 2);
|
|
--tiny-gap: calc(var(--half-gap) / 2);
|
|
--big-gap: calc(var(--grid-gap) * 2);
|
|
--revealTime: 500ms;
|
|
--delayTime: 200ms;
|
|
--inputSwap: opacity var(--revealTime) ease var(--delayTime);
|
|
--focusTiming: 500ms ease;
|
|
--focusTrans: all var(--focusTiming);
|
|
--spanSectionColumn: 1/-1;
|
|
--displayBorderWidth: 2px;
|
|
--borderColor: var(--off-black);
|
|
--fontColor: var(--black);
|
|
--invertedFontColor: var(--white);
|
|
--placeholderFontColor: var(--grey-dk);
|
|
--backColor: var(--half-white);
|
|
--invertedBackColor: var(--half-black);
|
|
--subHeadBackColor: var(--grey);
|
|
--unselectedColor: var(--grey-lt);
|
|
--selectedColor: var(--orange);
|
|
--disableBackground: var(--grey-lt);
|
|
--buttonColor: var(--magenta);
|
|
--hoverColor: var(--orange);
|
|
--clickColor: var(--magenta-lt);
|
|
--r20white: white;
|
|
--r20black: rgb(31, 31, 31);
|
|
}
|
|
|
|
.sheet-rolltemplate-icon, .ui-dialog .tab-content .charsheet {
|
|
gap: var(--grid-gap);
|
|
}
|
|
.sheet-rolltemplate-icon button, .ui-dialog .tab-content .charsheet button {
|
|
cursor: pointer;
|
|
}
|
|
.sheet-rolltemplate-icon .capitalize, .ui-dialog .tab-content .charsheet .capitalize,
|
|
.sheet-rolltemplate-icon .sheet-capitalize,
|
|
.ui-dialog .tab-content .charsheet .sheet-capitalize {
|
|
text-transform: capitalize !important;
|
|
}
|
|
.sheet-rolltemplate-icon .flex-box, .ui-dialog .tab-content .charsheet .flex-box,
|
|
.sheet-rolltemplate-icon .sheet-flex-box,
|
|
.ui-dialog .tab-content .charsheet .sheet-flex-box {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
.sheet-rolltemplate-icon .flex-box.col, .ui-dialog .tab-content .charsheet .flex-box.col,
|
|
.sheet-rolltemplate-icon .sheet-flex-box.col,
|
|
.ui-dialog .tab-content .charsheet .sheet-flex-box.col {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.sheet-rolltemplate-icon .flex-box.row, .ui-dialog .tab-content .charsheet .flex-box.row,
|
|
.sheet-rolltemplate-icon .sheet-flex-box.row,
|
|
.ui-dialog .tab-content .charsheet .sheet-flex-box.row {
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
width: 95%;
|
|
position: relative;
|
|
left: 10px;
|
|
}
|
|
.sheet-rolltemplate-icon .space-around, .ui-dialog .tab-content .charsheet .space-around,
|
|
.sheet-rolltemplate-icon .sheet-space-around,
|
|
.ui-dialog .tab-content .charsheet .sheet-space-around {
|
|
-ms-flex-pack: distribute;
|
|
justify-content: space-around;
|
|
}
|
|
.sheet-rolltemplate-icon .space-between, .ui-dialog .tab-content .charsheet .space-between,
|
|
.sheet-rolltemplate-icon .sheet-space-between,
|
|
.ui-dialog .tab-content .charsheet .sheet-space-between {
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
.sheet-rolltemplate-icon .center, .ui-dialog .tab-content .charsheet .center,
|
|
.sheet-rolltemplate-icon .sheet-center,
|
|
.ui-dialog .tab-content .charsheet .sheet-center {
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-icon .right, .ui-dialog .tab-content .charsheet .right {
|
|
text-align: right;
|
|
}
|
|
.sheet-rolltemplate-icon .left, .ui-dialog .tab-content .charsheet .left {
|
|
text-align: left;
|
|
}
|
|
.sheet-rolltemplate-icon .justify-left, .ui-dialog .tab-content .charsheet .justify-left,
|
|
.sheet-rolltemplate-icon .justify-start,
|
|
.ui-dialog .tab-content .charsheet .justify-start {
|
|
-ms-grid-column-align: start;
|
|
justify-self: start;
|
|
}
|
|
.sheet-rolltemplate-icon .justify-right, .ui-dialog .tab-content .charsheet .justify-right,
|
|
.sheet-rolltemplate-icon .justify-end,
|
|
.ui-dialog .tab-content .charsheet .justify-end {
|
|
-ms-grid-column-align: end;
|
|
justify-self: end;
|
|
}
|
|
.sheet-rolltemplate-icon .align-start, .ui-dialog .tab-content .charsheet .align-start {
|
|
-ms-flex-item-align: start;
|
|
-ms-grid-row-align: start;
|
|
align-self: start;
|
|
}
|
|
.sheet-rolltemplate-icon .align-end, .ui-dialog .tab-content .charsheet .align-end {
|
|
-ms-flex-item-align: end;
|
|
-ms-grid-row-align: end;
|
|
align-self: end;
|
|
}
|
|
.sheet-rolltemplate-icon .grid__8col, .ui-dialog .tab-content .charsheet .grid__8col, .sheet-rolltemplate-icon .grid__4col, .ui-dialog .tab-content .charsheet .grid__4col, .sheet-rolltemplate-icon .grid__3col, .ui-dialog .tab-content .charsheet .grid__3col, .sheet-rolltemplate-icon .grid__2col, .ui-dialog .tab-content .charsheet .grid__2col {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
width: auto;
|
|
gap: var(--half-gap);
|
|
}
|
|
.sheet-rolltemplate-icon .grid__8col.grid__8col, .ui-dialog .tab-content .charsheet .grid__8col.grid__8col {
|
|
-ms-grid-columns: auto auto auto auto auto auto auto auto;
|
|
grid-template-columns: auto auto auto auto auto auto auto auto;
|
|
}
|
|
.sheet-rolltemplate-icon .grid__4col.grid__4col, .ui-dialog .tab-content .charsheet .grid__4col.grid__4col {
|
|
-ms-grid-columns: auto auto auto auto;
|
|
grid-template-columns: auto auto auto auto;
|
|
}
|
|
.sheet-rolltemplate-icon .grid__3col.grid__3col, .ui-dialog .tab-content .charsheet .grid__3col.grid__3col {
|
|
-ms-grid-columns: auto auto auto;
|
|
grid-template-columns: auto auto auto;
|
|
}
|
|
.sheet-rolltemplate-icon .grid__2col.grid__2col, .ui-dialog .tab-content .charsheet .grid__2col.grid__2col {
|
|
-ms-grid-columns: auto auto;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
.sheet-rolltemplate-icon .no-gap, .ui-dialog .tab-content .charsheet .no-gap {
|
|
gap: 0px !important;
|
|
}
|
|
.sheet-rolltemplate-icon .half-gap, .ui-dialog .tab-content .charsheet .half-gap {
|
|
gap: var(--half-gap);
|
|
}
|
|
.sheet-rolltemplate-icon textarea, .ui-dialog .tab-content .charsheet textarea {
|
|
font-family: var(--basicFont);
|
|
font-weight: normal !important;
|
|
resize: vertical;
|
|
line-height: 1.25em;
|
|
min-height: 2.5rem;
|
|
white-space: pre-wrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.fixed, .ui-dialog .tab-content .charsheet textarea.fixed {
|
|
resize: none;
|
|
overflow: auto;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.textarea-1, .ui-dialog .tab-content .charsheet textarea.textarea-1 {
|
|
height: 1.25em;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.textarea-2, .ui-dialog .tab-content .charsheet textarea.textarea-2 {
|
|
height: 2.5em;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.textarea-3, .ui-dialog .tab-content .charsheet textarea.textarea-3 {
|
|
height: 3.75em;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.textarea-4, .ui-dialog .tab-content .charsheet textarea.textarea-4 {
|
|
height: 4em;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.textarea-5, .ui-dialog .tab-content .charsheet textarea.textarea-5 {
|
|
height: 6.25em;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.textarea-6, .ui-dialog .tab-content .charsheet textarea.textarea-6 {
|
|
height: 7.5em;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.textarea-8, .ui-dialog .tab-content .charsheet textarea.textarea-8 {
|
|
height: 10em;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.no-style, .ui-dialog .tab-content .charsheet textarea.no-style {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
.sheet-rolltemplate-icon textarea.ambition, .ui-dialog .tab-content .charsheet textarea.ambition {
|
|
width: 90% !important;
|
|
font-size: 1.1rem;
|
|
}
|
|
.sheet-rolltemplate-icon .span-3, .ui-dialog .tab-content .charsheet .span-3 {
|
|
-ms-grid-column-span: 3;
|
|
grid-column: span 3;
|
|
}
|
|
.sheet-rolltemplate-icon .span-2, .ui-dialog .tab-content .charsheet .span-2,
|
|
.sheet-rolltemplate-icon .sheet-span-2,
|
|
.ui-dialog .tab-content .charsheet .sheet-span-2 {
|
|
-ms-grid-column-span: 2;
|
|
grid-column: span 2;
|
|
}
|
|
.sheet-rolltemplate-icon .span-all, .ui-dialog .tab-content .charsheet .span-all,
|
|
.sheet-rolltemplate-icon .sheet-span-all,
|
|
.ui-dialog .tab-content .charsheet .sheet-span-all {
|
|
grid-column: 1/-1;
|
|
}
|
|
.sheet-rolltemplate-icon select, .ui-dialog .tab-content .charsheet select,
|
|
.sheet-rolltemplate-icon .pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .pseudo-select span,
|
|
.sheet-rolltemplate-icon .sheet-pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
.sheet-rolltemplate-icon textarea,
|
|
.ui-dialog .tab-content .charsheet textarea,
|
|
.sheet-rolltemplate-icon input:not(:is([type=radio], [type=checkbox])),
|
|
.ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])),
|
|
.sheet-rolltemplate-icon .uneditable-input,
|
|
.ui-dialog .tab-content .charsheet .uneditable-input {
|
|
padding: 2px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
.sheet-rolltemplate-icon input:is([type=text], [type=number]), .ui-dialog .tab-content .charsheet input:is([type=text], [type=number]),
|
|
.sheet-rolltemplate-icon textarea,
|
|
.ui-dialog .tab-content .charsheet textarea {
|
|
cursor: auto;
|
|
}
|
|
.sheet-rolltemplate-icon select, .ui-dialog .tab-content .charsheet select,
|
|
.sheet-rolltemplate-icon .sheet-pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .sheet-pseudo-select span,
|
|
.sheet-rolltemplate-icon .pseudo-select span,
|
|
.ui-dialog .tab-content .charsheet .pseudo-select span {
|
|
-webkit-apperance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
text-transform: capitalize;
|
|
overflow: hidden !important;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-icon input, .ui-dialog .tab-content .charsheet input {
|
|
width: auto;
|
|
}
|
|
.sheet-rolltemplate-icon input:placeholder, .ui-dialog .tab-content .charsheet input:placeholder {
|
|
color: var(--placeholderFontColor);
|
|
}
|
|
.sheet-rolltemplate-icon input.plus-control:not([value*="-"]) + span:before, .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before {
|
|
content: "+";
|
|
}
|
|
.sheet-rolltemplate-icon span, .ui-dialog .tab-content .charsheet span,
|
|
.sheet-rolltemplate-icon input,
|
|
.ui-dialog .tab-content .charsheet input,
|
|
.sheet-rolltemplate-icon textarea,
|
|
.ui-dialog .tab-content .charsheet textarea {
|
|
font-size: 1rem;
|
|
}
|
|
.sheet-rolltemplate-icon span[name], .ui-dialog .tab-content .charsheet span[name],
|
|
.sheet-rolltemplate-icon input,
|
|
.ui-dialog .tab-content .charsheet input,
|
|
.sheet-rolltemplate-icon textarea,
|
|
.ui-dialog .tab-content .charsheet textarea,
|
|
.sheet-rolltemplate-icon select,
|
|
.ui-dialog .tab-content .charsheet select {
|
|
font-family: var(--basicFont);
|
|
--fontWght: 700;
|
|
font-weight: var(--fontWght);
|
|
font-variation-settings: "wght" var(--fontWght);
|
|
background-color: var(--backColor);
|
|
color: var(--fontColor);
|
|
}
|
|
.sheet-rolltemplate-icon h1::-webkit-input-placeholder, .ui-dialog .tab-content .charsheet h1::-webkit-input-placeholder, .sheet-rolltemplate-icon .h1-style-input::-webkit-input-placeholder, .ui-dialog .tab-content .charsheet .h1-style-input::-webkit-input-placeholder, .sheet-rolltemplate-icon *[aria-level="1"]::-webkit-input-placeholder, .ui-dialog .tab-content .charsheet *[aria-level="1"]::-webkit-input-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.sheet-rolltemplate-icon h1::-moz-placeholder, .ui-dialog .tab-content .charsheet h1::-moz-placeholder, .sheet-rolltemplate-icon .h1-style-input::-moz-placeholder, .ui-dialog .tab-content .charsheet .h1-style-input::-moz-placeholder, .sheet-rolltemplate-icon *[aria-level="1"]::-moz-placeholder, .ui-dialog .tab-content .charsheet *[aria-level="1"]::-moz-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.sheet-rolltemplate-icon h1:-ms-input-placeholder, .ui-dialog .tab-content .charsheet h1:-ms-input-placeholder, .sheet-rolltemplate-icon .h1-style-input:-ms-input-placeholder, .ui-dialog .tab-content .charsheet .h1-style-input:-ms-input-placeholder, .sheet-rolltemplate-icon *[aria-level="1"]:-ms-input-placeholder, .ui-dialog .tab-content .charsheet *[aria-level="1"]:-ms-input-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.sheet-rolltemplate-icon h1::-ms-input-placeholder, .ui-dialog .tab-content .charsheet h1::-ms-input-placeholder, .sheet-rolltemplate-icon .h1-style-input::-ms-input-placeholder, .ui-dialog .tab-content .charsheet .h1-style-input::-ms-input-placeholder, .sheet-rolltemplate-icon *[aria-level="1"]::-ms-input-placeholder, .ui-dialog .tab-content .charsheet *[aria-level="1"]::-ms-input-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.sheet-rolltemplate-icon h1::placeholder, .ui-dialog .tab-content .charsheet h1::placeholder, .sheet-rolltemplate-icon .h1-style-input::placeholder, .ui-dialog .tab-content .charsheet .h1-style-input::placeholder,
|
|
.sheet-rolltemplate-icon *[aria-level="1"]::placeholder,
|
|
.ui-dialog .tab-content .charsheet *[aria-level="1"]::placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.sheet-rolltemplate-icon .h1-style-input, .ui-dialog .tab-content .charsheet .h1-style-input {
|
|
text-align: center;
|
|
border-radius: 0;
|
|
border: none;
|
|
height: 46px;
|
|
min-width: 200px;
|
|
}
|
|
.sheet-rolltemplate-icon .h1-style-input:not(.color-receiver), .ui-dialog .tab-content .charsheet .h1-style-input:not(.color-receiver) {
|
|
background-color: var(--magenta) !important;
|
|
}
|
|
.sheet-rolltemplate-icon h3, .ui-dialog .tab-content .charsheet h3, .sheet-rolltemplate-icon .h3-style-input, .ui-dialog .tab-content .charsheet .h3-style-input,
|
|
.sheet-rolltemplate-icon *[aria-level="3"],
|
|
.ui-dialog .tab-content .charsheet *[aria-level="3"] {
|
|
text-overflow: ellipsis;
|
|
}
|
|
.sheet-rolltemplate-icon input:where([type=checkbox], [type=radio]), .ui-dialog .tab-content .charsheet input:where([type=checkbox], [type=radio]) {
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
border: 1px solid var(--borderColor);
|
|
cursor: pointer;
|
|
width: 1rem;
|
|
display: inline-block;
|
|
}
|
|
.sheet-rolltemplate-icon input[type=radio], .ui-dialog .tab-content .charsheet input[type=radio] {
|
|
-webkit-appearance: radio;
|
|
-moz-appearance: radio;
|
|
appearance: radio;
|
|
}
|
|
.sheet-rolltemplate-icon input[type=number], .ui-dialog .tab-content .charsheet input[type=number] {
|
|
width: 3rem;
|
|
-moz-appearance: textfield !important;
|
|
text-align: center;
|
|
}
|
|
.sheet-rolltemplate-icon input[type=number]::-webkit-inner-spin-button, .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, .sheet-rolltemplate-icon 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-icon .sheet-number, .ui-dialog .tab-content .charsheet .sheet-number,
|
|
.sheet-rolltemplate-icon .number,
|
|
.ui-dialog .tab-content .charsheet .number {
|
|
width: 2rem;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-rolltemplate-icon section, .ui-dialog .tab-content .charsheet section, .sheet-rolltemplate-icon header, .ui-dialog .tab-content .charsheet header, .sheet-rolltemplate-icon footer, .ui-dialog .tab-content .charsheet footer {
|
|
-ms-grid-row-align: start;
|
|
align-self: start;
|
|
display: -ms-grid;
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
}
|
|
.sheet-rolltemplate-icon .pseudo-button, .ui-dialog .tab-content .charsheet .pseudo-button {
|
|
cursor: pointer;
|
|
}
|
|
.sheet-rolltemplate-icon .pseudo-button:hover > .pseudo-button__span, .ui-dialog .tab-content .charsheet .pseudo-button:hover > .pseudo-button__span, .sheet-rolltemplate-icon .pseudo-button:focus-within > .pseudo-button__span, .ui-dialog .tab-content .charsheet .pseudo-button:focus-within > .pseudo-button__span {
|
|
background-color: var(--selectedColor);
|
|
color: var(--backColor);
|
|
}
|
|
.sheet-rolltemplate-icon .pseudo-button__span, .ui-dialog .tab-content .charsheet .pseudo-button__span {
|
|
border-radius: 5px;
|
|
border: 1px solid var(--borderColor);
|
|
text-align: center;
|
|
padding: 0 5px;
|
|
-webkit-transition-property: background-color, color;
|
|
transition-property: background-color, color;
|
|
-webkit-transition-duration: var(--revealTime);
|
|
transition-duration: var(--revealTime);
|
|
}
|
|
.sheet-rolltemplate-icon .pseudo-button__input, .ui-dialog .tab-content .charsheet .pseudo-button__input {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-icon .pseudo-button__input:checked + span, .ui-dialog .tab-content .charsheet .pseudo-button__input:checked + span {
|
|
background-color: var(--selectedColor);
|
|
color: var(--backColor);
|
|
}
|
|
.sheet-rolltemplate-icon .input-label, .ui-dialog .tab-content .charsheet .input-label {
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
gap: var(--half-gap);
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.sheet-rolltemplate-icon .input-label:not(.stacked) > [name]:not([type=number], [type=checkbox], [type=radio]), .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > [name]:not([type=number], [type=checkbox], [type=radio]) {
|
|
width: 0;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1 1 0px;
|
|
flex: 1 1 0;
|
|
}
|
|
.sheet-rolltemplate-icon .input-label:not(.stacked) > :not([name]), .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]) {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
.sheet-rolltemplate-icon .input-label--dual, .ui-dialog .tab-content .charsheet .input-label--dual {
|
|
-ms-grid-columns: 1fr auto 1fr;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
grid-template-areas: "over over over" "under under under";
|
|
}
|
|
.sheet-rolltemplate-icon .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-icon .input-label--dual > input, .ui-dialog .tab-content .charsheet .input-label--dual > input {
|
|
width: 100%;
|
|
}
|
|
.sheet-rolltemplate-icon .input-label--dual > .slash, .ui-dialog .tab-content .charsheet .input-label--dual > .slash {
|
|
line-height: 0rem;
|
|
font-weight: normal;
|
|
}
|
|
.sheet-rolltemplate-icon .headed-textarea, .ui-dialog .tab-content .charsheet .headed-textarea {
|
|
-ms-grid-rows: auto 1fr;
|
|
grid-template-rows: auto 1fr;
|
|
-ms-grid-columns: auto;
|
|
grid-template-columns: auto;
|
|
}
|
|
.sheet-rolltemplate-icon .headed-textarea > *:nth-child(1), .ui-dialog .tab-content .charsheet .headed-textarea > *:nth-child(1) {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.sheet-rolltemplate-icon .headed-textarea > *:nth-child(2), .ui-dialog .tab-content .charsheet .headed-textarea > *:nth-child(2) {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.sheet-rolltemplate-icon .headed-textarea h5, .ui-dialog .tab-content .charsheet .headed-textarea h5 {
|
|
-ms-grid-column-align: start;
|
|
justify-self: start;
|
|
}
|
|
.sheet-rolltemplate-icon .boxed.thick-left, .ui-dialog .tab-content .charsheet .boxed.thick-left,
|
|
.sheet-rolltemplate-icon .sheet-boxed.thick-left,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-left {
|
|
border-left-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-icon .boxed.thick-bottom, .ui-dialog .tab-content .charsheet .boxed.thick-bottom,
|
|
.sheet-rolltemplate-icon .sheet-boxed.thick-bottom,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom {
|
|
border-bottom-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-icon .boxed.thick-right, .ui-dialog .tab-content .charsheet .boxed.thick-right,
|
|
.sheet-rolltemplate-icon .sheet-boxed.thick-right,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-right {
|
|
border-right-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-icon .boxed.thick-top, .ui-dialog .tab-content .charsheet .boxed.thick-top,
|
|
.sheet-rolltemplate-icon .sheet-boxed.thick-top,
|
|
.ui-dialog .tab-content .charsheet .sheet-boxed.thick-top {
|
|
border-top-width: 5px;
|
|
}
|
|
.sheet-rolltemplate-icon .underlined, .ui-dialog .tab-content .charsheet .underlined,
|
|
.sheet-rolltemplate-icon .sheet-underlined,
|
|
.ui-dialog .tab-content .charsheet .sheet-underlined {
|
|
border-radius: 0;
|
|
border-bottom: 1px solid var(--borderColor);
|
|
-webkit-transition: var(--focusTrans);
|
|
transition: var(--focusTrans);
|
|
}
|
|
.sheet-rolltemplate-icon :is(.underlined, .boxed):not([readonly]):is(:focus, :focus-within), .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):is(:focus, :focus-within) {
|
|
background-color: var(--invertedFontColor);
|
|
-webkit-transition: var(--focusTrans);
|
|
transition: var(--focusTrans);
|
|
}
|
|
.sheet-rolltemplate-icon .short-text, .ui-dialog .tab-content .charsheet .short-text,
|
|
.sheet-rolltemplate-icon .sheet-short-text,
|
|
.ui-dialog .tab-content .charsheet .sheet-short-text {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.sheet-rolltemplate-icon .roll-container, .ui-dialog .tab-content .charsheet .roll-container {
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
opacity: 0;
|
|
-ms-grid-row: 1;
|
|
-ms-grid-row-span: 1;
|
|
grid-row: 1/2;
|
|
}
|
|
.sheet-rolltemplate-icon .hide-note, .ui-dialog .tab-content .charsheet .hide-note {
|
|
position: relative;
|
|
cursor: help;
|
|
}
|
|
.sheet-rolltemplate-icon .repitem > input:not(:where([type=checkbox], [type=number], [type=radio])), .ui-dialog .tab-content .charsheet .repitem > input:not(:where([type=checkbox], [type=number], [type=radio])), .sheet-rolltemplate-icon .hide-note > input:not(:where([type=checkbox], [type=number], [type=radio])), .ui-dialog .tab-content .charsheet .hide-note > input:not(:where([type=checkbox], [type=number], [type=radio])) {
|
|
width: 100%;
|
|
}
|
|
.sheet-rolltemplate-icon .repitem .headed-textarea, .ui-dialog .tab-content .charsheet .repitem .headed-textarea, .sheet-rolltemplate-icon .hide-note .headed-textarea, .ui-dialog .tab-content .charsheet .hide-note .headed-textarea {
|
|
grid-column: 1/-1;
|
|
}
|
|
.sheet-rolltemplate-icon .repitem .collapse, .ui-dialog .tab-content .charsheet .repitem .collapse, .sheet-rolltemplate-icon .hide-note .collapse, .ui-dialog .tab-content .charsheet .hide-note .collapse {
|
|
-webkit-appearance: none;
|
|
opacity: 0;
|
|
position: absolute;
|
|
right: 2px;
|
|
top: 2px;
|
|
border: none;
|
|
color: var(--selectedColor);
|
|
text-transform: none;
|
|
height: 18px;
|
|
width: 18px; /* IE 9 */
|
|
-webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
|
|
transform: scale(1.2);
|
|
-webkit-font-smoothing: antialiased;
|
|
border-radius: 50%;
|
|
}
|
|
.sheet-rolltemplate-icon .repitem .collapse:after, .ui-dialog .tab-content .charsheet .repitem .collapse:after, .sheet-rolltemplate-icon .hide-note .collapse:after, .ui-dialog .tab-content .charsheet .hide-note .collapse:after {
|
|
content: "i";
|
|
font-family: "Pictos";
|
|
position: relative;
|
|
left: 2px;
|
|
bottom: 2px;
|
|
text-shadow: 1px 1px 3px white;
|
|
}
|
|
.sheet-rolltemplate-icon .repitem .collapse:checked, .ui-dialog .tab-content .charsheet .repitem .collapse:checked, .sheet-rolltemplate-icon .hide-note .collapse:checked, .ui-dialog .tab-content .charsheet .hide-note .collapse:checked {
|
|
background-color: transparent;
|
|
color: var(--unselectedColor);
|
|
}
|
|
.sheet-rolltemplate-icon .repitem .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .repitem .collapse:checked ~ .expanded, .sheet-rolltemplate-icon .hide-note .collapse:checked ~ .expanded, .ui-dialog .tab-content .charsheet .hide-note .collapse:checked ~ .expanded {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-icon .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-icon .hide-note .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .ui-dialog .tab-content .charsheet .hide-note .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + * {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-icon .repitem .collapse:hover, .ui-dialog .tab-content .charsheet .repitem .collapse:hover, .sheet-rolltemplate-icon .hide-note .collapse:hover, .ui-dialog .tab-content .charsheet .hide-note .collapse:hover {
|
|
color: var(--selectedColor);
|
|
}
|
|
.sheet-rolltemplate-icon .repitem:hover .collapse, .ui-dialog .tab-content .charsheet .repitem:hover .collapse,
|
|
.sheet-rolltemplate-icon .repitem:hover .roll-container,
|
|
.ui-dialog .tab-content .charsheet .repitem:hover .roll-container, .sheet-rolltemplate-icon .hide-note:hover .collapse, .ui-dialog .tab-content .charsheet .hide-note:hover .collapse,
|
|
.sheet-rolltemplate-icon .hide-note:hover .roll-container,
|
|
.ui-dialog .tab-content .charsheet .hide-note:hover .roll-container {
|
|
opacity: 1;
|
|
}
|
|
.sheet-rolltemplate-icon .repcontainer.editmode .collapse, .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-icon .repcontainer, .ui-dialog .tab-content .charsheet .repcontainer {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
}
|
|
.sheet-rolltemplate-icon .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-icon .repcontrol-button, .ui-dialog .tab-content .charsheet .repcontrol-button {
|
|
grid-area: header;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
text-transform: none;
|
|
opacity: 0;
|
|
-webkit-transition: opacity var(--revealTime);
|
|
transition: opacity var(--revealTime);
|
|
}
|
|
.sheet-rolltemplate-icon .repcontrol-button ~ .repcontrol, .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-icon .repcontrol-button--add, .ui-dialog .tab-content .charsheet .repcontrol-button--add,
|
|
.sheet-rolltemplate-icon .repcontrol-button__add,
|
|
.ui-dialog .tab-content .charsheet .repcontrol-button__add {
|
|
-ms-grid-column-align: start;
|
|
justify-self: start;
|
|
background-color: var(--invertedBackColor) !important;
|
|
}
|
|
.sheet-rolltemplate-icon .repcontrol-button--add:before, .ui-dialog .tab-content .charsheet .repcontrol-button--add:before,
|
|
.sheet-rolltemplate-icon .repcontrol-button__add:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol-button__add:before {
|
|
font-family: pictos;
|
|
content: "&";
|
|
}
|
|
.sheet-rolltemplate-icon .repcontrol-button--edit, .ui-dialog .tab-content .charsheet .repcontrol-button--edit,
|
|
.sheet-rolltemplate-icon .repcontrol-button__edit,
|
|
.ui-dialog .tab-content .charsheet .repcontrol-button__edit {
|
|
-ms-grid-column-align: end;
|
|
justify-self: end;
|
|
background-color: var(--invertedBackColor) !important;
|
|
}
|
|
.sheet-rolltemplate-icon .repcontrol-button--edit:before, .ui-dialog .tab-content .charsheet .repcontrol-button--edit:before,
|
|
.sheet-rolltemplate-icon .repcontrol-button__edit:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol-button__edit:before {
|
|
font-family: pictos;
|
|
content: "p";
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-box, .ui-dialog .tab-content .charsheet .sheet-box,
|
|
.sheet-rolltemplate-icon .box,
|
|
.ui-dialog .tab-content .charsheet .box {
|
|
border-radius: 0;
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
.sheet-rolltemplate-icon .dot, .ui-dialog .tab-content .charsheet .dot {
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
.sheet-rolltemplate-icon p, .ui-dialog .tab-content .charsheet p {
|
|
font-size: 1rem;
|
|
width: 96%;
|
|
color: var(--invertedBackColor);
|
|
}
|
|
.sheet-rolltemplate-icon p.bullet::before, .ui-dialog .tab-content .charsheet p.bullet::before {
|
|
font-family: pictos;
|
|
content: "]";
|
|
position: relative;
|
|
right: 5px;
|
|
}
|
|
.sheet-rolltemplate-icon p.indent, .ui-dialog .tab-content .charsheet p.indent {
|
|
position: relative;
|
|
left: 20px;
|
|
}
|
|
.sheet-rolltemplate-icon p.colon, .ui-dialog .tab-content .charsheet p.colon {
|
|
font-family: var(--titleFont);
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
position: relative;
|
|
top: 3px;
|
|
/* CSS colon : entity \003A : html : */
|
|
}
|
|
.sheet-rolltemplate-icon p.colon::after, .ui-dialog .tab-content .charsheet p.colon::after {
|
|
content: ":";
|
|
}
|
|
.sheet-rolltemplate-icon p.macro, .ui-dialog .tab-content .charsheet p.macro {
|
|
position: relative;
|
|
bottom: -8px;
|
|
left: 5px;
|
|
}
|
|
.sheet-rolltemplate-icon .auto-expand, .ui-dialog .tab-content .charsheet .auto-expand {
|
|
overflow: hidden; /* hides overflow that is caused by the span */
|
|
position: relative; /* Allows the input's absolute positioning to be relative to this parent div */
|
|
min-width: 100px; /* Whatever feels good to you, prevents a new span from collapsing to 0. */
|
|
max-height: 200px;
|
|
width: -webkit-fit-content;
|
|
width: -moz-fit-content;
|
|
width: fit-content;
|
|
height: 25% !important; /* Prevent the span from defining the height of the input container which can't be multiline */
|
|
}
|
|
.sheet-rolltemplate-icon .auto-expand span, .ui-dialog .tab-content .charsheet .auto-expand span {
|
|
visibility: hidden;
|
|
height: 0px;
|
|
position: relative;
|
|
}
|
|
.sheet-rolltemplate-icon .auto-expand input, .ui-dialog .tab-content .charsheet .auto-expand input {
|
|
position: absolute; /* removes the input from the DOM flow, allowing the span to exist in the same space */
|
|
width: 100%; /* Inputs match the width of the parent element as defined by the spans */
|
|
font-size: 1em;
|
|
}
|
|
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.ui-dialog {
|
|
--paper-background:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/ICON%20RPG%20%5BMassifPress%5D/images/icon.texture.jpg");
|
|
--icon-logo:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/ICON%20RPG%20%5BMassifPress%5D/images/icon.logo.png");
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-darkmode .ui-dialog,
|
|
.sheet-rolltemplate-darkmode {
|
|
--borderColor: var(--grey);
|
|
--fontColor: var(--off-white);
|
|
--invertedFontColor: var(--black);
|
|
--placeholderFontColor: var(--grey-lt);
|
|
--backColor: var(--half-black);
|
|
--invertedBackColor: var(--half-white);
|
|
--subHeadBackColor: var(--grey-lt);
|
|
--unselectedColor: var(--grey-dk);
|
|
--selectedColor: var(--orange);
|
|
--disableBackground: var(--grey-dk);
|
|
--buttonColor: var(--magenta);
|
|
--hoverColor: var(--orange);
|
|
--clickColor: var(--magenta-lt);
|
|
--r20white: rgb(31, 31, 31);
|
|
--r20black: white;
|
|
--disableShadow:0px 0 7px 0px #161616 inset;
|
|
--paper-background:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/ICON%20RPG%20%5BMassifPress%5D/images/texture.dark.jpg");
|
|
--icon-logo:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/ICON%20RPG%20%5BMassifPress%5D/images/icon.logo.white.png");
|
|
--red: var(--red-dk);
|
|
--yellow: var(--yellow-dk);
|
|
--green: var(--green-dk);
|
|
--blue: var(--blue-dk);
|
|
}
|
|
.sheet-darkmode .ui-dialog .sheetform,
|
|
.sheet-rolltemplate-darkmode .sheetform {
|
|
background-color: inherit;
|
|
}
|
|
.sheet-darkmode .ui-dialog img,
|
|
.sheet-rolltemplate-darkmode img {
|
|
-webkit-filter: brightness(0.8) contrast(1.2);
|
|
filter: brightness(0.8) contrast(1.2);
|
|
}
|
|
|
|
#main {
|
|
/*
|
|
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.
|
|
*/
|
|
display: -ms-grid;
|
|
display: grid;
|
|
font-family: var(--basicFont);
|
|
/*nav button styling*/
|
|
}
|
|
#main .paper-background {
|
|
background: var(--paper-background) repeat top left;
|
|
}
|
|
#main .editmode .itemcontrol {
|
|
z-index: 100;
|
|
}
|
|
#main .roller {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
gap: var(--tiny-gap);
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
#main .roller:before {
|
|
text-transform: none;
|
|
content: "T";
|
|
}
|
|
#main .roller--scroll:before {
|
|
content: "w";
|
|
font-family: pictos;
|
|
}
|
|
#main .glyph-only {
|
|
text-transform: none !important;
|
|
}
|
|
#main .hover-container {
|
|
--delayTime:500ms;
|
|
-ms-grid-row-align: start;
|
|
-ms-grid-column-align: start;
|
|
place-self: start;
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: auto;
|
|
grid-template-columns: auto;
|
|
grid-template-areas: "content";
|
|
gap: var(--tiny-gap);
|
|
-webkit-transition-duration: var(--revealTime);
|
|
transition-duration: var(--revealTime);
|
|
-webkit-transition-delay: var(--delayTime);
|
|
transition-delay: var(--delayTime);
|
|
-webkit-transition-property: width, height, border-color, background-color;
|
|
transition-property: width, height, border-color, background-color;
|
|
-webkit-transition-timing-function: ease;
|
|
transition-timing-function: ease;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border-width: 1px 3px;
|
|
border-radius: 5px;
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
}
|
|
#main .hover-container:is(:hover, :focus-within) {
|
|
border-color: var(--borderColor);
|
|
background-color: var(--backColor);
|
|
}
|
|
#main .hover-container:is(:hover, :focus-within) .hover-container__hover-visible {
|
|
opacity: 1;
|
|
z-index: 0;
|
|
}
|
|
#main .hover-container--two-column:is(:hover, :focus-within) {
|
|
width: calc(200% + var(--tiny-gap));
|
|
}
|
|
#main .hover-container--two-row:is(:hover, :focus-within) {
|
|
height: calc(100% + var(--grid-gap));
|
|
}
|
|
#main .hover-container__content {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-align: start;
|
|
justify-self: start;
|
|
grid-area: content;
|
|
}
|
|
#main .hover-container__hover-visible {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: content;
|
|
-webkit-transition-property: opacity, z-index, left, top;
|
|
transition-property: opacity, z-index, left, top;
|
|
-webkit-transition-duration: var(--revealTime);
|
|
transition-duration: var(--revealTime);
|
|
-webkit-transition-timing-function: ease;
|
|
transition-timing-function: ease;
|
|
-webkit-transition-delay: var(--delayTime);
|
|
transition-delay: var(--delayTime);
|
|
opacity: 0;
|
|
z-index: -10;
|
|
}
|
|
#main [readonly] {
|
|
background: transparent;
|
|
border: 0px solid transparent;
|
|
cursor: default;
|
|
}
|
|
#main .sheet-nav__tab {
|
|
color: white;
|
|
font-style: normal;
|
|
border: 1px solid transparent;
|
|
margin: 0 0 -1px;
|
|
background-color: rgb(136, 57, 162);
|
|
border-radius: 4px 4px 0 0;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
font-size: 13px;
|
|
background-image: none;
|
|
padding: 9px 12px;
|
|
height: 16px;
|
|
text-transform: uppercase;
|
|
font-family: var(--serifFont);
|
|
}
|
|
#main .sheet-nav__tab:not(.active):hover {
|
|
background-color: rgb(201, 85, 239);
|
|
}
|
|
#main .sheet-nav__tab:not(.active):active {
|
|
background-color: rgb(242, 130, 255);
|
|
}
|
|
#main .sheet-nav__tab.active, #main .sheet-nav__tab:focus {
|
|
background-color: rgb(156, 70, 255);
|
|
}
|
|
#main .sheet-nav__tab.inactive {
|
|
display: none !important;
|
|
}
|
|
#main input[type=number]:-moz-read-only {
|
|
opacity: 0.8;
|
|
}
|
|
#main input[type=number]:read-only {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
ul.nav-tabs.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: var(--r20white);
|
|
z-index: 9999;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#main-nav {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
gap: var(--tiny-gap);
|
|
position: sticky;
|
|
top: 40px;
|
|
background-color: var(--r20white);
|
|
padding: var(--tiny-gap) 0 0;
|
|
margin-bottom: var(--big-gap);
|
|
border-bottom: 1px solid #dddddd;
|
|
z-index: 999;
|
|
-webkit-box-shadow: 30px 0 var(--backColor), -30px 0 var(--backColor);
|
|
box-shadow: 30px 0 var(--backColor), -30px 0 var(--backColor);
|
|
color: var(--fontColor);
|
|
}
|
|
|
|
.narrative,
|
|
.tactics,
|
|
.journal,
|
|
.roster,
|
|
.settings {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.tabs__toggle[value=narrative] ~ article.narrative,
|
|
.tabs__toggle[value=tactics] ~ article.tactics,
|
|
.tabs__toggle[value=journal] ~ article.journal,
|
|
.tabs__toggle[value=roster] ~ article.roster,
|
|
.tabs__toggle[value=settings] ~ article.settings {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
}
|
|
|
|
.character-header {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas: "deet deet logo" "desc desc desc";
|
|
gap: var(--half-gap);
|
|
}
|
|
.character-header .character-details {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 3;
|
|
display: -ms-inline-grid;
|
|
display: inline-grid;
|
|
grid-template-areas: "info info info numb" "info info info numb";
|
|
gap: var(--half-gap);
|
|
grid-area: deet;
|
|
}
|
|
.character-header .character-details ~ :not(:is(.span-2, .span-all)) {
|
|
-ms-grid-column-align: end;
|
|
justify-self: end;
|
|
}
|
|
.character-header .character-details .input-label .input-label__text {
|
|
font-weight: bold;
|
|
font-variant-caps: small-caps;
|
|
}
|
|
.character-header .character-details .input-label .desc-label {
|
|
width: 100px;
|
|
}
|
|
|
|
.info-label {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-row-span: 3;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 5;
|
|
grid-area: info;
|
|
}
|
|
|
|
.numb-label {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-row-span: 3;
|
|
-ms-grid-column: 7;
|
|
grid-area: numb;
|
|
}
|
|
|
|
.icon-logo {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 5;
|
|
position: relative;
|
|
right: 130%;
|
|
top: 10%;
|
|
grid-area: logo; /* IE 9 */
|
|
-webkit-transform: scale(1.1); /* Chrome, Safari, Opera */
|
|
transform: scale(1.1);
|
|
}
|
|
.icon-logo span.icon-logo {
|
|
content: var(--icon-logo);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.desc-label {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 5;
|
|
grid-area: desc;
|
|
width: 100%;
|
|
}
|
|
|
|
.character-details label.input-label span.input-label__text {
|
|
position: relative;
|
|
top: 24px;
|
|
left: 12px;
|
|
width: 0px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.character-details label.input-label input.input-label__input {
|
|
position: relative;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.character-details div.color-selector {
|
|
position: relative;
|
|
right: -50%;
|
|
top: -15%;
|
|
height: 26px;
|
|
}
|
|
.character-details div.color-selector > select.color-receiver {
|
|
width: 50%;
|
|
height: 26px;
|
|
font-variant-caps: small-caps;
|
|
font-family: var(--serifFont);
|
|
z-index: 0;
|
|
}
|
|
|
|
.input-label.center {
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
input[type=label] .action-label {
|
|
background-color: transparent;
|
|
}
|
|
|
|
label.status {
|
|
position: relative;
|
|
bottom: -4px;
|
|
}
|
|
|
|
.ui-dialog .charsheet button[type=roll]::before {
|
|
content: "";
|
|
font-size: 1rem;
|
|
color: inherit;
|
|
}
|
|
|
|
button[type=roll] {
|
|
border: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
background: none;
|
|
background-color: transparent !important;
|
|
display: inline-block;
|
|
padding: 1px;
|
|
margin: 1px;
|
|
height: 20px;
|
|
width: 20px;
|
|
color: var(--fontColor);
|
|
}
|
|
button[type=roll]:hover {
|
|
color: var(--hoverColor) !important;
|
|
}
|
|
button[type=roll]:active {
|
|
color: var(--clickColor) !important;
|
|
border: none !important;
|
|
-webkit-box-shadow: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
button[type=roll].col {
|
|
color: var(--white);
|
|
position: relative;
|
|
top: 8px;
|
|
left: -15px;
|
|
}
|
|
button[type=roll].col:hover {
|
|
color: var(--white) !important;
|
|
}
|
|
button[type=roll].col:active {
|
|
color: var(--black) !important;
|
|
}
|
|
button[type=roll].roll-quote::before {
|
|
font-family: "Pictos" !important;
|
|
content: "w" !important;
|
|
font-size: 1.5rem !important;
|
|
position: relative;
|
|
left: 0px;
|
|
z-index: 5;
|
|
}
|
|
button[type=roll].roll-quote::after {
|
|
font-family: "Pictos" !important;
|
|
content: "." !important;
|
|
font-size: 0.8rem !important;
|
|
position: relative;
|
|
left: -22px;
|
|
bottom: 5px;
|
|
color: var(--invertedFontColor);
|
|
z-index: 6;
|
|
}
|
|
button[type=roll].roll-d6::before {
|
|
font-family: "dicefontd6" !important;
|
|
content: "l" !important;
|
|
font-size: 1.5rem !important;
|
|
position: relative;
|
|
bottom: -3px;
|
|
}
|
|
button[type=roll].roll-d6:hover::before {
|
|
content: "L" !important;
|
|
}
|
|
button[type=roll].roll-d20::before {
|
|
font-family: "dicefontd20" !important;
|
|
content: "t" !important;
|
|
font-size: 2rem !important;
|
|
position: relative;
|
|
left: -3px;
|
|
bottom: 0px;
|
|
}
|
|
button[type=roll].roll-d20:hover::before {
|
|
content: "T" !important;
|
|
}
|
|
button[type=roll].die::after {
|
|
font-family: "dicefontd20" !important;
|
|
content: "0" !important;
|
|
font-size: 0.8rem;
|
|
position: relative;
|
|
left: -1px;
|
|
top: -9px;
|
|
opacity: 0.5;
|
|
}
|
|
button[type=roll].light::after {
|
|
content: "L" !important;
|
|
font-size: 1.1rem;
|
|
font-weight: bold !important;
|
|
position: relative;
|
|
left: -26px;
|
|
top: -9px;
|
|
color: var(--fontColor);
|
|
}
|
|
button[type=roll].heavy::after {
|
|
content: "H" !important;
|
|
font-size: 1.1rem;
|
|
font-weight: bold !important;
|
|
position: relative;
|
|
left: -28px;
|
|
top: -9px;
|
|
color: var(--fontColor);
|
|
}
|
|
|
|
#auto-fill {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
gap: var(--grid-gap);
|
|
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
|
|
}
|
|
|
|
#auto-fit, div.repcol > div.repcontainer {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
}
|
|
#auto-fit.stats, div.repcol > div.repcontainer.stats {
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
}
|
|
|
|
div.repcol.fit50 > div.repcontainer {
|
|
grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
|
|
}
|
|
|
|
div.repcol.fit30 > div.repcontainer {
|
|
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
|
|
}
|
|
|
|
div.repcol.npc > div.repcontainer {
|
|
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
}
|
|
|
|
section {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.wide-gap {
|
|
-webkit-column-gap: var(--big-gap) !important;
|
|
-moz-column-gap: var(--big-gap) !important;
|
|
column-gap: var(--big-gap) !important;
|
|
}
|
|
|
|
.character-header {
|
|
min-width: 30rem;
|
|
}
|
|
|
|
.long-2 {
|
|
-ms-grid-row-span: 2;
|
|
grid-row: span 2;
|
|
}
|
|
|
|
#resource {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
}
|
|
|
|
#stats {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
|
|
}
|
|
#stats.npc {
|
|
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
|
}
|
|
|
|
div.burdens {
|
|
min-width: 120px;
|
|
-webkit-column-gap: 2px;
|
|
-moz-column-gap: 2px;
|
|
column-gap: 2px;
|
|
}
|
|
|
|
.top-margin {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.clock div.clock_4 {
|
|
display: none;
|
|
}
|
|
|
|
.clock .clock-switch[value="4"] ~ div.clock_4 {
|
|
display: block;
|
|
}
|
|
|
|
.clock div.clock_6 {
|
|
display: none;
|
|
}
|
|
|
|
.clock .clock-switch[value="6"] ~ div.clock_6 {
|
|
display: block;
|
|
}
|
|
|
|
.clock div.clock_8 {
|
|
display: none;
|
|
}
|
|
|
|
.clock .clock-switch[value="8"] ~ div.clock_8 {
|
|
display: block;
|
|
}
|
|
|
|
.clock div.clock_10 {
|
|
display: none;
|
|
}
|
|
|
|
.clock .clock-switch[value="10"] ~ div.clock_10 {
|
|
display: block;
|
|
}
|
|
|
|
.clock div.clock_12 {
|
|
display: none;
|
|
}
|
|
|
|
.clock .clock-switch[value="12"] ~ div.clock_12 {
|
|
display: block;
|
|
}
|
|
|
|
.clock {
|
|
width: 120px;
|
|
text-align: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.clock.small-clock { /* IE 9 */
|
|
-webkit-transform: scale(0.9); /* Chrome, Safari, Opera */
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.clock-section {
|
|
display: -ms-inline-grid;
|
|
display: inline-grid;
|
|
gap: 3px;
|
|
padding: 1px;
|
|
grid-template-areas: "vv ww xx aa bb cc dd" "uu ck ck ck ck ck ee" "tt ck ck ck ck ck ff" "ss ck ck ck ck ck gg" "rr ck ck ck ck ck hh" "qq ck ck ck ck ck ii" "pp oo nn mm ll kk jj";
|
|
}
|
|
|
|
.clock-radio {
|
|
z-index: 10;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
position: relative;
|
|
accent-color: rgb(156, 70, 255); /* IE 9 */
|
|
-webkit-transform: scale(1.2); /* Chrome, Safari, Opera */
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.clock-radio:hover::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* grip offsets so that the radio buttons appear in a circle */
|
|
.clock-0 {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 7;
|
|
grid-area: aa;
|
|
top: 10px;
|
|
}
|
|
|
|
.clock-1 {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 9;
|
|
grid-area: bb;
|
|
top: 15px;
|
|
left: 3px;
|
|
}
|
|
|
|
.clock-2 {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 11;
|
|
grid-area: cc;
|
|
top: 18px;
|
|
right: 10px;
|
|
}
|
|
|
|
.clock-3 {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 13;
|
|
grid-area: dd;
|
|
top: 22px;
|
|
right: 22px;
|
|
}
|
|
|
|
.clock-4 {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 13;
|
|
grid-area: ee;
|
|
top: 13px;
|
|
right: 15px;
|
|
}
|
|
|
|
.clock-5 {
|
|
-ms-grid-row: 5;
|
|
-ms-grid-column: 13;
|
|
grid-area: ff;
|
|
top: 5px;
|
|
right: 11px;
|
|
}
|
|
|
|
.clock-6 {
|
|
-ms-grid-row: 7;
|
|
-ms-grid-column: 13;
|
|
grid-area: gg;
|
|
right: 10px;
|
|
}
|
|
|
|
.clock-7 {
|
|
-ms-grid-row: 9;
|
|
-ms-grid-column: 13;
|
|
grid-area: hh;
|
|
bottom: 5px;
|
|
right: 11px;
|
|
}
|
|
|
|
.clock-8 {
|
|
-ms-grid-row: 11;
|
|
-ms-grid-column: 13;
|
|
grid-area: ii;
|
|
bottom: 13px;
|
|
right: 15px;
|
|
}
|
|
|
|
.clock-9 {
|
|
-ms-grid-row: 13;
|
|
-ms-grid-column: 13;
|
|
grid-area: jj;
|
|
bottom: 22px;
|
|
right: 22px;
|
|
}
|
|
|
|
.clock-10 {
|
|
-ms-grid-row: 13;
|
|
-ms-grid-column: 11;
|
|
grid-area: kk;
|
|
bottom: 18px;
|
|
right: 10px;
|
|
}
|
|
|
|
.clock-11 {
|
|
-ms-grid-row: 13;
|
|
-ms-grid-column: 9;
|
|
grid-area: ll;
|
|
bottom: 15px;
|
|
left: 3px;
|
|
}
|
|
|
|
.clock-12 {
|
|
-ms-grid-row: 13;
|
|
-ms-grid-column: 7;
|
|
grid-area: mm;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.clock-13 {
|
|
-ms-grid-row: 13;
|
|
-ms-grid-column: 5;
|
|
grid-area: nn;
|
|
bottom: 15px;
|
|
right: 3px;
|
|
}
|
|
|
|
.clock-14 {
|
|
-ms-grid-row: 13;
|
|
-ms-grid-column: 3;
|
|
grid-area: oo;
|
|
bottom: 18px;
|
|
left: 10px;
|
|
}
|
|
|
|
.clock-15 {
|
|
-ms-grid-row: 13;
|
|
-ms-grid-column: 1;
|
|
grid-area: pp;
|
|
bottom: 22px;
|
|
left: 22px;
|
|
}
|
|
|
|
.clock-16 {
|
|
-ms-grid-row: 11;
|
|
-ms-grid-column: 1;
|
|
grid-area: qq;
|
|
bottom: 13px;
|
|
left: 15px;
|
|
}
|
|
|
|
.clock-17 {
|
|
-ms-grid-row: 9;
|
|
-ms-grid-column: 1;
|
|
grid-area: rr;
|
|
bottom: 5px;
|
|
left: 11px;
|
|
}
|
|
|
|
.clock-18 {
|
|
-ms-grid-row: 7;
|
|
-ms-grid-column: 1;
|
|
grid-area: ss;
|
|
left: 10px;
|
|
}
|
|
|
|
.clock-19 {
|
|
-ms-grid-row: 5;
|
|
-ms-grid-column: 1;
|
|
grid-area: tt;
|
|
top: 5px;
|
|
left: 11px;
|
|
}
|
|
|
|
.clock-20 {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 1;
|
|
grid-area: uu;
|
|
top: 13px;
|
|
left: 15px;
|
|
}
|
|
|
|
.clock-21 {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
grid-area: vv;
|
|
top: 22px;
|
|
left: 22px;
|
|
}
|
|
|
|
.clock-22 {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 3;
|
|
grid-area: ww;
|
|
top: 18px;
|
|
left: 10px;
|
|
}
|
|
|
|
.clock-23 {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 5;
|
|
grid-area: xx;
|
|
top: 15px;
|
|
right: 3px;
|
|
}
|
|
|
|
/* clock face */
|
|
.clock-face {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-row-span: 9;
|
|
-ms-grid-column: 3;
|
|
-ms-grid-column-span: 9;
|
|
grid-area: ck;
|
|
width: 78px;
|
|
height: 78px;
|
|
display: inline-block;
|
|
border-radius: 50%;
|
|
background: rgb(156, 70, 255);
|
|
border: 3px solid rgb(143, 143, 157);
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.clock-face::after {
|
|
font-family: "Pictos";
|
|
content: "&";
|
|
color: white;
|
|
position: relative;
|
|
font-size: 15px;
|
|
top: 28px;
|
|
}
|
|
|
|
/* all the different combinations of angles for even clock segments */
|
|
.clock-radio.clock-0:checked ~ .clock-face {
|
|
background: black;
|
|
}
|
|
|
|
.clock-radio.clock-1:checked ~ .clock-face {
|
|
background-image: linear-gradient(120deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 120 - 90 = 30*/
|
|
}
|
|
|
|
.clock-radio.clock-2:checked ~ .clock-face {
|
|
background-image: linear-gradient(126deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 126 - 90 = 36*/
|
|
}
|
|
|
|
.clock-radio.clock-3:checked ~ .clock-face {
|
|
background-image: linear-gradient(135deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 135 - 90 = 45*/
|
|
}
|
|
|
|
.clock-radio.clock-4:checked ~ .clock-face {
|
|
background-image: linear-gradient(150deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 150 - 90 = 60*/
|
|
}
|
|
|
|
.clock-radio.clock-5:checked ~ .clock-face {
|
|
background-image: linear-gradient(162deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 162 - 90 = 72*/
|
|
}
|
|
|
|
.clock-radio.clock-6:checked ~ .clock-face {
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, black)), -webkit-gradient(linear, left top, right top, color-stop(50%, black), color-stop(50%, transparent));
|
|
background-image: linear-gradient(180deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 180 - 90 = 90*/
|
|
}
|
|
|
|
.clock-radio.clock-7:checked ~ .clock-face {
|
|
background-image: linear-gradient(198deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 198 - 90 = 108*/
|
|
}
|
|
|
|
.clock-radio.clock-7:checked ~ .clock-face {
|
|
background-image: linear-gradient(198deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 198 - 90 = 108*/
|
|
}
|
|
|
|
.clock-radio.clock-8:checked ~ .clock-face {
|
|
background-image: linear-gradient(210deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 210 - 90 = 120*/
|
|
}
|
|
|
|
.clock-radio.clock-9:checked ~ .clock-face {
|
|
background-image: linear-gradient(225deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 225 - 90 = 135*/
|
|
}
|
|
|
|
.clock-radio.clock-10:checked ~ .clock-face {
|
|
background-image: linear-gradient(234deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 234 - 90 = 144*/
|
|
}
|
|
|
|
.clock-radio.clock-11:checked ~ .clock-face {
|
|
background-image: linear-gradient(240deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 240 - 90 = 150*/
|
|
}
|
|
|
|
.clock-radio.clock-12:checked ~ .clock-face {
|
|
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, transparent), color-stop(50%, black)), -webkit-gradient(linear, left top, right top, color-stop(50%, black), color-stop(50%, transparent));
|
|
background-image: linear-gradient(270deg, transparent 50%, black 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 270 - 90 = 180 */
|
|
}
|
|
|
|
.clock-radio.clock-13:checked ~ .clock-face {
|
|
background-image: linear-gradient(120deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 120 + 90 = 210*/
|
|
}
|
|
|
|
.clock-radio.clock-14:checked ~ .clock-face {
|
|
background-image: linear-gradient(126deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 126 + 90 = 216*/
|
|
}
|
|
|
|
.clock-radio.clock-15:checked ~ .clock-face {
|
|
background-image: linear-gradient(135deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 135 + 90 = 225*/
|
|
}
|
|
|
|
.clock-radio.clock-16:checked ~ .clock-face {
|
|
background-image: linear-gradient(150deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 150 + 90 = 240*/
|
|
}
|
|
|
|
.clock-radio.clock-17:checked ~ .clock-face {
|
|
background-image: linear-gradient(166deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 166 + 90 = 256*/
|
|
}
|
|
|
|
.clock-radio.clock-18:checked ~ .clock-face {
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, rgb(156, 70, 255))), -webkit-gradient(linear, left top, right top, color-stop(50%, black), color-stop(50%, transparent));
|
|
background-image: linear-gradient(180deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 180 + 90 = 270*/
|
|
}
|
|
|
|
.clock-radio.clock-19:checked ~ .clock-face {
|
|
background-image: linear-gradient(198deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 198 + 90 = 288*/
|
|
}
|
|
|
|
.clock-radio.clock-20:checked ~ .clock-face {
|
|
background-image: linear-gradient(210deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 210 + 90 = 300*/
|
|
}
|
|
|
|
.clock-radio.clock-21:checked ~ .clock-face {
|
|
background-image: linear-gradient(225deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 225 + 90 = 315*/
|
|
}
|
|
|
|
.clock-radio.clock-22:checked ~ .clock-face {
|
|
background-image: linear-gradient(234deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 234 + 90 = 324*/
|
|
}
|
|
|
|
.clock-radio.clock-23:checked ~ .clock-face {
|
|
background-image: linear-gradient(240deg, transparent 50%, rgb(156, 70, 255) 50%), linear-gradient(90deg, black 50%, transparent 50%);
|
|
/* 240 + 90 = 330*/
|
|
}
|
|
|
|
.clock-radio.clock-360:checked ~ .clock-face {
|
|
background-color: rgb(156, 70, 255);
|
|
}
|
|
|
|
.action-dots {
|
|
width: 40%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Hide actual radio */
|
|
input[type=radio].fill-left {
|
|
opacity: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
position: relative;
|
|
top: -2px;
|
|
left: 9px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
/* Fake radio */
|
|
/* Remove dot from all radios _after_ selected one */
|
|
}
|
|
input[type=radio].fill-left.dots + span::before {
|
|
margin-right: 4px;
|
|
border: solid 2px var(--borderColor);
|
|
line-height: 18px;
|
|
display: inline-block;
|
|
content: "";
|
|
background-color: var(--purple);
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: 24px;
|
|
-webkit-font-smoothing: antialiased;
|
|
border-radius: 50%;
|
|
}
|
|
input[type=radio].fill-left.dots:checked ~ input[type=radio] + span::before {
|
|
background-color: transparent;
|
|
border-color: var(--invertedBackColor);
|
|
}
|
|
input[type=radio].fill-left.dots:not(:checked):hover ~ input[type=radio] + span::before {
|
|
opacity: 0.25;
|
|
}
|
|
input[type=radio].fill-left.diamonds + span::before {
|
|
margin-right: 6px;
|
|
border: solid 2px var(--borderColor);
|
|
line-height: 16px;
|
|
display: inline-block;
|
|
content: "";
|
|
background-color: var(--orange);
|
|
width: 16px;
|
|
height: 16px;
|
|
font-size: 24px;
|
|
-webkit-font-smoothing: antialiased;
|
|
border-radius: 10%;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
input[type=radio].fill-left.diamonds:checked ~ input[type=radio] + span::before {
|
|
background-color: transparent;
|
|
border-color: var(--invertedBackColor);
|
|
}
|
|
input[type=radio].fill-left.diamonds:not(:checked):hover ~ input[type=radio] + span::before {
|
|
opacity: 0.25;
|
|
}
|
|
input[type=radio].fill-left.radio-zero:hover + span::before {
|
|
background-color: transparent;
|
|
font-family: "Pictos";
|
|
content: "*";
|
|
color: var(--fontColor);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
input[type=radio].fill-left.diamonds.radio-zero:hover + span::before {
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
input[type=radio].fill-left.gore + span::before {
|
|
background-color: var(--red-dk);
|
|
}
|
|
input[type=radio].fill-left.gore:not(.radio-zero):checked + span::after {
|
|
font-family: "Pictos";
|
|
content: "Y";
|
|
width: 0px;
|
|
position: relative;
|
|
color: var(--fontColor);
|
|
top: -7px;
|
|
left: -4px;
|
|
margin: 0px;
|
|
}
|
|
input[type=radio].fill-left.gore:not(:checked):hover ~ input[type=radio] + span::before {
|
|
border-color: var(--red-lt);
|
|
}
|
|
input[type=radio].fill-left.gore:not(:checked):hover ~ input[type=radio] + span::after {
|
|
color: var(--red-lt);
|
|
opacity: 0.4;
|
|
}
|
|
input[type=radio].fill-left.resource-small + span::before {
|
|
width: 13px !important;
|
|
height: 13px !important;
|
|
font-size: 20px;
|
|
}
|
|
input[type=radio].fill-left.resource-smaller + span::before {
|
|
width: 11px !important;
|
|
height: 11px !important;
|
|
font-size: 16px;
|
|
}
|
|
input[type=radio].fill-left.resource-smallerer + span::before {
|
|
width: 9px !important;
|
|
height: 9px !important;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.action-checkboxes {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
input[type=checkbox].checkbox {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
-o-appearance: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
border-radius: 10%;
|
|
margin: 2px;
|
|
width: 20px !important;
|
|
height: 20px !important;
|
|
border: 2px solid var(--invertedBackColor) !important;
|
|
background-color: transparent;
|
|
}
|
|
input[type=checkbox].checkbox:checked {
|
|
border: 2px solid var(--borderColor) !important;
|
|
color: var(--invertedFontColor);
|
|
}
|
|
input[type=checkbox].checkbox.up:checked::after {
|
|
font-family: "Pictos";
|
|
content: "{";
|
|
position: relative;
|
|
left: 2px;
|
|
top: -2px;
|
|
}
|
|
input[type=checkbox].checkbox.down:checked::after {
|
|
font-family: "Pictos";
|
|
content: "}";
|
|
position: relative;
|
|
left: 2px;
|
|
top: -3px;
|
|
}
|
|
input[type=checkbox].checkbox.tick:checked::after {
|
|
font-family: "Pictos";
|
|
content: "3";
|
|
position: relative;
|
|
left: 1px;
|
|
top: -2px;
|
|
}
|
|
input[type=checkbox].checkbox.cross:checked::after {
|
|
font-family: "Pictos";
|
|
content: "*";
|
|
position: relative;
|
|
left: 1.5px;
|
|
top: -2.5px;
|
|
}
|
|
input[type=checkbox].checkbox.star {
|
|
border-radius: 50%;
|
|
}
|
|
input[type=checkbox].checkbox.star:checked::after {
|
|
font-family: "Pictos";
|
|
content: "S";
|
|
font-size: 1.1rem;
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
top: -5px;
|
|
}
|
|
input[type=checkbox].checkbox.talent {
|
|
width: 20px !important;
|
|
margin: 0px !important;
|
|
font-family: var(--serifFont);
|
|
}
|
|
input[type=checkbox].checkbox.I:checked::after {
|
|
content: "I";
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
top: -5px;
|
|
left: 4px;
|
|
}
|
|
input[type=checkbox].checkbox.II:checked::after {
|
|
content: "II";
|
|
position: relative;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
top: -5px;
|
|
left: 1px;
|
|
}
|
|
input[type=checkbox].checkbox.magenta:checked {
|
|
background-color: var(--magenta) !important;
|
|
}
|
|
input[type=checkbox].checkbox.magenta:hover {
|
|
background-color: var(--magenta) !important;
|
|
opacity: 0.5;
|
|
}
|
|
input[type=checkbox].checkbox.orange:checked {
|
|
background-color: var(--orange) !important;
|
|
}
|
|
input[type=checkbox].checkbox.orange:hover {
|
|
background-color: var(--orange) !important;
|
|
opacity: 0.5;
|
|
}
|
|
input[type=checkbox].checkbox.black:checked {
|
|
background-color: var(--r20black) !important;
|
|
}
|
|
input[type=checkbox].checkbox.black:hover {
|
|
background-color: var(--invertedBackColor) !important;
|
|
}
|
|
|
|
input.radio-zero {
|
|
position: relative;
|
|
}
|
|
|
|
input.radio-zero:checked + span::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
input.radio-zero:hover + span::before {
|
|
opacity: 0.25;
|
|
font-size: 25px;
|
|
font-family: "Pictos";
|
|
content: "*";
|
|
background: none;
|
|
background-color: none !important;
|
|
border-color: transparent !important;
|
|
color: var(--black);
|
|
top: 2px;
|
|
left: 2px;
|
|
}
|
|
|
|
input.radio-zero + span::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
.resource div.resource_2 {
|
|
display: none;
|
|
}
|
|
|
|
.resource .resource-switch[value="2"] ~ div.resource_2 {
|
|
display: block;
|
|
}
|
|
|
|
.resource div.resource_3 {
|
|
display: none;
|
|
}
|
|
|
|
.resource .resource-switch[value="3"] ~ div.resource_3 {
|
|
display: block;
|
|
}
|
|
|
|
.resource div.resource_4 {
|
|
display: none;
|
|
}
|
|
|
|
.resource .resource-switch[value="4"] ~ div.resource_4 {
|
|
display: block;
|
|
}
|
|
|
|
.resource div.resource_5 {
|
|
display: none;
|
|
}
|
|
|
|
.resource .resource-switch[value="5"] ~ div.resource_5 {
|
|
display: block;
|
|
}
|
|
|
|
.resource div.resource_6 {
|
|
display: none;
|
|
}
|
|
|
|
.resource .resource-switch[value="6"] ~ div.resource_6 {
|
|
display: block;
|
|
}
|
|
|
|
.resource div.resource_7 {
|
|
display: none;
|
|
}
|
|
|
|
.resource .resource-switch[value="7"] ~ div.resource_7 {
|
|
display: block;
|
|
}
|
|
|
|
.resource div.resource_8 {
|
|
display: none;
|
|
}
|
|
|
|
.resource .resource-switch[value="8"] ~ div.resource_8 {
|
|
display: block;
|
|
}
|
|
|
|
.input-label {
|
|
width: auto;
|
|
}
|
|
|
|
label.input-label .numb-label {
|
|
width: 80px;
|
|
}
|
|
|
|
input.action-label {
|
|
width: 50% !important;
|
|
}
|
|
|
|
input.burden {
|
|
width: 98% !important;
|
|
text-align: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
div.chapter-select {
|
|
width: 90px !important;
|
|
}
|
|
|
|
select.chapter-select {
|
|
background-color: var(--backColor);
|
|
font-family: var(--serifFont);
|
|
position: relative;
|
|
top: 3px;
|
|
height: 26px;
|
|
}
|
|
|
|
input.burden-penalty {
|
|
position: relative;
|
|
left: -22%;
|
|
min-width: 66px !important;
|
|
text-align: left;
|
|
-webkit-box-align: left;
|
|
-ms-flex-align: left;
|
|
align-items: left;
|
|
}
|
|
|
|
p.burden-penalty {
|
|
position: relative;
|
|
left: -5%;
|
|
top: 8px;
|
|
}
|
|
|
|
input[type=text].power {
|
|
width: 120% !important;
|
|
min-width: 120px;
|
|
}
|
|
|
|
span.dust {
|
|
color: var(--orange) !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
input.dust {
|
|
height: 40px !important;
|
|
width: 100% !important;
|
|
font-size: 1.4rem !important;
|
|
color: var(--fontColor) !important;
|
|
text-shadow: 0 0 2px var(--orange);
|
|
}
|
|
input.dust.ability-info {
|
|
height: 26px !important;
|
|
font-size: 1rem !important;
|
|
}
|
|
|
|
span.xp {
|
|
color: var(--purple) !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
input.xp {
|
|
height: 40px !important;
|
|
width: 100% !important;
|
|
font-size: 1.4rem !important;
|
|
color: var(--fontColor) !important;
|
|
text-shadow: 0 0 2px var(--purple);
|
|
}
|
|
|
|
.color-receiver {
|
|
background-color: var(--magenta);
|
|
}
|
|
|
|
select.color-receiver {
|
|
color: var(--white) !important;
|
|
border-radius: 0px !important;
|
|
}
|
|
|
|
.color-control[value=general] ~ .color-receiver, .color-control[value=unique] ~ .color-receiver, .color-control[value=custom] ~ .color-receiver {
|
|
background-color: var(--purple) !important;
|
|
}
|
|
|
|
.color-control[value=stalwart] ~ .color-receiver, .color-control[value=heavy] ~ .color-receiver {
|
|
background-color: var(--red) !important;
|
|
}
|
|
|
|
.color-control[value=vagabond] ~ .color-receiver, .color-control[value=skirmisher] ~ .color-receiver {
|
|
background-color: var(--yellow) !important;
|
|
}
|
|
|
|
.color-control[value=mendicant] ~ .color-receiver, .color-control[value=leader] ~ .color-receiver {
|
|
background-color: var(--green) !important;
|
|
}
|
|
|
|
.color-control[value=wright] ~ .color-receiver, .color-control[value=artillery] ~ .color-receiver {
|
|
background-color: var(--blue) !important;
|
|
}
|
|
|
|
.color-control[value=npc] ~ .color-receiver, .color-control[value=mob] ~ .color-receiver, .color-control[value=inactive] ~ .color-receiver, .color-control[value=unequipped] ~ .color-receiver {
|
|
background-color: var(--grey) !important;
|
|
}
|
|
|
|
input.bloodied-receiver {
|
|
color: var(--green-dk);
|
|
}
|
|
|
|
.bloodied-control[value="1"] ~ input.bloodied-receiver {
|
|
color: var(--red-dk);
|
|
text-shadow: 0 0 1px var(--red), 0 0 1px var(--red);
|
|
}
|
|
.bloodied-control[value="1"] ~ input.bloodied-receiver.bloodied-receiver[value="0"] {
|
|
background-color: var(--grey-dk) !important;
|
|
}
|
|
|
|
select.damage-die, select.type {
|
|
width: 50%;
|
|
}
|
|
|
|
.job-h1-receiver {
|
|
height: 39px !important;
|
|
width: 100% !important;
|
|
border-radius: 0% !important;
|
|
color: white !important;
|
|
}
|
|
.job-h1-receiver::-webkit-input-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.job-h1-receiver::-moz-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.job-h1-receiver:-ms-input-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.job-h1-receiver::-ms-input-placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
.job-h1-receiver::placeholder {
|
|
text-shadow: 0 0 2px white, 0 0 2px white;
|
|
}
|
|
|
|
div.wealth {
|
|
height: auto;
|
|
}
|
|
div.wealth > input.wealth {
|
|
height: 30px;
|
|
width: 100% !important;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
input.ability-info {
|
|
width: 32% !important;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
select.type {
|
|
margin-bottom: 0px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.by, .message,
|
|
.sheet-by, .sheet-message,
|
|
.em, .strong {
|
|
color: var(--fontColor);
|
|
}
|
|
|
|
.sheet-rolltemplate-icon {
|
|
--templateFontSize: 16px;
|
|
--critColor: var(--magenta);
|
|
--fumbleColor: var(--orange);
|
|
--importantColor: var(--purple);
|
|
--headerBackColor: var(--grey-lt);
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode {
|
|
--critColor: var(--green-lt);
|
|
--fumbleColor: var(--red-lt);
|
|
--importantColor: var(--blue-lt);
|
|
--headerBackColor: var(--grey-dk);
|
|
}
|
|
|
|
.sheet-rolltemplate-icon {
|
|
text-justify: inter-word;
|
|
padding-bottom: var(--grid-gap);
|
|
}
|
|
.sheet-rolltemplate-icon:not(:first-child) {
|
|
margin-top: 15px;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-header {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
border: 1px solid var(--borderColor);
|
|
background-color: var(--headerBackColor);
|
|
padding: var(--half-gap);
|
|
margin-inline: calc(var(--half-gap) * -1);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-header h3 {
|
|
-ms-grid-column-align: start;
|
|
justify-self: start;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-header h4 {
|
|
-ms-grid-column-align: end;
|
|
justify-self: end;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-result-controller.sheet-result-true ~ .sheet-result-display-false, .sheet-rolltemplate-icon .sheet-result-controller.sheet-result-false ~ .sheet-result-display-true {
|
|
display: none;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-result-display-false {
|
|
color: var(--fumbleColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-result-display-true {
|
|
color: var(--critColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template {
|
|
font-size: var(--templateFontSize);
|
|
display: -ms-grid;
|
|
display: grid;
|
|
gap: var(--half-gap);
|
|
border: var(--half-gap) solid transparent;
|
|
background-color: var(--backColor);
|
|
-webkit-filter: drop-shadow(var(--shadowColor1) 0px 3px 6px) drop-shadow(var(--shadowColor2) 0px 3px 6px);
|
|
filter: drop-shadow(var(--shadowColor1) 0px 3px 6px) drop-shadow(var(--shadowColor2) 0px 3px 6px);
|
|
padding: var(--half-gap);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template span,
|
|
.sheet-rolltemplate-icon .sheet-template span *,
|
|
.sheet-rolltemplate-icon .sheet-template h5,
|
|
.sheet-rolltemplate-icon .sheet-template h5 * {
|
|
font-size: 1em;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template h5 {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template h3,
|
|
.sheet-rolltemplate-icon .sheet-template h3 * {
|
|
font-size: 1.25em;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template h4,
|
|
.sheet-rolltemplate-icon .sheet-template h4 * {
|
|
font-size: 1em;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .sheet-template-row {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
gap: var(--half-gap);
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
line-height: 27px;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .sheet-template-row--text {
|
|
border-top: 2px solid var(--fontColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .sheet-template-row--summary {
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .sheet-description {
|
|
max-height: 20rem;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
color: var(--fontColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template a {
|
|
position: relative;
|
|
left: -10px;
|
|
padding: 2px;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template a:not([href^="!"]), .sheet-rolltemplate-icon .sheet-template a:not([href^="~"]) {
|
|
color: var(--fontColor);
|
|
border: none;
|
|
text-decoration: underline;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template a[href^="!"], .sheet-rolltemplate-icon .sheet-template a[href^="~"] {
|
|
border-radius: 5px;
|
|
color: var(--backColor);
|
|
background-color: var(--fontColor);
|
|
text-decoration: none;
|
|
padding-inline: var(--tiny-gap);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .inlinerollresult {
|
|
font-size: 1.25em;
|
|
position: relative;
|
|
color: var(--fontColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .inlinerollresult[title*="[computed value]"], .sheet-rolltemplate-icon .sheet-template .inlinerollresult[original-title*="[computed value]"] {
|
|
pointer-events: none;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .inlinerollresult, .sheet-rolltemplate-icon .sheet-template .inlinerollresult.fullcrit, .sheet-rolltemplate-icon .sheet-template .inlinerollresult.fullfail, .sheet-rolltemplate-icon .sheet-template .inlinerollresult.importantroll {
|
|
border: none;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .inlinerollresult.fullcrit {
|
|
color: var(--critColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .inlinerollresult.fullfail {
|
|
color: var(--fumbleColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .inlinerollresult.importantroll {
|
|
color: var(--importantColor);
|
|
}
|
|
.sheet-rolltemplate-icon .sheet-template .sheet-result > .inlinerollresult {
|
|
left: -8px;
|
|
} |