PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 5.4.2
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v5.4.2
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-horizontal / shortcode.css

shortcode.css in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 5.4.2, at templates/template-horizontal/shortcode.css

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