@opentiny/vue-theme/user-contact/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-contact{--tv-UserContact-font-size:var(--tv-font-size-default, 14px);--tv-UserContact-role-info-text-color:var(--tv-color-text-weaken, #808080);--tv-UserContact-role-info-font-size:var(--tv-font-size-sm, 12px);--tv-UserContact-card-message-text-color:var(--tv-color-text-weaken, #808080);--tv-UserContact-card-border-color:var(--tv-color-border, #c2c2c2);--tv-UserContact-card-header-bg-color:var(--tv-color-bg-primary, #191919);--tv-UserContact-card-header-role-text-color:var(--tv-color-text-inverse, #ffffff);--tv-UserContact-card-header-role-font-size:var(--tv-font-size-default, 14px);--tv-UserContact-card-header-role-num-text-color:var(--tv-color-text-weaken, #808080);--tv-UserContact-card-espace-text-color:var(--tv-color-text-weaken, #808080);position:relative;display:inline-block;font-size:0}.tiny-user-contact .tiny-user-contact__main{width:300px;overflow:visible;font-size:var(--tv-UserContact-role-info-font-size)}.tiny-user-contact .tiny-user-contact__main .tiny-user-head{height:100%;width:86px;float:left}.tiny-user-contact .tiny-user-contact__main .tiny-user-head__portrait{margin-top:16px;width:54px;height:54px;line-height:54px;margin-left:20px}.tiny-user-contact .tiny-user-contact__main .tiny-user-contact__role{height:100%;width:auto;float:left;margin-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.tiny-user-contact .tiny-user-contact__main .tiny-user-contact__role-name{display:block;width:100%;color:var(--tv-UserContact-card-header-role-text-color);margin-bottom:6px;height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--tv-UserContact-card-header-role-font-size);text-align:left}.tiny-user-contact .tiny-user-contact__main .tiny-user-contact__role-number{display:block;color:var(--tv-UserContact-card-header-role-num-text-color)}.tiny-user-contact .tiny-user-contact__main .tiny-espace svg{fill:var(--tv-UserContact-card-message-left-color)}.tiny-user-contact .tiny-user-contact__main .card-tools{display:none}.tiny-user-contact .tiny-user-contact__header{line-height:1.5;border:1px solid var(--tv-UserContact-card-border-color);height:86px;background:var(--tv-UserContact-card-header-bg-color);opacity:.9}.tiny-user-contact .tiny-user-contact__title{display:block;height:100%;font-size:var(--tv-UserContact-role-info-font-size);font-weight:400;line-height:46px}.tiny-user-contact .tiny-user-contact__role{display:inline-block;color:var(--tv-UserContact-role-info-text-color);margin-left:8px;vertical-align:middle;font-size:var(--tv-UserContact-role-info-font-size);line-height:1.5}.tiny-user-contact .tiny-user-contact__arrow{margin-left:4px;font-size:var(--tv-UserContact-role-info-font-size);vertical-align:middle;fill:var(--tv-UserContact-role-info-text-color)}.tiny-user-contact .tiny-user-contact__message{padding:10px 20px}.tiny-user-contact .tiny-user-contact__state{text-align:left;margin-bottom:0}.tiny-user-contact .tiny-user-contact__state:nth-of-type(2){margin-top:3px}.tiny-user-contact .tiny-user-contact__state:nth-of-type(3){margin-top:3px}.tiny-user-contact .tiny-user-contact__state-left{color:var(--tv-UserContact-card-message-text-color);opacity:1;font-size:var(--tv-UserContact-font-size);line-height:16px;text-align:left;width:auto;margin-right:0}.tiny-user-contact .tiny-user-contact__state-right{color:var(--tv-UserContact-card-message-text-color);opacity:1;font-size:var(--tv-UserContact-font-size);line-height:16px}.tiny-user-contact.tiny-popover.tiny-popper{padding:0;border:0;border-radius:0}.tiny-user-contact .tiny-card-template__header.is-line{height:auto;border-bottom:0;padding:0}.tiny-user-contact .tiny-card-template__body{padding:0;border:1px solid var(--tv-UserContact-card-border-color)}.tiny-user-contact .tiny-user-head{position:relative;display:inline-block;vertical-align:middle}.tiny-user-contact .tiny-espace{padding:0 20px 10px}.tiny-user-contact .tiny-espace .item-call,.tiny-user-contact .tiny-espace .item-email,.tiny-user-contact .tiny-espace .item-talk{color:var(--tv-UserContact-card-espace-text-color)}.tiny-user-contact.show-arrow .tiny-user-contact__main{width:auto}.tiny-user-contact.show-arrow .tiny-user-contact__main .user-account-custom{line-height:30px}.tiny-user-contact.show-arrow .tiny-user-contact__main .tiny-logout{line-height:30px}.tiny-user-contact.show-arrow .tiny-card-template__body{min-width:180px;border-radius:4px}