Files
Scoreboard/vendor/miuix-console/components/badge.css
T
AskaEth bc8b1ee6c0 feat: M3-M7 全模块落地 + 集成接线
- M3 认证/权限/审计/限流 + 全部 REST 接口
- M4 管理面板(MIUIx + 成绩录入/积分榜下钻/大屏控制)
- M5a 大屏页面(六页 + 明细覆盖层 + 缩放适配)
- M6 WebSocket 实时同步中心
- M7 xlsx 导出 + 赛事包 zip + 备份
- 规则包 YAML 导入导出(差异预览)
- 字体 vendor 子集化(4 套 x2 字重)
- 集成:realtime/export/rules 接入 main+httpapi;backup 子命令
- 修复:中间件包装 ResponseWriter 丢失 Hijacker,导致 WS 握手 501
2026-09-09 19:02:24 +08:00

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}
}