Add native chat background and guarded HA YAML access
This commit is contained in:
Mikei386
@@ -1,20 +1,16 @@
|
||||
/*
|
||||
* Mike AI "Midnight Aurora" theme for Open WebUI.
|
||||
* Mike AI Open WebUI refinements.
|
||||
*
|
||||
* 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.
|
||||
* The chat background itself is configured through Open WebUI's native
|
||||
* per-user `backgroundImageUrl` setting. Do not make the structural chat
|
||||
* layers transparent here: that would also hide Open WebUI's own image layer.
|
||||
*/
|
||||
|
||||
: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,
|
||||
@@ -22,91 +18,6 @@ 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,
|
||||
@@ -123,35 +34,7 @@ body {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
if (themeStylesheet) {
|
||||
themeStylesheet.setAttribute(
|
||||
'href',
|
||||
'/static/custom.css?theme=midnight-aurora-v3'
|
||||
'/static/custom.css?theme=native-background-v4'
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="2560" height="1440" viewBox="0 0 2560 1440">
|
||||
<defs>
|
||||
<linearGradient id="base" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#050811"/>
|
||||
<stop offset="0.52" stop-color="#0a1020"/>
|
||||
<stop offset="1" stop-color="#070a12"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="blue" cx="0.14" cy="0.18" r="0.58">
|
||||
<stop offset="0" stop-color="#2563eb" stop-opacity="0.62"/>
|
||||
<stop offset="0.42" stop-color="#2563eb" stop-opacity="0.17"/>
|
||||
<stop offset="1" stop-color="#2563eb" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="violet" cx="0.86" cy="0.12" r="0.52">
|
||||
<stop offset="0" stop-color="#7c3aed" stop-opacity="0.58"/>
|
||||
<stop offset="0.44" stop-color="#7c3aed" stop-opacity="0.16"/>
|
||||
<stop offset="1" stop-color="#7c3aed" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="teal" cx="0.68" cy="0.94" r="0.55">
|
||||
<stop offset="0" stop-color="#0f766e" stop-opacity="0.48"/>
|
||||
<stop offset="0.46" stop-color="#0f766e" stop-opacity="0.13"/>
|
||||
<stop offset="1" stop-color="#0f766e" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
<filter id="soft"><feGaussianBlur stdDeviation="54"/></filter>
|
||||
</defs>
|
||||
<rect width="2560" height="1440" fill="url(#base)"/>
|
||||
<rect width="2560" height="1440" fill="url(#blue)"/>
|
||||
<rect width="2560" height="1440" fill="url(#violet)"/>
|
||||
<rect width="2560" height="1440" fill="url(#teal)"/>
|
||||
<g fill="none" filter="url(#soft)" opacity="0.20">
|
||||
<path d="M-180 1040 C420 650 760 1250 1420 820 S2250 540 2750 920" stroke="#38bdf8" stroke-width="70"/>
|
||||
<path d="M-120 260 C520 580 840 110 1470 430 S2250 710 2740 260" stroke="#a78bfa" stroke-width="58"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Reference in New Issue
Block a user