Mercurial > public > sg101
view 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 source
/* * 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; }