admin
38d31572dd
- Updated padding and margin properties across various chat components to utilize responsive design tokens, ensuring better adaptability to different screen sizes. - Replaced fixed sizes with responsive variables for buttons, avatars, and bubbles to enhance UI flexibility. - Adjusted font sizes to use responsive tokens, improving text readability on various devices. - Standardized border-radius and other dimensions using CSS variables for a cohesive design language. - Enhanced dialog and screen components with safe area insets for better compatibility with modern devices.
63 lines
1.8 KiB
CSS
63 lines
1.8 KiB
CSS
/**
|
||
* 固定尺寸 token
|
||
*
|
||
*
|
||
* 注：这些是不应通过 Tailwind 缩放变化的硬尺寸（如按钮高度、对话框宽度）
|
||
*/
|
||
:root {
|
||
/* 按钮 */
|
||
--button-height: var(--responsive-control-height, 48px);
|
||
--button-height-lg: clamp(50px, 10.37vw, 56px);
|
||
|
||
/* Splash Facebook 登录按钮 */
|
||
--splash-facebook-button-height: 56px;
|
||
--splash-facebook-button-radius: 28px;
|
||
|
||
/* PWA 按钮 */
|
||
--pwa-button-height: 44px;
|
||
|
||
/* 对话框 */
|
||
--dialog-max-width: min(calc(100vw - 40px), 380px);
|
||
--pwa-install-dialog-max-width: min(calc(100vw - 40px), 380px);
|
||
--pwa-install-container-size: 64px;
|
||
|
||
/* 列表项 */
|
||
--item-height: 56px;
|
||
|
||
/* 消息气泡 */
|
||
--bubble-min-width: 60px;
|
||
--bubble-max-width: min(75vw, 280px);
|
||
--bubble-min-height: 36px;
|
||
|
||
/* 聊天媒体 */
|
||
--chat-media-max-width: min(64vw, 260px);
|
||
--chat-media-max-height: min(64vw, 260px);
|
||
|
||
/* ==================== Auth 页尺寸（与 Dart AppDimensions / Spacing 对齐） ==================== */
|
||
/* 输入框 / 主按钮高度（46px = Dart AppDimensions.height46） */
|
||
--auth-field-height: 46px;
|
||
|
||
/* 弹层内第三方登录按钮高度（40px） */
|
||
--auth-social-button-height: 40px;
|
||
|
||
/* 主按钮固定宽度（Dart AppDimensions.buttonWidth = 334） */
|
||
--auth-primary-button-width: min(100%, 334px);
|
||
|
||
/* Logo 高度（120px） */
|
||
--auth-logo-height: 120px;
|
||
|
||
/* Legal 圆形复选框 */
|
||
--auth-legal-checkbox-size: 16px;
|
||
--auth-legal-checkbox-inner-size: 10px;
|
||
|
||
/* 悬浮返回按钮（40×40 圆形） */
|
||
--back-button-size: var(--responsive-icon-button-size, 40px);
|
||
|
||
/* 底部弹层圆角（28px = Dart AppRadius.radius28） */
|
||
--auth-bottom-sheet-radius: 28px;
|
||
|
||
/* 弹层 drag handle（40×4 胶囊） */
|
||
--auth-drag-handle-width: 40px;
|
||
--auth-drag-handle-height: 4px;
|
||
}
|