优化音质标签颜色

src/renderer/assets/styles/index.less

@@ -95,6 +95,14 @@ a {
     color: #fff;
     background-color: #32bc63;
   }
+  &.badge-theme-success {
+    color: @color-badge-success-font;
+    background-color: @color-badge-success;
+  }
+  &.badge-theme-info {
+    color: @color-badge-info-font;
+    background-color: @color-badge-info;
+  }
 }
 
 small {
@@ -186,5 +194,15 @@ each(@themes, {
         }
       }
     }
+    .badge {
+      &.badge-theme-success {
+        color: ~'@{color-@{value}-badge-success-font}';
+        background-color: ~'@{color-@{value}-badge-success}';
+      }
+      &.badge-theme-info {
+        color: ~'@{color-@{value}-badge-info-font}';
+        background-color: ~'@{color-@{value}-badge-info}';
+      }
+    }
   }
 })

src/renderer/assets/styles/variables.less

@@ -57,6 +57,14 @@
 @color-minBtn-hover: fadeout(@color-minBtn, 10%);
 @color-maxBtn-hover: fadeout(@color-maxBtn, 10%);
 @color-closeBtn-hover: fadeout(@color-closeBtn, 10%);
+@color-green-badge-success: #32bc63;
+@color-green-badge-success-font: #fff;
+@color-green-badge-info: #4baed5;
+@color-green-badge-info-font: #fff;
+@color-badge-success: #32bc63;
+@color-badge-success-font: #fff;
+@color-badge-info: #4baed5;
+@color-badge-info-font: #fff;
 
 
 @color-green-theme: #4daf7c;
@@ -103,6 +111,10 @@
 @color-green-minBtn-hover: fadeout(@color-green-minBtn, 10%);
 @color-green-maxBtn-hover: fadeout(@color-green-maxBtn, 10%);
 @color-green-closeBtn-hover: fadeout(@color-green-closeBtn, 10%);
+@color-green-badge-success: #32bc63;
+@color-green-badge-success-font: #fff;
+@color-green-badge-info: #4baed5;
+@color-green-badge-info-font: #fff;
 
 
 @color-yellow-theme: #e9d460;
@@ -149,6 +161,10 @@
 @color-yellow-minBtn-hover: fadeout(@color-yellow-minBtn, 10%);
 @color-yellow-maxBtn-hover: fadeout(@color-yellow-maxBtn, 10%);
 @color-yellow-closeBtn-hover: fadeout(@color-yellow-closeBtn, 10%);
+@color-yellow-badge-success: #32bc63;
+@color-yellow-badge-success-font: #fff;
+@color-yellow-badge-info: #4baed5;
+@color-yellow-badge-info-font: #fff;
 
 @color-orange-theme: #f5ab35;
 @color-orange-theme-bgimg: none;
@@ -194,6 +210,10 @@
 @color-orange-minBtn-hover: fadeout(@color-orange-minBtn, 10%);
 @color-orange-maxBtn-hover: fadeout(@color-orange-maxBtn, 10%);
 @color-orange-closeBtn-hover: fadeout(@color-orange-closeBtn, 10%);
+@color-orange-badge-success: #32bc63;
+@color-orange-badge-success-font: #fff;
+@color-orange-badge-info: #4baed5;
+@color-orange-badge-info-font: #fff;
 
 @color-blue-theme: #3498db;
 @color-blue-theme-bgimg: none;
@@ -239,6 +259,10 @@
 @color-blue-minBtn-hover: fadeout(@color-blue-minBtn, 10%);
 @color-blue-maxBtn-hover: fadeout(@color-blue-maxBtn, 10%);
 @color-blue-closeBtn-hover: fadeout(@color-blue-closeBtn, 10%);
+@color-blue-badge-success: #32bc63;
+@color-blue-badge-success-font: #fff;
+@color-blue-badge-info: #4baed5;
+@color-blue-badge-info-font: #fff;
 
 @color-red-theme: #d64541;
 @color-red-theme-bgimg: none;
@@ -286,6 +310,10 @@
 @color-red-minBtn-hover: fadeout(@color-red-minBtn, 10%);
 @color-red-maxBtn-hover: fadeout(@color-red-maxBtn, 10%);
 @color-red-closeBtn-hover: fadeout(@color-red-closeBtn, 10%);
