@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React
721 lines (718 loc) • 47.1 kB
CSS
/* 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-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.cometchat-fullscreen-viewer__download-action-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_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" 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_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.cometchat-fullscreen-viewer__body {
display: flex;
align-items: center;
justify-content: center;
max-width: 90%;
max-height: 80%;
}
.cometchat-fullscreen-viewer__body-image {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
flex-shrink: 0;
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-fullscreen-viewer__video-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 80vh;
}
.cometchat-fullscreen-viewer__body-video {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: var(--cometchat-radius-2, 8px);
box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
}
.cometchat-fullscreen-viewer__body-video:focus {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-fullscreen-viewer__body-video--loading {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.cometchat-fullscreen-viewer__audio-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cometchat-spacing-4, 16px);
padding: var(--cometchat-padding-6, 24px);
background-color: var(--cometchat-background-color-03, #f0f0f0);
border-radius: var(--cometchat-radius-3, 12px);
min-width: 300px;
}
.cometchat-fullscreen-viewer__audio-icon {
width: 64px;
height: 64px;
background-color: var(--cometchat-primary-color, #6852d6);
-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<path d="M7.375 16.8077V7.19225C7.375 6.97975 7.44692 6.80167 7.59075 6.658C7.73458 6.51417 7.91275 6.44225 8.12525 6.44225C8.33792 6.44225 8.516 6.51417 8.6595 6.658C8.80317 6.80167 8.875 6.97975 8.875 7.19225V16.8077C8.875 17.0203 8.80308 17.1983 8.65925 17.342C8.51542 17.4858 8.33725 17.5577 8.12475 17.5577C7.91208 17.5577 7.734 17.4858 7.5905 17.342C7.44683 17.1983 7.375 17.0203 7.375 16.8077ZM11.25 20.75V3.25C11.25 3.0375 11.3219 2.85942 11.4658 2.71575C11.6096 2.57192 11.7878 2.5 12.0003 2.5C12.2129 2.5 12.391 2.57192 12.5345 2.71575C12.6782 2.85942 12.75 3.0375 12.75 3.25V20.75C12.75 20.9625 12.6781 21.1406 12.5343 21.2843C12.3904 21.4281 12.2122 21.5 11.9998 21.5C11.7871 21.5 11.609 21.4281 11.4655 21.2843C11.3218 21.1406 11.25 20.9625 11.25 20.75ZM3.5 12.9038V11.0962C3.5 10.8837 3.57192 10.7056 3.71575 10.5617C3.85958 10.4181 4.03775 10.3462 4.25025 10.3462C4.46292 10.3462 4.641 10.4181 4.7845 10.5617C4.92817 10.7056 5 10.8837 5 11.0962V12.9038C5 13.1163 4.92808 13.2944 4.78425 13.4383C4.64042 13.5819 4.46225 13.6538 4.24975 13.6538C4.03708 13.6538 3.859 13.5819 3.7155 13.4383C3.57183 13.2944 3.5 13.1163 3.5 12.9038ZM15.125 16.8077V7.19225C15.125 6.97975 15.1969 6.80167 15.3408 6.658C15.4846 6.51417 15.6628 6.44225 15.8753 6.44225C16.0879 6.44225 16.266 6.51417 16.4095 6.658C16.5532 6.80167 16.625 6.97975 16.625 7.19225V16.8077C16.625 17.0203 16.5531 17.1983 16.4093 17.342C16.2654 17.4858 16.0872 17.5577 15.8748 17.5577C15.6621 17.5577 15.484 17.4858 15.3405 17.342C15.1968 17.1983 15.125 17.0203 15.125 16.8077ZM19 12.9038V11.0962C19 10.8837 19.0719 10.7056 19.2158 10.5617C19.3596 10.4181 19.5378 10.3462 19.7502 10.3462C19.9629 10.3462 20.141 10.4181 20.2845 10.5617C20.4282 10.7056 20.5 10.8837 20.5 11.0962V12.9038C20.5 13.1163 20.4281 13.2944 20.2843 13.4383C20.1404 13.5819 19.9622 13.6538 19.7498 13.6538C19.5371 13.6538 19.359 13.5819 19.2155 13.4383C19.0718 13.2944 19 13.1163 19 12.9038Z" fill="%23141414"/>%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<path d="M7.375 16.8077V7.19225C7.375 6.97975 7.44692 6.80167 7.59075 6.658C7.73458 6.51417 7.91275 6.44225 8.12525 6.44225C8.33792 6.44225 8.516 6.51417 8.6595 6.658C8.80317 6.80167 8.875 6.97975 8.875 7.19225V16.8077C8.875 17.0203 8.80308 17.1983 8.65925 17.342C8.51542 17.4858 8.33725 17.5577 8.12475 17.5577C7.91208 17.5577 7.734 17.4858 7.5905 17.342C7.44683 17.1983 7.375 17.0203 7.375 16.8077ZM11.25 20.75V3.25C11.25 3.0375 11.3219 2.85942 11.4658 2.71575C11.6096 2.57192 11.7878 2.5 12.0003 2.5C12.2129 2.5 12.391 2.57192 12.5345 2.71575C12.6782 2.85942 12.75 3.0375 12.75 3.25V20.75C12.75 20.9625 12.6781 21.1406 12.5343 21.2843C12.3904 21.4281 12.2122 21.5 11.9998 21.5C11.7871 21.5 11.609 21.4281 11.4655 21.2843C11.3218 21.1406 11.25 20.9625 11.25 20.75ZM3.5 12.9038V11.0962C3.5 10.8837 3.57192 10.7056 3.71575 10.5617C3.85958 10.4181 4.03775 10.3462 4.25025 10.3462C4.46292 10.3462 4.641 10.4181 4.7845 10.5617C4.92817 10.7056 5 10.8837 5 11.0962V12.9038C5 13.1163 4.92808 13.2944 4.78425 13.4383C4.64042 13.5819 4.46225 13.6538 4.24975 13.6538C4.03708 13.6538 3.859 13.5819 3.7155 13.4383C3.57183 13.2944 3.5 13.1163 3.5 12.9038ZM15.125 16.8077V7.19225C15.125 6.97975 15.1969 6.80167 15.3408 6.658C15.4846 6.51417 15.6628 6.44225 15.8753 6.44225C16.0879 6.44225 16.266 6.51417 16.4095 6.658C16.5532 6.80167 16.625 6.97975 16.625 7.19225V16.8077C16.625 17.0203 16.5531 17.1983 16.4093 17.342C16.2654 17.4858 16.0872 17.5577 15.8748 17.5577C15.6621 17.5577 15.484 17.4858 15.3405 17.342C15.1968 17.1983 15.125 17.0203 15.125 16.8077ZM19 12.9038V11.0962C19 10.8837 19.0719 10.7056 19.2158 10.5617C19.3596 10.4181 19.5378 10.3462 19.7502 10.3462C19.9629 10.3462 20.141 10.4181 20.2845 10.5617C20.4282 10.7056 20.5 10.8837 20.5 11.0962V12.9038C20.5 13.1163 20.4281 13.2944 20.2843 13.4383C20.1404 13.5819 19.9622 13.6538 19.7498 13.6538C19.5371 13.6538 19.359 13.5819 19.2155 13.4383C19.0718 13.2944 19 13.1163 19 12.9038Z" fill="%23141414"/>%0A</svg>%0A') center center no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.cometchat-fullscreen-viewer__body-audio {
width: 100%;
max-width: 400px;
}
.cometchat-fullscreen-viewer__body-audio:focus {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-fullscreen-viewer__audio-filename {
color: var(--cometchat-text-color-primary, #141414);
font: var(--cometchat-font-body-medium, 500 14px Roboto);
text-align: center;
word-break: break-word;
}
.cometchat-fullscreen-viewer__file-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cometchat-spacing-4, 16px);
padding: var(--cometchat-padding-8, 32px);
background-color: var(--cometchat-background-color-03, #f0f0f0);
border-radius: var(--cometchat-radius-3, 12px);
min-width: 280px;
max-width: 400px;
}
.cometchat-fullscreen-viewer__file-icon {
position: relative;
width: 80px;
height: 96px;
display: flex;
align-items: center;
justify-content: center;
}
.cometchat-fullscreen-viewer__file-icon-inner {
width: 100%;
height: 100%;
background-color: var(--cometchat-icon-color-secondary, #a1a1a1);
-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_8414" 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_8414)">%0A<path d="M9 17.75H15C15.2125 17.75 15.3906 17.6781 15.5343 17.5343C15.6781 17.3904 15.75 17.2122 15.75 16.9998C15.75 16.7871 15.6781 16.609 15.5343 16.4655C15.3906 16.3218 15.2125 16.25 15 16.25H9C8.7875 16.25 8.60942 16.3219 8.46575 16.4658C8.32192 16.6096 8.25 16.7878 8.25 17.0003C8.25 17.2129 8.32192 17.391 8.46575 17.5345C8.60942 17.6782 8.7875 17.75 9 17.75ZM9 13.75H15C15.2125 13.75 15.3906 13.6781 15.5343 13.5343C15.6781 13.3904 15.75 13.2122 15.75 12.9998C15.75 12.7871 15.6781 12.609 15.5343 12.4655C15.3906 12.3218 15.2125 12.25 15 12.25H9C8.7875 12.25 8.60942 12.3219 8.46575 12.4658C8.32192 12.6096 8.25 12.7878 8.25 13.0003C8.25 13.2129 8.32192 13.391 8.46575 13.5345C8.60942 13.6782 8.7875 13.75 9 13.75ZM6.30775 21.5C5.80258 21.5 5.375 21.325 5.025 20.975C4.675 20.625 4.5 20.1974 4.5 19.6923V4.30775C4.5 3.80258 4.675 3.375 5.025 3.025C5.375 2.675 5.80258 2.5 6.30775 2.5H13.502C13.7458 2.5 13.9782 2.54683 14.1992 2.6405C14.4202 2.734 14.6128 2.86283 14.777 3.027L18.973 7.223C19.1372 7.38717 19.266 7.57975 19.3595 7.80075C19.4532 8.02175 19.5 8.25417 19.5 8.498V19.6923C19.5 20.1974 19.325 20.625 18.975 20.975C18.625 21.325 18.1974 21.5 17.6923 21.5H6.30775ZM13.5 7.6C13.5 7.855 13.5863 8.06875 13.7587 8.24125C13.9312 8.41375 14.145 8.5 14.4 8.5H18L13.5 4V7.6Z" 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_8414" 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_8414)">%0A<path d="M9 17.75H15C15.2125 17.75 15.3906 17.6781 15.5343 17.5343C15.6781 17.3904 15.75 17.2122 15.75 16.9998C15.75 16.7871 15.6781 16.609 15.5343 16.4655C15.3906 16.3218 15.2125 16.25 15 16.25H9C8.7875 16.25 8.60942 16.3219 8.46575 16.4658C8.32192 16.6096 8.25 16.7878 8.25 17.0003C8.25 17.2129 8.32192 17.391 8.46575 17.5345C8.60942 17.6782 8.7875 17.75 9 17.75ZM9 13.75H15C15.2125 13.75 15.3906 13.6781 15.5343 13.5343C15.6781 13.3904 15.75 13.2122 15.75 12.9998C15.75 12.7871 15.6781 12.609 15.5343 12.4655C15.3906 12.3218 15.2125 12.25 15 12.25H9C8.7875 12.25 8.60942 12.3219 8.46575 12.4658C8.32192 12.6096 8.25 12.7878 8.25 13.0003C8.25 13.2129 8.32192 13.391 8.46575 13.5345C8.60942 13.6782 8.7875 13.75 9 13.75ZM6.30775 21.5C5.80258 21.5 5.375 21.325 5.025 20.975C4.675 20.625 4.5 20.1974 4.5 19.6923V4.30775C4.5 3.80258 4.675 3.375 5.025 3.025C5.375 2.675 5.80258 2.5 6.30775 2.5H13.502C13.7458 2.5 13.9782 2.54683 14.1992 2.6405C14.4202 2.734 14.6128 2.86283 14.777 3.027L18.973 7.223C19.1372 7.38717 19.266 7.57975 19.3595 7.80075C19.4532 8.02175 19.5 8.25417 19.5 8.498V19.6923C19.5 20.1974 19.325 20.625 18.975 20.975C18.625 21.325 18.1974 21.5 17.6923 21.5H6.30775ZM13.5 7.6C13.5 7.855 13.5863 8.06875 13.7587 8.24125C13.9312 8.41375 14.145 8.5 14.4 8.5H18L13.5 4V7.6Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.cometchat-fullscreen-viewer__file-extension {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background-color: var(--cometchat-primary-color, #6852d6);
color: var(--cometchat-static-white, #fff);
font: var(--cometchat-font-caption2-bold, 700 10px Roboto);
padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-2, 8px);
border-radius: var(--cometchat-radius-1, 4px);
text-transform: uppercase;
max-width: 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cometchat-fullscreen-viewer__file-info {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cometchat-spacing-1, 4px);
width: 100%;
}
.cometchat-fullscreen-viewer__file-preview-name {
color: var(--cometchat-text-color-primary, #141414);
font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
text-align: center;
word-break: break-word;
}
.cometchat-fullscreen-viewer__file-preview-size {
color: var(--cometchat-text-color-secondary, #666);
font: var(--cometchat-font-caption1-regular, 400 12px Roboto);
}
.cometchat-fullscreen-viewer__download-button {
display: flex;
align-items: center;
gap: var(--cometchat-spacing-2, 8px);
padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-4, 16px);
background-color: var(--cometchat-primary-button-background, #6852d6);
color: var(--cometchat-primary-button-text, #fff);
font: var(--cometchat-font-button-medium, 500 14px Roboto);
border-radius: var(--cometchat-radius-2, 8px);
text-decoration: none;
cursor: pointer;
border: none;
transition: opacity 150ms ease;
}
.cometchat-fullscreen-viewer__download-button:hover {
opacity: 0.9;
}
.cometchat-fullscreen-viewer__download-button:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-fullscreen-viewer__download-icon {
width: 16px;
height: 16px;
background-color: var(--cometchat-primary-button-icon, #fff);
-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_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" 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_8320" 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_8320)">%0A<path d="M12 15.4115C11.8795 15.4115 11.7673 15.3923 11.6635 15.3538C11.5597 15.3154 11.4609 15.2494 11.3672 15.1558L8.25775 12.0463C8.10908 11.8974 8.03567 11.7233 8.0375 11.524C8.0395 11.3247 8.11292 11.1474 8.25775 10.9922C8.41292 10.8372 8.59108 10.7572 8.79225 10.752C8.99358 10.7468 9.17183 10.8218 9.327 10.977L11.25 12.9V5.25C11.25 5.03717 11.3218 4.859 11.4655 4.7155C11.609 4.57183 11.7872 4.5 12 4.5C12.2128 4.5 12.391 4.57183 12.5345 4.7155C12.6782 4.859 12.75 5.03717 12.75 5.25V12.9L14.673 10.977C14.8218 10.8283 14.9984 10.7549 15.2028 10.7568C15.4073 10.7588 15.5871 10.8372 15.7423 10.9922C15.8871 11.1474 15.9621 11.3231 15.9672 11.5192C15.9724 11.7154 15.8974 11.8911 15.7423 12.0463L12.6328 15.1558C12.5391 15.2494 12.4403 15.3154 12.3365 15.3538C12.2327 15.3923 12.1205 15.4115 12 15.4115ZM6.30775 19.5C5.80258 19.5 5.375 19.325 5.025 18.975C4.675 18.625 4.5 18.1974 4.5 17.6923V15.7308C4.5 15.5179 4.57183 15.3398 4.7155 15.1962C4.859 15.0526 5.03717 14.9808 5.25 14.9808C5.46283 14.9808 5.641 15.0526 5.7845 15.1962C5.92817 15.3398 6 15.5179 6 15.7308V17.6923C6 17.7692 6.03208 17.8398 6.09625 17.9038C6.16025 17.9679 6.23075 18 6.30775 18H17.6923C17.7692 18 17.8398 17.9679 17.9038 17.9038C17.9679 17.8398 18 17.7692 18 17.6923V15.7308C18 15.5179 18.0718 15.3398 18.2155 15.1962C18.359 15.0526 18.5372 14.9808 18.75 14.9808C18.9628 14.9808 19.141 15.0526 19.2845 15.1962C19.4282 15.3398 19.5 15.5179 19.5 15.7308V17.6923C19.5 18.1974 19.325 18.625 18.975 18.975C18.625 19.325 18.1974 19.5 17.6923 19.5H6.30775Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.cometchat-fullscreen-viewer__nav-button {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background-color: rgba(20, 20, 20, 0.6);
border: none;
border-radius: var(--cometchat-radius-2, 8px);
cursor: pointer;
transition: background-color 150ms ease;
z-index: 10;
}
.cometchat-fullscreen-viewer__nav-button:hover:not(:disabled) {
background-color: rgba(255, 255, 255, 0.2);
}
.cometchat-fullscreen-viewer__nav-button:active:not(:disabled) {
transform: translateY(-50%) scale(0.95);
}
.cometchat-fullscreen-viewer__nav-button:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-fullscreen-viewer__nav-button:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.cometchat-fullscreen-viewer__nav-button--prev {
left: var(--cometchat-spacing-4, 16px);
}
.cometchat-fullscreen-viewer__nav-button--next {
right: var(--cometchat-spacing-4, 16px);
}
.cometchat-fullscreen-viewer__nav-icon-prev,
.cometchat-fullscreen-viewer__nav-icon-next {
width: 24px;
height: 24px;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
background: var(--cometchat-static-white, #fff);
}
.cometchat-fullscreen-viewer__nav-icon-prev {
-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<mask id="mask0_740_8318" 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_8318)">%0A<path d="M7.37295 12.75L12.5422 17.9192C12.6909 18.0679 12.7643 18.2419 12.7625 18.4412C12.7605 18.6406 12.682 18.8178 12.527 18.973C12.3718 19.1178 12.1961 19.1928 12 19.198C11.8038 19.2032 11.6281 19.1282 11.473 18.973L5.1327 12.6327C5.03904 12.5391 4.97304 12.4403 4.9347 12.3365C4.8962 12.2327 4.87695 12.1205 4.87695 12C4.87695 11.8795 4.8962 11.7673 4.9347 11.6635C4.97304 11.5597 5.03904 11.4609 5.1327 11.3672L11.473 5.02699C11.6115 4.88849 11.783 4.81766 11.9875 4.81449C12.192 4.81133 12.3718 4.88216 12.527 5.02699C12.682 5.18216 12.7595 5.36033 12.7595 5.56149C12.7595 5.76283 12.682 5.94108 12.527 6.09624L7.37295 11.25H18.75C18.9628 11.25 19.141 11.3218 19.2845 11.4655C19.4281 11.609 19.5 11.7872 19.5 12C19.5 12.2128 19.4281 12.391 19.2845 12.5345C19.141 12.6782 18.9628 12.75 18.75 12.75H7.37295Z" fill="%23141414"/>%0A</g>%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<mask id="mask0_740_8318" 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_8318)">%0A<path d="M7.37295 12.75L12.5422 17.9192C12.6909 18.0679 12.7643 18.2419 12.7625 18.4412C12.7605 18.6406 12.682 18.8178 12.527 18.973C12.3718 19.1178 12.1961 19.1928 12 19.198C11.8038 19.2032 11.6281 19.1282 11.473 18.973L5.1327 12.6327C5.03904 12.5391 4.97304 12.4403 4.9347 12.3365C4.8962 12.2327 4.87695 12.1205 4.87695 12C4.87695 11.8795 4.8962 11.7673 4.9347 11.6635C4.97304 11.5597 5.03904 11.4609 5.1327 11.3672L11.473 5.02699C11.6115 4.88849 11.783 4.81766 11.9875 4.81449C12.192 4.81133 12.3718 4.88216 12.527 5.02699C12.682 5.18216 12.7595 5.36033 12.7595 5.56149C12.7595 5.76283 12.682 5.94108 12.527 6.09624L7.37295 11.25H18.75C18.9628 11.25 19.141 11.3218 19.2845 11.4655C19.4281 11.609 19.5 11.7872 19.5 12C19.5 12.2128 19.4281 12.391 19.2845 12.5345C19.141 12.6782 18.9628 12.75 18.75 12.75H7.37295Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-fullscreen-viewer__nav-icon-next {
-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<mask id="mask0_740_8340" 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_8340)">%0A<path d="M16.627 12.75H5.25C5.03717 12.75 4.859 12.6782 4.7155 12.5345C4.57183 12.391 4.5 12.2128 4.5 12C4.5 11.7872 4.57183 11.609 4.7155 11.4655C4.859 11.3218 5.03717 11.25 5.25 11.25H16.627L11.4577 6.08076C11.3091 5.93209 11.2357 5.75809 11.2375 5.55876C11.2395 5.35942 11.318 5.18217 11.473 5.02701C11.6282 4.88217 11.8038 4.80717 12 4.80201C12.1962 4.79684 12.3718 4.87184 12.527 5.02701L18.8673 11.3673C18.9609 11.4609 19.0269 11.5597 19.0652 11.6635C19.1037 11.7673 19.123 11.8795 19.123 12C19.123 12.1205 19.1037 12.2327 19.0652 12.3365C19.0269 12.4403 18.9609 12.5391 18.8673 12.6328L12.527 18.973C12.3885 19.1115 12.217 19.1823 12.0125 19.1855C11.808 19.1887 11.6282 19.1178 11.473 18.973C11.318 18.8178 11.2405 18.6397 11.2405 18.4385C11.2405 18.2372 11.318 18.0589 11.473 17.9038L16.627 12.75Z" fill="%23141414"/>%0A</g>%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<mask id="mask0_740_8340" 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_8340)">%0A<path d="M16.627 12.75H5.25C5.03717 12.75 4.859 12.6782 4.7155 12.5345C4.57183 12.391 4.5 12.2128 4.5 12C4.5 11.7872 4.57183 11.609 4.7155 11.4655C4.859 11.3218 5.03717 11.25 5.25 11.25H16.627L11.4577 6.08076C11.3091 5.93209 11.2357 5.75809 11.2375 5.55876C11.2395 5.35942 11.318 5.18217 11.473 5.02701C11.6282 4.88217 11.8038 4.80717 12 4.80201C12.1962 4.79684 12.3718 4.87184 12.527 5.02701L18.8673 11.3673C18.9609 11.4609 19.0269 11.5597 19.0652 11.6635C19.1037 11.7673 19.123 11.8795 19.123 12C19.123 12.1205 19.1037 12.2327 19.0652 12.3365C19.0269 12.4403 18.9609 12.5391 18.8673 12.6328L12.527 18.973C12.3885 19.1115 12.217 19.1823 12.0125 19.1855C11.808 19.1887 11.6282 19.1178 11.473 18.973C11.318 18.8178 11.2405 18.6397 11.2405 18.4385C11.2405 18.2372 11.318 18.0589 11.473 17.9038L16.627 12.75Z" fill="%23141414"/>%0A</g>%0A</svg>%0A');
}
.cometchat-fullscreen-viewer__error-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cometchat-spacing-3, 12px);
padding: var(--cometchat-padding-6, 24px);
background-color: var(--cometchat-background-color-03, #f0f0f0);
border-radius: var(--cometchat-radius-3, 12px);
}
.cometchat-fullscreen-viewer__error-icon {
width: 48px;
height: 48px;
background-color: var(--cometchat-error-color, #f44649);
-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_8435" 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_8435)">%0A<path d="M3.4246 20.5C3.2551 20.5 3.10285 20.4586 2.96785 20.3757C2.83285 20.2929 2.72794 20.1837 2.6531 20.048C2.5751 19.9133 2.53219 19.7675 2.52435 19.6105C2.51652 19.4535 2.55885 19.298 2.65135 19.144L11.2121 4.35599C11.3048 4.20199 11.4206 4.08816 11.5596 4.01449C11.6988 3.94083 11.8453 3.90399 11.9991 3.90399C12.1529 3.90399 12.2994 3.94083 12.4386 4.01449C12.5776 4.08816 12.6934 4.20199 12.7861 4.35599L21.3469 19.144C21.4394 19.298 21.4817 19.4535 21.4739 19.6105C21.466 19.7675 21.4231 19.9133 21.3451 20.048C21.2703 20.1837 21.1654 20.2929 21.0304 20.3757C20.8954 20.4586 20.7431 20.5 20.5736 20.5H3.4246ZM11.9991 17.8077C12.2279 17.8077 12.4198 17.7303 12.5746 17.5755C12.7294 17.4207 12.8069 17.2288 12.8069 17C12.8069 16.7712 12.7294 16.5793 12.5746 16.4245C12.4198 16.2697 12.2279 16.1922 11.9991 16.1922C11.7703 16.1922 11.5784 16.2697 11.4236 16.4245C11.2688 16.5793 11.1914 16.7712 11.1914 17C11.1914 17.2288 11.2688 17.4207 11.4236 17.5755C11.5784 17.7303 11.7703 17.8077 11.9991 17.8077ZM11.9994 15.1922C12.212 15.1922 12.3901 15.1204 12.5336 14.9767C12.6773 14.8329 12.7491 14.6547 12.7491 14.4422V10.9422C12.7491 10.7297 12.6772 10.5517 12.5334 10.408C12.3895 10.2642 12.2114 10.1922 11.9989 10.1922C11.7862 10.1922 11.6081 10.2642 11.4646 10.408C11.3209 10.5517 11.2491 10.7297 11.2491 10.9422V14.4422C11.2491 14.6547 11.321 14.8329 11.4649 14.9767C11.6087 15.1204 11.7869 15.1922 11.9994 15.1922Z" 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_8435" 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_8435)">%0A<path d="M3.4246 20.5C3.2551 20.5 3.10285 20.4586 2.96785 20.3757C2.83285 20.2929 2.72794 20.1837 2.6531 20.048C2.5751 19.9133 2.53219 19.7675 2.52435 19.6105C2.51652 19.4535 2.55885 19.298 2.65135 19.144L11.2121 4.35599C11.3048 4.20199 11.4206 4.08816 11.5596 4.01449C11.6988 3.94083 11.8453 3.90399 11.9991 3.90399C12.1529 3.90399 12.2994 3.94083 12.4386 4.01449C12.5776 4.08816 12.6934 4.20199 12.7861 4.35599L21.3469 19.144C21.4394 19.298 21.4817 19.4535 21.4739 19.6105C21.466 19.7675 21.4231 19.9133 21.3451 20.048C21.2703 20.1837 21.1654 20.2929 21.0304 20.3757C20.8954 20.4586 20.7431 20.5 20.5736 20.5H3.4246ZM11.9991 17.8077C12.2279 17.8077 12.4198 17.7303 12.5746 17.5755C12.7294 17.4207 12.8069 17.2288 12.8069 17C12.8069 16.7712 12.7294 16.5793 12.5746 16.4245C12.4198 16.2697 12.2279 16.1922 11.9991 16.1922C11.7703 16.1922 11.5784 16.2697 11.4236 16.4245C11.2688 16.5793 11.1914 16.7712 11.1914 17C11.1914 17.2288 11.2688 17.4207 11.4236 17.5755C11.5784 17.7303 11.7703 17.8077 11.9991 17.8077ZM11.9994 15.1922C12.212 15.1922 12.3901 15.1204 12.5336 14.9767C12.6773 14.8329 12.7491 14.6547 12.7491 14.4422V10.9422C12.7491 10.7297 12.6772 10.5517 12.5334 10.408C12.3895 10.2642 12.2114 10.1922 11.9989 10.1922C11.7862 10.1922 11.6081 10.2642 11.4646 10.408C11.3209 10.5517 11.2491 10.7297 11.2491 10.9422V14.4422C11.2491 14.6547 11.321 14.8329 11.4649 14.9767C11.6087 15.1204 11.7869 15.1922 11.9994 15.1922Z" fill="%23141414"/>%0A</g>%0A</svg>%0A') center center no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
}
.cometchat-fullscreen-viewer__error-text {
color: var(--cometchat-text-color-secondary, #666);
font: var(--cometchat-font-body-regular, 400 14px Roboto);
text-align: center;
}
.cometchat-fullscreen-viewer__unsupported-state {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--cometchat-spacing-2, 8px);
padding: var(--cometchat-padding-8, 32px) var(--cometchat-padding-6, 24px);
border-radius: var(--cometchat-radius-3, 12px);
text-align: center;
}
.cometchat-fullscreen-viewer__unsupported-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: var(--cometchat-radius-max, 1000px);
background: color-mix(in srgb, var(--cometchat-static-white, #4c4c4c) 10%, transparent);
margin-bottom: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__unsupported-icon {
width: 40px;
height: 40px;
object-fit: contain;
}
.cometchat-fullscreen-viewer__unsupported-title {
color: var(--cometchat-static-white, #fff);
font: var(--cometchat-font-heading4-medium, 500 18px Roboto);
}
.cometchat-fullscreen-viewer__unsupported-subtitle {
color: var(--cometchat-static-white-70, rgba(255, 255, 255, 0.7));
font: var(--cometchat-font-body-regular, 400 14px Roboto);
}
.cometchat-fullscreen-viewer__unsupported-download {
align-self: stretch;
margin-top: var(--cometchat-spacing-4, 16px);
}
.cometchat-fullscreen-viewer__body-download-progress {
position: relative;
width: 100px;
height: 100px;
}
.cometchat-fullscreen-viewer__body-download-progress svg {
width: 100px;
height: 100px;
transform: rotate(-90deg);
}
.cometchat-fullscreen-viewer__body-download-progress-background {
stroke: var(--cometchat-static-white, #fff);
stroke-dasharray: 113 113;
stroke-width: 2;
fill: none;
opacity: 0.2;
}
.cometchat-fullscreen-viewer__body-download-progress-foreground {
stroke: var(--cometchat-static-white, #fff);
stroke-dasharray: 0 113;
stroke-width: 2;
fill: none;
stroke-linecap: round;
}
@media (max-width: 768px) {
.cometchat-fullscreen-viewer__header {
padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-3, 12px);
}
.cometchat-fullscreen-viewer__header-center {
display: none;
}
.cometchat-fullscreen-viewer__nav-button {
width: 40px;
height: 40px;
}
.cometchat-fullscreen-viewer__nav-icon-prev,
.cometchat-fullscreen-viewer__nav-icon-next {
width: 20px;
height: 20px;
}
.cometchat-fullscreen-viewer__nav-button--prev {
left: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__nav-button--next {
right: var(--cometchat-spacing-2, 8px);
}
.cometchat-fullscreen-viewer__body {
max-width: 95%;
max-height: 85%;
}
}
@media (max-width: 480px) {
.cometchat-fullscreen-viewer__nav-button {
width: 36px;
height: 36px;
}
.cometchat-fullscreen-viewer__nav-icon-prev,
.cometchat-fullscreen-viewer__nav-icon-next {
width: 18px;
height: 18px;
}
.cometchat-fullscreen-viewer__avatar {
width: 28px;
height: 28px;
}
.cometchat-fullscreen-viewer__action-button {
width: 28px;
height: 28px;
padding: var(--cometchat-padding-1, 4px);
}
.cometchat-fullscreen-viewer__close-icon,
.cometchat-fullscreen-viewer__download-action-icon {
width: 16px;
height: 16px;
}
.cometchat-fullscreen-viewer__unsupported-download {
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.cometchat-fullscreen-viewer__nav-button,
.cometchat-fullscreen-viewer__action-button,
.cometchat-fullscreen-viewer__download-button {
transition: none;
}
}
/* src/components/base/CometChatButton/CometChatButton.css */
.cometchat-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--cometchat-padding-1, 4px);
border: none;
border-radius: var(--cometchat-radius-2, 8px);
cursor: pointer;
font: inherit;
line-height: 120%;
box-sizing: border-box;
position: relative;
transition: background 150ms ease;
}
.cometchat-button:focus-visible {
outline: 2px solid var(--cometchat-primary-color, #6852d6);
outline-offset: 2px;
}
.cometchat-button--primary {
background: var(--cometchat-primary-button-background, #6852d6);
color: var(--cometchat-static-white, #fff);
}
.cometchat-button--primary:hover:not(:disabled) {
background: var(--cometchat-extended-primary-color-800, #7a6bd6);
}
.cometchat-button--primary:active:not(:disabled) {
background: var(--cometchat-extended-primary-color-900, #5d49be);
}
.cometchat-button--secondary {
background: transparent;
color: var(--cometchat-text-color-primary, #141414);
border: 1px solid var(--cometchat-border-color-default, #e8e8e8);
}
.cometchat-button--secondary:hover:not(:disabled) {
background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-button--secondary:active:not(:disabled) {
background: var(--cometchat-white-pressed, rgba(0, 0, 0, 0.08));
}
.cometchat-button--ghost {
background: transparent;
color: var(--cometchat-text-color-primary, #141414);
}
.cometchat-button--ghost:hover:not(:disabled) {
background: var(--cometchat-white-hover, rgba(0, 0, 0, 0.04));
}
.cometchat-button--ghost:active:not(:disabled) {
background: var(--cometchat-white-pressed, rgba(0, 0, 0, 0.08));
}
.cometchat-button--sm {
height: 32px;
padding: var(--cometchat-padding-1, 4px) var(--cometchat-padding-3, 12px);
font: var(--cometchat-font-body-medium, 500 14px Roboto);
}
.cometchat-button--md {
height: 40px;
padding: var(--cometchat-padding-2, 8px) var(--cometchat-padding-5, 20px);
font: var(--cometchat-font-button-medium, 500 14px Roboto);
}
.cometchat-button--lg {
height: 48px;
padding: var(--cometchat-padding-3, 12px) var(--cometchat-padding-6, 24px);
font: var(--cometchat-font-heading4-medium, 500 16px Roboto);
}
.cometchat-button--disabled {
opacity: 0.4;
cursor: not-allowed;
}
.cometchat-button--loading {
cursor: wait;
}
.cometchat-button__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cometchat-button__icon--sm {
width: 16px;
height: 16px;
}
.cometchat-button__icon--md {
width: 20px;
height: 20px;
}
.cometchat-button__icon--lg {
width: 24px;
height: 24px;
}
.cometchat-button__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cometchat-button__spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: var(--cometchat-radius-max, 9999px);
animation: cometchat-button-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.cometchat-button__spinner {
animation-duration: 1.5s;
}
}
@keyframes cometchat-button-spin {
to {
transform: rotate(360deg);
}
}
.cometchat-button__content--hidden {
visibility: hidden;
position: absolute;
pointer-events: none;
}