megaproxy/claude-usage-widget
1
0
Fork 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions

Settings overlay: cover the widget cleanly (was rendering below content because of a stacking-context fix from theme atmosphere layer)

Browse source
This commit is contained in:
megaproxy 2026-05-09 15:51:38 +01:00
parent 3a4b1a4d7a
commit 14d9ca0b41
2 changed files with 6 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/Settings.svelte
View file

@ -224,8 +224,7 @@
.overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(6px);
background: var(--bg);
display: flex;
align-items: stretch;
z-index: 10;

8
src/styles.css
View file

@ -41,7 +41,10 @@ html, body {
}
/* Optional decorative atmosphere layer per theme — set --atmosphere
to a `background` value (e.g. a gradient + noise) to enable. */
to a `background` value (e.g. a gradient + noise) to enable.
z-index:-1 keeps it below all in-flow content WITHOUT having to
promote children to a stacking context (which would clobber the
Settings overlay's position: absolute). */
#app::before {
content: "";
position: absolute;
@ -50,9 +53,8 @@ html, body {
background: var(--atmosphere, none);
opacity: var(--atmosphere-opacity, 0);
mix-blend-mode: var(--atmosphere-blend, normal);
z-index: 0;
z-index: -1;
}
#app > * { position: relative; z-index: 1; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }