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 { .overlay {
position: absolute; position: absolute;
inset: 0; inset: 0;
background: rgba(0, 0, 0, 0.55); background: var(--bg);
backdrop-filter: blur(6px);
display: flex; display: flex;
align-items: stretch; align-items: stretch;
z-index: 10; z-index: 10;

8
src/styles.css
View file

@ -41,7 +41,10 @@ html, body {
} }
/* Optional decorative atmosphere layer per theme — set --atmosphere /* 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 { #app::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -50,9 +53,8 @@ html, body {
background: var(--atmosphere, none); background: var(--atmosphere, none);
opacity: var(--atmosphere-opacity, 0); opacity: var(--atmosphere-opacity, 0);
mix-blend-mode: var(--atmosphere-blend, normal); 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 { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }