fix: expose aurora theme in chat workspace
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user