bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac: styling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-11-30 03:56:12 -05:00
parent 69b82edd63
commit 3ebb3e2143
69 changed files with 126 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/ChatControls.svelte
+1 -1
View File
@@ -215,7 +215,7 @@
{#if $showControls}
<PaneResizer
class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20"
id="controls-resizer"
>
<div
src/lib/components/chat/Controls/Valves.svelte
+1 -1
View File
@@ -190,7 +190,7 @@
</div>
{#if selectedId}
<hr class="border-gray-50 dark:border-gray-800 my-1 w-full" />
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1 w-full" />
<div class="my-2 text-xs">
{#if !loading}
src/lib/components/chat/MessageInput.svelte
+1 -1
View File
@@ -1061,7 +1061,7 @@
id="message-input-container"
class="flex-1 flex flex-col relative w-full shadow-lg rounded-3xl border {$temporaryChatEnabled
? 'border-dashed border-gray-100 dark:border-gray-800 hover:border-gray-200 focus-within:border-gray-200 hover:dark:border-gray-700 focus-within:dark:border-gray-700'
: ' border-gray-100 dark:border-gray-850 hover:border-gray-200 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800'} transition px-1 bg-white/5 dark:bg-gray-500/5 backdrop-blur-sm dark:text-gray-100"
: ' border-gray-100/30 dark:border-gray-850/30 hover:border-gray-200 focus-within:border-gray-100 hover:dark:border-gray-800 focus-within:dark:border-gray-800'} transition px-1 bg-white/5 dark:bg-gray-500/5 backdrop-blur-sm dark:text-gray-100"
dir={$settings?.chatDirection ?? 'auto'}
>
{#if atSelectedModel !== undefined}
src/lib/components/chat/MessageInput/InputVariablesModal.svelte
+13 -13
View File
@@ -97,7 +97,7 @@
{@const placeholder = variableAttributes?.placeholder ?? ''}
<select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
bind:value={variableValues[variable]}
id="input-variable-{idx}"
>
@@ -165,7 +165,7 @@
{:else if variables[variable]?.type === 'date'}
<input
type="date"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -176,7 +176,7 @@
{:else if variables[variable]?.type === 'datetime-local'}
<input
type="datetime-local"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -187,7 +187,7 @@
{:else if variables[variable]?.type === 'email'}
<input
type="email"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -198,7 +198,7 @@
{:else if variables[variable]?.type === 'month'}
<input
type="month"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -209,7 +209,7 @@
{:else if variables[variable]?.type === 'number'}
<input
type="number"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -223,7 +223,7 @@
<input
type="range"
bind:value={variableValues[variable]}
class="w-full rounded-lg py-1 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-1 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
id="input-variable-{idx}"
{...variableAttributes}
/>
@@ -241,7 +241,7 @@
<!-- <input
type="range"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -251,7 +251,7 @@
{:else if variables[variable]?.type === 'tel'}
<input
type="tel"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -262,7 +262,7 @@
{:else if variables[variable]?.type === 'text'}
<input
type="text"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -273,7 +273,7 @@
{:else if variables[variable]?.type === 'time'}
<input
type="time"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -284,7 +284,7 @@
{:else if variables[variable]?.type === 'url'}
<input
type="url"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
@@ -316,7 +316,7 @@
</div>
{:else}
<textarea
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100/30 dark:border-gray-850/30"
placeholder={variables[variable]?.placeholder ?? ''}
bind:value={variableValues[variable]}
autocomplete="off"
src/lib/components/chat/Messages/Citations.svelte
+1 -1
View File
@@ -141,7 +141,7 @@
{@const urlCitations = citations.filter((c) => c?.source?.name?.startsWith('http'))}
<div class=" py-1 -mx-0.5 w-full flex gap-1 items-center flex-wrap">
<button
class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850"
class="text-xs font-medium text-gray-600 dark:text-gray-300 px-3.5 h-8 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition flex items-center gap-1 border border-gray-50 dark:border-gray-850/30"
on:click={() => {
showCitations = !showCitations;
}}
src/lib/components/chat/Messages/CodeBlock.svelte
+1 -1
View File
@@ -417,7 +417,7 @@
<div>
<div
class="relative {className} flex flex-col rounded-3xl border border-gray-100 dark:border-gray-850 my-0.5"
class="relative {className} flex flex-col rounded-3xl border border-gray-100/30 dark:border-gray-850/30 my-0.5"
dir="ltr"
>
{#if ['mermaid', 'vega', 'vega-lite'].includes(lang)}
src/lib/components/chat/Messages/CodeExecutionModal.svelte
+1 -1
View File
@@ -90,7 +90,7 @@
{/if}
{#if codeExecution?.result?.files && codeExecution?.result?.files.length > 0}
<div class="flex flex-col w-full">
<hr class="border-gray-100 dark:border-gray-850 my-2" />
<hr class="border-gray-100/30 dark:border-gray-850/30 my-2" />
<div class=" text-sm font-medium dark:text-gray-300">
{$i18n.t('Files')}
</div>
src/lib/components/chat/Messages/Markdown/MarkdownTokens.svelte
+1 -1
View File
@@ -89,7 +89,7 @@
<!-- {JSON.stringify(tokens)} -->
{#each tokens as token, tokenIdx (tokenIdx)}
{#if token.type === 'hr'}
<hr class=" border-gray-100 dark:border-gray-850" />
<hr class=" border-gray-100/30 dark:border-gray-850/30" />
{:else if token.type === 'heading'}
<svelte:element this={headerComponent(token.depth)} dir="auto">
<MarkdownInlineTokens
src/lib/components/chat/Messages/MultiResponseMessages.svelte
+1 -1
View File
@@ -336,7 +336,7 @@
? `bg-gray-50 dark:bg-gray-850 border-gray-100 dark:border-gray-800 border-2 ${
$mobile ? 'min-w-full' : 'min-w-80'
}`
: `border-gray-100 dark:border-gray-850 border-dashed ${
: `border-gray-100/30 dark:border-gray-850/30 border-dashed ${
$mobile ? 'min-w-full' : 'min-w-80'
}`} transition-all p-5 rounded-2xl"
on:click={async () => {
src/lib/components/chat/Messages/RateComment.svelte
+3 -3
View File
@@ -111,7 +111,7 @@
{/if}
<div
class=" my-2.5 rounded-xl px-4 py-3 border border-gray-100 dark:border-gray-850"
class=" my-2.5 rounded-xl px-4 py-3 border border-gray-100/30 dark:border-gray-850/30"
id="message-feedback-{message.id}"
>
<div class="flex justify-between items-center">
@@ -134,7 +134,7 @@
<!-- 1-10 scale -->
{#each Array.from({ length: 10 }).map((_, i) => i + 1) as rating}
<button
class="size-7 text-sm border border-gray-100 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
class="size-7 text-sm border border-gray-100/30 dark:border-gray-850/30 hover:bg-gray-50 dark:hover:bg-gray-850 {detailedRating ===
rating
? 'bg-gray-100 dark:bg-gray-800'
: ''} transition rounded-full disabled:cursor-not-allowed disabled:text-gray-500 disabled:bg-white dark:disabled:bg-gray-900"
@@ -167,7 +167,7 @@
<div class="flex flex-wrap gap-1.5 text-sm mt-1.5">
{#each reasons as reason}
<button
class="px-3 py-0.5 border border-gray-100 dark:border-gray-850 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedReason ===
class="px-3 py-0.5 border border-gray-100/30 dark:border-gray-850/30 hover:bg-gray-50 dark:hover:bg-gray-850 {selectedReason ===
reason
? 'bg-gray-100 dark:bg-gray-800'
: ''} transition rounded-xl"
src/lib/components/chat/Messages/ResponseMessage/FollowUps.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
</Tooltip>
{#if idx < followUps.length - 1}
<hr class="border-gray-50 dark:border-gray-850" />
<hr class="border-gray-50 dark:border-gray-850/30" />
{/if}
{/each}
</div>
src/lib/components/chat/Messages/ResponseMessage/RegenerateMenu.svelte
+1 -1
View File
@@ -76,7 +76,7 @@
</button>
</div>
</div>
<hr class="border-gray-50 dark:border-gray-800 my-1 mx-2" />
<hr class="border-gray-50/30 dark:border-gray-800/30 my-1 mx-2" />
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
on:click={() => {
src/lib/components/chat/Messages/ResponseMessage/WebSearchResults.svelte
+1 -1
View File
@@ -19,7 +19,7 @@
</div>
<div
class="text-sm border border-gray-50 dark:border-gray-850 rounded-xl my-1.5 p-2 w-full"
class="text-sm border border-gray-50 dark:border-gray-850/30 rounded-xl my-1.5 p-2 w-full"
slot="content"
>
{#if status?.query}
src/lib/components/chat/Settings/About.svelte
+2 -2
View File
@@ -98,7 +98,7 @@
</div>
{#if ollamaVersion}
<hr class=" border-gray-100 dark:border-gray-850" />
<hr class=" border-gray-100/30 dark:border-gray-850/30" />
<div>
<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Ollama Version')}</div>
@@ -110,7 +110,7 @@
</div>
{/if}
<hr class=" border-gray-100 dark:border-gray-850" />
<hr class=" border-gray-100/30 dark:border-gray-850/30" />
{#if $config?.license_metadata}
<div class="mb-2 text-xs">
src/lib/components/chat/Settings/Account.svelte
+1 -1
View File
@@ -234,7 +234,7 @@
</div>
{/if}
<hr class="border-gray-50 dark:border-gray-850 my-4" />
<hr class="border-gray-50 dark:border-gray-850/30 my-4" />
{#if $config?.features.enable_login_form}
<div class="mt-2">
src/lib/components/chat/Settings/Audio.svelte
+1 -1
View File
@@ -306,7 +306,7 @@
</div>
</div>
<hr class=" border-gray-100 dark:border-gray-850" />
<hr class=" border-gray-100/30 dark:border-gray-850/30" />
{#if TTSEngine === 'browser-kokoro'}
{#if TTSModel}
src/lib/components/chat/Settings/DataControls.svelte
+1 -1
View File
@@ -196,7 +196,7 @@
{/if}
</div>
<hr class=" border-gray-100 dark:border-gray-850" />
<hr class=" border-gray-100/30 dark:border-gray-850/30" />
<div class="flex flex-col">
<button
src/lib/components/chat/Settings/General.svelte
+1 -1
View File
@@ -277,7 +277,7 @@
</div>
{#if $user?.role === 'admin' || (($user?.permissions.chat?.controls ?? true) && ($user?.permissions.chat?.system_prompt ?? true))}
<hr class="border-gray-100/50 dark:border-gray-850 my-3" />
<hr class="border-gray-100/30 dark:border-gray-850/30 my-3" />
<div>
<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
src/lib/components/chat/Settings/Interface/ManageFloatingActionButtonsModal.svelte
+1 -1
View File
@@ -160,7 +160,7 @@
</button>
</div>
<hr class="border-gray-50 dark:border-gray-850 my-2" />
<hr class="border-gray-50 dark:border-gray-850/30 my-2" />
{/each}
{/if}
</div>
src/lib/components/chat/Settings/Personalization/ManageModal.svelte
+2 -2
View File
@@ -82,7 +82,7 @@
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-600 dark:text-gray-400 table-auto">
<thead
class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 border-gray-50 dark:border-gray-850"
class="text-xs text-gray-700 uppercase bg-transparent dark:text-gray-200 border-b-2 border-gray-50 dark:border-gray-850/30"
>
<tr>
<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
@@ -94,7 +94,7 @@
</thead>
<tbody>
{#each memories as memory}
<tr class="border-b border-gray-50 dark:border-gray-850 items-center">
<tr class="border-b border-gray-50 dark:border-gray-850/30 items-center">
<td class="px-3 py-1">
<div class="line-clamp-1">
{memory.content}