This is the ninth and largest update to ElegantFin since it was first publicly released in December last year. Here are some key changes packed in this update:
🌐 Core Design Overhaul
- All the media item pages, particularly for Movies, TV Shows and Music, have been redesigned with more emphasis on backdrop images.
- Clear logos have been made a core design component in this refresh.
- This update overhauls the app bar and its tabs, introducing a fresh, frosted appearance.
- You should notice more polish and a cleaner experience with updated animations, media cards, posters, buttons and more.
- Media cards are now more evenly spaced and centered, resulting in a more balanced interface.
- Internally, the theme code has been refactored to improve maintainability and performance.
- Most of these improvements apply not just to desktop, but also mobile and TV layouts.
- In addition to major design changes, this update includes numerous subtle yet important fixes for prior issues.
🎬 Movie & TV Page
- The new UI puts the media title and media controls in the center.
- Clear logos now replace the text-based title whenever they are available.
- Backdrops are now a central part of the visual language, so clean cinematic backdrops are recommended for optimal aesthetics.
- The placement of the plot and media track selection menus has been rearranged for improved layout.
- The plot “Show More” button has been redesigned to match the rest of the theme and to occupy less space.
📱 App Bar
- The app bar appears transparent and seamless in general, but reveals a frosted effect when content scrolls beneath it.
- App bar section tabs have been redesigned, especially the Home and Favorite tabs on the homepage that now include icons.
- The Home button has been brought back for easier navigation.
⏯️ Web Player
- The play/pause button has been made slightly larger to make it stand out among other playback controls.
- The seek bar and the thumb now feature subtle animations and visual feedback on interaction.
- The seek bar is now repositioned below the playback controls so it no longer obstructs the playing content and offers a cleaner layout.
- The spacing between the seek bar and playback time indicators has been made more uniform.
📋 Card & List Views
- Cards in media libraries have been resized, uniformly spaced and center-aligned.
- The card design is now more responsive, scaling down more effectively on high-DPI displays.
- As an added bonus of the improved responsiveness, you can now capture more of you media library in screenshots using
Ctrl + Minus. - Extra buttons in list items have been restored to a horizontal layout on desktop.
- A shiney new hover effect on cards has been introduced.
- The resume progress bar in episode list thumbnails was misaligned which has been corrected.
- Side margins have been removed from horizontally scrolling lists on movie and TV pages, allowing them to extend fully to the screen edges.
- Cast member cards have been made rounded to improve visual hierarchy on the page.
🎵 Music
- Now Playing bottom bar and the lyrics display have been tweaked.
- All music cards have been made square as a standard.
- The currently playing item is now more clearly highlighted in the music queue.
📡 Live TV
- The electronic program guide has been updated to look less cluttered.
- Cards with footers have been adjusted to display more information.
📺 TV Layout
- Radio buttons and checkboxes on TVs were missing focus states, which has now been fixed.
- General layout and remote navigation have been improved.
- The layout has been updated to always keep posters and cards visible to make up for the lack of backdrops.
⚙️ Under-the-Hood Optimizations
- The number of complex CSS selectors has been reduced to improve performance and readability.
- Overlapping color gradients have been replaced with CSS masks to minimise banding and halo artifacts.
- Gradient curves have been fine-tuned to reduce visible color banding.
- More design values have been migrated to CSS variables for easier theme customization.
- Documentation, GitHub templates, and contributor guidelines have been updated.
🔧 Other Improvements
- The Material UI icon pack has been updated to include new icons and fix inconsistencies.
- The play button text on book pages has been replaced with “Read” and is accompanied with a suitable icon.
- Buttons now provide subtle visual feedback by scaling down slightly when tapped or clicked.
- Long context menus were being cut off at the bottom on mobile devices in some cases, which has now been fixed.
- Some multi-select checkboxes did not fully cover cards, which has now been fixed.
- Rounded corners have been added to the subtitle drag-and-drop box.
- Backdrops on Home and Library pages now have a frosted effect for a cleaner appearance and to match the app bar styling.
- The dashboard shutdown button has been repositioned to stay in line with the Scan and Restart buttons on mobile devices.
- The three-dot menu button has been restored on mobile so that the “Remove from Collection” option is accessible again.
- The inconsistent title text size between movies and TV shows has been corrected.
- Media ratings and other metadata icons have been made slightly larger and easier to read.
👽 Optional Features
- The “Mark Watched” and “Set Favorite” buttons can optionally be made to appear on hover.
- The floating play button can optionally be moved to the center of cards on desktop.
- Labels beneath media library cards can optionally be enabled.
- Optional support has been added for the Media Bar plugin via an add-on.
- These options need to be configured externally. Read more about these in the customisation section.
You can read the full commit history here.
TLDR
- Updated screenshots and demo video to better highlight this new update; check out the README.md file.
Known issues
- Item cards might look too small on large displays; to solve this, use
Ctrl+Plusto zoom in to around 125% scale in your web browser. - Read more about some common issues in the Troubleshooting section.
You may use the provided CSS file for self-hosting purposes. Alternatively, you may use the following code snippet to get the latest version via a free CDN.
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");
For more detailed information, be sure to read the README.md file.