github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

优化音质标签颜色

pull/166/head
lyswhut 2020-01-19 17:26:53 +08:00
parent 5d7ad836db
commit 340a9d937b
5 changed files with 76 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/renderer/assets/styles/index.less
View File

@ -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}';
}
}
}
})

56
src/renderer/assets/styles/variables.less
View File

@ -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;

4
src/renderer/components/material/SongList.vue
View File

@ -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-success(v-if="item._types.ape || item._types.flac") 无损
span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
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;")

4
src/renderer/views/List.vue
View File

@ -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-success(v-if="item._types.flac") FLAC
//- span.badge.badge-theme-info(v-if="item._types.ape") APE
//- 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;")

4
src/renderer/views/Search.vue
View File

@ -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-success(v-if="item._types.ape || item._types.flac") 无损
span.badge.badge-theme-info(v-if="!(item._types.ape || item._types.flac) && item._types['320k']") 高品质
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}}