roll20-character-sheets-tester/5eShaped/precompiled/styles/_layout.scss

*,
.sheet-rolltemplate-5e-shaped * {
  box-sizing: border-box;
  line-height: 100%;
}
.sheet-wrapper {
  font-size: 1em;
  min-width: 29em;
}

.sheet-left {
  text-align: left !important;
}
.sheet-center,
.sheet-rolltemplate-5e-shaped .sheet-center {
  text-align: center;
}
.sheet-right,
.sheet-rolltemplate-5e-shaped .sheet-right {
  text-align: right;
}
.sheet-float-right {
  float: right;
}
.sheet-clear {
  clear: both;
}

.sheet-flex-grow {
  flex-grow: 1;
}
.sheet-no-shrink {
  flex-shrink: 0;
}
.sheet-inline,
.sheet-rolltemplate-5e-shaped .sheet-inline {
  display: inline;
}
.sheet-inline-block,
.sheet-rolltemplate-5e-shaped .sheet-inline-block {
  display: inline-block;
}
.sheet-block {
  display: block;
}
.sheet-pre-line {
  white-space: pre-line;
}
.sheet-relative,
.sheet-rolltemplate-5e-shaped .sheet-relative {
  position: relative;
}
.sheet-absolute {
  position: absolute;
  top: 0;
}
.sheet-fixed {
  position: fixed;
}

$sizes: (
  sm: 2,
  smd: 4,
  md: 5,
  lg: 10,
  xl: 15,
  xxl: 20
);
$sides: (
  t: 'top',
  r: 'right',
  b: 'bottom',
  l: 'left'
);
$pad-mar: (
  mar: 'margin',
  pad: 'padding'
);
@each $side, $side-value in $sides {
  @each $size, $size-value in $sizes {
    @each $type, $type-value in $pad-mar {
      .sheet-#{$type}-#{$side}-#{$size} {
        #{$type-value}-#{$side-value}: #{$size-value}px;
      }
    }

    @if ($side == t) and ($size == sm) or ($size == md) {
      .sheet-rolltemplate-5e-shaped .sheet-mar-#{$side}-#{$size} {
        margin-#{$side-value}: #{$size-value}px !important;
      }
    }
  }
}
.sheet-pad-t-twelve {
  padding-top: 12px;
}
.sheet-pad-t-seven {
  padding-top: 7px;
}
.sheet-pad-l-hundred {
  padding-left: 100px;
}
.sheet-pad-t-hundred {
  padding-top: 100px;
}
.sheet-no-pad {
  padding: 0;
}


@for $i from 01 through 100 {
  $width-name: $i;
  @if $i < 10 {
    $width-name: 0 + '' + $i;
  }
  .sheet-col-#{$width-name},
  .sheet-rolltemplate-5e-shaped .sheet-col-#{$width-name} {
    width: round(percentage($i/100));
  }
  .sheet-#{$i}-em {
    width: #{$i}em;
  }
}

.sheet-col-1-3 {
  width: 33.33333%;
}
.sheet-col-2-3 {
  width: 66.66667%;
}
.sheet-col-1-6 {
  width: 16.66667%;
}
.sheet-col-1-8 {
  width: 12.5%;
}

.sheet-1-3-em {
  width: 1.3em;
}
.sheet-1-5-em {
  width: 1.5em;
}
.sheet-2-4-em {
  width: 2.4em;
}
.sheet-3-5-em {
  width: 2.4em;
}


.sheet-vert-middle {
  vertical-align: middle;
}

.sheet-wrapper-button {
  width: 100%;
}


.sheet-no-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-hidden {
  display: none !important;
}

.sheet-shaped-row,
.sheet-rolltemplate-5e-shaped .sheet-shaped-row,
.sheet-section-spells .repcontainer,
.sheet-section-npc .sheet-skills .repcontainer,
.sheet-ammo .repcontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  &.sheet-center {
    justify-content: center;
  }
  &.sheet-space-around {
    justify-content: space-around;
  }
  &.sheet-space-between {
    justify-content: space-between;
  }
  &.sheet-justify-flex-end {
    justify-content: flex-end;
  }
  &.sheet-vert-top {
    align-items: flex-start;
  }
  &.sheet-vert-center {
    align-items: center;
  }
  &.sheet-flex-end {
    align-items: flex-end;
  }
  &.sheet-no-wrap {
    flex-wrap: nowrap;
  }
}

.sheet-gm-info-flex,
.sheet-rolltemplate-5e-shaped .sheet-gm-info-flex,
.sheet-gm-info-block,
.sheet-rolltemplate-5e-shaped .sheet-gm-info-block,
.sheet-gm-info-inline-block,
.sheet-rolltemplate-5e-shaped .sheet-gm-info-inline-block {
  background-color: $light-yellow !important;
  display: none;
}

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, $white,  50%)) {
  // For Google Chrome
  ::-webkit-scrollbar {
    height: $size;
    width: $size;
  }
  ::-webkit-scrollbar-button {
    height: 0;
    width: 0;
  }
  ::-webkit-scrollbar-thumb {
    background: $foreground-color;
    border: none;
    border-radius: 0;
    &:hover {
      background: #5e6b77;
    }
    :active {
      background: #4c565f;
    }
  }
  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 0;
    &:hover,
    &:active {
      background: rgba(0, 0, 0, 0.15);
    }
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }


  // For Internet Explorer
  body {
    scrollbar-face-color: $foreground-color;
  }
}

@include scrollbars($scrollbar-size, slategray);