+@color-red-badge-success: #32bc63;
+@color-red-badge-success-font: #fff;
+@color-red-badge-info: #4baed5;
+@color-red-badge-info-font: #fff;
 
 @color-purple-theme: #9b59b6;
 @color-purple-theme-bgimg: none;
@@ -331,6 +359,10 @@
 @color-purple-minBtn-hover: fadeout(@color-purple-minBtn, 10%);
 @color-purple-maxBtn-hover: fadeout(@color-purple-maxBtn, 10%);
 @color-purple-closeBtn-hover: fadeout(@color-purple-closeBtn, 10%);
+@color-purple-badge-success: #32bc63;
+@color-purple-badge-success-font: #fff;
+@color-purple-badge-info: #4baed5;
+@color-purple-badge-info-font: #fff;
 
 @color-grey-theme: #6c7a89;
 @color-grey-theme-bgimg: none;
@@ -376,6 +408,10 @@
 @color-grey-minBtn-hover: fadeout(@color-grey-minBtn, 10%);
 @color-grey-maxBtn-hover: fadeout(@color-grey-maxBtn, 10%);
 @color-grey-closeBtn-hover: fadeout(@color-grey-closeBtn, 10%);
+@color-grey-badge-success: #32bc63;
+@color-grey-badge-success-font: #fff;
+@color-grey-badge-info: #4baed5;
+@color-grey-badge-info-font: #fff;
 
 @color-midAutumn-theme: rgba(74, 55, 82, 1);
 @color-midAutumn-theme-bgimg: url(../images/jqbg.jpg);
@@ -407,7 +443,7 @@
 @color-midAutumn-scrollbar-thumb-hover: fadeout(@color-midAutumn-theme, 40%);
 @color-midAutumn-player-pic-c1: fadeout(@color-midAutumn-theme_2, 50%);
 @color-midAutumn-player-pic-c2: darken(@color-midAutumn-theme_2, 30%);
-@color-midAutumn-player-progress: darken(@color-midAutumn-theme_2, 6%);
+@color-midAutumn-player-progress: darken(@color-midAutumn-theme_2, 10%);
 @color-midAutumn-player-progress-bar1: darken(@color-midAutumn-theme_2, 12%);
 @color-midAutumn-player-progress-bar2: lighten(@color-midAutumn-theme, 12%);
 @color-midAutumn-player-status-text: lighten(@color-midAutumn-theme_2-font, 10%);
@@ -421,6 +457,10 @@
 @color-midAutumn-minBtn-hover: fadeout(@color-midAutumn-minBtn, 10%);
 @color-midAutumn-maxBtn-hover: fadeout(@color-midAutumn-maxBtn, 10%);
 @color-midAutumn-closeBtn-hover: fadeout(@color-midAutumn-closeBtn, 10%);
+@color-midAutumn-badge-success: #32bc63;
+@color-midAutumn-badge-success-font: #fff;
+@color-midAutumn-badge-info: #4baed5;
+@color-midAutumn-badge-info-font: #fff;
 
 @color-dhHyrz-theme: rgb(87, 144, 167);
 @color-dhHyrz-theme-bgimg: url(../images/hzwbg.jpeg);
@@ -452,7 +492,7 @@
 @color-dhHyrz-scrollbar-thumb-hover: fadeout(@color-dhHyrz-theme, 40%);
 @color-dhHyrz-player-pic-c1: fadeout(@color-dhHyrz-theme_2, 50%);
 @color-dhHyrz-player-pic-c2: darken(@color-dhHyrz-theme_2, 30%);
-@color-dhHyrz-player-progress: darken(@color-dhHyrz-theme_2, 6%);
+@color-dhHyrz-player-progress: darken(@color-dhHyrz-theme_2, 10%);
 @color-dhHyrz-player-progress-bar1: darken(@color-dhHyrz-theme_2, 12%);
 @color-dhHyrz-player-progress-bar2: lighten(@color-dhHyrz-theme, 12%);
 @color-dhHyrz-player-status-text: lighten(@color-dhHyrz-theme_2-font, 10%);
@@ -466,6 +506,10 @@
 @color-dhHyrz-minBtn-hover: fadeout(@color-dhHyrz-minBtn, 10%);
 @color-dhHyrz-maxBtn-hover: fadeout(@color-dhHyrz-maxBtn, 10%);
 @color-dhHyrz-closeBtn-hover: fadeout(@color-dhHyrz-closeBtn, 10%);
