Refactor chat component styles for responsiveness and consistency
- 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.
This commit is contained in:
@@ -40,6 +40,13 @@
|
||||
--responsive-control-height: clamp(44px, 8.889vw, 48px);
|
||||
--responsive-icon-button-size: clamp(38px, 8.148vw, 44px);
|
||||
|
||||
/* Chat 专用响应式尺寸 */
|
||||
--chat-inline-padding: clamp(14px, 3.704vw, 20px);
|
||||
--chat-bubble-max-width: min(75%, 280px);
|
||||
--chat-media-size: min(64vw, 240px);
|
||||
--chat-avatar-size: clamp(38px, 7.963vw, 43px);
|
||||
--chat-send-button-size: clamp(40px, 8.148vw, 44px);
|
||||
|
||||
/* Sidebar 专用响应式尺寸 */
|
||||
--sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
|
||||
--sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);
|
||||
|
||||
Reference in New Issue
Block a user