social components
inlay.at
atproto
components
sdui
1.card {
2 width: 100%;
3 height: 100%;
4 padding: 48px;
5 box-sizing: border-box;
6 display: flex;
7 align-items: center;
8 justify-content: center;
9}
10.cardInner {
11 width: 100%;
12 max-height: 100%;
13 max-width: 520px;
14 display: flex;
15 flex-direction: column;
16 align-items: center;
17}
18.empty {
19 color: var(--fg-3);
20 font-size: 12px;
21}
22
23/* preview toolbar */
24.toolbar {
25 position: absolute;
26 top: 14px;
27 left: 50%;
28 transform: translateX(-50%);
29 z-index: 20;
30 display: flex;
31 align-items: center;
32 gap: 2px;
33 padding: 4px;
34 background: var(--bg-popover);
35 backdrop-filter: blur(20px) saturate(1.4);
36 -webkit-backdrop-filter: blur(20px) saturate(1.4);
37 border: 1px solid var(--border-10);
38 border-radius: 12px;
39 box-shadow: var(--shadow-sm);
40}
41.toolbarLabel {
42 padding: 5px 8px 5px 10px;
43 font-family:
44 "Rubik",
45 -apple-system,
46 sans-serif;
47 font-size: 12px;
48 font-weight: 600;
49 color: var(--fg-0);
50 white-space: nowrap;
51 overflow: hidden;
52 text-overflow: ellipsis;
53 max-width: 180px;
54 display: inline-flex;
55 align-items: center;
56}
57.toolbarSep {
58 width: 1px;
59 height: 14px;
60 background: var(--border-10);
61 flex-shrink: 0;
62 margin: 0 2px;
63}
64
65/* nav arrows */
66.arrow {
67 position: absolute;
68 top: 0;
69 bottom: 0;
70 width: 56px;
71 min-width: 56px;
72 display: flex;
73 align-items: center;
74 justify-content: center;
75 font-size: 22px;
76 user-select: none;
77 text-decoration: none;
78 color: var(--fg-3);
79 background: none;
80 border: none;
81 padding: 0;
82 cursor: pointer;
83 z-index: 10;
84 transition:
85 color 0.12s,
86 background 0.15s;
87}
88.arrow:hover {
89 color: var(--fg-1);
90 background: var(--border-10);
91}
92.arrowPrev {
93 left: 0;
94}
95.arrowNext {
96 right: 0;
97}
98
99/* inline icon link (inside labels) */
100.inlineIconLink {
101 display: inline-flex;
102 margin-left: 14px;
103 color: var(--fg-2);
104 text-decoration: none;
105 transition: color 0.12s;
106}
107.inlineIconLink:hover {
108 color: var(--fg-1);
109}
110
111/* error box */
112.errorBox {
113 border-radius: 8px;
114 padding: 8px;
115 margin: 4px;
116 font-size: 12px;
117 font-family: "JetBrains Mono", monospace;
118 white-space: pre-wrap;
119 word-break: break-word;
120}
121.errorBoxTitle {
122 font-weight: bold;
123}
124.errorBoxBody {
125 color: var(--fg-2);
126 margin-top: 4px;
127}
128
129/* dirty dot */
130.dirtyDot {
131 display: inline-block;
132 width: 6px;
133 height: 6px;
134 border-radius: 50%;
135 background: var(--accent);
136 flex-shrink: 0;
137}