PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 7.5.5
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v7.5.5
8.7.8 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 All 534 releases
chatbot / templates / template-01 / style.css

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

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