修改右边位置时的控制按钮为windows风格
lyswhut
parent
2a679c914b
commit
f8d06d38ab
|
|
@ -16,6 +16,7 @@
|
|||
- 同步功能添加对列表顺序调整的控制，确保手动调整位置后的列表与不同的电脑同步时，列表位置不会被还原
|
||||
- 优化歌单详情、排行榜名右键的播放按钮的播放机制，现在不用等待整个列表（多页时）加载完成才能播放了
|
||||
- 为播放详情页、桌面歌词添加延迟滚动，播放详情页略微减小已激活歌词的缩放大小及桌面歌词翻译大小
|
||||
- 修改右边控制按钮为windows风格
|
||||
|
||||
### 修复
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 80%);
|
||||
@color-theme_2-active: fadeout(lighten(@color-theme, 10%), 70%);
|
||||
@color-theme_2-font:desaturate( darken(@color-theme_2, 70%), 90%);
|
||||
@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
|
||||
@color-theme_2-font-label: fadeout(@color-theme_2-font, 55%);
|
||||
// @color-theme_2-line: transparent;
|
||||
@color-theme_2-line: lighten(@color-theme, 35%);
|
||||
@color-reply-floor: fadeout(@color-theme, 95%);
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 80%);
|
||||
@color-green-theme_2-active: fadeout(lighten(@color-green-theme, 10%), 70%);
|
||||
@color-green-theme_2-font: darken(desaturate(@color-green-theme_2, 70%), 90%);
|
||||
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
|
||||
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 55%);
|
||||
// @color-green-theme_2-line: transparent;
|
||||
@color-green-theme_2-line: lighten(@color-green-theme, 45%);
|
||||
@color-green-reply-floor: fadeout(@color-green-theme, 95%);
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
|
||||
@color-yellow-theme_2-active: fadeout(lighten(@color-yellow-theme, 10%), 60%);
|
||||
@color-yellow-theme_2-font: darken(desaturate(@color-yellow-theme_2, 70%), 90%);
|
||||
@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
|
||||
@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 55%);
|
||||
// @color-yellow-theme_2-line: transparent;
|
||||
@color-yellow-theme_2-line: lighten(@color-yellow-theme, 28%);
|
||||
@color-yellow-reply-floor: fadeout(@color-yellow-theme, 94%);
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
@color-orange-theme_2-hover: fadeout(darken(@color-orange-theme, 5%), 80%);
|
||||
@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
|
||||
@color-orange-theme_2-font: darken(desaturate(@color-orange-theme_2, 70%), 90%);
|
||||
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
|
||||
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 55%);
|
||||
// @color-orange-theme_2-line: transparent;
|
||||
@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
|
||||
@color-orange-reply-floor: fadeout(@color-orange-theme, 95%);
|
||||
|
|
@ -269,7 +269,7 @@
|
|||
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 80%);
|
||||
@color-blue-theme_2-active: fadeout(lighten(@color-blue-theme, 10%), 70%);
|
||||
@color-blue-theme_2-font: darken(desaturate(@color-blue-theme_2, 70%), 90%);
|
||||
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
|
||||
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 55%);
|
||||
// @color-blue-theme_2-line: transparent;
|
||||
@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
|
||||
@color-blue-reply-floor: fadeout(@color-blue-theme, 95%);
|
||||
|
|
@ -328,7 +328,7 @@
|
|||
@color-red-theme_2-background_1: #fff;
|
||||
@color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
|
||||
@color-red-theme_2-font: darken(desaturate(@color-red-theme_2, 70%), 90%);
|
||||
@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
|
||||
@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 55%);
|
||||
// @color-red-theme_2-line: transparent;
|
||||
@color-red-theme_2-line: lighten(@color-red-theme, 42%);
|
||||
@color-red-reply-floor: fadeout(@color-red-theme, 95%);
|
||||
|
|
@ -389,7 +389,7 @@
|
|||
@color-pink-theme_2-hover: fadeout(lighten(@color-pink-theme, 10%), 75%);
|
||||
@color-pink-theme_2-active: fadeout(lighten(@color-pink-theme, 10%), 60%);
|
||||
@color-pink-theme_2-font: darken(desaturate(@color-pink-theme_2, 70%), 90%);
|
||||
@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 50%);
|
||||
@color-pink-theme_2-font-label: fadeout(@color-pink-theme_2-font, 55%);
|
||||
// @color-pink-theme_2-line: transparent;
|
||||
@color-pink-theme_2-line: lighten(@color-pink-theme, 25%);
|
||||
@color-pink-reply-floor: fadeout(@color-pink-theme, 93%);
|
||||
|
|
@ -448,7 +448,7 @@
|
|||
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 80%);
|
||||
@color-purple-theme_2-active: fadeout(lighten(@color-purple-theme, 10%), 70%);
|
||||
@color-purple-theme_2-font: darken(desaturate(@color-purple-theme_2, 70%), 90%);
|
||||
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
|
||||
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 55%);
|
||||
// @color-purple-theme_2-line: transparent;
|
||||
@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
|
||||
@color-purple-reply-floor: fadeout(@color-purple-theme, 95%);
|
||||
|
|
@ -507,7 +507,7 @@
|
|||
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 80%);
|
||||
@color-grey-theme_2-active: fadeout(lighten(@color-grey-theme, 10%), 70%);
|
||||
@color-grey-theme_2-font: darken(desaturate(@color-grey-theme_2, 70%), 90%);
|
||||
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
|
||||
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 55%);
|
||||
// @color-grey-theme_2-line: transparent;
|
||||
@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
|
||||
@color-grey-reply-floor: fadeout(@color-grey-theme, 95%);
|
||||
|
|
@ -567,7 +567,7 @@
|
|||
@color-ming-theme_2-background_1: #fff;
|
||||
@color-ming-theme_2-background_2: fadeout(@color-ming-theme_2-background_1, 2%);
|
||||
@color-ming-theme_2-font: darken(desaturate(@color-ming-theme_2, 70%), 90%);
|
||||
@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 50%);
|
||||
@color-ming-theme_2-font-label: fadeout(@color-ming-theme_2-font, 55%);
|
||||
// @color-ming-theme_2-line: transparent;
|
||||
@color-ming-theme_2-line: lighten(@color-ming-theme, 60%);
|
||||
@color-ming-reply-floor: fadeout(@color-ming-theme, 95%);
|
||||
|
|
@ -629,7 +629,7 @@
|
|||
@color-blue2-theme_2-hover: fadeout(lighten(@color-blue2-theme, 10%), 80%);
|
||||
@color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
|
||||
@color-blue2-theme_2-font: darken(desaturate(@color-blue2-theme_2, 70%), 90%);
|
||||
@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 50%);
|
||||
@color-blue2-theme_2-font-label: fadeout(@color-blue2-theme_2-font, 55%);
|
||||
// @color-blue2-theme_2-line: transparent;
|
||||
@color-blue2-theme_2-line: lighten(@color-blue2-theme, 41%);
|
||||
@color-blue2-reply-floor: fadeout(@color-blue2-theme, 95%);
|
||||
|
|
|
|||
|
|
@ -162,10 +162,18 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
|
|||
//- 0 0 24 24
|
||||
path(d="M20,14H4V10H20")
|
||||
|
||||
g#icon-window-minimize-2(fill='currentColor')
|
||||
//- 0 0 24 24
|
||||
path(d="M19,13H5V11H19V13Z")
|
||||
|
||||
g#icon-window-close(fill='currentColor')
|
||||
//- 0 0 24 24
|
||||
path(d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z")
|
||||
|
||||
g#icon-window-close-2(fill='currentColor')
|
||||
//- 0 0 24 24
|
||||
path(d="M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z")
|
||||
|
||||
|
||||
g#icon-list-loop(fill='currentColor')
|
||||
// 0 0 24 24
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template lang="pug">
|
||||
transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
|
||||
div(:class="[$style.container, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
|
||||
div(:class="$style.container" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
|
||||
//- div(:class="$style.bg" :style="bgStyle")
|
||||
//- div(:class="$style.bg2")
|
||||
div(:class="$style.header")
|
||||
div(:class="[$style.header, $style.controlBtnLeft]" v-if="setting.controlBtnPosition == 'left'")
|
||||
div(:class="$style.controBtn")
|
||||
button(type="button" :class="$style.hide" :tips="$t('player__hide_detail_tip')" @click="hide")
|
||||
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='80%' viewBox='0 0 30.727 30.727' space='preserve')
|
||||
|
|
@ -16,6 +16,19 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
|
|||
button(type="button" :class="$style.close" :tips="$t('close')" @click="close")
|
||||
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' width='100%' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-window-close')
|
||||
div(:class="[$style.header, $style.controlBtnRight]" v-else)
|
||||
div(:class="$style.controBtn")
|
||||
button(type="button" :class="$style.hide" :tips="$t('player__hide_detail_tip')" @click="hide")
|
||||
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='35%' viewBox='0 0 30.727 30.727' space='preserve')
|
||||
use(xlink:href='#icon-window-hide')
|
||||
button(type="button" :class="$style.min" :tips="$t('min')" @click="min")
|
||||
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-window-minimize-2')
|
||||
|
||||
//- button(type="button" :class="$style.max" @click="max")
|
||||
button(type="button" :class="$style.close" :tips="$t('close')" @click="close")
|
||||
svg(:class="$style.controBtnIcon" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='60%' viewBox='0 0 24 24' space='preserve')
|
||||
use(xlink:href='#icon-window-close-2')
|
||||
|
||||
div(:class="[$style.main, {[$style.showComment]: isShowPlayComment}]")
|
||||
div.left(:class="$style.left")
|
||||
|
|
@ -148,26 +161,6 @@ export default {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.controlBtnLeft {
|
||||
.controBtn {
|
||||
left: 0;
|
||||
flex-direction: row-reverse;
|
||||
height: @height-toolbar * .7;
|
||||
button + button {
|
||||
margin-right: @control-btn-width / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.controlBtnRight {
|
||||
.controBtn {
|
||||
right: @control-btn-width * .5;
|
||||
button + button {
|
||||
margin-left: @control-btn-width * 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
|
|
@ -193,55 +186,96 @@ export default {
|
|||
position: relative;
|
||||
flex: 0 0 @height-toolbar;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
.controBtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: @height-toolbar;
|
||||
-webkit-app-region: no-drag;
|
||||
padding: 0 @control-btn-width;
|
||||
&:hover {
|
||||
.controBtnIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
width: @control-btn-width;
|
||||
height: @control-btn-width;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
color: @color-theme_2;
|
||||
.controBtn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
&.hide {
|
||||
background-color: @color-hideBtn;
|
||||
&.controlBtnLeft {
|
||||
.controBtn {
|
||||
align-items: center;
|
||||
padding: 0 @control-btn-width;
|
||||
left: 0;
|
||||
flex-direction: row-reverse;
|
||||
height: @height-toolbar * .7;
|
||||
&:hover {
|
||||
.controBtnIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
width: @control-btn-width;
|
||||
height: @control-btn-width;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
color: @color-theme_2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
+ button {
|
||||
margin-right: (@control-btn-width / 2);
|
||||
}
|
||||
|
||||
&.hide {
|
||||
background-color: @color-hideBtn;
|
||||
}
|
||||
&.min {
|
||||
background-color: @color-minBtn;
|
||||
}
|
||||
&.max {
|
||||
background-color: @color-maxBtn;
|
||||
}
|
||||
&.close {
|
||||
background-color: @color-closeBtn;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.min {
|
||||
background-color: @color-minBtn;
|
||||
}
|
||||
&.max {
|
||||
background-color: @color-maxBtn;
|
||||
}
|
||||
&.close {
|
||||
background-color: @color-closeBtn;
|
||||
|
||||
.controBtnIcon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.controlBtnRight {
|
||||
align-self: flex-start;
|
||||
.controBtn {
|
||||
right: 0;
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 46px;
|
||||
height: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
color: @color-theme;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
|
||||
.controBtnIcon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:hover {
|
||||
&.hide, &.min, &.max {
|
||||
background-color: @color-btn-hover;
|
||||
}
|
||||
&.close {
|
||||
background-color: @color-closeBtn;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
|
|
@ -465,23 +499,42 @@ each(@themes, {
|
|||
background-image: linear-gradient(-180deg,rgba(255,255,255,0) 0%,~'@{color-@{value}-theme_2-background_1}' 95%);
|
||||
}
|
||||
}
|
||||
.controBtn {
|
||||
button {
|
||||
color: ~'@{color-@{value}-theme_2}';
|
||||
// &.hide:after {
|
||||
// background-color: ~'@{color-@{value}-hideBtn}';
|
||||
// }
|
||||
&.hide {
|
||||
background-color: ~'@{color-@{value}-hideBtn}';
|
||||
.header {
|
||||
&.controlBtnLeft {
|
||||
.controBtn {
|
||||
button {
|
||||
color: ~'@{color-@{value}-theme_2}';
|
||||
// &.hide:after {
|
||||
// background-color: ~'@{color-@{value}-hideBtn}';
|
||||
// }
|
||||
&.hide {
|
||||
background-color: ~'@{color-@{value}-hideBtn}';
|
||||
}
|
||||
&.min {
|
||||
background-color: ~'@{color-@{value}-minBtn}';
|
||||
}
|
||||
&.max {
|
||||
background-color: ~'@{color-@{value}-maxBtn}';
|
||||
}
|
||||
&.close {
|
||||
background-color: ~'@{color-@{value}-closeBtn}';
|
||||
}
|
||||
}
|
||||
}
|
||||
&.min {
|
||||
background-color: ~'@{color-@{value}-minBtn}';
|
||||
}
|
||||
&.max {
|
||||
background-color: ~'@{color-@{value}-maxBtn}';
|
||||
}
|
||||
&.close {
|
||||
background-color: ~'@{color-@{value}-closeBtn}';
|
||||
}
|
||||
&.controlBtnRight {
|
||||
.controBtn {
|
||||
button {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
&:hover {
|
||||
&.hide, &.min, &.max {
|
||||
background-color: ~'@{color-@{value}-btn-hover}';
|
||||
}
|
||||
&.close {
|
||||
background-color: ~'@{color-@{value}-closeBtn}';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div :class="$style.control">
|
||||
<button type="button" :class="[$style.btn, $style.min]" :tips="$t('min')" @click="min">
|
||||
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
|
||||
<use xlink:href="#icon-window-minimize"></use>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
|
||||
<use xlink:href="#icon-window-minimize-2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" :class="[$style.btn, $style.close]" :tips="$t('close')" @click="close">
|
||||
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
|
||||
<use xlink:href="#icon-window-close"></use>
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
|
||||
<use xlink:href="#icon-window-close-2"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -39,68 +39,48 @@ export default {
|
|||
<style lang="less" module>
|
||||
@import '@renderer/assets/styles/layout.less';
|
||||
|
||||
@control-btn-width: @height-toolbar * .26;
|
||||
|
||||
.control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
left: 15px;
|
||||
align-self: flex-start;
|
||||
-webkit-app-region: no-drag;
|
||||
padding: 0 @control-btn-width * 1.5;
|
||||
&:hover {
|
||||
.controlBtniIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
height: 30px;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: @control-btn-width;
|
||||
height: @control-btn-width;
|
||||
width: 46px;
|
||||
height: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
color: @color-theme_2;
|
||||
|
||||
+ .btn {
|
||||
margin-left: @control-btn-width * 1.2;
|
||||
}
|
||||
|
||||
&.min {
|
||||
background-color: @color-minBtn;
|
||||
}
|
||||
&.max {
|
||||
background-color: @color-maxBtn;
|
||||
}
|
||||
&.close {
|
||||
background-color: @color-closeBtn;
|
||||
color: @color-theme;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
&:hover {
|
||||
&.min, &.max {
|
||||
background-color: @color-btn-hover;
|
||||
}
|
||||
&.close {
|
||||
background-color: @color-closeBtn;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controlBtniIcon {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#root.@{value}) {
|
||||
.btn {
|
||||
color: ~'@{color-@{value}-theme_2}';
|
||||
|
||||
&.min {
|
||||
background-color: ~'@{color-@{value}-minBtn}';
|
||||
}
|
||||
&.max {
|
||||
background-color: ~'@{color-@{value}-maxBtn}';
|
||||
}
|
||||
&.close {
|
||||
background-color: ~'@{color-@{value}-closeBtn}';
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
&:hover {
|
||||
&.min, &.max {
|
||||
background-color: ~'@{color-@{value}-btn-hover}';
|
||||
}
|
||||
&.close {
|
||||
background-color: ~'@{color-@{value}-closeBtn}';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,11 +71,13 @@ document.body.addEventListener('click', updateTips)
|
|||
|
||||
document.body.addEventListener('contextmenu', updateTips)
|
||||
|
||||
window.eventHub.on(eventBaseName.focus, () => {
|
||||
hideTips()
|
||||
})
|
||||
window.eventHub.on(eventBaseName.dragStart, () => {
|
||||
isDraging = true
|
||||
hideTips()
|
||||
})
|
||||
|
||||
window.eventHub.on(eventBaseName.dragEnd, () => {
|
||||
isDraging = false
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue