burrito.space
experiments in a post-browser web
burrito.tngl.sh
1/* Import theme variables */
2@import url('peek://theme/variables.css');
3
4* {
5 box-sizing: border-box;
6 margin: 0;
7 padding: 0;
8}
9
10html {
11 font-family: var(--theme-font-sans);
12 -webkit-font-smoothing: antialiased;
13 font-size: 14px;
14 line-height: 1.5;
15}
16
17body {
18 background: var(--base00);
19 color: var(--base05);
20 height: 100vh;
21 overflow: hidden;
22}
23
24.container {
25 display: flex;
26 height: 100vh;
27}
28
29/* Left Panel - Scripts List */
30.scripts-list {
31 width: 300px;
32 background: var(--base01);
33 border-right: 1px solid var(--base02);
34 display: flex;
35 flex-direction: column;
36}
37
38.scripts-header {
39 padding: 16px;
40 border-bottom: 1px solid var(--base02);
41}
42
43.scripts-header h1 {
44 font-size: 18px;
45 font-weight: 600;
46 margin-bottom: 12px;
47 color: var(--base05);
48}
49
50.scripts-items {
51 flex: 1;
52 overflow-y: auto;
53 padding: 8px;
54}
55
56.script-item {
57 padding: 12px;
58 margin-bottom: 4px;
59 background: var(--base02);
60 border-radius: 6px;
61 cursor: pointer;
62 border: 2px solid transparent;
63 transition: all 0.15s;
64}
65
66.script-item:hover {
67 background: var(--base03);
68}
69
70.script-item.active {
71 border-color: var(--base0D);
72 background: var(--base03);
73}
74
75.script-item-header {
76 display: flex;
77 align-items: center;
78 gap: 8px;
79 margin-bottom: 4px;
80}
81
82.script-checkbox {
83 margin: 0;
84 accent-color: var(--base0D);
85}
86
87.script-name {
88 flex: 1;
89 font-weight: 500;
90 font-size: 14px;
91 color: var(--base05);
92}
93
94.script-status {
95 width: 8px;
96 height: 8px;
97 border-radius: 50%;
98 background: var(--base04);
99}
100
101.script-status.success {
102 background: var(--base0B);
103}
104
105.script-status.error {
106 background: var(--base08);
107}
108
109.script-meta {
110 font-size: 11px;
111 color: var(--base04);
112 margin-left: 28px;
113}
114
115/* Center Panel - Editor */
116.editor-panel {
117 flex: 1;
118 display: flex;
119 flex-direction: column;
120 background: var(--base00);
121}
122
123.editor-header {
124 padding: 16px;
125 border-bottom: 1px solid var(--base02);
126}
127
128.editor-form {
129 display: flex;
130 flex-direction: column;
131 gap: 12px;
132}
133
134.form-row {
135 display: flex;
136 gap: 12px;
137}
138
139.form-group {
140 display: flex;
141 flex-direction: column;
142 gap: 4px;
143}
144
145.form-group.flex-1 {
146 flex: 1;
147}
148
149.form-group.w-150 {
150 width: 150px;
151}
152
153.form-group label {
154 font-size: 12px;
155 color: var(--base04);
156 font-weight: 500;
157}
158
159/* peek-input customization in form context */
160.form-group peek-input {
161 --peek-input-bg: var(--base01);
162 --peek-input-border: var(--base02);
163 --peek-input-height: 34px;
164}
165
166.form-group select {
167 padding: 6px 8px;
168 background: var(--base01);
169 border: 1px solid var(--base02);
170 color: var(--base05);
171 border-radius: 6px;
172 font-size: 13px;
173 font-family: var(--theme-font-sans);
174 height: 34px;
175}
176
177.form-group select:focus {
178 outline: none;
179 border-color: var(--base0D);
180}
181
182.editor-content {
183 flex: 1;
184 display: flex;
185 flex-direction: column;
186 padding: 16px;
187}
188
189.code-editor {
190 flex: 1;
191 background: var(--base01);
192 color: var(--base05);
193 border: 1px solid var(--base02);
194 border-radius: 6px;
195 padding: 12px;
196 font-family: var(--theme-font-mono, 'Monaco', 'Menlo', 'Consolas', monospace);
197 font-size: 13px;
198 resize: none;
199 outline: none;
200 line-height: 1.5;
201}
202
203.code-editor:focus {
204 border-color: var(--base0D);
205}
206
207.code-editor::placeholder {
208 color: var(--base04);
209}
210
211.editor-actions {
212 padding: 16px;
213 border-top: 1px solid var(--base02);
214 display: flex;
215 gap: 8px;
216}
217
218/* Right Panel - Preview */
219.preview-panel {
220 width: 350px;
221 background: var(--base01);
222 border-left: 1px solid var(--base02);
223 display: flex;
224 flex-direction: column;
225}
226
227.preview-header {
228 padding: 16px;
229 border-bottom: 1px solid var(--base02);
230}
231
232.preview-header h2 {
233 font-size: 14px;
234 font-weight: 600;
235 margin-bottom: 12px;
236 color: var(--base05);
237}
238
239.test-url-group {
240 display: flex;
241 flex-direction: column;
242 gap: 8px;
243}
244
245/* peek-input customization for test URL */
246.test-url-group peek-input {
247 --peek-input-bg: var(--base02);
248 --peek-input-border: var(--base03);
249 --peek-input-height: 36px;
250}
251
252.preview-content {
253 flex: 1;
254 padding: 16px;
255 overflow-y: auto;
256}
257
258.result-box {
259 background: var(--base02);
260 border: 1px solid var(--base03);
261 border-radius: 6px;
262 padding: 12px;
263 margin-bottom: 12px;
264}
265
266.result-status {
267 display: flex;
268 align-items: center;
269 gap: 8px;
270 margin-bottom: 8px;
271 font-size: 13px;
272}
273
274.result-status.success {
275 color: var(--base0B);
276}
277
278.result-status.error {
279 color: var(--base08);
280}
281
282.result-status.skipped {
283 color: var(--base0A);
284}
285
286.result-time {
287 color: var(--base04);
288 font-size: 12px;
289}
290
291.result-label {
292 font-size: 12px;
293 color: var(--base04);
294 font-weight: 500;
295 margin-top: 12px;
296}
297
298.result-data {
299 background: var(--base00);
300 padding: 8px;
301 border-radius: 4px;
302 font-family: var(--theme-font-mono, 'Monaco', 'Menlo', 'Consolas', monospace);
303 font-size: 12px;
304 overflow-x: auto;
305 white-space: pre-wrap;
306 color: var(--base05);
307 margin-top: 4px;
308}
309
310.result-reason {
311 font-size: 12px;
312 color: var(--base04);
313}
314
315.result-stack {
316 margin-top: 8px;
317 font-size: 11px;
318 color: var(--base04);
319}
320
321.result-stack pre {
322 margin-top: 4px;
323 font-family: var(--theme-font-mono, 'Monaco', 'Menlo', 'Consolas', monospace);
324 white-space: pre-wrap;
325}
326
327.empty-state {
328 color: var(--base04);
329 text-align: center;
330 padding: 40px 20px;
331 font-size: 13px;
332}
333
334.console-output {
335 margin-top: 12px;
336}
337
338.console-output h3 {
339 font-size: 12px;
340 color: var(--base04);
341 margin-bottom: 8px;
342}
343
344.console-line {
345 font-family: var(--theme-font-mono, 'Monaco', 'Menlo', 'Consolas', monospace);
346 font-size: 11px;
347 padding: 2px 0;
348}
349
350.console-line.log {
351 color: var(--base05);
352}
353
354.console-line.error {
355 color: var(--base08);
356}
357
358.console-line.warn {
359 color: var(--base0A);
360}