beathaven/app/assets/stylesheets/album-track.css.scss

.artist-page .album .tracks {
  margin: 0 0 10px 0;

  & > li {
    position: relative;
    display: block;
    margin: 0 0 0 -5px;
    width: 625px;
    height: 38px;
    list-style: none;
    font-family: "Source Sans Pro", $helvetica;
    font-size: 20px;
    line-height: 28px;
    text-shadow: 0 0 1px rgba(0, 0, 0, .3);

    &:after {
      content: "";
      display: block;
      width: 578px;
      float: right;
      border-bottom: #e0e0e0 1px solid;
      margin: 0 5px 0 0;
    }
    &:first-child:after, &:hover:after {
      display: none;
    }

    &.now-playing {
      a {
        color: #126be8 !important;
        text-shadow: 0 0 1px rgba(255, 255, 255, .2);
      }
      .track-play {
        display: none;
      }
      .track-pause {
        display: block;

        i {
          opacity: 1;
        }
      }
      &.paused {
        .track-play {
          display: block;

          i {
            opacity: 1;
          }
        }
        .track-pause {
          display: none;
        }
      }
    }

    .btn-round {
      width: 2px;
      height: 22px;
      border-radius: 50px;

      i {
        margin: 5px 0 0 -6px;
      }
    }

    .track-play, .track-pause {
      position: absolute;
      top: 3px;
      left: 5px;

      i {
        opacity: .3;
      }
    }
    .track-pause {
      display: none;
    }

    // Track title
    .title {
      position: absolute;
      top: 5px;
      left: 42px;
      height: 28px;
      max-width: 530px;
      overflow: hidden;

      .inner {
        width: 10000px;

        .track-link {
          color: #303030;
        }

        .artists {
          @include inline-block;
          margin: 0;
          padding: 0;

          li {
            @include inline-block;
            margin: 0;
            padding: 0;
            color: #808080;
            text-shadow: none;

            .artist-page {
              color: #808080;
            }
            .delimiter {
              color: #808080;
            }

            &:before {
              content: ", ";
            }
            &:first-child:before {
              content: "";
            }
          }
        }
      }
    }

    .length {
      position: absolute;
      top: 5px;
      right: 5px;
    }

    .track-add {
      position: absolute;
      top: 3px;
      right: 5px;
      display: none;

      i {
        margin-left: -7px;
      }
    }

    // li:hover
    &:hover{
      border: {
        width: 0px;
        style: solid;
        color: transparent;
        radius: 4px;
      }
      background-color: rgba(200, 200, 200, .3);

      .track-play i, .track-pause i {
        opacity: 1;
      }
      .track-add {
        display: block;
      }
      .length {
        display: none;
      }
    }
  }
}