Merge pull request #611 from grafixeyehero/itemdetailpage-layout

Item detail page layout improvements

src/assets/css/librarybrowser.css

@@ -200,6 +200,7 @@
 }
 
 @media all and (min-width:40em) {
+
     .dashboardDocument .adminDrawerLogo,
     .dashboardDocument .mainDrawerButton {
         display: none !important
@@ -380,6 +381,8 @@
 
 .itemBackdrop {
     background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
     height: 50vh;
     position: relative
 }
@@ -391,23 +394,59 @@
     right: 0
 }
 
-.itemBackdropFader {
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    right: 0;
-    height: 15vh
-}
-
 .desktopMiscInfoContainer {
     position: absolute;
     bottom: .75em
 }
 
+.layout-mobile .detailPagePrimaryContainer {
+    display: block;
+    position: relative;
+}
+
+.layout-tv .detailPagePrimaryContainer {
+    position: relative;
+}
+
+.detailPagePrimaryContainer {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
+.infoWrapper {
+    flex: 1 0 0;
+}
+
+.infoText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+}
+
+.detailPageSecondaryContainer {
+    margin: 1.25em 0;
+    display: flex;
+    flex-direction: column;
+    padding-left: 2%;
+    padding-right: 2%;
+}
+
+.layout-mobile .detailImageContainer,
+.layout-tv .detailImageContainer {
+    position: relative;
+}
+
 .detailImageContainer {
-    width: 280px;
+    margin: 1.25em 0;
-    margin-right: 2em;
+    position: sticky;
-    flex-shrink: 0;
+    top: 15%;
+    float: left;
+    width: 22.786458333333332vw;
 }
 
 .detailPagePrimaryContent {
@@ -416,11 +455,11 @@
 }
 
 .detailLogo {
-    width: 21.3em;
+    width: 25em;
-    height: 5em;
+    height: 9.375em;
     position: absolute;
-    top: 13.5%;
+    top: 14.5%;
-    right: 19.5%;
+    right: 10.5%;
     background-size: contain
 }
 
@@ -449,12 +488,8 @@
 }
 
 .itemDetailImage {
-    width: 100%;
+    width: 100% !important;
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-}
-
-.thumbDetailImageContainer {
-    width: 400px
 }
 
 @media all and (max-width:62.5em) {
@@ -462,34 +497,11 @@
         position: relative
     }
 
-    .detailImageContainer {
-        position: absolute;
-        top: -90px;
-        left: 5%;
-        width: auto
-    }
-
-    .itemDetailImage {
-        height: 120px;
-        width: auto !important
-    }
-
     .btnPlaySimple {
         display: none !important
     }
 }
 
-@media all and (min-width:62.5em) {
-    .itemBackdrop {
-        display: none
-    }
-
-    .detailPagePrimaryContainer {
-        display: flex;
-        margin-bottom: 3em
-    }
-}
-
 @media all and (max-width:75em) {
     .lnkSibling {
         display: none !important
@@ -568,7 +580,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    margin: 1em 0
+    margin: 1em 0;
 }
 
 .recordingFields button {
@@ -629,11 +641,8 @@
 }
 
 .detailImageProgressContainer {
-    position: absolute;
+    margin-left: 6px;
-    bottom: 4px;
+    width: 21.886458333333332vw;
-    right: 1px;
-    left: 1px;
-    text-align: center
 }
 
 .detailButton-mobile-text {
@@ -653,7 +662,7 @@
 }
 
 @media all and (min-width:62.5em) {
-    .detailButton-mobile {
+    .detailFloatingButton {
         display: none !important
     }
 
@@ -698,13 +707,11 @@
 .detailPageContent {
     border-spacing: 0;
     border-collapse: collapse;
-    padding-top: 3em
 }
 
 @media all and (max-width:62.5em) {
     .detailPageContent-nodetailimg {
         padding-top: 0;
-        margin-top: -3em
     }
 }
 

src/components/emby-tabs/emby-tabs.css

@@ -22,7 +22,7 @@
 
 .emby-tab-button.show-focus:focus {
     /* these buttons are small so scale larger than usual */
-    transform: scale(1.6) !important;
+    transform: scale(1.3) !important;
     background: 0 !important;
 }
 

src/controllers/itemdetailpage.js

@@ -419,13 +419,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
         var offset = parentNameLast ? ".25em" : ".5em";
 
         if (html && !parentNameLast) {
-            html += '<h3 class="itemName" style="margin: .25em 0 .5em;">' + name + '</h3>';
+            html += '<h3 class="itemName infoText" style="margin: .25em 0 .5em;">' + name + '</h3>';
         } else {
-            html = '<h1 class="itemName" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
+            html = '<h1 class="itemName infoText" style="margin: .1em 0 ' + offset + ';">' + name + "</h1>" + html;
         }
 
         if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-            html += '<h4 class="itemName" style="margin: -' + offset + ' 0 0">' + item.OriginalTitle + '</h4>';
+            html += '<h4 class="itemName infoText" style="margin: -' + offset + ' 0 0">' + item.OriginalTitle + '</h4>';
         }
 
         container.innerHTML = html;
@@ -801,10 +801,8 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             });
         }
 
