lc
fb3bc6c045
Root cause: WXSS compiler resolves var(--primary) at compile time
against page{} declarations in app.wxss. The orange defaults
(--primary:#FF6B35 etc.) were being baked into compiled WXSS,
so the inline style theme override on .container was ignored.
Records and settings pages always rendered orange regardless of
the user's theme choice.
Fix:
1. Remove --primary, --primary-light, --primary-bg, --primary-rgb
from page{} in app.wxss, forcing WXSS to resolve var() at
runtime from inline style on .container
2. Expand BASE_VARS in theme.js to include default orange theme
vars, so the initial render (before onLoad) still has valid
CSS custom properties — no flash of unstyled content
3. Export BASE_VARS from theme.js
4. Change all 4 pages + custom-tab-bar initial data.themeStyle
from '' to themeMod.BASE_VARS, eliminating the empty-string
gap between first render and onLoad
151 lines
3.0 KiB
Plaintext
151 lines
3.0 KiB
Plaintext
page {
|
|
--text: #333333;
|
|
--text-secondary: #999999;
|
|
--bg: #F5F5F5;
|
|
--card-bg: #FFFFFF;
|
|
--success: #4CAF50;
|
|
--border: #EEEEEE;
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
|
'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
font-size: 28rpx;
|
|
color: var(--text);
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
.container {
|
|
padding: 24rpx;
|
|
padding-bottom: calc(134rpx + env(safe-area-inset-bottom));
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card-bg);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
animation: cardIn 0.45s ease both;
|
|
}
|
|
|
|
.card:nth-child(1) { animation-delay: 0.05s; }
|
|
.card:nth-child(2) { animation-delay: 0.15s; }
|
|
.card:nth-child(3) { animation-delay: 0.25s; }
|
|
.card:nth-child(4) { animation-delay: 0.35s; }
|
|
|
|
@keyframes cardIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(40rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-light));
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 48rpx;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
padding: 24rpx 0;
|
|
text-align: center;
|
|
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.3);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: scale(0.96);
|
|
box-shadow: 0 4rpx 12rpx rgba(var(--primary-rgb), 0.2);
|
|
}
|
|
|
|
/* ---- pulse ring (used on timer page) ---- */
|
|
@keyframes breathePulse {
|
|
0%, 100% {
|
|
transform: scale(0.92);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: scale(1.08);
|
|
opacity: 0.15;
|
|
}
|
|
}
|
|
|
|
@keyframes breathePulseFast {
|
|
0%, 100% {
|
|
transform: scale(0.94);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: scale(1.06);
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
/* ---- float ---- */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-12rpx); }
|
|
}
|
|
|
|
/* ---- pop / bounce ---- */
|
|
@keyframes popIn {
|
|
0% { transform: scale(0); opacity: 0; }
|
|
60% { transform: scale(1.15); }
|
|
100% { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
@keyframes bounceSoft {
|
|
0%, 100% { transform: translateY(0); }
|
|
30% { transform: translateY(-16rpx); }
|
|
50% { transform: translateY(0); }
|
|
70% { transform: translateY(-6rpx); }
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
/* ---- shared modal overlay ---- */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-overlay-bottom {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-overlay-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ---- shared danger button ---- */
|
|
.btn-danger {
|
|
background: #fff;
|
|
color: #E53935;
|
|
border: 2rpx solid rgba(229, 57, 53, 0.3);
|
|
border-radius: 48rpx;
|
|
font-size: 28rpx;
|
|
padding: 20rpx 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-danger::after { border: none; }
|