1 | #screenreadertrick {
|
2 | position: absolute !important; /* Outside the DOM flow */ |
3 | height: 1px; width: 1px; /* Nearly collapsed */ |
4 | overflow: hidden; |
5 | clip: rect(1px 1px 1px 1px); /* IE 7+ only support clip without commas */ |
6 | clip: rect(1px, 1px, 1px, 1px); /* All other browsers */ |
7 | } |
8 | |
9 | /*Chatbot Starts*/ |
10 | |
11 | .chat-icon button {
|
12 | font-size: 32px; |
13 | line-height: 55px; |
14 | -webkit-transition: all .7s ease-out; |
15 | -moz-transition: all .7s ease-in-out; |
16 | transition: all .7s ease-in-out; |
17 | color: #fff; |
18 | background: transparent; |
19 | border: none; |
20 | /*width: 50px;*/ |
21 | height: 50px; |
22 | line-height: 50px; |
23 | border-radius: 50px; |
24 | } |
25 | |
26 | .chat-bottom div button {
|
27 | color: #343434; |
28 | transition: 0.4s all ease-in; |
29 | cursor: pointer; |
30 | font-size: 18px; |
31 | } |
32 | |
33 | button.fa-paper-plane {
|
34 | border: none; |
35 | padding: 0; |
36 | background: none; |
37 | height: 30px; |
38 | } |
39 | |
40 | .chatbot {
|
41 | font-family: 'Poppins', sans-serif; |
42 | /*background-color: #f4faff; |
43 | height: 100vh; |
44 | display: flex; |
45 | justify-content: center; |
46 | align-items: center;*/ |
47 | } |
48 | |
49 | .chatbot .chat-box {
|
50 | bottom: 20px; |
51 | position: fixed; |
52 | margin: 1em; |
53 | right: 0; |
54 | z-index: 10998; |
55 | } |
56 | |
57 | .chat_converse a:link, .chat_converse a:visited, .chat_converse a:hover, .chat_converse a:active {
|
58 | text-decoration: underline !important; |
59 | } |
60 | |
61 | .chat-icon {
|
62 | /* latest fixes */ |
63 | /*display: block;*/ |
64 | display: flex; |
65 | align-items: center; |
66 | justify-content: center; |
67 | |
68 | width: 56px; |
69 | height: 56px; |
70 | border-radius: 50%; |
71 | text-align: center; |
72 | color: #f0f0f0; |
73 | margin: 25px auto 0; |
74 | box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); |
75 | cursor: pointer; |
76 | -webkit-transition: all .1s ease-out; |
77 | transition: all .1s ease-out; |
78 | position: relative; |
79 | z-index: 10998; |
80 | overflow: hidden; |
81 | background: #1B9AEE; |
82 | } |
83 | |
84 | .chat-icon i {
|
85 | font-size: 2em; |
86 | line-height: 55px; |
87 | -webkit-transition: all .2s ease-out; |
88 | -webkit-transition: all .2s ease-in-out; |
89 | transition: all .2s ease-in-out; |
90 | } |
91 | |
92 | /*Chatbox*/ |
93 | |
94 | .chat {
|
95 | position: fixed; |
96 | right: 85px; |
97 | bottom: 20px; |
98 | width: 400px; |
99 | font-size: 14px; |
100 | line-height: 25px; |
101 | font-weight: 500; |
102 | -webkit-font-smoothing: antialiased; |
103 | font-smoothing: antialiased; |
104 | opacity: 0; |
105 | display: none; /* XXX */ |
106 | box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22); |
107 | border-radius: 10px; |
108 | -webkit-transition: all .2s ease-out; |
109 | -webkit-transition: all .2s ease-in-out; |
110 | transition: all .2s ease-in-out; |
111 | } |
112 | |
113 | .chat_fullscreen {
|
114 | position: fixed; |
115 | right: 0px; |
116 | bottom: 0px; |
117 | top: 0px; |
118 | } |
119 | |
120 | .chat_header {
|
121 | text-align: center; |
122 | font-weight: 500; |
123 | color: #fff; |
124 | height: 55px; |
125 | background: #1B9AEE; |
126 | border-top-left-radius: 10px; |
127 | border-top-right-radius: 10px; |
128 | display: flex; |
129 | align-items: center; |
130 | justify-content: center; |
131 | } |
132 | |
133 | .chat_header h3 {
|
134 | font-size: 2.5em; |
135 | margin: 0; |
136 | } |
137 | |
138 | .chat_header .span {
|
139 | float: right; |
140 | } |
141 | |
142 | .chat.is-visible {
|
143 | display: block; /* XXX */ |
144 | opacity: 1; |
145 | -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); |
146 | animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1); |
147 | z-index: 9; |
148 | } |
149 | |
150 | .is-hide {
|
151 | opacity: 0 |
152 | } |
153 | |
154 | .chat_field {
|
155 | position: relative; |
156 | margin: 5px 0 5px 0; |
157 | width: 50%; |
158 | font-size: 14px; |
159 | line-height: 30px; |
160 | font-weight: 500; |
161 | color: #4b4b4b; |
162 | -webkit-font-smoothing: antialiased; |
163 | font-smoothing: antialiased; |
164 | border: 1px solid black !important; |
165 | outline: none; |
166 | display: inline-block; |
167 | } |
168 | |
169 | .chat_field.chat_message {
|
170 | height: 30px; |
171 | resize: none; |
172 | font-size: 14px; |
173 | line-height: 20px; |
174 | font-weight: 400; |
175 | } |
176 | |
177 | .chat-bottom {
|
178 | width: 100%; |
179 | display: inline-block; |
180 | text-align: center; |
181 | background: #fff; |
182 | border-top: 1px solid #eee; |
183 | border-bottom-right-radius: 10px; |
184 | border-bottom-left-radius: 10px; |
185 | } |
186 | |
187 | .chat-bottom {
|
188 | display: flex; |
189 | justify-content: space-between; |
190 | padding: 0 10px 0 20px; |
191 | } |
192 | |
193 | .chat-bottom .camera-icon {
|
194 | float: left; |
195 | background: rgba(0, 0, 0, 0); |
196 | } |
197 | |
198 | .chat-bottom .send-icon {
|
199 | display: inline-block; |
200 | width: 35px; |
201 | height: 35px; |
202 | box-shadow: none; |
203 | margin: 5px; |
204 | } |
205 | |
206 | .chat-bottom a i {
|
207 | font-size: 1.6em; |
208 | line-height: 35px; |
209 | color: #bbb; |
210 | } |
211 | |
212 | .chat-bottom a i:hover {
|
213 | color: #1B9AEE; |
214 | } |
215 | |
216 | .chat-bottom div button:hover {
|
217 | color: #f16e00; |
218 | } |
219 | |
220 | .chat_converse:focus, button.fas:focus, .chat_message:focus {
|
221 | outline: .2rem solid #F8630D; |
222 | } |
223 | |
224 | .chat-icon button:focus {
|
225 | outline: none !important; |
226 | box-shadow: 0 0 3pt 2pt #FFFFFF; |
227 | } |
228 | |
229 | .chat-icon {
|
230 | padding: 3px; |
231 | } |
232 | |
233 | .chat_converse {
|
234 | position: relative; |
235 | background: #fff; |
236 | margin: 0; /*margin: 6px 0 0px 0;*/ |
237 | height: 300px; |
238 | min-height: 0; |
239 | font-size: 14px; |
240 | line-height: 25px; |
241 | overflow-y: auto; |
242 | width: 100%; |
243 | float: right; |
244 | padding-bottom: 50px; |
245 | } |
246 | |
247 | .chat .chat_converse .chat_msg_item {
|
248 | position: relative; |
249 | margin: 8px 0 15px 0; |
250 | padding: 8px 10px; |
251 | max-width: 75%; |
252 | display: block; |
253 | word-wrap: break-word; |
254 | border-radius: 3px; |
255 | -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); |
256 | animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); |
257 | clear: both; |
258 | z-index: 10999; |
259 | } |
260 | |
261 | .chat_converse .status {
|
262 | margin: 45px -50px 0 0; |
263 | float: right; |
264 | font-size: 11px; |
265 | opacity: 0.75; |
266 | } |
267 | |
268 | . chat_converse .status2 {
|
269 | margin: -10px 20px 0 0; |
270 | float: right; |
271 | display: block; |
272 | font-size: 11px; |
273 | opacity: 0.75; |
274 | clear: both; |
275 | } |
276 | |
277 | .chat .chat_converse .chat_msg_item .chat_avatar {
|
278 | position: absolute; |
279 | top: 0; |
280 | } |
281 | |
282 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
|
283 | left: -52px; |
284 | background: rgba(0, 0, 0, 0.03); |
285 | } |
286 | |
287 | .chat .chat_converse .chat_msg_item .chat_avatar, |
288 | .chat_avatar img {
|
289 | width: 40px; |
290 | height: 40px; |
291 | text-align: center; |
292 | border-radius: 50%; |
293 | } |
294 | |
295 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin {
|
296 | margin-left: 60px; |
297 | float: left; |
298 | background: rgba(0, 0, 0, 0.03); |
299 | color: #666; |
300 | } |
301 | |
302 | .chat .chat_converse .chat_msg_item.chat_msg_item_user {
|
303 | margin-right: 20px; |
304 | float: right; |
305 | background: #0079D2; |
306 | color: #eceff1; |
307 | } |
308 | |
309 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
|
310 | content: ''; |
311 | position: absolute; |
312 | top: 15px; |
313 | left: -12px; |
314 | z-index: 10998; |
315 | border: 6px solid transparent; |
316 | border-right-color: rgba(255, 255, 255, .4); |
317 | } |
318 | |
319 | #otherSideTyping {
|
320 | background-color: #fff; |
321 | margin-left: 30px; |
322 | display: flex; |
323 | width: 100%; |
324 | align-items: center; |
325 | } |
326 | |
327 | #otherSideTyping h4 {
|
328 | margin-right: 10px; |
329 | margin-left: 15px; |
330 | } |
331 | |
332 | #otherSideTyping .dot {
|
333 | display: inline-block; |
334 | width: 12px; |
335 | height: 12px; |
336 | border-radius: 50%; |
337 | margin-right: 3px; |
338 | background: #303131; |
339 | animation: wave 1.3s linear infinite; |
340 | } |
341 | |
342 | #otherSideTyping .dot:nth-child(2) {
|
343 | animation-delay: -1.1s; |
344 | } |
345 | |
346 | #otherSideTyping .dot:nth-child(3) {
|
347 | animation-delay: -0.9s; |
348 | } |
349 | |
350 | .chat_username {
|
351 | clear: both; |
352 | } |
353 | .chat_username p {
|
354 | position: relative; |
355 | float: right; |
356 | margin: 0px 20px -5px 0px; |
357 | font-size: 12px; |
358 | color: #ccc; |
359 | } |
360 | |
361 | .chat_botname {
|
362 | clear: both; |
363 | } |
364 | |
365 | .chat_botname p {
|
366 | position: relative; |
367 | float: left; |
368 | margin: 0px 0px -6px 60px; |
369 | font-size: 12px; |
370 | color: /*#1B9AEE*/#105478; |
371 | } |
372 | |
373 | @keyframes wave {
|
374 | 0%, |
375 | 60%, |
376 | 100% {
|
377 | transform: initial; |
378 | } |
379 | 30% {
|
380 | transform: translateY(-15px); |
381 | } |
382 | } |
383 | |
384 | |
385 | /*Chatbox scrollbar*/ |
386 | ::-webkit-scrollbar {
|
387 | width: 6px; |
388 | } |
389 | |
390 | ::-webkit-scrollbar-track {
|
391 | border-radius: 0; |
392 | } |
393 | |
394 | ::-webkit-scrollbar-thumb {
|
395 | margin: 2px; |
396 | border-radius: 10px; |
397 | background: rgba(0, 0, 0, 0.2); |
398 | } |
399 | |
400 | |
401 | /*Element state*/ |
402 | .is-active {
|
403 | -webkit-transform: rotate(180deg); |
404 | transform: rotate(180deg); |
405 | -webkit-transition: all 1s ease-in-out; |
406 | transition: all 1s ease-in-out; |
407 | } |
408 | |
409 | .is-float {
|
410 | box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32); |
411 | } |
412 | |
413 | |
414 | /*Animation*/ |
415 | |
416 | @-webkit-keyframes zoomIn {
|
417 | 0% {
|
418 | -webkit-transform: scale(0); |
419 | transform: scale(0); |
420 | opacity: 0.0; |
421 | } |
422 | 100% {
|
423 | -webkit-transform: scale(1); |
424 | transform: scale(1); |
425 | opacity: 1; |
426 | } |
427 | } |
428 | |
429 | @keyframes zoomIn {
|
430 | 0% {
|
431 | -webkit-transform: scale(0); |
432 | transform: scale(0); |
433 | opacity: 0.0; |
434 | } |
435 | 100% {
|
436 | -webkit-transform: scale(1); |
437 | transform: scale(1); |
438 | opacity: 1; |
439 | } |
440 | } |
441 | |
442 | @-webkit-keyframes load {
|
443 | 0% {
|
444 | -webkit-transform: scale(0); |
445 | transform: scale(0); |
446 | opacity: 0.0; |
447 | } |
448 | 50% {
|
449 | -webkit-transform: scale(1.5); |
450 | transform: scale(1.5); |
451 | opacity: 1; |
452 | } |
453 | 100% {
|
454 | -webkit-transform: scale(1); |
455 | transform: scale(1); |
456 | opacity: 0; |
457 | } |
458 | } |
459 | |
460 | @keyframes load {
|
461 | 0% {
|
462 | -webkit-transform: scale(0); |
463 | transform: scale(0); |
464 | opacity: 0.0; |
465 | } |
466 | 50% {
|
467 | -webkit-transform: scale(1.5); |
468 | transform: scale(1.5); |
469 | opacity: 1; |
470 | } |
471 | 100% {
|
472 | -webkit-transform: scale(1); |
473 | transform: scale(1); |
474 | opacity: 0; |
475 | } |
476 | } |
477 | |
478 | @media only screen and (min-width: 360px) {
|
479 | .chat {
|
480 | width: 275px; |
481 | } |
482 | .chat_field {
|
483 | width: 80%;/*65%;*/ |
484 | } |
485 | } |
486 | |
487 | @media only screen and (min-width: 400px) {
|
488 | .chat {
|
489 | width: 300px; |
490 | } |
491 | } |
492 | |
493 | /* TABLETS PORTRAIT */ |
494 | |
495 | @media only screen and (min-width: 768px) {
|
496 | .chat {
|
497 | width: 300px; |
498 | } |
499 | .chat_field {
|
500 | width: 80%;/*65%;*/ |
501 | } |
502 | } |
503 | |
504 | |
505 | /* TABLET LANDSCAPE / DESKTOP */ |
506 | |
507 | @media only screen and (min-width: 1024px) {
|
508 | .chat {
|
509 | width: 300px; |
510 | } |
511 | .chat_field {
|
512 | width: 80%; |
513 | } |
514 | |
515 | } |
516 | |
517 | /* safari fixes */ |
518 | |
519 | @media (min-width: 375px) and (max-width: 812px){
|
520 | /* .chat-icon {
|
521 | |
522 | width: 90px!important; |
523 | height: 90px!important; |
524 | }*/ |
525 | |
526 | /*.chat-icon button {
|
527 | margin-top: 17px; |
528 | margin-left: -47px; |
529 | font-size: 48px!important; |
530 | }*/ |
531 | /* Shift comment icon on the left a bit */ |
532 | /*.chat-icon button.fa-comment-dots {
|
533 | margin: 0 0 0 -5px !important; |
534 | }*/ |
535 | } |
536 | |
537 | @media (min-width: 768px) and (max-width: 1024px){
|
538 | /*.chat-icon {
|
539 | |
540 | width: 90px!important; |
541 | height: 90px!important; |
542 | }*/ |
543 | |
544 | /*.chat-icon button {
|
545 | margin-top: 17px; |
546 | margin-left: -47px; |
547 | font-size: 48px!important; |
548 | }*/ |
549 | |
550 | } |
551 | |
552 | |
553 | /* Make the icon link position relative*/ |
554 | .chat-icon {
|
555 | position: relative; |
556 | } |
557 | |
558 | /* Make the icon link position absolute and position it in center */ |
559 | .chat-icon button {
|
560 | position: absolute; |
561 | top: 50%; |
562 | left: 50%; |
563 | transform: translate(-50%, -50%); |
564 | margin: 0 !important; |
565 | cursor: pointer; |
566 | } |
567 | |
568 | .chat-contact {
|
569 | position: absolute; |
570 | right: 80px; |
571 | top: 30px; |
572 | white-space: nowrap; |
573 | background: #1b9aee; |
574 | color: #fff; |
575 | border-radius: 50px; |
576 | height: 50px; |
577 | min-width: 125px; |
578 | text-align: center; |
579 | line-height: 50px; |
580 | border: none; |
581 | font-size: 16px; |
582 | font-weight: 600; |
583 | cursor: pointer; |
584 | box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28); |
585 | padding: 0px 25px; |
586 | } |
587 | |
588 | .chat-contact .for-desk {
|
589 | display: inline-block; |
590 | } |
591 | .chat-contact .for-mobile {
|
592 | display: none; |
593 | } |
594 | |
595 | @media only screen and (max-width: 767px) {
|
596 | .chat-contact .for-desk {
|
597 | display: none; |
598 | } |
599 | .chat-contact .for-mobile {
|
600 | display: inline-block; |
601 | } |
602 | } |
Began life as a copy of #1028971
Travelled to 5 computer(s): bhatertpkbcr, djztyncnmsck, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1030241 |
| Snippet name: | style.css for Adaptive Chat + text opener [LIVE] |
| Eternal ID of this version: | #1030241/16 |
| Text MD5: | db85d3b0130159ddfc2933981607ea2b |
| Author: | husain |
| Category: | javax / css |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2020-11-28 03:47:17 |
| Source code size: | 11851 bytes / 602 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 210 / 2371 |
| Version history: | 15 change(s) |
| Referenced in: | [show references] |