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