implements colorful sidebar buttons

src/module/sheets/characterSheet.mjs

@@ -96,7 +96,8 @@ class CharacterSheet extends HandlebarsApplicationMixin(ActorSheetV2) {
             scrollable: ['.inventory']
         },
         skills: {
-            template: Skills.template
+            template: Skills.template,
+            scrollable: ['.tab.skills']
         },
         spells: {
             template: Spells.template
@@ -564,6 +565,7 @@ class CharacterSheet extends HandlebarsApplicationMixin(ActorSheetV2) {
 
                     obj.fav = item.getFlag("DSA_4-1", "favourite")
                     obj.id = id
+                    obj.group = item.system.gruppe ?? null
 
                     if (t) {
                         obj.template = t

src/style/atoms/_buttons.scss

@@ -25,3 +25,34 @@
     @include colours.highlight;
   }
 }
+
+@mixin pill-button($color:false, $button-color: #F80) {
+  background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
+  background-color: $color;
+  background-repeat: repeat-y;
+  background-size: cover;
+  @if $color {
+    background-blend-mode: overlay;
+  }
+  border-color: $button-color;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 8px;
+  box-shadow: 2px 2px 4px #000;
+  color: $button-color;
+  cursor: pointer;
+  display: inline-block;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+  padding: 0 8px;
+  height: 28px;
+  line-height: 28px;
+  vertical-align: middle;
+}
+
+@mixin mini-button($color:false, $button-color: #F80) {
+  @include pill-button($color, $button-color);
+  width: 100%;
+  border-radius: 2px;
+  height: 24px;
+  line-height: 24px;
+}

src/style/atoms/_typography.scss

@@ -25,15 +25,20 @@
 
   input,
   .cooldown > span,
-  .mini-skill, .mini-weaponskill, .mini-language-skill,
   .attribute.rollable > .name,
   .attribute.rollable > .wert {
     font-family: Andalus, sans-serif;
   }
 
+  .mini-skill, .mini-weaponskill, .mini-language-skill, .mini-liturgy, .mini-spell,
   .editor.prosemirror.active, .editor.prosemirror.inactive {
     font-family: Gentium, sans-serif;
   }
 
+  .mini-skill, .mini-weaponskill, .mini-language-skill, .mini-liturgy, .mini-spell {
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
 }
 

src/style/molecules/_sidebar-elements.scss

@@ -1,5 +1,6 @@
 @use "../atoms/colours" as colors;
 @use "sass:color";
+@use "../atoms/buttons";
 
 .dsa41.sheet.actor.character {
 
@@ -110,9 +111,7 @@
           cursor: pointer;
         }
 
-        &:hover {
+        @include colors.highlight;
-          text-shadow: 0 0 2px rgba(255, 0, 0, 1);
-        }
       }
 
       .pa {
@@ -124,9 +123,7 @@
           cursor: pointer;
         }
 
-        &:hover {
+        @include colors.highlight;
-          text-shadow: 0 0 2px rgba(255, 0, 0, 1);
-        }
       }
 
       .ini {
@@ -137,9 +134,7 @@
           cursor: pointer;
         }
 
-        &:hover {
+        @include colors.highlight;
-          text-shadow: 0 0 2px rgba(255, 0, 0, 1);
-        }
       }
 
       .tp {
@@ -150,10 +145,7 @@
           cursor: pointer;
         }
 
-        &:hover {
+        @include colors.highlight;
-          text-shadow: 0 0 2px rgba(255, 0, 0, 1);
-        }
-
       }
     }
 
@@ -164,22 +156,47 @@
         margin: 8px 0;
       }
 
