diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/app/styles/player.scss --- a/cms/app-client/app/styles/player.scss Mon Jan 18 10:01:39 2016 +0100 +++ b/cms/app-client/app/styles/player.scss Tue Jan 19 19:06:17 2016 +0100 @@ -1,4 +1,93 @@ -#audio-player{ +.player-component{ + text-align: center; +} + +#audio_player { + display: inline-block; + width: 80px; + height: 80px; + position: relative; + padding: 8px; + margin: 10px auto; + background: #fff; + border-radius: 88px; +} +#audio_player .background { + width: 60px; + height: 60px; + border: solid 10px #e5e5e5; + background: #fff; + border-radius: 80px; +} +#audio_player .btn { + cursor: pointer; +} +#audio_player .btn_play { display: block; - margin: 10px auto; + width: 32px; + height: 32px; + position: absolute; + top: 50%; + left: 50%; + margin-top: -16px; + margin-left: -16px; + text-indent: -900em; + z-index: 10; + background: url(images/button_play.png) 10px no-repeat; + background-size: 21px 31px; +} +/* pause */ +#audio_player .btn_play.playing { + background: url(images/button_pause.png) center no-repeat; + background-size: 28px 28px; +} +#audio_player .progress { + position: absolute; + width: 80px; + height: 80px; + top: 8px; + left: 8px; +} +#audio_player .progress .slice { + position: absolute; + width: 80px; + height: 80px; + clip: rect(0px,80px,80px,40px); +} +#audio_player .progress .slice.gt50 { + clip: rect(auto, auto, auto, auto); } +#audio_player .progress .slice .pie { + border: 10px solid #276f84; + position: absolute; + width: 60px; + height: 60px; + clip: rect(0,40px,80px,0); + -moz-border-radius: 80px; + -webkit-border-radius: 80px; + border-radius: 80px; +} +#audio_player .progress .slice .pie.fill { + -moz-transform: rotate(180deg) !important; + -webkit-transform: rotate(180deg) !important; + -o-transform: rotate(180deg) !important; + transform: rotate(180deg) !important; +} + +.audio-controls { + color: #2a768c; + cursor: pointer; + display: inline-block; + font-size: 30px; + margin: 43px 10px; + vertical-align: top; +} + +.duration{ + margin: -5px auto; + text-align: center; +} + +.audio-wrapper{ + display: inline-block; +}