roll20-character-sheets/Outbreak/outbreak.scss

// COLORS
//=============================
  $gray: #bbb;
  $white: #fff;
  $green: #00b300;
  $black: #000;

// GLOBALS
//=============================
@import "src/scss/_global";

.sheet-bold {
  font-weight: bold;
}

.sheet-dicefontd10 {
  font-family: 'dicefontd10';
}

div.sheet-grid {
  display: inline-grid;
  grid-column-gap: 2%;
  align-content: center;
}

div.sheet-navigation {
  grid-template-columns: 1fr 1fr 1fr;

  input {
    cursor: pointer;
    height: 20px;
    opacity: 0;
    width: 100% !important;
    z-index: 2;

    & + span {
      background: #c7c3b0;
      border-radius: 4px;
      color: #000;
      cursor: pointer;
      display: inline-block;
      font-size: 0.8em;
      font-weight: bold;
      height: 20px;
      text-align: center;
      width: 100px;
      margin-left: 2%;
      padding: 2% 1%;
    }

    &:checked + span {
      background-color: #dcdcdc;
      border-bottom-color: $white;
    }
  }

  input, span {
    @for $i from 1 to 4 {
      &:nth-of-type(#{$i}) { 
        grid-area: 1 / #{$i} / 1 / #{$i};
      }
    }
  }
}

.sheet-small-font {
  font-size: 0.5em;
}

.sheet-center {
  text-align: center;
}

div.sheet-container {
  display: inline-block;
  background-color: #e6e6e6;
  width: 100%;

  div {
    width: 100%;
  }

  .sheet-green-header {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/greenheader.png");
  }

  .sheet-yellow-header {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/yellowheader.png");
  }

  div.sheet-main {
    margin: 1%;
    width: 98%;

    div.sheet-column {
      display: inline-block;
      vertical-align: top;

      &:nth-of-type(1) {
        width: 59%;
      }

      &:nth-of-type(2) {
        width: 40%;
      }

      div.sheet-playerinfo {
        grid-template-columns: 20% 1fr;

        h2 {
          font-weight: bolder;

          &:after {
            content: ':';
          }
        }

        input {
          border: 0px;
          border-bottom: 0.15em solid $black;
          border-radius: 0px;
        }
      }

      div.sheet-spewbox {
        grid-row-gap: 2%;

        h1 {
          text-align: center;
        }

        h2 {
          text-align: center;
        }

        div.sheet-dicetypes {
          grid-template-columns: 1fr 1fr 1fr 1fr;
          text-align: center;

          img {
            height: 30px;
            width: 30px;
            margin-left: 33%;
          }

          div.sheet-attributes {
            div.sheet-grid {
              grid-template-columns: 1fr 1fr;
              grid-column-gap: 2%;

              input {
                border: 0.15em solid $gray;
                font-size: 1em;
                font-weight: bold;
                text-align: center;

                &[name*='bonus'] {
                  border-color: $green;
                }
              }
            }
          }
        }

        div.sheet-points {
          grid-template-columns: 4fr 1fr 4fr 1fr 4fr 1fr;
          text-align: center;

          h3 {
            font-size: 0.8em;
          }

          input {
            text-align: center;
          }
        }

        div.sheet-skills {
          grid-template-columns: 49% 49%;

          h1, h2 {
            grid-column: 1 / 3;
          }

          h2[data-i18n='Basic Skills'] {
            line-height: inherit;
          }

          button {
            font-size: 0.8em;

            & > span {
              font-weight: bold;
            }
          }

          label {
            border: 0.15em solid $black;
          }

          option {
            &[value*='strength'] {
              background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Strength_40x40.png);
            }

            &[value*='perception'] {
              background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Perception_40x40.png);
            }

            &[value*='empathy'] {
              background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Empathy_40x40.png);
            }

            &[value*='willpower'] {
              background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/OU_Attributes_Willpower_40x40.png);
            }
          }

          select {
            font-size: 0.8em;
            width: 100%;
          }

          div.sheet-skill-column {
            button {
              height: 2em;
              text-align: left;
            }

            div.sheet-header {
              grid-template-columns: 1fr 15% 15%;

              h3 {  
                font-size: 0.8em;
                text-align: center;

                &:nth-of-type(1) { grid-area: 1 / 2 / 1 / 2; }
                &:nth-of-type(2) { grid-area: 1 / 3 / 1 / 3; }
              }
            }

            div.sheet-skill {
              grid-template-columns: 1fr 15% 15%;
              display: inline-grid;
              grid-column-gap: 1%;

              label {
                background-color: $white;
              }

              input {
                border: none;
              }
            }
          }

          div.sheet-repeating-container {
            grid-column: 1 / 3;
            margin-top: 2%;

            div.repitem {
              margin-bottom: 2%;

              label > span {
                display: inline-block;
                width: 100%;
                height: 100%;
                text-align: center;
                background-color: #77be7924;
                font-weight: normal;
                padding-top: 10%;
              }
            }
          }
        }
      }
    }
  }
}

