oldhaven/public/stylesheets/_sass/player.scss

@import "alpha_gradient";
@import "rounded";
@import "opacity";
$icons_dir: "/images/icns/";

.player-container {
	.player {
		.now-playing {
			position: relative;
			height: 30px;
			color: #FFF;
			text-align: center;
			line-height: 30px;
			overflow: hidden;
		
			.fade {
				position: absolute;
				top: 0px;
				right: 0px;
				width: 80px;
				height: 30px;
				z-index: 10;
				@include alpha_gradient(32, 32, 32, '202020');
			}
		}
	
		.progress {
			width: 330px;
			height: 5px;
			background-color: #333;
			margin: 0 10px;
			cursor: pointer;
		
			.loaded {
				width: 0;
				height: 5px;
				background-color: #405050;
			}
		
			.played {
				width: 0;
				height: 5px;
				background-color: #09A;
			}
		}
	
		.controls {
			width: 290px;
			margin: 20px 95px;
		
			> * {
				width: 40px;
				height: 40px;
				float: left;
				margin-right: 20px;
				cursor: pointer;
			}
		
			.prev {
				background-image: url('#{$icons_dir}prev.png');
			}
		
			.play {
				background-image: url('#{$icons_dir}play.png');
			}
		
			.pause {
				background-image: url('#{$icons_dir}pause.png');
				display: none;
			}
		
			.next {
				background-image: url('#{$icons_dir}next.png');
			}
		}
	}
	
	.playlist {
		.playlist-tracks {
			width: 343px;
			
			li {
				display: block;
				height: 26px;
				
				.item {
					position: relative;
					overflow: hidden;
					height: 26px;
					color: #FFF;
					
					&:hover {
						background-color: #444;
						cursor: default;
						
						.fade {
							@include alpha_gradient(64, 64, 64, '404040');
						}
					}
					
					.dragbox {
						position: absolute;
						top: 1px;
						left: 2px;
						width: 15px;
						height: 26px;
						background-image: url('/images/drag.png');
						cursor: move;
					}
					
					.title {
						position: absolute;
						top: 0;
						left: 19px;
						z-index: 10;
						width: 316px;
						height: 26px;
						line-height: 26px;
						display: block;
						float: left;
						overflow: hidden;
						
						.data.artist, .playtrack {
							border-bottom: #555 1px dotted;
							cursor: pointer;
						}
					}
					
					.duration {
						display: block;
						position: absolute;
						top: 0;
						right: 5px;
						z-index: 30;
						height: 26px;
						line-height: 26px;
					}
					
					.remove {
						display: none;
						position: absolute;
						top: 4px;
						right: 5px;
						z-index: 30;
						height: 15px;
						font-size: 11px;
						background-color: #622;
						color: #FFF;
						border: #822 1px solid;
						padding: 1px 2px 0 2px;
						@include rounded(2);
						cursor: pointer;
					}
					
					.fade {
						position: absolute;
						top: 0;
						right: 0;
						z-index: 20;
						width: 100px;
						height: 26px;
						@include alpha_gradient(32, 32, 32, '202020');
					}
				}
				
				&:nth-child(odd) {
					.item {
						background-color: #2A2A2A;
						
						.fade {
							@include alpha_gradient(42, 42, 42, '2a2a2a');
						}
					}
				}
				
				&.now {
					.item {
						color: #09A;
					}
				}
			}
		}
	}
	
	.additional-controls {
		width: 350px;
		height: 27px;
		background-color: #333;
		border-top: #444 1px solid;
		
		.item {
			float: left;
			margin-left: 10px;
			font-size: 14px;
			line-height: 26px;
			color: #FFF;
			@include opacity(0.3);
			
			&:hover {
				@include opacity(1);
				cursor: pointer;
			}
			
			&.active {
				@include opacity(0.8);
			}
		}
		
		img {
			float: left;
			margin-top: 1px;
		}
		
		.annotation {
			float: left;
			margin-left: 2px;
		}
		
		&#empty-playlist {
			float: right;
			margin-right: 10px;
			
			img {
				margin-top: 3px;
			}
		}
	}
}