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

style(frontend): dark scrollbars for song list, main content, and details panel to match theme

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-13 16:06:02 +02:00
parent 017ba31d83
commit dd2c7d353e
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -636,7 +636,14 @@ const RekordboxReader: React.FC = () => {
overflow="hidden" overflow="hidden"
> >
{/* Song List */} {/* Song List */}
<Box flex={1} overflowY="auto" minH={0}> <Box flex={1} overflowY="auto" minH={0} 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)' }
}}>
<PaginatedSongList <PaginatedSongList
songs={songs} songs={songs}
onAddToPlaylist={handleAddSongsToPlaylist} onAddToPlaylist={handleAddSongsToPlaylist}
@ -676,15 +683,12 @@ const RekordboxReader: React.FC = () => {
bg="gray.900" bg="gray.900"
minH={0} minH={0}
sx={{ sx={{
'&::-webkit-scrollbar': { scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
width: '8px', scrollbarWidth: 'thin',
borderRadius: '8px', '&::-webkit-scrollbar': { width: '8px', backgroundColor: 'var(--chakra-colors-gray-900)' },
backgroundColor: '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-thumb': { '&::-webkit-scrollbar-track': { backgroundColor: 'var(--chakra-colors-gray-900)' },
backgroundColor: 'gray.700',
borderRadius: '8px',
},
}} }}
> >
<SongDetails song={selectedSong} /> <SongDetails song={selectedSong} />

19
packages/frontend/src/components/PaginatedSongList.tsx
View File

@ -502,6 +502,25 @@ export const PaginatedSongList: React.FC<PaginatedSongListProps> = memo(({
overflowY="auto" overflowY="auto"
mt={2} mt={2}
id="song-list-container" id="song-list-container"
sx={{
scrollbarColor: 'var(--chakra-colors-gray-700) var(--chakra-colors-gray-900)',
scrollbarWidth: 'thin',
'&::-webkit-scrollbar': {
width: '8px',
height: '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)'
}
}}
> >
<Box position="relative" height={`${rowVirtualizer.getTotalSize()}px`}> <Box position="relative" height={`${rowVirtualizer.getTotalSize()}px`}>
<Box onDragEnd={handleDragEnd}> <Box onDragEnd={handleDragEnd}>