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