.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; } }