diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..c3c6ffc --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +{ "useTabs": false, "tabWidth": 4, "printWidth": 120 } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9bf4d12 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true +} diff --git a/README.md b/README.md index 7a98b19..a646870 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -ElegantFin Theme for Jellyfin - Banner +ElegantFin Theme for Jellyfin - Banner
@@ -45,53 +45,53 @@ Captured on ElegantFin v25.08.02
💻 Desktop and 📱 Mobile Screenshots -| Desktop | Mobile | -| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -|

Login Page
|
| -|

Homepage
|
| -|

Movies Library
|
| -|

Movie Page
|
| -|

Movie Details
|
| -|

TV Show Page
|
| -|

TV Episode Page
|
| -|

TV Show Seasons
|
| -|

Web Player
|
| -|

Cast Page
|
| -|

Artist Page
|
| -|

Music Player
|
| -|

Book Page
|
| -|

Sidebar
|
| -|

Extra Dialog
|
| -|

Settings Page
|
| -|

Metadata Menu
|
| -|

Dashboard Settings
|
| -|

Live TV Page
|
| -|

Live TV Guide
|
| +| Desktop | Mobile | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | +|

Login Page
|
| +|

Homepage
|
| +|

Movies Library
|
| +|

Movie Page
|
| +|

Movie Details
|
| +|

TV Show Page
|
| +|

TV Episode Page
|
| +|

TV Show Seasons
|
| +|

Web Player
|
| +|

Cast Page
|
| +|

Artist Page
|
| +|

Music Player
|
| +|

Book Page
|
| +|

Sidebar
|
| +|

Extra Dialog
|
| +|

Settings Page
|
| +|

Metadata Menu
|
| +|

Dashboard Settings
|
| +|

Live TV Page
|
| +|

Live TV Guide
|
|
📺 TV Screenshots -| TV View | -| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -|

Login Page
| -|

Homepage
| -|

Movies Library
| -|

Movie Page
| -|

Extra Dialog
| -|

Settings Page
| -|

Web Player
| -|

TV Show Page
| -|

Movie Details
| -|

Book Page
| -|

Artist Page
| -|

Music Player
| -|

TV Show Seasons
| -|

Cast Page
| -|

TV Episode Page
| -|

Live TV Page
| -|

Live TV Guide
| +| TV View | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +|

Login Page
| +|

Homepage
| +|

Movies Library
| +|

Movie Page
| +|

Extra Dialog
| +|

Settings Page
| +|

Web Player
| +|

TV Show Page
| +|

Movie Details
| +|

Book Page
| +|

Artist Page
| +|

Music Player
| +|

TV Show Seasons
| +|

Cast Page
| +|

TV Episode Page
| +|

Live TV Page
| +|

