simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blur the page whenever the window isn't in front

Browse Source 
Losing focus -- another tab, another window, another app -- now puts the
whole page behind a blur, so an app switcher's snapshot or a glance over
the shoulder gives nothing away. It comes back on focus, on the tab
becoming visible again, and on the first touch or key, which lands on the
veil rather than on a page nobody could see.

Painted as a backdrop filter on a fixed overlay above everything the app
can show: a filter on the page itself would make every fixed element
position against the wrong box.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MPZFnNdHbPGDTqQUNiE4ZN
This commit is contained in:
Simon
2026-09-22 08:30:20 +00:00
parent 741786c7cf
commit 1b38f9d9e7
5 changed files with 239 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/css/style.css
View File

@@ -3014,3 +3014,34 @@ body.theme-light .video-card img:not(.is-loaded) {
pointer-events: none;
}
/* Privacy veil -- the page goes behind a blur whenever this window isn't the
one in front. Above everything else the app can put on screen, and painted
as a backdrop filter rather than a filter on the page itself, which would
make every fixed element inside it position against the wrong box. */
.privacy-veil {
position: fixed;
inset: 0;
z-index: 9000;
opacity: 0;
pointer-events: none;
background: rgba(10, 8, 6, 0.38);
-webkit-backdrop-filter: blur(26px) saturate(0.55);
backdrop-filter: blur(26px) saturate(0.55);
transition: opacity 200ms ease;
}
.privacy-veil.is-on {
opacity: 1;
/* Going behind the blur is immediate -- a fade would be a window during
which the page is still readable. Coming back can take its time. */
transition: none;
/* So the tap that brings the window back lands here and lifts the veil,
rather than pressing something on a page nobody could see. */
pointer-events: auto;
}
/* Nothing to blur through without backdrop-filter, so the veil covers instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.privacy-veil { background: var(--bg-primary); }
}