From d62bbe9886436f7b1c223e13bb36fd1f968c2494 Mon Sep 17 00:00:00 2001
From: macniel <yuna.baehr@proton.me>
Date: Thu, 30 Oct 2025 10:40:11 +0100
Subject: [PATCH] frees the dice from the box

---
 src/style/atoms/_colours.scss                 |  3 +--
 src/style/atoms/_typography.scss              |  5 ++++-
 src/style/molecules/_attributes.scss          | 18 ++++++------------
 src/style/molecules/_sidebar-elements.scss    |  7 +++++++
 src/templates/ui/partial-attribute-button.hbs |  8 ++------
 5 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/style/atoms/_colours.scss b/src/style/atoms/_colours.scss
index 26d0d225..e533a041 100644
--- a/src/style/atoms/_colours.scss
+++ b/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;
 
diff --git a/src/style/atoms/_typography.scss b/src/style/atoms/_typography.scss
index e3cb3ab3..0827abfe 100644
--- a/src/style/atoms/_typography.scss
+++ b/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;
   }
 
diff --git a/src/style/molecules/_attributes.scss b/src/style/molecules/_attributes.scss
index 3c8ef194..178a3cfa 100644
--- a/src/style/molecules/_attributes.scss
+++ b/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;
         }
       }
 
diff --git a/src/style/molecules/_sidebar-elements.scss b/src/style/molecules/_sidebar-elements.scss
index 3614e865..8b5921a0 100644
--- a/src/style/molecules/_sidebar-elements.scss
+++ b/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 {
diff --git a/src/templates/ui/partial-attribute-button.hbs b/src/templates/ui/partial-attribute-button.hbs
index 2fce6caa..4e439926 100644
--- a/src/templates/ui/partial-attribute-button.hbs
+++ b/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>