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>
@@ -106,7 +136,7 @@ https://github.com/user-attachments/assets/7a492f89-9c82-4038-a07a-a9a59e4f8eef
 </details>
 
 <details>
-  <summary>4️⃣ - <i>All the icons on my LG TV seem to be broken. How to fix?</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.

Theme/ElegantFin-theme-nightly.css

@@ -47,6 +47,7 @@
     --defaultLighterBorder: var(--borderWidth) solid var(--lighterBorderColor);
 
     /* login page customizations */
+    /* --loginPageBgUrl: url("<YOUR-JELLYFIN-SERVER-ADDRESS>/Branding/Splashscreen?format=webp&foregroundLayer=1&quality=33&width=3840&height=2160&blur=2"); */
     --loginPageBgUrl: url("");
     --loginPageText: "Sign in to continue";
 
@@ -218,7 +219,9 @@ html {
 
 .cardOverlayContainer {
     transition: .25s;
-    background: var(--hoverGradientA);
+    background: rgba(255, 255, 255, 0.1);
+    /* Uncomment the code below to get back the old overlay on hovering over cards*/
+    /* background: var(--hoverGradientA); */
     background-size: 200%;
     background-position-x: 100%;
 }
@@ -260,7 +263,7 @@ html {
 }
 
 .layout-mobile .cardOverlayButton {
-    padding: .425em;
+    padding: .75em;
 }
 
 .layout-mobile .portraitCard .cardOverlayButton-br,
@@ -437,13 +440,16 @@ html {
     background-color: transparent;
 }
 
+/* hides home button from the appbar/header on all layouts */
 .headerHomeButton {
     display: none;
 }
 
-/* hide sync button on home screen */
+/* hides sync button on home screen on phones only in portrait mode */
-.skinHeader.noHomeButtonHeader .headerSyncButton {
+@media (orientation: portrait) {
-    display: none;
+    .layout-mobile .skinHeader.noHomeButtonHeader .headerSyncButton {
+        display: none;
+    }
 }
 
 .pageTitle {
@@ -527,6 +533,10 @@ html {
     width: 23vw !important;
 }
 
+.layout-tv .detailImageContainer .card {
+    width: 23vw !important;
+}
+
 @media (max-width: 62.5em) {
     .layout-desktop .itemBackdrop {
         height: 7em !important;
@@ -539,11 +549,12 @@ html {
 
 @media (max-width: 50em) {
     .homeLibraryButton {
-        width: 45% !important;
+        width: 45.6% !important;
     }
 }
 
 .homeLibraryButton {
+    padding-inline-start: .25em;
     min-width: 15%;
 }
 
@@ -694,17 +705,30 @@ html {
     color: var(--uiAccentColor) !important;
 }
 
+#divRunningTasks progress {
+    width: calc(100% - 7em);
+}
+
 .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
     backdrop-filter: var(--blurLarge);
-    background-color: rgb(123 123 123 / 30%) !important;
+    background-color: rgba(169, 169, 169, 0.3) !important;
-    box-shadow: inset 0px 0px 0.01em .01em #969696;
+    height: 0.35em;
     overflow: hidden;
     border-radius: var(--largeRadius);
 }
 
+.layout-mobile .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
+    width: calc(100% - 2.5em);
+}
+
+.layout-mobile .backdropCard .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
+    width: 100%;
+    width: -webkit-fill-available;
+}
+
 .itemProgressBarForeground {
     border-radius: var(--largeRadius);
-    background-color: var(--uiAccentColor);
+    background-color: var(--dimTextColor);
 }
 
 .backgroundProgress>div {
@@ -754,6 +778,10 @@ progress+span {
     padding: 0;
 }
 
+.sliderContainer:active .mdl-slider-background-flex {
+    transform: scaleY(1.75);
+}
+
 .mdl-slider-background-flex {
     border-radius: var(--smallRadius);
 }
@@ -1010,11 +1038,12 @@ progress+span {
 
 .innerCardFooter,
 .chapterThumbTextContainer {
-    background: transparent;
+    background: linear-gradient(0deg, #000000e8, transparent);
     font-weight: 500;
     text-shadow: .1em .1em 0px black;
-    padding: 1em;
+    padding: 5em 2em 1.5em 2em;
     width: auto;
+    width: -webkit-fill-available;
 }
 
 .centerMessage {
@@ -1365,9 +1394,15 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding: 1em;
 }
 
+.serverInfo>:nth-child(1n) {
+    -webkit-flex: 1 0 30%;
+    flex: 1 0 30%;
+}
+
 .serverInfo>:nth-child(2n) {
-    -webkit-flex: 1 0 60%;
+    -webkit-flex: 1 0 50%;
-    flex: 1 0 60%;
+    flex: 1 0 50%;
+    text-align: end;
 }
 
 .listItemIcon:not(.listItemIcon-transparent) {
@@ -1642,11 +1677,11 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: var(--highlightOutlineColor);
 }
 
-[dir=ltr] .padded-left.vertical-wrap {
+[dir=ltr] .padded-left.vertical-wrap:not(div:has(.homeLibraryButton)) {
     padding-left: 5% !important;
 }
 
-[dir=ltr] .padded-right.vertical-wrap {
+[dir=ltr] .padded-right.vertical-wrap:not(div:has(.homeLibraryButton)) {
     padding-right: 5% !important;
 }
 
@@ -1781,7 +1816,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .activeSession {
     width: 98% !important;
-    max-width: 27rem !important;
 }
 
 .emby-tab-button:hover {
@@ -1957,6 +1991,19 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: var(--lighterGradientPointAlpha);
 }
 
+.channelPrograms>.programCell:nth-child(odd) {
+    background-color: var(--darkerGradientPoint);
+}
+
+.channelPrograms>.programCell:nth-child(even) {
+    /* background-color: #11182700; */
+}
+
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: var(--highlightOutlineColor) !important;
+}
+
 .emby-select-iconbutton {
     background-color: var(--selectorBackgroundColor);
     border: var(--defaultLighterBorder);
@@ -2080,65 +2127,27 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 }
 
 #loginPage {
-    padding-top: 20em !important;
+    display: flex;
-}
+    justify-content: center;
-
+    align-items: center;
-@media (max-height: 890px) {
+    min-height: 100vh;
-    #loginPage {
+    padding: 1em;
-        padding-top: 6.5em !important;
+    overflow-y: auto;
-    }
+    background: linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)), var(--loginPageBgUrl);
-}
+    background-size: cover;
-
+    background-position: center;
-@media (max-height: 1300px) {
+    background-repeat: no-repeat;
-    #loginPage:has(.padded-left.padded-right.padded-bottom-page .visualLoginForm:not(.hide)) {
+    box-sizing: border-box;
-        padding-top: 6.5em !important;
-    }
-}
-
-#loginPage .readOnlyContent {
-    margin: .5em auto 0em !important;
 }
 
 #loginPage .padded-left.padded-right.padded-bottom-page {
