roll20-character-sheets-tester/PokemonTabletopAdventures_v3/PTA3.css

.charsheet + .charactersheet {
  padding: 0px; /* Override the roll20 padding, and add our own in the wrapping div */
}

.sheet-wrapper {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/PokemonTabletopAdventures_v3/images/whitePokeballBackgroundSmall.png");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: auto;
  position: relative;
  border: 2px solid black;
  min-width: 680px;
  padding: 10px;
}

.sheet-type-colors {
  display: block;
}

/* Fancy colors */
input.sheet-color-setting {
  display: none;
}

input.sheet-color-setting-bug:checked ~ div.sheet-wrapper {
  background-color: #c6d16e;
}
input.sheet-color-setting-dark:checked ~ div.sheet-wrapper {
  background-color: #a29288;
}
input.sheet-color-setting-dragon:checked ~ div.sheet-wrapper {
  background-color: #a27dfa;
}
input.sheet-color-setting-electric:checked ~ div.sheet-wrapper {
  background-color: #fae078;
}
input.sheet-color-setting-fairy:checked ~ div.sheet-wrapper {
  background-color: #f4bdc9;
}
input.sheet-color-setting-fighting:checked ~ div.sheet-wrapper {
  background-color: #d67873;
}
input.sheet-color-setting-fire:checked ~ div.sheet-wrapper {
  background-color: #f5ac78;
}
input.sheet-color-setting-flying:checked ~ div.sheet-wrapper {
  background-color: #c6b7f5;
}
input.sheet-color-setting-ghost:checked ~ div.sheet-wrapper {
  background-color: #a292bc;
}
input.sheet-color-setting-grass:checked ~ div.sheet-wrapper {
  background-color: #a7db8d;
}
input.sheet-color-setting-ground:checked ~ div.sheet-wrapper {
  background-color: #ebd69d;
}
input.sheet-color-setting-ice:checked ~ div.sheet-wrapper {
  background-color: #bce6e6;
}
input.sheet-color-setting-normal:checked ~ div.sheet-wrapper {
  background-color: #c6c6a7;
}
input.sheet-color-setting-poison:checked ~ div.sheet-wrapper {
  background-color: #c183c1;
}
input.sheet-color-setting-psychic:checked ~ div.sheet-wrapper {
  background-color: #fa92b2;
}
input.sheet-color-setting-rock:checked ~ div.sheet-wrapper {
  background-color: #d1c17d;
}
input.sheet-color-setting-steel:checked ~ div.sheet-wrapper {
  background-color: #d1d1e0;
}
input.sheet-color-setting-water:checked ~ div.sheet-wrapper {
  background-color: #9db7f5;
}

/* Colors for moves */

input.sheet-color-setting-bug-move:checked ~ div.sheet-pokemon-move {
  background-color: #c6d16e;
}
input.sheet-color-setting-dark-move:checked ~ div.sheet-pokemon-move {
  background-color: #a29288;
}
input.sheet-color-setting-dragon-move:checked ~ div.sheet-pokemon-move {
  background-color: #a27dfa;
}
input.sheet-color-setting-electric-move:checked ~ div.sheet-pokemon-move {
  background-color: #fae078;
}
input.sheet-color-setting-fairy-move:checked ~ div.sheet-pokemon-move {
  background-color: #f4bdc9;
}
input.sheet-color-setting-fighting-move:checked ~ div.sheet-pokemon-move {
  background-color: #d67873;
}
input.sheet-color-setting-fire-move:checked ~ div.sheet-pokemon-move {
  background-color: #f5ac78;
}
input.sheet-color-setting-flying-move:checked ~ div.sheet-pokemon-move {
  background-color: #c6b7f5;
}
input.sheet-color-setting-ghost-move:checked ~ div.sheet-pokemon-move {
  background-color: #a292bc;
}
input.sheet-color-setting-grass-move:checked ~ div.sheet-pokemon-move {
  background-color: #a7db8d;
}
input.sheet-color-setting-ground-move:checked ~ div.sheet-pokemon-move {
  background-color: #ebd69d;
}
input.sheet-color-setting-ice-move:checked ~ div.sheet-pokemon-move {
  background-color: #bce6e6;
}
input.sheet-color-setting-normal-move:checked ~ div.sheet-pokemon-move {
  background-color: #c6c6a7;
}
input.sheet-color-setting-poison-move:checked ~ div.sheet-pokemon-move {
  background-color: #c183c1;
}
input.sheet-color-setting-psychic-move:checked ~ div.sheet-pokemon-move {
  background-color: #fa92b2;
}
input.sheet-color-setting-rock-move:checked ~ div.sheet-pokemon-move {
  background-color: #d1c17d;
}
input.sheet-color-setting-steel-move:checked ~ div.sheet-pokemon-move {
  background-color: #d1d1e0;
}
input.sheet-color-setting-water-move:checked ~ div.sheet-pokemon-move {
  background-color: #9db7f5;
}
/* End fancy colors */

.sheet-logo {
  width: 280px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -15px;
}

.sheet-inventory {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
  margin-top: 10px;
}

.sheet-2col-centered {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.sheet-ball {
  display: block;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  min-width: 60px;
  min-height: 60px;
  background-position: 50% 40%;
  background-repeat: no-repeat;
}

.sheet-hp-ball {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/PokemonTabletopAdventures_v3/images/StatBallHP.png");
}

.sheet-atk-ball {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/PokemonTabletopAdventures_v3/images/StatBallAtk.png");
}

.sheet-def-ball {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/PokemonTabletopAdventures_v3/images/StatBallDef.png");
}

.sheet-spatk-ball {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/PokemonTabletopAdventures_v3/images/StatBallSpAtk.png");
}

.sheet-spdef-ball {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/PokemonTabletopAdventures_v3/images/StatBallSpDef.png");
}

.sheet-spd-ball {
  background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/PokemonTabletopAdventures_v3/images/StatBallSpd.png");
}

.sheet-character-name-grid {
  display: grid;
  grid-template-columns: 1fr 4fr;
  align-items: center;
}

.sheet-character-class-grid {
  display: grid;
  grid-template-columns: 1fr 6fr 1fr 2fr;
  align-items: center;
}

.sheet-character-stat-grid {
  display: grid;
  justify-items: center;
  text-align: center;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.sheet-half-text {
  width: 105px;
}

.sheet-tiny-text {
  width: 50px;
}

.sheet-damage-dice {
  width: 52px;
  text-align: left;
  padding-left: 0px;
}

.sheet-move-text {
  width: 130px;
}

.sheet-top-information[type="number"] {
  background-color: rgba(255, 153, 153, 0);
  outline: none;
  border-width: 2px;
  border-color: grey;
  border-style: none none solid none;
  font-weight: bold;
}

.sheet-top-select {
  width: 210px;
}

/* I can't find a way to override number widths from roll20's default */
.sheet-long-number[type="number"] {
  width: 105px !important;
}

.sheet-thin-number[type="number"] {
  width: 24px !important;
}

.sheet-damage-dice-count[type="number"] {
  width: 24px !important;
  text-align: right;
  padding-right: 0px;
}

.sheet-3row-textarea {
  height: 72px;
}

.sheet-character-skill-labels {
  display: grid;
  grid-template-columns: 2fr 2fr 8fr 1fr 1fr 2fr 16fr;
  align-items: center;
}

.sheet-character-skills {
  display: grid;
  grid-template-columns: 2fr 2fr 8fr 1fr 1fr 2fr;
  align-items: center;
}

.sheet-pokemon-all-stats-bounds {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.sheet-pokemon-all-stats-grid {
  display: grid;
  justify-items: left;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr;
}

.sheet-pokemon-move-info-header {
  display: flex;
  justify-content: space-between;
}

.sheet-pokemon-move-info-grid-1 {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: left;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.sheet-pokemon-move-info-grid-2 {
  display: grid;
  justify-items: center;
  align-items: center;
  text-align: left;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Remove arrows from number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
}

input[type="text"],
select {
  background-color: rgba(255, 153, 153, 0);
  outline: none;
  border-width: 2px;
  border-color: grey;
  border-style: none none solid none;
  font-weight: bold;
  margin-bottom: 0px;
}

textarea {
  background-color: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
}

.sheet-pokemon-move {
  margin: 2px;
  padding: 2px;
  border: 1px solid grey;
  background-color: rgba(204, 204, 204, 0.5);
  /* TODO: It would be really cool to color each move by its type */
}

/* Toggle displaying Pokemon and Trainer */
input.sheet-tab {
  width: 100px;
  height: 18px;
  cursor: pointer;
  position: relative;
  opacity: 0;
  z-index: 9999;
}

span.sheet-tab {
  text-align: center;
  display: inline-block;
  font-size: 13px;
  border: 1px solid #000000;
  background: lightgray;
  color: black;
  font-weight: bold;
  border-radius: 12px;
  width: 100px;
  height: 18px;
  cursor: pointer;
  position: relative;
  margin-left: -100px;
  opacity: 0.4;
}

input.sheet-select-trainer:checked + span.sheet-select-trainer,
input.sheet-select-pokemon:checked + span.sheet-select-pokemon,
input.sheet-select-hybrid:checked + span.sheet-select-hybrid {
  background: lightgray;
  color: black;
  border-radius: 12px;
  opacity: 1;
}

/* This order is important - some blocks have multiple classes and need to be visible for two tabs */
input.sheet-select-trainer:not(:checked) ~ div.sheet-tab-trainer {
  display: none;
}
input.sheet-select-pokemon:not(:checked) ~ div.sheet-tab-pokemon {
  display: none;
}
input.sheet-select-hybrid:not(:checked) ~ div.sheet-tab-hybrid {
  display: none;
}
input.sheet-select-trainer:checked ~ div.sheet-tab-trainer {
  display: block;
}
input.sheet-select-pokemon:checked ~ div.sheet-tab-pokemon {
  display: block;
}
input.sheet-select-hybrid:checked ~ div.sheet-tab-hybrid {
  display: block;
}

/* End toggle */

.sheet-pokemon-extra-stats-grid {
  display: grid;
  justify-items: center;
  text-align: center;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* Color */

.sheet-attack-color[type="number"] {
  background-color: rgba(255, 204, 204, 0.5);
}

.sheet-defense-color[type="number"] {
  background-color: rgba(255, 255, 204, 0.5);
}

.sheet-spatk-color[type="number"] {
  background-color: rgba(204, 255, 255, 0.5);
}

.sheet-spdef-color[type="number"] {
  background-color: rgba(204, 255, 204, 0.5);
}

.sheet-speed-color[type="number"] {
  background-color: rgba(255, 204, 255, 0.5);
}

.sheet-attack-read-color[type="number"] {
  font-weight: bold;
  font-style: italic;
  background-color: rgba(255, 153, 153, 0.5);
}

.sheet-defense-read-color[type="number"] {
  background-color: rgba(255, 255, 153, 0.5);
  font-weight: bold;
  font-style: italic;
}

.sheet-spatk-read-color[type="number"] {
  background-color: rgba(153, 255, 255, 0.5);
  font-weight: bold;
  font-style: italic;
}

.sheet-spdef-read-color[type="number"] {
  background-color: rgba(153, 255, 153, 0.5);
  font-weight: bold;
  font-style: italic;
}

.sheet-speed-read-color[type="number"] {
  background-color: rgba(255, 153, 255, 0.5);
  font-weight: bold;
  font-style: italic;
}

.sheet-stat-ball-color[type="number"] {
  background-color: rgba(255, 153, 153, 0);
  outline: none;
  border: 0;
}

.sheet-stat-read-ball-color[type="number"] {
  font-weight: bold;
  font-style: italic;
  background-color: rgba(255, 153, 153, 0);
  outline: none;
  border: 0;
}

button[type="roll"].sheet-attack-rollers {
  font-size: 1em;
  padding: 3px;
}