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

@use 'sass:color';
@use 'sass:map';
@use "../atoms/colours" as colour;
@use "../atoms/numbers" as numbers;
@use "../atoms/buttons";

$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,
        "kampf": colour.$kampftalent-color,
        "liturgie": colour.$liturgie-color,
        "zauber": colour.$zauber-color,
);
$rollable_colours_font: (
        "nachteil": colour.$nachteil-text-color,
        "talent": colour.$talent-text-color,
        "Körperlich": colour.$talent-body-text-color,
        "Natur": colour.$talent-nature-text-color,
        "Gesellschaft": colour.$talent-social-text-color,
        "Wissen": colour.$talent-knowledge-text-color,
        "Sprachen": colour.$talent-language-text-color,
        "Handwerk": colour.$talent-crafting-text-color,
        "kampf": colour.$kampftalent-text-color,
        "liturgie": colour.$liturgie-text-color,
        "zauber": colour.$zauber-text-color,
);

.dsa41.sheet.actor.character {

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

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

      .border {
        fill: #0000;
      }

      .value {
        position: absolute;
        left: 0;
        top: 1px;
        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;
        }
      }

      &:active {


        scale: 0.8;

        .value {

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

      }
    }

    .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;
        }
      }
    }

    .outside {
      position: absolute;
      right: -24px;
      top: 8px;
      bottom: 8px;
      z-index: 3;

      @include colour.highlight;
    }
  }

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

      svg {
        @include colour.svg-highlight;
      }


    }


  }
}

@mixin coloring($name) {
  $color: map.get($rollable_colours, $name);
  $font_color: map.get($rollable_colours_font, $name);

  .#{$name}.rollable {
    .die {

      svg {

        margin: -4px;

        path {
          fill: $color;

        }
      }

      span.value {
        color: $font_color;

      }

    }

    .container {
      // background-image: linear-gradient(to right, rgba($color, numbers.$start_gradient), rgba($color, numbers.$end_gradient));
      @include buttons.raised_button;
    }
  }
}

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

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