klx-music-score/src/page-instrument/custom-plugins/guide-driver/index.less

.driver-overlay,
.driver-popover {
  pointer-events: auto !important;
}

.popoverClass .driver-popover-next-btn {
  width: 100px;
  height: 33px;
  text-shadow: none;
  border: none;
  font-weight: 600;
  font-size: 13px;
  color: #00807A !important;
  text-align: center;
  position: absolute;
  background: url("./images/btn-next.png") no-repeat center transparent;
  background-size: contain;
  background-color: transparent !important;
  padding: 0;
  font-family: inherit;
}

.popoverClass .driver-popover-prev-btn {
  font-weight: 600;
  font-size: 13px;
  padding: 0;
  font-family: inherit;
}

.popoverClass .driver-popover-next-btn:hover,
.popoverClass .driver-popover-prev-btn:hover,
.popoverClass .driver-popover-prev-btn:focus {
  background-color: transparent;
}

.driver-popover-arrow {
  display: none;
}

.driver-popover-close-btn,
.driver-popover-close-btn-custom {
  position: fixed;
  left: 20px;
  top: 20px;
  width: 48px;
  height: 24px;
  z-index: 99999;
  background: url('./images/btn-close.png') no-repeat center;
  background-size: contain;
  color: transparent;

  &:hover,
  &:focus {
    color: transparent;
  }
}

.driver-popover-close-btn-custom {
  pointer-events: auto !important;
}

.popoverClass {
  box-shadow: none;
  padding: 0;
}

.popoverClass1 {
  width: 257px;
  height: 247px;
  background: url("./images/practise/d1.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: 17px;
    left: 16px;
  }
}

.popoverClass2 {
  width: 264px;
  height: 228px;
  background: url("./images/practise/d2.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: 26px;
    right: 24px;
  }
}

