:root { --videoosd-tabs-height: 20em; } @supports selector(:hover) and (--videoosd-tabs-height: clamp(10vh, 20em, 60vh)) { :root { --videoosd-tabs-height: clamp(10vh, 20em, 60vh); } } .layout-tv:root { --videoosd-tabs-height: 38vh; } .videoOsdHeader { will-change: opacity; transition: opacity 0.4s ease-out; text-shadow: none !important; } .videoOsdHeader:not(.videoosd-header-safe) { padding-left: 0; padding-right: 0; } .videoOsdHeader-locked { display: none !important; } .videoOsdHeader-hidden { opacity: 0; } .videoOsdHeader .headerButton:not(.headerBackButton):not(.headerCastButton) { display: none; } .chapterThumbImageContainer { background-position: center center; background-size: contain; background-repeat: no-repeat; width: 24vw; height: 13.5vw; width: clamp(20vmax, 22em, 35vmin); height: calc(clamp(20vmax, 22em, 35vmin) * 9 / 16); aspect-ratio: 16/9; background-color: #000; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4) !important; margin-top: -2em; } .chapterThumbImageContainer-fourthree { height: calc(clamp(20vmax, 22em, 35vmin) * 3 / 4); aspect-ratio: 4/3; } .chapterThumbTextContainer { position: absolute; bottom: 0; left: 0; right: 0; inset-inline-start: 0; inset-inline-end: 0; text-shadow: #000 0 0 0.5em; font-weight: 500; padding-bottom: 0.25em; text-align: center; } .chapterThumbTextContainer-noimg { position: static; padding: 0.5em 0; } .chapterThumbText { padding: 0 1em; margin: 0; } @supports (aspect-ratio: 16 / 9) { .chapterThumbImageContainer { width: clamp(20vmax, 22em, 35vmin); height: auto !important; } } .chapterThumbImageContainer-tv { width: 29vw; height: 16.3125vw; } .chapterThumbImageContainer-tv.chapterThumbImageContainer-fourthree { width: 24vw; height: 18vw; aspect-ratio: 4/3; } .chapterThumbImageContainer-noimg { width: auto; height: auto; min-width: min(10vw, 8em); max-width: min(30vw, 30em); } .videoOsdBottom { position: fixed; bottom: 0; left: 0; right: 0; inset-inline-start: 0; inset-inline-end: 0; padding: 1.25em 3%; padding-top: 1.25em; padding-bottom: min(1.25em, 1vh); padding-left: min(5ch, 2%); padding-right: min(5ch, 2%); display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-end; justify-content: flex-end; } @supports (height: calc(3.125em + 2 * max(3em, 4em))) { .videoOsdBottom-safe { padding-left: calc(min(5ch, 2%) + env(safe-area-inset-left, 0)); padding-right: calc(min(5ch, 2%) + env(safe-area-inset-right, 0)); } } .videoOsdBottom-safe { position: static; overflow: hidden; padding-bottom: min(1.75em, 1.75vh); -webkit-flex-grow: 1; flex-grow: 1; } @supports (height: calc(3.125em + 2 * max(3em, 4em))) { .videoOsdBottom-safe { padding-bottom: calc(min(1.75em, 1.75vh) + env(safe-area-inset-bottom, 0)); } } .videoOsdBottom-maincontrols { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-shrink: 0; flex-shrink: 0; max-height: 100%; position: relative; padding: 0 1.2em; -webkit-align-content: flex-end; align-content: flex-end; } .videoOsdPositionContainer, .videoosd-tabcontainers, .videoOsdBottom-contentbuttons, .videoOsdBottom-buttons { -webkit-flex-basis: 100%; flex-basis: 100%; -webkit-flex-shrink: 0; flex-shrink: 0; } .videoOsdBottom-contentbuttons { -webkit-order: 4; order: 4; } .videoosd-bottom-with-opentab { padding-bottom: min(2em, 1.25vh); will-change: initial !important; } @supports (height: calc(3.125em + 2 * max(3em, 4em))) { .videoosd-bottom-with-opentab.videoOsdBottom-safe { padding-bottom: calc(min(2em, 1.25vh) + env(safe-area-inset-bottom, 0)); } } .videoOsdBottom-video { will-change: opacity; transition: opacity 0.4s ease-out; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); } .osdPosterContainer { max-height: 100%; max-height: calc(100% - 19em); overflow: hidden; -webkit-justify-content: center; justify-content: center; -webkit-flex-basis: 100%; flex-basis: 100%; } .osdPosterContainer.itemsContainer-tv { max-height: calc(100% - 12em); } .osdRemoteControlImageCard { width: 100%; max-width: 30vh; margin: 0 auto; } .osdRemoteControlImageCardBox { margin: 0.2em !important; } .osdRemoteControlImageCardContent { border-radius: 0.6em !important; box-shadow: 0 0.06933em 0.06933em 0 rgba(0, 0, 0, 0.14), 0 0.13866em 0.06933em -0.06933em rgba(0, 0, 0, 0.12), 0 0.06933em 0.208em 0 rgba(0, 0, 0, 0.2) !important; } @supports (aspect-ratio: 1) { .osdRemoteControlImageCard { width: auto !important; max-width: 100%; padding-bottom: 0 !important; aspect-ratio: 1; overflow: hidden; height: 90vw; max-height: 100%; } .osdRemoteControlImageCard.backdropCard { aspect-ratio: 16/9; height: calc(90vw * (9 / 16)); } .osdRemoteControlImageCard.fourThreeCard { aspect-ratio: 4/3; height: calc(90vw * (3 / 4)); } .osdRemoteControlImageCard.portraitCard { aspect-ratio: 2/3; height: calc(90vw * (3 / 2)); } } .osdContentSection-split { -webkit-flex-grow: 1; flex-grow: 1; overflow: hidden; } @media all and (orientation: landscape) { @supports (aspect-ratio: 1) { .osdRemoteControlImageCard { height: 35vw; } .osdRemoteControlImageCard.backdropCard { height: calc(35vw * (9 / 16)); } .osdRemoteControlImageCard.fourThreeCard { height: calc(35vw * (3 / 4)); } .osdRemoteControlImageCard.portraitCard { height: calc(35vw * (3 / 2)); } } .osdContentSection-split { -webkit-flex-shrink: 0; flex-shrink: 0; width: 55%; width: min(60%, 75em); max-height: 95%; box-sizing: border-box; -webkit-padding-start: 4ch; padding-inline-start: 4ch; } } @media all and (min-width: 140em) { .osdContentSection-split { -webkit-padding-start: 0 !important; padding-inline-start: 0 !important; } } .osdContentSection-tv-split { -webkit-padding-start: 3ch !important; padding-inline-start: 3ch !important; -webkit-padding-start: 3ch !important; padding-inline-start: 3ch !important; position: absolute; top: 5em; bottom: 8em; right: 0; inset-inline-start: initial; inset-inline-end: 0; width: 67%; z-index: 1; } .videoOsdText { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; margin-bottom: 0.75em; -webkit-flex-basis: 50%; flex-basis: 50%; -webkit-order: 0; order: 0; } .videoOsdPositionContainer { box-sizing: border-box; font-weight: 500; -webkit-order: 2; order: 2; } .videoOsdPositionContainer-autosmall { margin-top: 0.5em; } .videoOsdPositionContainer-vertical { -webkit-flex-wrap: wrap; flex-wrap: wrap; position: relative; z-index: 1; } .videoOsdPositionSliderContainer { -webkit-order: 1; order: 1; -webkit-flex-basis: 100%; flex-basis: 100%; margin: 0.1em 0 0.3em !important; } .videoOsdPositionText { -webkit-order: 2; order: 2; -webkit-flex-basis: 35%; flex-basis: 35%; } .videoOsd-audioInfo { -webkit-order: 3; order: 3; -webkit-flex-basis: 30%; flex-basis: 30%; -webkit-justify-content: center; justify-content: center; font-size: 92%; } .videoOsdDurationText { -webkit-order: 4; order: 4; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-basis: 35%; flex-basis: 35%; -webkit-flex-grow: 1; flex-grow: 1; } .videoOsdPositionText:not(.videoOsd-customFont-x0) { font-size: 92%; } .videoOsdDurationText:not(.videoOsd-customFont-x0) { font-size: 92%; } .osd-endsat { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; } .osd-endsat-dot { margin: 0 1ch; font-size: 84%; } @media not all and (min-width: 28em) { .osd-endsat { display: none !important; } } .videoOsdText-remotecontrol { margin: 1.05em 0 0.75em; padding: 0; -webkit-flex-direction: column; flex-direction: column; text-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-basis: 100%; flex-basis: 100%; } .videoOsdText-remotecontrol-tv { margin: 0.25em 0 0; } .videoOsdText-remotecontrol-tv h3 { font-size: inherit; } .videoOsdBottom-tvnowplaying.videoOsdBottom-split .osdPosterContainer, .videoOsdBottom-tvnowplaying.videoOsdBottom-split .videoOsdText { -webkit-margin-start: -30vw; margin-inline-start: -30vw; } @media not all and (orientation: landscape) { .osdPosterContainer { max-height: 60%; -webkit-flex-grow: 1; flex-grow: 1; overflow: hidden; -webkit-justify-content: center; justify-content: center; } .videoOsdBottom-safe.videoOsdBottom-split .osdPosterContainer, .videoOsdBottom-safe.videoOsdBottom-split .videoOsdText-remotecontrol { display: none !important; } .videoOsdBottom-maincontrols { -webkit-align-content: flex-end; align-content: flex-end; } .videoOsdBottom-safe.videoOsdBottom-split .videoOsdBottom-maincontrols { padding-top: 0.75em; } } @media all and (min-width: 50em) { .videoOsd-customFont-x2 { font-size: 1.1em; } } @media all and (orientation: landscape) { .videoOsdBottomMaincontrols-autoexpand { -webkit-flex-shrink: initial; flex-shrink: initial; -webkit-flex-grow: 1; flex-grow: 1; -webkit-align-content: flex-start; align-content: flex-start; } } .videoOsdSecondaryText { -webkit-align-items: baseline; align-items: baseline; } .videoOsdSecondaryText-withparentname { margin-bottom: 0.25em; font-weight: 500; } .videoOsdSecondaryText-tv { margin-bottom: 0.25em; } .videoOsdSecondaryText-remotecontrol { -webkit-align-items: center; align-items: center; -webkit-flex-direction: column; flex-direction: column; margin-bottom: 0; } .videoOsdSecondaryMediaInfo-remotecontrol { font-size: 92%; font-weight: 500; margin-top: 1em; margin-bottom: 0; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; } .osdTextActionButton { color: inherit !important; font-weight: inherit !important; } .videoOsdTitle, .videoOsdParentTitle, .videoOsdThirdTitle { font-weight: 600; } .videoOsdThirdTitle { margin: 0; } .videoOsdBottom-hidden:not(.videoOsdBottom-tvnowplaying) { opacity: 0; } @-webkit-keyframes osd-animate-text { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: initial; } } @keyframes osd-animate-text { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0; } 100% { -webkit-transform: none; transform: none; opacity: initial; } } .videoOsdBottom-tvnowplaying:not(.videoOsdBottom-art) .osdPosterContainer, .videoOsdBottom-tvnowplaying:not(.videoOsdBottom-art) .videoOsdText, .videoOsdBottom-tvnowplaying:not(.videoOsdBottom-art) .osdContentSection:not(.osdPlayQueue) { display: none !important; } .osdIconButton-icon, .osdContentSectionToggleButtonIcon { padding: 0.08em !important; } .osdIconButton, .osdContentSectionToggleButton { padding: 0.5em !important; } .videoOsd-nobuttonmargin .osdIconButton, .videoOsd-nobuttonmargin .osdContentSectionToggleButton { margin: 0 0.3ch; } .videoOsdBottom-buttons { -webkit-margin-start: -1em; margin-inline-start: -1em; -webkit-order: 3; order: 3; } .videoOsdBottom-buttons-remotecontrol { margin: 0; -webkit-flex-direction: row; flex-direction: row; padding: 0; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .videoOsdBottom-buttons-remotecontrol-tv { -webkit-flex-basis: 50%; flex-basis: 50%; -webkit-flex-grow: 1; flex-grow: 1; } .videoOsdBottom-buttons-topright { -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: -0.75em; margin-inline-end: -0.75em; -webkit-flex-basis: content; flex-basis: content; -webkit-order: 1; order: 1; -webkit-align-items: flex-end; align-items: flex-end; margin-bottom: 0.25em; } .videoOsdBottom-buttons-topright-remotecontrol { -webkit-justify-content: center; justify-content: center; width: 100%; -webkit-margin-start: initial; margin-inline-start: initial; -webkit-flex-basis: 100%; flex-basis: 100%; margin: 0; -webkit-order: 4; order: 4; } .videoOsdBottom-buttons-topright-remotecontrol-tv { margin-bottom: 0.5em; -webkit-flex-basis: 100%; flex-basis: 100%; } .osdVolumeDisplayIcon-left { -webkit-margin-end: 0.25em; margin-inline-end: 0.25em; -webkit-margin-start: 1.6em; margin-inline-start: 1.6em; } .osdVolumeDisplayIcon-right { -webkit-margin-start: 0.25em; margin-inline-start: 0.25em; -webkit-margin-end: 1.6em; margin-inline-end: 1.6em; } .btnMuteOSD-remotecontrol { -webkit-margin-start: 0 !important; margin-inline-start: 0 !important; display: none; } .videoOsdVolumeControls { -webkit-justify-content: center; justify-content: center; } .videoOsdVolumeControls:not(.videoOsdVolumeControls-showhover) { -webkit-order: 2; order: 2; -webkit-flex-basis: 100%; flex-basis: 100%; padding: 0; } @media all and (min-height: 38em) { .videoOsdVolumeControls:not(.videoOsdVolumeControls-showhover) { padding: 0.25em 0; } } @media all and (min-height: 50em) { .videoOsdVolumeControls:not(.videoOsdVolumeControls-showhover) { padding: 0.5em 0; } } .videoOsdPositionSlider { margin: -1.605em 0; } .videoOsdPositionContainer-limitwidth { -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; width: 100%; box-sizing: border-box; max-width: 50em; } .videoOsdVolumeSliderWrapper { max-width: 44em; } .videoOsdVolumeControls-showhover > .videoOsdVolumeSliderWrapper { position: absolute; top: -2.75em; left: -3.5em; inset-inline-start: -3.5em; inset-inline-end: initial; display: none; width: 8.5em; z-index: 99999999; background: #262626; padding: 1.25em 1.25em; border-radius: 0.3em; max-width: initial; } .videoOsdVolumeControls-showhover:hover > .videoOsdVolumeSliderWrapper { display: -webkit-flex; display: flex; } .videoOsdVolumeControls-showhover > .osdVolumeDisplayIcon { display: none; } @media not all and (pointer: fine) { .videoOsdVolumeControls-hidetouch { display: none !important; } } @media not all and (min-width: 50em) { .videoOsdVolumeControls-hidetouch { display: none !important; } } .volumeButtons { margin-top: 0; margin-bottom: 0; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: 0.5em; margin-inline-end: 0.5em; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .videoOsdParentTitle { margin: 0; } .videoOsdTitle { margin-top: 0; margin-bottom: 0; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 1em; margin-inline-end: 1em; } .videoOsdSecondaryText-remotecontrol .videoOsdTitle { -webkit-margin-end: 0; margin-inline-end: 0; } .osdTitle-remotecontrol { margin: 0; } @media not all and (pointer: fine) { .videoOsd-centerButtons-autolayout { position: fixed; top: 45%; left: 0; right: 0; inset-inline-start: 0; inset-inline-end: 0; -webkit-justify-content: center; justify-content: center; display: -webkit-flex; display: flex; -webkit-align-self: center; align-self: center; margin-top: -2em; font-size: 130%; font-size: 3.5vmax; } @media all and (orientation: portrait) { .videoOsd-centerButtons-autolayout { top: 50%; } } .videoOsd-btnPause-autolayout { -webkit-margin-start: 10%; margin-inline-start: 10%; -webkit-margin-end: 10%; margin-inline-end: 10%; } } .videoOsd-forwardIcon-flipped { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } .btnOsdRewindIcon, .btnOsdFastForwardIcon { will-change: animate; } .videoOsdParentTitleContainer { position: relative; } .btnOsdMore-title { margin-top: 0; margin-bottom: 0; -webkit-margin-start: 0.5em; margin-inline-start: 0.5em; -webkit-margin-end: 0; margin-inline-end: 0; padding: 0.16em; position: absolute; right: -2.5em; inset-inline-start: initial; inset-inline-end: -2.5em; } @media all and (pointer: fine) { .btnOsdMore-title { display: none !important; } } @media not all and (pointer: fine) { .btnOsdMore-bottom-autohide { display: none !important; } } .videoosd-tabsslider { -webkit-column-gap: 0.25ch; column-gap: 0.25ch; -webkit-align-items: center; align-items: center; padding: 0 0.5em; } .videoosd-tab-button { padding: 0.25em 1em !important; border-radius: 100em; -webkit-margin-end: 2em; margin-inline-end: 2em; overflow: visible; } .videoosd-tab-button:hover { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.2); } .videoosd-tab-button:active { color: var(--theme-accent-text-color); } .videoosd-tab-button::before { left: -1em !important; right: -1em !important; } .videoosd-tab-button.emby-tab-button-active::before { position: absolute; top: 0; left: -1em; right: -1em; bottom: 0; content: " "; z-index: -1; border-radius: inherit; } .videoosd-tabcontainers { height: 38vh; height: var(--videoosd-tabs-height); transition: height 0.4s ease-out; overflow: hidden; border-radius: 0.6em; contain: strict; margin: 0 -1em; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-order: 6; order: 6; } .videoOsdBottom-tabs { -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-order: 5; order: 5; } .videoOsdBottom-tabs-remotecontrol { -webkit-justify-content: center; justify-content: center; margin-top: 1em; -webkit-flex-basis: 100%; flex-basis: 100%; } .videoOsdTabs-margintop .videoosd-tabsslider { margin-top: 0.5em; } .videoosd-tabcontainers-hidden { height: 0; } .videoosd-tab { overflow: hidden; } .videoosd-tab:not(.videoosd-activetab) { display: none; } .videoosd-tabsslider:focus-within .emby-tab-button-active:not(:focus) { background: 0 0; color: inherit; } .videoosd-tabsslider:focus-within .emby-tab-button-active:not(:focus)::before { background: 0 0; } .videoosd-bottom-with-opentab .videoOsd-hideWithOpenTab { display: none !important; } .videoosd-bottom-locked .videoOsd-hideWhenLocked { display: none !important; } @media not all and (min-height: 24em), not all and (min-width: 28em) { .videoOsdBottom-tabs, .videoosd-tabcontainers { display: none !important; } } .videoosd-tabBackground { background: rgba(60, 60, 60, 0.8); } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) { .videoosd-tabBackground-backdropfilter { background: rgba(56, 56, 56, 0.76); -webkit-backdrop-filter: saturate(1.8) blur(4em); backdrop-filter: saturate(1.8) blur(4em); } } .btnCloseTabContent { margin: 0 !important; position: relative; top: -0.15em; padding: 0.25em !important; background-color: black; color: var(--theme-accent-text-color-darkbg); } .btnCloseTabContent.icon-button-focusscale { padding: 0 !important; } .videoosd-poster { width: 9em; width: calc((var(--videoosd-tabs-height) - 2em) * (2 / 3)); max-width: 20vw; overflow: hidden; -webkit-margin-end: 1.25em; margin-inline-end: 1.25em; } .osdInfoImageCard { width: 100% !important; } .osdInfoImageCardBox { margin: 0 !important; } .videoosd-info { overflow: hidden; } .videoosd-info-overview { overflow: hidden; text-overflow: ellipsis; margin-top: 0.25em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } @supports selector(:hover) and (display: revert) and (column-gap: 1em) { .videoosd-info-mediainfoContainer { -webkit-column-gap: 1em; column-gap: 1em; } } .videoOsd-itemstab-card.squareCard { width: 20vw; max-width: 34vw; } .videoOsd-itemstab-card.fourThreeCard { width: 12vw; max-width: 44vw; } .videoOsd-itemstab-card.backdropCard { width: 19vw; max-width: 44vw; } .videoOsd-itemstab-card.portraitCard { width: 8vw; max-width: 30vw; } .videoOsd-itemstab-card-twoline.backdropCard { width: calc((var(--videoosd-tabs-height) - 3.75em) * (16 / 9)); } .videoOsd-itemstab-card-twoline.fourThreeCard { width: calc((var(--videoosd-tabs-height) - 3.5em) * (4 / 3)); } .videoOsd-itemstab-card-twoline.portraitCard { width: calc((var(--videoosd-tabs-height) - 2.25em) * (2 / 3)); } .videoOsd-itemstab-card-twoline.squareCard { width: calc((var(--videoosd-tabs-height) - 3em)); } .videoOsd-itemstab-card-threeline.backdropCard { width: calc((var(--videoosd-tabs-height) - 5.75em) * (16 / 9)); } .videoOsd-itemstab-card-threeline.fourThreeCard { width: calc((var(--videoosd-tabs-height) - 4.75em) * (4 / 3)); } .videoOsd-itemstab-card-threeline.portraitCard { width: calc((var(--videoosd-tabs-height) - 3.75em) * (2 / 3)); } .videoOsd-itemstab-card-threeline.squareCard { width: calc((var(--videoosd-tabs-height) - 4.25em)); } .videoOsd-cardImageContainer-sideFooter { width: 4.4em; height: 4.4em; } .videoOsd-itemstab-card .cardText { font-weight: 500; font-size: 92%; } .videoosd-itemstab .scrollbuttoncontainer { background: 0 0 !important; overflow: visible; } .videoosd-itemstab .emby-scrollbuttons-scrollbutton { background: #fff !important; color: #000 !important; border-radius: 100em; padding: 0.2em; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4) !important; margin: 0 0.5em; } .videoosd-itemstab .scrollbuttoncontainer:hover > .emby-scrollbuttons-scrollbutton { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .videoosd-guidetab .guideSettingsContainer, .videoosd-guidetab .btnGuideViewSettings { display: none !important; } .videoosd-guidetab .programCellInner { background: rgba(0, 0, 0, 0.5); } .videoosd-guidetab .channelCellInner { background: #242424; } .videoosd-guidetab .firstChannelCell-withscroll { background: #242424 !important; } .videoosd-padded-left { -webkit-padding-start: 3.8%; padding-inline-start: 3.8%; -webkit-padding-start: min(3.8%, 3.6em); padding-inline-start: min(3.8%, 3.6em); } .videoosd-padded-right { -webkit-padding-end: 3.8%; padding-inline-end: 3.8%; -webkit-padding-end: min(3.8%, 3.6em); padding-inline-end: min(3.8%, 3.6em); } @media all and (max-height: 30em) and (orientation: landscape) { .videoOsdPositionContainer-autosmall, .videoosd-tabcontainers-autosmall, .videoOsdBottom-contentbuttons, .videoOsdBottom-buttons-remotecontrol { margin: 0 auto; } .videoOsdText-autosmall { margin: 0 !important; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-flex-basis: 55% !important; flex-basis: 55% !important; -webkit-align-items: flex-start; align-items: flex-start; -webkit-justify-content: center; justify-content: center; max-height: 40%; text-align: start; } .osdPosterContainer-autoexpand { -webkit-flex-shrink: 0; flex-shrink: 0; margin: 0 auto; -webkit-flex-basis: 45% !important; flex-basis: 45% !important; max-height: 40% !important; } .osdTextActionButton { text-align: start; } .osdRemoteControlImageCard-automargin { margin-top: 0 !important; margin-bottom: 0 !important; -webkit-margin-start: auto !important; margin-inline-start: auto !important; -webkit-margin-end: 1em !important; margin-inline-end: 1em !important; } .videoOsdSecondaryText-remotecontrol { -webkit-align-items: initial; align-items: initial; } } .videoOsdBottom-contentbuttons-tv { -webkit-flex-basis: 50%; flex-basis: 50%; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-margin-end: -0.75em; margin-inline-end: -0.75em; } @media not all and (min-height: 30em) { .videoOsdVolumeControls { display: none !important; } } .videoOsdVolumeSliderWrapper-customfont { font-size: 1rem; } @media all and (min-width: 42em), (orientation: portrait) { .videoOsd-customFont-remotecontrol-buttons { font-size: 1.1em; } } @media all and (orientation: landscape) { .videoOsd-customFont-remotecontrol { font-size: 1.1em; } .videoOsdBottom-split:not(.videoOsdBottom-tvnowplaying) { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-justify-content: initial; justify-content: initial; } @media all and (min-height: 67em) { .videoOsdBottom-split:not(.videoOsdBottom-tvnowplaying) { margin-top: 1.5em; } } } @media all and (min-width: 54em) { .videoOsd-customFont-remotecontrol-buttons { font-size: 1.2em; } } @media all and (min-width: 80em) { .videoOsd-customFont-remotecontrol { font-size: 1.2em; } } .nowplaying-backdropcontainer-blur { -webkit-filter: blur(2vh) brightness(0.3); filter: blur(2vh) brightness(0.3); } .nowplaying-backdropcontainer-blur-high { -webkit-filter: blur(9vh) brightness(0.6); filter: blur(9vh) brightness(0.6); } .nowplaying-backdropcontainer-blur-extrasaturation { -webkit-filter: saturate(2) blur(2vh) brightness(0.4); filter: saturate(2) blur(2vh) brightness(0.4); } .nowplaying-backdropcontainer-blur-extrasaturation.nowplaying-backdropcontainer-blur-high { -webkit-filter: saturate(2) blur(9vh) brightness(0.7); filter: saturate(2) blur(9vh) brightness(0.7); } .nowplaying-backgroundcontainer-blur { background-color: rgba(0, 0, 0, 0) !important; background-image: none !important; } @supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) { .nowplaying-backdropcontainer-blur-backdropfilter { -webkit-filter: none !important; filter: none !important; } .nowplaying-backgroundcontainer-blur-backdropfilter { background-color: rgba(0, 0, 0, 0) !important; -webkit-backdrop-filter: saturate(1.4) blur(10vmax) brightness(0.7); backdrop-filter: saturate(1.4) blur(10vmax) brightness(0.7); } } .nowplaying-backgroundcontainer-brighter { background-color: rgba(0, 0, 0, 0.65) !important; } .doc-nowplaying-blur { background-position: center; background-size: cover; background-repeat: no-repeat; background-color: #444 !important; } .videoOsd-ratingInfo { position: fixed; top: 3vh; left: 0; inset-inline-start: 0; inset-inline-end: initial; margin-top: 0; margin-bottom: 0; -webkit-margin-start: 4%; margin-inline-start: 4%; -webkit-margin-end: 0; margin-inline-end: 0; overflow: hidden; } .videoOsd-ratingText::before { content: " "; background: #52b54b; width: 0.53ch; position: absolute; top: 0; bottom: 0; left: 0; inset-inline-start: 0; inset-inline-end: initial; border-radius: 0.3em; } .videoOsd-ratingText { margin: 0; padding-top: 0.4em; padding-bottom: 0.4em; -webkit-padding-start: 0.9em; padding-inline-start: 0.9em; -webkit-padding-end: 0; padding-inline-end: 0; position: relative; font-weight: 500; -webkit-animation: osd-rating-animate 4s ease-out forwards; animation: osd-rating-animate 4s ease-out forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-delay: 3s; animation-delay: 3s; -webkit-transform-origin: bottom center; transform-origin: bottom center; opacity: 0; } .videoOsd-ratingDescription { font-weight: 400; margin-top: 0.1em; } @-webkit-keyframes osd-rating-animate { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 15% { -webkit-transform: none; transform: none; opacity: 1; } 85% { -webkit-transform: none; transform: none; opacity: 1; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } } @keyframes osd-rating-animate { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 15% { -webkit-transform: none; transform: none; opacity: 1; } 85% { -webkit-transform: none; transform: none; opacity: 1; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 0; } } .osd-transport-animationtext { position: fixed; opacity: 0; top: 45%; height: 2em; box-sizing: border-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-shadow: #000 0 0 0.5em; margin: -1.5em 0 0 0; font-weight: 500; pointer-events: none; touch-action: none; } @media all and (orientation: portrait) { .osd-transport-animationtext { top: 55%; margin: -1em 0 0 0; } } .osd-rew-animationtext { left: 2.5%; inset-inline-start: 2.5%; inset-inline-end: initial; -webkit-transform: translateX(100%); transform: translateX(100%); } [dir="rtl"] .osd-rew-animationtext { -webkit-transform: translateX(-100%); transform: translateX(-100%); } .osd-ff-animationtext { -webkit-transform: translateX(-100%); transform: translateX(-100%); right: 2.5%; inset-inline-start: initial; inset-inline-end: 2.5%; } [dir="rtl"] .osd-ff-animationtext { -webkit-transform: translateX(100%); transform: translateX(100%); } .osd-raisedbutton { box-shadow: 0 0.06933em 0.06933em 0 rgba(0, 0, 0, 0.14), 0 0.13866em 0.06933em -0.06933em rgba(0, 0, 0, 0.12), 0 0.06933em 0.208em 0 rgba(0, 0, 0, 0.2); padding: 0.54em 2ch !important; } .osd-raisedbutton:hover { background: hsla( var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), 0.2); } .osd-raisedbutton:active { color: var(--theme-accent-text-color); } .btnPlayNextFromUpNext { padding: 0 !important; overflow: hidden; } .btnPlayNextFromUpNext-inner { padding: 0.54em 2ch !important; position: relative; } .btnPlayNextFromUpNext-progress { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; -webkit-transform-origin: center left; transform-origin: center left; -webkit-transform: scaleX(0); transform: scaleX(0); background: rgba(255, 255, 255, 0.3); } [dir="rtl"] .btnPlayNextFromUpNext-progress { -webkit-transform-origin: center right; transform-origin: center right; } .btnPlayNextFromUpNext:focus-visible .btnPlayNextFromUpNext-progress { background: rgba(0, 0, 0, 0.3); } .btnPlayNextFromUpNext.emby-button-tv:focus .btnPlayNextFromUpNext-progress { background: rgba(0, 0, 0, 0.3); } .upNextContainer, .skipIntroContainer { position: fixed; bottom: 12em; bottom: min(12em, 38vh); right: 2.5%; right: calc(min(5ch, 2%) + 0.7em); inset-inline-start: initial; inset-inline-end: 2.5%; inset-inline-end: calc(min(5ch, 2%) + 0.7em); margin-top: 0 !important; margin-bottom: 0 !important; -webkit-margin-start: 0 !important; margin-inline-start: 0 !important; -webkit-margin-end: 0 !important; margin-inline-end: 0 !important; z-index: 1; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .videoosd-withupnext { display: none !important; } .brightnessSliderContainer { position: fixed; top: 7.5em; top: max(7.5em, 15%); bottom: 15em; bottom: min(15em, 45vh); right: 3%; inset-inline-start: initial; inset-inline-end: 3%; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; z-index: 1; } @media all and (pointer: fine) { .brightnessSliderContainer { display: none !important; } } @media all and (orientation: portrait) { .brightnessSliderContainer { display: none !important; } } .videoOsdBrightnessIcon { font-size: 200%; margin-bottom: 0.25em; -webkit-flex-shrink: 0; flex-shrink: 0; } .videoOsdUnlockControls { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; padding: 1em 1ch 2em; -webkit-flex-basis: 100%; flex-basis: 100%; } .videoOsd-btnToggleLock-bg { background: #fff; color: #000; } @media all and (pointer: fine) { .videoOsd-btnLock { display: none !important; } }