1/* 2 * Project: CirclePlayer 3 * http://www.jplayer.org 4 * 5 * Copyright (c) 2012 Happyworm Ltd 6 * 7 * Author: Silvia Benvenuti 8 * Edited by: Mark J Panaghiston 9 * Date: 2nd October 2012 10 * Artwork inspired by: http://forrst.com/posts/Untitled-CJz 11 */ 12 13.cp-container { 14 position:relative; 15 width:104px; /* 200 - (2 * 48) */ 16 height:104px; 17 background:url("bgr.jpg") 0 0 no-repeat; 18 padding:48px; 19 -webkit-tap-highlight-color:rgba(0,0,0,0); 20} 21 22.cp-container :focus { 23 border:none; 24 outline:0; 25} 26 27.cp-buffer-1, 28.cp-buffer-2, 29.cp-progress-1, 30.cp-progress-2 { 31 position:absolute; 32 top:0; 33 left:0; 34 width:104px; 35 height:104px; 36 clip:rect(0px,52px,104px,0px); 37 38 -moz-border-radius:52px; 39 -webkit-border-radius:52px; 40 border-radius:52px; 41} 42 43.cp-buffer-1, 44.cp-buffer-2 { 45 background:url("buffer.png") 0 0 no-repeat; 46} 47 48 49/* FALLBACK for .progress 50 * (24 steps starting from 1hr filled progress, Decrease second value by 104px for next step) 51 * (It needs the container selector to work. Or use div) 52 */ 53 54.cp-container .cp-fallback { 55 background:url("progress_sprite.jpg") no-repeat; 56 background-position:0 104px; 57} 58 59.cp-progress-1, 60.cp-progress-2 { 61 background:url("progress.png") 0 0 no-repeat; 62} 63 64.cp-buffer-holder, 65.cp-progress-holder, 66.cp-circle-control { 67 position:absolute; 68 width:104px; 69 height:104px; 70} 71 72.cp-circle-control { 73 cursor:pointer; 74} 75 76.cp-buffer-holder, 77.cp-progress-holder { 78 clip:rect(0px,104px,104px,52px); 79 display:none; 80} 81 82 83/* This is needed when progress is greater than 50% or for fallback */ 84 85.cp-buffer-holder.cp-gt50, 86.cp-progress-holder.cp-gt50, 87.cp-progress-1.cp-fallback{ 88 clip:rect(auto, auto, auto, auto); 89} 90 91.cp-controls { 92 margin:0; 93 padding:26px; 94} 95 96.cp-controls li{ 97 list-style-type:none; 98 display:block; 99 100 /*IE Fix*/ 101 position:absolute; 102} 103 104.cp-controls li a{ 105 position:relative; 106 display:block; 107 width:50px; 108 height:50px; 109 text-indent:-9999px; 110 z-index:1; 111 cursor:pointer; 112} 113 114.cp-controls .cp-play { 115 background:url("controls.jpg") 0 0 no-repeat; 116} 117 118.cp-controls .cp-play:hover { 119 background:url("controls.jpg") -50px 0 no-repeat; 120} 121 122.cp-controls .cp-pause { 123 background:url("controls.jpg") 0 -50px no-repeat; 124} 125 126.cp-controls .cp-pause:hover { 127 background:url("controls.jpg") -50px -50px no-repeat; 128} 129 130.cp-jplayer { 131 width:0; 132 height:0; 133} 134