Mercurial > public > sg101
diff static/js/jplayer/skins/blue.monday/jplayer.blue.monday.css @ 402:9175392da056
Fixing #198; add a media player to the podcast pages.
author | Brian Neal <bgneal@gmail.com> |
---|---|
date | Sun, 27 Mar 2011 01:51:18 +0000 |
parents | |
children | a747215e9a5a |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/static/js/jplayer/skins/blue.monday/jplayer.blue.monday.css Sun Mar 27 01:51:18 2011 +0000 @@ -0,0 +1,448 @@ +/* + * 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:420px; +} +div.jp-video-270p { + width:480px; +} +div.jp-video-360p { + width:640px; +} +div.jp-interface { + position: relative; + background-color:#eee; + /* width:418px; */ + width:100%; + border:1px solid #009be3; +} +div.jp-audio div.jp-type-single div.jp-interface { + height:80px; + 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:20px; + left:40px; +} +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.jpg") 0 0 no-repeat; +} +a.jp-play:hover { + background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat; +} +a.jp-pause { + background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat; + display: none; +} +a.jp-pause:hover { + background: url("jplayer.blue.monday.jpg") -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.jpg") 0 -83px no-repeat; + width:28px; + height:28px; + z-index:1; +} +a.jp-stop:hover { + background: url("jplayer.blue.monday.jpg") -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.jpg") 0 -112px no-repeat; + width:28px; + height:28px; +} +a.jp-previous:hover { + background: url("jplayer.blue.monday.jpg") -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.jpg") 0 -141px no-repeat; + width:28px; + height:28px; +} +a.jp-next:hover { + background: url("jplayer.blue.monday.jpg") -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.jpg") 0 -202px repeat-x; + width:0px; + /* height:15px; */ + height:100%; + cursor: pointer; +} +div.jp-play-bar { + background: url("jplayer.blue.monday.jpg") 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.jpg") 0 -186px no-repeat; +} +a.jp-mute:hover { + background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat; +} +a.jp-unmute { + background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat; + display: none; +} +a.jp-unmute:hover { + background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat; +} +div.jp-volume-bar { + position: absolute; + overflow:hidden; + background: url("jplayer.blue.monday.jpg") 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.jpg") 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; +}