@sendbird/uikit-react 3.0.0-beta.5 → 3.0.0-beta.6

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 (413) hide show
  1. package/App.js +31 -30
  2. package/App.js.map +1 -1
  3. package/Channel/components/ChannelHeader.js +15 -15
  4. package/Channel/components/ChannelUI.js +24 -23
  5. package/Channel/components/ChannelUI.js.map +1 -1
  6. package/Channel/components/FileViewer.js +14 -14
  7. package/Channel/components/FrozenNotification.js +5 -5
  8. package/Channel/components/Message.js +25 -20
  9. package/Channel/components/Message.js.map +1 -1
  10. package/Channel/components/MessageInput.js +27 -17
  11. package/Channel/components/MessageInput.js.map +1 -1
  12. package/Channel/components/MessageList.js +23 -22
  13. package/Channel/components/MessageList.js.map +1 -1
  14. package/Channel/components/RemoveMessageModal.js +17 -17
  15. package/Channel/components/SuggestedMentionList.js +94 -43
  16. package/Channel/components/SuggestedMentionList.js.map +1 -1
  17. package/Channel/components/TypingIndicator.js +14 -14
  18. package/Channel/components/UnreadCount.js +5 -5
  19. package/Channel/context.js +13 -13
  20. package/Channel.js +24 -23
  21. package/Channel.js.map +1 -1
  22. package/ChannelList/components/AddChannel.js +14 -14
  23. package/ChannelList/components/ChannelListHeader.js +7 -7
  24. package/ChannelList/components/ChannelListUI.js +26 -26
  25. package/ChannelList/components/ChannelPreview.js +21 -20
  26. package/ChannelList/components/ChannelPreview.js.map +1 -1
  27. package/ChannelList/components/ChannelPreviewAction.js +14 -14
  28. package/ChannelList/context.js +8 -8
  29. package/ChannelList.js +26 -26
  30. package/{ChannelListProvider-a7bdd63a.js → ChannelListProvider-737ee36f.js} +8 -8
  31. package/{ChannelListProvider-a7bdd63a.js.map → ChannelListProvider-737ee36f.js.map} +1 -1
  32. package/{ChannelProvider-923b58df.js → ChannelProvider-34834493.js} +13 -13
  33. package/ChannelProvider-34834493.js.map +1 -0
  34. package/ChannelSettings/components/AdminPanel.js +15 -15
  35. package/ChannelSettings/components/ChannelProfile.js +13 -13
  36. package/ChannelSettings/components/ChannelSettingsUI.js +18 -18
  37. package/ChannelSettings/components/EditDetailsModal.js +13 -13
  38. package/ChannelSettings/components/LeaveChannel.js +10 -10
  39. package/ChannelSettings/components/UserListItem.js +11 -11
  40. package/ChannelSettings/components/UserPanel.js +14 -14
  41. package/ChannelSettings/context.js +3 -3
  42. package/ChannelSettings.js +18 -18
  43. package/CreateChannel/components/CreateChannelUI.js +14 -14
  44. package/CreateChannel/components/InviteMembers.js +14 -14
  45. package/CreateChannel/components/SelectChannelType.js +10 -10
  46. package/CreateChannel/context.js +3 -3
  47. package/CreateChannel.js +14 -14
  48. package/{CreateChannelProvider-e491613f.js → CreateChannelProvider-3d3e4a7c.js} +1 -1
  49. package/{CreateChannelProvider-e491613f.js.map → CreateChannelProvider-3d3e4a7c.js.map} +1 -1
  50. package/EditUserProfile/components/EditUserProfileUI.js +13 -13
  51. package/EditUserProfile.js +13 -13
  52. package/{LocalizationContext-0e05ddca.js → LocalizationContext-5b0a9339.js} +3 -3
  53. package/{LocalizationContext-0e05ddca.js.map → LocalizationContext-5b0a9339.js.map} +1 -1
  54. package/{MemberList-ed7da941.js → MemberList-6e33a562.js} +5 -5
  55. package/{MemberList-ed7da941.js.map → MemberList-6e33a562.js.map} +1 -1
  56. package/MessageSearch/components/MessageSearchUI.js +11 -11
  57. package/MessageSearch/context.js +2 -2
  58. package/MessageSearch.js +11 -11
  59. package/OpenChannel/components/FrozenChannelNotification.js +5 -5
  60. package/OpenChannel/components/OpenChannelHeader.js +12 -12
  61. package/OpenChannel/components/OpenChannelInput.js +16 -16
  62. package/OpenChannel/components/OpenChannelMessage.js +21 -21
  63. package/OpenChannel/components/OpenChannelMessageList.js +23 -23
  64. package/OpenChannel/components/OpenChannelUI.js +23 -23
  65. package/OpenChannel/context.js +9 -9
  66. package/OpenChannel.js +23 -23
  67. package/{OpenChannelProvider-45a848a3.js → OpenChannelProvider-9ef0d52a.js} +7 -7
  68. package/{OpenChannelProvider-45a848a3.js.map → OpenChannelProvider-9ef0d52a.js.map} +1 -1
  69. package/OpenChannelSettings/components/EditDetailsModal.js +13 -13
  70. package/OpenChannelSettings/components/OpenChannelProfile.js +13 -13
  71. package/OpenChannelSettings/components/OpenChannelSettingsUI.js +17 -17
  72. package/OpenChannelSettings/components/OperatorUI.js +16 -16
  73. package/OpenChannelSettings/components/ParticipantUI.js +14 -14
  74. package/OpenChannelSettings/context.js +2 -2
  75. package/OpenChannelSettings.js +17 -17
  76. package/SendbirdProvider.js +25 -10
  77. package/SendbirdProvider.js.map +1 -1
  78. package/{UserProfileContext-90704c73.js → UserProfileContext-b6d89d0d.js} +1 -1
  79. package/{UserProfileContext-90704c73.js.map → UserProfileContext-b6d89d0d.js.map} +1 -1
  80. package/{_rollupPluginBabelHelpers-c7eeba03.js → _rollupPluginBabelHelpers-d10f91b9.js} +1 -1
  81. package/{_rollupPluginBabelHelpers-c7eeba03.js.map → _rollupPluginBabelHelpers-d10f91b9.js.map} +1 -1
  82. package/{actionTypes-e0f4e19c.js → actionTypes-17920f59.js} +1 -1
  83. package/{actionTypes-e0f4e19c.js.map → actionTypes-17920f59.js.map} +1 -1
  84. package/cjs/App.js +31 -30
  85. package/cjs/App.js.map +1 -1
  86. package/cjs/Channel/components/ChannelHeader.js +15 -15
  87. package/cjs/Channel/components/ChannelUI.js +24 -23
  88. package/cjs/Channel/components/ChannelUI.js.map +1 -1
  89. package/cjs/Channel/components/FileViewer.js +14 -14
  90. package/cjs/Channel/components/FrozenNotification.js +5 -5
  91. package/cjs/Channel/components/Message.js +25 -20
  92. package/cjs/Channel/components/Message.js.map +1 -1
  93. package/cjs/Channel/components/MessageInput.js +27 -17
  94. package/cjs/Channel/components/MessageInput.js.map +1 -1
  95. package/cjs/Channel/components/MessageList.js +23 -22
  96. package/cjs/Channel/components/MessageList.js.map +1 -1
  97. package/cjs/Channel/components/RemoveMessageModal.js +17 -17
  98. package/cjs/Channel/components/SuggestedMentionList.js +94 -43
  99. package/cjs/Channel/components/SuggestedMentionList.js.map +1 -1
  100. package/cjs/Channel/components/TypingIndicator.js +14 -14
  101. package/cjs/Channel/components/UnreadCount.js +5 -5
  102. package/cjs/Channel/context.js +13 -13
  103. package/cjs/Channel.js +24 -23
  104. package/cjs/Channel.js.map +1 -1
  105. package/cjs/ChannelList/components/AddChannel.js +14 -14
  106. package/cjs/ChannelList/components/ChannelListHeader.js +7 -7
  107. package/cjs/ChannelList/components/ChannelListUI.js +26 -26
  108. package/cjs/ChannelList/components/ChannelPreview.js +21 -20
  109. package/cjs/ChannelList/components/ChannelPreview.js.map +1 -1
  110. package/cjs/ChannelList/components/ChannelPreviewAction.js +14 -14
  111. package/cjs/ChannelList/context.js +8 -8
  112. package/cjs/ChannelList.js +26 -26
  113. package/cjs/{ChannelListProvider-01864e22.js → ChannelListProvider-f910e236.js} +8 -8
  114. package/cjs/{ChannelListProvider-01864e22.js.map → ChannelListProvider-f910e236.js.map} +1 -1
  115. package/cjs/{ChannelProvider-3ef2a755.js → ChannelProvider-86e2e68c.js} +13 -13
  116. package/cjs/ChannelProvider-86e2e68c.js.map +1 -0
  117. package/cjs/ChannelSettings/components/AdminPanel.js +15 -15
  118. package/cjs/ChannelSettings/components/ChannelProfile.js +13 -13
  119. package/cjs/ChannelSettings/components/ChannelSettingsUI.js +18 -18
  120. package/cjs/ChannelSettings/components/EditDetailsModal.js +13 -13
  121. package/cjs/ChannelSettings/components/LeaveChannel.js +10 -10
  122. package/cjs/ChannelSettings/components/UserListItem.js +11 -11
  123. package/cjs/ChannelSettings/components/UserPanel.js +14 -14
  124. package/cjs/ChannelSettings/context.js +3 -3
  125. package/cjs/ChannelSettings.js +18 -18
  126. package/cjs/CreateChannel/components/CreateChannelUI.js +14 -14
  127. package/cjs/CreateChannel/components/InviteMembers.js +14 -14
  128. package/cjs/CreateChannel/components/SelectChannelType.js +10 -10
  129. package/cjs/CreateChannel/context.js +3 -3
  130. package/cjs/CreateChannel.js +14 -14
  131. package/cjs/{CreateChannelProvider-0d01dcbf.js → CreateChannelProvider-07992a6d.js} +1 -1
  132. package/cjs/{CreateChannelProvider-0d01dcbf.js.map → CreateChannelProvider-07992a6d.js.map} +1 -1
  133. package/cjs/EditUserProfile/components/EditUserProfileUI.js +13 -13
  134. package/cjs/EditUserProfile.js +13 -13
  135. package/cjs/{LocalizationContext-4c0a4a70.js → LocalizationContext-79514649.js} +3 -3
  136. package/cjs/{LocalizationContext-4c0a4a70.js.map → LocalizationContext-79514649.js.map} +1 -1
  137. package/cjs/{MemberList-b917d2b8.js → MemberList-015c1075.js} +5 -5
  138. package/cjs/{MemberList-b917d2b8.js.map → MemberList-015c1075.js.map} +1 -1
  139. package/cjs/MessageSearch/components/MessageSearchUI.js +11 -11
  140. package/cjs/MessageSearch/context.js +2 -2
  141. package/cjs/MessageSearch.js +11 -11
  142. package/cjs/OpenChannel/components/FrozenChannelNotification.js +5 -5
  143. package/cjs/OpenChannel/components/OpenChannelHeader.js +12 -12
  144. package/cjs/OpenChannel/components/OpenChannelInput.js +16 -16
  145. package/cjs/OpenChannel/components/OpenChannelMessage.js +21 -21
  146. package/cjs/OpenChannel/components/OpenChannelMessageList.js +23 -23
  147. package/cjs/OpenChannel/components/OpenChannelUI.js +23 -23
  148. package/cjs/OpenChannel/context.js +9 -9
  149. package/cjs/OpenChannel.js +23 -23
  150. package/cjs/{OpenChannelProvider-862a55ec.js → OpenChannelProvider-445f214c.js} +7 -7
  151. package/cjs/{OpenChannelProvider-862a55ec.js.map → OpenChannelProvider-445f214c.js.map} +1 -1
  152. package/cjs/OpenChannelSettings/components/EditDetailsModal.js +13 -13
  153. package/cjs/OpenChannelSettings/components/OpenChannelProfile.js +13 -13
  154. package/cjs/OpenChannelSettings/components/OpenChannelSettingsUI.js +17 -17
  155. package/cjs/OpenChannelSettings/components/OperatorUI.js +16 -16
  156. package/cjs/OpenChannelSettings/components/ParticipantUI.js +14 -14
  157. package/cjs/OpenChannelSettings/context.js +2 -2
  158. package/cjs/OpenChannelSettings.js +17 -17
  159. package/cjs/SendbirdProvider.js +25 -10
  160. package/cjs/SendbirdProvider.js.map +1 -1
  161. package/cjs/{UserProfileContext-0081d7b2.js → UserProfileContext-12cfee31.js} +1 -1
  162. package/cjs/{UserProfileContext-0081d7b2.js.map → UserProfileContext-12cfee31.js.map} +1 -1
  163. package/cjs/{_rollupPluginBabelHelpers-08d1d0ec.js → _rollupPluginBabelHelpers-f802e0e8.js} +1 -1
  164. package/cjs/{_rollupPluginBabelHelpers-08d1d0ec.js.map → _rollupPluginBabelHelpers-f802e0e8.js.map} +1 -1
  165. package/cjs/{actionTypes-03bdd863.js → actionTypes-93161807.js} +1 -1
  166. package/cjs/{actionTypes-03bdd863.js.map → actionTypes-93161807.js.map} +1 -1
  167. package/cjs/{color-37edcf95.js → color-c53ac792.js} +1 -1
  168. package/cjs/{color-37edcf95.js.map → color-c53ac792.js.map} +1 -1
  169. package/cjs/{compareIds-1cb14940.js → compareIds-37e8380c.js} +1 -1
  170. package/cjs/{compareIds-1cb14940.js.map → compareIds-37e8380c.js.map} +1 -1
  171. package/cjs/{const-21636adb.js → const-3024c719.js} +1 -1
  172. package/cjs/{const-21636adb.js.map → const-3024c719.js.map} +1 -1
  173. package/cjs/{const-64185108.js → const-489c46b6.js} +1 -1
  174. package/cjs/{const-64185108.js.map → const-489c46b6.js.map} +1 -1
  175. package/cjs/{context-8f183eb3.js → context-961d5b11.js} +2 -2
  176. package/cjs/{context-8f183eb3.js.map → context-961d5b11.js.map} +1 -1
  177. package/{index.css → cjs/dist/index.css} +74 -56
  178. package/cjs/dist/index.css.map +1 -0
  179. package/cjs/{index-23c51d89.js → index-07623c8b.js} +2 -2
  180. package/cjs/{index-23c51d89.js.map → index-07623c8b.js.map} +1 -1
  181. package/cjs/{index-4e4d7494.js → index-0b2e2c2a.js} +1 -1
  182. package/cjs/{index-4e4d7494.js.map → index-0b2e2c2a.js.map} +1 -1
  183. package/cjs/{index-630f8d1b.js → index-2180f74f.js} +3 -3
  184. package/cjs/{index-630f8d1b.js.map → index-2180f74f.js.map} +1 -1
  185. package/cjs/{index-94e8cf13.js → index-4e8b61f7.js} +10 -9
  186. package/cjs/index-4e8b61f7.js.map +1 -0
  187. package/cjs/{index-7532e1ca.js → index-5615eab4.js} +4 -4
  188. package/cjs/{index-7532e1ca.js.map → index-5615eab4.js.map} +1 -1
  189. package/cjs/{index-8479199c.js → index-5eaebc66.js} +6 -6
  190. package/cjs/{index-8479199c.js.map → index-5eaebc66.js.map} +1 -1
  191. package/cjs/{index-30e8e785.js → index-a20b40c4.js} +3 -3
  192. package/cjs/{index-30e8e785.js.map → index-a20b40c4.js.map} +1 -1
  193. package/cjs/{index-a40d57a5.js → index-bc563d47.js} +6 -2
  194. package/cjs/index-bc563d47.js.map +1 -0
  195. package/cjs/{index-dcd38046.js → index-cb53adf5.js} +2 -2
  196. package/cjs/{index-dcd38046.js.map → index-cb53adf5.js.map} +1 -1
  197. package/cjs/{index-6d82098c.js → index-d25a7cbf.js} +4 -4
  198. package/cjs/{index-6d82098c.js.map → index-d25a7cbf.js.map} +1 -1
  199. package/cjs/{index-1a6c1893.js → index-d70ac86e.js} +1 -1
  200. package/cjs/{index-1a6c1893.js.map → index-d70ac86e.js.map} +1 -1
  201. package/cjs/index.js +34 -33
  202. package/cjs/index.js.map +1 -1
  203. package/cjs/{openChannelUtils-46a3a403.js → openChannelUtils-7fb1abc6.js} +1 -1
  204. package/cjs/{openChannelUtils-46a3a403.js.map → openChannelUtils-7fb1abc6.js.map} +1 -1
  205. package/cjs/sendBirdSelectors.js +1 -1
  206. package/cjs/{stringSet-d9121aa6.js → stringSet-ae448472.js} +1 -1
  207. package/cjs/{stringSet-d9121aa6.js.map → stringSet-ae448472.js.map} +1 -1
  208. package/cjs/{topics-4fc933cb.js → topics-bdbff23e.js} +1 -1
  209. package/cjs/{topics-4fc933cb.js.map → topics-bdbff23e.js.map} +1 -1
  210. package/cjs/{tslib.es6-571bbfc9.js → tslib.es6-a7af7bb8.js} +1 -1
  211. package/cjs/{tslib.es6-571bbfc9.js.map → tslib.es6-a7af7bb8.js.map} +1 -1
  212. package/cjs/ui/Accordion.js +4 -4
  213. package/cjs/ui/AccordionGroup.js +2 -2
  214. package/cjs/ui/AdminMessage.js +3 -3
  215. package/cjs/ui/Avatar.js +3 -3
  216. package/cjs/ui/Badge.js +5 -5
  217. package/cjs/ui/Button.js +4 -4
  218. package/cjs/ui/ChannelAvatar.js +4 -4
  219. package/cjs/ui/ChannelPreview.js +12 -12
  220. package/cjs/ui/ChatHeader.js +8 -8
  221. package/cjs/ui/Checkbox.js +1 -1
  222. package/cjs/ui/ConnectionStatus.js +5 -5
  223. package/cjs/ui/ContextMenu.js +5 -5
  224. package/cjs/ui/DateSeparator.js +4 -4
  225. package/cjs/ui/Dropdown.js +3 -3
  226. package/cjs/ui/EmojiReactions.js +7 -7
  227. package/cjs/ui/FileMessageItemBody.js +6 -6
  228. package/cjs/ui/FileViewer.js +7 -7
  229. package/cjs/ui/Icon.js +1 -1
  230. package/cjs/ui/IconButton.js +1 -1
  231. package/cjs/ui/ImageRenderer.js +1 -1
  232. package/cjs/ui/Input.js +3 -3
  233. package/cjs/ui/Label.js +3 -3
  234. package/cjs/ui/LinkLabel.js +3 -3
  235. package/cjs/ui/Loader.js +1 -1
  236. package/cjs/ui/MentionLabel.js +98 -0
  237. package/cjs/ui/MentionLabel.js.map +1 -0
  238. package/cjs/ui/MessageContent.js +15 -14
  239. package/cjs/ui/MessageContent.js.map +1 -1
  240. package/cjs/ui/MessageInput.js +18 -14
  241. package/cjs/ui/MessageInput.js.map +1 -1
  242. package/cjs/ui/MessageItemMenu.js +7 -7
  243. package/cjs/ui/MessageItemReactionMenu.js +5 -5
  244. package/cjs/ui/MessageSearchFileItem.js +10 -10
  245. package/cjs/ui/MessageSearchItem.js +10 -10
  246. package/cjs/ui/MessageStatus.js +8 -8
  247. package/cjs/ui/Modal.js +8 -8
  248. package/cjs/ui/MutedAvatarOverlay.js +1 -1
  249. package/cjs/ui/OGMessageItemBody.js +20 -9
  250. package/cjs/ui/OGMessageItemBody.js.map +1 -1
  251. package/cjs/ui/OpenChannelAdminMessage.js +4 -4
  252. package/cjs/ui/OpenChannelAvatar.js +7 -7
  253. package/cjs/ui/OpenchannelConversationHeader.js +7 -7
  254. package/cjs/ui/OpenchannelFileMessage.js +14 -14
  255. package/cjs/ui/OpenchannelOGMessage.js +14 -14
  256. package/cjs/ui/OpenchannelThumbnailMessage.js +13 -13
  257. package/cjs/ui/OpenchannelUserMessage.js +14 -14
  258. package/cjs/ui/PlaceHolder.js +6 -6
  259. package/cjs/ui/QuoteMessage.js +7 -7
  260. package/cjs/ui/QuoteMessageInput.js +7 -7
  261. package/cjs/ui/ReactionBadge.js +3 -3
  262. package/cjs/ui/ReactionButton.js +1 -1
  263. package/cjs/ui/SortByRow.js +1 -1
  264. package/cjs/ui/TextButton.js +2 -2
  265. package/cjs/ui/TextMessageItemBody.js +22 -9
  266. package/cjs/ui/TextMessageItemBody.js.map +1 -1
  267. package/cjs/ui/ThumbnailMessageItemBody.js +3 -3
  268. package/cjs/ui/Tooltip.js +3 -3
  269. package/cjs/ui/TooltipWrapper.js +1 -1
  270. package/cjs/ui/UnknownMessageItemBody.js +7 -7
  271. package/cjs/ui/UserListItem.js +11 -11
  272. package/cjs/ui/UserProfile.js +13 -13
  273. package/cjs/ui/UserProfile.js.map +1 -1
  274. package/cjs/useSendbirdStateContext.js +1 -1
  275. package/cjs/{utils-f734965d.js → utils-03155980.js} +1 -1
  276. package/cjs/{utils-f734965d.js.map → utils-03155980.js.map} +1 -1
  277. package/cjs/{utils-b88eb3e0.js → utils-0d5ecf05.js} +1 -1
  278. package/cjs/{utils-b88eb3e0.js.map → utils-0d5ecf05.js.map} +1 -1
  279. package/cjs/{utils-63225dc9.js → utils-139469a5.js} +1 -1
  280. package/cjs/{utils-63225dc9.js.map → utils-139469a5.js.map} +1 -1
  281. package/cjs/{uuid-086f0c34.js → uuid-03009a31.js} +1 -1
  282. package/cjs/{uuid-086f0c34.js.map → uuid-03009a31.js.map} +1 -1
  283. package/cjs/withSendBird.js +1 -1
  284. package/{color-a3d3742c.js → color-6b259e40.js} +1 -1
  285. package/{color-a3d3742c.js.map → color-6b259e40.js.map} +1 -1
  286. package/{compareIds-2bfd667a.js → compareIds-982972e8.js} +1 -1
  287. package/{compareIds-2bfd667a.js.map → compareIds-982972e8.js.map} +1 -1
  288. package/{const-9f83647a.js → const-da3968a5.js} +1 -1
  289. package/{const-9f83647a.js.map → const-da3968a5.js.map} +1 -1
  290. package/{const-a8df15de.js → const-e3d1e0ec.js} +1 -1
  291. package/{const-a8df15de.js.map → const-e3d1e0ec.js.map} +1 -1
  292. package/{context-ae164d45.js → context-3d5505d0.js} +2 -2
  293. package/{context-ae164d45.js.map → context-3d5505d0.js.map} +1 -1
  294. package/dist/index.css +74 -56
  295. package/dist/index.css.map +1 -1
  296. package/{index-89f5a4ba.js → index-065ef420.js} +6 -6
  297. package/{index-89f5a4ba.js.map → index-065ef420.js.map} +1 -1
  298. package/{index-e1b93b3a.js → index-17cf7808.js} +3 -3
  299. package/{index-e1b93b3a.js.map → index-17cf7808.js.map} +1 -1
  300. package/{index-df459121.js → index-691dc8da.js} +4 -4
  301. package/{index-df459121.js.map → index-691dc8da.js.map} +1 -1
  302. package/{index-13eb0f5e.js → index-81a93b05.js} +10 -9
  303. package/index-81a93b05.js.map +1 -0
  304. package/{index-03baba6a.js → index-902c2068.js} +6 -3
  305. package/index-902c2068.js.map +1 -0
  306. package/{index-2c56786f.js → index-92160328.js} +2 -2
  307. package/{index-2c56786f.js.map → index-92160328.js.map} +1 -1
  308. package/{index-e7c0bc26.js → index-94489c17.js} +1 -1
  309. package/{index-e7c0bc26.js.map → index-94489c17.js.map} +1 -1
  310. package/{index-29563598.js → index-95677caf.js} +2 -2
  311. package/{index-29563598.js.map → index-95677caf.js.map} +1 -1
  312. package/{index-f78ebc31.js → index-9deb1389.js} +3 -3
  313. package/{index-f78ebc31.js.map → index-9deb1389.js.map} +1 -1
  314. package/{index-d7840fad.js → index-a755675d.js} +4 -4
  315. package/{index-d7840fad.js.map → index-a755675d.js.map} +1 -1
  316. package/{index-80e330a9.js → index-db6a4860.js} +1 -1
  317. package/{index-80e330a9.js.map → index-db6a4860.js.map} +1 -1
  318. package/index.d.ts +14 -3
  319. package/index.js +34 -33
  320. package/index.js.map +1 -1
  321. package/{openChannelUtils-ae1d6038.js → openChannelUtils-2cd370a7.js} +1 -1
  322. package/{openChannelUtils-ae1d6038.js.map → openChannelUtils-2cd370a7.js.map} +1 -1
  323. package/package.json +1 -1
  324. package/sendBirdSelectors.js +1 -1
  325. package/{stringSet-6c9c68ae.js → stringSet-5a85ff4b.js} +1 -1
  326. package/{stringSet-6c9c68ae.js.map → stringSet-5a85ff4b.js.map} +1 -1
  327. package/{topics-d347c996.js → topics-24a660ee.js} +1 -1
  328. package/{topics-d347c996.js.map → topics-24a660ee.js.map} +1 -1
  329. package/{tslib.es6-61821688.js → tslib.es6-2c4d01e9.js} +1 -1
  330. package/{tslib.es6-61821688.js.map → tslib.es6-2c4d01e9.js.map} +1 -1
  331. package/ui/Accordion.js +4 -4
  332. package/ui/AccordionGroup.js +2 -2
  333. package/ui/AdminMessage.js +3 -3
  334. package/ui/Avatar.js +3 -3
  335. package/ui/Badge.js +5 -5
  336. package/ui/Button.js +4 -4
  337. package/ui/ChannelAvatar.js +4 -4
  338. package/ui/ChannelPreview.js +12 -12
  339. package/ui/ChatHeader.js +8 -8
  340. package/ui/Checkbox.js +1 -1
  341. package/ui/ConnectionStatus.js +5 -5
  342. package/ui/ContextMenu.js +5 -5
  343. package/ui/DateSeparator.js +4 -4
  344. package/ui/Dropdown.js +3 -3
  345. package/ui/EmojiReactions.js +7 -7
  346. package/ui/FileMessageItemBody.js +6 -6
  347. package/ui/FileViewer.js +7 -7
  348. package/ui/Icon.js +1 -1
  349. package/ui/IconButton.js +1 -1
  350. package/ui/ImageRenderer.js +1 -1
  351. package/ui/Input.js +3 -3
  352. package/ui/Label.js +3 -3
  353. package/ui/LinkLabel.js +3 -3
  354. package/ui/Loader.js +1 -1
  355. package/ui/MentionLabel.js +92 -0
  356. package/ui/MentionLabel.js.map +1 -0
  357. package/ui/MessageContent.js +15 -14
  358. package/ui/MessageContent.js.map +1 -1
  359. package/ui/MessageInput.js +18 -14
  360. package/ui/MessageInput.js.map +1 -1
  361. package/ui/MessageItemMenu.js +7 -7
  362. package/ui/MessageItemReactionMenu.js +5 -5
  363. package/ui/MessageSearchFileItem.js +10 -10
  364. package/ui/MessageSearchItem.js +10 -10
  365. package/ui/MessageStatus.js +8 -8
  366. package/ui/Modal.js +8 -8
  367. package/ui/MutedAvatarOverlay.js +1 -1
  368. package/ui/OGMessageItemBody.js +20 -9
  369. package/ui/OGMessageItemBody.js.map +1 -1
  370. package/ui/OpenChannelAdminMessage.js +4 -4
  371. package/ui/OpenChannelAvatar.js +7 -7
  372. package/ui/OpenchannelConversationHeader.js +7 -7
  373. package/ui/OpenchannelFileMessage.js +14 -14
  374. package/ui/OpenchannelOGMessage.js +14 -14
  375. package/ui/OpenchannelThumbnailMessage.js +13 -13
  376. package/ui/OpenchannelUserMessage.js +14 -14
  377. package/ui/PlaceHolder.js +6 -6
  378. package/ui/QuoteMessage.js +7 -7
  379. package/ui/QuoteMessageInput.js +7 -7
  380. package/ui/ReactionBadge.js +3 -3
  381. package/ui/ReactionButton.js +1 -1
  382. package/ui/SortByRow.js +1 -1
  383. package/ui/TextButton.js +2 -2
  384. package/ui/TextMessageItemBody.js +22 -9
  385. package/ui/TextMessageItemBody.js.map +1 -1
  386. package/ui/ThumbnailMessageItemBody.js +3 -3
  387. package/ui/Tooltip.js +3 -3
  388. package/ui/TooltipWrapper.js +1 -1
  389. package/ui/UnknownMessageItemBody.js +7 -7
  390. package/ui/UserListItem.js +11 -11
  391. package/ui/UserProfile.js +13 -13
  392. package/ui/UserProfile.js.map +1 -1
  393. package/useSendbirdStateContext.js +1 -1
  394. package/{utils-aed86fb8.js → utils-57c79308.js} +1 -1
  395. package/{utils-aed86fb8.js.map → utils-57c79308.js.map} +1 -1
  396. package/{utils-4e85584a.js → utils-85d3d94c.js} +1 -1
  397. package/{utils-4e85584a.js.map → utils-85d3d94c.js.map} +1 -1
  398. package/{utils-5e25aca3.js → utils-b3b6f503.js} +1 -1
  399. package/{utils-5e25aca3.js.map → utils-b3b6f503.js.map} +1 -1
  400. package/{uuid-6e6389e2.js → uuid-0ab81e67.js} +1 -1
  401. package/{uuid-6e6389e2.js.map → uuid-0ab81e67.js.map} +1 -1
  402. package/withSendBird.js +1 -1
  403. package/CHANGELOG.md +0 -65
  404. package/ChannelProvider-923b58df.js.map +0 -1
  405. package/README.md +0 -129
  406. package/cjs/ChannelProvider-3ef2a755.js.map +0 -1
  407. package/cjs/index-94e8cf13.js.map +0 -1
  408. package/cjs/index-a40d57a5.js.map +0 -1
  409. package/cjs/index.css +0 -4463
  410. package/cjs/index.css.map +0 -1
  411. package/index-03baba6a.js.map +0 -1
  412. package/index-13eb0f5e.js.map +0 -1
  413. package/index.css.map +0 -1
