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
68 lines
2.0 KiB
CSS
68 lines
2.0 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Switch Component
|
|
对应 Miuix Switch.kt — miuixCapsuleShape
|
|
═══════════════════════════════════════════ */
|
|
|
|
.mx-switch{
|
|
display:inline-flex;align-items:center;gap:10px;
|
|
cursor:pointer;
|
|
-webkit-tap-highlight-color:transparent;
|
|
}
|
|
.mx-switch input{display:none}
|
|
|
|
.mx-switch-track{
|
|
width:44px;height:26px;
|
|
background:var(--mx-s4);
|
|
border-radius:var(--mx-r-pill);
|
|
position:relative;
|
|
transition:background var(--mx-d2) var(--mx-ease);
|
|
flex-shrink:0;
|
|
}
|
|
.mx-switch-thumb{
|
|
position:absolute;top:3px;left:3px;
|
|
width:20px;height:20px;
|
|
background:#fff;
|
|
border-radius:50%;
|
|
box-shadow:0 1px 4px rgba(0,0,0,0.25);
|
|
transition:transform var(--mx-d2) var(--mx-spring);
|
|
}
|
|
|
|
@keyframes mx-switch-bounce{
|
|
0%{transform:translateX(0)}
|
|
50%{transform:translateX(22px)}
|
|
100%{transform:translateX(20px)}
|
|
}
|
|
|
|
/* Checked */
|
|
.mx-switch input:checked + .mx-switch-track{
|
|
background:var(--mx-primary);
|
|
}
|
|
.mx-switch input:checked + .mx-switch-track .mx-switch-thumb{
|
|
animation:mx-switch-bounce 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
|
|
}
|
|
|
|
/* Disabled */
|
|
.mx-switch input:disabled + .mx-switch-track{
|
|
opacity:0.4;cursor:not-allowed;
|
|
}
|
|
|
|
/* Label */
|
|
.mx-switch-label{
|
|
font-size:14px;color:var(--mx-text);
|
|
transition:color var(--mx-d1);
|
|
}
|
|
|
|
/* Mobile: 加大触控区 */
|
|
@media(max-width:767px){
|
|
.mx-switch{min-height:44px;padding:4px 0}
|
|
.mx-switch-track{width:48px;height:28px}
|
|
.mx-switch-thumb{width:22px;height:22px;top:3px;left:3px}
|
|
@keyframes mx-switch-bounce-mobile{
|
|
0%{transform:translateX(0)}
|
|
50%{transform:translateX(22px)}
|
|
100%{transform:translateX(20px)}
|
|
}
|
|
.mx-switch input:checked + .mx-switch-track .mx-switch-thumb{animation:mx-switch-bounce-mobile 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards}
|
|
.mx-switch-label{font-size:15px}
|
|
}
|