@sendbird/uikit-react 3.0.0-beta.2 → 3.0.0-beta.3

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