# ElegantFin Theme
This is a Jellyfin theme inspired from JellySeerr to improve the overall look and experience with various fixes to the UI and behaviour.


#### **Author:** [lscambo13](https://github.com/lscambo13)

<hr>

### ✨ 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

<hr>

### ▶️ Demo

https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef

<hr>

### 🖼️ Previews

<details>
  <summary><i>Click here to reveal</i></summary>
  
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/1.%20Homepage.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/2.%20Movies%20Library.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/3.%20Sidebar.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/4.%20Movie%20Page.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/5.%20Extra%20Dialog.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/6.%20Settings%20Page.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/7.%20Metadata%20Menu.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/8.%20Dashboard%20Settings.png" style="width:480px;height:auto;"></img>
<img src="https://github.com/lscambo13/ElegantFin/blob/main/Previews/9.%20Web%20Player.png" style="width:480px;height:auto;"></img>

</details>

<hr>

### 👇 How to install/setup this theme? 

<b>Paste the following in Custom CSS code box:</b>

	@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");

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

### 🆗 Tested on 
- Jellyfin Server v10.10.3
- Jellyfin Android App v2.6.2

<hr>


## 🙏 FEEDBACK APPRECIATED
