优化播放控制按钮交互效果

pull/277/head
lyswhut 2020-06-24 16:18:05 +08:00
parent 32ffe33e1a
commit f59b2d26ad
2 changed files with 12 additions and 9 deletions

View File

@ -820,7 +820,7 @@ export default {
} }
.middle-container { .middle-container {
height: 100%; height: 100%;
padding: 5px 8px 5px 8px; padding: 5px 10px 5px 8px;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
} }
@ -914,10 +914,10 @@ export default {
flex: none; flex: none;
height: 46%; height: 46%;
// margin-top: -2px; // margin-top: -2px;
transition: @transition-theme; // transition: @transition-theme;
transition-property: color; // transition-property: color;
color: @color-theme; // color: @color-theme;
transition: opacity 0.1s ease; transition: opacity 0.2s ease;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
@ -925,8 +925,11 @@ export default {
fill: currentColor; fill: currentColor;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
} }
&:hover {
opacity: 0.8;
}
&:active { &:active {
opacity: 0.7; opacity: 0.6;
} }
} }

View File

@ -619,10 +619,10 @@ export default {
padding: 5px; padding: 5px;
cursor: pointer; cursor: pointer;
flex: none; flex: none;
transition: @transition-theme; // transition: @transition-theme;
transition-property: color; // transition-property: color;
color: @color-player-detail-play-btn; color: @color-player-detail-play-btn;
transition: opacity 0.1s ease; transition: opacity 0.2s ease;
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;