mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-24 23:06:51 +00:00
105 lines
2.3 KiB
SCSS
105 lines
2.3 KiB
SCSS
.avatar-component {
|
|
position: relative;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
background-color: var(--bg-tertiary, #f5f5f5);
|
|
flex-shrink: 0;
|
|
border-radius: 4px;
|
|
/* Default radius */
|
|
|
|
&.circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&.rounded {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Image styling */
|
|
img.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
border-radius: inherit;
|
|
|
|
&.loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.instant {
|
|
transition: none !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
/* Placeholder/Letter styling */
|
|
.avatar-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 500;
|
|
color: var(--text-secondary, #666);
|
|
background-color: var(--bg-tertiary, #e0e0e0);
|
|
font-size: 1.2em;
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.avatar-loading {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-tertiary, #999);
|
|
background-color: var(--bg-tertiary, #e0e0e0);
|
|
border-radius: inherit;
|
|
|
|
.avatar-loading-icon {
|
|
animation: avatar-spin 0.9s linear infinite;
|
|
}
|
|
}
|
|
|
|
/* Loading Skeleton */
|
|
.avatar-skeleton {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg,
|
|
var(--bg-tertiary, #f0f0f0) 25%,
|
|
var(--bg-secondary, #e0e0e0) 50%,
|
|
var(--bg-tertiary, #f0f0f0) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
z-index: 1;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes avatar-spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|