roll20-character-sheets/Generation/genCharR20sheet.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. */
.sheet-App {
  color: mediumspringgreen;
  border-style: solid;
  border-width: 2px;
  border-color: teal;
  background-color: black;
}

.sheet-menuborder {
  border-style: double;
  border-width: 5px;
  box-sizing: border box;
  border-color: mediumspringgreen;
  background: linear-gradient(to bottom right, mediumseagreen, rgba(0,0,0,0));
  padding: 5px;
}

.sheet-menuborder-secondary {
  border-style: double;
  box-sizing: border box;
  border-color: mediumspringgreen;
  background: linear-gradient(to bottom right, mediumseagreen, rgba(0,0,0,0));
  opacity: 0;
  padding: 5px;
}

.sheet-spell-tech-points {
  position: relative; 
  left: 20%; 
  width: 55%; 
}

.sheet-menuborder-secondary:hover {
  border-radius: 15px;
  opacity: 100%;
  transition: all 0.3s ease-in;
}

.sheet-character-semi,
.sheet-equipment-semi,
.sheet-styles-semi,
.sheet-spells-semi,
.sheet-energy-techniques-semi,
.sheet-melee-techniques-semi,
.sheet-passives-semi,
.sheet-inventory-semi,
.sheet-training-semi,
button.sheet-semi {
  background-color: teal;
  color:  black;
  font-weight: bold;
  font-size: 11px;
}

.sheet-character-semi:hover,
.sheet-equipment-semi:hover,
.sheet-styles-semi:hover,
.sheet-spells-semi:hover,
.sheet-energy-techniques-semi:hover,
.sheet-melee-techniques-semi:hover,
.sheet-passives-semi:hover,
.sheet-inventory-semi:hover,
.sheet-training-semi:hover,
.sheet-tabstoggle[value="character"] ~ button.sheet-character-semi,
.sheet-tabstoggle[value="passives"] ~ button.sheet-passives-semi,
.sheet-tabstoggle[value="inventory"] ~ button.sheet-inventory-semi,
.sheet-tabstoggle[value="equipment"] ~ button.sheet-equipment-semi,
.sheet-tabstoggle[value="spells"] ~ button.sheet-spells-semi,
.sheet-tabstoggle[value="styles"] ~ button.sheet-styles-semi,
.sheet-tabstoggle[value="meleetechniques"] ~ button.sheet-meleetechniques-semi,
.sheet-tabstoggle[value="energytechniques"] ~ button.sheet-energytechniques-semi,
.sheet-tabstoggle[value="training"] ~ button.sheet-training-semi,
button.sheet-semi:hover,
 {
  background: black;
  font-weight: bold;
  color: teal;
  transition: all 0.2s ease-in;
}

.sheet-char-sect {
  width: 100%;
  display: flex;
  text-align: center;
  transition: all 0.4s ease-in;
  flex-flow: row;
}

.sheet-char-sect-secondary {
  width: 100%;
  display: flex;
  text-align: center;
  transition: all 0.4s ease-in;
  flex-flow: row;
  flex-basis: content;
}

div.sheet-stats, div.sheet-skills, div.sheet-energy-catalyst {
  width: 33%;
  height: 100%;
  background: linear-gradient(to bottom right, mediumseagreen, rgba(0,0,0,0));
  opacity: 0;
  border-style: double;
  border-width: 5px;
  box-sizing: border box;
  border-color: mediumspringgreen;
  padding: 5px;
}

div.sheet-stats:hover,
div.sheet-skills:hover,
div.sheet-energy-catalyst:hover {
  border-radius: 15px;
  opacity: 100%;
  height: 100%;
  transition: all 0.3s ease-in;
}

span.sheet-label-energy:hover ~ div.sheet.energy-catalyst,
span.sheet-label-stats:hover ~ div.sheet.stats,
span.sheet-label-skills:hover ~ div.sheet.skills {
  border-radius: 15px;
  opacity: 100%;
  height: 100%;
  display: inline-block;
  transition: all 0.3s ease-in;
}

span.sheet-label-energy, span.sheet-label-skills, span.sheet-label-stats, span.sheet-label-general {
  color: deeppink;
  font-size: 20px;
  border-style: double;
  border-color: mediumseagreen;
  background: black;
  margin: 100px;
}

