malept/gmusicprocurator

View on GitHub
gmusicprocurator/static/scss/sections/_player.scss

Summary

Maintainability
Test Coverage
#player {
  height: $player-height;

  nav {
    @include display(flex);
    height: $controls-height;

    button {
      border-radius: 0;
      height: $controls-height;
      width: $controls-height;
    }
  }


  .albumart {
    float: left;
    height: $controls-height;
    padding-right: 5px;
    vertical-align: top;
  }

  .volume-control {
    display: inline-block;
  }

  .play-to-end {
    @include text-outline($btn-text-color);
    color: $ui-element-bg;
  }

  .repeat-one {
    position: relative;

    > span {
      background: $btn-text-color;
      border-radius: 100%;
      bottom: 0;
      color: $ui-element-bg;
      font-size: 50%;
      left: 0;
      position: absolute;
      width: 50%;
    }
  }
}

#now-playing {
  display: inline-block;
  width: 40%;

  .details > span {
    display: block;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .secondary {
    font-size: smaller;
  }
}

#track-position {
  background: $main-bg;
  border: 0;
  cursor: pointer;
  display: block;
  height: $progress-height;
  width: 100%;

  &::-webkit-progress-bar {
    background: $main-bg;
    border: 0;
  }
}