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

@import "colors.less";

.pcSheet {
  .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.1in;
      width: 100%;

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

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

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

  .explodingHooves {
    position: absolute;
    right: 0;
    text-align: center;
    top: 1.5in;
    width: 2.2in;
  }

  .friendshipTokens {
    background: #f226e4;
    border-radius: 0.75in;
    display: inline-block;
    height: 1.5in;
    position: absolute;
    right: 0.5in;
    top: 0;
    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%);
    }
  }

  .reputations {
    background: @starlightColor;
    border-radius: 0.1in;
    padding: 1em;

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

    .reputation {
      background: @starlightColor;
      border-radius: 0.1in;
      padding: 0.25em;
      padding-bottom: 1em;
      position: relative;
      transition: background 0.5s;
      width: 7in;

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

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

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

      .labelledUnderlined {
        vertical-align: middle;
      }
    }
  }

  .stamina {
    background: @pinkieColor;
    border-radius: 0.1in;
    display: inline-block;
    height: 1in;
    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;
        }
      }
    }
  }

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

    .trait {
      background: #aaa;
      border-radius: 0.1in;
      display: inline-block;
      height: 1in;
      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.5em;
        left: 0.2in;
        position: absolute;
        text-align: center;
        text-align-last: center;
        top: 0.4in;
        width: 1.1in;
      }

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

      .updowngrade {
        position: absolute;
        top: 0.8in;

        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: @starlightColor;

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

      .d20 {
        font-size: 2.5em;
        left: 0.06in;
        position: absolute;
        top: 0;
      }
    }
  }
}