PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 6.6.0
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v6.6.0
8.7.7 8.7.6 8.7.5 8.7.4 8.7.3 8.7.2 8.7.1 8.7.0 8.6.9 8.6.8 8.6.7 8.6.6 8.6.5 8.6.4 8.6.2 8.6.1 8.6.0 8.5.9 8.5.8 8.5.7 8.5.6 8.5.5 8.5.4 8.5.3 8.5.2 All 533 releases
chatbot / templates / template-00 / style.css

style.css in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 6.6.0, at templates/template-00/style.css

743 lines 14.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2
3 01. Ball content
4
5 02. wp Chat bot Message container
6
7 -A Link Item
8
9 -B Loading
10
11 03. wp Chat bot Message Editor
12
13 04. wp Chat bottom Tab Nav Editor
14 05. Tab Feature Product
15
16 06. Tab Cart
17
18 07. Product Details
19
20 */
21
22 /*********************
23
24 01. ball content wrapper
25
26 **********************/
27
28 .wp-chatbot-board-container {
29 background: #ffffff;
30 border-radius: 5px;
31 box-shadow: 0 5px 40px rgba(0, 0, 0, .30);
32 overflow: hidden;
33 }
34
35 .wp-chatbot-board-container:after {
36 content: "";
37 position: absolute;
38 right: 0;
39 bottom: -26px;
40 width: 0;
41 height: 0;
42 border-left: 30px solid transparent;
43 border-right: 0 solid transparent;
44 border-top: 30px solid #ffffff;
45
46 }
47
48 /******************************
49
50 02. wp Chat bot Message container
51
52 *********************************/
53
54 .wp-chatbot-header {
55
56 background: #1f8ceb;
57
58 }
59
60 .wp-chatbot-header h3 {
61
62 color: #ffffff;
63
64 font-size: 18px !important;
65
66 letter-spacing: 1px;
67
68 }
69
70
71 ul.wp-chatbot-messages-container li {
72
73 font-size: 14px;
74
75 }
76
77 ul.wp-chatbot-messages-container > li.wp-chatbot-msg {
78
79 padding-left: 50px;
80
81 }
82
83 ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
84
85 padding-right: 50px;
86
87 }
88 ul li .wp-chatbot-avatar {
89 margin-top: 0 !important;
90 }
91 ul.wp-chatbot-messages-container > li .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
92
93 position: absolute;
94
95 top: 0;
96
97 width: 40px;
98
99 height: 40px;
100
101 overflow: hidden;
102
103 border-radius: 50%;
104
105 }
106
107 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar, .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
108
109 left: 0;
110
111 }
112
113 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
114
115 right: 0;
116
117 }
118
119 ul.wp-chatbot-messages-container > li > .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
120
121 padding: 8px 15px;
122
123 max-width: 90%;
124
125 box-shadow: 0 2px 8px #bfbfbf;
126
127 line-height: 150%;
128
129 display: table;
130
131 }
132
133 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
134
135 text-align: right;
136
137 float: right;
138
139 }
140
141 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
142
143 background-color: #eaf1f6;
144
145 color: #494949;
146
147 margin-left: 10%;
148
149 border-radius: 10px 10px 0 10px;
150
151 }
152
153 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
154
155 background-color: #1f8ceb;
156
157 color: #ffffff;
158
159 border-radius: 0 10px 10px 10px;
160 width: 100%;
161 }
162
163 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
164
165 background-color: transparent;
166
167 color: #494949;
168
169 }
170
171 /************ 02 (A). Link Item *************/
172
173 span.qcld-chatbot-product-category,
174 span.qcld-chatbot-support-items,
175 span.qcld-chatbot-wildcard,
176 span.qcld-chatbot-suggest-email,
177 span.qcld-chatbot-reset-btn,
178 #wp-chatbot-loadmore, .wp-chatbot-loadmore, span.qcld-chatbot-suggest-phone {
179
180 color: #000000;
181 background-size: 200% auto;
182 border: 1px solid #ffffff;
183 background-color: #1f8ceb;
184 display: inline-block;
185 margin: 3px auto;
186 padding: 6px 11px;
187
188
189 }
190
191 span.qcld-chatbot-product-category:hover,
192 span.qcld-chatbot-support-items:hover,
193 span.qcld-chatbot-wildcard:hover,
194 span.qcld-chatbot-suggest-email:hover,
195 span.qcld-chatbot-reset-btn:hover,
196 #wp-chatbot-loadmore:hover, .wp-chatbot-loadmore:hover {
197
198 background-position: right center;
199
200 box-shadow: none;
201 background-color: #a1c4fd;
202
203 }
204
205 /**************** 02. (B) Loading **********/
206
207 ul.wp-chatbot-messages-container > li .wp-chatbot-paragraph img.wp-chatbot-comment-loader {
208
209 background-color: #fff;
210
211 padding: 1px;
212
213 border-radius: 5px;
214
215 margin: 0 auto;
216
217 display: block;
218
219 }
220
221 /*******************************
222
223 03. wp Chat bot Message Editor
224
225 **********************************/
226
227 .wp-chatbot-editor-container {
228
229 background-color: #f2f6f9;
230
231 }
232
233 .wp-chatbot-editor-container input, .wp-chatbot-editor-area input::-webkit-input-placeholder, .wp-chatbot-editor-area input::-moz-placeholder, .wp-chatbot-editor-area input:-ms-input-placeholder, .wp-chatbot-editor-area input:-moz-placeholder {
234
235 color: #565867;
236
237 }
238
239 /*******************************
240
241 04. wp Chat bottom Tab Nav Editor
242
243 **********************************/
244
245 .wp-chatbot-footer {
246
247 padding: 0;
248
249 }
250
251 .wp-chatbot-tab-nav ul li a[data-option="recent"] {
252
253 background-position: -7px -47px;
254
255 }
256
257 .wp-chatbot-tab-nav ul li a[data-option="cart"] {
258
259 background-position: -47px -47px;
260
261 }
262
263 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
264
265 background-position: -82px -42px;
266
267 }
268
269 .wp-chatbot-tab-nav ul li a[data-option="help"] {
270
271 background-position: -129px -47px;
272
273 }
274
275
276
277 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
278
279 content: "";
280
281 position: absolute;
282
283 border-radius: 50%;
284
285 border: 3px solid #1f8ceb;
286
287 left: -9px;
288
289 right: -9px;;
290
291 bottom: -9px;
292
293 top: -9px;
294
295 }
296
297 .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before {
298
299 border: 2px solid #1f8ceb;
300
301 }
302
303 /***************************
304
305 05. Tab Feature Product
306
307 ***************************/
308
309 .wp-chatbot-agent-profile {
310
311 position: relative;
312
313 padding-left: 50px;
314
315 box-sizing: border-box;
316
317 word-wrap: break-word;
318
319 list-style: none;
320
321 display: block;
322
323 clear: both;
324
325 line-height: 150%;
326
327 min-height: 50px;
328
329 margin: 0 0 10px 0;
330
331 }
332
333 .wp-chatbot-widget-title {
334
335 color: #353535;
336
337 text-align: center;
338
339 padding-bottom: 10px;
340
341 }
342
343 /**************************
344
345 06. Tab Cart
346
347 *************************/
348
349 .wp-chatbot-cart-header {
350
351 background-color: #F5F5F5;
352
353 }
354
355 .wp-chatbot-cart-single {
356
357 background-color: rgba(245, 245, 245, 0.1);
358
359 border-bottom: 1px solid #dddddd;
360
361 }
362
363 .wp-chatbot-cart-single:nth-child(2n+1) {
364
365 background-color: rgba(245, 245, 245, 0.5);
366
367 }
368
369 .wp-chatbot-cart-footer div a {
370
371 text-decoration: none;
372
373 background: #1f8ceb;
374
375 color: #ffffff;
376
377 }
378
379 .wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
380
381 background: #1c7ed4;
382
383 }
384
385 /**************************
386
387 07. Product Details
388
389 ***************************/
390
391 .wp-chatbot-product-details {
392
393 box-shadow: 0 0 10px #ccc;
394
395 background-color: #ffffff;
396
397 }
398
399 .wp-chatbot-product-cart-button input[type="button"] {
400
401 border: 1px solid #e4e5e7;
402
403 background: #1f8ceb;
404
405 color: #ffffff;
406
407 box-shadow: 0 0 2px #999;
408
409 }
410
411 .wp-chatbot-product-cart-button input[type="button"]:hover {
412
413 background: #1c7ed4;
414
415 color: #ffffff;
416
417 }
418
419 /*************************
420
421 Right-to-left text direction
422
423 **************************/
424
425 .wp-chatbot-rtl {
426
427 text-align: right;
428
429 direction: RTL;
430
431 }
432
433 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg, .wp-chatbot-rtl .wp-chatbot-agent-profile {
434
435 padding: 0 50px 0 0;
436
437 }
438
439 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg.wp-chatbot-msg-flat {
440
441 padding: 0;
442
443 }
444
445 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph {
446
447 display: table;
448
449 max-width: 90%;
450
451 float: right;
452
453 text-align: right;
454
455 }
456
457 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
458 .wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
459
460 right: 0;
461
462 left: auto;
463
464 }
465
466 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
467
468 padding: 0 0 0 50px;
469
470 }
471
472 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
473
474 left: 0;
475
476 right: auto;
477
478 }
479
480 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
481
482 display: table;
483
484 max-width: 90%;
485
486 float: left;
487
488 text-align: left;
489
490 }
491
492 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
493
494 margin-left: 0;
495
496 }
497
498 .wp-chatbot-rtl .wp-chatbot-editor-container input {
499
500 text-align: right;
501
502 direction: RTL;
503
504 }
505
506 .wp-chatbot-rtl .wp-chatbot-products-area ul li:nth-child(2n+2) {
507
508 margin: auto;
509
510 }
511 .wp-chatbot-rtl .wp-chatbot-products-area ul li {
512 margin: 1%;
513 vertical-align: middle;
514 }
515
516 .wpb-search-result a {
517 display: block;
518 background: #eee;
519 padding: 4px 5px;
520 line-height: 20px;
521 padding-left: 20px;
522 margin-bottom: 0;
523 }
524 .wpb-search-result a:before {
525 content: "";
526 font-style: normal;
527 font-weight: normal;
528 text-decoration: inherit;
529 color: #000;
530 font-size: 18px;
531 position: absolute;
532 left: 68px;
533 line-height: 1;
534 font-weight: bold;
535 color: #7d7b7b;
536 }
537 .wpbot-saas-live-chat{
538 width: 310px !important;
539 height: 500px;
540 box-shadow: 0 5px 40px rgba(0,0,0,.16)!important;
541 display:none;
542 }
543 .wpchat_header_left{
544 display:inline-block;
545 }
546 .wpchat_header_left span{ font-size: 22px;
547 padding: 0px 10px; }
548 .wpchat_header_right {
549 float: right;
550 margin-right: 12px;
551 }
552
553
554 /* Css Updated - 06-06-24 */
555
556 .wp-chatbot-header {
557 color: rgb(255, 255, 255);
558 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
559 }
560 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
561 color: rgb(255, 255, 255);
562 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
563 }
564 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
565 color: rgb(255, 255, 255) !important;
566 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
567 }
568
569 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
570 color: rgb(255, 255, 255);
571 background: linear-gradient(135deg, rgb(0, 204, 255) 0%, rgb(42, 39, 218) 100%);
572 }
573 span.qcld-chatbot-product-category, span.qcld-chatbot-support-items, span.qcld-chatbot-wildcard, span.qcld-chatbot-suggest-email, span.qcld-chatbot-reset-btn, #wp-chatbot-loadmore, .wp-chatbot-loadmore, span.qcld-chatbot-suggest-phone {
574 color: rgb(0, 125, 252);
575 background: rgba(0, 0, 0, 0);
576 border: 1px solid rgb(0, 125, 252);
577 padding: 8px 12px 6px 12px;
578 }
579 ul.wp-chatbot-messages-container li:first-child.wp-chatbot-msg .wp-chatbot-paragraph {
580 color: #ffffff;
581 }
582 h2.oneline {
583 font-size: 18px;
584 color: #fff;
585 }
586
587 h2.oneline img{
588 margin: 0 0 0 10px !important;
589 }
590 .wp-chatbot-header {
591 display: flex;
592 align-content: center;
593 align-items: center;
594 }
595 .wp-chatbot-content {
596 height: calc(100vh - 320px) !important;
597 }
598 div#wp-chatbot-desktop-reload {
599 top: -8px;
600 }
601 #wp-chatbot-desktop-close {
602 top: -8px;
603 }
604 div#wp-chatbot-ball-container {
605 box-shadow: rgba(0, 18, 46, 0.16) 0px 8px 36px 0px;
606 }
607
608
609 .wp-chatbot-tab-nav ul li a {
610 width: 32px;
611 height: 32px;
612 background: #fff url(../../images/tab-btn-icon.png) no-repeat;
613 }
614 .wp-chatbot-tab-nav ul li a[data-option="help"] {
615 background-position: -125px -44px;
616 }
617 .wp-chatbot-tab-nav ul li a[data-option="support"] {
618 background-position: -166px -44px;
619 }
620
621 .wp-chatbot-board-container:after {
622 border-top: 30px solid #ffffff00;
623 }
624
625 .wp-chatbot-header {
626 padding: 10px 15px;
627 }
628 .wp-chatbot-ball {
629 box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px;
630 }
631 .wp-chatbot-header-welcome-text img {
632 max-width: 36px !important;
633 }
634 .wp-chatbot-tab-nav ul {
635 margin: 0 !important;
636 padding: 0 !important;
637 list-style: none;
638 text-align: center;
639 display: flex;
640 justify-content: space-between;
641 vertical-align: bottom;
642 }
643 .wp-chatbot-tab-nav ul li a[data-option="chat"]:after {
644 border: 0 solid #1f8ceb;
645 }
646 .wp-chatbot-tab-nav ul li.wp-chatbot-operation-active a:before, .wp-chatbot-tab-nav ul li:hover a:before {
647 border: 0px solid #1f8ceb;
648 }
649 .wp-chatbot-tab-nav ul li a[data-option="chat"] {
650 background-position: -82px -38px;
651 }
652
653 .wp-chatbot-tab-nav {
654 padding: 4px 5px;
655 }
656
657 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
658 border-radius: 10px;
659 }
660 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
661 border-radius: 10px;
662 }
663
664 .wp-chatbot-editor-container button {
665 width: auto;
666 box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px;
667 position: absolute;
668 right: -20px;
669 z-index: 999999;
670 padding: 0 0 0 0;
671 background: white url(../../images/send-button.png) no-repeat center !important;
672 border-radius: 50%;
673 width: 46px;
674 height: 46px;
675 top: 0;
676 }
677 .wp-chatbot-board-container {
678 overflow: visible;
679 }
680
681
682 .wp-chatbot-editor-container button:hover {
683 background: #2a27da url(../../images/send-button.png) no-repeat center !important;
684 }
685
686 .wp-chatbot-header-welcome-text img {
687 max-width: 36px !important;
688 background: #fff !important;
689 border-radius: 50%;
690 padding: 3px;
691 }
692
693 .wp-chatbot-board-container {
694 background: #ffffff00;
695 }
696 .slimScrollDiv {
697 background: #fff;
698 }
699
700 .wp-chatbot-footer {
701 padding: 0;
702 background: #fff;
703 }
704 .wp-chatbot-header-welcome-text {
705 align-items: center;
706 display: flex;
707 justify-content: center;
708 }
709 span.qcld-chatbot-wildcard {
710 width: 100%;
711 max-width: 255px;
712 }
713
714 .wp-chatbot-textanimation span {
715 display: inline-block;
716 width: auto;
717 margin: 3px 2px;
718 }
719
720 .wp-chatbot-textanimation span:hover {
721 color: rgb(255, 255, 255);
722 background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%);
723 }
724
725
726
727 .wpb-search-result a {
728 color: #fff !important;
729 }
730 .wpbot_card_caption p {
731 color: #fff !important;
732 }
733
734
735 @media screen and (max-width: 768px) {
736 .wp-chatbot-editor-container button {
737 right: 0;
738 }
739 .wp-chatbot-content {
740 height: calc(100vh - 220px) !important;
741 }
742 }
743