You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@answer.apache.org by sh...@apache.org on 2024/01/26 10:30:14 UTC
(incubator-answer) 01/01: fix: dark mode link color primary-300
This is an automated email from the ASF dual-hosted git repository.
shuai pushed a commit to branch feat/1.2.5/ui
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git
commit 56142716dcc165c2ba74b6a526031e79d1b1c802
Author: shuai <li...@sifou.com>
AuthorDate: Fri Jan 26 18:30:02 2024 +0800
fix: dark mode link color primary-300
---
ui/src/components/CustomizeTheme/index.tsx | 25 +++++++++++++++++++------
ui/src/components/Header/index.scss | 4 ++--
ui/src/components/TagSelector/index.scss | 2 --
3 files changed, 21 insertions(+), 10 deletions(-)
diff --git a/ui/src/components/CustomizeTheme/index.tsx b/ui/src/components/CustomizeTheme/index.tsx
index 5087c273..acf9cb5a 100644
--- a/ui/src/components/CustomizeTheme/index.tsx
+++ b/ui/src/components/CustomizeTheme/index.tsx
@@ -59,8 +59,18 @@ const Index: FC = () => {
.array()}
}
:root[data-bs-theme='dark'] {
- --bs-link-hover-color: ${shiftColor(primaryColor, -0.8).hex()};
- --bs-link-hover-color-rgb: ${shiftColor(primaryColor, -0.8)
+ --bs-link-color: ${tintColor(primaryColor, 0.6).hex()};
+ --bs-link-color-rgb: ${tintColor(primaryColor, 0.6)
+ .round()
+ .array()};
+ --bs-link-hover-color: ${shiftColor(
+ tintColor(primaryColor, 0.6),
+ -0.8,
+ ).hex()};
+ --bs-link-hover-color-rgb: ${shiftColor(
+ tintColor(primaryColor, 0.6),
+ -0.8,
+ )
.round()
.array()};
}
@@ -115,6 +125,12 @@ const Index: FC = () => {
0.5,
)}%27/%3e%3c/svg%3e");
}
+ .tag-selector-wrap--focus {
+ box-shadow: 0 0 0 0.25rem ${primaryColor
+ .fade(0.75)
+ .string()} !important;
+ border-color: ${tintColor(primaryColor, 0.5)} !important;
+ }
.dropdown-menu {
--bs-dropdown-link-active-bg: rgb(var(--bs-primary-rgb));
}
@@ -134,6 +150,7 @@ const Index: FC = () => {
.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()
@@ -148,10 +165,6 @@ const Index: FC = () => {
).hex()}, 0.8);
color: ${tintColor(primaryColor, 0.6).hex()};
}
- [data-bs-theme="dark"] .tag-selector-wrap--focus {
- border-color: ${tintColor(primaryColor, 0.5)} !important;
- box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), .4) !important;
- }
`}
</style>
)}
diff --git a/ui/src/components/Header/index.scss b/ui/src/components/Header/index.scss
index b3f6cc7b..1a02c332 100644
--- a/ui/src/components/Header/index.scss
+++ b/ui/src/components/Header/index.scss
@@ -22,7 +22,7 @@
#header {
transform: translate3d(0,0,0);
--bs-navbar-padding-y: 0.75rem;
- background: linear-gradient(180deg, rgb(var(--bs-primary-rgb)) 0%, rgba(var(--bs-primary-rgb), 0.95) 100%);
+ background: var(--bs-primary);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
.logo {
max-height: 2rem;
@@ -70,7 +70,7 @@
// style for colored navbar
&.theme-light {
- background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.95) 100%);
+ background: rgb(255, 255, 255);
.nav-link {
color: rgba(0, 0, 0, 0.65);
}
diff --git a/ui/src/components/TagSelector/index.scss b/ui/src/components/TagSelector/index.scss
index 73e87644..1a53ac42 100644
--- a/ui/src/components/TagSelector/index.scss
+++ b/ui/src/components/TagSelector/index.scss
@@ -66,7 +66,5 @@
.tag-selector-wrap--focus {
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
- box-shadow: 0 0 0 0.25rem rgba(84, 125, 248, 0.25) !important;
- border-color: rgb(170, 190, 252) !important;
outline: 0;
}