|
|
|
@ -88,6 +88,9 @@ |
|
|
|
border-radius: 0; |
|
|
|
border-radius: 0; |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.list-group-item.newmessage { |
|
|
|
|
|
|
|
animation: newmessage 1s ease -0.3s infinite; |
|
|
|
|
|
|
|
} |
|
|
|
.list-group-item .fa-lg { |
|
|
|
.list-group-item .fa-lg { |
|
|
|
display: inline-block; |
|
|
|
display: inline-block; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
@ -113,7 +116,6 @@ |
|
|
|
.list-group-item:hover > .item-btn { |
|
|
|
.list-group-item:hover > .item-btn { |
|
|
|
display:inline; |
|
|
|
display:inline; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.chatpane { |
|
|
|
.chatpane { |
|
|
|
@ -295,28 +297,30 @@ |
|
|
|
color:#ccc; |
|
|
|
color:#ccc; |
|
|
|
transform: scale(-1, 1); |
|
|
|
transform: scale(-1, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
.unread:before { |
|
|
|
li { |
|
|
|
content: '\f0eb'; |
|
|
|
&.unread:before { |
|
|
|
color: #FE9A2E; |
|
|
|
content: '\f0eb'; |
|
|
|
} |
|
|
|
color: #FE9A2E; |
|
|
|
.sending:before { |
|
|
|
} |
|
|
|
content: '\f0ec'; |
|
|
|
&.sending:before { |
|
|
|
} |
|
|
|
content: '\f0ec'; |
|
|
|
.sent:before { |
|
|
|
} |
|
|
|
content: '\f003'; |
|
|
|
&.sent:before { |
|
|
|
color:#5882FA; |
|
|
|
content: '\f003'; |
|
|
|
} |
|
|
|
color:#5882FA; |
|
|
|
.delivered:before { |
|
|
|
} |
|
|
|
content: '\f019'; |
|
|
|
&.delivered:before { |
|
|
|
color:#5882FA; |
|
|
|
content: '\f019'; |
|
|
|
} |
|
|
|
color:#5882FA; |
|
|
|
.received:before { |
|
|
|
} |
|
|
|
content: '\f06e'; |
|
|
|
&.received:before { |
|
|
|
color:#84b819; |
|
|
|
content: '\f06e'; |
|
|
|
} |
|
|
|
color:#84b819; |
|
|
|
.read:before { |
|
|
|
} |
|
|
|
content: '\f00c'; |
|
|
|
&.read:before { |
|
|
|
color:#ccc; |
|
|
|
content: '\f00c'; |
|
|
|
|
|
|
|
color:#ccc; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -409,55 +413,55 @@ |
|
|
|
text-overflow:ellipsis; |
|
|
|
text-overflow:ellipsis; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.chat .chatbodybottom { |
|
|
|
.chat { |
|
|
|
background: #e7e7e7; |
|
|
|
.chatbodybottom { |
|
|
|
position: absolute; |
|
|
|
background: #e7e7e7; |
|
|
|
left:0px; |
|
|
|
position: absolute; |
|
|
|
bottom:1px; |
|
|
|
left:0px; |
|
|
|
right:0px; |
|
|
|
bottom:1px; |
|
|
|
margin:0 auto; |
|
|
|
right:0px; |
|
|
|
} |
|
|
|
margin:0 auto; |
|
|
|
|
|
|
|
} |
|
|
|
.chat .typinghint { |
|
|
|
.typinghint { |
|
|
|
padding:2px 6px 0 6px; |
|
|
|
padding:2px 6px 0 6px; |
|
|
|
white-space: nowrap; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
font-size:.8em; |
|
|
|
font-size:.8em; |
|
|
|
color: #aaa; |
|
|
|
color: #aaa; |
|
|
|
height:14px; |
|
|
|
height:14px; |
|
|
|
} |
|
|
|
} |
|
|
|
.chat .inputbox { |
|
|
|
.inputbox { |
|
|
|
position:relative; |
|
|
|
position:relative; |
|
|
|
} |
|
|
|
.btn { |
|
|
|
.chat .inputbox .btn { |
|
|
|
position:absolute; |
|
|
|
position:absolute; |
|
|
|
right:6px; |
|
|
|
right:6px; |
|
|
|
top:1px; |
|
|
|
top:1px; |
|
|
|
padding: 0.5em 1em; |
|
|
|
padding: 0.5em 1em; |
|
|
|
display:none; |
|
|
|
display:none; |
|
|
|
} |
|
|
|
} |
|
|
|
> div { |
|
|
|
.chat .inputbox > div { |
|
|
|
border-top:1px solid $bordercolor; |
|
|
|
border-top:1px solid $bordercolor; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.chat .input { |
|
|
|
.input { |
|
|
|
display:block; |
|
|
|
display:block; |
|
|
|
resize: none; |
|
|
|
resize: none; |
|
|
|
width:100%; |
|
|
|
width:100%; |
|
|
|
height:54px; |
|
|
|
height:54px; |
|
|
|
max-height:54px; /* FF hack */ |
|
|
|
max-height:54px; /* FF hack */ |
|
|
|
margin:0px; |
|
|
|
margin:0px; |
|
|
|
-webkit-border-radius: 0px; |
|
|
|
-webkit-border-radius: 0px; |
|
|
|
-moz-border-radius: 0px; |
|
|
|
-moz-border-radius: 0px; |
|
|
|
border-radius: 0px; |
|
|
|
border-radius: 0px; |
|
|
|
border-color:transparent; |
|
|
|
border-color:transparent; |
|
|
|
-webkit-box-shadow: none; |
|
|
|
-webkit-box-shadow: none; |
|
|
|
-moz-box-shadow: none; |
|
|
|
-moz-box-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
&:active, |
|
|
|
.chat .input.active, |
|
|
|
&:focus { |
|
|
|
.chat .input:active, |
|
|
|
border-color:#66afe9; |
|
|
|
.chat .input:focus { |
|
|
|
} |
|
|
|
border-color:#66afe9; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes newmessage { |
|
|
|
@keyframes newmessage { |
|
|
|
@ -466,22 +470,16 @@ |
|
|
|
100% {background-color: rgba(132,184,25,1.0);} |
|
|
|
100% {background-color: rgba(132,184,25,1.0);} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@-webkit-keyframes newmessage { |
|
|
|
.chat.newmessage { |
|
|
|
0% {background-color: rgba(132,184,25,1.0);} |
|
|
|
.chatheadertitle:after { |
|
|
|
50% {background-color: $componentbg;} |
|
|
|
content: "***"; |
|
|
|
100% {background-color: rgba(132,184,25,1.0);} |
|
|
|
position: absolute; |
|
|
|
} |
|
|
|
right: 32px; |
|
|
|
|
|
|
|
top: 2px; |
|
|
|
.chat.newmessage .chatheader, .chatlist .list-group-item.newmessage { |
|
|
|
} |
|
|
|
animation: newmessage 1s ease -0.3s infinite; |
|
|
|
.chatheader { |
|
|
|
-webkit-animation: newmessage 1s ease -0.3s infinite; |
|
|
|
animation: newmessage 1s ease -0.3s infinite; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.chat.newmessage .chatheadertitle:after { |
|
|
|
|
|
|
|
content: "***"; |
|
|
|
|
|
|
|
position:absolute; |
|
|
|
|
|
|
|
top:2px; |
|
|
|
|
|
|
|
right:32px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media all and (max-height: 210px) { |
|
|
|
@media all and (max-height: 210px) { |
|
|
|
|
Evan Theurer
12 years ago