674df49e24
Match the Dart lib/ui/sidebar/sidebar_screen.dart + profile_view.dart
exactly:
- White inner shell with 24px padding
- Back button row (arrow icon + "Back" text, no "Profile" header)
- Single "Other" section with one "Log out" row
- Drop profile card, Account/Data/Session sections, and Sign-in CTA
Match Flutter row visuals in the shared SettingsSection:
- Gray (#f5f5f5) rounded row pill on a white card
- 20px chevron, 1px rgba(61,49,74,0.5) divider
- Destructive color #ff6b6b, 14px/600 black section title
Add tokens: --color-settings-card-background, --color-settings-row-background,
--color-settings-divider, --color-chevron-icon, --color-destructive.
Wire the BlocConsumer listener equivalent: on currentUser transitioning to
null, dispatch ChatAuthStatusChanged + AuthReset and router.replace("/chat").
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
94 lines
3.0 KiB
CSS
94 lines
3.0 KiB
CSS
/**
|
||
* 颜色 token
|
||
* 原始 Dart: lib/design/colors.dart (light 主题)
|
||
*
|
||
* 使用 `@theme` 直接声明,Tailwind 4 自动生成 utility 类:
|
||
* - bg-accent / text-primary / border-error
|
||
*
|
||
* 对应组件用法(CSS Module / Tailwind class):
|
||
* - `var(--color-accent)` 或 `className="bg-accent"`
|
||
*/
|
||
@theme {
|
||
/* ==================== 文字颜色 ==================== */
|
||
--color-text-primary: #ffffff;
|
||
--color-text-secondary: #9e9e9e;
|
||
--color-text-hint: #757575;
|
||
--color-text-banner: #8c8b8b;
|
||
--color-text-light: #e0e0e0;
|
||
--color-text-foreground: #171717;
|
||
|
||
/* ==================== 品牌色 ==================== */
|
||
--color-accent: #f84d96;
|
||
--color-primary: #1677ff;
|
||
--color-success: #52c41a;
|
||
--color-error: #ff4d4f;
|
||
--color-warning: #ffa940;
|
||
|
||
--color-button-gradient-start: #ff67e0;
|
||
--color-button-gradient-end: #ff52a2;
|
||
|
||
/* ==================== 页面背景(body 用) ==================== */
|
||
--color-page-background: #ffffff;
|
||
|
||
/* ==================== 扩展令牌(迁移自 Flutter UI) ==================== */
|
||
/* 侧边栏/Profile 深色背景 */
|
||
--color-sidebar-background: #0d0b14;
|
||
--color-dark-background: #0d0b14;
|
||
--color-dark-gray: #2a2a2a;
|
||
--color-bubble-background: #1a1625;
|
||
--color-bubble-transparent: rgba(255, 255, 255, 0);
|
||
|
||
/* 聊天输入框 */
|
||
--color-chat-input-border: rgba(255, 255, 255, 0.1);
|
||
--color-input-box-shadow: rgba(0, 0, 0, 0.1);
|
||
--color-input-placeholder: #757575;
|
||
--color-pwa-button-text: #ffffff;
|
||
|
||
/* Facebook 蓝 */
|
||
--color-facebook-blue: #1877f2;
|
||
|
||
/* Dialog 通用 */
|
||
--color-dialog-background: #1f1a2e;
|
||
--color-dialog-border: rgba(255, 255, 255, 0.1);
|
||
|
||
/* 半透明 / 模糊 */
|
||
--color-blur-background: rgba(13, 11, 20, 0.85);
|
||
|
||
/* ==================== Auth 页专用(与 Dart auth_screen.dart 对齐) ==================== */
|
||
/* 浅色表面(Auth 页内容卡片 / 弹层背景) */
|
||
--color-auth-surface: #ffffff;
|
||
|
||
/* 弹层内第三方登录按钮边框 */
|
||
--color-auth-border: #d5d7db;
|
||
|
||
/* Auth 页输入框占位符 */
|
||
--color-auth-input-placeholder: #999999;
|
||
|
||
/* Auth 页文字主色(深色,区别于全局白字) */
|
||
--color-auth-text-primary: #333333;
|
||
--color-auth-text-secondary: #9e9e9e;
|
||
|
||
/* Auth 输入框阴影(accent #f759a8 10% 透明) */
|
||
--color-auth-input-shadow: rgba(247, 89, 168, 0.10);
|
||
|
||
/* Auth 主按钮阴影(#d00c41 20% 透明) */
|
||
--color-auth-primary-button-shadow: rgba(208, 12, 65, 0.20);
|
||
|
||
/* Auth 主按钮渐变(与 Dart primaryGradient 对齐) */
|
||
--color-auth-primary-gradient-start: #f96ade;
|
||
--color-auth-primary-gradient-end: #f657a0;
|
||
|
||
/* Legal 复选框选中点 */
|
||
--color-auth-legal-check: #f657a0;
|
||
|
||
/* 底部弹层 drag handle */
|
||
--color-auth-drag-handle: #3a3a3a;
|
||
|
||
/* Settings section (对齐 Flutter lib/ui/core/settings_section.dart) */
|
||
--color-settings-card-background: #ffffff;
|
||
--color-settings-row-background: #f5f5f5;
|
||
--color-settings-divider: #3d314a;
|
||
--color-chevron-icon: #000000;
|
||
--color-destructive: #ff6b6b;
|
||
}
|