134 lines
2.2 KiB
CSS
134 lines
2.2 KiB
CSS
|
/*
|
||
|
|
* Project: CirclePlayer
|
||
|
|
* http://www.jplayer.org
|
||
|
|
*
|
||
|
|
* Copyright (c) 2012 Happyworm Ltd
|
||
|
|
*
|
||
|
|
* Author: Silvia Benvenuti
|
||
|
|
* Edited by: Mark J Panaghiston
|
||
|
|
* Date: 2nd October 2012
|
||
|
|
* Artwork inspired by: http://forrst.com/posts/Untitled-CJz
|
||
|
|
*/
|
||
|
|
|
||
|
|
.cp-container {
|
||
|
|
position:relative;
|
||
|
|
width:104px; /* 200 - (2 * 48) */
|
||
|
|
height:104px;
|
||
|
|
background:url("bgr.jpg") 0 0 no-repeat;
|
||
|
|
padding:48px;
|
||
|
|
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-container :focus {
|
||
|
|
border:none;
|
||
|
|
outline:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-buffer-1,
|
||
|
|
.cp-buffer-2,
|
||
|
|
.cp-progress-1,
|
||
|
|
.cp-progress-2 {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:0;
|
||
|
|
width:104px;
|
||
|
|
height:104px;
|
||
|
|
clip:rect(0px,52px,104px,0px);
|
||
|
|
|
||
|
|
-moz-border-radius:52px;
|
||
|
|
-webkit-border-radius:52px;
|
||
|
|
border-radius:52px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-buffer-1,
|
||
|
|
.cp-buffer-2 {
|
||
|
|
background:url("buffer.png") 0 0 no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* FALLBACK for .progress
|
||
|
|
* (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step)
|
||
|
|
* (It needs the container selector to work. Or use div)
|
||
|
|
*/
|
||
|
|
|
||
|
|
.cp-container .cp-fallback {
|
||
|
|
background:url("progress_sprite.jpg") no-repeat;
|
||
|
|
background-position:0 104px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-progress-1,
|
||
|
|
.cp-progress-2 {
|
||
|
|
background:url("progress.png") 0 0 no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-buffer-holder,
|
||
|
|
.cp-progress-holder,
|
||
|
|
.cp-circle-control {
|
||
|
|
position:absolute;
|
||
|
|
width:104px;
|
||
|
|
height:104px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-circle-control {
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-buffer-holder,
|
||
|
|
.cp-progress-holder {
|
||
|
|
clip:rect(0px,104px,104px,52px);
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* This is needed when progress is greater than 50% or for fallback */
|
||
|
|
|
||
|
|
.cp-buffer-holder.cp-gt50,
|
||
|
|
.cp-progress-holder.cp-gt50,
|
||
|
|
.cp-progress-1.cp-fallback{
|
||
|
|
clip:rect(auto, auto, auto, auto);
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-controls {
|
||
|
|
margin:0;
|
||
|
|
padding:26px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-controls li{
|
||
|
|
list-style-type:none;
|
||
|
|
display:block;
|
||
|
|
|
||
|
|
/*IE Fix*/
|
||
|
|
position:absolute;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-controls li a{
|
||
|
|
position:relative;
|
||
|
|
display:block;
|
||
|
|
width:50px;
|
||
|
|
height:50px;
|
||
|
|
text-indent:-9999px;
|
||
|
|
z-index:1;
|
||
|
|
cursor:pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-controls .cp-play {
|
||
|
|
background:url("controls.jpg") 0 0 no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-controls .cp-play:hover {
|
||
|
|
background:url("controls.jpg") -50px 0 no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-controls .cp-pause {
|
||
|
|
background:url("controls.jpg") 0 -50px no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-controls .cp-pause:hover {
|
||
|
|
background:url("controls.jpg") -50px -50px no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cp-jplayer {
|
||
|
|
width:0;
|
||
|
|
height:0;
|
||
|
|
}
|