diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 1a41fe8015..8b4f766195 100644 --- a/src/assets/css/librarybrowser.css +++ b/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-right: 2em; - flex-shrink: 0; + margin: 1.25em 0; + position: sticky; + top: 15%; + float: left; + width: 22.786458333333332vw; } .detailPagePrimaryContent { @@ -416,11 +455,11 @@ } .detailLogo { - width: 21.3em; - height: 5em; + width: 25em; + height: 9.375em; position: absolute; - top: 13.5%; - right: 19.5%; + top: 14.5%; + right: 10.5%; background-size: contain } @@ -449,12 +488,8 @@ } .itemDetailImage { - width: 100%; - box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37) -} - -.thumbDetailImageContainer { - width: 400px + width: 100% !important; + box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37); } @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; - bottom: 4px; - right: 1px; - left: 1px; - text-align: center + margin-left: 6px; + width: 21.886458333333332vw; } .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 } } diff --git a/src/components/emby-tabs/emby-tabs.css b/src/components/emby-tabs/emby-tabs.css index 00abd7efae..b8831b881a 100644 --- a/src/components/emby-tabs/emby-tabs.css +++ b/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; } diff --git a/src/controllers/itemdetailpage.js b/src/controllers/itemdetailpage.js index 1dac65750b..7209c0f9fc 100644 --- a/src/controllers/itemdetailpage.js +++ b/src/controllers/itemdetailpage.js @@ -419,13 +419,13 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana var offset = parentNameLast ? ".25em" : ".5em"; if (html && !parentNameLast) { - html += '

' + name + '

'; + html += '

' + name + '

'; } else { - html = '

' + name + "

" + html; + html = '

' + name + "

" + html; } if (item.OriginalTitle && item.OriginalTitle != item.Name) { - html += '

' + item.OriginalTitle + '

'; + html += '

' + item.OriginalTitle + '

'; } container.innerHTML = html; @@ -801,10 +801,8 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana }); } - html += '
'; - if (editable) { - html += ""; + html += ""; } if (detectRatio && item.PrimaryImageAspectRatio) { @@ -828,7 +826,6 @@ define(["loading", "appRouter", "layoutManager", "userSettings", "connectionMana html += progressHtml; } - html += "
"; html += ""; 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" }); }); } diff --git a/src/elements/emby-button/emby-button.css b/src/elements/emby-button/emby-button.css index 38d62b1299..ee15e2e125 100644 --- a/src/elements/emby-button/emby-button.css +++ b/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; } diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css index 50021fdb51..6fc861deb0 100644 --- a/src/elements/emby-slider/emby-slider.css +++ b/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 { diff --git a/src/itemdetails.html b/src/itemdetails.html index 2a29cce96b..5240cd5744 100644 --- a/src/itemdetails.html +++ b/src/itemdetails.html @@ -1,292 +1,235 @@
- - -
-
-
- +
- -
- -
-
+
+
+
+
+
+
-
- -
- -
+
+ -
- + -
- + -
- + -
- + -
- + -
-
- + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+ + +
+ +
+
+ +
+
+ +
+
+ +
+ + +
+
+
+ +

+

+

+

+

+

+

+ +
+
+
-
- -
-
- -
-
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
-
+
+

${HeaderSchedule}

+
+
+ +
+ +
+

${HeaderNextUp}

+
+
+ +
+
+
+ +
+

+ +

+
+
+
-
-
+
+

${HeaderAdditionalParts}

+
+
-

-

-

-

-

-

-

+
+

+
+
+
+
-
-
+
+

+
+
+
+
-
-
+
+

${HeaderCastCrew}

+
+
+
+
-
-
+
+

${HeaderUpcomingOnTV}

+
+
+ +
+

${HeaderSpecialFeatures}

+
+
+ +
+

${HeaderMusicVideos}

+
+
+ +
+

${HeaderScenes}

+
+
+
+
+ +
+

${HeaderMoreLikeThis}

+
+
-
-

- ${HeaderSchedule} -

-
-
-
-
-
-

${HeaderNextUp}

-
-
-
-
-
-
-

- -

-
-
-
-
-
-

${HeaderAdditionalParts}

-
-
-
-

-
-
-
-
-
-

-
-
-
-
-
-

${HeaderCastCrew}

-
-
-
-
-
-

${HeaderUpcomingOnTV}

-
-
- -
-

${HeaderSpecialFeatures}

-
-
-
-

${HeaderMusicVideos}

-
-
- -
-

${HeaderScenes}

-
-
-
-
- -
-

${HeaderMoreLikeThis}

-
-
-
-
diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 1a1cbae5f3..4cc9d9bfcc 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -127,6 +127,7 @@ "ButtonSort": "Sort", "ButtonStart": "Start", "ButtonStop": "Stop", + "ButtonSplit": "Split", "ButtonSubmit": "Submit", "ButtonSubtitles": "Subtitles", "ButtonTrailer": "Trailer", diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index a6e9888e12..acc7ef8210 100644 --- a/src/themes/appletv/theme.css +++ b/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; diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index dca6ab8104..cd1999702e 100644 --- a/src/themes/blueradiance/theme.css +++ b/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; diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 4012c0c7ee..1bcf3af28f 100644 --- a/src/themes/dark/theme.css +++ b/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; diff --git a/src/themes/emby/theme.css b/src/themes/emby/theme.css index e78077c29b..15c329ce7d 100644 --- a/src/themes/emby/theme.css +++ b/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; diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index d330d2250d..9f97054f34 100644 --- a/src/themes/light/theme.css +++ b/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; diff --git a/src/themes/purple-haze/theme.css b/src/themes/purple-haze/theme.css index fe348217d8..fb871b59f5 100644 --- a/src/themes/purple-haze/theme.css +++ b/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%; +} diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index cabb21ba97..1f417b1706 100644 --- a/src/themes/wmc/theme.css +++ b/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;