michael/AI-Profile-Router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reveal animated Open WebUI background

Browse Source
This commit is contained in:
Mikei386
2026-08-21 16:38:34 +02:00
parent c0cbeb0f15
commit 53dfffc289
2 changed files with 34 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/openwebui/theme/custom.css
+24 -10
View File
@@ -12,9 +12,9 @@
--mike-ai-panel: rgba(15, 20, 32, 0.86);
--mike-ai-panel-strong: rgba(12, 16, 27, 0.96);
--mike-ai-border: rgba(148, 163, 184, 0.13);
--mike-ai-blue: rgba(59, 130, 246, 0.20);
--mike-ai-violet: rgba(139, 92, 246, 0.17);
--mike-ai-teal: rgba(20, 184, 166, 0.12);
--mike-ai-blue: rgba(59, 130, 246, 0.30);
--mike-ai-violet: rgba(139, 92, 246, 0.25);
--mike-ai-teal: rgba(20, 184, 166, 0.18);
}
html,
@@ -42,15 +42,29 @@ body {
isolation: isolate;
}
/* The large application surfaces are slightly translucent so the aurora is
* visible, while content, dialogs and editors retain solid readable panels. */
.dark #app .bg-gray-950,
.dark #app .bg-gray-900,
.dark #app .bg-gray-850 {
/* Open WebUI's full-screen wrappers use Tailwind variant class names such as
* "dark:bg-gray-900". They must be transparent or they hide the body theme. */
.dark #app .app > [class~='dark:bg-gray-900'],
.dark #auth-page > [class~='dark:bg-black'] {
background-color: transparent !important;
}
/* The remaining large application surfaces are slightly translucent so the
* aurora is visible, while content, dialogs and editors stay readable. */
.dark #app [class~='dark:bg-gray-950'],
.dark #app [class~='dark:bg-gray-900'],
.dark #app [class~='dark:bg-gray-850'] {
background-color: var(--mike-ai-panel) !important;
backdrop-filter: blur(18px) saturate(115%);
}
/* The two full-screen wrappers above need to win over the general panel rule. */
.dark #app .app > [class~='dark:bg-gray-900'],
.dark #auth-page > [class~='dark:bg-black'] {
background-color: transparent !important;
backdrop-filter: none;
}
.dark [role='dialog'],
.dark dialog,
.dark pre,
@@ -62,8 +76,8 @@ body {
.dark [role='dialog'],
.dark dialog,
.dark .border-gray-800,
.dark .border-gray-850 {
.dark [class~='dark:border-gray-800'],
.dark [class~='dark:border-gray-850'] {
border-color: var(--mike-ai-border) !important;
}