margin.at
1@keyframes shimmer {
2 0% {
3 background-position: -200% 0;
4 }
5
6 100% {
7 background-position: 200% 0;
8 }
9}
10
11.skeleton {
12 background: linear-gradient(
13 90deg,
14 var(--bg-tertiary) 25%,
15 var(--bg-secondary) 50%,
16 var(--bg-tertiary) 75%
17 );
18 background-size: 200% 100%;
19 animation: shimmer 1.5s infinite;
20 border-radius: var(--radius-sm);
21}
22
23.skeleton-card {
24 padding: 24px 0;
25 border-bottom: 1px solid var(--border);
26 display: flex;
27 flex-direction: column;
28 gap: 16px;
29}
30
31.skeleton-header {
32 display: flex;
33 align-items: center;
34 gap: 12px;
35}
36
37.skeleton-avatar {
38 width: 36px;
39 height: 36px;
40 border-radius: 50%;
41}
42
43.skeleton-meta {
44 display: flex;
45 flex-direction: column;
46 gap: 6px;
47}
48
49.skeleton-name {
50 width: 120px;
51 height: 14px;
52}
53
54.skeleton-handle {
55 width: 80px;
56 height: 12px;
57}
58
59.skeleton-content {
60 display: flex;
61 flex-direction: column;
62 gap: 12px;
63 padding-left: 48px;
64}
65
66.skeleton-source {
67 width: 180px;
68 height: 24px;
69 border-radius: var(--radius-full);
70}
71
72.skeleton-highlight {
73 width: 100%;
74 height: 60px;
75 border-left: 2px solid var(--border);
76}
77
78.skeleton-text-1 {
79 width: 90%;
80 height: 14px;
81}
82
83.skeleton-text-2 {
84 width: 60%;
85 height: 14px;
86}
87
88.skeleton-actions {
89 display: flex;
90 gap: 24px;
91 padding-left: 48px;
92 margin-top: 4px;
93}
94
95.skeleton-action {
96 width: 24px;
97 height: 24px;
98 border-radius: var(--radius-sm);
99}
100
101@media (max-width: 600px) {
102 .skeleton-content,
103 .skeleton-actions {
104 padding-left: 0;
105 }
106}