AskaEth
bc8b1ee6c0
- M3 认证/权限/审计/限流 + 全部 REST 接口 - M4 管理面板（MIUIx + 成绩录入/积分榜下钻/大屏控制） - M5a 大屏页面（六页 + 明细覆盖层 + 缩放适配） - M6 WebSocket 实时同步中心 - M7 xlsx 导出 + 赛事包 zip + 备份 - 规则包 YAML 导入导出（差异预览） - 字体 vendor 子集化（4 套 x2 字重） - 集成：realtime/export/rules 接入 main+httpapi；backup 子命令 - 修复：中间件包装 ResponseWriter 丢失 Hijacker，导致 WS 握手 501
71 lines
2.1 KiB
CSS
71 lines
2.1 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Avatar Component
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* Base avatar (extend existing .mx-avatar) */
|
|
.mx-avatar-img{
|
|
width:32px;height:32px;border-radius:50%;
|
|
object-fit:cover;flex-shrink:0;
|
|
border:2px solid var(--mx-s2);
|
|
}
|
|
|
|
/* Sizes */
|
|
.mx-avatar-xs{width:24px;height:24px;font-size:10px}
|
|
.mx-avatar-sm{width:28px;height:28px;font-size:11px}
|
|
.mx-avatar-md{width:36px;height:36px;font-size:14px}
|
|
.mx-avatar-lg{width:44px;height:44px;font-size:16px}
|
|
.mx-avatar-xl{width:56px;height:56px;font-size:20px}
|
|
|
|
/* Avatar Group */
|
|
.mx-avatar-group{
|
|
display:flex;
|
|
}
|
|
.mx-avatar-group .mx-avatar,
|
|
.mx-avatar-group .mx-avatar-img{
|
|
margin-left:-8px;
|
|
border:2px solid var(--mx-s2);
|
|
transition:transform var(--mx-d2) var(--mx-spring);
|
|
}
|
|
.mx-avatar-group .mx-avatar:first-child,
|
|
.mx-avatar-group .mx-avatar-img:first-child{margin-left:0}
|
|
.mx-avatar-group .mx-avatar:hover,
|
|
.mx-avatar-group .mx-avatar-img:hover{
|
|
transform:translateY(-2px);
|
|
z-index:1;
|
|
}
|
|
|
|
/* Overflow counter */
|
|
.mx-avatar-overflow{
|
|
width:32px;height:32px;
|
|
border-radius:50%;
|
|
background:var(--mx-s3);
|
|
border:2px solid var(--mx-s2);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:11px;font-weight:700;
|
|
color:var(--mx-t2);
|
|
margin-left:-8px;
|
|
}
|
|
|
|
/* Status dot */
|
|
.mx-avatar-status{
|
|
position:relative;
|
|
}
|
|
.mx-avatar-status::after{
|
|
content:'';position:absolute;
|
|
bottom:0;right:0;
|
|
width:10px;height:10px;
|
|
border-radius:50%;
|
|
border:2px solid var(--mx-s2);
|
|
}
|
|
.mx-avatar-status.online::after{background:var(--mx-green)}
|
|
.mx-avatar-status.busy::after{background:var(--mx-red)}
|
|
.mx-avatar-status.away::after{background:var(--mx-amber)}
|
|
.mx-avatar-status.offline::after{background:var(--mx-t3)}
|
|
|
|
/* Mobile */
|
|
@media(max-width:767px){
|
|
.mx-avatar-group .mx-avatar,
|
|
.mx-avatar-group .mx-avatar-img{margin-left:-10px}
|
|
.mx-avatar-overflow{width:28px;height:28px;font-size:10px}
|
|
}
|