hues-m.css

.hues-m-root {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.hues-m-beatbar {
  position: absolute;
  top: 0;
  max-width: 992px;
  height: 30px;
  margin: 0 auto;
  left: 8px;
  right: 8px;
  color: white;
  background: rgba(127,127,127,0.5);
  border-color: rgba(0,0,0,0.5);
  border-width: 0 4px 4px;
  border-style: solid;
  transform: translate3d(0,0,0);
}
.inverted .hues-m-beatbar {
  border-color: rgba(255,255,255,0.5);
}

.hues-m-beatleft, .hues-m-beatright, .hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
  color: white;
  background: rgba(0,0,0,0.7);
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 10px;
}
.inverted .hues-m-beatleft, .inverted .hues-m-beatright, .inverted .hues-m-songtitle, .inverted .hues-m-imagename, .inverted .hues-m-huename {
  color: black;
  background: rgba(255,255,255,0.7);
}

.hues-m-huename {
  font-size: 8px;
  height: 12px;
  line-height: 12px;
  border-radius: 10px;
}

.hues-m-beatleft, .hues-m-beatright {
  position: absolute;
  padding: 0 0 0 20px;
  top: 5px;
  overflow: hidden;
  border-radius: 0 10px 10px 0;
}
.hues-m-beatleft {
  transform: scaleX(-1);
  left: 8px;
  right: 50%;
}
.hues-m-beatright {
  left: 50%;
  right: 8px;
}

.hues-m-beatcenter {
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 40px;
  width: 40px;
  color: white;
  background: rgb(80,80,80);
  font-size: 20px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
}
.inverted .hues-m-beatcenter {
  color: black;
  background: rgb(175,175,175);
  box-shadow: inset 0 0 12px rgba(255,255,255,0.5);
}

.hues-m-beatcenter > span {
  -moz-animation-duration: 150ms;
  -webkit-animation-duration: 150ms;
  animation-duration: 150ms;
  -moz-animation-name: hues-m-beatcenter;
  -webkit-animation-name: hues-m-beatcenter;
  animation-name: hues-m-beatcenter;
  -moz-animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-moz-keyframes hues-m-beatcenter {
  from {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes hues-m-beatcenter {
  from {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes hues-m-beatcenter {
  from {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.hues-m-controls {
  position: absolute;
  bottom: 0;
  max-width: 992px;
  height: 104px;
  margin: 0 auto;
  overflow: hidden;
  left: 8px;
  right: 8px;
  color: rgba(255,255,255,0.7);
  background: rgba(127,127,127,0.5);
  border-color: rgba(0,0,0,0.5);
  border-width: 4px 4px 0;
  border-style: solid;
  transform: translate3d(0,0,0);
}
.inverted .hues-m-controls {
  color: rgba(0,0,0,0.7);
  border-color: rgba(255,255,255,0.5);
}

.hues-m-songtitle, .hues-m-imagename, .hues-m-huename {
  position: absolute;
  left: 8px;
  right: 8px;
  text-align: center;
  padding: 0 4px;
}
.hues-m-songtitle {
  bottom: 5px;
}
.hues-m-imagename {
  bottom: 29px;
}

.hues-m-songtitle > a:link, .hues-m-songtitle > a:visited, .hues-m-imagename > a:link, .hues-m-imagename > a:visited {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.hues-m-songtitle > a.small, .hues-m-imagename > a.small {
  font-size: 10px;
}
.hues-m-songtitle > a.x-small, .hues-m-imagename > a.x-small {
  font-size: 8px;
}

.hues-m-leftbox {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 50%;
  height: 54px;
}

.hues-m-rightbox {
  position: absolute;
  bottom: 50px;
  left: 50%;
  right: 0;
  height: 54px;
}

.hues-m-huename {
  bottom: 5px;
}

.hues-m-vol-bar {
  position: absolute;
  height: 20px;
  bottom: 21px;
  left: 32px;
  right: 32px;
}

.hues-m-vol-bar > button {
  display: block;
  position: absolute;
  left: 0;
  bottom: 14px;
  right: 0;
  height: 12px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  padding: 0;
  width: 100%;
  background: transparent;
  border: none;
}
.hues-m-vol-bar > input {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 12px;
}

.hues-m-songs-controls {
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  width: 80px;
}
.hues-m-images-controls {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 80px;
}

.hues-m-songs-select, .hues-m-images-select, .hues-m-button-left, .hues-m-button-right, .hues-m-button-mid {
  display: block;
  position: absolute;
  padding: 0;
  margin: 0;
  font: inherit;
  border: none;
  color: inherit;
  background: transparent;
}
.hues-m-songs-select:focus, .hues-m-images-select:focus, .hues-m-button-left:focus, .hues-m-button-right:focus, .hues-m-button-mid:focus {
  color: white;
  outline: none;
}
/*.hues-m-songs-select:hover, .hues-m-songs-select:active, .hues-m-images-select:hover, .hues-m-images-select:active,*/ .hues-m-button-left:hover, .hues-m-button-left:active, .hues-m-button-right:hover, .hues-m-button-right:active, .hues-m-button-mid:hover, .hues-m-button-mid:active {
  color: white;
}
/*.inverted .hues-m-songs-select:hover, .inverted .hues-m-songs-select:active, .inverted .hues-m-images-select:hover, .inverted .hues-m-images-select:active,*/ .inverted .hues-m-button-left:hover, .inverted .hues-m-button-left:active, .inverted .hues-m-button-right:hover, .inverted .hues-m-button-right:active, .inverted .hues-m-button-mid:hover, .inverted .hues-m-button-mid:active {
  color: black;
}

.hues-m-songs-select, .hues-m-images-select {
  width: 100%;
  padding: 4px 0 1px;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  font-size: 12px;
  line-height: 12px;
}
.hues-m-button-left, .hues-m-button-right {
  font-size: 12px;
  line-height: 12px;
  bottom: 5px;
  width: 24px;
  padding: 11px 0 9px;
}
.hues-m-button-left {
  text-align: right;
  left: 0;
}
.hues-m-button-right {
  text-align: left;
  right: 0;
}
.hues-m-button-mid {
  font-size: 20px;
  line-height: 24px;
  bottom: 5px;
  left: 24px;
  width: 32px;
  padding: 5px 0 3px;
}

.hues-m-button-bg {
  position: absolute;
  bottom: 5px;
  left: 8px;
  right: 8px;
  height: 32px;
  opacity: 0.7;
}
.hues-m-button-sidebg {
  position: absolute;
  bottom: 8px;
  top: 8px;
  left: 1px;
  right: 1px;
  border-radius: 8px;
  background: black;
}
.hues-m-button-midbg {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 16px;
  right: 16px;
  border-radius: 16px;
  background: black;
}
.inverted .hues-m-button-sidebg, .inverted .hues-m-button-midbg {
  background: white;
}

/* Fun slider stuff! */

input[type=range] {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 12px;
  background: transparent;
  -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 0;
}
.inverted input[type=range]::-webkit-slider-runnable-track {
  background: rgba(0,0,0,0.7);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  height: 12px;
  width: 4px;
  border-radius: 0;
  background: rgb(255,255,255);
  margin-top: -4px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
.inverted input[type=range]::-webkit-slider-thumb {
  background: black;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 0;
}
.inverted input[type=range]::-moz-range-track {
  background: rgba(0,0,0,0.7);
}

input[type=range]::-moz-range-thumb {
  box-shadow: none;
  border: none;
  height: 12px;
  width: 4px;
  border-radius: 0;
  background: rgb(255,255,255);
}
.inverted input[type=range]::-moz-range-thumb {
  background: black;
}

input[type=range]::-ms-track {
  width: 100%;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
  height: 4px;
  border-width: 4px 0;
}

input[type=range]::-ms-fill-lower {
  background: rgba(255,255,255,0.7);
}
.inverted input[type=range]::-ms-fill-lower {
  background: rgba(0,0,0,0.7);
}
input[type=range]::-ms-fill-upper {
  background: rgba(0,0,0,0.7);
}
.inverted input[type=range]::-ms-fill-upper {
  background: rgba(255,255,255,0.7);
}

input[type=range]::-ms-thumb {
  box-shadow: none;
  border: none;
  height: 12px;
  width: 4px;
  border-radius: 0;
  background: rgb(255,255,255);
}
.inverted input[type=range]::-ms-thumb {
  background: black;
}

@media (min-width: 768px) {
  .hues-m-controls {
    height: 54px;
  }
  .hues-m-songtitle, .hues-m-imagename {
    left: 192px;
    right: 192px;
  }
  .hues-m-leftbox {
    bottom: 0;
    left: 0;
    right: auto;
    width: 192px;
    height: 54px;
  }
  .hues-m-rightbox {
    bottom: 0;
    left: auto;
    right: 0;
    width: 192px;
    height: 54px;
  }
}