atproto blogging
nonbinary.computer
1.avatar-item {
2 display: flex;
3 flex-direction: column;
4 align-items: center;
5 gap: 0.5rem;
6}
7
8.avatar-label {
9 margin: 0;
10 color: var(--color-secondary);
11 font-size: 0.875rem;
12}
13
14/* Avatar Component Styles */
15.avatar {
16 position: relative;
17 display: inline-flex;
18 overflow: hidden;
19 width: 64px;
20 height: 64px;
21 flex-shrink: 0;
22 align-items: center;
23 justify-content: center;
24 border-radius: 3.40282e38px;
25 color: var(--color-secondary);
26 cursor: pointer;
27 font-weight: 500;
28}
29
30.avatar-image {
31 width: 100%;
32 height: 100%;
33 aspect-ratio: 1;
34}
35
36/* Avatar sizes */
37.avatar-sm {
38 width: 2rem;
39 height: 2rem;
40 font-size: 0.875rem;
41}
42
43.avatar-md {
44 width: 3rem;
45 height: 3rem;
46 font-size: 1.25rem;
47}
48
49.avatar-lg {
50 width: 4rem;
51 height: 4rem;
52 font-size: 1.75rem;
53}
54
55/* State-specific styles */
56.avatar[data-state="loading"] {
57 animation: pulse 1.5s infinite ease-in-out;
58}
59
60.avatar[data-state="empty"] {
61 background: var(--color-surface);
62}
63
64@keyframes pulse {
65 0% {
66 opacity: 1;
67 }
68
69 50% {
70 opacity: 0.7;
71 }
72
73 100% {
74 opacity: 1;
75 }
76}
77
78.avatar-fallback {
79 display: flex;
80 width: 100%;
81 height: 100%;
82 align-items: center;
83 justify-content: center;
84 background: var(--color-surface);
85 color: var(--color-primary);
86 font-size: 1.5rem;
87}
88
89.avatar[data-state="error"] .avatar-fallback {
90 background: var(--color-surface);
91 color: var(--color-subtle);
92}