mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Merge pull request #823 from MrTimscampi/details-rework
Details page artwork ribbon revamp
This commit is contained in:
dkanada
GitHub
commit
a44a9c0d7a
7 changed files with 122 additions and 77 deletions
|
|
@ -29,7 +29,7 @@ h3 {
|
|||
}
|
||||
|
||||
.layout-tv {
|
||||
font-size: 2.5vh;
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
.layout-mobile {
|
||||
|
|
|
|||
|
|
@ -439,10 +439,42 @@
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
height: 50vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layout-desktop .itemBackdrop::after,
|
||||
.layout-tv .itemBackdrop::after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .itemBackdrop,
|
||||
.layout-tv .noBackdrop .itemBackdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.detailPageContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailPageContent,
|
||||
.layout-tv .noBackdrop .detailPageContent {
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailImageContainer img,
|
||||
.layout-tv .noBackdrop .detailImageContainer img {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.personBackdrop {
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
@ -509,8 +541,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
position: sticky;
|
||||
top: 3.85em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
|
@ -520,13 +550,21 @@
|
|||
top: 0;
|
||||
}
|
||||
|
||||
.layout-tv .detailPagePrimaryContainer {
|
||||
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
|
||||
.layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer {
|
||||
position: relative;
|
||||
top: 0;
|
||||
padding-left: 32.45vw;
|
||||
}
|
||||
|
||||
.detailSticky {
|
||||
background-color: #101010;
|
||||
.layout-desktop .detailSticky,
|
||||
.layout-tv .detailSticky {
|
||||
margin-top: -7.2em;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailSticky,
|
||||
.layout-tv .noBackdrop .detailSticky {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.infoWrapper {
|
||||
|
|
@ -548,23 +586,17 @@
|
|||
margin: 1.25em 0;
|
||||
}
|
||||
|
||||
.detailPageContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
.detailImageContainer {
|
||||
position: sticky;
|
||||
top: 25%;
|
||||
position: relative;
|
||||
margin-top: -25vh;
|
||||
float: left;
|
||||
width: 22.786458333333332vw;
|
||||
width: 25vw;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.layout-mobile .detailImageContainer,
|
||||
.layout-tv .detailImageContainer {
|
||||
position: relative;
|
||||
.layout-desktop .noBackdrop .detailImageContainer,
|
||||
.layout-tv .noBackdrop .detailImageContainer {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.detailPagePrimaryContent {
|
||||
|
|
@ -572,15 +604,19 @@
|
|||
}
|
||||
|
||||
.detailLogo {
|
||||
width: 25em;
|
||||
height: 9.375em;
|
||||
width: 67.25vw;
|
||||
height: 14.5vh;
|
||||
position: absolute;
|
||||
top: 14.5%;
|
||||
right: 10.5%;
|
||||
top: 15vh;
|
||||
right: 0;
|
||||
-webkit-background-size: contain;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.noBackdrop .detailLogo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media all and (max-width: 87.5em) {
|
||||
.detailLogo {
|
||||
right: 5%;
|
||||
|
|
@ -607,8 +643,8 @@
|
|||
|
||||
.itemDetailImage {
|
||||
width: 100% !important;
|
||||
box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||
-webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
|
||||
-webkit-box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
|
||||
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
div.itemDetailGalleryLink.defaultCardBackground {
|
||||
|
|
@ -635,6 +671,16 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.layout-desktop .detailPageWrapperContainer,
|
||||
.layout-tv .detailPageWrapperContainer {
|
||||
margin-top: 7.2em;
|
||||
}
|
||||
|
||||
.layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
|
||||
.layout-desktop #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer {
|
||||
padding-left: 3.3%;
|
||||
}
|
||||
|
||||
.btnPlaySimple {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -849,6 +895,11 @@ div.itemDetailGalleryLink.defaultCardBackground {
|
|||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.layout-desktop .noBackdrop .detailPageWrapperContainer,
|
||||
.layout-tv .noBackdrop .detailPageWrapperContainer {
|
||||
margin-top: 3.8em;
|
||||
}
|
||||
|
||||
.mediaInfoStream {
|
||||
margin: 0 3em 0 0;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuilder", "datetime", "mediaInfo", "backdrop", "listView", "itemContextMenu", "itemHelper", "dom", "indicators", "apphost", "imageLoader", "libraryMenu", "globalize", "browser", "events", "scrollHelper", "playbackManager", "libraryBrowser", "scrollStyles", "emby-itemscontainer", "emby-checkbox", "emby-button", "emby-playstatebutton", "emby-ratingbutton", "emby-scroller", "emby-select"], function (loading, appRouter, layoutManager, connectionManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, appHost, imageLoader, libraryMenu, globalize, browser, events, scrollHelper, playbackManager, libraryBrowser) {
|
||||
define(["loading", "appRouter", "layoutManager", "connectionManager", "userSettings", "cardBuilder", "datetime", "mediaInfo", "backdrop", "listView", "itemContextMenu", "itemHelper", "dom", "indicators", "imageLoader", "libraryMenu", "globalize", "browser", "events", "playbackManager", "scrollStyles", "emby-itemscontainer", "emby-checkbox", "emby-button", "emby-playstatebutton", "emby-ratingbutton", "emby-scroller", "emby-select"], function (loading, appRouter, layoutManager, connectionManager, userSettings, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, dom, indicators, imageLoader, libraryMenu, globalize, browser, events, playbackManager) {
|
||||
"use strict";
|
||||
|
||||
function getPromise(apiClient, params) {
|
||||
|
|
@ -60,8 +60,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
return options;
|
||||
}
|
||||
|
||||
function getProgramScheduleHtml(items, options) {
|
||||
options = options || {};
|
||||
function getProgramScheduleHtml(items) {
|
||||
var html = "";
|
||||
html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
|
||||
html += listView.getListViewHtml({
|
||||
|
|
@ -445,7 +444,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
}
|
||||
}
|
||||
|
||||
function renderBackdrop(page, item, apiClient) {
|
||||
function renderBackdrop(item) {
|
||||
if (dom.getWindowSize().innerWidth >= 1000) {
|
||||
backdrop.setBackdrops([item]);
|
||||
} else {
|
||||
|
|
@ -455,7 +454,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
|
||||
function renderDetailPageBackdrop(page, item, apiClient) {
|
||||
var imgUrl;
|
||||
var screenWidth = screen.availWidth;
|
||||
var hasbackdrop = false;
|
||||
var itemBackdropElement = page.querySelector("#itemBackdrop");
|
||||
var usePrimaryImage = item.MediaType === "Video" && item.Type !== "Movie" && item.Type !== "Trailer" ||
|
||||
|
|
@ -464,13 +462,17 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
item.Type === "MusicArtist" ||
|
||||
item.Type === "Person";
|
||||
|
||||
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ("Program" === item.Type && item.ImageTags && item.ImageTags.Thumb) {
|
||||
imgUrl = apiClient.getScaledImageUrl(item.Id, {
|
||||
type: "Thumb",
|
||||
index: 0,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
itemBackdropElement.classList.remove("noBackdrop");
|
||||
page.classList.remove("noBackdrop");
|
||||
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
||||
hasbackdrop = true;
|
||||
} else if (usePrimaryImage && item.ImageTags && item.ImageTags.Primary) {
|
||||
|
|
@ -479,7 +481,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
index: 0,
|
||||
tag: item.ImageTags.Primary
|
||||
});
|
||||
itemBackdropElement.classList.remove("noBackdrop");
|
||||
page.classList.remove("noBackdrop");
|
||||
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
||||
hasbackdrop = true;
|
||||
} else if (item.BackdropImageTags && item.BackdropImageTags.length) {
|
||||
|
|
@ -488,7 +490,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
index: 0,
|
||||
tag: item.BackdropImageTags[0]
|
||||
});
|
||||
itemBackdropElement.classList.remove("noBackdrop");
|
||||
page.classList.remove("noBackdrop");
|
||||
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
||||
hasbackdrop = true;
|
||||
} else if (item.ParentBackdropItemId && item.ParentBackdropImageTags && item.ParentBackdropImageTags.length) {
|
||||
|
|
@ -497,7 +499,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
index: 0,
|
||||
tag: item.ParentBackdropImageTags[0]
|
||||
});
|
||||
itemBackdropElement.classList.remove("noBackdrop");
|
||||
page.classList.remove("noBackdrop");
|
||||
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
||||
hasbackdrop = true;
|
||||
} else if (item.ImageTags && item.ImageTags.Thumb) {
|
||||
|
|
@ -506,15 +508,16 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
index: 0,
|
||||
tag: item.ImageTags.Thumb
|
||||
});
|
||||
itemBackdropElement.classList.remove("noBackdrop");
|
||||
page.classList.remove("noBackdrop");
|
||||
imageLoader.lazyImage(itemBackdropElement, imgUrl, false);
|
||||
hasbackdrop = true;
|
||||
} else {
|
||||
itemBackdropElement.classList.add("noBackdrop");
|
||||
itemBackdropElement.style.backgroundImage = "";
|
||||
}
|
||||
|
||||
if ("Person" === item.Type) {
|
||||
// FIXME: This hides the backdrop on all persons to fix a margin issue. Ideally, a proper fix should be made.
|
||||
page.classList.add('noBackdrop');
|
||||
itemBackdropElement.classList.add("personBackdrop");
|
||||
} else {
|
||||
itemBackdropElement.classList.remove("personBackdrop");
|
||||
|
|
@ -526,6 +529,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
function reloadFromItem(instance, page, params, item, user) {
|
||||
var context = params.context;
|
||||
page.querySelector(".detailPagePrimaryContainer").classList.add("detailSticky");
|
||||
|
||||
renderName(item, page.querySelector(".nameContainer"), false, context);
|
||||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
||||
renderSeriesTimerEditor(page, item, apiClient, user);
|
||||
|
|
@ -536,7 +540,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
setInitialCollapsibleState(page, item, apiClient, context, user);
|
||||
renderDetails(page, item, apiClient, context);
|
||||
renderTrackSelections(page, instance, item);
|
||||
renderBackdrop(page, item, apiClient);
|
||||
renderBackdrop(item);
|
||||
renderDetailPageBackdrop(page, item, apiClient);
|
||||
var canPlay = reloadPlayButtons(page, item);
|
||||
|
||||
|
|
@ -663,7 +667,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
});
|
||||
var detailLogo = page.querySelector(".detailLogo");
|
||||
|
||||
if (url) {
|
||||
if (!layoutManager.mobile && !userSettings.enableBackdrops()) {
|
||||
detailLogo.classList.add("hide");
|
||||
} else if (url) {
|
||||
detailLogo.classList.remove("hide");
|
||||
detailLogo.classList.add("lazy");
|
||||
detailLogo.setAttribute("data-src", url);
|
||||
|
|
@ -817,7 +823,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
if (editable) {
|
||||
html += "</a>";
|
||||
} else if (!editable && url === undefined) {
|
||||
html += "</div>"
|
||||
html += "</div>";
|
||||
}
|
||||
|
||||
var progressHtml = item.IsFolder || !item.UserData ? "" : indicators.getProgressBarHtml(item);
|
||||
|
|
@ -873,7 +879,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
elem.querySelector(".detailImageProgressContainer").innerHTML = indicators.getProgressBarHtml(item);
|
||||
}
|
||||
|
||||
function refreshImage(page, item, user) {
|
||||
function refreshImage(page, item) {
|
||||
refreshDetailImageUserData(page.querySelector(".detailImageContainer"), item);
|
||||
}
|
||||
|
||||
|
|
@ -922,10 +928,10 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
|
||||
if ("Playlist" == item.Type) {
|
||||
page.querySelector("#childrenCollapsible").classList.remove("hide");
|
||||
renderPlaylistItems(page, item, user);
|
||||
renderPlaylistItems(page, item);
|
||||
} else if ("Studio" == item.Type || "Person" == item.Type || "Genre" == item.Type || "MusicGenre" == item.Type || "MusicArtist" == item.Type) {
|
||||
page.querySelector("#childrenCollapsible").classList.remove("hide");
|
||||
renderItemsByName(page, item, user);
|
||||
renderItemsByName(page, item);
|
||||
} else if (item.IsFolder) {
|
||||
if ("BoxSet" == item.Type) {
|
||||
page.querySelector("#childrenCollapsible").classList.add("hide");
|
||||
|
|
@ -937,7 +943,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
}
|
||||
|
||||
if ("Series" == item.Type) {
|
||||
renderSeriesSchedule(page, item, user);
|
||||
renderSeriesSchedule(page, item);
|
||||
renderNextUp(page, item, user);
|
||||
} else {
|
||||
page.querySelector(".nextUpSection").classList.add("hide");
|
||||
|
|
@ -952,7 +958,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
page.querySelector("#specialsCollapsible").classList.add("hide");
|
||||
}
|
||||
|
||||
renderCast(page, item, context, enableScrollX() ? null : 12);
|
||||
renderCast(page, item);
|
||||
|
||||
if (item.PartCount && item.PartCount > 1) {
|
||||
page.querySelector("#additionalPartsCollapsible").classList.remove("hide");
|
||||
|
|
@ -988,7 +994,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
}
|
||||
}
|
||||
|
||||
function renderGenres(page, item, apiClient, context, isStatic) {
|
||||
function renderGenres(page, item, context) {
|
||||
context = context || inferContext(item);
|
||||
var type;
|
||||
var genres = item.GenreItems || [];
|
||||
|
|
@ -1022,7 +1028,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
}
|
||||
}
|
||||
|
||||
function renderDirector(page, item, apiClient, context, isStatic) {
|
||||
function renderDirector(page, item, context) {
|
||||
var directors = (item.People || []).filter(function (p) {
|
||||
return "Director" === p.Type;
|
||||
});
|
||||
|
|
@ -1050,8 +1056,8 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
renderSimilarItems(page, item, context);
|
||||
renderMoreFromSeason(page, item, apiClient);
|
||||
renderMoreFromArtist(page, item, apiClient);
|
||||
renderDirector(page, item, apiClient, context, isStatic);
|
||||
renderGenres(page, item, apiClient, context, isStatic);
|
||||
renderDirector(page, item, context);
|
||||
renderGenres(page, item, context);
|
||||
renderChannelGuide(page, apiClient, item);
|
||||
var taglineElement = page.querySelector(".tagline");
|
||||
|
||||
|
|
@ -1125,14 +1131,6 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
return scrollX ? "overflowSquare" : "square";
|
||||
}
|
||||
|
||||
function getThumbShape(scrollX) {
|
||||
if (null == scrollX) {
|
||||
scrollX = enableScrollX();
|
||||
}
|
||||
|
||||
return scrollX ? "overflowBackdrop" : "backdrop";
|
||||
}
|
||||
|
||||
function renderMoreFromSeason(view, item, apiClient) {
|
||||
var section = view.querySelector(".moreFromSeasonSection");
|
||||
|
||||
|
|
@ -1508,13 +1506,13 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
}
|
||||
}
|
||||
|
||||
function renderItemsByName(page, item, user) {
|
||||
function renderItemsByName(page, item) {
|
||||
require("scripts/itembynamedetailpage".split(","), function () {
|
||||
window.ItemsByName.renderItems(page, item);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPlaylistItems(page, item, user) {
|
||||
function renderPlaylistItems(page, item) {
|
||||
require("scripts/playlistedit".split(","), function () {
|
||||
PlaylistViewer.render(page, item);
|
||||
});
|
||||
|
|
@ -1594,7 +1592,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
}
|
||||
}
|
||||
|
||||
function renderSeriesSchedule(page, item, user) {
|
||||
function renderSeriesSchedule(page, item) {
|
||||
var apiClient = connectionManager.getApiClient(item.ServerId);
|
||||
apiClient.getLiveTvPrograms({
|
||||
UserId: apiClient.getCurrentUserId(),
|
||||
|
|
@ -1844,7 +1842,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
});
|
||||
}
|
||||
|
||||
function renderCast(page, item, context, limit, isStatic) {
|
||||
function renderCast(page, item) {
|
||||
var people = (item.People || []).filter(function (p) {
|
||||
return "Director" !== p.Type;
|
||||
});
|
||||
|
|
@ -1934,7 +1932,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
playbackManager.play(playOptions);
|
||||
}
|
||||
|
||||
function playTrailer(page) {
|
||||
function playTrailer() {
|
||||
playbackManager.playTrailers(currentItem);
|
||||
}
|
||||
|
||||
|
|
@ -1991,11 +1989,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
}
|
||||
|
||||
function onPlayTrailerClick() {
|
||||
playTrailer(view);
|
||||
}
|
||||
|
||||
function onDownloadChange() {
|
||||
reload(self, view, params);
|
||||
playTrailer();
|
||||
}
|
||||
|
||||
function onDownloadClick() {
|
||||
|
|
@ -2050,9 +2044,7 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
if (userData) {
|
||||
currentItem.UserData = userData;
|
||||
reloadPlayButtons(view, currentItem);
|
||||
apiClient.getCurrentUser().then(function (user) {
|
||||
refreshImage(view, currentItem, user);
|
||||
});
|
||||
refreshImage(view, currentItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2083,11 +2075,9 @@ define(["loading", "appRouter", "layoutManager", "connectionManager", "cardBuild
|
|||
});
|
||||
view.addEventListener("click", function (e) {
|
||||
if (dom.parentWithClass(e.target, "moreScenes")) {
|
||||
apiClient.getCurrentUser().then(function (user) {
|
||||
renderScenes(view, currentItem);
|
||||
});
|
||||
renderScenes(view, currentItem);
|
||||
} else if (dom.parentWithClass(e.target, "morePeople")) {
|
||||
renderCast(view, currentItem, params.context);
|
||||
renderCast(view, currentItem);
|
||||
} else if (dom.parentWithClass(e.target, "moreSpecials")) {
|
||||
apiClient.getCurrentUser().then(function (user) {
|
||||
renderSpecials(view, currentItem, user);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage" data-backbutton="true">
|
||||
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
|
||||
<div id="itemDetailPage" data-role="page" class="page libraryPage itemDetailPage noSecondaryNavPage selfBackdropPage noBackdrop" data-backbutton="true">
|
||||
<div id="itemBackdrop" class="itemBackdrop">
|
||||
<button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume">
|
||||
<i class="material-icons play_arrow"></i>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ html {
|
|||
.inputLabelFocused,
|
||||
.selectLabelFocused,
|
||||
.textareaLabelFocused {
|
||||
color: green;
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.checkboxOutline {
|
||||
|
|
|
|||
|
|
@ -201,6 +201,10 @@ html {
|
|||
}
|
||||
|
||||
.detailSticky {
|
||||
background: rgba(32, 32, 32, 0.8);
|
||||
}
|
||||
|
||||
.noBackdrop .detailSticky {
|
||||
background: #202020;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ html {
|
|||
.inputLabelFocused,
|
||||
.selectLabelFocused,
|
||||
.textareaLabelFocused {
|
||||
color: green;
|
||||
color: #00a4dc;
|
||||
}
|
||||
|
||||
.checkboxOutline {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue