fix(composer): let messages fade right up to the composer edge

Overlap the composer wrap with the message region by its top padding so messages scroll under the fade until the input outline, and paint the solid backdrop only below the composer's top edge. Drop the dark theme rule that still painted the whole wrap, keep the fade at 16px with a stronger curve, and lift the scroll-to-bottom button to preserve its gap.

Release note: 修复深色主题下聊天输入框上方残留的实色横条,消息可一直淡出到输入框边缘。
This commit is contained in:
mesalogo
2026-10-10 01:13:44 +08:00
parent d9dcb65d10
commit c7f09e1e53
2 changed files with 27 additions and 5 deletions
+1 -1
View File
@@ -163,7 +163,7 @@
- 页面顶部和底部内边距默认为 `32px`。 - 页面顶部和底部内边距默认为 `32px`。
- `master-detail` 的左栏建议为 `280px` 至 `360px`,右栏占剩余空间。分隔线和滚动容器属于壳层,不由内容卡片模拟。 - `master-detail` 的左栏建议为 `280px` 至 `360px`,右栏占剩余空间。分隔线和滚动容器属于壳层,不由内容卡片模拟。
- 聊天输入区可以粘附在 `reading` 壳层底部,但消息内容和输入区必须共享同一阅读宽度。 - 聊天输入区可以粘附在 `reading` 壳层底部,但消息内容和输入区必须共享同一阅读宽度。
- 输入区外层不铺整块背景、不画横向分隔线。输入框上方保留 `--space-6`(24px)的透明到页面底色渐变,渐变终点对齐输入框上缘,让滚动的消息在输入框轮廓前自然淡出;渐变位于输入框之下、不拦截鼠标事件,并随主题切换。输入框上缘只保留自身 1px 描边,不加向上的阴影,避免与渐变终点叠成粗边界。 - 输入区外层不铺整块背景、不画横向分隔线。输入区以上内边距的高度向上叠入消息区,输入框上方保留 `--space-4`(16px)的透明到页面底色渐变,渐变终点对齐输入框上缘,让滚动的消息一直延伸到输入框轮廓前再淡出;输入框上缘以下才使用实色底;渐变位于输入框之下、不拦截鼠标事件,并随主题切换。输入框上缘只保留自身 1px 描边,不加向上的阴影,避免与渐变终点叠成粗边界。
- 宽表格可在 `dashboard` 内容区内部横向滚动,不得撑宽整个应用窗口。 - 宽表格可在 `dashboard` 内容区内部横向滚动,不得撑宽整个应用窗口。
## 5. 信息层级 ## 5. 信息层级
+26 -4
View File
@@ -6483,7 +6483,7 @@ button > svg {
.chat-scroll-to-bottom { .chat-scroll-to-bottom {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
bottom: var(--space-3); bottom: var(--space-6);
left: 50%; left: 50%;
display: grid; display: grid;
width: 40px; width: 40px;
@@ -7913,10 +7913,18 @@ button > svg {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
min-width: 0; min-width: 0;
/* Overlap the message region by the top padding so messages run under the
fade right up to the composer outline instead of stopping at a solid band. */
margin-top: calc(-1 * var(--space-3));
padding: padding:
var(--space-3) var(--space-3)
var(--chat-inline-padding) var(--chat-inline-padding)
var(--space-2); var(--space-2);
pointer-events: none;
}
.composer-wrap > * {
pointer-events: auto;
} }
.composer-wrap::before { .composer-wrap::before {
@@ -7925,17 +7933,32 @@ button > svg {
bottom: calc(100% - var(--space-3)); bottom: calc(100% - var(--space-3));
left: 0; left: 0;
z-index: -1; z-index: -1;
height: var(--space-6); height: var(--space-4);
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
transparent, transparent,
color-mix(in srgb, var(--composer-fade-color) 72%, transparent) 55%, color-mix(in srgb, var(--composer-fade-color) 55%, transparent) 35%,
color-mix(in srgb, var(--composer-fade-color) 90%, transparent) 70%,
var(--composer-fade-color) var(--composer-fade-color)
); );
content: ""; content: "";
pointer-events: none; pointer-events: none;
} }
/* Below the composer the wrap stays opaque so nothing shows through its
bottom padding and metadata row. */
.composer-wrap::after {
position: absolute;
top: var(--space-3);
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: var(--composer-fade-color);
content: "";
pointer-events: none;
}
.composer { .composer {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@@ -17773,7 +17796,6 @@ textarea.field-control {
.settings-page, .settings-page,
.workspace, .workspace,
.chat, .chat,
.composer-wrap,
.workspace-panel-scroll .workspace-panel-scroll
) { ) {
background: var(--surface-canvas); background: var(--surface-canvas);