website_next: part 3

website_next/explore/block/rewards/style.css

@@ -0,0 +1,59 @@
+#block-details section[data-group="rewards"] {
+  --section-color: var(--orange);
+
+  [data-rewards-pane] {
+    display: grid;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  [data-reward-total] {
+    display: grid;
+    gap: 0.125rem;
+    justify-items: start;
+    min-width: 0;
+    color: var(--gray);
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    text-align: left;
+
+    strong {
+      min-width: 0;
+      overflow-wrap: anywhere;
+      color: var(--white);
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-strong);
+      line-height: var(--line-height-sm);
+    }
+
+    > span:first-child {
+      color: var(--section-color);
+      text-transform: uppercase;
+    }
+  }
+
+  [data-reward-bar] {
+    display: flex;
+    gap: 0.125rem;
+    height: 0.5rem;
+    min-width: 0;
+  }
+
+  [data-reward-segment] {
+    width: var(--share);
+    border-radius: 0.125rem;
+    transition: opacity var(--transition-duration) ease;
+
+    &[data-reward-segment="subsidy"] {
+      background: var(--orange);
+    }
+
+    &[data-reward-segment="fees"] {
+      background: var(--green);
+    }
+
+    &[data-muted] {
+      opacity: 0.25;
+    }
+  }
+}