message.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. .bx-messenger-jots {
  2. @apply overflow-visible flex flex-row w-auto relative snap-end mt-1;
  3. }
  4. .bx-messenger-jots-message-container {
  5. @apply relative w-full flex;
  6. }
  7. .bx-messenger-jots-message {
  8. @apply relative whitespace-pre-line break-words flex-stat
  9. w-full text-gray-600 dark:text-gray-400 font-normal text-sm;
  10. }
  11. .bx-messenger-jots-message svg {
  12. @apply w-3.5 h-3.5;
  13. }
  14. .bx-messenger-jots-message-body {
  15. @apply max-w-[60%] md:max-w-[80%];
  16. }
  17. .bx-messenger-jots-message-wrapper {
  18. @apply flex;
  19. }
  20. .bx-messenger-jots-message-bg {
  21. @apply bg-gray-500/10 p-2 -ml-1 rounded-md;
  22. }
  23. .bx-messenger-jots[data-my="1"] .bx-messenger-jots-message-bg {
  24. @apply bg-blue-500/10;
  25. }
  26. .bx-messenger-jots[data-my="1"] .bx-messenger-jots-message-body.message-attachment,
  27. .bx-messenger-jots .bx-messenger-jots-message-body.message-attachment {
  28. @apply bg-transparent;
  29. }
  30. .bx-messenger-jots-message p {
  31. @apply m-0;
  32. }
  33. .bx-messenger-jots-title
  34. {
  35. @apply w-full justify-start leading-6 font-bold text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white;
  36. }
  37. .bx-messenger-jots-title > div
  38. {
  39. @apply items-center text-ellipsis whitespace-nowrap;
  40. }
  41. .bx-messenger-jots-title div.title
  42. {
  43. @apply relative mr-2 overflow-hidden;
  44. }
  45. .bx-messenger-jots-avatars
  46. {
  47. @apply h-auto overflow-hidden text-center relative flex-stat;
  48. }
  49. .bx-messenger-jots-info
  50. {
  51. @apply align-top w-auto flex-dynamic min-w-0 pb-[0.125rem];
  52. }
  53. .bx-messenger-jots-message-vc-icon,
  54. .bx-messenger-jots-message-edit-time
  55. {
  56. @apply right-[0.05rem] opacity-[0.4] whitespace-normal bottom-0;
  57. }
  58. .bx-messenger-jots-message-deleted
  59. {
  60. @apply w-full text-left flex relative bg-transparent/[0.07] min-h-[1.5rem] overflow-hidden whitespace-normal
  61. rounded-md p-1 mt-1 border-none items-center flex-col;
  62. }
  63. .bx-messenger-jots-message-deleted span
  64. {
  65. @apply ml-4;
  66. }
  67. div.bx-messenger-hidden-jot
  68. {
  69. @apply mt-4 ring-2 ring-white dark:ring-gray-900 whitespace-normal p-2 rounded-md overflow-hidden w-full;
  70. }
  71. .bx-messenger-jots-message > img {
  72. @apply float-left mt-1 cursor-zoom-in rounded;
  73. }
  74. .bx-messenger-message-icons svg {
  75. @apply w-3 h-3
  76. }
  77. .bx-messenger-message-icons {
  78. @apply font-light text-xs items-center flex w-full relative justify-end;
  79. }
  80. .bx-messenger-message-icons-views {
  81. @apply whitespace-normal flex w-full -space-x-[0.325rem] justify-end;
  82. }
  83. .bx-messenger-message-icons-views img{
  84. @apply w-4 h-4 rounded-lg ring-[0.5px] ring-white dark:ring-gray-900;
  85. }
  86. .bx-messenger-reply-area {
  87. @apply hidden;
  88. }
  89. .bx-messenger-jots .bx-messenger-reply-area {
  90. @apply flex mb-[0.325rem] bg-transparent/20 w-full rounded-md;
  91. }
  92. .bx-messenger-reply-area a {
  93. @apply m-2 flex;
  94. }
  95. .bx-messenger-reply-area-message {
  96. @apply flex-auto p-1 overflow-hidden text-ellipsis cursor-pointer max-h-[2rem] flex justify-start;
  97. }
  98. .bx-messenger-reply-area-message img {
  99. @apply max-w-[3rem] h-auto;
  100. }
  101. .bx-messenger-jot-reactions {
  102. @apply flex flex-wrap relative leading-normal w-full -top-2 ml-1;
  103. }
  104. .bx-messenger-jot-reactions .bx-messenger-reaction span.count {
  105. @apply mr-[0.325rem] ml-2 leading-5;
  106. }
  107. .bx-messenger-reaction.bx-def-label,
  108. .bx-messenger-reaction {
  109. @apply rounded-xl cursor-pointer flex items-center justify-center mr-2 p-0 px-1;
  110. }
  111. .reactions.bx-def-label {
  112. @apply p-0;
  113. }
  114. span.bx-messenger-reactions-menu-opened
  115. {
  116. @apply flex items-center h-full;
  117. }
  118. div.bx-messenger-reactions-menu i {
  119. @apply text-base;
  120. }
  121. div.bx-messenger-reactions-menu a {
  122. @apply text-center
  123. }
  124. .bx-messenger-reply-area-message .bx-messenger-attachment-file {
  125. @apply max-h-[1.5rem] max-w-[30%] w-[30%];
  126. }
  127. .bx-messenger-reply-area-message .bx-messenger-attachment-file .sys-icon {
  128. @apply text-2xl;
  129. }
  130. .bx-messenger-reply-area-message .bx-messenger-attachment-file .bx-messenger-attachment-file-info span {
  131. @apply text-sm m-0;
  132. }
  133. .bx-messenger-reply-area-message span.title {
  134. @apply font-bold;
  135. }
  136. .bx-messenger-deleted-message-info {
  137. @apply flex items-center max-w-full space-x-2;
  138. }
  139. div.bx-messenger-jots-message-deleted span:first-child
  140. {
  141. @apply flex-auto m-2 text-ellipsis overflow-hidden whitespace-nowrap;
  142. }
  143. div.bx-messenger-jots-message-deleted span svg
  144. {
  145. @apply h-5/6 align-middle;
  146. }
  147. #bx-messenger-big-img .bx-popup-content-wrapped
  148. {
  149. @apply overflow-hidden align-middle text-center cursor-zoom-in w-full h-full;
  150. }
  151. div.bx-messenger-edit-jot
  152. {
  153. @apply p-0 border-0 max-w-full hidden whitespace-normal leading-4 min-h-[2rem];
  154. }
  155. div.bx-messenger-edit-jot div.bx-messenger-post-box-send-area div.bx-messenger-text-box
  156. {
  157. @apply max-h-[12rem] min-h-[2.3rem] p-0 border-0 overflow-auto;
  158. }
  159. .bx-messenger-jots-message .bx-messenger-post-box-send-area div
  160. {
  161. @apply max-w-full m-0 p-1 rounded-md;
  162. }
  163. .bx-messenger-jots-message .embedly-card
  164. {
  165. @apply max-w-lg;
  166. }
  167. .bx-messenger-view-thread, .bx-messenger-view-in-chat {
  168. @apply text-base border-0 rounded-md bg-gray-600/10 dark:bg-gray-500/10 mb-6 w-fit p-1.5;
  169. }
  170. .bx-messenger-edit-jot-buttons {
  171. @apply flex space-x-1 xs:space-x-2 py-2;
  172. }
  173. .bx-messenger-edit-jot-buttons .bx-btn {
  174. @apply py-1 px-2 xs:py-2 xs:px-4;
  175. }
  176. .bx-messenger-jots-message-edit-time i{
  177. @apply text-inherit;
  178. }
  179. div.bx-messenger-jots-icons.active
  180. {
  181. @apply inline;
  182. }
  183. .bx-messenger-jots-message.bx-def-vanilla-html p {
  184. @apply m-0 leading-5;
  185. }