roll20-character-sheets/Savage Worlds - Graph Paper/source/styles/_trait_section.scss

.sheet-trait-section {
  > .sheet-left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 470px;
  }

  .sheet-section-container--center-top {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 112px;
    width: 100%;
  }

  .sheet-section-container--center-bottom {
    position: relative;
    display: flex;
    align-items: center;
    padding: 24px 0 32px 0;
    width: 100%;
    height: 100%;
  }

  .sheet-section-container--bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 32px;
    width: 100%;
  }
}

.sheet-silhouette {
  margin-left: -50px;
}

.sheet-secondary-block {
  position: absolute;
  left: 166px;
  top: 350px;
  z-index: 2;
  display: flex;
  align-items: center;
  transform: translateY(-50%);

  > *:not(:last-child) {
    margin-right: 23px;
  }

  .sheet-hexfield {
    &:hover .sheet-hexfield * {
      opacity: 1 !important;
      transition-delay: 0.4s;
    }

    .sheet-hexfield {
      > * {
        opacity: 0;
      }

      .sheet-hexfield__trait-field {
        &:focus {
          opacity: 1;

          & ~ * {
            opacity: 1;
          }
        }
      }

      .sheet-hexfield__label {
        opacity: 0;
      }
    }

    .sheet-hexfield--flight {
      top: -28px;
      left: 16px;

      .sheet-hexfield__trait-field:not(:placeholder-shown) {
        opacity: 1;

        & ~ * {
          opacity: 1;
          color: $c-text-light;
        }
      }
    }

    .sheet-hexfield--running,
    .sheet-hexfield--soak-bonus {
      .sheet-hexfield__trait-field:not(:placeholder-shown) {
        opacity: 1;

        & + .sheet-hexfield__hexagon {
          opacity: 1;
        }
      }
    }

    .sheet-hexfield--running {
      top: -64px;
      left: -17px;
    }

    .sheet-hexfield--soak-bonus {
      top: 0;
      left: 33px;
    }

    .sheet-hexfield--soak-wd {
      top: -36px;
      left: 66px;

      .sheet-hexfield__trait-field {
        color: $c-text-gray;
      }
    }
  }
}

.sheet-armor-block {
  position: absolute;
  right: -25px;
  top: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transform: translateX(-100px);

  > *:not(:last-child) {
    margin-bottom: 40px;
  }

  .sheet-hexfield--armor {
    &-head {
      margin-right: 16px;
    }

    &-legs {
      margin-right: 16px;
    }
  }

  .sheet-textarea {
    position: absolute;
    top: 8px;
    left: 37px;
    color: $c-text-lighter;
    font-size: 9px;
    line-height: 1.5;
    padding-top: 4px;
    height: 56px;
    width: 105px;
    resize: none;

    &::placeholder {
      color: #f0f0f0;
      font-size: 22px;
      font-weight: 700;
      line-height: 0.5;
    }
  }

  .sheet-armor-decoration {
    position: absolute;
    top: 15px;
    right: 16px;
    opacity: .08 !important;
    background: url('https://raw.githubusercontent.com/Tetrakern/roll20-character-sheets/master/Savage%20Worlds%20-%20Graph%20Paper/img/armor_line.png') no-repeat;
    height: 316px;
    width: 82px;
  }

  .sheet-armor-pointer {
    position: absolute;
    transform: translateX(-100%);
    opacity: .08 !important;

    &--head {
      background: url('https://raw.githubusercontent.com/Tetrakern/roll20-character-sheets/master/Savage%20Worlds%20-%20Graph%20Paper/img/head_line.png') no-repeat;
      top: 17px;
      right: -48px;
      height: 3px;
      width: 111px;
    }

    &--torso {
      background: url('https://raw.githubusercontent.com/Tetrakern/roll20-character-sheets/master/Savage%20Worlds%20-%20Graph%20Paper/img/torso_line.png') no-repeat;
      top: -17px;
      right: -42px;
      height: 38px;
      width: 110px;
    }

    &--arms {
      background: url('https://raw.githubusercontent.com/Tetrakern/roll20-character-sheets/master/Savage%20Worlds%20-%20Graph%20Paper/img/arms_line.png') no-repeat;
      top: -46px;
      right: -13px;
      height: 66px;
      width: 78px;
    }

    &--legs {
      background: url('https://raw.githubusercontent.com/Tetrakern/roll20-character-sheets/master/Savage%20Worlds%20-%20Graph%20Paper/img/legs_line.png') no-repeat;
      top: -31px;
      right: -15px;
      height: 53px;
      width: 76px;
    }
  }
}