ElegantFin Theme v25.01.25 for Jellyfin

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.

ElegantFin Theme v25.01.03 for Jellyfin

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.

ElegantFin Theme v24.12.20 for Jellyfin

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.

ElegantFin Theme v24.12.11 for Jellyfin

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.

ElegantFin Theme v24.12.03 for Jellyfin

This is the second update to ElegantFin.

Key Changes

• More buttons have been themed for consistency
• Library pages should be centered now
• Fixed misaligned arrows in drop-down lists
• Hover effects have been added to many elements
• Adjustments to padding width for improved apprearance
• Jellyfin Media Player should show correct gap/margin between cards
• We now show our version number in the footer found in the Dashboard
• 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.

ElegantFin Theme v24.12.01 for Jellyfin

This is the initial release of ElegantFin.

Key Features

• modern layouts and colors
• new animations on some elements
• reduced clutter by hiding unimportant buttons and elements
• overall rounded design
• stylish borders, hover effects and shadows

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.