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

@import "colors.less";
@import "rolltemplate.less";

.charsheet {
  background: #fff;
  color: @fontColor;
  width: 8in;

  @import "fields.less";
  @import "main.less";

  h1 {
    color: @fontColor;
  }

  .centeredH {
    text-align: center;
  }

  .centeredV > * {
    vertical-align: middle;
  }

  .floatLeft {
    float: left;
  }

  .floatRight {
    float: right;
  }

  .inlineBlock {
    display: inline-block;
  }

  .tabs {
    & > input[type="radio"] {
      display: none;

      &:checked + label {
        background: @tabColor;
        color: #fff;
      }
    }

    & > label {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      cursor: pointer;
      display: inline-block;
      margin-bottom: 0;
      min-width: 0.5in;
      padding: 5px;
      text-align: center;
      width: auto;

      &:nth-of-type(1) {
        margin-left: 0.5in;
      }
    }

    & > .tabContents {
      border: solid 5px @tabColor;
      border-radius: 0.25in;
      padding: 1em;

      & > .tab {
        display: none;
      }
    }

    /* Display the tabs if their radio is checked. */
    input#sheetTabPC:checked ~ .tabContents .tab#sheetTabPCContainer {
      display: block;
    }
    input#sheetTabNPC:checked ~ .tabContents .tab#sheetTabNPCContainer {
      display: block;
    }
    input#sheetTabEquipment:checked ~ .tabContents .tab#sheetTabEquipmentContainer {
      display: block;
    }
    input#sheetTabVehicle:checked ~ .tabContents .tab#sheetTabVehicleContainer {
      display: block;
    }
    input#sheetTabNotes:checked ~ .tabContents .tab#sheetTabNotesContainer {
      display: block;
    }
  }

  .top {
    height: 2.6in;
    overflow: hidden;
    position: relative;
    width: 8in;

    .mask {
      height: 1in;
      left: 0;
      position: absolute;
      top: 1.65in;
      width: 100%;
      background: linear-gradient(fade(#fff, 0%), #fff);
    }

    .version {
      bottom: 0;
      opacity: 0.5;
      position: absolute;
      right: 0;
    }
  }
}