Olá amigos, segue meu protótipo do chatbox staff, fiz algumas mudanças, acho que vai ser necessário adicionar alguns ID's novamente.. Mas acho que nada muito dificil..
Troquei o input por uma textarea e outro input por um button..
Usei a font-awesome para os ícones..
Espero que gostem..
Troquei o input por uma textarea e outro input por um button..
Usei a font-awesome para os ícones..
Espero que gostem..
- Código:
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
* {
outline: none;
}
.shouttStaff{
font: 11px 'Open Sans', sans-serif;
}
.shouttWrap{
margin: 0px;
height: 213px;
max-height: 213px;
overflow: auto;
}
.shouttShoutt{
word-wrap: break-word;
}
.shouttDelete{
cursor: pointer;
}
.shouttTextarea{
padding: 7px;
font: 11px 'Open Sans', sans-serif;
width: 100%;
color: #333;
background-color: #FFF;
border: 1px solid #D6D6D6;
border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
overflow: auto;
resize: none;
}
.shouttTextarea:hover {
border-color: #B8B8B8;
}
.shouttTextarea:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
.shouttSubmit{
padding: 4px 0;
width: 100%;
color: #333;
text-align: center;
cursor: pointer;
background-color: #F5F5F5;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: linear-gradient(top, #FFF, #E6E6E6);
background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
background-image: -o-linear-gradient(top, #FFF, #E6E6E6);
background-image: -moz-linear-gradient(top, #FFF, #E6E6E6);
background-image: -ms-linear-gradient(top, #FFF, #E6E6E6);
font-weight: bold;
margin: 3px auto;
}
.shouttSubmit:hover {
background-color: #E6E6E6;
background-image: linear-gradient(top, #E6E6E6, #fff);
background-image: -webkit-linear-gradient(top, #E6E6E6, #fff);
background-image: -o-linear-gradient(top, #E6E6E6, #fff);
background-image: -moz-linear-gradient(top, #E6E6E6, #fff);
background-image: -ms-linear-gradient(top, #E6E6E6, #fff);
}
.shouttWrap ul{
margin: 0;
padding: 0;
}
.shouttShoutt{
list-style: none;
padding: 4px;
overflow: hidden;
border-bottom: #eee 1px solid;
}
.shouttClear{
width: 100%;
}
.shouttHead{
padding: 4px 7px;
overflow: hidden;
cursor: default;
}
.shouttAutor{
float: left;
font-weight: bold;
}
.shouttHour{
float: right;
font-style: italic;
}
.shouttRank{
color: #999;
font-weight: normal;
}
.shouttContent{
float: left;
width: 137px;
}
.shouttExtra{
float: right;
width: 73px;
text-align: center;
color: #ccc;
}
.shouttAvatar{
margin: 0 auto;
width: 40px;
height: 40px;
display: block;
border-radius: 2px;
padding: 1px;
background: #fff;
box-shadow: rgba(0,0,0,.3) 0 0 3px;
}
.shouttTotal{
padding: 4px 0;
float: right;
color: #333;
text-align: center;
cursor: default;
background-color: #F5F5F5;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-o-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-ms-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background-image: linear-gradient(top, #FFF, #E6E6E6);
background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
background-image: -o-linear-gradient(top, #FFF, #E6E6E6);
background-image: -moz-linear-gradient(top, #FFF, #E6E6E6);
background-image: -ms-linear-gradient(top, #FFF, #E6E6E6);
margin: 3px auto;
}
.shouttTotalPad{
padding: 4px 20px;
}
</style>
<div class="module main shouttStaff">
<div class="main-head"><h3>ChatBox da <em>Staff!</em></h3></div>
<div class="shouttInput">
<textarea class="shouttTextarea" maxlength="200" placeholder="Digite sua mensagem.."></textarea>
</div>
<span class="shouttTotal"><span class="shouttTotalPad"><i class="fa fa-file-text-o"></i> <strong>Total de mensagens:</strong> 21</span></span>
<button class="shouttSubmit"><i class="fa fa-reply-all"></i> Enviar</button>
<div class="shouttWrap">
<ul>
<li class="shouttShoutt">
<div class="shouttClear">
<div class="shouttHead">
<span class="shouttAutor" style="color:#8FD534;"><i class="fa fa-user"></i> JScript <span class="shouttRank">[ Administrador ]</span></span>
<span class="shouttHour">16/2 - 10:03</span>
</div>
<div class="shouttContent">
Mensagem de teste
</div>
<div class="shouttExtra">
<img class="shouttAvatar" src="http://i34.servimg.com/u/f34/18/17/62/92/av-8910.png" alt="Avatar">
<div class="shouttDelete">deletar shoutt</div>
</div>
</div>
</li>
<li class="shouttShoutt">
<div class="shouttClear">
<div class="shouttHead">
<span class="shouttAutor" style="color:#F00;"><i class="fa fa-user"></i> Wagner <span class="shouttRank">[ Programador ]</span></span>
<span class="shouttHour">16/2 - 10:07</span>
</div>
<div class="shouttContent">
Somente testando aqui mesmo
</div>
<div class="shouttExtra">
<img class="shouttAvatar" src="http://r19.imgfast.net/users/1917/43/09/52/avatars/61-47.jpg" alt="Avatar">
<div class="shouttDelete">deletar shoutt</div>
</div>
</div>
</li>
<li class="shouttShoutt">
<div class="shouttClear">
<div class="shouttHead">
<span class="shouttAutor" style="color:#009;"><i class="fa fa-user"></i> joelson0007 <span class="shouttRank">[ Moderador ]</span></span>
<span class="shouttHour">16/2 - 10:17</span>
</div>
<div class="shouttContent">
Opa, outro teste
</div>
<div class="shouttExtra">
<img class="shouttAvatar" src="http://r19.imgfast.net/users/1917/43/09/52/avatars/36-5.png" alt="Avatar">
<div class="shouttDelete">deletar shoutt</div>
</div>
</div>
</li>
</ul>
</div>
</div>