diff --git a/public/css/app/chat.styl b/public/css/app/chat.styl index 39a5700..d9f0c42 100644 --- a/public/css/app/chat.styl +++ b/public/css/app/chat.styl @@ -66,36 +66,30 @@ bottom: 75px width: 100% borderbox() - background: lighten($activeBlue, 97%) li position: relative z-index: 1 list-style: none - padding: 0px + padding: 10px 0 width: 100% - min-height: 40px + min-height: 50px display: block borderbox() - border: 1px solid blue + border-bottom: 1px solid $grayOutline - &:last-child .message + &:last-of-type border: none - &.chatGroup - border: 1px solid red - .messageAvatar - position: relative - display: inline-block - float: left - width: 30px - height: 30px - margin: 0px 8px 8px 8px + position: absolute + top: 50% + left: 10px + margin-top: -15px img avatar() - border: 1px solid red + .name text-indent: -9999em position: absolute @@ -103,12 +97,10 @@ .messageWrapper margin-left: 50px - border-left: 1px solid red .message font-size: 12px margin: 0px - padding: 10px display: inline-block padding-right: 11px min-width: 20px diff --git a/public/css/otalk.css b/public/css/otalk.css index fa3d54f..0b6faac 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -683,34 +683,28 @@ h3 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - background: #f7fdff; } .messages li { position: relative; z-index: 1; list-style: none; - padding: 0px; + padding: 10px 0; width: 100%; - min-height: 40px; + min-height: 50px; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - border: 1px solid #00f; + border-bottom: 1px solid #e4e4e4; } -.messages li:last-child .message { +.messages li:last-of-type { border: none; } -.messages li.chatGroup { - border: 1px solid #f00; -} .messages li .messageAvatar { - position: relative; - display: inline-block; - float: left; - width: 30px; - height: 30px; - margin: 0px 8px 8px 8px; + position: absolute; + top: 50%; + left: 10px; + margin-top: -15px; } .messages li .messageAvatar img { width: 30px; @@ -721,7 +715,6 @@ h3 { -o-border-radius: 50px; -border-radius: 50px; border-radius: 50px; - border: 1px solid #f00; } .messages li .messageAvatar .name { text-indent: -9999em; @@ -730,12 +723,10 @@ h3 { } .messages .messageWrapper { margin-left: 50px; - border-left: 1px solid #f00; } .messages .message { font-size: 12px; margin: 0px; - padding: 10px; display: inline-block; padding-right: 11px; min-width: 20px;