142 lines
2.3 KiB
CSS
142 lines
2.3 KiB
CSS
/* ========== 骨架屏加载 — 对齐 zibll skeleton loading ========== */
|
|
.skeleton {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--surface-2, #eee);
|
|
border-radius: var(--radius, 8px);
|
|
}
|
|
|
|
.skeleton::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 0%,
|
|
rgba(255, 255, 255, 0.4) 50%,
|
|
transparent 100%
|
|
);
|
|
animation: skeleton-shimmer 1.5s infinite;
|
|
}
|
|
|
|
@keyframes skeleton-shimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
/* 骨架屏变体 */
|
|
.skeleton-text {
|
|
height: 14px;
|
|
border-radius: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.skeleton-text--title {
|
|
height: 20px;
|
|
width: 60%;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.skeleton-text--short {
|
|
width: 40%;
|
|
}
|
|
|
|
.skeleton-text--medium {
|
|
width: 70%;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.skeleton-avatar--sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.skeleton-avatar--lg {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.skeleton-thumb {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
border-radius: var(--radius, 8px);
|
|
}
|
|
|
|
.skeleton-thumb--square {
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.skeleton-thumb--card {
|
|
aspect-ratio: 16 / 10;
|
|
border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
|
|
}
|
|
|
|
/* 卡片骨架屏 */
|
|
.skeleton-card {
|
|
background: var(--surface-1, #fff);
|
|
border-radius: var(--radius, 8px);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.skeleton-card__thumb {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 10;
|
|
}
|
|
|
|
.skeleton-card__body {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.skeleton-card__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* 评论骨架屏 */
|
|
.skeleton-comment {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
|
}
|
|
|
|
.skeleton-comment__body {
|
|
flex: 1;
|
|
}
|
|
|
|
.skeleton-comment__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* 通用骨架屏容器 */
|
|
.skeleton-list .skeleton-item {
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.03));
|
|
}
|
|
|
|
.skeleton-list .skeleton-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 减弱动画偏好 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.skeleton::after {
|
|
animation: none;
|
|
}
|
|
}
|