package/cjs/index.css DELETED
@@ -1,4463 +0,0 @@
1
- .sendbird-text {
2
- color: var(--primary-1); }
3
-
4
- .sendbird-openchannel-conversation-header {
5
- position: relative;
6
- min-height: 64px;
7
- box-sizing: border-box; }
8
- .sendbird-theme--light .sendbird-openchannel-conversation-header {
9
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
10
- .sendbird-theme--dark .sendbird-openchannel-conversation-header {
11
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
12
- .sendbird-openchannel-conversation-header .sendbird-openchannel-conversation-header__left__title {
13
- white-space: nowrap;
14
- overflow-x: hidden;
15
- text-overflow: ellipsis;
16
- max-width: calc(100% - 120px); }
17
- .sendbird-openchannel-conversation-header__left [class*=sendbird-openchannel-conversation-header__left__cover-image] {
18
- position: absolute;
19
- left: 20px;
20
- top: 16px; }
21
- .sendbird-openchannel-conversation-header__left__title {
22
- position: absolute;
23
- left: 60px;
24
- top: 12px; }
25
- .sendbird-openchannel-conversation-header__left__sub-title {
26
- position: absolute;
27
- left: 60px;
28
- top: 36px; }
29
- .sendbird-openchannel-conversation-header__right {
30
- position: absolute;
31
- top: 0px;
32
- right: 0px;
33
- width: 64px;
34
- height: 64px; }
35
- .sendbird-openchannel-conversation-header__right__trigger {
36
- position: absolute;
37
- top: 16px;
38
- right: 16px;
39
- display: flex;
40
- align-items: center;
41
- justify-content: center; }
42
-
43
- .sendbird-openchannel-conversation-header__left__cover-image--icon {
44
- display: flex;
45
- justify-content: center;
46
- align-items: center;
47
- border-radius: 50%; }
48
- .sendbird-theme--light .sendbird-openchannel-conversation-header__left__cover-image--icon {
49
- background-color: var(--sendbird-light-background-300); }
50
- .sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
51
- background-color: var(--sendbird-dark-background-300); }
52
-
53
- .sendbird-chat-header {
54
- position: relative;
55
- display: flex;
56
- flex-direction: row;
57
- justify-content: space-between;
58
- align-items: center;
59
- height: 64px;
60
- min-height: 64px;
61
- padding-left: 20px;
62
- padding-right: 16px;
63
- overflow: hidden;
64
- text-overflow: ellipsis;
65
- box-sizing: border-box; }
66
- .sendbird-theme--light .sendbird-chat-header {
67
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
68
- background-color: var(--sendbird-light-background-50); }
69
- .sendbird-theme--dark .sendbird-chat-header {
70
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
71
- background-color: var(--sendbird-dark-background-600); }
72
- .sendbird-chat-header__left {
73
- margin-right: 24px; }
74
- .sendbird-chat-header__left, .sendbird-chat-header__right {
75
- overflow: hidden;
76
- display: flex;
77
- flex-direction: row;
78
- align-items: center; }
79
- .sendbird-chat-header .sendbird-chat-header__left__title {
80
- margin-left: 8px;
81
- margin-right: 16px;
82
- overflow: hidden;
83
- text-overflow: ellipsis;
84
- white-space: nowrap;
85
- max-width: 780px; }
86
- .sendbird-chat-header .sendbird-chat-header__left__subtitle {
87
- max-width: 240px;
88
- overflow: hidden;
89
- text-overflow: ellipsis; }
90
- .sendbird-chat-header .sendbird-chat-header__right__mute {
91
- margin-right: 26px; }
92
- .sendbird-chat-header .sendbird-iconbutton--pressed {
93
- background-color: inherit; }
94
- .sendbird-chat-header .sendbird-chat-header__right__info {
95
- margin-left: 16px; }
96
-
97
- .sendbird__offline .sendbird-channel-preview {
98
- cursor: not-allowed; }
99
-
100
- .sendbird-channel-preview {
101
- position: relative;
102
- cursor: pointer;
103
- box-sizing: border-box;
104
- width: 320px;
105
- height: 80px;
106
- display: flex;
107
- flex-direction: row;
108
- align-items: center;
109
- justify-content: center;
110
- padding: 12px 16px 12px 16px; }
111
- .sendbird-theme--light .sendbird-channel-preview {
112
- border-bottom: solid 1px var(--sendbird-light-onlight-04); }
113
- .sendbird-theme--dark .sendbird-channel-preview {
114
- border-bottom: solid 1px var(--sendbird-dark-ondark-04); }
115
- .sendbird-channel-preview:focus {
116
- outline: none; }
117
- .sendbird-channel-preview .sendbird-channel-preview__avatar {
118
- width: 56px;
119
- height: 56px; }
120
- .sendbird-channel-preview .sendbird-channel-preview__content {
121
- width: 100%;
122
- height: 100%;
123
- margin-left: 16px; }
124
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper {
125
- display: flex;
126
- justify-content: space-between;
127
- width: 216px;
128
- height: 16px; }
129
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header {
130
- display: flex;
131
- justify-content: flex-start;
132
- overflow: hidden;
133
- text-overflow: ellipsis; }
134
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__broadcast-icon {
135
- padding-right: 4px; }
136
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__channel-name {
137
- overflow: hidden;
138
- text-overflow: ellipsis;
139
- max-width: 128px;
140
- word-break: break-all;
141
- white-space: nowrap; }
142
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__total-members {
143
- margin-top: 2px;
144
- margin-left: 4px; }
145
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__frozen-icon {
146
- padding-left: 4px; }
147
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__last-message-at {
148
- margin-left: 4px;
149
- margin-bottom: 4px;
150
- white-space: nowrap; }
151
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower {
152
- margin-top: 8px;
153
- width: 216px;
154
- height: 32px;
155
- display: flex;
156
- justify-content: space-between; }
157
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__last-message {
158
- overflow: hidden;
159
- text-overflow: ellipsis; }
160
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__unread-message-count {
161
- margin-left: 8px;
162
- margin-bottom: 12px; }
163
- .sendbird-channel-preview .sendbird-channel-preview__action {
164
- position: absolute;
165
- top: 12px;
166
- right: 12px;
167
- display: inline-block; }
168
- .sendbird-channel-preview .sendbird-channel-preview__action .sendbird-iconbutton {
169
- display: none; }
170
- .sendbird-theme--light .sendbird-channel-preview:hover {
171
- background-color: var(--sendbird-light-background-100); }
172
- .sendbird-theme--dark .sendbird-channel-preview:hover {
173
- background-color: var(--sendbird-dark-background-500); }
174
- .sendbird-channel-preview:hover .sendbird-channel-preview__action .sendbird-iconbutton {
175
- display: inline-block; }
176
- .sendbird-channel-preview:hover .sendbird-channel-preview__content__upper__last-message-at {
177
- display: none; }
178
- .sendbird-channel-preview:hover .sendbird-channel-preview__content__lower__unread-message-count {
179
- display: none; }
180
-
181
- .sendbird-channel-preview--active {
182
- padding: 12px 16px 12px 12px; }
183
- .sendbird-theme--light .sendbird-channel-preview--active {
184
- border-left: solid 4px var(--sendbird-light-primary-300);
185
- border-bottom: solid 1px var(--sendbird-light-onlight-04);
186
- background-color: var(--sendbird-light-primary-100); }
187
- .sendbird-theme--dark .sendbird-channel-preview--active {
188
- border-left: solid 4px var(--sendbird-dark-primary-200);
189
- border-bottom: solid 1px var(--sendbird-dark-ondark-04);
190
- background-color: var(--sendbird-dark-background-700); }
191
- .sendbird-theme--light .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
192
- color: var(--sendbird-light-primary-300); }
193
- .sendbird-theme--dark .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
194
- color: var(--sendbird-dark-primary-200); }
195
-
196
- .sendbird-dropdown {
197
- position: relative;
198
- display: inline-block; }
199
- .sendbird-dropdown .sendbird-dropdown__menu {
200
- position: absolute;
201
- top: 100%;
202
- left: 0;
203
- min-width: 140px;
204
- margin: 0px;
205
- padding: 8px 0px;
206
- border-radius: 4px;
207
- list-style: none; }
208
- .sendbird-theme--light .sendbird-dropdown .sendbird-dropdown__menu {
209
- box-shadow: var(--sendbird-light-shadow-02);
210
- background-color: var(--sendbird-light-background-50); }
211
- .sendbird-theme--dark .sendbird-dropdown .sendbird-dropdown__menu {
212
- box-shadow: var(--sendbird-dark-shadow-02);
213
- background-color: var(--sendbird-dark-background-500); }
214
- .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
215
- cursor: pointer;
216
- white-space: nowrap;
217
- padding: 8px 16px; }
218
- .sendbird-theme--light .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
219
- background-color: var(--sendbird-light-background-100); }
220
- .sendbird-theme--dark .sendbird-dropdown .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
221
- background-color: var(--sendbird-dark-background-400); }
222
-
223
- @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
224
- :root {
225
- --sendbird-light-primary-500: #491389;
226
- --sendbird-light-primary-400: #6211c8;
227
- --sendbird-light-primary-300: #742ddd;
228
- --sendbird-light-primary-200: #c2a9fa;
229
- --sendbird-light-primary-100: #dbd1ff;
230
- --sendbird-light-secondary-500: #066858;
231
- --sendbird-light-secondary-400: #027d69;
232
- --sendbird-light-secondary-300: #259c72;
233
- --sendbird-light-secondary-200: #69c085;
234
- --sendbird-light-secondary-100: #a8e2ab;
235
- --sendbird-light-information-100: #adc9ff;
236
- --sendbird-light-error-500: #9d091e;
237
- --sendbird-light-error-400: #bf0711;
238
- --sendbird-light-error-300: #de360b;
239
- --sendbird-light-error-200: #f66161;
240
- --sendbird-light-error-100: #fdaaaa;
241
- --sendbird-light-background-700: #000000;
242
- --sendbird-light-background-600: #161616;
243
- --sendbird-light-background-500: #2C2C2C;
244
- --sendbird-light-background-400: #393939;
245
- --sendbird-light-background-300: #bdbdbd;
246
- --sendbird-light-background-200: #e0e0e0;
247
- --sendbird-light-background-100: #eeeeee;
248
- --sendbird-light-background-50: #FFFFFF;
249
- --sendbird-light-overlay-01: rgba(0, 0, 0, 0.55);
250
- --sendbird-light-overlay-02: rgba(0, 0, 0, 0.32);
251
- --sendbird-light-onlight-01: rgba(0, 0, 0, 0.88);
252
- --sendbird-light-onlight-02: rgba(0, 0, 0, 0.50);
253
- --sendbird-light-onlight-03: rgba(0, 0, 0, 0.38);
254
- --sendbird-light-onlight-04: rgba(0, 0, 0, 0.12);
255
- --sendbird-light-ondark-01: rgba(255, 255, 255, 0.88);
256
- --sendbird-light-ondark-02: rgba(255, 255, 255, 0.50);
257
- --sendbird-light-ondark-03: rgba(255, 255, 255, 0.38);
258
- --sendbird-light-ondark-04: rgba(255, 255, 255, 0.12);
259
- --sendbird-light-shadow-01: 0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12);
260
- --sendbird-light-shadow-02: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12);
261
- --sendbird-light-shadow-03: 0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12);
262
- --sendbird-light-shadow-04: 0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12);
263
- --sendbird-light-shadow-05: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 6px 0 rgba(0, 0, 0, 0.12);
264
- --sendbird-light-shadow-message-input: 0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
265
-
266
- :root {
267
- --sendbird-dark-primary-500: #491389;
268
- --sendbird-dark-primary-400: #6211c8;
269
- --sendbird-dark-primary-300: #742ddd;
270
- --sendbird-dark-primary-200: #c2a9fa;
271
- --sendbird-dark-primary-100: #dbd1ff;
272
- --sendbird-dark-secondary-500: #066858;
273
- --sendbird-dark-secondary-400: #027d69;
274
- --sendbird-dark-secondary-300: #259c72;
275
- --sendbird-dark-secondary-200: #69c085;
276
- --sendbird-dark-secondary-100: #a8e2ab;
277
- --sendbird-dark-information-100: #adc9ff;
278
- --sendbird-dark-error-500: #9d091e;
279
- --sendbird-dark-error-400: #bf0711;
280
- --sendbird-dark-error-300: #de360b;
281
- --sendbird-dark-error-200: #f66161;
282
- --sendbird-dark-error-100: #fdaaaa;
283
- --sendbird-dark-background-700: #000000;
284
- --sendbird-dark-background-600: #161616;
285
- --sendbird-dark-background-500: #2C2C2C;
286
- --sendbird-dark-background-400: #393939;
287
- --sendbird-dark-background-300: #bdbdbd;
288
- --sendbird-dark-background-200: #e0e0e0;
289
- --sendbird-dark-background-100: #eeeeee;
290
- --sendbird-dark-background-50: #FFFFFF;
291
- --sendbird-dark-overlay-01: rgba(0, 0, 0, 0.55);
292
- --sendbird-dark-overlay-02: rgba(0, 0, 0, 0.32);
293
- --sendbird-dark-onlight-01: rgba(0, 0, 0, 0.88);
294
- --sendbird-dark-onlight-02: rgba(0, 0, 0, 0.50);
295
- --sendbird-dark-onlight-03: rgba(0, 0, 0, 0.38);
296
- --sendbird-dark-onlight-04: rgba(0, 0, 0, 0.12);
297
- --sendbird-dark-ondark-01: rgba(255, 255, 255, 0.88);
298
- --sendbird-dark-ondark-02: rgba(255, 255, 255, 0.50);
299
- --sendbird-dark-ondark-03: rgba(255, 255, 255, 0.38);
300
- --sendbird-dark-ondark-04: rgba(255, 255, 255, 0.12);
301
- --sendbird-dark-shadow-01: 0 1px 5px 0 rgba(33, 34, 66, 0.04), 0 0 3px 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.12);
302
- --sendbird-dark-shadow-02: 0 3px 5px -3px rgba(33, 34, 66, 0.04), 0 3px 14px 2px rgba(0, 0, 0, 0.08), 0 8px 10px 1px rgba(0, 0, 0, 0.12);
303
- --sendbird-dark-shadow-03: 0 6px 10px -5px rgba(0, 0, 0, 0.04), 0 6px 30px 5px rgba(0, 0, 0, 0.08), 0 16px 24px 2px rgba(0, 0, 0, 0.12);
304
- --sendbird-dark-shadow-04: 0 9px 15px -7px rgba(0, 0, 0, 0.04), 0 9px 46px 8px rgba(0, 0, 0, 0.08), 0 24px 38px 3px rgba(0, 0, 0, 0.12);
305
- --sendbird-light-shadow-05: 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 4px 6px 0 rgba(0, 0, 0, 0.12);
306
- --sendbird-dark-shadow-message-input: 0 1px 5px 0 rgba(33, 34, 66, 0.12), 0 0 1px 0 rgba(33, 34, 66, 0.16), 0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }
307
-
308
- :root {
309
- --sendbird-iconbutton-color: #825eeb;
310
- --sendbird-message-input-border-active: #7B53EF;
311
- --sendbird-selected-reaction-button-border-hover: #9E8CF5;
312
- --sendbird-add-reaction-button-border-hover: #9E8CF5;
313
- --sendbird-tooltip-background: #000000;
314
- --sendbird-tooltip-text-color: rgba(255, 255, 255, 0.88);
315
- --sendbird-button-border-focus: #FFFFFF;
316
- --sendbird-file-message-icon-background: #FFFFFF;
317
- --sendbird-font-family-default: 'Roboto', sans-serif;
318
- --sendbird-message-balloon-width: 404px; }
319
-
320
- .sendbird-channel-list {
321
- width: 320px;
322
- height: 100%;
323
- display: flex;
324
- flex-direction: column;
325
- box-sizing: border-box; }
326
- .sendbird-theme--light .sendbird-channel-list {
327
- background-color: var(--sendbird-light-background-50); }
328
- .sendbird-theme--dark .sendbird-channel-list {
329
- background-color: var(--sendbird-dark-background-600); }
330
-
331
- .sendbird-channel-list__header {
332
- height: 64px;
333
- min-height: 64px; }
334
-
335
- .sendbird-channel-list__body {
336
- flex: 1 1 0;
337
- -ms-flex: 1;
338
- overflow-y: auto;
339
- overflow-x: hidden; }
340
-
341
- [class*=sendbird-label] {
342
- font-family: var(--sendbird-font-family-default); }
343
-
344
- .sendbird-label--h-1 {
345
- font-size: 20px;
346
- font-weight: 600;
347
- font-stretch: normal;
348
- font-style: normal;
349
- line-height: 1.4;
350
- letter-spacing: -0.2px; }
351
-
352
- .sendbird-label--h-2 {
353
- font-size: 18px;
354
- font-weight: 600;
355
- font-stretch: normal;
356
- font-style: normal;
357
- line-height: normal;
358
- letter-spacing: -0.2px; }
359
-
360
- .sendbird-label--subtitle-1 {
361
- font-size: 16px;
362
- font-weight: normal;
363
- font-stretch: normal;
364
- font-style: normal;
365
- line-height: 1.38;
366
- letter-spacing: -0.2px; }
367
-
368
- .sendbird-label--subtitle-2 {
369
- font-size: 14px;
370
- font-weight: 600;
371
- font-stretch: normal;
372
- font-style: normal;
373
- line-height: 1.14;
374
- letter-spacing: -0.2px; }
375
-
376
- .sendbird-label--body-1 {
377
- font-size: 14px;
378
- font-weight: normal;
379
- font-stretch: normal;
380
- font-style: normal;
381
- line-height: 1.43;
382
- letter-spacing: normal; }
383
-
384
- .sendbird-label--body-2 {
385
- font-size: 12px;
386
- font-weight: normal;
387
- font-stretch: normal;
388
- font-style: normal;
389
- line-height: 1.33;
390
- letter-spacing: normal; }
391
-
392
- .sendbird-label--button-1 {
393
- font-size: 14px;
394
- font-weight: 600;
395
- font-stretch: normal;
396
- font-style: normal;
397
- line-height: 1.43;
398
- letter-spacing: normal; }
399
-
400
- .sendbird-label--button-2 {
401
- font-size: 14px;
402
- font-weight: normal;
403
- font-stretch: normal;
404
- font-style: normal;
405
- line-height: 1.43;
406
- letter-spacing: normal; }
407
-
408
- .sendbird-label--caption-1 {
409
- font-size: 14px;
410
- font-weight: 600;
411
- font-stretch: normal;
412
- font-style: normal;
413
- line-height: 1.43;
414
- letter-spacing: normal; }
415
-
416
- .sendbird-label--caption-2 {
417
- font-size: 12px;
418
- font-weight: bold;
419
- font-style: normal;
420
- line-height: 1;
421
- letter-spacing: normal; }
422
-
423
- .sendbird-label--caption-3 {
424
- font-size: 12px;
425
- font-weight: normal;
426
- font-stretch: normal;
427
- font-style: normal;
428
- line-height: 1;
429
- letter-spacing: normal; }
430
-
431
- .sendbird-theme--light .sendbird-label--color-onbackground-1 {
432
- color: var(--sendbird-light-onlight-01); }
433
-
434
- .sendbird-theme--dark .sendbird-label--color-onbackground-1 {
435
- color: var(--sendbird-dark-ondark-01); }
436
-
437
- .sendbird-theme--light .sendbird-label--color-onbackground-2 {
438
- color: var(--sendbird-light-onlight-02); }
439
-
440
- .sendbird-theme--dark .sendbird-label--color-onbackground-2 {
441
- color: var(--sendbird-dark-ondark-02); }
442
-
443
- .sendbird-theme--light .sendbird-label--color-onbackground-3 {
444
- color: var(--sendbird-light-onlight-03); }
445
-
446
- .sendbird-theme--dark .sendbird-label--color-onbackground-3 {
447
- color: var(--sendbird-dark-ondark-03); }
448
-
449
- .sendbird-theme--light .sendbird-label--color-onbackground-4 {
450
- color: var(--sendbird-light-onlight-04); }
451
-
452
- .sendbird-theme--dark .sendbird-label--color-onbackground-4 {
453
- color: var(--sendbird-dark-ondark-04); }
454
-
455
- .sendbird-theme--light .sendbird-label--color-oncontent-1 {
456
- color: var(--sendbird-light-ondark-01); }
457
-
458
- .sendbird-theme--dark .sendbird-label--color-oncontent-1 {
459
- color: var(--sendbird-dark-onlight-01); }
460
-
461
- .sendbird-theme--light .sendbird-label--color-oncontent-2 {
462
- color: var(--sendbird-light-ondark-02); }
463
-
464
- .sendbird-theme--dark .sendbird-label--color-oncontent-2 {
465
- color: var(--sendbird-dark-onlight-02); }
466
-
467
- .sendbird-theme--light .sendbird-label--color-primary {
468
- color: var(--sendbird-light-primary-300); }
469
-
470
- .sendbird-theme--dark .sendbird-label--color-primary {
471
- color: var(--sendbird-dark-primary-200); }
472
-
473
- .sendbird-theme--light .sendbird-label--color-error {
474
- color: var(--sendbird-light-error-300); }
475
-
476
- .sendbird-theme--dark .sendbird-label--color-error {
477
- color: var(--sendbird-dark-error-200); }
478
-
479
- .sendbird-theme--light .sendbird-label--color-secondary-3 {
480
- color: var(--sendbird-light-secondary-300); }
481
-
482
- .sendbird-theme--dark .sendbird-label--color-secondary-3 {
483
- color: var(--sendbird-dark-secondary-200); }
484
-
485
- .sendbird-iconbutton {
486
- color: var(--sendbird-iconbutton-color);
487
- display: inline-flex;
488
- justify-content: center;
489
- align-items: center;
490
- padding: 3px;
491
- background-color: transparent;
492
- cursor: pointer;
493
- -webkit-user-select: none;
494
- -moz-user-select: none;
495
- -ms-user-select: none;
496
- user-select: none;
497
- border: 1px solid transparent;
498
- border-radius: 4px;
499
- outline: 0px; }
500
- .sendbird-iconbutton .sendbird-iconbutton__inner {
501
- height: 100%; }
502
- .sendbird-theme--light .sendbird-iconbutton .sendbird-iconbutton__inner svg {
503
- fill: var(--sendbird-light-onlight-01); }
504
- .sendbird-theme--dark .sendbird-iconbutton .sendbird-iconbutton__inner svg {
505
- fill: var(--sendbird-dark-ondark-01); }
506
- .sendbird-theme--light .sendbird-iconbutton:hover {
507
- background-color: var(--sendbird-light-background-100); }
508
- .sendbird-theme--dark .sendbird-iconbutton:hover {
509
- background-color: var(--sendbird-dark-background-500); }
510
- .sendbird-theme--light .sendbird-iconbutton:active {
511
- background-color: var(--sendbird-light-background-200); }
512
- .sendbird-theme--dark .sendbird-iconbutton:active {
513
- background-color: var(--sendbird-dark-background-400); }
514
- .sendbird-iconbutton:disabled {
515
- cursor: not-allowed !important; }
516
- .sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--light .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
517
- fill: var(--sendbird-light-onlight-02); }
518
- .sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner svg, .sendbird-theme--dark .sendbird-iconbutton:disabled .sendbird-iconbutton__inner path {
519
- fill: var(--sendbird-dark-ondark-02); }
520
-
521
- .sendbird-theme--light .sendbird-iconbutton--pressed {
522
- background-color: var(--sendbird-light-primary-100); }
523
-
524
- .sendbird-theme--dark .sendbird-iconbutton--pressed {
525
- background-color: var(--sendbird-dark-background-700); }
526
-
527
- .sendbird-channel-header {
528
- position: relative;
529
- height: 64px;
530
- min-height: 64px;
531
- width: 320px;
532
- padding: 8px 64px 8px 8px;
533
- box-sizing: border-box; }
534
- .sendbird-theme--light .sendbird-channel-header {
535
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
536
- background-color: var(--sendbird-light-background-50); }
537
- .sendbird-theme--dark .sendbird-channel-header {
538
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
539
- background-color: var(--sendbird-dark-background-600); }
540
- .sendbird-channel-header.sendbird-channel-header--allow-edit .sendbird-channel-header__title {
541
- cursor: pointer; }
542
- .sendbird-channel-header .sendbird-channel-header__title {
543
- display: flex;
544
- flex-direction: row;
545
- width: 260px;
546
- height: 48px;
547
- border-radius: 4px; }
548
- .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:hover {
549
- background: var(--sendbird-light-background-100); }
550
- .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:hover {
551
- background: var(--sendbird-dark-background-500); }
552
- .sendbird-channel-header .sendbird-channel-header__title:focus {
553
- outline: none; }
554
- .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:focus {
555
- background: var(--sendbird-light-background-200); }
556
- .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:focus {
557
- background: var(--sendbird-dark-background-400); }
558
- .sendbird-theme--light .sendbird-channel-header .sendbird-channel-header__title:active {
559
- border: solid 2px var(--sendbird-light-primary-300); }
560
- .sendbird-theme--dark .sendbird-channel-header .sendbird-channel-header__title:active {
561
- border: solid 2px var(--sendbird-dark-primary-200); }
562
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__left {
563
- width: 48px;
564
- padding: 8px;
565
- box-sizing: border-box; }
566
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right {
567
- margin-left: 4px;
568
- padding-top: 8px; }
569
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__name,
570
- .sendbird-channel-header .sendbird-channel-header__title .sendbird-channel-header__title__right__user-id {
571
- display: block;
572
- max-width: 200px;
573
- white-space: nowrap;
574
- overflow: hidden;
575
- text-overflow: ellipsis; }
576
- .sendbird-channel-header .sendbird-channel-header__right-icon {
577
- position: absolute;
578
- right: 16px;
579
- top: 16px; }
580
-
581
- .sendbird-image-renderer {
582
- overflow: hidden;
583
- position: relative; }
584
-
585
- .sendbird-image-renderer__hidden-image-loader {
586
- display: none; }
587
-
588
- .sendbird-icon {
589
- display: inline-block; }
590
- .sendbird-icon:focus {
591
- outline: none; }
592
-
593
- .sendbird-theme--light .sendbird-icon-color--primary [class*='fill'] {
594
- fill: var(--sendbird-light-primary-300); }
595
-
596
- .sendbird-theme--dark .sendbird-icon-color--primary [class*='fill'] {
597
- fill: var(--sendbird-dark-primary-200); }
598
-
599
- .sendbird-theme--light .sendbird-icon-color--primary [class*='stroke'] {
600
- stroke: var(--sendbird-light-primary-300);
601
- stroke-width: 2px;
602
- stroke-linejoin: round; }
603
-
604
- .sendbird-theme--dark .sendbird-icon-color--primary [class*='stroke'] {
605
- stroke: var(--sendbird-dark-primary-200);
606
- stroke-width: 2px;
607
- stroke-linejoin: round; }
608
-
609
- .sendbird-theme--light .sendbird-icon-color--secondary [class*='fill'] {
610
- fill: var(--sendbird-light-secondary-300); }
611
-
612
- .sendbird-theme--dark .sendbird-icon-color--secondary [class*='fill'] {
613
- fill: var(--sendbird-dark-secondary-200); }
614
-
615
- .sendbird-theme--light .sendbird-icon-color--content [class*='fill'] {
616
- fill: var(--sendbird-light-ondark-01); }
617
-
618
- .sendbird-theme--dark .sendbird-icon-color--content [class*='fill'] {
619
- fill: var(--sendbird-dark-onlight-01); }
620
-
621
- .sendbird-theme--light .sendbird-icon-color--content-inverse [class*='fill'] {
622
- fill: var(--sendbird-light-onlight-01); }
623
-
624
- .sendbird-theme--dark .sendbird-icon-color--content-inverse [class*='fill'] {
625
- fill: var(--sendbird-dark-ondark-01); }
626
-
627
- .sendbird-icon-color--white [class*='fill'] {
628
- fill: #ffffff; }
629
-
630
- .sendbird-icon-color--gray [class*='fill'] {
631
- fill: var(--sendbird-light-onlight-04); }
632
-
633
- .sendbird-theme--light .sendbird-icon-color--sent [class*='fill'] {
634
- fill: var(--sendbird-light-onlight-03); }
635
-
636
- .sendbird-theme--dark .sendbird-icon-color--sent [class*='fill'] {
637
- fill: var(--sendbird-dark-ondark-03); }
638
-
639
- .sendbird-theme--light .sendbird-icon-color--read [class*='fill'] {
640
- fill: var(--sendbird-light-secondary-300); }
641
-
642
- .sendbird-theme--dark .sendbird-icon-color--read [class*='fill'] {
643
- fill: var(--sendbird-dark-secondary-200); }
644
-
645
- .sendbird-theme--light .sendbird-icon-color--on-background-1 [class*='fill'] {
646
- fill: var(--sendbird-light-onlight-01); }
647
-
648
- .sendbird-theme--dark .sendbird-icon-color--on-background-1 [class*='fill'] {
649
- fill: var(--sendbird-dark-ondark-01); }
650
-
651
- .sendbird-theme--light .sendbird-icon-color--on-background-2 [class*='fill'] {
652
- fill: var(--sendbird-light-onlight-02); }
653
-
654
- .sendbird-theme--dark .sendbird-icon-color--on-background-2 [class*='fill'] {
655
- fill: var(--sendbird-dark-ondark-02); }
656
-
657
- .sendbird-theme--light .sendbird-icon-color--on-background-3 [class*='fill'] {
658
- fill: var(--sendbird-light-onlight-03); }
659
-
660
- .sendbird-theme--dark .sendbird-icon-color--on-background-3 [class*='fill'] {
661
- fill: var(--sendbird-dark-ondark-03); }
662
-
663
- .sendbird-theme--light .sendbird-icon-color--background-3 [class*='fill'] {
664
- fill: var(--sendbird-light-background-300); }
665
-
666
- .sendbird-theme--dark .sendbird-icon-color--background-3 [class*='fill'] {
667
- fill: var(--sendbird-dark-background-400); }
668
-
669
- .sendbird-theme--light .sendbird-icon-color--error [class*='fill'] {
670
- fill: var(--sendbird-light-error-300); }
671
-
672
- .sendbird-theme--dark .sendbird-icon-color--error [class*='fill'] {
673
- fill: var(--sendbird-dark-error-200); }
674
-
675
- .sendbird-avatar {
676
- display: inline-block;
677
- overflow: hidden;
678
- border-radius: 50%;
679
- position: relative; }
680
- .sendbird-avatar:focus {
681
- outline: none; }
682
- .sendbird-avatar .sendbird-avatar-img {
683
- position: absolute;
684
- top: 50%;
685
- left: 50%;
686
- transform: translate(-50%, -50%);
687
- display: flex;
688
- justify-content: center;
689
- align-items: center; }
690
- .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img {
691
- background-color: var(--sendbird-light-background-300); }
692
- .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img {
693
- background-color: var(--sendbird-dark-background-300); }
694
- .sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:first-child {
695
- transform: translate(2%, -50%); }
696
- .sendbird-avatar .sendbird-avatar--inner__two-child .sendbird-avatar-img:last-child {
697
- transform: translate(-102%, -50%); }
698
- .sendbird-avatar .sendbird-avatar--inner__three-child--upper .sendbird-avatar-img:first-child {
699
- transform: translate(-50%, -102%); }
700
- .sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:first-child {
701
- transform: translate(-77%, -23%) scale(0.5); }
702
- .sendbird-avatar .sendbird-avatar--inner__three-child--lower .sendbird-avatar-img:last-child {
703
- transform: translate(-23%, -23%) scale(0.5); }
704
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:first-child {
705
- transform: translate(-77%, -77%) scale(0.5); }
706
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(2) {
707
- transform: translate(-23%, -77%) scale(0.5); }
708
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:nth-child(3) {
709
- transform: translate(-77%, -23%) scale(0.5); }
710
- .sendbird-avatar .sendbird-avatar--inner__four-child .sendbird-avatar-img:last-child {
711
- transform: translate(-23%, -23%) scale(0.5); }
712
- .sendbird-avatar .sendbird-avatar-img--default {
713
- display: flex;
714
- justify-content: center;
715
- align-items: center; }
716
- .sendbird-theme--light .sendbird-avatar .sendbird-avatar-img--default {
717
- background-color: var(--sendbird-light-background-300); }
718
- .sendbird-theme--dark .sendbird-avatar .sendbird-avatar-img--default {
719
- background-color: var(--sendbird-dark-background-300); }
720
-
721
- .sendbird-add-channel__rectangle-wrap {
722
- margin-top: 26px; }
723
-
724
- .sendbird-add-channel__rectangle-footer {
725
- text-align: right;
726
- margin-top: 32px; }
727
-
728
- .sendbird-add-channel__rectangle {
729
- width: 432px;
730
- height: 72px;
731
- border-radius: 4px;
732
- margin-bottom: 8px;
733
- padding: 25px 72px;
734
- position: relative;
735
- box-sizing: border-box;
736
- cursor: pointer; }
737
- .sendbird-theme--light .sendbird-add-channel__rectangle {
738
- border: 1px solid var(--sendbird-light-onlight-04); }
739
- .sendbird-theme--dark .sendbird-add-channel__rectangle {
740
- border: 1px solid var(--sendbird-dark-ondark-04); }
741
- .sendbird-add-channel__rectangle .sendbird-icon {
742
- position: absolute;
743
- left: 22px;
744
- top: 24px; }
745
-
746
- .sendbird-create-channel--content {
747
- width: 480px;
748
- max-height: 552px; }
749
-
750
- .sendbird-create-channel--scroll {
751
- height: 360px;
752
- overflow-y: auto; }
753
-
754
- .sendbird-modal {
755
- position: fixed;
756
- top: 0;
757
- left: 0;
758
- width: 100%;
759
- height: 100%;
760
- display: flex;
761
- align-items: center;
762
- justify-content: center; }
763
-
764
- .sendbird-modal__content {
765
- width: 480px;
766
- border-radius: 4px;
767
- z-index: 10001;
768
- padding: 18px 24px 24px 24px;
769
- position: relative;
770
- box-sizing: border-box; }
771
- .sendbird-theme--light .sendbird-modal__content {
772
- background-color: var(--sendbird-light-background-50);
773
- box-shadow: var(--sendbird-light-shadow-04); }
774
- .sendbird-theme--dark .sendbird-modal__content {
775
- background-color: var(--sendbird-dark-background-500);
776
- box-shadow: var(--sendbird-dark-shadow-04); }
777
- .sendbird-modal__content .sendbird-modal__close {
778
- position: absolute;
779
- top: 16px;
780
- right: 16px;
781
- cursor: pointer; }
782
- .sendbird-theme--light .sendbird-modal__content .sendbird-modal__close path {
783
- fill: var(--sendbird-light-onlight-01); }
784
- .sendbird-theme--dark .sendbird-modal__content .sendbird-modal__close path {
785
- fill: var(--sendbird-dark-ondark-01); }
786
- .sendbird-modal__content .sendbird-modal__header {
787
- margin-bottom: 16px; }
788
- .sendbird-modal__content .sendbird-modal__body {
789
- height: calc(100% - 116px); }
790
- .sendbird-modal__content .sendbird-modal__footer {
791
- margin-top: 32px;
792
- text-align: right; }
793
- .sendbird-modal__content .sendbird-modal__footer .sendbird-button:last-child {
794
- margin-left: 8px;
795
- width: 80px;
796
- height: 40px; }
797
-
798
- .sendbird-modal__backdrop {
799
- position: fixed;
800
- z-index: 10000;
801
- height: 100%;
802
- width: 100%;
803
- top: 0;
804
- left: 0; }
805
- .sendbird-theme--light .sendbird-modal__backdrop {
806
- background-color: var(--sendbird-light-overlay-02); }
807
- .sendbird-theme--dark .sendbird-modal__backdrop {
808
- background-color: var(--sendbird-dark-overlay-02); }
809
-
810
- .sendbird-button {
811
- display: inline-block;
812
- box-shadow: none;
813
- border-radius: 4px;
814
- padding: 0px;
815
- font-family: var(--sendbird-font-family-default);
816
- cursor: pointer; }
817
- .sendbird-button:hover {
818
- box-shadow: none; }
819
- .sendbird-button:focus {
820
- outline: none; }
821
- .sendbird-button:active {
822
- box-shadow: none; }
823
- .sendbird-button.sendbird-button__disabled {
824
- cursor: not-allowed; }
825
- .sendbird-theme--light .sendbird-button.sendbird-button__disabled {
826
- border: none;
827
- background-color: var(--sendbird-light-background-200); }
828
- .sendbird-theme--dark .sendbird-button.sendbird-button__disabled {
829
- border: none;
830
- background-color: var(--sendbird-dark-background-400); }
831
- .sendbird-theme--light .sendbird-button.sendbird-button__disabled:hover {
832
- background-color: var(--sendbird-light-background-200); }
833
- .sendbird-theme--dark .sendbird-button.sendbird-button__disabled:hover {
834
- background-color: var(--sendbird-dark-background-400); }
835
-
836
- .sendbird-button--big {
837
- height: 40px; }
838
- .sendbird-button--big .sendbird-button__text {
839
- margin: 10px 16px; }
840
-
841
- .sendbird-button--small {
842
- height: 32px; }
843
- .sendbird-button--small .sendbird-button__text {
844
- margin: 6px 16px; }
845
-
846
- .sendbird-theme--light .sendbird-button--primary {
847
- border: 1px solid var(--sendbird-light-primary-300);
848
- background-color: var(--sendbird-light-primary-300); }
849
-
850
- .sendbird-theme--dark .sendbird-button--primary {
851
- border: 1px solid var(--sendbird-dark-primary-200);
852
- background-color: var(--sendbird-dark-primary-200); }
853
-
854
- .sendbird-theme--light .sendbird-button--primary .sendbird-button__text {
855
- color: var(--sendbird-light-ondark-01); }
856
-
857
- .sendbird-theme--dark .sendbird-button--primary .sendbird-button__text {
858
- color: var(--sendbird-dark-onlight-01); }
859
-
860
- .sendbird-theme--light .sendbird-button--primary:hover {
861
- background-color: var(--sendbird-light-primary-400);
862
- border-color: var(--sendbird-light-primary-400); }
863
-
864
- .sendbird-theme--dark .sendbird-button--primary:hover {
865
- background-color: var(--sendbird-dark-primary-300);
866
- border-color: var(--sendbird-dark-primary-300); }
867
-
868
- .sendbird-theme--light .sendbird-button--primary:focus {
869
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-300);
870
- border: 1px solid var(--sendbird-button-border-focus); }
871
-
872
- .sendbird-theme--dark .sendbird-button--primary:focus {
873
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-200);
874
- border: 1px solid var(--sendbird-button-border-focus); }
875
-
876
- .sendbird-theme--light .sendbird-button--primary:active {
877
- background-color: var(--sendbird-light-primary-500); }
878
-
879
- .sendbird-theme--dark .sendbird-button--primary:active {
880
- background-color: var(--sendbird-dark-primary-400); }
881
-
882
- .sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:hover {
883
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-400); }
884
-
885
- .sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:hover {
886
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-300); }
887
-
888
- .sendbird-theme--light .sendbird-button--primary:focus .sendbird-button--primary:active {
889
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-500); }
890
-
891
- .sendbird-theme--dark .sendbird-button--primary:focus .sendbird-button--primary:active {
892
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-400); }
893
-
894
- .sendbird-button--secondary {
895
- background-color: transparent; }
896
- .sendbird-theme--light .sendbird-button--secondary {
897
- border: 1px solid var(--sendbird-light-onlight-03); }
898
- .sendbird-theme--dark .sendbird-button--secondary {
899
- border: 1px solid var(--sendbird-dark-ondark-03); }
900
- .sendbird-theme--light .sendbird-button--secondary .sendbird-button__text {
901
- color: var(--sendbird-light-onlight-01); }
902
- .sendbird-theme--dark .sendbird-button--secondary .sendbird-button__text {
903
- color: var(--sendbird-dark-ondark-01); }
904
- .sendbird-button--secondary:hover {
905
- background-color: transparent; }
906
- .sendbird-theme--light .sendbird-button--secondary:hover {
907
- border: 1px solid var(--sendbird-light-primary-300); }
908
- .sendbird-theme--dark .sendbird-button--secondary:hover {
909
- border: 1px solid var(--sendbird-dark-primary-200); }
910
- .sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button__text {
911
- color: var(--sendbird-light-primary-300); }
912
- .sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button__text {
913
- color: var(--sendbird-dark-primary-200); }
914
- .sendbird-button--secondary.sendbird-button__disabled {
915
- cursor: not-allowed;
916
- border: none; }
917
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled {
918
- background-color: var(--sendbird-light-background-200); }
919
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled {
920
- background-color: var(--sendbird-dark-background-400); }
921
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
922
- color: var(--sendbird-light-onlight-02); }
923
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled .sendbird-button__text {
924
- color: var(--sendbird-dark-ondark-02); }
925
- .sendbird-button--secondary.sendbird-button__disabled:hover {
926
- border: none; }
927
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover {
928
- background-color: var(--sendbird-light-background-200); }
929
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover {
930
- background-color: var(--sendbird-dark-background-400); }
931
- .sendbird-theme--light .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
932
- color: var(--sendbird-light-onlight-02); }
933
- .sendbird-theme--dark .sendbird-button--secondary.sendbird-button__disabled:hover .sendbird-button__text {
934
- color: var(--sendbird-dark-ondark-02); }
935
- .sendbird-theme--light .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
936
- color: var(--sendbird-light-primary-300); }
937
- .sendbird-theme--dark .sendbird-button--secondary:hover .sendbird-button--secondary:focus .sendbird-button__text {
938
- color: var(--sendbird-dark-primary-200); }
939
- .sendbird-button--secondary:focus {
940
- border: 1px solid transparent;
941
- background-color: transparent; }
942
- .sendbird-theme--light .sendbird-button--secondary:focus {
943
- box-shadow: var(--sendbird-light-primary-300) 0px 0px 0px 2px; }
944
- .sendbird-theme--dark .sendbird-button--secondary:focus {
945
- box-shadow: var(--sendbird-dark-primary-200) 0px 0px 0px 2px; }
946
- .sendbird-theme--light .sendbird-button--secondary:focus .sendbird-button__text {
947
- color: var(--sendbird-light-onlight-01); }
948
- .sendbird-theme--dark .sendbird-button--secondary:focus .sendbird-button__text {
949
- color: var(--sendbird-dark-ondark-01); }
950
- .sendbird-button--secondary:active {
951
- box-shadow: none; }
952
- .sendbird-theme--light .sendbird-button--secondary:active {
953
- border: 1px solid var(--sendbird-light-primary-300); }
954
- .sendbird-theme--dark .sendbird-button--secondary:active {
955
- border: 1px solid var(--sendbird-dark-primary-200); }
956
- .sendbird-theme--light .sendbird-button--secondary:active .sendbird-button__text {
957
- color: var(--sendbird-light-primary-300); }
958
- .sendbird-theme--dark .sendbird-button--secondary:active .sendbird-button__text {
959
- color: var(--sendbird-dark-primary-200); }
960
-
961
- .sendbird-theme--light .sendbird-button--danger {
962
- border: 1px solid var(--sendbird-light-error-300);
963
- background-color: var(--sendbird-light-error-300); }
964
-
965
- .sendbird-theme--dark .sendbird-button--danger {
966
- border: 1px solid var(--sendbird-dark-error-200);
967
- background-color: var(--sendbird-dark-error-200); }
968
-
969
- .sendbird-theme--light .sendbird-button--danger .sendbird-button__text {
970
- color: var(--sendbird-light-ondark-01); }
971
-
972
- .sendbird-theme--dark .sendbird-button--danger .sendbird-button__text {
973
- color: var(--sendbird-dark-onlight-01); }
974
-
975
- .sendbird-theme--light .sendbird-button--danger:hover {
976
- background-color: var(--sendbird-light-error-400);
977
- border-color: var(--sendbird-light-error-400); }
978
-
979
- .sendbird-theme--dark .sendbird-button--danger:hover {
980
- background-color: var(--sendbird-dark-error-400);
981
- border-color: var(--sendbird-dark-error-400); }
982
-
983
- .sendbird-theme--light .sendbird-button--danger:focus {
984
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-300);
985
- border-color: var(--sendbird-button-border-focus); }
986
-
987
- .sendbird-theme--dark .sendbird-button--danger:focus {
988
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-300);
989
- border-color: var(--sendbird-button-border-focus); }
990
-
991
- .sendbird-button--danger:active {
992
- box-shadow: none; }
993
- .sendbird-theme--light .sendbird-button--danger:active {
994
- background-color: var(--sendbird-light-error-500); }
995
- .sendbird-theme--dark .sendbird-button--danger:active {
996
- background-color: var(--sendbird-dark-error-500); }
997
-
998
- .sendbird-theme--light .sendbird-button--danger:hover .sendbird-button--danger:focus {
999
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-400); }
1000
-
1001
- .sendbird-theme--dark .sendbird-button--danger:hover .sendbird-button--danger:focus {
1002
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-400); }
1003
-
1004
- .sendbird-theme--light .sendbird-button--danger:active .sendbird-button--danger:focus {
1005
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-error-500); }
1006
-
1007
- .sendbird-theme--dark .sendbird-button--danger:active .sendbird-button--danger:focus {
1008
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-error-500); }
1009
-
1010
- .sendbird-button--disabled {
1011
- border: 1px solid transparent;
1012
- cursor: not-allowed; }
1013
- .sendbird-theme--light .sendbird-button--disabled {
1014
- background-color: var(--sendbird-light-background-200);
1015
- color: var(--sendbird-light-ondark-01); }
1016
- .sendbird-theme--dark .sendbird-button--disabled {
1017
- background-color: var(--sendbird-dark-background-400);
1018
- color: var(--sendbird-dark-onlight-01); }
1019
-
1020
- .sendbird-muted-avatar {
1021
- border-radius: 50%;
1022
- display: inline-block; }
1023
- .sendbird-muted-avatar .sendbird-muted-avatar__icon {
1024
- position: relative; }
1025
- .sendbird-muted-avatar .sendbird-muted-avatar__icon .sendbird-icon {
1026
- position: absolute;
1027
- top: 4px;
1028
- left: 4px; }
1029
- .sendbird-muted-avatar .sendbird-muted-avatar__bg {
1030
- opacity: .5;
1031
- position: absolute;
1032
- border-radius: 50%;
1033
- top: 0;
1034
- left: 0; }
1035
- .sendbird-theme--light .sendbird-muted-avatar .sendbird-muted-avatar__bg {
1036
- background-color: var(--sendbird-light-primary-400); }
1037
- .sendbird-theme--dark .sendbird-muted-avatar .sendbird-muted-avatar__bg {
1038
- background-color: var(--sendbird-dark-primary-300); }
1039
-
1040
- .sendbird-checkbox {
1041
- display: block;
1042
- position: relative;
1043
- padding-left: 35px;
1044
- margin-bottom: 12px;
1045
- cursor: pointer;
1046
- font-size: 22px;
1047
- -webkit-user-select: none;
1048
- -moz-user-select: none;
1049
- -ms-user-select: none;
1050
- user-select: none; }
1051
-
1052
- .sendbird-checkbox input {
1053
- position: absolute;
1054
- opacity: 0;
1055
- cursor: pointer;
1056
- height: 0;
1057
- width: 0; }
1058
-
1059
- .sendbird-checkbox--checkmark {
1060
- position: absolute;
1061
- top: 0;
1062
- left: 0;
1063
- height: 18px;
1064
- width: 18px;
1065
- border-radius: 2px;
1066
- background-color: inherit; }
1067
- .sendbird-theme--light .sendbird-checkbox--checkmark {
1068
- border: 2px solid var(--sendbird-light-background-400); }
1069
- .sendbird-theme--dark .sendbird-checkbox--checkmark {
1070
- border: 2px solid var(--sendbird-dark-background-300); }
1071
-
1072
- .sendbird-theme--light .sendbird-checkbox input:focus ~ .sendbird-checkbox--checkmark {
1073
- box-shadow: 0px 0px 0px 2px var(--sendbird-light-primary-300); }
1074
-
1075
- .sendbird-theme--dark .sendbird-checkbox input:focus ~ .sendbird-checkbox--checkmark {
1076
- box-shadow: 0px 0px 0px 2px var(--sendbird-dark-primary-200); }
1077
-
1078
- .sendbird-theme--light .sendbird-checkbox input:checked ~ .sendbird-checkbox--checkmark {
1079
- background-color: var(--sendbird-light-primary-300);
1080
- border: 2px solid var(--sendbird-light-primary-300); }
1081
-
1082
- .sendbird-theme--dark .sendbird-checkbox input:checked ~ .sendbird-checkbox--checkmark {
1083
- background-color: var(--sendbird-dark-primary-200);
1084
- border: 2px solid var(--sendbird-dark-primary-200); }
1085
-
1086
- .sendbird-checkbox--checkmark:after {
1087
- content: "";
1088
- position: absolute;
1089
- display: none; }
1090
-
1091
- .sendbird-checkbox input:checked ~ .sendbird-checkbox--checkmark:after {
1092
- display: block; }
1093
-
1094
- .sendbird-theme--light .sendbird-checkbox .sendbird-checkbox--checkmark:after {
1095
- left: 5px;
1096
- top: -0.5px;
1097
- width: 7px;
1098
- height: 12px;
1099
- border: solid var(--sendbird-light-background-50);
1100
- border-width: 0 2px 2px 0;
1101
- transform: rotate(45deg); }
1102
-
1103
- .sendbird-theme--dark .sendbird-checkbox .sendbird-checkbox--checkmark:after {
1104
- left: 5px;
1105
- top: -0.5px;
1106
- width: 7px;
1107
- height: 12px;
1108
- border: solid var(--sendbird-dark-background-600);
1109
- border-width: 0 2px 2px 0;
1110
- transform: rotate(45deg); }
1111
-
1112
- .sendbird__user-profile {
1113
- width: 320px;
1114
- border-radius: 4px;
1115
- padding: 24px;
1116
- box-sizing: border-box;
1117
- text-align: center; }
1118
- .sendbird-theme--light .sendbird__user-profile {
1119
- box-shadow: var(--sendbird-light-shadow-02);
1120
- background-color: var(--sendbird-light-background-50); }
1121
- .sendbird-theme--dark .sendbird__user-profile {
1122
- box-shadow: var(--sendbird-dark-shadow-02);
1123
- background-color: var(--sendbird-dark-background-500); }
1124
- .sendbird__user-profile .sendbird__user-profile-avatar {
1125
- margin: 8px 0px; }
1126
- .sendbird__user-profile .sendbird__user-profile-name {
1127
- max-width: 270px;
1128
- white-space: nowrap;
1129
- overflow-x: hidden;
1130
- text-overflow: ellipsis; }
1131
- .sendbird__user-profile .sendbird__user-profile-message {
1132
- margin-top: 20px; }
1133
- .sendbird__user-profile .sendbird__user-profile-message button {
1134
- width: 272px; }
1135
- .sendbird__user-profile .sendbird__user-profile-separator {
1136
- margin: 24px 0px;
1137
- height: 1px; }
1138
- .sendbird-theme--light .sendbird__user-profile .sendbird__user-profile-separator {
1139
- background-color: var(--sendbird-light-onlight-04); }
1140
- .sendbird-theme--dark .sendbird__user-profile .sendbird__user-profile-separator {
1141
- background-color: var(--sendbird-dark-ondark-04); }
1142
- .sendbird__user-profile .sendbird__user-profile-userId--label,
1143
- .sendbird__user-profile .sendbird__user-profile-userId--value {
1144
- display: block;
1145
- text-align: left; }
1146
- .sendbird__user-profile .sendbird__user-profile-userId--label {
1147
- margin-bottom: 8px; }
1148
-
1149
- .sendbird__offline .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
1150
- cursor: not-allowed; }
1151
-
1152
- .sendbird-dropdown__menu {
1153
- z-index: 99999;
1154
- position: absolute;
1155
- top: 100%;
1156
- left: 0;
1157
- min-width: 140px;
1158
- margin: 0px;
1159
- padding: 8px 0px;
1160
- border-radius: 4px;
1161
- list-style: none; }
1162
- .sendbird-theme--light .sendbird-dropdown__menu {
1163
- box-shadow: var(--sendbird-light-shadow-02);
1164
- background-color: var(--sendbird-light-background-50); }
1165
- .sendbird-theme--dark .sendbird-dropdown__menu {
1166
- box-shadow: var(--sendbird-dark-shadow-02);
1167
- background-color: var(--sendbird-dark-background-500); }
1168
- .sendbird-dropdown__menu .sendbird-dropdown__menu-item {
1169
- cursor: pointer;
1170
- white-space: nowrap;
1171
- padding: 8px 16px; }
1172
- .sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable {
1173
- cursor: not-allowed; }
1174
- .sendbird-theme--light .sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable:hover {
1175
- background-color: var(--sendbird-light-background-50); }
1176
- .sendbird-theme--dark .sendbird-dropdown__menu .sendbird-dropdown__menu-item.disable:hover {
1177
- background-color: var(--sendbird-dark-background-500); }
1178
- .sendbird-theme--light .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
1179
- background-color: var(--sendbird-light-background-100); }
1180
- .sendbird-theme--dark .sendbird-dropdown__menu .sendbird-dropdown__menu-item:hover {
1181
- background-color: var(--sendbird-dark-background-400); }
1182
-
1183
- .sendbird-dropdown__reaction-bar {
1184
- position: absolute;
1185
- top: 100%;
1186
- left: 0;
1187
- min-width: 44px;
1188
- max-width: 352px;
1189
- max-height: 208px;
1190
- overflow-y: scroll;
1191
- margin: 0px;
1192
- padding: 8px;
1193
- border-radius: 8px;
1194
- list-style: none; }
1195
- .sendbird-theme--light .sendbird-dropdown__reaction-bar {
1196
- box-shadow: var(--sendbird-light-shadow-02);
1197
- background-color: var(--sendbird-light-background-50); }
1198
- .sendbird-theme--dark .sendbird-dropdown__reaction-bar {
1199
- box-shadow: var(--sendbird-dark-shadow-02);
1200
- background-color: var(--sendbird-dark-background-500); }
1201
- .sendbird-dropdown__reaction-bar .sendbird-dropdown__reaction-bar__row .sendbird-reaction-button, .sendbird-dropdown__reaction-bar .sendbird-dropdown__reaction-bar__row .sendbird-reaction-button--selected {
1202
- margin: 4px; }
1203
-
1204
- .sendbird-dropdown__menu-backdrop {
1205
- background-color: transparent;
1206
- position: fixed;
1207
- top: 0;
1208
- left: 0;
1209
- width: 100%;
1210
- height: 100%; }
1211
-
1212
- .sendbird-reactions--pressed {
1213
- display: block !important; }
1214
-
1215
- .sendbird-icon--pressed {
1216
- display: block !important; }
1217
-
1218
- .sendbird-sort-by-row {
1219
- display: flex;
1220
- justify-content: flex-start;
1221
- align-items: center; }
1222
-
1223
- .sendbird-user-list-item {
1224
- display: block;
1225
- position: relative;
1226
- box-sizing: border-box;
1227
- width: 432px;
1228
- height: 56px; }
1229
- .sendbird-theme--light .sendbird-user-list-item {
1230
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
1231
- background-color: var(--sendbird-light-background-50); }
1232
- .sendbird-theme--dark .sendbird-user-list-item {
1233
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
1234
- background-color: var(--sendbird-dark-background-500); }
1235
- .sendbird-user-list-item__avatar {
1236
- position: absolute;
1237
- top: 8px;
1238
- left: 0px;
1239
- z-index: 1;
1240
- cursor: pointer; }
1241
- .sendbird-user-list-item .sendbird-muted-avatar {
1242
- position: absolute;
1243
- top: 8px;
1244
- left: 0px;
1245
- z-index: 2;
1246
- pointer-events: none; }
1247
- .sendbird-user-list-item__title {
1248
- position: absolute;
1249
- top: 17px;
1250
- left: 56px;
1251
- max-width: 280px;
1252
- white-space: nowrap;
1253
- overflow: hidden;
1254
- text-overflow: ellipsis; }
1255
- .sendbird-user-list-item__subtitle {
1256
- position: absolute;
1257
- top: 23px;
1258
- left: 140px;
1259
- max-width: 237px;
1260
- white-space: nowrap;
1261
- overflow: hidden;
1262
- text-overflow: ellipsis; }
1263
- .sendbird-user-list-item__checkbox {
1264
- position: absolute;
1265
- top: 16px;
1266
- right: 16px; }
1267
- .sendbird-user-list-item__action {
1268
- position: absolute;
1269
- right: 0;
1270
- top: 10px; }
1271
- .sendbird-user-list-item__operator {
1272
- position: absolute;
1273
- right: 40px;
1274
- top: 22px; }
1275
-
1276
- .sendbird__offline .sendbird-channel-preview {
1277
- cursor: not-allowed; }
1278
-
1279
- .sendbird-channel-preview {
1280
- position: relative;
1281
- cursor: pointer;
1282
- box-sizing: border-box;
1283
- width: 320px;
1284
- height: 80px;
1285
- display: flex;
1286
- flex-direction: row;
1287
- align-items: center;
1288
- justify-content: center;
1289
- padding: 12px 16px 12px 16px; }
1290
- .sendbird-theme--light .sendbird-channel-preview {
1291
- border-bottom: solid 1px var(--sendbird-light-onlight-04); }
1292
- .sendbird-theme--dark .sendbird-channel-preview {
1293
- border-bottom: solid 1px var(--sendbird-dark-ondark-04); }
1294
- .sendbird-channel-preview:focus {
1295
- outline: none; }
1296
- .sendbird-channel-preview .sendbird-channel-preview__avatar {
1297
- width: 56px;
1298
- height: 56px; }
1299
- .sendbird-channel-preview .sendbird-channel-preview__content {
1300
- width: 100%;
1301
- height: 100%;
1302
- margin-left: 16px; }
1303
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper {
1304
- display: flex;
1305
- justify-content: space-between;
1306
- width: 216px;
1307
- height: 16px; }
1308
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header {
1309
- display: flex;
1310
- justify-content: flex-start;
1311
- overflow: hidden;
1312
- text-overflow: ellipsis; }
1313
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__broadcast-icon {
1314
- padding-right: 4px; }
1315
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__channel-name {
1316
- overflow: hidden;
1317
- text-overflow: ellipsis;
1318
- max-width: 128px;
1319
- word-break: break-all;
1320
- white-space: nowrap; }
1321
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__total-members {
1322
- margin-top: 2px;
1323
- margin-left: 4px; }
1324
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__header .sendbird-channel-preview__content__upper__header__frozen-icon {
1325
- padding-left: 4px; }
1326
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__last-message-at {
1327
- margin-left: 4px;
1328
- margin-bottom: 4px;
1329
- white-space: nowrap; }
1330
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__upper .sendbird-channel-preview__content__upper__last-message-at.sendbird-message-status {
1331
- max-width: 74px;
1332
- justify-content: flex-end; }
1333
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower {
1334
- margin-top: 8px;
1335
- width: 216px;
1336
- height: 32px;
1337
- display: flex;
1338
- justify-content: space-between; }
1339
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__last-message {
1340
- overflow: hidden;
1341
- text-overflow: ellipsis; }
1342
- .sendbird-channel-preview .sendbird-channel-preview__content .sendbird-channel-preview__content__lower .sendbird-channel-preview__content__lower__unread-message-count {
1343
- display: flex;
1344
- align-items: center;
1345
- margin-left: 8px;
1346
- margin-bottom: 12px; }
1347
- .sendbird-channel-preview .sendbird-channel-preview__action {
1348
- position: absolute;
1349
- top: 12px;
1350
- right: 12px;
1351
- display: inline-block; }
1352
- .sendbird-channel-preview .sendbird-channel-preview__action .sendbird-iconbutton {
1353
- display: none; }
1354
- .sendbird-theme--light .sendbird-channel-preview:hover {
1355
- background-color: var(--sendbird-light-background-100); }
1356
- .sendbird-theme--dark .sendbird-channel-preview:hover {
1357
- background-color: var(--sendbird-dark-background-500); }
1358
- .sendbird-channel-preview:hover .sendbird-channel-preview__action .sendbird-iconbutton {
1359
- display: inline-block; }
1360
- .sendbird-channel-preview:hover .sendbird-channel-preview__content__upper__last-message-at {
1361
- display: none; }
1362
- .sendbird-channel-preview:hover .sendbird-channel-preview__content__lower__unread-message-count {
1363
- display: none; }
1364
-
1365
- .sendbird-channel-preview--active {
1366
- padding: 12px 16px 12px 12px; }
1367
- .sendbird-theme--light .sendbird-channel-preview--active {
1368
- border-left: solid 4px var(--sendbird-light-primary-300);
1369
- border-bottom: solid 1px var(--sendbird-light-onlight-04);
1370
- background-color: var(--sendbird-light-primary-100); }
1371
- .sendbird-theme--dark .sendbird-channel-preview--active {
1372
- border-left: solid 4px var(--sendbird-dark-primary-200);
1373
- border-bottom: solid 1px var(--sendbird-dark-ondark-04);
1374
- background-color: var(--sendbird-dark-background-700); }
1375
- .sendbird-theme--light .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
1376
- color: var(--sendbird-light-primary-300); }
1377
- .sendbird-theme--dark .sendbird-channel-preview--active .sendbird-channel-preview__content__upper__header__channel-name {
1378
- color: var(--sendbird-dark-primary-200); }
1379
-
1380
- .sendbird-chat-header--default-avatar {
1381
- width: 56px;
1382
- height: 56px;
1383
- display: flex;
1384
- justify-content: center;
1385
- align-items: center;
1386
- border-radius: 50%; }
1387
- .sendbird-theme--light .sendbird-chat-header--default-avatar {
1388
- background-color: var(--sendbird-light-secondary-300); }
1389
- .sendbird-theme--dark .sendbird-chat-header--default-avatar {
1390
- background-color: var(--sendbird-dark-secondary-200); }
1391
-
1392
- .sendbird-badge {
1393
- height: 20px;
1394
- min-width: 20px;
1395
- border-radius: 10px;
1396
- display: inline-block; }
1397
- .sendbird-theme--light .sendbird-badge {
1398
- background-color: var(--sendbird-light-primary-300); }
1399
- .sendbird-theme--dark .sendbird-badge {
1400
- background-color: var(--sendbird-dark-primary-200); }
1401
- .sendbird-badge .sendbird-badge__text {
1402
- margin: 0px 6px; }
1403
-
1404
- .sendbird-mention-user-label {
1405
- display: inline-block;
1406
- font-family: var(--sendbird-font-family-default);
1407
- font-size: 14px;
1408
- font-weight: bold;
1409
- font-stretch: normal;
1410
- font-style: normal;
1411
- line-height: 1.43;
1412
- letter-spacing: normal; }
1413
- .sendbird-mention-user-label:hover {
1414
- cursor: pointer; }
1415
- .sendbird-theme--light .sendbird-mention-user-label {
1416
- color: var(--sendbird-light-onlight-01); }
1417
- .sendbird-theme--dark .sendbird-mention-user-label {
1418
- color: var(--sendbird-dark-ondark-01); }
1419
- .sendbird-theme--light .sendbird-mention-user-label.reverse {
1420
- color: var(--sendbird-light-ondark-01); }
1421
- .sendbird-theme--dark .sendbird-mention-user-label.reverse {
1422
- color: var(--sendbird-dark-onlight-01); }
1423
- .sendbird-mention-user-label.purple {
1424
- font-family: Roboto;
1425
- font-size: 18px;
1426
- font-weight: bold;
1427
- font-stretch: normal;
1428
- font-style: normal;
1429
- line-height: normal;
1430
- letter-spacing: normal; }
1431
- .sendbird-theme--light .sendbird-mention-user-label.purple {
1432
- color: var(--sendbird-light-primary-300); }
1433
- .sendbird-theme--dark .sendbird-mention-user-label.purple {
1434
- color: var(--sendbird-dark-primary-200); }
1435
-
1436
- .sendbird-reaction-button {
1437
- border-radius: 8px;
1438
- display: inline-block;
1439
- border: solid 1px transparent;
1440
- cursor: pointer; }
1441
- .sendbird-theme--light .sendbird-reaction-button:hover {
1442
- border: solid 1px var(--sendbird-light-background-100);
1443
- background-color: var(--sendbird-light-background-100); }
1444
- .sendbird-theme--dark .sendbird-reaction-button:hover {
1445
- border: solid 1px var(--sendbird-dark-background-400);
1446
- background-color: var(--sendbird-dark-background-400); }
1447
- .sendbird-reaction-button__inner {
1448
- margin: 3px; }
1449
-
1450
- .sendbird-reaction-button--selected {
1451
- cursor: pointer;
1452
- border-radius: 8px;
1453
- display: inline-block; }
1454
- .sendbird-theme--light .sendbird-reaction-button--selected {
1455
- border: solid 1px var(--sendbird-light-primary-100);
1456
- background-color: var(--sendbird-light-primary-100); }
1457
- .sendbird-theme--dark .sendbird-reaction-button--selected {
1458
- border: solid 1px var(--sendbird-dark-primary-400);
1459
- background-color: var(--sendbird-dark-primary-400); }
1460
- .sendbird-reaction-button--selected:hover {
1461
- border: solid 1px var(--sendbird-selected-reaction-button-border-hover); }
1462
- .sendbird-reaction-button--selected__inner {
1463
- margin: 3px; }
1464
- .sendbird-reaction-button--selected.sendbird-reactions--pressed {
1465
- display: block !important; }
1466
-
1467
- .sendbird-message-status {
1468
- position: relative;
1469
- display: inline-flex;
1470
- align-items: flex-start;
1471
- width: 100%;
1472
- height: 100%; }
1473
- .sendbird-message-status .sendbird-message-status__icon {
1474
- position: relative;
1475
- display: inline-block;
1476
- top: -2px; }
1477
- .sendbird-message-status .sendbird-message-status__icon.hide-icon {
1478
- display: none; }
1479
- .sendbird-message-status .sendbird-message-status__text {
1480
- position: relative;
1481
- display: inline-block;
1482
- margin-left: 4px; }
1483
- .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__try-again {
1484
- text-decoration: underline; }
1485
- .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__try-again:hover {
1486
- cursor: pointer; }
1487
- .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__delete {
1488
- text-decoration: underline; }
1489
- .sendbird-message-status .sendbird-message-status__text .sendbird-message-status__text__delete:hover {
1490
- cursor: pointer; }
1491
-
1492
- .sendbird-loader {
1493
- display: inline-block;
1494
- -webkit-animation: 1s infinite linear;
1495
- animation: 1s infinite linear;
1496
- -webkit-animation-name: rotate;
1497
- animation-name: rotate; }
1498
-
1499
- @-webkit-keyframes rotate {
1500
- from {
1501
- transform: rotate(0); }
1502
- to {
1503
- transform: rotate(360deg); } }
1504
-
1505
- @keyframes rotate {
1506
- from {
1507
- transform: rotate(0); }
1508
- to {
1509
- transform: rotate(360deg); } }
1510
-
1511
- .sendbird-edit-user-profile section {
1512
- margin-top: 16px; }
1513
- .sendbird-edit-user-profile section .sendbird-input-label {
1514
- display: block;
1515
- margin-bottom: 12px; }
1516
-
1517
- .sendbird-edit-user-profile .sendbird-edit-user-profile__img .sendbird-input-label {
1518
- margin-bottom: 12px; }
1519
-
1520
- .sendbird-edit-user-profile__img {
1521
- position: relative; }
1522
-
1523
- .sendbird-edit-user-profile__img__avatar-button {
1524
- position: absolute;
1525
- top: 50px;
1526
- left: 96px; }
1527
-
1528
- .sendbird-edit-user-profile__theme__theme-icon .sendbird-icon {
1529
- cursor: pointer; }
1530
-
1531
- .sendbird-input {
1532
- display: inline-block;
1533
- width: 100%;
1534
- height: 40px;
1535
- position: relative; }
1536
- .sendbird-input .sendbird-input__input {
1537
- width: 100%;
1538
- height: 100%;
1539
- border-radius: 4px;
1540
- font-family: var(--sendbird-font-family-default);
1541
- font-size: 14px;
1542
- font-weight: normal;
1543
- font-stretch: normal;
1544
- font-style: normal;
1545
- line-height: 1.43;
1546
- letter-spacing: normal;
1547
- padding: 10px 16px;
1548
- box-sizing: border-box;
1549
- background-color: inherit; }
1550
- .sendbird-theme--light .sendbird-input .sendbird-input__input {
1551
- color: var(--sendbird-light-onlight-01);
1552
- caret-color: var(--sendbird-light-primary-300);
1553
- border: solid 1px var(--sendbird-light-onlight-03); }
1554
- .sendbird-theme--dark .sendbird-input .sendbird-input__input {
1555
- color: var(--sendbird-dark-ondark-01);
1556
- caret-color: var(--sendbird-dark-primary-200);
1557
- border: solid 1px var(--sendbird-dark-ondark-03); }
1558
- .sendbird-input .sendbird-input__input:focus {
1559
- outline: none; }
1560
- .sendbird-theme--light .sendbird-input .sendbird-input__input:focus {
1561
- box-shadow: 0 1px 5px 0 var(--sendbird-light-onlight-04), 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 2px 1px 0 rgba(0, 0, 0, 0.08);
1562
- color: var(--sendbird-light-onlight-01);
1563
- border: solid 2px var(--sendbird-light-primary-300); }
1564
- .sendbird-theme--dark .sendbird-input .sendbird-input__input:focus {
1565
- box-shadow: 0 1px 5px 0 var(--sendbird-dark-ondark-04), 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 2px 1px 0 rgba(0, 0, 0, 0.08);
1566
- color: var(--sendbird-dark-ondark-01);
1567
- border: solid 2px var(--sendbird-dark-primary-200); }
1568
- .sendbird-theme--light .sendbird-input .sendbird-input__input:active {
1569
- box-shadow: 0 1px 5px 0 var(--sendbird-light-onlight-04), 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 2px 1px 0 rgba(0, 0, 0, 0.08);
1570
- color: var(--sendbird-light-onlight-01);
1571
- border: solid 1px var(--sendbird-light-primary-300); }
1572
- .sendbird-theme--dark .sendbird-input .sendbird-input__input:active {
1573
- box-shadow: 0 1px 5px 0 var(--sendbird-dark-ondark-04), 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 2px 1px 0 rgba(0, 0, 0, 0.08);
1574
- color: var(--sendbird-dark-ondark-01);
1575
- border: solid 1px var(--sendbird-dark-primary-200); }
1576
- .sendbird-input .sendbird-input__input:disabled {
1577
- cursor: not-allowed; }
1578
- .sendbird-theme--light .sendbird-input .sendbird-input__input:disabled {
1579
- background-color: var(--sendbird-light-background-100);
1580
- color: var(--sendbird-light-onlight-03); }
1581
- .sendbird-theme--dark .sendbird-input .sendbird-input__input:disabled {
1582
- background-color: var(--sendbird-dark-background-500);
1583
- color: var(--sendbird-dark-ondark-03); }
1584
- .sendbird-input .sendbird-input__placeholder {
1585
- position: absolute;
1586
- pointer-events: none;
1587
- top: 10px;
1588
- left: 16px;
1589
- font-family: var(--sendbird-font-family-default);
1590
- font-size: 14px;
1591
- line-height: 1.43; }
1592
- .sendbird-theme--light .sendbird-input .sendbird-input__placeholder {
1593
- color: var(--sendbird-light-onlight-03); }
1594
- .sendbird-theme--dark .sendbird-input .sendbird-input__placeholder {
1595
- color: var(--sendbird-dark-ondark-03); }
1596
-
1597
- .sendbird-input-label {
1598
- margin: 4px 0; }
1599
-
1600
- .sendbird-textbutton {
1601
- text-decoration: underline;
1602
- cursor: pointer;
1603
- display: inline-block; }
1604
-
1605
- .sendbird-textbutton--not-underline {
1606
- text-decoration: none;
1607
- cursor: pointer; }
1608
-
1609
- .sendbird-textbutton--disabled {
1610
- cursor: not-allowed; }
1611
- .sendbird-theme--light .sendbird-textbutton--disabled {
1612
- color: var(--sendbird-light-onlight-03); }
1613
- .sendbird-theme--dark .sendbird-textbutton--disabled {
1614
- color: var(--sendbird-dark-ondark-03); }
1615
-
1616
- .sendbird-theme--light .sendbird-color--onbackground-1 {
1617
- color: var(--sendbird-light-onlight-01); }
1618
-
1619
- .sendbird-theme--dark .sendbird-color--onbackground-1 {
1620
- color: var(--sendbird-dark-ondark-01); }
1621
-
1622
- .sendbird-theme--light .sendbird-color--onbackground-1--background-color {
1623
- background-color: var(--sendbird-light-onlight-01); }
1624
-
1625
- .sendbird-theme--dark .sendbird-color--onbackground-1--background-color {
1626
- background-color: var(--sendbird-dark-ondark-01); }
1627
-
1628
- .sendbird-theme--light .sendbird-color--onbackground-2 {
1629
- color: var(--sendbird-light-onlight-02); }
1630
-
1631
- .sendbird-theme--dark .sendbird-color--onbackground-2 {
1632
- color: var(--sendbird-dark-ondark-02); }
1633
-
1634
- .sendbird-theme--light .sendbird-color--onbackground-2--background-color {
1635
- background-color: var(--sendbird-light-onlight-02); }
1636
-
1637
- .sendbird-theme--dark .sendbird-color--onbackground-2--background-color {
1638
- background-color: var(--sendbird-dark-ondark-02); }
1639
-
1640
- .sendbird-theme--light .sendbird-color--onbackground-3 {
1641
- color: var(--sendbird-light-onlight-03); }
1642
-
1643
- .sendbird-theme--dark .sendbird-color--onbackground-3 {
1644
- color: var(--sendbird-dark-ondark-03); }
1645
-
1646
- .sendbird-theme--light .sendbird-color--onbackground-3--background-color {
1647
- background-color: var(--sendbird-light-onlight-03); }
1648
-
1649
- .sendbird-theme--dark .sendbird-color--onbackground-3--background-color {
1650
- background-color: var(--sendbird-dark-ondark-03); }
1651
-
1652
- .sendbird-theme--light .sendbird-color--onbackground-4 {
1653
- color: var(--sendbird-light-onlight-04); }
1654
-
1655
- .sendbird-theme--dark .sendbird-color--onbackground-4 {
1656
- color: var(--sendbird-dark-ondark-04); }
1657
-
1658
- .sendbird-theme--light .sendbird-color--onbackground-4--background-color {
1659
- background-color: var(--sendbird-light-onlight-04); }
1660
-
1661
- .sendbird-theme--dark .sendbird-color--onbackground-4--background-color {
1662
- background-color: var(--sendbird-dark-ondark-04); }
1663
-
1664
- .sendbird-theme--light .sendbird-color--oncontent-1 {
1665
- color: var(--sendbird-light-ondark-01); }
1666
-
1667
- .sendbird-theme--dark .sendbird-color--oncontent-1 {
1668
- color: var(--sendbird-dark-onlight-01); }
1669
-
1670
- .sendbird-theme--light .sendbird-color--oncontent-1--background-color {
1671
- background-color: var(--sendbird-light-ondark-01); }
1672
-
1673
- .sendbird-theme--dark .sendbird-color--oncontent-1--background-color {
1674
- background-color: var(--sendbird-dark-onlight-01); }
1675
-
1676
- .sendbird-theme--light .sendbird-color--primary {
1677
- color: var(--sendbird-light-primary-300); }
1678
-
1679
- .sendbird-theme--dark .sendbird-color--primary {
1680
- color: var(--sendbird-dark-primary-200); }
1681
-
1682
- .sendbird-theme--light .sendbird-color--primary--background-color {
1683
- background-color: var(--sendbird-light-primary-300); }
1684
-
1685
- .sendbird-theme--dark .sendbird-color--primary--background-color {
1686
- background-color: var(--sendbird-dark-primary-200); }
1687
-
1688
- .sendbird-theme--light .sendbird-color--error {
1689
- color: var(--sendbird-light-error-300); }
1690
-
1691
- .sendbird-theme--dark .sendbird-color--error {
1692
- color: var(--sendbird-dark-error-200); }
1693
-
1694
- .sendbird-theme--light .sendbird-color--error--background-color {
1695
- background-color: var(--sendbird-light-error-300); }
1696
-
1697
- .sendbird-theme--dark .sendbird-color--error--background-color {
1698
- background-color: var(--sendbird-dark-error-300); }
1699
-
1700
- .sendbird-place-holder {
1701
- position: relative;
1702
- display: flex;
1703
- justify-content: center;
1704
- align-items: center;
1705
- width: 100%;
1706
- height: 100%; }
1707
- .sendbird-place-holder .sendbird-place-holder__body {
1708
- display: flex;
1709
- flex-direction: column;
1710
- height: 104px;
1711
- align-items: center; }
1712
- .sendbird-place-holder .sendbird-place-holder__body .sendbird-place-holder__body__icon {
1713
- margin-bottom: 10px; }
1714
- .sendbird-place-holder .sendbird-place-holder__body .sendbird-place-holder__body__text {
1715
- margin-top: 10px; }
1716
- .sendbird-place-holder .sendbird-place-holder__body__reconnect {
1717
- margin-top: 18px;
1718
- display: flex;
1719
- flex-direction: row;
1720
- cursor: pointer; }
1721
- .sendbird-place-holder .sendbird-place-holder__body__reconnect .sendbird-place-holder__body__reconnect__icon {
1722
- margin-right: 4px; }
1723
- .sendbird-place-holder .sendbird-place-holder__body--align-top {
1724
- position: absolute;
1725
- top: 24px;
1726
- display: flex;
1727
- width: 100%;
1728
- flex-direction: column;
1729
- justify-content: center; }
1730
- .sendbird-place-holder .sendbird-place-holder__body--align-top .sendbird-place-holder__body--align-top__text {
1731
- display: flex;
1732
- flex-direction: row;
1733
- justify-content: center;
1734
- padding-left: 16px;
1735
- padding-right: 16px; }
1736
- .sendbird-place-holder .sendbird-place-holder__body--align-top .sendbird-place-holder__body--align-top__text .sendbird-place-holder__body--align-top__text__search-in {
1737
- display: flex;
1738
- min-width: 60px;
1739
- margin-right: 2px; }
1740
- .sendbird-place-holder .sendbird-place-holder__body--align-top .sendbird-place-holder__body--align-top__text .sendbird-place-holder__body--align-top__text__channel-name {
1741
- display: block;
1742
- max-width: calc(100% - 62px);
1743
- white-space: nowrap;
1744
- overflow: hidden;
1745
- text-overflow: ellipsis; }
1746
- .sendbird-place-holder .sendbird-place-holder__body--align-top .sendbird-place-hlder__body--align-top__searching,
1747
- .sendbird-place-holder .sendbird-place-holder__body--align-top .sendbird-place-hlder__body--align-top__no-result {
1748
- display: flex;
1749
- justify-content: center; }
1750
-
1751
- .sendbird-conversation {
1752
- display: flex;
1753
- flex-direction: column;
1754
- width: 100%;
1755
- height: 100%;
1756
- box-sizing: border-box; }
1757
- .sendbird-theme--light .sendbird-conversation {
1758
- background-color: var(--sendbird-light-background-50);
1759
- border: 1px solid var(--sendbird-light-onlight-04); }
1760
- .sendbird-theme--dark .sendbird-conversation {
1761
- background-color: var(--sendbird-dark-background-600);
1762
- border: 1px solid var(--sendbird-dark-ondark-04); }
1763
-
1764
- .sendbird-conversation__messages {
1765
- overflow-y: auto;
1766
- flex: 1 1 0;
1767
- order: 2; }
1768
-
1769
- .sendbird-conversation__messages-list {
1770
- display: flex;
1771
- flex-direction: column;
1772
- height: 100%;
1773
- justify-content: flex-end; }
1774
-
1775
- .sendbird-conversation__footer {
1776
- width: 100%;
1777
- order: 3;
1778
- padding: 0px 0px 24px 0px; }
1779
-
1780
- @-webkit-keyframes sbHighlight {
1781
- 0% {
1782
- background-color: #FFF2B6; }
1783
- 99% {
1784
- background-color: #FFF2B6; } }
1785
-
1786
- @keyframes sbHighlight {
1787
- 0% {
1788
- background-color: #FFF2B6; }
1789
- 99% {
1790
- background-color: #FFF2B6; } }
1791
-
1792
- @-webkit-keyframes sbTextHighlight {
1793
- 0% {
1794
- color: var(--sendbird-dark-onlight-01); }
1795
- 99% {
1796
- color: var(--sendbird-dark-onlight-01); } }
1797
-
1798
- @keyframes sbTextHighlight {
1799
- 0% {
1800
- color: var(--sendbird-dark-onlight-01); }
1801
- 99% {
1802
- color: var(--sendbird-dark-onlight-01); } }
1803
-
1804
- @-webkit-keyframes sbHighlightBlock {
1805
- 0% {
1806
- opacity: 0.5;
1807
- background-color: #FFF2B6; }
1808
- 99% {
1809
- opacity: 0.5;
1810
- background-color: #FFF2B6; } }
1811
-
1812
- @keyframes sbHighlightBlock {
1813
- 0% {
1814
- opacity: 0.5;
1815
- background-color: #FFF2B6; }
1816
- 99% {
1817
- opacity: 0.5;
1818
- background-color: #FFF2B6; } }
1819
-
1820
- .sendbird-msg-hoc__animated .sendbird-message-content {
1821
- -webkit-animation: bounce 1s ease;
1822
- animation: bounce 1s ease; }
1823
-
1824
- @-webkit-keyframes bounce {
1825
- 50% {
1826
- transform: translateY(-10px); }
1827
- 60% {
1828
- transform: translateY(0); }
1829
- 90% {
1830
- transform: translateY(-10px); }
1831
- 100% {
1832
- transform: translateY(0); } }
1833
-
1834
- @keyframes bounce {
1835
- 50% {
1836
- transform: translateY(-10px); }
1837
- 60% {
1838
- transform: translateY(0); }
1839
- 90% {
1840
- transform: translateY(-10px); }
1841
- 100% {
1842
- transform: translateY(0); } }
1843
-
1844
- .sendbird-msg-hoc__highlighted .sendbird-text-message-item-body,
1845
- .sendbird-msg-hoc__highlighted .sendbird-file-message-item-body {
1846
- -webkit-animation-name: sbHighlight;
1847
- animation-name: sbHighlight;
1848
- -webkit-animation-duration: 1.6s;
1849
- animation-duration: 1.6s;
1850
- -webkit-animation-fill-mode: forwards;
1851
- animation-fill-mode: forwards; }
1852
-
1853
- .sendbird-msg-hoc__highlighted .sendbird-text-message-item-body__message,
1854
- .sendbird-msg-hoc__highlighted .sendbird-file-message-item-body__file-name__text {
1855
- -webkit-animation-name: sbTextHighlight;
1856
- animation-name: sbTextHighlight;
1857
- -webkit-animation-duration: 1.6s;
1858
- animation-duration: 1.6s;
1859
- -webkit-animation-fill-mode: forwards;
1860
- animation-fill-mode: forwards; }
1861
-
1862
- .sendbird-msg-hoc__highlighted .sendbird-thumbnail-message-item-body
1863
- .sendbird-thumbnail-message-item-body__image-cover {
1864
- display: block;
1865
- -webkit-animation-name: sbHighlightBlock;
1866
- animation-name: sbHighlightBlock;
1867
- -webkit-animation-duration: 1.6s;
1868
- animation-duration: 1.6s;
1869
- -webkit-animation-fill-mode: forwards;
1870
- animation-fill-mode: forwards; }
1871
-
1872
- .sendbird-msg-hoc__highlighted .sendbird-og-message-item-body
1873
- .sendbird-og-message-item-body__cover {
1874
- display: block;
1875
- -webkit-animation-name: sbHighlightBlock;
1876
- animation-name: sbHighlightBlock;
1877
- -webkit-animation-duration: 1.6s;
1878
- animation-duration: 1.6s;
1879
- -webkit-animation-fill-mode: forwards;
1880
- animation-fill-mode: forwards; }
1881
-
1882
- .sendbird-msg-hoc__highlighted .sendbird-message-content-reactions {
1883
- -webkit-animation-name: sbHighlight;
1884
- animation-name: sbHighlight;
1885
- -webkit-animation-duration: 1.6s;
1886
- animation-duration: 1.6s;
1887
- -webkit-animation-fill-mode: forwards;
1888
- animation-fill-mode: forwards; }
1889
-
1890
- .sendbird-conversation__scroll-container {
1891
- display: flex;
1892
- height: 100%;
1893
- overflow-y: auto;
1894
- overflow-x: hidden;
1895
- flex-direction: column; }
1896
- .sendbird-conversation__scroll-container .sendbird-conversation__padding {
1897
- flex: 1 1 0; }
1898
-
1899
- .sendbird-conversation__footer {
1900
- position: relative;
1901
- box-sizing: border-box;
1902
- margin-top: 6px; }
1903
- .sendbird-conversation__footer .sendbird-conversation__footer__typing-indicator {
1904
- position: absolute;
1905
- display: inline-flex;
1906
- bottom: 8px; }
1907
- .sendbird-conversation__footer .sendbird-conversation__footer__typing-indicator .sendbird-conversation__footer__typing-indicator__text {
1908
- margin-left: 24px;
1909
- margin-right: 10px; }
1910
-
1911
- .sendbird-connection-status {
1912
- display: flex;
1913
- align-items: center;
1914
- padding-top: 5px; }
1915
-
1916
- .sendbird-chat-header {
1917
- position: relative;
1918
- display: flex;
1919
- flex-direction: row;
1920
- justify-content: space-between;
1921
- align-items: center;
1922
- height: 64px;
1923
- min-height: 64px;
1924
- padding-left: 20px;
1925
- padding-right: 16px;
1926
- overflow: hidden;
1927
- text-overflow: ellipsis;
1928
- box-sizing: border-box; }
1929
- .sendbird-theme--light .sendbird-chat-header {
1930
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
1931
- background-color: var(--sendbird-light-background-50); }
1932
- .sendbird-theme--dark .sendbird-chat-header {
1933
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
1934
- background-color: var(--sendbird-dark-background-600); }
1935
- .sendbird-chat-header__left {
1936
- margin-right: 24px; }
1937
- .sendbird-chat-header__left, .sendbird-chat-header__right {
1938
- overflow: hidden;
1939
- display: flex;
1940
- flex-direction: row;
1941
- align-items: center; }
1942
- .sendbird-chat-header .sendbird-chat-header__left__title {
1943
- margin-left: 8px;
1944
- margin-right: 16px;
1945
- overflow: hidden;
1946
- text-overflow: ellipsis;
1947
- white-space: nowrap;
1948
- max-width: 780px; }
1949
- .sendbird-chat-header .sendbird-chat-header__left__subtitle {
1950
- max-width: 240px;
1951
- overflow: hidden;
1952
- text-overflow: ellipsis; }
1953
- .sendbird-chat-header .sendbird-chat-header__right__mute {
1954
- margin-right: 26px; }
1955
- .sendbird-chat-header .sendbird-iconbutton--pressed {
1956
- background-color: inherit; }
1957
- .sendbird-chat-header .sendbird-chat-header__right__info {
1958
- margin-left: 16px; }
1959
-
1960
- .sendbird-conversation__messages .sendbird-conversation__messages-padding {
1961
- padding-left: 24px;
1962
- padding-right: 24px;
1963
- height: 100%;
1964
- overflow: scroll; }
1965
-
1966
- .sendbird-conversation__messages .sendbird-separator,
1967
- .sendbird-conversation__messages .sendbird-admin-message {
1968
- padding-top: 8px;
1969
- padding-bottom: 8px; }
1970
-
1971
- .sendbird-conversation__scroll-bottom-button {
1972
- position: -webkit-sticky;
1973
- position: sticky;
1974
- display: flex;
1975
- align-items: center;
1976
- justify-content: center;
1977
- bottom: 30px;
1978
- left: calc(100% - 65px);
1979
- width: 40px;
1980
- height: 40px;
1981
- border-radius: 24px;
1982
- z-index: 1; }
1983
- .sendbird-theme--light .sendbird-conversation__scroll-bottom-button {
1984
- background-color: var(--sendbird-light-background-50);
1985
- box-shadow: var(--sendbird-light-shadow-05); }
1986
- .sendbird-theme--dark .sendbird-conversation__scroll-bottom-button {
1987
- background-color: var(--sendbird-dark-background-400);
1988
- box-shadow: var(--sendbird-dark-shadow-05); }
1989
- .sendbird-conversation__scroll-bottom-button:hover {
1990
- cursor: pointer; }
1991
- .sendbird-theme--light .sendbird-conversation__scroll-bottom-button:hover {
1992
- background-color: var(--sendbird-light-background-100); }
1993
- .sendbird-theme--dark .sendbird-conversation__scroll-bottom-button:hover {
1994
- background-color: var(--sendbird-dark-background-500); }
1995
- .sendbird-theme--light .sendbird-conversation__scroll-bottom-button:active {
1996
- background-color: var(--sendbird-light-background-200); }
1997
- .sendbird-theme--dark .sendbird-conversation__scroll-bottom-button:active {
1998
- background-color: var(--sendbird-dark-background-700); }
1999
- .sendbird-conversation__scroll-bottom-button:focus {
2000
- outline: none; }
2001
-
2002
- .sendbird-mention-suggest-list {
2003
- position: relative;
2004
- display: flex;
2005
- flex-direction: column;
2006
- width: calc(100% - 56px);
2007
- max-height: 260px;
2008
- overflow: scroll;
2009
- margin-left: 28px;
2010
- margin-right: 28px; }
2011
- .sendbird-theme--light .sendbird-mention-suggest-list {
2012
- border: 1px solid var(--sendbird-light-background-100); }
2013
- .sendbird-theme--dark .sendbird-mention-suggest-list {
2014
- border: 1px solid var(--sendbird-dark-background-500); }
2015
- .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item {
2016
- position: relative;
2017
- display: flex;
2018
- align-items: center;
2019
- padding: 16px 8px; }
2020
- .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item {
2021
- background-color: var(--sendbird-light-background-50); }
2022
- .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item {
2023
- background-color: var(--sendbird-dark-background-600); }
2024
- .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
2025
- cursor: pointer; }
2026
- .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
2027
- background-color: var(--sendbird-light-background-100); }
2028
- .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item:hover {
2029
- background-color: var(--sendbird-dark-background-500); }
2030
- .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item.focused {
2031
- background-color: var(--sendbird-light-background-100); }
2032
- .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item.focused {
2033
- background-color: var(--sendbird-dark-background-500); }
2034
- .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__avatar {
2035
- position: relative;
2036
- display: inline-block; }
2037
- .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__nickname {
2038
- position: relative;
2039
- display: inline-block;
2040
- margin-left: 16px; }
2041
- .sendbird-mention-suggest-list .sendbird-mention-suggest-list__user-item .sendbird-mention-suggest-list__user-item__user-id {
2042
- position: absolute;
2043
- display: inline-block;
2044
- right: 16px; }
2045
- .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
2046
- position: relative;
2047
- display: flex;
2048
- align-items: center;
2049
- padding: 16px 8px; }
2050
- .sendbird-theme--light .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
2051
- background-color: var(--sendbird-light-background-50); }
2052
- .sendbird-theme--dark .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item {
2053
- background-color: var(--sendbird-dark-background-600); }
2054
- .sendbird-mention-suggest-list .sendbird-mention-suggest-list__notice-item .sendbird-mention-suggest-list__notice-item__icon {
2055
- margin-right: 4px; }
2056
-
2057
- .sendbird-separator {
2058
- width: 100%;
2059
- display: flex;
2060
- align-items: center; }
2061
- .sendbird-separator .sendbird-separator__left {
2062
- border: none;
2063
- height: 1px;
2064
- display: inline-block;
2065
- width: 100%; }
2066
- .sendbird-separator .sendbird-separator__right {
2067
- border: none;
2068
- height: 1px;
2069
- display: inline-block;
2070
- width: 100%; }
2071
- .sendbird-separator .sendbird-separator__text {
2072
- margin: 0px 16px;
2073
- display: flex;
2074
- white-space: nowrap; }
2075
-
2076
- .sendbird-message-input {
2077
- display: inline-block;
2078
- width: 100%;
2079
- position: relative; }
2080
- .sendbird-message-input .sendbird-message-input--textarea {
2081
- width: 100%;
2082
- border-radius: 4px;
2083
- font-size: 14px;
2084
- font-weight: normal;
2085
- font-stretch: normal;
2086
- font-style: normal;
2087
- line-height: 1.43;
2088
- height: 56px;
2089
- overflow-y: hidden;
2090
- letter-spacing: normal;
2091
- padding: 18px 64px 18px 16px;
2092
- box-sizing: border-box;
2093
- resize: none;
2094
- font-family: var(--sendbird-font-family-default);
2095
- background-color: inherit;
2096
- white-space: pre-wrap; }
2097
- .sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea {
2098
- color: var(--sendbird-light-onlight-01);
2099
- caret-color: var(--sendbird-light-primary-300);
2100
- border: solid 1px var(--sendbird-light-onlight-03);
2101
- background-color: var(--sendbird-light-background-50); }
2102
- .sendbird-theme--dark .sendbird-message-input .sendbird-message-input--textarea {
2103
- color: var(--sendbird-dark-ondark-01);
2104
- caret-color: var(--sendbird-dark-primary-200);
2105
- border: solid 1px var(--sendbird-dark-ondark-03);
2106
- background-color: var(--sendbird-dark-background-500); }
2107
- .sendbird-message-input .sendbird-message-input--textarea:focus {
2108
- outline: none; }
2109
- .sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea:focus {
2110
- color: var(--sendbird-light-onlight-01);
2111
- border: solid 1px var(--sendbird-light-primary-300);
2112
- box-shadow: var(--sendbird-light-shadow-message-input); }
2113
- .sendbird-theme--dark .sendbird-message-input .sendbird-message-input--textarea:focus {
2114
- color: var(--sendbird-dark-ondark-01);
2115
- border: solid 1px var(--sendbird-dark-primary-200);
2116
- box-shadow: var(--sendbird-dark-shadow-message-input); }
2117
- .sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea:active {
2118
- border: solid 1px var(--sendbird-message-input-border-active);
2119
- color: var(--sendbird-light-onlight-01); }
2120
- .sendbird-theme--dark .sendbird-message-input .sendbird-message-input--textarea:active {
2121
- border: solid 1px var(--sendbird-message-input-border-active);
2122
- color: var(--sendbird-dark-ondark-01); }
2123
- .sendbird-message-input .sendbird-message-input--placeholder {
2124
- position: absolute;
2125
- pointer-events: none;
2126
- top: 18px;
2127
- left: 16px;
2128
- font-family: var(--sendbird-font-family-default);
2129
- font-size: 14px;
2130
- line-height: 1.43; }
2131
- .sendbird-theme--light .sendbird-message-input .sendbird-message-input--placeholder {
2132
- color: var(--sendbird-light-onlight-03); }
2133
- .sendbird-theme--dark .sendbird-message-input .sendbird-message-input--placeholder {
2134
- color: var(--sendbird-dark-ondark-03); }
2135
- .sendbird-message-input .sendbird-message-input--attach {
2136
- position: absolute;
2137
- right: 12px;
2138
- bottom: 18px;
2139
- padding: 6px; }
2140
- .sendbird-message-input .sendbird-message-input--send {
2141
- position: absolute;
2142
- padding: 6px;
2143
- right: 16px;
2144
- bottom: 16px; }
2145
- .sendbird-message-input .sendbird-message-input--attach-input {
2146
- display: none; }
2147
-
2148
- .sendbird-message-input__edit {
2149
- padding: 16px;
2150
- box-sizing: border-box; }
2151
- .sendbird-theme--light .sendbird-message-input__edit {
2152
- background-color: var(--sendbird-light-primary-100); }
2153
- .sendbird-theme--dark .sendbird-message-input__edit {
2154
- background-color: var(--sendbird-dark-background-700); }
2155
-
2156
- .sendbird-message-input--edit-action {
2157
- text-align: right;
2158
- margin-top: 4px; }
2159
- .sendbird-message-input--edit-action button:last-child {
2160
- margin-left: 8px; }
2161
- .sendbird-message-input--edit-action .sendbird-message-input--edit-action__cancel {
2162
- width: 80px; }
2163
- .sendbird-theme--light .sendbird-message-input--edit-action .sendbird-message-input--edit-action__cancel {
2164
- border: solid 1px var(--sendbird-light-onlight-03); }
2165
- .sendbird-theme--dark .sendbird-message-input--edit-action .sendbird-message-input--edit-action__cancel {
2166
- border: solid 1px var(--sendbird-dark-ondark-03); }
2167
- .sendbird-message-input--edit-action .sendbird-message-input--edit-action__save {
2168
- width: 80px; }
2169
-
2170
- .sendbird-message-input-form__disabled {
2171
- cursor: not-allowed; }
2172
-
2173
- .sendbird-message-input__disabled {
2174
- pointer-events: none;
2175
- cursor: disabled; }
2176
- .sendbird-theme--light .sendbird-message-input__disabled .sendbird-message-input--textarea {
2177
- background-color: var(--sendbird-light-background-100); }
2178
- .sendbird-theme--dark .sendbird-message-input__disabled .sendbird-message-input--textarea {
2179
- background-color: var(--sendbird-dark-background-500); }
2180
- .sendbird-theme--light .sendbird-message-input__disabled svg {
2181
- fill: var(--sendbird-light-onlight-03); }
2182
- .sendbird-theme--dark .sendbird-message-input__disabled svg {
2183
- fill: var(--sendbird-dark-ondark-03); }
2184
-
2185
- .sendbird-message-content {
2186
- position: relative;
2187
- display: inline-flex;
2188
- flex-direction: row;
2189
- width: 100%;
2190
- height: 100%; }
2191
- .sendbird-message-content.incoming {
2192
- justify-content: flex-start; }
2193
- .sendbird-message-content.outgoing {
2194
- justify-content: flex-end; }
2195
- .sendbird-message-content .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.use-quote {
2196
- margin-top: -8px;
2197
- bottom: -8px; }
2198
-
2199
- .sendbird-message-content.incoming .sendbird-message-content__left {
2200
- position: relative;
2201
- display: inline-flex;
2202
- min-width: 40px; }
2203
- .sendbird-message-content.incoming .sendbird-message-content__left .sendbird-message-content__left__avatar {
2204
- position: absolute;
2205
- left: 0px;
2206
- bottom: 2px; }
2207
-
2208
- .sendbird-message-content.incoming .sendbird-message-content__middle {
2209
- position: relative;
2210
- display: inline-flex;
2211
- flex-direction: column;
2212
- max-width: 400px;
2213
- align-items: flex-start; }
2214
- .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
2215
- position: absolute;
2216
- bottom: 6px;
2217
- right: -84px;
2218
- white-space: nowrap;
2219
- display: flex;
2220
- flex-direction: row;
2221
- min-width: 80px; }
2222
- .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at.supposed-hover {
2223
- display: none; }
2224
- .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__sender-name {
2225
- position: relative;
2226
- margin-left: 12px;
2227
- margin-bottom: 4px; }
2228
- .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__quote-message {
2229
- position: relative;
2230
- width: 100%;
2231
- display: inline-flex; }
2232
- .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.outgoing {
2233
- justify-content: flex-end; }
2234
- .sendbird-message-content.incoming .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.incoming {
2235
- justify-content: flex-start; }
2236
-
2237
- .sendbird-message-content.incoming .sendbird-message-content__right {
2238
- position: relative;
2239
- display: inline-flex;
2240
- width: 50px;
2241
- margin-left: 4px;
2242
- padding-top: 18px; }
2243
- .sendbird-message-content.incoming .sendbird-message-content__right.use-reactions {
2244
- width: 70px; }
2245
- .sendbird-message-content.incoming .sendbird-message-content__right.chain-top {
2246
- padding-top: 2px; }
2247
- .sendbird-message-content.incoming .sendbird-message-content__right.chain-top.use-quote {
2248
- padding-top: 18px; }
2249
- .sendbird-message-content.incoming .sendbird-message-content__right .sendbird-message-content-menu {
2250
- position: relative;
2251
- flex-direction: row;
2252
- height: 32px;
2253
- display: none; }
2254
- .sendbird-message-content.incoming .sendbird-message-content__right .sendbird-message-content-menu.supposed-hover {
2255
- display: inline-flex; }
2256
-
2257
- .sendbird-message-content.incoming:hover .sendbird-message-content__right .sendbird-message-content-menu {
2258
- display: inline-flex; }
2259
-
2260
- .sendbird-message-content.incoming:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
2261
- display: none; }
2262
-
2263
- .sendbird-message-content.outgoing .sendbird-message-content__left {
2264
- position: relative;
2265
- box-sizing: border-box;
2266
- display: inline-flex;
2267
- justify-content: flex-end;
2268
- width: 50px; }
2269
- .sendbird-message-content.outgoing .sendbird-message-content__left.use-reactions {
2270
- width: 70px; }
2271
- .sendbird-message-content.outgoing .sendbird-message-content__left.use-quote .sendbird-message-content-menu {
2272
- top: 18px; }
2273
- .sendbird-message-content.outgoing .sendbird-message-content__left .sendbird-message-content-menu {
2274
- position: absolute;
2275
- top: 2px;
2276
- right: 4px;
2277
- flex-direction: row;
2278
- display: none; }
2279
- .sendbird-message-content.outgoing .sendbird-message-content__left .sendbird-message-content-menu.supposed-hover {
2280
- display: inline-flex; }
2281
-
2282
- .sendbird-message-content.outgoing .sendbird-message-content__middle {
2283
- position: relative;
2284
- display: inline-flex;
2285
- flex-direction: column;
2286
- max-width: 400px;
2287
- align-items: flex-end; }
2288
- .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__quote-message {
2289
- position: relative;
2290
- width: 100%;
2291
- display: inline-flex; }
2292
- .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.outgoing {
2293
- justify-content: flex-end; }
2294
- .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__quote-message.incoming {
2295
- justify-content: flex-start; }
2296
- .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container {
2297
- position: relative;
2298
- width: -webkit-fit-content;
2299
- width: -moz-fit-content;
2300
- width: fit-content; }
2301
- .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
2302
- position: absolute;
2303
- bottom: 2px;
2304
- left: -84px;
2305
- white-space: nowrap;
2306
- display: flex;
2307
- justify-content: flex-end;
2308
- box-sizing: content-box;
2309
- min-width: 80px;
2310
- min-height: 16px; }
2311
- .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at.supposed-hover {
2312
- display: none; }
2313
- .sendbird-message-content.outgoing .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at .sendbird-message-content__middle__body-container__created-at__component-container {
2314
- position: relative;
2315
- display: inline-flex; }
2316
-
2317
- .sendbird-message-content.outgoing .sendbird-message-content__right {
2318
- display: none; }
2319
-
2320
- .sendbird-message-content.outgoing:hover .sendbird-message-content__left .sendbird-message-content-menu {
2321
- display: inline-flex; }
2322
-
2323
- .sendbird-message-content.outgoing:hover .sendbird-message-content__middle .sendbird-message-content__middle__body-container .sendbird-message-content__middle__body-container__created-at {
2324
- display: none; }
2325
-
2326
- .sendbird-message-content__middle__body-container {
2327
- position: relative;
2328
- width: -webkit-fit-content;
2329
- width: -moz-fit-content;
2330
- width: fit-content;
2331
- display: flex;
2332
- flex-direction: column; }
2333
- .sendbird-message-content__middle__body-container .sendbird-message-content__middle__message-item-body {
2334
- width: 100%;
2335
- box-sizing: border-box; }
2336
- .sendbird-message-content__middle__body-container .sendbird-message-content-reactions {
2337
- width: 100%; }
2338
-
2339
- .sendbird-message-content-reactions {
2340
- position: relative;
2341
- width: 100%;
2342
- border-radius: 0px 0px 16px 16px; }
2343
- .sendbird-theme--light .sendbird-message-content-reactions {
2344
- background-color: var(--sendbird-light-background-100); }
2345
- .sendbird-theme--dark .sendbird-message-content-reactions {
2346
- background-color: var(--sendbird-dark-background-500); }
2347
- .sendbird-theme--light .sendbird-message-content-reactions.primary {
2348
- background-color: var(--sendbird-light-primary-300); }
2349
- .sendbird-theme--dark .sendbird-message-content-reactions.primary {
2350
- background-color: var(--sendbird-dark-primary-200); }
2351
- .sendbird-theme--light .sendbird-message-content-reactions.mouse-hover, .sendbird-theme--light .sendbird-message-content-reactions:hover {
2352
- background-color: var(--sendbird-light-background-200); }
2353
- .sendbird-theme--dark .sendbird-message-content-reactions.mouse-hover, .sendbird-theme--dark .sendbird-message-content-reactions:hover {
2354
- background-color: var(--sendbird-dark-background-400); }
2355
- .sendbird-theme--light .sendbird-message-content-reactions.mouse-hover.primary, .sendbird-theme--light .sendbird-message-content-reactions:hover.primary {
2356
- background-color: var(--sendbird-light-primary-400); }
2357
- .sendbird-theme--dark .sendbird-message-content-reactions.mouse-hover.primary, .sendbird-theme--dark .sendbird-message-content-reactions:hover.primary {
2358
- background-color: var(--sendbird-dark-primary-300); }
2359
-
2360
- .sendbird-message-item-menu__list__menu-item:focus-visible {
2361
- outline: none; }
2362
-
2363
- .sendbird-text {
2364
- color: var(--primary-1); }
2365
-
2366
- .sendbird-emoji-reactions {
2367
- display: inline-flex;
2368
- flex-direction: row;
2369
- justify-content: flex-start;
2370
- border-radius: 16px;
2371
- box-sizing: border-box;
2372
- width: 100%;
2373
- max-width: var(--sendbird-message-balloon-width);
2374
- min-height: 24px;
2375
- padding: 7px 5px 3px 5px; }
2376
- .sendbird-theme--light .sendbird-emoji-reactions {
2377
- background-color: var(--sendbird-light-background-50);
2378
- border: 1px solid var(--sendbird-light-background-100); }
2379
- .sendbird-theme--dark .sendbird-emoji-reactions {
2380
- background-color: var(--sendbird-dark-background-600);
2381
- border: 1px solid var(--sendbird-dark-background-500); }
2382
- .sendbird-emoji-reactions .sendbird-emoji-reactions__reaction-badge {
2383
- display: inline-flex;
2384
- margin-left: 2px;
2385
- margin-right: 2px;
2386
- margin-bottom: 4px; }
2387
- .sendbird-emoji-reactions:focus {
2388
- outline: none; }
2389
-
2390
- .sendbird-emoji-reactions__add-reaction-badge {
2391
- display: inline-flex;
2392
- width: 36px;
2393
- height: 24px; }
2394
-
2395
- .sendbird-tooltip {
2396
- position: relative;
2397
- display: inline-flex;
2398
- justify-content: center;
2399
- max-width: 200px;
2400
- border-radius: 8px;
2401
- padding: 8px 16px; }
2402
- .sendbird-theme--light .sendbird-tooltip {
2403
- background-color: var(--sendbird-light-background-700); }
2404
- .sendbird-theme--dark .sendbird-tooltip {
2405
- background-color: var(--sendbird-dark-background-300); }
2406
- .sendbird-tooltip::after {
2407
- content: '';
2408
- position: absolute;
2409
- bottom: -4px;
2410
- width: 8px;
2411
- height: 8px;
2412
- transform: rotate(45deg); }
2413
- .sendbird-theme--light .sendbird-tooltip::after {
2414
- background-color: var(--sendbird-light-background-700); }
2415
- .sendbird-theme--dark .sendbird-tooltip::after {
2416
- background-color: var(--sendbird-dark-background-300); }
2417
- .sendbird-tooltip__text {
2418
- font-family: var(--sendbird-font-family-default);
2419
- font-size: 12px;
2420
- font-weight: bold;
2421
- font-stretch: normal;
2422
- font-style: normal;
2423
- line-height: 1.33;
2424
- letter-spacing: normal; }
2425
-
2426
- .sendbird-tooltip-wrapper {
2427
- position: relative;
2428
- display: inline-flex; }
2429
- .sendbird-tooltip-wrapper__hover-tooltip {
2430
- position: absolute;
2431
- display: inline-flex;
2432
- width: 200px; }
2433
- .sendbird-tooltip-wrapper__hover-tooltip__inner__tooltip-container {
2434
- position: relative;
2435
- display: inline-flex; }
2436
-
2437
- .sendbird-reaction-badge {
2438
- display: inline-block;
2439
- border-radius: 15px;
2440
- width: 50px;
2441
- height: 24px; }
2442
- .sendbird-theme--light .sendbird-reaction-badge {
2443
- background-color: var(--sendbird-light-background-100);
2444
- border: solid 1px var(--sendbird-light-background-100); }
2445
- .sendbird-theme--dark .sendbird-reaction-badge {
2446
- background-color: var(--sendbird-dark-background-500);
2447
- border: solid 1px var(--sendbird-dark-background-500); }
2448
- .sendbird-reaction-badge:hover {
2449
- cursor: pointer; }
2450
- .sendbird-theme--light .sendbird-reaction-badge:hover {
2451
- border: solid 1px var(--sendbird-light-primary-300); }
2452
- .sendbird-theme--dark .sendbird-reaction-badge:hover {
2453
- border: solid 1px var(--sendbird-dark-primary-200); }
2454
-
2455
- .sendbird-reaction-badge--is-add {
2456
- display: inline-block;
2457
- border-radius: 15px;
2458
- width: 36px;
2459
- height: 24px; }
2460
- .sendbird-theme--light .sendbird-reaction-badge--is-add {
2461
- background-color: var(--sendbird-light-background-100);
2462
- border: solid 1px var(--sendbird-light-background-100); }
2463
- .sendbird-theme--dark .sendbird-reaction-badge--is-add {
2464
- background-color: var(--sendbird-dark-background-500);
2465
- border: solid 1px var(--sendbird-dark-background-500); }
2466
- .sendbird-reaction-badge--is-add:hover {
2467
- cursor: pointer; }
2468
- .sendbird-theme--light .sendbird-reaction-badge--is-add:hover {
2469
- border: solid 1px var(--sendbird-light-primary-300); }
2470
- .sendbird-theme--dark .sendbird-reaction-badge--is-add:hover {
2471
- border: solid 1px var(--sendbird-dark-primary-200); }
2472
- .sendbird-reaction-badge--is-add .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
2473
- left: 8px; }
2474
-
2475
- .sendbird-reaction-badge--selected {
2476
- display: inline-block;
2477
- border-radius: 15px;
2478
- width: 50px;
2479
- height: 24px; }
2480
- .sendbird-theme--light .sendbird-reaction-badge--selected {
2481
- background-color: var(--sendbird-light-primary-100);
2482
- border: solid 1px var(--sendbird-light-primary-100); }
2483
- .sendbird-theme--dark .sendbird-reaction-badge--selected {
2484
- background-color: var(--sendbird-dark-primary-400);
2485
- border: solid 1px var(--sendbird-dark-primary-400); }
2486
- .sendbird-reaction-badge--selected:hover {
2487
- cursor: pointer; }
2488
- .sendbird-theme--light .sendbird-reaction-badge--selected:hover {
2489
- border: solid 1px var(--sendbird-light-primary-300); }
2490
- .sendbird-theme--dark .sendbird-reaction-badge--selected:hover {
2491
- border: solid 1px var(--sendbird-dark-primary-200); }
2492
-
2493
- .sendbird-reaction-badge__inner {
2494
- position: relative;
2495
- display: flex;
2496
- height: 24px;
2497
- flex-direction: row;
2498
- align-items: center;
2499
- justify-content: center;
2500
- padding-left: 20px;
2501
- padding-right: 4px; }
2502
- .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__icon {
2503
- position: absolute;
2504
- top: 2px;
2505
- left: 4px; }
2506
- .sendbird-reaction-badge__inner .sendbird-reaction-badge__inner__count {
2507
- margin-left: 4px; }
2508
-
2509
- .sendbird-admin-message {
2510
- display: flex;
2511
- justify-content: center;
2512
- align-items: center; }
2513
- .sendbird-admin-message .sendbird-admin-message__text {
2514
- display: flex; }
2515
-
2516
- .sendbird-text-message-item-body {
2517
- position: relative;
2518
- display: inline-block;
2519
- box-sizing: content-box;
2520
- padding: 8px 12px;
2521
- border-radius: 16px;
2522
- white-space: pre-line;
2523
- word-break: break-word; }
2524
- .sendbird-text-message-item-body.reactions {
2525
- border-radius: 16px 16px 0px 0px; }
2526
- .sendbird-theme--light .sendbird-text-message-item-body.incoming {
2527
- background-color: var(--sendbird-light-background-100); }
2528
- .sendbird-theme--dark .sendbird-text-message-item-body.incoming {
2529
- background-color: var(--sendbird-dark-background-500); }
2530
- .sendbird-theme--light .sendbird-text-message-item-body.outgoing {
2531
- background-color: var(--sendbird-light-primary-300); }
2532
- .sendbird-theme--dark .sendbird-text-message-item-body.outgoing {
2533
- background-color: var(--sendbird-dark-primary-200); }
2534
- .sendbird-theme--light .sendbird-text-message-item-body.mouse-hover.incoming, .sendbird-theme--light .sendbird-text-message-item-body:hover.incoming {
2535
- background-color: var(--sendbird-light-background-200); }
2536
- .sendbird-theme--dark .sendbird-text-message-item-body.mouse-hover.incoming, .sendbird-theme--dark .sendbird-text-message-item-body:hover.incoming {
2537
- background-color: var(--sendbird-dark-background-400); }
2538
- .sendbird-theme--light .sendbird-text-message-item-body.mouse-hover.outgoing, .sendbird-theme--light .sendbird-text-message-item-body:hover.outgoing {
2539
- background-color: var(--sendbird-light-primary-400); }
2540
- .sendbird-theme--dark .sendbird-text-message-item-body.mouse-hover.outgoing, .sendbird-theme--dark .sendbird-text-message-item-body:hover.outgoing {
2541
- background-color: var(--sendbird-dark-primary-300); }
2542
- .sendbird-text-message-item-body .sendbird-text-message-item-body__text-bubble__message {
2543
- display: inline;
2544
- margin: 0px 2px; }
2545
-
2546
- p.sendbird-text-message-item-body {
2547
- margin: 0px; }
2548
-
2549
- .sendbird-word {
2550
- display: inline-block;
2551
- margin-right: 4px;
2552
- height: -webkit-fit-content;
2553
- height: -moz-fit-content;
2554
- height: fit-content; }
2555
- .sendbird-word .sendbird-word__mention:hover {
2556
- cursor: pointer; }
2557
- .sendbird-word .sendbird-word__mention,
2558
- .sendbird-word .sendbird-word__url,
2559
- .sendbird-word .sendbird-word__normal {
2560
- display: inline-block; }
2561
-
2562
- .sendbird-link-label {
2563
- text-decoration: unset; }
2564
- .sendbird-link-label:hover {
2565
- cursor: pointer;
2566
- text-decoration: underline; }
2567
- .sendbird-link-label:focus {
2568
- outline: none; }
2569
- .sendbird-link-label__label {
2570
- display: inline; }
2571
-
2572
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-1 {
2573
- color: var(--sendbird-light-onlight-01); }
2574
-
2575
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-1 {
2576
- color: var(--sendbird-dark-ondark-01); }
2577
-
2578
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-2 {
2579
- color: var(--sendbird-light-onlight-02); }
2580
-
2581
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-2 {
2582
- color: var(--sendbird-dark-ondark-02); }
2583
-
2584
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-onbackground-3 {
2585
- color: var(--sendbird-light-onlight-03); }
2586
-
2587
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-onbackground-3 {
2588
- color: var(--sendbird-dark-ondark-03); }
2589
-
2590
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-oncontent-1 {
2591
- color: var(--sendbird-light-ondark-01); }
2592
-
2593
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-oncontent-1 {
2594
- color: var(--sendbird-dark-onlight-01); }
2595
-
2596
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-oncontent-2 {
2597
- color: var(--sendbird-light-ondark-02); }
2598
-
2599
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-oncontent-2 {
2600
- color: var(--sendbird-dark-onlight-02); }
2601
-
2602
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-primary {
2603
- color: var(--sendbird-light-primary-300); }
2604
-
2605
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-primary {
2606
- color: var(--sendbird-dark-primary-200); }
2607
-
2608
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-error {
2609
- color: var(--sendbird-light-error-300); }
2610
-
2611
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-error {
2612
- color: var(--sendbird-dark-error-200); }
2613
-
2614
- .sendbird-theme--light .sendbird-link-label .sendbird-label--color-secondary-3 {
2615
- color: var(--sendbird-light-secondary-300); }
2616
-
2617
- .sendbird-theme--dark .sendbird-link-label .sendbird-label--color-secondary-3 {
2618
- color: var(--sendbird-dark-secondary-200); }
2619
-
2620
- .sendbird-file-message-item-body {
2621
- position: relative;
2622
- display: inline-block;
2623
- box-sizing: border-box;
2624
- padding: 8px 12px;
2625
- align-items: center;
2626
- border-radius: 16px; }
2627
- .sendbird-file-message-item-body.reactions {
2628
- border-radius: 16px 16px 0px 0px; }
2629
- .sendbird-theme--light .sendbird-file-message-item-body.outgoing {
2630
- background-color: var(--sendbird-light-primary-300); }
2631
- .sendbird-theme--dark .sendbird-file-message-item-body.outgoing {
2632
- background-color: var(--sendbird-dark-primary-200); }
2633
- .sendbird-theme--light .sendbird-file-message-item-body.incoming {
2634
- background-color: var(--sendbird-light-background-100); }
2635
- .sendbird-theme--dark .sendbird-file-message-item-body.incoming {
2636
- background-color: var(--sendbird-dark-background-500); }
2637
- .sendbird-theme--light .sendbird-file-message-item-body.mouse-hover.outgoing, .sendbird-theme--light .sendbird-file-message-item-body:hover.outgoing {
2638
- background-color: var(--sendbird-light-primary-400); }
2639
- .sendbird-theme--dark .sendbird-file-message-item-body.mouse-hover.outgoing, .sendbird-theme--dark .sendbird-file-message-item-body:hover.outgoing {
2640
- background-color: var(--sendbird-dark-primary-300); }
2641
- .sendbird-theme--light .sendbird-file-message-item-body.mouse-hover.incoming, .sendbird-theme--light .sendbird-file-message-item-body:hover.incoming {
2642
- background-color: var(--sendbird-light-background-200); }
2643
- .sendbird-theme--dark .sendbird-file-message-item-body.mouse-hover.incoming, .sendbird-theme--dark .sendbird-file-message-item-body:hover.incoming {
2644
- background-color: var(--sendbird-dark-background-400); }
2645
- .sendbird-file-message-item-body .sendbird-file-message-item-body__file-icon {
2646
- width: 28px;
2647
- height: 28px;
2648
- min-width: 28px;
2649
- min-height: 28px;
2650
- display: inline-flex;
2651
- align-items: center;
2652
- justify-content: center;
2653
- border-radius: 8px;
2654
- margin-right: 8px; }
2655
- .sendbird-theme--light .sendbird-file-message-item-body .sendbird-file-message-item-body__file-icon {
2656
- background-color: var(--sendbird-light-background-50); }
2657
- .sendbird-theme--dark .sendbird-file-message-item-body .sendbird-file-message-item-body__file-icon {
2658
- background-color: var(--sendbird-dark-background-600); }
2659
- .sendbird-file-message-item-body .sendbird-file-message-item-body__file-name {
2660
- position: relative;
2661
- top: -6px; }
2662
-
2663
- .sendbird-thumbnail-message-item-body {
2664
- position: relative;
2665
- display: block;
2666
- box-sizing: border-box;
2667
- overflow: hidden;
2668
- width: 100%;
2669
- min-width: 360px;
2670
- max-width: 400px;
2671
- height: 270px;
2672
- border-radius: 16px; }
2673
- .sendbird-thumbnail-message-item-body.reactions {
2674
- border-radius: 16px 16px 0px 0px; }
2675
- .sendbird-theme--light .sendbird-thumbnail-message-item-body {
2676
- background-color: var(--sendbird-light-background-100); }
2677
- .sendbird-theme--dark .sendbird-thumbnail-message-item-body {
2678
- background-color: var(--sendbird-dark-background-500); }
2679
- .sendbird-theme--light .sendbird-thumbnail-message-item-body.mouse-hover, .sendbird-theme--light .sendbird-thumbnail-message-item-body:hover {
2680
- background-color: var(--sendbird-light-background-200); }
2681
- .sendbird-theme--dark .sendbird-thumbnail-message-item-body.mouse-hover, .sendbird-theme--dark .sendbird-thumbnail-message-item-body:hover {
2682
- background-color: var(--sendbird-dark-background-400); }
2683
- .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__thumbnail {
2684
- position: absolute;
2685
- border-radius: 16px; }
2686
- .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__placeholder {
2687
- position: absolute;
2688
- width: 100%;
2689
- height: 270px;
2690
- display: flex;
2691
- justify-content: center;
2692
- align-items: center; }
2693
- .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__placeholder .sendbird-thumbnail-message-item-body__placeholder__icon {
2694
- display: flex;
2695
- align-items: center;
2696
- justify-content: center;
2697
- width: 56px;
2698
- height: 56px;
2699
- border-radius: 50%;
2700
- background-color: var(--sendbird-light-background-50); }
2701
- .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__image-cover {
2702
- position: absolute;
2703
- top: 0px;
2704
- display: none;
2705
- width: 100%;
2706
- height: 270px;
2707
- border-radius: 16px;
2708
- background-color: var(--sendbird-light-overlay-01); }
2709
- .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__video {
2710
- position: absolute;
2711
- width: 100%;
2712
- height: 270px;
2713
- border-radius: 16px; }
2714
- .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__icon-wrapper {
2715
- position: absolute;
2716
- width: 100%;
2717
- height: 270px;
2718
- display: flex;
2719
- align-items: center;
2720
- justify-content: center; }
2721
- .sendbird-thumbnail-message-item-body .sendbird-thumbnail-message-item-body__icon-wrapper .sendbird-thumbnail-message-item-body__icon-wrapper__icon {
2722
- display: flex;
2723
- align-items: center;
2724
- justify-content: center;
2725
- width: 56px;
2726
- height: 56px;
2727
- border-radius: 50%;
2728
- background-color: var(--sendbird-light-background-50); }
2729
-
2730
- .sendbird-thumbnail-message-item-body:hover {
2731
- cursor: pointer; }
2732
- .sendbird-thumbnail-message-item-body:hover .sendbird-thumbnail-message-item-body__image-cover {
2733
- display: inline-flex; }
2734
-
2735
- .sendbird-og-message-item-body {
2736
- position: relative;
2737
- display: inline-block;
2738
- width: 100%;
2739
- min-width: 320px;
2740
- max-width: 400px; }
2741
- .sendbird-og-message-item-body .sendbird-og-message-item-body__text-bubble {
2742
- position: relative;
2743
- padding: 8px 12px;
2744
- box-sizing: border-box;
2745
- border-radius: 16px 16px 0px 0px;
2746
- word-break: break-word; }
2747
- .sendbird-og-message-item-body .sendbird-og-message-item-body__text-bubble .sendbird-og-message-item-body__text-bubble__message {
2748
- display: inline;
2749
- margin: 0px 2px; }
2750
- .sendbird-og-message-item-body .sendbird-og-message-item-body__og-thumbnail {
2751
- position: relative;
2752
- overflow: hidden; }
2753
- .sendbird-og-message-item-body .sendbird-og-message-item-body__og-thumbnail .sendbird-og-message-item-body__og-thumbnail__image {
2754
- width: 100%;
2755
- position: relative;
2756
- display: flex;
2757
- justify-content: center;
2758
- align-items: center; }
2759
- .sendbird-og-message-item-body.reactions .sendbird-og-message-item-body__description {
2760
- border-radius: 0px; }
2761
- .sendbird-og-message-item-body .sendbird-og-message-item-body__description {
2762
- white-space: nowrap;
2763
- text-overflow: ellipsis;
2764
- overflow: hidden;
2765
- padding: 8px 12px;
2766
- display: flex;
2767
- flex-direction: column;
2768
- border-radius: 0px 0px 16px 16px; }
2769
- .sendbird-theme--light .sendbird-og-message-item-body .sendbird-og-message-item-body__description {
2770
- background-color: var(--sendbird-light-background-100); }
2771
- .sendbird-theme--dark .sendbird-og-message-item-body .sendbird-og-message-item-body__description {
2772
- background-color: var(--sendbird-dark-background-500); }
2773
- .sendbird-og-message-item-body .sendbird-og-message-item-body__description .sendbird-og-message-item-body__description__title,
2774
- .sendbird-og-message-item-body .sendbird-og-message-item-body__description .sendbird-og-message-item-body__description__description {
2775
- margin-bottom: 4px;
2776
- width: 100%;
2777
- white-space: nowrap;
2778
- text-overflow: ellipsis;
2779
- overflow: hidden;
2780
- display: inline-block; }
2781
- .sendbird-og-message-item-body .sendbird-og-message-item-body__description .sendbird-og-message-item-body__description__url {
2782
- width: 100%;
2783
- white-space: nowrap;
2784
- text-overflow: ellipsis;
2785
- overflow: hidden;
2786
- display: inline-block;
2787
- margin: 4px 0px; }
2788
- .sendbird-og-message-item-body .sendbird-og-message-item-body__og-thumbnail:hover,
2789
- .sendbird-og-message-item-body .sendbird-og-message-item-body__description:hover {
2790
- cursor: pointer; }
2791
- .sendbird-theme--light .sendbird-og-message-item-body.outgoing .sendbird-og-message-item-body__text-bubble {
2792
- background-color: var(--sendbird-light-primary-300); }
2793
- .sendbird-theme--dark .sendbird-og-message-item-body.outgoing .sendbird-og-message-item-body__text-bubble {
2794
- background-color: var(--sendbird-dark-primary-200); }
2795
- .sendbird-theme--light .sendbird-og-message-item-body.incoming .sendbird-og-message-item-body__text-bubble {
2796
- background-color: var(--sendbird-light-background-100); }
2797
- .sendbird-theme--dark .sendbird-og-message-item-body.incoming .sendbird-og-message-item-body__text-bubble {
2798
- background-color: var(--sendbird-dark-background-500); }
2799
- .sendbird-theme--light .sendbird-og-message-item-body.mouse-hover .sendbird-og-message-item-body__description, .sendbird-theme--light .sendbird-og-message-item-body:hover .sendbird-og-message-item-body__description {
2800
- background-color: var(--sendbird-light-background-200); }
2801
- .sendbird-theme--dark .sendbird-og-message-item-body.mouse-hover .sendbird-og-message-item-body__description, .sendbird-theme--dark .sendbird-og-message-item-body:hover .sendbird-og-message-item-body__description {
2802
- background-color: var(--sendbird-dark-background-400); }
2803
- .sendbird-theme--light .sendbird-og-message-item-body.mouse-hover.outgoing .sendbird-og-message-item-body__text-bubble, .sendbird-theme--light .sendbird-og-message-item-body:hover.outgoing .sendbird-og-message-item-body__text-bubble {
2804
- background-color: var(--sendbird-light-primary-400); }
2805
- .sendbird-theme--dark .sendbird-og-message-item-body.mouse-hover.outgoing .sendbird-og-message-item-body__text-bubble, .sendbird-theme--dark .sendbird-og-message-item-body:hover.outgoing .sendbird-og-message-item-body__text-bubble {
2806
- background-color: var(--sendbird-dark-primary-300); }
2807
- .sendbird-theme--light .sendbird-og-message-item-body.mouse-hover.incoming .sendbird-og-message-item-body__text-bubble, .sendbird-theme--light .sendbird-og-message-item-body:hover.incoming .sendbird-og-message-item-body__text-bubble {
2808
- background-color: var(--sendbird-light-background-200); }
2809
- .sendbird-theme--dark .sendbird-og-message-item-body.mouse-hover.incoming .sendbird-og-message-item-body__text-bubble, .sendbird-theme--dark .sendbird-og-message-item-body:hover.incoming .sendbird-og-message-item-body__text-bubble {
2810
- background-color: var(--sendbird-dark-background-400); }
2811
- .sendbird-og-message-item-body .sendbird-og-message-item-body__cover {
2812
- display: none;
2813
- position: absolute;
2814
- top: 0%;
2815
- left: 0;
2816
- width: 100%;
2817
- height: 100%;
2818
- border-radius: 16px 16px 0px 0px; }
2819
-
2820
- p.sendbird-og-message-item-body__text-bubble {
2821
- margin: 0px; }
2822
-
2823
- .sendbird-unknown-message-item-body {
2824
- position: relative;
2825
- display: inline-block;
2826
- box-sizing: border-box;
2827
- padding: 8px 12px;
2828
- border-radius: 16px; }
2829
- .sendbird-unknown-message-item-body.reactions {
2830
- border-radius: 16px 16px 0px 0px; }
2831
- .sendbird-theme--light .sendbird-unknown-message-item-body.outgoing {
2832
- background-color: var(--sendbird-light-primary-300); }
2833
- .sendbird-theme--dark .sendbird-unknown-message-item-body.outgoing {
2834
- background-color: var(--sendbird-dark-primary-200); }
2835
- .sendbird-theme--light .sendbird-unknown-message-item-body.incoming {
2836
- background-color: var(--sendbird-light-background-100); }
2837
- .sendbird-theme--dark .sendbird-unknown-message-item-body.incoming {
2838
- background-color: var(--sendbird-dark-background-500); }
2839
- .sendbird-theme--light .sendbird-unknown-message-item-body.mouse-hover.outgoing, .sendbird-theme--light .sendbird-unknown-message-item-body:hover.outgoing {
2840
- background-color: var(--sendbird-light-primary-400); }
2841
- .sendbird-theme--dark .sendbird-unknown-message-item-body.mouse-hover.outgoing, .sendbird-theme--dark .sendbird-unknown-message-item-body:hover.outgoing {
2842
- background-color: var(--sendbird-dark-primary-300); }
2843
- .sendbird-theme--light .sendbird-unknown-message-item-body.mouse-hover.incoming, .sendbird-theme--light .sendbird-unknown-message-item-body:hover.incoming {
2844
- background-color: var(--sendbird-light-background-200); }
2845
- .sendbird-theme--dark .sendbird-unknown-message-item-body.mouse-hover.incoming, .sendbird-theme--dark .sendbird-unknown-message-item-body:hover.incoming {
2846
- background-color: var(--sendbird-dark-background-400); }
2847
- .sendbird-unknown-message-item-body .sendbird-unknown-message-item-body__header {
2848
- display: block; }
2849
- .sendbird-unknown-message-item-body .sendbird-unknown-message-item-body__description {
2850
- display: block; }
2851
-
2852
- .sendbird-quote-message {
2853
- position: relative;
2854
- display: inline-flex;
2855
- box-sizing: border-box;
2856
- flex-direction: column;
2857
- max-width: 400px; }
2858
- .sendbird-quote-message.incoming {
2859
- align-items: flex-start; }
2860
- .sendbird-quote-message.outgoing {
2861
- align-items: flex-end; }
2862
- .sendbird-quote-message .sendbird-quote-message__replied-to {
2863
- position: relative;
2864
- display: inline-flex;
2865
- flex-direction: row;
2866
- align-items: center;
2867
- height: 16px;
2868
- padding: 0px 12px; }
2869
- .sendbird-quote-message .sendbird-quote-message__replied-to .sendbird-quote-message__replied-to__icon {
2870
- position: relative;
2871
- margin-bottom: 4px;
2872
- margin-right: 4px; }
2873
- .sendbird-quote-message .sendbird-quote-message__replied-to .sendbird-quote-message__replied-to__text {
2874
- position: relative;
2875
- max-width: 360px;
2876
- overflow: hidden;
2877
- overflow-x: hidden;
2878
- white-space: nowrap;
2879
- word-break: keep-all;
2880
- text-overflow: ellipsis;
2881
- font-size: 12px; }
2882
- .sendbird-quote-message .sendbird-quote-message__replied-message {
2883
- position: relative;
2884
- display: inline-flex; }
2885
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__text-message {
2886
- position: relative;
2887
- white-space: pre-wrap;
2888
- word-break: break-all;
2889
- font-size: 12px;
2890
- padding: 8px 12px 16px 12px;
2891
- border-radius: 16px;
2892
- opacity: 0.5; }
2893
- .sendbird-theme--light .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__text-message {
2894
- background-color: var(--sendbird-light-background-100); }
2895
- .sendbird-theme--dark .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__text-message {
2896
- background-color: var(--sendbird-dark-background-500); }
2897
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__text-message .sendbird-quote-message__replied-message__text-message__word {
2898
- position: relative;
2899
- display: inline-flex;
2900
- max-height: 30px;
2901
- overflow: hidden;
2902
- text-overflow: ellipsis; }
2903
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message {
2904
- position: relative;
2905
- width: 144px;
2906
- height: 108px;
2907
- border-radius: 6.4px;
2908
- overflow: hidden; }
2909
- .sendbird-theme--light .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message {
2910
- background-color: var(--sendbird-light-background-100); }
2911
- .sendbird-theme--dark .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message {
2912
- background-color: var(--sendbird-dark-background-500); }
2913
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__video,
2914
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__image {
2915
- position: absolute;
2916
- top: 0px;
2917
- display: inline-flex;
2918
- width: 100%;
2919
- height: 100%;
2920
- opacity: 0.5; }
2921
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__placeholder {
2922
- position: absolute;
2923
- display: inline-flex;
2924
- width: 100%;
2925
- height: 100%;
2926
- justify-content: center;
2927
- align-items: center; }
2928
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__placeholder .sendbird-quote-message__replied-message__thumbnail-message__placeholder__icon {
2929
- display: inline-flex;
2930
- justify-content: center;
2931
- align-items: center;
2932
- width: 22px;
2933
- height: 22px;
2934
- border-radius: 50%; }
2935
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__cover {
2936
- position: absolute;
2937
- display: inline-flex;
2938
- width: 100%;
2939
- height: 100%;
2940
- justify-content: center;
2941
- align-items: center;
2942
- top: 0px; }
2943
- .sendbird-theme--light .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__cover {
2944
- background-color: rgba(255, 255, 255, 0.4); }
2945
- .sendbird-theme--dark .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__cover {
2946
- background-color: rgba(255, 255, 255, 0.4); }
2947
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__cover .sendbird-quote-message__replied-message__thumbnail-message__cover__icon {
2948
- position: relative;
2949
- display: inline-flex;
2950
- justify-content: center;
2951
- align-items: center;
2952
- width: 22px;
2953
- height: 22px;
2954
- border-radius: 50%; }
2955
- .sendbird-theme--light .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__cover .sendbird-quote-message__replied-message__thumbnail-message__cover__icon {
2956
- background-color: white; }
2957
- .sendbird-theme--dark .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__thumbnail-message .sendbird-quote-message__replied-message__thumbnail-message__cover .sendbird-quote-message__replied-message__thumbnail-message__cover__icon {
2958
- background-color: white; }
2959
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__file-message {
2960
- position: relative;
2961
- display: inline-flex;
2962
- flex-direction: row;
2963
- font-size: 12px;
2964
- padding: 8px 12px 16px 12px;
2965
- border-radius: 16px;
2966
- opacity: 0.5; }
2967
- .sendbird-theme--light .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__file-message {
2968
- background-color: var(--sendbird-light-background-100); }
2969
- .sendbird-theme--dark .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__file-message {
2970
- background-color: var(--sendbird-dark-background-500); }
2971
- .sendbird-quote-message .sendbird-quote-message__replied-message .sendbird-quote-message__replied-message__file-message .sendbird-quote-message__replied-message__file-message__type-icon {
2972
- margin-right: 2px; }
2973
-
2974
- .sendbird-fileviewer__header__right__actions__download,
2975
- .sendbird-fileviewer__header__right__actions__delete,
2976
- .sendbird-fileviewer__header__right__actions__close {
2977
- width: 64px;
2978
- padding: 21px;
2979
- box-sizing: border-box;
2980
- cursor: pointer; }
2981
- .sendbird-fileviewer__header__right__actions__download .disabled,
2982
- .sendbird-fileviewer__header__right__actions__delete .disabled,
2983
- .sendbird-fileviewer__header__right__actions__close .disabled {
2984
- cursor: not-allowed; }
2985
-
2986
- .sendbird-fileviewer {
2987
- width: 100%;
2988
- height: 100%;
2989
- position: fixed;
2990
- top: 0;
2991
- left: 0;
2992
- z-index: 100000; }
2993
- .sendbird-theme--light .sendbird-fileviewer {
2994
- background-color: var(--sendbird-light-background-50); }
2995
- .sendbird-theme--dark .sendbird-fileviewer {
2996
- background-color: var(--sendbird-dark-background-600); }
2997
- .sendbird-fileviewer .sendbird-fileviewer__header {
2998
- height: 64px;
2999
- min-height: 64px;
3000
- box-sizing: border-box;
3001
- display: flex;
3002
- justify-content: space-between; }
3003
- .sendbird-theme--light .sendbird-fileviewer .sendbird-fileviewer__header {
3004
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3005
- .sendbird-theme--dark .sendbird-fileviewer .sendbird-fileviewer__header {
3006
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
3007
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left {
3008
- box-sizing: border-box;
3009
- display: flex;
3010
- flex-direction: row;
3011
- align-items: center;
3012
- height: 64px;
3013
- padding: 16px 20px; }
3014
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
3015
- margin-right: 8px; }
3016
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
3017
- max-width: 500px;
3018
- white-space: nowrap;
3019
- overflow: hidden;
3020
- text-overflow: ellipsis;
3021
- display: inline-block; }
3022
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
3023
- max-width: 200px;
3024
- white-space: nowrap;
3025
- overflow: hidden;
3026
- text-overflow: ellipsis;
3027
- display: inline-flex;
3028
- margin-left: 8px;
3029
- padding-top: 5px; }
3030
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right {
3031
- display: flex;
3032
- width: 160px;
3033
- justify-content: flex-end; }
3034
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right .sendbird-fileviewer__header__right__actions {
3035
- right: 0;
3036
- display: flex;
3037
- flex-direction: row; }
3038
- .sendbird-theme--light .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right .sendbird-fileviewer__header__right__actions__close {
3039
- border-left: 1px solid var(--sendbird-light-onlight-04); }
3040
- .sendbird-theme--dark .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right .sendbird-fileviewer__header__right__actions__close {
3041
- border-left: 1px solid var(--sendbird-dark-ondark-04); }
3042
- .sendbird-fileviewer .sendbird-fileviewer__content {
3043
- height: calc(100% - 72px);
3044
- margin-top: 8px;
3045
- overflow-y: auto;
3046
- display: flex;
3047
- align-items: center;
3048
- justify-content: center; }
3049
- .sendbird-fileviewer .sendbird-fileviewer__content .sendbird-fileviewer__content__video {
3050
- max-width: 100%;
3051
- max-height: 100%; }
3052
- .sendbird-fileviewer .sendbird-fileviewer__content .sendbird-fileviewer__content__img {
3053
- max-width: 90%;
3054
- max-height: 90%; }
3055
- .sendbird-fileviewer .sendbird-fileviewer__content .sendbird-fileviewer__content__unsupported {
3056
- max-width: 100%;
3057
- max-height: 100%;
3058
- display: flex;
3059
- justify-content: center;
3060
- align-items: center; }
3061
-
3062
- .sendbird-notification {
3063
- margin-top: 8px;
3064
- margin-left: 24px;
3065
- margin-right: 24px;
3066
- border-radius: 4px;
3067
- padding: 0px 2px;
3068
- height: 32px;
3069
- display: flex;
3070
- align-items: center;
3071
- justify-content: center; }
3072
- .sendbird-theme--light .sendbird-notification {
3073
- background-color: var(--sendbird-light-primary-300); }
3074
- .sendbird-theme--dark .sendbird-notification {
3075
- background-color: var(--sendbird-dark-primary-200); }
3076
- .sendbird-notification:hover {
3077
- cursor: pointer; }
3078
- .sendbird-theme--light .sendbird-notification:hover {
3079
- background-color: var(--sendbird-light-primary-400); }
3080
- .sendbird-theme--dark .sendbird-notification:hover {
3081
- background-color: var(--sendbird-dark-primary-300); }
3082
- .sendbird-theme--light .sendbird-notification.sendbird-notification--frozen {
3083
- background-color: var(--sendbird-light-information-100); }
3084
- .sendbird-theme--dark .sendbird-notification.sendbird-notification--frozen {
3085
- background-color: var(--sendbird-dark-information-100); }
3086
- .sendbird-theme--light .sendbird-notification.sendbird-notification--frozen .sendbird-notification__text {
3087
- color: var(--sendbird-light-onlight-01); }
3088
- .sendbird-theme--dark .sendbird-notification.sendbird-notification--frozen .sendbird-notification__text {
3089
- color: var(--sendbird-dark-onlight-01); }
3090
- .sendbird-notification .sendbird-notification__text {
3091
- display: flex;
3092
- align-items: center;
3093
- justify-content: center;
3094
- margin-right: 8px; }
3095
-
3096
- .sendbird-notification {
3097
- margin-top: 8px;
3098
- margin-left: 24px;
3099
- margin-right: 24px;
3100
- border-radius: 4px;
3101
- padding: 0px 2px;
3102
- height: 32px;
3103
- display: flex;
3104
- align-items: center;
3105
- justify-content: center; }
3106
- .sendbird-theme--light .sendbird-notification {
3107
- background-color: var(--sendbird-light-primary-300); }
3108
- .sendbird-theme--dark .sendbird-notification {
3109
- background-color: var(--sendbird-dark-primary-200); }
3110
- .sendbird-notification:hover {
3111
- cursor: pointer; }
3112
- .sendbird-theme--light .sendbird-notification:hover {
3113
- background-color: var(--sendbird-light-primary-400); }
3114
- .sendbird-theme--dark .sendbird-notification:hover {
3115
- background-color: var(--sendbird-dark-primary-300); }
3116
- .sendbird-theme--light .sendbird-notification.sendbird-notification--frozen {
3117
- background-color: var(--sendbird-light-information-100); }
3118
- .sendbird-theme--dark .sendbird-notification.sendbird-notification--frozen {
3119
- background-color: var(--sendbird-dark-information-100); }
3120
- .sendbird-theme--light .sendbird-notification.sendbird-notification--frozen .sendbird-notification__text {
3121
- color: var(--sendbird-light-onlight-01); }
3122
- .sendbird-theme--dark .sendbird-notification.sendbird-notification--frozen .sendbird-notification__text {
3123
- color: var(--sendbird-dark-onlight-01); }
3124
- .sendbird-notification .sendbird-notification__text {
3125
- display: flex;
3126
- align-items: center;
3127
- justify-content: center;
3128
- margin-right: 8px; }
3129
-
3130
- .sendbird-message-input-wrapper {
3131
- position: relative;
3132
- width: 100%; }
3133
- .sendbird-message-input-wrapper .sendbird-message-input-wrapper__quote-message-input {
3134
- position: relative;
3135
- width: 100%; }
3136
- .sendbird-theme--light .sendbird-message-input-wrapper .sendbird-message-input-wrapper__quote-message-input {
3137
- border-top: solid 1px var(--sendbird-light-onlight-04); }
3138
- .sendbird-theme--dark .sendbird-message-input-wrapper .sendbird-message-input-wrapper__quote-message-input {
3139
- border-top: solid 1px var(--sendbird-dark-ondark-04); }
3140
- .sendbird-message-input-wrapper .sendbird-message-input-wrapper__message-input {
3141
- position: relative;
3142
- width: 100%;
3143
- box-sizing: border-box;
3144
- padding-left: 24px;
3145
- padding-right: 24px; }
3146
-
3147
- .sendbird-quote_message_input {
3148
- position: relative;
3149
- padding: 16px 80px 16px 40px;
3150
- width: 100%;
3151
- height: 76px;
3152
- display: flex;
3153
- flex-direction: row;
3154
- box-sizing: border-box; }
3155
- .sendbird-quote_message_input .sendbird-quote_message_input__avatar {
3156
- width: 44px;
3157
- min-width: 44px;
3158
- height: 44px;
3159
- min-height: 44px;
3160
- position: relative;
3161
- border-radius: 8px;
3162
- display: flex;
3163
- justify-content: center;
3164
- align-items: center; }
3165
- .sendbird-theme--light .sendbird-quote_message_input .sendbird-quote_message_input__avatar {
3166
- background-color: var(--sendbird-light-background-100); }
3167
- .sendbird-theme--dark .sendbird-quote_message_input .sendbird-quote_message_input__avatar {
3168
- background-color: var(--sendbird-dark-background-500); }
3169
- .sendbird-quote_message_input .sendbird-quote_message_input__body {
3170
- position: absolute;
3171
- display: flex;
3172
- flex-direction: column;
3173
- align-items: flex-start;
3174
- overflow: hidden; }
3175
- .sendbird-quote_message_input .sendbird-quote_message_input__body .sendbird-quote_message_input__body__sender-name {
3176
- position: relative;
3177
- width: 100%;
3178
- overflow: hidden;
3179
- text-overflow: ellipsis;
3180
- white-space: nowrap;
3181
- box-sizing: border-box;
3182
- margin-bottom: 8px; }
3183
- .sendbird-quote_message_input .sendbird-quote_message_input__body .sendbird-quote_message_input__body__message-content {
3184
- position: relative;
3185
- width: 100%;
3186
- overflow: hidden;
3187
- text-overflow: ellipsis;
3188
- white-space: nowrap;
3189
- box-sizing: border-box; }
3190
- .sendbird-quote_message_input .sendbird-quote_message_input__close-button {
3191
- position: absolute;
3192
- top: 26px;
3193
- right: 40px; }
3194
- .sendbird-quote_message_input .sendbird-quote_message_input__close-button:hover {
3195
- cursor: pointer; }
3196
-
3197
- .sendbird-channel-settings {
3198
- height: 100%;
3199
- width: 320px;
3200
- display: inline-block;
3201
- box-sizing: border-box; }
3202
- .sendbird-theme--light .sendbird-channel-settings {
3203
- background-color: var(--sendbird-light-background-50);
3204
- border-left: 1px solid var(--sendbird-light-onlight-04); }
3205
- .sendbird-theme--dark .sendbird-channel-settings {
3206
- background-color: var(--sendbird-dark-background-600);
3207
- border-left: 1px solid var(--sendbird-dark-background-600); }
3208
- .sendbird-channel-settings .sendbird-channel-settings__header-icon {
3209
- cursor: pointer;
3210
- position: absolute;
3211
- top: 16px;
3212
- right: 16px; }
3213
- .sendbird-theme--light .sendbird-channel-settings .sendbird-channel-settings__header-icon .sendbird-channel-settings__close-icon path {
3214
- fill: var(--sendbird-light-onlight-01); }
3215
- .sendbird-theme--dark .sendbird-channel-settings .sendbird-channel-settings__header-icon .sendbird-channel-settings__close-icon path {
3216
- fill: var(--sendbird-dark-ondark-01); }
3217
- .sendbird-channel-settings .sendbird-channel-settings__members .sendbird-badge__text {
3218
- margin-top: -2px; }
3219
- .sendbird-channel-settings .sendbird-channel-settings__header {
3220
- height: 64px;
3221
- min-height: 64px;
3222
- position: relative;
3223
- padding: 20px 24px;
3224
- box-sizing: border-box; }
3225
- .sendbird-theme--light .sendbird-channel-settings .sendbird-channel-settings__header {
3226
- border-bottom: solid 1px var(--sendbird-light-onlight-04); }
3227
- .sendbird-theme--dark .sendbird-channel-settings .sendbird-channel-settings__header {
3228
- border-bottom: solid 1px var(--sendbird-dark-ondark-04); }
3229
- .sendbird-channel-settings .sendbird-channel-settings__scroll-area {
3230
- display: flex;
3231
- flex-grow: 1;
3232
- flex-direction: column;
3233
- height: calc(100% - 64px);
3234
- overflow-y: auto; }
3235
- .sendbird-channel-settings .sendbird-channel-settings__panel-item {
3236
- cursor: pointer;
3237
- position: relative;
3238
- padding: 12px 22px 10px 56px; }
3239
- .sendbird-theme--light .sendbird-channel-settings .sendbird-channel-settings__panel-item {
3240
- background-color: var(--sendbird-light-background-50);
3241
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3242
- .sendbird-theme--dark .sendbird-channel-settings .sendbird-channel-settings__panel-item {
3243
- background-color: var(--sendbird-dark-background-600);
3244
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
3245
- .sendbird-channel-settings .sendbird-channel-settings__panel-item:focus {
3246
- outline: none; }
3247
- .sendbird-channel-settings .sendbird-channel-settings__panel-item.sendbird-channel-settings__panel-item__disabled {
3248
- cursor: not-allowed; }
3249
- .sendbird-channel-settings .sendbird-channel-settings__panel-icon-left,
3250
- .sendbird-channel-settings .sendbird-channel-settings__panel-icon-right {
3251
- position: absolute;
3252
- top: 10px; }
3253
- .sendbird-channel-settings .sendbird-channel-settings__panel-icon-left {
3254
- left: 16px; }
3255
- .sendbird-channel-settings .sendbird-channel-settings__panel-icon-right {
3256
- right: 16px; }
3257
- .sendbird-channel-settings .sendbird-channel-settings__panel-icon--open {
3258
- transform: rotate(90deg); }
3259
- .sendbird-theme--light .sendbird-channel-settings .sendbird-channel-settings__panel-icon--chevron path {
3260
- fill: var(--sendbird-light-onlight-01); }
3261
- .sendbird-theme--dark .sendbird-channel-settings .sendbird-channel-settings__panel-icon--chevron path {
3262
- fill: var(--sendbird-dark-ondark-01); }
3263
-
3264
- .sendbird-channel-profile {
3265
- position: relative;
3266
- text-align: center;
3267
- padding: 32px 40px 27px 40px; }
3268
- .sendbird-theme--light .sendbird-channel-profile {
3269
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
3270
- background-color: var(--sendbird-light-background-50); }
3271
- .sendbird-theme--dark .sendbird-channel-profile {
3272
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
3273
- background-color: var(--sendbird-dark-background-600); }
3274
- .sendbird-channel-profile .sendbird-channel-profile--inner {
3275
- height: 92px; }
3276
- .sendbird-channel-profile .sendbird-channel-profile__avatar {
3277
- margin-bottom: 16px;
3278
- display: flex;
3279
- justify-content: center; }
3280
- .sendbird-channel-profile .sendbird-channel-profile__title {
3281
- display: block;
3282
- max-width: 240px;
3283
- white-space: nowrap;
3284
- overflow-x: hidden;
3285
- text-overflow: ellipsis;
3286
- height: 18px; }
3287
- .sendbird-channel-profile .sendbird-channel-profile__edit {
3288
- position: absolute;
3289
- top: 10px;
3290
- right: 16px; }
3291
-
3292
- .channel-profile-form .channel-profile-form__img-section {
3293
- position: relative; }
3294
-
3295
- .channel-profile-form .channel-profile-form__avatar-button {
3296
- position: absolute;
3297
- top: 54px;
3298
- left: 96px; }
3299
-
3300
- .channel-profile-form .channel-profile-form__avatar {
3301
- margin-top: 16px; }
3302
-
3303
- .channel-profile-form .channel-profile-form__name-section {
3304
- margin-top: 12px; }
3305
- .channel-profile-form .channel-profile-form__name-section .sendbird-input {
3306
- height: 40px; }
3307
-
3308
- .sendbird-channel-settings__operator .sendbird-channel-settings__accordion-icon {
3309
- position: absolute;
3310
- left: 14px; }
3311
-
3312
- .sendbird-channel-settings__operator .sendbird-accordion__panel-heder {
3313
- position: relative; }
3314
-
3315
- .sendbird-more-members__popup-scroll {
3316
- max-height: 420px;
3317
- overflow: scroll; }
3318
- .sendbird-more-members__popup-scroll .sendbird-user-list-item__operator {
3319
- right: 72px; }
3320
- .sendbird-more-members__popup-scroll .sendbird-user-list-item__title {
3321
- max-width: 240px; }
3322
-
3323
- .sendbird-channel-settings__empty-list {
3324
- text-align: center;
3325
- margin-top: 12px;
3326
- margin-bottom: 4px;
3327
- display: block; }
3328
-
3329
- .sendbird-channel-settings-accordion__footer {
3330
- padding-top: 16px;
3331
- display: flex;
3332
- justify-content: left;
3333
- padding-left: 12px; }
3334
- .sendbird-channel-settings-accordion__footer .sendbird-button:nth-child(2) {
3335
- margin-left: 8px; }
3336
-
3337
- .sendbird-channel-settings__freeze {
3338
- max-width: 320px;
3339
- position: relative;
3340
- padding: 12px 22px 10px 56px; }
3341
- .sendbird-theme--light .sendbird-channel-settings__freeze {
3342
- background-color: var(--sendbird-light-background-50);
3343
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3344
- .sendbird-theme--dark .sendbird-channel-settings__freeze {
3345
- background-color: var(--sendbird-dark-background-600);
3346
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
3347
-
3348
- .sendbird-channel-settings__frozen-icon {
3349
- position: absolute;
3350
- right: 20px;
3351
- top: 12px; }
3352
- .sendbird-channel-settings__frozen-icon .sendbird-icon {
3353
- cursor: pointer; }
3354
-
3355
- .sendbird-channel-settings__members-list .sendbird-badge,
3356
- .sendbird-channel-settings__members .sendbird-badge {
3357
- position: absolute;
3358
- right: 44px;
3359
- top: 12px; }
3360
- .sendbird-theme--light .sendbird-channel-settings__members-list .sendbird-badge, .sendbird-theme--light
3361
- .sendbird-channel-settings__members .sendbird-badge {
3362
- background-color: var(--sendbird-light-background-200); }
3363
- .sendbird-theme--dark .sendbird-channel-settings__members-list .sendbird-badge, .sendbird-theme--dark
3364
- .sendbird-channel-settings__members .sendbird-badge {
3365
- background-color: var(--sendbird-dark-background-400); }
3366
- .sendbird-theme--light .sendbird-channel-settings__members-list .sendbird-badge .sendbird-label, .sendbird-theme--light
3367
- .sendbird-channel-settings__members .sendbird-badge .sendbird-label {
3368
- color: var(--sendbird-light-onlight-02); }
3369
- .sendbird-theme--dark .sendbird-channel-settings__members-list .sendbird-badge .sendbird-label, .sendbird-theme--dark
3370
- .sendbird-channel-settings__members .sendbird-badge .sendbird-label {
3371
- color: var(--sendbird-dark-ondark-02); }
3372
-
3373
- .sendbird-accordion {
3374
- padding: 8px 0px 16px 0px;
3375
- position: relative;
3376
- box-sizing: border-box; }
3377
- .sendbird-theme--light .sendbird-accordion {
3378
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
3379
- background-color: var(--sendbird-light-background-50); }
3380
- .sendbird-theme--dark .sendbird-accordion {
3381
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
3382
- background-color: var(--sendbird-dark-background-600); }
3383
- .sendbird-accordion .sendbird-accordion__member {
3384
- position: relative;
3385
- padding: 12px 0px 12px 44px;
3386
- height: 40px;
3387
- box-sizing: border-box; }
3388
- .sendbird-accordion .sendbird-accordion__footer {
3389
- display: flex;
3390
- justify-content: flex-start;
3391
- margin-top: 8px; }
3392
-
3393
- .sendbird-accordion__panel-header {
3394
- cursor: pointer;
3395
- position: relative;
3396
- padding: 12px 22px 10px 56px; }
3397
- .sendbird-theme--light .sendbird-accordion__panel-header {
3398
- background-color: var(--sendbird-light-background-50);
3399
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3400
- .sendbird-theme--dark .sendbird-accordion__panel-header {
3401
- background-color: var(--sendbird-dark-background-600);
3402
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
3403
- .sendbird-accordion__panel-header:focus {
3404
- outline: none; }
3405
- .sendbird-accordion__panel-header.sendbird-accordion__panel-item__disabled {
3406
- cursor: not-allowed; }
3407
-
3408
- .sendbird-accordion__panel-icon-left,
3409
- .sendbird-accordion__panel-icon-right {
3410
- position: absolute;
3411
- top: 10px; }
3412
-
3413
- .sendbird-accordion__panel-icon-left {
3414
- left: 16px; }
3415
-
3416
- .sendbird-accordion__panel-icon-right {
3417
- right: 16px; }
3418
-
3419
- .sendbird-accordion__panel-icon--open {
3420
- transform: rotate(90deg); }
3421
-
3422
- .sendbird-theme--light .sendbird-accordion__panel-icon--chevron path {
3423
- fill: var(--sendbird-light-onlight-01); }
3424
-
3425
- .sendbird-theme--dark .sendbird-accordion__panel-icon--chevron path {
3426
- fill: var(--sendbird-dark-ondark-01); }
3427
-
3428
- .sendbird-theme--light .sendbird-accordion__panel-icon__leave path {
3429
- fill: var(--sendbird-light-error-300); }
3430
-
3431
- .sendbird-theme--dark .sendbird-accordion__panel-icon__leave path {
3432
- fill: var(--sendbird-dark-error-300); }
3433
-
3434
- .sendbird-user-list-item--small {
3435
- display: block;
3436
- position: relative;
3437
- box-sizing: border-box;
3438
- height: 40px; }
3439
- .sendbird-user-list-item--small__avatar {
3440
- cursor: pointer;
3441
- position: absolute;
3442
- top: 10px;
3443
- left: 12px; }
3444
- .sendbird-user-list-item--small .sendbird-muted-avatar {
3445
- position: absolute;
3446
- top: 10px;
3447
- left: 12px;
3448
- z-index: 2;
3449
- pointer-events: none; }
3450
- .sendbird-user-list-item--small__title {
3451
- position: absolute;
3452
- top: 10px;
3453
- left: 54px;
3454
- width: 160px;
3455
- white-space: nowrap;
3456
- overflow: hidden;
3457
- text-overflow: ellipsis; }
3458
- .sendbird-user-list-item--small__subtitle {
3459
- position: absolute;
3460
- top: 23px;
3461
- left: 140px;
3462
- max-width: 237px;
3463
- white-space: nowrap;
3464
- overflow: hidden;
3465
- text-overflow: ellipsis; }
3466
- .sendbird-user-list-item--small__checkbox {
3467
- position: absolute;
3468
- top: 16px;
3469
- right: 16px; }
3470
- .sendbird-user-list-item--small__action {
3471
- display: none;
3472
- position: absolute;
3473
- right: 10px;
3474
- top: 4px; }
3475
- .sendbird-user-list-item--small__operator {
3476
- position: absolute;
3477
- right: 24px;
3478
- top: 10px; }
3479
- .sendbird-theme--light .sendbird-user-list-item--small:hover, .sendbird-theme--light .sendbird-user-list-item--small.sendbird-icon--pressed {
3480
- background-color: var(--sendbird-light-background-100); }
3481
- .sendbird-theme--dark .sendbird-user-list-item--small:hover, .sendbird-theme--dark .sendbird-user-list-item--small.sendbird-icon--pressed {
3482
- background-color: var(--sendbird-dark-background-500); }
3483
- .sendbird-user-list-item--small:hover .sendbird-user-list-item--small__action, .sendbird-user-list-item--small.sendbird-icon--pressed .sendbird-user-list-item--small__action {
3484
- display: block; }
3485
- .sendbird-user-list-item--small:hover .sendbird-user-list-item--small__operator, .sendbird-user-list-item--small.sendbird-icon--pressed .sendbird-user-list-item--small__operator {
3486
- display: none; }
3487
- .sendbird-theme--light .sendbird-user-list-item--small.sendbird-icon--pressed .sendbird-iconbutton {
3488
- background-color: var(--sendbird-light-primary-100); }
3489
- .sendbird-theme--dark .sendbird-user-list-item--small.sendbird-icon--pressed .sendbird-iconbutton {
3490
- background-color: var(--sendbird-dark-background-700); }
3491
-
3492
- .sendbird-message-search-pannel {
3493
- position: relative;
3494
- display: flex;
3495
- flex-direction: column;
3496
- width: 320px;
3497
- height: 100%;
3498
- box-sizing: border-box; }
3499
- .sendbird-theme--light .sendbird-message-search-pannel {
3500
- background-color: var(--sendbird-light-background-50); }
3501
- .sendbird-theme--dark .sendbird-message-search-pannel {
3502
- background-color: var(--sendbird-dark-background-600); }
3503
- .sendbird-message-search-pannel .sendbird-message-search-pannel__header {
3504
- position: relative;
3505
- display: flex;
3506
- width: 100%;
3507
- height: 64px;
3508
- min-height: 64px;
3509
- box-sizing: border-box; }
3510
- .sendbird-theme--light .sendbird-message-search-pannel .sendbird-message-search-pannel__header {
3511
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3512
- .sendbird-theme--dark .sendbird-message-search-pannel .sendbird-message-search-pannel__header {
3513
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
3514
- .sendbird-message-search-pannel .sendbird-message-search-pannel__header .sendbird-message-search-pannel__header__title {
3515
- position: absolute;
3516
- top: 20px;
3517
- left: 24px;
3518
- width: calc(100% - 74px);
3519
- overflow-x: hidden;
3520
- word-break: keep-all;
3521
- text-overflow: ellipsis; }
3522
- .sendbird-message-search-pannel .sendbird-message-search-pannel__header .sendbird-message-search-pannel__header__close-button {
3523
- position: absolute;
3524
- top: 16px;
3525
- right: 16px; }
3526
- .sendbird-message-search-pannel .sendbird-message-search-pannel__input {
3527
- display: flex;
3528
- position: relative;
3529
- padding: 16px;
3530
- box-sizing: border-box; }
3531
- .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container {
3532
- position: relative;
3533
- border-radius: 4px;
3534
- width: 100%;
3535
- height: 44px; }
3536
- .sendbird-theme--light .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container {
3537
- border: 1px solid var(--sendbird-light-onlight-03); }
3538
- .sendbird-theme--dark .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container {
3539
- border: 1px solid var(--sendbird-dark-ondark-03); }
3540
- .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container .sendbird-message-search-pannel__input__container__search-icon {
3541
- position: absolute;
3542
- top: 10px;
3543
- left: 16px; }
3544
- .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container .sendbird-message-search-pannel__input__container__input-area {
3545
- position: absolute;
3546
- top: 14px;
3547
- left: 48px;
3548
- margin: 0px;
3549
- padding: 0px;
3550
- border: 0px;
3551
- outline: none;
3552
- font-size: 14px;
3553
- width: calc(100% - 90px); }
3554
- .sendbird-theme--light .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container .sendbird-message-search-pannel__input__container__input-area {
3555
- color: var(--sendbird-light-onlight-01);
3556
- background-color: var(--sendbird-light-background-50); }
3557
- .sendbird-theme--dark .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container .sendbird-message-search-pannel__input__container__input-area {
3558
- color: var(--sendbird-dark-ondark-01);
3559
- background-color: var(--sendbird-dark-background-600); }
3560
- .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container .sendbird-message-search-pannel__input__container__spinner {
3561
- position: absolute;
3562
- top: 12px;
3563
- right: 12px; }
3564
- .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container .sendbird-message-search-pannel__input__container__reset-input-button {
3565
- position: absolute;
3566
- top: 12px;
3567
- right: 12px; }
3568
- .sendbird-message-search-pannel .sendbird-message-search-pannel__input .sendbird-message-search-pannel__input__container .sendbird-message-search-pannel__input__container__reset-input-button:hover {
3569
- cursor: pointer; }
3570
- .sendbird-message-search-pannel .sendbird-message-search-pannel__message-search {
3571
- position: relative;
3572
- box-sizing: border-box;
3573
- width: 100%;
3574
- height: 100%;
3575
- overflow-y: hidden; }
3576
-
3577
- .sendbird-message-search {
3578
- position: relative;
3579
- height: 100%;
3580
- overflow: scroll; }
3581
- .sendbird-theme--light .sendbird-message-search {
3582
- background-color: var(--sendbird-light-background-50); }
3583
- .sendbird-theme--dark .sendbird-message-search {
3584
- background-color: var(--sendbird-dark-background-600); }
3585
-
3586
- .sendbird-message-search-item {
3587
- display: inline-flex;
3588
- flex-direction: row;
3589
- width: 100%;
3590
- height: 80px;
3591
- position: relative;
3592
- cursor: pointer; }
3593
- .sendbird-theme--light .sendbird-message-search-item {
3594
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
3595
- background-color: var(--sendbird-light-background-50); }
3596
- .sendbird-theme--dark .sendbird-message-search-item {
3597
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
3598
- background-color: var(--sendbird-dark-background-600); }
3599
- .sendbird-theme--light .sendbird-message-search-item:hover {
3600
- background-color: var(--sendbird-light-background-100); }
3601
- .sendbird-theme--dark .sendbird-message-search-item:hover {
3602
- background-color: var(--sendbird-dark-background-500); }
3603
- .sendbird-message-search-item .sendbird-message-search-item__left {
3604
- display: flex;
3605
- align-items: center;
3606
- justify-content: center;
3607
- width: 90px;
3608
- height: 80px; }
3609
- .sendbird-message-search-item .sendbird-message-search-item__right {
3610
- display: flex;
3611
- flex-direction: column;
3612
- width: calc(100% - 106px); }
3613
- .sendbird-message-search-item .sendbird-message-search-item__right .sendbird-message-search-item__right__sender-name {
3614
- display: flex;
3615
- max-width: 280px;
3616
- height: 16px;
3617
- overflow: hidden;
3618
- text-overflow: ellipsis;
3619
- position: absolute;
3620
- top: 12px; }
3621
- .sendbird-message-search-item .sendbird-message-search-item__right .sendbird-message-search-item__right__message-text {
3622
- box-sizing: border-box;
3623
- display: flex;
3624
- width: inherit;
3625
- height: 32px;
3626
- overflow: hidden;
3627
- text-overflow: ellipsis;
3628
- position: absolute;
3629
- top: 36px;
3630
- word-break: break-word; }
3631
- .sendbird-message-search-item .sendbird-message-search-item__right .sendbird-message-search-item__right__message-created-at {
3632
- position: absolute;
3633
- top: 12px;
3634
- right: 18px; }
3635
- .sendbird-message-search-item .sendbird-message-search-item__right-footer {
3636
- width: 16px; }
3637
-
3638
- .sendbird-theme--light .sendbird-message-search-item.sendbird-message-search-item--selected {
3639
- background-color: var(--sendbird-light-primary-100); }
3640
-
3641
- .sendbird-theme--dark .sendbird-message-search-item.sendbird-message-search-item--selected {
3642
- background-color: var(--sendbird-dark-background-700); }
3643
-
3644
- .sendbird-theme--light .sendbird-message-search-item.sendbird-message-search-item--selected .sendbird-message-search-item__left {
3645
- border-left: 4px solid var(--sendbird-light-primary-300); }
3646
-
3647
- .sendbird-theme--dark .sendbird-message-search-item.sendbird-message-search-item--selected .sendbird-message-search-item__left {
3648
- border-left: 4px solid var(--sendbird-dark-primary-200); }
3649
-
3650
- .sendbird-message-search-file-item {
3651
- position: relative;
3652
- display: inline-flex;
3653
- flex-direction: row;
3654
- width: 100%;
3655
- height: 80px;
3656
- cursor: pointer; }
3657
- .sendbird-theme--light .sendbird-message-search-file-item {
3658
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
3659
- background-color: var(--sendbird-light-background-50); }
3660
- .sendbird-theme--dark .sendbird-message-search-file-item {
3661
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
3662
- background-color: var(--sendbird-dark-background-600); }
3663
- .sendbird-theme--light .sendbird-message-search-file-item:hover {
3664
- background-color: var(--sendbird-light-background-100); }
3665
- .sendbird-theme--dark .sendbird-message-search-file-item:hover {
3666
- background-color: var(--sendbird-dark-background-500); }
3667
- .sendbird-message-search-file-item .sendbird-message-search-file-item__left {
3668
- position: relative;
3669
- display: flex;
3670
- align-items: center;
3671
- justify-content: center;
3672
- width: 90px;
3673
- height: 80px; }
3674
- .sendbird-message-search-file-item .sendbird-message-search-file-item__right {
3675
- position: relative;
3676
- display: flex;
3677
- flex-direction: column;
3678
- width: calc(100% - 106px); }
3679
- .sendbird-message-search-file-item .sendbird-message-search-file-item__right .sendbird-message-search-file-item__right__sender-name {
3680
- position: absolute;
3681
- top: 12px;
3682
- display: flex;
3683
- max-width: 280px;
3684
- height: 16px;
3685
- overflow: hidden;
3686
- text-overflow: ellipsis; }
3687
- .sendbird-message-search-file-item .sendbird-message-search-file-item__right .sendbird-message-search-file-item__right__content {
3688
- position: absolute;
3689
- top: 36px;
3690
- box-sizing: border-box;
3691
- width: 100%;
3692
- height: 32px;
3693
- display: flex;
3694
- flex-direction: row;
3695
- align-items: center; }
3696
- .sendbird-message-search-file-item .sendbird-message-search-file-item__right .sendbird-message-search-file-item__right__content .sendbird-message-search-file-item__right__content__type-icon {
3697
- position: relative;
3698
- margin-right: 4px;
3699
- display: flex;
3700
- align-items: center;
3701
- justify-content: center;
3702
- width: 26px;
3703
- min-width: 26px;
3704
- height: 26px;
3705
- border-radius: 8px; }
3706
- .sendbird-theme--light .sendbird-message-search-file-item .sendbird-message-search-file-item__right .sendbird-message-search-file-item__right__content .sendbird-message-search-file-item__right__content__type-icon {
3707
- background-color: var(--sendbird-light-background-100); }
3708
- .sendbird-theme--dark .sendbird-message-search-file-item .sendbird-message-search-file-item__right .sendbird-message-search-file-item__right__content .sendbird-message-search-file-item__right__content__type-icon {
3709
- background-color: var(--sendbird-dark-background-500); }
3710
- .sendbird-message-search-file-item .sendbird-message-search-file-item__right .sendbird-message-search-file-item__right__content .sendbird-message-search-file-item__right__content__url {
3711
- height: 16px;
3712
- position: relative;
3713
- display: flex;
3714
- overflow: hidden;
3715
- text-overflow: ellipsis;
3716
- word-break: keep-all;
3717
- white-space: nowrap; }
3718
- .sendbird-message-search-file-item .sendbird-message-search-file-item__message-created-at {
3719
- position: absolute;
3720
- top: 12px;
3721
- right: 18px; }
3722
- .sendbird-message-search-file-item .sendbird-message-search-file-item__right-footer {
3723
- width: 16px; }
3724
-
3725
- .sendbird-theme--light .sendbird-message-search-file-item.sendbird-message-search-file-item--selected {
3726
- background-color: var(--sendbird-light-primary-100); }
3727
-
3728
- .sendbird-theme--dark .sendbird-message-search-file-item.sendbird-message-search-file-item--selected {
3729
- background-color: var(--sendbird-dark-background-700); }
3730
-
3731
- .sendbird-theme--light .sendbird-message-search-file-item.sendbird-message-search-file-item--selected .sendbird-message-search-file-item__left {
3732
- border-left: 4px solid var(--sendbird-light-primary-300); }
3733
-
3734
- .sendbird-theme--dark .sendbird-message-search-file-item.sendbird-message-search-file-item--selected .sendbird-message-search-file-item__left {
3735
- border-left: 4px solid var(--sendbird-dark-primary-200); }
3736
-
3737
- .sendbird-app__wrap {
3738
- width: 100%;
3739
- height: 100%;
3740
- display: flex;
3741
- box-sizing: border-box; }
3742
- .sendbird-app__wrap .sendbird-app__searchpanel-wrap {
3743
- width: 320px;
3744
- overflow-y: scroll;
3745
- box-sizing: border-box; }
3746
- .sendbird-theme--light .sendbird-app__wrap .sendbird-app__searchpanel-wrap {
3747
- border-top: 1px solid var(--sendbird-light-onlight-04);
3748
- border-right: 1px solid var(--sendbird-light-onlight-04);
3749
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3750
- .sendbird-theme--dark .sendbird-app__wrap .sendbird-app__searchpanel-wrap {
3751
- border-top: 1px solid var(--sendbird-dark-background-600);
3752
- border-right: 1px solid var(--sendbird-dark-background-600);
3753
- border-bottom: 1px solid var(--sendbird-dark-background-600); }
3754
- .sendbird-app__wrap .sendbird-app__conversation-wrap {
3755
- flex: 1;
3756
- position: relative;
3757
- width: calc(100% - 320px); }
3758
- .sendbird-app__wrap .sendbird-app__channellist-wrap {
3759
- max-width: 320px; }
3760
- .sendbird-theme--light .sendbird-app__wrap .sendbird-app__channellist-wrap {
3761
- border-top: 1px solid var(--sendbird-light-onlight-04);
3762
- border-left: 1px solid var(--sendbird-light-onlight-04);
3763
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3764
- .sendbird-theme--dark .sendbird-app__wrap .sendbird-app__channellist-wrap {
3765
- border-top: 1px solid var(--sendbird-dark-background-600);
3766
- border-left: 1px solid var(--sendbird-dark-background-600);
3767
- border-bottom: 1px solid var(--sendbird-dark-background-600); }
3768
- .sendbird-theme--light .sendbird-app__wrap .sendbird-app__conversation--settings-open .sendbird-chat-header__info {
3769
- background-color: var(--sendbird-light-primary-100); }
3770
- .sendbird-theme--dark .sendbird-app__wrap .sendbird-app__conversation--settings-open .sendbird-chat-header__info {
3771
- background-color: var(--sendbird-dark-background-700); }
3772
- .sendbird-app__wrap .sendbird-chat-header__search {
3773
- margin-right: 16px; }
3774
- .sendbird-theme--light .sendbird-app__wrap .sendbird-app__conversation--search-open .sendbird-chat-header__search {
3775
- background-color: var(--sendbird-light-primary-100); }
3776
- .sendbird-theme--dark .sendbird-app__wrap .sendbird-app__conversation--search-open .sendbird-chat-header__search {
3777
- background-color: var(--sendbird-dark-background-700); }
3778
- .sendbird-app__wrap .sendbird-channel-settings {
3779
- border-left: none; }
3780
- .sendbird-theme--light .sendbird-app__wrap .sendbird-channel-settings {
3781
- border-top: 1px solid var(--sendbird-light-onlight-04);
3782
- border-right: 1px solid var(--sendbird-light-onlight-04);
3783
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3784
- .sendbird-theme--dark .sendbird-app__wrap .sendbird-channel-settings {
3785
- border-top: 1px solid var(--sendbird-dark-background-600);
3786
- border-right: 1px solid var(--sendbird-dark-background-600);
3787
- border-bottom: 1px solid var(--sendbird-dark-background-600); }
3788
- .sendbird-app__wrap .sendbird-channel-settings .sendbird-channel-settings__header {
3789
- height: 64px; }
3790
-
3791
- .sendbird-openchannel-conversation {
3792
- position: relative;
3793
- display: flex;
3794
- flex-direction: column;
3795
- height: 100%;
3796
- width: 100%; }
3797
- .sendbird-theme--light .sendbird-openchannel-conversation {
3798
- background-color: var(--sendbird-light-background-50); }
3799
- .sendbird-theme--dark .sendbird-openchannel-conversation {
3800
- background-color: var(--sendbird-dark-background-600); }
3801
- .sendbird-openchannel-conversation .sendbird-openchannel-conversation-scroll {
3802
- overflow-y: auto;
3803
- flex: 1 1 0;
3804
- order: 2;
3805
- width: 100%; }
3806
- .sendbird-openchannel-conversation .sendbird-openchannel-footer {
3807
- order: 3;
3808
- padding: 12px 24px 24px 24px; }
3809
- .sendbird-openchannel-conversation .sendbird-openchannel-conversation-scroll-container {
3810
- display: flex;
3811
- height: 100%;
3812
- overflow-y: auto;
3813
- overflow-x: hidden;
3814
- flex-direction: column; }
3815
- .sendbird-openchannel-conversation .sendbird-openchannel-conversation-scroll-container .sendbird-openchannel-conversation-scroll-padding {
3816
- flex: 1 1 0; }
3817
-
3818
- .sendbird-frozen-channel-notification {
3819
- position: relative;
3820
- margin-top: 8px;
3821
- margin-right: 24px;
3822
- margin-left: 24px;
3823
- height: 32px;
3824
- display: flex;
3825
- align-items: center;
3826
- justify-content: center;
3827
- border-radius: 4px; }
3828
- .sendbird-theme--light .sendbird-frozen-channel-notification {
3829
- background-color: var(--sendbird-light-information-100); }
3830
- .sendbird-theme--dark .sendbird-frozen-channel-notification {
3831
- background-color: var(--sendbird-dark-information-100); }
3832
-
3833
- .sendbird-openchannel-conversation-header {
3834
- position: relative;
3835
- min-height: 64px;
3836
- box-sizing: border-box; }
3837
- .sendbird-theme--light .sendbird-openchannel-conversation-header {
3838
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
3839
- .sendbird-theme--dark .sendbird-openchannel-conversation-header {
3840
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
3841
- .sendbird-openchannel-conversation-header .sendbird-openchannel-conversation-header__left__title {
3842
- white-space: nowrap;
3843
- overflow-x: hidden;
3844
- text-overflow: ellipsis;
3845
- max-width: calc(100% - 120px); }
3846
- .sendbird-openchannel-conversation-header__left [class*=sendbird-openchannel-conversation-header__left__cover-image] {
3847
- position: absolute;
3848
- left: 20px;
3849
- top: 16px; }
3850
- .sendbird-openchannel-conversation-header__left__title {
3851
- position: absolute;
3852
- left: 60px;
3853
- top: 12px; }
3854
- .sendbird-openchannel-conversation-header__left__sub-title {
3855
- position: absolute;
3856
- left: 60px;
3857
- top: 36px; }
3858
- .sendbird-openchannel-conversation-header__right {
3859
- position: absolute;
3860
- top: 0px;
3861
- right: 0px;
3862
- width: 64px;
3863
- height: 64px; }
3864
- .sendbird-openchannel-conversation-header__right__trigger {
3865
- position: absolute;
3866
- top: 16px;
3867
- right: 16px;
3868
- display: flex;
3869
- align-items: center;
3870
- justify-content: center; }
3871
-
3872
- .sendbird-openchannel-conversation-header__left__cover-image--icon {
3873
- display: flex;
3874
- justify-content: center;
3875
- align-items: center;
3876
- border-radius: 50%; }
3877
- .sendbird-theme--light .sendbird-openchannel-conversation-header__left__cover-image--icon {
3878
- background-color: var(--sendbird-light-background-300); }
3879
- .sendbird-theme--dark .sendbird-openchannel-conversation-header__left__cover-image--icon {
3880
- background-color: var(--sendbird-dark-background-300); }
3881
-
3882
- .sendbird-openchannel-conversation-scroll {
3883
- position: relative;
3884
- width: 100%; }
3885
- .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container {
3886
- position: -webkit-sticky;
3887
- position: sticky;
3888
- width: 100%;
3889
- bottom: 0px;
3890
- height: 100%; }
3891
- .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__padding {
3892
- height: 8px; }
3893
- .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
3894
- position: -webkit-sticky;
3895
- position: sticky;
3896
- display: flex;
3897
- align-items: center;
3898
- justify-content: center;
3899
- bottom: 8px;
3900
- left: calc(50% - 20px);
3901
- width: 40px;
3902
- height: 40px;
3903
- border-radius: 24px;
3904
- z-index: 1; }
3905
- .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
3906
- background-color: var(--sendbird-light-primary-300);
3907
- box-shadow: var(--sendbird-light-shadow-05); }
3908
- .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button {
3909
- background-color: var(--sendbird-dark-primary-200);
3910
- box-shadow: var(--sendbird-dark-shadow-05); }
3911
- .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
3912
- cursor: pointer; }
3913
- .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
3914
- background-color: var(--sendbird-light-primary-400); }
3915
- .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:hover {
3916
- background-color: var(--sendbird-dark-primary-300); }
3917
- .sendbird-theme--light .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:active {
3918
- background-color: var(--sendbird-light-primary-500); }
3919
- .sendbird-theme--dark .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__scroll-bottom-button:active {
3920
- background-color: var(--sendbird-dark-primary-400); }
3921
- .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__item-container--no-messages {
3922
- width: 100%;
3923
- height: calc(100% - 8px); }
3924
- .sendbird-openchannel-conversation-scroll .sendbird-openchannel-conversation-scroll__container .sendbird-openchannel-conversation-scroll__container__item-container--no-messages .sendbird-openchannel-conversation-scroll__container__place-holder {
3925
- width: 100%;
3926
- height: 100%; }
3927
-
3928
- .sendbird-openchannel-user-message {
3929
- position: relative;
3930
- display: flex;
3931
- flex-direction: row;
3932
- width: 100%; }
3933
- .sendbird-theme--light .sendbird-openchannel-user-message:hover {
3934
- background-color: var(--sendbird-light-background-100); }
3935
- .sendbird-theme--dark .sendbird-openchannel-user-message:hover {
3936
- background-color: var(--sendbird-dark-background-400); }
3937
- .sendbird-openchannel-user-message:hover .sendbird-openchannel-user-message__context-menu {
3938
- display: block; }
3939
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__left {
3940
- position: relative;
3941
- display: flex;
3942
- width: 52px;
3943
- min-width: 52px; }
3944
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__left .sendbird-openchannel-user-message__left__avatar {
3945
- position: relative;
3946
- display: flex;
3947
- margin-top: 8px;
3948
- margin-left: 24px; }
3949
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right {
3950
- position: relative;
3951
- display: flex;
3952
- flex-direction: column;
3953
- width: 100%;
3954
- margin: 8px 24px 8px 12px; }
3955
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__top {
3956
- position: relative;
3957
- display: flex;
3958
- margin-bottom: 2px; }
3959
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__top .sendbird-openchannel-user-message__right__top__sender-name {
3960
- position: relative;
3961
- display: flex; }
3962
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__top .sendbird-openchannel-user-message__right__top__sent-at {
3963
- position: relative;
3964
- display: flex;
3965
- margin-left: 4px; }
3966
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__bottom {
3967
- position: relative;
3968
- display: flex;
3969
- width: 100%; }
3970
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__bottom .sendbird-openchannel-user-message__right__bottom__message {
3971
- position: relative;
3972
- word-break: break-all; }
3973
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__right .sendbird-openchannel-user-message__right__tail {
3974
- position: relative;
3975
- top: 2px; }
3976
- .sendbird-openchannel-user-message .sendbird-openchannel-user-message__context-menu {
3977
- position: absolute;
3978
- right: 16px;
3979
- display: none; }
3980
- .sendbird-theme--light .sendbird-openchannel-user-message .sendbird-openchannel-user-message__context-menu .sendbird-openchannel-user-message__context-menu--icon {
3981
- background-color: var(--sendbird-light-background-200); }
3982
- .sendbird-theme--dark .sendbird-openchannel-user-message .sendbird-openchannel-user-message__context-menu .sendbird-openchannel-user-message__context-menu--icon {
3983
- background-color: var(--sendbird-dark-background-500); }
3984
- .sendbird-theme--light .sendbird-openchannel-user-message .sendbird-openchannel-user-message__context-menu .sendbird-openchannel-user-message__context-menu--icon:hover {
3985
- background-color: var(--sendbird-light-primary-100); }
3986
- .sendbird-theme--dark .sendbird-openchannel-user-message .sendbird-openchannel-user-message__context-menu .sendbird-openchannel-user-message__context-menu--icon:hover {
3987
- background-color: var(--sendbird-dark-background-700); }
3988
-
3989
- .sendbird-openchannel-admin-message {
3990
- position: relative;
3991
- margin: 16px 24px;
3992
- padding: 12px 16px;
3993
- border-radius: 4px; }
3994
- .sendbird-theme--light .sendbird-openchannel-admin-message {
3995
- background-color: var(--sendbird-light-background-100); }
3996
- .sendbird-theme--dark .sendbird-openchannel-admin-message {
3997
- background-color: var(--sendbird-dark-background-500); }
3998
- .sendbird-theme--light .sendbird-openchannel-admin-message:hover {
3999
- background-color: var(--sendbird-light-background-100); }
4000
- .sendbird-theme--dark .sendbird-openchannel-admin-message:hover {
4001
- background-color: var(--sendbird-dark-background-400); }
4002
- .sendbird-openchannel-admin-message .sendbird-openchannel-admin-message__text {
4003
- word-wrap: break-word; }
4004
-
4005
- .sendbird-openchannel-og-message {
4006
- position: relative;
4007
- display: flex;
4008
- flex-direction: column;
4009
- width: 100%; }
4010
- .sendbird-theme--light .sendbird-openchannel-og-message:hover {
4011
- background-color: var(--sendbird-light-background-100); }
4012
- .sendbird-theme--dark .sendbird-openchannel-og-message:hover {
4013
- background-color: var(--sendbird-dark-background-400); }
4014
- .sendbird-openchannel-og-message:hover .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__context-menu {
4015
- display: block; }
4016
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top {
4017
- box-sizing: border-box;
4018
- position: relative;
4019
- display: flex;
4020
- flex-direction: row; }
4021
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__left {
4022
- position: relative;
4023
- display: flex;
4024
- width: 52px;
4025
- min-width: 52px; }
4026
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__left .sendbird-openchannel-og-message__top__left__avatar {
4027
- position: absolute;
4028
- display: flex;
4029
- top: 8px;
4030
- left: 24px; }
4031
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__right {
4032
- position: relative;
4033
- display: flex;
4034
- box-sizing: border-box;
4035
- flex-direction: column;
4036
- margin: 8px 24px 8px 12px; }
4037
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__right .sendbird-openchannel-og-message__top__right__title {
4038
- position: relative;
4039
- display: flex;
4040
- margin-bottom: 2px; }
4041
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__right .sendbird-openchannel-og-message__top__right__title .sendbird-openchannel-og-message__top__right__title__sender-name {
4042
- position: relative;
4043
- display: flex; }
4044
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__right .sendbird-openchannel-og-message__top__right__title .sendbird-openchannel-og-message__top__right__title__sent-at {
4045
- position: relative;
4046
- display: flex;
4047
- margin-left: 4px; }
4048
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__right .sendbird-openchannel-og-message__top__right__description .sendbird-openchannel-og-message__top__right__description__message {
4049
- position: relative;
4050
- display: inline;
4051
- white-space: pre-wrap;
4052
- word-break: break-all; }
4053
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__context-menu {
4054
- position: absolute;
4055
- right: 16px;
4056
- display: none; }
4057
- .sendbird-theme--light .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__context-menu .sendbird-openchannel-og-message__top__context-menu--icon {
4058
- background-color: var(--sendbird-light-background-200); }
4059
- .sendbird-theme--dark .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__context-menu .sendbird-openchannel-og-message__top__context-menu--icon {
4060
- background-color: var(--sendbird-dark-background-500); }
4061
- .sendbird-theme--light .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__context-menu .sendbird-openchannel-og-message__top__context-menu--icon:hover {
4062
- background-color: var(--sendbird-light-primary-100); }
4063
- .sendbird-theme--dark .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top .sendbird-openchannel-og-message__top__context-menu .sendbird-openchannel-og-message__top__context-menu--icon:hover {
4064
- background-color: var(--sendbird-dark-background-700); }
4065
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom {
4066
- position: relative;
4067
- display: inline;
4068
- margin-bottom: 8px;
4069
- width: 100%; }
4070
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag {
4071
- position: relative;
4072
- display: inline-block;
4073
- box-sizing: border-box;
4074
- width: calc(100% - 64px);
4075
- max-width: 360px;
4076
- left: 64px;
4077
- padding: 12px 12px 4px 12px;
4078
- border-radius: 8px; }
4079
- .sendbird-theme--light .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag {
4080
- border: solid 1px var(--sendbird-light-onlight-04);
4081
- background-color: var(--sendbird-light-background-100); }
4082
- .sendbird-theme--dark .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag {
4083
- border: solid 1px var(--sendbird-dark-ondark-04);
4084
- background-color: var(--sendbird-dark-background-500); }
4085
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__url {
4086
- position: relative;
4087
- display: block;
4088
- white-space: nowrap;
4089
- overflow: hidden;
4090
- text-overflow: ellipsis;
4091
- margin-bottom: 8px;
4092
- max-width: 336px; }
4093
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__title {
4094
- position: relative;
4095
- display: inline-block;
4096
- white-space: pre-wrap;
4097
- overflow-wrap: normal;
4098
- margin-bottom: 8px;
4099
- max-width: 336px; }
4100
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__title:hover {
4101
- cursor: pointer; }
4102
- .sendbird-theme--light .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__title:hover {
4103
- color: var(--sendbird-light-primary-300); }
4104
- .sendbird-theme--dark .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__title:hover {
4105
- color: var(--sendbird-dark-primary-200); }
4106
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__description {
4107
- position: relative;
4108
- display: block;
4109
- white-space: pre-wrap;
4110
- overflow: hidden;
4111
- text-overflow: ellipsis;
4112
- word-break: break-all;
4113
- max-height: 32px;
4114
- margin-bottom: 8px;
4115
- width: 100%;
4116
- max-width: 336px; }
4117
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__thumbnail {
4118
- box-sizing: border-box;
4119
- position: relative;
4120
- display: block;
4121
- margin-top: 4px;
4122
- margin-bottom: 8px;
4123
- width: 100%; }
4124
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__thumbnail:hover {
4125
- cursor: pointer; }
4126
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__thumbnail .sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image {
4127
- border-radius: 8px;
4128
- width: 100%;
4129
- min-width: 200px;
4130
- max-width: 336px; }
4131
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__bottom .sendbird-openchannel-og-message__bottom__og-tag .sendbird-openchannel-og-message__bottom__og-tag__thumbnail .sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image--placeholder {
4132
- border-radius: 8px;
4133
- width: 100%;
4134
- min-width: 200px;
4135
- max-width: 336px; }
4136
- .sendbird-openchannel-og-message .sendbird-openchannel-og-message__top__right__tail {
4137
- position: relative;
4138
- left: 64px;
4139
- top: 2px; }
4140
-
4141
- .sendbird-openchannel-og-message--word {
4142
- display: inline;
4143
- margin: 0px 2px;
4144
- word-break: break-all; }
4145
-
4146
- .sendbird-theme--light .sendbird-openchannel-og-message--word--link {
4147
- color: var(--sendbird-light-primary-300); }
4148
-
4149
- .sendbird-theme--dark .sendbird-openchannel-og-message--word--link {
4150
- color: var(--sendbird-dark-primary-200); }
4151
-
4152
- .sendbird-openchannel-thumbnail-message {
4153
- position: relative;
4154
- display: flex;
4155
- flex-direction: row; }
4156
- .sendbird-theme--light .sendbird-openchannel-thumbnail-message:hover {
4157
- background-color: var(--sendbird-light-background-100); }
4158
- .sendbird-theme--dark .sendbird-openchannel-thumbnail-message:hover {
4159
- background-color: var(--sendbird-dark-background-400); }
4160
- .sendbird-openchannel-thumbnail-message:hover .sendbird-openchannel-thumbnail-message__context-menu {
4161
- display: block; }
4162
- .sendbird-theme--light .sendbird-openchannel-thumbnail-message:hover .sendbird-openchannel-thumbnail-message__context-menu .sendbird-openchannel-thumbnail-message__context-menu--icon {
4163
- background-color: var(--sendbird-light-background-200); }
4164
- .sendbird-theme--dark .sendbird-openchannel-thumbnail-message:hover .sendbird-openchannel-thumbnail-message__context-menu .sendbird-openchannel-thumbnail-message__context-menu--icon {
4165
- background-color: var(--sendbird-dark-background-500); }
4166
- .sendbird-theme--light .sendbird-openchannel-thumbnail-message:hover .sendbird-openchannel-thumbnail-message__context-menu .sendbird-openchannel-thumbnail-message__context-menu--icon:hover {
4167
- background-color: var(--sendbird-light-primary-100); }
4168
- .sendbird-theme--dark .sendbird-openchannel-thumbnail-message:hover .sendbird-openchannel-thumbnail-message__context-menu .sendbird-openchannel-thumbnail-message__context-menu--icon:hover {
4169
- background-color: var(--sendbird-dark-background-700); }
4170
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__left {
4171
- position: relative;
4172
- display: flex;
4173
- width: 52px;
4174
- min-width: 52px; }
4175
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__left .sendbird-openchannel-thumbnail-message__left__avatar {
4176
- position: absolute;
4177
- display: inline;
4178
- margin-top: 8px;
4179
- margin-left: 28px; }
4180
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right {
4181
- position: relative;
4182
- display: flex;
4183
- flex-direction: column;
4184
- margin-top: 8px;
4185
- margin-bottom: 8px;
4186
- margin-left: 12px;
4187
- width: calc(100% - 64px); }
4188
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__title {
4189
- position: relative;
4190
- display: inline;
4191
- margin-bottom: 4px; }
4192
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__title .sendbird-openchannel-thumbnail-message__right__title__sender-name {
4193
- position: relative;
4194
- display: inline;
4195
- margin-right: 4px; }
4196
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__title .sendbird-openchannel-thumbnail-message__right__title__sent-at {
4197
- position: relative;
4198
- display: inline; }
4199
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body {
4200
- position: relative;
4201
- display: flex;
4202
- border-radius: 8px; }
4203
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body:hover .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__overlay {
4204
- opacity: 1; }
4205
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap {
4206
- position: relative;
4207
- box-sizing: content-box; }
4208
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__overlay {
4209
- position: absolute;
4210
- opacity: 0;
4211
- width: 100%;
4212
- height: 100%;
4213
- max-width: 360px;
4214
- top: 0px;
4215
- left: 0px;
4216
- border-radius: 8px;
4217
- cursor: pointer; }
4218
- .sendbird-theme--light .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__overlay {
4219
- background-color: var(--sendbird-light-overlay-02); }
4220
- .sendbird-theme--dark .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__overlay {
4221
- background-color: var(--sendbird-dark-overlay-02); }
4222
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__video {
4223
- max-width: 360px;
4224
- max-height: 360px; }
4225
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__video:hover {
4226
- cursor: pointer; }
4227
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__video .sendbird-openchannel-thumbnail-message__right__body__wrap__video__video {
4228
- max-width: 360px;
4229
- max-height: 360px;
4230
- border-radius: 8px; }
4231
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__video .sendbird-openchannel-thumbnail-message__right__body__wrap__video__icon {
4232
- position: absolute;
4233
- top: calc(50% - 28px);
4234
- left: calc(50% - 28px); }
4235
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon {
4236
- padding: 107px 152px 107px 152px;
4237
- border-radius: 8px; }
4238
- .sendbird-theme--light .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon {
4239
- background-color: var(--sendbird-light-background-100); }
4240
- .sendbird-theme--dark .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon {
4241
- background-color: var(--sendbird-dark-background-500); }
4242
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__image {
4243
- border-radius: 8px; }
4244
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon {
4245
- padding: 107px 152px 107px 152px;
4246
- border-radius: 8px; }
4247
- .sendbird-theme--light .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon {
4248
- background-color: var(--sendbird-light-background-100); }
4249
- .sendbird-theme--dark .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon {
4250
- background-color: var(--sendbird-dark-background-500); }
4251
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__unknown {
4252
- padding: 107px 152px 107px 152px;
4253
- border-radius: 8px; }
4254
- .sendbird-theme--light .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__unknown {
4255
- background-color: var(--sendbird-light-background-100); }
4256
- .sendbird-theme--dark .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__body .sendbird-openchannel-thumbnail-message__right__body__wrap .sendbird-openchannel-thumbnail-message__right__body__wrap__unknown {
4257
- background-color: var(--sendbird-dark-background-500); }
4258
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__right .sendbird-openchannel-thumbnail-message__right__tail {
4259
- position: relative;
4260
- top: 2px; }
4261
- .sendbird-openchannel-thumbnail-message .sendbird-openchannel-thumbnail-message__context-menu {
4262
- position: absolute;
4263
- display: none;
4264
- top: 8px;
4265
- right: 16px; }
4266
-
4267
- .sendbird-openchannel-file-message {
4268
- position: relative;
4269
- display: flex;
4270
- flex-direction: row; }
4271
- .sendbird-theme--light .sendbird-openchannel-file-message:hover {
4272
- background-color: var(--sendbird-light-background-100); }
4273
- .sendbird-theme--dark .sendbird-openchannel-file-message:hover {
4274
- background-color: var(--sendbird-dark-background-400); }
4275
- .sendbird-openchannel-file-message:hover .sendbird-openchannel-file-message__context-menu {
4276
- display: block; }
4277
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__left {
4278
- position: relative;
4279
- display: flex;
4280
- width: 52px;
4281
- min-width: 52px; }
4282
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__left .sendbird-openchannel-file-message__left__avatar {
4283
- position: absolute;
4284
- display: block;
4285
- margin-top: 8px;
4286
- margin-left: 24px; }
4287
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right {
4288
- position: relative;
4289
- display: flex;
4290
- flex-direction: column;
4291
- margin-left: 12px;
4292
- margin-bottom: 4px; }
4293
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__title {
4294
- position: relative;
4295
- display: flex;
4296
- margin-top: 8px; }
4297
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__title .sendbird-openchannel-file-message__right__title__sender-name {
4298
- position: relative;
4299
- display: flex; }
4300
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__title .sendbird-openchannel-file-message__right__title__sent-at {
4301
- position: relative;
4302
- display: flex;
4303
- margin-left: 4px; }
4304
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__body {
4305
- position: relative;
4306
- display: flex;
4307
- margin-top: 4px;
4308
- margin-bottom: 4px;
4309
- border-radius: 8px; }
4310
- .sendbird-theme--light .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__body {
4311
- background-color: var(--sendbird-light-background-100);
4312
- border: solid 1px var(--sendbird-light-onlight-04); }
4313
- .sendbird-theme--dark .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__body {
4314
- background-color: var(--sendbird-dark-background-500);
4315
- border: solid 1px var(--sendbird-dark-ondark-04); }
4316
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__body .sendbird-openchannel-file-message__right__body__icon {
4317
- position: relative;
4318
- display: inline-block;
4319
- margin: 8px;
4320
- border-radius: 8.6px; }
4321
- .sendbird-theme--light .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__body .sendbird-openchannel-file-message__right__body__icon {
4322
- background-color: var(--sendbird-light-background-50); }
4323
- .sendbird-theme--dark .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__body .sendbird-openchannel-file-message__right__body__icon {
4324
- background-color: var(--sendbird-dark-background-600); }
4325
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__right .sendbird-openchannel-file-message__right__body .sendbird-openchannel-file-message__right__body__file-name {
4326
- position: relative;
4327
- display: flex;
4328
- margin-top: 22px;
4329
- margin-right: 16px;
4330
- margin-left: 4px;
4331
- overflow: hidden;
4332
- height: 20px;
4333
- max-height: 20px;
4334
- text-overflow: ellipsis; }
4335
- .sendbird-openchannel-file-message .sendbird-openchannel-file-message__context-menu {
4336
- position: absolute;
4337
- display: none;
4338
- top: 8px;
4339
- right: 16px; }
4340
- .sendbird-theme--light .sendbird-openchannel-file-message .sendbird-openchannel-file-message__context-menu .sendbird-openchannel-file-message__context-menu__icon {
4341
- background-color: var(--sendbird-light-background-200); }
4342
- .sendbird-theme--dark .sendbird-openchannel-file-message .sendbird-openchannel-file-message__context-menu .sendbird-openchannel-file-message__context-menu__icon {
4343
- background-color: var(--sendbird-dark-background-500); }
4344
- .sendbird-theme--light .sendbird-openchannel-file-message .sendbird-openchannel-file-message__context-menu .sendbird-openchannel-file-message__context-menu__icon:hover {
4345
- background-color: var(--sendbird-light-primary-100); }
4346
- .sendbird-theme--dark .sendbird-openchannel-file-message .sendbird-openchannel-file-message__context-menu .sendbird-openchannel-file-message__context-menu__icon:hover {
4347
- background-color: var(--sendbird-dark-background-700); }
4348
-
4349
- .sendbird-fileviewer__header__right__actions__download,
4350
- .sendbird-fileviewer__header__right__actions__delete,
4351
- .sendbird-fileviewer__header__right__actions__close {
4352
- width: 64px;
4353
- padding: 21px;
4354
- box-sizing: border-box;
4355
- cursor: pointer; }
4356
- .sendbird-fileviewer__header__right__actions__download .disabled,
4357
- .sendbird-fileviewer__header__right__actions__delete .disabled,
4358
- .sendbird-fileviewer__header__right__actions__close .disabled {
4359
- cursor: not-allowed; }
4360
-
4361
- .sendbird-fileviewer {
4362
- width: 100%;
4363
- height: 100%;
4364
- position: fixed;
4365
- top: 0;
4366
- left: 0;
4367
- z-index: 100000; }
4368
- .sendbird-theme--light .sendbird-fileviewer {
4369
- background-color: var(--sendbird-light-background-50); }
4370
- .sendbird-theme--dark .sendbird-fileviewer {
4371
- background-color: var(--sendbird-dark-background-600); }
4372
- .sendbird-fileviewer .sendbird-fileviewer__header {
4373
- height: 64px;
4374
- min-height: 64px;
4375
- box-sizing: border-box;
4376
- display: flex;
4377
- justify-content: space-between; }
4378
- .sendbird-theme--light .sendbird-fileviewer .sendbird-fileviewer__header {
4379
- border-bottom: 1px solid var(--sendbird-light-onlight-04); }
4380
- .sendbird-theme--dark .sendbird-fileviewer .sendbird-fileviewer__header {
4381
- border-bottom: 1px solid var(--sendbird-dark-ondark-04); }
4382
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left {
4383
- box-sizing: border-box;
4384
- display: flex;
4385
- flex-direction: row;
4386
- align-items: center;
4387
- height: 64px;
4388
- padding: 16px 20px; }
4389
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__avatar {
4390
- margin-right: 8px; }
4391
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__filename {
4392
- max-width: 500px;
4393
- white-space: nowrap;
4394
- overflow: hidden;
4395
- text-overflow: ellipsis;
4396
- display: inline-block; }
4397
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__left .sendbird-fileviewer__header__left__sender-name {
4398
- max-width: 200px;
4399
- white-space: nowrap;
4400
- overflow: hidden;
4401
- text-overflow: ellipsis;
4402
- display: inline-flex;
4403
- margin-left: 8px;
4404
- padding-top: 5px; }
4405
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right {
4406
- display: flex;
4407
- width: 160px;
4408
- justify-content: flex-end; }
4409
- .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right .sendbird-fileviewer__header__right__actions {
4410
- right: 0;
4411
- display: flex;
4412
- flex-direction: row; }
4413
- .sendbird-theme--light .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right .sendbird-fileviewer__header__right__actions__close {
4414
- border-left: 1px solid var(--sendbird-light-onlight-04); }
4415
- .sendbird-theme--dark .sendbird-fileviewer .sendbird-fileviewer__header .sendbird-fileviewer__header__right .sendbird-fileviewer__header__right__actions__close {
4416
- border-left: 1px solid var(--sendbird-dark-ondark-04); }
4417
- .sendbird-fileviewer .sendbird-fileviewer__content {
4418
- height: calc(100% - 72px);
4419
- margin-top: 8px;
4420
- overflow-y: auto;
4421
- display: flex;
4422
- align-items: center;
4423
- justify-content: center; }
4424
- .sendbird-fileviewer .sendbird-fileviewer__content .sendbird-fileviewer__content__video {
4425
- max-width: 100%;
4426
- max-height: 100%; }
4427
- .sendbird-fileviewer .sendbird-fileviewer__content .sendbird-fileviewer__content__img {
4428
- max-width: 90%;
4429
- max-height: 90%; }
4430
- .sendbird-fileviewer .sendbird-fileviewer__content .sendbird-fileviewer__content__unsupported {
4431
- max-width: 100%;
4432
- max-height: 100%;
4433
- display: flex;
4434
- justify-content: center;
4435
- align-items: center; }
4436
-
4437
- .sendbird-openchannel-profile {
4438
- position: relative;
4439
- text-align: center;
4440
- padding: 32px 40px 27px 40px; }
4441
- .sendbird-theme--light .sendbird-openchannel-profile {
4442
- border-bottom: 1px solid var(--sendbird-light-onlight-04);
4443
- background-color: var(--sendbird-light-background-50); }
4444
- .sendbird-theme--dark .sendbird-openchannel-profile {
4445
- border-bottom: 1px solid var(--sendbird-dark-ondark-04);
4446
- background-color: var(--sendbird-dark-background-600); }
4447
- .sendbird-openchannel-profile .sendbird-openchannel-profile--inner {
4448
- height: 116px; }
4449
- .sendbird-openchannel-profile .sendbird-openchannel-profile__avatar {
4450
- margin-bottom: 16px;
4451
- text-align: center; }
4452
- .sendbird-openchannel-profile .sendbird-openchannel-profile__title {
4453
- max-width: 240px;
4454
- white-space: nowrap;
4455
- overflow-x: hidden;
4456
- text-overflow: ellipsis;
4457
- height: 18px; }
4458
- .sendbird-openchannel-profile .sendbird-openchannel-profile__edit {
4459
- position: absolute;
4460
- top: 10px;
4461
- right: 16px; }
4462
-
4463
- /*# sourceMappingURL=index.css.map */