.message-oneline { display: flex; flex-direction: row; border-top: 1px solid #ccc; &.unread { background: #fff; font-weight: bold; } .message-oneline-column { padding: 6px; &:nth-child(1) { flex: 0 0 40px; padding-left: 15px; } &:nth-child(2) { flex: 0 0 115px; } &:nth-child(3) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; a { color: #444; } } &:nth-child(4) { flex: 0 0 80px; text-align: right; padding-right: 15px; } } .user-img { img { width: 20px; height: 20px; border-radius: 10px; } } } .message-oneline-menuitem { display: flex; flex-direction: row; border-top: 1px solid #ccc; padding: 4px; background: #eee; color: #444; &.unread { background: #fff; font-weight: bold; } .message-oneline-column { padding: 4px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &:nth-child(1) { flex: 0 0 50px; } &:nth-child(2), &.only { flex: 1; } &:nth-child(3) { flex: 0 0 60px; text-align: right; } a { color: #444; text-decoration: none; } } &:hover { background: @brand-primary; color: #fff; text-decoration: none; .message-oneline-column a { color: #fff; } .text-muted { color: #eee; } } }