parent
ab4c201fdc
commit
909c9014fd
@ -0,0 +1,449 @@ |
||||
/* |
||||
* Skin for jPlayer Plugin (jQuery JavaScript Library) |
||||
* http://www.happyworm.com/jquery/jplayer |
||||
* |
||||
* Skin Name: Blue Monday |
||||
* |
||||
* Copyright (c) 2010 Happyworm Ltd |
||||
* Dual licensed under the MIT and GPL licenses. |
||||
* - http://www.opensource.org/licenses/mit-license.php |
||||
* - http://www.gnu.org/copyleft/gpl.html |
||||
* |
||||
* Author: Silvia Benvenuti |
||||
* Skin Version: 3.0 (jPlayer 2.0.0) |
||||
* Date: 20th December 2010 |
||||
*/ |
||||
|
||||
div.jp-audio, |
||||
div.jp-video { |
||||
|
||||
/* Edit the font-size to counteract inherited font sizing. |
||||
* Eg. 1.25em = 1 / 0.8em |
||||
*/ |
||||
|
||||
font-size:1.25em; |
||||
|
||||
font-family:Verdana, Arial, sans-serif; |
||||
line-height:1.6; |
||||
color: #666; |
||||
} |
||||
div.jp-audio { |
||||
width:20px; |
||||
} |
||||
div.jp-video-270p { |
||||
width:480px; |
||||
} |
||||
div.jp-video-360p { |
||||
width:640px; |
||||
} |
||||
div.jp-interface { |
||||
position: relative; |
||||
/*background-color:#fff; |
||||
* border:1px solid #fff; |
||||
* width:418px; */ |
||||
width:100%; |
||||
|
||||
} |
||||
div.jp-audio div.jp-type-single div.jp-interface { |
||||
height:30px; |
||||
border-bottom:none; |
||||
} |
||||
div.jp-audio div.jp-type-playlist div.jp-interface { |
||||
height:80px; |
||||
} |
||||
div.jp-video div.jp-type-single div.jp-interface { |
||||
height:60px; |
||||
border-bottom:none; |
||||
} |
||||
div.jp-video div.jp-type-playlist div.jp-interface { |
||||
height:60px; |
||||
} |
||||
div.jp-interface ul.jp-controls { |
||||
list-style-type:none; |
||||
padding:0; |
||||
margin: 0; |
||||
} |
||||
div.jp-interface ul.jp-controls li { |
||||
/* position: absolute; */ |
||||
display:inline; |
||||
} |
||||
div.jp-interface ul.jp-controls a { |
||||
position: absolute; |
||||
overflow:hidden; |
||||
text-indent:-9999px; |
||||
} |
||||
a.jp-play, |
||||
a.jp-pause { |
||||
width:40px; |
||||
height:40px; |
||||
z-index:1; |
||||
} |
||||
div.jp-audio div.jp-type-single a.jp-play, |
||||
div.jp-audio div.jp-type-single a.jp-pause { |
||||
top:-8px; |
||||
left:-5px; |
||||
} |
||||
div.jp-audio div.jp-type-playlist a.jp-play, |
||||
div.jp-audio div.jp-type-playlist a.jp-pause { |
||||
top:20px; |
||||
left:48px; |
||||
} |
||||
div.jp-video a.jp-play, |
||||
div.jp-video a.jp-pause { |
||||
top:15px; |
||||
} |
||||
div.jp-video-270p div.jp-type-single a.jp-play, |
||||
div.jp-video-270p div.jp-type-single a.jp-pause { |
||||
left:195px; |
||||
} |
||||
div.jp-video-270p div.jp-type-playlist a.jp-play, |
||||
div.jp-video-270p div.jp-type-playlist a.jp-pause { |
||||
left:220px; |
||||
} |
||||
div.jp-video-360p div.jp-type-single a.jp-play, |
||||
div.jp-video-360p div.jp-type-single a.jp-pause { |
||||
left:275px; |
||||
} |
||||
div.jp-video-360p div.jp-type-playlist a.jp-play, |
||||
div.jp-video-360p div.jp-type-playlist a.jp-pause { |
||||
left:300px; |
||||
} |
||||
a.jp-play { |
||||
background: url("jplayer.blue.monday.png") 0 0 no-repeat; |
||||
} |
||||
a.jp-play:hover { |
||||
background: url("jplayer.blue.monday.png") -41px 0 no-repeat; |
||||
} |
||||
a.jp-pause { |
||||
background: url("jplayer.blue.monday.png") 0 -42px no-repeat; |
||||
display: none; |
||||
} |
||||
a.jp-pause:hover { |
||||
background: url("jplayer.blue.monday.png") -41px -42px no-repeat; |
||||
} |
||||
div.jp-audio div.jp-type-single a.jp-stop { |
||||
top:26px; |
||||
left:90px; |
||||
} |
||||
div.jp-audio div.jp-type-playlist a.jp-stop { |
||||
top:26px; |
||||
left:126px; |
||||
} |
||||
div.jp-video a.jp-stop { |
||||
top:21px; |
||||
} |
||||
div.jp-video-270p div.jp-type-single a.jp-stop { |
||||
left:245px; |
||||
} |
||||
div.jp-video-270p div.jp-type-playlist a.jp-stop { |
||||
left:298px; |
||||
} |
||||
div.jp-video-360p div.jp-type-single a.jp-stop { |
||||
left:325px; |
||||
} |
||||
div.jp-video-360p div.jp-type-playlist a.jp-stop { |
||||
left:378px; |
||||
} |
||||
a.jp-stop { |
||||
background: url("jplayer.blue.monday.png") 0 -83px no-repeat; |
||||
width:28px; |
||||
height:28px; |
||||
z-index:1; |
||||
} |
||||
a.jp-stop:hover { |
||||
background: url("jplayer.blue.monday.png") -29px -83px no-repeat; |
||||
} |
||||
div.jp-audio div.jp-type-playlist a.jp-previous { |
||||
left:20px; |
||||
top:26px; |
||||
} |
||||
div.jp-video div.jp-type-playlist a.jp-previous { |
||||
top:21px; |
||||
} |
||||
div.jp-video-270p div.jp-type-playlist a.jp-previous { |
||||
left:192px; |
||||
} |
||||
div.jp-video-360p div.jp-type-playlist a.jp-previous { |
||||
left:272px; |
||||
} |
||||
a.jp-previous { |
||||
background: url("jplayer.blue.monday.png") 0 -112px no-repeat; |
||||
width:28px; |
||||
height:28px; |
||||
} |
||||
a.jp-previous:hover { |
||||
background: url("jplayer.blue.monday.png") -29px -112px no-repeat; |
||||
} |
||||
div.jp-audio div.jp-type-playlist a.jp-next { |
||||
left:88px; |
||||
top:26px; |
||||
} |
||||
div.jp-video div.jp-type-playlist a.jp-next { |
||||
top:21px; |
||||
} |
||||
div.jp-video-270p div.jp-type-playlist a.jp-next { |
||||
left:260px; |
||||
} |
||||
div.jp-video-360p div.jp-type-playlist a.jp-next { |
||||
left:340px; |
||||
} |
||||
a.jp-next { |
||||
background: url("jplayer.blue.monday.png") 0 -141px no-repeat; |
||||
width:28px; |
||||
height:28px; |
||||
} |
||||
a.jp-next:hover { |
||||
background: url("jplayer.blue.monday.png") -29px -141px no-repeat; |
||||
} |
||||
div.jp-progress { |
||||
position: absolute; |
||||
overflow:hidden; |
||||
background-color: #ddd; |
||||
} |
||||
div.jp-audio div.jp-type-single div.jp-progress { |
||||
top:32px; |
||||
left:130px; |
||||
width:122px; |
||||
height:15px; |
||||
} |
||||
div.jp-audio div.jp-type-playlist div.jp-progress { |
||||
top:32px; |
||||
left:164px; |
||||
width:122px; |
||||
height:15px; |
||||
} |
||||
div.jp-video div.jp-progress { |
||||
top:0px; |
||||
left:0px; |
||||
width:100%; |
||||
height:10px; |
||||
} |
||||
div.jp-seek-bar { |
||||
background: url("jplayer.blue.monday.png") 0 -202px repeat-x; |
||||
width:0px; |
||||
/* height:15px; */ |
||||
height:100%; |
||||
cursor: pointer; |
||||
} |
||||
div.jp-play-bar { |
||||
background: url("jplayer.blue.monday.png") 0 -218px repeat-x ; |
||||
width:0px; |
||||
/* height:15px; */ |
||||
height:100%; |
||||
} |
||||
|
||||
/* The seeking class is added/removed inside jPlayer */ |
||||
div.jp-seeking-bg { |
||||
background: url("pbar-ani.gif"); |
||||
} |
||||
|
||||
a.jp-mute, |
||||
a.jp-unmute { |
||||
width:18px; |
||||
height:15px; |
||||
} |
||||
div.jp-audio div.jp-type-single a.jp-mute, |
||||
div.jp-audio div.jp-type-single a.jp-unmute { |
||||
top:32px; |
||||
left:274px; |
||||
} |
||||
div.jp-audio div.jp-type-playlist a.jp-mute, |
||||
div.jp-audio div.jp-type-playlist a.jp-unmute { |
||||
top:32px; |
||||
left:296px; |
||||
} |
||||
div.jp-video a.jp-mute, |
||||
div.jp-video a.jp-unmute { |
||||
top:27px; |
||||
} |
||||
div.jp-video-270p div.jp-type-single a.jp-mute, |
||||
div.jp-video-270p div.jp-type-single a.jp-unmute { |
||||
left:304px; |
||||
} |
||||
div.jp-video-270p div.jp-type-playlist a.jp-unmute, |
||||
div.jp-video-270p div.jp-type-playlist a.jp-mute { |
||||
left:363px; |
||||
} |
||||
div.jp-video-360p div.jp-type-single a.jp-mute, |
||||
div.jp-video-360p div.jp-type-single a.jp-unmute { |
||||
left:384px; |
||||
} |
||||
div.jp-video-360p div.jp-type-playlist a.jp-mute, |
||||
div.jp-video-360p div.jp-type-playlist a.jp-unmute { |
||||
left:443px; |
||||
} |
||||
a.jp-mute { |
||||
background: url("jplayer.blue.monday.png") 0 -186px no-repeat; |
||||
} |
||||
a.jp-mute:hover { |
||||
background: url("jplayer.blue.monday.png") -19px -170px no-repeat; |
||||
} |
||||
a.jp-unmute { |
||||
background: url("jplayer.blue.monday.png") 0 -170px no-repeat; |
||||
display: none; |
||||
} |
||||
a.jp-unmute:hover { |
||||
background: url("jplayer.blue.monday.png") -19px -186px no-repeat; |
||||
} |
||||
div.jp-volume-bar { |
||||
position: absolute; |
||||
overflow:hidden; |
||||
background: url("jplayer.blue.monday.png") 0 -250px repeat-x; |
||||
width:46px; |
||||
height:5px; |
||||
cursor: pointer; |
||||
} |
||||
div.jp-audio div.jp-type-single div.jp-volume-bar { |
||||
top:37px; |
||||
left:302px; |
||||
} |
||||
div.jp-audio div.jp-type-playlist div.jp-volume-bar { |
||||
top:37px; |
||||
left:324px; |
||||
} |
||||
div.jp-video div.jp-volume-bar { |
||||
top:32px; |
||||
} |
||||
div.jp-video-270p div.jp-type-single div.jp-volume-bar { |
||||
left:332px; |
||||
} |
||||
div.jp-video-270p div.jp-type-playlist div.jp-volume-bar { |
||||
left:391px; |
||||
} |
||||
div.jp-video-360p div.jp-type-single div.jp-volume-bar { |
||||
left:412px; |
||||
} |
||||
div.jp-video-360p div.jp-type-playlist div.jp-volume-bar { |
||||
left:471px; |
||||
} |
||||
div.jp-volume-bar-value { |
||||
background: url("jplayer.blue.monday.png") 0 -256px repeat-x; |
||||
width:0px; |
||||
height:5px; |
||||
} |
||||
div.jp-current-time, |
||||
div.jp-duration { |
||||
position: absolute; |
||||
font-size:.64em; |
||||
font-style:oblique; |
||||
} |
||||
div.jp-duration { |
||||
text-align: right; |
||||
} |
||||
div.jp-audio div.jp-type-single div.jp-current-time, |
||||
div.jp-audio div.jp-type-single div.jp-duration { |
||||
top:49px; |
||||
left:130px; |
||||
width:122px; |
||||
} |
||||
div.jp-audio div.jp-type-playlist div.jp-current-time, |
||||
div.jp-audio div.jp-type-playlist div.jp-duration { |
||||
top:49px; |
||||
left:164px; |
||||
width:122px; |
||||
} |
||||
div.jp-video div.jp-current-time, |
||||
div.jp-video div.jp-duration { |
||||
top:10px; |
||||
left:0px; |
||||
width:98%; |
||||
padding:0 1%; |
||||
} |
||||
div.jp-playlist { |
||||
/* width:418px; */ |
||||
width:100%; |
||||
background-color:#ccc; |
||||
border:1px solid #009be3; |
||||
border-top:none; |
||||
} |
||||
div.jp-playlist ul { |
||||
list-style-type:none; |
||||
margin:0; |
||||
padding:0 20px; |
||||
/* background-color:#ccc; */ |
||||
/* border:1px solid #009be3; */ |
||||
/* border-top:none; */ |
||||
/* width:378px; */ |
||||
font-size:.72em; |
||||
} |
||||
|
||||
|
||||
div.jp-type-single div.jp-playlist li { |
||||
padding:5px 0 5px 20px; |
||||
font-weight:bold; |
||||
} |
||||
div.jp-type-playlist div.jp-playlist li { |
||||
padding:5px 0 4px 20px; |
||||
border-bottom:1px solid #eee; |
||||
} |
||||
/* |
||||
div.jp-video div.jp-playlist li { |
||||
padding:5px 0 5px 20px; |
||||
font-weight:bold; |
||||
} |
||||
*/ |
||||
div.jp-type-playlist div.jp-playlist li.jp-playlist-last { |
||||
padding:5px 0 5px 20px; |
||||
border-bottom:none; |
||||
} |
||||
div.jp-type-playlist div.jp-playlist li.jp-playlist-current { |
||||
list-style-type:square; |
||||
list-style-position:inside; |
||||
padding-left:8px; |
||||
} |
||||
div.jp-type-playlist div.jp-playlist a { |
||||
color: #666; |
||||
text-decoration: none; |
||||
} |
||||
div.jp-type-playlist div.jp-playlist a:hover { |
||||
color:#0d88c1; |
||||
} |
||||
div.jp-type-playlist div.jp-playlist a.jp-playlist-current { |
||||
color:#0d88c1; |
||||
} |
||||
div.jp-type-playlist div.jp-playlist div.jp-free-media { |
||||
display:inline; |
||||
margin-left:20px; |
||||
} |
||||
|
||||
div.jp-video div.jp-video-play { |
||||
background: transparent url("jplayer.blue.monday.video.play.png") no-repeat center; |
||||
/* position: relative; */ |
||||
position: absolute; |
||||
cursor:pointer; |
||||
z-index:2; |
||||
} |
||||
div.jp-video div.jp-video-play:hover { |
||||
background: transparent url("jplayer.blue.monday.video.play.hover.png") no-repeat center; |
||||
} |
||||
div.jp-video-270p div.jp-video-play { |
||||
top:-270px; |
||||
width:480px; |
||||
height:270px; |
||||
} |
||||
div.jp-video-360p div.jp-video-play { |
||||
top:-360px; |
||||
width:640px; |
||||
height:360px; |
||||
} |
||||
|
||||
div.jp-jplayer { |
||||
width:0px; |
||||
height:0px; |
||||
} |
||||
div.jp-video div.jp-jplayer { |
||||
border:1px solid #009be3; |
||||
border-bottom:none; |
||||
z-index:1; |
||||
} |
||||
div.jp-video-270p div.jp-jplayer { |
||||
width:480px; |
||||
height:270px; |
||||
} |
||||
div.jp-video-360p div.jp-jplayer { |
||||
width:640px; |
||||
height:360px; |
||||
} |
||||
div.jp-jplayer { |
||||
background-color: #000000; |
||||
} |
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 297 KiB |
Loading…
Reference in new issue