/* * 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:82px; /* 200 - (2 * 48) */ height:82px; background:url(buffer.png) 0 0 no-repeat #fff; border-radius:100%; padding:0px; -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:82px; height:82px; clip:rect(0px,41px,82px,0px); -moz-border-radius:82px; -webkit-border-radius:82px; border-radius:82px; } .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 82px 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 82px; } .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:82px; height:82px; } .cp-circle-control { cursor:pointer; } .cp-buffer-holder, .cp-progress-holder { clip:rect(0px,82px,82px,41px); 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:0; position:relative; width:82px; height:82px; } .cp-controls li{ list-style-type:none; display:block; width:82px; height:82px; /*IE Fix*/ position:absolute; } .cp-controls li a{ position:relative; display:block; width:82px; height:82px; text-indent:-9999px; z-index:1; cursor:pointer; } .cp-controls .cp-play { background:url("playMusic.png") 0 0 no-repeat; } .cp-controls .cp-play:hover { opacity:0.8; } .cp-controls .cp-pause { background:url("playMusic.png") 0 bottom no-repeat; } .cp-controls .cp-pause:hover { opacity:0.8; } .cp-jplayer { width:0; height:0; }