From f33caa28af226ec6dad54de5b07edcab82fd58eb Mon Sep 17 00:00:00 2001 From: liuqh <528851597@qq.com> Date: Fri, 7 Oct 2022 19:18:36 +0800 Subject: [PATCH 1/3] fix: in dark mode, the background color of search results --- src/theme-default/components/Nav/index.module.scss | 1 - src/theme-default/components/Search/Suggestion.tsx | 6 ++++-- src/theme-default/components/Search/index.module.scss | 11 +++++++++++ src/theme-default/components/Search/index.tsx | 1 - 4 files changed, 15 insertions(+), 4 deletions(-) create mode 100644 src/theme-default/components/Search/index.module.scss diff --git a/src/theme-default/components/Nav/index.module.scss b/src/theme-default/components/Nav/index.module.scss index 192f3934..2c9552bd 100644 --- a/src/theme-default/components/Nav/index.module.scss +++ b/src/theme-default/components/Nav/index.module.scss @@ -30,7 +30,6 @@ padding-right: 32px; -webkit-backdrop-filter: saturate(50%) blur(8px); backdrop-filter: saturate(50%) blur(8px); - background: rgba(255, 255, 255, 0.7); } :global(.dark) .has-sidebar .content { diff --git a/src/theme-default/components/Search/Suggestion.tsx b/src/theme-default/components/Search/Suggestion.tsx index 6d74632c..a2c62aee 100644 --- a/src/theme-default/components/Search/Suggestion.tsx +++ b/src/theme-default/components/Search/Suggestion.tsx @@ -1,4 +1,5 @@ import type { MatchResultItem } from '../../logic/search'; +import style from './index.module.scss'; export function SuggestionContent(props: { suggestion: MatchResultItem; @@ -48,8 +49,9 @@ export function SuggestionContent(props: { border-1="" table-cell="" p="x-3 y-2" - hover="bg-[#f3f4f5]" - className={`border-right-none ${props.isCurrent ? 'bg-[#f3f4f5]' : ''}`} + className={`${style.suggestion} border-right-none ${ + props.isCurrent ? 'bg-[#f3f4f5]' : '' + }`} transition="bg duration-200" >
diff --git a/src/theme-default/components/Search/index.module.scss b/src/theme-default/components/Search/index.module.scss new file mode 100644 index 00000000..2a61c41d --- /dev/null +++ b/src/theme-default/components/Search/index.module.scss @@ -0,0 +1,11 @@ +.suggestion { + &:hover { + background-color: var(--island-c-white-mute); + } +} + +:global(.dark) .suggestion { + &:hover { + background-color: var(--island-c-gray-dark-3); + } +} diff --git a/src/theme-default/components/Search/index.tsx b/src/theme-default/components/Search/index.tsx index a39b9a64..c65bc9c8 100644 --- a/src/theme-default/components/Search/index.tsx +++ b/src/theme-default/components/Search/index.tsx @@ -141,7 +141,6 @@ export function Search( p="1.2" text="sm right" font="semibold" - className="bg-[#f5f5f5]" > {item.title}
From 6e3473d9f653afa6195b3ff629ae1d5d79e9698d Mon Sep 17 00:00:00 2001 From: liuqh <528851597@qq.com> Date: Fri, 7 Oct 2022 21:09:56 +0800 Subject: [PATCH 2/3] style: search --- .../components/Search/Suggestion.tsx | 9 +++++---- .../components/Search/index.module.scss | 11 ---------- src/theme-default/components/Search/index.tsx | 20 +++++++++++++------ 3 files changed, 19 insertions(+), 21 deletions(-) delete mode 100644 src/theme-default/components/Search/index.module.scss diff --git a/src/theme-default/components/Search/Suggestion.tsx b/src/theme-default/components/Search/Suggestion.tsx index a2c62aee..54078d64 100644 --- a/src/theme-default/components/Search/Suggestion.tsx +++ b/src/theme-default/components/Search/Suggestion.tsx @@ -1,5 +1,4 @@ import type { MatchResultItem } from '../../logic/search'; -import style from './index.module.scss'; export function SuggestionContent(props: { suggestion: MatchResultItem; @@ -46,11 +45,13 @@ export function SuggestionContent(props: { }; return (
diff --git a/src/theme-default/components/Search/index.module.scss b/src/theme-default/components/Search/index.module.scss deleted file mode 100644 index 2a61c41d..00000000 --- a/src/theme-default/components/Search/index.module.scss +++ /dev/null @@ -1,11 +0,0 @@ -.suggestion { - &:hover { - background-color: var(--island-c-white-mute); - } -} - -:global(.dark) .suggestion { - &:hover { - background-color: var(--island-c-gray-dark-3); - } -} diff --git a/src/theme-default/components/Search/index.tsx b/src/theme-default/components/Search/index.tsx index c65bc9c8..0a0fdea0 100644 --- a/src/theme-default/components/Search/index.tsx +++ b/src/theme-default/components/Search/index.tsx @@ -122,25 +122,33 @@ export function Search( z="60" pos="top-8" border-1="" + border-rd-1="" p="2" list="none" - bg="bg-default" - className="min-w-500px max-w-700px" + className="min-w-500px max-w-700px bg-white" > {/* Show the suggestions */} {suggestions.map((item, index) => ( -
  • +
  • {item.title}
    @@ -156,7 +164,7 @@ export function Search( {/* Show the not found info */} {showNotFound && (
  • -
    +
    No results found
    • From eab24b2f1d02c95f9da732882de6a2e2e6190dc6 Mon Sep 17 00:00:00 2001 From: liuqh <528851597@qq.com> Date: Sat, 8 Oct 2022 15:03:27 +0800 Subject: [PATCH 3/3] fix: not border-top --- src/theme-default/components/Nav/index.tsx | 2 +- src/theme-default/components/Search/Suggestion.tsx | 3 ++- src/theme-default/components/Search/index.tsx | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/theme-default/components/Nav/index.tsx b/src/theme-default/components/Nav/index.tsx index 5b3b9307..ccf49721 100644 --- a/src/theme-default/components/Nav/index.tsx +++ b/src/theme-default/components/Nav/index.tsx @@ -158,7 +158,7 @@ export function Nav() { relative="" p="l-8 sm:x-8" transition="background-color duration-500" - className="divider-bottom lg:border-b-transparent" + className="divider-bottom sm:border-b-transparent lg:border-b-transparent" nav-h="mobile lg:desktop" >