1364 lines
32 KiB
CSS
1364 lines
32 KiB
CSS
: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;
|
|
}
|
|
}
|