social components
inlay.at
atproto
components
sdui
1/* Structural reset for inlay custom elements.
2 Display modes, flex, sizing. No visual styling.
3 Everything visual comes from host-theme.css. */
4
5at-inlay-root {
6 display: block;
7 width: fit-content;
8 max-width: 100%;
9 max-height: 100%;
10 box-sizing: border-box;
11 overflow-y: auto;
12 overflow-x: hidden;
13 overflow-wrap: break-word;
14 position: relative;
15}
16at-inlay-root[data-page] {
17 width: 100%;
18 max-width: 600px;
19}
20at-inlay-root[data-full] {
21 width: 100%;
22 min-height: 100%;
23 max-width: none;
24 max-height: none;
25 border-radius: 0;
26}
27at-inlay-root:has(org-atsui-stack),
28at-inlay-root:has(org-atsui-cluster) {
29 width: 100%;
30}
31
32/* Stack — vertical flex, fills parent width */
33
34org-atsui-stack {
35 display: flex;
36 flex-direction: column;
37 width: 100%;
38 box-sizing: border-box;
39 text-align: inherit;
40}
41org-atsui-stack[align="start"] {
42 align-items: flex-start;
43}
44org-atsui-stack[align="center"] {
45 align-items: center;
46}
47org-atsui-stack[align="end"] {
48 align-items: flex-end;
49}
50org-atsui-stack[align="stretch"] {
51 align-items: stretch;
52}
53org-atsui-stack[sticky] {
54 position: sticky;
55 top: 0;
56 z-index: 1;
57}
58
59/* Row — horizontal flex, hugs content */
60
61org-atsui-row {
62 display: flex;
63 flex-direction: row;
64 flex-wrap: nowrap;
65 align-items: center;
66 text-align: inherit;
67}
68org-atsui-row[align="start"] {
69 align-items: flex-start;
70}
71org-atsui-row[align="center"] {
72 align-items: center;
73}
74org-atsui-row[align="end"] {
75 align-items: flex-end;
76}
77org-atsui-row[sticky] {
78 position: sticky;
79 top: 0;
80 z-index: 1;
81}
82
83/* Justify — shared between Stack and Row */
84
85:is(org-atsui-stack, org-atsui-row)[justify="between"] {
86 justify-content: space-between;
87}
88:is(org-atsui-stack, org-atsui-row)[justify="center"] {
89 justify-content: center;
90}
91:is(org-atsui-stack, org-atsui-row)[justify="end"] {
92 justify-content: flex-end;
93}
94
95/* Fill — greedy child, takes remaining space on parent main axis */
96
97org-atsui-fill {
98 display: flex;
99 flex-direction: column;
100 flex: 1;
101 min-width: 0;
102 min-height: 0;
103}
104
105/* Text elements */
106
107org-atsui-title,
108org-atsui-heading,
109org-atsui-text,
110org-atsui-caption {
111 display: block;
112 overflow-wrap: break-word;
113}
114org-atsui-timestamp {
115 display: inline;
116}
117
118/* Avatar — fixed dimensions, never stretches */
119
120org-atsui-avatar {
121 display: block;
122 overflow: hidden;
123 flex-shrink: 0;
124 background: var(--gray-4, #e0e0e0);
125}
126:where(org-atsui-avatar[size="xsmall"]) {
127 width: 20px;
128 height: 20px;
129}
130:where(org-atsui-avatar[size="small"]) {
131 width: 32px;
132 height: 32px;
133}
134:where(org-atsui-avatar[size="medium"]) {
135 width: 48px;
136 height: 48px;
137}
138:where(org-atsui-avatar[size="large"]) {
139 width: 80px;
140 height: 80px;
141}
142org-atsui-avatar img {
143 width: 100%;
144 height: 100%;
145 object-fit: cover;
146 display: block;
147}
148
149/* Cover — full-bleed background image */
150
151org-atsui-cover {
152 display: block;
153 width: 100%;
154 background: var(--gray-4, #e0e0e0);
155}
156org-atsui-cover::before {
157 content: "";
158 display: block;
159}
160
161/* Clip — constrains child height relative to own width.
162 cqi custom props are set on the outer element; the inner
163 div resolves them relative to Clip's inline size. */
164
165org-atsui-clip {
166 display: block;
167 container-type: inline-size;
168}
169org-atsui-clip > div {
170 display: grid;
171 grid-template-rows: auto;
172 min-height: var(--clip-min, 0px);
173 max-height: var(--clip-max, none);
174 overflow: hidden;
175}
176
177/* Blob — image container */
178
179org-atsui-blob {
180 display: block;
181 overflow: hidden;
182 width: 100%;
183}
184org-atsui-blob[fit] {
185 height: 100%;
186}
187org-atsui-blob img {
188 display: block;
189 width: 100%;
190 object-fit: cover;
191}
192org-atsui-blob[fit] img {
193 height: 100%;
194}
195org-atsui-blob[fit="contain"] img {
196 object-fit: contain;
197}
198
199/* Link — transparent wrapper */
200
201org-atsui-link {
202 display: contents;
203}
204org-atsui-link a {
205 overflow-wrap: break-word;
206 min-width: 0;
207}
208
209/* Tabs */
210
211org-atsui-tabs {
212 display: flex;
213 flex-direction: column;
214}
215org-atsui-tabs .tabs-bar {
216 display: flex;
217 flex-direction: row;
218 position: sticky;
219 top: 0;
220 z-index: 1;
221}
222org-atsui-tabs .tabs-bar button {
223 all: unset;
224 cursor: pointer;
225}
226
227/* Cluster — circle-packed layout */
228
229org-atsui-cluster {
230 display: block;
231 position: relative;
232 margin: 0 auto;
233}
234org-atsui-cluster > div {
235 display: grid;
236}
237org-atsui-cluster > div * {
238 min-width: 0;
239 min-height: 0;
240 width: 100%;
241 height: 100%;
242}
243
244/* Grid — equal columns */
245
246org-atsui-grid {
247 display: grid;
248 grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
249 width: 100%;
250}