From 4b4c1c5b818c2d84226ac11c3def12c64fc0be24 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Fri, 24 Dec 2021 14:49:36 +0800 Subject: [PATCH] =?UTF-8?q?KERNEL-9882=20=E6=8E=A7=E4=BB=B6=E6=8F=90less?= =?UTF-8?q?=E5=8F=98=E9=87=8F1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/less/base/single/button/button.less | 4 +- src/less/base/single/button/switch.less | 12 +- src/less/base/single/input/checkbox.less | 24 +-- src/less/base/single/input/radio.less | 30 +-- src/less/lib/constant.less | 178 ++++++++++++------ src/less/lib/theme.less | 39 ++++ .../singleslider/slider/widget.slider.less | 8 +- 7 files changed, 202 insertions(+), 93 deletions(-) diff --git a/src/less/base/single/button/button.less b/src/less/base/single/button/button.less index 4f4b65d33..810b91058 100644 --- a/src/less/base/single/button/button.less +++ b/src/less/base/single/button/button.less @@ -7,8 +7,8 @@ body .bi-button, #body .bi-button { .border-radius(0px); } .border-radius(2px); - border: 1px solid @color-bi-border-highlight; - background-color: @color-bi-background-highlight; + border: 1px solid @color-bi-border-button; + background-color: @color-bi-background-button; .box-sizing(border-box); text-align: center; vertical-align: middle; diff --git a/src/less/base/single/button/switch.less b/src/less/base/single/button/switch.less index 7a65f2889..d08c780de 100644 --- a/src/less/base/single/button/switch.less +++ b/src/less/base/single/button/switch.less @@ -2,26 +2,26 @@ .bi-switch{ .border-radius(40px 40px 40px 40px); - background-color: @color-bi-background-dark-gray; + background-color: @color-bi-background-switch; &.active { - background-color: @color-bi-background-highlight; + background-color: @color-bi-background-active-switch; } & .circle-button{ .border-radius(9px 9px 9px 9px); } &.disabled { - background-color: @color-bi-background-disabled; + background-color: @color-bi-background-disabled-switch; } } .bi-theme-dark { .bi-switch{ - background-color: @color-bi-background-dark-gray-theme-dark; + background-color: @color-bi-background-switch-theme-dark; &.active { - background-color: @color-bi-background-highlight; + background-color: @color-bi-background-active-switch-theme-dark; } &.disabled { - background-color: @color-bi-background-disabled-theme-dark; + background-color: @color-bi-background-disabled-switch-theme-dark; } } } \ No newline at end of file diff --git a/src/less/base/single/input/checkbox.less b/src/less/base/single/input/checkbox.less index 96507bfd2..abdd7b761 100644 --- a/src/less/base/single/input/checkbox.less +++ b/src/less/base/single/input/checkbox.less @@ -3,7 +3,7 @@ .bi-checkbox { & .checkbox-content, &.checkbox-content { .border-radius(2px); - border: 1px solid @color-bi-border-dark-line; + border: 1px solid @color-bi-border-checkbox; box-sizing: border-box; &:after { position: absolute; @@ -20,12 +20,12 @@ content: ''; } &.hover, &:hover { - border-color: @color-bi-border-highlight; + border-color: @color-bi-border-hover-active-checkbox; } } &.active, &:active { & .checkbox-content, &.checkbox-content{ - border-color: @color-bi-border-highlight; + border-color: @color-bi-border-hover-active-checkbox; &:after { border-color: @color-bi-border-default; opacity: 1; @@ -34,15 +34,15 @@ } &.disabled { & .checkbox-content, &.checkbox-content { - background-color: @color-bi-background-disabled; - border-color: @color-bi-border-disabled; + background-color: @color-bi-background-disabled-checkbox; + border-color: @color-bi-border-disabled-checkbox; } & .checkbox-content:after, &.checkbox-content:after { opacity: 0; } &.active { & .checkbox-content, &.checkbox-content { - background-color: @color-bi-background-dark-gray; + background-color: @color-bi-background-disabled-active-checkbox; &:after { opacity: 1; } @@ -54,24 +54,24 @@ .bi-theme-dark { .bi-checkbox { & .checkbox-content, &.checkbox-content { - border-color: @color-bi-border-dark-line-theme-dark; + border-color: @color-bi-border-checkbox-theme-dark; &.hover, &:hover { - border-color: @color-bi-border-highlight; + border-color: @color-bi-border-hover-active-checkbox-theme-dark; } } &.active, &:active { & .checkbox-content, &.checkbox-content { - border-color: @color-bi-border-highlight; + border-color: @color-bi-border-hover-active-checkbox-theme-dark; } } &.disabled { & .checkbox-content, &.checkbox-content { - background-color: @color-bi-background-disabled-theme-dark; + background-color: @color-bi-background-disabled-checkbox-theme-dark; } &.active { & .checkbox-content, &.checkbox-content { - background-color: @color-bi-background-dark-gray-theme-dark; - border-color: @color-bi-border-disabled-theme-dark; + background-color: @color-bi-background-disabled-active-checkbox-theme-dark; + border-color: @color-bi-border-disabled-checkbox-theme-dark; } } } diff --git a/src/less/base/single/input/radio.less b/src/less/base/single/input/radio.less index 2e2cda48a..6fb3008c3 100644 --- a/src/less/base/single/input/radio.less +++ b/src/less/base/single/input/radio.less @@ -3,18 +3,18 @@ .bi-radio { & .radio-content, &.radio-content { .border-radius(8px); - border: 1px solid @color-bi-border-dark-line; + border: 1px solid @color-bi-border-radio; .box-sizing(border-box); &:after { content: ""; } &.hover, &:hover { - border-color: @color-bi-border-highlight; + border-color: @color-bi-border-hover-active-radio; } } &:active, &.active { & .radio-content, &.radio-content { - border-color: @color-bi-border-highlight; + border-color: @color-bi-border-hover-active-radio; &:after { width: 6px; height: 6px; @@ -23,24 +23,24 @@ top: 50%; left: 50%; .border-radius(3px); - background-color: @color-bi-background-default; + background-color: @color-bi-background-radio; .transform(translate(-50%, -50%)); } } } &.disabled { & .radio-content, &.radio-content { - background-color: @color-bi-background-disabled; - border-color: @color-bi-border-disabled; + background-color: @color-bi-background-disabled-radio; + border-color: @color-bi-border-disabled-radio; } & .radio-content:after, &.radio-content:after { background-color: transparent; } &.active { & .radio-content, &.radio-content { - background-color: @color-bi-background-dark-gray; + background-color: @color-bi-background-disabled-active-radio; &:after { - background-color: @color-bi-background-default; + background-color: @color-bi-background-radio; } } } @@ -50,27 +50,27 @@ .bi-theme-dark { .bi-radio { & .radio-content, &.radio-content { - border-color: @color-bi-border-dark-line-theme-dark; + border-color: @color-bi-border-radio-theme-dark; &.hover, &:hover { - border-color: @color-bi-border-highlight; + border-color: @color-bi-border-hover-active-radio-theme-dark; } } &.active, &:active { & .radio-content, &.radio-content { - border-color: @color-bi-border-highlight; + border-color:@color-bi-border-hover-active-radio-theme-dark; } } &.disabled { & .radio-content, &.radio-content { - background-color: @color-bi-background-disabled-theme-dark; + background-color: @color-bi-background-disabled-radio-theme-dark; &.hover, &:hover { - border-color: @color-bi-border-dark-line-theme-dark; + border-color: @color-bi-border-radio-theme-dark; } } &.active { & .radio-content, &.radio-content { - background-color: @color-bi-background-dark-gray-theme-dark; - border-color: @color-bi-border-disabled-theme-dark; + background-color: @color-bi-background-disabled-active-radio-theme-dark; + border-color: @color-bi-border-disabled-radio-theme-dark; } } } diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index ecea10f85..ed51d3895 100644 --- a/src/less/lib/constant.less +++ b/src/less/lib/constant.less @@ -20,11 +20,25 @@ @opacity-15: 0.15; @opacity-20: 0.2; -//色板 +// 色板 +// 品牌 +@color-brand-blue-100: #2C60DB; +@color-brand-blue-90: fade(@color-brand-blue-100, 90); +@color-brand-blue-80: fade(@color-brand-blue-100, 80); +@color-brand-blue-60: fade(@color-brand-blue-100, 60); +@color-brand-blue-50: fade(@color-brand-blue-100, 50); +@color-brand-blue-40: fade(@color-brand-blue-100, 40); +@color-brand-blue-30: fade(@color-brand-blue-100, 30); +@color-brand-blue-20: fade(@color-brand-blue-100, 20); +@color-brand-blue-10: fade(@color-brand-blue-100, 10); +@color-brand-blue-5: fade(@color-brand-blue-100, 5); + //green @color-bi-green-100: #13cd66; +@color-bi-green-90: fade(@color-bi-green-100, 90); @color-bi-green-80: fade(@color-bi-green-100, 80); @color-bi-green-60: fade(@color-bi-green-100, 60); +@color-bi-green-50: fade(@color-bi-green-100, 50); @color-bi-green-40: fade(@color-bi-green-100, 40); @color-bi-green-30: fade(@color-bi-green-100, 30); @color-bi-green-20: fade(@color-bi-green-100, 20); @@ -32,19 +46,23 @@ @color-bi-green-5: fade(@color-bi-green-100, 5); //cyan -@color-bi-green-100: #13cd66; -@color-bi-green-80: fade(@color-bi-green-100, 80); -@color-bi-green-60: fade(@color-bi-green-100, 60); -@color-bi-green-40: fade(@color-bi-green-100, 40); -@color-bi-green-30: fade(@color-bi-green-100, 30); -@color-bi-green-20: fade(@color-bi-green-100, 20); -@color-bi-green-10: fade(@color-bi-green-100, 10); -@color-bi-green-5: fade(@color-bi-green-100, 5); +@color-bi-sea-green-100: #3FB4AB; +@color-bi-sea-green-90: fade(@color-bi-sea-green-100, 90); +@color-bi-sea-green-80: fade(@color-bi-sea-green-100, 80); +@color-bi-sea-green-60: fade(@color-bi-sea-green-100, 60); +@color-bi-sea-green-50: fade(@color-bi-sea-green-100, 50); +@color-bi-sea-green-40: fade(@color-bi-sea-green-100, 40); +@color-bi-sea-green-30: fade(@color-bi-sea-green-100, 30); +@color-bi-sea-green-20: fade(@color-bi-sea-green-100, 20); +@color-bi-sea-green-10: fade(@color-bi-sea-green-100, 10); +@color-bi-sea-green-5: fade(@color-bi-sea-green-100, 5); //blue @color-bi-blue-100: #3685f2; +@color-bi-blue-90: fade(@color-bi-blue-100, 90); @color-bi-blue-80: fade(@color-bi-blue-100, 80); @color-bi-blue-60: fade(@color-bi-blue-100, 60); +@color-bi-blue-50: fade(@color-bi-blue-100, 50); @color-bi-blue-40: fade(@color-bi-blue-100, 40); @color-bi-blue-30: fade(@color-bi-blue-100, 30); @color-bi-blue-20: fade(@color-bi-blue-100, 20); @@ -52,19 +70,23 @@ @color-bi-blue-5: fade(@color-bi-blue-100, 5); //light-blue -@color-bi-light-blue-100: #eaf2fd; -@color-bi-light-blue-80: fade(@color-bi-light-blue-100, 80); -@color-bi-light-blue-60: fade(@color-bi-light-blue-100, 60); -@color-bi-light-blue-40: fade(@color-bi-light-blue-100, 40); -@color-bi-light-blue-30: fade(@color-bi-light-blue-100, 30); -@color-bi-light-blue-20: fade(@color-bi-light-blue-100, 20); -@color-bi-light-blue-10: fade(@color-bi-light-blue-100, 10); -@color-bi-light-blue-5: fade(@color-bi-light-blue-100, 5); +@color-bi-sky-blue-100: #eaf2fd; +@color-bi-sky-blue-90: fade(@color-bi-sky-blue-100, 90); +@color-bi-sky-blue-80: fade(@color-bi-sky-blue-100, 80); +@color-bi-sky-blue-60: fade(@color-bi-sky-blue-100, 60); +@color-bi-sky-blue-50: fade(@color-bi-sky-blue-100, 50); +@color-bi-sky-blue-40: fade(@color-bi-sky-blue-100, 40); +@color-bi-sky-blue-30: fade(@color-bi-sky-blue-100, 30); +@color-bi-sky-blue-20: fade(@color-bi-sky-blue-100, 20); +@color-bi-sky-blue-10: fade(@color-bi-sky-blue-100, 10); +@color-bi-sky-blue-5: fade(@color-bi-sky-blue-100, 5); // orange @color-bi-orange-100: #faaa39; +@color-bi-orange-90: fade(@color-bi-orange-100, 90); @color-bi-orange-80: fade(@color-bi-orange-100, 80); @color-bi-orange-60: fade(@color-bi-orange-100, 60); +@color-bi-orange-50: fade(@color-bi-orange-100, 50); @color-bi-orange-40: fade(@color-bi-orange-100, 40); @color-bi-orange-30: fade(@color-bi-orange-100, 30); @color-bi-orange-20: fade(@color-bi-orange-100, 20); @@ -73,8 +95,10 @@ // red @color-bi-red-100: #e65251; +@color-bi-red-90: fade(@color-bi-red-100, 90); @color-bi-red-80: fade(@color-bi-red-100, 80); @color-bi-red-60: fade(@color-bi-red-100, 60); +@color-bi-red-50: fade(@color-bi-red-100, 50); @color-bi-red-40: fade(@color-bi-red-100, 40); @color-bi-red-30: fade(@color-bi-red-100, 30); @color-bi-red-20: fade(@color-bi-red-100, 20); @@ -89,22 +113,68 @@ @color-bi-yellow-20: fade(@font-color-yellow-100, 20); @color-bi-yellow-5: fade(@font-color-yellow-100, 5); -//font color -@font-color-black: #232e40; +// black +@color-bi-black-100: #232e40; +@color-bi-black-90: fade(@color-bi-black-100, 90); +@color-bi-black-80: fade(@color-bi-black-100, 80); +@color-bi-black-60: fade(@color-bi-black-100, 60); +@color-bi-black-50: fade(@color-bi-black-100, 50); +@color-bi-black-40: fade(@color-bi-black-100, 40); +@color-bi-black-30: fade(@color-bi-black-100, 30); +@color-bi-black-20: fade(@color-bi-black-100, 20); +@color-bi-black-10: fade(@color-bi-black-100, 10); +@color-bi-black-5: fade(@color-bi-black-100, 5); + +// white +@color-bi-white-100: #FFFFFF; +@color-bi-white-90: fade(@color-bi-white-100, 90); +@color-bi-white-80: fade(@color-bi-white-100, 80); +@color-bi-white-60: fade(@color-bi-white-100, 60); +@color-bi-white-50: fade(@color-bi-white-100, 50); +@color-bi-white-40: fade(@color-bi-white-100, 40); +@color-bi-white-30: fade(@color-bi-white-100, 30); +@color-bi-white-20: fade(@color-bi-white-100, 20); +@color-bi-white-10: fade(@color-bi-white-100, 10); +@color-bi-white-5: fade(@color-bi-white-100, 5); + +@color-bi-black: @color-bi-black-100; +@color-bi-black-theme-dark: #F7F9FC; +@color-bi-state-gray: #2E3A4D; +@color-bi-state-gray-theme-dark: #D6E0EC; +@color-bi-light-state-gray: #647185; +@color-bi-light-state-gray-theme-dark: #AFB7C6; +@color-bi-dim-gray: #9EA6B2; +@color-bi-dim-gray-theme-dark: #878d9f; +@color-bi-gray: #C4C9D1; +@color-bi-gray-theme-dark: #6B7084; +@color-bi-dark-gray: #D0D4DA; +@color-bi-dark-gray-theme-dark: #606479; +@color-bi-sliver: #E7E8EB; +@color-bi-sliver-theme-dark: #363E55; +@color-bi-light-gray: #647185; +@color-bi-light-gray-theme-dark: #afb7c6; +@color-bi-gainsboro: #F5F6F9; +@color-bi-gainsboro-theme-dark: #191F35; +@color-bi-white: @color-bi-white-100; +@color-bi-white-theme-dark: #20263B; + + + //font color +@font-color-black: @color-bi-black; @font-color-normal: #3d4d66; @font-color-normal-theme-dark: #d6e0dc; -@font-color-light-gray: #647185; -@font-color-light-gray-theme-dark: #afb7c6; -@font-color-disabled: #9ea6b2; -@font-color-disabled-theme-dark: #878d9f; -@font-color-tips: #9ea6b2; -@font-color-tips-theme-dark: #6b7084; -@font-color-light-disabled: #d0d4da; -@font-color-light-disabled-theme-dark: #606479; +@font-color-light-gray: @color-bi-light-gray; +@font-color-light-gray-theme-dark: @color-bi-light-gray-theme-dark; +@font-color-disabled: @color-bi-dim-gray; +@font-color-disabled-theme-dark: @color-bi-dim-gray-theme-dark; +@font-color-tips: @color-bi-dim-gray; +@font-color-tips-theme-dark: @color-bi-gray-theme-dark; +@font-color-light-disabled: @color-bi-dark-gray; +@font-color-light-disabled-theme-dark: @color-bi-dark-gray-theme-dark; @font-color-gray: #999999; -@font-color-white: #ffffff; -@font-color-white-theme-dark: #20263b; -@font-color-light-highlight: @color-bi-light-blue-100; +@font-color-white: @color-bi-white; +@font-color-white-theme-dark: @color-bi-white-theme-dark; +@font-color-light-highlight: @color-bi-sky-blue-100; @font-color-medium-highlight: #d7e7fc; @font-color-highlight: @color-bi-blue-100; @font-color-blue: #23beef; @@ -115,15 +185,15 @@ @font-color-yellow: @font-color-yellow-100; //background color -@background-color-black: #232E40; -@background-color-black-theme-dark: #606479; +@background-color-black: @color-bi-black; +@background-color-black-theme-dark: @color-bi-dark-gray-theme-dark; @background-color-light-black: #3d4d66; @background-color-light-black-theme-dark: #d6e0dc; -@background-color-default: #ffffff; -@background-color-default-theme-dark: #20263b; +@background-color-default: @color-bi-white; +@background-color-default-theme-dark: @color-bi-white-theme-dark; @background-color-normal: #f7f8fa; @background-color-normal-theme-dark: #191b2b; -@background-color-light-highlight: @color-bi-light-blue-100; +@background-color-light-highlight: @color-bi-sky-blue-100; @background-color-medium-highlight: #d7e7fc; @background-color-highlight: @color-bi-blue-100; @background-color-blue: #23beef; @@ -132,13 +202,13 @@ @background-color-light-gray: #f2f4f7; @background-color-light-gray-theme-dark: #292f45; @background-color-medium-gray: #e8eaed; -@background-color-medium-gray-theme-dark: #363e55; -@background-color-dark-gray: #d0d4da; -@background-color-dark-gray-theme-dark: #606479; +@background-color-medium-gray-theme-dark: @color-bi-sliver-theme-dark; +@background-color-dark-gray: @color-bi-dark-gray; +@background-color-dark-gray-theme-dark: @color-bi-dark-gray-theme-dark; @background-color-disabled: #f2f4f7; @background-color-disabled-theme-dark: #292f45; -@background-color-light-disabled: #9ea6b2; -@background-color-light-disabled-theme-dark: #878d9f; +@background-color-light-disabled: @color-bi-dim-gray; +@background-color-light-disabled-theme-dark: @color-bi-dim-gray-theme-dark; @background-color-yellow: @font-color-yellow-100; @background-color-negative: @color-bi-red-100; @@ -149,33 +219,33 @@ @background-color-dark-success: @color-bi-green-100; @background-color-light-success: #e1f4e7; -@background-color-normal-success: #647185; +@background-color-normal-success: @color-bi-light-gray; //border color -@border-color-default: #ffffff; -@border-color-black: #232e40; +@border-color-default: @color-bi-white; +@border-color-black: @color-bi-black; @border-color-line: #e8eaed; -@border-color-line-theme-dark: #363e55; +@border-color-line-theme-dark: @color-bi-sliver-theme-dark; @border-color-light-line: #f2f4f7; @border-color-light-line-theme-dark: #292f45; -@border-color-dark-gray-line: #d0d4da; -@border-color-dark-gray-line-theme-dark: #606479; -@border-color-dark-line: #9ea6b2; -@border-color-dark-line-theme-dark: #878d9f; +@border-color-dark-gray-line: @color-bi-dark-gray; +@border-color-dark-gray-line-theme-dark: @color-bi-dark-gray-theme-dark; +@border-color-dark-line: @color-bi-dim-gray; +@border-color-dark-line-theme-dark: @color-bi-dim-gray-theme-dark; @border-color-highlight: @color-bi-blue-100; @border-color-success: @color-bi-green-100; @border-color-warning: #fbb03b; @border-color-negative: @color-bi-red-100; @border-color-light-negative: #f4cbcb; -@border-color-normal-success: #647185; +@border-color-normal-success: @color-bi-light-gray; //split color @border-color-disabled: #e8eaed; -@border-color-disabled-theme-dark: #363e55; +@border-color-disabled-theme-dark: @color-bi-sliver-theme-dark; //scroll color -@scroll-color: #232e40; -@scroll-color-theme-dark: #ffffff; -@scroll-thumb-color: #232e40; -@scroll-thumb-color-theme-dark: #232e40; +@scroll-color: @color-bi-black; +@scroll-color-theme-dark: @color-bi-white; +@scroll-thumb-color: @color-bi-black; +@scroll-thumb-color-theme-dark: @color-bi-black; diff --git a/src/less/lib/theme.less b/src/less/lib/theme.less index 412fef77a..8019b219a 100644 --- a/src/less/lib/theme.less +++ b/src/less/lib/theme.less @@ -50,3 +50,42 @@ @color-bi-text-card: @color-bi-text-normal; @color-bi-text-card-theme-dark: @color-bi-text-theme-dark; +// 控件 +// 按钮 +@color-bi-border-button: @color-bi-border-highlight; +@color-bi-background-button: @color-bi-background-highlight; +// 单选按钮 +@color-bi-border-radio: @color-bi-border-dark-line; +@color-bi-border-radio-theme-dark: @color-bi-border-dark-line-theme-dark; +@color-bi-border-disabled-radio: @color-bi-border-disabled; +@color-bi-border-disabled-radio-theme-dark: @color-bi-border-disabled-theme-dark; +@color-bi-border-hover-active-radio: @color-bi-border-highlight; +@color-bi-border-hover-active-radio-theme-dark: @color-bi-border-highlight; +@color-bi-background-radio: @color-bi-background-default; +@color-bi-background-disabled-radio: @color-bi-background-disabled; +@color-bi-background-disabled-radio-theme-dark: @color-bi-background-disabled-theme-dark; +@color-bi-background-disabled-active-radio: @color-bi-background-dark-gray; +@color-bi-background-disabled-active-radio-theme-dark: @color-bi-background-dark-gray-theme-dark; +// 复选按钮 +@color-bi-border-checkbox: @color-bi-border-dark-line; +@color-bi-border-checkbox-theme-dark: @color-bi-border-dark-line-theme-dark; +@color-bi-border-disabled-checkbox: @color-bi-border-disabled; +@color-bi-border-disabled-checkbox-theme-dark: @color-bi-border-disabled-theme-dark; +@color-bi-border-hover-active-checkbox: @color-bi-border-highlight; +@color-bi-border-hover-active-checkbox-theme-dark: @color-bi-border-highlight; +@color-bi-background-disabled-checkbox: @color-bi-background-disabled; +@color-bi-background-disabled-checkbox-theme-dark: @color-bi-background-disabled-theme-dark; +@color-bi-background-disabled-active-checkbox: @color-bi-background-dark-gray; +@color-bi-background-disabled-active-checkbox-theme-dark: @color-bi-background-dark-gray-theme-dark; +// 开关 +@color-bi-background-switch: @color-bi-background-dark-gray; +@color-bi-background-switch-theme-dark: @color-bi-background-dark-gray-theme-dark; +@color-bi-background-active-switch: @color-bi-background-highlight; +@color-bi-background-active-switch-theme-dark: @color-bi-background-highlight; +@color-bi-background-disabled-switch: @color-bi-background-disabled; +@color-bi-background-disabled-switch-theme-dark: @color-bi-background-disabled-theme-dark; +// 滑块 +@color-bi-background-slider-button: @color-bi-background-default; +@color-bi-background-hover-slider-button: @color-bi-background-normal; +@color-bi-border-disabled-slider-button: @color-bi-border-disabled; +@color-bi-background-hover-disabled-slider-button: @color-bi-background-normal; diff --git a/src/less/widget/singleslider/slider/widget.slider.less b/src/less/widget/singleslider/slider/widget.slider.less index 745994c4c..a0f8559ca 100644 --- a/src/less/widget/singleslider/slider/widget.slider.less +++ b/src/less/widget/singleslider/slider/widget.slider.less @@ -6,23 +6,23 @@ border-width: 2px; border-style: solid; .border-radius(8px); - background-color: @color-bi-background-default; + background-color: @color-bi-background-slider-button; height: 12px; width: 12px; top: 6px; left: -8px; &:hover, &.hover { .border-radius(10px); - background-color: @color-bi-background-normal; + background-color: @color-bi-background-hover-slider-button; width: 16px; height: 16px; top: 4px; left: -10px; } &.disabled { - border-color: @color-bi-border-disabled; + border-color: @color-bi-border-disabled-slider-button; &:hover, &.hover { - background-color: @color-bi-background-normal; + background-color: @color-bi-background-hover-disabled-slider-button; width: 12px; height: 12px; top: 6px;