From 31eb22f968dee618b6249afb8bb0017365f58ab0 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Thu, 20 Jul 2023 17:31:56 -0700 Subject: [PATCH] Improve header color styles on detail pages --- .../components/album-detail-content.tsx | 306 ++++++++-------- .../albums/components/album-detail-header.tsx | 2 +- .../albums/routes/album-detail-route.tsx | 5 +- .../album-artist-detail-content.tsx | 326 +++++++++--------- .../routes/album-artist-detail-route.tsx | 2 +- .../player/components/full-screen-player.tsx | 2 +- .../components/playlist-detail-content.tsx | 4 - .../components/library-background-overlay.tsx | 14 + .../shared/components/library-header.tsx | 6 +- src/renderer/themes/default.scss | 4 + src/renderer/themes/light.scss | 231 +++++++------ 11 files changed, 473 insertions(+), 429 deletions(-) create mode 100644 src/renderer/features/shared/components/library-background-overlay.tsx diff --git a/src/renderer/features/albums/components/album-detail-content.tsx b/src/renderer/features/albums/components/album-detail-content.tsx index df2d67d7..b6313793 100644 --- a/src/renderer/features/albums/components/album-detail-content.tsx +++ b/src/renderer/features/albums/components/album-detail-content.tsx @@ -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; } -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 ( - - - handlePlay(playButtonBehavior)} /> - - - - - - - {showGenres && ( - - - {detailQuery?.data?.genres?.map((genre) => ( + + + + + handlePlay(playButtonBehavior)} /> + - ))} + + - )} - - 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} - /> - - - <> - {cq.height || cq.width ? ( - <> - {carousels - .filter((c) => !c.isHidden) - .map((carousel, index) => ( - + + {detailQuery?.data?.genres?.map((genre) => ( + + ))} + + + )} + + 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} + /> + + + <> + {cq.height || cq.width ? ( + <> + {carousels + .filter((c) => !c.isHidden) + .map((carousel, index) => ( + - ))} - - ) : null} - - + ]} + 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} + + + ); }; diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx index fa94e14f..7c648d14 100644 --- a/src/renderer/features/albums/components/album-detail-header.tsx +++ b/src/renderer/features/albums/components/album-detail-header.tsx @@ -35,7 +35,7 @@ export const AlbumDetailHeader = forwardRef( }, { id: 'duration', - secondary: true, + secondary: false, value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration), }, diff --git a/src/renderer/features/albums/routes/album-detail-route.tsx b/src/renderer/features/albums/routes/album-detail-route.tsx index b3d47c80..5735d021 100644 --- a/src/renderer/features/albums/routes/album-detail-route.tsx +++ b/src/renderer/features/albums/routes/album-detail-route.tsx @@ -57,7 +57,10 @@ const AlbumDetailRoute = () => { ref={headerRef} background={background} /> - + ); diff --git a/src/renderer/features/artists/components/album-artist-detail-content.tsx b/src/renderer/features/artists/components/album-artist-detail-content.tsx index 372defeb..1bed239c 100644 --- a/src/renderer/features/artists/components/album-artist-detail-content.tsx +++ b/src/renderer/features/artists/components/album-artist-detail-content.tsx @@ -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 ( - - - handlePlay(playButtonBehavior)} /> - - - - - - - - - {showGenres ? ( + + - - {detailQuery?.data?.genres?.map((genre) => ( + + handlePlay(playButtonBehavior)} /> + - ))} - - - ) : null} - {showBiography ? ( - - - About {detailQuery?.data?.name} - - - - ) : null} - {showTopSongs ? ( - - - - { + if (!detailQuery?.data) return; + handleGeneralContextMenu(e, [detailQuery.data!]); + }} > - Top Songs - + + + - data.data.uniqueId} - rowData={topSongs} - rowHeight={60} - rowSelection="multiple" - onCellContextMenu={handleContextMenu} - onRowDoubleClicked={handleRowDoubleClick} - /> - ) : null} - - - {carousels - .filter((c) => !c.isHidden) - .map((carousel) => ( - - ))} - - + {showGenres ? ( + + + {detailQuery?.data?.genres?.map((genre) => ( + + ))} + + + ) : null} + {showBiography ? ( + + + About {detailQuery?.data?.name} + + + + ) : null} + {showTopSongs ? ( + + + + + Top Songs + + + + + data.data.uniqueId} + rowData={topSongs} + rowHeight={60} + rowSelection="multiple" + onCellContextMenu={handleContextMenu} + onRowDoubleClicked={handleRowDoubleClick} + /> + + ) : null} + + + {carousels + .filter((c) => !c.isHidden) + .map((carousel) => ( + + ))} + + + ); }; diff --git a/src/renderer/features/artists/routes/album-artist-detail-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-route.tsx index 1b369ce7..f3056f7d 100644 --- a/src/renderer/features/artists/routes/album-artist-detail-route.tsx +++ b/src/renderer/features/artists/routes/album-artist-detail-route.tsx @@ -58,7 +58,7 @@ const AlbumArtistDetailRoute = () => { ref={headerRef} background={background} /> - + ); diff --git a/src/renderer/features/player/components/full-screen-player.tsx b/src/renderer/features/player/components/full-screen-player.tsx index c16f72de..8ecbae91 100644 --- a/src/renderer/features/player/components/full-screen-player.tsx +++ b/src/renderer/features/player/components/full-screen-player.tsx @@ -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 = () => { diff --git a/src/renderer/features/playlists/components/playlist-detail-content.tsx b/src/renderer/features/playlists/components/playlist-detail-content.tsx index 56555979..2e03697b 100644 --- a/src/renderer/features/playlists/components/playlist-detail-content.tsx +++ b/src/renderer/features/playlists/components/playlist-detail-content.tsx @@ -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 { diff --git a/src/renderer/features/shared/components/library-background-overlay.tsx b/src/renderer/features/shared/components/library-background-overlay.tsx new file mode 100644 index 00000000..3b25c100 --- /dev/null +++ b/src/renderer/features/shared/components/library-background-overlay.tsx @@ -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; +`; diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx index 608e710a..bfb9941e 100644 --- a/src/renderer/features/shared/components/library-header.tsx +++ b/src/renderer/features/shared/components/library-header.tsx @@ -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 { diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss index 43dae5dd..23266e00 100644 --- a/src/renderer/themes/default.scss +++ b/src/renderer/themes/default.scss @@ -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); diff --git a/src/renderer/themes/light.scss b/src/renderer/themes/light.scss index 446e7257..756b155b 100644 --- a/src/renderer/themes/light.scss +++ b/src/renderer/themes/light.scss @@ -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); + } }