spacedeck-open/styles/player.scss

@import "vars";
@import "mixins";


#player {

  -webkit-overflow-scrolling: touch;
  position: absolute;
  border-radius: $radius;
  
  top: 100px;
  left: 100px;
  bottom: 100px;
  right: 100px;
  width: auto;
  height: auto;
  z-index: 0;
  background-color: black;
  white-space: nowrap;
  z-index: 10000;
  display: none;

  #player-controls-1{
    height: 100px;

    &:hover #player-controls-2{
      @include scale(1,1);
    }

    #player-controls-2{
      @include transition( all 0.4s ease-in-out);
    }

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    @include transition( all 0.4s ease-in-out);
    @include translateY (20%);
    &:hover {
      @include translateY (0);
      opacity: 1;
      #player-controls {
      @include rotateX(0deg);
      }
    }

    @include backface-visibility(hidden);
    -webkit-perspective: 1000;
       -moz-perspective: 1000;
        -ms-perspective: 1000;
            perspective: 1000;

    @include perspective-origin(bottom center);

    #player-controls {
      @include rotateX(-90deg);
      @include transform-origin(bottom center);
      @include backface-visibility(hidden);
      @include transition( all 0.4s ease-in-out);
      
      background-color: rgba(0,0,0,0.25);
      background-color: $darker;
      border-radius: $radius;
      margin: 20px;

      /*  As of August 2012, only supported in Chrome 21+ */
      display: -webkit-flex;
      flex-direction: row;
      align-items: center;

      .time {
        font-size: 20px;
        line-height: 60px;
        display: block;
        padding: 0 20px;
        &.current {border-left: 2px solid rgba(0,0,0,0.1); }
        &.total {border-right: 2px solid rgba(0,0,0,0.1); }
      }

      .progress-bar {
        flex: 1;
        position: relative;
      }

      .progress-bar {
        background-color: rgba(0,0,0,0.25);
        width: 100%;
        height: 60px;
        position: relative;

        .progress-bar-buffer,
        .progress-bar-progress,
        .progress-bar-handle {
          position: absolute;
          height: 60px;
        }
        .progress-bar-handle {
          width: 4px;
          background-color: $light;
          z-index: 10;
          margin-left: -2px;
          height: 60px;
          border-radius: 30px;
        }
        .progress-bar-buffer { background-color: rgba(0,0,0,0.25); }
        .progress-bar-progress { background-color: $blue; }
        .progress-bar-handle {}
      }
    }
  }
}