@ermis-network/ermis-chat-react 1.0.0

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.
Files changed (88) hide show
  1. package/dist/index.cjs +6593 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.css +3375 -0
  4. package/dist/index.css.map +1 -0
  5. package/dist/index.d.mts +1138 -0
  6. package/dist/index.d.ts +1138 -0
  7. package/dist/index.mjs +6500 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +42 -0
  10. package/src/components/Avatar.tsx +102 -0
  11. package/src/components/Channel.tsx +77 -0
  12. package/src/components/ChannelHeader.tsx +85 -0
  13. package/src/components/ChannelInfo/AddMemberModal.tsx +204 -0
  14. package/src/components/ChannelInfo/ChannelInfo.tsx +455 -0
  15. package/src/components/ChannelInfo/ChannelInfoTabs.tsx +282 -0
  16. package/src/components/ChannelInfo/ChannelSettingsPanel.tsx +479 -0
  17. package/src/components/ChannelInfo/EditChannelModal.tsx +272 -0
  18. package/src/components/ChannelInfo/FileListItem.tsx +49 -0
  19. package/src/components/ChannelInfo/LinkListItem.tsx +62 -0
  20. package/src/components/ChannelInfo/MediaGridItem.tsx +90 -0
  21. package/src/components/ChannelInfo/MemberListItem.tsx +85 -0
  22. package/src/components/ChannelInfo/MessageSearchPanel.tsx +333 -0
  23. package/src/components/ChannelInfo/States.tsx +36 -0
  24. package/src/components/ChannelInfo/index.ts +10 -0
  25. package/src/components/ChannelInfo/utils.tsx +49 -0
  26. package/src/components/ChannelList.tsx +395 -0
  27. package/src/components/Dropdown.tsx +120 -0
  28. package/src/components/EditPreview.tsx +102 -0
  29. package/src/components/FilesPreview.tsx +108 -0
  30. package/src/components/ForwardMessageModal.tsx +234 -0
  31. package/src/components/MentionSuggestions.tsx +59 -0
  32. package/src/components/MessageActionsBox.tsx +186 -0
  33. package/src/components/MessageInput.tsx +513 -0
  34. package/src/components/MessageInputDefaults.tsx +50 -0
  35. package/src/components/MessageItem.tsx +218 -0
  36. package/src/components/MessageQuickReactions.tsx +73 -0
  37. package/src/components/MessageReactions.tsx +59 -0
  38. package/src/components/MessageRenderers.tsx +565 -0
  39. package/src/components/Modal.tsx +58 -0
  40. package/src/components/Panel.tsx +64 -0
  41. package/src/components/PinnedMessages.tsx +165 -0
  42. package/src/components/QuotedMessagePreview.tsx +55 -0
  43. package/src/components/ReadReceipts.tsx +80 -0
  44. package/src/components/ReplyPreview.tsx +98 -0
  45. package/src/components/TypingIndicator.tsx +57 -0
  46. package/src/components/VirtualMessageList.tsx +425 -0
  47. package/src/context/ChatProvider.tsx +73 -0
  48. package/src/hooks/useBannedState.ts +48 -0
  49. package/src/hooks/useBlockedState.ts +55 -0
  50. package/src/hooks/useChannel.ts +18 -0
  51. package/src/hooks/useChannelCapabilities.ts +42 -0
  52. package/src/hooks/useChannelData.ts +55 -0
  53. package/src/hooks/useChannelListUpdates.ts +224 -0
  54. package/src/hooks/useChannelMessages.ts +159 -0
  55. package/src/hooks/useChannelRowUpdates.ts +78 -0
  56. package/src/hooks/useChatClient.ts +11 -0
  57. package/src/hooks/useEmojiPicker.ts +53 -0
  58. package/src/hooks/useFileUpload.ts +128 -0
  59. package/src/hooks/useLoadMessages.ts +178 -0
  60. package/src/hooks/useMentions.ts +287 -0
  61. package/src/hooks/useMessageActions.ts +87 -0
  62. package/src/hooks/useMessageSend.ts +164 -0
  63. package/src/hooks/usePendingState.ts +63 -0
  64. package/src/hooks/useScrollToMessage.ts +155 -0
  65. package/src/hooks/useTypingIndicator.ts +86 -0
  66. package/src/index.ts +129 -0
  67. package/src/styles/_add-member-modal.css +122 -0
  68. package/src/styles/_base.css +32 -0
  69. package/src/styles/_channel-info.css +941 -0
  70. package/src/styles/_channel-list.css +217 -0
  71. package/src/styles/_dropdown.css +69 -0
  72. package/src/styles/_forward-modal.css +191 -0
  73. package/src/styles/_mentions.css +102 -0
  74. package/src/styles/_message-actions.css +61 -0
  75. package/src/styles/_message-bubble.css +656 -0
  76. package/src/styles/_message-input.css +389 -0
  77. package/src/styles/_message-list.css +416 -0
  78. package/src/styles/_message-quick-reactions.css +62 -0
  79. package/src/styles/_message-reactions.css +67 -0
  80. package/src/styles/_modal.css +113 -0
  81. package/src/styles/_panel.css +69 -0
  82. package/src/styles/_pinned-messages.css +140 -0
  83. package/src/styles/_search-panel.css +219 -0
  84. package/src/styles/_tokens.css +92 -0
  85. package/src/styles/_typing-indicator.css +59 -0
  86. package/src/styles/index.css +24 -0
  87. package/src/types.ts +955 -0
  88. package/src/utils.ts +242 -0
package/dist/index.css ADDED
@@ -0,0 +1,3375 @@
1
+ /* src/styles/_tokens.css */
2
+ .ermis-chat,
3
+ .ermis-chat--dark {
4
+ --ermis-bg-primary: #0a0a0f;
5
+ --ermis-bg-secondary: #111118;
6
+ --ermis-bg-hover: rgba(255, 255, 255, 0.04);
7
+ --ermis-bg-active: rgba(99, 102, 241, 0.12);
8
+ --ermis-border: rgba(255, 255, 255, 0.08);
9
+ --ermis-accent: #6366f1;
10
+ --ermis-accent-hover: #818cf8;
11
+ --ermis-text-primary: #e5e7eb;
12
+ --ermis-text-secondary: #9ca3af;
13
+ --ermis-text-muted: #6b7280;
14
+ --ermis-bubble-own-bg: var(--ermis-accent);
15
+ --ermis-bubble-own-text: #ffffff;
16
+ --ermis-bubble-other-bg: #1e1e2a;
17
+ --ermis-bubble-other-text: var(--ermis-text-primary);
18
+ --ermis-quote-other-bg: rgba(99, 102, 241, 0.1);
19
+ --ermis-quote-other-bg-hover: rgba(99, 102, 241, 0.18);
20
+ --ermis-quote-own-bg: rgba(99, 102, 241, 0.2);
21
+ --ermis-quote-own-bg-hover: rgba(99, 102, 241, 0.3);
22
+ --ermis-quote-own-border: rgba(255, 255, 255, 0.4);
23
+ --ermis-quote-own-author: rgba(255, 255, 255, 0.9);
24
+ --ermis-quote-own-text: rgba(255, 255, 255, 0.65);
25
+ --ermis-font-family:
26
+ -apple-system,
27
+ BlinkMacSystemFont,
28
+ "Segoe UI",
29
+ Roboto,
30
+ Oxygen,
31
+ Ubuntu,
32
+ Cantarell,
33
+ "Helvetica Neue",
34
+ sans-serif;
35
+ --ermis-font-size-xs: 0.75rem;
36
+ --ermis-font-size-sm: 0.875rem;
37
+ --ermis-font-size-base: 1rem;
38
+ --ermis-spacing-xs: 0.25rem;
39
+ --ermis-spacing-sm: 0.5rem;
40
+ --ermis-spacing-md: 0.75rem;
41
+ --ermis-spacing-lg: 1rem;
42
+ --ermis-radius-sm: 0.375rem;
43
+ --ermis-radius-md: 0.5rem;
44
+ --ermis-radius-lg: 0.75rem;
45
+ --ermis-radius-full: 9999px;
46
+ --ermis-transition: 150ms ease;
47
+ color: var(--ermis-text-primary);
48
+ font-family: var(--ermis-font-family);
49
+ }
50
+ .ermis-chat--light {
51
+ --ermis-bg-primary: #ffffff;
52
+ --ermis-bg-secondary: #f9fafb;
53
+ --ermis-bg-hover: rgba(0, 0, 0, 0.04);
54
+ --ermis-bg-active: rgba(99, 102, 241, 0.08);
55
+ --ermis-border: rgba(0, 0, 0, 0.08);
56
+ --ermis-accent: #6366f1;
57
+ --ermis-accent-hover: #4f46e5;
58
+ --ermis-text-primary: #111827;
59
+ --ermis-text-secondary: #6b7280;
60
+ --ermis-text-muted: #9ca3af;
61
+ --ermis-bubble-own-bg: var(--ermis-accent);
62
+ --ermis-bubble-own-text: #ffffff;
63
+ --ermis-bubble-other-bg: #f3f4f6;
64
+ --ermis-bubble-other-text: var(--ermis-text-primary);
65
+ --ermis-quote-other-bg: rgba(99, 102, 241, 0.08);
66
+ --ermis-quote-other-bg-hover: rgba(99, 102, 241, 0.14);
67
+ --ermis-quote-own-bg: rgba(0, 0, 0, 0.25);
68
+ --ermis-quote-own-bg-hover: rgba(0, 0, 0, 0.4);
69
+ --ermis-quote-own-border: rgba(255, 255, 255, 0.6);
70
+ --ermis-quote-own-author: rgba(255, 255, 255, 0.95);
71
+ --ermis-quote-own-text: rgba(255, 255, 255, 0.8);
72
+ }
73
+
74
+ /* src/styles/_base.css */
75
+ .ermis-chat {
76
+ width: 100%;
77
+ height: 100%;
78
+ background-color: var(--ermis-bg-primary);
79
+ color: var(--ermis-text-primary);
80
+ overflow: hidden;
81
+ }
82
+ .ermis-avatar {
83
+ display: inline-flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ border-radius: var(--ermis-radius-full);
87
+ object-fit: cover;
88
+ flex-shrink: 0;
89
+ overflow: hidden;
90
+ }
91
+ .ermis-avatar--fallback {
92
+ background:
93
+ linear-gradient(
94
+ 135deg,
95
+ var(--ermis-accent) 0%,
96
+ var(--ermis-accent-hover) 100%);
97
+ color: #fff;
98
+ font-weight: 600;
99
+ font-family: var(--ermis-font-family);
100
+ text-transform: uppercase;
101
+ user-select: none;
102
+ }
103
+
104
+ /* src/styles/_dropdown.css */
105
+ .ermis-dropdown {
106
+ font-family: var(--ermis-font-family);
107
+ animation: dropdown-fade-up 0.15s ease-out;
108
+ }
109
+ .ermis-dropdown__menu {
110
+ background-color: var(--ermis-bg-primary);
111
+ border: 1px solid var(--ermis-border);
112
+ border-radius: var(--ermis-radius-md);
113
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
114
+ min-width: 160px;
115
+ padding: var(--ermis-spacing-xs) 0;
116
+ display: flex;
117
+ flex-direction: column;
118
+ overflow: hidden;
119
+ }
120
+ .ermis-dropdown__item {
121
+ background: none;
122
+ border: none;
123
+ width: 100%;
124
+ text-align: left;
125
+ padding: var(--ermis-spacing-xs) var(--ermis-spacing-md);
126
+ font-size: var(--ermis-font-size-sm);
127
+ color: var(--ermis-text-primary);
128
+ cursor: pointer;
129
+ display: flex;
130
+ align-items: center;
131
+ gap: var(--ermis-spacing-sm);
132
+ transition: background-color 0.15s;
133
+ }
134
+ .ermis-dropdown__item:disabled {
135
+ opacity: 0.5;
136
+ cursor: not-allowed;
137
+ }
138
+ .ermis-dropdown__item:hover {
139
+ background-color: var(--ermis-bg-hover);
140
+ }
141
+ .ermis-dropdown__divider {
142
+ height: 1px;
143
+ background-color: var(--ermis-border);
144
+ margin: var(--ermis-spacing-xs) 0;
145
+ }
146
+ .ermis-dropdown__item--danger {
147
+ color: #e74c3c;
148
+ }
149
+ .ermis-dropdown__item--danger:hover {
150
+ background-color: rgba(231, 76, 60, 0.1);
151
+ }
152
+ @keyframes dropdown-fade-up {
153
+ 0% {
154
+ opacity: 0;
155
+ transform: translateY(4px) scale(0.98);
156
+ }
157
+ 100% {
158
+ opacity: 1;
159
+ transform: translateY(0) scale(1);
160
+ }
161
+ }
162
+
163
+ /* src/styles/_modal.css */
164
+ .ermis-modal-overlay {
165
+ position: fixed;
166
+ top: 0;
167
+ left: 0;
168
+ width: 100vw;
169
+ height: 100vh;
170
+ z-index: 1000;
171
+ background-color: rgba(0, 0, 0, 0.5);
172
+ backdrop-filter: blur(4px);
173
+ display: flex;
174
+ align-items: center;
175
+ justify-content: center;
176
+ animation: ermis-modal-fade-in 0.2s ease-out;
177
+ }
178
+ @keyframes ermis-modal-fade-in {
179
+ from {
180
+ opacity: 0;
181
+ }
182
+ to {
183
+ opacity: 1;
184
+ }
185
+ }
186
+ .ermis-modal-content {
187
+ background-color: var(--ermis-bg-surface, #ffffff);
188
+ border-radius: 12px;
189
+ width: 90%;
190
+ max-width: 480px;
191
+ max-height: 85vh;
192
+ display: flex;
193
+ flex-direction: column;
194
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
195
+ overflow: hidden;
196
+ animation: ermis-modal-slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1);
197
+ border: 1px solid var(--ermis-border-color, #eaeaea);
198
+ }
199
+ [data-theme=dark] .ermis-modal-content {
200
+ background-color: var(--ermis-bg-surface, #1e1e1e);
201
+ border: 1px solid var(--ermis-border-color, #333333);
202
+ }
203
+ @keyframes ermis-modal-slide-up {
204
+ from {
205
+ opacity: 0;
206
+ transform: translateY(20px) scale(0.98);
207
+ }
208
+ to {
209
+ opacity: 1;
210
+ transform: translateY(0) scale(1);
211
+ }
212
+ }
213
+ .ermis-modal-header {
214
+ padding: 16px 20px;
215
+ border-bottom: 1px solid var(--ermis-border-color, #eaeaea);
216
+ display: flex;
217
+ align-items: center;
218
+ justify-content: space-between;
219
+ flex-shrink: 0;
220
+ }
221
+ [data-theme=dark] .ermis-modal-header {
222
+ border-bottom: 1px solid var(--ermis-border-color, #333333);
223
+ }
224
+ .ermis-modal-header h3 {
225
+ margin: 0;
226
+ font-size: 16px;
227
+ font-weight: 600;
228
+ color: var(--ermis-text-primary, #000000);
229
+ }
230
+ [data-theme=dark] .ermis-modal-header h3 {
231
+ color: var(--ermis-text-primary, #ffffff);
232
+ }
233
+ .ermis-modal-close {
234
+ background: transparent;
235
+ border: none;
236
+ cursor: pointer;
237
+ color: var(--ermis-text-secondary, #666666);
238
+ padding: 4px;
239
+ border-radius: 4px;
240
+ display: flex;
241
+ align-items: center;
242
+ justify-content: center;
243
+ transition: background-color 0.15s ease, color 0.15s ease;
244
+ }
245
+ .ermis-modal-close:hover {
246
+ background-color: var(--ermis-bg-hover, #f0f0f0);
247
+ color: var(--ermis-text-primary, #000000);
248
+ }
249
+ [data-theme=dark] .ermis-modal-close:hover {
250
+ background-color: var(--ermis-bg-hover, #2a2a2a);
251
+ color: var(--ermis-text-primary, #ffffff);
252
+ }
253
+ .ermis-modal-body {
254
+ padding: 20px;
255
+ display: flex;
256
+ flex-direction: column;
257
+ overflow: hidden;
258
+ flex: 1;
259
+ }
260
+ .ermis-modal-footer {
261
+ padding: 16px 20px;
262
+ border-top: 1px solid var(--ermis-border-color, #eaeaea);
263
+ display: flex;
264
+ justify-content: flex-end;
265
+ gap: 12px;
266
+ flex-shrink: 0;
267
+ background-color: var(--ermis-bg-base, #f9f9f9);
268
+ }
269
+ [data-theme=dark] .ermis-modal-footer {
270
+ border-top: 1px solid var(--ermis-border-color, #333333);
271
+ background-color: var(--ermis-bg-base, #121212);
272
+ }
273
+
274
+ /* src/styles/_panel.css */
275
+ .ermis-panel {
276
+ position: absolute;
277
+ inset: 0;
278
+ z-index: 30;
279
+ display: flex;
280
+ flex-direction: column;
281
+ background: var(--ermis-bg-primary, #fff);
282
+ transform: translateX(100%);
283
+ transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
284
+ will-change: transform;
285
+ overflow: hidden;
286
+ }
287
+ .ermis-panel--open {
288
+ transform: translateX(0);
289
+ }
290
+ .ermis-panel__header {
291
+ display: flex;
292
+ align-items: center;
293
+ gap: 8px;
294
+ padding: 12px 16px;
295
+ border-bottom: 1px solid var(--ermis-border, rgba(0, 0, 0, 0.08));
296
+ flex-shrink: 0;
297
+ }
298
+ .ermis-panel__back {
299
+ display: flex;
300
+ align-items: center;
301
+ justify-content: center;
302
+ width: 32px;
303
+ height: 32px;
304
+ border: none;
305
+ background: none;
306
+ color: var(--ermis-text-secondary);
307
+ cursor: pointer;
308
+ border-radius: 8px;
309
+ flex-shrink: 0;
310
+ transition: background 0.15s, color 0.15s;
311
+ }
312
+ .ermis-panel__back:hover {
313
+ background: var(--ermis-bg-hover);
314
+ color: var(--ermis-text-primary);
315
+ }
316
+ .ermis-panel__title {
317
+ font-size: 15px;
318
+ font-weight: 600;
319
+ color: var(--ermis-text-primary);
320
+ margin: 0;
321
+ white-space: nowrap;
322
+ overflow: hidden;
323
+ text-overflow: ellipsis;
324
+ }
325
+ .ermis-panel__body {
326
+ flex: 1;
327
+ display: flex;
328
+ flex-direction: column;
329
+ overflow-y: auto;
330
+ overflow-x: hidden;
331
+ }
332
+
333
+ /* src/styles/_channel-list.css */
334
+ .ermis-channel-header {
335
+ display: flex;
336
+ align-items: center;
337
+ gap: var(--ermis-spacing-md);
338
+ padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
339
+ border-bottom: 1px solid var(--ermis-border);
340
+ background-color: var(--ermis-bg-secondary);
341
+ font-family: var(--ermis-font-family);
342
+ }
343
+ .ermis-channel-header__info {
344
+ display: flex;
345
+ flex-direction: column;
346
+ min-width: 0;
347
+ }
348
+ .ermis-channel-header__name {
349
+ font-size: var(--ermis-font-size-base);
350
+ font-weight: 600;
351
+ color: var(--ermis-text-primary);
352
+ white-space: nowrap;
353
+ overflow: hidden;
354
+ text-overflow: ellipsis;
355
+ }
356
+ .ermis-channel-header__subtitle {
357
+ font-size: var(--ermis-font-size-xs);
358
+ color: var(--ermis-text-muted);
359
+ white-space: nowrap;
360
+ overflow: hidden;
361
+ text-overflow: ellipsis;
362
+ }
363
+ .ermis-channel-header__info {
364
+ flex: 1;
365
+ }
366
+ .ermis-channel-header__actions {
367
+ display: flex;
368
+ align-items: center;
369
+ gap: var(--ermis-spacing-sm);
370
+ margin-left: auto;
371
+ flex-shrink: 0;
372
+ }
373
+ .ermis-channel-list {
374
+ display: flex;
375
+ flex-direction: column;
376
+ font-family: var(--ermis-font-family);
377
+ height: 100%;
378
+ flex: 1;
379
+ }
380
+ .ermis-channel-list__loading {
381
+ padding: var(--ermis-spacing-lg);
382
+ color: var(--ermis-text-muted);
383
+ font-size: var(--ermis-font-size-sm);
384
+ text-align: center;
385
+ }
386
+ .ermis-channel-list__empty {
387
+ padding: var(--ermis-spacing-lg);
388
+ color: var(--ermis-text-muted);
389
+ font-size: var(--ermis-font-size-sm);
390
+ text-align: center;
391
+ }
392
+ .ermis-channel-list__item {
393
+ display: flex;
394
+ align-items: center;
395
+ gap: var(--ermis-spacing-md);
396
+ padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
397
+ cursor: pointer;
398
+ border-left: 2px solid transparent;
399
+ transition: background-color var(--ermis-transition), border-color var(--ermis-transition);
400
+ }
401
+ .ermis-channel-list__item:hover {
402
+ background-color: var(--ermis-bg-hover);
403
+ }
404
+ .ermis-channel-list__item--active {
405
+ background-color: var(--ermis-bg-active);
406
+ border-left-color: var(--ermis-accent);
407
+ }
408
+ .ermis-channel-list__item-content {
409
+ display: flex;
410
+ flex-direction: column;
411
+ min-width: 0;
412
+ flex: 1;
413
+ }
414
+ .ermis-channel-list__item-name {
415
+ font-size: var(--ermis-font-size-sm);
416
+ font-weight: 500;
417
+ color: var(--ermis-text-primary);
418
+ white-space: nowrap;
419
+ overflow: hidden;
420
+ text-overflow: ellipsis;
421
+ }
422
+ .ermis-channel-list__item-last-message {
423
+ font-size: var(--ermis-font-size-xs);
424
+ color: var(--ermis-text-muted);
425
+ white-space: nowrap;
426
+ overflow: hidden;
427
+ text-overflow: ellipsis;
428
+ margin-top: 2px;
429
+ }
430
+ .ermis-channel-list__item-last-message-user {
431
+ color: var(--ermis-text-secondary);
432
+ }
433
+ .ermis-channel-list__item--unread .ermis-channel-list__item-name {
434
+ font-weight: 700;
435
+ color: var(--ermis-text-primary);
436
+ }
437
+ .ermis-channel-list__item--unread .ermis-channel-list__item-last-message {
438
+ color: var(--ermis-text-secondary);
439
+ font-weight: 600;
440
+ }
441
+ .ermis-channel-list__unread-badge {
442
+ display: inline-flex;
443
+ align-items: center;
444
+ justify-content: center;
445
+ min-width: 20px;
446
+ height: 20px;
447
+ padding: 0 5px;
448
+ border-radius: var(--ermis-radius-full);
449
+ background-color: #ef4444;
450
+ color: #fff;
451
+ font-size: 0.625rem;
452
+ font-weight: 700;
453
+ line-height: 1;
454
+ flex-shrink: 0;
455
+ }
456
+ .ermis-channel-list__item--blocked {
457
+ opacity: 0.5;
458
+ }
459
+ .ermis-channel-list__blocked-icon {
460
+ display: inline-flex;
461
+ align-items: center;
462
+ justify-content: center;
463
+ flex-shrink: 0;
464
+ color: var(--ermis-text-muted);
465
+ }
466
+ .ermis-channel-list__item--pending {
467
+ border-left: 3px solid var(--ermis-color-amber-500, #f59e0b);
468
+ background-color: var(--ermis-color-amber-50, #fffbeb);
469
+ }
470
+ .ermis-channel-list__pending-badge {
471
+ display: inline-flex;
472
+ padding: 3px 6px;
473
+ background-color: var(--ermis-color-amber-100, #fef3c7);
474
+ color: var(--ermis-color-amber-700, #b45309);
475
+ border-radius: 6px;
476
+ font-size: 0.6rem;
477
+ font-weight: 600;
478
+ text-transform: uppercase;
479
+ letter-spacing: 0.05em;
480
+ flex-shrink: 0;
481
+ }
482
+ .ermis-channel-list__accordion-header {
483
+ display: flex;
484
+ align-items: center;
485
+ justify-content: space-between;
486
+ padding: 16px 12px 6px 16px;
487
+ background-color: transparent;
488
+ cursor: pointer;
489
+ color: var(--ermis-text-muted, #65676b);
490
+ font-size: 0.7rem;
491
+ font-weight: 700;
492
+ text-transform: uppercase;
493
+ letter-spacing: 0.08em;
494
+ transition: color 0.2s ease;
495
+ user-select: none;
496
+ }
497
+ .ermis-channel-list__accordion-header:hover {
498
+ color: var(--ermis-accent, #005fff);
499
+ }
500
+ .ermis-channel-list__accordion-header--static {
501
+ cursor: default;
502
+ }
503
+ .ermis-channel-list__accordion-header--static:hover {
504
+ color: var(--ermis-text-muted, #65676b);
505
+ }
506
+ .ermis-channel-list__accordion-icon {
507
+ transform: rotate(-90deg);
508
+ transition: transform 0.2s ease;
509
+ }
510
+ .ermis-channel-list__accordion-icon--expanded {
511
+ transform: rotate(0deg);
512
+ }
513
+
514
+ /* src/styles/_message-list.css */
515
+ .ermis-channel {
516
+ display: flex;
517
+ flex-direction: column;
518
+ flex: 1;
519
+ min-height: 0;
520
+ font-family: var(--ermis-font-family);
521
+ }
522
+ .ermis-channel__empty {
523
+ display: flex;
524
+ align-items: center;
525
+ justify-content: center;
526
+ flex: 1;
527
+ color: var(--ermis-text-muted);
528
+ font-size: var(--ermis-font-size-sm);
529
+ font-family: var(--ermis-font-family);
530
+ }
531
+ .ermis-message-list {
532
+ display: flex;
533
+ flex-direction: column;
534
+ flex: 1;
535
+ font-family: var(--ermis-font-family);
536
+ gap: var(--ermis-spacing-xs);
537
+ position: relative;
538
+ }
539
+ .ermis-message-list__vlist {
540
+ display: flex !important;
541
+ flex-direction: column !important;
542
+ padding-left: 3rem;
543
+ padding-right: 3rem;
544
+ padding-top: var(--ermis-spacing-lg);
545
+ padding-bottom: var(--ermis-spacing-lg);
546
+ }
547
+ .ermis-message-list__vlist > div {
548
+ margin-top: auto;
549
+ }
550
+ .ermis-message-list__jump-latest {
551
+ position: sticky;
552
+ bottom: var(--ermis-spacing-md);
553
+ align-self: center;
554
+ padding: var(--ermis-spacing-xs) var(--ermis-spacing-lg);
555
+ border: none;
556
+ border-radius: 999px;
557
+ background-color: var(--ermis-accent);
558
+ color: #fff;
559
+ font-size: var(--ermis-font-size-xs);
560
+ font-weight: 600;
561
+ font-family: var(--ermis-font-family);
562
+ cursor: pointer;
563
+ transition: background-color var(--ermis-transition), transform var(--ermis-transition);
564
+ z-index: 10;
565
+ }
566
+ .ermis-message-list__jump-latest:hover {
567
+ background-color: var(--ermis-accent-hover);
568
+ transform: translateY(-1px);
569
+ }
570
+ .ermis-message-list__spacer {
571
+ flex: 1;
572
+ }
573
+ .ermis-message-list__loading-more {
574
+ text-align: center;
575
+ padding: var(--ermis-spacing-sm);
576
+ color: var(--ermis-text-muted);
577
+ font-size: var(--ermis-font-size-xs);
578
+ }
579
+ .ermis-message-list__no-more {
580
+ text-align: center;
581
+ padding: var(--ermis-spacing-sm);
582
+ color: var(--ermis-text-muted);
583
+ font-size: var(--ermis-font-size-xs);
584
+ font-style: italic;
585
+ }
586
+ .ermis-message-list__date-separator {
587
+ display: flex;
588
+ align-items: center;
589
+ gap: var(--ermis-spacing-md);
590
+ padding: var(--ermis-spacing-md) 0;
591
+ margin: var(--ermis-spacing-xs) 0;
592
+ align-self: stretch;
593
+ }
594
+ .ermis-message-list__date-separator-line {
595
+ flex: 1;
596
+ height: 1px;
597
+ background-color: var(--ermis-border);
598
+ }
599
+ .ermis-message-list__date-separator-label {
600
+ font-size: var(--ermis-font-size-xs);
601
+ color: var(--ermis-text-muted);
602
+ white-space: nowrap;
603
+ font-weight: 500;
604
+ }
605
+ .ermis-message-list__empty {
606
+ display: flex;
607
+ flex-direction: column;
608
+ align-items: center;
609
+ justify-content: center;
610
+ flex: 1;
611
+ gap: var(--ermis-spacing-sm);
612
+ color: var(--ermis-text-muted);
613
+ font-family: var(--ermis-font-family);
614
+ padding: var(--ermis-spacing-lg);
615
+ user-select: none;
616
+ }
617
+ .ermis-message-list__empty-icon {
618
+ color: var(--ermis-accent);
619
+ opacity: 0.4;
620
+ margin-bottom: var(--ermis-spacing-xs);
621
+ }
622
+ .ermis-message-list__empty-title {
623
+ font-size: var(--ermis-font-size-base);
624
+ font-weight: 600;
625
+ color: var(--ermis-text-secondary);
626
+ }
627
+ .ermis-message-list__empty-subtitle {
628
+ font-size: var(--ermis-font-size-sm);
629
+ color: var(--ermis-text-muted);
630
+ }
631
+ .ermis-message-list__item {
632
+ display: flex;
633
+ align-items: flex-start;
634
+ gap: var(--ermis-spacing-sm);
635
+ width: 100%;
636
+ }
637
+ .ermis-message-list__item--group-start {
638
+ padding-top: var(--ermis-spacing-md);
639
+ }
640
+ .ermis-message-list__item--group-cont {
641
+ padding-top: 2px;
642
+ }
643
+ .ermis-message-list__item--other {
644
+ align-self: flex-start;
645
+ flex-direction: row;
646
+ }
647
+ .ermis-message-list__item--own {
648
+ align-self: flex-end;
649
+ flex-direction: row-reverse;
650
+ }
651
+ @keyframes ermis-highlight-fade {
652
+ 0% {
653
+ background-color: rgba(99, 102, 241, 0.15);
654
+ }
655
+ 100% {
656
+ background-color: transparent;
657
+ }
658
+ }
659
+ @keyframes ermis-message-fade-in {
660
+ 0% {
661
+ opacity: 0;
662
+ }
663
+ 100% {
664
+ opacity: 1;
665
+ }
666
+ }
667
+ .ermis-message-list__item--new {
668
+ animation: ermis-message-fade-in 0.35s ease-out forwards;
669
+ }
670
+ .ermis-message-list__item--highlighted {
671
+ position: relative;
672
+ }
673
+ .ermis-message-list__item--highlighted::before {
674
+ content: "";
675
+ position: absolute;
676
+ top: 0;
677
+ bottom: 0;
678
+ left: -3rem;
679
+ right: -3rem;
680
+ animation: ermis-highlight-fade 3s ease-out forwards;
681
+ pointer-events: none;
682
+ z-index: -1;
683
+ }
684
+ .ermis-message--sending {
685
+ opacity: 0.6;
686
+ pointer-events: none;
687
+ }
688
+ .ermis-message--error .ermis-message-bubble {
689
+ border: 1px solid #e74c3c;
690
+ }
691
+ .ermis-message-list__pinned-indicator {
692
+ position: absolute;
693
+ top: -5px;
694
+ color: #e74c3c;
695
+ z-index: 10;
696
+ pointer-events: none;
697
+ display: flex;
698
+ align-items: center;
699
+ justify-content: center;
700
+ padding: 0;
701
+ }
702
+ .ermis-message-list__pinned-indicator--own {
703
+ left: -10px;
704
+ transform: rotate(-45deg);
705
+ }
706
+ .ermis-message-list__pinned-indicator--other {
707
+ right: -10px;
708
+ transform: rotate(45deg);
709
+ }
710
+ .ermis-message-list__banned-overlay {
711
+ display: flex;
712
+ flex-direction: column;
713
+ align-items: center;
714
+ justify-content: center;
715
+ min-height: calc(100dvh - 8rem);
716
+ gap: var(--ermis-spacing-md);
717
+ user-select: none;
718
+ }
719
+ .ermis-message-list__banned-overlay-icon {
720
+ color: #ef4444;
721
+ opacity: 0.6;
722
+ }
723
+ .ermis-message-list__banned-overlay-title {
724
+ font-size: var(--ermis-font-size-base);
725
+ font-weight: 600;
726
+ color: var(--ermis-text-primary);
727
+ }
728
+ .ermis-message-list__banned-overlay-subtitle {
729
+ font-size: var(--ermis-font-size-sm);
730
+ color: var(--ermis-text-muted);
731
+ }
732
+ .ermis-message-list--blocked .ermis-message-actions {
733
+ display: none;
734
+ }
735
+ .ermis-message-list--blocked .ermis-message-reactions__add-btn {
736
+ display: none;
737
+ }
738
+ .ermis-message-list__unblock-btn {
739
+ margin-top: var(--ermis-spacing-md);
740
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-xl, 24px);
741
+ border: none;
742
+ border-radius: var(--ermis-radius-md, 8px);
743
+ background-color: var(--ermis-accent);
744
+ color: #fff;
745
+ font-size: var(--ermis-font-size-sm);
746
+ font-weight: 600;
747
+ font-family: var(--ermis-font-family);
748
+ cursor: pointer;
749
+ transition: background-color var(--ermis-transition), transform var(--ermis-transition);
750
+ }
751
+ .ermis-message-list__unblock-btn:hover {
752
+ background-color: var(--ermis-accent-hover);
753
+ transform: translateY(-1px);
754
+ }
755
+ .ermis-message-list__unblock-btn:active {
756
+ transform: translateY(0);
757
+ }
758
+ .ermis-message-list__pending-overlay {
759
+ display: flex;
760
+ align-items: center;
761
+ justify-content: center;
762
+ min-height: calc(100dvh - 8rem);
763
+ padding: var(--ermis-spacing-xl);
764
+ }
765
+ .ermis-message-list__pending-card {
766
+ background-color: var(--ermis-bg-elevated, #ffffff);
767
+ border-radius: var(--ermis-radius-lg, 12px);
768
+ padding: var(--ermis-spacing-xxl, 32px);
769
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
770
+ display: flex;
771
+ flex-direction: column;
772
+ align-items: center;
773
+ text-align: center;
774
+ max-width: 400px;
775
+ width: 100%;
776
+ }
777
+ .ermis-message-list__pending-avatar {
778
+ margin-bottom: var(--ermis-spacing-lg, 16px);
779
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
780
+ }
781
+ .ermis-message-list__pending-overlay-title {
782
+ font-family: var(--ermis-font-family, sans-serif);
783
+ font-size: var(--ermis-font-size-md, 14px);
784
+ font-weight: 500;
785
+ color: var(--ermis-text-secondary, #666);
786
+ margin-bottom: var(--ermis-spacing-xs, 4px);
787
+ text-transform: uppercase;
788
+ letter-spacing: 0.5px;
789
+ }
790
+ .ermis-message-list__pending-channel-name {
791
+ font-family: var(--ermis-font-family, sans-serif);
792
+ font-size: var(--ermis-font-size-xl, 20px);
793
+ font-weight: 700;
794
+ color: var(--ermis-text, #333);
795
+ margin-bottom: var(--ermis-spacing-sm, 8px);
796
+ }
797
+ .ermis-message-list__pending-overlay-subtitle {
798
+ font-family: var(--ermis-font-family, sans-serif);
799
+ font-size: var(--ermis-font-size-sm, 14px);
800
+ color: var(--ermis-text-secondary, #666);
801
+ margin-bottom: var(--ermis-spacing-xl, 24px);
802
+ line-height: 1.5;
803
+ }
804
+ .ermis-message-list__pending-actions {
805
+ display: flex;
806
+ gap: var(--ermis-spacing-md, 12px);
807
+ width: 100%;
808
+ }
809
+ .ermis-message-list__accept-btn,
810
+ .ermis-message-list__reject-btn {
811
+ flex: 1;
812
+ padding: var(--ermis-spacing-sm, 10px) var(--ermis-spacing-md, 16px);
813
+ border-radius: var(--ermis-radius-md, 8px);
814
+ font-family: var(--ermis-font-family, sans-serif);
815
+ font-size: var(--ermis-font-size-md, 15px);
816
+ font-weight: 600;
817
+ cursor: pointer;
818
+ transition: all var(--ermis-transition, 0.2s ease);
819
+ }
820
+ .ermis-message-list__accept-btn {
821
+ border: none;
822
+ background-color: var(--ermis-accent, #005fff);
823
+ color: #fff;
824
+ box-shadow: 0 4px 10px rgba(0, 95, 255, 0.2);
825
+ }
826
+ .ermis-message-list__accept-btn:hover {
827
+ background-color: var(--ermis-accent-hover, #004ecc);
828
+ transform: translateY(-2px);
829
+ box-shadow: 0 6px 14px rgba(0, 95, 255, 0.3);
830
+ }
831
+ .ermis-message-list__accept-btn:active {
832
+ transform: translateY(0);
833
+ }
834
+ .ermis-message-list__reject-btn {
835
+ border: 1px solid var(--ermis-danger-border, #fecaca);
836
+ background-color: var(--ermis-danger-soft, #fef2f2);
837
+ color: var(--ermis-danger, #ef4444);
838
+ }
839
+ .ermis-message-list__reject-btn:hover {
840
+ background-color: var(--ermis-danger, #ef4444);
841
+ color: #fff;
842
+ border-color: var(--ermis-danger, #ef4444);
843
+ transform: translateY(-2px);
844
+ box-shadow: 0 6px 14px rgba(239, 68, 68, 0.3);
845
+ }
846
+ .ermis-message-list__reject-btn:active {
847
+ transform: translateY(0);
848
+ }
849
+
850
+ /* src/styles/_message-bubble.css */
851
+ .ermis-quoted-message {
852
+ display: flex;
853
+ flex-direction: column;
854
+ gap: 2px;
855
+ padding: var(--ermis-spacing-xs) var(--ermis-spacing-sm);
856
+ border-left: 3px solid var(--ermis-accent);
857
+ background-color: var(--ermis-quote-other-bg);
858
+ border-radius: 0 var(--ermis-radius-sm) var(--ermis-radius-sm) 0;
859
+ cursor: pointer;
860
+ max-width: 100%;
861
+ transition: background-color 0.15s;
862
+ margin-top: var(--ermis-spacing-sm);
863
+ }
864
+ .ermis-quoted-message:hover {
865
+ background-color: var(--ermis-quote-other-bg-hover);
866
+ }
867
+ .ermis-quoted-message--own {
868
+ border-left-color: var(--ermis-quote-own-border);
869
+ background-color: var(--ermis-quote-own-bg);
870
+ border-radius: var(--ermis-radius-sm);
871
+ }
872
+ .ermis-quoted-message--own:hover {
873
+ background-color: var(--ermis-quote-own-bg-hover);
874
+ }
875
+ .ermis-quoted-message__author {
876
+ font-size: var(--ermis-font-size-xs);
877
+ font-weight: 600;
878
+ color: var(--ermis-accent);
879
+ }
880
+ .ermis-quoted-message--own .ermis-quoted-message__author {
881
+ color: var(--ermis-quote-own-author);
882
+ }
883
+ .ermis-quoted-message__text {
884
+ font-size: var(--ermis-font-size-xs);
885
+ color: var(--ermis-text-muted);
886
+ overflow: hidden;
887
+ text-overflow: ellipsis;
888
+ white-space: nowrap;
889
+ }
890
+ .ermis-quoted-message--own .ermis-quoted-message__text {
891
+ color: var(--ermis-quote-own-text);
892
+ }
893
+ .ermis-message-list__item-avatar {
894
+ flex-shrink: 0;
895
+ }
896
+ .ermis-message-list__item-content {
897
+ display: flex;
898
+ flex-direction: column;
899
+ min-width: 0;
900
+ max-width: 75%;
901
+ gap: 2px;
902
+ }
903
+ .ermis-message-list__item--own .ermis-message-list__item-content {
904
+ align-items: flex-end;
905
+ }
906
+ .ermis-message-list__bubble-wrapper {
907
+ display: flex;
908
+ flex-wrap: wrap;
909
+ flex-direction: row;
910
+ align-items: center;
911
+ position: relative;
912
+ width: 100%;
913
+ }
914
+ .ermis-message-list__item--own .ermis-message-list__bubble-wrapper {
915
+ flex-direction: row-reverse;
916
+ }
917
+ .ermis-message-list__item-user {
918
+ font-size: var(--ermis-font-size-xs);
919
+ font-weight: 600;
920
+ color: var(--ermis-accent);
921
+ margin-bottom: 1px;
922
+ }
923
+ .ermis-message-list__item-time {
924
+ font-size: 0.625rem;
925
+ color: var(--ermis-text-muted);
926
+ margin-left: auto;
927
+ padding-left: var(--ermis-spacing-md);
928
+ white-space: nowrap;
929
+ line-height: 1;
930
+ align-self: flex-end;
931
+ padding-top: 4px;
932
+ width: 100%;
933
+ text-align: right;
934
+ display: inline-flex;
935
+ align-items: center;
936
+ justify-content: flex-end;
937
+ gap: 3px;
938
+ }
939
+ .ermis-message-list__edited-indicator {
940
+ margin-right: 2px;
941
+ }
942
+ .ermis-message-status-icon {
943
+ display: inline-flex;
944
+ align-items: center;
945
+ flex-shrink: 0;
946
+ line-height: 0;
947
+ }
948
+ .ermis-message-status-icon--sent {
949
+ color: var(--ermis-text-muted);
950
+ opacity: 0.5;
951
+ }
952
+ .ermis-message-bubble--own .ermis-message-status-icon--sent {
953
+ color: rgba(255, 255, 255, 0.6);
954
+ opacity: 1;
955
+ }
956
+ .ermis-message-status-icon--sending {
957
+ color: var(--ermis-text-muted);
958
+ opacity: 0.4;
959
+ }
960
+ .ermis-message-bubble--own .ermis-message-status-icon--sending {
961
+ color: rgba(255, 255, 255, 0.4);
962
+ opacity: 1;
963
+ }
964
+ .ermis-message-status-icon--failed {
965
+ color: var(--ermis-color-error, #f44336);
966
+ }
967
+ .ermis-message-bubble--own .ermis-message-list__item-time {
968
+ color: rgba(255, 255, 255, 0.6);
969
+ }
970
+ .ermis-message-list__item-text {
971
+ font-size: var(--ermis-font-size-sm);
972
+ line-height: 1.5;
973
+ word-break: break-word;
974
+ }
975
+ .ermis-mention {
976
+ color: var(--ermis-accent);
977
+ font-weight: 600;
978
+ cursor: pointer;
979
+ }
980
+ .ermis-message-bubble--own .ermis-mention {
981
+ color: rgba(255, 255, 255, 0.9);
982
+ text-decoration: underline;
983
+ text-underline-offset: 2px;
984
+ }
985
+ .ermis-text-link {
986
+ color: var(--ermis-accent);
987
+ text-decoration: underline;
988
+ text-underline-offset: 2px;
989
+ cursor: pointer;
990
+ word-break: break-all;
991
+ }
992
+ .ermis-text-link:hover {
993
+ opacity: 0.8;
994
+ }
995
+ .ermis-message-bubble--own .ermis-text-link {
996
+ color: rgba(255, 255, 255, 0.9);
997
+ }
998
+ .ermis-message-bubble {
999
+ position: relative;
1000
+ display: flex;
1001
+ flex-wrap: wrap;
1002
+ align-items: flex-end;
1003
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1004
+ border-radius: var(--ermis-radius-lg);
1005
+ width: 100%;
1006
+ word-break: break-word;
1007
+ }
1008
+ .ermis-message-bubble--own {
1009
+ background-color: var(--ermis-bubble-own-bg);
1010
+ color: var(--ermis-bubble-own-text);
1011
+ border-bottom-right-radius: var(--ermis-radius-sm);
1012
+ }
1013
+ .ermis-message-bubble--other {
1014
+ background-color: var(--ermis-bubble-other-bg);
1015
+ color: var(--ermis-bubble-other-text);
1016
+ border-bottom-left-radius: var(--ermis-radius-sm);
1017
+ }
1018
+ .ermis-message-list__system {
1019
+ display: flex;
1020
+ align-items: center;
1021
+ justify-content: center;
1022
+ gap: var(--ermis-spacing-sm);
1023
+ padding: var(--ermis-spacing-sm) 0;
1024
+ margin: var(--ermis-spacing-xs) 0;
1025
+ align-self: center;
1026
+ }
1027
+ .ermis-message-list__system-text {
1028
+ font-size: var(--ermis-font-size-xs);
1029
+ color: var(--ermis-text-muted);
1030
+ font-style: italic;
1031
+ }
1032
+ .ermis-message-list__signal-text {
1033
+ font-size: var(--ermis-font-size-sm);
1034
+ color: inherit;
1035
+ line-height: 1.5;
1036
+ word-break: break-word;
1037
+ }
1038
+ .ermis-message-list__item-content--has-attachments {
1039
+ width: 350px;
1040
+ }
1041
+ .ermis-message-content--with-attachments {
1042
+ display: flex;
1043
+ flex-direction: column;
1044
+ width: 100%;
1045
+ }
1046
+ .ermis-message-content--with-attachments .ermis-message-list__item-text {
1047
+ word-wrap: break-word;
1048
+ overflow-wrap: break-word;
1049
+ }
1050
+ .ermis-attachment-list {
1051
+ display: flex;
1052
+ flex-direction: column;
1053
+ gap: var(--ermis-spacing-xs);
1054
+ margin-top: var(--ermis-spacing-xs);
1055
+ width: 100%;
1056
+ }
1057
+ .ermis-attachment-grid {
1058
+ display: grid;
1059
+ gap: 2px;
1060
+ border-radius: var(--ermis-radius-md);
1061
+ overflow: hidden;
1062
+ }
1063
+ .ermis-attachment-grid--single {
1064
+ grid-template-columns: 1fr;
1065
+ }
1066
+ .ermis-attachment-grid--multi {
1067
+ grid-template-columns: 1fr 1fr;
1068
+ }
1069
+ .ermis-attachment-grid .ermis-attachment--image,
1070
+ .ermis-attachment-grid .ermis-attachment--video {
1071
+ width: 100%;
1072
+ height: 100%;
1073
+ max-width: none;
1074
+ max-height: 200px;
1075
+ object-fit: cover;
1076
+ border-radius: 0;
1077
+ display: block;
1078
+ }
1079
+ .ermis-attachment-grid--single .ermis-attachment--image,
1080
+ .ermis-attachment-grid--single .ermis-attachment--video {
1081
+ max-height: 300px;
1082
+ }
1083
+ .ermis-attachment-grid--multi > :last-child:nth-child(odd) {
1084
+ grid-column: 1 / -1;
1085
+ }
1086
+ .ermis-attachment-aspect-box {
1087
+ position: relative;
1088
+ overflow: hidden;
1089
+ border-radius: var(--ermis-radius-md);
1090
+ width: 100%;
1091
+ max-width: 300px;
1092
+ min-height: 120px;
1093
+ background-color: var(--ermis-bg-hover, #2a2a4a);
1094
+ }
1095
+ .ermis-attachment-blur-preview {
1096
+ position: absolute;
1097
+ top: 0;
1098
+ left: 0;
1099
+ width: 100%;
1100
+ height: 100%;
1101
+ object-fit: cover;
1102
+ filter: blur(20px);
1103
+ transform: scale(1.1);
1104
+ z-index: 1;
1105
+ }
1106
+ .ermis-attachment-shimmer {
1107
+ position: absolute;
1108
+ top: 0;
1109
+ left: 0;
1110
+ width: 100%;
1111
+ height: 100%;
1112
+ z-index: 1;
1113
+ background:
1114
+ linear-gradient(
1115
+ 110deg,
1116
+ var(--ermis-bg-hover, #2a2a4a) 30%,
1117
+ var(--ermis-bg-active, #3a3a5a) 50%,
1118
+ var(--ermis-bg-hover, #2a2a4a) 70%);
1119
+ background-size: 200% 100%;
1120
+ animation: ermis-shimmer 1.5s ease-in-out infinite;
1121
+ }
1122
+ @keyframes ermis-shimmer {
1123
+ 0% {
1124
+ background-position: 200% 0;
1125
+ }
1126
+ 100% {
1127
+ background-position: -200% 0;
1128
+ }
1129
+ }
1130
+ .ermis-attachment-aspect-box .ermis-attachment--image {
1131
+ position: absolute;
1132
+ top: 0;
1133
+ left: 0;
1134
+ width: 100%;
1135
+ height: 100%;
1136
+ object-fit: cover;
1137
+ opacity: 0;
1138
+ transition: opacity 0.3s ease;
1139
+ z-index: 2;
1140
+ max-width: none;
1141
+ max-height: none;
1142
+ border-radius: 0;
1143
+ }
1144
+ .ermis-attachment-aspect-box .ermis-attachment--image.ermis-attachment--loaded {
1145
+ opacity: 1;
1146
+ }
1147
+ .ermis-attachment-grid .ermis-attachment-aspect-box {
1148
+ max-width: none;
1149
+ border-radius: 0;
1150
+ min-height: 100px;
1151
+ }
1152
+ .ermis-attachment--image {
1153
+ max-width: 300px;
1154
+ max-height: 200px;
1155
+ border-radius: var(--ermis-radius-md);
1156
+ object-fit: cover;
1157
+ cursor: pointer;
1158
+ }
1159
+ .ermis-attachment--video {
1160
+ max-width: 300px;
1161
+ max-height: 200px;
1162
+ border-radius: var(--ermis-radius-md);
1163
+ }
1164
+ .ermis-attachment--file {
1165
+ display: flex;
1166
+ align-items: center;
1167
+ gap: var(--ermis-spacing-sm);
1168
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1169
+ border-radius: var(--ermis-radius-md);
1170
+ background-color: var(--ermis-bg-hover);
1171
+ text-decoration: none;
1172
+ color: var(--ermis-text-primary);
1173
+ transition: background-color var(--ermis-transition);
1174
+ }
1175
+ .ermis-attachment--file:hover {
1176
+ background-color: var(--ermis-bg-active);
1177
+ }
1178
+ .ermis-attachment__file-icon {
1179
+ font-size: 1.25rem;
1180
+ flex-shrink: 0;
1181
+ }
1182
+ .ermis-attachment__file-info {
1183
+ display: flex;
1184
+ flex-direction: column;
1185
+ min-width: 0;
1186
+ }
1187
+ .ermis-attachment__file-name {
1188
+ font-size: var(--ermis-font-size-sm);
1189
+ font-weight: 500;
1190
+ white-space: nowrap;
1191
+ overflow: hidden;
1192
+ text-overflow: ellipsis;
1193
+ }
1194
+ .ermis-attachment__file-size {
1195
+ font-size: var(--ermis-font-size-xs);
1196
+ color: var(--ermis-text-muted);
1197
+ }
1198
+ .ermis-attachment--voice {
1199
+ display: flex;
1200
+ align-items: center;
1201
+ gap: var(--ermis-spacing-sm);
1202
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1203
+ border-radius: var(--ermis-radius-md);
1204
+ background-color: var(--ermis-bg-hover);
1205
+ overflow: hidden;
1206
+ width: 100%;
1207
+ box-sizing: border-box;
1208
+ }
1209
+ .ermis-attachment__voice-icon {
1210
+ font-size: 1.25rem;
1211
+ flex-shrink: 0;
1212
+ }
1213
+ .ermis-attachment__voice-player {
1214
+ flex: 1;
1215
+ min-width: 0;
1216
+ width: 100%;
1217
+ max-width: 100%;
1218
+ height: 32px;
1219
+ }
1220
+ .ermis-attachment__voice-duration {
1221
+ font-size: var(--ermis-font-size-xs);
1222
+ color: var(--ermis-text-muted);
1223
+ flex-shrink: 0;
1224
+ }
1225
+ .ermis-attachment--link-preview {
1226
+ display: flex;
1227
+ flex-direction: column;
1228
+ border-radius: var(--ermis-radius-md);
1229
+ overflow: hidden;
1230
+ border: 1px solid var(--ermis-border);
1231
+ text-decoration: none;
1232
+ color: var(--ermis-text-primary);
1233
+ transition: border-color var(--ermis-transition);
1234
+ }
1235
+ .ermis-attachment--link-preview:hover {
1236
+ border-color: var(--ermis-accent);
1237
+ }
1238
+ .ermis-attachment__link-image {
1239
+ width: 100%;
1240
+ max-height: 160px;
1241
+ object-fit: cover;
1242
+ }
1243
+ .ermis-attachment__link-info {
1244
+ display: flex;
1245
+ flex-direction: column;
1246
+ gap: 2px;
1247
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1248
+ }
1249
+ .ermis-attachment__link-title {
1250
+ font-size: var(--ermis-font-size-sm);
1251
+ font-weight: 600;
1252
+ display: -webkit-box;
1253
+ -webkit-line-clamp: 2;
1254
+ line-clamp: 2;
1255
+ -webkit-box-orient: vertical;
1256
+ overflow: hidden;
1257
+ }
1258
+ .ermis-attachment__link-description {
1259
+ font-size: var(--ermis-font-size-xs);
1260
+ color: var(--ermis-text-secondary);
1261
+ display: -webkit-box;
1262
+ -webkit-line-clamp: 2;
1263
+ line-clamp: 2;
1264
+ -webkit-box-orient: vertical;
1265
+ overflow: hidden;
1266
+ }
1267
+ .ermis-attachment__link-url {
1268
+ font-size: var(--ermis-font-size-xs);
1269
+ color: var(--ermis-text-muted);
1270
+ margin-top: 2px;
1271
+ }
1272
+ .ermis-message-poll {
1273
+ display: flex;
1274
+ align-items: center;
1275
+ gap: var(--ermis-spacing-sm);
1276
+ }
1277
+ .ermis-message-poll__icon {
1278
+ font-size: 1.25rem;
1279
+ }
1280
+ .ermis-message-poll__text {
1281
+ font-size: var(--ermis-font-size-sm);
1282
+ }
1283
+ .ermis-message-sticker {
1284
+ max-width: 120px;
1285
+ max-height: 120px;
1286
+ }
1287
+ .ermis-message-error {
1288
+ font-size: var(--ermis-font-size-sm);
1289
+ color: #ef4444;
1290
+ font-style: italic;
1291
+ }
1292
+ .ermis-read-receipts {
1293
+ display: flex;
1294
+ justify-content: flex-end;
1295
+ width: 100%;
1296
+ padding-top: 2px;
1297
+ }
1298
+ .ermis-read-receipts__avatars {
1299
+ display: flex;
1300
+ flex-direction: row;
1301
+ align-items: center;
1302
+ cursor: default;
1303
+ position: relative;
1304
+ }
1305
+ .ermis-read-receipts__avatar {
1306
+ flex-shrink: 0;
1307
+ border: 1.5px solid var(--ermis-bg-primary, #1a1a2e);
1308
+ border-radius: 50%;
1309
+ box-sizing: content-box;
1310
+ }
1311
+ .ermis-read-receipts__avatar + .ermis-read-receipts__avatar {
1312
+ margin-left: -4px;
1313
+ }
1314
+ .ermis-read-receipts__overflow {
1315
+ display: flex;
1316
+ align-items: center;
1317
+ justify-content: center;
1318
+ width: 16px;
1319
+ height: 16px;
1320
+ border-radius: 50%;
1321
+ background-color: var(--ermis-bg-hover, #2a2a4a);
1322
+ color: var(--ermis-text-muted, #888);
1323
+ font-size: 0.5rem;
1324
+ font-weight: 700;
1325
+ margin-left: -4px;
1326
+ border: 1.5px solid var(--ermis-bg-primary, #1a1a2e);
1327
+ box-sizing: content-box;
1328
+ flex-shrink: 0;
1329
+ }
1330
+ .ermis-read-receipts__tooltip-wrapper {
1331
+ display: none;
1332
+ position: absolute;
1333
+ bottom: calc(100% + 6px);
1334
+ right: 0;
1335
+ z-index: 50;
1336
+ }
1337
+ .ermis-read-receipts__tooltip-wrapper::after {
1338
+ content: "";
1339
+ position: absolute;
1340
+ top: 100%;
1341
+ left: 0;
1342
+ right: 0;
1343
+ height: 6px;
1344
+ background: transparent;
1345
+ }
1346
+ .ermis-read-receipts__avatars:hover .ermis-read-receipts__tooltip-wrapper {
1347
+ display: flex;
1348
+ }
1349
+ .ermis-read-receipts__tooltip {
1350
+ display: flex;
1351
+ flex-direction: column;
1352
+ gap: 8px;
1353
+ background-color: var(--ermis-bg-secondary, #1e1e3a);
1354
+ border: 1px solid var(--ermis-border, #333);
1355
+ border-radius: var(--ermis-radius-md, 8px);
1356
+ padding: var(--ermis-spacing-xs, 6px) var(--ermis-spacing-sm, 8px);
1357
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
1358
+ width: 200px;
1359
+ max-height: 200px;
1360
+ overflow-y: auto;
1361
+ }
1362
+ .ermis-read-receipts__tooltip-item {
1363
+ display: flex;
1364
+ align-items: center;
1365
+ gap: var(--ermis-spacing-sm, 8px);
1366
+ }
1367
+ .ermis-read-receipts__tooltip-info {
1368
+ display: flex;
1369
+ flex-direction: column;
1370
+ gap: 1px;
1371
+ min-width: 0;
1372
+ }
1373
+ .ermis-read-receipts__tooltip-name {
1374
+ font-size: var(--ermis-font-size-xs, 0.75rem);
1375
+ color: var(--ermis-text-primary, #e0e0e0);
1376
+ white-space: nowrap;
1377
+ overflow: hidden;
1378
+ text-overflow: ellipsis;
1379
+ }
1380
+ .ermis-read-receipts__tooltip-time {
1381
+ font-size: 0.625rem;
1382
+ color: var(--ermis-text-muted, #888);
1383
+ white-space: nowrap;
1384
+ }
1385
+
1386
+ /* src/styles/_message-input.css */
1387
+ .ermis-message-input {
1388
+ display: flex;
1389
+ flex-direction: column;
1390
+ gap: var(--ermis-spacing-sm);
1391
+ padding: var(--ermis-spacing-md);
1392
+ border-top: 1px solid var(--ermis-border);
1393
+ background-color: var(--ermis-bg-secondary);
1394
+ font-family: var(--ermis-font-family);
1395
+ position: relative;
1396
+ }
1397
+ .ermis-message-input__row {
1398
+ display: flex;
1399
+ align-items: flex-end;
1400
+ gap: var(--ermis-spacing-sm);
1401
+ }
1402
+ .ermis-message-input__textarea {
1403
+ flex: 1;
1404
+ resize: none;
1405
+ border: 1px solid var(--ermis-border);
1406
+ border-radius: var(--ermis-radius-md);
1407
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1408
+ font-size: var(--ermis-font-size-sm);
1409
+ font-family: var(--ermis-font-family);
1410
+ color: var(--ermis-text-primary);
1411
+ background-color: var(--ermis-bg-primary);
1412
+ outline: none;
1413
+ transition: border-color var(--ermis-transition);
1414
+ line-height: 1.5;
1415
+ min-height: 2.25rem;
1416
+ max-height: 8rem;
1417
+ }
1418
+ .ermis-message-input__textarea::placeholder {
1419
+ color: var(--ermis-text-muted);
1420
+ }
1421
+ .ermis-message-input__textarea:focus {
1422
+ border-color: var(--ermis-accent);
1423
+ }
1424
+ .ermis-message-input__send-btn {
1425
+ display: inline-flex;
1426
+ align-items: center;
1427
+ justify-content: center;
1428
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
1429
+ border: none;
1430
+ border-radius: var(--ermis-radius-md);
1431
+ background-color: var(--ermis-accent);
1432
+ color: #fff;
1433
+ font-size: var(--ermis-font-size-sm);
1434
+ font-weight: 600;
1435
+ font-family: var(--ermis-font-family);
1436
+ cursor: pointer;
1437
+ white-space: nowrap;
1438
+ transition: background-color var(--ermis-transition), opacity var(--ermis-transition);
1439
+ }
1440
+ .ermis-message-input__send-btn:hover:not(:disabled) {
1441
+ background-color: var(--ermis-accent-hover);
1442
+ }
1443
+ .ermis-message-input__send-btn:disabled {
1444
+ opacity: 0.4;
1445
+ cursor: not-allowed;
1446
+ }
1447
+ .ermis-message-input__attach-btn {
1448
+ display: inline-flex;
1449
+ align-items: center;
1450
+ justify-content: center;
1451
+ padding: 4px;
1452
+ border: none;
1453
+ background: none;
1454
+ font-size: 1.25rem;
1455
+ cursor: pointer;
1456
+ color: var(--ermis-text-secondary);
1457
+ transition: color var(--ermis-transition);
1458
+ flex-shrink: 0;
1459
+ }
1460
+ .ermis-message-input__attach-btn:hover {
1461
+ color: var(--ermis-accent);
1462
+ }
1463
+ .ermis-message-input__attach-btn:disabled {
1464
+ opacity: 0.4;
1465
+ cursor: not-allowed;
1466
+ }
1467
+ .ermis-message-input__file-input {
1468
+ display: none;
1469
+ }
1470
+ .ermis-message-input__emoji-btn {
1471
+ display: inline-flex;
1472
+ align-items: center;
1473
+ justify-content: center;
1474
+ padding: 4px;
1475
+ border: none;
1476
+ background: none;
1477
+ font-size: 1.25rem;
1478
+ cursor: pointer;
1479
+ color: var(--ermis-text-secondary);
1480
+ transition: color var(--ermis-transition);
1481
+ flex-shrink: 0;
1482
+ }
1483
+ .ermis-message-input__emoji-btn:hover,
1484
+ .ermis-message-input__emoji-btn--active {
1485
+ color: var(--ermis-accent);
1486
+ }
1487
+ .ermis-message-input__emoji-picker {
1488
+ position: absolute;
1489
+ bottom: 100%;
1490
+ right: 0;
1491
+ margin-bottom: var(--ermis-spacing-xs);
1492
+ z-index: 100;
1493
+ border-radius: var(--ermis-radius-md);
1494
+ box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
1495
+ overflow: hidden;
1496
+ }
1497
+ .ermis-files-preview {
1498
+ display: flex;
1499
+ gap: var(--ermis-spacing-sm);
1500
+ overflow-x: auto;
1501
+ overflow-y: hidden;
1502
+ scrollbar-width: thin;
1503
+ min-width: 0;
1504
+ }
1505
+ .ermis-files-preview__item {
1506
+ position: relative;
1507
+ display: flex;
1508
+ flex-direction: column;
1509
+ width: 80px;
1510
+ min-width: 80px;
1511
+ border-radius: var(--ermis-radius-md);
1512
+ border: 1px solid var(--ermis-border);
1513
+ overflow: hidden;
1514
+ background: var(--ermis-bg-primary);
1515
+ }
1516
+ .ermis-files-preview__item--error {
1517
+ border-color: #e74c3c;
1518
+ }
1519
+ .ermis-files-preview__remove {
1520
+ position: absolute;
1521
+ top: 2px;
1522
+ right: 2px;
1523
+ width: 18px;
1524
+ height: 18px;
1525
+ border-radius: 50%;
1526
+ border: none;
1527
+ background: rgba(0, 0, 0, 0.6);
1528
+ color: #fff;
1529
+ font-size: 10px;
1530
+ line-height: 1;
1531
+ cursor: pointer;
1532
+ display: flex;
1533
+ align-items: center;
1534
+ justify-content: center;
1535
+ z-index: 1;
1536
+ padding: 0;
1537
+ }
1538
+ .ermis-files-preview__remove:hover {
1539
+ background: rgba(0, 0, 0, 0.8);
1540
+ }
1541
+ .ermis-files-preview__thumb {
1542
+ width: 100%;
1543
+ height: 60px;
1544
+ object-fit: cover;
1545
+ display: block;
1546
+ }
1547
+ .ermis-files-preview__file-icon {
1548
+ width: 100%;
1549
+ height: 60px;
1550
+ display: flex;
1551
+ align-items: center;
1552
+ justify-content: center;
1553
+ font-size: 1.5rem;
1554
+ background: var(--ermis-bg-hover);
1555
+ }
1556
+ .ermis-files-preview__info {
1557
+ display: flex;
1558
+ flex-direction: column;
1559
+ padding: 2px 4px;
1560
+ gap: 1px;
1561
+ }
1562
+ .ermis-files-preview__name {
1563
+ font-size: 10px;
1564
+ white-space: nowrap;
1565
+ overflow: hidden;
1566
+ text-overflow: ellipsis;
1567
+ color: var(--ermis-text-primary);
1568
+ }
1569
+ .ermis-files-preview__size {
1570
+ font-size: 9px;
1571
+ color: var(--ermis-text-muted);
1572
+ }
1573
+ .ermis-files-preview__uploading {
1574
+ position: absolute;
1575
+ inset: 0;
1576
+ background: rgba(0, 0, 0, 0.3);
1577
+ display: flex;
1578
+ align-items: center;
1579
+ justify-content: center;
1580
+ }
1581
+ .ermis-files-preview__spinner {
1582
+ width: 20px;
1583
+ height: 20px;
1584
+ border: 2px solid rgba(255, 255, 255, 0.4);
1585
+ border-top-color: #fff;
1586
+ border-radius: 50%;
1587
+ animation: ermis-spin 0.6s linear infinite;
1588
+ }
1589
+ @keyframes ermis-spin {
1590
+ to {
1591
+ transform: rotate(360deg);
1592
+ }
1593
+ }
1594
+ .ermis-files-preview__error-badge {
1595
+ position: absolute;
1596
+ bottom: 2px;
1597
+ right: 2px;
1598
+ font-size: 14px;
1599
+ color: #e74c3c;
1600
+ }
1601
+ .ermis-message-input__reply-preview {
1602
+ display: flex;
1603
+ align-items: center;
1604
+ justify-content: space-between;
1605
+ padding: var(--ermis-spacing-xs) var(--ermis-spacing-md);
1606
+ background-color: var(--ermis-bg-primary);
1607
+ border-left: 3px solid var(--ermis-accent);
1608
+ border-radius: var(--ermis-radius-sm);
1609
+ gap: var(--ermis-spacing-sm);
1610
+ }
1611
+ .ermis-message-input__reply-preview-body {
1612
+ display: flex;
1613
+ flex-direction: column;
1614
+ min-width: 0;
1615
+ flex: 1;
1616
+ }
1617
+ .ermis-message-input__reply-preview-label {
1618
+ font-size: var(--ermis-font-size-xs);
1619
+ color: var(--ermis-accent);
1620
+ font-weight: 600;
1621
+ }
1622
+ .ermis-message-input__reply-preview-user {
1623
+ font-size: var(--ermis-font-size-sm);
1624
+ font-weight: 600;
1625
+ color: var(--ermis-text-primary);
1626
+ }
1627
+ .ermis-message-input__reply-preview-text {
1628
+ font-size: var(--ermis-font-size-xs);
1629
+ color: var(--ermis-text-secondary);
1630
+ white-space: nowrap;
1631
+ overflow: hidden;
1632
+ text-overflow: ellipsis;
1633
+ }
1634
+ .ermis-message-input__reply-preview-dismiss {
1635
+ display: inline-flex;
1636
+ align-items: center;
1637
+ justify-content: center;
1638
+ background: none;
1639
+ border: none;
1640
+ cursor: pointer;
1641
+ color: var(--ermis-text-secondary);
1642
+ padding: 4px;
1643
+ border-radius: var(--ermis-radius-sm);
1644
+ flex-shrink: 0;
1645
+ transition: background-color 0.15s, color 0.15s;
1646
+ }
1647
+ .ermis-message-input__reply-preview-dismiss:hover {
1648
+ background-color: var(--ermis-bg-hover);
1649
+ color: var(--ermis-text-primary);
1650
+ }
1651
+ .ermis-message-input--banned {
1652
+ pointer-events: none;
1653
+ }
1654
+ .ermis-message-input__banned-banner {
1655
+ display: flex;
1656
+ align-items: center;
1657
+ justify-content: center;
1658
+ gap: var(--ermis-spacing-sm);
1659
+ padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
1660
+ color: #ef4444;
1661
+ font-size: var(--ermis-font-size-sm);
1662
+ font-weight: 500;
1663
+ user-select: none;
1664
+ opacity: 0.8;
1665
+ }
1666
+ .ermis-message-input__banned-banner svg {
1667
+ flex-shrink: 0;
1668
+ }
1669
+ .ermis-message-input--blocked {
1670
+ pointer-events: none;
1671
+ }
1672
+ .ermis-message-input__blocked-banner {
1673
+ display: flex;
1674
+ align-items: center;
1675
+ justify-content: center;
1676
+ gap: var(--ermis-spacing-sm);
1677
+ padding: var(--ermis-spacing-md) var(--ermis-spacing-lg);
1678
+ color: var(--ermis-text-secondary, #9ca3af);
1679
+ font-size: var(--ermis-font-size-sm);
1680
+ font-weight: 500;
1681
+ user-select: none;
1682
+ opacity: 0.8;
1683
+ }
1684
+ .ermis-message-input__blocked-banner svg {
1685
+ flex-shrink: 0;
1686
+ }
1687
+ .ermis-message-input__keyword-banner {
1688
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1689
+ background-color: var(--ermis-bg-danger-light, #fee2e2);
1690
+ border-radius: var(--ermis-radius-md) var(--ermis-radius-md) 0 0;
1691
+ font-size: var(--ermis-font-size-sm, 13px);
1692
+ color: var(--ermis-text-danger, #ef4444);
1693
+ display: flex;
1694
+ align-items: center;
1695
+ gap: var(--ermis-spacing-sm);
1696
+ border-bottom: 1px solid var(--ermis-border-danger, #fca5a5);
1697
+ }
1698
+ .ermis-message-input__permission-banner,
1699
+ .ermis-message-input__slow-mode-banner {
1700
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1701
+ background-color: var(--ermis-bg-secondary);
1702
+ border-radius: var(--ermis-radius-md) var(--ermis-radius-md) 0 0;
1703
+ font-size: var(--ermis-font-size-sm, 13px);
1704
+ color: var(--ermis-text-secondary);
1705
+ display: flex;
1706
+ align-items: center;
1707
+ gap: var(--ermis-spacing-sm);
1708
+ border-bottom: 1px solid var(--ermis-border-color);
1709
+ }
1710
+ .ermis-message-input__row--banners-active {
1711
+ border-top-left-radius: 0;
1712
+ border-top-right-radius: 0;
1713
+ }
1714
+
1715
+ /* src/styles/_mentions.css */
1716
+ .ermis-message-input__editable-wrapper {
1717
+ flex: 1;
1718
+ position: relative;
1719
+ min-width: 0;
1720
+ display: flex;
1721
+ align-items: center;
1722
+ gap: var(--ermis-spacing-xs);
1723
+ }
1724
+ .ermis-message-input__editable {
1725
+ flex: 1;
1726
+ min-width: 0;
1727
+ border: 1px solid var(--ermis-border);
1728
+ border-radius: var(--ermis-radius-md);
1729
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1730
+ font-size: var(--ermis-font-size-sm);
1731
+ font-family: var(--ermis-font-family);
1732
+ color: var(--ermis-text-primary);
1733
+ background-color: var(--ermis-bg-primary);
1734
+ outline: none;
1735
+ transition: border-color var(--ermis-transition);
1736
+ line-height: 1.5;
1737
+ min-height: 2.25rem;
1738
+ max-height: 8rem;
1739
+ overflow-y: auto;
1740
+ white-space: pre-wrap;
1741
+ word-break: break-word;
1742
+ }
1743
+ .ermis-message-input__editable:focus {
1744
+ border-color: var(--ermis-accent);
1745
+ }
1746
+ .ermis-message-input__editable:empty::before {
1747
+ content: attr(data-placeholder);
1748
+ color: var(--ermis-text-muted);
1749
+ pointer-events: none;
1750
+ }
1751
+ .ermis-message-input__mention-span {
1752
+ color: var(--ermis-accent);
1753
+ font-weight: 600;
1754
+ user-select: all;
1755
+ cursor: default;
1756
+ border-radius: 3px;
1757
+ padding: 0 1px;
1758
+ }
1759
+ .ermis-mention-suggestions {
1760
+ position: absolute;
1761
+ bottom: 100%;
1762
+ left: 0;
1763
+ right: 0;
1764
+ max-height: 200px;
1765
+ overflow-y: auto;
1766
+ background-color: var(--ermis-bg-primary);
1767
+ border: 1px solid var(--ermis-border);
1768
+ border-radius: var(--ermis-radius-md);
1769
+ box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
1770
+ margin-bottom: var(--ermis-spacing-xs);
1771
+ z-index: 100;
1772
+ }
1773
+ .ermis-mention-suggestions__item {
1774
+ display: flex;
1775
+ align-items: center;
1776
+ gap: var(--ermis-spacing-sm);
1777
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
1778
+ cursor: pointer;
1779
+ transition: background-color 0.1s;
1780
+ }
1781
+ .ermis-mention-suggestions__item:hover,
1782
+ .ermis-mention-suggestions__item--highlighted {
1783
+ background-color: var(--ermis-bg-secondary);
1784
+ }
1785
+ .ermis-mention-suggestions__name {
1786
+ font-size: var(--ermis-font-size-sm);
1787
+ color: var(--ermis-text-primary);
1788
+ font-weight: 500;
1789
+ overflow: hidden;
1790
+ text-overflow: ellipsis;
1791
+ white-space: nowrap;
1792
+ }
1793
+ .ermis-mention-suggestions__all-icon {
1794
+ width: 24px;
1795
+ height: 24px;
1796
+ border-radius: 50%;
1797
+ background-color: var(--ermis-accent);
1798
+ color: #fff;
1799
+ display: flex;
1800
+ align-items: center;
1801
+ justify-content: center;
1802
+ font-size: 0.75rem;
1803
+ font-weight: 700;
1804
+ flex-shrink: 0;
1805
+ }
1806
+
1807
+ /* src/styles/_pinned-messages.css */
1808
+ .ermis-pinned-messages {
1809
+ border-bottom: 1px solid var(--ermis-border);
1810
+ background-color: var(--ermis-bg-secondary);
1811
+ font-family: var(--ermis-font-family);
1812
+ position: relative;
1813
+ flex-shrink: 0;
1814
+ z-index: 50;
1815
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
1816
+ }
1817
+ .ermis-pinned-messages__header {
1818
+ display: flex;
1819
+ align-items: center;
1820
+ gap: var(--ermis-spacing-xs);
1821
+ padding: var(--ermis-spacing-xs) var(--ermis-spacing-md);
1822
+ font-size: var(--ermis-font-size-xs);
1823
+ color: var(--ermis-text-secondary);
1824
+ cursor: pointer;
1825
+ }
1826
+ .ermis-pinned-messages__icon {
1827
+ color: var(--ermis-accent);
1828
+ flex-shrink: 0;
1829
+ }
1830
+ .ermis-pinned-messages__label {
1831
+ font-weight: 600;
1832
+ color: var(--ermis-text-primary);
1833
+ }
1834
+ .ermis-pinned-messages__toggle {
1835
+ margin-left: auto;
1836
+ background: none;
1837
+ border: none;
1838
+ color: var(--ermis-accent);
1839
+ font-size: var(--ermis-font-size-xs);
1840
+ font-weight: 600;
1841
+ cursor: pointer;
1842
+ padding: 2px 6px;
1843
+ border-radius: var(--ermis-radius-sm);
1844
+ transition: background-color var(--ermis-transition);
1845
+ }
1846
+ .ermis-pinned-messages__toggle:hover {
1847
+ background-color: var(--ermis-bg-hover);
1848
+ }
1849
+ .ermis-pinned-messages__list {
1850
+ padding: 0 var(--ermis-spacing-md);
1851
+ display: flex;
1852
+ flex-direction: column;
1853
+ gap: 2px;
1854
+ max-height: 0;
1855
+ overflow-y: auto;
1856
+ transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
1857
+ scrollbar-width: thin;
1858
+ position: absolute;
1859
+ top: 100%;
1860
+ left: 0;
1861
+ right: 0;
1862
+ background-color: var(--ermis-bg-secondary);
1863
+ z-index: 49;
1864
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
1865
+ }
1866
+ .ermis-pinned-messages--expanded .ermis-pinned-messages__list {
1867
+ max-height: 300px;
1868
+ padding-bottom: var(--ermis-spacing-xs);
1869
+ }
1870
+ .ermis-pinned-messages__item {
1871
+ display: flex;
1872
+ align-items: center;
1873
+ gap: var(--ermis-spacing-sm);
1874
+ padding: var(--ermis-spacing-xs) var(--ermis-spacing-sm);
1875
+ border-radius: var(--ermis-radius-sm);
1876
+ cursor: pointer;
1877
+ transition: background-color var(--ermis-transition);
1878
+ }
1879
+ .ermis-pinned-messages__item:hover {
1880
+ background-color: var(--ermis-bg-hover);
1881
+ }
1882
+ .ermis-pinned-messages__item-content {
1883
+ flex: 1;
1884
+ min-width: 0;
1885
+ display: flex;
1886
+ flex-direction: column;
1887
+ gap: 1px;
1888
+ }
1889
+ .ermis-pinned-messages__item-user {
1890
+ font-size: var(--ermis-font-size-xs);
1891
+ font-weight: 600;
1892
+ color: var(--ermis-text-primary);
1893
+ white-space: nowrap;
1894
+ overflow: hidden;
1895
+ text-overflow: ellipsis;
1896
+ }
1897
+ .ermis-pinned-messages__item-text {
1898
+ font-size: var(--ermis-font-size-xs);
1899
+ color: var(--ermis-text-secondary);
1900
+ white-space: nowrap;
1901
+ overflow: hidden;
1902
+ text-overflow: ellipsis;
1903
+ min-width: 0;
1904
+ }
1905
+ .ermis-pinned-messages__unpin-btn {
1906
+ display: inline-flex;
1907
+ align-items: center;
1908
+ justify-content: center;
1909
+ width: 26px;
1910
+ height: 26px;
1911
+ border: none;
1912
+ background: none;
1913
+ border-radius: var(--ermis-radius-sm);
1914
+ color: var(--ermis-text-muted);
1915
+ cursor: pointer;
1916
+ flex-shrink: 0;
1917
+ transition: color var(--ermis-transition), background-color var(--ermis-transition);
1918
+ opacity: 0;
1919
+ }
1920
+ .ermis-pinned-messages__item:hover .ermis-pinned-messages__unpin-btn {
1921
+ opacity: 1;
1922
+ }
1923
+ .ermis-pinned-messages__unpin-btn:hover {
1924
+ color: var(--ermis-accent);
1925
+ background-color: var(--ermis-bg-hover);
1926
+ }
1927
+
1928
+ /* src/styles/_message-actions.css */
1929
+ .ermis-message-list__actions {
1930
+ position: absolute;
1931
+ top: 50%;
1932
+ transform: translateY(-50%);
1933
+ opacity: 0;
1934
+ display: inline-flex;
1935
+ align-items: center;
1936
+ gap: 2px;
1937
+ background-color: var(--ermis-bg-secondary);
1938
+ border: 1px solid var(--ermis-border);
1939
+ border-radius: var(--ermis-radius-sm);
1940
+ padding: 2px;
1941
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
1942
+ transition: opacity 0.2s;
1943
+ z-index: 10;
1944
+ }
1945
+ .ermis-message-list__bubble-wrapper:hover .ermis-message-list__actions,
1946
+ .ermis-message-list__actions--active {
1947
+ opacity: 1;
1948
+ }
1949
+ .ermis-message-list__item--own .ermis-message-list__actions {
1950
+ right: 100%;
1951
+ flex-direction: row-reverse;
1952
+ }
1953
+ .ermis-message-list__item--other .ermis-message-list__actions {
1954
+ left: 100%;
1955
+ }
1956
+ .ermis-message-list__actions-trigger {
1957
+ display: inline-flex;
1958
+ align-items: center;
1959
+ justify-content: center;
1960
+ background: none;
1961
+ border: none;
1962
+ border-radius: var(--ermis-radius-sm);
1963
+ padding: 4px;
1964
+ cursor: pointer;
1965
+ color: var(--ermis-text-secondary);
1966
+ transition: background-color var(--ermis-transition), color var(--ermis-transition);
1967
+ }
1968
+ .ermis-message-list__actions-trigger:disabled {
1969
+ opacity: 0.4;
1970
+ cursor: not-allowed;
1971
+ }
1972
+ .ermis-message-list__actions-trigger:hover:not(:disabled) {
1973
+ background-color: var(--ermis-bg-hover);
1974
+ color: var(--ermis-text-primary);
1975
+ }
1976
+
1977
+ /* src/styles/_forward-modal.css */
1978
+ .ermis-forward-modal__preview {
1979
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
1980
+ border-bottom: 1px solid var(--ermis-border);
1981
+ background: var(--ermis-bg-primary);
1982
+ }
1983
+ .ermis-forward-modal__preview-sender {
1984
+ font-size: var(--ermis-font-size-xs);
1985
+ font-weight: 600;
1986
+ color: var(--ermis-accent);
1987
+ margin-bottom: 2px;
1988
+ }
1989
+ .ermis-forward-modal__preview-text {
1990
+ font-size: var(--ermis-font-size-sm);
1991
+ color: var(--ermis-text-secondary);
1992
+ line-height: 1.4;
1993
+ overflow: hidden;
1994
+ text-overflow: ellipsis;
1995
+ display: -webkit-box;
1996
+ -webkit-line-clamp: 2;
1997
+ line-clamp: 2;
1998
+ -webkit-box-orient: vertical;
1999
+ }
2000
+ .ermis-forward-modal__preview-attachments {
2001
+ font-size: var(--ermis-font-size-xs);
2002
+ color: var(--ermis-text-muted);
2003
+ margin-top: 4px;
2004
+ }
2005
+ .ermis-forward-modal__search-wrapper {
2006
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
2007
+ border-bottom: 1px solid var(--ermis-border);
2008
+ }
2009
+ .ermis-forward-modal__search {
2010
+ width: 100%;
2011
+ padding: 8px 12px;
2012
+ background: var(--ermis-bg-primary);
2013
+ border: 1px solid var(--ermis-border);
2014
+ border-radius: var(--ermis-radius-md);
2015
+ color: var(--ermis-text-primary);
2016
+ font-size: var(--ermis-font-size-sm);
2017
+ font-family: var(--ermis-font-family);
2018
+ outline: none;
2019
+ transition: border-color var(--ermis-transition);
2020
+ box-sizing: border-box;
2021
+ }
2022
+ .ermis-forward-modal__search:focus {
2023
+ border-color: var(--ermis-accent);
2024
+ }
2025
+ .ermis-forward-modal__search::placeholder {
2026
+ color: var(--ermis-text-muted);
2027
+ }
2028
+ .ermis-forward-modal__channel-list {
2029
+ flex: 1;
2030
+ overflow-y: auto;
2031
+ min-height: 160px;
2032
+ max-height: 320px;
2033
+ padding: var(--ermis-spacing-xs) 0;
2034
+ }
2035
+ .ermis-forward-modal__channel-item {
2036
+ display: flex;
2037
+ align-items: center;
2038
+ gap: var(--ermis-spacing-sm);
2039
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
2040
+ cursor: pointer;
2041
+ transition: background var(--ermis-transition);
2042
+ }
2043
+ .ermis-forward-modal__channel-item:hover {
2044
+ background: var(--ermis-bg-hover);
2045
+ }
2046
+ .ermis-forward-modal__channel-item--selected {
2047
+ background: var(--ermis-bg-active);
2048
+ }
2049
+ .ermis-forward-modal__channel-name {
2050
+ flex: 1;
2051
+ font-size: var(--ermis-font-size-sm);
2052
+ color: var(--ermis-text-primary);
2053
+ overflow: hidden;
2054
+ text-overflow: ellipsis;
2055
+ white-space: nowrap;
2056
+ }
2057
+ .ermis-forward-modal__checkbox {
2058
+ width: 20px;
2059
+ height: 20px;
2060
+ border: 2px solid var(--ermis-text-muted);
2061
+ border-radius: var(--ermis-radius-sm);
2062
+ display: flex;
2063
+ align-items: center;
2064
+ justify-content: center;
2065
+ transition: all var(--ermis-transition);
2066
+ flex-shrink: 0;
2067
+ }
2068
+ .ermis-forward-modal__checkbox--checked {
2069
+ background: var(--ermis-accent);
2070
+ border-color: var(--ermis-accent);
2071
+ color: #fff;
2072
+ }
2073
+ .ermis-forward-modal__loading,
2074
+ .ermis-forward-modal__empty {
2075
+ padding: var(--ermis-spacing-lg);
2076
+ text-align: center;
2077
+ color: var(--ermis-text-muted);
2078
+ font-size: var(--ermis-font-size-sm);
2079
+ }
2080
+ .ermis-message-list__forwarded-indicator {
2081
+ display: block;
2082
+ font-size: var(--ermis-font-size-xs);
2083
+ color: var(--ermis-text-muted);
2084
+ font-style: italic;
2085
+ margin-bottom: 2px;
2086
+ width: 100%;
2087
+ }
2088
+ .ermis-forward-modal__results {
2089
+ padding: var(--ermis-spacing-sm) var(--ermis-spacing-lg);
2090
+ border-top: 1px solid var(--ermis-border);
2091
+ }
2092
+ .ermis-forward-modal__results-success {
2093
+ font-size: var(--ermis-font-size-sm);
2094
+ color: #34d399;
2095
+ }
2096
+ .ermis-forward-modal__results-failed {
2097
+ font-size: var(--ermis-font-size-sm);
2098
+ color: #f87171;
2099
+ margin-top: 2px;
2100
+ }
2101
+ .ermis-forward-modal__btn {
2102
+ padding: 8px 16px;
2103
+ border: none;
2104
+ border-radius: var(--ermis-radius-md);
2105
+ font-size: var(--ermis-font-size-sm);
2106
+ font-weight: 500;
2107
+ cursor: pointer;
2108
+ transition: all var(--ermis-transition);
2109
+ font-family: var(--ermis-font-family);
2110
+ }
2111
+ .ermis-forward-modal__btn--cancel {
2112
+ background: transparent;
2113
+ color: var(--ermis-text-secondary);
2114
+ }
2115
+ .ermis-forward-modal__btn--cancel:hover {
2116
+ background: var(--ermis-bg-hover);
2117
+ color: var(--ermis-text-primary);
2118
+ }
2119
+ .ermis-forward-modal__btn--send {
2120
+ background: var(--ermis-accent);
2121
+ color: #fff;
2122
+ }
2123
+ .ermis-forward-modal__btn--send:hover:not(:disabled) {
2124
+ background: var(--ermis-accent-hover);
2125
+ }
2126
+ .ermis-forward-modal__btn--send:disabled {
2127
+ opacity: 0.5;
2128
+ cursor: not-allowed;
2129
+ }
2130
+
2131
+ /* src/styles/_typing-indicator.css */
2132
+ .ermis-typing-indicator {
2133
+ display: flex;
2134
+ align-items: center;
2135
+ gap: 6px;
2136
+ padding: 0 16px;
2137
+ height: 24px;
2138
+ font-size: 12px;
2139
+ color: var(--ermis-color-text-secondary, #8e8e93);
2140
+ overflow: hidden;
2141
+ }
2142
+ .ermis-typing-indicator__dots {
2143
+ display: flex;
2144
+ align-items: center;
2145
+ gap: 3px;
2146
+ }
2147
+ .ermis-typing-indicator__dot {
2148
+ width: 5px;
2149
+ height: 5px;
2150
+ border-radius: 50%;
2151
+ background-color: var(--ermis-color-text-secondary, #8e8e93);
2152
+ animation: ermis-typing-bounce 1.4s infinite ease-in-out both;
2153
+ }
2154
+ .ermis-typing-indicator__dot:nth-child(1) {
2155
+ animation-delay: -0.32s;
2156
+ }
2157
+ .ermis-typing-indicator__dot:nth-child(2) {
2158
+ animation-delay: -0.16s;
2159
+ }
2160
+ .ermis-typing-indicator__dot:nth-child(3) {
2161
+ animation-delay: 0s;
2162
+ }
2163
+ @keyframes ermis-typing-bounce {
2164
+ 0%, 80%, 100% {
2165
+ transform: scale(0.6);
2166
+ opacity: 0.4;
2167
+ }
2168
+ 40% {
2169
+ transform: scale(1);
2170
+ opacity: 1;
2171
+ }
2172
+ }
2173
+ .ermis-typing-indicator__text {
2174
+ font-style: italic;
2175
+ white-space: nowrap;
2176
+ overflow: hidden;
2177
+ text-overflow: ellipsis;
2178
+ }
2179
+
2180
+ /* src/styles/_message-reactions.css */
2181
+ .ermis-message-reactions {
2182
+ display: flex;
2183
+ flex-wrap: wrap;
2184
+ gap: 4px;
2185
+ margin-bottom: 2px;
2186
+ }
2187
+ .ermis-message-reactions__item {
2188
+ position: relative;
2189
+ display: inline-flex;
2190
+ align-items: center;
2191
+ gap: 4px;
2192
+ padding: 2px 6px;
2193
+ border-radius: 12px;
2194
+ background-color: var(--ermis-surface);
2195
+ border: 1px solid var(--ermis-border);
2196
+ font-size: 11px;
2197
+ line-height: 1.2;
2198
+ color: var(--ermis-text-secondary);
2199
+ cursor: pointer;
2200
+ transition: all 0.2s ease;
2201
+ user-select: none;
2202
+ }
2203
+ .ermis-message-reactions__item::after {
2204
+ content: attr(data-tooltip);
2205
+ position: absolute;
2206
+ bottom: 100%;
2207
+ left: 50%;
2208
+ transform: translateX(-50%);
2209
+ background-color: rgba(0, 0, 0, 0.75);
2210
+ color: #fff;
2211
+ padding: 4px 8px;
2212
+ border-radius: 6px;
2213
+ font-size: 11px;
2214
+ white-space: pre;
2215
+ text-align: left;
2216
+ pointer-events: none;
2217
+ opacity: 0;
2218
+ visibility: hidden;
2219
+ transition: opacity 0.2s, visibility 0.2s;
2220
+ margin-bottom: 6px;
2221
+ z-index: 100;
2222
+ }
2223
+ .ermis-message-reactions__item:hover::after {
2224
+ opacity: 1;
2225
+ visibility: visible;
2226
+ }
2227
+ .ermis-message-reactions__item--active {
2228
+ background-color: var(--ermis-bg-active, rgba(99, 102, 241, 0.12));
2229
+ border-color: var(--ermis-accent);
2230
+ color: var(--ermis-accent);
2231
+ }
2232
+ .ermis-message-reactions__emoji {
2233
+ font-size: 14px;
2234
+ }
2235
+ .ermis-message-reactions__count {
2236
+ font-weight: 600;
2237
+ }
2238
+
2239
+ /* src/styles/_message-quick-reactions.css */
2240
+ .ermis-message-quick-reactions {
2241
+ position: absolute;
2242
+ bottom: calc(100% - 10px);
2243
+ display: flex;
2244
+ align-items: center;
2245
+ gap: 2px;
2246
+ background-color: var(--ermis-bg-primary);
2247
+ border: 1px solid var(--ermis-border);
2248
+ padding: 4px;
2249
+ border-radius: 20px;
2250
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
2251
+ opacity: 0;
2252
+ visibility: hidden;
2253
+ pointer-events: none;
2254
+ transform: translateY(8px);
2255
+ transition: opacity 0.2s ease, transform 0.2s ease;
2256
+ z-index: 20;
2257
+ }
2258
+ .ermis-message-quick-reactions {
2259
+ left: 0;
2260
+ }
2261
+ .ermis-message-quick-reactions--own {
2262
+ left: auto;
2263
+ right: 0;
2264
+ }
2265
+ .ermis-message-list__bubble-wrapper:hover .ermis-message-quick-reactions {
2266
+ opacity: 1;
2267
+ visibility: visible;
2268
+ pointer-events: auto;
2269
+ transform: translateY(0);
2270
+ }
2271
+ .ermis-message-quick-reactions__btn {
2272
+ display: flex;
2273
+ align-items: center;
2274
+ justify-content: center;
2275
+ background: none;
2276
+ border: none;
2277
+ font-size: 18px;
2278
+ line-height: 1;
2279
+ width: 32px;
2280
+ height: 32px;
2281
+ border-radius: 50%;
2282
+ cursor: pointer;
2283
+ transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.15s;
2284
+ }
2285
+ .ermis-message-quick-reactions__btn:hover {
2286
+ transform: scale(1.2);
2287
+ background-color: var(--ermis-bg-hover);
2288
+ }
2289
+ .ermis-message-quick-reactions__btn--active {
2290
+ background-color: var(--ermis-bg-active, rgba(99, 102, 241, 0.12));
2291
+ }
2292
+
2293
+ /* src/styles/_channel-info.css */
2294
+ .ermis-channel-info {
2295
+ position: relative;
2296
+ display: flex;
2297
+ flex-direction: column;
2298
+ width: 100%;
2299
+ height: 100%;
2300
+ background: var(--ermis-bg-primary);
2301
+ border-left: 1px solid var(--ermis-border-base);
2302
+ overflow-y: auto;
2303
+ overflow-x: hidden;
2304
+ box-sizing: border-box;
2305
+ }
2306
+ .ermis-channel-info__header {
2307
+ display: flex;
2308
+ align-items: center;
2309
+ justify-content: space-between;
2310
+ padding: 16px;
2311
+ border-bottom: 1px solid var(--ermis-border-base);
2312
+ }
2313
+ .ermis-channel-info__title {
2314
+ margin: 0;
2315
+ font-size: 16px;
2316
+ font-weight: 600;
2317
+ color: var(--ermis-text-primary);
2318
+ }
2319
+ .ermis-channel-info__close {
2320
+ background: transparent;
2321
+ border: none;
2322
+ cursor: pointer;
2323
+ color: var(--ermis-text-secondary);
2324
+ display: flex;
2325
+ align-items: center;
2326
+ justify-content: center;
2327
+ padding: 4px;
2328
+ border-radius: 4px;
2329
+ transition: background-color 0.2s ease, color 0.2s ease;
2330
+ }
2331
+ .ermis-channel-info__close:hover {
2332
+ background-color: var(--ermis-bg-hover);
2333
+ color: var(--ermis-text-primary);
2334
+ }
2335
+ .ermis-channel-info__cover {
2336
+ display: flex;
2337
+ flex-direction: column;
2338
+ align-items: center;
2339
+ padding: 16px;
2340
+ text-align: center;
2341
+ }
2342
+ .ermis-channel-info__avatar {
2343
+ margin-bottom: 16px;
2344
+ }
2345
+ .ermis-channel-info__name {
2346
+ margin: 0 0 8px 0;
2347
+ font-size: 18px;
2348
+ font-weight: 600;
2349
+ color: var(--ermis-text-primary);
2350
+ }
2351
+ .ermis-channel-info__name-row {
2352
+ display: flex;
2353
+ align-items: center;
2354
+ gap: 8px;
2355
+ justify-content: center;
2356
+ }
2357
+ .ermis-channel-info__name-row .ermis-channel-info__name {
2358
+ margin: 0;
2359
+ }
2360
+ .ermis-channel-info__cover-edit-btn {
2361
+ background: transparent;
2362
+ border: none;
2363
+ cursor: pointer;
2364
+ color: var(--ermis-text-tertiary);
2365
+ display: flex;
2366
+ align-items: center;
2367
+ justify-content: center;
2368
+ padding: 4px;
2369
+ border-radius: 4px;
2370
+ transition: color 0.2s ease, background-color 0.2s ease;
2371
+ flex-shrink: 0;
2372
+ }
2373
+ .ermis-channel-info__cover-edit-btn:hover {
2374
+ color: var(--ermis-color-primary, #005fff);
2375
+ background-color: var(--ermis-bg-hover);
2376
+ }
2377
+ .ermis-channel-info__description {
2378
+ margin: 0;
2379
+ font-size: 14px;
2380
+ color: var(--ermis-text-secondary);
2381
+ line-height: 1.4;
2382
+ }
2383
+ .ermis-channel-info__type-badge {
2384
+ display: inline-flex;
2385
+ align-items: center;
2386
+ gap: 4px;
2387
+ padding: 2px 10px;
2388
+ border-radius: 12px;
2389
+ font-size: 12px;
2390
+ font-weight: 500;
2391
+ line-height: 1;
2392
+ margin: 4px 0;
2393
+ }
2394
+ .ermis-channel-info__type-badge--public {
2395
+ background: rgba(40, 167, 69, 0.1);
2396
+ color: #28a745;
2397
+ }
2398
+ .ermis-channel-info__type-badge--private {
2399
+ background: rgba(108, 117, 125, 0.1);
2400
+ color: var(--ermis-text-secondary);
2401
+ }
2402
+ .ermis-channel-info__actions {
2403
+ display: flex;
2404
+ justify-content: space-evenly;
2405
+ padding: 16px;
2406
+ border-bottom: 1px solid var(--ermis-border-base);
2407
+ }
2408
+ .ermis-channel-info__action-btn {
2409
+ background: transparent;
2410
+ border: none;
2411
+ display: flex;
2412
+ flex-direction: column;
2413
+ align-items: center;
2414
+ gap: 6px;
2415
+ cursor: pointer;
2416
+ color: var(--ermis-text-secondary);
2417
+ font-size: 13px;
2418
+ font-weight: 500;
2419
+ transition: color 0.2s ease;
2420
+ }
2421
+ .ermis-channel-info__action-btn--danger {
2422
+ color: var(--ermis-color-danger, #dc3545);
2423
+ }
2424
+ .ermis-channel-info__action-btn:hover {
2425
+ color: var(--ermis-text-primary);
2426
+ }
2427
+ .ermis-channel-info__action-btn--danger:hover {
2428
+ color: var(--ermis-color-danger, #dc3545);
2429
+ opacity: 0.8;
2430
+ }
2431
+ .ermis-channel-info__action-btn:disabled {
2432
+ opacity: 0.35;
2433
+ cursor: not-allowed;
2434
+ pointer-events: none;
2435
+ }
2436
+ .ermis-channel-info__action-icon {
2437
+ width: 36px;
2438
+ height: 36px;
2439
+ border-radius: 50%;
2440
+ background-color: var(--ermis-bg-secondary);
2441
+ display: flex;
2442
+ align-items: center;
2443
+ justify-content: center;
2444
+ transition: background-color 0.2s ease;
2445
+ }
2446
+ .ermis-channel-info__action-icon svg {
2447
+ width: 18px;
2448
+ height: 18px;
2449
+ }
2450
+ .ermis-channel-info__action-btn:hover .ermis-channel-info__action-icon {
2451
+ background-color: var(--ermis-bg-hover);
2452
+ }
2453
+ .ermis-channel-info__action-btn--danger .ermis-channel-info__action-icon {
2454
+ background-color: rgba(220, 53, 69, 0.08);
2455
+ }
2456
+ .ermis-channel-info__action-btn--danger:hover .ermis-channel-info__action-icon {
2457
+ background-color: rgba(220, 53, 69, 0.15);
2458
+ }
2459
+ .ermis-channel-info__section {
2460
+ padding: 16px 0;
2461
+ }
2462
+ .ermis-channel-info__section-header {
2463
+ padding: 0 16px 8px;
2464
+ }
2465
+ .ermis-channel-info__section-header h4 {
2466
+ margin: 0;
2467
+ font-size: 12px;
2468
+ text-transform: uppercase;
2469
+ font-weight: 600;
2470
+ color: var(--ermis-text-tertiary);
2471
+ letter-spacing: 0.5px;
2472
+ }
2473
+ .ermis-channel-info__members {
2474
+ padding: 0 8px;
2475
+ }
2476
+ .ermis-channel-info__members-tab {
2477
+ display: flex;
2478
+ flex-direction: column;
2479
+ height: 100%;
2480
+ }
2481
+ .ermis-channel-info__member-item {
2482
+ display: flex;
2483
+ align-items: center;
2484
+ gap: 12px;
2485
+ padding: 10px 16px;
2486
+ cursor: pointer;
2487
+ transition: background-color 0.2s ease;
2488
+ min-height: 56px;
2489
+ border-bottom: 1px solid var(--ermis-border-base);
2490
+ box-sizing: border-box;
2491
+ }
2492
+ .ermis-channel-info__member-item:hover {
2493
+ background-color: var(--ermis-bg-hover);
2494
+ }
2495
+ .ermis-channel-info__member-info {
2496
+ display: flex;
2497
+ flex-direction: column;
2498
+ min-width: 0;
2499
+ gap: 2px;
2500
+ flex: 1;
2501
+ }
2502
+ .ermis-channel-info__member-name {
2503
+ font-size: 14px;
2504
+ color: var(--ermis-text-primary);
2505
+ font-weight: 500;
2506
+ white-space: nowrap;
2507
+ overflow: hidden;
2508
+ text-overflow: ellipsis;
2509
+ }
2510
+ .ermis-channel-info__member-role {
2511
+ font-size: 10px;
2512
+ text-transform: uppercase;
2513
+ letter-spacing: 0.5px;
2514
+ width: fit-content;
2515
+ }
2516
+ .ermis-channel-info__member-role--owner {
2517
+ color: var(--ermis-color-danger, #ff4d4f);
2518
+ }
2519
+ .ermis-channel-info__member-role--moder {
2520
+ color: var(--ermis-color-primary, #005fff);
2521
+ }
2522
+ .ermis-channel-info__member-role--member {
2523
+ color: var(--ermis-text-tertiary);
2524
+ }
2525
+ .ermis-channel-info__member-role--pending {
2526
+ color: var(--ermis-color-warning, #faad14);
2527
+ }
2528
+ .ermis-channel-info__add-member-wrap {
2529
+ padding: 12px 16px;
2530
+ border-bottom: 1px solid var(--ermis-border-base);
2531
+ flex-shrink: 0;
2532
+ }
2533
+ .ermis-channel-info__add-member-btn {
2534
+ width: 100%;
2535
+ padding: 10px;
2536
+ background: transparent;
2537
+ border: 1px dashed var(--ermis-border-base);
2538
+ border-radius: 8px;
2539
+ color: var(--ermis-color-primary, #005fff);
2540
+ display: flex;
2541
+ align-items: center;
2542
+ justify-content: center;
2543
+ gap: 8px;
2544
+ cursor: pointer;
2545
+ font-weight: 500;
2546
+ transition: background-color 0.2s ease, border-color 0.2s ease;
2547
+ }
2548
+ .ermis-channel-info__add-member-btn:hover {
2549
+ background-color: var(--ermis-bg-hover);
2550
+ border-color: var(--ermis-color-primary, #005fff);
2551
+ }
2552
+ .ermis-channel-info__media-section {
2553
+ flex: 1;
2554
+ display: flex;
2555
+ flex-direction: column;
2556
+ padding: 0;
2557
+ border-top: 1px solid var(--ermis-border-base);
2558
+ }
2559
+ .ermis-channel-info__media-tabs {
2560
+ display: flex;
2561
+ border-bottom: 1px solid var(--ermis-border-base);
2562
+ padding: 0 4px;
2563
+ gap: 0;
2564
+ flex-shrink: 0;
2565
+ }
2566
+ .ermis-channel-info__media-tab {
2567
+ flex: 1;
2568
+ display: flex;
2569
+ align-items: center;
2570
+ justify-content: center;
2571
+ gap: 3px;
2572
+ padding: 5px 8px;
2573
+ background: transparent;
2574
+ border: none;
2575
+ border-bottom: 2px solid transparent;
2576
+ cursor: pointer;
2577
+ color: var(--ermis-text-tertiary);
2578
+ font-size: 13px;
2579
+ font-weight: 500;
2580
+ transition: color 0.2s ease, border-color 0.2s ease;
2581
+ white-space: nowrap;
2582
+ }
2583
+ .ermis-channel-info__media-tab:hover {
2584
+ color: var(--ermis-text-secondary);
2585
+ }
2586
+ .ermis-channel-info__media-tab--active {
2587
+ color: var(--ermis-color-primary, #005fff);
2588
+ border-bottom-color: var(--ermis-color-primary, #005fff);
2589
+ }
2590
+ .ermis-channel-info__media-tab-label {
2591
+ font-size: 13px;
2592
+ }
2593
+ .ermis-channel-info__media-tab-count {
2594
+ font-size: 11px;
2595
+ font-weight: 600;
2596
+ min-width: 18px;
2597
+ height: 18px;
2598
+ display: inline-flex;
2599
+ align-items: center;
2600
+ justify-content: center;
2601
+ border-radius: 9px;
2602
+ background: var(--ermis-bg-secondary);
2603
+ color: var(--ermis-text-secondary);
2604
+ padding: 0 5px;
2605
+ }
2606
+ .ermis-channel-info__media-tab--active .ermis-channel-info__media-tab-count {
2607
+ background: var(--ermis-color-primary, #005fff);
2608
+ color: #fff;
2609
+ }
2610
+ .ermis-channel-info__media-content {
2611
+ flex: 1;
2612
+ overflow: hidden;
2613
+ min-height: 120px;
2614
+ }
2615
+ .ermis-channel-info__media-grid-row {
2616
+ display: flex;
2617
+ gap: 2px;
2618
+ padding: 0 0 2px 0;
2619
+ }
2620
+ .ermis-channel-info__media-item {
2621
+ flex: 1;
2622
+ aspect-ratio: 1;
2623
+ background-color: var(--ermis-bg-secondary);
2624
+ overflow: hidden;
2625
+ cursor: pointer;
2626
+ position: relative;
2627
+ }
2628
+ .ermis-channel-info__media-item--empty {
2629
+ cursor: default;
2630
+ background: transparent;
2631
+ }
2632
+ .ermis-channel-info__media-item img,
2633
+ .ermis-channel-info__media-item video {
2634
+ width: 100%;
2635
+ height: 100%;
2636
+ object-fit: cover;
2637
+ }
2638
+ .ermis-channel-info__media-item:not(.ermis-channel-info__media-item--empty):hover img,
2639
+ .ermis-channel-info__media-item:not(.ermis-channel-info__media-item--empty):hover video {
2640
+ transform: scale(1.05);
2641
+ }
2642
+ .ermis-channel-info__media-shimmer {
2643
+ position: absolute;
2644
+ inset: 0;
2645
+ background:
2646
+ linear-gradient(
2647
+ 90deg,
2648
+ var(--ermis-bg-secondary) 25%,
2649
+ var(--ermis-bg-hover, rgba(255, 255, 255, 0.06)) 50%,
2650
+ var(--ermis-bg-secondary) 75%);
2651
+ background-size: 200% 100%;
2652
+ animation: ermis-ci-shimmer 1.4s ease-in-out infinite;
2653
+ z-index: 1;
2654
+ }
2655
+ @keyframes ermis-ci-shimmer {
2656
+ 0% {
2657
+ background-position: 200% 0;
2658
+ }
2659
+ 100% {
2660
+ background-position: -200% 0;
2661
+ }
2662
+ }
2663
+ .ermis-channel-info__media-video-thumb {
2664
+ width: 100%;
2665
+ height: 100%;
2666
+ position: relative;
2667
+ }
2668
+ .ermis-channel-info__media-video-thumb img,
2669
+ .ermis-channel-info__media-video-thumb video {
2670
+ width: 100%;
2671
+ height: 100%;
2672
+ object-fit: cover;
2673
+ }
2674
+ .ermis-channel-info__media-play-icon {
2675
+ position: absolute;
2676
+ top: 50%;
2677
+ left: 50%;
2678
+ transform: translate(-50%, -50%);
2679
+ width: 32px;
2680
+ height: 32px;
2681
+ border-radius: 50%;
2682
+ background: rgba(0, 0, 0, 0.6);
2683
+ display: flex;
2684
+ align-items: center;
2685
+ justify-content: center;
2686
+ color: #fff;
2687
+ pointer-events: none;
2688
+ }
2689
+ .ermis-channel-info__media-play-icon svg {
2690
+ margin-left: 2px;
2691
+ }
2692
+ .ermis-channel-info__links-list {
2693
+ display: flex;
2694
+ flex-direction: column;
2695
+ }
2696
+ .ermis-channel-info__link-item {
2697
+ display: flex;
2698
+ align-items: center;
2699
+ gap: 12px;
2700
+ padding: 10px 16px;
2701
+ text-decoration: none;
2702
+ color: inherit;
2703
+ transition: background-color 0.15s ease;
2704
+ border-bottom: 1px solid var(--ermis-border-base);
2705
+ }
2706
+ .ermis-channel-info__link-item:hover {
2707
+ background-color: var(--ermis-bg-hover);
2708
+ }
2709
+ .ermis-channel-info__link-icon {
2710
+ width: 36px;
2711
+ height: 36px;
2712
+ min-width: 36px;
2713
+ border-radius: 8px;
2714
+ background: var(--ermis-bg-secondary);
2715
+ display: flex;
2716
+ align-items: center;
2717
+ justify-content: center;
2718
+ color: var(--ermis-text-tertiary);
2719
+ overflow: hidden;
2720
+ }
2721
+ .ermis-channel-info__link-preview-img {
2722
+ width: 100%;
2723
+ height: 100%;
2724
+ object-fit: cover;
2725
+ }
2726
+ .ermis-channel-info__link-content {
2727
+ flex: 1;
2728
+ min-width: 0;
2729
+ display: flex;
2730
+ flex-direction: column;
2731
+ gap: 2px;
2732
+ }
2733
+ .ermis-channel-info__link-title {
2734
+ font-size: 13px;
2735
+ font-weight: 500;
2736
+ color: var(--ermis-text-primary);
2737
+ white-space: nowrap;
2738
+ overflow: hidden;
2739
+ text-overflow: ellipsis;
2740
+ }
2741
+ .ermis-channel-info__link-domain {
2742
+ font-size: 12px;
2743
+ color: var(--ermis-text-tertiary);
2744
+ white-space: nowrap;
2745
+ overflow: hidden;
2746
+ text-overflow: ellipsis;
2747
+ }
2748
+ .ermis-channel-info__link-date {
2749
+ font-size: 11px;
2750
+ color: var(--ermis-text-tertiary);
2751
+ white-space: nowrap;
2752
+ flex-shrink: 0;
2753
+ }
2754
+ .ermis-channel-info__files-list {
2755
+ display: flex;
2756
+ flex-direction: column;
2757
+ }
2758
+ .ermis-channel-info__file-item {
2759
+ display: flex;
2760
+ align-items: center;
2761
+ gap: 12px;
2762
+ padding: 10px 16px;
2763
+ cursor: pointer;
2764
+ transition: background-color 0.15s ease;
2765
+ border-bottom: 1px solid var(--ermis-border-base);
2766
+ }
2767
+ .ermis-channel-info__file-item:hover {
2768
+ background-color: var(--ermis-bg-hover);
2769
+ }
2770
+ .ermis-channel-info__file-icon {
2771
+ width: 40px;
2772
+ height: 40px;
2773
+ min-width: 40px;
2774
+ border-radius: 8px;
2775
+ background: var(--ermis-bg-secondary);
2776
+ display: flex;
2777
+ flex-direction: column;
2778
+ align-items: center;
2779
+ justify-content: center;
2780
+ color: var(--ermis-text-tertiary);
2781
+ gap: 1px;
2782
+ }
2783
+ .ermis-channel-info__file-ext {
2784
+ font-size: 8px;
2785
+ font-weight: 700;
2786
+ text-transform: uppercase;
2787
+ letter-spacing: 0.3px;
2788
+ color: var(--ermis-text-tertiary);
2789
+ line-height: 1;
2790
+ }
2791
+ .ermis-channel-info__file-info {
2792
+ flex: 1;
2793
+ min-width: 0;
2794
+ display: flex;
2795
+ flex-direction: column;
2796
+ gap: 2px;
2797
+ }
2798
+ .ermis-channel-info__file-name {
2799
+ font-size: 13px;
2800
+ font-weight: 500;
2801
+ color: var(--ermis-text-primary);
2802
+ white-space: nowrap;
2803
+ overflow: hidden;
2804
+ text-overflow: ellipsis;
2805
+ }
2806
+ .ermis-channel-info__file-meta {
2807
+ display: flex;
2808
+ align-items: center;
2809
+ gap: 4px;
2810
+ font-size: 12px;
2811
+ color: var(--ermis-text-tertiary);
2812
+ }
2813
+ .ermis-channel-info__file-meta-dot {
2814
+ color: var(--ermis-text-tertiary);
2815
+ }
2816
+ .ermis-channel-info__file-download {
2817
+ background: transparent;
2818
+ border: none;
2819
+ cursor: pointer;
2820
+ color: var(--ermis-text-tertiary);
2821
+ padding: 6px;
2822
+ border-radius: 6px;
2823
+ display: flex;
2824
+ align-items: center;
2825
+ justify-content: center;
2826
+ transition: background-color 0.15s ease, color 0.15s ease;
2827
+ flex-shrink: 0;
2828
+ }
2829
+ .ermis-channel-info__file-download:hover {
2830
+ background-color: var(--ermis-bg-secondary);
2831
+ color: var(--ermis-color-primary, #005fff);
2832
+ }
2833
+ .ermis-channel-info__media-empty {
2834
+ display: flex;
2835
+ flex-direction: column;
2836
+ align-items: center;
2837
+ justify-content: center;
2838
+ padding: 40px 16px;
2839
+ gap: 12px;
2840
+ color: var(--ermis-text-tertiary);
2841
+ font-size: 13px;
2842
+ }
2843
+ .ermis-channel-info__media-empty-icon {
2844
+ width: 56px;
2845
+ height: 56px;
2846
+ border-radius: 50%;
2847
+ background: var(--ermis-bg-secondary);
2848
+ display: flex;
2849
+ align-items: center;
2850
+ justify-content: center;
2851
+ color: var(--ermis-text-tertiary);
2852
+ }
2853
+ .ermis-channel-info__media-loading {
2854
+ display: flex;
2855
+ align-items: center;
2856
+ justify-content: center;
2857
+ padding: 40px 16px;
2858
+ }
2859
+ .ermis-channel-info__media-spinner {
2860
+ width: 24px;
2861
+ height: 24px;
2862
+ border: 2px solid var(--ermis-border-base);
2863
+ border-top-color: var(--ermis-color-primary, #005fff);
2864
+ border-radius: 50%;
2865
+ animation: ermis-spin 0.7s linear infinite;
2866
+ }
2867
+ @keyframes ermis-spin {
2868
+ to {
2869
+ transform: rotate(360deg);
2870
+ }
2871
+ }
2872
+ .ermis-channel-info__edit-body {
2873
+ display: flex;
2874
+ flex-direction: column;
2875
+ gap: 16px;
2876
+ }
2877
+ .ermis-channel-info__edit-avatar-section {
2878
+ display: flex;
2879
+ flex-direction: column;
2880
+ align-items: center;
2881
+ gap: 8px;
2882
+ }
2883
+ .ermis-channel-info__edit-avatar-wrap {
2884
+ position: relative;
2885
+ cursor: pointer;
2886
+ border-radius: 50%;
2887
+ overflow: hidden;
2888
+ }
2889
+ .ermis-channel-info__edit-avatar-overlay {
2890
+ position: absolute;
2891
+ inset: 0;
2892
+ background: rgba(0, 0, 0, 0.45);
2893
+ display: flex;
2894
+ align-items: center;
2895
+ justify-content: center;
2896
+ color: #fff;
2897
+ opacity: 0;
2898
+ transition: opacity 0.2s ease;
2899
+ border-radius: 50%;
2900
+ }
2901
+ .ermis-channel-info__edit-avatar-wrap:hover .ermis-channel-info__edit-avatar-overlay {
2902
+ opacity: 1;
2903
+ }
2904
+ .ermis-channel-info__edit-avatar-btn {
2905
+ background: transparent;
2906
+ border: none;
2907
+ cursor: pointer;
2908
+ color: var(--ermis-color-primary, #005fff);
2909
+ font-size: 13px;
2910
+ font-weight: 500;
2911
+ padding: 4px 8px;
2912
+ border-radius: 4px;
2913
+ transition: background-color 0.2s ease;
2914
+ }
2915
+ .ermis-channel-info__edit-avatar-btn:hover {
2916
+ background-color: var(--ermis-bg-hover);
2917
+ }
2918
+ .ermis-channel-info__edit-avatar-btn:disabled {
2919
+ opacity: 0.5;
2920
+ cursor: not-allowed;
2921
+ }
2922
+ .ermis-channel-info__edit-field {
2923
+ display: flex;
2924
+ flex-direction: column;
2925
+ gap: 6px;
2926
+ }
2927
+ .ermis-channel-info__edit-field--toggle {
2928
+ flex-direction: row;
2929
+ align-items: center;
2930
+ justify-content: space-between;
2931
+ padding: 8px 0;
2932
+ }
2933
+ .ermis-channel-info__edit-label {
2934
+ font-size: 13px;
2935
+ font-weight: 500;
2936
+ color: var(--ermis-text-secondary);
2937
+ }
2938
+ .ermis-channel-info__edit-input {
2939
+ background: var(--ermis-bg-secondary);
2940
+ border: 1px solid var(--ermis-border-base);
2941
+ border-radius: 8px;
2942
+ padding: 10px 12px;
2943
+ font-size: 14px;
2944
+ color: var(--ermis-text-primary);
2945
+ outline: none;
2946
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
2947
+ font-family: inherit;
2948
+ }
2949
+ .ermis-channel-info__edit-input:focus {
2950
+ border-color: var(--ermis-color-primary, #005fff);
2951
+ box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.15);
2952
+ }
2953
+ .ermis-channel-info__edit-input:disabled {
2954
+ opacity: 0.6;
2955
+ cursor: not-allowed;
2956
+ }
2957
+ .ermis-channel-info__edit-textarea {
2958
+ background: var(--ermis-bg-secondary);
2959
+ border: 1px solid var(--ermis-border-base);
2960
+ border-radius: 8px;
2961
+ padding: 10px 12px;
2962
+ font-size: 14px;
2963
+ color: var(--ermis-text-primary);
2964
+ outline: none;
2965
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
2966
+ resize: vertical;
2967
+ min-height: 60px;
2968
+ font-family: inherit;
2969
+ }
2970
+ .ermis-channel-info__edit-textarea:focus {
2971
+ border-color: var(--ermis-color-primary, #005fff);
2972
+ box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.15);
2973
+ }
2974
+ .ermis-channel-info__edit-textarea:disabled {
2975
+ opacity: 0.6;
2976
+ cursor: not-allowed;
2977
+ }
2978
+ .ermis-channel-info__edit-toggle {
2979
+ position: relative;
2980
+ width: 44px;
2981
+ height: 24px;
2982
+ background: var(--ermis-bg-secondary);
2983
+ border: 1px solid var(--ermis-border-base);
2984
+ border-radius: 12px;
2985
+ cursor: pointer;
2986
+ transition: background-color 0.2s ease, border-color 0.2s ease;
2987
+ padding: 0;
2988
+ flex-shrink: 0;
2989
+ }
2990
+ .ermis-channel-info__edit-toggle--on {
2991
+ background: var(--ermis-color-primary, #005fff);
2992
+ border-color: var(--ermis-color-primary, #005fff);
2993
+ }
2994
+ .ermis-channel-info__edit-toggle-thumb {
2995
+ position: absolute;
2996
+ top: 2px;
2997
+ left: 2px;
2998
+ width: 18px;
2999
+ height: 18px;
3000
+ background: #fff;
3001
+ border-radius: 50%;
3002
+ transition: transform 0.2s ease;
3003
+ pointer-events: none;
3004
+ }
3005
+ .ermis-channel-info__edit-toggle--on .ermis-channel-info__edit-toggle-thumb {
3006
+ transform: translateX(20px);
3007
+ }
3008
+ .ermis-channel-info__edit-toggle:disabled {
3009
+ opacity: 0.5;
3010
+ cursor: not-allowed;
3011
+ }
3012
+ .ermis-channel-info__edit-error {
3013
+ display: flex;
3014
+ align-items: center;
3015
+ gap: 8px;
3016
+ padding: 10px 12px;
3017
+ background: rgba(220, 53, 69, 0.08);
3018
+ border: 1px solid rgba(220, 53, 69, 0.2);
3019
+ border-radius: 8px;
3020
+ color: var(--ermis-color-danger, #dc3545);
3021
+ font-size: 13px;
3022
+ }
3023
+ .ermis-channel-info__edit-footer-buttons {
3024
+ display: flex;
3025
+ align-items: center;
3026
+ justify-content: flex-end;
3027
+ gap: 8px;
3028
+ width: 100%;
3029
+ }
3030
+ .ermis-channel-info__edit-btn {
3031
+ padding: 8px 20px;
3032
+ border-radius: 8px;
3033
+ font-size: 14px;
3034
+ font-weight: 500;
3035
+ cursor: pointer;
3036
+ transition:
3037
+ background-color 0.2s ease,
3038
+ color 0.2s ease,
3039
+ opacity 0.2s ease;
3040
+ border: none;
3041
+ font-family: inherit;
3042
+ }
3043
+ .ermis-channel-info__edit-btn:disabled {
3044
+ opacity: 0.6;
3045
+ cursor: not-allowed;
3046
+ }
3047
+ .ermis-channel-info__edit-btn--cancel {
3048
+ background: transparent;
3049
+ color: var(--ermis-text-secondary);
3050
+ border: 1px solid var(--ermis-border-base);
3051
+ }
3052
+ .ermis-channel-info__edit-btn--cancel:hover:not(:disabled) {
3053
+ background-color: var(--ermis-bg-hover);
3054
+ color: var(--ermis-text-primary);
3055
+ }
3056
+ .ermis-channel-info__edit-btn--save {
3057
+ background: var(--ermis-color-primary, #005fff);
3058
+ color: #fff;
3059
+ }
3060
+ .ermis-channel-info__edit-btn--save:hover:not(:disabled) {
3061
+ opacity: 0.9;
3062
+ }
3063
+ .ermis-channel-info__banned-banner {
3064
+ display: flex;
3065
+ flex-direction: column;
3066
+ align-items: center;
3067
+ justify-content: center;
3068
+ gap: 12px;
3069
+ padding: 40px 16px;
3070
+ text-align: center;
3071
+ flex: 1;
3072
+ }
3073
+ .ermis-channel-info__banned-banner-icon {
3074
+ color: #ef4444;
3075
+ opacity: 0.5;
3076
+ }
3077
+ .ermis-channel-info__banned-banner-text {
3078
+ font-size: 14px;
3079
+ font-weight: 500;
3080
+ color: var(--ermis-text-secondary);
3081
+ }
3082
+
3083
+ /* src/styles/_add-member-modal.css */
3084
+ .ermis-modal-search {
3085
+ position: relative;
3086
+ display: flex;
3087
+ align-items: center;
3088
+ margin-bottom: 16px;
3089
+ }
3090
+ .ermis-modal-search svg {
3091
+ position: absolute;
3092
+ left: 12px;
3093
+ color: var(--ermis-text-secondary, #666666);
3094
+ pointer-events: none;
3095
+ }
3096
+ .ermis-modal-search input {
3097
+ width: 100%;
3098
+ padding: 10px 12px 10px 36px;
3099
+ border-radius: 8px;
3100
+ border: 1px solid var(--ermis-border-color, #cccccc);
3101
+ background-color: var(--ermis-bg-base, #f9f9f9);
3102
+ color: var(--ermis-text-primary, #000000);
3103
+ font-size: 14px;
3104
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
3105
+ outline: none;
3106
+ }
3107
+ [data-theme=dark] .ermis-modal-search input {
3108
+ background-color: var(--ermis-bg-base, #121212);
3109
+ border: 1px solid var(--ermis-border-color, #444444);
3110
+ color: var(--ermis-text-primary, #ffffff);
3111
+ }
3112
+ .ermis-modal-search input:focus {
3113
+ border-color: var(--ermis-primary-color, #005fff);
3114
+ box-shadow: 0 0 0 2px rgba(0, 95, 255, 0.2);
3115
+ }
3116
+ .ermis-modal-user-list {
3117
+ display: flex;
3118
+ flex-direction: column;
3119
+ overflow-y: auto;
3120
+ gap: 4px;
3121
+ max-height: 400px;
3122
+ padding-right: 4px;
3123
+ }
3124
+ .ermis-modal-user-list::-webkit-scrollbar {
3125
+ width: 6px;
3126
+ }
3127
+ .ermis-modal-user-list::-webkit-scrollbar-track {
3128
+ background: transparent;
3129
+ }
3130
+ .ermis-modal-user-list::-webkit-scrollbar-thumb {
3131
+ background-color: var(--ermis-border-color, #cccccc);
3132
+ border-radius: 3px;
3133
+ }
3134
+ [data-theme=dark] .ermis-modal-user-list::-webkit-scrollbar-thumb {
3135
+ background-color: var(--ermis-border-color, #444444);
3136
+ }
3137
+ .ermis-modal-loading,
3138
+ .ermis-modal-empty {
3139
+ text-align: center;
3140
+ color: var(--ermis-text-secondary, #666666);
3141
+ padding: 32px 0;
3142
+ font-size: 14px;
3143
+ }
3144
+ .ermis-modal-user-item {
3145
+ display: flex;
3146
+ align-items: center;
3147
+ padding: 8px 12px;
3148
+ border-radius: 8px;
3149
+ transition: background-color 0.15s ease;
3150
+ }
3151
+ .ermis-modal-user-item:hover {
3152
+ background-color: var(--ermis-bg-hover, #f0f0f0);
3153
+ }
3154
+ [data-theme=dark] .ermis-modal-user-item:hover {
3155
+ background-color: var(--ermis-bg-hover, #2a2a2a);
3156
+ }
3157
+ .ermis-modal-user-info {
3158
+ margin-left: 12px;
3159
+ flex: 1;
3160
+ display: flex;
3161
+ flex-direction: column;
3162
+ }
3163
+ .ermis-modal-user-name {
3164
+ font-size: 14px;
3165
+ font-weight: 500;
3166
+ color: var(--ermis-text-primary, #000000);
3167
+ }
3168
+ [data-theme=dark] .ermis-modal-user-name {
3169
+ color: var(--ermis-text-primary, #ffffff);
3170
+ }
3171
+ .ermis-modal-add-btn {
3172
+ background-color: var(--ermis-primary-color, #005fff);
3173
+ color: #ffffff;
3174
+ border: none;
3175
+ border-radius: 6px;
3176
+ padding: 6px 14px;
3177
+ font-size: 13px;
3178
+ font-weight: 500;
3179
+ cursor: pointer;
3180
+ transition: background-color 0.15s ease, opacity 0.15s ease;
3181
+ }
3182
+ .ermis-modal-add-btn:hover:not(:disabled) {
3183
+ background-color: var(--ermis-primary-hover, #004ecc);
3184
+ }
3185
+ .ermis-modal-add-btn:disabled {
3186
+ opacity: 0.6;
3187
+ cursor: not-allowed;
3188
+ }
3189
+
3190
+ /* src/styles/_search-panel.css */
3191
+ .ermis-search-panel__search-box {
3192
+ padding: 12px 16px;
3193
+ border-bottom: 1px solid var(--ermis-border, rgba(0, 0, 0, 0.08));
3194
+ flex-shrink: 0;
3195
+ }
3196
+ .ermis-search-panel__input-wrap {
3197
+ display: flex;
3198
+ align-items: center;
3199
+ gap: 8px;
3200
+ padding: 6px 12px;
3201
+ background: var(--ermis-bg-secondary, #f5f5f5);
3202
+ border-radius: 20px;
3203
+ transition: background 0.15s;
3204
+ }
3205
+ .ermis-search-panel__input-wrap:focus-within {
3206
+ background: var(--ermis-bg-hover, #ebebeb);
3207
+ }
3208
+ .ermis-search-panel__input-icon {
3209
+ flex-shrink: 0;
3210
+ color: var(--ermis-text-secondary);
3211
+ }
3212
+ .ermis-search-panel__input {
3213
+ flex: 1;
3214
+ border: none;
3215
+ background: none;
3216
+ outline: none;
3217
+ font-size: 14px;
3218
+ color: var(--ermis-text-primary);
3219
+ line-height: 1.4;
3220
+ }
3221
+ .ermis-search-panel__input::placeholder {
3222
+ color: var(--ermis-text-tertiary, #999);
3223
+ }
3224
+ .ermis-search-panel__input-clear {
3225
+ display: flex;
3226
+ align-items: center;
3227
+ justify-content: center;
3228
+ width: 20px;
3229
+ height: 20px;
3230
+ border: none;
3231
+ background: var(--ermis-text-tertiary, #999);
3232
+ color: #fff;
3233
+ border-radius: 50%;
3234
+ cursor: pointer;
3235
+ flex-shrink: 0;
3236
+ padding: 0;
3237
+ transition: background 0.15s;
3238
+ }
3239
+ .ermis-search-panel__input-clear:hover {
3240
+ background: var(--ermis-text-secondary);
3241
+ }
3242
+ .ermis-search-panel__results {
3243
+ flex: 1;
3244
+ overflow-y: auto;
3245
+ overflow-x: hidden;
3246
+ }
3247
+ .ermis-search-panel__idle {
3248
+ display: flex;
3249
+ flex-direction: column;
3250
+ align-items: center;
3251
+ justify-content: center;
3252
+ gap: 12px;
3253
+ padding: 48px 16px;
3254
+ color: var(--ermis-text-tertiary, #999);
3255
+ text-align: center;
3256
+ font-size: 14px;
3257
+ }
3258
+ .ermis-search-panel__loading {
3259
+ display: flex;
3260
+ flex-direction: column;
3261
+ align-items: center;
3262
+ justify-content: center;
3263
+ gap: 12px;
3264
+ padding: 48px 16px;
3265
+ color: var(--ermis-text-secondary);
3266
+ font-size: 14px;
3267
+ }
3268
+ .ermis-search-panel__spinner {
3269
+ width: 24px;
3270
+ height: 24px;
3271
+ border: 2.5px solid var(--ermis-border, rgba(0, 0, 0, 0.08));
3272
+ border-top-color: var(--ermis-color-primary, #005fff);
3273
+ border-radius: 50%;
3274
+ animation: ermis-spin 0.7s linear infinite;
3275
+ }
3276
+ .ermis-search-panel__spinner--small {
3277
+ width: 18px;
3278
+ height: 18px;
3279
+ border-width: 2px;
3280
+ }
3281
+ @keyframes ermis-spin {
3282
+ to {
3283
+ transform: rotate(360deg);
3284
+ }
3285
+ }
3286
+ .ermis-search-panel__empty {
3287
+ display: flex;
3288
+ align-items: center;
3289
+ justify-content: center;
3290
+ padding: 48px 16px;
3291
+ color: var(--ermis-text-tertiary, #999);
3292
+ font-size: 14px;
3293
+ }
3294
+ .ermis-search-panel__result-item {
3295
+ display: flex;
3296
+ align-items: flex-start;
3297
+ gap: 12px;
3298
+ width: 100%;
3299
+ padding: 12px 16px;
3300
+ border: none;
3301
+ background: none;
3302
+ cursor: pointer;
3303
+ text-align: left;
3304
+ transition: background 0.12s;
3305
+ border-bottom: 1px solid var(--ermis-border, rgba(0, 0, 0, 0.04));
3306
+ }
3307
+ .ermis-search-panel__result-item:hover {
3308
+ background: var(--ermis-bg-hover, rgba(0, 0, 0, 0.04));
3309
+ }
3310
+ .ermis-search-panel__result-item:active {
3311
+ background: var(--ermis-bg-active, rgba(0, 0, 0, 0.07));
3312
+ }
3313
+ .ermis-search-panel__result-body {
3314
+ flex: 1;
3315
+ min-width: 0;
3316
+ display: flex;
3317
+ flex-direction: column;
3318
+ gap: 2px;
3319
+ }
3320
+ .ermis-search-panel__result-meta {
3321
+ display: flex;
3322
+ align-items: center;
3323
+ justify-content: space-between;
3324
+ gap: 8px;
3325
+ }
3326
+ .ermis-search-panel__result-name {
3327
+ font-size: 13px;
3328
+ font-weight: 600;
3329
+ color: var(--ermis-text-primary);
3330
+ white-space: nowrap;
3331
+ overflow: hidden;
3332
+ text-overflow: ellipsis;
3333
+ }
3334
+ .ermis-search-panel__result-time {
3335
+ font-size: 11px;
3336
+ color: var(--ermis-text-tertiary, #999);
3337
+ white-space: nowrap;
3338
+ flex-shrink: 0;
3339
+ }
3340
+ .ermis-search-panel__result-text {
3341
+ margin: 0;
3342
+ font-size: 13px;
3343
+ color: var(--ermis-text-secondary);
3344
+ line-height: 1.4;
3345
+ display: -webkit-box;
3346
+ -webkit-line-clamp: 2;
3347
+ line-clamp: 2;
3348
+ -webkit-box-orient: vertical;
3349
+ overflow: hidden;
3350
+ word-break: break-word;
3351
+ }
3352
+ .ermis-search-panel__highlight {
3353
+ background: rgba(255, 210, 0, 0.35);
3354
+ color: var(--ermis-text-primary);
3355
+ border-radius: 2px;
3356
+ padding: 0 1px;
3357
+ }
3358
+ .ermis-search-panel__loading-more {
3359
+ display: flex;
3360
+ align-items: center;
3361
+ justify-content: center;
3362
+ padding: 12px;
3363
+ }
3364
+ .ermis-search-panel__end-indicator {
3365
+ display: flex;
3366
+ align-items: center;
3367
+ justify-content: center;
3368
+ padding: 24px 16px;
3369
+ color: var(--ermis-text-tertiary, #999);
3370
+ font-size: 13px;
3371
+ text-align: center;
3372
+ }
3373
+
3374
+ /* src/styles/index.css */
3375
+ /*# sourceMappingURL=index.css.map */