social components
inlay.at
atproto
components
sdui
1.root {
2 display: flex;
3 flex-direction: column;
4 height: 100%;
5 min-width: 0;
6}
7.request {
8 flex-shrink: 0;
9}
10.callRow {
11 padding: 8px 12px;
12 display: flex;
13 flex-wrap: wrap;
14 align-items: center;
15 gap: 6px 8px;
16 border-bottom: 1px solid var(--border-8);
17}
18.callCode {
19 font-family: "JetBrains Mono", monospace;
20 font-size: 12px;
21 color: var(--fg-code);
22 white-space: nowrap;
23}
24.callBar {
25 padding: 6px 12px;
26 display: flex;
27 align-items: center;
28 gap: 8px;
29 border-bottom: 1px solid var(--border-8);
30}
31.callRight {
32 margin-left: auto;
33 display: flex;
34 align-items: center;
35 gap: 8px;
36}
37.response {
38 flex: 1;
39 overflow: hidden;
40 display: flex;
41 flex-direction: column;
42 position: relative;
43}
44.responseInner {
45 flex: 1;
46 overflow: hidden;
47 position: relative;
48}
49.error {
50 padding: 8px 12px;
51 color: var(--error);
52 font-family: "JetBrains Mono", monospace;
53 font-size: 12px;
54 white-space: pre-wrap;
55}
56.timing {
57 font-family: "JetBrains Mono", monospace;
58 font-size: 10px;
59 color: var(--fg-2);
60 padding: 2px 7px;
61 background: var(--border-6);
62 border-radius: 4px;
63}
64.valLink {
65 font-size: 11px;
66 color: var(--accent);
67 font-family:
68 "Rubik",
69 -apple-system,
70 sans-serif;
71 text-decoration: none;
72 transition: filter 0.12s;
73}
74.valLink:hover {
75 filter: brightness(1.2);
76}
77.empty {
78 display: flex;
79 align-items: center;
80 justify-content: center;
81 height: 100%;
82 color: var(--fg-3);
83 font-size: 12px;
84 font-family:
85 "Rubik",
86 -apple-system,
87 sans-serif;
88}
89
90/* Gear button */
91.gearBtn {
92 display: flex;
93 align-items: center;
94 justify-content: center;
95 width: 24px;
96 height: 24px;
97 background: none;
98 border: none;
99 border-radius: 4px;
100 color: var(--fg-2);
101 cursor: pointer;
102 transition:
103 color 0.12s,
104 background 0.12s;
105}
106.gearBtn:hover {
107 color: var(--fg-0);
108 background: var(--border-6);
109}
110
111/* Settings modal */
112.radioRow {
113 display: flex;
114 align-items: center;
115 gap: 8px;
116 cursor: pointer;
117 color: var(--fg-1);
118 font-size: 12px;
119 margin-bottom: 4px;
120}
121.radioRow input[type="radio"] {
122 accent-color: var(--fg-1);
123 margin: 0;
124}
125.radioDetail {
126 padding-left: 22px;
127 margin-bottom: 8px;
128}
129.valDisplay {
130 display: flex;
131 align-items: center;
132 gap: 8px;
133}
134.valDisplay button {
135 margin-left: auto;
136}
137.valDisplayLink {
138 font-family: "JetBrains Mono", monospace;
139 font-size: 11px;
140 color: var(--fg-1);
141 text-decoration: none;
142 transition: color 0.12s;
143}
144.valDisplayLink:hover {
145 color: var(--fg-0);
146 text-decoration: underline;
147}
148.valInputRow {
149 display: flex;
150 align-items: center;
151 gap: 6px;
152}
153.valInputRow input {
154 flex: 1;
155 min-width: 0;
156}
157.settingsDivider {
158 border-top: 1px solid var(--border-8);
159 margin: 16px 0;
160}