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 buddylist to scss. 

Rearrange elements.

Change out colors for variables.

Rename .buddy1 to .display-name and .buddy2 to .browser.

Change out i selector with font-awesome variable prefix selector class.

Rename .buddyimage to .avatar

Convert part of chat to scss. Move colors to varialbes.

Convert chat to scss. Change colors to variables.

Convert chat to scss.
pull/30/head
Evan Theurer 12 years ago
parent
63af6e4462
commit
6b2cbcfa4a
6 changed files with 624 additions and 604 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. 319
      src/styles/components/_buddylist.scss
  2. 878
      src/styles/components/_chat.scss
  3. 5
      src/styles/global/_mixins.scss
  4. 14
      src/styles/global/_variables.scss
  5. 2
      static/js/controllers/chatroomcontroller.js
  6. 10
      static/partials/buddy.html

319
src/styles/components/_buddylist.scss
Unescape View File

@ -18,168 +18,181 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
#buddylist { #buddylist {
position: absolute; bottom: 0;
top: 0px; position: absolute;
right: 0px; right: 0;
bottom: 0px; top: 0;
width:285px; width: 285px;
z-index:50; z-index: 50;
} }
#buddylist:before { #buddylist:before {
position:absolute; background: $componentbg;
width:25px; border-left: 1px solid $bordercolor;
height:55px; border-top: 1px solid $bordercolor;
line-height:55px; border-bottom: 1px solid $bordercolor;
margin: auto; border-top-left-radius: 6px;
left: 0px; border-bottom-left-radius: 6px;
top:0px; bottom: 0;
bottom:0px; color: $buddylist-background;
content:"\f100"; content: "\f100";
font-family: 'FontAwesome'; cursor: pointer;
color:rgba(0,0,0,0.3); display: none;
font-size:1.8em; font-family: FontAwesome;
text-align:center; font-size: 1.8em;
cursor:pointer; height: 55px;
pointer-events:auto; left: 0;
background:$componentbg; line-height: 55px;
border-left:1px solid $bordercolor; margin: auto;
border-top:1px solid $bordercolor; pointer-events: auto;
border-bottom:1px solid $bordercolor; position: absolute;
-webkit-border-top-left-radius: 6px; text-align: center;
-webkit-border-bottom-left-radius: 6px; top: 0;
-moz-border-radius-topleft: 6px; width: 25px;
-moz-border-radius-bottomleft: 6px; }
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display:none;
}
.withBuddylist #buddylist:before { .withBuddylist #buddylist:before {
content:"\f101"; content: "\f101";
} }
.withBuddylistAutoHide #buddylist:before { .withBuddylistAutoHide #buddylist:before {
display:block; display: block;
} }
.buddylist { .buddylist {
position:absolute; background: $componentbg;
left:25px; border-top: 1px solid $bordercolor;
right:0px; bottom: 0;
top:0px; left: 25px;
bottom:0px; overflow-x: hidden;
overflow-x: hidden; overflow-y: auto;
overflow-y: auto; pointer-events: auto;
border-top: 1px solid $bordercolor; position: absolute;
background: $componentbg; right: 0;
pointer-events:auto; top: 0;
} }
.buddylist .buddycontainer {
-webkit-user-select: none; .buddylist {
position: relative; &.loading {
pointer-events:auto; .buddylistloading {
} display:block;
.buddylist .buddylistloading, .buddylist .buddylistempty { }
padding:.4em; }
font-size:1.4em; &.empty {
text-align:center; .buddylistempty {
display:none; display:block;
position:absolute; }
left:0px; }
right:0px; .buddycontainer {
bottom:0px; pointer-events: auto;
top:0px; position: relative;
margin:auto; user-select: none;
height:2em; }
color:rgba(0,0,0,0.3); .buddylistloading,
} .buddylistempty {
.buddylist.loading .buddylistloading { bottom: 0;
display:block; color: $buddylist-background;
} display: none;
.buddylist.empty .buddylistempty { font-size: 1.4em;
display:block; height: 2em;
} left: 0;
margin: auto;
padding:.4em;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
}
.buddy { .buddy {
overflow: hidden; background: $sidepanebg;
height: 66px; border-bottom: 1px solid $bordercolor;
display: block; cursor: pointer;
border-bottom: 1px solid $bordercolor; display: block;
position: relative; font-size: 13px;
cursor: pointer; height: 66px;
text-align: left; overflow: hidden;
width: 100%; position: relative;
font-size: 13px; text-align: left;
background: $sidepanebg; width: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); @include tap-highlight-color($tap-highlight);
} }
.buddy:hover { .buddy:hover {
background: $componentbg; background: $componentbg;
}
.buddy > .buddyimage {
float:left;
height: 46px;
width: 46px;
overflow: hidden;
margin: 10px;
position: relative;
border-radius: 2px;
background: $actioncolor1;
text-align:center;
}
.buddy > .buddyimage > i {
line-height:46px;
color:$actioncolor2;
}
.buddy > .buddyimage > img {
position: absolute;
left:0px;
right:0px;
bottom:0px;
top:0px;
display:block;
}
.buddy > .buddy1 {
position: absolute;
left: 65px;
white-space: nowrap;
overflow: hidden;
right: 4px;
height: 28px;
color: $componentfg1;
font-weight:bold;
font-size:14px;
top: 24px;
text-overflow: ellipsis;
}
.buddy.withSubline > .buddy1 {
top: 15px;
}
.buddy > .buddy2 {
position: absolute;
left: 65px;
white-space: nowrap;
overflow: hidden;
right: 0px;
color: $componentfg2;
top: 33px;
} }
.buddy {
&.withSubline .display-name {
top: 15px;
}
&.hovered .buddyactions {
right: 0;
}
.avatar {
background: $actioncolor1;
border-radius: 2px;
float: left;
height: 46px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: center;
width: 46px;
.#{$fa-css-prefix} {
color: $actioncolor2;
line-height: 46px;
}
img {
bottom: 0;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
}
}
.display-name {
color: $componentfg1;
font-weight: bold;
font-size: 14px;
height: 28px;
left: 65px;
position: absolute;
overflow: hidden;
right: 4px;
text-overflow: ellipsis;
top: 24px;
white-space: nowrap;
}
.browser {
color: $componentfg2;
left: 65px;
overflow: hidden;
position: absolute;
right: 0px;
top: 33px;
white-space: nowrap;
}
}
.buddy .buddyactions { .buddy .buddyactions {
position:absolute; background: $buddylist-action-background;
right:-125px; bottom: 0px;
top:0px; line-height: 66px;
bottom:0px; position: absolute;
background:rgba(255,255,255,0.5); right: -125px;
z-index:5; padding: 0 10px;
line-height:66px; text-align: right;
padding:0 10px; top: 0px;
transition-property: right; transition-property: right;
-webkit-transition-property: right; transition-duration: .3s;
transition-duration: .3s; white-space: nowrap;
-webkit-transition-duration: .3s; z-index: 5;
white-space:nowrap; .#{$fa-css-prefix} {
text-align:right; font-size: 2em;
} }
.buddy .buddyactions i {
font-size:2em;
}
.buddy.hovered .buddyactions {
right:0px;
} }

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

