stream-chat-react 14.0.0-beta.3 → 14.0.0-beta.4

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 (144) hide show
  1. package/dist/cjs/WithAudioPlayback.236d404c.js +4670 -0
  2. package/dist/cjs/WithAudioPlayback.236d404c.js.map +1 -0
  3. package/dist/cjs/emojis.js +2 -2
  4. package/dist/cjs/emojis.js.map +1 -1
  5. package/dist/cjs/index.js +191 -264
  6. package/dist/cjs/index.js.map +1 -1
  7. package/dist/css/emoji-replacement.css +34 -0
  8. package/dist/css/emoji-replacement.css.map +1 -0
  9. package/dist/css/index.css +9 -25
  10. package/dist/css/index.css.map +1 -1
  11. package/dist/es/WithAudioPlayback.89700cb5.mjs +4654 -0
  12. package/dist/es/WithAudioPlayback.89700cb5.mjs.map +1 -0
  13. package/dist/es/emojis.mjs +2 -2
  14. package/dist/es/emojis.mjs.map +1 -1
  15. package/dist/es/index.mjs +230 -303
  16. package/dist/es/index.mjs.map +1 -1
  17. package/dist/types/components/Form/TextInput.d.ts +2 -2
  18. package/dist/types/components/Form/TextInput.d.ts.map +1 -1
  19. package/dist/types/components/Icons/IconGiphy.d.ts.map +1 -1
  20. package/dist/types/components/Icons/icons.d.ts +56 -340
  21. package/dist/types/components/Icons/icons.d.ts.map +1 -1
  22. package/dist/types/components/Loading/LoadingIndicator.d.ts +2 -2
  23. package/dist/types/components/Loading/LoadingIndicator.d.ts.map +1 -1
  24. package/dist/types/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.d.ts.map +1 -1
  25. package/dist/types/components/Poll/PollCreationDialog/OptionFieldSet.d.ts.map +1 -1
  26. package/package.json +3 -4
  27. package/dist/assets/icons/stream-chat-icons.eot +0 -0
  28. package/dist/assets/icons/stream-chat-icons.svg +0 -50
  29. package/dist/assets/icons/stream-chat-icons.ttf +0 -0
  30. package/dist/assets/icons/stream-chat-icons.woff +0 -0
  31. package/dist/assets/icons/stream-chat-icons.woff2 +0 -0
  32. package/dist/cjs/WithAudioPlayback.4a84360f.js +0 -4727
  33. package/dist/cjs/WithAudioPlayback.4a84360f.js.map +0 -1
  34. package/dist/css/v2/emoji-mart.css +0 -1
  35. package/dist/css/v2/emoji-replacement.css +0 -1
  36. package/dist/css/v2/index.css +0 -1
  37. package/dist/css/v2/index.layout.css +0 -1
  38. package/dist/es/WithAudioPlayback.a3d5a2fc.mjs +0 -4711
  39. package/dist/es/WithAudioPlayback.a3d5a2fc.mjs.map +0 -1
  40. package/dist/scss/v2/AIStateIndicator/AIStateIndicator-layout.scss +0 -3
  41. package/dist/scss/v2/AIStateIndicator/AIStateIndicator-theme.scss +0 -7
  42. package/dist/scss/v2/AttachmentList/AttachmentList-layout.scss +0 -701
  43. package/dist/scss/v2/AttachmentList/AttachmentList-theme.scss +0 -605
  44. package/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout.scss +0 -141
  45. package/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-theme.scss +0 -190
  46. package/dist/scss/v2/AudioRecorder/AudioRecorder-layout.scss +0 -139
  47. package/dist/scss/v2/AudioRecorder/AudioRecorder-theme.scss +0 -61
  48. package/dist/scss/v2/Autocomplete/Autocomplete-layout.scss +0 -94
  49. package/dist/scss/v2/Autocomplete/Autocomplete-theme.scss +0 -220
  50. package/dist/scss/v2/Avatar/Avatar-layout.scss +0 -137
  51. package/dist/scss/v2/Avatar/Avatar-theme.scss +0 -64
  52. package/dist/scss/v2/BaseImage/BaseImage-layout.scss +0 -21
  53. package/dist/scss/v2/BaseImage/BaseImage-theme.scss +0 -35
  54. package/dist/scss/v2/BaseImage/index.scss +0 -2
  55. package/dist/scss/v2/Channel/Channel-layout.scss +0 -141
  56. package/dist/scss/v2/Channel/Channel-theme.scss +0 -100
  57. package/dist/scss/v2/ChannelHeader/ChannelHeader-layout.scss +0 -27
  58. package/dist/scss/v2/ChannelHeader/ChannelHeader-theme.scss +0 -43
  59. package/dist/scss/v2/ChannelList/ChannelList-layout.scss +0 -65
  60. package/dist/scss/v2/ChannelList/ChannelList-theme.scss +0 -89
  61. package/dist/scss/v2/ChannelPreview/ChannelPreview-layout.scss +0 -126
  62. package/dist/scss/v2/ChannelPreview/ChannelPreview-theme.scss +0 -148
  63. package/dist/scss/v2/ChannelSearch/ChannelSearch-layout.scss +0 -122
  64. package/dist/scss/v2/ChannelSearch/ChannelSearch-theme.scss +0 -238
  65. package/dist/scss/v2/ChatView/ChatView-layout.scss +0 -43
  66. package/dist/scss/v2/ChatView/ChatView-theme.scss +0 -32
  67. package/dist/scss/v2/Dialog/Dialog-layout.scss +0 -70
  68. package/dist/scss/v2/Dialog/Dialog-theme.scss +0 -103
  69. package/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-layout.scss +0 -5
  70. package/dist/scss/v2/DragAndDropContainer/DragAndDropContainer-theme.scss +0 -47
  71. package/dist/scss/v2/DropzoneContainer/DropzoneContainer-layout.scss +0 -14
  72. package/dist/scss/v2/DropzoneContainer/DropzoneContainer-theme.scss +0 -17
  73. package/dist/scss/v2/EditMessageForm/EditMessageForm-layout.scss +0 -51
  74. package/dist/scss/v2/EditMessageForm/EditMessageForm-theme.scss +0 -50
  75. package/dist/scss/v2/Form/Form-layout.scss +0 -49
  76. package/dist/scss/v2/Form/Form-theme.scss +0 -82
  77. package/dist/scss/v2/Icon/Icon-layout.scss +0 -98
  78. package/dist/scss/v2/Icon/Icon-theme.scss +0 -17
  79. package/dist/scss/v2/ImageCarousel/ImageCarousel-layout.scss +0 -51
  80. package/dist/scss/v2/ImageCarousel/ImageCarousel-theme.scss +0 -30
  81. package/dist/scss/v2/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss +0 -4
  82. package/dist/scss/v2/LinkPreview/LinkPreview-layout.scss +0 -67
  83. package/dist/scss/v2/LinkPreview/LinkPreview-theme.scss +0 -32
  84. package/dist/scss/v2/LinkPreview/index.scss +0 -2
  85. package/dist/scss/v2/LoadingIndicator/LoadingIndicator-layout.scss +0 -64
  86. package/dist/scss/v2/LoadingIndicator/LoadingIndicator-theme.scss +0 -14
  87. package/dist/scss/v2/Location/Location-layout.scss +0 -52
  88. package/dist/scss/v2/Location/Location-theme.scss +0 -32
  89. package/dist/scss/v2/Message/Message-layout.scss +0 -619
  90. package/dist/scss/v2/Message/Message-theme.scss +0 -483
  91. package/dist/scss/v2/MessageActionsBox/MessageActionsBox-layout.scss +0 -21
  92. package/dist/scss/v2/MessageActionsBox/MessageActionsBox-theme.scss +0 -85
  93. package/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-layout.scss +0 -19
  94. package/dist/scss/v2/MessageBouncePrompt/MessageBouncePrompt-theme.scss +0 -51
  95. package/dist/scss/v2/MessageInput/MessageInput-layout.scss +0 -268
  96. package/dist/scss/v2/MessageInput/MessageInput-theme.scss +0 -359
  97. package/dist/scss/v2/MessageList/MessageList-layout.scss +0 -65
  98. package/dist/scss/v2/MessageList/MessageList-theme.scss +0 -107
  99. package/dist/scss/v2/MessageList/VirtualizedMessageList-layout.scss +0 -57
  100. package/dist/scss/v2/MessageList/VirtualizedMessageList-theme.scss +0 -41
  101. package/dist/scss/v2/MessageReactions/MessageReactions-layout.scss +0 -143
  102. package/dist/scss/v2/MessageReactions/MessageReactions-theme.scss +0 -92
  103. package/dist/scss/v2/MessageReactions/MessageReactionsSelector-layout.scss +0 -86
  104. package/dist/scss/v2/MessageReactions/MessageReactionsSelector-theme.scss +0 -94
  105. package/dist/scss/v2/Modal/Modal-layout.scss +0 -74
  106. package/dist/scss/v2/Modal/Modal-theme.scss +0 -109
  107. package/dist/scss/v2/Notification/MessageNotification-layout.scss +0 -12
  108. package/dist/scss/v2/Notification/MessageNotification-theme.scss +0 -34
  109. package/dist/scss/v2/Notification/Notification-layout.scss +0 -7
  110. package/dist/scss/v2/Notification/Notification-theme.scss +0 -32
  111. package/dist/scss/v2/Notification/NotificationList-layout.scss +0 -11
  112. package/dist/scss/v2/Notification/NotificationList-theme.scss +0 -31
  113. package/dist/scss/v2/Poll/Poll-layout.scss +0 -493
  114. package/dist/scss/v2/Poll/Poll-theme.scss +0 -178
  115. package/dist/scss/v2/Search/Search-layout.scss +0 -148
  116. package/dist/scss/v2/Search/Search-theme.scss +0 -222
  117. package/dist/scss/v2/Thread/Thread-layout.scss +0 -65
  118. package/dist/scss/v2/Thread/Thread-theme.scss +0 -82
  119. package/dist/scss/v2/ThreadList/ThreadList-layout.scss +0 -152
  120. package/dist/scss/v2/ThreadList/ThreadList-theme.scss +0 -75
  121. package/dist/scss/v2/Tooltip/Tooltip-layout.scss +0 -10
  122. package/dist/scss/v2/Tooltip/Tooltip-theme.scss +0 -36
  123. package/dist/scss/v2/TypingIndicator/TypingIndicator-layout.scss +0 -31
  124. package/dist/scss/v2/TypingIndicator/TypingIndicator-theme.scss +0 -68
  125. package/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-layout.scss +0 -49
  126. package/dist/scss/v2/UnreadCountBadge/UnreadCountBadge-theme.scss +0 -11
  127. package/dist/scss/v2/_base.scss +0 -65
  128. package/dist/scss/v2/_emoji-replacement.scss +0 -45
  129. package/dist/scss/v2/_global-layout-variables.scss +0 -65
  130. package/dist/scss/v2/_global-theme-variables.scss +0 -173
  131. package/dist/scss/v2/_icons.scss +0 -36
  132. package/dist/scss/v2/_palette-variables.scss +0 -55
  133. package/dist/scss/v2/_utils.scss +0 -212
  134. package/dist/scss/v2/_variables.scss +0 -2
  135. package/dist/scss/v2/common/CTAButton/CTAButton-layout.scss +0 -4
  136. package/dist/scss/v2/common/CTAButton/CTAButton-theme.scss +0 -42
  137. package/dist/scss/v2/common/CircleFAButton/CircleFAButton-layout.scss +0 -14
  138. package/dist/scss/v2/common/CircleFAButton/CircleFAButton-theme.scss +0 -35
  139. package/dist/scss/v2/index.layout.scss +0 -49
  140. package/dist/scss/v2/index.scss +0 -50
  141. package/dist/scss/v2/vendor/emoji-mart.scss +0 -514
  142. package/dist/scss/v2/vendor/react-image-gallery.scss +0 -258
  143. /package/dist/{assets → css/assets}/EmojiOneColor.woff2 +0 -0
  144. /package/dist/{assets → css/assets}/NotoColorEmoji-flags.woff2 +0 -0
