RELEASE: ElegantFin v25.05.03

Its right end would not get partially covered by the mini resume button on phones anymore

README.md

@@ -70,13 +70,43 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 <hr>
 
 ### 🧩 How to customise this theme? 
-- Documentation yet to be added. Help needed.
+
-- [Experimental add-ons](https://github.com/lscambo13/ElegantFin/blob/main/Add-Ons.md)
+<details>
+  <summary><i>1. Custom media covers for user media libraries</i></summary>
+
+- [Preview](https://private-user-images.githubusercontent.com/32175188/438879202-343b8aae-fbae-4ad6-bff7-c1baf5573b1a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDYyMDMyNTEsIm5iZiI6MTc0NjIwMjk1MSwicGF0aCI6Ii8zMjE3NTE4OC80Mzg4NzkyMDItMzQzYjhhYWUtZmJhZS00YWQ2LWJmZjctYzFiYWY1NTczYjFhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTAyVDE2MjIzMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI3MjE3YjNjOGU2ZDU2YTdmMTg0MzA5ZGYyMGY0N2UxZmU4OGRlNmM5MjkzZTVhZmU5NTVlYmNlOTE5OTE4ZGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.kQTa5XFb2lEHxPJeCG8eOnAqrWLdoSZXWSxF_R0NscQ)
+- Read more about this experimental add-on [here](https://github.com/lscambo13/ElegantFin/blob/main/custom-media-covers.md)
+
+</details>
+
+<details>
+  <summary><i>2. Custom background image for the login page</i></summary>
+
+- [Preview](https://user-images.githubusercontent.com/16425113/129554147-6ac7ba51-43e7-4c8e-ba77-e646a3ef6b12.jpg)
+- To enable the background wallpaper on the login screen, first tick the 'Enable the splash screen' option in your Jellyfin Dashboard below the Custom CSS Box.
+- Second, copy and paste the following code at the end in Custom CSS box but don't save yet.
+  ```
+  :root{
+    --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2");
+  }
+  ```
+- Third, replace `<YOUR-JELLYFIN-SERVER-ADDRESS>` with your Jellyfin server address, for example, `http://192.168.0.1:8097`.
+- Don't forget the correct http or https in your domain.
+- You can also modify the parameters, for example blur size or the resolution, according to your liking.
+- Once done, save and refresh your apps and webpages.
+</details>
+
+<details>
+  <summary><i>3. Bring back the home button in the app header</i></summary>
+
+- Read more about steps [here](https://github.com/lscambo13/ElegantFin/issues/51)
+
+</details>
 
 <hr>
 
 ### 🆗 Tested on 
-- Jellyfin Server v10.10.3
+- Jellyfin Server v10.10.6
 - Jellyfin Android App v2.6.2
 
 <hr>
@@ -86,7 +116,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
   <summary>1️⃣ - <i>How do I check if I am using the latest version on ElegantFin?</i></summary>
 
 - To make sure that you are using the latest version of ElegantFin, check the version number at the bottom in the Dashboard screen. 
-- It should be something like ElegantFin v24.12.XX
+- It should be something like ElegantFin v25.03.XX
 </details>
 
 <details>
@@ -103,11 +133,24 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
   <summary>3️⃣ - <i>Why do I notice visual bugs and inconsistencies on Jellyfin Media Player?</i></summary>
 
 - Currently JMP uses Qt 5.x which uses an outdated web engine, so many new CSS features do not work. Once they release a new version based on Qt 6.x, most issues should automatically be resolved. Until then, I advise using the web app instead.
-- Are you not using JMP and still facing issues? See the 4th point below.
 </details>
 
 <details>
-  <summary>4️⃣ - <i>How do I report bugs/issues?</i></summary>
+  <summary>4️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix them?</i></summary>
+
+- It seems that modern Material Icons which this theme uses are [not compatible on some WebOS TVs](https://github.com/lscambo13/ElegantFin/issues/39). There is a [huge similar thread](https://www.reddit.com/r/youtubetv/comments/e27go3/chinese_symbols_instead_of_icons_on_lg_tv/) about this.
+- This bug can be fixed by using the older icons, so I have implemented the following workaround to bring back older, supported icons.
+- Simply add the following code at the end in Custom CSS box and save, then refresh your apps and webpages:
+  
+  ```
+  :root{
+    --iconPack: 'Material Icons';
+  }
+  ```
+</details>
+
+<details>
+  <summary>5️⃣ - <i>How do I report bugs/issues?</i></summary>
 
 - First check [here](https://github.com/lscambo13/ElegantFin/issues?q=) whether a similar issue has been reported already. If it exists, upvote and comment there to let me know. 
 - Alternatively, create a new issue [here](https://github.com/lscambo13/ElegantFin/issues/new/choose).
@@ -115,7 +158,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 
 </details>
 <details>
-  <summary>5️⃣ - <i>When can I expect another update?</i></summary>
+  <summary>6️⃣ - <i>When can I expect another update?</i></summary>
 
 - 🤷
 </details>

Theme/ElegantFin-theme-v25.01.25.css

@@ -33,7 +33,7 @@
     --highlightOutlineColor: rgb(37, 99, 235);
     --textColor: rgb(209, 213, 219);
     --dimTextColor: rgb(156, 163, 175);
-    --activeColorAlpha: rgb(144, 81, 169 / 40%);
+    --activeColorAlpha: rgba(144, 81, 169, 0.4);
     --activeColor: rgb(144, 81, 169);
     --tableBodyColor: rgb(31 41 55 / 1);
     --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));