Polish roll card presentation

Author: iosip

src/styles/partials/_controls.scss

@@ -34,6 +34,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
+  width: 2rem;
   gap: 0.5rem;
 
   input {
@@ -80,8 +81,10 @@
   }
 
   &--compact {
-    min-width: 2rem;
-    padding: 0 0.2rem;
+    padding: 0;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
   }
 }
 

src/styles/partials/_rolls.scss

@@ -39,6 +39,22 @@
     padding: 0.8rem 0.9rem;
   }
 
+  &__summary {
+    strong {
+      color: inherit;
+    }
+
+    &--success {
+      background: rgb(219 233 221 / 72%);
+      color: var(--yd-success-player);
+    }
+
+    &--failure {
+      background: rgb(241 216 211 / 72%);
+      color: var(--yd-success-pain);
+    }
+  }
+
   &__snap-effect {
     background: rgb(176 28 46 / 10%);
     border: 1px solid rgb(176 28 46 / 26%);
@@ -89,13 +105,31 @@
     min-width: 0;
   }
 
+  &__header {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+  }
+
   &__result {
     align-items: center;
     display: flex;
     flex-wrap: wrap;
     gap: 0.45rem;
   }
 
+  &__adjustments {
+    align-self: stretch;
+    display: grid;
+    gap: 0.35rem;
+    justify-items: end;
+
+    .yakov-dryh-button {
+      width: 1.5rem;
+    }
+  }
+
   &__dice {
     align-items: center;
     display: flex;
@@ -170,23 +204,14 @@
   }
 
   &__successes {
-    align-items: center;
-    color: var(--yd-muted);
     display: inline-flex;
-    font-size: 0.95rem;
     font-weight: 700;
-    gap: 0.35rem;
-    letter-spacing: 0.02em;
     white-space: nowrap;
   }
 
   &__successes-count {
     color: var(--yd-success-player);
-    font-size: large;
-  }
-
-  &__arrow {
-    font-size: 0.8em;
+    font-size: 1.05rem;
   }
 
   &--exhaustion {

src/styles/partials/_variables.scss

@@ -37,7 +37,7 @@
   --yd-stress-madness-border: #825264;
 
   --yd-shadow: 0 14px 30px rgb(33 22 30 / 12%);
-  --yd-round-shadow: radial-gradient(60% 60% at 40% 40%, #898073 0%, #473b2e 100%);
+  --yd-round-shadow: radial-gradient(60% 60% at 40% 40%, #474361 0%, #0a0912 100%);
   --yd-pip-discipline: #fffdf8;
   --yd-pip-inactive: #a89d95;
 

styles/yakov-dryh.css

@@ -1,15 +1,11 @@
 <article class="yakov-dryh-chat-card yakov-dryh-roll-card {{#if isFinal}}yakov-dryh-roll-card--final{{/if}}">
   <header class="yakov-dryh-header">
     <h3 class="m0">{{stageLabel}}</h3>
-
-    {{#if showOutcome}}
-      <span class="yakov-dryh-status yakov-dryh-status--{{rollResult.outcome}}">{{outcomeLabel}}</span>
-    {{/if}}
   </header>
 
   <div class="yakov-dryh-chat-card__body">
     {{#if showOutcome}}
-      <p class="yakov-dryh-roll-card__summary m0">
+      <p class="yakov-dryh-roll-card__summary yakov-dryh-roll-card__summary--{{rollResult.outcome}} m0">
         {{localize "YAKOV_DRYH.ROLL.Chat.Successes"}}
         {{rollResult.successes.player}}
         vs
@@ -23,7 +19,12 @@
       {{#each poolSummaries}}
         <section class="yakov-dryh-roll-pool {{cssClass}}">
           <div class="yakov-dryh-roll-pool__content">
-            <strong>{{label}}</strong>
+            <div class="yakov-dryh-roll-pool__header">
+              <strong>{{label}}:</strong>
+              <span class="yakov-dryh-roll-pool__successes">
+                <span class="yakov-dryh-roll-pool__successes-count">{{successes}}</span>
+              </span>
+            </div>
             <div class="yakov-dryh-roll-pool__result">
               {{#if hasDice}}
                 <div class="yakov-dryh-roll-pool__dice" aria-label="{{label}}">
@@ -40,15 +41,11 @@
               {{else}}
                 <span class="yakov-dryh-copy">-</span>
               {{/if}}
-              <span class="yakov-dryh-roll-pool__successes">
-                <i class="fa-solid fa-arrow-right yakov-dryh-roll-pool__arrow" aria-hidden="true"></i>
-                <span class="yakov-dryh-roll-pool__successes-count">{{successes}}</span>
-              </span>
             </div>
           </div>
 
           {{#if ../showAdjustments}}
-            <div class="yakov-dryh-inline-actions mt075">
+            <div class="yakov-dryh-inline-actions yakov-dryh-roll-pool__adjustments mt075">
               <button
                 class="yakov-dryh-button yakov-dryh-button--secondary yakov-dryh-button--compact"
                 type="button"