This is an automated email from the ASF dual-hosted git repository. robin0716 pushed a commit to branch test in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 02e933f11da6df33adb3debd8042db9fb060bff8 Author: shuai <[email protected]> AuthorDate: Thu Sep 26 11:15:52 2024 +0800 update: tag styles change --- ui/src/common/color.scss | 24 ++++++------------------ ui/src/components/CustomizeTheme/index.tsx | 24 ------------------------ ui/src/index.scss | 23 ++++++++--------------- 3 files changed, 14 insertions(+), 57 deletions(-) diff --git a/ui/src/common/color.scss b/ui/src/common/color.scss index 1a96b31d..16a7a297 100644 --- a/ui/src/common/color.scss +++ b/ui/src/common/color.scss @@ -110,31 +110,19 @@ /** tag **/ .badge-tag { - background: rgba($blue-900, 0.5); - color: $blue-300; - &:hover { - color: $blue-300; - background: $blue-900; - } - } - .badge-tag-required { background: $gray-800; - color:$gray-300; - border: 1px solid $gray-600; + color: $gray-300; &:hover { - color: $gray-300; - background: $gray-700; + background: $gray-600; } } + .badge-tag-reserved { - color: $orange-300; - background: rgba($orange-900, 0.5); - border: 1px solid $orange-900; + color: $orange-200; + background: $orange-800; &:hover { - color: $orange-300; - background: rgba($orange-900, 1); + background: $orange-700; } } - } diff --git a/ui/src/components/CustomizeTheme/index.tsx b/ui/src/components/CustomizeTheme/index.tsx index b142540b..46e3dd57 100644 --- a/ui/src/components/CustomizeTheme/index.tsx +++ b/ui/src/components/CustomizeTheme/index.tsx @@ -143,31 +143,7 @@ const Index: FC = () => { .link-primary:hover, .link-primary:focus { color: ${shadeColor(primaryColor, 0.8).hex()}!important; } - .badge-tag:not(.badge-tag-reserved, .badge-tag-required) { - background-color: rgba(${tintColor(primaryColor, 0.2) - .rgb() - .array() - .join(',')}, .5); - color: ${shadeColor(primaryColor, 0.6).hex()} - } - .badge-tag:not(.badge-tag-reserved, .badge-tag-required):hover { - background-color: ${tintColor(primaryColor, 0.2).hex()}; - } - [data-bs-theme="dark"] .badge-tag:not(.badge-tag-reserved):not(.badge-tag-required) { - background-color: rgba(${shadeColor(primaryColor, 0.2) - .rgb() - .array() - .join(',')}, .5) !important; - color: ${tintColor(primaryColor, 0.4).hex()} !important; - } - [data-bs-theme="dark"] .badge-tag:not(.badge-tag-reserved, .badge-tag-required):hover { - background-color: rgba(${tintColor( - primaryColor, - 0.4, - ).hex()}, 0.8) !important; - color: ${tintColor(primaryColor, 0.6).hex()} !important; - } `} </style> )} diff --git a/ui/src/index.scss b/ui/src/index.scss index 6d3ade05..6da6d336 100644 --- a/ui/src/index.scss +++ b/ui/src/index.scss @@ -87,33 +87,26 @@ img[src=""] { .badge-tag { display: inline-block; font-size: 14px; - background: rgba($blue-100, 0.5); + background: $gray-200; padding: 0 7px 1px; - color: $blue-700; + color: $gray-700; + font-weight: 400; border: 1px solid transparent; &:hover { - color: $blue-700; - background: $blue-100; + background: $gray-300; } } .badge-tag-required { - background: $gray-200; - color: $gray-700; - border: 1px solid $gray-400; - &:hover { - color: $gray-700; - background: $gray-300; - } + font-weight: 700; } .badge-tag-reserved { - background: rgba($orange-100, 0.5); + background: $orange-100; color: $orange-700; - border: 1px solid $orange-100; + border: 1px solid transparent; &:hover { - color: $orange-700; - background: rgba($orange-100, 1); + background: $orange-200; } }
