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

调整皮肤tablist颜色

pull/96/head
lyswhut 2019-09-24 13:27:05 +08:00
parent 8437fe1716
commit ce0a9afc33
4 changed files with 27 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,8 @@
@color-theme-font-label: lighten(@color-theme, 35%); @color-theme-font-label: lighten(@color-theme, 35%);
@color-theme_2: rgba(255, 255, 255, .9); @color-theme_2: rgba(255, 255, 255, .9);
@color-theme_2-background_2: #fff; @color-theme_2-background_1: #fff;
@color-theme_2-background_2: fadeout(@color-theme_2-background_1, 2%);
@color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%); @color-theme_2-hover: fadeout(lighten(@color-theme, 10%), 70%);
@color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%); @color-theme_2-active: fadeout(darken(@color-theme, 5%), 70%);
@color-theme_2-font: darken(@color-theme_2, 70%); @color-theme_2-font: darken(@color-theme_2, 70%);
@ -63,7 +64,8 @@
@color-green-theme-font: #fff; @color-green-theme-font: #fff;
@color-green-theme-font-label: lighten(@color-green-theme, 35%); @color-green-theme-font-label: lighten(@color-green-theme, 35%);
@color-green-theme_2: #fff; @color-green-theme_2: #fff;
@color-green-theme_2-background_2: #fff; @color-green-theme_2-background_1: #fff;
@color-green-theme_2-background_2: fadeout(@color-green-theme_2-background_1, 2%);
@color-green-theme_2-hover: fadeout(lighten(@color-green-theme, 10%), 70%); @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-active: fadeout(darken(@color-green-theme, 5%), 70%);
@color-green-theme_2-font: darken(@color-green-theme_2, 70%); @color-green-theme_2-font: darken(@color-green-theme_2, 70%);
@ -101,7 +103,8 @@
@color-yellow-theme-font: #fff; @color-yellow-theme-font: #fff;
@color-yellow-theme-font-label: lighten(@color-yellow-theme, 35%); @color-yellow-theme-font-label: lighten(@color-yellow-theme, 35%);
@color-yellow-theme_2: #fff; @color-yellow-theme_2: #fff;
@color-yellow-theme_2-background_2: #fff; @color-yellow-theme_2-background_1: #fff;
@color-yellow-theme_2-background_2: fadeout(@color-yellow-theme_2-background_1, 2%);
@color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%); @color-yellow-theme_2-hover: fadeout(lighten(@color-yellow-theme, 10%), 70%);
@color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 70%); @color-yellow-theme_2-active: fadeout(darken(@color-yellow-theme, 5%), 70%);
@color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%); @color-yellow-theme_2-font: darken(@color-yellow-theme_2, 70%);
@ -138,7 +141,8 @@
@color-orange-theme-font: #fff; @color-orange-theme-font: #fff;
@color-orange-theme-font-label: lighten(@color-orange-theme, 35%); @color-orange-theme-font-label: lighten(@color-orange-theme, 35%);
@color-orange-theme_2: #fff; @color-orange-theme_2: #fff;
@color-orange-theme_2-background_2: #fff; @color-orange-theme_2-background_1: #fff;
@color-orange-theme_2-background_2: fadeout(@color-orange-theme_2-background_1, 2%);
@color-orange-theme_2-hover: fadeout(lighten(@color-orange-theme, 10%), 70%); @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-active: fadeout(darken(@color-orange-theme, 5%), 70%);
@color-orange-theme_2-font: darken(@color-orange-theme_2, 70%); @color-orange-theme_2-font: darken(@color-orange-theme_2, 70%);
@ -175,7 +179,8 @@
@color-blue-theme-font: #fff; @color-blue-theme-font: #fff;
@color-blue-theme-font-label: lighten(@color-blue-theme, 35%); @color-blue-theme-font-label: lighten(@color-blue-theme, 35%);
@color-blue-theme_2: #fff; @color-blue-theme_2: #fff;
@color-blue-theme_2-background_2: #fff; @color-blue-theme_2-background_1: #fff;
@color-blue-theme_2-background_2: fadeout(@color-blue-theme_2-background_1, 2%);
@color-blue-theme_2-hover: fadeout(lighten(@color-blue-theme, 10%), 70%); @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-active: fadeout(darken(@color-blue-theme, 5%), 70%);
@color-blue-theme_2-font: darken(@color-blue-theme_2, 70%); @color-blue-theme_2-font: darken(@color-blue-theme_2, 70%);
@ -214,7 +219,8 @@
@color-red-theme_2: #fff; @color-red-theme_2: #fff;
@color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%); @color-red-theme_2-hover: fadeout(lighten(@color-red-theme, 10%), 70%);
@color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%); @color-red-theme_2-active: fadeout(darken(@color-red-theme, 5%), 70%);
@color-red-theme_2-background_2: #fff; @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: 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, 50%);
@color-red-theme_2-line: lighten(@color-red-theme, 35%); @color-red-theme_2-line: lighten(@color-red-theme, 35%);
@ -251,7 +257,8 @@
@color-purple-theme-font: #fff; @color-purple-theme-font: #fff;
@color-purple-theme-font-label: lighten(@color-purple-theme, 35%); @color-purple-theme-font-label: lighten(@color-purple-theme, 35%);
@color-purple-theme_2: #fff; @color-purple-theme_2: #fff;
@color-purple-theme_2-background_2: #fff; @color-purple-theme_2-background_1: #fff;
@color-purple-theme_2-background_2: fadeout(@color-purple-theme_2-background_1, 2%);
@color-purple-theme_2-hover: fadeout(lighten(@color-purple-theme, 10%), 70%); @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-active: fadeout(darken(@color-purple-theme, 5%), 70%);
@color-purple-theme_2-font: darken(@color-purple-theme_2, 70%); @color-purple-theme_2-font: darken(@color-purple-theme_2, 70%);
@ -288,7 +295,8 @@
@color-grey-theme-font: #fff; @color-grey-theme-font: #fff;
@color-grey-theme-font-label: lighten(@color-grey-theme, 35%); @color-grey-theme-font-label: lighten(@color-grey-theme, 35%);
@color-grey-theme_2: #fff; @color-grey-theme_2: #fff;
@color-grey-theme_2-background_2: #fff; @color-grey-theme_2-background_1: #fff;
@color-grey-theme_2-background_2: fadeout(@color-grey-theme_2-background_1, 2%);
@color-grey-theme_2-hover: fadeout(lighten(@color-grey-theme, 10%), 70%); @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-active: fadeout(darken(@color-grey-theme, 5%), 70%);
@color-grey-theme_2-font: darken(@color-grey-theme_2, 70%); @color-grey-theme_2-font: darken(@color-grey-theme_2, 70%);
@ -325,7 +333,8 @@
@color-midAutumn-theme-font: rgba(246, 233, 255, 0.9); @color-midAutumn-theme-font: rgba(246, 233, 255, 0.9);
@color-midAutumn-theme-font-label: fadeout(lighten(@color-midAutumn-theme, 20%), 20%); @color-midAutumn-theme-font-label: fadeout(lighten(@color-midAutumn-theme, 20%), 20%);
@color-midAutumn-theme_2: rgba(255, 255, 255, .93); @color-midAutumn-theme_2: rgba(255, 255, 255, .93);
@color-midAutumn-theme_2-background_2: #eeedef; @color-midAutumn-theme_2-background_1: #eeedef;
@color-midAutumn-theme_2-background_2: fadeout(@color-midAutumn-theme_2-background_1, 2%);
@color-midAutumn-theme_2-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 65%); @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-active: fadeout(darken(@color-midAutumn-theme, 5%), 70%);
@color-midAutumn-theme_2-font: darken(@color-midAutumn-theme_2, 70%); @color-midAutumn-theme_2-font: darken(@color-midAutumn-theme_2, 70%);
@ -362,7 +371,8 @@
@color-dhHzw-theme-font: rgba(67, 118, 148, 0.9); @color-dhHzw-theme-font: rgba(67, 118, 148, 0.9);
@color-dhHzw-theme-font-label: fadeout(darken(@color-dhHzw-theme, 20%), 20%); @color-dhHzw-theme-font-label: fadeout(darken(@color-dhHzw-theme, 20%), 20%);
@color-dhHzw-theme_2: rgba(255, 255, 255, 0.8); @color-dhHzw-theme_2: rgba(255, 255, 255, 0.8);
@color-dhHzw-theme_2-background_2: #e9faff; @color-dhHzw-theme_2-background_1: #e9faff;
@color-dhHzw-theme_2-background_2: fadeout(@color-dhHzw-theme_2-background_1, 2%);
@color-dhHzw-theme_2-hover: fadeout(lighten(@color-dhHzw-theme, 10%), 65%); @color-dhHzw-theme_2-hover: fadeout(lighten(@color-dhHzw-theme, 10%), 65%);
@color-dhHzw-theme_2-active: fadeout(darken(@color-dhHzw-theme, 5%), 70%); @color-dhHzw-theme_2-active: fadeout(darken(@color-dhHzw-theme, 5%), 70%);
@color-dhHzw-theme_2-font: darken(@color-dhHzw-theme_2, 80%); @color-dhHzw-theme_2-font: darken(@color-dhHzw-theme_2, 80%);

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

