CC-5752 : jPlayer remove controls enabled

adding a scroll bar for a full queue, styling element close buttons.
This commit is contained in:
Naomi 2014-04-08 14:25:13 -04:00
parent 7f2b1c65f9
commit 04d1bb3d50
3 changed files with 53 additions and 41 deletions

View File

@ -1,48 +1,28 @@
<div id="jp_container_1" class="jp-audio jp-video-270p">
<div class="jp-type-playlist">
<div class="jp-playlist">
<ul style="display: block;">
<li class="jp-playlist-current">
</li>
</ul>
<div class="playlist_arrows">
<a href="#" id="playlist_prev">prev</a>
<a href="#" id="playlist_next">next</a>
</div>
</div>
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li class="jp-previous" style="display: list-item;">
<span tabindex="1">previous</span>
</li>
</li>
<li class="jp-play" style="display: list-item;">
<span tabindex="1">play</span>
</li>
<li class="jp-pause" style="display: none;">
<span tabindex="1">pause</span>
</li>
<li class="jp-next" style="display: list-item;">
<span tabindex="1">next</span>
</li>
</ul>
<div class="jp-time-wrap">
<a href="#" class="jp-current" tabindex="1"><span class="jp-artist"></span></a>
<div class="jp-time-block">
<div class="jp-progress">
<div class="jp-seek-bar" style="width: 100%;">
@ -53,9 +33,7 @@
<div class="jp-current-time">0:00:45</div>
</div>
</div>
</div>
</div>
<div class="jp-volume-block">
<div class="jp-mute">
<span tabindex="1" title="mute">mute</span>
@ -70,17 +48,13 @@
<span tabindex="1" title="max volume">max volume</span>
</div>
</div>
<div class="playlist_icon" id="open_playlist"><span>playlist</span></div>
</div>
<div class="jp-no-solution">
<span><?php echo _("Update Required") ?></span>
<?php sprintf(_("To play the media you will need to either update your browser to a recent version or update your %sFlash plugin%s."),
"<a href='http://get.adobe.com/flashplayer/' target='_blank'>",
"</a>") ?>
</div>
</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -419,17 +419,38 @@ div.jp-title {
text-align:center;
}
div.jp-playlist {
width:100%;
height: 75px;
background-color: rgba(39, 39, 39, 0.9);
overflow: hidden;
height: 0px;
position: relative;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
div.jp-playlist {
width: 100%;
background-color: rgba(39, 39, 39, 0.9);
overflow: hidden;
height: 0px;
position: relative;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
white-space: nowrap;
overflow-x: scroll;
}
div.jp-playlist::-webkit-scrollbar {
width: 8px;
height: 8px;
}
div.jp-playlist::-webkit-scrollbar-track {
background-color: transparent;
}
div.jp-playlist::-webkit-scrollbar-thumb {
background-color: #797979;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div.jp-playlist::-webkit-scrollbar-thumb:hover {
background-color: #9B9B9B;
}
div.jp-playlist.open {
@ -454,13 +475,30 @@ div.jp-title li {
}
div.jp-playlist li {
position: relative;
display: inline-block;
width: 125px;
margin: 10px 10px;
overflow: hidden;
margin: 10px 10px 0px 10px;
text-align: left;
}
.jp-playlist ul li .jp-playlist-item-remove {
display: none !important;
}
.jp-playlist ul li:hover .jp-playlist-item-remove {
display: inline !important;
position: absolute;
right: -4px;
top: -4px;
width: 13px;
height: 13px;
text-align: center;
display: block;
text-indent: -9999px;
background-image: url("images/player/remove_icon.png");
}
div.jp-playlist li .jp-playlist-item {
height: 52px;
width: 125px;