From 30be596a3ffc99d49f43e3636188110f8b49422f Mon Sep 17 00:00:00 2001 From: rope Date: Wed, 28 Oct 2026 15:41:47 +0000 Subject: [PATCH] Mood bar: tighter edge Co-Authored-By: Claude Opus 5.5 --- static/styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/styles.css b/static/styles.css index 2a912d2..9c9a877 100644 --- a/static/styles.css +++ b/static/styles.css @@ -879,13 +879,13 @@ button.swatch { width: 36px; height: 36px; } .qp-then .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; } /* Townsfolk mood */ -/* The whole bar is the red → yellow → green scale: faint everywhere, full up to the mood (--p), with a soft edge. */ +/* The whole bar is the red → yellow → green scale: faint everywhere, full up to the mood (--p), with a soft edge 4.5% wide. */ .mood-bar { position: relative; height: 12px; border-radius: 99px; margin: 4px 0 8px; overflow: hidden; } .mood-bar::before, .mood-bar > span { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bad), #e3c34a 50%, var(--good)); } .mood-bar::before { opacity: .18; } -.mood-bar > span { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 4%), transparent calc(var(--p) + 4%)); - mask-image: linear-gradient(90deg, #000 calc(var(--p) - 4%), transparent calc(var(--p) + 4%)); } +.mood-bar > span { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 2.25%), transparent calc(var(--p) + 2.25%)); + mask-image: linear-gradient(90deg, #000 calc(var(--p) - 2.25%), transparent calc(var(--p) + 2.25%)); } .mood-effects { color: var(--muted); margin-bottom: 12px; } .needs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .need-head { display: flex; justify-content: space-between; margin-bottom: 8px; }