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

@import "colors.less";

.main-container {
  border: solid 5px #ea60e1;
  border-radius: 0.25in;
  padding: 1em;
  position: relative;

  & > div {
    margin-bottom: 0.2in;
  }

  .bio {
    background: @twilightColor;
    border-radius: 0.1in;
    display: inline-block;
    padding: 1em;
    width: 5in;

    .colors {
      text-align: center;

      span label {
        display: inline-block;
        width: auto;
      }
    }

    .labelledUnderlined {
      display: block;
      font-size: 2em;
      margin-bottom: 0.5em;
      width: 100%;

      label {
        display: inline-block;
        line-height: 1em;
        margin: 0;
        position: relative;
        text-align: right;
        width: 1.5in;
      }

      .inner {
        display: inline-block;
        width: auto;

        input, select {
          background: transparent;
          color: @fontColor;
          font-size: 0.7em;
          padding: 0;
          width: 3in;
        }
      }
    }
  }

  .explodingHooves {
    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.5in;
        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";
      }
    }
  }

  .friendshipTokens {
    background: #f226e4;
    border-radius: 0.75in;
    display: inline-block;
    height: 1.5in;
    position: absolute;
    right: 1em;
    top: 1em;
    width: 1.5in;

    h1 {
      color: #fff;
      font-size: 1.75em;

      span {
        height: 100%;
        position: absolute;
        text-align: center;
        transform-origin: center;
        width: 100%;

        &:nth-of-type(1) {
          transform: rotate(-63deg);
        }
        &:nth-of-type(2) {
          transform: rotate(-49deg);
        }
        &:nth-of-type(3) {
          transform: rotate(-35deg);
        }
        &:nth-of-type(4) {
          transform: rotate(-21deg);
        }
        &:nth-of-type(5) {
          transform: rotate(-7deg);
        }
        &:nth-of-type(6) {
          transform: rotate(7deg);
        }
        &:nth-of-type(7) {
          transform: rotate(21deg);
        }
        &:nth-of-type(8) {
          transform: rotate(35deg);
        }
        &:nth-of-type(9) {
          transform: rotate(49deg);
        }
        &:nth-of-type(10) {
          transform: rotate(63deg);
        }
      }
    }

    input {
      background: transparent;
      color: #fff;
      font-size: 5em;
      left: 50%;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .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 {
        background: transparent;
        color: @fontColor;
      }

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

  .stamina {
    background: @pinkieColor;
    border-radius: 0.1in;
    display: inline-block;
    height: 0.6in;
    padding: 1em;
    vertical-align: middle;

    h1 {
      color: @fontColor;
      display: inline-block;
      font-size: 2em;
      vertical-align: middle;
    }

    .fraction {
      display: inline-block;

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

      span {
        font-size: 2em;
        vertical-align: middle;
      }
    }

    .labelledUnderlined {
      display: block;
      margin-bottom: 0.5em;
      width: 100%;

      label {
        display: inline-block;
        line-height: 1em;
        margin: 0;
        position: relative;
        text-align: right;
        width: auto;
      }

      .inner {
        display: inline-block;
        width: auto;

        input, select {
          background: transparent;
          color: @fontColor;
          font-size: 0.7em;
          padding: 0;
          width: 1.5in;
        }
      }
    }
  }

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

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

    .talent {
      background: @dashieColor;
      border-radius: 0.1in;
      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;
      }
    }
  }

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

    .trait {
      background: #aaa;
      border-radius: 0.1in;
      display: inline-block;
      height: 0.6in;
      padding: 1em;
      position: relative;
      transition: background 0.5s;
      width: 1.2in;

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

      select {
        background: transparent;
        border: none;
        color: @fontColor;
        font-size: 1.25em;
        left: 0;
        position: absolute;
        text-align: center;
        text-align-last: center;
        top: 0.4in;
        width: 1in;
      }

      label.traitName {
        font-size: 2em;
        text-align: center;
      }

      .updowngrade {
        position: absolute;
        right: 0.05in;
        top: 0.4in;

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

      &.body {
        background: @dashieColor;

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

      &.mind {
        background: @twilightColor;

        &:hover {
          background: darken(@twilightColor, 10%);
        }
      }

      &.charm {
        background: @flutterColor;

        &:hover {
          background: darken(@flutterColor, 10%);
        }
      }
    }
  }
}