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

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-08-12 00:51:12 -06:00
parent ab41dcc487
commit c086b80313
9 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+1 -2
View File
@@ -409,8 +409,7 @@ input[type='number'] {
outline: none;
}
/* unlayered, so it beats outline-none utilities without ringing rich text editors */
:focus-visible:not(.ProseMirror):not([contenteditable='true']) {
html.high-contrast .focus-ring:focus-visible {
outline: 2px solid theme(--color-blue-500);
outline-offset: 2px;
}
src/lib/components/chat/ModelSelector/ModelItem.svelte
+5 -4
View File
@@ -52,7 +52,7 @@
role="option"
aria-selected={isSelected}
aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}
class="group/item flex h-8 w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 {index ===
class="focus-ring group/item flex h-8 w-full cursor-pointer select-none items-center rounded-xl px-2 text-left text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40 {index ===
selectedModelIdx && !compareEnabled
? 'bg-gray-50/70 dark:bg-gray-800/60'
: ''} {isSelected ? 'bg-gray-50/70 dark:bg-gray-800/60' : ''}"
@@ -121,7 +121,8 @@
}`}
className="self-end"
>
<span class="line-clamp-1 text-[0.6875rem] font-normal text-gray-500 dark:text-gray-400"
<span
class="line-clamp-1 text-[0.6875rem] font-normal text-gray-500 dark:text-gray-400"
>{item.model.ollama?.details?.parameter_size ?? ''}</span
>
</Tooltip>
@@ -250,7 +251,7 @@
className="flex-shrink-0 group-hover/item:opacity-100 opacity-0 "
>
<button
class="flex"
class="focus-ring flex"
aria-label={$i18n.t('Eject model')}
on:click={(e) => {
e.preventDefault();
@@ -275,7 +276,7 @@
>
<button
aria-label={`${$i18n.t('More Options')}`}
class="flex"
class="focus-ring flex"
on:click={(e) => {
e.preventDefault();
e.stopPropagation();
src/lib/components/chat/ModelSelector/Selector.svelte
+7 -7
View File
@@ -746,7 +746,7 @@
<div class="relative w-full">
<button
bind:this={triggerElement}
class="relative w-full {($settings?.highContrastMode ?? false)
class="focus-ring relative w-full {($settings?.highContrastMode ?? false)
? ''
: 'outline-hidden focus:outline-hidden'}"
aria-label={selectedModel
@@ -833,7 +833,7 @@
<Tooltip content={$i18n.t('Compare')}>
<button
type="button"
class="flex size-[1.375rem] shrink-0 items-center justify-center rounded-lg transition-colors duration-100 {compareEnabled
class="focus-ring flex size-[1.375rem] shrink-0 items-center justify-center rounded-lg transition-colors duration-100 {compareEnabled
? 'bg-gray-50 text-gray-700 hover:bg-gray-50 dark:bg-gray-800/60 dark:text-gray-200 dark:hover:bg-gray-800/60'
: 'text-gray-500 hover:bg-gray-50/40 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800/40 dark:hover:text-gray-200'}"
aria-label={$i18n.t('Compare')}
@@ -880,7 +880,7 @@
</div>
<button
type="button"
class="mt-3 rounded-lg px-0 py-1 text-[0.6875rem] font-normal leading-none text-gray-600 underline-offset-2 transition-colors duration-100 hover:text-gray-800 hover:underline focus:outline-hidden focus:underline dark:text-gray-300 dark:hover:text-gray-100"
class="focus-ring mt-3 rounded-lg px-0 py-1 text-[0.6875rem] font-normal leading-none text-gray-600 underline-offset-2 transition-colors duration-100 hover:text-gray-800 hover:underline focus:outline-hidden focus:underline dark:text-gray-300 dark:hover:text-gray-100"
on:click={() => {
show = false;
showSettings.set('admin:connections');
@@ -900,7 +900,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="min-h-0 flex-1 overflow-y-auto"
style="max-height: 18rem;"
style="max-height: 18rem;"
role="listbox"
aria-label={$i18n.t('Available models')}
bind:this={listContainer}
@@ -940,7 +940,7 @@
placement="top-start"
>
<button
class="flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40"
class="focus-ring flex h-[1.6875rem] w-full cursor-pointer select-none items-center rounded-xl px-2 text-[0.8125rem] font-normal text-gray-700 outline-hidden transition-colors duration-75 hover:bg-gray-50/40 dark:text-gray-100 dark:hover:bg-gray-800/40"
on:click={() => {
pullModelHandler();
}}
@@ -987,7 +987,7 @@
<div class="mr-2 ml-1 translate-y-0.5">
<Tooltip content={$i18n.t('Cancel')}>
<button
class="text-gray-800 dark:text-gray-100"
class="focus-ring text-gray-800 dark:text-gray-100"
aria-label={$i18n.t('Cancel download of {{model}}', { model: model })}
on:click={() => {
cancelModelPullHandler(model);
@@ -1021,7 +1021,7 @@
<div class="flex shrink-0 items-center justify-end px-2 py-1 leading-none">
<button
type="button"
class="text-[0.65rem] font-normal leading-none text-gray-500 underline-offset-2 transition-colors duration-100 hover:text-gray-700 hover:underline dark:text-gray-500 dark:hover:text-gray-300"
class="focus-ring text-[0.65rem] font-normal leading-none text-gray-500 underline-offset-2 transition-colors duration-100 hover:text-gray-700 hover:underline dark:text-gray-500 dark:hover:text-gray-300"
on:click|stopPropagation={setDefaultHandler}
>
{$i18n.t('Set as default')}
src/lib/components/common/AccessButton.svelte
+1 -1
View File
@@ -13,7 +13,7 @@
<button
type="button"
class="flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
class="focus-ring flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
{disabled}
on:click
>
src/lib/components/common/Checkbox.svelte
+1 -1
View File
@@ -15,7 +15,7 @@
</script>
<button
class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
class="focus-ring outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !==
'unchecked'
? 'bg-black outline-black '
: 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded-sm inline-block w-3.5 h-3.5 relative {disabled
src/lib/components/common/MultiSelect.svelte
+2 -2
View File
@@ -88,7 +88,7 @@
<button
bind:this={triggerEl}
class={className}
class="focus-ring {className}"
aria-label={placeholder}
type="button"
on:click={toggleOpen}
@@ -109,7 +109,7 @@
>
{#each items as item}
<button
class="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
class="focus-ring flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
type="button"
on:click={() => toggleItem(item.value)}
>
src/lib/components/common/Select.svelte
+2 -2
View File
@@ -122,7 +122,7 @@
<button
bind:this={triggerEl}
class={triggerClass}
class="focus-ring {triggerClass}"
type="button"
aria-expanded={open}
on:click={toggleOpen}
@@ -139,7 +139,7 @@
<DropdownMenu className={contentClass} style={`max-height: ${maxHeight}; overflow-y: auto;`}>
<slot {open} {selectItem}>
{#each items as item}
<button class={itemClass} type="button" on:click={() => selectItem(item)}>
<button class="focus-ring {itemClass}" type="button" on:click={() => selectItem(item)}>
<slot name="item" {item} selected={value === item.value}>
{item.label}
</slot>
src/lib/components/common/SplitCreateButton.svelte
+3 -3
View File
@@ -50,7 +50,7 @@
{#if visibleActions.length === 1}
<button
class="ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
class="focus-ring ml-1 rounded-lg bg-gray-50 px-2.5 py-1 text-xs text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800"
type="button"
on:click={() => {
runAction(primaryAction);
@@ -63,7 +63,7 @@
class="ml-1 flex overflow-hidden rounded-lg bg-gray-50 text-xs text-gray-900 transition ring-1 ring-gray-200 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800"
>
<button
class="px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
class="focus-ring px-2.5 py-1 transition hover:bg-gray-100 dark:hover:bg-gray-800"
on:click={() => {
runAction(primaryAction);
}}
@@ -73,7 +73,7 @@
<Dropdown bind:show={showMenu} align="end" sideOffset={6}>
<button
class="flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
class="focus-ring flex items-center border-l border-gray-200 px-1.5 py-1 transition hover:bg-gray-100 dark:border-gray-800 dark:hover:bg-gray-800"
aria-label={$i18n.t('Open create menu')}
>
<ChevronDown className="size-2.5" strokeWidth="2.5" />
src/lib/components/common/Switch.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
{id}
aria-labelledby={ariaLabelledbyId || undefined}
aria-label={ariaLabel || undefined}
class="relative h-4 min-h-4 w-7 shrink-0 cursor-pointer rounded-full mx-[0.0625rem] transition-colors duration-150 disabled:cursor-not-allowed {($settings?.highContrastMode ??
class="focus-ring relative h-4 min-h-4 w-7 shrink-0 cursor-pointer rounded-full mx-[0.0625rem] transition-colors duration-150 disabled:cursor-not-allowed {($settings?.highContrastMode ??
false)
? 'focus:outline focus:outline-2 focus:outline-gray-800! focus:dark:outline-gray-200!'
: ''} {state ? 'bg-gray-900 dark:bg-white' : 'bg-gray-300 dark:bg-gray-700'}"