-    margin: 2em auto 0;
     width: 28em;
     background: rgba(30, 40, 54, 0.7);
     padding: 2em 2em 1em 2em !important;
     border-radius: var(--largerRadius);
     backdrop-filter: var(--blurDefault);
     box-sizing: border-box;
-}
+    transform: translateY(3em);
-
-#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
-    width: 80em;
-}
-
-@media (max-width: 640px) {
-    #loginPage .padded-left.padded-right.padded-bottom-page {
-        width: 100%;
-        margin: 2em;
-    }
-}
-
-@media (max-width: 1300px) {
-    #loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
-        width: 100%;
-        margin: 2em;
-    }
-}
-
-#loginPage {
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    min-height: 100vh;
-    padding: 2em 0;
-    overflow-y: auto;
-    background:
-        var(--loginPageBgUrl, linear-gradient(to bottom, var(--darkerGradientPointAlpha), var(--lighterGradientPoint)));
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
 }
 
 .manualLoginForm .sectionTitle,
@@ -2146,6 +2155,18 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     display: none;
 }
 
+#loginPage .padded-left.padded-right.padded-bottom-page:has(.visualLoginForm:not(.hide)) {
+    width: 40em;
+}
+
+#divUsers .squareCard {
+    width: 30% !important;
+}
+
+.layout-mobile #divUsers .squareCard {
+    width: 45% !important;
+}
+
 .manualLoginForm::before,
 .visualLoginForm::before {
     content: var(--loginPageText);