@zohoim/chat-components 1.0.8-alpha.0 → 1.0.10-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/Appearance/dark/mode/General_DarkMode.module.css +71 -0
- package/assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css +35 -0
- package/assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css +35 -0
- package/assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css +35 -0
- package/assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css +35 -0
- package/assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css +35 -0
- package/assets/Appearance/light/mode/General_LightMode.module.css +71 -0
- package/assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css +35 -0
- package/assets/Appearance/light/themes/green/green_General_LightTheme.module.css +35 -0
- package/assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css +35 -0
- package/assets/Appearance/light/themes/red/red_General_LightTheme.module.css +35 -0
- package/assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css +35 -0
- package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css +71 -0
- package/assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css +35 -0
- package/assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css +35 -0
- package/assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css +35 -0
- package/assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css +35 -0
- package/assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css +35 -0
- package/es/ActionIcon/ActionIcon.js +3 -1
- package/es/ActionIcon/props/propTypes.js +2 -1
- package/es/ActionIconWrapper/ActionIconWrapper.js +6 -3
- package/es/ActionIconWrapper/css/ActionIconWrapper.module.css +1 -1
- package/es/ActionIconWrapper/css/cssJSLogic.js +4 -2
- package/es/ActionIconWrapper/props/propTypes.js +2 -1
- package/es/MessageAction/MessageAction.js +2 -0
- package/es/MessageAction/props/propTypes.js +2 -1
- package/es/MessageActions/MessageActions.js +2 -1
- package/es/MessageActionsMore/MessageActionsMore.js +4 -2
- package/es/MessageActionsMore/css/MessageActionsMore.module.css +1 -0
- package/es/MessageActionsWrapper/MessageActionsWrapper.js +1 -0
- package/es/MessageActionsWrapper/css/MessageActionsWrapper.module.css +4 -0
- package/package.json +3 -2
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
[data-zohoim-mode='dark'] {
|
|
2
|
+
/* integration colors */
|
|
3
|
+
--imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
5
|
+
--imlib_chat_components_imIntegrationIcon_wechat_color: hsla(106, 100.00%, calc(37.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
6
|
+
--imlib_chat_components_imIntegrationIcon_line_color: hsla(120, 98.92%, calc(36.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_imIntegrationIcon_twillio_color: hsla(353, 88.24%, calc(56.67% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
8
|
+
--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
|
|
9
|
+
--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
|
|
10
|
+
--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
|
|
12
|
+
/* two tone icon colors */
|
|
13
|
+
--imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);
|
|
14
|
+
--imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
15
|
+
--imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
|
|
16
|
+
--imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
|
|
17
|
+
|
|
18
|
+
/* text / icon colors */
|
|
19
|
+
--imlib_chat_components_actionIconWrapper_color: rgb(226,228,230);
|
|
20
|
+
--imlib_chat_components_messageBox_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_replyBubbleContent_line_color: hsla(217, 58.73%, calc(87.65% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
--imlib_chat_components_replyBubbleContent_sender_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
23
|
+
--imlib_chat_components_attachmentBubbleInfo_fileName_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
24
|
+
--imlib_chat_components_attachmentBubbleInfo_fileSize_color: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
25
|
+
--imlib_chat_components_replyBubbleContent_content_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
26
|
+
--imlib_chat_components_replyBubbleHeader_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
27
|
+
--imlib_chat_components_replyBubbleHeader_time_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
28
|
+
--imlib_chat_components_textBubble_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
29
|
+
--imlib_chat_components_articleBubble_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
30
|
+
--imlib_chat_components_articleBubble_summary_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
31
|
+
--imlib_chat_components_imMessageContent_text_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_imMessageMeta_time_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_imAutoMessageInfo_text_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
--imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
36
|
+
--imlib_chat_components_imageBubble_alt_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
37
|
+
|
|
38
|
+
/* text / icon failed colors */
|
|
39
|
+
--imlib_chat_components_messageBox_failed_text_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
40
|
+
--imlib_chat_components_replyBubbleHeader_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
41
|
+
--imlib_chat_components_textBubble_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_lighter_low)), calc(1 + var(--zdc_alpha_low)));
|
|
42
|
+
--imlib_chat_components_imageBubble_alt_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
43
|
+
--imlib_chat_components_articleBubble_summary_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
44
|
+
--imlib_chat_components_replyBubbleContent_line_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
45
|
+
--imlib_chat_components_replyBubbleContent_sender_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
46
|
+
--imlib_chat_components_attachmentBubbleInfo_fileName_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
47
|
+
--imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
48
|
+
--imlib_chat_components_replyBubbleContent_content_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
49
|
+
--imlib_chat_components_replyBubbleHeader_time_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
50
|
+
--imlib_chat_components_articleBubble_title_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
51
|
+
|
|
52
|
+
/* bg colors */
|
|
53
|
+
--imlib_chat_components_messageBox_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
54
|
+
|
|
55
|
+
/* bg failed colors */
|
|
56
|
+
--imlib_chat_components_messageBox_failed_bg_color: hsla(2, 75.51%, calc(90.39% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
|
|
57
|
+
--imlib_chat_components_imageBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
58
|
+
--imlib_chat_components_attachmentBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
59
|
+
--imlib_chat_components_articleBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
60
|
+
--imlib_chat_components_locationBubble_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
61
|
+
--imlib_chat_components_replyBubbleContent_bg_color_failed: hsla(353, 59.09%, calc(91.37% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
62
|
+
|
|
63
|
+
/* border failed colors */
|
|
64
|
+
--imlib_chat_components_attachmentBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
65
|
+
--imlib_chat_components_imageBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
66
|
+
--imlib_chat_components_locationBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
67
|
+
--imlib_chat_components_replyBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
68
|
+
--imlib_chat_components_videoBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
69
|
+
--imlib_chat_components_articleBubble_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
70
|
+
--imlib_chat_components_replyBubbleContent_border_color_failed: hsla(353, 65.81%, calc(77.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
71
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='dark'][data-zohoim-theme='blue'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(213, 27.27%, calc(23.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(213, 27.27%, calc(23.73% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(193, 30.77%, calc(15.29% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(213, 25.88%, calc(33.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='dark'][data-zohoim-theme='green'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(191, 21.65%, calc(19.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(191, 21.65%, calc(19.02% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(193, 30.77%, calc(15.29% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(189, 21.21%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(158, 26.83%, calc(24.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='dark'][data-zohoim-theme='orange'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(252, 4.85%, calc(20.20% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(252, 4.85%, calc(20.20% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(193, 30.77%, calc(15.29% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(19, 21.54%, calc(25.49% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='dark'][data-zohoim-theme='red'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(258, 12.62%, calc(20.20% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(256, 13.25%, calc(16.27% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(256, 13.25%, calc(16.27% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(256, 13.25%, calc(16.27% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(256, 13.25%, calc(16.27% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(258, 12.62%, calc(20.20% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(193, 30.77%, calc(15.29% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(256, 13.25%, calc(16.27% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(334, 20.00%, calc(24.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(256, 12.61%, calc(23.33% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='dark'][data-zohoim-theme='yellow'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(218, 7.69%, calc(20.39% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(218, 7.69%, calc(20.39% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(193, 30.77%, calc(15.29% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(217, 23.08%, calc(17.84% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(37, 12.70%, calc(24.71% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
[data-zohoim-mode='light'] {
|
|
2
|
+
/* integration colors */
|
|
3
|
+
--imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
5
|
+
--imlib_chat_components_imIntegrationIcon_wechat_color: hsla(106, 100.00%, calc(37.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
6
|
+
--imlib_chat_components_imIntegrationIcon_line_color: hsla(120, 98.92%, calc(36.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_imIntegrationIcon_twillio_color: hsla(353, 88.24%, calc(56.67% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
8
|
+
--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
|
|
9
|
+
--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
|
|
10
|
+
--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
|
|
12
|
+
/* two tone icon colors */
|
|
13
|
+
--imlib_chat_components_imTtIcon_path0_color: rgba(200,203,220,0.7);
|
|
14
|
+
--imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
15
|
+
--imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
|
|
16
|
+
--imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
|
|
17
|
+
|
|
18
|
+
/* text / icon colors */
|
|
19
|
+
--imlib_chat_components_actionIconWrapper_color: rgb(0,0,0);
|
|
20
|
+
--imlib_chat_components_messageBox_text_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_replyBubbleContent_line_color: hsla(217, 58.73%, calc(87.65% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
--imlib_chat_components_replyBubbleContent_sender_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
23
|
+
--imlib_chat_components_attachmentBubbleInfo_fileName_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
24
|
+
--imlib_chat_components_attachmentBubbleInfo_fileSize_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
25
|
+
--imlib_chat_components_replyBubbleContent_content_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
26
|
+
--imlib_chat_components_replyBubbleHeader_text_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
27
|
+
--imlib_chat_components_replyBubbleHeader_time_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
28
|
+
--imlib_chat_components_textBubble_text_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
29
|
+
--imlib_chat_components_articleBubble_title_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
30
|
+
--imlib_chat_components_articleBubble_summary_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
31
|
+
--imlib_chat_components_imMessageContent_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_imMessageMeta_time_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_imAutoMessageInfo_text_color: hsla(240, 1.29%, calc(45.69% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
--imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
36
|
+
--imlib_chat_components_imageBubble_alt_text_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
37
|
+
|
|
38
|
+
/* text / icon failed colors */
|
|
39
|
+
--imlib_chat_components_messageBox_failed_text_color: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
40
|
+
--imlib_chat_components_replyBubbleHeader_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
41
|
+
--imlib_chat_components_textBubble_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_lighter_low)), calc(1 + var(--zdc_alpha_low)));
|
|
42
|
+
--imlib_chat_components_imageBubble_alt_text_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
43
|
+
--imlib_chat_components_articleBubble_summary_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
44
|
+
--imlib_chat_components_replyBubbleContent_line_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
45
|
+
--imlib_chat_components_replyBubbleContent_sender_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
46
|
+
--imlib_chat_components_attachmentBubbleInfo_fileName_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
47
|
+
--imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
48
|
+
--imlib_chat_components_replyBubbleContent_content_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
49
|
+
--imlib_chat_components_replyBubbleHeader_time_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
50
|
+
--imlib_chat_components_articleBubble_title_color_failed: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
51
|
+
|
|
52
|
+
/* bg colors */
|
|
53
|
+
--imlib_chat_components_messageBox_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
54
|
+
|
|
55
|
+
/* bg failed colors */
|
|
56
|
+
--imlib_chat_components_messageBox_failed_bg_color: hsla(0, 73.91%, calc(95.49% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
|
|
57
|
+
--imlib_chat_components_imageBubble_bg_color_failed: hsla(0, 100.00%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
58
|
+
--imlib_chat_components_attachmentBubble_bg_color_failed: hsla(0, 100.00%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
59
|
+
--imlib_chat_components_articleBubble_bg_color_failed: hsla(0, 100.00%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
60
|
+
--imlib_chat_components_locationBubble_bg_color_failed: hsla(0, 100.00%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
61
|
+
--imlib_chat_components_replyBubbleContent_bg_color_failed: hsla(0, 100.00%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
62
|
+
|
|
63
|
+
/* border failed colors */
|
|
64
|
+
--imlib_chat_components_attachmentBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
65
|
+
--imlib_chat_components_imageBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
66
|
+
--imlib_chat_components_locationBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
67
|
+
--imlib_chat_components_replyBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
68
|
+
--imlib_chat_components_videoBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
69
|
+
--imlib_chat_components_articleBubble_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
70
|
+
--imlib_chat_components_replyBubbleContent_border_color_failed: hsla(0, 100.00%, calc(91.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
71
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='light'][data-zohoim-theme='blue'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 40.00%, calc(96.08% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(64, 100.00%, calc(94.51% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(213, 65.52%, calc(82.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='light'][data-zohoim-theme='green'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(143, 44.44%, calc(96.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 40.00%, calc(96.08% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(143, 44.44%, calc(96.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(64, 100.00%, calc(94.51% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(132, 42.86%, calc(82.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='light'][data-zohoim-theme='orange'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(26, 77.78%, calc(96.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 40.00%, calc(96.08% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(26, 77.78%, calc(96.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(64, 100.00%, calc(94.51% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(28, 79.49%, calc(84.71% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='light'][data-zohoim-theme='red'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(0, 71.43%, calc(97.25% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 40.00%, calc(96.08% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 71.43%, calc(97.25% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(64, 100.00%, calc(94.51% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(0, 70.21%, calc(90.78% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='light'][data-zohoim-theme='yellow'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(45, 83.33%, calc(95.29% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(217, 40.00%, calc(96.08% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(45, 83.33%, calc(95.29% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(64, 100.00%, calc(94.51% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(46, 81.44%, calc(80.98% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
[data-zohoim-mode='pureDark'] {
|
|
2
|
+
/* integration colors */
|
|
3
|
+
--imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_imIntegrationIcon_telegram_color: hsla(201, 63.72%, calc(57.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
5
|
+
--imlib_chat_components_imIntegrationIcon_wechat_color: hsla(106, 100.00%, calc(37.84% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
6
|
+
--imlib_chat_components_imIntegrationIcon_line_color: hsla(120, 98.92%, calc(36.47% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_imIntegrationIcon_twillio_color: hsla(353, 88.24%, calc(56.67% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
8
|
+
--imlib_chat_components_imIntegrationIcon_instagram_color: linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%);
|
|
9
|
+
--imlib_chat_components_imIntegrationIcon_asap_color: linear-gradient(180deg, #A375FF 0%, #7732FF 100%);
|
|
10
|
+
--imlib_chat_components_imIntegrationIcon_fb_color: hsla(215, 100.00%, calc(50.00% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
|
|
12
|
+
/* two tone icon colors */
|
|
13
|
+
--imlib_chat_components_imTtIcon_path0_color: rgba(255, 255, 255, 0.25);
|
|
14
|
+
--imlib_chat_components_imTtIcon_path1_color: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
|
|
15
|
+
--imlib_chat_components_imIntegrationIcon_path0_color: rgba(255, 255, 255, 0.25);
|
|
16
|
+
--imlib_chat_components_imIntegrationIcon_path1_color: rgb(255,255,255);
|
|
17
|
+
|
|
18
|
+
/* text / icon colors */
|
|
19
|
+
--imlib_chat_components_actionIconWrapper_color: rgb(226,228,230);
|
|
20
|
+
--imlib_chat_components_messageBox_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_replyBubbleContent_line_color: hsla(217, 58.73%, calc(87.65% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
--imlib_chat_components_replyBubbleContent_sender_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
23
|
+
--imlib_chat_components_attachmentBubbleInfo_fileName_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
24
|
+
--imlib_chat_components_attachmentBubbleInfo_fileSize_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
25
|
+
--imlib_chat_components_replyBubbleContent_content_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
26
|
+
--imlib_chat_components_replyBubbleHeader_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
27
|
+
--imlib_chat_components_replyBubbleHeader_time_color: hsla(217, 7.76%, calc(54.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
28
|
+
--imlib_chat_components_textBubble_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
29
|
+
--imlib_chat_components_articleBubble_title_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
30
|
+
--imlib_chat_components_articleBubble_summary_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
31
|
+
--imlib_chat_components_imMessageContent_text_color: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_imMessageMeta_time_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_imAutoMessageInfo_text_color: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_messageBubble_messageBox_footer_text_color: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
--imlib_chat_components_messageStatus_send_color: hsla(228, 11.42%, calc(42.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
36
|
+
--imlib_chat_components_imageBubble_alt_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
37
|
+
|
|
38
|
+
/* text / icon failed colors */
|
|
39
|
+
--imlib_chat_components_messageBox_failed_text_color: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
40
|
+
--imlib_chat_components_replyBubbleHeader_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
41
|
+
--imlib_chat_components_textBubble_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter_low)), calc(1 + var(--zdc_alpha_low)));
|
|
42
|
+
--imlib_chat_components_imageBubble_alt_text_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
43
|
+
--imlib_chat_components_articleBubble_summary_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
44
|
+
--imlib_chat_components_replyBubbleContent_line_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
45
|
+
--imlib_chat_components_replyBubbleContent_sender_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
46
|
+
--imlib_chat_components_attachmentBubbleInfo_fileName_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
47
|
+
--imlib_chat_components_attachmentBubbleInfo_fileSize_color_failed: hsla(218, 9.76%, calc(51.76% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
48
|
+
--imlib_chat_components_replyBubbleContent_content_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
49
|
+
--imlib_chat_components_replyBubbleHeader_time_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
50
|
+
--imlib_chat_components_articleBubble_title_color_failed: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
51
|
+
|
|
52
|
+
/* bg colors */
|
|
53
|
+
--imlib_chat_components_messageBox_bg_color: hsla(212, 86.67%, calc(97.06% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
54
|
+
|
|
55
|
+
/* bg failed colors */
|
|
56
|
+
--imlib_chat_components_messageBox_failed_bg_color: hsla(346, 36.31%, calc(30.78% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
|
|
57
|
+
--imlib_chat_components_imageBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
58
|
+
--imlib_chat_components_attachmentBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
59
|
+
--imlib_chat_components_articleBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
60
|
+
--imlib_chat_components_locationBubble_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
61
|
+
--imlib_chat_components_replyBubbleContent_bg_color_failed: hsla(321, 18.68%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
62
|
+
|
|
63
|
+
/* border failed colors */
|
|
64
|
+
--imlib_chat_components_attachmentBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
65
|
+
--imlib_chat_components_imageBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
66
|
+
--imlib_chat_components_locationBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
67
|
+
--imlib_chat_components_replyBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
68
|
+
--imlib_chat_components_videoBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
69
|
+
--imlib_chat_components_articleBubble_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
70
|
+
--imlib_chat_components_replyBubbleContent_border_color_failed: hsla(0, 100.00%, calc(8.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
71
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='pureDark'][data-zohoim-theme='blue'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(213, 19.57%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(212, 38.89%, calc(28.24% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='pureDark'][data-zohoim-theme='green'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(133, 10.84%, calc(16.27% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(133, 23.48%, calc(22.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='pureDark'][data-zohoim-theme='orange'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(26, 19.51%, calc(16.08% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(26, 40.00%, calc(21.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='pureDark'][data-zohoim-theme='red'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(0, 13.25%, calc(16.27% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(2, 28.07%, calc(22.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-zohoim-mode='pureDark'][data-zohoim-theme='yellow'] {
|
|
2
|
+
/* bg colors */
|
|
3
|
+
--imlib_chat_components_actionIconWrapper_bg_color: hsla(35, 15.00%, calc(15.69% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
4
|
+
--imlib_chat_components_attachmentBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
5
|
+
--imlib_chat_components_articleBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
6
|
+
--imlib_chat_components_imageBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
7
|
+
--imlib_chat_components_locationBubble_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
8
|
+
--imlib_chat_components_messageBox_incoming_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
9
|
+
--imlib_chat_components_messageBox_outgoing_bg_color: hsla(0, 0.00%, calc(18.04% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
10
|
+
--imlib_chat_components_messageBubble_active_bg_color: hsla(128, 11.11%, calc(14.12% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
|
|
11
|
+
--imlib_chat_components_replyBubbleContent_bg_color: hsla(0, 0.00%, calc(12.94% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
12
|
+
|
|
13
|
+
/* border colors */
|
|
14
|
+
--imlib_chat_components_actionIconWrapper_border_color: hsla(38, 30.19%, calc(20.78% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
15
|
+
--imlib_chat_components_attachmentBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
16
|
+
--imlib_chat_components_articleBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
17
|
+
--imlib_chat_components_imageBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
18
|
+
--imlib_chat_components_locationBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
19
|
+
--imlib_chat_components_replyBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
20
|
+
--imlib_chat_components_replyBubbleContent_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
21
|
+
--imlib_chat_components_videoBubble_border_color: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
22
|
+
|
|
23
|
+
/* url / themes / primary colors */
|
|
24
|
+
--imlib_chat_components_locationBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
25
|
+
--imlib_chat_components_imPermaLink_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
26
|
+
--imlib_chat_components_textBubble_see_more_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
27
|
+
--imlib_chat_components_textBubble_url_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
28
|
+
--imlib_chat_components_messageStatus_read_color: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
|
|
29
|
+
|
|
30
|
+
/* failed colors */
|
|
31
|
+
--imlib_chat_components_messageStatus_failed_color: hsla(0, 71.91%, calc(53.92% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
|
|
32
|
+
--imlib_chat_components_locationBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
33
|
+
--imlib_chat_components_textBubble_see_more_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
34
|
+
--imlib_chat_components_textBubble_url_color_failed: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
|
|
35
|
+
}
|
|
@@ -41,7 +41,8 @@ export default function ActionIcon(props) {
|
|
|
41
41
|
id,
|
|
42
42
|
title,
|
|
43
43
|
isDisabled,
|
|
44
|
-
needIconOnly
|
|
44
|
+
needIconOnly,
|
|
45
|
+
isActive
|
|
45
46
|
} = props;
|
|
46
47
|
const {
|
|
47
48
|
actionIconWrapperProps = dummyObject
|
|
@@ -68,6 +69,7 @@ export default function ActionIcon(props) {
|
|
|
68
69
|
}, [iconStyle, id]);
|
|
69
70
|
return needIconOnly ? renderIcon() : /*#__PURE__*/React.createElement(ActionIconWrapper, {
|
|
70
71
|
id: id,
|
|
72
|
+
isActive: isActive,
|
|
71
73
|
isDisabled: isDisabled,
|
|
72
74
|
onClick: onClick,
|
|
73
75
|
onMouseEnter: onMouseEnter,
|
|
@@ -23,7 +23,8 @@ export default function ActionIconWrapper(props) {
|
|
|
23
23
|
onMouseEnter: propOnMouseEnter,
|
|
24
24
|
id,
|
|
25
25
|
title,
|
|
26
|
-
isDisabled
|
|
26
|
+
isDisabled,
|
|
27
|
+
isActive
|
|
27
28
|
} = props;
|
|
28
29
|
const {
|
|
29
30
|
onClick,
|
|
@@ -32,7 +33,8 @@ export default function ActionIconWrapper(props) {
|
|
|
32
33
|
onClick: propOnClick,
|
|
33
34
|
onMouseEnter: propOnMouseEnter,
|
|
34
35
|
id,
|
|
35
|
-
isDisabled
|
|
36
|
+
isDisabled,
|
|
37
|
+
isActive
|
|
36
38
|
});
|
|
37
39
|
/* External CSS Customization */
|
|
38
40
|
|
|
@@ -42,7 +44,8 @@ export default function ActionIconWrapper(props) {
|
|
|
42
44
|
const {
|
|
43
45
|
actionIconWrapperClass
|
|
44
46
|
} = cssJSLogic({
|
|
45
|
-
isDisabled
|
|
47
|
+
isDisabled,
|
|
48
|
+
isActive
|
|
46
49
|
}, newStyle);
|
|
47
50
|
/* Render Icon */
|
|
48
51
|
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
border-radius: var(--actionIconWrapper-border_radius);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.actionIconWrapper:hover {
|
|
24
|
+
.actionIconWrapper:hover, .actionIconWrapperActive{
|
|
25
25
|
background-color: var(--imlib_chat_components_actionIconWrapper_bg_color);
|
|
26
26
|
border-color: var(--imlib_chat_components_actionIconWrapper_border_color);
|
|
27
27
|
}
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
import { compileClassNames } from '@zohodesk/utils';
|
|
3
3
|
export default function cssJSLogic(props, style) {
|
|
4
4
|
const {
|
|
5
|
-
isDisabled
|
|
5
|
+
isDisabled,
|
|
6
|
+
isActive
|
|
6
7
|
} = props;
|
|
7
8
|
const actionIconWrapperClass = compileClassNames({
|
|
8
9
|
[style.actionIconWrapper]: true,
|
|
9
|
-
[style.disabled]: isDisabled
|
|
10
|
+
[style.disabled]: isDisabled,
|
|
11
|
+
[style.actionIconWrapperActive]: isActive
|
|
10
12
|
});
|
|
11
13
|
return {
|
|
12
14
|
actionIconWrapperClass
|
|
@@ -7,6 +7,7 @@ const actionIconWrapperPropTypes = {
|
|
|
7
7
|
renderIcon: PropTypes.func.isRequired,
|
|
8
8
|
customStyle: PropTypes.object,
|
|
9
9
|
isDisabled: PropTypes.bool,
|
|
10
|
-
title: PropTypes.string
|
|
10
|
+
title: PropTypes.string,
|
|
11
|
+
isActive: PropTypes.bool
|
|
11
12
|
};
|
|
12
13
|
export default actionIconWrapperPropTypes;
|
|
@@ -20,6 +20,7 @@ export default function MessageAction(props) {
|
|
|
20
20
|
customProps,
|
|
21
21
|
closePopup,
|
|
22
22
|
isDisabled,
|
|
23
|
+
isActive,
|
|
23
24
|
needMoreActionItemIcon
|
|
24
25
|
} = props;
|
|
25
26
|
const {
|
|
@@ -50,6 +51,7 @@ export default function MessageAction(props) {
|
|
|
50
51
|
...moreActionItemProps
|
|
51
52
|
}) : /*#__PURE__*/React.createElement(ActionIcon, {
|
|
52
53
|
id: id,
|
|
54
|
+
isActive: isActive,
|
|
53
55
|
isDisabled: isDisabled,
|
|
54
56
|
onClick: onClick,
|
|
55
57
|
onMouseEnter: onMouseEnter,
|
|
@@ -16,6 +16,7 @@ const messageActionPropTypes = {
|
|
|
16
16
|
iconTitle: PropTypes.string,
|
|
17
17
|
isDisabled: PropTypes.bool,
|
|
18
18
|
isShowInMore: PropTypes.bool,
|
|
19
|
-
needMoreActionItemIcon: PropTypes.bool
|
|
19
|
+
needMoreActionItemIcon: PropTypes.bool,
|
|
20
|
+
isActive: PropTypes.bool
|
|
20
21
|
};
|
|
21
22
|
export default messageActionPropTypes;
|
|
@@ -103,8 +103,9 @@ export default function MessageActions(props) {
|
|
|
103
103
|
const renderMoreIcon = useCallback(() => /*#__PURE__*/React.createElement("div", {
|
|
104
104
|
className: newStyle.moreIcon
|
|
105
105
|
}, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
|
|
106
|
-
const renderMore = useCallback(
|
|
106
|
+
const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
|
|
107
107
|
renderIcon: renderMoreIcon,
|
|
108
|
+
...componentProps,
|
|
108
109
|
...actionIconWrapperProps
|
|
109
110
|
}), [actionIconWrapperProps, renderMoreIcon]);
|
|
110
111
|
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {
|
|
@@ -40,7 +40,9 @@ function MessageActionsMoreComp(props) {
|
|
|
40
40
|
isAbsolutePositioningNeeded,
|
|
41
41
|
positionsOffset
|
|
42
42
|
} = props;
|
|
43
|
-
const moreIcon = renderHandler(renderMoreIcon)(
|
|
43
|
+
const moreIcon = renderHandler(renderMoreIcon)({
|
|
44
|
+
isActive: isPopupReady
|
|
45
|
+
});
|
|
44
46
|
/* External CSS Customization */
|
|
45
47
|
|
|
46
48
|
const newStyle = useMergeStyle(style, customStyle);
|
|
@@ -91,7 +93,7 @@ function MessageActionsMoreComp(props) {
|
|
|
91
93
|
}
|
|
92
94
|
|
|
93
95
|
const MessageActionsMore = Popup(MessageActionsMoreComp, undefined, undefined, {
|
|
94
|
-
isAbsolutePositioningNeeded:
|
|
96
|
+
isAbsolutePositioningNeeded: true
|
|
95
97
|
});
|
|
96
98
|
MessageActionsMoreComp.defaultProps = messageActionsMoreDefaultProps;
|
|
97
99
|
MessageActionsMoreComp.propTypes = messageActionsMorePropTypes;
|
|
@@ -56,6 +56,7 @@ export default function MessageActionsWrapper(props) {
|
|
|
56
56
|
}), [moreActions, renderMoreIcon, messageActionsMoreProps]);
|
|
57
57
|
const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
|
|
58
58
|
alignBox: "row",
|
|
59
|
+
className: newStyle.row,
|
|
59
60
|
isCover: false
|
|
60
61
|
}, renderDefaultActions(), isShowMoreIcon ? renderMoreActions() : null), [renderDefaultActions, renderMoreActions, isShowMoreIcon]);
|
|
61
62
|
return /*#__PURE__*/React.createElement("div", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zohoim/chat-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10-alpha.0",
|
|
4
4
|
"description": "Chat Components",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
},
|
|
32
32
|
"files": [
|
|
33
33
|
"es",
|
|
34
|
+
"assets",
|
|
34
35
|
"!**/__tests__"
|
|
35
36
|
],
|
|
36
37
|
"dependencies": {
|
|
@@ -51,5 +52,5 @@
|
|
|
51
52
|
"jsdom": "23.0.0",
|
|
52
53
|
"react-to-jsx": "1.3.2"
|
|
53
54
|
},
|
|
54
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "9110a5872338d64aba014563ad4d5202e73e17f1"
|
|
55
56
|
}
|