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
Split 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 @@ @@ -18,168 +18,181 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#buddylist {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width:285px;
z-index:50;
}
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 285px;
z-index: 50;
}
#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;
border-left:1px solid $bordercolor;
border-top: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-bottom-left-radius: 6px;
display:none;
}
background: $componentbg;
border-left: 1px solid $bordercolor;
border-top: 1px solid $bordercolor;
border-bottom: 1px solid $bordercolor;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
bottom: 0;
color: $buddylist-background;
content: "\f100";
cursor: pointer;
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 {
content:"\f101";
content: "\f101";
}
.withBuddylistAutoHide #buddylist:before {
display:block;
display: block;
}
.buddylist {
position:absolute;
left:25px;
right:0px;
top:0px;
bottom:0px;
overflow-x: hidden;
overflow-y: auto;
border-top: 1px solid $bordercolor;
background: $componentbg;
pointer-events:auto;
}
.buddylist .buddycontainer {
-webkit-user-select: none;
position: relative;
pointer-events:auto;
}
.buddylist .buddylistloading, .buddylist .buddylistempty {
padding:.4em;
font-size:1.4em;
text-align:center;
display:none;
position:absolute;
left:0px;
right:0px;
bottom:0px;
top:0px;
margin:auto;
height:2em;
color:rgba(0,0,0,0.3);
}
.buddylist.loading .buddylistloading {
display:block;
}
.buddylist.empty .buddylistempty {
display:block;
}
background: $componentbg;
border-top: 1px solid $bordercolor;
bottom: 0;
left: 25px;
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
position: absolute;
right: 0;
top: 0;
}
.buddylist {
&.loading {
.buddylistloading {
display:block;
}
}
&.empty {
.buddylistempty {
display:block;
}
}
.buddycontainer {
pointer-events: auto;
position: relative;
user-select: none;
}
.buddylistloading,
.buddylistempty {
bottom: 0;
color: $buddylist-background;
display: none;
font-size: 1.4em;
height: 2em;
left: 0;
margin: auto;
padding:.4em;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
}
.buddy {
overflow: hidden;
height: 66px;
display: block;
border-bottom: 1px solid $bordercolor;
position: relative;
cursor: pointer;
text-align: left;
width: 100%;
font-size: 13px;
background: $sidepanebg;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
background: $sidepanebg;
border-bottom: 1px solid $bordercolor;
cursor: pointer;
display: block;
font-size: 13px;
height: 66px;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
@include tap-highlight-color($tap-highlight);
}
.buddy:hover {
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;
background: $componentbg;
}
.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 {
position:absolute;
right:-125px;
top:0px;
bottom:0px;
background:rgba(255,255,255,0.5);
z-index:5;
line-height:66px;
padding:0 10px;
transition-property: right;
-webkit-transition-property: right;
transition-duration: .3s;
-webkit-transition-duration: .3s;
white-space:nowrap;
text-align:right;
}
.buddy .buddyactions i {
font-size:2em;
}
.buddy.hovered .buddyactions {
right:0px;
background: $buddylist-action-background;
bottom: 0px;
line-height: 66px;
position: absolute;
right: -125px;
padding: 0 10px;
text-align: right;
top: 0px;
transition-property: right;
transition-duration: .3s;
white-space: nowrap;
z-index: 5;
.#{$fa-css-prefix} {
font-size: 2em;
}
}

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

@ -18,499 +18,491 @@ @@ -18,499 +18,491 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#chat {
position: absolute;
bottom:0px;
right:260px;
width:260px;
top:0px;
pointer-events: none;
z-index:45;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
bottom: 0;
perspective: 1000;
pointer-events: none;
position: absolute;
right: 260px;
top: 0;
width: 260px;
z-index: 45;
}
.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 {
-webkit-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;
transform: rotateY(360deg);
}
.chat.with_pictures .output .message.is_self .timestamp {
right:58px;
.withChat.withChatMaximized #chat {
left: 0;
width: auto;
.chatcontainer {
width: auto;
}
}
.chat .output .message > ul {
list-style-type: none;
margin:0;
padding-left:0;
.chatcontainer {
background: $chat-background;
bottom: 0;
left: 260px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: left 200ms ease-in-out;
width: 260px;
}
.chat .output .message > ul > li {
line-height:1.1em;
margin:4px 0;
padding-left:1.2em;
position:relative;
.showchatlist {
.chatpane {
right: 100%;
}
.chatlist {
left: 0;
}
}
.chat .message li:before {
font-family: 'FontAwesome';
content: '\f075';
color:#ccc;
position:absolute;
left:0px;
width:12px;
text-align:center;
.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.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 {
moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1);
color:#ccc;
.chatpane {
backface-visibility: hidden;
bottom: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.3s;
transform-style: preserve-3d;
width: 100%;
}
.chat .message li.unread:before {
content: '\f0eb';
color: #FE9A2E;
.chat {
background: $chat-background;
display: none;
bottom: 0;
left: 0;
overflow: hidden;
pointer-events: auto;
position: absolute;
right: 0;
top: 0;
}
.chat .message li.sending:before {
content: '\f0ec';
.chat {
&.active {
&.visible {
display:block;
}
.chatbody {
// nothing
}
.chatheader {
// nothing
}
}
}
.chat .message li.sent:before {
content: '\f003';
color:#5882FA;
.chatbody {
border-right: 1px solid $bordercolor;
bottom: -1px;
left: 0;
position: absolute;
right: 0;
top: 36px;
}
.chat .message li.delivered:before {
content: '\f019';
color:#5882FA;
.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 .message li.received:before {
content: '\f06e';
color:#84b819;
.chat .outputbox {
bottom: 75px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.chat .message li.read:before {
content: '\f00c';
color:#ccc;
.chat .output {
height: 100%;
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 {
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 .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_self .timestamp {
right: 58px;
}
.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;
padding-left: 58px;
}
.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.with_pictures .output .message.is_self {
padding-right:54px;
}
.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 .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;
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 {
display:block;
padding-bottom:2px;
margin-right:40px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
.chat .message {
&.is_self li:before {
color:#ccc;
transform: scale(-1, 1);
}
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;
}
}
}
.chat .chatbodybottom {
background: #e7e7e7;
position: absolute;
left:0px;
bottom:1px;
right:0px;
margin:0 auto;
.chat .message {
&.is_self .avatar {
right: 4px;
left: auto;
}
.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 .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 .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
}
}
@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 .output .message strong {
display:block;
padding-bottom:2px;
margin-right:40px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
@-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 {
.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;
}
}
}
.chat.newmessage .chatheader, .chatlist .list-group-item.newmessage {
animation: newmessage 1s ease -0.3s infinite;
-webkit-animation: newmessage 1s ease -0.3s infinite;
@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 .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) {
.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;
}
}
.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;
}
}

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

@ -10,3 +10,8 @@ @@ -10,3 +10,8 @@
@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; @@ -45,6 +45,17 @@ $video-onlyaudio-background: #666;
$video-onlyaudio: rgba(255,255,255,.3);
$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-medium: 700px;
$breakpoint-large: 1280px;
@ -66,8 +77,7 @@ $minbarheight: 44px; @@ -66,8 +77,7 @@ $minbarheight: 44px;
// ** Fontawsome changed variables **
// original at libs/fontawesome/_variables.scss
// --------------------------
$fa-css-prefix: fa;
// ** Bootstrap changed variables **
// 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 @@ -299,7 +299,7 @@ define(['underscore', 'moment', 'text!partials/fileinfo.html'], function(_, mome
title.html(displayName(from, true));
extra_css += "with_name ";
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) {
picture.find("img").attr("src", imgSrc);
}

10
static/partials/buddy.html
Unescape View File

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
<div class="buddy withSubline">
<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="buddy1">{{session.Id|displayName}}</div>
<div class="buddy2"><i ng-show="session.Userid" class="fa fa-star-o"></i> {{session.Ua}}</div>
</div>
<div class="buddy withSubline" ng-click="doDefault(user.Id)">
<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="display-name">{{user.Id|displayName}}</div>
<div class="browser">{{user.Ua}}</div>
</div>

Write Preview
Loading…
Cancel
Save