.nowPlayingPage { padding-top: 0 !important; } .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand { margin: 2px 1px; width: 70px; height: 70px; } .nowPlayingPageImage img { max-height: 360px; max-width: 360px; } .nowPlayingPageTimeContainer { min-width: 200px; max-width: 280px; margin: 0 auto 1em; } .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: 200px; } } @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 all and (min-width: 800px) { .nowPlayingPageTimeContainer { max-width: 340px; } } @media (orientation: landscape) { .nowPlayingInfoMetadata, .nowPlayingInfoButtons { display: inline-block; vertical-align: top; } .nowPlayingInfoButtons { margin-left: 1em; } } @media (orientation: landscape) and (min-width: 700px) { .nowPlayingInfoButtons { margin-left: 3em; } } @media (orientation: landscape) and (max-height: 400px) { .nowPlayingPageTitle { margin: 0 auto; width: 50%; position: absolute; text-align: center; left: 0; right: 0; top: -20px; } .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand { width: 60px; height: 60px; } } @media (orientation: portrait) and (max-height: 600px) { .nowPlayingPageTitle { margin: 0 auto; width: 50%; position: absolute; text-align: center; left: 0; right: 0; top: -20px; } .nowPlayingPage .btnCommand, .nowPlayingPage .btnPlayStateCommand { width: 60px; height: 60px; } } .nowPlayingSelectedPlayer { display: inline-block; vertical-align: middle; color: #eee; margin-right: .25em; } @media all and (max-width: 700px) { .nowPlayingSelectedPlayer { display: none; } } .nowPlayingPageUserDataButtons iron-icon { width: 40px; height: 40px; }