From e58694f8e12326e5a6aa6c43b28b13d85714702e Mon Sep 17 00:00:00 2001 From: Inferencebot Date: Thu, 1 Oct 2026 15:18:24 -0600 Subject: [PATCH] Dots: fixed overlay above opaque app shell (flash-then-vanish was body::before hidden by app root bg); pointer-events none, z-2 --- chat-theme/openwebui-custom.css | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/chat-theme/openwebui-custom.css b/chat-theme/openwebui-custom.css index ec620d2..a77eac0 100644 --- a/chat-theme/openwebui-custom.css +++ b/chat-theme/openwebui-custom.css @@ -133,13 +133,17 @@ html.dark ::selection { background: #3e5a3d; } html:not(.dark) a { color: #3f6e3e; } html.dark a { color: #8fc98f; } -/* ---------- Background dots (homepage motif echo, pure CSS) ---------- */ +/* ---------- Background dots (homepage motif echo) ---------- + Open WebUI's app root is an OPAQUE full-viewport wrapper (bg-white/dark:bg-gray-900), + so a background layer (body::before, z-index 0) only shows pre-hydration — the + "flash then disappear" effect. Instead: a fixed overlay of pale dots sits ON TOP of + everything (pointer-events: none) at very low opacity, below modals/menus (z-40+). */ body::before { content: ""; position: fixed; inset: 0; - z-index: 0; - pointer-events: none; + z-index: 2; /* above app shell bg & content surfaces, below z-40 overlays */ + pointer-events: none; /* never intercept clicks/hover */ background-image: radial-gradient(circle 16px at 7% 58%, #b7d8c2 0 100%, transparent 100%), radial-gradient(circle 20px at 28% 52%, #bfdccd 0 100%, transparent 100%), @@ -177,9 +181,8 @@ body::before { radial-gradient(circle 5px at 58% 72%, #e0cbb2 0 100%, transparent 100%), radial-gradient(circle 6px at 97% 78%, #d9c3a8 0 100%, transparent 100%), radial-gradient(circle 4px at 3% 72%, #e0cbb2 0 100%, transparent 100%); - opacity: 0.5; - z-index: 0; + opacity: 0.35; } -html.dark body::before { opacity: 0.25; } -/* Keep app content above the dots layer */ -#app, .app, main, .sidebar, nav, [class*="content"] { position: relative; z-index: 1; } +html.dark body::before { opacity: 0.18; } +/* Keep code blocks readable above the dots */ +pre, code, .codeblock { position: relative; z-index: 3; background-color: inherit; }