fix: expose aurora theme in chat workspace

This commit is contained in:
Mikei386 committed 2026-08-22 21:46:28 +02:00
1 parent ec84d0d2e8
commit b338c91878
2 files changed
+45 -2

No files matched your search

+44 -1
View File
@@ -42,6 +42,25 @@ body {
isolation: isolate; isolation: isolate;
} }
/* Keep the aurora inside the application stacking context as well. The login
* page already exposes the body background, whereas the authenticated app
* creates its own full-screen stacking context. */
#app::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(circle at 12% 18%, var(--mike-ai-blue) 0, transparent 32%),
radial-gradient(circle at 88% 12%, var(--mike-ai-violet) 0, transparent 30%),
radial-gradient(circle at 68% 88%, var(--mike-ai-teal) 0, transparent 34%),
linear-gradient(145deg, #070a12 0%, #0b1020 52%, #080b14 100%);
background-position: 0% 30%, 100% 0%, 60% 100%, center;
background-size: 150% 150%, 145% 145%, 155% 155%, cover;
animation: mike-ai-aurora 30s ease-in-out infinite alternate;
}
/* Open WebUI's full-screen wrappers use Tailwind variant class names such as /* 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:bg-gray-900". They must be transparent or they hide the body theme. */
.dark #app .app > [class~='dark:bg-gray-900'], .dark #app .app > [class~='dark:bg-gray-900'],
@@ -49,6 +68,19 @@ body {
background-color: transparent !important; background-color: transparent !important;
} }
/* Open WebUI 0.9.x authenticated/chat layout. These are structural,
* full-screen layers, not message cards, menus or dialogs. */
.dark #app > div,
.dark #app .app,
.dark #app .app > div,
.dark #chat-container,
.dark #chat-container > div,
.dark #chat-container > div > div {
background-color: transparent !important;
background-image: none !important;
backdrop-filter: none !important;
}
/* The remaining large application surfaces are slightly translucent so the /* The remaining large application surfaces are slightly translucent so the
* aurora is visible, while content, dialogs and editors stay readable. */ * aurora is visible, while content, dialogs and editors stay readable. */
.dark #app [class~='dark:bg-gray-950'], .dark #app [class~='dark:bg-gray-950'],
@@ -65,6 +97,16 @@ body {
backdrop-filter: none; backdrop-filter: none;
} }
/* Retain glassy controls inside the chat without turning the entire canvas
* back into a flat dark rectangle. This intentionally follows the general
* panel rule so the chat-specific opacity wins the cascade. */
.dark #chat-container [class~='dark:bg-gray-950'],
.dark #chat-container [class~='dark:bg-gray-900'],
.dark #chat-container [class~='dark:bg-gray-850'] {
background-color: rgba(15, 20, 32, 0.70) !important;
backdrop-filter: blur(16px) saturate(115%);
}
.dark [role='dialog'], .dark [role='dialog'],
.dark dialog, .dark dialog,
.dark pre, .dark pre,
@@ -100,7 +142,8 @@ body {
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
body { body,
#app::before {
animation: none !important; animation: none !important;
} }
} }
+1 -1
View File
@@ -7,7 +7,7 @@
if (themeStylesheet) { if (themeStylesheet) {
themeStylesheet.setAttribute( themeStylesheet.setAttribute(
'href', 'href',
'/static/custom.css?theme=midnight-aurora-v2' '/static/custom.css?theme=midnight-aurora-v3'
); );
} }