@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React
1,247 lines (1,238 loc) • 942 kB
CSS
/* src/styles/fonts.css */
@font-face {
font-family: "Roboto";
src: url("./Roboto-Regular-EEQLOLJH.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto";
src: url("./Roboto-Medium-WCGPFWEY.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Roboto";
src: url("./Roboto-Bold-QT2TZMAR.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* src/styles/themes/light.css */
@layer cometchat {
:root,
[data-theme=light] {
--cometchat-spacing: 2px;
--cometchat-spacing-1: 4px;
--cometchat-spacing-2: 8px;
--cometchat-spacing-3: 12px;
--cometchat-spacing-4: 16px;
--cometchat-spacing-5: 20px;
--cometchat-spacing-6: 24px;
--cometchat-spacing-7: 28px;
--cometchat-spacing-8: 32px;
--cometchat-spacing-9: 36px;
--cometchat-spacing-10: 40px;
--cometchat-spacing-11: 44px;
--cometchat-spacing-12: 48px;
--cometchat-spacing-13: 52px;
--cometchat-spacing-14: 56px;
--cometchat-spacing-15: 60px;
--cometchat-spacing-16: 64px;
--cometchat-spacing-17: 68px;
--cometchat-spacing-18: 72px;
--cometchat-spacing-19: 76px;
--cometchat-spacing-20: 80px;
--cometchat-spacing-max: 1000px;
--cometchat-padding: var(--cometchat-spacing);
--cometchat-padding-1: var(--cometchat-spacing-1);
--cometchat-padding-2: var(--cometchat-spacing-2);
--cometchat-padding-3: var(--cometchat-spacing-3);
--cometchat-padding-4: var(--cometchat-spacing-4);
--cometchat-padding-5: var(--cometchat-spacing-5);
--cometchat-padding-6: var(--cometchat-spacing-6);
--cometchat-padding-7: var(--cometchat-spacing-7);
--cometchat-padding-8: var(--cometchat-spacing-8);
--cometchat-padding-9: var(--cometchat-spacing-9);
--cometchat-padding-10: var(--cometchat-spacing-10);
--cometchat-margin: var(--cometchat-spacing);
--cometchat-margin-1: var(--cometchat-spacing-1);
--cometchat-margin-2: var(--cometchat-spacing-2);
--cometchat-margin-3: var(--cometchat-spacing-3);
--cometchat-margin-4: var(--cometchat-spacing-4);
--cometchat-margin-5: var(--cometchat-spacing-5);
--cometchat-margin-6: var(--cometchat-spacing-6);
--cometchat-margin-7: var(--cometchat-spacing-7);
--cometchat-margin-8: var(--cometchat-spacing-8);
--cometchat-margin-9: var(--cometchat-spacing-9);
--cometchat-margin-10: var(--cometchat-spacing-10);
--cometchat-margin-11: var(--cometchat-spacing-11);
--cometchat-margin-12: var(--cometchat-spacing-12);
--cometchat-margin-13: var(--cometchat-spacing-13);
--cometchat-margin-14: var(--cometchat-spacing-14);
--cometchat-margin-15: var(--cometchat-spacing-15);
--cometchat-margin-16: var(--cometchat-spacing-16);
--cometchat-margin-17: var(--cometchat-spacing-17);
--cometchat-margin-18: var(--cometchat-spacing-18);
--cometchat-margin-19: var(--cometchat-spacing-19);
--cometchat-margin-20: var(--cometchat-spacing-20);
--cometchat-radius: var(--cometchat-spacing);
--cometchat-radius-1: var(--cometchat-spacing-1);
--cometchat-radius-2: var(--cometchat-spacing-2);
--cometchat-radius-3: var(--cometchat-spacing-3);
--cometchat-radius-4: var(--cometchat-spacing-4);
--cometchat-radius-5: var(--cometchat-spacing-5);
--cometchat-radius-6: var(--cometchat-spacing-6);
--cometchat-radius-max: var(--cometchat-spacing-max);
--cometchat-font-family:
"Roboto",
"Inter",
sans-serif;
--cometchat-font-title-bold: 700 32px/38.4px var(--cometchat-font-family);
--cometchat-font-title-medium: 500 32px/38.4px var(--cometchat-font-family);
--cometchat-font-title-regular: 400 32px/38.4px var(--cometchat-font-family);
--cometchat-font-heading1-bold: 700 24px/28.8px var(--cometchat-font-family);
--cometchat-font-heading1-medium: 500 24px/28.8px var(--cometchat-font-family);
--cometchat-font-heading1-regular: 400 24px/28.8px var(--cometchat-font-family);
--cometchat-font-heading2-bold: 700 20px/24px var(--cometchat-font-family);
--cometchat-font-heading2-medium: 500 20px/24px var(--cometchat-font-family);
--cometchat-font-heading2-regular: 400 20px/24px var(--cometchat-font-family);
--cometchat-font-heading3-bold: 700 18px/21.6px var(--cometchat-font-family);
--cometchat-font-heading3-medium: 500 18px/21.6px var(--cometchat-font-family);
--cometchat-font-heading3-regular: 400 18px/21.6px var(--cometchat-font-family);
--cometchat-font-heading4-bold: 700 16px/19.2px var(--cometchat-font-family);
--cometchat-font-heading4-medium: 500 16px/19.2px var(--cometchat-font-family);
--cometchat-font-heading4-regular: 400 16px/19.2px var(--cometchat-font-family);
--cometchat-font-body-bold: 700 14px/16.8px var(--cometchat-font-family);
--cometchat-font-body-medium: 500 14px/16.8px var(--cometchat-font-family);
--cometchat-font-body-regular: 400 14px/16.8px var(--cometchat-font-family);
--cometchat-font-caption1-bold: 700 12px/14.4px var(--cometchat-font-family);
--cometchat-font-caption1-medium: 500 12px/14.4px var(--cometchat-font-family);
--cometchat-font-caption1-regular: 400 12px/14.4px var(--cometchat-font-family);
--cometchat-font-caption2-bold: 700 10px/12px var(--cometchat-font-family);
--cometchat-font-caption2-medium: 500 10px/12px var(--cometchat-font-family);
--cometchat-font-caption2-regular: 400 10px/12px var(--cometchat-font-family);
--cometchat-font-button-bold: 700 14px/16.8px var(--cometchat-font-family);
--cometchat-font-button-medium: 500 14px/16.8px var(--cometchat-font-family);
--cometchat-font-button-regular: 400 14px/16.8px var(--cometchat-font-family);
--cometchat-font-link: 400 14px/19.6px var(--cometchat-font-family);
--cometchat-primary-color: #6852d6;
--cometchat-extended-primary-color-50: #f9f8fd;
--cometchat-extended-primary-color-100: #edeafa;
--cometchat-extended-primary-color-200: #dcd7f6;
--cometchat-extended-primary-color-300: #ccc4f1;
--cometchat-extended-primary-color-400: #bbb1ed;
--cometchat-extended-primary-color-500: #aa9ee8;
--cometchat-extended-primary-color-600: #9a8be4;
--cometchat-extended-primary-color-700: #8978df;
--cometchat-extended-primary-color-800: #7965db;
--cometchat-extended-primary-color-900: #5d49be;
--cometchat-neutral-color-50: #ffffff;
--cometchat-neutral-color-100: #fafafa;
--cometchat-neutral-color-200: #f5f5f5;
--cometchat-neutral-color-300: #e8e8e8;
--cometchat-neutral-color-350: #dedede;
--cometchat-neutral-color-400: #dcdcdc;
--cometchat-neutral-color-500: #a1a1a1;
--cometchat-neutral-color-600: #727272;
--cometchat-neutral-color-700: #5b5b5b;
--cometchat-neutral-color-800: #434343;
--cometchat-neutral-color-900: #141414;
--cometchat-static-neutral-100: #fafafa;
--cometchat-static-neutral-400: #4c4c4c;
--cometchat-static-neutral-700: #5b5b5b;
--cometchat-info-color: #0b7bea;
--cometchat-warning-color: #ffab00;
--cometchat-success-color: #09c26f;
--cometchat-error-color: #f44649;
--cometchat-error-color-100: #fef3f2;
--cometchat-error-color-90: #fde9e7;
--cometchat-static-black: #141414;
--cometchat-static-white: #ffffff;
--cometchat-static-white-70: rgba(255, 255, 255, 0.7);
--cometchat-background-color-01: var(--cometchat-neutral-color-50);
--cometchat-background-color-02: var(--cometchat-neutral-color-100);
--cometchat-background-color-03: var(--cometchat-neutral-color-200);
--cometchat-background-color-04: var(--cometchat-neutral-color-300);
--cometchat-border-color-light: var(--cometchat-neutral-color-200);
--cometchat-border-color-default: var(--cometchat-neutral-color-300);
--cometchat-border-color-dark: var(--cometchat-neutral-color-400);
--cometchat-border-color-highlight: var(--cometchat-primary-color);
--cometchat-text-color-primary: var(--cometchat-neutral-color-900);
--cometchat-text-color-secondary: var(--cometchat-neutral-color-600);
--cometchat-text-color-tertiary: var(--cometchat-neutral-color-500);
--cometchat-text-color-disabled: var(--cometchat-neutral-color-400);
--cometchat-text-color-white: var(--cometchat-neutral-color-50);
--cometchat-text-color-highlight: var(--cometchat-primary-color);
--cometchat-icon-color-primary: var(--cometchat-neutral-color-900);
--cometchat-icon-color-secondary: var(--cometchat-neutral-color-500);
--cometchat-icon-color-tertiary: var(--cometchat-neutral-color-400);
--cometchat-icon-color-white: var(--cometchat-neutral-color-50);
--cometchat-icon-color-highlight: var(--cometchat-primary-color);
--cometchat-message-list-bg: var(--cometchat-background-color-03);
--cometchat-shimmer-background-color: var(--cometchat-neutral-color-200);
--cometchat-shimmer-gradient-color:
linear-gradient(
90deg,
#e0e0e0 0%,
#eee 100%);
--cometchat-text-shimmer-gradient-color:
linear-gradient(
270deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.7) 50%,
rgba(255, 255, 255, 0) 100% );
--cometchat-primary-button-background: var(--cometchat-primary-color);
--cometchat-primary-button-text: var(--cometchat-static-white);
--cometchat-primary-button-icon: var(--cometchat-static-white);
--cometchat-secondary-button-background: var(--cometchat-neutral-color-900);
--cometchat-secondary-button-icon: var(--cometchat-neutral-color-900);
--cometchat-secondary-button-text: var(--cometchat-neutral-color-900);
--cometchat-link-button: var(--cometchat-info-color);
--cometchat-fab-button-background: var(--cometchat-primary-color);
--cometchat-fab-button-icon: var(--cometchat-static-white);
--cometchat-white-hover: var(--cometchat-neutral-color-100);
--cometchat-white-pressed: var(--cometchat-neutral-color-300);
--cometchat-focus-ring-width: 2px;
--cometchat-focus-ring-style: solid;
--cometchat-focus-ring-color: var(--cometchat-primary-color);
--cometchat-focus-ring-color-inverse: var(--cometchat-static-white);
--cometchat-focus-ring-offset: 2px;
--cometchat-overlay-background-light: rgba(0, 0, 0, 0.4);
--cometchat-overlay-background-heavy: rgba(0, 0, 0, 0.6);
--cometchat-drop-overlay-background: rgba(40, 40, 40, 0.95);
--cometchat-text-shadow-strong: 0 1px 3px rgba(0, 0, 0, 0.3);
--cometchat-image-bubble-container-max-width: 400px;
--cometchat-image-bubble-container-border-radius: var(--cometchat-radius-2);
--cometchat-image-bubble-single-max-height: 350px;
--cometchat-image-bubble-grid-gap-mobile: var(--cometchat-spacing);
--cometchat-image-bubble-overflow-overlay-background: var(--cometchat-overlay-background-light);
--cometchat-image-bubble-overflow-overlay-background-hover: var( --cometchat-overlay-background-heavy );
--cometchat-video-bubble-max-width: 250px;
--cometchat-video-bubble-max-height: 350px;
--cometchat-video-bubble-single-max-height: 350px;
--cometchat-video-bubble-single-min-width: 200px;
--cometchat-video-bubble-single-min-height: 112px;
--cometchat-video-bubble-play-overlay-size: 48px;
--cometchat-audio-bubble-min-width: 240px;
--cometchat-audio-bubble-max-width: 240px;
--cometchat-file-bubble-min-width: 240px;
--cometchat-file-bubble-max-width: 240px;
}
}
/* src/styles/themes/dark.css */
@layer cometchat {
[data-theme=dark] {
--cometchat-primary-color: #6852d6;
--cometchat-extended-primary-color-50: #15102b;
--cometchat-extended-primary-color-100: #1d173c;
--cometchat-extended-primary-color-200: #251e4d;
--cometchat-extended-primary-color-300: #2e245e;
--cometchat-extended-primary-color-400: #362b6f;
--cometchat-extended-primary-color-500: #3e3180;
--cometchat-extended-primary-color-600: #473892;
--cometchat-extended-primary-color-700: #4f3ea3;
--cometchat-extended-primary-color-800: #5745b4;
--cometchat-extended-primary-color-900: #7460d9;
--cometchat-neutral-color-50: #141414;
--cometchat-neutral-color-100: #1a1a1a;
--cometchat-neutral-color-200: #272727;
--cometchat-neutral-color-300: #383838;
--cometchat-neutral-color-350: #414141;
--cometchat-neutral-color-400: #4c4c4c;
--cometchat-neutral-color-500: #858585;
--cometchat-neutral-color-600: #989898;
--cometchat-neutral-color-700: #a8a8a8;
--cometchat-neutral-color-800: #c8c8c8;
--cometchat-neutral-color-900: #ffffff;
--cometchat-static-neutral-100: #fafafa;
--cometchat-static-neutral-400: #4c4c4c;
--cometchat-static-neutral-700: #5b5b5b;
--cometchat-info-color: #0d66bf;
--cometchat-warning-color: #d08d04;
--cometchat-success-color: #0b9f5d;
--cometchat-message-seen-color: #56e8a7;
--cometchat-error-color: #c73c3e;
--cometchat-error-color-100: #3a0c05;
--cometchat-error-color-90: #531106;
--cometchat-static-black: #141414;
--cometchat-static-white: #ffffff;
--cometchat-static-white-70: rgba(255, 255, 255, 0.7);
--cometchat-background-color-01: var(--cometchat-neutral-color-50);
--cometchat-background-color-02: var(--cometchat-neutral-color-100);
--cometchat-background-color-03: var(--cometchat-neutral-color-200);
--cometchat-background-color-04: var(--cometchat-neutral-color-300);
--cometchat-border-color-light: var(--cometchat-neutral-color-200);
--cometchat-border-color-default: var(--cometchat-neutral-color-300);
--cometchat-border-color-dark: var(--cometchat-neutral-color-400);
--cometchat-border-color-highlight: var(--cometchat-primary-color);
--cometchat-text-color-primary: var(--cometchat-neutral-color-900);
--cometchat-text-color-secondary: var(--cometchat-neutral-color-600);
--cometchat-text-color-tertiary: var(--cometchat-neutral-color-500);
--cometchat-text-color-disabled: var(--cometchat-neutral-color-400);
--cometchat-text-color-white: var(--cometchat-neutral-color-50);
--cometchat-text-color-highlight: var(--cometchat-primary-color);
--cometchat-icon-color-primary: var(--cometchat-neutral-color-900);
--cometchat-icon-color-secondary: var(--cometchat-neutral-color-500);
--cometchat-icon-color-tertiary: var(--cometchat-neutral-color-400);
--cometchat-icon-color-white: var(--cometchat-neutral-color-50);
--cometchat-icon-color-highlight: var(--cometchat-primary-color);
--cometchat-message-list-bg: var(--cometchat-background-color-03);
--cometchat-shimmer-background-color: var(--cometchat-background-color-01);
--cometchat-shimmer-gradient-color:
linear-gradient(
90deg,
#383838 0%,
#272727 100%);
--cometchat-text-shimmer-gradient-color:
linear-gradient(
270deg,
rgba(26, 26, 26, 0) 0%,
rgba(26, 26, 26, 0.7) 50%,
rgba(26, 26, 26, 0) 100% );
--cometchat-primary-button-background: var(--cometchat-primary-color);
--cometchat-primary-button-text: var(--cometchat-static-white);
--cometchat-primary-button-icon: var(--cometchat-static-white);
--cometchat-secondary-button-background: var(--cometchat-neutral-color-900);
--cometchat-secondary-button-text: var(--cometchat-neutral-color-900);
--cometchat-secondary-button-icon: var(--cometchat-neutral-color-900);
--cometchat-link-button: var(--cometchat-info-color);
--cometchat-fab-button-background: var(--cometchat-primary-color);
--cometchat-fab-button-icon: var(--cometchat-static-white);
--cometchat-white-hover: var(--cometchat-neutral-color-100);
--cometchat-white-pressed: var(--cometchat-neutral-color-300);
--cometchat-focus-ring-width: 2px;
--cometchat-focus-ring-style: solid;
--cometchat-focus-ring-color: var(--cometchat-primary-color);
--cometchat-focus-ring-color-inverse: var(--cometchat-static-white);
--cometchat-focus-ring-offset: 2px;
--cometchat-overlay-background-light: rgba(0, 0, 0, 0.4);
--cometchat-overlay-background-heavy: rgba(0, 0, 0, 0.6);
--cometchat-drop-overlay-background: rgba(80, 80, 80, 0.95);
--cometchat-text-shadow-strong: 0 1px 3px rgba(0, 0, 0, 0.3);
--cometchat-image-bubble-container-max-width: 400px;
--cometchat-image-bubble-container-border-radius: var(--cometchat-radius-2);
--cometchat-image-bubble-single-max-height: 350px;
--cometchat-image-bubble-grid-gap-mobile: var(--cometchat-spacing);
--cometchat-image-bubble-overflow-overlay-background: var(--cometchat-overlay-background-light);
--cometchat-image-bubble-overflow-overlay-background-hover: var( --cometchat-overlay-background-heavy );
--cometchat-video-bubble-max-width: 250px;
--cometchat-video-bubble-max-height: 350px;
--cometchat-video-bubble-single-max-height: 350px;
--cometchat-video-bubble-single-min-width: 200px;
--cometchat-video-bubble-single-min-height: 112px;
--cometchat-video-bubble-play-overlay-size: 48px;
--cometchat-audio-bubble-min-width: 240px;
--cometchat-audio-bubble-max-width: 240px;
--cometchat-file-bubble-min-width: 240px;
--cometchat-file-bubble-max-width: 240px;
}
}
/* src/styles/index.css */
@layer cometchat {
#root > .cometchat {
height: 100vh;
}
body {
margin: 0;
}
.cometchat-mention {
display: inline;
font-weight: inherit;
cursor: default;
user-select: all;
border-radius: 4px;
padding: 0 2px;
white-space: nowrap;
}
.cometchat-mentions {
display: inline;
border-radius: var(--cometchat-radius-1, 2px);
padding: 0px 2px;
}
.cometchat-mentions-other,
.cometchat-mention:not(.cometchat-mention--self) {
color: var(--cometchat-text-color-highlight, #6852d6);
background: rgba(104, 82, 214, 0.2);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.cometchat-mentions-other > span,
.cometchat-mention:not(.cometchat-mention--self) > span {
color: var(--cometchat-text-color-highlight, #6852d6);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.cometchat-mentions-you,
.cometchat-mention--self {
color: var(--cometchat-warning-color, #ffab00);
background: rgba(255, 171, 0, 0.2);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.cometchat-mentions-you > span,
.cometchat-mention--self > span {
color: var(--cometchat-warning-color, #ffab00);
font-weight: normal;
font-style: normal;
text-decoration: none;
}
code .cometchat-mention,
code .cometchat-mentions,
code .cometchat-mentions-other,
code .cometchat-mentions-you,
code .cometchat-mention--self,
pre .cometchat-mention,
pre .cometchat-mentions,
pre .cometchat-mentions-other,
pre .cometchat-mentions-you,
pre .cometchat-mention--self {
color: inherit;
background: transparent;
font-weight: inherit;
font-style: inherit;
padding: 0;
border-radius: 0;
}
code .cometchat-mention > span,
code .cometchat-mentions-other > span,
code .cometchat-mentions-you > span,
pre .cometchat-mention > span,
pre .cometchat-mentions-other > span,
pre .cometchat-mentions-you > span {
color: inherit;
font-weight: inherit;
font-style: inherit;
}
}
/* src/components/CometChatTextBubble/CometChatTextBubble.css */
.cometchat-text-bubble {
display: flex;
flex-direction: column;
gap: var(--cometchat-spacing-1, 4px);
max-width: var(--cometchat-text-bubble-max-width, 630px);
padding: var(--cometchat-text-bubble-padding, var(--cometchat-padding-2, 8px));
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
user-select: text;
-webkit-user-select: text;
font: var( --cometchat-font-body-regular, 400 14px var(--cometchat-font-family, "Inter", sans-serif) );
}
.cometchat-text-bubble--incoming {
color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-text-bubble--outgoing {
color: var(--cometchat-static-white, #fff);
}
.cometchat-text-bubble--single-emoji .cometchat-text-bubble__text {
font: var( --cometchat-font-title-regular, 400 32px var(--cometchat-font-family, "Inter", sans-serif) );
line-height: 1.2;
}
.cometchat-text-bubble__content {
position: relative;
}
.cometchat-text-bubble__text {
white-space: pre-wrap;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: var(--cometchat-text-bubble-line-clamp, 4);
line-clamp: var(--cometchat-text-bubble-line-clamp, 4);
-webkit-box-orient: vertical;
white-space: pre-line;
overflow: hidden;
}
.cometchat-text-bubble__text--expanded {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
.cometchat-text-bubble__text--no-truncation {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
.cometchat-text-bubble__read-more {
display: flex;
}
.cometchat-text-bubble__read-more-button {
background: none;
border: none;
padding: 0;
cursor: pointer;
font: var( --cometchat-font-caption1-medium, 500 12px var(--cometchat-font-family, "Inter", sans-serif) );
color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__read-more-button {
color: var(--cometchat-static-white, #fff);
opacity: 0.8;
}
.cometchat-text-bubble__read-more-button:hover {
text-decoration: underline;
}
.cometchat-text-bubble__read-more-button:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
border-radius: var(--cometchat-radius-1, 4px);
}
.cometchat-text-bubble__link-preview-container {
display: flex;
flex-direction: column;
gap: var(--cometchat-spacing-2, 8px);
margin-bottom: var(--cometchat-spacing-2, 8px);
margin-inline: calc(var(--cometchat-spacing-2, 8px) * -1);
margin-top: calc(var(--cometchat-spacing-2, 8px) * -1);
}
.cometchat-text-bubble__link-preview {
display: flex;
flex-direction: column;
border-radius: var(--cometchat-radius-2, 8px);
overflow: hidden;
background: var(--cometchat-background-color-02, #fafafa);
cursor: pointer;
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__link-preview {
background: rgba(255, 255, 255, 0.1);
}
.cometchat-text-bubble__link-preview:hover {
opacity: 0.9;
}
.cometchat-text-bubble__link-preview:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-text-bubble__link-preview-image-container {
width: 100%;
max-height: 160px;
overflow: hidden;
}
.cometchat-text-bubble__link-preview-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.cometchat-text-bubble__link-preview-content {
display: flex;
align-items: flex-start;
gap: var(--cometchat-spacing-2, 8px);
padding: var(--cometchat-padding-2, 8px);
}
.cometchat-text-bubble__link-preview-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.cometchat-text-bubble__link-preview-title {
font: var(--cometchat-font-body-bold, 700 12px var(--cometchat-font-family, "Inter", sans-serif));
color: var(--cometchat-text-color-primary, #141414);
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__link-preview-title {
color: var(--cometchat-static-white, #fff);
}
.cometchat-text-bubble__link-preview-description {
font: var( --cometchat-font-caption1-regular, 400 10px var(--cometchat-font-family, "Inter", sans-serif) );
color: var(--cometchat-text-color-secondary, #727272);
display: -webkit-box;
-webkit-line-clamp: 8;
line-clamp: 8;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__link-preview-description {
color: var(--cometchat-static-white, #fff);
}
.cometchat-text-bubble__link-preview-domain {
font: var( --cometchat-font-caption1-regular, 400 10px var(--cometchat-font-family, "Inter", sans-serif) );
color: var(--cometchat-text-color-tertiary, #a1a1a1);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__link-preview-domain {
color: rgba(255, 255, 255, 0.5);
}
.cometchat-text-bubble__link-preview-favicon-large {
width: 40px;
height: 40px;
border-radius: var(--cometchat-radius-1, 4px);
object-fit: contain;
flex-shrink: 0;
}
.cometchat-text-bubble__translation-container {
display: flex;
flex-direction: column;
gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-text-bubble__translation-separator {
height: 1px;
background: var(--cometchat-border-color-light, #f5f5f5);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__translation-separator {
background: rgba(255, 255, 255, 0.2);
}
.cometchat-text-bubble__translation-label {
font: var( --cometchat-font-caption2-medium, 500 10px var(--cometchat-font-family, "Inter", sans-serif) );
color: var(--cometchat-text-color-tertiary, #a1a1a1);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__translation-label {
color: rgba(255, 255, 255, 0.5);
}
.cometchat-text-bubble__translation-text {
white-space: pre-wrap;
word-break: break-word;
}
.cometchat-text-bubble__text:has(ol),
.cometchat-text-bubble__text:has(ul),
.cometchat-text-bubble__text:has(blockquote),
.cometchat-text-bubble__text:has(pre) {
display: block;
overflow: hidden;
-webkit-line-clamp: unset;
line-clamp: unset;
max-height: 88px;
}
.cometchat-text-bubble__text--expanded:has(ol),
.cometchat-text-bubble__text--expanded:has(ul),
.cometchat-text-bubble__text--expanded:has(blockquote),
.cometchat-text-bubble__text--expanded:has(pre) {
max-height: none;
overflow: visible;
}
.cometchat-text-bubble__text--no-truncation:has(ol),
.cometchat-text-bubble__text--no-truncation:has(ul),
.cometchat-text-bubble__text--no-truncation:has(blockquote),
.cometchat-text-bubble__text--no-truncation:has(pre) {
max-height: none;
overflow: visible;
}
.cometchat-text-bubble__text b,
.cometchat-text-bubble__text strong {
font-weight: 700;
}
.cometchat-text-bubble__text i,
.cometchat-text-bubble__text em {
font-style: italic;
}
.cometchat-text-bubble__text s,
.cometchat-text-bubble__text strike,
.cometchat-text-bubble__text del {
text-decoration: line-through;
}
.cometchat-text-bubble__text u {
text-decoration: underline;
}
.cometchat-text-bubble__text code {
font-family:
"Roboto Mono",
"SFMono-Regular",
Consolas,
"Liberation Mono",
Menlo,
Courier,
monospace;
font-size: 14px;
padding: 0 var(--cometchat-padding, 2px);
border-radius: var(--cometchat-radius, 2px);
white-space: pre-wrap;
word-break: break-word;
}
.cometchat-text-bubble--incoming .cometchat-text-bubble__text code {
color: var(--cometchat-text-color-highlight, #6852d6);
background: var(--cometchat-background-color-03, #f0f0f0);
border: 1px solid var(--cometchat-border-color-dark, #e0e0e0);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text code {
color: var(--cometchat-static-white, #fff);
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(245, 245, 245, 0.1);
}
.cometchat-text-bubble__text pre {
display: block;
font-family:
"Roboto Mono",
"SFMono-Regular",
Consolas,
"Liberation Mono",
Menlo,
Courier,
monospace;
font-size: 14px;
font-weight: 400;
font-style: normal;
text-decoration: none;
border-radius: var(--cometchat-radius-2, 8px);
padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
overflow-x: auto;
}
.cometchat-text-bubble--incoming .cometchat-text-bubble__text pre {
background: var(--cometchat-background-color-02, #fafafa);
border: 1px solid var(--cometchat-border-color-light, #f5f5f5);
color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text pre {
background: rgba(255, 255, 255, 0.1);
border: none;
color: var(--cometchat-static-white, #fff);
}
.cometchat-text-bubble__text pre code,
.cometchat-text-bubble--incoming .cometchat-text-bubble__text pre code,
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text pre code {
background: transparent;
color: inherit;
padding: 0;
border: none;
border-radius: 0;
display: inline;
font-family: inherit;
}
.cometchat-text-bubble__text blockquote {
display: block;
border-left: 3px solid;
padding: var(--cometchat-padding-2, 8px);
border-radius: var(--cometchat-radius-1, 4px);
margin: 0;
font-style: normal;
min-width: 100px;
}
.cometchat-text-bubble--incoming .cometchat-text-bubble__text blockquote {
color: var(--cometchat-text-color-secondary, #727272);
background: var(--cometchat-neutral-color-400, #e8e8e8);
border-left-color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text blockquote {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.1);
border-left-color: var(--cometchat-static-white, #fff);
}
.cometchat-text-bubble__text ol,
.cometchat-text-bubble__text ul {
margin: 0;
padding: 0;
list-style-position: inside;
white-space: normal;
}
.cometchat-text-bubble__text li {
display: list-item;
margin: 0;
padding-left: 1.5em;
text-indent: -1.5em;
white-space: normal;
}
.cometchat-text-bubble__text ol {
list-style-type: decimal;
}
.cometchat-text-bubble__text ol ol {
list-style-type: lower-alpha;
}
.cometchat-text-bubble__text ol ol ol {
list-style-type: lower-roman;
}
.cometchat-text-bubble__text ul {
list-style-type: disc;
}
.cometchat-text-bubble__text ul ul {
list-style-type: circle;
}
.cometchat-text-bubble__text ul ul ul {
list-style-type: square;
}
.cometchat-text-bubble__text li > ol,
.cometchat-text-bubble__text li > ul {
margin-top: 0;
margin-bottom: 0;
}
.cometchat-text-bubble__text a {
text-decoration: underline;
cursor: pointer;
}
.cometchat-text-bubble--incoming .cometchat-text-bubble__text a {
color: var(--cometchat-primary-color, #6852d6);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text a {
color: var(--cometchat-static-white, #fff);
}
.cometchat-text-bubble__text a:hover {
opacity: 0.8;
}
.cometchat-text-bubble--incoming .cometchat-text-bubble__text .cometchat-mentions {
cursor: pointer;
border-radius: var(--cometchat-radius, 2px);
background: rgba(104, 82, 214, 0.2);
padding: 0 var(--cometchat-padding, 2px);
color: var(--cometchat-text-color-highlight, #6852d6);
}
.cometchat-text-bubble--incoming .cometchat-text-bubble__text .cometchat-mentions-you {
background: rgba(255, 171, 0, 0.2);
color: var(--cometchat-warning-color, #ffab00);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text .cometchat-mentions {
cursor: pointer;
border-radius: var(--cometchat-radius, 2px);
background: rgba(255, 255, 255, 0.2);
padding: 0 var(--cometchat-padding, 2px);
color: var(--cometchat-static-white, #fff);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text .cometchat-mentions-you {
background: rgba(255, 171, 0, 0.2);
color: var(--cometchat-warning-color, #ffab00);
}
.cometchat-link {
text-decoration: none;
}
.cometchat-link:hover {
text-decoration: underline;
}
.cometchat-text-bubble--incoming .cometchat-text-bubble__text .cometchat-link {
color: var(--cometchat-info-color, #0b7bea);
}
.cometchat-text-bubble--outgoing .cometchat-text-bubble__text .cometchat-link {
color: var(--cometchat-static-white, #fff);
text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
.cometchat-text-bubble__read-more-button,
.cometchat-text-bubble__link-preview {
transition: none;
}
}
/* src/components/CometChatImagesBubble/CometChatImagesBubble.css */
.cometchat-images-bubble {
display: flex;
flex-direction: column;
width: 100%;
max-width: var(--cometchat-images-bubble-container-max-width, 400px);
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.cometchat-images-bubble--incoming {
align-items: flex-start;
}
.cometchat-images-bubble--outgoing {
align-items: flex-end;
}
.cometchat-images-bubble__container {
width: 100%;
display: flex;
flex-direction: column;
border-radius: var( --cometchat-images-bubble-container-border-radius, var(--cometchat-radius-2, 8px) );
overflow: hidden;
}
.cometchat-images-bubble--single .cometchat-images-bubble__image-wrapper {
aspect-ratio: auto;
height: 100%;
border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-images-bubble--single .cometchat-images-bubble__image {
object-fit: cover;
max-height: var(--cometchat-images-bubble-single-max-height, 350px);
min-width: 200px;
min-height: 198px;
}
.cometchat-images-bubble__grid {
display: grid;
gap: var(--cometchat-spacing-1, 2px);
width: 100%;
}
.cometchat-images-bubble__grid--two-col {
grid-template-columns: repeat(2, 1fr);
}
.cometchat-images-bubble__grid--three {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.cometchat-images-bubble__grid--three > :first-child {
grid-row: 1 / 3;
aspect-ratio: auto;
height: 100%;
}
.cometchat-images-bubble__grid--2x2 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.cometchat-images-bubble__grid--overflow {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
}
.cometchat-images-bubble__image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--cometchat-radius-2, 8px);
cursor: pointer;
background: var(--cometchat-neutral-color-300, #dcdcdc);
transition: opacity 0.2s ease;
}
.cometchat-images-bubble:not(.cometchat-images-bubble--single) .cometchat-images-bubble__image-wrapper,
.cometchat-images-bubble:not(.cometchat-images-bubble--single) .cometchat-images-bubble__overflow-tile {
min-height: 198px;
}
.cometchat-images-bubble__image-wrapper:hover {
cursor: pointer;
}
.cometchat-images-bubble__image-wrapper:focus {
outline: none;
}
.cometchat-images-bubble__image-wrapper:focus-visible {
outline: var(--cometchat-focus-ring-width, 2px) var(--cometchat-focus-ring-style, solid) var(--cometchat-focus-ring-color, var(--cometchat-primary-color, #3399ff));
outline-offset: var(--cometchat-focus-ring-offset, 2px);
}
.cometchat-images-bubble__image-wrapper:focus-visible::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 var(--cometchat-focus-ring-width, 2px) var(--cometchat-focus-ring-color-inverse, var(--cometchat-static-white, #fff));
pointer-events: none;
}
.cometchat-images-bubble__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.cometchat-images-bubble__placeholder {
width: 100%;
height: 100%;
min-height: 200px;
min-width: 200px;
display: flex;
align-items: center;
justify-content: center;
background: var(--cometchat-background-color-02, #f5f5f5);
border-radius: var(--cometchat-radius-2, 8px);
}
.cometchat-images-bubble__placeholder::after {
content: "";
width: 48px;
height: 48px;
background: var(--cometchat-neutral-color-400, #c4c4c4);
-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_8295" 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_8295)">%0A<path d="M5.30775 20.5C4.80258 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.1974 3.5 18.6923V5.30775C3.5 4.80258 3.675 4.375 4.025 4.025C4.375 3.675 4.80258 3.5 5.30775 3.5H18.6923C19.1974 3.5 19.625 3.675 19.975 4.025C20.325 4.375 20.5 4.80258 20.5 5.30775V18.6923C20.5 19.1974 20.325 19.625 19.975 19.975C19.625 20.325 19.1974 20.5 18.6923 20.5H5.30775ZM7.654 16.75H16.423C16.6038 16.75 16.7378 16.6679 16.825 16.5038C16.9122 16.3398 16.8987 16.1808 16.7845 16.027L14.4 12.8328C14.3063 12.7123 14.1858 12.652 14.0385 12.652C13.891 12.652 13.7705 12.7123 13.677 12.8328L11.2308 16.0192L9.59225 13.9192C9.49875 13.8051 9.37983 13.748 9.2355 13.748C9.09133 13.748 8.97242 13.8083 8.87875 13.929L7.302 16.027C7.1815 16.1808 7.16483 16.3398 7.252 16.5038C7.33917 16.6679 7.47317 16.75 7.654 16.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center / contain 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_8295" 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_8295)">%0A<path d="M5.30775 20.5C4.80258 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.1974 3.5 18.6923V5.30775C3.5 4.80258 3.675 4.375 4.025 4.025C4.375 3.675 4.80258 3.5 5.30775 3.5H18.6923C19.1974 3.5 19.625 3.675 19.975 4.025C20.325 4.375 20.5 4.80258 20.5 5.30775V18.6923C20.5 19.1974 20.325 19.625 19.975 19.975C19.625 20.325 19.1974 20.5 18.6923 20.5H5.30775ZM7.654 16.75H16.423C16.6038 16.75 16.7378 16.6679 16.825 16.5038C16.9122 16.3398 16.8987 16.1808 16.7845 16.027L14.4 12.8328C14.3063 12.7123 14.1858 12.652 14.0385 12.652C13.891 12.652 13.7705 12.7123 13.677 12.8328L11.2308 16.0192L9.59225 13.9192C9.49875 13.8051 9.37983 13.748 9.2355 13.748C9.09133 13.748 8.97242 13.8083 8.87875 13.929L7.302 16.027C7.1815 16.1808 7.16483 16.3398 7.252 16.5038C7.33917 16.6679 7.47317 16.75 7.654 16.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center / contain no-repeat;
}
.cometchat-images-bubble__placeholder.cometchat-images-bubble__unsupported::after {
content: none;
}
.cometchat-images-bubble__unsupported {
cursor: pointer;
}
.cometchat-images-bubble__unsupported-icon {
width: 48px;
height: 48px;
object-fit: contain;
}
.cometchat-images-bubble__overflow-tile {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--cometchat-radius-2, 8px);
cursor: pointer;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: opacity 0.2s ease;
}
.cometchat-images-bubble__overflow-tile:hover {
opacity: 0.9;
}
.cometchat-images-bubble__overflow-tile:focus {
outline: none;
}
.cometchat-images-bubble__overflow-tile:focus-visible {
outline: var(--cometchat-focus-ring-width, 2px) var(--cometchat-focus-ring-style, solid) var(--cometchat-focus-ring-color, var(--cometchat-primary-color, #3399ff));
outline-offset: var(--cometchat-focus-ring-offset, 2px);
}
.cometchat-images-bubble__overflow-tile:focus-visible::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 var(--cometchat-focus-ring-width, 2px) var(--cometchat-focus-ring-color-inverse, var(--cometchat-static-white, #fff));
pointer-events: none;
}
.cometchat-images-bubble__overflow-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--cometchat-radius-2, 8px);
background: var( --cometchat-images-bubble-overflow-overlay-background, var(--cometchat-overlay-background-light, rgba(0, 0, 0, 0.4)) );
backdrop-filter: blur(2px);
transition: background-color 0.2s ease;
}
.cometchat-images-bubble__overflow-tile:hover .cometchat-images-bubble__overflow-overlay {
background: var( --cometchat-images-bubble-overflow-overlay-background-hover, var(--cometchat-overlay-background-light, rgba(0, 0, 0, 0.5)) );
}
.cometchat-images-bubble__overflow-text {
font: var(--cometchat-font-heading1-bold, bold 24px/32px sans-serif);
color: var(--cometchat-static-white, #fff);
text-shadow: var(--cometchat-text-shadow-strong, 0 1px 3px rgba(0, 0, 0, 0.3));
}
.cometchat-images-bubble__caption {
display: flex;
flex-direction: column;
width: 100%;
--cometchat-text-bubble-padding: 6px 4px 6px 4px;
}
.cometchat-images-bubble .cometchat-text-bubble__link-preview-container {
margin-top: 0;
margin-inline: -2px;
}
@media (max-width: 768px) {
.cometchat-images-bubble__overflow-text {
font: var(--cometchat-font-heading2-bold, bold 20px/28px sans-serif);
}
}
@media (max-width: 480px) {
.cometchat-images-bubble__grid {
gap: var(--cometchat-images-bubble-grid-gap-mobile, var(--cometchat-spacing, 2px));
}
.cometchat-images-bubble__overflow-text {
font: var(--cometchat-font-heading3-bold, bold 16px/24px sans-serif);
}
}
/* src/components/base/CometChatAvatar/CometChatAvatar.css */
.cometchat-avatar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: var(--cometchat-radius-max, 1000px);
background: var(--cometchat-extended-primary-color-500, #aa9ee8);
}
.cometchat-avatar[data-size=small] {
width: 32px;
height: 32px;
}
.cometchat-avatar[data-size=medium] {
width: 40px;
height: 40px;
}
.cometchat-avatar[data-size=large] {
width: 48px;
height: 48px;
}
.cometchat-avatar__image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--cometchat-radius-max, 1000px);
overflow: hidden;
}
.cometchat-avatar__initials {
display: flex;
justify-content: center;
align-items: center;
color: var(--cometchat-static-white, #fff);
text-align: center;
user-select: none;
}
.cometchat-avatar[data-size=small] .cometchat-avatar__initials {
font: var(--cometchat-font-body-bold, 700 12px Roboto);
}
.cometchat-avatar[data-size=medium] .cometchat-avatar__initials {
font: var(--cometchat-font-heading4-bold, 700 14px Roboto);
}
.cometchat-avatar[data-size=large] .cometchat-avatar__initials {
font: var(--cometchat-font-heading3-bold, 700 20px Roboto);
}
.cometchat-avatar__status-indicator {
position: absolute;
bottom: 0;
right: 0;
border-radius: var(--cometchat-radius-max, 1000px);
border: 2px solid var(--cometchat-background-color-01, #fff);
}
.cometchat-avatar[data-size=small] .cometchat-avatar__status-indicator {
width: 8px;
height: 8px;
}
.cometchat-avatar[data-size=medium] .cometchat-avatar__status-indicator {
width: 10px;
height: 10px;
}
.cometchat-avatar[data-size=large] .cometchat-avatar__status-indicator {
width: 12px;
height: 12px;
}
.cometchat-avatar__status-indicator[data-status=online] {
background: var(--cometchat-success-color, #09c26f);
}
.cometchat-avatar__status-indicator[data-status=offline] {
display: none;
}
/* src/components/base/CometChatFullScreenViewer/CometChatFullScreenViewer.css */
.cometchat-fullscreen-viewer {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(20, 20, 20, 0.8);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
outline: none;
}
.cometchat-fullscreen-viewer__header {
width: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-4, 16px);
background: var(--cometchat-background-color-01, #fff);
border-bottom: 1px solid var(--cometchat-border-color-light, #f5f5f5);
z-index: 10;
box-sizing: border-box;
}
.cometchat-fullscreen-viewer__header-left {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.cometchat-fullscreen-viewer__header-center {
flex: 1 1 auto;
display: flex;
justify-content: center;
padding: 0 var(--cometchat-padding-4, 16px);
overflow: hidden;
}
.cometchat-fullscreen-viewer__header-right {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__sender-info {
display: flex;
align-items: center;
gap: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__avatar {
width: 36px;
height: 36px;
border-radius: var(--cometchat-radius-max, 1000px);
overflow: hidden;
flex-shrink: 0;
background-color: var(--cometchat-neutral-color-300, #d1d1d1);
display: flex;
align-items: center;
justify-content: center;
}
.cometchat-fullscreen-viewer__avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.cometchat-fullscreen-viewer__avatar-initials {
font: var(--cometchat-font-caption1-medium, 500 12px Roboto);
color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-fullscreen-viewer__sender-details {
display: flex;
flex-direction: column;
}
.cometchat-fullscreen-viewer__sender-name {
color: var(--cometchat-text-color-primary, #141414);
font: var(--cometchat-font-body-medium, 500 14px Roboto);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cometchat-fullscreen-viewer__sender-status {
color: var(--cometchat-success-color, #09c26f);
font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
white-space: nowrap;
}
.cometchat-fullscreen-viewer__sender-date {
color: var(--cometchat-text-color-tertiary, #8a8a8a);
font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
white-space: nowrap;
}
.cometchat-fullscreen-viewer__file-info-header {
display: flex;
align-items: center;
gap: var(--cometchat-spacing-2, 8px);
color: var(--cometchat-text-color-secondary, #666);
font: var(--cometchat-font-body-regular, 400 14px Roboto);
overflow: hidden;
}
.cometchat-fullscreen-viewer__file-info-name {
color: var(--cometchat-text-color-primary, #141414);
font: var(--cometchat-font-body-medium, 500 14px Roboto);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
}
.cometchat-fullscreen-viewer__file-info-separator {
color: var(--cometchat-text-color-tertiary, #8a8a8a);
}
.cometchat-fullscreen-viewer__file-info-size,
.cometchat-fullscreen-viewer__file-info-type {
color: var(--cometchat-text-color-secondary, #666);
font: var(--cometchat-font-body-regular, 400 14px Roboto);
white-space: nowrap;
}
.cometchat-fullscreen-viewer__index-display {
color: var(--cometchat-text-color-primary, #141414);
font: var(--cometchat-font-body-medium, 500 14px Roboto);
padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
background-color: var(--cometchat-background-color-02, #f5f5f5);
border-radius: var(--cometchat-radius-2, 8px);
white-space: nowrap;
}
.cometchat-fullscreen-viewer__action-button {
background: transparent;
border: none;
padding: var(--cometchat-padding-2, 8px);
border-radius: var(--cometchat-radius-2, 8px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
transition: background-color 150ms ease;
}
.cometchat-fullscreen-viewer__action-button:hover {
background-color: var(--cometchat-background-color-02, #f5f5f5);
}
.cometchat-fullscreen-viewer__action-button:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-fullscreen-viewer__close-icon {
width: 20px;
height: 20px;
background-color: var(--cometchat-icon-color-primary, #141414);
-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-r