diff --git a/openwebui/custom.css b/openwebui/custom.css index 818b7f1..6c6aad1 100644 --- a/openwebui/custom.css +++ b/openwebui/custom.css @@ -43,24 +43,41 @@ body, .app, main, #app { color: var(--reltio-text) !important; } -/* Wave background via pseudo-element for blur control */ +/* Wave background — matches Reltio Wave_root positioning */ body::before { + content: ''; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('/static/darkWave2.svg'); + background-size: cover; + background-repeat: no-repeat; + background-position: 100% 100%; + z-index: -1; + pointer-events: none; + opacity: 1; + transition: opacity var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1), + filter var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Wave overlay for dimming (like data-wave-overlay) */ +body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; - background-image: url('/static/darkWave2.svg'); - background-repeat: no-repeat; - background-position: center bottom; - background-size: cover; + background-color: rgba(14, 14, 37, 0.9); z-index: -1; - opacity: 1; - transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out; + pointer-events: none; + opacity: 0; + transition: opacity var(--transition-duration-m, 225ms) cubic-bezier(0.4, 0, 0.2, 1); } -/* Blur wave when conversation is active */ +/* Blur wave when conversation is active (matches .layout_root:has([data-conversation=true])) */ body:has(.messages-container)::before, body:has([data-message-role])::before, body:has(.chat-messages)::before {