-      .mini-skill, .mini-weaponskill, .mini-language-skill {
+      .mini-skill, .mini-weaponskill, .mini-language-skill, .mini-spell, .mini-liturgy {
-        background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
-        background-repeat: repeat-y;
-        background-size: cover;
-
-        border: 1px outset #ccc;
-
-        color: white;
-        border-radius: 4px;
-        padding: 0 8px;
         margin-bottom: 4px;
-        cursor: pointer;
 
-        &:hover {
+
-          text-shadow: 0 0 2px rgba(255, 0, 0, 1);
+        @include colors.highlight;
       }
+
+      .mini-skill.Körperlich {
+        @include buttons.mini-button($color: color.scale(colors.$talent-body-color, $lightness: -50%), $button-color: gold);
+      }
+
+      .mini-skill.Gesellschaft {
+        @include buttons.mini-button($color: color.scale(colors.$talent-social-color, $lightness: -50%), $button-color: gold);
+      }
+
+      .mini-skill.Natur {
+        @include buttons.mini-button($color: color.scale(colors.$talent-nature-color, $lightness: -50%), $button-color: gold);
+      }
+
+      .mini-skill.Wissen {
+        @include buttons.mini-button($color: color.scale(colors.$talent-knowledge-color, $lightness: -50%), $button-color: gold);
+      }
+
+      .mini-skill.Handwerk {
+        @include buttons.mini-button($color: color.scale(colors.$talent-crafting-color, $lightness: -50%), $button-color: gold);
+      }
+
+      .mini-weaponskill {
+        @include buttons.mini-button($color: color.scale(colors.$kampftalent-color, $lightness: -50%), $button-color: gold);
+      }
+
+      .mini-language-skill {
+        @include buttons.mini-button($color: color.scale(colors.$talent-language-color, $lightness: -50%), $button-color: gold);
+      }
+
+      .mini-spell {
+        @include buttons.mini-button($color: colors.$zauber-color, $button-color: gold);
+      }
+
+      .mini-liturgy {
+        @include buttons.mini-button($color: colors.$liturgie-color, $button-color: gold);
       }
 
     }

src/style/organisms/_character-sheet.scss

@@ -9,6 +9,7 @@
 @use "./character-tabs/spells";
 @use "./character-tabs/liturgies";
 @use "./character-tabs/skills";
+@use "../atoms/buttons";
 
 .application.sheet.dsa41.actor.character {
 
@@ -39,7 +40,7 @@
       .rkp {
 
         .pill {
-          cursor: pointer;
+          @include buttons.pill-button;
         }
 
       }

src/style/organisms/character-tabs/_advsf.scss

@@ -1,3 +1,5 @@
+@use "../../atoms/buttons";
+
 @mixin tab($darkmode: false) {
 
   .advantages-and-specialabilities {
@@ -21,19 +23,9 @@
 
       .advantage, .special-ability, .flaw {
         position: relative;
-        border: 1px solid gold;
-        box-shadow: 2px 2px 4px #000;
-        border-radius: 8px;
-        height: 24px;
-        color: gold;
-        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-        display: inline-block;
-        padding: 0 8px;
         margin-left: 0;
         margin-bottom: 4px;
-        background-image: url("/systems/DSA_4-1/assets/velvet_button.png");
+        @include buttons.pill-button($color: rgb(0, 128, 0), $button-color: gold);
-        background-repeat: repeat-y;
-        background-size: cover;
 
         span {
           position: relative;
@@ -43,20 +35,7 @@
         }
 
         &.special-ability {
-          &::after {
+          @include buttons.pill-button($color: rgb(128, 0, 96), $button-color: gold);
-            background: rgba(128, 0, 96, 0.5);
-          }
-        }
-
-        &::after {
-          content: "";
-          position: absolute;
-          left: 0;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          border-radius: 8px;
-          background: rgba(0, 128, 0, 0.5);
         }
 
         & + .advantage, & + .special-ability {
@@ -80,18 +59,12 @@
             width: 24px;
           }
 
-          &::after {
+          @include buttons.pill-button($color: rgb(106, 36, 216), $button-color: gold);
-            background: rgba(106, 36, 216, 0.5);
-          }
-
         }
 
         &.disadvantage {
           font-style: italic;
-
+          @include buttons.pill-button($color: rgb(128, 0, 0), $button-color: gold);
-          &::after {
-            background: rgba(128, 0, 0, 0.5);
-          }
         }
       }
     }

src/templates/ui/partial-mini-rollable-button.hbs

@@ -1,3 +1,3 @@
-<div class="mini-skill" data-action="rollSkill" data-id="{{this.id}}">
+<div class="mini-skill {{this.group}}" data-action="rollSkill" data-id="{{this.id}}">
     {{this.name}}
 </div>