div.sheet-dice-box {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 2%;

  button {
    grid-area: 1 / 1 / 1 / 5;
  }

  img {
    left: 5%;
    margin-left: -5%;
    position: relative;
    top: 0px;
    z-index: +1;
  }

  select {
    width: 65%;
  }

  span[data-i18n='d5!'] {
    margin-right: -10%;
  }
}

  div.sheet-box {
    box-sizing: border-box;
    border: 10px solid transparent;
    -webkit-border-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/background.png) 18 18 repeat;
    box-shadow: 3px 5px 2px #888888;
    float: left;
  }

  div.sheet-dicelabel {
    grid-auto-rows: min-content;

    display: flex;
    align-content: center;
    justify-content: space-evenly;
    height: 30px;
    .info {
      font-size: 1.5em;
      font-family: "Pictos";
    }
  }

div.sheet-health {
  h1, h2 {
    text-align: center;
  }

  div.sheet-header {
    grid-template-columns: 1em 2fr 1fr;
    text-align: center;

    h2[data-i18n='Injuries'] {
      grid-column: 2;
    }

    h2[data-i18n='Damage Threshold'] {
      grid-column: 3;
      line-height: inherit;
    }
  }

  div.sheet-body {
    grid-template-columns: 1em 2fr 1fr;

    h3 {
      font-size: 0.8em;
      line-height: inherit;
      text-align: center;

      &[data-i18n='Health Points'] {
        text-orientation: mixed;
        transform: rotate(180deg);
        writing-mode: vertical-rl;
      }
    }

    div.sheet-injuries {
      grid-template-columns: 15px 1fr;
      grid-column-gap: 0.5%;

      input[type='checkbox'] {
        height: 15px;
        width: 15px;
      }

      input[type='text'] {
        margin-bottom: 2%;
      }
    }

    div.sheet-damage-threshold {
      h3[data-i18n='Sb + Wb'] {
        grid-area: 1 / 1 / 1 / 3;
      }

      h3[data-i18n='Bonus'] {
        grid-column: 1 / 4 / 1 / 4;
      }

      input {
        text-align: center;
      }
    }
  }

  div.sheet-viral {
    h2[data-i18n='Symptoms'] {
      text-align: left;
    }

    input[type="checkbox"] {
      -webkit-appearance: initial;
      appearance: initial;
      background: none;
      border: 1px solid black;
      height: 19px;
      position: relative;
      width: 19px;

      &:checked {
        background: #ccff33;
        content: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Outbreak/src/img/virus.png);
        border: none;

        &:after {
          -moz-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
          -webkit-transform: translate(-50%,-50%);
          left: 50%;
          position: absolute;
          top: 50%;
          transform: translate(-50%,-50%);
        }
      }
    }

    div.sheet-virus-checkboxes {
      display: block;
      text-align: center;
    }
  }

  div.sheet-pysche {
    grid-template-columns: 4fr 3fr 1fr 2fr 1fr 3fr;

    h1 {
      grid-area: 1 / 1 / 1 / 7;
    }

    h2 {
      &[data-i18n='Wb + Eb'] {
        grid-area: 2 / 2 / 2 / 2;
      }

      &[data-i18n='Bonus'] {
        grid-area: 2 / 4 / 2 / 4;
      }

     &[data-i18n='Total'] {
        grid-area: 2 / 6 / 2 / 6;
      }

      &[data-i18n='Coping Mechanisms'] {
        grid-area: 4 / 1 / 4 / 7;
        text-align: left;
      }
    }

    h2[data-i18n='Morale'] {
      grid-area: 3 / 1 / 3 / 1;
      line-height: inherit;
    }

    input[type='number'] {
      grid-row: 3;
      text-align: center;
    }

    span {
      grid-row: 3;
      margin-top: 40%;
      text-align: center;
    }

    textarea {
      grid-area: 5 / 1 / 5 / 7;
    }
  }
}

div.sheet-training-value {

  h1 {
    grid-column: 1 / 2;
    font-size: 1.8em;
    text-align: center;
  }

  div.sheet-red-kits {
    grid-template-columns: 1fr 1fr;

    img {
      margin-left: 25%;
    }
  }

  div.sheet-green-kits {
    grid-template-columns: 1fr 1fr 1fr;

    h2 {
      font-size: 0.8em;
    }

    img {
      margin-left: 20%;
    }
  }

  div.sheet-kits {
    margin-bottom: 5%;

    h2 {
      text-align: center;
      line-height: inherit;
    }

    input {
      height: 2.3em;
      text-align: center;
      width: 3em !important;
    }
  }
}

div.sheet-repeating-container {
  grid-template-columns: 4fr 2fr 2fr 10% 10% 1fr;

  h3 {
    font-size: 0.8em;
    text-align: center;
  }

  button.sheet-dicefontd10 {
    font-weight: bold;
    text-align: center;
  }

  .repcontainer {
    grid-column: 1 / 7;

    .repitem {
      display: inline-grid;
      grid-template-columns: 4fr 2fr 2fr 10% 10% 1fr;
      grid-column-gap: 1%;

      input[type='number'] {
        border: none;
      }
    }
  }
}

div.sheet-equipment {
  textarea {
    min-height: 100px;
  }
}


// HIDDEN SECTIONS
//=============================
div.sheet-tab {
  display: none;
}

@each $value in 'main', 'equipment', 'log' {
  input[name='attr_tab'][value='#{$value}'] ~ div.sheet-#{$value} {
    display: inline-block;
  }
}


// ROLL TEMPLATE
//=============================
@import "src/scss/_rolltemplate";




input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;}

input[type=number] {
    -moz-appearance:textfield;}