experiments in a post-browser web
burrito.space
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
10/* Map local variables to Base16 theme */
11:root {
12 --bg-primary: var(--base00);
13 --bg-secondary: var(--base01);
14 --bg-tertiary: var(--base01);
15 --bg-hover: var(--base02);
16 --text-primary: var(--base05);
17 --text-secondary: var(--base04);
18 --text-muted: var(--base03);
19 --border-primary: var(--base02);
20 --border-secondary: var(--base02);
21 --border-light: var(--base01);
22 --input-bg: var(--base00);
23 --input-disabled-bg: var(--base01);
24 --input-disabled-text: var(--base03);
25 --btn-bg: var(--base05);
26 --btn-bg-hover: var(--base06);
27 --btn-text: var(--base00);
28 --btn-disabled-bg: var(--base02);
29 --scrollbar-track: var(--base01);
30 --scrollbar-thumb: var(--base02);
31 --scrollbar-thumb-hover: var(--base03);
32 --error-bg: color-mix(in srgb, var(--base08) 15%, var(--base00));
33 --error-border: var(--base08);
34 --error-text: var(--base08);
35}
36
37body {
38 font-family: var(--theme-font-sans);
39 font-size: 14px;
40 line-height: 1.5;
41 color: var(--text-primary);
42 background: var(--bg-primary);
43}
44
45.settings-layout {
46 display: flex;
47 height: 100vh;
48 overflow: hidden;
49}
50
51/* Sidebar */
52.sidebar {
53 width: 240px;
54 background: var(--bg-secondary);
55 border-right: 1px solid var(--border-primary);
56 display: flex;
57 flex-direction: column;
58 flex-shrink: 0;
59}
60
61.sidebar-header {
62 padding: 24px 20px;
63 border-bottom: 1px solid var(--border-primary);
64}
65
66.sidebar-header h1 {
67 font-size: 18px;
68 font-weight: 600;
69 color: var(--text-primary);
70}
71
72.sidebar-nav {
73 padding: 12px 0;
74 overflow-y: auto;
75 flex: 1;
76 display: flex;
77 flex-direction: column;
78}
79
80.nav-item {
81 display: block;
82 padding: 10px 20px;
83 color: var(--text-secondary);
84 text-decoration: none;
85 cursor: pointer;
86 border-left: 3px solid transparent;
87 transition: none;
88}
89
90.nav-item:hover {
91 background: var(--bg-hover);
92 color: var(--text-primary);
93}
94
95.nav-item.active {
96 background: var(--bg-primary);
97 border-left-color: var(--theme-accent);
98 color: var(--text-primary);
99 font-weight: 500;
100}
101
102/* Extension nav items - visual indicator */
103.nav-item-extension::before {
104 content: '⚙';
105 font-size: 11px;
106 margin-right: 6px;
107 opacity: 0.5;
108}
109
110/* Content Area */
111.content {
112 flex: 1;
113 overflow-y: auto;
114 background: var(--bg-primary);
115}
116
117.section {
118 display: none;
119 padding: 40px;
120 max-width: 800px;
121}
122
123.section.active {
124 display: block;
125}
126
127.section-title {
128 font-size: 24px;
129 font-weight: 600;
130 color: var(--text-primary);
131 margin-bottom: 32px;
132 padding-bottom: 16px;
133 border-bottom: 1px solid var(--border-primary);
134}
135
136/* Form Groups */
137.form-section {
138 margin-bottom: 32px;
139}
140
141.form-section-title {
142 font-size: 16px;
143 font-weight: 600;
144 color: var(--text-primary);
145 margin-bottom: 16px;
146}
147
148.form-group {
149 margin-bottom: 20px;
150}
151
152.form-group label {
153 display: block;
154 font-size: 13px;
155 font-weight: 500;
156 color: var(--text-secondary);
157 margin-bottom: 6px;
158}
159
160.form-group input[type="text"],
161.form-group input[type="number"],
162.form-group input[type="url"],
163.form-group select {
164 width: 100%;
165 padding: 8px 12px;
166 font-size: 14px;
167 font-family: inherit;
168 color: var(--text-primary);
169 background: var(--input-bg);
170 border: 1px solid var(--border-secondary);
171 border-radius: 4px;
172}
173
174.form-group input:focus,
175.form-group select:focus {
176 outline: none;
177 border-color: var(--theme-accent);
178}
179
180.form-group input:disabled {
181 background: var(--input-disabled-bg);
182 color: var(--input-disabled-text);
183 cursor: not-allowed;
184}
185
186.form-group-inline {
187 display: flex;
188 align-items: center;
189 justify-content: space-between;
190 padding: 12px 0;
191 border-bottom: 1px solid var(--border-light);
192}
193
194.form-group-inline:last-child {
195 border-bottom: none;
196}
197
198.form-group-inline label {
199 margin: 0;
200 font-size: 14px;
201 font-weight: 400;
202 color: var(--text-primary);
203}
204
205/* Checkbox */
206.checkbox-wrapper {
207 display: inline-flex;
208 align-items: center;
209}
210
211.checkbox-wrapper input[type="checkbox"] {
212 width: 18px;
213 height: 18px;
214 margin: 0;
215 cursor: pointer;
216 accent-color: var(--theme-accent);
217}
218
219/* Help Text */
220.help-text {
221 font-size: 12px;
222 color: var(--text-muted);
223 margin-top: 4px;
224}
225
226/* Item Card */
227.item-card {
228 padding: 20px;
229 margin-bottom: 16px;
230 background: var(--bg-tertiary);
231 border: 1px solid var(--border-primary);
232 border-radius: 4px;
233}
234
235.item-card-header {
236 display: flex;
237 justify-content: space-between;
238 align-items: center;
239 margin-bottom: 16px;
240 padding-bottom: 12px;
241 border-bottom: 1px solid var(--border-primary);
242 cursor: pointer;
243 user-select: none;
244}
245
246.item-card-header:hover {
247 opacity: 0.8;
248}
249
250.item-card.collapsed .item-card-header {
251 margin-bottom: 0;
252 padding-bottom: 0;
253 border-bottom: none;
254}
255
256.item-card.collapsed .item-card-body {
257 display: none;
258}
259
260.item-card-title {
261 font-size: 15px;
262 font-weight: 600;
263 color: var(--text-primary);
264}
265
266.item-card-title::before {
267 content: '\25BC ';
268 font-size: 10px;
269 margin-right: 6px;
270}
271
272.item-card.collapsed .item-card-title::before {
273 content: '\25B6 ';
274}
275
276.item-card-body .form-group {
277 margin-bottom: 16px;
278}
279
280.item-card-body .form-group:last-child {
281 margin-bottom: 0;
282}
283
284/* Feature List */
285.feature-list {
286 list-style: none;
287}
288
289.feature-item {
290 padding: 16px;
291 margin-bottom: 12px;
292 background: var(--bg-tertiary);
293 border: 1px solid var(--border-primary);
294 border-radius: 4px;
295}
296
297.feature-header {
298 display: flex;
299 justify-content: space-between;
300 align-items: center;
301 margin-bottom: 8px;
302}
303
304.feature-name {
305 font-size: 14px;
306 font-weight: 600;
307 color: var(--text-primary);
308}
309
310.feature-description {
311 font-size: 13px;
312 color: var(--text-muted);
313 line-height: 1.4;
314}
315
316/* Button */
317.btn {
318 padding: 8px 16px;
319 font-size: 13px;
320 font-weight: 500;
321 font-family: inherit;
322 color: var(--btn-text);
323 background: var(--btn-bg);
324 border: 1px solid var(--btn-bg);
325 border-radius: 4px;
326 cursor: pointer;
327}
328
329.btn:hover {
330 background: var(--btn-bg-hover);
331 border-color: var(--btn-bg-hover);
332}
333
334.btn:disabled {
335 background: var(--btn-disabled-bg);
336 border-color: var(--btn-disabled-bg);
337 cursor: not-allowed;
338}
339
340/* Scrollbar */
341::-webkit-scrollbar {
342 width: 12px;
343}
344
345::-webkit-scrollbar-track {
346 background: var(--scrollbar-track);
347}
348
349::-webkit-scrollbar-thumb {
350 background: var(--scrollbar-thumb);
351 border-radius: 6px;
352}
353
354::-webkit-scrollbar-thumb:hover {
355 background: var(--scrollbar-thumb-hover);
356}
357
358/* Responsive */
359@media (max-width: 768px) {
360 .settings-layout {
361 flex-direction: column;
362 }
363
364 .sidebar {
365 width: 100%;
366 border-right: none;
367 border-bottom: 1px solid var(--border-primary);
368 }
369
370 .sidebar-nav {
371 display: flex;
372 overflow-x: auto;
373 padding: 0;
374 }
375
376 .nav-item {
377 flex-shrink: 0;
378 border-left: none;
379 border-bottom: 3px solid transparent;
380 }
381
382 .nav-item.active {
383 border-left: none;
384 border-bottom-color: var(--theme-accent);
385 }
386
387 .section {
388 padding: 24px 20px;
389 }
390}
391
392/* Visual feedback during drag */
393body.is-dragging {
394 cursor: grabbing !important;
395}
396
397body.is-dragging * {
398 cursor: grabbing !important;
399 user-select: none !important;
400}