xtreme-ui/dist/components/base/Avatar/avatar.css

Collection of reusable components that can be used in web projects

.xtrAvatar{--avatarSize: 64px;position:relative;width:var(--avatarSize);height:var(--avatarSize);display:flex;justify-content:center;align-items:center;cursor:pointer}.xtrAvatar:before{content:"";position:absolute;width:var(--avatarSize);height:var(--avatarSize);border-radius:9999px;border:calc(2px + var(--avatarSize) / 300) solid hsl(var(--colorBrandPrimary)/75%);transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrAvatar:after{content:"";position:absolute;width:var(--avatarSize);height:var(--avatarSize);border-radius:9999px;border:calc(4px + var(--avatarSize) / 300) solid hsl(var(--colorBrandPrimary)/100%);border-left-color:transparent;border-right-color:transparent;opacity:0;transition:all var(--animDurFast) var(--cubicBezierPrimary)}.xtrAvatar .placeholder{color:hsl(var(--colorBrandPrimary)/100%)}.xtrAvatar .image{--imageSize: calc(100% - (4px + var(--avatarSize) / 100));position:absolute;width:var(--imageSize);height:var(--imageSize);border-radius:50%;object-fit:cover;object-position:center;z-index:2;transition:all var(--animDurFast) var(--cubicBezierPrimary);animation:fadeIn .2s ease-out forwards}.xtrAvatar.loading:after{opacity:1;animation:avatarSpin 1s infinite linear}.xtrAvatar.error:before,.xtrAvatar.error:after{border-color:hsl(var(--colorAlertError))}.xtrAvatar.error .placeholder{color:hsl(var(--colorAlertError))}.xtrAvatar:hover:before,.xtrAvatar:hover:after{scale:1.1}.xtrAvatar:active:before,.xtrAvatar:active:after{scale:1}@keyframes avatarSpin{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}50%{transform:rotate(360deg);animation-timing-function:cubic-bezier(.215,.61,.355,1)}to{transform:rotate(720deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}