You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
510 lines
8.7 KiB
510 lines
8.7 KiB
/* |
|
* Spreed Speak Freely. |
|
* Copyright (C) 2013-2014 struktur AG |
|
* |
|
* This file is part of Spreed Speak Freely. |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as published by |
|
* the Free Software Foundation, either version 3 of the License, or |
|
* (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
|
|
#chat { |
|
bottom: 0; |
|
perspective: 1000; |
|
pointer-events: none; |
|
position: absolute; |
|
right: 260px; |
|
top: 0; |
|
width: 260px; |
|
z-index: 45; |
|
} |
|
|
|
.withChat #chat .chatcontainer { |
|
left:0px; |
|
} |
|
|
|
.withChat .chatpane.flip { |
|
transform: rotateY(360deg); |
|
} |
|
|
|
.withChat.withChatMaximized #chat { |
|
left: 0; |
|
width: auto; |
|
.chatcontainer { |
|
width: auto; |
|
} |
|
} |
|
|
|
.chatcontainer { |
|
background: $chat-background; |
|
bottom: 0; |
|
left: 260px; |
|
overflow: hidden; |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
transition: left 200ms ease-in-out; |
|
width: 260px; |
|
} |
|
|
|
.chatlist { |
|
position: absolute; |
|
top: 0; |
|
left: 100%; |
|
bottom: 0; |
|
width: 100%; |
|
background: $chat-background; |
|
transition: left 200ms ease-in-out; |
|
.list-group { |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
margin-top: -1px; |
|
margin-bottom: -1px; |
|
max-height: 100%; |
|
} |
|
.list-group-item { |
|
border-right: none; |
|
border-left: none; |
|
border-radius: 0; |
|
position: relative; |
|
} |
|
.list-group-item .fa-lg { |
|
display: inline-block; |
|
text-align: center; |
|
width: 18px; |
|
} |
|
.list-group-item .badge { |
|
background: $chat-badge; |
|
border: 1px solid white; |
|
font-size: .8em; |
|
} |
|
.list-group-item { |
|
padding-right: 30px; |
|
} |
|
.list-group-item.disabled { |
|
color: $chat-disabled; |
|
} |
|
.list-group-item > .item-btn { |
|
cursor: pointer; |
|
display:none; |
|
position:absolute; |
|
right:12px; |
|
} |
|
.list-group-item:hover > .item-btn { |
|
display:inline; |
|
} |
|
|
|
} |
|
|
|
.chatpane { |
|
backface-visibility: hidden; |
|
bottom: 0; |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
transition: 0.3s; |
|
transform-style: preserve-3d; |
|
width: 100%; |
|
} |
|
|
|
.showchatlist { |
|
.chatpane { |
|
right: 100%; |
|
} |
|
.chatlist { |
|
left: 0; |
|
} |
|
} |
|
|
|
.chat { |
|
background: $chat-background; |
|
display: none; |
|
bottom: 0; |
|
left: 0; |
|
overflow: hidden; |
|
pointer-events: auto; |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
} |
|
|
|
.chat { |
|
&.active { |
|
&.visible { |
|
display:block; |
|
} |
|
.chatbody { |
|
// nothing |
|
} |
|
.chatheader { |
|
// nothing |
|
} |
|
} |
|
} |
|
|
|
.chatbody { |
|
border-right: 1px solid $bordercolor; |
|
bottom: -1px; |
|
left: 0; |
|
position: absolute; |
|
right: 0; |
|
top: 36px; |
|
} |
|
|
|
.chatheader { |
|
background: $componentbg; |
|
border-top: 1px solid $bordercolor; |
|
border-bottom: 1px solid $bordercolor; |
|
border-right: 1px solid $bordercolor; |
|
height: 36px; |
|
left: 0; |
|
line-height: 34px; |
|
padding: 0 4px 0 8px; |
|
position: absolute; |
|
right: 0; |
|
top: 0; |
|
.chatstatusicon { |
|
cursor: pointer; |
|
display: block; |
|
font-size: 1.4em; |
|
height: 36px; |
|
left: 0; |
|
position: absolute; |
|
text-align: center; |
|
top: 0; |
|
width: 36px; |
|
} |
|
.chatheadertitle { |
|
padding-left: 28px; |
|
display: inline; |
|
} |
|
.ctrl { |
|
color: $chat-ctrl; |
|
position: absolute; |
|
right: 1px; |
|
top: 0; |
|
.#{$fa-css-prefix} { |
|
cursor: pointer; |
|
padding: 6px; |
|
} |
|
} |
|
span { |
|
display: inline-block; |
|
max-width: 60%; |
|
overflow: hidden; |
|
pointer-events: none; |
|
text-overflow: ellipsis; |
|
vertical-align: middle; |
|
white-space: nowrap; |
|
} |
|
} |
|
|
|
.chat .outputbox { |
|
position:absolute; |
|
left:0px; |
|
right:0px; |
|
top:0px; |
|
bottom:75px; |
|
} |
|
.chat .output { |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
padding: 0.4em 0; |
|
height:100%; |
|
} |
|
.chat .output > i { |
|
font-size:0.8em; |
|
color: #aaa; |
|
display:block; |
|
padding:6px 0; |
|
text-align:center; |
|
clear:both; |
|
} |
|
.chat .output > i.p2p { |
|
padding:6px 0; |
|
font-weight: bold; |
|
} |
|
.chat .output .message { |
|
background: #fff; |
|
border: 1px solid #e5e5ef; |
|
border-radius: 6px; |
|
margin-bottom: 2px; |
|
position: relative; |
|
word-wrap: break-word; |
|
padding:8px; |
|
margin-left:20px; |
|
margin-right:4px; |
|
clear:both; |
|
display:block; |
|
} |
|
|
|
.chat .output .message .timestamp { |
|
font-size:0.8em; |
|
color: #aaa; |
|
text-align:right; |
|
position:absolute; |
|
top:8px; |
|
right:8px; |
|
} |
|
|
|
.chat.with_pictures .output .message.is_self .timestamp { |
|
right:58px; |
|
} |
|
|
|
.chat .output .message > ul { |
|
list-style-type: none; |
|
margin:0; |
|
padding-left:0; |
|
} |
|
|
|
.chat .output .message > ul > li { |
|
line-height:1.1em; |
|
margin:4px 0; |
|
padding-left:1.2em; |
|
position:relative; |
|
} |
|
|
|
.chat .message li:before { |
|
font-family: 'FontAwesome'; |
|
content: '\f075'; |
|
color:#ccc; |
|
position:absolute; |
|
left:0px; |
|
width:12px; |
|
text-align:center; |
|
} |
|
|
|
.chat .message.is_self li:before { |
|
moz-transform: scale(-1, 1); |
|
-webkit-transform: scale(-1, 1); |
|
transform: scale(-1, 1); |
|
color:#ccc; |
|
} |
|
|
|
.chat .message li.unread:before { |
|
content: '\f0eb'; |
|
color: #FE9A2E; |
|
} |
|
|
|
.chat .message li.sending:before { |
|
content: '\f0ec'; |
|
} |
|
|
|
.chat .message li.sent:before { |
|
content: '\f003'; |
|
color:#5882FA; |
|
} |
|
|
|
.chat .message li.delivered:before { |
|
content: '\f019'; |
|
color:#5882FA; |
|
} |
|
|
|
.chat .message li.received:before { |
|
content: '\f06e'; |
|
color:#84b819; |
|
} |
|
|
|
.chat .message li.read:before { |
|
content: '\f00c'; |
|
color:#ccc; |
|
} |
|
|
|
.chat .output .message .avatar { |
|
position: absolute; |
|
top: 4px; |
|
width:46px; |
|
height:46px; |
|
left: 4px; |
|
overflow: hidden; |
|
border-radius: 2px; |
|
background: $actioncolor1; |
|
text-align:center; |
|
} |
|
.chat .output .message.is_self .avatar { |
|
right: 4px; |
|
left: auto; |
|
} |
|
.chat .output .message .avatar > i { |
|
line-height:46px; |
|
color:$actioncolor2; |
|
} |
|
.chat .output .message .avatar > img { |
|
position: absolute; |
|
left:0px; |
|
right:0px; |
|
bottom:0px; |
|
top:0px; |
|
display:block; |
|
} |
|
|
|
.chat.with_pictures .output .message.is_remote { |
|
padding-left: 58px; |
|
} |
|
|
|
.chat .output .message:before, .chat .output .message:after { |
|
content:""; |
|
position:absolute; |
|
border-style: solid; |
|
width:0; |
|
display:block; |
|
} |
|
.chat .output .message.is_remote:before { |
|
top:4px; |
|
bottom:auto; |
|
left:-16px; |
|
border-width: 10px 17px 10px 0; |
|
border-color: transparent #fff; |
|
} |
|
.chat .output .message.is_remote:after { |
|
top:5px; |
|
bottom:auto; |
|
left:-15px; |
|
border-width: 9px 15px 9px 0; |
|
border-color: transparent #fff; |
|
} |
|
.chat .output .message.is_self:before { |
|
top:4px; |
|
bottom:auto; |
|
right:-16px; |
|
border-width: 10px 0 10px 17px; |
|
border-color: transparent #fff; |
|
} |
|
.chat .output .message.is_self:after { |
|
top:5px; |
|
bottom:auto; |
|
right:-15px; |
|
border-width: 9px 0 9px 15px; |
|
border-color: transparent #fff; |
|
} |
|
|
|
.chat .output .message.with_name { |
|
} |
|
|
|
.chat .output .message.is_self { |
|
background: #fff; |
|
margin-right:20px; |
|
margin-left:4px; |
|
padding-right:0px; |
|
} |
|
.chat.with_pictures .output .message.is_self { |
|
padding-right:54px; |
|
} |
|
|
|
.chat .output .message strong { |
|
display:block; |
|
padding-bottom:2px; |
|
margin-right:40px; |
|
white-space:nowrap; |
|
overflow:hidden; |
|
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; |
|
} |
|
|
|
@keyframes newmessage { |
|
0% {background-color: rgba(132,184,25,1.0);} |
|
50% {background-color: $componentbg;} |
|
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; |
|
} |
|
|
|
@media all and (max-height: 210px) { |
|
.chat .inputbox { |
|
height: auto; |
|
} |
|
.chat .input { |
|
max-height: 2.5em; |
|
} |
|
.chat .outputbox { |
|
bottom:45px; |
|
} |
|
.chat .chatbodybottom { |
|
height: auto; |
|
} |
|
.chat .typinghint { |
|
display: none; |
|
} |
|
.chat .chatheader { |
|
display: none; |
|
} |
|
.chat .chatbody { |
|
border-top: 1px solid $bordercolor; |
|
top: 0px; |
|
} |
|
}
|
|
|