Pony.fm/resources/assets/styles/player.less

@import 'variables';
@import 'mixins';

body.is-logged {
  .track-player {
	margin-right: 75px;
  }
}

.track-player {
  padding: 10px;

  .image {
	float: left;
	width: 43px;
	height: 43px;
	position: relative;
	overflow: hidden;
	padding: 1px;

	img {
	  .box-shadow(none);

	  display: block;
	  width: 40px;
	  height: 40px;
	  padding: 0px;
	  border: 1px solid #bcbcbc;
	}

	.loader {
	  .transition(top 250ms linear);

	  z-index: 1000;
	  background: rgba(0, 0, 0, .6);
	  color: #fff;
	  position: absolute;
	  top: -50px;
	  left: 2px;
	  width: 42px;
	  height: 42px;
	  line-height: 43px;
	  text-align: center;
	  font-size: 16px;

	  &.showing {
		top: 2px;
	  }
	}
  }

  .inner {
	margin-left: 55px;
  }

  .song, .artist {
	.ellipsis();
	line-height: normal;
	display: block;

	a {
	  color: #555;

	  &:hover {
		text-decoration: none;
		color: #111;
	  }
	}
  }

  .song {
	font-weight: bold;
  }

  .volume-slider {
	display: none;
  }

  .transport {
	.border-radius(4px);

	background: #aaa;
	height: 5px;
	position: relative;
	cursor: pointer;
	margin-top: 4px;

	.bar {
	  z-index: 500;
	  background: #84528A;
	}

	.loader-bar {
	  z-index: 200;
	  background: #ddd;
	}

	.bar, .loader-bar {
	  .border-radius(4px);

	  position: absolute;
	  top: 0px;
	  left: 0px;
	  height: 100%;
	}
  }

  .buttons {
	list-style: none;
	margin: 0px;
	padding: 0px;
	float: right;

	li.status {
	  font-size: 10pt;
	  margin-top: 12px;
	  margin-right: 5px;

	  strong {
		font-weight: normal;
	  }
	}

	li {
	  line-height: normal;
	  float: left;
	  margin: 0px;
	  padding: 0px;
	  font-size: 15pt;

	  > a {
		display: block;
		padding: 5px 0px;
		width: 40px;
		text-align: center;
		color: #5A5A5A;

		&:hover {
		  text-decoration: none;
		  background: darken(#eee, 10%);
		  color: #000;
		}
	  }

	  &.disabled {
		a {
		  color: #ccc;
		  cursor: default;

		  &:hover {
			background: transparent;
			color: #ccc;
		  }
		}
	  }

	  &.volume {
		position: relative;

		.volume-slider {
		  display: none;
		  z-index: 1000;
		  position: absolute;
		  left: 0px;
		  top: 33px;
		  width: 100%;
		  height: 150px;
		  background: #ddd;

		  .bar {
			background: @pfm-purple;
			width: 10px;
			margin: auto;
			height: 100%;
			position: relative;
		  }

		  .knob {
			position: absolute;
			top: 0px;
			left: -3px;

			background: darken(@pfm-purple, 20%);
			width: 16px;
			height: 16px;
		  }
		}

		&:hover, &.keep-open {
		  .volume-slider {
			display: block;
		  }

		  background: #ddd;
		}
	  }
	}
  }
}