mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-11-04 18:40:20 +00:00
87 lines
1.6 KiB
CSS
87 lines
1.6 KiB
CSS
.skeleton-card,
|
|
.skeleton-list-item {
|
|
@apply flex items-center gap-3 rounded-xl border p-4;
|
|
background: var(--panel);
|
|
border-color: var(--line-soft);
|
|
animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.skeleton-avatar {
|
|
@apply h-12 w-12 shrink-0 rounded-full;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--panel-muted) 0%,
|
|
var(--panel-soft) 50%,
|
|
var(--panel-muted) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.skeleton-icon {
|
|
@apply h-10 w-10 shrink-0 rounded-lg;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--panel-muted) 0%,
|
|
var(--panel-soft) 50%,
|
|
var(--panel-muted) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.skeleton-content {
|
|
@apply min-w-0 flex-1;
|
|
}
|
|
|
|
.skeleton-content > :not([hidden]) ~ :not([hidden]) {
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skeleton-line {
|
|
@apply h-3 rounded-full;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--panel-muted) 0%,
|
|
var(--panel-soft) 50%,
|
|
var(--panel-muted) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.skeleton-line-sm {
|
|
@apply w-1/3;
|
|
}
|
|
|
|
.skeleton-line-md {
|
|
@apply w-2/3;
|
|
}
|
|
|
|
.skeleton-line-lg {
|
|
@apply w-4/5;
|
|
}
|
|
|
|
.skeleton-line-xl {
|
|
@apply w-full;
|
|
}
|
|
|
|
.skeleton-page {
|
|
@apply h-full p-4;
|
|
}
|
|
|
|
.skeleton-page > :not([hidden]) ~ :not([hidden]) {
|
|
margin-top: 1rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.skeleton-header {
|
|
@apply mb-6;
|
|
}
|
|
|
|
.skeleton-body > :not([hidden]) ~ :not([hidden]) {
|
|
margin-top: 0.75rem;
|
|
margin-bottom: 0;
|
|
}
|