lscambo13/ElegantFin v26.06.06

ElegantFin Theme v26.06.06 for Jellyfin

on GitHub

This is the 14th update to ElegantFin.

Key Changes

General UI & Layout Improvements

• Increased card sizes slightly without reducing the number of visible items on phones.
• Increased backdrop-card sizes on TV and desktop layouts.
• Tweaked indicator and Continue Watching progress-bar positioning on phones for more consistent alignment and space efficiency.
• Continue Watching cards can now optionally be displayed larger than standard cards through --resumeCardScale (#248).
• Restored the three-dot menu button for accessibility (#279).
• Added a customisation option that allows the three-dot menu button to be enabled or disabled via --menuButtonVisibility.
• Tweaked the width of "My Media (Small)" buttons.
• Increased the top margin inside the hamburger menu.
• Reduced spacing between cast posters and cast names.
• Added consistent spacing between icons and text inside buttons, e.g., Sort.
• Prevented selector mismatches caused by buttons lacking a title attribute, resolving several icon alignment issues.
• Standardized top-right indicator sizing within cards throughout the theme.
• Added ellipsis to dropdown menus to prevent long text from overlapping the down-arrows.
• Fixed an issue where hover overlays could look permanently stuck on newer Jellyfin versions (#290).
• Fixed an issue that caused some multi-selection checkboxes to not cover the cards fully.
• Fixed incorrect ordering of items container within Collection views.
• Fixed multiple cases where library pages could become incorrectly centered or left-aligned.
• Fixed missing side margins on "Nothing here" messages displayed in some library tabs.
• Updated to the latest version of the Material Symbols icons.
• Added a subtle text shadow to card titles.
• Added icon fallbacks to prevent flashes of invisible text while icons load.
• Possibly fixed an issue that caused the app-bar to be overlapped by the status bar on some Apple devices (#233).

Music Improvements

• Replaced artist-name text with clear logos. (#273 - thanks @AhmedRadwan4)
• Redesigned the artist pages on desktop with dimmer backdrops while prominently featuring clear logos.
• Added artist page customization options via --artistTitleVisibility, --artistClearLogoVisibility and --artistPageBackground.

Playback Controls & Browser Compatibility

• Updated "Skip Intro" button styling and position slightly.
• Updated seek-bar thumb styling to feature a rounder seek handle.
• Fixed seek-bar thumb styling in Firefox so that it looks as intended on Chromium-based browsers.

Media Bar Add-on Improvements

• Fixed alignment of the top-right volume toggle inside the Media Bar add-on. (#260 - thanks @ACertainCoder)
• Reordered the play button to the first position within the buttons container.
• Prevented border styling from appearing before the slides finished loading to eliminate loading flashes upon page refreshes (#150).
• Tweaked the layout slightly to increase backdrop visibility.

Custom Media Covers Add-on Improvements

• Added support for "Anime" and "Sports" library covers. (#281 - thanks @buhbbl)
• Improved media-cover matching logic by switching to a stronger matching pattern to resolve false matches reported in issue #280.

Performance Improvements

• Eliminated several complex selectors and layout-specific workarounds.
• Simplified card-hover overlay animations slightly.
• Reworked how cards are sized with gap on phones to create a more predictable and maintainable layout system similar to desktops.
• Added an optional compact version of the icon pack for faster loading in low-bandwidth scenarios. (#288 - thanks @tim-vu)
• Updated development tools that minify the stable builds for a more optimised output.

Documentation & Maintenance

• Updated documentation covering card-hover effects and add-on installation instructions.
• Removed some hardcoded values to improve layout responsiveness.
• Internal code reorganization.
• Updated code comments and developer documentation.

You can read the full commit history here.

Additional Notes

• All the customisation instructions can be found in the README.md
• Jellyfin Desktop is the new desktop client that should be more compatible with the theme.
• Jellyfin Media Player and some outdated TVs are not fully supported as they may lack support for newer CSS features.
• I have switched to a recent Jellyfin Server so older server versions are no longer supported.
• This is a hobby project. If it helped you, your support really means a lot.

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.