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

564
LINES

< > BotCompany Repo | #1028971 - style.css for Adaptive Chat

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  
/*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  
}

Author comment

Began life as a copy of #1028274

download  show line numbers   

Travelled to 5 computer(s): bhatertpkbcr, mqqgnosmbjvj, pzhvpgtvlbxg, tvejysmllsmz, xrpafgyirdlv

No comments. add comment

Snippet ID: #1028971
Snippet name: style.css for Adaptive Chat
Eternal ID of this version: #1028971/26
Text MD5: 6ebe6d3ad927319d23391df33dbe76cb
Author: stefan
Category: javax / css
Type: Document
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2020-07-23 17:48:41
Source code size: 11063 bytes / 564 lines
Pitched / IR pitched: No / No
Views / Downloads: 53 / 1700
Version history: 25 change(s)
Referenced in: [show references]

Formerly at http://tinybrain.de/1028971 & http://1028971.tinybrain.de