+@color-dhHyrz-badge-success: #32bc63;
+@color-dhHyrz-badge-success-font: #fff;
+@color-dhHyrz-badge-info: #4baed5;
+@color-dhHyrz-badge-info-font: #fff;
 
 @color-happyNewYear-theme: rgb(252, 57, 57);
 @color-happyNewYear-theme-bgimg: url(../images/xnkl.jpg);
@@ -497,9 +541,9 @@
 @color-happyNewYear-scrollbar-thumb-hover: fadeout(@color-happyNewYear-theme, 40%);
 @color-happyNewYear-player-pic-c1: fadeout(@color-happyNewYear-theme_2, 50%);
 @color-happyNewYear-player-pic-c2: darken(@color-happyNewYear-theme_2, 30%);
-@color-happyNewYear-player-progress: darken(@color-happyNewYear-theme_2, 6%);
+@color-happyNewYear-player-progress: darken(@color-happyNewYear-theme_2, 10%);
 @color-happyNewYear-player-progress-bar1: darken(@color-happyNewYear-theme_2, 12%);
-@color-happyNewYear-player-progress-bar2: lighten(@color-happyNewYear-theme, 12%);
+@color-happyNewYear-player-progress-bar2: lighten(@color-happyNewYear-theme, 9%);
 @color-happyNewYear-player-status-text: lighten(@color-happyNewYear-theme_2-font, 10%);
 @color-happyNewYear-tab-btn-background: fadeout(lighten(@color-happyNewYear-theme, 10%), 80%);
 @color-happyNewYear-tab-btn-background-hover: @color-happyNewYear-theme_2-hover;
@@ -511,6 +555,10 @@
 @color-happyNewYear-minBtn-hover: fadeout(@color-happyNewYear-minBtn, 10%);
 @color-happyNewYear-maxBtn-hover: fadeout(@color-happyNewYear-maxBtn, 10%);
 @color-happyNewYear-closeBtn-hover: fadeout(@color-happyNewYear-closeBtn, 10%);
+@color-happyNewYear-badge-success: @color-happyNewYear-theme;
+@color-happyNewYear-badge-success-font: #fff;
+@color-happyNewYear-badge-info: #c4943b;
+@color-happyNewYear-badge-info-font: #fff;
 
 
 

src/renderer/components/material/SongList.vue

@@ -22,8 +22,8 @@ div(:class="$style.songList")
                 material-checkbox(:id="index.toString()" v-model="selectdList" @change="handleChangeSelect" :value="item")
               td.break(style="width: 25%;")
                 | {{item.name}}
-                span.badge.badge-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
+                span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
-                span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
+                span.badge.badge-theme-success(v-if="item._types.ape || item._types.flac") 无损
               td.break(style="width: 20%;") {{item.singer}}
               td.break(style="width: 20%;") {{item.albumName}}
               td(style="width: 20%; padding-left: 0; padding-right: 0;")

src/renderer/views/List.vue

@@ -27,8 +27,8 @@
                 //- span.badge.badge-light(v-if="item._types['128k']") 128K
                 //- span.badge.badge-light(v-if="item._types['192k']") 192K
                 //- span.badge.badge-secondary(v-if="item._types['320k']") 320K
-                //- span.badge.badge-info(v-if="item._types.ape") APE
+                //- span.badge.badge-theme-info(v-if="item._types.ape") APE
-                //- span.badge.badge-success(v-if="item._types.flac") FLAC
+                //- span.badge.badge-theme-success(v-if="item._types.flac") FLAC
               td.break(style="width: 20%;") {{item.singer}}
               td.break(style="width: 20%;") {{item.albumName}}
               td(style="width: 20%; padding-left: 0; padding-right: 0;")

src/renderer/views/Search.vue

@@ -24,8 +24,8 @@
                 material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
               td.break(style="width: 25%;")
                 | {{item.name}}
-                span.badge.badge-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
+                span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
-                span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
+                span.badge.badge-theme-success(v-if="item._types.ape || item._types.flac") 无损
                 span(:class="$style.labelSource" v-if="searchSourceId == 'all'") {{item.source}}
               td.break(style="width: 20%;") {{item.singer}}
               td.break(style="width: 25%;") {{item.albumName}}