admin
a511beaa34
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
61 lines
1.6 KiB
CSS
61 lines
1.6 KiB
CSS
/* ChatHeader 顶部栏样式（与 Dart chat_header.dart 对齐） */
|
||
|
||
/* 外层：等价于 Dart `Column(mainAxisSize: MainAxisSize.min)` — 无 padding/背景 */
|
||
.header {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
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-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);
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
border: 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.guestBannerIcon {
|
||
width: var(--icon-size-sm, 16px);
|
||
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;
|
||
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-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);
|
||
}
|
||
|
||
.menuIcon {
|
||
width: var(--icon-size-xl, 32px);
|
||
height: var(--icon-size-xl, 32px);
|
||
}
|