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

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

769 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 box-shadow: none;
218
219 }
220
221 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
222
223 text-align: right;
224 float: right;
225 border-radius: 10px 10px 10px 10px;
226 color: #404040;
227 margin-right: 33px;
228 margin-left: 0px;
229
230 }
231
232 ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-paragraph, .wp-chatbot-agent-profile .wp-chatbot-bubble {
233
234 color: #4d4d4d;
235
236 border-radius: 10px 10px 10px 10px;
237
238
239 }
240
241 .wpbot_auto_image {
242 width: 100%;
243 margin-top: 10px;
244 display: block;
245 margin-bottom: 10px;
246 max-width: 300px !important;
247 }
248
249 .wp-chatbot-footer {
250
251 border-radius: 5px;
252
253 background: rgba(70, 70, 70, 0.5);
254 margin: 0 auto;
255
256 }
257
258 li.wp-chatbot-msg.wp-chatbot-msg-flat {
259 width: calc(100% - 90px);
260 margin: 0 auto;
261 }
262
263 .wp-chatbot-editor-area {
264
265 border-top: 1px solid #deebe9;
266
267 border-radius: 0 0 5px 5px;
268
269 margin: 0;
270
271 padding: 6px 15px;
272
273 }
274
275 .wp-chatbot-editor-area input {
276
277 display: inline-block;
278
279 border: none;
280
281 height: 50px;
282
283
284 width: 80%;
285
286 background-color: transparent;
287
288 color: #ffffff;
289
290 font-size: 14px;
291
292 margin: 0;
293
294 padding: 0;
295
296 }
297
298 .wp-chatbot-editor-area input:focus {
299
300 outline: none;
301
302 border: none;
303
304 box-shadow: none;
305
306 background: none;
307
308 }
309
310 input.wp-chatbot-editor::placeholder {
311
312 color: #ffffff;
313
314 }
315
316 .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 {
317
318 color: #ffffff;
319
320 }
321
322 .wp-chatbot-editor-area button {
323
324 display: inline-block;
325
326 height: 50px;
327
328
329
330 width: 13%;
331
332 cursor: pointer;
333
334 margin: 0 0 0 -8px;
335
336 padding: 0;
337
338 border: none;
339
340 outline: none;
341
342 }
343
344 .wp-chatbot-editor-area button:hover {
345
346
347
348 }
349
350 .wp-chatbot-editor-area button:focus {
351
352 outline: none;
353
354 border: none;
355
356 box-shadow: none;
357
358
359 }
360
361 /*******************************************************************************************
362
363 sidebar element
364
365 *******************************************************************************************/
366
367 .wp-chatbot-agent-profile {
368
369 position: relative;
370
371 padding-left: 35px;
372
373 padding-top: 30px;
374
375 box-sizing: border-box;
376
377 word-wrap: break-word;
378
379 list-style: none;
380
381 display: block;
382
383 clear: both;
384
385 line-height: 150%;
386
387 min-height: 50px;
388
389 margin: 0 0 10px 0;
390
391 }
392
393 /***********Widget*************/
394
395 .wp-chatbot-widget {
396
397 margin-bottom: 20px;
398
399 }
400
401 .wp-chatbot-widget:last-child {
402
403 margin-bottom: 0;
404
405 }
406
407 .wp-chatbot-widget h3.wp-chatbot-widget-title {
408
409 color: #999999;
410
411 margin: 7px 0 10px;
412
413 padding: 0 0 5px;
414
415 font-size: 18px;
416
417 font-weight: 700;
418
419 line-height: 1.2;
420
421 letter-spacing: 1px;
422
423 border-bottom: 1px solid #e6e6e6;
424
425 }
426
427 /************Agent***********/
428
429 .chatbot-agent {
430
431 text-align: center;
432
433 }
434
435 .chatbot-agent img {
436
437 border: 1px solid #F5F5F5;
438
439 box-shadow: none !important;
440
441 padding: 3px;
442
443 }
444
445 h3.chatbot-agent-name {
446
447 color: #999999;
448
449 margin: 0 0 10px !important;
450
451 padding: 0 !important;
452
453 font-size: 14px !important;
454
455 font-weight: 700;
456
457 }
458
459 .chatbot-agent-name {
460
461 margin: 5px 0;
462
463 padding: 0;
464
465 color: #999999;
466
467 }
468
469 .wp-chatbot-widget ul.wp-chatbot-products, .wp-chatbot-products-area {
470
471 margin: 0 !important;
472
473 }
474
475 /**********************************
476
477 Reset
478
479 **********************************/
480
481 /********* Order List *******/
482
483 .wp-chatbot-cart-header {
484
485 background-color: #F5F5F5;
486
487 }
488
489 .wp-chatbot-cart-single {
490
491 background-color: rgba(245, 245, 245, 0.1);
492
493 border-bottom: 1px solid #dddddd;
494
495 }
496
497 .wp-chatbot-cart-single:nth-child(2n+1) {
498
499 background-color: rgba(245, 245, 245, 0.5);
500
501 }
502
503 .wp-chatbot-cart-footer div a {
504
505 text-decoration: none;
506
507 background: #6dcbe3;
508
509 color: #ffffff !important;
510
511 }
512
513 .wp-chatbot-cart-footer div a:hover, .wp-chatbot-cart-footer div:last-child a {
514
515 background: #559db0;
516
517 }
518
519 /****** Product Details*******/
520
521 .wp-chatbot-product-details {
522
523 box-shadow: 0 0 10px #ccc;
524
525 background-color: #f5f5f5;
526
527 }
528
529 .wp-chatbot-product-cart-button input[type="button"], #wp-chatbot-loadmore, .wp-chatbot-loadmore {
530
531 border: 1px solid #6dcbe3;
532
533 background: #6dcbe3;
534
535 color: #ffffff;
536
537 box-shadow: 0 0 2px #999;
538
539 }
540
541 .wp-chatbot-product-cart-button input[type="button"]:hover, #wp-chatbot-loadmore:hover, .wp-chatbot-loadmore:hover {
542
543 background: #559db0;
544
545 color: #ffffff;
546
547 }
548
549 #wp-chatbot-shortcode-template-container a.wp-chatbot-product-close {
550
551 position: absolute;
552
553 top: 0;
554
555 right: 0;
556
557 background: #6dcbe3 url("../../images/wp-boat-product-close-icon.png") no-repeat center;
558
559 background-size: 27px;
560
561 width: 50px;
562
563 height: 50px;
564
565 }
566
567 #wp-chatbot-shortcode-template-container a.wp-chatbot-product-close:hover {
568
569 background-color: red;
570
571 }
572
573 #wp-chatbot-shortcode-template-container .wp-chatbot-product-details {
574
575 box-shadow: none;
576
577 }
578
579 #wp-chatbot-shortcode-template-container h2#wp-chatbot-product-title {
580
581 margin: 0 0 10px !important;
582
583 color: #999999;
584
585 padding: 0 0 5px;
586
587 font-size: 18px;
588
589 font-weight: 700;
590
591 line-height: 1.2;
592
593 letter-spacing: 1px;
594
595 }
596
597 /*************************
598
599 Right-to-left text direction
600
601 **************************/
602
603 .wp-chatbot-rtl {
604
605 text-align: right;
606
607 direction: RTL;
608
609 }
610
611 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg, .wp-chatbot-rtl .wp-chatbot-agent-profile {
612
613 padding: 0 50px 0 0;
614
615 }
616
617 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg.wp-chatbot-msg-flat {
618
619 padding: 0;
620
621 }
622
623 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg > .wp-chatbot-paragraph {
624
625 display: table;
626
627 max-width: 100%;
628
629 float: right;
630
631 text-align: right;
632 display: inline-block;
633 margin-left: 45px;
634 }
635
636 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chatbot-msg .wp-chatbot-avatar,
637 .wp-chatbot-rtl .wp-chatbot-agent-profile .wp-chatbot-widget-avatar {
638
639 right: 0;
640
641 left: auto;
642
643 }
644
645 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg {
646
647 padding: 0 0 0 50px;
648
649 }
650
651 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-avatar {
652
653 left: 0;
654
655 right: auto;
656
657 }
658
659 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg > .wp-chatbot-paragraph {
660
661 display: table;
662
663 max-width: 100%;
664
665 float: left;
666
667 text-align: left;
668 display: inline-block;
669 margin-left: 45px;
670
671 }
672
673 .wp-chatbot-rtl ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
674
675 margin-left: 0;
676
677 }
678
679 .wp-chatbot-rtl .wp-chatbot-editor-container input {
680
681 text-align: right;
682
683 direction: RTL;
684
685 }
686
687 .wp-chatbot-rtl .wp-chatbot-products-area ul li:nth-child(2n+2) {
688
689 margin: auto;
690
691 }
692
693 .wp-chatbot-rtl .wp-chatbot-products-area ul li {
694
695 margin: 1%;
696
697 vertical-align: middle;
698
699 }
700
701 @media screen and (max-width: 1024px) {
702
703 .chatbot-left-sidebar {
704
705 display: none !important;
706
707 }
708
709 .chatbot-shortcode-template-01 {
710
711 display: block;
712
713 }
714
715 .chatbot-shortcode-template-01 .chatbot-shortcode-row {
716
717 display: block;
718
719 }
720
721 }
722
723 @media screen and (max-width: 767px) {
724
725 .chatbot-shortcode-template-01 .wp-chatbot-container {
726
727 display: block !important;
728
729 width: 100% !important;
730
731 margin-bottom: 30px;
732
733 }
734
735 }
736 .wp-chatbot-paragraph h4 {
737 color: #000 !important;
738 }
739 div#wp-chatbot-shortcode-template-container #wpbot_language {
740 top: -40px !important;
741 }
742 ul.wp-chatbot-messages-container > li.wp-chat-user-msg .wp-chatbot-paragraph {
743 margin-right: 50px !important;
744 }
745 .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 {
746 color: #000000 !important;
747 background: none !important;
748 background-size: 200% auto;
749 background-color: #ffffff00 !important;
750 box-shadow: unset;
751 border: none !important;
752 }
753 .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 {
754 background-position: right center;
755 box-shadow: none;
756 background-color: #ffffff00 !important;
757 }
758
759 .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 {
760 color: #000000 !important;
761 background: none !important;
762 background-size: 200% auto;
763 background-color: #ffffffde !important;
764 box-shadow: unset;
765 border: none !important;
766 }
767 .wp-chatbot-editor-area button {
768 text-align: right !important;
769 }