-        html += '<div style="position:relative;">';
-
         if (editable) {
-            html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;padding:2px;margin:0;' href='#'>";
+            html += "<a class='itemDetailGalleryLink' is='emby-linkbutton' style='display:block;margin-top:.7em;padding:0' href='#'>";
         }
 
         if (detectRatio && item.PrimaryImageAspectRatio) {
@@ -828,7 +826,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             html += progressHtml;
         }
 
-        html += "</div>";
         html += "</div>";
         elem.innerHTML = html;
 
@@ -898,7 +895,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
 
             var html = cardBuilder.getCardsHtml({
                 items: result.Items,
-                shape: getThumbShape(false),
+                shape: "overflowBackdrop",
                 showTitle: true,
                 displayAsSpecial: "Season" == item.Type && item.IndexNumber,
                 overlayText: false,
@@ -1403,7 +1400,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 scrollX = enableScrollX();
                 html = cardBuilder.getCardsHtml({
                     items: result.Items,
-                    shape: getPortraitShape(),
+                    shape: "overflowPortrait",
                     showTitle: true,
                     centerText: true,
                     lazy: true,
@@ -1422,7 +1419,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 if ("Episode" === item.Type) {
                     html = cardBuilder.getCardsHtml({
                         items: result.Items,
-                        shape: getThumbShape(scrollX),
+                        shape: "overflowBackdrop",
                         showTitle: true,
                         displayAsSpecial: "Season" == item.Type && item.IndexNumber,
                         playFromHere: true,
@@ -1861,7 +1858,7 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
                 coverImage: true,
                 serverId: item.ServerId,
                 width: 160,
-                shape: getPortraitShape()
+                shape: "overflowPortrait"
             });
         });
     }

src/elements/emby-button/emby-button.css

@@ -29,7 +29,7 @@
 }
 
 .emby-button.show-focus:focus {
-    transform: scale(1.4);
+    transform: scale(1.2);
     z-index: 1;
 }
 
@@ -116,7 +116,7 @@
 }
 
 .paper-icon-button-light.show-focus:focus {
-    transform: scale(1.6);
+    transform: scale(1.3);
     z-index: 1;
 }
 

src/elements/emby-slider/emby-slider.css

