scriptoriumadmin/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-11-15 09:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

refac

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2026-11-02 11:48:53 +09:00
parent 789a0f402a
commit 042ac65628
5 changed files with 67 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/app.css
View file

@ -103,8 +103,7 @@ textarea {
color-scheme: dark;
}
textarea::-webkit-resizer,
textarea::-webkit-scrollbar-corner {
textarea::-webkit-resizer {
background: transparent;
}
@ -161,7 +160,11 @@ li p {
display: inline;
}
::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)) textarea::-webkit-scrollbar-corner {
background: transparent;
}
:where(html:not(.native-scrollbars), html:not(.native-scrollbars) *)::-webkit-scrollbar-thumb {
--tw-border-opacity: 1;
background-color: rgba(215, 215, 215, 0.6);
border-color: rgba(255, 255, 255, var(--tw-border-opacity));
@ -170,17 +173,17 @@ li p {
}
/* Dark theme scrollbar styles */
.dark ::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)).dark ::-webkit-scrollbar-thumb {
background-color: rgba(67, 67, 67, 0.6); /* Darker color for dark theme */
border-color: rgba(0, 0, 0, var(--tw-border-opacity));
}
::-webkit-scrollbar {
:where(html:not(.native-scrollbars), html:not(.native-scrollbars) *)::-webkit-scrollbar {
height: 0.45rem;
width: 0.45rem;
}
::-webkit-scrollbar-track {
:where(html:not(.native-scrollbars), html:not(.native-scrollbars) *)::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 9999px;
}
@ -298,16 +301,17 @@ body > iframe[id^='imermaid-'] {
overflow: hidden !important;
}
.scrollbar-hidden:active::-webkit-scrollbar-thumb,
.scrollbar-hidden:focus::-webkit-scrollbar-thumb,
.scrollbar-hidden:hover::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)) .scrollbar-hidden:active::-webkit-scrollbar-thumb,
:where(html:not(.native-scrollbars)) .scrollbar-hidden:focus::-webkit-scrollbar-thumb,
:where(html:not(.native-scrollbars)) .scrollbar-hidden:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
.scrollbar-hidden::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)) .scrollbar-hidden::-webkit-scrollbar-thumb {
visibility: hidden;
}
.scrollbar-hidden::-webkit-scrollbar-corner {
:where(html:not(.native-scrollbars)) .scrollbar-hidden::-webkit-scrollbar-corner {
display: none;
}
@ -339,21 +343,22 @@ input[type='number'] {
@apply overflow-y-hidden overflow-x-auto max-w-full;
}
.katex-display::-webkit-scrollbar {
:where(html:not(.native-scrollbars)) .katex-display::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
}
.katex-display:active::-webkit-scrollbar-thumb,
.katex-display:focus::-webkit-scrollbar-thumb,
.katex-display:hover::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)) .katex-display:active::-webkit-scrollbar-thumb,
:where(html:not(.native-scrollbars)) .katex-display:focus::-webkit-scrollbar-thumb,
:where(html:not(.native-scrollbars)) .katex-display:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
.katex-display::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)) .katex-display::-webkit-scrollbar-thumb {
visibility: hidden;
}
.katex-display::-webkit-scrollbar-corner {
:where(html:not(.native-scrollbars)) .katex-display::-webkit-scrollbar-corner {
display: none;
}
@ -362,17 +367,17 @@ input[type='number'] {
width: 100%;
}
.cm-scroller:active::-webkit-scrollbar-thumb,
.cm-scroller:focus::-webkit-scrollbar-thumb,
.cm-scroller:hover::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)) .cm-scroller:active::-webkit-scrollbar-thumb,
:where(html:not(.native-scrollbars)) .cm-scroller:focus::-webkit-scrollbar-thumb,
:where(html:not(.native-scrollbars)) .cm-scroller:hover::-webkit-scrollbar-thumb {
visibility: visible;
}
.cm-scroller::-webkit-scrollbar-thumb {
:where(html:not(.native-scrollbars)) .cm-scroller::-webkit-scrollbar-thumb {
visibility: hidden;
}
.cm-scroller::-webkit-scrollbar-corner {
:where(html:not(.native-scrollbars)) .cm-scroller::-webkit-scrollbar-corner {
display: none;
}

7
src/app.html
View file

@ -47,6 +47,13 @@
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
(() => {
document.documentElement.classList.toggle(
'native-scrollbars',
/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
// iPadOS can report a desktop Mac user agent.
(/Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints > 1)
);
const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');
const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;

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

@ -5702,7 +5702,7 @@
</div>
<style>
::-webkit-scrollbar {
:global(:where(html:not(.native-scrollbars))) ::-webkit-scrollbar {
height: 0.5rem;
width: 0.5rem;
}

31
src/lib/components/common/PdfPagesPreview.svelte
View file

@ -219,36 +219,37 @@
</div>
<style>
.thumbnail-sidebar {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar {
scrollbar-color: transparent transparent;
}
.thumbnail-sidebar:hover,
.thumbnail-sidebar:focus,
.thumbnail-sidebar:focus-within,
.thumbnail-sidebar:active {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus-within,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active {
scrollbar-color: rgba(215, 215, 215, 0.6) transparent;
}
:global(.dark) .thumbnail-sidebar:hover,
:global(.dark) .thumbnail-sidebar:focus,
:global(.dark) .thumbnail-sidebar:focus-within,
:global(.dark) .thumbnail-sidebar:active {
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:hover,
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus,
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus-within,
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:active {
scrollbar-color: rgba(67, 67, 67, 0.6) transparent;
}
.thumbnail-sidebar::-webkit-scrollbar-thumb {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-thumb {
visibility: hidden;
}
.thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
.thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
.thumbnail-sidebar:active::-webkit-scrollbar-thumb {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
:global(:where(html:not(.native-scrollbars)))
.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active::-webkit-scrollbar-thumb {
visibility: visible;
}
.thumbnail-sidebar::-webkit-scrollbar-corner {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-corner {
display: none;
}
</style>

31
src/lib/components/common/PptxPreview.svelte
View file

@ -436,36 +436,37 @@
</div>
<style>
.thumbnail-sidebar {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar {
scrollbar-color: transparent transparent;
}
.thumbnail-sidebar:hover,
.thumbnail-sidebar:focus,
.thumbnail-sidebar:focus-within,
.thumbnail-sidebar:active {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus-within,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active {
scrollbar-color: rgba(215, 215, 215, 0.6) transparent;
}
:global(.dark) .thumbnail-sidebar:hover,
:global(.dark) .thumbnail-sidebar:focus,
:global(.dark) .thumbnail-sidebar:focus-within,
:global(.dark) .thumbnail-sidebar:active {
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:hover,
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus,
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:focus-within,
:global(:where(html:not(.native-scrollbars)).dark) .thumbnail-sidebar:active {
scrollbar-color: rgba(67, 67, 67, 0.6) transparent;
}
.thumbnail-sidebar::-webkit-scrollbar-thumb {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-thumb {
visibility: hidden;
}
.thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
.thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
.thumbnail-sidebar:active::-webkit-scrollbar-thumb {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:hover::-webkit-scrollbar-thumb,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:focus::-webkit-scrollbar-thumb,
:global(:where(html:not(.native-scrollbars)))
.thumbnail-sidebar:focus-within::-webkit-scrollbar-thumb,
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar:active::-webkit-scrollbar-thumb {
visibility: visible;
}
.thumbnail-sidebar::-webkit-scrollbar-corner {
:global(:where(html:not(.native-scrollbars))) .thumbnail-sidebar::-webkit-scrollbar-corner {
display: none;
}
</style>