@import 'video-base.less';
@import 'video-quality-selector.less';
@import 'watermark.less';
@color-primary:     #11aa4a;

/* =========================== media =========================== */

@screen-xs-min:              480px;
@screen-sm-min:              768px;
@screen-md-min:              992px;
@screen-lg-min:              1200px;

@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);

.zan-transition {
  -webkit-transition: all .3s ease;
     -moz-transition: all .3s ease;
       -o-transition: all .3s ease;
          transition: all .3s ease;
}

.ballon-video-player {
.video-js.vjs-default-skin {
  margin: 0 auto;
  border-radius: 4px;
  .vjs-big-play-button {
    left: 50%;
    top: 50%;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    margin-top: -40px;
    margin-left: -40px;
    border: 4px solid #a3a3a3;
    border-color: rgba(163, 163, 163, 0.8);
    box-shadow: none;
    // background-color: rgba(55, 55, 55, 0.6);
    // background-color: #1a1a1a;
    // background-color: rgba(26, 26, 26, 0.8);
    background: none;
    .zan-transition;
    @media (min-width: @screen-lg-min) {
      height: 100px;
      width: 100px;
      margin-top: -50px;
      margin-left: -50px;
    }
    @media (max-width: @screen-xs-max) {
      height: 60px;
      width: 60px;
      margin-top: -30px;
      margin-left: -30px;
    }
    // &:hover {
    //   .zan-transition;
    //   // color: @color-primary;
    //   background-color: @color-primary;
    //   background-color: rgba(36, 209, 140, 0.7);
    // }
    &:hover {
      border-color: #a3a3a3;
      .zan-transition;
      &:before {
        color: @color-primary;
      }
    }
    
    &:before {
      font-size: 40px;
      line-height: 76px;
      box-shadow: none;
      text-shadow: none;
      // color: #fff;
      color: @color-primary;
      color: rgba(17, 170, 74, 0.8);
      @media (min-width: @screen-lg-min) {
        font-size: 45px;
        line-height: 96px;
      }
      @media (max-width: @screen-xs-max) {
        font-size: 35px;
        line-height: 56px;
      }
    }
  }

  .vjs-progress-control {
    height: 12px;
    top: -12px;
    @media (max-width: @screen-xs-max) {
      width: auto !important;
      height: 10px;
      top: -10px;
    }
  }
  .vjs-play-progress {
    background-color: @color-primary;
    background-image: none;
  }
  
  .vjs-progress-control .vjs-slider-handle:before {
    font-family: "ESCloudPlayer" !important;
    content: "\e609" !important;
    font-size: 24px;
    text-shadow: none;
    -webkit-transform: none;
    transform: none;
    top: -6px;
    padding-top: 0;
    color: #fff;
    @media (max-width: @screen-xs-max) {
      font-size: 18px;
      top: -4px;
    }
  }
  .vjs-load-progress {
    background: #ccc;
    background: rgba( 204, 204, 204, 0.6 );
  }
  .vjs-control-bar {
    // background-color: #3b3b3b;
    background: #1a1a1a;
    background: rgba( 26, 26, 26, 0.8 );

    height: 46px;
    @media (max-width: @screen-xs-max) {
      height: 30px;
    }
  }
  .vjs-play-control {
    @media (max-width: @screen-xs-max) {
      width: 3em;
    }
  }
  .vjs-control {
    @media (max-width: @screen-xs-max) {
      width: 3em;
    }
    &:before {
      color: #bdbdbd;
      font-size: 20px;
      line-height: 46px;
      text-shadow: none;
      .zan-transition;
      @media (max-width: @screen-xs-max) {
        line-height: 30px;
        font-size: 14px;
      }
    }
    &:before:hover {
      color: #fff;
      .zan-transition;
    }
    &.vjs-time-controls {
      width: 36px;
      @media (max-width: @screen-xs-max) {
        width: 30px;
      }
    }
  }
  .vjs-time-controls {
    font-size: 14px;
    @media (max-width: @screen-xs-max) {
      font-size: 12px;
      line-height: 30px;
    }
  }
  .vjs-time-divider {
    line-height: 46px;
    @media (max-width: @screen-xs-max) {
      line-height: 30px;
    }
  }
  .vjs-current-time {
    color: #fff;
  }
  .vjs-duration {
    color: #a9a9a9;
  }
  .vjs-volume-control {
    width: 100px;
    float: right;
    margin-right: 20px;
    @media (max-width: @screen-xs-max) {
      height: 30px;
      width: 60px;
      margin-right: 10px;
    }
  }
  .vjs-slider {
    background-color: #484848;
    background-color: rgba(72, 72, 72, 0.6);
  }
  .vjs-volume-bar {
    width: 100px;
    margin: 18px auto;
    height: 10px;
    background-color: #737373;
    background-color: rgba(115, 115, 115, 0.6);
    border-radius: 10px;
    @media (max-width: @screen-xs-max) {
      width: 60px;
      height: 6px;
      margin: 12px auto;
    }
  }
  .vjs-volume-level {
    border-radius: 10px;
    height: 10px;
    background: none;
    background-color: @color-primary;
    @media (max-width: @screen-xs-max) {
      height: 6px;
    }
  }
  .vjs-volume-handle.vjs-slider-handle:before {
    font-family: "ESCloudPlayer" !important;
    // content: "\e603" !important; 
    content: "\e609" !important;
    font-size: 14px;
    transform: none;
    -webkit-transform: none;
    text-shadow: none;
    // top: -13px;
    // left: -12px;
    top: -2px;
    left: 0;
    color: #fff;
    @media(max-width: @screen-xs-max){
      font-size: 12px;
    }
  }
  
}

.video-js .vjs-captions {
  color: @color-primary;
  font-size: 16px;
}

.video-js .vjs-text-track {
  background: none;
}

.video-js .vjs-text-track-display {
  bottom: 80px;
  left: 0;
  right: 0;
}

.vjs-tt-cue {
  padding: 5px;
}

.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  // width: 80px !important;
  // left: -35px !important;
  width: 50px !important;
  left: -25px !important;
  background-color: rgb( 26, 26, 26 ) !important;
  background-color: rgba( 26, 26, 26, 0.8 ) !important;
  // bottom: -5px !important;
  bottom: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: !important;
  z-index: 99;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  .zan-transition;
  @media (max-width: @screen-xs-max) {
    width: 40px !important;
    left: -24px !important;
  }
  &:hover {
    .zan-transition;
  }
}

.vjs-default-skin .vjs-menu-button ul li {
  // color: #a8a8a8;
  color: #bebebe;
  font-size: 14px;
  // margin: 5px 10px;
  margin: 10px;
  padding: 0;
  .zan-transition;
  @media (max-width: @screen-xs-max) {
    font-size: 12px;
    margin: 8px 3px;
  }
  &.vjs-selected {
    // color: @color-primary;
    color: #fff;
    // background: none !important;
  }
  &:hover,
  &:focus,
  &.vjs-selected:hover,
  &.vjs-selected:focus {
    // background-color: rgb( 90, 90, 90 )!important;
    // border-radius: 20px;
    // box-shadow: none;
    // -webkit-box-shadow: none;
    .zan-transition;
    color: #fff;
  }
}

.vjs-watermark {
  top: 10px !important;
  bottom: 0;
  left: 0;
  right: 10px !important;
  left: inherit !important;
}

.vjs-default-skin .vjs-play-control:hover:before,
.vjs-default-skin .vjs-resolutions-button .vjs-control-content:hover:before,
.vjs-default-skin .vjs-mute-control:hover:before, 
.vjs-default-skin .vjs-volume-menu-button:hover:before,
.video-js.vjs-default-skin .vjs-control:hover:before {
  color: #fff;
}


/* ESCloudPlayer
-------------------------------------------------------------------------------- */

@font-face {font-family: "ESCloudPlayer";
  src: url('player-icons.eot'); /* IE9*/
  src: url('player-icons.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('player-icons.woff') format('woff'), /* chrome、firefox */
  url('player-icons.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('player-icons.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.vjs-default-skin .vjs-control:before {
  font-family: ESCloudPlayer  !important;
}

.vjs-default-skin .vjs-play-control:before {
  content: "\e602"  !important;
}

.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e610"  !important;
}

.vjs-default-skin .vjs-mute-control:before, 
.vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e617"  !important;
}

.vjs-default-skin .vjs-mute-control.vjs-vol-0:before {
  content: "\e618"  !important;
}

.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e612"  !important;
}

.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e60f"  !important;
}

.vjs-default-skin .vjs-big-play-button:before {
  font-family: ESCloudPlayer !important;
  content: "\e60c"  !important;
}

.vjs-default-skin .vjs-loading-spinner:before {
  font-family: ESCloudPlayer !important;
  content: "\e614" !important;
}

 .vjs-error .vjs-error-display::before {
  font-family: ESCloudPlayer !important;
  content: '\e606'!important;
  top: 40%;
}


/* Resolutions
-------------------------------------------------------------------------------- */

.vjs-default-skin .vjs-resolutions-button {
  width: 5em;
  cursor: pointer !important;
}

/* Resolutions Icon */

.vjs-default-skin .vjs-resolutions-button .vjs-control-content:before {
  font-family: ESCloudPlayer;
  font-size: 30px;
  line-height: 46px;
  content: "\e604"; /* Gear icon */ 
  width: 17px;
  height: 17px;
  margin: 0.5em auto 0;
  color: #aaa;
  @media (max-width: @screen-xs-max) {
    font-size: 20px;
    line-height: 30px;
  }
}

 .vjs-fingerprint {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
   -khtml-user-select: none;
  user-select: none;
  cursor: default;
}

 .vjs-control-bar {
  z-index: 4;
}

 .vjs-error-display div {
  bottom: 5em;
}

// .vjs-default-skin .vjs-menu-button {
//   width: 60px;
//   @media (max-width: @screen-xs-max) {
//     width: 40px !important;
//   }
// }

.vjs-res-button .vjs-control-text {
  // width: 60px;
  width: 50px;
  left: 0;
  font-size: 14px;
  // margin-top: 14px;
  border-radius: 20px;
  // line-height: 1.4em;
  line-height: 46px;
  // background-color: #5a5a5a !important;
  @media (max-width: @screen-xs-max) {
    font-size: 12px;
    line-height: 30px;
    // margin-top: 5px;
    width: 40px;
  }
  &:hover {
    color: #fff;
  }
}

.vjs-marker {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 1;
  height: 100%;
  background: #fff !important;
  .zan-transition;
  // &:before {
  //   position: absolute;
  //   top: -13px;
  //   left: -9px;
  //   font-family: ESCloudPlayer;
  //   font-size: 26px;
  //   content: "\e603"; 
  //   color: #fff;
  //   // width: 8px;
  //   // height: 12px;
  //   // display: block;
  //   @media(max-width: @screen-xs-max) {
  //     font-size: 24px;
  //   }
  // }
}
.vjs-marker:hover {
  cursor: pointer;
  background-color: #1a1a1a !important; 
  background-color: rgba(26, 26, 26, 0.8) !important;
  .zan-transition;
  // &:before {
  //   color: #1a1a1a;
  //   .zan-transition;
  // }
  // -webkit-transform: scale(1.3, 1.3);
  // -moz-transform: scale(1.3, 1.3);
  // -o-transform: scale(1.3, 1.3);
  // -ms-transform: scale(1.3, 1.3);
  // transform: scale(1.3, 1.3);
}
.vjs-tip {
  visibility: hidden;
  display: block;
  opacity: 0.8;
  padding: 5px 12px;
  position: absolute;
  bottom: 16px;
  z-index: 100000;
  // bottom: 20px;
  font-size: 12px;
}
.vjs-tip .vjs-tip-arrow {
  display: none;
}
.vjs-tip .vjs-tip-inner {
  background-color: #1a1a1a !important; 
  background-color: rgba(26, 26, 26, 0.8) !important; 
  // border-radius: 3px;
  // -moz-border-radius: 3px;
  // -webkit-border-radius: 3px;
  padding: 10px;
  color: white;
  max-width: 200px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  &:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    // border-color: rgb(26, 26, 26);
    // border-color: rgba(26, 26, 26, 0);
    border-top-color: #1a1a1a;
    border-top-color: rgba(26, 26, 26, 0.8);
    border-width: 5px;
    margin-left: -5px;
    margin-top: -6px;
  }
}
.vjs-break-overlay {
  visibility: hidden;
  position: absolute;
  z-index: 100000;
  top: 0;
}
.vjs-break-overlay .vjs-break-overlay-text {
  padding: 9px;
  text-align: center;
}

}

.lt-ie9 .ballon-video-player .vjs-default-skin.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
  content: "" !important;
}