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

Breakout the @media to mixens. Convert chat to scss. 

Rearrange elements.

Convert colors to variables. Convert msg icons to variables.

Convert colors to variables.

Rearrange elements.
pull/30/head
Evan Theurer 12 years ago
parent
6b2cbcfa4a
commit
171e8d6ed9
3 changed files with 210 additions and 185 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. 321
      src/styles/components/_chat.scss
  2. 6
      src/styles/global/_mixins.scss
  3. 28
      src/styles/global/_variables.scss

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

@ -30,20 +30,20 @@
z-index: 45; z-index: 45;
} }
.withChat #chat .chatcontainer { .withChat {
left:0px; #chat .chatcontainer {
} left: 0;
}
.withChat .chatpane.flip { .chatpane.flip {
transform: rotateY(360deg); transform: rotateY(360deg);
} }
&.withChatMaximized #chat {
.withChat.withChatMaximized #chat {
left: 0; left: 0;
width: auto; width: auto;
.chatcontainer { .chatcontainer {
width: auto; width: auto;
} }
}
} }
.chatcontainer { .chatcontainer {
@ -68,53 +68,51 @@
} }
.chatlist { .chatlist {
background: $chat-background;
bottom: 0;
left: 100%;
position: absolute; position: absolute;
transition: left 200ms ease-in-out;
top: 0; top: 0;
left: 100%;
bottom: 0;
width: 100%; width: 100%;
background: $chat-background;
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;
border-radius: 0; border-radius: 0;
padding-right: 30px;
position: relative; position: relative;
} &.newmessage {
.list-group-item.newmessage {
animation: newmessage 1s ease -0.3s infinite; animation: newmessage 1s ease -0.3s infinite;
} }
.list-group-item .fa-lg { &.disabled {
color: $chat-disabled;
}
&:hover .item-btn {
display: inline;
}
.fa-lg {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
width: 18px; width: 18px;
} }
.list-group-item .badge { .badge {
background: $chat-badge; background: $chat-badge;
border: 1px solid white; border: 1px solid white;
font-size: .8em; font-size: .8em;
} }
.list-group-item { .item-btn {
padding-right: 30px;
}
.list-group-item.disabled {
color: $chat-disabled;
}
.list-group-item > .item-btn {
cursor: pointer; cursor: pointer;
display:none; display: none;
position:absolute; position: absolute;
right:12px; right: 12px;
} }
.list-group-item:hover > .item-btn {
display:inline;
} }
} }
@ -144,7 +142,7 @@
.chat { .chat {
&.active { &.active {
&.visible { &.visible {
display:block; display: block;
} }
.chatbody { .chatbody {
// nothing // nothing
@ -162,6 +160,10 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 36px; top: 36px;
@include breakpt-height($breakpoint-chat-small) {
border-top: 1px solid $bordercolor;
top: 0px;
}
} }
.chatheader { .chatheader {
@ -188,8 +190,8 @@
width: 36px; width: 36px;
} }
.chatheadertitle { .chatheadertitle {
padding-left: 28px;
display: inline; display: inline;
padding-left: 28px;
} }
.ctrl { .ctrl {
color: $chat-ctrl; color: $chat-ctrl;
@ -210,6 +212,9 @@
vertical-align: middle; vertical-align: middle;
white-space: nowrap; white-space: nowrap;
} }
@include breakpt-height($breakpoint-chat-small) {
display: none;
}
} }
.chat .outputbox { .chat .outputbox {
@ -218,6 +223,9 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
@include breakpt-height($breakpoint-chat-small) {
bottom: 45px;
}
} }
.chat .output { .chat .output {
@ -227,40 +235,39 @@
padding: 0.4em 0; padding: 0.4em 0;
> i { > i {
clear: both; clear: both;
color: #aaa; color: $chat-meta;
display: block; display: block;
font-size: 0.8em; font-size: .8em;
padding: 6px 0; padding: 6px 0;
text-align: center; text-align: center;
&.p2p { &.p2p {
padding: 6px 0;
font-weight: bold; font-weight: bold;
padding: 6px 0;
} }
} }
} }
.chat.with_pictures .output .message.is_self .timestamp { .chat.with_pictures .message {
&.is_self {
padding-right: 54px;
.timestamp {
right: 58px; right: 58px;
} }
.chat.with_pictures .output .message.is_remote { }
&.is_remote {
padding-left: 58px; padding-left: 58px;
}
} }
.chat.with_pictures .output .message.is_self {
padding-right:54px;
}
.chat .message { .chat .message {
background: #fff; background: $chat-msg-background;
border: 1px solid #e5e5ef; border: 1px solid $chat-msg-border;
border-radius: 6px; border-radius: 6px;
clear: both; clear: both;
display: block; display: block;
margin-bottom: 2px; margin: 0 4px 2px 20px;
padding: 8px; padding: 8px;
position: relative; position: relative;
margin-left: 20px;
margin-right: 4px;
word-wrap: break-word; word-wrap: break-word;
ul { ul {
list-style-type: none; list-style-type: none;
@ -273,83 +280,92 @@
padding-left: 1.2em; padding-left: 1.2em;
position: relative; position: relative;
&:before { &:before {
color: #ccc; color: $chat-msg-default-icon-color;
content: '\f075'; content: '\f075';
font-family: FontAwesome; font-family: FontAwesome;
left: 0; left: 0;
text-align: center;
position: absolute; position: absolute;
text-align: center;
width: 12px; width: 12px;
} }
} }
.timestamp { .timestamp {
color: $chat-timestamp; color: $chat-timestamp;
font-size: 0.8em; font-size: .8em;
position: absolute; position: absolute;
right: 8px; right: 8px;
text-align: right; text-align: right;
top: 8px; top: 8px;
} }
strong {
display: block;
padding-bottom: 2px;
margin-right: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
.chat .message { .chat .message {
&.is_self li:before { &.is_self li:before {
color:#ccc; color: $chat-msg-default-icon-color;
transform: scale(-1, 1); transform: scale(-1, 1);
} }
li { li {
&.unread:before { &.unread:before {
content: '\f0eb'; content: $chat-msg-unread-icon;
color: #FE9A2E; color: $chat-msg-unread-icon-color;
} }
&.sending:before { &.sending:before {
content: '\f0ec'; content: $chat-msg-sending-icon;
color: $chat-msg-sending-icon-color;
} }
&.sent:before { &.sent:before {
content: '\f003'; content: $chat-msg-sent-icon;
color:#5882FA; color: $chat-msg-sent-icon-color;
} }
&.delivered:before { &.delivered:before {
content: '\f019'; content: $chat-msg-delivered-icon;
color:#5882FA; color: $chat-msg-delivered-icon-color;
} }
&.received:before { &.received:before {
content: '\f06e'; content: $chat-msg-received-icon;
color:#84b819; color: $chat-msg-received-icon-color;
} }
&.read:before { &.read:before {
content: '\f00c'; content: $chat-msg-read-icon;
color:#ccc; color: $chat-msg-read-icon-color;
} }
} }
} }
.chat .message { .chat .message {
&.is_self .avatar { &.is_self .avatar {
right: 4px;
left: auto; left: auto;
right: 4px;
} }
.avatar { .avatar {
position: absolute; background: $actioncolor1;
top: 4px; border-radius: 2px;
width:46px; height: 46px;
height:46px;
left: 4px; left: 4px;
overflow: hidden; overflow: hidden;
border-radius: 2px; position: absolute;
background: $actioncolor1; text-align: center;
text-align:center; top: 4px;
width: 46px;
.#{$fa-css-prefix} { .#{$fa-css-prefix} {
line-height:46px; color: $actioncolor2;
color:$actioncolor2; line-height: 46px;
} }
img { img {
display: block;
bottom: 0;
left: 0;
right: 0;
position: absolute; position: absolute;
left:0px; top: 0;
right:0px;
bottom:0px;
top:0px;
display:block;
} }
} }
} }
@ -357,46 +373,47 @@
.chat .message { .chat .message {
&:before, &:before,
&:after { &:after {
border-style: solid;
content: ""; content: "";
display: block;
position: absolute; position: absolute;
border-style: solid;
width: 0; width: 0;
display: block;
} }
&.is_remote { &.is_remote {
&:before { background: $chat-msg-remote-background;
top: 4px; &:before { // arrow border
border-width: 10px 17px 10px 0;
border-color: transparent $chat-msg-remote-background;
bottom: auto; bottom: auto;
left: -16px; left: -16px;
border-width: 10px 17px 10px 0; top: 4px;
border-color: transparent #fff;
} }
&:after { &:after { // arrow background
top:5px;
bottom:auto;
left:-15px;
border-width: 9px 15px 9px 0; border-width: 9px 15px 9px 0;
border-color: transparent #fff; border-color: transparent $chat-msg-remote-background;
bottom:auto;
left: -15px;
top: 5px;
} }
} }
&.is_self { &.is_self {
background: #fff; background: $chat-msg-self-background;
margin-right:20px; margin-right:20px;
margin-left:4px; margin-left: 4px;
padding-right:0px; padding-right: 0;
&:before { &:before { // arrow border
top:4px;
bottom:auto;
right:-16px;
border-width: 10px 0 10px 17px; border-width: 10px 0 10px 17px;
border-color: transparent #fff; border-color: transparent $chat-msg-self-background;
bottom: auto;
right: -16px;
top: 4px;
} }
&:after { &:after { // arrow background
top:5px;
bottom:auto;
right:-15px;
border-width: 9px 0 9px 15px; border-width: 9px 0 9px 15px;
border-color: transparent #fff; border-color: transparent $chat-msg-self-background;
bottom: auto;
right: -15px;
top: 5px;
} }
} }
&.with_name { &.with_name {
@ -404,70 +421,69 @@
} }
} }
.chat .output .message strong {
display:block;
padding-bottom:2px;
margin-right:40px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.chat { .chat {
.chatbodybottom { .chatbodybottom {
background: #e7e7e7; background: $chat-bottom-background;
bottom: 1px;
left: 0;
margin: 0 auto;
position: absolute; position: absolute;
left:0px; right: 0;
bottom:1px; @include breakpt-height($breakpoint-chat-small) {
right:0px; height: auto;
margin:0 auto; }
} }
.typinghint { .typinghint {
padding:2px 6px 0 6px; padding: 2px 6px 0 6px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
font-size:.8em; font-size:.8em;
color: #aaa; color: $chat-typing;
height:14px; height: 14px;
@include breakpt-height($breakpoint-chat-small) {
display: none;
}
} }
.inputbox { .inputbox {
position:relative; position: relative;
.btn { .btn {
position:absolute; position: absolute;
right:6px; right: 6px;
top:1px; top: 1px;
padding: 0.5em 1em; padding: .5em 1em;
display:none; display: none;
} }
> div { > div {
border-top:1px solid $bordercolor; border-top: 1px solid $bordercolor;
}
@include breakpt-height($breakpoint-chat-small) {
height: auto;
} }
} }
.input { .input {
display:block; border-radius: 0;
resize: none; border-color: transparent;
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; box-shadow: none;
display: block;
height: 54px;
max-height: 54px; /* FF hack */
margin: 0;
resize: none;
width: 100%;
&:active, &:active,
&:focus { &:focus {
border-color:#66afe9; border-color: $chat-input-border-color;
}
@include breakpt-height($breakpoint-chat-small) {
max-height: 2.5em;
} }
} }
} }
@keyframes newmessage { @keyframes newmessage {
0% {background-color: rgba(132,184,25,1.0);} 0% {background-color: $actioncolor1;}
50% {background-color: $componentbg;} 50% {background-color: $componentbg;}
100% {background-color: rgba(132,184,25,1.0);} 100% {background-color: $actioncolor1;}
} }
.chat.newmessage { .chat.newmessage {
@ -481,28 +497,3 @@
animation: newmessage 1s ease -0.3s infinite; 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;
}
}

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

@ -5,6 +5,12 @@
} }
} }
@mixin breakpt-height($pt) {
@media (max-height: $pt) {
@content;
}
}
@mixin breakpt-only-screen($pt) { @mixin breakpt-only-screen($pt) {
@media only screen and (max-width: $pt) { @media only screen and (max-width: $pt) {
@content; @content;

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

@ -48,11 +48,37 @@ $video-overlayactions: rgba(0,0,0,.9);
$buddylist-background: rgba(0,0,0,.3); $buddylist-background: rgba(0,0,0,.3);
$buddylist-action-background: rgba(255,255,255,0.5); $buddylist-action-background: rgba(255,255,255,0.5);
// chat
$chat-background: #e7e7e7; $chat-background: #e7e7e7;
$chat-disabled: #aaa; $chat-disabled: #aaa;
$chat-badge: #84b819; $chat-badge: #84b819;
$chat-ctrl: rgba(0,0,0,.3); $chat-ctrl: rgba(0,0,0,.3);
$chat-timestamp: #aaa; $chat-timestamp: #aaa;
$chat-meta: #aaa;
$chat-msg-background: white;
$chat-msg-border: #e5e5ef;
$chat-msg-default-icon-color: #ccc;
$chat-msg-unread-icon-color: #FE9A2E;
$chat-msg-sending-icon-color: $chat-msg-default-icon-color;
$chat-msg-sent-icon-color: #5882FA;
$chat-msg-delivered-icon-color: #5882FA;
$chat-msg-received-icon-color: #84b819;
$chat-msg-read-icon-color: $chat-msg-default-icon-color;
$chat-msg-unread-icon: '\f0eb';
$chat-msg-sending-icon: '\f0ec';
$chat-msg-sent-icon: '\f003';
$chat-msg-delivered-icon: '\f019';
$chat-msg-received-icon: '\f06e';
$chat-msg-read-icon: '\f00c';
$chat-msg-self-background: white;
$chat-msg-remote-background: white;
$chat-bottom-background: $chat-background;
$chat-typing: $chat-meta;
$chat-input-border-color: #66afe9;
$tap-highlight: rgba(0, 0, 0, 0); $tap-highlight: rgba(0, 0, 0, 0);
@ -63,6 +89,8 @@ $breakpoint-large: 1280px;
$breakpoint-video-small: 590px; $breakpoint-video-small: 590px;
$breakpoint-video-medium: 630px; $breakpoint-video-medium: 630px;
$breakpoint-chat-small: 210px;
$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif; $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
// compass // compass

Write Preview
Loading…
Cancel
Save