grain.social is a photo sharing platform built on atproto.
grain.social
1/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
2@layer properties;
3@layer theme, base, components, utilities;
4@layer theme {
5 :root, :host {
6 --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7 "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8 --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9 "Courier New", monospace;
10 --color-sky-500: oklch(68.5% 0.169 237.323);
11 --color-zinc-100: oklch(96.7% 0.001 286.375);
12 --color-zinc-200: oklch(92% 0.004 286.32);
13 --color-zinc-500: oklch(55.2% 0.016 285.938);
14 --color-zinc-600: oklch(44.2% 0.017 285.786);
15 --color-zinc-800: oklch(27.4% 0.006 286.033);
16 --color-zinc-900: oklch(21% 0.006 285.885);
17 --color-zinc-950: oklch(14.1% 0.005 285.823);
18 --color-black: #000;
19 --color-white: #fff;
20 --spacing: 0.25rem;
21 --container-md: 28rem;
22 --container-xl: 36rem;
23 --container-5xl: 64rem;
24 --text-xs: 0.75rem;
25 --text-xs--line-height: calc(1 / 0.75);
26 --text-sm: 0.875rem;
27 --text-sm--line-height: calc(1.25 / 0.875);
28 --text-xl: 1.25rem;
29 --text-xl--line-height: calc(1.75 / 1.25);
30 --text-2xl: 1.5rem;
31 --text-2xl--line-height: calc(2 / 1.5);
32 --text-4xl: 2.25rem;
33 --text-4xl--line-height: calc(2.5 / 2.25);
34 --font-weight-semibold: 600;
35 --font-weight-bold: 700;
36 --default-font-family: var(--font-sans);
37 --default-mono-font-family: var(--font-mono);
38 }
39}
40@layer base {
41 *, ::after, ::before, ::backdrop, ::file-selector-button {
42 box-sizing: border-box;
43 margin: 0;
44 padding: 0;
45 border: 0 solid;
46 }
47 html, :host {
48 line-height: 1.5;
49 -webkit-text-size-adjust: 100%;
50 tab-size: 4;
51 font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
52 font-feature-settings: var(--default-font-feature-settings, normal);
53 font-variation-settings: var(--default-font-variation-settings, normal);
54 -webkit-tap-highlight-color: transparent;
55 }
56 hr {
57 height: 0;
58 color: inherit;
59 border-top-width: 1px;
60 }
61 abbr:where([title]) {
62 -webkit-text-decoration: underline dotted;
63 text-decoration: underline dotted;
64 }
65 h1, h2, h3, h4, h5, h6 {
66 font-size: inherit;
67 font-weight: inherit;
68 }
69 a {
70 color: inherit;
71 -webkit-text-decoration: inherit;
72 text-decoration: inherit;
73 }
74 b, strong {
75 font-weight: bolder;
76 }
77 code, kbd, samp, pre {
78 font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
79 font-feature-settings: var(--default-mono-font-feature-settings, normal);
80 font-variation-settings: var(--default-mono-font-variation-settings, normal);
81 font-size: 1em;
82 }
83 small {
84 font-size: 80%;
85 }
86 sub, sup {
87 font-size: 75%;
88 line-height: 0;
89 position: relative;
90 vertical-align: baseline;
91 }
92 sub {
93 bottom: -0.25em;
94 }
95 sup {
96 top: -0.5em;
97 }
98 table {
99 text-indent: 0;
100 border-color: inherit;
101 border-collapse: collapse;
102 }
103 :-moz-focusring {
104 outline: auto;
105 }
106 progress {
107 vertical-align: baseline;
108 }
109 summary {
110 display: list-item;
111 }
112 ol, ul, menu {
113 list-style: none;
114 }
115 img, svg, video, canvas, audio, iframe, embed, object {
116 display: block;
117 vertical-align: middle;
118 }
119 img, video {
120 max-width: 100%;
121 height: auto;
122 }
123 button, input, select, optgroup, textarea, ::file-selector-button {
124 font: inherit;
125 font-feature-settings: inherit;
126 font-variation-settings: inherit;
127 letter-spacing: inherit;
128 color: inherit;
129 border-radius: 0;
130 background-color: transparent;
131 opacity: 1;
132 }
133 :where(select:is([multiple], [size])) optgroup {
134 font-weight: bolder;
135 }
136 :where(select:is([multiple], [size])) optgroup option {
137 padding-inline-start: 20px;
138 }
139 ::file-selector-button {
140 margin-inline-end: 4px;
141 }
142 ::placeholder {
143 opacity: 1;
144 }
145 @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
146 ::placeholder {
147 color: currentcolor;
148 @supports (color: color-mix(in lab, red, red)) {
149 color: color-mix(in oklab, currentcolor 50%, transparent);
150 }
151 }
152 }
153 textarea {
154 resize: vertical;
155 }
156 ::-webkit-search-decoration {
157 -webkit-appearance: none;
158 }
159 ::-webkit-date-and-time-value {
160 min-height: 1lh;
161 text-align: inherit;
162 }
163 ::-webkit-datetime-edit {
164 display: inline-flex;
165 }
166 ::-webkit-datetime-edit-fields-wrapper {
167 padding: 0;
168 }
169 ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
170 padding-block: 0;
171 }
172 :-moz-ui-invalid {
173 box-shadow: none;
174 }
175 button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
176 appearance: button;
177 }
178 ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
179 height: auto;
180 }
181 [hidden]:where(:not([hidden="until-found"])) {
182 display: none !important;
183 }
184}
185@layer utilities {
186 .sr-only {
187 position: absolute;
188 width: 1px;
189 height: 1px;
190 padding: 0;
191 margin: -1px;
192 overflow: hidden;
193 clip: rect(0, 0, 0, 0);
194 white-space: nowrap;
195 border-width: 0;
196 }
197 .absolute {
198 position: absolute;
199 }
200 .relative {
201 position: relative;
202 }
203 .static {
204 position: static;
205 }
206 .inset-0 {
207 inset: calc(var(--spacing) * 0);
208 }
209 .top-1 {
210 top: calc(var(--spacing) * 1);
211 }
212 .top-2 {
213 top: calc(var(--spacing) * 2);
214 }
215 .right-0 {
216 right: calc(var(--spacing) * 0);
217 }
218 .right-1 {
219 right: calc(var(--spacing) * 1);
220 }
221 .right-2 {
222 right: calc(var(--spacing) * 2);
223 }
224 .bottom-0 {
225 bottom: calc(var(--spacing) * 0);
226 }
227 .bottom-1 {
228 bottom: calc(var(--spacing) * 1);
229 }
230 .bottom-2 {
231 bottom: calc(var(--spacing) * 2);
232 }
233 .bottom-\[0\.75rem\] {
234 bottom: 0.75rem;
235 }
236 .left-0 {
237 left: calc(var(--spacing) * 0);
238 }
239 .left-1 {
240 left: calc(var(--spacing) * 1);
241 }
242 .z-10 {
243 z-index: 10;
244 }
245 .z-20 {
246 z-index: 20;
247 }
248 .z-30 {
249 z-index: 30;
250 }
251 .container {
252 width: 100%;
253 @media (width >= 40rem) {
254 max-width: 40rem;
255 }
256 @media (width >= 48rem) {
257 max-width: 48rem;
258 }
259 @media (width >= 64rem) {
260 max-width: 64rem;
261 }
262 @media (width >= 80rem) {
263 max-width: 80rem;
264 }
265 @media (width >= 96rem) {
266 max-width: 96rem;
267 }
268 }
269 .mx-auto {
270 margin-inline: auto;
271 }
272 .my-2 {
273 margin-block: calc(var(--spacing) * 2);
274 }
275 .my-4 {
276 margin-block: calc(var(--spacing) * 4);
277 }
278 .my-30 {
279 margin-block: calc(var(--spacing) * 30);
280 }
281 .mt-2 {
282 margin-top: calc(var(--spacing) * 2);
283 }
284 .mr-1 {
285 margin-right: calc(var(--spacing) * 1);
286 }
287 .mr-2 {
288 margin-right: calc(var(--spacing) * 2);
289 }
290 .mb-2 {
291 margin-bottom: calc(var(--spacing) * 2);
292 }
293 .mb-4 {
294 margin-bottom: calc(var(--spacing) * 4);
295 }
296 .ml-1 {
297 margin-left: calc(var(--spacing) * 1);
298 }
299 .flex {
300 display: flex;
301 }
302 .grid {
303 display: grid;
304 }
305 .hidden {
306 display: none;
307 }
308 .aspect-\[3\/2\] {
309 aspect-ratio: 3/2;
310 }
311 .aspect-square {
312 aspect-ratio: 1 / 1;
313 }
314 .size-4 {
315 width: calc(var(--spacing) * 4);
316 height: calc(var(--spacing) * 4);
317 }
318 .size-16 {
319 width: calc(var(--spacing) * 16);
320 height: calc(var(--spacing) * 16);
321 }
322 .h-0 {
323 height: calc(var(--spacing) * 0);
324 }
325 .h-1\/2 {
326 height: calc(1/2 * 100%);
327 }
328 .h-5 {
329 height: calc(var(--spacing) * 5);
330 }
331 .h-16 {
332 height: calc(var(--spacing) * 16);
333 }
334 .h-\[400px\] {
335 height: 400px;
336 }
337 .h-\[calc\(100vh-100px\)\] {
338 height: calc(100vh - 100px);
339 }
340 .h-full {
341 height: 100%;
342 }
343 .w-1\/3 {
344 width: calc(1/3 * 100%);
345 }
346 .w-2\/3 {
347 width: calc(2/3 * 100%);
348 }
349 .w-5 {
350 width: calc(var(--spacing) * 5);
351 }
352 .w-5xl {
353 width: var(--container-5xl);
354 }
355 .w-16 {
356 width: calc(var(--spacing) * 16);
357 }
358 .w-\[400px\] {
359 width: 400px;
360 }
361 .w-fit {
362 width: fit-content;
363 }
364 .w-full {
365 width: 100%;
366 }
367 .max-w-5xl {
368 max-width: var(--container-5xl);
369 }
370 .max-w-md {
371 max-width: var(--container-md);
372 }
373 .max-w-xl {
374 max-width: var(--container-xl);
375 }
376 .flex-1 {
377 flex: 1;
378 }
379 .cursor-pointer {
380 cursor: pointer;
381 }
382 .resize {
383 resize: both;
384 }
385 .grid-cols-1 {
386 grid-template-columns: repeat(1, minmax(0, 1fr));
387 }
388 .grid-cols-2 {
389 grid-template-columns: repeat(2, minmax(0, 1fr));
390 }
391 .flex-col {
392 flex-direction: column;
393 }
394 .items-center {
395 align-items: center;
396 }
397 .justify-center {
398 justify-content: center;
399 }
400 .gap-2 {
401 gap: calc(var(--spacing) * 2);
402 }
403 .gap-4 {
404 gap: calc(var(--spacing) * 4);
405 }
406 .space-y-1 {
407 :where(& > :not(:last-child)) {
408 --tw-space-y-reverse: 0;
409 margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
410 margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
411 }
412 }
413 .space-y-2 {
414 :where(& > :not(:last-child)) {
415 --tw-space-y-reverse: 0;
416 margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
417 margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
418 }
419 }
420 .space-y-4 {
421 :where(& > :not(:last-child)) {
422 --tw-space-y-reverse: 0;
423 margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
424 margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
425 }
426 }
427 .space-x-2 {
428 :where(& > :not(:last-child)) {
429 --tw-space-x-reverse: 0;
430 margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
431 margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
432 }
433 }
434 .self-start {
435 align-self: flex-start;
436 }
437 .overflow-hidden {
438 overflow: hidden;
439 }
440 .rounded-full {
441 border-radius: calc(infinity * 1px);
442 }
443 .border {
444 border-style: var(--tw-border-style);
445 border-width: 1px;
446 }
447 .border-zinc-200 {
448 border-color: var(--color-zinc-200);
449 }
450 .border-zinc-900 {
451 border-color: var(--color-zinc-900);
452 }
453 .bg-black {
454 background-color: var(--color-black);
455 }
456 .bg-black\/80 {
457 background-color: color-mix(in srgb, #000 80%, transparent);
458 @supports (color: color-mix(in lab, red, red)) {
459 background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
460 }
461 }
462 .bg-zinc-100 {
463 background-color: var(--color-zinc-100);
464 }
465 .bg-zinc-200 {
466 background-color: var(--color-zinc-200);
467 }
468 .bg-zinc-800 {
469 background-color: var(--color-zinc-800);
470 }
471 .bg-zinc-950 {
472 background-color: var(--color-zinc-950);
473 }
474 .object-contain {
475 object-fit: contain;
476 }
477 .object-cover {
478 object-fit: cover;
479 }
480 .p-2 {
481 padding: calc(var(--spacing) * 2);
482 }
483 .p-4 {
484 padding: calc(var(--spacing) * 4);
485 }
486 .px-4 {
487 padding-inline: calc(var(--spacing) * 4);
488 }
489 .px-\[3px\] {
490 padding-inline: 3px;
491 }
492 .py-2 {
493 padding-block: calc(var(--spacing) * 2);
494 }
495 .py-4 {
496 padding-block: calc(var(--spacing) * 4);
497 }
498 .py-\[1px\] {
499 padding-block: 1px;
500 }
501 .pt-4 {
502 padding-top: calc(var(--spacing) * 4);
503 }
504 .text-center {
505 text-align: center;
506 }
507 .text-left {
508 text-align: left;
509 }
510 .font-\[\'Jersey_20\'\] {
511 font-family: 'Jersey 20';
512 }
513 .text-2xl {
514 font-size: var(--text-2xl);
515 line-height: var(--tw-leading, var(--text-2xl--line-height));
516 }
517 .text-4xl {
518 font-size: var(--text-4xl);
519 line-height: var(--tw-leading, var(--text-4xl--line-height));
520 }
521 .text-sm {
522 font-size: var(--text-sm);
523 line-height: var(--tw-leading, var(--text-sm--line-height));
524 }
525 .text-xl {
526 font-size: var(--text-xl);
527 line-height: var(--tw-leading, var(--text-xl--line-height));
528 }
529 .text-xs {
530 font-size: var(--text-xs);
531 line-height: var(--tw-leading, var(--text-xs--line-height));
532 }
533 .text-\[1rem\] {
534 font-size: 1rem;
535 }
536 .text-\[10px\] {
537 font-size: 10px;
538 }
539 .font-bold {
540 --tw-font-weight: var(--font-weight-bold);
541 font-weight: var(--font-weight-bold);
542 }
543 .font-semibold {
544 --tw-font-weight: var(--font-weight-semibold);
545 font-weight: var(--font-weight-semibold);
546 }
547 .text-sky-500 {
548 color: var(--color-sky-500);
549 }
550 .text-white {
551 color: var(--color-white);
552 }
553 .text-zinc-600 {
554 color: var(--color-zinc-600);
555 }
556 .text-zinc-900 {
557 color: var(--color-zinc-900);
558 }
559 .lowercase {
560 text-transform: lowercase;
561 }
562 .ring-sky-500 {
563 --tw-ring-color: var(--color-sky-500);
564 }
565 .group-data-\[added\=true\]\:block {
566 &:is(:where(.group)[data-added="true"] *) {
567 display: block;
568 }
569 }
570 .hover\:underline {
571 &:hover {
572 @media (hover: hover) {
573 text-decoration-line: underline;
574 }
575 }
576 }
577 .disabled\:opacity-50 {
578 &:disabled {
579 opacity: 50%;
580 }
581 }
582 .data-\[added\=true\]\:ring-2 {
583 &[data-added="true"] {
584 --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
585 box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
586 }
587 }
588 .data-\[state\=pending\]\:opacity-50 {
589 &[data-state="pending"] {
590 opacity: 50%;
591 }
592 }
593 .sm\:top-1 {
594 @media (width >= 40rem) {
595 top: calc(var(--spacing) * 1);
596 }
597 }
598 .sm\:right-1 {
599 @media (width >= 40rem) {
600 right: calc(var(--spacing) * 1);
601 }
602 }
603 .sm\:bottom-1 {
604 @media (width >= 40rem) {
605 bottom: calc(var(--spacing) * 1);
606 }
607 }
608 .sm\:left-1 {
609 @media (width >= 40rem) {
610 left: calc(var(--spacing) * 1);
611 }
612 }
613 .sm\:h-screen {
614 @media (width >= 40rem) {
615 height: 100vh;
616 }
617 }
618 .sm\:min-h-screen {
619 @media (width >= 40rem) {
620 min-height: 100vh;
621 }
622 }
623 .sm\:w-fit {
624 @media (width >= 40rem) {
625 width: fit-content;
626 }
627 }
628 .sm\:grid-cols-3 {
629 @media (width >= 40rem) {
630 grid-template-columns: repeat(3, minmax(0, 1fr));
631 }
632 }
633 .sm\:grid-cols-5 {
634 @media (width >= 40rem) {
635 grid-template-columns: repeat(5, minmax(0, 1fr));
636 }
637 }
638 .sm\:flex-row {
639 @media (width >= 40rem) {
640 flex-direction: row;
641 }
642 }
643 .sm\:items-center {
644 @media (width >= 40rem) {
645 align-items: center;
646 }
647 }
648 .sm\:justify-between {
649 @media (width >= 40rem) {
650 justify-content: space-between;
651 }
652 }
653 .sm\:px-0 {
654 @media (width >= 40rem) {
655 padding-inline: calc(var(--spacing) * 0);
656 }
657 }
658 .dark\:border-zinc-800 {
659 @media (prefers-color-scheme: dark) {
660 border-color: var(--color-zinc-800);
661 }
662 }
663 .dark\:bg-zinc-800 {
664 @media (prefers-color-scheme: dark) {
665 background-color: var(--color-zinc-800);
666 }
667 }
668 .dark\:bg-zinc-900 {
669 @media (prefers-color-scheme: dark) {
670 background-color: var(--color-zinc-900);
671 }
672 }
673 .dark\:bg-zinc-950 {
674 @media (prefers-color-scheme: dark) {
675 background-color: var(--color-zinc-950);
676 }
677 }
678 .dark\:text-white {
679 @media (prefers-color-scheme: dark) {
680 color: var(--color-white);
681 }
682 }
683 .dark\:text-zinc-500 {
684 @media (prefers-color-scheme: dark) {
685 color: var(--color-zinc-500);
686 }
687 }
688}
689.htmx-request.htmx-indicator {
690 display: inline;
691}
692.htmx-indicator {
693 display: none;
694}
695.htmx-request #submit-button {
696 opacity: 0.5;
697 pointer-events: none;
698}
699@property --tw-space-y-reverse {
700 syntax: "*";
701 inherits: false;
702 initial-value: 0;
703}
704@property --tw-space-x-reverse {
705 syntax: "*";
706 inherits: false;
707 initial-value: 0;
708}
709@property --tw-border-style {
710 syntax: "*";
711 inherits: false;
712 initial-value: solid;
713}
714@property --tw-font-weight {
715 syntax: "*";
716 inherits: false;
717}
718@property --tw-shadow {
719 syntax: "*";
720 inherits: false;
721 initial-value: 0 0 #0000;
722}
723@property --tw-shadow-color {
724 syntax: "*";
725 inherits: false;
726}
727@property --tw-shadow-alpha {
728 syntax: "<percentage>";
729 inherits: false;
730 initial-value: 100%;
731}
732@property --tw-inset-shadow {
733 syntax: "*";
734 inherits: false;
735 initial-value: 0 0 #0000;
736}
737@property --tw-inset-shadow-color {
738 syntax: "*";
739 inherits: false;
740}
741@property --tw-inset-shadow-alpha {
742 syntax: "<percentage>";
743 inherits: false;
744 initial-value: 100%;
745}
746@property --tw-ring-color {
747 syntax: "*";
748 inherits: false;
749}
750@property --tw-ring-shadow {
751 syntax: "*";
752 inherits: false;
753 initial-value: 0 0 #0000;
754}
755@property --tw-inset-ring-color {
756 syntax: "*";
757 inherits: false;
758}
759@property --tw-inset-ring-shadow {
760 syntax: "*";
761 inherits: false;
762 initial-value: 0 0 #0000;
763}
764@property --tw-ring-inset {
765 syntax: "*";
766 inherits: false;
767}
768@property --tw-ring-offset-width {
769 syntax: "<length>";
770 inherits: false;
771 initial-value: 0px;
772}
773@property --tw-ring-offset-color {
774 syntax: "*";
775 inherits: false;
776 initial-value: #fff;
777}
778@property --tw-ring-offset-shadow {
779 syntax: "*";
780 inherits: false;
781 initial-value: 0 0 #0000;
782}
783@layer properties {
784 @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
785 *, ::before, ::after, ::backdrop {
786 --tw-space-y-reverse: 0;
787 --tw-space-x-reverse: 0;
788 --tw-border-style: solid;
789 --tw-font-weight: initial;
790 --tw-shadow: 0 0 #0000;
791 --tw-shadow-color: initial;
792 --tw-shadow-alpha: 100%;
793 --tw-inset-shadow: 0 0 #0000;
794 --tw-inset-shadow-color: initial;
795 --tw-inset-shadow-alpha: 100%;
796 --tw-ring-color: initial;
797 --tw-ring-shadow: 0 0 #0000;
798 --tw-inset-ring-color: initial;
799 --tw-inset-ring-shadow: 0 0 #0000;
800 --tw-ring-inset: initial;
801 --tw-ring-offset-width: 0px;
802 --tw-ring-offset-color: #fff;
803 --tw-ring-offset-shadow: 0 0 #0000;
804 }
805 }
806}