co-op/design-assets
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dots: fixed overlay above opaque app shell (flash-then-vanish was body::before hidden by app root bg); pointer-events none, z-2

Browse Source
This commit is contained in:
Inferencebot committed 2026-10-01 15:18:24 -06:00
1 parent b104d9fab8
commit e58694f8e1
1 file changed
+11 -8
Download Patch File Download Diff File Expand all files Collapse all files
chat-theme/openwebui-custom.css
+11 -8
View File
@@ -133,13 +133,17 @@ html.dark ::selection { background: #3e5a3d; }
html:not(.dark) a { color: #3f6e3e; } html:not(.dark) a { color: #3f6e3e; }
html.dark a { color: #8fc98f; } 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 { body::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 0; z-index: 2; /* above app shell bg & content surfaces, below z-40 overlays */
pointer-events: none; pointer-events: none; /* never intercept clicks/hover */
background-image: background-image:
radial-gradient(circle 16px at 7% 58%, #b7d8c2 0 100%, transparent 100%), radial-gradient(circle 16px at 7% 58%, #b7d8c2 0 100%, transparent 100%),
radial-gradient(circle 20px at 28% 52%, #bfdccd 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 5px at 58% 72%, #e0cbb2 0 100%, transparent 100%),
radial-gradient(circle 6px at 97% 78%, #d9c3a8 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%); radial-gradient(circle 4px at 3% 72%, #e0cbb2 0 100%, transparent 100%);
opacity: 0.5; opacity: 0.35;
z-index: 0;
} }
html.dark body::before { opacity: 0.25; } html.dark body::before { opacity: 0.18; }
/* Keep app content above the dots layer */ /* Keep code blocks readable above the dots */
#app, .app, main, .sidebar, nav, [class*="content"] { position: relative; z-index: 1; } pre, code, .codeblock { position: relative; z-index: 3; background-color: inherit; }