101 lines
2.7 KiB
CSS
101 lines
2.7 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.20);
|
|
--mike-ai-violet: rgba(139, 92, 246, 0.17);
|
|
--mike-ai-teal: rgba(20, 184, 166, 0.12);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
/* 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 {
|
|
background-color: var(--mike-ai-panel) !important;
|
|
backdrop-filter: blur(18px) 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 .border-gray-800,
|
|
.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 {
|
|
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;
|
|
}
|
|
}
|