Mercurial > public > sg101

view static/js/jplayer/skins/blue.monday/jplayer.blue.monday.css @ 429:d0f0800eef0c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Making the jquery tabbed version of the messages app the current version and removing the old. Also figured out how to dynamically update the base template's count of unread messages when messages are read.
author Brian Neal <bgneal@gmail.com>
date Tue, 03 May 2011 02:56:58 +0000
parents 9175392da056
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;
}