@ -18,499 +18,491 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
#chat { #chat {
position: absolute; bottom: 0;
bottom:0px; perspective: 1000;
right:260px; pointer-events: none;
width:260px; position: absolute;
top:0px; right: 260px;
pointer-events: none; top: 0;
z-index:45; width: 260px;
-webkit-perspective: 1000; z-index: 45;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
} }
.withChat #chat .chatcontainer { .withChat #chat .chatcontainer {
left:0px; left:0px;
} }
.withChat.withChatMaximized #chat {
left:0px;
width:auto;
.chatcontainer {
width:auto;
}
}
.chatcontainer {
position:absolute;
top:0px;
left:260px;
right:0px;
bottom:0px;
width:260px;
overflow:hidden;
-webkit-transition: left 200ms ease-in-out;
-moz-transition: left 200ms ease-in-out;
-ms-transition: left 200ms ease-in-out;
-o-transition: left 200ms ease-in-out;
transition: left 200ms ease-in-out;
background: #e7e7e7;
}
.chatlist {
position:absolute;
top:0px;
left:100%;
bottom:0px;
width:100%;
background: #e7e7e7;
-webkit-transition: left 200ms ease-in-out;
-moz-transition: left 200ms ease-in-out;
-ms-transition: left 200ms ease-in-out;
-o-transition: left 200ms ease-in-out;
transition: left 200ms ease-in-out;
.list-group {
margin-top:-1px;
margin-bottom:-1px;
max-height:100%;
overflow-x: hidden;
overflow-y: auto;
}
.list-group-item {
border-right:none;
border-left:none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
position:relative;
}
.list-group-item .fa-lg {
display:inline-block;
width:18px;
text-align:center;
}
.list-group-item .badge {
background: #84b819;
border: 1px solid white;
font-size:.8em;
}
.list-group-item {
padding-right: 30px;
}
.list-group-item.disabled {
color:#aaa;
}
.list-group-item > .item-btn {
position:absolute;
right:12px;
cursor: pointer;
display:none;
}
.list-group-item:hover > .item-btn {
display:inline;
}
}
.chatpane {
position:absolute;
top:0px;
right:0px;
bottom:0px;
width:100%;
-webkit-transition: 0.3s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.3s;
-moz-transform-style: preserve-3d;
-o-transition: 0.3s;
-o-transform-style: preserve-3d;
transition: 0.3s;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.showchatlist .chatpane {
right:100%;
}
.showchatlist .chatlist {
left:0px;
}
.withChat .chatpane.flip { .withChat .chatpane.flip {
-webkit-transform: rotateY(360deg); transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
}
.chat {
pointer-events: auto;
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
background: #e7e7e7;
overflow:hidden;
display:none;
}
.chat.visible {
}
.chat.visible.active {
display:block;
}
.chat .chatbody {
position:absolute;
bottom:-1px;
left:0px;
right:0px;
top: 36px;
border-right:1px solid $bordercolor;
}
.chat.active .chatbody {
}
.chat .chatheader {
position:absolute;
left:0px;
right:0px;
top:0px;
background: $componentbg;
padding:0px 4px 0px 8px;
border-top: 1px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
border-right: 1px solid $bordercolor;
height:36px;
line-height:34px;
}
.chat.active .chatheader {
}
.chat .chatheader .chatstatusicon {
position:absolute;
left:0px;
top:0px;
font-size:1.4em;
width:36px;
height:36px;
display:block;
text-align:center;
cursor: pointer;
}
.chat .chatheader .chatheadertitle {
padding-left:28px;
display:inline;
}
.chat .chatheader .ctrl {
position:absolute;
top:0px;
right:1px;
color:rgba(0,0,0,0.3);
}
.chat .chatheader span {
display: inline-block;
max-width:60%;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
pointer-events: none;
vertical-align: middle;
}
.chat .chatheader .ctrl i {
padding:6px;
cursor: pointer;
}
.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 { .withChat.withChatMaximized #chat {
right:58px; left: 0;
width: auto;
.chatcontainer {
width: auto;
}
} }
.chat .output .message > ul { .chatcontainer {
list-style-type: none; background: $chat-background;
margin:0; bottom: 0;
padding-left:0; left: 260px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: left 200ms ease-in-out;
width: 260px;
} }
.chat .output .message > ul > li { .showchatlist {
line-height:1.1em; .chatpane {
margin:4px 0; right: 100%;
padding-left:1.2em; }
position:relative; .chatlist {
left: 0;
}
} }
.chat .message li:before { .chatlist {
font-family: 'FontAwesome'; position: absolute;
content: '\f075'; top: 0;
color:#ccc; left: 100%;
position:absolute; bottom: 0;
left:0px; width: 100%;
width:12px; background: $chat-background;
text-align:center; 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.newmessage {
animation: newmessage 1s ease -0.3s infinite;
}
.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;
}
} }
.chat .message.is_self li:before { .chatpane {
moz-transform: scale(-1, 1); backface-visibility: hidden;
-webkit-transform: scale(-1, 1); bottom: 0;
transform: scale(-1, 1); position: absolute;
color:#ccc; right: 0;
top: 0;
transition: 0.3s;
transform-style: preserve-3d;
width: 100%;
} }
.chat .message li.unread:before { .chat {
content: '\f0eb'; background: $chat-background;
color: #FE9A2E; display: none;
bottom: 0;
left: 0;
overflow: hidden;
pointer-events: auto;
position: absolute;
right: 0;
top: 0;
} }
.chat .message li.sending:before { .chat {
content: '\f0ec'; &.active {
&.visible {
display:block;
}
.chatbody {
// nothing
}
.chatheader {
// nothing
}
}
} }
.chat .message li.sent:before { .chatbody {
content: '\f003'; border-right: 1px solid $bordercolor;
color:#5882FA; bottom: -1px;
left: 0;
position: absolute;
right: 0;
top: 36px;
} }
.chat .message li.delivered:before { .chatheader {
content: '\f019'; background: $componentbg;
color:#5882FA; 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 .message li.received:before { .chat .outputbox {
content: '\f06e'; bottom: 75px;
color:#84b819; left: 0;
position: absolute;
right: 0;
top: 0;
} }
.chat .message li.read:before { .chat .output {
content: '\f00c'; height: 100%;
color:#ccc; overflow-x: hidden;
overflow-y: auto;
padding: 0.4em 0;
> i {
clear: both;
color: #aaa;
display: block;
font-size: 0.8em;
padding: 6px 0;
text-align: center;
&.p2p {
padding: 6px 0;
font-weight: bold;
}
}
} }
.chat .output .message .buddyimage { .chat.with_pictures .output .message.is_self .timestamp {
position: absolute; right: 58px;
top: 4px;
width:46px;
height:46px;
left: 4px;
overflow: hidden;
border-radius: 2px;
background: $actioncolor1;
text-align:center;
}
.chat .output .message.is_self .buddyimage {
right: 4px;
left: auto;
}
.chat .output .message .buddyimage > i {
line-height:46px;
color:$actioncolor2;
}
.chat .output .message .buddyimage > 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 .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 { .chat.with_pictures .output .message.is_self {
top:5px; padding-right:54px;
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 { .chat .message {
background: #fff; background: #fff;
margin-right:20px; border: 1px solid #e5e5ef;
margin-left:4px; border-radius: 6px;
padding-right:0px; clear: both;
} display: block;
.chat.with_pictures .output .message.is_self { margin-bottom: 2px;
padding-right:54px; padding: 8px;
position: relative;
margin-left: 20px;
margin-right: 4px;
word-wrap: break-word;
ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
li {
line-height: 1.1em;
margin: 4px 0;
padding-left: 1.2em;
position: relative;
&:before {
color: #ccc;
content: '\f075';
font-family: FontAwesome;
left: 0;
text-align: center;
position: absolute;
width: 12px;
}
}
.timestamp {
color: $chat-timestamp;
font-size: 0.8em;
position: absolute;
right: 8px;
text-align: right;
top: 8px;
}
} }
.chat .output .message strong { .chat .message {
display:block; &.is_self li:before {
padding-bottom:2px; color:#ccc;
margin-right:40px; transform: scale(-1, 1);
white-space:nowrap; }
overflow:hidden; li {
text-overflow:ellipsis; &.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 .chatbodybottom { .chat .message {
background: #e7e7e7; &.is_self .avatar {
position: absolute; right: 4px;
left:0px; left: auto;
bottom:1px; }
right:0px; .avatar {
margin:0 auto; 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 .typinghint { .chat .message {
padding:2px 6px 0 6px; &:before,
white-space: nowrap; &:after {
overflow: hidden; content: "";
font-size:.8em; position: absolute;
color: #aaa; border-style: solid;
height:14px; width: 0;
} display: block;
.chat .inputbox { }
position:relative; &.is_remote {
} &:before {
.chat .inputbox .btn { top: 4px;
position:absolute; bottom: auto;
right:6px; left: -16px;
top:1px; border-width: 10px 17px 10px 0;
padding: 0.5em 1em; border-color: transparent #fff;
display:none; }
} &:after {
.chat .inputbox > div { top:5px;
border-top:1px solid $bordercolor; bottom:auto;
} left:-15px;
.chat .input { border-width: 9px 15px 9px 0;
display:block; border-color: transparent #fff;
resize: none; }
width:100%; }
height:54px; &.is_self {
max-height:54px; /* FF hack */ background: #fff;
margin:0px; margin-right:20px;
-webkit-border-radius: 0px; margin-left:4px;
-moz-border-radius: 0px; padding-right:0px;
border-radius: 0px; &:before {
border-color:transparent; top:4px;
-webkit-box-shadow: none; bottom:auto;
-moz-box-shadow: none; right:-16px;
box-shadow: none; border-width: 10px 0 10px 17px;
} border-color: transparent #fff;
.chat .input.active, .chat .input:active, .chat .input:focus { }
border-color:#66afe9; &:after {
top:5px;
bottom:auto;
right:-15px;
border-width: 9px 0 9px 15px;
border-color: transparent #fff;
}
}
&.with_name {
// none
}
} }
@keyframes newmessage { .chat .output .message strong {
0% {background-color: rgba(132,184,25,1.0);} display:block;
50% {background-color: $componentbg;} padding-bottom:2px;
100% {background-color: rgba(132,184,25,1.0);} margin-right:40px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
} }
@-webkit-keyframes newmessage { .chat {
0% {background-color: rgba(132,184,25,1.0);} .chatbodybottom {
50% {background-color: $componentbg;} background: #e7e7e7;
100% {background-color: rgba(132,184,25,1.0);} 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;
}
}
} }
.chat.newmessage .chatheader, .chatlist .list-group-item.newmessage { @keyframes newmessage {
animation: newmessage 1s ease -0.3s infinite; 0% {background-color: rgba(132,184,25,1.0);}
-webkit-animation: newmessage 1s ease -0.3s infinite; 50% {background-color: $componentbg;}
100% {background-color: rgba(132,184,25,1.0);}
} }
.chat.newmessage .chatheadertitle:after { .chat.newmessage {
content: "***"; .chatheadertitle:after {
position:absolute; content: "***";
top:2px; position: absolute;
right:32px; right: 32px;
top: 2px;
}
.chatheader {
animation: newmessage 1s ease -0.3s infinite;
}
} }
@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;
} }
} }

5
src/styles/global/_mixins.scss
Unescape View File

@ -10,3 +10,8 @@
@content; @content;
} }
} }
// not handled by autoprefixer
@mixin tap-highlight-color($color) {
-webkit-tap-highlight-color: $color;
}

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

