pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Convert chat to scss. Change colors to variables.

pull/29/head^2
Evan Theurer 12 years ago
parent
8be131f5db
commit
9d8ddd389e
2 changed files with 261 additions and 260 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 520
      src/styles/components/_chat.scss
  2. 1
      src/styles/global/_variables.scss

520
src/styles/components/_chat.scss
Unescape View File

@ -58,6 +58,15 @@
width: 260px; width: 260px;
} }
.showchatlist {
.chatpane {
right: 100%;
}
.chatlist {
left: 0;
}
}
.chatlist { .chatlist {
position: absolute; position: absolute;
top: 0; top: 0;
@ -118,15 +127,6 @@
width: 100%; width: 100%;
} }
.showchatlist {
.chatpane {
right: 100%;
}
.chatlist {
left: 0;
}
}
.chat { .chat {
background: $chat-background; background: $chat-background;
display: none; display: none;
@ -211,300 +211,300 @@
} }
.chat .outputbox { .chat .outputbox {
position:absolute; bottom: 75px;
left:0px; left: 0;
right:0px; position: absolute;
top:0px; right: 0;
bottom:75px; top: 0;
}
.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 { .chat .output {
font-size:0.8em; height: 100%;
color: #aaa; overflow-x: hidden;
text-align:right; overflow-y: auto;
position:absolute; padding: 0.4em 0;
top:8px; > i {
right:8px; clear: both;
color: #aaa;
display: block;
font-size: 0.8em;
padding: 6px 0;
text-align: center;
&.p2p {
padding: 6px 0;
font-weight: bold;
}
}
} }
.chat.with_pictures .output .message.is_self .timestamp { .chat.with_pictures .output .message.is_self .timestamp {
right:58px; 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 { .chat.with_pictures .output .message.is_remote {
padding-left: 58px; padding-left: 58px;
} }
.chat.with_pictures .output .message.is_self {
.chat .output .message:before, .chat .output .message:after { padding-right:54px;
content:""; }
position:absolute;
border-style: solid;
width:0; .chat .message {
display:block; background: #fff;
} border: 1px solid #e5e5ef;
.chat .output .message.is_remote:before { border-radius: 6px;
top:4px; clear: both;
bottom:auto; display: block;
left:-16px; margin-bottom: 2px;
border-width: 10px 17px 10px 0; padding: 8px;
border-color: transparent #fff; position: relative;
} margin-left: 20px;
.chat .output .message.is_remote:after { margin-right: 4px;
top:5px; word-wrap: break-word;
bottom:auto; ul {
left:-15px; list-style-type: none;
border-width: 9px 15px 9px 0; margin: 0;
border-color: transparent #fff; padding-left: 0;
} }
.chat .output .message.is_self:before { li {
top:4px; line-height: 1.1em;
bottom:auto; margin: 4px 0;
right:-16px; padding-left: 1.2em;
border-width: 10px 0 10px 17px; position: relative;
border-color: transparent #fff; &:before {
} color: #ccc;
.chat .output .message.is_self:after { content: '\f075';
top:5px; font-family: FontAwesome;
bottom:auto; left: 0;
right:-15px; text-align: center;
border-width: 9px 0 9px 15px; position: absolute;
border-color: transparent #fff; width: 12px;
}
}
.timestamp {
color: $chat-timestamp;
font-size: 0.8em;
position: absolute;
right: 8px;
text-align: right;
top: 8px;
}
} }
.chat .output .message.with_name { .chat .message {
&.is_self li:before {
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;
}
} }
.chat .output .message.is_self { .chat .message {
background: #fff; &.is_self .avatar {
margin-right:20px; right: 4px;
margin-left:4px; left: auto;
padding-right:0px; }
.avatar {
position: absolute;
top: 4px;
width:46px;
height:46px;
left: 4px;
overflow: hidden;
border-radius: 2px;
background: $actioncolor1;
text-align:center;
.#{$fa-css-prefix} {
line-height:46px;
color:$actioncolor2;
}
img {
position: absolute;
left:0px;
right:0px;
bottom:0px;
top:0px;
display:block;
}
}
} }
.chat.with_pictures .output .message.is_self {
padding-right:54px; .chat .message {
&:before,
&:after {
content: "";
position: absolute;
border-style: solid;
width: 0;
display: block;
}
&.is_remote {
&:before {
top: 4px;
bottom: auto;
left: -16px;
border-width: 10px 17px 10px 0;
border-color: transparent #fff;
}
&:after {
top:5px;
bottom:auto;
left:-15px;
border-width: 9px 15px 9px 0;
border-color: transparent #fff;
}
}
&.is_self {
background: #fff;
margin-right:20px;
margin-left:4px;
padding-right:0px;
&:before {
top:4px;
bottom:auto;
right:-16px;
border-width: 10px 0 10px 17px;
border-color: transparent #fff;
}
&:after {
top:5px;
bottom:auto;
right:-15px;
border-width: 9px 0 9px 15px;
border-color: transparent #fff;
}
}
&.with_name {
// none
}
} }
.chat .output .message strong { .chat .output .message strong {
display:block; display:block;
padding-bottom:2px; padding-bottom:2px;
margin-right:40px; margin-right:40px;
white-space:nowrap; white-space:nowrap;
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; text-overflow:ellipsis;
} }
.chat .chatbodybottom { .chat .chatbodybottom {
background: #e7e7e7; background: #e7e7e7;
position: absolute; position: absolute;
left:0px; left:0px;
bottom:1px; bottom:1px;
right:0px; right:0px;
margin:0 auto; margin:0 auto;
} }
.chat .typinghint { .chat .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 { .chat .inputbox {
position:relative; position:relative;
} }
.chat .inputbox .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;
} }
.chat .inputbox > div { .chat .inputbox > div {
border-top:1px solid $bordercolor; border-top:1px solid $bordercolor;
} }
.chat .input { .chat .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;
} }
.chat .input.active, .chat .input:active, .chat .input:focus { .chat .input.active,
border-color:#66afe9; .chat .input:active,
.chat .input:focus {
border-color:#66afe9;
} }
@keyframes newmessage { @keyframes newmessage {
0% {background-color: rgba(132,184,25,1.0);} 0% {background-color: rgba(132,184,25,1.0);}
50% {background-color: $componentbg;} 50% {background-color: $componentbg;}
100% {background-color: rgba(132,184,25,1.0);} 100% {background-color: rgba(132,184,25,1.0);}
} }
@-webkit-keyframes newmessage { @-webkit-keyframes newmessage {
0% {background-color: rgba(132,184,25,1.0);} 0% {background-color: rgba(132,184,25,1.0);}
50% {background-color: $componentbg;} 50% {background-color: $componentbg;}
100% {background-color: rgba(132,184,25,1.0);} 100% {background-color: rgba(132,184,25,1.0);}
} }
.chat.newmessage .chatheader, .chatlist .list-group-item.newmessage { .chat.newmessage .chatheader, .chatlist .list-group-item.newmessage {
animation: newmessage 1s ease -0.3s infinite; animation: newmessage 1s ease -0.3s infinite;
-webkit-animation: newmessage 1s ease -0.3s infinite; -webkit-animation: newmessage 1s ease -0.3s infinite;
} }
.chat.newmessage .chatheadertitle:after { .chat.newmessage .chatheadertitle:after {
content: "***"; content: "***";
position:absolute; position:absolute;
top:2px; top:2px;
right:32px; right:32px;
} }
@media all and (max-height: 210px) { @media all and (max-height: 210px) {
.chat .inputbox { .chat .inputbox {
height: auto; height: auto;
} }
.chat .input { .chat .input {
max-height: 2.5em; max-height: 2.5em;
} }
.chat .outputbox { .chat .outputbox {
bottom:45px; bottom:45px;
} }
.chat .chatbodybottom { .chat .chatbodybottom {
height: auto; height: auto;
} }
.chat .typinghint { .chat .typinghint {
display: none; display: none;
} }
.chat .chatheader { .chat .chatheader {
display: none; display: none;
} }
.chat .chatbody { .chat .chatbody {
border-top: 1px solid $bordercolor; border-top: 1px solid $bordercolor;
top: 0px; top: 0px;
} }
} }

1
src/styles/global/_variables.scss
Unescape View File

@ -52,6 +52,7 @@ $chat-background: #e7e7e7;
$chat-disabled: #aaa; $chat-disabled: #aaa;
$chat-badge: #84b819; $chat-badge: #84b819;
$chat-ctrl: rgba(0,0,0,.3); $chat-ctrl: rgba(0,0,0,.3);
$chat-timestamp: #aaa;
$tap-highlight: rgba(0, 0, 0, 0); $tap-highlight: rgba(0, 0, 0, 0);

Write Preview
Loading…
Cancel
Save