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

@import "colors.less";
@import "icons.less";

.main-container {
  position: relative;

  @import "pcSheet.less";
  @import "npcSheet.less";
  @import "vehicleSheet.less";
  @import "equipmentSheet.less";
  @import "notesSheet.less";

  .tabSheet > div {
    margin-bottom: 0.2in;
  }

  .explodingHooves {
    text-align: center;

    h1 {
      display: inline-block;
      font-size: 1.5em;
      vertical-align: middle;
    }

    .explodingHoof {
      background: @dashieColor;
      border-radius: 0.1in;
      display: inline-block;
      transition: background 0.5s;

      button {
        background: transparent;
        border: none;
        font-size: 3em;
        font-weight: bold;
        height: 0.4in;
        width: 0.5in;
      }

      &:hover {
        background: darken(@dashieColor, 20%);
      }

      &:nth-of-type(1) button::before {
        font-family: dicefontd4;
        content: "l";
      }

      &:nth-of-type(2) button::before {
        font-family: dicefontd6;
        content: "l";
      }

      &:nth-of-type(3) button::before {
        font-family: dicefontd8;
        content: "h";
      }

      &:nth-of-type(4) button::before {
        font-family: dicefontd10;
        content: "j";
      }

      &:nth-of-type(5) button::before {
        font-family: dicefontd12;
        content: "l";
      }

      &:nth-of-type(6) button::before {
        font-family: dicefontd20;
        content: "t";
      }
    }
  }

  .quirks {
    background: @twilightColor;
    border-radius: 0.1in;
    padding: 1em;

    h1 {
      color: @fontColor;
      font-size: 2em;
    }

    .quirk {
      & > label {
        display: inline-block;
        margin-bottom: 0;
        margin-top: 0.25em;
        vertical-align: middle;
        width: 0.3in;
      }

      input, select {
        background: transparent;
        color: @fontColor;
      }

      .labelledUnderlined {
        vertical-align: middle;
      }

      .labelledUnderlined:nth-of-type(3) {
        width: 4in;
      }
    }
  }

  .talents {
    background: @dashieColor;
    border-radius: 0.1in;
    padding: 1em;

    h1 {
      color: @fontColor;
      font-size: 2em;
    }

    .talent {
      background: @dashieColor;
      border-radius: 0.1in;
      height: 0.6in;
      padding: 0.25em;
      padding-bottom: 1em;
      position: relative;
      transition: background 0.5s;
      width: 7in;

      &:hover {
        background: darken(@dashieColor, 20%);
      }

      & > label {
        display: inline-block;
        margin-bottom: 0;
        margin-top: 0.5em;
        vertical-align: middle;
        width: 0.5in;
      }

      button {
        background: darken(@dashieColor, 20%);
        height: 100%;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      input, select {
        background: transparent;
        color: @fontColor;
      }

      .labelledUnderlined {
        vertical-align: middle;
      }

      .notes .labelledUnderlined {
        display: block;
        width: 7in;

        label {
          display: inline-block;
          font-size: 0.75em;
          margin-bottom: 0;
          padding-right: 0;
          padding-top: 4px;
          position: relative;
          top: 0;
          vertical-align: middle;
          width: auto;
        }

        .inner {
          display: inline-block;
          width: 6in;
        }
      }
    }
  }


}

// Show either the API or non-API versions of the exploding hoof dice,
// depending on whether the user wants to use the API.
input[name="attr_useApiExplodingHoof"] {
  &:checked {
    & ~ .tabs .main-container .explodingHooves.noApi {
      display: none;
    }
  }

  &:not(:checked) {
    & ~ .tabs .main-container .explodingHooves.api {
      display: none;
    }
  }
}

.itemcontrol {
  z-index: 99;
}

.repcontrol button {
  background: #ddaaff;
  border: none;
  color: #5e3dba;
  margin-top: 0.1in;
  text-shadow: none;
  transition: background 0.5s;
  z-index: 99;

  &:hover {
    background: #aa88ff;
  }
}