moparisthebest
/
kaiwa
mirror of https://github.com/moparisthebest/kaiwa
1
0
Fork 0
Code Issues Releases Wiki Activity

[ux] improve chat readability

This commit is contained in:
karolinaszczur 2013-09-24 13:27:58 +02:00
parent 83cf08978f
commit d3cddf2a49
2 changed files with 10 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/css/app/chat.styl
View File

@ -57,8 +57,6 @@
background: $grayOutline background: $grayOutline
.messages .messages
background: lighten($activeBlue, 97%)
font-weight: normal
margin: 0px margin: 0px
padding: 0px padding: 0px
padding-top: 130px padding-top: 130px
@ -68,6 +66,7 @@
bottom: 75px bottom: 75px
width: 100% width: 100%
borderbox() borderbox()
background: lighten($activeBlue, 97%)
li li
position: relative position: relative
@ -85,17 +84,18 @@
.message .message
font-size: 12px font-size: 12px
margin: 0px margin: 0px
padding: 7px 11px padding: 10px
display: inline-block display: inline-block
padding-right: 11px padding-right: 11px
min-width: 20px min-width: 20px
width: 100% width: 100%
border-bottom: 1px solid lighten($activeBlue, 90%)
borderbox() borderbox()
&:not(.mine)
color: $activeBlue
&.mine &.mine
background: white background: white
border-bottom: 1px solid lighten($grayOutline, 10%)
.timestamp .timestamp
color: darken($grayOutline, 20%) color: darken($grayOutline, 20%)
@ -113,7 +113,6 @@
word-break: break-word word-break: break-word
padding: 0px padding: 0px
margin: 0px margin: 0px
color: #111
.timestamp .timestamp
font-size: 10px font-size: 10px

11
public/css/otalk.css
View File

@ -603,8 +603,6 @@ td {
background: #e4e4e4; background: #e4e4e4;
} }
.messages { .messages {
background: #f7fdff;
font-weight: normal;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
padding-top: 130px; padding-top: 130px;
@ -616,6 +614,7 @@ td {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: #f7fdff;
} }
.messages li { .messages li {
position: relative; position: relative;
@ -635,19 +634,20 @@ td {
.messages .message { .messages .message {
font-size: 12px; font-size: 12px;
margin: 0px; margin: 0px;
padding: 7px 11px; padding: 10px;
display: inline-block; display: inline-block;
padding-right: 11px; padding-right: 11px;
min-width: 20px; min-width: 20px;
width: 100%; width: 100%;
border-bottom: 1px solid #e4f8ff;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.messages .message:not(.mine) {
color: #00aeef;
}
.messages .message.mine { .messages .message.mine {
background: #fff; background: #fff;
border-bottom: 1px solid #e7e7e7;
} }
.messages .message.mine .timestamp { .messages .message.mine .timestamp {
color: #b6b6b6; color: #b6b6b6;
@ -663,7 +663,6 @@ td {
word-break: break-word; word-break: break-word;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
color: #111;
} }
.messages .message .timestamp { .messages .message .timestamp {
font-size: 10px; font-size: 10px;