// =============================================================================
// SCSS/SITE/STACKS/INTEGRITY/_JPLAYER.SCSS
// -----------------------------------------------------------------------------
// Styles for jPlayer.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. jPlayer Media Container
//       a. All
//       b. Audio
//       c. Video
//   02. jPlayer Controls Container
//       a. Play/pause
//       b. Mute/unmute
//       c. Full screen/restore screen
//       d. Repeat/repeat off
//   03. jPlayer Controls
//   04. jPlayer Progress Bar
//   05. jPlayer Volume Bar
// =============================================================================

// jPlayer Media Container
// =============================================================================

//
// All.
//

.jp-jplayer { 
  position: absolute;
}


//
// Audio.
//

.jp-jplayer-audio {
  border-radius: 3px;
}


//
// Video.
//

.jp-jplayer-video {
  background-color: $black;
}



// jPlayer Controls Container
// =============================================================================

.jp-controls-container {  }

.jp-controls-container-audio {  }

.jp-controls-container-video {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.jp-interface {
  position: relative;
  border: 1px solid $black;
  height: $jPlayerHeight;
  @include gradient-vertical($jPlayerGradientTop, $jPlayerGradientBottom);
  border-radius: 3px;
  @include box-shadow(#{inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 0 3px 1px rgba(0, 0, 0, 0.35)});
}



// jPlayer Controls
// =============================================================================

.jp-controls {
  list-style-type: none;
  padding: 0;
  margin: 0;

  &:hover a {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    color: lighten($textColor, 25%);
  }

  a {
    display: block;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 30px;
    height: $jPlayerHeight - 2;
    outline: none;
    line-height: $jPlayerHeight - 2;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15);
    color: $black;
    z-index: 1;

    span {
      visibility: hidden;
    }

    &:before {
      display: block;
      margin: 0 auto;
      @include font-size(1.4);
      text-decoration: inherit;
      @include font-awesome();
    }

    &:hover {
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      color: lighten($textColor, 25%);
    }

    &:focus,
    &:active {
      outline: none;
    }
  }
}


//
// Play/pause.
//

a.jp-play,
a.jp-pause {
  left: 0;
  border-right: 1px solid $jPlayerButtonBorderColor;
  border-radius: 3px 0 0 3px;
  @include box-shadow(#{1px 0 0 0 rgba(255, 255, 255, 0.1)});
}

a.jp-play {
  &:before {
    content: "\f04b";
  }
}

a.jp-pause {
  &:before {
    content: "\f04c";
  }
}


//
// Mute/unmute.
//

a.jp-mute,
a.jp-unmute {
  right: 63px;
  border-left: 1px solid $jPlayerButtonBorderColor;
  @include box-shadow(#{inset 1px 0 0 0 rgba(255, 255, 255, 0.1)});
}

a.jp-mute {
  &:before {
    content: "\f028";
  }
}

a.jp-unmute {
  &:before {
    content: "\f026";
  }
}



// jPlayer Progress Bar
// =============================================================================

.jp-progress-container {
  position: absolute;
  top: ($jPlayerHeight - 12) / 2;
  left: 42px;
  right: 13px;
  height: 10px;
}

.jp-progress { 
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  height: 10px;
  padding: 1px;
  background-color: $black;
  border-radius: 5px;
  @include box-shadow(#{0 1px 0 0 rgba(255, 255, 255, 0.1)});
}

.jp-seek-bar {
  height: 8px;
  cursor: pointer;
  background-color: darken($textColor, 15%);
  border-radius: 4px;
  @include box-shadow(#{inset 0 1px 0 0 rgba(255, 255, 255, 0.15)});
}

.jp-play-bar {
  height: 8px;
  background-color: $accentColor;;
  border-radius: 4px;
  @include box-shadow(#{inset 0 1px 0 0 rgba(255, 255, 255, 0.25)});
}



// jPlayer Volume Bar
// =============================================================================

.jp-volume-bar-container {
  position: absolute;
  top: ($jPlayerHeight - 12) / 2;
  right: 10px;
  width: 52px;
  height: 10px;
}

.jp-volume-bar {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  top: 0;
  height: 10px;
  background-color: $black;
  border-radius: 5px;
  @include box-shadow(#{0 1px 0 0 rgba(255, 255, 255, 0.1)});
}

.jp-volume-bar-value {
  margin: 1px;
  width: 0px;
  height: 8px;
  background-color: $accentColor;
  border-radius: 4px;
  @include box-shadow(#{inset 0 1px 0 0 rgba(255, 255, 255, 0.15)});
}