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 | } |
148 | |
149 | .is-hide {
|
150 | opacity: 0 |
151 | } |
152 | |
153 | .chat_field {
|
154 | position: relative; |
155 | margin: 5px 0 5px 0; |
156 | width: 50%; |
157 | font-size: 14px; |
158 | line-height: 30px; |
159 | font-weight: 500; |
160 | color: #4b4b4b; |
161 | -webkit-font-smoothing: antialiased; |
162 | font-smoothing: antialiased; |
163 | border: 1px solid black !important; |
164 | outline: none; |
165 | display: inline-block; |
166 | } |
167 | |
168 | .chat_field.chat_message {
|
169 | height: 30px; |
170 | resize: none; |
171 | font-size: 14px; |
172 | line-height: 20px; |
173 | font-weight: 400; |
174 | } |
175 | |
176 | .chat-bottom {
|
177 | width: 100%; |
178 | display: inline-block; |
179 | text-align: center; |
180 | background: #fff; |
181 | border-top: 1px solid #eee; |
182 | border-bottom-right-radius: 10px; |
183 | border-bottom-left-radius: 10px; |
184 | } |
185 | |
186 | .chat-bottom {
|
187 | display: flex; |
188 | justify-content: space-between; |
189 | padding: 0 10px 0 20px; |
190 | } |
191 | |
192 | .chat-bottom .camera-icon {
|
193 | float: left; |
194 | background: rgba(0, 0, 0, 0); |
195 | } |
196 | |
197 | .chat-bottom .send-icon {
|
198 | display: inline-block; |
199 | width: 35px; |
200 | height: 35px; |
201 | box-shadow: none; |
202 | margin: 5px; |
203 | } |
204 | |
205 | .chat-bottom a i {
|
206 | font-size: 1.6em; |
207 | line-height: 35px; |
208 | color: #bbb; |
209 | } |
210 | |
211 | .chat-bottom a i:hover {
|
212 | color: #1B9AEE; |
213 | } |
214 | |
215 | .chat-bottom div button:hover {
|
216 | color: #f16e00; |
217 | } |
218 | |
219 | .chat_converse:focus, button.fas:focus, .chat_message:focus {
|
220 | outline: .2rem solid #F8630D; |
221 | } |
222 | |
223 | .chat-icon button:focus {
|
224 | outline: none !important; |
225 | box-shadow: 0 0 3pt 2pt #FFFFFF; |
226 | } |
227 | |
228 | .chat-icon {
|
229 | padding: 3px; |
230 | } |
231 | |
232 | .chat_converse {
|
233 | position: relative; |
234 | background: #fff; |
235 | margin: 0; /*margin: 6px 0 0px 0;*/ |
236 | height: 300px; |
237 | min-height: 0; |
238 | font-size: 14px; |
239 | line-height: 25px; |
240 | overflow-y: auto; |
241 | width: 100%; |
242 | float: right; |
243 | padding-bottom: 50px; |
244 | } |
245 | |
246 | .chat .chat_converse .chat_msg_item {
|
247 | position: relative; |
248 | margin: 8px 0 15px 0; |
249 | padding: 8px 10px; |
250 | max-width: 75%; |
251 | display: block; |
252 | word-wrap: break-word; |
253 | border-radius: 3px; |
254 | -webkit-animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); |
255 | animation: zoomIn .5s cubic-bezier(.42, 0, .58, 1); |
256 | clear: both; |
257 | z-index: 10999; |
258 | } |
259 | |
260 | .chat_converse .status {
|
261 | margin: 45px -50px 0 0; |
262 | float: right; |
263 | font-size: 11px; |
264 | opacity: 0.75; |
265 | } |
266 | |
267 | . chat_converse .status2 {
|
268 | margin: -10px 20px 0 0; |
269 | float: right; |
270 | display: block; |
271 | font-size: 11px; |
272 | opacity: 0.75; |
273 | clear: both; |
274 | } |
275 | |
276 | .chat .chat_converse .chat_msg_item .chat_avatar {
|
277 | position: absolute; |
278 | top: 0; |
279 | } |
280 | |
281 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar {
|
282 | left: -52px; |
283 | background: rgba(0, 0, 0, 0.03); |
284 | } |
285 | |
286 | .chat .chat_converse .chat_msg_item .chat_avatar, |
287 | .chat_avatar img {
|
288 | width: 40px; |
289 | height: 40px; |
290 | text-align: center; |
291 | border-radius: 50%; |
292 | } |
293 | |
294 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin {
|
295 | margin-left: 60px; |
296 | float: left; |
297 | background: rgba(0, 0, 0, 0.03); |
298 | color: #666; |
299 | } |
300 | |
301 | .chat .chat_converse .chat_msg_item.chat_msg_item_user {
|
302 | margin-right: 20px; |
303 | float: right; |
304 | background: #0079D2; |
305 | color: #eceff1; |
306 | } |
307 | |
308 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin:before {
|
309 | content: ''; |
310 | position: absolute; |
311 | top: 15px; |
312 | left: -12px; |
313 | z-index: 10998; |
314 | border: 6px solid transparent; |
315 | border-right-color: rgba(255, 255, 255, .4); |
316 | } |
317 | |
318 | #otherSideTyping {
|
319 | background-color: #fff; |
320 | margin-left: 30px; |
321 | display: flex; |
322 | width: 100%; |
323 | align-items: center; |
324 | } |
325 | |
326 | #otherSideTyping h4 {
|
327 | margin-right: 10px; |
328 | margin-left: 15px; |
329 | } |
330 | |
331 | #otherSideTyping .dot {
|
332 | display: inline-block; |
333 | width: 12px; |
334 | height: 12px; |
335 | border-radius: 50%; |
336 | margin-right: 3px; |
337 | background: #303131; |
338 | animation: wave 1.3s linear infinite; |
339 | } |
340 | |
341 | #otherSideTyping .dot:nth-child(2) {
|
342 | animation-delay: -1.1s; |
343 | } |
344 | |
345 | #otherSideTyping .dot:nth-child(3) {
|
346 | animation-delay: -0.9s; |
347 | } |
348 | |
349 | .chat_username {
|
350 | clear: both; |
351 | } |
352 | .chat_username p {
|
353 | position: relative; |
354 | float: right; |
355 | margin: 0px 20px -5px 0px; |
356 | font-size: 12px; |
357 | color: #ccc; |
358 | } |
359 | |
360 | .chat_botname {
|
361 | clear: both; |
362 | } |
363 | |
364 | .chat_botname p {
|
365 | position: relative; |
366 | float: left; |
367 | margin: 0px 0px -6px 60px; |
368 | font-size: 12px; |
369 | color: /*#1B9AEE*/#105478; |
370 | } |
371 | |
372 | @keyframes wave {
|
373 | 0%, |
374 | 60%, |
375 | 100% {
|
376 | transform: initial; |
377 | } |
378 | 30% {
|
379 | transform: translateY(-15px); |
380 | } |
381 | } |
382 | |
383 | |
384 | /*Chatbox scrollbar*/ |
385 | ::-webkit-scrollbar {
|
386 | width: 6px; |
387 | } |
388 | |
389 | ::-webkit-scrollbar-track {
|
390 | border-radius: 0; |
391 | } |
392 | |
393 | ::-webkit-scrollbar-thumb {
|
394 | margin: 2px; |
395 | border-radius: 10px; |
396 | background: rgba(0, 0, 0, 0.2); |
397 | } |
398 | |
399 | |
400 | /*Element state*/ |
401 | .is-active {
|
402 | -webkit-transform: rotate(180deg); |
403 | transform: rotate(180deg); |
404 | -webkit-transition: all 1s ease-in-out; |
405 | transition: all 1s ease-in-out; |
406 | } |
407 | |
408 | .is-float {
|
409 | box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32); |
410 | } |
411 | |
412 | |
413 | /*Animation*/ |
414 | |
415 | @-webkit-keyframes zoomIn {
|
416 | 0% {
|
417 | -webkit-transform: scale(0); |
418 | transform: scale(0); |
419 | opacity: 0.0; |
420 | } |
421 | 100% {
|
422 | -webkit-transform: scale(1); |
423 | transform: scale(1); |
424 | opacity: 1; |
425 | } |
426 | } |
427 | |
428 | @keyframes zoomIn {
|
429 | 0% {
|
430 | -webkit-transform: scale(0); |
431 | transform: scale(0); |
432 | opacity: 0.0; |
433 | } |
434 | 100% {
|
435 | -webkit-transform: scale(1); |
436 | transform: scale(1); |
437 | opacity: 1; |
438 | } |
439 | } |
440 | |
441 | @-webkit-keyframes load {
|
442 | 0% {
|
443 | -webkit-transform: scale(0); |
444 | transform: scale(0); |
445 | opacity: 0.0; |
446 | } |
447 | 50% {
|
448 | -webkit-transform: scale(1.5); |
449 | transform: scale(1.5); |
450 | opacity: 1; |
451 | } |
452 | 100% {
|
453 | -webkit-transform: scale(1); |
454 | transform: scale(1); |
455 | opacity: 0; |
456 | } |
457 | } |
458 | |
459 | @keyframes load {
|
460 | 0% {
|
461 | -webkit-transform: scale(0); |
462 | transform: scale(0); |
463 | opacity: 0.0; |
464 | } |
465 | 50% {
|
466 | -webkit-transform: scale(1.5); |
467 | transform: scale(1.5); |
468 | opacity: 1; |
469 | } |
470 | 100% {
|
471 | -webkit-transform: scale(1); |
472 | transform: scale(1); |
473 | opacity: 0; |
474 | } |
475 | } |
476 | |
477 | @media only screen and (min-width: 360px) {
|
478 | .chat {
|
479 | width: 275px; |
480 | } |
481 | .chat_field {
|
482 | width: 80%;/*65%;*/ |
483 | } |
484 | } |
485 | |
486 | @media only screen and (min-width: 400px) {
|
487 | .chat {
|
488 | width: 300px; |
489 | } |
490 | } |
491 | |
492 | /* TABLETS PORTRAIT */ |
493 | |
494 | @media only screen and (min-width: 768px) {
|
495 | .chat {
|
496 | width: 300px; |
497 | } |
498 | .chat_field {
|
499 | width: 80%;/*65%;*/ |
500 | } |
501 | } |
502 | |
503 | |
504 | /* TABLET LANDSCAPE / DESKTOP */ |
505 | |
506 | @media only screen and (min-width: 1024px) {
|
507 | .chat {
|
508 | width: 300px; |
509 | } |
510 | .chat_field {
|
511 | width: 80%; |
512 | } |
513 | |
514 | } |
515 | |
516 | /* safari fixes */ |
517 | |
518 | @media (min-width: 375px) and (max-width: 812px){
|
519 | .chat-icon {
|
520 | |
521 | width: 90px!important; |
522 | height: 90px!important; |
523 | } |
524 | |
525 | .chat-icon button {
|
526 | margin-top: 17px; |
527 | margin-left: -47px; |
528 | font-size: 48px!important; |
529 | } |
530 | /* Shift comment icon on the left a bit */ |
531 | /*.chat-icon button.fa-comment-dots {
|
532 | margin: 0 0 0 -5px !important; |
533 | }*/ |
534 | } |
535 | |
536 | @media (min-width: 768px) and (max-width: 1024px){
|
537 | .chat-icon {
|
538 | |
539 | width: 90px!important; |
540 | height: 90px!important; |
541 | } |
542 | |
543 | .chat-icon button {
|
544 | margin-top: 17px; |
545 | margin-left: -47px; |
546 | font-size: 48px!important; |
547 | } |
548 | |
549 | } |
550 | |
551 | |
552 | /* Make the icon link position relative*/ |
553 | .chat-icon {
|
554 | position: relative; |
555 | } |
556 | |
557 | /* Make the icon link position absolute and position it in center */ |
558 | .chat-icon button {
|
559 | position: absolute; |
560 | top: 50%; |
561 | left: 50%; |
562 | transform: translate(-50%, -50%); |
563 | margin: 0 !important; |
564 | } |
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: | #1028971 |
| Snippet name: | style.css for Adaptive Chat [old] |
| Eternal ID of this version: | #1028971/27 |
| Text MD5: | 6ebe6d3ad927319d23391df33dbe76cb |
| Author: | stefan |
| Category: | javax / css |
| Type: | Document |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2020-11-25 15:32:47 |
| Source code size: | 11063 bytes / 564 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 529 / 12395 |
| Version history: | 26 change(s) |
| Referenced in: | [show references] |