lc
6176f2c341
- records: 底部列表与月份选择器联动，新增 [本月|最近] 分段控件；标题/空态随模式切换 - leaderboard: 领奖台布局(冠军居中+皇冠)、次数标注于底座且三档水平对齐；头像 cloud:// 批量预解析提速(云函数需重新部署) - index/timer: 主色底图标改白色变体修复隐形；目标数字按微信字体缩放补偿真机遮挡 - settings: 配色方案横滑渐变色卡；头像上传前压缩至 200px - theme: 新增 teal 主题；暗黑背景统一对齐 - 圆形头像双保险(image 自身 border-radius)修复月/年榜方图 注: cloudfunctions/leaderboard 改动须在开发者工具重新部署才生效。
86 lines
1.7 KiB
Plaintext
86 lines
1.7 KiB
Plaintext
.skeleton {
|
|
width: 100%;
|
|
}
|
|
|
|
.skeleton--active .sk-bar,
|
|
.skeleton--active .sk-circle {
|
|
animation: skShimmer 1.4s ease-in-out infinite;
|
|
background: linear-gradient(90deg,
|
|
rgba(0, 0, 0, 0.06) 0%,
|
|
rgba(0, 0, 0, 0.12) 50%,
|
|
rgba(0, 0, 0, 0.06) 100%);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
@keyframes skShimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
.sk-bar {
|
|
height: 24rpx;
|
|
border-radius: 8rpx;
|
|
margin-bottom: 16rpx;
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.sk-bar--title { width: 60%; height: 32rpx; }
|
|
.sk-bar--body { width: 100%; }
|
|
.sk-bar--small { width: 40%; height: 20rpx; margin-bottom: 0; }
|
|
.sk-bar--center { width: 60%; height: 40rpx; }
|
|
|
|
.sk-card {
|
|
background: var(--card-bg, #FFFFFF);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.sk-circle {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sk-circle--big {
|
|
width: 360rpx;
|
|
height: 360rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sk-list {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.sk-list-text {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
/* dark mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
.sk-card { background: var(--card-bg, #26262B); }
|
|
.skeleton--active .sk-bar,
|
|
.skeleton--active .sk-circle {
|
|
background: linear-gradient(90deg,
|
|
rgba(255, 255, 255, 0.05) 0%,
|
|
rgba(255, 255, 255, 0.10) 50%,
|
|
rgba(255, 255, 255, 0.05) 100%);
|
|
background-size: 200% 100%;
|
|
}
|
|
.sk-bar,
|
|
.sk-circle {
|
|
background-color: rgba(255, 255, 255, 0.06);
|
|
}
|
|
}
|