zhangxiang/lx-music-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加黑色皮肤

Browse Source
This commit is contained in:
lyswhut 2021-04-14 13:33:36 +08:00
parent d83db6bdf5
commit f75e416479
16 changed files with 199 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
build-config/renderer-lyric/webpack.config.base.js
View File

@ -2,6 +2,7 @@ const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanCSSPlugin = require('less-plugin-clean-css')
const vueLoaderConfig = require('../vue-loader.config')
const { mergeCSSLoader } = require('../utils')
@ -63,6 +64,11 @@ module.exports = {
loader: 'less-loader',
options: {
sourceMap: true,
lessOptions: {
plugins: [
new CleanCSSPlugin({ advanced: true }),
],
},
},
}),
},

6
build-config/renderer/webpack.config.base.js
View File

@ -2,6 +2,7 @@ const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CleanCSSPlugin = require('less-plugin-clean-css')
const vueLoaderConfig = require('../vue-loader.config')
const { mergeCSSLoader } = require('../utils')
@ -63,6 +64,11 @@ module.exports = {
loader: 'less-loader',
options: {
sourceMap: true,
lessOptions: {
plugins: [
new CleanCSSPlugin({ advanced: true }),
],
},
},
}),
},

14
build-config/utils.js
View File

@ -9,7 +9,12 @@ exports.mergeCSSLoader = beforeLoader => {
{
resourceQuery: /module/,
use: [
MiniCssExtractPlugin.loader,
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
},
},
{
loader: 'css-loader',
options: cssLoaderConfig,
@ -20,7 +25,12 @@ exports.mergeCSSLoader = beforeLoader => {
// 这里匹配普通的 `<style>` 或 `<style scoped>`
{
use: [
MiniCssExtractPlugin.loader,
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
},
},
'css-loader',
'postcss-loader',
],

45
package-lock.json generated
View File

@ -3597,6 +3597,12 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true
},
"amdefine": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
"dev": true
},
"ansi-align": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
@ -10491,6 +10497,45 @@
"klona": "^2.0.4"
}
},
"less-plugin-clean-css": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/less-plugin-clean-css/-/less-plugin-clean-css-1.5.1.tgz",
"integrity": "sha1-zFeveqM5iVflbezr5jy2DCNClwM=",
"dev": true,
"requires": {
"clean-css": "^3.0.1"
},
"dependencies": {
"clean-css": {
"version": "3.4.28",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
"integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=",
"dev": true,
"requires": {
"commander": "2.8.x",
"source-map": "0.4.x"
}
},
"commander": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
"integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
"dev": true,
"requires": {
"graceful-readlink": ">= 1.0.0"
}
},
"source-map": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
"dev": true,
"requires": {
"amdefine": ">=0.0.4"
}
}
}
},
"levn": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",

1
package.json
View File

@ -192,6 +192,7 @@
"html-webpack-plugin": "^5.3.1",
"less": "^4.1.1",
"less-loader": "^8.1.0",
"less-plugin-clean-css": "^1.5.1",
"markdown-it": "^12.0.4",
"mini-css-extract-plugin": "^1.4.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",

12
src/renderer-lyric/components/core/ControlBar.vue
View File

