…your rail and your main column, as normal in-flow children…
You do NOT need a wrapper around your content and you do NOT need to give
it a z-index. [data-frame] isolates, [data-bg] sits at z-index:-1 inside
that isolation, and normal in-flow content paints over it untouched. The
blobs are still part of the backdrop, so backdrop-filter on .gl-* panels
samples them — that is the whole effect.
[data-frame] full-bleed. The production default: the admin fills
the window and a rounded corner there just clips
content against the browser chrome.
[data-frame="inset"] the reference presentation — 18px of breathing room,
a 22px radius and a hairline border, the way
admin-reference.html shows it.
------------------------------------------------------------- SAFETY
Every rule below is nested under [data-skin='glass'] with ONE exception:
[data-bg] is display:none unconditionally. That is deliberate. It means a
page can add the background markup permanently — no build flag, no
conditional rendering — and a classic render is completely unaffected,
because the whole stack is display:none until the skin turns on. Adding
markup to a shared file is a one-way door; making it inert by default is
what lets four people do it in parallel.
------------------------------------------------------------- MOTION
Two 74px-blurred layers under a backdrop-filter is continuous GPU work in
an app that sits open all day. It stops in three cases:
prefers-reduced-motion: reduce — the accessibility contract.
— set by skin/theme.js on
visibilitychange. Attribute, not an
inline style, so CSS keeps owning
what "paused" means.
≤720px — blob B is dropped entirely and A
drops to blur(50px). Not worth the
battery on a phone.
============================================================= */
/* ------------------------------------------------------------------ keyframes
Copied VERBATIM from the