roll20-character-sheets/Robotta/Robotta.css

/****************/
/* Basic layout */
/****************/

input {
  background: transparent;
  border: 1px solid transparent;
  height: 24px;
}

.sheet-character-1,
.sheet-character-2 {
  width: 796px;
  height: 1124px;
  display: none;
}

.sheet-character-1 {
  background: url("https://i.imgur.com/nJPgNDV.png") top left no-repeat;
  padding-top: 44px;
}

.sheet-character-2 {
  background: url("https://i.imgur.com/RnQMTbR.png") top left no-repeat;
  padding-top: 60px;
}

/* show the selected tab */
.sheet-tabstoggle[value="character-1"] ~ div.sheet-character-1,
.sheet-tabstoggle[value="character-2"] ~ div.sheet-character-2 {
  display: block;
}

/**********/
/* Page 1 */
/**********/
.sheet-name-row {
  margin-top: 20px;
}

.sheet-name {
  margin-left: 88px;
  width: 276px;
}

.sheet-design {
  margin-left: 52px;
  width: 113px;
}

/* Page 1 top */
.sheet-page-1-top {
  display: flex;
  margin-top: 20px;
}

.sheet-conditions,
.sheet-portrait {
  flex: 1;
}

.sheet-attributes {
  flex: 2;
  max-width: 397px;
}

.sheet-attribute-row {
  margin-bottom: 16px;
}

.sheet-attribute {
  width: 30px;
  text-align: center;
  margin-left: 116px;
}

.sheet-attribute.sheet-first {
  margin-left: 188px;
}

/* Character traits */
.sheet-character-traits-points {
  padding-left: 251px;
  display: flex;
}

/* The container */
.sheet-checkbox-container {
  position: relative;
  cursor: pointer;
  width: 9px;
  height: 9px;
  margin-right: -11px;
  margin-top: 11px;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sheet-checkbox-container:nth-child(3),
.sheet-checkbox-container:nth-child(6),
.sheet-checkbox-container:nth-child(8),
.sheet-checkbox-container:nth-child(10) {
  margin-right: -10px;
}

.sheet-checkbox-container.sheet-even {
  margin-top: 20px;
}

/* Hide the browser's default checkbox */
.sheet-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.sheet-checkbox-checkmark {
  position: absolute;

  height: 9px;
  width: 9px;
  background-color: transparent;
  transform: rotate(45deg);
}

/* When the checkbox is checked, add a blue background */
.sheet-checkbox-container input:checked ~ .sheet-checkbox-checkmark {
  background-color: black;
}

/* Show the checkmark when checked */
.sheet-checkbox-container input:checked ~ .sheet-checkbox-checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.sheet-checkbox-container .sheet-checkbox-checkmark:after {
  height: 9px;
  width: 9px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sheet-trait {
  margin-bottom: 6px;
  margin-left: 50px;
}

.sheet-trait.sheet-first {
  margin-top: -6px;
}

.sheet-trait input {
  width: 150px;
  margin-right: 14px;
}

/* Vital support */
.sheet-vital-support-row {
  margin-top: 14px;
  margin-left: 20px;
}

.sheet-vital-support-max,
.sheet-vital-support-temporal {
  width: 35px;
  margin-right: 2px;
  text-align: center;
}

/* Conditions */
.sheet-condition-points {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 20px;
}

.sheet-conditions {
  max-width: 133px;
}

.sheet-condition-points .sheet-checkbox-checkmark {
  width: 18px;
  height: 18px;
}

.sheet-condition-points .sheet-checkbox-container {
  width: 18px;
  height: 18px;
  margin-right: -5px;
  margin-bottom: 8px;
}

.sheet-portrait-notes {
  width: 194px;
  height: 253px;
  resize: none;
  margin-left: 12px;
  margin-top: 22px;
}

/* Professions */
.sheet-professions {
  padding-top: 22px;
  padding-left: 80px;
}

.sheet-profession-row {
  margin-bottom: 6px;
}

.sheet-profession-text {
  width: 286px;
}

.sheet-profession-rate {
  margin-left: 9px;
  margin-right: 17px;
  width: 24px;
  text-align: center;
}

/* Combat stats */
.sheet-combat {
  display: flex;
}

.sheet-combat-stats input {
  width: 33px;
  height: 31px;
  text-align: center;
}

.sheet-combat-stats {
  width: 200px;
  text-align: right;
  padding-top: 47px;
}

.sheet-combat-stat {
  margin-right: 12px;
  margin-bottom: 18px;
}

.sheet-weapons-armours-stats {
  width: 550px;
  padding-top: 51px;
}

.sheet-weapon-stat {
  margin-left: 10px;
  margin-bottom: 5px;
}

.sheet-weapon-name {
  width: 112px;
  margin-right: 12px;
}

.sheet-weapon-advantage,
.sheet-weapon-disadvantage {
  width: 139px;
  margin-right: 10px;
}

.sheet-weapon-damage,
.sheet-weapon-reach {
  width: 45px;
  margin-right: 6px;
  text-align: center;
}

.sheet-armour-stats {
  padding-top: 36px;
}

.sheet-armour-name {
  margin-right: 8px;
  margin-left: 5px;
  width: 207px;
}

.sheet-armour-absorb {
  width: 194px;
  margin-right: 5px;
}

.sheet-armour-penalty {
  width: 118px;
}

.sheet-armour-stat {
  margin-bottom: 5px;
}

/* Story section */
.sheet-story {
  display: flex;
  flex-direction: row;
}

.sheet-story-stats {
  width: 224px;
}

.sheet-story-facts {
  width: 523px;
}

.sheet-passion,
.sheet-determination {
  display: flex;
  margin-top: 12px;
  margin-left: 143px;
}

.sheet-determination {
  margin-top: -7px;
}

.sheet-passion .sheet-checkbox-checkmark,
.sheet-passion .sheet-checkbox-container,
.sheet-determination .sheet-checkbox-checkmark,
.sheet-determination .sheet-checkbox-container {
  width: 15px;
  height: 15px;
}

.sheet-passion .sheet-checkbox-container,
.sheet-determination .sheet-checkbox-container {
  margin-right: -14px;
}

.sheet-passion .sheet-even,
.sheet-determination .sheet-even {
  margin-top: 26px;
}

.sheet-isaac-points {
  margin-top: 10px;
  padding-left: 140px;
}

.sheet-isaac-points input {
  width: 30px;
  text-align: center;
}

.sheet-isaac-points input:nth-child(2) {
  margin-left: 10px;
}

.sheet-prestige-points {
  margin-top: 17px;
  padding-left: 150px;
}

.sheet-prestige-points input {
  max-width: 68px;
  text-align: center;
}

.sheet-story-facts {
  display: flex;
  flex-direction: column;
}

.sheet-story-facts input {
  margin-top: 12px;
}

.sheet-story-facts input:nth-child(1) {
  margin-left: 34px;
  width: 485px;
  margin-top: 15px;
}

.sheet-story-facts input:nth-child(2),
.sheet-story-facts input:nth-child(3) {
  margin-left: 117px;
  width: 403px;
}

.sheet-story-facts input:nth-child(4),
.sheet-story-facts input:nth-child(5) {
  margin-left: 106px;
  margin-top: 13px;
  width: 413px;
}

/**********/
/* Page 2 */
/**********/

/* Top */
.sheet-exos-max-input {
  margin-left: 622px;
  width: 52px;
  text-align: center;
}

/* Exos section */
.sheet-exos {
  padding-top: 3px;
}

.sheet-exo {
  margin-bottom: 6px;
}

.sheet-exo-port {
  text-align: center;
  margin-left: 54px;
  width: 46px;
}

.sheet-exo-name {
  margin-left: 3px;
  width: 196px;
}

.sheet-exo-description {
  width: 367px;
}

.sheet-exo-cost {
  margin-left: 3px;
  width: 64px;
  text-align: center;
}

/* Bottom */
.sheet-bottom {
  display: flex;
  flex-direction: row;
}

.sheet-robotta-story {
  width: 433px;
  padding-top: 44px;
}

.sheet-robotta-story textarea {
  resize: none;
  width: 369px;
  margin-left: 53px;
  height: 124px;
  margin-bottom: 38px;
}

.sheet-equipment-and-notes {
  margin-top: 45px;
  margin-left: 20px;
  width: 272px;
  height: 305px;
  margin-bottom: 0;
}

.sheet-taels {
  margin-left: 64px;
  width: 230px;
  text-align: center;
}

.sheet-energy {
  margin-top: 38px;
}

.sheet-energy input {
  width: 50px;
  text-align: center;
}

.sheet-energy-max {
  margin-left: 40px;
}

.sheet-energy-temporal {
  margin-left: 139px;
}

.sheet-collapse,
.sheet-total-collapse {
  display: flex;
  flex-direction: row;
}

.sheet-controlled-suspend,
.sheet-controlled-collapse,
.sheet-total-collapse {
  flex: 1;
}
.sheet-controlled-collapse input {
  text-align: center;
  width: 79px;
  margin-top: 50px;
}

.sheet-total-collapse .sheet-checkbox-checkmark,
.sheet-controlled-suspend .sheet-checkbox-checkmark {
  width: 16px;
  height: 16px;
}

.sheet-total-collapse .sheet-checkbox-container,
.sheet-controlled-suspend .sheet-checkbox-container {
  width: 16px;
  height: 16px;
  margin-top: 60px;
  margin-left: 51px;
}

.sheet-total-collapse .sheet-checkbox-container {
  margin-left: 9px;
}

.sheet-total-collapse .sheet-checkbox-container:nth-child(1) {
  margin-left: -9px;
}