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