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 16:00:01 +08:00
parent f8e449b017
commit 5d7ad836db
8 changed files with 171 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -49,7 +49,7 @@
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-formatter-friendly --fix src"
},
"browserslist": [
"Electron 7.1.8"
"Electron 7.1.9"
],
"engines": {
"node": ">= 12"

3
publish/changeLog.md
View File

@ -3,6 +3,7 @@
- 新增各大平台歌单热门标签显示（显示在歌单界面的第一个下拉标签菜单中）
- 恢复QQ音乐源128k音质试听
- 新增不强制win7开启透明效果即可使用，但要配置运行参数`-nt`，例如：`.\lx-music-desktop.exe -nt`，添加方法可自行百度“给快捷方式加参数”
- 新增“新年快乐”主题
### 优化
@ -20,4 +21,4 @@
### 其他
- 将软件设置与播放列表分离存储成两个文件
- 更新 Electron 到 7.1.8
- 更新 Electron 到 7.1.9

BIN
src/renderer/assets/images/xnkl.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 KiB

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

@ -1,6 +1,6 @@
@import './colors.less';
@themes: green, yellow, blue, red, purple, orange, grey, midAutumn, dhHyrz;
@themes: green, yellow, blue, red, purple, orange, grey, midAutumn, dhHyrz, happyNewYear;
// Colors
@ -20,7 +20,7 @@
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%);
@color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%);
@color-theme_2-font: darken(@color-theme_2, 70%);
@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
@color-theme_2-font-label: fadeout(@color-theme_2-font, 40%);
@color-theme_2-line: lighten(@color-theme, 35%);
@color-theme-sidebar: @color-theme;
@color-btn: fadeout(darken(@color-theme, 5%), 15%);
@ -51,10 +51,12 @@
@color-tab-btn-background-hover: @color-theme_2-hover;
@color-tab-border-top: fadeout(lighten(@color-theme, 5%), 50%);
@color-tab-border-bottom: lighten(@color-theme, 5%);
@color-minBtn: #85c43b;
@color-maxBtn: #e7aa36;
@color-closeBtn: #ea6e4d;
@color-minBtn-hover: fadeout(@color-minBtn, 10%);
@color-maxBtn-hover: fadeout(@color-maxBtn, 10%);
@color-closeBtn-hover: fadeout(@color-closeBtn, 10%);
@color-green-theme: #4daf7c;
@ -71,7 +73,7 @@
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%);
@color-green-theme_2-active: fadeout(darken(@color-green-theme, 5%), 70%);
@color-green-theme_2-font: darken(@color-green-theme_2, 70%);
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 40%);
@color-green-theme_2-line: lighten(@color-green-theme, 45%);
@color-green-theme-sidebar: @color-green-theme;
@color-green-btn: fadeout(darken(@color-green-theme, 5%), 15%);
@ -95,6 +97,12 @@
@color-green-tab-btn-background-hover: @color-green-theme_2-hover;
@color-green-tab-border-top: fadeout(lighten(@color-green-theme, 5%), 50%);
@color-green-tab-border-bottom: lighten(@color-green-theme, 5%);
@color-green-minBtn: #85c43b;
@color-green-maxBtn: #e7aa36;
@color-green-closeBtn: #ea6e4d;
@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-yellow-theme: #e9d460;
@ -135,6 +143,12 @@
@color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
@color-yellow-tab-border-top: fadeout(lighten(@color-yellow-theme, 5%), 40%);
@color-yellow-tab-border-bottom: @color-yellow-theme;
@color-yellow-minBtn: #85c43b;
@color-yellow-maxBtn: #e7aa36;
@color-yellow-closeBtn: #ea6e4d;
@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-orange-theme: #f5ab35;
@color-orange-theme-bgimg: none;
@ -150,7 +164,7 @@
@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%);
@color-orange-theme_2-active: fadeout(darken(@color-orange-theme, 5%), 70%);
@color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 40%);
@color-orange-theme_2-line: lighten(@color-orange-theme, 36%);
@color-orange-theme-sidebar: @color-orange-theme;
@color-orange-btn: fadeout(darken(@color-orange-theme, 5%), 15%);
@ -174,6 +188,12 @@
@color-orange-tab-btn-background-hover: @color-orange-theme_2-hover;
@color-orange-tab-border-top: fadeout(lighten(@color-orange-theme, 5%), 50%);
@color-orange-tab-border-bottom: lighten(@color-orange-theme, 5%);
@color-orange-minBtn: #85c43b;
@color-orange-maxBtn: #e7aa36;
@color-orange-closeBtn: #ea6e4d;
@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-blue-theme: #3498db;
@color-blue-theme-bgimg: none;
@ -189,7 +209,7 @@
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%);
@color-blue-theme_2-active: fadeout(darken(@color-blue-theme, 5%), 70%);
@color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 40%);
@color-blue-theme_2-line: lighten(@color-blue-theme, 42%);
@color-blue-theme-sidebar: @color-blue-theme;
@color-blue-btn: fadeout(darken(@color-blue-theme, 5%), 15%);
@ -213,6 +233,12 @@
@color-blue-tab-btn-background-hover: @color-blue-theme_2-hover;
@color-blue-tab-border-top: fadeout(lighten(@color-blue-theme, 5%), 50%);
@color-blue-tab-border-bottom: lighten(@color-blue-theme, 5%);
@color-blue-minBtn: #85c43b;
@color-blue-maxBtn: #e7aa36;
@color-blue-closeBtn: #ea6e4d;
@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-red-theme: #d64541;
@color-red-theme-bgimg: none;
@ -228,7 +254,7 @@
@color-red-theme_2-background_1: #fff;
@color-red-theme_2-background_2: fadeout(@color-red-theme_2-background_1, 2%);
@color-red-theme_2-font: darken(@color-red-theme_2, 70%);
@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 50%);
@color-red-theme_2-font-label: fadeout(@color-red-theme_2-font, 40%);
@color-red-theme_2-line: lighten(@color-red-theme, 42%);
@color-red-theme-sidebar: @color-red-theme;
@color-red-btn: fadeout(darken(@color-red-theme, 5%), 15%);
@ -254,6 +280,12 @@
@color-red-tab-btn-background-hover: @color-red-theme_2-hover;
@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 5%), 50%);
@color-red-tab-border-bottom: lighten(@color-red-theme, 5%);
@color-red-minBtn: #85c43b;
@color-red-maxBtn: #e7aa36;
@color-red-closeBtn: #ea6e4d;
@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-purple-theme: #9b59b6;
@color-purple-theme-bgimg: none;
@ -269,7 +301,7 @@
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%);
@color-purple-theme_2-active: fadeout(darken(@color-purple-theme, 5%), 70%);
@color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 40%);
@color-purple-theme_2-line: lighten(@color-purple-theme, 43%);
@color-purple-theme-sidebar: @color-purple-theme;
@color-purple-btn: fadeout(darken(@color-purple-theme, 5%), 15%);
@ -293,6 +325,12 @@
@color-purple-tab-btn-background-hover: @color-purple-theme_2-hover;
@color-purple-tab-border-top: fadeout(lighten(@color-purple-theme, 5%), 50%);
@color-purple-tab-border-bottom: lighten(@color-purple-theme, 5%);
@color-purple-minBtn: #85c43b;
@color-purple-maxBtn: #e7aa36;
@color-purple-closeBtn: #ea6e4d;
@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-grey-theme: #6c7a89;
@color-grey-theme-bgimg: none;
@ -308,7 +346,7 @@
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%);
@color-grey-theme_2-active: fadeout(darken(@color-grey-theme, 5%), 70%);
@color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 40%);
@color-grey-theme_2-line: lighten(@color-grey-theme, 47%);
@color-grey-theme-sidebar: @color-grey-theme;
@color-grey-btn: fadeout(darken(@color-grey-theme, 5%), 15%);
@ -332,6 +370,12 @@
@color-grey-tab-btn-background-hover: @color-grey-theme_2-hover;
@color-grey-tab-border-top: fadeout(lighten(@color-grey-theme, 5%), 50%);
@color-grey-tab-border-bottom: lighten(@color-grey-theme, 5%);
@color-grey-minBtn: #85c43b;
@color-grey-maxBtn: #e7aa36;
@color-grey-closeBtn: #ea6e4d;
@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-midAutumn-theme: rgba(74, 55, 82, 1);
@color-midAutumn-theme-bgimg: url(../images/jqbg.jpg);
@ -347,7 +391,7 @@
@color-midAutumn-theme_2-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 65%);
@color-midAutumn-theme_2-active: fadeout(darken(@color-midAutumn-theme, 5%), 70%);
@color-midAutumn-theme_2-font: darken(@color-midAutumn-theme_2, 70%);
@color-midAutumn-theme_2-font-label: lighten(@color-midAutumn-theme, 40%);
@color-midAutumn-theme_2-font-label: desaturate(lighten(@color-midAutumn-theme, 30%), 45%);
@color-midAutumn-theme_2-line: lighten(@color-midAutumn-theme, 63%);
@color-midAutumn-theme-sidebar: rgba(255, 255, 255, 0);
@color-midAutumn-btn: fadeout(darken(@color-midAutumn-theme, 5%), 27%);
@ -371,6 +415,12 @@
@color-midAutumn-tab-btn-background-hover: @color-midAutumn-theme_2-hover;
@color-midAutumn-tab-border-top: fadeout(lighten(@color-midAutumn-theme, 5%), 50%);
@color-midAutumn-tab-border-bottom: lighten(@color-midAutumn-theme, 5%);
@color-midAutumn-minBtn: #85c43b;
@color-midAutumn-maxBtn: #e7aa36;
@color-midAutumn-closeBtn: #ea6e4d;
@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-dhHyrz-theme: rgb(87, 144, 167);
@color-dhHyrz-theme-bgimg: url(../images/hzwbg.jpeg);
@ -386,7 +436,7 @@
@color-dhHyrz-theme_2-hover: fadeout(lighten(@color-dhHyrz-theme, 10%), 65%);
@color-dhHyrz-theme_2-active: fadeout(darken(@color-dhHyrz-theme, 5%), 70%);
@color-dhHyrz-theme_2-font: darken(@color-dhHyrz-theme_2, 80%);
@color-dhHyrz-theme_2-font-label: lighten(@color-dhHyrz-theme, 10%);
@color-dhHyrz-theme_2-font-label: desaturate(lighten(@color-dhHyrz-theme, 10%), 45%);
@color-dhHyrz-theme_2-line: fadeout(lighten(@color-dhHyrz-theme, 36%), 70%);
@color-dhHyrz-theme-sidebar: rgba(255, 255, 255, .3);
@color-dhHyrz-btn: fadeout(darken(@color-dhHyrz-theme, 5%), 15%);
@ -410,6 +460,58 @@
@color-dhHyrz-tab-btn-background-hover: @color-dhHyrz-theme_2-hover;
@color-dhHyrz-tab-border-top: fadeout(lighten(@color-dhHyrz-theme, 5%), 50%);
@color-dhHyrz-tab-border-bottom: lighten(@color-dhHyrz-theme, 5%);
@color-dhHyrz-minBtn: #85c43b;
@color-dhHyrz-maxBtn: #e7aa36;
@color-dhHyrz-closeBtn: #ea6e4d;
@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-happyNewYear-theme: rgb(252, 57, 57);
@color-happyNewYear-theme-bgimg: url(../images/xnkl.jpg);
@color-happyNewYear-theme-bgposition: center;
@color-happyNewYear-theme-bgsize: auto 100%;
@color-happyNewYear-theme-hover: fadeout(lighten(@color-happyNewYear-theme, 10%), 45%);
@color-happyNewYear-theme-active: fadeout(lighten(@color-happyNewYear-theme, 15%), 60%);
@color-happyNewYear-theme-font: rgba(255, 255, 255, 0.9);
@color-happyNewYear-theme-font-label: fadeout(lighten(@color-happyNewYear-theme, 20%), 20%);
@color-happyNewYear-theme_2: rgba(255, 199, 199, 0.8);
@color-happyNewYear-theme_2-background_1: #f2a4a4;
@color-happyNewYear-theme_2-background_2: fadeout(@color-happyNewYear-theme_2-background_1, 2%);
@color-happyNewYear-theme_2-hover: fadeout(lighten(@color-happyNewYear-theme, 10%), 65%);
@color-happyNewYear-theme_2-active: fadeout(darken(@color-happyNewYear-theme, 5%), 70%);
@color-happyNewYear-theme_2-font: darken(@color-happyNewYear-theme_2, 90%);
@color-happyNewYear-theme_2-font-label: desaturate(darken(@color-happyNewYear-theme, 5%), 50%);
@color-happyNewYear-theme_2-line: fadeout(lighten(@color-happyNewYear-theme, 16%), 70%);
@color-happyNewYear-theme-sidebar: rgba(119, 37, 18, 0.1);
@color-happyNewYear-btn: fadeout(darken(@color-happyNewYear-theme, 5%), 15%);
@color-happyNewYear-btn-background: fadeout(lighten(@color-happyNewYear-theme, 15%), 60%);
@color-happyNewYear-pagination-background: fadeout(lighten(@color-happyNewYear-theme, 15%), 40%);
@color-happyNewYear-pagination-hover: fadeout(lighten(@color-happyNewYear-theme, 10%), 70%);
@color-happyNewYear-pagination-active: fadeout(darken(@color-happyNewYear-theme, 10%), 70%);
@color-happyNewYear-pagination-select: fadeout(lighten(@color-happyNewYear-theme, 10%), 55%);
@color-happyNewYear-search-form-background: fadeout(lighten(@color-happyNewYear-theme, 15%), 20%);
@color-happyNewYear-search-list-hover: fadeout(darken(@color-happyNewYear-theme, 10%), 50%);
@color-happyNewYear-scrollbar-track: fadeout(@color-happyNewYear-theme, 80%);
@color-happyNewYear-scrollbar-thumb: fadeout(@color-happyNewYear-theme, 60%);
@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-bar1: darken(@color-happyNewYear-theme_2, 12%);
@color-happyNewYear-player-progress-bar2: lighten(@color-happyNewYear-theme, 12%);
@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;
@color-happyNewYear-tab-border-top: fadeout(lighten(@color-happyNewYear-theme, 5%), 50%);
@color-happyNewYear-tab-border-bottom: lighten(@color-happyNewYear-theme, 5%);
@color-happyNewYear-minBtn: #c4943b;
@color-happyNewYear-maxBtn: #e7aa36;
@color-happyNewYear-closeBtn: #ea6e4d;
@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%);
// Width

