- M3 认证/权限/审计/限流 + 全部 REST 接口 - M4 管理面板(MIUIx + 成绩录入/积分榜下钻/大屏控制) - M5a 大屏页面(六页 + 明细覆盖层 + 缩放适配) - M6 WebSocket 实时同步中心 - M7 xlsx 导出 + 赛事包 zip + 备份 - 规则包 YAML 导入导出(差异预览) - 字体 vendor 子集化(4 套 x2 字重) - 集成:realtime/export/rules 接入 main+httpapi;backup 子命令 - 修复:中间件包装 ResponseWriter 丢失 Hijacker,导致 WS 握手 501
62 lines
1.9 KiB
CSS
62 lines
1.9 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Badge & Tag Component
|
|
Miuix capsule shape badges
|
|
═══════════════════════════════════════════ */
|
|
|
|
.mx-badge{
|
|
display:inline-flex;align-items:center;gap:5px;
|
|
padding:3px 10px;
|
|
border-radius:var(--mx-r-pill);
|
|
font-size:12px;font-weight:600;
|
|
transition:filter var(--mx-d1);
|
|
}
|
|
.mx-badge:hover{filter:brightness(1.15)}
|
|
|
|
.mx-badge::before{
|
|
content:'';width:6px;height:6px;
|
|
border-radius:50%;flex-shrink:0;
|
|
}
|
|
|
|
/* Variants */
|
|
.mx-badge-success{background:rgba(52,211,153,0.1);color:var(--mx-green)}
|
|
.mx-badge-success::before{background:var(--mx-green);animation:mx-pulse 2s infinite}
|
|
|
|
.mx-badge-warning{background:rgba(251,191,36,0.1);color:var(--mx-amber)}
|
|
.mx-badge-warning::before{background:var(--mx-amber)}
|
|
|
|
.mx-badge-error{background:rgba(248,113,113,0.1);color:var(--mx-red)}
|
|
.mx-badge-error::before{background:var(--mx-red);animation:mx-pulse 1.5s infinite}
|
|
|
|
.mx-badge-info{background:rgba(96,165,250,0.1);color:var(--mx-blue)}
|
|
.mx-badge-info::before{background:var(--mx-blue)}
|
|
|
|
.mx-badge-neutral{background:rgba(139,149,165,0.1);color:var(--mx-t2)}
|
|
.mx-badge-neutral::before{background:var(--mx-t2)}
|
|
|
|
/* Dot-only badge */
|
|
.mx-dot{
|
|
width:8px;height:8px;
|
|
border-radius:50%;
|
|
flex-shrink:0;
|
|
}
|
|
|
|
/* Count badge */
|
|
.mx-count{
|
|
display:inline-flex;align-items:center;justify-content:center;
|
|
min-width:18px;height:18px;padding:0 5px;
|
|
border-radius:var(--mx-r-pill);
|
|
font-size:10px;font-weight:700;
|
|
background:var(--mx-primary);color:#fff;
|
|
}
|
|
|
|
@keyframes mx-pulse{
|
|
0%,100%{opacity:1;transform:scale(1)}
|
|
50%{opacity:0.5;transform:scale(1.3)}
|
|
}
|
|
|
|
/* Mobile */
|
|
@media(max-width:767px){
|
|
.mx-badge{padding:4px 12px;font-size:13px}
|
|
.mx-count{min-width:20px;height:20px;font-size:11px}
|
|
}
|