Last active
August 29, 2015 14:13
-
-
Save mgimenez/7cf8bc87dd126263f349 to your computer and use it in GitHub Desktop.
PopUp Chat
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Hoja de estilos para el html de la pantallas de chat ML y chat MP */ | |
body { | |
font-family: Helvetica, Arial, sans-serif; | |
background-color: #fff; | |
padding: 0; | |
} | |
.content p { | |
font-size: 13px; | |
padding: 1em 1.7em 1.5em 1.7em; | |
} | |
h3 { | |
font-weight: lighter; | |
position: relative; | |
line-height: 1.5em; | |
display: inline-block; | |
vertical-align: top; | |
} | |
a.ch-btn-skin, .ch-btn-skin:focus, .ch-btn-skin:visited { | |
color: #476274; | |
} | |
.container { | |
height: 100%; | |
} | |
header { | |
background-color: #EEE; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
z-index: 100; | |
} | |
header, | |
main { | |
border: solid 1px #DDD; | |
} | |
.logo-ml { | |
margin: 20px; | |
display: inline-block; | |
zoom:0.7; | |
} | |
main { | |
overflow-y: auto; | |
position: absolute; | |
top: 64px; | |
bottom: 124px; | |
} | |
.box-message { | |
position: relative; | |
width: 70%; | |
padding: 2px 2px 0 0; | |
margin-top: 15px; | |
background: #F0F0F0; | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
} | |
.box-message-left { | |
float:left; | |
margin-left:2em; | |
} | |
/* Para armar el cono del globo 1*/ | |
.box-message-left:after { | |
content: ""; | |
position: absolute; | |
top: 13px; | |
left: -19px; | |
border-style: solid; | |
border-width: 13px 19px 13px 0; | |
border-color: transparent #F0F0F0; | |
display: block; | |
width: 0; | |
z-index: 1; | |
} | |
.box-message-right { | |
float:right; | |
margin-right:2em; | |
} | |
/* Para armar el cono del globo 2*/ | |
.box-message-right:before { | |
content: ""; | |
position: absolute; | |
top: 13px; | |
right: -19px; | |
border-style: solid; | |
border-width: 13px 0 13px 19px; | |
border-color: transparent #F0F0F0; | |
display: block; | |
width: 0; | |
z-index: 1; | |
} | |
footer { | |
background-color:#EEEEEE; | |
margin: 0 auto 0; | |
border:thin; | |
border-style:solid; | |
border-color:#DDDDDD; | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: 100; | |
height: 122px; | |
} | |
.message-form { | |
display: table; | |
width: 100%; | |
} | |
.message-input { | |
vertical-align:middle; | |
width: 100%; | |
height: 60px; | |
margin: 10px 0 0 0; | |
padding: 0; | |
} | |
.ch-btn { | |
vertical-align:middle; | |
margin:1em 0 1em 1em; | |
} | |
.save-chat { | |
display: inline-block; | |
} | |
p.rep-writing{ | |
font-style: italic; | |
clear: both; | |
padding-bottom: 0.7em; | |
} | |
.message-form div{ | |
display: block; | |
width: auto; | |
} | |
.message-leftcol { | |
margin: 10px 10px 0 10px; | |
} | |
#re-conect { | |
margin: 10px; | |
} | |
#re-conect div + .ch-btn{ | |
margin-left: 0; | |
} | |
#re-conect .ch-btn{ | |
margin-top: 0; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |
<title>Chat ML</title> | |
<!-- @TODO Cuando se agregue el "if mobile" eliminar el atributo "media" --> | |
<!-- if(!mobile) --> | |
<link rel="stylesheet" media="screen and (min-width: 480px)" href="http://static.mlstatic.com/org-img/ch/ui/1.0.0/chico.min.css"> | |
<!-- else --> | |
<link rel="stylesheet" media="screen and (max-width: 480px)" href="http://static.mlstatic.com/org-img/ch/mobile/1.1.1/chico.min.css"> | |
<!-- endif --> | |
<link rel="stylesheet" href="base.css"> | |
<!-- HTML5 support --> | |
<!--[if lt IE 9]> | |
<script src="https://a248.e.akamai.net/secure.mlstatic.com/org-img/ch/tools/html5shiv/html5shiv.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="container" id="container"> | |
<header class="header" id="header"> | |
<img id="logoMl" class="logo-ml"src="images/mlLogo.png" alt="MercadoLibre Argentina" height="41px" width="162"> | |
<h3> Soporte chat </h3> | |
</header> | |
<main> | |
<div id="content" class="content"> | |
<div class="box-message box-message-left"> | |
<p id="representative1" class="representative"><b>Lourdes J: </b>Bienvenido al Chat de MercadoLibre, ¿en qué puedo ayudarte?</p> | |
</div> | |
<div class="box-message box-message-right"> | |
<p id="user" class="representative"><b>Yo: </b>Buen día, tengo un problema con un cargo facturado.</p> | |
</div> | |
<div class="box-message box-message-left"> | |
<p id="representative1" class="representative"><b>Lourdes J: </b>Bienvenido al Chat de MercadoLibre, ¿en qué puedo ayudarte?</p> | |
</div> | |
<div class="box-message box-message-right"> | |
<p id="user" class="representative"><b>Yo: </b>Buen día, tengo un problema con un cargo facturado.</p> | |
</div> | |
<div class="box-message box-message-left"> | |
<p id="representative1" class="representative"><b>Lourdes J: </b>Bienvenido al Chat de MercadoLibre, ¿en qué puedo ayudarte?</p> | |
</div> | |
<div class="box-message box-message-right"> | |
<p id="user" class="representative"><b>Yo: </b>Buen día, tengo un problema con un cargo facturado.</p> | |
</div> | |
<div class="box-message box-message-left"> | |
<p id="representative1" class="representative"><b>Lourdes J: </b>Bienvenido al Chat de MercadoLibre, ¿en qué puedo ayudarte?</p> | |
</div> | |
<div class="box-message box-message-right"> | |
<p id="user" class="representative"><b>Yo: </b>Buen día, tengo un problema con un cargo facturado.</p> | |
</div> | |
<div class="box-message box-message-left"> | |
<p id="representative1" class="representative"><b>Lourdes J: </b>Bienvenido al Chat de MercadoLibre, ¿en qué puedo ayudarte?</p> | |
</div> | |
<div class="box-message box-message-right"> | |
<p id="user" class="representative"><b>Yo: </b>Buen día, tengo un problema con un cargo facturado.</p> | |
</div> | |
<p class="rep-writing">Lourdes J está escribiendo</p> | |
</div> | |
</main> | |
<footer id="footer" class="footer" > | |
<!-- @TODO mediante JavaScript mostrar #re-conect y ocultar #message-form en el caso de que se desconecte del chat, si hace click en "Reconectar" volver a lo mismo --> | |
<div id="re-conect" class="ch-hide"> | |
<div class="ch-box-icon ch-box-warn"><i class="ch-icon-warning-sign"></i> | |
<p>Desconectamos el chat por inactividad. ¿Quiéres seguir conversando? </p> | |
</div> | |
<a class="ch-btn ch-btn-small" href="#">Reconectar</a> | |
<a class="ch-btn ch-btn-small ch-btn-skin" href="#">Guardar Chat</a> | |
</div> | |
<form id="message-form" class="message-form"> | |
<div class="message-leftcol"> | |
<textarea id="message-input" class="message-input" rows="3"></textarea> | |
</div> | |
<div class="message-rightcol"> | |
<input type="submit" id="send_button" class="ch-btn ch-btn-small" value="Enviar"/> | |
<a class="ch-btn ch-btn-small ch-btn-skin" href="#">Guardar Chat</a> | |
</div> | |
</form> | |
</footer> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment