feat: hover preview dim effect — overlay dims page, hovered tile + popover stand out

1.5s hover delay (up from 350ms) for deliberate preview. When popover
appears, a semi-transparent dimmer covers the page (z-index 499). The
hovered tile/sidebar-item gets z-index 500 (same as popover) so it
appears above the dimmer alongside the preview. Both cleaned up on
mouseleave via hidePreview().
This commit is contained in:
Brian Krabach
2026-03-29 16:56:09 -07:00
parent 40ec20f4ba
commit 905cbf35e5
4 changed files with 59 additions and 2 deletions
+14
View File
@@ -986,6 +986,20 @@ body {
overflow-x: hidden;
}
.preview-dimmer {
position: fixed;
inset: 0;
z-index: 499; /* behind popover (500), above everything else */
background: rgba(0, 0, 0, 0.55);
pointer-events: none; /* clicks pass through — don't block mouseleave */
}
.session-tile.tile--previewing,
.sidebar-item.item--previewing {
position: relative;
z-index: 500; /* same as popover — above dimmer */
}
/* ============================================================
Responsive overlay sidebar at <960px
============================================================ */