@ -45,6 +45,17 @@ $video-onlyaudio-background: #666;
$video-onlyaudio: rgba(255,255,255,.3); $video-onlyaudio: rgba(255,255,255,.3);
$video-overlayactions: rgba(0,0,0,.9); $video-overlayactions: rgba(0,0,0,.9);
$buddylist-background: rgba(0,0,0,.3);
$buddylist-action-background: rgba(255,255,255,0.5);
$chat-background: #e7e7e7;
$chat-disabled: #aaa;
$chat-badge: #84b819;
$chat-ctrl: rgba(0,0,0,.3);
$chat-timestamp: #aaa;
$tap-highlight: rgba(0, 0, 0, 0);
$breakpoint-small: 480px; $breakpoint-small: 480px;
$breakpoint-medium: 700px; $breakpoint-medium: 700px;
$breakpoint-large: 1280px; $breakpoint-large: 1280px;
@ -66,8 +77,7 @@ $minbarheight: 44px;
// ** Fontawsome changed variables ** // ** Fontawsome changed variables **
// original at libs/fontawesome/_variables.scss // original at libs/fontawesome/_variables.scss
// -------------------------- // --------------------------
$fa-css-prefix: fa;
// ** Bootstrap changed variables ** // ** Bootstrap changed variables **
// original at libs/bootstrap/_variables.scss // original at libs/bootstrap/_variables.scss

