rope/guildhall
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Mood bar: faint track, soft edge

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-28 15:39:43 +00:00
parent faf186f102
commit af1ed5eacf
2 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

9
static/styles.css
View file

@ -879,10 +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; the part above the mood is covered by the track. */
.mood-bar { position: relative; height: 12px; border-radius: 99px; margin: 4px 0 8px; overflow: hidden;
/* The whole bar is the red → yellow → green scale: faint everywhere, full up to the mood (--p), with a soft edge. */
.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 > span { position: absolute; top: 0; right: 0; bottom: 0; background: var(--bg); }
.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-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; }