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:
@@ -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);
|
||||
|
||||
@@ -6,10 +6,12 @@
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: transparent; /* 容器透明,背景由 .row 提供 */
|
||||
padding: 0 var(--spacing-lg, 16px); /* Dart: horizontal AppSpacing.lg */
|
||||
background: #fff; /* Dart: Colors.white */
|
||||
border-radius: 32px; /* Dart: AppRadius.xxxl */
|
||||
}
|
||||
|
||||
/* textarea 本身(裸元素,背景透明让父容器透出) */
|
||||
/* textarea 本身(裸元素,背景透明让外层白底透出) */
|
||||
.textField {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
@@ -20,11 +22,14 @@
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-foreground, #000);
|
||||
color: var(--color-text-foreground, #000); /* Dart: Colors.black */
|
||||
caret-color: var(--color-accent, #f84d96); /* Dart: AppColors.accentColor */
|
||||
font-size: var(--font-size-base, 14px);
|
||||
line-height: 24px;
|
||||
resize: none;
|
||||
font-family: inherit;
|
||||
display: flex; /* 让 textarea 成为 flex 容器,让文字竖直居中 */
|
||||
align-items: center; /* 沿 cross axis 居中 = 文字竖直居中于 40px 高度内 */
|
||||
}
|
||||
|
||||
.textField::placeholder {
|
||||
|
||||
Reference in New Issue
Block a user