pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve header color styles on detail pages

Browse source
This commit is contained in:
jeffvli 2023-07-20 17:31:56 -07:00
parent 713260bfc9
commit 31eb22f968
11 changed files with 473 additions and 429 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

306
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -34,6 +34,7 @@ import {
import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel'; import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel';
import { FullWidthDiscCell } from '/@/renderer/components/virtual-table/cells/full-width-disc-cell'; import { FullWidthDiscCell } from '/@/renderer/components/virtual-table/cells/full-width-disc-cell';
import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles'; import { useCurrentSongRowStyles } from '/@/renderer/components/virtual-table/hooks/use-current-song-row-styles';
import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
const isFullWidthRow = (node: RowNode) => { const isFullWidthRow = (node: RowNode) => {
return node.id?.startsWith('disc-'); return node.id?.startsWith('disc-');
@ -41,6 +42,10 @@ const isFullWidthRow = (node: RowNode) => {
const ContentContainer = styled.div` const ContentContainer = styled.div`
position: relative; position: relative;
z-index: 0;
`;
const DetailContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1rem 2rem 5rem; padding: 1rem 2rem 5rem;
@ -49,17 +54,14 @@ const ContentContainer = styled.div`
.ag-theme-alpine-dark { .ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important; --ag-header-background-color: rgba(0, 0, 0, 0%) !important;
} }
.ag-header {
margin-bottom: 0.5rem;
}
`; `;
interface AlbumDetailContentProps { interface AlbumDetailContentProps {
background?: string;
tableRef: MutableRefObject<AgGridReactType | null>; tableRef: MutableRefObject<AgGridReactType | null>;
} }
export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => { export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentProps) => {
const { albumId } = useParams() as { albumId: string }; const { albumId } = useParams() as { albumId: string };
const server = useCurrentServer(); const server = useCurrentServer();
const detailQuery = useAlbumDetail({ query: { id: albumId }, serverId: server?.id }); const detailQuery = useAlbumDetail({ query: { id: albumId }, serverId: server?.id });
@ -271,157 +273,165 @@ export const AlbumDetailContent = ({ tableRef }: AlbumDetailContentProps) => {
return ( return (
<ContentContainer> <ContentContainer>
<Box component="section"> <LibraryBackgroundOverlay backgroundColor={background} />
<Group <DetailContainer>
ref={showGenres ? null : intersectRef} <Box component="section">
className="test" <Group
py="1rem" ref={showGenres ? null : intersectRef}
spacing="md" py="1rem"
> spacing="md"
<PlayButton onClick={() => handlePlay(playButtonBehavior)} /> >
<Group spacing="xs"> <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Button <Group spacing="xs">
compact
loading={
createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading
}
variant="subtle"
onClick={handleFavorite}
>
{detailQuery?.data?.userFavorite ? (
<RiHeartFill
color="red"
size={20}
/>
) : (
<RiHeartLine size={20} />
)}
</Button>
<Button
compact
variant="subtle"
onClick={(e) => {
if (!detailQuery?.data) return;
handleGeneralContextMenu(e, [detailQuery.data!]);
}}
>
<RiMoreFill size={20} />
</Button>
</Group>
</Group>
</Box>
{showGenres && (
<Box
ref={showGenres ? intersectRef : null}
component="section"
py="1rem"
>
<Group spacing="sm">
{detailQuery?.data?.genres?.map((genre) => (
<Button <Button
key={`genre-${genre.id}`}
compact compact
component={Link} loading={
radius={0} createFavoriteMutation.isLoading ||
size="md" deleteFavoriteMutation.isLoading
to={generatePath(`${AppRoute.LIBRARY_ALBUMS}?genre=${genre.id}`, { }
albumId, variant="subtle"
})} onClick={handleFavorite}
variant="outline"
> >
{genre.name} {detailQuery?.data?.userFavorite ? (
<RiHeartFill
color="red"
size={20}
/>
) : (
<RiHeartLine size={20} />
)}
</Button> </Button>
))} <Button
compact
variant="subtle"
onClick={(e) => {
if (!detailQuery?.data) return;
handleGeneralContextMenu(e, [detailQuery.data!]);
}}
>
<RiMoreFill size={20} />
</Button>
</Group>
</Group> </Group>
</Box> </Box>
)} {showGenres && (
<Box <Box
ref={tableContainerRef} ref={showGenres ? intersectRef : null}
style={{ minHeight: '300px' }} component="section"
> py="1rem"
<VirtualTable >
ref={tableRef} <Group spacing="sm">
autoFitColumns {detailQuery?.data?.genres?.map((genre) => (
autoHeight <Button
suppressCellFocus key={`genre-${genre.id}`}
suppressHorizontalScroll compact
suppressLoadingOverlay component={Link}
suppressRowDrag radius={0}
columnDefs={columnDefs} size="md"
enableCellChangeFlash={false} to={generatePath(
fullWidthCellRenderer={FullWidthDiscCell} `${AppRoute.LIBRARY_ALBUMS}?genre=${genre.id}`,
getRowHeight={getRowHeight} {
getRowId={(data) => data.data.id} albumId,
isFullWidthRow={(data) => { },
return isFullWidthRow(data.rowNode) || false; )}
}} variant="outline"
isRowSelectable={(data) => { >
if (isFullWidthRow(data.data)) return false; {genre.name}
return true; </Button>
}} ))}
rowClassRules={rowClassRules} </Group>
rowData={songsRowData} </Box>
rowSelection="multiple" )}
onCellContextMenu={handleContextMenu} <Box
onRowDoubleClicked={handleRowDoubleClick} ref={tableContainerRef}
/> style={{ minHeight: '300px' }}
</Box> >
<Stack <VirtualTable
ref={cq.ref} ref={tableRef}
mt="5rem" autoFitColumns
> autoHeight
<> suppressCellFocus
{cq.height || cq.width ? ( suppressHorizontalScroll
<> suppressLoadingOverlay
{carousels suppressRowDrag
.filter((c) => !c.isHidden) columnDefs={columnDefs}
.map((carousel, index) => ( enableCellChangeFlash={false}
<SwiperGridCarousel fullWidthCellRenderer={FullWidthDiscCell}
key={`carousel-${carousel.uniqueId}-${index}`} getRowHeight={getRowHeight}
cardRows={[ getRowId={(data) => data.data.id}
{ isFullWidthRow={(data) => {
property: 'name', return isFullWidthRow(data.rowNode) || false;
route: { }}
route: AppRoute.LIBRARY_ALBUMS_DETAIL, isRowSelectable={(data) => {
slugs: [ if (isFullWidthRow(data.data)) return false;
{ return true;
idProperty: 'id', }}
slugProperty: 'albumId', rowClassRules={rowClassRules}
}, rowData={songsRowData}
], rowSelection="multiple"
onCellContextMenu={handleContextMenu}
onRowDoubleClicked={handleRowDoubleClick}
/>
</Box>
<Stack
ref={cq.ref}
mt="5rem"
>
<>
{cq.height || cq.width ? (
<>
{carousels
.filter((c) => !c.isHidden)
.map((carousel, index) => (
<SwiperGridCarousel
key={`carousel-${carousel.uniqueId}-${index}`}
cardRows={[
{
property: 'name',
route: {
route: AppRoute.LIBRARY_ALBUMS_DETAIL,
slugs: [
{
idProperty: 'id',
slugProperty: 'albumId',
},
],
},
}, },
}, {
{ arrayProperty: 'name',
arrayProperty: 'name', property: 'albumArtists',
property: 'albumArtists', route: {
route: { route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, slugs: [
slugs: [ {
{ idProperty: 'id',
idProperty: 'id', slugProperty: 'albumArtistId',
slugProperty: 'albumArtistId', },
}, ],
], },
}, },
}, ]}
]} data={carousel.data}
data={carousel.data} isLoading={carousel.loading}
isLoading={carousel.loading} itemType={LibraryItem.ALBUM}
itemType={LibraryItem.ALBUM} route={{
route={{ route: AppRoute.LIBRARY_ALBUMS_DETAIL,
route: AppRoute.LIBRARY_ALBUMS_DETAIL, slugs: [
slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], { idProperty: 'id', slugProperty: 'albumId' },
}} ],
title={{ }}
label: carousel.title, title={{
}} label: carousel.title,
uniqueId={carousel.uniqueId} }}
/> uniqueId={carousel.uniqueId}
))} />
</> ))}
) : null} </>
</> ) : null}
</Stack> </>
</Stack>
</DetailContainer>
</ContentContainer> </ContentContainer>
); );
}; };

2
src/renderer/features/albums/components/album-detail-header.tsx
View file

@ -35,7 +35,7 @@ export const AlbumDetailHeader = forwardRef(
}, },
{ {
id: 'duration', id: 'duration',
secondary: true, secondary: false,
value: value:
detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration), detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
}, },

