@cometchat/chat-uikit-react
Version:
Ready-to-use Chat UI Components for React
139 lines (120 loc) • 6.13 kB
CSS
@layer cometchat {
[data-theme='dark'] {
/* Primary & Extended Colors */
--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;
/* Neutral Colors */
--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;
/* Alert Colors */
--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;
/* Static Colors */
--cometchat-static-black: #141414;
--cometchat-static-white: #ffffff;
--cometchat-static-white-70: rgba(255, 255, 255, 0.7);
/* Background Colors */
--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);
/* Border Colors */
--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);
/* Text Colors */
--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);
/* Icon Colors */
--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);
/* Shimmer */
--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%
);
/* Buttons */
--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);
/* Focus Ring */
--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;
/* Overlay Backgrounds (semi-transparent scrims on top of media) */
--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);
/* Text Shadow */
--cometchat-text-shadow-strong: 0 1px 3px rgba(0, 0, 0, 0.3);
/* Image Bubble */
--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
);
/* Video Bubble */
--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;
}
}