From 6b2cbcfa4ad5f7f833bf91ca82ca5d50e03c0574 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Mon, 5 May 2014 17:31:42 +0200 Subject: [PATCH] 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. --- src/styles/components/_buddylist.scss | 319 +++---- src/styles/components/_chat.scss | 878 ++++++++++---------- src/styles/global/_mixins.scss | 5 + src/styles/global/_variables.scss | 14 +- static/js/controllers/chatroomcontroller.js | 2 +- static/partials/buddy.html | 10 +- 6 files changed, 624 insertions(+), 604 deletions(-) diff --git a/src/styles/components/_buddylist.scss b/src/styles/components/_buddylist.scss index dcc4b83b..4b40a7b8 100644 --- a/src/styles/components/_buddylist.scss +++ b/src/styles/components/_buddylist.scss @@ -18,168 +18,181 @@ * along with this program. If not, see . * */ + #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; + } } diff --git a/src/styles/components/_chat.scss b/src/styles/components/_chat.scss index 019c0d7d..6ec2c2a7 100644 --- a/src/styles/components/_chat.scss +++ b/src/styles/components/_chat.scss @@ -18,499 +18,491 @@ * along with this program. If not, see . * */ + #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; - } -} \ No newline at end of file + .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; + } +} diff --git a/src/styles/global/_mixins.scss b/src/styles/global/_mixins.scss index ed188269..ceb6ee47 100644 --- a/src/styles/global/_mixins.scss +++ b/src/styles/global/_mixins.scss @@ -10,3 +10,8 @@ @content; } } + +// not handled by autoprefixer +@mixin tap-highlight-color($color) { + -webkit-tap-highlight-color: $color; +} diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss index b24989c6..706013b6 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -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; // ** Fontawsome changed variables ** // original at libs/fontawesome/_variables.scss // -------------------------- - - +$fa-css-prefix: fa; // ** Bootstrap changed variables ** // original at libs/bootstrap/_variables.scss diff --git a/static/js/controllers/chatroomcontroller.js b/static/js/controllers/chatroomcontroller.js index d7ddd6ec..b3341029 100644 --- a/static/js/controllers/chatroomcontroller.js +++ b/static/js/controllers/chatroomcontroller.js @@ -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 = $('
'); + picture = $('
'); if (imgSrc) { picture.find("img").attr("src", imgSrc); } diff --git a/static/partials/buddy.html b/static/partials/buddy.html index 701a0cd9..69aa87d8 100644 --- a/static/partials/buddy.html +++ b/static/partials/buddy.html @@ -1,5 +1,5 @@ -
-
-
{{session.Id|displayName}}
-
{{session.Ua}}
-
\ No newline at end of file +
+
+
{{user.Id|displayName}}
+
{{user.Ua}}
+