PluginProbe
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services / 8.6.9
WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services v8.6.9
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 8.5.0 All 532 releases
chatbot / templates / template-horizontal / shortcode.css

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

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