diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less index 68fc79f9..b3b1ff64 100644 --- a/src/renderer/assets/styles/index.less +++ b/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}'; + } + } } }) diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less index e620acbd..0be786ad 100644 --- a/src/renderer/assets/styles/variables.less +++ b/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; diff --git a/src/renderer/components/material/SongList.vue b/src/renderer/components/material/SongList.vue index 4a3f434b..0a1e7fd1 100644 --- a/src/renderer/components/material/SongList.vue +++ b/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-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;") diff --git a/src/renderer/views/List.vue b/src/renderer/views/List.vue index ec7bfae8..4d248520 100644 --- a/src/renderer/views/List.vue +++ b/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-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;") diff --git a/src/renderer/views/Search.vue b/src/renderer/views/Search.vue index 8cb401e2..c184fb1b 100644 --- a/src/renderer/views/Search.vue +++ b/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-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}}