jellyfin-web/dashboard-ui/css/mediaplayer.css
2014-04-30 11:07:02 -04:00

166 lines
2.7 KiB
CSS

/* Now playing bar */
.nowPlayingBar {
padding: 6px 0 14px 0;
border-top: 2px solid green;
}
.nowPlayingBarImage {
vertical-align: bottom;
}
.mediaButton {
vertical-align: top;
}
#mediaElement {
display: inline-block;
position: relative;
}
.nowPlayingText {
display: inline-block;
font-weight: normal;
position: relative;
top: -7px;
margin: 0 10px 0 3px;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nowPlayingDoubleText {
top: -3px;
}
.nowPlayingImage {
display: inline-block;
}
.nowPlayingImage img {
height: 40px;
margin-right: .5em;
vertical-align: bottom;
}
.mediaButton img {
height: 24px;
}
.currentTime {
display: inline-block;
position: relative;
top: -10px;
max-width: 110px;
margin-right: 2em;
font-weight: normal;
}
.nowPlayingBar .currentTime {
top: -15px;
}
.mediaSlider {
position: relative;
top: -10px;
width: 50px;
cursor: pointer;
}
.sliderContainer {
display: inline-block;
}
.positionSliderContainer {
width: 130px;
}
#nowPlayingBar .sliderContainer {
margin-top: 14px;
}
.volumeSliderContainer {
width: 90px;
}
.sliderContainer .ui-slider {
margin: 0 !important;
}
.sliderContainer .ui-slider-track {
margin-left: 15px !important;
}
.volumeSliderContainer .ui-slider-track {
margin-left: 5px !important;
}
.volumeButton {
margin-right: .5em!important;
}
::-ms-thumb {
background-image: linear-gradient(#fefefe,#dddddd);
width: 15px;
}
::-ms-track {
padding: 0;
border: 0;
color: #777;
}
input[type="range"]::-ms-fill-lower {
background-color: #777;
}
input[type="range"]::-ms-fill-upper {
background-color: #777;
}
::-ms-tooltip {
display: none; /* display and visibility only */
}
@media all and (max-width: 800px) {
#nowPlayingBar .mediaButton {
margin-top: 0;
margin-bottom: 0;
}
#nowPlayingBar .mediaButton:not(#playButton):not(#pauseButton) {
display: none;
}
#nowPlayingBar #playButton, #nowPlayingBar #pauseButton {
float: right;
}
#nowPlayingBar .currentTime, #nowPlayingBar .positionSliderContainer, #nowPlayingBar .volumeSliderContainer, #nowPlayingBar .muteButton, #nowPlayingBar .unmuteButton {
display: none !important;
}
.nowPlayingBar {
padding: 10px 5px 10px 0;
}
}
@media (min-width: 1440px) {
#nowPlayingBar .positionSliderContainer {
width: 300px;
}
}
.mediaPlayerAudioContainer {
position: fixed;
top: 40%;
text-align: center;
left: 0;
right: 0;
}
.mediaPlayerAudioContainerInner {
padding: 1em;
background: #222;
}