mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

replace sliders

Browse source
This commit is contained in:
Luke Pulverenti 2015-06-27 15:53:36 -04:00
parent 09d4af3357
commit 1b74dbdfbf
13 changed files with 1359 additions and 1439 deletions
Download patch file Download diff file Expand all files Collapse all files

230
dashboard-ui/css/nowplayingbar.css Normal file
View file

@ -0,0 +1,230 @@
/* Now playing bar */
.nowPlayingBar {
border-top: 1px solid #444;
text-align: center;
/*box-shadow: 0 0 8px rgba(255,255,255,.4);*/
}
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
vertical-align: middle;
color: #e8e8e8;
margin: 0;
text-align: center;
}
.nowPlayingBar paper-icon-button.mediaButton {
padding: 4px;
}
.mediaButton iron-icon {
height: 40px;
width: 40px;
}
.mediaButton.remoteControlButton iron-icon, .mediaButton.muteButton iron-icon, .mediaButton.unmuteButton iron-icon {
height: 26px;
}
.nowPlayingDoubleText {
top: -3px;
}
.nowPlayingBarInfoContainer {
vertical-align: middle;
position: absolute;
left: 0;
bottom: 0;
}
.nowPlayingImage {
display: inline-block;
vertical-align: middle;
margin-right: 1em;
}
.nowPlayingImage img {
vertical-align: bottom;
}
.nowPlayingBar, .nowPlayingImage img {
height: 90px;
}
.nowPlayingBarText {
display: inline-block;
font-weight: normal;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
text-align: left;
font-size: 14px;
max-width: 130px;
}
@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;
}
}
@media (min-width: 800px) {
.nowPlayingBarText {
margin-right: 30px;
}
}
.nowPlayingBarCenter {
vertical-align: middle;
text-align: center;
margin-top: 20px;
}
.nowPlayingBarPositionContainer {
position: absolute;
left: 90px;
top: 0;
right: 0;
z-index: 1;
}
.nowPlayingBarPositionSlider paper-progress {
height: 4px !important;
}
.nowPlayingBarPositionSlider #sliderBar {
top: 0;
}
.nowPlayingBarPositionSlider #sliderContainer {
width: 100%;
margin-left: -15px;
}
.nowPlayingBarPositionSlider #sliderKnob {
top: -14px !important;
}
.nowPlayingBarPositionSlider #progressContainer {
background-color: transparent !important;
}
.nowPlayingBarPositionSlider #sliderKnobInner {
width: 18px;
height: 18px;
}
.nowPlayingBarRight {
position: absolute;
bottom: 22px;
right: 10px;
vertical-align: middle;
}
.mediaButton img {
height: 24px;
}
.nowPlayingBarCurrentTime {
vertical-align: middle;
font-weight: normal;
position: absolute;
bottom: 38px;
text-align: center;
display: inline-block;
margin: 0 auto;
padding-left: 50px;
}
.nowPlayingBarVolumeSlider {
margin-left: -1em;
}
.nowPlayingBarUserDataButtons {
display: inline-block;
margin-left: 2em;
margin-right: 2em;
}
@media all and (max-width: 1200px) {
.nowPlayingBarUserDataButtons {
display: none;
}
}
@media all and (max-width: 1000px) {
.nowPlayingBarVolumeSlider, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
display: none !important;
}
.nowPlayingBar .playlistButton {
display: none !important;
}
.nowPlayingBarRight {
bottom: 26px;
}
}
@media all and (max-width: 800px) {
.nowPlayingBarCurrentTime {
display: none;
}
.nowPlayingBarCenter > *:not(.nowPlayingBarCurrentTime) {
display: none !important;
}
.nowPlayingBarRight {
bottom: 12px;
}
.nowPlayingBar, .nowPlayingImage img {
height: 70px;
}
.nowPlayingBarPositionContainer {
left: 70px;
}
.nowPlayingBarPositionSlider paper-progress {
height: 3px !important;
}
.nowPlayingBarPositionSlider #sliderKnob {
top: -15px !important;
}
}
@media all and (min-width: 800px) {
.nowPlayingBarRight .pauseButton {
display: none;
}
.nowPlayingBarRight .unpauseButton {
display: none;
}
}