@opentiny/vue-theme/user-head/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-user-head{--tv-UserHead-head-font-size:var(--tv-font-size-default, 14px);--tv-UserHead-head-normal-size:72px;--tv-UserHead-head-small-size:30px;--tv-UserHead-head-icon-size-normal:40px;--tv-UserHead-head-icon-small-size:14px;--tv-UserHead-head-border-radius:var(--tv-border-radius-xs, 2px);--tv-UserHead-head-bg-color:#bbbbbb;display:inline-block;position:relative}.tiny-user-head__portrait{overflow:hidden;width:var(--tv-UserHead-head-normal-size);height:var(--tv-UserHead-head-normal-size);line-height:var(--tv-UserHead-head-normal-size);text-align:center;border-radius:var(--tv-UserHead-head-border-radius);background-position:center center;background-repeat:no-repeat;background-size:cover;background-color:var(--tv-UserHead-head-bg-color,#bbb)}.tiny-user-head__portrait.round{border-radius:50%}.tiny-user-head__portrait.min{width:var(--tv-UserHead-head-small-size);height:var(--tv-UserHead-head-small-size);line-height:var(--tv-UserHead-head-small-size)}.tiny-user-head__portrait.icon{font-size:var(--tv-UserHead-head-icon-size-normal)}.tiny-user-head__portrait.icon.min{font-size:var(--tv-UserHead-head-icon-small-size)}.tiny-user-head__portrait.icon svg{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.tiny-user-head__portrait.label>span{overflow:hidden;width:calc(100% - 6px);display:block;margin:0 3px}.tiny-user-head__message{position:absolute;top:-9px;left:63px;height:18px;line-height:16px;min-width:18px;width:auto;border-radius:9px;background:red;color:#fff;text-align:center;padding:0 2px;border:2px solid #fff;font-size:var(--tv-UserHead-head-font-size);word-break:initial}.tiny-user-head__message.round{top:0;left:54px}.tiny-user-head__message.min{top:-9px;left:21px}.tiny-user-head__message.basic{top:-4px;left:68px;height:8px;width:8px;min-width:8px;line-height:0;border-radius:4px}.tiny-user-head__message.basic.round{top:10px;left:64px}.tiny-user-head__message.basic.min{top:-4px;left:26px}.tiny-user-head__message.basic.min.round{top:0}