admin
9deb320cf6
Rename the global Sidebar route, UI, assets, analytics, and payment return context to Profile. Add accessible message-avatar navigation and preserve the source character across auth and logout flows. BREAKING CHANGE: /sidebar has been removed; use /profile instead.
84 lines
3.7 KiB
CSS
84 lines
3.7 KiB
CSS
/**
|
|
* 响应式 token
|
|
*
|
|
* 设计稿基准：1080x1920 @2x，因此 CSS 设计宽度为 540px。
|
|
* 原则：
|
|
* - 桌面调试最大宽度使用 --shell-max-width / --app-max-width。
|
|
* - 组件尺寸使用 clamp(min, design-ratio vw, design-value)，在 320-540px
|
|
* 之间平滑缩放，并避免小屏过度压缩。
|
|
* - 业务 CSS 优先使用语义 token，避免页面散落硬编码尺寸。
|
|
*/
|
|
:root {
|
|
--app-design-width: 540px;
|
|
--app-max-width: var(--shell-max-width, 540px);
|
|
--app-viewport-height: 100dvh;
|
|
--app-visible-height: 100dvh;
|
|
--app-safe-top: env(safe-area-inset-top, 0px);
|
|
--app-safe-right: env(safe-area-inset-right, 0px);
|
|
--app-safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--app-safe-left: env(safe-area-inset-left, 0px);
|
|
|
|
/* 56px @2x = 28px；小屏保留至少 22px，避免内容贴边。 */
|
|
--page-padding-x: clamp(18px, 5.185vw, 28px);
|
|
--page-padding-y: clamp(14px, 3.333vw, 20px);
|
|
--page-section-gap: clamp(12px, 3.333vw, 18px);
|
|
--page-section-gap-lg: clamp(16px, 4.444vw, 24px);
|
|
|
|
/* 页面级语义尺寸 */
|
|
--responsive-display-title: clamp(28px, 6.296vw, 34px);
|
|
--responsive-page-title: clamp(22px, 5.185vw, 28px);
|
|
--responsive-section-title: clamp(17px, 3.704vw, 20px);
|
|
--responsive-card-title: clamp(16px, 3.333vw, 18px);
|
|
--responsive-body: clamp(14px, 2.963vw, 16px);
|
|
--responsive-caption: clamp(12px, 2.407vw, 13px);
|
|
--responsive-micro: clamp(10px, 2.222vw, 12px);
|
|
|
|
--responsive-card-radius: clamp(20px, 5.185vw, 28px);
|
|
--responsive-card-radius-sm: clamp(18px, 4.074vw, 22px);
|
|
--responsive-card-padding: clamp(14px, 3.333vw, 18px);
|
|
--responsive-card-padding-lg: clamp(18px, 4.074vw, 22px);
|
|
--responsive-control-height: clamp(44px, 8.889vw, 48px);
|
|
--responsive-icon-button-size: clamp(38px, 8.148vw, 44px);
|
|
--responsive-icon-size-sm: clamp(14px, 2.963vw, 16px);
|
|
--responsive-icon-size-md: clamp(18px, 4.444vw, 24px);
|
|
--responsive-spinner-size: clamp(16px, 3.333vw, 18px);
|
|
--responsive-dot-size: clamp(6px, 1.481vw, 8px);
|
|
--responsive-inline-gap-xs: clamp(4px, 0.926vw, 5px);
|
|
--responsive-pill-padding-sm: clamp(3px, 0.741vw, 4px)
|
|
clamp(7px, 1.667vw, 9px);
|
|
|
|
/* 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);
|
|
|
|
/* Profile 专用响应式尺寸 */
|
|
--profile-user-padding-y: clamp(18px, 3.704vw, 20px);
|
|
--profile-card-gap-y: clamp(6px, 1.481vw, 8px);
|
|
--profile-card-padding-x: clamp(18px, 5.185vw, 28px);
|
|
--profile-card-padding-y: clamp(16px, 3.333vw, 18px);
|
|
--profile-card-padding-right: clamp(10px, 2.222vw, 12px);
|
|
--profile-avatar-size: clamp(48px, 10.37vw, 56px);
|
|
--profile-voice-image-size: clamp(84px, 18.519vw, 100px);
|
|
|
|
/* 响应式字体：按 540px 设计宽度换算，并给小屏设置可读下限。 */
|
|
--font-responsive-md: clamp(14px, 2.963vw, 16px);
|
|
--font-responsive-lg: clamp(16px, 3.333vw, 18px);
|
|
--font-responsive-xl: clamp(18px, 3.704vw, 20px);
|
|
--font-responsive-number-lg: clamp(24px, 5.556vw, 30px);
|
|
|
|
/* Subscription 专用响应式尺寸 */
|
|
--subscription-section-notch-size: clamp(18px, 4.444vw, 24px);
|
|
--subscription-plan-grid-gap: clamp(7px, 1.667vw, 9px);
|
|
--subscription-plan-card-min-height: clamp(108px, 23.704vw, 128px);
|
|
--subscription-plan-title-size: clamp(16px, 3.519vw, 19px);
|
|
--subscription-price-size-lg: clamp(24px, 5.556vw, 30px);
|
|
--subscription-offer-badge-padding: clamp(4px, 0.741vw, 5px)
|
|
clamp(7px, 1.481vw, 8px);
|
|
--subscription-coin-icon-size: clamp(28px, 5.926vw, 32px);
|
|
--subscription-coin-svg-size: clamp(16px, 3.333vw, 18px);
|
|
--subscription-coin-column-width: clamp(42px, 8.889vw, 48px);
|
|
}
|