classroom-instruments/src/components/card-preview/video-modal/index.module.less

.videoWrap {
  width: 100%;
  height: 100%;
  height: 518px;

  .controls {
    border-radius: 0 0 16px 16px !important;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(26px);
    height: 80px;
    padding: 0 26px 0 26px !important;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    transition: all .5s;

    .time {
      display: flex;
      justify-content: space-between;
      color: #fff;
      padding: 4px 12px 4px;
      font-size: max(24px, 14Px);
      font-weight: 600;
      line-height: 33px;
      min-width: 150px;

      .line {
        font-size: 20px;
      }

      :global {
        .plyr__time {

          font-size: max(22px, 12Px);

        }

        .plyr__time+.plyr__time:before {
          content: '';
          margin-right: 0;
        }
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    height: 100%;
    color: #fff;
    font-size: 12px;
    align-items: center;

    .actionWrap {
      display: flex;
    }

    .actionBtn {
      display: flex;
      width: 52px;
      height: 52px;
      padding: 0;
      background: transparent;
      cursor: pointer;

      &>img {
        width: 100%;
        height: 100%;
      }
    }


    .iconReplay {
      width: 31px;
      height: 29px;
      background-color: transparent;
      cursor: pointer;

      &>img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .slider {
    width: 100%;
    padding: 0 20px 0 12px;

    :global {

      .n-slider .n-slider-rail .n-slider-rail__fill,
      .n-slider .n-slider-handles .n-slider-handle-wrapper {
        transition: all .2s;
      }
    }
  }

  .sectionAnimate {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: all .5s;
  }

}

// .videoWrap {
//   width: 100%;
//   height: 100%;
//   --plyr-color-main: #198CFE;
//   --plyr-range-track-height: 6px;
//   --plyr-tooltip-radius: 3px;
//   --plyr-range-thumb-height: 24px;
//   --plyr-video-controls-background: #000;


//   :global {
//     .plyr--video {
//       width: 100%;
//       height: 100%;
//     }

//     .plyr__time {
//       display: block !important;
//     }

//     .plyr__video-wrapper {
//       pointer-events: none;
//     }

//   }
// }

// :global(.bottomFixed).controls {
//   width: 100% !important;
//   background: rgba(0, 0, 0, 0.6) !important;
//   // backdrop-filter: blur(26px);
//   height: 80px !important;
//   min-height: 80px !important;
//   padding: 0px 40px !important;
//   z-index: 999;

//   .time {
//     display: flex;
//     justify-content: space-between;
//     color: #fff;
//     padding: 4px 12px 4px;
//     font-size: 24px;
//     font-weight: 600;
//     line-height: 33px;
//     min-width: 140px;

//     .line {
//       font-size: 12px;
//     }

//     :global {
//       .plyr__time+.plyr__time:before {
//         content: '';
//         margin-right: 0;
//       }
//     }
//   }

//   .slider {
//     width: 100%;
//     padding: 0 20px 0 12px;

//     :global {
//       .van-slider__button {
//         background: var(--van-primary);
//       }

//       .van-loading {
//         width: 100%;
//         height: 100%;
//       }
//     }
//   }

//   .actions {
//     display: flex;
//     justify-content: space-between;
//     color: #fff;
//     font-size: 12px;
//     align-items: center;

//     .actionWrap {
//       display: flex;
//     }

//     .actionBtn {
//       display: flex;

//       padding: 0;
//       width: 52px;
//       height: 52px;
//       background: transparent;
//     }

//     .actionBtn>img {
//       width: 100%;
//       height: 100%;
//     }

//     :global {
//       .van-loading__circular {
//         width: 100%;
//         height: 100%;
//       }
//     }

//     .playIcon {
//       display: none;
//     }

//     .btnPlay img:nth-child(2) {
//       display: block;
//     }

//     .btnPause img:nth-child(3) {
//       display: block;
//     }

//     .btnPlay,
//     .btnPause {
//       :global {
//         .van-loading {
//           display: none;
//         }
//       }
//     }

//     .loopBtn {
//       background-color: transparent;
//       width: 31px !important;
//       height: 29px !important;
//       padding: 0;
//       cursor: pointer;

//       :global {
//         .loop {
//           display: block;
//         }

//         .loopActive {
//           display: none;
//         }
//       }
//     }
//   }
// }