Share receiver for URLs - save, tag and route elsewhere!
burrito.space
1@font-face {
2 font-family: "ServerMono";
3 src: url("/fonts/ServerMono-Regular.woff2") format("woff2");
4 font-weight: normal;
5 font-style: normal;
6}
7
8@font-face {
9 font-family: "ServerMono";
10 src: url("/fonts/ServerMono-Regular-Italic.woff2") format("woff2");
11 font-weight: normal;
12 font-style: italic;
13}
14
15:root {
16 color-scheme: light dark;
17 font-family: "ServerMono", monospace;
18 font-size: 16px;
19 line-height: 1.5;
20 font-weight: 400;
21 color: #0f0f0f;
22 background-color: #f6f6f6;
23 -webkit-font-smoothing: antialiased;
24 -moz-osx-font-smoothing: grayscale;
25}
26
27* {
28 box-sizing: border-box;
29 margin: 0;
30 padding: 0;
31}
32
33html, body {
34 overflow: hidden;
35 height: 100%;
36}
37
38#root {
39 height: 100%;
40 overflow: hidden;
41}
42
43.app {
44 height: 100%;
45 display: flex;
46 flex-direction: column;
47 overflow: hidden;
48}
49
50/* Main content area - scrollable */
51main.saved-view {
52 flex: 1;
53 overflow-y: auto;
54 -webkit-overflow-scrolling: touch;
55}
56
57header {
58 background: #ffffff;
59 padding: 0.75rem 1rem;
60 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
61 position: sticky;
62 top: 0;
63 z-index: 100;
64 flex-shrink: 0;
65}
66
67header h1 {
68 font-size: 1.1rem;
69 margin: 0;
70 color: #333;
71 display: flex;
72 align-items: center;
73 gap: 0.5rem;
74}
75
76header h1 .url-count {
77 font-weight: 400;
78 opacity: 0.6;
79}
80
81nav {
82 display: flex;
83 gap: 0.5rem;
84}
85
86nav button {
87 flex: 1;
88 padding: 0.5rem 1rem;
89 background: transparent;
90 border: 1px solid #ddd;
91 border-radius: 6px;
92 cursor: pointer;
93 font-weight: 500;
94 transition: all 0.2s;
95}
96
97nav button.active {
98 background: #007aff;
99 color: white;
100 border-color: #007aff;
101}
102
103main {
104 flex: 1;
105 padding: 1rem;
106 max-width: 600px;
107 width: 100%;
108 margin: 0 auto;
109}
110
111.url-input {
112 margin-bottom: 1.5rem;
113}
114
115.url-input label {
116 display: block;
117 margin-bottom: 0.5rem;
118 font-weight: 500;
119 color: #333;
120}
121
122.url-input input {
123 width: 100%;
124 padding: 0.75rem;
125 border: 1px solid #ddd;
126 border-radius: 8px;
127 font-size: 1rem;
128}
129
130.tags-section h2 {
131 font-size: 1.25rem;
132 margin-bottom: 1rem;
133 color: #333;
134}
135
136.tag-list {
137 display: flex;
138 flex-wrap: wrap;
139 gap: 0.5rem;
140 margin-bottom: 1rem;
141}
142
143.tag {
144 padding: 0.5rem 1rem;
145 background: #fff;
146 border: 2px solid #e0e0e0;
147 border-radius: 20px;
148 cursor: pointer;
149 transition: all 0.2s;
150 display: flex;
151 flex-direction: column;
152 align-items: center;
153 gap: 0.25rem;
154}
155
156.tag:hover {
157 border-color: #007aff;
158}
159
160.tag.selected {
161 background: #007aff;
162 color: white;
163 border-color: #007aff;
164}
165
166.tag-stats {
167 font-size: 0.75rem;
168 opacity: 0.7;
169}
170
171.tag.selected .tag-stats {
172 opacity: 0.9;
173}
174
175.new-tag {
176 display: flex;
177 gap: 0.5rem;
178 margin-bottom: 1.5rem;
179}
180
181.new-tag input {
182 flex: 1;
183 padding: 0.75rem;
184 border: 1px solid #ddd;
185 border-radius: 8px;
186 font-size: 1rem;
187}
188
189.new-tag button {
190 padding: 0.75rem 1.5rem;
191 background: #34c759;
192 color: white;
193 border: none;
194 border-radius: 8px;
195 font-weight: 500;
196 cursor: pointer;
197}
198
199.selected-tags {
200 margin-bottom: 1.5rem;
201}
202
203.selected-tags h3 {
204 font-size: 1rem;
205 margin-bottom: 0.5rem;
206 color: #666;
207}
208
209.selected-tag-list {
210 display: flex;
211 flex-wrap: wrap;
212 gap: 0.5rem;
213 min-height: 2rem;
214}
215
216.selected-tag {
217 display: inline-flex;
218 align-items: center;
219 gap: 0.5rem;
220 padding: 0.5rem 0.75rem;
221 background: #007aff;
222 color: white;
223 border-radius: 16px;
224 font-size: 0.9rem;
225}
226
227.selected-tag button {
228 background: none;
229 border: none;
230 color: white;
231 font-size: 1.25rem;
232 cursor: pointer;
233 padding: 0;
234 width: 20px;
235 height: 20px;
236 display: flex;
237 align-items: center;
238 justify-content: center;
239}
240
241.save-button {
242 width: 100%;
243 padding: 1rem;
244 background: #007aff;
245 color: white;
246 border: none;
247 border-radius: 12px;
248 font-size: 1.1rem;
249 font-weight: 600;
250 cursor: pointer;
251 margin-bottom: 1rem;
252}
253
254.save-button:active {
255 background: #0051d5;
256}
257
258.message {
259 padding: 1rem;
260 background: #34c759;
261 color: white;
262 border-radius: 8px;
263 text-align: center;
264}
265
266.saved-view h2 {
267 font-size: 1.25rem;
268 margin-bottom: 1rem;
269 color: #333;
270}
271
272.saved-urls-list {
273 display: flex;
274 flex-direction: column;
275 gap: 1rem;
276 width: 100%;
277}
278
279.saved-url-item {
280 padding: 1rem;
281 background: white;
282 border-radius: 12px;
283 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
284 width: 100%;
285 box-sizing: border-box;
286 overflow: hidden;
287}
288
289.saved-url-item a {
290 color: #007aff;
291 text-decoration: none;
292 font-weight: 500;
293 word-break: break-all;
294}
295
296.saved-url-tags {
297 display: flex;
298 flex-wrap: wrap;
299 gap: 0.5rem;
300 margin-top: 0.75rem;
301}
302
303.saved-url-tag {
304 padding: 0.25rem 0.75rem;
305 background: #e0e0e0;
306 border-radius: 12px;
307 font-size: 0.85rem;
308 color: #333;
309}
310
311.saved-url-date {
312 margin-top: 0.5rem;
313 font-size: 0.85rem;
314 color: #999;
315}
316
317/* URL row with edit button */
318.url-row {
319 display: flex;
320 justify-content: space-between;
321 align-items: flex-start;
322 gap: 0.5rem;
323 width: 100%;
324 overflow: hidden;
325}
326
327.url-row a {
328 flex: 1;
329 min-width: 0;
330 overflow: hidden;
331 text-overflow: ellipsis;
332}
333
334.edit-btn {
335 padding: 0.25rem 0.75rem;
336 background: #e0e0e0;
337 border: none;
338 border-radius: 6px;
339 font-size: 0.85rem;
340 color: #333;
341 cursor: pointer;
342 flex-shrink: 0;
343}
344
345/* Editing mode */
346.saved-url-item.editing {
347 border: 2px solid #007aff;
348 overflow: hidden;
349 max-width: 100%;
350 box-sizing: border-box;
351}
352
353.edit-url-display {
354 color: #007aff;
355 font-weight: 500;
356 font-size: 1rem;
357 line-height: 1.4;
358 word-break: break-word;
359 overflow-wrap: break-word;
360 margin-bottom: 1rem;
361 padding-bottom: 0.75rem;
362}
363
364.edit-url-input {
365 width: 100%;
366 padding: 0.75rem;
367 border: 1px solid #ddd;
368 border-radius: 8px;
369 font-size: 1rem;
370 color: #007aff;
371 box-sizing: border-box;
372 border-bottom: 1px solid #e0e0e0;
373}
374
375.edit-section {
376 margin-bottom: 0.75rem;
377}
378
379.editing-tags {
380 display: flex;
381 flex-wrap: wrap;
382 gap: 0.5rem;
383 min-height: 2rem;
384}
385
386.editing-tag {
387 display: inline-flex;
388 align-items: center;
389 gap: 0.25rem;
390 padding: 0.35rem 0.5rem 0.35rem 0.75rem;
391 background: #007aff;
392 color: white;
393 border-radius: 16px;
394 font-size: 0.85rem;
395}
396
397.editing-tag button {
398 background: none;
399 border: none;
400 color: white;
401 font-size: 1.1rem;
402 cursor: pointer;
403 padding: 0;
404 width: 18px;
405 height: 18px;
406 display: flex;
407 align-items: center;
408 justify-content: center;
409 opacity: 0.8;
410}
411
412.editing-tag button:hover {
413 opacity: 1;
414}
415
416.no-tags {
417 color: #999;
418 font-style: italic;
419 font-size: 0.85rem;
420}
421
422.new-tag-input {
423 display: flex;
424 gap: 0.5rem;
425 max-width: 100%;
426}
427
428.new-tag-input input {
429 flex: 1;
430 min-width: 0;
431 padding: 0.5rem 0.75rem;
432 border: 1px solid #ddd;
433 border-radius: 8px;
434 font-size: 16px; /* Prevents iOS auto-zoom on focus */
435}
436
437.new-tag-input button {
438 padding: 0.5rem 1rem;
439 background: #34c759;
440 color: white;
441 border: none;
442 border-radius: 8px;
443 font-weight: 500;
444 cursor: pointer;
445}
446
447.new-tag-input button:disabled {
448 background: #ccc;
449 cursor: not-allowed;
450}
451
452.all-tags-list {
453 display: flex;
454 flex-wrap: wrap;
455 gap: 0.5rem;
456}
457
458.tag-chip {
459 padding: 0.35rem 0.75rem;
460 background: #e0e0e0;
461 border: 2px solid transparent;
462 border-radius: 16px;
463 font-size: 0.85rem;
464 color: #333;
465 cursor: pointer;
466 transition: all 0.15s;
467}
468
469.tag-chip:hover {
470 border-color: #007aff;
471}
472
473.tag-chip.selected {
474 background: #007aff;
475 color: white;
476}
477
478.edit-buttons {
479 display: flex;
480 gap: 0.75rem;
481 margin-top: 1rem;
482 padding-top: 0.75rem;
483 border-top: 1px solid #e0e0e0;
484}
485
486.edit-buttons button {
487 flex: 1;
488 padding: 0.75rem;
489 border: none;
490 border-radius: 8px;
491 font-size: 1rem;
492 font-weight: 600;
493 cursor: pointer;
494}
495
496.delete-btn {
497 background: #ff3b30;
498 color: white;
499}
500
501.cancel-btn {
502 background: #e0e0e0;
503 color: #333;
504}
505
506.save-btn {
507 background: #007aff;
508 color: white;
509}
510
511body.dark {
512 color: #f6f6f6;
513 background-color: #1c1c1e;
514}
515
516body.dark header {
517 background: #2c2c2e;
518}
519
520body.dark header h1 {
521 color: #f6f6f6;
522}
523
524body.dark header h1 .url-count {
525 opacity: 0.5;
526}
527
528body.dark nav button {
529 color: #f6f6f6;
530 border-color: #444;
531}
532
533body.dark nav button.active {
534 background: #0a84ff;
535 border-color: #0a84ff;
536}
537
538body.dark .url-input label,
539body.dark .tags-section h2,
540body.dark .saved-view h2 {
541 color: #f6f6f6;
542}
543
544body.dark .url-input input,
545body.dark .new-tag input {
546 background: #2c2c2e;
547 border-color: #444;
548 color: #f6f6f6;
549}
550
551body.dark .tag {
552 background: #2c2c2e;
553 border-color: #444;
554 color: #f6f6f6;
555}
556
557body.dark .tag:hover {
558 border-color: #0a84ff;
559}
560
561body.dark .tag.selected {
562 background: #0a84ff;
563 border-color: #0a84ff;
564}
565
566body.dark .selected-tag {
567 background: #0a84ff;
568}
569
570body.dark .save-button {
571 background: #0a84ff;
572}
573
574body.dark .save-button:active {
575 background: #0066cc;
576}
577
578body.dark .saved-url-item {
579 background: #2c2c2e;
580}
581
582body.dark .saved-url-tag {
583 background: #3a3a3c;
584 color: #f6f6f6;
585}
586
587body.dark .edit-btn {
588 background: #3a3a3c;
589 color: #f6f6f6;
590}
591
592body.dark .saved-url-item.editing {
593 border-color: #0a84ff;
594}
595
596body.dark .edit-url-display {
597 color: #0a84ff;
598 border-bottom-color: #444;
599}
600
601body.dark .edit-url-input {
602 background: #1c1c1e;
603 border-color: #444;
604 color: #0a84ff;
605}
606
607body.dark .editing-tag {
608 background: #0a84ff;
609}
610
611body.dark .new-tag-input input {
612 background: #2c2c2e;
613 border-color: #444;
614 color: #f6f6f6;
615}
616
617body.dark .new-tag-input button {
618 background: #30d158;
619}
620
621body.dark .new-tag-input button:disabled {
622 background: #555;
623}
624
625body.dark .tag-chip {
626 background: #3a3a3c;
627 color: #f6f6f6;
628}
629
630body.dark .tag-chip:hover {
631 border-color: #0a84ff;
632}
633
634body.dark .tag-chip.selected {
635 background: #0a84ff;
636}
637
638body.dark .edit-buttons {
639 border-top-color: #444;
640}
641
642body.dark .delete-btn {
643 background: #ff453a;
644}
645
646body.dark .cancel-btn {
647 background: #3a3a3c;
648 color: #f6f6f6;
649}
650
651body.dark .save-btn {
652 background: #0a84ff;
653}
654
655body.dark .no-tags {
656 color: #666;
657}
658
659/* Header layout with buttons */
660header {
661 display: flex;
662 align-items: center;
663 justify-content: space-between;
664}
665
666.header-btn {
667 background: transparent;
668 border: none;
669 padding: 0.5rem;
670 cursor: pointer;
671 display: flex;
672 align-items: center;
673 justify-content: center;
674 color: #007aff;
675 font-size: 1rem;
676}
677
678.header-spacer {
679 width: 44px;
680}
681
682.settings-btn svg {
683 color: #666;
684}
685
686body.dark .settings-btn svg {
687 color: #999;
688}
689
690body.dark .header-btn {
691 color: #0a84ff;
692}
693
694/* Settings view */
695.settings-view {
696 padding: 1rem;
697 max-width: 600px;
698 width: 100%;
699 margin: 0 auto;
700}
701
702.settings-section {
703 background: white;
704 border-radius: 12px;
705 padding: 1.25rem;
706 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
707}
708
709.settings-section h2 {
710 font-size: 1.1rem;
711 margin: 0 0 0.5rem 0;
712 color: #333;
713}
714
715.settings-description {
716 font-size: 0.9rem;
717 color: #666;
718 margin: 0 0 1rem 0;
719 line-height: 1.4;
720}
721
722.webhook-input {
723 display: flex;
724 gap: 0.5rem;
725 margin-bottom: 1rem;
726}
727
728.webhook-input input {
729 flex: 1;
730 padding: 0.75rem;
731 border: 1px solid #ddd;
732 border-radius: 8px;
733 font-size: 16px;
734}
735
736.api-key-field {
737 position: relative;
738}
739
740.api-key-field input {
741 padding-right: 3rem;
742}
743
744.toggle-visibility-btn {
745 position: absolute;
746 right: 0.75rem;
747 top: 50%;
748 transform: translateY(-50%);
749 background: none;
750 border: none;
751 padding: 0.25rem;
752 cursor: pointer;
753 color: #666;
754 display: flex;
755 align-items: center;
756 justify-content: center;
757}
758
759.toggle-visibility-btn:hover {
760 color: #333;
761}
762
763body.dark .toggle-visibility-btn {
764 color: #999;
765}
766
767body.dark .toggle-visibility-btn:hover {
768 color: #ccc;
769}
770
771.save-webhook-btn {
772 padding: 0.75rem 1rem;
773 background: #007aff;
774 color: white;
775 border: none;
776 border-radius: 8px;
777 font-weight: 500;
778 cursor: pointer;
779}
780
781.save-webhook-btn:disabled {
782 background: #ccc;
783 cursor: not-allowed;
784}
785
786.save-settings-btn {
787 width: 100%;
788 padding: 1rem;
789 margin-top: 1rem;
790 background: #007aff;
791 color: white;
792 border: none;
793 border-radius: 12px;
794 font-weight: 600;
795 font-size: 1rem;
796 cursor: pointer;
797}
798
799.save-settings-btn:disabled {
800 background: #ccc;
801 cursor: not-allowed;
802}
803
804.last-sync-info {
805 margin: 1rem 0;
806 font-size: 0.85rem;
807 color: #666;
808 text-align: center;
809}
810
811.sync-btn {
812 width: 100%;
813 padding: 1rem;
814 margin-top: 1rem;
815 background: #34c759;
816 color: white;
817 border: none;
818 border-radius: 12px;
819 font-size: 1rem;
820 font-weight: 600;
821 cursor: pointer;
822}
823
824.sync-btn:disabled {
825 background: #ccc;
826 cursor: not-allowed;
827}
828
829.sync-message {
830 margin-top: 1rem;
831 padding: 0.75rem;
832 border-radius: 8px;
833 text-align: center;
834 font-size: 0.9rem;
835}
836
837.sync-message.success {
838 background: #d4edda;
839 color: #155724;
840}
841
842.sync-message.error {
843 background: #f8d7da;
844 color: #721c24;
845}
846
847/* Dark mode for settings */
848body.dark .settings-section {
849 background: #2c2c2e;
850}
851
852body.dark .settings-section h2 {
853 color: #f6f6f6;
854}
855
856body.dark .settings-description {
857 color: #999;
858}
859
860body.dark .webhook-input input {
861 background: #1c1c1e;
862 border-color: #444;
863 color: #f6f6f6;
864}
865
866body.dark .save-webhook-btn {
867 background: #0a84ff;
868}
869
870body.dark .save-webhook-btn:disabled {
871 background: #555;
872}
873
874body.dark .save-settings-btn {
875 background: #0a84ff;
876}
877
878body.dark .save-settings-btn:disabled {
879 background: #555;
880}
881
882body.dark .sync-btn {
883 background: #30d158;
884}
885
886body.dark .sync-btn:disabled {
887 background: #555;
888}
889
890body.dark .last-sync-info {
891 color: #999;
892}
893
894body.dark .sync-message.success {
895 background: #1e3a29;
896 color: #30d158;
897}
898
899body.dark .sync-message.error {
900 background: #3a1e1e;
901 color: #ff6b6b;
902}