jakelazaroff.com
a proof of concept realtime collaborative todo list
7.1 kB
461 lines
1:root {
2 color-scheme: light dark;
3 font-family: system-ui, sans-serif;
4}
5
6body {
7 max-width: 720px;
8 margin: 2rem auto;
9 padding: 0 1rem;
10}
11
12a {
13 color: inherit;
14}
15
16h1 a {
17 text-decoration: none;
18}
19
20.topbar {
21 display: flex;
22 align-items: baseline;
23 justify-content: space-between;
24 gap: 1rem;
25 margin-bottom: 1.5rem;
26 flex-wrap: wrap;
27}
28
29.topbar h1 {
30 margin: 0;
31}
32
33.who {
34 display: flex;
35 align-items: center;
36 gap: 0.5rem;
37 font-size: 0.85rem;
38 opacity: 0.7;
39}
40
41.who code {
42 font-size: 0.8em;
43 word-break: break-all;
44}
45
46form {
47 display: flex;
48 gap: 0.5rem;
49 margin: 0.75rem 0;
50 align-items: baseline;
51}
52
53input:not([type="checkbox"]) {
54 flex: 1;
55 padding: 0.5rem;
56 font: inherit;
57 min-width: 0;
58}
59
60button {
61 padding: 0.5rem 1rem;
62 font: inherit;
63 cursor: pointer;
64}
65
66button.x {
67 padding: 0 0.5rem;
68 background: none;
69 border: none;
70 font-size: 1.2em;
71 opacity: 0.4;
72 cursor: pointer;
73}
74
75button.x:hover {
76 opacity: 1;
77}
78
79pre {
80 white-space: pre-wrap;
81 word-break: break-word;
82}
83
84.error {
85 color: #c00;
86}
87
88.empty {
89 opacity: 0.5;
90 font-style: italic;
91}
92
93ul.lists,
94ul.items,
95ul.editors {
96 list-style: none;
97 padding: 0;
98 margin: 1rem 0;
99}
100
101ul.lists li {
102 display: flex;
103 align-items: center;
104 gap: 0.5rem;
105 padding: 0.5rem 0;
106 border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
107}
108
109ul.lists a {
110 flex: 1;
111 text-decoration: none;
112 font-weight: 500;
113}
114
115ul.lists a:hover {
116 text-decoration: underline;
117}
118
119.badge {
120 font-size: 0.7em;
121 padding: 0.1em 0.5em;
122 border-radius: 999px;
123 background: color-mix(in srgb, currentColor 12%, transparent);
124 opacity: 0.7;
125}
126
127.list-header {
128 display: flex;
129 align-items: baseline;
130 justify-content: space-between;
131 gap: 1rem;
132 margin-top: 1.5rem;
133}
134
135ul.items li {
136 display: flex;
137 align-items: center;
138 gap: 0.5rem;
139 padding: 0.4rem 0;
140 border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
141}
142
143ul.items .text {
144 flex: 1;
145 cursor: text;
146 padding: 0.2rem 0;
147}
148
149ul.items input.edit {
150 flex: 1;
151 padding: 0.2rem;
152}
153
154ul.items .item.done .text {
155 text-decoration: line-through;
156 opacity: 0.5;
157}
158
159ul.editors li {
160 display: flex;
161 align-items: center;
162 gap: 0.5rem;
163 padding: 0.4rem 0;
164 border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
165}
166
167ul.editors code {
168 flex: 1;
169 font-size: 0.85em;
170 word-break: break-all;
171}
172
173.modal-bg {
174 position: fixed;
175 inset: 0;
176 background: rgba(0, 0, 0, 0.4);
177 display: grid;
178 place-items: center;
179 z-index: 100;
180}
181
182.modal {
183 background: Canvas;
184 color: CanvasText;
185 border-radius: 0.5rem;
186 padding: 1.5rem;
187 max-width: min(500px, 90vw);
188 width: 100%;
189 max-height: 80vh;
190 overflow: auto;
191 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
192}
193
194.modal h3 {
195 margin-top: 0;
196}
197
198.modal .close {
199 margin-top: 1rem;
200}
201
202.icon-button {
203 all: unset;
204 cursor: pointer;
205 display: inline-flex;
206 align-items: center;
207 justify-content: center;
208 padding: 0.25rem;
209 border-radius: 4px;
210 color: #888;
211 vertical-align: middle;
212}
213
214.icon-button:hover {
215 color: #333;
216 background: color-mix(in srgb, currentColor 10%, transparent);
217}
218
219/* ── Devtools panel ── */
220
221.devtools-fixed-wrapper {
222 position: fixed;
223 bottom: 0;
224 left: 0;
225 right: 0;
226 display: flex;
227 flex-direction: column;
228 z-index: 1000;
229}
230
231.devtools-resize-handle {
232 height: 6px;
233 cursor: ns-resize;
234 flex-shrink: 0;
235 background: transparent;
236}
237
238.devtools-resize-handle:hover {
239 background: color-mix(in srgb, currentColor 8%, transparent);
240}
241
242.devtools-panel {
243 display: flex;
244 flex-direction: column;
245 border-top: 1px solid #ddd;
246 background: #fff;
247 font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
248 "DejaVu Sans Mono", monospace;
249 font-size: 12px;
250}
251
252.devtools-header {
253 display: flex;
254 align-items: center;
255 gap: 4px;
256 background: #f5f5f5;
257 border-bottom: 1px solid #e0e0e0;
258 height: 32px;
259 padding: 0 6px;
260 flex-shrink: 0;
261}
262
263.devtools-tabs {
264 display: flex;
265 height: 100%;
266 margin-right: 4px;
267}
268
269.devtools-tabs button {
270 all: unset;
271 padding: 0 10px;
272 font-size: 11px;
273 font-family: system-ui, sans-serif;
274 cursor: pointer;
275 color: #666;
276 border-bottom: 2px solid transparent;
277 height: 100%;
278}
279
280.devtools-tabs button:hover {
281 color: #333;
282 background: rgba(0, 0, 0, 0.05);
283}
284
285.devtools-tabs button.active {
286 color: #1a73e8;
287 border-bottom-color: #1a73e8;
288}
289
290.devtools-action {
291 display: flex;
292 align-items: center;
293 gap: 4px;
294 font-size: 11px;
295 font-family: system-ui, sans-serif;
296 padding: 3px 6px !important;
297 color: #888;
298}
299
300.devtools-body {
301 flex: 1;
302 display: flex;
303 overflow: hidden;
304 min-height: 0;
305}
306
307.devtools-tab-content {
308 flex: 1;
309 display: flex;
310 flex-direction: column;
311 overflow: hidden;
312 min-height: 0;
313}
314
315.devtools-subtabs {
316 display: flex;
317 flex-shrink: 0;
318 border-bottom: 1px solid #e8e8e8;
319 padding: 0 4px;
320 overflow-x: auto;
321}
322
323.devtools-subtabs button {
324 all: unset;
325 padding: 5px 10px;
326 font-size: 11px;
327 font-family: system-ui, sans-serif;
328 cursor: pointer;
329 color: #888;
330 border-bottom: 2px solid transparent;
331 white-space: nowrap;
332}
333
334.devtools-subtabs button:hover {
335 color: #333;
336}
337
338.devtools-subtabs button.active {
339 color: #1a73e8;
340 border-bottom-color: #1a73e8;
341}
342
343.devtools-body-inner {
344 flex: 1;
345 display: flex;
346 overflow: hidden;
347 min-width: 0;
348 min-height: 0;
349}
350
351.devtools-body-inner:not(.has-detail) {
352 overflow-y: auto;
353}
354
355.devtools-body-inner.has-detail > .devtools-timeline {
356 width: 340px;
357 flex-shrink: 0;
358 border-right: 1px solid #e8e8e8;
359 overflow-y: auto;
360}
361
362.devtools-empty {
363 color: #999;
364 text-align: center;
365 padding: 24px;
366 font-family: system-ui, sans-serif;
367}
368
369.devtools-timeline {
370 flex: 1;
371 overflow-y: auto;
372 padding: 6px;
373 display: flex;
374 flex-direction: column;
375 gap: 4px;
376}
377
378.devtools-entry {
379 border: 1px solid #eee;
380 border-radius: 5px;
381 padding: 7px 9px;
382 background: #fafafa;
383 cursor: pointer;
384}
385
386.devtools-entry:hover {
387 background: #f0f4ff;
388 border-color: #c8d8ff;
389}
390
391.devtools-entry.active {
392 background: #e8f0fe;
393 border-color: #4285f4;
394}
395
396.devtools-entry-meta {
397 display: flex;
398 align-items: baseline;
399 gap: 8px;
400 margin-bottom: 3px;
401}
402
403.devtools-entry-index {
404 font-size: 10px;
405 font-weight: 700;
406 color: #bbb;
407 min-width: 14px;
408}
409
410.devtools-entry-author {
411 font-weight: 600;
412 font-size: 11px;
413 font-family: system-ui, sans-serif;
414}
415
416.devtools-entry-time {
417 font-size: 10px;
418 color: #aaa;
419 margin-left: auto;
420}
421
422.devtools-entry-uri {
423 font-size: 10px;
424 color: #1a73e8;
425 margin-bottom: 5px;
426 overflow: hidden;
427 text-overflow: ellipsis;
428 white-space: nowrap;
429}
430
431.devtools-entry-json {
432 font-size: 10px;
433 color: #555;
434 margin: 0;
435 white-space: pre;
436 line-height: 1.5;
437 overflow: hidden;
438 max-height: 60px;
439}
440
441.devtools-detail {
442 flex: 1;
443 overflow-y: auto;
444 padding: 10px;
445 min-width: 0;
446}
447
448.devtools-detail-meta {
449 font-size: 11px;
450 color: #888;
451 margin-bottom: 10px;
452 font-family: system-ui, sans-serif;
453}
454
455.devtools-doc-json {
456 font-size: 12px;
457 color: #333;
458 margin: 0;
459 white-space: pre;
460 line-height: 1.5;
461}