Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 5, 2017 21:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/f759bdd5faed6331ec331631cc084de9 to your computer and use it in GitHub Desktop.
Save anonymous/f759bdd5faed6331ec331631cc084de9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/kuvolutohu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.mylivechat_inline {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align: left;
color: rgb(0, 0, 0);
width: 319px;
height: 453px;
z-index: 16543210;
position: fixed;
right: 16px;
bottom: 0px;
}
.mylivechat_inline .mylivechat_collapsed {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
background-color: rgb(46, 141, 199);
border: 1px solid rgb(32, 112, 176);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
position: absolute;
left: 0px;
width: 319px;
top: 0px;
height: 453px;
user-select: none;
transform: translate(0px, 2.44702e-15px);
display: none;
}
.mylivechat_inline .mylivechat_collapsed .mylivechat_collapsed_text {
resize: none;
font-size: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 9px;
color: white;
position: relative;
line-height: 0px;
left: 0px;
width: 0px;
top: 0px;
height: 0px;
}
.mylivechat_inline .mylivechat_collapsed .mylivechat_sprite {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
background-position: -4px -148px;
left: -24px;
width: 16px;
top: 7px;
height: 16px;
}
.mylivechat_inline .mylivechat_expanded {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
background-color: rgb(46, 141, 199);
border: 1px solid rgb(32, 112, 176);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: absolute;
left: 0px;
width: 319px;
top: 0px;
height: 30px;
user-select: none;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_expanded_text {
resize: none;
font-size: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 9px;
color: white;
position: relative;
line-height: 30px;
left: 0px;
width: 317px;
top: 0px;
height: 28px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.minimize {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -52px;
left: 293px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.end-chat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -76px;
left: 273px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.pop-out {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -4px;
left: 253px;
}
.mylivechat_inline .mylivechat_container {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-width: 0px 1px 1px;
border-style: solid;
border-color: rgb(32, 112, 176);
border-image: initial;
position: absolute;
box-sizing: border-box;
left: 0px;
width: 319px;
top: 30px;
height: 423px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: rgb(255, 255, 255);
position: absolute;
left: 0px;
width: 317px;
top: 0px;
height: 422px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 6px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
left: 0px;
width: 317px;
top: 0px;
height: 422px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
min-height: 100%;
overflow: visible;
position: relative;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat .mylivechat_prechat_container {
resize: none;
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-height: 100%;
overflow: visible;
position: relative;
}
</style>
</head>
<body>
<div class="mylivechat_inline" >
<div class="mylivechat_collapsed">
<div class="mylivechat_collapsed_text">Chat now</div>
<div class="mylivechat_sprite" title="Maximize"></div>
</div>
<div class="mylivechat_expanded">
<div class="mylivechat_expanded_text">Chat now</div>
<div class="mylivechat_sprite minimize" title="Minimize"></div>
<div class="mylivechat_sprite end-chat" title="End Chat"></div>
<div class="mylivechat_sprite pop-out" title="Pop-out"></div>
</div>
<div class="mylivechat_container">
<div class="mylivechat_main">
<div class="mylivechat_prechat">
<div class="mylivechat_prechat_container">
<div class="mylivechat_prechat_logo" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding: 0px 12px 12px;"><img class="mylivechat_prechat_logo_img" src="https://a1.mylivechat.com/Customization/Template/InlineChatOnlineLogo_a1.png">
</div>
<div class="mylivechat_prechat_text" style="resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding: 0px 12px 12px; color: black; line-height: 1.3em; font-size: 13px !important;">Thank you for contacting us. To serve you better please provide the following information:</div>
<div class="mylivechat_prechat_name" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_prechat_name_lbl mylivechat_prechat_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;">Name:</label>
<input type="text" placeholder="Name" class="mylivechat_prechat_name_box mylivechat_prechat_box" style="display: inline-block; height: 32px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 15px; width: 287px; top: 0px;">
</div>
<div class="mylivechat_prechat_email" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_prechat_email_lbl mylivechat_prechat_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;">Email:</label>
<input type="text" placeholder="Email" class="mylivechat_prechat_email_box mylivechat_prechat_box" style="display: inline-block; height: 32px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 15px; width: 287px; top: 0px;">
</div>
<div class="mylivechat_prechat_oauth" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_prechat_oauth_lbl mylivechat_prechat_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;"></label>
<div class="mylivechat_prechat_oauth_box mylivechat_prechat_box" style="display: inline-block; height: 32px; box-sizing: border-box; padding: 0px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: transparent; background-image: none; border: 0px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; text-align: right; left: 15px; width: 287px; top: 0px;"><span style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; vertical-align: top; display: inline-block; line-height: 22px;">or sign in with : </span><span style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; vertical-align: top; display: inline-block; line-height: 22px;"><img src="https://a1.mylivechat.com/livechat2/images/icon_google.png" style="margin: 3px; cursor: pointer; filter: grayscale(100%);"></span><span style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; vertical-align: top; display: inline-block; line-height: 22px;"><img src="https://a1.mylivechat.com/livechat2/images/icon_facebook.png" style="margin: 3px; cursor: pointer; filter: grayscale(100%);"></span>
</div>
</div>
<div class="mylivechat_prechat_question" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_prechat_question_lbl mylivechat_prechat_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;">Question:</label>
<textarea placeholder="Question" class="mylivechat_prechat_question_box mylivechat_prechat_box" style="display: inline-block; height: 90px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; overflow-y: auto; overflow-x: visible; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 15px; width: 287px; top: 0px;"></textarea>
</div>
<div class="mylivechat_prechat_submit" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<button class="mylivechat_prechat_submit_button" style="display: inline-block; padding: 6px 12px; margin-top: 15px; margin-bottom: 0px; font-size: 13px; font-weight: 300; line-height: 1.42857; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; left: 217px;">Start Chat</button>
</div>
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; height: 25px;"></div>
<div class="mylivechat_poweredby" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 12px; height: 20px; bottom: 0px; position: absolute;">
<div class="mylivechat_footer" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;"></div>
</div>
</div>
</div>
</div>
<div class="mylivechat_offline" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding-top: 12px; padding-bottom: 6px; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; position: absolute; display: none; left: 0px; width: 317px; top: 0px; height: 422px;">
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; min-height: 100%; overflow: visible; position: relative;">
<div class="mylivechat_offline_logo" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding: 0px 12px 12px;"><img class="mylivechat_offline_logo_img" src="https://a1.mylivechat.com/Customization/Template/InlineChatOfflineLogo_a1.png">
</div>
<div class="mylivechat_offline_text" style="resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding: 0px 12px 12px; color: black; line-height: 1.3em; font-size: 13px !important;">There are no agents available right now to take your call. Please leave a message and we will get back to you soon.</div>
<div class="mylivechat_offline_name" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_offline_name_lbl mylivechat_offline_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;">Name:</label>
<input type="text" placeholder="Name" class="mylivechat_offline_name_box mylivechat_offline_box" style="display: inline-block; height: 32px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 15px; width: 0px; top: 0px;">
</div>
<div class="mylivechat_offline_email" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_offline_email_lbl mylivechat_offline_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;">Email:</label>
<input type="text" placeholder="Email" class="mylivechat_offline_email_box mylivechat_offline_box" style="display: inline-block; height: 32px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 15px; width: 0px; top: 0px;">
</div>
<div class="mylivechat_offline_oauth" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_offline_oauth_lbl mylivechat_offline_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;"></label>
<div class="mylivechat_offline_oauth_box mylivechat_offline_box" style="display: inline-block; height: 32px; box-sizing: border-box; padding: 0px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: transparent; background-image: none; border: 0px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; text-align: right; left: 15px; width: 0px; top: 0px;"><span style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; vertical-align: top; display: inline-block; line-height: 22px;">or sign in with : </span><span style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; vertical-align: top; display: inline-block; line-height: 22px;"><img src="https://a1.mylivechat.com/livechat2/images/icon_google.png" style="margin: 3px; cursor: pointer; filter: grayscale(100%);"></span><span style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; vertical-align: top; display: inline-block; line-height: 22px;"><img src="https://a1.mylivechat.com/livechat2/images/icon_facebook.png" style="margin: 3px; cursor: pointer; filter: grayscale(100%);"></span>
</div>
</div>
<div class="mylivechat_offline_subject" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_offline_subject_lbl mylivechat_offline_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;">Subject:</label>
<input type="text" placeholder="Question" class="mylivechat_offline_subject_box mylivechat_offline_box" style="display: inline-block; height: 32px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 15px; width: 0px; top: 0px;">
</div>
<div class="mylivechat_offline_enquiry" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<label class="mylivechat_offline_enquiry_lbl mylivechat_offline_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: none; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; font-weight: normal;">Message:</label>
<textarea placeholder="Message" class="mylivechat_offline_question_box mylivechat_offline_box" style="display: inline-block; height: 50px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; position: relative; margin: 3px 0px; text-indent: 2px; overflow-y: auto; overflow-x: visible; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 15px; width: 0px; top: 0px;"></textarea>
</div>
<div class="mylivechat_offline_submit" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<button class="mylivechat_offline_submit_button" style="display: inline-block; padding: 6px 12px; margin-top: 15px; margin-bottom: 0px; font-size: 13px; font-weight: 300; line-height: 1.42857; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; left: -15px;">Send</button>
</div>
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; height: 25px;"></div>
<div class="mylivechat_poweredby" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; left: 12px; height: 20px; bottom: 0px; position: absolute;">
<div class="mylivechat_footer" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;"></div>
</div>
</div>
</div>
</div>
<div class="mylivechat_support" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; display: none; left: 0px; width: 317px; top: 0px; height: 422px;">
<div class="mylivechat_support_frame" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; left: 0px; width: 0px; top: 0px; height: 0px;">
<iframe frameborder="0" src="about:blank" id="mylivechatinpageframe" style="box-sizing: border-box; display: block; left: 0px; width: 0px; top: 0px; height: 0px;"></iframe>
</div>
<div class="mylivechat_survey" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; display: none; left: 0px; width: 0px; top: 0px; height: 0px;">
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; background-color: rgb(102, 102, 102); opacity: 0.88; left: 0px; width: 0px; top: 0px; height: 0px;"></div>
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; border-radius: 5px; border: 1px solid rgb(102, 102, 102); background-color: rgb(249, 250, 250); left: 8px; width: 0px; top: 8px; height: 0px;">
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; border-bottom: 1px solid rgb(207, 214, 224); left: 0px; width: 0px; top: 5px; height: 28px;">
<div class="mylivechat_sprite" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; cursor: pointer; background-image: url(&quot;https://a1.mylivechat.com/livechat2/images/sprite.png&quot;); background-repeat: no-repeat; background-position: -4px -340px; left: -28px; width: 16px; top: 5px; height: 16px;"></div>
<div class="mylivechat_survey_title" style="resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding: 0px 12px 12px; color: black; line-height: 28px; font-size: 13px !important;">Live Chat Exit Survey</div>
</div>
<div style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: absolute; background-color: white; left: 0px; width: 0px; top: 36px; height: 0px;">
<div class="mylivechat_survey_header" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding-top: 12px;">
<div class="mylivechat_survey_message" style="resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding: 0px 12px 12px; color: black; line-height: 1.3em; font-size: 13px !important;">To help us serve you better, please provide some information concerning your chat experience.</div>
</div>
<div class="mylivechat_survey_rating" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; text-align: center;"><img src="https://a1.mylivechat.com/livechat2/images/good.png" style="width: 48px; height: 48px; margin: 0px 10px; cursor: pointer; border: 1px solid transparent; border-radius: 5px;"><img src="https://a1.mylivechat.com/livechat2/images/bad.png" style="width: 48px; height: 48px; margin: 0px 10px; cursor: pointer; border: 1px solid transparent; border-radius: 5px;">
</div>
<div class="mylivechat_survey_comment" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;">
<div class="mylivechat_survey_comment_lbl mylivechat_survey_lbl" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; display: inline-block; margin: 3px 0px; box-sizing: border-box; vertical-align: top; padding-top: 2px; left: 10px; width: 0px;">Comment:</div>
<textarea class="mylivechat_survey_comment_box mylivechat_survey_box" style="display: inline-block; height: 50px; box-sizing: border-box; padding: 6px 5px; font-size: 13px; line-height: 1.42857; color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); background-image: none; border: 1px solid rgb(204, 204, 204); border-radius: 2px; outline: 0px; overflow-y: auto; overflow-x: visible; resize: none; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; position: relative; margin: 3px 0px; left: 10px; width: 0px; top: 0px;"></textarea>
</div>
<div class="mylivechat_survey_butttons" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; padding: 12px 5px; text-align: center;">
<button class="mylivechat_survey_submit_button" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; margin: 5px 12px; padding: 3px 12px; width: 80px;">Send</button>
<button class="mylivechat_survey_cancel_button" style="resize: none; font-size: 13px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; margin: 5px; padding: 3px 12px; width: 80px;">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">.mylivechat_inline {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align: left;
color: rgb(0, 0, 0);
width: 319px;
height: 453px;
z-index: 16543210;
position: fixed;
right: 16px;
bottom: 0px;
}
.mylivechat_inline .mylivechat_collapsed {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
background-color: rgb(46, 141, 199);
border: 1px solid rgb(32, 112, 176);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
position: absolute;
left: 0px;
width: 319px;
top: 0px;
height: 453px;
user-select: none;
transform: translate(0px, 2.44702e-15px);
display: none;
}
.mylivechat_inline .mylivechat_collapsed .mylivechat_collapsed_text {
resize: none;
font-size: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 9px;
color: white;
position: relative;
line-height: 0px;
left: 0px;
width: 0px;
top: 0px;
height: 0px;
}
.mylivechat_inline .mylivechat_collapsed .mylivechat_sprite {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
background-position: -4px -148px;
left: -24px;
width: 16px;
top: 7px;
height: 16px;
}
.mylivechat_inline .mylivechat_expanded {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
background-color: rgb(46, 141, 199);
border: 1px solid rgb(32, 112, 176);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: absolute;
left: 0px;
width: 319px;
top: 0px;
height: 30px;
user-select: none;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_expanded_text {
resize: none;
font-size: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 9px;
color: white;
position: relative;
line-height: 30px;
left: 0px;
width: 317px;
top: 0px;
height: 28px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.minimize {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -52px;
left: 293px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.end-chat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -76px;
left: 273px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.pop-out {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -4px;
left: 253px;
}
.mylivechat_inline .mylivechat_container {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-width: 0px 1px 1px;
border-style: solid;
border-color: rgb(32, 112, 176);
border-image: initial;
position: absolute;
box-sizing: border-box;
left: 0px;
width: 319px;
top: 30px;
height: 423px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: rgb(255, 255, 255);
position: absolute;
left: 0px;
width: 317px;
top: 0px;
height: 422px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 6px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
left: 0px;
width: 317px;
top: 0px;
height: 422px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
min-height: 100%;
overflow: visible;
position: relative;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat .mylivechat_prechat_container {
resize: none;
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-height: 100%;
overflow: visible;
position: relative;
}
</script>
</body>
</html>
Raw
jsbin.kuvolutohu.css
.mylivechat_inline {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
text-align: left;
color: rgb(0, 0, 0);
width: 319px;
height: 453px;
z-index: 16543210;
position: fixed;
right: 16px;
bottom: 0px;
}
.mylivechat_inline .mylivechat_collapsed {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
background-color: rgb(46, 141, 199);
border: 1px solid rgb(32, 112, 176);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
cursor: pointer;
position: absolute;
left: 0px;
width: 319px;
top: 0px;
height: 453px;
user-select: none;
transform: translate(0px, 2.44702e-15px);
display: none;
}
.mylivechat_inline .mylivechat_collapsed .mylivechat_collapsed_text {
resize: none;
font-size: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 9px;
color: white;
position: relative;
line-height: 0px;
left: 0px;
width: 0px;
top: 0px;
height: 0px;
}
.mylivechat_inline .mylivechat_collapsed .mylivechat_sprite {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
background-position: -4px -148px;
left: -24px;
width: 16px;
top: 7px;
height: 16px;
}
.mylivechat_inline .mylivechat_expanded {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
box-sizing: border-box;
background-color: rgb(46, 141, 199);
border: 1px solid rgb(32, 112, 176);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
position: absolute;
left: 0px;
width: 319px;
top: 0px;
height: 30px;
user-select: none;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_expanded_text {
resize: none;
font-size: 15px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 9px;
color: white;
position: relative;
line-height: 30px;
left: 0px;
width: 317px;
top: 0px;
height: 28px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.minimize {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -52px;
left: 293px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.end-chat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -76px;
left: 273px;
}
.mylivechat_inline .mylivechat_expanded .mylivechat_sprite.pop-out {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: absolute;
cursor: pointer;
background-image: url('https://a1.mylivechat.com/livechat2/images/sprite.png');
background-repeat: no-repeat;
width: 16px;
top: 7px;
height: 16px;
background-position: -4px -4px;
left: 253px;
}
.mylivechat_inline .mylivechat_container {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
border-width: 0px 1px 1px;
border-style: solid;
border-color: rgb(32, 112, 176);
border-image: initial;
position: absolute;
box-sizing: border-box;
left: 0px;
width: 319px;
top: 30px;
height: 423px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
background-color: rgb(255, 255, 255);
position: absolute;
left: 0px;
width: 317px;
top: 0px;
height: 422px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 6px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
left: 0px;
width: 317px;
top: 0px;
height: 422px;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat {
resize: none;
font-size: 13px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
min-height: 100%;
overflow: visible;
position: relative;
}
.mylivechat_inline .mylivechat_container .mylivechat_main .mylivechat_prechat .mylivechat_prechat_container {
resize: none;
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-height: 100%;
overflow: visible;
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment