New: A brand new Light theme and other various changes

- this can be enabled from Settings > Display > Theme > Light - the Theme setting is not to be confused with Server Theme - the light theme brings slightly different icons and accents Other Changes - Added hover effect to app bar tabs and buttons - Updated shadows and transition effects on some icons - Added new css vars to make theming easier - Added monospace font variant to time text around seek bars - Removed the container query to fix issues it caused with the app bar - Added an optional way to enable fully transparent app bar - Refactored huge chunks of the code - Removed redundant code - Updated color formats for consistency Breaking Changes - some css var names have changed, so some modifications will stop working. You wil need to use the updated css vars. - app bar cannot be switched between seamless and solid styles with --appBarHeight anymore. You will need to use the code block documented in the :root block to get the solid app bar again.
New: Updated icons - slideshow and headings arrow
2026-10-26 09:39:34 +00:00 · 2026-08-23 20:04:37 +05:30 · 2026-07-19 21:09:14 +05:30 · 2026-07-19 20:31:40 +05:30 · 2026-07-19 16:36:14 +05:30 · 2026-07-05 20:48:39 +05:30
188 changed files with 36010 additions and 1311 deletions
@@ -7,6 +7,11 @@ assignees: ''
 ---
 **Checklist**
 - [ ] I have read the README.md 
 - [ ] I have searched through the other open and closed issues using the GitHub search bar
 - [ ] I have made sure that my issue is not a duplicate
 **Describe the bug**
 A clear and concise description of what the bug is.
@@ -17,20 +22,26 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 **ElegantFin:**
- - Version [e.g. 24.12.11]
+ - Version [e.g. 24.12.01]
-**Desktop (please complete the following information):**
+**Jellyfin Server:**
- - OS: [e.g. iOS]
+ - Version [e.g. 10.10.3]
- - Browser [e.g. chrome, safari]
+
- - Version [e.g. 22]
+**Desktop:**
 - OS: [e.g. Windows]
 - Browser: [e.g. chrome, safari]
 - Browser Version: [e.g. 22]
 - Screen Resolution [e.g. 1920x1080]
-**Smartphone or TV (please complete the following information):**
+**Smartphone or TV:**
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
+ - Browser: [e.g. stock browser, safari]
- - Version [e.g. 22]
+ - Browser Version: [e.g. 22]
 - Jellyfin App Version: 
-**Additional context**
+**Are you using any plugins or extra CSS configuration**
-Add any other context about the problem here.
+- Add any third-party plugins or CSS configuration you use.
 - [e.g. Media Bar, Custom Tabs etc]
 - [e.g. other custom css modifications]
@@ -0,0 +1,36 @@
 # Pull Request
 Thanks for contributing to ElegantFin! Please review the **contributor guidelines** before submitting.
 ## Type of Change
 - [ ] Bug fix  
 - [ ] New feature
 ## Description
 Explain what you changed and why. Include your reasoning and goals.
 ## Screenshots
 If applicable, provide before/after images and explain what each shows.
 ## Cross-platform Testing
 Describe how you verified your changes on different devices (desktop, mobile, TV, etc.).
 ## Test Configuration
 - Jellyfin server version:  
 - Jellyfin client:  
 - Client browser name and version:  
 - Device:
 - Other info:
 ## Checklist
 - [ ] I performed a self-review of my own code  
 - [ ] I followed the style conventions (`em` units, minimal media queries).
 - [ ] I avoided unnecessary use of `!important`.
 - [ ] I commented my code where applicable.
 - [ ] I tested my changes on multiple devices, layouts and viewport sizes.
@@ -1,28 +0,0 @@
 # Description
 Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
 Fixes # (issue)
 ## Type of change
 - [ ] Bug fix
 - [ ] New feature 
 # How Has This Been Tested?
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
 **Test Configuration**:
 * Jellyfin server version:
 * Jellyfin client:
 * Client browser name and version:
 * Device:
 # Checklist:
 - [ ] I have performed a self-review of my own code
 - [ ] I have commented my code in hard-to-understand areas
 - [ ] I have included relevant comparison screenshots where nececssary
 - [ ] I have tested my changes on the TV layout and Default layout of Jellyfin
 - [ ] I have also tested my changes on multiple devices and screen sizes
@@ -1 +1,9 @@
-/tmp.txt
+/tmp.txt
 /commits.csv
 /node_modules
 /Theme/mod.css
 /Theme/ElegantFin-theme-nightly-min.css
 /Theme/assets/add-ons/custom-media-covers-nightly-min.css
 /Theme/assets/add-ons/media-bar-plugin-support-nightly-min.css
 /Theme/assets/add-ons/seamless-fork-compatibility-nightly.css
 /Theme/assets/add-ons/seamless-fork-compatibility-nightly-min.css
@@ -0,0 +1 @@
 { "useTabs": false, "tabWidth": 4, "printWidth": 120 }
@@ -0,0 +1,4 @@
 {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
 }
@@ -1,226 +0,0 @@
 # 🧩 Add-on:  Custom media covers for ElegantFin
 This is a Jellyfin add-on that allows you to customise My Media cover arts. This is an experimental feature, so limited support will be provided.
 #### **Author:** [lscambo13](https://github.com/lscambo13)
 <hr>
 ### 🖼️ Presets: Modify these styles according to your own liking 
 <details>
  <summary><i>This is how the covers look without this add-on.</i></summary>
 ![Screenshot 2025-01-19 191836](https://github.com/user-attachments/assets/49425368-cfe3-4c3b-9533-eb18b64c84d6)
 </details>
 <details>
  <summary><i>This is how they look with this add-on, by default.</i></summary>
 ![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");
 ```
 </details>
 <details>
  <summary><i>You can also change these covers.</i></summary>
 ![Screenshot 2025-01-19 192015](https://github.com/user-attachments/assets/11719ef1-36ca-46e9-8030-b464a5ae5b79)
 </details>
 <details>
  <summary><i>You can achieve a minimal design too.</i></summary>
 ![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;
    --urlMoviesCover: transparent;
    --urlTvshowsCover: transparent;
    --urlLivetvCover: transparent;
    --urlPlaylistsCover: transparent;
    --urlBoxsetsCover: transparent;
    --urlMusicCover: transparent;
    --urlHomevideosCover: transparent;
    --urlBooksCover: transparent;
    --urlFoldersCover: transparent;
 }
 ```
 <hr>
 ![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;
    --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);
 }
 ```
 </details>
 <details>
  <summary><i>Need something in between?</i></summary>
 ![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);
    --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%);
 }
 ```
 </details>
 <hr>
 ### 👇 How to enable this add-on? 
 - Paste the following at the end in Custom CSS code box:
 ```
@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css");
 ```
 <hr>
 ### ⚙️ How to configure this add-on? 
 - Remember, you do not need to configure anything if you're happy with the default set of images.
 <details>
  <summary><i>Click here to reveal.</i></summary>
 - 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:
 ```
 :root{
    <!-- overlay colors; change according to your image. -->
    --colorOverlayMoviesCover: rgb();
    --colorOverlayTvshowsCover: rgb();
    --colorOverlayLivetvCover: rgb();
    --colorOverlayPlaylistsCover: rgb();
    --colorOverlayBoxsetsCover: rgb();
    --colorOverlayMusicCover: rgb();
    --colorOverlayHomevideosCover: rgb();
    --colorOverlayBooksCover: rgb();
    --colorOverlayFoldersCover: rgb();
    <!-- cover images; input the url pointing to an image. -->
    --urlMoviesCover: url();
    --urlTvshowsCover: url();
    --urlLivetvCover: url();
    --urlBoxsetsCover: url();
    --urlMusicCover: url();
    --urlHomevideosCover: url();
    --urlBooksCover: url();
    --urlFoldersCover: url();
 }
 ```
 </details>
 <hr>
 ### 🆗 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:
 ```
@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);
 }
 ```
 <hr>
 <details>
  <summary><i>Detailed steps for server-side implementation</i></summary>
 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
 </details>
 <details>
  <summary><i>Detailed steps for client-side implementation</i></summary>
 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.
 </details>
 <hr>
@@ -0,0 +1,52 @@
 # Contributing to ElegantFin
 Thank you for your interest in contributing to **ElegantFin**, a custom theme for the Jellyfin Web UI. To keep the project clean, maintainable, and compatible across devices, please follow these guidelines when contributing.
 ---
 ## 🧩 Pull Request Guidelines
 - **Keep PRs focused.** Each pull request should address a single feature, bugfix, or improvement. Avoid bundling unrelated changes.
 - **Write clear PR descriptions.** Explain what you changed and why. This helps reviewers and future contributors understand the purpose and reasoning behind the change.
 - **Provide screenshots.** Include before/after screenshots for any visual changes, along with a short description of what each image shows.
 - **Comment your code.** If you’re adding new CSS rules or modifying complex ones, include inline comments where needed to describe intent.
 - **Don't forget responsiveness.** ElegantFin runs on phones, tablets, TVs, and desktops. Ensure your changes are tested across viewports and don't break layouts or interactions on other platforms.
 - **Use consistent units.** Follow the theme’s existing use of relative units such as `em` instead of absolute units like `px`.
 - **Avoid `!important`.** Only use it when it is absolutely necessary and no alternative exists.
 - **Minimize media queries.** Only add new media queries if there is no simpler or existing solution that achieves the same result.
 ---
 ## 💬 Propose First for Major Changes
 If you are planning to:
 - change the overall layout or structure of key components,
 - modify the core color scheme,
 - or introduce new UI behavioral patterns,
 Please open a GitHub issue first to discuss the proposal with maintainers before submitting a PR. This helps avoid duplicate work and ensures alignment with the project's goals.
 ---
 ## 📁 File Structure and Naming
 - Follow the existing CSS naming conventions and structure.
 - When adding new sections, group related styles logically and use comments to identify the purpose of the block.
 ---
 ## 🤝 Communication
 - Be respectful, constructive, and collaborative.
 - Be open to feedback and willing to revise your work if needed.
 ---
 We appreciate your help in making ElegantFin better for everyone. Thanks for contributing! 🙌
		`@@ -0,0 +1 @@`
							`{ "useTabs": false, "tabWidth": 4, "printWidth": 120 }`