mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 20:22:29 +00:00
371 lines
11 KiB
CSS
371 lines
11 KiB
CSS
/*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$";
|
|
}
|