This repository has no description
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.userLine {
537 display: flex;
538 align-items: center;
539 gap: 0.75rem;
540}
541
542.emoji {
543 font-size: 1.5rem;
544 flex-shrink: 0;
545 line-height: 1;
546 display: flex;
547 align-items: center;
548}
549
550.authorLink {
551 color: var(--primary-color);
552 font-weight: 600;
553 text-decoration: none;
554 max-width: 180px;
555 white-space: nowrap;
556 overflow: hidden;
557 text-overflow: ellipsis;
558 display: inline-block;
559}
560
561.authorLink:hover {
562 text-decoration: underline;
563}
564
565.text {
566 font-size: 1.1rem;
567 line-height: 1.4;
568 color: var(--text-color);
569 flex: 1;
570 min-width: 0;
571 word-wrap: break-word;
572 overflow-wrap: break-word;
573 hyphens: auto;
574}
575
576.timestamp {
577 font-size: 0.85rem;
578 color: var(--timestamp-color);
579 margin-left: auto;
580 white-space: nowrap;
581}
582
583@media (max-width: 600px) {
584 .content {
585 flex-direction: column;
586 gap: 0.25rem;
587 align-items: flex-start;
588 }
589
590 .contentLeft {
591 display: block;
592 width: 100%;
593 }
594
595 /* First line: emoji and username */
596 .emoji {
597 display: inline-block;
598 font-size: 1.3rem;
599 vertical-align: middle;
600 margin-right: 0.5rem;
601 }
602
603 .authorLink {
604 display: inline-block;
605 vertical-align: middle;
606 white-space: nowrap;
607 overflow: hidden;
608 text-overflow: ellipsis;
609 max-width: 180px; /* Increased width on mobile */
610 }
611
612 /* Second line: status text */
613 .text {
614 display: block;
615 font-size: 0.95rem;
616 line-height: 1.3;
617 margin-top: 0.3rem;
618 padding-bottom: 0.2rem;
619 }
620
621 /* Third line: timestamp */
622 .timestamp {
623 display: block;
624 width: 100%;
625 text-align: left;
626 font-size: 0.8rem;
627 color: #888;
628 }
629}
630
631.loadingContainer {
632 display: flex;
633 flex-direction: column;
634 align-items: center;
635 justify-content: center;
636 padding: 2rem;
637 text-align: center;
638}
639
640.loader {
641 border: 4px solid #f3f3f3;
642 border-top: 4px solid var(--primary-color);
643 border-radius: 50%;
644 width: 24px;
645 height: 24px;
646 animation: spin 1s linear infinite;
647 margin-bottom: 1rem;
648}
649
650@keyframes spin {
651 0% { transform: rotate(0deg); }
652 100% { transform: rotate(360deg); }
653}
654
655.emptyState {
656 text-align: center;
657 padding: 2rem;
658 background-color: var(--background-color);
659 border-radius: 8px;
660 border: 1px dashed var(--tile-border);
661}
662
663.loadMoreButton {
664 width: 100%;
665 background-color: var(--button-background);
666 color: var(--button-text);
667 border: 1px solid var(--input-border);
668 border-radius: 8px;
669 padding: 1rem;
670 font-size: 1rem;
671 font-weight: 500;
672 cursor: pointer;
673 margin-top: 1rem;
674 transition: all 0.2s;
675 display: flex;
676 justify-content: center;
677 align-items: center;
678 gap: 0.5rem;
679 padding-top: 1.1rem;
680}
681
682.loadMoreButton:hover {
683 background-color: var(--button-hover);
684}
685
686.loadMoreButton:disabled {
687 background-color: var(--button-disabled);
688 color: var(--button-disabled-text);
689 cursor: not-allowed;
690}
691
692.loadMoreButton svg {
693 width: 16px;
694 height: 16px;
695}
696
697.error {
698 background-color: #ffebee;
699 color: #c62828;
700 padding: 1rem;
701 border-radius: 4px;
702 margin-bottom: 1rem;
703 line-height: 1.5;
704}
705
706.notice {
707 background-color: #fff3e0;
708 color: #e65100;
709 padding: 1rem;
710 border-radius: 4px;
711 margin-top: 1rem;
712 margin-bottom: 1.5rem;
713 border: 2px solid #ff9800;
714 font-size: 1.1rem;
715 line-height: 1.4;
716 text-align: center;
717 font-weight: 500;
718}
719
720.noticePersonal {
721 margin-top: 0.8rem;
722 font-size: 0.95rem;
723 padding-top: 0.5rem;
724 border-top: 1px dashed rgba(255, 152, 0, 0.3);
725}
726
727.noticeLink {
728 color: #e65100;
729 font-weight: 600;
730 text-decoration: underline;
731 transition: color 0.2s;
732}
733
734.noticeLink:hover {
735 color: #f57c00;
736}