RELEASE: ElegantFin v25.03.18

Also switched to using a variable name to set icons as a workaround for WebOS

README.md

@@ -86,7 +86,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 +103,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?</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 +128,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-nightly.css

@@ -2,29 +2,23 @@
 
 /* Add-ons: Uncomment to enable */
 /* @import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/assets/add-ons/custom-media-covers-latest-min.css"); */
-/* @import url(./assets/add-ons/custom-media-covers-nightly.css); */
-
 
+/* Inter Font Family */
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-@font-face {
-    font-family: 'Material Icons Round';
-    font-style: normal;
-    font-weight: 100 700;
-    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v222/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
-}
-
 :root {
     --elegantFinFooterText: "ElegantFin Nightly";
+    color-scheme: dark;
     --darkerGradientPoint: #111827;
     --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85);
     --lighterGradientPoint: #1d2635;
+    --lighterGradientPointAlpha: rgba(29, 38, 53, 0.85);
     --borderColor: rgb(71, 80, 92);
-    /* --borderColor: rgb(62 72 85); */
     --lighterBorderColor: rgb(255 255 255 / 20%);
     --headerColor: rgba(30, 40, 54, 0.8);
     --drawerColor: rgba(30, 40, 54, 0.9);
     --selectorBackgroundColor: rgb(55, 65, 81);
+    --selectorBackgroundColorAlpha: rgba(55, 65, 81, 0.5);
     --btnDeleteColor: rgb(169, 29, 29);
     --btnDeleteBorderColor: rgb(217, 84, 84);
     --btnSubmitColor: rgb(61, 54, 178);
@@ -33,9 +27,12 @@
     --highlightOutlineColor: rgb(37, 99, 235);
     --textColor: rgb(209, 213, 219);
     --dimTextColor: rgb(156, 163, 175);
-    --activeColorAlpha: rgb(144, 81, 169 / 40%);
-    --activeColor: rgb(144, 81, 169);
+    --activeColorAlpha: rgba(119, 91, 244, 0.9);
+    --activeColor: rgb(119, 91, 244);
     --tableBodyColor: rgb(31 41 55 / 1);
+    --uiAccentColor: rgb(117 111 226);
+    --btnMiniPlayColor: rgb(41 154 93);
+    --btnPlayBorderColor: color-mix(in srgb, var(--btnMiniPlayColor), rgb(255, 255, 255) 5%);
     --backgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPoint));
     --cardBackgroundGradient: linear-gradient(0deg, var(--darkerGradientPoint), var(--lighterGradientPoint) 25%);
     --hoverGradientA: linear-gradient(130deg, rgb(255 255 255 / 35%) 20%, rgb(255 255 255 / 15%) 40%);
@@ -57,6 +54,9 @@
     --blurDefault: blur(5px);
     --blurLarge: blur(10px);
     --blurLargest: blur(20px);
