A SCSS @mixin for styling custom SoundCloud widgets

soundcloud_mixin.scss

// Here's a little mixin I created to style some custom SoundCloud players
// $size = the size of the arwork box (also size of margins for track info + waveform)
// $title-color = the color of the track title
// $waveform-color = color of the audio waveform
// $play-color = color of the player indicator bar (current track position in playback)
// 
// Usage: @include scplayer (60px, #001825, #aaa, #777)

@mixin scplayer($size, $title-color, $waveform-color, $play-color) {

font-family: $sans-serif;
width: 100%;
height: $size;
position: relative;
margin: 0 0 24px;
overflow: hidden;

	ol.sc-trackslist {
	position: absolute;
	width: 90%;
	overflow: hidden;
	left: $size !important;
	top: 0;
	font-family: "akagi-pro" !important;
	background: #fff;
	font-size: 12px;
	}
	
	ol.sc-trackslist li {
		margin: 0 !important;
		width: 100%;
	}
	
	.sc-scrubber {
		position: absolute;
		top: 20px;
		height: 40px;
		width: 90%;
		left: $size !important;
		z-index: 0;
		float: right;
		background: #fff !important;
	}
	
	&:hover .sc-scrubber, .sc-player.playing .sc-scrubber {
		display: block;
		left: $size;
	}
	
	.sc-artwork-list {
		display: block;
		width: $size;
		height: $size;
	}
	
	.sc-info {
		display: none !important;
	}
	
	ol.sc-trackslist li.active a {
		color: #001825;
	}
	
	.sc-controls {
		position: absolute;
		width: 40px;
		height: 40px;
		top: 10px;
		left: 10px;
	}
	
	.sc-time-span img {
		height: 30px;
		width: 100%;
		background-color: #aaa;
	}
	
	.sc-scrubber .sc-played {
		background-color: #777;
		opacity: .2;
	}
	
	.sc-scrubber .sc-time-indicators {
		background: none !important;
		color: #595959;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		padding: 6px;
		font-size: 9px;
		font-weight: normal;
		line-height: 1em;
		border-radius: 0;
		position: absolute;
		top: -18px;
	}
	
	.sc-trackslist li.active a {
		position: relative;
		left: 3px;
	}
	
	.sc-waveform-container {
		height: 35px !important;
	}

} // end @mixin

Requires this: https://github.com/soundcloud/soundcloud-custom-player & using the minimal.css styles.