This is the 13th — and last — update of the year to ElegantFin.

Key Changes

• Fixed an issue that made posters disappear on some TVs (#182 - thanks @BullenMoore)
• Fixed some issues caused by episode grid layout on some tablets (#217)
• Fixed an issue that caused Live TV channel logos to become unevenly sized (#216)
• Fixed the App bar tabs becoming partially cut-off and scrollable on some tablets after rotating (#220)
• Program cells in Live TV guide are correctly highlighted when selected
• Reworked the expanded and collapsed app bar states for more reliability on TVs
• Improved responsiveness of the app bar and page content to avoid overlaps in certain cases
• Updated the Media Bar plugin add-on with redesigned slide indicators, improved layout and much more (a3e52a4)
• Simplified the code for better maintainability
• Updated the Customization section with alternative color themes

You can read the full commit history here.

Known issues

• Jellyfin Media Player and some outdated TVs are not fully supported as they lack support for the latest CSS specs.
• 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.

This is the twelfth update to ElegantFin.

Key Changes

• Redesigned the Seasons page for improved content visibility
• Episodes now display in a grid view on desktop for better appearance and screen-space utilization (#145)
• Increased the episode title font size for better readability
• Media page content now shifts up automatically when Now Playing bar is visible
• Refined the Collections and Live TV page layouts on Jellyfin 10.11.X (#144, #194)
• Refined the alignment of scroll buttons with their section headings
• Refined the Clear logo position to prevent overlap on high-resolution displays (#147, #169)
• Reworked the Custom Media Covers add-on and removed hardcoded titles (#106, #184, #185 - thanks @MadsKelberg)
• Added support for more libraries (i.e. Recordings) in the Custom Media Covers add-on (#160)
• Updated the Live TV Channel page with the channel logo and improved program list (#127)
• Optimized some animations on TVs to improve performance (#62, #102)
• Added variables to allow tweaking of title, play button, and clear logo (#92, #143, #162)
• Now Playing queue should not have fully transparent background anymore on desktop
• Integrated basic styling for the Media Bar plugin
• Fixed various color and layout issues with the Media Bar plugin add-on (#142, #175, #188)
• Fixed an issue with font style in drop-down menus not working on Firefox (#110)
• Fixed Continue Watching cards to appear correctly on some browsers #130
• Fixed Live TV program cells in EPG to appear correctly on Firefox (#164)
• Fixed the Skip Intro button font color on Jellyfin 10.11.X (#151, #165 - thanks @bibi0019)
• Fixed overflow issues with long titles and long words
• Fixed an issue causing TV Show cards to have inconsistent height in Mixed Media libraries (#177)
• Fixed an issue with background gradient scaling poorly on Seasons with long episode lists
• Fixed an issue that caused the playlist posters to not show up (#127)
• Fixed play and Recording buttons displaying incorrectly in some dialogs
• Simplified the code for better maintainability and plugin compatibility
• Overall improved compatibility with older browsers
• Updated the Customization and Troubleshooting sections

You can read the full commit history here.

Known issues

• Jellyfin Server 10.11.0 has dropped support for Dashboard theming. #96
• Jellyfin Media Player and some outdated TVs are not fully supported as they lack support for the latest CSS specs.
• 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.

This is the eleventh update to ElegantFin.

Key Changes

• Added initial support for Jellyfin Server 10.11.0 #133
• Added a way for users to switch between two app bar styles #87
• Added a way for users to adjust how much of the backdrop is trimmed from top #116
• Made some improvements in the app bar and section headings for a more polished layout
• Fixed an issue that caused cards to become smaller and misaligned on older browsers
• Fixed an issue that caused the app bar to remain stuck in expanded state on TVs #97
• Fixed an issue that caused a horizontal line to flash briefly when opening an item page on older browsers
• Play/Resume button label should now support foreign languages #94
• Multi-selection boxes should fully cover the cards now
• Restricted the Custom CSS box from growing too long and jumping position when interacting
• Placed the Next Up episode and Seasons list in one row on JF 10.11.0
• Skip Intro button should look more aligned now on JF 10.10.7 #86
• Improved compatibility with the Editor's Choice Plugin #60
• Enabled clear logos to show up on older browsers again
• Increased the card sizes on TVs #97
• More cards should have white outline rather than blue when in focus on TVs
• Focused buttons should not overlap other components on TVs anymore
• Adjusted the backdrop visibility on TVs so that the text is more legible
• Improved navigation using a remote controller on TVs #105
• Repositioned the subtitle and audio track selection menus on TVs for quicker access
• ElegantFin version number is now shown the Settings page 72cc664
• Simplified the code for some performance improvements and easier manageability

You can read the full commit history here.

Known issues

• Jellyfin Server 10.11.0 has dropped support for Dashboard theming #96
• 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.

This is the tenth update to ElegantFin.

Key Changes

• Media cards should no longer look tiny on large and ultrawide displays #72 #74
• Note: If you still find them too small, you should use Ctrl+Plus to increase their size
• Simplified the backdrop animation to improve performance a bit on underpowered devices #80
• Updated the Media Bar support add-on to look consistent across desktop, mobile and TV
• Made the font size using Custom Media Cover add-on more consistent #78
• Text input fields did not have the correct font style on macOS (thanks to @co-go) #64
• Fixed an issue that caused the Up Next episode title to display incorrectly on JMP #58
• Fixed an issue that caused the section tabs in the app bar to remain stuck at the bottom on JMP #71
• Skip Intro button should look more aligned now #86
• Skip Intro button should be easily focusable on TVs now #62

You can read the full commit history here.

Known issues

• 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.

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+Plus to 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.

This is the eighth update to ElegantFin.

Key Changes

• Overhauled the Continue Watching media card design, separately for desktops and phones
• Updated the overlay that is visible while hovering over cards for a cleaner appearance
• You can now manually set a unique image like this as the background on the login page
• Optimised the underlying login page code so that it no longer needs media queries or forced paddings
• Login page should not have unusually small user cards anymore
• The login page would not show scroll bar unless necessary
• Updated the text alignment in the Server Info table in Dashboard
• The progress bar that shows up during library scan now spans the whole width which looks better
• Updated the EPG page slightly in Live TV library
• Removed the unnecessary left padding on My Media (small) buttons #46
• The poster size in the media page was smaller than intended on TV layout which has been corrected now #49
• Updated the seek bar to change its thickness while seeking for clearer user interaction and feedback
• SyncPlay button in the header is now visible in more cases such as desktops, TVs the landscape mode on phones #48
• Added a dedicated section for customisation in the README.md

You can view the full commit history here.

Special thanks to the following contributors for their invaluable contributions to this update:

Code Contributors: rlauuzo and many others
Bug Reporters: Spirited, server-imp and many others

Known issues

• Some elements may be displayed incorrectly in some apps. Read more about these 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.

This is the seventh update to ElegantFin.

Key Changes

• Redesigned the track selection menu by replacing text labels with icons (i.e., audio, video, subtitles and grouped versions)
• Redesigned the external link buttons in the media page (i.e., IMDb, Trakt, TheMovieDb, TheAudioDb etc)
• Redesigned the look of chapter markers for a less cluttered seek bar appearance
• Redesigned tables and tab buttons in many Dashboard pages (i.e., Reports, Playback Reporting and API Keys)
• Updated the colors of active list items and some buttons (i.e., floating play button, revoke and shutdown buttons)
• Updated the Play button label to show 'Resume' where applicable
• Updated the 'Up Next' dialog layout to be responsive so that it displays correctly in portrait orientation
• Updated the Guide page of Live TV library for a cleaner appearance
• Updated the Live TV channel cards for improved contrast with black channel logos
• Updated the layout of footer buttons in Metadata Manager for reduced waste of screen space
• Updated the text color in some buttons on hovering for better contrast
• Updated the size of overlay buttons in list items to be slightly larger
• Updated the time indicators to fix alignment issues and layout shifts
• Updated the Skip Intro/Credits button with hover and active states
• Updated the troubleshooting section to include a workaround for icons displaying incorrectly on some LG TVs
• Fixed uneven height of some cards in mixed libraries
• Fixed a thin dark line that was seen extending beyond some seek bars
• Fixed horizontal scrolling in Playback statistics overlay
• Fixed the side panel that was partially obscured by the header in Reports page
• Fixed missing hover effects in the 'Select View' menu in media libraries
• Forced native browser elements to be dark (i.e., date pickers, tooltips etc)
• Switched back to a simpler, cleaner parental rating icon

You can view the full commit history here.

Special thanks to the following contributors for their invaluable contributions to this update:

Code Contributors: All
Bug Reporters: Wernouxe, AlessandroTischer, Jam, Manuel García and many others

Known issues

• Some elements may be displayed incorrectly in some apps. Read more about these 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.

This is the sixth update to ElegantFin.

Key Changes

• Updated the icons to modern Material UI icons for a fresh look
• Updated the design of cards in My Media section on the home screen
• Updated the player OSD colors and styles to align with the overall theme (i.e., seekbar, volume HUD, playback statistics)
• Updated the music player, with noticeable improvements on phone screens
• Updated the lyrics page with smoother animations and general layout improvements
• Updated the Custom CSS code box to use a monospace font style
• Updated floating action button icons and media indicator colors based on media types (e.g., carousel, photo, folder, book, extras)
• Redesigned the login screen to match the rest of the theme
• Redesigned option menus to use alternative visual indicators instead of checkmarks for highlighting selected options
• Optimised list view layout (i.e., TV seasons, media libraries)
• Optimised the responsive layout, minimizing wasted space and misalignment across different screen sizes in the library
• Reduced card heights when using phones in landscape mode to optimize screen space
• Reduced button sizes in some dialogs for better use of screen space (i.e., Metadata Editor)
• Improved click feedback on cards (i.e., scaling down on selection)
• Improved accessibility in the TV layout by using a clearer focus state color
• Adjusted overly bright icon colors on cards to achieve a cleaner appearance
• Enabled media icons in lists on small screens in Movie and TV libraries
• Introduced an optional and experimental add-on for personalization of My Media covers
• Center-aligned the content on the Quick Connect page
• Disabled unintentional hover effects on touch devices
• Fixed an issue with rounded outlines that were not supported by apps using older CSS specifications
• Fixed a bug that caused the search bar style to break in the previous update
• Fixed issues with context menus overflowing the screen in various places
• Fixed an issue so that dialogs intended to be full-screen now properly display as such
• Fixed some overly large headings to be smaller
• Fixed a bug where the progress bar moved slightly due to variable font widths
• Fixed an issue that caused the main media title text size to be smaller than intended
• Fixed a bug causing long page titles to display in multiple lines in the header
• Made numerous other small interface enhancements that improve the overall user experience

You can view the full commit history here.

Special thanks to the following contributors for their invaluable contributions to this update:

Code Contributors: KeyboardDabbler, Stephan Renggli and many others
Bug Reporters: Wernouxe, AlessandroTischer, Tim Wilson, Victor Löfgren and many others

Known issues

• Some elements may be displayed incorrectly in some apps. Read more about this issue here.

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.

This is the fifth update to ElegantFin.

Key Changes

• Mini play buttons to play the media directly from item cards are back with a refreshed style
• Desktop users will notice a more dynamic hover animation on item cards
• Backdrops do not flicker anymore when entering the media page
• The loading spinner has been refreshed
• Progress bars in Dashboard have been updated to match the overall theme aesthetic
• Updated the appearance of right arrows in media section headings; they are actually arrows now rather than carets
• The 'Up Next' notification has a more polished appearance now
• Added colored outline to input boxes when in focus, especially useful in TV layout
• Checkboxes have been revamped with fixes to their focus states particularly useful in TV layout
• Active device cards in Dashboard would no longer display an empty progress bar when no media is playing
• Improved the appearance of items in episode lists with adjustments to padding and button layout
• Themed more elements (i.e. borders and tables in Networking and Activity sections, list icons and buttons)
• Updated the styles of notification icons in Dashboard (i.e. alerts have red icons again)
• Item selection checkboxes on Poster Cards and Thumb Cards should have the correct height now
• Jelly Media Player should not have major layout inconsistencies anymore (i.e. overlapping buttons and text)
• Back button does not show clipping when selected in TV layout
• Updated the text colors in the media page sections subtly for a better design hierarchy
• Reworked border styling on cards to prevent aliasing around the edges, particularly noticeable on low-medium DPI displays
• Improved layout and styling to cover more screen sizes and orientations (i.e. Library cards, Media page, My Media (Small) buttons)
• Updated the Continue Watching section's progress bar color for better visibility
• Center aligned the headings in some dialog boxes
• Tagline is in italics, again
• Reduced the seekbar tooltips to a more normal the size (i.e. OSD controls)
• More elements have rounded corners now (i.e. subtitles preview, playback statistics)
• Scroll buttons were repositioned in the My Media section on the home screen to avoid being too close to the cards

Special thanks to the following contributors for their invaluable contributions to this update:

Code Contributors: Travis Lane, KeyboardDabbler
Bug Reporters: Wernouxe, celticslment, donchi40, COxDE and many others

You can view the full commit history here.

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.

This is the fourth update to ElegantFin.

Key Changes

• Switched to the same font as used in Jellyseerr (i.e. Inter)
• Reworked the media page layout to avoid content clipping and oversized margins
• Themed the side navigation bar in Dashboard and options in drop-down lists
• Section tabs in library pages should move up into the main header even on smaller resolutions
• Some styling has been done in the Guide section of Live TV library
• User cards on the login page and delete media warning text are now centered
• Hover and focus states of header buttons and tabs have been themed to be consistent with other elements on desktop
• Added a thicker outline on the selected items for improved visibility in TV layout (Settings > Display > Display Mode > TV)
• Hover and focus states of many new buttons have been themed properly (i.e. search, add, browse and hyperlink buttons)
• Refined the parental rating icon to be more proportional
• Adjustments to alignments, paddings, margins and borders have been made for a more consistent design (i.e. horizontal scrolling lists, arrow icons, scroll buttons)
• Removed a floating horizontal line seen during some loading screens
• Fixed abnormally large cards in some library sections
• Fixed unnecessary list wrapping in Media and Live TV library sections on smaller screens
• Fixed some other layout quirks on phone screens
• Fixed a rare issue where a trailing border at the bottom of media information box was visible in some episode pages
• Fixed various inconsistencies in the TV layout to bring it in line with the desktop design
• Numerous other little fixes and changes have been made that may be too subtle to list, but you can read the commit history here

Special thanks to @Tormak9970 for his contributions

Known issues

• Some elements may be displayed incorrectly on Jellyfin Media Player. Read more about this issue here.

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.

This is the third update to ElegantFin.

Key Changes

• More design cues taken from Jellyseerr (i.e. refinements to the layouts, buttons and colors)
• Fixed SyncPlay button visibility (i.e. it is visible now except on the home screen)
• Fixed backdrops functionality (i.e. they should be visible according to user preferences)
• Fixed the widths of square cards to avoid unnecessary overflow (i.e. login screen, users page and some library sections)
• Fixed abnormally large fonts in some sections (i.e. selection counter, cast and syncplay dialogs)
• Toast notifications match the overall aesthetic now (i.e. seen when saving settings)
• Adjustments to paddings, margins and borders for more consistent design (i.e. the user avatar in the header, Dashboard section titles, dialog boxes)
• New troubleshooting section about these updates here
• stay tuned for more changes to come in the upcoming weeks

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.