From c29351cb098007658959ea6feb584bc5cfdb310a Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Sun, 19 Jan 2025 16:41:43 +0530 Subject: [PATCH] Fix: Center align the custom media covers Fix: Do not hide labels on specific cards Fix: Border radius was getting reset on click on list items dev: Allow users to customise the My Media cover images --- Add-Ons.md | 91 +++++++++++++++++++ Theme/ElegantFin-theme-nightly.css | 57 ++++++++---- .../add-ons/custom-media-covers-nightly.css | 89 ++++++++++++++++++ 3 files changed, 219 insertions(+), 18 deletions(-) create mode 100644 Add-Ons.md create mode 100644 Theme/assets/add-ons/custom-media-covers-nightly.css diff --git a/Add-Ons.md b/Add-Ons.md new file mode 100644 index 0000000..e5214da --- /dev/null +++ b/Add-Ons.md @@ -0,0 +1,91 @@ +# Add-on: Custom media covers for ElegantFin +This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature. + + +#### **Author:** [lscambo13](https://github.com/lscambo13) + +
+ + +### 🖼️ Previews + +
+ Click here to reveal + + + +
+ +
+ +### 👇 How to setup this theme? + + +- To configure your theme to use the custom images, you'll need to input a URL pointing to an image in variables starting with '--url' and an overlay color in variables starting with '--color'. +- Default Jellyfin cover sizes are 960px x 540px. +- The colors should be in rgb format i.e. rbg(128, 128, 128). +- You should remove the entries you do not intend to modify. +- paste the following at the end in Custom CSS code box after making the necessary changes: + +''' + + @import url(""); + + :root{ + + + --colorOverlayMoviesCover: rgb(); + --colorOverlayTvshowsCover: rgb(); + --colorOverlayLivetvCover: rgb(); + --colorOverlayPlaylistsCover: rgb(); + --colorOverlayBoxsetsCover: rgb(); + --colorOverlayMusicCover: rgb(); + --colorOverlayHomevideosCover: rgb(); + --colorOverlayBooksCover: rgb(); + --colorOverlayFoldersCover: rgb(); + + + --urlMoviesCover: url(); + --urlTvshowsCover: url(); + --urlLivetvCover: url(); + --urlBoxsetsCover: url(); + --urlMusicCover: url(); + --urlHomevideosCover: url(); + --urlBooksCover: url(); + --urlFoldersCover: url(); +} + +''' + +Suppose you want to modify the Live TV cover art. You'll have to modify the variables --colorOverlayLivetvCover and --urlLivetvCover, so that your configuration will look something like this: +' + @import url(""); + + :root{ + --colorOverlayLivetvCover: rgb(39, 68, 185); + --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg); +} + +' +
+ Detailed steps for server-side implementation + +1. Open Dashboard from Administration tab in Settings. +2. Select General tab from the side bar. +3. Scroll down to find Custom CSS code box under Branding section. +4. Paste the custom css in Custom CSS code box. +5. Click save +
+ +
+ Detailed steps for client-side implementation + +1. Open Display tab in Settings. +2. Scroll down to find Custom CSS code box. +3. Paste the custom css in Custom CSS code box. +4. Click save. +
+ + +
+ diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index e70bea2..4063d31 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -1,5 +1,8 @@ /* ElegantFin Theme for Jellyfin by lscambo13 */ +/* Add-ons: Uncomment to enable */ +/* @import url(""); */ + @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); @font-face { @@ -39,8 +42,12 @@ --smallRadius: .5em; --smallerRadius: .375em; --borderWidth: 0.075em; + + /* login page customizations */ --loginPageBgUrl: url(""); --loginPageText: "Sign in to continue"; + + /* my media library default covers customizations */ --colorOverlayMoviesCover: rgb(193, 103, 104); --colorOverlayTvshowsCover: rgb(140, 149, 43); --colorOverlayLivetvCover: rgb(17, 98, 159); @@ -61,6 +68,19 @@ --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp); } +/* :root{ + --urlMoviesCover: url(https://artworks.thetvdb.com/banners/v4/movie/159/backgrounds/6328557507dd4.jpg); + --urlTvshowsCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/tvshows.webp); + --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg); + --urlPlaylistsCover: url(https://m.media-amazon.com/images/M/MV5BMzRjMjgwMTUtMjNiOS00ZWJlLWJkODktZTU5NmQ5Y2UxZDA3XkEyXkFqcGc@._V1_QL75_UX820_.jpg); + --urlBoxsetsCover: url(https://artworks.thetvdb.com/banners/v4/movie/155/backgrounds/671ae49f9c44f.jpg); + --urlMusicCover: url(https://artworks.thetvdb.com/banners/v4/movie/223419/backgrounds/614203ff892f8.jpg); + --urlHomevideosCover: url(https://artworks.thetvdb.com/banners/v4/movie/132448/backgrounds/646b4c94e9b29.jpg); + --urlBooksCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/books.webp); + --urlFoldersCover: url(https://raw.githubusercontent.com/lscambo13/ElegantFin/refs/heads/main/Theme/assets/img/library-covers/folders.webp); +} */ + + html { font-family: "Inter", serif; font-optical-sizing: auto; @@ -1170,6 +1190,7 @@ div[data-role=controlgroup] a.ui-btn-active { .listItem:hover, .navMenuOption:hover { background: unset; + border-radius: var(--smallRadius); } .listItem:active, @@ -1757,28 +1778,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { text-align: left; } -div[data-isfolder="true"] .cardPadder-overflowBackdrop { +.card-withuserdata[data-isfolder="true"] .cardPadder-overflowBackdrop { padding-bottom: 50%; } -div[data-isfolder="true"] .cardText-first { - display: none; -} - -div[data-isfolder="true"] .cardImageIcon.material-icons::before { - display: none; -} - -/* To override images on all, use .cardContent instead of .defaultCardBackground */ -/* Default Jellyfin cover sizes are 960px x 540px */ - -div[data-isfolder="true"] .cardImageContainer.defaultCardBackground::before { +.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent::before { position: absolute; font-size: 3.5vh; margin-bottom: .175em; font-weight: 800; color: white; font-family: 'Noto Sans'; + text-align: center; +} + +.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardText-first, +.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardText.cardTextCentered, +.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) .cardImageIcon.material-icons:not(.quiz)::before { + display: none; +} + +.padded-right-withalphapicker .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"],[data-type="Series"],[data-type="Folder"]) { + margin-bottom: -1.5em; } div[data-collectiontype="movies"] .cardImageContainer.defaultCardBackground { @@ -1826,10 +1847,10 @@ div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground { background-image: var(--urlPlaylistsCover) !important; } -div[data-isfolder="true"] .cardImageContainer.defaultCardBackground { +.card-withuserdata[data-isfolder="true"] .cardImageContainer.defaultCardBackground { filter: contrast(0.85); background-size: cover !important; - background-position-y: 50% !important; + background-position: 50% !important; background-blend-mode: multiply; } @@ -1869,7 +1890,7 @@ div[data-collectiontype="playlists"] .cardImageContainer.defaultCardBackground:: content: "Playlists"; } -div[data-collectiontype="movies"] .cardImageContainer, +/* div[data-collectiontype="movies"] .cardImageContainer, div[data-collectiontype="tvshows"] .cardImageContainer, div[data-collectiontype="livetv"] .cardImageContainer, div[data-collectiontype="boxsets"] .cardImageContainer, @@ -1878,5 +1899,5 @@ div[data-collectiontype="folders"] .cardImageContainer, div[data-collectiontype="books"] .cardImageContainer, div[data-collectiontype="homevideos"] .cardImageContainer, div[data-collectiontype="music"] .cardImageContainer { - /* mix-blend-mode: color-dodge; */ -} \ No newline at end of file + mix-blend-mode: color-dodge; +} */ \ No newline at end of file diff --git a/Theme/assets/add-ons/custom-media-covers-nightly.css b/Theme/assets/add-ons/custom-media-covers-nightly.css new file mode 100644 index 0000000..eeda3c9 --- /dev/null +++ b/Theme/assets/add-ons/custom-media-covers-nightly.css @@ -0,0 +1,89 @@ +/* Add-on: Custom media covers for the ElegantFin Theme for Jellyfin by lscambo13 */ + +div[data-collectiontype="movies"] .cardImageContainer.cardContent { + background: var(--colorOverlayMoviesCover) !important; + background-image: var(--urlMoviesCover) !important; +} + +div[data-collectiontype="tvshows"] .cardImageContainer.cardContent { + background: var(--colorOverlayTvshowsCover) !important; + background-image: var(--urlTvshowsCover) !important; +} + +div[data-collectiontype="livetv"] .cardImageContainer.cardContent { + background: var(--colorOverlayLivetvCover) !important; + background-image: var(--urlLivetvCover) !important; +} + +div[data-collectiontype="music"] .cardImageContainer.cardContent { + background: var(--colorOverlayMusicCover) !important; + background-image: var(--urlMusicCover) !important; +} + +div[data-collectiontype="homevideos"] .cardImageContainer.cardContent { + background: var(--colorOverlayHomevideosCover) !important; + background-image: var(--urlHomevideosCover) !important; +} + +div[data-collectiontype="books"] .cardImageContainer.cardContent { + background: var(--colorOverlayBooksCover) !important; + background-image: var(--urlBooksCover) !important; +} + +div[data-collectiontype="boxsets"] .cardImageContainer.cardContent { + background: var(--colorOverlayBoxsetsCover) !important; + background-image: var(--urlBoxsetsCover) !important; +} + +div[data-collectiontype="folders"] .cardImageContainer.cardContent { + background: var(--colorOverlayFoldersCover) !important; + background-image: var(--urlFoldersCover) !important; +} + +div[data-collectiontype="playlists"] .cardImageContainer.cardContent { + background: var(--colorOverlayPlaylistsCover) !important; + background-image: var(--urlPlaylistsCover) !important; +} + +.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent { + filter: contrast(0.85); + background-size: cover !important; + background-position: 50% !important; + background-blend-mode: multiply; +} + +div[data-collectiontype="movies"] .cardImageContainer.cardContent::before { + content: "Movies"; +} + +div[data-collectiontype="tvshows"] .cardImageContainer.cardContent::before { + content: "TV Shows"; +} + +div[data-collectiontype="livetv"] .cardImageContainer.cardContent::before { + content: "Live TV"; +} + +div[data-collectiontype="music"] .cardImageContainer.cardContent::before { + content: "Music"; +} + +div[data-collectiontype="homevideos"] .cardImageContainer.cardContent::before { + content: "Home Videos"; +} + +div[data-collectiontype="books"] .cardImageContainer.cardContent::before { + content: "Books"; +} + +div[data-collectiontype="boxsets"] .cardImageContainer.cardContent::before { + content: "Collections"; +} + +div[data-collectiontype="folders"] .cardImageContainer.cardContent::before { + content: "Folders"; +} + +div[data-collectiontype="playlists"] .cardImageContainer.cardContent::before { + content: "Playlists"; +} \ No newline at end of file