.init {
position: fixed;
bottom: 15px;
right: 70px;
width: 300px;
border: 1px solid #cccccc;
border-radius: 5px;
padding: 10px;
background: #ffffff;
box-shadow: 1px 1px 0px #555555;
overflow: hidden;
z-index: 500;
box-sizing: content-box;
color: #000;
}
@media (max-width:767px),@media (max-width: 680px),@media (min-width: 576px){.init {
bottom: 70px;
right: 15px;
}
}
.init {
visibility: hidden;
}
#telegram-chat-wrapp > div{
box-sizing: border-box;
position: relative;
}
.init .telegram-chat-header {
margin: 0;
caret-color: transparent;
border-bottom: 1px solid #cccccc;
font-size: 14px;
line-height: 20px;
padding-bottom: 8px;
padding-right: 50px;
padding-left: 24px;
}
#telegram-chat-app,
#telegram-chat-close,
#telegram-chat-update {
position: absolute;
top: 5px;
right: 6px;
height: 22px;
width: 22px;
cursor: pointer;
caret-color: transparent;
box-sizing: border-box;
border-radius: 50%;
border: 1px solid #cccccc;
padding: 2px;
z-index: 10;
background-image: url('img/close.svg');
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
#telegram-chat-count {
font-size: small;
}
#telegram-chat-app {
right: 32px;
background-image: url('img/telegram-icon.svg');
background-size: 76%;
background-position: 30% 50%;
}
.init.show #telegram-chat-app:hover,
.init.show #telegram-chat-update:hover {
background-color: lightblue;
}
#telegram-chat-app a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#telegram-chat-update {
right: auto;
left: 10px;
top: 10px;
transition: all 0.5s ease;
background-image: url('img/update.svg');
background-size: 50%;
border-color: #ffffff;
}
#telegram-chat-update.ping {
background-color: greenyellow;
transform: rotate(180deg);
}
.init.show #telegram-chat-update.ping:hover {
background-color: yellow;
}
#telegram-chat-update.error {
background-color: lightsalmon;
}
#telegram-chat-close img {
display: none;
}
.init.show #telegram-chat-close:hover {
background-color: lightsalmon;
}
.init.blurry {
filter: blur(10px);
}
#telegram-chat.hide {
width: 32px;
height: 32px;
border-radius: 50%;
background: #30a3e6;
transition: width, height, padding 0.3s cubic-bezier(0.1, -5, 0.5, 5);
display: block !important;
}
.init.hide {
transition: none;
}
.init.hide.hover {
padding: 14px;
}
.init.hide #telegram-chat-wrapp,
.init.hide #telegram-chat-update,
.init.hide #telegram-chat-app{
display: none;
}
.init.hide #telegram-chat-close{
width: 100%;
height: 100%;
top: 0;
right: 0;
padding: 10%;
background-image: url('img/chat_icon.svg');
background-repeat: no-repeat;
background-size: 80%;
border: none;
}
.init.hide #telegram-chat-close{
filter: invert(1);
animation: telegram-chat-spin 2s linear infinite alternate-reverse;
}
/*
@keyframes telegram-chat-spin{
0% { transform: rotate(0deg); }
2% { transform: rotate(5deg); }
4% { transform: rotate(0eg); }
6% { transform: rotate(-5deg); }
8% { transform: rotate(0deg); }
100% { transform: rotate(0deg); }
}
*/
.init .telegram-chat-welcome {
margin: 0;
background: #eeeeee;
padding: 2px;
text-align: center;
font-size: 14px;
line-height: 18px;
border-radius: 0 0 6px 6px;
}
.init .telegram-chat-textarea {
margin-right: 50px;
}
.init .telegram-chat-textarea textarea {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 100%;
min-height: 70px;
font-size: 16px;
line-height: 18px;
padding: 4px;
margin: 0;
display: block;
}
#telegram-chat-send {
position: absolute;
bottom: 15px;
right: 0;
cursor: pointer;
background: #30a3e6;
border-radius: 50%;
padding: 1%;
width: 40px;
height: 40px;
box-sizing: border-box;
line-height: 0;
border: 1px solid #ffffff;
}
#telegram-chat-send span {
filter: invert(1);
background-image: url('img/send.svg');
background-size: 85%;
background-repeat: no-repeat;
background-position: 0% 70%;
display: block;
width: 100%;
height: 100%;
}
#telegram-chat-send:hover{
background: #2a91cd;
}
#telegram-chat-input.disabled {
pointer-events: none;
opacity: 0.5;
}
#telegram-chat-content{
min-height: 120px;
max-height: 300px;
overflow: auto;
padding: 0 4px;
margin: 8px 0;
word-break: break-all;
}
div#telegram-chat-content::-webkit-scrollbar {
width: 4px;
}
div#telegram-chat-content::-webkit-scrollbar-track {
background-color: darkgrey;
}
div#telegram-chat-content::-webkit-scrollbar-thumb {
background-color: #30a3e6;
}
#telegram-chat-content .content {
background: #eeeeee;
padding: 5px;
margin: 8px 0 8px 15px;
border-radius: 4px;
border: 1px solid #999999;
}
#telegram-chat-content .content > div {
position: relative;
}
#telegram-chat-content .content p {
margin: 0;
padding: 0 2px 2px 0; caret-color: transparent;
}
#telegram-chat-content .content strong {
color: #000;
}
#telegram-chat-content .content .icon {
position: absolute;
top: 50%;
left: -20px;
border-radius: 50%;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center 2px;
background-size: cover;
background-image: url('data:image/svg+xml;utf8,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 110.44"><title>user</title><path d="M46.07,68.62a19.25,19.25,0,0,1-1.63-2c-1.2-1.65-2.33-3.37-3.42-5.1L35.6,52.89c-2.06-3-3.14-5.74-3.14-7.91s1.23-5,3.68-5.63a149.33,149.33,0,0,1-.21-15.61,19.7,19.7,0,0,1,.65-3.58,20.63,20.63,0,0,1,9.21-11.7,23.65,23.65,0,0,1,5-2.39c3.15-1.19,1.63-6,5.1-6.07C64-.21,77.33,6.73,82.53,12.36a20.56,20.56,0,0,1,5.31,13.33l-.33,14.2a4,4,0,0,1,2.93,2.92c.43,1.74,0,4.12-1.52,7.48h0c0,.11-.11.11-.11.22L82.63,60.7c-1.4,2.3-2.85,4.65-4.48,6.81-1.93,2.58-3.52,2.12-1.87,4.59,11.83,16.26,46.6,6,46.6,38.34H0C0,78.08,34.78,88.36,46.6,72.1c1.36-2,1-1.85-.53-3.48Z"/></svg>');
width: 34px;
height: 34px;
overflow: hidden;
border: 1px solid #999999;
transform: translate(0, -50%);
display: block;
}
#telegram-chat-content .content p.date {
color: #555555;
font-size: 12px;
padding-left: 25px;
font-variant-numeric: lining-nums;
}
#telegram-chat-content .content p.date span {
font-weight: bold;
}
#telegram-chat-content .content p.message {
margin: 0;
font-size: 16px;
line-height: 20px;
padding-left: 25px;
font-variant-numeric: lining-nums;
}
#telegram-chat-content .content.error{
margin: 8px;
background-color: lightsalmon;
}
#telegram-chat-content .error > div {
overflow: hidden;
}
#telegram-chat-content .error .icon{
display: none;
}
#telegram-chat-content .error .date{
display: none;
}
#telegram-chat-content .error .message{
text-align: center;
padding: 0;
color: #222;
}
#telegram-chat-content .incomingMessage{
margin: 8px 15px 8px 0;
}
#telegram-chat-content .incomingMessage .icon{
left: auto;
right: -20px;
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 477.655 477.655" style="enable-background:new 0 0 477.655 477.655;" xml:space="preserve"><g><path d="M440.367,440.415l-10.173-29.91c-19.102-56.262-70.83-94.605-129.763-97.121c-5.187,4.03-10.655,7.493-16.322,10.521 c-8.449,22.185-36.836,28.195-53.468,11.205c-19.676-1.738-37.69-9.511-53.422-21.725c-58.933,2.508-110.647,40.851-129.763,97.121 L37.3,440.415c-2.936,8.603-1.522,18.084,3.774,25.469c5.279,7.391,13.821,11.771,22.906,11.771h349.693 c9.083,0,17.626-4.379,22.906-11.771C441.873,458.499,443.286,449.018,440.367,440.415z"/><path d="M277.758,290.619c34.212-24.047,58.141-77.151,58.141-128.491c0-145.907-194.133-145.752-194.133,0 c0,62.397,35.33,127.303,81.546,139.556c4.456-12.626,16.382-21.757,30.515-21.757C263.331,279.926,271.81,284.095,277.758,290.619 z"/><path d="M99.169,223.042c4.813,18.906,31.044,13.704,31.044-3.805c0-70.178,3.354-76.731-6.041-84.348 C145.679,2.361,330.946,3.355,353.495,134.904c-9.381,7.641-6.025,14.163-6.025,84.333c0,5.489,2.95,10.095,7.189,12.952 c0,54.594-22.145,51.402-88.736,69.052c-10.295-11.174-28.683-3.899-28.683,11.173c0,18.876,27.053,23.293,32.302,4.318 c53.762-14.256,101.018-18.752,101.018-72.484v-11.027c3.991-2.066,6.817-5.729,7.951-10.179c51.822-1.056,51.838-78.719,0-79.775 c-1.072-4.24-3.711-7.703-7.423-9.815c1.336-15.902-1.94-36.805-11.057-56.985C296.626-54.368,109.355-3.176,106.422,123.622 c-0.404,4.294-0.078,7.338,0.17,9.83c-3.712,2.112-6.351,5.575-7.423,9.815c-21.71,0.419-39.212,18.084-39.212,39.888 C59.957,204.958,77.459,222.622,99.169,223.042z"/></g></svg>');
background-repeat: no-repeat;
}
#telegram-chat-content .incomingMessage .date{
text-align: left;
}
#telegram-chat-content .incomingMessage .message{
padding-left: 0;
padding-right: 25px;
}
#telegram-chat-content .info {
background: lightyellow;
}