2
static/js/controllers/chatroomcontroller.js
Unescape View File

@ -299,7 +299,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome
title.html(displayName(from, true)); title.html(displayName(from, true));
extra_css += "with_name "; extra_css += "with_name ";
var imgSrc = buddyImageSrc(from); var imgSrc = buddyImageSrc(from);
picture = $('<div class="buddyimage"><i class="fa fa-user fa-3x"/><img/></div>'); picture = $('<div class="avatar"><i class="fa fa-user fa-3x"/><img/></div>');
if (imgSrc) { if (imgSrc) {
picture.find("img").attr("src", imgSrc); picture.find("img").attr("src", imgSrc);
} }

10
static/partials/buddy.html
Unescape View File

@ -1,5 +1,5 @@
<div class="buddy withSubline"> <div class="buddy withSubline" ng-click="doDefault(user.Id)">
<div class="buddyimage"><i class="fa fa-user fa-3x"/><img ng-show="status.buddyPicture" alt ng-src="{{status.buddyPicture}}" width="46" height="46"/></div> <div class="avatar"><i class="fa fa-user fa-3x"/><img ng-show="status.buddyPicture" alt ng-src="{{status.buddyPicture}}" width="46" height="46"/></div>
<div class="buddy1">{{session.Id|displayName}}</div> <div class="display-name">{{user.Id|displayName}}</div>
<div class="buddy2"><i ng-show="session.Userid" class="fa fa-star-o"></i> {{session.Ua}}</div> <div class="browser">{{user.Ua}}</div>
</div> </div>

Write Preview
Loading…
Cancel
Save