diff --git a/Generation/genCharR20sheet.css b/Generation/genCharR20sheet.css index 37c953630b..054ccd71c3 100644 --- a/Generation/genCharR20sheet.css +++ b/Generation/genCharR20sheet.css @@ -1,370 +1,370 @@ -/*In the CSS file, all class-names must have a sheet--prefix in their name, or Roll20 won't recognize the classes. -In the HTML file, this prefix is not needed. */ - -/*Configure the tab buttons*/ -.sheet-character, -.sheet-passives, -.sheet-inventory, -.sheet-equipment, -.sheet-spells, -.sheet-styles, -.sheet-meleetechniques, -.sheet-energytechniques, -.sheet-training, -.sheet-memories, -.sheet-minions, -.sheet-assault, -.sheet-vigilant, -.sheet-caster, -.sheet-universal, -.sheet-phasestep, -.sheet-phasejump, -.sheet-reflect, -.sheet-absorb, -.sheet-barrier, -.sheet-cutter, -.sheet-armor1, -.sheet-armor2, -.sheet-armor3, -.sheet-armor4, -.sheet-armor5, -.sheet-demon, -.sheet-necro{ - display: none; -} - -/* Right side represent the input attribute, hidden or otherwise, that, when it has its value changed to the corrisponding string, -will reveal the Left side block. The "name" of the attribute is not shown here; only the class */ -.sheet-moduletype-toggle[value="assault"] ~ div.sheet-assault, -.sheet-moduletype-toggle[value="vigilant"] ~ div.sheet-vigilant, -.sheet-moduletype-toggle[value="caster"] ~ div.sheet-caster, -.sheet-moduletype-toggle[value="universal"] ~ div.sheet-universal, -.sheet-defensive-technique-phasestep[value="active"] ~ div.sheet-phasestep, -.sheet-defensive-technique-phasejump[value="active"] ~ div.sheet-phasejump, -.sheet-defensive-technique-reflect[value="active"] ~ div.sheet-reflect, -.sheet-defensive-technique-absorb[value="active"] ~ div.sheet-absorb, -.sheet-defensive-technique-barrier[value="active"] ~ div.sheet-barrier, -.sheet-defensive-technique-cutter[value="active"] ~ div.sheet-cutter, -.sheet-defensive-module1:not([value=""]) ~ div.sheet-armor1, -.sheet-defensive-module2:not([value=""]) ~ div.sheet-armor2, -.sheet-defensive-module3:not([value=""]) ~ div.sheet-armor3, -.sheet-defensive-module4:not([value=""]) ~ div.sheet-armor4, -.sheet-defensive-module5:not([value=""]) ~ div.sheet-armor5, -.sheet-tabstoggle[value="character"] ~ div.sheet-character, -.sheet-tabstoggle[value="passives"] ~ div.sheet-passives, -.sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory, -.sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment, -.sheet-tabstoggle[value="spells"] ~ div.sheet-spells, -.sheet-tabstoggle[value="styles"] ~ div.sheet-styles, -.sheet-tabstoggle[value="meleetechniques"] ~ div.sheet-meleetechniques, -.sheet-tabstoggle[value="energytechniques"] ~ div.sheet-energytechniques, -.sheet-tabstoggle[value="training"] ~ div.sheet-training, -.sheet-tabstoggle[value="memories"] ~ div.sheet-memories, -.sheet-tabstoggle[value="minions"] ~ div.sheet-minions { - display: block; -} - -.sheet-deathcovenant:not([value="0"]) ~ div.sheet-necro, -.sheet-halfbreed:not([value="0"]) ~ div.sheet-demon { - display: inline; -} -.sheet-center { - display: flex; - justify-content: center; - align-items: center; - height: 40px; -} - -/* Configure a container for the radio buttons. */ -.sheet-races { - display: inline-flex; - align-items: center; -} - -/* Configure the button styling. This example makes it look like a radio. */ -button.sheet-race { - padding: 5; - border: solid 1px #a8a8a8; - cursor: pointer; - - width: 14px; - height: 14px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; -} -button.sheet-race > span.sheet-checked { - width: 6px; - height: 6px; - border-radius: 50%; - background: buttontext; -} - -/* Configure a container for the radio buttons. */ -.sheet-energies { - display: flex; - align-items: center; -} - -.sheet-deathcovenant:not([value="0"]) ~ button.sheet-necro, -.sheet-halfbreed:not([value="0"]) ~ button.sheet-demon, -button.sheet-energy { - padding: 5; - border: solid 1px #a8a8a8; - cursor: pointer; - - width: 14px; - height: 14px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; -} -button.sheet-demon > span.sheet-checked, -button.sheet-necro > span.sheet-checked, -button.sheet-energy > span.sheet-checked { - width: 6px; - height: 6px; - border-radius: 50%; - background: buttontext; -} - -/* Configure the button styling. This example makes it look like a radio. */ -.sheet-mods { - display: flex; - align-items: center; -} -button.sheet-mod{ - padding: 5; - border: solid 1px #a8a8a8; - cursor: pointer; - - width: 14px; - height: 14px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; -} -button.sheet-mod > span.sheet-checked { - width: 6px; - height: 6px; - border-radius: 50%; - background: buttontext; -} - -/* Hide the "checked" section of the radio if the attribute value does not match the radio */ -input.sheet-energy:not([value="Mental"]) ~ button.sheet-energy-1 > span.sheet-checked, -input.sheet-energy:not([value="Body"]) ~ button.sheet-energy-2 > span.sheet-checked, -input.sheet-energy:not([value="Spirit"]) ~ button.sheet-energy-3 > span.sheet-checked, -input.sheet-energy:not([value="Memory"]) ~ button.sheet-energy-4 > span.sheet-checked, -input.sheet-energy:not([value="Demon"]) ~ button.sheet-demon > span.sheet-checked, -input.sheet-energy:not([value="necroforce"]) ~ button.sheet-necro > span.sheet-checked, -input.sheet-race:not([value="Ciaha"]) ~ button.sheet-race-1 > span.sheet-checked, -input.sheet-race:not([value="Magian"]) ~ button.sheet-race-2 > span.sheet-checked, -input.sheet-race:not([value="Adept"]) ~ button.sheet-race-3 > span.sheet-checked, -input.sheet-race:not([value="Arbiter"]) ~ button.sheet-race-4 > span.sheet-checked, -input.sheet-race:not([value="Necrian"]) ~ button.sheet-race-5 > span.sheet-checked, -input.sheet-moduletype-toggle:not([value="assault"]) ~ button.sheet-mod-1 > span.sheet-checked, -input.sheet-moduletype-toggle:not([value="vigilant"]) ~ button.sheet-mod-2 > span.sheet-checked, -input.sheet-moduletype-toggle:not([value="caster"]) ~ button.sheet-mod-3 > span.sheet-checked, -input.sheet-moduletype-toggle:not([value="universal"]) ~ button.sheet-mod-4 > span.sheet-checked{ - display: none; -} - -/* Configure a container for the toggle */ -.sheet-toggle-container { - display: inline-flex; - align-items: center; -} - -/* Configure the button styling. This example makes it look like a checkbox. */ -button.sheet-toggle { - padding: 0; - border: solid 1px #a8a8a8; - cursor: pointer; - - width: 16px; - height: 16px; - border-radius: 3px; - display: flex; - justify-content: center; - align-items: center; - - font-size: 12px; -} - -/* Hide the "checked" section of the toggle if the attribute value is not "1". */ -input.sheet-toggle:not([value="1"]) ~ button.sheet-toggle > span.sheet-checked { - display: none; -} - -/* Configure a container for the toggle */ -.sheet-toggle-checkbox { - display: inline-flex; - align-items: center; -} - -/* Configure the button styling. This example makes it look like a checkbox. */ -button.sheet-checkbox { - padding: 0; - border: solid 1px #a8a8a8; - cursor: pointer; - - width: 16px; - height: 16px; - border-radius: 3px; - display: flex; - justify-content: center; - align-items: center; - - font-size: 12px; -} - -/* Hide the "checked" section of the toggle if the attribute value is not "1". */ -input.sheet-checkbox:not([value="1"]) ~ button.sheet-checkbox > span.sheet-checked { - display: none; -} -div.sheet-cooldown { - width: 35%; - height: 20px; - border: 1px solid black; - color: gray; - text-align: center; -} -input.sheet-cooldown[value="8"] ~ div.sheet-cooldown { - background: purple; -} -input.sheet-cooldown[value="8"] ~ div.sheet-cooldown:before { - content: "8 Turns of Cooldown"; -} -input.sheet-cooldown[value="7"] ~ div.sheet-cooldown { - background: purple; -} -input.sheet-cooldown[value="7"] ~ div.sheet-cooldown:before { - content: "7 Turns of Cooldown"; -} -input.sheet-cooldown[value="6"] ~ div.sheet-cooldown { - background: red; -} -input.sheet-cooldown[value="6"] ~ div.sheet-cooldown:before { - content: "6 Turns of Cooldown"; -} -input.sheet-cooldown[value="5"] ~ div.sheet-cooldown { - background: red; -} -input.sheet-cooldown[value="5"] ~ div.sheet-cooldown:before { - content: "5 Turns of Cooldown"; -} -input.sheet-cooldown[value="4"] ~ div.sheet-cooldown { - background: yellow; -} -input.sheet-cooldown[value="4"] ~ div.sheet-cooldown:before { - content: "4 Turns of Cooldown"; -} -input.sheet-cooldown[value="3"] ~ div.sheet-cooldown { - background: yellow; -} -input.sheet-cooldown[value="3"] ~ div.sheet-cooldown:before { - content: "3 Turns of Cooldown"; -} -input.sheet-cooldown[value="2"] ~ div.sheet-cooldown { - background: green; -} -input.sheet-cooldown[value="2"] ~ div.sheet-cooldown:before { - content: "2 Turns of Cooldown"; -} -input.sheet-cooldown[value="1"] ~ div.sheet-cooldown { - background: green; -} -input.sheet-cooldown[value="1"] ~ div.sheet-cooldown:before { - content: "1 Turns of Cooldown"; -} -input.sheet-cooldown[value=""] ~ div.sheet-cooldown { - display: none; -} - -div.sheet-techbar { - width: 90%; - height: 20px; - border: 1px solid black; - color: gray; - text-align: center; -} - -input.sheet-techbar[value="5"] ~ div.sheet-techbar { - background: purple; -} -input.sheet-techbar[value="5"] ~ div.sheet-techbar:before { - content: "5 Turns of Cooldown"; -} -input.sheet-techbar[value="4"] ~ div.sheet-techbar { - background: red; -} -input.sheet-techbar[value="4"] ~ div.sheet-techbar:before { - content: "4 Turns of Cooldown"; -} -input.sheet-techbar[value="3"] ~ div.sheet-techbar { - background: orange; -} -input.sheet-techbar[value="3"] ~ div.sheet-techbar:before { - content: "3 Turns of Cooldown"; -} -input.sheet-techbar[value="2"] ~ div.sheet-techbar { - background: yellow; -} -input.sheet-techbar[value="2"] ~ div.sheet-techbar:before { - content: "2 Turns of Cooldown"; -} -input.sheet-techbar[value="1"] ~ div.sheet-techbar { - background: green; -} -input.sheet-techbar[value="1"] ~ div.sheet-techbar:before { - content: "1 Turns of Cooldown"; -} -input.sheet-techbar[value=""] ~ div.sheet-techbar:before { - background: white; -} -input.sheet-techbar[value=""] ~ div.sheet-techbar:before { - content: "N/A"; -} - -div.sheet-durbar { - width: 90%; - height: 20px; - border: 1px solid black; - color: gray; - text-align: center; -} - -input.sheet-durbar[value="5"] ~ div.sheet-durbar { - background: green; -} -input.sheet-durbar[value="5"] ~ div.sheet-durbar:before { - content: "~ 100%"; -} -input.sheet-durbar[value="4"] ~ div.sheet-durbar { - background: yellow; -} -input.sheet-durbar[value="4"] ~ div.sheet-durbar:before { - content: "~ 80%"; -} -input.sheet-durbar[value="3"] ~ div.sheet-durbar { - background: orange; -} -input.sheet-durbar[value="3"] ~ div.sheet-durbar:before { - content: "~ 60%"; -} -input.sheet-durbar[value="2"] ~ div.sheet-durbar { - background: red; -} -input.sheet-durbar[value="2"] ~ div.sheet-durbar:before { - content: "~ 40%"; -} -input.sheet-durbar[value="1"] ~ div.sheet-durbar { - background: purple; -} -input.sheet-durbar[value="1"] ~ div.sheet-durbar:before { - content: "~ 20$"; -} +/*In the CSS file, all class-names must have a sheet--prefix in their name, or Roll20 won't recognize the classes. +In the HTML file, this prefix is not needed. */ + +/*Configure the tab buttons*/ +.sheet-character, +.sheet-passives, +.sheet-inventory, +.sheet-equipment, +.sheet-spells, +.sheet-styles, +.sheet-meleetechniques, +.sheet-energytechniques, +.sheet-training, +.sheet-memories, +.sheet-minions, +.sheet-assault, +.sheet-vigilant, +.sheet-caster, +.sheet-universal, +.sheet-phasestep, +.sheet-phasejump, +.sheet-reflect, +.sheet-absorb, +.sheet-barrier, +.sheet-cutter, +.sheet-armor1, +.sheet-armor2, +.sheet-armor3, +.sheet-armor4, +.sheet-armor5, +.sheet-demon, +.sheet-necro{ + display: none; +} + +/* Right side represent the input attribute, hidden or otherwise, that, when it has its value changed to the corrisponding string, +will reveal the Left side block. The "name" of the attribute is not shown here; only the class */ +.sheet-moduletype-toggle[value="assault"] ~ div.sheet-assault, +.sheet-moduletype-toggle[value="vigilant"] ~ div.sheet-vigilant, +.sheet-moduletype-toggle[value="caster"] ~ div.sheet-caster, +.sheet-moduletype-toggle[value="universal"] ~ div.sheet-universal, +.sheet-defensive-technique-phasestep[value="active"] ~ div.sheet-phasestep, +.sheet-defensive-technique-phasejump[value="active"] ~ div.sheet-phasejump, +.sheet-defensive-technique-reflect[value="active"] ~ div.sheet-reflect, +.sheet-defensive-technique-absorb[value="active"] ~ div.sheet-absorb, +.sheet-defensive-technique-barrier[value="active"] ~ div.sheet-barrier, +.sheet-defensive-technique-cutter[value="active"] ~ div.sheet-cutter, +.sheet-defensive-module1:not([value=""]) ~ div.sheet-armor1, +.sheet-defensive-module2:not([value=""]) ~ div.sheet-armor2, +.sheet-defensive-module3:not([value=""]) ~ div.sheet-armor3, +.sheet-defensive-module4:not([value=""]) ~ div.sheet-armor4, +.sheet-defensive-module5:not([value=""]) ~ div.sheet-armor5, +.sheet-tabstoggle[value="character"] ~ div.sheet-character, +.sheet-tabstoggle[value="passives"] ~ div.sheet-passives, +.sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory, +.sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment, +.sheet-tabstoggle[value="spells"] ~ div.sheet-spells, +.sheet-tabstoggle[value="styles"] ~ div.sheet-styles, +.sheet-tabstoggle[value="meleetechniques"] ~ div.sheet-meleetechniques, +.sheet-tabstoggle[value="energytechniques"] ~ div.sheet-energytechniques, +.sheet-tabstoggle[value="training"] ~ div.sheet-training, +.sheet-tabstoggle[value="memories"] ~ div.sheet-memories, +.sheet-tabstoggle[value="minions"] ~ div.sheet-minions { + display: block; +} + +.sheet-deathcovenant:not([value="0"]) ~ div.sheet-necro, +.sheet-halfbreed:not([value="0"]) ~ div.sheet-demon { + display: inline; +} +.sheet-center { + display: flex; + justify-content: center; + align-items: center; + height: 40px; +} + +/* Configure a container for the radio buttons. */ +.sheet-races { + display: inline-flex; + align-items: center; +} + +/* Configure the button styling. This example makes it look like a radio. */ +button.sheet-race { + padding: 5; + border: solid 1px #a8a8a8; + cursor: pointer; + + width: 14px; + height: 14px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} +button.sheet-race > span.sheet-checked { + width: 6px; + height: 6px; + border-radius: 50%; + background: buttontext; +} + +/* Configure a container for the radio buttons. */ +.sheet-energies { + display: flex; + align-items: center; +} + +.sheet-deathcovenant:not([value="0"]) ~ button.sheet-necro, +.sheet-halfbreed:not([value="0"]) ~ button.sheet-demon, +button.sheet-energy { + padding: 5; + border: solid 1px #a8a8a8; + cursor: pointer; + + width: 14px; + height: 14px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} +button.sheet-demon > span.sheet-checked, +button.sheet-necro > span.sheet-checked, +button.sheet-energy > span.sheet-checked { + width: 6px; + height: 6px; + border-radius: 50%; + background: buttontext; +} + +/* Configure the button styling. This example makes it look like a radio. */ +.sheet-mods { + display: flex; + align-items: center; +} +button.sheet-mod{ + padding: 5; + border: solid 1px #a8a8a8; + cursor: pointer; + + width: 14px; + height: 14px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} +button.sheet-mod > span.sheet-checked { + width: 6px; + height: 6px; + border-radius: 50%; + background: buttontext; +} + +/* Hide the "checked" section of the radio if the attribute value does not match the radio */ +input.sheet-energy:not([value="Mental"]) ~ button.sheet-energy-1 > span.sheet-checked, +input.sheet-energy:not([value="Body"]) ~ button.sheet-energy-2 > span.sheet-checked, +input.sheet-energy:not([value="Spirit"]) ~ button.sheet-energy-3 > span.sheet-checked, +input.sheet-energy:not([value="Memory"]) ~ button.sheet-energy-4 > span.sheet-checked, +input.sheet-energy:not([value="Demon"]) ~ button.sheet-demon > span.sheet-checked, +input.sheet-energy:not([value="necroforce"]) ~ button.sheet-necro > span.sheet-checked, +input.sheet-race:not([value="Ciaha"]) ~ button.sheet-race-1 > span.sheet-checked, +input.sheet-race:not([value="Magian"]) ~ button.sheet-race-2 > span.sheet-checked, +input.sheet-race:not([value="Adept"]) ~ button.sheet-race-3 > span.sheet-checked, +input.sheet-race:not([value="Arbiter"]) ~ button.sheet-race-4 > span.sheet-checked, +input.sheet-race:not([value="Necrian"]) ~ button.sheet-race-5 > span.sheet-checked, +input.sheet-moduletype-toggle:not([value="assault"]) ~ button.sheet-mod-1 > span.sheet-checked, +input.sheet-moduletype-toggle:not([value="vigilant"]) ~ button.sheet-mod-2 > span.sheet-checked, +input.sheet-moduletype-toggle:not([value="caster"]) ~ button.sheet-mod-3 > span.sheet-checked, +input.sheet-moduletype-toggle:not([value="universal"]) ~ button.sheet-mod-4 > span.sheet-checked{ + display: none; +} + +/* Configure a container for the toggle */ +.sheet-toggle-container { + display: inline-flex; + align-items: center; +} + +/* Configure the button styling. This example makes it look like a checkbox. */ +button.sheet-toggle { + padding: 0; + border: solid 1px #a8a8a8; + cursor: pointer; + + width: 16px; + height: 16px; + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + + font-size: 12px; +} + +/* Hide the "checked" section of the toggle if the attribute value is not "1". */ +input.sheet-toggle:not([value="1"]) ~ button.sheet-toggle > span.sheet-checked { + display: none; +} + +/* Configure a container for the toggle */ +.sheet-toggle-checkbox { + display: inline-flex; + align-items: center; +} + +/* Configure the button styling. This example makes it look like a checkbox. */ +button.sheet-checkbox { + padding: 0; + border: solid 1px #a8a8a8; + cursor: pointer; + + width: 16px; + height: 16px; + border-radius: 3px; + display: flex; + justify-content: center; + align-items: center; + + font-size: 12px; +} + +/* Hide the "checked" section of the toggle if the attribute value is not "1". */ +input.sheet-checkbox:not([value="1"]) ~ button.sheet-checkbox > span.sheet-checked { + display: none; +} +div.sheet-cooldown { + width: 35%; + height: 20px; + border: 1px solid black; + color: gray; + text-align: center; +} +input.sheet-cooldown[value="8"] ~ div.sheet-cooldown { + background: purple; +} +input.sheet-cooldown[value="8"] ~ div.sheet-cooldown:before { + content: "8 Turns of Cooldown"; +} +input.sheet-cooldown[value="7"] ~ div.sheet-cooldown { + background: purple; +} +input.sheet-cooldown[value="7"] ~ div.sheet-cooldown:before { + content: "7 Turns of Cooldown"; +} +input.sheet-cooldown[value="6"] ~ div.sheet-cooldown { + background: red; +} +input.sheet-cooldown[value="6"] ~ div.sheet-cooldown:before { + content: "6 Turns of Cooldown"; +} +input.sheet-cooldown[value="5"] ~ div.sheet-cooldown { + background: red; +} +input.sheet-cooldown[value="5"] ~ div.sheet-cooldown:before { + content: "5 Turns of Cooldown"; +} +input.sheet-cooldown[value="4"] ~ div.sheet-cooldown { + background: yellow; +} +input.sheet-cooldown[value="4"] ~ div.sheet-cooldown:before { + content: "4 Turns of Cooldown"; +} +input.sheet-cooldown[value="3"] ~ div.sheet-cooldown { + background: yellow; +} +input.sheet-cooldown[value="3"] ~ div.sheet-cooldown:before { + content: "3 Turns of Cooldown"; +} +input.sheet-cooldown[value="2"] ~ div.sheet-cooldown { + background: green; +} +input.sheet-cooldown[value="2"] ~ div.sheet-cooldown:before { + content: "2 Turns of Cooldown"; +} +input.sheet-cooldown[value="1"] ~ div.sheet-cooldown { + background: green; +} +input.sheet-cooldown[value="1"] ~ div.sheet-cooldown:before { + content: "1 Turns of Cooldown"; +} +input.sheet-cooldown[value=""] ~ div.sheet-cooldown { + display: none; +} + +div.sheet-techbar { + width: 90%; + height: 20px; + border: 1px solid black; + color: gray; + text-align: center; +} + +input.sheet-techbar[value="5"] ~ div.sheet-techbar { + background: purple; +} +input.sheet-techbar[value="5"] ~ div.sheet-techbar:before { + content: "5 Turns of Cooldown"; +} +input.sheet-techbar[value="4"] ~ div.sheet-techbar { + background: red; +} +input.sheet-techbar[value="4"] ~ div.sheet-techbar:before { + content: "4 Turns of Cooldown"; +} +input.sheet-techbar[value="3"] ~ div.sheet-techbar { + background: orange; +} +input.sheet-techbar[value="3"] ~ div.sheet-techbar:before { + content: "3 Turns of Cooldown"; +} +input.sheet-techbar[value="2"] ~ div.sheet-techbar { + background: yellow; +} +input.sheet-techbar[value="2"] ~ div.sheet-techbar:before { + content: "2 Turns of Cooldown"; +} +input.sheet-techbar[value="1"] ~ div.sheet-techbar { + background: green; +} +input.sheet-techbar[value="1"] ~ div.sheet-techbar:before { + content: "1 Turns of Cooldown"; +} +input.sheet-techbar[value=""] ~ div.sheet-techbar:before { + background: white; +} +input.sheet-techbar[value=""] ~ div.sheet-techbar:before { + content: "N/A"; +} + +div.sheet-durbar { + width: 90%; + height: 20px; + border: 1px solid black; + color: gray; + text-align: center; +} + +input.sheet-durbar[value="5"] ~ div.sheet-durbar { + background: green; +} +input.sheet-durbar[value="5"] ~ div.sheet-durbar:before { + content: "~ 100%"; +} +input.sheet-durbar[value="4"] ~ div.sheet-durbar { + background: yellow; +} +input.sheet-durbar[value="4"] ~ div.sheet-durbar:before { + content: "~ 80%"; +} +input.sheet-durbar[value="3"] ~ div.sheet-durbar { + background: orange; +} +input.sheet-durbar[value="3"] ~ div.sheet-durbar:before { + content: "~ 60%"; +} +input.sheet-durbar[value="2"] ~ div.sheet-durbar { + background: red; +} +input.sheet-durbar[value="2"] ~ div.sheet-durbar:before { + content: "~ 40%"; +} +input.sheet-durbar[value="1"] ~ div.sheet-durbar { + background: purple; +} +input.sheet-durbar[value="1"] ~ div.sheet-durbar:before { + content: "~ 20$"; +} diff --git a/Generation/genCharR20sheet.html b/Generation/genCharR20sheet.html index 6ab04b943e..2e6d8d253e 100644 --- a/Generation/genCharR20sheet.html +++ b/Generation/genCharR20sheet.html @@ -1,4138 +1,4138 @@ -
-
-
-
-
-
| - Speed Cast - | -- High-Speed Cast - | -- Spell Reflex - | -- Counter Spell - | -- Hyper Spell - | -
| - Double Cast - | -- Junction Cast - | -- Double Pulse - | -- Triple Spell - | -- Father Spell - | -
| - Spell Life - | -- Carry Spell - | -- Spell Recovery - | -- Auto Cast - | -- Infiinty Spell - | -
| - Spell Shift - | -- Spell Charge - | -- Rivet Cast - | -- Spell Surge - | -- ??? - | -