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