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