+
+    /* to revert to old icons, use 'Material Icons'*/
+    --iconPack: 'Material Icons Round';
 }
 
 html {
@@ -67,19 +67,17 @@ html {
     -webkit-tap-highlight-color: transparent !important;
 }
 
-.dashboardFooter {
-    font-family: "Noto Sans", serif;
-    transition: transform 50ms;
-}
-
-.dashboardFooter::after {
-    content: var(--elegantFinFooterText);
-    font-size: .8em;
-    color: #4e4e60;
+/* Material Icons Round */
+/* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200 */
+@font-face {
+    font-family: 'Material Icons Round';
+    font-style: normal;
+    font-weight: 100 700;
+    src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v230/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190Fjzag.woff2) format('woff2');
 }
 
 .material-icons {
-    font-family: 'Material Icons Round' !important;
+    font-family: var(--iconPack) !important;
     font-weight: normal;
     font-style: normal;
     display: inline-block;
@@ -104,6 +102,17 @@ html {
     font-family: Material Icons;
 }
 
+.dashboardFooter {
+    font-family: "Noto Sans", serif;
+    transition: transform 50ms;
+}
+
+.dashboardFooter::after {
+    content: var(--elegantFinFooterText);
+    font-size: .8em;
+    color: #4e4e60;
+}
+
 ::selection {
     background: var(--activeColorAlpha);
 }
@@ -164,6 +173,10 @@ html {
     transition: transform .375s;
 }
 
+.card.squareCard[data-type="TvChannel"] .cardImageContainer.cardContent {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
 .cardImageContainer>.cardDefaultText {
     font-size: 2em;
     padding-top: 1.5em;
@@ -228,17 +241,18 @@ html {
 }
 
 .cardOverlayContainer>.cardOverlayFab-primary,
-.listItemImageButton {
-    background-color: rgba(0, 0, 0, 0.9);
-    color: var(--textColor);
-    border: var(--defaultBorder);
+.listItemImageButton,
+.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
+    background-color: var(--btnMiniPlayColor) !important;
+    color: white;
+    border: var(--defaultLighterBorder);
+    border-color: var(--btnPlayBorderColor);
     font-size: 75%;
 }
 
 .cardOverlayContainer>.cardOverlayFab-primary:hover,
 .listItemImageButton:hover {
-    background-color: rgba(0, 0, 0, 0.75) !important;
-    color: unset;
+    color: white;
 }
 
 .layout-desktop .cardOverlayButton-br {
@@ -249,12 +263,6 @@ html {
     padding: .425em;
 }
 
-.layout-mobile .cardOverlayButton-br>.cardOverlayButtonIcon {
-    border: var(--defaultLighterBorder);
-    border-color: rgba(23, 23, 23, 0.6);
-    backdrop-filter: var(--blurSmallest);
-}
-
 .layout-mobile .portraitCard .cardOverlayButton-br,
 .layout-mobile .backdropCard .cardOverlayButton-br,
 .layout-mobile .cardOverlayButton-br[data-action="menu"] {
@@ -270,6 +278,10 @@ html {
     font-size: x-small;
 }
 
+.listItem-largeImage[data-type="Episode"] .listViewUserDataButtons {
+    font-size: small;
+}
+
 .smallBackdropCard,
 .squareCard,
 .backdropCard,
@@ -470,14 +482,6 @@ html {
     height: 13em;
 }
 
-.itemMiscInfo>.mediaInfoItem:not(:first-child, .mediaInfoCriticRating) {
-    padding-inline-start: .125em;
-}
-
-.itemMiscInfo>.mediaInfoItem:not(:last-child) {
-    padding-inline-end: .125em;
-}
-
 .mediaInfoItem {
     font-family: system-ui;
     border-radius: var(--smallRadius);
@@ -489,11 +493,9 @@ html {
 .mediaInfoOfficialRating {
     background: transparent !important;
     font-size: .6em;
-    font-family: 'Times New Roman', Times, serif;
-    line-height: normal;
+    font-family: 'Noto Sans', sans-serif;
+    line-height: 1.5em;
     transform: translateY(-.15em);
-    padding-inline: .5em !important;
-    padding-block: .2em !important;
     font-weight: 600;
     border: var(--defaultBorder);
 }
@@ -562,12 +564,6 @@ html {
         height: 40vh;
     }
 
-    /* .mediaInfoOfficialRating {
-        padding-inline-start: .5em;
-        padding-inline-end: .475em;
-        padding-block-start: 0.470em;
-    } */
-
     .layout-mobile .detailPageWrapperContainer {
         padding-top: 35vh;
         margin-top: -47vh;
@@ -695,13 +691,12 @@ html {
 }
 
 .buttonActive {
-    color: var(--btnSubmitBorderColor) !important;
+    color: var(--uiAccentColor) !important;
 }
 
 .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) {
-    backdrop-filter: var(--blurSmallest);
+    backdrop-filter: var(--blurLarge);
     background-color: rgb(123 123 123 / 30%) !important;
-    height: .3em;
     box-shadow: inset 0px 0px 0.01em .01em #969696;
     overflow: hidden;
     border-radius: var(--largeRadius);
@@ -709,7 +704,7 @@ html {
 
 .itemProgressBarForeground {
     border-radius: var(--largeRadius);
-    background-color: var(--btnSubmitBorderColor);
+    background-color: var(--uiAccentColor);
 }
 
 .backgroundProgress>div {
@@ -717,16 +712,16 @@ html {
 }
 
 .playbackProgress>div {
-    background-color: var(--btnSubmitBorderColor);
+    background-color: var(--uiAccentColor);
 }
 
 ::-moz-progress-bar {
-    background: var(--btnSubmitBorderColor) !important;
+    background: var(--uiAccentColor) !important;
     border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
 }
 
 ::-webkit-progress-value {
-    background: var(--btnSubmitBorderColor) !important;
+    background: var(--uiAccentColor) !important;
     border-radius: var(--smallRadius) inherit var(--smallRadius) 0;
 }
 
@@ -739,7 +734,62 @@ progress,
 }
 
 progress+span {
-    color: var(--btnSubmitBorderColor) !important;
+    color: var(--uiAccentColor) !important;
+}
+
+.mdl-spinner__circle {
+    border-color: var(--dimTextColor);
+    border-style: inset;
+}
+
+.mdl-slider-container {
+    height: 1em;
+}
+
+.mdl-slider {
+    height: unset;
+}
+
+.mdl-slider-background-flex-container {
+    padding: 0;
+}
+
+.mdl-slider-background-flex {
+    border-radius: var(--smallRadius);
+}
+
+.mdl-slider-background-lower {
+    background-color: var(--uiAccentColor);
+}
+
+.mdl-slider::-webkit-slider-thumb {
+    background: var(--uiAccentColor);
+}
+
+.mdl-slider::-webkit-slider-thumb {
+    width: .75em !important;
+    height: .75em !important;
+}
+
+.mdl-slider::-moz-range-thumb {
+    background: var(--uiAccentColor);
+}
+
+.sliderMarkerContainer {
+    margin: 0 .1em;
+}
+
+.sliderMarker.watched {
+    background-color: var(--uiAccentColor);
+}
+
+.sliderMarker {
+    height: 4px;
+    border-radius: 2px;
+}
+
+.iconOsdProgressInner {
+    background: var(--uiAccentColor);
 }
 
 .selectLabel {
@@ -790,11 +840,18 @@ progress+span {
 }
 
 
+.btnPlay[title="Play"]>.detailButton-content::after {
+    content: "Play";
+}
+
+.btnPlay[title="Resume"]>.detailButton-content::after {
+    content: "Resume";
+}
+
 .btnPlay>.detailButton-content::after {
     padding-left: .25em;
     padding-right: .5em;
     place-content: center;
-    content: "Play";
 }
 
 .mainDrawer,
@@ -809,7 +866,7 @@ progress+span {
 }
 
 .btnHeaderSave.button-flat {
-    color: var(--btnSubmitBorderColor) !important;
+    color: var(--uiAccentColor) !important;
     gap: 0.3em;
     border-radius: var(--smallRadius);
 }
@@ -877,6 +934,64 @@ progress+span {
     color: var(--textColor);
 }
 
+.itemExternalLinks.focuscontainer-x {
+    color: transparent;
+}
+
+.itemExternalLinks.focuscontainer-x>.button-link {
+    color: var(--textColor);
+    background-color: var(--selectorBackgroundColor);
+    padding: .125em .5em;
+    border-radius: var(--smallerRadius);
+    margin-bottom: .5em;
+}
+
+.layout-mobile .itemExternalLinks.focuscontainer-x>.button-link:hover:not(:active) {
+    color: var(--textColor) !important;
+}
+
+.layout-desktop .itemExternalLinks.focuscontainer-x>a:hover,
+.itemExternalLinks.focuscontainer-x>a:active {
+    background-color: var(--activeColor) !important;
+    color: white !important;
+}
+
+.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="themoviedb.org"]:hover,
+.itemExternalLinks.focuscontainer-x>a[href*="themoviedb.org"]:active {
+    background-color: rgb(26, 183, 216) !important;
+    color: black !important;
+}
+
+.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="imdb.com"]:hover,
+.itemExternalLinks.focuscontainer-x>a[href*="imdb.com"]:active {
+    background-color: rgb(226, 182, 22) !important;
+    color: black !important;
+}
+
+.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="thetvdb.com"]:hover,
+.itemExternalLinks.focuscontainer-x>a[href*="thetvdb.com"]:active {
+    background-color: rgb(108, 213, 145) !important;
+    color: black !important;
+}
+
+.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="trakt.tv"]:hover,
+.itemExternalLinks.focuscontainer-x>a[href*="trakt.tv"]:active {
+    background-color: rgb(171, 58, 173) !important;
+    color: var(--textColor) !important;
+}
+
+.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="theaudiodb.com"]:hover,
+.itemExternalLinks.focuscontainer-x>a[href*="theaudiodb.com"]:active {
+    background-color: rgb(99, 153, 204) !important;
+    color: rgb(15, 22, 28) !important;
+}
+
+.layout-desktop .itemExternalLinks.focuscontainer-x>a[href*="musicbrainz.org"]:hover,
+.itemExternalLinks.focuscontainer-x>a[href*="musicbrainz.org"]:active {
+    background-color: rgb(186, 71, 143) !important;
+    color: var(--textColor) !important;
+}
+
 .itemTags,
 .itemTags>a {
     display: none;
@@ -1167,6 +1282,11 @@ div[data-type="PhotoAlbum"] .play_arrow:before {
     border: var(--defaultBorder);
 }
 
+.editItemMetadataForm>.metadataFormFields div:has(.formDialogFooterItem) {
+    display: flex;
+    justify-content: center;
+}
+
 .btnBrowse>.folder {
     margin-inline-end: .5em;
 }
@@ -1204,8 +1324,15 @@ div[data-role=controlgroup] a.ui-btn-active {
     color: #fff !important;
 }
 
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: white;
+}
+
 #btnDeleteImage,
-.button-delete {
+.button-delete,
+.btnRevoke,
+#btnShutdown {
     background: var(--btnDeleteColor);
     border: solid var(--btnDeleteBorderColor) var(--borderWidth);
 }
@@ -1260,7 +1387,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     border: var(--defaultBorder);
 }
 
-
 .readOnlyContent {
     flex-direction: column !important;
 }
@@ -1302,7 +1428,11 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .listItem[data-type="Audio"] {
     margin-inline: 1em;
-    /* padding-inline: 1em !important; */
+}
+
+.listItem[data-type="Audio"]:has(.playlistIndexIndicatorImage) .listItemBodyText {
+    color: white;
+    font-weight: 600;
 }
 
 [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
@@ -1310,10 +1440,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     font-weight: 600;
 }
 
-/* .listItemBody {
-    padding: 0;
-} */
-
 .listItemBody>.listItemBodyText:not(.secondary) {
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -1374,7 +1500,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .Mui-selected {
     background-color: var(--activeColor) !important;
-    /* border: var(--defaultLighterBorder) !important; */
 }
 
 .actionSheetContent {
@@ -1393,6 +1518,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: var(--activeColor);
 }
 
+.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check) .listItemBodyText {
+    color: white;
+}
+
 .actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check) .listItemIcon.material-icons.check {
     display: none;
 }
@@ -1401,6 +1530,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-color: transparent;
 }
 
+.actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):active {
+    background-color: rgba(255, 255, 255, 0.125);
+}
+
 .navMenuOption {
     border-radius: var(--smallRadius) !important;
     margin: 0em 1em !important;
@@ -1417,7 +1550,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 .navMenuOption-selected {
     background-color: var(--activeColor) !important;
-    /* border: var(--defaultLighterBorder); */
 }
 
 .detailSection {
@@ -1451,6 +1583,29 @@ div[data-role=controlgroup] a.ui-btn-active {
     top: .5em;
 }
 
+.trackSelectionFieldContainer>label {
+    max-width: 2.75em;
+    background-repeat: no-repeat;
+    color: transparent;
+    transform: scale(.9);
+}
+
+.selectVideoContainer.trackSelectionFieldContainer>label {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-4.7 0-7 1.5-8.5C4.9 2 7.3 2 12 2s7 0 8.5 1.5C22 4.9 22 7.3 22 12s0 7-1.5 8.5C19.1 22 16.7 22 12 22s-7 0-8.5-1.5C2 19.1 2 16.7 2 12Z"/><path stroke-linecap="round" d="M17 2.5v19M7 2.5v19M2.5 7H7m14.5 0H17M2.5 17H7m14.5 0H17M2 12h20"/></g></svg>');
+}
+
+.selectAudioContainer.trackSelectionFieldContainer>label {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M9 19a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM21 17a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9 19V8M21 17V6"/><path stroke-linecap="round" d="m15.7 3.8-4 1.3c-1.3.4-2 .6-2.3 1.2C9 6.8 9 7.5 9 8.9V12l12-4v-.5c0-2.5 0-3.7-.8-4.3-.9-.6-2-.2-4.5.6Z"/></g></svg>');
+}
+
+.selectSubtitlesContainer.trackSelectionFieldContainer>label {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23d1d5db" viewBox="0 0 24 24"><g stroke-width="1.5"><path d="M2 12c0-3.8 0-5.7 1.2-6.8C4.3 4 6.2 4 10 4h4c3.8 0 5.7 0 6.8 1.2C22 6.3 22 8.2 22 12s0 5.7-1.2 6.8C19.7 20 17.8 20 14 20h-4c-3.8 0-5.7 0-6.8-1.2C2 17.7 2 15.8 2 12Z"/><path stroke-linecap="round" d="M10 16H6M14 13h4M14 16h-1.5M9.5 13h2M18 16h-1.5M6 13h1"/></g></svg>')
+}
+
+.selectSourceContainer.trackSelectionFieldContainer>label {
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="%23d1d5db" d="m15.4 4.05-.5.56.5-.56Zm3.95 3.57-.5.55.5-.55Zm2.3 2.53-.68.3.68-.3ZM3.17 20.83l.53-.53-.53.53Zm17.66 0-.53-.53.53.53Zm-6.83.42h-4v1.5h4v-1.5ZM2.75 14v-4h-1.5v4h1.5Zm18.5-.44V14h1.5v-.44h-1.5Zm-6.36-8.95 3.96 3.56 1-1.11L15.9 3.5l-1 1.11Zm7.86 8.95c0-1.69.02-2.75-.41-3.71l-1.37.6c.26.6.28 1.3.28 3.11h1.5Zm-3.9-5.39c1.35 1.22 1.85 1.7 2.12 2.29l1.37-.61c-.43-.96-1.23-1.66-2.49-2.8l-1 1.12Zm-8.82-5.42c1.58 0 2.18.01 2.71.22l.54-1.4c-.85-.33-1.78-.32-3.25-.32v1.5Zm5.86.75c-1.08-.98-1.76-1.6-2.61-1.93l-.54 1.4c.53.2.98.59 2.15 1.64l1-1.11ZM10 21.25c-1.9 0-3.26 0-4.29-.14-1-.13-1.58-.39-2-.81l-1.07 1.06c.75.75 1.7 1.08 2.87 1.24 1.15.15 2.63.15 4.49.15v-1.5ZM1.25 14c0 1.86 0 3.34.15 4.49a4.71 4.71 0 0 0 1.24 2.87L3.7 20.3c-.42-.43-.67-1-.81-2.01A36 36 0 0 1 2.75 14h-1.5ZM14 22.75c1.86 0 3.34 0 4.49-.15a4.71 4.71 0 0 0 2.87-1.24L20.3 20.3c-.43.42-1 .68-2.01.81-1.03.14-2.38.14-4.29.14v1.5ZM21.25 14c0 1.9 0 3.26-.14 4.29-.13 1-.39 1.58-.81 2l1.06 1.07a4.71 4.71 0 0 0 1.24-2.87c.15-1.15.15-2.63.15-4.49h-1.5Zm-18.5-4c0-1.9 0-3.26.14-4.29.14-1 .39-1.58.81-2L2.64 2.63A4.71 4.71 0 0 0 1.4 5.51c-.15 1.15-.15 2.63-.15 4.49h1.5Zm7.28-8.75c-1.87 0-3.36 0-4.51.15a4.72 4.72 0 0 0-2.88 1.24L3.7 3.7c.42-.42 1-.67 2.02-.81 1.03-.14 2.4-.14 4.31-.14v-1.5Z"/><path stroke="%23d1d5db" stroke-width="1.5" d="M13 2.5V5c0 2.36 0 3.54.73 4.27.73.73 1.91.73 4.27.73h4"/></svg>');
+}
+
 .detailSectionContent {
     order: 1;
 }
@@ -1529,6 +1684,10 @@ div[data-role=controlgroup] a.ui-btn-active {
     color: #6c7bab;
 }
 
+.jstree-default .jstree-wholerow-clicked {
+    background: var(--selectorBackgroundColor) !important;
+}
+
 .sectionTitleTextButton {
     padding-inline: .5em;
 }
@@ -1574,15 +1733,45 @@ div[data-role=controlgroup] a.ui-btn-active {
     color: var(--textColor);
 }
 
+[dir=ltr] .upNextContainer {
+    margin: 2em;
+    box-sizing: border-box;
+    max-width: 80vw;
+}
+
 .upNextContainer .btnStartNow {
     background-color: var(--btnSubmitColor);
     border-color: var(--btnSubmitBorderColor);
 }
 
+.upNextDialog-title {
+    white-space: wrap;
+    width: unset;
+}
+
+.upNextDialog-buttons {
+    width: unset;
+    flex-wrap: wrap;
+}
+
 .upNextContainer .upNextDialog-countdownText {
     color: white;
 }
 
+.skip-button {
+    background-color: whitesmoke;
+    box-shadow: var(--shadow);
+}
+
+.skip-button:hover {
+    background-color: white;
+}
+
+.skip-button:active {
+    background-color: rgba(245, 245, 245, 0.7);
+    box-shadow: none;
+}
+
 .toast,
 .upNextContainer {
     background: var(--headerColor) !important;
@@ -1596,15 +1785,20 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .emby-tab-button:hover {
-    color: #c1c1c1;
+    color: whitesmoke;
+
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .paper-icon-button-light:hover:not(:disabled) {
+    .paper-icon-button-light:hover:not(:disabled, .cardOverlayButton) {
         color: #fff;
         background-color: rgb(255 255 255 / 5%);
     }
 
+    .actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover {
+        background-color: rgba(255, 255, 255, 0.125);
+    }
+
     .emby-select-withcolor:hover:not(.emby-select[disabled], :focus),
     .emby-input:hover:not(:focus),
     .emby-textarea:hover:not(:focus) {
@@ -1624,6 +1818,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
     .button-flat:hover {
         background-color: rgba(255, 255, 255, 0.2);
+        color: white;
     }
 
     .alphaPickerButton:hover {
@@ -1743,12 +1938,25 @@ div[data-role=controlgroup] a.ui-btn-active {
     font-size: 1.6em;
 }
 
+#liveTvSuggestedPage,
+.liveTvContainer {
+    background-color: var(--tableBodyColor);
+}
+
 .programCell-active {
     background-color: var(--activeColor) !important;
     border-radius: .5em;
     margin-block: .5em !important;
 }
 
+.guideVerticalScroller {
+    padding: 0;
+}
+
+.programGrid {
+    background-color: var(--lighterGradientPointAlpha);
+}
+
 .emby-select-iconbutton {
     background-color: var(--selectorBackgroundColor);
     border: var(--defaultLighterBorder);
@@ -1779,52 +1987,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     margin: .25em .5em;
 }
 
-.mdl-spinner__circle {
-    border-color: var(--dimTextColor);
-    border-style: inset;
-}
-
-.mdl-slider-container {
-    height: 1em;
-}
-
-.mdl-slider {
-    height: unset;
-}
-
-.mdl-slider-background-flex-container {
-    backdrop-filter: var(--blurSmallest);
-}
-
-.mdl-slider-background-flex {
-    border-radius: var(--smallRadius);
-}
-
-.mdl-slider-background-lower {
-    background-color: var(--btnSubmitBorderColor);
-}
-
-.mdl-slider::-webkit-slider-thumb {
-    background: var(--btnSubmitBorderColor);
-}
-
-.mdl-slider::-webkit-slider-thumb {
-    width: .75em !important;
-    height: .75em !important;
-}
-
-.mdl-slider::-moz-range-thumb {
-    background: var(--btnSubmitBorderColor);
-}
-
-.sliderMarker.watched {
-    background-color: var(--btnSubmitBorderColor);
-}
-
-.iconOsdProgressInner {
-    background: var(--btnSubmitBorderColor);
-}
-
 .subtitleappearance-preview {
     border-radius: var(--smallRadius);
 }
@@ -1846,18 +2008,42 @@ fieldset {
     border: var(--defaultBorder);
 }
 
+table:not(.MuiTable-root.MuiTable-stickyHeader) {
+    border-color: var(--borderColor) !important;
+    border-radius: var(--smallRadius);
+    border-spacing: 1px;
+    border: var(--defaultBorder);
+    background: var(--tableBodyColor);
+    border-collapse: separate;
+    overflow: hidden;
+}
+
+.detailTableHeaderCell {
+    vertical-align: middle;
+}
+
 #serverActivityPage .MuiPaper-elevation2 {
     border: var(--defaultBorder) !important;
     box-shadow: unset !important;
+}
+
+#serverActivityPage .MuiPaper-elevation2,
+#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
+#serverActivityPage .MuiTableRow-root.MuiTableRow-head {
     background-color: var(--tableBodyColor);
 }
 
-#serverActivityPage .MuiPaper-elevation2>.MuiBox-root,
-#serverActivityPage .MuiTableRow-root.MuiTableRow-head,
-#serverActivityPage .MuiTableRow-root {
-    background-color: var(--tableBodyColor) !important;
+.detailTableBodyRow-shaded:nth-child(odd),
+#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(odd) {
+    background: var(--darkerGradientPointAlpha) !important;
 }
 
+.detailTableBodyRow-shaded:nth-child(even),
+#serverActivityPage .MuiTableBody-root .MuiTableRow-root:nth-child(even) {
+    background: var(--lighterGradientPointAlpha) !important;
+}
+
+
 .MuiList-root.MuiMenu-list {
     background-color: var(--drawerColor);
 }
@@ -1875,8 +2061,9 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 }
 
 .playerStats-stats {
-    max-height: 58vh;
+    max-height: 50vh;
     flex-wrap: wrap;
+    overflow-x: auto;
     padding: 1em !important;
 }
 
@@ -1885,7 +2072,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 }
 
 .progressring-spiner {
-    border-color: var(--btnSubmitBorderColor);
+    border-color: var(--uiAccentColor);
 }
 
 .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.semiTransparent.noHeaderRight {
@@ -1989,19 +2176,48 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
 }
 
 .startTimeText,
+.endTimeText,
+.positionTime,
+.runtime {
+    width: 4.5em;
+    box-sizing: border-box;
+}
+
+.startTimeText {
+    margin: 0 !important;
+}
+
 .endTimeText {
-    width: 4em;
+    justify-content: right;
+    padding-inline-end: .8em;
+}
+
+.startTimeText,
+.endTimeText {
+    padding-top: .25em;
+}
+
+.startTimeText,
+.positionTime {
+    text-align: start;
+    justify-content: left;
+}
+
+.endTimeText,
+.runtime {
+    text-align: end;
+    justify-content: right;
 }
 
 .filterIndicator {
     background: var(--activeColor);
 }
 
-.card-withuserdata[data-isfolder="true"] .cardPadder-overflowBackdrop {
+#indexPage:not(.hide) .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardPadder-overflowBackdrop {
     padding-bottom: 50%;
 }
 
-.card-withuserdata[data-isfolder="true"] .cardImageContainer.cardContent::before {
+.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardImageContainer.cardContent::before {
     position: absolute;
     font-size: 3.5vh;
     margin-bottom: .175em;
@@ -2011,15 +2227,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     text-align: center;
 }
 
-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardText-first,
-.card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardText.cardTextCentered {
+#indexPage:not(.hide) .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardText-first,
+#indexPage:not(.hide) .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) .cardText.cardTextCentered {
     display: none;
 }
 
-.padded-right-withalphapicker .card-withuserdata[data-isfolder="true"]:not([data-type="PhotoAlbum"], [data-type="Series"], [data-type="Folder"], [data-type="Season"], [data-type="Playlist"]) {
-    margin-bottom: -1.5em;
-}
-
 /* input[type="radio"]:checked {
     background-color: var(--highlightOutlineColor);
 } */
@@ -2029,6 +2241,10 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     background: var(--highlightOutlineColor);
 } */
 
+.nowPlayingButtonsContainer {
+    margin-top: 1em;
+}
+
 .nowPlayingPageImageContainerNoAlbum {
     border: var(--defaultBorder);
     border-radius: var(--smallRadius);
@@ -2071,23 +2287,49 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     border-color: transparent;
 }
 
+.layout-desktop .nowPlayingInfoContainer {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 5em;
+    padding: 1em;
+    margin-bottom: 2em;
+    backdrop-filter: var(--blurLargest);
+    border: var(--defaultLighterBorder);
+    z-index: 2;
+    background-color: var(--headerColor);
+    box-shadow: var(--shadow);
+    border-radius: var(--largerRadius);
+    box-sizing: border-box;
+}
+
+.layout-desktop .nowPlayingInfoControls {
+    margin: 0em 2em;
+}
+
+.nowPlayingPageImage {
+    box-shadow: var(--shadow);
+    border-radius: var(--smallRadius);
+}
+
 @media (orientation: portrait) and (max-width: 43em) {
     .nowPlayingInfoContainer {
         height: calc(95% - 4.2em);
     }
 }
 
-.nowPlayingInfoContainerMedia>div:not(.hide) {
-    margin-bottom: 1em;
-}
-
 .nowPlayingSongName.nowPlayingEpisode {
+    margin-bottom: 1em;
     font-size: 1.25em;
     color: var(--textColor);
 }
 
 .nowPlayingAlbum.nowPlayingSeason {
     color: var(--dimTextColor);
+    margin-bottom: .5em;
+}
+
+.nowPlayingArtist.nowPlayingSerie {
+    margin-bottom: .5em;
 }
 
 .playlistIndexIndicatorImage {
@@ -2112,4 +2354,36 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
     list-style-type: circle;
     margin-bottom: .5em;
     font-family: "Math", serif;
+}
+
+.MuiTabs-indicator {
+    display: none;
+}
+
+.MuiTabs-root>.MuiTabs-scroller {
+    align-content: center;
+}
+
+.MuiTabs-flexContainer>.MuiButtonBase-root {
+    border-radius: var(--largeRadius);
+    min-height: 40px;
+    min-width: 72px;
+}
+
+.MuiTabs-flexContainer>.MuiButtonBase-root.Mui-selected {
+    color: white;
+    background-color: transparent !important;
+}
+
+.MuiToggleButtonGroup-grouped.Mui-selected {
+    color: white;
+}
+
+.MuiButtonBase-root.MuiIconButton-root:hover {
+    color: white;
+    background-color: transparent;
+}
+
+#viewPanel .ui-panel-inner {
+    margin-top: 4em;
 }

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