frees the dice from the box

src/style/atoms/_colours.scss

@@ -63,8 +63,7 @@ $attribute-die-bd-text-color: #000;
 $attribute-die-st-text-color: #000;
 
 
-$attribute-label-color: #FFF;
-$attribute-label-background-color: #0008;
+$attribute-label-color: #000;
 
 $rollable-die-border-color: #000;
 

src/style/atoms/_typography.scss

@@ -24,7 +24,10 @@
   }
 
   input,
-  .rkp .pill {
+  .rkp .pill,
+  .cooldown > span,
+  .attribute.rollable > .name,
+  .attribute.rollable > .wert {
     font-family: Andalus, sans-serif;
   }
 

src/style/molecules/_attributes.scss

@@ -10,25 +10,20 @@
 
     .attributes {
       display: flex;
+      position: relative;
+      top: -10px;
+      right: -10px;
 
       .attribute.rollable {
         width: 48px;
         height: 48px;
         position: relative;
-        box-shadow: inset numbers.$dice-box-inset numbers.$dice-box-inset numbers.$dice-box-blur-radius colours.$dice-box-shadow;
-        background: assets.$dice-box-background;
         margin-left: 2px;
-        border: numbers.$dice-box-border-width inset colours.$dice-box-border-color;
 
         .die {
-          stroke-width: 0.5;
 
           svg {
             position: absolute;
-            left: -6px;
-            top: -6px;
-            bottom: -6px;
-            right: -6px;
 
             path {
               fill: colours.$attribute-die-color;
@@ -39,9 +34,9 @@
         .wert {
           font-weight: bold;
           position: absolute;
-          left: -2px;
+          left: -1px;
           width: 48px;
-          top: -2px;
+          top: -1px;
           font-size: smaller;
           line-height: 48px;
           vertical-align: middle;
@@ -53,12 +48,11 @@
           position: absolute;
           left: 0;
           right: 0;
-          bottom: 0;
+          bottom: -12px;
           line-height: 12px;
           vertical-align: middle;
           text-align: center;
           color: colours.$attribute-label-color;
-          background-color: colours.$attribute-label-background-color;
         }
       }
 

src/style/molecules/_sidebar-elements.scss

@@ -63,6 +63,12 @@
 
       }
 
+    .button {
+
+      margin-bottom: 8px;
+
+    }
+
     .attack {
 
       display: grid;
@@ -192,6 +198,7 @@
           color: white;
           text-align: center;
           text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
+          overflow: hidden;
         }
 
         .progress {

src/templates/ui/partial-attribute-button.hbs

@@ -5,10 +5,6 @@
         {{> 'systems/DSA_4-1/templates/ui/partial-die.hbs' }}
     </div>
 
-    <span class="wert">
-        {{this.wert}}
-    </span>
-    <span class="name">
-        {{this.name}}
-    </span>
+    <span class="wert">{{this.wert}}</span>
+    <span class="name">{{this.name}}</span>
 </div>