This repository has no description
improve styling
author
damedotblog
date
(Apr 2, 2025, 1:28 PM -0400)
commit
171b6297
171b6297a878399fd4d9f9ef5fb5de1aff0a4da4
parent
950445f1
950445f1815af8d14f2822f14a6a0c41b483b1c8
+291
-64
+96
-12
src/components/CollectionsFeed/CollectionsFeed.css
+96
-12
src/components/CollectionsFeed/CollectionsFeed.css
···
1
1
/* Omnifeed.css (renamed from CollectionsFeed.css) */
2
2
3
+
/* Activity Chart Styles */
4
+
.activity-chart-container {
5
+
background-color: var(--navbar-bg);
6
+
border: 1px solid var(--card-border);
7
+
border-radius: 12px;
8
+
padding: 20px;
9
+
margin-bottom: 20px;
10
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
11
+
overflow: hidden;
12
+
}
13
+
14
+
.dark-mode .activity-chart-container {
15
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
16
+
}
17
+
18
+
.activity-chart-header {
19
+
display: flex;
20
+
justify-content: space-between;
21
+
align-items: center;
22
+
margin-bottom: 15px;
23
+
}
24
+
25
+
.activity-chart-title {
26
+
font-size: 1.1rem;
27
+
font-weight: 600;
28
+
color: var(--button-bg);
29
+
margin: 0;
30
+
}
31
+
32
+
.activity-chart-loading {
33
+
min-height: 200px;
34
+
display: flex;
35
+
justify-content: center;
36
+
align-items: center;
37
+
color: var(--text);
38
+
font-size: 0.9rem;
39
+
opacity: 0.7;
40
+
}
41
+
3
42
/* Page Title Styles */
4
43
.page-title {
5
44
text-align: center;
···
185
224
display: flex;
186
225
align-items: center;
187
226
justify-content: center;
188
-
padding: 3px;
189
-
border-radius: 4px;
227
+
padding: 6px;
228
+
border-radius: 6px;
190
229
color: var(--text);
191
-
opacity: 0.5;
192
-
transition: opacity 0.2s, background-color 0.2s;
230
+
opacity: 0.6;
231
+
transition: all 0.2s ease;
193
232
}
194
233
195
234
.copy-button:hover {
196
235
opacity: 1;
197
-
background-color: rgba(0, 0, 0, 0.05);
236
+
background-color: rgba(0, 0, 0, 0.08);
237
+
transform: scale(1.1);
198
238
}
199
239
200
240
.dark-mode .copy-button:hover {
201
-
background-color: rgba(255, 255, 255, 0.1);
241
+
background-color: rgba(255, 255, 255, 0.15);
242
+
}
243
+
244
+
.copy-button:active {
245
+
transform: scale(0.95);
202
246
}
203
247
204
248
.copy-button.copied {
···
207
251
position: relative;
208
252
}
209
253
254
+
.copy-button.copied svg {
255
+
stroke: #4CAF50;
256
+
}
257
+
210
258
.copy-button.copied::after {
211
259
content: "Copied!";
212
260
position: absolute;
213
-
bottom: -20px;
261
+
bottom: -24px;
214
262
left: 50%;
215
263
transform: translateX(-50%);
216
264
background-color: var(--button-bg);
217
265
color: white;
218
266
padding: 3px 8px;
219
-
border-radius: 4px;
220
-
font-size: 0.7rem;
267
+
border-radius: 6px;
268
+
font-size: 0.75rem;
221
269
white-space: nowrap;
270
+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
271
+
animation: fadeInUp 0.3s ease;
272
+
}
273
+
274
+
@keyframes fadeInUp {
275
+
from { opacity: 0; transform: translate(-50%, 5px); }
276
+
to { opacity: 1; transform: translate(-50%, 0); }
222
277
}
223
278
224
279
/* Feed Controls Styles */
···
458
513
justify-content: space-between;
459
514
align-items: center;
460
515
margin-bottom: 15px;
516
+
background-color: var(--navbar-bg);
517
+
border: 1px solid var(--card-border);
518
+
border-radius: 8px;
519
+
padding: 12px 15px;
461
520
}
462
521
463
522
.toggle-container {
···
473
532
display: flex;
474
533
align-items: center;
475
534
gap: 10px;
535
+
background-color: var(--background);
536
+
padding: 6px 12px;
537
+
border-radius: 6px;
538
+
border: 1px solid var(--card-border);
476
539
}
477
540
478
541
.timestamp-toggle label {
479
-
font-size: 0.9rem;
542
+
font-size: 0.85rem;
480
543
color: var(--text);
481
544
cursor: pointer;
482
545
display: flex;
483
546
align-items: center;
547
+
font-weight: 500;
484
548
}
485
549
486
550
.timestamp-toggle input[type="checkbox"] {
487
-
margin-right: 5px;
551
+
margin-right: 8px;
488
552
cursor: pointer;
553
+
width: 16px;
554
+
height: 16px;
555
+
accent-color: var(--button-bg);
556
+
}
557
+
558
+
.timestamp-toggle span {
559
+
cursor: help;
560
+
font-size: 0.85rem;
561
+
margin-left: 5px;
562
+
opacity: 0.7;
563
+
transition: opacity 0.2s;
564
+
}
565
+
566
+
.timestamp-toggle span:hover {
567
+
opacity: 1;
489
568
}
490
569
491
570
/* View Toggle Switch Styles */
···
498
577
display: flex;
499
578
align-items: center;
500
579
gap: 10px;
580
+
background-color: var(--background);
581
+
padding: 6px 12px;
582
+
border-radius: 6px;
583
+
border: 1px solid var(--card-border);
501
584
}
502
585
503
586
.switch {
···
560
643
}
561
644
562
645
.toggle-label {
563
-
font-size: 0.9rem;
646
+
font-size: 0.85rem;
564
647
color: var(--text);
565
648
margin-left: 5px;
649
+
font-weight: 500;
566
650
}
567
651
568
652
.refresh-button {
+190
-50
src/components/CollectionsFeed/FeedTimeline.css
+190
-50
src/components/CollectionsFeed/FeedTimeline.css
···
13
13
14
14
.compact-records-table {
15
15
width: 100%;
16
-
border-collapse: collapse;
16
+
border-collapse: separate;
17
+
border-spacing: 0;
17
18
font-size: 0.85rem;
18
19
border: 1px solid var(--card-border);
19
-
border-radius: 8px;
20
+
border-radius: 12px;
20
21
overflow: hidden;
22
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
21
23
}
22
24
23
25
.compact-records-table th {
···
187
189
188
190
.feed-item {
189
191
background: var(--navbar-bg);
190
-
padding: 15px;
191
-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
192
+
padding: 18px;
193
+
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
192
194
border: 5px solid var(--card-border);
193
195
border-radius: 12px;
194
-
transition: transform 0.2s, box-shadow 0.2s;
196
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
195
197
}
196
198
197
199
.feed-item:hover {
198
-
transform: translateY(-2px);
199
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
200
+
transform: translateY(-3px);
201
+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
200
202
}
201
203
202
204
.feed-item-header {
···
298
300
left: 0;
299
301
right: 0;
300
302
bottom: 0;
301
-
background-color: rgba(0, 0, 0, 0.5);
303
+
background-color: rgba(0, 0, 0, 0.7);
302
304
display: flex;
303
305
justify-content: center;
304
306
align-items: center;
305
307
z-index: 100;
308
+
backdrop-filter: blur(6px);
309
+
-webkit-backdrop-filter: blur(6px);
310
+
animation: backdropFadeIn 0.2s ease-out;
311
+
}
312
+
313
+
@keyframes backdropFadeIn {
314
+
from { opacity: 0; }
315
+
to { opacity: 1; }
306
316
}
307
317
308
318
.record-modal {
309
319
background-color: var(--navbar-bg);
310
-
border-radius: 12px;
311
-
border: 5px solid var(--card-border);
320
+
border-radius: 16px;
321
+
border: 3px solid var(--card-border);
312
322
width: 90%;
313
-
max-width: 700px;
314
-
max-height: 80vh;
323
+
max-width: 800px;
324
+
max-height: 85vh;
315
325
overflow-y: auto;
316
-
padding: 20px;
317
-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
326
+
padding: 25px;
327
+
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
328
+
animation: modalFadeIn 0.3s ease-out;
329
+
}
330
+
331
+
@keyframes modalFadeIn {
332
+
from { opacity: 0; transform: translateY(30px); }
333
+
to { opacity: 1; transform: translateY(0); }
318
334
}
319
335
320
336
.record-modal-header {
321
337
display: flex;
322
338
justify-content: space-between;
323
339
align-items: center;
324
-
margin-bottom: 15px;
340
+
margin-bottom: 20px;
325
341
padding-bottom: 15px;
326
342
border-bottom: 1px solid var(--card-border);
343
+
position: sticky;
344
+
top: 0;
345
+
background-color: var(--navbar-bg);
346
+
z-index: 5;
347
+
padding-top: 5px;
327
348
}
328
349
329
350
.record-modal-title {
330
-
font-size: 1.2rem;
351
+
font-size: 1.1rem;
331
352
font-weight: 600;
332
-
color: var(--text);
353
+
color: var(--button-bg);
333
354
margin: 0;
355
+
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
356
+
max-width: 80%;
357
+
overflow: hidden;
358
+
text-overflow: ellipsis;
359
+
white-space: nowrap;
334
360
}
335
361
336
362
.record-modal-close {
337
-
background: none;
338
-
border: none;
339
-
font-size: 1.5rem;
363
+
width: 36px;
364
+
height: 36px;
365
+
background-color: var(--background);
366
+
border: 1px solid var(--card-border);
367
+
border-radius: 50%;
368
+
font-size: 1.4rem;
340
369
cursor: pointer;
341
370
color: var(--text);
342
-
opacity: 0.7;
343
-
transition: opacity 0.2s;
371
+
opacity: 0.8;
372
+
transition: all 0.2s;
373
+
display: flex;
374
+
align-items: center;
375
+
justify-content: center;
376
+
line-height: 0;
344
377
}
345
378
346
379
.record-modal-close:hover {
347
380
opacity: 1;
381
+
background-color: rgba(var(--button-bg-rgb), 0.15);
382
+
color: var(--button-bg);
383
+
transform: rotate(90deg);
348
384
}
349
385
350
386
.record-modal-content {
351
-
margin-bottom: 15px;
387
+
margin-bottom: 20px;
352
388
}
353
389
354
390
.record-modal-loading {
355
391
text-align: center;
356
-
padding: 20px;
392
+
padding: 40px 30px;
357
393
color: var(--text);
394
+
font-size: 0.95rem;
395
+
display: flex;
396
+
flex-direction: column;
397
+
align-items: center;
398
+
gap: 20px;
399
+
font-weight: 500;
400
+
}
401
+
402
+
.loading-spinner {
403
+
width: 36px;
404
+
height: 36px;
405
+
border: 3px solid rgba(var(--button-bg-rgb), 0.2);
406
+
border-top-color: var(--button-bg);
407
+
border-radius: 50%;
408
+
animation: spinner 1s linear infinite;
409
+
}
410
+
411
+
@keyframes spinner {
412
+
to { transform: rotate(360deg); }
358
413
}
359
414
360
415
.record-modal-error {
361
416
color: #e74c3c;
362
-
padding: 10px;
363
-
border-radius: 5px;
417
+
padding: 15px;
418
+
border-radius: 8px;
364
419
background-color: rgba(231, 76, 60, 0.1);
365
-
margin-bottom: 15px;
420
+
margin-bottom: 20px;
421
+
font-size: 0.95rem;
422
+
border: 1px solid rgba(231, 76, 60, 0.3);
366
423
}
367
424
368
425
.record-modal-footer {
···
370
427
justify-content: space-between;
371
428
padding-top: 15px;
372
429
border-top: 1px solid var(--card-border);
430
+
margin-top: 15px;
373
431
}
374
432
375
433
.record-link {
376
434
color: var(--button-bg);
377
-
text-decoration: underline;
435
+
text-decoration: none;
378
436
cursor: pointer;
437
+
border-bottom: 1px dashed;
438
+
padding-bottom: 1px;
439
+
transition: all 0.2s;
440
+
}
441
+
442
+
.record-link:hover {
443
+
border-bottom: 1px solid;
444
+
opacity: 0.85;
379
445
}
380
446
381
447
.record-key-link {
382
448
cursor: pointer;
383
449
color: var(--button-bg);
384
-
text-decoration: underline;
450
+
text-decoration: none;
451
+
border-bottom: 1px dashed;
452
+
padding-bottom: 1px;
453
+
transition: border-bottom 0.2s;
454
+
}
455
+
456
+
.record-key-link:hover {
457
+
border-bottom: 1px solid;
385
458
}
386
459
387
460
.bsky-link {
388
-
display: block;
461
+
display: inline-flex;
462
+
align-items: center;
389
463
margin-top: 8px;
464
+
margin-right: 12px;
390
465
color: var(--button-bg);
391
466
text-decoration: none;
392
-
font-size: 0.9rem;
393
-
transition: opacity 0.2s;
467
+
font-size: 0.85rem;
468
+
transition: all 0.2s;
469
+
padding: 4px 10px;
470
+
border-radius: 6px;
471
+
background-color: rgba(var(--button-bg-rgb), 0.08);
394
472
}
395
473
396
474
.bsky-link:hover {
397
-
opacity: 0.8;
475
+
background-color: rgba(var(--button-bg-rgb), 0.15);
476
+
transform: translateY(-1px);
477
+
}
478
+
479
+
.bsky-link:active {
480
+
transform: translateY(0);
398
481
}
399
482
400
483
.bsky-link svg {
401
-
margin-right: 5px;
402
-
vertical-align: middle;
484
+
margin-right: 6px;
403
485
}
404
486
405
487
.bsky-link-text {
406
-
vertical-align: middle;
488
+
font-weight: 500;
407
489
}
408
490
409
491
.bsky-link-container {
410
-
margin-top: 8px;
492
+
margin-top: 10px;
493
+
display: flex;
494
+
flex-wrap: wrap;
495
+
gap: 8px;
411
496
}
412
497
413
498
.post-type-badge {
414
-
display: inline-block;
415
-
font-size: 0.75rem;
416
-
padding: 2px 6px;
417
-
border-radius: 4px;
499
+
display: inline-flex;
500
+
align-items: center;
501
+
justify-content: center;
502
+
font-size: 0.7rem;
503
+
padding: 3px 8px;
504
+
border-radius: 12px;
418
505
margin-left: 8px;
419
506
font-weight: 600;
420
507
text-transform: uppercase;
508
+
letter-spacing: 0.5px;
421
509
}
422
510
423
511
.post-type-reply {
···
442
530
443
531
.record-json-container {
444
532
background-color: var(--background);
445
-
border-radius: 5px;
533
+
border-radius: 10px;
446
534
overflow: hidden;
535
+
margin: 0 5px;
536
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
537
+
}
538
+
539
+
.dark-mode .record-json-container {
540
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
447
541
}
448
542
449
543
.record-json-header {
450
544
display: flex;
451
545
justify-content: space-between;
452
546
align-items: center;
453
-
padding: 8px 15px;
547
+
padding: 12px 18px;
454
548
background-color: rgba(0, 0, 0, 0.05);
455
549
border-bottom: 1px solid var(--card-border);
550
+
font-weight: 600;
551
+
color: var(--button-bg);
456
552
}
457
553
458
554
.dark-mode .record-json-header {
···
465
561
gap: 6px;
466
562
background: none;
467
563
border: 1px solid var(--card-border);
468
-
border-radius: 4px;
469
-
padding: 4px 10px;
470
-
font-size: 0.8rem;
564
+
border-radius: 6px;
565
+
padding: 6px 12px;
566
+
font-size: 0.85rem;
471
567
cursor: pointer;
472
568
color: var(--text);
473
-
transition: background-color 0.2s, color 0.2s;
569
+
transition: all 0.2s ease;
570
+
font-weight: 500;
474
571
}
475
572
476
573
.copy-json-button:hover {
477
574
background-color: var(--button-bg);
478
575
color: white;
576
+
transform: translateY(-1px);
577
+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
578
+
}
579
+
580
+
.copy-json-button:active {
581
+
transform: translateY(0);
479
582
}
480
583
481
584
.copy-json-button.copied {
···
487
590
.copy-json-button.copied::after {
488
591
content: "✓";
489
592
margin-left: 5px;
593
+
animation: fadeIn 0.3s ease;
594
+
}
595
+
596
+
@keyframes fadeIn {
597
+
from { opacity: 0; }
598
+
to { opacity: 1; }
490
599
}
491
600
492
601
.record-json {
493
-
padding: 15px;
494
-
font-family: monospace;
602
+
padding: 18px;
603
+
font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
495
604
white-space: pre-wrap;
496
605
overflow-x: auto;
497
-
max-height: 300px;
606
+
max-height: 350px;
498
607
overflow-y: auto;
608
+
font-size: 0.9rem;
609
+
line-height: 1.5;
610
+
color: var(--text);
611
+
scrollbar-width: thin;
612
+
}
613
+
614
+
.record-json::-webkit-scrollbar {
615
+
width: 8px;
616
+
height: 8px;
617
+
}
618
+
619
+
.record-json::-webkit-scrollbar-track {
620
+
background: rgba(0, 0, 0, 0.05);
621
+
border-radius: 4px;
622
+
}
623
+
624
+
.record-json::-webkit-scrollbar-thumb {
625
+
background-color: rgba(0, 0, 0, 0.2);
626
+
border-radius: 4px;
627
+
}
628
+
629
+
.dark-mode .record-json::-webkit-scrollbar-track {
630
+
background: rgba(255, 255, 255, 0.05);
631
+
}
632
+
633
+
.dark-mode .record-json::-webkit-scrollbar-thumb {
634
+
background-color: rgba(255, 255, 255, 0.2);
499
635
}
500
636
501
637
.record-uri {
···
504
640
gap: 8px;
505
641
font-family: monospace;
506
642
font-size: 0.9rem;
643
+
background-color: var(--background);
644
+
padding: 8px 12px;
645
+
border-radius: 6px;
646
+
word-break: break-all;
507
647
}
508
648
509
649
/* Dark mode overrides */
+5
-2
src/components/CollectionsFeed/FeedTimeline.js
+5
-2
src/components/CollectionsFeed/FeedTimeline.js
···
458
458
459
459
<div className="record-modal-content">
460
460
{modalLoading && (
461
-
<div className="record-modal-loading">Loading record data...</div>
461
+
<div className="record-modal-loading">
462
+
<div className="loading-spinner"></div>
463
+
<span>Loading record data...</span>
464
+
</div>
462
465
)}
463
466
464
467
{modalError && (
···
484
487
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
485
488
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
486
489
</svg>
487
-
Copy JSON
490
+
<span>Copy JSON</span>
488
491
</button>
489
492
</div>
490
493
<div className="record-json">