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
136 lines
3.6 KiB
CSS
136 lines
3.6 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Progress Component
|
|
进度条 + 加载指示器
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* ── Linear Progress ── */
|
|
.mx-progress{
|
|
height:4px;background:var(--mx-s3);
|
|
border-radius:var(--mx-r-pill);
|
|
overflow:hidden;
|
|
position:relative;
|
|
}
|
|
.mx-progress-bar{
|
|
height:100%;
|
|
background:var(--mx-primary);
|
|
border-radius:var(--mx-r-pill);
|
|
transition:width var(--mx-d3) var(--mx-ease);
|
|
position:relative;
|
|
}
|
|
|
|
/* Striped */
|
|
.mx-progress-striped .mx-progress-bar{
|
|
background-image:linear-gradient(
|
|
45deg,
|
|
rgba(255,255,255,0.15) 25%,
|
|
transparent 25%,
|
|
transparent 50%,
|
|
rgba(255,255,255,0.15) 50%,
|
|
rgba(255,255,255,0.15) 75%,
|
|
transparent 75%
|
|
);
|
|
background-size:16px 16px;
|
|
}
|
|
|
|
/* Animated striped */
|
|
.mx-progress-animated .mx-progress-bar{
|
|
animation:mx-progress-stripes 0.8s linear infinite;
|
|
}
|
|
@keyframes mx-progress-stripes{
|
|
from{background-position:16px 0}
|
|
to{background-position:0 0}
|
|
}
|
|
|
|
/* Indeterminate */
|
|
.mx-progress-indeterminate{
|
|
overflow:hidden;
|
|
}
|
|
.mx-progress-indeterminate .mx-progress-bar{
|
|
width:30%;
|
|
animation:mx-progress-slide 1.5s var(--mx-ease) infinite;
|
|
}
|
|
@keyframes mx-progress-slide{
|
|
0%{transform:translateX(-100%)}
|
|
100%{transform:translateX(400%)}
|
|
}
|
|
|
|
/* Color variants */
|
|
.mx-progress-success .mx-progress-bar{background:var(--mx-green)}
|
|
.mx-progress-warning .mx-progress-bar{background:var(--mx-amber)}
|
|
.mx-progress-error .mx-progress-bar{background:var(--mx-red)}
|
|
|
|
/* Size */
|
|
.mx-progress-sm{height:2px}
|
|
.mx-progress-lg{height:8px}
|
|
|
|
/* With label */
|
|
.mx-progress-label{
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
margin-bottom:6px;
|
|
font-size:12px;font-weight:600;color:var(--mx-t2);
|
|
}
|
|
.mx-progress-label .mx-progress-value{
|
|
color:var(--mx-primary);font-variant-numeric:tabular-nums;
|
|
}
|
|
|
|
/* ── Circular Progress (Spinner) ── */
|
|
.mx-spinner{
|
|
width:24px;height:24px;
|
|
border:2.5px solid var(--mx-s3);
|
|
border-top-color:var(--mx-primary);
|
|
border-radius:50%;
|
|
animation:mx-spin 0.7s linear infinite;
|
|
}
|
|
@keyframes mx-spin{to{transform:rotate(360deg)}}
|
|
|
|
.mx-spinner-sm{width:18px;height:18px;border-width:2px}
|
|
.mx-spinner-lg{width:36px;height:36px;border-width:3px}
|
|
|
|
/* Dots spinner */
|
|
.mx-spinner-dots{
|
|
display:flex;gap:4px;
|
|
}
|
|
.mx-spinner-dots span{
|
|
width:6px;height:6px;
|
|
border-radius:50%;
|
|
background:var(--mx-primary);
|
|
animation:mx-dot-bounce 1.2s ease-in-out infinite;
|
|
}
|
|
.mx-spinner-dots span:nth-child(2){animation-delay:0.15s}
|
|
.mx-spinner-dots span:nth-child(3){animation-delay:0.3s}
|
|
@keyframes mx-dot-bounce{
|
|
0%,80%,100%{transform:scale(0.6);opacity:0.4}
|
|
40%{transform:scale(1);opacity:1}
|
|
}
|
|
|
|
/* ── Progress Ring (circular) ── */
|
|
.mx-progress-ring{
|
|
display:inline-flex;align-items:center;justify-content:center;
|
|
position:relative;
|
|
}
|
|
.mx-progress-ring svg{
|
|
transform:rotate(-90deg);
|
|
}
|
|
.mx-progress-ring-track{
|
|
fill:none;stroke:var(--mx-s3);stroke-width:4;
|
|
}
|
|
.mx-progress-ring-bar{
|
|
fill:none;stroke:var(--mx-primary);stroke-width:4;
|
|
stroke-linecap:round;
|
|
transition:stroke-dashoffset var(--mx-d3) var(--mx-ease);
|
|
}
|
|
.mx-progress-ring-text{
|
|
position:absolute;
|
|
font-size:12px;font-weight:700;
|
|
color:var(--mx-text);
|
|
font-variant-numeric:tabular-nums;
|
|
}
|
|
|
|
/* Mobile */
|
|
@media(max-width:767px){
|
|
.mx-progress{height:6px}
|
|
.mx-progress-lg{height:10px}
|
|
.mx-spinner{width:28px;height:28px}
|
|
.mx-spinner-lg{width:40px;height:40px}
|
|
}
|