From ce0a9afc33aa14cca6b4b6e4d991f070e0ac3fd6 Mon Sep 17 00:00:00 2001 From: lyswhut Date: Tue, 24 Sep 2019 13:27:05 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=9A=AE=E8=82=A4tablist?= =?UTF-8?q?=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/assets/styles/variables.less | 30 +++++++++++++------- src/renderer/components/core/Player.vue | 4 +-- src/renderer/components/material/Tab.vue | 6 ++-- src/renderer/components/material/TagList.vue | 3 +- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/renderer/assets/styles/variables.less b/src/renderer/assets/styles/variables.less index d9ad645b..17cdd5fa 100644 --- a/src/renderer/assets/styles/variables.less +++ b/src/renderer/assets/styles/variables.less @@ -14,7 +14,8 @@ @color-theme-font-label: lighten(@color-theme, 35%); @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-active: fadeout(darken(@color-theme, 5%), 70%); @color-theme_2-font: darken(@color-theme_2, 70%); @@ -63,7 +64,8 @@ @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-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-active: fadeout(darken(@color-green-theme, 5%), 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-label: lighten(@color-yellow-theme, 35%); @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-active: fadeout(darken(@color-yellow-theme, 5%), 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-label: lighten(@color-orange-theme, 35%); @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-active: fadeout(darken(@color-orange-theme, 5%), 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-label: lighten(@color-blue-theme, 35%); @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-active: fadeout(darken(@color-blue-theme, 5%), 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-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-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-line: lighten(@color-red-theme, 35%); @@ -251,7 +257,8 @@ @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-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-active: fadeout(darken(@color-purple-theme, 5%), 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-label: lighten(@color-grey-theme, 35%); @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-active: fadeout(darken(@color-grey-theme, 5%), 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-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-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-active: fadeout(darken(@color-midAutumn-theme, 5%), 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-label: fadeout(darken(@color-dhHzw-theme, 20%), 20%); @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-active: fadeout(darken(@color-dhHzw-theme, 5%), 70%); @color-dhHzw-theme_2-font: darken(@color-dhHzw-theme_2, 80%); diff --git a/src/renderer/components/core/Player.vue b/src/renderer/components/core/Player.vue index 9df562ce..4ea0fdc0 100644 --- a/src/renderer/components/core/Player.vue +++ b/src/renderer/components/core/Player.vue @@ -495,7 +495,7 @@ export default { max-height: 100%; transition: @transition-theme; transition-property: border-color; - border: 2px solid @color-theme_2-background_2; + border: 2px solid @color-theme_2-background_1; } } .right { @@ -673,7 +673,7 @@ each(@themes, { .left { color: ~'@{color-@{value}-theme}'; img { - border-color: ~'@{color-@{value}-theme_2-background_2}'; + border-color: ~'@{color-@{value}-theme_2-background_1}'; } } .play-btn { diff --git a/src/renderer/components/material/Tab.vue b/src/renderer/components/material/Tab.vue index babb6471..866b6af8 100644 --- a/src/renderer/components/material/Tab.vue +++ b/src/renderer/components/material/Tab.vue @@ -133,7 +133,7 @@ export default { } } &.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-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_2; + background-color: @color-theme_2-background_1; } } } @@ -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_2}'; + background-color: ~'@{color-@{value}-theme_2-background_1}'; } } } diff --git a/src/renderer/components/material/TagList.vue b/src/renderer/components/material/TagList.vue index e13df3f6..c69d3775 100644 --- a/src/renderer/components/material/TagList.vue +++ b/src/renderer/components/material/TagList.vue @@ -144,7 +144,7 @@ export default { border-bottom: 2px solid @color-tab-border-bottom; border-right: 2px solid @color-tab-border-bottom; border-bottom-right-radius: 5px; - background-color: @color-theme_2; + background-color: @color-theme_2-background_2; overflow: hidden; opacity: 0; transition: .25s ease; @@ -212,6 +212,7 @@ each(@themes, { .list { border-bottom-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}'; li { // color: ~'@{color-@{value}-btn}';