alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 22:13:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: scrollbar

Browse source
This commit is contained in:
Jing Hua 2023-04-04 14:33:56 +08:00
parent 63f9eca717
commit 4d258687c0
3 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Menu/ChatHistoryList.tsx
View file

@ -156,7 +156,7 @@ const ChatHistoryList = () => {
return ( return (
<div <div
className={`flex-col flex-1 overflow-y-scroll -mr-2 border-b border-white/20 ${ className={`flex-col flex-1 overflow-y-auto hide-scroll-bar border-b border-white/20 ${
isHover ? 'bg-gray-800/40' : '' isHover ? 'bg-gray-800/40' : ''
}`} }`}
onDrop={handleDrop} onDrop={handleDrop}

2
src/components/Menu/Menu.tsx
View file

@ -36,7 +36,7 @@ const Menu = () => {
}`} }`}
> >
<div className='flex h-full min-h-0 flex-col'> <div className='flex h-full min-h-0 flex-col'>
<div className='scrollbar-trigger flex h-full w-full flex-1 items-start border-white/20'> <div className='flex h-full w-full flex-1 items-start border-white/20'>
<nav className='flex h-full flex-1 flex-col space-y-1 p-2'> <nav className='flex h-full flex-1 flex-col space-y-1 p-2'>
<NewChat /> <NewChat />
<ChatHistoryList /> <ChatHistoryList />

23
src/main.css
View file

@ -79,11 +79,6 @@
height: 1rem; height: 1rem;
width: 0.5rem; width: 0.5rem;
} }
@media screen and (min-width: 768px) {
.scrollbar-trigger ::-webkit-scrollbar-thumb {
visibility: hidden;
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -97,11 +92,6 @@
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.dark::-webkit-scrollbar-thumb {
--tw-bg-opacity: 1;
background-color: rgba(86, 88, 105, var(--tw-bg-opacity));
}
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
--tw-border-opacity: 1; --tw-border-opacity: 1;
background-color: rgba(217, 217, 227, 0.8); background-color: rgba(217, 217, 227, 0.8);
@ -110,6 +100,19 @@
border-width: 1px; border-width: 1px;
} }
::-webkit-scrollbar-thumb:hover {
background-color: rgba(217, 217, 227, 0.6);
}
.dark ::-webkit-scrollbar-thumb {
--tw-bg-opacity: 1;
background-color: rgba(86, 88, 105, var(--tw-bg-opacity));
}
.dark ::-webkit-scrollbar-thumb:hover {
background-color: rgba(217, 217, 227, 0.8);
}
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
border-radius: 9999px; border-radius: 9999px;