@cometchat/chat-uikit-react/dist/CometChatCollaborativeDocumentBubble-7SOCIGMB.css

Ready-to-use Chat UI Components for React

/* src/components/CometChatCollaborativeDocumentBubble/CometChatCollaborativeBubble.css */
.cometchat-collaborative-bubble {
  display: flex;
  width: 240px;
  flex-direction: column;
  padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-1, 4px) 0px var(--cometchat-padding-1, 4px);
  gap: 0px;
  border-radius: var(--cometchat-radius-3, 12px);
  max-width: 240px;
}
.cometchat-collaborative-bubble--incoming {
  background: var( --cometchat-collaborative-bubble-background, var(--cometchat-neutral-color-300, #e8e8e8) );
}
.cometchat-collaborative-bubble--outgoing {
  background: var( --cometchat-collaborative-bubble-background, var(--cometchat-primary-color, #6852d6) );
}
.cometchat-collaborative-bubble__banner-image {
  border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-collaborative-bubble__banner-image img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--cometchat-radius-2, 8px);
  display: block;
}
.cometchat-collaborative-bubble__body {
  display: flex;
  padding: var(--cometchat-padding-2, 8px) 0px;
  align-items: center;
  gap: var(--cometchat-padding-1, 4px);
  align-self: stretch;
  border-radius: var(--cometchat-radius-3, 12px);
}
.cometchat-collaborative-bubble__body-icon {
  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
}
.cometchat-collaborative-bubble--incoming .cometchat-collaborative-bubble__body-icon {
  background: var(--cometchat-primary-color, #6852d6);
}
.cometchat-collaborative-bubble--outgoing .cometchat-collaborative-bubble__body-icon {
  background: var(--cometchat-static-white, #fff);
}
.cometchat-collaborative-bubble--document .cometchat-collaborative-bubble__body-icon {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M6 8.14748C6 6.40917 7.40918 5 9.14749 5H19.8489C21.5873 5 22.9964 6.40918 22.9964 8.14749V13.5388C22.9964 13.7033 22.932 13.8612 22.8171 13.9789L18.75 18.1389L12.9326 23.7101C12.8154 23.8223 12.6594 23.8849 12.4972 23.8849H9.14749C7.40918 23.8849 6 22.4757 6 20.7374V8.14748ZM13.2393 7.95166C12.783 7.95166 12.4131 8.32157 12.4131 8.77788C12.4131 9.23418 12.783 9.60409 13.2393 9.60409H19.2195C19.6758 9.60409 20.0457 9.23418 20.0457 8.77788C20.0457 8.32157 19.6758 7.95166 19.2195 7.95166H13.2393ZM9.77641 11.4146C9.3201 11.4146 8.9502 11.7845 8.9502 12.2408C8.9502 12.6971 9.3201 13.067 9.77641 13.067H19.2189C19.6752 13.067 20.0451 12.6971 20.0451 12.2408C20.0451 11.7845 19.6752 11.4146 19.2189 11.4146H9.77641ZM9.77641 14.876C9.3201 14.876 8.9502 15.2459 8.9502 15.7022C8.9502 16.1585 9.3201 16.5284 9.77641 16.5284H17.3304C17.7867 16.5284 18.1566 16.1585 18.1566 15.7022C18.1566 15.2459 17.7867 14.876 17.3304 14.876H9.77641Z" fill="white"/>%0A<path d="M25.1275 15.3341C24.6359 14.8424 23.8387 14.8424 23.3471 15.3341L15.4128 23.2684C15.3622 23.319 15.3294 23.3846 15.3193 23.4553L14.9521 26.0259C14.9209 26.244 15.1079 26.431 15.326 26.3998L17.8965 26.0326C17.9673 26.0225 18.0329 25.9897 18.0835 25.9391L26.0178 18.0048C26.5095 17.5132 26.5095 16.716 26.0178 16.2243L25.1275 15.3341Z" fill="white"/>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path fill-rule="evenodd" clip-rule="evenodd" d="M6 8.14748C6 6.40917 7.40918 5 9.14749 5H19.8489C21.5873 5 22.9964 6.40918 22.9964 8.14749V13.5388C22.9964 13.7033 22.932 13.8612 22.8171 13.9789L18.75 18.1389L12.9326 23.7101C12.8154 23.8223 12.6594 23.8849 12.4972 23.8849H9.14749C7.40918 23.8849 6 22.4757 6 20.7374V8.14748ZM13.2393 7.95166C12.783 7.95166 12.4131 8.32157 12.4131 8.77788C12.4131 9.23418 12.783 9.60409 13.2393 9.60409H19.2195C19.6758 9.60409 20.0457 9.23418 20.0457 8.77788C20.0457 8.32157 19.6758 7.95166 19.2195 7.95166H13.2393ZM9.77641 11.4146C9.3201 11.4146 8.9502 11.7845 8.9502 12.2408C8.9502 12.6971 9.3201 13.067 9.77641 13.067H19.2189C19.6752 13.067 20.0451 12.6971 20.0451 12.2408C20.0451 11.7845 19.6752 11.4146 19.2189 11.4146H9.77641ZM9.77641 14.876C9.3201 14.876 8.9502 15.2459 8.9502 15.7022C8.9502 16.1585 9.3201 16.5284 9.77641 16.5284H17.3304C17.7867 16.5284 18.1566 16.1585 18.1566 15.7022C18.1566 15.2459 17.7867 14.876 17.3304 14.876H9.77641Z" fill="white"/>%0A<path d="M25.1275 15.3341C24.6359 14.8424 23.8387 14.8424 23.3471 15.3341L15.4128 23.2684C15.3622 23.319 15.3294 23.3846 15.3193 23.4553L14.9521 26.0259C14.9209 26.244 15.1079 26.431 15.326 26.3998L17.8965 26.0326C17.9673 26.0225 18.0329 25.9897 18.0835 25.9391L26.0178 18.0048C26.5095 17.5132 26.5095 16.716 26.0178 16.2243L25.1275 15.3341Z" fill="white"/>%0A</svg>%0A');
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cometchat-collaborative-bubble--whiteboard .cometchat-collaborative-bubble__body-icon {
  -webkit-mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M19.4679 4H20.24C21.135 4 21.887 4.61242 22.0998 5.44108L16.6916 10.8492C16.6549 10.886 16.6073 10.9098 16.5559 10.9171L14.576 11.2C14.4176 11.2226 14.2818 11.0868 14.3044 10.9284L14.5873 8.94854C14.5946 8.89713 14.6184 8.84949 14.6552 8.81277L19.4679 4Z" fill="%23141414"/>%0A<path d="M17.3466 4L13.5945 7.75211C13.3283 8.01833 13.1556 8.3637 13.1024 8.7364L12.8195 10.7163C12.6555 11.8646 13.6397 12.8489 14.7881 12.6849L16.768 12.402C17.1407 12.3488 17.4861 12.1761 17.7523 11.9099L22.16 7.50218V17.92C22.16 18.9804 21.3004 19.84 20.24 19.84H3.92C2.85962 19.84 2 18.9804 2 17.92V14.03C2.13801 14.0301 2.27769 13.9922 2.40275 13.9126L2.58606 13.7959C3.58623 13.1593 5.7211 11.8003 6.3322 11.4511C6.43421 11.3928 6.63006 11.3244 6.87351 11.298C7.11445 11.2719 7.33773 11.2938 7.5019 11.354C7.65327 11.4095 7.73091 11.4857 7.77426 11.5815C7.82369 11.6908 7.8772 11.9357 7.75398 12.4121C7.51412 13.3396 7.26658 14.4095 7.33946 15.3038C7.37704 15.765 7.50392 16.2502 7.82249 16.6542C8.15314 17.0735 8.62627 17.3246 9.19678 17.4197C10.3338 17.6092 11.3768 16.938 12.107 16.3036C12.8753 15.6361 13.5146 14.8173 13.8801 14.3299C14.1286 13.9985 14.0615 13.5284 13.7301 13.2799C13.3987 13.0314 12.9286 13.0985 12.6801 13.4299C12.3256 13.9025 11.7649 14.6137 11.1232 15.1712C10.4434 15.7619 9.86635 16.0106 9.4434 15.9401C9.17392 15.8952 9.06101 15.8023 9.00036 15.7254C8.92763 15.6332 8.85796 15.4699 8.8345 15.182C8.78531 14.5784 8.95777 13.7483 9.2062 12.7877C9.38299 12.1041 9.37649 11.484 9.14093 10.9633C8.89928 10.4291 8.46692 10.1102 8.01829 9.94573C7.58246 9.78593 7.11574 9.76292 6.71167 9.80677C6.31013 9.85035 5.90598 9.967 5.58799 10.1487C4.98422 10.4937 3.05774 11.7176 2 12.3909V5.92C2 4.85961 2.85961 4 3.92 4H17.3466Z" fill="%23141414"/>%0A</svg>%0A');
  mask-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M19.4679 4H20.24C21.135 4 21.887 4.61242 22.0998 5.44108L16.6916 10.8492C16.6549 10.886 16.6073 10.9098 16.5559 10.9171L14.576 11.2C14.4176 11.2226 14.2818 11.0868 14.3044 10.9284L14.5873 8.94854C14.5946 8.89713 14.6184 8.84949 14.6552 8.81277L19.4679 4Z" fill="%23141414"/>%0A<path d="M17.3466 4L13.5945 7.75211C13.3283 8.01833 13.1556 8.3637 13.1024 8.7364L12.8195 10.7163C12.6555 11.8646 13.6397 12.8489 14.7881 12.6849L16.768 12.402C17.1407 12.3488 17.4861 12.1761 17.7523 11.9099L22.16 7.50218V17.92C22.16 18.9804 21.3004 19.84 20.24 19.84H3.92C2.85962 19.84 2 18.9804 2 17.92V14.03C2.13801 14.0301 2.27769 13.9922 2.40275 13.9126L2.58606 13.7959C3.58623 13.1593 5.7211 11.8003 6.3322 11.4511C6.43421 11.3928 6.63006 11.3244 6.87351 11.298C7.11445 11.2719 7.33773 11.2938 7.5019 11.354C7.65327 11.4095 7.73091 11.4857 7.77426 11.5815C7.82369 11.6908 7.8772 11.9357 7.75398 12.4121C7.51412 13.3396 7.26658 14.4095 7.33946 15.3038C7.37704 15.765 7.50392 16.2502 7.82249 16.6542C8.15314 17.0735 8.62627 17.3246 9.19678 17.4197C10.3338 17.6092 11.3768 16.938 12.107 16.3036C12.8753 15.6361 13.5146 14.8173 13.8801 14.3299C14.1286 13.9985 14.0615 13.5284 13.7301 13.2799C13.3987 13.0314 12.9286 13.0985 12.6801 13.4299C12.3256 13.9025 11.7649 14.6137 11.1232 15.1712C10.4434 15.7619 9.86635 16.0106 9.4434 15.9401C9.17392 15.8952 9.06101 15.8023 9.00036 15.7254C8.92763 15.6332 8.85796 15.4699 8.8345 15.182C8.78531 14.5784 8.95777 13.7483 9.2062 12.7877C9.38299 12.1041 9.37649 11.484 9.14093 10.9633C8.89928 10.4291 8.46692 10.1102 8.01829 9.94573C7.58246 9.78593 7.11574 9.76292 6.71167 9.80677C6.31013 9.85035 5.90598 9.967 5.58799 10.1487C4.98422 10.4937 3.05774 11.7176 2 12.3909V5.92C2 4.85961 2.85961 4 3.92 4H17.3466Z" fill="%23141414"/>%0A</svg>%0A');
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cometchat-collaborative-bubble__body-content {
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-padding, 2px);
}
.cometchat-collaborative-bubble__body-content-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--cometchat-font-body-medium);
  font-style: normal;
  line-height: 120%;
  text-align: left;
}
.cometchat-collaborative-bubble--incoming .cometchat-collaborative-bubble__body-content-name label {
  color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-collaborative-bubble--outgoing .cometchat-collaborative-bubble__body-content-name label {
  color: var(--cometchat-static-white, #fff);
}
.cometchat-collaborative-bubble__body-content-name label {
  cursor: default;
  font: inherit;
}
.cometchat-collaborative-bubble__body-content-description {
  overflow: hidden;
  text-overflow: ellipsis;
  font: var(--cometchat-font-caption2-regular);
  font-style: normal;
  line-height: 120%;
}
.cometchat-collaborative-bubble--incoming .cometchat-collaborative-bubble__body-content-description label {
  color: var(--cometchat-neutral-color-600, #727272);
}
.cometchat-collaborative-bubble--outgoing .cometchat-collaborative-bubble__body-content-description label {
  color: var(--cometchat-static-white, #fff);
}
.cometchat-collaborative-bubble__body-content-description label {
  cursor: default;
  font: inherit;
}
.cometchat-collaborative-bubble__button {
  display: flex;
  height: 40px;
  padding: var(--cometchat-padding-5, 20px);
  justify-content: center;
  align-items: center;
  gap: var(--cometchat-padding-2, 8px);
  align-self: stretch;
  font: var(--cometchat-font-button-medium);
  font-style: normal;
  line-height: 120%;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
}
.cometchat-collaborative-bubble--incoming .cometchat-collaborative-bubble__button {
  color: var(--cometchat-primary-button-background, #6852d6);
  border-top: 1px solid var(--cometchat-border-color-dark, #dcdcdc);
}
.cometchat-collaborative-bubble--outgoing .cometchat-collaborative-bubble__button {
  border-top: 1px solid var(--cometchat-extended-primary-color-800, #7965db);
  color: var(--cometchat-static-white, #fff);
}
.cometchat-collaborative-bubble__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.cometchat-collaborative-bubble__button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: -2px;
}
@media (max-width: 480px) {
  .cometchat-collaborative-bubble {
    width: 200px;
    max-width: 200px;
  }
}