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