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

fix: expose aurora theme in chat workspace

Browse Source
This commit is contained in:
Mikei386
2026-08-22 21:46:28 +02:00
parent ec84d0d2e8
commit b338c91878
2 changed files with 45 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/openwebui/theme/custom.css
+44 -1
View File
@@ -42,6 +42,25 @@ body {
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
* "dark:bg-gray-900". They must be transparent or they hide the body theme. */
.dark #app .app > [class~='dark:bg-gray-900'],
@@ -49,6 +68,19 @@ body {
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
* aurora is visible, while content, dialogs and editors stay readable. */
.dark #app [class~='dark:bg-gray-950'],
@@ -65,6 +97,16 @@ body {
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 dialog,
.dark pre,
@@ -100,7 +142,8 @@ body {
}
@media (prefers-reduced-motion: reduce) {
body {
body,
#app::before {
animation: none !important;
}
}