@@ -1,514 +0,0 @@
1
- .emoji-mart,
2
- .emoji-mart * {
3
- box-sizing: border-box;
4
- line-height: 1.15;
5
- }
6
-
7
- .emoji-mart {
8
- font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
9
- font-size: 16px;
10
- display: inline-block;
11
- color: #222427;
12
- border: 1px solid #d9d9d9;
13
- border-radius: 5px;
14
- background: #fff;
15
- }
16
-
17
- .emoji-mart .emoji-mart-emoji {
18
- padding: 6px;
19
- }
20
-
21
- .emoji-mart-bar {
22
- border: 0 solid #d9d9d9;
23
- }
24
-
25
- .emoji-mart-bar:first-child {
26
- border-bottom-width: 1px;
27
- border-top-left-radius: 5px;
28
- border-top-right-radius: 5px;
29
- }
30
-
31
- .emoji-mart-bar:last-child {
32
- border-top-width: 1px;
33
- border-bottom-left-radius: 5px;
34
- border-bottom-right-radius: 5px;
35
- }
36
-
37
- .emoji-mart-anchors {
38
- display: flex;
39
- flex-direction: row;
40
- justify-content: space-between;
41
- padding: 0 6px;
42
- line-height: 0;
43
- }
44
-
45
- .emoji-mart-anchor {
46
- position: relative;
47
- display: block;
48
- flex: 1 1 auto;
49
- color: #858585;
50
- text-align: center;
51
- padding: 12px 4px;
52
- overflow: hidden;
53
- transition: color 0.1s ease-out;
54
- margin: 0;
55
- box-shadow: none;
56
- background: none;
57
- border: none;
58
- }
59
-
60
- .emoji-mart-anchor:focus {
61
- outline: 0;
62
- }
63
-
64
- .emoji-mart-anchor:hover,
65
- .emoji-mart-anchor:focus,
66
- .emoji-mart-anchor-selected {
67
- color: #464646;
68
- }
69
-
70
- .emoji-mart-anchor-selected .emoji-mart-anchor-bar {
71
- bottom: 0;
72
- }
73
-
74
- .emoji-mart-anchor-bar {
75
- position: absolute;
76
- bottom: -3px;
77
- left: 0;
78
- width: 100%;
79
- height: 3px;
80
- background-color: #464646;
81
- }
82
-
83
- .emoji-mart-anchors i {
84
- display: inline-block;
85
- width: 100%;
86
- max-width: 22px;
87
- }
88
-
89
- .emoji-mart-anchors svg,
90
- .emoji-mart-anchors img {
91
- fill: currentColor;
92
- height: 18px;
93
- width: 18px;
94
- }
95
-
96
- .emoji-mart-scroll {
97
- overflow-y: scroll;
98
- overflow-x: hidden;
99
- height: 270px;
100
- padding: 0 6px 6px;
101
- will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
102
- }
103
-
104
- .emoji-mart-search {
105
- margin-top: 6px;
106
- padding: 0 6px;
107
- position: relative;
108
- }
109
-
110
- .emoji-mart-search input {
111
- font-size: 16px;
112
- display: block;
113
- width: 100%;
114
- padding: 5px 25px 6px 10px;
115
- border-radius: 5px;
116
- border: 1px solid #d9d9d9;
117
- outline: 0;
118
- }
119
-
120
- .emoji-mart-search input,
121
- .emoji-mart-search input::-webkit-search-decoration,
122
- .emoji-mart-search input::-webkit-search-cancel-button,
123
- .emoji-mart-search input::-webkit-search-results-button,
124
- .emoji-mart-search input::-webkit-search-results-decoration {
125
- /* remove webkit/blink styles for <input type="search">
126
- * via https://stackoverflow.com/a/9422689 */
127
- -webkit-appearance: none;
128
- }
129
-
130
- .emoji-mart-search-icon {
131
- position: absolute;
132
- top: 7px;
133
- right: 11px;
134
- z-index: 2;
135
- padding: 2px 5px 1px;
136
- border: none;
137
- background: none;
138
- }
139
-
140
- .emoji-mart-category .emoji-mart-emoji span {
141
- z-index: 1;
142
- position: relative;
143
- text-align: center;
144
- cursor: default;
145
- }
146
-
147
- .emoji-mart-category .emoji-mart-emoji:hover::before {
148
- z-index: 0;
149
- content: '';
150
- position: absolute;
151
- top: 0;
152
- left: 0;
153
- width: 100%;
154
- height: 100%;
155
- background-color: #f4f4f4;
156
- border-radius: 100%;
157
- }
158
-
159
- .emoji-mart-category-label {
160
- z-index: 2;
161
- position: relative;
162
- position: -webkit-sticky;
163
- position: sticky;
164
- top: 0;
165
- }
166
-
167
- .emoji-mart-category-label span {
168
- display: block;
169
- width: 100%;
170
- font-weight: 500;
171
- padding: 5px 6px;
172
- background-color: #fff;
173
- background-color: rgba(255, 255, 255, 0.95);
174
- }
175
-
176
- .emoji-mart-category-list {
177
- margin: 0;
178
- padding: 0;
179
- }
180
-
181
- .emoji-mart-category-list li {
182
- list-style: none;
183
- margin: 0;
184
- padding: 0;
185
- display: inline-block;
186
- }
187
-
188
- .emoji-mart-emoji {
189
- position: relative;
190
- display: inline-block;
191
- font-size: 0;
192
- margin: 0;
193
- padding: 0;
194
- border: none;
195
- background: none;
196
- box-shadow: none;
197
- }
198
-
199
- .emoji-mart-emoji-native {
200
- font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji',
201
- 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji';
202
- }
203
-
204
- .emoji-mart-no-results {
205
- font-size: 14px;
206
- text-align: center;
207
- padding-top: 70px;
208
- color: #858585;
209
- }
210
-
211
- .emoji-mart-no-results-img {
212
- display: block;
213
- margin-left: auto;
214
- margin-right: auto;
215
- width: 50%;
216
- }
217
-
218
- .emoji-mart-no-results .emoji-mart-category-label {
219
- display: none;
220
- }
221
-
222
- .emoji-mart-no-results .emoji-mart-no-results-label {
223
- margin-top: 0.2em;
224
- }
225
-
226
- .emoji-mart-no-results .emoji-mart-emoji:hover::before {
227
- content: none;
228
- }
229
-
230
- .emoji-mart-preview {
231
- position: relative;
232
- height: 70px;
233
- }
234
-
235
- .emoji-mart-preview-emoji,
236
- .emoji-mart-preview-data,
237
- .emoji-mart-preview-skins {
238
- position: absolute;
239
- top: 50%;
240
- transform: translateY(-50%);
241
- }
242
-
243
- .emoji-mart-preview-emoji {
244
- left: 12px;
245
- }
246
-
247
- .emoji-mart-preview-data {
248
- left: 68px;
249
- right: 12px;
250
- word-break: break-all;
251
- }
252
-
253
- .emoji-mart-preview-skins {
254
- right: 30px;
255
- text-align: right;
256
- }
257
-
258
- .emoji-mart-preview-skins.custom {
259
- right: 10px;
260
- text-align: right;
261
- }
262
-
263
- .emoji-mart-preview-name {
264
- font-size: 14px;
265
- }
266
-
267
- .emoji-mart-preview-shortname {
268
- font-size: 12px;
269
- color: #888;
270
- }
271
-
272
- .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
273
- .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
274
- .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
275
- margin-left: 0.5em;
276
- }
277
-
278
- .emoji-mart-preview-emoticon {
279
- font-size: 11px;
280
- color: #bbb;
281
- }
282
-
283
- .emoji-mart-title span {
284
- display: inline-block;
285
- vertical-align: middle;
286
- }
287
-
288
- .emoji-mart-title .emoji-mart-emoji {
289
- padding: 0;
290
- }
291
-
292
- .emoji-mart-title-label {
293
- color: #999a9c;
294
- font-size: 26px;
295
- font-weight: 300;
296
- }
297
-
298
- .emoji-mart-skin-swatches {
299
- font-size: 0;
300
- padding: 2px 0;
301
- border: 1px solid #d9d9d9;
302
- border-radius: 12px;
303
- background-color: #fff;
304
- }
305
-
306
- .emoji-mart-skin-swatches.custom {
307
- font-size: 0;
308
- border: none;
309
- background-color: #fff;
310
- }
311
-
312
- .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
313
- width: 16px;
314
- padding: 0 2px;
315
- }
316
-
317
- .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after {
318
- opacity: 0.75;
319
- }
320
-
321
- .emoji-mart-skin-swatch {
322
- display: inline-block;
323
- width: 0;
324
- vertical-align: middle;
325
- transition-property: width, padding;
326
- transition-duration: 0.125s;
327
- transition-timing-function: ease-out;
328
- }
329
-
330
- .emoji-mart-skin-swatch:nth-child(1) {
331
- transition-delay: 0s;
332
- }
333
-
334
- .emoji-mart-skin-swatch:nth-child(2) {
335
- transition-delay: 0.03s;
336
- }
337
-
338
- .emoji-mart-skin-swatch:nth-child(3) {
339
- transition-delay: 0.06s;
340
- }
341
-
342
- .emoji-mart-skin-swatch:nth-child(4) {
343
- transition-delay: 0.09s;
344
- }
345
-
346
- .emoji-mart-skin-swatch:nth-child(5) {
347
- transition-delay: 0.12s;
348
- }
349
-
350
- .emoji-mart-skin-swatch:nth-child(6) {
351
- transition-delay: 0.15s;
352
- }
353
-
354
- .emoji-mart-skin-swatch.selected {
355
- position: relative;
356
- width: 16px;
357
- padding: 0 2px;
358
- }
359
-
360
- .emoji-mart-skin-swatch.selected::after {
361
- content: '';
362
- position: absolute;
363
- top: 50%;
364
- left: 50%;
365
- width: 4px;
366
- height: 4px;
367
- margin: -2px 0 0 -2px;
368
- background-color: #fff;
369
- border-radius: 100%;
370
- pointer-events: none;
371
- opacity: 0;
372
- transition: opacity 0.2s ease-out;
373
- }
374
-
375
- .emoji-mart-skin-swatch.custom {
376
- display: inline-block;
377
- width: 0;
378
- height: 38px;
379
- overflow: hidden;
380
- vertical-align: middle;
381
- transition-property: width, height;
382
- transition-duration: 0.125s;
383
- transition-timing-function: ease-out;
384
- cursor: default;
385
- }
386
-
387
- .emoji-mart-skin-swatch.custom.selected {
388
- position: relative;
389
- width: 36px;
390
- height: 38px;
391
- padding: 0 2px 0 0;
392
- }
393
-
394
- .emoji-mart-skin-swatch.custom.selected::after {
395
- content: '';
396
- width: 0;
397
- height: 0;
398
- }
399
-
400
- .emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
401
- background-color: #f4f4f4;
402
- border-radius: 10%;
403
- }
404
-
405
- .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
406
- width: 36px;
407
- height: 38px;
408
- padding: 0 2px 0 0;
409
- }
410
-
411
- .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after {
412
- opacity: 0.75;
413
- }
414
-
415
- .emoji-mart-skin-text.opened {
416
- display: inline-block;
417
- vertical-align: middle;
418
- text-align: left;
419
- color: #888;
420
- font-size: 11px;
421
- padding: 5px 2px;
422
- width: 95px;
423
- height: 40px;
424
- border-radius: 10%;
425
- background-color: #fff;
426
- }
427
-
428
- .emoji-mart-skin {
429
- display: inline-block;
430
- width: 100%;
431
- padding-top: 100%;
432
- max-width: 12px;
433
- border-radius: 100%;
434
- }
435
-
436
- .emoji-mart-skin-tone-1 {
437
- background-color: #ffc93a;
438
- }
439
-
440
- .emoji-mart-skin-tone-2 {
441
- background-color: #fadcbc;
442
- }
443
-
444
- .emoji-mart-skin-tone-3 {
445
- background-color: #e0bb95;
446
- }
447
-
448
- .emoji-mart-skin-tone-4 {
449
- background-color: #bf8f68;
450
- }
451
-
452
- .emoji-mart-skin-tone-5 {
453
- background-color: #9b643d;
454
- }
455
-
456
- .emoji-mart-skin-tone-6 {
457
- background-color: #594539;
458
- }
459
-
460
- /* For screenreaders only, via https://stackoverflow.com/a/19758620 */
461
- .emoji-mart-sr-only {
462
- position: absolute;
463
- width: 1px;
464
- height: 1px;
465
- padding: 0;
466
- margin: -1px;
467
- overflow: hidden;
468
- clip: rect(0, 0, 0, 0);
469
- border: 0;
470
- }
471
-
472
- /*
473
- * Dark mode styles
474
- */
475
-
476
- .emoji-mart-dark {
477
- color: #fff;
478
- border-color: #555453;
479
- background-color: #222;
480
- }
481
-
482
- .emoji-mart-dark .emoji-mart-bar {
483
- border-color: #555453;
484
- }
485
-
486
- .emoji-mart-dark .emoji-mart-search input {
487
- color: #fff;
488
- border-color: #555453;
489
- background-color: #2f2f2f;
490
- }
491
-
492
- .emoji-mart-dark .emoji-mart-search-icon svg {
493
- fill: #fff;
494
- }
495
-
496
- .emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover::before {
497
- background-color: #444;
498
- }
499
-
500
- .emoji-mart-dark .emoji-mart-category-label span {
501
- background-color: #222;
502
- color: #fff;
503
- }
504
-
505
- .emoji-mart-dark .emoji-mart-skin-swatches {
506
- border-color: #555453;
507
- background-color: #222;
508
- }
509
-
510
- .emoji-mart-dark .emoji-mart-anchor:hover,
511
- .emoji-mart-dark .emoji-mart-anchor:focus,
512
- .emoji-mart-dark .emoji-mart-anchor-selected {
513
- color: #bfbfbf;
514
- }