@charset 'utf-8'; @import '../../../../ucap-webmessenger-app/src/assets/scss/global/common.scss'; .profile { white-space: normal; text-align: left; letter-spacing: 0.01em; min-height: 88px; border-bottom: $line-basic; padding: 16px; font-weight: 400; border-radius: 0; .avatar-wrapper { .avatar { margin-right: 16px; } } .profile-name { font-size: 16px; @include ellipsis(1); } .profile-last-message { line-height: normal; margin-top: 0; } .profile-last-message-time { font-size: 12px; margin-top: 4px; } .profile-mood { line-height: normal; margin: 0; } .unread-message-count { font-size: 12px; border-radius: 50%; text-align: center; width: 20px; height: 20px; line-height: 20px; } } %list-item { position: relative; display: flex; align-items: center; width: 100%; height: $listH-row2; border-bottom: $line-basic; padding: 20px; } .item-default { display: flex; width: 100%; .thumbnail { width: $thumbnail-msize; height: $thumbnail-msize; margin-right: 16px; @include border-radius(100px); } .info { position: relative; display: flex; margin: 0; padding: 0; width: calc(100% - 50px); .detail { flex-direction: column; width: calc(100% - 80px); .room-name { display: inline-flex; color: $font-dark; width: 100%; margin-bottom: 2px; .name { font-size: 16px; @include ellipsis(1); font-weight: 600; } .num { font-size: 12px; color: $color-main; flex: none; margin-left: 10px; } } .room-msg { font-size: 12px; color: $font-mid; margin-top: 4px; @include ellipsis(1); } } .date { float: right; width: 70px; font-size: 11px; text-align: right; margin-left: 10px; color: $font-mid; @include ellipsis(1); } } } .list-item { @extend %list-item; &:hover { background-color: $bg-list-hover; } } .noti { position: absolute; right: 22px; bottom: 22px; max-width: 60px; padding: 0 6px; font-size: 11px; color: #ffffff; background-color: $color-main; @include ellipsis(1); @include border-radius(100px); } .notiBadge { position: absolute !important; right: 22px; bottom: 22px; }