From 4fbfd96a683a972de845153b53cc8f9b96f18dc3 Mon Sep 17 00:00:00 2001 From: GCWing Date: Mon, 30 Mar 2026 17:48:24 +0800 Subject: [PATCH] web-ui: refine search dialog and flow chat markdown code styles - NavSearchDialog: layered shadows, subtle border ring, entrance motion - FlowTextBlock: transparent inline code; tighter code toolbar and copy button - ModelThinkingDisplay: match inline code and code block chrome with flow chat --- .../components/NavPanel/NavSearchDialog.scss | 18 ++-- .../flow_chat/components/FlowTextBlock.scss | 88 +++++++++++++++++++ .../tool-cards/ModelThinkingDisplay.scss | 36 +++++++- 3 files changed, 133 insertions(+), 9 deletions(-) diff --git a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss index 5d44e447..20a58790 100644 --- a/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss +++ b/src/web-ui/src/app/components/NavPanel/NavSearchDialog.scss @@ -17,11 +17,14 @@ width: 520px; max-width: calc(100vw - 32px); background: var(--color-bg-scene); - border-radius: $size-radius-base; + border-radius: calc(#{$size-radius-base} + 2px); border: 1px solid var(--border-subtle); box-shadow: - 0 1px 2px rgba(15, 23, 42, 0.05), - 0 12px 32px -10px rgba(15, 23, 42, 0.14); + 0 0 0 1px color-mix(in srgb, var(--color-text-primary) 4%, transparent), + 0 2px 4px rgba(15, 23, 42, 0.04), + 0 8px 24px rgba(15, 23, 42, 0.08), + 0 24px 56px -12px rgba(15, 23, 42, 0.22), + 0 48px 80px -24px rgba(15, 23, 42, 0.12); overflow: hidden; display: flex; flex-direction: column; @@ -35,14 +38,17 @@ :root[data-theme-type='dark'] .bitfun-nav-search-dialog__card { box-shadow: - 0 1px 0 color-mix(in srgb, #fff 4%, transparent), - 0 14px 40px -12px rgba(0, 0, 0, 0.55); + 0 0 0 1px color-mix(in srgb, #fff 6%, transparent), + 0 1px 0 color-mix(in srgb, #fff 5%, transparent), + 0 4px 12px rgba(0, 0, 0, 0.35), + 0 20px 48px -8px rgba(0, 0, 0, 0.65), + 0 40px 72px -20px rgba(0, 0, 0, 0.45); } @keyframes bitfun-nav-search-card-in { from { opacity: 0; - transform: translateY(-7px) scale(0.988); + transform: translateY(-12px) scale(0.982); } to { opacity: 1; diff --git a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss b/src/web-ui/src/flow_chat/components/FlowTextBlock.scss index db778b27..4d8e99fe 100644 --- a/src/web-ui/src/flow_chat/components/FlowTextBlock.scss +++ b/src/web-ui/src/flow_chat/components/FlowTextBlock.scss @@ -19,6 +19,55 @@ font-size: inherit; } + /* Inline `code`: no chip background in chat (code blocks unchanged). */ + .markdown-renderer .inline-code { + background: transparent; + border: none; + padding: 0.1em 0.2em; + } + + .markdown-renderer .inline-code:hover { + background: transparent; + border: none; + } + + /* Tighter code fence toolbar than global Markdown.scss (flow chat only). */ + .markdown-renderer .code-block-toolbar { + min-height: 1.625rem; + padding: 0.2rem 0.45rem 0.2rem 0.6rem; + } + + .markdown-renderer .code-block-lang { + font-size: 0.625rem; + line-height: 1.2; + } + + .markdown-renderer .code-block-wrapper .copy-button { + width: 26px; + height: 26px; + padding: 0.2rem; + transition: + transform 0.15s ease, + opacity 0.2s ease; + } + + .markdown-renderer .code-block-wrapper .copy-button:hover { + background: transparent; + color: var(--color-text-muted); + transform: scale(1.08); + } + + .markdown-renderer .code-block-wrapper .copy-button:active { + background: transparent; + color: var(--color-text-muted); + transform: scale(1.02); + } + + .markdown-renderer .code-block-wrapper .copy-button.copy-success:hover { + color: #22c55e; + transform: scale(1.08); + } + .text-content { color: var(--color-text-primary); line-height: 1.6; @@ -51,6 +100,45 @@ } } +/* Light theme: copy button icon color (scoped to flow chat). */ +:root[data-theme='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button:hover, +:root[data-theme-type='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button:hover, +[data-theme-type='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button:hover, +.light .flow-text-block .markdown-renderer .code-block-wrapper .copy-button:hover { + color: rgba(0, 0, 0, 0.5); +} + +:root[data-theme='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button.copy-success:hover, +:root[data-theme-type='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button.copy-success:hover, +[data-theme-type='light'] .flow-text-block .markdown-renderer .code-block-wrapper .copy-button.copy-success:hover, +.light .flow-text-block .markdown-renderer .code-block-wrapper .copy-button.copy-success:hover { + color: #1a7f37; +} + +:root[data-theme='light'] .flow-text-block .markdown-renderer .inline-code, +:root[data-theme-type='light'] .flow-text-block .markdown-renderer .inline-code, +[data-theme-type='light'] .flow-text-block .markdown-renderer .inline-code, +.light .flow-text-block .markdown-renderer .inline-code { + background: transparent; + border: none; +} + +:root[data-theme='light'] .flow-text-block .markdown-renderer .inline-code:hover, +:root[data-theme-type='light'] .flow-text-block .markdown-renderer .inline-code:hover, +[data-theme-type='light'] .flow-text-block .markdown-renderer .inline-code:hover, +.light .flow-text-block .markdown-renderer .inline-code:hover { + background: transparent; + border: none; +} + +@media (prefers-color-scheme: dark) { + .flow-text-block .markdown-renderer .inline-code, + .flow-text-block .markdown-renderer .inline-code:hover { + background: transparent; + border: none; + } +} + /* Ink seep pulse animation */ @keyframes ink-fade-pulse { 0%, 100% { diff --git a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss index dbd0f203..d5819e4b 100644 --- a/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss +++ b/src/web-ui/src/flow_chat/tool-cards/ModelThinkingDisplay.scss @@ -286,9 +286,10 @@ .inline-code { font-family: var(--tool-card-font-mono); font-size: 0.85em; - padding: 0.1em 0.35em; - border-radius: 3px; - background: color-mix(in srgb, var(--tool-card-text-muted) 12%, transparent); + padding: 0.1em 0.2em; + border-radius: 0; + background: transparent; + border: none; color: var(--tool-card-text-secondary); } @@ -299,6 +300,16 @@ background: color-mix(in srgb, var(--tool-card-text-muted) 8%, transparent); } + .code-block-toolbar { + min-height: 1.5rem; + padding: 0.15rem 0.4rem 0.15rem 0.5rem; + } + + .code-block-lang { + font-size: 0.6rem; + line-height: 1.15; + } + .code-block-wrapper pre[class*='language-'], .code-block-wrapper pre[style] { font-size: 11px !important; @@ -309,6 +320,25 @@ .code-block-wrapper .copy-button { transform: scale(0.85); transform-origin: top right; + transition: + transform 0.15s ease, + opacity 0.2s ease; + } + + .code-block-wrapper .copy-button:hover { + background: transparent !important; + color: var(--color-text-muted); + transform: scale(0.93); + } + + .code-block-wrapper .copy-button:active { + background: transparent !important; + transform: scale(0.88); + } + + .code-block-wrapper .copy-button.copy-success:hover { + color: #22c55e; + transform: scale(0.93); } .table-wrapper {