@@ -74,11 +74,11 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider:hover::-webkit-slider-thumb {
-    transform: scale(1.6);
+    transform: scale(1.3);
 }
 
 .mdl-slider.show-focus:focus::-webkit-slider-thumb {
-    transform: scale(1.6);
+    transform: scale(1.3);
 }
 
 .slider-no-webkit-thumb::-webkit-slider-thumb {

src/itemdetails.html

@@ -1,54 +1,120 @@
 <div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
-
-    <style>
-        @media all and (min-width: 62.5em) {
-
-            .itemBackdrop {
-                display: none;
-            }
-        }
-    </style>
-
     <div id="itemBackdrop" class="itemBackdrop noBackdrop">
-        <div class="itemBackdropFader">
+        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
-        </div>
+            <i class="md-icon">play_arrow</i>
-        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"><i class="md-icon">play_arrow</i></button>
+        </button>
     </div>
 
     <div class="detailLogo"></div>
-
+    <div class="detailPageWrapperContainer">
-    <div class="detailPageContent padded-bottom-page">
+        <div class="detailPagePrimaryContainer appfooter-blurred padded-left padded-right">
-
+            <div class="infoWrapper infoText">
-        <div class="detailPagePrimaryContainer padded-left padded-right">
+                <div class="nameContainer"></div>
-            <div class="detailImageContainer">
+                <div class="itemMiscInfo itemMiscInfo-primary"></div>
+                <div class="itemMiscInfo itemMiscInfo-secondary"></div>
             </div>
-            <div class="detailPagePrimaryContent">
 
+            <div class="mainDetailButtons">
+                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">play_arrow</i>
+                        <div class="detailButton-mobile-text">${ButtonResume}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" data-mode="play">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">play_arrow</i>
+                        <div class="detailButton-mobile-text">${ButtonPlay}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">get_app</i>
+                        <div class="detailButton-mobile-text">${ButtonDownload}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">theaters</i>
+                        <div class="detailButton-mobile-text">${ButtonTrailer}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">shuffle</i>
+                        <div class="detailButton-mobile-text">${HeaderInstantMix}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">shuffle</i>
+                        <div class="detailButton-mobile-text">${ButtonShuffle}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">delete</i>
+                        <div class="detailButton-mobile-text">${CancelSeries}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">stop</i>
+                        <div class="detailButton-mobile-text">${StopRecording}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">delete</i>
+                        <div class="detailButton-mobile-text">${Delete}</div>
+                    </div>
+                </button>
+
+                <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">check</i>
+                        <div class="detailButton-mobile-text button-text"></div>
+                    </div>
+                </button>
+
+                <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">favorite</i>
+                        <div class="detailButton-mobile-text button-text">${Rate}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon">call_split</i>
+                        <div class="detailButton-mobile-text">${ButtonSplit}</div>
+                    </div>
+                </button>
+
+                <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile">
+                    <div class="detailButton-mobile-content">
+                        <i class="md-icon detailButton-mobile-icon"></i>
+                        <div class="detailButton-mobile-text">${ButtonMore}</div>
+                    </div>
+                </button>
+            </div>
+        </div>
+        <div class="detailImageContainer verticalSection-extrabottompadding padded-left"></div>
+        <div class="detailPageSecondaryContainer">
+            <div class="detailPageContent">
+                <div class="detailPagePrimaryContent padded-left padded-right">
                     <div class="detailSection" style="margin-bottom: 0;">
-
+                        <div class="itemMiscInfo nativeName hide"></div>
-                    <div class="nameContainer">
+                        <div class="genres hide" style="margin: .7em 0;font-size:92%;"></div>
-
+                        <div class="directors hide" style="margin: .7em 0;font-size:92%;"></div>
-                    </div>
-
-                    <div class="itemMiscInfo nativeName hide">
-
-                    </div>
-
-                    <div class="itemMiscInfo itemMiscInfo-primary" style="margin: .7em 0;font-size:92%;">
-
-                    </div>
-
-                    <div class="itemMiscInfo itemMiscInfo-secondary" style="margin: .7em 0;font-size:92%;">
-
-                    </div>
-
-                    <div class="genres hide" style="margin: .7em 0;font-size:92%;">
-
-                    </div>
-
-                    <div class="directors hide" style="margin: .7em 0;font-size:92%;">
-
-                    </div>
 
                         <form class="trackSelections flex align-items-center flex-wrap-wrap hide focuscontainer-x" style="margin: .5em 0;font-size:92%; padding: 0;">
                             <div class="selectContainer selectContainer-inline selectSourceContainer hide trackSelectionFieldContainer flex-shrink-zero" style="margin-right:1.5em;">
@@ -65,134 +131,7 @@
                             </div>
                         </form>
 
-                    <div class="mainDetailButtons">
+                        <div class="recordingFields hide" style="margin: .5em 0 1.5em;"></div>
-
-                        <button is="emby-button" type="button" class="raised btnResume hide detailButton" data-mode="resume">
-                            <span>${ButtonResume}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="raised btnPlay hide detailButton" data-mode="play">
-                            <span>${ButtonPlay}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">get_app</i>
-                                <div class="detailButton-mobile-text">${ButtonDownload}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="raised btnDownload hide detailButton">
-                            <span>${ButtonDownload}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">theaters</i>
-                                <div class="detailButton-mobile-text">${ButtonTrailer}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="raised btnPlayTrailer hide detailButton">
-                            <span>${ButtonTrailer}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">shuffle</i>
-                                <div class="detailButton-mobile-text">${HeaderInstantMix}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="raised btnInstantMix hide detailButton">
-                            <span>${HeaderInstantMix}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">shuffle</i>
-                                <div class="detailButton-mobile-text">${ButtonShuffle}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="raised btnShuffle hide detailButton">
-                            <span>${ButtonShuffle}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">delete</i>
-                                <div class="detailButton-mobile-text">${CancelSeries}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="raised btnCancelSeriesTimer hide detailButton">
-                            <span>${CancelSeries}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">stop</i>
-                                <div class="detailButton-mobile-text">${StopRecording}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="raised btnCancelTimer hide detailButton">
-                            <span>${StopRecording}</span>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnDeleteItem hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">delete</i>
-                                <div class="detailButton-mobile-text">${Delete}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="fab btnDeleteItem hide detailButton">
-                            <i class="md-icon">delete</i>
-                        </button>
-
-                        <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">check</i>
-                                <div class="detailButton-mobile-text button-text"></div>
-                            </div>
-                        </button>
-
-                        <button is="emby-playstatebutton" type="button" class="fab btnPlaystate hide detailButton">
-                            <i class="md-icon">check</i>
-                        </button>
-
-                        <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">favorite</i>
-                                <div class="detailButton-mobile-text button-text">${Rate}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-ratingbutton" type="button" class="fab btnUserRating hide detailButton">
-                            <i class="md-icon">favorite</i>
-                        </button>
-
-                        <button is="emby-button" type="button" class="fab btnSplitVersions hide  detailButton">
-                            <i class="md-icon">call_split</i>
-                        </button>
-
-                        <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile">
-                            <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon"></i>
-                                <div class="detailButton-mobile-text">${ButtonMore}</div>
-                            </div>
-                        </button>
-
-                        <button is="emby-button" type="button" class="fab btnMoreCommands hide detailButton">
-                            <i class="md-icon">more_horiz</i>
-                        </button>
-                    </div>
-
-                    <div class="recordingFields hide" style="margin: .5em 0 1.5em;">
-                    </div>
-
                         <div class="detailSectionContent">
                             <div class="itemLastPlayed hide"></div>
 
@@ -204,33 +143,29 @@
                             <p id="itemDeathDate"></p>
                             <p id="seriesAirTime"></p>
 
-                        <div class="itemTags hide" style="margin: .7em 0;font-size:92%;">
+                            <div class="itemTags hide" style="margin: .7em 0;font-size:92%;"></div>
+                            <div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;"></div>
+                            <div class="seriesRecordingEditor"></div>
+                        </div>
+                    </div>
                 </div>
 
-                        <div class="itemExternalLinks hide" style="margin: .7em 0;font-size:92%;">
-                        </div>
-
-                        <div class="seriesRecordingEditor">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
                 <div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;">
-            <h2 class="sectionTitle padded-left">
+                    <h2 class="sectionTitle padded-left">${HeaderSchedule}</h2>
-                ${HeaderSchedule}
+                    <div class="seriesTimerSchedule padded-left padded-right"></div>
-            </h2>
-            <div class="seriesTimerSchedule padded-left padded-right">
-            </div>
                 </div>
+
                 <div class="collectionItems"></div>
+
                 <div class="nextUpSection verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
                     <div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
                 </div>
+
                 <div class="programGuideSection hide verticalSection detailVerticalSection">
                     <div class="programGuide"></div>
                 </div>
+
                 <div id="childrenCollapsible" class="hide verticalSection detailVerticalSection">
                     <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards padded-left">
                         <span id="childrenTitle"></span>
@@ -239,40 +174,46 @@
                         <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div>
                     </div>
                 </div>
+
                 <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
-            <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+                    <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
                 </div>
+
                 <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
+
                 <div class="verticalSection itemVerticalSection moreFromArtistSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-left padded-right"></h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
+
                 <div id="castCollapsible" class="verticalSection detailVerticalSection hide">
                     <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderCastCrew}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
                         <div id="castContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
