social components
inlay.at
atproto
components
sdui
1/* app/globals.css */
2* {
3 box-sizing: border-box;
4 margin: 0;
5 padding: 0;
6}
7
8:root {
9 color-scheme: dark;
10
11 /* Backgrounds (darkest → lightest) */
12 --bg-0: #111115;
13 --bg-1: #1a1a21;
14 --bg-2: #222229;
15 --bg-3: #28282f;
16 --bg-4: #303038;
17 --bg-disabled: #333;
18
19 /* Text (brightest → dimmest) */
20 --fg-0: #e8e8ef;
21 --fg-1: #b0b0be;
22 --fg-2: #6e6e7e;
23 --fg-3: #44444f;
24 --fg-4: #303038;
25 --fg-code: #d4d4de;
26 --fg-label: #6e6e7e;
27
28 /* Accent */
29 --accent: #38bdf8;
30 --accent-fg: #0c1929;
31 --accent-10: rgba(56, 189, 248, 0.1);
32 --accent-15: rgba(56, 189, 248, 0.15);
33 --accent-18: rgba(56, 189, 248, 0.18);
34 --accent-20: rgba(56, 189, 248, 0.2);
35 --accent-25: rgba(56, 189, 248, 0.25);
36 --accent-30: rgba(56, 189, 248, 0.3);
37 --accent-40: rgba(56, 189, 248, 0.4);
38 --accent-50: rgba(56, 189, 248, 0.5);
39
40 /* Borders */
41 --border-4: rgba(255, 255, 255, 0.04);
42 --border-6: rgba(255, 255, 255, 0.06);
43 --border-8: rgba(255, 255, 255, 0.08);
44 --border-10: rgba(255, 255, 255, 0.1);
45 --border-12: rgba(255, 255, 255, 0.12);
46
47 /* Status */
48 --error: #fb7185;
49 --error-bg: rgba(251, 113, 133, 0.1);
50 --error-strong: #f43f5e;
51 --link: #38bdf8;
52 --danger: #fb7185;
53 --icon-muted: #6e6e7e;
54
55 /* Shadows */
56 --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);
57 --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
58 --shadow-overlay: rgba(0, 0, 0, 0.3);
59
60 /* Editor */
61 --editor-bg: #131318;
62 --editor-bg-ro: #0e0e12;
63 --focus-ring: rgba(56, 189, 248, 0.4);
64
65 /* Popover/overlay backgrounds */
66 --bg-popover: rgba(26, 26, 33, 0.94);
67 --bg-overlay-btn: rgba(26, 26, 33, 0.9);
68
69 /* Syntax highlighting */
70 --syn-string: #4ade80;
71 --syn-keyword: #34d399;
72 --syn-bool: #fb7185;
73 --syn-null: #44444f;
74 --syn-prop: #38bdf8;
75 --syn-var: #d4d4de;
76 --syn-builtin: #b482ff;
77 --syn-unlinked: #fbbf24;
78 --syn-info: #6e6e7e;
79
80 /* Misc */
81 --btn-gradient: linear-gradient(135deg, #38bdf8, #818cf8, #a78bfa);
82
83 /* Overrides */
84 --override-pink: #f9a8d4;
85}
86
87@media (prefers-color-scheme: light) {
88 :root {
89 color-scheme: light;
90
91 --bg-0: #eef0f4;
92 --bg-1: #ffffff;
93 --bg-2: #f5f6f9;
94 --bg-3: #eef0f4;
95 --bg-4: #e8eaef;
96 --bg-disabled: #c5c9d4;
97
98 --fg-0: #111318;
99 --fg-1: #3d4150;
100 --fg-2: #6b7085;
101 --fg-3: #a0a5b5;
102 --fg-4: #c5c9d4;
103 --fg-code: #111318;
104 --fg-label: #6b7085;
105
106 --accent: #0ea5e9;
107 --accent-fg: #fff;
108 --accent-10: rgba(14, 165, 233, 0.08);
109 --accent-15: rgba(14, 165, 233, 0.1);
110 --accent-18: rgba(14, 165, 233, 0.12);
111 --accent-20: rgba(14, 165, 233, 0.16);
112 --accent-25: rgba(14, 165, 233, 0.2);
113 --accent-30: rgba(14, 165, 233, 0.24);
114 --accent-40: rgba(14, 165, 233, 0.32);
115 --accent-50: rgba(14, 165, 233, 0.4);
116
117 --border-4: rgba(0, 0, 0, 0.04);
118 --border-6: rgba(0, 0, 0, 0.05);
119 --border-8: rgba(0, 0, 0, 0.07);
120 --border-10: rgba(0, 0, 0, 0.1);
121 --border-12: rgba(0, 0, 0, 0.13);
122
123 --error: #ef4444;
124 --error-bg: rgba(239, 68, 68, 0.08);
125 --error-strong: #dc2626;
126 --link: #0ea5e9;
127 --danger: #ef4444;
128 --icon-muted: #a0a5b5;
129
130 --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08);
131 --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
132 --shadow-overlay: rgba(0, 0, 0, 0.12);
133
134 --editor-bg: #f8f9fb;
135 --editor-bg-ro: #eef0f4;
136 --focus-ring: rgba(14, 165, 233, 0.4);
137
138 --bg-popover: rgba(255, 255, 255, 0.98);
139 --bg-overlay-btn: rgba(255, 255, 255, 0.9);
140
141 --syn-string: #16a34a;
142 --syn-keyword: #059669;
143 --syn-bool: #ef4444;
144 --syn-null: #a0a5b5;
145 --syn-prop: #0ea5e9;
146 --syn-var: #111318;
147 --syn-builtin: #6d28d9;
148 --syn-unlinked: #d97706;
149 --syn-info: #6b7085;
150
151 --btn-gradient: linear-gradient(135deg, #0ea5e9, #6366f1, #8b5cf6);
152
153 --override-pink: #ec4899;
154 }
155}
156
157html,
158body {
159 height: 100%;
160 width: 100%;
161 background-color: var(--bg-0);
162}
163
164body {
165 font-family:
166 "Rubik",
167 -apple-system,
168 sans-serif;
169 font-size: 14px;
170 line-height: 1.5;
171 position: relative;
172 color: var(--fg-0);
173 -webkit-font-smoothing: antialiased;
174}
175
176pre {
177 background: var(--bg-2);
178 padding: 1rem;
179 overflow-x: auto;
180 border-radius: 4px;
181 margin: 0.5rem 0;
182}
183
184input:focus,
185textarea:focus {
186 outline: 1px solid var(--focus-ring);
187 outline-offset: -1px;
188}
189
190.refresh-btn {
191 position: absolute;
192 top: 8px;
193 right: 8px;
194 width: 26px;
195 height: 26px;
196 border-radius: 5px;
197 border: 1px solid transparent;
198 background: transparent;
199 cursor: pointer;
200 color: var(--fg-3);
201 display: flex;
202 align-items: center;
203 justify-content: center;
204 opacity: 0;
205 transition:
206 opacity 0.15s,
207 border-color 0.15s,
208 color 0.15s;
209}
210
211*:hover > .refresh-btn {
212 opacity: 1;
213}
214
215.refresh-btn:hover {
216 opacity: 1;
217 border-color: var(--border-12);
218 color: var(--fg-2);
219}