Live TV Guide
|
@@ -103,26 +103,30 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390 Paste the following in Custom CSS code box: - @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css"); +```css +@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css"); +```
Detailed steps for server-side implementation - -1. Open Dashboard from Administration tab in Settings. -2. From the side bar, select the Branding tab if you are on Jellyfin 10.11.X or the General tab on older version. -3. Scroll down to find Custom CSS code box. -4. Paste the custom css in Custom CSS code box. -5. Click save -
+ +> 1. Open Dashboard from Administration tab in Settings. +> 2. From the side bar, select the Branding tab if you are on Jellyfin 10.11 or above. +> 3. Scroll down to find Custom CSS code box. +> 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. -
+ +> 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. +> +
@@ -131,158 +135,156 @@ https://github.com/user-attachments/assets/bb7f3174-b703-4c98-a23c-e6bb4abba390
1. Custom media covers for user media libraries -image - -- Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md) +> image +> +> - Read more about this experimental add-on [here](custom-media-covers.md)
2. Custom background image for the login page -image -image +> image +> image +> +> - Note: this customisation is not needed on Jellyfin 10.11.X anymore +> - On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box. +> - Second, copy and paste the following code at the end in Custom CSS box but don't save yet. +> ```css +> :root { +> --loginPageBgUrl: url("/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2"); +> } +> ``` +> - Third, replace `` with your Jellyfin server address, for example, `http://192.168.0.1:8096`. +> - Don't forget the correct http or https in your domain. +> - You can also modify the parameters, for example blur size or the resolution, according to your liking. +> - Once done, save and refresh your apps and webpages. -- Note: this customisation is not needed on Jellyfin 10.11.X anymore - -- On older Jellyfin versions, to enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box. -- Second, copy and paste the following code at the end in Custom CSS box but don't save yet. - ``` - :root{ - --loginPageBgUrl: url("/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2"); - } - ``` -- Third, replace `` with your Jellyfin server address, for example, `http://192.168.0.1:8096`. -- Don't forget the correct http or https in your domain. -- You can also modify the parameters, for example blur size or the resolution, according to your liking. -- Once done, save and refresh your apps and webpages. -
+
3. Enable or disable extra overlay buttons on cards on desktop - image +> image +> +> - To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. +> ```css +> :root { +> --extraCardButtonsVisibility: block; +> } +> ``` +> - To hide the three-dot button that shows up next to these buttons, also include `--menuButtonVisibility: none;` in `:root{}` +> - To undo these changes, simply remove this code block or switch between `block` and `none`. -- To enable 'Mark Played' and 'Add to Favorites' buttons that show up at the bottom right corner of cards while hovering, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. - ``` - :root{ - --extraCardButtonsVisibility: block; - } - ``` -- To hide the three-dot button that shows up next to these buttons, also include `--menuButtonVisibility: none;` in `:root{}` -- To undo these changes, simply remove this code block or switch between `block` and `none`. -
+
4. Place the overlay play button at the center of cards on desktop - - image - -- To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. - ``` - :root{ - --overlayPlayButtonPosition: 50%; - } - ``` -- To undo this change, simply remove this code block or replace `50%` with `2.8em`. -
+ +> image +> +> - To bring the mini play button to the center of cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. +> ```css +> :root{ +> --overlayPlayButtonPosition: 50%; +> } +> ``` +> - To undo this change, simply remove this code block or replace `50%` with `2.8em`. + +
5. Disable the card shinning effect on hover on desktop - -https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd - -- To disable the shine on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. - -``` - :root{ - --cardHoverEffect: none; - } -``` - -- To undo this change, simply remove this code block or replace `none` with `""`. -
+ +> https://github.com/user-attachments/assets/ac22440d-39d7-48d6-a8da-3b7777372ffd +> +> - To disable the shine on cards that shows when hovering over them on desktop, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. +> ```css +> :root{ +> --cardHoverEffect: none; +> } +> ``` +> - To undo this change, simply remove this code block or replace `none` with `""`. + +
6. Enable labels below library cards - - image - -- To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. - -``` - :root{ - --libraryLabelVisibility: block; - } -``` - -- To undo this change, simply remove this code block or replace `block` with `none`. -
+ +> image +> +> - To enable text labels under the media library cards, copy and paste the following code at the end in Custom CSS box, click save and finally refresh your app/webpage. +> ```css +> :root{ +> --libraryLabelVisibility: block; +> } +> ``` +> - To undo this change, simply remove this code block or replace `block` with `none`. + +
7. Enable alternative style for the Media Bar plugin - - image - -- ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code right after the main import in Custom CSS box, click save and finally refresh your app/webpage. - -``` - @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css"); -``` - -- To undo this change, simply remove this code block. -
+ +> image +> +> - ElegantFin does not support any plugins by default, so to to add external support for [this plugin](https://github.com/IAmParadox27/jellyfin-plugin-media-bar), copy and paste the following code right after the main import in Custom CSS box, click save and finally refresh your app/webpage. +> ```css +> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/media-bar-plugin-support-latest-min.css"); +> ``` +> - To undo this change, simply remove this code block. + +
8. Switch between different app bar styles - -https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56 - -- You can switch between these using `--appBarHeight`. -- Use 5em to enable the fading app bar (seamless) (default); -- Or, use 4.6em to get the solid app bar (cleaner with border) - -``` -:root{ - /* example */ - --appBarHeight: 4.6em; -} -``` - -- To undo this change, simply remove this code block. -
+ +> https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56 +> +> - You can switch between these using `--appBarHeight`. +> - Use 5em to enable the fading app bar (seamless) (default); +> - Or, use 4.6em to get the solid app bar (cleaner with border) +> ```css +> :root{ +> /* example */ +> --appBarHeight: 4.6em; +> } +> ``` +> - To undo this change, simply remove this code block. + +
9. Change to alternative color themes - - image - -- Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes. -- You can also experiment and share your own take there if you wish. -
+ +> image +> +> - Check out the [the theme Playground page](https://github.com/lscambo13/ElegantFin/discussions/221) for different color themes. +> - You can also experiment and share your own take there if you wish. + +
10. Increase the size of Continue Watching cards so that they stand out - -image - -- You can adjust their scaling `--resumeCardScale`. -- Use any values over 1.0 to make them bigger. - -``` -:root{ - --resumeCardScale: 1.25; -} -``` - -- To undo this change, simply remove this code block or set the value back to `1`. -
+ +> image +> +> - You can adjust their scaling `--resumeCardScale`. +> - Use any values over 1.0 to make them bigger. +> ```css +> :root{ +> --resumeCardScale: 1.25; +> } +> ``` +> - To undo this change, simply remove this code block or set the value back to `1`. + +
### 🆗 Tested on -- Jellyfin Server v10.11.10 +- Jellyfin Server v10.11.11 - Microsoft Edge (Chromium) - Jellyfin Android App v2.6.3 @@ -292,63 +294,68 @@ https://github.com/user-attachments/assets/b5868cd2-8df9-490d-a2b6-4386c6ddcd56
1️⃣ - How do I check which version of ElegantFin I am using? - -- Check the version number at the bottom in the Settings screen. -- It should be something like `ElegantFin v26.YY.ZZ`. - -image - - + +> - Check the version number at the bottom in the Settings screen. +> - It should be something like `ElegantFin v26.YY.ZZ`. +> +> image +
2️⃣ - I see that a newer version is available, but I have not received it yet. Why? - -- If the Settings footer shows an old version, it means that you are still using an old cache. -- Once that cache is updated, the new version will be loaded automatically. -- There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know. -- On the web version, you can force a hard refresh of the page using CTRL + F5. -- On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. -
+ +> - If the Settings footer shows an old version, it means that you are still using an old cache. +> - Once that cache is updated, the new version will be loaded automatically. +> - There are multiple ways to clear the cache depending on your OS, smartphone or TV. Look online if you don't know. +> - On the web version, you can force a hard refresh of the page using CTRL + F5. +> - On apps, try signing out and back in again. OR in case of Jellyfin Media Player on windows, you might need to delete the cache folder. + +
3️⃣ - Why do I notice visual bugs and inconsistencies on Jellyfin Media Player? - -- JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported. -- [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead. -
+ +> - JMP is based on Qt 5.x which uses a very outdated web engine. It does not support many new CSS features, so it is unsupported. +> - [Jellyfin Desktop](https://github.com/jellyfin/jellyfin-desktop) is the new official client moving forward. It seems to be in testing right now. Use it for better compatibility or use the web app instead. + +
4️⃣ - Does it work on the AndroidTV version of the Jellyfin app? - -- As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine. -
+ +> - As of version 0.18.11, the official Jellyfin app on the AndroidTVs does not support css themes, but the Android mobile phone app supports them. The WebOS version of the app seems to be based on the mobile phone version, so it supports the theme just fine. + +
5️⃣ - All the icons on my LG TV seem to be broken. How to fix them? - -- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this. -- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons. -- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages: - ``` - :root{ - --iconPack: 'Material Icons'; - } - ``` -
+ +> - It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this. +> - This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons. +> - Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages: +> ```css +> :root{ +> --iconPack: 'Material Icons'; +> } +> ``` + +
6️⃣ - How do I report bugs/issues? - -- First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. -- Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose). - + +> - First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. +> - Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose). +
+
7️⃣ - When can I expect another update? + +> - 🤷 -- 🤷 -
+
diff --git a/custom-media-covers.md b/custom-media-covers.md index 62e6161..ca34c81 100644 --- a/custom-media-covers.md +++ b/custom-media-covers.md @@ -11,148 +11,149 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This
This is how the covers look without this add-on. -![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6) +> ![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6)
This is how they look with this add-on, by default. -![image](https://github.com/user-attachments/assets/5284af32-3b2e-4150-938c-f6d0fdfddf06) - -``` -@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); -``` +> ![image](https://github.com/user-attachments/assets/5284af32-3b2e-4150-938c-f6d0fdfddf06) +> +> ```css +> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); +> ```
You can also change these covers. -![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79) +> ![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79) +>
You can achieve a minimal design too. -![Screenshot 2025-01-19 192133](https://github.com/user-attachments/assets/daaefe74-d3a9-4bb4-8389-9605a4364372) - -``` -@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); - -:root{ - --colorOverlayMoviesCover: transparent; - --colorOverlayTvshowsCover: transparent; - --colorOverlayLivetvCover: transparent; - --colorOverlayPlaylistsCover: transparent; - --colorOverlayBoxsetsCover: transparent; - --colorOverlayMusicCover: transparent; - --colorOverlayHomevideosCover: transparent; - --colorOverlayBooksCover: transparent; - --colorOverlayFoldersCover: transparent; - --colorOverlayMixedCover: transparent; - --colorOverlayRecordedmoviesCover: transparent; - --colorOverlayRecordedtvCover: transparent; - --colorOverlayAnimeCover: transparent; - --colorOverlaySportsCover: transparent; - --urlMoviesCover: transparent; - --urlTvshowsCover: transparent; - --urlLivetvCover: transparent; - --urlPlaylistsCover: transparent; - --urlBoxsetsCover: transparent; - --urlMusicCover: transparent; - --urlHomevideosCover: transparent; - --urlBooksCover: transparent; - --urlFoldersCover: transparent; - --urlMixedCover: transparent; - --urlRecordedmoviesCover: transparent; - --urlRecordedtvCover: transparent; - --urlAnimeCover: transparent; - --urlSportsCover: transparent; -} -``` - -
- -![Screenshot 2025-01-19 192505](https://github.com/user-attachments/assets/256718f2-67ca-4fbd-8407-e41803380174) - -``` -@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); - -:root{ - --colorOverlayMoviesCover: transparent; - --colorOverlayTvshowsCover: transparent; - --colorOverlayLivetvCover: transparent; - --colorOverlayPlaylistsCover: transparent; - --colorOverlayBoxsetsCover: transparent; - --colorOverlayMusicCover: transparent; - --colorOverlayHomevideosCover: transparent; - --colorOverlayBooksCover: transparent; - --colorOverlayFoldersCover: transparent; - --colorOverlayMixedCover: transparent; - --colorOverlayRecordedmoviesCover: transparent; - --colorOverlayRecordedtvCover: transparent; - --colorOverlayAnimeCover: transparent; - --colorOverlaySportsCover: transparent; - --urlMoviesCover: var(--cardBackgroundGradient); - --urlTvshowsCover: var(--cardBackgroundGradient); - --urlLivetvCover: var(--cardBackgroundGradient); - --urlPlaylistsCover: var(--cardBackgroundGradient); - --urlBoxsetsCover: var(--cardBackgroundGradient); - --urlMusicCover: var(--cardBackgroundGradient); - --urlHomevideosCover: var(--cardBackgroundGradient); - --urlBooksCover: var(--cardBackgroundGradient); - --urlFoldersCover: var(--cardBackgroundGradient); - --urlMixedCover: var(--cardBackgroundGradient); - --urlRecordedmoviesCover: var(--cardBackgroundGradient); - --urlRecordedtvCover: var(--cardBackgroundGradient); - --urlAnimeCover: var(--cardBackgroundGradient); - --urlSportsCover: var(--cardBackgroundGradient); -} -``` +> ![Screenshot 2025-01-19 192133](https://github.com/user-attachments/assets/daaefe74-d3a9-4bb4-8389-9605a4364372) +> +> ```css +> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); +> +> :root { +> --colorOverlayMoviesCover: transparent; +> --colorOverlayTvshowsCover: transparent; +> --colorOverlayLivetvCover: transparent; +> --colorOverlayPlaylistsCover: transparent; +> --colorOverlayBoxsetsCover: transparent; +> --colorOverlayMusicCover: transparent; +> --colorOverlayHomevideosCover: transparent; +> --colorOverlayBooksCover: transparent; +> --colorOverlayFoldersCover: transparent; +> --colorOverlayMixedCover: transparent; +> --colorOverlayRecordedmoviesCover: transparent; +> --colorOverlayRecordedtvCover: transparent; +> --colorOverlayAnimeCover: transparent; +> --colorOverlaySportsCover: transparent; +> --urlMoviesCover: transparent; +> --urlTvshowsCover: transparent; +> --urlLivetvCover: transparent; +> --urlPlaylistsCover: transparent; +> --urlBoxsetsCover: transparent; +> --urlMusicCover: transparent; +> --urlHomevideosCover: transparent; +> --urlBooksCover: transparent; +> --urlFoldersCover: transparent; +> --urlMixedCover: transparent; +> --urlRecordedmoviesCover: transparent; +> --urlRecordedtvCover: transparent; +> --urlAnimeCover: transparent; +> --urlSportsCover: transparent; +> } +> ``` +> +>
+> +> ![Screenshot 2025-01-19 192505](https://github.com/user-attachments/assets/256718f2-67ca-4fbd-8407-e41803380174) +> +> ```css +> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); +> +> :root { +> --colorOverlayMoviesCover: transparent; +> --colorOverlayTvshowsCover: transparent; +> --colorOverlayLivetvCover: transparent; +> --colorOverlayPlaylistsCover: transparent; +> --colorOverlayBoxsetsCover: transparent; +> --colorOverlayMusicCover: transparent; +> --colorOverlayHomevideosCover: transparent; +> --colorOverlayBooksCover: transparent; +> --colorOverlayFoldersCover: transparent; +> --colorOverlayMixedCover: transparent; +> --colorOverlayRecordedmoviesCover: transparent; +> --colorOverlayRecordedtvCover: transparent; +> --colorOverlayAnimeCover: transparent; +> --colorOverlaySportsCover: transparent; +> --urlMoviesCover: var(--cardBackgroundGradient); +> --urlTvshowsCover: var(--cardBackgroundGradient); +> --urlLivetvCover: var(--cardBackgroundGradient); +> --urlPlaylistsCover: var(--cardBackgroundGradient); +> --urlBoxsetsCover: var(--cardBackgroundGradient); +> --urlMusicCover: var(--cardBackgroundGradient); +> --urlHomevideosCover: var(--cardBackgroundGradient); +> --urlBooksCover: var(--cardBackgroundGradient); +> --urlFoldersCover: var(--cardBackgroundGradient); +> --urlMixedCover: var(--cardBackgroundGradient); +> --urlRecordedmoviesCover: var(--cardBackgroundGradient); +> --urlRecordedtvCover: var(--cardBackgroundGradient); +> --urlAnimeCover: var(--cardBackgroundGradient); +> --urlSportsCover: var(--cardBackgroundGradient); +> } +> ```
Need something in between? -![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f) - -``` -@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); - -:root{ - --colorOverlayMoviesCover: rgb(193, 103, 104); - --colorOverlayTvshowsCover: rgb(140, 149, 43); - --colorOverlayLivetvCover: rgb(17, 98, 159); - --colorOverlayPlaylistsCover: rgb(118, 61, 216); - --colorOverlayBoxsetsCover: rgb(219, 180, 53); - --colorOverlayMusicCover: rgb(11, 93, 72); - --colorOverlayHomevideosCover: rgb(39, 90, 185); - --colorOverlayBooksCover: rgb(166, 68, 70); - --colorOverlayFoldersCover: rgb(173, 60, 113); - --colorOverlayMixedCover: rgb(194, 58, 58); - --colorOverlayRecordedmoviesCover: rgb(52, 52, 52); - --colorOverlayRecordedtvCover: rgb(120, 100, 28); - --colorOverlayAnimeCover: rgb(189, 203, 99); - --colorOverlaySportsCover: rgb(233, 126, 60); - --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%); - --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%); - --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%); - --urlPlaylistsCover: linear-gradient(0deg, #313131, #585858 25%); - --urlBoxsetsCover: linear-gradient(0deg, #313131, #585858 25%); - --urlMusicCover: linear-gradient(0deg, #313131, #585858 25%); - --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%); - --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%); - --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%); - --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%); - --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%); - --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%); - --urlAnimeCover: linear-gradient(0deg, #313131, #585858 25%); - --urlSportsCover: linear-gradient(0deg, #313131, #585858 25%); -} -``` +> ![image](https://github.com/user-attachments/assets/6975a5ef-4824-4807-9afa-434fc3ebaf6f) +> +> ```css +> @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); +> +> :root { +> --colorOverlayMoviesCover: rgb(193, 103, 104); +> --colorOverlayTvshowsCover: rgb(140, 149, 43); +> --colorOverlayLivetvCover: rgb(17, 98, 159); +> --colorOverlayPlaylistsCover: rgb(118, 61, 216); +> --colorOverlayBoxsetsCover: rgb(219, 180, 53); +> --colorOverlayMusicCover: rgb(11, 93, 72); +> --colorOverlayHomevideosCover: rgb(39, 90, 185); +> --colorOverlayBooksCover: rgb(166, 68, 70); +> --colorOverlayFoldersCover: rgb(173, 60, 113); +> --colorOverlayMixedCover: rgb(194, 58, 58); +> --colorOverlayRecordedmoviesCover: rgb(52, 52, 52); +> --colorOverlayRecordedtvCover: rgb(120, 100, 28); +> --colorOverlayAnimeCover: rgb(189, 203, 99); +> --colorOverlaySportsCover: rgb(233, 126, 60); +> --urlMoviesCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlTvshowsCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlLivetvCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlPlaylistsCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlBoxsetsCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlMusicCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlHomevideosCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlBooksCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlFoldersCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlMixedCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlRecordedmoviesCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlRecordedtvCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlAnimeCover: linear-gradient(0deg, #313131, #585858 25%); +> --urlSportsCover: linear-gradient(0deg, #313131, #585858 25%); +> } +> ```
@@ -160,9 +161,9 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This ### 👇 How to enable this add-on? -- Paste the following right after the main ElegantFin import in the Custom CSS code box: +- Paste the following right after the main ElegantFin import in the Custom CSS code box: -``` +```css @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); ``` @@ -170,74 +171,67 @@ This is a Jellyfin add-on that allows you to customise My Media cover arts. This ### ⚙️ How to configure this add-on? -- Remember, you do not need to configure anything if you're happy with the default set of images. +- Remember, you do not need to configure anything if you're happy with the default set of images.
Click here to reveal. -- 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'. - -- The ideal Jellyfin cover sizes are `960px x 540px`, and the colors can be in rgb format i.e. `rbg(128, 128, 128)`. - -- Below are all the configurable variables, but you should remove the entries you do not intend to modify: - -``` +> - 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'. +> +> - The ideal Jellyfin cover sizes are `960px x 540px`, and the colors can be in rgb format i.e. `rbg(128, 128, 128)`. +> +> - Below are all the configurable variables, but you should remove the entries you do not intend to modify: +> +> ```css +> :root{ +> +> --colorOverlayMoviesCover: rgb(); +> --colorOverlayTvshowsCover: rgb(); +> --colorOverlayLivetvCover: rgb(); +> --colorOverlayPlaylistsCover: rgb(); +> --colorOverlayBoxsetsCover: rgb(); +> --colorOverlayMusicCover: rgb(); +> --colorOverlayHomevideosCover: rgb(); +> --colorOverlayBooksCover: rgb(); +> --colorOverlayFoldersCover: rgb(); +> --colorOverlayMixedCover: rgb(); +> --colorOverlayRecordedmoviesCover: rgb(); +> --colorOverlayRecordedtvCover: rgb(); +> --colorOverlayAnimeCover: rgb(); +> --colorOverlaySportsCover: rgb(); +> +> +> --urlMoviesCover: url(); +> --urlTvshowsCover: url(); +> --urlLivetvCover: url(); +> --urlBoxsetsCover: url(); +> --urlMusicCover: url(); +> --urlHomevideosCover: url(); +> --urlBooksCover: url(); +> --urlFoldersCover: url(); +> --urlMixedCover: url(); +> --urlRecordedmoviesCover: url(); +> --urlRecordedtvCover: url(); +> --urlAnimeCover: url(); +> --urlSportsCover: url(); +> } +> ``` -:root{ - - - - --colorOverlayMoviesCover: rgb(); - --colorOverlayTvshowsCover: rgb(); - --colorOverlayLivetvCover: rgb(); - --colorOverlayPlaylistsCover: rgb(); - --colorOverlayBoxsetsCover: rgb(); - --colorOverlayMusicCover: rgb(); - --colorOverlayHomevideosCover: rgb(); - --colorOverlayBooksCover: rgb(); - --colorOverlayFoldersCover: rgb(); - --colorOverlayMixedCover: rgb(); - --colorOverlayRecordedmoviesCover: rgb(); - --colorOverlayRecordedtvCover: rgb(); - --colorOverlayAnimeCover: rgb(); - --colorOverlaySportsCover: rgb(); - - - - --urlMoviesCover: url(); - --urlTvshowsCover: url(); - --urlLivetvCover: url(); - --urlBoxsetsCover: url(); - --urlMusicCover: url(); - --urlHomevideosCover: url(); - --urlBooksCover: url(); - --urlFoldersCover: url(); - --urlMixedCover: url(); - --urlRecordedmoviesCover: url(); - --urlRecordedtvCover: url(); - --urlAnimeCover: url(); - --urlSportsCover: url(); - -} - -```
- ### 🆗 Read this example: + Suppose you want to modify the Live TV cover art. You'll have to modify the variables named `--colorOverlayLivetvCover` and `--urlLivetvCover`, so that your final configuration will look something like this: -``` - +```css @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); -:root{ ---colorOverlayLivetvCover: rgb(39, 68, 185); ---urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg); +:root { + --colorOverlayLivetvCover: rgb(39, 68, 185); + --urlLivetvCover: url(https://artworks.thetvdb.com/banners/fanart/original/71663-33.jpg); } - ```
@@ -245,19 +239,20 @@ Suppose you want to modify the Live TV cover art. You'll have to modify the vari
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 +> 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. -
+> 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/workspace.code-workspace b/workspace.code-workspace index 61d9335..b650ecc 100644 --- a/workspace.code-workspace +++ b/workspace.code-workspace @@ -1,17 +1,14 @@ { "folders": [ { - "path": "." - } + "path": ".", + }, ], "settings": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "prettier.useTabs": false, "prettier.printWidth": 120, - "cSpell.words": [ - "Jellyfin", - "Jellyseerr" - ], - } -} \ No newline at end of file + "cSpell.words": ["Jellyfin", "Jellyseerr"], + }, +}