.message { position: relative; margin: 0 auto; word-break: break-word; & > .user-img { position: absolute; left: 0px; top: 0px; img { width: 88px; height: 88px; opacity: 0.9; } img:hover { opacity: 1; } } &.secret { } &.smallview { cursor: pointer; } .message-inner { margin-left: 88px; background: #fff; border-bottom: 1px solid #eee; } &.unread .message-inner { background: #FCFFE3; } &.add-anim { .message-inner { transition: background 0.5s; background: #EDFFAC; } } .message-ctrls { margin: 0; background: #eee; font-size: 12px; a { color: #666; } li { padding: 7px 10px; } } .message-header, .message-footer { margin: 0; height: 34px; padding-left: 3px; a { color: #666; } li { padding: 7px 10px; } .glyphicon { font-size: 18px; color: #bbb; &.glyphicon-lock { font-size: 12px; } } a:hover .glyphicon { color: #aaa; } .favorite { padding-right: 0; a.selected .glyphicon-star { color: rgb(255, 194, 0); } a.selected:hover .glyphicon-star { color: darken(rgb(255, 194, 0), 10%); } .users { margin-right: 5px; .user-img { margin-right: 5px; } img { width: 20px; height: 20px; border-radius: 10px; vertical-align: top; } span { color: #555; position: relative; top: -5px; font-size: 14px; margin: 5px; } } } } .message-footer a { color: gray; } .message-body { padding: 6px 24px; & > * { margin: 0; } } .markdown { & > :first-child { margin-top: 0; } & > :last-child { margin-bottom: 0; } ul { padding-left: 24px; } img { max-width: 424px; } } .message-mentions { background: #fafafa; padding: 8px 24px; box-shadow: inset 0px 2px 2px rgba(0,0,0,0.1); a { color: gray; } } .message-comments { &:empty { display: none; } } .composer-header { margin-left: 88px; max-width: 100%; } .pretty-raw { font-size: 15px; td { padding: 2px 7px; vertical-align: top; } td:first-child { text-align: right; min-width: 150px; color: #999; } } }