atproto blogging
nonbinary.computer
1.record-view-container {
2 max-width: 1200px;
3 margin: 2rem auto;
4 padding: 0 1rem;
5}
6
7.record-header {
8 margin-bottom: 2rem;
9 padding-bottom: 0.5rem;
10 font-family: var(--font-mono);
11 border-bottom: 1px solid var(--color-border);
12}
13
14.record-header h1 {
15 font-family: var(--font-mono);
16 font-size: 1.2rem;
17 font-weight: 400;
18 margin-bottom: 1rem;
19 color: var(--color-text);
20 text-transform: uppercase;
21 letter-spacing: 0.15em;
22}
23
24.uri-input-section {
25 margin-bottom: 1rem;
26}
27
28.uri-input {
29 font-family: var(--font-mono);
30 font-size: 0.9rem;
31 width: 100%;
32 max-width: 100%;
33 box-sizing: border-box;
34 padding: 0.5rem 0.75rem;
35 background: var(--color-surface, rgba(0, 0, 0, 0.2));
36 border: 1px solid var(--color-border);
37 color: var(--color-text);
38 outline: none;
39 transition: border-color 0.2s;
40}
41
42.uri-input:focus {
43 border-color: var(--color-primary);
44}
45
46.uri-input::placeholder {
47 color: var(--color-subtle);
48 opacity: 0.5;
49}
50
51.record-metadata {
52 display: flex-wrap;
53 flex-direction: column;
54 gap: 0.75rem;
55}
56
57.metadata-row {
58 display: flex;
59 gap: 0.5rem;
60 padding: 0.35rem;
61 align-items: baseline;
62}
63
64.metadata-label {
65 font-family: var(--font-mono);
66 color: var(--color-subtle);
67 font-size: 0.85rem;
68 text-transform: uppercase;
69 letter-spacing: 0.1em;
70 white-space: nowrap;
71}
72
73.metadata-label::after {
74 content: ":";
75 font-size: 0.8rem;
76 margin-inline-start: 0.25rem;
77}
78
79.metadata-value {
80 font-family: var(--font-mono);
81 color: var(--color-text);
82 font-size: 1rem;
83 word-break: break-all;
84}
85
86.schema-valid {
87 color: var(--color-success);
88}
89.schema-invalid {
90 color: var(--color-warning);
91}
92
93.uri-link {
94 text-decoration: none;
95}
96
97.uri-link:hover .aturi-scheme,
98.uri-link:hover .aturi-authority,
99.uri-link:hover .aturi-collection,
100.uri-link:hover .aturi-rkey,
101.uri-link:hover .uri-scheme,
102.uri-link:hover .uri-authority,
103.uri-link:hover .uri-path {
104 text-decoration: underline;
105}
106
107.tab-bar {
108 display: flex;
109 gap: 0;
110 border-bottom: 1px solid var(--color-border);
111 margin-top: 1.5rem;
112 align-items: center;
113}
114
115.tab-button {
116 font-family: var(--font-mono);
117 background: transparent;
118 border: none;
119 padding: 0.5rem 1rem;
120 cursor: pointer;
121 color: var(--color-subtle);
122 text-transform: uppercase;
123 font-size: 0.9rem;
124 letter-spacing: 0.1em;
125 border-bottom: 2px solid transparent;
126 margin-bottom: -1px;
127 transition: all 0.2s;
128}
129
130.tab-button:hover {
131 color: var(--color-secondary);
132 font-weight: 550;
133 border-bottom-color: var(--color-secondary);
134}
135
136.tab-button.active {
137 color: var(--color-primary);
138 font-weight: 600;
139 border-bottom-color: var(--color-primary);
140}
141
142.tab-button.edit-button {
143 margin-inline-start: auto;
144}
145
146.action-buttons-group {
147 margin-inline-start: auto;
148 display: flex;
149 gap: 0;
150 align-items: center;
151}
152
153.tab-button.action-button-danger {
154 color: var(--color-error, #ff6b6b);
155}
156
157.tab-button.action-button-danger:hover {
158 color: var(--color-error, #ff5252);
159 border-bottom-color: var(--color-error, #ff6b6b);
160}
161
162.dropdown-wrapper {
163 position: relative;
164 display: inline-block;
165}
166
167.dropdown-menu {
168 position: absolute;
169 top: 100%;
170 left: 0;
171 background: var(--color-background);
172 border: 1px solid var(--color-border);
173 border-radius: 4px;
174 margin-top: 0.25rem;
175 z-index: 100;
176 min-width: 150px;
177}
178
179.dropdown-menu button {
180 display: block;
181 width: 100%;
182 padding: 0.5rem 1rem;
183 background: transparent;
184 border: none;
185 text-align: start;
186 cursor: pointer;
187 color: var(--color-text);
188 font-family: var(--font-mono);
189}
190
191.dropdown-menu button:hover {
192 background: var(--color-hover, rgba(255, 255, 255, 0.05));
193}
194
195.tab-content {
196 min-height: 300px;
197}
198
199.pretty-record {
200 display: flex;
201 flex-direction: column;
202 align-items: flex-start;
203 border-inline-start: 1px dashed var(--color-subtle);
204}
205
206.record-field {
207 display: flex;
208 flex-direction: column;
209 padding: 0rem 0 0rem 1rem;
210 padding-inline-end: 1rem;
211 margin-inline-start: -1px;
212 border-inline-start: 2px solid var(--color-secondary);
213 border-bottom: 1px dashed var(--color-subtle);
214 z-index: 1;
215}
216
217.record-field.field-error {
218 border-inline-start-color: var(--color-error);
219 background-color: rgba(255, 107, 107, 0.05);
220}
221
222.field-error-message {
223 font-family: var(--font-mono);
224 font-size: 0.85rem;
225 color: var(--color-error);
226 padding: 0.25rem 0;
227 border-inline-start: 2px solid var(--color-error);
228 border-bottom: 1px dashed var(--color-error);
229 padding-inline-start: 0.5rem;
230 word-wrap: break-word;
231 margin-inline-start: -1px;
232 word-break: break-word;
233 overflow-wrap: break-word;
234}
235
236.field-label {
237 font-family: var(--font-mono);
238 color: var(--color-subtle);
239 font-size: 0.7rem;
240 padding-top: 0.5rem;
241}
242
243.path-prefix {
244 color: var(--color-subtle);
245}
246
247.path-final {
248 color: var(--color-text);
249 font-weight: 500;
250}
251
252.array-len {
253 font-family: var(--font-mono);
254 color: var(--color-subtle);
255 font-size: 0.9rem;
256 font-weight: 400;
257 padding-inline-start: 0.125rem;
258 padding-top: 0.5rem;
259}
260
261.field-value {
262 font-family: var(--font-mono);
263 color: var(--color-text);
264 font-size: 0.9rem;
265 padding-top: 0.2rem;
266 padding-bottom: 0.1rem;
267 word-break: break-word;
268}
269
270.field-value.muted {
271 color: var(--color-subtle);
272 font-style: italic;
273}
274
275.field-value.mime {
276 color: var(--color-subtle);
277 font-style: italic;
278 font-size: 0.85rem;
279}
280
281.field-value.bytes {
282 color: var(--color-subtle);
283 font-size: 0.75rem;
284}
285
286.record-section {
287 position: relative;
288 margin-inline-start: 1.5rem;
289 border-inline-start: 1px dashed var(--color-border);
290}
291
292.section-content .record-section {
293 position: relative;
294 border-inline-start: 1px dashed var(--color-border);
295}
296
297.array-item .record-section {
298 position: relative;
299 border-inline-start: 1px dashed var(--color-border);
300}
301
302.section-label {
303 font-family: var(--font-mono);
304 color: var(--color-primary);
305 font-size: 1rem;
306 font-weight: 600;
307 padding-inline-start: 1rem;
308 padding-top: 0.5rem;
309 padding-bottom: 0.25rem;
310 margin-inline-start: -1px;
311 border-inline-start: 2px solid var(--color-primary);
312 border-bottom: 1px dashed var(--color-muted);
313}
314
315.section-content .section-label {
316 font-family: var(--font-mono);
317 color: var(--color-tertiary);
318 font-size: 0.9rem;
319 font-weight: 600;
320 padding-inline-start: 1rem;
321 padding-top: 0.5rem;
322 margin-inline-start: -1px;
323 border-inline-start: 2px solid var(--color-secondary);
324}
325
326.section-content {
327 display: flex;
328 flex-direction: column;
329 align-items: flex-start;
330 padding-inline-end: 1rem;
331}
332
333.section-content .record-field {
334 border-inline-start-color: var(--color-secondary);
335 opacity: 0.95;
336 align-self: stretch;
337 width: 100%;
338}
339
340.blob-image {
341 max-width: 600px;
342 max-height: 400px;
343 width: auto;
344 height: auto;
345 object-fit: contain;
346 display: block;
347 margin-top: 0.5rem;
348 margin-bottom: 0.5rem;
349 align-self: flex-start;
350}
351
352.string-type-tag {
353 font-size: 0.7rem;
354 color: var(--color-subtle);
355 text-transform: uppercase;
356 letter-spacing: 0.05em;
357}
358
359.string-did,
360.string-handle,
361.string-at-identifier {
362 color: var(--color-primary);
363}
364
365.string-at-uri,
366.string-uri {
367 color: var(--color-secondary);
368}
369
370.string-cid,
371.string-tid {
372 color: var(--color-tertiary);
373 font-family: var(--font-mono);
374}
375
376.string-nsid {
377 color: var(--color-emphasis);
378}
379
380.string-datetime {
381 color: var(--color-text);
382 font-style: italic;
383}
384
385/* NSID highlighting */
386.nsid-dot {
387 color: var(--color-subtle);
388 opacity: 0.6;
389}
390
391.nsid-segment-0 {
392 color: var(--color-primary);
393}
394
395.nsid-segment-1 {
396 color: var(--color-secondary);
397}
398
399.nsid-segment-2 {
400 color: var(--color-tertiary);
401}
402
403/* DID highlighting */
404.did-scheme {
405 color: var(--color-subtle);
406 opacity: 0.7;
407}
408
409.did-method {
410 color: var(--color-secondary);
411 font-weight: 500;
412}
413
414.did-separator {
415 color: var(--color-muted);
416 opacity: 0.6;
417}
418
419.did-identifier {
420 color: var(--color-primary);
421}
422
423/* Handle highlighting */
424.handle-dot {
425 color: var(--color-subtle);
426 opacity: 0.6;
427}
428
429.handle-segment-0 {
430 color: var(--color-primary);
431 font-weight: 500;
432}
433
434.handle-segment-1 {
435 color: var(--color-secondary);
436}
437
438/* AT URI highlighting */
439.aturi-scheme {
440 color: var(--color-subtle);
441 opacity: 0.7;
442}
443
444.aturi-authority {
445 color: var(--color-primary);
446}
447
448.aturi-slash {
449 color: var(--color-subtle);
450 opacity: 0.6;
451}
452
453.aturi-collection {
454 color: var(--color-secondary);
455}
456
457.aturi-rkey {
458 color: var(--color-tertiary);
459}
460
461/* URI highlighting */
462.uri-scheme {
463 color: var(--color-subtle);
464 opacity: 0.7;
465 font-weight: 500;
466}
467
468.uri-separator {
469 color: var(--color-subtle);
470 opacity: 0.6;
471}
472
473.uri-authority {
474 color: var(--color-primary);
475}
476
477.uri-path {
478 color: var(--color-secondary);
479}
480
481/* JSON Editor */
482.json-editor {
483 display: flex;
484 gap: 1.5rem;
485}
486
487.json-textarea {
488 flex: 1;
489 font-family: var(--font-mono);
490 font-size: 0.9rem;
491 padding: 1rem;
492 margin-top: 1.5rem;
493 background: var(--color-surface, rgba(0, 0, 0, 0.2));
494 border: 1px solid var(--color-border);
495 color: var(--color-text);
496 resize: vertical;
497 line-height: 1.5;
498}
499
500.json-textarea:focus {
501 outline: none;
502 border-color: var(--color-primary);
503}
504
505.validation-panel {
506 flex: 0 0 300px;
507 max-width: 400px;
508 font-family: var(--font-mono);
509 font-size: 0.85rem;
510 padding: 1rem;
511 background: var(--color-surface, rgba(0, 0, 0, 0.2));
512 border: 1px solid var(--color-border);
513 overflow-y: auto;
514 overflow-x: hidden;
515 margin-top: 1.5rem;
516 align-self: flex-start;
517}
518
519.parse-error,
520.validation-errors {
521 color: var(--color-error);
522 margin-top: 0.5rem;
523}
524
525.parse-success,
526.validation-success {
527 color: var(--color-success);
528}
529
530.validation-errors h4 {
531 font-size: 0.9rem;
532 font-weight: 600;
533 margin-bottom: 0.5rem;
534 color: var(--color-text);
535}
536
537.validation-errors .error {
538 padding: 0.25rem 0;
539 border-inline-start: 2px solid var(--color-error);
540 padding-inline-start: 0.5rem;
541 margin: 0.25rem 0;
542 word-wrap: break-word;
543 word-break: break-word;
544 overflow-wrap: break-word;
545}
546
547.validation-warning {
548 color: var(--color-warning, #ffaa00);
549}
550
551/* Array Section Styling */
552.record-section-header {
553 display: flex;
554 align-items: baseline;
555 gap: 0.5rem;
556}
557
558.array-item .record-section-header {
559}
560.array-item .section-content .record-field {
561}
562
563.array-item .record-field {
564}
565
566.array-length {
567 font-family: var(--font-mono);
568 font-size: 0.8rem;
569 color: var(--color-subtle);
570 font-weight: normal;
571}
572
573.array-item {
574 width: 100%;
575 display: flex;
576 flex-direction: column;
577 margin-inline-start: 1.48rem;
578}
579
580/* Pretty Editor Input Fields */
581.record-field input[type="text"],
582.record-field input[type="number"] {
583 font-family: var(--font-mono);
584 font-size: 0.9rem;
585 color: var(--color-text);
586 background: transparent;
587 border: none;
588 border-bottom: 1px solid transparent;
589 padding: 0.2rem 0 0.1rem 0;
590 margin-top: 0.1rem;
591 outline: none;
592 min-width: 10ch;
593 max-width: 100%;
594 width: auto;
595 flex: 1 1 auto;
596 transition: border-color 0.2s;
597}
598
599/* Hide number input spinner arrows */
600.record-field input[type="number"] {
601 -moz-appearance: textfield;
602}
603
604.record-field input[type="number"]::-webkit-outer-spin-button,
605.record-field input[type="number"]::-webkit-inner-spin-button {
606 -webkit-appearance: none;
607 margin: 0;
608}
609
610.record-field textarea {
611 font-family: var(--font-mono);
612 font-size: 0.9rem;
613 color: var(--color-text);
614 background: transparent;
615 border: none;
616 border-bottom: 1px solid transparent;
617 padding: 0.2rem 0 0.1rem 0;
618 margin-top: 0.1rem;
619 outline: none;
620 width: 100%;
621 min-height: 1.5em;
622 transition: border-color 0.2s;
623 overflow-y: hidden;
624}
625
626/* Style textarea resize handle - webkit (Chrome/Safari) */
627.record-field textarea::-webkit-resizer {
628 background: transparent;
629 border: 2px solid var(--color-border);
630 border-inline-start: none;
631 border-bottom: none;
632 border-top: none;
633}
634
635/* Style textarea resize handle - Firefox */
636.record-field textarea {
637 scrollbar-color: var(--color-border) transparent;
638 scrollbar-width: thin;
639}
640
641.record-field input[type="text"]:focus,
642.record-field input[type="number"]:focus,
643.record-field textarea:focus {
644 border-bottom-color: var(--color-primary);
645}
646
647.record-field input[type="text"].invalid,
648.record-field input[type="number"].invalid,
649.record-field textarea.invalid {
650 border-bottom-color: var(--color-error, #ff6b6b);
651}
652
653.boolean-toggle {
654 font-family: var(--font-mono);
655 font-size: 0.9rem;
656 color: var(--color-text);
657 background: var(--color-surface);
658 border: 1px solid var(--color-border);
659 padding: 0.25rem 0.25rem;
660 margin-inline-end: 0.5rem;
661 margin-bottom: 0.2rem;
662 cursor: pointer;
663 transition:
664 background-color 0.2s,
665 border-color 0.2s;
666}
667
668.boolean-toggle-false {
669 color: var(--color-error);
670 border: 1px solid var(--color-error);
671}
672
673.boolean-toggle-true {
674 border: 1px solid var(--color-success);
675}
676
677.boolean-toggle:hover {
678 border: 1px solid var(--color-primary);
679 background-color: var(--color-primary);
680 color: var(--color-surface);
681}
682
683.field-error {
684 font-family: var(--font-mono);
685 font-size: 0.75rem;
686 color: var(--color-error, #ff6b6b);
687 padding-top: 0.2rem;
688 padding-bottom: 0.3rem;
689}
690
691.add-field-widget {
692 display: flex;
693 gap: 0.5rem;
694 align-items: center;
695 padding: 0.75rem 0 0rem 0rem;
696 margin-bottom: 1rem;
697 margin-inline-start: 1.5rem;
698 border-inline-start: 1px solid var(--color-border);
699}
700
701.add-field-widget input[type="text"] {
702 font-family: var(--font-mono);
703 font-size: 0.85rem;
704 color: var(--color-text);
705 background: var(--color-background-alt, rgba(0, 0, 0, 0.2));
706 border: 1px solid var(--color-border);
707 padding: 0.3rem 0.5rem;
708 margin-inline-start: -1px;
709 outline: none;
710}
711
712.add-field-widget input[type="text"]:focus {
713 border-color: var(--color-primary);
714}
715
716.add-field-widget button {
717 font-family: var(--font-mono);
718 font-size: 0.75rem;
719 text-transform: uppercase;
720 letter-spacing: 0.05em;
721 padding: 0.3rem 0.75rem;
722 margin-inline-start: -1px;
723 background: transparent;
724 border: 1px solid var(--color-border);
725 color: var(--color-primary);
726 cursor: pointer;
727 transition: all 0.2s;
728}
729
730.add-field-form button {
731 font-family: var(--font-mono);
732 font-size: 0.75rem;
733 text-transform: uppercase;
734 letter-spacing: 0.05em;
735 padding: 0.36rem 0.75rem;
736 margin-inline-start: -1px;
737 background: transparent;
738 border: 1px solid var(--color-primary);
739 color: var(--color-primary);
740 cursor: pointer;
741 transition: all 0.2s;
742}
743
744.add-field-form button:hover {
745 background-color: var(--color-primary);
746 color: var(--color-surface);
747}
748
749.add-field-widget button:hover {
750 border: 1px solid var(--color-primary);
751 background-color: var(--color-primary);
752 color: var(--color-surface);
753}
754
755.add-field-widget button:disabled {
756 opacity: 0.4;
757 cursor: not-allowed;
758}
759
760.field-header {
761 display: flex;
762 align-items: baseline;
763 gap: 0.5rem;
764}
765
766/* Bytes fields need wider inputs */
767.bytes-field input,
768.bytes-field textarea {
769 min-width: 80ch;
770}
771
772/* Blob upload section */
773.blob-upload-section {
774 margin-top: 0.5rem;
775 display: flex;
776 align-items: center;
777 gap: 0.5rem;
778 flex-wrap: wrap;
779 width: 100%;
780 z-index: 2;
781}
782
783.blob-upload-section input[type="file"] {
784 font-family: var(--font-mono);
785 font-size: 0.85rem;
786 color: var(--color-text);
787 flex: 1 1 auto;
788 min-width: 0;
789 max-width: 100%;
790 overflow: visible;
791 text-overflow: clip;
792 white-space: normal;
793}
794
795.blob-upload-section input[type="file"]::file-selector-button {
796 font-family: var(--font-mono);
797 font-size: 0.85rem;
798 color: var(--color-text);
799 background: var(--color-surface);
800 border: 1px dashed var(--color-border);
801 padding: 0.25rem 0.5rem;
802 margin-inline-end: 0.5rem;
803 margin-bottom: -0.2rem;
804 cursor: pointer;
805 transition:
806 background-color 0.2s,
807 border-color 0.2s;
808}
809
810.blob-upload-section input[type="file"]::file-selector-button:hover {
811 border: 1px solid var(--color-primary);
812 background-color: var(--color-primary);
813 color: var(--color-surface);
814}
815
816.blob-upload-section input[type="file"]:disabled::file-selector-button {
817 opacity: 0.5;
818 cursor: not-allowed;
819}
820
821.upload-status {
822 font-size: 0.85rem;
823 color: var(--color-subtle);
824 font-style: italic;
825}
826
827.field-remove-button {
828 font-family: var(--font-mono);
829 font-size: 0.7rem;
830 color: var(--color-error);
831 background: transparent;
832 border: none;
833 padding: 0.2rem 0.4rem;
834 cursor: pointer;
835 transition: color 0.2s;
836}
837
838.field-remove-button:hover {
839 color: var(--color-warning, #ff6b6b);
840}
841
842/* Blob Field Styling */
843.blob-field {
844 /* Inherits from .record-field */
845}
846
847.blob-fields {
848 display: flex;
849 flex-direction: column;
850 gap: 0.5rem;
851 padding-top: 0.5rem;
852 width: 100%;
853}
854
855.blob-field-row {
856 display: flex;
857 align-items: baseline;
858 gap: 0.5rem;
859 width: 100%;
860}
861
862.blob-field-row label {
863 font-family: var(--font-mono);
864 font-size: 0.75rem;
865 color: var(--color-subtle);
866 min-width: 4rem;
867 text-transform: uppercase;
868 letter-spacing: 0.05em;
869 flex-shrink: 0;
870}
871
872.blob-field-cid {
873 flex-wrap: wrap;
874}
875
876.blob-field-cid input {
877 flex: 1 1 auto;
878 width: 100% !important;
879 min-width: unset !important;
880 max-width: unset !important;
881 font-size: 0.75rem;
882}
883
884.blob-field-row .readonly {
885 font-family: var(--font-mono);
886 font-size: 0.85rem;
887 color: var(--color-text);
888 opacity: 0.7;
889}
890
891.blob-upload-note {
892 font-size: 0.75rem;
893 font-style: italic;
894 padding-top: 0.25rem;
895}
896
897/* Dialog Actions for Delete Confirmation */
898.dialog-actions {
899 display: flex;
900 flex-direction: row;
901 justify-content: flex-end;
902 gap: 0;
903 margin-top: 8px;
904}
905
906.dialog-actions button {
907 font-family: var(--font-mono);
908 font-size: 0.75rem;
909 text-transform: uppercase;
910 letter-spacing: 0.05em;
911 padding: 0.5rem 1rem;
912 background: transparent;
913 border: none;
914 border-bottom: 2px solid transparent;
915 color: var(--color-subtle);
916 cursor: pointer;
917 transition: all 0.2s;
918}
919
920.dialog-actions button:hover {
921 color: var(--color-primary);
922 border-bottom-color: var(--color-primary);
923}
924
925.dialog-actions button:first-child {
926 color: var(--color-error, #ff6b6b);
927}
928
929.dialog-actions button:first-child:hover {
930 color: var(--color-error, #ff5252);
931 border-bottom-color: var(--color-error, #ff6b6b);
932}
933
934.accordion-content {
935 grid-template-rows: 1fr;
936 padding-inline-start: 46px;
937}
938
939.accordion-content .section-content {
940 margin-inline-start: -1px;
941}
942
943.accordion-content .record-field {
944 margin-inline-start: 0px;
945}
946
947.accordion-content .array-item {
948 margin-inline-start: 0px;
949}
950
951.accordion-content .array-item .section-content {
952 border-collapse: collapse;
953}
954
955.accordion-content .array-item .record-section {
956 margin-inline-start: 1.5rem;
957}
958
959.accordion-content .array-item .record-section .record-field {
960 margin-inline-start: -1px;
961}
962
963.accordion-content .array-item .record-section .accordion-trigger .section-label {
964 margin-inline-start: -2px;
965}
966
967.accordion-trigger {
968 background-color: var(--color-base) !important;
969}
970
971.accordion {
972 margin-inline-start: -46px;
973}