5
src/renderer/features/albums/routes/album-detail-route.tsx
View file

@ -57,7 +57,10 @@ const AlbumDetailRoute = () => {
ref={headerRef} ref={headerRef}
background={background} background={background}
/> />
<AlbumDetailContent tableRef={tableRef} /> <AlbumDetailContent
background={background}
tableRef={tableRef}
/>
</NativeScrollArea> </NativeScrollArea>
</AnimatedPage> </AnimatedPage>
); );

326
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -35,9 +35,14 @@ import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album
import { useTopSongsList } from '/@/renderer/features/artists/queries/top-songs-list-query'; import { useTopSongsList } from '/@/renderer/features/artists/queries/top-songs-list-query';
import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table'; import { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel'; import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel';
import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
const ContentContainer = styled.div` const ContentContainer = styled.div`
position: relative; position: relative;
z-index: 0;
`;
const DetailContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3rem; gap: 3rem;
@ -47,13 +52,13 @@ const ContentContainer = styled.div`
.ag-theme-alpine-dark { .ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important; --ag-header-background-color: rgba(0, 0, 0, 0%) !important;
} }
.ag-header {
margin-bottom: 0.5rem;
}
`; `;
export const AlbumArtistDetailContent = () => { interface AlbumArtistDetailContentProps {
background?: string;
}
export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailContentProps) => {
const { albumArtistId } = useParams() as { albumArtistId: string }; const { albumArtistId } = useParams() as { albumArtistId: string };
const cq = useContainerQuery(); const cq = useContainerQuery();
const handlePlayQueueAdd = usePlayQueueAdd(); const handlePlayQueueAdd = usePlayQueueAdd();
@ -318,174 +323,181 @@ export const AlbumArtistDetailContent = () => {
return ( return (
<ContentContainer ref={cq.ref}> <ContentContainer ref={cq.ref}>
<Box component="section"> <LibraryBackgroundOverlay backgroundColor={background} />
<Group spacing="md"> <DetailContainer>
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs">
<Button
compact
loading={
createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading
}
variant="subtle"
onClick={handleFavorite}
>
{detailQuery?.data?.userFavorite ? (
<RiHeartFill
color="red"
size={20}
/>
) : (
<RiHeartLine size={20} />
)}
</Button>
<Button
compact
variant="subtle"
onClick={(e) => {
if (!detailQuery?.data) return;
handleGeneralContextMenu(e, [detailQuery.data!]);
}}
>
<RiMoreFill size={20} />
</Button>
<Button
compact
uppercase
component={Link}
to={artistDiscographyLink}
variant="subtle"
>
View discography
</Button>
<Button
compact
uppercase
component={Link}
to={artistSongsLink}
variant="subtle"
>
View all songs
</Button>
</Group>
</Group>
</Box>
{showGenres ? (
<Box component="section"> <Box component="section">
<Group spacing="sm"> <Group spacing="md">
{detailQuery?.data?.genres?.map((genre) => ( <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs">
<Button <Button
key={`genre-${genre.id}`}
compact compact
component={Link} loading={
radius="md" createFavoriteMutation.isLoading ||
size="md" deleteFavoriteMutation.isLoading
to={generatePath( }
`${AppRoute.LIBRARY_ALBUM_ARTISTS}?genre=${genre.id}`, variant="subtle"
{ onClick={handleFavorite}
albumArtistId, >
}, {detailQuery?.data?.userFavorite ? (
<RiHeartFill
color="red"
size={20}
/>
) : (
<RiHeartLine size={20} />
)} )}
variant="outline"
>
{genre.name}
</Button> </Button>
))} <Button
</Group> compact
</Box> variant="subtle"
) : null} onClick={(e) => {
{showBiography ? ( if (!detailQuery?.data) return;
<Box handleGeneralContextMenu(e, [detailQuery.data!]);
component="section" }}
maw="1280px"
>
<TextTitle
order={2}
weight={700}
>
About {detailQuery?.data?.name}
</TextTitle>
<Text
$secondary
component="p"
dangerouslySetInnerHTML={{ __html: detailQuery?.data?.biography || '' }}
sx={{ textAlign: 'justify' }}
/>
</Box>
) : null}
{showTopSongs ? (
<Box component="section">
<Group
noWrap
position="apart"
>
<Group
noWrap
align="flex-end"
>
<TextTitle
order={2}
weight={700}
> >
Top Songs <RiMoreFill size={20} />
</TextTitle> </Button>
<Button <Button
compact compact
uppercase uppercase
component={Link} component={Link}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS, { to={artistDiscographyLink}
albumArtistId,
})}
variant="subtle" variant="subtle"
> >
View all View discography
</Button>
<Button
compact
uppercase
component={Link}
to={artistSongsLink}
variant="subtle"
>
View all songs
</Button> </Button>
</Group> </Group>
</Group> </Group>
<VirtualTable
autoFitColumns
autoHeight
deselectOnClickOutside
suppressCellFocus
suppressHorizontalScroll
suppressLoadingOverlay
suppressRowDrag
columnDefs={topSongsColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.uniqueId}
rowData={topSongs}
rowHeight={60}
rowSelection="multiple"
onCellContextMenu={handleContextMenu}
onRowDoubleClicked={handleRowDoubleClick}
/>
</Box> </Box>
) : null} {showGenres ? (
<Box component="section"> <Box component="section">
<Stack spacing="xl"> <Group spacing="sm">
{carousels {detailQuery?.data?.genres?.map((genre) => (
.filter((c) => !c.isHidden) <Button
.map((carousel) => ( key={`genre-${genre.id}`}
<SwiperGridCarousel compact
key={`carousel-${carousel.uniqueId}`} component={Link}
cardRows={cardRows[carousel.itemType as keyof typeof cardRows]} radius="md"
data={carousel.data} size="md"
isLoading={carousel.loading} to={generatePath(
itemType={carousel.itemType} `${AppRoute.LIBRARY_ALBUM_ARTISTS}?genre=${genre.id}`,
route={cardRoutes[carousel.itemType as keyof typeof cardRoutes]} {
swiperProps={{ albumArtistId,
grid: { },
rows: 2, )}
}, variant="outline"
}} >
title={{ {genre.name}
label: carousel.title, </Button>
}} ))}
uniqueId={carousel.uniqueId} </Group>
/> </Box>
))} ) : null}
</Stack> {showBiography ? (
</Box> <Box
component="section"
maw="1280px"
>
<TextTitle
order={2}
weight={700}
>
About {detailQuery?.data?.name}
</TextTitle>
<Text
$secondary
component="p"
dangerouslySetInnerHTML={{ __html: detailQuery?.data?.biography || '' }}
sx={{ textAlign: 'justify' }}
/>
</Box>
) : null}
{showTopSongs ? (
<Box component="section">
<Group
noWrap
position="apart"
>
<Group
noWrap
align="flex-end"
>
<TextTitle
order={2}
weight={700}
>
Top Songs
</TextTitle>
<Button
compact
uppercase
component={Link}
to={generatePath(
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS,
{
albumArtistId,
},
)}
variant="subtle"
>
View all
</Button>
</Group>
</Group>
<VirtualTable
autoFitColumns
autoHeight
deselectOnClickOutside
suppressCellFocus
suppressHorizontalScroll
suppressLoadingOverlay
suppressRowDrag
columnDefs={topSongsColumnDefs}
enableCellChangeFlash={false}
getRowId={(data) => data.data.uniqueId}
rowData={topSongs}
rowHeight={60}
rowSelection="multiple"
onCellContextMenu={handleContextMenu}
onRowDoubleClicked={handleRowDoubleClick}
/>
</Box>
) : null}
<Box component="section">
<Stack spacing="xl">
{carousels
.filter((c) => !c.isHidden)
.map((carousel) => (
<SwiperGridCarousel
key={`carousel-${carousel.uniqueId}`}
cardRows={cardRows[carousel.itemType as keyof typeof cardRows]}
data={carousel.data}
isLoading={carousel.loading}
itemType={carousel.itemType}
route={cardRoutes[carousel.itemType as keyof typeof cardRoutes]}
swiperProps={{
grid: {
rows: 2,
},
}}
title={{
label: carousel.title,
}}
uniqueId={carousel.uniqueId}
/>
))}
</Stack>
</Box>
</DetailContainer>
</ContentContainer> </ContentContainer>
); );
}; };

