diff --git a/bi/base.css b/bi/base.css index 3243ffdc6..80e71fe44 100644 --- a/bi/base.css +++ b/bi/base.css @@ -1107,6 +1107,16 @@ li.CodeMirror-hint-active { .bi-collection-table-cell.first-col { border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-collection-table-cell { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-collection-table-cell.first-row { + border-top: 1px solid #24273e; +} +.bi-theme-dark .bi-collection-table-cell.first-col { + border-left: 1px solid #24273e; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ @@ -1169,6 +1179,33 @@ li.CodeMirror-hint-active { border-top: 1px solid #eaeaea; border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-table > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.top-left > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.top-right > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.bottom-left > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.bottom-right > div > div > table { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div > div > table > tbody > tr > td, +.bi-theme-dark .bi-table > div > div > div > table > tbody > tr > td, +.bi-theme-dark .bi-table > div > div > table > thead > tr > td, +.bi-theme-dark .bi-table > div > div > div > table > thead > tr > td { + border-top: 1px solid #24273e; + border-left: 1px solid #24273e; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ @@ -1190,6 +1227,16 @@ li.CodeMirror-hint-active { .bi-grid-table-cell.first-col { border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-grid-table-cell { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-grid-table-cell.first-row { + border-top: 1px solid #24273e; +} +.bi-theme-dark .bi-grid-table-cell.first-col { + border-left: 1px solid #24273e; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ diff --git a/bi/widget.css b/bi/widget.css index 0d9edf19b..30c4bdc6c 100644 --- a/bi/widget.css +++ b/bi/widget.css @@ -277,19 +277,19 @@ /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ -.bi-multi-select-check-pane .multi-select-continue-select { +.bi-multi-select-check-pane { background-color: #f4f4f4; } .bi-multi-select-check-pane .multi-select-check-selected { color: #009de3; text-decoration: underline; } +.bi-theme-dark .bi-multi-select-check-pane { + background-color: #191a2c; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ -.bi-display-list { - background-color: #f4f4f4; -} .bi-display-list .display-list-item { color: #808080; } diff --git a/docs/base.css b/docs/base.css index 3243ffdc6..80e71fe44 100644 --- a/docs/base.css +++ b/docs/base.css @@ -1107,6 +1107,16 @@ li.CodeMirror-hint-active { .bi-collection-table-cell.first-col { border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-collection-table-cell { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-collection-table-cell.first-row { + border-top: 1px solid #24273e; +} +.bi-theme-dark .bi-collection-table-cell.first-col { + border-left: 1px solid #24273e; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ @@ -1169,6 +1179,33 @@ li.CodeMirror-hint-active { border-top: 1px solid #eaeaea; border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-table > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.top-left > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.top-right > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.bottom-left > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.bottom-right > div > div > table { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div > div > table > tbody > tr > td, +.bi-theme-dark .bi-table > div > div > div > table > tbody > tr > td, +.bi-theme-dark .bi-table > div > div > table > thead > tr > td, +.bi-theme-dark .bi-table > div > div > div > table > thead > tr > td { + border-top: 1px solid #24273e; + border-left: 1px solid #24273e; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ @@ -1190,6 +1227,16 @@ li.CodeMirror-hint-active { .bi-grid-table-cell.first-col { border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-grid-table-cell { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-grid-table-cell.first-row { + border-top: 1px solid #24273e; +} +.bi-theme-dark .bi-grid-table-cell.first-col { + border-left: 1px solid #24273e; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ diff --git a/docs/widget.css b/docs/widget.css index 0d9edf19b..30c4bdc6c 100644 --- a/docs/widget.css +++ b/docs/widget.css @@ -277,19 +277,19 @@ /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ -.bi-multi-select-check-pane .multi-select-continue-select { +.bi-multi-select-check-pane { background-color: #f4f4f4; } .bi-multi-select-check-pane .multi-select-check-selected { color: #009de3; text-decoration: underline; } +.bi-theme-dark .bi-multi-select-check-pane { + background-color: #191a2c; +} /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ -.bi-display-list { - background-color: #f4f4f4; -} .bi-display-list .display-list-item { color: #808080; } diff --git a/src/css/base/table/table.collection.cell.css b/src/css/base/table/table.collection.cell.css index 66ea16fb1..5aa03eb6d 100644 --- a/src/css/base/table/table.collection.cell.css +++ b/src/css/base/table/table.collection.cell.css @@ -19,3 +19,13 @@ .bi-collection-table-cell.first-col { border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-collection-table-cell { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-collection-table-cell.first-row { + border-top: 1px solid #24273e; +} +.bi-theme-dark .bi-collection-table-cell.first-col { + border-left: 1px solid #24273e; +} diff --git a/src/css/base/table/table.css b/src/css/base/table/table.css index 41053d659..9e699b202 100644 --- a/src/css/base/table/table.css +++ b/src/css/base/table/table.css @@ -52,3 +52,30 @@ border-top: 1px solid #eaeaea; border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-table > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.top-left > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.top-right > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.bottom-left > div > div > table { + border-bottom: 1px solid #24273e; + border-right: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div.bottom-right > div > div > table { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-table > div > div > table > tbody > tr > td, +.bi-theme-dark .bi-table > div > div > div > table > tbody > tr > td, +.bi-theme-dark .bi-table > div > div > table > thead > tr > td, +.bi-theme-dark .bi-table > div > div > div > table > thead > tr > td { + border-top: 1px solid #24273e; + border-left: 1px solid #24273e; +} diff --git a/src/css/base/table/table.grid.cell.css b/src/css/base/table/table.grid.cell.css index bb6039308..9370e6ca8 100644 --- a/src/css/base/table/table.grid.cell.css +++ b/src/css/base/table/table.grid.cell.css @@ -19,3 +19,13 @@ .bi-grid-table-cell.first-col { border-left: 1px solid #eaeaea; } +.bi-theme-dark .bi-grid-table-cell { + border-right: 1px solid #24273e; + border-bottom: 1px solid #24273e; +} +.bi-theme-dark .bi-grid-table-cell.first-row { + border-top: 1px solid #24273e; +} +.bi-theme-dark .bi-grid-table-cell.first-col { + border-left: 1px solid #24273e; +} diff --git a/src/css/widget/multiselect/check/multiselect.check.pane.css b/src/css/widget/multiselect/check/multiselect.check.pane.css index ee98f4e77..8a408a9c1 100644 --- a/src/css/widget/multiselect/check/multiselect.check.pane.css +++ b/src/css/widget/multiselect/check/multiselect.check.pane.css @@ -1,10 +1,13 @@ /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ -.bi-multi-select-check-pane .multi-select-continue-select { +.bi-multi-select-check-pane { background-color: #f4f4f4; } .bi-multi-select-check-pane .multi-select-check-selected { color: #009de3; text-decoration: underline; } +.bi-theme-dark .bi-multi-select-check-pane { + background-color: #191a2c; +} diff --git a/src/css/widget/multiselect/check/multiselect.display.css b/src/css/widget/multiselect/check/multiselect.display.css index 26e6241c0..94a7a4135 100644 --- a/src/css/widget/multiselect/check/multiselect.display.css +++ b/src/css/widget/multiselect/check/multiselect.display.css @@ -1,9 +1,6 @@ /****添加计算宽度的--运算符直接需要space****/ /****** common color(常用颜色,可用于普遍场景) *****/ /**** custom color(自定义颜色,用于特定场景) ****/ -.bi-display-list { - background-color: #f4f4f4; -} .bi-display-list .display-list-item { color: #808080; } diff --git a/src/less/base/table/table.collection.cell.less b/src/less/base/table/table.collection.cell.less index da7feb906..34f69a009 100644 --- a/src/less/base/table/table.collection.cell.less +++ b/src/less/base/table/table.collection.cell.less @@ -11,3 +11,15 @@ border-left: 1px solid @border-color-line; } } +.bi-theme-dark{ + .bi-collection-table-cell{ + border-right: 1px solid @border-color-line-theme-dark; + border-bottom: 1px solid @border-color-line-theme-dark; + &.first-row { + border-top: 1px solid @border-color-line-theme-dark; + } + &.first-col { + border-left: 1px solid @border-color-line-theme-dark; + } + } +} \ No newline at end of file diff --git a/src/less/base/table/table.grid.cell.less b/src/less/base/table/table.grid.cell.less index 944d315d7..039e47aa6 100644 --- a/src/less/base/table/table.grid.cell.less +++ b/src/less/base/table/table.grid.cell.less @@ -11,3 +11,15 @@ border-left: 1px solid @border-color-line; } } +.bi-theme-dark{ + .bi-grid-table-cell{ + border-right: 1px solid @border-color-line-theme-dark; + border-bottom: 1px solid @border-color-line-theme-dark; + &.first-row { + border-top: 1px solid @border-color-line-theme-dark; + } + &.first-col { + border-left: 1px solid @border-color-line-theme-dark; + } + } +} \ No newline at end of file diff --git a/src/less/base/table/table.less b/src/less/base/table/table.less index 4d6a66013..2d981d91a 100644 --- a/src/less/base/table/table.less +++ b/src/less/base/table/table.less @@ -77,3 +77,35 @@ } } } + +.bi-theme-dark { + .bi-table { + & > div > div > table { + border-bottom: 1px solid @border-color-line-theme-dark; + border-right: 1px solid @border-color-line-theme-dark; + } + & > div.top-left > div > div > table { + border-bottom: 1px solid @border-color-line-theme-dark; + border-right: 1px solid @border-color-line-theme-dark; + } + & > div.top-right > div > div > table { + border-bottom: 1px solid @border-color-line-theme-dark; + border-right: 1px solid @border-color-line-theme-dark; + } + & > div.bottom-left > div > div > table { + border-bottom: 1px solid @border-color-line-theme-dark; + border-right: 1px solid @border-color-line-theme-dark; + } + & > div.bottom-right > div > div > table { + border-right: 1px solid @border-color-line-theme-dark; + border-bottom: 1px solid @border-color-line-theme-dark; + } + + & > div > div > table, & > div > div > div > table { + & > tbody > tr > td, & > thead > tr > td { + border-top: 1px solid @border-color-line-theme-dark; + border-left: 1px solid @border-color-line-theme-dark; + } + } + } +} diff --git a/src/less/lib/colors.less b/src/less/lib/colors.less index 15349103d..a5120f52f 100644 --- a/src/less/lib/colors.less +++ b/src/less/lib/colors.less @@ -6,7 +6,7 @@ //默认字体颜色 @color-bi-text-black: @font-color-normal; //深色主题默认字体颜色 -@color-bi-text-theme-dark: #b2b2b2; +@color-bi-text-theme-dark: @font-color-normal-theme-dark; //深灰色字体颜色 @color-bi-text-dark: @font-color-dark; //灰色字体颜色 @@ -28,11 +28,11 @@ //普通背景 @color-bi-background-normal: @background-color-normal; -@color-bi-background-normal-theme-dark: #191A2C; +@color-bi-background-normal-theme-dark: @background-color-normal-theme-dark; //默认背景 @color-bi-background-default: @background-color-default; //深色主题默认背景 -@color-bi-background-default-theme-dark: #202237; +@color-bi-background-default-theme-dark: @background-color-default-theme-dark; //黑色背景 @color-bi-background-black: @background-color-black; //深灰色背景 @@ -77,6 +77,8 @@ @color-bi-border-outline: @border-color-outline; //边框线颜色 @color-bi-border-line: @border-color-line; +//深色系边框线色 +@color-bi-border-line-theme-dark: @border-color-line-theme-dark; //成功边框色 @color-bi-border-success: @border-color-success; //失败边框色 diff --git a/src/less/lib/constant.less b/src/less/lib/constant.less index 4646d1f5c..5cbf49ff1 100644 --- a/src/less/lib/constant.less +++ b/src/less/lib/constant.less @@ -16,6 +16,7 @@ //font color @font-color-normal: #1a1a1a; +@font-color-normal-theme-dark: #b2b2b2; @font-color-disabled: #c4c6c6; @font-color-tips: #c4c6c6; @font-color-dark: #d4dadd; @@ -36,7 +37,9 @@ @background-color-black: #1a1a1a; @background-color-light: #eaeaea; @background-color-default: #ffffff; +@background-color-default-theme-dark: #202237; @background-color-normal: #f3f3f3; +@background-color-normal-theme-dark: #191A2C; @background-color-active: #f4f4f4; @background-color-highlight: #009de3; @background-color-dark: #d4dadd; @@ -61,6 +64,7 @@ @border-color-black: #1a1a1a; @border-color-normal: #d4dadd; @border-color-line: #eaeaea; +@border-color-line-theme-dark: #24273E; @border-color-main: #d3d9dc; @border-color-outline: #009de3; @border-color-highlight: #178cdf; diff --git a/src/less/widget/multiselect/check/multiselect.check.pane.less b/src/less/widget/multiselect/check/multiselect.check.pane.less index e17caac1f..004a5924a 100644 --- a/src/less/widget/multiselect/check/multiselect.check.pane.less +++ b/src/less/widget/multiselect/check/multiselect.check.pane.less @@ -1,12 +1,15 @@ @import "../../../bibase"; - -.bi-multi-select-check-pane{ - & .multi-select-continue-select{ - background-color: @color-bi-background-gray; - } - & .multi-select-check-selected{ +.bi-multi-select-check-pane { + background-color: @color-bi-background-gray; + & .multi-select-check-selected { color: @color-bi-text-highlight; text-decoration: underline; } +} + +.bi-theme-dark { + .bi-multi-select-check-pane { + background-color: @color-bi-background-normal-theme-dark; + } } \ No newline at end of file diff --git a/src/less/widget/multiselect/check/multiselect.display.less b/src/less/widget/multiselect/check/multiselect.display.less index 5ba0fbecc..884998652 100644 --- a/src/less/widget/multiselect/check/multiselect.display.less +++ b/src/less/widget/multiselect/check/multiselect.display.less @@ -1,8 +1,7 @@ @import "../../../bibase"; -.bi-display-list{ - background-color: @color-bi-background-gray; - & .display-list-item{ - color: @color-bi-text-gray; - } +.bi-display-list { + & .display-list-item { + color: @color-bi-text-gray; + } } \ No newline at end of file