style(chat): align header and input styles with Dart implementation

Update chat-header and chat-input-text-field CSS to match the
Dart counterparts (chat_header.dart, chat_input_text_field.dart):
- Header: remove outer padding/background, use transparent base
- Guest banner: switch to --spacing-sm/md tokens
- Header row: add margin-left and symmetric padding
- Menu button: use 32px radius and #0d0b14 @ 0.7 background
- Input field: add white background, 32px radius, accent caret
  color, and flex centering for vertical text alignment
This commit is contained in:
2026-06-10 17:44:23 +08:00
parent 5f3a343bb1
commit a511beaa34
2 changed files with 22 additions and 13 deletions
+14 -10
View File
@@ -1,21 +1,22 @@
/* ChatHeader 顶部栏样式 */
/* ChatHeader 顶部栏样式(与 Dart chat_header.dart 对齐) */
/* 外层:等价于 Dart `Column(mainAxisSize: MainAxisSize.min)` — 无 padding/背景 */
.header {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
background: var(--color-header-background, rgba(0, 0, 0, 0.3));
padding: 0;
background: transparent;
}
/* 游客模式横幅(Dart: Container(color: accent, padding: vertical 8 / horizontal 12) */
.guestBanner {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-2, 8px);
padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
gap: var(--spacing-sm, 8px);
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
background: var(--color-accent, #f84d96);
color: #fff;
font-size: var(--font-size-sm, 12px);
@@ -30,21 +31,24 @@
height: var(--icon-size-sm, 16px);
}
/* 登录模式行容器(Dart: Container(margin-left 12, padding: vertical 8 / horizontal 12) */
.headerRow {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--spacing-4, 16px);
margin-left: var(--spacing-md, 12px);
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
}
/* 菜单按钮(Dart: Container(padding 8, bg #0d0b14 @ 70%, radius 32) */
.menuButton {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-2, 8px);
background: var(--color-dark-background, #111)cc;
border-radius: 9999px;
padding: var(--spacing-sm, 8px);
background: rgba(13, 11, 20, 0.7); /* AppColors.darkBackground #0d0b14 @ alpha 0.7 */
border-radius: 32px; /* AppSpacing.xxxl */
border: 0;
cursor: pointer;
color: var(--color-text-primary, #fff);