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

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

@ -35,7 +35,7 @@ export const AlbumDetailHeader = forwardRef(
},
{
id: 'duration',
secondary: true,
secondary: false,
value:
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}
background={background}
/>
<AlbumDetailContent tableRef={tableRef} />
<AlbumDetailContent
background={background}
tableRef={tableRef}
/>
</NativeScrollArea>
</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 { getColumnDefs, VirtualTable } from '/@/renderer/components/virtual-table';
import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel';
import { LibraryBackgroundOverlay } from '/@/renderer/features/shared/components/library-background-overlay';
const ContentContainer = styled.div`
position: relative;
z-index: 0;
`;
const DetailContainer = styled.div`
display: flex;
flex-direction: column;
gap: 3rem;
@ -47,13 +52,13 @@ const ContentContainer = styled.div`
.ag-theme-alpine-dark {
--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 cq = useContainerQuery();
const handlePlayQueueAdd = usePlayQueueAdd();
@ -318,174 +323,181 @@ export const AlbumArtistDetailContent = () => {
return (
<ContentContainer ref={cq.ref}>
<Box component="section">
<Group spacing="md">
<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 ? (
<LibraryBackgroundOverlay backgroundColor={background} />
<DetailContainer>
<Box component="section">
<Group spacing="sm">
{detailQuery?.data?.genres?.map((genre) => (
<Group spacing="md">
<PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs">
<Button
key={`genre-${genre.id}`}
compact
component={Link}
radius="md"
size="md"
to={generatePath(
`${AppRoute.LIBRARY_ALBUM_ARTISTS}?genre=${genre.id}`,
{
albumArtistId,
},
loading={
createFavoriteMutation.isLoading ||
deleteFavoriteMutation.isLoading
}
variant="subtle"
onClick={handleFavorite}
>
{detailQuery?.data?.userFavorite ? (
<RiHeartFill
color="red"
size={20}
/>
) : (
<RiHeartLine size={20} />
)}
variant="outline"
>
{genre.name}
</Button>
))}
</Group>
</Box>
) : null}
{showBiography ? (
<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}
<Button
compact
variant="subtle"
onClick={(e) => {
if (!detailQuery?.data) return;
handleGeneralContextMenu(e, [detailQuery.data!]);
}}
>
Top Songs
</TextTitle>
<RiMoreFill size={20} />
</Button>
<Button
compact
uppercase
component={Link}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS, {
albumArtistId,
})}
to={artistDiscographyLink}
variant="subtle"
>
View all
View discography
</Button>
<Button
compact
uppercase
component={Link}
to={artistSongsLink}
variant="subtle"
>
View all songs
</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>
{showGenres ? (
<Box component="section">
<Group spacing="sm">
{detailQuery?.data?.genres?.map((genre) => (
<Button
key={`genre-${genre.id}`}
compact
component={Link}
radius="md"
size="md"
to={generatePath(
`${AppRoute.LIBRARY_ALBUM_ARTISTS}?genre=${genre.id}`,
{
albumArtistId,
},
)}
variant="outline"
>
{genre.name}
</Button>
))}
</Group>
</Box>
) : null}
{showBiography ? (
<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>
);
};

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

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

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

@ -55,7 +55,7 @@ const BackgroundImageOverlay = styled.div`
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(20, 21, 23, 40%), var(--main-bg));
background: var(--bg-header-overlay);
`;
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-header-background-color: rgba(0, 0, 0, 0%) !important;
}
.ag-header {
margin-bottom: 0.5rem;
}
`;
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 { useMergedRef } from '@mantine/hooks';
import { forwardRef, ReactNode, Ref } from 'react';
import { RiAlbumFill } from 'react-icons/ri';
import { Link } from 'react-router-dom';
import { SimpleImg } from 'react-simple-img';
@ -57,6 +57,7 @@ const BackgroundImage = styled.div<{ background: string }>`
width: 100%;
height: 100%;
background: ${(props) => props.background};
opacity: 0.9;
`;
const BackgroundImageOverlay = styled.div`
@ -66,8 +67,7 @@ const BackgroundImageOverlay = styled.div`
z-index: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(25, 26, 28, 5%), var(--main-bg)),
var(--background-noise);
background: var(--bg-header-overlay);
`;
interface LibraryHeaderProps {

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

@ -123,6 +123,10 @@
--card-poster-radius: 3px;
--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-fg: rgb(179, 179, 179);

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

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