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