.nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand { text-align: center; font-size: 24px; padding: 14px 0; margin: 3px 1px; width: 70px; background: #383838; border-radius: 5px; } .nowPlayingPageImage img { max-height: 220px; max-width: 220px; } .nowPlayingTimeContainer { max-width: 280px; margin: 1.5em auto; } .nowPlayingPage .positionSliderContainer { width: 100%; min-width: 200px; } .nowPlayingPage .positionSliderContainer .ui-slider-track { margin: 0 0 !important; } .nowPlayingPage .positionSliderContainer .ui-slider { height: 20px; } .nowPlayingNavButtonContainer { width: 400px; } .chapterMenuOverlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; } .chapterMenu { position: fixed; top: 30%; height: 180px; left: 0; right: 0; background-color: rgba(0,0,0,.9); z-index: 1000; } .chapterMenuInner { padding: 1em 0; text-align: center; white-space: nowrap; } .smallBackdropPosterItem .cardOverlayInner > div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .chapterPosterItem { width: 240px !important; cursor: pointer; } .chapterPosterItem .posterItemImage { height: 135px !important; } .currentChapter { -moz-box-shadow: 0 0 12px 7px #cc3333; -webkit-box-shadow: 0 0 12px 7px #cc3333; box-shadow: 0 0 12px 7px #cc3333; } @media all and (max-width: 700px) { .nowPlayingPageImage img { max-height: 160px; max-width: 220px; } } @media all and (max-width: 600px) { .nowPlayingPageImage img { max-height: 160px; max-width: 220px; } } @media all and (max-height: 600px) { .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand { margin: 2px 0; } .nowPlayingPageImage img { max-height: 160px; max-width: 220px; } } @media all and (max-height: 500px) { .nowPlayingPageImage img { max-height: 120px; } } @media all and (max-width: 400px) { .nowPlayingNavButtonContainer { width: 300px; } } .nowPlayingPageTitle { margin: .5em 0; } .nowPlayingInfoButtons { padding-top: .5em; } @media all and (min-height: 600px) { .nowPlayingPageTitle { margin: 1em 0; } .nowPlayingInfoButtons { padding-top: 1em; } } @media (orientation: landscape) { .nowPlayingInfoMetadata, .nowPlayingInfoButtons { display: inline-block; vertical-align: top; } .nowPlayingInfoButtons { margin-left: 3em; } }