+
                 <div id="seriesScheduleSection" class="verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle padded-left padded-right">${HeaderUpcomingOnTV}</h2>
-            <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list padded-left padded-right"></div>
+                    <div id="seriesScheduleList" is="emby-itemscontainer" class="itemsContainer vertical-list"></div>
                 </div>
 
                 <div id="specialsCollapsible" class="verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderSpecialFeatures}</h2>
-            <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+                    <div id="specialsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
                 </div>
+
                 <div id="musicVideosCollapsible" class="verticalSection detailVerticalSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderMusicVideos}</h2>
-            <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-left padded-right"></div>
+                    <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap"></div>
                 </div>
 
                 <div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
@@ -290,3 +231,5 @@
                 </div>
             </div>
         </div>
+    </div>
+</div>

src/strings/en-us.json

@@ -127,6 +127,7 @@
     "ButtonSort": "Sort",
     "ButtonStart": "Start",
     "ButtonStop": "Stop",
+    "ButtonSplit": "Split",
     "ButtonSubmit": "Submit",
     "ButtonSubtitles": "Subtitles",
     "ButtonTrailer": "Trailer",

src/themes/appletv/theme.css

@@ -392,10 +392,6 @@ html {
     color: #fff
 }
 
-.itemBackdropFader {
-    background: linear-gradient(rgba(0, 0, 0, 0), #E4E2DC)
-}
-
 .infoBanner {
     color: #000;
     background: #fff3a5;

src/themes/blueradiance/theme.css

@@ -398,10 +398,6 @@ html {
     color: #fff
 }
 
-.itemBackdropFader {
-    background: linear-gradient(rgba(0, 0, 0, 0), #181818)
-}
-
 .infoBanner {
     color: #ddd;
     background: #111;

src/themes/dark/theme.css

@@ -375,10 +375,6 @@ html {
     color: #fff
 }
 
-.itemBackdropFader {
-    background: linear-gradient(rgba(0, 0, 0, 0), #101010)
-}
-
 .infoBanner {
     color: #ddd;
     background: #111;

src/themes/emby/theme.css

@@ -375,10 +375,6 @@ html {
     color: #fff
 }
 
-.itemBackdropFader {
-    background: linear-gradient(rgba(0, 0, 0, 0), #1a1a1a)
-}
-
 .infoBanner {
     color: #ddd;
     background: #111;

src/themes/light/theme.css

@@ -392,10 +392,6 @@ html {
     color: #fff
 }
 
-.itemBackdropFader {
-    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
-}
-
 .infoBanner {
     color: #000;
     background: #fff3a5;

src/themes/purple-haze/theme.css

@@ -491,10 +491,6 @@ a[data-role=button] {
     color: #fff
 }
 
-.itemBackdropFader {
-    background: linear-gradient(rgba(0, 0, 0, 0), #181818)
-}
-
 .infoBanner {
     color: #0e0f2d;
     background: #dbe6ff;
@@ -562,3 +558,30 @@ a[data-role=button] {
 .metadataSidebarIcon {
     color: #dbe6ff
 }
+
+.personCard .overflowPortraitCard {
+    width: 40vw;
+}
+
+.personCard .cardScalable {
+    border-radius: 50%;
+    border: 1px solid rgb(255, 255, 255);
+}
+
+.personCard .cardPadder-overflowPortrait,
+.personCard .cardPadder-portrait {
+    padding-bottom: 100%;
+    contain: strict;
+}
+
+.personCard .coveredImage  {
+    clip-path: circle(50% at 50% 50%);
+}
+
+.personCard .cardOverlayContainer  {
+    clip-path: circle(50% at 50% 50%);
+}
+
+.personCard .cardOverlayButton-br {
+    right: 20%;
+}

src/themes/wmc/theme.css

@@ -377,10 +377,6 @@ html {
     color: #fff
 }
 
-.itemBackdropFader {
-    background: linear-gradient(rgba(0, 0, 0, 0), #115E9E)
-}
-
 .infoBanner {
     color: #000;
     background: #fff3a5;