master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(frontend): dark scrollbars for playlist sidebar and mobile drawer

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-13 16:08:38 +02:00
parent dd2c7d353e
commit feac54e2e0
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/frontend/src/App.tsx
View File

@ -587,6 +587,14 @@ const RekordboxReader: React.FC = () => {
borderColor="gray.700" borderColor="gray.700"
overflowY="auto" overflowY="auto"
bg="gray.900" bg="gray.900"
sx={{
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
scrollbarWidth: 'thin',
'&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
'&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
'&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
'&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' }
}}
> >
{playlistManager} {playlistManager}
<ResizeHandle onMouseDown={handleResizeStart} /> <ResizeHandle onMouseDown={handleResizeStart} />
@ -621,7 +629,14 @@ const RekordboxReader: React.FC = () => {
_hover={{ color: "blue.300", bg: "whiteAlpha.200" }} _hover={{ color: "blue.300", bg: "whiteAlpha.200" }}
/> />
</DrawerHeader> </DrawerHeader>
<DrawerBody p={2}> <DrawerBody p={2} sx={{
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
scrollbarWidth: 'thin',
'&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
'&::-webkit-scrollbar-thumb': { backgroundColor: 'var(--chakra-colors-gray-700)', borderRadius: '8px' },
'&::-webkit-scrollbar-thumb:hover': { backgroundColor: 'var(--chakra-colors-gray-600)' },
'&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' }
}}>
{playlistManager} {playlistManager}
</DrawerBody> </DrawerBody>
</DrawerContent> </DrawerContent>