xan.lol
forked from
atpota.to/flushes.app
The 1st decentralized social network for sharing when you're on the toilet. Post a "flush" today! Powered by the AT Protocol.
1.container {
2 max-width: 800px;
3 margin: 0 auto;
4}
5
6.header {
7 display: flex;
8 justify-content: center;
9 align-items: center;
10 margin-bottom: 2rem;
11 text-align: center;
12 width: 100%;
13}
14
15.headerContent {
16 flex: 1;
17 max-width: 400px;
18 display: flex;
19 flex-direction: column;
20 align-items: center;
21}
22
23.tagline {
24 font-size: 1.5rem;
25 margin-bottom: 0.6rem;
26 word-wrap: break-word;
27 hyphens: auto;
28 line-height: 1.5rem;
29 text-align: center;
30 font-weight: 500;
31}
32
33.description {
34 font-size: 1rem;
35 color: var(--text-color);
36 margin: 0 0 0.6rem 0;
37 line-height: 1.4;
38 word-wrap: break-word;
39 text-align: center;
40}
41
42.donateText, .creditLine {
43 font-size: 0.85rem;
44 color: var(--timestamp-color);
45 margin: 0 0 0.4rem 0;
46 line-height: 1.3;
47 word-wrap: break-word;
48 text-align: center;
49}
50
51.kofiLink {
52 color: var(--primary-color);
53 text-decoration: none;
54 transition: color 0.2s;
55}
56
57.kofiLink:hover {
58 text-decoration: underline;
59}
60
61/* Responsive adjustments */
62@media (max-width: 600px) {
63 .tagline {
64 font-size: 1.3rem;
65 line-height: 1.4rem;
66 }
67
68 .description {
69 font-size: 0.95rem;
70 }
71
72 .donateText, .creditLine {
73 font-size: 0.8rem;
74 }
75}
76
77@media (max-width: 400px) {
78 .tagline {
79 font-size: 1.2rem;
80 line-height: 1.3rem;
81 }
82
83 .description {
84 font-size: 0.9rem;
85 }
86
87 .donateText, .creditLine {
88 font-size: 0.75rem;
89 }
90}
91
92/* Rest of your existing CSS */
93
94.userInfo {
95 color: var(--text-color);
96 font-weight: 500;
97 text-decoration: none;
98 transition: color 0.2s;
99}
100
101.userInfo:hover {
102 color: var(--primary-color);
103 text-decoration: underline;
104}
105
106.logoutButton {
107 background-color: transparent;
108 color: var(--primary-color);
109 border: 1px solid var(--primary-color);
110 padding: 0.3rem 0.8rem;
111 font-size: 0.9rem;
112 border-radius: 4px;
113 cursor: pointer;
114 transition: all 0.2s;
115}
116
117.logoutButton:hover {
118 background-color: var(--button-hover);
119}
120
121.loginButton {
122 display: inline-block;
123 background-color: var(--primary-color);
124 color: white;
125 padding: 0.6rem 1.2rem;
126 border-radius: 4px;
127 font-size: 1rem;
128 font-weight: 500;
129 transition: all 0.2s ease;
130 text-decoration: none;
131}
132
133.loginButton:hover {
134 background-color: var(--secondary-color);
135 transform: translateY(-2px);
136}
137
138/* Status form styles */
139.statusUpdateContainer {
140 overflow: hidden;
141 transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease;
142 max-height: 0;
143 opacity: 0;
144 transform: translateY(-20px);
145 margin-bottom: 0;
146}
147
148.statusUpdateOpen {
149 max-height: 1200px; /* Large enough to contain all content */
150 opacity: 1;
151 transform: translateY(0);
152 margin-bottom: 2rem;
153}
154
155.toggleButton {
156 background-color: var(--primary-color);
157 color: white;
158 border: none;
159 border-radius: 4px;
160 padding: 0.5rem 1rem;
161 margin-bottom: 1rem;
162 cursor: pointer;
163 display: flex;
164 align-items: center;
165 gap: 0.5rem;
166 transition: background-color 0.2s, transform 0.2s;
167}
168
169.toggleButton:hover {
170 background-color: var(--secondary-color);
171 transform: translateY(-2px);
172}
173
174.toggleButton svg {
175 width: 16px;
176 height: 16px;
177 transition: transform 0.3s ease;
178}
179
180.toggleButtonActive svg {
181 transform: rotate(180deg);
182}
183
184.card {
185 background: var(--card-background);
186 border-radius: 8px;
187 padding: 2rem;
188}
189
190@media (max-width: 600px) {
191 .card {
192 padding: 1.5rem 1rem;
193 }
194}
195
196.form {
197 margin-top: 1rem;
198}
199
200.formGroup {
201 margin-bottom: 1.5rem;
202}
203
204.formGroup label {
205 display: block;
206 margin-bottom: 0.5rem;
207 font-weight: 500;
208}
209
210.emojiNote {
211 display: none; /* Hide since we don't need to scroll anymore */
212 margin: 0 0 0.5rem 0;
213 font-size: 0.85rem;
214 color: var(--timestamp-color);
215 font-style: italic;
216}
217
218.input {
219 width: 100%;
220 padding: 0.8rem;
221 border: 1px solid var(--input-border);
222 border-radius: 4px;
223 font-size: 1rem;
224 background-color: var(--input-background);
225 color: var(--text-color);
226}
227
228.input:focus {
229 border-color: var(--primary-color);
230 outline: none;
231}
232
233.inputWrapper {
234 display: flex;
235 align-items: center;
236 width: 100%;
237 position: relative;
238 border: 1px solid var(--input-border);
239 border-radius: 4px;
240 background-color: var(--input-background);
241}
242
243.inputWrapper:focus-within {
244 border-color: var(--primary-color);
245}
246
247.inputPrefix {
248 padding: 0.8rem 0.8rem 0.8rem 0.8rem;
249 font-size: 1rem;
250 color: var(--text-color);
251 font-weight: 500;
252 background-color: var(--input-prefix-background);
253 border-right: 1px solid var(--input-border);
254 border-radius: 4px 0 0 4px;
255}
256
257.inputWithPrefix {
258 flex: 1;
259 border: none;
260 padding: 0.8rem;
261 font-size: 1rem;
262 background: transparent;
263 border-radius: 0 4px 4px 0;
264 color: var(--text-color);
265}
266
267.inputWithPrefix:focus {
268 outline: none;
269 box-shadow: none;
270}
271
272.charCount {
273 text-align: right;
274 color: var(--timestamp-color);
275 font-size: 0.8rem;
276 margin-top: 0.3rem;
277}
278
279.emojiGrid {
280 display: grid;
281 grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr));
282 gap: 0.5rem;
283 padding: 0.8rem;
284 border: 1px solid var(--input-border);
285 border-radius: 8px;
286 background-color: var(--emoji-grid-bg);
287 max-height: none; /* Remove height restriction */
288 overflow-y: visible; /* No need for scrolling */
289}
290
291@media (max-width: 600px) {
292 .emojiGrid {
293 grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr));
294 gap: 0.4rem;
295 padding: 0.6rem;
296 }
297}
298
299@media (max-width: 400px) {
300 .emojiGrid {
301 grid-template-columns: repeat(auto-fill, minmax(1.8rem, 1fr));
302 gap: 0.3rem;
303 padding: 0.5rem;
304 }
305}
306
307.emojiButton {
308 background: var(--emoji-button-bg);
309 border: 1px solid var(--emoji-button-border);
310 border-radius: 4px;
311 font-size: 1.3rem;
312 aspect-ratio: 1/1;
313 display: flex;
314 align-items: center;
315 justify-content: center;
316 cursor: pointer;
317 transition: all 0.2s;
318 padding: 0.5rem;
319 min-width: 2rem;
320 min-height: 2rem;
321}
322
323@media (max-width: 600px) {
324 .emojiButton {
325 font-size: 1.2rem;
326 padding: 0.4rem;
327 min-width: 1.8rem;
328 min-height: 1.8rem;
329 }
330}
331
332.emojiButton:hover {
333 background: var(--button-hover);
334 transform: scale(1.05);
335}
336
337.selectedEmoji {
338 background: rgba(91, 173, 240, 0.2);
339 border-color: var(--primary-color);
340}
341
342.preview {
343 background: var(--background-color);
344 padding: 1rem;
345 border-radius: 4px;
346 margin-bottom: 1.5rem;
347 border: 1px solid var(--tile-border);
348}
349
350.previewTitle {
351 font-weight: 500;
352 margin-bottom: 0.5rem;
353 color: var(--text-color);
354}
355
356.previewContent {
357 display: flex;
358 align-items: center;
359 gap: 0.5rem;
360}
361
362.previewEmoji {
363 font-size: 1.5rem;
364}
365
366.submitButton {
367 background-color: var(--primary-color);
368 color: white;
369 border: none;
370 border-radius: 4px;
371 padding: 0.8rem 1.5rem;
372 font-size: 1.1rem;
373 font-weight: 500;
374 cursor: pointer;
375 transition: all 0.2s;
376 width: 100%;
377}
378
379.submitButton:hover:not(:disabled) {
380 background-color: var(--secondary-color);
381 transform: translateY(-2px);
382}
383
384.submitButton:disabled {
385 background-color: var(--button-disabled);
386 color: var(--button-disabled-text);
387 cursor: not-allowed;
388}
389
390.success {
391 background-color: var(--success-background);
392 color: var(--success-text);
393 padding: 1rem;
394 border-radius: 4px;
395 margin: 1rem 0;
396}
397
398/* Feed styles */
399.feedSection {
400 margin-top: 1rem;
401}
402
403@keyframes slideIn {
404 from {
405 opacity: 0;
406 transform: translateY(-20px);
407 }
408 to {
409 opacity: 1;
410 transform: translateY(0);
411 }
412}
413
414.newFeedItem {
415 animation: slideIn 0.5s ease-out;
416}
417
418.feedHeader {
419 display: flex;
420 justify-content: space-between;
421 align-items: center;
422 margin-bottom: 1rem;
423 padding-bottom: 0.5rem;
424 border-bottom: 1px solid var(--tile-border);
425}
426
427.feedHeaderLeft {
428 display: flex;
429 flex-direction: column;
430}
431
432.feedHeader h2 {
433 font-size: 1.5rem;
434 line-height: 1.2;
435 margin: 0;
436 margin-bottom: 0.25rem;
437}
438
439.feedSubheader {
440 font-size: 0.9rem;
441 color: var(--timestamp-color);
442 margin: 0;
443 display: flex;
444 flex-direction: column;
445}
446
447.statsLink {
448 display: block;
449 color: var(--primary-color);
450 font-weight: 500;
451 text-decoration: none;
452 transition: color 0.2s;
453 margin-top: 0.5rem;
454 margin-bottom: 2rem;
455}
456
457.statsLink:hover {
458 text-decoration: underline;
459 color: var(--secondary-color);
460}
461
462.refreshButton {
463 background-color: var(--primary-color);
464 color: white;
465 border: none;
466 border-radius: 4px;
467 padding: 0.5rem 1rem;
468 font-size: 1rem;
469 cursor: pointer;
470 transition: background-color 0.2s;
471 padding-top: 10px;
472}
473
474.refreshButton:hover {
475 background-color: var(--secondary-color);
476}
477
478.refreshButton:disabled {
479 background-color: var(--button-disabled);
480 color: var(--button-disabled-text);
481 cursor: not-allowed;
482}
483
484.feedList {
485 display: flex;
486 flex-direction: column;
487 gap: 1rem;
488 margin-top: 1rem;
489}
490
491.feedItem {
492 background-color: var(--card-background);
493 border: 1px solid var(--tile-border);
494 border-radius: 8px;
495 padding: 1rem;
496 transition: transform 0.2s;
497}
498
499.feedItem:hover {
500 transform: translateY(-2px);
501}
502
503@media (max-width: 600px) {
504 .feedItem {
505 padding: 0.75rem;
506 margin-bottom: 0.5rem;
507 border-radius: 6px;
508 }
509
510 .feedList {
511 gap: 0.5rem;
512 }
513
514 .feedItem:hover {
515 transform: none;
516 }
517}
518
519.content {
520 display: flex;
521 align-items: flex-start;
522 gap: 0.75rem;
523 justify-content: space-between;
524 width: 100%;
525 flex-wrap: wrap;
526}
527
528.contentLeft {
529 display: flex;
530 align-items: center;
531 gap: 0.75rem;
532 flex: 1;
533 min-width: 0;
534}
535
536.contentRight {
537 display: flex;
538 align-items: center;
539 gap: 0.75rem;
540 margin-left: auto;
541}
542
543.editButton {
544 background: none;
545 border: 1px solid var(--tile-border);
546 color: var(--text-color);
547 padding: 6px;
548 cursor: pointer;
549 display: flex;
550 align-items: center;
551 justify-content: center;
552 transition: all 0.2s;
553 width: 32px;
554 height: 32px;
555 border-radius: 4px;
556}
557
558.editButton svg {
559 width: 16px;
560 height: 16px;
561}
562
563.editButton:hover {
564 border-color: var(--primary-color);
565 color: var(--primary-color);
566 background: rgba(91, 173, 240, 0.05);
567}
568
569.userLine {
570 display: flex;
571 align-items: center;
572 gap: 0.75rem;
573}
574
575.emoji {
576 font-size: 1.5rem;
577 flex-shrink: 0;
578 line-height: 1;
579 display: flex;
580 align-items: center;
581}
582
583.authorLink {
584 color: var(--primary-color);
585 font-weight: 600;
586 text-decoration: none;
587 max-width: 180px;
588 white-space: nowrap;
589 overflow: hidden;
590 text-overflow: ellipsis;
591 display: inline-block;
592}
593
594.authorLink:hover {
595 text-decoration: underline;
596}
597
598.text {
599 font-size: 1.1rem;
600 line-height: 1.4;
601 color: var(--text-color);
602 flex: 1;
603 min-width: 0;
604 word-wrap: break-word;
605 overflow-wrap: break-word;
606 hyphens: auto;
607}
608
609.timestamp {
610 font-size: 0.85rem;
611 color: var(--timestamp-color);
612 margin-left: auto;
613 white-space: nowrap;
614}
615
616@media (max-width: 600px) {
617 .content {
618 flex-direction: column;
619 gap: 0.25rem;
620 align-items: flex-start;
621 }
622
623 .contentLeft {
624 display: block;
625 width: 100%;
626 }
627
628 /* First line: emoji and username */
629 .emoji {
630 display: inline-block;
631 font-size: 1.3rem;
632 vertical-align: middle;
633 margin-right: 0.5rem;
634 }
635
636 .authorLink {
637 display: inline-block;
638 vertical-align: middle;
639 white-space: nowrap;
640 overflow: hidden;
641 text-overflow: ellipsis;
642 max-width: 180px; /* Increased width on mobile */
643 }
644
645 /* Second line: status text */
646 .text {
647 display: block;
648 font-size: 0.95rem;
649 line-height: 1.3;
650 margin-top: 0.3rem;
651 padding-bottom: 0.2rem;
652 }
653
654 /* Third line: timestamp */
655 .timestamp {
656 display: block;
657 width: 100%;
658 text-align: left;
659 font-size: 0.8rem;
660 color: #888;
661 }
662}
663
664.loadingContainer {
665 display: flex;
666 flex-direction: column;
667 align-items: center;
668 justify-content: center;
669 padding: 2rem;
670 text-align: center;
671}
672
673.loader {
674 border: 4px solid #f3f3f3;
675 border-top: 4px solid var(--primary-color);
676 border-radius: 50%;
677 width: 24px;
678 height: 24px;
679 animation: spin 1s linear infinite;
680 margin-bottom: 1rem;
681}
682
683@keyframes spin {
684 0% { transform: rotate(0deg); }
685 100% { transform: rotate(360deg); }
686}
687
688.emptyState {
689 text-align: center;
690 padding: 2rem;
691 background-color: var(--background-color);
692 border-radius: 8px;
693 border: 1px dashed var(--tile-border);
694}
695
696.loadMoreButton {
697 width: 100%;
698 background-color: var(--button-background);
699 color: var(--button-text);
700 border: 1px solid var(--input-border);
701 border-radius: 8px;
702 padding: 1rem;
703 font-size: 1rem;
704 font-weight: 500;
705 cursor: pointer;
706 margin-top: 1rem;
707 transition: all 0.2s;
708 display: flex;
709 justify-content: center;
710 align-items: center;
711 gap: 0.5rem;
712 padding-top: 1.1rem;
713}
714
715.loadMoreButton:hover {
716 background-color: var(--button-hover);
717}
718
719.loadMoreButton:disabled {
720 background-color: var(--button-disabled);
721 color: var(--button-disabled-text);
722 cursor: not-allowed;
723}
724
725.loadMoreButton svg {
726 width: 16px;
727 height: 16px;
728}
729
730.error {
731 background-color: #ffebee;
732 color: #c62828;
733 padding: 1rem;
734 border-radius: 4px;
735 margin-bottom: 1rem;
736 line-height: 1.5;
737}
738
739.notice {
740 background-color: #fff3e0;
741 color: #e65100;
742 padding: 1rem;
743 border-radius: 4px;
744 margin-top: 1rem;
745 margin-bottom: 1.5rem;
746 border: 2px solid #ff9800;
747 font-size: 1.1rem;
748 line-height: 1.4;
749 text-align: center;
750 font-weight: 500;
751}
752
753.noticePersonal {
754 margin-top: 0.8rem;
755 font-size: 0.95rem;
756 padding-top: 0.5rem;
757 border-top: 1px dashed rgba(255, 152, 0, 0.3);
758}
759
760.noticeLink {
761 color: #e65100;
762 font-weight: 600;
763 text-decoration: underline;
764 transition: color 0.2s;
765}
766
767.noticeLink:hover {
768 color: #f57c00;
769}