Add style for chat result

system/styles/scss/dices.scss

@@ -5,6 +5,60 @@
     .dice-total {
         background: rgba(255, 255, 255, 0.1);
         border: rgba(255, 255, 255, 0.75);
+        text-align: center;
+        margin: 0.5rem 0;
+        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+        &-rnk {
+            line-height: 2rem;
+            i {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+    button {
+        &.chat-dice-rnk {
+            cursor: default;
+            color: $white;
+            background: linear-gradient(
+                $l5r5e-linear-gradient-third,
+                $l5r5e-linear-gradient-third-dark,
+                $l5r5e-linear-gradient-third
+            );
+            background-origin: padding-box;
+            border-image: url("../assets/ui/macro-button.webp") 10 repeat;
+            border-image-width: 0.5rem;
+            border-image-outset: 0px;
+            margin: 0;
+            &:hover {
+                background: linear-gradient(
+                    $l5r5e-linear-gradient-first-dark,
+                    $l5r5e-linear-gradient-first,
+                    $l5r5e-linear-gradient-first-dark
+                );
+            }
+        }
+    }
+    .dice-result-rnk {
+        background: rgba(0, 0, 255, 0.1);
+        border: 1px solid rgba(55, 55, 155, 0.75);
+        padding: 0.25rem;
+        color: rgba(55, 55, 155, 0.75);
+        text-align: center;
+        font-weight: bold;
+        text-shadow: 0 0 0 $black;
+        &.success {
+            background: rgba(0, 255, 0, 0.1);
+            border-color: rgba(55, 155, 55, 0.75);
+            color: rgba(55, 155, 55, 0.75);
+            i.i_success {
+                font-size: 1rem;
+            }
+        }
+        &.fail {
+            background: rgba(255, 0, 0, 0.1);
+            border-color: rgba(155, 55, 55, 0.75);
+            color: rgba(155, 55, 55, 0.75);
+        }
     }
 }
 
@@ -18,20 +72,11 @@
         border-bottom: 3px solid fuchsia;
     }
 
-    img {
+    > img {
         border: 1px solid transparent;
-        background-repeat: no-repeat;
+        height: auto;
-        background-position: center;
+        width: calc(100% / 6 - 0.255rem);
-        background-size: 100%;
+        margin: auto;
-        height: 44px;
-        width: 44px;
-        //cursor: pointer;
-        //-webkit-appearance: none;
-        //appearance: none;
-        outline: none;
-        margin: 0;
-        flex: 0 0 20px;
-        display: inline-block;
     }
 }
 

system/templates/dice/chat-roll.html

@@ -5,13 +5,7 @@
     <div class="l5r5e profil">
         <header class="part-header flexrow chat-profil">
             <span class="chat-profil-element">
-                <img class="profile-img"
+                <img class="profile-img" src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}" data-edit="img" height="40" width="40" alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{else}}mystery-man{{/if}}" />
-                     src="{{#if l5r5e.actor.img}}{{l5r5e.actor.img}}{{else}}icons/svg/mystery-man.svg{{/if}}"
-                     data-edit="img"
-                     height="40"
-                     width="40"
-                     alt="{{#if l5r5e.actor.name}}{{l5r5e.actor.name}}{{else}}mystery-man{{/if}}"
-                >
             </span>
 
             <span class="chat-profil-element">
@@ -59,29 +53,29 @@
 
             {{#l5r5e.summary}}
             {{!-- summary symbols --}}
-            <div>
+            <div class="l5r5e dice-total dice-total-rnk">
                 {{#if success}}
-                    <i class="i_success" title="{{localize "l5r5e.chatdices.successes"}}"></i> {{success}}
+                    <i class="i_success" title="{{localize 'l5r5e.chatdices.successes'}}"></i>x{{success}} 
                 {{/if}}
 
                 {{#if explosive}}
-                    <i class="i_explosive" title="{{localize "l5r5e.chatdices.explosives"}}"></i> {{explosive}}
+                    <i class="i_explosive" title="{{localize 'l5r5e.chatdices.explosives'}}"></i>x{{explosive}} 
                 {{/if}}
 
                 {{#if opportunity}}
-                    <i class="i_opportunity" title="{{localize "l5r5e.chatdices.opportunities"}}"></i> {{opportunity}}
+                    <i class="i_opportunity" title="{{localize 'l5r5e.chatdices.opportunities'}}"></i>x{{opportunity}} 
                 {{/if}}
 
                 {{#if strife}}
-                    <i class="i_strife" title="{{localize "l5r5e.chatdices.strife"}}"></i> {{strife}}
+                    <i class="i_strife" title="{{localize 'l5r5e.chatdices.strife'}}"></i>x{{strife}} 
                 {{/if}}
             </div>
 
             {{!-- Result text --}}
             {{^if ../l5r5e.difficultyHidden}}
-            <div>
+            <div class="l5r5e dice-result-rnk {{#ifCond totalSuccess '>=' difficulty}}success{{else}}fail{{/ifCond}}">
                 {{#ifCond totalSuccess '>=' ../l5r5e.difficulty}}
-                    {{localize "l5r5e.chatdices.success_text"}} ({{totalBonus}} {{localize "l5r5e.chatdices.bonus_text"}})
+                    {{localize "l5r5e.chatdices.success_text"}} + <i title="{{totalBonus}} {{localize 'l5r5e.chatdices.successes'}}">({{totalBonus}} {{localize "l5r5e.chatdices.bonus_text"}})</i>
                 {{else}}
                     {{localize "l5r5e.chatdices.fail_text"}}
                 {{/ifCond}}