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
95 lines
2.5 KiB
CSS
95 lines
2.5 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Tabs Component
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* Tab bar */
|
|
.mx-tabs{
|
|
display:flex;align-items:center;
|
|
border-bottom:1px solid var(--mx-divider);
|
|
overflow-x:auto;scrollbar-width:none;
|
|
-webkit-overflow-scrolling:touch;
|
|
}
|
|
.mx-tabs::-webkit-scrollbar{display:none}
|
|
|
|
/* Tab item */
|
|
.mx-tab{
|
|
display:flex;align-items:center;gap:6px;
|
|
padding:10px 16px;
|
|
font-size:13px;font-weight:500;
|
|
color:var(--mx-t3);
|
|
cursor:pointer;white-space:nowrap;
|
|
position:relative;
|
|
transition:all var(--mx-d1) var(--mx-ease);
|
|
-webkit-tap-highlight-color:transparent;
|
|
}
|
|
.mx-tab:hover{color:var(--mx-text)}
|
|
|
|
/* Active indicator — bottom line */
|
|
.mx-tab::after{
|
|
content:'';position:absolute;bottom:0;left:8px;right:8px;
|
|
height:2px;border-radius:1px;
|
|
background:var(--mx-primary);
|
|
transform:scaleX(0);
|
|
transition:transform var(--mx-d2) var(--mx-spring);
|
|
}
|
|
.mx-tab.active{color:var(--mx-primary);font-weight:600}
|
|
.mx-tab.active::after{transform:scaleX(1)}
|
|
|
|
/* Badge in tab */
|
|
.mx-tab .mx-count{margin-left:4px}
|
|
|
|
/* Disabled */
|
|
.mx-tab.disabled{opacity:0.4;pointer-events:none}
|
|
|
|
/* Pill variant */
|
|
.mx-tabs-pill{
|
|
border-bottom:none;
|
|
background:var(--mx-s3);
|
|
border-radius:var(--mx-r-pill);
|
|
padding:3px;gap:2px;
|
|
}
|
|
.mx-tabs-pill .mx-tab{
|
|
border-radius:var(--mx-r-pill);
|
|
padding:6px 14px;
|
|
}
|
|
.mx-tabs-pill .mx-tab::after{display:none}
|
|
.mx-tabs-pill .mx-tab.active{
|
|
background:var(--mx-primary);color:#fff;
|
|
box-shadow:0 2px 8px rgba(76,139,245,0.25);
|
|
}
|
|
|
|
/* Card variant */
|
|
.mx-tabs-card{
|
|
border-bottom:none;gap:4px;
|
|
}
|
|
.mx-tabs-card .mx-tab{
|
|
border-radius:var(--mx-r-sm);
|
|
padding:8px 14px;
|
|
}
|
|
.mx-tabs-card .mx-tab::after{display:none}
|
|
.mx-tabs-card .mx-tab.active{
|
|
background:var(--mx-primary-glow);color:var(--mx-primary);
|
|
}
|
|
|
|
/* Tab content */
|
|
.mx-tab-panel{display:none;padding:16px 0}
|
|
.mx-tab-panel.active{display:block}
|
|
|
|
/* Alignment */
|
|
.mx-tabs-center{justify-content:center}
|
|
.mx-tabs-end{justify-content:flex-end}
|
|
|
|
/* Mobile: 触控友好 + 可滚动 */
|
|
@media(max-width:767px){
|
|
.mx-tab{padding:12px 14px;min-height:44px;font-size:14px}
|
|
.mx-tabs-pill .mx-tab{padding:8px 16px}
|
|
.mx-tabs-card .mx-tab{padding:10px 14px}
|
|
/* 隐藏超出的 badge */
|
|
.mx-tab .mx-count{display:none}
|
|
}
|
|
|
|
/* Tablet: 可滚动 */
|
|
@media(min-width:768px) and (max-width:1023px){
|
|
.mx-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
|
|
}
|