lesson-course-play/src/components/globalTools/index.module.less

.globalTools {
  &.isPlay {
     .iconTools,
     .expendTools {
        opacity: 0.4;
     }
  }
  &.isHidden {
     .iconTools,
     .expendTools {
        opacity: 0;
        display: none;
     }
  }

  .mask {
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: transparent;
     z-index: 2998;
  }
  .iconTools,
  .expendTools {
     position: fixed;
     right: -2px;
     top: 0;
     transform: translateY(var(--toolTranslateY));
     // margin-top: -29px;
     z-index: 2999;
     // padding: 0 5px;
     background: rgba(0, 0, 0, 0.4);
     border-radius: 200px 0px 0px 200px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-right-width: 0;
     cursor: pointer;
     font-size: 0;
     // transition: transform 0.2s ease;
     img {
        padding: 5px 8px;
        width: 24px;
        height: 24px;
        box-sizing: content-box;
        -moz-user-select: none;
        /* 火狐浏览器 */
        -webkit-user-drag: none;
        /* 谷歌、Safari和Opera浏览器 */
        -webkit-user-select: none;
        /* 谷歌、Safari和Opera浏览器 */
        -ms-user-select: none;
        /* IE10+浏览器 */
        user-select: none;
        /* 通用 */
        -webkit-touch-callout: none;
        /* iOS Safari */

        &:hover {
           opacity: 0.8;
        }
     }
  }

  .iconTools {
     // transition-delay: 0.2s;
  }

  .expendTools {
     // transform: translateX(100%);
     display: none;
     img {
        cursor: pointer;
        padding-left: 12px;
        padding-right: 12px;
     }
     .iconWhiteboard {
        // margin: 0 30px;
        padding-left: 8px;
        padding-right: 8px;
     }
     .iconArrow {
        padding: 7px 12px;
        width: 18px;
        height: 18px;
     }
  }

  .hideTools {
     // transition: transform 0.2s ease;
     transform: translateY(var(--toolTranslateY));
     display: none;
  }

  .showTools {
     // transition: transform 0.2s ease;
     // transition-delay: 0.2s;
     transform: translateY(var(--toolTranslateY));
     display: flex;
     align-items: center;
  }
}