This repository has no description
1/* src/components/UserProfile/UserProfile.css */
2
3/* Container for the profile page */
4.user-profile {
5 margin: auto;
6 max-width: 1200px;
7 margin-top: 40px;
8}
9
10
11.user-profile h1 {
12 margin: 0px;
13}
14
15/* Media query for responsiveness (optional, handled by react-grid-layout) */
16@media (max-width: 1200px) {
17 .layout {
18 width: 100%;
19 }
20}
21
22.user-profile {
23 margin: auto;
24 max-width: 1200px;
25 opacity: 0; /* Initially hidden */
26 transform: translateY(20px);
27 transition: opacity 1s ease, transform 1s ease;
28}
29
30.user-profile.fade-in {
31 opacity: 1;
32 transform: translateY(0);
33}
34
35.user-profile.hidden {
36 display: none;
37}
38
39.user-profile.loading-container {
40 opacity: 1;
41 transition: opacity 1s ease;
42}
43
44.user-profile.loading-container.fade-out {
45 opacity: 0;
46 pointer-events: none;
47}
48
49.user-profile-header {
50 text-align: center;
51}
52
53.react-grid-item.react-grid-placeholder {
54 background: #3B9AF8 !important;
55 border-radius: 8px;
56 opacity: 0.2;
57 transition-duration: 100ms;
58 z-index: 2;
59 -webkit-user-select: none;
60 -moz-user-select: none;
61 -ms-user-select: none;
62 -o-user-select: none;
63 user-select: none;
64}
65
66.react-grid-item.react-grid-placeholder.placeholder-resizing {
67 transition: none;
68}
69
70.react-grid-layout {
71 margin-bottom: 40px;
72}
73
74/* src/components/UserProfile/UserProfile.css */
75
76.user-profile-header {
77 display: inline-grid;
78 column-gap: 50px;
79 row-gap: 22px;
80 justify-content: center;
81 text-align: center;
82 grid-auto-flow: column;
83 margin-left: 36.5px;
84}
85
86
87.toggle-button {
88padding: 10px 20px;
89margin: 0 5px;
90border: none;
91background-color: #a9a9a9;
92cursor: pointer;
93border-radius: 6px;
94transition: background-color 0.3s;
95}
96
97.toggle-button.active {
98background-color: #3B9AF8;
99color: white;
100}
101
102.toggle-button:hover {
103background-color: #ccc;
104}
105
106.user-profile-header p {
107margin-bottom: 0px;
108margin-top: 0px;
109}
110
111.user-profile-header h2 {
112font-size: 1.2em;
113margin: 0px;
114}
115
116.user-profile-header h1 {
117margin-bottom: 0px;
118line-height: 0.9em;
119}
120
121.text-center.font-semibold.mt-2 {
122font-size: 1.2em;
123font-weight: 600;
124color: var(--text);
125margin-top: -10.5px;
126margin-left: 11.5px;
127display: flex;
128gap: 8.5px;
129}
130
131.user-profile-header-main {
132display: flex;
133flex-direction: column;
134gap: 20px;
135align-content: center;
136justify-content: center;
137}
138
139.user-profile-data {
140display: flex;
141flex-direction: column;
142}
143
144.user-profile-data {
145justify-content: center;
146gap: 35px;
147}
148
149.circular-badge {
150margin-bottom: -10px;
151margin-top: -10px;
152}
153
154.user-profile-name {
155gap: 7px;
156display: flex;
157flex-direction: column;
158}
159
160.loading-container-1 {
161min-height: 0 !important;
162margin-bottom: 50px;
163margin-top: 30px;
164}
165
166/* Make grid items responsive and flexible */
167.grid-item {
168overflow: hidden;
169transition: all 0.3s ease;
170display: flex;
171flex-direction: column;
172}
173
174.react-grid-item {
175transition: all 200ms ease;
176transition-property: left, top, width, height;
177}
178
179.narrative-card p:first-letter {
180text-transform: capitalize;
181}
182
183.user-profile-badges h3 {
184margin: 0px;
185font-size: 0.8em;
186font-weight: 500;
187margin-bottom: 4px;
188}
189
190.circular-badge {
191position: relative;
192display: inline-block;
193grid-row: 1;
194grid-column: 1;
195margin-left: -9px;
196margin-right: -18px;
197}
198
199/* Light mode styles */
200.circular-logo-text {
201fill: var(--circular-logo-text, #004f84);
202transition: fill 0.3s ease;
203}
204
205.user-profile .recharts-responsive-container {
206max-width: 100%;
207}
208
209.share-button-container {
210align-content: center;
211grid-column: 3;
212grid-row: 2;
213display: flex;
214flex-direction: column;
215gap: 5px;
216font-size: 0.8em;
217}
218
219.toggle-switch {
220display: none;
221}
222
223.user-profile-activity {
224text-transform: capitalize;
225align-content: center;
226justify-content: center;
227display: flex;
228flex-direction: column;
229padding: 8px 0px;
230}
231
232tspan {
233font-family: articulat-cf;
234}
235
236.dark-mode tspan {
237fill: white;
238opacity: 0.5;
239}
240
241.user-profile-score {
242align-content: center;
243justify-content: center;
244display: flex;
245flex-direction: column;
246}
247
248.user-profile-data-group {
249display: flex;
250flex-direction: column;
251justify-content: center;
252grid-row: 2;
253grid-column: 2;
254font-size: 0.8em;
255}
256
257.dark-mode rect {
258stroke: #2c2c2c !important;
259stroke-width: 5px !important;
260}
261
262.recharts-surface {
263stroke-width: 0.3px;
264}
265
266.recharts-cartesian-axis-ticks {
267font-size: 0.7em;
268}
269
270.text-sm.text-gray-500.text-center.mt-4 {
271text-align: center;
272padding-top: 10px;
273font-size: 0.8em;
274opacity: 0.5;
275}
276
277.user-profile-header-rechart {
278align-items: center;
279display: flex;
280grid-row: 1;
281justify-content: center;
282margin: 0 auto;
283max-height: 130px;
284max-width: 200px;
285padding: 1rem;
286width: 100%;
287grid-column: 3;
288scale: 0.9;
289}
290
291.score-gauge {
292margin-right: 10px !important;
293}
294
295.user-profile-main {
296display: flex;
297flex-direction: column;
298grid-row: 1;
299justify-content: space-evenly;
300padding-top: 5px;
301grid-column: 2;
302max-width: 240px;
303}
304
305.user-profile-container {
306text-align: center;
307margin: 55px 20px 40px;
308}
309
310.user-profile-age h2 {
311font-size: 0.8em;
312}
313
314.compare-button-container {
315align-content: center;
316grid-row: 3;
317}
318
319.max-score {
320opacity: 0.5;
321}
322
323.comparea-button-profile {
324background: gray;
325}
326
327.user-profile-emoji-group {
328display: inline-grid;
329font-size: 1.8em;
330align-content: center;
331justify-content: center;
332row-gap: 10px;
333column-gap: 20px;
334margin-left: 10px;
335grid-column: 1;
336grid-row: 2;
337}
338
339.emoji-1 {
340grid-column: 1;
341grid-row: 1;
342}
343
344.emoji-2 {
345grid-column: 2;
346grid-row: 1;
347}
348
349.emoji-3 {
350grid-column: 1;
351grid-row: 2;
352}
353
354.emoji-4 {
355grid-column: 2;
356grid-row: 2;
357}
358
359.narrative-card {
360font-size: 0.9em;
361}
362
363.narrative-disclaimer {
364font-size: 0.8em;
365margin-top: 13.5px;
366opacity: 0.5;
367}
368
369.post-type-card .recharts-surface {
370margin-left: -15px;
371}
372
373.score-breakdown-card .disclaimer {
374margin-left: 3px;
375}
376
377.user-profile-container {
378margin: auto;
379 margin-top: auto;
380 margin-bottom: auto;
381width: 100%;
382margin-top: 60px;
383margin-bottom: 60px;
384}
385
386.profile-sections-wrapper {
387display: grid;
388grid-template-columns: 1fr 2fr 1fr;
389gap: 20px;
390align-items: start;
391max-width: 1200px;
392margin: 0 auto;
393}
394
395/* Left Section */
396.profile-section.left-section {
397justify-self: start;
398margin-right: 31.1px;
399margin-top: 15.3px;
400}
401
402/* Middle Section */
403.profile-section.middle-section {
404display: flex;
405flex-direction: column;
406align-items: center;
407gap: 17px;
408justify-self: center;
409margin-right: -31.3px;
410margin-top: 11.5px;
411}
412
413.user-profile-header-rechart {
414margin: 0 auto;
415max-width: 200px;
416width: 100%;
417scale: 1.07;
418margin-top: 4px;
419}
420
421.user-profile-data-group {
422text-align: center;
423width: 100%;
424max-width: 300px;
425gap: 10px;
426}
427
428.share-button-container {
429width: 100%;
430text-align: center;
431display: block;
432}
433
434.comparea-button-profile {
435margin-top: 10px;
436}
437
438/* Right Section */
439.profile-section.right-section {
440justify-self: end;
441padding-left: 32.6px;
442scale: 0.9;
443}
444
445.user-profile-main {
446text-align: center;
447gap: 22.5px;
448}
449
450.user-profile-activity {
451align-content: center;
452display: flex;
453flex-direction: column;
454justify-content: center;
455padding: 0px;
456text-transform: capitalize;
457}
458
459.user-profile-badges {
460font-size: 1.2em;
461line-height: 1.2em;
462}
463
464.context-line p {
465margin: 0px;
466font-size: 0.7em;
467opacity: 0.5;
468}
469
470.bluesky-link {
471font-size: 0.8em;
472text-decoration: underline;
473}
474
475.user-profile-data-group p {
476margin: 2px;
477}
478
479.user-profile-name h2 {
480font-size: 1em;
481margin: 0px;
482}
483
484.user-profile-age h2 {
485font-size: .8em;
486margin: 0px;
487}
488
489.circular-badge {
490margin: 0px
491}
492
493.card .disclaimer {
494margin: 0px;
495 margin-top: 0px;
496margin-top: 12.3px;
497max-width: 400px;
498}
499
500.learn-more-text {
501font-size: 0.9em
502}
503
504.score-breakdown-container .disclaimer {
505margin-left: 3px;
506}
507
508/* Make card component fill grid item */
509.grid-item > div {
510height: 100%;
511width: 100%;
512display: flex;
513flex-direction: column;
514}
515
516/* Make card content expand to fill available space */
517.card-content {
518flex: 1;
519overflow: visible; /* Changed from auto to prevent scrollbars */
520}
521
522/* Style for resize handle */
523.react-resizable-handle {
524background-color: rgba(0, 0, 0, 0.1);
525border-radius: 0 0 5px 0;
526z-index: 10;
527}
528
529.react-resizable-handle:hover {
530background-color: rgba(0, 0, 0, 0.2);
531}
532
533/* Custom styles for the Card component */
534.card {
535display: flex;
536flex-direction: column;
537height: 100%;
538overflow: visible; /* Changed from hidden to allow content to determine height */
539}
540
541.activity-card {
542 overflow: hidden;
543}
544
545.card-content {
546overflow: auto;
547}
548
549.profile-card p {
550 line-height: 1em;
551}
552
553/* Responsive Adjustments for Cards */
554@media (max-width: 835px) {
555
556.user-profile-container {
557 margin: 30px auto;
558 margin-top: 30px;
559 width: 100%;
560 margin-top: 40px;
561}
562
563.profile-sections-wrapper {
564 grid-template-columns: 1fr;
565 grid-template-rows: auto auto auto;
566 gap: 27px;
567}
568
569.profile-section.left-section {
570 justify-self: center;
571 padding-left: 0;
572 scale: .7;
573 grid-column: 1;
574 grid-row: 1;
575}
576
577.profile-section.left-section {
578 margin-right: 0px;
579}
580
581.profile-section.right-section {
582 justify-self: center;
583 padding-left: 0;
584 grid-column: 1;
585 grid-row: 3;
586 margin-top: -10px;
587}
588
589.user-profile-main {
590 text-align: center;
591}
592
593.circular-badge {
594 grid-column: 1;
595 grid-row: 1;
596 margin-left: 0;
597 margin-right: 1.5px;
598}
599.user-profile-emoji-group {
600 grid-row: 1;
601 grid-column: 1;
602 display: none;
603}
604.user-profile-main {
605 grid-row: 2;
606 grid-column: 1;
607 gap: 20.8px;
608}
609.user-profile-header-rechart {
610 grid-row: 3;
611 grid-column: 1;
612 scale: 0.9;
613 margin-bottom: 5px;
614}
615
616.user-profile-data-group {
617 grid-row: 4;
618 grid-column: 1;
619}
620
621.share-button-container {
622 gap: 10px;
623}
624
625.user-profile-score {
626 padding: 0px;
627}
628
629.share-button-container {
630 grid-row: 5;
631 grid-column: 1;
632 text-align: center;
633}
634
635.user-profile-header {
636 margin-left: 0px;
637 row-gap: 10px;
638}
639.user-profile-data-group {
640 text-align: center;
641}
642
643.share-button-container {
644 text-align: center;
645}
646
647.profile-section.left-section {
648 scale: 0.6;
649 margin-top: -64.5px;
650}
651
652.profile-section.middle-section {
653 margin-top: -85.7px;
654 gap: 13.5px;
655 grid-column: 1;
656 grid-row: 2;
657 margin-right: 0px;
658}
659
660.user-profile-badges {
661 margin-top: 0px;
662}
663
664.text-center.font-semibold.mt-2 {
665 font-size: 1.5em;
666}
667
668.react-grid-item {
669 margin-bottom: 15px;
670}
671}
672
673@media (max-width: 440px) {
674.score-breakdown-card .disclaimer {
675 font-size: .7em !important;
676 margin: 0px;
677 margin-top: 0px;
678 max-width: 300px;
679}
680
681.react-resizable-handle {
682 width: 20px;
683 height: 20px;
684}
685
686/* Make the resizing handle more touch-friendly on small screens */
687.react-resizable-handle::after {
688 content: '';
689 position: absolute;
690 width: 20px;
691 height: 20px;
692 bottom: 0;
693 right: 0;
694 background-color: rgba(0, 0, 0, 0.1);
695 border-radius: 0 0 5px 0;
696}
697}