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. 203
      src/styles/components/_buddylist.scss
  2. 412
      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. 8
      static/partials/buddy.html

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

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

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

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);
} }

8
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