roll20-character-sheets/Without Numbers/Source/scss/roll_template.scss

@use "sass:map";

/* Roll templates */
.sheet-rolltemplate-swn-default,
.sheet-rolltemplate-swn-attack,
.sheet-rolltemplate-swn-skill,
.sheet-rolltemplate-swn-save {
  &:has(.sheet-revised) {
    --system-clip-path: #{$templateSWNRevisedClipPath};
  }
}

.sheet-rolltemplate-swn-default,
.sheet-rolltemplate-swn-attack,
.sheet-rolltemplate-swn-skill,
.sheet-rolltemplate-swn-save {
  margin-left: -41px;
  width: 292px;
  color: $gray-50;
  font-family: $arial;

  div {
    box-sizing: border-box;
  }

  .sheet-withoutavatars & {
    margin-left: -11px;
  }

  .sheet-container .inlinerollresult {
    padding: 0;
    font-family: inherit;
    background: transparent;
    border-color: transparent;
    border: none;
  }

  .sheet-container {
    background: var(--system-background, #0f0f0f);
    clip-path: var(--system-clip-path);

    min-height: 175px;
    position: relative;
    padding: 18px 20px;
  }

  .sheet-header {
    width: 198px;

    .sheet-name {
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 1;
      height: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      $gray-50-space: nowrap;
      font-family: $times;
      font-weight: bold;
    }

    .sheet-title {
      font-size: 14px;
      height: 32px;
      line-height: 16px;
      overflow: hidden;
      font-weight: bold;
      margin-bottom: 24px;
    }
  }

  .sheet-content {
    position: relative;
  }

  .sheet-rolls .inlinerollresult {
    font-size: 36px;
    font-weight: bold;
    line-height: 29px;
    $gray-50-space: nowrap;
  }

  .sheet-rolls {
    height: 35px;
    display: flex;
    align-items: start;
  }

  .sheet-rollname {
    font-size: 12px;
    line-height: 1;
  }

  a {
    color: inherit;

    &:hover {
      color: $red-700;
    }

    &[href^="~"] {
      padding: 0;
      background: transparent;
      border: none;
      line-height: 1.4;
    }
  }
}

.sheet-rolltemplate-swn-default {
  .sheet-container {
    &.sheet-revised {
      --system-background: url(#{$templateBackground}) top no-repeat, url(#{$templateBottom}) bottom no-repeat, #0f0f0f;
    }
    &.sheet-wwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$yellow-900});
    }
    &.sheet-cwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$purple-950});
    }
    &.sheet-neither {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$blue-700});
    }
  }

  .sheet-name {
    color: $rt-gray;
  }

  .sheet-rollname {
    margin-right: auto;
  }

  .sheet-desc,
  .sheet-buttons {
    font-size: 12px;
    line-height: 1.4;
  }

  .sheet-info {
    font-style: italic;
    font-size: 10px;
    line-height: 1;
    margin: -10px 0 5px;

    .inlinerollresult {
      font-size: 1em;
      font-weight: normal;
    }
  }
}

.sheet-rolltemplate-swn-attack {
  .sheet-container {
    &.sheet-revised {
      --system-background: url(#{$templateAttackBackground}) top no-repeat, url(#{$templateBottom}) bottom no-repeat, #0f0f0f;
    }
    &.sheet-wwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$yellow-900});
    }
    &.sheet-cwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$purple-950});
    }
    &.sheet-neither {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$blue-700});
    }
  }

  .sheet-name {
    color: $rt-purple;
  }

  .sheet-title {
    .inlinerollresult {
      font-size: 1em;
      pointer-events: none;
    }
  }

  .sheet-damage {
    margin-left: auto;
  }

  .sheet-roll {
    margin-left: 10px;
  }

  .sheet-rolls:not(:first-of-type) {
    margin-top: 5px;
  }

  .sheet-shock {
    font-style: italic;
    margin-top: 4px;
    font-size: 12px;
  }

  .sheet-info {
    font-style: italic;
    font-size: 10px;

    > span:first-child {
      margin-right: 10px;
    }

    .inlinerollresult {
      font-weight: normal;
      font-size: 1em;
      margin-left: 2px;
    }
  }

  .sheet-desc {
    font-size: 12px;
    line-height: 1.4;
  }
}

.sheet-rolltemplate-swn-skill {
  .sheet-container {
    &.sheet-revised {
      --system-background: url(#{$templateSkillBackground}) top no-repeat, url(#{$templateBottom}) bottom no-repeat, #0f0f0f;
    }
    &.sheet-wwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$yellow-900});
    }
    &.sheet-cwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$purple-950});
    }
    &.sheet-neither {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$blue-700});
    }
  }

  .sheet-name {
    color: $rt-blue;
  }

  .sheet-title {
    .sheet-italic {
      font-style: italic;
    }

    .inlinerollresult {
      font-size: 1em;
      pointer-events: none;
    }
  }

  .sheet-rollname {
    margin-right: auto;
  }
}

.sheet-rolltemplate-swn-save {
  .sheet-container {
    &.sheet-success {
      &.sheet-revised {
        --system-background: url(#{$templateSaveSuccessBackground}) top no-repeat, url(#{$templateBottom}) bottom no-repeat, #0f0f0f;
      }
    &.sheet-wwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$yellow-900});
    }
    &.sheet-cwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$purple-950});
    }
    &.sheet-neither {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$blue-700});
    }

      .sheet-name {
        color: $rt-green;
      }
    }

    &.sheet-failure {
      &.sheet-revised {
        --system-background: url(#{$templateSaveFailBackground}) top no-repeat, url(#{$templateBottom}) bottom no-repeat, #0f0f0f;
      }
    &.sheet-wwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$yellow-900});
    }
    &.sheet-cwn {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$purple-950});
    }
    &.sheet-neither {
      --system-background: linear-gradient(45deg, #0f0f0f 50%, #{$blue-700});
    }

      .sheet-name {
        color: $rt-red;
      }
    }
  }

  .sheet-vs {
    margin: 0 10px;
  }

  .sheet-rollname {
    margin-right: auto;
  }
}