.popoverClass3 {
  width: 264px;
  height: 245px;
  background: url("./images/practise/d3.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }
}

.popoverClass11 {
  width: 264px;
  height: 245px;
  background: url("./images/practise/d11.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }
}

.popoverClass4 {
  width: 265px;
  height: 245px;
  background: url("./images/practise/d4.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 25px;
    bottom: 23px;
  }
}

.popoverClass5 {
  width: 264px;
  height: 245px;
  background: url("./images/practise/d5.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }
}

.popoverClass5-1 {
  width: 257px;
  height: 215px;
  background: url("./images/practise/d5-1.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }
}

.popoverClass6 {
  width: 264px;
  height: 245px;
  background: url("./images/practise/d6.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }

  &.popoverClose {

    .driver-popover-navigation-btns {
      position: absolute;
      bottom: 23px;
      left: 0;
      right: 15px;
      justify-content: flex-start;
    }

    .driver-popover-next-btn {
      // right: 14px;
      // bottom: 18px;
      position: relative;
      top: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClass7 {
  width: 306px;
  height: 167px;
  background: url("./images/practise/d7.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 14px;
    bottom: -18px;
  }

  &.popoverClose {

    .driver-popover-navigation-btns {
      position: absolute;
      bottom: -18px;
      left: 0;
      right: 15px;
      justify-content: flex-start;
    }

    .driver-popover-next-btn {
      // right: 14px;
      // bottom: 18px;
      position: relative;
      top: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClass7-1 {
  width: 267px;
  height: 221px;
  background: url("./images/practise/d7-1.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 14px;
    bottom: 18px;
  }

  &.popoverClose {

    .driver-popover-navigation-btns {
      position: absolute;
      bottom: 23px;
      left: 0;
      right: 15px;
      justify-content: flex-start;
    }

    .driver-popover-next-btn {
      // right: 14px;
      // bottom: 18px;
      position: relative;
      top: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClass8 {
  width: 277px;
  height: 152px;
  background: url("./images/practise/d8.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: -48px;
  }

  &.popoverClose {
    .driver-popover-next-btn {
      bottom: 0;
      right: 0;
    }
  }
}

.popoverClass9 {
  width: 270px;
  height: 192px;
  background: url("./images/practise/d9.png") no-repeat center;
  background-size: contain;
}

.popoverClass10 {
  width: 257px;
  height: 213px;
  background: url("./images/practise/d10.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }
}


.popoverClose {
  .driver-popover-navigation-btns {
    position: absolute;
    bottom: -48px;
    left: 0;
    right: 0;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
  }

  .driver-popover-next-btn {
    position: relative;
    // right: 14px;
    // bottom: 18px;
    width: 82px;
    height: 33px;
    background: url('./images/btn-finsh.png') no-repeat center;
    background-size: contain;
  }

  .driver-popover-prev-btn {
    border: 1px solid #fff;
    border-radius: 100px;
    color: #fff !important;
    background-color: transparent;
    font-weight: 400;
    text-shadow: none;
    width: 82px;
    height: 33px;
    text-align: center;
    margin-left: 14px;
  }
}


.popoverClassF1 {
  width: 257px;
  height: 247px;
  background: url("./images/follow/f1.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: 17px;
    left: 16px;
  }
}

.popoverClassF2 {
  width: 264px;
  height: 245px;
  background: url("./images/follow/f2.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }
}

.popoverClassF3 {
  width: 264px;
  height: 245px;
  background: url("./images/follow/f3.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }

  &.popoverClose {

    .driver-popover-navigation-btns {
      position: absolute;
      bottom: 23px;
      left: 0;
      right: 15px;
      justify-content: flex-start;
    }

    .driver-popover-next-btn {
      // right: 14px;
      // bottom: 18px;
      position: relative;
      top: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClassE1 {
  width: 257px;
  height: 247px;
  background: url("./images/evaluating/e1.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: 17px;
    left: 16px;
  }
}

.popoverClassE2 {
  width: 257px;
  height: 235px;
  background: url("./images/evaluating/e4.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 17px;
    bottom: 22px;
  }
}

.popoverClassE3 {
  width: 264px;
  height: 245px;
  background: url("./images/evaluating/e2.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }
}

.popoverClassE4 {
  width: 264px;
  height: 245px;
  background: url("./images/evaluating/e3.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    right: 24px;
    bottom: 23px;
  }

  &.popoverClose {

    .driver-popover-navigation-btns {
      position: absolute;
      bottom: 23px;
      left: 0;
      right: 15px;
      justify-content: flex-start;
    }

    .driver-popover-next-btn {
      // right: 14px;
      // bottom: 18px;
      position: relative;
      top: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClassER1 {
  width: 257px;
  height: 178px;
  background: url("./images/evaluating/r1.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: -27px;
    right: 16px;
  }
}

.popoverClassER2 {
  width: 261px;
  height: 226px;
  background: url("./images/evaluating/r2.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: 14px;
    right: 15px;
  }
}

.popoverClassER3 {
  width: 261px;
  height: 249px;
  background: url("./images/evaluating/r3.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: 15px;
    left: 17px;
  }
}

.popoverClassER4 {
  width: 327px;
  height: 246px;
  background: url("./images/evaluating/r4.png") no-repeat center;
  background-size: contain;

  &.popoverClose {

    .driver-popover-navigation-btns {
      position: absolute;
      bottom: 15px;
      left: 17px;
      justify-content: flex-end;
    }

    .driver-popover-next-btn {
      position: relative;
      top: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClassReport1 {
  width: 270px;
  height: 142px;
  background: url("./images/report/r1.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: -51px;
    right: 17px;
  }
}

.popoverClassReport2 {
  width: 270px;
  height: 142px;
  background: url("./images/report/r2.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: -51px;
    right: 17px;
  }

  &.popoverClose {
    .driver-popover-navigation-btns {
      position: absolute;
      bottom: -51px;
      left: 0;
    }

    .driver-popover-next-btn {
      position: relative;
      top: 0;
      bottom: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClassReport3 {
  width: 270px;
  height: 142px;
  background: url("./images/report/r3.png") no-repeat center;
  background-size: contain;

  .driver-popover-next-btn {
    bottom: -51px;
    right: 17px;
  }

  &.popoverClose {
    .driver-popover-navigation-btns {
      position: absolute;
      bottom: -51px;
      left: 0;
    }

    .driver-popover-next-btn {
      position: relative;
      top: 0;
      bottom: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}

.popoverClassReport4 {
  width: 270px;
  height: 142px;
  background: url("./images/report/r5.png") no-repeat center;
  background-size: contain;

  // .driver-popover-next-btn {
  //   bottom: -51px;
  //   right: 17px;
  // }
  &.popoverClose {
    .driver-popover-navigation-btns {
      position: absolute;
      bottom: -51px;
      left: 0;
    }

    .driver-popover-next-btn {
      position: relative;
      top: 0;
      right: 0;
    }

    .driver-popover-prev-btn {
      margin-left: 14px;
    }
  }
}