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

分离背景位置控制

pull/96/head
lyswhut 2019-09-25 00:57:12 +08:00
parent b273c52124
commit d57f212c62
2 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/renderer/App.vue
View File

@ -227,7 +227,7 @@ body {
display: flex; display: flex;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background: @color-theme-bgimg center center no-repeat; background: @color-theme-bgimg @color-theme-bgposition no-repeat;
background-size: @color-theme-bgsize; background-size: @color-theme-bgsize;
transition: background-color @transition-theme; transition: background-color @transition-theme;
background-color: @color-theme; background-color: @color-theme;
@ -257,6 +257,7 @@ each(@themes, {
background-color: ~'@{color-@{value}-theme}'; background-color: ~'@{color-@{value}-theme}';
background-image: ~'@{color-@{value}-theme-bgimg}'; background-image: ~'@{color-@{value}-theme-bgimg}';
background-size: ~'@{color-@{value}-theme-bgsize}'; background-size: ~'@{color-@{value}-theme-bgsize}';
background-position: ~'@{color-@{value}-theme-bgposition}';
#right { #right {
background-color: ~'@{color-@{value}-theme_2}'; background-color: ~'@{color-@{value}-theme_2}';
} }

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

@ -7,6 +7,7 @@
// @color-theme: #03a678; // @color-theme: #03a678;
@color-theme: #4daf7c; @color-theme: #4daf7c;
@color-theme-bgimg: none; @color-theme-bgimg: none;
@color-theme-bgposition: center center;
@color-theme-bgsize: auto auto; @color-theme-bgsize: auto auto;
@color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%); @color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
@color-theme-active: fadeout(darken(@color-theme, 20%), 60%); @color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
@ -58,6 +59,7 @@
@color-green-theme: #4daf7c; @color-green-theme: #4daf7c;
@color-green-theme-bgimg: none; @color-green-theme-bgimg: none;
@color-green-theme-bgposition: center center;
@color-green-theme-bgsize: auto auto; @color-green-theme-bgsize: auto auto;
@color-green-theme-hover: fadeout(lighten(@color-green-theme, 10%), 30%); @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-active: fadeout(darken(@color-green-theme, 20%), 60%);
@ -97,6 +99,7 @@
@color-yellow-theme: #f2d35b; @color-yellow-theme: #f2d35b;
@color-yellow-theme-bgimg: none; @color-yellow-theme-bgimg: none;
@color-yellow-theme-bgposition: center center;
@color-yellow-theme-bgsize: auto auto; @color-yellow-theme-bgsize: auto auto;
@color-yellow-theme-hover: fadeout(lighten(@color-yellow-theme, 10%), 30%); @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-active: fadeout(darken(@color-yellow-theme, 20%), 60%);
@ -135,6 +138,7 @@
@color-orange-theme: #f5ab35; @color-orange-theme: #f5ab35;
@color-orange-theme-bgimg: none; @color-orange-theme-bgimg: none;
@color-orange-theme-bgposition: center center;
@color-orange-theme-bgsize: auto auto; @color-orange-theme-bgsize: auto auto;
@color-orange-theme-hover: fadeout(lighten(@color-orange-theme, 10%), 30%); @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-active: fadeout(darken(@color-orange-theme, 20%), 60%);
@ -173,6 +177,7 @@
@color-blue-theme: #3498db; @color-blue-theme: #3498db;
@color-blue-theme-bgimg: none; @color-blue-theme-bgimg: none;
@color-blue-theme-bgposition: center center;
@color-blue-theme-bgsize: auto auto; @color-blue-theme-bgsize: auto auto;
@color-blue-theme-hover: fadeout(lighten(@color-blue-theme, 10%), 30%); @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-active: fadeout(darken(@color-blue-theme, 20%), 60%);
@ -211,6 +216,7 @@
@color-red-theme: #d64541; @color-red-theme: #d64541;
@color-red-theme-bgimg: none; @color-red-theme-bgimg: none;
@color-red-theme-bgposition: center center;
@color-red-theme-bgsize: auto auto; @color-red-theme-bgsize: auto auto;
@color-red-theme-hover: fadeout(lighten(@color-red-theme, 10%), 30%); @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-active: fadeout(darken(@color-red-theme, 20%), 60%);
@ -251,6 +257,7 @@
@color-purple-theme: #9b59b6; @color-purple-theme: #9b59b6;
@color-purple-theme-bgimg: none; @color-purple-theme-bgimg: none;
@color-purple-theme-bgposition: center center;
@color-purple-theme-bgsize: auto auto; @color-purple-theme-bgsize: auto auto;
@color-purple-theme-hover: fadeout(lighten(@color-purple-theme, 10%), 30%); @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-active: fadeout(darken(@color-purple-theme, 20%), 60%);
@ -289,6 +296,7 @@
@color-grey-theme: #6c7a89; @color-grey-theme: #6c7a89;
@color-grey-theme-bgimg: none; @color-grey-theme-bgimg: none;
@color-grey-theme-bgposition: center center;
@color-grey-theme-bgsize: auto auto; @color-grey-theme-bgsize: auto auto;
@color-grey-theme-hover: fadeout(lighten(@color-grey-theme, 10%), 30%); @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-active: fadeout(darken(@color-grey-theme, 20%), 60%);
@ -327,6 +335,7 @@
@color-midAutumn-theme: rgba(74, 55, 82, 1); @color-midAutumn-theme: rgba(74, 55, 82, 1);
@color-midAutumn-theme-bgimg: url(../images/jqbg.jpg); @color-midAutumn-theme-bgimg: url(../images/jqbg.jpg);
@color-midAutumn-theme-bgposition: center center;
@color-midAutumn-theme-bgsize: auto 100%; @color-midAutumn-theme-bgsize: auto 100%;
@color-midAutumn-theme-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 30%); @color-midAutumn-theme-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 30%);
@color-midAutumn-theme-active: fadeout(lighten(@color-midAutumn-theme, 15%), 60%); @color-midAutumn-theme-active: fadeout(lighten(@color-midAutumn-theme, 15%), 60%);
@ -365,6 +374,7 @@
@color-dhHzw-theme: rgb(87, 144, 167); @color-dhHzw-theme: rgb(87, 144, 167);
@color-dhHzw-theme-bgimg: url(../images/hzwbg.jpeg); @color-dhHzw-theme-bgimg: url(../images/hzwbg.jpeg);
@color-dhHzw-theme-bgposition: center center;
@color-dhHzw-theme-bgsize: auto 100%; @color-dhHzw-theme-bgsize: auto 100%;
@color-dhHzw-theme-hover: fadeout(lighten(@color-dhHzw-theme, 10%), 45%); @color-dhHzw-theme-hover: fadeout(lighten(@color-dhHzw-theme, 10%), 45%);
@color-dhHzw-theme-active: fadeout(lighten(@color-dhHzw-theme, 15%), 60%); @color-dhHzw-theme-active: fadeout(lighten(@color-dhHzw-theme, 15%), 60%);