diff --git a/Blades in the Dark/Assets/darkmode/logo.png b/Blades in the Dark/Assets/darkmode/logo.png new file mode 100644 index 0000000000..3dbcf3bbab Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/logo.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/shorttooth-grey.png b/Blades in the Dark/Assets/darkmode/teeth/shorttooth-grey.png new file mode 100644 index 0000000000..243a254af1 Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/shorttooth-grey.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/shorttooth-red.png b/Blades in the Dark/Assets/darkmode/teeth/shorttooth-red.png new file mode 100644 index 0000000000..6c16125baf Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/shorttooth-red.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/stresstooth-black.png b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-black.png new file mode 100644 index 0000000000..e83f6cf8b1 Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-black.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/stresstooth-halfgrey.png b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-halfgrey.png new file mode 100644 index 0000000000..3d3bee3016 Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-halfgrey.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/stresstooth-red.png b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-red.png new file mode 100644 index 0000000000..54ab2f1bc4 Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-red.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/stresstooth-white.png b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-white.png new file mode 100644 index 0000000000..12db678b03 Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/stresstooth-white.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/xptooth-red.png b/Blades in the Dark/Assets/darkmode/teeth/xptooth-red.png new file mode 100644 index 0000000000..a413d4f35f Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/xptooth-red.png differ diff --git a/Blades in the Dark/Assets/darkmode/teeth/xptooth-white.png b/Blades in the Dark/Assets/darkmode/teeth/xptooth-white.png new file mode 100644 index 0000000000..bfcdf1381f Binary files /dev/null and b/Blades in the Dark/Assets/darkmode/teeth/xptooth-white.png differ diff --git a/Blades in the Dark/README.md b/Blades in the Dark/README.md index ba56fed01c..45c7d908b1 100644 --- a/Blades in the Dark/README.md +++ b/Blades in the Dark/README.md @@ -1,9 +1,21 @@ # Blades in the Dark Character Sheet -This is the (compressed) source code for the Blades in the Dark character sheet on Roll20. The pug/sass code used to generate it can be found [here](https://github.com/joesinghaus/Blades-in-the-Dark). If you want to hack the sheet for your own Blades hack, a more hackable version and instructions for hacking can be found [here](https://github.com/joesinghaus/Blades-template). +This is the source code for the Blades in the Dark character sheet on Roll20. + +Blades in the Dark source code is currently maintained by Evil Hat. Please contact Evil Hat at [feedback@evilhat.com](mailto:feedback@evilhat.com) if you have changes you want to see made and we'll consider working that into our official support! + +If you want to hack the sheet for your own Blades hack, a more hackable (earlier) version and instructions for hacking can be found [here](https://github.com/joesinghaus/Blades-template). Build command: `./build.js` (requires node, with pug and sass installed via npm). ## Changelog +### 3.10 + +* Added Dark Mode support +* Added Crew playbooks for City of Red Waters: + * Emcees + * River + * Roots + ### 3.9 * Option to rename attributes and actions diff --git a/Blades in the Dark/blades.css b/Blades in the Dark/blades.css index 7eb0cbde11..d1876fd958 100644 --- a/Blades in the Dark/blades.css +++ b/Blades in the Dark/blades.css @@ -1,3892 +1,4315 @@ + /* Variants of grey */ -/* red */ +/* Attempt to support dark mode */ +:root { + --blades-lightest: #d8d8d8; + --blades-lighter: #c7c7c7; + --blades-darkgrey: #b4b4b4; + --blades-versiongrey: #aaa; + --blades-greyborder: #8c8c8c; + --blades-headergrey: #808080; + --blades-lightblack: #777; + --blades-lighterblack: #555; + --blades-fontblack: #333; + --blades-redtext: #c43c35; + --blades-blacktext: #000; + --blades-whitetext: #fff; + --blades-bg: #fff; + --blades-riverblood: #500; +} + +/* DARK MODE colors */ +/* Remember tho, the background in dark mode is not black, it's #1f1f1f */ +.sheet-darkmode { + --blades-lightest: #474747; + --blades-lighter: #585858; + --blades-darkgrey: #6b6b6b; + --blades-versiongrey: #555; + --blades-greyborder: #737373; + --blades-headergrey: #7f7f7f; + --blades-lightblack: #777; + --blades-lighterblack: #999; + --blades-fontblack: #ccc; + --blades-redtext: #d43c35; + --blades-blacktext: #fff; + --blades-whitetext: #000; + --blades-bg: #1f1f1f; + --blades-riverblood: #600; +} +.sheet-darkmode .sheetform { + background-color: #1f1f1f; +} + /* GENERALITIES */ .charsheet { - padding: 0 !important; - position: relative; - top: -11px; - line-height: 18px; - cursor: default; - color: #333; - font-size: 0; - font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; + padding: 0 !important; + position: relative; + top: -11px; + line-height: 18px; + cursor: default; + color: var(--blades-fontblack); + font-size: 0; + font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; } - .charsheet div, .charsheet span, .charsheet textarea, .charsheet ul, .charsheet li, .charsheet span, .charsheet label { - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } - .charsheet button[type=roll] { - text-shadow: none; - background: transparent; - box-shadow: none; - box-sizing: border-box; - font-weight: bold; - font-family: inherit; - outline: none; - border-radius: 0; - transition: all 0.2s; + text-shadow: none; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-weight: bold; + font-family: inherit; + outline: none; + border-radius: 0; + -webkit-transition: all 0.2s; + transition: all 0.2s; } - .charsheet button[type=roll].btn::before { - content: ""; + content: ""; } - .charsheet label { - margin: 0; - padding: 0; - display: flex; - width: auto; - --dark-secondarytext: #333; /* setting this variable here takes care of the text color getting overridden in dark mode, which causes some of the label text (that's also on a background the same color as the initial dark-secondarytext value) to go invisible! */ - color: #333; - font: inherit; + color: var(--blades-fontblack); +} +.charsheet label { + margin: 0; + padding: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: auto; + font: inherit; } - .charsheet label input[type=checkbox], .charsheet label input[type=radio] { - position: absolute; + position: absolute; } - .charsheet label:hover input[type=checkbox] + span, .charsheet label:hover input[type=radio] + span { - opacity: 0.7; + opacity: 0.7; } - .charsheet input[type=text], .charsheet textarea { - border: none; - font-family: inherit; - background: transparent; - box-shadow: none; - width: 100%; - padding: 0; - margin: 0; - color: #333; - border-radius: 0; - transition: all 0.2s, height 0.4s; + border: none; + font-family: inherit; + background: transparent; + -webkit-box-shadow: none; + box-shadow: none; + width: 100%; + padding: 0; + margin: 0; + color: var(--blades-fontblack); + border-radius: 0; + -webkit-transition: all 0.2s, height 0.4s; + transition: all 0.2s, height 0.4s; } - .charsheet textarea { - resize: vertical; - display: block; + resize: vertical; + display: block; } - .charsheet textarea:active, .charsheet textarea:focus { - transition: height 0s; + -webkit-transition: height 0s; + transition: height 0s; } - .charsheet input[type=number] { - border-color: #c7c7c7; - color: #333; - box-shadow: none; + border-color: var(--blades-lighter); + color: var(--blades-fontblack); + -webkit-box-shadow: none; + box-shadow: none; } - .charsheet input[type=checkbox], .charsheet input[type=radio] { - opacity: 0; - z-index: 1; - -moz-appearance: none; - position: relative; + opacity: 0; + z-index: 1; + -moz-appearance: none; + position: relative; } - .charsheet input[type=checkbox] + span, .charsheet input[type=radio] + span { - cursor: pointer; - display: inline-block; - transition: all 0.2s, opacity 0s; + cursor: pointer; + display: inline-block; + -webkit-transition: all 0.2s, opacity 0s; + transition: all 0.2s, opacity 0s; } - .charsheet ul { - list-style: none; - margin: 0; + list-style: none; + margin: 0; } - .charsheet li { - position: relative; + position: relative; } - .charsheet li::before { - transform: rotate(45deg) scale(0.9); - font-family: Georgia, serif; - content: '■'; - left: 0; - top: -.1em; - position: absolute; + -webkit-transform: rotate(45deg) scale(0.9); + transform: rotate(45deg) scale(0.9); + font-family: Georgia, serif; + content: "■"; + left: 0; + top: -0.1em; + position: absolute; +} +.charsheet button[type=roll].inherit, .charsheet input[type=text].inherit { + font: inherit; + color: inherit; + text-transform: inherit; + letter-spacing: inherit; +} +.charsheet .space-after::after { + content: " "; } -.charsheet button[type=roll].sheet-inherit, .charsheet input[type=text].sheet-inherit { - font: inherit; - color: inherit; - text-transform: inherit; - letter-spacing: inherit; +.charsheet .focus-shadow[value="1"] ~ .container textarea:focus, .charsheet .focus-shadow[value="1"] ~ .container input[type=text]:focus, .charsheet .focus-shadow[value="1"] ~ .container input[type=number]:focus { + -webkit-box-shadow: inset 0 0 1px 1px rgba(66, 66, 66, 0.3), 0 0 2px 1px rgba(66, 66, 66, 0.3); + box-shadow: inset 0 0 1px 1px rgba(66, 66, 66, 0.3), 0 0 2px 1px rgba(66, 66, 66, 0.3); } -.charsheet .sheet-space-after::after { - content: ' '; -} - -.sheet-focus-shadow[value="1"] ~ .sheet-container textarea:focus, .sheet-focus-shadow[value="1"] ~ .sheet-container input[type=text]:focus, .sheet-focus-shadow[value="1"] ~ .sheet-container input[type=number]:focus { - box-shadow: inset 0 0 1px 1px rgba(66, 66, 66, 0.3), 0 0 2px 1px rgba(66, 66, 66, 0.3); -} - -.sheet-hidden { - display: none !important; +.charsheet .hidden { + display: none !important; } /* Preloading graphics*/ -.sheet-preload { - opacity: 0; - position: absolute; +.charsheet .preload { + opacity: 0; + position: absolute; } - -.sheet-preload img { - width: 1px; - height: 1px; +.charsheet .preload img { + width: 1px; + height: 1px; } /* Version text */ -.sheet-topholder { - line-height: 22px; - margin: 0 0 7px calc(55% + 5px); +.charsheet .topholder { + line-height: 22px; + margin: 0 0 7px calc(55% + 5px); } - -.sheet-topholder .sheet-version { - color: #aaa; - font-size: 13px; - font-family: "Times New Roman", Times, serif; +.charsheet .topholder .version { + color: var(--blades-versiongrey); + font-size: 13px; + font-family: "Times New Roman", Times, serif; } - -.sheet-topholder .sheet-version-text::after { - content: " "; +.charsheet .topholder .version-text::after { + content: " "; } - -.sheet-topholder .sheet-settings-checkbox { - margin-right: 10px; - width: 20px; - height: 20px; - font-size: 16px; - font-family: pictos; +.charsheet .topholder .settings-checkbox { + margin-right: 10px; + width: 20px; + height: 20px; + font-size: 16px; + font-family: pictos; } - -.sheet-topholder .sheet-settings-checkbox input + span { - opacity: 0.3; +.charsheet .topholder .settings-checkbox input + span { + opacity: 0.3; } - -.sheet-topholder .sheet-settings-checkbox input:checked + span { - opacity: 1; +.charsheet .topholder .settings-checkbox input:checked + span { + opacity: 1; } /* Type Selector */ -.sheet-type-selector { - display: flex; - margin-right: auto; - background: #c7c7c7; - border: 1px solid #aaa; - letter-spacing: 1px; - line-height: 20px; - justify-content: center; - width: 170px; - font-size: 11px; - color: #555; +.charsheet .type-selector { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-right: auto; + background: var(--blades-lighter); + border: 1px solid var(--blades-versiongrey); + letter-spacing: 1px; + line-height: 20px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 170px; + font-size: 11px; + color: var(--blades-lighterblack); } - -.sheet-type-selector input { - position: absolute; - width: 170px; - height: 20px; +.charsheet .type-selector input { + position: absolute; + width: 170px; + height: 20px; } - -.sheet-type-selector:hover { - color: red; +.charsheet .type-selector:hover { + color: red; } - -.sheet-type-selector .sheet-3waybox:not(:checked) + .sheet-3waybox, -.sheet-type-selector input[value="character"]:not(:checked) ~ span[data-i18n="character_mode"], -.sheet-type-selector input[value="crew"]:not(:checked) ~ span[data-i18n="crew_mode"], -.sheet-type-selector input[value="faction"][type=radio]:not(:checked) ~ span[data-i18n="faction_mode"] { - display: none; +.charsheet .type-selector .threewaybox:not(:checked) + .threewaybox, +.charsheet .type-selector input[value=character]:not(:checked) ~ span[data-i18n=character_mode], +.charsheet .type-selector input[value=crew]:not(:checked) ~ span[data-i18n=crew_mode], +.charsheet .type-selector input[value=faction][type=radio]:not(:checked) ~ span[data-i18n=faction_mode] { + display: none; } /* SETTINGS */ -.sheet-type[value="character"] ~ .sheet-settings > :not(.sheet-setting-char), -.sheet-type[value="crew"] ~ .sheet-settings > :not(.sheet-setting-crew), -.sheet-type[value="faction"] ~ .sheet-settings > :not(.sheet-setting-faction) { - display: none; +.charsheet .type[value=character] ~ .settings > :not(.setting-char), .charsheet .type[value=crew] ~ .settings > :not(.setting-crew), .charsheet .type[value=faction] ~ .settings > :not(.setting-faction) { + display: none; } -.sheet-settings { - position: absolute; - right: 0; - width: 415px; - border: 1px solid black; - background: white; - z-index: 100; - padding: 5px; - border-radius: 5px; - display: flex; - flex-wrap: wrap; +.charsheet .settings { + position: absolute; + right: 0; + width: 415px; + border: 1px solid var(--blades-blacktext); + background: var(--blades-whitetext); + z-index: 100; + padding: 5px; + border-radius: 5px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } - -.sheet-settings > div { - min-width: 50%; - display: flex; - flex-grow: 1; - align-items: center; - padding: 2px; - font-size: 10px; - min-height: 24px; - line-height: 17px; - border-bottom: 1px solid #d8d8d8; +.charsheet .settings > div { + min-width: 50%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 2px; + font-size: 10px; + min-height: 24px; + line-height: 17px; + border-bottom: 1px solid var(--blades-lightest); } - -.sheet-settings > div.sheet-generaterow { - line-height: 0; +.charsheet .settings > div.generaterow { + line-height: 0; } - -.sheet-settings label { - align-items: center; +.charsheet .settings label { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } - -.sheet-settings .sheet-checkbox + span { - margin-right: 6px; +.charsheet .settings .checkbox + span { + margin-right: 6px; } - -.sheet-settings .sheet-checkbox:checked + span { - background: black; +.charsheet .settings .checkbox:checked + span { + background: var(--blades-blacktext); } - -.sheet-settings :not(input) + span { - padding-right: 4px; +.charsheet .settings :not(input) + span { + padding-right: 4px; } - -.sheet-settings input[type=number] { - padding: 0 2px; - margin: 0 3px 0 8px; - width: 30px; - font-size: 12px; +.charsheet .settings input[type=number] { + padding: 0 2px; + margin: 0 3px 0 8px; + width: 30px; + font-size: 12px; } - -.sheet-settings input[type=text] { - width: 60px; - font-size: 10px; - margin-right: 3px; - padding-left: 1px; - line-height: 16px; - border-radius: 3px; - border: 1px solid #d8d8d8; +.charsheet .settings input[type=text] { + width: 60px; + font-size: 10px; + margin-right: 3px; + padding-left: 1px; + line-height: 16px; + border-radius: 3px; + border: 1px solid var(--blades-lightest); } - -.sheet-settings input[type=text].sheet-wide { - width: 200px; - margin-right: 8px; +.charsheet .settings input[type=text].wide { + width: 200px; + margin-right: 8px; } - -.sheet-settings select { - width: 80px; - margin: 0 7px 0 0; - padding: 0; - height: 18px; +.charsheet .settings select { + width: 80px; + margin: 0 7px 0 0; + padding: 0; + height: 18px; } /* SETTINGS FOR HIDING STUFF ON THE SHEET */ -.sheet-toothhider[value="0"] ~ .sheet-tooth, .sheet-toothhider[value="0"] ~ .sheet-tooth + span { - display: none; +.charsheet .toothhider[value="0"] ~ .tooth, .charsheet .toothhider[value="0"] ~ .tooth + span { + display: none; } -.sheet-hider[value="0"] + li, .sheet-hider[value="0"] + div, .sheet-hider[value="0"] + label { - display: none; +.charsheet .hider[value="0"] + li, .charsheet .hider[value="0"] + div, .charsheet .hider[value="0"] + label { + display: none; } /* Sheet container */ -.sheet-container { - position: relative; - min-width: 860px; - max-width: 1190px; +.charsheet .container { + position: relative; + min-width: 860px; + max-width: 1190px; + padding-left: 0px; + padding-right: 0px; } -.sheet-flexwidth[value="0"] ~ .sheet-container { - width: 860px; +.charsheet .flexwidth[value="0"] ~ .container { + width: 860px; } -.sheet-type:not([value="character"]) ~ .sheet-type-character, -.sheet-type:not([value="crew"]) ~ .sheet-type-crew, -.sheet-type:not([value="faction"]) ~ .sheet-type-faction { - display: none; +.charsheet .type:not([value=character]) ~ .type-character, .charsheet .type:not([value=crew]) ~ .type-crew, .charsheet .type:not([value=faction]) ~ .type-faction { + display: none; } -.sheet-type-character, .sheet-type-crew, .sheet-type-faction { - grid: auto/55% calc(45% - 5px); - grid-gap: 10px 5px; +.charsheet .type-character, .charsheet .type-crew, .charsheet .type-faction { + grid: auto/55% calc(45% - 5px); + grid-gap: 10px 5px; } /* USEFUL GENERAL LAYOUT*/ -.sheet-grid { - display: grid; +.charsheet .grid { + display: -ms-grid; + display: grid; +} +.charsheet .grid .sheet-2col { + -ms-grid-column-span: 2; + grid-column: span 2; } -.sheet-grid .sheet-2col { - grid-column: span 2; +.charsheet .type-character .left-column { + grid: auto/1.1fr 0.9fr; + -ms-flex-line-pack: start; + align-content: start; + grid-gap: 10px 5px; } -.sheet-type-character .sheet-left-column { - grid: auto / 1.1fr .9fr; - align-content: start; - grid-gap: 10px 5px; +.charsheet .right-column { + grid: none/minmax(202.5px, 248.5px) minmax(calc(47% - 5px), 277px); + grid-gap: 5px; + grid-auto-rows: -webkit-min-content; + grid-auto-rows: min-content; } -.sheet-right-column { - grid: none/minmax(202.5px, 248.5px) minmax(calc(47% - 5px), 277px); - grid-gap: 5px; - grid-auto-rows: min-content; +.charsheet .blackheader { + background: var(--blades-blacktext); + color: var(--blades-whitetext); } - -.sheet-blackheader { - background: black; - color: white; +.charsheet .blackheader.rep1, .charsheet .blackheader.hold1 { + padding-top: 3px; + line-height: 13px; } - -.sheet-blackheader.sheet-rep1, .sheet-blackheader.sheet-hold1 { - padding-top: 3px; - line-height: 13px; +.charsheet .blackheader.hold1 { + padding-left: 2px; } - -.sheet-blackheader.sheet-hold1 { - padding-left: 2px; +.charsheet .blackheader .sheet-label, .charsheet .blackheader button[type=roll].sheet-label, .charsheet .black-on-grey .sheet-label, .charsheet .black-on-grey button[type=roll].sheet-label, .charsheet .greyheader .sheet-label, .charsheet .greyheader button[type=roll].sheet-label { + font-size: 11px; + line-height: 15px; } - -.sheet-blackheader, .sheet-black-on-grey, .sheet-greyheader { - font-size: 11px; - letter-spacing: 1px; +.charsheet .black-on-grey, .charsheet .greyheader { + letter-spacing: 1px; } - -.sheet-blackheader, .sheet-greyheader { - height: 16px; - line-height: 15px; - padding: 1px 2px 0 4px; +.charsheet .black-on-grey .sheet-label, .charsheet .black-on-grey button[type=roll].sheet-label, .charsheet .greyheader .sheet-label, .charsheet .greyheader button[type=roll].sheet-label { + color: inherit; } - -.sheet-black-on-grey, .sheet-greyheader { - background: #b4b4b4; +.charsheet .blackheader { + letter-spacing: 1px; } - -.sheet-black-on-grey { - text-align: center; - position: relative; - flex-grow: 1; - padding-left: 1px; - height: 13px; - line-height: 13px; - --z-index: -1; /* Disabled for dark mode compatibility (text disappears in dark mode if enabled) */ +.charsheet .blackheader .sheet-label, .charsheet .blackheader button[type=roll].sheet-label { + color: var(--blades-whitetext); } - -.sheet-plainheader { - width: 100%; - border-top: 2px solid black; - font-size: 12px; - line-height: 22px; +.charsheet .blackheader, .charsheet .greyheader { + height: 16px; + line-height: 15px; + padding: 1px 2px 0 4px; } - -.sheet-specialheader { - background: #b4b4b4; - height: 20px; - font-size: 11px; - line-height: 20px; - letter-spacing: 1px; - padding: 0 5px; +.charsheet .blackheader .sheet-label, .charsheet .greyheader .sheet-label { + padding-left: 1px; + padding-right: 1px; + line-height: inherit; } - -.sheet-specialheader input[type=text] { - margin: 0 -5px; - padding: 0 5px; - width: calc(100% + 10px); +.charsheet .black-on-grey, .charsheet .greyheader { + background: var(--blades-darkgrey); } - -.sheet-italic { - font-style: italic; +.charsheet .black-on-grey, .charsheet .black-on-grey .sheet-label { + text-align: center; + position: relative; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + padding-left: 1px; + padding-right: 1px; + height: 13px; + line-height: 13px; + z-index: 0; /* Was -1 but that made it invisible in non-legacy mode */ } - -.sheet-bold { - font-weight: bold; +.charsheet .plainheader { + width: 100%; + border-top: 2px solid black; + font-size: 12px; + line-height: 22px; } - -.sheet-greyholder { - background: #d8d8d8; +.charsheet .specialheader { + background: var(--blades-darkgrey); + height: 20px; + font-size: 11px; + line-height: 20px; + letter-spacing: 1px; + padding: 0 5px; } - -.sheet-def-margin { - margin-top: 10px; +.charsheet .specialheader input[type=text] { + margin: 0 -5px; + padding: 0 5px; + width: calc(100% + 10px); } - -.sheet-small-margin { - margin-top: 5px; +.charsheet .italic { + font-style: italic; } - -.sheet-blackborder { - border-top: 3px solid black; +.charsheet .bold { + font-weight: bold; } - -.sheet-tier { - background: #d8d8d8; - height: 16px; - width: 56px; - align-items: center; +.charsheet .greyholder { + background: var(--blades-lightest); } - -.sheet-tier input[value="1"] { - margin-left: auto; +.charsheet .def-margin { + margin-top: 10px; } - -.sheet-tier .sheet-checkbox + span { - margin-right: auto; +.charsheet .small-margin { + margin-top: 5px; +} +.charsheet .blackborder { + border-top: 3px solid var(--blades-blacktext); +} +.charsheet .tier { + background: var(--blades-lightest); + height: 16px; + width: 56px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.charsheet .tier input[value="1"] { + margin-left: auto; +} +.charsheet .tier .checkbox + span { + margin-right: auto; } /* COLUMN LAYOUT */ -.sheet-flex { - display: flex; +.charsheet .flex { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } - -.sheet-flex-center { - text-align: center; - display: flex; - justify-content: center; - align-items: center; +.charsheet .flex-center { + text-align: center; + 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; } - -.sheet-col50 { - width: 50%; +.charsheet .col50 { + width: 50%; } - -.sheet-col52b { - width: 52%; +.charsheet .col52b { + width: 52%; } - -.sheet-col45 { - width: 45%; +.charsheet .col45 { + width: 45%; } - -.sheet-col100 { - width: 100%; +.charsheet .col100 { + width: 100%; } /* FONT STYLES */ -.sheet-label, -input[type=text].sheet-label, -textarea.sheet-label, -button[type=roll].sheet-label { - text-transform: uppercase; - font-weight: bold; +.charsheet .sheet-label, +.charsheet input[type=text].sheet-label, +.charsheet textarea.sheet-label, +.charsheet button[type=roll].sheet-label { + text-transform: uppercase; + font-weight: bold; + color: inherit; } - -.sheet-uppercase { - text-transform: uppercase; +.charsheet .uppercase { + text-transform: uppercase; } - -.sheet-smallcaps, -input[type=text].sheet-smallcaps, -textarea.sheet-smallcaps { - font-variant: small-caps; - font-weight: bold; +.charsheet .smallcaps, +.charsheet input[type=text].smallcaps, +.charsheet textarea.smallcaps { + font-variant: small-caps; + font-weight: bold; } /* INFO BOXES */ -.sheet-gatherinfo ul { - padding: 0; +.charsheet .gatherinfo ul { + padding: 0; } - -.sheet-gatherinfo li { - margin-bottom: 1px; - font-style: italic; - padding-left: 11px; - font-size: 11px; - height: 17px; +.charsheet .gatherinfo li { + margin-bottom: 1px; + font-style: italic; + padding-left: 11px; + font-size: 11px; + height: 17px; } - -.sheet-teamworkbox { - width: 95%; - padding: 5px; - margin-bottom: 5px; - background: #d8d8d8; - font-size: 12px; - line-height: 15px; +.charsheet .teamworkbox { + width: 95%; + padding: 5px; + margin-bottom: 5px; + background: var(--blades-lightest); + font-size: 12px; + line-height: 15px; } - -.sheet-planning .sheet-teamworkbox .sheet-bold::after { - content: ": "; +.charsheet .planning .teamworkbox .bold::after { + content: ": "; } - -.sheet-planningdesc { - font-size: 12px; - line-height: 15px; - text-align: justify; - margin: 0 5% 5px 0; +.charsheet .planningdesc { + font-size: 12px; + line-height: 15px; + text-align: justify; + margin: 0 5% 5px 0; } /* ITEMS/UPGRADES */ -.sheet-itemholder > div { - padding: 5px; +.charsheet .itemholder > div { + padding: 5px; } - -.sheet-item-container { - flex-grow: 1; +.charsheet .item-container { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } - -.sheet-playbookitems { - background: #d8d8d8; +.charsheet .playbookitems { + background: var(--blades-lightest); } - -.sheet-regularitems { - grid-template-columns: 50% 50%; +.charsheet .regularitems { + -ms-grid-columns: 50% 50%; + grid-template-columns: 50% 50%; } - -.sheet-regularitems .repcontainer { - display: flex; - flex-wrap: wrap; - align-content: flex-start; +.charsheet .regularitems .repcontainer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; } - -.sheet-regularitems .repitem { - display: flex; - flex-grow: 1; +.charsheet .regularitems .repitem { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; } - -.sheet-regularitems .sheet-input-short[value="1"] + .sheet-input-expand[value="0"] ~ .sheet-item-container { - width: 96px; +.charsheet .regularitems .input-short[value="1"] + .input-expand[value="0"] ~ .item-container { + width: 96px; } - -.sheet-upgrades > div { - position: relative; +.charsheet .upgrades > div { + position: relative; } - -.sheet-item { - display: flex; - align-items: start; +.charsheet .item { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } - -.sheet-item .sheet-itemname { - height: 18px; - font-size: 11px; - margin: 0 1px 0 2px; - padding-left: 2px; - flex: auto; - min-width: 0; +.charsheet .item .itemname { + height: 18px; + font-size: 11px; + margin: 0 1px 0 2px; + padding-left: 2px; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + min-width: 0; } - -.sheet-item .sheet-itemname.sheet-auto-expand { - min-height: 16px; - height: auto; - line-height: 16px; - margin: 1px 0; - padding: 0 7px 0 2px; +.charsheet .item .itemname.auto-expand { + min-height: 16px; + height: auto; + line-height: 16px; + margin: 1px 0; + padding: 0 7px 0 2px; } - -.sheet-item .sheet-checkbox, .sheet-item .sheet-checkbox + span { - margin-top: 3px; +.charsheet .item .checkbox, .charsheet .item .checkbox + span { + margin-top: 3px; } - -.sheet-item .sheet-input-bold[value="1"] ~ .sheet-itemname { - font-weight: bold; +.charsheet .item .input-bold[value="1"] ~ .itemname { + font-weight: bold; } - -.sheet-item .sheet-numboxes[value="0"] ~ .sheet-itemname { - font-style: italic; +.charsheet .item .numboxes[value="0"] ~ .itemname { + font-style: italic; } - -.sheet-upgradecaption { - font-size: 11px; - letter-spacing: 1px; +.charsheet .upgradecaption { + font-size: 11px; + letter-spacing: 1px; } - -.sheet-upgradecosts { - font-size: 11px; - padding-left: 3px; +.charsheet .upgradecosts { + font-size: 11px; + padding-left: 3px; } - -.sheet-upgradecosts.sheet-label { - font-size: 8px; - letter-spacing: 1px; +.charsheet .upgradecosts.sheet-label { + font-size: 8px; + letter-spacing: 1px; } - -.sheet-floatingbar { - width: 3px; - height: 2px; - margin: 8px 0 0 -3px; - flex: 0 0 auto; - background: #8c8c8c; +.charsheet .floatingbar { + width: 3px; + height: 2px; + margin: 8px 0 0 -3px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + background: var(--blades-greyborder); } /* Repeating items*/ -.sheet-numboxes[value="0"] ~ .sheet-boxesgeq2, -.sheet-numboxes[value="1"] ~ .sheet-boxesgeq2, -.sheet-numboxes[value="2"] ~ .sheet-boxesgeq3 { - display: none; +.charsheet .numboxes[value="0"] ~ .boxesgeq2, +.charsheet .numboxes[value="1"] ~ .boxesgeq2, +.charsheet .numboxes[value="2"] ~ .boxesgeq3 { + display: none; } - -.sheet-itemholder .repitem .sheet-boxes-chosen[value="1"] + div, .sheet-itemholder .repitem .sheet-boxes-chosen[value="0"] + div ~ div { - display: none; +.charsheet .itemholder .repitem .boxes-chosen[value="1"] + div, .charsheet .itemholder .repitem .boxes-chosen[value="0"] + div ~ div { + display: none; } - -.sheet-numboxes-chooser { - padding: 1px 0; - font-size: 11px; +.charsheet .numboxes-chooser { + padding: 1px 0; + font-size: 11px; } - -.sheet-numboxes-chooser input[type=number] { - margin-left: auto; - height: 18px; - padding: 0; - text-align: right; - width: 2.5em; - background: transparent; +.charsheet .numboxes-chooser input[type=number] { + margin-left: auto; + height: 18px; + padding: 0; + text-align: right; + width: 2.5em; + background: transparent; } - -.sheet-numboxes-chooser label { - height: 18px; - border: 1px solid #aaa; - margin-left: auto; - padding: 2px; - line-height: 12px; +.charsheet .numboxes-chooser label { + height: 18px; + border: 1px solid var(--blades-versiongrey); + margin-left: auto; + padding: 2px; + line-height: 12px; } - -.sheet-numboxes-chooser input:checked + span { - font-weight: bold; +.charsheet .numboxes-chooser input:checked + span { + font-weight: bold; } - -.sheet-show-itemdesc[value="0"] ~ div .sheet-item-description { - display: none; +.charsheet .show-itemdesc[value="0"] ~ div .item-description { + display: none; } - -.sheet-itemholder .sheet-expand { - top: 4px; - right: 1px; +.charsheet .itemholder .expand { + top: 4px; + right: 1px; } - -.sheet-itemholder .sheet-expand + span { - top: 1px; - right: 1px; +.charsheet .itemholder .expand + span { + top: 1px; + right: 1px; } - -.sheet-itemholder .sheet-expand + span::before { - content: "◀"; +.charsheet .itemholder .expand + span::before { + content: "◀"; } - -.sheet-itemholder .sheet-expand:checked + span::before { - content: "▼"; +.charsheet .itemholder .expand:checked + span::before { + content: "▼"; } - -.sheet-itemholder .sheet-expand ~ textarea { - border-top: 1px solid #d8d8d8; - line-height: 12px; - font-size: 10px; - height: 49px; +.charsheet .itemholder .expand ~ textarea { + border-top: 1px solid var(--blades-lightest); + line-height: 12px; + font-size: 10px; + height: 49px; } - -.sheet-itemholder .sheet-playbookitems .sheet-expand ~ textarea { - border-color: #aaa; +.charsheet .itemholder .playbookitems .expand ~ textarea { + border-color: var(--blades-versiongrey); } /* LOGO */ -.sheet-bladeslogo { - height: 43px; - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/logo.png"); - background-size: 102% auto; - background-repeat: no-repeat; +.charsheet .bladeslogo { + height: 43px; + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/logo.png"); + background-size: 102% auto; + background-repeat: no-repeat; } -.sheet-crewheader { - color: #808080; - font-size: 28px; - align-self: flex-start; - letter-spacing: -2px; - line-height: 31px; +.sheet-darkmode .charsheet .bladeslogo { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/logo.png"); +} + +.charsheet .crewheader { + color: var(--blades-headergrey); + font-size: 28px; + -ms-flex-item-align: start; + align-self: flex-start; + letter-spacing: -2px; + line-height: 31px; } /* LOAD */ -.sheet-itemheader, -.sheet-loadheader { - background: #b4b4b4; - height: 20px; - font-size: 10px; - padding: 3px 2px 1px 4px; - align-items: center; -} - -.sheet-loadheader label { - align-items: center; - line-height: 11px; - font-style: italic; - margin-left: auto; - text-transform: lowercase; -} - -.sheet-loadnumber { - font-weight: bold; - font-family: "Times New Roman", Times, serif; - font-size: 12px; - margin: 0 3px 0 4px; -} - -.sheet-itemheader > .sheet-label { - margin-right: 4px; -} - -.sheet-itemheader:not(:hover) .sheet-text-button { - display: none; -} - -.sheet-itemheader .sheet-text-button { - margin-left: auto; -} - -.sheet-itemheader .sheet-text-button input[type=checkbox] + span { - opacity: 1; - color: #333; -} - -.sheet-itemheader .sheet-text-button:hover input[type=checkbox] + span { - color: red; -} - -/* ADVANCEMENT BOX*/ -.sheet-advancement-header { - letter-spacing: 2px; -} - -.sheet-markxp { - margin-right: auto; -} - -.sheet-xpholder { - letter-spacing: 0; - font-size: 0; - margin-left: 8px; -} - -.sheet-advancement-desc li, .sheet-warblurb li { - font-size: 13px; - line-height: 16px; - width: 100%; -} - -.sheet-advancement-desc li.sheet-nondot, .sheet-warblurb li.sheet-nondot { - padding-left: 0; - font-style: normal; -} - -.sheet-advancement-desc li.sheet-nondot::before, .sheet-warblurb li.sheet-nondot::before { - display: none; -} - -.sheet-advancement-desc { - width: 99%; - background: #d8d8d8; - padding: 15px 10px 4px 11px; -} - -.sheet-advancement-desc li { - font-style: italic; - margin-bottom: .7em; - padding-left: 1em; -} - -.sheet-advancement-desc .sheet-auto-expand { - min-height: 16px; - padding: 0 2px; -} - -/* PLAYBOOK */ -.sheet-playbook { - align-items: center; - height: 50px; - position: relative; - background: #d8d8d8; -} - -.sheet-playbook input[type=text] { - flex: 0 0 auto; - margin: 0 2px; - padding-left: 5px; - letter-spacing: -1px; - font-size: 35px; - line-height: 40px; -} - -.sheet-playbook textarea { - height: 42px; - flex: 0 0 auto; - font-size: 10px; - padding-left: 3px; - letter-spacing: 1px; - color: #808080; - resize: none; - overflow: hidden; - line-height: 14px; -} - -.sheet-playbook .sheet-reminder { - position: absolute; - border: 1px solid #333; - background: white; - top: 48px; - z-index: 3; - border-radius: 5px; - width: 267px; - font-size: 12px; - text-align: center; - padding: 3px; -} - -.sheet-type-character .sheet-playbook input[type=text] { - width: calc(64% - 10px); -} - -.sheet-type-character .sheet-playbook textarea { - width: calc(36% + 6px); -} - -.sheet-type-crew .sheet-playbook input[type=text] { - width: calc(74% - 7px); -} - -.sheet-type-crew .sheet-playbook textarea { - width: calc(26% + 3px); -} - -/* HEADER */ -.sheet-header { - grid: auto / 53.7% 45%; - grid-column-gap: 1.3%; - align-items: end; -} - -.sheet-header label { - flex-wrap: wrap; -} - -.sheet-header input[type=text], .sheet-header .sheet-auto-expand { - width: 100%; - border-bottom: 1px solid black; - font-size: 14px; - line-height: 1.3; - text-align: left; - padding: 3px 0 0 2px; - margin: 3px 0 0; - min-height: 22px; - color: #c43c35; -} - -.sheet-header input[type="hidden"][value=""] + div > .sheet-title::after { - content: ": "; -} - -.sheet-header input[type="hidden"]:not([value=""]) + div > .sheet-info { - display: none; -} - -.sheet-header .sheet-text { - color: black; - text-align: justify; - padding: 3px 0 2px; - line-height: 13px; -} - -.sheet-header .sheet-title { - font-size: 10px; - letter-spacing: 1px; -} - -.sheet-header .sheet-info { - font-size: 8px; -} - -.sheet-header .sheet-vice-input:not([value="normal"]) ~ .sheet-normal, -.sheet-header .sheet-vice-input:not([value="ghost"]) ~ .sheet-ghost, -.sheet-header .sheet-vice-input:not([value="hull"]) ~ .sheet-hull, -.sheet-header .sheet-vice-input:not([value="vampire"]) ~ .sheet-vampire { - display: none; -} - -.sheet-header .sheet-vice { - justify-content: space-between; - text-align: justify; - grid-column: span 2; - line-height: 1.6; - font-size: 11px; -} - -.sheet-header .sheet-vice .sheet-smallcaps { - font-size: 130%; - line-height: 0; -} - -/* CLOCKS */ -.sheet-clocks .repcontainer { - display: grid; - grid-template-columns: 1fr 1fr; - padding-top: 2px; - grid-gap: 4px; -} - -.sheet-clocks .repitem { - display: flex; - padding: 4px 2px; - background: #d8d8d8; - align-items: start; -} - -.sheet-clocks .itemcontrol { - top: 0; - left: 0; -} - -.sheet-clocks .sheet-auto-expand { - font-size: 11px; - letter-spacing: 1px; - padding: 2px 3px; - line-height: 12px; - flex: auto; - min-width: 0; - margin-right: 2px; - min-height: 28px; -} - -.sheet-clock-container { - position: relative; - padding: 2px; - margin: 0 0 5px; - z-index: 1; - height: 44px; - width: 44px; - cursor: pointer; - flex: 0 0 auto; -} - -.sheet-clock-container input { - position: absolute; - display: none; -} - -.sheet-clock-container .sheet-zero { - z-index: 3; -} - -.sheet-clock-container .sheet-zero, .sheet-clock-container .sheet-zero + span { - position: absolute; - top: 37px; - left: -5px; -} - -.sheet-clock-container .sheet-all, .sheet-clock-container .sheet-zero { - display: block; -} - -.sheet-clock { - border: 2px solid black; - border-radius: 50%; - background: white; - width: 100%; - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: -1; -} - -div[class^="sheet-spoke"] { - height: 44px; - width: 2px; - position: absolute; - display: none; - left: 0; - top: 0; - background: black; -} - -.sheet-spoke-0 { - transform: translateX(21px); -} - -.sheet-spoke-30 { - transform: translateX(21px) rotate(30deg); -} - -.sheet-spoke-36 { - transform: translateX(21px) rotate(36deg); -} - -.sheet-spoke-45 { - transform: translateX(21px) rotate(45deg); -} - -.sheet-spoke-60 { - transform: translateX(21px) rotate(60deg); -} - -.sheet-spoke-72 { - transform: translateX(21px) rotate(72deg); -} - -.sheet-spoke-90 { - transform: translateX(21px) rotate(90deg); -} - -.sheet-spoke-108 { - transform: translateX(21px) rotate(108deg); -} - -.sheet-spoke-120 { - transform: translateX(21px) rotate(120deg); -} - -.sheet-spoke-135 { - transform: translateX(21px) rotate(135deg); -} - -.sheet-spoke-144 { - transform: translateX(21px) rotate(144deg); -} - -.sheet-spoke-150 { - transform: translateX(21px) rotate(150deg); -} - -.sheet-size-choice { - display: flex; - flex: 0 0 auto; - height: 45px; - margin: 2px 0; - width: 44px; - line-height: 12px; - font-size: 13px; - font-family: "Times New Roman", Times, serif; - align-content: space-evenly; - flex-wrap: wrap; -} - -/* Faction clocks */ -.sheet-clocks-only[value="0"] ~ .sheet-container .sheet-type-faction .sheet-clocks .repcontainer { - grid-template-columns: repeat(3, 1fr); -} - -.sheet-clocks-only[value="1"] ~ .sheet-container .sheet-type-faction .sheet-clocks .repcontainer { - grid-template-columns: repeat(4, 1fr); -} - -.sheet-clocks-only[value="1"] ~ .sheet-container .sheet-type-faction { - grid: auto / auto; -} - -.sheet-clocks-only[value="1"] ~ .sheet-container .sheet-type-faction .sheet-factiontitle, .sheet-clocks-only[value="1"] ~ .sheet-container .sheet-type-faction .sheet-factions, .sheet-clocks-only[value="1"] ~ .sheet-container .sheet-type-faction .sheet-notes { - display: none; -} - -.sheet-size[value="4"] ~ .sheet-clock-container input:not(.sheet-zero) { - height: 20px; - width: 20px; -} - -.sheet-size[value="4"] ~ .sheet-clock-container input[value="1"] { - margin-left: 20px; -} - -.sheet-size[value="4"] ~ .sheet-clock-container input[value="2"] { - margin: 20px 0 0 20px; -} - -.sheet-size[value="4"] ~ .sheet-clock-container input[value="3"] { - margin-top: 20px; -} - -.sheet-size[value="6"] ~ .sheet-clock-container input:not(.sheet-zero) { - height: 17px; - width: 12px; -} - -.sheet-size[value="6"] ~ .sheet-clock-container input[value="1"] { - margin-left: 21px; - transform: rotate(30deg); -} - -.sheet-size[value="6"] ~ .sheet-clock-container input[value="2"] { - margin: 12px 0 0 25px; - transform: rotate(90deg); -} - -.sheet-size[value="6"] ~ .sheet-clock-container input[value="3"] { - margin: 22px 0 0 21px; - transform: rotate(150deg); -} - -.sheet-size[value="6"] ~ .sheet-clock-container input[value="4"] { - margin: 22px 0 0 8px; - transform: rotate(210deg); -} - -.sheet-size[value="6"] ~ .sheet-clock-container input[value="5"] { - margin: 12px 0 0 1px; - transform: rotate(270deg); -} - -.sheet-size[value="6"] ~ .sheet-clock-container input[value="6"] { - margin-left: 8px; - transform: rotate(330deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input:not(.sheet-zero) { - height: 14px; - width: 10px; -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="1"] { - margin-left: 20px; - transform: rotate(22.5deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="2"] { - margin: 8px 0 0 26px; - transform: rotate(67.5deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="3"] { - margin: 18px 0 0 26px; - transform: rotate(112.5deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="4"] { - margin: 25px 0 0 20px; - transform: rotate(157.5deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="5"] { - margin: 25px 0 0 9px; - transform: rotate(202.5deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="6"] { - margin: 18px 0 0 2px; - transform: rotate(247.5deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="7"] { - margin: 8px 0 0 2px; - transform: rotate(292.5deg); -} - -.sheet-size[value="8"] ~ .sheet-clock-container input[value="8"] { - margin-left: 9px; - transform: rotate(337.5deg); -} - -.sheet-size[value="10"] ~ .sheet-clock-container input:not(.sheet-zero) { - height: 14px; - width: 9px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="1"] { - transform: rotate(18deg); - margin-left: 20px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="2"] { - transform: rotate(54deg); - margin: 5px 0 0 27px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="3"] { - transform: rotate(90deg); - margin: 13px 0 0 30px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="4"] { - transform: rotate(126deg); - margin: 21px 0 0 27px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="5"] { - transform: rotate(162deg); - margin: 26px 0 0 20px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="6"] { - transform: rotate(198deg); - margin: 26px 0 0 12px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="7"] { - transform: rotate(234deg); - margin: 21px 0 0 5px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="8"] { - transform: rotate(270deg); - margin: 13px 0 0 1px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="9"] { - transform: rotate(306deg); - margin: 5px 0 0 5px; -} - -.sheet-size[value="10"] ~ .sheet-clock-container input[value="10"] { - transform: rotate(342deg); - margin-left: 12px; -} - -.sheet-size[value="12"] ~ .sheet-clock-container input:not(.sheet-zero) { - height: 12px; - width: 8px; -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="1"] { - margin-left: 20px; - transform: rotate(15deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="2"] { - margin: 4px 0 0 26px; - transform: rotate(45deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="3"] { - margin: 10px 0 0 29px; - transform: rotate(75deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="4"] { - margin: 18px 0 0 29px; - transform: rotate(105deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="5"] { - margin: 24px 0 0 26px; - transform: rotate(135deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="6"] { - margin: 28px 0 0 20px; - transform: rotate(165deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="7"] { - margin: 28px 0 0 12px; - transform: rotate(195deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="8"] { - margin: 24px 0 0 6px; - transform: rotate(225deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="9"] { - margin: 18px 0 0 3px; - transform: rotate(255deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="10"] { - margin: 10px 0 0 3px; - transform: rotate(295deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="11"] { - margin: 4px 0 0 6px; - transform: rotate(315deg); -} - -.sheet-size[value="12"] ~ .sheet-clock-container input[value="12"] { - margin-left: 12px; - transform: rotate(345deg); -} - -/* End positioning */ -.sheet-size[value="4"] ~ .sheet-clock-container .sheet-4clock, -.sheet-size[value="6"] ~ .sheet-clock-container .sheet-6clock, -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-8clock, -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-10clock, -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-12clock { - display: block; -} - -.sheet-size:not([value=""]) ~ .sheet-size-choice, -.sheet-clocks .sheet-size[value=""] ~ .sheet-broadcast-button, -.sheet-size[value=""] ~ .sheet-clock-container { - display: none; -} - -.sheet-clock-container .sheet-input-progress[value="0"]:checked ~ .sheet-clock { - background: white; -} - -.sheet-size[value="4"] ~ .sheet-clock-container .sheet-input-progress[value="1"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(180deg, red 50%, white 50%); -} - -.sheet-size[value="4"] ~ .sheet-clock-container .sheet-input-progress[value="2"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="4"] ~ .sheet-clock-container .sheet-input-progress[value="3"]:checked ~ .sheet-clock { - background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="4"] ~ .sheet-clock-container .sheet-input-progress[value="4"]:checked ~ .sheet-clock { - background: red; -} - -.sheet-size[value="6"] ~ .sheet-clock-container .sheet-input-progress[value="1"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(150deg, red 50%, white 50%); -} - -.sheet-size[value="6"] ~ .sheet-clock-container .sheet-input-progress[value="2"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(210deg, red 50%, white 50%); -} - -.sheet-size[value="6"] ~ .sheet-clock-container .sheet-input-progress[value="3"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="6"] ~ .sheet-clock-container .sheet-input-progress[value="4"]:checked ~ .sheet-clock { - background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="6"] ~ .sheet-clock-container .sheet-input-progress[value="5"]:checked ~ .sheet-clock { - background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="6"] ~ .sheet-clock-container .sheet-input-progress[value="6"]:checked ~ .sheet-clock { - background: red; -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="1"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(135deg, red 50%, white 50%); -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="2"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(180deg, red 50%, white 50%); -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="3"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(225deg, red 50%, white 50%); -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="4"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="5"]:checked ~ .sheet-clock { - background-image: linear-gradient(135deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="6"]:checked ~ .sheet-clock { - background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="7"]:checked ~ .sheet-clock { - background-image: linear-gradient(225deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="8"] ~ .sheet-clock-container .sheet-input-progress[value="8"]:checked ~ .sheet-clock { - background: red; -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="1"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(126deg, red 50%, white 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="2"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(162deg, red 50%, white 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="3"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(198deg, red 50%, white 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="4"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(234deg, red 50%, white 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="5"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="6"]:checked ~ .sheet-clock { - background-image: linear-gradient(126deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="7"]:checked ~ .sheet-clock { - background-image: linear-gradient(162deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="8"]:checked ~ .sheet-clock { - background-image: linear-gradient(198deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="9"]:checked ~ .sheet-clock { - background-image: linear-gradient(234deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="10"] ~ .sheet-clock-container .sheet-input-progress[value="10"]:checked ~ .sheet-clock { - background: red; -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="1"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(120deg, red 50%, white 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="2"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(150deg, red 50%, white 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="3"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(180deg, red 50%, white 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="4"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(210deg, red 50%, white 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="5"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(240deg, red 50%, white 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="6"]:checked ~ .sheet-clock { - background-image: linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="7"]:checked ~ .sheet-clock { - background-image: linear-gradient(120deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="8"]:checked ~ .sheet-clock { - background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="9"]:checked ~ .sheet-clock { - background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="10"]:checked ~ .sheet-clock { - background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="11"]:checked ~ .sheet-clock { - background-image: linear-gradient(240deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); -} - -.sheet-size[value="12"] ~ .sheet-clock-container .sheet-input-progress[value="12"]:checked ~ .sheet-clock { - background: red; -} - -/* TEXT INPUTS FOR TRAUMA AND CLOCKS */ -.sheet-text-button { - font-weight: bold; -} - -.sheet-text-button input:checked + span { - color: red; -} - -.sheet-size-choice > .sheet-text-button { - height: 17px; - padding: 3px; - flex: 0 0 40%; - margin: auto; - justify-content: center; -} - -/* TEETH */ -input.sheet-stresstooth, -input.sheet-xptooth, -input.sheet-holdtooth, -.sheet-stresstooth + span, -.sheet-xptooth + span, -.sheet-holdtooth + span { - height: 25px; -} - -input.sheet-regulartooth, -.sheet-regulartooth + span { - height: 13px; -} - -input.sheet-tooth { - width: 12px; - margin-right: -12px; -} - -input.sheet-tooth:last-of-type { - width: 8px; - margin-right: -8px; -} - -.sheet-tooth + span { - width: 8px; - background-size: cover; - background-repeat: no-repeat; -} - -.sheet-tooth + span:last-child { - margin-right: 0 !important; -} - -.sheet-tooth:hover + span { - opacity: 0.7; -} - -.sheet-xptooth + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-red.png"); - margin-right: 4px; -} - -.sheet-tooth:checked ~ .sheet-xptooth + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-white.png"); -} - -.sheet-stresstooth[type=radio] + span, -.sheet-stresstooth[type=checkbox]:checked + span, -.sheet-holdtooth:checked + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-red.png"); -} - -.sheet-stresstooth[type=checkbox] + span, -.sheet-tooth:checked ~ .sheet-stresstooth[type=radio] + span, -.sheet-holdtooth + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-white.png"); -} - -.sheet-regulartooth + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/shorttooth-red.png"); -} - -.sheet-tooth:checked ~ .sheet-regulartooth + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/shorttooth-grey.png"); -} - -input.sheet-zero { - width: 13px; - height: 13px; - margin-right: -13px; - vertical-align: top; -} - -.sheet-zero + span { - height: 11px; - width: 11px; - margin-top: 1px; - margin-right: 2px; - vertical-align: top; - border: 1px solid black; - background: white; - border-radius: 50%; - position: relative; -} - -.sheet-zero + span::before, .sheet-zero + span::after { - position: absolute; - width: 1px; - content: ""; - left: 0; - background: black; - height: 11px; -} - -.sheet-zero + span::after { - transform: translate(4px, -1px) rotate(135deg); -} - -.sheet-zero + span::before { - transform: translate(4px, -1px) rotate(45deg); -} - -.sheet-zero:checked + span { - visibility: hidden; -} - -.sheet-coin .sheet-zero + span { - position: relative; - bottom: 1px; - margin-right: auto; -} - -.sheet-stash input.sheet-zero, .sheet-stash .sheet-zero + span { - position: absolute; - left: -3px; - top: 3px; -} - -.sheet-crewcoin input.sheet-zero, .sheet-crewcoin .sheet-zero + span { - position: absolute; - left: -9px; - top: 3px; -} - -.sheet-stress2 input.sheet-zero, .sheet-stress2 .sheet-zero + span, .sheet-rep2 input.sheet-zero, .sheet-rep2 .sheet-zero + span, .sheet-heat2 input.sheet-zero, .sheet-heat2 .sheet-zero + span { - position: absolute; - left: -13px; - top: 13px; -} - -/* TURF RADIOS */ -.sheet-turfbox input[type=radio] { - height: 12px; - width: calc(100%/12); -} - -.sheet-turf-input[value="1"] ~ input[type=radio].sheet-turf1 + span, -.sheet-turf-input[value="2"] ~ input[type=radio].sheet-turf2 + span, -.sheet-turf-input[value="3"] ~ input[type=radio].sheet-turf3 + span, -.sheet-turf-input[value="4"] ~ input[type=radio].sheet-turf4 + span, -.sheet-turf-input[value="5"] ~ input[type=radio].sheet-turf5 + span, -.sheet-turf-input[value="6"] ~ input[type=radio].sheet-turf6 + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-black.png"); -} - -.sheet-tooth:checked ~ .sheet-stresstooth.sheet-turf6 + span { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-halfgrey.png"); -} - -/* SPECIAL ABILITIES*/ -.sheet-show-frienddesc[value='0'] ~ .sheet-container .sheet-friends .sheet-expand, .sheet-show-frienddesc[value='0'] ~ .sheet-container .sheet-friends .sheet-expand + span, .sheet-show-frienddesc[value='0'] ~ .sheet-container .sheet-friends .sheet-description, .sheet-show-frienddesc[value='0'] ~ .sheet-container .sheet-contacts .sheet-expand, .sheet-show-frienddesc[value='0'] ~ .sheet-container .sheet-contacts .sheet-expand + span, .sheet-show-frienddesc[value='0'] ~ .sheet-container .sheet-contacts .sheet-description { - display: none; -} - -.sheet-friends input.sheet-expand, .sheet-contacts input.sheet-expand { - top: 11px; -} - -.sheet-friends .sheet-expand + span, .sheet-contacts .sheet-expand + span { - top: 8px; -} - -.sheet-friends input.sheet-expand, .sheet-friends .sheet-expand + span, .sheet-contacts input.sheet-expand, .sheet-contacts .sheet-expand + span { - right: 3px; -} - -.sheet-friends .sheet-expand:not(:checked) + span::before, .sheet-contacts .sheet-expand:not(:checked) + span::before { - content: "◀"; -} - -.sheet-friends .sheet-expand:checked + span::before, .sheet-contacts .sheet-expand:checked + span::before { - content: "▼"; -} - -.sheet-friends .sheet-expand:not(:checked) ~ .sheet-description, .sheet-contacts .sheet-expand:not(:checked) ~ .sheet-description { - height: 0px !important; - border: none; - min-height: 0; - padding: 0; -} - -.sheet-friends .sheet-description, .sheet-contacts .sheet-description { - font-size: 11px; - padding: 2px 3px; - line-height: 14px; - height: 46px; - min-height: 18px; - border-bottom: 1px solid #b4b4b4; -} - -.sheet-specialability, -.sheet-friend-contact { - border-bottom: 1px solid #b4b4b4; - width: 100%; - align-items: start; -} - -.sheet-specialability { - padding: 4px; -} - -.sheet-friend-contact { - padding: 6px 4px; - align-items: center; -} - -.sheet-abilityname { - width: calc(28% - 22px); - font-size: 13px; - min-height: 17px; - margin: 0 auto; - line-height: 17px; - padding: 0 1px; -} - -.sheet-abilitydesc { - width: 72%; - min-height: 32px; - font-size: 12px; - line-height: 14px; - padding: 2px 1px; - text-align: justify; -} - -/* FRIENDS/CONTACTS */ -.sheet-friend-contact .sheet-auto-expand { - font-size: 12px; - color: #555; - min-height: 20px; - line-height: 16px; - flex: 1 1 0; - padding: 2px 0 2px 3px; -} - -/* HARM */ -.sheet-harm-coin { - grid: auto auto / 63% 16% 21%; -} - -.sheet-harm { - position: relative; - grid-row: 1 / 3; -} - -.sheet-harmbody { - display: grid; - grid: 52px / 12px auto auto 59px; - font-weight: 800; - text-transform: uppercase; - text-align: center; -} - -.sheet-harmbody div { - background: #d6d8d9; - border-bottom: 1px solid black; -} - -.sheet-harmbody .sheet-harmeffect { - width: 59px; - color: #555; - font-size: 10px; - letter-spacing: 1px; - line-height: 1.4; -} - -.sheet-harmbody .sheet-harmnumber { - line-height: 1; - font-size: 13px; -} - -.sheet-harmbody .sheet-twocols { - grid-column: span 2; -} - -.sheet-harmbody textarea { - font-size: 12px; - padding: 10px 4px 3px; - color: #c43c35; - overflow: hidden; - height: 52px; - resize: none; - line-height: 16px; - text-align: center; - border-bottom: 1px solid black; -} - -.sheet-harmbody textarea + textarea { - border-left: 1px solid #d8d8d8; -} - -/* HEALING AND ARMOR */ -.sheet-armor .sheet-blackheader, .sheet-healing .sheet-blackheader { - text-align: center; - padding: 1px 0 0; -} - -.sheet-healing { - position: relative; -} - -.sheet-healing .sheet-healing-progress { - line-height: 14px; - text-align: center; - font-style: italic; - font-size: 9px; -} - -.sheet-healing .sheet-clock-container { - margin: 0 auto; -} - -.sheet-armor label { - margin: 3px 0 3px 10px; - height: 18px; - font-size: 11px; - text-align: center; - line-height: 18px; -} - -.sheet-armor .sheet-label { - flex-grow: 1; - order: 1; -} - -.sheet-armor input:checked ~ span { - color: red; -} - -.sheet-armor .sheet-checkbox + span { - border: 1px solid black; - margin: 3px; - order: 2; -} - -/* COIN */ -.sheet-coin-and-stash { - width: 96%; - margin-left: 4%; - grid-column: span 2; -} - -.sheet-coinrow .sheet-label { - font-size: 11px; - margin-right: auto; -} - -.sheet-coin { - border-bottom: 1px solid #8c8c8c; - border-right: 1px solid #8c8c8c; - width: 70%; - height: 19px; - padding: 1px 3px 0 0; - align-items: center; -} - -.sheet-stashbutton-holder { - border-top: 1px solid #8c8c8c; - display: flex; - align-items: center; - justify-content: center; - width: 30%; - height: 19px; - padding-bottom: 1px; -} - -/* STASH */ -.sheet-stash { - padding: 4px 0 0 10px; - line-height: 18px; - margin-bottom: -5px; - position: relative; -} - -/* CREW COIN */ -.sheet-crewcoin-coins { - padding: 4px 0 0 3px; - position: relative; -} - -.sheet-crewcoin-desc { - font-size: 10px; - line-height: 14px; - padding-left: 3px; - font-style: italic; -} - -.sheet-crewcoinbar { - border-left: 1px solid #c7c7c7; - height: 15px; - width: 3px; - margin: -1px auto 0; -} - -/* LEFT-FILLED RADIO BOXES */ -.sheet-crewcoin input.sheet-radiobox { - width: 12px; - height: 12px; - margin-right: -12px; -} - -.sheet-crewcoin .sheet-radiobox + span { - width: 11px; - height: 11px; - margin-right: auto; -} - -.sheet-crewcoin input:checked ~ .sheet-radiobox.sheet-vaultcoin + span { - border-color: #c7c7c7; -} - -.sheet-coin-and-stash input.sheet-radiobox { - width: 13px; - height: 13px; - vertical-align: top; - margin-right: -13px; -} - -.sheet-coin-and-stash .sheet-radiobox + span { - width: 12px; - height: 12px; - vertical-align: top; -} - -.sheet-coinrow .sheet-radiobox + span { - margin-right: auto; -} - -.sheet-radiobox:hover + span { - opacity: 0.7; -} - -.sheet-radiobox:last-of-type + span { - margin-right: 0; -} - -.sheet-coin .sheet-radiobox + span, .sheet-crewcoin .sheet-radiobox + span { - background: red; - border: 1px solid black; -} - -.sheet-coin input:checked ~ .sheet-radiobox + span, .sheet-crewcoin input:checked ~ .sheet-radiobox + span { - background: white; -} - -.sheet-stash .sheet-radiobox + span { - background: black; - margin-right: calc((100% - 126px)/9); -} - -.sheet-stash input:checked ~ .sheet-radiobox + span { - background: #c7c7c7; -} - -.sheet-stash input.sheet-radiobox:nth-of-type(10n+1) { - margin: -2px -17px 0 3px; - width: 15px; - height: 15px; -} - -.sheet-stash .sheet-radiobox:nth-of-type(10n+1) + span { - width: 14px; - height: 14px; - border: 1px solid black; - margin-left: 3px; - margin-right: 0; - position: relative; - top: -2px; -} - -/* HUNTING GROUNDS */ -.sheet-hunting-grounds .sheet-plainheader { - min-height: 20px; - line-height: 18px; -} - -.sheet-hunting-grounds .sheet-description { - font-size: 12px; - min-height: 32px; - line-height: 16px; -} - -/* BONUS DIE SECTION */ -.sheet-bonusdie .sheet-label { - font-size: 12px; -} - -.sheet-bonusdieplus { - width: 10%; - background: black; - color: white; - font-size: 13px; - line-height: 1; - font-weight: bold; -} - -.sheet-bonusdietext { - background: #d8d8d8; - width: 90%; - padding: 3px; - font-size: 11px; - line-height: 14px; - text-align: center; -} - -/* REPEATING SECTION CONTROLS */ -.repcontrol { - display: flex; -} - -.repcontrol .repcontrol_edit { - margin-left: auto; - order: 1; -} - -.repcontrol button { - background: transparent; - color: #777; - border-radius: 0; - border-color: #b4b4b4; - transition: all 0.2s; - font-family: pictos; - font-size: 0; - font-weight: bold; - padding: 5px 3px 2px; - line-height: 8px; -} - -.repcontrol button:hover { - color: black; - border-color: black; - background: #c7c7c7; -} - -.repcontrol button.repcontrol_edit::after { - content: "("; -} - -.repcontrol button.repcontrol_add::after { - content: "&"; -} - -.repcontrol button.repcontrol_edit::after, .repcontrol button.repcontrol_add::after { - font-size: 12px; -} - -.repcontainer.editmode + .repcontrol button.repcontrol_edit::after { - content: ")"; -} - -.sheet-free-repcontrol .repcontrol { - margin-top: 3px; -} - -.itemcontrol { - z-index: 20; -} - -.sheet-itemholder .itemcontrol .btn { - padding: 0px 7px; - line-height: 16px; -} - -.sheet-factions .itemcontrol .btn { - padding: 1px 7px; -} - -/* STRESS, REP, et cetera */ -.sheet-rep-and-hold, .sheet-heat-and-vault { - justify-content: space-between; -} - -.sheet-hold { - width: 53%; -} - -.sheet-stress, .sheet-rep, .sheet-hold, .sheet-heat { - height: 25px; -} - -.sheet-stress1 { - flex: 1 0 auto; -} - -.sheet-stress2 { - flex: 2 1 136px; - position: relative; -} - -.sheet-stress3 { - flex: 1 0 68px; - text-align: center; -} - -.sheet-stress4 { - flex: 2 0 217px; - line-height: 13px; - font-size: 9px; - padding: 1px 0 0 2px; - text-transform: uppercase; -} - -.sheet-stress4 div { - justify-content: space-between; -} - -.sheet-stress4 .sheet-input:not([value="normal"]) ~ .sheet-normal, -.sheet-stress4 .sheet-input:not([value="ghost"]) ~ .sheet-ghost, -.sheet-stress4 .sheet-input:not([value="hull"]) ~ .sheet-hull, -.sheet-stress4 .sheet-input:not([value="vampire"]) ~ .sheet-vampire { - display: none; -} - -.sheet-stress4 .sheet-ghost, .sheet-stress4 .sheet-hull { - letter-spacing: 1px; -} - -.sheet-traumaholder, .sheet-wantedholder { - height: 13px; - padding-left: 2px; -} - -.sheet-rep1 { - width: 33px; -} - -.sheet-rep2 { - width: 134px; - position: relative; -} - -.sheet-turfbox { - display: flex; - position: absolute; - flex-flow: row-reverse; - z-index: 2; - width: 100%; -} - -.sheet-turfzero-holder { - margin-left: 2px; -} - -.sheet-hold > div, -.sheet-hold > label, -.sheet-heat > div, -.sheet-rep > div, -.sheet-crewcoin2 { - flex-grow: 1; -} - -.sheet-heat2 { - width: 107px; - position: relative; -} - -.sheet-crewcoin1 { - width: 26%; -} - -.sheet-regulartooth + span, -.sheet-rep .sheet-tooth + span, -.sheet-heat2 .sheet-tooth + span, -.sheet-stress2 .sheet-tooth + span { - margin-right: auto; -} - -.sheet-extra-teeth:checked + .sheet-tooth + span { - margin-right: 0; -} - -.sheet-extra-teeth:checked + .sheet-tooth ~ .sheet-tooth, .sheet-extra-teeth:checked + .sheet-tooth + span ~ span { - display: none; -} - -.sheet-vampirexp[value="1"] ~ .sheet-xptooth + span { - margin-right: 2px; -} - -.sheet-xpholder .sheet-vampirexp[value="0"] ~ .sheet-tooth[value="8"] + span, -.sheet-attribute-xp-box .sheet-vampirexp[value="0"] ~ .sheet-tooth[value="6"] + span { - margin-right: 0; -} - -/* small fixes */ -.sheet-rep input.sheet-tooth { - width: 11px; - margin-right: -11px; -} - -/* NOTES */ -.sheet-notes { - margin-left: 1%; - font-family: "Shadows Into Light", cursive; - color: #c43c35; - font-size: 20px; - width: 98%; - background: linear-gradient(transparent 26px, #a7a7a7 1px) 0 0/100% 27px; - line-height: 27px; - height: 378px; - min-height: 378px; +.charsheet .itemheader, +.charsheet .loadheader { + background: var(--blades-darkgrey); + height: 20px; + font-size: 10px; + padding: 3px 2px 1px 4px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.charsheet .itemheader .sheet-label, +.charsheet .loadheader .sheet-label { + font-size: 10px; + padding: 0px; +} +.charsheet .loadheader label { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + line-height: 11px; + font-style: italic; + margin-left: auto; + text-transform: lowercase; +} +.charsheet .loadnumber { + font-weight: bold; + font-family: "Times New Roman", Times, serif; + font-size: 12px; + margin: 0 3px 0 4px; +} +.charsheet .itemheader > .sheet-label { + margin-right: 4px; +} +.charsheet .itemheader:not(:hover) .text-button { + display: none; +} +.charsheet .itemheader .text-button { + margin-left: auto; +} +.charsheet .itemheader .text-button input[type=checkbox] + span { + opacity: 1; + color: var(--blades-fontblack); +} +.charsheet .itemheader .text-button:hover input[type=checkbox] + span { + color: red; } /* LOAD CHECKBOXES */ -.sheet-loadheader .sheet-checkbox + span { - border: 1px solid black; - transform: rotate(45deg); - width: 10px; - height: 10px; - background: white; +.charsheet .loadheader .checkbox + span { + border: 1px solid var(--blades-blacktext); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + width: 10px; + height: 10px; + background: var(--blades-whitetext); +} + +/* ADVANCEMENT BOX*/ +.charsheet .advancement-header { + letter-spacing: 2px; +} +.charsheet .markxp { + margin-right: auto; +} +.charsheet .xpholder { + letter-spacing: 0; + font-size: 0; + margin-left: 8px; +} +.charsheet .advancement-desc li, .charsheet .warblurb li { + font-size: 13px; + line-height: 16px; + width: 100%; +} +.charsheet .advancement-desc li.nondot, .charsheet .warblurb li.nondot { + padding-left: 0; + font-style: normal; +} +.charsheet .advancement-desc li.nondot::before, .charsheet .warblurb li.nondot::before { + display: none; +} +.charsheet .advancement-desc { + width: 99%; + background: var(--blades-lightest); + padding: 15px 10px 4px 11px; +} +.charsheet .advancement-desc li { + font-style: italic; + margin-bottom: 0.7em; + padding-left: 1em; +} +.charsheet .advancement-desc .auto-expand { + min-height: 16px; + padding: 0 2px; +} + +/* PLAYBOOK */ +.charsheet .playbook { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 50px; + position: relative; + background: var(--blades-lightest); +} +.charsheet .playbook input[type=text] { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + margin: 0 2px; + padding-left: 5px; + letter-spacing: -1px; + font-size: 35px; + line-height: 40px; +} +.charsheet .playbook .sheet-label:empty { + display: inherit; +} +.charsheet .playbook .sheet-label { + text-align: left; +} +.charsheet .playbook textarea { + height: 42px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + font-size: 10px; + padding-left: 3px; + letter-spacing: 1px; + color: var(--blades-headergrey); + resize: none; + overflow: hidden; + line-height: 14px; +} +.charsheet .playbook .reminder { + position: absolute; + border: 1px solid var(--blades-fontblack); + background: var(--blades-whitetext); + top: 48px; + z-index: 3; + border-radius: 5px; + width: 267px; + font-size: 12px; + text-align: center; + padding: 3px; +} +.charsheet .type-character .playbook input[type=text] { + width: calc(64% - 10px); +} +.charsheet .type-character .playbook textarea { + width: calc(36% + 6px); +} +.charsheet .type-crew .playbook input[type=text] { + width: calc(74% - 7px); +} +.charsheet .type-crew .playbook textarea { + width: calc(26% + 3px); +} + +/* HEADER */ +.charsheet .header { + grid: auto/53.7% 45%; + grid-column-gap: 1.3%; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: end; +} +.charsheet .header label { + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.charsheet .header input[type=text], .charsheet .header .auto-expand { + width: 100%; + border-bottom: 1px solid var(--blades-blacktext); + font-size: 14px; + line-height: 1.3; + text-align: left; + padding: 3px 0 0 2px; + margin: 3px 0 0; + min-height: 22px; + color: var(--blades-redtext); +} +.charsheet .header input[type=hidden][value=""] + div > .title::after { + content: ": "; +} +.charsheet .header input[type=hidden]:not([value=""]) + div > .info { + display: none; +} +.charsheet .header .text { + color: var(--blades-blacktext); + text-align: justify; + padding: 3px 0 2px; + line-height: 13px; +} +.charsheet .header .text .sheet-label { + padding: 3px 0 2px; +} +.charsheet .header .title { + font-size: 10px; + letter-spacing: 1px; +} +.charsheet .header .info { + font-size: 8px; +} +.charsheet .header .vice-input:not([value=normal]) ~ .normal, .charsheet .header .vice-input:not([value=ghost]) ~ .ghost, .charsheet .header .vice-input:not([value=hull]) ~ .hull, .charsheet .header .vice-input:not([value=vampire]) ~ .vampire { + display: none; +} +.charsheet .header .vice { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + text-align: justify; + -ms-grid-column-span: 2; + grid-column: span 2; + line-height: 1.6; + font-size: 11px; +} +.charsheet .header .vice .smallcaps { + font-size: 130%; + line-height: 0; +} + +/* CLOCKS */ +.charsheet { + /* Faction clocks */ + /* End positioning */ +} +.charsheet .clocks .repcontainer { + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 4px 1fr; + grid-template-columns: 1fr 1fr; + padding-top: 2px; + grid-gap: 4px; +} +.charsheet .clocks .repitem { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 4px 2px; + background: var(--blades-lightest); + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; +} +.charsheet .clocks .itemcontrol { + top: 0; + left: 0; +} +.charsheet .clocks .auto-expand { + font-size: 11px; + letter-spacing: 1px; + padding: 2px 3px; + line-height: 12px; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + min-width: 0; + margin-right: 2px; + min-height: 28px; +} +.charsheet .clock-container { + position: relative; + padding: 2px; + margin: 0 0 5px; + z-index: 1; + height: 44px; + width: 44px; + cursor: pointer; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; +} +.charsheet .clock-container input { + position: absolute; + display: none; +} +.charsheet .clock-container .zero { + z-index: 3; +} +.charsheet .clock-container .zero, .charsheet .clock-container .zero + span { + position: absolute; + top: 37px; + left: -5px; +} +.charsheet .clock-container .all, .charsheet .clock-container .zero { + display: block; +} +.charsheet .clock { + border: 2px solid var(--blades-blacktext); + border-radius: 50%; + background: var(--blades-whitetext); + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: -1; /* Is this -1 okay? Other z-indexes at -1 have not been */ +} +.charsheet div[class^=spoke] { + height: 44px; + width: 2px; + position: absolute; + display: none; + left: 0; + top: 0; + background: var(--blades-blacktext); +} +.charsheet .spoke-0 { + -webkit-transform: translateX(21px); + transform: translateX(21px); +} +.charsheet .spoke-30 { + -webkit-transform: translateX(21px) rotate(30deg); + transform: translateX(21px) rotate(30deg); +} +.charsheet .spoke-36 { + -webkit-transform: translateX(21px) rotate(36deg); + transform: translateX(21px) rotate(36deg); +} +.charsheet .spoke-45 { + -webkit-transform: translateX(21px) rotate(45deg); + transform: translateX(21px) rotate(45deg); +} +.charsheet .spoke-60 { + -webkit-transform: translateX(21px) rotate(60deg); + transform: translateX(21px) rotate(60deg); +} +.charsheet .spoke-72 { + -webkit-transform: translateX(21px) rotate(72deg); + transform: translateX(21px) rotate(72deg); +} +.charsheet .spoke-90 { + -webkit-transform: translateX(21px) rotate(90deg); + transform: translateX(21px) rotate(90deg); +} +.charsheet .spoke-108 { + -webkit-transform: translateX(21px) rotate(108deg); + transform: translateX(21px) rotate(108deg); +} +.charsheet .spoke-120 { + -webkit-transform: translateX(21px) rotate(120deg); + transform: translateX(21px) rotate(120deg); +} +.charsheet .spoke-135 { + -webkit-transform: translateX(21px) rotate(135deg); + transform: translateX(21px) rotate(135deg); +} +.charsheet .spoke-144 { + -webkit-transform: translateX(21px) rotate(144deg); + transform: translateX(21px) rotate(144deg); +} +.charsheet .spoke-150 { + -webkit-transform: translateX(21px) rotate(150deg); + transform: translateX(21px) rotate(150deg); +} +.charsheet .size-choice { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + height: 45px; + margin: 2px 0; + width: 44px; + line-height: 12px; + font-size: 13px; + font-family: "Times New Roman", Times, serif; + -ms-flex-line-pack: space-evenly; + align-content: space-evenly; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.clocks-only[value="0"] ~ .charsheet .container .type-faction .clocks .repcontainer { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); +} +.clocks-only[value="1"] ~ .charsheet .container .type-faction .clocks .repcontainer { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); +} +.charsheet .clocks-only[value="1"] ~ .container .type-faction { + grid: auto/auto; +} +.charsheet .clocks-only[value="1"] ~ .container .type-faction .factiontitle, .charsheet .clocks-only[value="1"] ~ .container .type-faction .factions, .charsheet .clocks-only[value="1"] ~ .container .type-faction .notes { + display: none; +} +.charsheet .size[value="4"] ~ .clock-container input:not(.zero) { + height: 20px; + width: 20px; +} +.charsheet .size[value="4"] ~ .clock-container input[value="1"] { + margin-left: 20px; +} +.charsheet .size[value="4"] ~ .clock-container input[value="2"] { + margin: 20px 0 0 20px; +} +.charsheet .size[value="4"] ~ .clock-container input[value="3"] { + margin-top: 20px; +} +.charsheet .size[value="6"] ~ .clock-container input:not(.zero) { + height: 17px; + width: 12px; +} +.charsheet .size[value="6"] ~ .clock-container input[value="1"] { + margin-left: 21px; + -webkit-transform: rotate(30deg); + transform: rotate(30deg); +} +.charsheet .size[value="6"] ~ .clock-container input[value="2"] { + margin: 12px 0 0 25px; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.charsheet .size[value="6"] ~ .clock-container input[value="3"] { + margin: 22px 0 0 21px; + -webkit-transform: rotate(150deg); + transform: rotate(150deg); +} +.charsheet .size[value="6"] ~ .clock-container input[value="4"] { + margin: 22px 0 0 8px; + -webkit-transform: rotate(210deg); + transform: rotate(210deg); +} +.charsheet .size[value="6"] ~ .clock-container input[value="5"] { + margin: 12px 0 0 1px; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); +} +.charsheet .size[value="6"] ~ .clock-container input[value="6"] { + margin-left: 8px; + -webkit-transform: rotate(330deg); + transform: rotate(330deg); +} +.charsheet .size[value="8"] ~ .clock-container input:not(.zero) { + height: 14px; + width: 10px; +} +.charsheet .size[value="8"] ~ .clock-container input[value="1"] { + margin-left: 20px; + -webkit-transform: rotate(22.5deg); + transform: rotate(22.5deg); +} +.charsheet .size[value="8"] ~ .clock-container input[value="2"] { + margin: 8px 0 0 26px; + -webkit-transform: rotate(67.5deg); + transform: rotate(67.5deg); +} +.charsheet .size[value="8"] ~ .clock-container input[value="3"] { + margin: 18px 0 0 26px; + -webkit-transform: rotate(112.5deg); + transform: rotate(112.5deg); +} +.charsheet .size[value="8"] ~ .clock-container input[value="4"] { + margin: 25px 0 0 20px; + -webkit-transform: rotate(157.5deg); + transform: rotate(157.5deg); +} +.charsheet .size[value="8"] ~ .clock-container input[value="5"] { + margin: 25px 0 0 9px; + -webkit-transform: rotate(202.5deg); + transform: rotate(202.5deg); +} +.charsheet .size[value="8"] ~ .clock-container input[value="6"] { + margin: 18px 0 0 2px; + -webkit-transform: rotate(247.5deg); + transform: rotate(247.5deg); +} +.charsheet .size[value="8"] ~ .clock-container input[value="7"] { + margin: 8px 0 0 2px; + -webkit-transform: rotate(292.5deg); + transform: rotate(292.5deg); +} +.charsheet .size[value="8"] ~ .clock-container input[value="8"] { + margin-left: 9px; + -webkit-transform: rotate(337.5deg); + transform: rotate(337.5deg); +} +.charsheet .size[value="10"] ~ .clock-container input:not(.zero) { + height: 14px; + width: 9px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="1"] { + -webkit-transform: rotate(18deg); + transform: rotate(18deg); + margin-left: 20px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="2"] { + -webkit-transform: rotate(54deg); + transform: rotate(54deg); + margin: 5px 0 0 27px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="3"] { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + margin: 13px 0 0 30px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="4"] { + -webkit-transform: rotate(126deg); + transform: rotate(126deg); + margin: 21px 0 0 27px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="5"] { + -webkit-transform: rotate(162deg); + transform: rotate(162deg); + margin: 26px 0 0 20px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="6"] { + -webkit-transform: rotate(198deg); + transform: rotate(198deg); + margin: 26px 0 0 12px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="7"] { + -webkit-transform: rotate(234deg); + transform: rotate(234deg); + margin: 21px 0 0 5px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="8"] { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + margin: 13px 0 0 1px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="9"] { + -webkit-transform: rotate(306deg); + transform: rotate(306deg); + margin: 5px 0 0 5px; +} +.charsheet .size[value="10"] ~ .clock-container input[value="10"] { + -webkit-transform: rotate(342deg); + transform: rotate(342deg); + margin-left: 12px; +} +.charsheet .size[value="12"] ~ .clock-container input:not(.zero) { + height: 12px; + width: 8px; +} +.charsheet .size[value="12"] ~ .clock-container input[value="1"] { + margin-left: 20px; + -webkit-transform: rotate(15deg); + transform: rotate(15deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="2"] { + margin: 4px 0 0 26px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="3"] { + margin: 10px 0 0 29px; + -webkit-transform: rotate(75deg); + transform: rotate(75deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="4"] { + margin: 18px 0 0 29px; + -webkit-transform: rotate(105deg); + transform: rotate(105deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="5"] { + margin: 24px 0 0 26px; + -webkit-transform: rotate(135deg); + transform: rotate(135deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="6"] { + margin: 28px 0 0 20px; + -webkit-transform: rotate(165deg); + transform: rotate(165deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="7"] { + margin: 28px 0 0 12px; + -webkit-transform: rotate(195deg); + transform: rotate(195deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="8"] { + margin: 24px 0 0 6px; + -webkit-transform: rotate(225deg); + transform: rotate(225deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="9"] { + margin: 18px 0 0 3px; + -webkit-transform: rotate(255deg); + transform: rotate(255deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="10"] { + margin: 10px 0 0 3px; + -webkit-transform: rotate(295deg); + transform: rotate(295deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="11"] { + margin: 4px 0 0 6px; + -webkit-transform: rotate(315deg); + transform: rotate(315deg); +} +.charsheet .size[value="12"] ~ .clock-container input[value="12"] { + margin-left: 12px; + -webkit-transform: rotate(345deg); + transform: rotate(345deg); +} +.charsheet .size[value="4"] ~ .clock-container .sheet-4clock, +.charsheet .size[value="6"] ~ .clock-container .sheet-6clock, +.charsheet .size[value="8"] ~ .clock-container .sheet-8clock, +.charsheet .size[value="10"] ~ .clock-container .sheet-10clock, +.charsheet .size[value="12"] ~ .clock-container .sheet-12clock { + display: block; +} +.charsheet .size:not([value=""]) ~ .size-choice, +.charsheet .clocks .size[value=""] ~ .broadcast-button, +.charsheet .size[value=""] ~ .clock-container { + display: none; +} +.charsheet .clock-container .input-progress[value="0"]:checked ~ .clock { + background: var(--blades-whitetext); +} +.charsheet .size[value="4"] ~ .clock-container .input-progress[value="1"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, red), color-stop(50%, var(--blades-whitetext))); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(180deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="4"] ~ .clock-container .input-progress[value="2"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="4"] ~ .clock-container .input-progress[value="3"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, red)), -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="4"] ~ .clock-container .input-progress[value="4"]:checked ~ .clock { + background: red; +} +.charsheet .size[value="6"] ~ .clock-container .input-progress[value="1"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(150deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="6"] ~ .clock-container .input-progress[value="2"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(210deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="6"] ~ .clock-container .input-progress[value="3"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="6"] ~ .clock-container .input-progress[value="4"]:checked ~ .clock { + background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="6"] ~ .clock-container .input-progress[value="5"]:checked ~ .clock { + background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="6"] ~ .clock-container .input-progress[value="6"]:checked ~ .clock { + background: red; +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="1"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(135deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="2"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, red), color-stop(50%, var(--blades-whitetext))); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(180deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="3"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(225deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="4"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="5"]:checked ~ .clock { + background-image: linear-gradient(135deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="6"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, red)), -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="7"]:checked ~ .clock { + background-image: linear-gradient(225deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="8"] ~ .clock-container .input-progress[value="8"]:checked ~ .clock { + background: red; +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="1"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(126deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="2"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(162deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="3"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(198deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="4"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(234deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="5"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="6"]:checked ~ .clock { + background-image: linear-gradient(126deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="7"]:checked ~ .clock { + background-image: linear-gradient(162deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="8"]:checked ~ .clock { + background-image: linear-gradient(198deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="9"]:checked ~ .clock { + background-image: linear-gradient(234deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="10"] ~ .clock-container .input-progress[value="10"]:checked ~ .clock { + background: red; +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="1"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(120deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="2"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(150deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="3"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, red), color-stop(50%, var(--blades-whitetext))); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(180deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="4"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(210deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="5"]:checked ~ .clock { + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(240deg, red 50%, var(--blades-whitetext) 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="6"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="7"]:checked ~ .clock { + background-image: linear-gradient(120deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="8"]:checked ~ .clock { + background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="9"]:checked ~ .clock { + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, red)), -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="10"]:checked ~ .clock { + background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="11"]:checked ~ .clock { + background-image: linear-gradient(240deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); +} +.charsheet .size[value="12"] ~ .clock-container .input-progress[value="12"]:checked ~ .clock { + background: red; +} + +/* TEXT INPUTS FOR TRAUMA AND CLOCKS */ +.charsheet .text-button { + font-weight: bold; +} +.charsheet .text-button input:checked + span { + color: red; +} +.charsheet .size-choice > .text-button { + height: 17px; + padding: 3px; + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + margin: auto; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +/* TEETH */ +.charsheet input.stresstooth, +.charsheet input.xptooth, +.charsheet input.holdtooth, +.charsheet .stresstooth + span, +.charsheet .xptooth + span, +.charsheet .holdtooth + span { + height: 25px; +} +.charsheet input.regulartooth, +.charsheet .regulartooth + span { + height: 13px; +} +.charsheet input.tooth { + width: 12px; + margin-right: -12px; +} +.charsheet input.tooth:last-of-type { + width: 8px; + margin-right: -8px; +} +.charsheet .tooth + span { + width: 8px; + background-size: cover; + background-repeat: no-repeat; +} +.charsheet .tooth + span:last-child { + margin-right: 0 !important; +} +.charsheet .tooth:hover + span { + opacity: 0.7; +} +.charsheet .xptooth + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-red.png"); + margin-right: 4px; +} +.charsheet .tooth:checked ~ .xptooth + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/xptooth-white.png"); +} +.charsheet .stresstooth[type=radio] + span, +.charsheet .stresstooth[type=checkbox]:checked + span, +.charsheet .holdtooth:checked + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-red.png"); +} +.charsheet .stresstooth[type=checkbox] + span, +.charsheet .tooth:checked ~ .stresstooth[type=radio] + span, +.charsheet .holdtooth + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-white.png"); +} +.charsheet .regulartooth + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/shorttooth-red.png"); +} +.charsheet .tooth:checked ~ .regulartooth + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/shorttooth-grey.png"); +} +.charsheet input.zero { + width: 13px; + height: 13px; + margin-right: -13px; + vertical-align: top; +} +.charsheet .zero + span { + height: 11px; + width: 11px; + margin-top: 1px; + margin-right: 2px; + vertical-align: top; + border: 1px solid var(--blades-blacktext); + background: var(--blades-whitetext); + border-radius: 50%; + position: relative; +} +.charsheet .zero + span::before, .charsheet .zero + span::after { + position: absolute; + width: 1px; + content: ""; + left: 0; + background: var(--blades-blacktext); + height: 11px; +} +.charsheet .zero + span::after { + -webkit-transform: translate(4px, -1px) rotate(135deg); + transform: translate(4px, -1px) rotate(135deg); +} +.charsheet .zero + span::before { + -webkit-transform: translate(4px, -1px) rotate(45deg); + transform: translate(4px, -1px) rotate(45deg); +} +.charsheet .zero:checked + span { + visibility: hidden; +} +.charsheet .coin .zero + span { + position: relative; + bottom: 1px; + margin-right: auto; +} +.charsheet .stash input.zero, .charsheet .stash .zero + span { + position: absolute; + left: -3px; + top: 3px; +} +.charsheet .crewcoin input.zero, .charsheet .crewcoin .zero + span { + position: absolute; + left: -9px; + top: 3px; +} +.charsheet .stress2 input.zero, .charsheet .stress2 .zero + span, .charsheet .rep2 input.zero, .charsheet .rep2 .zero + span, .charsheet .heat2 input.zero, .charsheet .heat2 .zero + span { + position: absolute; + left: -13px; + top: 13px; +} + +/* Darkmode adjustments */ +.sheet-darkmode .charsheet .xptooth + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/xptooth-red.png"); +} +.sheet-darkmode .charsheet .tooth:checked ~ .xptooth + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/xptooth-white.png"); +} +.sheet-darkmode .charsheet .stresstooth[type=radio] + span, +.sheet-darkmode .charsheet .stresstooth[type=checkbox]:checked + span, +.sheet-darkmode .charsheet .holdtooth:checked + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/stresstooth-red.png"); +} +.sheet-darkmode .charsheet .stresstooth[type=checkbox] + span, +.sheet-darkmode .charsheet .tooth:checked ~ .stresstooth[type=radio] + span, +.sheet-darkmode .charsheet .holdtooth + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/stresstooth-white.png"); +} +.sheet-darkmode .charsheet .regulartooth + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/shorttooth-red.png"); +} +.sheet-darkmode .charsheet .tooth:checked ~ .regulartooth + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/shorttooth-grey.png"); +} +.sheet-darkmode .charsheet .turf-input[value="1"] ~ input[type=radio].turf1 + span, +.sheet-darkmode .charsheet .turf-input[value="2"] ~ input[type=radio].turf2 + span, +.sheet-darkmode .charsheet .turf-input[value="3"] ~ input[type=radio].turf3 + span, +.sheet-darkmode .charsheet .turf-input[value="4"] ~ input[type=radio].turf4 + span, +.sheet-darkmode .charsheet .turf-input[value="5"] ~ input[type=radio].turf5 + span, +.sheet-darkmode .charsheet .turf-input[value="6"] ~ input[type=radio].turf6 + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/stresstooth-black.png"); +} +.sheet-darkmode .charsheet .tooth:checked ~ .stresstooth.turf6 + span { + background-image: url("https://raw.githubusercontent.com/fredhicks/ehp-roll20/master/art/Blades%20in%20the%20Dark/Assets/darkmode/teeth/stresstooth-halfgrey.png"); +} + +/* TURF RADIOS */ +.charsheet { + /* SPECIAL ABILITIES*/ +} +.charsheet .turfbox input[type=radio] { + height: 12px; + width: 8.3333333333%; +} +.charsheet .turf-input[value="1"] ~ input[type=radio].turf1 + span, +.charsheet .turf-input[value="2"] ~ input[type=radio].turf2 + span, +.charsheet .turf-input[value="3"] ~ input[type=radio].turf3 + span, +.charsheet .turf-input[value="4"] ~ input[type=radio].turf4 + span, +.charsheet .turf-input[value="5"] ~ input[type=radio].turf5 + span, +.charsheet .turf-input[value="6"] ~ input[type=radio].turf6 + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-black.png"); +} +.charsheet .tooth:checked ~ .stresstooth.turf6 + span { + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/teeth/stresstooth-halfgrey.png"); +} +.charsheet .show-frienddesc[value="0"] ~ .container .friends .expand, .charsheet .show-frienddesc[value="0"] ~ .container .friends .expand + span, .charsheet .show-frienddesc[value="0"] ~ .container .friends .description, .charsheet .show-frienddesc[value="0"] ~ .container .contacts .expand, .charsheet .show-frienddesc[value="0"] ~ .container .contacts .expand + span, .charsheet .show-frienddesc[value="0"] ~ .container .contacts .description { + display: none; +} +.charsheet .friends input.expand, .charsheet .contacts input.expand { + top: 11px; +} +.charsheet .friends .expand + span, .charsheet .contacts .expand + span { + top: 8px; +} +.charsheet .friends input.expand, .charsheet .friends .expand + span, .charsheet .contacts input.expand, .charsheet .contacts .expand + span { + right: 3px; +} +.charsheet .friends .expand:not(:checked) + span::before, .charsheet .contacts .expand:not(:checked) + span::before { + content: "◀"; +} +.charsheet .friends .expand:checked + span::before, .charsheet .contacts .expand:checked + span::before { + content: "▼"; +} +.charsheet .friends .expand:not(:checked) ~ .description, .charsheet .contacts .expand:not(:checked) ~ .description { + height: 0px !important; + border: none; + min-height: 0; + padding: 0; +} +.charsheet .friends .description, .charsheet .contacts .description { + font-size: 11px; + padding: 2px 3px; + line-height: 14px; + height: 46px; + min-height: 18px; + border-bottom: 1px solid #b4b4b4; +} +.charsheet .specialability, +.charsheet .friend-contact { + border-bottom: 1px solid var(--blades-darkgrey); + width: 100%; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; +} +.charsheet .specialability { + padding: 4px; +} +.charsheet .friend-contact { + padding: 6px 4px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.charsheet .abilityname { + width: calc(28% - 22px); + font-size: 13px; + min-height: 17px; + margin: 0 auto; + line-height: 17px; + padding: 0 1px; +} +.charsheet .abilitydesc { + width: 72%; + min-height: 32px; + font-size: 12px; + line-height: 14px; + padding: 2px 1px; +} + +/* FRIENDS/CONTACTS */ +.charsheet .friend-contact .auto-expand { + font-size: 12px; + color: var(--blades-lighterblack); + min-height: 20px; + line-height: 16px; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + padding: 2px 0 2px 3px; +} + +/* HARM */ +.charsheet .harm-coin { + grid: auto auto/63% 16% 21%; +} +.charsheet .harm { + position: relative; + -ms-grid-row: 1; + -ms-grid-row-span: 2; + grid-row: 1/3; +} +.charsheet .harmbody { + display: -ms-grid; + display: grid; + grid: 52px/12px auto auto 59px; + font-weight: 800; + text-transform: uppercase; + text-align: center; +} +.charsheet .harmbody div { + background: #d6d8d9; + border-bottom: 1px solid var(--blades-blacktext); +} +.charsheet .harmbody .harmeffect { + width: 59px; + color: var(--blades-lighterblack); + font-size: 10px; + letter-spacing: 1px; + line-height: 1.4; +} +.charsheet .harmbody .harmnumber { + line-height: 1; + font-size: 13px; + color: var(--blades-lightblack); +} +.charsheet .harmbody .twocols { + -ms-grid-column-span: 2; + grid-column: span 2; +} +.charsheet .harmbody textarea { + font-size: 12px; + padding: 10px 4px 3px; + color: var(--blades-redtext); + overflow: hidden; + height: 52px; + resize: none; + line-height: 16px; + text-align: center; + border-bottom: 1px solid var(--blades-blacktext); +} +.charsheet .harmbody textarea + textarea { + border-left: 1px solid var(--blades-lightest); +} + +/* HEALING AND ARMOR */ +.charsheet .armor .blackheader, .charsheet .healing .blackheader { + text-align: center; + padding: 1px 0 0; +} +.charsheet .healing { + position: relative; +} +.charsheet .healing .healing-progress { + line-height: 14px; + text-align: center; + font-style: italic; + font-size: 9px; +} +.charsheet .healing .clock-container { + margin: 0 auto; +} +.charsheet .armor label { + margin: 3px 0 3px 10px; + height: 18px; + font-size: 11px; + text-align: center; + line-height: 18px; +} +.charsheet .armor .sheet-label { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} +.charsheet .armor input:checked ~ span { + color: red; +} +.charsheet .armor .checkbox + span { + border: 1px solid var(--blades-blacktext); + margin: 3px; + -webkit-box-ordinal-group: 3; + -ms-flex-order: 2; + order: 2; +} + +/* COIN */ +.charsheet .coin-and-stash { + width: 96%; + margin-left: 4%; + -ms-grid-column-span: 2; + grid-column: span 2; +} +.charsheet .coinrow .sheet-label { + font-size: 11px; + margin-right: auto; +} +.charsheet .coin { + border-bottom: 1px solid var(--blades-greyborder); + border-right: 1px solid var(--blades-greyborder); + width: 70%; + height: 19px; + padding: 1px 3px 0 0; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.charsheet .stashbutton-holder { + border-top: 1px solid var(--blades-greyborder); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + width: 30%; + height: 19px; + padding-bottom: 1px; +} + +/* STASH */ +.charsheet .stash { + padding: 4px 0 0 10px; + line-height: 18px; + margin-bottom: -5px; + position: relative; +} + +/* CREW COIN */ +.charsheet .crewcoin-coins { + padding: 4px 0 0 3px; + position: relative; +} +.charsheet .crewcoin-desc { + font-size: 10px; + line-height: 14px; + padding-left: 3px; + font-style: italic; +} +.charsheet .crewcoinbar { + border-left: 1px solid var(--blades-lighter); + height: 15px; + width: 3px; + margin: -1px auto 0; +} + +/* LEFT-FILLED RADIO BOXES */ +.charsheet .crewcoin input.radiobox { + width: 12px; + height: 12px; + margin-right: -12px; +} +.charsheet .crewcoin .radiobox + span { + width: 11px; + height: 11px; + margin-right: auto; +} +.charsheet .crewcoin input:checked ~ .radiobox.vaultcoin + span { + border-color: var(--blades-lighter); +} +.charsheet .coin-and-stash input.radiobox { + width: 13px; + height: 13px; + vertical-align: top; + margin-right: -13px; +} +.charsheet .coin-and-stash .radiobox + span { + width: 12px; + height: 12px; + vertical-align: top; +} +.charsheet .coinrow .radiobox + span { + margin-right: auto; +} +.charsheet .radiobox:hover + span { + opacity: 0.7; +} +.charsheet .radiobox:last-of-type + span { + margin-right: 0; +} +.charsheet .coin .radiobox + span, .charsheet .crewcoin .radiobox + span { + background: red; + border: 1px solid var(--blades-blacktext); +} +.charsheet .coin input:checked ~ .radiobox + span, .charsheet .crewcoin input:checked ~ .radiobox + span { + background: var(--blades-whitetext); +} +.charsheet .stash .radiobox + span { + background: var(--blades-blacktext); + margin-right: calc((100% - 126px) / 9); +} +.charsheet .stash input:checked ~ .radiobox + span { + background: var(--blades-lighter); +} +.charsheet .stash input.radiobox:nth-of-type(10n+1) { + margin: -2px -17px 0 3px; + width: 15px; + height: 15px; +} +.charsheet .stash .radiobox:nth-of-type(10n+1) + span { + width: 14px; + height: 14px; + border: 1px solid var(--blades-blacktext); + margin-left: 3px; + margin-right: 0; + position: relative; + top: -2px; +} + +/* HUNTING GROUNDS */ +.charsheet .hunting-grounds .plainheader { + min-height: 20px; + line-height: 18px; +} +.charsheet .hunting-grounds .description { + font-size: 12px; + min-height: 32px; + line-height: 16px; +} + +/* BONUS DIE SECTION */ +.charsheet .bonusdie .sheet-label { + font-size: 12px; +} +.charsheet .bonusdieplus { + width: 10%; + background: var(--blades-blacktext); + color: var(--blades-whitetext); + font-size: 13px; + line-height: 1; + font-weight: bold; +} +.charsheet .bonusdietext { + background: var(--blades-lightest); + width: 90%; + padding: 3px; + font-size: 11px; + line-height: 14px; + text-align: center; +} + +/* REPEATING SECTION CONTROLS */ +.charsheet .repcontrol { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.charsheet .repcontrol .repcontrol_edit { + margin-left: auto; + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} +.charsheet .repcontrol button { + background: transparent; + color: var(--blades-lightblack); + border-radius: 0; + border-color: var(--blades-darkgrey); + -webkit-transition: all 0.2s; + transition: all 0.2s; + font-family: pictos; + font-size: 0; + font-weight: bold; + padding: 5px 3px 2px; + line-height: 8px; +} +.charsheet .repcontrol button:hover { + color: var(--blades-blacktext); + border-color: var(--blades-blacktext); + background: var(--blades-lighter); +} +.charsheet .repcontrol button.repcontrol_edit::after { + content: "("; +} +.charsheet .repcontrol button.repcontrol_add::after { + content: "&"; +} +.charsheet .repcontrol button.repcontrol_edit::after, .charsheet .repcontrol button.repcontrol_add::after { + font-size: 12px; +} +.charsheet .repcontainer.editmode + .repcontrol button.repcontrol_edit::after { + content: ")"; +} +.charsheet .free-repcontrol .repcontrol { + margin-top: 3px; +} +.charsheet .itemcontrol { + z-index: 20; +} +.charsheet .itemholder .itemcontrol .btn { + padding: 0px 7px; + line-height: 16px; +} +.charsheet .factions .itemcontrol .btn { + padding: 1px 7px; +} + +/* STRESS, REP, et cetera */ +.charsheet { + /* small fixes */ +} +.charsheet .rep-and-hold, .charsheet .heat-and-vault { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.charsheet .hold { + width: 53%; +} +.charsheet .stress, .charsheet .rep, .charsheet .hold, .charsheet .heat { + height: 25px; +} +.charsheet .stress1 { + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; +} +.charsheet .stress2 { + -webkit-box-flex: 2; + -ms-flex: 2 1 136px; + flex: 2 1 136px; + position: relative; +} +.charsheet .stress3 { + -webkit-box-flex: 1; + -ms-flex: 1 0 68px; + flex: 1 0 68px; + text-align: center; +} +.charsheet .stress4 { + -webkit-box-flex: 2; + -ms-flex: 2 0 217px; + flex: 2 0 217px; + line-height: 13px; + font-size: 9px; + padding: 1px 0 0 2px; + text-transform: uppercase; +} +.charsheet .stress4 div { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.charsheet .stress4 .input:not([value=normal]) ~ .normal, +.charsheet .stress4 .input:not([value=ghost]) ~ .ghost, +.charsheet .stress4 .input:not([value=hull]) ~ .hull, +.charsheet .stress4 .input:not([value=vampire]) ~ .vampire { + display: none; +} +.charsheet .stress4 .ghost, .charsheet .stress4 .hull { + letter-spacing: 1px; +} +.charsheet .traumaholder, .charsheet .wantedholder { + height: 13px; + padding-left: 2px; +} +.charsheet .rep1 { + width: 33px; +} +.charsheet .rep2 { + width: 134px; + position: relative; +} +.charsheet .turfbox { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: absolute; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-flow: row-reverse; + flex-flow: row-reverse; + z-index: 2; + width: 100%; +} +.charsheet .turfzero-holder { + margin-left: 2px; +} +.charsheet .hold > div, +.charsheet .hold > label, +.charsheet .heat > div, +.charsheet .rep > div, +.charsheet .crewcoin2 { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; +} +.charsheet .heat2 { + width: 107px; + position: relative; +} +.charsheet .crewcoin1 { + width: 26%; +} +.charsheet .regulartooth + span, +.charsheet .rep .tooth + span, +.charsheet .heat2 .tooth + span, +.charsheet .stress2 .tooth + span { + margin-right: auto; +} +.charsheet .extra-teeth:checked + .tooth + span { + margin-right: 0; +} +.charsheet .extra-teeth:checked + .tooth ~ .tooth, .charsheet .extra-teeth:checked + .tooth + span ~ span { + display: none; +} +.charsheet .vampirexp[value="1"] ~ .xptooth + span { + margin-right: 2px; +} +.charsheet .xpholder .vampirexp[value="0"] ~ .tooth[value="8"] + span, +.charsheet .attribute-xp-box .vampirexp[value="0"] ~ .tooth[value="6"] + span { + margin-right: 0; +} +.charsheet .rep input.tooth { + width: 11px; + margin-right: -11px; +} + +/* NOTES */ +.charsheet .notes { + margin-left: 1%; + font-family: "Shadows Into Light", cursive; + color: var(--blades-redtext); + font-size: 20px; + width: 98%; + background: linear-gradient(transparent 26px, #a7a7a7 1px) 0 0/100% 27px; + line-height: 27px; + height: 378px; + min-height: 378px; } /* ROLL BUTTONS */ -button[type=roll].sheet-rollbutton { - display: flex; - border: none; - margin: 0; - padding: 0; +.charsheet button[type=roll].rollbutton { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + border: none; + margin: 0; + padding: 0; } - -.sheet-attribute-title button[type=roll].sheet-rollbutton { - max-width: calc(100% - 97px); - line-height: inherit; - color: inherit; - font-size: 13px; +.charsheet .attribute-title button[type=roll].rollbutton { + max-width: calc(100% - 97px); + line-height: inherit; + color: inherit; + font-size: 13px; } - -.sheet-action button[type=roll].sheet-rollbutton { - letter-spacing: 1px; - line-height: 13px; - flex: 0 0 86px; - font-size: 13px; +.charsheet .action button[type=roll].rollbutton { + letter-spacing: 1px; + line-height: 13px; + -webkit-box-flex: 0; + -ms-flex: 0 0 86px; + flex: 0 0 86px; + font-size: 13px; } - -.sheet-coinrow button[type=roll].sheet-rollbutton { - font-size: 11px; - color: #777; +.charsheet .coinrow button[type=roll].rollbutton { + font-size: 11px; + color: var(--blades-lightblack); } - -.sheet-blackheader button[type=roll].sheet-rollbutton { - margin: auto; +.charsheet .blackheader button[type=roll].rollbutton { + margin: auto; } - -button[type=roll].sheet-borderbutton { - color: #777; - font-size: 13px; - border-color: #b4b4b4; +.charsheet button[type=roll].borderbutton { + color: var(--blades-lightblack); + font-size: 13px; + border-color: var(--blades-darkgrey); } - -button[type=roll].sheet-vicebutton { - float: right; - margin: 5px 3px -5px auto; - line-height: 13px; - padding: 4px; +.charsheet button[type=roll].vicebutton { + float: right; + margin: 5px 3px -5px auto; + line-height: 13px; + padding: 4px; } - -button[type=roll].sheet-fortunebutton { - width: 100%; - height: 30px; - margin: 0; +.charsheet button[type=roll].fortunebutton { + width: 100%; + height: 30px; + margin: 0; } - -.sheet-type-faction button[type=roll].sheet-fortunebutton { - width: 100px; +.charsheet .type-faction button[type=roll].fortunebutton { + width: 100px; } - -button[type=roll].sheet-engagementbutton { - width: calc(100% - 20px); - padding: 2px 5px; - height: 30px; - margin: 10px 10px 0; +.charsheet button[type=roll].engagementbutton { + width: calc(100% - 20px); + padding: 2px 5px; + height: 30px; + margin: 10px 10px 0; } - -button[type=roll].sheet-rollbutton:hover { - color: red; +.charsheet button[type=roll].rollbutton:hover { + color: red; } - -button[type=roll].sheet-borderbutton:hover { - color: black; - border-color: black; +.charsheet button[type=roll].borderbutton:hover { + color: var(--blades-blacktext); + border-color: var(--blades-blacktext); } /* CHECKBOXES */ -.sheet-checkbox { - margin-right: -12px; +.charsheet { + /* Change text colour when boxes are checked*/ + /* specific adjustments */ + /* Fake radios */ } - -input.sheet-checkbox, .sheet-checkbox + span { - height: 12px; - width: 12px; - flex: 0 0 auto; +.charsheet .checkbox { + margin-right: -12px; } - -.sheet-checkbox + span { - border: 1px solid #8c8c8c; +.charsheet input.checkbox, .charsheet .checkbox + span { + height: 12px; + width: 12px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } - -.sheet-checkbox:checked + span { - background: red; +.charsheet .checkbox + span { + border: 1px solid var(--blades-greyborder); } - -.sheet-checkbox:hover + span { - opacity: 0.7; +.charsheet .checkbox:checked + span { + background: red; } - -.sheet-squarebox + span { - background: transparent; - margin-right: 3px; +.charsheet .checkbox:hover + span { + opacity: 0.7; } - -.sheet-circlebox + span { - border-radius: 50%; - background: white; +.charsheet .squarebox + span { + background: transparent; + margin-right: 3px; } - -input.sheet-checkbox.sheet-squarebox-small, .sheet-checkbox.sheet-squarebox-small + span { - height: 9px; - width: 9px; +.charsheet .circlebox + span { + border-radius: 50%; + background: var(--blades-whitetext); } - -.sheet-checkbox.sheet-squarebox-small:checked + span { - background: black; +.charsheet input.checkbox.squarebox-small, .charsheet .checkbox.squarebox-small + span { + height: 9px; + width: 9px; } - -.sheet-claimbridge { - position: relative; +.charsheet .checkbox.squarebox-small:checked + span { + background: var(--blades-blacktext); } - -.sheet-claimbridge input, .sheet-claimbridge span { - width: 100%; - height: 100%; +.charsheet .claimbridge { + position: relative; } - -.sheet-claimbridge input:checked + span { - background: #d8d8d8; +.charsheet .claimbridge input, .charsheet .claimbridge span { + width: 100%; + height: 100%; } - -/* Change text colour when boxes are checked*/ -.sheet-specialability .sheet-checkbox:checked ~ .sheet-abilityname, -.sheet-item .sheet-checkbox:checked ~ .sheet-itemname, -.sheet-friend .sheet-friendstate[value="up"] ~ .sheet-auto-expand { - color: red; +.charsheet .claimbridge input:checked + span { + background: var(--blades-lightest); } - -.sheet-friend-contact .sheet-friendstate:not([value="0"]) ~ .sheet-auto-expand { - font-weight: bold; +.charsheet .specialability .checkbox:checked ~ .abilityname, +.charsheet .item .checkbox:checked ~ .itemname, +.charsheet .friend .friendstate[value=up] ~ .auto-expand { + color: red; } - -.sheet-friend .sheet-friendstate[value="down"] ~ .sheet-auto-expand, -.sheet-contact .sheet-friendstate[value="1"] ~ .sheet-auto-expand { - color: #333; +.charsheet .friend-contact .friendstate:not([value="0"]) ~ .auto-expand { + font-weight: bold; } - -/* specific adjustments */ -.sheet-specialability .sheet-checkbox, -.sheet-specialability .sheet-checkbox + span { - margin-top: 3px; +.charsheet .friend .friendstate[value=down] ~ .auto-expand, +.charsheet .contact .friendstate[value="1"] ~ .auto-expand { + color: var(--blades-fontblack); } - -.sheet-actions input.sheet-checkbox { - height: 20px; - width: 16px; - margin-right: -14px; +.charsheet .specialability .checkbox, +.charsheet .specialability .checkbox + span { + margin-top: 3px; } - -.sheet-actions .sheet-checkbox + span { - height: 11px; - width: 11px; - border: none; - margin-right: calc(7px + (100% - 173px)/8); +.charsheet .actions input.checkbox { + height: 20px; + width: 16px; + margin-right: -14px; } - -.sheet-action .sheet-checkbox + span:first-of-type { - margin-right: 6px; +.charsheet .actions .checkbox + span { + height: 11px; + width: 11px; + border: none; + margin-right: calc(7px + (100% - 173px) / 8); } - -.sheet-action .sheet-darktalent[value="1"] ~ .sheet-checkbox + span:first-of-type { - margin-right: 4px; +.charsheet .action .checkbox + span:first-of-type { + margin-right: 6px; } - -.sheet-action .sheet-darktalent[value="1"] ~ .sheet-checkbox + span:not(:first-of-type) { - margin-right: calc(3px + (100% - 171px)/10); +.charsheet .action .darktalent[value="1"] ~ .checkbox + span:first-of-type { + margin-right: 4px; } - -.sheet-action .sheet-darktalent[value="1"] ~ .sheet-checkbox + span:last-of-type { - margin-right: calc(4px + (100% - 171px)/10); +.charsheet .action .darktalent[value="1"] ~ .checkbox + span:not(:first-of-type) { + margin-right: calc(3px + (100% - 171px) / 10); } - -/* Fake radios */ -.sheet-checkbox.sheet-fakeradio + span { - background: red; +.charsheet .action .darktalent[value="1"] ~ .checkbox + span:last-of-type { + margin-right: calc(4px + (100% - 171px) / 10); } - -.sheet-action .sheet-fakeradio:checked ~ .sheet-fakeradio + span { - background: #c7c7c7; +.charsheet .checkbox.fakeradio + span { + background: red; } - -.sheet-tier .sheet-fakeradio:checked ~ .sheet-fakeradio + span { - background: white; +.charsheet .action .fakeradio:checked ~ .fakeradio + span { + background: var(--blades-lighter); +} +.charsheet .tier .fakeradio:checked ~ .fakeradio + span { + background: var(--blades-whitetext); } /* HIDER */ -.sheet-darktalent[value="0"] ~ input:last-of-type, -.sheet-darktalent[value="0"] ~ input:last-of-type + span { - display: none; +.charsheet .darktalent[value="0"] ~ input:last-of-type, +.charsheet .darktalent[value="0"] ~ input:last-of-type + span { + display: none; } /* Friend triangles */ -.sheet-friend-contact .sheet-checkbox + span { - width: 0; - height: 0; - background: transparent; - border-color: transparent; +.charsheet .friend-contact .checkbox + span { + width: 0; + height: 0; + background: transparent; + border-color: transparent; } - -.sheet-friend-contact label { - width: 12px; - height: 12px; - position: relative; +.charsheet .friend-contact label { + width: 12px; + height: 12px; + position: relative; } - -.sheet-friend label.sheet-up { - margin-right: 1px; - top: -1px; +.charsheet .friend label.up { + margin-right: 1px; + top: -1px; } - -.sheet-friend label.sheet-up .sheet-checkbox + span { - border-width: 0 5px 10px; - border-bottom-color: white; +.charsheet .friend label.up .checkbox + span { + border-width: 0 5px 10px; + border-bottom-color: var(--blades-whitetext); } - -.sheet-friend label.sheet-up .sheet-checkbox:checked + span { - border-bottom-color: red; +.charsheet .friend label.up .checkbox:checked + span { + border-bottom-color: red; } - -.sheet-friend label.sheet-down { - top: 5px; +.charsheet .friend label.down { + top: 5px; } - -.sheet-friend label.sheet-down .sheet-checkbox + span { - border-width: 10px 5px 0; - border-top-color: white; +.charsheet .friend label.down .checkbox + span { + border-width: 10px 5px 0; + border-top-color: var(--blades-whitetext); } - -.sheet-friend label.sheet-down .sheet-checkbox:checked + span { - border-top-color: black; +.charsheet .friend label.down .checkbox:checked + span { + border-top-color: var(--blades-blacktext); } - -.sheet-contact label { - top: 1px; +.charsheet .contact label { + top: 1px; } - -.sheet-contact label .sheet-checkbox + span { - border-width: 5px 0 5px 10px; - border-left-color: white; +.charsheet .contact label .checkbox + span { + border-width: 5px 0 5px 10px; + border-left-color: var(--blades-whitetext); } - -.sheet-contact label .sheet-checkbox:checked + span { - border-left-color: black; +.charsheet .contact label .checkbox:checked + span { + border-left-color: var(--blades-blacktext); } /* ACTION RATINGS */ -.sheet-actioncolumn > div, .sheet-cohortcolumn > div, .sheet-cohorts .repitem:not(:last-child) { - margin-bottom: 10px; +.charsheet .actioncolumn > div, .charsheet .cohortcolumn > div, .charsheet .cohorts .repitem:not(:last-child) { + margin-bottom: 10px; } - -.sheet-attribute-title, -.sheet-cohort-title { - height: 21px; - line-height: 21px; - color: white; - background: black; - padding: 0 3px; - align-items: center; - justify-content: space-between; +.charsheet .attribute-title, +.charsheet .cohort-title { + height: 21px; + line-height: 21px; + color: var(--blades-whitetext); + background: var(--blades-blacktext); + padding: 0 3px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } - -.sheet-attribute-xp-box { - width: 97px; - justify-content: flex-end; - height: 100%; +.charsheet .attribute-xp-box { + width: 97px; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + height: 100%; } - -.sheet-actions { - padding-left: 2px; +.charsheet .actions { + padding-left: 2px; } - -.sheet-action { - height: 22px; - align-items: center; +.charsheet .action { + height: 22px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } - -.sheet-action:first-child { - height: 34px; - padding-top: 12px; +.charsheet .action:first-child { + height: 34px; + padding-top: 12px; } - -.sheet-divider { - margin-right: calc(5px + (100% - 173px)/12); - border-right: 1px solid black; - height: inherit; +.charsheet .divider { + margin-right: calc(5px + (100% - 173px) / 12); + border-right: 1px solid var(--blades-blacktext); + height: inherit; } - -.sheet-darktalent[value="1"] ~ .sheet-divider { - margin-right: calc(3px + (100% - 173px)/15); +.charsheet .darktalent[value="1"] ~ .divider { + margin-right: calc(3px + (100% - 173px) / 15); } - -.sheet-action:first-child .sheet-divider { - position: relative; - top: -6px; +.charsheet .action:first-child .divider { + position: relative; + top: -6px; } /* COHORTS */ -.sheet-cohort-title { - font-size: 11px; +.charsheet .cohort-title { + font-size: 11px; } - -.sheet-cohort-title input[type=text] { - width: calc(100% - 40px); +.charsheet .cohort-title input[type=text] { + width: calc(100% - 40px); } - -.sheet-cohort-info { - background: black; - height: 13px; - font-size: 9px; - color: white; - line-height: 13px; +.charsheet .cohort-info { + background: var(--blades-blacktext); + height: 13px; + font-size: 9px; + color: var(--blades-whitetext); + line-height: 13px; } - -.sheet-cohort-info input[type=text] { - flex: 1 1 0; - padding: 0 3px; +.charsheet .cohort-info input[type=text] { + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + padding: 0 3px; } - -.sheet-cohort-info input[type=number] { - flex: 0 0 auto; - color: inherit; - background: transparent; - border: none; - border-radius: 0; - padding: 0 0 0 4px; - line-height: inherit; - width: 13px; - -moz-appearance: textfield; - font-size: 11px; - font-family: "Times New Roman", Times, serif; +.charsheet .cohort-info input[type=number] { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + color: inherit; + background: transparent; + border: none; + border-radius: 0; + padding: 0 0 0 4px; + line-height: inherit; + width: 13px; + -moz-appearance: textfield; + font-size: 11px; + font-family: "Times New Roman", Times, serif; } - -.sheet-cohort-info input[type=number]::-webkit-outer-spin-button, .sheet-cohort-info input[type=number]::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; +.charsheet .cohort-info input[type=number]::-webkit-outer-spin-button, .charsheet .cohort-info input[type=number]::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; } - -.sheet-cohort-quality-label { - flex: 0 0 auto; +.charsheet .cohort-quality-label { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } - -.sheet-cohort-condition { - justify-content: space-between; +.charsheet .cohort-condition { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } - -.sheet-cohort-condition-name { - font-size: 7.5px; - margin-right: 2px; - --z-index: -1; /* Disabled for dark mode compatibility (text disappears in dark mode if enabled) */ +.charsheet .cohort-condition-name { + font-size: 7.5px; + margin-right: 2px; + z-index: 0; /* Was -1 in legacy version, but that means nothing can be seen in current version */ } - -.sheet-cohort-dropdown { - background: black; - position: relative; - z-index: 1; - width: 41px; - height: 13px; - padding-left: 3px; - flex: 0 0 auto; - overflow: hidden; - transition: all 0.2s; +.charsheet .cohort-dropdown { + background: var(--blades-blacktext); + position: relative; + z-index: 1; + width: 41px; + height: 13px; + padding-left: 3px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + overflow: hidden; + -webkit-transition: all 0.2s; + transition: all 0.2s; } - -.sheet-cohort-dropdown:hover { - height: 39px; +.charsheet .cohort-dropdown:hover { + height: 39px; } - -.sheet-cohort-dropdown:hover > div:first-child { - display: none; +.charsheet .cohort-dropdown:hover > div:first-child { + display: none; } - -.sheet-cohort-dropdown input[type=radio] { - width: 39px; - margin-right: -39px; - vertical-align: top; - height: 13px; - z-index: 10; +.charsheet .cohort-dropdown input[type=radio] { + width: 39px; + margin-right: -39px; + vertical-align: top; + height: 13px; + z-index: 10; } - -.sheet-cohort-dropdown input[type=radio]:checked + span { - color: red; +.charsheet .cohort-dropdown input[type=radio]:checked + span { + color: red; } - -.sheet-cohort-edgeflaw { - font-size: 9px; - line-height: 10px; - margin: 2px 0; - align-items: start; +.charsheet .cohort-edgeflaw { + font-size: 9px; + line-height: 10px; + margin: 2px 0; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } - -.sheet-cohort-edgeflaw .sheet-uppercase { - width: 34px; - padding: 2px 0; +.charsheet .cohort-edgeflaw .uppercase { + width: 34px; + padding: 2px 0; } - -.sheet-cohort-edgeflaw .sheet-auto-expand { - width: calc(100% - 34px); - min-height: 14px; - padding: 2px 3px; +.charsheet .cohort-edgeflaw .auto-expand { + width: calc(100% - 34px); + min-height: 14px; + padding: 2px 3px; } - -.sheet-cohort-description { - font-size: 9px; - padding: 1px 0; - line-height: 12px; - height: 50px; - border-bottom: 1px solid #d8d8d8; +.charsheet .cohort-description { + font-size: 9px; + padding: 1px 0; + line-height: 12px; + height: 50px; + border-bottom: 1px solid var(--blades-lightest); } /* CLAIMS */ -.sheet-claims { - margin-top: 15px; +.charsheet .claims { + margin-top: 15px; +} +.charsheet .claimsbody, .charsheet .claims .repitem { + display: -ms-grid; + display: grid; + -ms-grid-columns: (18.4% 2%)[4] 18.4%; + grid-template-columns: repeat(4, 18.4% 2%) 18.4%; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + justify-items: center; +} +.charsheet .claimbox, .charsheet .lairbox { + height: 66px; +} +.charsheet .lairbox { + background: var(--blades-lightblack); + font-size: 13px; + width: 100%; + color: var(--blades-whitetext); + letter-spacing: 1px; +} +.charsheet .claims-horisep { + height: 12px; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.charsheet .claims-vertsep { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 12px; + height: 12px; +} +.charsheet .claimbox { + background: var(--blades-lightest); + position: relative; + -webkit-transition: all 0.2s; + transition: all 0.2s; +} +.charsheet .claimbox .sheet-label { + height: 30px; + padding: 4px 0 2px; + line-height: 12px; +} +.charsheet .claimbox textarea { + text-align: center; + font-size: 9px; + resize: none; +} +.charsheet .claimbox textarea.claim-desc { + height: 36px; + padding: 2px 2.5% 4px; + line-height: 10px; +} +.charsheet .claimbox label { + position: absolute; + bottom: 1px; + left: 1px; +} +.charsheet input[value="1"] + .claimbox { + background: var(--blades-lighter); } -.sheet-claimsbody, .sheet-claims .repitem { - display: grid; - grid-template-columns: repeat(4, 18.4% 2%) 18.4%; - align-items: center; - justify-items: center; +/* Support for The River (City of Red Waters) */ +.charsheet .claimhider[value="1"] ~ .claims, .charsheet .claimhider[value="1"] ~ .claims .claimbody { + display: none; } -.sheet-claimbox, .sheet-lairbox { - height: 66px; +.charsheet .riverhider[value="0"] ~ .river, .charsheet .riverhider[value="0"] ~ .river .riverbody { + display: none; } -.sheet-lairbox { - background: #777; - font-size: 13px; - width: 100%; - color: white; - letter-spacing: 1px; +.charsheet .river { + margin-top: 15px; +} +.charsheet .riverbody { + display: -ms-grid; + display: grid; + -ms-grid-columns: (2% 17.6%)[5] 2%; + grid-template-columns: repeat(5, 2% 17.6%) 2%; + -ms-grid-rows: (22px)[11]; + grid-template-rows: repeat(11, 22px); + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + justify-items: center; +} +.charsheet .riverbody > *:nth-child(1) { + -ms-grid-row: 1; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(2) { + -ms-grid-row: 1; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(3) { + -ms-grid-row: 1; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(4) { + -ms-grid-row: 1; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(5) { + -ms-grid-row: 1; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(6) { + -ms-grid-row: 1; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(7) { + -ms-grid-row: 2; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(8) { + -ms-grid-row: 2; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(9) { + -ms-grid-row: 2; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(10) { + -ms-grid-row: 2; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(11) { + -ms-grid-row: 2; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(12) { + -ms-grid-row: 2; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(13) { + -ms-grid-row: 3; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(14) { + -ms-grid-row: 3; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(15) { + -ms-grid-row: 3; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(16) { + -ms-grid-row: 3; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(17) { + -ms-grid-row: 3; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(18) { + -ms-grid-row: 3; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(19) { + -ms-grid-row: 4; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(20) { + -ms-grid-row: 4; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(21) { + -ms-grid-row: 4; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(22) { + -ms-grid-row: 4; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(23) { + -ms-grid-row: 4; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(24) { + -ms-grid-row: 4; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(25) { + -ms-grid-row: 5; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(26) { + -ms-grid-row: 5; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(27) { + -ms-grid-row: 5; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(28) { + -ms-grid-row: 5; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(29) { + -ms-grid-row: 5; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(30) { + -ms-grid-row: 5; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(31) { + -ms-grid-row: 6; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(32) { + -ms-grid-row: 6; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(33) { + -ms-grid-row: 6; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(34) { + -ms-grid-row: 6; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(35) { + -ms-grid-row: 6; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(36) { + -ms-grid-row: 6; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(37) { + -ms-grid-row: 7; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(38) { + -ms-grid-row: 7; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(39) { + -ms-grid-row: 7; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(40) { + -ms-grid-row: 7; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(41) { + -ms-grid-row: 7; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(42) { + -ms-grid-row: 7; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(43) { + -ms-grid-row: 8; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(44) { + -ms-grid-row: 8; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(45) { + -ms-grid-row: 8; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(46) { + -ms-grid-row: 8; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(47) { + -ms-grid-row: 8; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(48) { + -ms-grid-row: 8; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(49) { + -ms-grid-row: 9; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(50) { + -ms-grid-row: 9; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(51) { + -ms-grid-row: 9; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(52) { + -ms-grid-row: 9; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(53) { + -ms-grid-row: 9; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(54) { + -ms-grid-row: 9; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(55) { + -ms-grid-row: 10; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(56) { + -ms-grid-row: 10; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(57) { + -ms-grid-row: 10; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(58) { + -ms-grid-row: 10; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(59) { + -ms-grid-row: 10; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(60) { + -ms-grid-row: 10; + -ms-grid-column: 6; +} +.charsheet .riverbody > *:nth-child(61) { + -ms-grid-row: 11; + -ms-grid-column: 1; +} +.charsheet .riverbody > *:nth-child(62) { + -ms-grid-row: 11; + -ms-grid-column: 2; +} +.charsheet .riverbody > *:nth-child(63) { + -ms-grid-row: 11; + -ms-grid-column: 3; +} +.charsheet .riverbody > *:nth-child(64) { + -ms-grid-row: 11; + -ms-grid-column: 4; +} +.charsheet .riverbody > *:nth-child(65) { + -ms-grid-row: 11; + -ms-grid-column: 5; +} +.charsheet .riverbody > *:nth-child(66) { + -ms-grid-row: 11; + -ms-grid-column: 6; +} +.charsheet .riverbody .roundtl { + border-top-left-radius: 10px; +} +.charsheet .riverbody .roundtr { + border-top-right-radius: 10px; +} +.charsheet .riverbody .roundbl { + border-bottom-left-radius: 10px; +} +.charsheet .riverbody .roundbr { + border-bottom-right-radius: 10px; +} +.charsheet .riverbody .riverbox { + background: var(--blades-lightest); + width: 100%; + position: relative; + -webkit-transition: all 1.5s; + transition: all 1.5s; +} +.charsheet .riverbody .riverbox .sheet-label { + height: 30px; + padding: 4px 0 2px; + line-height: 12px; +} +.charsheet .riverbody .riverbox textarea { + text-align: center; + font-size: 9px; + resize: none; + -webkit-transition: all 0.5s; + transition: all 0.5s; +} +.charsheet .riverbody .riverbox textarea.river-desc { + height: 36px; + padding: 2px 2.5% 4px; + line-height: 10px; +} +.charsheet .riverbody .riverbox label { + position: absolute; + bottom: 3px; + left: 3px; +} +.charsheet .riverbody input[value="1"] + input[value="1"] + .riverbox.bloodflow, +.charsheet .riverbody input[value="1"] + .riverbox.rivertarget { + background: var(--blades-riverblood); + color: var(--blades-redtext); +} +.charsheet .riverbody input[value="1"] + input[value="1"] + .riverbox.bloodflow textarea, +.charsheet .riverbody input[value="1"] + .riverbox.rivertarget textarea { + -webkit-text-decoration: line-through 1px; + text-decoration: line-through 1px; + color: var(--blades-redtext); +} +.charsheet .riverbody input[value="1"] + input[value="1"] + .riverbox.bloodflow .checkbox:checked + span, +.charsheet .riverbody input[value="1"] + .riverbox.rivertarget .checkbox:checked + span { + background: var(--blades-redtext); +} +.charsheet .riverbody input[value="1"] + input:not([value="1"]) + .riverbox.bloodflow { + background: -webkit-gradient(linear, left top, right top, from(var(--blades-riverblood)), to(var(--blades-lightest))); + background: linear-gradient(to right, var(--blades-riverblood), var(--blades-lightest)); +} +.charsheet .riverbody input:not([value="1"]) + input[value="1"] + .riverbox.bloodflow { + background: -webkit-gradient(linear, right top, left top, from(var(--blades-riverblood)), to(var(--blades-lightest))); + background: linear-gradient(to left, var(--blades-riverblood), var(--blades-lightest)); +} +.charsheet .riverbody input[value="1"] + input:not([value="1"]) + .riverbox.bloodflow.vflow { + background: -webkit-gradient(linear, left top, left bottom, from(var(--blades-riverblood)), to(var(--blades-lightest))); + background: linear-gradient(to bottom, var(--blades-riverblood), var(--blades-lightest)); +} +.charsheet .riverbody input:not([value="1"]) + input[value="1"] + .riverbox.bloodflow.vflow { + background: -webkit-gradient(linear, left bottom, left top, from(var(--blades-riverblood)), to(var(--blades-lightest))); + background: linear-gradient(to top, var(--blades-riverblood), var(--blades-lightest)); +} +.charsheet .riverbody .col1 { + -ms-grid-column: 1; + grid-column-start: 1; + -ms-grid-column-span: 0; + grid-column-end: 1; +} +.charsheet .riverbody .row1 { + height: 22px; + -ms-grid-row: 1; + grid-row-start: 1; + -ms-grid-row-span: 0; + grid-row-end: 1; +} +.charsheet .riverbody .span3row1 { + height: 66px; + -ms-grid-row: 1; + -ms-grid-row-span: 3; + grid-row: 1/span 3; +} +.charsheet .riverbody .col2 { + -ms-grid-column: 2; + grid-column-start: 2; + -ms-grid-column-span: 0; + grid-column-end: 2; +} +.charsheet .riverbody .row2 { + height: 22px; + -ms-grid-row: 2; + grid-row-start: 2; + -ms-grid-row-span: 0; + grid-row-end: 2; +} +.charsheet .riverbody .span3row2 { + height: 66px; + -ms-grid-row: 2; + -ms-grid-row-span: 3; + grid-row: 2/span 3; +} +.charsheet .riverbody .col3 { + -ms-grid-column: 3; + grid-column-start: 3; + -ms-grid-column-span: 0; + grid-column-end: 3; +} +.charsheet .riverbody .row3 { + height: 22px; + -ms-grid-row: 3; + grid-row-start: 3; + -ms-grid-row-span: 0; + grid-row-end: 3; +} +.charsheet .riverbody .span3row3 { + height: 66px; + -ms-grid-row: 3; + -ms-grid-row-span: 3; + grid-row: 3/span 3; +} +.charsheet .riverbody .col4 { + -ms-grid-column: 4; + grid-column-start: 4; + -ms-grid-column-span: 0; + grid-column-end: 4; +} +.charsheet .riverbody .row4 { + height: 22px; + -ms-grid-row: 4; + grid-row-start: 4; + -ms-grid-row-span: 0; + grid-row-end: 4; +} +.charsheet .riverbody .span3row4 { + height: 66px; + -ms-grid-row: 4; + -ms-grid-row-span: 3; + grid-row: 4/span 3; +} +.charsheet .riverbody .col5 { + -ms-grid-column: 5; + grid-column-start: 5; + -ms-grid-column-span: 0; + grid-column-end: 5; +} +.charsheet .riverbody .row5 { + height: 22px; + -ms-grid-row: 5; + grid-row-start: 5; + -ms-grid-row-span: 0; + grid-row-end: 5; +} +.charsheet .riverbody .span3row5 { + height: 66px; + -ms-grid-row: 5; + -ms-grid-row-span: 3; + grid-row: 5/span 3; +} +.charsheet .riverbody .col6 { + -ms-grid-column: 6; + grid-column-start: 6; + -ms-grid-column-span: 0; + grid-column-end: 6; +} +.charsheet .riverbody .row6 { + height: 22px; + -ms-grid-row: 6; + grid-row-start: 6; + -ms-grid-row-span: 0; + grid-row-end: 6; +} +.charsheet .riverbody .span3row6 { + height: 66px; + -ms-grid-row: 6; + -ms-grid-row-span: 3; + grid-row: 6/span 3; +} +.charsheet .riverbody .col7 { + -ms-grid-column: 7; + grid-column-start: 7; + -ms-grid-column-span: 0; + grid-column-end: 7; +} +.charsheet .riverbody .row7 { + height: 22px; + -ms-grid-row: 7; + grid-row-start: 7; + -ms-grid-row-span: 0; + grid-row-end: 7; +} +.charsheet .riverbody .span3row7 { + height: 66px; + -ms-grid-row: 7; + -ms-grid-row-span: 3; + grid-row: 7/span 3; +} +.charsheet .riverbody .col8 { + -ms-grid-column: 8; + grid-column-start: 8; + -ms-grid-column-span: 0; + grid-column-end: 8; +} +.charsheet .riverbody .row8 { + height: 22px; + -ms-grid-row: 8; + grid-row-start: 8; + -ms-grid-row-span: 0; + grid-row-end: 8; +} +.charsheet .riverbody .span3row8 { + height: 66px; + -ms-grid-row: 8; + -ms-grid-row-span: 3; + grid-row: 8/span 3; +} +.charsheet .riverbody .col9 { + -ms-grid-column: 9; + grid-column-start: 9; + -ms-grid-column-span: 0; + grid-column-end: 9; +} +.charsheet .riverbody .row9 { + height: 22px; + -ms-grid-row: 9; + grid-row-start: 9; + -ms-grid-row-span: 0; + grid-row-end: 9; +} +.charsheet .riverbody .span3row9 { + height: 66px; + -ms-grid-row: 9; + -ms-grid-row-span: 3; + grid-row: 9/span 3; +} +.charsheet .riverbody .col10 { + -ms-grid-column: 10; + grid-column-start: 10; + -ms-grid-column-span: 0; + grid-column-end: 10; +} +.charsheet .riverbody .row10 { + height: 22px; + -ms-grid-row: 10; + grid-row-start: 10; + -ms-grid-row-span: 0; + grid-row-end: 10; +} +.charsheet .riverbody .span3row10 { + height: 66px; + -ms-grid-row: 10; + -ms-grid-row-span: 3; + grid-row: 10/span 3; +} +.charsheet .riverbody .col11 { + -ms-grid-column: 11; + grid-column-start: 11; + -ms-grid-column-span: 0; + grid-column-end: 11; +} +.charsheet .riverbody .row11 { + height: 22px; + -ms-grid-row: 11; + grid-row-start: 11; + -ms-grid-row-span: 0; + grid-row-end: 11; +} +.charsheet .riverbody .span3row11 { + height: 66px; + -ms-grid-row: 11; + -ms-grid-row-span: 3; + grid-row: 11/span 3; +} +.charsheet .riverbody .riverbend { + width: 100%; + height: 22px; + background: var(--blades-bg); } -.sheet-claims-horisep { - height: 12px; - width: 100%; - display: flex; +/* Support for Roots (City of Red Waters) */ +.charsheet .plots { + margin-top: 15px; } - -.sheet-claims-vertsep { - display: flex; - width: 12px; - height: 12px; +.charsheet .plotsbody { + display: -ms-grid; + display: grid; + -ms-grid-columns: 19% 3px 19% 3px 19% 3px 19% 3px 19%; + grid-template-columns: repeat(5, 19%); + grid-gap: 3px 3px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + justify-items: center; } - -.sheet-claimbox { - background: #d8d8d8; - position: relative; - transition: all 0.2s; +.charsheet .plotsbody .plotbox { + background: var(--blades-lightest); + width: 100%; + position: relative; + -webkit-transition: all 0.2s; + transition: all 0.2s; } - -.sheet-claimbox .sheet-label { - height: 30px; - padding: 4px 0 2px; - line-height: 12px; +.charsheet .plotsbody .plotbox .sheet-label { + height: 30px; + padding: 4px 0 2px; + line-height: 12px; + resize: none; + overflow: hidden; } - -.sheet-claimbox textarea { - text-align: center; - font-size: 9px; - resize: none; +.charsheet .plotsbody .plotbox textarea { + text-align: center; + font-size: 9px; + line-height: 12px; + resize: none; + overflow: hidden; + -webkit-transition: all 0.2s; + transition: all 0.2s; + padding-left: 3px; + padding-right: 3px; } - -.sheet-claimbox textarea.sheet-claim-desc { - height: 36px; - padding: 2px 2.5% 4px; - line-height: 10px; +.charsheet .plotsbody .plotbox textarea.plot-benefit { + height: 36px; } - -.sheet-claimbox label { - position: absolute; - bottom: 1px; - left: 1px; +.charsheet .plotsbody .plotbox textarea.plot-sacrifice { + height: 24px; + font-style: italic; } - -input[value="1"] + .sheet-claimbox { - background: #c7c7c7; +.charsheet .plotsbody .plotbox .plot-clock { + text-align: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-top: 3px; +} +.charsheet .plotsbody .plotbox label { + position: absolute; + bottom: 3px; + left: 3px; +} +.charsheet .plotsbody input:not([value="0"]) + .plotbox { + background: var(--blades-lighterblack); + color: var(--blades-whitetext); +} +.charsheet .plotsbody input:not([value="0"]) + .plotbox textarea { + color: var(--blades-whitetext); } /* STRICTURES */ -.sheet-strictures { - font-size: 11px; - line-height: 1.6; - text-align: justify; +.charsheet .strictures { + font-size: 11px; + line-height: 1.6; + text-align: justify; } - -.sheet-strictures label { - margin-right: 3px; - display: inline-flex; - vertical-align: top; - align-items: center; +.charsheet .strictures label { + margin-right: 3px; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: top; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } - -.sheet-strictures span.sheet-label::after { - content: ":"; +.charsheet .strictures span.sheet-label::after { + content: ":"; } /* ALCHEMICALS */ -.sheet-title-checkbox ~ div { - height: auto; - transition: all 0.2s; - overflow: hidden; +.charsheet .title-checkbox ~ div { + height: auto; + -webkit-transition: all 0.2s; + transition: all 0.2s; + overflow: hidden; } - -.sheet-title-checkbox:not(:checked) ~ div { - height: 0; +.charsheet .title-checkbox:not(:checked) ~ div { + height: 0; } - -input.sheet-title-checkbox { - width: 100%; - vertical-align: top; - margin-right: -100%; - height: 24px; +.charsheet input.title-checkbox { + width: 100%; + vertical-align: top; + margin-right: -100%; + height: 24px; } - -.sheet-title-checkbox:hover + span { - color: red; +.charsheet .title-checkbox:hover + span { + color: red; } - -.sheet-alchemicals { - padding: 0 5px; - line-height: 16px; +.charsheet .alchemicals { + padding: 0 5px; + line-height: 16px; } - -.sheet-bandolier-desc { - line-height: 12px; - margin-top: 2px; - font-size: 10px; - font-style: italic; +.charsheet .bandolier-desc { + line-height: 12px; + margin-top: 2px; + font-size: 10px; + font-style: italic; } - -.sheet-bandoliers-name { - margin-right: 7px; - font-size: 12px; - line-height: 18px; +.charsheet .bandoliers-name { + margin-right: 7px; + font-size: 12px; + line-height: 18px; } - -.sheet-bandolier input:nth-of-type(3) + span { - margin-right: 8px; +.charsheet .bandolier input:nth-of-type(3) + span { + margin-right: 8px; } - -.sheet-alchemicals .repcontainer { - display: flex; - flex-flow: row wrap; +.charsheet .alchemicals .repcontainer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-flow: row wrap; + flex-flow: row wrap; } - -.sheet-alchemicals .repitem { - font-size: 11px; - width: 50%; +.charsheet .alchemicals .repitem { + font-size: 11px; + width: 50%; } - -.sheet-alchemicals .sheet-auto-expand { - margin: 0 1px 0 7px; - padding: 1px; - min-height: 16px; - line-height: 14px; - width: calc(100% - 8px); +.charsheet .alchemicals .auto-expand { + margin: 0 1px 0 7px; + padding: 1px; + min-height: 16px; + line-height: 14px; + width: calc(100% - 8px); } - -.sheet-alchemicals input.sheet-alchemicals-expand { - width: 10px; - position: absolute; - height: 16px; +.charsheet .alchemicals input.alchemicals-expand { + width: 10px; + position: absolute; + height: 16px; } - -.sheet-alchemicals .sheet-alchemicals-expand + span { - transform: rotate(45deg) scale(0.9); - position: absolute; +.charsheet .alchemicals .alchemicals-expand + span { + -webkit-transform: rotate(45deg) scale(0.9); + transform: rotate(45deg) scale(0.9); + position: absolute; } - -.sheet-alchemicals .sheet-alchemicals-expand:not(:checked) ~ .sheet-alchemicals-info { - display: none; +.charsheet .alchemicals .alchemicals-expand:not(:checked) ~ .alchemicals-info { + display: none; } - -.sheet-alchemicals .sheet-alchemicals-info { - position: relative; - font-size: 9px; - z-index: 2; - background: white; - line-height: 1.3; - height: 64px; - width: 200%; - padding: 2px; - border: 1px solid #d8d8d8; +.charsheet .alchemicals .alchemicals-info { + position: relative; + font-size: 9px; + z-index: 2; + background: var(--blades-whitetext); + line-height: 1.3; + height: 64px; + width: 200%; + padding: 2px; + border: 1px solid var(--blades-lightest); } - -.sheet-alchemicals .repitem:nth-child(even) .sheet-alchemicals-info { - left: -100%; +.charsheet .alchemicals .repitem:nth-child(even) .alchemicals-info { + left: -100%; } - -.sheet-alchemicals .sheet-alchemicals-expand + span::before { - content: '■'; - font-family: serif; +.charsheet .alchemicals .alchemicals-expand + span::before { + content: "■"; + font-family: serif; } - -.sheet-alchemicals .sheet-alchemicals-expand:checked + span { - color: red; +.charsheet .alchemicals .alchemicals-expand:checked + span { + color: red; } - -.sheet-alchemicals .itemcontrol .btn { - padding: 0 4px; - font-size: 9px; - line-height: 14px; +.charsheet .alchemicals .itemcontrol .btn { + padding: 0 4px; + font-size: 9px; + line-height: 14px; } - -.sheet-alchemicals .repcontrol_del { - order: 1; +.charsheet .alchemicals .repcontrol_del { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; } - -.sheet-alchemicals .repcontainer.editmode .repitem .itemcontrol { - display: flex; - justify-content: space-between; - align-items: start; +.charsheet .alchemicals .repcontainer.editmode .repitem .itemcontrol { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } /* FRAME */ -.sheet-frame textarea { - font-size: 11px; - height: 40px; +.charsheet .frame textarea { + font-size: 11px; + height: 40px; } /* FACTIONS PAGE */ -.sheet-factions { - grid: auto auto/repeat(4, 1fr); - grid-gap: 5px 10px; +.charsheet { + /* Column widths */ + /* War blurb */ + /* Generate button */ + /* Auto-expand textareas */ + /* Broadcast buttons */ } - -.sheet-factions .sheet-2row { - grid-row: span 2; +.charsheet .factions { + grid: auto auto/repeat(4, 1fr); + grid-gap: 5px 10px; } - -.sheet-factiontitle { - align-items: center; +.charsheet .factions .sheet-2row { + -ms-grid-row-span: 2; + grid-row: span 2; } - -.sheet-factiontitle input[type=text] { - font-size: 26px; - margin-right: auto; - width: 60%; +.charsheet .factiontitle { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } - -.sheet-factions-header { - width: 100%; - height: 24px; - align-items: center; - line-height: 14px; - background: #c7c7c7; +.charsheet .factiontitle input[type=text] { + font-size: 26px; + margin-right: auto; + width: 60%; } - -.sheet-factions-header input[type=text] { - padding-left: 3px; +.charsheet .factions-header { + width: 100%; + height: 24px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + line-height: 14px; + background: var(--blades-lighter); } - -.sheet-factions-header span { - font-size: 7px; +.charsheet .factions-header input[type=text] { + padding-left: 3px; } - -input.sheet-expand, .sheet-expand + span { - position: absolute; - width: 7px; - height: 10px; - font-size: 8px; +.charsheet .factions-header span { + font-size: 7px; } - -.sheet-type-faction .sheet-expand { - left: -7px; - top: 6px; +.charsheet input.expand, .charsheet .expand + span { + position: absolute; + width: 7px; + height: 10px; + font-size: 8px; } - -.sheet-type-faction .sheet-expand + span { - top: 3px; - left: -7px; +.charsheet .type-faction .expand { + left: -7px; + top: 6px; } - -.sheet-type-faction .sheet-expand + span::before { - content: "▶"; +.charsheet .type-faction .expand + span { + top: 3px; + left: -7px; } - -.sheet-type-faction .sheet-expand:checked + span::before { - content: "▼"; +.charsheet .type-faction .expand + span::before { + content: "▶"; } - -.sheet-faction { - border-bottom: 1px solid #d8d8d8; +.charsheet .type-faction .expand:checked + span::before { + content: "▼"; } - -.sheet-faction textarea { - border-top: 1px solid #d8d8d8; - font-size: 11px; - line-height: 1.5; - height: 51px; +.charsheet .faction { + border-bottom: 1px solid var(--blades-lightest); } - -.sheet-faction input[type=number] { - border: none; - background: transparent; - padding: 0; - font-size: 12px; +.charsheet .faction textarea { + border-top: 1px solid var(--blades-lightest); + font-size: 11px; + line-height: 1.5; + height: 51px; } - -.sheet-faction input[type=text] { - border-right: 1px solid #d8d8d8; - font-size: 12px; - padding: 2px 1px; +.charsheet .faction input[type=number] { + border: none; + background: transparent; + padding: 0; + font-size: 12px; } - -.sheet-expand:not(:checked) ~ textarea { - height: 0 !important; - border-width: 0; +.charsheet .faction input[type=text] { + border-right: 1px solid var(--blades-lightest); + font-size: 12px; + padding: 2px 1px; } - -/* Column widths */ -.sheet-faction-name, input[type=text].sheet-faction-name { - width: 65%; +.charsheet .expand:not(:checked) ~ textarea { + height: 0 !important; + border-width: 0; } - -.sheet-faction-tier, input[type=text].sheet-faction-tier { - width: 10%; - text-align: center; +.charsheet .faction-name, .charsheet input[type=text].faction-name { + width: 65%; } - -.sheet-faction-hold, input[type=text].sheet-faction-hold { - width: 10%; - text-align: center; +.charsheet .faction-tier, .charsheet input[type=text].faction-tier { + width: 10%; + text-align: center; } - -.sheet-faction-status, input[type=number].sheet-faction-status { - width: 15%; - text-align: center; +.charsheet .faction-hold, .charsheet input[type=text].faction-hold { + width: 10%; + text-align: center; } - -/* War blurb */ -.sheet-warblurb { - text-align: justify; +.charsheet .faction-status, .charsheet input[type=number].faction-status { + width: 15%; + text-align: center; } - -.sheet-warblurb .sheet-label { - font-size: 14px; +.charsheet .warblurb { + text-align: justify; } - -.sheet-warblurb li { - margin-bottom: .5em; - padding-left: 1em; +.charsheet .warblurb .sheet-label { + font-size: 14px; } - -/* Generate button */ -label.sheet-generatebutton { - color: #777; - border: 1px solid #b4b4b4; +.charsheet .warblurb li { + margin-bottom: 0.5em; + padding-left: 1em; } - -label.sheet-generatebutton:hover { - color: black; - border-color: black; +.charsheet label.generatebutton { + color: var(--blades-lightblack); + border: 1px solid var(--blades-darkgrey); } - -label.sheet-generatebutton:hover input + span { - opacity: 1; +.charsheet label.generatebutton:hover { + color: var(--blades-blacktext); + border-color: var(--blades-blacktext); } - -.sheet-type-faction label.sheet-generatebutton { - font-size: 13px; - padding: 0 6px; - align-items: center; - margin: 0 6px; - font-weight: bold; - height: 30px; +.charsheet label.generatebutton:hover input + span { + opacity: 1; } - -.sheet-settings label.sheet-generatebutton { - padding: 2px; - line-height: 12px; - margin: 0 4px; - font-size: 11px; +.charsheet .type-faction label.generatebutton { + font-size: 13px; + padding: 0 6px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0 6px; + font-weight: bold; + height: 30px; } - -/* Auto-expand textareas */ -.sheet-auto-expand { - position: relative; - cursor: text; - word-wrap: break-word; +.charsheet .settings label.generatebutton { + padding: 2px; + line-height: 12px; + margin: 0 4px; + font-size: 11px; } - -.sheet-auto-expand span { - visibility: hidden; - white-space: pre-wrap; - display: block; +.charsheet .auto-expand { + position: relative; + cursor: text; + word-wrap: break-word; } - -.sheet-auto-expand textarea { - position: absolute; - overflow: hidden; - z-index: 1; - top: 0; - left: 0; - resize: none; - height: 100%; - word-wrap: break-word; - padding: inherit; - font: inherit; - color: inherit; - text-transform: inherit; - letter-spacing: inherit; - text-align: inherit; +.charsheet .auto-expand span { + visibility: hidden; + white-space: pre-wrap; + display: block; } - -/* Broadcast buttons */ -.sheet-show-broadcast[value="0"] ~ .sheet-container .sheet-broadcast-button { - display: none; +.charsheet .auto-expand textarea { + position: absolute; + overflow: hidden; + z-index: 1; + top: 0; + left: 0; + resize: none; + height: 100%; + word-wrap: break-word; + padding: inherit; + font: inherit; + color: inherit; + text-transform: inherit; + letter-spacing: inherit; + text-align: inherit; } - -button[type=roll].sheet-broadcast-button { - font-family: pictos; - position: absolute; - border: none; - margin: 0; - padding: 0; - z-index: 3; +.charsheet .show-broadcast[value="0"] ~ .container .broadcast-button { + display: none; } - -.sheet-specialability button[type=roll].sheet-broadcast-button { - font-size: 12px; - line-height: 14px; - height: 14px; - width: 14px; - color: #777; - left: 3px; - bottom: 7px; +.charsheet button[type=roll].broadcast-button { + font-family: pictos; + position: absolute; + border: none; + margin: 0; + padding: 0; + z-index: 3; } - -.sheet-clocks button[type=roll].sheet-broadcast-button { - font-size: 11px; - line-height: 11px; - height: 12px; - width: 12px; - color: #777; - right: 0; - bottom: 2px; +.charsheet .specialability button[type=roll].broadcast-button { + font-size: 12px; + line-height: 14px; + height: 14px; + width: 14px; + color: var(--blades-lightblack); + left: 3px; + bottom: 7px; } - -.sheet-harm button[type=roll].sheet-broadcast-button { - color: white; - font-weight: normal; - font-size: 11px; - line-height: 11px; - right: 2px; - top: 1px; +.charsheet .clocks button[type=roll].broadcast-button { + font-size: 11px; + line-height: 11px; + height: 12px; + width: 12px; + color: var(--blades-lightblack); + right: 0; + bottom: 2px; +} +.charsheet .harm button[type=roll].broadcast-button { + color: var(--blades-whitetext); + font-weight: normal; + font-size: 11px; + line-height: 11px; + right: 2px; + top: 1px; } /* Kirsty */ -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-specialheader, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-blackheader, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-greyheader, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-black-on-grey, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-playbook input[type="text"], -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-plainheader, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-itemheader :first-child, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-loadheader :first-child, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-attribute-title button[type=roll].sheet-rollbutton, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-bonusdie > .sheet-label:first-child, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-cohort-title, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-claimbox .sheet-label, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-lairbox, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-crewheader, -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-factiontitle input[type="text"], -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-factions-header input[type="text"] { - font-family: Kirsty, Georgia, serif; +.charsheet .use-kirsty[value="1"] ~ .container .specialheader, +.charsheet .use-kirsty[value="1"] ~ .container .blackheader, +.charsheet .use-kirsty[value="1"] ~ .container .greyheader, +.charsheet .use-kirsty[value="1"] ~ .container .black-on-grey, +.charsheet .use-kirsty[value="1"] ~ .container .playbook input[type=text], +.charsheet .use-kirsty[value="1"] ~ .container .plainheader, +.charsheet .use-kirsty[value="1"] ~ .container .itemheader :first-child, +.charsheet .use-kirsty[value="1"] ~ .container .loadheader :first-child, +.charsheet .use-kirsty[value="1"] ~ .container .attribute-title button[type=roll].rollbutton, +.charsheet .use-kirsty[value="1"] ~ .container .bonusdie > .sheet-label:first-child, +.charsheet .use-kirsty[value="1"] ~ .container .cohort-title, +.charsheet .use-kirsty[value="1"] ~ .container .claimbox .sheet-label, +.charsheet .use-kirsty[value="1"] ~ .container .lairbox, +.charsheet .use-kirsty[value="1"] ~ .container .crewheader, +.charsheet .use-kirsty[value="1"] ~ .container .factiontitle input[type=text], +.charsheet .use-kirsty[value="1"] ~ .container .factions-header input[type=text] { + font-family: Kirsty, Georgia, serif; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-claimbox .sheet-label { - font-size: 10px; - font-weight: 400; +.charsheet .use-kirsty[value="1"] ~ .container .claimbox .sheet-label { + font-size: 10px; + font-weight: 400; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-specialheader, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-itemheader :first-child, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-loadheader :first-child { - font-size: 12px; - font-weight: 400; +.charsheet .use-kirsty[value="1"] ~ .container .specialheader, .charsheet .use-kirsty[value="1"] ~ .container .itemheader :first-child, .charsheet .use-kirsty[value="1"] ~ .container .loadheader :first-child { + font-size: 12px; + font-weight: 400; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-plainheader, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-cohort-title { - font-size: 13px; - font-weight: 400; +.charsheet .use-kirsty[value="1"] ~ .container .plainheader, .charsheet .use-kirsty[value="1"] ~ .container .cohort-title { + font-size: 13px; + font-weight: 400; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-factions-header input[type="text"], -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-bonusdie > .sheet-label:first-child { - font-size: 14px; - font-weight: 400; +.charsheet .use-kirsty[value="1"] ~ .container .factions-header input[type=text], +.charsheet .use-kirsty[value="1"] ~ .container .bonusdie > .sheet-label:first-child { + font-size: 14px; + font-weight: 400; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-attribute-title button[type=roll].sheet-rollbutton, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-lairbox { - font-size: 15px; - font-weight: 400; +.charsheet .use-kirsty[value="1"] ~ .container .attribute-title button[type=roll].rollbutton, .charsheet .use-kirsty[value="1"] ~ .container .lairbox { + font-size: 15px; + font-weight: 400; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-crewheader { - font-size: 29px; - letter-spacing: 0; +.charsheet .use-kirsty[value="1"] ~ .container .crewheader { + font-size: 29px; + letter-spacing: 0; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-factiontitle input[type="text"] { - font-size: 32px; +.charsheet .use-kirsty[value="1"] ~ .container .factiontitle input[type=text] { + font-size: 32px; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-playbook input[type="text"] { - font-size: 40px; - letter-spacing: 0; +.charsheet .use-kirsty[value="1"] ~ .container .playbook input[type=text] { + font-size: 40px; + letter-spacing: 0; } - -.sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-blackheader .sheet-label, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-blackheader button[type="roll"].sheet-label, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-greyheader .sheet-label, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-greyheader button[type="roll"].sheet-label, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-black-on-grey .sheet-label, .sheet-use-kirsty[value="1"] ~ .sheet-container .sheet-black-on-grey button[type="roll"].sheet-label { - font-size: 12px; - font-weight: 400; +.charsheet .use-kirsty[value="1"] ~ .container .blackheader .sheet-label, .charsheet .use-kirsty[value="1"] ~ .container .blackheader button[type=roll].sheet-label, .charsheet .use-kirsty[value="1"] ~ .container .greyheader .sheet-label, .charsheet .use-kirsty[value="1"] ~ .container .greyheader button[type=roll].sheet-label, .charsheet .use-kirsty[value="1"] ~ .container .black-on-grey .sheet-label, .charsheet .use-kirsty[value="1"] ~ .container .black-on-grey button[type=roll].sheet-label { + font-size: 12px; + font-weight: 400; } /* Custom action/attribute labels */ -.sheet-settings .sheet-custom-actions { - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-column-gap: 5px; +.charsheet .settings .custom-actions { + width: 100%; + display: -ms-grid; + display: grid; + -ms-grid-columns: 1fr 5px 1fr 5px 1fr; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 5px; } - -.sheet-settings .sheet-custom-actions label { - grid-column: span 3; +.charsheet .settings .custom-actions label { + -ms-grid-column-span: 3; + grid-column: span 3; } - -.sheet-custom-action-toggle[value="0"] ~ .sheet-container .sheet-settings .sheet-custom-actions .sheet-column { - cursor: pointer; - pointer-events: none; - opacity: 0.6; +.custom-action-toggle[value="0"] ~ .container .charsheet .settings .custom-actions .column { + cursor: pointer; + pointer-events: none; + opacity: 0.6; } - -.sheet-settings .sheet-custom-actions .sheet-column { - display: grid; - grid: auto / 1fr 1fr; - grid-gap: 2px; +.charsheet .settings .custom-actions .column { + display: -ms-grid; + display: grid; + grid: auto/1fr 1fr; + grid-gap: 2px; } - -.sheet-settings .sheet-custom-actions .sheet-column .sheet-attribute-label { - font-weight: bold; - grid-column: span 2; +.charsheet .settings .custom-actions .column .attribute-label { + font-weight: bold; + -ms-grid-column-span: 2; + grid-column: span 2; } - -.sheet-custom-action-toggle[value="0"] ~ .sheet-container .sheet-custom-label, -.sheet-custom-action-toggle[value="1"] ~ .sheet-container .sheet-default-label { - display: none; +.charsheet .custom-action-toggle[value="0"] ~ .container .custom-label, +.charsheet .custom-action-toggle[value="1"] ~ .container .default-label { + display: none; } /* Adjustments for non-English languages */ .charsheet.lang-ko { - font-family: "Malgun Gothic", Dotum, Georgia, "Bitstream Charter", "Times New Roman", serif; + font-family: "Malgun Gothic", Dotum, Georgia, "Bitstream Charter", "Times New Roman", serif; } - -.charsheet.lang-ko .sheet-kirsty-option { - display: none; +.charsheet.lang-ko .kirsty-option { + display: none; } - -.charsheet.lang-ko .sheet-settings label.sheet-generatebutton { - font-size: 12px; +.charsheet.lang-ko .settings label.generatebutton { + font-size: 12px; } - -.charsheet.lang-ko .sheet-settings > div { - font-size: 11px; +.charsheet.lang-ko .settings > div { + font-size: 11px; } - -.charsheet.lang-ko .sheet-header .sheet-title { - font-size: 13px; +.charsheet.lang-ko .header .title { + font-size: 13px; } - -.charsheet.lang-ko .sheet-header .sheet-info { - font-size: 11px; +.charsheet.lang-ko .header .info { + font-size: 11px; } - -.charsheet.lang-ko .sheet-header .sheet-smallcaps { - font-size: 1em; +.charsheet.lang-ko .header .smallcaps { + font-size: 1em; } - -.charsheet.lang-ko .sheet-header .sheet-italic { - font-style: normal; +.charsheet.lang-ko .header .italic { + font-style: normal; } - -.charsheet.lang-ko .sheet-stress4 { - font-size: 12px; +.charsheet.lang-ko .stress4 { + font-size: 12px; } - -.charsheet.lang-ko .sheet-harmrow .sheet-harmeffect { - font-size: 12px; +.charsheet.lang-ko .harmrow .harmeffect { + font-size: 12px; } - -.charsheet.lang-ko .sheet-healing-progress { - font-size: 11px; +.charsheet.lang-ko .healing-progress { + font-size: 11px; } - -.charsheet.lang-ko .sheet-armor label { - font-size: 12px; +.charsheet.lang-ko .armor label { + font-size: 12px; } - -.charsheet.lang-ko .sheet-coinrow .sheet-label, .charsheet.lang-ko .sheet-coinrow button[type="roll"].sheet-rollbutton { - font-size: 12px; +.charsheet.lang-ko .coinrow .sheet-label, .charsheet.lang-ko .coinrow button[type=roll].rollbutton { + font-size: 12px; } - -.charsheet.lang-ko .sheet-specialheader { - font-size: 13px; +.charsheet.lang-ko .specialheader { + font-size: 13px; } - -.charsheet.lang-ko .sheet-abilityname { - font-size: 14px; +.charsheet.lang-ko .abilityname { + font-size: 14px; } - -.charsheet.lang-ko .sheet-abilitydesc { - font-family: 13px; - line-height: 16px; - min-height: 36px; +.charsheet.lang-ko .abilitydesc { + font-family: 13px; + line-height: 16px; + min-height: 36px; } - -.charsheet.lang-ko .sheet-plainheader { - font-size: 14px; +.charsheet.lang-ko .plainheader { + font-size: 14px; } - -.charsheet.lang-ko .sheet-teamworkbox { - font-size: 13px; +.charsheet.lang-ko .teamworkbox { + font-size: 13px; } - -.charsheet.lang-ko .sheet-gatherinfo li { - font-size: 12px; +.charsheet.lang-ko .gatherinfo li { + font-size: 12px; } - -.charsheet.lang-ko .sheet-strictures { - font-size: 12px; +.charsheet.lang-ko .strictures { + font-size: 12px; } - -.charsheet.lang-ko .sheet-playbook textarea { - font-size: 12px; +.charsheet.lang-ko .playbook textarea { + font-size: 12px; } - -.charsheet.lang-ko .sheet-loadheader .sheet-loadnumber { - font-family: inherit; +.charsheet.lang-ko .loadheader .loadnumber { + font-family: inherit; } - -.charsheet.lang-ko .sheet-loadheader label { - font-style: normal; +.charsheet.lang-ko .loadheader label { + font-style: normal; } - -.charsheet.lang-ko .sheet-itemheader, .charsheet.lang-ko .sheet-loadheader { - font-size: 12px; - padding: 1px 2px 0 4px; - height: auto; +.charsheet.lang-ko .itemheader, .charsheet.lang-ko .loadheader { + font-size: 12px; + padding: 1px 2px 0 4px; + height: auto; } - -.charsheet.lang-ko .sheet-numboxes-chooser { - font-size: 10px; +.charsheet.lang-ko .numboxes-chooser { + font-size: 10px; } - -.charsheet.lang-ko .sheet-item .sheet-itemname, .charsheet.lang-ko .sheet-item .sheet-label { - font-size: 12px; +.charsheet.lang-ko .item .itemname, .charsheet.lang-ko .item .sheet-label { + font-size: 12px; } - -.charsheet.lang-ko .sheet-item .sheet-label.sheet-upgradecosts { - font-size: 9px; +.charsheet.lang-ko .item .sheet-label.upgradecosts { + font-size: 9px; } - -.charsheet.lang-ko .sheet-itemholder .sheet-expand ~ textarea { - font-size: 11px; +.charsheet.lang-ko .itemholder .expand ~ textarea { + font-size: 11px; } - -.charsheet.lang-ko .sheet-bandoliers-name { - font-size: 13px; +.charsheet.lang-ko .bandoliers-name { + font-size: 13px; } - -.charsheet.lang-ko .sheet-bandolier-desc { - font-size: 11px; - font-style: normal; +.charsheet.lang-ko .bandolier-desc { + font-size: 11px; + font-style: normal; } - -.charsheet.lang-ko .sheet-attribute-title button[type="roll"].sheet-rollbutton { - font-size: 15px; +.charsheet.lang-ko .attribute-title button[type=roll].rollbutton { + font-size: 15px; } - -.charsheet.lang-ko .sheet-action button[type="roll"].sheet-rollbutton { - font-size: 15px; +.charsheet.lang-ko .action button[type=roll].rollbutton { + font-size: 15px; } - -.charsheet.lang-ko button[type="roll"].sheet-borderbutton { - font-size: 15px; +.charsheet.lang-ko button[type=roll].borderbutton { + font-size: 15px; } - -.charsheet.lang-ko .sheet-bonusdietext, .charsheet.lang-ko .sheet-bonusdie .sheet-label { - font-size: 13px; +.charsheet.lang-ko .bonusdietext, .charsheet.lang-ko .bonusdie .sheet-label { + font-size: 13px; } - -.charsheet.lang-ko .sheet-friend-contact .sheet-auto-expand { - font-size: 13px; +.charsheet.lang-ko .friend-contact .auto-expand { + font-size: 13px; } - -.charsheet.lang-ko .sheet-clocks .sheet-auto-expand { - font-size: 12px; +.charsheet.lang-ko .clocks .auto-expand { + font-size: 12px; } - -.charsheet.lang-ko .sheet-crewcoin-desc { - font-style: normal; +.charsheet.lang-ko .crewcoin-desc { + font-style: normal; } - -.charsheet.lang-ko .sheet-claimbox textarea.sheet-label { - font-size: 12px; +.charsheet.lang-ko .claimbox textarea.sheet-label { + font-size: 12px; } - -.charsheet.lang-ko .sheet-claimbox textarea.sheet-claim-desc { - overflow: hidden; - height: 54px; - line-height: 12px; - font-size: 11px; +.charsheet.lang-ko .claimbox textarea.claim-desc { + overflow: hidden; + height: 54px; + line-height: 12px; + font-size: 11px; } - -.charsheet.lang-ko .sheet-claimbox, .charsheet.lang-ko .sheet-lairbox { - height: 84px; +.charsheet.lang-ko .claimbox, .charsheet.lang-ko .lairbox { + height: 84px; } - -.charsheet.lang-ko .sheet-cohort-title { - font-size: 12px; +.charsheet.lang-ko .cohort-title { + font-size: 12px; } - -.charsheet.lang-ko .sheet-cohort-info { - height: 15px; - font-size: 11px; +.charsheet.lang-ko .cohort-info { + height: 15px; + font-size: 11px; } - -.charsheet.lang-ko .sheet-cohort-condition-name { - font-size: 12px; +.charsheet.lang-ko .cohort-condition-name { + font-size: 12px; } - -.charsheet.lang-ko .sheet-cohort-edgeflaw { - font-size: 11px; +.charsheet.lang-ko .cohort-edgeflaw { + font-size: 11px; } - -.charsheet.lang-ko .sheet-cohort-description { - font-size: 11px; +.charsheet.lang-ko .cohort-description { + font-size: 11px; } - -.charsheet.lang-ko .sheet-factions-header span { - font-size: 9px; +.charsheet.lang-ko .factions-header span { + font-size: 9px; } - -.charsheet.lang-ko .sheet-faction-name, .charsheet.lang-ko input[type=text].sheet-faction-name { - width: 60%; +.charsheet.lang-ko .faction-name, .charsheet.lang-ko input[type=text].faction-name { + width: 60%; } - -.charsheet.lang-ko .sheet-faction-tier, .charsheet.lang-ko input[type=text].sheet-faction-tier { - width: 12%; +.charsheet.lang-ko .faction-tier, .charsheet.lang-ko input[type=text].faction-tier { + width: 12%; } - -.charsheet.lang-ko .sheet-faction-hold, .charsheet.lang-ko input[type=text].sheet-faction-hold { - width: 13%; +.charsheet.lang-ko .faction-hold, .charsheet.lang-ko input[type=text].faction-hold { + width: 13%; } -.charsheet.lang-fr .sheet-abilityname { - min-height: 34px; +.charsheet.lang-fr .abilityname { + min-height: 34px; } - -.charsheet.lang-fr .sheet-heat { - width: 48%; +.charsheet.lang-fr .heat { + width: 48%; } - -.charsheet.lang-fr .sheet-heat .sheet-blackheader { - letter-spacing: 0; +.charsheet.lang-fr .heat .blackheader { + letter-spacing: 0; } - -.charsheet.lang-fr .sheet-crewcoin { - width: 51%; +.charsheet.lang-fr .crewcoin { + width: 51%; } -.charsheet.lang-es .sheet-crewheader { - font-size: 24px; +.charsheet.lang-es .crewheader { + font-size: 24px; } - -.charsheet.lang-es .sheet-playbook input[type=text] { - font-size: 32px; +.charsheet.lang-es .playbook input[type=text] { + font-size: 32px; } - -.charsheet.lang-es .sheet-itemheader .sheet-italic { - line-height: 10px; +.charsheet.lang-es .itemheader .italic { + line-height: 10px; } - -.charsheet.lang-es .sheet-coinrow button[type=roll].sheet-rollbutton { - padding: 2px 0 0 6px; +.charsheet.lang-es .coinrow button[type=roll].rollbutton { + padding: 2px 0 0 6px; } - -.charsheet.lang-es .sheet-harmbody .sheet-harmeffect { - font-size: 9px; - letter-spacing: 0; +.charsheet.lang-es .harmbody .harmeffect { + font-size: 9px; + letter-spacing: 0; } - -.charsheet.lang-es .sheet-armor .sheet-label { - font-size: 10px; +.charsheet.lang-es .armor .sheet-label { + font-size: 10px; } - -.charsheet.lang-es .sheet-coinrow .sheet-label, -.charsheet.lang-es .sheet-coinrow button[type=roll].sheet-rollbutton { - font-size: 10px; +.charsheet.lang-es .coinrow .sheet-label, +.charsheet.lang-es .coinrow button[type=roll].rollbutton { + font-size: 10px; } -.charsheet.lang-pt .sheet-crewheader { - font-size: 24px; +.charsheet.lang-pt .crewheader { + font-size: 24px; } - -.charsheet.lang-pt .sheet-heat3 button[type=roll].sheet-rollbutton { - max-width: 56px; +.charsheet.lang-pt .heat3 button[type=roll].rollbutton { + max-width: 56px; } - -.charsheet.lang-pt .sheet-healing .sheet-healing-progress { - line-height: 10px; +.charsheet.lang-pt .healing .healing-progress { + line-height: 10px; } - -.charsheet.lang-pt .sheet-playbook input[type=text] { - font-size: 32px; +.charsheet.lang-pt .playbook input[type=text] { + font-size: 32px; } - -.charsheet.lang-pt .sheet-coinrow button[type=roll].sheet-rollbutton { - padding: 2px 0 0 6px; +.charsheet.lang-pt .coinrow button[type=roll].rollbutton { + padding: 2px 0 0 6px; } - -.charsheet.lang-pt .sheet-advancement-header { - font-size: 10px; +.charsheet.lang-pt .advancement-header { + font-size: 10px; } - -.charsheet.lang-pt .sheet-itemheader .sheet-italic { - line-height: 10px; +.charsheet.lang-pt .itemheader .italic { + line-height: 10px; } - -.charsheet.lang-pt .sheet-harmbody .sheet-harmeffect { - font-size: 9px; - letter-spacing: 0; +.charsheet.lang-pt .harmbody .harmeffect { + font-size: 9px; + letter-spacing: 0; } - -.charsheet.lang-pt .sheet-armor .sheet-label { - font-size: 10px; +.charsheet.lang-pt .armor .sheet-label { + font-size: 10px; } - -.charsheet.lang-pt .sheet-coinrow .sheet-label, -.charsheet.lang-pt .sheet-coinrow button[type=roll].sheet-rollbutton { - font-size: 10px; +.charsheet.lang-pt .coinrow .sheet-label, +.charsheet.lang-pt .coinrow button[type=roll].rollbutton { + font-size: 10px; } /* Colors */ /* Standard template */ .sheet-rolltemplate-blades { - /* Header */ - /* Image */ - /* Title */ - /* Position and Effect */ - /* Dice */ - /* Zerodice dice holder */ - /* Zerodice text */ - /* Inlinerolls */ - /* Instructions and Notes */ + /* Header */ + /* Image */ + /* Title */ + /* Position and Effect */ + /* Dice */ + /* Zerodice dice holder */ + /* Zerodice text */ + /* Inlinerolls */ + /* Instructions and Notes */ } - .sheet-rolltemplate-blades .sheet-holder { - display: grid; - align-content: start; - align-items: end; - margin: 0 -5px -4px -45px; - padding: 16px 20px 0 30px; - max-width: 299px; - box-sizing: border-box; - font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; - user-select: none; - cursor: default; - overflow: hidden; - position: relative; - background-repeat: no-repeat; - font-variant-numeric: lining-nums; + display: -ms-grid; + display: grid; + -ms-flex-line-pack: start; + align-content: start; + -webkit-box-align: end; + -ms-flex-align: end; + align-items: end; + margin: 0 -5px -4px -45px; + padding: 16px 20px 0 30px; + max-width: 299px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + overflow: hidden; + position: relative; + background-repeat: no-repeat; + font-variant-numeric: lining-nums; } - .withoutavatars .sheet-rolltemplate-blades .sheet-holder { - margin-left: -15px; + margin-left: -15px; } - .sheet-rolltemplate-blades .sheet-action { - height: 258px; - grid: 35px 53px 74px 54px / 133px 1fr; - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-action.gif"); + height: 258px; + grid: 35px 53px 74px 54px/133px 1fr; + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-action.gif"); } - .sheet-rolltemplate-blades .sheet-action.sheet-short { - height: 195px; + height: 195px; } - .sheet-rolltemplate-blades .sheet-fortune { - min-height: 250px; - grid: 35px 53px 42px auto / 56% 44%; - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-fortune.jpg"); - background-position: bottom right; - background-color: white; - height: auto; + min-height: 250px; + grid: 35px 53px 42px auto/56% 44%; + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-fortune.jpg"); + background-position: bottom right; + background-color: white; + height: auto; } - .sheet-rolltemplate-blades .sheet-fortune.sheet-short { - min-height: 199px; - grid: 0 31px 42px auto/ 56% 44%; + min-height: 199px; + grid: 0 31px 42px auto/56% 44%; } - .sheet-rolltemplate-blades .sheet-resist, .sheet-rolltemplate-blades .sheet-vice { - height: 258px; - grid: 35px 35px 62px auto/ auto; + height: 258px; + grid: 35px 35px 62px auto/auto; } - .sheet-rolltemplate-blades .sheet-resist.sheet-short, .sheet-rolltemplate-blades .sheet-vice.sheet-short { - height: 171px; + height: 171px; } - .sheet-rolltemplate-blades .sheet-resist { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-resist.jpg"); + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-resist.jpg"); } - .sheet-rolltemplate-blades .sheet-vice { - background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-vice.jpg"); + background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Blades%20in%20the%20Dark/Assets/rolltemplate/rolltemplate-vice.jpg"); } - .sheet-rolltemplate-blades .sheet-header { - grid-column: span 2; - display: -webkit-box; - font-size: 15px; - height: 35px; - line-height: 17.5px; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - font-variant: small-caps; - text-overflow: ellipsis; + -ms-grid-column-span: 2; + grid-column: span 2; + display: -webkit-box; + font-size: 15px; + height: 35px; + line-height: 17.5px; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-variant: small-caps; + text-overflow: ellipsis; } - .sheet-rolltemplate-blades .sheet-header.sheet-narrow { - width: calc(100% - 52px); + width: calc(100% - 52px); } - .sheet-rolltemplate-blades .sheet-resist .sheet-header { - color: #8da8bb; + color: #8da8bb; } - .sheet-rolltemplate-blades .sheet-vice .sheet-header { - color: white; + color: white; } - .sheet-rolltemplate-blades .sheet-fortune .sheet-header { - color: #303032; - letter-spacing: 1px; - font-weight: 800; + color: #303032; + letter-spacing: 1px; + font-weight: 800; } - .sheet-rolltemplate-blades .sheet-action .sheet-header { - color: #e74a10; - letter-spacing: 1px; - font-weight: 800; + color: #e74a10; + letter-spacing: 1px; + font-weight: 800; } - .sheet-rolltemplate-blades .sheet-char-image { - position: absolute; - right: 10px; - top: 10px; - line-height: 0; + position: absolute; + right: 10px; + top: 10px; + line-height: 0; } - .sheet-rolltemplate-blades .sheet-char-image a { - cursor: default; - pointer-events: none; + cursor: default; + pointer-events: none; } - .sheet-rolltemplate-blades .sheet-char-image img { - max-width: 60px; - max-height: 80px; + max-width: 60px; + max-height: 80px; } - .sheet-rolltemplate-blades .sheet-title { - grid-column: span 2; - color: white; - position: relative; - text-transform: uppercase; - font-weight: bold; + -ms-grid-column-span: 2; + grid-column: span 2; + color: white; + position: relative; + text-transform: uppercase; + font-weight: bold; } - .sheet-rolltemplate-blades .sheet-title img { - display: block; - height: 100%; + display: block; + height: 100%; } - .sheet-rolltemplate-blades .sheet-action .sheet-title, .sheet-rolltemplate-blades .sheet-fortune .sheet-title { - font-size: 36px; - line-height: 31px; - height: 31px; + font-size: 36px; + line-height: 31px; + height: 31px; } - .sheet-rolltemplate-blades .sheet-vice .sheet-title, .sheet-rolltemplate-blades .sheet-resist .sheet-title { - font-size: 24px; - line-height: 24px; - height: 24px; + font-size: 24px; + line-height: 24px; + height: 24px; } - .sheet-rolltemplate-blades .sheet-fortune .sheet-title { - color: black; + color: black; } - .sheet-rolltemplate-blades .sheet-small-title { - font-size: 28px; + font-size: 28px; } - .sheet-rolltemplate-blades .sheet-position, .sheet-rolltemplate-blades .sheet-effect { - color: white; - text-transform: uppercase; - font-size: 12px; - letter-spacing: 1px; + color: white; + text-transform: uppercase; + font-size: 12px; + letter-spacing: 1px; } - .sheet-rolltemplate-blades .sheet-dice { - grid-column: span 2; - height: 27px; - font-size: 19px; - line-height: 20px; - color: white; + -ms-grid-column-span: 2; + grid-column: span 2; + height: 27px; + font-size: 19px; + line-height: 20px; + color: white; } - .sheet-rolltemplate-blades .sheet-fortune .sheet-dice { - color: #303032; + color: #303032; } - .sheet-rolltemplate-blades .sheet-action .sheet-zerodice1 { - text-shadow: 0 0 6px #ff9e00; - color: white; + text-shadow: 0 0 6px rgb(255, 158, 0); + color: white; } - .sheet-rolltemplate-blades .sheet-fortune .sheet-zerodice1 { - text-shadow: 0 0 6px #88dbd7; - color: #1e1e1e; + text-shadow: 0 0 6px rgb(136, 219, 215); + color: #1e1e1e; } - .sheet-rolltemplate-blades .sheet-vice .sheet-zerodice1, .sheet-rolltemplate-blades .sheet-resist .sheet-zerodice1 { - text-shadow: 0 0 6px #09c7d0; - color: white; + text-shadow: 0 0 6px rgb(9, 199, 208); + color: white; } - .sheet-rolltemplate-blades .sheet-zerodice2 { - line-height: 1; - font-size: 12.5px; - margin-top: 7px; - font-style: italic; + line-height: 1; + font-size: 12.5px; + margin-top: 7px; + font-style: italic; } - .sheet-rolltemplate-blades .sheet-vice .sheet-zerodice2, .sheet-rolltemplate-blades .sheet-resist .sheet-zerodice2 { - text-shadow: 0 0 6px #09c7d0; - color: #d8e4ef; + text-shadow: 0 0 6px rgb(9, 199, 208); + color: #d8e4ef; } - .sheet-rolltemplate-blades .sheet-action .sheet-zerodice2 { - text-shadow: 0 0 6px #ff9e00; - color: #ffd8ca; + text-shadow: 0 0 6px rgb(255, 158, 0); + color: #ffd8ca; } - .sheet-rolltemplate-blades .sheet-fortune .sheet-zerodice2 { - width: 60%; - text-shadow: 0 0 6px #88dbd7; - color: #1e1e1e; + width: 60%; + text-shadow: 0 0 6px rgb(136, 219, 215); + color: #1e1e1e; } - .sheet-rolltemplate-blades .inlinerollresult, .sheet-rolltemplate-blades .sheet-action .inlinerollresult, .sheet-rolltemplate-blades .sheet-fortune .inlinerollresult, .sheet-rolltemplate-blades .sheet-vice .inlinerollresult, .sheet-rolltemplate-blades .sheet-resist .inlinerollresult { - border: none !important; - background-color: transparent; - font-weight: normal; - padding: 0 3px 0 0; + border: none !important; + background-color: transparent; + font-weight: normal; + padding: 0 3px 0 0; } - .sheet-rolltemplate-blades .sheet-comma:last-child { - display: none; + display: none; } - .sheet-rolltemplate-blades .sheet-instructions { - grid-column: span 2; - margin-top: 30px; - line-height: 1.3; + -ms-grid-column-span: 2; + grid-column: span 2; + margin-top: 30px; + line-height: 1.3; } - .sheet-rolltemplate-blades .sheet-resist .sheet-instructions { - color: #d3dde4; - font-size: 13px; + color: #d3dde4; + font-size: 13px; } - .sheet-rolltemplate-blades .sheet-vice .sheet-instructions { - color: #c9c9c9; - font-size: 11px; + color: #c9c9c9; + font-size: 11px; } - .sheet-rolltemplate-blades .sheet-notes { - line-height: 1.2; - font-size: 13px; - margin: 30px 0 20px; - color: #303032; + line-height: 1.2; + font-size: 13px; + margin: 30px 0 20px; + color: #303032; } - .sheet-rolltemplate-blades .sheet-holder.sheet-i18n-ko { - font-family: "Malgun Gothic", Dotum, Georgia, "Bitstream Charter", "Times New Roman", serif; + font-family: "Malgun Gothic", Dotum, Georgia, "Bitstream Charter", "Times New Roman", serif; } - .sheet-rolltemplate-blades .sheet-i18n-fr.sheet-action .sheet-title, .sheet-rolltemplate-blades .sheet-i18n-fr.sheet-action .sheet-small-title, .sheet-rolltemplate-blades .sheet-i18n-fr.sheet-fortune .sheet-title, .sheet-rolltemplate-blades .sheet-i18n-fr.sheet-fortune .sheet-small-title { - font-size: 28px; + font-size: 28px; } - .sheet-rolltemplate-blades .sheet-i18n-es.sheet-action .sheet-title, .sheet-rolltemplate-blades .sheet-i18n-es.sheet-action .sheet-small-title, .sheet-rolltemplate-blades .sheet-i18n-es.sheet-fortune .sheet-title, .sheet-rolltemplate-blades .sheet-i18n-es.sheet-fortune .sheet-small-title, .sheet-rolltemplate-blades .sheet-i18n-pt.sheet-action .sheet-title, .sheet-rolltemplate-blades .sheet-i18n-pt.sheet-action .sheet-small-title, .sheet-rolltemplate-blades .sheet-i18n-pt.sheet-fortune .sheet-title, .sheet-rolltemplate-blades .sheet-i18n-pt.sheet-fortune .sheet-small-title { - font-size: 30px; + font-size: 30px; } - .sheet-rolltemplate-blades .sheet-i18n-es.sheet-resist.sheet-short, .sheet-rolltemplate-blades .sheet-i18n-pt.sheet-resist.sheet-short { - grid: 35px 30px 67px auto/ auto; + grid: 35px 30px 67px auto/auto; } - .sheet-rolltemplate-blades .sheet-i18n-es.sheet-resist.sheet-short .sheet-title, .sheet-rolltemplate-blades .sheet-i18n-pt.sheet-resist.sheet-short .sheet-title { - line-height: 20px; + line-height: 20px; } /* BROADCAST TEMPLATE */ .sheet-rolltemplate-bitd-broadcast { - margin: 0 -5px -4px -45px; - max-width: 299px; - padding: 16px 10px 15px 20px; - overflow: hidden; - box-sizing: border-box; - position: relative; - font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; - background-color: #180d06; - /* Image */ + margin: 0 -5px -4px -45px; + max-width: 299px; + padding: 16px 10px 15px 20px; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + font-family: Georgia, "Bitstream Charter", "Times New Roman", serif; + background-color: #180d06; + /* Image */ } - .withoutavatars .sheet-rolltemplate-bitd-broadcast { - margin-left: -15px; + margin-left: -15px; } - .sheet-rolltemplate-bitd-broadcast .sheet-i18n-ko { - font-family: "Malgun Gothic", Dotum, Georgia, "Bitstream Charter", "Times New Roman", serif; + font-family: "Malgun Gothic", Dotum, Georgia, "Bitstream Charter", "Times New Roman", serif; } - .sheet-rolltemplate-bitd-broadcast .sheet-header { - color: #e74a10; - font-size: 15px; - line-height: 19px; - font-variant: small-caps; - letter-spacing: 1px; - font-weight: 800; + color: #e74a10; + font-size: 15px; + line-height: 19px; + font-variant: small-caps; + letter-spacing: 1px; + font-weight: 800; } - .sheet-rolltemplate-bitd-broadcast .sheet-header.sheet-narrow { - width: calc(100% - 62px); + width: calc(100% - 62px); } - .sheet-rolltemplate-bitd-broadcast .sheet-char-image { - position: absolute; - right: 10px; - top: 10px; - line-height: 0; + position: absolute; + right: 10px; + top: 10px; + line-height: 0; } - .sheet-rolltemplate-bitd-broadcast .sheet-char-image a { - cursor: default; - pointer-events: none; + cursor: default; + pointer-events: none; } - .sheet-rolltemplate-bitd-broadcast .sheet-char-image img { - max-width: 60px; - max-height: 80px; + max-width: 60px; + max-height: 80px; } - .sheet-rolltemplate-bitd-broadcast .sheet-flex { - display: flex; - align-items: center; - clear: both; - margin: 5px 0 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + clear: both; + margin: 5px 0 0; } - .sheet-rolltemplate-bitd-broadcast .sheet-title { - margin: 9px 0 0; - color: white; - text-transform: uppercase; - position: relative; - font-weight: bold; - word-wrap: normal; - font-size: 23px; - line-height: 29px; + margin: 9px 0 0; + color: white; + text-transform: uppercase; + position: relative; + font-weight: bold; + word-wrap: normal; + font-size: 23px; + line-height: 29px; } - .sheet-rolltemplate-bitd-broadcast .sheet-title img { - margin: 9px 0 0; - display: block; - height: 31px; + margin: 9px 0 0; + display: block; + height: 31px; } - .sheet-flex .sheet-rolltemplate-bitd-broadcast .sheet-title { - margin: 0; - font-size: 20px; - line-height: 1.2; + margin: 0; + font-size: 20px; + line-height: 1.2; } - .sheet-rolltemplate-bitd-broadcast .sheet-content { - padding: 15px 0 5px; - line-height: 1.3; - font-size: 13px; - color: #ccc; + padding: 15px 0 5px; + line-height: 1.3; + font-size: 13px; + color: #ccc; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm { - color: white; - width: 100%; - margin: 18px 0 0; - border: 1px solid white; + color: white; + width: 100%; + margin: 18px 0 0; + border: 1px solid white; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm td { - text-align: center; - padding: 5px; - border: 1px solid white; + text-align: center; + padding: 5px; + border: 1px solid white; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm td:first-child { - width: 10px; + width: 10px; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm td:nth-child(2n+1) { - font-weight: bold; + font-weight: bold; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm td:nth-child(2) { - padding: 5px 0; + padding: 5px 0; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm td:last-child { - width: 60px; - letter-spacing: 0.5px; - text-transform: uppercase; + width: 60px; + letter-spacing: 0.5px; + text-transform: uppercase; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm-inner { - color: #e74a10; - padding: 0 5px; + color: #e74a10; + padding: 0 5px; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm-inner:first-child:not(:last-child) { - padding-bottom: 2.5px; - border-bottom: 1px solid white; + padding-bottom: 2.5px; + border-bottom: 1px solid white; } - .sheet-rolltemplate-bitd-broadcast .sheet-harm-inner:last-child:not(:first-child) { - padding-top: 2.5px; + padding-top: 2.5px; } - .sheet-rolltemplate-bitd-broadcast .sheet-clock { - width: 88px; - flex: 0 0 auto; - box-sizing: border-box; - position: relative; - background: white; - height: 88px; - border: 4px solid black; - border-radius: 50%; - margin-right: 4px; + width: 88px; + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + background: white; + height: 88px; + border: 4px solid black; + border-radius: 50%; + margin-right: 4px; } - -.sheet-rolltemplate-bitd-broadcast [class^='sheet-spoke'] { - height: 88px; - width: 4px; - position: absolute; - background: black; +.sheet-rolltemplate-bitd-broadcast [class^=sheet-spoke] { + height: 88px; + width: 4px; + position: absolute; + background: black; } - -.sheet-rolltemplate-bitd-broadcast [class^='sheet-spoke']:not(.sheet-spoke-0) { - display: none; +.sheet-rolltemplate-bitd-broadcast [class^=sheet-spoke]:not(.sheet-spoke-0) { + display: none; } - .sheet-rolltemplate-bitd-broadcast .sheet-size-4 .sheet-spoke-90, .sheet-rolltemplate-bitd-broadcast .sheet-size-6 .sheet-spoke-60, .sheet-rolltemplate-bitd-broadcast .sheet-size-6 .sheet-spoke-120, @@ -3902,214 +4325,184 @@ button[type=roll].sheet-broadcast-button { .sheet-rolltemplate-bitd-broadcast .sheet-size-12 .sheet-spoke-90, .sheet-rolltemplate-bitd-broadcast .sheet-size-12 .sheet-spoke-120, .sheet-rolltemplate-bitd-broadcast .sheet-size-12 .sheet-spoke-150 { - display: block; + display: block; } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-0 { - transform: translate(39px, -4px); + -webkit-transform: translate(39px, -4px); + transform: translate(39px, -4px); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-30 { - transform: translate(39px, -4px) rotate(30deg); + -webkit-transform: translate(39px, -4px) rotate(30deg); + transform: translate(39px, -4px) rotate(30deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-36 { - transform: translate(39px, -4px) rotate(36deg); + -webkit-transform: translate(39px, -4px) rotate(36deg); + transform: translate(39px, -4px) rotate(36deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-45 { - transform: translate(39px, -4px) rotate(45deg); + -webkit-transform: translate(39px, -4px) rotate(45deg); + transform: translate(39px, -4px) rotate(45deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-60 { - transform: translate(39px, -4px) rotate(60deg); + -webkit-transform: translate(39px, -4px) rotate(60deg); + transform: translate(39px, -4px) rotate(60deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-72 { - transform: translate(39px, -4px) rotate(72deg); + -webkit-transform: translate(39px, -4px) rotate(72deg); + transform: translate(39px, -4px) rotate(72deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-90 { - transform: translate(39px, -4px) rotate(90deg); + -webkit-transform: translate(39px, -4px) rotate(90deg); + transform: translate(39px, -4px) rotate(90deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-108 { - transform: translate(39px, -4px) rotate(108deg); + -webkit-transform: translate(39px, -4px) rotate(108deg); + transform: translate(39px, -4px) rotate(108deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-120 { - transform: translate(39px, -4px) rotate(120deg); + -webkit-transform: translate(39px, -4px) rotate(120deg); + transform: translate(39px, -4px) rotate(120deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-135 { - transform: translate(39px, -4px) rotate(135deg); + -webkit-transform: translate(39px, -4px) rotate(135deg); + transform: translate(39px, -4px) rotate(135deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-144 { - transform: translate(39px, -4px) rotate(144deg); + -webkit-transform: translate(39px, -4px) rotate(144deg); + transform: translate(39px, -4px) rotate(144deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-spoke-150 { - transform: translate(39px, -4px) rotate(150deg); + -webkit-transform: translate(39px, -4px) rotate(150deg); + transform: translate(39px, -4px) rotate(150deg); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-4.sheet-progress-1 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(180deg, red 50%, white 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, red), color-stop(50%, var(--blades-whitetext))); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(180deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-4.sheet-progress-2 { - background-image: linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-4.sheet-progress-3 { - background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, red)), -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-4.sheet-progress-4 { - background: red; + background: red; } - .sheet-rolltemplate-bitd-broadcast .sheet-size-6.sheet-progress-1 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(150deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(150deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-6.sheet-progress-2 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(210deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(210deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-6.sheet-progress-3 { - background-image: linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-6.sheet-progress-4 { - background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-6.sheet-progress-5 { - background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-6.sheet-progress-6 { - background: red; + background: red; } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-1 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(135deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(135deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-2 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(180deg, red 50%, white 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, red), color-stop(50%, var(--blades-whitetext))); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(180deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-3 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(225deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(225deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-4 { - background-image: linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-5 { - background-image: linear-gradient(135deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(135deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-6 { - background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, red)), -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-7 { - background-image: linear-gradient(225deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(225deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-8.sheet-progress-8 { - background: red; + background: red; } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-1 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(126deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(126deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-2 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(162deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(162deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-3 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(198deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(198deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-4 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(234deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(234deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-5 { - background-image: linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-6 { - background-image: linear-gradient(126deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(126deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-7 { - background-image: linear-gradient(162deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(162deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-8 { - background-image: linear-gradient(198deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(198deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-9 { - background-image: linear-gradient(234deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(234deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-10.sheet-progress-10 { - background: red; + background: red; } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-1 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(120deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(120deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-2 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(150deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(150deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-3 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(180deg, red 50%, white 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, red), color-stop(50%, var(--blades-whitetext))); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(180deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-4 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(210deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(210deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-5 { - background-image: linear-gradient(90deg, white 50%, transparent 50%), linear-gradient(240deg, red 50%, white 50%); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, transparent 50%), linear-gradient(240deg, red 50%, var(--blades-whitetext) 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-6 { - background-image: linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-7 { - background-image: linear-gradient(120deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(120deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-8 { - background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(150deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-9 { - background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, red)), -webkit-gradient(linear, left top, right top, color-stop(50%, var(--blades-whitetext)), color-stop(50%, red)); + background-image: linear-gradient(180deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-10 { - background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(210deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-11 { - background-image: linear-gradient(240deg, transparent 50%, red 50%), linear-gradient(90deg, white 50%, red 50%); + background-image: linear-gradient(240deg, transparent 50%, red 50%), linear-gradient(90deg, var(--blades-whitetext) 50%, red 50%); } - .sheet-rolltemplate-bitd-broadcast .sheet-size-12.sheet-progress-12 { - background: red; -} - + background: red; +} \ No newline at end of file diff --git a/Blades in the Dark/blades.html b/Blades in the Dark/blades.html index 598cc5d0d8..0c36b34403 100644 --- a/Blades in the Dark/blades.html +++ b/Blades in the Dark/blades.html @@ -1,4 +1,5 @@ -
+ +
@@ -33,11 +34,11 @@
-
- - - - +
+ + + +
-
+
@@ -373,7 +381,7 @@
@@ -383,7 +391,7 @@
-
+
@@ -409,7 +417,7 @@
-
+
@@ -536,7 +544,7 @@
-
+
@@ -555,7 +563,7 @@
- +
@@ -572,22 +580,22 @@
-
+
-
+
@@ -596,7 +604,7 @@
-
@@ -646,7 +654,7 @@
-
+
@@ -666,8 +674,8 @@
-
-
+
+
@@ -711,14 +719,14 @@
-
+
-
+
  • @@ -744,31 +752,31 @@
