admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(report): thicker border + deeper multi-layer shadow on filter popover

Browse Source 
Konrad's Checkpoint-1 feedback: the popover 'kind of disappears against
the report page'. Previous 1px border + 0.28 opacity shadow read as
weak against the amber-tinted report cards.

Now: 2px accent-orange border + three-layer shadow (soft accent halo,
deep drop, near edge) so the popover reads as clearly detached. Light
theme gets its own shadow palette because white-on-white needs less
absolute darkness but more tinting to be visible.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-23 13:28:18 +02:00
parent 1d00a3a68f
commit 0bbf2caae5
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
static/css/custom.css
View File

@ -1781,7 +1781,10 @@ body, .card, .modal-content, .form-control, .form-select,
/* --- Popover positioned under the pill --- */
/* max-height + flex column keeps the sticky footer visible even when the
popover body has to scroll (Choices.js can render a long list of options). */
popover body has to scroll (Choices.js can render a long list of options).
Border + shadow beefed up 2026-04-23 so the popover visually detaches
from the report body behind it — previous subtle shadow was getting
lost against the amber-accented report cards. */
.filter-popover {
position: absolute;
top: calc(100% + 6px);
@ -1793,12 +1796,23 @@ body, .card, .modal-content, .form-control, .form-select,
display: flex;
flex-direction: column;
background: var(--bg-card);
border: 1px solid var(--border-default);
/* Two-layer border for depth: outer accent-tinted halo + inner crisp edge */
border: 2px solid var(--accent);
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
box-shadow:
0 0 0 4px rgba(232, 133, 26, 0.08), /* soft accent halo */
0 18px 44px rgba(0, 0, 0, 0.55), /* deep drop shadow */
0 6px 12px rgba(0, 0, 0, 0.35); /* near shadow for edge crispness */
padding: 0;
overflow: hidden; /* clip Choices.js dropdown so the sticky footer wins */
}
/* Light theme: shadow and halo need different opacity to read against white */
:root.light .filter-popover {
box-shadow:
0 0 0 4px rgba(217, 119, 6, 0.12),
0 18px 44px rgba(15, 23, 42, 0.22),
0 6px 12px rgba(15, 23, 42, 0.14);
}
.filter-popover[hidden] {
display: none;
}