From 1c3ac421d558d224779715f861872785eff0c100 Mon Sep 17 00:00:00 2001 From: karolinaszczur Date: Thu, 19 Sep 2013 18:35:34 +0200 Subject: [PATCH] [ux] further chat messages tweaking --- public/css/app/chat.styl | 14 ++++++++------ public/css/otalk.css | 14 ++++++++------ 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl index 65c029a..bba3499 100644 --- a/public/css/app/chat.styl +++ b/public/css/app/chat.styl @@ -46,7 +46,7 @@ line-height: 14px .messages - background: #ecf0f2 + background: lighten($activeBlue, 97%) font-weight: normal margin: 0px padding: 0px @@ -68,8 +68,10 @@ display: block borderbox() + &:last-child .message + border: none + .message - color: #33404c font-size: 12px margin: 0px padding: 7px 11px @@ -77,7 +79,7 @@ padding-right: 11px min-width: 20px width: 100% - border-bottom: 1px solid #ccc + border-bottom: 1px solid lighten($activeBlue, 90%) borderbox() &.mine @@ -85,7 +87,7 @@ border-bottom: 1px solid lighten($grayOutline, 10%) .timestamp - color: #bbe0fa + color: darken($grayOutline, 20%) &.delayed .timestamp:before @@ -103,9 +105,9 @@ color: #111 .timestamp - font-size: 12px - color: #bbb + font-size: 10px font-weight: bold + color: lighten($activeBlue, 50%) float: right display: block diff --git a/public/css/otalk.css b/public/css/otalk.css index a0ebec5..4385a02 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -469,7 +469,7 @@ td { line-height: 14px; } .messages { - background: #ecf0f2; + background: #f7fdff; font-weight: normal; margin: 0px; padding: 0px; @@ -495,8 +495,10 @@ td { -webkit-box-sizing: border-box; box-sizing: border-box; } +.messages li:last-child .message { + border: none; +} .messages .message { - color: #33404c; font-size: 12px; margin: 0px; padding: 7px 11px; @@ -504,7 +506,7 @@ td { padding-right: 11px; min-width: 20px; width: 100%; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid #e4f8ff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -514,7 +516,7 @@ td { border-bottom: 1px solid #e7e7e7; } .messages .message.mine .timestamp { - color: #bbe0fa; + color: #b6b6b6; } .messages .message.delayed .timestamp:before { content: '@ '; @@ -530,9 +532,9 @@ td { color: #111; } .messages .message .timestamp { - font-size: 12px; - color: #bbb; + font-size: 10px; font-weight: bold; + color: #78daff; float: right; display: block; }