优化右上角最小化/关闭按钮布局

publish/changeLog.md

@@ -14,6 +14,7 @@
 - 优化播放进度条的动画效果
 - 现在添加下载任务时，后面添加的任务会在列表顶部插入
 - 优化歌单打开机制，现在歌单加载失败时会提示加载失败了，并且支持直接打开企鹅、酷我手机分享出来的歌单了
+- 优化右上角最小化/关闭按钮布局
 
 ### 修复
 

src/renderer/components/core/Toolbar.vue

@@ -129,6 +129,8 @@ export default {
 <style lang="less" module>
 @import '../../assets/styles/layout.less';
 
+@control-btn-width: @height-toolbar * .5;
+
 .toolbar {
   display: flex;
   height: @height-toolbar;
@@ -161,8 +163,10 @@ export default {
 
 .control {
   display: flex;
+  align-items: center;
   height: 100%;
   -webkit-app-region: no-drag;
+  padding: 0 @control-btn-width / 2;
   &:hover {
     button:before {
       opacity: 1;
@@ -171,7 +175,8 @@ export default {
 
   button {
     position: relative;
-    width: @height-toolbar;
+    width: @control-btn-width;
+    height: @control-btn-width;
     background: none;
     border: none;
     display: flex;
@@ -180,6 +185,9 @@ export default {
     outline: none;
     padding: 0;
     cursor: pointer;
+    + button {
+      margin-left: @control-btn-width / 2;
+    }
 
     &:after {
       content: ' ';
@@ -224,8 +232,8 @@ export default {
     content: ' ';
     width: 8px;
     height: 2px;
-    left: @height-toolbar / 2 - 4;
+    left: @control-btn-width / 2 - 4;
-    top: @height-toolbar / 2 - 1;
+    top: @control-btn-width / 2 - 1;
     background-color: #fff;
   }
 }