@vuesax-alpha/nightly/theme-chalk/vs-avatar.css

A Component Library for Vue 3

.vs-avatar-content{--vs-avatar-badge:var(--vs-primary);--vs-avatar-width:44px;--vs-avatar-height:44px;--vs-avatar-badge-position-top:-4px;--vs-avatar-badge-position-right:-4px;--vs-avatar-badge-position-bottom:-4px;--vs-avatar-badge-position-left:-4px;--vs-avatar-circle-badge-position-top:-2px;--vs-avatar-circle-badge-position-right:-2px;--vs-avatar-circle-badge-position-bottom:-2px;--vs-avatar-circle-badge-position-left:-2px;--vs-avatar-three-letter-font-size:0.9rem;--vs-avatar-four-letter-font-size:0.8rem;--vs-avatar-five-letter-font-size:0.7rem;--vs-avatar-six-letter-font-size:0.6rem;--vs-avatar-point-width:5px;--vs-color:var(--vs-gray-2)}.vs-avatar-content{border-radius:35%;z-index:1;width:var(--vs-avatar-width);height:var(--vs-avatar-height);position:relative;transition:var(--vs-transition-ease);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-avatar-content__badge--change-color:hover .vs-avatar{box-shadow:inset 0 0 40px 0 rgba(var(--vs-black),.1)}.vs-avatar-content:hover .vs-avatar{box-shadow:inset 0 0 40px 0 rgba(var(--vs-black),.04)}.vs-avatar-content:hover img{transform:scale(1.1)}.vs-avatar-content__hasIcons{margin-right:20px}.vs-avatar-content__hidden{display:none!important}.vs-avatar-content__circle{border-radius:50%!important}.vs-avatar-content__circle .vs-avatar__badge{right:var(--vs-avatar-circle-badge-position-right);bottom:var(--vs-avatar-circle-badge-position-bottom)}.vs-avatar-content__circle .vs-avatar__badge.top-right{top:var(--vs-avatar-circle-badge-position-top);bottom:auto}.vs-avatar-content__circle .vs-avatar__badge.top-left{top:var(--vs-avatar-circle-badge-position-top);left:var(--vs-avatar-circle-badge-position-left);bottom:auto;right:auto}.vs-avatar-content__circle .vs-avatar__badge.bottom-left{left:var(--vs-avatar-circle-badge-position-left);right:auto}.vs-avatar-content__square{border-radius:0!important}.vs-avatar-content.history{display:flex;justify-content:center;align-items:center}.vs-avatar-content.history--gradient:after{background-image:linear-gradient(40deg,#f99b4a 0,#df376b 74%,#c52d91 74%)!important}.vs-avatar-content.history .vs-avatar{width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid rgba(var(--vs-background),1);margin:2px}.vs-avatar-content.history:not(.vs-component--is-color)::after{background-color:rgba(var(--vs-divider),1)}.vs-avatar-content.history:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:inherit;z-index:-1;background:rgba(var(--vs-color),1)}.vs-avatar-content.vs-component--is-color .vs-avatar{color:rgba(var(--vs-background),1)}.vs-avatar-content.vs-component--is-color .vs-avatar__points .vs-avatar__points--item{background:rgba(var(--vs-background),1)}.vs-avatar{display:flex;justify-content:center;align-items:center;background:rgba(var(--vs-color),1);color:#fff;overflow:hidden;color:rgba(var(--vs-text),1);border-radius:inherit;width:100%;height:100%;transition:var(--vs-transition-ease);box-shadow:inset 0 0 0 0 rgba(var(--vs-black),.05)}.vs-avatar i{font-size:1.4rem}.vs-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;transition:var(--vs-transition-ease);border-radius:inherit}.vs-avatar__loading{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;border-radius:inherit;background:rgba(var(--vs-black),.5)}.vs-avatar__loading--animate{--vs-color:var(--vs-light);display:flex;justify-content:center;align-items:center;height:60%;width:60%;border-radius:50%;position:relative}.vs-avatar__letter--3{font-size:var(--vs-avatar-three-letter-font-size)}.vs-avatar__letter--4{font-size:var(--vs-avatar-four-letter-font-size)}.vs-avatar__letter--5{font-size:var(--vs-avatar-five-letter-font-size)}.vs-avatar__letter--6{font-size:var(--vs-avatar-six-letter-font-size)}.vs-avatar__badge{position:absolute;width:13px;height:13px;background:rgba(var(--vs-avatar-badge),1);border-radius:50%;border:2px solid rgba(var(--vs-background),1)!important;right:var(--vs-avatar-badge-position-right);bottom:var(--vs-avatar-badge-position-bottom);font-size:.6rem;font-weight:700;z-index:200;color:rgba(var(--vs-text),1)}.vs-avatar__badge.is-slot,.vs-avatar__badge.is-writing{width:auto;height:auto;border-radius:7px;min-width:18px;display:flex;justify-content:center;align-items:center;color:rgba(var(--vs-background),1);line-height:.9rem;padding:0 3px;min-height:18px}.vs-avatar__badge.top-right{top:var(--vs-avatar-badge-position-top);bottom:auto}.vs-avatar__badge.top-left{top:var(--vs-avatar-badge-position-top);left:var(--vs-avatar-badge-position-left);bottom:auto;right:auto}.vs-avatar__badge.bottom-left{left:var(--vs-avatar-badge-position-left);right:auto}.vs-avatar__points{display:flex;justify-content:center;align-items:center;position:relative}.vs-avatar__points--item{width:var(--vs-avatar-point-width);height:var(--vs-avatar-point-width);background:rgba(var(--vs-text),1);margin:0 2px;border-radius:50%}.vs-avatar__points--item:nth-child(1){animation:point 1.2s ease infinite}.vs-avatar__points--item:nth-child(2){animation:point 1.2s ease infinite .4s}.vs-avatar__points--item:nth-child(3){animation:point 1.2s ease infinite .8s}.vs-avatar__lastest{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;z-index:300;border-radius:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-weight:600;color:#fff;background:rgba(var(--vs-black),.5)}.vs-avatar__icons{position:absolute;right:-20px;top:50%;width:auto;height:auto;min-height:90%;padding:3px;padding-left:5px;background:rgba(var(--vs-gray-3),1);transform:translate(0,-50%);display:flex;justify-content:center;align-items:flex-end;flex-direction:column;z-index:-1;border-radius:5px;font-size:1rem}.vs-avatar__icons i{cursor:pointer;transition:var(--vs-transition-ease)}.vs-avatar__icons i:hover{opacity:.7}@keyframes point{0%{opacity:1}50%{opacity:.4;transform:scale(.5)}100%{opacity:1}}@keyframes rotateInputLoading{100%{transform:rotate(1turn)}}