.nowPlayingInfoContainer { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; } .navigationSection { text-align: center; } .btnArrowUp{ border-radius: 40% 40% 10% 10%; } .btnArrowLeft{ border-radius: 40% 10% 10% 40%; } .btnArrowRight{ border-radius: 10% 40% 40% 10%; } .btnArrowDown{ border-radius: 10% 10% 40% 40%; } .btnOk{ border-radius: 10%; } .nowPlayingPageTitle { margin: 0 0 .5em .5em; } .nowPlayingPositionSliderContainer { margin: .7em 0 .7em 1em; } .nowPlayingInfoButtons { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .nowPlayingInfoControls, .nowPlayingTime { display: flex; display: -webkit-box; display: -webkit-flex } .nowPlayingPageImageContainer { width: 20%; margin-right: .25em; position: relative; -webkit-flex-shrink: 0; flex-shrink: 0; } @media all and (min-width: 50em) { .nowPlayingPageImageContainer { width: 16%; } } .nowPlayingInfoControls { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .nowPlayingPageImage { bottom: 0; left: 0; right: 0; width: 100%; -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; border: .1em solid #222; user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none } @media all and (orientation: portrait) and (max-width: 50em) { .nowPlayingInfoContainer { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -webkit-flex-direction: column !important; flex-direction: column !important; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .nowPlayingPageTitle { text-align: center; margin: .5em 0 .75em; } .nowPlayingPositionSliderContainer { margin: .7em 1em; } .nowPlayingInfoButtons { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .nowPlayingPageImageContainer { width: auto; margin-right: 0; } .nowPlayingInfoControls { margin-top: 1em; max-width: 100%; } .nowPlayingPageImage { width: auto; height: 36vh; } } @media all and (orientation: portrait) and (max-width: 40em) { .nowPlayingPageImage { height: 30vh; } } .nowPlayingTime { display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; margin: 0 1em; } .nowPlayingSecondaryButtons { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } @media all and (min-width: 50em) { .nowPlayingSecondaryButtons { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } } @media all and (min-width: 80em) { .nowPlayingPageImageContainer { margin-right: .75em; } } .nowPlayingNavButtonContainer { width: 30em; } .smallBackdropPosterItem .cardOverlayInner>div { white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; } .playlistIndexIndicatorImage { -webkit-background-size: initial initial !important; background-size: initial !important; background-image: url(../../assets/img/equalizer.gif) !important; } .hideVideoButtons .videoButton { display: none; } .nowPlayingVolumeSliderContainer { width: 9em; } @media all and (max-width: 50em) { .nowPlayingInfoButtons .nowPlayingPageUserDataButtons { display: none !important; } .navigationSection .collapseContent i{ font-size: 4em; } } @media all and (max-width: 47em) { .nowPlayingInfoButtons .repeatToggleButton { display: none !important; } } @media all and (max-width: 34em) { .nowPlayingInfoButtons .btnNowPlayingFastForward, .nowPlayingInfoButtons .btnNowPlayingRewind, .nowPlayingInfoButtons .playlist .listItemMediaInfo { display: none !important; } }