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

Chat theme: pure-CSS dots layer (no JS injection point needed); serve as coop.css with @import watchdog

Browse Source
This commit is contained in:
Inferencebot committed 2026-10-01 15:14:34 -06:00
1 parent 0570c1d0ae
commit b104d9fab8
2 files changed
+100 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

chat-theme/openwebui-custom.css
+50 -8
View File
@@ -133,11 +133,53 @@ html.dark ::selection { background: #3e5a3d; }
html:not(.dark) a { color: #3f6e3e; }
html.dark a { color: #8fc98f; }
/* ---------- Background dots (homepage motif echo) ---------- */
/* Fixed layer of light green + bronze dots, varied sizes, gentle parallax on
scroll. Rendered behind all app content (z-index 0). */
#coop-dots-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#coop-dots-layer circle { opacity: 0.28; }
#coop-dots-layer circle.big { opacity: 0.22; }
html.dark #coop-dots-layer circle { opacity: 0.16; }
html.dark #coop-dots-layer circle.big { opacity: 0.13; }
/* ---------- Background dots (homepage motif echo, pure CSS) ---------- */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
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%),
radial-gradient(circle 24px at 55% 30%, #bfdccd 0 100%, transparent 100%),
radial-gradient(circle 18px at 68% 42%, #b7d8c2 0 100%, transparent 100%),
radial-gradient(circle 22px at 86% 38%, #b7d8c2 0 100%, transparent 100%),
radial-gradient(circle 17px at 81% 72%, #bfdccd 0 100%, transparent 100%),
radial-gradient(circle 16px at 9% 88%, #b7d8c2 0 100%, transparent 100%),
radial-gradient(circle 18px at 70% 80%, #bfdccd 0 100%, transparent 100%),
radial-gradient(circle 18px at 66% 30%, #d9c3a8 0 100%, transparent 100%),
radial-gradient(circle 5px at 4% 12%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 4px at 12% 34%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 5px at 16% 78%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 9px at 24% 6%, #b7d8c2 0 100%, transparent 100%),
radial-gradient(circle 4px at 31% 22%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 5px at 38% 70%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 6px at 47% 10%, #b7d8c2 0 100%, transparent 100%),
radial-gradient(circle 4px at 52% 55%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 5px at 63% 14%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 6px at 61% 66%, #bfdccd 0 100%, transparent 100%),
radial-gradient(circle 4px at 72% 58%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 8px at 78% 8%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 4px at 83% 26%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 6px at 76% 48%, #bfdccd 0 100%, transparent 100%),
radial-gradient(circle 5px at 93% 16%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 4px at 90% 60%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 4px at 95% 46%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 5px at 89% 86%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 4px at 40% 88%, #b5d4c0 0 100%, transparent 100%),
radial-gradient(circle 5px at 57% 84%, #a8cdb4 0 100%, transparent 100%),
radial-gradient(circle 5px at 20% 44%, #d9c3a8 0 100%, transparent 100%),
radial-gradient(circle 4px at 44% 38%, #e0cbb2 0 100%, transparent 100%),
radial-gradient(circle 5px at 87% 70%, #e0cbb2 0 100%, transparent 100%),
radial-gradient(circle 4px at 33% 76%, #d9c3a8 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 4px at 3% 72%, #e0cbb2 0 100%, transparent 100%);
opacity: 0.5;
z-index: 0;
}
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; }