foundry-dsa41-game/src/style/_rollable.scss

@use 'sass:color';
@use 'sass:map';
@use "_colours" as colour;
@use "_numbers" as numbers;


$rollable_colours: (
  "nachteil": colour.$nachteil-color,
        "talent": colour.$talent-color,
        "Körperlich": colour.$talent-body-color,
        "Natur": colour.$talent-nature-color,
        "Gesellschaft": colour.$talent-social-color,
        "Wissen": colour.$talent-knowledge-color,
        "Sprachen": colour.$talent-language-color,
        "Handwerk": colour.$talent-crafting-color,
        "kampftalent": colour.$kampftalent-color,
        "liturgie": colour.$liturgie-color,
        "zauber": colour.$zauber-color,
);
.dsa41.sheet.actor.character {

  .block.rollable {
    display: block;
    height: 32px;
    position: relative;
    margin: 4px;

    .die {
      width: 32px;
      height: 32px;
      display: inline-block;
      position: relative;
      z-index: 1;

      .border {
        fill: #0000;
      }

      .value {
        position: absolute;
        left: 0;
        top: 0;
        width: 32px;
        line-height: 30px;
        vertical-align: middle;
        text-align: center;
        display: inline-block;
        font-size: 10pt;
        font-weight: bold;

        img {
          position: absolute;
          width: 20px;
          height: 20px;
          left: 6px;
          top: 6px;
        }
      }
    }

    .container {
      position: absolute;
      right: 0;
      left: 16px;
      top: 0;
      height: 32px;
      padding-left: 24px;

      span.name {
        line-height: 32px;
        vertical-align: middle;
      }
    }

    .werte {
      position: absolute;
      right: 0;
      height: 32px;
      top: 0;

      .eigenschaft {
        display: inline-block;
        height: 32px;
        width: 32px;
        position: relative;
        top: 0;

        span.name {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          width: 32px;
          line-height: 14px;
          text-align: center;
          font-size: smaller;
          color: #333;
        }

        span.value {
          border-left: 1px solid black;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 32px;
          line-height: 24px;
          text-align: center;
        }
      }
    }
  }

  // interactivity
  .block.rollable {
    &:hover {

      .die svg {
        filter: drop-shadow(0px 0px 10px rgb(255 0 0));
      }


    }

    &:active {

      .die {
        width: 28px;
        height: 28px;
        left: 2px;
        top: 2px;

        .value {
          width: 28px;
          height: 28px;
          left: 0;
          top: -2px;
          scale: 0.8;

          img {
            position: absolute;
            width: 20px;
            height: 20px;
            left: 4px;
            top: 7px;
          }
        }
      }
    }
  }
}

@mixin coloring($name) {
  $color: map.get($rollable_colours, $name);
  .#{$name}.rollable {
    .die {
      stroke-width: 0.5;

      .border {
        fill: colour.$rollable-die-border-color;
        stroke: colour.$rollable-die-border-color;
      }

      .center {
        fill: $color;
        stroke: colour.$rollable-die-border-color;
      }

      .topleft {
        fill: color.adjust($color, $lightness: numbers.$lighter_factor);
        stroke: colour.$rollable-die-border-color;
      }
      .bottomleft {
        fill: color.adjust($color, $lightness: numbers.$lightest_factor);
        stroke: colour.$rollable-die-border-color;
      }

      .topright {
        fill: color.adjust($color, $lightness: numbers.$darken_factor);
        stroke: colour.$rollable-die-border-color;
      }
      .bottomright, .bottom {
        fill: color.adjust($color, $lightness: numbers.$darkest_factor);
        stroke: colour.$rollable-die-border-color;
      }
    }

    .container {
      background-image: linear-gradient(to right, rgba($color, numbers.$start_gradient), rgba($color, numbers.$end_gradient));
      border-top-right-radius: 8px;
     border-bottom-right-radius: 8px;
    }
  }
}

@include coloring("nachteil");
@include coloring("liturgie");
@include coloring("zauber");
@include coloring("talent");
@include coloring("kampftalent");

@include coloring("Körperlich");
@include coloring("Natur");
@include coloring("Gesellschaft");
@include coloring("Wissen");
@include coloring("Sprachen");
@include coloring("Handwerk");