ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-13 12:55:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refac: background image styling behaviour

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-11-13 20:54:23 -05:00
parent 4d41013804
commit bc2192e8bf
3 changed files with 13 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/chat/Chat.svelte
View file

@ -2395,9 +2395,7 @@
<div in:fade={{ duration: 50 }} class="w-full h-full flex flex-col"> <div in:fade={{ duration: 50 }} class="w-full h-full flex flex-col">
{#if $selectedFolder && $selectedFolder?.meta?.background_image_url} {#if $selectedFolder && $selectedFolder?.meta?.background_image_url}
<div <div
class="absolute {$showSidebar class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
? 'md:max-w-[calc(100%-260px)] md:translate-x-[260px]'
: ''} top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
style="background-image: url({$selectedFolder?.meta?.background_image_url}) " style="background-image: url({$selectedFolder?.meta?.background_image_url}) "
/> />
@ -2406,9 +2404,7 @@
/> />
{:else if $settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null} {:else if $settings?.backgroundImageUrl ?? $config?.license_metadata?.background_image_url ?? null}
<div <div
class="absolute {$showSidebar class="absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
? 'md:max-w-[calc(100%-260px)] md:translate-x-[260px]'
: ''} top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
style="background-image: url({$settings?.backgroundImageUrl ?? style="background-image: url({$settings?.backgroundImageUrl ??
$config?.license_metadata?.background_image_url}) " $config?.license_metadata?.background_image_url}) "
/> />

11
src/lib/components/chat/Navbar.svelte
View file

@ -43,6 +43,7 @@
export let initNewChat: Function; export let initNewChat: Function;
export let shareEnabled: boolean = false; export let shareEnabled: boolean = false;
export let scrollTop = 0;
export let chat; export let chat;
export let history; export let history;
@ -70,11 +71,17 @@
aria-label="New Chat" aria-label="New Chat"
/> />
<nav class="sticky top-0 z-30 w-full py-1 -mb-8 flex flex-col items-center drag-region"> <nav
class="sticky top-0 z-30 w-full {chat?.id
? 'pt-0.5 pb-1'
: 'pt-1 pb-1'} -mb-12 flex flex-col items-center drag-region"
>
<div class="flex items-center w-full pl-1.5 pr-1"> <div class="flex items-center w-full pl-1.5 pr-1">
<div <div
id="navbar-bg-gradient-to-b" id="navbar-bg-gradient-to-b"
class=" bg-linear-to-b via-40% to-97% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1]" class="{chat?.id
? 'visible'
: 'invisible'} bg-linear-to-b via-40% to-97% from-white/90 via-white/50 to-transparent dark:from-gray-900/90 dark:via-gray-900/50 dark:to-transparent pointer-events-none absolute inset-0 -bottom-10 z-[-1]"
></div> ></div>
<div class=" flex max-w-full w-full mx-auto px-1.5 md:px-2 pt-0.5 bg-transparent"> <div class=" flex max-w-full w-full mx-auto px-1.5 md:px-2 pt-0.5 bg-transparent">

4
src/lib/components/layout/Sidebar.svelte
View file

@ -540,7 +540,7 @@
{#if !$mobile && !$showSidebar} {#if !$mobile && !$showSidebar}
<div <div
class=" py-2 px-1.5 flex flex-col justify-between text-black dark:text-white hover:bg-gray-50/50 dark:hover:bg-gray-950/50 h-full border-e border-gray-50 dark:border-gray-850 z-10 transition-all" class=" py-2 px-1.5 flex flex-col justify-between text-black dark:text-white hover:bg-gray-50/30 dark:hover:bg-gray-950/30 h-full z-10 transition-all border-e-[0.5px] border-gray-50 dark:border-gray-850"
id="sidebar" id="sidebar"
> >
<button <button
@ -717,7 +717,7 @@
bind:this={navElement} bind:this={navElement}
id="sidebar" id="sidebar"
class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar class="h-screen max-h-[100dvh] min-h-screen select-none {$showSidebar
? 'bg-gray-50 dark:bg-gray-950 z-50' ? 'bg-gray-50/50 dark:bg-gray-950/50 z-50'
: ' bg-transparent z-0 '} {$isApp : ' bg-transparent z-0 '} {$isApp
? `ml-[4.5rem] md:ml-0 ` ? `ml-[4.5rem] md:ml-0 `
: ' transition-all duration-300 '} shrink-0 text-gray-900 dark:text-gray-200 text-sm fixed top-0 left-0 overflow-x-hidden : ' transition-all duration-300 '} shrink-0 text-gray-900 dark:text-gray-200 text-sm fixed top-0 left-0 overflow-x-hidden