Polish web balance table styling

- Color positive amounts green and negative amounts red.
- Stripe rows per logical entry (multi-commodity rows stay unified).
- Top-align the account column so multi-row entries read cleanly.
- Split amounts into integer/fractional cells aligned on the dot.
- Shrink the table to its content so the commodity sits next to the
  amount and the account column takes only the width it needs.
- Left-align the "Amount" header.

Author: ad-si

src/app.rs

@@ -52,44 +52,77 @@ fn BalanceTable(entries: Vec<BalanceEntry>) -> impl IntoView {
       <thead>
         <tr>
           <th class="col-account">"Account"</th>
-          <th class="col-amount">"Amount"</th>
+          <th class="col-amount" colspan="2">"Amount"</th>
           <th class="col-commodity">"Commodity"</th>
         </tr>
       </thead>
       <tbody>
         {entries
           .into_iter()
-          .map(|entry| view! { <BalanceRow entry /> })
+          .enumerate()
+          .map(|(i, entry)| {
+            let stripe = if i % 2 == 0 { "even" } else { "odd" };
+            view! { <BalanceRow entry stripe /> }
+          })
           .collect_view()}
       </tbody>
     </table>
   }
 }
 
+fn sign_class(value: &str) -> &'static str {
+  if value.trim_start().starts_with('-') {
+    "negative"
+  } else if value.trim().is_empty() {
+    ""
+  } else {
+    "positive"
+  }
+}
+
+fn split_amount(value: &str) -> (String, String) {
+  match value.find('.') {
+    Some(i) => (value[..i].to_string(), value[i..].to_string()),
+    None => (value.to_string(), String::new()),
+  }
+}
+
 #[component]
-fn BalanceRow(entry: BalanceEntry) -> impl IntoView {
-  let class = if entry.is_group { "group" } else { "leaf" };
+fn BalanceRow(entry: BalanceEntry, stripe: &'static str) -> impl IntoView {
+  let kind = if entry.is_group { "group" } else { "leaf" };
+  let row_class = format!("{kind} {stripe}");
   let mut amounts = entry.amounts;
   if amounts.is_empty() {
     amounts.push(("".to_string(), "".to_string()));
   }
   let first = amounts.remove(0);
   let rowspan = 1 + amounts.len();
+  let sign = sign_class(&first.1);
+  let int_class = format!("col-amount-int {sign}");
+  let frac_class = format!("col-amount-frac {sign}");
+  let (int_part, frac_part) = split_amount(&first.1);
 
   view! {
-    <tr class=class>
+    <tr class=row_class.clone()>
       <td class="col-account" rowspan=rowspan>
         {entry.account}
       </td>
-      <td class="col-amount">{first.1}</td>
+      <td class=int_class>{int_part}</td>
+      <td class=frac_class>{frac_part}</td>
       <td class="col-commodity">{first.0}</td>
     </tr>
     {amounts
       .into_iter()
       .map(|(commodity, value)| {
+        let sign = sign_class(&value);
+        let int_class = format!("col-amount-int {sign}");
+        let frac_class = format!("col-amount-frac {sign}");
+        let (int_part, frac_part) = split_amount(&value);
+        let row_class = row_class.clone();
         view! {
-          <tr class=class>
-            <td class="col-amount">{value}</td>
+          <tr class=row_class>
+            <td class=int_class>{int_part}</td>
+            <td class=frac_class>{frac_part}</td>
             <td class="col-commodity">{commodity}</td>
           </tr>
         }

style/main.css

@@ -10,6 +10,9 @@
   --color-error: hsl(0, 70%, 60%);
   --color-group: hsl(190, 50%, 65%);
   --color-leaf-account: hsl(210, 50%, 70%);
+  --color-positive: hsl(135, 50%, 60%);
+  --color-negative: hsl(0, 70%, 65%);
+  --bg-stripe: hsl(220, 15%, 11%);
 }
 
 @media (prefers-color-scheme: light) {
@@ -23,6 +26,9 @@
     --color-error: hsl(0, 70%, 42%);
     --color-group: hsl(190, 70%, 30%);
     --color-leaf-account: hsl(210, 70%, 38%);
+    --color-positive: hsl(135, 60%, 30%);
+    --color-negative: hsl(0, 70%, 42%);
+    --bg-stripe: hsl(220, 15%, 94%);
   }
 }
 
@@ -82,7 +88,6 @@ main {
 }
 
 table {
-  width: 100%;
   border-collapse: collapse;
   font-family:
     "SF Mono", "Fira Code", "Fira Mono",
@@ -101,14 +106,18 @@ thead th {
   letter-spacing: 0.05em;
 }
 
-th.col-amount {
-  text-align: right;
-}
-
 tbody td {
   padding: 0.25rem 1rem;
 }
 
+td.col-account {
+  vertical-align: top;
+}
+
+tbody tr.odd td {
+  background-color: var(--bg-stripe);
+}
+
 tr.group td {
   padding-top: 1.25rem;
   font-weight: 600;
@@ -124,11 +133,31 @@ tr.leaf td.col-account {
   padding-left: 2rem;
 }
 
-td.col-amount {
-  text-align: right;
+td.col-amount-int,
+td.col-amount-frac {
   font-variant-numeric: tabular-nums;
 }
 
+td.col-amount-int {
+  text-align: right;
+  padding-right: 0;
+}
+
+td.col-amount-frac {
+  text-align: left;
+  padding-left: 0;
+}
+
+td.col-amount-int.positive,
+td.col-amount-frac.positive {
+  color: var(--color-positive);
+}
+
+td.col-amount-int.negative,
+td.col-amount-frac.negative {
+  color: var(--color-negative);
+}
+
 td.col-commodity {
   color: var(--color-muted);
   padding-left: 0.5rem;