305 lines
7.6 KiB
SCSS
305 lines
7.6 KiB
SCSS
/* ==========================================================
|
|
全局主题系统 — 白天 / 黑夜两套主题（纯色背景）
|
|
使用 CSS 变量 + 微信 2.7.0+ 支持
|
|
========================================================== */
|
|
|
|
/* --- 页面根容器主题（.theme-light / .theme-dark 放在每个页面根 View 上）--- */
|
|
/* 状态栏避让由各页面顶部元素（.page-header 等）通过 useSafeArea 注入的 padding/margin 承担，
|
|
这里不再用 env(safe-area-inset-top) 隐式下移，避免与 header 的避让叠加导致顶部留白过大 */
|
|
.theme-light {
|
|
min-height: 100vh;
|
|
background-color: var(--bg-page, #ffffff);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.theme-dark {
|
|
min-height: 100vh;
|
|
background-color: var(--bg-page, #191919);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 变量定义 */
|
|
.theme-light {
|
|
--bg-page: #faf7f2;
|
|
--bg-card: #ffffff;
|
|
--bg-muted: #f3eee7;
|
|
--bg-input: #f5f1eb;
|
|
--text-primary: #2e2622;
|
|
--text-secondary: #8a7e76;
|
|
--text-muted: #b3a89e;
|
|
--accent-primary: #d96c6a;
|
|
--accent-primary-strong: #c75b59;
|
|
--accent-primary-soft: #f6e0dc;
|
|
--accent-secondary: #6c7bdb;
|
|
--accent-secondary-soft: rgba(108, 123, 219, 0.12);
|
|
--success: #4fa477;
|
|
--success-soft: rgba(79, 164, 119, 0.14);
|
|
--warning: #d99a4e;
|
|
--warning-soft: rgba(217, 154, 78, 0.14);
|
|
--danger: #d85d5d;
|
|
--danger-soft: rgba(216, 93, 93, 0.14);
|
|
--border: #ede5dc;
|
|
--border-strong: #e0d5c8;
|
|
--glass: rgba(255, 255, 255, 0.72);
|
|
--glass-line: rgba(255, 255, 255, 0.55);
|
|
--shadow-card: 0 8rpx 24rpx rgba(46, 38, 34, 0.08);
|
|
--shadow-elevated: 0 12rpx 40rpx rgba(46, 38, 34, 0.12);
|
|
--line-card: 1rpx solid var(--border);
|
|
--line-star: var(--border);
|
|
--accent-pink: var(--accent-primary);
|
|
--accent-blue: var(--accent-secondary);
|
|
--btn-gradient: var(--accent-primary);
|
|
}
|
|
|
|
.theme-dark {
|
|
--bg-page: #191919;
|
|
--bg-card: #23201d;
|
|
--bg-muted: #2b2622;
|
|
--bg-input: #2b2622;
|
|
--text-primary: #f5efe8;
|
|
--text-secondary: #b3a79c;
|
|
--text-muted: #82766c;
|
|
--accent-primary: #f09198;
|
|
--accent-primary-strong: #ffa7ad;
|
|
--accent-primary-soft: rgba(240, 145, 152, 0.14);
|
|
--accent-secondary: #8e97e8;
|
|
--accent-secondary-soft: rgba(142, 151, 232, 0.14);
|
|
--success: #67c58e;
|
|
--success-soft: rgba(103, 197, 142, 0.16);
|
|
--warning: #e0ad68;
|
|
--warning-soft: rgba(224, 173, 104, 0.16);
|
|
--danger: #ef7a7a;
|
|
--danger-soft: rgba(239, 122, 122, 0.16);
|
|
--border: #37312c;
|
|
--border-strong: #463e37;
|
|
--glass: rgba(25, 25, 25, 0.72);
|
|
--glass-line: rgba(255, 255, 255, 0.14);
|
|
--shadow-card: 0 8rpx 24rpx rgba(0, 0, 0, 0.32);
|
|
--shadow-elevated: 0 12rpx 40rpx rgba(0, 0, 0, 0.48);
|
|
--line-card: 1rpx solid var(--border);
|
|
--line-star: var(--border);
|
|
--accent-pink: var(--accent-primary);
|
|
--accent-blue: var(--accent-secondary);
|
|
--btn-gradient: var(--accent-primary);
|
|
}
|
|
|
|
/* page 基础字体 */
|
|
page {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
/* ==========================================================
|
|
全局组件样式
|
|
========================================================== */
|
|
|
|
.surface-card {
|
|
background: var(--bg-card);
|
|
border: 1rpx solid var(--border);
|
|
border-radius: 24rpx;
|
|
box-shadow: var(--shadow-card);
|
|
}
|
|
|
|
/* 为兼容旧页面中的卡片类名，保留过渡别名 */
|
|
.dashed-card {
|
|
@extend .surface-card;
|
|
}
|
|
|
|
/* === 常用工具类 === */
|
|
.container { padding: 24px; }
|
|
|
|
.flex { display: flex; }
|
|
.flex-center { display: flex; align-items: center; justify-content: center; }
|
|
.flex-between { display: flex; align-items: center; justify-content: space-between; }
|
|
.flex-column { display: flex; flex-direction: column; }
|
|
|
|
.text-center { text-align: center; }
|
|
|
|
.mt-10 { margin-top: 10px; }
|
|
.mt-20 { margin-top: 20px; }
|
|
.mb-10 { margin-bottom: 10px; }
|
|
.mb-20 { margin-bottom: 20px; }
|
|
|
|
/* === 通用按钮 === */
|
|
.btn-primary {
|
|
background: var(--accent-primary);
|
|
color: #fff;
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-card);
|
|
color: var(--text-primary);
|
|
border: 1rpx solid var(--border-strong);
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--danger);
|
|
color: #fff;
|
|
border-radius: 999rpx;
|
|
}
|
|
|
|
.btn-gradient {
|
|
@extend .btn-primary;
|
|
}
|
|
|
|
.btn-outline {
|
|
@extend .btn-secondary;
|
|
}
|
|
|
|
/* 固定底部操作栏 */
|
|
.action-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
padding: 20px 32px calc(20px + env(safe-area-inset-bottom));
|
|
background: rgba(255, 255, 255, 0.55);
|
|
backdrop-filter: blur(32px) saturate(1.2);
|
|
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
|
border-top: 1rpx solid var(--glass-line);
|
|
z-index: 500;
|
|
}
|
|
|
|
.theme-dark .action-bar {
|
|
background: rgba(25, 25, 25, 0.55);
|
|
backdrop-filter: blur(32px) saturate(1.2);
|
|
-webkit-backdrop-filter: blur(32px) saturate(1.2);
|
|
border-top: 1rpx solid var(--glass-line);
|
|
}
|
|
|
|
/* === 标题文字 === */
|
|
.page-title {
|
|
font-size: 40px;
|
|
font-weight: 800;
|
|
color: var(--text-primary);
|
|
display: block;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
display: block;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* === 状态标签 === */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 8px 20px;
|
|
border-radius: 50px;
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.badge-pink {
|
|
background: var(--accent-primary-soft);
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
.badge-blue {
|
|
background: var(--accent-secondary-soft);
|
|
color: var(--accent-secondary);
|
|
}
|
|
|
|
.badge-green {
|
|
background: var(--success-soft);
|
|
color: var(--success);
|
|
}
|
|
|
|
.badge-warning {
|
|
background: var(--warning-soft);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.badge-danger {
|
|
background: var(--danger-soft);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.badge-gray {
|
|
background: var(--bg-muted);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* === 安全区占位 === */
|
|
.safe-bottom {
|
|
height: constant(safe-area-inset-bottom);
|
|
height: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.safe-bottom-placeholder {
|
|
height: 200px;
|
|
}
|
|
|
|
/* === 自定义导航栏安全区适配 === */
|
|
/* 所有页面的顶部虚线卡头部下移，避免与微信胶囊按钮重叠 */
|
|
/* 仅作兜底；接了 useSafeArea 的页面用 inline style 覆盖此值 */
|
|
.page-header {
|
|
padding-top: calc(env(safe-area-inset-top, 20px) + 48px);
|
|
}
|
|
|
|
/* 返回按钮不单独占状态栏空间——父级 .page-header / .edit-header 已整体下移 */
|
|
.back-btn,
|
|
.edit-back {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ==========================================================
|
|
底部弹窗遮罩（地址选择器等共用）
|
|
========================================================== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 600;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.addr-picker-sheet {
|
|
width: 100%;
|
|
max-height: 70vh;
|
|
border-radius: 24px 24px 0 0;
|
|
padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-card);
|
|
border-top: var(--line-card);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ==========================================================
|
|
系统主题探测器（跟随系统模式）
|
|
以官方 onThemeChange/getAppBaseInfo 为主，这里是 CSS 兜底通道。
|
|
========================================================== */
|
|
.system-theme-detector {
|
|
position: fixed;
|
|
left: -9999px;
|
|
top: 0;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.system-theme-detector {
|
|
opacity: 1;
|
|
}
|
|
}
|