danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

#889: fix re-identify modal header — clip the blurred bg in its own layer

Browse source 
The hero's overflow:hidden was clipping the header content, but removing it let the
blurred background + overlay cover (and steal clicks from) the source tabs below.
Move the decoration into .reid-hero-decor — an absolutely-positioned clip layer
that contains the blur and is pointer-events:none — so the header content (a sibling,
never clipped) shows in full AND the tabs stay clickable.
This commit is contained in:
BoulderBadgeDad 2026-06-18 16:57:24 -07:00
parent 1367108e02
commit 1ccc7b5e15
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
webui/index.html
View file

@ -7747,8 +7747,10 @@
<div class="modal-overlay hidden" id="reid-modal-overlay" onclick="if(event.target===this)closeReidentifyModal()"> <div class="modal-overlay hidden" id="reid-modal-overlay" onclick="if(event.target===this)closeReidentifyModal()">
<div class="reid-modal" id="reid-modal"> <div class="reid-modal" id="reid-modal">
<div class="reid-hero"> <div class="reid-hero">
<div class="reid-hero-bg" id="reid-hero-bg"></div> <div class="reid-hero-decor">
<div class="reid-hero-overlay"></div> <div class="reid-hero-bg" id="reid-hero-bg"></div>
<div class="reid-hero-overlay"></div>
</div>
<span class="reid-close" onclick="closeReidentifyModal()">&times;</span> <span class="reid-close" onclick="closeReidentifyModal()">&times;</span>
<div class="reid-hero-content"> <div class="reid-hero-content">
<div class="reid-hero-art" id="reid-hero-art"></div> <div class="reid-hero-art" id="reid-hero-art"></div>

19
webui/static/style.css
View file

@ -68386,17 +68386,28 @@ body.app-locked > *:not(#launch-pin-overlay):not(#login-overlay):not(script):not
to { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 1; transform: translateY(0) scale(1); }
} }
/* ── Hero ── */ /* ── Hero ──
.reid-hero { position: relative; padding: 26px 28px; overflow: hidden; } No overflow:hidden on .reid-hero itself (it was clipping the header content).
Instead the decorative blurred bg + overlay live in .reid-hero-decor, an
absolutely-positioned clip layer: it contains the blur (so it can't bleed into
the tabs) and is pointer-events:none (so it can never steal clicks from the
source tabs). The actual content is a SIBLING of the decor layer, so it's never
clipped. */
.reid-hero { position: relative; padding: 26px 28px; }
.reid-hero-decor {
position: absolute; inset: 0; z-index: 0;
overflow: hidden; pointer-events: none;
border-radius: 20px 20px 0 0;
}
.reid-hero-bg { .reid-hero-bg {
position: absolute; inset: -30px; position: absolute; inset: -30px;
background-size: cover; background-position: center; background-size: cover; background-position: center;
filter: blur(46px) brightness(0.4) saturate(1.5); filter: blur(46px) brightness(0.4) saturate(1.5);
transform: scale(1.25); z-index: 0; opacity: 0.9; transform: scale(1.25); opacity: 0.9;
transition: background-image 0.4s ease; transition: background-image 0.4s ease;
} }
.reid-hero-overlay { .reid-hero-overlay {
position: absolute; inset: 0; z-index: 1; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(10,11,16,0.55) 0%, rgba(10,11,16,0.8) 100%); background: linear-gradient(135deg, rgba(10,11,16,0.55) 0%, rgba(10,11,16,0.8) 100%);
} }
.reid-hero-content { position: relative; z-index: 2; display: flex; gap: 18px; align-items: center; } .reid-hero-content { position: relative; z-index: 2; display: flex; gap: 18px; align-items: center; }