input.sheet-character-inputs {
  padding: 3px;
  background: linear-gradient(to top right, mediumseagreen, rgba(0,0,0,0));
  text-align: center;
  border-color: mediumspringgreen;
  border-right: 35px;
  border-top: 35px;
  color: lime;
  width: 25%;
  font-size: 30px;
}
input.sheet-character-inputsleft {
  padding: 3px;
  background: linear-gradient(to top right, mediumseagreen, rgba(0,0,0,0));
  text-align: center;
  position: relative;
  border-color: mediumspringgreen;
  border-right: 35px;
  border-top: 35px;
  color: lime;
  width: 25%;
  font-size: 30px;
}
input.sheet-character-inputsright {
  padding: 3px;
  background: linear-gradient(to top right, mediumseagreen, rgba(0,0,0,0));
  text-align: center;
  position: relative;
  border-color: mediumspringgreen;
  border-right: 35px;
  border-top: 35px;
  color: lime;
  width: 25%;
  font-size: 30px;
}

input.sheet-character-inputs-secondary {
  position: relative;
  
  width: 5%;
  height: 5%;
  background: linear-gradient(to top right, mediumseagreen, rgba(0,0,0,0));
  text-align: center;
  border-color: mediumspringgreen;
  color: lime;
  font-size: 30px;
}

input.sheet-entry-inputs {
  padding: 3px;
  background: linear-gradient(to top right, mediumseagreen, rgba(0,0,0,0));
  text-align: center;
  border-color: mediumspringgreen;
  border-right: 35px;
  border-top: 35px;
  color: lime;
  width: 40%;
  font-size: 20px;
}

table.sheet-vitality-status {
    border-style: groove; 
    position: relative; 
    left: 2%; 
    border-width: 5px; 
    background: black;
}

/*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 {
  display: block;
}


.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;
  background-color: black;
  background-size: cover;
  background-image: url('https://raw.githubusercontent.com/Cacealeos/roll20-character-sheets/master/Generation/Avatar.png');  
  border-color: teal;
}

.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 {
  display: block;
  background: radial-gradient(#00ffCC, #00CC99);
  color:  teal;
  border-style: solid;
  border-width: 2px;
  border-color: teal;
}

.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;
  flex-flow: row wrap;
}
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,
input.sheet-weapon-toggle:not([value="primary"]) ~ div.sheet-primaryweapon,
input.sheet-weapon-toggle:not([value="secondary"]) ~ div.sheet-secondaryweapon,
input.sheet-weapon-toggle:not([value="dual"]) ~ div.sheet-dualweapon,
input.sheet-weapon-toggle:not([value="ranged"]) ~ div.sheet-rangedweapon,{
  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;
    width: 100%;
}
input.sheet-cooldown[value="8"] ~ div.sheet-cooldown:before {
        content: "8 Turns of Cooldown";
}
input.sheet-cooldown[value="7"] ~ div.sheet-cooldown {
    background: purple;
    width: 100%;
}
input.sheet-cooldown[value="7"] ~ div.sheet-cooldown:before {
        content: "7 Turns of Cooldown";
}
input.sheet-cooldown[value="6"] ~ div.sheet-cooldown {
    background: red;
    width: 100%;
}
input.sheet-cooldown[value="6"] ~ div.sheet-cooldown:before {
        content: "6 Turns of Cooldown";
}
input.sheet-cooldown[value="5"] ~ div.sheet-cooldown {
    background: red;
    width: 100%;
}
input.sheet-cooldown[value="5"] ~ div.sheet-cooldown:before {
        content: "5 Turns of Cooldown";
}
input.sheet-cooldown[value="4"] ~ div.sheet-cooldown {
    background: yellow;
    width: 100%;
}
input.sheet-cooldown[value="4"] ~ div.sheet-cooldown:before {
        content: "4 Turns of Cooldown";
}
input.sheet-cooldown[value="3"] ~ div.sheet-cooldown {
    background: yellow;
    width: 100%;
}
input.sheet-cooldown[value="3"] ~ div.sheet-cooldown:before {
        content: "3 Turns of Cooldown";
}
input.sheet-cooldown[value="2"] ~ div.sheet-cooldown {
    background: green;
    width: 100%;
}
input.sheet-cooldown[value="2"] ~ div.sheet-cooldown:before {
        content: "2 Turns of Cooldown";
}
input.sheet-cooldown[value="1"] ~ div.sheet-cooldown {
    background: green;
    width: 100%;
}
input.sheet-cooldown[value="1"] ~ div.sheet-cooldown:before {
        content: "1 Turns of Cooldown";
}
input.sheet-cooldown[value=""] ~ div.sheet-cooldown {
        display: none;
        width: 100%;
}

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%";
}