新增：《月里嫦娥》皮肤
lyswhut
parent
6075a9d22f
commit
7204b51439
|
|
@ -1,5 +1,6 @@
|
|||
### 新增
|
||||
|
||||
- 中秋佳节，祝大家中秋快乐🥮~~新增个性皮肤**《月里嫦娥》**，时间仓促，皮肤还不是很完善，可以试试喜不喜欢~😉
|
||||
- 新增 MAC 版本退出快捷键支持
|
||||
- 新增点击播放器中的歌曲标题可以复制标题的功能（遇到好听的歌曲方便分享）
|
||||
|
||||
|
|
|
|||
|
|
@ -225,6 +225,8 @@ body {
|
|||
display: flex;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: @color-theme-bgimg center center no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
|
||||
#left {
|
||||
|
|
@ -235,6 +237,8 @@ body {
|
|||
flex: auto;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
transition: background-color @transition-theme;
|
||||
background-color: @color-theme_2;
|
||||
}
|
||||
#toolbar, #player {
|
||||
flex: none;
|
||||
|
|
@ -243,5 +247,14 @@ body {
|
|||
flex: auto;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
#container.@{value} {
|
||||
background-image: ~'@{color-@{value}-theme-bgimg}';
|
||||
#right {
|
||||
background-color: ~'@{color-@{value}-theme_2}';
|
||||
}
|
||||
}
|
||||
})
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
|
|
@ -36,11 +36,11 @@ table {
|
|||
}
|
||||
tbody {
|
||||
tr {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-top: 1px solid @color-theme_2-line;
|
||||
// border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
transition: background-color 0.2s ease;
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
background-color: @color-theme_2-hover;
|
||||
}
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
|
|
@ -172,5 +172,15 @@ each(@themes, {
|
|||
background-color: ~'@{color-@{value}-scrollbar-thumb-hover}';
|
||||
}
|
||||
}
|
||||
table {
|
||||
tbody {
|
||||
tr {
|
||||
border-top-color: ~'@{color-@{value}-theme_2-line}';
|
||||
&:hover {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
@import './colors.less';
|
||||
|
||||
@themes: green, yellow, blue, red, purple, orange, grey;
|
||||
@themes: green, yellow, blue, red, purple, orange, grey, midAutumn;
|
||||
|
||||
|
||||
// Colors
|
||||
// @color-theme: #03a678;
|
||||
@color-theme: #4daf7c;
|
||||
@color-theme-bgimg: none;
|
||||
@color-theme-hover: fadeout(lighten(@color-theme, 10%), 30%);
|
||||
@color-theme-active: fadeout(darken(@color-theme, 20%), 60%);
|
||||
@color-theme-font: #fff;
|
||||
@color-theme-font-label: lighten(@color-theme, 35%);
|
||||
|
||||
@color-theme_2: #fff;
|
||||
@color-theme_2: rgba(255, 255, 255, .9);
|
||||
@color-theme_2-background_2: #fff;
|
||||
@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: lighten(@color-theme, 40%);
|
||||
@color-theme_2-font-label: fadeout(@color-theme_2-font, 50%);
|
||||
@color-theme_2-line: lighten(@color-theme, 35%);
|
||||
@color-theme-sidebar: @color-theme;
|
||||
@color-btn: fadeout(darken(@color-theme, 5%), 15%);
|
||||
@color-btn-background: fadeout(lighten(@color-theme, 35%), 70%);
|
||||
|
||||
|
|
@ -41,6 +45,7 @@
|
|||
@color-player-status-text: lighten(@color-theme_2-font, 10%);
|
||||
|
||||
@color-tab-btn-background: fadeout(lighten(@color-theme, 10%), 80%);
|
||||
@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%);
|
||||
|
||||
|
|
@ -50,15 +55,19 @@
|
|||
|
||||
|
||||
@color-green-theme: #4daf7c;
|
||||
@color-green-theme-bgimg: none;
|
||||
@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;
|
||||
@color-green-theme-font-label: lighten(@color-green-theme, 35%);
|
||||
@color-green-theme_2: #fff;
|
||||
@color-green-theme_2-background_2: #fff;
|
||||
@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: lighten(@color-green-theme, 40%);
|
||||
@color-green-theme_2-font-label: fadeout(@color-green-theme_2-font, 50%);
|
||||
@color-green-theme_2-line: lighten(@color-green-theme, 35%);
|
||||
@color-green-theme-sidebar: @color-green-theme;
|
||||
@color-green-btn: fadeout(darken(@color-green-theme, 5%), 15%);
|
||||
@color-green-btn-background: fadeout(lighten(@color-green-theme, 35%), 70%);
|
||||
@color-green-pagination-background: fadeout(lighten(@color-green-theme, 45%), 30%);
|
||||
|
|
@ -77,20 +86,25 @@
|
|||
@color-green-player-progress-bar2: lighten(@color-green-theme, 12%);
|
||||
@color-green-player-status-text: lighten(@color-green-theme_2-font, 10%);
|
||||
@color-green-tab-btn-background: fadeout(lighten(@color-green-theme, 10%), 80%);
|
||||
@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-yellow-theme: #f2d35b;
|
||||
@color-yellow-theme-bgimg: none;
|
||||
@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;
|
||||
@color-yellow-theme-font-label: lighten(@color-yellow-theme, 35%);
|
||||
@color-yellow-theme_2: #fff;
|
||||
@color-yellow-theme_2-background_2: #fff;
|
||||
@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-font: darken(@color-yellow-theme_2, 70%);
|
||||
@color-yellow-theme_2-font-label: lighten(@color-yellow-theme, 40%);
|
||||
@color-yellow-theme_2-font-label: fadeout(@color-yellow-theme_2-font, 50%);
|
||||
@color-yellow-theme_2-line: lighten(@color-yellow-theme, 35%);
|
||||
@color-yellow-theme-sidebar: @color-yellow-theme;
|
||||
@color-yellow-btn: fadeout(darken(@color-yellow-theme, 5%), 15%);
|
||||
@color-yellow-btn-background: fadeout(lighten(@color-yellow-theme, 25%), 70%);
|
||||
@color-yellow-pagination-background: fadeout(lighten(@color-yellow-theme, 30%), 30%);
|
||||
|
|
@ -109,19 +123,24 @@
|
|||
@color-yellow-player-progress-bar2: lighten(@color-yellow-theme, 12%);
|
||||
@color-yellow-player-status-text: lighten(@color-yellow-theme_2-font, 10%);
|
||||
@color-yellow-tab-btn-background: fadeout(lighten(@color-yellow-theme, 10%), 80%);
|
||||
@color-yellow-tab-btn-background-hover: @color-yellow-theme_2-hover;
|
||||
@color-yellow-tab-border-top: fadeout(lighten(@color-yellow-theme, 5%), 50%);
|
||||
@color-yellow-tab-border-bottom: lighten(@color-yellow-theme, 5%);
|
||||
|
||||
@color-orange-theme: #f5ab35;
|
||||
@color-orange-theme-bgimg: none;
|
||||
@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;
|
||||
@color-orange-theme-font-label: lighten(@color-orange-theme, 35%);
|
||||
@color-orange-theme_2: #fff;
|
||||
@color-orange-theme_2-background_2: #fff;
|
||||
@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: lighten(@color-orange-theme, 40%);
|
||||
@color-orange-theme_2-font-label: fadeout(@color-orange-theme_2-font, 50%);
|
||||
@color-orange-theme_2-line: lighten(@color-orange-theme, 35%);
|
||||
@color-orange-theme-sidebar: @color-orange-theme;
|
||||
@color-orange-btn: fadeout(darken(@color-orange-theme, 5%), 15%);
|
||||
@color-orange-btn-background: fadeout(lighten(@color-orange-theme, 35%), 70%);
|
||||
@color-orange-pagination-background: fadeout(lighten(@color-orange-theme, 35%), 30%);
|
||||
|
|
@ -140,19 +159,24 @@
|
|||
@color-orange-player-progress-bar2: lighten(@color-orange-theme, 12%);
|
||||
@color-orange-player-status-text: lighten(@color-orange-theme_2-font, 10%);
|
||||
@color-orange-tab-btn-background: fadeout(lighten(@color-orange-theme, 10%), 80%);
|
||||
@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-blue-theme: #3498db;
|
||||
@color-blue-theme-bgimg: none;
|
||||
@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;
|
||||
@color-blue-theme-font-label: lighten(@color-blue-theme, 35%);
|
||||
@color-blue-theme_2: #fff;
|
||||
@color-blue-theme_2-background_2: #fff;
|
||||
@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: lighten(@color-blue-theme, 40%);
|
||||
@color-blue-theme_2-font-label: fadeout(@color-blue-theme_2-font, 50%);
|
||||
@color-blue-theme_2-line: lighten(@color-blue-theme, 35%);
|
||||
@color-blue-theme-sidebar: @color-blue-theme;
|
||||
@color-blue-btn: fadeout(darken(@color-blue-theme, 5%), 15%);
|
||||
@color-blue-btn-background: fadeout(lighten(@color-blue-theme, 35%), 70%);
|
||||
@color-blue-pagination-background: fadeout(lighten(@color-blue-theme, 40%), 30%);
|
||||
|
|
@ -171,10 +195,12 @@
|
|||
@color-blue-player-progress-bar2: lighten(@color-blue-theme, 12%);
|
||||
@color-blue-player-status-text: lighten(@color-blue-theme_2-font, 10%);
|
||||
@color-blue-tab-btn-background: fadeout(lighten(@color-blue-theme, 10%), 80%);
|
||||
@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-red-theme: #d64541;
|
||||
@color-red-theme-bgimg: none;
|
||||
@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;
|
||||
|
|
@ -182,8 +208,11 @@
|
|||
@color-red-theme_2: #fff;
|
||||
@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-background_2: #fff;
|
||||
@color-red-theme_2-font: darken(@color-red-theme_2, 70%);
|
||||
@color-red-theme_2-font-label: lighten(@color-red-theme, 40%);
|
||||
@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-sidebar: @color-red-theme;
|
||||
@color-red-btn: fadeout(darken(@color-red-theme, 5%), 15%);
|
||||
@color-red-btn-background: fadeout(lighten(@color-red-theme, 35%), 70%);
|
||||
@color-red-pagination-background: fadeout(lighten(@color-red-theme, 40%), 30%);
|
||||
|
|
@ -204,19 +233,24 @@
|
|||
@color-red-tab-border-top: fadeout(lighten(@color-red-theme, 25%), 70%);
|
||||
@color-red-tab-border-bottom: lighten(@color-red-theme, 35%);
|
||||
@color-red-tab-btn-background: fadeout(lighten(@color-red-theme, 10%), 80%);
|
||||
@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-purple-theme: #9b59b6;
|
||||
@color-purple-theme-bgimg: none;
|
||||
@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;
|
||||
@color-purple-theme-font-label: lighten(@color-purple-theme, 35%);
|
||||
@color-purple-theme_2: #fff;
|
||||
@color-purple-theme_2-background_2: #fff;
|
||||
@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: lighten(@color-purple-theme, 40%);
|
||||
@color-purple-theme_2-font-label: fadeout(@color-purple-theme_2-font, 50%);
|
||||
@color-purple-theme_2-line: lighten(@color-purple-theme, 35%);
|
||||
@color-purple-theme-sidebar: @color-purple-theme;
|
||||
@color-purple-btn: fadeout(darken(@color-purple-theme, 5%), 15%);
|
||||
@color-purple-btn-background: fadeout(lighten(@color-purple-theme, 35%), 70%);
|
||||
@color-purple-pagination-background: fadeout(lighten(@color-purple-theme, 40%), 30%);
|
||||
|
|
@ -235,19 +269,24 @@
|
|||
@color-purple-player-progress-bar2: lighten(@color-purple-theme, 12%);
|
||||
@color-purple-player-status-text: lighten(@color-purple-theme_2-font, 10%);
|
||||
@color-purple-tab-btn-background: fadeout(lighten(@color-purple-theme, 10%), 80%);
|
||||
@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-grey-theme: #6c7a89;
|
||||
@color-grey-theme-bgimg: none;
|
||||
@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;
|
||||
@color-grey-theme-font-label: lighten(@color-grey-theme, 35%);
|
||||
@color-grey-theme_2: #fff;
|
||||
@color-grey-theme_2-background_2: #fff;
|
||||
@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: lighten(@color-grey-theme, 40%);
|
||||
@color-grey-theme_2-font-label: fadeout(@color-grey-theme_2-font, 50%);
|
||||
@color-grey-theme_2-line: lighten(@color-grey-theme, 35%);
|
||||
@color-grey-theme-sidebar: @color-grey-theme;
|
||||
@color-grey-btn: fadeout(darken(@color-grey-theme, 5%), 15%);
|
||||
@color-grey-btn-background: fadeout(lighten(@color-grey-theme, 35%), 70%);
|
||||
@color-grey-pagination-background: fadeout(lighten(@color-grey-theme, 45%), 30%);
|
||||
|
|
@ -266,9 +305,46 @@
|
|||
@color-grey-player-progress-bar2: lighten(@color-grey-theme, 12%);
|
||||
@color-grey-player-status-text: lighten(@color-grey-theme_2-font, 10%);
|
||||
@color-grey-tab-btn-background: fadeout(lighten(@color-grey-theme, 10%), 80%);
|
||||
@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-midAutumn-theme: rgba(74, 55, 82, 0.9);
|
||||
@color-midAutumn-theme-bgimg: url(../images/jqbg.jpg);
|
||||
@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-font: rgba(246, 233, 255, 0.9);
|
||||
@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-background_2: #eeedef;
|
||||
@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-line: lighten(@color-midAutumn-theme, 54%);
|
||||
@color-midAutumn-theme-sidebar: rgba(255, 255, 255, 0);
|
||||
@color-midAutumn-btn: fadeout(darken(@color-midAutumn-theme, 5%), 15%);
|
||||
@color-midAutumn-btn-background: fadeout(lighten(@color-midAutumn-theme, 35%), 70%);
|
||||
@color-midAutumn-pagination-background: fadeout(lighten(@color-midAutumn-theme, 45%), 50%);
|
||||
@color-midAutumn-pagination-hover: fadeout(lighten(@color-midAutumn-theme, 10%), 70%);
|
||||
@color-midAutumn-pagination-active: fadeout(darken(@color-midAutumn-theme, 10%), 70%);
|
||||
@color-midAutumn-pagination-select: fadeout(lighten(@color-midAutumn-theme, 10%), 55%);
|
||||
@color-midAutumn-search-form-background: fadeout(lighten(@color-midAutumn-theme, 50%), 10%);
|
||||
@color-midAutumn-search-list-hover: fadeout(darken(@color-midAutumn-theme, 10%), 70%);
|
||||
@color-midAutumn-scrollbar-track: fadeout(@color-midAutumn-theme, 80%);
|
||||
@color-midAutumn-scrollbar-thumb: fadeout(@color-midAutumn-theme, 60%);
|
||||
@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-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%);
|
||||
@color-midAutumn-tab-btn-background: fadeout(lighten(@color-midAutumn-theme, 10%), 80%);
|
||||
@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%);
|
||||
|
||||
|
||||
// Width
|
||||
@width-app-left: 180px;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
// box-shadow: 0 0 5px rgba(0, 0, 0, .3);
|
||||
transition: @transition-theme;
|
||||
transition-property: background-color;
|
||||
background-color: @color-theme;
|
||||
background-color: @color-theme-sidebar;
|
||||
// background-color: @color-aside-background;
|
||||
// border-right: 2px solid @color-theme;
|
||||
-webkit-app-region: drag;
|
||||
|
|
@ -122,7 +122,7 @@ export default {
|
|||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.aside {
|
||||
background-color: ~'@{color-@{value}-theme}';
|
||||
background-color: ~'@{color-@{value}-theme-sidebar}';
|
||||
}
|
||||
.logo {
|
||||
color: ~'@{color-@{value}-theme-font}';
|
||||
|
|
|
|||
|
|
@ -471,8 +471,7 @@ export default {
|
|||
height: @height-player;
|
||||
// background-color: rgb(245, 245, 245);
|
||||
transition: @transition-theme;
|
||||
transition-property: background-color, border-color;
|
||||
background-color: @color-theme_2;
|
||||
transition-property: border-color;
|
||||
border-top: 2px solid @color-theme;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
|
@ -496,7 +495,7 @@ export default {
|
|||
max-height: 100%;
|
||||
transition: @transition-theme;
|
||||
transition-property: border-color;
|
||||
border: 2px solid @color-theme_2;
|
||||
border: 2px solid @color-theme_2-background_2;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
|
|
@ -669,13 +668,12 @@ export default {
|
|||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.player {
|
||||
background-color: ~'@{color-@{value}-theme_2}';
|
||||
border-top-color: ~'@{color-@{value}-theme}';
|
||||
}
|
||||
.left {
|
||||
color: ~'@{color-@{value}-theme}';
|
||||
img {
|
||||
border-color: ~'@{color-@{value}-theme_2}';
|
||||
border-color: ~'@{color-@{value}-theme_2-background_2}';
|
||||
}
|
||||
}
|
||||
.play-btn {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@ export default {
|
|||
display: flex;
|
||||
height: @height-toolbar;
|
||||
justify-content: flex-end;
|
||||
background-color: @color-theme_2;
|
||||
align-items: center;
|
||||
padding-left: 15px;
|
||||
-webkit-app-region: drag;
|
||||
|
|
@ -58,13 +57,6 @@ export default {
|
|||
.input {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.toolbar {
|
||||
background-color: ~'@{color-@{value}-theme_2}';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// img {
|
||||
// flex: none;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ div(:class="$style.view")
|
|||
|
||||
.view {
|
||||
position: relative;
|
||||
background-color: @color-theme_2;
|
||||
> * {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -22,12 +21,4 @@ div(:class="$style.view")
|
|||
// overflow: hidden;
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.view {
|
||||
background-color: ~'@{color-@{value}-theme_2}';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ export default {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid @color-theme_2-font-label;
|
||||
transition: border-color 0.2s ease;
|
||||
border-radius: 15%;
|
||||
}
|
||||
|
|
@ -196,7 +196,7 @@ each(@themes, {
|
|||
color: ~'@{color-@{value}-theme}';
|
||||
// border: 1px solid #ccc;
|
||||
&:after {
|
||||
border-color: #ccc;
|
||||
border-color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
border-left: 2px solid @color-tab-border-bottom;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-left-radius: 4px;
|
||||
color: @color-btn;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ export default {
|
|||
left: 0;
|
||||
border-bottom: 2px solid @color-tab-border-bottom;
|
||||
border-left: 2px solid @color-tab-border-bottom;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: @color-theme_2;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -175,7 +175,6 @@ export default {
|
|||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
background-color: @color-theme_2;
|
||||
}
|
||||
|
||||
.list {
|
||||
|
|
@ -220,16 +219,17 @@ export default {
|
|||
|
||||
p {
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.thead {
|
||||
background-color: ~'@color-@{value}-theme_2';
|
||||
.noitem {
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -95,15 +95,15 @@ export default {
|
|||
margin-left: 0;
|
||||
button {
|
||||
border-top-left-radius: 3px;
|
||||
// border-bottom-left-radius: 3px;
|
||||
// border-bottom-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 2px solid @color-tab-border-top;
|
||||
border-top-right-radius: 3px;
|
||||
border-top-right-radius: 4px;
|
||||
button {
|
||||
border-top-right-radius: 3px;
|
||||
// border-bottom-right-radius: 3px;
|
||||
// border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
|
|
@ -122,7 +122,7 @@ export default {
|
|||
// border-left-color: @color-theme_2-hover;
|
||||
// border-right-color: @color-theme_2-hover;
|
||||
button {
|
||||
background-color: @color-theme_2-hover;
|
||||
background-color: @color-tab-btn-background-hover;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
|
|
@ -133,7 +133,7 @@ export default {
|
|||
}
|
||||
}
|
||||
&.active {
|
||||
border-bottom-color: @color-theme_2;
|
||||
border-bottom-color: @color-theme_2-background_2;
|
||||
border-top-color: @color-tab-border-bottom;
|
||||
border-left-color: @color-tab-border-bottom;
|
||||
border-right-color: @color-tab-border-bottom;
|
||||
|
|
@ -144,7 +144,7 @@ export default {
|
|||
width: 0;
|
||||
}
|
||||
button {
|
||||
background-color: @color-theme_2;
|
||||
background-color: @color-theme_2-background_2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -193,7 +193,7 @@ each(@themes, {
|
|||
// border-left-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
// border-right-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
button {
|
||||
background-color: ~'@{color-@{value}-theme_2-hover}';
|
||||
background-color: ~'@{color-@{value}-tab-btn-background-hover}';
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
|
|
@ -209,7 +209,7 @@ each(@themes, {
|
|||
border-left-color: ~'@{color-@{value}-tab-border-bottom}';
|
||||
border-right-color: ~'@{color-@{value}-tab-border-bottom}';
|
||||
button {
|
||||
background-color: ~'@{color-@{value}-theme_2}';
|
||||
background-color: ~'@{color-@{value}-theme_2-background_2}';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,11 @@ export default {
|
|||
name: '灰常美丽',
|
||||
class: 'grey',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: '月里嫦娥',
|
||||
class: 'midAutumn',
|
||||
},
|
||||
],
|
||||
version: {
|
||||
version,
|
||||
|
|
|
|||
|
|
@ -257,7 +257,7 @@ export default {
|
|||
|
||||
p {
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -270,6 +270,12 @@ each(@themes, {
|
|||
}
|
||||
}
|
||||
}
|
||||
.no-item {
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -254,7 +254,17 @@ export default {
|
|||
|
||||
p {
|
||||
font-size: 24px;
|
||||
color: #ccc;
|
||||
color: @color-theme_2-font-label;
|
||||
}
|
||||
}
|
||||
|
||||
each(@themes, {
|
||||
:global(#container.@{value}) {
|
||||
.noitem {
|
||||
p {
|
||||
color: ~'@{color-@{value}-theme_2-font-label}';
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -479,7 +479,9 @@ export default {
|
|||
|
||||
.theme {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
// padding: 0 15px;
|
||||
margin-bottom: -20px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
|
|
@ -489,6 +491,7 @@ export default {
|
|||
// color: @color-theme;
|
||||
margin-right: 30px;
|
||||
transition: color .3s ease;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
|
@ -509,6 +512,9 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
background-position: center;
|
||||
background-size: auto 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -517,6 +523,7 @@ export default {
|
|||
span {
|
||||
&:after {
|
||||
background-color: ~'@{color-@{value}-theme}';
|
||||
background-image: ~'@{color-@{value}-theme-bgimg}';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
<template lang="pug">
|
||||
div(:class="$style.container")
|
||||
div(:class="$style.header")
|
||||
material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
|
||||
material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
|
||||
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
|
||||
div(:class="$style.main")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(:class="$style.songListDetail" v-show="isVisibleListDetail")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(:class="$style.songListDetailContent" v-show="isVisibleListDetail")
|
||||
div(:class="$style.songListDetail")
|
||||
div(:class="$style.songListHeader")
|
||||
div(:class="$style.songListHeaderLeft")
|
||||
img(:src="selectListInfo.img")
|
||||
|
|
@ -17,8 +13,13 @@
|
|||
div(:class="$style.songListHeaderRight")
|
||||
material-btn(:class="$style.closeDetailButton" @click="hideListDetail") 返回
|
||||
material-song-list(v-model="selectdData" @action="handleSongListAction" :source="source" :page="listDetail.page" :limit="listDetail.limit" :total="listDetail.total" :list="listDetail.list")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div.scroll(:class="$style.songList" ref="dom_scrollContent" v-show="!isVisibleListDetail")
|
||||
transition(enter-active-class="animated-fast fadeIn" leave-active-class="animated-fast fadeOut")
|
||||
div(:class="$style.songListContent" v-show="!isVisibleListDetail")
|
||||
div(:class="$style.header")
|
||||
material-tag-list(:class="$style.tagList" :list="tagList" v-model="tagInfo")
|
||||
material-tab(:class="$style.tab" :list="sorts" item-key="id" item-name="name" v-model="sortId")
|
||||
material-select(:class="$style.select" :list="sourceInfo.sources" item-key="id" item-name="name" v-model="source")
|
||||
div.scroll(:class="$style.songList" ref="dom_scrollContent")
|
||||
ul
|
||||
li(:class="$style.item" v-for="(item, index) in listData.list" @click="handleItemClick(index)")
|
||||
div(:class="$style.left")
|
||||
|
|
@ -269,14 +270,18 @@ export default {
|
|||
width: 80px;
|
||||
}
|
||||
|
||||
.main {
|
||||
.songListContent, .songListDetailContent {
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.songListContent {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
// position: relative;
|
||||
}
|
||||
|
||||
.song-list-header {
|
||||
background-color: @color-theme_2;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
height: 60px;
|
||||
|
|
@ -340,7 +345,6 @@ export default {
|
|||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0 15px;
|
||||
background-color: #fff;
|
||||
ul {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
|
|
|||
Loading…
Reference in New Issue