-
+
@@ -776,14 +784,14 @@
- - + +

-
+
@@ -795,7 +803,7 @@
-
+
@@ -873,7 +881,7 @@
- +
@@ -897,7 +905,7 @@
- +
@@ -912,7 +920,7 @@
- @@ -944,7 +952,7 @@ -
@@ -958,7 +966,7 @@ -
@@ -972,7 +980,7 @@ -
@@ -986,14 +994,14 @@ -
- @@ -1025,7 +1033,7 @@ -
@@ -1039,7 +1047,7 @@ -
@@ -1053,7 +1061,7 @@ -
@@ -1067,14 +1075,14 @@ -
- @@ -1106,7 +1114,7 @@ -
@@ -1120,7 +1128,7 @@ -
@@ -1134,7 +1142,7 @@ -
@@ -1148,7 +1156,7 @@ -
@@ -1157,7 +1165,7 @@
-
+
@@ -1175,9 +1183,9 @@
- -
Q:
- + +
Q:
+
@@ -1206,17 +1214,17 @@
-
+
+
-
-
+
+
-
+
@@ -1241,7 +1249,7 @@
-
+
@@ -1302,40 +1310,40 @@
-
+
-
+
@@ -1363,7 +1371,7 @@
-
+
@@ -1372,22 +1380,22 @@
-
+
-
@@ -1400,6 +1408,7 @@
+
@@ -1407,7 +1416,7 @@ - +
@@ -1615,7 +1624,7 @@ - +
+ + +
+
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+ +
+ + +
+ +
+
+
+
+ + + + + + + +
+
+
+ +
+
+
-
+
@@ -1683,7 +2332,7 @@
-
@@ -1699,10 +2348,10 @@
-
+
-
+
@@ -1730,7 +2379,7 @@
-
+
@@ -1748,8 +2397,8 @@
-
-
+
+
@@ -1785,13 +2434,13 @@
- - + +

-
+
@@ -1819,8 +2468,8 @@
-
-
+
+
@@ -1956,8 +2605,8 @@
-
-
+
+
@@ -1968,7 +2617,7 @@
-
+
@@ -2017,7 +2666,7 @@
-
+
@@ -2030,7 +2679,7 @@
-
+
@@ -2048,7 +2697,7 @@
- +
@@ -2081,7 +2730,7 @@
-
+
@@ -2099,7 +2748,7 @@
- +
@@ -2130,7 +2779,7 @@
-
+
@@ -2152,7 +2801,7 @@
-
+
@@ -2211,7 +2860,7 @@
- +