158 lines
5.0 KiB
CSS
158 lines
5.0 KiB
CSS
/*
|
|
* Mike AI "Midnight Aurora" theme for Open WebUI.
|
|
*
|
|
* Open WebUI deliberately loads /static/custom.css from its base image. The
|
|
* file is mounted read-only by compose.yaml, so the theme survives container
|
|
* recreation and image updates without modifying the upstream image.
|
|
*/
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--mike-ai-bg: #070a12;
|
|
--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.30);
|
|
--mike-ai-violet: rgba(139, 92, 246, 0.25);
|
|
--mike-ai-teal: rgba(20, 184, 166, 0.18);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background-color: var(--mike-ai-bg) !important;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
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%) !important;
|
|
background-attachment: fixed !important;
|
|
background-position: 0% 30%, 100% 0%, 60% 100%, center !important;
|
|
background-size: 150% 150%, 145% 145%, 155% 155%, cover !important;
|
|
animation: mike-ai-aurora 30s ease-in-out infinite alternate;
|
|
}
|
|
|
|
/* Keep the app above the decorative background without intercepting clicks. */
|
|
#app {
|
|
position: relative;
|
|
min-height: 100vh;
|
|
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'],
|
|
.dark #auth-page > [class~='dark:bg-black'] {
|
|
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'],
|
|
.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;
|
|
}
|
|
|
|
/* 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,
|
|
.dark textarea,
|
|
.dark input,
|
|
.dark select {
|
|
background-color: var(--mike-ai-panel-strong);
|
|
}
|
|
|
|
.dark [role='dialog'],
|
|
.dark dialog,
|
|
.dark [class~='dark:border-gray-800'],
|
|
.dark [class~='dark:border-gray-850'] {
|
|
border-color: var(--mike-ai-border) !important;
|
|
}
|
|
|
|
/* A restrained accent for focused controls; no neon-glow or reduced contrast. */
|
|
.dark :is(button, a, input, textarea, select):focus-visible {
|
|
outline-color: rgba(96, 165, 250, 0.78) !important;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@keyframes mike-ai-aurora {
|
|
0% {
|
|
background-position: 0% 20%, 100% 0%, 65% 100%, center;
|
|
}
|
|
50% {
|
|
background-position: 18% 36%, 84% 14%, 48% 82%, center;
|
|
}
|
|
100% {
|
|
background-position: 4% 48%, 96% 28%, 72% 70%, center;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
body,
|
|
#app::before {
|
|
animation: none !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
/* Less compositing work and a calmer background on tablets and phones. */
|
|
background-size: 125% 125%, 125% 125%, 135% 135%, cover !important;
|
|
animation-duration: 40s;
|
|
}
|
|
}
|