@ -174,6 +174,7 @@ export default {
@import '../../assets/styles/layout.less';
@bar-height: 38px;
@bar-height-padding: 7px;
.container {
position: relative;
@ -221,20 +222,19 @@ export default {
display: flex;
flex-flow: row wrap;
min-height: @bar-height;
padding-top: (@bar-height - 24px) / 2;
padding-left: (@bar-height - 24px) / 2;
padding-top: @bar-height-padding;
padding-left: @bar-height-padding;
box-sizing: border-box;
}
.btnBack {
margin-top: -(@bar-height - 24px) / 2;
margin-left: -(@bar-height - 24px) / 2;
margin-top: -@bar-height-padding;
margin-left: -@bar-height-padding;
}
.theme-item {
display: block;
margin-bottom: (@bar-height - 24px) / 2;
margin-right: (@bar-height - 24px) / 2;
margin-right: @bar-height-padding;
width: 24px;
height: 24px;
border-radius: @radius-border;

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/renderer/assets/images/landingMoon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/renderer/assets/images/landingMoon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

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

@ -1,6 +1,6 @@
@import './colors.less';
@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2, mid_autumn, naruto, happy_new_year;
@themes: green, yellow, blue, red, pink, purple, orange, grey, ming, blue2, black, mid_autumn, naruto, happy_new_year;
// Colors
@ -8,7 +8,7 @@
@color-theme: #4daf7c;
@color-theme-bgimg: none;
@color-theme-bgposition: center;
@color-theme-bgsize: auto auto;
@color-theme-bgsize: cover;
@color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
@color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
@color-theme-font: #fff;
@ -51,6 +51,8 @@
@color-player-progress-bar1: darken(@color-theme_2, 12%);
@color-player-progress-bar2: lighten(@color-theme, 12%);
@color-player-status-text: lighten(@color-theme_2-font, 32%);
@color-player-detail-lyric: fadeout(@color-theme_2-font, 40%);
@color-player-detail-lyric-active: darken(@color-theme, 2%);
@color-player-detail-play-btn: lighten(@color-theme, 7%);
@color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
@ -78,7 +80,7 @@
@color-green-theme: #4daf7c;
@color-green-theme-bgimg: none;
@color-green-theme-bgposition: center;
@color-green-theme-bgsize: auto auto;
@color-green-theme-bgsize: cover;
@color-green-theme-hover: fadeout(lighten(@color-green-theme, 10%), 30%);
@color-green-theme-active: fadeout(darken(@color-green-theme, 20%), 60%);
@color-green-theme-font: #fff;
@ -114,6 +116,8 @@
@color-green-player-progress-bar1: darken(@color-green-theme_2, 12%);
@color-green-player-progress-bar2: lighten(@color-green-theme, 12%);
@color-green-player-status-text: lighten(@color-green-theme_2-font, 32%);
@color-green-player-detail-lyric: fadeout(@color-green-theme_2-font, 40%);
@color-green-player-detail-lyric-active: darken(@color-green-theme, 2%);
@color-green-player-detail-play-btn: lighten(@color-green-theme, 7%);
@color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
@color-green-tab-btn-background-hover: @color-green-theme_2-hover;
@ -136,7 +140,7 @@
@color-yellow-theme: #e9d460;
@color-yellow-theme-bgimg: none;
@color-yellow-theme-bgposition: center;
@color-yellow-theme-bgsize: auto auto;
@color-yellow-theme-bgsize: cover;
@color-yellow-theme-hover: fadeout(lighten(@color-yellow-theme, 10%), 30%);
@color-yellow-theme-active: fadeout(darken(@color-yellow-theme, 20%), 60%);
@color-yellow-theme-font: #fff;
@ -172,6 +176,8 @@
@color-yellow-player-progress-bar1: darken(@color-yellow-theme_2, 12%);
@color-yellow-player-progress-bar2: lighten(@color-yellow-theme, 2%);
@color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 32%);
@color-yellow-player-detail-lyric: fadeout(@color-yellow-theme_2-font, 40%);
@color-yellow-player-detail-lyric-active: darken(@color-yellow-theme, 7%);
@color-yellow-player-detail-play-btn: lighten(@color-yellow-theme, 7%);
@color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 70%);
@color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
@ -193,7 +199,7 @@
@color-orange-theme: #f5ab35;
@color-orange-theme-bgimg: none;
@color-orange-theme-bgposition: center;
@color-orange-theme-bgsize: auto auto;
@color-orange-theme-bgsize: cover;
@color-orange-theme-hover: fadeout(lighten(@color-orange-theme, 10%), 30%);
@color-orange-theme-active: fadeout(darken(@color-orange-theme, 20%), 60%);
@color-orange-theme-font: #fff;
@ -229,6 +235,8 @@
@color-orange-player-progress-bar1: darken(@color-orange-theme_2, 12%);
@color-orange-player-progress-bar2: lighten(@color-orange-theme, 12%);
@color-orange-player-status-text: lighten(@color-orange-theme_2-font, 32%);
@color-orange-player-detail-lyric: fadeout(@color-orange-theme_2-font, 40%);
@color-orange-player-detail-lyric-active: darken(@color-orange-theme, 7%);
@color-orange-player-detail-play-btn: lighten(@color-orange-theme, 7%);
@color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
@color-orange-tab-btn-background-hover: @color-orange-theme_2-hover;
@ -250,7 +258,7 @@
@color-blue-theme: #3498db;
@color-blue-theme-bgimg: none;
@color-blue-theme-bgposition: center;
@color-blue-theme-bgsize: auto auto;
@color-blue-theme-bgsize: cover;
@color-blue-theme-hover: fadeout(lighten(@color-blue-theme, 10%), 30%);
@color-blue-theme-active: fadeout(darken(@color-blue-theme, 20%), 60%);
@color-blue-theme-font: #fff;
@ -286,6 +294,8 @@
@color-blue-player-progress-bar1: darken(@color-blue-theme_2, 12%);
@color-blue-player-progress-bar2: lighten(@color-blue-theme, 12%);
@color-blue-player-status-text: lighten(@color-blue-theme_2-font, 32%);
@color-blue-player-detail-lyric: fadeout(@color-blue-theme_2-font, 40%);
@color-blue-player-detail-lyric-active: darken(@color-blue-theme, 2%);
@color-blue-player-detail-play-btn: lighten(@color-blue-theme, 7%);
@color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
@color-blue-tab-btn-background-hover: @color-blue-theme_2-hover;
@ -307,7 +317,7 @@
@color-red-theme: #d64541;
@color-red-theme-bgimg: none;
@color-red-theme-bgposition: center;
@color-red-theme-bgsize: auto auto;
@color-red-theme-bgsize: cover;
@color-red-theme-hover: fadeout(lighten(@color-red-theme, 10%), 30%);
@color-red-theme-active: fadeout(darken(@color-red-theme, 20%), 60%);
@color-red-theme-font: #fff;
@ -343,6 +353,8 @@
@color-red-player-progress-bar1: darken(@color-red-theme_2, 12%);
@color-red-player-progress-bar2: lighten(@color-red-theme, 12%);
@color-red-player-status-text: lighten(@color-red-theme_2-font, 32%);
@color-red-player-detail-lyric: fadeout(@color-red-theme_2-font, 40%);
@color-red-player-detail-lyric-active: lighten(@color-red-theme, 2%);
@color-red-player-detail-play-btn: lighten(@color-red-theme, 7%);
@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
@color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
@ -366,7 +378,7 @@
@color-pink-theme: #f1828d;
@color-pink-theme-bgimg: none;
@color-pink-theme-bgposition: center;
@color-pink-theme-bgsize: auto auto;
@color-pink-theme-bgsize: cover;
@color-pink-theme-hover: fadeout(lighten(@color-pink-theme, 10%), 30%);
@color-pink-theme-active: fadeout(darken(@color-pink-theme, 20%), 60%);
@color-pink-theme-font: #fff;
@ -402,6 +414,8 @@
@color-pink-player-progress-bar1: darken(@color-pink-theme_2, 12%);
@color-pink-player-progress-bar2: lighten(@color-pink-theme, 2%);
@color-pink-player-status-text: lighten(@color-pink-theme_2-font, 32%);
@color-pink-player-detail-lyric: fadeout(@color-pink-theme_2-font, 40%);
@color-pink-player-detail-lyric-active: darken(@color-pink-theme, 2%);
@color-pink-player-detail-play-btn: lighten(@color-pink-theme, 7%);
@color-pink-tab-btn-background: fadeout(lighten(@color-pink-theme, 10%), 70%);
@color-pink-tab-btn-background-hover: @color-pink-theme_2-hover;
@ -423,7 +437,7 @@
@color-purple-theme: #9b59b6;
@color-purple-theme-bgimg: none;
@color-purple-theme-bgposition: center;
@color-purple-theme-bgsize: auto auto;
@color-purple-theme-bgsize: cover;
@color-purple-theme-hover: fadeout(lighten(@color-purple-theme, 10%), 30%);
@color-purple-theme-active: fadeout(darken(@color-purple-theme, 20%), 60%);
@color-purple-theme-font: #fff;
@ -459,6 +473,8 @@
@color-purple-player-progress-bar1: darken(@color-purple-theme_2, 12%);
@color-purple-player-progress-bar2: lighten(@color-purple-theme, 12%);
@color-purple-player-status-text: lighten(@color-purple-theme_2-font, 32%);
@color-purple-player-detail-lyric: fadeout(@color-purple-theme_2-font, 40%);
@color-purple-player-detail-lyric-active: darken(@color-purple-theme, 2%);
@color-purple-player-detail-play-btn: lighten(@color-purple-theme, 7%);
@color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
@color-purple-tab-btn-background-hover: @color-purple-theme_2-hover;
@ -480,7 +496,7 @@
@color-grey-theme: #6c7a89;
@color-grey-theme-bgimg: none;
@color-grey-theme-bgposition: center;
@color-grey-theme-bgsize: auto auto;
@color-grey-theme-bgsize: cover;
@color-grey-theme-hover: fadeout(lighten(@color-grey-theme, 10%), 30%);
@color-grey-theme-active: fadeout(darken(@color-grey-theme, 20%), 60%);
@color-grey-theme-font: #fff;
@ -516,6 +532,8 @@
@color-grey-player-progress-bar1: darken(@color-grey-theme_2, 12%);
@color-grey-player-progress-bar2: lighten(@color-grey-theme, 12%);
@color-grey-player-status-text: lighten(@color-grey-theme_2-font, 32%);
@color-grey-player-detail-lyric: fadeout(@color-grey-theme_2-font, 55%);
@color-grey-player-detail-lyric-active: darken(@color-grey-theme, 3%);
@color-grey-player-detail-play-btn: lighten(@color-grey-theme, 7%);
@color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
@color-grey-tab-btn-background-hover: @color-grey-theme_2-hover;
@ -538,7 +556,7 @@
@color-ming-theme: #336e7b;
@color-ming-theme-bgimg: none;
@color-ming-theme-bgposition: center;
@color-ming-theme-bgsize: auto auto;
@color-ming-theme-bgsize: cover;
@color-ming-theme-hover: fadeout(lighten(@color-ming-theme, 7%), 30%);
@color-ming-theme-active: fadeout(darken(@color-ming-theme, 20%), 60%);
@color-ming-theme-font: #fff;
@ -574,6 +592,8 @@
@color-ming-player-progress-bar1: darken(@color-ming-theme_2, 12%);
@color-ming-player-progress-bar2: lighten(@color-ming-theme, 12%);
@color-ming-player-status-text: lighten(@color-ming-theme_2-font, 32%);
@color-ming-player-detail-lyric: fadeout(@color-ming-theme_2-font, 50%);
@color-ming-player-detail-lyric-active: lighten(@color-ming-theme, 2%);
@color-ming-player-detail-play-btn: lighten(@color-ming-theme, 10%);
@color-ming-tab-border-top: fadeout(lighten(@color-ming-theme, 25%), 70%);
@color-ming-tab-border-bottom: lighten(@color-ming-theme, 35%);
@ -598,7 +618,7 @@
@color-blue2-theme: #4f62d0;
@color-blue2-theme-bgimg: none;
@color-blue2-theme-bgposition: center;
@color-blue2-theme-bgsize: auto auto;
@color-blue2-theme-bgsize: cover;
@color-blue2-theme-hover: fadeout(lighten(@color-blue2-theme, 10%), 30%);
@color-blue2-theme-active: fadeout(darken(@color-blue2-theme, 20%), 60%);
@color-blue2-theme-font: #fff;
@ -634,6 +654,8 @@
@color-blue2-player-progress-bar1: darken(@color-blue2-theme_2, 12%);
@color-blue2-player-progress-bar2: lighten(@color-blue2-theme, 12%);
@color-blue2-player-status-text: lighten(@color-blue2-theme_2-font, 32%);
@color-blue2-player-detail-lyric: fadeout(@color-blue2-theme_2-font, 50%);
@color-blue2-player-detail-lyric-active: darken(@color-blue2-theme, 2%);
@color-blue2-player-detail-play-btn: lighten(@color-blue2-theme, 7%);
@color-blue2-tab-btn-background: fadeout(lighten(@color-blue2-theme, 10%), 80%);
@color-blue2-tab-btn-background-hover: @color-blue2-theme_2-hover;
@ -652,62 +674,66 @@
@color-blue2-badge-info: #b080db;
@color-blue2-badge-info-font: #fff;
@color-blue2-theme: #070707;
@color-blue2-theme-bgimg: none;
@color-blue2-theme-bgposition: center;
@color-blue2-theme-bgsize: auto auto;
@color-blue2-theme-hover: fadeout(lighten(@color-blue2-theme, 13%), 30%);
@color-blue2-theme-active: fadeout(lighten(@color-blue2-theme, 8%), 30%);
@color-blue2-theme-font: lighten(@color-blue2-theme, 55%);
@color-blue2-theme-font-label: lighten(@color-blue2-theme, 35%);
@color-blue2-theme_2: #000000;
@color-blue2-theme_2-background_1: #000000;
@color-blue2-theme_2-background_2: fadeout(@color-blue2-theme_2-background_1, 2%);
@color-blue2-theme_2-hover: fadeout(lighten(@color-blue2-theme, 10%), 80%);
@color-blue2-theme_2-active: fadeout(lighten(@color-blue2-theme, 10%), 70%);
@color-blue2-theme_2-font: lighten(@color-blue2-theme_2, 65%);
@color-blue2-theme_2-font-label: darken(@color-blue2-theme_2-font, 30%);
// @color-blue2-theme_2-line: transparent;
@color-blue2-theme_2-line: lighten(@color-blue2-theme_2, 3%);
@color-blue2-reply-floor: fadeout(lighten(@color-blue2-theme, 60%), 95%);
@color-blue2-theme-sidebar: @color-blue2-theme;
@color-blue2-btn: lighten(@color-blue2-theme, 40%);
@color-blue2-btn-background: fadeout(lighten(@color-blue2-theme, 30%), 70%);
@color-blue2-btn-hover: fadeout(lighten(@color-blue2-theme, 40%), 70%);
@color-blue2-btn-active: fadeout(lighten(@color-blue2-theme, 20%), 70%);
@color-blue2-btn-select: fadeout(lighten(@color-blue2-theme, 25%), 70%);
@color-blue2-pagination-background: fadeout(lighten(@color-blue2-theme, 25%), 20%);
@color-blue2-pagination-hover: fadeout(lighten(@color-blue2-theme, 10%), 70%);
@color-blue2-pagination-active: fadeout(darken(@color-blue2-theme, 10%), 70%);
@color-blue2-pagination-select: fadeout(lighten(@color-blue2-theme, 10%), 50%);
@color-blue2-search-form-background: fadeout(lighten(@color-blue2-theme, 35%), 10%);
@color-blue2-search-list-hover: fadeout(darken(@color-blue2-theme, 10%), 70%);
@color-blue2-scrollbar-track: fadeout(lighten(@color-blue2-theme, 10%), 75%);
@color-blue2-scrollbar-thumb: fadeout(lighten(@color-blue2-theme, 10%), 50%);
@color-blue2-scrollbar-thumb-hover: fadeout(lighten(@color-blue2-theme, 10%), 35%);
@color-blue2-player-pic-c1: fadeout(@color-blue2-theme_2, 50%);
@color-blue2-player-pic-c2: darken(@color-blue2-theme_2, 30%);
@color-blue2-player-progress: darken(@color-blue2-theme_2, 6%);
@color-blue2-player-progress-bar1: darken(@color-blue2-theme_2, 12%);
@color-blue2-player-progress-bar2: lighten(@color-blue2-theme, 12%);
@color-blue2-player-status-text: darken(@color-blue2-theme_2-font, 20%);
@color-blue2-player-detail-play-btn: lighten(@color-blue2-theme, 7%);
@color-blue2-tab-btn-background: fadeout(lighten(@color-blue2-theme, 10%), 80%);
@color-blue2-tab-btn-background-hover: @color-blue2-theme_2-hover;
@color-blue2-tab-border-top: fadeout(lighten(@color-blue2-theme, 5%), 50%);
@color-blue2-tab-border-bottom: lighten(@color-blue2-theme, 5%);
@color-blue2-hideBtn: #3bc2b2;
@color-blue2-minBtn: #85c43b;
@color-blue2-maxBtn: #e7aa36;
@color-blue2-closeBtn: #ea6e4d;
@color-blue2-hideBtn-hover: fadeout(@color-hideBtn, 10%);
@color-blue2-minBtn-hover: fadeout(@color-blue2-minBtn, 10%);
@color-blue2-maxBtn-hover: fadeout(@color-blue2-maxBtn, 10%);
@color-blue2-closeBtn-hover: fadeout(@color-blue2-closeBtn, 10%);
@color-blue2-badge-success: lighten(@color-blue2-theme, 15%);
@color-blue2-badge-success-font: #fff;
@color-blue2-badge-info: #b080db;
@color-blue2-badge-info-font: #fff;
@color-black-theme: #272727;
@color-black-theme-bgimg: url(../images/landingMoon.png);
@color-black-theme-bgposition: center;
@color-black-theme-bgsize: cover;
@color-black-theme-hover: fadeout(lighten(@color-black-theme, 13%), 30%);
@color-black-theme-active: fadeout(lighten(@color-black-theme, 8%), 30%);
@color-black-theme-font: lighten(@color-black-theme, 55%);
@color-black-theme-font-label: lighten(@color-black-theme, 35%);
@color-black-theme_2: rgba(19, 19, 19, 0.9);
@color-black-theme_2-background_1: #080808;
@color-black-theme_2-background_2: #2b2b2b;
@color-black-theme_2-hover: fadeout(lighten(@color-black-theme, 10%), 80%);
@color-black-theme_2-active: fadeout(lighten(@color-black-theme, 10%), 70%);
@color-black-theme_2-font: lighten(@color-black-theme_2, 68%);
@color-black-theme_2-font-label: darken(@color-black-theme_2-font, 30%);
// @color-black-theme_2-line: transparent;
@color-black-theme_2-line: lighten(@color-black-theme_2, 1.5%);
@color-black-reply-floor: fadeout(lighten(@color-black-theme, 60%), 95%);
@color-black-theme-sidebar: @color-black-theme;
@color-black-btn: lighten(@color-black-theme, 40%);
@color-black-btn-background: fadeout(lighten(@color-black-theme, 30%), 70%);
@color-black-btn-hover: fadeout(lighten(@color-black-theme, 40%), 70%);
@color-black-btn-active: fadeout(lighten(@color-black-theme, 20%), 70%);
@color-black-btn-select: fadeout(lighten(@color-black-theme, 25%), 70%);
@color-black-pagination-background: fadeout(darken(@color-black-theme, 15%), 50%);
@color-black-pagination-hover: fadeout(lighten(@color-black-theme, 1%), 70%);
@color-black-pagination-active: fadeout(darken(@color-black-theme, 5%), 60%);
@color-black-pagination-select: fadeout(darken(@color-black-theme, 3%), 60%);
@color-black-search-form-background: fadeout(lighten(@color-black-theme, 8%), 6%);
@color-black-search-list-hover: fadeout(darken(@color-black-theme, 10%), 70%);
@color-black-scrollbar-track: fadeout(lighten(@color-black-theme, 10%), 75%);
@color-black-scrollbar-thumb: fadeout(lighten(@color-black-theme, 10%), 50%);
@color-black-scrollbar-thumb-hover: fadeout(lighten(@color-black-theme, 10%), 35%);
@color-black-player-pic-c1: fadeout(@color-black-theme_2, 50%);
@color-black-player-pic-c2: lighten(@color-black-theme_2, 30%);
@color-black-player-progress: lighten(@color-black-theme_2, 6%);
@color-black-player-progress-bar1: lighten(@color-black-theme_2, 12%);
@color-black-player-progress-bar2: lighten(@color-black-theme, 12%);
@color-black-player-status-text: darken(@color-black-theme_2-font, 20%);
@color-black-player-detail-lyric: fadeout(@color-black-theme_2-font, 40%);
@color-black-player-detail-lyric-active: lighten(@color-black-theme, 10%);
@color-black-player-detail-play-btn: lighten(@color-black-theme, 30%);
@color-black-tab-btn-background: fadeout(lighten(@color-black-theme, 10%), 80%);
@color-black-tab-btn-background-hover: @color-black-theme_2-hover;
@color-black-tab-border-top: fadeout(lighten(@color-black-theme, 5%), 50%);
@color-black-tab-border-bottom: lighten(@color-black-theme, 5%);
@color-black-hideBtn: #4e4e4e;
@color-black-minBtn: #5e5e5e;
@color-black-maxBtn: #535353;
@color-black-closeBtn: #6e6e6e;
@color-black-hideBtn-hover: fadeout(@color-hideBtn, 10%);
@color-black-minBtn-hover: fadeout(@color-black-minBtn, 10%);
@color-black-maxBtn-hover: fadeout(@color-black-maxBtn, 10%);
@color-black-closeBtn-hover: fadeout(@color-black-closeBtn, 10%);
@color-black-badge-success: lighten(@color-black-theme, 10%);
@color-black-badge-success-font: #fff;
@color-black-badge-info: lighten(@color-black-theme, 25%);
@color-black-badge-info-font: #fff;
@color-mid_autumn-theme: rgba(74, 55, 82, 1);
@color-mid_autumn-theme-bgimg: url(../images/jqbg.jpg);
@ -748,6 +774,8 @@
@color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
@color-mid_autumn-player-progress-bar2: lighten(@color-mid_autumn-theme, 12%);
@color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
@color-mid_autumn-player-detail-lyric: fadeout(@color-mid_autumn-theme_2-font, 40%);
@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
@color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
@color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
@color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
@ -806,6 +834,8 @@
@color-mid_autumn-player-progress-bar1: darken(@color-mid_autumn-theme_2, 12%);
@color-mid_autumn-player-progress-bar2: lighten(@color-mid_autumn-theme, 12%);
@color-mid_autumn-player-status-text: lighten(@color-mid_autumn-theme_2-font, 32%);
@color-mid_autumn-player-detail-lyric: lighten(@color-mid_autumn-theme, 7%);
@color-mid_autumn-player-detail-lyric-active: lighten(@color-mid_autumn-theme, 7%);
@color-mid_autumn-player-detail-play-btn: lighten(@color-mid_autumn-theme, 7%);
@color-mid_autumn-tab-btn-background: fadeout(lighten(@color-mid_autumn-theme, 10%), 80%);
@color-mid_autumn-tab-btn-background-hover: @color-mid_autumn-theme_2-hover;
@ -863,6 +893,8 @@
@color-naruto-player-progress-bar1: darken(@color-naruto-theme_2, 12%);
@color-naruto-player-progress-bar2: lighten(@color-naruto-theme, 12%);
@color-naruto-player-status-text: lighten(@color-naruto-theme_2-font, 32%);
@color-naruto-player-detail-lyric: fadeout(@color-naruto-theme_2-font, 36%);
@color-naruto-player-detail-lyric-active: darken(@color-naruto-theme, 7%);
@color-naruto-player-detail-play-btn: lighten(@color-naruto-theme, 7%);
@color-naruto-tab-btn-background: fadeout(lighten(@color-naruto-theme, 10%), 80%);
@color-naruto-tab-btn-background-hover: @color-naruto-theme_2-hover;
@ -920,6 +952,8 @@
@color-happy_new_year-player-progress-bar1: darken(@color-happy_new_year-theme_2, 12%);
@color-happy_new_year-player-progress-bar2: lighten(@color-happy_new_year-theme, 9%);
@color-happy_new_year-player-status-text: lighten(@color-happy_new_year-theme_2-font, 32%);
@color-happy_new_year-player-detail-lyric: fadeout(@color-happy_new_year-theme_2-font, 40%);
@color-happy_new_year-player-detail-lyric-active: darken(@color-happy_new_year-theme, 2%);
@color-happy_new_year-player-detail-play-btn: lighten(@color-happy_new_year-theme, 7%);
@color-happy_new_year-tab-btn-background: fadeout(lighten(@color-happy_new_year-theme, 10%), 80%);
@color-happy_new_year-tab-btn-background-hover: @color-happy_new_year-theme_2-hover;

12
src/renderer/components/core/Player.vue
View File

@ -1057,7 +1057,7 @@ export default {
height: 100%;
border-radius: @radius-progress-border;
transition-duration: 0.2s;
background-color: @color-theme;
background-color: @color-btn;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
@ -1075,14 +1075,14 @@ export default {
margin-left: 5px;
height: 100%;
width: 20px;
color: @color-theme;
color: @color-btn;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
transition: opacity 0.2s ease;
opacity: .5;
opacity: .6;
cursor: pointer;
svg {
@ -1226,10 +1226,10 @@ each(@themes, {
// }
}
.titleBtn {
color: ~'@{color-@{value}-theme}';
color: ~'@{color-@{value}-btn}';
}
.play-btn {
color: ~'@{color-@{value}-theme}';
color: ~'@{color-@{value}-btn}';
svg {
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}
@ -1239,7 +1239,7 @@ each(@themes, {
}
.volume-bar {
background-color: ~'@{color-@{value}-theme}';
background-color: ~'@{color-@{value}-btn}';
}

12
src/renderer/components/core/PlayerDetail.vue
View File

@ -579,7 +579,6 @@ export default {
overflow: hidden;
font-size: 16px;
cursor: grab;
color: @color-theme_2-font;
&.draging {
cursor: grabbing;
}
@ -588,6 +587,7 @@ export default {
line-height: 1.2;
margin: 16px 0;
overflow-wrap: break-word;
color: @color-player-detail-lyric;
.translation {
transition: @transition-theme !important;
@ -833,17 +833,19 @@ each(@themes, {
.lyric {
:global {
.lrc-content {
color: ~'@{color-@{value}-player-detail-lyric}';
&.active {
.translation {
color: ~'@{color-@{value}-theme}';
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
.line {
color: ~'@{color-@{value}-theme}';
color: ~'@{color-@{value}-player-detail-lyric-active}';
}
}
span {
// background-color: ~'@{color-@{value}-theme_2-font}';
background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-theme}', ~'@{color-@{value}-theme}');
background-color: ~'@{color-@{value}-player-detail-lyric}';
background-image: -webkit-linear-gradient(top, ~'@{color-@{value}-player-detail-lyric-active}', ~'@{color-@{value}-player-detail-lyric-active}');
}
}
}

1
src/renderer/lang/en-us/store/state.json
View File

@ -9,6 +9,7 @@
"theme_grey": "Grey",
"theme_ming": "Ming",
"theme_blue2": "Purple Blue",
"theme_black": "Black",
"theme_mid_autumn": "Mid-Autumn",
"theme_naruto": "Naruto",
"theme_happy_new_year": "New Year",

1
src/renderer/lang/zh-cn/store/state.json
View File

@ -9,6 +9,7 @@
"theme_grey": "灰常美丽",
"theme_ming": "青出于黑",
"theme_blue2": "清热版蓝",
"theme_black": "黑纸白字",
"theme_mid_autumn": "月里嫦娥",
"theme_naruto": "木叶之村",
"theme_happy_new_year": "新年快乐",

1
src/renderer/lang/zh-tw/store/state.json
View File

@ -9,6 +9,7 @@
"theme_grey": "灰常美麗",
"theme_ming": "青出於黑",
"theme_blue2": "清熱版藍",
"theme_black": "黑紙白字",
"theme_mid_autumn": "月裡嫦娥",
"theme_naruto": "木葉之村",
"theme_happy_new_year": "新年快樂",

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

@ -57,6 +57,11 @@ export default {
name: '青出于黑',
class: 'blue2',
},
{
id: 13,
name: '黑纸白字',
class: 'black',
},
{
id: 7,
name: '月里嫦娥',