roll20-character-sheets/TailsOfEquestria/less/npcSheet.less

@import "colors.less";

.tabSheet.npcSheet {
  .bio {
    input[type='text'] {
      color: @fontColor;
      font-size: x-large;
      width: 6in;
    }

    .checkbox {
      display: inline-block;
    }
  }

  .explodingHooves {
    h1 {
      font-size: 1em;
      line-height: 1em;
      width: 0.7in;
    }

    button {
      font-size: 2.5em;
      height: 0.3in;
      width: 0.4in;
    }
  }

  .quirks {
    & > label {
      display: inline-block;
      margin: 0;
      width: auto;
    }

    .repcontainer {
      display: inline-block;
    }

    .repitem {
      display: inline-block;
    }

    .quirk {
      height: auto;
      padding: 0;
      position: relative;
      width: auto;

      .editCheckbox {
        height: 16px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 16px;
        z-index: 1;

        &:hover + .editIcon {
          color: @fontColor;
        }

        &:checked + .editIcon::after {
          content: "_";
        }

        &:checked ~ .editMode {
          display: block;
        }

        &:checked ~ .viewMode {
          display: none;
        }
      }

      .editIcon {
        color: lighten(@fontColor, 25%);
        display: inline-block;
        font-family: Pictos;
        height: 16px;
        position: absolute;
        transition: color 0.5s;
        width: 16px;

        &::after {
          content: "y"
        }
      }

      .editMode {
        display: none;
        margin-left: 16px;

        .labelledUnderlined:nth-of-type(2) {
          width: 5in;
        }
      }

      .viewMode {
        margin-left: 16px;
        margin-right: 1em;
        display: inline-block;
      }
    }
  }

  .stamina {
    display: inline-block;
    margin-top: 3px;
    width: 2.8in;

    .staminaInner {
      label {
        display: inline-block;
        margin: 0;
        width: auto;
      }

      .fraction {
        display: inline-block;

        input {
          background: transparent;
          border-bottom: dotted 1px @fontColor;
          color: @fontColor;
          padding: 0;
          text-align: center;
          width: 3em;
        }

        span {
          padding-left: 5px;
          vertical-align: middle;
        }
      }
    }

    .damageModifiers {
      label {
        top: 0;
        width: 0.5in;
      }

      .inner {
        left: 0.6in;
        position: absolute;
        width: 2in;

        input {
          color: @fontColor;
          padding: 0;
        }
      }
    }
  }

  .talents {
    & > label {
      display: inline-block;
      margin: 0;
      width: auto;
    }

    .repcontainer {
      display: inline-block;
    }

    .repitem {
      display: inline-block;
    }

    .talent {
      height: auto;
      padding: 0;
      position: relative;
      width: auto;

      .editCheckbox {
        height: 16px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 16px;
        z-index: 1;

        &:hover + .editIcon {
          color: @fontColor;
        }

        &:checked + .editIcon::after {
          content: "_";
        }

        &:checked ~ .editMode {
          display: block;
        }

        &:checked ~ .viewMode {
          display: none;
        }
      }

      .editIcon {
        color: lighten(@fontColor, 25%);
        display: inline-block;
        font-family: Pictos;
        height: 16px;
        position: absolute;
        transition: color 0.5s;
        width: 16px;

        &::after {
          content: "y"
        }
      }

      .editMode {
        display: none;
        margin-left: 16px;
      }

      .viewMode {
        margin-left: 16px;
        margin-right: 1em;
        display: inline-block;
      }
    }
  }

  .traits {
    display: inline-block;
    vertical-align: top;

    .trait {
      border-radius: 10px;
      display: inline-block;
      height: 0.5in;
      padding: 3px;
      position: relative;
      transition: background 0.5s;
      width: 1.5in;

      &:hover {
        background: #ccf;
      }

      button {
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      select {
        background: transparent;
        border: none;
        color: @fontColor;
        line-height: 1em;
        position: absolute;
        width: 1in;
      }

      label.traitName {
        display: inline-block;
        margin: 0;
        width: auto;
      }

      .updowngrade {
        position: absolute;
        left: 0;
        top: 0.2in;

        input {
          background: transparent;
          color: @fontColor;
          text-align: center;
        }
      }
    }
  }
}