2
src/renderer/features/artists/routes/album-artist-detail-route.tsx
View file

@ -58,7 +58,7 @@ const AlbumArtistDetailRoute = () => {
ref={headerRef} ref={headerRef}
background={background} background={background}
/> />
<AlbumArtistDetailContent /> <AlbumArtistDetailContent background={background} />
</NativeScrollArea> </NativeScrollArea>
</AnimatedPage> </AnimatedPage>
); );

2
src/renderer/features/player/components/full-screen-player.tsx
View file

@ -55,7 +55,7 @@ const BackgroundImageOverlay = styled.div`
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(180deg, rgba(20, 21, 23, 40%), var(--main-bg)); background: var(--bg-header-overlay);
`; `;
const Controls = () => { const Controls = () => {

4
src/renderer/features/playlists/components/playlist-detail-content.tsx
View file

@ -42,10 +42,6 @@ const ContentContainer = styled.div`
.ag-theme-alpine-dark { .ag-theme-alpine-dark {
--ag-header-background-color: rgba(0, 0, 0, 0%) !important; --ag-header-background-color: rgba(0, 0, 0, 0%) !important;
} }
.ag-header {
margin-bottom: 0.5rem;
}
`; `;
interface PlaylistDetailContentProps { interface PlaylistDetailContentProps {

14
src/renderer/features/shared/components/library-background-overlay.tsx Normal file
View file

@ -0,0 +1,14 @@
import styled from 'styled-components';
export const LibraryBackgroundOverlay = styled.div<{ backgroundColor?: string }>`
position: absolute;
z-index: -1;
width: 100%;
height: 20vh;
min-height: 200px;
background: ${(props) => props.backgroundColor};
background-image: var(--bg-subheader-overlay);
opacity: 0.3;
user-select: none;
pointer-events: none;
`;

6
src/renderer/features/shared/components/library-header.tsx
View file

@ -1,6 +1,6 @@
import { forwardRef, ReactNode, Ref } from 'react';
import { Center, Group } from '@mantine/core'; import { Center, Group } from '@mantine/core';
import { useMergedRef } from '@mantine/hooks'; import { useMergedRef } from '@mantine/hooks';
import { forwardRef, ReactNode, Ref } from 'react';
import { RiAlbumFill } from 'react-icons/ri'; import { RiAlbumFill } from 'react-icons/ri';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img'; import { SimpleImg } from 'react-simple-img';
@ -57,6 +57,7 @@ const BackgroundImage = styled.div<{ background: string }>`
width: 100%; width: 100%;
height: 100%; height: 100%;
background: ${(props) => props.background}; background: ${(props) => props.background};
opacity: 0.9;
`; `;
const BackgroundImageOverlay = styled.div` const BackgroundImageOverlay = styled.div`
@ -66,8 +67,7 @@ const BackgroundImageOverlay = styled.div`
z-index: 0; z-index: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)), background: var(--bg-header-overlay);
var(--background-noise);
`; `;
interface LibraryHeaderProps { interface LibraryHeaderProps {

4
src/renderer/themes/default.scss
View file

@ -123,6 +123,10 @@
--card-poster-radius: 3px; --card-poster-radius: 3px;
--background-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); --background-noise: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=');
--bg-header-overlay: linear-gradient(transparent 0%, rgba(0, 0, 0, 50%) 100%),
var(--background-noise);
--bg-subheader-overlay: linear-gradient(180deg, rgba(0, 0, 0, 5%) 0%, var(--main-bg) 100%),
var(--background-noise);
--table-header-bg: rgb(24, 24, 24); --table-header-bg: rgb(24, 24, 24);
--table-header-fg: rgb(179, 179, 179); --table-header-fg: rgb(179, 179, 179);

231
src/renderer/themes/light.scss
View file

@ -1,143 +1,148 @@
body[data-theme='defaultLight'] { body[data-theme='defaultLight'] {
--icon-color: #ffffff; --icon-color: #ffffff;
--main-bg: rgb(255, 255, 255); --main-bg: rgb(255, 255, 255);
--main-fg: rgb(25, 25, 25); --main-fg: rgb(25, 25, 25);
--main-fg-secondary: rgb(80, 80, 80); --main-fg-secondary: rgb(80, 80, 80);
--titlebar-fg: rgb(25, 25, 25); --titlebar-fg: rgb(25, 25, 25);
--titlebar-bg: rgb(240, 241, 242); --titlebar-bg: rgb(240, 241, 242);
--titlebar-controls-bg: rgba(0, 0, 0, 0); --titlebar-controls-bg: rgba(0, 0, 0, 0);
--sidebar-bg: rgb(240, 241, 242); --sidebar-bg: rgb(240, 241, 242);
--sidebar-bg-hover: rgb(200, 200, 200); --sidebar-bg-hover: rgb(200, 200, 200);
--sidebar-fg: rgb(0, 0, 0); --sidebar-fg: rgb(0, 0, 0);
--sidebar-fg-hover: rgb(85, 85, 85); --sidebar-fg-hover: rgb(85, 85, 85);
--sidebar-handle-bg: rgb(220, 220, 220); --sidebar-handle-bg: rgb(220, 220, 220);
--sidebar-border: 1px rgba(220, 220, 220, 0.7) solid; --sidebar-border: 1px rgba(220, 220, 220, 0.7) solid;
--playerbar-bg: linear-gradient( --playerbar-bg: linear-gradient(
rgb(220, 220, 220) 0%, rgb(220, 220, 220) 0%,
rgb(240, 240, 240) 50%, rgb(240, 240, 240) 50%,
rgb(220, 220, 220) 100% rgb(220, 220, 220) 100%
); );
--playerbar-btn-main-fg: rgb(0, 0, 0); --playerbar-btn-main-fg: rgb(0, 0, 0);
--playerbar-btn-main-fg-hover: rgb(0, 0, 0); --playerbar-btn-main-fg-hover: rgb(0, 0, 0);
--playerbar-btn-main-bg: transparent; --playerbar-btn-main-bg: transparent;
--playerbar-btn-main-bg-hover: transparent; --playerbar-btn-main-bg-hover: transparent;
--playerbar-btn-fg: #000; --playerbar-btn-fg: #000;
--playerbar-btn-fg-hover: #000; --playerbar-btn-fg-hover: #000;
--playerbar-btn-bg: transparent; --playerbar-btn-bg: transparent;
--playerbar-btn-bg-hover: transparent; --playerbar-btn-bg-hover: transparent;
--playerbar-border-top: 1px rgba(200, 200, 200, 0.7) solid; --playerbar-border-top: 1px rgba(200, 200, 200, 0.7) solid;
--playerbar-slider-track-bg: rgba(50, 50, 50, 0.2); --playerbar-slider-track-bg: rgba(50, 50, 50, 0.2);
--playerbar-slider-track-progress-bg: rgb(50, 50, 50); --playerbar-slider-track-progress-bg: rgb(50, 50, 50);
--tooltip-bg: rgb(255, 255, 255); --tooltip-bg: rgb(255, 255, 255);
--tooltip-fg: rgb(0, 0, 0); --tooltip-fg: rgb(0, 0, 0);
--scrollbar-track-bg: transparent; --scrollbar-track-bg: transparent;
--scrollbar-thumb-bg: rgba(140, 140, 140, 0.3); --scrollbar-thumb-bg: rgba(140, 140, 140, 0.3);
--scrollbar-thumb-bg: rgba(140, 140, 140, 0.6); --scrollbar-thumb-bg: rgba(140, 140, 140, 0.6);
--btn-filled-bg: var(--primary-color); --btn-filled-bg: var(--primary-color);
--btn-filled-fg: #ffffff; --btn-filled-fg: #ffffff;
--btn-filled-fg-hover: #ffffff; --btn-filled-fg-hover: #ffffff;
--btn-default-bg: rgb(220, 220, 220); --btn-default-bg: rgb(220, 220, 220);
--btn-default-bg-hover: rgb(210, 210, 210); --btn-default-bg-hover: rgb(210, 210, 210);
--btn-default-fg: rgb(50, 50, 50); --btn-default-fg: rgb(50, 50, 50);
--btn-default-fg-hover: rgb(50, 50, 50); --btn-default-fg-hover: rgb(50, 50, 50);
--btn-subtle-bg: transparent; --btn-subtle-bg: transparent;
--btn-subtle-bg-hover: transparent; --btn-subtle-bg-hover: transparent;
--btn-subtle-fg: rgb(80, 80, 80); --btn-subtle-fg: rgb(80, 80, 80);
--btn-subtle-fg-hover: rgb(0, 0, 0); --btn-subtle-fg-hover: rgb(0, 0, 0);
--btn-outline-bg: transparent; --btn-outline-bg: transparent;
--btn-outline-bg-hover: transparent; --btn-outline-bg-hover: transparent;
--btn-outline-fg: rgb(60, 60, 60); --btn-outline-fg: rgb(60, 60, 60);
--btn-outline-fg-hover: rgb(0, 0, 0); --btn-outline-fg-hover: rgb(0, 0, 0);
--btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid; --btn-outline-border: 1px rgba(140, 140, 140, 0.5) solid;
--btn-outline-border-hover: 1px rgba(255, 255, 255, 0.5) solid; --btn-outline-border-hover: 1px rgba(255, 255, 255, 0.5) solid;
--btn-outline-radius: 5rem; --btn-outline-radius: 5rem;
--input-bg: rgb(240, 241, 242); --input-bg: rgb(240, 241, 242);
--input-fg: rgb(0, 0, 0); --input-fg: rgb(0, 0, 0);
--input-placeholder-fg: rgb(119, 126, 139); --input-placeholder-fg: rgb(119, 126, 139);
--input-active-fg: rgb(193, 193, 193); --input-active-fg: rgb(193, 193, 193);
--input-active-bg: rgba(37, 38, 43, 0.3); --input-active-bg: rgba(37, 38, 43, 0.3);
--dropdown-menu-bg: rgb(255, 255, 255); --dropdown-menu-bg: rgb(255, 255, 255);
--dropdown-menu-fg: rgb(0, 0, 0); --dropdown-menu-fg: rgb(0, 0, 0);
--dropdown-menu-bg-hover: rgba(0, 0, 0, 0.1); --dropdown-menu-bg-hover: rgba(0, 0, 0, 0.1);
--dropdown-menu-border: 1px rgba(150, 150, 150, 0.7) solid; --dropdown-menu-border: 1px rgba(150, 150, 150, 0.7) solid;
--dropdown-menu-border-radius: 4px; --dropdown-menu-border-radius: 4px;
--switch-track-bg: rgb(114, 118, 125); --switch-track-bg: rgb(114, 118, 125);
--switch-track-enabled-bg: var(--primary-color); --switch-track-enabled-bg: var(--primary-color);
--switch-thumb-bg: rgb(255, 255, 255); --switch-thumb-bg: rgb(255, 255, 255);
--slider-track-bg: rgba(50, 50, 50, 0.1); --slider-track-bg: rgba(50, 50, 50, 0.1);
--slider-thumb-bg: rgb(100, 100, 100); --slider-thumb-bg: rgb(100, 100, 100);
--skeleton-bg: rgba(50, 50, 50, 8%); --skeleton-bg: rgba(50, 50, 50, 8%);
--toast-title-fg: rgb(255, 255, 255); --toast-title-fg: rgb(255, 255, 255);
--toast-description-fg: rgb(193, 194, 197); --toast-description-fg: rgb(193, 194, 197);
--toast-bg: rgb(16, 16, 16); --toast-bg: rgb(16, 16, 16);
--modal-bg: rgb(255, 255, 255); --modal-bg: rgb(255, 255, 255);
--modal-header-bg: var(--paper-bg); --modal-header-bg: var(--paper-bg);
--paper-bg: rgb(240, 240, 240); --paper-bg: rgb(240, 240, 240);
--placeholder-bg: rgba(204, 204, 204, 0.5); --placeholder-bg: rgba(204, 204, 204, 0.5);
--placeholder-fg: rgb(126, 126, 126); --placeholder-fg: rgb(126, 126, 126);
--card-default-bg: rgba(235, 235, 235, 0.5); --card-default-bg: rgba(235, 235, 235, 0.5);
--card-default-bg-hover: rgba(200, 200, 200, 0.8); --card-default-bg-hover: rgba(200, 200, 200, 0.8);
--card-default-radius: 10px; --card-default-radius: 10px;
--card-poster-bg: transparent; --card-poster-bg: transparent;
--card-poster-bg-hover: transparent; --card-poster-bg-hover: transparent;
--card-poster-radius: 5px; --card-poster-radius: 5px;
--table-header-bg: rgb(245, 245, 245); --bg-header-overlay: linear-gradient(rgba(255, 255, 255, 50%) 0%, rgba(255, 255, 255, 20%)),
--table-header-fg: rgb(40, 40, 40); var(--background-noise);
--table-border: none; --bg-subheader-overlay: linear-gradient(180deg, rgba(255, 255, 255, 5%) 0%, var(--main-bg)),
--table-border-color: rgba(50, 50, 50, 0.3); var(--background-noise);
--table-bg: var(--main-bg);
--table-alt-bg: var(--main-bg);
--table-fg: rgb(179, 179, 179);
--table-row-hover-bg: rgba(150, 150, 150, 0.2);
--table-row-selected-bg: rgba(150, 150, 150, 0.3);
.ag-theme-alpine-dark { --table-header-bg: rgb(245, 245, 245);
--ag-font-family: var(--content-font-family); --table-header-fg: rgb(40, 40, 40);
--table-border: none;
--table-border-color: rgba(50, 50, 50, 0.3);
--table-bg: var(--main-bg);
--table-alt-bg: var(--main-bg);
--table-fg: rgb(179, 179, 179);
--table-row-hover-bg: rgba(150, 150, 150, 0.2);
--table-row-selected-bg: rgba(150, 150, 150, 0.3);
--ag-borders: var(--table-border); .ag-theme-alpine-dark {
--ag-border-color: rgb(50, 50, 50); --ag-font-family: var(--content-font-family);
--ag-header-background-color: var(--table-header-bg); --ag-borders: var(--table-border);
--ag-header-foreground-color: var(--table-header-fg); --ag-border-color: rgb(50, 50, 50);
--ag-foreground-color: rgb(0, 0, 0); --ag-header-background-color: var(--table-header-bg);
--ag-header-foreground-color: var(--table-header-fg);
--ag-background-color: var(--table-bg); --ag-foreground-color: rgb(0, 0, 0);
--ag-odd-row-background-color: var(--table-alt-bg);
--ag-foreground-color: var(--table-fg);
--ag-row-hover-color: var(--table-row-hover-bg); --ag-background-color: var(--table-bg);
--ag-selected-row-background-color: var(--table-row-selected-bg); --ag-odd-row-background-color: var(--table-alt-bg);
} --ag-foreground-color: var(--table-fg);
.ag-root ::-webkit-scrollbar-corner { --ag-row-hover-color: var(--table-row-hover-bg);
background: var(--scrollbar-track-bg); --ag-selected-row-background-color: var(--table-row-selected-bg);
} }
.ag-root ::-webkit-scrollbar-track-piece {
background: var(--scrollbar-track-bg); .ag-root ::-webkit-scrollbar-corner {
} background: var(--scrollbar-track-bg);
.ag-root ::-webkit-scrollbar-thumb { }
background: var(--scrollbar-thumb-bg); .ag-root ::-webkit-scrollbar-track-piece {
} background: var(--scrollbar-track-bg);
}
.ag-root ::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb-bg);
}
} }