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
131 lines
4.2 KiB
CSS
131 lines
4.2 KiB
CSS
/* ═══════════════════════════════════════════
|
|
MIUIX CONSOLE — Select / Dropdown Component
|
|
═══════════════════════════════════════════ */
|
|
|
|
/* Trigger */
|
|
.mx-select{
|
|
position:relative;display:inline-flex;
|
|
}
|
|
.mx-select-trigger{
|
|
display:flex;align-items:center;gap:8px;
|
|
height:40px;padding:0 16px;
|
|
background:var(--mx-s3);
|
|
border:1px solid var(--mx-border);
|
|
border-radius:var(--mx-r-sm);
|
|
font-size:14px;color:var(--mx-text);
|
|
cursor:pointer;
|
|
transition:all var(--mx-d2) var(--mx-ease);
|
|
min-width:160px;
|
|
}
|
|
.mx-select-trigger:hover{border-color:var(--mx-t3)}
|
|
.mx-select-trigger.open{
|
|
border-color:var(--mx-primary);
|
|
box-shadow:0 0 0 3px var(--mx-primary-glow);
|
|
}
|
|
.mx-select-trigger .mx-select-placeholder{color:var(--mx-t3);flex:1}
|
|
.mx-select-trigger .mx-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.mx-select-trigger .mx-select-arrow{
|
|
color:var(--mx-t3);flex-shrink:0;
|
|
transition:transform var(--mx-d2) var(--mx-ease);
|
|
}
|
|
.mx-select-trigger.open .mx-select-arrow{transform:rotate(180deg)}
|
|
|
|
/* Sizes */
|
|
.mx-select-sm .mx-select-trigger{height:34px;padding:0 12px;font-size:13px;border-radius:var(--mx-r-xs)}
|
|
.mx-select-lg .mx-select-trigger{height:46px;padding:0 16px;font-size:15px}
|
|
|
|
/* Dropdown */
|
|
.mx-select-dropdown{
|
|
position:absolute;top:calc(100% + 4px);left:0;z-index:700;
|
|
min-width:100%;max-height:280px;
|
|
background:var(--mx-s4);
|
|
border:1px solid var(--mx-divider);
|
|
border-radius:var(--mx-r-sm);
|
|
box-shadow:var(--mx-sh3);
|
|
padding:4px;
|
|
overflow-y:auto;
|
|
opacity:0;visibility:hidden;
|
|
transform:scale(0.96) translateY(-4px);
|
|
transform-origin:top center;
|
|
transition:all var(--mx-d2) var(--mx-spring);
|
|
}
|
|
.mx-select-dropdown.open{
|
|
opacity:1;visibility:visible;
|
|
transform:scale(1) translateY(0);
|
|
}
|
|
|
|
/* Search input inside dropdown */
|
|
.mx-select-search{
|
|
display:flex;align-items:center;gap:8px;
|
|
padding:8px 10px;margin-bottom:2px;
|
|
border-bottom:1px solid var(--mx-divider);
|
|
}
|
|
.mx-select-search input{
|
|
flex:1;background:none;border:none;outline:none;
|
|
font-size:13px;color:var(--mx-text);
|
|
}
|
|
.mx-select-search input::placeholder{color:var(--mx-t3)}
|
|
.mx-select-search svg{color:var(--mx-t3);flex-shrink:0}
|
|
|
|
/* Option */
|
|
.mx-select-option{
|
|
display:flex;align-items:center;gap:8px;
|
|
padding:8px 10px;border-radius:var(--mx-r-xs);
|
|
font-size:13px;cursor:pointer;
|
|
color:var(--mx-text);
|
|
transition:all var(--mx-d1) var(--mx-ease);
|
|
}
|
|
.mx-select-option:hover{background:var(--mx-s-hover)}
|
|
.mx-select-option:active{background:var(--mx-s-active)}
|
|
.mx-select-option.selected{
|
|
background:var(--mx-primary-glow);color:var(--mx-primary);
|
|
font-weight:600;
|
|
}
|
|
.mx-select-option .mx-select-check{
|
|
margin-left:auto;color:var(--mx-primary);
|
|
opacity:0;transition:opacity var(--mx-d1);
|
|
}
|
|
.mx-select-option.selected .mx-select-check{opacity:1}
|
|
|
|
/* Group label */
|
|
.mx-select-group-label{
|
|
font-size:11px;font-weight:700;color:var(--mx-t3);
|
|
text-transform:uppercase;letter-spacing:0.06em;
|
|
padding:8px 10px 4px;
|
|
}
|
|
|
|
/* Disabled */
|
|
.mx-select.disabled{opacity:0.4;pointer-events:none}
|
|
|
|
/* Mobile: trigger 加大 */
|
|
@media(max-width:767px){
|
|
.mx-select-trigger{height:44px;font-size:16px}
|
|
.mx-select-sm .mx-select-trigger{height:40px;font-size:15px}
|
|
.mx-select-lg .mx-select-trigger{height:50px;font-size:16px}
|
|
.mx-select-option{min-height:44px;padding:10px}
|
|
}
|
|
|
|
/* Multi-select tags */
|
|
.mx-select-tags{
|
|
display:flex;flex-wrap:wrap;gap:4px;flex:1;
|
|
}
|
|
.mx-select-tag{
|
|
display:inline-flex;align-items:center;gap:4px;
|
|
padding:2px 8px;border-radius:var(--mx-r-pill);
|
|
background:var(--mx-primary-glow);
|
|
color:var(--mx-primary);
|
|
font-size:12px;font-weight:600;
|
|
}
|
|
.mx-select-tag-remove{
|
|
width:14px;height:14px;
|
|
display:flex;align-items:center;justify-content:center;
|
|
border-radius:50%;cursor:pointer;
|
|
transition:background var(--mx-d1);
|
|
}
|
|
.mx-select-tag-remove:hover{background:rgba(52,130,255,0.2)}
|
|
|
|
/* ═══ DARK MODE INNER GLOW — unified with Card/Stat ═══ */
|
|
[data-theme="dark"] .mx-select-dropdown{
|
|
box-shadow:var(--mx-sh3),inset 0 1px 0 rgba(255,255,255,0.04);
|
|
}
|