(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
CSS
at ui-refactor
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; }}
.skeleton { background: linear-gradient( 90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);}
.skeleton-card { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-sm);}
.skeleton-header { display: flex; align-items: center; gap: var(--spacing-sm);}
.skeleton-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); flex-shrink: 0;}
.skeleton-meta { display: flex; flex-direction: column; gap: 4px;}
.skeleton-name { width: 100px; height: 12px;}
.skeleton-handle { width: 70px; height: 10px;}
.skeleton-content { display: flex; flex-direction: column; gap: var(--spacing-sm); padding-left: 40px;}
.skeleton-source { width: 140px; height: 10px;}
.skeleton-highlight { width: 100%; height: 48px; border-radius: var(--radius-sm);}
.skeleton-text-1 { width: 85%; height: 12px;}
.skeleton-text-2 { width: 55%; height: 12px;}
.skeleton-actions { display: flex; gap: var(--spacing-md); padding-left: 40px; margin-top: var(--spacing-xs);}
.skeleton-action { width: 20px; height: 20px; border-radius: var(--radius-sm);}
@media (max-width: 768px) { .skeleton-content, .skeleton-actions { padding-left: 0; }}