@ -495,7 +495,7 @@ export default {
max-height: 100%; max-height: 100%;
transition: @transition-theme; transition: @transition-theme;
transition-property: border-color; transition-property: border-color;
border: 2px solid @color-theme_2-background_2; border: 2px solid @color-theme_2-background_1;
} }
} }
.right { .right {
@ -673,7 +673,7 @@ each(@themes, {
.left { .left {
color: ~'@{color-@{value}-theme}'; color: ~'@{color-@{value}-theme}';
img { img {
border-color: ~'@{color-@{value}-theme_2-background_2}'; border-color: ~'@{color-@{value}-theme_2-background_1}';
} }
} }
.play-btn { .play-btn {

6
src/renderer/components/material/Tab.vue
View File

@ -133,7 +133,7 @@ export default {
} }
} }
&.active { &.active {
border-bottom-color: @color-theme_2-background_2; border-bottom-color: @color-theme_2-background_1;
border-top-color: @color-tab-border-bottom; border-top-color: @color-tab-border-bottom;
border-left-color: @color-tab-border-bottom; border-left-color: @color-tab-border-bottom;
border-right-color: @color-tab-border-bottom; border-right-color: @color-tab-border-bottom;
@ -144,7 +144,7 @@ export default {
width: 0; width: 0;
} }
button { button {
background-color: @color-theme_2-background_2; background-color: @color-theme_2-background_1;
} }
} }
} }
@ -209,7 +209,7 @@ each(@themes, {
border-left-color: ~'@{color-@{value}-tab-border-bottom}'; border-left-color: ~'@{color-@{value}-tab-border-bottom}';
border-right-color: ~'@{color-@{value}-tab-border-bottom}'; border-right-color: ~'@{color-@{value}-tab-border-bottom}';
button { button {
background-color: ~'@{color-@{value}-theme_2-background_2}'; background-color: ~'@{color-@{value}-theme_2-background_1}';
} }
} }
} }

3
src/renderer/components/material/TagList.vue
View File

@ -144,7 +144,7 @@ export default {
border-bottom: 2px solid @color-tab-border-bottom; border-bottom: 2px solid @color-tab-border-bottom;
border-right: 2px solid @color-tab-border-bottom; border-right: 2px solid @color-tab-border-bottom;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
background-color: @color-theme_2; background-color: @color-theme_2-background_2;
overflow: hidden; overflow: hidden;
opacity: 0; opacity: 0;
transition: .25s ease; transition: .25s ease;
@ -212,6 +212,7 @@ each(@themes, {
.list { .list {
border-bottom-color: ~'@{color-@{value}-tab-border-bottom}'; border-bottom-color: ~'@{color-@{value}-tab-border-bottom}';
border-right-color: ~'@{color-@{value}-tab-border-bottom}'; border-right-color: ~'@{color-@{value}-tab-border-bottom}';
background-color: ~'@{color-@{value}-theme_2-background_2}';
// border-left-color: ~'@{color-@{value}-tab-border-bottom}'; // border-left-color: ~'@{color-@{value}-tab-border-bottom}';
li { li {
// color: ~'@{color-@{value}-btn}'; // color: ~'@{color-@{value}-btn}';