diff --git a/images/icon_tile.png b/images/icon_tile.png new file mode 100644 index 00000000..4710e2a7 Binary files /dev/null and b/images/icon_tile.png differ diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 6a6007f3..f70c5114 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -117,6 +117,7 @@ margin: 0; padding: 1em 0; overflow-y: auto; + background-color: #ffffff; .timestamp { cursor: pointer; diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 977a4c3b..c1db267e 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -267,17 +267,20 @@ $avatar-size: 44px; .contact { position: relative; padding: 12px; - background: white; cursor: pointer; - transition: background 0.2s; white-space: nowrap; overflow: hidden; - box-shadow: 0 1px 3px rgba(#aaa, 0.8); + box-shadow: 0 0px 1px rgba(#aaa, 0.8); &:hover { background: #f8f8f8; } + &.selected { + background: $blue; + color: #ffffff; + } + &:last-child::after { display: none; } diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index e5eb9222..b159b500 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -1,4 +1,5 @@ .gutter { + background: $grey_l; padding: $header-height 0 0; } @@ -50,6 +51,7 @@ } .conversation-stack { + background: url('/images/icon_tile.png'); padding-left: 300px; padding-top: $header-height; .conversation { @@ -114,6 +116,9 @@ input.search { font-size: smaller; } +.new-contact, .contacts { + background: $grey_l; +} .new-contact { display: none; .contact-name { display: none; } diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index d2556ce9..42b61b59 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -224,14 +224,15 @@ img.emoji { .contact { position: relative; padding: 12px; - background: white; cursor: pointer; - transition: background 0.2s; white-space: nowrap; overflow: hidden; - box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); } + box-shadow: 0 0px 1px rgba(170, 170, 170, 0.8); } .contact:hover { background: #f8f8f8; } + .contact.selected { + background: #2090ea; + color: #ffffff; } .contact:last-child::after { display: none; } .contact .contact-details { @@ -345,6 +346,7 @@ img.emoji { to { transform: rotate(360deg); } } .gutter { + background: #f3f3f3; padding: 36px 0 0; } .conversation-stack, @@ -379,6 +381,7 @@ img.emoji { background: url("/images/error_red.png") no-repeat left center; } .conversation-stack { + background: url("/images/icon_tile.png"); padding-left: 300px; padding-top: 36px; } .conversation-stack .conversation { @@ -429,6 +432,9 @@ input.search { .last-timestamp { font-size: smaller; } +.new-contact, .contacts { + background: #f3f3f3; } + .new-contact { display: none; } .new-contact .contact-name { @@ -554,7 +560,8 @@ input.search { .message-list { margin: 0; padding: 1em 0; - overflow-y: auto; } + overflow-y: auto; + background-color: #ffffff; } .message-list .timestamp { cursor: pointer; } .message-list .timestamp:hover {