jellyfin-web/dashboard-ui/css/nowplayingbar.css

307 lines
5.4 KiB
CSS
Raw Normal View History

2015-12-14 08:43:03 -07:00
.nowPlayingText {
display: inline-block;
position: relative;
top: -7px;
margin: 0 0 0 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
text-align: left;
max-width: 130px;
}
.mediaButton.infoButton {
width: 34px;
height: 34px;
}
.mediaButton.active {
color: #52B54B;
}
@media (min-width: 500px) {
.nowPlayingText {
max-width: 180px;
}
}
@media (min-width: 600px) {
.nowPlayingText {
max-width: 200px;
}
}
@media (min-width: 800px) {
.nowPlayingText {
margin-right: 30px;
}
}
.mediaButton img {
height: 24px;
}
.currentTime {
display: inline-block;
vertical-align: middle;
max-width: 110px;
margin-right: 2em;
font-weight: normal;
}
/* Now playing bar */
2015-06-27 12:53:36 -07:00
.nowPlayingBar {
2015-12-14 08:43:03 -07:00
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* Above everything, except for the video player and popup overlays */
z-index: 1097;
color: #fff;
background-color: rgba(26,26,26,.94);
2015-06-27 12:53:36 -07:00
border-top: 1px solid #444;
text-align: center;
2015-12-14 08:43:03 -07:00
display: flex;
flex-direction: row;
align-items: center;
2015-06-27 12:53:36 -07:00
}
2015-06-27 16:18:09 -07:00
.hiddenNowPlayingBar .nowPlayingBar {
2015-07-26 14:02:23 -07:00
display: none !important;
2015-06-27 16:18:09 -07:00
}
2015-06-27 12:53:36 -07:00
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
vertical-align: middle;
color: #e8e8e8;
margin: 0;
text-align: center;
}
2015-10-08 09:22:14 -07:00
.mediaButton {
2015-12-14 08:43:03 -07:00
box-sizing: content-box !important;
2015-10-08 09:22:14 -07:00
}
2015-07-26 14:02:23 -07:00
2015-10-08 09:22:14 -07:00
.mediaButton.remoteControlButton, .mediaButton.muteButton, .mediaButton.unmuteButton {
2015-07-26 14:02:23 -07:00
height: 26px;
}
2015-06-27 12:53:36 -07:00
.nowPlayingDoubleText {
top: -3px;
}
.nowPlayingBarInfoContainer {
}
.nowPlayingImage {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
.nowPlayingImage img {
vertical-align: bottom;
}
.nowPlayingBar, .nowPlayingImage img {
2015-07-08 17:20:01 -07:00
height: 80px;
2015-06-27 12:53:36 -07:00
}
.nowPlayingBar .nowPlayingImage {
width: 80px;
height: 80px;
background-position: center center;
background-repeat: no-repeat;
2016-02-06 13:31:41 -07:00
background-size: contain;
}
2016-02-05 10:04:46 -07:00
2015-06-27 12:53:36 -07:00
.nowPlayingBarText {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
text-align: left;
max-width: 130px;
}
2015-10-08 09:22:14 -07:00
.toggleRepeatButton {
2015-07-26 14:02:23 -07:00
height: 32px;
}
.repeatActive {
2015-09-27 18:50:11 -07:00
color: #52B54B;
2015-07-26 14:02:23 -07:00
}
2015-06-27 12:53:36 -07:00
@media (min-width: 500px) {
.nowPlayingBarText {
max-width: 180px;
}
}
@media (min-width: 600px) {
.nowPlayingBarText {
max-width: 200px;
}
}
@media (min-width: 700px) {
.nowPlayingBarText {
max-width: 240px;
}
}
@media (min-width: 800px) {
.nowPlayingBarText {
max-width: 300px;
2015-06-27 16:18:09 -07:00
margin-right: 30px;
2015-06-27 12:53:36 -07:00
}
}
2015-06-27 16:18:09 -07:00
@media (min-width: 900px) {
2015-06-27 12:53:36 -07:00
.nowPlayingBarText {
2015-06-27 16:18:09 -07:00
max-width: 400px;
2015-06-27 12:53:36 -07:00
}
}
.nowPlayingBarCenter {
vertical-align: middle;
text-align: center;
2015-07-08 17:20:01 -07:00
margin-top: 12px;
2015-09-14 21:31:12 -07:00
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
z-index: 2;
2015-12-14 08:43:03 -07:00
position: absolute;
left: 0;
right: 0;
top: 0;
2015-06-27 12:53:36 -07:00
}
.nowPlayingBarPositionContainer {
position: absolute;
2015-07-08 17:20:01 -07:00
left: 80px;
2015-06-27 12:53:36 -07:00
top: 0;
right: 0;
z-index: 1;
}
2015-06-27 16:18:09 -07:00
.noMediaProgress .nowPlayingBarPositionContainer {
display: none;
}
2016-02-23 20:58:32 -07:00
.nowPlayingBarPositionSlider {
position: relative;
top: -15px;
2015-06-27 12:53:36 -07:00
width: 100%;
}
2016-02-24 10:43:06 -07:00
.nowPlayingBarPositionSlider #sliderContainer {
width: 100%;
margin-left: 0 !important;
}
.nowPlayingBarPositionSlider #progressContainer {
background-color: transparent !important;
}
2015-06-27 12:53:36 -07:00
.nowPlayingBarRight {
2015-12-14 08:43:03 -07:00
position: relative;
margin: 0 1em 0 auto;
2015-09-14 21:31:12 -07:00
/* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
z-index: 2;
2015-06-27 12:53:36 -07:00
}
.nowPlayingBarCurrentTime {
vertical-align: middle;
font-weight: normal;
text-align: center;
display: inline-block;
margin: 0 auto;
padding-left: 50px;
}
.nowPlayingBarVolumeSlider {
margin-left: -1em;
2015-12-14 08:43:03 -07:00
margin-right: 2em;
2015-06-27 12:53:36 -07:00
}
.nowPlayingBarUserDataButtons {
display: inline-block;
margin-left: 2em;
margin-right: 2em;
}
2016-01-11 09:51:53 -07:00
@media all and (max-width: 1400px) {
2015-06-27 12:53:36 -07:00
.nowPlayingBarUserDataButtons {
display: none;
}
}
2016-01-11 09:51:53 -07:00
@media all and (max-width: 1100px) {
2015-06-27 12:53:36 -07:00
.nowPlayingBarVolumeSlider, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
display: none !important;
}
2016-01-11 09:51:53 -07:00
}
@media all and (max-width: 1000px) {
2015-06-27 12:53:36 -07:00
.nowPlayingBar .playlistButton {
display: none !important;
}
}
@media all and (max-width: 800px) {
.nowPlayingBarCurrentTime {
2015-07-01 08:47:41 -07:00
padding-left: 0;
2015-12-14 08:43:03 -07:00
top: 22px;
right: 140px;
2015-09-14 21:31:12 -07:00
position: absolute;
2015-06-27 12:53:36 -07:00
}
.nowPlayingBarCenter > *:not(.nowPlayingBarCurrentTime) {
display: none !important;
}
.nowPlayingBar {
2015-06-27 12:53:36 -07:00
height: 70px;
}
.nowPlayingBar .nowPlayingImage {
height: 70px;
width: 70px;
}
2015-06-27 12:53:36 -07:00
.nowPlayingBarPositionContainer {
left: 70px;
}
.nowPlayingBarPositionSlider paper-progress {
height: 3px !important;
}
2015-07-26 14:02:23 -07:00
.toggleRepeatButton {
display: none;
}
2015-06-27 12:53:36 -07:00
}
@media all and (min-width: 800px) {
.nowPlayingBarRight .pauseButton {
display: none;
}
.nowPlayingBarRight .unpauseButton {
display: none;
}
}
2015-07-01 08:47:41 -07:00
@media all and (max-width: 600px) {
.nowPlayingBarCurrentTime {
display: none;
}
}