waveterm/frontend/app/element/avatar.less
2024-10-01 13:00:30 +08:00

52 lines
1.0 KiB
Plaintext

.avatar {
position: relative;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--border-color);
display: flex;
justify-content: center;
align-items: center;
color: var(--main-text-color);
font-size: 18px;
text-transform: uppercase;
margin-right: 10px;
.avatar-image {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.avatar-initials {
font-weight: bold;
}
.status-indicator {
position: absolute;
bottom: -5px;
right: -5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: transparent;
&.online {
background-color: var(--success-color);
}
&.offline {
background-color: var(--grey-text-color);
}
&.busy {
background-color: var(--error-color);
}
&.away {
background-color: var(--warning-color);
}
}
}