Daily UI #009 - Music Player

Beautiful-Audio-Player.markdown

Daily UI #009 - Music Player

A Pen by Immanuel Pandiangan on CodePen.

License.

index.html

<div class="container">
  <header>
    <div class="playlist">
      <i class="fa fa-bars"></i>
    </div>
    <div class="setting">
      <i class="fa fa-cog"></i>
    </div>
  </header>
  <main>
    <div class="album-art">
      <img src="https://upload.wikimedia.org/wikipedia/en/0/00/TheVines_WinningDays.jpg" alt="" />
    </div>
    <div class="player">
      <i class="fa fa-repeat"></i>
      <i class="fa fa-fast-backward"></i>
      <i class="fa fa-play"></i>
      <i class="fa fa-fast-forward"></i>
      <i class="fa fa-random"></i>
    </div>
  </main>
  <footer>
    <div class="title">The Vines - Ride
    </div>
    <div class="time-tracker">
      <div class="timer">
        <div class="bg">
        </div>
      </div>
      <div class="time">00:80</div>
    </div>
  </footer>
</div>

style.less

.centered(@position:absolute) {
  position: @position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.area(@width:2rem, @height:2rem) {
  width: @width;
  height: @height;
}

body {
  height: 100vh;
  background: linear-gradient(180deg, #333, #111);
  color: #000;
}
.container {
  .centered;
  .area(500px, 360px);
  background: #111;
  box-shadow: 0 30px 20px -20px #000;
  box-sizing: border-box;
}
header {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  clear: both;
  box-sizing: border-box;
  .playlist {
    float: left;
    cursor: pointer;
  }
  .setting {
    float: right;
    cursor: pointer;
  }
}

main {
  clear: both;
  padding: 1rem 2rem;
  box-sizing: border-box;
  .album-art {
    float: left;
    padding: 0.5rem;
    background: #000;
    img {
      width: 160px;
      border-radius: 8px;
      box-sizing: border-box;
    }
  }
  .player {
    position: relative;
    float: right;
    .area(176px, 176px);
    background: linear-gradient(0deg, #222, #111);
    border-radius: 100%;
    border: solid 2px #000;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 4px 2px rgba(0,0,0,0.2);
    .fa {
      font-size: 1.2rem;
      position: absolute;
      cursor: pointer;
      transition: all 0.2s ease;
      &:hover {
        color: cyan;
        text-shadow: 0 0 4px cyan;
      }
      &.fa-play {
        .centered;
        .area(88px, 88px);
        border: solid 2px #000;
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.6);
        border-radius: 100%;
        line-height : 88px;
        text-align: center;
        background: linear-gradient(0deg, #111, #222);
      }
      &.fa-repeat {
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
      }
      &.fa-fast-backward {
        top: 50%;
        left: 8%;
        transform: translateY(-50%);
      }
      &.fa-fast-forward {
        top: 50%;
        left: 82%;
        transform: translateY(-50%);
      }
      &.fa-random {
        top: 82%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
footer {
  clear: both;
  padding: 2rem 2rem;
  color: #999;
  text-shadow: 2px 2px #111;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  .title {
    text-align: center;
    padding-bottom: 0.5rem;
  }
  .time-tracker {
    border-top: solid 1px #000;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    padding-top: 0.5rem;
    box-sizing: border-box;
    .timer {
      position: relative;
      float: left;
      width:90%;
      height: 2rem;
      cursor: pointer;
      .bg {
        position: relative;
        top:50%;
        margin-right: 0.5rem;
        transform: translateY(-50%);
        height: 0.6rem;
        border-top: solid 1px #000;
        border-radius: 10px;
        background: none;
        box-shadow: inset 0 -1px 1px rgba(255,255,255,0.2);
        overflow: hidden;
        box-sizing: border-box;
        &:before {
          content: "";
          top:50%;
          transform: translateY(-50%);
          position: absolute;
          height: 0.2rem;
          border-radius: 10px;
          width:10%;
          background: cyan;
          box-shadow: 0 0 2px 2px cyan;
        }
      }
    }
    .time {
      float: left;
      width:10%;
      line-height: 2rem;
    }
  }
}