From 92d885dd78eb025f4f95d4a7bd236cd7c3ea630f Mon Sep 17 00:00:00 2001 From: Zak Saunders Date: Mon, 5 Dec 2022 07:58:24 +0000 Subject: [PATCH] Fixup Theme CSS --- frontend/src/Album/Details/AlbumDetailsMedium.css | 4 ++-- frontend/src/AlbumStudio/AlbumStudioAlbum.css | 4 ++-- .../Artist/Index/Banners/ArtistIndexBannerInfo.css | 2 +- .../src/Artist/Index/Posters/ArtistIndexPoster.css | 4 ++-- .../Artist/Index/Posters/ArtistIndexPosterInfo.css | 2 +- .../src/Search/Album/AddNewAlbumSearchResult.css | 2 +- .../src/Search/Artist/AddNewArtistSearchResult.css | 6 ++++-- frontend/src/Styles/Themes/dark.js | 12 ++++++------ frontend/src/Styles/Themes/light.js | 12 ++++++------ frontend/src/TrackFile/ExpandingFileDetails.css | 2 +- 10 files changed, 26 insertions(+), 24 deletions(-) diff --git a/frontend/src/Album/Details/AlbumDetailsMedium.css b/frontend/src/Album/Details/AlbumDetailsMedium.css index 865d84a0a..c488fa4a5 100644 --- a/frontend/src/Album/Details/AlbumDetailsMedium.css +++ b/frontend/src/Album/Details/AlbumDetailsMedium.css @@ -2,7 +2,7 @@ margin-bottom: 20px; border: 1px solid var(--borderColor); border-radius: 4px; - background-color: var(--white); + background-color: var(--modalBackgroundColor); &:last-of-type { margin-bottom: 0; @@ -81,7 +81,7 @@ border-top: 1px solid var(--borderColor); border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; - background-color: #fafafa; + background-color: var(--cardBackgroundColor); text-align: center; } diff --git a/frontend/src/AlbumStudio/AlbumStudioAlbum.css b/frontend/src/AlbumStudio/AlbumStudioAlbum.css index d412e1d49..791bb9f9b 100644 --- a/frontend/src/AlbumStudio/AlbumStudioAlbum.css +++ b/frontend/src/AlbumStudio/AlbumStudioAlbum.css @@ -5,7 +5,7 @@ margin: 2px 4px; border: 1px solid var(--borderColor); border-radius: 4px; - background-color: var(--seasonBackgroundColor); + background-color: var(--albumBackgroundColor); cursor: default; } @@ -24,7 +24,7 @@ .tracks { padding: 0 4px; - background-color: var(--episodesBackgroundColor); + background-color: var(--trackBackgroundColor); color: var(--defaultColor); } diff --git a/frontend/src/Artist/Index/Banners/ArtistIndexBannerInfo.css b/frontend/src/Artist/Index/Banners/ArtistIndexBannerInfo.css index 17741773d..22ed2d528 100644 --- a/frontend/src/Artist/Index/Banners/ArtistIndexBannerInfo.css +++ b/frontend/src/Artist/Index/Banners/ArtistIndexBannerInfo.css @@ -1,5 +1,5 @@ .info { - background-color: var(--seriesBackgroundColor); + background-color: var(--artistBackgroundColor); text-align: center; font-size: $smallFontSize; } diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css b/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css index 8e691c74b..33f81db64 100644 --- a/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css +++ b/frontend/src/Artist/Index/Posters/ArtistIndexPoster.css @@ -44,7 +44,7 @@ $hoverScale: 1.05; } .nextAiring { - background-color: var(--seriesBackgroundColor); + background-color: var(--artistBackgroundColor); text-align: center; font-size: $smallFontSize; } @@ -52,7 +52,7 @@ $hoverScale: 1.05; .title { @add-mixin truncate; - background-color: var(--seriesBackgroundColor); + background-color: var(--artistBackgroundColor); text-align: center; font-size: $smallFontSize; } diff --git a/frontend/src/Artist/Index/Posters/ArtistIndexPosterInfo.css b/frontend/src/Artist/Index/Posters/ArtistIndexPosterInfo.css index aab27d827..22ed2d528 100644 --- a/frontend/src/Artist/Index/Posters/ArtistIndexPosterInfo.css +++ b/frontend/src/Artist/Index/Posters/ArtistIndexPosterInfo.css @@ -1,5 +1,5 @@ .info { - background-color: #fafbfc; + background-color: var(--artistBackgroundColor); text-align: center; font-size: $smallFontSize; } diff --git a/frontend/src/Search/Album/AddNewAlbumSearchResult.css b/frontend/src/Search/Album/AddNewAlbumSearchResult.css index 28ad1f2d1..5af11bac0 100644 --- a/frontend/src/Search/Album/AddNewAlbumSearchResult.css +++ b/frontend/src/Search/Album/AddNewAlbumSearchResult.css @@ -9,7 +9,7 @@ .underlay { @add-mixin cover; - background-color: var(--addSeriesBackgroundColor); + background-color: var(--addArtistBackgroundColor); transition: background 500ms; &:hover { diff --git a/frontend/src/Search/Artist/AddNewArtistSearchResult.css b/frontend/src/Search/Artist/AddNewArtistSearchResult.css index 3ff77ddc7..b3be02d45 100644 --- a/frontend/src/Search/Artist/AddNewArtistSearchResult.css +++ b/frontend/src/Search/Artist/AddNewArtistSearchResult.css @@ -9,13 +9,15 @@ .underlay { @add-mixin cover; - background-color: var(--white); + background-color: var(--addArtistBackgroundColor); transition: background 500ms; &:hover { - background-color: #eaf2ff; + background-color: var(--pageBackground); + box-shadow: 0 0 12px var(--black); color: inherit; text-decoration: none; + transition: all 200ms ease-in; } } diff --git a/frontend/src/Styles/Themes/dark.js b/frontend/src/Styles/Themes/dark.js index f5f380690..ae7bcf56d 100644 --- a/frontend/src/Styles/Themes/dark.js +++ b/frontend/src/Styles/Themes/dark.js @@ -218,18 +218,18 @@ module.exports = { tableRowHoverBackgroundColor: 'rgba(255, 255, 255, 0.08)', // - // Series + // Srtist - addSeriesBackgroundColor: '#2a2a2a', - seriesBackgroundColor: '#2a2a2a', + addArtistBackgroundColor: '#2a2a2a', + artistBackgroundColor: '#2a2a2a', searchIconContainerBackgroundColor: '#2b2b2b', collapseButtonBackgroundColor: '#2a2a2a', // - // Season + // Album - seasonBackgroundColor: '#424242', - episodesBackgroundColor: '#2a2a2a', + albumBackgroundColor: '#424242', + trackBackgroundColor: '#2a2a2a', // // misc diff --git a/frontend/src/Styles/Themes/light.js b/frontend/src/Styles/Themes/light.js index 3f8dc8b44..4c8bcc5bd 100644 --- a/frontend/src/Styles/Themes/light.js +++ b/frontend/src/Styles/Themes/light.js @@ -212,18 +212,18 @@ module.exports = { tableRowHoverBackgroundColor: '#fafbfc', // - // Series + // Atist - addSeriesBackgroundColor: '#ededed', - seriesBackgroundColor: '#ededed', + addArtistBackgroundColor: '#ededed', + artistBackgroundColor: '#ededed', searchIconContainerBackgroundColor: offWhite, collapseButtonBackgroundColor: offWhite, // - // Season + // Album - seasonBackgroundColor: white, - episodesBackgroundColor: offWhite, + albumBackgroundColor: white, + trackBackgroundColor: offWhite, // // misc diff --git a/frontend/src/TrackFile/ExpandingFileDetails.css b/frontend/src/TrackFile/ExpandingFileDetails.css index aa2b038a9..23af8caf7 100644 --- a/frontend/src/TrackFile/ExpandingFileDetails.css +++ b/frontend/src/TrackFile/ExpandingFileDetails.css @@ -2,7 +2,7 @@ margin-bottom: 20px; border: 1px solid var(--borderColor); border-radius: 4px; - background-color: var(--white); + background-color: var(--cardBackgroundColor); &:last-of-type { margin-bottom: 0;