lc
6176f2c341
- records: 底部列表与月份选择器联动，新增 [本月|最近] 分段控件；标题/空态随模式切换 - leaderboard: 领奖台布局(冠军居中+皇冠)、次数标注于底座且三档水平对齐；头像 cloud:// 批量预解析提速(云函数需重新部署) - index/timer: 主色底图标改白色变体修复隐形；目标数字按微信字体缩放补偿真机遮挡 - settings: 配色方案横滑渐变色卡；头像上传前压缩至 200px - theme: 新增 teal 主题；暗黑背景统一对齐 - 圆形头像双保险(image 自身 border-radius)修复月/年榜方图 注: cloudfunctions/leaderboard 改动须在开发者工具重新部署才生效。
58 lines
1.8 KiB
Plaintext
58 lines
1.8 KiB
Plaintext
.ui-card {
|
|
background: var(--card-bg, #FFFFFF);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Dark mode: shadows barely read against the darker backdrop, so add a
|
|
faint bright edge to keep cards elevated and separated from the page. */
|
|
@media (prefers-color-scheme: dark) {
|
|
.ui-card {
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.45), 0 0 0 1rpx rgba(255, 255, 255, 0.04);
|
|
}
|
|
}
|
|
|
|
.ui-card--flush {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Soft variant: subtle background tint, no shadow */
|
|
.ui-card.soft {
|
|
background: rgba(var(--primary-rgb, 255, 107, 53), 0.04);
|
|
box-shadow: none;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
/* Gradient variant: hero card filled with the theme gradient, white text.
|
|
Descendant elements override --text / --text-secondary locally so any
|
|
generic text inside automatically flips to white. */
|
|
.ui-card.gradient {
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
box-shadow: 0 8rpx 28rpx rgba(var(--primary-rgb), 0.35);
|
|
/* These custom properties are the ONLY channel that crosses the component
|
|
style-isolation boundary into slotted page content (see MEMORY.md). Any
|
|
text/fill inside the hero card must read from them, never var(--primary). */
|
|
--text: #FFFFFF;
|
|
--text-secondary: rgba(255, 255, 255, 0.85);
|
|
--border: rgba(255, 255, 255, 0.28);
|
|
--on-primary: #FFFFFF;
|
|
}
|
|
|
|
/* Staggered entrance animation */
|
|
.ui-card.in {
|
|
animation: uiCardIn 0.45s ease both;
|
|
}
|
|
|
|
.ui-card.in:nth-child(1) { animation-delay: 0.05s; }
|
|
.ui-card.in:nth-child(2) { animation-delay: 0.15s; }
|
|
.ui-card.in:nth-child(3) { animation-delay: 0.25s; }
|
|
.ui-card.in:nth-child(4) { animation-delay: 0.35s; }
|
|
|
|
@keyframes uiCardIn {
|
|
from { opacity: 0; transform: translateY(40rpx); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|