From 9fa67953b2fdf8d9b3e263c6439cd50e29fadd75 Mon Sep 17 00:00:00 2001 From: James Culp Date: Tue, 9 Dec 2025 19:00:16 -0500 Subject: [PATCH 1/2] Voltron RPG Character Sheet initial build. Voltron RPG Initial --- Voltron - Legendary Defender RPG/CHANGELOG.md | 0 Voltron - Legendary Defender RPG/README.md | 0 .../Voltron RPG.css | 2216 +++++++++++++++ .../Voltron RPG.html | 2365 +++++++++++++++++ .../img/DiceCore-logo.png | Bin 0 -> 20342 bytes .../img/Voltron-LD-logo.png | Bin 0 -> 189024 bytes .../img/d10-temp.png | Bin 0 -> 15241 bytes Voltron - Legendary Defender RPG/img/d10.png | Bin 0 -> 5211 bytes .../img/d12-temp.png | Bin 0 -> 14266 bytes Voltron - Legendary Defender RPG/img/d12.png | Bin 0 -> 4268 bytes .../img/d4-temp.png | Bin 0 -> 3364 bytes Voltron - Legendary Defender RPG/img/d4.png | Bin 0 -> 4970 bytes .../img/d6-temp.png | Bin 0 -> 2788 bytes Voltron - Legendary Defender RPG/img/d6.png | Bin 0 -> 3219 bytes .../img/d8-temp.png | Bin 0 -> 13741 bytes Voltron - Legendary Defender RPG/img/d8.png | Bin 0 -> 5667 bytes .../img/dg-tab.png | Bin 0 -> 1985 bytes .../img/downgrade-temp.png | Bin 0 -> 3279 bytes .../img/downgrade.png | Bin 0 -> 4157 bytes .../img/ko-temp.png | Bin 0 -> 7008 bytes Voltron - Legendary Defender RPG/img/ko.png | Bin 0 -> 13388 bytes .../img/left-gradient-sm.png | Bin 0 -> 8263 bytes .../img/left-gradient.png | Bin 0 -> 5471 bytes .../img/lg-tab.png | Bin 0 -> 2348 bytes .../img/right-gradient-sm.png | Bin 0 -> 7060 bytes .../img/right-gradient.png | Bin 0 -> 5052 bytes .../img/skull-temp.png | Bin 0 -> 3474 bytes .../img/skull.png | Bin 0 -> 6141 bytes .../img/upgrade-temp.png | Bin 0 -> 3414 bytes .../img/upgrade.png | Bin 0 -> 4139 bytes .../img/w-tab.png | Bin 0 -> 2222 bytes .../img/wounds-middle-arrow.png | Bin 0 -> 12861 bytes Voltron - Legendary Defender RPG/sheet.json | 11 + .../translation.json | 5 + 34 files changed, 4597 insertions(+) create mode 100644 Voltron - Legendary Defender RPG/CHANGELOG.md create mode 100644 Voltron - Legendary Defender RPG/README.md create mode 100644 Voltron - Legendary Defender RPG/Voltron RPG.css create mode 100644 Voltron - Legendary Defender RPG/Voltron RPG.html create mode 100644 Voltron - Legendary Defender RPG/img/DiceCore-logo.png create mode 100644 Voltron - Legendary Defender RPG/img/Voltron-LD-logo.png create mode 100644 Voltron - Legendary Defender RPG/img/d10-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/d10.png create mode 100644 Voltron - Legendary Defender RPG/img/d12-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/d12.png create mode 100644 Voltron - Legendary Defender RPG/img/d4-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/d4.png create mode 100644 Voltron - Legendary Defender RPG/img/d6-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/d6.png create mode 100644 Voltron - Legendary Defender RPG/img/d8-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/d8.png create mode 100644 Voltron - Legendary Defender RPG/img/dg-tab.png create mode 100644 Voltron - Legendary Defender RPG/img/downgrade-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/downgrade.png create mode 100644 Voltron - Legendary Defender RPG/img/ko-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/ko.png create mode 100644 Voltron - Legendary Defender RPG/img/left-gradient-sm.png create mode 100644 Voltron - Legendary Defender RPG/img/left-gradient.png create mode 100644 Voltron - Legendary Defender RPG/img/lg-tab.png create mode 100644 Voltron - Legendary Defender RPG/img/right-gradient-sm.png create mode 100644 Voltron - Legendary Defender RPG/img/right-gradient.png create mode 100644 Voltron - Legendary Defender RPG/img/skull-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/skull.png create mode 100644 Voltron - Legendary Defender RPG/img/upgrade-temp.png create mode 100644 Voltron - Legendary Defender RPG/img/upgrade.png create mode 100644 Voltron - Legendary Defender RPG/img/w-tab.png create mode 100644 Voltron - Legendary Defender RPG/img/wounds-middle-arrow.png create mode 100644 Voltron - Legendary Defender RPG/sheet.json create mode 100644 Voltron - Legendary Defender RPG/translation.json diff --git a/Voltron - Legendary Defender RPG/CHANGELOG.md b/Voltron - Legendary Defender RPG/CHANGELOG.md new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/Voltron - Legendary Defender RPG/README.md b/Voltron - Legendary Defender RPG/README.md new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/Voltron - Legendary Defender RPG/Voltron RPG.css b/Voltron - Legendary Defender RPG/Voltron RPG.css new file mode 100644 index 000000000000..2135d3529afb --- /dev/null +++ b/Voltron - Legendary Defender RPG/Voltron RPG.css @@ -0,0 +1,2216 @@ +* { + box-sizing: border-box; + font-family: 'Arial Narrow', Arial, sans-serif; + font-stretch: condensed; +} + +/* Drag and Drop */ +.drop-zone { + display: none; + z-index: -1; +} +.active-drop-target > .drop-zone { + display: flex; + position: fixed; + z-index: 5; + background: rgb(128, 128, 128, .7); + color: white; + font-size: largest; + top: 45px; + bottom: 0px; + left: 20px; + right: 30px; + text-align: center; + justify-content: center; + align-items: center; +} + +/* Colors */ +:root { + --bg: #FFFFFF; + --skills: #FFFFFF; + --wounds: #FFFFFF; + --header: #F5F4F5; + --footer: #F5F4F5; + --gifts: #F5F4F5; + --weapons: #E9E9E9; + --powers: #E9E9E9; + + --fg: #000000; + --grey-text: #7b7979; + --dark-grey: #E9E9E9; + --light-grey: #F5F4F5; + + --wounded: #FFAAAA; +} + +.center { + text-align: center; + margin-left: auto; + margin-right: auto; +} + +div.repeating-container div.repcontrol button.repcontrol_edit, +div.repeating-container div.repcontrol button.repcontrol_add { + font-size: 85%; + padding: 1%; + padding-top: 0%; + padding-bottom: 0%; +} + + +/* icons */ +div.d4, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d4, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d4 { + background-image: url('https://flowpedia.info/img/voltron/d4.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.d6, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d6, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d6 { + background-image: url('https://flowpedia.info/img/voltron/d6.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.d8, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d8, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d8 { + background-image: url('https://flowpedia.info/img/voltron/d8.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.d10, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d10, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d10 { + background-image: url('https://flowpedia.info/img/voltron/d10.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.d12, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d12, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d12 { + background-image: url('https://flowpedia.info/img/voltron/d12.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.upgrade, +div.attribute-upgrade, +.sheet-rolltemplate-roller div.sheet-header div.sheet-upgrade, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-upgrade { + background-image: url('https://flowpedia.info/img/voltron/upgrade.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.downgrade, +div.attribute-downgrade, +.sheet-rolltemplate-roller div.sheet-header div.sheet-downgrade, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-downgrade { + background-image: url('https://flowpedia.info/img/voltron/downgrade.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.ko { + background-image: url('https://flowpedia.info/img/voltron/ko.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} +div.skull { + background-image: url('https://flowpedia.info/img/voltron/skull.png'); + background-repeat: no-repeat; + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + display: inline-block; + width: 80px; + height: 80px; +} + + +.charsheet { + padding: 0px !important; + width: 870px; +} +.charsheet #Voltron { + display: grid; + grid-template-columns: 2% 1fr 2%; + column-gap: .5%; + background-color: var(--bg); + width: 100%; + grid-template-rows: 1fr; + height: 1280px; +} + +div.charsheet div.content-body { + height: max-content; + width: 100%; + display: grid; + grid-template-columns: 1fr; +} +.charsheet #Voltron div.left-margin, +.charsheet #Voltron div.left-margin img, +.charsheet #Voltron div.right-margin, +.charsheet #Voltron div.right-margin img { + height: 1280px; + width: 100%; +} + +div.name-block { + width: 110%; + display: grid; + grid-template-columns: 1fr; + height: 30px; + margin: auto; + padding-right: 5px; + position: relative; + left: -40px; +} +input.name { + margin: auto; + width: 100%; + border: 0px; + border-bottom: 1px solid black; + border-radius: 0px; + line-height: 1px; + background-color: transparent; + font-size: 20px; + font-weight: bold; + text-transform: uppercase; + font-style: italic; +} + +div.tab { + text-transform: uppercase; + margin: auto; + color: var(--grey-text); + text-align: center; + min-height: 2em; + width: 100%; + font-weight: bold; + padding-top: 2%; + font-size: 120%; + min-width: 15em; + white-space: nowrap; +} + + +/* Header */ +div.header { + display: grid; + grid-template-columns: auto 1fr auto; + background-color: var(--header); +} + +div.header div.settings-button { + height: fit-content; +} +div.header div.settings-button input[type="checkbox"] { + height: 2em; + width: 1.75em; + opacity: 0; + position: absolute; + z-index: 2; +} +div.header div.settings-button span.settings-widget { + font-family: pictos; + font-size: 2em; + position: relative; + left: 0em; + top: -.25em; + color: var(--gray-text); +} +div.header div.settings-button input[type="checkbox"]:checked ~ span.settings-widget { + color: #d25757; +} + +div.header div.sheet-type select { + width: fit-content; + text-align: center; +} + +#Voltron input[name="attr_settings"][value="1"] ~ div.content-body .settings { +} +#Voltron input[name="attr_settings"][value="1"] ~ div.content-body .values { + display: none; +} + +#Voltron input[name="attr_settings"][value="0"] ~ div.content-body .settings { + display: none; +} +#Voltron input[name="attr_settings"][value="0"] ~ div.content-body .values { +} + +#Voltron input[name="attr_sheet_type"][value="pc"] ~ div.content-body .npc-only { + display: none; +} +#Voltron input[name="attr_sheet_type"][value="npc"] ~ div.content-body .pc-only { + display: none; +} + +/* Attributes */ +div.char-attributes { + background-color: var(--header); + text-transform: uppercase; + position: relative; + z-index: 1; +} + +div.char-attributes div.contents { + display: grid; + width: 100%; + grid-template-columns: 30% repeat(6, 1fr); + column-gap: .5%; +} + +div.char-attributes div.contents div.settings.selector { + margin: auto; +} +div.char-attributes div.contents div.settings.selector select.die-select { + width: max-content; +} + +div.char-attributes div.contents div.attr-dice-box { + margin: auto; +} +div.char-attributes div.contents div.attr-dice-box div.attribute-dice, +div.char-attributes div.contents div.attr-dice-box div.attribute-downgrade { + height: 4em; + display: none; +} + +/* normal dice displays */ +div.char-attributes div.contents div.attr-box-col input[name^="attr_"][value="d4"] ~ div.attr-dice-box div.d4, +div.char-attributes div.contents div.attr-box-col input[name^="attr_"][value="d6"] ~ div.attr-dice-box div.d6, +div.char-attributes div.contents div.attr-box-col input[name^="attr_"][value="d8"] ~ div.attr-dice-box div.d8, +div.char-attributes div.contents div.attr-box-col input[name^="attr_"][value="d10"] ~ div.attr-dice-box div.d10, +div.char-attributes div.contents div.attr-box-col input[name^="attr_"][value="d12"] ~ div.attr-dice-box div.d12 { + display: inline-block; + height: 4em; + width: 4em; +} + +/* downgrade arrow displays */ +div.char-attributes div.contents div.attr-box-col input[name$="_wound"][value="1"] ~ div.attr-dice-box div.attribute-downgrade { + display: inline-block; + height: 3em; + width: 1.5em; + margin-bottom: 7%; +} +/* color wound bubble when wounded */ +div.char-attributes div.contents div.attr-box-col input[name$="_wound"][value="1"] ~ div.init-wound > span { + background-color: var(--wounded); +} + +div.char-attributes div.init-box-outline, +div.attr-box-outline { + clip-path: polygon(0% 0%, calc(100% - 5px) 0%, 100% 5px, 100% 100%, 5px 100%, 0% calc(100% - 5px), 0% 0%); + background-color: var(--dark-grey); + width: 100%; +} +div.char-attributes div.init-box-outline { + height: 6em; +} +div.char-attributes div.attr-box-outline { + height: 10em; +} + +div.char-attributes div.init-box, div.attr-box { + clip-path: polygon(1px 1px, calc(100% - 6px) 1px, calc(100% - 1px) 6px, calc(100% - 1px) calc(100% - 1px), 6px calc(100% - 1px), 1px calc(100% - 6px), 1px 1px); + background-color: white; + width: 100%; +} +div.char-attributes div.init-box { + display: grid; + grid-template-columns: 1.5em 1fr 1fr 1fr; + height: 6em; +} +div.char-attributes div.attr-box { + display: grid; + grid-template-columns: 1fr; + height: 10em; +} + +div.attr-box-col { + display: grid; + grid-template-rows: auto 1fr auto; +} + +div.char-attributes div.init-text-box { + display: grid; + grid-template-rows: 1fr auto 1fr; +} +div.char-attributes div.init-box div.init-text { + writing-mode: sideways-lr; + text-orientation: sideways; + font-weight: bold; + font-size: 75%; + color: black; + margin-left: 20%; +} +div.char-attributes div.init-box div.init-text button { + border: 1.5px solid transparent; + border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%); + border-image-slice: 1; +} + +div.char-attributes div.init-box-col { + display: grid; + grid-template-rows: 1.25em 1.5em auto; + grid-template-columns: 1fr; +} + +div.char-attributes div.init-header { + font-weight: bold; + font-size: 77%; + text-align: center; +} + +div.char-attributes div.init-box-plot div.plot-points input::-webkit-outer-spin-button, +div.char-attributes div.init-box-plot div.plot-points input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +div.char-attributes div.init-box-plot div.plot-points input[name="attr_plot_points"] { + -moz-appearance: textfield; + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; + font-size: 170%; + background-color: transparent; + border-color: transparent; +} + +/* normal dice displays */ +div.char-attributes div.init-box div.init-box-col input[name^="attr_"][value="d4"] ~ div.attr-dice-box div.d4, +div.char-attributes div.init-box div.init-box-col input[name^="attr_"][value="d6"] ~ div.attr-dice-box div.d6, +div.char-attributes div.init-box div.init-box-col input[name^="attr_"][value="d8"] ~ div.attr-dice-box div.d8, +div.char-attributes div.init-box div.init-box-col input[name^="attr_"][value="d10"] ~ div.attr-dice-box div.d10, +div.char-attributes div.init-box div.init-box-col input[name^="attr_"][value="d12"] ~ div.attr-dice-box div.d12 { + display: inline-block; + height: 2.5em; + width: 2.5em; +} + +/* downgrade arrow displays */ +div.char-attributes div.init-box div.init-box-col input[name$="_wound"][value="1"] ~ div.attr-dice-box div.attribute-downgrade { + display: inline-block; + height: 2em; + width: 1.5em; + margin-bottom: 4%; +} +/* color wound bubble when wounded */ +div.char-attributes div.init-box div.init-box-col input[name$="_wound"][value="1"] ~ div.init-wound > span { + background-color: var(--wounded); +} + +div.char-attributes div.init-box div.init-wound input[name$="_wound"] { + position: relative; +/* z-index: 2; */ + bottom: -17px; + width: 4em; + opacity: 0; +} +div.char-attributes div.init-box div.init-wound > span { + display: block; + position: relative; + width: 6em; + margin-left: auto; + margin-right: auto; +} + +div.char-attributes div.init-box div.init-wound { + text-align: center; + font-size: 60%; + padding-bottom: 10px; +} +div.char-attributes div.init-box div.init-wound > span { + border: 1px var(--grey-text) solid; + border-radius: 1em; + padding: .5em; +} + +div.attr-box div.init-wound > span { + border: 1px var(--grey-text) solid; + border-radius: 1em; + padding: .5em; + width: 6em; + margin-right: auto; + margin-left: auto; +} +div.attr-box div.init-wound { + text-align: center; + font-size: 60%; + padding-bottom: 10px; + display: grid; + grid-template-columns: 1fr; +} +div.char-attributes div.attr-box div.init-wound input[name$="_wound"] { + position: relative; + z-index: -1; + bottom: -1.55em; + height: 1.5em; + width: 4em; + opacity: 0; + margin-left: auto; + margin-right: auto; + +} + +div.char-attributes div.contents div.left-column div.init-box-resolve { + display: grid; + grid-template-columns: 6em repeat(5, 1fr); + column-gap: 1%; + padding-right: 5%; + position: relative; + top: -2%; + z-index: 2; +} +div.char-attributes div.contents div.left-column div.init-box-resolve div.init-header { + margin: auto; +} +div.char-attributes div.contents div.left-column div.init-box-resolve div.circle-box { + height: 2em; +} +div.char-attributes div.contents div.left-column div.init-box-resolve input[type="checkbox"] { + display: inline-block; + height: 2em; + width: 2em; + z-index: 2; + position: relative; + opacity: 0; +} +div.char-attributes div.contents div.left-column div.init-box-resolve span.resolve-circle { + display: inline-block; + height: 2em; + width: 2em; + border: 1px var(--grey-text) solid; + border-radius: 1em; + background-color: var(--bg); + position: relative; + top: -2em; +} +div.char-attributes div.contents div.left-column div.init-box-resolve input[name*="_resolve_"]:checked ~ span.resolve-circle { + background-color: var(--wounded); +} + +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed { + display: grid; + grid-template-columns: 1fr 1fr; + column-gap: 5%; + padding-top: 2%; +} + +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-plot-outline, div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed-outline { + clip-path: polygon(0% 0%, calc(100% - 5px) 0%, 100% 5px, 100% 100%, 5px 100%, 0% calc(100% - 5px), 0% 0%); + background-color: var(--dark-grey); + width: 100%; +} +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-plot, div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed { + clip-path: polygon(1px 1px, calc(100% - 6px) 1px, calc(100% - 1px) 6px, calc(100% - 1px) calc(100% - 1px), 6px calc(100% - 1px), 1px calc(100% - 6px), 1px 1px); + background-color: white; + width: 100%; + height: 4em; +} + +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-plot div.init-header span { + font-size: 75%; +} +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed div.init-header { + text-align: left; + padding-left: 10%; +} + +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed { + text-align: center; +} +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed div.speed { + font-size: 80%; +} +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed div.speed input::-webkit-outer-spin-button, +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed div.speed input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed div.speed input { + -moz-appearance: textfield; +} +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed input { + height: 1em; + width: 2em; + font-size: 125%; + font-weight: bold; + text-align: center; + background-color: transparent; + border-color: transparent; +} +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed span { + display: inline-block; + vertical-align: middle; +} + + +div.char-attributes div.contents div.left-column div.init-box-plot-and-speed div.init-box-speed > span { + font-size: 85%; + text-transform: none; +} + +div.char-attributes div.feat-rolls { + position: relative; + top: -10%; +} + +div.char-attributes div.feat-rolls div.feat-roll-header { + text-transform: uppercase; + font-weight: bold; + font-size: 65%; + color: black; + text-align: center; +} + +div.char-attributes div.feat-rolls div.feat-roll-bubbles { + position: relative; + display: grid; + grid-template-columns: repeat(5, 1fr); +} + +div.char-attributes div.contents div.feat-d12 { + height: 2em; + width: 2em; + margin: auto; + margin-top: 0px; +} + +div.char-attributes div.contents div.feat-roll-bubbles div.circle-box { + +} +div.char-attributes div.contents div.feat-roll-bubbles div.circle-box input[type="checkbox"] { + display: inline-block; + height: 1.5em; + width: 1.25em; + z-index: 2; + position: relative; + opacity: 0; +} +div.char-attributes div.contents div.feat-roll-bubbles div.circle-box span.feat-oval { + height: 1.5em; + width: 1.25em; + border: 1px var(--grey-text) solid; + border-radius: 1em; + background-color: var(--bg); + margin: auto; + display: inline-block; + position: relative; + top: -1.5em; +} +div.char-attributes div.contents div.feat-roll-bubbles div.circle-box input[name*="_feat_roll_"]:checked ~ span.feat-oval { + background-color: var(--wounded); +} + + +div.char-attributes div.channeling-box div.attr-box-outline { + height: 11em; +} +div.char-attributes div.channeling-box div.attr-box-outline div.attr-box { + height: 11em; +} +div.char-attributes div.channeling-box div.init-wound { + padding-bottom: 3em; +} + +/* Skills */ +div.skills { + background-color: var(--skills); + position: relative; + top: -60px; + width: 100%; +} + +div.skills div.bar { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + background-color: var(--header); +} + +div.skills div.bar div.tab { + background-image: url('https://flowpedia.info/img/voltron/w-tab.png'); + background-repeat: no-repeat; + background-color: var(--header); + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + padding-top: 2%; + font-size: 120%; + min-width: 100%; + white-space: nowrap; + position: relative; + z-index: 2; +} + +div.skills div.bar div.spacer { + +} + +div.skills div.header { + background-color: var(--skills); + color: var(--grey-text); + display: inline-block; + height: 3em; + width: 100%; + text-align: center; + margin: auto; + font-size: 75%; + position: relative; + z-index: 2; +} +div.skills div.header div.no-skill { + display: inline-block; + width: 100%; + margin: auto; + position: relative; + z-index: 2; + top: -15%; +} +div.skills div.header div.standard-complex { + display: grid; + width: 100%; + grid-template-columns: 1fr auto 2em auto 1fr; + position: relative; + z-index: 2; + top: -25%; +} +div.skills div.header div.standard-complex div.standard-feat, +div.skills div.header div.standard-complex div.complex-feat { + display: grid; + width: 100%; + grid-template-columns: auto auto auto; +} + +div.skills div.header div.d4, div.skills div.header div.d6, div.skills div.header div.d8 { + height: 1.5em; + width: 1.5em; +} + + +div.skills div.contents { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 1%; + row-gap: 5%; + width: 100%; +} + +div.skills div.contents div.box-outline { + clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 15px 100%, 0% calc(100% - 15px), 0% 0%); + background-color: var(--dark-grey); + width: 100%; +} +div.skills div.contents div.box { + clip-path: polygon(1px 1px, calc(100% - 16px) 1px, calc(100% - 1px) 16px, calc(100% - 1px) calc(100% - 1px), 16px calc(100% - 1px), 1px calc(100% - 16px), 1px 1px); + background-color: white; + width: 100%; + height: 5em; + display: grid; + grid-template-columns: 1fr 5em; + padding: 3% 4% 0 0; +} +div.skills div.contents div.box-outline input[name$="_name"][value=""] ~ div.box { + opacity: 70%; + color: var(--grey-text); +} + +div.skills div.contents div.box div.wound-text { + font-size: 75%; + text-transform: uppercase; + margin: auto; + text-align: center; + font-weight: bold; +} + +div.skills div.contents div.box div.skill-name { + text-align: center; + margin-top: auto; + margin-bottom: auto; + font-size: larger; + font-weight: bold; + width: max-content; + color: var(--dark-gray-text); +} + +div.skills div.contents div.box-outline div.box div.skill div.skill-die div.d4, +div.skills div.contents div.box-outline div.box div.skill div.skill-die div.d6, +div.skills div.contents div.box-outline div.box div.skill div.skill-die div.d8, +div.skills div.contents div.box-outline div.box div.skill div.skill-die div.d10, +div.skills div.contents div.box-outline div.box div.skill div.skill-die div.d12 { + display: none; +} +div.skills div.contents div.box-outline div.box div.skill div.downgrade, +div.skills div.contents div.box-outline div.box div.skill div.upgrade { + opacity: 0; + height: 3em; + width: 1.5em; +} + +div.skills div.contents div.box-outline div.box div.skill { + display: inline-grid; + grid-template-columns: 1fr 1.5em 3em 1.5em; + padding: 0% 0% 0% 5%; + margin-top: auto; + margin-bottom: auto; +} +div.skills div.contents div.box-outline div.box div.skill select { + width: fit-content; +} +div.skills div.contents div.box-outline div.box input[name$="_die"][value="d4"] ~ div.skill div.skill-die div.d4, +div.skills div.contents div.box-outline div.box input[name$="_die"][value="d6"] ~ div.skill div.skill-die div.d6, +div.skills div.contents div.box-outline div.box input[name$="_die"][value="d8"] ~ div.skill div.skill-die div.d8, +div.skills div.contents div.box-outline div.box input[name$="_die"][value="d10"] ~ div.skill div.skill-die div.d10, +div.skills div.contents div.box-outline div.box input[name$="_die"][value="d12"] ~ div.skill div.skill-die div.d12 { + display: inline-block; + height: 3em; + width: 3em; +} + + +div.skills div.contents div.box-outline div.box input[name$="_upgrade"][value="1"] ~ div.skill div.upgrade { + height: 3em; + width: 1.5em; + margin-top: 4%; + opacity: 1; +} + +div.skills div.contents div.box div.wound-box-outline { + clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px), 0% 0%); + background-color: var(--dark-grey); + width: 4em; + margin: auto; +} +div.skills div.contents div.box div.wound-box { + clip-path: polygon(1px 1px, calc(100% - 11px) 1px, calc(100% - 1px) 11px, calc(100% - 1px) calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px), 1px 1px); + background-color: white; + width: 4em; + height: 2.5em; +} +div.skills div.contents div.box div.wound-box input[type="checkbox"] { + height: 100%; + width: 100%; + opacity: 0; + display: none; +} + + +/* color wound bubble when wounded */ +div.skills div.contents div.box-outline div.box input[name$="_wound"][value="1"] ~ div div.wound-box-outline div.wound-box { + background-color: var(--wounded); +} + +div.skills div.contents div.box-outline div.box input[name$="_wound"][value="1"] ~ div.skill div.downgrade { + height: 3em; + width: 1.5em; + margin-top: 4%; + opacity: 1; +} + + + +/* Gifts */ +div.gifts { + background-color: var(--gifts); + position: relative; + top: -30px; +} + +div.gifts div.bar { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + background-color: var(--skills); +} + +div.gifts div.bar div.tab { + background-image: url('https://flowpedia.info/img/voltron/lg-tab.png'); + background-repeat: no-repeat; + background-color: var(--skills); + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + padding-top: 2%; + font-size: 120%; + min-width: 100%; + white-space: nowrap; +} + +div.gifts div.contents { + width: 98%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: 2%; + margin: auto; + padding-top: 2%; + padding-bottom: 1%; +} + +div.gifts div.contents textarea.gift { + border: 1px var(--dark-grey) solid; + border-radius: 1em; + height: 5em; + width: auto; + background-color: var(--bg); +} + + +/* Weapons / Powers */ +div.weapons-powers { + display: grid; + grid-template-columns: 1fr 1fr; + background-color: var(--skills); + position: relative; + top: -30px; +} + + +/* Weapons */ +div.weapons { + background-color: var(--weapons); +} + +div.weapons div.bar { + display: grid; + grid-template-columns: 1fr 20em 1fr; + background-color: var(--gifts); +} +div.weapons div.contents div.bar, div.weapons div.contents div.bar div.tab { + grid-template-columns: 1fr auto 1fr; + background-color: var(--weapons); + font-size: 85%; + height: 2em; + text-align: center; +} +div.weapons div.contents div.bar div.tab span { + position: relative; + top 3px; +} +div.weapons div.contents div.bar div.tab div.d4, +div.weapons div.contents div.bar div.tab div.d6, +div.weapons div.contents div.bar div.tab div.d8, +div.weapons div.contents div.bar div.tab div.d10, +div.weapons div.contents div.bar div.tab div.d12 { + width: 1em; + height: 1em; +} + +div.weapons div.bar div.tab { + background-image: url('https://flowpedia.info/img/voltron/dg-tab.png'); + background-repeat: no-repeat; + background-color: var(--gifts); + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + padding-top: 2%; + font-size: 120%; + min-width: 15em; + white-space: nowrap; +} +div.weapons div.contents div.equipment-header div.bar div.tab { + font-size: 140%; +} + +div.weapons div.contents div.weaponlist-outline, +div.weapons div.contents div.equipment-outline { + clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px), 0% 0%); + background-color: var(--dark-grey); + width: 95%; + margin: auto; + position: relative; + z-index: 3; +} +div.weapons div.contents div.weaponlist-box, +div.weapons div.contents div.equipment-box { + clip-path: polygon(1px 1px, calc(100% - 11px) 1px, calc(100% - 1px) 11px, calc(100% - 1px) calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px), 1px 1px); + background-color: white; + width: 100%; + height: 8em; + margin: auto; +} + +div.weapons div.contents div.weaponlist-box.repeating-container div.headers, +div.weapons div.contents div.weaponlist-box.repeating-container div.repeating_weapons, +div.weapons div.contents div.weaponlist-box.repeating-container div.inputs { + display: grid; + grid-template-columns: 22% 12% 14% 10% 1fr; +} +div.weapons div.contents div.weaponlist-box div.header { + font-size: 70%; + font-weight: bold; + text-transform: uppercase; + background-color: var(--bg); +} +div.weapons div.contents div.weaponlist-box.repeating-container { + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: thin; +} +div.weapons div.contents div.weaponlist-box.repeating-container div.inputs input { + width: 100%; + border: unset; + border-top: 1px var(--grey-text) solid; + border-radius: 0px; + font-size: 85%; + padding: 1%; + background-color: var(--bg); +} + + +div.weapons div.contents div.equipment-box.repeating-container div.headers, +div.weapons div.contents div.equipment-box.repeating-container div.repeating_equipment, +div.weapons div.contents div.equipment-box.repeating-container div.inputs { + display: grid; + grid-template-columns: 25% 1fr; +} +div.weapons div.contents div.equipment-box div.header { + font-size: 70%; + font-weight: bold; + text-transform: uppercase; + background-color: var(--bg); +} +div.weapons div.contents div.equipment-box.repeating-container { + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: thin; +} +div.weapons div.contents div.equipment-box.repeating-container div.inputs input { + width: 100%; + border: unset; + border-top: 1px var(--grey-text) solid; + border-radius: 0px; + font-size: 85%; + padding: 1%; + background-color: var(--bg); +} + + + +/* Powers */ +div.powers { + background-color: var(--powers); +} + +div.powers div.bar { + display: grid; + grid-template-columns: 1fr 20em 1fr; + background-color: var(--gifts); +} + +div.powers div.contents div.bar, div.weapons div.contents div.bar div.tab { + grid-template-columns: 1fr auto 1fr; + background-color: var(--weapons); + font-size: 85%; + height: 2em; + text-align: center; +} +div.powers div.contents div.bar div.tab span, +div.powers div.contents div.bar div.tab input { + position: relative; + top: -10px; + text-align: center; + background-color: var(--powers); + border: unset; + text-transform: uppercase; +} +div.powers div.bar div.tab { + background-image: url('https://flowpedia.info/img/voltron/dg-tab.png'); + background-repeat: no-repeat; + background-color: var(--gifts); + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + padding-top: 2%; + font-size: 120%; + min-width: 15em; + white-space: nowrap; +} + +div.powers div.contents div.lion-stats-outline { + clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px), 0% 0%); + background-color: var(--dark-grey); + width: 95%; + margin: auto; +} +div.powers div.contents div.lion-stats-box { + clip-path: polygon(1px 1px, calc(100% - 11px) 1px, calc(100% - 1px) 11px, calc(100% - 1px) calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px), 1px 1px); + background-color: white; + width: 100%; + height: 15em; + margin: auto; +} + +div.powers div.contents div.bar div.tab { + position: relative; + top 3px; + background-image: url('https://flowpedia.info/img/voltron/dg-tab.png'); + background-repeat: no-repeat; + background-color: var(--powers); + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + padding-top: 2%; + font-size: 120%; + min-width: 15em; + white-space: nowrap; + font-size: 90%; +} + +div.powers div.contents div.lion-stats-box div.lion-attributes { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + padding-top: 1em; + padding-bottom: 1em; +} +div.powers div.contents div.lion-stats-box div.lion-attributes div.lion-attribute { + padding-top: 1%; + padding-bottom: 1%; +} +div.powers div.contents div.lion-stats-box div.attr-box-outline { + clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px), 0% 0%); + background-color: var(--dark-grey); + width: 3.5em; + margin: auto; +} +div.powers div.contents div.lion-stats-box div.attr-box { + clip-path: polygon(1px 1px, calc(100% - 11px) 1px, calc(100% - 1px) 11px, calc(100% - 1px) calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px), 1px 1px); + background-color: white; + width: 3.5em; + height: 2.5em; +} +div.powers div.contents div.lion-stats-box div.attr-text { + font-size: 70%; + text-transform: uppercase; + margin: auto; + text-align: center; + font-weight: bold; +} +div.powers div.contents div.lion-stats-box div.attr-box div.lion-speed-input { + display: block; + width: 100%; + height: 100%; +} +div.powers div.contents div.lion-stats-box div.attr-box input { + width: 2.5em; + text-align: center; + background-color: var(--bg); + border: unset; + margin-top: .25em; + margin-left: .5em; +} +div.powers div.contents div.lion-attributes div.lion-attribute div.attr-box-outline div.attr-box div.lion-attr-die div.d4, +div.powers div.contents div.lion-attributes div.lion-attribute div.attr-box-outline div.attr-box div.lion-attr-die div.d6, +div.powers div.contents div.lion-attributes div.lion-attribute div.attr-box-outline div.attr-box div.lion-attr-die div.d8, +div.powers div.contents div.lion-attributes div.lion-attribute div.attr-box-outline div.attr-box div.lion-attr-die div.d10, +div.powers div.contents div.lion-attributes div.lion-attribute div.attr-box-outline div.attr-box div.lion-attr-die div.d12 { + display: none; +} +div.powers div.contents div.lion-attributes div.lion-attribute input[name$="_die"][value="d4"] ~ div.attr-box-outline div.attr-box div.lion-attr-die div.d4, +div.powers div.contents div.lion-attributes div.lion-attribute input[name$="_die"][value="d6"] ~ div.attr-box-outline div.attr-box div.lion-attr-die div.d6, +div.powers div.contents div.lion-attributes div.lion-attribute input[name$="_die"][value="d8"] ~ div.attr-box-outline div.attr-box div.lion-attr-die div.d8, +div.powers div.contents div.lion-attributes div.lion-attribute input[name$="_die"][value="d10"] ~ div.attr-box-outline div.attr-box div.lion-attr-die div.d10, +div.powers div.contents div.lion-attributes div.lion-attribute input[name$="_die"][value="d12"] ~ div.attr-box-outline div.attr-box div.lion-attr-die div.d12 { + display: block; + height: 2.5em; + width: 2.5em; + margin-left: auto; + margin-right: auto; +} + +div.powers div.contents div.lion-stats-box div.lion-weapons div.headers, +div.powers div.contents div.lion-stats-box div.lion-weapons div.repeating_lion_weapons, +div.powers div.contents div.lion-stats-box div.lion-weapons div.inputs { + display: grid; + grid-template-columns: 22% 12% 14% 10% 1fr; + padding-left: 1%; + padding-right: 1%; +} +div.powers div.contents div.lion-stats-box div.header { + font-size: 70%; + font-weight: bold; + text-transform: uppercase; + background-color: var(--bg); +} +div.powers div.contents div.lion-stats-box div.inputs input { + width: 100%; + border: unset; + border-top: 1px var(--grey-text) solid; + border-radius: 0px; + font-size: 85%; + padding: 1%; + background-color: var(--bg); +} +div.powers div.contents div.lion-stats-box div.lion-weapons div.fieldset { + overflow-x: hidden; + overflow-y: auto; + scrollbar-width: thin; + height: 8em; +} + +/* NPC Notes */ +div.powers.npc-only div.contents { + height: 100%; + width: 100%; +} + +div.powers.npc-only div.contents div.lion-stats-outline div.lion-stats-box div.npc-notes { + width: 90%; + height: 90%; + margin: auto; + padding-top: 5%; +} + +div.powers.npc-only div.contents div.lion-stats-outline div.lion-stats-box div.npc-notes input { + width: 100%; + height: 100%; +} + +/* Wounds */ +div.wounds { + background-color: var(--wounds); + position: relative; + top: -50px; +} + +div.wounds div.bar { + display: grid; + grid-template-columns: 1fr 20em 10%; + background-color: var(--weapons); +} + +div.wounds div.bar div.tab { + background-image: url('https://flowpedia.info/img/voltron/w-tab.png'); + background-repeat: no-repeat; + background-color: var(--weapons); + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + padding-top: 2%; + font-size: 120%; + min-width: 15em; + white-space: nowrap; +} + +div.wounds div.contents { + display: grid; + grid-template-columns: 35% 10% 15% 1fr; + padding-left: 1%; + padding-right: 1%; +} + +div.wounds div.contents div.defense div.header, +div.wounds div.contents div.fatigue div.header, +div.wounds div.contents div.upgrades div.header { + display: inline-block; + width: 100%; + margin-left: auto; + margin-right: auto; + background-color: var(--wounds); + font-size: 95%; + text-transform: uppercase; + color: var(--grey-text); + font-weight: bold; + text-align: center; +} + +div.wounds div.contents div.defense { + +} +div.wounds div.contents div.defense div.defense-box-outline { + clip-path: polygon(0% 0%, calc(100% - 15px) 0%, 100% 15px, 100% 100%, 15px 100%, 0% calc(100% - 15px), 0% 0%); + background-color: var(--dark-grey); + width: 100%; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box { + clip-path: polygon(1px 1px, calc(100% - 16px) 1px, calc(100% - 1px) 16px, calc(100% - 1px) calc(100% - 1px), 16px calc(100% - 1px), 1px calc(100% - 16px), 1px 1px); + background-color: white; + width: 100%; + height: 10em; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box input[type="text"] { + width: 85%; + grid-area: 1 / 1 / 1 / 4; + margin-left: auto; + margin-right: auto; + background-color: var(--wounds); + height: 1.5em; + text-align: center; + text-transform: uppercase; + font-weight: bold; + font-size: 70%; + margin-top: 1.5%; +} + +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.defense-die-outline { + clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 10px, 100% 100%, 10px 100%, 0% calc(100% - 10px), 0% 0%); + background-color: var(--dark-grey); + width: 70%; + margin: auto; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.defense-die-outline div.defense-die { + clip-path: polygon(1px 1px, calc(100% - 11px) 1px, calc(100% - 1px) 11px, calc(100% - 1px) calc(100% - 1px), 11px calc(100% - 1px), 1px calc(100% - 11px), 1px 1px); + background-color: white; + width: 100%; + height: 4em; + margin: auto; + padding-top: .5em; +} + + +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box { + display: grid; + grid-template-columns: 1fr; + height: 7em; + width: 100%; + text-align: center; + text-transform: uppercase; + font-size: 90%; + font-weight: bold; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.d4, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.d6, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.d8, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.d10, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.d12, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.downgrade, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.upgrade { + display: none; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_armor"][value="d4"] ~ div.defense-die-outline div.defense-die div.d4, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_armor"][value="d6"] ~ div.defense-die-outline div.defense-die div.d6, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_armor"][value="d8"] ~ div.defense-die-outline div.defense-die div.d8, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_armor"][value="d10"] ~ div.defense-die-outline div.defense-die div.d10, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_armor"][value="d12"] ~ div.defense-die-outline div.defense-die div.d12, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_agility"][value="d4"] ~ div.defense-die-outline div.defense-die div.d4, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_agility"][value="d6"] ~ div.defense-die-outline div.defense-die div.d6, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_agility"][value="d8"] ~ div.defense-die-outline div.defense-die div.d8, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_agility"][value="d10"] ~ div.defense-die-outline div.defense-die div.d10, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_agility"][value="d12"] ~ div.defense-die-outline div.defense-die div.d12, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_channelling"][value="d4"] ~ div.defense-die-outline div.defense-die div.d4, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_channelling"][value="d6"] ~ div.defense-die-outline div.defense-die div.d6, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_channelling"][value="d8"] ~ div.defense-die-outline div.defense-die div.d8, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_channelling"][value="d10"] ~ div.defense-die-outline div.defense-die div.d10, +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_channelling"][value="d12"] ~ div.defense-die-outline div.defense-die div.d12 { + display: inline-block; + height: 3em; + width: 3em; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_wound"][value="1"] ~ div.defense-die-outline div.defense-die div.downgrade { + display: inherit; + height: 3em; + width: 1.5em; + float: left; + position: relative; + right: -5px; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[type="checkbox"] { + z-index: -1; + position: relative; + top: 12px; + width: 100%; + opacity: 0; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[type="checkbox"][name="attr_armor_wound"] { + z-index: 2; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.init-wound { + text-align: center; + font-size: 60%; + padding-bottom: 10px; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box div.init-wound > span { + border: 1px var(--grey-text) solid; + border-radius: 1em; + padding: .5em; +} +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box input[name$="_wound"]:checked ~ div.init-wound > span { + background-color: var(--wounded); +} + +div.wounds div.contents div.defense div.defense-box-outline div.defense-box div.def-box select.die-select { + width: max-content; +} + +div.wounds div.contents div.fatigue { + display: grid; + grid-template-columns: 1fr; + height: 12em; +} +div.wounds div.contents div.fatigue div.header { + height: 1em; +} +div.wounds div.contents div.fatigue div.bubble { + width: 100%; + margin-left: auto; + margin-right: auto; + text-align:center; + height: 2.25px; +} +div.wounds div.contents div.fatigue div.bubble span { + border: 1px var(--grey-text) solid; + border-radius: 2em; + padding: .5em; + display: inline-block; + width: 4em; + position: relative; + top: -29.5px; +} +div.wounds div.contents div.fatigue div.bubble input[name*="fatigue"] { + position: relative; + z-index: 2; + width: 4em; + height: 2em; + opacity: 0; +} +div.wounds div.contents div.fatigue div.bubble input[name*="_fatigue"]:checked ~ span { + background-color: var(--wounded); +} + +div.wounds div.contents div.upgrades { +} +div.wounds div.contents div.upgrades div.mods-dice-box div.upgrades-box, +div.wounds div.contents div.upgrades div.mods-dice-box div.dice-box { + display: block; + text-align: center; + margin-top: auto; + margin-bottom: auto; +} +div.wounds div.contents div.upgrades div.mods-dice-box { + display: grid; + grid-template-columns: 1fr 1fr; + width: 100%; +} +div.wounds div.contents div.upgrades div.mods-dice-box div.upgrades-box div.upgrade, +div.wounds div.contents div.upgrades div.mods-dice-box div.upgrades-box div.downgrade { + display: inline-block; + width: 4em; + height: 4em; +} +div.wounds div.contents div.upgrades div.mods-dice-box div.dice-box div.d4, +div.wounds div.contents div.upgrades div.mods-dice-box div.dice-box div.d6, +div.wounds div.contents div.upgrades div.mods-dice-box div.dice-box div.d8, +div.wounds div.contents div.upgrades div.mods-dice-box div.dice-box div.d10, +div.wounds div.contents div.upgrades div.mods-dice-box div.dice-box div.d12 { + display: inline-block; + width: 3em; + height: 3em; +} + + +div.wounds div.contents div.wound-track div.header { + width: 100%; + display: inline-block; + background-color: var(--wounds); + font-weight: bold; +} +div.wounds div.wound-track div.header div.difficulty { + display: inline-block; + width: 100%; + background-color: var(--wounds); + text-align: center; + font-size: 70%; + padding-right: 29%; +} +div.wounds div.wound-track div.track { + display: grid; + grid-template-columns: 1fr 1.5em 1fr; + width: 100%; + grid-column-gap: 0px; + height: 22em; + position: relative; + z-index: 2; +} +div.wounds div.wound-track div.track div.left, +div.wounds div.wound-track div.track div.right { + display: grid; + grid-template-columns: 1fr; + width: 100%; + grid-row-gap: 0px; +} +div.wounds div.wound-track div.track div.left div.step, +div.wounds div.wound-track div.track div.right div.step, +div.wounds div.wound-track div.track div.last-step { + display: grid; + grid-template-columns: auto 1fr; + width: 100%; + border: 1px var(--grey-text) solid; + border-radius: 2em; +} + +div.wounds div.wound-track div.track div.right div.step.wound-10 div.downgrade { + grid-area: 1/1/1/2; +} +div.wounds div.wound-track div.track div.right div.step.wound-10 span.step { + grid-area: 1/2/1/3; +} +div.wounds div.wound-track div.track div.right div.step input[type="checkbox"][name="attr_wound_10"] { + position: relative; + z-index: 2; + grid-area: 1/1/1/3; + opacity: 0; +} + + +div.wounds div.wound-track div.track div.left span.step, +div.wounds div.wound-track div.track div.right span.step { + font-size: 75%; + font-weight: bold; + text-align: center; + text-transform: uppercase; + margin-top: auto; + margin-bottom: auto; + width: 75%; +} +div.wounds div.wound-track div.track div.left select.step, +div.wounds div.wound-track div.track div.right select.step { + font-size: 75%; + font-weight: bold; + text-align: center; + text-transform: uppercase; + width: 90%; + margin-top: auto; + margin-bottom: auto; +} + +div.wounds div.wound-track div.track input[name="attr_wound_1"]:not([value=""]) ~ div.left div.step.wound-1, +div.wounds div.wound-track div.track input[name="attr_wound_1"]:not([value=""]) ~ div.left div.step.wound-1 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_2"]:not([value=""]) ~ div.left div.step.wound-2, +div.wounds div.wound-track div.track input[name="attr_wound_2"]:not([value=""]) ~ div.left div.step.wound-2 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_3"]:not([value=""]) ~ div.left div.step.wound-3, +div.wounds div.wound-track div.track input[name="attr_wound_3"]:not([value=""]) ~ div.left div.step.wound-3 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_4"]:not([value=""]) ~ div.left div.step.wound-4, +div.wounds div.wound-track div.track input[name="attr_wound_4"]:not([value=""]) ~ div.left div.step.wound-4 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_5"]:not([value=""]) ~ div.left div.step.wound-5, +div.wounds div.wound-track div.track input[name="attr_wound_5"]:not([value=""]) ~ div.left div.step.wound-5 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_6"]:not([value=""]) ~ div.left div.step.wound-6, +div.wounds div.wound-track div.track input[name="attr_wound_6"]:not([value=""]) ~ div.left div.step.wound-6 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_7"]:not([value=""]) ~ div.right div.step.wound-7, +div.wounds div.wound-track div.track input[name="attr_wound_7"]:not([value=""]) ~ div.right div.step.wound-7 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_8"]:not([value=""]) ~ div.right div.step.wound-8, +div.wounds div.wound-track div.track input[name="attr_wound_8"]:not([value=""]) ~ div.right div.step.wound-8 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_9"]:not([value=""]) ~ div.right div.step.wound-9, +div.wounds div.wound-track div.track input[name="attr_wound_9"]:not([value=""]) ~ div.right div.step.wound-9 select { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_10"]:not([value=""]):not([value="0"]) ~ div.right div.step.wound-10 { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_ko"]:not([value=""]):not([value="0"]) ~ div.right div.last-step.wound-11 { + background-color: var(--wounded); +} +div.wounds div.wound-track div.track input[name="attr_wound_dead"]:not([value=""]):not([value="0"]) ~ div.right div.last-step.wound-12 { + background-color: var(--wounded); +} + +div.wounds div.wound-track div.track input[name*="_wound_"][value="Athletics"] ~ div.left div.step select.step option.athletics, +div.wounds div.wound-track div.track input[name*="_hide_Athletics"][value="1"] ~ div.left div.step select.step option.athletics, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Outdoors"] ~ div.left div.step select.step option.outdoors, +div.wounds div.wound-track div.track input[name*="_hide_Outdoors"][value="1"] ~ div.left div.step select.step option.outdoors, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Close Combat"] ~ div.left div.step select.step option.close-combat, +div.wounds div.wound-track div.track input[name*="_hide_Close Combat"][value="1"] ~ div.left div.step select.step option.close-combat, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Piloting"] ~ div.left div.step select.step option.piloting, +div.wounds div.wound-track div.track input[name*="_hide_Piloting"][value="1"] ~ div.left div.step select.step option.piloting, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Ranged Combat"] ~ div.left div.step select.step option.ranged-combat, +div.wounds div.wound-track div.track input[name*="_hide_Ranged Combat"][value="1"] ~ div.left div.step select.step option.ranged-combat, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Engagement"] ~ div.left div.step select.step option.engagement, +div.wounds div.wound-track div.track input[name*="_hide_Engagement"][value="1"] ~ div.left div.step select.step option.engagement, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Stealth"] ~ div.left div.step select.step option.stealth, +div.wounds div.wound-track div.track input[name*="_hide_Stealth"][value="1"] ~ div.left div.step select.step option.stealth, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Tactics"] ~ div.left div.step select.step option.tactics, +div.wounds div.wound-track div.track input[name*="_hide_Tactics"][value="1"] ~ div.left div.step select.step option.tactics, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Awareness"] ~ div.left div.step select.step option.awareness, +div.wounds div.wound-track div.track input[name*="_hide_Awareness"][value="1"] ~ div.left div.step select.step option.awareness, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Biotechnology"] ~ div.left div.step select.step option.biotechnology, +div.wounds div.wound-track div.track input[name*="_hide_Biotechnology"][value="1"] ~ div.left div.step select.step option.biotechnology, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Electronics"] ~ div.left div.step select.step option.electronics, +div.wounds div.wound-track div.track input[name*="_hide_Electronics"][value="1"] ~ div.left div.step select.step option.electronics, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Engineering"] ~ div.left div.step select.step option.engineering, +div.wounds div.wound-track div.track input[name*="_hide_Engineering"][value="1"] ~ div.left div.step select.step option.engineering, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Medicine"] ~ div.left div.step select.step option.medicine, +div.wounds div.wound-track div.track input[name*="_hide_Medicine"][value="1"] ~ div.left div.step select.step option.medicine, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Acting"] ~ div.left div.step select.step option.acting, +div.wounds div.wound-track div.track input[name*="_hide_Acting"][value="1"] ~ div.left div.step select.step option.acting, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Persuasion"] ~ div.left div.step select.step option.persuasion, +div.wounds div.wound-track div.track input[name*="_hide_Persuasion"][value="1"] ~ div.left div.step select.step option.persuasion { + display: none; +} + +div.wounds div.wound-track div.track input[name*="_wound_"][value="Vitality"] ~ div.left div.step select.step option.vitality, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Agility"] ~ div.left div.step select.step option.agility, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Resolve"] ~ div.left div.step select.step option.resolve, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Intellect"] ~ div.left div.step select.step option.intellect, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Influence"] ~ div.left div.step select.step option.influence, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Channelling"] ~ div.left div.step select.step option.channelling, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Vitality"] ~ div.right div.step select.step option.vitality, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Agility"] ~ div.right div.step select.step option.agility, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Resolve"] ~ div.right div.step select.step option.resolve, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Intellect"] ~ div.right div.step select.step option.intellect, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Influence"] ~ div.right div.step select.step option.influence, +div.wounds div.wound-track div.track input[name*="_wound_"][value="Channelling"] ~ div.right div.step select.step option.channelling { + display: none; +} + + +div.wounds div.wound-track div.track div.step div.downgrade { + display: inline-block; + margin-top: auto; + margin-bottom: auto; + height: 3em; + width: 2em; +} + +div.wounds div.wound-track div.track div.last-step { + display: grid; + grid-template-columns: 1fr; +} +div.wounds div.wound-track div.track div.ko, +div.wounds div.wound-track div.track div.skull { + display: inline-block; + margin: auto; + height: 3em; + width: 2em; + grid-area: 1/1/1/1 +} +div.wounds div.wound-track div.track div.ko + input, +div.wounds div.wound-track div.track div.skull + input { + position: relative; + z-index: 2; + grid-area: 1/1/1/1; + opacity: 0; +} + +#triangle-down { + width: 0; + height: 0; + border-left: 5em solid transparent; + border-right: 5em solid transparent; + border-top: .75em solid var(--grey-text); + margin-left: auto; + margin-right: auto; +} +div.wounds div.wound-track div.track div.middle img.middle-arrow { + height: 97%; + padding-top: 7px; +} + +/* Footer */ +div.footer { + background-color: var(--footer); + position: relative; + top: -65px; +} + +div.footer div.bar { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + background-color: var(--wounds); +} + +div.footer div.bar div.tab { + background-image: url('https://flowpedia.info/img/voltron/lg-tab.png'); + background-repeat: no-repeat; + background-color: var(--wounds); + background-position-x: center; + background-position-y: bottom; + background-size: 100% 100%; + font-size: 65%; + text-transform: unset; + min-height: 3em; + min-width: 38em; + padding-top: 2%; +} + + +/* Dice Roller Styles */ +/* =============================== * + * [Object] Modal * + * =============================== */ +.modal { +/* + opacity: 0; + visibility: hidden; +*/ + display: inline; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + text-align: left; + background: rgba(0,0,0, .9); + transition: opacity .25s ease; +} +.modal__bg { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + cursor: pointer; +} +.modal-state[value="0"] + .modal { + height: 0px; + width: 0px; +} +.modal-state[value="1"] + .modal { + opacity: 1; + visibility: visible; + display: inline; +} +.modal-state[value="1"] + .modal .modal__inner { + top: 0; +} +.modal__inner { + transition: top .25s ease; + position: absolute; + top: -20%; + right: 0; + bottom: 0; + left: 0; + width: 65%; + margin: auto; + overflow: auto; + background: #fff; + border-radius: 5px; + padding: 1em 2em; + height: fit-content; +} +.modal__close { + position: absolute; + right: 1em; + top: 1em; + width: 1.1em; + height: 1.1em; + cursor: pointer; +} +.modal__close:after, +.modal__close:before { + content: ''; + position: absolute; + width: 2px; + height: 1.5em; + background: #ccc; + display: block; + transform: rotate(45deg); + left: 100%; + margin: -3px 0 0 -1px; + top: -10; +} +.modal__close:hover:after, +.modal__close:hover:before { + background: #aaa; +} +.modal__close:before { + transform: rotate(-45deg); +} +@media screen and (max-width: 768px) { + .modal__inner { + width: 90%; + height: 90%; + box-sizing: border-box; + } +} +/* =============================== * + * End [Object] Modal * + * =============================== */ + + +/* Modal Styles */ +input.modal-state { + +} +div.roller-modal { +} +div.roller-modal div.roller-title { + width: 100%; + text-align: center; + font-weight: bold; + font-size: large; +} +div.roller-modal div.roller-body { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +div.roller-modal div.roller-body div.header { + display: block; + text-transform: uppercase; + text-align: center; + font-weight: bold; +} + +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_"] ~ div.die div.d4, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_"] ~ div.die div.d6, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_"] ~ div.die div.d8, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_"] ~ div.die div.d10, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_"] ~ div.die div.d12, + +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_"] ~ div.die div.d4, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_"] ~ div.die div.d6, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_"] ~ div.die div.d8, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_"] ~ div.die div.d10, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_"] ~ div.die div.d12, + +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_"] ~ div.die div.d4, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_"] ~ div.die div.d6, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_"] ~ div.die div.d8, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_"] ~ div.die div.d10, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_"] ~ div.die div.d12 { + display: none; +} + +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_die"][value="d4"] ~ div.die div.d4, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_die"][value="d6"] ~ div.die div.d6, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_die"][value="d8"] ~ div.die div.d8, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_die"][value="d10"] ~ div.die div.d10, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_die"][value="d12"] ~ div.die div.d12, + +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_die"][value="d4"] ~ div.die div.d4, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_die"][value="d6"] ~ div.die div.d6, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_die"][value="d8"] ~ div.die div.d8, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_die"][value="d10"] ~ div.die div.d10, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_die"][value="d12"] ~ div.die div.d12, + +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_die"][value="d4"] ~ div.die div.d4, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_die"][value="d6"] ~ div.die div.d6, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_die"][value="d8"] ~ div.die div.d8, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_die"][value="d10"] ~ div.die div.d10, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_die"][value="d12"] ~ div.die div.d12 { + display: inline-block; + width: 4em; + height: 4em; + margin-left: auto; + margin-right: auto; +} + +div.roller-modal div.roller-body div.die { + text-align: center; + height: 4em; + display: grid; + grid-template-columns: 1fr auto 1fr; +} + +div.roller-modal div.roller-body div.die div.upgrades, +div.roller-modal div.roller-body div.die div.downgrades { + display: grid; + grid-template-columns: 1fr 1fr; + margin-left: auto; + margin-right: auto; +} + +div.roller-modal div.roller-body div.die div.upgrades div.upgrade, +div.roller-modal div.roller-body div.die div.downgrades div.downgrade { + display: inline-block; + width: 1em; + height: 2em; + opacity: .2; +} + +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="1"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="2"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="2"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.three, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.three, +div.roller-modal div.roller-body input[name*="_feat_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.four, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="1"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="2"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="2"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.three, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.three, +div.roller-modal div.roller-body input[name*="_feat_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.four, + +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="1"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="2"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="2"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.three, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.three, +div.roller-modal div.roller-body input[name*="_skill_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.four, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="1"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="2"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="2"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.three, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.three, +div.roller-modal div.roller-body input[name*="_skill_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.four, + +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="1"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="2"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="2"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.two, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="3"] ~ div.die div.upgrades div.upgrade.three, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.three, +div.roller-modal div.roller-body input[name*="_attribute_upgrades"][value="4"] ~ div.die div.upgrades div.upgrade.four, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="1"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="2"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.one, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="2"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.two, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="3"] ~ div.die div.downgrades div.downgrade.three, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.three, +div.roller-modal div.roller-body input[name*="_attribute_downgrades"][value="4"] ~ div.die div.downgrades div.downgrade.four { + opacity: 1; +} + +div.roller-modal div.roller-body div.roller-mods div.die div.upgrades div.upgrade, +div.roller-modal div.roller-body div.roller-mods div.die div.downgrades div.downgrade { + display: inline-block; + width: 2em; + height: 3em; + opacity: 1; +} + + +div.roller-modal div.roller-body div.selector { + display: inline-block; + text-align: center; + width: 100%; +} +div.roller-modal div.roller-body div.selector select.die-select { + width: fit-content; + text-align: center; + margin-bottom: 2px; +} + +div.roller-modal div.roller-body div.roller-feat div.base-bonus, +div.roller-modal div.roller-body div.roller-skill div.base-bonus, +div.roller-modal div.roller-body div.roller-attribute div.base-bonus { + display: grid; + grid-template-columns: 1fr 1fr; + width: 100%; + text-align: center; +} +div.roller-modal div.roller-body div.roller-feat div.base-bonus div.header, +div.roller-modal div.roller-body div.roller-skill div.base-bonus div.header, +div.roller-modal div.roller-body div.roller-attribute div.base-bonus div.header { + font-size: 75%; +} + + +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_"] ~ div.base-bonus div.d4, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_"] ~ div.base-bonus div.d6, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_"] ~ div.base-bonus div.d8, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_"] ~ div.base-bonus div.d10, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_"] ~ div.base-bonus div.d12, + +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_"] ~ div.base-bonus div.d4, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_"] ~ div.base-bonus div.d6, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_"] ~ div.base-bonus div.d8, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_"] ~ div.base-bonus div.d10, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_"] ~ div.base-bonus div.d12, + +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_"] ~ div.base-bonus div.d4, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_"] ~ div.base-bonus div.d6, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_"] ~ div.base-bonus div.d8, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_"] ~ div.base-bonus div.d10, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_"] ~ div.base-bonus div.d12 { + display: none; +} + +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_die"][value="d4"] ~ div.base-bonus span.base-die div.d4, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_die"][value="d6"] ~ div.base-bonus span.base-die div.d6, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_die"][value="d8"] ~ div.base-bonus span.base-die div.d8, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_die"][value="d10"] ~ div.base-bonus span.base-die div.d10, +div.roller-modal div.roller-body div.roller-feat input[name*="_feat_base_die"][value="d12"] ~ div.base-bonus span.base-die div.d12, + +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_die"][value="d4"] ~ div.base-bonus span.base-die div.d4, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_die"][value="d6"] ~ div.base-bonus span.base-die div.d6, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_die"][value="d8"] ~ div.base-bonus span.base-die div.d8, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_die"][value="d10"] ~ div.base-bonus span.base-die div.d10, +div.roller-modal div.roller-body div.roller-skill input[name*="_skill_base_die"][value="d12"] ~ div.base-bonus span.base-die div.d12, + +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_die"][value="d4"] ~ div.base-bonus span.base-die div.d4, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_die"][value="d6"] ~ div.base-bonus span.base-die div.d6, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_die"][value="d8"] ~ div.base-bonus span.base-die div.d8, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_die"][value="d10"] ~ div.base-bonus span.base-die div.d10, +div.roller-modal div.roller-body div.roller-attribute input[name*="_attribute_base_die"][value="d12"] ~ div.base-bonus span.base-die div.d12 { + display: inline-block; + width: 2em; + height: 2em; + margin-left: auto; + margin-right: auto; +} + + + + +div.roller-modal div.roller-body div.roller-feat { + +} +div.roller-modal div.roller-body div.roller-skill { + +} +div.roller-modal div.roller-body div.roller-attribute { + +} +div.roller-modal div.roller-body div.roller-mods { + +} + +div.roller-modal div.roller-body div.roller-mods div.die { + display: grid; + grid-template-columns: 1fr 1fr; + height: 80%; +} + +div.roller-modal div.roller-body div.roller-mods div.die div.upgrades div.upgrade, +div.roller-modal div.roller-body div.roller-mods div.die div.downgrades div.downgrade { + width: 2em; + height: 3em; + vertical-align: middle; +} + +div.roller-modal div.roller-body div.roller-mods div.die div.upgrades, +div.roller-modal div.roller-body div.roller-mods div.die div.downgrades { + margin-top: auto; + margin-bottom: auto; +} + +div.roller-modal div.roller-body div.roller-mods div.die div.upgrades span.upgrade-input, +div.roller-modal div.roller-body div.roller-mods div.die div.downgrades span.downgrade-input { + margin-top: auto; + margin-bottom: auto; +} +div.roller-modal div.roller-body div.roller-mods div.die div.upgrades span.upgrade-input input[type=number], +div.roller-modal div.roller-body div.roller-mods div.die div.downgrades span.downgrade-input input[type=number] { + -webkit-appearance: textfield; + -moz-appearance: textfield; + appearance: textfield; + width: 1.5em; + text-align: center; +} + +div.roller-modal div.roller-button { + text-align: center; + height: 3em; + align-content: center; +} +div.roller-modal div.roller-button button { + border: 1.5px solid transparent; + border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%); + border-image-slice: 1; +} +div.roller-modal div.roller-button button span { + font-size: 1.5em; +} + +/* Modal Animations */ +@keyframes roll-modal-show { + from { + height: 0px; + width: 0px; + } + to { + height: 100%; + width: 100%; + } + } +@keyframes roll-modal-hide { + from { + height: 100%; + width: 100%; + } + to { + height: 0px; + width: 0px; + display: none; + visibility: hidden; + opacity: 0; + } + } +.modal-state[value="1"] + .modal { + opacity: 1; + visibility: visible; + display: inline; + animation-name: roll-modal-show; + animation-iteration-count: 1; + animation-duration: 1s; +} +.modal-state[value="0"] + .modal { + animation-name: roll-modal-hide; + animation-iteration-count: 1; + animation-duration: .5s; +} + + + +/* Roll Template Styling */ +.sheet-rolltemplate-roller, +.sheet-rolltemplate-initiative { + background-color: #7B7979; + border: 1.5px solid transparent; + border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%); + border-image-slice: 1; +} + +.sheet-rolltemplate-roller div.sheet-header, +.sheet-rolltemplate-initiative div.sheet-header { + display: grid; + grid-template-columns: 1fr auto 1fr auto 1fr; +} +.sheet-rolltemplate-roller div.sheet-header span.sheet-plus, +.sheet-rolltemplate-initiative div.sheet-header span.sheet-plus { + font-size: 1.5em; + font-weight: bold; + color: white; + margin-top: auto; + margin-bottom: auto; + padding-top: 2.5em; +} +.sheet-rolltemplate-roller div.sheet-header div.sheet-feat-die, +.sheet-rolltemplate-roller div.sheet-header div.sheet-skill-die, +.sheet-rolltemplate-roller div.sheet-header div.sheet-attribute-die, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-feat-die, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-skill-die, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-attribute-die { + margin-left: auto; + margin-right: auto; + text-align: center; +} +.sheet-rolltemplate-roller div.sheet-header div.sheet-feat-die span.sheet-title, +.sheet-rolltemplate-roller div.sheet-header div.sheet-skill-die span.sheet-title, +.sheet-rolltemplate-roller div.sheet-header div.sheet-attribute-die span.sheet-title, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-feat-die span.sheet-title, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-skill-die span.sheet-title, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-attribute-die span.sheet-title { + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; + text-transform: uppercase; + font-size: smaller; + font-weight: bold; + color: white; + padding-top: 3px; +} +.sheet-rolltemplate-roller div.sheet-header div.sheet-feat-die span.sheet-name, +.sheet-rolltemplate-roller div.sheet-header div.sheet-skill-die span.sheet-name, +.sheet-rolltemplate-roller div.sheet-header div.sheet-attribute-die span.sheet-name, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-feat-die span.sheet-name, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-skill-die span.sheet-name, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-attribute-die span.sheet-name { + display: block; + margin-left: auto; + margin-right: auto; + text-align: center; + text-transform: unset; + font-weight: bold; + color: white; + height: 3em; + line-height: 1em; +} + +.sheet-rolltemplate-roller div.sheet-header div.sheet-d4, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d6, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d8, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d10, +.sheet-rolltemplate-roller div.sheet-header div.sheet-d12, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d4, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d6, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d8, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d10, +.sheet-rolltemplate-initiative div.sheet-header div.sheet-d12 { + height: 3.5em; + width: 3.5em; +} + +.sheet-rolltemplate-roller div.sheet-results, +.sheet-rolltemplate-initiative div.sheet-results { + text-align: center; + margin-left: auto; + margin-right: auto; + height: 3em; +} + +.sheet-rolltemplate-roller div.sheet-results .inlinerollresult, +.sheet-rolltemplate-initiative div.sheet-results .inlinerollresult { + border: unset; + padding: unset; + color: white; + font-size: 2em; + background: unset; + font-family: 'Arial Narrow', Arial, sans-serif; + display: block; + padding-top: 9px; +} \ No newline at end of file diff --git a/Voltron - Legendary Defender RPG/Voltron RPG.html b/Voltron - Legendary Defender RPG/Voltron RPG.html new file mode 100644 index 000000000000..0087d17d7dcd --- /dev/null +++ b/Voltron - Legendary Defender RPG/Voltron RPG.html @@ -0,0 +1,2365 @@ +
+
+ Dragging From Compendium +
+
+ +
+ + +
+ +
+ +
+ +
+ +
+
+
+ + y +
+
+ +
+
+ + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ Agility +
+ + +
+
+
+
+
+
+
+
+
+ + Wound +
+
+
+
+ Intellect +
+ + +
+
+
+
+
+
+
+
+
+ + Wound +
+
+
+
+ Channelling +
+ + +
+
+
+
+
+
+
+
+
+ + Wound +
+
+
+
+ +
+
Resolve
+
+
+
+
+
+
+ +
+
+
+
Plot Points(Max 6)
+
+
+
+
+
+
Run / Sprint
+
meters /
+
meters
+
+
+
+ +
+ +
+
+
+ + +
+ Vitality +
+
+
+
+
+
+
+
+
+
+ +
+
+ + Wound +
+
+
+
+ +
+
+
+ + +
+ Agility +
+
+
+
+
+
+
+
+
+
+ +
+
+ + Wound +
+
+
+
+ +
+
+
+ + +
+ Resolve +
+
+
+
+
+
+
+
+
+
+ +
+
+ + Wound +
+
+
+
+ +
+
+
+ + +
+ Intellect +
+
+
+
+
+
+
+
+
+
+ +
+
+ + Wound +
+
+
+
+ +
+
+
+ + +
+ Influence +
+
+
+
+
+
+
+
+
+
+ +
+
+ + Wound +
+
+
+
+ +
+
+
+
+ + +
+ Channelling +
+
+
+
+
+
+
+
+
+
+ +
+
+ + Wound +
+
+
+
+ +
+
Feat Roll
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + +
+
+
+
Skills
+
+
+
+
NO SKILL =
+
+
+
Standard Feat =
+ Skill + Linked Attribute + Modifications(if any)
+
+
Complex Feat =
+ Skill + Linked Attribute + Modifications(if any)
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+ +
+ + + +
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
Wound
+
+
+
+
+
+
+
+
+ + +
+
+
+
Gifts
+
+
+
+ + + +
+
+ +
+ +
+
+
+
Weapons/Powers
+
+
+
+
+
+
Unarmed Additional Wounds Roll = succ: 4
+
+
+
+
+
+
+
+
Weapon
+
Range
+
Wounds
+
Crits
+
Notes
+
+
+
+ + + + + +
+
+
+
+
+
+
+
Equipment
+
+
+
+
+
+
+
Item
+
Notes
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
Lion Powers
+
+
+
+
+
+
+
+
+
+
+
+
+
Speed
+
+
+
+ +
+
+
+
+
+ +
Handling
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
Build
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
Zoom
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Weapon
+
Range
+
Wounds
+
Crits
+
Notes
+
+
+
+
+ + + + + +
+
+
+
+
+
+
+
+ + + +
+
+
+
Notes
+
+
+
+
+
+
+