Iris/src/scss/components/_player.scss

.volume-control {
	position: relative;

	a {
		position: relative;
		z-index: 99;
		padding: 0 !important;
	}

	.fa {
		width: 6px;
		padding: 12px;
	}

	.slider-wrapper {
		display: none;
		position: absolute;
		bottom: -8px;
		left: 1px;
		height: 80px;
		padding: 10px 5px 35px 5px;
		background: rgba(0,0,0,0.8);
		z-index: 98;
	}

	.fa.muted {
		color: $red;
		position: relative;
	}

	.modal-trigger {
		display: none !important; 
	}

	.hover-trigger:hover {
		.slider-wrapper {
			display: block;
		}
	}
}

.player {

	.current-track {
		font-size: 16px;
		text-transform: uppercase;
		text-align: center;
		padding-bottom: 15px;

		.title {
			@include one_line_text;
		}

		.artist-sentence {
			opacity: 0.5;
			display: block;
			@include one_line_text;

			.artist {
				color: inherit;
				text-decoration: none;
				border-bottom: 1px dotted transparent;
			}
		}
	}

	.controls {
		text-align: center;

		a {
			cursor: pointer;
			font-size: 14px;
			padding: 8px;
			display: inline-block;
			opacity: 0.8;

			&.active {
				color: $turquoise;
			}

			&:hover {
				opacity: 1.0;
			}
		}
	}

	.slider.horizontal {
		margin-bottom: 0;
	}

	.artwork {
		position: relative;

		&.radio-enabled {
			.thumbnail {
				box-sizing: border-box;
				padding: 10%;
			}

			.radio-overlay {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 2;
			}
		}
	}

	&.mini-player {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 220px;
		box-sizing: border-box;
		z-index: 97;
		padding: 14px;
		color: #FFFFFF;

		.artist-sentence {
			.artist:hover {
				border-color: #FFFFFF !important;
			}
		}

		@include responsive( $bp_medium, null, $bp_shallow ){
			right: 0;
			width: auto;
			background: $dark_grey;
			padding: 10px;

			.controls {
				height: 0px;

				.play {
					position: absolute;
					top: 6px;
					left: 3px;
					padding: 12px;
				}

				.next {
					position: absolute;
					top: 6px;
					left: 40px;
					padding: 12px;
				}

				.volume-control {
					position: absolute;
					top: 6px;
					right: 3px;

					a {
						padding: 12px;
					}

					.hover-trigger {
						display: none;
					}

					.modal-trigger {
						display: block !important;
					}

					.slider-wrapper {
						bottom: 2px;
						left: 0;
					}
				}
			}

			.slider.progress {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				margin: 0;
				height: 2px;

				.track {
					top: 0px;
					background: transparent;
				}
			}

			.current-track {
				font-size: 12px;
				padding: 0 40px 0 70px;
				line-height: 14px;
			}
		}
	}
}