Newer
Older
ubFramework / Source / assets / css / addon / audio_player.css
#audio_player { width:40px; height: 40px; position: relative; padding: 2px; margin: 25px auto; background: #f1f1f1; border-radius: 22px }
	#audio_player .background { width: 35px; height: 35px; border: solid 2px #e5e5e5; background: #f1f1f1; border-radius: 20px }
	#audio_player .btn { cursor: pointer }
	#audio_player .btn_play { display: block; width: 16px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; text-indent: -900em; z-index: 10; background: url(/assets/images/addon/button_play.png) 4.75px top no-repeat; background-size: 10.5px 15.5px }
	/* pause */
	#audio_player .btn_play.playing { background: url(/assets/images/addon/button_pause.png) center no-repeat; background-size: 54px 59px }

	#audio_player .progress { position: absolute; width: 40px; height: 40px; top: 8px; left: 8px;}
	#audio_player .progress .slice { position: absolute; width: 40px; height: 40px; clip: rect(0px,40px,40px,20px); }
	#audio_player .progress .slice.gt50 { clip:rect(auto, auto, auto, auto); }
	#audio_player .progress .slice .pie { border: 10px solid #276f84; position: absolute; width: 35px; height:35px; clip:rect(0,20px,40px,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;
	}

/* ==|== media queries ====================================================== */

	@media only screen and (min-width: 480px) {


	}

	@media only screen and (min-width: 768px) {

	}