social components
inlay.at
atproto
components
sdui
1.overlay {
2 position: fixed;
3 inset: 0;
4 background: var(--shadow-overlay);
5 z-index: 100;
6}
7.dialog {
8 position: fixed;
9 top: 50%;
10 left: 50%;
11 transform: translate(-50%, -50%);
12 z-index: 101;
13 background: var(--bg-1);
14 border-radius: 12px;
15 padding: 24px;
16 width: 420px;
17 max-height: 80vh;
18 overflow: auto;
19 border: 1px solid var(--border-10);
20 box-shadow: var(--shadow-md);
21 font-family:
22 "Rubik",
23 -apple-system,
24 sans-serif;
25 color: var(--fg-0);
26}
27.header {
28 display: flex;
29 align-items: center;
30 margin-bottom: 12px;
31}
32.title {
33 font-size: 13px;
34 font-weight: 600;
35 flex: 1;
36}
37.actions {
38 display: flex;
39 align-items: center;
40 gap: 8px;
41 margin-top: 10px;
42}
43
44/* content primitives */
45.subtitle {
46 font-size: 12px;
47 color: var(--fg-3);
48 margin-top: -8px;
49 margin-bottom: 16px;
50}
51.label {
52 font-size: 12px;
53 font-weight: 500;
54 margin-bottom: 4px;
55 color: var(--fg-label);
56}
57.row {
58 display: flex;
59 align-items: center;
60 gap: 6px;
61 margin-bottom: 12px;
62}
63.dot {
64 width: 5px;
65 height: 5px;
66 border-radius: 50%;
67 flex-shrink: 0;
68}
69.meta {
70 font-family: "JetBrains Mono", monospace;
71 font-size: 10px;
72 color: var(--fg-3);
73}
74.hint {
75 font-size: 11px;
76 color: var(--fg-2);
77 margin-bottom: 10px;
78 line-height: 1.5;
79}
80.hint code {
81 font-family: "JetBrains Mono", monospace;
82 font-size: 10px;
83 color: var(--fg-0);
84}
85.dns {
86 font-family: "JetBrains Mono", monospace;
87 font-size: 10px;
88 line-height: 1.6;
89 background: var(--border-4);
90 border-radius: 6px;
91 padding: 8px 10px;
92}
93.dnsLabel {
94 color: var(--fg-3);
95 margin-bottom: 2px;
96}
97.dnsValue {
98 font-family: "JetBrains Mono", monospace;
99 font-size: 10px;
100 color: var(--fg-0);
101 background: transparent;
102 border: none;
103 width: 100%;
104 padding: 0;
105 outline: none;
106}
107.dnsValue + .dnsLabel {
108 margin-top: 6px;
109}
110.editor {
111 height: 200px;
112 border-radius: 6px;
113 overflow: hidden;
114 border: 1px solid var(--border-6);
115}
116.danger {
117 background: none;
118 border: none;
119 color: var(--error);
120 cursor: pointer;
121 font-size: 12px;
122 font-weight: 500;
123 font-family:
124 "Rubik",
125 -apple-system,
126 sans-serif;
127 padding: 0;
128}
129.danger:hover {
130 opacity: 0.8;
131}
132.danger:disabled {
133 opacity: 0.5;
134 cursor: default;
135}
136.error {
137 font-size: 10px;
138 color: var(--error);
139 margin-top: 6px;
140 line-height: 1.5;
141}