111 lines
2.3 KiB
CSS
111 lines
2.3 KiB
CSS
/* 头像尺寸是组件内部的比例关系，用局部变量集中声明（不往全局令牌里塞） */
|
|
.root {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* 裁切层：图片 / 字符块都在这里被圆角裁掉，角标画在它外面 */
|
|
.media {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
background-color: var(--su-bg-light);
|
|
color: var(--su-text-sub);
|
|
}
|
|
|
|
.circle {
|
|
border-radius: var(--su-radius-pill);
|
|
}
|
|
|
|
.square {
|
|
border-radius: var(--su-radius-sm);
|
|
}
|
|
|
|
.sm {
|
|
--avatar-size: 24px;
|
|
--avatar-badge: 12px;
|
|
|
|
width: var(--avatar-size);
|
|
height: var(--avatar-size);
|
|
font-size: var(--su-font-size-sm);
|
|
}
|
|
|
|
.md {
|
|
--avatar-size: 36px;
|
|
--avatar-badge: 16px;
|
|
|
|
width: var(--avatar-size);
|
|
height: var(--avatar-size);
|
|
font-size: var(--su-font-size-md);
|
|
}
|
|
|
|
.lg {
|
|
--avatar-size: 48px;
|
|
--avatar-badge: 20px;
|
|
|
|
width: var(--avatar-size);
|
|
height: var(--avatar-size);
|
|
font-size: var(--su-font-size-lg);
|
|
}
|
|
|
|
/* 资料卡 / 详情页的大头像 */
|
|
.xl {
|
|
--avatar-size: 64px;
|
|
--avatar-badge: 20px;
|
|
|
|
width: var(--avatar-size);
|
|
height: var(--avatar-size);
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* 无图时的品牌底色：浅色渐变 + 主色字，比纯灰更有识别度 */
|
|
.primary .media {
|
|
background: var(--su-avatar-gradient);
|
|
color: var(--su-color-primary);
|
|
}
|
|
|
|
/* 图标占位：尺寸跟随字体，颜色跟随 tone */
|
|
.icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.2em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.fallback {
|
|
font-weight: var(--su-font-weight-bold);
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* 认证角标：橙底白勾，盖在头像右下角，带一圈与卡片同色的描边 */
|
|
.verified {
|
|
position: absolute;
|
|
right: -2px;
|
|
bottom: -2px;
|
|
display: grid;
|
|
place-items: center;
|
|
width: var(--avatar-badge);
|
|
height: var(--avatar-badge);
|
|
border: 2px solid var(--su-bg-card);
|
|
border-radius: var(--su-radius-pill);
|
|
background: var(--su-color-warning);
|
|
color: var(--su-white);
|
|
font-size: calc(var(--avatar-badge) * 0.55);
|
|
font-weight: var(--su-font-weight-strong);
|
|
line-height: 1;
|
|
}
|