From 6d5ed18386ec407f8c9216ac6e145237d89a3fe0 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Thu, 20 Aug 2020 12:27:25 +0200 Subject: [PATCH 1/6] Redesign OSD and Up Next dialog --- src/assets/css/videoosd.css | 34 +++-- src/components/upnextdialog/upnextdialog.css | 10 +- src/components/upnextdialog/upnextdialog.js | 75 ----------- src/controllers/playback/video/index.html | 42 +++--- src/controllers/playback/video/index.js | 135 ++----------------- 5 files changed, 57 insertions(+), 239 deletions(-) diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index 808915e58..7273121f5 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -14,21 +14,23 @@ } .osdHeader { - -webkit-transition: opacity 0.3s ease-out; - -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; position: relative; z-index: 1; - background: rgba(0, 0, 0, 0.7) !important; - -webkit-backdrop-filter: none !important; - backdrop-filter: none !important; - color: #eee !important; + background: linear-gradient(180deg, rgba(16, 16 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%); + backdrop-filter: none; + color: #eee; + height: 7.5em; } .osdHeader-hidden { opacity: 0; } +.osdHeader .headerTop { + max-height: 3.5em; +} + .osdHeader .headerButton:not(.headerBackButton):not(.headerCastButton):not(.headerSyncButton) { display: none; } @@ -88,18 +90,13 @@ .videoOsdBottom { position: fixed; - background-color: rgba(0, 0, 0, 0.7); - padding: 1%; - display: -webkit-box; - display: -webkit-flex; + background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%); + padding-top: 10em; + padding-bottom: 1.75em; display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; flex-direction: row; + justify-content: center; will-change: opacity; - -webkit-transition: opacity 0.3s ease-out; - -o-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; color: #fff; user-select: none; @@ -111,9 +108,9 @@ } .osdControls { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; flex-grow: 1; + max-width: calc(100vh * 1.77); + padding: 0 0.8em; } .videoOsdBottom .buttons { @@ -145,7 +142,7 @@ } .volumeButtons { - margin: 0 0.5em 0 auto; + margin: 0 1em 0 0.29em; display: flex; -webkit-align-items: center; align-items: center; @@ -153,6 +150,7 @@ .osdTimeText { margin-left: 1em; + margin-right: auto; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css index 05e3b10f5..067804919 100644 --- a/src/components/upnextdialog/upnextdialog.css +++ b/src/components/upnextdialog/upnextdialog.css @@ -1,6 +1,7 @@ .upNextDialog { + width: 30vw; position: fixed; - left: 0; + left: auto; bottom: 0; right: 0; padding: 1%; @@ -23,6 +24,7 @@ } .upNextDialog-poster { + display: none; max-width: 40%; max-height: 15%; position: relative; @@ -31,6 +33,10 @@ margin-bottom: 0.5em; } +.upNextDialog-buttons { + justify-content: end; +} + .upNextDialog-button { background: #404040; color: #fff; @@ -44,7 +50,7 @@ .upNextDialog-poster { max-width: initial; max-height: initial; - width: 10%; + width: 30%; margin-bottom: 0; } } diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js index e28bb03ab..c665d8117 100644 --- a/src/components/upnextdialog/upnextdialog.js +++ b/src/components/upnextdialog/upnextdialog.js @@ -1,6 +1,5 @@ import dom from 'dom'; import playbackManager from 'playbackManager'; -import connectionManager from 'connectionManager'; import events from 'events'; import mediaInfo from 'mediaInfo'; import layoutManager from 'layoutManager'; @@ -15,78 +14,6 @@ import 'flexStyles'; const transitionEndEventName = dom.whichTransitionEvent(); - function seriesImageUrl(item, options) { - if (item.Type !== 'Episode') { - return null; - } - - options = options || {}; - options.type = options.type || 'Primary'; - - if (options.type === 'Primary') { - if (item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; - - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - } - - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } - } - - return null; - } - - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; - - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } - - if (options.type === 'Primary') { - if (item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - } - - return null; - } - - function setPoster(osdPoster, item, secondaryItem) { - if (item) { - let imgUrl = seriesImageUrl(item, { type: 'Primary' }) || - seriesImageUrl(item, { type: 'Thumb' }) || - imageUrl(item, { type: 'Primary' }); - - if (!imgUrl && secondaryItem) { - imgUrl = seriesImageUrl(secondaryItem, { type: 'Primary' }) || - seriesImageUrl(secondaryItem, { type: 'Thumb' }) || - imageUrl(secondaryItem, { type: 'Primary' }); - } - - if (imgUrl) { - osdPoster.innerHTML = ''; - return; - } - } - - osdPoster.innerHTML = ''; - } - function getHtml() { let html = ''; @@ -146,8 +73,6 @@ import 'flexStyles'; const elem = instance.options.parent; - setPoster(elem.querySelector('.upNextDialog-poster'), item); - elem.querySelector('.upNextDialog-overview').innerHTML = item.Overview || ''; elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, { diff --git a/src/controllers/playback/video/index.html b/src/controllers/playback/video/index.html index 77274230e..6651fc3da 100644 --- a/src/controllers/playback/video/index.html +++ b/src/controllers/playback/video/index.html @@ -1,11 +1,9 @@
-

-
${FetchingData} @@ -16,7 +14,7 @@
-
+
@@ -47,32 +45,18 @@ - - - - - - - -
+ +
+ + + +
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js index 420268ea7..5da8ec45d 100644 --- a/src/controllers/playback/video/index.js +++ b/src/controllers/playback/video/index.js @@ -21,50 +21,6 @@ import 'css!assets/css/videoosd'; /* eslint-disable indent */ - function seriesImageUrl(item, options) { - if (item.Type !== 'Episode') { - return null; - } - - options = options || {}; - options.type = options.type || 'Primary'; - if (options.type === 'Primary' && item.SeriesPrimaryImageTag) { - options.tag = item.SeriesPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (options.type === 'Thumb') { - if (item.SeriesThumbImageTag) { - options.tag = item.SeriesThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.SeriesId, options); - } - - if (item.ParentThumbImageTag) { - options.tag = item.ParentThumbImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.ParentThumbItemId, options); - } - } - - return null; - } - - function imageUrl(item, options) { - options = options || {}; - options.type = options.type || 'Primary'; - - if (item.ImageTags && item.ImageTags[options.type]) { - options.tag = item.ImageTags[options.type]; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.PrimaryImageItemId || item.Id, options); - } - - if (options.type === 'Primary' && item.AlbumId && item.AlbumPrimaryImageTag) { - options.tag = item.AlbumPrimaryImageTag; - return connectionManager.getApiClient(item.ServerId).getScaledImageUrl(item.AlbumId, options); - } - - return null; - } - function getOpenedDialog() { return document.querySelector('.dialogContainer .dialog.opened'); } @@ -164,7 +120,6 @@ import 'css!assets/css/videoosd'; currentItem = item; const displayItem = itemInfo.displayItem || item; updateRecordingButton(displayItem); - setPoster(displayItem, item); let parentName = displayItem.SeriesName || displayItem.Album; if (displayItem.EpisodeTitle || displayItem.IsSeries) { @@ -172,42 +127,6 @@ import 'css!assets/css/videoosd'; } setTitle(displayItem, parentName); - const titleElement = view.querySelector('.osdTitle'); - let displayName = itemHelper.getDisplayName(displayItem, { - includeParentInfo: displayItem.Type !== 'Program', - includeIndexNumber: displayItem.Type !== 'Program' - }); - - if (!displayName) { - displayName = displayItem.Type; - } - - titleElement.innerHTML = displayName; - - if (displayName) { - titleElement.classList.remove('hide'); - } else { - titleElement.classList.add('hide'); - } - - const mediaInfoHtml = mediaInfo.getPrimaryMediaInfoHtml(displayItem, { - runtime: false, - subtitles: false, - tomatoes: false, - endsAt: false, - episodeTitle: false, - originalAirDate: displayItem.Type !== 'Program', - episodeTitleIndexNumber: displayItem.Type !== 'Program', - programIndicator: false - }); - const osdMediaInfo = view.querySelector('.osdMediaInfo'); - osdMediaInfo.innerHTML = mediaInfoHtml; - - if (mediaInfoHtml) { - osdMediaInfo.classList.remove('hide'); - } else { - osdMediaInfo.classList.add('hide'); - } const secondaryMediaInfo = view.querySelector('.osdSecondaryMediaInfo'); const secondaryMediaInfoHtml = mediaInfo.getSecondaryMediaInfoHtml(displayItem, { @@ -222,12 +141,6 @@ import 'css!assets/css/videoosd'; secondaryMediaInfo.classList.add('hide'); } - if (displayName) { - view.querySelector('.osdMainTextContainer').classList.remove('hide'); - } else { - view.querySelector('.osdMainTextContainer').classList.add('hide'); - } - if (enableProgressByTimeOfDay) { setDisplayTime(startTimeText, displayItem.StartDate); setDisplayTime(endTimeText, displayItem.EndDate); @@ -277,7 +190,6 @@ import 'css!assets/css/videoosd'; currentItem = item; if (!item) { - setPoster(null); updateRecordingButton(null); Emby.Page.setTitle(''); nowPlayingVolumeSlider.disabled = true; @@ -314,7 +226,20 @@ import 'css!assets/css/videoosd'; } function setTitle(item, parentName) { - Emby.Page.setTitle(parentName || ''); + let itemName = itemHelper.getDisplayName(item, { + includeParentInfo: item.Type !== 'Program', + includeIndexNumber: item.Type !== 'Program' + }); + + if (itemName && parentName) { + itemName = `${parentName} - ${itemName}`; + } + + if (!itemName) { + itemName = parentName || ''; + } + + Emby.Page.setTitle(itemName); const documentTitle = parentName || (item ? item.Name : null); @@ -323,38 +248,6 @@ import 'css!assets/css/videoosd'; } } - function setPoster(item, secondaryItem) { - const osdPoster = view.querySelector('.osdPoster'); - - if (item) { - let imgUrl = seriesImageUrl(item, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - }) || seriesImageUrl(item, { - maxWidth: osdPoster.clientWidth, - type: 'Thumb' - }) || imageUrl(item, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - }); - - if (!imgUrl && secondaryItem && (imgUrl = seriesImageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - }) || seriesImageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth, - type: 'Thumb' - }) || imageUrl(secondaryItem, { - maxWidth: osdPoster.clientWidth, - type: 'Primary' - })), imgUrl) { - return void (osdPoster.innerHTML = ''); - } - } - - osdPoster.innerHTML = ''; - } - let mouseIsDown = false; function showOsd() { From 3f592881583d18025f8475b58e3f2366a56225e4 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Thu, 20 Aug 2020 20:39:33 +0200 Subject: [PATCH 2/6] Improve Up Next dialog --- src/assets/css/videoosd.css | 51 +++++--------------- src/components/mediainfo/mediainfo.js | 12 ++--- src/components/upnextdialog/upnextdialog.css | 23 +++++++-- src/components/upnextdialog/upnextdialog.js | 13 +++-- 4 files changed, 44 insertions(+), 55 deletions(-) diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index 7273121f5..9995a7ff8 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -6,18 +6,29 @@ -ms-user-select: none; } -.osdPoster img, .videoOsdBottom { bottom: 0; left: 0; right: 0; + position: fixed; + background: linear-gradient(0deg, rgba(16, 16, 16, 0.6) 0%, rgba(16, 16, 16, 0) 100%); + padding-top: 7.5em; + padding-bottom: 1.75em; + display: flex; + flex-direction: row; + justify-content: center; + will-change: opacity; + transition: opacity 0.3s ease-out; + color: #fff; + user-select: none; + -webkit-touch-callout: none; } .osdHeader { transition: opacity 0.3s ease-out; position: relative; z-index: 1; - background: linear-gradient(180deg, rgba(16, 16 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%); + background: linear-gradient(180deg, rgba(16, 16, 16, 0.6) 0%, rgba(16, 16, 16, 0) 100%); backdrop-filter: none; color: #eee; height: 7.5em; @@ -88,21 +99,6 @@ opacity: 0.6; } -.videoOsdBottom { - position: fixed; - background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0.15) 80%, rgba(16, 16, 16, 0) 100%); - padding-top: 10em; - padding-bottom: 1.75em; - display: flex; - flex-direction: row; - justify-content: center; - will-change: opacity; - transition: opacity 0.3s ease-out; - color: #fff; - user-select: none; - -webkit-touch-callout: none; -} - .videoOsdBottom-hidden { opacity: 0; } @@ -157,27 +153,6 @@ user-select: none; } -.osdPoster { - width: 10%; - position: relative; - margin-right: 0.5em; -} - -.osdPoster img { - position: absolute; - height: auto; - width: 100%; - -webkit-box-shadow: 0 0 1.9vh #000; - box-shadow: 0 0 1.9vh #000; - border: 0.08em solid #222; - user-drag: none; - user-select: none; - -moz-user-select: none; - -webkit-user-drag: none; - -webkit-user-select: none; - -ms-user-select: none; -} - .osdTitle, .osdTitleSmall { margin: 0 1em 0 0; diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index 1d78d490a..d5da29d3b 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/src/components/mediainfo/mediainfo.js @@ -100,11 +100,10 @@ import 'emby-button'; return html; } - export function getMediaInfoHtml(item, options) { + export function getMediaInfoHtml(item, options = {}) { let html = ''; const miscInfo = []; - options = options || {}; let text; let date; let minutes; @@ -289,7 +288,9 @@ import 'emby-button'; return getMediaInfoItem(m); }).join(''); - html += getStarIconsHtml(item); + if (options.starRating !== false) { + html += getStarIconsHtml(item); + } if (item.HasSubtitles && options.subtitles !== false) { html += '
CC
'; @@ -418,9 +419,8 @@ import 'emby-button'; return false; } - export function getPrimaryMediaInfoHtml(item, options) { - options = options || {}; - if (options.interactive == null) { + export function getPrimaryMediaInfoHtml(item, options = {}) { + if (options.interactive === undefined) { options.interactive = false; } diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css index 067804919..754fd418c 100644 --- a/src/components/upnextdialog/upnextdialog.css +++ b/src/components/upnextdialog/upnextdialog.css @@ -1,9 +1,24 @@ -.upNextDialog { - width: 30vw; +.upNextContainer { + box-sizing: border-box; position: fixed; - left: auto; + top: 0; bottom: 0; - right: 0; + left: 50%; + transform: translateX(-50%); + padding: 1em; + display: flex; + flex-grow: 1; + width: calc(100vh * (16 / 9)); + height: 100vh; + justify-content: end; + align-items: flex-end; +} + +.upNextDialog-container { + border-radius: 5px; + width: 30em; + height: 11em; + left: auto; padding: 1%; display: flex; flex-direction: column; diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js index c665d8117..8d3202cc1 100644 --- a/src/components/upnextdialog/upnextdialog.js +++ b/src/components/upnextdialog/upnextdialog.js @@ -17,9 +17,7 @@ import 'flexStyles'; function getHtml() { let html = ''; - html += '
'; - html += '
'; - + html += '
'; html += '
'; html += '

 

'; @@ -29,8 +27,6 @@ import 'flexStyles'; html += '
'; html += '
'; - html += '
'; - html += '
'; html += '
'; + html += '
'; return html; } @@ -73,9 +70,11 @@ import 'flexStyles'; const elem = instance.options.parent; - elem.querySelector('.upNextDialog-overview').innerHTML = item.Overview || ''; - elem.querySelector('.upNextDialog-mediainfo').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(item, { + criticRating: false, + originalAirDate: false, + starRating: false, + subtitles: false }); let title = itemHelper.getDisplayName(item); From e38fa15e4d40d1ccc6e51e10bb6052502317adea Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 22 Aug 2020 02:38:06 +0200 Subject: [PATCH 3/6] Constrain width only on desktop --- src/assets/css/videoosd.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index 9995a7ff8..a23a4cf8e 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -105,10 +105,13 @@ .osdControls { flex-grow: 1; - max-width: calc(100vh * 1.77); padding: 0 0.8em; } +.layout-desktop .osdControls { + max-width: calc(100vh * 1.77 - 2vh); +} + .videoOsdBottom .buttons { padding: 0.25em 0 0; display: -webkit-box; From 1812df57ad9a45c40b24378f5bc35953bceead40 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 22 Aug 2020 14:07:54 +0200 Subject: [PATCH 4/6] Fix up next dialog on Chrome --- src/components/upnextdialog/upnextdialog.css | 67 ++++---------------- src/components/upnextdialog/upnextdialog.js | 2 - 2 files changed, 11 insertions(+), 58 deletions(-) diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css index 754fd418c..efb036648 100644 --- a/src/components/upnextdialog/upnextdialog.css +++ b/src/components/upnextdialog/upnextdialog.css @@ -1,25 +1,10 @@ .upNextContainer { - box-sizing: border-box; position: fixed; - top: 0; + right: 0; bottom: 0; - left: 50%; - transform: translateX(-50%); - padding: 1em; - display: flex; - flex-grow: 1; - width: calc(100vh * (16 / 9)); - height: 100vh; - justify-content: end; - align-items: flex-end; -} - -.upNextDialog-container { - border-radius: 5px; width: 30em; - height: 11em; - left: auto; - padding: 1%; + padding: 1em; + margin: 0 2em 2em 0; display: flex; flex-direction: column; will-change: transform, opacity; @@ -38,18 +23,18 @@ font-weight: 500; } -.upNextDialog-poster { - display: none; - max-width: 40%; - max-height: 15%; - position: relative; - margin-right: 1em; - flex-shrink: 0; - margin-bottom: 0.5em; +.upNextDialog-nextVideoText, +.upNextDialog-title { + width: 25.5em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .upNextDialog-buttons { + width: 29.75em; justify-content: end; + align-content: flex-end; } .upNextDialog-button { @@ -61,34 +46,4 @@ .upNextDialog { flex-direction: row; } - - .upNextDialog-poster { - max-width: initial; - max-height: initial; - width: 30%; - margin-bottom: 0; - } -} - -@media all and (max-width: 50em) { - .upNextDialog-overview { - display: none !important; - } -} - -.upNextDialog-poster-img { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: auto; - width: 100%; - box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); - user-drag: none; - border: 0; - user-select: none; - -moz-user-select: none; - -webkit-user-drag: none; - -webkit-user-select: none; - -ms-user-select: none; } diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js index 8d3202cc1..1d5555671 100644 --- a/src/components/upnextdialog/upnextdialog.js +++ b/src/components/upnextdialog/upnextdialog.js @@ -17,7 +17,6 @@ import 'flexStyles'; function getHtml() { let html = ''; - html += '
'; html += '
'; html += '

 

'; @@ -42,7 +41,6 @@ import 'flexStyles'; // main html += '
'; - html += '
'; return html; } From 02015aaa9c60e727242c34363a7130d2c069a831 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 29 Aug 2020 18:32:42 +0200 Subject: [PATCH 5/6] Adjust OSD color for WCAG compliance --- src/assets/css/videoosd.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index a23a4cf8e..f0792c2c4 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -11,7 +11,7 @@ left: 0; right: 0; position: fixed; - background: linear-gradient(0deg, rgba(16, 16, 16, 0.6) 0%, rgba(16, 16, 16, 0) 100%); + background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%); padding-top: 7.5em; padding-bottom: 1.75em; display: flex; @@ -28,7 +28,7 @@ transition: opacity 0.3s ease-out; position: relative; z-index: 1; - background: linear-gradient(180deg, rgba(16, 16, 16, 0.6) 0%, rgba(16, 16, 16, 0) 100%); + background: linear-gradient(180deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%); backdrop-filter: none; color: #eee; height: 7.5em; From 0db000e5b51b1a66cb7b6150879314b8e3d2918e Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sun, 30 Aug 2020 13:47:37 +0200 Subject: [PATCH 6/6] Fix CSS selector for top OSD header --- src/assets/css/videoosd.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/css/videoosd.css b/src/assets/css/videoosd.css index f0792c2c4..b2446d5d4 100644 --- a/src/assets/css/videoosd.css +++ b/src/assets/css/videoosd.css @@ -24,7 +24,7 @@ -webkit-touch-callout: none; } -.osdHeader { +.skinHeader-withBackground.osdHeader { transition: opacity 0.3s ease-out; position: relative; z-index: 1;