bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve hero RSVP readability: whiter text, bordered buttons, a cohesive reason panel

Browse Source 
The "are you in?" subtext and the In/Out button labels were both dim
grey (text-on-dark-dim/text-on-dark) against a photo backdrop -- bumped
to white, and gave both buttons a shared border (border-white/30) for
definition against the image, same colour on both so they read as a
matched pair.

The Out reason step (label, textarea, Cancel/Confirm) used to be loose
floating controls directly on the photo -- now wrapped in one bordered/
backed panel (same border colour as the In/Out pair) so it reads as one
cohesive control instead of scattered text and buttons.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-22 15:03:33 +02:00
parent 366239e60b
commit dba28ffc24
4 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/css/app.css
View File

@@ -4564,6 +4564,21 @@
.border-warning {
border-color: var(--color-warning);
}
.border-white {
border-color: var(--color-white);
}
.border-white\/20 {
border-color: color-mix(in srgb, #fff 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
}
}
.border-white\/30 {
border-color: color-mix(in srgb, #fff 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
}
}
.border-l-info {
border-left-color: var(--color-info);
}
@@ -4603,6 +4618,15 @@
.bg-base-200 {
background-color: var(--color-base-200);
}
.bg-black {
background-color: var(--color-black);
}
.bg-black\/20 {
background-color: color-mix(in srgb, #000 20%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
}
}
.bg-info {
background-color: var(--color-info);
}