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, #1C1C1E); }
|
|
.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);
|
|
}
|
|
}
|