@cometchat/chat-uikit-react/dist/CometChatEmojiKeyboardRoot-C5PDXXVO.css

Ready-to-use Chat UI Components for React

/* src/components/base/CometChatSearchBar/CometChatSearchBar.css */
.cometchat-search-bar {
  display: flex;
  padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
  align-items: center;
  align-self: stretch;
  gap: var(--cometchat-padding-1, 4px);
  border-radius: var(--cometchat-radius-max, 1000px);
  border: 1px solid var(--cometchat-border-color-light, #e0e0e0);
  background: var(--cometchat-background-color-03, #f5f5f5);
  flex: 1 0 0;
  box-sizing: border-box;
  min-height: 42px;
}
.cometchat-search-bar--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cometchat-search-bar__icon {
  -webkit-mask: 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<mask id="mask0_740_8292" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8292)">%0A<path d="M9.51955 15.6153C7.81188 15.6153 6.36571 15.023 5.18105 13.8385C3.99655 12.6538 3.4043 11.2077 3.4043 9.50002C3.4043 7.79235 3.99655 6.34618 5.18105 5.16152C6.36571 3.97702 7.81188 3.38477 9.51955 3.38477C11.2272 3.38477 12.6734 3.97702 13.858 5.16152C15.0425 6.34618 15.6348 7.79235 15.6348 9.50002C15.6348 10.2142 15.515 10.8963 15.2753 11.5463C15.0355 12.1963 14.7155 12.7616 14.3155 13.2423L20.0695 18.9963C20.208 19.1346 20.2789 19.3086 20.282 19.5183C20.2852 19.7279 20.2144 19.9052 20.0695 20.05C19.9247 20.1948 19.749 20.2673 19.5425 20.2673C19.3362 20.2673 19.1606 20.1948 19.0158 20.05L13.2618 14.296C12.7618 14.7088 12.1868 15.0319 11.5368 15.2653C10.8868 15.4986 10.2144 15.6153 9.51955 15.6153ZM9.51955 14.1155C10.808 14.1155 11.8994 13.6683 12.7935 12.774C13.6879 11.8798 14.135 10.7885 14.135 9.50002C14.135 8.21152 13.6879 7.12018 12.7935 6.22601C11.8994 5.33168 10.808 4.88452 9.51955 4.88452C8.23105 4.88452 7.13971 5.33168 6.24555 6.22601C5.35121 7.12018 4.90405 8.21152 4.90405 9.50002C4.90405 10.7885 5.35121 11.8798 6.24555 12.774C7.13971 13.6683 8.23105 14.1155 9.51955 14.1155Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask: 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<mask id="mask0_740_8292" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8292)">%0A<path d="M9.51955 15.6153C7.81188 15.6153 6.36571 15.023 5.18105 13.8385C3.99655 12.6538 3.4043 11.2077 3.4043 9.50002C3.4043 7.79235 3.99655 6.34618 5.18105 5.16152C6.36571 3.97702 7.81188 3.38477 9.51955 3.38477C11.2272 3.38477 12.6734 3.97702 13.858 5.16152C15.0425 6.34618 15.6348 7.79235 15.6348 9.50002C15.6348 10.2142 15.515 10.8963 15.2753 11.5463C15.0355 12.1963 14.7155 12.7616 14.3155 13.2423L20.0695 18.9963C20.208 19.1346 20.2789 19.3086 20.282 19.5183C20.2852 19.7279 20.2144 19.9052 20.0695 20.05C19.9247 20.1948 19.749 20.2673 19.5425 20.2673C19.3362 20.2673 19.1606 20.1948 19.0158 20.05L13.2618 14.296C12.7618 14.7088 12.1868 15.0319 11.5368 15.2653C10.8868 15.4986 10.2144 15.6153 9.51955 15.6153ZM9.51955 14.1155C10.808 14.1155 11.8994 13.6683 12.7935 12.774C13.6879 11.8798 14.135 10.7885 14.135 9.50002C14.135 8.21152 13.6879 7.12018 12.7935 6.22601C11.8994 5.33168 10.808 4.88452 9.51955 4.88452C8.23105 4.88452 7.13971 5.33168 6.24555 6.22601C5.35121 7.12018 4.90405 8.21152 4.90405 9.50002C4.90405 10.7885 5.35121 11.8798 6.24555 12.774C7.13971 13.6683 8.23105 14.1155 9.51955 14.1155Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: flex;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  justify-content: center;
  align-items: center;
  background: var(--cometchat-icon-color-secondary, #999);
}
.cometchat-search-bar__input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--cometchat-text-color-primary, #141414);
  font: var(--cometchat-font-heading4-regular, 400 14px/20px sans-serif);
  font-style: normal;
  outline: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.cometchat-search-bar__input:focus-visible {
  outline: none;
}
.cometchat-search-bar__input::placeholder {
  color: var(--cometchat-text-color-tertiary, #aaa);
  font: var(--cometchat-font-heading4-regular, 400 14px/20px sans-serif);
  font-style: normal;
}
.cometchat-search-bar__input:disabled {
  cursor: not-allowed;
}
.cometchat-search-bar__clear-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--cometchat-radius-max, 1000px);
}
.cometchat-search-bar__clear-button:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-search-bar__clear-button:disabled {
  cursor: not-allowed;
}
.cometchat-search-bar__clear-button-icon {
  -webkit-mask: 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<mask id="mask0_740_8321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8321)">%0A<path d="M11.9995 13.0538L6.92652 18.127C6.78802 18.2653 6.61394 18.3362 6.40427 18.3395C6.19477 18.3427 6.01752 18.2718 5.87252 18.127C5.72769 17.982 5.65527 17.8063 5.65527 17.6C5.65527 17.3937 5.72769 17.218 5.87252 17.073L10.9458 12L5.87252 6.92701C5.73419 6.78851 5.66336 6.61443 5.66002 6.40476C5.65686 6.19526 5.72769 6.01801 5.87252 5.87301C6.01752 5.72818 6.19319 5.65576 6.39952 5.65576C6.60586 5.65576 6.78152 5.72818 6.92652 5.87301L11.9995 10.9463L17.0725 5.87301C17.211 5.73468 17.3851 5.66385 17.5948 5.66051C17.8043 5.65735 17.9815 5.72818 18.1265 5.87301C18.2714 6.01801 18.3438 6.19368 18.3438 6.40001C18.3438 6.60635 18.2714 6.78201 18.1265 6.92701L13.0533 12L18.1265 17.073C18.2649 17.2115 18.3357 17.3856 18.339 17.5953C18.3422 17.8048 18.2714 17.982 18.1265 18.127C17.9815 18.2718 17.8059 18.3443 17.5995 18.3443C17.3932 18.3443 17.2175 18.2718 17.0725 18.127L11.9995 13.0538Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  mask: 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<mask id="mask0_740_8321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">%0A<rect width="24" height="24" fill="%23D9D9D9"/>%0A</mask>%0A<g mask="url(%23mask0_740_8321)">%0A<path d="M11.9995 13.0538L6.92652 18.127C6.78802 18.2653 6.61394 18.3362 6.40427 18.3395C6.19477 18.3427 6.01752 18.2718 5.87252 18.127C5.72769 17.982 5.65527 17.8063 5.65527 17.6C5.65527 17.3937 5.72769 17.218 5.87252 17.073L10.9458 12L5.87252 6.92701C5.73419 6.78851 5.66336 6.61443 5.66002 6.40476C5.65686 6.19526 5.72769 6.01801 5.87252 5.87301C6.01752 5.72818 6.19319 5.65576 6.39952 5.65576C6.60586 5.65576 6.78152 5.72818 6.92652 5.87301L11.9995 10.9463L17.0725 5.87301C17.211 5.73468 17.3851 5.66385 17.5948 5.66051C17.8043 5.65735 17.9815 5.72818 18.1265 5.87301C18.2714 6.01801 18.3438 6.19368 18.3438 6.40001C18.3438 6.60635 18.2714 6.78201 18.1265 6.92701L13.0533 12L18.1265 17.073C18.2649 17.2115 18.3357 17.3856 18.339 17.5953C18.3422 17.8048 18.2714 17.982 18.1265 18.127C17.9815 18.2718 17.8059 18.3443 17.5995 18.3443C17.3932 18.3443 17.2175 18.2718 17.0725 18.127L11.9995 13.0538Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  display: block;
  width: 16px;
  height: 16px;
  background: var(--cometchat-icon-color-secondary, #999);
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-search-bar,
  .cometchat-search-bar__input,
  .cometchat-search-bar__clear-button {
    transition: none;
  }
}

/* src/components/base/CometChatEmojiKeyboard/CometChatEmojiKeyboard.css */
.cometchat-emoji-keyboard {
  display: flex;
  flex-direction: column;
  width: var(--cometchat-emoji-keyboard-width, 320px);
  height: var(--cometchat-emoji-keyboard-height, 380px);
  background: var( --cometchat-emoji-keyboard-background, var(--cometchat-background-color-01, #fff) );
  border-radius: var(--cometchat-emoji-keyboard-border-radius, var(--cometchat-radius-3, 12px));
  border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  box-shadow: var( --cometchat-emoji-keyboard-box-shadow, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) );
  overflow: hidden;
}
.cometchat-emoji-keyboard__search {
  padding: var(--cometchat-emoji-keyboard-search-padding, var(--cometchat-padding-3, 12px));
  border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
  z-index: 1;
  position: relative;
  background: var( --cometchat-emoji-keyboard-search-background, var(--cometchat-background-color-01, #fff) );
}
.cometchat-emoji-keyboard__search .cometchat-search-bar {
  height: 36px;
}
.cometchat-emoji-keyboard__search .cometchat-search-bar input,
.cometchat-emoji-keyboard__search .cometchat-search-bar input::placeholder {
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat-emoji-keyboard__tabs {
  display: flex;
  gap: var(--cometchat-emoji-keyboard-tabs-gap, var(--cometchat-spacing-1, 4px));
  padding: var(--cometchat-emoji-keyboard-tabs-padding, var(--cometchat-padding-2, 8px));
  border-bottom: 1px solid var(--cometchat-border-color-default, #e8e8e8);
  background: var( --cometchat-emoji-keyboard-tabs-background, var(--cometchat-background-color-01, #fff) );
  z-index: 2;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: scroll-position;
}
.cometchat-emoji-keyboard__tabs::-webkit-scrollbar {
  display: none;
}
.cometchat-emoji-keyboard__tab {
  flex-shrink: 0;
  width: var(--cometchat-emoji-keyboard-tab-size, 40px);
  height: var(--cometchat-emoji-keyboard-tab-size, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: var(--cometchat-emoji-keyboard-tab-border-radius, var(--cometchat-radius-2, 8px));
}
.cometchat-emoji-keyboard__tab:hover {
  background-color: var( --cometchat-emoji-keyboard-tab-background-hover, var(--cometchat-background-color-03, #f5f5f5) );
}
.cometchat-emoji-keyboard__tab--active,
.cometchat-emoji-keyboard__tab--active:hover {
  background: var( --cometchat-emoji-keyboard-tab-background-active, var(--cometchat-extended-primary-color-100, #edeafa) );
}
.cometchat-emoji-keyboard__tab:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-emoji-keyboard__tab-icon {
  width: var(--cometchat-emoji-keyboard-tab-icon-size, 24px);
  height: var(--cometchat-emoji-keyboard-tab-icon-size, 24px);
  display: block;
  object-fit: contain;
}
.cometchat-emoji-keyboard__tab--active .cometchat-emoji-keyboard__tab-icon {
  filter: brightness(0) saturate(100%) invert(33%) sepia(60%) saturate(2218%) hue-rotate(235deg) brightness(88%) contrast(91%);
}
.cometchat-emoji-keyboard__tab-emoji {
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
.cometchat-emoji-keyboard__list {
  flex: 1;
  overflow-y: auto;
  padding: var( --cometchat-emoji-keyboard-list-padding, 0 var(--cometchat-padding-3, 12px) var(--cometchat-padding-3, 12px) );
  display: flex;
  flex-direction: column;
  gap: var(--cometchat-padding-2, 8px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cometchat-emoji-keyboard__list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.cometchat-emoji-keyboard__category-section {
  margin-bottom: var(--cometchat-emoji-keyboard-category-margin, 0);
}
.cometchat-emoji-keyboard__category-title {
  color: var( --cometchat-emoji-keyboard-category-title-color, var(--cometchat-text-color-tertiary, #a1a1a1) );
  font: var( --cometchat-emoji-keyboard-category-title-font, var(--cometchat-font-body-regular, 400 14px Roboto) );
  line-height: 120%;
  text-align: left;
  padding: var(--cometchat-padding-1, 4px) 0;
}
.cometchat-emoji-keyboard__emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--cometchat-emoji-keyboard-emoji-grid-gap, var(--cometchat-spacing-1, 4px));
}
.cometchat-emoji-keyboard__emoji-item {
  width: var(--cometchat-emoji-keyboard-emoji-item-size, 32px);
  height: var(--cometchat-emoji-keyboard-emoji-item-size, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--cometchat-emoji-keyboard-emoji-item-font-size, 24px);
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: var( --cometchat-emoji-keyboard-emoji-item-border-radius, var(--cometchat-radius-2, 8px) );
  user-select: none;
}
.cometchat-emoji-keyboard__emoji-item:hover {
  background-color: var( --cometchat-emoji-keyboard-emoji-item-background-hover, var(--cometchat-background-color-03, #f5f5f5) );
}
.cometchat-emoji-keyboard__emoji-item:active {
  background-color: var( --cometchat-emoji-keyboard-emoji-item-background-active, var(--cometchat-background-color-04, #e8e8e8) );
}
.cometchat-emoji-keyboard__emoji-item:focus-visible {
  outline: 2px solid var(--cometchat-primary-color, #3399ff);
  outline-offset: 2px;
}
.cometchat-emoji-keyboard__empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--cometchat-text-color-tertiary, #a1a1a1);
  font: var(--cometchat-font-body-regular, 400 14px Roboto);
  padding: var(--cometchat-padding-5, 20px);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .cometchat-emoji-keyboard__tab,
  .cometchat-emoji-keyboard__emoji-item {
    transition: none;
  }
}