@ermis-network/ermis-chat-react 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3802 -1772
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +836 -25
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +304 -1
- package/dist/index.d.ts +304 -1
- package/dist/index.mjs +3755 -1761
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/channelRoleUtils.ts +73 -0
- package/src/channelTypeUtils.ts +46 -0
- package/src/components/Avatar.tsx +57 -31
- package/src/components/BannedOverlay.tsx +40 -0
- package/src/components/ChannelActions.tsx +233 -0
- package/src/components/ChannelHeader.tsx +126 -5
- package/src/components/ChannelInfo/ChannelInfo.tsx +128 -24
- package/src/components/ChannelInfo/ChannelInfoTabs.tsx +67 -28
- package/src/components/ChannelInfo/ChannelSettingsPanel.tsx +90 -1
- package/src/components/ChannelInfo/EditChannelModal.tsx +5 -4
- package/src/components/ChannelInfo/MemberListItem.tsx +2 -1
- package/src/components/ChannelList.tsx +514 -47
- package/src/components/ClosedTopicOverlay.tsx +38 -0
- package/src/components/CreateChannelModal.tsx +53 -16
- package/src/components/EditPreview.tsx +2 -1
- package/src/components/ForwardMessageModal.tsx +2 -1
- package/src/components/MediaLightbox.tsx +314 -0
- package/src/components/MessageInput.tsx +21 -3
- package/src/components/MessageItem.tsx +10 -12
- package/src/components/MessageQuickReactions.tsx +3 -2
- package/src/components/MessageReactions.tsx +8 -3
- package/src/components/MessageRenderers.tsx +174 -54
- package/src/components/PendingOverlay.tsx +51 -0
- package/src/components/PinnedMessages.tsx +2 -1
- package/src/components/ReplyPreview.tsx +2 -1
- package/src/components/SkippedOverlay.tsx +36 -0
- package/src/components/TopicModal.tsx +189 -0
- package/src/components/UserPicker.tsx +1 -1
- package/src/components/VirtualMessageList.tsx +162 -47
- package/src/hooks/useBannedState.ts +27 -3
- package/src/hooks/useBlockedState.ts +3 -2
- package/src/hooks/useChannelCapabilities.ts +10 -8
- package/src/hooks/useChannelData.ts +1 -1
- package/src/hooks/useChannelListUpdates.ts +28 -5
- package/src/hooks/useChannelMessages.ts +2 -3
- package/src/hooks/useChannelRowUpdates.ts +9 -2
- package/src/hooks/useMessageActions.ts +23 -9
- package/src/hooks/useOnlineStatus.ts +71 -0
- package/src/hooks/useOnlineUsers.ts +115 -0
- package/src/hooks/usePendingState.ts +8 -3
- package/src/index.ts +67 -10
- package/src/messageTypeUtils.ts +64 -0
- package/src/styles/_channel-info.css +21 -0
- package/src/styles/_channel-list.css +276 -6
- package/src/styles/_media-lightbox.css +263 -0
- package/src/styles/_message-bubble.css +170 -13
- package/src/styles/_message-input.css +24 -0
- package/src/styles/_message-list.css +76 -6
- package/src/styles/_message-quick-reactions.css +5 -0
- package/src/styles/_message-reactions.css +7 -0
- package/src/styles/_topic-modal.css +154 -0
- package/src/styles/index.css +2 -0
- package/src/types.ts +203 -3
package/dist/index.css
CHANGED
|
@@ -375,6 +375,27 @@
|
|
|
375
375
|
overflow: hidden;
|
|
376
376
|
text-overflow: ellipsis;
|
|
377
377
|
}
|
|
378
|
+
.ermis-channel-header__team-name {
|
|
379
|
+
font-size: var(--ermis-font-size-xs);
|
|
380
|
+
color: var(--ermis-text-secondary);
|
|
381
|
+
margin-bottom: 2px;
|
|
382
|
+
font-weight: 500;
|
|
383
|
+
white-space: nowrap;
|
|
384
|
+
overflow: hidden;
|
|
385
|
+
text-overflow: ellipsis;
|
|
386
|
+
}
|
|
387
|
+
.ermis-channel-header__topic-avatar {
|
|
388
|
+
width: 32px;
|
|
389
|
+
height: 32px;
|
|
390
|
+
min-width: 32px;
|
|
391
|
+
border-radius: var(--ermis-radius-md);
|
|
392
|
+
background-color: var(--ermis-bg-primary);
|
|
393
|
+
display: flex;
|
|
394
|
+
align-items: center;
|
|
395
|
+
justify-content: center;
|
|
396
|
+
font-size: 16px;
|
|
397
|
+
color: var(--ermis-text-secondary);
|
|
398
|
+
}
|
|
378
399
|
.ermis-channel-header__subtitle {
|
|
379
400
|
font-size: var(--ermis-font-size-xs);
|
|
380
401
|
color: var(--ermis-text-muted);
|
|
@@ -382,6 +403,33 @@
|
|
|
382
403
|
overflow: hidden;
|
|
383
404
|
text-overflow: ellipsis;
|
|
384
405
|
}
|
|
406
|
+
.ermis-channel-header__online-status {
|
|
407
|
+
display: flex;
|
|
408
|
+
align-items: center;
|
|
409
|
+
gap: 5px;
|
|
410
|
+
margin-top: 1px;
|
|
411
|
+
}
|
|
412
|
+
.ermis-channel-header__online-dot {
|
|
413
|
+
width: 8px;
|
|
414
|
+
height: 8px;
|
|
415
|
+
border-radius: var(--ermis-radius-full);
|
|
416
|
+
flex-shrink: 0;
|
|
417
|
+
transition: background-color var(--ermis-transition);
|
|
418
|
+
}
|
|
419
|
+
.ermis-channel-header__online-dot--online {
|
|
420
|
+
background-color: var(--ermis-color-success);
|
|
421
|
+
}
|
|
422
|
+
.ermis-channel-header__online-dot--offline {
|
|
423
|
+
background-color: var(--ermis-text-muted);
|
|
424
|
+
}
|
|
425
|
+
.ermis-channel-header__online-label {
|
|
426
|
+
font-size: var(--ermis-font-size-xs);
|
|
427
|
+
color: var(--ermis-text-muted);
|
|
428
|
+
line-height: 1;
|
|
429
|
+
}
|
|
430
|
+
.ermis-channel-header__online-status--online .ermis-channel-header__online-label {
|
|
431
|
+
color: var(--ermis-color-success);
|
|
432
|
+
}
|
|
385
433
|
.ermis-channel-header__info {
|
|
386
434
|
flex: 1;
|
|
387
435
|
}
|
|
@@ -419,6 +467,7 @@
|
|
|
419
467
|
cursor: pointer;
|
|
420
468
|
border-left: 2px solid transparent;
|
|
421
469
|
transition: background-color var(--ermis-transition), border-color var(--ermis-transition);
|
|
470
|
+
position: relative;
|
|
422
471
|
}
|
|
423
472
|
.ermis-channel-list__item:hover {
|
|
424
473
|
background-color: var(--ermis-bg-hover);
|
|
@@ -433,6 +482,39 @@
|
|
|
433
482
|
min-width: 0;
|
|
434
483
|
flex: 1;
|
|
435
484
|
}
|
|
485
|
+
.ermis-channel-list__item-avatar-wrapper {
|
|
486
|
+
position: relative;
|
|
487
|
+
flex-shrink: 0;
|
|
488
|
+
}
|
|
489
|
+
.ermis-channel-list__online-dot {
|
|
490
|
+
position: absolute;
|
|
491
|
+
bottom: 0;
|
|
492
|
+
right: 0;
|
|
493
|
+
width: 10px;
|
|
494
|
+
height: 10px;
|
|
495
|
+
border-radius: var(--ermis-radius-full);
|
|
496
|
+
border: 2px solid var(--ermis-bg-secondary);
|
|
497
|
+
transition: background-color var(--ermis-transition);
|
|
498
|
+
}
|
|
499
|
+
.ermis-channel-list__online-dot--online {
|
|
500
|
+
background-color: var(--ermis-color-success);
|
|
501
|
+
}
|
|
502
|
+
.ermis-channel-list__online-dot--offline {
|
|
503
|
+
background-color: var(--ermis-text-muted);
|
|
504
|
+
}
|
|
505
|
+
.ermis-channel-list__item-top-row {
|
|
506
|
+
display: flex;
|
|
507
|
+
align-items: baseline;
|
|
508
|
+
justify-content: space-between;
|
|
509
|
+
gap: var(--ermis-spacing-sm);
|
|
510
|
+
}
|
|
511
|
+
.ermis-channel-list__item-bottom-row {
|
|
512
|
+
display: flex;
|
|
513
|
+
align-items: center;
|
|
514
|
+
justify-content: space-between;
|
|
515
|
+
gap: var(--ermis-spacing-sm);
|
|
516
|
+
margin-top: 2px;
|
|
517
|
+
}
|
|
436
518
|
.ermis-channel-list__item-name {
|
|
437
519
|
font-size: var(--ermis-font-size-sm);
|
|
438
520
|
font-weight: 500;
|
|
@@ -440,6 +522,14 @@
|
|
|
440
522
|
white-space: nowrap;
|
|
441
523
|
overflow: hidden;
|
|
442
524
|
text-overflow: ellipsis;
|
|
525
|
+
flex: 1;
|
|
526
|
+
}
|
|
527
|
+
.ermis-channel-list__item-timestamp {
|
|
528
|
+
font-size: var(--ermis-font-size-xs);
|
|
529
|
+
color: var(--ermis-text-muted);
|
|
530
|
+
white-space: nowrap;
|
|
531
|
+
flex-shrink: 0;
|
|
532
|
+
margin-top: 2px;
|
|
443
533
|
}
|
|
444
534
|
.ermis-channel-list__item-last-message {
|
|
445
535
|
font-size: var(--ermis-font-size-xs);
|
|
@@ -447,11 +537,82 @@
|
|
|
447
537
|
white-space: nowrap;
|
|
448
538
|
overflow: hidden;
|
|
449
539
|
text-overflow: ellipsis;
|
|
450
|
-
|
|
540
|
+
flex: 1;
|
|
541
|
+
}
|
|
542
|
+
.ermis-channel-list__item-closed-indicator {
|
|
543
|
+
display: flex;
|
|
544
|
+
align-items: center;
|
|
545
|
+
gap: 6px;
|
|
546
|
+
font-size: var(--ermis-font-size-xs);
|
|
547
|
+
color: var(--ermis-text-secondary);
|
|
548
|
+
font-weight: 500;
|
|
549
|
+
white-space: nowrap;
|
|
550
|
+
overflow: hidden;
|
|
551
|
+
text-overflow: ellipsis;
|
|
552
|
+
flex: 1;
|
|
553
|
+
}
|
|
554
|
+
.ermis-channel-list__closed-icon {
|
|
555
|
+
display: inline-flex;
|
|
556
|
+
align-items: center;
|
|
557
|
+
justify-content: center;
|
|
558
|
+
flex-shrink: 0;
|
|
559
|
+
color: var(--ermis-color-danger);
|
|
560
|
+
}
|
|
561
|
+
.ermis-channel-list__pinned-icon {
|
|
562
|
+
position: absolute;
|
|
563
|
+
top: -5px;
|
|
564
|
+
right: 0px;
|
|
565
|
+
color: var(--ermis-color-danger, #ef4444);
|
|
566
|
+
display: inline-flex;
|
|
567
|
+
align-items: center;
|
|
568
|
+
justify-content: center;
|
|
569
|
+
transform: rotate(45deg);
|
|
570
|
+
}
|
|
571
|
+
.ermis-channel-list__item-badges {
|
|
572
|
+
display: flex;
|
|
573
|
+
align-items: center;
|
|
574
|
+
gap: 4px;
|
|
575
|
+
flex-shrink: 0;
|
|
451
576
|
}
|
|
452
577
|
.ermis-channel-list__item-last-message-user {
|
|
453
578
|
color: var(--ermis-text-secondary);
|
|
454
579
|
}
|
|
580
|
+
.ermis-channel-list__item-actions-wrapper,
|
|
581
|
+
.ermis-channel-list__topic-actions-wrapper {
|
|
582
|
+
position: absolute;
|
|
583
|
+
right: var(--ermis-spacing-sm);
|
|
584
|
+
top: 50%;
|
|
585
|
+
transform: translateY(-50%);
|
|
586
|
+
opacity: 0;
|
|
587
|
+
transition: opacity var(--ermis-transition);
|
|
588
|
+
display: flex;
|
|
589
|
+
align-items: center;
|
|
590
|
+
z-index: 1;
|
|
591
|
+
}
|
|
592
|
+
.ermis-channel-list__item:hover .ermis-channel-list__item-actions-wrapper,
|
|
593
|
+
.ermis-channel-list__topic-header:hover .ermis-channel-list__topic-actions-wrapper,
|
|
594
|
+
.ermis-channel-list__item-actions-wrapper:has(.ermis-channel-list__actions-trigger--active),
|
|
595
|
+
.ermis-channel-list__topic-actions-wrapper:has(.ermis-channel-list__actions-trigger--active) {
|
|
596
|
+
opacity: 1;
|
|
597
|
+
}
|
|
598
|
+
.ermis-channel-list__actions-trigger {
|
|
599
|
+
display: flex;
|
|
600
|
+
align-items: center;
|
|
601
|
+
justify-content: center;
|
|
602
|
+
width: 24px;
|
|
603
|
+
height: 24px;
|
|
604
|
+
border-radius: var(--ermis-radius-sm);
|
|
605
|
+
background-color: var(--ermis-bg-primary);
|
|
606
|
+
color: var(--ermis-text-muted);
|
|
607
|
+
border: none;
|
|
608
|
+
cursor: pointer;
|
|
609
|
+
transition: all var(--ermis-transition);
|
|
610
|
+
}
|
|
611
|
+
.ermis-channel-list__actions-trigger:hover,
|
|
612
|
+
.ermis-channel-list__actions-trigger--active {
|
|
613
|
+
background-color: var(--ermis-bg-primary);
|
|
614
|
+
color: var(--ermis-accent);
|
|
615
|
+
}
|
|
455
616
|
.ermis-channel-list__item--unread .ermis-channel-list__item-name {
|
|
456
617
|
font-weight: 700;
|
|
457
618
|
color: var(--ermis-text-primary);
|
|
@@ -475,9 +636,6 @@
|
|
|
475
636
|
line-height: 1;
|
|
476
637
|
flex-shrink: 0;
|
|
477
638
|
}
|
|
478
|
-
.ermis-channel-list__item--blocked {
|
|
479
|
-
opacity: 0.5;
|
|
480
|
-
}
|
|
481
639
|
.ermis-channel-list__blocked-icon {
|
|
482
640
|
display: inline-flex;
|
|
483
641
|
align-items: center;
|
|
@@ -532,6 +690,81 @@
|
|
|
532
690
|
.ermis-channel-list__accordion-icon--expanded {
|
|
533
691
|
transform: rotate(0deg);
|
|
534
692
|
}
|
|
693
|
+
.ermis-channel-list__topic-group {
|
|
694
|
+
display: flex;
|
|
695
|
+
flex-direction: column;
|
|
696
|
+
}
|
|
697
|
+
.ermis-channel-list__topic-header {
|
|
698
|
+
display: flex;
|
|
699
|
+
align-items: center;
|
|
700
|
+
gap: var(--ermis-spacing-md);
|
|
701
|
+
padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
|
|
702
|
+
cursor: pointer;
|
|
703
|
+
border-left: 2px solid transparent;
|
|
704
|
+
transition: background-color var(--ermis-transition);
|
|
705
|
+
position: relative;
|
|
706
|
+
}
|
|
707
|
+
.ermis-channel-list__topic-header:hover {
|
|
708
|
+
background-color: var(--ermis-bg-hover);
|
|
709
|
+
}
|
|
710
|
+
.ermis-channel-list__topic-header-name {
|
|
711
|
+
font-size: var(--ermis-font-size-sm);
|
|
712
|
+
font-weight: 600;
|
|
713
|
+
color: var(--ermis-text-primary);
|
|
714
|
+
white-space: nowrap;
|
|
715
|
+
overflow: hidden;
|
|
716
|
+
text-overflow: ellipsis;
|
|
717
|
+
flex: 1;
|
|
718
|
+
}
|
|
719
|
+
.ermis-channel-list__add-topic-btn {
|
|
720
|
+
display: flex;
|
|
721
|
+
align-items: center;
|
|
722
|
+
justify-content: center;
|
|
723
|
+
width: 24px;
|
|
724
|
+
height: 24px;
|
|
725
|
+
border-radius: var(--ermis-radius-sm);
|
|
726
|
+
background-color: transparent;
|
|
727
|
+
color: var(--ermis-text-muted);
|
|
728
|
+
border: none;
|
|
729
|
+
cursor: pointer;
|
|
730
|
+
transition: all var(--ermis-transition);
|
|
731
|
+
}
|
|
732
|
+
.ermis-channel-list__add-topic-btn:hover {
|
|
733
|
+
background-color: var(--ermis-bg-primary);
|
|
734
|
+
color: var(--ermis-accent);
|
|
735
|
+
}
|
|
736
|
+
.ermis-channel-list__topic-header--expanded .ermis-channel-list__accordion-icon {
|
|
737
|
+
transform: rotate(0deg);
|
|
738
|
+
}
|
|
739
|
+
.ermis-channel-list__topic-sublist {
|
|
740
|
+
display: flex;
|
|
741
|
+
flex-direction: column;
|
|
742
|
+
background-color: var(--ermis-bg-secondary);
|
|
743
|
+
}
|
|
744
|
+
.ermis-channel-list__topic-sublist .ermis-channel-list__item {
|
|
745
|
+
padding-left: var(--ermis-spacing-md);
|
|
746
|
+
margin-left: 20px;
|
|
747
|
+
border-left: 2px solid var(--ermis-border);
|
|
748
|
+
}
|
|
749
|
+
.ermis-channel-list__topic-sublist .ermis-channel-list__item:hover {
|
|
750
|
+
border-left-color: var(--ermis-border-hover);
|
|
751
|
+
}
|
|
752
|
+
.ermis-channel-list__topic-sublist .ermis-channel-list__item--active {
|
|
753
|
+
border-left-color: var(--ermis-accent);
|
|
754
|
+
}
|
|
755
|
+
.ermis-channel-list__topic-hashtag {
|
|
756
|
+
display: flex;
|
|
757
|
+
align-items: center;
|
|
758
|
+
justify-content: center;
|
|
759
|
+
width: 24px;
|
|
760
|
+
height: 24px;
|
|
761
|
+
background-color: transparent;
|
|
762
|
+
color: var(--ermis-text-muted);
|
|
763
|
+
border-radius: var(--ermis-radius-full);
|
|
764
|
+
font-size: 0.95rem;
|
|
765
|
+
font-weight: 600;
|
|
766
|
+
flex-shrink: 0;
|
|
767
|
+
}
|
|
535
768
|
|
|
536
769
|
/* src/styles/_message-list.css */
|
|
537
770
|
.ermis-channel {
|
|
@@ -751,11 +984,49 @@
|
|
|
751
984
|
font-size: var(--ermis-font-size-sm);
|
|
752
985
|
color: var(--ermis-text-muted);
|
|
753
986
|
}
|
|
754
|
-
.ermis-message-
|
|
755
|
-
display:
|
|
987
|
+
.ermis-message-list__closed-overlay {
|
|
988
|
+
display: flex;
|
|
989
|
+
flex-direction: column;
|
|
990
|
+
align-items: center;
|
|
991
|
+
justify-content: center;
|
|
992
|
+
min-height: calc(100dvh - 8rem);
|
|
993
|
+
gap: var(--ermis-spacing-md);
|
|
994
|
+
user-select: none;
|
|
756
995
|
}
|
|
757
|
-
.ermis-message-
|
|
758
|
-
|
|
996
|
+
.ermis-message-list__closed-overlay-icon {
|
|
997
|
+
color: var(--ermis-color-danger);
|
|
998
|
+
opacity: 0.8;
|
|
999
|
+
}
|
|
1000
|
+
.ermis-message-list__closed-overlay-title {
|
|
1001
|
+
font-size: var(--ermis-font-size-base);
|
|
1002
|
+
font-weight: 600;
|
|
1003
|
+
color: var(--ermis-text-primary);
|
|
1004
|
+
}
|
|
1005
|
+
.ermis-message-list__closed-overlay-subtitle {
|
|
1006
|
+
font-size: var(--ermis-font-size-sm);
|
|
1007
|
+
color: var(--ermis-text-muted);
|
|
1008
|
+
text-align: center;
|
|
1009
|
+
max-width: 80%;
|
|
1010
|
+
}
|
|
1011
|
+
.ermis-message-list__reopen-btn {
|
|
1012
|
+
margin-top: var(--ermis-spacing-md);
|
|
1013
|
+
padding: var(--ermis-spacing-sm) var(--ermis-spacing-xl, 24px);
|
|
1014
|
+
border: none;
|
|
1015
|
+
border-radius: var(--ermis-radius-md, 8px);
|
|
1016
|
+
background-color: var(--ermis-accent);
|
|
1017
|
+
color: #fff;
|
|
1018
|
+
font-size: var(--ermis-font-size-sm);
|
|
1019
|
+
font-weight: 600;
|
|
1020
|
+
font-family: var(--ermis-font-family);
|
|
1021
|
+
cursor: pointer;
|
|
1022
|
+
transition: background-color var(--ermis-transition), transform var(--ermis-transition);
|
|
1023
|
+
}
|
|
1024
|
+
.ermis-message-list__reopen-btn:hover {
|
|
1025
|
+
background-color: var(--ermis-accent-hover);
|
|
1026
|
+
transform: translateY(-1px);
|
|
1027
|
+
}
|
|
1028
|
+
.ermis-message-list__reopen-btn:active {
|
|
1029
|
+
transform: translateY(0);
|
|
759
1030
|
}
|
|
760
1031
|
.ermis-message-list__unblock-btn {
|
|
761
1032
|
margin-top: var(--ermis-spacing-md);
|
|
@@ -868,6 +1139,27 @@
|
|
|
868
1139
|
.ermis-message-list__reject-btn:active {
|
|
869
1140
|
transform: translateY(0);
|
|
870
1141
|
}
|
|
1142
|
+
.ermis-message-list__pending-invitee {
|
|
1143
|
+
background-color: var(--ermis-bg-secondary);
|
|
1144
|
+
border: 1px solid var(--ermis-border);
|
|
1145
|
+
border-radius: var(--ermis-radius-md, 8px);
|
|
1146
|
+
padding: var(--ermis-spacing-sm, 12px) var(--ermis-spacing-md, 16px);
|
|
1147
|
+
margin: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
|
|
1148
|
+
display: flex;
|
|
1149
|
+
align-items: center;
|
|
1150
|
+
justify-content: center;
|
|
1151
|
+
}
|
|
1152
|
+
.ermis-message-list__pending-invitee-content {
|
|
1153
|
+
display: flex;
|
|
1154
|
+
align-items: center;
|
|
1155
|
+
gap: var(--ermis-spacing-md, 12px);
|
|
1156
|
+
color: var(--ermis-text-secondary);
|
|
1157
|
+
font-size: var(--ermis-font-size-sm, 14px);
|
|
1158
|
+
font-family: var(--ermis-font-family, sans-serif);
|
|
1159
|
+
}
|
|
1160
|
+
.ermis-message-list__pending-invitee-content svg {
|
|
1161
|
+
color: var(--ermis-accent);
|
|
1162
|
+
}
|
|
871
1163
|
|
|
872
1164
|
/* src/styles/_message-bubble.css */
|
|
873
1165
|
.ermis-quoted-message {
|
|
@@ -1017,6 +1309,9 @@
|
|
|
1017
1309
|
.ermis-message-bubble--own .ermis-text-link {
|
|
1018
1310
|
color: rgba(255, 255, 255, 0.9);
|
|
1019
1311
|
}
|
|
1312
|
+
.ermis-message-bubble--own .ermis-attachment__link-title {
|
|
1313
|
+
color: rgba(255, 255, 255, 0.9);
|
|
1314
|
+
}
|
|
1020
1315
|
.ermis-message-bubble {
|
|
1021
1316
|
position: relative;
|
|
1022
1317
|
display: flex;
|
|
@@ -1024,7 +1319,6 @@
|
|
|
1024
1319
|
align-items: flex-end;
|
|
1025
1320
|
padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
|
|
1026
1321
|
border-radius: var(--ermis-radius-lg);
|
|
1027
|
-
width: 100%;
|
|
1028
1322
|
word-break: break-word;
|
|
1029
1323
|
}
|
|
1030
1324
|
.ermis-message-bubble--own {
|
|
@@ -1032,6 +1326,20 @@
|
|
|
1032
1326
|
color: var(--ermis-bubble-own-text);
|
|
1033
1327
|
border-bottom-right-radius: var(--ermis-radius-sm);
|
|
1034
1328
|
}
|
|
1329
|
+
.ermis-message-bubble--own .ermis-attachment__file-size,
|
|
1330
|
+
.ermis-message-bubble--own .ermis-attachment__link-url,
|
|
1331
|
+
.ermis-message-bubble--own .ermis-attachment__link-description,
|
|
1332
|
+
.ermis-message-bubble--own .ermis-attachment__voice-duration,
|
|
1333
|
+
.ermis-message-bubble--own .ermis-message-list__forwarded-indicator,
|
|
1334
|
+
.ermis-message-bubble--own .ermis-attachment--file {
|
|
1335
|
+
color: rgba(255, 255, 255, 0.6);
|
|
1336
|
+
}
|
|
1337
|
+
.ermis-message-bubble--own .ermis-attachment--link-preview {
|
|
1338
|
+
border-color: rgba(255, 255, 255, 0.2);
|
|
1339
|
+
}
|
|
1340
|
+
.ermis-message-bubble--own .ermis-attachment--file {
|
|
1341
|
+
background-color: rgba(255, 255, 255, 0.1);
|
|
1342
|
+
}
|
|
1035
1343
|
.ermis-message-bubble--other {
|
|
1036
1344
|
background-color: var(--ermis-bubble-other-bg);
|
|
1037
1345
|
color: var(--ermis-bubble-other-text);
|
|
@@ -1128,6 +1436,9 @@
|
|
|
1128
1436
|
.ermis-message-list__item-content--has-attachments {
|
|
1129
1437
|
width: 350px;
|
|
1130
1438
|
}
|
|
1439
|
+
.ermis-message-list__item-content--has-attachments .ermis-message-bubble {
|
|
1440
|
+
width: 100%;
|
|
1441
|
+
}
|
|
1131
1442
|
.ermis-message-content--with-attachments {
|
|
1132
1443
|
display: flex;
|
|
1133
1444
|
flex-direction: column;
|
|
@@ -1157,17 +1468,26 @@
|
|
|
1157
1468
|
grid-template-columns: 1fr 1fr;
|
|
1158
1469
|
}
|
|
1159
1470
|
.ermis-attachment-grid .ermis-attachment--image,
|
|
1160
|
-
.ermis-attachment-grid .ermis-attachment--video
|
|
1471
|
+
.ermis-attachment-grid .ermis-attachment--video,
|
|
1472
|
+
.ermis-attachment-grid .ermis-attachment--video-poster {
|
|
1161
1473
|
width: 100%;
|
|
1162
1474
|
height: 100%;
|
|
1163
1475
|
max-width: none;
|
|
1164
1476
|
max-height: 200px;
|
|
1165
|
-
object-fit: cover;
|
|
1166
1477
|
border-radius: 0;
|
|
1167
1478
|
display: block;
|
|
1168
1479
|
}
|
|
1480
|
+
.ermis-attachment-grid .ermis-attachment--image,
|
|
1481
|
+
.ermis-attachment-grid .ermis-attachment--video-poster {
|
|
1482
|
+
object-fit: cover;
|
|
1483
|
+
}
|
|
1484
|
+
.ermis-attachment-grid .ermis-attachment--video {
|
|
1485
|
+
object-fit: contain;
|
|
1486
|
+
background-color: var(--ermis-bg-hover);
|
|
1487
|
+
}
|
|
1169
1488
|
.ermis-attachment-grid--single .ermis-attachment--image,
|
|
1170
|
-
.ermis-attachment-grid--single .ermis-attachment--video
|
|
1489
|
+
.ermis-attachment-grid--single .ermis-attachment--video,
|
|
1490
|
+
.ermis-attachment-grid--single .ermis-attachment--video-poster {
|
|
1171
1491
|
max-height: 300px;
|
|
1172
1492
|
}
|
|
1173
1493
|
.ermis-attachment-grid--multi > :last-child:nth-child(odd) {
|
|
@@ -1182,6 +1502,9 @@
|
|
|
1182
1502
|
min-height: 120px;
|
|
1183
1503
|
background-color: var(--ermis-bg-hover);
|
|
1184
1504
|
}
|
|
1505
|
+
.ermis-attachment-aspect-box--4-3 {
|
|
1506
|
+
padding-bottom: 75%;
|
|
1507
|
+
}
|
|
1185
1508
|
.ermis-attachment-blur-preview {
|
|
1186
1509
|
position: absolute;
|
|
1187
1510
|
top: 0;
|
|
@@ -1217,13 +1540,17 @@
|
|
|
1217
1540
|
background-position: -200% 0;
|
|
1218
1541
|
}
|
|
1219
1542
|
}
|
|
1220
|
-
.ermis-attachment-
|
|
1543
|
+
.ermis-attachment--hidden-loader {
|
|
1544
|
+
display: none;
|
|
1545
|
+
}
|
|
1546
|
+
.ermis-attachment-aspect-box .ermis-attachment--image,
|
|
1547
|
+
.ermis-attachment-aspect-box .ermis-attachment--video,
|
|
1548
|
+
.ermis-attachment-aspect-box .ermis-attachment--video-poster {
|
|
1221
1549
|
position: absolute;
|
|
1222
1550
|
top: 0;
|
|
1223
1551
|
left: 0;
|
|
1224
1552
|
width: 100%;
|
|
1225
1553
|
height: 100%;
|
|
1226
|
-
object-fit: cover;
|
|
1227
1554
|
opacity: 0;
|
|
1228
1555
|
transition: opacity 0.3s ease;
|
|
1229
1556
|
z-index: 2;
|
|
@@ -1231,7 +1558,17 @@
|
|
|
1231
1558
|
max-height: none;
|
|
1232
1559
|
border-radius: 0;
|
|
1233
1560
|
}
|
|
1234
|
-
.ermis-attachment-aspect-box .ermis-attachment--image
|
|
1561
|
+
.ermis-attachment-aspect-box .ermis-attachment--image,
|
|
1562
|
+
.ermis-attachment-aspect-box .ermis-attachment--video-poster {
|
|
1563
|
+
object-fit: cover;
|
|
1564
|
+
}
|
|
1565
|
+
.ermis-attachment-aspect-box .ermis-attachment--video {
|
|
1566
|
+
object-fit: contain;
|
|
1567
|
+
background-color: var(--ermis-bg-hover);
|
|
1568
|
+
}
|
|
1569
|
+
.ermis-attachment-aspect-box .ermis-attachment--image.ermis-attachment--loaded,
|
|
1570
|
+
.ermis-attachment-aspect-box .ermis-attachment--video.ermis-attachment--loaded,
|
|
1571
|
+
.ermis-attachment-aspect-box .ermis-attachment--video-poster.ermis-attachment--loaded {
|
|
1235
1572
|
opacity: 1;
|
|
1236
1573
|
}
|
|
1237
1574
|
.ermis-attachment-grid .ermis-attachment-aspect-box {
|
|
@@ -1239,7 +1576,8 @@
|
|
|
1239
1576
|
border-radius: 0;
|
|
1240
1577
|
min-height: 100px;
|
|
1241
1578
|
}
|
|
1242
|
-
.ermis-attachment--image
|
|
1579
|
+
.ermis-attachment--image,
|
|
1580
|
+
.ermis-attachment--video-poster {
|
|
1243
1581
|
max-width: 300px;
|
|
1244
1582
|
max-height: 200px;
|
|
1245
1583
|
border-radius: var(--ermis-radius-md);
|
|
@@ -1250,6 +1588,7 @@
|
|
|
1250
1588
|
max-width: 300px;
|
|
1251
1589
|
max-height: 200px;
|
|
1252
1590
|
border-radius: var(--ermis-radius-md);
|
|
1591
|
+
object-fit: contain;
|
|
1253
1592
|
}
|
|
1254
1593
|
.ermis-attachment--file {
|
|
1255
1594
|
display: flex;
|
|
@@ -1266,13 +1605,32 @@
|
|
|
1266
1605
|
background-color: var(--ermis-bg-active);
|
|
1267
1606
|
}
|
|
1268
1607
|
.ermis-attachment__file-icon {
|
|
1269
|
-
|
|
1608
|
+
width: 40px;
|
|
1609
|
+
height: 40px;
|
|
1610
|
+
min-width: 40px;
|
|
1611
|
+
border-radius: var(--ermis-radius-md);
|
|
1612
|
+
background: var(--ermis-bg-secondary);
|
|
1613
|
+
display: flex;
|
|
1614
|
+
flex-direction: column;
|
|
1615
|
+
align-items: center;
|
|
1616
|
+
justify-content: center;
|
|
1617
|
+
color: var(--ermis-text-muted);
|
|
1618
|
+
gap: 1px;
|
|
1270
1619
|
flex-shrink: 0;
|
|
1271
1620
|
}
|
|
1621
|
+
.ermis-attachment__file-ext {
|
|
1622
|
+
font-size: 8px;
|
|
1623
|
+
font-weight: 700;
|
|
1624
|
+
text-transform: uppercase;
|
|
1625
|
+
letter-spacing: 0.3px;
|
|
1626
|
+
color: var(--ermis-text-muted);
|
|
1627
|
+
line-height: 1;
|
|
1628
|
+
}
|
|
1272
1629
|
.ermis-attachment__file-info {
|
|
1273
1630
|
display: flex;
|
|
1274
1631
|
flex-direction: column;
|
|
1275
1632
|
min-width: 0;
|
|
1633
|
+
flex: 1;
|
|
1276
1634
|
}
|
|
1277
1635
|
.ermis-attachment__file-name {
|
|
1278
1636
|
font-size: var(--ermis-font-size-sm);
|
|
@@ -1285,6 +1643,41 @@
|
|
|
1285
1643
|
font-size: var(--ermis-font-size-xs);
|
|
1286
1644
|
color: var(--ermis-text-muted);
|
|
1287
1645
|
}
|
|
1646
|
+
.ermis-attachment__file-download {
|
|
1647
|
+
display: flex;
|
|
1648
|
+
align-items: center;
|
|
1649
|
+
justify-content: center;
|
|
1650
|
+
flex-shrink: 0;
|
|
1651
|
+
width: 32px;
|
|
1652
|
+
height: 32px;
|
|
1653
|
+
border: none;
|
|
1654
|
+
border-radius: var(--ermis-radius-full);
|
|
1655
|
+
background: transparent;
|
|
1656
|
+
color: var(--ermis-text-muted);
|
|
1657
|
+
cursor: pointer;
|
|
1658
|
+
transition: background-color var(--ermis-transition), color var(--ermis-transition);
|
|
1659
|
+
}
|
|
1660
|
+
.ermis-attachment__file-download:hover {
|
|
1661
|
+
background-color: var(--ermis-bg-active);
|
|
1662
|
+
color: var(--ermis-accent);
|
|
1663
|
+
}
|
|
1664
|
+
.ermis-message-bubble--own .ermis-attachment__file-name {
|
|
1665
|
+
color: rgba(255, 255, 255, 0.9);
|
|
1666
|
+
}
|
|
1667
|
+
.ermis-message-bubble--own .ermis-attachment__file-icon {
|
|
1668
|
+
background: rgba(255, 255, 255, 0.2);
|
|
1669
|
+
color: #fff;
|
|
1670
|
+
}
|
|
1671
|
+
.ermis-message-bubble--own .ermis-attachment__file-ext {
|
|
1672
|
+
color: rgba(255, 255, 255, 0.8);
|
|
1673
|
+
}
|
|
1674
|
+
.ermis-message-bubble--own .ermis-attachment__file-download {
|
|
1675
|
+
color: rgba(255, 255, 255, 0.7);
|
|
1676
|
+
}
|
|
1677
|
+
.ermis-message-bubble--own .ermis-attachment__file-download:hover {
|
|
1678
|
+
background-color: rgba(255, 255, 255, 0.15);
|
|
1679
|
+
color: #fff;
|
|
1680
|
+
}
|
|
1288
1681
|
.ermis-attachment--voice {
|
|
1289
1682
|
display: flex;
|
|
1290
1683
|
align-items: center;
|
|
@@ -1325,10 +1718,26 @@
|
|
|
1325
1718
|
.ermis-attachment--link-preview:hover {
|
|
1326
1719
|
border-color: var(--ermis-accent);
|
|
1327
1720
|
}
|
|
1721
|
+
.ermis-attachment__link-image-wrapper {
|
|
1722
|
+
position: relative;
|
|
1723
|
+
width: 100%;
|
|
1724
|
+
min-height: 120px;
|
|
1725
|
+
background-color: var(--ermis-bg-hover);
|
|
1726
|
+
overflow: hidden;
|
|
1727
|
+
}
|
|
1328
1728
|
.ermis-attachment__link-image {
|
|
1729
|
+
display: block;
|
|
1329
1730
|
width: 100%;
|
|
1330
|
-
|
|
1731
|
+
height: 100%;
|
|
1331
1732
|
object-fit: cover;
|
|
1733
|
+
position: absolute;
|
|
1734
|
+
top: 0;
|
|
1735
|
+
left: 0;
|
|
1736
|
+
opacity: 0;
|
|
1737
|
+
transition: opacity 0.3s ease;
|
|
1738
|
+
}
|
|
1739
|
+
.ermis-attachment__link-image.ermis-attachment--loaded {
|
|
1740
|
+
opacity: 1;
|
|
1332
1741
|
}
|
|
1333
1742
|
.ermis-attachment__link-info {
|
|
1334
1743
|
display: flex;
|
|
@@ -1370,9 +1779,24 @@
|
|
|
1370
1779
|
.ermis-message-poll__text {
|
|
1371
1780
|
font-size: var(--ermis-font-size-sm);
|
|
1372
1781
|
}
|
|
1782
|
+
.ermis-message-sticker-wrapper {
|
|
1783
|
+
position: relative;
|
|
1784
|
+
width: 120px;
|
|
1785
|
+
height: 120px;
|
|
1786
|
+
overflow: hidden;
|
|
1787
|
+
}
|
|
1373
1788
|
.ermis-message-sticker {
|
|
1374
|
-
|
|
1375
|
-
|
|
1789
|
+
position: absolute;
|
|
1790
|
+
top: 0;
|
|
1791
|
+
left: 0;
|
|
1792
|
+
width: 100%;
|
|
1793
|
+
height: 100%;
|
|
1794
|
+
object-fit: contain;
|
|
1795
|
+
opacity: 0;
|
|
1796
|
+
transition: opacity 0.3s ease;
|
|
1797
|
+
}
|
|
1798
|
+
.ermis-message-sticker.ermis-attachment--loaded {
|
|
1799
|
+
opacity: 1;
|
|
1376
1800
|
}
|
|
1377
1801
|
.ermis-message-error {
|
|
1378
1802
|
font-size: var(--ermis-font-size-sm);
|
|
@@ -1764,25 +2188,43 @@
|
|
|
1764
2188
|
user-select: none;
|
|
1765
2189
|
opacity: 0.8;
|
|
1766
2190
|
}
|
|
1767
|
-
.ermis-message-input__banned-banner svg {
|
|
2191
|
+
.ermis-message-input__banned-banner svg {
|
|
2192
|
+
flex-shrink: 0;
|
|
2193
|
+
}
|
|
2194
|
+
.ermis-message-input--blocked {
|
|
2195
|
+
pointer-events: none;
|
|
2196
|
+
}
|
|
2197
|
+
.ermis-message-input__blocked-banner {
|
|
2198
|
+
display: flex;
|
|
2199
|
+
align-items: center;
|
|
2200
|
+
justify-content: center;
|
|
2201
|
+
gap: var(--ermis-spacing-sm);
|
|
2202
|
+
padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
|
|
2203
|
+
color: var(--ermis-text-secondary);
|
|
2204
|
+
font-size: var(--ermis-font-size-sm);
|
|
2205
|
+
font-weight: 500;
|
|
2206
|
+
user-select: none;
|
|
2207
|
+
opacity: 0.8;
|
|
2208
|
+
}
|
|
2209
|
+
.ermis-message-input__blocked-banner svg {
|
|
1768
2210
|
flex-shrink: 0;
|
|
1769
2211
|
}
|
|
1770
|
-
.ermis-message-input--
|
|
2212
|
+
.ermis-message-input--closed {
|
|
1771
2213
|
pointer-events: none;
|
|
1772
2214
|
}
|
|
1773
|
-
.ermis-message-
|
|
2215
|
+
.ermis-message-input__closed-banner {
|
|
1774
2216
|
display: flex;
|
|
1775
2217
|
align-items: center;
|
|
1776
2218
|
justify-content: center;
|
|
1777
2219
|
gap: var(--ermis-spacing-sm);
|
|
1778
2220
|
padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
|
|
1779
|
-
color: var(--ermis-
|
|
2221
|
+
color: var(--ermis-color-danger);
|
|
1780
2222
|
font-size: var(--ermis-font-size-sm);
|
|
1781
2223
|
font-weight: 500;
|
|
1782
2224
|
user-select: none;
|
|
1783
2225
|
opacity: 0.8;
|
|
1784
2226
|
}
|
|
1785
|
-
.ermis-message-
|
|
2227
|
+
.ermis-message-input__closed-banner svg {
|
|
1786
2228
|
flex-shrink: 0;
|
|
1787
2229
|
}
|
|
1788
2230
|
.ermis-message-input__keyword-banner {
|
|
@@ -2296,6 +2738,12 @@
|
|
|
2296
2738
|
flex-wrap: wrap;
|
|
2297
2739
|
gap: 4px;
|
|
2298
2740
|
margin-bottom: 2px;
|
|
2741
|
+
margin-top: 2px;
|
|
2742
|
+
width: 100%;
|
|
2743
|
+
}
|
|
2744
|
+
.ermis-message-reactions--disabled {
|
|
2745
|
+
opacity: 0.8;
|
|
2746
|
+
pointer-events: none;
|
|
2299
2747
|
}
|
|
2300
2748
|
.ermis-message-reactions__item {
|
|
2301
2749
|
position: relative;
|
|
@@ -2381,6 +2829,10 @@
|
|
|
2381
2829
|
pointer-events: auto;
|
|
2382
2830
|
transform: translateY(0);
|
|
2383
2831
|
}
|
|
2832
|
+
.ermis-message-list__bubble-wrapper:hover .ermis-message-quick-reactions--disabled {
|
|
2833
|
+
opacity: 0.5;
|
|
2834
|
+
pointer-events: none;
|
|
2835
|
+
}
|
|
2384
2836
|
.ermis-message-quick-reactions__btn {
|
|
2385
2837
|
display: flex;
|
|
2386
2838
|
align-items: center;
|
|
@@ -2470,6 +2922,25 @@
|
|
|
2470
2922
|
.ermis-channel-info__name-row .ermis-channel-info__name {
|
|
2471
2923
|
margin: 0;
|
|
2472
2924
|
}
|
|
2925
|
+
.ermis-channel-info__parent-name {
|
|
2926
|
+
font-size: 13px;
|
|
2927
|
+
color: var(--ermis-accent);
|
|
2928
|
+
margin-top: -4px;
|
|
2929
|
+
margin-bottom: 8px;
|
|
2930
|
+
font-weight: 500;
|
|
2931
|
+
}
|
|
2932
|
+
.ermis-channel-info__topic-emoji-avatar {
|
|
2933
|
+
font-size: 48px;
|
|
2934
|
+
line-height: 80px;
|
|
2935
|
+
width: 80px;
|
|
2936
|
+
height: 80px;
|
|
2937
|
+
display: flex;
|
|
2938
|
+
align-items: center;
|
|
2939
|
+
justify-content: center;
|
|
2940
|
+
background: var(--ermis-bg-secondary);
|
|
2941
|
+
border-radius: 50%;
|
|
2942
|
+
margin-bottom: 16px;
|
|
2943
|
+
}
|
|
2473
2944
|
.ermis-channel-info__cover-edit-btn {
|
|
2474
2945
|
background: transparent;
|
|
2475
2946
|
border: none;
|
|
@@ -4468,5 +4939,345 @@
|
|
|
4468
4939
|
}
|
|
4469
4940
|
}
|
|
4470
4941
|
|
|
4942
|
+
/* src/styles/_topic-modal.css */
|
|
4943
|
+
.ermis-create-topic__body {
|
|
4944
|
+
display: flex;
|
|
4945
|
+
flex-direction: column;
|
|
4946
|
+
gap: var(--ermis-spacing-lg);
|
|
4947
|
+
padding: 0 var(--ermis-spacing-xs);
|
|
4948
|
+
}
|
|
4949
|
+
.ermis-create-topic__field {
|
|
4950
|
+
display: flex;
|
|
4951
|
+
flex-direction: column;
|
|
4952
|
+
gap: var(--ermis-spacing-xs);
|
|
4953
|
+
}
|
|
4954
|
+
.ermis-create-topic__label {
|
|
4955
|
+
font-size: var(--ermis-font-size-sm);
|
|
4956
|
+
font-weight: 500;
|
|
4957
|
+
color: var(--ermis-text-primary);
|
|
4958
|
+
}
|
|
4959
|
+
.ermis-create-topic__required {
|
|
4960
|
+
color: var(--ermis-error);
|
|
4961
|
+
}
|
|
4962
|
+
.ermis-create-topic__input {
|
|
4963
|
+
padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
|
|
4964
|
+
border: 1px solid var(--ermis-border);
|
|
4965
|
+
border-radius: var(--ermis-radius-md);
|
|
4966
|
+
font-size: var(--ermis-font-size-base);
|
|
4967
|
+
color: var(--ermis-text-primary);
|
|
4968
|
+
background-color: var(--ermis-bg-primary);
|
|
4969
|
+
transition: border-color var(--ermis-transition);
|
|
4970
|
+
}
|
|
4971
|
+
.ermis-create-topic__input:focus {
|
|
4972
|
+
outline: none;
|
|
4973
|
+
border-color: var(--ermis-accent);
|
|
4974
|
+
}
|
|
4975
|
+
.ermis-create-topic__live-preview {
|
|
4976
|
+
display: flex;
|
|
4977
|
+
align-items: center;
|
|
4978
|
+
gap: var(--ermis-spacing-sm);
|
|
4979
|
+
padding: var(--ermis-spacing-md);
|
|
4980
|
+
background-color: var(--ermis-bg-secondary);
|
|
4981
|
+
border-radius: var(--ermis-radius-md);
|
|
4982
|
+
border: 1px dashed var(--ermis-border);
|
|
4983
|
+
}
|
|
4984
|
+
.ermis-create-topic__live-preview-emoji {
|
|
4985
|
+
font-size: 20px;
|
|
4986
|
+
}
|
|
4987
|
+
.ermis-create-topic__live-preview-name {
|
|
4988
|
+
font-size: var(--ermis-font-size-base);
|
|
4989
|
+
font-weight: 600;
|
|
4990
|
+
color: var(--ermis-text-primary);
|
|
4991
|
+
white-space: nowrap;
|
|
4992
|
+
overflow: hidden;
|
|
4993
|
+
text-overflow: ellipsis;
|
|
4994
|
+
}
|
|
4995
|
+
.ermis-create-topic__emoji-picker {
|
|
4996
|
+
margin-top: var(--ermis-spacing-sm);
|
|
4997
|
+
}
|
|
4998
|
+
.ermis-create-topic__default-icons {
|
|
4999
|
+
display: grid;
|
|
5000
|
+
grid-template-columns: repeat(4, 1fr);
|
|
5001
|
+
gap: var(--ermis-spacing-sm);
|
|
5002
|
+
}
|
|
5003
|
+
.ermis-create-topic__default-icon {
|
|
5004
|
+
width: 100%;
|
|
5005
|
+
height: 40px;
|
|
5006
|
+
display: flex;
|
|
5007
|
+
align-items: center;
|
|
5008
|
+
justify-content: center;
|
|
5009
|
+
font-size: 20px;
|
|
5010
|
+
background-color: var(--ermis-bg-secondary);
|
|
5011
|
+
border: 1px solid var(--ermis-border);
|
|
5012
|
+
border-radius: var(--ermis-radius-md);
|
|
5013
|
+
cursor: pointer;
|
|
5014
|
+
transition: all var(--ermis-transition);
|
|
5015
|
+
}
|
|
5016
|
+
.ermis-create-topic__default-icon:hover:not(:disabled) {
|
|
5017
|
+
background-color: var(--ermis-bg-hover);
|
|
5018
|
+
border-color: var(--ermis-border-hover);
|
|
5019
|
+
}
|
|
5020
|
+
.ermis-create-topic__default-icon--active {
|
|
5021
|
+
border-color: var(--ermis-accent);
|
|
5022
|
+
background-color: var(--ermis-bg-primary);
|
|
5023
|
+
}
|
|
5024
|
+
.ermis-create-topic__default-icon:disabled {
|
|
5025
|
+
opacity: 0.5;
|
|
5026
|
+
cursor: not-allowed;
|
|
5027
|
+
}
|
|
5028
|
+
.ermis-create-topic__error {
|
|
5029
|
+
display: flex;
|
|
5030
|
+
align-items: center;
|
|
5031
|
+
gap: var(--ermis-spacing-sm);
|
|
5032
|
+
padding: var(--ermis-spacing-sm);
|
|
5033
|
+
border-radius: var(--ermis-radius-md);
|
|
5034
|
+
background-color: rgba(239, 68, 68, 0.1);
|
|
5035
|
+
color: var(--ermis-error);
|
|
5036
|
+
font-size: var(--ermis-font-size-sm);
|
|
5037
|
+
}
|
|
5038
|
+
.ermis-create-topic__footer {
|
|
5039
|
+
display: flex;
|
|
5040
|
+
justify-content: flex-end;
|
|
5041
|
+
gap: var(--ermis-spacing-sm);
|
|
5042
|
+
margin-top: var(--ermis-spacing-lg);
|
|
5043
|
+
}
|
|
5044
|
+
.ermis-create-topic__btn {
|
|
5045
|
+
padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
|
|
5046
|
+
border-radius: var(--ermis-radius-md);
|
|
5047
|
+
font-size: var(--ermis-font-size-sm);
|
|
5048
|
+
font-weight: 500;
|
|
5049
|
+
cursor: pointer;
|
|
5050
|
+
transition: all var(--ermis-transition);
|
|
5051
|
+
border: none;
|
|
5052
|
+
}
|
|
5053
|
+
.ermis-create-topic__btn:disabled {
|
|
5054
|
+
opacity: 0.5;
|
|
5055
|
+
cursor: not-allowed;
|
|
5056
|
+
}
|
|
5057
|
+
.ermis-create-topic__btn--cancel {
|
|
5058
|
+
background-color: transparent;
|
|
5059
|
+
color: var(--ermis-text-primary);
|
|
5060
|
+
}
|
|
5061
|
+
.ermis-create-topic__btn--cancel:hover:not(:disabled) {
|
|
5062
|
+
background-color: var(--ermis-bg-hover);
|
|
5063
|
+
}
|
|
5064
|
+
.ermis-create-topic__btn--create {
|
|
5065
|
+
background-color: var(--ermis-accent);
|
|
5066
|
+
color: white;
|
|
5067
|
+
}
|
|
5068
|
+
.ermis-create-topic__btn--create:hover:not(:disabled) {
|
|
5069
|
+
background-color: var(--ermis-accent-hover);
|
|
5070
|
+
}
|
|
5071
|
+
|
|
5072
|
+
/* src/styles/_media-lightbox.css */
|
|
5073
|
+
.ermis-lightbox {
|
|
5074
|
+
position: fixed;
|
|
5075
|
+
inset: 0;
|
|
5076
|
+
z-index: 1100;
|
|
5077
|
+
display: flex;
|
|
5078
|
+
flex-direction: column;
|
|
5079
|
+
animation: ermis-lightbox-fade-in 0.2s ease-out;
|
|
5080
|
+
}
|
|
5081
|
+
.ermis-lightbox__backdrop {
|
|
5082
|
+
position: absolute;
|
|
5083
|
+
inset: 0;
|
|
5084
|
+
background-color: rgba(0, 0, 0, 0.92);
|
|
5085
|
+
backdrop-filter: blur(8px);
|
|
5086
|
+
}
|
|
5087
|
+
@keyframes ermis-lightbox-fade-in {
|
|
5088
|
+
from {
|
|
5089
|
+
opacity: 0;
|
|
5090
|
+
}
|
|
5091
|
+
to {
|
|
5092
|
+
opacity: 1;
|
|
5093
|
+
}
|
|
5094
|
+
}
|
|
5095
|
+
.ermis-lightbox__header {
|
|
5096
|
+
position: relative;
|
|
5097
|
+
z-index: 2;
|
|
5098
|
+
display: flex;
|
|
5099
|
+
align-items: center;
|
|
5100
|
+
justify-content: space-between;
|
|
5101
|
+
padding: 12px 16px;
|
|
5102
|
+
min-height: 48px;
|
|
5103
|
+
}
|
|
5104
|
+
.ermis-lightbox__counter {
|
|
5105
|
+
color: rgba(255, 255, 255, 0.8);
|
|
5106
|
+
font-size: 14px;
|
|
5107
|
+
font-weight: 500;
|
|
5108
|
+
letter-spacing: 0.5px;
|
|
5109
|
+
user-select: none;
|
|
5110
|
+
}
|
|
5111
|
+
.ermis-lightbox__actions {
|
|
5112
|
+
display: flex;
|
|
5113
|
+
align-items: center;
|
|
5114
|
+
gap: 8px;
|
|
5115
|
+
margin-left: auto;
|
|
5116
|
+
}
|
|
5117
|
+
.ermis-lightbox__action-btn {
|
|
5118
|
+
background: rgba(255, 255, 255, 0.1);
|
|
5119
|
+
border: none;
|
|
5120
|
+
border-radius: 50%;
|
|
5121
|
+
width: 36px;
|
|
5122
|
+
height: 36px;
|
|
5123
|
+
display: flex;
|
|
5124
|
+
align-items: center;
|
|
5125
|
+
justify-content: center;
|
|
5126
|
+
color: rgba(255, 255, 255, 0.85);
|
|
5127
|
+
cursor: pointer;
|
|
5128
|
+
transition: background-color 0.15s ease, color 0.15s ease;
|
|
5129
|
+
}
|
|
5130
|
+
.ermis-lightbox__action-btn:hover {
|
|
5131
|
+
background: rgba(255, 255, 255, 0.2);
|
|
5132
|
+
color: #fff;
|
|
5133
|
+
}
|
|
5134
|
+
.ermis-lightbox__content {
|
|
5135
|
+
position: relative;
|
|
5136
|
+
z-index: 1;
|
|
5137
|
+
flex: 1;
|
|
5138
|
+
display: flex;
|
|
5139
|
+
align-items: center;
|
|
5140
|
+
justify-content: center;
|
|
5141
|
+
padding: 0 60px;
|
|
5142
|
+
overflow: hidden;
|
|
5143
|
+
cursor: default;
|
|
5144
|
+
}
|
|
5145
|
+
.ermis-lightbox__image {
|
|
5146
|
+
max-width: 90vw;
|
|
5147
|
+
max-height: 80vh;
|
|
5148
|
+
object-fit: contain;
|
|
5149
|
+
border-radius: 4px;
|
|
5150
|
+
user-select: none;
|
|
5151
|
+
transition: transform 0.15s ease;
|
|
5152
|
+
animation: ermis-lightbox-zoom-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
5153
|
+
}
|
|
5154
|
+
.ermis-lightbox__image--zoomed {
|
|
5155
|
+
transition: none;
|
|
5156
|
+
}
|
|
5157
|
+
@keyframes ermis-lightbox-zoom-in {
|
|
5158
|
+
from {
|
|
5159
|
+
opacity: 0;
|
|
5160
|
+
transform: scale(0.92);
|
|
5161
|
+
}
|
|
5162
|
+
to {
|
|
5163
|
+
opacity: 1;
|
|
5164
|
+
transform: scale(1);
|
|
5165
|
+
}
|
|
5166
|
+
}
|
|
5167
|
+
.ermis-lightbox__video {
|
|
5168
|
+
max-width: 90vw;
|
|
5169
|
+
max-height: 80vh;
|
|
5170
|
+
border-radius: 4px;
|
|
5171
|
+
background: #000;
|
|
5172
|
+
outline: none;
|
|
5173
|
+
animation: ermis-lightbox-zoom-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
5174
|
+
}
|
|
5175
|
+
.ermis-lightbox__nav {
|
|
5176
|
+
position: absolute;
|
|
5177
|
+
top: 50%;
|
|
5178
|
+
transform: translateY(-50%);
|
|
5179
|
+
z-index: 3;
|
|
5180
|
+
background: rgba(255, 255, 255, 0.08);
|
|
5181
|
+
border: none;
|
|
5182
|
+
border-radius: 50%;
|
|
5183
|
+
width: 44px;
|
|
5184
|
+
height: 44px;
|
|
5185
|
+
display: flex;
|
|
5186
|
+
align-items: center;
|
|
5187
|
+
justify-content: center;
|
|
5188
|
+
color: rgba(255, 255, 255, 0.75);
|
|
5189
|
+
cursor: pointer;
|
|
5190
|
+
transition:
|
|
5191
|
+
background-color 0.15s ease,
|
|
5192
|
+
color 0.15s ease,
|
|
5193
|
+
transform 0.15s ease;
|
|
5194
|
+
}
|
|
5195
|
+
.ermis-lightbox__nav:hover {
|
|
5196
|
+
background: rgba(255, 255, 255, 0.18);
|
|
5197
|
+
color: #fff;
|
|
5198
|
+
}
|
|
5199
|
+
.ermis-lightbox__nav--prev {
|
|
5200
|
+
left: 12px;
|
|
5201
|
+
}
|
|
5202
|
+
.ermis-lightbox__nav--prev:hover {
|
|
5203
|
+
transform: translateY(-50%) translateX(-2px);
|
|
5204
|
+
}
|
|
5205
|
+
.ermis-lightbox__nav--next {
|
|
5206
|
+
right: 12px;
|
|
5207
|
+
}
|
|
5208
|
+
.ermis-lightbox__nav--next:hover {
|
|
5209
|
+
transform: translateY(-50%) translateX(2px);
|
|
5210
|
+
}
|
|
5211
|
+
.ermis-lightbox__filename {
|
|
5212
|
+
position: relative;
|
|
5213
|
+
z-index: 2;
|
|
5214
|
+
text-align: center;
|
|
5215
|
+
padding: 8px 16px 16px;
|
|
5216
|
+
color: rgba(255, 255, 255, 0.6);
|
|
5217
|
+
font-size: 13px;
|
|
5218
|
+
white-space: nowrap;
|
|
5219
|
+
overflow: hidden;
|
|
5220
|
+
text-overflow: ellipsis;
|
|
5221
|
+
user-select: none;
|
|
5222
|
+
}
|
|
5223
|
+
.ermis-attachment--clickable {
|
|
5224
|
+
cursor: pointer;
|
|
5225
|
+
position: relative;
|
|
5226
|
+
}
|
|
5227
|
+
.ermis-attachment--clickable::after {
|
|
5228
|
+
content: "";
|
|
5229
|
+
position: absolute;
|
|
5230
|
+
inset: 0;
|
|
5231
|
+
background: rgba(0, 0, 0, 0);
|
|
5232
|
+
border-radius: inherit;
|
|
5233
|
+
transition: background-color 0.2s ease;
|
|
5234
|
+
pointer-events: none;
|
|
5235
|
+
}
|
|
5236
|
+
.ermis-attachment--clickable:hover::after {
|
|
5237
|
+
background: rgba(0, 0, 0, 0.12);
|
|
5238
|
+
}
|
|
5239
|
+
.ermis-attachment__overlay {
|
|
5240
|
+
position: absolute;
|
|
5241
|
+
top: 50%;
|
|
5242
|
+
left: 50%;
|
|
5243
|
+
transform: translate(-50%, -50%) scale(0.8);
|
|
5244
|
+
z-index: 2;
|
|
5245
|
+
opacity: 0;
|
|
5246
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
5247
|
+
color: #fff;
|
|
5248
|
+
background: rgba(0, 0, 0, 0.5);
|
|
5249
|
+
border-radius: 50%;
|
|
5250
|
+
width: 36px;
|
|
5251
|
+
height: 36px;
|
|
5252
|
+
display: flex;
|
|
5253
|
+
align-items: center;
|
|
5254
|
+
justify-content: center;
|
|
5255
|
+
pointer-events: none;
|
|
5256
|
+
}
|
|
5257
|
+
.ermis-attachment--clickable:hover .ermis-attachment__overlay {
|
|
5258
|
+
opacity: 1;
|
|
5259
|
+
transform: translate(-50%, -50%) scale(1);
|
|
5260
|
+
}
|
|
5261
|
+
@media (max-width: 768px) {
|
|
5262
|
+
.ermis-lightbox__content {
|
|
5263
|
+
padding: 0 12px;
|
|
5264
|
+
}
|
|
5265
|
+
.ermis-lightbox__image,
|
|
5266
|
+
.ermis-lightbox__video {
|
|
5267
|
+
max-width: 100vw;
|
|
5268
|
+
max-height: 75vh;
|
|
5269
|
+
}
|
|
5270
|
+
.ermis-lightbox__nav {
|
|
5271
|
+
width: 36px;
|
|
5272
|
+
height: 36px;
|
|
5273
|
+
}
|
|
5274
|
+
.ermis-lightbox__nav--prev {
|
|
5275
|
+
left: 4px;
|
|
5276
|
+
}
|
|
5277
|
+
.ermis-lightbox__nav--next {
|
|
5278
|
+
right: 4px;
|
|
5279
|
+
}
|
|
5280
|
+
}
|
|
5281
|
+
|
|
4471
5282
|
/* src/styles/index.css */
|
|
4472
5283
|
/*# sourceMappingURL=index.css.map */
|