Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

629
LINES

< > BotCompany Repo | #1029323 // style.css for Infinici

Document

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: #87cdce;
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  
}

Author comment

Began life as a copy of #1028951

download  show line numbers   

Travelled to 7 computer(s): bhatertpkbcr, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tvejysmllsmz, vouqrxazstgt, xrpafgyirdlv

No comments. add comment

Snippet ID: #1029323
Snippet name: style.css for Infinici
Eternal ID of this version: #1029323/3
Text MD5: 42fabd1a9ecee1cccd2edfbb0f1508ee
Author: stefan
Category: javax / css
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-07-30 22:45:13
Source code size: 12364 bytes / 629 lines
Pitched / IR pitched: No / No
Views / Downloads: 133 / 74
Version history: 2 change(s)
Referenced in: [show references]