1 | |
2 | #screenreadertrick { |
3 | position: absolute !important; /* Outside the DOM flow */ |
4 | height: 1px; width: 1px; /* Nearly collapsed */ |
5 | overflow: hidden; |
6 | clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */ |
7 | clip: rect(1px, 1px, 1px, 1px); /* All other browsers */ |
8 | } |
9 | |
10 | /* old opener */ |
11 | |
12 | body { |
13 | font-family: 'Roboto', sans-serif; |
14 | } |
15 | .chatbot button:focus { |
16 | outline: none; |
17 | } |
18 | .chat-btn { |
19 | position: fixed; |
20 | bottom: /*2rem*/40px; |
21 | right: /*2rem*/40px; |
22 | z-index: -1; |
23 | text-decoration: none; |
24 | display: -moz-flex; |
25 | display: -o-flex; |
26 | display: -webkit-flex; |
27 | display: flex; |
28 | -webkit-justify-content: center; |
29 | justify-content: center; |
30 | -webkit-align-items: center; |
31 | align-items: center; |
32 | width: 70px; |
33 | height: 70px; |
34 | background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255)) !important; |
35 | color: #ffffff; |
36 | border-radius: 50%; |
37 | font-size: 30px; |
38 | will-change: transform; |
39 | transition: all 0.2s ease-in-out 0s; |
40 | box-shadow: rgba(0, 77, 255, 0.5) 0px 4px 24px; |
41 | |
42 | background: url(https://botcompany.de/images/1102979) !important; |
43 | background-size: 100% !important; |
44 | box-shadow: none; |
45 | border-radius: 0; |
46 | } |
47 | |
48 | .chat-btn div { |
49 | display: inline; |
50 | transition: transform 0.8s; |
51 | visibility: visible; |
52 | opacity: 1; |
53 | position: absolute; |
54 | left: 50%; |
55 | top: 50%; |
56 | transform: translate(-50%, -50%) rotateZ(0); |
57 | } |
58 | |
59 | .chat-btn div.hide { |
60 | visibility: hidden; |
61 | opacity: 0; |
62 | transform: translate(-50%, -50%) rotateZ(180deg); |
63 | transition: transform 0.8s; |
64 | } |
65 | |
66 | .chat-btn .fa-comment-dots { |
67 | display: none; |
68 | } |
69 | |
70 | .chat-btn .fa-pencil-alt { |
71 | display: none; |
72 | } |
73 | |
74 | .chat-btn:hover i.fas.fa-comment-dots { |
75 | display: none; |
76 | } |
77 | |
78 | .chat-btn:focus i.fas.fa-comment-dots { |
79 | color: #fff; |
80 | } |
81 | |
82 | .chat-btn:hover i.fas.fa-pencil-alt { |
83 | display: block; |
84 | } |
85 | |
86 | /*.chat-btn:hover { |
87 | transform: scale(1.2); |
88 | background: #fff !important; |
89 | color: rgb(0, 125, 252); |
90 | }*/ |
91 | |
92 | /*Chatbot Starts*/ |
93 | |
94 | .chat-icon button { |
95 | font-size: 32px; |
96 | line-height: 55px; |
97 | -webkit-transition: all .7s ease-out; |
98 | -moz-transition: all .7s ease-in-out; |
99 | transition: all .7s ease-in-out; |
100 | color: #fff; |
101 | background: transparent; |
102 | border: none; |
103 | /*width: 50px;*/ |
104 | height: 50px; |
105 | line-height: 50px; |
106 | border-radius: 50px; |
107 | } |
108 | |
109 | /* country selector */ |
110 | .chat-bottom select { |
111 | float: left; |
112 | margin-left: 10px; |
113 | margin-top: 10px; |
114 | } |
115 | |
116 | #chat_countrycode { |
117 | display: none; |
118 | } |
119 | |
120 | #chat_countrycode.visible { |
121 | display: inline; |
122 | } |
123 | |
124 | .chat-bottom a button { |
125 | color: #737373; |
126 | transition: 0.4s all ease-in; |
127 | cursor: pointer; |
128 | font-size: 18px; |
129 | } |
130 | |
131 | .chat-bottom a button:hover { |
132 | color: #f16e00; |
133 | } |
134 | |
135 | button.fa-paper-plane { |
136 | border: none; |
137 | padding: 0; |
138 | background: none; |
139 | height: 30px; |
140 | } |
141 | |
142 | /* get rid of this? */ |
143 | .chatbot { |
144 | font-family: 'Roboto', sans-serif; |
145 | } |
146 | |
147 | .chatbot .chat-box { |
148 | bottom: 0px; |
149 | position: fixed; |
150 | margin: 1em; |
151 | right: 20px; |
152 | z-index: 10998; |
153 | max-height: calc(100% - 47px); |
154 | overflow: hidden; |
155 | box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22); |
156 | border-radius: 16px; |
157 | } |
158 | |
159 | .chat-icon { |
160 | /* latest fixes */ |
161 | /*display: block;*/ |
162 | display: flex; |
163 | align-items: center; |
164 | justify-content: center; |
165 | |
166 | width: 56px; |
167 | height: 56px; |
168 | border-radius: 50%; |
169 | text-align: center; |
170 | color: #f0f0f0; |
171 | margin: 25px auto 0; |
172 | box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); |
173 | cursor: pointer; |
174 | -webkit-transition: all .1s ease-out; |
175 | transition: all .1s ease-out; |
176 | position: relative; |
177 | z-index: 10998; |
178 | overflow: hidden; |
179 | background: #42a5f5; |
180 | } |
181 | |
182 | .chat-icon i { |
183 | font-size: 2em; |
184 | line-height: 55px; |
185 | -webkit-transition: all .2s ease-out; |
186 | -webkit-transition: all .2s ease-in-out; |
187 | transition: all .2s ease-in-out; |
188 | } |
189 | |
190 | /*Chatbox*/ |
191 | |
192 | .chat { |
193 | /*position: fixed;*/ |
194 | right: 85px; |
195 | bottom: 20px; |
196 | width: 400px; |
197 | /*font-size: 14px;*/ |
198 | line-height: 25px; |
199 | font-weight: 500; |
200 | -webkit-font-smoothing: antialiased; |
201 | font-smoothing: antialiased; |
202 | opacity: 0; |
203 | display: none; /* XXX */ |
204 | box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22); |
205 | border-radius: 10px; |
206 | -webkit-transition: all .2s ease-out; |
207 | -webkit-transition: all .2s ease-in-out; |
208 | transition: all .2s ease-in-out; |
209 | } |
210 | |
211 | .chat_fullscreen { |
212 | position: fixed; |
213 | right: 0px; |
214 | bottom: 0px; |
215 | top: 0px; |
216 | } |
217 | |
218 | .chat, .chat_header { |
219 | font-family: 'Roboto', sans-serif; |
220 | } |
221 | |
222 | .chat_header { |
223 | text-align: center; |
224 | font-weight: 500; |
225 | color: #fff; |
226 | /*height: 55px;*/ |
227 | background: #42a5f5; |
228 | border-top-left-radius: 10px; |
229 | border-top-right-radius: 10px; |
230 | display: flex; |
231 | align-items: center; |
232 | background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%); |
233 | padding: 12px; |
234 | } |
235 | |
236 | .chat_header { |
237 | position: relative; |
238 | } |
239 | |
240 | .chat_header img.header-user { |
241 | width: 50px; |
242 | height: 50px; |
243 | border-radius: 50px; |
244 | margin-right: 10px; |
245 | display:none; |
246 | } |
247 | |
248 | .chat_header .four-people { |
249 | width: 52px; |
250 | height: 52px; |
251 | overflow: hidden; |
252 | margin-right: 15px; |
253 | } |
254 | .chat_header .title-img { |
255 | border-radius: 50px; |
256 | width: 52px; |
257 | height: 52px; |
258 | padding: 0px; |
259 | background: #fff; |
260 | } |
261 | .chat_header .four-people .users { |
262 | width: 28px; |
263 | height: 28px; |
264 | border-radius: 50px; |
265 | float: left; |
266 | } |
267 | |
268 | .chat_header .four-people .users.user-1 { |
269 | background: url("https://gaippbots.com/bot/uploaded-image/146356"); |
270 | background-size: cover; |
271 | } |
272 | |
273 | .chat_header .four-people .users.user-2 { |
274 | background: url("https://gaippbots.com/bot/uploaded-image/146565"); |
275 | background-size: cover; |
276 | } |
277 | |
278 | .chat_header .four-people .users.user-3 { |
279 | background: url("https://gaippbots.com/bot/uploaded-image/146566"); |
280 | background-size: cover; |
281 | } |
282 | |
283 | .chat_header .four-people .users.user-4 { |
284 | background: url("https://gaippbots.com/bot/uploaded-image/146567"); |
285 | background-size: cover; |
286 | } |
287 | |
288 | .chat_header .four-people .users:nth-child(2n) { |
289 | margin-left: -5px; |
290 | } |
291 | |
292 | .chat_header .four-people .users:nth-child(n+3) { |
293 | margin-top: -4px; |
294 | } |
295 | |
296 | .chat_header h2 { |
297 | font-size: 24px; |
298 | margin: 0; |
299 | color: #ffffff; |
300 | font-weight: normal; |
301 | } |
302 | |
303 | .chat_header button { |
304 | background: transparent; |
305 | border: none; |
306 | color: #fff; |
307 | padding: 0; |
308 | margin: 0; |
309 | font-size: 19px !important; |
310 | width: 40px; |
311 | height: 40px; |
312 | border-radius: 50px; |
313 | display: block; |
314 | line-height: 40px; |
315 | cursor: pointer; |
316 | transition: 0.3s all ease-in; |
317 | } |
318 | |
319 | .chat_header button:hover { |
320 | background: rgba(0, 36, 92, 0.16); |
321 | } |
322 | |
323 | .chat_header button.fas.fa-ellipsis-v { |
324 | |
325 | } |
326 | |
327 | .chat_header .buttons { |
328 | /*position: absolute; |
329 | top: 50%; |
330 | right: 20px; |
331 | transform: translateY(-50%);*/ |
332 | margin-left: auto; |
333 | background-color: transparent !important; |
334 | display:flex; |
335 | } |
336 | |
337 | .header-bottom { |
338 | padding: 15px; |
339 | background: linear-gradient(135deg, rgb(42, 39, 218) 0%, rgb(0, 204, 255) 100%); |
340 | color: #fff; |
341 | position: relative; |
342 | clear: both; |
343 | } |
344 | |
345 | .header-bottom::before { |
346 | content: ""; |
347 | display: block; |
348 | width: 12px; |
349 | height: 12px; |
350 | position: absolute; |
351 | top: calc(50% - 7px); |
352 | background: rgb(117 218 95); |
353 | border-radius: 50%; |
354 | left: 25px; |
355 | } |
356 | |
357 | .header-bottom::after { |
358 | content: ""; |
359 | position: absolute; |
360 | width: 100%; |
361 | bottom: -8px; |
362 | left: 0px; |
363 | border-image-source: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNzIgMTUiPgogIDxwYXRoIGQ9Ik0zNDkuOCAxLjRDMzM0LjUuNCAzMTguNSAwIDMwMiAwaC0yLjVjLTkuMSAwLTE4LjQuMS0yNy44LjQtMzQuNSAxLTY4LjMgMy0xMDIuMyA0LjctMTQgLjUtMjggMS4yLTQxLjUgMS42Qzg0IDcuNyA0MS42IDUuMyAwIDIuMnY4LjRjNDEuNiAzIDg0IDUuMyAxMjguMiA0LjEgMTMuNS0uNCAyNy41LTEuMSA0MS41LTEuNiAzMy45LTEuNyA2Ny44LTMuNiAxMDIuMy00LjcgOS40LS4zIDE4LjctLjQgMjcuOC0uNGgyLjVjMTYuNSAwIDMyLjQuNCA0Ny44IDEuNCA4LjQuMyAxNS42LjcgMjIgMS4yVjIuMmMtNi41LS41LTEzLjgtLjUtMjIuMy0uOHoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==); |
364 | border-image-slice: 0 0 100%; |
365 | border-image-repeat: stretch; |
366 | border-width: 0px 0px 15px; |
367 | border-bottom-style: solid; |
368 | } |
369 | |
370 | .header-bottom .online { |
371 | color: #fff; |
372 | padding-left: 35px; |
373 | font-size: 15px; |
374 | font-weight: normal; |
375 | } |
376 | |
377 | .chat_header .span { |
378 | float: right; |
379 | } |
380 | |
381 | .chat.is-visible { |
382 | display: block; /* XXX */ |
383 | opacity: 1; |
384 | -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); |
385 | animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); |
386 | } |
387 | |
388 | .is-hide { |
389 | opacity: 0 |
390 | } |
391 | |
392 | .chat_field { |
393 | position: relative; |
394 | /*margin: 5px 0 5px 0;*/ |
395 | width: 65%; |
396 | font-size: 17px; |
397 | line-height: 30px; |
398 | font-weight: 500; |
399 | color: #4b4b4b; |
400 | -webkit-font-smoothing: antialiased; |
401 | font-smoothing: antialiased; |
402 | border: none; |
403 | outline: none; |
404 | display: inline-block; |
405 | } |
406 | .chat_field:focus { |
407 | outline: none; |
408 | border: none; |
409 | } |
410 | .chat-bottom #chat_countrycode { |
411 | background: #f0f2f7; |
412 | border: none; |
413 | padding: 3px 5px; |
414 | font-size: 15px; |
415 | margin: 5px 15px; |
416 | } |
417 | .chat-bottom #chat_countrycode:focus { |
418 | border: none; |
419 | outline: none; |
420 | } |
421 | .chat_field.chat_message { |
422 | height: 30px; |
423 | resize: none; |
424 | font-size: 17px; |
425 | line-height: 20px; |
426 | font-weight: 400; |
427 | font-family: inherit; |
428 | padding-left: 15px; |
429 | width: 100%; |
430 | } |
431 | .chat_field.chat_message:hover { |
432 | outline: none; |
433 | border: none; |
434 | } |
435 | |
436 | .chat-bottom { |
437 | width: 100%; |
438 | display: inline-block; |
439 | background: #fff; |
440 | /*border-top: 1px solid #eee;*/ |
441 | border-bottom-right-radius: 10px; |
442 | border-bottom-left-radius: 10px; |
443 | } |
444 | |
445 | .chat-bottom a { |
446 | display: inline-block; |
447 | text-align: center; |
448 | } |
449 | |
450 | .chat-bottom .camera-icon { |
451 | float: left; |
452 | background: rgba(0, 0, 0, 0); |
453 | } |
454 | |
455 | .chat-bottom .send-icon { |
456 | float: right; |
457 | background: rgba(0, 0, 0, 0); |
458 | } |
459 | |
460 | .chat-bottom a { |
461 | width: 35px; |
462 | height: 35px; |
463 | box-shadow: none; |
464 | margin: 5px; |
465 | } |
466 | |
467 | .chat-bottom a i { |
468 | font-size: 1.6em; |
469 | line-height: 35px; |
470 | color: #bbb; |
471 | } |
472 | |
473 | .chat-bottom a i:hover { |
474 | color: #42a5f5; |
475 | } |
476 | .chat-bottom a i.fa-arrow-circle-left { |
477 | font-size: 25px; |
478 | color: #108cf1; |
479 | } |
480 | |
481 | .chat_converse:focus, button.fas:focus, .chat_message:focus { |
482 | /*outline: .2rem solid #f16e00;*/ |
483 | outline: none; |
484 | } |
485 | |
486 | .chat-icon button:focus { |
487 | outline: none !important; |
488 | box-shadow: 0 0 3pt 2pt #f16e00; |
489 | } |
490 | |
491 | .chat-icon { |
492 | padding: 3px; |
493 | } |
494 | |
495 | .chat_converse { |
496 | position: relative; |
497 | background: #fff; |
498 | padding: 6px 0 0px 0; |
499 | height: 350px; |
500 | max-height: 350px; |
501 | min-height: 150px; |
502 | font-size: 17px; /* chat font size */ |
503 | line-height: 25px; |
504 | overflow-y: auto; |
505 | width: 100%; |
506 | float: right; |
507 | padding-bottom: 20px; |
508 | } |
509 | .chat_converse a { |
510 | color: #0071b2; |
511 | text-decoration: underline; |
512 | } |
513 | |
514 | .chat .chat_converse .chat_msg_item { |
515 | position: relative; |
516 | margin: 8px 0 15px 0; |
517 | padding: 8px 15px; |
518 | max-width: 75%; |
519 | display: block; |
520 | word-wrap: break-word; |
521 | border-radius: 7px; |
522 | -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); |
523 | animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); |
524 | clear: both; |
525 | z-index: 9; |
526 | font-weight: normal; |
527 | font-size: 17px; |
528 | line-height: 25px; |
529 | } |
530 | |
531 | .status { |
532 | margin: 45px -50px 0 0; |
533 | float: right; |
534 | font-size: 11px; |
535 | opacity: 0.3; |
536 | } |
537 | |
538 | .status2 { |
539 | margin: -10px 20px 0 0; |
540 | float: right; |
541 | display: block; |
542 | font-size: 11px; |
543 | opacity: 0.3; |
544 | clear: both; |
545 | } |
546 | |
547 | .chat .chat_converse .chat_msg_item .chat_avatar { |
548 | position: absolute; |
549 | top: 0; |
550 | } |
551 | |
552 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar { |
553 | left: -52px; |
554 | background: rgb(240, 242, 247); |
555 | } |
556 | |
557 | .chat .chat_converse .chat_msg_item .chat_avatar, |
558 | .chat_avatar img { |
559 | width: 40px; |
560 | height: 40px; |
561 | text-align: center; |
562 | border-radius: 50%; |
563 | } |
564 | |
565 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin { |
566 | margin-left: 60px; |
567 | float: left; |
568 | background: rgb(240, 242, 247); |
569 | color: #000; |
570 | } |
571 | |
572 | .chat .chat_converse .chat_msg_item.chat_msg_item_user { |
573 | margin-right: 20px; |
574 | float: right; |
575 | background: linear-gradient(135deg, rgb(42, 39, 218), rgb(0, 204, 255)); |
576 | color: #eceff1; |
577 | } |
578 | |
579 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin:before { |
580 | content: ''; |
581 | position: absolute; |
582 | top: 15px; |
583 | left: -12px; |
584 | z-index: 10998; |
585 | border: 6px solid transparent; |
586 | border-right-color: rgba(255, 255, 255, .4); |
587 | } |
588 | |
589 | #otherSideTyping { |
590 | background-color: #fff; |
591 | margin-left: 0; |
592 | display: flex; |
593 | width: 100%; |
594 | align-items: center; |
595 | padding-left: 30px; |
596 | } |
597 | |
598 | #otherSideTyping h4 { |
599 | margin-right: 10px; |
600 | margin-left: 15px; |
601 | } |
602 | |
603 | #otherSideTyping .dot { |
604 | display: inline-block; |
605 | width: 12px; |
606 | height: 12px; |
607 | border-radius: 50%; |
608 | margin-right: 3px; |
609 | background: #303131; |
610 | animation: wave 1.3s linear infinite; |
611 | } |
612 | |
613 | #otherSideTyping .dot:nth-child(2) { |
614 | animation-delay: -1.1s; |
615 | } |
616 | |
617 | #otherSideTyping .dot:nth-child(3) { |
618 | animation-delay: -0.9s; |
619 | } |
620 | |
621 | .chat_username { |
622 | clear: both; |
623 | } |
624 | .chat_username p { |
625 | position: relative; |
626 | float: right; |
627 | margin: 0px 20px -5px 0px; |
628 | font-size: 12px; |
629 | color: #ccc; |
630 | } |
631 | |
632 | .chat_botname { |
633 | clear: both; |
634 | } |
635 | |
636 | .chat_botname p { |
637 | position: relative; |
638 | float: left; |
639 | margin: 0px 0px -6px 60px; |
640 | font-size: 12px; |
641 | color: #42a5f5; |
642 | } |
643 | |
644 | .chat-btn, .chat_header, .chat .chat_converse .chat_msg_item.chat_msg_item_user, .chat_header .fa-redo { |
645 | background-color: #db4064; |
646 | color: #ffffff; |
647 | } |
648 | |
649 | /* limit embedded videos to chat width */ |
650 | .chat_converse iframe { |
651 | max-width: 100% !important; |
652 | } |
653 | |
654 | @keyframes wave { |
655 | 0%, |
656 | 60%, |
657 | 100% { |
658 | transform: initial; |
659 | } |
660 | 30% { |
661 | transform: translateY(-15px); |
662 | } |
663 | } |
664 | |
665 | |
666 | /*Chatbox scrollbar*/ |
667 | ::-webkit-scrollbar { |
668 | width: 6px; |
669 | } |
670 | |
671 | ::-webkit-scrollbar-track { |
672 | border-radius: 0; |
673 | } |
674 | |
675 | ::-webkit-scrollbar-thumb { |
676 | margin: 2px; |
677 | border-radius: 10px; |
678 | background: rgba(0, 0, 0, 0.2); |
679 | } |
680 | |
681 | |
682 | /*Element state*/ |
683 | .is-active { |
684 | -webkit-transform: rotate(180deg); |
685 | transform: rotate(180deg); |
686 | -webkit-transition: all 1s ease-in-out; |
687 | transition: all 1s ease-in-out; |
688 | } |
689 | |
690 | .is-float { |
691 | box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32); |
692 | } |
693 | |
694 | |
695 | /*Animation*/ |
696 | |
697 | @-webkit-keyframes zoomIn { |
698 | 0% { |
699 | -webkit-transform: scale(0); |
700 | transform: scale(0); |
701 | opacity: 0.0; |
702 | } |
703 | 100% { |
704 | -webkit-transform: scale(1); |
705 | transform: scale(1); |
706 | opacity: 1; |
707 | } |
708 | } |
709 | |
710 | @keyframes zoomIn { |
711 | 0% { |
712 | -webkit-transform: scale(0); |
713 | transform: scale(0); |
714 | opacity: 0.0; |
715 | } |
716 | 100% { |
717 | -webkit-transform: scale(1); |
718 | transform: scale(1); |
719 | opacity: 1; |
720 | } |
721 | } |
722 | |
723 | @-webkit-keyframes load { |
724 | 0% { |
725 | -webkit-transform: scale(0); |
726 | transform: scale(0); |
727 | opacity: 0.0; |
728 | } |
729 | 50% { |
730 | -webkit-transform: scale(1.5); |
731 | transform: scale(1.5); |
732 | opacity: 1; |
733 | } |
734 | 100% { |
735 | -webkit-transform: scale(1); |
736 | transform: scale(1); |
737 | opacity: 0; |
738 | } |
739 | } |
740 | |
741 | @keyframes load { |
742 | 0% { |
743 | -webkit-transform: scale(0); |
744 | transform: scale(0); |
745 | opacity: 0.0; |
746 | } |
747 | 50% { |
748 | -webkit-transform: scale(1.5); |
749 | transform: scale(1.5); |
750 | opacity: 1; |
751 | } |
752 | 100% { |
753 | -webkit-transform: scale(1); |
754 | transform: scale(1); |
755 | opacity: 0; |
756 | } |
757 | } |
758 | |
759 | @media only screen and (min-width: 360px) and (max-width: 399px) { |
760 | .chat { |
761 | width: 275px; |
762 | } |
763 | .chat_field { |
764 | width: 50%; |
765 | } |
766 | } |
767 | |
768 | @media only screen and (min-width: 400px) and (max-width: 1023px) { |
769 | |
770 | .chat_field { |
771 | width: 50%;/*65%;*/ |
772 | } |
773 | } |
774 | |
775 | @media only screen and (min-width: 300px) and (max-width: 767px) { |
776 | .chatbot .chat-box { |
777 | bottom: 15px; |
778 | right: 10px; |
779 | } |
780 | .chat .chat_converse .chat_msg_item { |
781 | font-size: 15px; |
782 | line-height: 20px; |
783 | } |
784 | .chat-btn { |
785 | right: 10px; |
786 | bottom: 50px; |
787 | } |
788 | .chat { |
789 | width: 300px; |
790 | bottom: 50px; |
791 | } |
792 | |
793 | } |
794 | |
795 | |
796 | /* safari fixes */ |
797 | |
798 | @media (min-width: 375px) and (max-width: 812px) { |
799 | .chat_converse { |
800 | height: 280px; |
801 | max-height: 280px; |
802 | } |
803 | .chat-icon { |
804 | |
805 | width: 90px!important; |
806 | height: 90px!important; |
807 | } |
808 | |
809 | .chat-icon button { |
810 | margin-top: 17px; |
811 | margin-left: -47px; |
812 | font-size: 48px!important; |
813 | } |
814 | /* Shift comment icon on the left a bit */ |
815 | /*.chat-icon button.fa-comment-dots { |
816 | margin: 0 0 0 -5px !important; |
817 | }*/ |
818 | } |
819 | |
820 | @media (min-width: 768px) and (max-width: 1024px) { |
821 | .chat-icon { |
822 | |
823 | width: 90px!important; |
824 | height: 90px!important; |
825 | } |
826 | |
827 | .chat-icon button { |
828 | margin-top: 17px; |
829 | margin-left: -47px; |
830 | font-size: 48px!important; |
831 | } |
832 | |
833 | } |
834 | |
835 | .footer-bottom ul { |
836 | list-style: none; |
837 | padding: 0px 15px 10px; |
838 | margin: 0; |
839 | display: flex; |
840 | align-items: center; |
841 | } |
842 | |
843 | .footer-bottom ul li { |
844 | display: inline; |
845 | } |
846 | |
847 | .footer-bottom ul li a { |
848 | font-size: 14px; |
849 | width: auto; |
850 | height: auto; |
851 | } |
852 | |
853 | .footer-bottom ul li.powered-by { |
854 | font-size: 12px; |
855 | color: #999999; |
856 | } |
857 | .footer-bottom ul li.powered-by img { |
858 | width: 35px; |
859 | margin: -6px 0px 0px 4px; |
860 | } |
861 | .footer-bottom ul li.powered-by a { |
862 | margin: 0; |
863 | } |
864 | |
865 | .footer-bottom ul li a.play-icon i { |
866 | color: #118bf1; |
867 | } |
868 | |
869 | /* Make the icon link position relative*/ |
870 | .chat-icon { |
871 | position: relative; |
872 | } |
873 | |
874 | /* Make the icon link position absolute and position it in center */ |
875 | .chat-icon button { |
876 | position: absolute; |
877 | top: 50%; |
878 | left: 50%; |
879 | transform: translate(-50%, -50%); |
880 | margin: 0 !important; |
881 | } |
882 | |
883 | /* smaller heading on mobile */ |
884 | @media (max-width: 614px) { |
885 | .chat_header h2 { |
886 | font-size: 16px; |
887 | } |
888 | } |
889 | |
890 | /* Header Dropdown */ |
891 | .head-dropdown { |
892 | display: inline-block; |
893 | position: relative; |
894 | } |
895 | |
896 | .head-button { |
897 | border-radius: 50px; |
898 | cursor: pointer; |
899 | width: 40px; |
900 | height: 40px; |
901 | line-height: 40px; |
902 | transition: 0.3s all ease-in; |
903 | font-size: 19px; |
904 | display: flex; |
905 | align-items: center; |
906 | justify-content: center; |
907 | } |
908 | |
909 | .head-button:hover { |
910 | background-color: rgba(0, 36, 92, 0.16); |
911 | } |
912 | |
913 | |
914 | .head-input { |
915 | display: none; |
916 | } |
917 | |
918 | .head-menu { |
919 | position: absolute; |
920 | top: 100%; |
921 | right: -33px; |
922 | border-radius: 10px; |
923 | padding: 10px; |
924 | /* margin: 5px 0px 0px -140px; */ |
925 | box-shadow: rgb(198 198 198 / 50%) 0px 4px 24px; |
926 | background-color: #ffffff; |
927 | list-style-type: none; |
928 | z-index: 99999; |
929 | } |
930 | |
931 | .head-input + .head-menu { |
932 | display: none; |
933 | } |
934 | |
935 | .head-input:checked + .head-menu { |
936 | display: block; |
937 | } |
938 | |
939 | .head-menu li { |
940 | padding: 8px 20px; |
941 | cursor: pointer; |
942 | white-space: nowrap; |
943 | color: #000; |
944 | font-weight: normal; |
945 | text-align: left; |
946 | } |
947 | |
948 | .head-menu li:hover { |
949 | background-color: #f6f6f6; |
950 | } |
951 | |
952 | .head-menu li a { |
953 | display: block; |
954 | margin: -10px -20px; |
955 | padding: 10px 20px; |
956 | } |
957 | |
958 | .head-menu li.divider{ |
959 | padding: 0; |
960 | border-bottom: 1px solid #cccccc; |
961 | } |
962 | |
963 | .head-menu li i { |
964 | margin-right: 10px; |
965 | color: #999; |
966 | } |
967 | |
968 | .head-menu li i.fa-star { |
969 | color: #fbd701; |
970 | } |
971 | |
972 | |
973 | /*Chatbot Questions*/ |
974 | |
975 | .bot-questions { |
976 | transition: transform 0.2s ease 0s, margin 0.2s ease 0s; |
977 | /* background: rgb(240, 242, 247);*/ |
978 | color: #000; |
979 | clear: both; |
980 | max-width: 75%; |
981 | border-radius: 20px; |
982 | margin-left: 60px; |
983 | text-align: left; |
984 | font-size: 17px; |
985 | /* border: 1px solid rgb(235, 238, 240); */ |
986 | margin-bottom: 20px; |
987 | } |
988 | .bot-questions .question-title h4 { |
989 | font-size: 17px; |
990 | font-weight: normal; |
991 | color: #000; |
992 | padding: 8px 15px; |
993 | margin: 0; |
994 | background: rgb(240, 242, 247); |
995 | font-family: 'Roboto', sans-serif; |
996 | border-radius: 8px; |
997 | } |
998 | .bot-questions .all-options { |
999 | background: #fff; |
1000 | border-radius: 20px; |
1001 | border-top-left-radius: 0; |
1002 | border-top-right-radius: 0; |
1003 | margin-top: 15px; |
1004 | } |
1005 | .bot-questions .all-options .option-single { |
1006 | font-size: 16px; |
1007 | font-weight: normal; |
1008 | display: block; |
1009 | color: rgb(0, 125, 252); |
1010 | text-decoration: none; |
1011 | padding: 5px 15px; |
1012 | border: 1px solid rgb(0, 125, 252); |
1013 | margin: 10px 0px; |
1014 | border-radius: 8px; |
1015 | } |
1016 | .bot-questions .all-options .option-single:hover { |
1017 | text-decoration: underline; |
1018 | background: #eef9ff |
1019 | } |
1020 | |
1021 | /* Single questions */ |
1022 | .single-choice { |
1023 | background: transparent !important; |
1024 | text-align: right; |
1025 | } |
1026 | .single-choice .chatbot-choice-button { |
1027 | font-size: 15px; |
1028 | padding: 8px 16px; |
1029 | cursor: pointer; |
1030 | border: 1px solid rgb(0, 125, 252); |
1031 | border-radius: 20px; |
1032 | margin: 3px; |
1033 | background: transparent; |
1034 | color: rgb(0, 125, 252); |
1035 | } |
1036 | .single-choice .chatbot-choice-button:hover { |
1037 | text-decoration: underline; |
1038 | } |
1039 | .chat-box .btn-ok { |
1040 | background: #1677ec; |
1041 | border: none; |
1042 | color: #fff; |
1043 | padding: 5px 15px; |
1044 | border-radius: 20px; |
1045 | margin: 10px 0px; |
1046 | } |
1047 | .chat-box .btn-ok:focus { |
1048 | outline: none; |
1049 | } |
1050 | |
1051 | /* Bot Reload */ |
1052 | |
1053 | .bot-restart { |
1054 | position: absolute; |
1055 | right: 10px; |
1056 | top: 55px; |
1057 | z-index: 999; |
1058 | } |
1059 | .bot-restart button { |
1060 | width: 30px; |
1061 | height: 30px; |
1062 | border: none; |
1063 | background: #cfefff; |
1064 | border-radius: 5px; |
1065 | padding: 0; |
1066 | color: #0ba5f7; |
1067 | cursor: pointer; |
1068 | } |
1069 | |
1070 | /* hide initially? */ |
1071 | #chat_telephone, .iti { display: none; } |
1072 | |
1073 | /* Country Flag */ |
1074 | .chatbot .iti #chat_telephone { |
1075 | border: none; |
1076 | } |
1077 | .chatbot .iti #chat_telephone:focus { |
1078 | border: none; |
1079 | outline: none; |
1080 | } |
1081 | .chatbot .iti__selected-flag { |
1082 | background-color: transparent !important; |
1083 | } |
1084 | .chatbot .iti { |
1085 | padding: 10px; |
1086 | z-index: 99999; |
1087 | } |
1088 | .chatbot .iti:focus, .chatbot .iti:active { |
1089 | outline: none; |
1090 | border: none; |
1091 | } |
1092 | .chatbot .iti__flag-container:focus, .iti__selected-flag:focus { |
1093 | border: none; |
1094 | outline: none; |
1095 | } |
1096 | |
1097 | /*Emoji Styles |
1098 | .emoji-picker__wrapper { |
1099 | width: 400px; |
1100 | z-index: 99999; |
1101 | left: 140px !important; |
1102 | border: none; |
1103 | bottom: 40px !important; |
1104 | } |
1105 | .emoji-picker__wrapper .emoji-picker.light { |
1106 | width: 100%; |
1107 | height: 300px; |
1108 | border: none; |
1109 | } |
1110 | */ |
1111 | |
1112 | .emoji-picker.light { |
1113 | width: 400px; |
1114 | margin: 10px 0px 0px 90px; |
1115 | border: none; |
1116 | height: 360px; |
1117 | max-height: 350px; |
1118 | background: #fff; |
1119 | } |
1120 | .emoji-picker__wrapper { |
1121 | z-index: 99999; |
1122 | width: 300px; |
1123 | right: 0px !important; |
1124 | left: 0px !important; |
1125 | |
1126 | } |
Began life as a copy of #1029713
Travelled to 4 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
Snippet ID: | #1030643 |
Snippet name: | style.css for FIA Bot |
Eternal ID of this version: | #1030643/18 |
Text MD5: | d537051da8ff7193448a07fa422ed59c |
Author: | stefan |
Category: | javax / css |
Type: | Document |
Public (visible to everyone): | Yes |
Archived (hidden from active list): | No |
Created/modified: | 2021-02-24 04:08:08 |
Source code size: | 22878 bytes / 1126 lines |
Pitched / IR pitched: | No / No |
Views / Downloads: | 220 / 405 |
Version history: | 17 change(s) |
Referenced in: | [show references] |