fix(composer): blend the message fade into the composer outline
Extend the composer fade down to the input card's top edge and layer it beneath the card, so scrolling messages fade straight into the composer outline. Remove the full-width composer-wrap background that produced a hard horizontal band, and soften the focus ring. Keep the dark theme fade on the canvas color. Release note: 优化聊天输入框上方的渐变过渡,消息自然淡出到输入框边缘,不再出现横向色带。
This commit is contained in:
@@ -364,7 +364,7 @@ describe('WorkspacePrimitives', () => {
|
||||
|
||||
it('wraps native client and compaction actions without overlapping composer metadata', () => {
|
||||
expect(stylesheet).toMatch(
|
||||
/\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*background:\s*var\(--surface-raised\);/u
|
||||
/\.composer-wrap\s*\{[^}]*var\(--space-2\);[^}]*\}/u
|
||||
)
|
||||
expect(stylesheet).toMatch(
|
||||
/\.composer-meta\s*\{[^}]*position:\s*relative;[^}]*min-height:\s*26px;[^}]*margin:\s*var\(--space-1\) 0 0;/u
|
||||
|
||||
@@ -7907,7 +7907,9 @@ button > svg {
|
||||
}
|
||||
|
||||
.composer-wrap {
|
||||
--composer-fade-color: var(--surface-raised);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
@@ -7915,16 +7917,21 @@ button > svg {
|
||||
var(--space-3)
|
||||
var(--chat-inline-padding)
|
||||
var(--space-2);
|
||||
background: var(--surface-raised);
|
||||
}
|
||||
|
||||
.composer-wrap::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
bottom: calc(100% - var(--space-3));
|
||||
left: 0;
|
||||
height: var(--space-4);
|
||||
background: linear-gradient(to bottom, transparent, var(--surface-raised));
|
||||
z-index: -1;
|
||||
height: var(--space-6);
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
color-mix(in srgb, var(--composer-fade-color) 72%, transparent) 55%,
|
||||
var(--composer-fade-color)
|
||||
);
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -8400,7 +8407,7 @@ button > svg {
|
||||
.composer:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow:
|
||||
0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent),
|
||||
0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
|
||||
var(--shadow-card);
|
||||
}
|
||||
|
||||
@@ -17772,6 +17779,10 @@ textarea.field-control {
|
||||
background: var(--surface-canvas);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .composer-wrap {
|
||||
--composer-fade-color: var(--surface-canvas);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] :where(
|
||||
.sidebar,
|
||||
.topbar,
|
||||
|
||||
Reference in New Issue
Block a user