@charset 'utf-8'; $font-dark: #212121; $font-mid: #666666; $font-light: #848d95; $font-white: #ffffff; $line-basic: 1px solid #dddddd; $bg-list-hover: #efefef; $listH-row2: 80px; $presence-size: 8px; $thumbnail-msize: 40px; @mixin ellipsis($row) { overflow: hidden; text-overflow: ellipsis; @if $row == 1 { display: block; white-space: nowrap; word-wrap: normal; } @else if $row >= 2 { display: -webkit-box; -webkit-line-clamp: $row; -webkit-box-orient: vertical; word-wrap: break-word; } } .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; } } &-name { font-size: 16px; @include ellipsis(1); } &-last-message { line-height: normal; margin-top: 0; } &-last-message-time { font-size: 12px; } &-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; } } .item-default { display: flex; width: 100%; .thumbnail { margin-right: 16px; border-radius: 50%; } .info { position: relative; display: flex; flex: 0 0 auto; margin: 0; padding: 0 5px 0 0; .room-info { flex-direction: column; width: calc(100% - 60px); .detail { display: inline-flex; color: $font-dark; width: 100%; align-items: center; .name { font-weight: 600; } .mat-icon { background-repeat: no-repeat; display: inline-block; fill: currentColor; height: 12px; width: 12px; font-size: 1.1em; color: #666666; margin-left: 4px; line-height: unset; } .icon-img { i { font-size: 1.1em; text-align: center; } } .member { flex: none; margin-left: 6px; border-radius: 3px; padding: 0 4px; color: #ffffff; } } .final-message { color: $font-mid; } } .date { float: right; width: 60px; text-align: right; color: $font-mid; align-items: flex-end; margin-top: -2px; margin-left: auto; } } .num { font-size: 18px; font: bold; flex: none; text-align: center; background-color: rgba($color: #666666, $alpha: 0.5); } } .list-item { &:hover { background-color: $bg-list-hover; } }