AskaEth/Scoreboard
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
bc8b1ee6c0bbea3401a588122f19f8c966292721
Scoreboard/vendor/miuix-console/core/glass.css
T
AskaEth bc8b1ee6c0 feat: M3-M7 全模块落地 + 集成接线 
- M3 认证/权限/审计/限流 + 全部 REST 接口
- M4 管理面板（MIUIx + 成绩录入/积分榜下钻/大屏控制）
- M5a 大屏页面（六页 + 明细覆盖层 + 缩放适配）
- M6 WebSocket 实时同步中心
- M7 xlsx 导出 + 赛事包 zip + 备份
- 规则包 YAML 导入导出（差异预览）
- 字体 vendor 子集化（4 套 x2 字重）
- 集成：realtime/export/rules 接入 main+httpapi；backup 子命令
- 修复：中间件包装 ResponseWriter 丢失 Hijacker，导致 WS 握手 501
2026-09-09 19:02:24 +08:00

231 lines
8.8 KiB
CSS
Raw Blame History

/* ═══════════════════════════════════════════
MIUIX CONSOLE — Liquid Glass Effect v2
液体玻璃效果系统（完整版）
通过 [data-glass="liquid"] 属性启用
═══════════════════════════════════════════ */
/* ── Glass Variables ── */
:root {
--mx-glass-blur: 12px;
--mx-glass-saturation: 180%;
--mx-glass-displacement: 25;
--mx-glass-aberration: 2;
--mx-glass-elasticity: 0.15;
--mx-glass-corner-radius: 16px;
--mx-glass-activation-zone: 200;
--mx-glass-bg-light: rgba(255, 255, 255, 0.25);
--mx-glass-bg-dark: rgba(0, 0, 0, 0.35);
--mx-glass-border-light: rgba(255, 255, 255, 0.2);
--mx-glass-border-dark: rgba(255, 255, 255, 0.08);
--mx-glass-mouse-x: 0;
--mx-glass-mouse-y: 0;
}
/* ═══════════════════════════════════════════
DARK MODE (default)
═══════════════════════════════════════════ */
/* ── TopBar ── */
[data-glass="liquid"] .mx-topbar {
background: rgba(22, 22, 22, 0.45);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border-bottom: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ── Sidebar ── */
[data-glass="liquid"] .mx-sidebar {
background: rgba(22, 22, 22, 0.45);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border-right: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ── Bottom Nav ── */
[data-glass="liquid"] .mx-bottom-nav {
background: rgba(22, 22, 22, 0.45);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border-top: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ── Modal ── */
[data-glass="liquid"] .mx-modal {
background: rgba(30, 30, 30, 0.5);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ── Drawer ── */
[data-glass="liquid"] .mx-drawer {
background: rgba(22, 22, 22, 0.5);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border-left: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ── Popover ── */
[data-glass="liquid"] .mx-popover {
background: rgba(30, 30, 30, 0.5);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ── Select Dropdown ── */
[data-glass="liquid"] .mx-select-dropdown {
background: rgba(30, 30, 30, 0.5);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ── Card (opt-in via .mx-card-glass) ── */
[data-glass="liquid"] .mx-card-glass {
background: rgba(30, 30, 30, 0.4);
backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
-webkit-backdrop-filter: blur(var(--mx-glass-blur)) saturate(var(--mx-glass-saturation));
border: 1px solid var(--mx-glass-border-dark);
filter: url(#mx-glass-filter);
}
/* ═══════════════════════════════════════════
LIGHT MODE
═══════════════════════════════════════════ */
[data-theme="light"][data-glass="liquid"] .mx-topbar {
background: rgba(255, 255, 255, 0.45);
border-bottom: 1px solid var(--mx-glass-border-light);
}
[data-theme="light"][data-glass="liquid"] .mx-sidebar {
background: rgba(255, 255, 255, 0.45);
border-right: 1px solid var(--mx-glass-border-light);
}
[data-theme="light"][data-glass="liquid"] .mx-bottom-nav {
background: rgba(255, 255, 255, 0.45);
border-top: 1px solid var(--mx-glass-border-light);
}
[data-theme="light"][data-glass="liquid"] .mx-modal {
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--mx-glass-border-light);
}
[data-theme="light"][data-glass="liquid"] .mx-drawer {
background: rgba(255, 255, 255, 0.5);
border-left: 1px solid var(--mx-glass-border-light);
}
[data-theme="light"][data-glass="liquid"] .mx-popover {
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--mx-glass-border-light);
}
[data-theme="light"][data-glass="liquid"] .mx-select-dropdown {
background: rgba(255, 255, 255, 0.5);
border: 1px solid var(--mx-glass-border-light);
}
[data-theme="light"][data-glass="liquid"] .mx-card-glass {
background: rgba(255, 255, 255, 0.4);
border: 1px solid var(--mx-glass-border-light);
}
/* ═══════════════════════════════════════════
OVER-LIGHT 模式
亮色背景上使用的深色玻璃
═══════════════════════════════════════════ */
[data-glass="liquid"][data-glass-over-light="true"] .mx-topbar,
[data-glass="liquid"][data-glass-over-light="true"] .mx-sidebar,
[data-glass="liquid"][data-glass-over-light="true"] .mx-bottom-nav,
[data-glass="liquid"][data-glass-over-light="true"] .mx-modal,
[data-glass="liquid"][data-glass-over-light="true"] .mx-drawer,
[data-glass="liquid"][data-glass-over-light="true"] .mx-popover,
[data-glass="liquid"][data-glass-over-light="true"] .mx-select-dropdown,
[data-glass="liquid"][data-glass-over-light="true"] .mx-card-glass {
background: rgba(0, 0, 0, 0.45);
border-color: rgba(255, 255, 255, 0.1);
}
/* ═══════════════════════════════════════════
GLASS 可追踪元素
鼠标跟踪 + 弹性变换 + 双层边框
═══════════════════════════════════════════ */
.mx-glass-trackable {
position: relative;
transition: transform 0.2s ease-out;
will-change: transform;
}
.mx-glass-trackable .mx-glass-border-layer {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
z-index: 2;
}
/* Hover 高光层 */
.mx-glass-trackable::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease-out;
background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%);
mix-blend-mode: overlay;
z-index: 3;
}
.mx-glass-trackable:hover::after {
opacity: 0.5;
}
.mx-glass-trackable:active::after {
opacity: 0.8;
background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%);
}
/* ═══════════════════════════════════════════
FALLBACK — browsers without SVG filter support
═══════════════════════════════════════════ */
@supports not (filter: url(#mx-glass-filter)) {
[data-glass="liquid"] .mx-topbar,
[data-glass="liquid"] .mx-sidebar,
[data-glass="liquid"] .mx-bottom-nav,
[data-glass="liquid"] .mx-modal,
[data-glass="liquid"] .mx-drawer,
[data-glass="liquid"] .mx-popover,
[data-glass="liquid"] .mx-select-dropdown,
[data-glass="liquid"] .mx-card-glass {
filter: none;
}
}
/* ═══════════════════════════════════════════
REDUCED MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.mx-glass-trackable {
transition: none !important;
transform: none !important;
}
.mx-glass-trackable::after {
transition: none !important;
}
}
Reference in new issue View Git Blame Copy Permalink