redesign detail page

src/components/themes/appletv/theme.css

@@ -463,3 +463,7 @@ html {
 .metadataSidebarIcon {
     color: #00a4dc
 }
+
+.detailPagePrimaryContainer {
+    background-color: rgba(255, 255, 255, 0.4)
+}

src/components/themes/blueradiance/theme.css

@@ -471,3 +471,7 @@ html {
 .metadataSidebarIcon {
     color: #00a4dc
 }
+
+.detailPagePrimaryContainer {
+    background-color: rgba(0, 0, 0, 0.4)
+}

src/components/themes/dark/theme.css

@@ -448,3 +448,7 @@ html {
 .metadataSidebarIcon {
     color: #00a4dc
 }
+
+.detailPagePrimaryContainer {
+    background-color: rgba(0, 0, 0, 0.4)
+}

src/components/themes/emby/theme.css

@@ -448,3 +448,7 @@ html {
 .metadataSidebarIcon {
     color: #00a4dc
 }
+
+.detailPagePrimaryContainer {
+    background-color: rgba(0, 0, 0, 0.4)
+}

src/components/themes/light/theme.css

@@ -444,3 +444,7 @@ html {
 .metadataSidebarIcon {
     color: #00a4dc
 }
+
+.detailPagePrimaryContainer {
+    background-color: rgba(255, 255, 255, 0.4)
+}

src/components/themes/purple-haze/theme.css

@@ -576,3 +576,7 @@ a[data-role=button] {
 .metadataSidebarIcon {
     color: #dbe6ff
 }
+
+.detailPagePrimaryContainer {
+    background-color: rgba(0, 0, 0, 0.4)
+}

src/components/themes/wmc/theme.css

@@ -466,3 +466,7 @@ html {
 .metadataSidebarIcon {
     color: #00a4dc
 }
+
+.detailPagePrimaryContainer {
+    background-color: rgba(0, 0, 0, 0.4)
+}

src/controllers/itemdetailpage.js

@@ -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' href='#'>";
         }
 
         if (detectRatio && item.PrimaryImageAspectRatio) {
@@ -828,7 +826,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             html += progressHtml;
         }
 
-        html += "</div>";
         html += "</div>";
         elem.innerHTML = html;
 
@@ -1531,12 +1528,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
             if (!(currentStartDate && currentStartDate.toDateString() === itemStartDate.toDateString())) {
                 if (currentItems.length) {
                     html += '<div class="verticalSection verticalDetailSection">';
-                    html += '<h2 class="sectionTitle padded-left">' + datetime.toLocaleDateString(currentStartDate, {
+                    html += '<h2 class="sectionTitle">' + datetime.toLocaleDateString(currentStartDate, {
                         weekday: "long",
                         month: "long",
                         day: "numeric"
                     }) + "</h2>";
-                    html += '<div is="emby-itemscontainer" class="vertical-list padded-left padded-right">' + listView.getListViewHtml({
+                    html += '<div is="emby-itemscontainer" class="vertical-list">' + listView.getListViewHtml({
                         items: currentItems,
                         enableUserDataButtons: false,
                         showParentTitle: true,
@@ -1556,12 +1553,12 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
 
         if (currentItems.length) {
             html += '<div class="verticalSection verticalDetailSection">';
-            html += '<h2 class="sectionTitle padded-left">' + datetime.toLocaleDateString(currentStartDate, {
+            html += '<h2 class="sectionTitle">' + datetime.toLocaleDateString(currentStartDate, {
                 weekday: "long",
                 month: "long",
                 day: "numeric"
             }) + "</h2>";
-            html += '<div is="emby-itemscontainer" class="vertical-list padded-left padded-right">' + listView.getListViewHtml({
+            html += '<div is="emby-itemscontainer" class="vertical-list">' + listView.getListViewHtml({
                 items: currentItems,
                 enableUserDataButtons: false,
                 showParentTitle: true,
@@ -1728,13 +1725,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana
     function renderCollectionItemType(page, parentItem, type, items) {
         var html = "";
         html += '<div class="verticalSection">';
-        html += '<div class="sectionTitleContainer sectionTitleContainer-cards padded-left">';
+        html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
         html += '<h2 class="sectionTitle sectionTitle-cards">';
         html += "<span>" + type.name + "</span>";
         html += "</h2>";
         html += '<button class="btnAddToCollection sectionTitleButton" type="button" is="paper-icon-button-light" style="margin-left:1em;"><i class="md-icon" icon="add">add</i></button>';
         html += "</div>";
-        html += '<div is="emby-itemscontainer" class="itemsContainer collectionItemsContainer vertical-wrap padded-left padded-right">';
+        html += '<div is="emby-itemscontainer" class="itemsContainer collectionItemsContainer vertical-wrap">';
         var shape = "MusicAlbum" == type.type ? getSquareShape(false) : getPortraitShape(false);
         html += cardBuilder.getCardsHtml({
             items: items,

src/css/librarybrowser.css

@@ -421,9 +421,15 @@
     left: .8em
 }
 
+.noBackdrop {
+    display:none;
+}
+
 .itemBackdrop {
     -webkit-background-size: cover;
     background-size: cover;
+    background-position: center center;
+    background-repeat: no-repeat;
     height: 50vh;
     position: relative
 }
@@ -448,12 +454,31 @@
     bottom: .75em
 }
 
+.detailPagePrimaryContainer {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
+.detailPageSeconderyContainer {
+    display:grid;
+    grid-template-columns: 100%;
+    padding-left:2%;
+    padding-right:2%;
+}
+
 .detailImageContainer {
-    margin-right: 2em;
+    padding-left:2%;
     width: 280px;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
-    margin-left: .6em
+    position: sticky;
+    top:15%;
+    float: left;
 }
 
 .detailPagePrimaryContent {
@@ -504,7 +529,7 @@
 }
 
 .thumbDetailImageContainer {
-    width: 400px
+    width: 280px;
 }
 
 @media all and (max-width:62.5em) {
@@ -513,9 +538,6 @@
     }
 
     .detailImageContainer {
-        position: absolute;
-        top: -90px;
-        left: 5%;
         width: auto
     }
 
@@ -529,19 +551,6 @@
     }
 }
 
-@media all and (min-width:62.5em) {
-    .itemBackdrop {
-        display: none
-    }
-
-    .detailPagePrimaryContainer {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: flex;
-        margin-bottom: 3em
-    }
-}
-
 @media all and (max-width:75em) {
     .lnkSibling {
         display: none !important
@@ -575,12 +584,18 @@
     }
 
     .itemDetailPage {
-        padding-top: 0 !important
+        padding-top: 2em !important
     }
 
     .detailimg-hidemobile {
         display: none
     }
+
+    .detailPagePrimaryContainer {
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
 }
 
 @media all and (min-width:31.25em) {
@@ -723,7 +738,7 @@
 }
 
 @media all and (min-width:62.5em) {
-    .detailButton-mobile {
+    .detailFloatingButton {
         display: none !important
     }
 
@@ -775,13 +790,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
     }
 }
 
@@ -1016,14 +1029,6 @@
     }
 }
 
-.layout-tv .itemsViewSettingsContainer {
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
-    justify-content: flex-end;
-    padding: 1.5em .75em 1em 0;
-    font-size: 92%
-}
-
 .itemsViewSettingsContainer>.button-flat {
     margin: 0
 }

src/itemdetails.html

@@ -1,35 +1,118 @@
 <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">
         </div>
-        <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 is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize"
+            title="${ButtonPlay}" data-mode="resume"><i class="md-icon">play_arrow</i></button>
     </div>
 
     <div class="detailLogo"></div>
 
-    <div class="detailPageContent padded-bottom-page">
+    <div class="detailPageWrapperContainer">
-
         <div class="detailPagePrimaryContainer padded-left padded-right">
-            <div class="detailImageContainer">
+
+            <div class="nameContainer"></div>
+
+            <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="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>
+            </div>
+        </div>
+        <div class="detailImageContainer"></div>
+        <div class="detailPageSeconderyContainer">
+
+            <div class="detailPageContent">
+
                 <div class="detailPagePrimaryContent">
-
                     <div class="detailSection" style="margin-bottom: 0;">
 
-                    <div class="nameContainer">
-
-                    </div>
-
                         <div class="itemMiscInfo nativeName hide">
 
                         </div>
@@ -65,131 +148,6 @@
                             </div>
                         </form>
 
-                    <div class="mainDetailButtons">
-
-                        <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>
 
@@ -215,77 +173,82 @@
                         </div>
                     </div>
                 </div>
-        </div>
                 <div class="seriesTimerScheduleSection verticalSection detailVerticalSection hide" style="margin-top:-3em;">
-            <h2 class="sectionTitle padded-left">
+                    <h2 class="sectionTitle">
                         ${HeaderSchedule}
                     </h2>
-            <div class="seriesTimerSchedule padded-left padded-right">
+                    <div class="seriesTimerSchedule">
                     </div>
                 </div>
                 <div class="collectionItems"></div>
                 <div class="nextUpSection verticalSection detailVerticalSection hide">
-            <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderNextUp}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderNextUp}</h2>
-            <div is="emby-itemscontainer" class="nextUpItems vertical-wrap padded-left padded-right"></div>
+                    <div is="emby-itemscontainer" class="nextUpItems vertical-wrap"></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">
+                    <h2 class="childrenSectionHeader sectionTitle sectionTitle-cards">
                         <span id="childrenTitle"></span>
                     </h2>
                     <div id="childrenContent">
-                <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer padded-left padded-right" style="text-align: left;"></div>
+                        <div is="emby-itemscontainer" class="childrenItemsContainer itemsContainer" style="text-align: left;"></div>
                     </div>
                 </div>
                 <div id="additionalPartsCollapsible" class="verticalSection detailVerticalSection hide">
-            <h2 class="sectionTitle sectionTitle-cards padded-left">${HeaderAdditionalParts}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards">${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>
+                    <h2 class="sectionTitle sectionTitle-cards"></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>
+                    <h2 class="sectionTitle sectionTitle-cards"></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>
+                    <h2 id="peopleHeader" class="sectionTitle sectionTitle-cards">${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 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>
+                    <h2 class="sectionTitle">${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>
+                    <h2 class="sectionTitle sectionTitle-cards">${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>
+                    <h2 class="sectionTitle sectionTitle-cards">${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">
-            <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderScenes}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderScenes}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-mousewheel="false" data-centerfocus="true">
                         <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
 
                 <div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
-            <h2 class="sectionTitle sectionTitle-cards padded-left padded-right">${HeaderMoreLikeThis}</h2>
+                    <h2 class="sectionTitle sectionTitle-cards">${HeaderMoreLikeThis}</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 similarContent"></div>
+                        <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent">
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>