banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor chat component styles for responsiveness and consistency

Browse Source 
- 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:
chenhang
2026-07-02 18:22:56 +08:00
parent 34c8e2db4e
commit 38d31572dd
43 changed files with 217 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/_components/back-button.module.css
+4 -4
View File
@@ -16,8 +16,8 @@
.floating {
position: absolute;
top: var(--spacing-xl);
left: var(--spacing-xl);
top: calc(var(--spacing-xl, 20px) + var(--app-safe-top, 0px));
left: calc(var(--spacing-xl, 20px) + var(--app-safe-left, 0px));
z-index: 2;
width: var(--back-button-size);
height: var(--back-button-size);
@@ -27,8 +27,8 @@
}
.soft {
width: 42px;
height: 42px;
width: var(--responsive-icon-button-size, 42px);
height: var(--responsive-icon-button-size, 42px);
color: #21191d;
border: 1px solid rgba(25, 19, 22, 0.08);
background: rgba(255, 255, 255, 0.82);
src/app/_components/core/bottom-sheet.module.css
+2 -2
View File
@@ -15,12 +15,12 @@
.panel {
position: relative;
width: 100%;
max-width: 500px;
max-width: var(--app-max-width, 540px);
background: var(--color-auth-surface);
color: var(--color-auth-text-primary);
border-radius: var(--radius-bottom-sheet) var(--radius-bottom-sheet) 0 0;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: var(--app-safe-bottom, env(safe-area-inset-bottom));
animation: slideUp 0.18s ease-out;
}
src/app/_components/core/bottom-sheet.tsx
+1 -1
View File
@@ -6,7 +6,7 @@
*
* 设计目标：
* - portal 渲染到 body
* - 固定底部、最大宽度 500px、顶部圆角 `--radius-bottom-sheet`
* - 固定底部、最大宽度跟随 `--app-max-width`、顶部圆角 `--radius-bottom-sheet`
* - ESC 关闭 / 点击 scrim 关闭 / 打开时锁定 body 滚动
* - 简单 slide-up 动画（与原 Dart 行为接近）
* - 调用方只关心内容布局
src/app/_components/core/dialog.module.css
+7 -2
View File
@@ -5,15 +5,20 @@
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
padding:
calc(var(--spacing-md, 12px) + var(--app-safe-top, 0px))
calc(var(--spacing-md, 12px) + var(--app-safe-right, 0px))
calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-md, 12px) + var(--app-safe-left, 0px));
}
.panel {
position: relative;
width: 100%;
max-width: var(--dialog-max-width, 380px);
background: var(--color-dialog-background);
border: var(--border-light) solid var(--color-dialog-border);
border-radius: var(--radius-xl);
border-radius: var(--responsive-card-radius, var(--radius-xl));
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
color: var(--color-text-primary);
overflow: hidden;
src/app/auth/components/auth-background.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
/**
* Auth 背景图片
*
* 与 splash-background.tsx 同款模式（next/image fill + 500px sizes）。
* 与 splash-background.tsx 同款模式（next/image fill + 540px sizes）。
* 资源: /public/images/auth/bg-login.png
*/
import Image from "next/image";
@@ -15,7 +15,7 @@ export function AuthBackground() {
alt=""
fill
priority
sizes="(max-width: 500px) 100vw, 500px"
sizes="(max-width: 540px) 100vw, 540px"
className={styles.image}
/>
</div>
src/app/auth/components/auth-email-panel.module.css
+5 -5
View File
@@ -28,16 +28,16 @@
.logo {
display: block;
height: var(--auth-logo-height);
height: clamp(92px, 22.222vw, var(--auth-logo-height));
width: auto;
max-width: 220px;
max-width: min(56vw, 220px);
margin: 0 auto;
object-fit: contain;
}
.spacer {
flex: 1 1 0;
min-height: var(--spacing-lg);
min-height: var(--page-section-gap, var(--spacing-lg));
}
.toggleButton {
@@ -45,7 +45,7 @@
background: none;
border: none;
padding: var(--spacing-md) 0 0;
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
color: var(--color-auth-text-primary);
text-decoration: underline;
text-underline-offset: 3px;
@@ -62,7 +62,7 @@
background: none;
border: none;
padding: var(--spacing-md) 0 var(--spacing-md);
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
color: var(--color-auth-text-primary);
text-decoration: underline;
text-underline-offset: 3px;
src/app/auth/components/auth-error-message.module.css
+1 -1
View File
@@ -10,7 +10,7 @@
background: transparent;
border: none;
color: var(--color-error);
font-size: var(--font-size-sm);
font-size: var(--responsive-caption, var(--font-size-sm));
line-height: 1.4;
text-align: center;
}
src/app/auth/components/auth-facebook-panel.module.css
+7 -7
View File
@@ -16,14 +16,14 @@
.spacer {
flex: 1 1 0;
min-height: var(--spacing-lg);
min-height: var(--page-section-gap, var(--spacing-lg));
}
.logo {
display: block;
height: var(--auth-logo-height);
height: clamp(92px, 22.222vw, var(--auth-logo-height));
width: auto;
max-width: 220px;
max-width: min(56vw, 220px);
margin: 0 auto;
object-fit: contain;
}
@@ -34,13 +34,13 @@
justify-content: center;
gap: var(--spacing-md);
width: 100%;
height: var(--auth-field-height);
min-height: var(--auth-field-height);
padding: 0 var(--spacing-lg);
border: none;
border-radius: var(--radius-xxxl);
border-radius: var(--radius-full, 999px);
background: var(--color-auth-surface);
color: var(--color-auth-text-primary);
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
font-weight: 600;
cursor: pointer;
margin-top: var(--spacing-md);
@@ -92,7 +92,7 @@
background: none;
border: none;
padding: var(--spacing-md) 0;
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
color: var(--color-auth-text-primary);
text-decoration: underline;
text-underline-offset: 3px;
src/app/auth/components/auth-legal-text.module.css
+1 -1
View File
@@ -38,7 +38,7 @@
.text {
margin: 0;
font-size: var(--font-size-sm);
font-size: var(--responsive-caption, var(--font-size-sm));
line-height: 1.4;
color: var(--color-auth-text-primary);
text-align: left;
src/app/auth/components/auth-other-options-dialog.module.css
+3 -3
View File
@@ -12,7 +12,7 @@
align-items: stretch;
gap: var(--spacing-md);
padding: var(--spacing-md) var(--spacing-xxl)
calc(var(--spacing-xxl) + env(safe-area-inset-bottom));
calc(var(--spacing-xxl) + var(--app-safe-bottom, 0px));
}
.handle {
@@ -26,7 +26,7 @@
.title {
margin: var(--spacing-sm) 0;
font-size: var(--font-size-bottom-sheet-title);
font-size: var(--responsive-page-title, var(--font-size-bottom-sheet-title));
font-weight: 700;
color: var(--color-auth-text-primary);
text-align: center;
@@ -42,7 +42,7 @@
border: none;
padding: var(--spacing-md) 0;
color: var(--color-auth-text-primary);
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
font-weight: 500;
cursor: pointer;
text-decoration: none;
src/app/auth/components/auth-primary-button.module.css
+3 -3
View File
@@ -13,10 +13,10 @@
justify-content: center;
gap: var(--spacing-sm);
width: 100%;
height: var(--auth-field-height);
min-height: var(--auth-field-height);
padding: 0 var(--spacing-lg);
border: none;
border-radius: var(--radius-xxxl);
border-radius: var(--radius-full, 999px);
background: linear-gradient(
90deg,
var(--color-auth-primary-gradient-start),
@@ -24,7 +24,7 @@
);
box-shadow: 0 3px 5px var(--color-auth-primary-button-shadow);
color: #ffffff;
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
font-weight: 700;
cursor: pointer;
transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
src/app/auth/components/auth-screen.module.css
+7 -3
View File
@@ -1,6 +1,6 @@
/* auth-screen.module.css
* 与 splash-screen.module.css 同款结构（MobileShell 顶层 + .wrapper + .content）
* 删：.fullBleed（mobile 宽度约束改由 MobileShell.content 的 max-width: 500px 提供）
* 移动端宽度约束由 ResponsiveMobileShell / MobileShell 统一提供。
*/
.wrapper {
@@ -9,7 +9,7 @@
display: flex;
flex-direction: column;
width: 100%;
min-height: 100dvh;
min-height: var(--app-viewport-height, 100dvh);
background: #fbf1f2;
overflow: hidden;
}
@@ -21,5 +21,9 @@
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
padding: var(--spacing-lg);
padding:
calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-top, 0px))
calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-right, 0px))
calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-bottom, 0px))
calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-left, 0px));
}
src/app/auth/components/auth-social-button.module.css
+3 -3
View File
@@ -14,13 +14,13 @@
justify-content: center;
gap: var(--spacing-md);
width: 100%;
height: var(--auth-social-button-height);
min-height: var(--auth-social-button-height);
padding: 0 var(--spacing-lg);
border: 1px solid var(--color-auth-border);
border-radius: var(--radius-xxl);
border-radius: var(--radius-full, 999px);
background: var(--color-auth-surface);
color: var(--color-auth-text-primary);
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, opacity 0.15s ease;
src/app/auth/components/auth-social-buttons.module.css
+2 -2
View File
@@ -11,13 +11,13 @@
justify-content: center;
gap: var(--spacing-sm);
width: 100%;
height: var(--button-height);
min-height: var(--button-height);
padding: 0 var(--spacing-lg);
border: var(--border-light) solid var(--color-chat-input-border);
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.04);
color: var(--color-text-primary);
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease;
src/app/auth/components/auth-text-field.module.css
+5 -5
View File
@@ -16,19 +16,19 @@
}
.label {
font-size: var(--font-size-sm);
font-size: var(--responsive-caption, var(--font-size-sm));
color: var(--color-text-secondary);
}
.input {
width: 100%;
height: var(--auth-field-height);
min-height: var(--auth-field-height);
padding: 0 var(--spacing-lg) 0 var(--spacing-xxl);
border: none;
border-radius: var(--radius-xxxl);
border-radius: var(--radius-full, 999px);
background: var(--color-auth-surface);
color: var(--color-auth-text-primary);
font-size: var(--font-size-md);
font-size: var(--responsive-body, var(--font-size-md));
box-shadow: 0 3px 5px var(--color-auth-input-shadow);
outline: none;
transition: box-shadow 0.15s ease;
@@ -54,6 +54,6 @@
}
.error {
font-size: var(--font-size-sm);
font-size: var(--responsive-caption, var(--font-size-sm));
color: var(--color-error);
}
src/app/chat/chat-screen.tsx
+1 -1
View File
@@ -147,7 +147,7 @@ export function ChatScreen() {
alt=""
fill
priority
sizes="(max-width: 500px) 100vw, 500px"
sizes="(max-width: 540px) 100vw, 540px"
/>
</div>
src/app/chat/components/chat-area.module.css
+12 -8
View File
@@ -4,7 +4,11 @@
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
padding:
var(--spacing-lg, 16px)
calc(var(--chat-inline-padding, 20px) + var(--app-safe-right, 0px))
var(--spacing-lg, 16px)
calc(var(--chat-inline-padding, 20px) + var(--app-safe-left, 0px));
display: flex;
flex-direction: column;
gap: var(--spacing-3, 12px);
@@ -21,7 +25,7 @@
background: var(--color-surface-muted, rgba(255, 255, 255, 0.06));
border-radius: var(--radius-md, 8px);
padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
font-size: var(--font-size-xs, 11px);
font-size: var(--responsive-micro, var(--font-size-xs, 11px));
color: #000;
opacity: 0.75;
}
@@ -31,7 +35,7 @@
background: var(--color-surface-muted, rgba(255, 255, 255, 0.06));
border-radius: var(--radius-md, 8px);
padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
font-size: var(--font-size-sm, 12px);
font-size: var(--responsive-caption, var(--font-size-sm, 12px));
color: #8c8b8b;
text-align: center;
}
@@ -56,22 +60,22 @@
}
.bubbleAi {
max-width: 75%;
max-width: var(--chat-bubble-max-width, 75%);
background: var(--color-bubble-ai, rgba(255, 255, 255, 0.08));
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
border-radius: var(--radius-lg, 12px);
font-size: var(--font-size-base, 14px);
font-size: var(--responsive-body, var(--font-size-base, 14px));
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
}
.bubbleUser {
max-width: 75%;
max-width: var(--chat-bubble-max-width, 75%);
background: var(--color-bubble-user, #4f46e5);
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
border-radius: var(--radius-lg, 12px);
font-size: var(--font-size-base, 14px);
font-size: var(--responsive-body, var(--font-size-base, 14px));
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
@@ -79,7 +83,7 @@
}
.bubbleTime {
font-size: var(--font-size-xs, 11px);
font-size: var(--responsive-micro, var(--font-size-xs, 11px));
opacity: 0.5;
}
src/app/chat/components/chat-header.module.css
+2 -2
View File
@@ -20,7 +20,7 @@
padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
background: var(--color-accent, #f84d96);
color: #fff;
font-size: var(--font-size-sm, 12px);
font-size: var(--responsive-caption, var(--font-size-sm, 12px));
font-weight: 500;
cursor: pointer;
border: 0;
@@ -48,7 +48,7 @@
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-radius: var(--radius-full, 999px);
border: 0;
cursor: pointer;
color: var(--color-text-primary, #fff);
src/app/chat/components/chat-input-bar.module.css
+6 -5
View File
@@ -2,16 +2,17 @@
/* 键盘适配：
* --chat-input-lift 是小米 Android + Facebook IAB 的专用抬升值。
* env(safe-area-inset-bottom) 处理小米全面屏手势条 / iPhone home indicator。
* --app-safe-bottom 处理小米全面屏手势条 / iPhone home indicator。
* 正常浏览器中 --chat-input-lift 为 0，因此无视觉副作用。 */
.bar {
flex: 0 0 auto;
padding: 0
var(--spacing-lg, 16px)
calc(var(--chat-inline-padding, 16px) + var(--app-safe-right, 0px))
calc(
var(--spacing-lg, 16px) + var(--chat-input-lift, 0px) +
env(safe-area-inset-bottom, 0px)
);
var(--app-safe-bottom, 0px)
)
calc(var(--chat-inline-padding, 16px) + var(--app-safe-left, 0px));
background: transparent;
transition: padding-top 0.2s ease, padding-bottom 0.2s ease,
background-color 0.2s ease, box-shadow 0.2s ease;
@@ -30,7 +31,7 @@
gap: var(--spacing-sm, 8px);
padding: var(--spacing-sm, 8px);
background: #fff;
border-radius: 32px;
border-radius: var(--radius-full, 999px);
border: 1px solid transparent;
transition: border-color 0.2s ease;
}
src/app/chat/components/chat-input-text-field.module.css
+2 -2
View File
@@ -8,7 +8,7 @@
align-items: center;
padding: 0 var(--spacing-lg, 16px); /* Dart: horizontal AppSpacing.lg */
background: #fff; /* Dart: Colors.white */
border-radius: 32px; /* Dart: AppRadius.xxxl */
border-radius: var(--radius-full, 999px);
}
/* textarea 本身（裸元素，背景透明让外层白底透出） */
@@ -16,7 +16,7 @@
flex: 1 1 auto;
min-width: 0;
width: 100%;
min-height: 40px;
min-height: var(--chat-send-button-size, 40px);
max-height: 120px; /* 约 5 行 × 24px line-height */
padding: 6px 0 0 0; /* 上 6px：让文字视觉下移，避开正中位置 */
border: 0;
src/app/chat/components/chat-send-button.module.css
+5 -5
View File
@@ -2,8 +2,8 @@
.button {
flex: 0 0 auto;
width: 40px;
height: 40px;
width: var(--chat-send-button-size, 40px);
height: var(--chat-send-button-size, 40px);
aspect-ratio: 1 / 1;
border: 0;
border-radius: 50%;
@@ -37,8 +37,8 @@
}
.icon {
width: 24px;
height: 24px;
font-size: 24px;
width: var(--icon-size-xl, 24px);
height: var(--icon-size-xl, 24px);
font-size: var(--icon-size-xl, 24px);
line-height: 1;
}
src/app/chat/components/external-browser-dialog.module.css
+10 -5
View File
@@ -6,10 +6,15 @@
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
padding:
calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
}
.dialog {
width: calc(100% - 40px);
width: 100%;
max-width: var(--pwa-install-dialog-max-width, 360px);
padding: 24px 16px 16px;
text-align: center;
@@ -20,7 +25,7 @@
.title {
margin: 0 0 10px;
font-size: var(--font-size-22, 22px);
font-size: var(--responsive-page-title, var(--font-size-22, 22px));
font-weight: 700;
line-height: 1.2;
color: var(--color-text-foreground, #171717);
@@ -28,7 +33,7 @@
.content {
margin: 0 24px var(--spacing-xxl, 24px);
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
line-height: 1.5;
text-align: left;
color: #393939;
@@ -43,10 +48,10 @@
.button {
flex: 1 1 auto;
height: var(--pwa-button-height, 44px);
min-height: var(--pwa-button-height, 44px);
border: 0;
border-radius: var(--radius-bottom-sheet, 28px);
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
font-weight: 600;
cursor: pointer;
display: flex;
src/app/chat/components/fullscreen-image-viewer.module.css
+10 -10
View File
@@ -52,14 +52,14 @@
.backButton {
position: absolute;
top: 22px;
left: 18px;
top: calc(var(--page-padding-y, 22px) + var(--app-safe-top, 0px));
left: calc(var(--chat-inline-padding, 18px) + var(--app-safe-left, 0px));
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
width: clamp(48px, 10vw, 54px);
height: clamp(48px, 10vw, 54px);
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
@@ -70,11 +70,11 @@
.unlockButton {
position: absolute;
right: 18px;
bottom: max(24px, env(safe-area-inset-bottom));
left: 18px;
right: calc(var(--chat-inline-padding, 18px) + var(--app-safe-right, 0px));
bottom: calc(var(--page-section-gap-lg, 24px) + var(--app-safe-bottom, 0px));
left: calc(var(--chat-inline-padding, 18px) + var(--app-safe-left, 0px));
z-index: 1;
min-height: 64px;
min-height: clamp(56px, 11.852vw, 64px);
border: 0;
border-radius: 999px;
background: linear-gradient(90deg, #e05ad7 0%, #ef66b0 100%);
@@ -82,7 +82,7 @@
color: #ffffff;
cursor: pointer;
font-family: var(--font-athelas), Athelas, serif;
font-size: 22px;
font-size: var(--responsive-page-title, 22px);
font-weight: 700;
letter-spacing: 0.01em;
}
@@ -107,7 +107,7 @@
.error {
color: var(--color-text-secondary, #9e9e9e);
font-size: 48px;
font-size: clamp(36px, 8.889vw, 48px);
}
@keyframes spin {
src/app/chat/components/history-unlock-dialog.module.css
+11 -6
View File
@@ -6,10 +6,15 @@
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
padding:
calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
}
.dialog {
width: calc(100% - 40px);
width: 100%;
max-width: var(--pwa-install-dialog-max-width, 360px);
padding: 24px 16px 16px;
text-align: center;
@@ -20,7 +25,7 @@
.title {
margin: 0 0 10px;
font-size: var(--font-size-22, 22px);
font-size: var(--responsive-page-title, var(--font-size-22, 22px));
font-weight: 700;
line-height: 1.2;
color: var(--color-text-foreground, #171717);
@@ -28,7 +33,7 @@
.content {
margin: 0 24px var(--spacing-lg, 16px);
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
line-height: 1.5;
text-align: left;
color: #393939;
@@ -36,7 +41,7 @@
.error {
margin: 0 24px var(--spacing-lg, 16px);
font-size: var(--font-size-md, 14px);
font-size: var(--responsive-caption, var(--font-size-md, 14px));
line-height: 1.4;
text-align: left;
color: #c0364c;
@@ -50,10 +55,10 @@
.button {
flex: 1 1 auto;
height: var(--pwa-button-height, 44px);
min-height: var(--pwa-button-height, 44px);
border: 0;
border-radius: var(--radius-bottom-sheet, 28px);
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
font-weight: 600;
cursor: pointer;
display: flex;
src/app/chat/components/image-bubble.module.css
+5 -5
View File
@@ -2,8 +2,8 @@
.bubble {
position: relative;
max-width: 220px;
max-height: 220px;
max-width: var(--chat-media-size, 220px);
max-height: var(--chat-media-size, 220px);
border-radius: var(--radius-lg, 12px);
border-top-left-radius: 0;
overflow: hidden;
@@ -39,9 +39,9 @@
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 220px;
width: var(--chat-media-size, 220px);
height: var(--chat-media-size, 220px);
background: var(--color-bubble-background, #fff);
color: var(--color-text-secondary, #9e9e9e);
font-size: 24px;
font-size: var(--icon-size-xl, 24px);
}
src/app/chat/components/insufficient-credits-dialog.module.css
+11 -7
View File
@@ -5,7 +5,11 @@
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding:
calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
background: rgba(0, 0, 0, 0.52);
}
@@ -23,7 +27,7 @@
.title {
margin: 0 0 10px;
color: var(--color-text-foreground, #171717);
font-size: var(--font-size-22, 22px);
font-size: var(--responsive-page-title, var(--font-size-22, 22px));
font-weight: 700;
line-height: 1.2;
}
@@ -31,7 +35,7 @@
.content {
margin: 0 12px 18px;
color: #393939;
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
line-height: 1.5;
}
@@ -50,7 +54,7 @@
justify-content: space-between;
gap: 12px;
color: #4a3b43;
font-size: var(--font-size-md, 14px);
font-size: var(--responsive-caption, var(--font-size-md, 14px));
line-height: 1.3;
}
@@ -62,7 +66,7 @@
.creditItem dd {
margin: 0;
color: #f657a0;
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
font-weight: 800;
}
@@ -74,10 +78,10 @@
.button {
flex: 1 1 auto;
height: var(--pwa-button-height, 44px);
min-height: var(--pwa-button-height, 44px);
border: 0;
border-radius: var(--radius-bottom-sheet, 28px);
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
font-weight: 700;
cursor: pointer;
display: flex;
src/app/chat/components/language-dialog.module.css
+11 -6
View File
@@ -8,22 +8,27 @@
align-items: center;
justify-content: center;
z-index: 50;
padding:
calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
}
.dialog {
width: calc(100% - 40px);
max-width: 360px;
width: 100%;
max-width: var(--dialog-max-width, 360px);
background: var(--color-surface, #1f1a2e);
border-radius: var(--radius-lg, 12px);
padding: var(--spacing-5, 20px);
display: flex;
flex-direction: column;
gap: var(--spacing-3, 12px);
max-height: 80vh;
max-height: min(80vh, calc(var(--app-visible-height, 100dvh) - 32px));
}
.title {
font-size: var(--font-size-lg, 18px);
font-size: var(--responsive-section-title, var(--font-size-lg, 18px));
font-weight: 600;
margin: 0;
color: var(--color-text-primary, #fff);
@@ -34,7 +39,7 @@
flex-direction: column;
gap: var(--spacing-1, 4px);
overflow-y: auto;
max-height: 60vh;
max-height: min(60vh, calc(var(--app-visible-height, 100dvh) - 120px));
}
.item {
@@ -46,7 +51,7 @@
border: 0;
border-radius: var(--radius-md, 8px);
color: var(--color-text-primary, #fff);
font-size: var(--font-size-base, 14px);
font-size: var(--responsive-body, var(--font-size-base, 14px));
text-align: left;
cursor: pointer;
}
src/app/chat/components/message-avatar.module.css
+3 -3
View File
@@ -2,8 +2,8 @@
.avatar {
flex: 0 0 auto;
width: 43px;
height: 43px;
width: var(--chat-avatar-size, 43px);
height: var(--chat-avatar-size, 43px);
border-radius: 9999px;
overflow: hidden;
border: 2px solid var(--color-avatar-border, #fbf3f5);
@@ -26,5 +26,5 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-size: var(--icon-size-xl, 24px);
}
src/app/chat/components/private-message-card.module.css
+5 -5
View File
@@ -1,8 +1,8 @@
.card {
max-width: min(280px, 100%);
padding: 14px;
max-width: min(72vw, 280px);
padding: var(--responsive-card-padding, 14px);
border: 1px solid rgba(246, 87, 160, 0.2);
border-radius: 18px;
border-radius: var(--responsive-card-radius-sm, 18px);
border-top-left-radius: 0;
background:
linear-gradient(180deg, rgba(255, 244, 248, 0.95), rgba(255, 255, 255, 0.95)),
@@ -30,7 +30,7 @@
.hint {
margin: 0;
color: #3c3b3b;
font-size: 14px;
font-size: var(--responsive-body, 14px);
line-height: 1.4;
}
@@ -43,7 +43,7 @@
background: linear-gradient(90deg, #ff67e0, #ff52a2);
color: #ffffff;
cursor: pointer;
font-size: 14px;
font-size: var(--responsive-body, 14px);
font-weight: 700;
}
src/app/chat/components/pwa-install-dialog.module.css
+10 -5
View File
@@ -11,10 +11,15 @@
align-items: center;
justify-content: center;
z-index: 60;
padding:
calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
}
.dialog {
width: calc(100% - 40px);
width: 100%;
max-width: var(--pwa-install-dialog-max-width, 360px);
background: var(--color-page-background, #ffffff);
border-radius: 40px;
@@ -34,7 +39,7 @@
}
.title {
font-size: var(--font-size-22, 22px);
font-size: var(--responsive-page-title, var(--font-size-22, 22px));
font-weight: 700;
margin: 0 0 var(--spacing-sm, 8px);
color: var(--color-text-foreground, #171717);
@@ -42,7 +47,7 @@
}
.content {
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
line-height: 1.5;
color: #393939;
margin: 0 36px var(--spacing-xxl, 24px);
@@ -56,10 +61,10 @@
.btn {
flex: 1 1 auto;
height: var(--pwa-button-height, 44px);
min-height: var(--pwa-button-height, 44px);
border: 0;
border-radius: var(--radius-bottom-sheet, 28px);
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
font-weight: 600;
cursor: pointer;
color: var(--color-page-background, #ffffff);
src/app/chat/components/text-bubble.module.css
+1 -1
View File
@@ -6,7 +6,7 @@
align-self: stretch;
padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
border-radius: var(--radius-xxl, 24px);
font-size: var(--font-size-body-lg, 16px);
font-size: var(--responsive-body, var(--font-size-body-lg, 16px));
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
src/app/chat/components/voice-bubble.module.css
+7 -7
View File
@@ -1,10 +1,10 @@
.bubble {
display: flex;
align-items: flex-start;
gap: 10px;
width: min(280px, 100%);
padding: 12px 14px;
border-radius: 20px;
gap: var(--spacing-sm, 10px);
width: min(72vw, 280px);
padding: var(--spacing-md, 12px) clamp(12px, 2.593vw, 14px);
border-radius: var(--responsive-card-radius-sm, 20px);
box-shadow: var(--shadow-input-box, 0 1px 2px rgba(0, 0, 0, 0.1));
}
@@ -123,20 +123,20 @@
.hint {
margin: 0;
color: #3c3b3b;
font-size: 14px;
font-size: var(--responsive-body, 14px);
line-height: 1.4;
}
.unlockButton {
align-self: flex-start;
margin-top: 2px;
padding: 9px 14px;
padding: 9px clamp(12px, 2.593vw, 14px);
border: 0;
border-radius: 999px;
background: linear-gradient(90deg, #ff67e0, #ff52a2);
color: #ffffff;
cursor: pointer;
font-size: 14px;
font-size: var(--responsive-body, 14px);
font-weight: 700;
}
src/app/chat/components/voice-unlock-options-dialog.module.css
+10 -6
View File
@@ -5,13 +5,17 @@
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding:
calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
background: rgba(0, 0, 0, 0.5);
}
.dialog {
width: 100%;
max-width: 380px;
max-width: var(--dialog-max-width, 380px);
padding: 24px 18px 18px;
border-radius: 36px;
background: var(--color-page-background, #ffffff);
@@ -21,7 +25,7 @@
.title {
margin: 0 0 8px;
color: var(--color-text-foreground, #171717);
font-size: var(--font-size-22, 22px);
font-size: var(--responsive-page-title, var(--font-size-22, 22px));
font-weight: 700;
line-height: 1.2;
text-align: center;
@@ -30,7 +34,7 @@
.content {
margin: 0 12px 20px;
color: #393939;
font-size: var(--font-size-md, 14px);
font-size: var(--responsive-body, var(--font-size-md, 14px));
line-height: 1.5;
text-align: center;
}
@@ -48,7 +52,7 @@
border: 0;
border-radius: 28px;
cursor: pointer;
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, var(--font-size-lg, 16px));
font-weight: 700;
}
@@ -81,7 +85,7 @@
.optionDescription {
color: #3c3b3b;
font-size: 13px;
font-size: var(--responsive-caption, 13px);
font-weight: 500;
line-height: 1.25;
}
src/app/chat/image/[messageId]/chat-image-viewer-screen.module.css
+10 -6
View File
@@ -1,18 +1,22 @@
.emptyScreen {
display: flex;
min-height: 100dvh;
min-height: var(--app-viewport-height, 100dvh);
box-sizing: border-box;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 24px;
gap: var(--page-section-gap, 18px);
padding:
calc(var(--page-padding-y, 24px) + var(--app-safe-top, 0px))
calc(var(--page-padding-x, 24px) + var(--app-safe-right, 0px))
calc(var(--page-padding-y, 24px) + var(--app-safe-bottom, 0px))
calc(var(--page-padding-x, 24px) + var(--app-safe-left, 0px));
background: #0d0b14;
color: #ffffff;
}
.backButton {
min-height: 44px;
min-height: var(--responsive-control-height, 44px);
padding: 0 18px;
border: 0;
border-radius: 999px;
@@ -20,13 +24,13 @@
color: #191316;
cursor: pointer;
font: inherit;
font-size: 15px;
font-size: var(--responsive-body, 15px);
font-weight: 800;
}
.emptyText {
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 16px;
font-size: var(--responsive-body, 16px);
font-weight: 700;
}
src/app/coins-rules/coins-rules-screen.module.css
+1 -1
View File
@@ -1,5 +1,5 @@
.screen {
min-height: 100dvh;
min-height: var(--app-viewport-height, 100dvh);
box-sizing: border-box;
padding:
calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))
src/app/sidebar/components/sidebar-screen.module.css
+1 -1
View File
@@ -4,7 +4,7 @@
flex-direction: column;
gap: 14px;
overflow: hidden;
min-height: 100dvh;
min-height: var(--app-viewport-height, 100dvh);
box-sizing: border-box;
padding:
var(--app-safe-top, 0px)
src/app/splash/components/splash-background.tsx
+4 -4
View File
@@ -7,9 +7,9 @@
* 原名: pic_bg_home.png (snake_case)
*
* sizes 属性说明：
* 图片在 MobileShell 内（max-width: 500px）。
* - 视口 ≤ 500px：MobileShell = 100vw，图片 = 100vw
* - 视口 > 500px：MobileShell = 500px，图片 = 500px
* 图片在 MobileShell 内（max-width: 540px）。
* - 视口 ≤ 540px：MobileShell = 100vw，图片 = 100vw
* - 视口 > 540px：MobileShell = 540px，图片 = 540px
*/
import Image from "next/image";
import styles from "./splash-background.module.css";
@@ -22,7 +22,7 @@ export function SplashBackground() {
alt=""
fill
priority
sizes="(max-width: 500px) 100vw, 500px"
sizes="(max-width: 540px) 100vw, 540px"
className={styles.image}
/>
</div>
src/app/splash/components/splash-button.module.css
+7 -21
View File
@@ -3,13 +3,13 @@
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--spacing-26);
gap: clamp(var(--spacing-md, 12px), 4.815vw, var(--spacing-26, 26px));
width: 100%;
z-index: 2;
}
.skip {
font-size: var(--font-size-xxl);
font-size: var(--responsive-section-title, var(--font-size-xxl));
font-weight: 700;
font-style: italic;
color: #ffffff;
@@ -25,15 +25,15 @@
}
.separator {
width: var(--spacing-26);
width: clamp(var(--spacing-md, 12px), 4.815vw, var(--spacing-26, 26px));
height: 1px;
}
.facebookButton {
height: 48px;
padding: 0 30px;
min-height: var(--responsive-control-height, 48px);
padding: 0 clamp(var(--spacing-lg, 16px), 5.556vw, 30px);
border: 0;
border-radius: 24px;
border-radius: var(--radius-full, 999px);
/* 渐变色引用 tokens/colors.css 中定义的 token */
background: linear-gradient(
to right,
@@ -57,22 +57,8 @@
}
.facebookLabel {
font-size: var(--font-size-xxl);
font-size: var(--responsive-section-title, var(--font-size-xxl));
font-weight: 700;
color: #ffffff;
white-space: nowrap;
}
@media (max-width: 360px) {
.wrapper {
gap: var(--spacing-md);
}
.separator {
width: var(--spacing-md);
}
.facebookButton {
padding: 0 var(--spacing-lg);
}
}
src/app/splash/components/splash-content.module.css
+1 -1
View File
@@ -7,7 +7,7 @@
.title {
font-family: var(--font-athelas);
font-size: var(--font-size-title);
font-size: var(--responsive-page-title, var(--font-size-title));
font-weight: 700;
font-style: italic;
line-height: 1.4;
src/app/splash/components/splash-screen.module.css
+9 -5
View File
@@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
width: 100%;
min-height: 100dvh;
min-height: var(--app-viewport-height, 100dvh);
overflow: hidden;
}
@@ -28,7 +28,11 @@
display: flex;
flex-direction: column;
flex: 1;
padding: var(--spacing-26) var(--spacing-26) var(--spacing-md);
padding:
calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px))
calc(var(--page-padding-x, 26px) + var(--app-safe-right, 0px))
calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px))
calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
}
.spacer {
@@ -36,12 +40,12 @@
}
.buttonArea {
margin-top: var(--spacing-26);
margin-top: var(--page-section-gap-lg, 26px);
}
.bottom {
margin: var(--spacing-xxxl) 0 0 0;
font-size: var(--font-size-md);
margin: var(--page-section-gap-lg, 32px) 0 0 0;
font-size: var(--responsive-body, var(--font-size-md));
font-weight: 400;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
src/app/subscription/components/subscription-screen.module.css
+1 -1
View File
@@ -1,7 +1,7 @@
.shell {
display: flex;
flex-direction: column;
min-height: 100dvh;
min-height: var(--app-viewport-height, 100dvh);
background:
radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px),
linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%);