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
213 lines
6.7 KiB
CSS
213 lines
6.7 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Navigation Components
|
|
TopBar + Sidebar + BottomNav
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* ── TopBar — Miuix frosted glass ── */
|
|
.mx-topbar{
|
|
position:sticky;top:0;z-index:100;
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
height:52px;padding:0 16px;
|
|
padding-top:var(--mx-safe-t);
|
|
border-bottom:1px solid var(--mx-divider);
|
|
backdrop-filter:blur(24px) saturate(1.8);
|
|
-webkit-backdrop-filter:blur(24px) saturate(1.8);
|
|
flex-shrink:0;
|
|
}
|
|
[data-theme="dark"] .mx-topbar{background:rgba(0,0,0,0.6)}
|
|
[data-theme="light"] .mx-topbar{background:rgba(247,247,247,0.65)}
|
|
|
|
.mx-topbar-left{display:flex;align-items:center;gap:10px}
|
|
.mx-topbar-right{display:flex;align-items:center;gap:4px}
|
|
|
|
/* Logo */
|
|
.mx-logo{
|
|
display:flex;align-items:center;gap:10px;
|
|
}
|
|
.mx-logo-icon{
|
|
width:32px;height:32px;
|
|
background:linear-gradient(135deg,var(--mx-primary),var(--mx-accent));
|
|
border-radius:10px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
transition:transform var(--mx-d2) var(--mx-ease);
|
|
box-shadow:0 2px 8px rgba(76,139,245,0.2);
|
|
flex-shrink:0;
|
|
}
|
|
.mx-logo-icon:active{transform:scale(0.92)}
|
|
.mx-logo-icon svg{color:#fff}
|
|
.mx-logo-text{font-size:16px;font-weight:700}
|
|
|
|
/* ── Sidebar ── */
|
|
.mx-sidebar{
|
|
width:240px;flex-shrink:0;
|
|
background:var(--mx-s1);
|
|
border-right:1px solid var(--mx-divider);
|
|
padding:12px;
|
|
overflow-y:auto;scrollbar-width:none;
|
|
}
|
|
.mx-sidebar::-webkit-scrollbar{display:none}
|
|
|
|
.mx-sidebar-section{
|
|
font-size:11px;font-weight:700;color:var(--mx-t3);
|
|
text-transform:uppercase;letter-spacing:0.06em;
|
|
padding:0 10px;margin:16px 0 4px;
|
|
}
|
|
.mx-sidebar-section:first-child{margin-top:4px}
|
|
|
|
.mx-nav-item{
|
|
display:flex;align-items:center;gap:10px;
|
|
padding:8px 10px;border-radius:var(--mx-r-sm);
|
|
cursor:pointer;color:var(--mx-t2);
|
|
font-size:13px;font-weight:500;
|
|
transition:all var(--mx-d1) var(--mx-ease);
|
|
position:relative;
|
|
-webkit-tap-highlight-color:transparent;
|
|
}
|
|
.mx-nav-item::before{
|
|
content:'';position:absolute;left:0;top:50%;
|
|
width:3px;height:0;
|
|
background:var(--mx-primary);
|
|
border-radius:0 3px 3px 0;
|
|
transform:translateY(-50%);
|
|
transition:height var(--mx-d2) var(--mx-spring);
|
|
}
|
|
.mx-nav-item:hover{background:var(--mx-s-hover);color:var(--mx-text)}
|
|
.mx-nav-item.active{background:var(--mx-primary-glow);color:var(--mx-primary)}
|
|
.mx-nav-item.active::before{height:18px}
|
|
.mx-nav-item:active{transform:scale(0.97)}
|
|
.mx-nav-item svg{flex-shrink:0}
|
|
.mx-nav-label{flex:1}
|
|
|
|
.mx-sidebar-bottom{
|
|
margin-top:auto;padding-top:12px;
|
|
border-top:1px solid var(--mx-divider);
|
|
}
|
|
|
|
/* ── BottomNav — mobile only ── */
|
|
.mx-bottom-nav{
|
|
position:fixed;bottom:0;left:0;right:0;z-index:200;
|
|
border-top:1px solid var(--mx-divider);
|
|
backdrop-filter:blur(24px) saturate(1.8);
|
|
-webkit-backdrop-filter:blur(24px) saturate(1.8);
|
|
padding:4px 0;
|
|
padding-bottom:calc(4px + var(--mx-safe-b));
|
|
}
|
|
[data-theme="dark"] .mx-bottom-nav{background:rgba(0,0,0,0.6)}
|
|
[data-theme="light"] .mx-bottom-nav{background:rgba(247,247,247,0.65)}
|
|
|
|
.mx-bottom-nav-items{
|
|
display:flex;justify-content:space-around;
|
|
}
|
|
|
|
.mx-btm-item{
|
|
display:flex;flex-direction:column;align-items:center;gap:2px;
|
|
padding:6px 16px;border-radius:var(--mx-r-sm);
|
|
cursor:pointer;color:var(--mx-t3);
|
|
transition:all var(--mx-d2) var(--mx-spring);
|
|
-webkit-tap-highlight-color:transparent;
|
|
position:relative;
|
|
}
|
|
.mx-btm-item.active{color:var(--mx-primary)}
|
|
.mx-btm-item.active::before{
|
|
content:'';position:absolute;top:2px;left:50%;
|
|
width:5px;height:5px;
|
|
background:var(--mx-primary);
|
|
border-radius:50%;transform:translateX(-50%);
|
|
animation:mx-dot-in var(--mx-d2) var(--mx-spring);
|
|
}
|
|
.mx-btm-item span{font-size:10px;font-weight:600}
|
|
.mx-btm-item:active{transform:scale(0.88)}
|
|
|
|
@keyframes mx-dot-in{
|
|
from{transform:translateX(-50%) scale(0);opacity:0}
|
|
to{transform:translateX(-50%) scale(1);opacity:1}
|
|
}
|
|
|
|
/* ── Breadcrumb ── */
|
|
.mx-breadcrumb{
|
|
display:flex;align-items:center;gap:8px;
|
|
font-size:13px;color:var(--mx-t3);
|
|
}
|
|
.mx-breadcrumb span{transition:color var(--mx-d1)}
|
|
.mx-breadcrumb span:last-child{color:var(--mx-t2);font-weight:500}
|
|
.mx-breadcrumb .mx-breadcrumb-sep{color:var(--mx-t3);font-size:11px}
|
|
|
|
/* ── Pill Group — density/theme toggle ── */
|
|
.mx-pill-group{
|
|
display:inline-flex;
|
|
background:var(--mx-s3);
|
|
border-radius:var(--mx-r-pill);
|
|
padding:3px;gap:2px;
|
|
}
|
|
.mx-pill-group button{
|
|
padding:5px 14px;border-radius:var(--mx-r-pill);
|
|
font-size:12px;font-weight:600;cursor:pointer;
|
|
color:var(--mx-t3);
|
|
transition:all var(--mx-d2) var(--mx-ease);
|
|
}
|
|
.mx-pill-group button.active{
|
|
background:var(--mx-primary);color:#fff;
|
|
box-shadow:0 2px 8px rgba(76,139,245,0.25);
|
|
}
|
|
.mx-pill-group button:hover:not(.active){color:var(--mx-text)}
|
|
|
|
/* ── Avatar ── */
|
|
.mx-avatar{
|
|
width:32px;height:32px;border-radius:50%;
|
|
background:linear-gradient(135deg,var(--mx-primary),var(--mx-accent));
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:13px;font-weight:700;color:#fff;
|
|
cursor:pointer;flex-shrink:0;
|
|
transition:all var(--mx-d2) var(--mx-ease);
|
|
box-shadow:0 0 0 0 var(--mx-primary-glow);
|
|
}
|
|
.mx-avatar:hover{box-shadow:0 0 0 4px var(--mx-primary-glow)}
|
|
.mx-avatar:active{transform:scale(0.9)}
|
|
|
|
/* ── Notification Dot ── */
|
|
.mx-notify{
|
|
position:relative;
|
|
}
|
|
.mx-notify .mx-notify-dot{
|
|
position:absolute;top:7px;right:7px;
|
|
width:7px;height:7px;
|
|
background:var(--mx-red);
|
|
border-radius:50%;
|
|
border:2px solid var(--mx-s1);
|
|
animation:mx-pulse 2s infinite;
|
|
}
|
|
|
|
/* ═══ MOBILE ADAPTATIONS ═══ */
|
|
@media(max-width:767px){
|
|
/* TopBar 更紧凑 */
|
|
.mx-topbar{height:48px;padding:0 12px}
|
|
.mx-logo-icon{width:28px;height:28px;border-radius:8px}
|
|
.mx-logo-text{font-size:14px}
|
|
.mx-avatar{width:28px;height:28px;font-size:12px}
|
|
|
|
/* BottomNav 加大触控区 */
|
|
.mx-btm-item{padding:8px 16px;min-width:56px}
|
|
.mx-btm-item span{font-size:11px}
|
|
.mx-btm-item svg{width:24px;height:24px}
|
|
|
|
/* Sidebar section */
|
|
.mx-sidebar-section{font-size:10px}
|
|
.mx-nav-item{padding:11px 10px;min-height:44px}
|
|
|
|
/* Breadcrumb 滚动 */
|
|
.mx-breadcrumb{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
|
|
|
|
/* Pill group */
|
|
.mx-pill-group button{padding:6px 12px;font-size:11px}
|
|
|
|
/* Notification dot */
|
|
.mx-notify .mx-notify-dot{top:5px;right:5px;width:6px;height:6px}
|
|
}
|
|
|
|
/* ═══ TABLET ADAPTATIONS ═══ */
|
|
@media(min-width:768px) and (max-width:1023px){
|
|
.mx-topbar{height:50px}
|
|
.mx-bottom-nav{padding:6px 0}
|
|
.mx-btm-item span{font-size:10px}
|
|
}
|