33
src/renderer/components/core/Toolbar.vue
View File

@ -208,14 +208,14 @@ export default {
}
&.min:hover:after {
background-color: lighten(@color-minBtn, 10%);
background-color: @color-minBtn-hover;
opacity: 1;
}
&.max:hover:after {
background-color: lighten(@color-maxBtn, 10%);
background-color: @color-maxBtn-hover;
}
&.close:hover:after {
background-color: lighten(@color-closeBtn, 10%);
background-color: @color-closeBtn-hover;
}
}
}
@ -240,4 +240,31 @@ export default {
color: #fff;
}
}
each(@themes, {
:global(#container.@{value}) {
.control {
button {
&.min:after {
background-color: ~'@{color-@{value}-minBtn}';
}
&.max:after {
background-color: ~'@{color-@{value}-maxBtn}';
}
&.close:after {
background-color: ~'@{color-@{value}-closeBtn}';
}
&.min:hover:after {
background-color: ~'@{color-@{value}-minBtn-hover}';
}
&.max:hover:after {
background-color: ~'@{color-@{value}-maxBtn-hover}';
}
&.close:hover:after {
background-color: ~'@{color-@{value}-closeBtn-hover}';
}
}
}
}
})
</style>

5
src/renderer/store/state.js
View File

@ -71,6 +71,11 @@ export default {
name: '木叶之村',
class: 'dhHyrz',
},
{
id: 9,
name: '新年快乐',
class: 'happyNewYear',
},
],
version: {
version,

4
src/renderer/utils/index.js
View File

@ -242,6 +242,10 @@ export const updateSetting = (setting, version) => {
randomAnimate: true,
ignoreVersion: null,
}
// 使用新年皮肤
if (new Date().getMonth() < 2) defaultSetting.themeId = 9
const overwriteSetting = {
}

17
src/renderer/views/SongList.vue
View File

@ -519,7 +519,7 @@ export default {
line-height: 1.2;
// text-indent: 24px;
color: #888;
color: @color-theme_2-font-label;
}
}
.pagination {
@ -528,4 +528,19 @@ export default {
// left: 50%;
// transform: translateX(-50%);
}
each(@themes, {
:global(#container.@{value}) {
.song-list-header-middle {
p {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
.right {
p {
color: ~'@{color-@{value}-theme_2-font-label}';
}
}
}
})
</style>