alex/nova-betterchat
1
0
Fork 0
mirror of https://github.com/NovaOSS/nova-betterchat.git synced 2024-11-25 20:43:58 +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 (
<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' : ''
}`}
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='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'>
<NewChat />
<ChatHistoryList />

23
src/main.css
View file

@ -79,11 +79,6 @@
height: 1rem;
width: 0.5rem;
}
@media screen and (min-width: 768px) {
.scrollbar-trigger ::-webkit-scrollbar-thumb {
visibility: hidden;
}
}
@media screen and (max-width: 768px) {
::-webkit-scrollbar {
@ -97,11 +92,6 @@
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 {
--tw-border-opacity: 1;
background-color: rgba(217, 217, 227, 0.8);
@ -110,6 +100,19 @@
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 {
background-color: transparent;
border-radius: 9999px;